primevue 4.1.1 → 4.2.1

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,7 +74,7 @@
                             :optionGroupIcon="optionGroupIcon"
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
-                            :value="modelValue"
+                            :value="d_value"
                             @option-change="onOptionClick"
                             @option-focus-change="onOptionMouseMove"
                             @option-focus-enter-change="onOptionMouseEnter"
@@ -82,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>
@@ -101,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,
@@ -193,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 };
@@ -234,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) {
@@ -357,7 +359,7 @@ export default {
         },
         onOptionMouseEnter(event) {
             if (this.focusOnHover) {
-                if (this.dirty || (!this.dirty && isNotEmpty(this.modelValue))) {
+                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' });
@@ -385,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);
             }
@@ -393,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,
@@ -756,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 });
 
@@ -764,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 = '') {
@@ -793,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;
@@ -838,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/index.d.ts

@@ -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.

package/cascadeselect/index.mjs

@@ -7,16 +7,17 @@ import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import CascadeSelectStyle from 'primevue/cascadeselect/style';
+import BaseComponent from '@primevue/core/basecomponent';
 import Ripple from 'primevue/ripple';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent, toDisplayString, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createTextVNode, createVNode, withCtx, Transition } from 'vue';
+import TimesIcon from '@primevue/icons/times';
 
 var script$2 = {
   name: 'BaseCascadeSelect',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: null,
     options: Array,
     optionLabel: null,
     optionValue: null,
@@ -28,16 +29,15 @@ var script$2 = {
       type: String,
       "default": '960px'
     },
-    variant: {
-      type: String,
-      "default": null
-    },
-    invalid: {
+    dataKey: null,
+    showClear: {
       type: Boolean,
       "default": false
     },
-    disabled: Boolean,
-    dataKey: null,
+    clearIcon: {
+      type: String,
+      "default": undefined
+    },
     inputId: {
       type: String,
       "default": null
@@ -145,10 +145,6 @@ var script$2 = {
     ariaLabel: {
       type: String,
       "default": null
-    },
-    fluid: {
-      type: Boolean,
-      "default": null
     }
   },
   style: CascadeSelectStyle,
@@ -376,12 +372,7 @@ var script = {
   name: 'CascadeSelect',
   "extends": script$2,
   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,
@@ -466,8 +457,8 @@ var script = {
     show: function show(isFocus) {
       this.$emit('before-show');
       this.overlayVisible = true;
-      this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
-      if (this.hasSelectedOption && isNotEmpty(this.activeOptionPath)) {
+      this.activeOptionPath = this.$filled ? this.findOptionPathByValue(this.d_value) : this.activeOptionPath;
+      if (this.$filled && isNotEmpty(this.activeOptionPath)) {
         var processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
         this.focusedOptionInfo = {
           index: processedOption.index,
@@ -510,6 +501,7 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.focused = false;
       this.focusedOptionInfo = {
         index: -1,
@@ -518,6 +510,7 @@ var script = {
       };
       this.searchValue = '';
       this.$emit('blur', event);
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField);
     },
     onKeyDown: function onKeyDown(event) {
       if (this.disabled || this.loading) {
@@ -644,7 +637,7 @@ var script = {
     },
     onOptionMouseEnter: function onOptionMouseEnter(event) {
       if (this.focusOnHover) {
-        if (this.dirty || !this.dirty && isNotEmpty(this.modelValue)) {
+        if (this.dirty || !this.dirty && isNotEmpty(this.d_value)) {
           this.onOptionChange(_objectSpread$1(_objectSpread$1({}, event), {}, {
             type: 'hover'
           }));
@@ -680,13 +673,18 @@ var script = {
       if (this.disabled || this.loading) {
         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);
       }
       this.clicked = true;
       this.$emit('click', event);
     },
+    onClearClick: function onClearClick(event) {
+      this.updateModel(event, null);
+    },
     onOverlayClick: function onOverlayClick(event) {
       OverlayEventBus.emit('overlay-click', {
         originalEvent: event,
@@ -1073,7 +1071,7 @@ var script = {
       });
     },
     autoUpdateModel: function 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],
@@ -1087,7 +1085,7 @@ var script = {
       }
     },
     updateModel: function updateModel(event, value) {
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
       this.$emit('change', {
         originalEvent: event,
         value: value
@@ -1119,13 +1117,14 @@ var script = {
     }
   },
   computed: {
+    // @deprecated use $filled instead.
     hasSelectedOption: function hasSelectedOption() {
-      return isNotEmpty(this.modelValue);
+      return this.$filled;
     },
     label: function label() {
       var label = this.placeholder || 'p-emptylabel';
-      if (this.hasSelectedOption) {
-        var activeOptionPath = this.findOptionPathByValue(this.modelValue);
+      if (this.$filled) {
+        var activeOptionPath = this.findOptionPathByValue(this.d_value);
         var processedOption = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
         return processedOption ? this.getOptionLabel(processedOption.option) : label;
       }
@@ -1163,13 +1162,13 @@ var script = {
       return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
     },
     selectedMessageText: function selectedMessageText() {
-      return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+      return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
     },
     focusedOptionId: function focusedOptionId() {
       return this.focusedOptionInfo.index !== -1 ? "".concat(this.id).concat(isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : '', "_").concat(this.focusedOptionInfo.index) : null;
     },
-    hasFluid: function hasFluid() {
-      return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+    isClearIconVisible: function isClearIconVisible() {
+      return this.showClear && this.d_value != null && isNotEmpty(this.options);
     }
   },
   components: {
@@ -1177,7 +1176,8 @@ var script = {
     Portal: Portal,
     ChevronDownIcon: ChevronDownIcon,
     SpinnerIcon: SpinnerIcon,
-    AngleRightIcon: AngleRightIcon
+    AngleRightIcon: AngleRightIcon,
+    TimesIcon: TimesIcon
   }
 };
 
@@ -1233,11 +1233,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _objectSpread(_objectSpread({}, _ctx.inputProps), _ctx.ptm('hiddenInput'))), null, 16, _hoisted_1)], 16), createElementVNode("span", mergeProps({
     "class": _ctx.cx('label')
   }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "value", {
-    value: _ctx.modelValue,
+    value: _ctx.d_value,
     placeholder: _ctx.placeholder
   }, function () {
     return [createTextVNode(toDisplayString($options.label), 1)];
-  })], 16), createElementVNode("div", mergeProps({
+  })], 16), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
+    key: 0,
+    "class": normalizeClass(_ctx.cx('clearIcon')),
+    clearCallback: $options.onClearClick
+  }, function () {
+    return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon ? 'i' : 'TimesIcon'), mergeProps({
+      ref: "clearIcon",
+      "class": [_ctx.cx('clearIcon'), _ctx.clearIcon],
+      onClick: $options.onClearClick
+    }, _ctx.ptm('clearIcon'), {
+      "data-pc-section": "clearicon"
+    }), null, 16, ["class", "onClick"]))];
+  }) : createCommentVNode("", true), createElementVNode("div", mergeProps({
     "class": _ctx.cx('dropdown'),
     role: "button",
     tabindex: "-1"
@@ -1293,7 +1305,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
             })
           }, _objectSpread(_objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.overlayProps), _ctx.ptm('overlay'))), [renderSlot(_ctx.$slots, "header", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: _ctx.options
           }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('listContainer')
@@ -1313,7 +1325,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             optionGroupIcon: _ctx.optionGroupIcon,
             optionGroupLabel: _ctx.optionGroupLabel,
             optionGroupChildren: _ctx.optionGroupChildren,
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             onOptionChange: $options.onOptionClick,
             onOptionFocusChange: $options.onOptionMouseMove,
             onOptionFocusEnterChange: $options.onOptionMouseEnter,
@@ -1326,7 +1338,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('hiddenSelectedMessage'), {
             "data-p-hidden-accessible": true
           }), toDisplayString($options.selectedMessageText), 17), renderSlot(_ctx.$slots, "footer", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: _ctx.options
           })], 16)) : createCommentVNode("", true)];
         }),