primevue 4.1.0 → 4.1.1

package/cascadeselect/CascadeSelect.vue

@@ -71,9 +71,10 @@
                             :optionGroupIcon="optionGroupIcon"
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
-                            @option-change="onOptionChange"
-                            @option-focus-move-change="onOptionFocusMoveChange"
-                            @option-focus-enter-change="onOptionFocusChangeEnter"
+                            :value="modelValue"
+                            @option-change="onOptionClick"
+                            @option-focus-change="onOptionMouseMove"
+                            @option-focus-enter-change="onOptionMouseEnter"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -304,51 +305,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.modelValue))) {
+                    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) {
@@ -397,7 +415,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 +434,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 +501,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 +731,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 });
                 }

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';
@@ -609,7 +609,7 @@ declare const CascadeSelect: DefineComponent<CascadeSelectProps, CascadeSelectSl
 
 declare module 'vue' {
     export interface GlobalComponents {
-        CascadeSelect: GlobalComponentConstructor<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits>;
+        CascadeSelect: DefineComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits>;
     }
 }
 

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';
@@ -181,7 +181,8 @@ var script$1 = {
     },
     activeOptionPath: Array,
     level: Number,
-    templates: null
+    templates: null,
+    value: null
   },
   methods: {
     getOptionId: function getOptionId(processedOption) {
@@ -219,7 +220,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 +252,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,17 +348,30 @@ 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,
@@ -569,11 +574,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 +583,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.modelValue)) {
+          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) {
@@ -678,7 +705,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 +723,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 +796,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 +1037,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,
@@ -1277,12 +1313,13 @@ 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.modelValue,
+            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"