primevue 4.1.0 → 4.2.0

package/cascadeselect/index.mjs

@@ -1,5 +1,5 @@
 import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isNotEmpty, isString, isPrintableCharacter, isEmpty, findLastIndex, equals } from '@primeuix/utils/object';
+import { resolveFieldData, isNotEmpty, equals, isString, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import AngleRightIcon from '@primevue/icons/angleright';
@@ -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,
@@ -181,7 +177,8 @@ var script$1 = {
     },
     activeOptionPath: Array,
     level: Number,
-    templates: null
+    templates: null,
+    value: null
   },
   methods: {
     getOptionId: function getOptionId(processedOption) {
@@ -219,7 +216,7 @@ var script$1 = {
       return isNotEmpty(processedOption.children);
     },
     isOptionSelected: function isOptionSelected(processedOption) {
-      return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
+      return equals(this.value, processedOption === null || processedOption === void 0 ? void 0 : processedOption.option);
     },
     isOptionActive: function isOptionActive(processedOption) {
       return this.activeOptionPath.some(function (path) {
@@ -251,15 +248,6 @@ var script$1 = {
         processedOption: processedOption
       });
     },
-    onOptionChange: function onOptionChange(event) {
-      this.$emit('option-change', event);
-    },
-    onOptionFocusChange: function onOptionFocusChange(event) {
-      this.$emit('option-focus-change', event);
-    },
-    onOptionFocusEnterChange: function onOptionFocusEnterChange(event) {
-      this.$emit('option-focus-enter-change', event);
-    },
     containerRef: function containerRef(el) {
       this.container = el;
     },
@@ -356,27 +344,35 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       optionGroupIcon: $props.optionGroupIcon,
       optionGroupLabel: $props.optionGroupLabel,
       optionGroupChildren: $props.optionGroupChildren,
-      onOptionChange: $options.onOptionChange,
-      onOptionFocusChange: $options.onOptionFocusChange,
-      onOptionFocusEnterChange: $options.onOptionFocusEnterChange,
+      value: $props.value,
+      onOptionChange: _cache[0] || (_cache[0] = function ($event) {
+        return _ctx.$emit('option-change', $event);
+      }),
+      onOptionFocusChange: _cache[1] || (_cache[1] = function ($event) {
+        return _ctx.$emit('option-focus-change', $event);
+      }),
+      onOptionFocusEnterChange: _cache[2] || (_cache[2] = function ($event) {
+        return _ctx.$emit('option-focus-enter-change', $event);
+      }),
       pt: _ctx.pt,
       unstyled: _ctx.unstyled
-    }, null, 8, ["class", "selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusChange", "onOptionFocusEnterChange", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_1$1);
+    }, null, 8, ["class", "selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "value", "pt", "unstyled"])) : createCommentVNode("", true)], 16, _hoisted_1$1);
   }), 128))], 16);
 }
 
 script$1.render = render$1;
 
