primevue 4.2.5 → 4.3.0

package/cascadeselect/CascadeSelect.vue

@@ -16,7 +16,7 @@
                 :aria-labelledby="ariaLabelledby"
                 aria-haspopup="tree"
                 :aria-expanded="overlayVisible"
-                :aria-controls="id + '_tree'"
+                :aria-controls="$id + '_tree'"
                 :aria-activedescendant="focused ? focusedOptionId : undefined"
                 :aria-invalid="invalid || undefined"
                 @focus="onFocus"
@@ -59,10 +59,10 @@
                     <slot name="header" :value="d_value" :options="options" />
                     <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
                         <CascadeSelectSub
-                            :id="id + '_tree'"
+                            :id="$id + '_tree'"
                             role="tree"
                             aria-orientation="horizontal"
-                            :selectId="id"
+                            :selectId="$id"
                             :focusedOptionId="focused ? focusedOptionId : undefined"
                             :options="processedOptions"
                             :activeOptionPath="activeOptionPath"
@@ -96,15 +96,15 @@
 import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
 import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, isString, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import AngleRightIcon from '@primevue/icons/angleright';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
+import TimesIcon from '@primevue/icons/times';
 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',
@@ -120,7 +120,6 @@ export default {
     searchValue: null,
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
@@ -133,15 +132,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
         this.bindMatchMediaListener();
     },
@@ -314,7 +309,7 @@ export default {
 
             const { index, key, level, parentKey, children } = processedOption;
             const grouped = isNotEmpty(children);
-            const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+            const activeOptionPath = this.activeOptionPath ? this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key) : [];
 
             this.focusedOptionInfo = { index, level, parentKey };
 
@@ -359,6 +354,10 @@ export default {
         },
         onOptionMouseEnter(event) {
             if (this.focusOnHover) {
+                if (event.processedOption.level === 0) {
+                    this.dirty = true;
+                }
+
                 if (this.dirty || (!this.dirty && isNotEmpty(this.d_value))) {
                     this.onOptionChange({ ...event, type: 'hover' });
                 } else if (!this.dirty && event.processedOption.level === 0) {
@@ -574,12 +573,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener);
+                document.addEventListener('click', this.outsideClickListener, true);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
+                document.removeEventListener('click', this.outsideClickListener, true);
                 this.outsideClickListener = null;
             }
         },
