primevue 4.3.2 → 4.3.4

package/select/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 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';
@@ -18,7 +19,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, createElementBlock, openBlock, mergeProps, renderSlot, createCommentVNode, createElementVNode, createVNode, createTextVNode, toDisplayString, normalizeClass, createBlock, resolveDynamicComponent, 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, withModifiers } from 'vue';
 
 var script$1 = {
   name: 'BaseSelect',
@@ -344,18 +345,35 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
-      var _this$formField$onBlu, _this$formField;
-      this.focused = false;
-      this.focusedOptionIndex = -1;
-      this.searchValue = '';
-      this.$emit('blur', event);
-      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
+      var _this3 = this;
+      setTimeout(function () {
+        var _this3$formField$onBl, _this3$formField;
+        _this3.focused = false;
+        _this3.focusedOptionIndex = -1;
+        _this3.searchValue = '';
+        _this3.$emit('blur', event);
+        (_this3$formField$onBl = (_this3$formField = _this3.formField).onBlur) === null || _this3$formField$onBl === void 0 || _this3$formField$onBl.call(_this3$formField, event);
+      }, 100);
     },
     onKeyDown: function onKeyDown(event) {
-      if (this.disabled || isAndroid()) {
+      if (this.disabled) {
         event.preventDefault();
         return;
       }
+      if (isAndroid()) {
+        switch (event.code) {
+          case 'Backspace':
+            this.onBackspaceKey(event, this.editable);
+            break;
+          case 'Enter':
+          case 'NumpadDecimal':
+            this.onEnterKey(event);
+            break;
+          default:
+            event.preventDefault();
+            return;
+        }
+      }
       var metaKey = event.metaKey || event.ctrlKey;
       switch (event.code) {
         case 'ArrowDown':
@@ -627,18 +645,20 @@ var script = {
       }
     },
     onOverlayEnter: function onOverlayEnter(el) {
-      var _this3 = this;
+      var _this4 = this;
       ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
       addStyle(el, {
         position: 'absolute',
-        top: '0',
-        left: '0'
+        top: '0'
       });
       this.alignOverlay();
       this.scrollInView();
+
+      // Issue: #7508
+      this.$attrSelector && el.setAttribute(this.$attrSelector, '');
       setTimeout(function () {
-        _this3.autoFilterFocus && _this3.filter && focus(_this3.$refs.filterInput.$el);
-        _this3.autoUpdateModel();
+        _this4.autoFilterFocus && _this4.filter && focus(_this4.$refs.filterInput.$el);
+        _this4.autoUpdateModel();
       }, 1);
     },
     onOverlayAfterEnter: function onOverlayAfterEnter() {
@@ -648,14 +668,14 @@ var script = {
       this.$emit('show');
     },
     onOverlayLeave: function onOverlayLeave() {
-      var _this4 = this;
+      var _this5 = this;
       this.unbindOutsideClickListener();
       this.unbindScrollListener();
       this.unbindResizeListener();
       if (this.autoFilterFocus && this.filter && !this.editable) {
         this.$nextTick(function () {
-          if (_this4.$refs.filterInput) {
-            focus(_this4.$refs.filterInput.$el);
+          if (_this5.$refs.filterInput) {
+            focus(_this5.$refs.filterInput.$el);
           }
         });
       }
@@ -676,11 +696,12 @@ var script = {
       }
     },
     bindOutsideClickListener: function bindOutsideClickListener() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this.outsideClickListener) {
         this.outsideClickListener = function (event) {
-          if (_this5.overlayVisible && _this5.overlay && !_this5.$el.contains(event.target) && !_this5.overlay.contains(event.target)) {
-            _this5.hide();
+          var composedPath = event.composedPath();
+          if (_this6.overlayVisible && _this6.overlay && !composedPath.includes(_this6.$el) && !composedPath.includes(_this6.overlay)) {
+            _this6.hide();
           }
         };
         document.addEventListener('click', this.outsideClickListener, true);
@@ -693,11 +714,11 @@ var script = {
       }
     },
     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();
           }
         });
       }
