sprintify-ui 0.0.76 → 0.0.78

package/src/components/BaseAutocomplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="autocomplete">
     <div class="relative">
       <div class="relative">
         <input
@@ -9,27 +9,38 @@
           :placeholder="
             placeholder ? placeholder : $t('sui.autocomplete_placeholder')
           "
-          class="w-full rounded pl-9 disabled:cursor-not-allowed disabled:text-slate-300"
-          :class="[hasErrorInternal ? 'border-red-600' : 'border-slate-300']"
+          class="w-full rounded disabled:cursor-not-allowed disabled:text-slate-300"
+          :class="[
+            hasErrorInternal ? 'border-red-600' : 'border-slate-300',
+            inputClass,
+            !visibleFocus
+              ? [
+                  'focus:ring-0',
+                  hasErrorInternal
+                    ? 'focus:border-red-600'
+                    : 'focus:border-slate-300',
+                ]
+              : '',
+          ]"
           autocomplete="off"
           :disabled="disabled"
-          @focus="onTextFocus"
-          @blur="onTextBlur"
           @input="onTextInput"
           @keydown="onTextKeydown"
         />
         <div
-          class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+          class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center"
+          :class="[iconWrapClass]"
         >
           <BaseIcon
-            class="h-5 w-5 text-slate-400"
+            class="text-slate-400"
+            :class="[iconClass]"
             icon="heroicons:magnifying-glass-solid"
           />
         </div>
       </div>
 
       <div
-        v-if="normalizedModelValue && !disabled"
+        v-if="normalizedModelValue && !disabled && modelValueShow"
         class="absolute top-0 right-0 flex h-full items-center p-1"
       >
         <button
@@ -39,7 +50,8 @@
         >
           <BaseIcon
             icon="heroicons:x-mark"
-            class="h-5 w-5 text-slate-500 group-hover:text-slate-700"
+            class="text-slate-500 group-hover:text-slate-700"
+            :class="[iconClass]"
           />
         </button>
       </div>
@@ -47,8 +59,13 @@
 
     <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-show="opened || dropdownShow == 'always'"
+        class="min-h-[110px] w-full overflow-hidden"
+        :class="[
+          inline
+            ? 'relative'
+            : 'absolute top-1 z-menu rounded border border-slate-300 bg-white shadow-md',
+        ]"
       >
         <div
           ref="dropdown"
@@ -62,9 +79,9 @@
             </div>
           </slot>
 
-          <ul v-else class="p-1">
+          <ul v-else :class="[inline ? 'p-0 pt-1' : 'p-1']">
             <li
-              v-for="option in filteredNormalizedOptions"
+              v-for="(option, index) in filteredNormalizedOptions"
               :key="option.value"
               class="block"
             >
@@ -73,7 +90,7 @@
                 type="button"
                 tabindex="-1"
                 @click="onSelect(option)"
-                @mousedown.prevent="dontLooseFocus"
+                @mouseenter="selectionIndex = index"
               >
                 <slot
                   name="option"
@@ -82,10 +99,19 @@
                   :active="optionActive && optionActive.value == option.value"
                 >
                   <div
-                    class="rounded px-2 py-1 text-sm"
-                    :class="optionClass(option)"
+                    class="flex items-center rounded px-2 py-1 text-sm"
+                    :class="[optionClass(option), optionSizeClass]"
                   >
-                    {{ option.label }}
+                    <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>
@@ -93,12 +119,11 @@
           </ul>
         </div>
 
-        <div ref="footer">
+        <div>
           <div v-if="$slots.footer" class="bg-white">
             <slot
               :options="filteredNormalizedOptions"
               :keywords="keywords"
-              :hide-dropdown="hideDropdown"
               name="footer"
             />
           </div>
