primevue 4.1.1 → 4.2.0

package/autocomplete/AutoComplete.vue

@@ -5,13 +5,15 @@
             ref="focusInput"
             :id="inputId"
             type="text"
+            :name="$formName"
             :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
             :value="inputValue"
             :placeholder="placeholder"
             :tabindex="!disabled ? tabindex : -1"
-            :fluid="hasFluid"
+            :fluid="$fluid"
             :disabled="disabled"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             autocomplete="off"
@@ -45,14 +47,14 @@
             v-bind="ptm('inputMultiple')"
         >
             <li
-                v-for="(option, i) of modelValue"
+                v-for="(option, i) of d_value"
                 :key="`${i}_${getOptionLabel(option)}`"
                 :id="id + '_multiple_option_' + i"
                 :class="cx('chipItem', { i })"
                 role="option"
                 :aria-label="getOptionLabel(option)"
                 :aria-selected="true"
-                :aria-setsize="modelValue.length"
+                :aria-setsize="d_value.length"
                 :aria-posinset="i + 1"
                 v-bind="ptm('chipItem')"
             >
@@ -122,7 +124,7 @@
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="overlayVisible" :ref="overlayRef" :id="panelId" :class="[cx('overlay'), panelClass, overlayClass]" :style="{ ...panelStyle, ...overlayStyle }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
-                    <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
+                    <slot name="header" :value="d_value" :suggestions="visibleOptions"></slot>
                     <div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
@@ -170,7 +172,7 @@
                             </template>
                         </VirtualScroller>
                     </div>
-                    <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
+                    <slot name="footer" :value="d_value" :suggestions="visibleOptions"></slot>
                     <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
@@ -199,7 +201,7 @@ export default {
     name: 'AutoComplete',
     extends: BaseAutoComplete,
     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 }
     },
@@ -342,6 +344,7 @@ export default {
             this.focused = false;
             this.focusedOptionIndex = -1;
             this.$emit('blur', event);
+            this.formField.onBlur?.();
         },
         onKeyDown(event) {
             if (this.disabled) {
@@ -533,7 +536,7 @@ export default {
                 this.$refs.focusInput.value = '';
 
                 if (!this.isSelected(option)) {
-                    this.updateModel(event, [...(this.modelValue || []), value]);
+                    this.updateModel(event, [...(this.d_value || []), value]);
                 }
             } else {
                 this.updateModel(event, value);
@@ -602,9 +605,9 @@ export default {
             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
                 }
@@ -644,7 +647,7 @@ export default {
         onEnterKey(event) {
             if (!this.typeahead) {
                 if (this.multiple) {
-                    this.updateModel(event, [...(this.modelValue || []), event.target.value]);
+                    this.updateModel(event, [...(this.d_value || []), event.target.value]);
                     this.$refs.focusInput.value = '';
                 }
             } else {
@@ -659,6 +662,8 @@ export default {
                     this.hide();
                 }
             }
+
+            event.preventDefault();
         },
         onEscapeKey(event) {
             this.overlayVisible && this.hide(true);
@@ -673,11 +678,11 @@ export default {
         },
         onBackspaceKey(event) {
             if (this.multiple) {
-                if (isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
-                    const removedValue = this.modelValue[this.modelValue.length - 1];
-                    const newValue = this.modelValue.slice(0, -1);
+                if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) {
+                    const removedValue = this.d_value[this.d_value.length - 1];
+                    const newValue = this.d_value.slice(0, -1);
 
-                    this.$emit('update:modelValue', newValue);
+                    this.writeValue(newValue, event);
                     this.$emit('item-unselect', { originalEvent: event, value: removedValue });
                     this.$emit('option-unselect', { originalEvent: event, value: removedValue });
                 }
@@ -691,7 +696,7 @@ export default {
         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);
             }
@@ -810,7 +815,7 @@ export default {
         isSelected(option) {
             const optionValue = this.getOptionValue(option);
 
-            return this.multiple ? (this.modelValue || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.modelValue, this.getOptionValue(option));
+            return this.multiple ? (this.d_value || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.d_value, this.getOptionValue(option));
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((option) => this.isValidOption(option));
@@ -829,7 +834,7 @@ export default {
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
+            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
@@ -856,8 +861,8 @@ export default {
             this.$emit('complete', { originalEvent: event, query });
         },
         removeOption(event, index) {
-            const removedOption = this.modelValue[index];
-            const value = this.modelValue.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));
+            const removedOption = this.d_value[index];
+            const value = this.d_value.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));
 
             this.updateModel(event, value);
             this.$emit('item-unselect', { originalEvent: event, value: removedOption });
@@ -888,13 +893,13 @@ export default {
             });
         },
         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(event, value) {
-            this.$emit('update:modelValue', value);
+            this.writeValue(value, event);
             this.$emit('change', { originalEvent: event, value });
         },
         flatOptions(options) {
@@ -924,23 +929,25 @@ export default {
             return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
         },
         inputValue() {
-            if (isNotEmpty(this.modelValue)) {
-                if (typeof this.modelValue === 'object') {
-                    const label = this.getOptionLabel(this.modelValue);
+            if (this.$filled) {
+                if (typeof this.d_value === 'object') {
+                    const label = this.getOptionLabel(this.d_value);
 
-                    return label != null ? label : this.modelValue;
+                    return label != null ? label : this.d_value;
                 } else {
-                    return this.modelValue;
+                    return this.d_value;
                 }
             } else {
                 return '';
             }
         },
+        // @deprecated use $filled instead.
         hasSelectedOption() {
-            return isNotEmpty(this.modelValue);
+            return this.$filled;
         },
         equalityKey() {
-            return this.dataKey; // TODO: The 'optionValue' properties can be added.
+            // @todo: The 'optionValue' properties can be added.
+            return this.dataKey;
         },
         searchResultMessageText() {
             return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
@@ -958,7 +965,7 @@ export default {
             return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
         },
         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() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
@@ -977,9 +984,6 @@ export default {
         },
         panelId() {
             return this.id + '_panel';
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

package/autocomplete/BaseAutoComplete.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import AutoCompleteStyle from 'primevue/autocomplete/style';
 
 export default {
     name: 'BaseAutoComplete',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         suggestions: {
             type: Array,
             default: null
@@ -35,18 +34,6 @@ export default {
             type: Boolean,
             default: false
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         placeholder: {
             type: String,
             default: null
@@ -178,10 +165,6 @@ export default {
         ariaLabelledby: {
             type: String,
             default: null
-        },
-        fluid: {
-            type: Boolean,
-            default: null
         }
     },
     style: AutoCompleteStyle,

package/autocomplete/index.d.ts

@@ -305,6 +305,14 @@ export interface AutoCompleteProps {
      * Value of the component.
      */
     modelValue?: any;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * An array of suggestions to display.
      */
@@ -359,6 +367,10 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     loading?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -518,6 +530,10 @@ export interface AutoCompleteProps {
      * Identifier of the underlying input element.
      */
     ariaLabelledby?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -748,6 +764,11 @@ export interface AutoCompleteEmitsOptions {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {*} value - New value.
+     */
+    'value-change'(value: any): void;
     /**
      * Callback to invoke on value change.
      * @param {AutoCompleteChangeEvent} event - Custom change event.

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",