@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/DatePicker.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 /** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
+import { useDropdownState } from '../composables/useDropdownState'
+import { useEventListener } from '../composables/useEventListener'
+import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
@@ -24,12 +28,25 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
-const inputRef = ref<HTMLDivElement>()
-const dropdownRef = ref<HTMLDivElement>()
+const inputRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const currentMonth = ref(new Date())
+const { isOpen, rootRef: containerRef, close, toggle } = useDropdownState({
+  insideRefs: [dropdownRef],
+})
+const {
+  weekDays,
+  monthYear,
+  calendarDays,
+  isDateDisabled,
+  formatDateValue,
+  setCurrentMonthFromDate,
+  prevMonth,
+  nextMonth,
+} = useCalendarGrid({
+  min: () => props.min,
+  max: () => props.max,
+})
 
 const selectedDate = computed(() => {
   if (!props.modelValue) return null
@@ -46,114 +63,29 @@ const displayValue = computed(() => {
   })
 })
 
-const monthYear = computed(() => {
-  return currentMonth.value.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-  })
-})
-
-const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-
-const calendarDays = computed(() => {
-  const year = currentMonth.value.getFullYear()
-  const month = currentMonth.value.getMonth()
-
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-
-  const days: { date: Date; isCurrentMonth: boolean; isDisabled: boolean }[] = []
-
-  // Previous month days
-  const startPadding = firstDay.getDay()
-  for (let i = startPadding - 1; i >= 0; i--) {
-    const date = new Date(year, month, -i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  // Current month days
-  for (let i = 1; i <= lastDay.getDate(); i++) {
-    const date = new Date(year, month, i)
-    days.push({ date, isCurrentMonth: true, isDisabled: isDateDisabled(date) })
-  }
-
-  // Next month days
-  const endPadding = 42 - days.length
-  for (let i = 1; i <= endPadding; i++) {
-    const date = new Date(year, month + 1, i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  return days
-})
-
-function isDateDisabled(date: Date): boolean {
-  if (props.min) {
-    const minDate = new Date(props.min + 'T00:00:00')
-    if (date < minDate) return true
-  }
-  if (props.max) {
-    const maxDate = new Date(props.max + 'T00:00:00')
-    if (date > maxDate) return true
-  }
-  return false
-}
-
-function isSameDay(date1: Date, date2: Date | null): boolean {
-  if (!date2) return false
-  return date1.toDateString() === date2.toDateString()
-}
-
-function isToday(date: Date): boolean {
-  return date.toDateString() === new Date().toDateString()
-}
-
-function formatDateValue(date: Date): string {
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-function selectDate(day: { date: Date; isDisabled: boolean }) {
+function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
   emit('update:modelValue', formatDateValue(day.date))
-  isOpen.value = false
-}
-
-function prevMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() - 1,
-    1
-  )
-}
-
-function nextMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() + 1,
-    1
-  )
+  close()
 }
 
 function goToToday() {
   const today = new Date()
-  currentMonth.value = new Date(today.getFullYear(), today.getMonth(), 1)
+  setCurrentMonthFromDate(today)
   if (!isDateDisabled(today)) {
     emit('update:modelValue', formatDateValue(today))
-    isOpen.value = false
+    close()
   }
 }
 
 function clear() {
   emit('update:modelValue', undefined)
-  isOpen.value = false
+  close()
 }
 
 function toggleCalendar() {
   if (props.disabled) return
-  isOpen.value = !isOpen.value
+  toggle()
 }
 
 function updateDropdownPosition() {
@@ -168,41 +100,21 @@ function updateDropdownPosition() {
   }
 }
 
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-  if (containerRef.value?.contains(target)) return
-  if (dropdownRef.value?.contains(target)) return
-  isOpen.value = false
-}
-
 function handleScrollOrResize() {
-  if (isOpen.value) isOpen.value = false
+  close()
 }
 
 watch(isOpen, (open) => {
   if (open) {
     updateDropdownPosition()
     if (selectedDate.value) {
-      currentMonth.value = new Date(
-        selectedDate.value.getFullYear(),
-        selectedDate.value.getMonth(),
-        1
-      )
+      setCurrentMonthFromDate(selectedDate.value)
     }
   }
 })
 
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  window.addEventListener('scroll', handleScrollOrResize, true)
-  window.addEventListener('resize', handleScrollOrResize)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  window.removeEventListener('scroll', handleScrollOrResize, true)
-  window.removeEventListener('resize', handleScrollOrResize)
-})
+useEventListener(() => window, 'scroll', handleScrollOrResize, true)
+useEventListener(() => window, 'resize', handleScrollOrResize)
 </script>
 
 <template>
@@ -247,79 +159,34 @@ onUnmounted(() => {
           aria-modal="true"
           aria-label="Date picker"
         >
-        <div class="mint-date-picker__header">
-          <button
-            type="button"
-            aria-label="Previous month"
-            class="mint-date-picker__nav-btn"
-            @click="prevMonth"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m15 18-6-6 6-6" />
-            </svg>
-          </button>
-          <span class="mint-date-picker__month-year">{{ monthYear }}</span>
-          <button
-            type="button"
-            aria-label="Next month"
-            class="mint-date-picker__nav-btn"
-            @click="nextMonth"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-          </button>
-        </div>
-
-        <div class="mint-date-picker__weekdays">
-          <div
-            v-for="day in weekDays"
-            :key="day"
-            class="mint-date-picker__weekday"
-          >
-            {{ day }}
+          <CalendarGridPanelInternal
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
+
+          <div class="mint-date-picker__footer">
+            <button
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
+              @click="goToToday"
+            >
+              Today
+            </button>
+            <button
+              v-if="clearable && modelValue"
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
+              @click="clear"
+            >
+              Clear
+            </button>
           </div>
         </div>
-
-        <div class="mint-date-picker__grid">
-          <button
-            v-for="(day, index) in calendarDays"
-            :key="index"
-            type="button"
-            :disabled="day.isDisabled"
-            :aria-label="day.date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })"
-            :aria-selected="isSameDay(day.date, selectedDate)"
-            :class="[
-              'mint-date-picker__day',
-              !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
-              day.isDisabled ? 'mint-date-picker__day--disabled' : '',
-              isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
-              isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
-            ]"
-            @click="selectDate(day)"
-          >
-            {{ day.date.getDate() }}
-          </button>
-        </div>
-
-        <div class="mint-date-picker__footer">
-          <button
-            type="button"
-            class="mint-date-picker__footer-btn mint-date-picker__today-btn"
-            @click="goToToday"
-          >
-            Today
-          </button>
-          <button
-            v-if="clearable && modelValue"
-            type="button"
-            class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
-            @click="clear"
-          >
-            Clear
-          </button>
-        </div>
-        </div>
       </Transition>
     </Teleport>
   </div>

package/src/components/DateTimePicker.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import { generateTimeSlots, formatTime, parseTime } from '../composables/useTimeUtils'
+import { computed, watch, nextTick } from 'vue'
+import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
+import { useDropdownState } from '../composables/useDropdownState'
+import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
+import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
@@ -32,8 +35,20 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
+const { isOpen, rootRef, close, toggle } = useDropdownState()
+const {
+  weekDays,
+  monthYear,
+  calendarDays,
+  formatDateValue,
+  setCurrentMonthFromDate,
+  prevMonth,
+  nextMonth,
+} = useCalendarGrid({
+  min: () => props.min,
+  max: () => props.max,
+  locale: () => props.locale,
+})
 
 // Parse model value into date and time parts
 const selectedDate = computed(() => {
@@ -44,10 +59,7 @@ const selectedDate = computed(() => {
 
 const selectedDateStr = computed(() => {
   if (!selectedDate.value) return null
-  const y = selectedDate.value.getFullYear()
-  const m = String(selectedDate.value.getMonth() + 1).padStart(2, '0')
-  const d = String(selectedDate.value.getDate()).padStart(2, '0')
-  return `${y}-${m}-${d}`
+  return formatDateValue(selectedDate.value)
 })
 
 const selectedTimeStr = computed(() => {
@@ -70,196 +82,89 @@ const displayValue = computed(() => {
   return `${dateStr} ${timeStr}`
 })
 
-// Calendar state
-const currentMonth = ref(new Date())
-const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-
-const calendarDays = computed(() => {
-  const year = currentMonth.value.getFullYear()
-  const month = currentMonth.value.getMonth()
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-
-  const days: { date: Date; isCurrentMonth: boolean; isDisabled: boolean }[] = []
-
-  const startPadding = firstDay.getDay()
-  for (let i = startPadding - 1; i >= 0; i--) {
-    const date = new Date(year, month, -i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  for (let i = 1; i <= lastDay.getDate(); i++) {
-    const date = new Date(year, month, i)
-    days.push({ date, isCurrentMonth: true, isDisabled: isDateDisabled(date) })
-  }
-
-  const endPadding = 42 - days.length
-  for (let i = 1; i <= endPadding; i++) {
-    const date = new Date(year, month + 1, i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  return days
-})
-
 // Time slots
 const timeSlots = computed(() => {
   return generateTimeSlots('00:00', '23:59', props.timeStep)
 })
 
-const monthYear = computed(() => {
-  return currentMonth.value.toLocaleDateString(props.locale, {
-    year: 'numeric',
-    month: 'long',
-  })
-})
-
-function isDateDisabled(date: Date): boolean {
-  if (props.min) {
-    const minDate = new Date(props.min)
-    minDate.setHours(0, 0, 0, 0)
-    const check = new Date(date)
-    check.setHours(0, 0, 0, 0)
-    if (check < minDate) return true
-  }
-  if (props.max) {
-    const maxDate = new Date(props.max)
-    maxDate.setHours(23, 59, 59, 999)
-    const check = new Date(date)
-    check.setHours(23, 59, 59, 999)
-    if (check > maxDate) return true
-  }
-  return false
-}
-
 function isTimeDisabled(time: string): boolean {
   if (!selectedDateStr.value) return false
-  const { hour, minute } = parseTime(time)
+  const timeMinutes = toMinutes(time)
 
   if (props.min) {
     const minDate = new Date(props.min)
-    if (selectedDateStr.value === formatDateStr(minDate)) {
+    if (selectedDateStr.value === formatDateValue(minDate)) {
       const minMin = minDate.getHours() * 60 + minDate.getMinutes()
-      if (hour * 60 + minute < minMin) return true
+      if (timeMinutes < minMin) return true
     }
   }
   if (props.max) {
     const maxDate = new Date(props.max)
-    if (selectedDateStr.value === formatDateStr(maxDate)) {
+    if (selectedDateStr.value === formatDateValue(maxDate)) {
       const maxMin = maxDate.getHours() * 60 + maxDate.getMinutes()
-      if (hour * 60 + minute > maxMin) return true
+      if (timeMinutes > maxMin) return true
     }
   }
   return false
 }
 
-function formatDateStr(d: Date): string {
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${y}-${m}-${day}`
-}
-
-function isSameDay(a: Date, b: Date | null): boolean {
-  if (!b) return false
-  return a.toDateString() === b.toDateString()
-}
-
-function isToday(date: Date): boolean {
-  return date.toDateString() === new Date().toDateString()
-}
-
-function selectDate(day: { date: Date; isDisabled: boolean }) {
+function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
-  const dateStr = formatDateStr(day.date)
+  const dateStr = formatDateValue(day.date)
   const timeStr = selectedTimeStr.value || '09:00'
   emit('update:modelValue', `${dateStr}T${timeStr}`)
 }
 
 function selectTime(time: string) {
   if (isTimeDisabled(time)) return
-  const dateStr = selectedDateStr.value || formatDateStr(new Date())
+  const dateStr = selectedDateStr.value || formatDateValue(new Date())
   emit('update:modelValue', `${dateStr}T${time}`)
 }
 
-function prevMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() - 1,
-    1,
-  )
-}
-
-function nextMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() + 1,
-    1,
-  )
-}
-
 function goToNow() {
   const now = new Date()
-  currentMonth.value = new Date(now.getFullYear(), now.getMonth(), 1)
-  const dateStr = formatDateStr(now)
+  setCurrentMonthFromDate(now)
+  const dateStr = formatDateValue(now)
   const timeStr = formatTime(now.getHours(), now.getMinutes())
   emit('update:modelValue', `${dateStr}T${timeStr}`)
-  isOpen.value = false
+  close()
 }
 
 function goToToday() {
   const today = new Date()
-  currentMonth.value = new Date(today.getFullYear(), today.getMonth(), 1)
-  const dateStr = formatDateStr(today)
+  setCurrentMonthFromDate(today)
+  const dateStr = formatDateValue(today)
   const timeStr = selectedTimeStr.value || '09:00'
   emit('update:modelValue', `${dateStr}T${timeStr}`)
 }
 
 function clear() {
   emit('update:modelValue', undefined)
-  isOpen.value = false
+  close()
 }
 
 function toggleDropdown() {
   if (props.disabled) return
-  isOpen.value = !isOpen.value
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
+  toggle()
 }
 
 watch(isOpen, (open) => {
   if (open && selectedDate.value) {
-    currentMonth.value = new Date(
-      selectedDate.value.getFullYear(),
-      selectedDate.value.getMonth(),
-      1,
-    )
+    setCurrentMonthFromDate(selectedDate.value)
     nextTick(() => {
       // Scroll time grid to selected time
-      const grid = containerRef.value?.querySelector('.mint-datetime-picker__time-grid')
-      const active = containerRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
+      const grid = rootRef.value?.querySelector('.mint-datetime-picker__time-grid')
+      const active = rootRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
       if (grid && active) {
         active.scrollIntoView({ block: 'center' })
       }
     })
   }
 })
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
 </script>
 
 <template>
-  <div ref="containerRef" class="mint-datetime-picker">
+  <div ref="rootRef" class="mint-datetime-picker">
     <div class="mint-datetime-picker__input-wrapper">
       <div class="mint-datetime-picker__icon-calendar">
         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -305,42 +210,16 @@ onUnmounted(() => {
       >
         <!-- Calendar section -->
         <div class="mint-datetime-picker__calendar-section">
-          <div class="mint-date-picker__header">
-            <button type="button" class="mint-date-picker__nav-btn" aria-label="Previous month" @click="prevMonth">
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-              </svg>
-            </button>
-            <span class="mint-date-picker__month-year">{{ monthYear }}</span>
-            <button type="button" class="mint-date-picker__nav-btn" aria-label="Next month" @click="nextMonth">
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-
-          <div class="mint-date-picker__weekdays">
-            <div v-for="day in weekDays" :key="day" class="mint-date-picker__weekday">{{ day }}</div>
-          </div>
-
-          <div class="mint-date-picker__grid">
-            <button
-              v-for="(day, index) in calendarDays"
-              :key="index"
-              type="button"
-              :disabled="day.isDisabled"
-              :class="[
-                'mint-date-picker__day',
-                !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
-                day.isDisabled ? 'mint-date-picker__day--disabled' : '',
-                isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
-                isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
-              ]"
-              @click="selectDate(day)"
-            >
-              {{ day.date.getDate() }}
-            </button>
-          </div>
+          <CalendarGridPanelInternal
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            :locale="locale"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
         </div>
 
         <!-- Divider -->
@@ -362,7 +241,7 @@ onUnmounted(() => {
               ]"
               @click="selectTime(time)"
             >
-              {{ timeFormat === '12h' ? formatTime(parseTime(time).hour, parseTime(time).minute, '12h') : time }}
+              {{ formatTimeSlot(time, timeFormat) }}
             </button>
           </div>
         </div>