primevue 4.1.0 → 4.2.0

package/cascadeselect/CascadeSelect.vue

@@ -26,10 +26,13 @@
             />
         </div>
         <span :class="cx('label')" v-bind="ptm('label')">
-            <slot name="value" :value="modelValue" :placeholder="placeholder">
+            <slot name="value" :value="d_value" :placeholder="placeholder">
                 {{ label }}
             </slot>
         </span>
+        <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
+        </slot>
         <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')" />
@@ -53,7 +56,7 @@
                     @keydown="onOverlayKeyDown"
                     v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
                 >
-                    <slot name="header" :value="modelValue" :options="options" />
+                    <slot name="header" :value="d_value" :options="options" />
                     <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
                         <CascadeSelectSub
                             :id="id + '_tree'"
@@ -71,9 +74,10 @@
                             :optionGroupIcon="optionGroupIcon"
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
-                            @option-change="onOptionChange"
-                            @option-focus-move-change="onOptionFocusMoveChange"
-                            @option-focus-enter-change="onOptionFocusChangeEnter"
+                            :value="d_value"
+                            @option-change="onOptionClick"
+                            @option-focus-change="onOptionMouseMove"
+                            @option-focus-enter-change="onOptionMouseEnter"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -81,7 +85,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" />
+                    <slot name="footer" :value="d_value" :options="options" />
                 </div>
             </transition>
         </Portal>
@@ -100,15 +104,13 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseCascadeSelect from './BaseCascadeSelect.vue';
 import CascadeSelectSub from './CascadeSelectSub.vue';