@@ -647,7 +646,7 @@ export default {
             return this.isValidOption(processedOption) && this.isSelected(processedOption);
         },
         isSelected(processedOption) {
-            return this.activeOptionPath.some((p) => p.key === processedOption.key);
+            return this.activeOptionPath && this.activeOptionPath.some((p) => p.key === processedOption.key);
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
@@ -754,7 +753,7 @@ export default {
         },
         scrollInView(index = -1) {
             this.$nextTick(() => {
-                const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+                const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
                 const element = findSingle(this.list, `li[id="${id}"]`);
 
                 if (element) {
@@ -820,7 +819,7 @@ export default {
             return this.createProcessedOptions(this.options || []);
         },
         visibleOptions() {
-            const processedOption = this.activeOptionPath.find((p) => p.key === this.focusedOptionInfo.parentKey);
+            const processedOption = this.activeOptionPath && this.activeOptionPath.find((p) => p.key === this.focusedOptionInfo.parentKey);
 
             return processedOption ? processedOption.children : this.processedOptions;
         },
@@ -849,7 +848,7 @@ export default {
             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;
+            return this.focusedOptionInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
         },
         isClearIconVisible() {
             return this.showClear && this.d_value != null && isNotEmpty(this.options);

package/cascadeselect/CascadeSelectSub.vue

@@ -131,7 +131,7 @@ export default {
             return equals(this.value, processedOption?.option);
         },
         isOptionActive(processedOption) {
-            return this.activeOptionPath.some((path) => path.key === processedOption.key);
+            return this.activeOptionPath && this.activeOptionPath.some((path) => path.key === processedOption.key);
         },
         isOptionFocused(processedOption) {
             return this.focusedOptionId === this.getOptionId(processedOption);

package/cascadeselect/index.d.ts

@@ -324,9 +324,9 @@ export interface CascadeSelectProps {
     disabled?: boolean | undefined;
     /**
      * Specifies the input variant of the component.
-     * @defaultValue outlined
+     * @defaultValue null
      */
-    variant?: 'outlined' | 'filled' | undefined;
+    variant?: 'outlined' | 'filled' | undefined | null;
     /**
      * A property to uniquely identify an option.
      */

package/cascadeselect/index.mjs

@@ -1,18 +1,18 @@
-import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isNotEmpty, equals, isString, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
+import { findSingle, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, addStyle, focus } from '@primeuix/utils/dom';
+import { equals, isNotEmpty, resolveFieldData, isEmpty, findLastIndex, isPrintableCharacter, isString } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import AngleRightIcon from '@primevue/icons/angleright';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
+import TimesIcon from '@primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 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';
+import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, Fragment, renderList, withDirectives, createBlock, createCommentVNode, resolveDynamicComponent, toDisplayString, normalizeClass, createElementVNode, renderSlot, createVNode, createTextVNode, withCtx, Transition } from 'vue';
 
 var script$2 = {
   name: 'BaseCascadeSelect',
@@ -219,7 +219,7 @@ var script$1 = {
       return equals(this.value, processedOption === null || processedOption === void 0 ? void 0 : processedOption.option);
     },
     isOptionActive: function isOptionActive(processedOption) {
-      return this.activeOptionPath.some(function (path) {
+      return this.activeOptionPath && this.activeOptionPath.some(function (path) {
         return path.key === processedOption.key;
       });
     },
@@ -364,10 +364,10 @@ 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 _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).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: true, configurable: true, writable: true }) : 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); }
+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); 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,
@@ -382,7 +382,6 @@ var script = {
   searchValue: null,
   data: function data() {
     return {
-      id: this.$attrs.id,
       clicked: false,
       focused: false,
       focusedOptionInfo: {
@@ -399,15 +398,11 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     options: function options() {
       this.autoUpdateModel();
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.autoUpdateModel();
     this.bindMatchMediaListener();
   },
@@ -576,9 +571,9 @@ var script = {
         parentKey = processedOption.parentKey,
         children = processedOption.children;
       var grouped = isNotEmpty(children);
-      var activeOptionPath = this.activeOptionPath.filter(function (p) {
+      var activeOptionPath = this.activeOptionPath ? this.activeOptionPath.filter(function (p) {
         return p.parentKey !== parentKey && p.parentKey !== key;
-      });
+      }) : [];
       this.focusedOptionInfo = {
         index: index,
         level: level,
@@ -637,6 +632,9 @@ var script = {
     },
     onOptionMouseEnter: function onOptionMouseEnter(event) {
       if (this.focusOnHover) {
+        if (event.processedOption.level === 0) {
+          this.dirty = true;
+        }
         if (this.dirty || !this.dirty && isNotEmpty(this.d_value)) {
           this.onOptionChange(_objectSpread$1(_objectSpread$1({}, event), {}, {
             type: 'hover'
@@ -865,12 +863,12 @@ var script = {
             _this3.hide();
           }
         };
-        document.addEventListener('click', this.outsideClickListener);
+        document.addEventListener('click', this.outsideClickListener, true);
       }
     },
     unbindOutsideClickListener: function unbindOutsideClickListener() {
       if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
+        document.removeEventListener('click', this.outsideClickListener, true);
         this.outsideClickListener = null;
       }
     },
@@ -937,7 +935,7 @@ var script = {
       return this.isValidOption(processedOption) && this.isSelected(processedOption);
     },
     isSelected: function isSelected(processedOption) {
-      return this.activeOptionPath.some(function (p) {
+      return this.activeOptionPath && this.activeOptionPath.some(function (p) {
         return p.key === processedOption.key;
       });
     },
@@ -1060,7 +1058,7 @@ var script = {
       var _this13 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
       this.$nextTick(function () {
-        var id = index !== -1 ? "".concat(_this13.id, "_").concat(index) : _this13.focusedOptionId;
+        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({
@@ -1135,7 +1133,7 @@ var script = {
     },
     visibleOptions: function visibleOptions() {
       var _this15 = this;
-      var processedOption = this.activeOptionPath.find(function (p) {
+      var processedOption = this.activeOptionPath && this.activeOptionPath.find(function (p) {
         return p.key === _this15.focusedOptionInfo.parentKey;
       });
       return processedOption ? processedOption.children : this.processedOptions;
@@ -1165,7 +1163,7 @@ var script = {
       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;
+      return this.focusedOptionInfo.index !== -1 ? "".concat(this.$id).concat(isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : '', "_").concat(this.focusedOptionInfo.index) : null;
     },
     isClearIconVisible: function isClearIconVisible() {
       return this.showClear && this.d_value != null && isNotEmpty(this.options);
@@ -1183,10 +1181,10 @@ var script = {
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "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(o); }
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
@@ -1218,7 +1216,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-haspopup": "tree",
     "aria-expanded": $data.overlayVisible,
-    "aria-controls": $data.id + '_tree',
+    "aria-controls": _ctx.$id + '_tree',
     "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
     "aria-invalid": _ctx.invalid || undefined,
     onFocus: _cache[0] || (_cache[0] = function () {
@@ -1310,10 +1308,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('listContainer')
           }, _ctx.ptm('listContainer')), [createVNode(_component_CascadeSelectSub, {
-            id: $data.id + '_tree',
+            id: _ctx.$id + '_tree',
             role: "tree",
             "aria-orientation": "horizontal",
-            selectId: $data.id,
+            selectId: _ctx.$id,
             focusedOptionId: $data.focused ? $options.focusedOptionId : undefined,
             options: $options.processedOptions,
             activeOptionPath: $data.activeOptionPath,