Fixed #4530 - Export styles of all components

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.vscode/settings.team.json

@@ -15,5 +15,9 @@
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     }
 }

build-meta.js

@@ -1,7 +1,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 
-function copyDependencies(inFolder, outFolder) {
+function copyDependencies(inFolder, outFolder, subFolder) {
     fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true })
         .filter((dir) => dir.isDirectory())
         .forEach(({ name: folderName }) => {
@@ -10,10 +10,20 @@ function copyDependencies(inFolder, outFolder) {
                     fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file);
                 }
             });
+
+            if (subFolder) {
+                try {
+                    fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => {
+                        if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) {
+                            fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile);
+                        }
+                    });
+                } catch {}
+            }
         });
 }
 
-copyDependencies('./components/lib/', 'dist/');
+copyDependencies('./components/lib/', 'dist/', '/style');
 copyDependencies('./components/lib/icons/', 'dist/icons/');
 copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
 

components/lib/accordion/BaseAccordion.vue

@@ -1,53 +1,6 @@
 <script>
+import AccordionStyle from 'primevue/accordion/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-accordion-header-action {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        user-select: none;
-        position: relative;
-        text-decoration: none;
-    }
-    
-    .p-accordion-header-action:focus {
-        z-index: 1;
-    }
-    
-    .p-accordion-header-text {
-        line-height: 1;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-accordion p-component',
-    tab: {
-        root: ({ instance, index }) => [
-            'p-accordion-tab',
-            {
-                'p-accordion-tab-active': instance.isTabActive(index)
-            }
-        ],
-        header: ({ instance, tab, index }) => [
-            'p-accordion-header',
-            {
-                'p-highlight': instance.isTabActive(index),
-                'p-disabled': instance.getTabProp(tab, 'disabled')
-            }
-        ],
-        headerAction: 'p-accordion-header-link p-accordion-header-action',
-        headerIcon: 'p-accordion-toggle-icon',
-        headerTitle: 'p-accordion-header-text',
-        toggleableContent: 'p-toggleable-content',
-        content: 'p-accordion-content'
-    }
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
 
 export default {
     name: 'BaseAccordion',
@@ -82,10 +35,7 @@ export default {
             default: false
         }
     },
-    css: {
+    style: AccordionStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/accordion/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./accordion.cjs.js",
+    "main": "./accordion.cjs.js",
-  "module": "./accordion.esm.js",
+    "module": "./accordion.esm.js",
-  "unpkg": "./accordion.min.js",
+    "unpkg": "./accordion.min.js",
-  "types": "./Accordion.d.ts",
+    "types": "./Accordion.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Accordion.vue"
+        "./sfc": "./Accordion.vue"
-  }
+    }
 }

components/lib/accordion/style/AccordionStyle.js

@@ -0,0 +1,52 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-accordion-header-action {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        position: relative;
+        text-decoration: none;
+    }
+    
+    .p-accordion-header-action:focus {
+        z-index: 1;
+    }
+    
+    .p-accordion-header-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-accordion p-component',
+    tab: {
+        root: ({ instance, index }) => [
+            'p-accordion-tab',
+            {
+                'p-accordion-tab-active': instance.isTabActive(index)
+            }
+        ],
+        header: ({ instance, tab, index }) => [
+            'p-accordion-header',
+            {
+                'p-highlight': instance.isTabActive(index),
+                'p-disabled': instance.getTabProp(tab, 'disabled')
+            }
+        ],
+        headerAction: 'p-accordion-header-link p-accordion-header-action',
+        headerIcon: 'p-accordion-toggle-icon',
+        headerTitle: 'p-accordion-header-text',
+        toggleableContent: 'p-toggleable-content',
+        content: 'p-accordion-content'
+    }
+};
+
+export default BaseStyle.extend({
+    name: 'accordion',
+    css,
+    classes
+});

components/lib/accordion/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./accordionstyle.cjs.js",
+    "module": "./accordionstyle.esm.js",
+    "unpkg": "./accordionstyle.min.js"
+}

components/lib/accordiontab/BaseAccordionTab.vue

@@ -1,4 +1,5 @@
 <script>
+import AccordionTabStyle from 'primevue/accordiontab/style';
 import BaseComponent from 'primevue/basecomponent';
 
 export default {
@@ -15,6 +16,7 @@ export default {
         contentProps: null,
         disabled: Boolean
     },
+    style: AccordionTabStyle,
     provide() {
         return {
             $parentInstance: this

components/lib/accordiontab/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./accordiontab.cjs.js",
+    "main": "./accordiontab.cjs.js",
-  "module": "./accordiontab.esm.js",
+    "module": "./accordiontab.esm.js",
-  "unpkg": "./accordiontab.min.js",
+    "unpkg": "./accordiontab.min.js",
-  "types": "./AccordionTab.d.ts",
+    "types": "./AccordionTab.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./AccordionTab.vue"
+        "./sfc": "./AccordionTab.vue"
-  }
+    }
 }

components/lib/accordiontab/style/AccordionTabStyle.js

@@ -0,0 +1 @@
+export default {};

components/lib/accordiontab/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./accordiontabstyle.cjs.js",
+    "module": "./accordiontabstyle.esm.js",
+    "unpkg": "./accordiontabstyle.min.js"
+}

components/lib/autocomplete/BaseAutoComplete.vue

@@ -1,154 +1,6 @@
 <script>