+import TimesIcon from '@primevue/icons/times';
 
 export default {
     name: 'CascadeSelect',
     extends: BaseCascadeSelect,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
-    inject: {
-        $pcFluid: { default: null }
-    },
+    emits: ['change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
     outsideClickListener: null,
     matchMediaListener: null,
     scrollHandler: null,
@@ -192,9 +194,9 @@ export default {
         show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
-            this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
+            this.activeOptionPath = this.$filled ? this.findOptionPathByValue(this.d_value) : this.activeOptionPath;
 
-            if (this.hasSelectedOption && isNotEmpty(this.activeOptionPath)) {
+            if (this.$filled && isNotEmpty(this.activeOptionPath)) {
                 const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
 
                 this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey };
@@ -233,6 +235,7 @@ export default {
             this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
             this.searchValue = '';
             this.$emit('blur', event);
+            this.formField.onBlur?.();
         },
         onKeyDown(event) {
             if (this.disabled || this.loading) {
@@ -304,51 +307,68 @@ export default {
 
             this.clicked = false;
         },
-        onOptionChange(event, isSelectable = true) {
-            const { originalEvent, processedOption, isFocus, isHide } = event;
+        onOptionChange(event) {
+            const { processedOption, type } = event;
 
             if (isEmpty(processedOption)) return;
 
             const { index, key, level, parentKey, children } = processedOption;
             const grouped = isNotEmpty(children);
-            const root = isEmpty(processedOption.parent);
+            const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+
+            this.focusedOptionInfo = { index, level, parentKey };
+
+            if (type == 'hover' && this.queryMatches) {
+                return;
+            }
+
+            if (grouped) {
+                activeOptionPath.push(processedOption);
+            }
+
+            this.activeOptionPath = activeOptionPath;
+        },
+        onOptionClick(event) {
+            const { originalEvent, processedOption, isFocus, isHide, preventSelection } = event;
+            const { index, key, level, parentKey } = processedOption;
+            const grouped = this.isProccessedOptionGroup(processedOption);
             const selected = this.isSelected(processedOption);
 
             if (selected) {
-                this.focusedOptionInfo = { index, level, parentKey };
                 this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));
-
-                this.dirty = !root;
+                this.focusedOptionInfo = { index, level, parentKey };
             } else {
-                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+                if (grouped) {
+                    this.onOptionChange(event);
+                    this.onOptionGroupSelect(originalEvent, processedOption);
+                } else {
+                    const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
 
-                activeOptionPath.push(processedOption);
+                    activeOptionPath.push(processedOption);
 
-                this.focusedOptionInfo = { index, level, parentKey };
-                this.activeOptionPath = activeOptionPath;
-            }
+                    this.focusedOptionInfo = { index, level, parentKey };
 
-            if (grouped) {
-                this.dirty = true;
-                this.onOptionGroupSelect(originalEvent, processedOption);
-            } else {
-                isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
+                    if (!preventSelection || processedOption?.children.length !== 0) {
+                        this.activeOptionPath = activeOptionPath;
+                        this.onOptionSelect(originalEvent, processedOption, isHide);
+                    }
+                }
             }
 
             isFocus && focus(this.$refs.focusInput);
         },
-        onOptionFocusMoveChange(event) {
+        onOptionMouseEnter(event) {
             if (this.focusOnHover) {
-                const { originalEvent, processedOption } = event;
-                const { index, level, parentKey } = processedOption;
-
-                this.focusedOptionInfo = { index, level, parentKey };
-                this.changeFocusedOptionIndex(originalEvent, index);
+                if (this.dirty || (!this.dirty && isNotEmpty(this.d_value))) {
+                    this.onOptionChange({ ...event, type: 'hover' });
+                } else if (!this.dirty && event.processedOption.level === 0) {
+                    this.onOptionClick({ ...event, type: 'hover' });
+                }
             }
         },
-        onOptionFocusChangeEnter(event) {
-            if (this.dirty) {
-                this.onOptionChange(event, false);
+        onOptionMouseMove(event) {
+            if (this.focused && this.focusOnHover) {
+                this.changeFocusedOptionIndex(event, event.processedOption.index);
             }
         },
         onOptionSelect(event, processedOption, isHide = true) {
@@ -367,7 +387,9 @@ export default {
                 return;
             }
 
-            if (!this.overlay || !this.overlay.contains(event.target)) {
+            if (event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+                return;
+            } else if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide() : this.show();
                 focus(this.$refs.focusInput);
             }
@@ -375,6 +397,9 @@ export default {
             this.clicked = true;
             this.$emit('click', event);
         },
+        onClearClick(event) {
+            this.updateModel(event, null);
+        },
         onOverlayClick(event) {
             OverlayEventBus.emit('overlay-click', {
                 originalEvent: event,
@@ -397,7 +422,7 @@ export default {
             } 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, true);
             }
 
             event.preventDefault();
@@ -416,7 +441,7 @@ export default {
             } else {
                 const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
-                this.changeFocusedOptionIndex(event, optionIndex);
+                this.changeFocusedOptionIndex(event, optionIndex, true);
 
                 !this.overlayVisible && this.show();
                 event.preventDefault();
@@ -483,7 +508,7 @@ export default {
                     const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                     const grouped = this.isProccessedOptionGroup(processedOption);
 
-                    this.onOptionChange({ originalEvent: event, processedOption });
+                    this.onOptionClick({ originalEvent: event, processedOption, preventSelection: false });
                     !grouped && this.hide();
                 }
             }
@@ -713,11 +738,15 @@ export default {
 
             return matched;
         },
-        changeFocusedOptionIndex(event, index) {
+        changeFocusedOptionIndex(event, index, preventSelection) {
             if (this.focusedOptionInfo.index !== index) {
                 this.focusedOptionInfo.index = index;
                 this.scrollInView();
 
+                if (this.focusOnHover) {
+                    this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false, preventSelection });
+                }
+
                 if (this.selectOnFocus) {
                     this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false });
                 }
@@ -734,7 +763,7 @@ export default {
             });
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
                 this.focusedOptionInfo.index = this.findFirstFocusedOptionIndex();
                 this.onOptionChange({ processedOption: this.visibleOptions[this.focusedOptionInfo.index], isHide: false });
 
@@ -742,7 +771,7 @@ export default {
             }
         },
         updateModel(event, value) {
-            this.$emit('update:modelValue', value);
+            this.writeValue(value, event);
             this.$emit('change', { originalEvent: event, value });
         },
         createProcessedOptions(options, level = 0, parent = {}, parentKey = '') {
@@ -771,14 +800,15 @@ export default {
         }
     },
     computed: {
+        // @deprecated use $filled instead.
         hasSelectedOption() {
-            return isNotEmpty(this.modelValue);
+            return this.$filled;
         },
         label() {
             const label = this.placeholder || 'p-emptylabel';
 
-            if (this.hasSelectedOption) {
-                const activeOptionPath = this.findOptionPathByValue(this.modelValue);
+            if (this.$filled) {
+                const activeOptionPath = this.findOptionPathByValue(this.d_value);
                 const processedOption = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
 
                 return processedOption ? this.getOptionLabel(processedOption.option) : label;
@@ -816,21 +846,22 @@ export default {
             return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
         },
         selectedMessageText() {
-            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+            return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
         },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        isClearIconVisible() {
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         }
     },
     components: {
-        CascadeSelectSub: CascadeSelectSub,
-        Portal: Portal,
-        ChevronDownIcon: ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
-        AngleRightIcon: AngleRightIcon
+        CascadeSelectSub,
+        Portal,
+        ChevronDownIcon,
+        SpinnerIcon,
+        AngleRightIcon,
+        TimesIcon
     }
 };
 </script>

package/cascadeselect/CascadeSelectSub.vue

@@ -51,9 +51,10 @@
                     :optionGroupIcon="optionGroupIcon"
                     :optionGroupLabel="optionGroupLabel"
                     :optionGroupChildren="optionGroupChildren"
-                    @option-change="onOptionChange"
-                    @option-focus-change="onOptionFocusChange"
-                    @option-focus-enter-change="onOptionFocusEnterChange"
+                    :value="value"
+                    @option-change="$emit('option-change', $event)"
+                    @option-focus-change="$emit('option-focus-change', $event)"
+                    @option-focus-enter-change="$emit('option-focus-enter-change', $event)"
                     :pt="pt"
                     :unstyled="unstyled"
                 />
@@ -63,11 +64,10 @@
 </template>
 
 <script>
-import { isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
+import { equals, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-
 export default {
     name: 'CascadeSelectSub',
     hostName: 'CascadeSelect',
@@ -89,9 +89,9 @@ export default {
         },
         activeOptionPath: Array,
         level: Number,
-        templates: null
+        templates: null,
+        value: null
     },
-
     methods: {
         getOptionId(processedOption) {
             return `${this.selectId}_${processedOption.key}`;
@@ -128,7 +128,7 @@ export default {
             return isNotEmpty(processedOption.children);
         },
         isOptionSelected(processedOption) {
-            return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
+            return equals(this.value, processedOption?.option);
         },
         isOptionActive(processedOption) {
             return this.activeOptionPath.some((path) => path.key === processedOption.key);
@@ -148,15 +148,6 @@ export default {
         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);
-        },
-        onOptionFocusEnterChange(event) {
-            this.$emit('option-focus-enter-change', event);
-        },
         containerRef(el) {
             this.container = el;
         },

package/cascadeselect/index.d.ts

@@ -7,7 +7,7 @@
  * @module cascadeselect
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
@@ -88,6 +88,10 @@ export interface CascadeSelectPassThroughOptions {
      * Used to pass attributes to the label's DOM element.
      */
     label?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    clearIcon?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the dropdown button's DOM element.
      */
@@ -263,6 +267,14 @@ export interface CascadeSelectProps {
      * Value of the component.
      */
     modelValue?: any | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any | undefined;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * An array of selectitems to display as the available options.
      */
@@ -296,6 +308,10 @@ export interface CascadeSelectProps {
      * @defaultValue 960px
      */
     breakpoint?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -315,6 +331,15 @@ export interface CascadeSelectProps {
      * A property to uniquely identify an option.
      */
     dataKey?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Icon to display in clear button.
+     */
+    clearIcon?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
@@ -441,6 +466,10 @@ export interface CascadeSelectProps {
      * Establishes a string value that labels the component.
      */
     ariaLabel?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -537,6 +566,17 @@ export interface CascadeSelectSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**
@@ -548,6 +588,11 @@ export interface CascadeSelectEmitsOptions {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {*} value - New value.
+     */
+    'value-change'(value: any): void;
     /**
      * Callback to invoke on value change.
      * @param { CascadeSelectChangeEvent } event - Custom change event.
@@ -609,7 +654,7 @@ declare const CascadeSelect: DefineComponent<CascadeSelectProps, CascadeSelectSl
 
 declare module 'vue' {
     export interface GlobalComponents {
-        CascadeSelect: GlobalComponentConstructor<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits>;
+        CascadeSelect: DefineComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits>;
     }
 }