@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/src/components/StepWizard.story.vue

@@ -23,6 +23,7 @@ function initState() {
     showProgress: true,
     showStepNumbers: true,
     size: 'md' as const,
+    orientation: 'horizontal' as const,
   }
 }
 </script>
@@ -39,6 +40,7 @@ function initState() {
             :show-progress="state.showProgress"
             :show-step-numbers="state.showStepNumbers"
             :size="state.size"
+            :orientation="state.orientation"
           >
             <template #step-setup>
               <div style="padding: 1.5rem;">
@@ -72,6 +74,14 @@ function initState() {
         <HstCheckbox v-model="state.linear" title="Linear" />
         <HstCheckbox v-model="state.showProgress" title="Show Progress" />
         <HstCheckbox v-model="state.showStepNumbers" title="Show Step Numbers" />
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' },
+          ]"
+        />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -129,6 +139,29 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Vertical">
+      <div style="padding: 2rem; max-width: 700px;">
+        <StepWizard
+          :steps="mockSteps"
+          :model-value="2"
+          orientation="vertical"
+        >
+          <template #step-setup>
+            <div style="padding: 1.5rem;">Setup</div>
+          </template>
+          <template #step-samples>
+            <div style="padding: 1.5rem;">Samples</div>
+          </template>
+          <template #step-protocol>
+            <div style="padding: 1.5rem;">Protocol (active)</div>
+          </template>
+          <template #step-review>
+            <div style="padding: 1.5rem;">Review</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+
     <Variant title="Small">
       <div style="padding: 2rem; max-width: 500px;">
         <StepWizard

package/src/components/StepWizard.vue

@@ -11,6 +11,8 @@ export interface Props {
   showProgress?: boolean
   showStepNumbers?: boolean
   size?: 'sm' | 'md' | 'lg'
+  /** `vertical` stacks the steps in a rail beside the step content. */
+  orientation?: 'horizontal' | 'vertical'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   showProgress: true,
   showStepNumbers: true,
   size: 'md',
+  orientation: 'horizontal',
 })
 
 const emit = defineEmits<{
@@ -114,7 +117,11 @@ defineExpose({ setStepValid })
 
 <template>
   <div
-    :class="['mint-wizard', `mint-wizard--${props.size}`]"
+    :class="[
+      'mint-wizard',
+      `mint-wizard--${props.size}`,
+      { 'mint-wizard--vertical': props.orientation === 'vertical' },
+    ]"
     tabindex="0"
     @keydown="handleKeydown"
   >

package/src/components/WellPlate.story.vue

@@ -64,13 +64,14 @@ function generateHeatmapWells(format: WellPlateFormat): Record<string, Partial<W
 const mockWells96 = generateMockWells(96)
 const heatmapWells = generateHeatmapWells(96)
 const mockWells6 = generateMockWells(6)
-// One well per marker type; the Q / i glyph moves to a corner when an ID or label takes the centre.
+// One well per marker type; a QC well shows a mono Q and an iQC well an i when no ID or label takes the centre.
 const markerWells: Record<string, Partial<Well>> = {
   A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'sample', metadata: { label: 'S-01' } },
   A2: { id: 'A2', row: 0, col: 1, state: 'filled', sampleType: 'blank', metadata: { label: 'Blank' } },
   A3: { id: 'A3', row: 0, col: 2, state: 'filled', sampleType: 'qc', metadata: { label: 'Pool' } },
   B1: { id: 'B1', row: 1, col: 0, state: 'filled', sampleType: 'iqc', metadata: { label: 'Std 1' } },
   B2: { id: 'B2', row: 1, col: 1, state: 'filled', sampleType: 'iqc' },
+  B3: { id: 'B3', row: 1, col: 2, state: 'filled', sampleType: 'qc' },
 }
 
 const rectSelected = ref<string[]>([])
@@ -287,6 +288,7 @@ function initState() {
       <div style="padding: 2rem; display: flex; gap: 2rem;">
         <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellIds: true, size: 'lg' }" :wells="markerWells" />
         <WellPlate :spec="{ format: 6, selectionMode: 'none', showWellLabels: true, size: 'lg' }" :wells="markerWells" />
