sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseAutocomplete.vue

@@ -1,603 +1,603 @@
-<template>
-  <div ref="autocomplete">
-    <div
-      ref="inputRef"
-      class="relative z-[1]"
-    >
-      <div
-        class="flex"
-        :class="[
-          select ? '-space-x-px' : '',
-        ]"
-      >
-        <BaseSelect
-          v-if="select"
-          v-model="selection"
-          :disabled="disabled"
-          :class="selectClasses"
-          :size="sizeInternal"
-          :has-error="hasErrorInternal"
-          required
-          @update:model-value="onSelectChange"
-        >
-          <option
-            v-for="option in select.options"
-            :key="option.value + ''"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </option>
-        </BaseSelect>
-        <BaseInput
-          ref="inputElement"
-          :model-value="keywords"
-          :required="false"
-          type="text"
-          :visible-focus="visibleFocus"
-          :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
-          class="w-full grow min-w-0"
-          :class="inputClasses"
-          :has-error="hasErrorInternal"
-          :size="sizeInternal"
-          :autocomplete="false"
-          :disabled="disabled"
-          icon-left="heroicons:magnifying-glass-solid"
-          @focus="open(); highlight();"
-          @update:model-value="onTextInput"
-          @keydown="onTextKeydown"
-        />
-      </div>
-
-      <div
-        v-if="showRemoveButtonInternal"
-        class="absolute right-0 top-0 flex h-full p-1"
-      >
-        <button
-          type="button"
-          class="group flex rounded items-center justify-center aspect-1 enabled:hover:bg-slate-200"
-          @click="clear()"
-        >
-          <BaseIcon
-            icon="heroicons:x-mark"
-            :class="deleteButtonIconClasses"
-          />
-        </button>
-      </div>
-    </div>
-    <Teleport
-      to="body"
-      :disabled="inline"
-    >
-      <div
-        v-if="dropdownOpened"
-        ref="dropdownRef"
-        :style="!inline ? { ...floatingStyles, width: inputRefWidth + 'px' } : {}"
-        class="min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
-        :class="[
-          inline
-            ? 'relative border-b border-x rounded-t-none'
-            : 'fixed border shadow-2xl z-menu',
-        ]"
-      >
-        <BaseAutocompleteDrawer
-          ref="drawer"
-          :selected="normalizedModelValue"
-          :options="filteredNormalizedOptions"
-          :size="size"
-          :loading="loading"
-          :loading-bottom="loadingBottom"
-          tw-drawer="p-1"
-          :keywords="keywords"
-          @select="onSelect"
-          @scroll-bottom="emit('scrollBottom')"
-        >
-          <template #empty="emptyProps">
-            <slot
-              name="empty"
-              v-bind="{ ...emptyProps, ...slotProps }"
-            />
-          </template>
-          <template #option="optionProps">
-            <slot
-              name="option"
-              v-bind="{ ...optionProps, ...slotProps }"
-            />
-          </template>
-          <template #footer="footerProps">
-            <slot
-              name="footer"
-              v-bind="{ ...footerProps, ...slotProps }"
-            />
-          </template>
-        </BaseAutocompleteDrawer>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ComputedRef } from 'vue';
-import { NormalizedOption, RawOption, OptionValue } from '@/types';
-import { useHasOptions } from '@/composables/hasOptions';
-import { useField } from '@/composables/field';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { useClickOutside } from '@/composables/clickOutside';
-import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
-import { SelectConfiguration } from '@/types';
-import { t } from '@/i18n';
-import { Size, sizes } from '@/utils/sizes';
-import BaseInput from './BaseInput.vue';
-import BaseSelect from './BaseSelect.vue';
-import { twMerge } from 'tailwind-merge';
-import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
-import { useElementBounding } from '@vueuse/core';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [Object, null] as PropType<RawOption | null | undefined>,
-  },
-  options: {
-    required: true,
-    type: Array as PropType<RawOption[]>,
-  },
-  labelKey: {
-    required: true,
-    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
-  },
-  valueKey: {
-    required: true,
-    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  loading: {
-    default: false,
-    type: Boolean,
-  },
-  loadingBottom: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  filter: {
-    default: undefined,
-    type: Function as PropType<(option: NormalizedOption, keywords: string) => boolean>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  /** Inline dropdown. This is useful for BaseDropdownAutocomplete */
-  inline: {
-    default: false,
-    type: Boolean,
-  },
-  dropdownShow: {
-    default: 'focus',
-    type: String as PropType<'focus' | 'always'>,
-  },
-  showModelValue: {
-    default: true,
-    type: Boolean,
-  },
-  visibleFocus: {
-    default: true,
-    type: Boolean,
-  },
-  focusOnMount: {
-    default: false,
-    type: Boolean,
-  },
-  /** Show an 'empty option', should use with showModelValue = true for better UX  */
-  showEmptyOption: {
-    default: false,
-    type: Boolean,
-  },
-  showRemoveButton: {
-    default: true,
-    type: Boolean,
-  },
-  emptyOptionLabel: {
-    default() {
-      return t('sui.none');
-    },
-    type: String,
-  },
-  select: {
-    default: undefined,
-    type: Object as PropType<SelectConfiguration | undefined>,
-  },
-  twInput: {
-    default: undefined,
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  twSelect: {
-    default: undefined,
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'typing',
-  'clear',
-  'open',
-  'close',
-  'scrollBottom',
-  'select',
-]);
-
-const { hasErrorInternal, emitUpdate, sizeInternal, requiredInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  size: computed(() => props.size),
-  emit: emit,
-});
-
-const hasOptions = useHasOptions(
-  computed(() => props.modelValue),
-  computed(() => props.options),
-  computed(() => props.labelKey),
-  computed(() => props.valueKey),
-  computed(() => false)
-);
-
-let openOfFocusTimeout = 0;
-
-onMounted(() => {
-  openOfFocusTimeout = setTimeout(() => {
-    if (props.focusOnMount) {
-      open();
-    }
-  }, 10)
-});
-
-onBeforeUnmount(() => {
-  clearTimeout(openOfFocusTimeout);
-});
-
-const inputRef = ref<HTMLElement | null>(null);
-const dropdownRef = ref<HTMLElement | null>(null);
-const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
-
-let timerId = 0;
-
-const keywords = ref('');
-const autocomplete = ref<HTMLElement | null>(null);
-const inputElement = ref<HTMLInputElement | null>(null);
-const shouldFilter = ref(false);
-const opened = ref(false);
-
-const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
-
-const normalizedOptions = hasOptions.normalizedOptions;
-const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
-
-const filteredNormalizedOptions = computed((): NormalizedOption[] => {
-  let options = normalizedOptions.value;
-
-  if (props.showEmptyOption) {
-    options = [
-      { value: null, label: props.emptyOptionLabel, option: null },
-      ...options,
-    ];
-  }
-
-  if (shouldFilter.value === false) {
-    return options;
-  }
-
-  return options.filter((option) => {
-    if (props.filter !== undefined) {
-      return props.filter(option, keywords.value + '');
-    }
-    if (!option.label) {
-      return false;
-    }
-    return option.label.toLowerCase().includes(keywords.value.toLowerCase());
-  });
-});
-
-// Update the keywords when the model value changes
-watch(
-  () => normalizedModelValue.value,
-  () => {
-    if (normalizedModelValue.value) {
-      if (props.showModelValue) {
-        setKeywords(normalizedModelValue.value?.label);
-      }
-    } else {
-      if (props.showModelValue) {
-        if (props.showEmptyOption) {
-          setKeywords(props.emptyOptionLabel);
-        } else {
-          setKeywords('');
-        }
-      }
-    }
-  },
-  { immediate: true }
-);
-
-useClickOutside(autocomplete, () => {
-  close();
-}, { includes: () => [dropdownRef] });
-
-onMounted(() => {
-  window.addEventListener('keydown', onWindowKeydown);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', onWindowKeydown);
-});
-
-function onWindowKeydown(event: KeyboardEvent) {
-
-  if (!opened.value) {
-    return;
-  }
-
-  const key = event.key;
-
-  if (key === 'Tab') {
-    close();
-  }
-
-  if (key === 'Escape') {
-    close();
-  }
-}
-
-function open() {
-  clearInterval(timerId);
-  // Always focus as a safety
-
-  focus();
-  // Only emit open if value changes
-  if (!opened.value) {
-    opened.value = true;
-    emit('open');
-  }
-}
-
-function close() {
-  shouldFilter.value = false;
-  opened.value = false;
-  blur();
-  timerId = setTimeout(() => {
-    // If no valid modelValue is set on close, set the keywords to the original value
-    if (props.showModelValue) {
-      if (normalizedModelValue.value) {
-        setKeywords(normalizedModelValue.value.label);
-      } else {
-        if (props.showEmptyOption) {
-          setKeywords(props.emptyOptionLabel);
-        } else {
-          setKeywords('');
-        }
-      }
-    }
-  }, 10);
-  emit('close');
-}
-
-const onTextInput = (text: string) => {
-  open();
-  shouldFilter.value = true;
-  setKeywords(text);
-  emit('typing', keywords.value);
-
-  // If keywords is empty, emit null
-  if (keywords.value == '' && !props.showEmptyOption && !requiredInternal.value) {
-    update(null);
-  }
-};
-
-const onTextKeydown = (event: KeyboardEvent) => {
-  const key = event.key;
-
-  drawer.value?.onKeydown(event);
-
-  // Prevent default behavior for up/down arrows
-
-  if (key === 'ArrowUp') {
-    event.preventDefault();
-    return;
-  }
-
-  if (key === 'ArrowDown') {
-    event.preventDefault();
-    return;
-  }
-};
-
-const clear = () => {
-  update(null);
-  emit('clear');
-};
-
-function onSelect(normalizedModelValue: RawOption | null | undefined) {
-  focus();
-  update(normalizedModelValue);
-  if (props.dropdownShow == 'focus') {
-    close();
-  }
-}
-
-function update(normalizedSelection: RawOption | null | undefined) {
-  // Re-activate filter
-  shouldFilter.value = false;
-
-  // Emit update
-  let selection = normalizedSelection ? normalizedSelection.option : null;
-
-  if (
-    props.showEmptyOption &&
-    normalizedSelection &&
-    normalizedSelection.value == null
-  ) {
-    selection = null;
-  }
-
-  emitUpdate(selection);
-}
-
-function setKeywords(input: string) {
-  keywords.value = input;
-}
-
-function focus() {
-  inputElement.value?.focus();
-}
-
-function blur() {
-  inputElement.value?.blur();
-}
-
-function highlight() {
-  inputElement.value?.select();
-}
-
-const selection = ref<OptionValue>(null);
-
-watch(
-  () => props.select,
-  (select) => {
-    if (select) {
-      if (select.option) {
-        selection.value = select.option.value;
-      } else if (select.options.length) {
-        selection.value = select.options[0].value;
-      }
-    } else {
-      selection.value = null;
-    }
-  },
-  { immediate: true }
-);
-
-function onSelectChange(value: string | number | null | undefined) {
-  const option = props.select?.options.find((option) => option.value == value);
-
-  if (props.select && props.select.onChange) {
-    props.select.onChange(option ?? null);
-  }
-
-  emit('select', value);
-
-  // Let the emitted select event propagate before opening the dropdown
-  nextTick(() => {
-    focus();
-    open();
-    highlight();
-  });
-}
-
-const slotProps = {
-  focus,
-  blur,
-  open,
-  close,
-  keywords: computed(() => keywords.value),
-};
-
-// Floating UI
-
-const inputRefRect = useElementBounding(inputRef);
-const inputRefWidth = computed(() => {
-  return inputRefRect.width.value;
-});
-
-const { floatingStyles } = useFloating(inputRef, dropdownRef, {
-  middleware: [offset(4), flip({
-    fallbackPlacements: ['right', 'bottom'],
-  })],
-  whileElementsMounted: autoUpdate,
-});
-
-// Element Classes
-
-const deleteButtonIconClasses = computed(() => {
-  const base = 'text-slate-500 group-hover:text-slate-700';
-
-  const sizeConfig = sizes[sizeInternal.value];
-
-  return [
-    base,
-    sizeConfig.iconSize,
-  ];
-});
-
-const inputClasses = computed(() => {
-  const base = 'w-full';
-  const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
-  const withSelect = props.select ? 'rounded-l-none' : '';
-
-  const inline = props.inline ? 'relative focus-within:ring-0 focus-within:border-slate-300' : '';
-  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
-
-  const internalClasses = [
-    base,
-    withSelect,
-    paddingRight,
-    inline,
-    inlineOpen,
-  ];
-
-  if (!props.twInput) {
-    return internalClasses;
-  }
-
-  return twMerge(internalClasses, props.twInput);
-});
-
-const selectClasses = computed(() => {
-  const base = 'relative rounded-r-none min-w-0';
-
-  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
-  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
-
-  const internalClasses = [
-    base,
-    inline,
-    inlineOpen,
-  ];
-
-  if (!props.twSelect) {
-    return internalClasses;
-  }
-
-  return twMerge(internalClasses, props.twSelect);
-});
-
-const showRemoveButtonInternal = computed(() => {
-  return normalizedModelValue.value && !props.disabled && props.showModelValue && props.showRemoveButton;
-});
-
-defineExpose({
-  focus,
-  blur,
-  close,
-  open,
-  setKeywords,
-});
-</script>
+<template>
+  <div ref="autocomplete">
+    <div
+      ref="inputRef"
+      class="relative z-[1]"
+    >
+      <div
+        class="flex"
+        :class="[
+          select ? '-space-x-px' : '',
+        ]"
+      >
+        <BaseSelect
+          v-if="select"
+          v-model="selection"
+          :disabled="disabled"
+          :class="selectClasses"
+          :size="sizeInternal"
+          :has-error="hasErrorInternal"
+          required
+          @update:model-value="onSelectChange"
+        >
+          <option
+            v-for="option in select.options"
+            :key="option.value + ''"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </BaseSelect>
+        <BaseInput
+          ref="inputElement"
+          :model-value="keywords"
+          :required="false"
+          type="text"
+          :visible-focus="visibleFocus"
+          :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
+          class="w-full grow min-w-0"
+          :class="inputClasses"
+          :has-error="hasErrorInternal"
+          :size="sizeInternal"
+          :autocomplete="false"
+          :disabled="disabled"
+          icon-left="heroicons:magnifying-glass-solid"
+          @focus="open(); highlight();"
+          @update:model-value="onTextInput"
+          @keydown="onTextKeydown"
+        />
+      </div>
+
+      <div
+        v-if="showRemoveButtonInternal"
+        class="absolute right-0 top-0 flex h-full p-1"
+      >
+        <button
+          type="button"
+          class="group flex rounded items-center justify-center aspect-1 enabled:hover:bg-slate-200"
+          @click="clear()"
+        >
+          <BaseIcon
+            icon="heroicons:x-mark"
+            :class="deleteButtonIconClasses"
+          />
+        </button>
+      </div>
+    </div>
+    <Teleport
+      to="body"
+      :disabled="inline"
+    >
+      <div
+        v-if="dropdownOpened"
+        ref="dropdownRef"
+        :style="!inline ? { ...floatingStyles, width: inputRefWidth + 'px' } : {}"
+        class="min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
+        :class="[
+          inline
+            ? 'relative border-b border-x rounded-t-none'
+            : 'fixed border shadow-2xl z-menu',
+        ]"
+      >
+        <BaseAutocompleteDrawer
+          ref="drawer"
+          :selected="normalizedModelValue"
+          :options="filteredNormalizedOptions"
+          :size="size"
+          :loading="loading"
+          :loading-bottom="loadingBottom"
+          tw-drawer="p-1"
+          :keywords="keywords"
+          @select="onSelect"
+          @scroll-bottom="emit('scrollBottom')"
+        >
+          <template #empty="emptyProps">
+            <slot
+              name="empty"
+              v-bind="{ ...emptyProps, ...slotProps }"
+            />
+          </template>
+          <template #option="optionProps">
+            <slot
+              name="option"
+              v-bind="{ ...optionProps, ...slotProps }"
+            />
+          </template>
+          <template #footer="footerProps">
+            <slot
+              name="footer"
+              v-bind="{ ...footerProps, ...slotProps }"
+            />
+          </template>
+        </BaseAutocompleteDrawer>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ComputedRef } from 'vue';
+import { NormalizedOption, RawOption, OptionValue } from '@/types';
+import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { useClickOutside } from '@/composables/clickOutside';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import { SelectConfiguration } from '@/types';
+import { t } from '@/i18n';
+import { Size, sizes } from '@/utils/sizes';
+import BaseInput from './BaseInput.vue';
+import BaseSelect from './BaseSelect.vue';
+import { twMerge } from 'tailwind-merge';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
+import { useElementBounding } from '@vueuse/core';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Object, null] as PropType<RawOption | null | undefined>,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<RawOption[]>,
+  },
+  labelKey: {
+    required: true,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
+  },
+  valueKey: {
+    required: true,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+  loadingBottom: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  filter: {
+    default: undefined,
+    type: Function as PropType<(option: NormalizedOption, keywords: string) => boolean>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  /** Inline dropdown. This is useful for BaseDropdownAutocomplete */
+  inline: {
+    default: false,
+    type: Boolean,
+  },
+  dropdownShow: {
+    default: 'focus',
+    type: String as PropType<'focus' | 'always'>,
+  },
+  showModelValue: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
+  /** Show an 'empty option', should use with showModelValue = true for better UX  */
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  showRemoveButton: {
+    default: true,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default() {
+      return t('sui.none');
+    },
+    type: String,
+  },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
+  twInput: {
+    default: undefined,
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  twSelect: {
+    default: undefined,
+    type: [String, Array] as PropType<string | string[]>,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'typing',
+  'clear',
+  'open',
+  'close',
+  'scrollBottom',
+  'select',
+]);
+
+const { hasErrorInternal, emitUpdate, sizeInternal, requiredInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  size: computed(() => props.size),
+  emit: emit,
+});
+
+const hasOptions = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => false)
+);
+
+let openOfFocusTimeout = 0;
+
+onMounted(() => {
+  openOfFocusTimeout = setTimeout(() => {
+    if (props.focusOnMount) {
+      open();
+    }
+  }, 10)
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(openOfFocusTimeout);
+});
+
+const inputRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
+
+let timerId = 0;
+
+const keywords = ref('');
+const autocomplete = ref<HTMLElement | null>(null);
+const inputElement = ref<HTMLInputElement | null>(null);
+const shouldFilter = ref(false);
+const opened = ref(false);
+
+const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
+
+const normalizedOptions = hasOptions.normalizedOptions;
+const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
+
+const filteredNormalizedOptions = computed((): NormalizedOption[] => {
+  let options = normalizedOptions.value;
+
+  if (props.showEmptyOption) {
+    options = [
+      { value: null, label: props.emptyOptionLabel, option: null },
+      ...options,
+    ];
+  }
+
+  if (shouldFilter.value === false) {
+    return options;
+  }
+
+  return options.filter((option) => {
+    if (props.filter !== undefined) {
+      return props.filter(option, keywords.value + '');
+    }
+    if (!option.label) {
+      return false;
+    }
+    return option.label.toLowerCase().includes(keywords.value.toLowerCase());
+  });
+});
+
+// Update the keywords when the model value changes
+watch(
+  () => normalizedModelValue.value,
+  () => {
+    if (normalizedModelValue.value) {
+      if (props.showModelValue) {
+        setKeywords(normalizedModelValue.value?.label);
+      }
+    } else {
+      if (props.showModelValue) {
+        if (props.showEmptyOption) {
+          setKeywords(props.emptyOptionLabel);
+        } else {
+          setKeywords('');
+        }
+      }
+    }
+  },
+  { immediate: true }
+);
+
+useClickOutside(autocomplete, () => {
+  close();
+}, { includes: () => [dropdownRef] });
+
+onMounted(() => {
+  window.addEventListener('keydown', onWindowKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeydown);
+});
+
+function onWindowKeydown(event: KeyboardEvent) {
+
+  if (!opened.value) {
+    return;
+  }
+
+  const key = event.key;
+
+  if (key === 'Tab') {
+    close();
+  }
+
+  if (key === 'Escape') {
+    close();
+  }
+}
+
+function open() {
+  clearInterval(timerId);
+  // Always focus as a safety
+
+  focus();
+  // Only emit open if value changes
+  if (!opened.value) {
+    opened.value = true;
+    emit('open');
+  }
+}
+
+function close() {
+  shouldFilter.value = false;
+  opened.value = false;
+  blur();
+  timerId = setTimeout(() => {
+    // If no valid modelValue is set on close, set the keywords to the original value
+    if (props.showModelValue) {
+      if (normalizedModelValue.value) {
+        setKeywords(normalizedModelValue.value.label);
+      } else {
+        if (props.showEmptyOption) {
+          setKeywords(props.emptyOptionLabel);
+        } else {
+          setKeywords('');
+        }
+      }
+    }
+  }, 10);
+  emit('close');
+}
+
+const onTextInput = (text: string) => {
+  open();
+  shouldFilter.value = true;
+  setKeywords(text);
+  emit('typing', keywords.value);
+
+  // If keywords is empty, emit null
+  if (keywords.value == '' && !props.showEmptyOption && !requiredInternal.value) {
+    update(null);
+  }
+};
+
+const onTextKeydown = (event: KeyboardEvent) => {
+  const key = event.key;
+
+  drawer.value?.onKeydown(event);
+
+  // Prevent default behavior for up/down arrows
+
+  if (key === 'ArrowUp') {
+    event.preventDefault();
+    return;
+  }
+
+  if (key === 'ArrowDown') {
+    event.preventDefault();
+    return;
+  }
+};
+
+const clear = () => {
+  update(null);
+  emit('clear');
+};
+
+function onSelect(normalizedModelValue: RawOption | null | undefined) {
+  focus();
+  update(normalizedModelValue);
+  if (props.dropdownShow == 'focus') {
+    close();
+  }
+}
+
+function update(normalizedSelection: RawOption | null | undefined) {
+  // Re-activate filter
+  shouldFilter.value = false;
+
+  // Emit update
+  let selection = normalizedSelection ? normalizedSelection.option : null;
+
+  if (
+    props.showEmptyOption &&
+    normalizedSelection &&
+    normalizedSelection.value == null
+  ) {
+    selection = null;
+  }
+
+  emitUpdate(selection);
+}
+
+function setKeywords(input: string) {
+  keywords.value = input;
+}
+
+function focus() {
+  inputElement.value?.focus();
+}
+
+function blur() {
+  inputElement.value?.blur();
+}
+
+function highlight() {
+  inputElement.value?.select();
+}
+
+const selection = ref<OptionValue>(null);
+
+watch(
+  () => props.select,
+  (select) => {
+    if (select) {
+      if (select.option) {
+        selection.value = select.option.value;
+      } else if (select.options.length) {
+        selection.value = select.options[0].value;
+      }
+    } else {
+      selection.value = null;
+    }
+  },
+  { immediate: true }
+);
+
+function onSelectChange(value: string | number | null | undefined) {
+  const option = props.select?.options.find((option) => option.value == value);
+
+  if (props.select && props.select.onChange) {
+    props.select.onChange(option ?? null);
+  }
+
+  emit('select', value);
+
+  // Let the emitted select event propagate before opening the dropdown
+  nextTick(() => {
+    focus();
+    open();
+    highlight();
+  });
+}
+
+const slotProps = {
+  focus,
+  blur,
+  open,
+  close,
+  keywords: computed(() => keywords.value),
+};
+
+// Floating UI
+
+const inputRefRect = useElementBounding(inputRef);
+const inputRefWidth = computed(() => {
+  return inputRefRect.width.value;
+});
+
+const { floatingStyles } = useFloating(inputRef, dropdownRef, {
+  middleware: [offset(4), flip({
+    fallbackPlacements: ['right', 'bottom'],
+  })],
+  whileElementsMounted: autoUpdate,
+});
+
+// Element Classes
+
+const deleteButtonIconClasses = computed(() => {
+  const base = 'text-slate-500 group-hover:text-slate-700';
+
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return [
+    base,
+    sizeConfig.iconSize,
+  ];
+});
+
+const inputClasses = computed(() => {
+  const base = 'w-full';
+  const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
+  const withSelect = props.select ? 'rounded-l-none' : '';
+
+  const inline = props.inline ? 'relative focus-within:ring-0 focus-within:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
+
+  const internalClasses = [
+    base,
+    withSelect,
+    paddingRight,
+    inline,
+    inlineOpen,
+  ];
+
+  if (!props.twInput) {
+    return internalClasses;
+  }
+
+  return twMerge(internalClasses, props.twInput);
+});
+
+const selectClasses = computed(() => {
+  const base = 'relative rounded-r-none min-w-0';
+
+  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
+
+  const internalClasses = [
+    base,
+    inline,
+    inlineOpen,
+  ];
+
+  if (!props.twSelect) {
+    return internalClasses;
+  }
+
+  return twMerge(internalClasses, props.twSelect);
+});
+
+const showRemoveButtonInternal = computed(() => {
+  return normalizedModelValue.value && !props.disabled && props.showModelValue && props.showRemoveButton;
+});
+
+defineExpose({
+  focus,
+  blur,
+  close,
+  open,
+  setKeywords,
+});
+</script>