sprintify-ui 0.0.12 → 0.0.13

package/src/components/BaseTagAutocomplete.stories.js

@@ -0,0 +1,129 @@
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+
+export default {
+  title: 'Form/BaseTagAutocomplete',
+  component: BaseTagAutocomplete,
+  argTypes: {},
+  args: {
+    labelKey: 'label',
+    valueKey: 'value',
+    options: [
+      { label: 'Dark Vader', value: 'dark_vader' },
+      { label: 'Darth Maul', value: 'darth_maul' },
+      { label: 'Dark Sidious', value: 'dark_sidious' },
+    ],
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseTagAutocomplete },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseTagAutocomplete v-model="value" v-bind="args"></BaseTagAutocomplete>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  options: [],
+  disabled: true,
+  modelValue: [{ label: 'Dark Maul', value: '1' }],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseTagAutocomplete },
+  setup() {
+    const value = ref(null);
+
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Green', value: 'green' },
+      { label: 'Black', value: 'black' },
+      { label: 'Gray', value: 'gray' },
+    ];
+
+    return { value, options, args };
+  },
+  template: `
+  <BaseTagAutocomplete
+    v-bind="args"
+    v-model="value"
+    :options="options"
+  >
+    <template #option="{ option, active, selected }">
+      <div
+        class="rounded px-2 font-semibold py-1 text-sm"
+        :class="{
+          'hover:bg-slate-100': !active && !selected,
+          'bg-slate-200 hover:bg-slate-300': active && !selected,
+          'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+          'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+        }"
+        :style="{ color: selected ? '' : option.value }"
+      >
+        {{ option.label }}
+      </div>
+    </template>
+  </BaseTagAutocomplete>
+  `,
+});
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseTagAutocomplete },
+    setup() {
+      const value = ref(null);
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseTagAutocomplete
+      v-model="value"
+      v-bind="args" 
+    >
+      <template #footer>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseTagAutocomplete>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseTagAutocomplete },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocomplete
+      v-model="value"
+      v-bind="args"
+      :options="[]"
+    >
+      <template #empty>
+        <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
+      </template>
+    </BaseTagAutocomplete>
+  `,
+  };
+};

package/src/components/BaseTagAutocomplete.vue

@@ -9,12 +9,19 @@
         >
           <div
             class="flex items-stretch rounded border"
-            :class="selectionClass(selection)"
+            :class="[
+              disabled ? 'cursor-not-allowed opacity-60' : '',
+              selectionClass(selection),
+            ]"
           >
-            <div class="py-[5px] pl-3 pr-1 text-sm">
+            <div
+              class="py-[5px] pl-3 text-sm"
+              :class="[disabled ? 'pr-3' : 'pr-1']"
+            >
               {{ 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))"
@@ -27,6 +34,7 @@
         <div class="grow p-0.5">
           <input
             ref="input"
+            :disabled="disabled"
             :value="keywords"
             type="text"
             :placeholder="$t('sui.select_an_item')"
@@ -44,34 +52,73 @@
     <div class="relative">
       <div
         v-show="showDropdown"
-        class="absolute top-1 z-[1] min-h-[100px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
+        class="absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
       >
-        <ul ref="dropdown" class="max-h-[214px] w-full overflow-y-auto p-1">
-          <li
-            v-for="option in normalizedOptions"
-            :key="option.value"
-            class="block"
-          >
-            <button
-              class="block w-full cursor-pointer appearance-none rounded-sm border-none px-2 py-1 text-left text-sm focus:outline-none"
-              :class="optionClass(option)"
-              type="button"
-              tabindex="-1"
-              @click="dontLooseFocus($event, () => addOption(option))"
-              @mousedown="dontLooseFocus"
+        <div
+          ref="dropdown"
+          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"
             >
-              {{ option.label }}
-            </button>
-          </li>
-        </ul>
+              {{ $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"
+                  :selected="optionValues.includes(option.value)"
+                  :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>
 
-        <slot v-if="normalizedOptions.length == 0" name="empty">
-          <div class="p-5 text-center text-slate-600">
-            {{ $t('sui.nothing_found') }}
+        <div ref="footer">
+          <div v-if="$slots.footer" class="bg-white">
+            <slot :options="filteredNormalizedOptions" name="footer" />
           </div>
-        </slot>
+        </div>
 
-        <BaseLoadingCover :model-value="loading" duration="duration-50" />
+        <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>
     </div>
   </div>
@@ -81,9 +128,9 @@
 import { cloneDeep, get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option, OptionValue } from '@/types/types';
-import { useInfiniteScroll } from '@vueuse/core';
-import BaseLoadingCover from './BaseLoadingCover.vue';
+import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import { useNotificationsStore } from '@/stores/notifications';
+import BaseSkeleton from './BaseSkeleton.vue';
 
 const props = defineProps({
   modelValue: {
@@ -122,13 +169,13 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  min: {
+  max: {
     default: undefined,
     type: Number,
   },
-  max: {
+  filter: {
     default: undefined,
-    type: Number,
+    type: Function as PropType<(option: NormalizedOption) => boolean>,
   },
 });
 
@@ -156,14 +203,14 @@ onMounted(() => {
     () => {
       emit('scrollBottom');
     },
-    { distance: 10 }
+    { distance: 60 }
   );
 });
 
 const optionActive = computed(() => {
   return (
-    normalizedOptions.value[
-      Math.min(selectionIndex.value, normalizedOptions.value.length - 1)
+    filteredNormalizedOptions.value[
+      Math.min(selectionIndex.value, filteredNormalizedOptions.value.length - 1)
     ] ?? null
   );
 });
@@ -182,13 +229,25 @@ const normalizedModelValue = computed(() => {
 }) as ComputedRef<NormalizedOption[]>;
 
 const normalizedOptions = computed(() => {
-  return props.options
-    .map((option) => {
-      return {
-        label: option[props.labelKey] as string,
-        value: option[props.valueKey] as string | number,
-        option: option,
-      } as NormalizedOption;
+  return props.options.map((option) => {
+    return {
+      label: option[props.labelKey] as string,
+      value: option[props.valueKey] as string | number,
+      option: option,
+    } as NormalizedOption;
+  });
+});
+
+const filteredNormalizedOptions = computed((): NormalizedOption[] => {
+  return normalizedOptions.value
+    .filter((option) => {
+      if (props.filter !== undefined) {
+        return props.filter(option);
+      }
+      if (!option.label) {
+        return false;
+      }
+      return option.label.toLowerCase().includes(keywords.value.toLowerCase());
     })
     .filter((option) => {
       return !hasSelectedOption(option.value);
@@ -205,6 +264,15 @@ const hasSelectedOption = (value: OptionValue): boolean => {
   return optionValues.value.includes(value);
 };
 
+function preventUnfocus(elements: HTMLElement[]) {
+  elements.forEach((e) => {
+    e.removeEventListener('mousedown', dontLooseFocus);
+  });
+  elements.forEach((e) => {
+    e.addEventListener('mousedown', dontLooseFocus);
+  });
+}
+
 const dontLooseFocus = (event: Event, next: null | (() => void) = null) => {
   event.preventDefault();
   inputElement.value?.focus();
@@ -274,13 +342,24 @@ const onTextKeydown = (event: KeyboardEvent) => {
 };
 
 const optionClass = (option: NormalizedOption) => {
-  if (normalizedModelValue.value.map((o) => o.value).includes(option.value)) {
-    return 'bg-blue-600 text-white';
+  const active = optionActive.value && optionActive.value.value == option.value;
+  const selected =
+    normalizedModelValue.value &&
+    normalizedModelValue.value.map((o) => o.value).includes(option.value);
+
+  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 (optionActive.value && optionActive.value.value == option.value) {
-    return 'bg-slate-200';
+
+  if (active) {
+    return 'bg-slate-200 hover:bg-slate-300';
   }
-  return 'bg-white hover:bg-slate-200';
+
+  return 'bg-white hover:bg-slate-100';
 };
 
 const selectionClass = (selection: NormalizedOption): string => {
@@ -293,24 +372,18 @@ const selectionClass = (selection: NormalizedOption): string => {
   return 'bg-slate-200 border-slate-300';
 };
 
-const setKeywords = (input: string) => {
-  keywords.value = input;
-  emit('typing', input);
-};
-
-const toggleOption = (option: NormalizedOption) => {
-  if (hasSelectedOption(option.value)) {
-    removeOption(option);
-  } else {
-    addOption(option);
-  }
+const onSelect = (normalizedModelValue: NormalizedOption) => {
+  addOption(normalizedModelValue);
+  inputElement.value?.blur();
 };
 
 const addOption = (option: NormalizedOption) => {
   if (props.max && normalizedModelValue.value.length >= props.max) {
     notifications.push({
       title: i18n.t('sui.whoops'),
-      text: i18n.t('sui.you_cannot_select_more_than_x_items', { x: props.max }),
+      text: i18n.t('sui.you_cannot_select_more_than_x_items', {
+        count: props.max,
+      }),
       color: 'warning',
     });
     return;
@@ -383,4 +456,29 @@ const validateSelectionIndex = () => {
     );
   });
 };
+
+const setKeywords = (input: string) => {
+  keywords.value = input;
+  emit('typing', input);
+};
+
+const footer = ref(null) as Ref<HTMLDivElement | null>;
+
+function preventUnfocusOnFooter() {
+  const elements = (footer.value?.querySelectorAll('button, a') ??
+    []) as HTMLElement[];
+  preventUnfocus(elements);
+}
+
+onMounted(() => {
+  preventUnfocusOnFooter();
+});
+
+useMutationObserver(
+  footer,
+  () => {
+    preventUnfocusOnFooter();
+  },
+  { attributes: false, childList: true }
+);
 </script>

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -0,0 +1,130 @@
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import BaseApp from './BaseApp.vue';
+
+export default {
+  title: 'Form/BaseTagAutocompleteFetch',
+  component: BaseTagAutocompleteFetch,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    labelKey: 'title',
+    valueKey: 'id',
+    disabled: false,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch, BaseApp },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    ></BaseTagAutocompleteFetch>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+    <BaseApp />
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: [{ label: 'Dark Maul', value: '1' }],
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: true,
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseTagAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #option="{ option, active, selected }">
+        <div
+          class="rounded px-2 py-1"
+          :class="{
+            'hover:bg-slate-100': !active && !selected,
+            'bg-slate-200 hover:bg-slate-300': active && !selected,
+            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+          }"
+        >
+          <p class="text-sm font-medium">{{ option.title }}</p>
+          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+        </div>
+      </template>
+    </BaseTagAutocompleteFetch>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseTagAutocompleteFetch>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #empty="props">
+        <div>
+          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
+          <div v-else class="text-center p-6">Start your search... 🔎</div>
+        </div>
+      </template>
+    </BaseTagAutocompleteFetch>
+  `,
+  };
+};