Refactor #3922 - For TreeSelect

api-generator/components/treeselect.js

@@ -101,6 +101,12 @@ const TreeSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -64,6 +64,7 @@ import { TieredMenuPassThroughOptions } from '../tieredmenu';
 import { ToastPassThroughOptions } from '../toast';
 import { ToolbarPassThroughOptions } from '../toolbar';
 import { TreePassThroughOptions } from '../tree';
+import { TreeSelectPassThroughOptions } from '../treeselect';
 import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 interface PrimeVueConfiguration {
@@ -150,6 +151,7 @@ interface PrimeVuePTOptions {
     toast?: ToastPassThroughOptions;
     toolbar?: ToolbarPassThroughOptions;
     tree?: TreePassThroughOptions;
+    treeselect?: TreeSelectPassThroughOptions;
     virtualscroller?: VirtualScrollerPassThroughOptions;
 }
 

components/lib/treeselect/TreeSelect.d.ts

@@ -8,9 +8,97 @@
  *
  */
 import { InputHTMLAttributes, VNode } from 'vue';
-import { TreeNode } from '../tree';
+import { TreeNode, TreePassThroughOptionType } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TreeSelectPassThroughOptionType = TreeSelectPassThroughAttributes | ((options: TreeSelectPassThroughMethodOptions) => TreeSelectPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeSelectPassThroughMethodOptions {
+    props: TreeSelectProps;
+    state: TreeSelectState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeSelectProps.pt}
+ */
+export interface TreeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     * @see {@link TreePassThroughOptionType}
+     */
+    tree?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TreeSelectPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreeSelectPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TreeSelect component.
+ */
+export interface TreeSelectState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in TreeSelect component.
  */
@@ -94,6 +182,11 @@ export interface TreeSelectProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeSelectPassThroughOptions}
+     */
+    pt?: TreeSelectPassThroughOptions;
 }
 
 /**

components/lib/treeselect/TreeSelect.vue

@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onClick">
+    <div ref="container" :class="containerClass" @click="onClick" v-bind="ptm('root')">
-        <div class="p-hidden-accessible">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -19,34 +19,34 @@
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
                 @keydown="onKeyDown($event)"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
-        <div class="p-treeselect-label-container">
+        <div class="p-treeselect-label-container" v-bind="ptm('labelContainer')">
-            <div :class="labelClass">
+            <div :class="labelClass" v-bind="ptm('label')">
                 <slot name="value" :value="selectedNodes" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token">
+                        <div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token" v-bind="ptm('token')">
-                            <span class="p-treeselect-token-label">{{ node.label }}</span>
+                            <span class="p-treeselect-token-label" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
         </div>
-        <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible">
+        <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
             <slot name="triggericon">
-                <component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" />
+                <component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" v-bind="ptm('triggerIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
                     <slot name="header" :value="modelValue" :options="options"></slot>
-                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }">
+                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
                         <TSTree
                             ref="tree"
                             :id="listId"
@@ -62,6 +62,7 @@
                             @node-select="onNodeSelect"
                             @node-unselect="onNodeUnselect"
                             :level="0"
+                            :pt="ptm('tree')"
                         >
                             <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
@@ -70,7 +71,7 @@
                                 <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
                             </template>
                         </TSTree>
-                        <div v-if="emptyOptions" class="p-treeselect-empty-message">
+                        <div v-if="emptyOptions" class="p-treeselect-empty-message" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
@@ -82,6 +83,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -91,6 +93,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'TreeSelect',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
     props: {
         modelValue: null,