primevue 4.1.0 → 4.2.0

package/autocomplete/index.mjs

@@ -10,15 +10,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 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';
 
 var script$1 = {
   name: 'BaseAutoComplete',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: null,
     suggestions: {
       type: Array,
       "default": null
@@ -47,18 +46,6 @@ var script$1 = {
       type: Boolean,
       "default": false
     },
-    variant: {
-      type: String,
-      "default": null
-    },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     placeholder: {
       type: String,
       "default": null
@@ -190,10 +177,6 @@ var script$1 = {
     ariaLabelledby: {
       type: String,
       "default": null
-    },
-    fluid: {
-      type: Boolean,
-      "default": null
     }
   },
   style: AutoCompleteStyle,
@@ -216,7 +199,7 @@ var script = {
   name: 'AutoComplete',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
+  emits: ['change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
   inject: {
     $pcFluid: {
       "default": null
@@ -352,10 +335,12 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.dirty = false;
       this.focused = false;
       this.focusedOptionIndex = -1;
       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) {
       if (this.disabled) {
@@ -509,7 +494,7 @@ var script = {
       if (this.multiple) {
         this.$refs.focusInput.value = '';
         if (!this.isSelected(option)) {
-          this.updateModel(event, [].concat(_toConsumableArray(this.modelValue || []), [value]));
+          this.updateModel(event, [].concat(_toConsumableArray(this.d_value || []), [value]));
         }
       } else {
         this.updateModel(event, value);
@@ -570,9 +555,9 @@ var script = {
       var target = event.currentTarget;
       this.focusedOptionIndex = -1;
       if (this.multiple) {
-        if (isEmpty(target.value) && this.hasSelectedOption) {
+        if (isEmpty(target.value) && this.$filled) {
           focus(this.$refs.multiContainer);
-          this.focusedMultipleOptionIndex = this.modelValue.length;
+          this.focusedMultipleOptionIndex = this.d_value.length;
         } else {
           event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
         }
@@ -607,7 +592,7 @@ var script = {
     onEnterKey: function onEnterKey(event) {
       if (!this.typeahead) {
         if (this.multiple) {
-          this.updateModel(event, [].concat(_toConsumableArray(this.modelValue || []), [event.target.value]));
+          this.updateModel(event, [].concat(_toConsumableArray(this.d_value || []), [event.target.value]));
           this.$refs.focusInput.value = '';
         }
       } else {
@@ -621,6 +606,7 @@ var script = {
           this.hide();
         }
       }
+      event.preventDefault();
     },
     onEscapeKey: function onEscapeKey(event) {
       this.overlayVisible && this.hide(true);
@@ -634,10 +620,10 @@ var script = {
     },
     onBackspaceKey: function onBackspaceKey(event) {
       if (this.multiple) {
-        if (isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
-          var removedValue = this.modelValue[this.modelValue.length - 1];
-          var newValue = this.modelValue.slice(0, -1);
-          this.$emit('update:modelValue', newValue);
+        if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) {
+          var removedValue = this.d_value[this.d_value.length - 1];
+          var newValue = this.d_value.slice(0, -1);
+          this.writeValue(newValue, event);
           this.$emit('item-unselect', {
             originalEvent: event,
             value: removedValue
@@ -655,7 +641,7 @@ var script = {
     },
     onArrowRightKeyOnMultiple: function onArrowRightKeyOnMultiple() {
       this.focusedMultipleOptionIndex++;
-      if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
+      if (this.focusedMultipleOptionIndex > this.d_value.length - 1) {
         this.focusedMultipleOptionIndex = -1;
         focus(this.$refs.focusInput);
       }
@@ -774,9 +760,9 @@ var script = {
     isSelected: function isSelected(option) {
       var _this8 = this;
       var optionValue = this.getOptionValue(option);
-      return this.multiple ? (this.modelValue || []).some(function (value) {
+      return this.multiple ? (this.d_value || []).some(function (value) {
         return _this8.isEquals(value, optionValue);
-      }) : this.isEquals(this.modelValue, this.getOptionValue(option));
+      }) : this.isEquals(this.d_value, this.getOptionValue(option));
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
       var _this9 = this;
@@ -806,7 +792,7 @@ var script = {
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
       var _this13 = this;
-      return this.hasSelectedOption ? this.visibleOptions.findIndex(function (option) {
+      return this.$filled ? this.visibleOptions.findIndex(function (option) {
         return _this13.isValidSelectedOption(option);
       }) : -1;
     },
@@ -836,8 +822,8 @@ var script = {
     },
     removeOption: function removeOption(event, index) {
       var _this14 = this;
-      var removedOption = this.modelValue[index];
-      var value = this.modelValue.filter(function (_, i) {
+      var removedOption = this.d_value[index];
+      var value = this.d_value.filter(function (_, i) {
         return i !== index;
       }).map(function (option) {
         return _this14.getOptionValue(option);
@@ -880,13 +866,13 @@ var script = {
       });
     },
     autoUpdateModel: function autoUpdateModel() {
-      if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+      if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
         this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
         this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
       }
     },
     updateModel: function updateModel(event, value) {
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
       this.$emit('change', {
         originalEvent: event,
         value: value
@@ -923,22 +909,24 @@ var script = {
       return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
     },
     inputValue: function inputValue() {
-      if (isNotEmpty(this.modelValue)) {
-        if (_typeof$1(this.modelValue) === 'object') {
-          var label = this.getOptionLabel(this.modelValue);
-          return label != null ? label : this.modelValue;
+      if (this.$filled) {
+        if (_typeof$1(this.d_value) === 'object') {
+          var label = this.getOptionLabel(this.d_value);
+          return label != null ? label : this.d_value;
         } else {
-          return this.modelValue;
+          return this.d_value;
         }
       } else {
         return '';
       }
     },
+    // @deprecated use $filled instead.
     hasSelectedOption: function hasSelectedOption() {
-      return isNotEmpty(this.modelValue);
+      return this.$filled;
     },
     equalityKey: function equalityKey() {
-      return this.dataKey; // TODO: The 'optionValue' properties can be added.
+      // @todo: The 'optionValue' properties can be added.
+      return this.dataKey;
     },
     searchResultMessageText: function searchResultMessageText() {
       return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
@@ -956,7 +944,7 @@ var script = {
       return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
     },
     selectedMessageText: function selectedMessageText() {
-      return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
+      return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.d_value.length : '1') : this.emptySelectionMessageText;
     },
     listAriaLabel: function listAriaLabel() {
       return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
@@ -978,9 +966,6 @@ var script = {
     },
     panelId: function panelId() {
       return this.id + '_panel';
-    },
-    hasFluid: function hasFluid() {
-      return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
     }
   },
   components: {
@@ -1029,13 +1014,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "focusInput",
     id: _ctx.inputId,
     type: "text",
+    name: _ctx.$formName,
     "class": normalizeClass([_ctx.cx('pcInputText'), _ctx.inputClass]),
     style: normalizeStyle(_ctx.inputStyle),
     value: $options.inputValue,
     placeholder: _ctx.placeholder,
     tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
-    fluid: $options.hasFluid,
+    fluid: _ctx.$fluid,
     disabled: _ctx.disabled,
+    size: _ctx.size,
     invalid: _ctx.invalid,
     variant: _ctx.variant,
     autocomplete: "off",
@@ -1054,7 +1041,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: $options.onChange,
     unstyled: _ctx.unstyled,
     pt: _ctx.ptm('pcInputText')
-  }, null, 8, ["id", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
+  }, null, 8, ["id", "name", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "size", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
     key: 1,
     ref: "multiContainer",
     "class": _ctx.cx('inputMultiple'),
@@ -1071,7 +1058,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[7] || (_cache[7] = function () {
       return $options.onMultipleContainerKeyDown && $options.onMultipleContainerKeyDown.apply($options, arguments);
     })
-  }, _ctx.ptm('inputMultiple')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, function (option, i) {
+  }, _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,
@@ -1081,7 +1068,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       role: "option",
       "aria-label": $options.getOptionLabel(option),
       "aria-selected": true,
-      "aria-setsize": _ctx.modelValue.length,
+      "aria-setsize": _ctx.d_value.length,
       "aria-posinset": i + 1,
       ref_for: true
     }, _ctx.ptm('chipItem')), [renderSlot(_ctx.$slots, "chip", mergeProps({
@@ -1222,7 +1209,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
             })
           }, _ctx.ptm('overlay')), [renderSlot(_ctx.$slots, "header", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             suggestions: $options.visibleOptions
           }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('listContainer'),
@@ -1325,7 +1312,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             key: "0"
           } : undefined]), 1040, ["style", "items", "disabled", "pt"])], 16), renderSlot(_ctx.$slots, "footer", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             suggestions: $options.visibleOptions
           }), createElementVNode("span", mergeProps({
             role: "status",