@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/BatchProgressList.story.vue

@@ -21,6 +21,8 @@ const allCompleted = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     items: mixedItems,
     showSummary: true,
     title: 'Processing Raw Data Files',
@@ -35,6 +37,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px;">
           <BatchProgressList
+            :loading="state.loading"
+            :error="state.error || null"
             :items="state.items"
             :show-summary="state.showSummary"
             :title="state.title"
@@ -45,6 +49,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.showSummary" title="Show Summary" />
         <HstText v-model="state.title" title="Title" />
         <HstCheckbox v-model="state.autoScroll" title="Auto Scroll" />
@@ -88,5 +94,17 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" error="Could not load the batch." />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/BatchProgressList.vue

@@ -3,6 +3,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import type { BatchItem, BatchSummary } from '../types'
 import { useExpansionSet } from '../composables/useExpansionSet'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   items: BatchItem[]
@@ -10,11 +11,23 @@ interface Props {
   title?: string
   maxHeight?: string
   autoScroll?: boolean
+  /** Replace the item list with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the item list is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /** Empty-state headline shown when there are no batch items. */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showSummary: true,
   autoScroll: true,
+  loading: false,
+  error: null,
+  emptyMessage: 'No items in this batch',
 })
 
 const emit = defineEmits<{
@@ -91,7 +104,26 @@ watch(
       </div>
     </slot>
 
+    <div v-if="error" class="mint-batch-progress__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-batch-progress__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading batch" />
+      </slot>
+    </div>
+
+    <div v-else-if="items.length === 0" class="mint-batch-progress__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <div
+      v-else
       ref="listRef"
       class="mint-batch-progress__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
@@ -175,7 +207,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/batch-progress-list.css';
-</style>

package/src/components/Breadcrumb.vue

@@ -75,7 +75,3 @@ function handleClick(item: BreadcrumbItem) {
     </ol>
   </nav>
 </template>
-
-<style>
-@import '../styles/components/breadcrumb.css';
-</style>

package/src/components/Calendar.vue

@@ -361,7 +361,3 @@ function nextMonth() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/calendar.css';
-</style>

package/src/components/ChartContainer.story.vue

@@ -75,7 +75,7 @@ import ChartContainer from './ChartContainer.vue'
               <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;">
                 Linear
               </button>
-              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--mint-primary, #3B82F6); border-radius: 0.375rem; background: var(--mint-primary, #3B82F6); color: #fff; cursor: pointer;">
+              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--color-primary); border-radius: 0.375rem; background: var(--color-primary); color: #fff; cursor: pointer;">
                 Log
               </button>
             </div>

package/src/components/ChartContainer.vue

@@ -58,7 +58,3 @@ withDefaults(defineProps<Props>(), {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/chart-container.css';
-</style>

package/src/components/ChemicalFormula.vue

@@ -33,7 +33,3 @@ function getParts(f: string): FormulaPart[] {
     </template>
   </component>
 </template>
-
-<style>
-@import '../styles/components/chemical-formula.css';
-</style>

package/src/components/CollapsibleCard.vue

@@ -239,7 +239,3 @@ function handleActionClick(action: SidebarToolSectionAction) {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/collapsible-card.css';
-</style>

package/src/components/ColorSlider.vue

@@ -158,7 +158,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/color-slider.css';
-</style>

package/src/components/ConcentrationInput.vue

@@ -143,7 +143,3 @@ watch(availableUnits, (units) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/concentration-input.css';
-</style>

package/src/components/ConfirmDialog.vue

@@ -94,7 +94,3 @@ const confirmVariant = computed<ButtonVariant>(() => {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/confirm-dialog.css';
-</style>

package/src/components/DataFrame.story.vue

@@ -37,6 +37,7 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
           <DataFrame
+            :error="state.error || null"
             :data="data"
             :columns="columns"
             row-key="id"
@@ -55,6 +56,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       </template>
 
       <template #controls="{ state }">
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -144,5 +147,16 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
         />
       </div>
     </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          error="Could not load the result table."
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/DataFrame.vue

@@ -5,6 +5,14 @@ import type { DataFrameColumn, SortState, PaginationState } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import { useListSelection } from '../composables/useListSelection'
+import DataStateInternal from './internal/DataStateInternal.vue'
+import LoadingSpinner from './LoadingSpinner.vue'
+import { tableDensityToSize, tryUseSettingsStore } from '../stores/settings'
+
+/** Inbox glyph kept from the pre-1.2 hand-rolled empty state. */
+const EMPTY_ICON_PATH
+  = 'M22 12L16 12L14 15L10 15L8 12L2 12'
+  + 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'
 
 /**
  * DataFrame - Data table with sorting, searching, pagination, and row selection.
@@ -34,7 +42,11 @@ interface Props {
   striped?: boolean
   /** Show table borders */
   bordered?: boolean
-  /** Table size */
+  /**
+   * Table size. Left unset, it follows the platform's `tableDensity` setting
+   * (compact → `sm`, normal → `md`, comfortable → `lg`) and falls back to
+   * `md` when no settings store is installed.
+   */
   size?: 'sm' | 'md' | 'lg'
   /** Make header sticky on scroll */
   stickyHeader?: boolean
@@ -42,6 +54,11 @@ interface Props {
   maxHeight?: string | number
   /** Show loading overlay */
   loading?: boolean
+  /**
+   * Error message. When set, the table body is replaced by an error state
+   * instead of the empty state. `null`/`undefined` renders normally.
+   */
+  error?: string | null
   /** Empty state message */
   emptyText?: string
   /** Enable column sorting */
@@ -75,9 +92,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   striped: true,
   bordered: true,
-  size: 'md',
   stickyHeader: false,
   loading: false,
+  error: null,
   emptyText: 'No data',
   sortable: false,
   pagination: false,
@@ -108,6 +125,13 @@ const emit = defineEmits<{
   'delete-row': [row: Record<string, unknown>, index: number]
 }>()
 
+const settings = tryUseSettingsStore()
+
+/** Explicit `size` wins; otherwise the user's table density, else `md`. */
+const size = computed<'sm' | 'md' | 'lg'>(() =>
+  props.size ?? (settings ? tableDensityToSize(settings.tableDensity) : 'md'),
+)
+
 const searchQuery = ref('')
 const internalSort = ref<SortState | null>(null)
 
@@ -219,6 +243,21 @@ function isColumnSortable(col: DataFrameColumn): boolean {
   return col.sortable === true || (props.sortable && col.sortable !== false)
 }
 
+/** `aria-sort` for the header cell, omitted on columns that cannot be sorted. */
+function columnAriaSort(col: DataFrameColumn): 'ascending' | 'descending' | 'none' | undefined {
+  if (!isColumnSortable(col)) return undefined
+  if (activeSort.value?.key !== col.key || !activeSort.value.direction) return 'none'
+  return activeSort.value.direction === 'asc' ? 'ascending' : 'descending'
+}
+
+// Native buttons activate on Enter/Space, but the default is prevented here so
+// the header sorts exactly once per key press in every engine.
+function handleSortKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleSort(col)
+}
+
 // Selection
 const pageRowKeys = computed(() =>
   paginatedData.value.map((row, i) => getRowKey(row, i))
@@ -264,6 +303,35 @@ function columnStyle(col: DataFrameColumn) {
   }
 }
 
+const RESIZE_KEY_STEP = 16
+
+function columnMinWidth(col: DataFrameColumn): number {
+  return Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
+}
+
+/** Current px width of a column when one is known (resized, or a numeric `width`). */
+function columnWidthValue(col: DataFrameColumn): number | undefined {
+  const width = activeWidths.value[col.key] ?? col.width
+  return typeof width === 'number' ? width : undefined
+}
+
+function applyColumnWidth(key: string, width: number) {
+  const widths = { ...activeWidths.value, [key]: width }
+  if (props.columnWidths === undefined) internalWidths.value = widths
+  emit('update:columnWidths', widths)
+}
+
+/** Left/Right resize the column by a fixed step; the handle is a `role="slider"`. */
+function handleResizeKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+  event.preventDefault()
+  const th = (event.target as HTMLElement).closest('th')
+  const base =
+    columnWidthValue(col) ?? (th instanceof HTMLElement ? th.offsetWidth : MIN_COL_WIDTH)
+  const delta = event.key === 'ArrowRight' ? RESIZE_KEY_STEP : -RESIZE_KEY_STEP
+  applyColumnWidth(col.key, Math.max(columnMinWidth(col), base + delta))
+}
+
 let resizeState: { key: string; startX: number; startWidth: number; min: number } | null = null
 
 function startResize(col: DataFrameColumn, event: MouseEvent) {
@@ -272,8 +340,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
   const th = (event.target as HTMLElement).closest('th')
   const startWidth =
     th instanceof HTMLElement ? th.offsetWidth : (typeof col.width === 'number' ? col.width : MIN_COL_WIDTH)
-  const min = Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
-  resizeState = { key: col.key, startX: event.clientX, startWidth, min }
+  resizeState = { key: col.key, startX: event.clientX, startWidth, min: columnMinWidth(col) }
   window.addEventListener('mousemove', onResizeMove)
   window.addEventListener('mouseup', stopResize)
 }
@@ -281,9 +348,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
 function onResizeMove(event: MouseEvent) {
   if (!resizeState) return
   const next = Math.max(resizeState.min, resizeState.startWidth + (event.clientX - resizeState.startX))
-  const widths = { ...activeWidths.value, [resizeState.key]: next }
-  if (props.columnWidths === undefined) internalWidths.value = widths
-  emit('update:columnWidths', widths)
+  applyColumnWidth(resizeState.key, next)
 }
 
 function stopResize() {
@@ -355,8 +420,15 @@ const wrapperStyle = computed(() => {
                 },
               ]"
               :style="columnStyle(col)"
-              @click="isColumnSortable(col) ? handleSort(col) : undefined"
+              :aria-sort="columnAriaSort(col)"
             >
+              <component
+                :is="isColumnSortable(col) ? 'button' : 'div'"
+                :type="isColumnSortable(col) ? 'button' : undefined"
+                class="mint-dataframe__th-button"
+                @click="isColumnSortable(col) ? handleSort(col) : undefined"
+                @keydown="isColumnSortable(col) ? handleSortKeydown($event, col) : undefined"
+              >
               <slot :name="`header-${col.key}`" :column="col">
                 <div class="mint-dataframe__th-content">
                   <span>{{ col.label }}</span>
@@ -380,13 +452,18 @@ const wrapperStyle = computed(() => {
                   </svg>
                 </div>
               </slot>
+              </component>
               <span
                 v-if="resizable"
                 class="mint-dataframe__resize-handle"
-                role="separator"
+                role="slider"
+                tabindex="0"
                 aria-orientation="vertical"
-                aria-label="Resize column"
+                :aria-label="`Resize ${col.label} column`"
+                :aria-valuemin="columnMinWidth(col)"
+                :aria-valuenow="columnWidthValue(col)"
                 @mousedown="startResize(col, $event)"
+                @keydown="handleResizeKeydown($event, col)"
                 @click.stop
               />
             </th>
@@ -459,23 +536,24 @@ const wrapperStyle = computed(() => {
         </tbody>
       </table>
 
+      <!-- Error state -->
+      <div v-if="error" class="mint-dataframe__state">
+        <slot name="error" :error="error">
+          <DataStateInternal state="error" :title="error" />
+        </slot>
+      </div>
+
       <!-- Empty state -->
-      <div v-if="paginatedData.length === 0 && !loading" class="mint-dataframe__empty">
+      <div v-else-if="paginatedData.length === 0 && !loading" class="mint-dataframe__state">
         <slot name="empty">
-          <svg class="mint-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-          </svg>
-          <p class="mint-dataframe__empty-text">{{ emptyText }}</p>
+          <DataStateInternal state="empty" :title="emptyText" :icon-path="EMPTY_ICON_PATH" />
         </slot>
       </div>
 
       <!-- Loading overlay -->
       <div v-if="loading" class="mint-dataframe__loading">
         <slot name="loading">
-          <svg class="mint-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-          </svg>
+          <LoadingSpinner size="lg" />
         </slot>
       </div>
     </div>
@@ -514,7 +592,3 @@ const wrapperStyle = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dataframe.css';
-</style>

package/src/components/DatePicker.vue

@@ -1,9 +1,10 @@
 <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 { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, computed, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
-import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
@@ -28,12 +29,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const inputRef = ref<HTMLDivElement | null>(null)
-const dropdownRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const { isOpen, rootRef: containerRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef: containerRef, triggerRef, open, close, toggle } = useDropdownState({
   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,
@@ -88,41 +91,88 @@ function toggleCalendar() {
   toggle()
 }
 
-function updateDropdownPosition() {
-  if (!inputRef.value) return
-  const rect = inputRef.value.getBoundingClientRect()
+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: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    width: `${Math.max(rect.width, 288)}px`,
+    top: `${y}px`,
+    left: `${x}px`,
+    width: `${Math.max(trigger.getBoundingClientRect().width, 288)}px`,
     zIndex: '9999',
   }
 }
 
-function handleScrollOrResize() {
-  close()
+function stopPositioning() {
+  stopAutoUpdate?.()
+  stopAutoUpdate = null
 }
 
-watch(isOpen, (open) => {
-  if (open) {
-    updateDropdownPosition()
-    if (selectedDate.value) {
-      setCurrentMonthFromDate(selectedDate.value)
-    }
+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()
 })
 
-useEventListener(() => window, 'scroll', handleScrollOrResize, true)
-useEventListener(() => window, 'resize', handleScrollOrResize)
+onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
   <div ref="containerRef" class="mint-date-picker">
-    <div ref="inputRef" class="mint-date-picker__input-wrapper">
+    <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"
@@ -133,6 +183,7 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           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">
@@ -156,7 +207,6 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           class="mint-date-picker__dropdown"
           :style="dropdownStyle"
           role="dialog"
-          aria-modal="true"
           aria-label="Date picker"
         >
           <CalendarGridPanelInternal
@@ -191,7 +241,3 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
     </Teleport>
   </div>
 </template>
-
-<style>
-@import '../styles/components/date-picker.css';
-</style>