sprintify-ui 0.0.96 → 0.0.99

package/src/components/BaseAutocompleteDropdown.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="relative w-full overflow-hidden">
+    <div
+      ref="dropdown"
+      data-scroll-lock-scrollable
+      class="max-h-[214px] w-full overflow-y-auto"
+    >
+      <!-- Slot empty -->
+      <slot v-if="options.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>
+
+      <!-- Option list -->
+      <ul v-else :class="dropdownClass">
+        <li
+          v-for="(option, index) in options"
+          :key="option.value"
+          ref="optionRefs"
+          class="block"
+        >
+          <button
+            class="block w-full cursor-pointer select-none appearance-none border-none text-left focus:outline-none"
+            type="button"
+            tabindex="-1"
+            @click="onSelect(option)"
+            @mouseenter="onOptionMouseEnter(index)"
+            @mousemove="onOptionMouseMove(index)"
+          >
+            <slot
+              name="option"
+              :option="option.option"
+              :selected="isSelected(option)"
+              :active="focusOption && focusOption.value == option.value"
+            >
+              <div
+                class="flex items-center rounded px-[0.75em] py-[0.5em]"
+                :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="optionIconClass"
+                  ></BaseIcon>
+                </div>
+              </div>
+            </slot>
+          </button>
+        </li>
+      </ul>
+
+      <!-- Loading bottom -->
+      <!-- This component should always take the same amount of space whether it's visible or not -->
+      <!-- This is to prevent infinite scroll jumps -->
+      <div
+        :class="[loadingBottom ? 'opacity-100' : 'opacity-0']"
+        class="relative py-3 text-center"
+      >
+        <div
+          class="absolute inset-0 h-full w-full bg-gradient-to-b from-transparent to-white"
+        ></div>
+        <BaseSpinnerSmall
+          class="mx-auto h-7 w-7 text-slate-300"
+        ></BaseSpinnerSmall>
+      </div>
+    </div>
+
+    <div ref="footer">
+      <div v-if="$slots.footer" class="bg-white">
+        <slot :options="options" 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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref, PropType } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
+import { NormalizedOption } from '@/types';
+import { isArray, isObject, throttle } from 'lodash';
+import BaseSkeleton from './BaseSkeleton.vue';
+import { BaseIcon } from '.';
+import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
+
+const props = defineProps({
+  selected: {
+    type: [Array, Object, null, undefined] as PropType<
+      NormalizedOption[] | NormalizedOption | null | undefined
+    >,
+    default: undefined,
+  },
+  options: {
+    type: Array as PropType<NormalizedOption[]>,
+    default() {
+      return [];
+    },
+  },
+  keywords: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingBottom: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: 'base',
+  },
+  dropdownClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['scrollBottom', 'select']);
+
+const dropdown = ref(null) as Ref<HTMLDivElement | null>;
+const optionRefs = ref([]) as Ref<HTMLElement[]>;
+
+let mouseIsMoving = false;
+
+// Focus
+
+const focusIndex = ref(0);
+
+const focusOption = computed(() => {
+  return (
+    props.options[Math.min(focusIndex.value, props.options.length - 1)] ?? null
+  );
+});
+
+// Selecting
+
+function onSelect(option: NormalizedOption) {
+  emit('select', option);
+}
+
+function isSelected(option: NormalizedOption): boolean {
+  if (isArray(props.selected)) {
+    return props.selected.some((modelValue) => {
+      return modelValue.value === option.value;
+    });
+  }
+
+  if (isObject(props.selected)) {
+    return props.selected.value == option.value;
+  }
+
+  return false;
+}
+
+// Arrow actions
+
+window.addEventListener('keydown', onKeyDown);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown);
+});
+
+function onKeyDown(event: KeyboardEvent) {
+  const key = event.key;
+
+  mouseIsMoving = false;
+
+  if (props.loading) {
+    return;
+  }
+
+  if (key === 'ArrowDown') {
+    if (focusIndex.value < props.options.length - 1) {
+      focusIndex.value++;
+    } else {
+      focusIndex.value = 0;
+    }
+    scrollToFocus();
+    return;
+  }
+
+  if (key === 'ArrowUp') {
+    if (focusIndex.value > 0) {
+      focusIndex.value--;
+    } else {
+      focusIndex.value = Math.max(0, props.options.length - 1);
+    }
+    scrollToFocus();
+    return;
+  }
+
+  if (key === 'Enter') {
+    event.preventDefault();
+    if (focusOption.value) {
+      onSelect(focusOption.value);
+    }
+    return;
+  }
+}
+
+// Infinite scroll
+
+onMounted(() => {
+  useInfiniteScroll(
+    dropdown.value,
+    () => {
+      emit('scrollBottom');
+    },
+    { distance: 60 }
+  );
+});
+
+function scrollToFocus() {
+  if (!optionRefs.value) {
+    return;
+  }
+
+  const option = optionRefs.value[focusIndex.value] ?? null;
+
+  if (!option) {
+    return;
+  }
+
+  option.scrollIntoView({
+    block: 'center',
+    inline: 'center',
+  });
+}
+
+// Validate focus index
+
+watch(
+  () => props.options,
+  () => {
+    focusIndex.value = Math.max(
+      0,
+      Math.min(focusIndex.value, props.options.length - 1)
+    );
+  },
+  { immediate: true }
+);
+
+// Update the focusIndex when the selected value changes
+
+watch(
+  () => props.selected,
+  () => {
+    if (
+      props.selected &&
+      isObject(props.selected) &&
+      !isArray(props.selected)
+    ) {
+      const selected = props.selected as NormalizedOption;
+      const index = props.options.findIndex(
+        (option) => option.value === selected.value
+      );
+      if (index >= 0) {
+        focusIndex.value = index;
+      }
+    } else {
+      focusIndex.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
+// Scroll top when the keywords change
+
+watch(
+  () => props.keywords,
+  () => {
+    if (dropdown.value) {
+      dropdown.value.scrollTop = 0;
+    }
+    // Reset the focusIndex
+    focusIndex.value = 0;
+  }
+);
+
+const onOptionMouseEnter = (index: number) => {
+  if (mouseIsMoving) {
+    focusIndex.value = index;
+  }
+};
+
+const onOptionMouseMove = throttle((index: number) => {
+  mouseIsMoving = true;
+}, 10);
+
+// Classes
+
+const optionClass = (option: NormalizedOption) => {
+  const focus = focusOption.value && focusOption.value.value == option.value;
+
+  if (focus) {
+    return 'bg-slate-200';
+  }
+
+  return 'bg-white';
+};
+
+const optionSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  }
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-sm';
+});
+
+const optionIconClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'w-4 h-4';
+  }
+  if (props.size == 'sm') {
+    return 'w-5 h-5';
+  }
+  return 'w-5 h-5';
+});
+</script>

