@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/DatePicker.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+/** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
+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
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  error: false,
+  size: 'md',
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const inputRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
+const dropdownStyle = ref<Record<string, string>>({})
+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
+  const date = new Date(props.modelValue + 'T00:00:00')
+  return isNaN(date.getTime()) ? null : date
+})
+
+const displayValue = computed(() => {
+  if (!selectedDate.value) return ''
+  return selectedDate.value.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+})
+
+function selectDate(day: CalendarGridDay) {
+  if (day.isDisabled || props.disabled) return
+  emit('update:modelValue', formatDateValue(day.date))
+  close()
+}
+
+function goToToday() {
+  const today = new Date()
+  setCurrentMonthFromDate(today)
+  if (!isDateDisabled(today)) {
+    emit('update:modelValue', formatDateValue(today))
+    close()
+  }
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  close()
+}
+
+function toggleCalendar() {
+  if (props.disabled) return
+  toggle()
+}
+
+function updateDropdownPosition() {
+  if (!inputRef.value) return
+  const rect = inputRef.value.getBoundingClientRect()
+  dropdownStyle.value = {
+    position: 'fixed',
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${Math.max(rect.width, 288)}px`,
+    zIndex: '9999',
+  }
+}
+
+function handleScrollOrResize() {
+  close()
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    updateDropdownPosition()
+    if (selectedDate.value) {
+      setCurrentMonthFromDate(selectedDate.value)
+    }
+  }
+})
+
+useEventListener(() => window, 'scroll', handleScrollOrResize, true)
+useEventListener(() => window, 'resize', handleScrollOrResize)
+</script>
+
+<template>
+  <div ref="containerRef" class="mint-date-picker">
+    <div ref="inputRef" class="mint-date-picker__input-wrapper">
+      <input
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder || 'Select date'"
+        :disabled="disabled"
+        :class="[
+          'mint-date-picker__input',
+          `mint-date-picker__input--${size}`,
+          error ? 'mint-date-picker__input--error' : '',
+          disabled ? 'mint-date-picker__input--disabled' : '',
+        ]"
+        @click="toggleCalendar"
+      />
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="mint-date-picker__dropdown-enter-active"
+        enter-from-class="mint-date-picker__dropdown-enter-from"
+        enter-to-class="mint-date-picker__dropdown-enter-to"
+        leave-active-class="mint-date-picker__dropdown-leave-active"
+        leave-from-class="mint-date-picker__dropdown-leave-from"
+        leave-to-class="mint-date-picker__dropdown-leave-to"
+      >
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="mint-date-picker__dropdown"
+          :style="dropdownStyle"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Date picker"
+        >
+          <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>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/date-picker.css';
+</style>

package/src/components/DateTimePicker.story.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import DateTimePicker from './DateTimePicker.vue'
+
+const now = new Date()
+const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T09:00`
+
+const nextWeek = new Date(now)
+nextWeek.setDate(nextWeek.getDate() + 7)
+const nextWeekStr = nextWeek.toISOString()
+
+function initState() {
+  return {
+    modelValue: today as string | undefined,
+    placeholder: 'Select date & time',
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    timeStep: 15,
+    timeFormat: '24h' as const,
+    clearable: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Scheduling/DateTimePicker">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px;">
+          <DateTimePicker
+            v-model="state.modelValue"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :time-step="state.timeStep"
+            :time-format="state.timeFormat"
+            :clearable="state.clearable"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.modelValue" title="Value (ISO)" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSlider v-model="state.timeStep" title="Time Step (minutes)" :min="5" :max="60" :step="5" />
+        <HstSelect
+          v-model="state.timeFormat"
+          title="Time Format"
+          :options="[
+            { value: '24h', label: '24-hour' },
+            { value: '12h', label: '12-hour' },
+          ]"
+        />
+        <HstCheckbox v-model="state.clearable" title="Clearable" />
+      </template>
+    </Variant>
+
+    <Variant title="12-Hour Format">
+      <div style="padding: 2rem; max-width: 400px;">
+        <DateTimePicker
+          :model-value="today"
+          time-format="12h"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max Range">
+      <div style="padding: 2rem; max-width: 400px;">
+        <DateTimePicker
+          :model-value="today"
+          :min="today"
+          :max="nextWeekStr"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Clearable">
+      <div style="padding: 2rem; max-width: 400px;">
+        <DateTimePicker
+          :model-value="today"
+          clearable
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Value">
+      <div style="padding: 2rem; max-width: 400px;">
+        <DateTimePicker placeholder="Pick a date and time" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px;">
+        <DateTimePicker
+          :model-value="today"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/DateTimePicker.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+/** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
+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
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  timeStep?: number
+  timeFormat?: '12h' | '24h'
+  clearable?: boolean
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select date & time',
+  disabled: false,
+  error: false,
+  size: 'md',
+  timeStep: 15,
+  timeFormat: '24h',
+  clearable: false,
+  locale: 'en-US',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+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(() => {
+  if (!props.modelValue) return null
+  const d = new Date(props.modelValue)
+  return isNaN(d.getTime()) ? null : d
+})
+
+const selectedDateStr = computed(() => {
+  if (!selectedDate.value) return null
+  return formatDateValue(selectedDate.value)
+})
+
+const selectedTimeStr = computed(() => {
+  if (!selectedDate.value) return null
+  return formatTime(selectedDate.value.getHours(), selectedDate.value.getMinutes())
+})
+
+const displayValue = computed(() => {
+  if (!selectedDate.value) return ''
+  const dateStr = selectedDate.value.toLocaleDateString(props.locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+  const timeStr = formatTime(
+    selectedDate.value.getHours(),
+    selectedDate.value.getMinutes(),
+    props.timeFormat,
+  )
+  return `${dateStr} ${timeStr}`
+})
+
+// Time slots
+const timeSlots = computed(() => {
+  return generateTimeSlots('00:00', '23:59', props.timeStep)
+})
+
+function isTimeDisabled(time: string): boolean {
+  if (!selectedDateStr.value) return false
+  const timeMinutes = toMinutes(time)
+
+  if (props.min) {
+    const minDate = new Date(props.min)
+    if (selectedDateStr.value === formatDateValue(minDate)) {
+      const minMin = minDate.getHours() * 60 + minDate.getMinutes()
+      if (timeMinutes < minMin) return true
+    }
+  }
+  if (props.max) {
+    const maxDate = new Date(props.max)
+    if (selectedDateStr.value === formatDateValue(maxDate)) {
+      const maxMin = maxDate.getHours() * 60 + maxDate.getMinutes()
+      if (timeMinutes > maxMin) return true
+    }
+  }
+  return false
+}
+
+function selectDate(day: CalendarGridDay) {
+  if (day.isDisabled || props.disabled) return
+  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 || formatDateValue(new Date())
+  emit('update:modelValue', `${dateStr}T${time}`)
+}
+
+function goToNow() {
+  const now = new Date()
+  setCurrentMonthFromDate(now)
+  const dateStr = formatDateValue(now)
+  const timeStr = formatTime(now.getHours(), now.getMinutes())
+  emit('update:modelValue', `${dateStr}T${timeStr}`)
+  close()
+}
+
+function goToToday() {
+  const today = new Date()
+  setCurrentMonthFromDate(today)
+  const dateStr = formatDateValue(today)
+  const timeStr = selectedTimeStr.value || '09:00'
+  emit('update:modelValue', `${dateStr}T${timeStr}`)
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  close()
+}
+
+function toggleDropdown() {
+  if (props.disabled) return
+  toggle()
+}
+
+watch(isOpen, (open) => {
+  if (open && selectedDate.value) {
+    setCurrentMonthFromDate(selectedDate.value)
+    nextTick(() => {
+      // Scroll time grid to selected time
+      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' })
+      }
+    })
+  }
+})
+</script>
+
+<template>
+  <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">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      </div>
+      <input
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="[
+          'mint-datetime-picker__input',
+          `mint-datetime-picker__input--${size}`,
+          error ? 'mint-datetime-picker__input--error' : '',
+          disabled ? 'mint-datetime-picker__input--disabled' : '',
+        ]"
+        aria-label="Select date and time"
+        @click="toggleDropdown"
+      />
+      <div class="mint-datetime-picker__icon-clock">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+    </div>
+
+    <Transition
+      enter-active-class="mint-datetime-picker__dropdown-enter-active"
+      enter-from-class="mint-datetime-picker__dropdown-enter-from"
+      enter-to-class="mint-datetime-picker__dropdown-enter-to"
+      leave-active-class="mint-datetime-picker__dropdown-leave-active"
+      leave-from-class="mint-datetime-picker__dropdown-leave-from"
+      leave-to-class="mint-datetime-picker__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        class="mint-datetime-picker__dropdown"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Date and time picker"
+      >
+        <!-- Calendar section -->
+        <div class="mint-datetime-picker__calendar-section">
+          <CalendarGridPanelInternal
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            :locale="locale"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
+        </div>
+
+        <!-- Divider -->
+        <div class="mint-datetime-picker__divider" />
+
+        <!-- Time section -->
+        <div class="mint-datetime-picker__time-section">
+          <div class="mint-datetime-picker__time-label">Time</div>
+          <div class="mint-datetime-picker__time-grid">
+            <button
+              v-for="time in timeSlots"
+              :key="time"
+              type="button"
+              :disabled="isTimeDisabled(time)"
+              :class="[
+                'mint-datetime-picker__time-chip',
+                selectedTimeStr === time ? 'mint-datetime-picker__time-chip--active' : '',
+                isTimeDisabled(time) ? 'mint-datetime-picker__time-chip--disabled' : '',
+              ]"
+              @click="selectTime(time)"
+            >
+              {{ formatTimeSlot(time, timeFormat) }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="mint-datetime-picker__footer">
+          <div>
+            <button type="button" class="mint-datetime-picker__footer-btn" @click="goToToday">Today</button>
+            <button type="button" class="mint-datetime-picker__footer-btn" @click="goToNow">Now</button>
+          </div>
+          <button
+            v-if="clearable && modelValue"
+            type="button"
+            class="mint-datetime-picker__footer-btn mint-datetime-picker__footer-btn--muted"
+            @click="clear"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/datetime-picker.css';
+</style>

package/src/components/Divider.story.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import Divider from './Divider.vue'
+import type { DividerSpacing } from '../types'
+
+const spacings: DividerSpacing[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Layout/Divider">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <p style="margin: 0; color: var(--text-primary, #1e293b);">Content above</p>
+          <Divider
+            :vertical="state.vertical"
+            :label="state.showLabel ? state.label : undefined"
+            :spacing="state.spacing"
+          />
+          <p style="margin: 0; color: var(--text-primary, #1e293b);">Content below</p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.vertical" title="Vertical" />
+        <HstCheckbox v-model="state.showLabel" title="Show Label" />
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.spacing"
+          title="Spacing"
+          :options="spacings.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Horizontal">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0; color: var(--text-primary, #1e293b);">First section content</p>
+        <Divider />
+        <p style="margin: 0; color: var(--text-primary, #1e293b);">Second section content</p>
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0; color: var(--text-primary, #1e293b);">Section A</p>
+        <Divider label="OR" />
+        <p style="margin: 0; color: var(--text-primary, #1e293b);">Section B</p>
+      </div>
+    </Variant>
+
+    <Variant title="Vertical">
+      <div style="padding: 2rem; display: flex; align-items: center; gap: 0; height: 100px;">
+        <span style="color: var(--text-primary, #1e293b);">Left</span>
+        <Divider :vertical="true" />
+        <span style="color: var(--text-primary, #1e293b);">Right</span>
+      </div>
+    </Variant>
+
+    <Variant title="All Spacings">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <div v-for="spacing in spacings" :key="spacing" style="margin-bottom: 2rem;">
+          <p style="margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ spacing }}
+          </p>
+          <p style="margin: 0; color: var(--text-primary, #1e293b);">Above</p>
+          <Divider :spacing="spacing" />
+          <p style="margin: 0; color: var(--text-primary, #1e293b);">Below</p>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Left-aligned section header">
+      <div style="padding: 2rem; max-width: 520px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);">
+        <p style="margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-primary);">Basic configuration fields would sit above…</p>
+        <Divider label="Advanced settings" align="left" />
+        <p style="margin: 1rem 0 0; font-size: 0.875rem; color: var(--text-muted);">Advanced fields sit below the divider, visually grouped under the section label.</p>
+      </div>
+    </Variant>
+  </Story>
+</template>