primevue 4.0.7 → 4.1.0

package/cascadeselect/CascadeSelect.vue

@@ -30,7 +30,7 @@
                 {{ label }}
             </slot>
         </span>
-        <div :class="cx('dropdown')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdown')">
+        <div :class="cx('dropdown')" role="button" tabindex="-1" 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')" />
@@ -53,6 +53,7 @@
                     @keydown="onOverlayKeyDown"
                     v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
                 >
+                    <slot name="header" :value="modelValue" :options="options" />
                     <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
                         <CascadeSelectSub
                             :id="id + '_tree'"
@@ -71,7 +72,8 @@
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
                             @option-change="onOptionChange"
-                            @option-focus-change="onOptionFocusChange"
+                            @option-focus-move-change="onOptionFocusMoveChange"
+                            @option-focus-enter-change="onOptionFocusChangeEnter"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -79,6 +81,7 @@
                     <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
+                    <slot name="footer" :value="modelValue" :options="options" />
                 </div>
             </transition>
         </Portal>
@@ -107,6 +110,7 @@ export default {
         $pcFluid: { default: null }
     },
     outsideClickListener: null,
+    matchMediaListener: null,
     scrollHandler: null,
     resizeListener: null,
     overlay: null,
@@ -120,7 +124,10 @@ export default {
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
             activeOptionPath: [],
             overlayVisible: false,
-            dirty: false
+            dirty: false,
+            mobileActive: false,
+            query: null,
+            queryMatches: false
         };
     },
     watch: {
@@ -134,10 +141,12 @@ export default {
     mounted() {
         this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
+        this.bindMatchMediaListener();
     },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
+        this.unbindMatchMediaListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -148,6 +157,10 @@ export default {
             ZIndex.clear(this.overlay);
             this.overlay = null;
         }
+
+        if (this.mobileActive) {
+            this.mobileActive = false;
+        }
     },
     methods: {
         getOptionLabel(option) {
@@ -291,25 +304,23 @@ export default {
 
             this.clicked = false;
         },
-        onOptionChange(event) {
+        onOptionChange(event, isSelectable = true) {
             const { originalEvent, processedOption, isFocus, isHide } = event;
 
             if (isEmpty(processedOption)) return;
 
-            const { index, level, parentKey, children } = processedOption;
+            const { index, key, level, parentKey, children } = processedOption;
             const grouped = isNotEmpty(children);
             const root = isEmpty(processedOption.parent);
             const selected = this.isSelected(processedOption);
 
             if (selected) {
-                const { index, key, level, parentKey } = processedOption;
-
                 this.focusedOptionInfo = { index, level, parentKey };
                 this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));
 
                 this.dirty = !root;
             } else {
-                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
+                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
 
                 activeOptionPath.push(processedOption);
 
@@ -317,10 +328,16 @@ export default {
                 this.activeOptionPath = activeOptionPath;
             }
 
-            grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
+            if (grouped) {
+                this.dirty = true;
+                this.onOptionGroupSelect(originalEvent, processedOption);
+            } else {
+                isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
+            }
+
             isFocus && focus(this.$refs.focusInput);
         },
-        onOptionFocusChange(event) {
+        onOptionFocusMoveChange(event) {
             if (this.focusOnHover) {
                 const { originalEvent, processedOption } = event;
                 const { index, level, parentKey } = processedOption;
@@ -329,6 +346,11 @@ export default {
                 this.changeFocusedOptionIndex(originalEvent, index);
             }
         },
+        onOptionFocusChangeEnter(event) {
+            if (this.dirty) {
+                this.onOptionChange(event, false);
+            }
+        },
         onOptionSelect(event, processedOption, isHide = true) {
             const value = this.getOptionValue(processedOption?.option);
 
@@ -569,6 +591,27 @@ export default {
                 this.resizeListener = null;
             }
         },
+        bindMatchMediaListener() {
+            if (!this.matchMediaListener) {
+                const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+                this.query = query;
+                this.queryMatches = query.matches;
+
+                this.matchMediaListener = () => {
+                    this.queryMatches = query.matches;
+                    this.mobileActive = false;
+                };
+
+                this.query.addEventListener('change', this.matchMediaListener);
+            }
+        },
+        unbindMatchMediaListener() {
+            if (this.matchMediaListener) {
+                this.query.removeEventListener('change', this.matchMediaListener);
+                this.matchMediaListener = null;
+            }
+        },
         isOptionMatched(processedOption) {
             return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
         },

package/cascadeselect/CascadeSelectSub.vue

@@ -17,13 +17,22 @@
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('optionContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'optionContent')">
+                <div
+                    v-ripple
+                    :class="cx('optionContent')"
+                    @click="onOptionClick($event, processedOption)"
+                    @mouseenter="onOptionMouseEnter($event, processedOption)"
+                    @mousemove="onOptionMouseMove($event, processedOption)"
+                    v-bind="getPTOptions(processedOption, index, 'optionContent')"
+                >
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" :selected="isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)" />
                     <span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ 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')" />
-                        <AngleRightIcon v-else :class="cx('groupIcon')" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
+                        <span :class="cx('groupIconContainer')">
+                            <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" :class="cx('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')" />
+                        </span>
                     </template>
                 </div>
                 <CascadeSelectSub
@@ -44,9 +53,9 @@
                     :optionGroupChildren="optionGroupChildren"
                     @option-change="onOptionChange"
                     @option-focus-change="onOptionFocusChange"
+                    @option-focus-enter-change="onOptionFocusEnterChange"
                     :pt="pt"
                     :unstyled="unstyled"
-                    :isParentMount="mounted"
                 />
             </li>
         </template>
@@ -54,9 +63,8 @@
 </template>
 
 <script>
+import { isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
-import { nestedPosition } from '@primeuix/utils/dom';
-import { resolveFieldData, isNotEmpty } from '@primeuix/utils/object';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 
@@ -64,7 +72,7 @@ export default {
     name: 'CascadeSelectSub',
     hostName: 'CascadeSelect',
     extends: BaseComponent,
-    emits: ['option-change', 'option-focus-change'],
+    emits: ['option-change', 'option-focus-change', 'option-focus-enter-change'],
     container: null,
     props: {
         selectId: String,
@@ -81,26 +89,9 @@ export default {
         },
         activeOptionPath: Array,
         level: Number,
-        templates: null,
-        isParentMount: Boolean
-    },
-    data() {
-        return {
-            mounted: false
-        };
-    },
-    watch: {
-        isParentMount: {
-            handler(newValue) {
-                newValue && nestedPosition(this.container, this.level);
-            }
-        }
-    },
-    mounted() {
-        // entering order correction when an option is selected
-        (this.isParentMount || this.level === 0) && nestedPosition(this.container, this.level);
-        this.mounted = true;
+        templates: null
     },
+
     methods: {
         getOptionId(processedOption) {
             return `${this.selectId}_${processedOption.key}`;
@@ -151,6 +142,9 @@ export default {
         onOptionClick(event, processedOption) {
             this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });
         },
+        onOptionMouseEnter(event, processedOption) {
+            this.$emit('option-focus-enter-change', { originalEvent: event, processedOption });
+        },
         onOptionMouseMove(event, processedOption) {
             this.$emit('option-focus-change', { originalEvent: event, processedOption });
         },
@@ -160,6 +154,9 @@ export default {
         onOptionFocusChange(event) {
             this.$emit('option-focus-change', event);
         },
+        onOptionFocusEnterChange(event) {
+            this.$emit('option-focus-enter-change', event);
+        },
         containerRef(el) {
             this.container = el;
         },

package/cascadeselect/index.d.ts

@@ -128,6 +128,10 @@ export interface CascadeSelectPassThroughOptions {
      * Used to pass attributes to the option list's DOM element.
      */
     optionList?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the group icon container's DOM element.
+     */
+    groupIconContainer?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the group icon's DOM element.
      */
@@ -287,6 +291,11 @@ export interface CascadeSelectProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary.
+     * @defaultValue 960px
+     */
+    breakpoint?: string | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -496,7 +505,38 @@ export interface CascadeSelectSlots {
     /**
      * Custom option group icon template.
      */
-    optiongroupicon(): VNode[];
+    optiongroupicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom header template.
+     */
+    header(scope: {
+        /**
+         * Current value
+         */
+        value: any;
+        /**
+         * Options of the component
+         */
+        options: any[];
+    }): VNode[];
+    /**
+     * Custom footer template.
+     */
+    footer(scope: {
+        /**
+         * Current value
+         */
+        value: any;
+        /**
+         * Options of the component
+         */
+        options: any[];
+    }): VNode[];
 }
 
 /**