sprintify-ui 0.0.97 → 0.0.100

package/src/components/BaseTagAutocomplete.vue

@@ -1,8 +1,11 @@
 <template>
-  <div>
+  <div ref="autocomplete">
     <div
-      class="min-h-[42px] rounded border bg-white p-1"
-      :class="[hasErrorInternal ? 'border-red-600' : 'border-slate-300']"
+      class="rounded border bg-white p-1"
+      :class="[
+        hasErrorInternal ? 'border-red-600' : 'border-slate-300',
+        wrapperClass,
+      ]"
     >
       <div class="-m-0.5 flex flex-wrap">
         <div
@@ -17,18 +20,14 @@
               selectionClass(selection),
             ]"
           >
-            <div
-              class="py-[5px] pl-3 text-sm"
-              :class="[disabled ? 'pr-3' : 'pr-1']"
-            >
+            <div :class="[selectionLabelClass]">
               {{ selection.label }}
             </div>
             <button
               v-if="!disabled"
               type="button"
               class="flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent pl-1 pr-3 text-xs outline-none"
-              @click="dontLooseFocus($event, () => removeOption(selection))"
-              @mousedown="dontLooseFocus"
+              @click="removeOption(selection)"
             >
               ✕
             </button>
@@ -36,14 +35,15 @@
         </div>
         <div class="grow p-0.5">
           <input
-            ref="input"
-            :disabled="disabled"
+            ref="inputElement"
             :value="keywords"
             type="text"
-            :placeholder="$t('sui.select_an_item')"
-            class="h-[32px] w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
-            @focus="onTextFocus"
-            @blur="onTextBlur"
+            :placeholder="placeholder ? placeholder : $t('sui.select_an_item')"
+            class="w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
+            :class="[inputClass]"
+            autocomplete="off"
+            :disabled="disabled"
+            @click="open"
             @input="onTextInput"
             @keydown="onTextKeydown"
           />
@@ -53,74 +53,34 @@
 
     <div class="relative">
       <div
-        v-show="showDropdown"
-        class="absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
+        v-if="opened || dropdownShow == 'always'"
+        :class="[
+          inline
+            ? '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"
-        >
-          <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="p-1">
-            <li
-              v-for="option 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)"
-                @mousedown.prevent="dontLooseFocus"
-              >
-                <slot
-                  name="option"
-                  :option="option.option"
-                  :active="optionActive && optionActive.value == option.value"
-                >
-                  <div
-                    class="rounded px-2 py-1 text-sm"
-                    :class="optionClass(option)"
-                  >
-                    {{ option.label }}
-                  </div>
-                </slot>
-              </button>
-            </li>
-          </ul>
-        </div>
-
-        <div ref="footer">
-          <div v-if="$slots.footer" class="bg-white">
-            <slot :options="filteredNormalizedOptions" name="footer" />
-          </div>
-        </div>
-
-        <div
-          v-if="loading"
-          class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
+        <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')"
         >
