sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseTagAutocomplete.vue

@@ -1,565 +1,565 @@
-<template>
-  <div ref="autocomplete">
-    <div
-      ref="inputRef"
-      :class="wrapperClass"
-    >
-      <slot
-        name="items"
-        :items="normalizedModelValue"
-        :remove-option="removeOption"
-        :disabled="disabled"
-      >
-        <div
-          v-for="selection in normalizedModelValue"
-          :key="selection.value ? selection.value : 'null'"
-          :class="selectionClass(selection)"
-        >
-          <div
-            :title="selection.label"
-            class="truncate"
-          >
-            {{ selection.label }}
-          </div>
-
-          <button
-            type="button"
-            tabindex="-1"
-            :class="selectionDeleteClasses"
-            @click="removeOption(selection)"
-          >
-            ✕
-          </button>
-        </div>
-      </slot>
-
-      <input
-        ref="inputElement"
-        :value="keywords"
-        type="text"
-        :placeholder="placeholder ? placeholder : t('sui.select_an_item')"
-        :class="inputClasses"
-        autocomplete="off"
-        :disabled="disabled"
-        @focus="open"
-        @input="onTextInput"
-        @keydown="onTextKeydown"
-      >
-    </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 { cloneDeep, get } from 'lodash';
-import { PropType, ComputedRef } from 'vue';
-import { NormalizedOption, RawOption } from '@/types';
-import { useHasOptions } from '@/composables/hasOptions';
-import { useField } from '@/composables/field';
-import { useClickOutside } from '@/composables/clickOutside';
-import { useSnackbarsStore } from '@/stores/snackbars';
-import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
-import { twMerge } from 'tailwind-merge';
-import { t } from '@/i18n';
-import { Size, sizes } from '@/utils/sizes';
-import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
-import { useElementBounding } from '@vueuse/core';
-
-const snackbars = useSnackbarsStore();
-
-const props = defineProps({
-  modelValue: {
-    required: true,
-    type: [Array, null] as PropType<RawOption[] | null>,
-  },
-  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,
-  },
-
-  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,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  filter: {
-    default: undefined,
-    type: Function as PropType<(option: NormalizedOption) => boolean>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  inline: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  dropdownShow: {
-    default: 'focus',
-    type: String as PropType<'focus' | 'always'>,
-  },
-  focusOnMount: {
-    default: false,
-    type: Boolean,
-  },
-  twContainer: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  visibleFocus: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'typing',
-  'open',
-  'close',
-  'scrollBottom',
-]);
-
-const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  size: computed(() => props.size),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const hasOptions = useHasOptions(
-  computed(() => props.modelValue),
-  computed(() => props.options),
-  computed(() => props.labelKey),
-  computed(() => props.valueKey),
-  computed(() => true)
-);
-
-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();
-  }
-}
-
-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);
-
-const keywords = ref('');
-const autocomplete = ref<HTMLElement | null>(null);
-const inputElement = ref<HTMLInputElement | null>(null);
-const shouldFilter = ref(false);
-const opened = ref(false);
-const selectionToDelete = ref<NormalizedOption | null>(null);
-
-const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
-
-const isSelected = hasOptions.isSelected;
-const normalizedOptions = hasOptions.normalizedOptions;
-const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<
-  NormalizedOption[]
->;
-
-const filteredNormalizedOptions = computed((): NormalizedOption[] => {
-  return normalizedOptions.value
-    .filter((option) => {
-      if (shouldFilter.value === false) {
-        return true;
-      }
-      if (props.filter !== undefined) {
-        return props.filter(option);
-      }
-      if (!option.label) {
-        return false;
-      }
-      return option.label.toLowerCase().includes(keywords.value.toLowerCase());
-    })
-    .filter((option) => {
-      return !isSelected(option);
-    });
-});
-
-useClickOutside(autocomplete, () => {
-  close();
-}, { includes: () => [dropdownRef] });
-
-function open() {
-  // 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;
-  selectionToDelete.value = null;
-  blur();
-  emit('close');
-}
-
-const onTextInput = (event: Event) => {
-  open();
-  shouldFilter.value = true;
-  setKeywords(get(event, 'target.value', '') + '');
-  emit('typing', keywords.value);
-
-  selectionToDelete.value = 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;
-  }
-
-  // Attempt to remove last selection on backspace
-  if (key === 'Backspace' && keywords.value == '') {
-    attemptRemoveLastSelection();
-    return;
-  }
-};
-
-const onSelect = (option: NormalizedOption) => {
-  focus();
-
-  if (props.max && normalizedModelValue.value.length >= props.max) {
-    snackbars.push({
-      title: t('sui.whoops'),
-      text: t('sui.you_cannot_select_more_than_x_items', {
-        count: props.max,
-      }),
-      color: 'warning',
-    });
-    return;
-  }
-
-  if (isSelected(option)) {
-    return;
-  }
-
-  selectionToDelete.value = null;
-  update([...normalizedModelValue.value, option]);
-  setKeywords('');
-  emit('typing', keywords.value);
-};
-
-function update(value: NormalizedOption[]) {
-  // Re-activate filter
-  shouldFilter.value = false;
-  // Emit update
-  emitUpdate(value.map((v) => v.option));
-}
-
-function setKeywords(input: string) {
-  keywords.value = input;
-}
-
-function focus() {
-  inputElement.value?.focus();
-}
-
-function blur() {
-  inputElement.value?.blur();
-}
-
-const slotProps = {
-  focus,
-  blur,
-  open,
-  close,
-  keywords: computed(() => keywords.value),
-};
-
-const attemptRemoveLastSelection = () => {
-  const optionValueToDelete =
-    normalizedModelValue.value[normalizedModelValue.value.length - 1] ?? null;
-
-  if (
-    selectionToDelete.value &&
-    optionValueToDelete &&
-    optionValueToDelete.value == selectionToDelete.value.value
-  ) {
-    removeOption(selectionToDelete.value);
-    selectionToDelete.value = null;
-    return;
-  }
-
-  selectionToDelete.value =
-    normalizedModelValue.value.find((v) => {
-      return v.value === optionValueToDelete.value;
-    }) ?? null;
-};
-
-const removeOption = (option: NormalizedOption) => {
-
-  if (props.disabled) {
-    return;
-  }
-
-  focus();
-  let newModelValue = cloneDeep(normalizedModelValue.value);
-  newModelValue = newModelValue.filter((v) => v.value != option.value);
-  update(newModelValue);
-};
-
-// 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 wrapperClass = computed(() => {
-  const base = 'relative z-[1] input-rounded border bg-white flex flex-wrap';
-  const error = hasErrorInternal.value ? 'border-red-600' : 'border-slate-300'
-  const height = {
-    'xs': 'min-h-control-xs gap-0.5 p-0.5',
-    'sm': 'min-h-control-sm gap-0.5 p-0.5',
-    'md': 'min-h-control-md gap-1 p-1',
-    'lg': 'min-h-control-lg gap-1 p-1',
-    'xl': 'min-h-control-xl gap-1 p-1',
-  }[sizeInternal.value];
-
-  const focus = (dropdownOpened.value && !props.inline) ? 'input-focus border-blue-300' : '';
-  const inline = (dropdownOpened.value && props.inline) ? 'rounded-b-none' : '';
-
-  const internalClasses = [base, error, height, focus, inline];
-
-  if (props.twContainer) {
-    return twMerge(internalClasses, props.twContainer);
-  }
-
-  return internalClasses;
-});
-
-const innerHeight = computed(() => {
-  const height = {
-    'xs': 'h-[calc(theme(spacing.control-xs)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
-    'sm': 'h-[calc(theme(spacing.control-sm)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
-    'md': 'h-[calc(theme(spacing.control-md)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
-    'lg': 'h-[calc(theme(spacing.control-lg)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
-    'xl': 'h-[calc(theme(spacing.control-xl)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
-  }[sizeInternal.value];
-
-  return height;
-});
-
-const inputClasses = computed(() => {
-  const base = 'grow min-w-[50px] py-0 border-none shadow-none outline-none bg-transparent';
-  const focus = 'focus:border-none focus:shadow-none focus:outline-none focus:ring-0';
-  const disabled = 'disabled:cursor-not-allowed';
-  const sizeConfig = sizes[sizeInternal.value];
-
-  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
-  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
-
-  const padding = {
-    'xs': 'pl-1.5',
-    'sm': 'pl-2',
-    'md': 'pl-2.5',
-    'lg': 'pl-2.5',
-    'xl': 'pl-2.5',
-  }[sizeInternal.value];
-
-  return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize, inline, inlineOpen];
-});
-
-const selectionClass = (selection: NormalizedOption): string => {
-
-  const base = 'flex items-center rounded border overflow-hidden';
-
-  const fontSize = {
-    'xs': 'text-xs',
-    'sm': 'text-xs',
-    'md': 'text-sm',
-    'lg': 'text-base',
-    'xl': 'text-base',
-  }[sizeInternal.value];
-
-  const padding = {
-    'xs': 'pl-2',
-    'sm': 'pl-2',
-    'md': 'pl-3',
-    'lg': 'pl-3',
-    'xl': 'pl-4',
-  }[sizeInternal.value];
-
-  let color = 'bg-slate-200 border-slate-300';
-
-  if (
-    selectionToDelete.value &&
-    selectionToDelete.value.value == selection.value
-  ) {
-    color = 'bg-red-200 border-red-300 text-red-800';
-  }
-
-  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
-
-  return twMerge(base, innerHeight.value, padding, color, disabled, fontSize);
-};
-
-const selectionDeleteClasses = computed(() => {
-  const base = 'flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent outline-none';
-
-  const padding = {
-    'xs': 'pl-1 pr-2',
-    'sm': 'pl-1 pr-2',
-    'md': 'pl-1 pr-3',
-    'lg': 'pl-2 pr-3',
-    'xl': 'pl-3 pr-4',
-  }[sizeInternal.value];
-
-  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
-
-  return twMerge(base, padding, disabled);
-});
-
-defineExpose({
-  focus,
-  blur,
-  close,
-  open,
-  setKeywords,
-});
-</script>
+<template>
+  <div ref="autocomplete">
+    <div
+      ref="inputRef"
+      :class="wrapperClass"
+    >
+      <slot
+        name="items"
+        :items="normalizedModelValue"
+        :remove-option="removeOption"
+        :disabled="disabled"
+      >
+        <div
+          v-for="selection in normalizedModelValue"
+          :key="selection.value ? selection.value : 'null'"
+          :class="selectionClass(selection)"
+        >
+          <div
+            :title="selection.label"
+            class="truncate"
+          >
+            {{ selection.label }}
+          </div>
+
+          <button
+            type="button"
+            tabindex="-1"
+            :class="selectionDeleteClasses"
+            @click="removeOption(selection)"
+          >
+            ✕
+          </button>
+        </div>
+      </slot>
+
+      <input
+        ref="inputElement"
+        :value="keywords"
+        type="text"
+        :placeholder="placeholder ? placeholder : t('sui.select_an_item')"
+        :class="inputClasses"
+        autocomplete="off"
+        :disabled="disabled"
+        @focus="open"
+        @input="onTextInput"
+        @keydown="onTextKeydown"
+      >
+    </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 { cloneDeep, get } from 'lodash';
+import { PropType, ComputedRef } from 'vue';
+import { NormalizedOption, RawOption } from '@/types';
+import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
+import { useClickOutside } from '@/composables/clickOutside';
+import { useSnackbarsStore } from '@/stores/snackbars';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import { twMerge } from 'tailwind-merge';
+import { t } from '@/i18n';
+import { Size, sizes } from '@/utils/sizes';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
+import { useElementBounding } from '@vueuse/core';
+
+const snackbars = useSnackbarsStore();
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [Array, null] as PropType<RawOption[] | null>,
+  },
+  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,
+  },
+
+  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,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  filter: {
+    default: undefined,
+    type: Function as PropType<(option: NormalizedOption) => boolean>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  inline: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  dropdownShow: {
+    default: 'focus',
+    type: String as PropType<'focus' | 'always'>,
+  },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
+  twContainer: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'typing',
+  'open',
+  'close',
+  'scrollBottom',
+]);
+
+const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  size: computed(() => props.size),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const hasOptions = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => true)
+);
+
+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();
+  }
+}
+
+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);
+
+const keywords = ref('');
+const autocomplete = ref<HTMLElement | null>(null);
+const inputElement = ref<HTMLInputElement | null>(null);
+const shouldFilter = ref(false);
+const opened = ref(false);
+const selectionToDelete = ref<NormalizedOption | null>(null);
+
+const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
+
+const isSelected = hasOptions.isSelected;
+const normalizedOptions = hasOptions.normalizedOptions;
+const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<
+  NormalizedOption[]
+>;
+
+const filteredNormalizedOptions = computed((): NormalizedOption[] => {
+  return normalizedOptions.value
+    .filter((option) => {
+      if (shouldFilter.value === false) {
+        return true;
+      }
+      if (props.filter !== undefined) {
+        return props.filter(option);
+      }
+      if (!option.label) {
+        return false;
+      }
+      return option.label.toLowerCase().includes(keywords.value.toLowerCase());
+    })
+    .filter((option) => {
+      return !isSelected(option);
+    });
+});
+
+useClickOutside(autocomplete, () => {
+  close();
+}, { includes: () => [dropdownRef] });
+
+function open() {
+  // 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;
+  selectionToDelete.value = null;
+  blur();
+  emit('close');
+}
+
+const onTextInput = (event: Event) => {
+  open();
+  shouldFilter.value = true;
+  setKeywords(get(event, 'target.value', '') + '');
+  emit('typing', keywords.value);
+
+  selectionToDelete.value = 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;
+  }
+
+  // Attempt to remove last selection on backspace
+  if (key === 'Backspace' && keywords.value == '') {
+    attemptRemoveLastSelection();
+    return;
+  }
+};
+
+const onSelect = (option: NormalizedOption) => {
+  focus();
+
+  if (props.max && normalizedModelValue.value.length >= props.max) {
+    snackbars.push({
+      title: t('sui.whoops'),
+      text: t('sui.you_cannot_select_more_than_x_items', {
+        count: props.max,
+      }),
+      color: 'warning',
+    });
+    return;
+  }
+
+  if (isSelected(option)) {
+    return;
+  }
+
+  selectionToDelete.value = null;
+  update([...normalizedModelValue.value, option]);
+  setKeywords('');
+  emit('typing', keywords.value);
+};
+
+function update(value: NormalizedOption[]) {
+  // Re-activate filter
+  shouldFilter.value = false;
+  // Emit update
+  emitUpdate(value.map((v) => v.option));
+}
+
+function setKeywords(input: string) {
+  keywords.value = input;
+}
+
+function focus() {
+  inputElement.value?.focus();
+}
+
+function blur() {
+  inputElement.value?.blur();
+}
+
+const slotProps = {
+  focus,
+  blur,
+  open,
+  close,
+  keywords: computed(() => keywords.value),
+};
+
+const attemptRemoveLastSelection = () => {
+  const optionValueToDelete =
+    normalizedModelValue.value[normalizedModelValue.value.length - 1] ?? null;
+
+  if (
+    selectionToDelete.value &&
+    optionValueToDelete &&
+    optionValueToDelete.value == selectionToDelete.value.value
+  ) {
+    removeOption(selectionToDelete.value);
+    selectionToDelete.value = null;
+    return;
+  }
+
+  selectionToDelete.value =
+    normalizedModelValue.value.find((v) => {
+      return v.value === optionValueToDelete.value;
+    }) ?? null;
+};
+
+const removeOption = (option: NormalizedOption) => {
+
+  if (props.disabled) {
+    return;
+  }
+
+  focus();
+  let newModelValue = cloneDeep(normalizedModelValue.value);
+  newModelValue = newModelValue.filter((v) => v.value != option.value);
+  update(newModelValue);
+};
+
+// 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 wrapperClass = computed(() => {
+  const base = 'relative z-[1] input-rounded border bg-white flex flex-wrap';
+  const error = hasErrorInternal.value ? 'border-red-600' : 'border-slate-300'
+  const height = {
+    'xs': 'min-h-control-xs gap-0.5 p-0.5',
+    'sm': 'min-h-control-sm gap-0.5 p-0.5',
+    'md': 'min-h-control-md gap-1 p-1',
+    'lg': 'min-h-control-lg gap-1 p-1',
+    'xl': 'min-h-control-xl gap-1 p-1',
+  }[sizeInternal.value];
+
+  const focus = (dropdownOpened.value && !props.inline) ? 'input-focus border-blue-300' : '';
+  const inline = (dropdownOpened.value && props.inline) ? 'rounded-b-none' : '';
+
+  const internalClasses = [base, error, height, focus, inline];
+
+  if (props.twContainer) {
+    return twMerge(internalClasses, props.twContainer);
+  }
+
+  return internalClasses;
+});
+
+const innerHeight = computed(() => {
+  const height = {
+    'xs': 'h-[calc(theme(spacing.control-xs)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
+    'sm': 'h-[calc(theme(spacing.control-sm)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
+    'md': 'h-[calc(theme(spacing.control-md)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+    'lg': 'h-[calc(theme(spacing.control-lg)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+    'xl': 'h-[calc(theme(spacing.control-xl)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+  }[sizeInternal.value];
+
+  return height;
+});
+
+const inputClasses = computed(() => {
+  const base = 'grow min-w-[50px] py-0 border-none shadow-none outline-none bg-transparent';
+  const focus = 'focus:border-none focus:shadow-none focus:outline-none focus:ring-0';
+  const disabled = 'disabled:cursor-not-allowed';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
+
+  const padding = {
+    'xs': 'pl-1.5',
+    'sm': 'pl-2',
+    'md': 'pl-2.5',
+    'lg': 'pl-2.5',
+    'xl': 'pl-2.5',
+  }[sizeInternal.value];
+
+  return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize, inline, inlineOpen];
+});
+
+const selectionClass = (selection: NormalizedOption): string => {
+
+  const base = 'flex items-center rounded border overflow-hidden';
+
+  const fontSize = {
+    'xs': 'text-xs',
+    'sm': 'text-xs',
+    'md': 'text-sm',
+    'lg': 'text-base',
+    'xl': 'text-base',
+  }[sizeInternal.value];
+
+  const padding = {
+    'xs': 'pl-2',
+    'sm': 'pl-2',
+    'md': 'pl-3',
+    'lg': 'pl-3',
+    'xl': 'pl-4',
+  }[sizeInternal.value];
+
+  let color = 'bg-slate-200 border-slate-300';
+
+  if (
+    selectionToDelete.value &&
+    selectionToDelete.value.value == selection.value
+  ) {
+    color = 'bg-red-200 border-red-300 text-red-800';
+  }
+
+  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
+
+  return twMerge(base, innerHeight.value, padding, color, disabled, fontSize);
+};
+
+const selectionDeleteClasses = computed(() => {
+  const base = 'flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent outline-none';
+
+  const padding = {
+    'xs': 'pl-1 pr-2',
+    'sm': 'pl-1 pr-2',
+    'md': 'pl-1 pr-3',
+    'lg': 'pl-2 pr-3',
+    'xl': 'pl-3 pr-4',
+  }[sizeInternal.value];
+
+  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
+
+  return twMerge(base, padding, disabled);
+});
+
+defineExpose({
+  focus,
+  blur,
+  close,
+  open,
+  setKeywords,
+});
+</script>