sprintify-ui 0.0.0

package/src/components/BaseTableColumn.vue

@@ -0,0 +1,109 @@
+<script lang="ts">
+import { defineComponent, h, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'BaseTableColumn',
+  props: {
+    label: {
+      default: '',
+      type: String,
+    },
+    customKey: {
+      default: '',
+      type: [String, Number],
+    },
+    field: {
+      default: '',
+      type: String,
+    },
+    meta: {
+      default: undefined,
+      type: [Object, Array],
+    },
+    width: {
+      default: undefined,
+      type: Number,
+    },
+    numeric: {
+      default: false,
+      type: Boolean,
+    },
+    position: {
+      default: 'left',
+      type: String as PropType<'left' | 'center' | 'right'>,
+    },
+    searchable: {
+      default: false,
+      type: Boolean,
+    },
+    sortable: {
+      default: false,
+      type: Boolean,
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    alwaysVisible: {
+      type: Boolean,
+      default: false,
+    },
+    optional: {
+      type: Boolean,
+      default: false,
+    },
+    customSort: {
+      default: undefined,
+      type: Function,
+    },
+    customSearch: {
+      default: undefined,
+      type: Function,
+    },
+    /** Adds native attributes to th :th-attrs="(column)" => ({})" */
+    thAttrs: {
+      type: Function,
+      default: () => ({}),
+    },
+    /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
+    tdAttrs: {
+      type: Function,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const nextSequence = inject('nextSequence') as any;
+    const addColumn = inject('addColumn') as any;
+    const removeColumn = inject('removeColumn') as any;
+
+    return {
+      nextSequence,
+      addColumn,
+      removeColumn,
+    };
+  },
+  data() {
+    return {
+      newKey: undefined,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        width: this.width ? this.width + 'px' : undefined,
+      };
+    },
+  },
+  created() {
+    this.newKey = this.nextSequence();
+    this.addColumn(this);
+  },
+  beforeUnmount() {
+    this.removeColumn(this);
+  },
+  render() {
+    // render-less
+    return h('span', { 'data-id': this.newKey }, this.label);
+  },
+});
+</script>

package/src/components/BaseTabs.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="relative">
+    <div class="absolute bottom-0 left-0 h-[2px] w-full bg-slate-300" />
+    <div class="overflow-x-auto overflow-y-hidden">
+      <ul class="flex space-x-2 text-center text-sm font-medium">
+        <slot />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>

package/src/components/BaseTagAutocomplete.vue