package/src/components/BaseAutocompleteFetch.vue

@@ -2,6 +2,7 @@
   <BaseAutocomplete
     ref="input"
     :loading="showLoading && page == 1"
+    :loading-bottom="showLoading && page > 1"
     :model-value="modelValue"
     :disabled="disabled"
     :name="name"
@@ -46,7 +47,7 @@
 
 <script lang="ts" setup>
 import { config } from '@/index';
-import { debounce } from 'lodash';
+import { debounce, throttle } from 'lodash';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
@@ -161,12 +162,16 @@ const onClear = () => {
   emit('clear');
 };
 
-const scrollBottom = () => {
+const scrollBottom = throttle(() => {
+  if (fetching.value) {
+    return;
+  }
+
   if (!reachedEnd.value) {
     page.value++;
     search();
   }
-};
+}, 500);
 
 function search() {
   if (fetching.value) {

package/src/components/BaseDatePicker.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="relative">
+  <div
+    class="base-date-picker relative"
+    :class="{ 'base-date-picker--inline': inline }"
+  >
     <div
       class="pointer-events-none absolute top-0 left-0 flex h-10 items-center justify-center pl-2.5"
     >
@@ -205,3 +208,154 @@ function arrayRotate(arr: any[], reverse = false): any[] {
   return arr;
 }
 </script>
+
+<style lang="postcss">
+@import 'pikaday/css/pikaday.css';
+
+.base-date-picker--inline {
+  .pikaday-white.pika-single {
+    box-shadow: none;
+    border: none;
+    padding: 0;
+  }
+  .pika-lendar {
+    margin: 0;
+    margin-top: 0.25rem;
+  }
+}
+
+.pikaday-white {
+  --backgroundColor: #ffffff;
+  --textColor: #718096;
+  --currentDateTextColor: #3182ce;
+  --selectedDateBackgroundColor: #3182ce;
+  --selectedDateTextColor: #ffffff;
+
+  --labelTextColor: #4a5568; /* eg. May 2020 */
+  --weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/
+
+  font-family: inherit;
+  background-color: var(--backgroundColor);
+  padding: 0.5rem;
+  z-index: 60;
+  margin: 6px 0 0 0;
+
+  @apply shadow;
+  @apply rounded-lg;
+}
+
+.pikaday-white .pika-title {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+}
+
+/* Next/Previous */
+.pikaday-white .pika-prev,
+.pikaday-white .pika-next {
+  position: absolute;
+  outline: none;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  top: -1px;
+  display: inline-block;
+  margin-top: 0;
+  cursor: pointer;
+  /* hide text using text-indent trick, using width value (it's enough) */
+  text-indent: -9999px;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  opacity: 0.8;
+}
+.pikaday-white .pika-prev:hover,
+.pikaday-white .pika-next:hover {
+  opacity: 1;
+}
+.pikaday-white .pika-prev {
+  right: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
+}
+.pikaday-white .pika-next {
+  right: 2px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
+}
+.pika-prev.is-disabled,
+.pika-next.is-disabled {
+  cursor: default;
+  opacity: 0.2;
+}
+
+.pikaday-white .pika-label {
+  @apply mr-1.5 rounded border border-slate-200 py-1 px-2 text-[15px] font-normal leading-none;
+}
+
+/* Show Month & Year select */
+.pikaday-white .pika-label {
+  position: relative; /* add this */
+  /* some additional code */
+}
+
+.pikaday-white .pika-select-month,
+.pikaday-white .pika-select-year {
+  /*display: none;*/
+  width: 100%;
+  cursor: pointer;
+  position: absolute;
+  z-index: 9998;
+  margin: 0;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  padding: 0px;
+}
+
+.pikaday-white table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.pikaday-white table th {
+  width: 2.5em;
+  height: 2.5em;
+  font-weight: normal;
+  color: var(--weekDaysTextColor);
+  font-size: 13px;
+  text-align: center;
+}
+.pikaday-white table th abbr {
+  text-decoration: none;
+}
+.pikaday-white table td {
+  padding: 1px;
+}
+.pikaday-white table td button {
+  width: 2.5em;
+  height: 2.5em;
+  text-align: center;
+  @apply rounded-full;
+  font-size: 13px;
+  background-color: var(--backgroundColor);
+}
+.pikaday-white table td button:hover {
+  @apply bg-slate-100;
+  @apply text-slate-900;
+}
+.pikaday-white table td.is-today button {
+  color: var(--currentDateTextColor);
+}
+.pikaday-white table td.is-selected button {
+  @apply bg-primary-500;
+  @apply text-white;
+  @apply font-normal;
+}
+
+.pikaday-white table td button {
+  color: var(--textColor);
+}
+</style>

package/src/components/BaseDropdown.stories.js

@@ -2,6 +2,7 @@ import BaseBadge from './BaseBadge.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
+import BaseDatePicker from './BaseDatePicker.vue';
 import { options } from '../../.storybook/utils';
 
 const items = [];
@@ -151,3 +152,27 @@ export const ModalWithScroll = (args) => ({
   </BaseModalCenter>
   `,
 });
+
+export const WithDatePicker = (args) => ({
+  components: { BaseDropdown, BaseDatePicker },
+  setup() {
+    const date = ref('2022-01-01');
+    return { args, items, date };
+  },
+  template: `
+  <BaseDropdown v-bind="args">
+    <template #button>
+      <div class="btn btn-primary">Click me</div>
+    </template>
+    <template #dropdown>
+      <div class="bg-white shadow-lg rounded border p-2 w-[260px]">
+        <BaseDatePicker v-model="date" inline></BaseDatePicker>
+      </div>
+    </template>
+  </BaseDropdown>
+  `,
+});
+
+WithDatePicker.args = {
+  placement: 'bottom-start',
+};

package/src/components/BaseDropdown.vue

@@ -137,8 +137,8 @@ function deactivate() {
 
 useClickOutside(
   dropdown,
-  (outside: boolean) => {
-    if (outside && showDropdown.value) {
+  () => {
+    if (showDropdown.value) {
       close();
     }
   },

package/src/components/BaseModalSide.stories.js

@@ -5,9 +5,7 @@ import BaseAvatar from './BaseAvatar.vue';
 export default {
   title: 'Components/BaseModalSide',
   component: BaseModalSide,
-  args: {
-    position: 'bottom-right',
-  },
+  args: {},
 };
 
 const Template = (args) => ({

package/src/components/BaseModalSide.vue

@@ -96,14 +96,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit
-);
-
 const breakpoints = useBreakpoints();
 
 const realMaxWidth = computed((): string => {
   return breakpoints.greater('sm').value ? props.maxWidth : '100%';
 });
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit
+);
 </script>

package/src/components/BaseTagAutocomplete.stories.js

@@ -3,10 +3,25 @@ import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 
+const sizes = ['xs', 'sm', 'base'];
+
 export default {
   title: 'Form/BaseTagAutocomplete',
   component: BaseTagAutocomplete,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+    dropdownShow: {
+      control: {
+        type: 'select',
+        options: ['always', 'focus'],
+      },
+    },
+  },
   args: {
     labelKey: 'label',
     valueKey: 'value',
@@ -30,6 +45,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 = {
   options: options,
@@ -42,6 +68,25 @@ Loading.args = {
   loading: true,
 };
 
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const Sizes = (args) => ({
+  components: { BaseTagAutocomplete },
+  setup() {
+    const value = ref([]);
+    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>
+    <BaseTagAutocomplete v-model="value" v-bind="args" :size="size"></BaseTagAutocomplete>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => ({
   components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
   setup() {