Refactor #3965, Improve build and Added *Base models

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
         }
     },
     plugins: ['prettier'],
-    ignorePatterns: ['**/public/**'],
+    ignorePatterns: ['**/public/**', '**/dist/**'],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

components/lib/accordion/BaseAccordion.vue

@@ -45,7 +45,7 @@ const classes = {
     }
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
 
 export default {
     name: 'BaseAccordion',

components/lib/autocomplete/AutoComplete.vue

@@ -110,7 +110,7 @@
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -166,7 +166,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                 </div>

components/lib/autocomplete/BaseAutoComplete.vue

@@ -126,7 +126,6 @@ const classes = {
     inputToken: 'p-autocomplete-input-token',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
-    hiddenSearchResult: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-autocomplete-panel p-component',
         {
@@ -144,11 +143,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-autocomplete-empty-message',
-    hiddenSelectedMessage: 'p-hidden-accessible'
+    emptyMessage: 'p-autocomplete-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
 
 export default {
     name: 'BaseAutoComplete',

components/lib/avatar/BaseAvatar.vue

@@ -48,7 +48,7 @@ const classes = {
     icon: 'p-avatar-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
 
 export default {
     name: 'BaseAvatar',

components/lib/avatargroup/BaseAvatarGroup.vue

@@ -17,7 +17,7 @@ const classes = {
     root: 'p-avatar-group p-component'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatargroup_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
 
 export default {
     name: 'BaseAvatarGroup',

components/lib/badge/BaseBadge.vue

@@ -54,7 +54,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_badge_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 export default {
     name: 'BaseBadge',

components/lib/badgedirective/BadgeDirective.js

@@ -1,19 +1,19 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseBadgeDirective from './BaseBadgeDirective';
 
-const BadgeDirective = BaseDirective.extend('badge', {
+const BadgeDirective = BaseBadgeDirective.extend('badge', {
     mounted(el, binding) {
         const id = UniqueComponentId() + '_badge';
 
-        el.$_pbadgeId = id;
         el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
 
-        let badge = document.createElement('span');
+        const badge = DomHandler.createElement('span', {
+            id,
+            class: this.cx('root'),
+            'p-bind': this.ptm('root')
+        });
 
-        badge.id = id;
-        !el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
-        badge.setAttribute('data-pc-name', 'badge');
-        badge.setAttribute('data-pc-section', 'root');
+        el.$_pbadgeId = badge.getAttribute('id');
 
         for (let modifier in binding.modifiers) {
             !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
@@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
-        el.$pEl = badge;
 
-        BaseDirective.handleCSS('badge', el, binding);
+        this.$el = badge;
     },
     updated(el, binding) {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');

components/lib/badge/Badge.css → components/lib/badgedirective/BaseBadgeDirective.js

@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-badge {
     display: inline-block;
     border-radius: 10px;
@@ -29,4 +33,20 @@
 .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: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseBadgeDirective;

components/lib/base/Base.js

@@ -0,0 +1,48 @@
+import { useStyle } from 'primevue/usestyle';
+
+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;
+}
+
+.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;
+}
+`;
+
+export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
+
+const Base = {
+    styles
+};
+
+export default Base;

components/lib/base/package.json

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