Question: Getting started - use in project

Post Reply
ferdia
Posts: 7
Joined: 01 Jun 2021, 12:25

07 Jun 2021, 22:14

Hi everyone, this is my first post in this forum (bear with me) :)

So my company just bought the license for PrimeVue Designer, and I'm trying to set it up. I've read the Getting Started section and watched the video. But nowhere could I find info on how to get the code included for our styleguide repo (where we intend to combine it with custom build of Bootstrap using kss-node). The idea is to use the same base SASS variables for both. Is there no npm package that would allow us to easily add it to an existing project, and to keep it up to date (e.g. with latest). I really hope that zip-file isn't the only way of getting the code (reminds me of the 90s)!?

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

10 Jun 2021, 11:47

Hi,

1) run sass --update src/assets:src/assets
2) copy the theme.css file
3) paste it your project
4) import the theme.css to the main.js

or second way include the theme file to your project and add sass command to your bundle.

Best,

ferdia
Posts: 7
Joined: 01 Jun 2021, 12:25

16 Jun 2021, 21:06

Thanks for the reply, tugce.kucukoglu. However, I don't understand what you mean. Are you describing how one can add / retain a given theme?

My concern is how to keep PrimeVue Designer as a whole up to date with npm. We're not copying files anymore, as we did 10-20 years ago. And our themes are automatically deployed to CDN at push to master with CI / CD-pipeline (triggering npm scripts - target folder based on version defined in package.json). This is common practice nowadays. Also, we'd like to have PrimeVue under node_modules (no point in having the entire PrimeVue code base under version control). Is there no other way of using PrimeVue Designer then by downloading the code of a specific version as a ZIP-file? If yes, does that mean that we have to do the whole process again when we want to take a newer version into use?

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

17 Jun 2021, 16:41

No, you don't have to download for specific versions as a zip every time to update PrimeVue version. You could just upgrade PrimeVue version of PrimeVue Designer. For example

Code: Select all

npm install primevue@3.5.1

ferdia
Posts: 7
Joined: 01 Jun 2021, 12:25

14 Jul 2021, 13:19

Sorry, didn't understand what you mean. Also, I believe I was unclear. When I wrote...
Also, we'd like to have PrimeVue under node_modules (no point in having the entire PrimeVue code base under version control).
...I actually meant:
Also, we'd like to have PrimeVue Designer under node_modules (no point in having the entire PrimeVue Designer code base under version control).
Sorry for the confusion.
  1. So what I'm was trying to ask, is there something like...

    Code: Select all

    npm install primevue-designer@3.0.1 --save-dev
    Alternatively, is there at least a git repo for PrimeVue Designer that can be include as git submodule?
    Also, I have some further questions....
  2. In the .env file, what is the function of the VUE_APP_THEME_BUILDER_URL the 2nd line?:

    Code: Select all

    VUE_APP_THEME_BUILDER_URL=https://www.primefaces.org/themegen-vue
  3. On the bottom of the documentation it says that the theme can be built like this:

    Code: Select all

    sass --update src/assets/mytheme:src/assets/mytheme
    Which sass command are you invoking here? There are many implementations and versions of sass /scss. I see that "node-sass": "^4.12.0" is included in package.json, but there is no script to use it from CLI.
  4. Will support for Bootstrap 5 be added soon?
  5. I want to define the theme and settings outside the folder structure of primevue-designer (otherwise it is hard to handle updates - overwriting existing code)
  6. npm run build builds an entire vue application (with 3 unminified css files), I'm only interested in one <my-primevue-theme>.min.css and one <my-primevue-theme>.min.css.map file, which I can deploy to CDN to be used for several web applications. How do I do that?
  7. The $colors-map in f.example _variables_light.scss (for bootstrap theme) doesn't seem to be used anywhere. Neither is there a map for $theme-colors (see Bootstrap documentation). Bootstrap's Utlilities API to generate full palette of colors - which I'd expect from a Bootstrap based theme - doesn't seem to be used. Instead, the bootstrap themed include numerous hard-coded color values. Are there any plans to improve this?
Cheers :)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Aug 2021, 16:40

1) Since PrimeVue Theme Designer is not open source, we haven't pushed it to npm due to licensing. However if you have an internal npm repository, you can download the zip file and push it to your own npm repo so that other projects can received it via node_modules. Only downside is, you need to update the npm bundle after a release.

2) It is to configure the web service url that builds the sass to css.

3) Implementation does not matter but usually dart-sass is the suggested one.

4) There are plans but not concrete. Depends on community demand.

5) Variables use !default so order should not matter. There is also _overrides to add your customizations rather than updating the core sass which is not suggested.

6) See #3 please. Or you can let vue-cli do it for you, if you import the sass to a vue-cli app directly.

7) They are used to generate CSS variables.

