@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/fields/FSAutocompleteField.vue

@@ -1,489 +1,463 @@
 <template>
-  <template
+  <FSCol
     v-if="$props.loading"
   >
-    <FSCol>
-      <FSLoader
-        v-if="!$props.hideHeader"
-        variant="text-overline"
-      />
-      <FSLoader
-        v-if="$props.loading"
-        width="100%"
-        :height="['40px', '36px']"
-      />
-    </FSCol>
-  </template>
-  <template
-    v-else
+    <FSLoader
+      v-if="!$props.hideHeader"
+      variant="text-overline"
+    />
+    <FSLoader
+      v-if="$props.loading"
+      width="100%"
+      :height="['40px', '36px']"
+    />
+  </FSCol>
+  <FSCol
+    v-else-if="isExtraSmall"
   >
-    <template
-      v-if="isExtraSmall"
+    <FSTextField
+      :validationValue="$props.modelValue"
+      :description="$props.description"
+      :hideHeader="$props.hideHeader"
+      :clearable="$props.clearable"
+      :editable="$props.editable"
+      :required="$props.required"
+      :label="$props.label"
+      :rules="$props.rules"
+      :messages="messages"
+      :readonly="true"
+      :modelValue="mobileValue"
+      @click="openMobileOverlay"
+      v-bind="$attrs"
     >
-      <FSCol>
-        <FSTextField
-          :validationValue="$props.modelValue"
-          :description="$props.description"
-          :hideHeader="$props.hideHeader"
-          :clearable="$props.clearable"
-          :editable="$props.editable"
-          :required="$props.required"
-          :label="$props.label"
-          :rules="$props.rules"
-          :messages="messages"
-          :readonly="true"
-          :modelValue="mobileValue"
-          @click="openMobileOverlay"
-          v-bind="$attrs"
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+      <template
+        #prepend-inner
+      >
+        <slot
+          v-if="selectedItem && showExtra"
+          name="item-prepend"
+          v-bind="{ item: selectedItem }"
+        />
+      </template>
+      <template
+        #clear
+      >
+        <FSRow
+          :wrap="false"
         >
-          <template
-            v-for="(_, name) in $slots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="name"
-              v-bind="slotData"
-            />
-          </template>
-          <template
-            #prepend-inner
-          >
-            <slot
-              v-if="selectedItem"
-              name="item-prepend"
-              v-bind="{ item: selectedItem }"
-            />
-          </template>
-          <template
-            #clear
-          >
-            <FSRow
-              :wrap="false"
-            >
-              <slot
-                v-if="selectedItem"
-                name="item-append"
-                v-bind="{ item: selectedItem }"
-              />
-              <slot
-                name="clear"
-              >
-                <FSButton
-                  v-if="$props.clearable && $props.editable && !!$props.modelValue"
-                  icon="mdi-close"
-                  variant="icon"
-                  :color="ColorEnum.Dark"
-                  @click="$emit('update:modelValue', null)"
-                />
-              </slot>
-            </FSRow>
-          </template>
-          <template
-            #append-inner
+          <slot
+            v-if="selectedItem && showExtra"
+            name="item-append"
+            v-bind="{ item: selectedItem }"
+          />
+          <slot
+            name="clear"
           >
             <FSButton
-              icon="mdi-chevron-down"
+              v-if="$props.clearable && $props.editable && !!$props.modelValue"
+              icon="mdi-close"
               variant="icon"
-              :editable="$props.editable"
               :color="ColorEnum.Dark"
-              @click="openMobileOverlay"
+              @click="onClear"
             />
-          </template>
-        </FSTextField>
-        <FSSlideGroup
-          v-if="$props.multiple && Array.isArray($props.modelValue)"
+          </slot>
+        </FSRow>
+      </template>
+      <template
+        #append-inner
+      >
+        <FSButton
+          icon="mdi-chevron-down"
+          variant="icon"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="openMobileOverlay"
+        />
+      </template>
+    </FSTextField>
+    <FSSlideGroup
+      v-if="$props.multiple && Array.isArray($props.modelValue)"
+    >
+      <FSCard
+        v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
+        variant="standard"
+        :height="['40px', '36px']"
+        :color="ColorEnum.Light"
+        :border="false"
+        :key="index"
+      >
+        <FSRow
+          align="center-left"
+          padding="0 8px"
+          :wrap="false"
         >
