sprintify-ui 0.0.97 → 0.0.100

package/src/components/BaseAutocomplete.vue

@@ -61,92 +61,34 @@
     <div class="relative">
       <div
         v-show="opened || dropdownShow == 'always'"
-        class="min-h-[110px] w-full overflow-hidden"
+        class="w-full overflow-hidden"
         :class="[
           inline
-            ? 'relative'
-            : 'absolute top-1 z-menu rounded border border-slate-300 bg-white shadow-md',
+            ? 'relative mt-1'
+            : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
-        <div
-          ref="dropdown"
-          data-scroll-lock-scrollable
-          class="max-h-[214px] min-h-[75px] w-full overflow-y-auto"
+        <BaseAutocompleteDropdown
+          :selected="normalizedModelValue"
+          :options="filteredNormalizedOptions"
+          :size="size"
+          :loading="loading"
+          :loading-bottom="loadingBottom"
+          :dropdown-class="inline ? '' : 'p-1'"
+          :keywords="keywords"
+          @select="onSelect"
+          @scroll-bottom="emit('scrollBottom')"
         >
-          <slot v-if="filteredNormalizedOptions.length == 0" name="empty">
-            <div
-              class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
-            >
-              {{ $t('sui.nothing_found') }}
-            </div>
-          </slot>
-
-          <ul v-else :class="[inline ? 'p-0 pt-1' : 'p-1']">
-            <li
-              v-for="(option, index) in filteredNormalizedOptions"
-              :key="option.value"
-              class="block"
-            >
-              <button
-                class="block w-full cursor-pointer appearance-none border-none text-left focus:outline-none"
-                type="button"
-                tabindex="-1"
-                @click="onSelect(option)"
-                @mouseenter="selectionIndex = index"
-              >
-                <slot
-                  name="option"
-                  :option="option.option"
-                  :selected="isSelected(option)"
-                  :active="optionActive && optionActive.value == option.value"
-                >
-                  <div
-                    class="flex items-center rounded px-2 py-1 text-sm"
-                    :class="[optionClass(option), optionSizeClass]"
-                  >
-                    <div class="grow">
-                      {{ option.label }}
-                    </div>
-                    <div class="shrink-0">
-                      <BaseIcon
-                        v-if="isSelected(option)"
-                        icon="heroicons:check-20-solid"
-                        :class="iconClass"
-                      ></BaseIcon>
-                    </div>
-                  </div>
-                </slot>
-              </button>
-            </li>
-          </ul>
-        </div>
-
-        <div>
-          <div v-if="$slots.footer" class="bg-white">
-            <slot
-              :options="filteredNormalizedOptions"
-              :keywords="keywords"
-              name="footer"
-            />
-          </div>
-        </div>
-
-        <div
-          v-if="loading"
-          class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
-        >
-          <div class="space-y-1">
-            <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
-            <BaseSkeleton
-              class="h-7 w-full opacity-70"
-              delay="50ms"
-            ></BaseSkeleton>
-            <BaseSkeleton
-              class="h-7 w-full opacity-30"
-              delay="100ms"
-            ></BaseSkeleton>
-          </div>
-        </div>
+          <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>
+        </BaseAutocompleteDropdown>
       </div>
     </div>
   </div>
