Refactor #3965 - For AutoComplete

components/lib/autocomplete/AutoComplete.d.ts

@@ -108,7 +108,7 @@ export interface AutoCompletePassThroughOptions {
      */
     container?: AutoCompletePassThroughOptionType;
     /**
-     * Uses to pass attributes to the token' DOM element.
+     * Uses to pass attributes to the token's DOM element.
      */
     token?: AutoCompletePassThroughOptionType;
     /**
@@ -119,6 +119,10 @@ export interface AutoCompletePassThroughOptions {
      * Uses to pass attributes to the remove token icon's DOM element.
      */
     removeTokenIcon?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: AutoCompletePassThroughOptionType;
     /**
      * Uses to pass attributes to the loading icon's DOM element.
      */
@@ -426,6 +430,11 @@ export interface AutoCompleteProps {
      * @type {AutoCompletePassThroughOptions}
      */
     pt?: AutoCompletePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
@@ -561,7 +570,12 @@ export interface AutoCompleteSlots {
     /**
      * Custom dropdown icon template.
      */
-    dropdownicon(): VNode[];
+    dropdownicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom remove token icon template in multiple mode.
      */

components/lib/autocomplete/AutoComplete.vue

@@ -1,12 +1,12 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" data-pc-name="autocomplete" data-pc-section="root" v-bind="ptm('root')">
         <input
             v-if="!multiple"
             ref="focusInput"
             :id="inputId"
             type="text"
+            :class="cx('input')"
             :style="inputStyle"
-            :class="inputStyleClass"
             :value="inputValue"
             :placeholder="placeholder"
             :tabindex="!disabled ? tabindex : -1"
@@ -25,12 +25,13 @@
             @keydown="onKeyDown"
             @input="onInput"
             @change="onChange"
+            data-pc-section="input"
             v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <ul
             v-if="multiple"
             ref="multiContainer"
-            :class="multiContainerClass"
+            :class="cx('container')"
             tabindex="-1"
             role="listbox"
             aria-orientation="horizontal"
@@ -38,28 +39,30 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
+            data-pc-section="container"
             v-bind="ptm('container')"
         >
             <li
                 v-for="(option, i) of modelValue"
                 :key="i"
                 :id="id + '_multiple_option_' + i"
-                :class="['p-autocomplete-token', { 'p-focus': focusedMultipleOptionIndex === i }]"
+                :class="cx('token', { i })"
                 role="option"
                 :aria-label="getOptionLabel(option)"
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
+                data-pc-section="token"
                 v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option">
-                    <span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
+                    <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')" data-pc-section="tokenlabel">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
+                <slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="cx(removeTokenIcon)" @click="removeOption($event, i)" aria-hidden="true" data-pc-section="removetokenicon" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
+            <li :class="cx('inputToken')" role="option" data-pc-section="inputtoken" v-bind="ptm('inputToken')">
                 <input
                     ref="focusInput"
                     :id="inputId"
@@ -83,22 +86,23 @@
                     @keydown="onKeyDown"
                     @input="onInput"
                     @change="onChange"
+                    data-pc-section="input"
                     v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
         <slot v-if="searching" name="loadingicon">
-            <i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon')]" aria-hidden="true" data-pc-section="loaidngicon" v-bind="ptm('loadingIcon')" />
-            <SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" data-pc-section="loadingicon" v-bind="ptm('loadingIcon')" />
         </slot>
-        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :pt="ptm('dropdownButton')">
+        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="cx('dropdownButton')" :disabled="disabled" aria-hidden="true" data-pc-section="dropdownbutton" @click="onDropdownClick" :pt="ptm('dropdownButton')">
             <template #icon>
-                <slot name="dropdownicon">
+                <slot name="dropdownicon" :class="cx('dropdownIcon')">
-                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="cx('dropdownIcon')" data-pc-section="dropdownbuttonicon" v-bind="ptm('dropdownButton')['icon']" />
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
+        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddensearchresult" v-bind="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -106,23 +110,25 @@
                 <div
                     v-if="overlayVisible"
                     :ref="overlayRef"
-                    :class="panelStyleClass"
+                    :class="cx('panel')"
                     :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
+                    data-pc-section="panel"
                     v-bind="{ ...panelProps, ...ptm('panel') }"
                 >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" data-pc-section="list" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
                                     <li
                                         v-if="isOptionGroup(option)"
                                         :id="id + '_' + getOptionIndex(i, getItemOptions)"
                                         :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                        class="p-autocomplete-item-group"
+                                        :class="cx('itemGroup')"
                                         role="option"
+                                        data-pc-section="itemgroup"
                                         v-bind="ptm('itemGroup')"
                                     >
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
@@ -132,7 +138,7 @@
                                         :id="id + '_' + getOptionIndex(i, getItemOptions)"
                                         v-ripple
                                         :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                        :class="['p-autocomplete-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
+                                        :class="cx('item', { option, i, getItemOptions })"
                                         role="option"
                                         :aria-label="getOptionLabel(option)"
                                         :aria-selected="isSelected(option)"
@@ -141,6 +147,10 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                        data-pc-section="item"
+                                        :data-p-highlight="isSelected(option)"
+                                        :data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
+                                        :data-p-disabled="isOptionDisabled(option)"
                                         v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >
                                         <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
@@ -148,7 +158,7 @@
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
-                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
+                                <li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" data-pc-section="emptymessage" v-bind="ptm('emptyMessage')">
                                     <slot name="empty">{{ searchResultMessageText }}</slot>
                                 </li>
                             </ul>
@@ -158,7 +168,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
+                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" data-pc-section="hiddenselectedmessage" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
@@ -168,7 +178,6 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SpinnerIcon from 'primevue/icons/spinner';
@@ -178,168 +187,12 @@ import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
+import BaseAutoComplete from './BaseAutoComplete.vue';
 
 export default {
     name: 'AutoComplete',
-    extends: BaseComponent,
+    extends: BaseAutoComplete,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
-    props: {
-        modelValue: null,
-        suggestions: {
-            type: Array,
-            default: null
-        },
-        field: {
-            // TODO: Deprecated since v3.16.0
-            type: [String, Function],
-            default: null
-        },
-        optionLabel: null,
-        optionDisabled: null,
-        optionGroupLabel: null,
-        optionGroupChildren: null,
-        scrollHeight: {
-            type: String,
-            default: '200px'
-        },
-        dropdown: {
-            type: Boolean,
-            default: false
-        },
-        dropdownMode: {
-            type: String,
-            default: 'blank'
-        },
-        autoHighlight: {
-            // TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
-            type: Boolean,
-            default: false
-        },
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        placeholder: {
-            type: String,
-            default: null
-        },
-        dataKey: {
-            type: String,
-            default: null
-        },
-        minLength: {
-            type: Number,
-            default: 1
-        },
-        delay: {
-            type: Number,
-            default: 300
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        forceSelection: {
-            type: Boolean,
-            default: false
-        },
-        completeOnFocus: {
-            type: Boolean,
-            default: false
-        },
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputStyle: {
-            type: Object,
-            default: null
-        },
-        inputClass: {
-            type: [String, Object],
-            default: null
-        },
-        inputProps: {
-            type: null,
-            default: null
-        },
-        panelStyle: {
-            type: Object,
-            default: null
-        },
-        panelClass: {
-            type: [String, Object],
-            default: null
-        },
-        panelProps: {
-            type: null,
-            default: null
-        },
-        dropdownIcon: {
-            type: String,
-            default: undefined
-        },
-        dropdownClass: {
-            type: [String, Object],
-            default: null
-        },
-        loadingIcon: {
-            type: String,
-            default: undefined
-        },
-        removeTokenIcon: {
-            type: String,
-            default: undefined
-        },
-        virtualScrollerOptions: {
-            type: Object,
-            default: null
-        },
-        autoOptionFocus: {
-            type: Boolean,
-            default: true
-        },
-        selectOnFocus: {
-            type: Boolean,
-            default: false
-        },
-        searchLocale: {
-            type: String,
-            default: undefined
-        },
-        searchMessage: {
-            type: String,
-            default: null
-        },
-        selectionMessage: {
-            type: String,
-            default: null
-        },
-        emptySelectionMessage: {
-            type: String,
-            default: null
-        },
-        emptySearchMessage: {
-            type: String,
-            default: null
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        }
-    },
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
@@ -818,6 +671,8 @@ export default {
         },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             this.alignOverlay();
         },
         onOverlayAfterEnter() {
@@ -1027,42 +882,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-autocomplete p-component p-inputwrapper',
-                {
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-autocomplete-dd': this.dropdown,
-                    'p-autocomplete-multiple': this.multiple,
-                    'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
-                    'p-inputwrapper-focus': this.focused,
-                    'p-overlay-open': this.overlayVisible
-                }
-            ];
-        },
-        inputStyleClass() {
-            return [
-                'p-autocomplete-input p-inputtext p-component',
-                this.inputClass,
-                {
-                    'p-autocomplete-dd-input': this.dropdown
-                }
-            ];
-        },
-        multiContainerClass() {
-            return ['p-autocomplete-multiple-container p-component p-inputtext'];
-        },
-        panelStyleClass() {
-            return [
-                'p-autocomplete-panel p-component',
-                this.panelClass,
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         visibleOptions() {
             return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
         },
@@ -1129,102 +948,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-autocomplete {
-    display: inline-flex;
-    position: relative;
-}
-
-.p-autocomplete-loader {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-autocomplete-dd .p-autocomplete-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-autocomplete-dd .p-autocomplete-input,
-.p-autocomplete-dd .p-autocomplete-multiple-container {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-autocomplete-dd .p-autocomplete-dropdown {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0px;
-}
-
-.p-autocomplete .p-autocomplete-panel {
-    min-width: 100%;
-}
-
-.p-autocomplete-panel {
-    position: absolute;
-    overflow: auto;
-    top: 0;
-    left: 0;
-}
-
-.p-autocomplete-items {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.p-autocomplete-item {
-    cursor: pointer;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-autocomplete-multiple-container {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    cursor: text;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.p-autocomplete-token {
-    cursor: default;
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-
-.p-autocomplete-token-icon {
-    cursor: pointer;
-}
-
-.p-autocomplete-input-token {
-    flex: 1 1 auto;
-    display: inline-flex;
-}
-
-.p-autocomplete-input-token input {
-    border: 0 none;
-    outline: 0 none;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    border-radius: 0;
-    width: 100%;
-}
-
-.p-fluid .p-autocomplete {
-    display: flex;
-}
-
-.p-fluid .p-autocomplete-dd .p-autocomplete-input {
-    width: 1%;
-}
-</style>

components/lib/autocomplete/BaseAutoComplete.vue

@@ -0,0 +1,328 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+import { ObjectUtils } from 'primevue/utils';
+
+const styles = `
+.p-autocomplete {
+    display: inline-flex;
+}
+
+.p-autocomplete-loader {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-autocomplete-dd .p-autocomplete-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-autocomplete-dd .p-autocomplete-input,
+.p-autocomplete-dd .p-autocomplete-multiple-container {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-autocomplete-dd .p-autocomplete-dropdown {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0px;
+}
+
+.p-autocomplete .p-autocomplete-panel {
+    min-width: 100%;
+}
+
+.p-autocomplete-panel {
+    position: absolute;
+    overflow: auto;
+    top: 0;
+    left: 0;
+}
+
+.p-autocomplete-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-autocomplete-item {
+    cursor: pointer;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-autocomplete-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-autocomplete-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-autocomplete-token-icon {
+    cursor: pointer;
+}
+
+.p-autocomplete-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+}
+
+.p-autocomplete-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+}
+
+.p-fluid .p-autocomplete {
+    display: flex;
+}
+
+.p-fluid .p-autocomplete-dd .p-autocomplete-input {
+    width: 1%;
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-autocomplete p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-autocomplete-dd': props.dropdown,
+            'p-autocomplete-multiple': props.multiple,
+            'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
+            'p-inputwrapper-focus': instance.focused,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', props.inputClass, { 'p-autocomplete-dd-input': props.dropdown }],
+    container: 'p-autocomplete-multiple-container p-component p-inputtext',
+    token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
+    tokenLabel: 'p-autocomplete-token-label',
+    removeTokenIcon: ({ props }) => [props.removeTokenIcon, 'p-autocomplete-token-icon'],
+    inputToken: 'p-autocomplete-input-token',
+    loadingIcon: ({ props }) => [props.loadingIcon, 'p-autocomplete-loader'],
+    dropdownButton: ({ props }) => ['p-autocomplete-dropdown', props.dropdownClass],
+    dropdownIcon: ({ props }) => props.dropdownIcon,
+    hiddenSearchResult: 'p-hidden-accessible',
+    panel: ({ instance, props }) => [
+        'p-autocomplete-panel p-component',
+        props.panelClass,
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    list: 'p-autocomplete-items',
+    itemGroup: 'p-autocomplete-item-group',
+    item: ({ instance, option, i, getItemOptions }) => [
+        'p-autocomplete-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-autocomplete-empty-message',
+    hiddenSelectedMessage: 'p-hidden-accessible'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+
+export default {
+    name: 'BaseAutoComplete',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        suggestions: {
+            type: Array,
+            default: null
+        },
+        field: {
+            // TODO: Deprecated since v3.16.0
+            type: [String, Function],
+            default: null
+        },
+        optionLabel: null,
+        optionDisabled: null,
+        optionGroupLabel: null,
+        optionGroupChildren: null,
+        scrollHeight: {
+            type: String,
+            default: '200px'
+        },
+        dropdown: {
+            type: Boolean,
+            default: false
+        },
+        dropdownMode: {
+            type: String,
+            default: 'blank'
+        },
+        autoHighlight: {
+            // TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        dataKey: {
+            type: String,
+            default: null
+        },
+        minLength: {
+            type: Number,
+            default: 1
+        },
+        delay: {
+            type: Number,
+            default: 300
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        forceSelection: {
+            type: Boolean,
+            default: false
+        },
+        completeOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: Object,
+            default: null
+        },
+        inputClass: {
+            type: [String, Object],
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelStyle: {
+            type: Object,
+            default: null
+        },
+        panelClass: {
+            type: [String, Object],
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
+        dropdownIcon: {
+            type: String,
+            default: undefined
+        },
+        dropdownClass: {
+            type: [String, Object],
+            default: null
+        },
+        loadingIcon: {
+            type: String,
+            default: undefined
+        },
+        removeTokenIcon: {
+            type: String,
+            default: undefined
+        },
+        virtualScrollerOptions: {
+            type: Object,
+            default: null
+        },
+        autoOptionFocus: {
+            type: Boolean,
+            default: true
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        searchLocale: {
+            type: String,
+            default: undefined
+        },
+        searchMessage: {
+            type: String,
+            default: null
+        },
+        selectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySelectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySearchMessage: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        inlineStyles
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>