+import AutoCompleteStyle from 'primevue/autocomplete/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-import { ObjectUtils } from 'primevue/utils';
-
-const styles = `
-@layer primevue {
-    .p-autocomplete {
-        display: inline-flex;
-    }
-
-    .p-autocomplete-loader {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-input {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-input,
-    .p-autocomplete-dd .p-autocomplete-multiple-container {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-dropdown {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0px;
-    }
-
-    .p-autocomplete .p-autocomplete-panel {
-        min-width: 100%;
-    }
-
-    .p-autocomplete-panel {
-        position: absolute;
-        overflow: auto;
-        top: 0;
-        left: 0;
-    }
-
-    .p-autocomplete-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-
-    .p-autocomplete-item {
-        cursor: pointer;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .p-autocomplete-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .p-autocomplete-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-
-    .p-autocomplete-token-icon {
-        cursor: pointer;
-    }
-
-    .p-autocomplete-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-
-    .p-autocomplete-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-
-    .p-fluid .p-autocomplete {
-        display: flex;
-    }
-
-    .p-fluid .p-autocomplete-dd .p-autocomplete-input {
-        width: 1%;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: { position: 'relative' }
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-autocomplete p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-autocomplete-dd': props.dropdown,
-            'p-autocomplete-multiple': props.multiple,
-            'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
-            'p-inputwrapper-focus': instance.focused,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
-    container: 'p-autocomplete-multiple-container p-component p-inputtext',
-    token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
-    tokenLabel: 'p-autocomplete-token-label',
-    removeTokenIcon: 'p-autocomplete-token-icon',
-    inputToken: 'p-autocomplete-input-token',
-    loadingIcon: 'p-autocomplete-loader',
-    dropdownButton: 'p-autocomplete-dropdown',
-    panel: ({ instance }) => [
-        'p-autocomplete-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    list: 'p-autocomplete-items',
-    itemGroup: 'p-autocomplete-item-group',
-    item: ({ instance, option, i, getItemOptions }) => [
-        'p-autocomplete-item',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    emptyMessage: 'p-autocomplete-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
 
 export default {
     name: 'BaseAutoComplete',
@@ -314,11 +166,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: AutoCompleteStyle,
-        classes,
-        inlineStyles,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/autocomplete/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./autocomplete.cjs.js",
+    "main": "./autocomplete.cjs.js",
-  "module": "./autocomplete.esm.js",
+    "module": "./autocomplete.esm.js",
-  "unpkg": "./autocomplete.min.js",
+    "unpkg": "./autocomplete.min.js",
-  "types": "./AutoComplete.d.ts",
+    "types": "./AutoComplete.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./AutoComplete.vue"
+        "./sfc": "./AutoComplete.vue"
-  }
+    }
 }

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -0,0 +1,154 @@
+import BaseStyle from 'primevue/base/style';
+import { ObjectUtils } from 'primevue/utils';
+
+const css = `
+@layer primevue {
+    .p-autocomplete {
+        display: inline-flex;
+    }
+
+    .p-autocomplete-loader {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-input {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-input,
+    .p-autocomplete-dd .p-autocomplete-multiple-container {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-dropdown {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0px;
+    }
+
+    .p-autocomplete .p-autocomplete-panel {
+        min-width: 100%;
+    }
+
+    .p-autocomplete-panel {
+        position: absolute;
+        overflow: auto;
+        top: 0;
+        left: 0;
+    }
+
+    .p-autocomplete-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-autocomplete-item {
+        cursor: pointer;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-autocomplete-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-autocomplete-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-autocomplete-token-icon {
+        cursor: pointer;
+    }
+
+    .p-autocomplete-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .p-autocomplete-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .p-fluid .p-autocomplete {
+        display: flex;
+    }
+
+    .p-fluid .p-autocomplete-dd .p-autocomplete-input {
+        width: 1%;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-autocomplete p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-autocomplete-dd': props.dropdown,
+            'p-autocomplete-multiple': props.multiple,
+            'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
+            'p-inputwrapper-focus': instance.focused,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
+    container: 'p-autocomplete-multiple-container p-component p-inputtext',
+    token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
+    tokenLabel: 'p-autocomplete-token-label',
+    removeTokenIcon: 'p-autocomplete-token-icon',
+    inputToken: 'p-autocomplete-input-token',
+    loadingIcon: 'p-autocomplete-loader',
+    dropdownButton: 'p-autocomplete-dropdown',
+    panel: ({ instance }) => [
+        'p-autocomplete-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    list: 'p-autocomplete-items',
+    itemGroup: 'p-autocomplete-item-group',
+    item: ({ instance, option, i, getItemOptions }) => [
+        'p-autocomplete-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-autocomplete-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'autocomplete',
+    css,
+    classes,
+    inlineStyles
+});

components/lib/autocomplete/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./autocompletestyle.cjs.js",
+    "module": "./autocompletestyle.esm.js",
+    "unpkg": "./autocompletestyle.min.js"
+}

components/lib/avatar/BaseAvatar.vue

@@ -1,56 +1,6 @@
 <script>
+import AvatarStyle from 'primevue/avatar/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-avatar {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 2rem;
-        height: 2rem;
-        font-size: 1rem;
-    }
-    
-    .p-avatar.p-avatar-image {
-        background-color: transparent;
-    }
-    
-    .p-avatar.p-avatar-circle {
-        border-radius: 50%;
-    }
-    
-    .p-avatar-circle img {
-        border-radius: 50%;
-    }
-    
-    .p-avatar .p-avatar-icon {
-        font-size: 1rem;
-    }
-    
-    .p-avatar img {
-        width: 100%;
-        height: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-avatar p-component',
-        {
-            'p-avatar-image': props.image != null,
-            'p-avatar-circle': props.shape === 'circle',
-            'p-avatar-lg': props.size === 'large',
-            'p-avatar-xl': props.size === 'xlarge'
-        }
-    ],
-    label: 'p-avatar-text',
-    icon: 'p-avatar-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
 
 export default {
     name: 'BaseAvatar',
@@ -85,10 +35,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: AvatarStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/avatar/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./avatar.cjs.js",
+    "main": "./avatar.cjs.js",
-  "module": "./avatar.esm.js",
+    "module": "./avatar.esm.js",
-  "unpkg": "./avatar.min.js",
+    "unpkg": "./avatar.min.js",
-  "types": "./Avatar.d.ts",
+    "types": "./Avatar.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Avatar.vue"
+        "./sfc": "./Avatar.vue"
-  }
+    }
 }

components/lib/avatar/style/AvatarStyle.js

@@ -0,0 +1,55 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        font-size: 1rem;
+    }
+
+    .p-avatar.p-avatar-image {
+        background-color: transparent;
+    }
+
+    .p-avatar.p-avatar-circle {
+        border-radius: 50%;
+    }
+
+    .p-avatar-circle img {
+        border-radius: 50%;
+    }
+
+    .p-avatar .p-avatar-icon {
+        font-size: 1rem;
+    }
+
+    .p-avatar img {
+        width: 100%;
+        height: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-avatar p-component',
+        {
+            'p-avatar-image': props.image != null,
+            'p-avatar-circle': props.shape === 'circle',
+            'p-avatar-lg': props.size === 'large',
+            'p-avatar-xl': props.size === 'xlarge'
+        }
+    ],
+    label: 'p-avatar-text',
+    icon: 'p-avatar-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'avatar',
+    css,
+    classes
+});

components/lib/avatar/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./avatarstyle.cjs.js",
+    "module": "./avatarstyle.esm.js",
+    "unpkg": "./avatarstyle.min.js"
+}

components/lib/avatargroup/BaseAvatarGroup.vue

@@ -1,33 +1,11 @@
 <script>
+import AvatarGroupStyle from 'primevue/avatargroup/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-avatar-group .p-avatar + .p-avatar {
-        margin-left: -1rem;
-    }
-    
-    .p-avatar-group {
-        display: flex;
-        align-items: center;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-avatar-group p-component'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
 
 export default {
     name: 'BaseAvatarGroup',
     extends: BaseComponent,
-    css: {
+    style: AvatarGroupStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/avatargroup/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./avatargroup.cjs.js",
+    "main": "./avatargroup.cjs.js",
-  "module": "./avatargroup.esm.js",
+    "module": "./avatargroup.esm.js",
-  "unpkg": "./avatargroup.min.js",
+    "unpkg": "./avatargroup.min.js",
-  "types": "./AvatarGroup.d.ts",
+    "types": "./AvatarGroup.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./AvatarGroup.vue"
+        "./sfc": "./AvatarGroup.vue"
-  }
+    }
 }

components/lib/avatargroup/style/AvatarGroupStyle.js

@@ -0,0 +1,24 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-avatar-group .p-avatar + .p-avatar {
+        margin-left: -1rem;
+    }
+
+    .p-avatar-group {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-avatar-group p-component'
+};
+
+export default BaseStyle.extend({
+    name: 'avatargroup',
+    css,
+    classes
+});

components/lib/avatargroup/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./avatargroupstyle.cjs.js",
+    "module": "./avatargroupstyle.esm.js",
+    "unpkg": "./avatargroupstyle.min.js"
+}

components/lib/badge/BaseBadge.vue

@@ -1,62 +1,6 @@
 <script>
+import BadgeStyle from 'primevue/badge/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-import { ObjectUtils } from 'primevue/utils';
-
-const styles = `
-@layer primevue {
-    .p-badge {
-        display: inline-block;
-        border-radius: 10px;
-        text-align: center;
-        padding: 0 .5rem;
-    }
-    
-    .p-overlay-badge {
-        position: relative;
-    }
-    
-    .p-overlay-badge .p-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%,-50%);
-        transform-origin: 100% 0;
-        margin: 0;
-    }
-    
-    .p-badge-dot {
-        width: .5rem;
-        min-width: .5rem;
-        height: .5rem;
-        border-radius: 50%;
-        padding: 0;
-    }
-    
-    .p-badge-no-gutter {
-        padding: 0;
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props, instance }) => [
-        'p-badge p-component',
-        {
-            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
-            'p-badge-lg': props.size === 'large',
-            'p-badge-xl': props.size === 'xlarge',
-            'p-badge-info': props.severity === 'info',
-            'p-badge-success': props.severity === 'success',
-            'p-badge-warning': props.severity === 'warning',
-            'p-badge-danger': props.severity === 'danger'
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 export default {
     name: 'BaseBadge',
@@ -75,10 +19,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: BadgeStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/badge/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./badge.cjs.js",
+    "main": "./badge.cjs.js",
-  "module": "./badge.esm.js",
+    "module": "./badge.esm.js",
-  "unpkg": "./badge.min.js",
+    "unpkg": "./badge.min.js",
-  "types": "./Badge.d.ts",
+    "types": "./Badge.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Badge.vue"
+        "./sfc": "./Badge.vue"
-  }
+    }
 }

components/lib/badge/style/BadgeStyle.js

@@ -0,0 +1,61 @@
+import BaseStyle from 'primevue/base/style';
+import { ObjectUtils } from 'primevue/utils';
+
+const css = `
+@layer primevue {
+    .p-badge {
+        display: inline-block;
+        border-radius: 10px;
+        text-align: center;
+        padding: 0 .5rem;
+    }
+
+    .p-overlay-badge {
+        position: relative;
+    }
+
+    .p-overlay-badge .p-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .p-badge-dot {
+        width: .5rem;
+        min-width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .p-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, instance }) => [
+        'p-badge p-component',
+        {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            'p-badge-info': props.severity === 'info',
+            'p-badge-success': props.severity === 'success',
+            'p-badge-warning': props.severity === 'warning',
+            'p-badge-danger': props.severity === 'danger'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'badge',
+    css,
+    classes
+});

components/lib/badge/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./badgestyle.cjs.js",
+    "module": "./badgestyle.esm.js",
+    "unpkg": "./badgestyle.min.js"
+}

components/lib/badgedirective/BaseBadgeDirective.js