-          <FSCard
-            v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
-            variant="standard"
-            :height="['40px', '36px']"
-            :color="ColorEnum.Light"
-            :border="false"
-            :key="index"
+          <slot
+            name="item-prepend"
+            v-bind="{ item }"
+          />
+          <FSSpan>
+            {{ item[$props.itemTitle!] }}
+          </FSSpan>
+          <slot
+            name="item-append"
+            v-bind="{ item }"
+          />
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="() => onCheckboxChange(item[$props.itemValue!])"
+          />
+        </FSRow>
+      </FSCard>
+    </FSSlideGroup>
+    <FSDialogMenu
+      padding="16px"
+      v-model="dialog"
+    >
+      <template
+        #body
+      >
+        <FSSearchField
+          :clearable="$props.clearable"
+          :hideHeader="true"
+          v-model="search"
+        />
+        <FSFadeOut
+          :maxHeight="maxHeight"
+        >
+          <FSCol
+            gap="12px"
           >
             <FSRow
+              v-for="(item, index) in searchItems"
               align="center-left"
-              padding="0 8px"
+              height="36px"
               :wrap="false"
+              :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <slot
-                name="item-prepend"
-                v-bind="{ item }"
-              />
-              <FSSpan>
-                {{ item[$props.itemTitle!] }}
-              </FSSpan>
-              <slot
-                name="item-append"
-                v-bind="{ item }"
-              />
-              <FSButton
-                icon="mdi-close"
-                variant="icon"
-                :color="ColorEnum.Dark"
-                @click="() => onCheckboxChange(item[$props.itemValue!])"
-              />
-            </FSRow>
-          </FSCard>
-        </FSSlideGroup>
-      </FSCol>
-      <FSDialogMenu
-        v-model="dialog"
-      >
-        <template
-          #body
-        >
-          <FSSearchField
-            :hideHeader="true"
-            v-model="search"
-          />
-          <FSFadeOut
-            :maxHeight="maxHeight"
-          >
-            <FSCol
-              gap="12px"
-            >
               <FSRow
-                v-for="(item, index) in searchItems"
-                :key="index"
+                style="min-width: 0;"
+                :wrap="false"
+              >
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
+                >
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
+              <FSRow
+                align="center-right"
+                width="hug"
+                :wrap="false"
               >
+                <slot
+                  name="item-append"
+                  v-bind="{ item }"
+                />
                 <FSCheckbox
                   v-if="$props.multiple"
-                  :label="item[$props.itemTitle!]"
                   :editable="$props.editable"
                   :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-                >
-                  <template
-                    #label="{ font }"
-                  >
-                    <FSRow
-                      align="center-left"
-                      :wrap="false"
-                    >
-                      <slot
-                        name="item-prepend"
-                        v-bind="{ item }"
-                      />
-                      <FSSpan
-                        :font="font"
-                      >
-                        {{ item[$props.itemTitle!] }}
-                      </FSSpan>
-                    </FSRow>
-                  </template>
-                </FSCheckbox>
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
                 <FSRadio
                   v-else
                   :selected="$props.modelValue === item[$props.itemValue!]"
-                  :label="item[$props.itemTitle!]"
                   :editable="$props.editable"
                   :item="item"
                   :modelValue="item[$props.itemValue!]"
