sprintify-ui 0.0.0

package/src/components/BaseAutocomplete.vue

@@ -0,0 +1,376 @@
+<template>
+  <div>
+    <div class="relative">
+      <div class="relative">
+        <input
+          ref="inputElement"
+          :value="keywords"
+          type="text"
+          :class="inputClass + ' pl-9'"
+          :placeholder="
+            placeholder ? placeholder : $t('sui.autocomplete_placeholder')
+          "
+          class="rounded disabled:cursor-not-allowed disabled:text-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"
+        >
+          <Icon
+            class="h-5 w-5 text-slate-400"
+            icon="heroicons:magnifying-glass-solid"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="normalizedModelValue && !disabled"
+        class="absolute top-0 right-0 flex h-full items-center p-1"
+      >
+        <button
+          type="button"
+          class="group flex h-full items-center rounded p-1.5 enabled:hover:bg-slate-100"
+          @click="clear()"
+        >
+          <Icon
+            icon="heroicons:x-mark"
+            class="h-5 w-5 text-slate-500 group-hover:text-slate-700"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div class="relative">
+      <div
+        v-show="showDropdown"
+        class="absolute top-1 z-[1] min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
+      >
+        <div ref="dropdown" class="max-h-[214px] w-full overflow-y-auto p-1">
+          <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>
+            <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="dontLooseFocus"
+              >
+                <slot
+                  name="option"
+                  :option="option.option"
+                  :selected="
+                    normalizedModelValue &&
+                    normalizedModelValue.value == 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>
+
+          <slot
+            :options="filteredNormalizedOptions"
+            :dont-loose-focus="dontLooseFocus"
+            name="footer"
+          />
+        </div>
+
+        <Transition>
+          <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>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { get } from 'lodash';
+import { PropType, Ref } from 'vue';
+import {
+  NormalizedOption,
+  Option,
+  Selection,
+  NormalizedSelection,
+} from '@/types/types';
+import { useInfiniteScroll } from '@vueuse/core';
+import BaseSkeleton from './BaseSkeleton.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [Object, null, undefined] as PropType<Selection>,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  inputClass: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  filter: {
+    default: undefined,
+    type: Function as PropType<(option: NormalizedOption) => boolean>,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'typing',
+  'focus',
+  'scrollBottom',
+  'clear',
+]);
+
+const timerId = ref(0);
+const keywords = ref('');
+const showDropdown = ref(false);
+const selectionIndex = ref(0);
+const inputElement = ref(null) as Ref<HTMLInputElement | null>;
+const dropdown = ref(null) as Ref<HTMLElement | null>;
+
+onMounted(() => {
+  useInfiniteScroll(
+    dropdown.value,
+    () => {
+      emit('scrollBottom');
+    },
+    { distance: 10 }
+  );
+});
+
+const optionActive = computed(() => {
+  return (
+    filteredNormalizedOptions.value[
+      Math.min(selectionIndex.value, filteredNormalizedOptions.value.length - 1)
+    ] ?? null
+  );
+});
+
+const normalizedModelValue = computed(() => {
+  if (!props.modelValue) {
+    return null;
+  }
+  return {
+    label: props.modelValue[props.labelKey] as string,
+    value: props.modelValue[props.valueKey] as string | number,
+    option: props.modelValue,
+  };
+});
+
+watch(
+  () => normalizedModelValue.value,
+  () => {
+    if (normalizedModelValue.value) {
+      keywords.value = normalizedModelValue.value?.label;
+    } else {
+      keywords.value = '';
+    }
+  },
+  { immediate: true }
+);
+
+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;
+  });
+});
+
+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());
+  });
+});
+
+const dontLooseFocus = (event: Event, next: null | (() => void) = null) => {
+  event.preventDefault();
+  inputElement.value?.focus();
+  if (next) {
+    next();
+  }
+};
+
+const onTextFocus = () => {
+  clearTimeout(timerId.value);
+  showDropdown.value = true;
+  emit('focus');
+};
+
+const onTextBlur = () => {
+  timerId.value = setTimeout(() => {
+    showDropdown.value = false;
+    if (normalizedModelValue.value) {
+      setKeywordsWithoutEvent(normalizedModelValue.value.label);
+    }
+  }, 10);
+};
+
+const onTextInput = (event: Event) => {
+  selectionIndex.value = 0;
+  setKeywords(get(event, 'target.value') + '');
+  dropdown.value?.scrollTo({
+    top: 0,
+  });
+
+  if (keywords.value == '') {
+    update(null);
+  }
+};
+
+const onTextKeydown = (event: KeyboardEvent) => {
+  const key = event.key;
+
+  if (props.loading) {
+    return;
+  }
+
+  if (key === 'ArrowDown') {
+    if (selectionIndex.value < props.options.length - 1) {
+      selectionIndex.value++;
+    } else {
+      selectionIndex.value = 0;
+    }
+    return;
+  }
+
+  if (key === 'ArrowUp') {
+    if (selectionIndex.value > 0) {
+      selectionIndex.value--;
+    } else {
+      selectionIndex.value = Math.max(0, props.options.length - 1);
+    }
+    return;
+  }
+
+  if (key === 'Enter') {
+    event.preventDefault();
+    if (optionActive.value) {
+      onSelect(optionActive.value);
+    }
+    return;
+  }
+};
+
+const optionClass = (option: NormalizedOption) => {
+  const active = optionActive.value && optionActive.value.value == option.value;
+  const selected =
+    normalizedModelValue.value &&
+    normalizedModelValue.value.value == 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 (active) {
+    return 'bg-slate-200 hover:bg-slate-300';
+  }
+
+  return 'bg-white hover:bg-slate-100';
+};
+
+const clear = () => {
+  emit('clear');
+  setKeywordsWithoutEvent('');
+  update(null);
+  inputElement.value?.focus();
+};
+
+const onSelect = (normalizedModelValue: NormalizedSelection) => {
+  update(normalizedModelValue);
+  inputElement.value?.blur();
+};
+
+const update = (normalizedSelection: NormalizedSelection) => {
+  const selection = normalizedSelection ? normalizedSelection.option : null;
+  if (normalizedSelection) {
+    setKeywordsWithoutEvent(normalizedSelection.label);
+  }
+  emit('update:modelValue', selection);
+};
+
+const setKeywordsWithoutEvent = (input: string) => {
+  keywords.value = input;
+};
+
+const setKeywords = (input: string) => {
+  keywords.value = input;
+  emit('typing', input);
+};
+</script>

