@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/{DateTimePicker.story.vue → DatePicker.datetime.story.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DateTimePicker from './DateTimePicker.vue'
+import DatePicker from './DatePicker.vue'
 
 const now = new Date()
 const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T09:00`
@@ -13,7 +13,7 @@ function initState() {
     modelValue: today as string | undefined,
     placeholder: 'Select date & time',
     disabled: false,
-    error: false,
+    invalid: false,
     size: 'md' as const,
     timeStep: 15,
     timeFormat: '24h' as const,
@@ -23,18 +23,19 @@ function initState() {
 </script>
 
 <template>
-  <Story title="Scheduling/DateTimePicker">
+  <Story title="Scheduling/DatePicker · datetime">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 400px; min-height: 36rem;">
-          <DateTimePicker
+          <DatePicker
+            type="datetime"
             v-model="state.modelValue"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.invalid"
             :size="state.size"
-            :time-step="state.timeStep"
-            :time-format="state.timeFormat"
+            :step="state.timeStep"
+            :format="state.timeFormat"
             :clearable="state.clearable"
           />
         </div>
@@ -43,7 +44,7 @@ function initState() {
         <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" />
+        <HstCheckbox v-model="state.invalid" title="Invalid" />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -68,16 +69,18 @@ function initState() {
 
     <Variant title="12-Hour Format">
       <div style="padding: 2rem; max-width: 400px;">
-        <DateTimePicker
+        <DatePicker
+          type="datetime"
           :model-value="today"
-          time-format="12h"
+          format="12h"
         />
       </div>
     </Variant>
 
     <Variant title="With Min/Max Range">
       <div style="padding: 2rem; max-width: 400px;">
-        <DateTimePicker
+        <DatePicker
+          type="datetime"
           :model-value="today"
           :min="today"
           :max="nextWeekStr"
@@ -87,7 +90,8 @@ function initState() {
 
     <Variant title="Clearable">
       <div style="padding: 2rem; max-width: 400px;">
-        <DateTimePicker
+        <DatePicker
+          type="datetime"
           :model-value="today"
           clearable
         />
@@ -96,13 +100,14 @@ function initState() {
 
     <Variant title="No Value">
       <div style="padding: 2rem; max-width: 400px;">
-        <DateTimePicker placeholder="Pick a date and time" />
+        <DatePicker type="datetime" placeholder="Pick a date and time" />
       </div>
     </Variant>
 
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 400px;">
-        <DateTimePicker
+        <DatePicker
+          type="datetime"
           :model-value="today"
           disabled
         />

package/src/components/DatePicker.story.vue

@@ -33,7 +33,7 @@ function initPlayground() {
             v-model="state.value"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
             :clearable="state.clearable"
             :min="state.useMin ? state.min : undefined"
@@ -97,7 +97,7 @@ function initPlayground() {
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <DatePicker
           model-value="2026-01-01"
-          error
+          invalid
           placeholder="Invalid date"
         />
       </div>

package/src/components/{TimePicker.story.vue → DatePicker.time.story.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TimePicker from './TimePicker.vue'
+import DatePicker from './DatePicker.vue'
 import type { TimeSlotDisabledFn } from '../types'
 
 const bookings: Record<string, string> = {
@@ -22,7 +22,7 @@ function initState() {
     modelValue: '09:00' as string | undefined,
     placeholder: 'Select time',
     disabled: false,
-    error: false,
+    invalid: false,
     size: 'md' as const,
     step: 15,
     format: '24h' as const,
@@ -32,15 +32,16 @@ function initState() {
 </script>
 
 <template>
-  <Story title="Scheduling/TimePicker">
+  <Story title="Scheduling/DatePicker · time">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 300px;">
-          <TimePicker
+          <DatePicker
+            type="time"
             v-model="state.modelValue"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.invalid"
             :size="state.size"
             :step="state.step"
             :format="state.format"
@@ -52,7 +53,7 @@ function initState() {
         <HstText v-model="state.modelValue" title="Value (HH:mm)" />
         <HstText v-model="state.placeholder" title="Placeholder" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.invalid" title="Invalid" />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -77,13 +78,14 @@ function initState() {
 
     <Variant title="12-Hour Format">
       <div style="padding: 2rem; max-width: 300px;">
-        <TimePicker model-value="14:30" format="12h" />
+        <DatePicker type="time" model-value="14:30" format="12h" />
       </div>
     </Variant>
 
     <Variant title="With Min/Max">
       <div style="padding: 2rem; max-width: 300px; min-height: 22rem;">
-        <TimePicker
+        <DatePicker
+          type="time"
           model-value="09:30"
           min="08:00"
           max="10:00"
@@ -94,26 +96,27 @@ function initState() {
 
     <Variant title="30-Minute Steps">
       <div style="padding: 2rem; max-width: 300px;">
-        <TimePicker model-value="09:30" :step="30" />
+        <DatePicker type="time" model-value="09:30" :step="30" />
       </div>
     </Variant>
 
     <Variant title="Clearable">
       <div style="padding: 2rem; max-width: 300px;">
-        <TimePicker model-value="15:00" clearable />
+        <DatePicker type="time" model-value="15:00" clearable />
       </div>
     </Variant>
 
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 300px;">
-        <TimePicker model-value="09:00" disabled />
+        <DatePicker type="time" model-value="09:00" disabled />
       </div>
     </Variant>
 
     <Variant title="Unavailable Slots" :init-state="initUnavailableState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 300px; min-height: 22rem;">
-          <TimePicker
+          <DatePicker
+            type="time"
             v-model="state.modelValue"
             min="08:00"
             max="17:00"

package/src/components/DatePicker.vue

@@ -1,243 +1,105 @@
 <script setup lang="ts">
-/** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { ref, computed, nextTick, onBeforeUnmount, watch, useTemplateRef } from 'vue'
-import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
-import { useDropdownState } from '../composables/useDropdownState'
-import { useFocusTrap } from '../composables/useFocusTrap'
-import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
+/**
+ * Date, time or date-and-time input with a dropdown picker.
+ * `type="date"` (default) binds `YYYY-MM-DD`, `type="time"` binds `HH:mm`, `type="datetime"` binds `YYYY-MM-DDTHH:mm`.
+ *
+ * @example
+ * ```vue
+ * <DatePicker v-model="startDate" />
+ * <DatePicker v-model="startTime" type="time" :step="30" format="12h" />
+ * <DatePicker v-model="startsAt" type="datetime" />
+ * ```
+ */
+import type { TimeSlotDisabledFn } from '../types'
+import DatePickerDateInternal from './internal/DatePickerDateInternal.vue'
+import DatePickerDateTimeInternal from './internal/DatePickerDateTimeInternal.vue'
+import DatePickerTimeInternal from './internal/DatePickerTimeInternal.vue'
 
 interface Props {
   modelValue?: string
+  type?: 'date' | 'time' | 'datetime'
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
+  /** Earliest value, in the format of the bound value. */
   min?: string
+  /** Latest value, in the format of the bound value. */
   max?: string
+  /** Show a clear button. Default: true for `date`, false otherwise. */
   clearable?: boolean
+  /** Minutes between time slots (`time`, `datetime`). */
+  step?: number
+  /** Clock format of the time slots (`time`, `datetime`). */
+  format?: '12h' | '24h'
+  /** Locale of the calendar (`datetime`). */
+  locale?: string
+  /** Marks time slots unavailable; a returned string is shown inline as the reason (`time`). */
+  disabledSlots?: TimeSlotDisabledFn
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  type: 'date',
+  placeholder: undefined,
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
-  clearable: true,
+  min: undefined,
+  max: undefined,
+  clearable: undefined,
+  step: undefined,
+  format: undefined,
+  locale: undefined,
+  disabledSlots: undefined,
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
-
-const dropdownRef = ref<HTMLElement | null>(null)
-const dropdownStyle = ref<Record<string, string>>({})
-const { isOpen, triggerRef, open, close, toggle } = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('container'),
-  insideRefs: [dropdownRef],
-})
-// The panel is a non-modal dialog: Tab cycles inside it while it is open, and
-// focus returns to the input when it closes.
-useFocusTrap({ containerRef: dropdownRef, active: isOpen })
-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 handleTriggerKeydown(event: KeyboardEvent) {
-  if (props.disabled || isOpen.value) return
-  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
-    event.preventDefault()
-    open()
-  }
-}
-
-// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
-// instead of the panel closing on every scroll or resize.
-let stopAutoUpdate: (() => void) | null = null
-
-async function updateDropdownPosition() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-
-  const { x, y } = await computePosition(trigger, panel, {
-    placement: 'bottom-start',
-    strategy: 'fixed',
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
-  })
-  dropdownStyle.value = {
-    position: 'fixed',
-    top: `${y}px`,
-    left: `${x}px`,
-    zIndex: '9999',
-  }
-}
-
-function stopPositioning() {
-  stopAutoUpdate?.()
-  stopAutoUpdate = null
-}
-
-function startPositioning() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-  stopPositioning()
-  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
-}
-
-/** Moves focus into the calendar grid: selected day, else today, else the first day. */
-function focusCalendar() {
-  const panel = dropdownRef.value
-  if (!panel) return
-  const target =
-    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
-    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
-    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
-  target?.focus()
-}
-
-watch(isOpen, async (opened) => {
-  if (!opened) {
-    stopPositioning()
-    return
-  }
-  if (selectedDate.value) {
-    setCurrentMonthFromDate(selectedDate.value)
-  }
-  await nextTick()
-  startPositioning()
-  // A second tick so this focus lands after the focus trap's initial focus.
-  await nextTick()
-  focusCalendar()
-})
-
-onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
-  <div ref="container" class="mint-date-picker">
-    <div class="mint-date-picker__input-wrapper">
-      <input
-        ref="triggerRef"
-        type="text"
-        readonly
-        aria-haspopup="dialog"
-        :aria-expanded="isOpen"
-        :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"
-        @keydown="handleTriggerKeydown"
-      />
-      <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-popover mint-date-picker__dropdown"
-          :style="dropdownStyle"
-          role="dialog"
-          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>
+  <DatePickerTimeInternal
+    v-if="type === 'time'"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :invalid="invalid"
+    :size="size"
+    :min="min"
+    :max="max"
+    :step="step"
+    :format="format"
+    :clearable="clearable"
+    :disabled-slots="disabledSlots"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+  <DatePickerDateTimeInternal
+    v-else-if="type === 'datetime'"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :invalid="invalid"
+    :size="size"
+    :min="min"
+    :max="max"
+    :time-step="step"
+    :time-format="format"
+    :clearable="clearable"
+    :locale="locale"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+  <DatePickerDateInternal
+    v-else
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :invalid="invalid"
+    :size="size"
+    :min="min"
+    :max="max"
+    :clearable="clearable"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>

package/src/components/DoseCalculator.vue

@@ -2,7 +2,7 @@
 /** Tabbed dosing calculator supporting single dilution, serial dilution, and unit conversion, with optional direct assignment to selected plate wells. */
 import { ref, computed, watch } from 'vue'
 import BaseButton from './BaseButton.vue'
-import BaseInput from './BaseInput.vue'
+import NumberInput from './NumberInput.vue'
 import ConcentrationInput from './ConcentrationInput.vue'
 import FormField from './FormField.vue'
 import {
@@ -10,12 +10,16 @@ import {
   type ConcentrationValue,
 } from '../composables/useConcentrationUnits'
 import {
-  useDoseCalculator,
+  calculateDilution,
+  calculateSerialDilution,
+  formatVolume,
+  generateWellConcentrations,
+  volumeUnits,
   type VolumeValue,
   type DilutionResult,
   type SerialDilutionResult,
   type WellConcentration,
-} from '../composables/useDoseCalculator'
+} from '../utils/dose'
 import DoseCalculatorVolumeField from './DoseCalculatorVolumeField.vue'
 
 type CalculatorMode = 'dilution' | 'serial' | 'conversion'
@@ -38,13 +42,6 @@ const emit = defineEmits<{
 }>()
 
 const { formatWithUnit } = useConcentrationUnits()
-const {
-  volumeUnits,
-  calculateDilution,
-  calculateSerialDilution,
-  formatVolume,
-  generateWellConcentrations,
-} = useDoseCalculator()
 
 // Active mode (for tabbed interface)
 const activeMode = ref<CalculatorMode>(props.mode === 'auto' ? 'dilution' : props.mode)
@@ -297,28 +294,25 @@ watch(activeMode, (mode) => {
       </FormField>
 
       <FormField label="Dilution Factor" layout="row">
-        <BaseInput
-          type="number"
+        <NumberInput
           size="sm"
           :model-value="serialDilutionFactor"
           :disabled="disabled"
           :min="1.1"
           :step="0.1"
-          @update:model-value="serialDilutionFactor = Number($event ?? 0)"
-        >
-          <template #suffix>×</template>
-        </BaseInput>
+          unit="×"
+          @update:model-value="serialDilutionFactor = $event ?? 0"
+        />
       </FormField>
 
       <FormField label="Dilutions" layout="row">
-        <BaseInput
-          type="number"
+        <NumberInput
           size="sm"
           :model-value="serialNumberOfDilutions"
           :disabled="disabled"
           :min="1"
           :max="24"
-          @update:model-value="serialNumberOfDilutions = Number($event ?? 0)"
+          @update:model-value="serialNumberOfDilutions = $event ?? 0"
         />
       </FormField>
 

package/src/components/DoseCalculatorVolumeField.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-/** Volume field for DoseCalculator: a FormField row around a UnitInput with the volume units. */
+/** Volume field for DoseCalculator: a FormField row around a NumberInput with the volume units. */
 import { computed } from 'vue'
-import type { VolumeUnit, VolumeValue } from '../composables/useDoseCalculator'
+import type { VolumeUnit, VolumeValue } from '../utils/dose'
 import FormField from './FormField.vue'
-import UnitInput from './UnitInput.vue'
+import NumberInput from './NumberInput.vue'
 
 interface Props {
   label: string
@@ -22,8 +22,8 @@ const emit = defineEmits<{
 
 const unitOptions = computed(() => props.units.map((unit) => ({ value: unit, label: unit })))
 
-function handleValue(value: number | undefined) {
-  if (value === undefined) return
+function handleValue(value: number | null) {
+  if (value === null) return
   emit('update:modelValue', { ...props.modelValue, value })
 }
 
@@ -34,7 +34,7 @@ function handleUnit(unit: string) {
 
 <template>
   <FormField :label="label" layout="row">
-    <UnitInput
+    <NumberInput
       size="sm"
       :model-value="modelValue.value"
       :unit="modelValue.unit"