sprintify-ui 0.2.16 → 0.2.18

package/src/components/BaseDatePicker.vue

@@ -1,297 +1,297 @@
-<template>
-  <div
-    class="relative base-date-picker"
-    :class="{
-      'hide-input': !showInput,
-    }"
-  >
-    <div
-      v-if="showInput"
-      class="pointer-events-none absolute top-0 left-0 flex h-[42px] items-center justify-center pl-2.5"
-    >
-      <BaseIcon
-        class="relative -top-px h-5 w-5 text-slate-400"
-        icon="heroicons:calendar"
-      />
-    </div>
-    <input
-      ref="datepicker"
-      type="text"
-      readonly
-      :disabled="disabled"
-      class="w-full rounded pl-10 pr-8 disabled:cursor-not-allowed disabled:text-slate-300"
-      :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-      :placeholder="t('sui.click_or_select_date')"
-    >
-    <div
-      v-if="modelValueFormatted && !disabled && showInput"
-      class="absolute right-0 top-0 flex h-[42px] items-center justify-center p-1"
-    >
-      <button
-        type="button"
-        class="flex items-center rounded p-1.5 hover:bg-slate-100"
-        @click="clear()"
-      >
-        <BaseIcon
-          class="h-5 w-5 text-slate-600"
-          icon="heroicons:x-mark"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Ref } from 'vue';
-import { isArray } 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';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null | string[];
-    required?: boolean;
-    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);
-  }>(),
-  {
-    modelValue: null,
-    required: false,
-    disabled: false,
-    minDate: null,
-    maxDate: null,
-    hasError: false,
-    name: undefined,
-    inline: false,
-    showInput: true,
-    enableTime: false,
-    mode: 'single',
-    noCalendar: false,
-    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 } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  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('Z') && 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,
-    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(() => {
-  if (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();
-});
-
-onBeforeUnmount(() => {
-  if (picker) {
-    picker.destroy();
-  }
-});
-
-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) {
-        emitUpdate(null);
-        return;
-      }
-
-      if (props.mode === 'range' || props.mode === 'multiple') {
-        emitUpdate(listDate);
-        return;
-      }
-
-      emitUpdate(listDate[0]);
-    },
-  });
-
-  setPickerDate();
-}
-
-function clear() {
-  emitUpdate(null);
-}
-</script>
-
-<style>
-.base-date-picker.hide-input {
-  .flatpickr-input {
-    display: none;
-  }
-}
+<template>
+  <div
+    class="relative base-date-picker"
+    :class="{
+      'hide-input': !showInput,
+    }"
+  >
+    <div
+      v-if="showInput"
+      class="pointer-events-none absolute top-0 left-0 flex h-[42px] items-center justify-center pl-2.5"
+    >
+      <BaseIcon
+        class="relative -top-px h-5 w-5 text-slate-400"
+        icon="heroicons:calendar"
+      />
+    </div>
+    <input
+      ref="datepicker"
+      type="text"
+      readonly
+      :disabled="disabled"
+      class="w-full rounded pl-10 pr-8 disabled:cursor-not-allowed disabled:text-slate-300"
+      :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
+      :placeholder="t('sui.click_or_select_date')"
+    >
+    <div
+      v-if="modelValueFormatted && !disabled && showInput"
+      class="absolute right-0 top-0 flex h-[42px] items-center justify-center p-1"
+    >
+      <button
+        type="button"
+        class="flex items-center rounded p-1.5 hover:bg-slate-100"
+        @click="clear()"
+      >
+        <BaseIcon
+          class="h-5 w-5 text-slate-600"
+          icon="heroicons:x-mark"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref } from 'vue';
+import { isArray } 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';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null | string[];
+    required?: boolean;
+    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);
+  }>(),
+  {
+    modelValue: null,
+    required: false,
+    disabled: false,
+    minDate: null,
+    maxDate: null,
+    hasError: false,
+    name: undefined,
+    inline: false,
+    showInput: true,
+    enableTime: false,
+    mode: 'single',
+    noCalendar: false,
+    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 } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  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('Z') && 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,
+    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(() => {
+  if (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();
+});
+
+onBeforeUnmount(() => {
+  if (picker) {
+    picker.destroy();
+  }
+});
+
+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) {
+        emitUpdate(null);
+        return;
+      }
+
+      if (props.mode === 'range' || props.mode === 'multiple') {
+        emitUpdate(listDate);
+        return;
+      }
+
+      emitUpdate(listDate[0]);
+    },
+  });
+
+  setPickerDate();
+}
+
+function clear() {
+  emitUpdate(null);
+}
+</script>
+
+<style>
+.base-date-picker.hide-input {
+  .flatpickr-input {
+    display: none;
+  }
+}
 </style>

package/src/components/BaseDateSelect.stories.js

@@ -1,47 +1,47 @@
-import BaseDateSelect from './BaseDateSelect.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '../../.storybook/utils';
-
-export default {
-  title: 'Form/BaseDateSelect',
-  component: BaseDateSelect,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseDateSelect, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { value, args };
-  },
-  template: `
-  <BaseDateSelect v-model="value" v-bind="args">
-  </BaseDateSelect>
-  <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const MinYear = Template.bind({});
-MinYear.args = {
-  minYear: 1980,
-};
-
-export const MaxYear = Template.bind({});
-MaxYear.args = {
-  maxYear: 2010,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: '2022-11-16',
-  disabled: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseDateSelect,
-  componentName: 'BaseDateSelect',
-  label: 'Date',
-});
+import BaseDateSelect from './BaseDateSelect.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '../../.storybook/utils';
+
+export default {
+  title: 'Form/BaseDateSelect',
+  component: BaseDateSelect,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDateSelect, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { value, args };
+  },
+  template: `
+  <BaseDateSelect v-model="value" v-bind="args">
+  </BaseDateSelect>
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const MinYear = Template.bind({});
+MinYear.args = {
+  minYear: 1980,
+};
+
+export const MaxYear = Template.bind({});
+MaxYear.args = {
+  maxYear: 2010,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: '2022-11-16',
+  disabled: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseDateSelect,
+  componentName: 'BaseDateSelect',
+  label: 'Date',
+});