primevue 4.0.7 → 4.1.0

package/cascadeselect/index.mjs

@@ -1,4 +1,4 @@
-import { nestedPosition, focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
+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 { ZIndex } from '@primeuix/utils/zindex';
 import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
@@ -10,7 +10,7 @@ import Portal from 'primevue/portal';
 import BaseComponent from '@primevue/core/basecomponent';
 import CascadeSelectStyle from 'primevue/cascadeselect/style';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, normalizeClass, createElementVNode, renderSlot, createTextVNode, createVNode, withCtx, Transition } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent, toDisplayString, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createTextVNode, createVNode, withCtx, Transition } from 'vue';
 
 var script$2 = {
   name: 'BaseCascadeSelect',
@@ -24,6 +24,10 @@ var script$2 = {
     optionGroupLabel: null,
     optionGroupChildren: null,
     placeholder: String,
+    breakpoint: {
+      type: String,
+      "default": '960px'
+    },
     variant: {
       type: String,
       "default": null
@@ -160,7 +164,7 @@ var script$1 = {
   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,
@@ -177,25 +181,7 @@ var script$1 = {
     },
     activeOptionPath: Array,
     level: Number,
-    templates: null,
-    isParentMount: Boolean
-  },
-  data: function data() {
-    return {
-      mounted: false
-    };
-  },
-  watch: {
-    isParentMount: {
-      handler: function handler(newValue) {
-        newValue && nestedPosition(this.container, this.level);
-      }
-    }
-  },
-  mounted: function 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: function getOptionId(processedOption) {
@@ -253,6 +239,12 @@ var script$1 = {
         isFocus: true
       });
     },
+    onOptionMouseEnter: function onOptionMouseEnter(event, processedOption) {
+      this.$emit('option-focus-enter-change', {
+        originalEvent: event,
+        processedOption: processedOption
+      });
+    },
     onOptionMouseMove: function onOptionMouseMove(event, processedOption) {
       this.$emit('option-focus-change', {
         originalEvent: event,
@@ -265,6 +257,9 @@ var script$1 = {
     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;
     },
@@ -281,7 +276,7 @@ var script$1 = {
 };
 
 var _hoisted_1$1 = ["id", "aria-label", "aria-selected", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset", "data-p-option-group", "data-p-active", "data-p-focus", "data-p-disabled"];
-var _hoisted_2 = ["onClick", "onMousemove"];
+var _hoisted_2 = ["onClick", "onMouseenter", "onMousemove"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_AngleRightIcon = resolveComponent("AngleRightIcon");
   var _component_CascadeSelectSub = resolveComponent("CascadeSelectSub", true);
@@ -314,6 +309,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return $options.onOptionClick($event, processedOption);
       },
+      onMouseenter: function onMouseenter($event) {
+        return $options.onOptionMouseEnter($event, processedOption);
+      },
       onMousemove: function onMousemove($event) {
         return $options.onOptionMouseMove($event, processedOption);
       },
@@ -326,12 +324,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       "class": _ctx.cx('optionText'),
       ref_for: true
-    }, $options.getPTOptions(processedOption, index, 'optionText')), toDisplayString($options.getOptionLabelToRender(processedOption)), 17)), $options.isOptionGroup(processedOption) ? (openBlock(), createElementBlock(Fragment, {
-      key: 2
+    }, $options.getPTOptions(processedOption, index, 'optionText')), toDisplayString($options.getOptionLabelToRender(processedOption)), 17)), $options.isOptionGroup(processedOption) ? (openBlock(), createElementBlock("span", {
+      key: 2,
+      "class": normalizeClass(_ctx.cx('groupIconContainer'))
     }, [$props.templates['optiongroupicon'] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['optiongroupicon']), {
       key: 0,
-      "aria-hidden": "true"
-    })) : $props.optionGroupIcon ? (openBlock(), createElementBlock("span", mergeProps({
+      "class": normalizeClass(_ctx.cx('groupIcon'))
+    }, null, 8, ["class"])) : $props.optionGroupIcon ? (openBlock(), createElementBlock("span", mergeProps({
       key: 1,
       "class": [_ctx.cx('groupIcon'), $props.optionGroupIcon],
       "aria-hidden": "true",
@@ -341,7 +340,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "class": _ctx.cx('groupIcon'),
       "aria-hidden": "true",
       ref_for: true
-    }, $options.getPTOptions(processedOption, index, 'groupIcon')), null, 16, ["class"]))], 64)) : createCommentVNode("", true)], 16, _hoisted_2)), [[_directive_ripple]]), $options.isOptionGroup(processedOption) && $options.isOptionActive(processedOption) ? (openBlock(), createBlock(_component_CascadeSelectSub, {
+    }, $options.getPTOptions(processedOption, index, 'groupIcon')), null, 16, ["class"]))], 2)) : createCommentVNode("", true)], 16, _hoisted_2)), [[_directive_ripple]]), $options.isOptionGroup(processedOption) && $options.isOptionActive(processedOption) ? (openBlock(), createBlock(_component_CascadeSelectSub, {
       key: 0,
       role: "group",
       "class": normalizeClass(_ctx.cx('optionList')),
@@ -359,10 +358,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       optionGroupChildren: $props.optionGroupChildren,
       onOptionChange: $options.onOptionChange,
       onOptionFocusChange: $options.onOptionFocusChange,
+      onOptionFocusEnterChange: $options.onOptionFocusEnterChange,
       pt: _ctx.pt,
-      unstyled: _ctx.unstyled,
-      isParentMount: $data.mounted
-    }, null, 8, ["class", "selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusChange", "pt", "unstyled", "isParentMount"])) : createCommentVNode("", true)], 16, _hoisted_1$1);
+      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);
   }), 128))], 16);
 }
 