-                  @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
-                >
-                  <template
-                    #label="{ font }"
-                  >
-                    <FSRow
-                      align="center-left"
-                      :wrap="false"
-                    >
-                      <slot
-                        name="item-prepend"
-                        v-bind="{ item }"
-                      />
-                      <FSSpan
-                        :font="font"
-                      >
-                        {{ item[$props.itemTitle!] }}
-                      </FSSpan>
-                    </FSRow>
-                  </template>
-                </FSRadio>
-                <FSRow
-                  align="center-right"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
+              </FSRow>
+            </FSRow>
+          </FSCol>
+        </FSFadeOut>
+        <FSRow
+          v-if="allowAddItem"
+          padding="4px 3px"
+        >
+          <FSButton
+            variant="icon"
+            :label="$tr('autocomplete-field.add-item', 'Add new item')"
+            :color="ColorEnum.Primary"
+            @click="$emit('add:item', search)"
+          />
+        </FSRow>
+        <FSRow
+          v-if="!allowAddItem && searchItems.length === 0"
+          padding="4px 3px"
+        >
+          <FSSpan>
+            {{ $tr("ui.common.no-data", "No data") }}
+          </FSSpan>
+        </FSRow>
+      </template>
+    </FSDialogMenu>
+  </FSCol>
+  <FSBaseField
+    v-else
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSToggleSet
+      v-if="$props.toggleSet"
+      :editable="$props.editable"
+      :multiple="$props.multiple"
+      :required="$props.required"
+      :values="$props.items"
+      :rules="$props.rules"
+      :modelValue="$props.modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in toggleSetSlots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="`toggle-set-${name}`"
+          v-bind="slotData"
+        />
+      </template>
+    </FSToggleSet>
+    <FSCol
+      v-else
+    >
+      <v-autocomplete
+        class="fs-autocomplete-field"
+        variant="outlined"
+        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+        :itemTitle="$props.itemTitle"
+        :itemValue="$props.itemValue"
+        :readonly="!$props.editable"
+        :multiple="$props.multiple"
+        :validateOn="validateOn"
+        :autoSelectFirst="true"
+        :persistentClear="true"
+        :listProps="listStyle"
+        :returnObject="false"
+        :items="$props.items"
+        :rules="$props.rules"
+        :hideDetails="true"
+        :menuIcon="null"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onSingleChange"
+        @click="onClick"
+        @blur="onBlur"
+        v-model:search="search"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in autocompleteSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="`autocomplete-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+        <template
+          #item="{ props, item }"
+        >
+          <v-list-item
+            v-bind="{ ...props, title: '' }"
+          >
+            <FSRow
+              align="center-left"
+              :wrap="false"
+            >
+              <FSCheckbox
+                v-if="$props.multiple"
+                :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
+                @click="props.onClick"
+              >
+                <template
+                  #label="{ font }"
                 >
                   <slot
-                    name="item-append"
-                    v-bind="{ item }"
+                    name="item-prepend"
+                    v-bind="{ item: item.raw }"
                   />
-                </FSRow>
+                  <FSSpan
+                    :font="font"
+                  >
+                    {{ item.raw[$props.itemTitle!] }}
+                  </FSSpan>
+                </template>
+              </FSCheckbox>
+              <template
+                v-else
+              >
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item: item.raw }"
+                />
+                <FSSpan
+                  :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
+                >
+                  {{ item.raw[$props.itemTitle!] }}
+                </FSSpan>
+              </template>
+              <FSRow
+                align="center-right"
+              >
+                <slot
+                  name="item-append"
+                  v-bind="{ item: item.raw }"
+                />
               </FSRow>
-            </FSCol>
-          </FSFadeOut>
+            </FSRow>
+          </v-list-item>
+        </template>
+        <template
+          #prepend-inner
+        >
+          <slot
+            v-if="selectedItem && showExtra"
+            name="item-prepend"
+            v-bind="{ item: selectedItem }"
+          />
+        </template>
+        <template
+          v-if="$props.multiple"
+          #selection="{ index }"
+        >
+          <FSSpan
+            v-if="index === $props.modelValue.length - 1 && showExtra"
+          >
+            {{ $props.placeholder }}
+          </FSSpan>
+        </template>
+        <template
+          #clear
+        >
+          <FSRow
+            :wrap="false"
+          >
+            <slot
+              v-if="selectedItem && showExtra"
+              name="item-append"
+              v-bind="{ item: selectedItem }"
+            />
+            <slot
+              name="clear"
+            >
+              <FSButton
+                v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                icon="mdi-close"
+                variant="icon"
+                :color="ColorEnum.Dark"
+                @click="onClear"
+              />
+            </slot>
+          </FSRow>
+        </template>
+        <template
+          #append-inner
+        >
+          <slot
+            name="append-inner"
+          >
+            <FSButton
+              icon="mdi-chevron-down"
+              variant="icon"
+              :editable="$props.editable"
+              :color="ColorEnum.Dark"
+            />
+          </slot>
+        </template>
+        <template
+          #append-item
+        >
           <FSRow
             v-if="allowAddItem"
