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

package/src/components/ScheduleCalendar.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+/** Drag-and-drop week/day calendar for scheduling lab events in configurable time slots. */
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import type {
+  ScheduleView,
+  ScheduleEvent,
+  ScheduleBlockedSlot,
+} from '../types/components'
+import { useScheduleDrag } from '../composables/useScheduleDrag'
+import {
+  SCHEDULE_SLOT_HEIGHT,
+  parseScheduleModelDate,
+  useScheduleCalendarLayout,
+} from '../composables/useScheduleCalendarLayout'
+
+interface Props {
+  modelValue?: Date | string
+  view?: ScheduleView
+  events?: ScheduleEvent[]
+  dayStartHour?: number
+  dayEndHour?: number
+  slotDuration?: number
+  showNowIndicator?: boolean
+  readonly?: boolean
+  blockedSlots?: ScheduleBlockedSlot[]
+  weekStartsOn?: 0 | 1
+  showViewToggle?: boolean
+  showNavigation?: boolean
+  statusColors?: Record<string, string>
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: 'week',
+  events: () => [],
+  dayStartHour: 6,
+  dayEndHour: 22,
+  slotDuration: 30,
+  showNowIndicator: true,
+  readonly: false,
+  blockedSlots: () => [],
+  weekStartsOn: 1,
+  showViewToggle: true,
+  showNavigation: true,
+  locale: 'en-US',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date]
+  'update:view': [value: ScheduleView]
+  'event-click': [event: ScheduleEvent]
+  'event-create': [context: { start: Date; end: Date }]
+  'event-update': [context: { event: ScheduleEvent; newStart: Date; newEnd: Date }]
+  'slot-click': [context: { date: Date; hour: number; minute: number }]
+  'navigate': [context: { direction: string; date: Date }]
+}>()
+
+const SLOT_HEIGHT = SCHEDULE_SLOT_HEIGHT
+const currentView = ref<ScheduleView>(props.view)
+const currentDate = ref<Date>(parseScheduleModelDate(props.modelValue))
+const nowTimer = ref<ReturnType<typeof setInterval>>()
+const now = ref(new Date())
+const bodyRef = ref<HTMLDivElement>()
+
+watch(() => props.view, (v) => { currentView.value = v })
+watch(() => props.modelValue, (v) => { if (v) currentDate.value = parseScheduleModelDate(v) })
+
+const slotHeightRef = computed(() => SLOT_HEIGHT)
+const slotDurationRef = computed(() => props.slotDuration)
+const dayStartRef = computed(() => props.dayStartHour)
+const dayEndRef = computed(() => props.dayEndHour)
+const readonlyRef = computed(() => props.readonly)
+const eventsRef = computed(() => props.events)
+const blockedSlotsRef = computed(() => props.blockedSlots)
+const weekStartsOnRef = computed(() => props.weekStartsOn)
+const localeRef = computed(() => props.locale)
+const showNowIndicatorRef = computed(() => props.showNowIndicator)
+
+const { isDragging, ghost, startCreate, startMove, startResize } = useScheduleDrag({
+  slotDuration: slotDurationRef,
+  dayStartHour: dayStartRef,
+  dayEndHour: dayEndRef,
+  readonly: readonlyRef,
+  slotHeight: slotHeightRef,
+  onCreateComplete(start, end) {
+    emit('event-create', { start, end })
+  },
+  onMoveComplete(event, newStart, newEnd) {
+    emit('event-update', { event, newStart, newEnd })
+  },
+  onResizeComplete(event, newStart, newEnd) {
+    emit('event-update', { event, newStart, newEnd })
+  },
+})
+
+const {
+  totalSlots,
+  timeLabels,
+  visibleDays,
+  headerTitle,
+  monthDays,
+  monthWeekdayLabels,
+  isToday,
+  isSameDay,
+  getEventStyle,
+  getEventsForDay,
+  getEventsForDate,
+  getBlockedForDay,
+  getBlockedStyle,
+  getNowIndicatorStyle,
+  getStatusClass,
+  getMonthStatusClass,
+  formatEventTime,
+} = useScheduleCalendarLayout({
+  currentView,
+  currentDate,
+  now,
+  events: eventsRef,
+  blockedSlots: blockedSlotsRef,
+  dayStartHour: dayStartRef,
+  dayEndHour: dayEndRef,
+  slotDuration: slotDurationRef,
+  weekStartsOn: weekStartsOnRef,
+  locale: localeRef,
+  showNowIndicator: showNowIndicatorRef,
+  slotHeight: slotHeightRef,
+})
+
+function navigate(direction: 'prev' | 'next' | 'today') {
+  const d = new Date(currentDate.value)
+  if (direction === 'today') {
+    currentDate.value = new Date()
+  } else {
+    const delta = direction === 'prev' ? -1 : 1
+    if (currentView.value === 'day') d.setDate(d.getDate() + delta)
+    else if (currentView.value === 'week') d.setDate(d.getDate() + delta * 7)
+    else d.setMonth(d.getMonth() + delta)
+    currentDate.value = d
+  }
+  emit('update:modelValue', currentDate.value)
+  emit('navigate', { direction, date: currentDate.value })
+}
+
+function setView(view: ScheduleView) {
+  currentView.value = view
+  emit('update:view', view)
+}
+
+function onEventClick(event: ScheduleEvent, e: MouseEvent) {
+  e.stopPropagation()
+  emit('event-click', event)
+}
+
+function onSlotClick(day: Date, slotIndex: number) {
+  if (props.readonly || isDragging.value) return
+  const totalMinutes = props.dayStartHour * 60 + slotIndex * props.slotDuration
+  const hour = Math.floor(totalMinutes / 60)
+  const minute = totalMinutes % 60
+  const date = new Date(day)
+  date.setHours(hour, minute, 0, 0)
+  emit('slot-click', { date, hour, minute })
+}
+
+function onSlotPointerDown(day: Date, slotIndex: number, e: PointerEvent) {
+  if (props.readonly) return
+  const date = new Date(day)
+  const totalMinutes = props.dayStartHour * 60 + slotIndex * props.slotDuration
+  date.setHours(Math.floor(totalMinutes / 60), totalMinutes % 60, 0, 0)
+  const dayIndex = visibleDays.value.findIndex((d) => isSameDay(d, day))
+  startCreate(date, e.clientY, dayIndex)
+}
+
+function onEventPointerDown(event: ScheduleEvent, dayIndex: number, e: PointerEvent) {
+  e.stopPropagation()
+  startMove(event, e.clientY, dayIndex)
+}
+
+function onResizePointerDown(event: ScheduleEvent, edge: 'top' | 'bottom', dayIndex: number, e: PointerEvent) {
+  e.stopPropagation()
+  startResize(event, edge, e.clientY, dayIndex)
+}
+
+function onMonthDayClick(date: Date) {
+  currentDate.value = date
+  emit('update:modelValue', date)
+  setView('day')
+}
+
+onMounted(() => {
+  nowTimer.value = setInterval(() => { now.value = new Date() }, 60000)
+
+  // Scroll to current time or 8am
+  if (bodyRef.value) {
+    const targetHour = now.value.getHours() >= props.dayStartHour && now.value.getHours() <= props.dayEndHour
+      ? now.value.getHours()
+      : 8
+    const offsetMin = (targetHour - props.dayStartHour) * 60
+    const pixelsPerMin = SLOT_HEIGHT / props.slotDuration
+    bodyRef.value.scrollTop = Math.max(0, offsetMin * pixelsPerMin - 100)
+  }
+})
+
+onUnmounted(() => {
+  if (nowTimer.value) clearInterval(nowTimer.value)
+})
+</script>
+
+<template>
+  <div class="mint-schedule" :style="({ '--slot-height': `${SLOT_HEIGHT}px` } as Record<string, string>)">
+    <!-- Header -->
+    <div v-if="showNavigation || showViewToggle" class="mint-schedule__header">
+      <div v-if="showNavigation" class="mint-schedule__nav">
+        <button
+          type="button"
+          class="mint-schedule__nav-btn"
+          aria-label="Previous"
+          @click="navigate('prev')"
+        >
+          <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>
+        <button
+          type="button"
+          class="mint-schedule__nav-btn"
+          aria-label="Next"
+          @click="navigate('next')"
+        >
+          <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>
+        <button
+          type="button"
+          class="mint-schedule__today-btn"
+          @click="navigate('today')"
+        >
+          Today
+        </button>
+      </div>
+
+      <span class="mint-schedule__title">{{ headerTitle }}</span>
+
+      <div v-if="showViewToggle" class="mint-schedule__view-toggle">
+        <button
+          v-for="v in (['day', 'week', 'month'] as ScheduleView[])"
+          :key="v"
+          type="button"
+          :class="['mint-schedule__view-btn', currentView === v ? 'mint-schedule__view-btn--active' : '']"
+          @click="setView(v)"
+        >
+          {{ v.charAt(0).toUpperCase() + v.slice(1) }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Day / Week View -->
+    <template v-if="currentView === 'day' || currentView === 'week'">
+      <!-- Day headers -->
+      <div v-if="currentView === 'week'" class="mint-schedule__day-headers">
+        <div class="mint-schedule__day-header-gutter" />
+        <div
+          v-for="(day, i) in visibleDays"
+          :key="i"
+          :class="['mint-schedule__day-header', isToday(day) ? 'mint-schedule__day-header--today' : '']"
+        >
+          <slot name="day-header" :date="day" :isToday="isToday(day)">
+            <span class="mint-schedule__day-header-name">
+              {{ day.toLocaleDateString(locale, { weekday: 'short' }) }}
+            </span>
+            <span class="mint-schedule__day-header-number">
+              {{ day.getDate() }}
+            </span>
+          </slot>
+        </div>
+      </div>
+
+      <!-- Time grid body -->
+      <div ref="bodyRef" class="mint-schedule__body">
+        <!-- Time gutter -->
+        <div class="mint-schedule__time-gutter">
+          <div
+            v-for="(label, i) in timeLabels"
+            :key="i"
+            class="mint-schedule__time-label"
+          >
+            <slot name="time-label" :label="label" :index="i">
+              {{ i < timeLabels.length - 1 ? label : '' }}
+            </slot>
+          </div>
+        </div>
+
+        <!-- Day columns -->
+        <div class="mint-schedule__day-columns">
+          <div
+            v-for="(day, dayIdx) in visibleDays"
+            :key="dayIdx"
+            :class="['mint-schedule__day-column', isToday(day) ? 'mint-schedule__day-column--today' : '']"
+          >
+            <!-- Slot grid -->
+            <div
+              v-for="slotIdx in totalSlots"
+              :key="slotIdx"
+              :class="['mint-schedule__slot', !readonly ? 'mint-schedule__slot--interactive' : '']"
+              @click="onSlotClick(day, slotIdx - 1)"
+              @pointerdown="onSlotPointerDown(day, slotIdx - 1, $event)"
+            />
+
+            <!-- Events -->
+            <div
+              v-for="event in getEventsForDay(day)"
+              :key="event.id"
+              :class="['mint-schedule__event', getStatusClass(event.status)]"
+              :style="getEventStyle(event, day) || undefined"
+              @click="onEventClick(event, $event)"
+              @pointerdown="onEventPointerDown(event, dayIdx, $event)"
+            >
+              <slot name="event" :event="event">
+                <div
+                  v-if="!readonly && event.resizable !== false"
+                  class="mint-schedule__event-resize-handle mint-schedule__event-resize-handle--top"
+                  @pointerdown="onResizePointerDown(event, 'top', dayIdx, $event)"
+                />
+                <div class="mint-schedule__event-title">{{ event.title }}</div>
+                <div class="mint-schedule__event-time">{{ formatEventTime(event) }}</div>
+                <div
+                  v-if="!readonly && event.resizable !== false"
+                  class="mint-schedule__event-resize-handle mint-schedule__event-resize-handle--bottom"
+                  @pointerdown="onResizePointerDown(event, 'bottom', dayIdx, $event)"
+                />
+              </slot>
+            </div>
+
+            <!-- Blocked slots -->
+            <div
+              v-for="(blocked, bIdx) in getBlockedForDay(day)"
+              :key="`b-${bIdx}`"
+              class="mint-schedule__blocked"
+              :style="getBlockedStyle(blocked)"
+            >
+              <span v-if="blocked.label" class="mint-schedule__blocked-label">
+                {{ blocked.label }}
+              </span>
+            </div>
+
+            <!-- Now indicator -->
+            <div
+              v-if="showNowIndicator && isToday(day) && getNowIndicatorStyle()"
+              class="mint-schedule__now-indicator"
+              :style="getNowIndicatorStyle()!"
+            >
+              <div class="mint-schedule__now-dot" />
+            </div>
+
+            <!-- Drag ghost -->
+            <div
+              v-if="isDragging && ghost && ghost.dayIndex === dayIdx"
+              class="mint-schedule__ghost"
+              :style="ghost.style"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Month View -->
+    <template v-if="currentView === 'month'">
+      <div class="mint-schedule__month-grid">
+        <!-- Weekday headers -->
+        <div
+          v-for="label in monthWeekdayLabels"
+          :key="label"
+          class="mint-schedule__month-weekday"
+        >
+          {{ label }}
+        </div>
+
+        <!-- Day cells -->
+        <div
+          v-for="(day, i) in monthDays"
+          :key="i"
+          :class="[
+            'mint-schedule__month-cell',
+            isToday(day.date) ? 'mint-schedule__month-cell--today' : '',
+            !day.isCurrentMonth ? 'mint-schedule__month-cell--outside' : '',
+          ]"
+          @click="onMonthDayClick(day.date)"
+        >
+          <slot name="month-day" :date="day.date" :isToday="isToday(day.date)" :events="getEventsForDate(day.date)">
+            <div class="mint-schedule__month-date">{{ day.date.getDate() }}</div>
+            <div
+              v-for="event in getEventsForDate(day.date).slice(0, 3)"
+              :key="event.id"
+              :class="['mint-schedule__month-event', getMonthStatusClass(event.status)]"
+              @click.stop="onEventClick(event, $event)"
+            >
+              {{ event.title }}
+            </div>
+            <div
+              v-if="getEventsForDate(day.date).length > 3"
+              class="mint-schedule__month-more"
+            >
+              +{{ getEventsForDate(day.date).length - 3 }} more
+            </div>
+          </slot>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/schedule-calendar.css';
+</style>