@@ -709,11 +730,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);
@@ -726,12 +747,12 @@ var script = {
       }
     },
     bindLabelClickListener: function bindLabelClickListener() {
-      var _this8 = this;
+      var _this9 = this;
       if (!this.editable && !this.labelClickListener) {
         var label = document.querySelector("label[for=\"".concat(this.labelId, "\"]"));
         if (label && isVisible(label)) {
           this.labelClickListener = function () {
-            focus(_this8.$refs.focusInput);
+            focus(_this9.$refs.focusInput);
           };
           label.addEventListener('click', this.labelClickListener);
         }
@@ -746,12 +767,12 @@ var script = {
       }
     },
     bindMatchMediaOrientationListener: function bindMatchMediaOrientationListener() {
-      var _this9 = this;
+      var _this0 = this;
       if (!this.matchMediaOrientationListener) {
         var query = matchMedia("(orientation: portrait)");
         this.queryOrientation = query;
         this.matchMediaOrientationListener = function () {
-          _this9.alignOverlay();
+          _this0.alignOverlay();
         };
         this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
       }
@@ -784,35 +805,35 @@ var script = {
       return equals(this.d_value, this.getOptionValue(option), this.equalityKey);
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
-      var _this10 = this;
+      var _this1 = this;
       return this.visibleOptions.findIndex(function (option) {
-        return _this10.isValidOption(option);
+        return _this1.isValidOption(option);
       });
     },
     findLastOptionIndex: function findLastOptionIndex() {
-      var _this11 = this;
+      var _this10 = this;
       return findLastIndex(this.visibleOptions, function (option) {
-        return _this11.isValidOption(option);
+        return _this10.isValidOption(option);
       });
     },
     findNextOptionIndex: function findNextOptionIndex(index) {
-      var _this12 = this;
+      var _this11 = this;
       var matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
-        return _this12.isValidOption(option);
+        return _this11.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
     },
     findPrevOptionIndex: function findPrevOptionIndex(index) {
-      var _this13 = this;
+      var _this12 = this;
       var matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
-        return _this13.isValidOption(option);
+        return _this12.isValidOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
-      var _this14 = this;
+      var _this13 = this;
       return this.$filled ? this.visibleOptions.findIndex(function (option) {
-        return _this14.isValidSelectedOption(option);
+        return _this13.isValidSelectedOption(option);
       }) : -1;
     },
     findFirstFocusedOptionIndex: function findFirstFocusedOptionIndex() {
@@ -824,17 +845,17 @@ var script = {
       return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
     },
     searchOptions: function searchOptions(event, _char) {
-      var _this15 = this;
+      var _this14 = this;
       this.searchValue = (this.searchValue || '') + _char;
       var optionIndex = -1;
       var matched = false;
       if (isNotEmpty(this.searchValue)) {
         optionIndex = this.visibleOptions.findIndex(function (option) {
-          return _this15.isOptionExactMatched(option);
+          return _this14.isOptionExactMatched(option);
         });
         if (optionIndex === -1) {
           optionIndex = this.visibleOptions.findIndex(function (option) {
-            return _this15.isOptionStartsWith(option);
+            return _this14.isOptionStartsWith(option);
           });
         }
         if (optionIndex !== -1) {
@@ -851,8 +872,8 @@ var script = {
         clearTimeout(this.searchTimeout);
       }
       this.searchTimeout = setTimeout(function () {
-        _this15.searchValue = '';
-        _this15.searchTimeout = null;
+        _this14.searchValue = '';
+        _this14.searchTimeout = null;
       }, 500);
       return matched;
     },
@@ -866,18 +887,18 @@ var script = {
       }
     },
     scrollInView: function scrollInView() {
-      var _this16 = this;
+      var _this15 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
       this.$nextTick(function () {
-        var id = index !== -1 ? "".concat(_this16.$id, "_").concat(index) : _this16.focusedOptionId;
-        var element = findSingle(_this16.list, "li[id=\"".concat(id, "\"]"));
+        var id = index !== -1 ? "".concat(_this15.$id, "_").concat(index) : _this15.focusedOptionId;
+        var element = findSingle(_this15.list, "li[id=\"".concat(id, "\"]"));
         if (element) {
           element.scrollIntoView && element.scrollIntoView({
             block: 'nearest',
             inline: 'nearest'
           });
-        } else if (!_this16.virtualScrollerDisabled) {
-          _this16.virtualScroller && _this16.virtualScroller.scrollToIndex(index !== -1 ? index : _this16.focusedOptionIndex);
+        } else if (!_this15.virtualScrollerDisabled) {
+          _this15.virtualScroller && _this15.virtualScroller.scrollToIndex(index !== -1 ? index : _this15.focusedOptionIndex);
         }
       });
     },
@@ -897,14 +918,14 @@ var script = {
       });
     },
     flatOptions: function flatOptions(options) {
-      var _this17 = this;
+      var _this16 = this;
       return (options || []).reduce(function (result, option, index) {
         result.push({
           optionGroup: option,
           group: true,
           index: index
         });
-        var optionGroupChildren = _this17.getOptionGroupChildren(option);
+        var optionGroupChildren = _this16.getOptionGroupChildren(option);
         optionGroupChildren && optionGroupChildren.forEach(function (o) {
           return result.push(o);
         });
@@ -924,7 +945,7 @@ var script = {
   },
   computed: {
     visibleOptions: function visibleOptions() {
-      var _this18 = this;
+      var _this17 = 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);
@@ -932,11 +953,11 @@ var script = {
           var optionGroups = this.options || [];
           var filtered = [];
           optionGroups.forEach(function (group) {
-            var groupChildren = _this18.getOptionGroupChildren(group);
+            var groupChildren = _this17.getOptionGroupChildren(group);
             var filteredItems = groupChildren.filter(function (item) {
               return filteredOptions.includes(item);
             });
-            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty({}, typeof _this18.optionGroupChildren === 'string' ? _this18.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
+            if (filteredItems.length > 0) filtered.push(_objectSpread(_objectSpread({}, group), {}, _defineProperty({}, typeof _this17.optionGroupChildren === 'string' ? _this17.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
           });
           return this.flatOptions(filtered);
         }
@@ -987,9 +1008,9 @@ var script = {
       return this.focusedOptionIndex !== -1 ? "".concat(this.$id, "_").concat(this.focusedOptionIndex) : null;
     },
     ariaSetSize: function ariaSetSize() {
-      var _this19 = this;
+      var _this18 = this;
       return this.visibleOptions.filter(function (option) {
-        return !_this19.isOptionGroup(option);
+        return !_this18.isOptionGroup(option);
       }).length;
     },
     isClearIconVisible: function isClearIconVisible() {
@@ -997,6 +1018,29 @@ var script = {
     },
     virtualScrollerDisabled: function virtualScrollerDisabled() {
       return !this.virtualScrollerOptions;
+    },
+    containerDataP: function containerDataP() {
+      return cn(_defineProperty({
+        invalid: this.$invalid,
+        disabled: this.disabled,
+        focus: this.focused,
+        fluid: this.$fluid,
+        filled: this.$variant === 'filled'
+      }, this.size, this.size));
+    },
+    labelDataP: function labelDataP() {
+      return cn(_defineProperty(_defineProperty({
+        placeholder: !this.editable && this.label === this.placeholder,
+        clearable: this.showClear,
+        disabled: this.disabled,
+        editable: this.editable
+      }, this.size, this.size), "empty", !this.editable && !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)));
+    },
+    dropdownIconDataP: function dropdownIconDataP() {
+      return cn(_defineProperty({}, this.size, this.size));
+    },
+    overlayDataP: function overlayDataP() {
+      return cn(_defineProperty({}, 'portal-' + this.appendTo, 'portal-' + this.appendTo));
     }
   },
   directives: {
@@ -1017,12 +1061,13 @@ var script = {
   }
 };
 
-var _hoisted_1 = ["id"];
-var _hoisted_2 = ["name", "id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid"];
-var _hoisted_3 = ["name", "id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-disabled"];
-var _hoisted_4 = ["id"];
+var _hoisted_1 = ["id", "data-p"];
+var _hoisted_2 = ["name", "id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid", "data-p"];
+var _hoisted_3 = ["name", "id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-disabled", "data-p"];
+var _hoisted_4 = ["data-p"];
 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"];
+var _hoisted_6 = ["id"];
+var _hoisted_7 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onMousedown", "onMousemove", "data-p-selected", "data-p-focused", "data-p-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   var _component_InputText = resolveComponent("InputText");
@@ -1038,9 +1083,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "container",
     id: _ctx.$id,
     "class": _ctx.cx('root'),
-    onClick: _cache[11] || (_cache[11] = function () {
+    onClick: _cache[12] || (_cache[12] = function () {
       return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
-    })
+    }),
+    "data-p": $options.containerDataP
   }, _ctx.ptmi('root')), [_ctx.editable ? (openBlock(), createElementBlock("input", mergeProps({
     key: 0,
     ref: "focusInput",
@@ -1073,7 +1119,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     onInput: _cache[3] || (_cache[3] = function () {
       return $options.onEditableInput && $options.onEditableInput.apply($options, arguments);
-    })
+    }),
+    "data-p": $options.labelDataP
   }, _ctx.ptm('label')), null, 16, _hoisted_2)) : (openBlock(), createElementBlock("span", mergeProps({
     key: 1,
     ref: "focusInput",
@@ -1099,7 +1146,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     onKeydown: _cache[6] || (_cache[6] = function () {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
-    })
+    }),
+    "data-p": $options.labelDataP
   }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "value", {
     value: _ctx.d_value,
     placeholder: _ctx.placeholder
@@ -1140,8 +1188,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, function () {
     return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.dropdownIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
       "class": [_ctx.cx('dropdownIcon'), _ctx.dropdownIcon],
-      "aria-hidden": "true"
-    }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
+      "aria-hidden": "true",
+      "data-p": $options.dropdownIconDataP
+    }, _ctx.ptm('dropdownIcon')), null, 16, ["class", "data-p"]))];
   })], 16), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo
   }, {
@@ -1159,12 +1208,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ref: $options.overlayRef,
             "class": [_ctx.cx('overlay'), _ctx.panelClass, _ctx.overlayClass],
             style: [_ctx.panelStyle, _ctx.overlayStyle],
-            onClick: _cache[9] || (_cache[9] = function () {
+            onClick: _cache[10] || (_cache[10] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
             }),
-            onKeydown: _cache[10] || (_cache[10] = function () {
+            onKeydown: _cache[11] || (_cache[11] = function () {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
-            })
+            }),
+            "data-p": $options.overlayDataP
           }, _ctx.ptm('overlay')), [createElementVNode("span", mergeProps({
             ref: "firstHiddenFocusableElementOnOverlay",
             role: "presentation",
@@ -1284,7 +1334,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     "class": _ctx.cx('optionGroupLabel'),
                     ref_for: true
                   }, _ctx.ptm('optionGroupLabel')), toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 17)];
