sprintify-ui 0.0.142 → 0.0.144

package/src/components/BaseDatePicker.vue

@@ -1,10 +1,7 @@
 <template>
-  <div
-    class="base-date-picker relative"
-    :class="{ 'base-date-picker--inline': inline }"
-  >
+  <div class="base-date-picker relative">
     <div
-      class="pointer-events-none absolute top-0 left-0 flex h-10 items-center justify-center pl-2.5"
+      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"
@@ -22,11 +19,11 @@
     />
     <div
       v-if="modelValueFormatted && !disabled"
-      class="absolute right-0 top-0.5 flex h-full justify-center p-1"
+      class="absolute right-0 top-0 flex h-[42px] items-center justify-center p-1"
     >
       <button
         type="button"
-        class="flex h-8 items-center rounded p-1 hover:bg-slate-200"
+        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" />
@@ -131,17 +128,39 @@ const modelValueFormatted = computed((): string | string[] | null => {
     const listModelValue = [] as string[];
 
     props.modelValue.forEach(function (date) {
-      listModelValue.push(DateTime.fromISO(date, { zone: 'utc' }).toISODate());
+      listModelValue.push(parseDate(date));
     });
 
     return listModelValue;
   }
 
-  return (
-    DateTime.fromISO(props.modelValue, { zone: 'utc' }).toISODate() ?? null
-  );
+  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);
+  }
+
+  return DateTime.fromSQL(date);
+}
+
+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 (props.locale === 'fr') {
     return French;
@@ -165,6 +184,8 @@ const flatpickrConfig = computed(() => {
     noCalendar: props.noCalendar,
     disable: props.disableDates,
     inline: props.inline,
+    animate: false,
+    time_24hr: true,
   };
 });
 
@@ -246,11 +267,7 @@ function init() {
       const listDate = [] as string[];
 
       dates.forEach(function (date) {
-        if (props.enableTime) {
-          listDate.push(DateTime.fromJSDate(date, { zone: 'utc' }).toISO());
-        } else {
-          listDate.push(DateTime.fromJSDate(date, { zone: 'utc' }).toISODate());
-        }
+        listDate.push(luxonToString(dateJsToLuxon(date)));
       });
 
       if (listDate.length == 0) {
@@ -273,28 +290,99 @@ function clear() {
 }
 </script>
 <style lang="postcss">
-.base-date-picker--inline {
-  .flatpickr-calendar.inline {
+body .flatpickr-calendar {
+  width: 280px;
+  box-shadow: 1px 0 0 #cbd5e1, -1px 0 0 #cbd5e1, 0 1px 0 #cbd5e1,
+    0 -1px 0 #cbd5e1, 0 3px 13px rgb(0 0 0 / 10%);
+
+  &.inline {
+    width: 260px;
     box-shadow: none;
     border: none;
     padding: 0;
-    margin-top: 6px;
+
+    .flatpickr-months {
+      width: 260px;
+    }
+
+    .flatpickr-innerContainer {
+      padding: 0;
+      width: 260px;
+    }
+  }
+
+  .dayContainer {
+    width: 260px;
+    max-width: 260px;
+    min-width: 260px;
+  }
+
+  .flatpickr-day {
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .flatpickr-months {
+    width: 280px;
+    padding-top: 10px;
+
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      top: 5px;
+    }
+
+    .flatpickr-prev-month {
+      left: 2px;
+    }
+
+    .flatpickr-next-month {
+      right: 2px;
+    }
+
+    .flatpickr-prev-month:hover svg,
+    .flatpickr-next-month:hover svg {
+      fill: #888;
+    }
+  }
+
+  .flatpickr-current-month {
+    padding-top: 1px;
+
+    .flatpickr-monthDropdown-months {
+      font-weight: 400;
+      height: 25px;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    input.cur-year {
+      font-weight: 400;
+      height: 25px;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .flatpickr-innerContainer {
+    padding: 10px;
+    padding-top: 0;
+    width: 280px;
+  }
+
+  .flatpickr-rContainer {
+    width: 260px;
+  }
+
+  .numInput {
+    &:focus {
+      box-shadow: none;
+    }
   }
 }
-.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
-  font-weight: 400;
-}
-.flatpickr-calendar .flatpickr-current-month input.cur-year {
-  font-weight: 400;
-}
-.flatpickr-months .flatpickr-prev-month:hover svg,
-.flatpickr-months .flatpickr-next-month:hover svg {
-  fill: #888;
-}
+
 .flatpickr-calendar span.flatpickr-weekday {
   @apply font-medium text-slate-400;
 }
-.flatpickr-calendar .flatpickr-current-month {
-  padding-top: 5px;
-}
 </style>