+        <WellPlate :spec="{ format: 6, selectionMode: 'none', size: 'lg' }" :wells="markerWells" />
       </div>
     </Variant>
 

package/src/components/WellPlate.vue

@@ -449,6 +449,13 @@ const tableStyle = computed(() => ({
                 >
                   {{ well.id }}
                 </span>
+                <!-- QC / iQC marker glyph when the centre is free -->
+                <span
+                  v-else-if="well.sampleType === 'qc' || well.sampleType === 'iqc'"
+                  class="mint-well-plate__indicator"
+                >
+                  {{ well.sampleType === 'qc' ? 'Q' : 'i' }}
+                </span>
 
                 <!-- Badge (injection count or custom method) -->
                 <span

package/src/components/internal/AppTopBarOnboardingInternal.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+/**
+ * The top-bar onboarding controls: the "Getting started n/m" chip while the
+ * checklist is open, and the Help button with the checklist, tours and news.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom'
+import { Check, CircleHelp, Play } from 'lucide-vue-next'
+import { useEventListener } from '../../composables/useEventListener'
+import type { OnboardingState } from '../../composables/useOnboarding'
+import OnboardingLayerInternal from './OnboardingLayerInternal.vue'
+
+const props = defineProps<{ state: OnboardingState }>()
+
+const root = ref<HTMLElement | null>(null)
+const helpButton = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+const panelPosition = ref({ x: 0, y: 0 })
+const open = ref(false)
+const hasContent = computed(() =>
+  props.state.tasks.value.length > 0 || props.state.tours.value.length > 0 || props.state.news.value.length > 0)
+const progress = computed(() => {
+  const total = props.state.tasks.value.length
+  return total ? Math.round((props.state.tasksDone.value / total) * 100) : 0
+})
+
+function toggle() {
+  open.value = !open.value
+  if (open.value) props.state.refresh()
+}
+
+// The panel goes to the body, as the top bar clips its overflow; it follows the button.
+let stopAutoUpdate: (() => void) | undefined
+watch(open, async (isOpen) => {
+  stopAutoUpdate?.()
+  stopAutoUpdate = undefined
+  if (!isOpen) return
+  await nextTick()
+  const button = helpButton.value
+  const floating = panel.value
+  if (!button || !floating || !open.value) return
+  stopAutoUpdate = autoUpdate(button, floating, async () => {
+    const { x, y } = await computePosition(button, floating, {
+      strategy: 'fixed',
+      placement: 'bottom-end',
+      middleware: [offset(8), shift({ padding: 8 })],
+    })
+    panelPosition.value = { x, y }
+  })
+})
+onBeforeUnmount(() => stopAutoUpdate?.())
+
+function run(action: () => void) {
+  open.value = false
+  action()
+}
+
+useEventListener(document, 'pointerdown', (event) => {
+  const target = event.target as Node
+  if (open.value && !root.value?.contains(target) && !panel.value?.contains(target)) open.value = false
+})
+useEventListener(document, 'keydown', (event) => {
+  if (open.value && event.key === 'Escape') open.value = false
+})
+</script>
+
+<template>
+  <div v-if="hasContent" ref="root" class="mint-onboarding-help">
+    <button
+      v-if="state.checklistVisible.value"
+      type="button"
+      class="mint-onboarding-help__chip"
+      :class="{ 'mint-onboarding-help__chip--open': open }"
+      data-onboarding="topbar-checklist"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      Getting started
+      <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+      <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
+    </button>
+    <button
+      ref="helpButton"
+      type="button"
+      class="mint-topbar__settings-btn"
+      :class="{ 'mint-topbar__settings-btn--open': open }"
+      data-onboarding="topbar-help"
+      :aria-label="state.unseenNews.value ? `Help, ${state.unseenNews.value} new` : 'Help'"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <CircleHelp class="mint-topbar__settings-icon" aria-hidden="true" />
+      <span v-if="state.unseenNews.value" class="mint-onboarding-help__badge" aria-hidden="true">{{ state.unseenNews.value }}</span>
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panel"
+        class="mint-popover mint-onboarding-help__panel"
+        role="dialog"
+        aria-label="Help"
+        :style="{ left: `${panelPosition.x}px`, top: `${panelPosition.y}px` }"
+      >
+        <template v-if="state.tasks.value.length">
+          <div class="mint-onboarding-help__header">
+            <span class="mint-onboarding-help__heading">Getting started</span>
+            <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+          </div>
+          <div class="mint-onboarding-help__progress" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></div>
+          <ul class="mint-onboarding-help__todos">
+            <li
+              v-for="task in state.tasks.value"
+              :key="task.id"
+              :class="['mint-onboarding-help__todo', { 'mint-onboarding-help__todo--done': task.done }]"
+            >
+              <span class="mint-onboarding-help__check" role="img" :aria-label="task.done ? 'Done' : 'Not done'">
+                <Check v-if="task.done" :size="10" :stroke-width="3" aria-hidden="true" />
+              </span>
+              <span class="mint-onboarding-help__todo-title">{{ task.title }}</span>
+              <button
+                v-if="task.action && !task.done"
+                type="button"
+                class="mint-onboarding-help__link"
+                @click="run(task.action.run)"
+              >
+                {{ task.action.label }}
+              </button>
+            </li>
+          </ul>
+          <button
+            v-if="state.tasksDone.value < state.tasks.value.length"
+            type="button"
+            class="mint-onboarding-help__link mint-onboarding-help__hide"
+            @click="state.setChecklistHidden(!state.checklistHidden.value)"
+          >
+            {{ state.checklistHidden.value ? 'Show checklist in the top bar' : 'Hide checklist from the top bar' }}
+          </button>
+        </template>
+
+        <template v-if="state.tours.value.length">
+          <div class="mint-onboarding-help__section">Tours</div>
+          <button
+            v-for="tour in state.tours.value"
+            :key="tour.id"
+            type="button"
+            class="mint-menu-item"
+            @click="run(() => state.startTour(tour.id))"
+          >
+            <Play class="mint-onboarding-help__icon" aria-hidden="true" />
+            {{ tour.title }}
+          </button>
+        </template>
+
+        <template v-if="state.news.value.length">
+          <div class="mint-onboarding-help__section">What's new</div>
+          <button
+            v-for="item in state.news.value"
+            :key="item.id"
+            type="button"
+            class="mint-menu-item"
+            @click="run(() => state.showNews(item.id))"
+          >
+            {{ item.title }}
+            <span v-if="item.unseen" class="mint-onboarding-help__new">New</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+  <OnboardingLayerInternal :state="state" />
+</template>

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-/** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
-import { computed, useTemplateRef } from 'vue'
+/** "Plugin / page" switcher: the plugin name, then a trigger that opens the page menu (hints, number keys 1-9). */
+import { computed, nextTick, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
 import { normalizeItemInput } from '../../utils/items'
 import { isPluginIconFormat } from '../../utils/pluginIcon'
@@ -13,27 +14,74 @@ interface Props {
   currentPageId?: string
   placeholder?: string
   minWidth?: string
+  /** Plugin name shown before the trigger and in the menu title. */
+  pluginName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Go to…',
-  minWidth: '11.25rem',
 })
 
 const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, close, toggle } = useDropdownState({
+const triggerEl = useTemplateRef<HTMLElement>('trigger')
+const menuEl = useTemplateRef<HTMLElement>('menu')
+const { isOpen, open, close, toggle } = useDropdownState({
   rootRef: useTemplateRef<HTMLElement>('root'),
-  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+  triggerRef: triggerEl,
 })
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
+const menuTitle = computed(() => (props.pluginName ? `${props.pluginName} pages` : 'Pages'))
 
 const current = computed<PageSelectorItem | undefined>(() =>
   normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0],
 )
 
+const rows = () => Array.from(menuEl.value?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+const isEnabled = (row: HTMLElement) => !row.hasAttribute('disabled') && row.getAttribute('aria-disabled') !== 'true'
+const enabledRows = () => rows().filter(isEnabled)
+
+const { handlePanelKeydown } = useMenuKeyboard({
+  items: enabledRows,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (isOpen.value || !['ArrowDown', 'Enter', ' '].includes(event.key)) return
+  event.preventDefault()
+  open()
+  void nextTick(() => {
+    const items = enabledRows()
+    ;(items.find((row) => row.getAttribute('aria-current') === 'page') ?? items[0])?.focus()
+  })
+}
+
+// A click routes through ActionItemInternal, so links, router links and disabled rows act as on a pointer click.
+function activate(row: HTMLElement) {
+  row.click()
+  if (!isOpen.value) triggerEl.value?.focus()
+}
+
+function handleMenuKeydown(event: KeyboardEvent) {
+  if (/^[1-9]$/.test(event.key)) {
+    event.preventDefault()
+    const row = rows()[Number(event.key) - 1]
+    if (row && isEnabled(row)) activate(row)
+    return
+  }
+  const focused = document.activeElement as HTMLElement | null
+  if ((event.key === 'Enter' || event.key === ' ') && focused && enabledRows().includes(focused)) {
+    event.preventDefault()
+    activate(focused)
+    return
+  }
+  handlePanelKeydown(event)
+}
+
 function handleSelect(page: PageSelectorItem) {
   if (page.disabled) return
   if (page.href || page.to) {
@@ -46,82 +94,102 @@ function handleSelect(page: PageSelectorItem) {
 </script>
 
 <template>
-  <div ref="root" class="mint-page-selector" :style="{ minWidth }">
-    <button
-      ref="trigger"
-      type="button"
-      class="mint-page-selector__trigger"
-      :class="{ 'mint-page-selector__trigger--open': isOpen }"
-      :aria-expanded="isOpen"
-      aria-haspopup="menu"
-      @click.stop="toggle"
-    >
-      <span
-        v-if="current"
-        class="mint-page-selector__icon"
-        :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
-      >
-        <slot name="icon" :page="current">
-          <PluginIcon
-            v-if="isPluginIconFormat(current.icon)"
-            class="mint-page-selector__trigger-metadata-icon"
-            :icon="current.icon"
-            size="sm"
-            variant="solid"
-          />
-          <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
-        </slot>
-      </span>
-      <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
-      <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
-        <svg
-          class="mint-page-selector__chevron"
-          :class="{ 'mint-page-selector__chevron--open': isOpen }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </span>
-    </button>
-
-    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
-      <div class="mint-page-selector__menu-title">Go to</div>
-      <ActionItemInternal
-        v-for="page in normalizedPages"
-        :key="page.id"
-        :href="page.href"
-        :to="page.to"
-        :disabled="page.disabled"
-        :class="[
-          'mint-page-selector__item',
-          { 'mint-page-selector__item--active': page.id === current?.id },
-          { 'mint-page-selector__item--disabled': page.disabled },
-        ]"
-        role="menuitem"
-        @click="handleSelect(page)"
+  <div ref="root" class="mint-page-selector__crumb">
+    <template v-if="pluginName">
+      <span class="mint-page-selector__plugin">{{ pluginName }}</span>
+      <span class="mint-page-selector__slash" aria-hidden="true">/</span>
+    </template>
+    <div class="mint-page-selector" :style="minWidth ? { minWidth } : undefined">
+      <button
+        ref="trigger"
+        type="button"
+        class="mint-page-selector__trigger"
+        :class="{ 'mint-page-selector__trigger--open': isOpen }"
+        :aria-expanded="isOpen"
+        aria-haspopup="menu"
+        @click.stop="toggle"
+        @keydown="handleTriggerKeydown"
       >
         <span
-          class="mint-page-selector__item-icon"
-          :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          v-if="current"
+          class="mint-page-selector__icon"
+          :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
         >
-          <slot name="item-icon" :page="page">
+          <slot name="icon" :page="current">
             <PluginIcon
-              v-if="isPluginIconFormat(page.icon)"
-              class="mint-page-selector__metadata-icon"
-              :icon="page.icon"
+              v-if="isPluginIconFormat(current.icon)"
+              class="mint-page-selector__trigger-metadata-icon"
+              :icon="current.icon"
               size="sm"
               variant="solid"
             />
-            <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
           </slot>
         </span>
-        <span class="mint-page-selector__item-label">{{ page.label }}</span>
-      </ActionItemInternal>
+        <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
+        <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
+          <svg
+            class="mint-page-selector__chevron"
+            :class="{ 'mint-page-selector__chevron--open': isOpen }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+
+      <div
+        v-if="isOpen"
+        ref="menu"
+        class="mint-page-selector__menu"
+        role="menu"
+        :aria-label="menuTitle"
+        @keydown="handleMenuKeydown"
+      >
+        <div class="mint-page-selector__menu-title" aria-hidden="true">{{ menuTitle }}</div>
+        <ActionItemInternal
+          v-for="(page, index) in normalizedPages"
+          :key="page.id"
+          :href="page.href"
+          :to="page.to"
+          :disabled="page.disabled"
+          :class="[
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          :aria-current="page.id === current?.id ? 'page' : undefined"
+          :aria-keyshortcuts="index < 9 ? String(index + 1) : undefined"
+          @click="handleSelect(page)"
+        >
+          <span
+            class="mint-page-selector__item-icon"
+            :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          >
+            <slot name="item-icon" :page="page">
+              <PluginIcon
+                v-if="isPluginIconFormat(page.icon)"
+                class="mint-page-selector__metadata-icon"
+                :icon="page.icon"
+                size="sm"
+                variant="solid"
+              />
+              <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mint-page-selector__item-text">
+            <span class="mint-page-selector__item-label">{{ page.label }}</span>
+            <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
+          </span>
+          <span v-if="index < 9" class="mint-page-selector__item-key" aria-hidden="true">{{ index + 1 }}</span>
+        </ActionItemInternal>
+      </div>
     </div>
   </div>
 </template>

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -21,7 +21,26 @@ const emit = defineEmits<{
 const openItemId = ref<string | null>(null)
 const itemRefs = ref<Map<string, HTMLElement>>(new Map())
 
-const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+/** The bar shows this many items; the rest fold into a More dropdown. */
+const MAX_VISIBLE_ITEMS = 4
+const MORE_ITEM_ID = '__mint-pill-nav-more'
+
+const allItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+const normalizedItems = computed<PillNavItem[]>(() => {
+  if (allItems.value.length <= MAX_VISIBLE_ITEMS) return allItems.value
+  const folded = allItems.value.slice(MAX_VISIBLE_ITEMS)
+  return [
+    ...allItems.value.slice(0, MAX_VISIBLE_ITEMS),
+    {
+      id: MORE_ITEM_ID,
+      label: 'More',
+      dot: folded.some(item => item.dot),
+      // A folded group contributes its options; a plain item becomes one option.
+      children: folded.flatMap(item => item.children?.length ? item.children : [item]),
+    },
+  ]
+})
 
 function handleClick(item: PillNavItem) {
   if (item.disabled) return
@@ -35,8 +54,20 @@ function handleClick(item: PillNavItem) {
 
 function handleOptionClick(option: PillNavOption, item: PillNavItem) {
   if (option.disabled) return
-  if (!option.href && !option.to) emit('option-select', option, item)
   openItemId.value = null
+  if (option.href || option.to) return
+  if (item.id !== MORE_ITEM_ID) {
+    emit('option-select', option, item)
+    return
+  }
+  // A folded entry reports as it would from its own pill.
+  const folded = allItems.value.find(candidate => candidate.id === option.id && !candidate.children?.length)
+  if (folded) {
+    emit('select', folded)
+    return
+  }
+  const group = allItems.value.find(candidate => candidate.children?.some(child => child.id === option.id))
+  if (group) emit('option-select', option, group)
 }
 
 function normalizePillNavItem(item: PillNavItemInput): PillNavItem {