+function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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,
@@ -461,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,
@@ -505,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,
@@ -513,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) {
@@ -569,11 +567,8 @@ var script = {
       this.clicked = false;
     },
     onOptionChange: function onOptionChange(event) {
-      var isSelectable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var originalEvent = event.originalEvent,
-        processedOption = event.processedOption,
-        isFocus = event.isFocus,
-        isHide = event.isHide;
+      var processedOption = event.processedOption,
+        type = event.type;
       if (isEmpty(processedOption)) return;
       var index = processedOption.index,
         key = processedOption.key,
@@ -581,56 +576,81 @@ var script = {
         parentKey = processedOption.parentKey,
         children = processedOption.children;
       var grouped = isNotEmpty(children);
-      var root = isEmpty(processedOption.parent);
+      var activeOptionPath = this.activeOptionPath.filter(function (p) {
+        return p.parentKey !== parentKey && p.parentKey !== key;
+      });
+      this.focusedOptionInfo = {
+        index: index,
+        level: level,
+        parentKey: parentKey
+      };
+      if (type == 'hover' && this.queryMatches) {
+        return;
+      }
+      if (grouped) {
+        activeOptionPath.push(processedOption);
+      }
+      this.activeOptionPath = activeOptionPath;
+    },
+    onOptionClick: function onOptionClick(event) {
+      var originalEvent = event.originalEvent,
+        processedOption = event.processedOption,
+        isFocus = event.isFocus,
+        isHide = event.isHide,
+        preventSelection = event.preventSelection;
+      var index = processedOption.index,
+        key = processedOption.key,
+        level = processedOption.level,
+        parentKey = processedOption.parentKey;
+      var grouped = this.isProccessedOptionGroup(processedOption);
       var selected = this.isSelected(processedOption);
       if (selected) {
-        this.focusedOptionInfo = {
-          index: index,
-          level: level,
-          parentKey: parentKey
-        };
         this.activeOptionPath = this.activeOptionPath.filter(function (p) {
           return key !== p.key && key.startsWith(p.key);
         });
-        this.dirty = !root;
-      } else {
-        var activeOptionPath = this.activeOptionPath.filter(function (p) {
-          return p.parentKey !== parentKey && p.parentKey !== key;
-        });
-        activeOptionPath.push(processedOption);
         this.focusedOptionInfo = {
           index: index,
           level: level,
           parentKey: parentKey
         };
-        this.activeOptionPath = activeOptionPath;
-      }
-      if (grouped) {
-        this.dirty = true;
-        this.onOptionGroupSelect(originalEvent, processedOption);
       } else {
-        isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
+        if (grouped) {
+          this.onOptionChange(event);
+          this.onOptionGroupSelect(originalEvent, processedOption);
+        } else {
+          var activeOptionPath = this.activeOptionPath.filter(function (p) {
+            return p.parentKey !== parentKey;
+          });
+          activeOptionPath.push(processedOption);
+          this.focusedOptionInfo = {
+            index: index,
+            level: level,
+            parentKey: parentKey
+          };
+          if (!preventSelection || (processedOption === null || processedOption === void 0 ? void 0 : processedOption.children.length) !== 0) {
+            this.activeOptionPath = activeOptionPath;
+            this.onOptionSelect(originalEvent, processedOption, isHide);
+          }
+        }
       }
       isFocus && focus(this.$refs.focusInput);
     },
-    onOptionFocusMoveChange: function onOptionFocusMoveChange(event) {
+    onOptionMouseEnter: function onOptionMouseEnter(event) {
       if (this.focusOnHover) {
-        var originalEvent = event.originalEvent,
-          processedOption = event.processedOption;
-        var index = processedOption.index,
-          level = processedOption.level,
-          parentKey = processedOption.parentKey;
-        this.focusedOptionInfo = {
-          index: index,
-          level: level,
-          parentKey: parentKey
-        };
-        this.changeFocusedOptionIndex(originalEvent, index);
+        if (this.dirty || !this.dirty && isNotEmpty(this.d_value)) {
+          this.onOptionChange(_objectSpread$1(_objectSpread$1({}, event), {}, {
+            type: 'hover'
+          }));
+        } else if (!this.dirty && event.processedOption.level === 0) {
+          this.onOptionClick(_objectSpread$1(_objectSpread$1({}, event), {}, {
+            type: 'hover'
+          }));
+        }
       }
     },
-    onOptionFocusChangeEnter: function onOptionFocusChangeEnter(event) {
-      if (this.dirty) {
-        this.onOptionChange(event, false);
+    onOptionMouseMove: function onOptionMouseMove(event) {
+      if (this.focused && this.focusOnHover) {
+        this.changeFocusedOptionIndex(event, event.processedOption.index);
       }
     },
     onOptionSelect: function onOptionSelect(event, processedOption) {
@@ -653,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,
@@ -678,7 +703,7 @@ var script = {
         this.show();
       } else {
         var 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();
     },
@@ -696,7 +721,7 @@ var script = {
         event.preventDefault();
       } else {
         var 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();
       }
@@ -769,9 +794,10 @@ var script = {
         if (this.focusedOptionInfo.index !== -1) {
           var processedOption = this.visibleOptions[this.focusedOptionInfo.index];
           var grouped = this.isProccessedOptionGroup(processedOption);
-          this.onOptionChange({
+          this.onOptionClick({
             originalEvent: event,
-            processedOption: processedOption
+            processedOption: processedOption,
+            preventSelection: false
           });
           !grouped && this.hide();
         }
@@ -1009,10 +1035,18 @@ var script = {
       }, 500);
       return matched;
     },
-    changeFocusedOptionIndex: function changeFocusedOptionIndex(event, index) {
+    changeFocusedOptionIndex: function 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: preventSelection
+          });
+        }
         if (this.selectOnFocus) {
           this.onOptionChange({
             originalEvent: event,
@@ -1037,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],
@@ -1051,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
@@ -1083,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;
       }
@@ -1127,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: {
@@ -1141,7 +1176,8 @@ var script = {
     Portal: Portal,
     ChevronDownIcon: ChevronDownIcon,
     SpinnerIcon: SpinnerIcon,
-    AngleRightIcon: AngleRightIcon
+    AngleRightIcon: AngleRightIcon,
+    TimesIcon: TimesIcon
   }
 };
 
@@ -1197,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"
@@ -1257,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')
@@ -1277,19 +1325,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             optionGroupIcon: _ctx.optionGroupIcon,
             optionGroupLabel: _ctx.optionGroupLabel,
             optionGroupChildren: _ctx.optionGroupChildren,
-            onOptionChange: $options.onOptionChange,
-            onOptionFocusMoveChange: $options.onOptionFocusMoveChange,
-            onOptionFocusEnterChange: $options.onOptionFocusChangeEnter,
+            value: _ctx.d_value,
+            onOptionChange: $options.onOptionClick,
+            onOptionFocusChange: $options.onOptionMouseMove,
+            onOptionFocusEnterChange: $options.onOptionMouseEnter,
             pt: _ctx.pt,
             unstyled: _ctx.unstyled
-          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusMoveChange", "onOptionFocusEnterChange", "pt", "unstyled"])], 16), createElementVNode("span", mergeProps({
+          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "value", "onOptionChange", "onOptionFocusChange", "onOptionFocusEnterChange", "pt", "unstyled"])], 16), createElementVNode("span", mergeProps({
             role: "status",
             "aria-live": "polite",
             "class": "p-hidden-accessible"
           }, _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)];
         }),