@@ -1,54 +1,8 @@
+import BadgeDirectiveStyle from 'primevue/badgedirective/style';
 import BaseDirective from 'primevue/basedirective';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-badge {
-        display: inline-block;
-        border-radius: 10px;
-        text-align: center;
-        padding: 0 .5rem;
-    }
-    
-    .p-overlay-badge {
-        position: relative;
-    }
-    
-    .p-overlay-badge .p-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%,-50%);
-        transform-origin: 100% 0;
-        margin: 0;
-    }
-    
-    .p-badge-dot {
-        width: .5rem;
-        min-width: .5rem;
-        height: .5rem;
-        border-radius: 50%;
-        padding: 0;
-    }
-
-    .p-badge-no-gutter {
-        padding: 0;
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-badge p-component'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 const BaseBadgeDirective = BaseDirective.extend({
-    css: {
+    style: BadgeDirectiveStyle
-        classes,
-        loadStyle
-    }
 });
 
 export default BaseBadgeDirective;

components/lib/badgedirective/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "./badgedirective.cjs.js",
+    "main": "./badgedirective.cjs.js",
-  "module": "./badgedirective.esm.js",
+    "module": "./badgedirective.esm.js",
-  "unpkg": "./badgedirective.min.js",
+    "unpkg": "./badgedirective.min.js",
-  "types": "./BadgeDirective.d.ts"
+    "types": "./BadgeDirective.d.ts"
 }

components/lib/badgedirective/style/BadgeDirectiveStyle.js

@@ -0,0 +1,48 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-badge {
+        display: inline-block;
+        border-radius: 10px;
+        text-align: center;
+        padding: 0 .5rem;
+    }
+
+    .p-overlay-badge {
+        position: relative;
+    }
+
+    .p-overlay-badge .p-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .p-badge-dot {
+        width: .5rem;
+        min-width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .p-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-badge p-component'
+};
+
+export default BaseStyle.extend({
+    name: 'badge',
+    css,
+    classes
+});

components/lib/badgedirective/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./badgedirectivestyle.cjs.js",
+    "module": "./badgedirectivestyle.esm.js",
+    "unpkg": "./badgedirectivestyle.min.js"
+}

components/lib/base/Base.js

@@ -1,32 +1 @@
-import { useStyle } from 'primevue/usestyle';
+export default {};
-
-const styles = `
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
-.p-overflow-hidden {
-    overflow: hidden;
-    padding-right: var(--scrollbar-width);
-}
-`;
-
-export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
-
-const Base = {
-    styles
-};
-
-export default Base;

components/lib/base/style/BaseStyle.js

