@dative-gpi/foundation-shared-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/fields/FSAutocompleteField.vue

@@ -1,253 +1,383 @@
 <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"
     >
-      <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"
-        @update:modelValue="$emit('update:modelValue', $event)"
-        @click="openMobileOverlay"
-        v-bind="$attrs"
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
       >
-        <template
-          v-for="(_, name) in $slots"
-          v-slot:[name]="slotData"
-        >
-          <slot
-            :name="name"
-            v-bind="slotData"
-          />
-        </template>
-        <template
-          v-if="mobileSelectionProps"
-          #prepend-inner
+        <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"
         >
           <slot
-            name="selection-mobile"
-            v-bind="mobileSelectionProps"
+            v-if="selectedItem && showExtra"
+            name="item-append"
+            v-bind="{ item: selectedItem }"
           />
-        </template>
-        <template
-          #append-inner
-        >
           <slot
-            name="append-inner"
+            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"
             />
           </slot>
-        </template>
-      </FSTextField>
-      <FSDialogMenu
-        v-model="dialog"
+        </FSRow>
+      </template>
+      <template
+        #append-inner
       >
-        <template
-          #body
+        <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"
         >
-          <FSSearchField
-            :hideHeader="true"
-            v-model="search"
+          <slot
+            name="item-prepend"
+            v-bind="{ item }"
           />
-          <FSFadeOut
-            :height="height"
+          <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
+      v-model="dialog"
+    >
+      <template
+        #body
+      >
+        <FSSearchField
+          :clearable="$props.clearable"
+          :hideHeader="true"
+          v-model="search"
+        />
+        <FSFadeOut
+          :maxHeight="maxHeight"
+        >
+          <FSCol
+            gap="12px"
           >
-            <FSCol
-              v-if="$props.multiple"
-              gap="12px"
+            <FSRow
+              v-for="(item, index) in searchItems"
+              :key="index"
             >
-              <FSRow
-                v-for="(item, index) in searchItems"
-                :key="index"
+              <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!])"
               >
-                <FSCheckbox
-                  :label="item[$props.itemTitle]"
-                  :editable="$props.editable"
-                  :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
-                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+                <template
+                  #label="{ font }"
                 >
-                  <template
-                    #label="{ font }"
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
                   >
                     <slot
-                      name="item-label"
-                      v-bind="mobileItemProps(item, font)"
+                      name="item-prepend"
+                      v-bind="{ item }"
                     />
-                  </template>
-                </FSCheckbox>
-              </FSRow>
-            </FSCol>
-            <FSRadioGroup
-              v-else
-              gap="12px"
-              :values="searchItems.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle], item: item  }))"
-              :editable="$props.editable"
-              :modelValue="$props.modelValue"
-              @update:modelValue="onRadioChange"
-            >
-              <template
-                #label="{ item, font }"
+                    <FSSpan
+                      :font="font"
+                    >
+                      {{ item[$props.itemTitle!] }}
+                    </FSSpan>
+                  </FSRow>
+                </template>
+              </FSCheckbox>
+              <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"
               >
                 <slot
-                  name="item-label"
-                  v-bind="mobileItemProps(item, font)"
+                  name="item-append"
+                  v-bind="{ item }"
                 />
-              </template>
-            </FSRadioGroup>
-          </FSFadeOut>
-        </template>
-      </FSDialogMenu>
-    </template>
-    <template
+              </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
     >
-      <FSBaseField
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :required="$props.required"
-        :editable="$props.editable"
-        :label="$props.label"
-        :messages="messages"
+      <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"
       >
-        <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 autocompleteSlots"
+          v-slot:[name]="slotData"
         >
-          <template
-            v-for="(_, name) in toggleSetSlots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="`toggle-set-${name}`"
-              v-bind="slotData"
-            />
-          </template>
-        </FSToggleSet>
-        <v-autocomplete
-          v-else
-          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="$emit('update:modelValue', $event)"
-          @click="onClick"
-          v-model:search="search"
-          v-bind="$attrs"
+          <slot
+            :name="`autocomplete-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+        <template
+          #item="{ props, item }"
         >
-          <template
-            v-for="(_, name) in autocompleteSlots"
-            v-slot:[name]="slotData"
+          <v-list-item
+            v-bind="{ ...props, title: '' }"
           >
-            <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"
             >
-              <FSRow
-                align="center-left"
+              <FSCheckbox
+                v-if="$props.multiple"
+                :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
+                @click="props.onClick"
               >
-                <FSCheckbox
-                  v-if="$props.multiple"
-                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
-                  @click="props.onClick"
+                <template
+                  #label="{ font }"
                 >
-                  <template
-                    #label="{ font }"
+                  <slot
+                    name="item-prepend"
+                    v-bind="{ item: item.raw }"
+                  />
+                  <FSSpan
+                    :font="font"
                   >