@@ -129,7 +154,7 @@
 import { get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
-import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
+import { useInfiniteScroll } from '@vueuse/core';
 import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
@@ -180,14 +205,37 @@ 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'>,
+  },
+  modelValueShow: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([
   'update:modelValue',
   'typing',
+  'blur',
   'focus',
   'scrollBottom',
   'clear',
+  'open',
+  'close',
 ]);
 
 const { hasErrorInternal, emitUpdate } = useField({
@@ -197,12 +245,14 @@ const { hasErrorInternal, emitUpdate } = useField({
   emit: emit,
 });
 
-const timerId = ref(0);
+let timerId = 0;
 const keywords = ref('');
-const showDropdown = ref(false);
 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),
@@ -217,16 +267,6 @@ const normalizedOptions = hasOptions.normalizedOptions;
 const normalizedModelValue =
   hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
 
-onMounted(() => {
-  useInfiniteScroll(
-    dropdown.value,
-    () => {
-      emit('scrollBottom');
-    },
-    { distance: 60 }
-  );
-});
-
 const optionActive = computed(() => {
   return (
     filteredNormalizedOptions.value[
@@ -239,16 +279,22 @@ const optionActive = computed(() => {
 watch(
   () => normalizedModelValue.value,
   () => {
+    if (props.modelValueShow === false) {
+      return;
+    }
     if (normalizedModelValue.value) {
-      keywords.value = normalizedModelValue.value?.label;
+      setKeywords(normalizedModelValue.value?.label);
     } else {
-      keywords.value = '';
+      setKeywords('');
     }
   },
   { immediate: true }
 );
 
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
+  if (shouldFilter.value === false) {
+    return normalizedOptions.value;
+  }
   return normalizedOptions.value.filter((option) => {
     if (props.filter !== undefined) {
       return props.filter(option);
@@ -260,40 +306,69 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   });
 });
 
-function preventUnfocus(elements: HTMLElement[]) {
-  elements.forEach((e) => {
-    e.removeEventListener('mousedown', dontLooseFocus);
-  });
-  elements.forEach((e) => {
-    e.addEventListener('mousedown', dontLooseFocus);
-  });
-}
+onMounted(() => {
+  window.addEventListener('mousedown', onMouseDown);
+});
 
-const dontLooseFocus = (event: Event) => {
-  inputElement.value?.focus();
-  event.preventDefault();
-};
+onBeforeMount(() => {
+  window.removeEventListener('mousedown', onMouseDown);
+});
 
-const onTextFocus = () => {
-  clearTimeout(timerId.value);
-  showDropdown.value = true;
-  emit('focus');
-};
+function onMouseDown(event: MouseEvent) {
+  if (!autocomplete.value) {
+    return;
+  }
 
-// If keywords is changed but no new selection was made,
-// update keywords to original value
-const onTextBlur = () => {
-  timerId.value = setTimeout(() => {
-    showDropdown.value = false;
-    if (normalizedModelValue.value) {
-      setKeywordsWithoutEvent(normalizedModelValue.value.label);
+  // Get the element that was clicked
+  const clickedElement = event.target as HTMLElement | null;
+
+  if (!clickedElement) {
+    return;
+  }
+
+  // If the element that was not clicked on the input,
+  // prevent default
+  if (clickedElement !== inputElement.value) {
+    event.preventDefault();
+  }
+
+  // `el` is the element you're detecting clicks outside of
+  if (autocomplete.value.contains(clickedElement)) {
+    open();
+  } else {
+    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() {
+  opened.value = false;
+  blur();
+  timerId = setTimeout(() => {
+    // If no valid modelValue is set on close, set the keywords to the original value
+    if (props.modelValueShow && normalizedModelValue.value) {
+      setKeywords(normalizedModelValue.value.label);
     }
   }, 10);
-};
+  emit('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,
   });
@@ -311,6 +386,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 
   if (key === 'ArrowDown') {
+    event.preventDefault();
     if (selectionIndex.value < filteredNormalizedOptions.value.length - 1) {
       selectionIndex.value++;
     } else {
@@ -320,6 +396,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 
   if (key === 'ArrowUp') {
+    event.preventDefault();
     if (selectionIndex.value > 0) {
       selectionIndex.value--;
     } else {
@@ -340,74 +417,112 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 };
 
-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';
-    }
+const clear = () => {
+  update(null);
+  emit('clear');
+};
 
-    return 'bg-blue-500 hover:bg-blue-600 text-white';
+function onSelect(normalizedModelValue: Option | null | undefined) {
+  focus();
+  update(normalizedModelValue);
+  if (props.dropdownShow == 'focus') {
+    close();
   }
+}
 
-  if (active) {
-    return 'bg-slate-200 hover:bg-slate-300';
+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;
   }
+  shouldFilter.value = false;
+  emitUpdate(selection);
+}
 
-  return 'bg-white hover:bg-slate-100';
-};
+function setKeywords(input: string) {
+  keywords.value = input;
+}
 
-const clear = () => {
-  emit('clear');
-  setKeywordsWithoutEvent('');
-  update(null);
+function focus() {
   inputElement.value?.focus();
-};
-
-const onSelect = (normalizedModelValue: Option | null | undefined) => {
-  update(normalizedModelValue);
-};
+}
 
-function hideDropdown() {
+function blur() {
   inputElement.value?.blur();
 }
 
-const update = (normalizedSelection: Option | null | undefined) => {
-  const selection = normalizedSelection ? normalizedSelection.option : null;
-  if (normalizedSelection) {
-    setKeywordsWithoutEvent(normalizedSelection.label);
+// Element Classes
+
+const optionClass = (option: NormalizedOption) => {
+  const active = optionActive.value && optionActive.value.value == option.value;
+
+  if (active) {
+    return 'bg-slate-200';
   }
-  emitUpdate(selection);
-};
 
-const setKeywordsWithoutEvent = (input: string) => {
-  keywords.value = input;
+  return 'bg-white';
 };
 
-const setKeywords = (input: string) => {
-  keywords.value = input;
-  emit('typing', input);
-};
+const optionSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  }
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-sm';
+});
+
+const inputClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs:text-xs xs:pl-7 text-base pl-9';
+  }
+  if (props.size == 'sm') {
+    return 'xs:text-sm xs:pl-8 text-base pl-9';
+  }
+  return 'text-base pl-9';
+});
 
-const footer = ref(null) as Ref<HTMLDivElement | null>;
+const iconClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs:h-4 xs:w-4 h-5 w-5';
+  }
+  if (props.size == 'sm') {
+    return 'xs:h-5 xs:w-5 h-5 w-5';
+  }
+  return 'h-5 w-5';
+});
 
-function preventUnfocusOnFooter() {
-  const elements = (footer.value?.querySelectorAll('button, a') ??
-    []) as HTMLElement[];
-  preventUnfocus(elements);
-}
+const iconWrapClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs:pl-2 pl-2.5';
+  }
+  if (props.size == 'sm') {
+    return 'xs:pl-2 pl-2.5';
+  }
+  return 'pl-2.5';
+});
+
+// Infinite scroll
 
 onMounted(() => {
-  preventUnfocusOnFooter();
+  useInfiniteScroll(
+    dropdown.value,
+    () => {
+      emit('scrollBottom');
+    },
+    { distance: 60 }
+  );
 });
 
-useMutationObserver(
-  footer,
-  () => {
-    preventUnfocusOnFooter();
-  },
-  { attributes: false, childList: true, subtree: true }
-);
+defineExpose({
+  focus,
+  blur,
+  close,
+  open,
+  setKeywords,
+});
 </script>

package/src/components/BaseAutocompleteFetch.stories.js

@@ -3,9 +3,19 @@ import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { options } from '@/../.storybook/utils';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'base'];
+
 export default {
   title: 'Form/BaseAutocompleteFetch',
   component: BaseAutocompleteFetch,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
@@ -29,6 +39,17 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: 'always',
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   labelKey: 'label',
@@ -37,6 +58,25 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const Sizes = (args) => ({
+  components: { BaseAutocompleteFetch },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseAutocompleteFetch v-model="value" v-bind="args" :size="size"></BaseAutocompleteFetch>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => {
   return {
     components: { BaseAutocompleteFetch },

package/src/components/BaseAutocompleteFetch.vue

@@ -10,9 +10,15 @@
     :value-key="valueKey"
     :label-key="labelKey"
     :has-error="hasError"
+    :required="required"
+    :size="size"
+    :inline="inline"
+    :dropdown-show="dropdownShow"
+    :model-value-show="modelValueShow"
+    :visible-focus="visibleFocus"
     :filter="() => true"
     @clear="onClear"
-    @focus="onFocus"
+    @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
     @update:model-value="$emit('update:modelValue', $event)"
@@ -45,6 +51,15 @@ import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
+/**
+ * Behavior notes
+ *
+ * - When the user types, the component will fetch the data from the API.
+ * - When the user scrolls to the bottom, the component will fetch the next page.
+ * - When the user clears the input, the component will NOT re-fetch the data if the current query is already empty.
+ * - When a value is selected, the component will NOT re-fetch the data.
+ */
+
 const props = defineProps({
   modelValue: {
     default: undefined,
@@ -86,6 +101,26 @@ 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'>,
+  },
+  modelValueShow: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([
@@ -112,15 +147,17 @@ const onTyping = (query: string) => {
   debouncedSearch();
 };
 
-const onFocus = () => {
+const onOpen = () => {
   if (!firstSearch.value) {
     search();
   }
 };
 
 const onClear = () => {
-  keywords.value = '';
-  search();
+  if (keywords.value != '') {
+    keywords.value = '';
+    search();
+  }
   emit('clear');
 };
 
@@ -131,7 +168,7 @@ const scrollBottom = () => {
   }
 };
 
-const search = () => {
+function search() {
   if (fetching.value) {
     return;
   }
@@ -165,7 +202,7 @@ const search = () => {
       fetching.value = false;
       showLoading.value = false;
     });
-};
+}
 
 const debouncedSearch = debounce(() => {
   search();