sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseDatePicker.vue

@@ -1,372 +1,372 @@
-<template>
-  <div
-    class="relative base-date-picker"
-    :class="{
-      'hide-input': !showInput,
-    }"
-  >
-    <div
-      v-if="showInput"
-      :class="iconWrapClasses"
-    >
-      <BaseIcon
-        :class="iconClasses"
-        icon="heroicons:calendar"
-      />
-    </div>
-    <input
-      ref="datepicker"
-      type="text"
-      readonly
-      :disabled="disabled"
-      class="w-full"
-      :class="classes"
-      :placeholder="t('sui.click_or_select_date')"
-    >
-    <div
-      v-if="modelValueFormatted && !disabled && showInput && showRemoveButton"
-      :class="closeWrapClasses"
-    >
-      <button
-        type="button"
-        class="flex justify-center items-center rounded hover:bg-slate-100 aspect-1"
-        @click="clear()"
-      >
-        <BaseIcon
-          :class="iconClasses"
-          icon="heroicons:x-mark"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Ref } from 'vue';
-import { isArray, isEqual } from 'lodash';
-import { DateTime } from 'luxon';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { useField } from '@/composables/field';
-import flatpickr from 'flatpickr';
-
-import { t } from '@/i18n';
-import { French } from 'flatpickr/dist/l10n/fr';
-import { english } from 'flatpickr/dist/l10n/default';
-import { Instance } from 'flatpickr/dist/types/instance';
-import { useI18nStore } from '@/stores/i18n';
-import { twMerge } from 'tailwind-merge';
-import { Size, sizes } from '@/utils/sizes';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null | string[];
-    required?: boolean;
-    size?: Size;
-    disabled?: boolean;
-    minDate?: string | Date | null;
-    maxDate?: string | Date | null;
-    hasError?: boolean;
-    name?: string;
-    inline?: boolean;
-    showInput?: boolean;
-    enableTime?: boolean;
-    mode?: 'single' | 'multiple' | 'range' | 'time';
-    noCalendar?: boolean;
-    disableDates?: (string | Date | ((date: Date) => boolean))[];
-    showRemoveButton?: boolean;
-  }>(),
-  {
-    modelValue: null,
-    required: undefined,
-    disabled: false,
-    size: undefined,
-    minDate: null,
-    maxDate: null,
-    hasError: false,
-    name: undefined,
-    inline: false,
-    showInput: true,
-    enableTime: false,
-    mode: 'single',
-    noCalendar: false,
-    showRemoveButton: true,
-    disableDates() {
-      return [];
-    },
-  }
-);
-
-const emit = defineEmits(['update:modelValue']);
-
-const formatInternal = computed(() => {
-  if (props.enableTime) {
-    return 'Y-m-d H:i';
-  }
-
-  return 'Y-m-d';
-});
-
-const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  size: computed(() => props.size),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const modelValueFormatted = computed((): string | string[] | null => {
-  if (!props.modelValue) {
-    return null;
-  }
-
-  if (isArray(props.modelValue)) {
-    const listModelValue = [] as string[];
-
-    props.modelValue.forEach(function (date) {
-      listModelValue.push(parseDate(date));
-    });
-
-    return listModelValue;
-  }
-
-  return parseDate(props.modelValue);
-});
-
-function dateJsToLuxon(date: Date): DateTime {
-  return DateTime.fromJSDate(date);
-}
-
-function stringToLuxon(date: string): DateTime {
-  if (date.includes('T')) {
-    return DateTime.fromISO(date, { zone: 'utc' });
-  }
-
-  return DateTime.fromSQL(date, { zone: 'utc' });
-}
-
-function luxonToString(date: DateTime): string {
-  if (props.enableTime) {
-    return date.toFormat('yyyy-MM-dd HH:mm:ss');
-  }
-
-  return date.toFormat('yyyy-MM-dd');
-}
-
-function parseDate(date: string): string {
-  return luxonToString(stringToLuxon(date));
-}
-
-const locale = computed(() => {
-  if (useI18nStore().locale == 'fr') {
-    return French;
-  }
-
-  return english;
-});
-
-const datepicker = ref(null) as Ref<HTMLInputElement | null>;
-
-let picker = null as Instance | null;
-
-const flatpickrConfig = computed(() => {
-
-  return {
-    enableTime: props.enableTime,
-    dateFormat: formatInternal.value,
-    mode: props.mode,
-    locale: { ...locale.value, firstDayOfWeek: 7 },
-    monthSelectorType: 'static',
-    minDate: props.minDate ?? undefined,
-    maxDate: props.maxDate ?? undefined,
-    noCalendar: props.noCalendar,
-    disable: props.disableDates,
-    inline: props.inline,
-    animate: false,
-    time_24hr: true,
-    prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
-    nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
-  } as any;
-});
-
-// Make sure the model value is formatted on the parent component onload
-onMounted(() => {
-
-  // It is important to use isEqual here to compare Proxy with primitives, and to compare arrays
-
-  if (!isEqual(props.modelValue, modelValueFormatted.value)) {
-    emitUpdate(modelValueFormatted.value);
-  }
-});
-
-/*
- | Flatpickr does not seem to observe changes in the value attribute of the input.
- | We should watch on modelValue,
- | and manually react and apply the changes on the picker
-*/
-watch(
-  () => modelValueFormatted.value,
-  () => {
-    setPickerDate();
-  },
-  { immediate: true }
-);
-
-function setPickerDate() {
-  if (!picker) {
-    return;
-  }
-
-  if (!modelValueFormatted.value || modelValueFormatted.value.length == 0) {
-    if (picker.selectedDates.length > 0) {
-      picker.clear();
-    }
-    return;
-  }
-
-  picker.setDate(modelValueFormatted.value, false);
-}
-
-/*
- | If the props in flatpickrConfig are changed
- | update the flatpickr instance 
-*/
-watch(
-  () => flatpickrConfig,
-  () => init(),
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-onMounted(() => {
-  init();
-});
-
-onUnmounted(() => {
-  // Cause weird animation problems when using with BaseDropdown
-  // Added a timeout to make sure the animation is done before destroying the picker
-  setTimeout(() => {
-    if (picker) {
-      picker.destroy();
-    }
-  }, 300);
-});
-
-function init() {
-  if (!datepicker.value) {
-    return;
-  }
-
-  picker?.destroy();
-
-  picker = flatpickr(datepicker.value, {
-    ...flatpickrConfig.value,
-    onChange(dates) {
-      if (!dates.length) {
-        clear();
-        return;
-      }
-
-      const datetime = DateTime.fromJSDate(dates[0]);
-
-      if (!datetime) {
-        clear();
-        return;
-      }
-
-      const listDate = [] as string[];
-
-      dates.forEach(function (date) {
-        listDate.push(luxonToString(dateJsToLuxon(date)));
-      });
-
-      if (listDate.length == 0) {
-        clear();
-        return;
-      }
-
-      if (props.mode === 'range' || props.mode === 'multiple') {
-        emitUpdate(listDate);
-        return;
-      }
-
-      emitUpdate(listDate[0]);
-    },
-  });
-
-  setPickerDate();
-}
-
-function clear() {
-  emitUpdate(null);
-}
-
-const classes = computed(() => {
-  const base = 'transition-colors duration-200 input-rounded';
-  const focus = 'focus:input-focus'
-  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
-  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
-  const sizeConfig = sizes[sizeInternal.value];
-  const padding = {
-    'xs': 'pl-[1.54rem] pr-5',
-    'sm': 'pl-[2.1rem] pr-6',
-    'md': 'pl-10 pr-7',
-    'lg': 'pl-10 pr-7',
-    'xl': 'pl-11 pr-7',
-  }[sizeInternal.value];
-
-  const paddingRight = props.modelValue ? padding : 'pr-0';
-
-  return twMerge(
-    base,
-    focus,
-    error,
-    disabled,
-    padding,
-    paddingRight,
-    sizeConfig.height,
-    sizeConfig.fontSize,
-  );
-});
-
-const iconWrapClasses = computed(() => {
-  const base = 'pointer-events-none absolute top-0 left-0 flex items-center justify-center';
-  const sizeConfig = sizes[sizeInternal.value];
-  const padding = {
-    'xs': 'pl-2',
-    'sm': 'pl-2.5',
-    'md': 'pl-3',
-    'lg': 'pl-3',
-    'xl': 'pl-3',
-  }[sizeInternal.value];
-
-  return twMerge(
-    base,
-    sizeConfig.height,
-    padding
-  );
-});
-
-const closeWrapClasses = computed(() => {
-  const base = 'absolute top-0 right-0 flex justify-center p-1';
-  const sizeConfig = sizes[sizeInternal.value];
-
-  return twMerge(
-    base,
-    sizeConfig.height,
-  );
-});
-
-const iconClasses = computed(() => {
-  const base = '';
-  const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';
-  const sizeConfig = sizes[sizeInternal.value];
-
-  return twMerge(
-    base,
-    error,
-    sizeConfig.iconSize,
-  );
-});
-</script>
+<template>
+  <div
+    class="relative base-date-picker"
+    :class="{
+      'hide-input': !showInput,
+    }"
+  >
+    <div
+      v-if="showInput"
+      :class="iconWrapClasses"
+    >
+      <BaseIcon
+        :class="iconClasses"
+        icon="heroicons:calendar"
+      />
+    </div>
+    <input
+      ref="datepicker"
+      type="text"
+      readonly
+      :disabled="disabled"
+      class="w-full"
+      :class="classes"
+      :placeholder="t('sui.click_or_select_date')"
+    >
+    <div
+      v-if="modelValueFormatted && !disabled && showInput && showRemoveButton"
+      :class="closeWrapClasses"
+    >
+      <button
+        type="button"
+        class="flex justify-center items-center rounded hover:bg-slate-100 aspect-1"
+        @click="clear()"
+      >
+        <BaseIcon
+          :class="iconClasses"
+          icon="heroicons:x-mark"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref } from 'vue';
+import { isArray, isEqual } from 'lodash';
+import { DateTime } from 'luxon';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { useField } from '@/composables/field';
+import flatpickr from 'flatpickr';
+
+import { t } from '@/i18n';
+import { French } from 'flatpickr/dist/l10n/fr';
+import { english } from 'flatpickr/dist/l10n/default';
+import { Instance } from 'flatpickr/dist/types/instance';
+import { useI18nStore } from '@/stores/i18n';
+import { twMerge } from 'tailwind-merge';
+import { Size, sizes } from '@/utils/sizes';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null | string[];
+    required?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    minDate?: string | Date | null;
+    maxDate?: string | Date | null;
+    hasError?: boolean;
+    name?: string;
+    inline?: boolean;
+    showInput?: boolean;
+    enableTime?: boolean;
+    mode?: 'single' | 'multiple' | 'range' | 'time';
+    noCalendar?: boolean;
+    disableDates?: (string | Date | ((date: Date) => boolean))[];
+    showRemoveButton?: boolean;
+  }>(),
+  {
+    modelValue: null,
+    required: undefined,
+    disabled: false,
+    size: undefined,
+    minDate: null,
+    maxDate: null,
+    hasError: false,
+    name: undefined,
+    inline: false,
+    showInput: true,
+    enableTime: false,
+    mode: 'single',
+    noCalendar: false,
+    showRemoveButton: true,
+    disableDates() {
+      return [];
+    },
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+const formatInternal = computed(() => {
+  if (props.enableTime) {
+    return 'Y-m-d H:i';
+  }
+
+  return 'Y-m-d';
+});
+
+const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  size: computed(() => props.size),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const modelValueFormatted = computed((): string | string[] | null => {
+  if (!props.modelValue) {
+    return null;
+  }
+
+  if (isArray(props.modelValue)) {
+    const listModelValue = [] as string[];
+
+    props.modelValue.forEach(function (date) {
+      listModelValue.push(parseDate(date));
+    });
+
+    return listModelValue;
+  }
+
+  return parseDate(props.modelValue);
+});
+
+function dateJsToLuxon(date: Date): DateTime {
+  return DateTime.fromJSDate(date);
+}
+
+function stringToLuxon(date: string): DateTime {
+  if (date.includes('T')) {
+    return DateTime.fromISO(date, { zone: 'utc' });
+  }
+
+  return DateTime.fromSQL(date, { zone: 'utc' });
+}
+
+function luxonToString(date: DateTime): string {
+  if (props.enableTime) {
+    return date.toFormat('yyyy-MM-dd HH:mm:ss');
+  }
+
+  return date.toFormat('yyyy-MM-dd');
+}
+
+function parseDate(date: string): string {
+  return luxonToString(stringToLuxon(date));
+}
+
+const locale = computed(() => {
+  if (useI18nStore().locale == 'fr') {
+    return French;
+  }
+
+  return english;
+});
+
+const datepicker = ref(null) as Ref<HTMLInputElement | null>;
+
+let picker = null as Instance | null;
+
+const flatpickrConfig = computed(() => {
+
+  return {
+    enableTime: props.enableTime,
+    dateFormat: formatInternal.value,
+    mode: props.mode,
+    locale: { ...locale.value, firstDayOfWeek: 7 },
+    monthSelectorType: 'static',
+    minDate: props.minDate ?? undefined,
+    maxDate: props.maxDate ?? undefined,
+    noCalendar: props.noCalendar,
+    disable: props.disableDates,
+    inline: props.inline,
+    animate: false,
+    time_24hr: true,
+    prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
+    nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
+  } as any;
+});
+
+// Make sure the model value is formatted on the parent component onload
+onMounted(() => {
+
+  // It is important to use isEqual here to compare Proxy with primitives, and to compare arrays
+
+  if (!isEqual(props.modelValue, modelValueFormatted.value)) {
+    emitUpdate(modelValueFormatted.value);
+  }
+});
+
+/*
+ | Flatpickr does not seem to observe changes in the value attribute of the input.
+ | We should watch on modelValue,
+ | and manually react and apply the changes on the picker
+*/
+watch(
+  () => modelValueFormatted.value,
+  () => {
+    setPickerDate();
+  },
+  { immediate: true }
+);
+
+function setPickerDate() {
+  if (!picker) {
+    return;
+  }
+
+  if (!modelValueFormatted.value || modelValueFormatted.value.length == 0) {
+    if (picker.selectedDates.length > 0) {
+      picker.clear();
+    }
+    return;
+  }
+
+  picker.setDate(modelValueFormatted.value, false);
+}
+
+/*
+ | If the props in flatpickrConfig are changed
+ | update the flatpickr instance 
+*/
+watch(
+  () => flatpickrConfig,
+  () => init(),
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+onUnmounted(() => {
+  // Cause weird animation problems when using with BaseDropdown
+  // Added a timeout to make sure the animation is done before destroying the picker
+  setTimeout(() => {
+    if (picker) {
+      picker.destroy();
+    }
+  }, 300);
+});
+
+function init() {
+  if (!datepicker.value) {
+    return;
+  }
+
+  picker?.destroy();
+
+  picker = flatpickr(datepicker.value, {
+    ...flatpickrConfig.value,
+    onChange(dates) {
+      if (!dates.length) {
+        clear();
+        return;
+      }
+
+      const datetime = DateTime.fromJSDate(dates[0]);
+
+      if (!datetime) {
+        clear();
+        return;
+      }
+
+      const listDate = [] as string[];
+
+      dates.forEach(function (date) {
+        listDate.push(luxonToString(dateJsToLuxon(date)));
+      });
+
+      if (listDate.length == 0) {
+        clear();
+        return;
+      }
+
+      if (props.mode === 'range' || props.mode === 'multiple') {
+        emitUpdate(listDate);
+        return;
+      }
+
+      emitUpdate(listDate[0]);
+    },
+  });
+
+  setPickerDate();
+}
+
+function clear() {
+  emitUpdate(null);
+}
+
+const classes = computed(() => {
+  const base = 'transition-colors duration-200 input-rounded';
+  const focus = 'focus:input-focus'
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    'xs': 'pl-[1.54rem] pr-5',
+    'sm': 'pl-[2.1rem] pr-6',
+    'md': 'pl-10 pr-7',
+    'lg': 'pl-10 pr-7',
+    'xl': 'pl-11 pr-7',
+  }[sizeInternal.value];
+
+  const paddingRight = props.modelValue ? padding : 'pr-0';
+
+  return twMerge(
+    base,
+    focus,
+    error,
+    disabled,
+    padding,
+    paddingRight,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+  );
+});
+
+const iconWrapClasses = computed(() => {
+  const base = 'pointer-events-none absolute top-0 left-0 flex items-center justify-center';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    'xs': 'pl-2',
+    'sm': 'pl-2.5',
+    'md': 'pl-3',
+    'lg': 'pl-3',
+    'xl': 'pl-3',
+  }[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+    padding
+  );
+});
+
+const closeWrapClasses = computed(() => {
+  const base = 'absolute top-0 right-0 flex justify-center p-1';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+  );
+});
+
+const iconClasses = computed(() => {
+  const base = '';
+  const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    error,
+    sizeConfig.iconSize,
+  );
+});
+</script>