-                    <slot
-                      name="item-label"
-                      v-bind="{ item, font }"
-                    >
-                      <FSSpan
-                        :font="font"
-                      >
-                        {{ item.raw[$props.itemTitle] }}
-                      </FSSpan>
-                    </slot>
-                  </template>
-                </FSCheckbox>
+                    {{ item.raw[$props.itemTitle!] }}
+                  </FSSpan>
+                </template>
+              </FSCheckbox>
+              <template
+                v-else
+              >
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item: item.raw }"
+                />
                 <FSSpan
-                  v-else
+                  :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
                 >
-                  <slot
-                    name="item-label"
-                    v-bind="{
-                      item,
-                      font: $props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'
-                    }"
-                  >
-                    <FSSpan
-                      :font="$props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'"
-                    >
-                      {{ item.raw[$props.itemTitle] }}
-                    </FSSpan>
-                  </slot>
+                  {{ item.raw[$props.itemTitle!] }}
                 </FSSpan>
+              </template>
+              <FSRow
+                align="center-right"
+              >
+                <slot
+                  name="item-append"
+                  v-bind="{ item: item.raw }"
+                />
               </FSRow>
-            </v-list-item>
-          </template>
-          <template
-            #clear
+            </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"
             >
@@ -256,71 +386,101 @@
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
-                @click="$emit('update:modelValue', null)"
+                @click="onClear"
               />
             </slot>
-          </template>
-          <template
-            #append-inner
+          </FSRow>
+        </template>
+        <template
+          #append-inner
+        >
+          <slot
+            name="append-inner"
           >
-            <slot
-              name="append-inner"
-            >
-              <FSButton
-                icon="mdi-chevron-down"
-                variant="icon"
-                :editable="$props.editable"
-                :color="ColorEnum.Dark"
-              />
-            </slot>
-          </template>
-          <template
-            #append-item
+            <FSButton
+              icon="mdi-chevron-down"
+              variant="icon"
+              :editable="$props.editable"
+              :color="ColorEnum.Dark"
+            />
+          </slot>
+        </template>
+        <template
+          #append-item
+        >
+          <FSRow
+            v-if="allowAddItem"
+            padding="15px"
           >
-            <FSRow
-              v-if="showSearch && !searchItems.map((item: any) => item[$props.itemTitle]).some(s=>s.toLowerCase() == search.toLowerCase())"
-              padding="17px"
-            >
-              <FSButton
-                v-if="search && search.trim().length > 0"
-                variant="icon"
-                :label="$tr('ui.common.add', 'Add this item')"
-                :color="ColorEnum.Primary"
-                @click="$emit('add:item', search)"
-              />
-            </FSRow>
-          </template>
-          <template
-            #no-data
+            <FSButton
+              variant="icon"
+              :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"
+            padding="15px"
           >
-            <template
-              v-if="showSearch"
-            >
-            </template>
-            <FSRow
-              v-else
-              padding="17px"
-            >
-              <FSSpan>
-                {{ $tr("ui.common.no-data", "No data") }}
-              </FSSpan>
-            </FSRow>
-          </template>
-        </v-autocomplete>
-      </FSBaseField>
-    </template>
-  </template>
+            <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>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } 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";
 
 import FSSearchField from "./FSSearchField.vue";
 import FSDialogMenu from "../FSDialogMenu.vue";
-import FSRadioGroup from "../FSRadioGroup.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSBaseField from "./FSBaseField.vue";
 import FSTextField from "./FSTextField.vue";
@@ -328,6 +488,8 @@ import FSCheckbox from "../FSCheckbox.vue";
 import FSFadeOut from "../FSFadeOut.vue";
 import FSButton from "../FSButton.vue";
 import FSLoader from "../FSLoader.vue";
