Refactor #3965 - For Chips

components/lib/chips/BaseChips.vue

@@ -0,0 +1,145 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.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, unload: unloadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
+
+export default {
+    name: 'BaseChips',
+    extends: BaseComponent,
+    props: {
+        modelValue: {
+            type: Array,
+            default: null
+        },
+        max: {
+            type: Number,
+            default: null
+        },
+        separator: {
+            type: [String, Object],
+            default: null
+        },
+        addOnBlur: {
+            type: Boolean,
+            default: null
+        },
+        allowDuplicate: {
+            type: Boolean,
+            default: true
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: [String, Object],
+            default: null
+        },
+        inputStyle: {
+            type: Object,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        removeTokenIcon: {
+            type: String,
+            default: undefined
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/chips/Chips.d.ts

@@ -176,6 +176,11 @@ export interface ChipsProps {
      * @type {ChipsPassThroughOptions}
      */
     pt?: ChipsPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 /**
  * Defines valid slots in Chips slots.

components/lib/chips/Chips.vue

@@ -1,8 +1,8 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <ul
             ref="container"
-            class="p-inputtext p-chips-multiple-container"
+            :class="cx('container')"
             tabindex="-1"
             role="listbox"
             aria-orientation="horizontal"
@@ -20,21 +20,22 @@
                 :key="`${i}_${val}`"
                 :id="id + '_chips_item_' + i"
                 role="option"
-                :class="['p-chips-token', { 'p-focus': focusedIndex === i }]"
+                :class="cx('token', { index: i })"
                 :aria-label="val"
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
                 v-bind="ptm('token')"
+                :data-p-focused="focusedIndex === i"
             >
-                <slot name="chip" :value="val">
+                <slot name="chip" :class="cx('label')" :value="val">
-                    <span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
+                    <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
-                <slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeItem(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
+            <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
                 <input
                     ref="input"
                     :id="inputId"
@@ -56,72 +57,14 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
+import BaseChips from './BaseChips.vue';
 
 export default {
     name: 'Chips',
-    extends: BaseComponent,
+    extends: BaseChips,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
-    props: {
-        modelValue: {
-            type: Array,
-            default: null
-        },
-        max: {
-            type: Number,
-            default: null
-        },
-        separator: {
-            type: [String, Object],
-            default: null
-        },
-        addOnBlur: {
-            type: Boolean,
-            default: null
-        },
-        allowDuplicate: {
-            type: Boolean,
-            default: true
-        },
-        placeholder: {
-            type: String,
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputClass: {
-            type: [String, Object],
-            default: null
-        },
-        inputStyle: {
-            type: Object,
-            default: null
-        },
-        inputProps: {
-            type: null,
-            default: null
-        },
-        removeTokenIcon: {
-            type: String,
-            default: undefined
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     data() {
         return {
             id: UniqueComponentId(),
@@ -302,17 +245,6 @@ export default {
         maxedOut() {
             return this.max && this.modelValue && this.max === this.modelValue.length;
         },
-        containerClass() {
-            return [
-                'p-chips p-component p-inputwrapper',
-                {
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-inputwrapper-filled': (this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length),
-                    'p-inputwrapper-focus': this.focused
-                }
-            ];
-        },
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
@@ -322,51 +254,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.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;
-}
-</style>

components/lib/config/PrimeVue.js

@@ -132,7 +132,7 @@ export const defaultOptions = {
         tooltip: 1100
     },
     pt: undefined,
-    unstyled: false
+    unstyled: true
 };
 
 const PrimeVueSymbol = Symbol();