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

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 CalendarGridPanel from './CalendarGridPanel.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>
+          <CalendarGridPanel
+            :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>

package/src/components/DropdownButton.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import type { SelectOption, ButtonVariant, ButtonSize } from '../types'
+import { computed } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import type { SelectOption, SelectOptionInput, ButtonVariant, ButtonSize } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 
 /**
  * DropdownButton - Button-style select with dropdown menu for option selection.
@@ -22,7 +24,7 @@ interface Props {
   /** Selected option value */
   modelValue?: string | number
   /** Available options */
-  options: SelectOption<string | number>[]
+  options: SelectOptionInput<string | number>[]
   /** Placeholder text when no option is selected */
   placeholder?: string
   /** Button style variant */
@@ -51,52 +53,32 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
+const { isOpen, rootRef, close, toggle: toggleDropdown } = useDropdownState()
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput)
+)
 
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
-  const found = props.options.find(o => o.value === props.modelValue)
+  const found = normalizedOptions.value.find(o => o.value === props.modelValue)
   return found?.label ?? String(props.modelValue)
 })
 
 function toggle() {
   if (props.disabled || props.loading) return
-  isOpen.value = !isOpen.value
+  toggleDropdown()
 }
 
 function selectOption(option: SelectOption<string | number>) {
   if (option.disabled) return
   emit('update:modelValue', option.value)
   emit('select', option)
-  isOpen.value = false
+  close()
 }
-
-function handleClickOutside(event: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
-  <div ref="containerRef" class="mint-dropdown-button">
+  <div ref="rootRef" class="mint-dropdown-button">
     <button
       type="button"
       :disabled="disabled || loading"
@@ -139,7 +121,7 @@ onUnmounted(() => {
         :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
       >
         <li
-          v-for="option in options"
+          v-for="option in normalizedOptions"
           :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"

package/src/components/EmptyState.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 /** Empty-state placeholder with icon badge, headline, description, default slot, and optional CTA button. */
+import BaseButton from './BaseButton.vue'
+
 interface Props {
   title?: string
   description?: string
@@ -57,9 +59,9 @@ const defaultIconPaths = [
       <slot />
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
-      <button class="mint-empty-state__button" @click="emit('action')">
+      <BaseButton @click="emit('action')">
         {{ actionLabel }}
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>

package/src/components/ExperimentPopover.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
 import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
@@ -32,19 +33,12 @@ const emit = defineEmits<{
   detach: []
 }>()
 
-const isOpen = ref(false)
-const popoverRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef: popoverRef, close, toggle } = useDropdownState({
+  closeOnEscape: false,
+})
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
-function close() {
-  isOpen.value = false
-}
-
 function handleSelect() {
   emit('select')
   close()
@@ -69,12 +63,6 @@ function handleDetach() {
   close()
 }
 
-function handleClickOutside(event: MouseEvent) {
-  if (popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
-    close()
-  }
-}
-
 let successTimer: ReturnType<typeof setTimeout> | null = null
 
 // Show success state when saveSuccessMessage changes from empty to a value
@@ -89,12 +77,7 @@ watch(() => props.saveSuccessMessage, (msg) => {
   }
 })
 
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
   if (successTimer) clearTimeout(successTimer)
 })