sprintify-ui 0.0.158 → 0.0.160

package/dist/types/src/components/BaseDatePicker.vue.d.ts

@@ -1,126 +1,89 @@
-import { PropType } from 'vue';
 import 'flatpickr/dist/flatpickr.css';
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        default: undefined;
-        type: PropType<string | string[] | null | undefined>;
-    };
-    required: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    disabled: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    minDate: {
-        default: null;
-        type: (StringConstructor | DateConstructor)[];
-    };
-    maxDate: {
-        default: null;
-        type: (StringConstructor | DateConstructor)[];
-    };
-    hasError: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    name: {
-        default: undefined;
-        type: StringConstructor;
-    };
-    inline: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    enableTime: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    format: {
-        default: string;
-        type: StringConstructor;
-    };
-    mode: {
-        default: string;
-        type: PropType<"time" | "multiple" | "single" | "range" | undefined>;
-    };
-    noCalendar: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    disableDates: {
-        type: PropType<string[] | Date[]>;
-        default(): never[];
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        default: undefined;
-        type: PropType<string | string[] | null | undefined>;
-    };
-    required: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    disabled: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    minDate: {
-        default: null;
-        type: (StringConstructor | DateConstructor)[];
-    };
-    maxDate: {
-        default: null;
-        type: (StringConstructor | DateConstructor)[];
-    };
-    hasError: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    name: {
-        default: undefined;
-        type: StringConstructor;
-    };
-    inline: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    enableTime: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    format: {
-        default: string;
-        type: StringConstructor;
-    };
-    mode: {
-        default: string;
-        type: PropType<"time" | "multiple" | "single" | "range" | undefined>;
-    };
-    noCalendar: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    disableDates: {
-        type: PropType<string[] | Date[]>;
-        default(): never[];
-    };
-}>> & {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | string[] | null | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    minDate?: string | Date | null | undefined;
+    maxDate?: string | Date | null | undefined;
+    hasError?: boolean | undefined;
+    name?: string | undefined;
+    inline?: boolean | undefined;
+    enableTime?: boolean | undefined;
+    format?: string | undefined;
+    mode?: "time" | "multiple" | "single" | "range" | undefined;
+    noCalendar?: boolean | undefined;
+    disableDates?: string[] | Date[] | undefined;
+}>, {
+    modelValue: null;
+    required: boolean;
+    disabled: boolean;
+    minDate: null;
+    maxDate: null;
+    hasError: boolean;
+    name: undefined;
+    inline: boolean;
+    enableTime: boolean;
+    format: string;
+    mode: string;
+    noCalendar: boolean;
+    disableDates(): never[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | string[] | null | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    minDate?: string | Date | null | undefined;
+    maxDate?: string | Date | null | undefined;
+    hasError?: boolean | undefined;
+    name?: string | undefined;
+    inline?: boolean | undefined;
+    enableTime?: boolean | undefined;
+    format?: string | undefined;
+    mode?: "time" | "multiple" | "single" | "range" | undefined;
+    noCalendar?: boolean | undefined;
+    disableDates?: string[] | Date[] | undefined;
+}>, {
+    modelValue: null;
+    required: boolean;
+    disabled: boolean;
+    minDate: null;
+    maxDate: null;
+    hasError: boolean;
+    name: undefined;
+    inline: boolean;
+    enableTime: boolean;
+    format: string;
+    mode: string;
+    noCalendar: boolean;
+    disableDates(): never[];
+}>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     name: string;
-    mode: "time" | "multiple" | "single" | "range" | undefined;
+    mode: 'single' | 'multiple' | 'range' | 'time';
     disabled: boolean;
-    modelValue: string | string[] | null | undefined;
+    modelValue: string | null | string[];
     hasError: boolean;
     inline: boolean;
-    minDate: string | Date;
-    maxDate: string | Date;
+    minDate: string | Date | null;
+    maxDate: string | Date | null;
     enableTime: boolean;
     format: string;
     noCalendar: boolean;
     disableDates: string[] | Date[];
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.158",
+  "version": "0.0.160",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDatePicker.stories.js

@@ -7,6 +7,12 @@ export default {
   title: 'Form/BaseDatePicker',
   component: BaseDatePicker,
   argTypes: {
+    minDate: {
+      control: { type: 'text' },
+    },
+    maxDate: {
+      control: { type: 'text' },
+    },
     mode: {
       control: { type: 'select' },
       options: ['single', 'multiple', 'range', 'time'],
@@ -35,7 +41,7 @@ export const Demo = Template.bind({});
 
 export const MinDate = Template.bind({});
 MinDate.args = {
-  minDate: DateTime.fromISO('2023-01-05').toJSDate(),
+  minDate: DateTime.fromISO('2023-01-05').toISODate(),
 };
 
 export const MaxDate = Template.bind({});

package/src/components/BaseDatePicker.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { Ref } from 'vue';
 import { isArray } from 'lodash';
 import { DateTime } from 'luxon';
 import { BaseIcon } from '.';
@@ -45,66 +45,40 @@ 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, Array] as PropType<
-      string | null | string[] | undefined
-    >,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  minDate: {
-    default: null,
-    type: [String, Date],
-  },
-  maxDate: {
-    default: null,
-    type: [String, Date],
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  inline: {
-    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
-    >,
-  },
-  noCalendar: {
-    default: false,
-    type: Boolean,
-  },
-  disableDates: {
-    type: [Array, Object] as PropType<string[] | Date[]>,
-    default() {
+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;
+    enableTime?: boolean;
+    format?: string;
+    mode?: 'single' | 'multiple' | 'range' | 'time';
+    noCalendar?: boolean;
+    disableDates?: string[] | Date[];
+  }>(),
+  {
+    modelValue: null,
+    required: false,
+    disabled: false,
+    minDate: null,
+    maxDate: null,
+    hasError: false,
+    name: undefined,
+    inline: false,
+    enableTime: false,
+    format: 'Y-m-d',
+    mode: 'single',
+    noCalendar: false,
+    disableDates() {
       return [];
     },
-  },
-});
+  }
+);
 
 const i18n = useI18n();
 
@@ -144,7 +118,7 @@ function stringToLuxon(date: string): DateTime {
     return DateTime.fromISO(date);
   }
 
-  return DateTime.fromSQL(date);
+  return DateTime.fromSQL(date, { zone: 'utc' });
 }
 
 function luxonToString(date: DateTime): string {
@@ -177,8 +151,8 @@ const flatpickrConfig = computed(() => {
     dateFormat: props.format,
     mode: props.mode,
     locale: locale.value,
-    minDate: props.minDate,
-    maxDate: props.maxDate,
+    minDate: props.minDate ?? undefined,
+    maxDate: props.maxDate ?? undefined,
     noCalendar: props.noCalendar,
     disable: props.disableDates,
     inline: props.inline,
@@ -187,7 +161,7 @@ const flatpickrConfig = computed(() => {
   };
 });
 
-// Make sure the model value is always formatted on the parent component
+// Make sure the model value is formatted on the parent component onload
 onMounted(() => {
   if (props.modelValue !== modelValueFormatted.value) {
     emitUpdate(modelValueFormatted.value);
@@ -212,8 +186,10 @@ function setPickerDate() {
     return;
   }
 
-  if (!modelValueFormatted.value) {
-    picker.clear();
+  if (!modelValueFormatted.value || modelValueFormatted.value.length == 0) {
+    if (picker.selectedDates.length > 0) {
+      picker.clear();
+    }
     return;
   }
 
@@ -248,6 +224,8 @@ function init() {
     return;
   }
 
+  picker?.destroy();
+
   picker = flatpickr(datepicker.value, {
     ...flatpickrConfig.value,
     onChange(dates) {
@@ -290,6 +268,7 @@ function clear() {
   emitUpdate(null);
 }
 </script>
+
 <style lang="postcss">
 body .flatpickr-calendar {
   width: 280px;