Refactor #3922 - For Chips

api-generator/components/chips.js

@@ -64,6 +64,12 @@ const ChipsProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/chips/Chips.d.ts

@@ -10,6 +10,16 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipsPassThroughMethodOptions {
+    props: ChipsProps;
+    state: ChipsState;
+}
+
 /**
  * Custom add event.
  * @see {@link ChipsEmits.add}
@@ -32,6 +42,71 @@ export interface ChipsAddEvent {
  */
 export interface ChipsRemoveEvent extends ChipsAddEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipsProps.pt}
+ */
+export interface ChipsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ChipsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChipsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Chips component.
+ */
+export interface ChipsState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current input value as a string.
+     */
+    inputValue: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index state as a number.
+     */
+    focusedIndex: number;
+}
+
 /**
  * Defines valid properties in Chips component.
  */
@@ -96,6 +171,11 @@ export interface ChipsProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipsPassThroughOptions}
+     */
+    pt?: ChipsPassThroughOptions;
 }
 /**
  * Defines valid slots in Chips slots.

components/lib/chips/Chips.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <ul
             ref="container"
             class="p-inputtext p-chips-multiple-container"
@@ -13,6 +13,7 @@
             @focus="onContainerFocus"
             @blur="onContainerBlur"
             @keydown="onContainerKeyDown"
+            v-bind="ptm('container')"
         >
             <li
                 v-for="(val, i) of modelValue"
@@ -24,15 +25,16 @@
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
+                v-bind="ptm('token')"
             >
                 <slot name="chip" :value="val">
-                    <span class="p-chips-token-label">{{ val }}</span>
+                    <span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
                 <slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-chips-input-token" role="option">
+            <li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
                 <input
                     ref="input"
                     :id="inputId"
@@ -46,7 +48,7 @@
                     @input="onInput"
                     @keydown="onKeyDown($event)"
                     @paste="onPaste($event)"
-                    v-bind="inputProps"
+                    v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
@@ -54,11 +56,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     props: {
         modelValue: {

components/lib/config/PrimeVue.d.ts

@@ -14,6 +14,7 @@ import { CascadeSelectPassThroughOptions } from '../cascadeselect';
 import { ChartPassThroughOptions } from '../chart';
 import { CheckboxPassThroughOptions } from '../checkbox';
 import { ChipPassThroughOptions } from '../chip';
+import { ChipsPassThroughOptions } from '../chips';
 import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
 import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
@@ -85,6 +86,7 @@ interface PrimeVuePTOptions {
     chart?: ChartPassThroughOptions;
     checkbox?: CheckboxPassThroughOptions;
     chip?: ChipPassThroughOptions;
+    chips?: ChipsPassThroughOptions;
     confirmdialog?: ConfirmDialogPassThroughOptions;
     confirmpopup?: ConfirmPopupPassThroughOptions;
     contextmenu?: ContextMenuPassThroughOptions;