+import FSRadio from "../FSRadio.vue";
+import FSCard from "../FSCard.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -338,7 +500,7 @@ export default defineComponent({
   components: {
     FSSearchField,
     FSDialogMenu,
-    FSRadioGroup,
+    FSSlideGroup,
     FSBaseField,
     FSTextField,
     FSToggleSet,
@@ -346,6 +508,8 @@ export default defineComponent({
     FSFadeOut,
     FSButton,
     FSLoader,
+    FSRadio,
+    FSCard,
     FSSpan,
     FSCol,
     FSRow
@@ -356,6 +520,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    placeholder: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     description: {
       type: String as PropType<string | null>,
       required: false,
@@ -433,7 +602,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();
@@ -448,123 +617,106 @@ export default defineComponent({
 
     const dialog = ref(false);
     const search = ref("");
+    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
       };
     });
 
-    const autocompleteSlots = computed((): any => {
-      return Object.keys(slots).filter(k => k.startsWith("autocomplete-")).reduce((acc, key) => {
+    const autocompleteSlots = computed((): { [key: string]: Slot<any> } => {
+      return Object.keys(slots).filter(k => k.startsWith("autocomplete-")).reduce((acc: { [key: string]: Slot<any> }, key) => {
         acc[key.substring("autocomplete-".length)] = slots[key];
         return acc;
       }, {});
     });
 
-    const toggleSetSlots = computed((): any => {
-      return Object.keys(slots).filter(k => k.startsWith("toggle-set-")).reduce((acc, key) => {
+    const toggleSetSlots = computed((): { [key: string]: Slot<any> } => {
+      return Object.keys(slots).filter(k => k.startsWith("toggle-set-")).reduce((acc: { [key: string]: Slot<any> }, key) => {
         acc[key.substring("toggle-set-".length)] = slots[key];
         return acc;
       }, {});
     });
 
-    const listStyle = computed((): any => {
+    const listStyle = computed((): { style: StyleValue } => {
       return {
         style: style.value
       };
     });
 
-    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(() => {
+    const searchItems = computed((): any[] => {
       return props.items.filter((item: any) => {
         return item[props.itemTitle].toLowerCase().includes(search.value.toLowerCase());
       });
     });
 
-    const height = computed(() => {
-      const other = 8 + 8                // Paddings
-        + (isMobileSized ? 36 : 40) + 8; // Header
-      return `calc(100vh - 40px - ${other}px)`;
+    const selectedItem = computed((): any => {
+      if (props.multiple) {
+        return null;
+      }
+      if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.items.find((item: any) => item[props.itemValue] === props.modelValue[0]) ?? null;
+      }
+      else if (props.modelValue) {
+        return props.items.find((item: any) => item[props.itemValue] === props.modelValue) ?? null;
+      }
+      return null;
     });
 
-    const mobileValue = computed((): string | null => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue)) {
-          return props.modelValue.map((value: any) => {
-            const item = props.items.find((item: object) => item[props.itemValue] === value);
-            if (item) {
-              return item[props.itemTitle];
-            }
-          }).filter(value => !!value).join(", ");
-        }
+    const selectedItems = computed((): any[] => {
+      if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.items.filter((item: any) => props.modelValue.includes(item[props.itemValue]));
       }
-      if (props.modelValue) {
-        const item = props.items.find((item: object) => item[props.itemValue] === props.modelValue);
+      else if (props.modelValue) {
+        const item = props.items.find((item: any) => item[props.itemValue] === props.modelValue);
         if (item) {
-          return item[props.itemTitle];
+          return [item];
         }
       }
-      return null;
+      return [];
     });
 
-    const mobileSelectionProps = computed((): any | null => {
-      const item = props.items.find((item: any) => item[props.itemValue] === props.modelValue);
-      if (item) {
-        return {
-          item: {
-            title: "",
-            value: item[props.itemValue],
-            props: {
-              title: item[props.itemTitle],
-              value: item[props.itemValue]
-            },
-            raw: { ...item }
-          },
-          font: "text-body"
-        };
-      }
-      return null;
+    const allowAddItem = computed((): boolean => {
+      return props.showSearch && search.value.trim().length > 0;
     });
 
-    const mobileItemProps = (item: any, font: "text-body" | "text-button" | null): any => {
-      return {
-        item: {
-          title: "",
-          value: item[props.itemValue],
-          props: {
-            title: item[props.itemTitle],
-            value: item[props.itemValue]
-          },
-          raw: { ...item }
-        },
-        font
+    const maxHeight = computed(() => {
+      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 && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.placeholder;
       }
-    };
+      if (selectedItem.value) {
+        return selectedItem.value[props.itemTitle];
+      }
+      return null;
+    });
 
     const openMobileOverlay = () => {
       if (!props.editable) {
@@ -600,34 +752,57 @@ export default defineComponent({
       }
     };
 
-    const onClick = () => {
-      if (props.modelValue && !props.multiple) {
-        search.value="";
-      } 
+    const onSingleChange = (value: string) => {
+      emit("update:modelValue", value);
+      if (value && !Array.isArray(value)) {
+        showExtra.value = true;
+      }
+    };
+
+    const onClear = () => {
+      emit("update:modelValue", null);
+      search.value = "";
     };
 
+    const onClick = (): void => {
+      search.value = "";
+      showExtra.value = false;
+    };
+
+    const onBlur = () => {
+      showExtra.value = true;
+    };
+
+    watch(search, () => {
+      emit("update:search", search.value);
+    });
+
     return {
-      mobileSelectionProps,
       autocompleteSlots,
       toggleSetSlots,
+      selectedItems,
       isExtraSmall,
+      allowAddItem,
+      selectedItem,
       mobileValue,
       searchItems,
       validateOn,
       ColorEnum,
       listStyle,
+      maxHeight,
+      showExtra,
       messages,
-      classes,
       dialog,
-      height,
       search,
       slots,
       style,
       openMobileOverlay,
       onCheckboxChange,
-      mobileItemProps,
+      onSingleChange,
       onRadioChange,
-      onClick
+      onClear,
+      onClick,
+      onBlur
     };
   }
 });