primevue 3.45.0 → 3.47.0

package/cascadeselect/BaseCascadeSelect.vue

@@ -45,7 +45,7 @@ export default {
             default: null
         },
         appendTo: {
-            type: String,
+            type: [String, Object],
             default: 'body'
         },
         loading: {
@@ -66,12 +66,16 @@ export default {
         },
         autoOptionFocus: {
             type: Boolean,
-            default: true
+            default: false
         },
         selectOnFocus: {
             type: Boolean,
             default: false
         },
+        focusOnHover: {
+            type: Boolean,
+            default: true
+        },
         searchLocale: {
             type: String,
             default: undefined

package/cascadeselect/CascadeSelect.d.ts

@@ -40,6 +40,10 @@ export interface CascadeSelectPassThroughMethodOptions {
      * Defines parent options.
      */
     parent: any;
+    /**
+     * Defines current options.
+     */
+    context: CascadeSelectContext;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -194,6 +198,43 @@ export interface CascadeSelectState {
     overlayVisible: boolean;
 }
 
+/**
+ * Defines current options in CascadeSelect component.
+ */
+export interface CascadeSelectContext {
+    /**
+     * Current option.
+     */
+    item: any;
+    /**
+     * Index of the option.
+     */
+    index: number;
+    /**
+     * Level of the option.
+     */
+    level: number;
+    /**
+     * Current item group state of option as a boolean.
+     */
+    itemGroup: boolean;
+    /**
+     * Current active state of option as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of option as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of option as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in CascadeSelect component.
  */
@@ -294,7 +335,7 @@ export interface CascadeSelectProps {
     optionGroupIcon?: string | undefined;
     /**
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
-     * @defaultValue true
+     * @defaultValue false
      */
     autoOptionFocus?: boolean | undefined;
     /**
@@ -302,6 +343,11 @@ export interface CascadeSelectProps {
      * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Locale to use in searching. The default locale is the host environment's current locale.
      */

package/cascadeselect/CascadeSelect.vue

@@ -62,6 +62,7 @@
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
                             @option-change="onOptionChange"
+                            @option-focus-change="onOptionFocusChange"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -95,10 +96,10 @@ export default {
     overlay: null,
     searchTimeout: null,
     searchValue: null,
-    focusOnHover: false,
     data() {
         return {
             id: this.$attrs.id,
+            clicked: false,
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
             activeOptionPath: [],
@@ -116,7 +117,6 @@ export default {
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -152,13 +152,13 @@ export default {
         isOptionGroup(option, level) {
             return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
         },
-        getProccessedOptionLabel(processedOption) {
+        getProccessedOptionLabel(processedOption = {}) {
             const grouped = this.isProccessedOptionGroup(processedOption);
 
             return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
         },
         isProccessedOptionGroup(processedOption) {
-            return ObjectUtils.isNotEmpty(processedOption.children);
+            return ObjectUtils.isNotEmpty(processedOption?.children);
         },
         show(isFocus) {
             this.$emit('before-show');
@@ -168,9 +168,9 @@ export default {
             if (this.hasSelectedOption && ObjectUtils.isNotEmpty(this.activeOptionPath)) {
                 const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
 
-                this.focusedOptionInfo = { index: this.autoOptionFocus ? processedOption.index : -1, level: processedOption.level, parentKey: processedOption.parentKey };
+                this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey };
             } else {
-                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
+                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };
             }
 
             isFocus && DomHandler.focus(this.$refs.focusInput);
@@ -179,6 +179,7 @@ export default {
             const _hide = () => {
                 this.$emit('before-hide');
                 this.overlayVisible = false;
+                this.clicked = false;
                 this.activeOptionPath = [];
                 this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
 
@@ -271,6 +272,8 @@ export default {
 
                     break;
             }
+
+            this.clicked = false;
         },
         onOptionChange(event) {
             const { originalEvent, processedOption, isFocus, isHide } = event;
@@ -290,8 +293,17 @@ export default {
             grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
             isFocus && DomHandler.focus(this.$refs.focusInput);
         },
+        onOptionFocusChange(event) {
+            if (this.focusOnHover) {
+                const { originalEvent, processedOption } = event;
+                const { index, level, parentKey } = processedOption;
+
+                this.focusedOptionInfo = { index, level, parentKey };
+                this.changeFocusedOptionIndex(originalEvent, index);
+            }
+        },
         onOptionSelect(event, processedOption, isHide = true) {
-            const value = this.getOptionValue(processedOption.option);
+            const value = this.getOptionValue(processedOption?.option);
 
             this.activeOptionPath.forEach((p) => (p.selected = true));
             this.updateModel(event, value);
@@ -311,6 +323,7 @@ export default {
                 DomHandler.focus(this.$refs.focusInput);
             }
 
+            this.clicked = true;
             this.$emit('click', event);
         },
         onOverlayClick(event) {
@@ -330,11 +343,14 @@ export default {
             }
         },
         onArrowDownKey(event) {
-            const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.findFirstFocusedOptionIndex();
+            if (!this.overlayVisible) {
+                this.show();
+            } else {
+                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
 
-            this.changeFocusedOptionIndex(event, optionIndex);
+                this.changeFocusedOptionIndex(event, optionIndex);
+            }
 
-            !this.overlayVisible && this.show();
             event.preventDefault();
         },
         onArrowUpKey(event) {
@@ -349,7 +365,7 @@ export default {
                 this.overlayVisible && this.hide();
                 event.preventDefault();
             } else {
-                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
+                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
 
@@ -360,9 +376,9 @@ export default {
         onArrowLeftKey(event) {
             if (this.overlayVisible) {
                 const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
-                const parentOption = this.activeOptionPath.find((p) => p.key === processedOption.parentKey);
+                const parentOption = this.activeOptionPath.find((p) => p.key === processedOption?.parentKey);
                 const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
-                const root = ObjectUtils.isEmpty(processedOption.parent);
+                const root = ObjectUtils.isEmpty(processedOption?.parent);
 
                 if (matched) {
                     this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
@@ -383,10 +399,10 @@ export default {
                 const grouped = this.isProccessedOptionGroup(processedOption);
 
                 if (grouped) {
-                    const matched = this.activeOptionPath.some((p) => processedOption.key === p.key);
+                    const matched = this.activeOptionPath.some((p) => processedOption?.key === p.key);
 
                     if (matched) {
-                        this.focusedOptionInfo = { index: -1, parentKey: processedOption.key };
+                        this.focusedOptionInfo = { index: -1, parentKey: processedOption?.key };
                         this.searchValue = '';
                         this.onArrowDownKey(event);
                     } else {
@@ -411,6 +427,7 @@ export default {
         },
         onEnterKey(event) {
             if (!this.overlayVisible) {
+                this.focusedOptionInfo.index !== -1; // reset
                 this.onArrowDownKey(event);
             } else {
                 if (this.focusedOptionInfo.index !== -1) {
@@ -526,7 +543,7 @@ export default {
             }
         },
         isOptionMatched(processedOption) {
-            return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
+            return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
         },
         isValidOption(processedOption) {
             return ObjectUtils.isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
@@ -594,23 +611,25 @@ export default {
             let optionIndex = -1;
             let matched = false;
 
-            if (this.focusedOptionInfo.index !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
-            } else {
-                optionIndex = this.visibleOptions.findIndex((processedOption) => this.isOptionMatched(processedOption));
-            }
+            if (ObjectUtils.isNotEmpty(this.searchValue)) {
+                if (this.focusedOptionInfo.index !== -1) {
+                    optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
+                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
+                } else {
+                    optionIndex = this.visibleOptions.findIndex((processedOption) => this.isOptionMatched(processedOption));
+                }
 
-            if (optionIndex !== -1) {
-                matched = true;
-            }
+                if (optionIndex !== -1) {
+                    matched = true;
+                }
 
-            if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
-                optionIndex = this.findFirstFocusedOptionIndex();
-            }
+                if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
+                    optionIndex = this.findFirstFocusedOptionIndex();
+                }
 
-            if (optionIndex !== -1) {
-                this.changeFocusedOptionIndex(event, optionIndex);
+                if (optionIndex !== -1) {
+                    this.changeFocusedOptionIndex(event, optionIndex);
+                }
             }
 
             if (this.searchTimeout) {
@@ -635,12 +654,14 @@ export default {
             }
         },
         scrollInView(index = -1) {
-            const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
-            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+            this.$nextTick(() => {
+                const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+                const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
 
-            if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-            }
+                if (element) {
+                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            });
         },
         autoUpdateModel() {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {

package/cascadeselect/CascadeSelectSub.vue

@@ -11,19 +11,19 @@
                 :aria-level="level + 1"
                 :aria-setsize="options.length"
                 :aria-posinset="index + 1"
-                v-bind="ptm('item')"
+                v-bind="getPTOptions(processedOption, index, 'item')"
                 :data-p-item-group="isOptionGroup(processedOption)"
                 :data-p-highlight="isOptionActive(processedOption)"
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" v-bind="ptm('content')">
+                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else :class="cx('text')" v-bind="ptm('text')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    <span v-else :class="cx('text')" v-bind="getPTOptions(processedOption, index, 'text')">{{ 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="ptm('groupIcon')" />
-                        <AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="ptm('groupIcon')" />
+                        <span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
+                        <AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
                     </template>
                 </div>
                 <CascadeSelectSub
@@ -43,6 +43,7 @@
                     :optionGroupLabel="optionGroupLabel"
                     :optionGroupChildren="optionGroupChildren"
                     @option-change="onOptionChange"
+                    @option-focus-change="onOptionFocusChange"
                     :pt="pt"
                     :unstyled="unstyled"
                     :isParentMount="mounted"
@@ -62,7 +63,7 @@ export default {
     name: 'CascadeSelectSub',
     hostName: 'CascadeSelect',
     extends: BaseComponent,
-    emits: ['option-change'],
+    emits: ['option-change', 'option-focus-change'],
     container: null,
     props: {
         selectId: String,
@@ -109,6 +110,19 @@ export default {
         getOptionValue(processedOption) {
             return this.optionValue ? ObjectUtils.resolveFieldData(processedOption.option, this.optionValue) : processedOption.option;
         },
+        getPTOptions(processedOption, index, key) {
+            return this.ptm(key, {
+                context: {
+                    item: processedOption,
+                    index,
+                    level: this.level,
+                    itemGroup: this.isOptionGroup(processedOption),
+                    active: this.isOptionActive(processedOption),
+                    focused: this.isOptionFocused(processedOption),
+                    disabled: this.isOptionDisabled(processedOption)
+                }
+            });
+        },
         isOptionDisabled(processedOption) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(processedOption.option, this.optionDisabled) : false;
         },
@@ -136,9 +150,15 @@ export default {
         onOptionClick(event, processedOption) {
             this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });
         },
+        onOptionMouseMove(event, processedOption) {
+            this.$emit('option-focus-change', { originalEvent: event, processedOption });
+        },
         onOptionChange(event) {
             this.$emit('option-change', event);
         },
+        onOptionFocusChange(event) {
+            this.$emit('option-focus-change', event);
+        },
         containerRef(el) {
             this.container = el;
         }