sprintify-ui 0.0.141 → 0.0.142

package/src/components/BaseDatePicker.stories.js

@@ -6,13 +6,22 @@ import { createFieldStory } from '../../.storybook/utils';
 export default {
   title: 'Form/BaseDatePicker',
   component: BaseDatePicker,
-  argTypes: {},
+  argTypes: {
+    mode: {
+      control: { type: 'select' },
+      options: ['single', 'multiple', 'range', 'time'],
+    },
+    locale: {
+      control: { type: 'select' },
+      options: ['en', 'fr'],
+    },
+  },
 };
 
 const Template = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref('2022-11-16T10:00:00Z');
+    const value = ref('2023-01-10T10:00:00Z');
     return { value, args };
   },
   template: `
@@ -24,19 +33,14 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 
-export const YearRange = Template.bind({});
-YearRange.args = {
-  yearRange: [1920, 2020],
-};
-
 export const MinDate = Template.bind({});
 MinDate.args = {
-  minDate: DateTime.fromISO('2022-11-10').toJSDate(),
+  minDate: DateTime.fromISO('2023-01-05').toJSDate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
-  maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
+  maxDate: '2023-01-18',
 };
 
 export const Disabled = Template.bind({});
@@ -44,6 +48,46 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Range = Template.bind({});
+Range.args = {
+  mode: 'range',
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  mode: 'multiple',
+};
+
+export const DateAndTime = Template.bind({});
+DateAndTime.args = {
+  enableTime: true,
+  format: 'Y-m-d H:i',
+};
+
+export const DisableDates = Template.bind({});
+DisableDates.args = {
+  disableDates: [
+    '2023-01-12',
+    '2023-01-18',
+    '2023-01-24',
+    new Date(2023, 0, 16), // '2023-01-16'
+  ],
+};
+
+export const RangeDisableDates = Template.bind({});
+RangeDisableDates.args = {
+  disableDates: [
+    {
+      from: '2023-01-09',
+      to: '2023-01-15',
+    },
+    {
+      from: '2023-01-20',
+      to: '2023-01-25',
+    },
+  ],
+};
+
 export const Inline = Template.bind({});
 Inline.args = {
   inline: true,
@@ -71,7 +115,7 @@ export const DateTimeConversion = (args) => {
   };
 };
 DateTimeConversion.args = {
-  modelValue: '2022-11-05T10:00:00Z',
+  modelValue: '2023-01-05T10:00:00Z',
 };
 
 export const Field = createFieldStory({

package/src/components/BaseDatePicker.vue

@@ -13,17 +13,16 @@
     </div>
     <input
       ref="datepicker"
-      :value="modelValueFormatted"
       type="text"
       readonly
       :disabled="disabled"
-      class="h-10 w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-slate-300"
+      class="flatpickr w-full rounded pl-10 pr-16 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"
-      class="absolute top-0 right-0 flex h-10 items-center justify-center p-1"
+      class="absolute right-0 top-0.5 flex h-full justify-center p-1"
     >
       <button
         type="button"
@@ -37,17 +36,24 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
-import Pikaday from 'pikaday';
-import { capitalize, padStart } from 'lodash';
-import { DateTime, Info } from 'luxon';
+import { PropType, Ref } from 'vue';
+import { isArray } from 'lodash';
+import { DateTime } from 'luxon';
 import { BaseIcon } from '.';
 import { useField } from '@/composables/field';
+import flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+
+import { French } from 'flatpickr/dist/l10n/fr';
+import { english } from 'flatpickr/dist/l10n/default';
+import { Instance } from 'flatpickr/dist/types/instance';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [String, null] as PropType<string | null | undefined>,
+    type: [String, null, Array] as PropType<
+      string | null | string[] | undefined
+    >,
   },
   required: {
     default: false,
@@ -58,16 +64,12 @@ const props = defineProps({
     type: Boolean,
   },
   minDate: {
-    default: undefined,
-    type: Date,
+    default: null,
+    type: [String, Date],
   },
   maxDate: {
-    default: undefined,
-    type: Date,
-  },
-  yearRange: {
-    default: undefined,
-    type: [Number, Array] as PropType<number | [number, number]>,
+    default: null,
+    type: [String, Date],
   },
   hasError: {
     default: false,
@@ -81,6 +83,34 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  enableTime: {
+    default: false,
+    type: Boolean,
+  },
+  format: {
+    default: 'Y-m-d',
+    type: String,
+  },
+  mode: {
+    default: 'single',
+    type: String as PropType<
+      'single' | 'multiple' | 'range' | 'time' | undefined
+    >,
+  },
+  locale: {
+    default: 'en',
+    type: String as PropType<'en' | 'fr' | undefined>,
+  },
+  noCalendar: {
+    default: false,
+    type: Boolean,
+  },
+  disableDates: {
+    type: [Array, Object] as PropType<string[] | Date[]>,
+    default() {
+      return [];
+    },
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -92,35 +122,52 @@ const { hasErrorInternal, emitUpdate } = useField({
   emit: emit,
 });
 
-const i18n = useI18n();
+const modelValueFormatted = computed((): string | string[] | null => {
+  if (!props.modelValue) {
+    return null;
+  }
 
-const datepicker = ref<HTMLInputElement | null>(null);
+  if (isArray(props.modelValue)) {
+    const listModelValue = [] as string[];
 
-const months = Info.months('long', { locale: i18n.locale.value }).map((m) =>
-  capitalize(m)
-);
-const weekdays = arrayRotate(
-  Info.weekdays('long', { locale: i18n.locale.value }).map((m) =>
-    capitalize(m)
-  ),
-  true
-);
-const weekdaysShort = arrayRotate(
-  Info.weekdays('short', { locale: i18n.locale.value }).map((m) =>
-    capitalize(m)
-  ),
-  true
-);
+    props.modelValue.forEach(function (date) {
+      listModelValue.push(DateTime.fromISO(date, { zone: 'utc' }).toISODate());
+    });
 
-const modelValueFormatted = computed((): string | null => {
-  if (!props.modelValue) {
-    return null;
+    return listModelValue;
   }
+
   return (
     DateTime.fromISO(props.modelValue, { zone: 'utc' }).toISODate() ?? null
   );
 });
 
+const locale = computed(() => {
+  if (props.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: props.format,
+    mode: props.mode,
+    locale: locale.value,
+    minDate: props.minDate,
+    maxDate: props.maxDate,
+    noCalendar: props.noCalendar,
+    disable: props.disableDates,
+    inline: props.inline,
+  };
+});
+
 // Make sure the model value is always formatted on the parent component
 watch(
   () => modelValueFormatted.value,
@@ -132,230 +179,122 @@ watch(
   { immediate: true }
 );
 
-let picker = null as Pikaday | null;
+/*
+ | 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(
+  () => props.modelValue,
+  (newValue) => {
+    if (!picker) {
+      return;
+    }
+
+    if (!newValue) {
+      picker.clear();
+      return;
+    }
+
+    picker.setDate(newValue, 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 = new Pikaday({
-    theme: 'pikaday-white',
-    field: datepicker.value,
-    yearRange: props.yearRange,
-    bound: !props.inline,
-    i18n: {
-      previousMonth: i18n.t('sui.previous_month'),
-      nextMonth: i18n.t('sui.next_month'),
-      months: months,
-      weekdays: weekdays,
-      weekdaysShort: weekdaysShort,
-    },
-    toString(date) {
-      const day = padStart(date.getDate() + '', 2, '0');
-      const month = padStart(date.getMonth() + 1 + '', 2, '0');
-      const year = padStart(date.getFullYear() + '', 4, '0');
-
-      return `${year}-${month}-${day}`;
-    },
-    parse(dateString) {
-      if (!dateString) {
-        return null;
+  picker = flatpickr(datepicker.value, {
+    ...flatpickrConfig.value,
+    onChange(dates) {
+      if (!dates.length) {
+        clear();
+        return;
       }
 
-      const datetime = DateTime.fromISO(dateString, { zone: 'utc' });
-      const year = datetime.year;
-      const month = datetime.month - 1;
-      const day = datetime.day;
+      const datetime = DateTime.fromJSDate(dates[0]);
 
-      return new Date(year, month, day);
-    },
-    minDate: props.minDate,
-    maxDate: props.maxDate,
-    onSelect(date) {
-      if (!date) {
+      if (!datetime) {
         clear();
         return;
       }
 
-      const datetime = DateTime.fromJSDate(date);
+      const listDate = [] as string[];
 
-      if (!datetime) {
-        clear();
+      dates.forEach(function (date) {
+        if (props.enableTime) {
+          listDate.push(DateTime.fromJSDate(date, { zone: 'utc' }).toISO());
+        } else {
+          listDate.push(DateTime.fromJSDate(date, { zone: 'utc' }).toISODate());
+        }
+      });
+
+      if (listDate.length == 0) {
+        emitUpdate(null);
         return;
       }
 
-      emitUpdate(datetime.toISODate());
+      if (props.mode === 'range' || props.mode === 'multiple') {
+        emitUpdate(listDate);
+        return;
+      }
+
+      emitUpdate(listDate[0]);
     },
   });
-});
-
-onBeforeUnmount(() => {
-  if (picker) {
-    picker.destroy();
-  }
-});
+}
 
 function clear() {
-  picker?.clear();
   emitUpdate(null);
 }
-
-// https://stackoverflow.com/a/23368052
-function arrayRotate(arr: any[], reverse = false): any[] {
-  if (reverse) arr.unshift(arr.pop());
-  else arr.push(arr.shift());
-  return arr;
-}
 </script>
-
 <style lang="postcss">
-@import 'pikaday/css/pikaday.css';
-
 .base-date-picker--inline {
-  .pikaday-white.pika-single {
+  .flatpickr-calendar.inline {
     box-shadow: none;
     border: none;
     padding: 0;
+    margin-top: 6px;
   }
-  .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");
+.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
+  font-weight: 400;
 }
-.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");
+.flatpickr-calendar .flatpickr-current-month input.cur-year {
+  font-weight: 400;
 }
-.pika-prev.is-disabled,
-.pika-next.is-disabled {
-  cursor: default;
-  opacity: 0.2;
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #888;
 }
-
-.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 */
+.flatpickr-calendar span.flatpickr-weekday {
+  @apply font-medium text-slate-400;
 }
-
-.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);
+.flatpickr-calendar .flatpickr-current-month {
+  padding-top: 5px;
 }
 </style>

package/src/components/BaseDropdown.stories.js

@@ -171,7 +171,7 @@ export const WithDatePicker = (args) => ({
       <div class="btn btn-primary">Click me</div>
     </template>
     <template #dropdown>
-      <div class="bg-white shadow-lg rounded border p-2 w-[260px]">
+      <div class="bg-white shadow-lg rounded border p-2">
         <BaseDatePicker v-model="date" inline></BaseDatePicker>
       </div>
     </template>

package/src/components/BaseInputLabel.stories.js

@@ -20,7 +20,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-  <form @submit.prevent="">
+  <form @submit.prevent="" class="mt-10">
     <BaseInputLabel v-bind="args"></BaseInputLabel>
     <BaseInput required name="name" placeholder="Enter your first name"></BaseInput>
   </form>
@@ -29,3 +29,8 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {};
+
+export const Help = Template.bind({});
+Help.args = {
+  help: 'Enter your first name here',
+};

package/src/components/BaseInputLabel.vue

@@ -1,13 +1,50 @@
 <template>
   <label :class="classes">
-    {{ label }}<span v-if="required" class="text-red-600"> *</span>
+    <div
+      class="relative"
+      :class="[help ? 'cursor-help' : 'cursor-default']"
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+    >
+      <span> {{ label }}</span>
+
+      <BaseIcon
+        v-if="help"
+        class="relative bottom-px ml-1 inline h-4 w-4 text-slate-400"
+        icon="heroicons:question-mark-circle-20-solid"
+      />
+
+      <span v-if="required" class="ml-0.5 text-red-600"> *</span>
+
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <div
+          v-if="showTooltip && help"
+          class="pointer-events-none absolute bottom-[100%] left-0 z-[1] w-auto max-w-[300px]"
+        >
+          <div
+            class="relative bottom-1 rounded-md bg-slate-700 py-1 px-2 text-xs leading-tight text-white"
+          >
+            {{ help }}
+          </div>
+        </div>
+      </Transition>
+    </div>
   </label>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
+import { BaseIcon } from '.';
 
 export default defineComponent({
+  components: { BaseIcon },
   props: {
     required: {
       default: false,
@@ -21,6 +58,15 @@ export default defineComponent({
       default: 'mb-1 block text-sm',
       type: String,
     },
+    help: {
+      default: null,
+      type: [String, null] as PropType<string | null>,
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
   },
 });
 </script>