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

… TreeSelect
primefaces · May 3, 2024 · d9d2be9 · d9d2be9
1 parent 4c481ae
commit d9d2be9
Show file tree

Hide file tree

Showing 16 changed files with 211 additions and 113 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/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.
      */

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
@@ -33,15 +33,15 @@
         <ul
             v-if="multiple"
             ref="multiContainer"
-            :class="cx('container')"
+            :class="cx('inputMultiple')"
             tabindex="-1"
             role="listbox"
             aria-orientation="horizontal"
             :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
             @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"

diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -107,19 +107,23 @@ export default {
         },
         dropdownIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         dropdownClass: {
             type: [String, Object],
             default: null
         },
         loadingIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         removeTokenIcon: {
             type: String,
-            default: undefined
+            default: null
+        },
+        chipIcon: {
+            type: String,
+            default: null
         },
         virtualScrollerOptions: {
             type: Object,

diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/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 }) => [

diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -52,6 +52,18 @@ export default {
             type: null,
             default: null
         },
+        overlayClass: {
+            type: [String, Object],
+            default: null
+        },
+        overlayStyle: {
+            type: Object,
+            default: null
+        },
+        overlayProps: {
+            type: null,
+            default: null
+        },
         appendTo: {
             type: [String, Object],
             default: 'body'

diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -91,7 +91,7 @@ export interface CascadeSelectPassThroughOptions {
     /**
      * Used to pass attributes to the dropdown button's DOM element.
      */
-    dropdownButton?: CascadeSelectPassThroughOptionType;
+    dropdown?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the dropdown icon's DOM element.
      */
@@ -101,9 +101,13 @@ export interface CascadeSelectPassThroughOptions {
      */
     loadingIcon?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the panel's DOM element.
+     * Used to pass attributes to the overlay's DOM element.
      */
-    panel?: CascadeSelectPassThroughOptionType;
+    overlay?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list container's DOM element.
+     */
+    listContainer?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the list's DOM element.
      */
@@ -113,13 +117,17 @@ export interface CascadeSelectPassThroughOptions {
      */
     item?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: CascadeSelectPassThroughOptionType;
+    itemContent?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the text's DOM element.
+     * Used to pass attributes to the item text's DOM element.
      */
-    text?: CascadeSelectPassThroughOptionType;
+    itemText?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item list's DOM element.
+     */
+    itemList?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the group icon's DOM element.
      */
@@ -307,17 +315,32 @@ export interface CascadeSelectProps {
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
-     * Inline style of the overlay panel.
+     * @deprecated since v4.0. Use 'overlayStyle' prop.
+     * Inline style of the overlay overlay.
      */
     panelStyle?: object | undefined;
     /**
-     * Style class of the overlay panel.
+     * @deprecated since v4.0. Use 'overlayClass' prop.
+     * Style class of the overlay overlay.
      */
     panelClass?: string | object | undefined;
     /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     * @deprecated since v4.0. Use 'overlayProps' prop.
+     * Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
      */
     panelProps?: HTMLAttributes | undefined;
+    /**
+     * Inline style of the overlay overlay.
+     */
+    overlayStyle?: object | undefined;
+    /**
+     * Style class of the overlay overlay.
+     */
+    overlayClass?: string | object | undefined;
+    /**
+     * Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
+     */
+    overlayProps?: HTMLAttributes | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @defaultValue body

diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
@@ -30,7 +30,7 @@
                 {{ label }}
             </slot>
         </span>
-        <div :class="cx('dropdownButton')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdownButton')">
+        <div :class="cx('dropdown')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdown')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
@@ -44,8 +44,16 @@
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
-                    <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
+                <div
+                    v-if="overlayVisible"
+                    :ref="overlayRef"
+                    :class="[cx('overlay'), panelClass, overlayClass]"
+                    :style="[panelStyle, overlayStyle]"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
+                >
+                    <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
                         <CascadeSelectSub
                             :id="id + '_tree'"
                             role="tree"

diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('itemList')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
@@ -17,9 +17,9 @@
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')">
+                <div v-ripple :class="cx('itemContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'itemContent')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else :class="cx('text')" v-bind="getPTOptions(processedOption, index, 'text')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    <span v-else :class="cx('itemText')" v-bind="getPTOptions(processedOption, index, 'itemText')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <template v-if="isOptionGroup(processedOption)">
                         <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" />
                         <span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
@@ -29,7 +29,7 @@
                 <CascadeSelectSub
                     v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                     role="group"
-                    :class="cx('sublist')"
+                    :class="cx('itemList')"
                     :selectId="selectId"
                     :focusedOptionId="focusedOptionId"
                     :options="getOptionGroupChildren(processedOption)"

diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -209,17 +209,17 @@ const classes = {
             'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
         }
     ],
-    dropdownButton: 'p-cascadeselect-dropdown',
+    dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    panel: ({ instance }) => [
+    overlay: ({ instance }) => [
         'p-cascadeselect-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    wrapper: 'p-cascadeselect-list-container',
-    rootList: 'p-cascadeselect-list',
+    listContainer: 'p-cascadeselect-list-container',
+    list: 'p-cascadeselect-list',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
         {
@@ -229,10 +229,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(processedOption)
         }
     ],
-    content: 'p-cascadeselect-item-content',
-    text: 'p-cascadeselect-item-text',
+    itemContent: 'p-cascadeselect-item-content',
+    itemText: 'p-cascadeselect-item-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-overlay p-cascadeselect-item-list'
+    itemList: 'p-cascadeselect-overlay p-cascadeselect-item-list'
 };
 
 export default BaseStyle.extend({