@@ -379,6 +378,7 @@ var script = {
     }
   },
   outsideClickListener: null,
+  matchMediaListener: null,
   scrollHandler: null,
   resizeListener: null,
   overlay: null,
@@ -396,7 +396,10 @@ var script = {
       },
       activeOptionPath: [],
       overlayVisible: false,
-      dirty: false
+      dirty: false,
+      mobileActive: false,
+      query: null,
+      queryMatches: false
     };
   },
   watch: {
@@ -410,10 +413,12 @@ var script = {
   mounted: function mounted() {
     this.id = this.id || UniqueComponentId();
     this.autoUpdateModel();
+    this.bindMatchMediaListener();
   },
   beforeUnmount: function beforeUnmount() {
     this.unbindOutsideClickListener();
     this.unbindResizeListener();
+    this.unbindMatchMediaListener();
     if (this.scrollHandler) {
       this.scrollHandler.destroy();
       this.scrollHandler = null;
@@ -422,6 +427,9 @@ var script = {
       ZIndex.clear(this.overlay);
       this.overlay = null;
     }
+    if (this.mobileActive) {
+      this.mobileActive = false;
+    }
   },
   methods: {
     getOptionLabel: function getOptionLabel(option) {
@@ -561,12 +569,14 @@ 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;
       if (isEmpty(processedOption)) return;
       var index = processedOption.index,
+        key = processedOption.key,
         level = processedOption.level,
         parentKey = processedOption.parentKey,
         children = processedOption.children;
@@ -574,14 +584,10 @@ var script = {
       var root = isEmpty(processedOption.parent);
       var selected = this.isSelected(processedOption);
       if (selected) {
-        var _index = processedOption.index,
-          key = processedOption.key,
-          _level = processedOption.level,
-          _parentKey = processedOption.parentKey;
         this.focusedOptionInfo = {
-          index: _index,
-          level: _level,
-          parentKey: _parentKey
+          index: index,
+          level: level,
+          parentKey: parentKey
         };
         this.activeOptionPath = this.activeOptionPath.filter(function (p) {
           return key !== p.key && key.startsWith(p.key);
@@ -589,7 +595,7 @@ var script = {
         this.dirty = !root;
       } else {
         var activeOptionPath = this.activeOptionPath.filter(function (p) {
-          return p.parentKey !== parentKey;
+          return p.parentKey !== parentKey && p.parentKey !== key;
         });
         activeOptionPath.push(processedOption);
         this.focusedOptionInfo = {
@@ -599,10 +605,15 @@ var script = {
         };
         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: function onOptionFocusChange(event) {
+    onOptionFocusMoveChange: function onOptionFocusMoveChange(event) {
       if (this.focusOnHover) {
         var originalEvent = event.originalEvent,
           processedOption = event.processedOption;
@@ -617,6 +628,11 @@ var script = {
         this.changeFocusedOptionIndex(originalEvent, index);
       }
     },
+    onOptionFocusChangeEnter: function onOptionFocusChangeEnter(event) {
+      if (this.dirty) {
+        this.onOptionChange(event, false);
+      }
+    },
     onOptionSelect: function onOptionSelect(event, processedOption) {
       var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var value = this.getOptionValue(processedOption === null || processedOption === void 0 ? void 0 : processedOption.option);
@@ -865,6 +881,25 @@ var script = {
         this.resizeListener = null;
       }
     },
+    bindMatchMediaListener: function bindMatchMediaListener() {
+      var _this6 = this;
+      if (!this.matchMediaListener) {
+        var query = matchMedia("(max-width: ".concat(this.breakpoint, ")"));
+        this.query = query;
+        this.queryMatches = query.matches;
+        this.matchMediaListener = function () {
+          _this6.queryMatches = query.matches;
+          _this6.mobileActive = false;
+        };
+        this.query.addEventListener('change', this.matchMediaListener);
+      }
+    },
+    unbindMatchMediaListener: function unbindMatchMediaListener() {
+      if (this.matchMediaListener) {
+        this.query.removeEventListener('change', this.matchMediaListener);
+        this.matchMediaListener = null;
+      }
+    },
     isOptionMatched: function isOptionMatched(processedOption) {
       var _this$getProccessedOp;
       return this.isValidOption(processedOption) && ((_this$getProccessedOp = this.getProccessedOptionLabel(processedOption)) === null || _this$getProccessedOp === void 0 ? void 0 : _this$getProccessedOp.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale)));
@@ -881,35 +916,35 @@ var script = {
       });
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
-      var _this6 = this;
+      var _this7 = this;
       return this.visibleOptions.findIndex(function (processedOption) {
-        return _this6.isValidOption(processedOption);
+        return _this7.isValidOption(processedOption);
       });
     },
     findLastOptionIndex: function findLastOptionIndex() {
-      var _this7 = this;
+      var _this8 = this;
       return findLastIndex(this.visibleOptions, function (processedOption) {
-        return _this7.isValidOption(processedOption);
+        return _this8.isValidOption(processedOption);
       });
     },
     findNextOptionIndex: function findNextOptionIndex(index) {
-      var _this8 = this;
+      var _this9 = this;
       var matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (processedOption) {
-        return _this8.isValidOption(processedOption);
+        return _this9.isValidOption(processedOption);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
     },
     findPrevOptionIndex: function findPrevOptionIndex(index) {
-      var _this9 = this;
+      var _this10 = this;
       var matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (processedOption) {
-        return _this9.isValidOption(processedOption);
+        return _this10.isValidOption(processedOption);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
-      var _this10 = this;
+      var _this11 = this;
       return this.visibleOptions.findIndex(function (processedOption) {
-        return _this10.isValidSelectedOption(processedOption);
+        return _this11.isValidSelectedOption(processedOption);
       });
     },
     findFirstFocusedOptionIndex: function findFirstFocusedOptionIndex() {
@@ -938,21 +973,21 @@ var script = {
       }
     },
     searchOptions: function searchOptions(event, _char) {
-      var _this11 = this;
+      var _this12 = this;
       this.searchValue = (this.searchValue || '') + _char;
       var optionIndex = -1;
       var matched = false;
       if (isNotEmpty(this.searchValue)) {
         if (this.focusedOptionInfo.index !== -1) {
           optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(function (processedOption) {
-            return _this11.isOptionMatched(processedOption);
+            return _this12.isOptionMatched(processedOption);
           });
           optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(function (processedOption) {
-            return _this11.isOptionMatched(processedOption);
+            return _this12.isOptionMatched(processedOption);
           }) : optionIndex + this.focusedOptionInfo.index;
         } else {
           optionIndex = this.visibleOptions.findIndex(function (processedOption) {
-            return _this11.isOptionMatched(processedOption);
+            return _this12.isOptionMatched(processedOption);
           });
         }
         if (optionIndex !== -1) {
@@ -969,8 +1004,8 @@ var script = {
         clearTimeout(this.searchTimeout);
       }
       this.searchTimeout = setTimeout(function () {
-        _this11.searchValue = '';
-        _this11.searchTimeout = null;
+        _this12.searchValue = '';
+        _this12.searchTimeout = null;
       }, 500);
       return matched;
     },
@@ -988,11 +1023,11 @@ var script = {
       }
     },
     scrollInView: function scrollInView() {
-      var _this12 = this;
+      var _this13 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
       this.$nextTick(function () {
-        var id = index !== -1 ? "".concat(_this12.id, "_").concat(index) : _this12.focusedOptionId;
-        var element = findSingle(_this12.list, "li[id=\"".concat(id, "\"]"));
+        var id = index !== -1 ? "".concat(_this13.id, "_").concat(index) : _this13.focusedOptionId;
+        var element = findSingle(_this13.list, "li[id=\"".concat(id, "\"]"));
         if (element) {
           element.scrollIntoView && element.scrollIntoView({
             block: 'nearest',
@@ -1023,7 +1058,7 @@ var script = {
       });
     },
     createProcessedOptions: function createProcessedOptions(options) {
-      var _this13 = this;
+      var _this14 = this;
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -1038,7 +1073,7 @@ var script = {
           parent: parent,
           parentKey: parentKey
         };
-        newOption['children'] = _this13.createProcessedOptions(_this13.getOptionGroupChildren(option, level), level + 1, newOption, key);
+        newOption['children'] = _this14.createProcessedOptions(_this14.getOptionGroupChildren(option, level), level + 1, newOption, key);
         processedOptions.push(newOption);
       });
       return processedOptions;
@@ -1064,9 +1099,9 @@ var script = {
       return this.createProcessedOptions(this.options || []);
     },
     visibleOptions: function visibleOptions() {
-      var _this14 = this;
+      var _this15 = this;
       var processedOption = this.activeOptionPath.find(function (p) {
-        return p.key === _this14.focusedOptionInfo.parentKey;
+        return p.key === _this15.focusedOptionInfo.parentKey;
       });
       return processedOption ? processedOption.children : this.processedOptions;
     },
@@ -1169,8 +1204,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })], 16), createElementVNode("div", mergeProps({
     "class": _ctx.cx('dropdown'),
     role: "button",
-    tabindex: "-1",
-    "aria-hidden": "true"
+    tabindex: "-1"
   }, _ctx.ptm('dropdown')), [_ctx.loading ? renderSlot(_ctx.$slots, "loadingicon", {
     key: 0,
     "class": normalizeClass(_ctx.cx('loadingIcon'))
@@ -1222,7 +1256,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onKeydown: _cache[4] || (_cache[4] = function () {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
             })
-          }, _objectSpread(_objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.overlayProps), _ctx.ptm('overlay'))), [createElementVNode("div", mergeProps({
+          }, _objectSpread(_objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.overlayProps), _ctx.ptm('overlay'))), [renderSlot(_ctx.$slots, "header", {
+            value: _ctx.modelValue,
+            options: _ctx.options
+          }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('listContainer')
           }, _ctx.ptm('listContainer')), [createVNode(_component_CascadeSelectSub, {
             id: $data.id + '_tree',
@@ -1241,21 +1278,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             optionGroupLabel: _ctx.optionGroupLabel,
             optionGroupChildren: _ctx.optionGroupChildren,
             onOptionChange: $options.onOptionChange,
-            onOptionFocusChange: $options.onOptionFocusChange,
+            onOptionFocusMoveChange: $options.onOptionFocusMoveChange,
+            onOptionFocusEnterChange: $options.onOptionFocusChangeEnter,
             pt: _ctx.pt,
             unstyled: _ctx.unstyled
-          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusChange", "pt", "unstyled"])], 16), createElementVNode("span", mergeProps({
+          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusMoveChange", "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)], 16)) : createCommentVNode("", true)];
+          }), toDisplayString($options.selectedMessageText), 17), renderSlot(_ctx.$slots, "footer", {
+            value: _ctx.modelValue,
+            options: _ctx.options
+          })], 16)) : createCommentVNode("", true)];
         }),
-        _: 1
+        _: 3
       }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
     }),
-    _: 1
+    _: 3
   }, 8, ["appendTo"])], 16);
 }