primevue 4.2.5 → 4.3.0

package/select/index.mjs

@@ -1,8 +1,8 @@
-import { focus, isAndroid, getFirstFocusableElement, getLastFocusableElement, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, isVisible, getFocusableElements, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isPrintableCharacter, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
+import { findSingle, getFocusableElements, isVisible, focus, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, addStyle, getLastFocusableElement, getFirstFocusableElement, isAndroid } from '@primeuix/utils/dom';
+import { isNotEmpty, findLastIndex, equals, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import BlankIcon from '@primevue/icons/blank';
 import CheckIcon from '@primevue/icons/check';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
@@ -18,7 +18,7 @@ import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseInput from '@primevue/core/baseinput';
 import SelectStyle from 'primevue/select/style';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, createVNode, withCtx, Transition, normalizeProps, createSlots, Fragment, renderList, withDirectives } from 'vue';
+import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, renderSlot, createCommentVNode, createElementVNode, createVNode, createTextVNode, toDisplayString, normalizeClass, createBlock, resolveDynamicComponent, withCtx, Transition, normalizeProps, createSlots, Fragment, renderList, withDirectives } from 'vue';
 
 var script$1 = {
   name: 'BaseSelect',
@@ -205,10 +205,10 @@ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Sym
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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 script = {
   name: 'Select',
   "extends": script$1,
@@ -218,6 +218,7 @@ var script = {
   scrollHandler: null,
   resizeListener: null,
   labelClickListener: null,
+  matchMediaOrientationListener: null,
   overlay: null,
   list: null,
   virtualScroller: null,
@@ -226,18 +227,15 @@ var script = {
   isModelValueChanged: false,
   data: function data() {
     return {
-      id: this.$attrs.id,
       clicked: false,
       focused: false,
       focusedOptionIndex: -1,
       filterValue: null,
-      overlayVisible: false
+      overlayVisible: false,
+      queryOrientation: null
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     modelValue: function modelValue() {
       this.isModelValueChanged = true;
     },
@@ -246,9 +244,9 @@ var script = {
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.autoUpdateModel();
     this.bindLabelClickListener();
+    this.bindMatchMediaOrientationListener();
   },
   updated: function updated() {
     if (this.overlayVisible && this.isModelValueChanged) {
@@ -260,6 +258,7 @@ var script = {
     this.unbindOutsideClickListener();
     this.unbindResizeListener();
     this.unbindLabelClickListener();
+    this.unbindMatchMediaOrientationListener();
     if (this.scrollHandler) {
       this.scrollHandler.destroy();
       this.scrollHandler = null;
@@ -639,6 +638,7 @@ var script = {
       this.scrollInView();
       setTimeout(function () {
         _this3.autoFilterFocus && _this3.filter && focus(_this3.$refs.filterInput.$el);
+        _this3.autoUpdateModel();
       }, 1);
     },
     onOverlayAfterEnter: function onOverlayAfterEnter() {
@@ -654,7 +654,9 @@ var script = {
       this.unbindResizeListener();
       if (this.autoFilterFocus && this.filter && !this.editable) {
         this.$nextTick(function () {
-          focus(_this4.$refs.filterInput.$el);
+          if (_this4.$refs.filterInput) {
+            focus(_this4.$refs.filterInput.$el);
+          }
         });
       }
       this.$emit('hide');
@@ -679,12 +681,12 @@ var script = {
             _this5.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;
       }
     },
@@ -741,12 +743,34 @@ var script = {
         }
       }
     },
+    bindMatchMediaOrientationListener: function bindMatchMediaOrientationListener() {
+      var _this9 = this;
+      if (!this.matchMediaOrientationListener) {
+        var query = matchMedia("(orientation: portrait)");
+        this.queryOrientation = query;
+        this.matchMediaOrientationListener = function () {
+          _this9.alignOverlay();
+        };
+        this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
+      }
+    },
+    unbindMatchMediaOrientationListener: function unbindMatchMediaOrientationListener() {
+      if (this.matchMediaOrientationListener) {
+        this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);
+        this.queryOrientation = null;
+        this.matchMediaOrientationListener = null;
+      }
+    },
     hasFocusableElements: function hasFocusableElements() {
       return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
     },
-    isOptionMatched: function isOptionMatched(option) {
+    isOptionExactMatched: function isOptionExactMatched(option) {
       var _this$getOptionLabel;
-      return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && ((_this$getOptionLabel = this.getOptionLabel(option)) === null || _this$getOptionLabel === void 0 ? void 0 : _this$getOptionLabel.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)));
+      return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && ((_this$getOptionLabel = this.getOptionLabel(option)) === null || _this$getOptionLabel === void 0 ? void 0 : _this$getOptionLabel.toLocaleLowerCase(this.filterLocale)) == this.searchValue.toLocaleLowerCase(this.filterLocale);
+    },
+    isOptionStartsWith: function isOptionStartsWith(option) {
+      var _this$getOptionLabel2;
+      return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && ((_this$getOptionLabel2 = this.getOptionLabel(option)) === null || _this$getOptionLabel2 === void 0 ? void 0 : _this$getOptionLabel2.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)));
     },
     isValidOption: function isValidOption(option) {
       return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
@@ -758,35 +782,35 @@ var script = {
       return equals(this.d_value, this.getOptionValue(option), this.equalityKey);
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
-      var _this9 = this;
+      var _this10 = this;
       return this.visibleOptions.findIndex(function (option) {
-        return _this9.isValidOption(option);
+        return _this10.isValidOption(option);
       });
     },
     findLastOptionIndex: function findLastOptionIndex() {
-      var _this10 = this;
+      var _this11 = this;
       return findLastIndex(this.visibleOptions, function (option) {
-        return _this10.isValidOption(option);
+        return _this11.isValidOption(option);
       });
     },
     findNextOptionIndex: function findNextOptionIndex(index) {
-      var _this11 = this;
+      var _this12 = this;
       var matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
-        return _this11.isValidOption(option);
+        return _this12.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
     },
     findPrevOptionIndex: function findPrevOptionIndex(index) {
-      var _this12 = this;
+      var _this13 = this;
       var matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
-        return _this12.isValidOption(option);
+        return _this13.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
-      var _this13 = this;
+      var _this14 = this;
       return this.$filled ? this.visibleOptions.findIndex(function (option) {
-        return _this13.isValidSelectedOption(option);
+        return _this14.isValidSelectedOption(option);
       }) : -1;
     },
     findFirstFocusedOptionIndex: function findFirstFocusedOptionIndex() {
@@ -798,21 +822,17 @@ var script = {
       return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
     },
     searchOptions: function searchOptions(event, _char) {
-      var _this14 = this;
+      var _this15 = this;
       this.searchValue = (this.searchValue || '') + _char;
       var optionIndex = -1;
       var matched = false;
       if (isNotEmpty(this.searchValue)) {
-        if (this.focusedOptionIndex !== -1) {
-          optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(function (option) {
-            return _this14.isOptionMatched(option);
-          });
-          optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(function (option) {
-            return _this14.isOptionMatched(option);
-          }) : optionIndex + this.focusedOptionIndex;
-        } else {
+        optionIndex = this.visibleOptions.findIndex(function (option) {
+          return _this15.isOptionExactMatched(option);
+        });
+        if (optionIndex === -1) {
           optionIndex = this.visibleOptions.findIndex(function (option) {
-            return _this14.isOptionMatched(option);
+            return _this15.isOptionStartsWith(option);
           });
         }
         if (optionIndex !== -1) {
@@ -829,8 +849,8 @@ var script = {
         clearTimeout(this.searchTimeout);
       }
       this.searchTimeout = setTimeout(function () {
-        _this14.searchValue = '';
-        _this14.searchTimeout = null;
+        _this15.searchValue = '';
+        _this15.searchTimeout = null;
       }, 500);
       return matched;
     },
@@ -844,24 +864,26 @@ var script = {
       }
     },
     scrollInView: function scrollInView() {
-      var _this15 = this;
+      var _this16 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
       this.$nextTick(function () {
-        var id = index !== -1 ? "".concat(_this15.id, "_").concat(index) : _this15.focusedOptionId;
-        var element = findSingle(_this15.list, "li[id=\"".concat(id, "\"]"));
+        var id = index !== -1 ? "".concat(_this16.$id, "_").concat(index) : _this16.focusedOptionId;
+        var element = findSingle(_this16.list, "li[id=\"".concat(id, "\"]"));
         if (element) {
           element.scrollIntoView && element.scrollIntoView({
             block: 'nearest',
             inline: 'start'
           });
-        } else if (!_this15.virtualScrollerDisabled) {
-          _this15.virtualScroller && _this15.virtualScroller.scrollToIndex(index !== -1 ? index : _this15.focusedOptionIndex);
+        } else if (!_this16.virtualScrollerDisabled) {
+          _this16.virtualScroller && _this16.virtualScroller.scrollToIndex(index !== -1 ? index : _this16.focusedOptionIndex);
         }
       });
     },
     autoUpdateModel: function autoUpdateModel() {
-      if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
+      if (this.autoOptionFocus) {
         this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
+      }
+      if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
         this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
       }
     },
@@ -873,14 +895,14 @@ var script = {
       });
     },
     flatOptions: function flatOptions(options) {
-      var _this16 = this;
+      var _this17 = this;
       return (options || []).reduce(function (result, option, index) {
         result.push({
           optionGroup: option,
           group: true,
           index: index
         });
-        var optionGroupChildren = _this16.getOptionGroupChildren(option);
+        var optionGroupChildren = _this17.getOptionGroupChildren(option);
         optionGroupChildren && optionGroupChildren.forEach(function (o) {
           return result.push(o);
         });
@@ -900,7 +922,7 @@ var script = {
   },
   computed: {
     visibleOptions: function visibleOptions() {
-      var _this17 = this;
+      var _this18 = this;
       var options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
       if (this.filterValue) {
         var filteredOptions = FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
@@ -908,11 +930,11 @@ var script = {
           var optionGroups = this.options || [];
           var filtered = [];
           optionGroups.forEach(function (group) {
-            var groupChildren = _this17.getOptionGroupChildren(group);
+            var groupChildren = _this18.getOptionGroupChildren(group);
             var filteredItems = groupChildren.filter(function (item) {
               return filteredOptions.includes(item);
             });
-            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty({}, typeof _this17.optionGroupChildren === 'string' ? _this17.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
+            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty({}, typeof _this18.optionGroupChildren === 'string' ? _this18.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
           });
           return this.flatOptions(filtered);
         }
@@ -960,12 +982,12 @@ var script = {
       return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
     },
     focusedOptionId: function focusedOptionId() {
-      return this.focusedOptionIndex !== -1 ? "".concat(this.id, "_").concat(this.focusedOptionIndex) : null;
+      return this.focusedOptionIndex !== -1 ? "".concat(this.$id, "_").concat(this.focusedOptionIndex) : null;
     },
     ariaSetSize: function ariaSetSize() {
-      var _this18 = this;
+      var _this19 = this;
       return this.visibleOptions.filter(function (option) {
-        return !_this18.isOptionGroup(option);
+        return !_this19.isOptionGroup(option);
       }).length;
     },
     isClearIconVisible: function isClearIconVisible() {
@@ -995,7 +1017,7 @@ var script = {
 
 var _hoisted_1 = ["id"];
 var _hoisted_2 = ["id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
-var _hoisted_3 = ["id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-disabled"];
+var _hoisted_3 = ["id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-disabled"];
 var _hoisted_4 = ["id"];
 var _hoisted_5 = ["id"];
 var _hoisted_6 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focused", "data-p-disabled"];
@@ -1012,7 +1034,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
   return openBlock(), createElementBlock("div", mergeProps({
     ref: "container",
-    id: $data.id,
+    id: _ctx.$id,
     "class": _ctx.cx('root'),
     onClick: _cache[11] || (_cache[11] = function () {
       return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
@@ -1034,7 +1056,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-haspopup": "listbox",
     "aria-expanded": $data.overlayVisible,
-    "aria-controls": $data.id + '_list',
+    "aria-controls": _ctx.$id + '_list',
     "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
     "aria-invalid": _ctx.invalid || undefined,
     onFocus: _cache[0] || (_cache[0] = function () {
@@ -1061,8 +1083,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-haspopup": "listbox",
     "aria-expanded": $data.overlayVisible,
-    "aria-controls": $data.id + '_list',
+    "aria-controls": _ctx.$id + '_list',
     "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+    "aria-invalid": _ctx.invalid || undefined,
     "aria-disabled": _ctx.disabled,
     onFocus: _cache[4] || (_cache[4] = function () {
       return $options.onFocus && $options.onFocus.apply($options, arguments);
@@ -1173,12 +1196,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 unstyled: _ctx.unstyled,
                 role: "searchbox",
                 autocomplete: "off",
-                "aria-owns": $data.id + '_list',
+                "aria-owns": _ctx.$id + '_list',
                 "aria-activedescendant": $options.focusedOptionId,
                 onKeydown: $options.onFilterKeyDown,
                 onBlur: $options.onFilterBlur,
                 onInput: $options.onFilterChange,
-                pt: _ctx.ptm('pcFilter')
+                pt: _ctx.ptm('pcFilter'),
+                formControl: {
+                  novalidate: true
+                }
               }, null, 8, ["value", "onVnodeMounted", "onVnodeUpdated", "class", "placeholder", "variant", "unstyled", "aria-owns", "aria-activedescendant", "onKeydown", "onBlur", "onInput", "pt"]), createVNode(_component_InputIcon, {
                 unstyled: _ctx.unstyled,
                 pt: _ctx.ptm('pcFilterIconContainer')
@@ -1230,7 +1256,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: function ref(el) {
                   return $options.listRef(el, contentRef);
                 },
-                id: $data.id + '_list',
+                id: _ctx.$id + '_list',
                 "class": [_ctx.cx('list'), styleClass],
                 style: contentStyle,
                 role: "listbox"
@@ -1239,7 +1265,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   key: $options.getOptionRenderKey(option, $options.getOptionIndex(i, getItemOptions))
                 }, [$options.isOptionGroup(option) ? (openBlock(), createElementBlock("li", mergeProps({
                   key: 0,
-                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                  id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   style: {
                     height: itemSize ? itemSize + 'px' : undefined
                   },
@@ -1256,7 +1282,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   }, _ctx.ptm('optionGroupLabel')), toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 17)];
                 })], 16, _hoisted_5)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
-                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                  id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   "class": _ctx.cx('option', {
                     option: option,
                     focusedOption: $options.getOptionIndex(i, getItemOptions)