@@ -0,0 +1,385 @@
+<template>
+  <div>
+    <div class="min-h-[42px] rounded border border-slate-300 p-1">
+      <div class="-m-0.5 flex flex-wrap">
+        <div
+          v-for="selection in normalizedModelValue"
+          :key="selection.value"
+          class="p-0.5"
+        >
+          <div
+            class="flex items-stretch rounded border"
+            :class="selectionClass(selection)"
+          >
+            <div class="py-[5px] pl-3 pr-1 text-sm">
+              {{ selection.label }}
+            </div>
+            <button
+              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"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+        <div class="grow p-0.5">
+          <input
+            ref="input"
+            :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"
+            :class="inputClass"
+            @focus="onTextFocus"
+            @blur="onTextBlur"
+            @input="onTextInput"
+            @keydown="onTextKeydown"
+          />
+        </div>
+      </div>
+    </div>
+
+    <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"
+      >
+        <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"
+            >
+              {{ option.label }}
+            </button>
+          </li>
+        </ul>
+
+        <slot v-if="normalizedOptions.length == 0" name="empty">
+          <div class="p-5 text-center text-slate-600">
+            {{ $t('sui.nothing_found') }}
+          </div>
+        </slot>
+
+        <BaseLoadingCover :model-value="loading" duration="duration-50" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, get } from 'lodash';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { NormalizedOption, Option, OptionValue } from '@/types/types';
+import { useInfiniteScroll } from '@vueuse/core';
+import { useNotificationsStore } from '../../stores/notifications';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  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,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'typing',
+  'focus',
+  'scrollBottom',
+]);
+
+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 selectionIndex = ref(0);
+const selectionToDelete = ref(null) as Ref<NormalizedOption | null>;
+
+onMounted(() => {
+  useInfiniteScroll(
+    dropdown.value,
+    () => {
+      emit('scrollBottom');
+    },
+    { distance: 10 }
+  );
+});
+
+const optionActive = computed(() => {
+  return (
+    normalizedOptions.value[
+      Math.min(selectionIndex.value, normalizedOptions.value.length - 1)
+    ] ?? null
+  );
+});
+
+const normalizedModelValue = computed(() => {
+  if (!props.modelValue) {
+    return [];
+  }
+  return props.modelValue.map((o) => {
+    return {
+      label: o[props.labelKey] as string,
+      value: o[props.valueKey] as string | number,
+      option: o,
+    };
+  });
+}) 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;
+    })
+    .filter((option) => {
+      return !hasSelectedOption(option.value);
+    });
+});
+
+const optionValues = computed(() => {
+  return normalizedModelValue.value.map((o) => {
+    return o.value;
+  });
+});
+
+const hasSelectedOption = (value: OptionValue): boolean => {
+  return optionValues.value.includes(value);
+};
+
+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;
+  }, 10);
+};
+
+const onTextInput = (event: Event) => {
+  selectionIndex.value = 0;
+  selectionToDelete.value = null;
+  setKeywords(get(event, 'target.value', '') + '');
+  dropdown.value?.scrollTo({
+    top: 0,
+  });
+};
+
+const onTextKeydown = (event: KeyboardEvent) => {
+  const key = event.key;
+
+  if (props.loading) {
+    return;
+  }
+
+  if (key === 'Backspace' && keywords.value == '') {
+    attemptRemoveLastSelection();
+    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) {
+      addOption(optionActive.value);
+    }
+    return;
+  }
+};
+
+const optionClass = (option: NormalizedOption) => {
+  if (normalizedModelValue.value.map((o) => o.value).includes(option.value)) {
+    return 'bg-blue-600 text-white';
+  }
+  if (optionActive.value && optionActive.value.value == option.value) {
+    return 'bg-slate-200';
+  }
+  return 'bg-white hover:bg-slate-200';
+};
+
+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 setKeywords = (input: string) => {
+  keywords.value = input;
+  emit('typing', input);
+};
+
+const toggleOption = (option: NormalizedOption) => {
+  if (hasSelectedOption(option.value)) {
+    removeOption(option);
+  } else {
+    addOption(option);
+  }
+};
+
+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 }),
+      color: 'warning',
+    });
+    return;
+  }
+
+  if (hasSelectedOption(option.value)) {
+    return;
+  }
+
+  beforeAddOption();
+
+  emitUpdate([...normalizedModelValue.value, option]);
+
+  setKeywords('');
+};
+
+const attemptRemoveLastSelection = () => {
+  const optionValueToDelete =
+    normalizedModelValue.value[normalizedModelValue.value.length - 1] ?? null;
+
+  if (
+    selectionToDelete.value &&
+    optionValueToDelete &&
+    optionValueToDelete.value == selectionToDelete.value.value
+  ) {
+    removeOption(selectionToDelete.value);
+    selectionToDelete.value = null;
+    return;
+  }
+
+  selectionToDelete.value =
+    normalizedModelValue.value.find((v) => {
+      return v.value === optionValueToDelete.value;
+    }) ?? null;
+};
+
+const removeOption = (option: NormalizedOption) => {
+  let newModelValue = cloneDeep(normalizedModelValue.value);
+  newModelValue = newModelValue.filter((v) => v.value != option.value);
+  emitUpdate(newModelValue);
+};
+
+const emitUpdate = (value: NormalizedOption[]) => {
+  emit(
+    'update:modelValue',
+    value.map((v) => v.option)
+  );
+  afterUpdate();
+};
+
+const beforeAddOption = () => {
+  selectionToDelete.value = null;
+  clearInput();
+};
+
+const afterUpdate = () => {
+  validateSelectionIndex();
+};
+
+const clearInput = () => {
+  setKeywords('');
+};
+
+const validateSelectionIndex = () => {
+  // Wait for filteredOptions to update
+  nextTick(() => {
+    selectionIndex.value = Math.max(
+      0,
+      Math.min(selectionIndex.value, normalizedOptions.value.length - 1)
+    );
+  });
+};
+</script>

package/src/components/BaseTagAutocompleteFetch.vue

@@ -0,0 +1,154 @@
+<template>
+  <BaseTagAutocomplete
+    :loading="loading && page == 1"
+    :model-value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :options="options"
+    :value-key="valueKey"
+    :label-key="labelKey"
+    :input-class="inputClass"
+    :min="min"
+    :max="max"
+    @focus="onFocus"
+    @typing="onTyping"
+    @scroll-bottom="scrollBottom"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #empty>
+      <div class="p-5 text-center text-slate-600">
+        <span v-if="firstSearch">
+          {{ $t('sui.nothing_found') }}
+        </span>
+        <span v-else>
+          {{ $t('sui.autocomplete_placeholder') }}
+        </span>
+      </div>
+    </template>
+  </BaseTagAutocomplete>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from 'lodash';
+import { config } from 'src';
+import { PropType, Ref } from 'vue';
+import { Option } from '@/types/types';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  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,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
+
+const http = config.http;
+
+const loading = 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;
+
+  if (keywords.value != query) {
+    keywords.value = query;
+    debouncedSearch();
+  }
+};
+
+const onFocus = () => {
+  if (firstSearch.value) {
+    return;
+  }
+
+  search();
+
+  firstSearch.value = true;
+};
+
+const scrollBottom = () => {
+  if (!reachedEnd.value) {
+    page.value++;
+    search();
+  }
+};
+
+const search = () => {
+  if (loading.value) {
+    return;
+  }
+
+  loading.value = true;
+  firstSearch.value = true;
+
+  http
+    .get(props.url, {
+      params: {
+        search: 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);
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const debouncedSearch = debounce(() => {
+  search();
+}, 300);
+</script>