-          <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>
@@ -130,11 +90,14 @@
 import { cloneDeep, get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
-import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
-import { useNotificationsStore } from '@/stores/notifications';
-import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
+import { useClickOutside } from '@/composables/clickOutside';
+import { useNotificationsStore } from '@/stores/notifications';
+import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
+
+const i18n = useI18n();
+const notifications = useNotificationsStore();
 
 const props = defineProps({
   modelValue: {
@@ -165,6 +128,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  loadingBottom: {
+    default: false,
+    type: Boolean,
+  },
   required: {
     default: false,
     type: Boolean,
@@ -185,12 +152,25 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  inline: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+  },
+  dropdownShow: {
+    default: 'focus',
+    type: String as PropType<'focus' | 'always'>,
+  },
 });
 
 const emit = defineEmits([
   'update:modelValue',
   'typing',
-  'focus',
+  'open',
+  'close',
   'scrollBottom',
 ]);
 
@@ -201,17 +181,6 @@ const { hasErrorInternal, emitUpdate } = useField({
   emit: emit,
 });
 
-const i18n = useI18n();
-const notifications = useNotificationsStore();
-
-const timerId = ref(0);
-const keywords = ref('');
-const showDropdown = ref(false);
-const inputElement = ref(null) as Ref<HTMLInputElement | null>;
-const dropdown = ref(null) as Ref<HTMLElement | null>;
-const activeIndex = ref(0);
-const selectionToDelete = ref(null) as Ref<NormalizedOption | null>;
-
 const hasOptions = useHasOptions(
   computed(() => props.modelValue),
   computed(() => props.options),
@@ -220,33 +189,25 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
+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 selectionToDelete = ref(null) as Ref<NormalizedOption | null>;
+
 const isSelected = hasOptions.isSelected;
 const normalizedOptions = hasOptions.normalizedOptions;
 const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<
   NormalizedOption[]
 >;
 
-onMounted(() => {
-  useInfiniteScroll(
-    dropdown.value,
-    () => {
-      emit('scrollBottom');
-    },
-    { distance: 60 }
-  );
-});
-
-const optionActive = computed(() => {
-  return (
-    filteredNormalizedOptions.value[
-      Math.min(activeIndex.value, filteredNormalizedOptions.value.length - 1)
-    ] ?? null
-  );
-});
-
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   return normalizedOptions.value
     .filter((option) => {
+      if (shouldFilter.value === false) {
+        return true;
+      }
       if (props.filter !== undefined) {
         return props.filter(option);
       }
@@ -260,121 +221,61 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
     });
 });
 
-function preventUnfocus(elements: HTMLElement[]) {
-  elements.forEach((e) => {
-    e.removeEventListener('mousedown', dontLooseFocus);
-  });
-  elements.forEach((e) => {
-    e.addEventListener('mousedown', dontLooseFocus);
-  });
-}
+useClickOutside(autocomplete, () => {
+  close();
+});
 
-const dontLooseFocus = (event: Event, next: null | (() => void) = null) => {
-  event.preventDefault();
-  inputElement.value?.focus();
-  if (next) {
-    next();
+function open() {
+  // Always focus as a safety
+  focus();
+  // Only emit open if value changes
+  if (!opened.value) {
+    opened.value = true;
+    emit('open');
   }
-};
-
-const onTextFocus = () => {
-  clearTimeout(timerId.value);
-  showDropdown.value = true;
-  emit('focus');
-};
+}
 
-const onTextBlur = () => {
-  timerId.value = setTimeout(() => {
-    showDropdown.value = false;
-  }, 10);
-};
+function close() {
+  shouldFilter.value = false;
+  opened.value = false;
+  blur();
+  emit('close');
+}
 
 const onTextInput = (event: Event) => {
-  activeIndex.value = 0;
-  selectionToDelete.value = null;
+  open();
+  shouldFilter.value = true;
   setKeywords(get(event, 'target.value', '') + '');
-  dropdown.value?.scrollTo({
-    top: 0,
-  });
+  emit('typing', keywords.value);
+
+  selectionToDelete.value = null;
 };
 
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  if (props.loading) {
-    return;
-  }
-
-  if (key === 'Backspace' && keywords.value == '') {
-    attemptRemoveLastSelection();
-    return;
-  }
-
-  if (key === 'ArrowDown') {
-    if (activeIndex.value < filteredNormalizedOptions.value.length - 1) {
-      activeIndex.value++;
-    } else {
-      activeIndex.value = 0;
-    }
-    return;
-  }
+  // Prevent default behavior for up/down arrows
 
   if (key === 'ArrowUp') {
-    if (activeIndex.value > 0) {
-      activeIndex.value--;
-    } else {
-      activeIndex.value = Math.max(
-        0,
-        filteredNormalizedOptions.value.length - 1
-      );
-    }
+    event.preventDefault();
     return;
   }
 
-  if (key === 'Enter') {
+  if (key === 'ArrowDown') {
     event.preventDefault();
-    if (optionActive.value) {
-      addOption(optionActive.value);
-    }
     return;
   }
-};
-
-const optionClass = (option: NormalizedOption) => {
-  const active = optionActive.value && optionActive.value.value == option.value;
-  const selected = isSelected(option);
-
-  if (selected) {
-    if (active) {
-      return 'bg-blue-600 hover:bg-blue-700 text-white';
-    }
-
-    return 'bg-blue-500 hover:bg-blue-600 text-white';
-  }
 
-  if (active) {
-    return 'bg-slate-200 hover:bg-slate-300';
-  }
-
-  return 'bg-white hover:bg-slate-100';
-};
-
-const selectionClass = (selection: NormalizedOption): string => {
-  if (
-    selectionToDelete.value &&
-    selectionToDelete.value.value == selection.value
-  ) {
-    return 'bg-red-200 border-red-300 text-red-800';
+  // Attempt to remove last selection on backspace
+  if (key === 'Backspace' && keywords.value == '') {
+    attemptRemoveLastSelection();
+    return;
   }
-  return 'bg-slate-200 border-slate-300';
 };
 
-const onSelect = (normalizedModelValue: NormalizedOption) => {
-  addOption(normalizedModelValue);
-  inputElement.value?.blur();
-};
+const onSelect = (option: NormalizedOption) => {
+  focus();
 
-const addOption = (option: NormalizedOption) => {
   if (props.max && normalizedModelValue.value.length >= props.max) {
     notifications.push({
       title: i18n.t('sui.whoops'),
@@ -390,11 +291,37 @@ const addOption = (option: NormalizedOption) => {
     return;
   }
 
-  beforeAddOption();
-
+  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 = () => {
@@ -418,61 +345,65 @@ const attemptRemoveLastSelection = () => {
 };
 
 const removeOption = (option: NormalizedOption) => {
+  focus();
   let newModelValue = cloneDeep(normalizedModelValue.value);
   newModelValue = newModelValue.filter((v) => v.value != option.value);
   update(newModelValue);
 };
 
-function update(value: NormalizedOption[]) {
-  emitUpdate(value.map((v) => v.option));
-  afterUpdate();
-}
-
-const beforeAddOption = () => {
-  selectionToDelete.value = null;
-  clearInput();
-};
-
-const afterUpdate = () => {
-  validateActiveIndex();
-};
+// Element Classes
 
-const clearInput = () => {
-  setKeywords('');
-};
+const wrapperClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'min-h-[34px]';
+  }
+  if (props.size == 'sm') {
+    return 'min-h-[38px]';
+  }
+  return 'min-h-[42px]';
+});
 
-const validateActiveIndex = () => {
-  // Wait for filteredOptions to update
-  nextTick(() => {
-    activeIndex.value = Math.max(
-      0,
-      Math.min(activeIndex.value, filteredNormalizedOptions.value.length - 1)
-    );
-  });
-};
+const inputClass = computed(() => {
+  const base = 'h-[32px] text-base';
+  if (props.size == 'xs') {
+    return base + ' xs:text-xs xs:h-[22px]';
+  }
+  if (props.size == 'sm') {
+    return base + ' xs:text-sm xs:h-[28px]';
+  }
+  return base;
+});
 
-const setKeywords = (input: string) => {
-  keywords.value = input;
-  emit('typing', input);
+const selectionClass = (selection: NormalizedOption): string => {
+  if (
+    selectionToDelete.value &&
+    selectionToDelete.value.value == selection.value
+  ) {
+    return 'bg-red-200 border-red-300 text-red-800';
+  }
+  return 'bg-slate-200 border-slate-300';
 };
 
-const footer = ref(null) as Ref<HTMLDivElement | null>;
-
-function preventUnfocusOnFooter() {
-  const elements = (footer.value?.querySelectorAll('button, a') ??
-    []) as HTMLElement[];
-  preventUnfocus(elements);
-}
-
-onMounted(() => {
-  preventUnfocusOnFooter();
+const selectionLabelClass = computed((): string => {
+  let base = 'py-[5px] pl-[0.75em] text-sm';
+  props.disabled ? (base += ' pr-[0.75em]') : (base += ' pr-1');
+  if (props.size == 'xs') {
+    const classes = base + ' xs:py-[3px] xs:pl-2 xs:text-xs';
+    return classes;
+  }
+  if (props.size == 'sm') {
+    const classes = base + ' xs:py-[3px] xs:pl-2 xs:text-sm';
+    return classes;
+  }
+  const classes = base;
+  return classes;
 });
 
-useMutationObserver(
-  footer,
-  () => {
-    preventUnfocusOnFooter();
-  },
-  { attributes: false, childList: true }
-);
+defineExpose({
+  focus,
+  blur,
+  close,
+  open,
+  setKeywords,
+});
 </script>

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -1,6 +1,6 @@
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, options } from '../../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 
 export default {
@@ -58,7 +58,7 @@ Maximum.args = {
 
 export const SlotOption = (args) => {
   return {
-    components: {},
+    components: { BaseTagAutocompleteFetch },
     setup() {
       const value = ref([]);
       return { args, value };
@@ -91,7 +91,7 @@ export const SlotOption = (args) => {
 
 export const SlotFooter = (args) => {
   return {
-    components: {},
+    components: { BaseTagAutocompleteFetch },
     setup() {
       const value = ref([]);
       function onClick() {
@@ -118,7 +118,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: {},
+    components: { BaseTagAutocompleteFetch },
     setup() {
       const value = ref([]);
       return { args, value };

package/src/components/BaseTagAutocompleteFetch.vue

@@ -1,6 +1,7 @@
 <template>
   <BaseTagAutocomplete
     :loading="showLoading && page == 1"
+    :loading-bottom="showLoading && page > 1"
     :model-value="modelValue"
     :disabled="disabled"
     :placeholder="placeholder"
@@ -10,7 +11,7 @@
     :has-error="hasError"
     :max="max"
     :filter="() => true"
-    @focus="onFocus"
+    @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
     @update:model-value="$emit('update:modelValue', $event)"
@@ -37,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce } from 'lodash';
+import { debounce, throttle } from 'lodash';
 import { config } from '@/index';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
@@ -109,18 +110,22 @@ const onTyping = (query: string) => {
   }
 };
 
-const onFocus = () => {
+const onOpen = () => {
   if (!firstSearch.value) {
     search();
   }
 };
 
-const scrollBottom = () => {
+const scrollBottom = throttle(() => {
+  if (fetching.value) {
+    return;
+  }
+
   if (!reachedEnd.value) {
     page.value++;
     search();
   }
-};
+}, 500);
 
 const search = () => {
   if (fetching.value) {

package/src/composables/clickOutside.ts

@@ -6,7 +6,7 @@ interface UseClickOutsideOptions {
 
 export function useClickOutside(
   element: MaybeElementRef,
-  callback: (outside: boolean) => void,
+  callback: () => void,
   options: UseClickOutsideOptions = {}
 ) {
   function cleanup() {
@@ -44,7 +44,9 @@ export function useClickOutside(
 
     const outside = !contains && !containsIncludes;
 
-    callback(outside);
+    if (outside) {
+      callback();
+    }
   }
 
   const stop = () => {