sprintify-ui 0.0.96 → 0.0.99

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
@@ -29,6 +29,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    loadingBottom: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     required: {
         default: boolean;
         type: BooleanConstructor;
@@ -49,7 +53,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], "update:modelValue" | "focus" | "typing" | "scrollBottom", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    inline: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        default: string;
+        type: PropType<"base" | "xs" | "sm">;
+    };
+    dropdownShow: {
+        default: string;
+        type: PropType<"focus" | "always">;
+    };
+}, {
+    focus: () => void;
+    blur: () => void;
+    close: () => void;
+    open: () => void;
+    setKeywords: (input: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close" | "scrollBottom" | "typing" | "open")[], "update:modelValue" | "close" | "scrollBottom" | "typing" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[] | null>;
@@ -78,6 +100,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    loadingBottom: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     required: {
         default: boolean;
         type: BooleanConstructor;
@@ -98,27 +124,61 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    inline: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        default: string;
+        type: PropType<"base" | "xs" | "sm">;
+    };
+    dropdownShow: {
+        default: string;
+        type: PropType<"focus" | "always">;
+    };
 }>> & {
-    onFocus?: ((...args: any[]) => any) | undefined;
+    onScrollBottom?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
-    onScrollBottom?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
 }, {
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
     name: string;
-    placeholder: string;
     loading: boolean;
+    loadingBottom: boolean;
+    size: "base" | "xs" | "sm";
+    inline: boolean;
+    placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    dropdownShow: "focus" | "always";
     max: number;
 }>, {
-    empty: (_: {}) => any;
+    empty: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: ComputedRef<string>;
+    }) => any;
     option: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: ComputedRef<string>;
         option: Option;
+        selected: boolean;
         active: boolean;
     }) => any;
     footer: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: ComputedRef<string>;
         options: NormalizedOption[];
     }) => any;
 }>;

package/dist/types/src/components/BaseTagAutocompleteFetch.vue.d.ts

@@ -41,7 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "typing" | "scrollBottom")[], "update:modelValue" | "focus" | "typing" | "scrollBottom", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "scrollBottom" | "typing")[], "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[]>;
@@ -84,9 +84,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
+    onScrollBottom?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
-    onScrollBottom?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     placeholder: string;
@@ -96,15 +96,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     max: number;
 }>, {
     option: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: import("vue").ComputedRef<string>;
         option: Option;
+        selected: boolean;
         active: boolean;
     }) => any;
     footer: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: import("vue").ComputedRef<string>;
         options: import("@/types").NormalizedOption[];
     } & {
         keywords: string;
     }) => any;
     empty: (_: {
+        focus: () => void;
+        blur: () => void;
+        open: () => void;
+        close: () => void;
+        keywords: import("vue").ComputedRef<string>;
+    } & {
         firstSearch: boolean;
     }) => any;
 }>;

package/dist/types/src/composables/clickOutside.d.ts

@@ -2,7 +2,7 @@ import { MaybeElementRef } from '@vueuse/core';
 interface UseClickOutsideOptions {
     includes?: MaybeElementRef[];
 }
-export declare function useClickOutside(element: MaybeElementRef, callback: (outside: boolean) => void, options?: UseClickOutsideOptions): {
+export declare function useClickOutside(element: MaybeElementRef, callback: () => void, options?: UseClickOutsideOptions): {
     stop: () => void;
 };
 export {};

package/dist/types/src/index.d.ts

@@ -4,6 +4,7 @@ import { I18n } from 'vue-i18n';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
+import { useClickOutside } from './composables/clickOutside';
 declare const messages: {
     en: {
         sui: {
@@ -294,3 +295,4 @@ export { config };
 export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
+export { useClickOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.96",
+  "version": "0.0.99",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -58,7 +58,7 @@
     "@types/scroll-lock": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vueup/vue-quill": "^1.0.0",
     "@vueuse/core": "^9.5.0",
@@ -80,10 +80,10 @@
     "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",
     "pinia": "^2.0.23",
-    "postcss": "^8.4.19",
-    "postcss-import": "^15.0.0",
+    "postcss": "^8.4.20",
+    "postcss-import": "^15.1.0",
     "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "qs": "^6.11.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -91,14 +91,14 @@
     "storybook-addon-mock": "^3.2.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.4.4",
-    "unplugin-auto-import": "^0.11.4",
-    "vite": "^3.2.4",
+    "unplugin-auto-import": "^0.12.1",
+    "vite": "^4.0.0",
     "vitepress": "^0.21.6",
-    "vue": "^3.2.25",
+    "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
-    "vue-loader": "^16.8.3",
+    "vue-loader": "^17.0.1",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.9"
+    "vue-tsc": "^1.0.18"
   },
   "files": [
     "src",

package/src/assets/main.css

@@ -1,4 +1,3 @@
-@import './pikaday.css';
 @import 'microtip/microtip.css';
 @import './form.css';
 

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,