primevue 4.1.1 → 4.2.0

package/multiselect/index.mjs

@@ -17,15 +17,14 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import MultiSelectStyle from 'primevue/multiselect/style';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, Fragment, createTextVNode, toDisplayString, renderList, createVNode, normalizeClass, withCtx, createCommentVNode, createBlock, resolveDynamicComponent, Transition, normalizeProps, createSlots, withDirectives } from 'vue';
 
 var script$1 = {
   name: 'BaseMultiSelect',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: null,
     options: Array,
     optionLabel: null,
     optionValue: null,
@@ -37,22 +36,6 @@ var script$1 = {
       "default": '14rem'
     },
     placeholder: String,
-    variant: {
-      type: String,
-      "default": null
-    },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
-    fluid: {
-      type: Boolean,
-      "default": null
-    },
     inputId: {
       type: String,
       "default": null
@@ -74,6 +57,18 @@ var script$1 = {
       "default": null
     },
     dataKey: null,
+    showClear: {
+      type: Boolean,
+      "default": false
+    },
+    clearIcon: {
+      type: String,
+      "default": undefined
+    },
+    resetFilterOnClear: {
+      type: Boolean,
+      "default": false
+    },
     filter: Boolean,
     filterPlaceholder: String,
     filterLocale: String,
@@ -223,7 +218,7 @@ var script = {
   name: 'MultiSelect',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
+  emits: ['change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
   inject: {
     $pcFluid: {
       "default": null
@@ -357,11 +352,13 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.clicked = false;
       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);
     },
     onKeyDown: function onKeyDown(event) {
       var _this3 = this;
@@ -428,11 +425,17 @@ var script = {
       if (this.disabled || this.loading) {
         return;
       }
-      if (!this.overlay || !this.overlay.contains(event.target)) {
+      if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+        return;
+      } else if (!this.overlay || !this.overlay.contains(event.target)) {
         this.overlayVisible ? this.hide(true) : this.show(true);
       }
       this.clicked = true;
     },
+    onClearClick: function onClearClick(event) {
+      this.updateModel(event, null);
+      this.resetFilterOnClear && (this.filterValue = null);
+    },
     onFirstHiddenFocus: function onFirstHiddenFocus(event) {
       var focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
       focus(focusableEl);
@@ -450,9 +453,9 @@ var script = {
       }
       var selected = this.isSelected(option);
       var value = null;
-      if (selected) value = this.modelValue.filter(function (val) {
+      if (selected) value = this.d_value.filter(function (val) {
         return !equals(val, _this4.getOptionValue(option), _this4.equalityKey);
-      });else value = [].concat(_toConsumableArray(this.modelValue || []), [this.getOptionValue(option)]);
+      });else value = [].concat(_toConsumableArray(this.d_value || []), [this.getOptionValue(option)]);
       this.updateModel(event, value);
       index !== -1 && (this.focusedOptionIndex = index);
       isFocus && focus(this.$refs.focusInput);
@@ -757,7 +760,7 @@ var script = {
       var pattern = /{(.*?)}/;
       var selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;
       if (pattern.test(selectedItemsLabel)) {
-        return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], this.modelValue.length + '');
+        return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], this.d_value.length + '');
       }
       return selectedItemsLabel;
     },
@@ -780,7 +783,7 @@ var script = {
     removeOption: function removeOption(event, optionValue) {
       var _this11 = this;
       event.stopPropagation();
-      var value = this.modelValue.filter(function (val) {
+      var value = this.d_value.filter(function (val) {
         return !equals(val, optionValue, _this11.equalityKey);
       });
       this.updateModel(event, value);
@@ -807,7 +810,7 @@ var script = {
     isSelected: function isSelected(option) {
       var _this12 = this;
       var optionValue = this.getOptionValue(option);
-      return (this.modelValue || []).some(function (value) {
+      return (this.d_value || []).some(function (value) {
         return _this12.isEquals(value, optionValue);
       });
     },
@@ -839,9 +842,9 @@ var script = {
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
       var _this17 = this;
-      if (this.hasSelectedOption) {
+      if (this.$filled) {
         var _loop = function _loop() {
-            var value = _this17.modelValue[index];
+            var value = _this17.d_value[index];
             var matchedOptionIndex = _this17.visibleOptions.findIndex(function (option) {
               return _this17.isValidSelectedOption(option) && _this17.isEquals(value, _this17.getOptionValue(option));
             });
@@ -850,7 +853,7 @@ var script = {
             };
           },
           _ret;
-        for (var index = this.modelValue.length - 1; index >= 0; index--) {
+        for (var index = this.d_value.length - 1; index >= 0; index--) {
           _ret = _loop();
           if (_ret) return _ret.v;
         }
@@ -859,26 +862,26 @@ var script = {
     },
     findFirstSelectedOptionIndex: function findFirstSelectedOptionIndex() {
       var _this18 = this;
-      return this.hasSelectedOption ? this.visibleOptions.findIndex(function (option) {
+      return this.$filled ? this.visibleOptions.findIndex(function (option) {
         return _this18.isValidSelectedOption(option);
       }) : -1;
     },
     findLastSelectedOptionIndex: function findLastSelectedOptionIndex() {
       var _this19 = this;
-      return this.hasSelectedOption ? findLastIndex(this.visibleOptions, function (option) {
+      return this.$filled ? findLastIndex(this.visibleOptions, function (option) {
         return _this19.isValidSelectedOption(option);
       }) : -1;
     },
     findNextSelectedOptionIndex: function findNextSelectedOptionIndex(index) {
       var _this20 = this;
-      var matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
+      var matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
         return _this20.isValidSelectedOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
     },
     findPrevSelectedOptionIndex: function findPrevSelectedOptionIndex(index) {
       var _this21 = this;
-      var matchedOptionIndex = this.hasSelectedOption && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
+      var matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), function (option) {
         return _this21.isValidSelectedOption(option);
       }) : -1;
       return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
@@ -886,7 +889,7 @@ var script = {
     findNearestSelectedOptionIndex: function findNearestSelectedOptionIndex(index) {
       var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var matchedOptionIndex = -1;
-      if (this.hasSelectedOption) {
+      if (this.$filled) {
         if (firstCheckUp) {
           matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
           matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
@@ -963,14 +966,14 @@ var script = {
       });
     },
     autoUpdateModel: function autoUpdateModel() {
-      if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+      if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
         this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
         var value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
         this.updateModel(null, [value]);
       }
     },
     updateModel: function updateModel(event, value) {
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
       this.$emit('change', {
         originalEvent: event,
         value: value
@@ -1027,16 +1030,16 @@ var script = {
     label: function label() {
       // TODO: Refactor
       var label;
-      if (this.modelValue && this.modelValue.length) {
-        if (isNotEmpty(this.maxSelectedLabels) && this.modelValue.length > this.maxSelectedLabels) {
+      if (this.d_value && this.d_value.length) {
+        if (isNotEmpty(this.maxSelectedLabels) && this.d_value.length > this.maxSelectedLabels) {
           return this.getSelectedItemsLabel();
         } else {
           label = '';
-          for (var i = 0; i < this.modelValue.length; i++) {
+          for (var i = 0; i < this.d_value.length; i++) {
             if (i !== 0) {
               label += ', ';
             }
-            label += this.getLabelByValue(this.modelValue[i]);
+            label += this.getLabelByValue(this.d_value[i]);
           }
         }
       } else {
@@ -1045,7 +1048,7 @@ var script = {
       return label;
     },
     chipSelectedItems: function chipSelectedItems() {
-      return isNotEmpty(this.maxSelectedLabels) && this.modelValue && this.modelValue.length > this.maxSelectedLabels;
+      return isNotEmpty(this.maxSelectedLabels) && this.d_value && this.d_value.length > this.maxSelectedLabels;
     },
     allSelected: function allSelected() {
       var _this26 = this;
@@ -1053,8 +1056,9 @@ var script = {
         return _this26.isOptionGroup(option) || _this26.isOptionDisabled(option) || _this26.isSelected(option);
       });
     },
+    // @deprecated use $filled instead.
     hasSelectedOption: function hasSelectedOption() {
-      return isNotEmpty(this.modelValue);
+      return this.$filled;
     },
     equalityKey: function equalityKey() {
       return this.optionValue ? null : this.dataKey;
@@ -1063,7 +1067,7 @@ var script = {
       return this.filterFields || [this.optionLabel];
     },
     maxSelectionLimitReached: function maxSelectionLimitReached() {
-      return this.selectionLimit && this.modelValue && this.modelValue.length === this.selectionLimit;
+      return this.selectionLimit && this.d_value && this.d_value.length === this.selectionLimit;
     },
     filterResultMessageText: function filterResultMessageText() {
       return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;
@@ -1084,7 +1088,7 @@ var script = {
       return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
     },
     selectedMessageText: function selectedMessageText() {
-      return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText;
+      return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.d_value.length) : this.emptySelectionMessageText;
     },
     focusedOptionId: function focusedOptionId() {
       return this.focusedOptionIndex !== -1 ? "".concat(this.id, "_").concat(this.focusedOptionIndex) : null;
@@ -1106,6 +1110,9 @@ var script = {
     },
     hasFluid: function hasFluid() {
       return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+    },
+    isClearIconVisible: function isClearIconVisible() {
+      return this.showClear && this.d_value != null && isNotEmpty(this.options);
     }
   },
   directives: {
@@ -1190,7 +1197,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('labelContainer')), [createElementVNode("div", mergeProps({
     "class": _ctx.cx('label')
   }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "value", {
-    value: _ctx.modelValue,
+    value: _ctx.d_value,
     placeholder: _ctx.placeholder
   }, function () {
     return [_ctx.display === 'comma' ? (openBlock(), createElementBlock(Fragment, {
@@ -1199,7 +1206,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1
     }, [$options.chipSelectedItems ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($options.label), 1)) : (openBlock(true), createElementBlock(Fragment, {
       key: 1
-    }, renderList(_ctx.modelValue, function (item) {
+    }, renderList(_ctx.d_value, function (item) {
       return openBlock(), createElementBlock("span", mergeProps({
         key: $options.getLabelByValue(item),
         "class": _ctx.cx('chipItem'),
@@ -1233,10 +1240,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2
         }, 1032, ["class", "label", "removeIcon", "unstyled", "onRemove", "pt"])];
       })], 16);
-    }), 128)), !_ctx.modelValue || _ctx.modelValue.length === 0 ? (openBlock(), createElementBlock(Fragment, {
+    }), 128)), !_ctx.d_value || _ctx.d_value.length === 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 2
     }, [createTextVNode(toDisplayString(_ctx.placeholder || 'empty'), 1)], 64)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)];
-  })], 16)], 16), createElementVNode("div", mergeProps({
+  })], 16)], 16), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
+    key: 0,
+    "class": normalizeClass(_ctx.cx('clearIcon')),
+    clearCallback: $options.onClearClick
+  }, function () {
+    return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon ? 'i' : 'TimesIcon'), mergeProps({
+      ref: "clearIcon",
+      "class": [_ctx.cx('clearIcon'), _ctx.clearIcon],
+      onClick: $options.onClearClick
+    }, _ctx.ptm('clearIcon'), {
+      "data-pc-section": "clearicon"
+    }), null, 16, ["class", "onClick"]))];
+  }) : createCommentVNode("", true), createElementVNode("div", mergeProps({
     "class": _ctx.cx('dropdown')
   }, _ctx.ptm('dropdown')), [_ctx.loading ? renderSlot(_ctx.$slots, "loadingicon", {
     key: 0,
@@ -1296,7 +1315,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-p-hidden-accessible": true,
             "data-p-hidden-focusable": true
           }), null, 16), renderSlot(_ctx.$slots, "header", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: $options.visibleOptions
           }), _ctx.showToggleAll && _ctx.selectionLimit == null || _ctx.filter ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
@@ -1452,7 +1471,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "data-p-focused": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
                   "data-p-disabled": $options.isOptionDisabled(option)
                 }), [createVNode(_component_Checkbox, {
-                  modelValue: $options.isSelected(option),
+                  defaultValue: $options.isSelected(option),
                   binary: true,
                   tabindex: -1,
                   variant: _ctx.variant,
@@ -1471,7 +1490,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox.icon')), null, 16, ["class"])) : createCommentVNode("", true)];
                   }),
                   _: 2
-                }, 1032, ["modelValue", "variant", "unstyled", "pt"]), renderSlot(_ctx.$slots, "option", {
+                }, 1032, ["defaultValue", "variant", "unstyled", "pt"]), renderSlot(_ctx.$slots, "option", {
                   option: option,
                   selected: $options.isSelected(option),
                   index: $options.getOptionIndex(i, getItemOptions)
@@ -1505,7 +1524,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             key: "0"
           } : undefined]), 1040, ["items", "style", "disabled", "pt"])], 16), renderSlot(_ctx.$slots, "footer", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: $options.visibleOptions
           }), !_ctx.options || _ctx.options && _ctx.options.length === 0 ? (openBlock(), createElementBlock("span", mergeProps({
             key: 1,