ferdia
Posts: 7
Joined: 01 Jun 2021, 12:25

07 Aug 2021, 21:47

Thanks for the reply, @cagatay.civici.
  1. Isn't that just a question of setting up an npm registry with authentication scheme (e.g. so one could use a token as secret in CI/CD pipeline)? That would really help a lot. For example, now you just came out with new version of PrimeVue, including new version of PrimeVue Theme designer (3.4.0). It is a hassle to deal with those ZIP-files (and quite honestly, it's a very outdated method for distributing commercially licensed code).
  2. OK, since we're only interested in automated build of theme (using script in package.json file), I guess VUE_APP_THEME_BUILDER_URL isn't relevant - right?
  3. Well, I tried several different implementations and versions, and it took some time to find one that worked. I propose that you include it in your package.json file, along with script that accepts arguments (and some documentation).
  4. We would very much appreciate support for Bootstrap 5, as we are already using it for everything but the vue components from PrimeVue.
  5. Most of the variables in for example src/assets/themes/bootstrap4/bootstrap4-light/_variables_light.scss are not assigned values with !default (EDIT: I see now that version 3.4.0 has added !defaults in the given file). Regarding the _overrides part, could you please point us to the relevant documentation? We fully agree, we don't want to touch the code of the PrimeVue Theme designer. Ideally, we'd just like to run a predefined scipt in package.json that takes some arguments (e.g. base theme that we want to build, and path to file with sass variables to override the defaults).
  6. Our CI/CD pipeline is set up to build and deploy css and css.map files to CDN (along with living style guide and developer portal), so the css can be cached and consumed by several apps independently of one another. So we're not relating to vue-cli for themes at all. See previous point for our needs. Your reply to #3 doesn't seem relevant in that regard, sorry :)
  7. You wrote : "They are used to generate CSS variables." (with reference to $theme-colors map as described in Bootstrap documentation), along with Bootstrap's Utlilities API). Sorry, but we couldn't understand what you mean with "They are used to generate CSS variables.". If you look at the above mentioned _variables_light.scss file, I can see there is another map, named $colors. But then this file also contains a lot of other hardcoded color values, which don't relate to the $colors map (e.g. $errorColor: #dc3545;). In total there are 130 hardcoded hex color assignments in that file, and 36 hardcoded rgba color assignments (none of which reuse predefined variables). We assume it would be possible to do with no more than around 10 primary theme colors, another 10 for grayscale range, and some explicit assignments to semantic colors (e.g $danger:$red;). The rest can be re-assignments of variables, use of mixins, and use of placeholders and @extend (to make the scss and resulting css in compliance with the DRY principle). That's how we already do it with our custom build of Bootstrap.

ferdia
Posts: 7
Joined: 01 Jun 2021, 12:25

22 Sep 2021, 21:16

Hello. Is there anybody from Prime Faces who can follow up this thread (see out post from 7th of August)?

BTW: I'm not able to figure out how to reach support either. The support page https://www.primefaces.org/support/ is just sales - no way to create support ticket (although I'm logged in with our accounts, which should be linked to our subscription).

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

26 Sep 2021, 12:50

Apologies for the delay, there was an issue with the notification system at the time of your reply in 7th of august.

1) Could be but there is no significant demand for us to implement this yet.

2) Yes, it is not relevant.

3) We'll consider it, thanks.

4) There are plans for a Bootstrap 5 skin but there doesn't seem to be a drastic change between 4 and 5.

5) Recent versions have added !default where available. Not sure what you mean by documenting _overrides, Customization section in the docs tries to explain how to maintain your theme when a designer is updated.

6) Designer app itself is a vue-cli one, the important part is the sass/designer where you can take and customize per your requirements.

7) See the designer/_colors.scss. It takes a map of colors and generates shades and tints for it for the CSS variables. PrimeVue designer has no relation to bootstrap sass, it provide a skin for a bootstrap.
See https://primefaces.org/primevue/showcase/#/colors.

In general, there are a couple of things to realize with the theme designer so that you can use it efficiently.

1) It uses Vue-CLI for the demos but main part is scss files of components which you can use in your own build and development process with tools of your choice. Integrating sass files is a bit out of scope of designer support. Support mainly covers designer and sass api itself, not integrating it with a custom build as it can be used in many ways whether with integrated sass build or directly including the generated theme css file.

2) Material, Tailwind, Bootstrap, FluentUI themes does not use any 3rd party file or library, they provide a skin for PrimeVue components instead. You cannot use bootstrap scss files to skin PrimeVue because PrimeVue does not use Bootstrap. It is design agnostic so does not use any 3rd party css lib.

Hope this helps.

3) Support tickets are exclusive to PRO users via private JIRA, designer support is delivered via this forum. For PRO support, please see;

https://pro.primefaces.org

Post Reply

Return to “PrimeVue Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests