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

components/lib/autocomplete/AutoComplete.d.ts

@@ -149,26 +149,26 @@ export interface AutoCompletePassThroughOptions {
      */
     input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the input multiple's DOM element.
      */
-    container?: AutoCompletePassThroughOptionType;
+    inputMultiple?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the token's DOM element.
+     * Used to pass attributes to the chip's DOM element.
      */
-    token?: AutoCompletePassThroughOptionType;
+    chip?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
+    chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the remove token icon's DOM element.
+     * Used to pass attributes to the chip icon's DOM element.
      */
-    removeTokenIcon?: AutoCompletePassThroughOptionType;
+    chipIcon?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the input token's DOM element.
+     * Used to pass attributes to the input chip's DOM element.
      */
-    inputToken?: AutoCompletePassThroughOptionType;
+    inputChip?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
@@ -441,6 +441,10 @@ export interface AutoCompleteProps {
      * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
+    /**
+     * Icon to display in chip remove action.
+     */
+    chipIcon?: string | undefined;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * @type {VirtualScrollerProps}
@@ -658,7 +662,9 @@ export interface AutoCompleteSlots {
         class: string;
     }): VNode[];
     /**
-     * Custom remove token icon template in multiple mode.
+     * @deprecated since v4.0. Use 'chipicon' slot instead.
+     * Custom chip icon template in multiple mode.
+     * @param {Object} scope - chip icon slot's params.
      */
     removetokenicon(scope: {
         /**
@@ -681,6 +687,31 @@ export interface AutoCompleteSlots {
          */
         removeCallback: (event: Event, index: number) => void;
     }): VNode[];
+    /**
+     * Custom chip icon template in multiple mode.
+     * @param {Object} scope - chip icon slot's params.
+     */
+    chipicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+        /**
+         * Index of the token.
+         */
+        index: number;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
+         */
+        onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
+    }): VNode[];
     /**
      * Custom loading icon template.
      */

components/lib/autocomplete/AutoComplete.vue

@@ -33,7 +33,7 @@
         <ul
             v-if="multiple"
             ref="multiContainer"
-            :class="cx('container')"
+            :class="cx('inputMultiple')"
             tabindex="-1"
             role="listbox"
             aria-orientation="horizontal"
@@ -41,7 +41,7 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
-            v-bind="ptm('container')"
+            v-bind="ptm('inputMultiple')"
         >
             <li
                 v-for="(option, i) of modelValue"
@@ -56,14 +56,15 @@
                 v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
-                    <Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
+                    <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
+                    <Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon || chipIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')">
                         <template #removeicon>
-                            <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
+                            <slot :name="$slots.removetokenicon ? 'removetokenicon' : 'chipicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
                         </template>
                     </Chip>
                 </slot>
             </li>
-            <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
+            <li :class="cx('inputChip')" role="option" v-bind="ptm('inputChip')">
                 <input
                     ref="focusInput"
                     :id="inputId"

components/lib/autocomplete/BaseAutoComplete.vue

@@ -107,7 +107,7 @@ export default {
         },
         dropdownIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         dropdownClass: {
             type: [String, Object],
@@ -115,11 +115,15 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         removeTokenIcon: {
             type: String,
-            default: undefined
+            default: null
+        },
+        chipIcon: {
+            type: String,
+            default: null
         },
         virtualScrollerOptions: {
             type: Object,

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -233,21 +233,21 @@ const classes = {
         }
     ],
     input: 'p-autocomplete-input',
-    container: ({ props, instance }) => [
+    inputMultiple: ({ props, instance }) => [
         'p-autocomplete-input-multiple',
         {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
-    token: ({ instance, i }) => [
+    chip: ({ instance, i }) => [
         'p-autocomplete-chip',
         {
             'p-focus': instance.focusedMultipleOptionIndex === i
         }
     ],
-    tokenLabel: 'p-autocomplete-chip-label',
-    removeTokenIcon: 'p-autocomplete-chip-icon',
-    inputToken: 'p-autocomplete-input-chip',
+    chipLabel: 'p-autocomplete-chip-label',
+    chipIcon: 'p-autocomplete-chip-icon',
+    inputChip: 'p-autocomplete-input-chip',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
     panel: ({ instance }) => [