primevue 4.2.5 → 4.3.0

package/autocomplete/index.mjs

@@ -1,7 +1,7 @@
-import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isEmpty, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
+import { findSingle, focus, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, addStyle } from '@primeuix/utils/dom';
+import { isNotEmpty, findLastIndex, equals, isEmpty, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Chip from 'primevue/chip';
@@ -12,7 +12,7 @@ import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseInput from '@primevue/core/baseinput';
 import AutoCompleteStyle from 'primevue/autocomplete/style';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, normalizeClass, normalizeStyle, createCommentVNode, Fragment, renderList, renderSlot, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toDisplayString, Transition, createSlots, createTextVNode, withDirectives } from 'vue';
+import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createBlock, createCommentVNode, renderSlot, createElementVNode, createVNode, normalizeStyle, normalizeClass, Fragment, renderList, withCtx, resolveDynamicComponent, toDisplayString, Transition, createSlots, withDirectives, createTextVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseAutoComplete',
@@ -216,9 +216,9 @@ var script = {
   virtualScroller: null,
   searchTimeout: null,
   dirty: false,
+  startRangeIndex: -1,
   data: function data() {
     return {
-      id: this.$attrs.id,
       clicked: false,
       focused: false,
       focusedOptionIndex: -1,
@@ -228,9 +228,6 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     suggestions: function suggestions() {
       if (this.searching) {
         this.show();
@@ -242,7 +239,6 @@ var script = {
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.autoUpdateModel();
   },
   updated: function updated() {
@@ -278,6 +274,8 @@ var script = {
     getPTOptions: function getPTOptions(option, itemOptions, index, key) {
       return this.ptm(key, {
         context: {
+          option: option,
+          index: index,
           selected: this.isSelected(option),
           focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
           disabled: this.isOptionDisabled(option)
@@ -380,6 +378,7 @@ var script = {
           break;
         case 'Enter':
         case 'NumpadEnter':
+        case 'Space':
           this.onEnterKey(event);
           break;
         case 'Escape':
@@ -388,6 +387,10 @@ var script = {
         case 'Tab':
           this.onTabKey(event);
           break;
+        case 'ShiftLeft':
+        case 'ShiftRight':
+          this.onShiftKey(event);
+          break;
         case 'Backspace':
           this.onBackspaceKey(event);
           break;
@@ -520,6 +523,23 @@ var script = {
         this.changeFocusedOptionIndex(event, index);
       }
     },
+    onOptionSelectRange: function onOptionSelectRange(event) {
+      var _this5 = this;
+      var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+      var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+      start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
+      end === -1 && (end = this.findNearestSelectedOptionIndex(start));
+      if (start !== -1 && end !== -1) {
+        var rangeStart = Math.min(start, end);
+        var rangeEnd = Math.max(start, end);
+        var value = this.visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
+          return _this5.isValidOption(option);
+        }).map(function (option) {
+          return _this5.getOptionValue(option);
+        });
+        this.updateModel(event, value);
+      }
+    },
     onOverlayClick: function onOverlayClick(event) {
       OverlayEventBus.emit('overlay-click', {
         originalEvent: event,
@@ -538,6 +558,9 @@ var script = {
         return;
       }
       var optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
+      if (this.multiple && event.shiftKey) {
+        this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+      }
       this.changeFocusedOptionIndex(event, optionIndex);
       event.preventDefault();
     },
@@ -553,6 +576,9 @@ var script = {
         event.preventDefault();
       } else {
         var optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
+        if (this.multiple && event.shiftKey) {
+          this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
+        }
         this.changeFocusedOptionIndex(event, optionIndex);
         event.preventDefault();
       }
@@ -576,6 +602,11 @@ var script = {
     onHomeKey: function onHomeKey(event) {
       var currentTarget = event.currentTarget;
       var len = currentTarget.value.length;
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = this.findFirstOptionIndex();
+      if (this.multiple && event.shiftKey && metaKey) {
+        this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
+      }
       currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
       this.focusedOptionIndex = -1;
       event.preventDefault();
@@ -583,6 +614,11 @@ var script = {
     onEndKey: function onEndKey(event) {
       var currentTarget = event.currentTarget;
       var len = currentTarget.value.length;
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = this.findLastOptionIndex();
+      if (this.multiple && event.shiftKey && metaKey) {
+        this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+      }
       currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
       this.focusedOptionIndex = -1;
       event.preventDefault();
@@ -607,7 +643,12 @@ var script = {
           this.onArrowDownKey(event);
         } else {
           if (this.focusedOptionIndex !== -1) {
-            this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            if (this.multiple && event.shiftKey) {
+              this.onOptionSelectRange(event, this.focusedOptionIndex);
+              event.preventDefault();
+            } else {
+              this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            }
           }
           this.hide();
         }
@@ -624,6 +665,9 @@ var script = {
       }
       this.overlayVisible && this.hide();
     },
+    onShiftKey: function onShiftKey() {
+      this.startRangeIndex = this.focusedOptionIndex;
+    },
     onBackspaceKey: function onBackspaceKey(event) {
       if (this.multiple) {
         if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) {
@@ -692,28 +736,28 @@ var script = {
       }
     },
     bindOutsideClickListener: function bindOutsideClickListener() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this.outsideClickListener) {
         this.outsideClickListener = function (event) {
-          if (_this5.overlayVisible && _this5.overlay && _this5.isOutsideClicked(event)) {
-            _this5.hide();
+          if (_this6.overlayVisible && _this6.overlay && _this6.isOutsideClicked(event)) {
+            _this6.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;
       }
     },
     bindScrollListener: function bindScrollListener() {
-      var _this6 = this;
+      var _this7 = this;
       if (!this.scrollHandler) {
         this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, function () {
-          if (_this6.overlayVisible) {
-            _this6.hide();
+          if (_this7.overlayVisible) {
+            _this7.hide();
           }
         });
       }
@@ -725,11 +769,11 @@ var script = {
       }
     },
     bindResizeListener: function bindResizeListener() {
-      var _this7 = this;
+      var _this8 = this;
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this7.overlayVisible && !isTouchDevice()) {
-            _this7.hide();
+          if (_this8.overlayVisible && !isTouchDevice()) {
+            _this8.hide();
           }
         };
         window.addEventListener('resize', this.resizeListener);
@@ -764,42 +808,42 @@ var script = {
       return equals(value1, value2, this.equalityKey);
     },
     isSelected: function isSelected(option) {
-      var _this8 = this;
+      var _this9 = this;
       var optionValue = this.getOptionValue(option);
       return this.multiple ? (this.d_value || []).some(function (value) {
-        return _this8.isEquals(value, optionValue);
+        return _this9.isEquals(value, optionValue);
       }) : this.isEquals(this.d_value, this.getOptionValue(option));
     },
     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() {
@@ -827,12 +871,12 @@ var script = {
       });
     },
     removeOption: function removeOption(event, index) {
-      var _this14 = this;
+      var _this15 = this;
       var removedOption = this.d_value[index];
       var value = this.d_value.filter(function (_, i) {
         return i !== index;
       }).map(function (option) {
-        return _this14.getOptionValue(option);
+        return _this15.getOptionValue(option);
       });
       this.updateModel(event, value);
       this.$emit('item-unselect', {
@@ -856,18 +900,18 @@ 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);
         }
       });
     },
@@ -885,14 +929,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);
         });
@@ -908,6 +952,34 @@ var script = {
     },
     virtualScrollerRef: function virtualScrollerRef(el) {
       this.virtualScroller = el;
+    },
+    findNextSelectedOptionIndex: function findNextSelectedOptionIndex(index) {
+      var _this18 = this;
+      var matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
+        return _this18.isValidSelectedOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+    },
+    findPrevSelectedOptionIndex: function findPrevSelectedOptionIndex(index) {
+      var _this19 = this;
+      var matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
+        return _this19.isValidSelectedOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+    },
+    findNearestSelectedOptionIndex: function findNearestSelectedOptionIndex(index) {
+      var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var matchedOptionIndex = -1;
+      if (this.$filled) {
+        if (firstCheckUp) {
+          matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
+          matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
+        } else {
+          matchedOptionIndex = this.findNextSelectedOptionIndex(index);
+          matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+        }
+      }
+      return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     }
   },
   computed: {
@@ -956,22 +1028,22 @@ var script = {
       return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
     },
     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;
     },
     focusedMultipleOptionId: function focusedMultipleOptionId() {
-      return this.focusedMultipleOptionIndex !== -1 ? "".concat(this.id, "_multiple_option_").concat(this.focusedMultipleOptionIndex) : null;
+      return this.focusedMultipleOptionIndex !== -1 ? "".concat(this.$id, "_multiple_option_").concat(this.focusedMultipleOptionIndex) : null;
     },
     ariaSetSize: function ariaSetSize() {
-      var _this17 = this;
+      var _this20 = this;
       return this.visibleOptions.filter(function (option) {
-        return !_this17.isOptionGroup(option);
+        return !_this20.isOptionGroup(option);
       }).length;
     },
     virtualScrollerDisabled: function virtualScrollerDisabled() {
       return !this.virtualScrollerOptions;
     },
     panelId: function panelId() {
-      return this.id + '_panel';
+      return this.$id + '_panel';
     }
   },
   components: {
@@ -989,10 +1061,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 = ["aria-activedescendant"];
 var _hoisted_2 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
 var _hoisted_3 = ["id", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
@@ -1067,7 +1139,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('inputMultiple')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.d_value, function (option, i) {
     return openBlock(), createElementBlock("li", mergeProps({
       key: "".concat(i, "_").concat($options.getOptionLabel(option)),
-      id: $data.id + '_multiple_option_' + i,
+      id: _ctx.$id + '_multiple_option_' + i,
       "class": _ctx.cx('chipItem', {
         i: i
       }),
@@ -1128,7 +1200,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-haspopup": "listbox",
     "aria-autocomplete": "list",
     "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 () {
@@ -1244,7 +1316,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",
@@ -1254,7 +1326,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
                   },
@@ -1268,7 +1340,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   return [createTextVNode(toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)];
                 })], 16, _hoisted_7)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
-                  id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
+                  id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   style: {
                     height: itemSize ? itemSize + 'px' : undefined
                   },