package/src/components/BaseAutocompleteFetch.stories.js

@@ -0,0 +1,121 @@
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+
+export default {
+  title: 'Form/BaseAutocompleteFetch',
+  component: BaseAutocompleteFetch,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    labelKey: 'title',
+    valueKey: 'id',
+    inputClass: 'w-full border-slate-300',
+    disabled: false,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseAutocompleteFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    ></BaseAutocompleteFetch>
+    <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 = {
+  modelValue: { label: 'Dark Maul', value: '1' },
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: true,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseAutocompleteFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseAutocompleteFetch
+      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>
+    </BaseAutocompleteFetch>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseAutocompleteFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-1 pt-2 mt-2 border-t">
+          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseAutocompleteFetch>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseAutocompleteFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseAutocompleteFetch
+      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>
+    </BaseAutocompleteFetch>
+  `,
+  };
+};

package/src/components/BaseAutocompleteFetch.vue

@@ -0,0 +1,185 @@
+<template>
+  <BaseAutocomplete
+    ref="input"
+    :loading="showLoading && page == 1"
+    :model-value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :options="options"
+    :value-key="valueKey"
+    :label-key="labelKey"
+    :input-class="inputClass"
+    :filter="() => true"
+    @clear="onClear"
+    @focus="onFocus"
+    @typing="onTyping"
+    @scroll-bottom="scrollBottom"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps" :keywords="keywords">
+        <div v-if="createNewUrl" class="p-2">
+          <router-link
+            :to="createNewUrl"
+            target="_blank"
+            class="btn flex items-center justify-center font-normal shadow"
+            @mousedown="footerProps.dontLooseFocus"
+          >
+            <Icon icon="heroicons-solid:plus" class="mr-1.5 block h-5 w-5" />
+            <span>{{ $t('sui.create_new') }}</span>
+          </router-link>
+        </div>
+      </slot>
+    </template>
+
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+        <div
+          v-if="firstSearch"
+          class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
+        >
+          {{ $t('sui.nothing_found') }}
+        </div>
+      </slot>
+    </template>
+  </BaseAutocomplete>
+</template>
+
+<script lang="ts" setup>
+import { config } from '../';
+import { debounce } from 'lodash';
+import { PropType, Ref } from 'vue';
+import { Option, Selection } from '@/types/types';
+import { RouteLocationRaw } from 'vue-router';
+import BaseAutocomplete from './BaseAutocomplete.vue';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [Object, null, undefined] as PropType<Selection>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  inputClass: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  createNewUrl: {
+    default: '',
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'typing',
+  'focus',
+  'scrollBottom',
+  'clear',
+]);
+
+const showLoading = ref(false);
+const fetching = ref(false);
+const firstSearch = ref(false);
+const reachedEnd = ref(false);
+const keywords = ref('');
+const page = ref(1);
+const options = ref([]) as Ref<Option[]>;
+
+const onTyping = (query: string) => {
+  page.value = 1;
+  reachedEnd.value = false;
+  keywords.value = query;
+  showLoading.value = true;
+  debouncedSearch();
+};
+
+const onFocus = () => {
+  if (!firstSearch.value) {
+    search();
+  }
+};
+
+const onClear = () => {
+  keywords.value = '';
+  search();
+  emit('clear');
+};
+
+const scrollBottom = () => {
+  if (!reachedEnd.value) {
+    page.value++;
+    search();
+  }
+};
+
+const search = () => {
+  if (fetching.value) {
+    return;
+  }
+
+  fetching.value = true;
+  showLoading.value = true;
+
+  config.http
+    .get(props.url, {
+      params: {
+        [props.queryKey]: keywords.value,
+        page: page.value,
+      },
+    })
+    .then((response: any) => {
+      const data = response.data.data as Option[];
+
+      if (data.length == 0) {
+        reachedEnd.value = true;
+      }
+
+      if (page.value == 1) {
+        options.value = data;
+      } else {
+        options.value.push(...data);
+      }
+
+      firstSearch.value = true;
+    })
+    .finally(() => {
+      fetching.value = false;
+      showLoading.value = false;
+    });
+};
+
+const debouncedSearch = debounce(() => {
+  search();
+}, 300);
+</script>

package/src/components/BaseAvatar.stories.js

@@ -0,0 +1,39 @@
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseAvatar',
+  component: BaseAvatar,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+    },
+    detailsPosition: {
+      control: { type: 'select' },
+      options: ['left', 'right'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAvatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseAvatar v-bind="args"></BaseAvatar>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  showDetails: true,
+  user: {
+    email: 'jane@witify.io',
+    first_name: 'Jane',
+    last_name: 'Doe',
+    full_name: 'Jane Doe',
+    avatar_thumbnail_url:
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+  },
+};