Refactor #5681, #5682, #5683 - For AutoComplete, CascadeSelect, Tree, TreeSelect

components/lib/treeselect/TreeSelect.d.ts

@@ -81,22 +81,22 @@ export interface TreeSelectPassThroughOptions {
      */
     label?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the token's DOM element.
+     * Used to pass attributes to the chip's DOM element.
      */
-    token?: TreeSelectPassThroughOptionType;
+    chip?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
+    chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the trigger's DOM element.
+     * Used to pass attributes to the dropdown's DOM element.
      */
-    trigger?: TreeSelectPassThroughOptionType;
+    dropdown?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the trigger icon's DOM element.
+     * Used to pass attributes to the dropdown icon's DOM element.
      */
-    triggerIcon?: TreeSelectPassThroughOptionType;
+    dropdownIcon?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -325,13 +325,9 @@ export interface TreeSelectSlots {
      */
     empty(): VNode[];
     /**
+     * @deprecated since v4.0. use 'dropdownicon' slot instead.
      * Custom indicator template.
-     * @deprecated since v3.27.0. Use 'triggericon' slot.
-     */
-    indicator(): VNode[];
-    /**
-     * Custom indicator template.
-     * @param {Object} scope - triggericon slot's params.
+     * @param {Object} scope - dropdownicon slot's params.
      */
     triggericon(scope: {
         /**
@@ -339,6 +335,16 @@ export interface TreeSelectSlots {
          */
         class: string;
     }): VNode[];
+    /**
+     * Custom indicator template.
+     * @param {Object} scope - dropdownicon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.

components/lib/treeselect/TreeSelect.vue

@@ -29,17 +29,18 @@
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
-                            <Chip :class="cx('tokenLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('tokenLabel')" />
+                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
+                            <Chip :class="cx('chipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('chipLabel')" />
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
         </div>
-        <div :class="cx('trigger')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
-            <slot name="triggericon" :class="cx('triggerIcon')">
-                <component :is="'ChevronDownIcon'" :class="cx('triggerIcon')" v-bind="ptm('triggerIcon')" />
+        <div :class="cx('dropdown')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('dropdown')">
+            <!-- TODO: triggericon is deprecated since v4.0 -->
+            <slot :name="$slots.triggericon ? 'triggericon' : 'dropdownicon'" :class="cx('dropdownIcon')">
+                <component :is="'ChevronDownIcon'" :class="cx('dropdownIcon')" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">

components/lib/treeselect/style/TreeSelectStyle.js

@@ -140,10 +140,10 @@ const classes = {
             'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
         }
     ],
-    token: 'p-treeselect-chip',
-    tokenLabel: 'p-treeselect-chip-label',
-    trigger: 'p-treeselect-dropdown',
-    triggerIcon: 'p-treeselect-dropdown-icon',
+    chip: 'p-treeselect-chip',
+    chipLabel: 'p-treeselect-chip-label',
+    dropdown: 'p-treeselect-dropdown',
+    dropdownIcon: 'p-treeselect-dropdown-icon',
     panel: ({ instance }) => [
         'p-treeselect-overlay p-component',
         {