@@ -0,0 +1,48 @@
+import { useStyle } from 'primevue/usestyle';
+
+const css = `
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
+.p-overflow-hidden {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+`;
+
+const classes = {};
+
+const inlineStyles = {};
+
+export default {
+    name: 'base',
+    css,
+    classes,
+    inlineStyles,
+    loadStyle(options = {}) {
+        return useStyle(this.css, { name: this.name, ...options });
+    },
+    getStyleSheet(extendedCSS = '', props = {}) {
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+
+        return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${this.css}${extendedCSS}</style>`;
+    },
+    extend(style) {
+        return { ...this, ...style };
+    }
+};

components/lib/base/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./basestyle.cjs.js",
+    "module": "./basestyle.esm.js",
+    "unpkg": "./basestyle.min.js"
+}

components/lib/basecomponent/BaseComponent.vue

@@ -1,365 +1,8 @@
 <script>
-import { loadBaseStyle } from 'primevue/base';
+import BaseStyle from 'primevue/base/style';
-import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
-
+import BaseComponentStyle from './style/BaseComponentStyle';
-const inlineStyles = {};
-
-const buttonStyles = `
-.p-button {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    vertical-align: bottom;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-button-label {
-    flex: 1 1 auto;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-only {
-    justify-content: center;
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-    flex: 0 0 auto;
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-buttonset .p-button {
-    margin: 0;
-}
-
-.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
-    border-right: 0 none;
-}
-
-.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.p-buttonset .p-button:first-of-type:not(:only-of-type) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type:not(:only-of-type) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}
-`;
-const checkboxStyles = `
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: default;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-`;
-const inputTextStyles = `
-.p-fluid .p-inputtext {
-    width: 100%;
-}
-
-/* InputGroup */
-.p-inputgroup {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-inputgroup .p-float-label {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position: relative;
-}
-
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
-
-.p-float-label textarea ~ label {
-    top: 1rem;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-    top: -.75rem;
-    font-size: 12px;
-}
-
-.p-float-label .input:-webkit-autofill ~ label {
-    top: -20px;
-    font-size: 12px;
-}
-
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-    position: relative;
-    display: inline-block;
-}
-
-.p-input-icon-left > i,
-.p-input-icon-left > svg,
-.p-input-icon-right > i,
-.p-input-icon-right > svg {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
-}
-
-.p-fluid .p-input-icon-left,
-.p-fluid .p-input-icon-right {
-    display: block;
-    width: 100%;
-}
-`;
-const radioButtonStyles = `
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton.p-radiobutton-disabled {
-    cursor: default;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
-`;
-const styles = `
-@layer primevue {
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled, .p-disabled * {
-    cursor: default !important;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-unselectable-text {
-    user-select: none;
-}
-
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
-}
-
-.p-link {
-	text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-	cursor: default;
-}
-
-/* Non vue overlay animations */
-.p-connected-overlay {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-visible {
-    opacity: 1;
-    transform: scaleY(1);
-}
-
-.p-connected-overlay-hidden {
-    opacity: 0;
-    transform: scaleY(1);
-    transition: opacity .1s linear;
-}
-
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
-.p-connected-overlay-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-leave-active {
-    transition: opacity .1s linear;
-}
-
-/* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
-    max-height: 0;
-}
-
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
-    max-height: 1000px;
-}
-
-.p-toggleable-content-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-toggleable-content-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
-${buttonStyles}
-${checkboxStyles}
-${inputTextStyles}
-${radioButtonStyles}
-}
-`;
-
-const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
-const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
 
 export default {
     name: 'BaseComponent',
@@ -387,8 +30,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (!newValue) {
-                    loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+                    BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
-                    this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+                    this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
                 }
             }
         }
@@ -410,7 +53,7 @@ export default {
         this._hook('onCreated');
     },
     beforeMount() {
-        loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
+        BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
         this._loadGlobalStyles();
         this._hook('onBeforeMount');
     },
@@ -452,7 +95,7 @@ export default {
 
             const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
 
-            ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
+            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -535,12 +178,12 @@ export default {
             return this._getPTValue(obj, key, { instance: this, ...params }, false);
         },
         cx(key = '', params = {}) {
-            return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
+            return !this.isUnstyled ? this._getOptionValue(this.$style.classes, key, { ...this.$params, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
-                const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
+                const self = this._getOptionValue(this.$style.inlineStyles, key, { ...this.$params, ...params });
-                const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
+                const base = this._getOptionValue(BaseComponentStyle.inlineStyles, key, { ...this.$params, ...params });
 
                 return [base, self];
             }
@@ -561,8 +204,8 @@ export default {
         $params() {
             return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
         },
-        $css() {
+        $style() {
-            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
+            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
         },
         $config() {
             return this.$primevue?.config;

components/lib/basecomponent/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./basecomponent.cjs.js",
+    "main": "./basecomponent.cjs.js",
-  "module": "./basecomponent.esm.js",
+    "module": "./basecomponent.esm.js",
-  "unpkg": "./basecomponent.min.js",
+    "unpkg": "./basecomponent.min.js",
-  "types": "./BaseComponent.d.ts",
+    "types": "./BaseComponent.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./BaseComponent.vue"
+        "./sfc": "./BaseComponent.vue"
-  }
+    }
 }

components/lib/basecomponent/style/BaseComponentStyle.js

@@ -0,0 +1,364 @@
+import BaseStyle from 'primevue/base/style';
+import { useStyle } from 'primevue/usestyle';
+
+const buttonCSS = `
+.p-button {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-buttonset .p-button {
+    margin: 0;
+}
+
+.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
+    border-right: 0 none;
+}
+
+.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-buttonset .p-button:first-of-type:not(:only-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-buttonset .p-button:last-of-type:not(:only-of-type) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-buttonset .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+`;
+
+const checkboxCSS = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: default;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
+
+const inputTextCSS = `
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .input:-webkit-autofill ~ label {
+    top: -20px;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}
+`;
+
+const radioButtonCSS = `
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton.p-radiobutton-disabled {
+    cursor: default;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+`;
+
+const css = `
+@layer primevue {
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+
+.p-hidden-space {
+    visibility: hidden;
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+
+.p-disabled, .p-disabled * {
+    cursor: default !important;
+    pointer-events: none;
+    user-select: none;
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-unselectable-text {
+    user-select: none;
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
+.p-link {
+	text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-link:disabled {
+	cursor: default;
+}
+
+/* Non vue overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-connected-overlay-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-connected-overlay-leave-to {
+    opacity: 0;
+}
+
+.p-connected-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-leave-active {
+    transition: opacity .1s linear;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+${buttonCSS}
+${checkboxCSS}
+${inputTextCSS}
+${radioButtonCSS}
+}
+`;
+
+export default BaseStyle.extend({
+    name: 'common',
+    css,
+    loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options })
+});

components/lib/basecomponent/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./basecomponentstyle.cjs.js",
+    "module": "./basecomponentstyle.esm.js",
+    "unpkg": "./basecomponentstyle.min.js"
+}

components/lib/basedirective/BaseDirective.js

@@ -1,4 +1,4 @@
-import { loadBaseStyle } from 'primevue/base';
+import BaseStyle from 'primevue/base/style';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
@@ -94,7 +94,7 @@ const BaseDirective = {
                 $host: el,
                 $binding: binding,
                 $el: $prevInstance['$el'] || undefined,
-                $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
+                $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
                 $config: config,
                 /* computed instance variables */
                 defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
@@ -102,8 +102,8 @@ const BaseDirective = {
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
                 ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
-                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$css?.classes, key, { ...params }) : undefined),
+                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
-                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$css?.inlineStyles, key, { ...params }) : undefined),
+                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
                 ...$options
             };
 
@@ -119,8 +119,8 @@ const BaseDirective = {
             beforeMount: (el, binding, vnode, prevVnode) => {
                 const config = binding?.instance?.$primevue?.config;
 
-                loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
+                BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
-                !el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
+                !el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {

components/lib/baseicon/BaseIcon.vue

@@ -1,42 +1,7 @@
 <script>
-import { useStyle } from 'primevue/usestyle';
+import BaseIconStyle from 'primevue/baseicon/style';
 import { ObjectUtils } from 'primevue/utils';
 
-const styles = `
-.p-icon {
-    display: inline-block;
-}
-
-.p-icon-spin {
-    -webkit-animation: p-icon-spin 2s infinite linear;
-    animation: p-icon-spin 2s infinite linear;
-}
-
-@-webkit-keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
-@keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-`;
-
-const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
-
 export default {
     name: 'BaseIcon',
     props: {
@@ -50,7 +15,7 @@ export default {
         }
     },
     beforeMount() {
-        loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+        BaseIconStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
     },
     methods: {
         pti() {

components/lib/baseicon/package.json

@@ -1,8 +1,8 @@
 {
-  "main": "./baseicon.cjs.js",
+    "main": "./baseicon.cjs.js",
-  "module": "./baseicon.esm.js",
+    "module": "./baseicon.esm.js",
-  "unpkg": "./baseicon.min.js",
+    "unpkg": "./baseicon.min.js",
-  "browser": {
+    "browser": {
-    "./sfc": "./BaseIcon.vue"
+        "./sfc": "./BaseIcon.vue"
-  }
+    }
 }

components/lib/baseicon/style/BaseIconStyle.js

@@ -0,0 +1,39 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+.p-icon {
+    display: inline-block;
+}
+
+.p-icon-spin {
+    -webkit-animation: p-icon-spin 2s infinite linear;
+    animation: p-icon-spin 2s infinite linear;
+}
+
+@-webkit-keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+`;
+
+export default BaseStyle.extend({
+    name: 'baseicon',
+    css
+});

components/lib/baseicon/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./baseiconstyle.cjs.js",
+    "module": "./baseiconstyle.esm.js",
+    "unpkg": "./baseiconstyle.min.js"
+}

components/lib/blockui/BaseBlockUI.vue

@@ -1,28 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import BlockUIStyle from 'primevue/blockui/style';
-
-const styles = `
-@layer primevue {
-    .p-blockui-container {
-        position: relative;
-    }
-    
-    .p-blockui.p-component-overlay {
-        position: absolute;
-    }
-    
-    .p-blockui-document.p-component-overlay {
-        position: fixed;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-blockui-container'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
 
 export default {
     name: 'BaseBlockUI',
@@ -45,10 +23,7 @@ export default {
             default: true
         }
     },
-    css: {
+    style: BlockUIStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/blockui/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./blockui.cjs.js",
+    "main": "./blockui.cjs.js",
-  "module": "./blockui.esm.js",
+    "module": "./blockui.esm.js",
-  "unpkg": "./blockui.min.js",
+    "unpkg": "./blockui.min.js",
-  "types": "./BlockUI.d.ts",
+    "types": "./BlockUI.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./BlockUI.vue"
+        "./sfc": "./BlockUI.vue"
-  }
+    }
 }

components/lib/blockui/style/BlockUIStyle.js

@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-blockui-container {
+        position: relative;
+    }
+
+    .p-blockui.p-component-overlay {
+        position: absolute;
+    }
+
+    .p-blockui-document.p-component-overlay {
+        position: fixed;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-blockui-container'
+};
+
+export default BaseStyle.extend({
+    name: 'blockui',
+    css,
+    classes
+});

components/lib/blockui/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./blockuistyle.cjs.js",
+    "module": "./blockuistyle.esm.js",
+    "unpkg": "./blockuistyle.min.js"
+}

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -1,61 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import BreadcrumbStyle from 'primevue/breadcrumb/style';
-
-const styles = `
-@layer primevue {
-    .p-breadcrumb {
-        overflow-x: auto;
-    }
-    
-    .p-breadcrumb .p-breadcrumb-list {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-    }
-    
-    .p-breadcrumb .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-breadcrumb .p-menuitem-link {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-breadcrumb .p-menuitem-separator {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-breadcrumb::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-breadcrumb p-component',
-    menu: 'p-breadcrumb-list',
-    home: 'p-breadcrumb-home',
-    separator: 'p-menuitem-separator',
-    menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
 
 export default {
     name: 'BaseBreadcrumb',
@@ -74,10 +19,7 @@ export default {
             default: true
         }
     },
-    css: {
+    style: BreadcrumbStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/breadcrumb/package.json

@@ -1,10 +1,9 @@
 {
-  "main": "./breadcrumb.cjs.js",
+    "main": "./breadcrumb.cjs.js",
-  "module": "./breadcrumb.esm.js",
+    "module": "./breadcrumb.esm.js",
-  "unpkg": "./breadcrumb.min.js",
+    "unpkg": "./breadcrumb.min.js",
-  "types": "./Breadcrumb.d.ts"
+    "types": "./Breadcrumb.d.ts",
-  ,
+    "browser": {
-  "browser": {
+        "./sfc": "./Breadcrumb.vue"
-    "./sfc": "./Breadcrumb.vue"
+    }
-  }
 }

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -0,0 +1,60 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-breadcrumb {
+        overflow-x: auto;
+    }
+
+    .p-breadcrumb .p-breadcrumb-list {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .p-breadcrumb .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-breadcrumb .p-menuitem-link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb .p-menuitem-separator {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-breadcrumb p-component',
+    menu: 'p-breadcrumb-list',
+    home: 'p-breadcrumb-home',
+    separator: 'p-menuitem-separator',
+    menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text'
+};
+
+export default BaseStyle.extend({
+    name: 'breadcrumb',
+    css,
+    classes
+});

components/lib/breadcrumb/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./breadcrumbstyle.cjs.js",
+    "module": "./breadcrumbstyle.esm.js",
+    "unpkg": "./breadcrumbstyle.min.js"
+}

components/lib/button/BaseButton.vue

@@ -1,38 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
+import ButtonStyle from 'primevue/button/style';
-const classes = {
-    root: ({ instance, props }) => [
-        'p-button p-component',
-        {
-            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
-            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
-            'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
-            'p-button-loading': props.loading,
-            'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
-            'p-button-link': props.link,
-            [`p-button-${props.severity}`]: props.severity,
-            'p-button-raised': props.raised,
-            'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
-            'p-button-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large',
-            'p-button-plain': props.plain
-        }
-    ],
-    loadingIcon: 'p-button-loading-icon pi-spin',
-    icon: ({ props }) => [
-        'p-button-icon',
-        {
-            'p-button-icon-left': props.iconPos === 'left' && props.label,
-            'p-button-icon-right': props.iconPos === 'right' && props.label,
-            'p-button-icon-top': props.iconPos === 'top' && props.label,
-            'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
-        }
-    ],
-    label: 'p-button-label'
-};
 
 export default {
     name: 'BaseButton',
@@ -103,9 +71,7 @@ export default {
             default: false
         }
     },
-    css: {
+    style: ButtonStyle,
-        classes
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/button/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./button.cjs.js",
+    "main": "./button.cjs.js",
-  "module": "./button.esm.js",
+    "module": "./button.esm.js",
-  "unpkg": "./button.min.js",
+    "unpkg": "./button.min.js",
-  "types": "./Button.d.ts",
+    "types": "./Button.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Button.vue"
+        "./sfc": "./Button.vue"
-  }
+    }
 }

components/lib/button/style/ButtonStyle.js

@@ -0,0 +1,40 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-button p-component',
+        {
+            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
+            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
+            'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
+            'p-button-loading': props.loading,
+            'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
+            'p-button-link': props.link,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            'p-button-sm': props.size === 'small',
+            'p-button-lg': props.size === 'large',
+            'p-button-plain': props.plain
+        }
+    ],
+    loadingIcon: 'p-button-loading-icon pi-spin',
+    icon: ({ props }) => [
+        'p-button-icon',
+        {
+            'p-button-icon-left': props.iconPos === 'left' && props.label,
+            'p-button-icon-right': props.iconPos === 'right' && props.label,
+            'p-button-icon-top': props.iconPos === 'top' && props.label,
+            'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
+        }
+    ],
+    label: 'p-button-label'
+};
+
+export default BaseStyle.extend({
+    name: 'button',
+    classes,
+    loadStyle: () => {}
+});

components/lib/button/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./buttonstyle.cjs.js",
+    "module": "./buttonstyle.esm.js",
+    "unpkg": "./buttonstyle.min.js"
+}

components/lib/calendar/BaseCalendar.vue

@@ -1,227 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import CalendarStyle from 'primevue/calendar/style';
-
-const styles = `
-@layer primevue {
-    .p-calendar {
-        display: inline-flex;
-        max-width: 100%;
-    }
-    
-    .p-calendar .p-inputtext {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-    
-    .p-calendar-w-btn .p-inputtext {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    
-    .p-calendar-w-btn .p-datepicker-trigger {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    
-    /* Fluid */
-    .p-fluid .p-calendar {
-        display: flex;
-    }
-    
-    .p-fluid .p-calendar .p-inputtext {
-        width: 1%;
-    }
-    
-    /* Datepicker */
-    .p-calendar .p-datepicker {
-        min-width: 100%;
-    }
-    
-    .p-datepicker {
-        width: auto;
-    }
-    
-    .p-datepicker-inline {
-        display: inline-block;
-        overflow-x: auto;
-    }
-    
-    /* Header */
-    .p-datepicker-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-    
-    .p-datepicker-header .p-datepicker-title {
-        margin: 0 auto;
-    }
-    
-    .p-datepicker-prev,
-    .p-datepicker-next {
-        cursor: pointer;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Multiple Month DatePicker */
-    .p-datepicker-multiple-month .p-datepicker-group-container {
-        display: flex;
-    }
-    
-    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
-        flex: 1 1 auto;
-    }
-    
-    /* DatePicker Table */
-    .p-datepicker table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-    
-    .p-datepicker td > span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        margin: 0 auto;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Month Picker */
-    .p-monthpicker-month {
-        width: 33.3%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Year Picker */
-    .p-yearpicker-year {
-        width: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /*  Button Bar */
-    .p-datepicker-buttonbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    
-    /* Time Picker */
-    .p-timepicker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .p-timepicker button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-timepicker > div {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-    
-    /* Touch UI */
-    .p-datepicker-touch-ui,
-    .p-calendar .p-datepicker-touch-ui {
-        min-width: 80vw;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ props, state }) => [
-        'p-calendar p-component p-inputwrapper',
-        {
-            'p-calendar-w-btn': props.showIcon,
-            'p-calendar-timeonly': props.timeOnly,
-            'p-calendar-disabled': props.disabled,
-            'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': state.focused,
-            'p-focus': state.focused || state.overlayVisible
-        }
-    ],
-    input: 'p-inputtext p-component',
-    dropdownButton: 'p-datepicker-trigger',
-    panel: ({ instance, props, state }) => [
-        'p-datepicker p-component',
-        {
-            'p-datepicker-inline': props.inline,
-            'p-disabled': props.disabled,
-            'p-datepicker-timeonly': props.timeOnly,
-            'p-datepicker-multiple-month': props.numberOfMonths > 1,
-            'p-datepicker-monthpicker': state.currentView === 'month',
-            'p-datepicker-yearpicker': state.currentView === 'year',
-            'p-datepicker-touch-ui': props.touchUI,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    groupContainer: 'p-datepicker-group-container',
-    group: 'p-datepicker-group',
-    header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-prev p-link',
-    previousIcon: 'p-datepicker-prev-icon',
-    title: 'p-datepicker-title',
-    monthTitle: 'p-datepicker-month p-link',
-    yearTitle: 'p-datepicker-year p-link',
-    decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-next p-link',
-    nextIcon: 'p-datepicker-next-icon',
-    container: 'p-datepicker-calendar-container',
-    table: 'p-datepicker-calendar',
-    weekHeader: 'p-datepicker-weekheader p-disabled',
-    weekNumber: 'p-datepicker-weeknumber',
-    weekLabelContainer: 'p-disabled',
-    day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
-    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
-    monthPicker: 'p-monthpicker',
-    month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
-    yearPicker: 'p-yearpicker',
-    year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
-    timePicker: 'p-timepicker',
-    hourPicker: 'p-hour-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
-    separatorContainer: 'p-separator',
-    minutePicker: 'p-minute-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
-    secondPicker: 'p-second-picker',
-    ampmPicker: 'p-ampm-picker',
-    buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-button-text',
-    clearButton: 'p-button-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
 
 export default {
     name: 'BaseCalendar',
@@ -442,11 +221,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: CalendarStyle,
-        inlineStyles,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/calendar/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./calendar.cjs.js",
+    "main": "./calendar.cjs.js",
-  "module": "./calendar.esm.js",
+    "module": "./calendar.esm.js",
-  "unpkg": "./calendar.min.js",
+    "unpkg": "./calendar.min.js",
-  "types": "./Calendar.d.ts",
+    "types": "./Calendar.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Calendar.vue"
+        "./sfc": "./Calendar.vue"
-  }
+    }
 }

components/lib/calendar/style/CalendarStyle.js

@@ -0,0 +1,227 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-calendar {
+        display: inline-flex;
+        max-width: 100%;
+    }
+
+    .p-calendar .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-calendar-w-btn .p-inputtext {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-calendar-w-btn .p-datepicker-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    /* Fluid */
+    .p-fluid .p-calendar {
+        display: flex;
+    }
+
+    .p-fluid .p-calendar .p-inputtext {
+        width: 1%;
+    }
+
+    /* Datepicker */
+    .p-calendar .p-datepicker {
+        min-width: 100%;
+    }
+
+    .p-datepicker {
+        width: auto;
+    }
+
+    .p-datepicker-inline {
+        display: inline-block;
+        overflow-x: auto;
+    }
+
+    /* Header */
+    .p-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-datepicker-header .p-datepicker-title {
+        margin: 0 auto;
+    }
+
+    .p-datepicker-prev,
+    .p-datepicker-next {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Multiple Month DatePicker */
+    .p-datepicker-multiple-month .p-datepicker-group-container {
+        display: flex;
+    }
+
+    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+        flex: 1 1 auto;
+    }
+
+    /* DatePicker Table */
+    .p-datepicker table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .p-datepicker td > span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Month Picker */
+    .p-monthpicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Year Picker */
+    .p-yearpicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /*  Button Bar */
+    .p-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    /* Time Picker */
+    .p-timepicker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-timepicker button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-timepicker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    /* Touch UI */
+    .p-datepicker-touch-ui,
+    .p-calendar .p-datepicker-touch-ui {
+        min-width: 80vw;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ props, state }) => [
+        'p-calendar p-component p-inputwrapper',
+        {
+            'p-calendar-w-btn': props.showIcon,
+            'p-calendar-timeonly': props.timeOnly,
+            'p-calendar-disabled': props.disabled,
+            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-focus': state.focused,
+            'p-focus': state.focused || state.overlayVisible
+        }
+    ],
+    input: 'p-inputtext p-component',
+    dropdownButton: 'p-datepicker-trigger',
+    panel: ({ instance, props, state }) => [
+        'p-datepicker p-component',
+        {
+            'p-datepicker-inline': props.inline,
+            'p-disabled': props.disabled,
+            'p-datepicker-timeonly': props.timeOnly,
+            'p-datepicker-multiple-month': props.numberOfMonths > 1,
+            'p-datepicker-monthpicker': state.currentView === 'month',
+            'p-datepicker-yearpicker': state.currentView === 'year',
+            'p-datepicker-touch-ui': props.touchUI,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    groupContainer: 'p-datepicker-group-container',
+    group: 'p-datepicker-group',
+    header: 'p-datepicker-header',
+    previousButton: 'p-datepicker-prev p-link',
+    previousIcon: 'p-datepicker-prev-icon',
+    title: 'p-datepicker-title',
+    monthTitle: 'p-datepicker-month p-link',
+    yearTitle: 'p-datepicker-year p-link',
+    decadeTitle: 'p-datepicker-decade',
+    nextButton: 'p-datepicker-next p-link',
+    nextIcon: 'p-datepicker-next-icon',
+    container: 'p-datepicker-calendar-container',
+    table: 'p-datepicker-calendar',
+    weekHeader: 'p-datepicker-weekheader p-disabled',
+    weekNumber: 'p-datepicker-weeknumber',
+    weekLabelContainer: 'p-disabled',
+    day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
+    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
+    monthPicker: 'p-monthpicker',
+    month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
+    yearPicker: 'p-yearpicker',
+    year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
+    timePicker: 'p-timepicker',
+    hourPicker: 'p-hour-picker',
+    incrementButton: 'p-link',
+    decrementButton: 'p-link',
+    separatorContainer: 'p-separator',
+    minutePicker: 'p-minute-picker',
+    incrementButton: 'p-link',
+    decrementButton: 'p-link',
+    secondPicker: 'p-second-picker',
+    ampmPicker: 'p-ampm-picker',
+    buttonbar: 'p-datepicker-buttonbar',
+    todayButton: 'p-button-text',
+    clearButton: 'p-button-text'
+};
+
+export default BaseStyle.extend({
+    name: 'calendar',
+    css,
+    classes,
+    inlineStyles
+});

components/lib/calendar/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./calendarstyle.cjs.js",
+    "module": "./calendarstyle.esm.js",
+    "unpkg": "./calendarstyle.min.js"
+}

components/lib/card/BaseCard.vue

@@ -1,21 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
+import CardStyle from 'primevue/card/style';
-const classes = {
-    root: 'p-card p-component',
-    header: 'p-card-header',
-    body: 'p-card-body',
-    title: 'p-card-title',
-    subtitle: 'p-card-subtitle',
-    content: 'p-card-content',
-    footer: 'p-card-footer'
-};
 
 export default {
     name: 'BaseCard',
     extends: BaseComponent,
-    css: {
+    style: CardStyle
-        classes
-    }
 };
 </script>

components/lib/card/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./card.cjs.js",
+    "main": "./card.cjs.js",
-  "module": "./card.esm.js",
+    "module": "./card.esm.js",
-  "unpkg": "./card.min.js",
+    "unpkg": "./card.min.js",
-  "types": "./Card.d.ts",
+    "types": "./Card.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Card.vue"
+        "./sfc": "./Card.vue"
-  }
+    }
 }

components/lib/card/style/CardStyle.js

@@ -0,0 +1,17 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-card p-component',
+    header: 'p-card-header',
+    body: 'p-card-body',
+    title: 'p-card-title',
+    subtitle: 'p-card-subtitle',
+    content: 'p-card-content',
+    footer: 'p-card-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'card',
+    classes,
+    loadStyle: () => {}
+});

components/lib/card/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./cardstyle.cjs.js",
+    "module": "./cardstyle.esm.js",
+    "unpkg": "./cardstyle.min.js"
+}

components/lib/carousel/BaseCarousel.vue

@@ -1,136 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import CarouselStyle from 'primevue/carousel/style';
-
-const styles = `
-@layer primevue {
-    .p-carousel {
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .p-carousel-content {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-    }
-    
-    .p-carousel-prev,
-    .p-carousel-next {
-        align-self: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-carousel-container {
-        display: flex;
-        flex-direction: row;
-    }
-    
-    .p-carousel-items-content {
-        overflow: hidden;
-        width: 100%;
-    }
-    
-    .p-carousel-items-container {
-        display: flex;
-        flex-direction: row;
-    }
-    
-    .p-carousel-indicators {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-carousel-indicator > button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    /* Vertical */
-    .p-carousel-vertical .p-carousel-container {
-        flex-direction: column;
-    }
-    
-    .p-carousel-vertical .p-carousel-items-container {
-        flex-direction: column;
-        height: 100%;
-    }
-    
-    /* Keyboard Support */
-    .p-items-hidden .p-carousel-item {
-        visibility: hidden;
-    }
-    
-    .p-items-hidden .p-carousel-item.p-carousel-item-active {
-        visibility: visible;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-carousel p-component',
-        {
-            'p-carousel-vertical': instance.isVertical(),
-            'p-carousel-horizontal': !instance.isVertical()
-        }
-    ],
-    header: 'p-carousel-header',
-    content: 'p-carousel-content',
-    container: 'p-carousel-container',
-    previousButton: ({ instance }) => [
-        'p-carousel-prev p-link',
-        {
-            'p-disabled': instance.backwardIsDisabled
-        }
-    ],
-    previousButtonIcon: 'p-carousel-next-icon',
-    itemsContent: 'p-carousel-items-content',
-    itemsContainer: 'p-carousel-items-container',
-    itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
-        'p-carousel-item p-carousel-item-cloned',
-        {
-            'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
-            'p-carousel-item-start': index === 0,
-            'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
-        }
-    ],
-    item: ({ instance, index }) => [
-        'p-carousel-item',
-        {
-            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
-            'p-carousel-item-start': instance.firstIndex() === index,
-            'p-carousel-item-end': instance.lastIndex() === index
-        }
-    ],
-    nextButton: ({ instance }) => [
-        'p-carousel-next p-link',
-        {
-            'p-disabled': instance.forwardIsDisabled
-        }
-    ],
-    nextButtonIcon: 'p-carousel-prev-icon',
-    indicators: 'p-carousel-indicators p-reset',
-    indicator: ({ instance, index }) => [
-        'p-carousel-indicator',
-        {
-            'p-highlight': instance.d_page === index
-        }
-    ],
-    indicatorButton: 'p-link',
-    footer: 'p-carousel-footer'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
 
 export default {
     name: 'BaseCarousel',
@@ -186,10 +56,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: CarouselStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/carousel/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./carousel.cjs.js",
+    "main": "./carousel.cjs.js",
-  "module": "./carousel.esm.js",
+    "module": "./carousel.esm.js",
-  "unpkg": "./carousel.min.js",
+    "unpkg": "./carousel.min.js",
-  "types": "./Carousel.d.ts",
+    "types": "./Carousel.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Carousel.vue"
+        "./sfc": "./Carousel.vue"
-  }
+    }
 }

components/lib/carousel/style/CarouselStyle.js

@@ -0,0 +1,135 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-carousel {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-carousel-content {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    .p-carousel-prev,
+    .p-carousel-next {
+        align-self: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-carousel-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .p-carousel-items-content {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .p-carousel-items-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .p-carousel-indicators {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .p-carousel-indicator > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Vertical */
+    .p-carousel-vertical .p-carousel-container {
+        flex-direction: column;
+    }
+
+    .p-carousel-vertical .p-carousel-items-container {
+        flex-direction: column;
+        height: 100%;
+    }
+
+    /* Keyboard Support */
+    .p-items-hidden .p-carousel-item {
+        visibility: hidden;
+    }
+
+    .p-items-hidden .p-carousel-item.p-carousel-item-active {
+        visibility: visible;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-carousel p-component',
+        {
+            'p-carousel-vertical': instance.isVertical(),
+            'p-carousel-horizontal': !instance.isVertical()
+        }
+    ],
+    header: 'p-carousel-header',
+    content: 'p-carousel-content',
+    container: 'p-carousel-container',
+    previousButton: ({ instance }) => [
+        'p-carousel-prev p-link',
+        {
+            'p-disabled': instance.backwardIsDisabled
+        }
+    ],
+    previousButtonIcon: 'p-carousel-next-icon',
+    itemsContent: 'p-carousel-items-content',
+    itemsContainer: 'p-carousel-items-container',
+    itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
+        'p-carousel-item p-carousel-item-cloned',
+        {
+            'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
+            'p-carousel-item-start': index === 0,
+            'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
+        }
+    ],
+    item: ({ instance, index }) => [
+        'p-carousel-item',
+        {
+            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
+            'p-carousel-item-start': instance.firstIndex() === index,
+            'p-carousel-item-end': instance.lastIndex() === index
+        }
+    ],
+    nextButton: ({ instance }) => [
+        'p-carousel-next p-link',
+        {
+            'p-disabled': instance.forwardIsDisabled
+        }
+    ],
+    nextButtonIcon: 'p-carousel-prev-icon',
+    indicators: 'p-carousel-indicators p-reset',
+    indicator: ({ instance, index }) => [
+        'p-carousel-indicator',
+        {
+            'p-highlight': instance.d_page === index
+        }
+    ],
+    indicatorButton: 'p-link',
+    footer: 'p-carousel-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'carousel',
+    css,
+    classes
+});

components/lib/carousel/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./carouselstyle.cjs.js",
+    "module": "./carouselstyle.esm.js",
+    "unpkg": "./carouselstyle.min.js"
+}

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -1,142 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import CascadeSelectStyle from 'primevue/cascadeselect/style';
-
-const styles = `
-@layer primevue {
-    .p-cascadeselect {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-cascadeselect-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    
-    .p-cascadeselect-label {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        flex: 1 1 auto;
-        width: 1%;
-        text-overflow: ellipsis;
-        cursor: pointer;
-    }
-    
-    .p-cascadeselect-label-empty {
-        overflow: hidden;
-        visibility: hidden;
-    }
-    
-    .p-cascadeselect .p-cascadeselect-panel {
-        min-width: 100%;
-    }
-    
-    .p-cascadeselect-item {
-        cursor: pointer;
-        font-weight: normal;
-        white-space: nowrap;
-    }
-    
-    .p-cascadeselect-item-content {
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-cascadeselect-group-icon {
-        margin-left: auto;
-    }
-    
-    .p-cascadeselect-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        min-width: 100%;
-    }
-    
-    .p-fluid .p-cascadeselect {
-        display: flex;
-    }
-    
-    .p-fluid .p-cascadeselect .p-cascadeselect-label {
-        width: 1%;
-    }
-    
-    .p-cascadeselect-sublist {
-        position: absolute;
-        min-width: 100%;
-        z-index: 1;
-        display: none;
-    }
-    
-    .p-cascadeselect-item-active {
-        overflow: visible !important;
-    }
-    
-    .p-cascadeselect-item-active > .p-cascadeselect-sublist {
-        display: block;
-        left: 100%;
-        top: 0;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-cascadeselect p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    label: ({ instance, props }) => [
-        'p-cascadeselect-label p-inputtext',
-        {
-            'p-placeholder': instance.label === props.placeholder,
-            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
-        }
-    ],
-    dropdownButton: 'p-cascadeselect-trigger',
-    loadingIcon: 'p-cascadeselect-trigger-icon',
-    dropdownIcon: 'p-cascadeselect-trigger-icon',
-    panel: ({ instance }) => [
-        'p-cascadeselect-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    wrapper: 'p-cascadeselect-items-wrapper',
-    list: 'p-cascadeselect-panel p-cascadeselect-items',
-    item: ({ instance, processedOption }) => [
-        'p-cascadeselect-item',
-        {
-            'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
-            'p-focus': instance.isOptionFocused(processedOption),
-            'p-disabled': instance.isOptionDisabled(processedOption)
-        }
-    ],
-    content: 'p-cascadeselect-item-content',
-    text: 'p-cascadeselect-item-text',
-    groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-sublist'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
 
 export default {
     name: 'BaseCascadeSelect',
@@ -245,11 +109,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: CascadeSelectStyle,
-        classes,
-        inlineStyles,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/cascadeselect/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./cascadeselect.cjs.js",
+    "main": "./cascadeselect.cjs.js",
-  "module": "./cascadeselect.esm.js",
+    "module": "./cascadeselect.esm.js",
-  "unpkg": "./cascadeselect.min.js",
+    "unpkg": "./cascadeselect.min.js",
-  "types": "./CascadeSelect.d.ts",
+    "types": "./CascadeSelect.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./CascadeSelect.vue"
+        "./sfc": "./CascadeSelect.vue"
-  }
+    }
 }

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -0,0 +1,142 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-cascadeselect {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-cascadeselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-cascadeselect-label {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        flex: 1 1 auto;
+        width: 1%;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .p-cascadeselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-cascadeselect .p-cascadeselect-panel {
+        min-width: 100%;
+    }
+
+    .p-cascadeselect-item {
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+    }
+
+    .p-cascadeselect-item-content {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-cascadeselect-group-icon {
+        margin-left: auto;
+    }
+
+    .p-cascadeselect-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        min-width: 100%;
+    }
+
+    .p-fluid .p-cascadeselect {
+        display: flex;
+    }
+
+    .p-fluid .p-cascadeselect .p-cascadeselect-label {
+        width: 1%;
+    }
+
+    .p-cascadeselect-sublist {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+        display: none;
+    }
+
+    .p-cascadeselect-item-active {
+        overflow: visible !important;
+    }
+
+    .p-cascadeselect-item-active > .p-cascadeselect-sublist {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-cascadeselect p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    label: ({ instance, props }) => [
+        'p-cascadeselect-label p-inputtext',
+        {
+            'p-placeholder': instance.label === props.placeholder,
+            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+        }
+    ],
+    dropdownButton: 'p-cascadeselect-trigger',
+    loadingIcon: 'p-cascadeselect-trigger-icon',
+    dropdownIcon: 'p-cascadeselect-trigger-icon',
+    panel: ({ instance }) => [
+        'p-cascadeselect-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    wrapper: 'p-cascadeselect-items-wrapper',
+    list: 'p-cascadeselect-panel p-cascadeselect-items',
+    item: ({ instance, processedOption }) => [
+        'p-cascadeselect-item',
+        {
+            'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
+            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
+            'p-focus': instance.isOptionFocused(processedOption),
+            'p-disabled': instance.isOptionDisabled(processedOption)
+        }
+    ],
+    content: 'p-cascadeselect-item-content',
+    text: 'p-cascadeselect-item-text',
+    groupIcon: 'p-cascadeselect-group-icon',
+    sublist: 'p-cascadeselect-sublist'
+};
+
+export default BaseStyle.extend({
+    name: 'cascadeselect',
+    css,
+    classes,
+    inlineStyles
+});

components/lib/cascadeselect/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./cascadeselectstyle.cjs.js",
+    "module": "./cascadeselectstyle.esm.js",
+    "unpkg": "./cascadeselectstyle.min.js"
+}

components/lib/chart/BaseChart.vue

@@ -1,20 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import ChartStyle from 'primevue/chart/style';
-
-const styles = `
-@layer primevue {
-    .p-chart {
-        position: relative;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-chart'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
 
 export default {
     name: 'BaseChart',
@@ -37,10 +23,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: ChartStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/chart/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./chart.cjs.js",
+    "main": "./chart.cjs.js",
-  "module": "./chart.esm.js",
+    "module": "./chart.esm.js",
-  "unpkg": "./chart.min.js",
+    "unpkg": "./chart.min.js",
-  "types": "./Chart.d.ts",
+    "types": "./Chart.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Chart.vue"
+        "./sfc": "./Chart.vue"
-  }
+    }
 }

components/lib/chart/style/ChartStyle.js

@@ -0,0 +1,19 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chart {
+        position: relative;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-chart'
+};
+
+export default BaseStyle.extend({
+    name: 'chart',
+    css,
+    classes
+});

components/lib/chart/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./chartstyle.cjs.js",
+    "module": "./chartstyle.esm.js",
+    "unpkg": "./chartstyle.min.js"
+}

components/lib/checkbox/BaseCheckbox.vue

@@ -1,25 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
+import CheckboxStyle from 'primevue/checkbox/style';
-const classes = {
-    root: ({ instance, props }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-checked': instance.checked,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    icon: 'p-checkbox-icon'
-};
 
 export default {
     name: 'BaseCheckbox',
@@ -81,9 +62,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: CheckboxStyle,
-        classes
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/checkbox/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./checkbox.cjs.js",
+    "main": "./checkbox.cjs.js",
-  "module": "./checkbox.esm.js",
+    "module": "./checkbox.esm.js",
-  "unpkg": "./checkbox.min.js",
+    "unpkg": "./checkbox.min.js",
-  "types": "./Checkbox.d.ts",
+    "types": "./Checkbox.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Checkbox.vue"
+        "./sfc": "./Checkbox.vue"
-  }
+    }
 }

components/lib/checkbox/style/CheckboxStyle.js

@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-checked': instance.checked,
+            'p-checkbox-disabled': props.disabled,
+            'p-checkbox-focused': instance.focused
+        }
+    ],
+    input: ({ instance, props }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    icon: 'p-checkbox-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'checkbox',
+    classes,
+    loadStyle: () => {}
+});

components/lib/checkbox/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./checkboxstyle.cjs.js",
+    "module": "./checkboxstyle.esm.js",
+    "unpkg": "./checkboxstyle.min.js"
+}

components/lib/chip/BaseChip.vue

@@ -1,46 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import ChipStyle from 'primevue/chip/style';
-
-const styles = `
-@layer primevue {
-    .p-chip {
-        display: inline-flex;
-        align-items: center;
-    }
-    
-    .p-chip-text {
-        line-height: 1.5;
-    }
-    
-    .p-chip-icon.pi {
-        line-height: 1.5;
-    }
-    
-    .p-chip-remove-icon {
-        line-height: 1.5;
-        cursor: pointer;
-    }
-    
-    .p-chip img {
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-chip p-component',
-        {
-            'p-chip-image': props.image != null
-        }
-    ],
-    icon: 'p-chip-icon',
-    label: 'p-chip-text',
-    removeIcon: 'p-chip-remove-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
 
 export default {
     name: 'BaseChip',
@@ -67,10 +27,7 @@ export default {
             default: undefined
         }
     },
-    css: {
+    style: ChipStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/chip/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./chip.cjs.js",
+    "main": "./chip.cjs.js",
-  "module": "./chip.esm.js",
+    "module": "./chip.esm.js",
-  "unpkg": "./chip.min.js",
+    "unpkg": "./chip.min.js",
-  "types": "./Chip.d.ts",
+    "types": "./Chip.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Chip.vue"
+        "./sfc": "./Chip.vue"
-  }
+    }
 }

components/lib/chip/style/ChipStyle.js

@@ -0,0 +1,45 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chip {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .p-chip-text {
+        line-height: 1.5;
+    }
+
+    .p-chip-icon.pi {
+        line-height: 1.5;
+    }
+
+    .p-chip-remove-icon {
+        line-height: 1.5;
+        cursor: pointer;
+    }
+
+    .p-chip img {
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-chip p-component',
+        {
+            'p-chip-image': props.image != null
+        }
+    ],
+    icon: 'p-chip-icon',
+    label: 'p-chip-text',
+    removeIcon: 'p-chip-remove-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'chip',
+    css,
+    classes
+});

components/lib/chip/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./chipstyle.cjs.js",
+    "module": "./chipstyle.esm.js",
+    "unpkg": "./chipstyle.min.js"
+}

components/lib/chips/BaseChips.vue

@@ -1,75 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import ChipsStyle from 'primevue/chips/style';
-
-const styles = `
-@layer primevue {
-    .p-chips {
-        display: inline-flex;
-    }
-    
-    .p-chips-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-chips-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-    
-    .p-chips-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-    
-    .p-chips-token-icon {
-        cursor: pointer;
-    }
-    
-    .p-chips-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-    
-    .p-fluid .p-chips {
-        display: flex;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-chips p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
-            'p-inputwrapper-focus': instance.focused
-        }
-    ],
-    container: 'p-inputtext p-chips-multiple-container',
-    token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
-    label: 'p-chips-token-label',
-    removeTokenIcon: 'p-chips-token-icon',
-    inputToken: 'p-chips-input-token'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
 
 export default {
     name: 'BaseChips',
@@ -132,10 +63,7 @@ export default {
             default: null
         }
     },
-    css: {
+    style: ChipsStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/chips/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./chips.cjs.js",
+    "main": "./chips.cjs.js",
-  "module": "./chips.esm.js",
+    "module": "./chips.esm.js",
-  "unpkg": "./chips.min.js",
+    "unpkg": "./chips.min.js",
-  "types": "./Chips.d.ts",
+    "types": "./Chips.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Chips.vue"
+        "./sfc": "./Chips.vue"
-  }
+    }
 }

components/lib/chips/style/ChipsStyle.js

@@ -0,0 +1,74 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chips {
+        display: inline-flex;
+    }
+
+    .p-chips-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-chips-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-chips-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .p-chips-token-icon {
+        cursor: pointer;
+    }
+
+    .p-chips-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .p-fluid .p-chips {
+        display: flex;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-chips p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
+            'p-inputwrapper-focus': instance.focused
+        }
+    ],
+    container: 'p-inputtext p-chips-multiple-container',
+    token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
+    label: 'p-chips-token-label',
+    removeTokenIcon: 'p-chips-token-icon',
+    inputToken: 'p-chips-input-token'
+};
+
+export default BaseStyle.extend({
+    name: 'chips',
+    css,
+    classes
+});

components/lib/chips/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./chipsstyle.cjs.js",
+    "module": "./chipsstyle.esm.js",
+    "unpkg": "./chipsstyle.min.js"
+}

components/lib/colorpicker/BaseColorPicker.vue

@@ -1,40 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import ColorPickerStyle from 'primevue/colorpicker/style';
-
-const styles = `
-@layer primevue {
-    .p-colorpicker-panel .p-colorpicker-color {
-        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
-    }
-    
-    .p-colorpicker-panel .p-colorpicker-hue {
-        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
-    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
-    panel: ({ instance, props }) => [
-        'p-colorpicker-panel',
-        {
-            'p-colorpicker-overlay-panel': !props.inline,
-            'p-disabled': props.disabled,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    content: 'p-colorpicker-content',
-    selector: 'p-colorpicker-color-selector',
-    color: 'p-colorpicker-color',
-    colorHandle: 'p-colorpicker-color-handle',
-    hue: 'p-colorpicker-hue',
-    hueHandle: 'p-colorpicker-hue-handle'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
 
 export default {
     name: 'BaseColorPicker',
@@ -78,10 +44,7 @@ export default {
         },
         panelClass: null
     },
-    css: {
+    style: ColorPickerStyle,
-        classes,
-        loadStyle
-    },
     provide() {
         return {
             $parentInstance: this

components/lib/colorpicker/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./colorpicker.cjs.js",
+    "main": "./colorpicker.cjs.js",
-  "module": "./colorpicker.esm.js",
+    "module": "./colorpicker.esm.js",
-  "unpkg": "./colorpicker.min.js",
+    "unpkg": "./colorpicker.min.js",
-  "types": "./ColorPicker.d.ts",
+    "types": "./ColorPicker.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./ColorPicker.vue"
+        "./sfc": "./ColorPicker.vue"
-  }
+    }
 }

components/lib/colorpicker/style/ColorPickerStyle.js

@@ -0,0 +1,39 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-colorpicker-panel .p-colorpicker-color {
+        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+    }
+
+    .p-colorpicker-panel .p-colorpicker-hue {
+        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
+    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
+    panel: ({ instance, props }) => [
+        'p-colorpicker-panel',
+        {
+            'p-colorpicker-overlay-panel': !props.inline,
+            'p-disabled': props.disabled,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-colorpicker-content',
+    selector: 'p-colorpicker-color-selector',
+    color: 'p-colorpicker-color',
+    colorHandle: 'p-colorpicker-color-handle',
+    hue: 'p-colorpicker-hue',
+    hueHandle: 'p-colorpicker-hue-handle'
+};
+
+export default BaseStyle.extend({
+    name: 'colorpicker',
+    css,
+    classes
+});

components/lib/colorpicker/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./colorpickerstyle.cjs.js",
+    "module": "./colorpickerstyle.esm.js",
+    "unpkg": "./colorpickerstyle.min.js"
+}

components/lib/column/BaseColumn.vue

@@ -1,5 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import ColumnStyle from 'primevue/column/style';
 
 export default {
     name: 'BaseColumn',
@@ -182,6 +183,7 @@ export default {
             default: false
         }
     },
+    style: ColumnStyle,
     provide() {
         return {
             $parentInstance: this

components/lib/column/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./column.cjs.js",
+    "main": "./column.cjs.js",
-  "module": "./column.esm.js",
+    "module": "./column.esm.js",
-  "unpkg": "./column.min.js",
+    "unpkg": "./column.min.js",
-  "types": "./Column.d.ts",
+    "types": "./Column.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./Column.vue"
+        "./sfc": "./Column.vue"
-  }
+    }
 }

components/lib/column/style/ColumnStyle.js

@@ -0,0 +1 @@
+export default {};

components/lib/column/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./columnstyle.cjs.js",
+    "module": "./columnstyle.esm.js",
+    "unpkg": "./columnstyle.min.js"
+}

components/lib/columngroup/BaseColumnGroup.vue

@@ -1,5 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import ColumnGroupStyle from 'primevue/columngroup/style';
 
 export default {
     name: 'BaseColumnGroup',
@@ -10,6 +11,7 @@ export default {
             default: null
         }
     },
+    style: ColumnGroupStyle,
     provide() {
         return {
             $parentInstance: this

components/lib/columngroup/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./columngroup.cjs.js",
+    "main": "./columngroup.cjs.js",
-  "module": "./columngroup.esm.js",
+    "module": "./columngroup.esm.js",
-  "unpkg": "./columngroup.min.js",
+    "unpkg": "./columngroup.min.js",
-  "types": "./ColumnGroup.d.ts",
+    "types": "./ColumnGroup.d.ts",
-  "browser": {
+    "browser": {
-    "./sfc": "./ColumnGroup.vue"
+        "./sfc": "./ColumnGroup.vue"
-  }
+    }
 }

components/lib/columngroup/style/ColumnGroupStyle.js

@@ -0,0 +1 @@
+export default {};

components/lib/columngroup/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./columngroupstyle.cjs.js",
+    "module": "./columngroupstyle.esm.js",
+    "unpkg": "./columngroupstyle.min.js"
+}

components/lib/config/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "./config.cjs.js",
+    "main": "./config.cjs.js",
-  "module": "./config.esm.js",
+    "module": "./config.esm.js",
-  "unpkg": "./config.min.js",
+    "unpkg": "./config.min.js",
-  "types": "./PrimeVue.d.ts"
+    "types": "./PrimeVue.d.ts"
 }