@@ -156,12 +98,11 @@
 import { get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
-import { useInfiniteScroll } from '@vueuse/core';
-import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
 import { useClickOutside } from '@/composables/clickOutside';
+import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
 
 const props = defineProps({
   modelValue: {
@@ -192,6 +133,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  loadingBottom: {
+    default: false,
+    type: Boolean,
+  },
   required: {
     default: false,
     type: Boolean,
@@ -233,12 +178,10 @@ const props = defineProps({
 const emit = defineEmits([
   'update:modelValue',
   'typing',
-  'blur',
-  'focus',
-  'scrollBottom',
   'clear',
   'open',
   'close',
+  'scrollBottom',
 ]);
 
 const { hasErrorInternal, emitUpdate } = useField({
@@ -248,15 +191,6 @@ const { hasErrorInternal, emitUpdate } = useField({
   emit: emit,
 });
 
-let timerId = 0;
-const keywords = ref('');
-const selectionIndex = ref(0);
-const autocomplete = ref(null) as Ref<HTMLElement | null>;
-const inputElement = ref(null) as Ref<HTMLInputElement | null>;
-const dropdown = ref(null) as Ref<HTMLElement | null>;
-const shouldFilter = ref(false);
-const opened = ref(false);
-
 const hasOptions = useHasOptions(
   computed(() => props.modelValue),
   computed(() => props.options),
@@ -265,7 +199,13 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
-const isSelected = hasOptions.isSelected;
+let timerId = 0;
+const keywords = ref('');
+const autocomplete = ref(null) as Ref<HTMLElement | null>;
+const inputElement = ref(null) as Ref<HTMLInputElement | null>;
+const shouldFilter = ref(false);
+const opened = ref(false);
+
 const normalizedOptions = hasOptions.normalizedOptions;
 const normalizedModelValue =
   hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
@@ -285,30 +225,15 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   });
 });
 
-const optionActive = computed(() => {
-  return (
-    filteredNormalizedOptions.value[
-      Math.min(selectionIndex.value, filteredNormalizedOptions.value.length - 1)
-    ] ?? null
-  );
-});
-
-// Update the keywords + selectionIndex when the model value changes
+// Update the keywords when the model value changes
 watch(
   () => normalizedModelValue.value,
   () => {
     if (normalizedModelValue.value) {
-      const index = filteredNormalizedOptions.value.findIndex(
-        (option) => option.value === normalizedModelValue.value?.value
-      );
-      if (index >= 0) {
-        selectionIndex.value = index;
-      }
       if (props.modelValueShow) {
         setKeywords(normalizedModelValue.value?.label);
       }
     } else {
-      selectionIndex.value = 0;
       if (props.modelValueShow) {
         setKeywords('');
       }
@@ -317,10 +242,8 @@ watch(
   { immediate: true }
 );
 
-useClickOutside(autocomplete, (outside: boolean) => {
-  if (outside) {
-    close();
-  }
+useClickOutside(autocomplete, () => {
+  close();
 });
 
 function open() {
@@ -335,6 +258,7 @@ function open() {
 }
 
 function close() {
+  shouldFilter.value = false;
   opened.value = false;
   blur();
   timerId = setTimeout(() => {
@@ -349,13 +273,10 @@ function close() {
 const onTextInput = (event: Event) => {
   open();
   shouldFilter.value = true;
-  selectionIndex.value = 0;
   setKeywords(get(event, 'target.value') + '');
   emit('typing', keywords.value);
-  dropdown.value?.scrollTo({
-    top: 0,
-  });
 
+  // If keywords is empty, emit null
   if (keywords.value == '') {
     update(null);
   }
@@ -364,38 +285,15 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  if (props.loading) {
-    return;
-  }
-
-  if (key === 'ArrowDown') {
-    event.preventDefault();
-    if (selectionIndex.value < filteredNormalizedOptions.value.length - 1) {
-      selectionIndex.value++;
-    } else {
-      selectionIndex.value = 0;
-    }
-    return;
-  }
+  // Prevent default behavior for up/down arrows
 
   if (key === 'ArrowUp') {
     event.preventDefault();
-    if (selectionIndex.value > 0) {
-      selectionIndex.value--;
-    } else {
-      selectionIndex.value = Math.max(
-        0,
-        filteredNormalizedOptions.value.length - 1
-      );
-    }
     return;
   }
 
-  if (key === 'Enter') {
+  if (key === 'ArrowDown') {
     event.preventDefault();
-    if (optionActive.value) {
-      onSelect(optionActive.value);
-    }
     return;
   }
 };
@@ -414,14 +312,10 @@ function onSelect(normalizedModelValue: Option | null | undefined) {
 }
 
 function update(normalizedSelection: Option | null | undefined) {
-  const selection = normalizedSelection ? normalizedSelection.option : null;
-  if (selection) {
-    const index = filteredNormalizedOptions.value.findIndex(
-      (option) => option.value == selection.value
-    );
-    selectionIndex.value = index;
-  }
+  // Re-activate filter
   shouldFilter.value = false;
+  // Emit update
+  const selection = normalizedSelection ? normalizedSelection.option : null;
   emitUpdate(selection);
 }
 
@@ -437,27 +331,15 @@ function blur() {
   inputElement.value?.blur();
 }
 
-// Element Classes
-
-const optionClass = (option: NormalizedOption) => {
-  const active = optionActive.value && optionActive.value.value == option.value;
-
-  if (active) {
-    return 'bg-slate-200';
-  }
-
-  return 'bg-white';
+const slotProps = {
+  focus,
+  blur,
+  open,
+  close,
+  keywords: computed(() => keywords.value),
 };
 
-const optionSizeClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'text-xs';
-  }
-  if (props.size == 'sm') {
-    return 'text-sm';
-  }
-  return 'text-sm';
-});
+// Element Classes
 
 const inputClass = computed(() => {
   if (props.size == 'xs') {
@@ -489,18 +371,6 @@ const iconWrapClass = computed(() => {
   return 'pl-2.5';
 });
 
-// Infinite scroll
-
-onMounted(() => {
-  useInfiniteScroll(
-    dropdown.value,
-    () => {
-      emit('scrollBottom');
-    },
-    { distance: 60 }
-  );
-});
-
 defineExpose({
   focus,
   blur,

package/src/components/BaseAutocompleteDropdown.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="relative w-full overflow-hidden">
+    <div
+      ref="dropdown"
+      data-scroll-lock-scrollable
+      class="max-h-[214px] w-full overflow-y-auto"
+    >
+      <!-- Slot empty -->
+      <slot v-if="options.length == 0" name="empty">
+        <div
+          class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
+        >
+          {{ $t('sui.nothing_found') }}
+        </div>
+      </slot>
+
+      <!-- Option list -->
+      <ul v-else :class="dropdownClass">
+        <li
+          v-for="(option, index) in options"
+          :key="option.value"
+          ref="optionRefs"
+          class="block"
+        >
+          <button
+            class="block w-full cursor-pointer select-none appearance-none border-none text-left focus:outline-none"
+            type="button"
+            tabindex="-1"
+            @click="onSelect(option)"
+            @mouseenter="onOptionMouseEnter(index)"
+            @mousemove="onOptionMouseMove(index)"
+          >
+            <slot
+              name="option"
+              :option="option.option"
+              :selected="isSelected(option)"
+              :active="focusOption && focusOption.value == option.value"
+            >
+              <div
+                class="flex items-center rounded px-[0.75em] py-[0.5em]"
+                :class="[optionClass(option), optionSizeClass]"
+              >
+                <div class="grow">
+                  {{ option.label }}
+                </div>
+                <div class="shrink-0">
+                  <BaseIcon
+                    v-if="isSelected(option)"
+                    icon="heroicons:check-20-solid"
+                    :class="optionIconClass"
+                  ></BaseIcon>
+                </div>
+              </div>
+            </slot>
+          </button>
+        </li>
+      </ul>
+
+      <!-- Loading bottom -->
+      <!-- This component should always take the same amount of space whether it's visible or not -->
+      <!-- This is to prevent infinite scroll jumps -->
+      <div
+        :class="[loadingBottom ? 'opacity-100' : 'opacity-0']"
+        class="relative py-3 text-center"
+      >
+        <div
+          class="absolute inset-0 h-full w-full bg-gradient-to-b from-transparent to-white"
+        ></div>
+        <BaseSpinnerSmall
+          class="mx-auto h-7 w-7 text-slate-300"
+        ></BaseSpinnerSmall>
+      </div>
+    </div>
+
+    <div ref="footer">
+      <div v-if="$slots.footer" class="bg-white">
+        <slot :options="options" name="footer" />
+      </div>
+    </div>
+
+    <div
+      v-if="loading"
+      class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
+    >
+      <div class="space-y-1">
+        <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
+        <BaseSkeleton class="h-7 w-full opacity-70" delay="50ms"></BaseSkeleton>
+        <BaseSkeleton
+          class="h-7 w-full opacity-30"
+          delay="100ms"
+        ></BaseSkeleton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref, PropType } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
+import { NormalizedOption } from '@/types';
+import { isArray, isObject, throttle } from 'lodash';
+import BaseSkeleton from './BaseSkeleton.vue';
+import { BaseIcon } from '.';
+import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
+
+const props = defineProps({
+  selected: {
+    type: [Array, Object, null, undefined] as PropType<
+      NormalizedOption[] | NormalizedOption | null | undefined
+    >,
+    default: undefined,
+  },
+  options: {
+    type: Array as PropType<NormalizedOption[]>,
+    default() {
+      return [];
+    },
+  },
+  keywords: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingBottom: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: 'base',
+  },
+  dropdownClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['scrollBottom', 'select']);
+
+const dropdown = ref(null) as Ref<HTMLDivElement | null>;
+const optionRefs = ref([]) as Ref<HTMLElement[]>;
+
+let mouseIsMoving = false;
+
+// Focus
+
+const focusIndex = ref(0);
+
+const focusOption = computed(() => {
+  return (
+    props.options[Math.min(focusIndex.value, props.options.length - 1)] ?? null
+  );
+});
+
+// Selecting
+
+function onSelect(option: NormalizedOption) {
+  emit('select', option);
+}
+
+function isSelected(option: NormalizedOption): boolean {
+  if (isArray(props.selected)) {
+    return props.selected.some((modelValue) => {
+      return modelValue.value === option.value;
+    });
+  }
+
+  if (isObject(props.selected)) {
+    return props.selected.value == option.value;
+  }
+
+  return false;
+}
+
+// Arrow actions
+
+window.addEventListener('keydown', onKeyDown);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown);
+});
+
+function onKeyDown(event: KeyboardEvent) {
+  const key = event.key;
+
+  mouseIsMoving = false;
+
+  if (props.loading) {
+    return;
+  }
+
+  if (key === 'ArrowDown') {
+    if (focusIndex.value < props.options.length - 1) {
+      focusIndex.value++;
+    } else {
+      focusIndex.value = 0;
+    }
+    scrollToFocus();
+    return;
+  }
+
+  if (key === 'ArrowUp') {
+    if (focusIndex.value > 0) {
+      focusIndex.value--;
+    } else {
+      focusIndex.value = Math.max(0, props.options.length - 1);
+    }
+    scrollToFocus();
+    return;
+  }
+
+  if (key === 'Enter') {
+    event.preventDefault();
+    if (focusOption.value) {
+      onSelect(focusOption.value);
+    }
+    return;
+  }
+}
+
+// Infinite scroll
+
+onMounted(() => {
+  useInfiniteScroll(
+    dropdown.value,
+    () => {
+      emit('scrollBottom');
+    },
+    { distance: 60 }
+  );
+});
+
+function scrollToFocus() {
+  if (!dropdown.value) {
+    return;
+  }
+
+  if (!optionRefs.value) {
+    return;
+  }
+
+  const option = optionRefs.value[focusIndex.value] ?? null;
+
+  if (!option) {
+    return;
+  }
+
+  const dropdownHeight = dropdown.value.clientHeight;
+  const offsetTop = option.offsetTop;
+  const optionHeight = option.clientHeight;
+
+  dropdown.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
+}
+
+// Validate focus index
+
+watch(
+  () => props.options,
+  () => {
+    focusIndex.value = Math.max(
+      0,
+      Math.min(focusIndex.value, props.options.length - 1)
+    );
+  },
+  { immediate: true }
+);
+
+// Update the focusIndex when the selected value changes
+
+watch(
+  () => props.selected,
+  () => {
+    if (
+      props.selected &&
+      isObject(props.selected) &&
+      !isArray(props.selected)
+    ) {
+      const selected = props.selected as NormalizedOption;
+      const index = props.options.findIndex(
+        (option) => option.value === selected.value
+      );
+      if (index >= 0) {
+        focusIndex.value = index;
+      }
+    } else {
+      focusIndex.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
+// Scroll top when the keywords change
+
+watch(
+  () => props.keywords,
+  () => {
+    if (dropdown.value) {
+      dropdown.value.scrollTop = 0;
+    }
+    // Reset the focusIndex
+    focusIndex.value = 0;
+  }
+);
+
+const onOptionMouseEnter = (index: number) => {
+  if (mouseIsMoving) {
+    focusIndex.value = index;
+  }
+};
+
+const onOptionMouseMove = throttle((index: number) => {
+  mouseIsMoving = true;
+}, 10);
+
+// Classes
+
+const optionClass = (option: NormalizedOption) => {
+  const focus = focusOption.value && focusOption.value.value == option.value;
+
+  if (focus) {
+    return 'bg-slate-200';
+  }
+
+  return 'bg-white';
+};
+
+const optionSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  }
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-sm';
+});
+
+const optionIconClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'w-4 h-4';
+  }
+  if (props.size == 'sm') {
+    return 'w-5 h-5';
+  }
+  return 'w-5 h-5';
+});
+</script>