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

package/src/components/{MultiSelect.story.vue → BaseSelect.multiple.story.vue}

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import MultiSelect from './MultiSelect.vue'
-import type { MultiSelectOption } from '../types'
+import BaseSelect from './BaseSelect.vue'
+import type { SelectOption } from '../types'
 
 const sizes = ['sm', 'md', 'lg'] as const
 
-const sampleOptions: MultiSelectOption[] = [
+const sampleOptions: SelectOption[] = [
   { value: 'hela', label: 'HeLa' },
   { value: 'mcf7', label: 'MCF-7' },
   { value: 'a549', label: 'A549' },
@@ -14,7 +14,7 @@ const sampleOptions: MultiSelectOption[] = [
   { value: 'k562', label: 'K562' },
 ]
 
-const withDisabledOptions: MultiSelectOption[] = [
+const withDisabledOptions: SelectOption[] = [
   { value: 'option1', label: 'Available A' },
   { value: 'option2', label: 'Available B' },
   { value: 'option3', label: 'Unavailable', disabled: true },
@@ -36,16 +36,17 @@ function initPlayground() {
 </script>
 
 <template>
-  <Story title="Base Inputs/MultiSelect">
+  <Story title="Base Inputs/BaseSelect · multiple">
     <Variant title="Playground" :init-state="initPlayground">
       <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <MultiSelect
+        <div style="padding: 2rem; max-width: 500px; min-height: 22rem; margin: 0 auto;">
+          <BaseSelect
+            multiple
             v-model="state.selected"
             :options="sampleOptions"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :max-selections="state.useMaxSelections ? state.maxSelections : undefined"
+            :max="state.useMaxSelections ? state.maxSelections : undefined"
             :size="state.size"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
@@ -73,14 +74,15 @@ function initPlayground() {
           <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
             {{ size }}
           </p>
-          <MultiSelect v-model="selected" :options="sampleOptions" :size="size" />
+          <BaseSelect multiple v-model="selected" :options="sampleOptions" :size="size" />
         </div>
       </div>
     </Variant>
 
     <Variant title="Empty State">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="[]"
           :options="sampleOptions"
           placeholder="Select cell lines..."
@@ -89,21 +91,23 @@ function initPlayground() {
     </Variant>
 
     <Variant title="With Max Selections">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+      <div style="padding: 2rem; max-width: 500px; min-height: 22rem; margin: 0 auto;">
         <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
           Maximum 3 selections allowed
         </p>
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['hela', 'mcf7']"
           :options="sampleOptions"
-          :max-selections="3"
+          :max="3"
         />
       </div>
     </Variant>
 
     <Variant title="With Disabled Options">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['option1']"
           :options="withDisabledOptions"
         />
@@ -112,16 +116,29 @@ function initPlayground() {
 
     <Variant title="All Selected">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="sampleOptions.map(o => o.value)"
           :options="sampleOptions"
         />
       </div>
     </Variant>
 
+    <Variant title="Invalid">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseSelect
+          multiple
+          :model-value="['hela']"
+          :options="sampleOptions"
+          invalid
+        />
+      </div>
+    </Variant>
+
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <MultiSelect
+        <BaseSelect
+          multiple
           :model-value="['hela', 'a549']"
           :options="sampleOptions"
           disabled

package/src/components/{SearchableSelect.story.vue → BaseSelect.searchable.story.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { SelectOption } from '../types'
-import SearchableSelect from './SearchableSelect.vue'
+import BaseSelect from './BaseSelect.vue'
 
 const value = ref<string | number>('viability')
 const options: SelectOption[] = [
@@ -12,12 +12,12 @@ const options: SelectOption[] = [
 </script>
 
 <template>
-  <Story title="Base Inputs/SearchableSelect">
+  <Story title="Base Inputs/BaseSelect · searchable">
     <Variant title="Rich options">
       <div style="padding: 2rem; max-width: 28rem; min-height: 24rem;">
-        <SearchableSelect v-model="value" :options="options">
+        <BaseSelect searchable v-model="value" :options="options">
           <template #footer>Disabled options remain visible with their reason.</template>
-        </SearchableSelect>
+        </BaseSelect>
       </div>
     </Variant>
   </Story>

package/src/components/BaseSelect.story.vue

@@ -42,7 +42,7 @@ function initPlayground() {
             :options="fruitOptions"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
-            :error="state.error"
+            :invalid="state.error"
             :size="state.size"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
@@ -102,7 +102,7 @@ function initPlayground() {
         <BaseSelect
           :options="fruitOptions"
           placeholder="Select a fruit..."
-          error
+          invalid
         />
       </div>
     </Variant>

package/src/components/BaseSelect.vue

@@ -1,27 +1,73 @@
-<script setup lang="ts">
-/** Renders a native `<select>` element with size, error, and disabled states. */
+<script setup lang="ts" generic="M extends boolean = false">
+/**
+ * Select one or several options.
+ * Default: a native `<select>`. `searchable`: a listbox with a search field and the `#option` / `#footer` slots.
+ * `multiple`: a field of removable chips with a filterable checkbox listbox, bound to an array and capped by `max`.
+ *
+ * @example
+ * ```vue
+ * <BaseSelect v-model="method" :options="methods" />
+ * <BaseSelect v-model="template" :options="templates" searchable placeholder="Select template…" />
+ * <BaseSelect v-model="instrumentIds" :options="instruments" multiple :max="3" />
+ * ```
+ */
 import { computed, useAttrs } from 'vue'
 import type { HTMLAttributes } from 'vue'
-import type { SelectOption, SelectOptionInput } from '../types'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
 import { findOptionByDomValue, normalizeOptionInput } from '../utils/options'
+import SelectMultipleInternal from './internal/SelectMultipleInternal.vue'
+import SelectSearchableInternal from './internal/SelectSearchableInternal.vue'
 
 defineOptions({ inheritAttrs: false })
 
-interface Props {
-  modelValue?: string | number
-  options: SelectOptionInput<string | number>[]
+
+const props = withDefaults(defineProps<{
+  /** The selected value; an array with `multiple`. */
+  modelValue?: (M extends true ? OptionPrimitive[] : OptionPrimitive) | null
+  options: SelectOptionInput[]
+  /** Bind an array and pick several options (chip field + checkbox listbox). */
+  multiple?: M
+  /** Single selection in a listbox with a search field. Ignored with `multiple`. */
+  searchable?: boolean
+  /** Most options a `multiple` select accepts. */
+  max?: number
   placeholder?: string
+  /** Search field placeholder (`searchable`). */
+  searchPlaceholder?: string
+  /** Text shown when the search matches no option (`searchable`). */
+  noResultsText?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   ariaDescribedby?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+  /** Id of the visible label. `searchable`: the trigger is then named by the label and the selected value. */
+  ariaLabelledby?: string
+}>(), {
+  modelValue: null,
+  multiple: undefined,
+  searchable: false,
+  max: undefined,
+  placeholder: undefined,
+  searchPlaceholder: undefined,
+  noResultsText: undefined,
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
+  ariaDescribedby: undefined,
+  ariaLabelledby: undefined,
 })
+
+const emit = defineEmits<{
+  'update:modelValue': [value: M extends true ? OptionPrimitive[] : OptionPrimitive]
+}>()
+
+defineSlots<{
+  /** `searchable` only: custom option row. */
+  option?: (props: { option: SelectOption<OptionPrimitive>; selected: boolean; active: boolean }) => unknown
+  /** `searchable` only: content under the option list. */
+  footer?: () => unknown
+}>()
+
 const attrs = useAttrs()
 
 const controlAttrs = computed(() => {
@@ -33,33 +79,83 @@ const wrapperAttrs = computed<Pick<HTMLAttributes, 'class' | 'style'>>(() => ({
   style: attrs.style as HTMLAttributes['style'],
 }))
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
-  props.options.map(normalizeOptionInput)
+const normalizedOptions = computed<SelectOption<OptionPrimitive>[]>(() =>
+  props.options.map(option => normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>(option)),
 )
 
+// `multiple` has the generic type `M`, so Vue declares no runtime Boolean type for it and
+// does not cast the bare attribute: `<BaseSelect multiple>` arrives as ''.
+const isMultiple = computed(() => props.multiple === true || (props.multiple as unknown) === '')
+
+const multipleValue = computed<OptionPrimitive[]>(() => {
+  const value: unknown = props.modelValue
+  return Array.isArray(value) ? value : []
+})
+const singleValue = computed<OptionPrimitive | null>(() => {
+  const value: unknown = props.modelValue
+  return Array.isArray(value) ? null : (value as OptionPrimitive | null)
+})
+
+function update(value: OptionPrimitive | OptionPrimitive[]) {
+  emit('update:modelValue', value as M extends true ? OptionPrimitive[] : OptionPrimitive)
+}
+
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
   const option = findOptionByDomValue(normalizedOptions.value, target.value)
-  emit('update:modelValue', option?.value ?? target.value)
+  update(option?.value ?? target.value)
 }
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" class="mint-select">
+  <SelectMultipleInternal
+    v-if="isMultiple"
+    v-bind="attrs"
+    :model-value="multipleValue"
+    :options="options"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :invalid="invalid"
+    :max="max"
+    :size="size"
+    :aria-labelledby="ariaLabelledby"
+    :aria-describedby="ariaDescribedby"
+    @update:model-value="update"
+  />
+  <SelectSearchableInternal
+    v-else-if="searchable"
+    v-bind="attrs"
+    :model-value="singleValue"
+    :options="options"
+    :placeholder="placeholder"
+    :search-placeholder="searchPlaceholder"
+    :no-results-text="noResultsText"
+    :disabled="disabled"
+    :invalid="invalid"
+    :size="size"
+    :aria-labelledby="ariaLabelledby"
+    :aria-describedby="ariaDescribedby"
+    @update:model-value="update"
+  >
+    <template v-if="$slots.option" #option="slotProps">
+      <slot name="option" v-bind="slotProps" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </SelectSearchableInternal>
+  <div v-else v-bind="wrapperAttrs" class="mint-select">
     <select
       v-bind="controlAttrs"
-      :value="modelValue"
+      :value="singleValue ?? ''"
       :disabled="disabled"
-      :aria-invalid="error || undefined"
+      :aria-invalid="invalid || undefined"
       :aria-describedby="ariaDescribedby || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
       :class="[
         'mint-select__control',
         `mint-select__control--${size}`,
-        error ? 'mint-select__control--error' : '',
+        invalid ? 'mint-select__control--error' : '',
         disabled ? 'mint-select__control--disabled' : '',
       ]"
       @change="handleChange"

package/src/components/BaseTabs.story.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import BaseTabs from './BaseTabs.vue'
-import type { TabItem } from '../types'
+import type { SelectOption } from '../types'
 
 
-const basicTabs: TabItem[] = [
-  { id: 'overview', label: 'Overview' },
-  { id: 'samples', label: 'Samples' },
-  { id: 'results', label: 'Results' },
-  { id: 'settings', label: 'Settings' },
+const basicTabs: SelectOption[] = [
+  { value: 'overview', label: 'Overview' },
+  { value: 'samples', label: 'Samples' },
+  { value: 'results', label: 'Results' },
+  { value: 'settings', label: 'Settings' },
 ]
 
-const tabsWithBadges: TabItem[] = [
-  { id: 'inbox', label: 'Inbox', badge: 12 },
-  { id: 'drafts', label: 'Drafts', badge: 3 },
-  { id: 'sent', label: 'Sent' },
-  { id: 'archive', label: 'Archive', disabled: true },
+const tabsWithBadges: SelectOption[] = [
+  { value: 'inbox', label: 'Inbox', badge: 12 },
+  { value: 'drafts', label: 'Drafts', badge: 3 },
+  { value: 'sent', label: 'Sent' },
+  { value: 'archive', label: 'Archive', disabled: true },
 ]
 
-const tabsWithIcons: TabItem[] = [
-  { id: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
-  { id: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
-  { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
+const tabsWithIcons: SelectOption[] = [
+  { value: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
+  { value: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
+  { value: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
 ]
 
 function initPlayground() {
@@ -37,7 +37,7 @@ function initPlayground() {
         <div style="padding: 2rem;">
           <BaseTabs
             v-model="state.activeTab"
-            :tabs="basicTabs"
+            :options="basicTabs"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
             Active tab: <code>{{ state.activeTab }}</code>
@@ -49,7 +49,7 @@ function initPlayground() {
         <HstSelect
           v-model="state.activeTab"
           title="Active Tab"
-          :options="basicTabs.map(t => ({ label: t.label, value: t.id }))"
+          :options="basicTabs.map(t => ({ label: t.label, value: t.value }))"
         />
       </template>
     </Variant>
@@ -58,7 +58,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
-          :tabs="tabsWithBadges"
+          :options="tabsWithBadges"
         />
       </div>
     </Variant>
@@ -67,7 +67,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="plate"
-          :tabs="tabsWithIcons"
+          :options="tabsWithIcons"
         />
       </div>
     </Variant>
@@ -76,7 +76,7 @@ function initPlayground() {
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
-          :tabs="tabsWithBadges"
+          :options="tabsWithBadges"
         />
       </div>
     </Variant>

package/src/components/BaseTabs.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 /** Renders an underline tab bar with mono count badges, icons, and disabled tab support. */
 import { computed, type ComponentPublicInstance } from 'vue'
-import type { TabItem, TabItemInput } from '../types'
-import { normalizeItemInput } from '../utils/items'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 import { useRovingFocus } from '../composables/useRovingFocus'
 
+type Tab = SelectOption<OptionPrimitive> & { id: string }
+
 interface Props {
-  modelValue: string
-  tabs: TabItemInput[]
+  modelValue: OptionPrimitive
+  /** Tabs; `icon` takes SVG path data, `badge` a count shown after the label. */
+  options: SelectOptionInput[]
 }
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: OptionPrimitive]
 }>()
 
-const activeTab = computed(() => props.modelValue)
-const normalizedTabs = computed<TabItem[]>(() => props.tabs.map(normalizeItemInput))
+const activeTab = computed(() => String(props.modelValue))
+const normalizedTabs = computed<Tab[]>(() =>
+  props.options.map((input) => {
+    const option = normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>(input)
+    return { ...option, id: String(option.value) }
+  }),
+)
 
-function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
+function isSvgIcon(icon: Tab['icon']): icon is string | string[] {
   if (!icon) return false
   return Array.isArray(icon) || icon.trim().startsWith('M') || icon.trim().startsWith('m')
 }
@@ -27,7 +35,7 @@ function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
 function selectTab(tabId: string) {
   const tab = normalizedTabs.value.find(t => t.id === tabId)
   if (tab && !tab.disabled) {
-    emit('update:modelValue', tabId)
+    emit('update:modelValue', tab.value)
   }
 }
 

package/src/components/BatchProgressList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Scrollable list tracking per-item status for a batch operation with overall progress summary. */
 import { computed, ref, watch, nextTick } from 'vue'
-import type { BatchItem, BatchSummary } from '../types'
+import { CircleCheck, CircleDashed, CircleMinus, CircleX, Loader } from 'lucide-vue-next'
+import type { BatchItem, BatchItemStatus, BatchSummary } from '../types'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
@@ -18,7 +19,7 @@ interface Props {
    */
   error?: string | null
   /** Empty-state headline shown when there are no batch items. */
-  emptyMessage?: string
+  emptyText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoScroll: true,
   loading: false,
   error: null,
-  emptyMessage: 'No items in this batch',
+  emptyText: 'No items in this batch',
 })
 
 const emit = defineEmits<{
@@ -34,6 +35,28 @@ const emit = defineEmits<{
   'cancel': [id: string]
 }>()
 
+const STATUS_ICONS: Record<BatchItemStatus, typeof CircleCheck> = {
+  completed: CircleCheck,
+  processing: Loader,
+  pending: CircleDashed,
+  error: CircleX,
+  skipped: CircleMinus,
+}
+
+const STATUS_TEXT: Partial<Record<BatchItemStatus, string>> = {
+  pending: 'Queued',
+  error: 'Failed',
+  skipped: 'Skipped',
+}
+
+function itemPercent(item: BatchItem): number {
+  return item.status === 'completed' ? 100 : (item.progress ?? 0)
+}
+
+function statusText(item: BatchItem): string {
+  return STATUS_TEXT[item.status] ?? `${itemPercent(item)}%`
+}
+
 const listRef = ref<HTMLElement | null>(null)
 // 6b: completed items keep full contrast but collapse behind a toggle.
 const showCompleted = ref(false)
@@ -123,7 +146,7 @@ watch(
 
     <div v-else-if="items.length === 0" class="mint-batch-progress__state">
       <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+        <DataStateInternal state="empty" size="sm" :title="emptyText" />
       </slot>
     </div>
 
@@ -141,34 +164,17 @@ watch(
       >
         <slot name="item" :item="item">
           <div class="mint-batch-progress__item-row">
-            <!-- Status by shape: hollow ring / progress arc / check / filled ! / dash -->
-            <span :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]" aria-hidden="true">
-              <span v-if="item.status === 'pending'" class="mint-batch-progress__pending-ring" />
-              <svg v-else-if="item.status === 'processing'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <circle class="mint-batch-progress__arc-track" cx="8" cy="8" r="6" />
-                <path class="mint-batch-progress__arc" d="M8 2a6 6 0 0 1 6 6" />
-              </svg>
-              <svg v-else-if="item.status === 'completed'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <path class="mint-batch-progress__check" d="M3.5 8.5l3 3 6-7" />
-              </svg>
-              <svg v-else-if="item.status === 'error'" class="mint-batch-progress__shape" viewBox="0 0 16 16">
-                <circle class="mint-batch-progress__error-disc" cx="8" cy="8" r="7" />
-                <path class="mint-batch-progress__error-mark" d="M8 4.5v4M8 11v.01" />
-              </svg>
-              <svg v-else class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <path class="mint-batch-progress__dash" d="M4 8h8" />
-              </svg>
-            </span>
+            <component
+              :is="STATUS_ICONS[item.status]"
+              :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]"
+              :size="16"
+              aria-hidden="true"
+            />
 
             <span class="mint-batch-progress__item-label">{{ item.label }}</span>
 
             <span class="mint-batch-progress__item-meta">
-              <template v-if="item.status === 'processing' && item.progress !== undefined">
-                <span class="mint-batch-progress__item-progress">
-                  <span class="mint-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
-                </span>
-                {{ item.progress }}%
-              </template>
+              <span class="mint-batch-progress__item-status">{{ statusText(item) }}</span>
               <button
                 v-if="item.status === 'error'"
                 type="button"
@@ -186,6 +192,10 @@ watch(
                 Cancel
               </button>
             </span>
+
+            <span class="mint-batch-progress__item-progress" aria-hidden="true">
+              <span class="mint-batch-progress__item-progress-bar" :style="{ width: `${itemPercent(item)}%` }" />
+            </span>
           </div>
 
           <div v-if="item.status === 'error' && item.message" class="mint-batch-progress__item-message">