-            padding="4px 3px"
+            padding="15px"
           >
             <FSButton
               variant="icon"
-              :label="$tr('ui.autocomplete.add-item', 'Add new item')"
+              :label="$tr('autocomplete-field.add-item', 'Add new item')"
               :color="ColorEnum.Primary"
               @click="$emit('add:item', search)"
             />
           </FSRow>
+        </template>
+        <template
+          #no-data
+        >
           <FSRow
-            v-if="!allowAddItem && searchItems.length === 0"
-            padding="4px 3px"
+            v-if="!allowAddItem"
+            padding="15px"
           >
             <FSSpan>
               {{ $tr("ui.common.no-data", "No data") }}
             </FSSpan>
           </FSRow>
         </template>
-      </FSDialogMenu>
-    </template>
-    <template
-      v-else
-    >
-      <FSBaseField
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :required="$props.required"
-        :editable="$props.editable"
-        :label="$props.label"
-        :messages="messages"
+      </v-autocomplete>
+      <FSSlideGroup
+        v-if="$props.multiple && Array.isArray($props.modelValue)"
       >
-        <FSToggleSet
-          v-if="$props.toggleSet"
-          :editable="$props.editable"
-          :multiple="$props.multiple"
-          :required="$props.required"
-          :values="$props.items"
-          :rules="$props.rules"
-          :modelValue="$props.modelValue"
-          @update:modelValue="$emit('update:modelValue', $event)"
-          v-bind="$attrs"
+        <FSCard
+          v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
+          variant="standard"
+          :height="['40px', '36px']"
+          :color="ColorEnum.Light"
+          :border="false"
+          :key="index"
         >
-          <template
-            v-for="(_, name) in toggleSetSlots"
-            v-slot:[name]="slotData"
+          <FSRow
+            align="center-left"
+            padding="0 8px"
           >
             <slot
-              :name="`toggle-set-${name}`"
-              v-bind="slotData"
+              name="item-prepend"
+              v-bind="{ item }"
             />