package/src/components/ScientificNumber.story.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import ScientificNumber from './ScientificNumber.vue'
+import type { NumberNotation } from '../types'
+const notations: NumberNotation[] = ['auto', 'scientific', 'engineering', 'compact']
+</script>
+
+<template>
+  <Story title="Data Display/ScientificNumber">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
+          <ScientificNumber
+            :value="state.value"
+            :precision="state.precision"
+            :notation="state.notation"
+            :unit="state.unit || undefined"
+            :copyable="state.copyable"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.value" title="Value" />
+        <HstSlider v-model="state.precision" title="Precision" :min="0" :max="8" :step="1" />
+        <HstSelect
+          v-model="state.notation"
+          title="Notation"
+          :options="notations.map(n => ({ label: n, value: n }))"
+        />
+        <HstText v-model="state.unit" title="Unit" />
+        <HstCheckbox v-model="state.copyable" title="Copyable" />
+      </template>
+    </Variant>
+
+    <Variant title="Various Numbers (Auto Notation)">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <table style="width: 100%; border-collapse: collapse; font-size: 0.9375rem;">
+          <thead>
+            <tr>
+              <th style="text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Raw Value</th>
+              <th style="text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Formatted</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="val in [0.00042, 0.005, 1.23, 42, 1234567, 6.022e23, 1.38e-23, 0, -3.14e-8]" :key="val">
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); font-family: monospace; color: var(--text-muted, #94a3b8);">{{ val }}</td>
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b);">
+                <ScientificNumber :value="val" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Variant>
+
+    <Variant title="Notation Comparison">
+      <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+        <table style="width: 100%; border-collapse: collapse; font-size: 0.9375rem;">
+          <thead>
+            <tr>
+              <th style="text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Value</th>
+              <th v-for="notation in notations" :key="notation" style="text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">{{ notation }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="val in [0.00042, 1234567, 6.022e23]" :key="val">
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); font-family: monospace; color: var(--text-muted, #94a3b8);">{{ val }}</td>
+              <td v-for="notation in notations" :key="notation" style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b);">
+                <ScientificNumber :value="val" :notation="notation" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Variant>
+
+    <Variant title="With Units">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 1.125rem;">
+        <div style="display: flex; gap: 0.5rem; align-items: baseline;">
+          <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Avogadro:</span>
+          <ScientificNumber :value="6.022e23" unit="mol-1" notation="scientific" />
+        </div>
+        <div style="display: flex; gap: 0.5rem; align-items: baseline;">
+          <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Boltzmann:</span>
+          <ScientificNumber :value="1.38e-23" unit="J/K" notation="scientific" />
+        </div>
+        <div style="display: flex; gap: 0.5rem; align-items: baseline;">
+          <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">IC50:</span>
+          <ScientificNumber :value="0.00042" unit="M" notation="auto" />
+        </div>
+        <div style="display: flex; gap: 0.5rem; align-items: baseline;">
+          <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Cell count:</span>
+          <ScientificNumber :value="5000000" unit="cells/mL" notation="compact" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Copyable">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 1.125rem;">
+        <ScientificNumber :value="6.022e23" unit="mol-1" copyable />
+        <ScientificNumber :value="0.00042" unit="M" copyable />
+        <ScientificNumber :value="1234567" copyable />
+      </div>
+    </Variant>
+
+    <Variant title="Special Values">
+      <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center; font-size: 1.125rem;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">
+          <ScientificNumber :value="NaN" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">NaN</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">
+          <ScientificNumber :value="Infinity" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">Infinity</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">
+          <ScientificNumber :value="-Infinity" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">-Infinity</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">
+          <ScientificNumber :value="0" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">Zero</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>