-                })], 16, _hoisted_5)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
+                })], 16, _hoisted_6)) : withDirectives((openBlock(), createElementBlock("li", mergeProps({
                   key: 1,
                   id: _ctx.$id + '_' + $options.getOptionIndex(i, getItemOptions),
                   "class": _ctx.cx('option', {
@@ -1300,13 +1350,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-disabled": $options.isOptionDisabled(option),
                   "aria-setsize": $options.ariaSetSize,
                   "aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
-                  onClick: function onClick($event) {
+                  onMousedown: function onMousedown($event) {
                     return $options.onOptionSelect($event, option);
                   },
                   onMousemove: function onMousemove($event) {
                     return $options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions));
                   },
-                  "data-p-selected": $options.isSelected(option),
+                  onClick: _cache[8] || (_cache[8] = withModifiers(function () {}, ["stop"])),
+                  "data-p-selected": !_ctx.checkmark && $options.isSelected(option),
                   "data-p-focused": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
                   "data-p-disabled": $options.isOptionDisabled(option),
                   ref_for: true
@@ -1329,7 +1380,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     "class": _ctx.cx('optionLabel'),
                     ref_for: true
                   }, _ctx.ptm('optionLabel')), toDisplayString($options.getOptionLabel(option)), 17)];
-                })], 16, _hoisted_6)), [[_directive_ripple]])], 64);
+                })], 16, _hoisted_7)), [[_directive_ripple]])], 64);
               }), 128)), $data.filterValue && (!items || items && items.length === 0) ? (openBlock(), createElementBlock("li", mergeProps({
                 key: 0,
                 "class": _ctx.cx('emptyMessage'),
@@ -1346,7 +1397,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 "data-p-hidden-accessible": true
               }), [renderSlot(_ctx.$slots, "empty", {}, function () {
                 return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
-              })], 16)) : createCommentVNode("", true)], 16, _hoisted_4)];
+              })], 16)) : createCommentVNode("", true)], 16, _hoisted_5)];
             }),
             _: 2
           }, [_ctx.$slots.loader ? {
@@ -1380,13 +1431,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-hidden": "true",
             "class": "p-hidden-accessible p-hidden-focusable",
             tabindex: 0,
-            onFocus: _cache[8] || (_cache[8] = function () {
+            onFocus: _cache[9] || (_cache[9] = function () {
               return $options.onLastHiddenFocus && $options.onLastHiddenFocus.apply($options, arguments);
             })
           }, _ctx.ptm('hiddenLastFocusableEl'), {
             "data-p-hidden-accessible": true,
             "data-p-hidden-focusable": true
-          }), null, 16)], 16)) : createCommentVNode("", true)];
+          }), null, 16)], 16, _hoisted_4)) : createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];