-          </template>
-        </FSToggleSet>
-        <FSCol
-          v-else
-        >
-          <v-autocomplete
-            class="fs-autocomplete-field"
-            variant="outlined"
-            :clearable="$props.clearable && $props.editable && !!$props.modelValue"
-            :itemTitle="$props.itemTitle"
-            :itemValue="$props.itemValue"
-            :readonly="!$props.editable"
-            :multiple="$props.multiple"
-            :validateOn="validateOn"
-            :autoSelectFirst="true"
-            :persistentClear="true"
-            :listProps="listStyle"
-            :returnObject="false"
-            :items="$props.items"
-            :rules="$props.rules"
-            :hideDetails="true"
-            :menuIcon="null"
-            :class="classes"
-            :style="style"
-            :modelValue="$props.modelValue"
-            @update:modelValue="onSingleChange"
-            @click="onClick"
-            v-model:search="search"
-            v-bind="$attrs"
-          >
-            <template
-              v-for="(_, name) in autocompleteSlots"
-              v-slot:[name]="slotData"
-            >
-              <slot
-                :name="`autocomplete-${name}`"
-                v-bind="slotData"
-              />
-            </template>
-            <template
-              #item="{ props, item }"
-            >
-              <v-list-item
-                v-bind="{ ...props, title: '' }"
-              >
-                <FSRow
-                  align="center-left"
-                  :wrap="false"
-                >
-                  <FSCheckbox
-                    v-if="$props.multiple"
-                    :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
-                    @click="props.onClick"
-                  >
-                    <template
-                      #label="{ font }"
-                    >
-                      <slot
-                        name="item-prepend"
-                        v-bind="{ item: item.raw }"
-                      />
-                      <FSSpan
-                        :font="font"
-                      >
-                        {{ item.raw[$props.itemTitle!] }}
-                      </FSSpan>
-                    </template>
-                  </FSCheckbox>
-                  <template
-                    v-else
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item: item.raw }"
-                    />
-                    <FSSpan
-                      :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
-                    >
-                      {{ item.raw[$props.itemTitle!] }}
-                    </FSSpan>
-                  </template>
-                  <FSRow
-                    align="center-right"
-                  >
-                    <slot
-                      name="item-append"
-                      v-bind="{ item: item.raw }"
-                    />
-                  </FSRow>
-                </FSRow>
-              </v-list-item>
-            </template>
-            <template
-              #prepend-inner
-            >
-              <slot
-                v-if="selectedItem && addExtra"
-                name="item-prepend"
-                v-bind="{ item: selectedItem }"
-              />
-            </template>
-            <template
-              v-if="$props.multiple"
-              #selection="{ index }"
-            >
-              <FSSpan
-                v-if="index === $props.modelValue.length - 1 && addExtra"
-              >
-                {{ $props.placeholder }}
-              </FSSpan>
-            </template>
-            <template
-              #clear
-            >
-              <FSRow
-                :wrap="false"
-              >
-                <slot
-                  v-if="selectedItem"
-                  name="item-append"
-                  v-bind="{ item: selectedItem }"
-                />
-                <slot
-                  name="clear"
-                >
-                  <FSButton
-                    v-if="$props.clearable && $props.editable && !!$props.modelValue"
-                    icon="mdi-close"
-                    variant="icon"
-                    :color="ColorEnum.Dark"
-                    @click="$emit('update:modelValue', null)"
-                  />
-                </slot>
-              </FSRow>
-            </template>
-            <template
-              #append-inner
-            >
-              <slot
-                name="append-inner"
-              >
-                <FSButton
-                  icon="mdi-chevron-down"
-                  variant="icon"
-                  :editable="$props.editable"
-                  :color="ColorEnum.Dark"
-                />
-              </slot>
-            </template>
-            <template
-              #append-item
-            >
-              <FSRow
-                v-if="allowAddItem"
-                padding="17px"
-              >
-                <FSButton
-                  variant="icon"
-                  :label="$tr('ui.autocomplete.add-item', 'Add new item')"
-                  :color="ColorEnum.Primary"
-                  @click="$emit('add:item', search)"
-                />
-              </FSRow>
-            </template>
-            <template
-              #no-data
-            >
-              <FSRow
-                v-if="!allowAddItem"
-                padding="17px"
-              >
-                <FSSpan>
-                  {{ $tr("ui.common.no-data", "No data") }}
-                </FSSpan>
-              </FSRow>
-            </template>
-          </v-autocomplete>
-          <FSSlideGroup
-            v-if="$props.multiple && Array.isArray($props.modelValue)"
-          >
-            <FSCard
-              v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
-              variant="standard"
-              :height="['40px', '36px']"
-              :color="ColorEnum.Light"
-              :border="false"
-              :key="index"
-            >
-              <FSRow
-                align="center-left"
-                padding="0 8px"
-              >
-                <slot
-                  name="item-prepend"
-                  v-bind="{ item }"
-                />
-                <FSSpan>
-                  {{ item[$props.itemTitle!] }}
-                </FSSpan>
-                <slot
-                  name="item-append"
-                  v-bind="{ item }"
-                />
-                <FSButton
-                  icon="mdi-close"
-                  variant="icon"
-                  :color="ColorEnum.Dark"
-                  @click="() => onCheckboxChange(item[$props.itemValue!])"
-                />
-              </FSRow>
-            </FSCard>
-          </FSSlideGroup>
-        </FSCol>
-      </FSBaseField>
-    </template>
-  </template>
+            <FSSpan>
+              {{ item[$props.itemTitle!] }}
+            </FSSpan>
+            <slot
+              name="item-append"
+              v-bind="{ item }"
+            />
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="() => onCheckboxChange(item[$props.itemValue!])"
+            />
+          </FSRow>
+        </FSCard>
+      </FSSlideGroup>
+    </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue, type Slot } from "vue";
+import { computed, defineComponent, type PropType, ref, type Slot, type StyleValue, watch } from "vue";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -612,7 +586,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:search", "add:item"],
   setup: (props, { emit }) => {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { fontStyles, isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -627,26 +601,30 @@ export default defineComponent({
 
     const dialog = ref(false);
     const search = ref("");
-    const addExtra = ref(true);
+    const showExtra = ref(true);
 
     const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
-          "--fs-autocomplete-field-cursor":              "default",
-          "--fs-autocomplete-field-border-color":        lights.base,
-          "--fs-autocomplete-field-color":               lights.dark,
-          "--fs-autocomplete-field-active-border-color": lights.base
+          "--fs-autocomplete-field-cursor"             : "default",
+          "--fs-autocomplete-field-border-color"       : lights.base,
+          "--fs-autocomplete-field-color"              : lights.dark,
+          "--fs-autocomplete-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"               : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
-        "--fs-autocomplete-field-cursor":                   "text",
-        "--fs-autocomplete-field-background-color":         backgrounds.base,
+        "--fs-autocomplete-field-cursor"                  : "text",
+        "--fs-autocomplete-field-background-color"        : backgrounds.base,
         "--fs-autocomplete-field-no-data-background-color": lights.light,
-        "--fs-autocomplete-field-border-color":             lights.dark,
-        "--fs-autocomplete-field-color":                    darks.base,
-        "--fs-autocomplete-field-active-border-color":      darks.dark,
-        "--fs-autocomplete-field-error-color":              errors.base,
-        "--fs-autocomplete-field-error-border-color":       errors.base
+        "--fs-autocomplete-field-border-color"            : lights.dark,
+        "--fs-autocomplete-field-color"                   : darks.base,
+        "--fs-autocomplete-field-active-border-color"     : darks.dark,
+        "--fs-autocomplete-field-error-color"             : errors.base,
+        "--fs-autocomplete-field-error-border-color"      : errors.base,
+        "--fs-base-field-input-height"                    : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 
@@ -670,14 +648,6 @@ export default defineComponent({
       };
     });
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-autocomplete-field"];
-      if (props.multiple) {
-        classNames.push("fs-autocomplete-multiple-field");
-      }
-      return classNames;
-    });
-
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const searchItems = computed((): any[] => {
@@ -717,13 +687,13 @@ export default defineComponent({
     });
 
     const maxHeight = computed(() => {
-      const other = 8 + 8                // Paddings
-        + (isMobileSized ? 36 : 40) + 8; // Header
+      const other = 8 + 8                      // Paddings
+        + (isMobileSized.value ? 36 : 40) + 8; // Header
       return `calc(100vh - 40px - ${other}px)`;
     });
 
     const mobileValue = computed((): string | null => {
-      if (props.multiple) {
+      if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
         return props.placeholder;
       }
       if (selectedItem.value) {
@@ -740,13 +710,11 @@ export default defineComponent({
     };
 
     const onRadioChange = (value: string | null) => {
-      addExtra.value = true;
       emit("update:modelValue", value);
       dialog.value = false;
     };
 
     const onCheckboxChange = (value: string) => {
-      addExtra.value = true;
       if (Array.isArray(props.modelValue)) {
         if (props.modelValue.includes(value)) {
           emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
@@ -769,17 +737,30 @@ export default defineComponent({
     };
 
     const onSingleChange = (value: string) => {
-      addExtra.value = true;
       emit("update:modelValue", value);
+      if (value && !Array.isArray(value)) {
+        showExtra.value = true;
+      }
+    };
+
+    const onClear = () => {
+      emit("update:modelValue", null);
+      search.value = "";
     };
 
     const onClick = (): void => {
-      addExtra.value = false;
-      if (props.modelValue && !props.multiple) {
-        search.value = "";
-      }
+      search.value = "";
+      showExtra.value = false;
     };
 
+    const onBlur = () => {
+      showExtra.value = true;
+    };
+
+    watch(search, () => {
+      emit("update:search", search.value);
+    });
+
     return {
       autocompleteSlots,
       toggleSetSlots,
@@ -793,9 +774,8 @@ export default defineComponent({
       ColorEnum,
       listStyle,
       maxHeight,
-      addExtra,
+      showExtra,
       messages,
-      classes,
       dialog,
       search,
       slots,
@@ -804,7 +784,9 @@ export default defineComponent({
       onCheckboxChange,
       onSingleChange,
       onRadioChange,
-      onClick
+      onClear,
+      onClick,
+      onBlur
     };
   }
 });