@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/__tests__/components/DataStates.test.ts

@@ -2,8 +2,6 @@ import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import AuditTrail from '../../components/AuditTrail.vue'
 import BatchProgressList from '../../components/BatchProgressList.vue'
-import ExperimentTimeline from '../../components/ExperimentTimeline.vue'
-import ReagentList from '../../components/ReagentList.vue'
 import SampleHierarchyTree from '../../components/SampleHierarchyTree.vue'
 import ScheduleCalendar from '../../components/ScheduleCalendar.vue'
 import WellPlate from '../../components/WellPlate.vue'
@@ -31,20 +29,6 @@ const cases = [
     filledProps: { items: [{ id: '1', label: 'One', status: 'pending' }] },
     contentSelector: '.mint-batch-progress__list',
   },
-  {
-    name: 'ExperimentTimeline',
-    component: ExperimentTimeline,
-    emptyProps: { modelValue: [] },
-    filledProps: { modelValue: [{ id: 's1', name: 'Step 1', order: 1, type: 'incubation' }] },
-    contentSelector: '.mint-timeline__step',
-  },
-  {
-    name: 'ReagentList',
-    component: ReagentList,
-    emptyProps: { modelValue: [] },
-    filledProps: { modelValue: [{ id: 'r1', name: 'Water' }] },
-    contentSelector: '.mint-reagent-list__table',
-  },
   {
     name: 'SampleHierarchyTree',
     component: SampleHierarchyTree,
@@ -111,16 +95,16 @@ describe('shared data component states', () => {
   })
 
   describe('opt-in empty states', () => {
-    it('keeps the WellPlate grid when no emptyMessage is given', () => {
+    it('keeps the WellPlate grid when no emptyText is given', () => {
       const wrapper = mount(WellPlate, { props: { wells: {} } })
 
       expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(true)
       expect(wrapper.find('[data-state]').exists()).toBe(false)
     })
 
-    it('replaces the WellPlate grid once an emptyMessage is given', () => {
+    it('replaces the WellPlate grid once an emptyText is given', () => {
       const wrapper = mount(WellPlate, {
-        props: { wells: {}, emptyMessage: 'No plate loaded' },
+        props: { wells: {}, emptyText: 'No plate loaded' },
       })
 
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
@@ -134,16 +118,16 @@ describe('shared data component states', () => {
       expect(wrapper.find('.mint-well-plate__scroll').exists()).toBe(false)
     })
 
-    it('keeps the ScheduleCalendar grid when no emptyMessage is given', () => {
+    it('keeps the ScheduleCalendar grid when no emptyText is given', () => {
       const wrapper = mount(ScheduleCalendar, { props: { events: [] } })
 
       expect(wrapper.find('.mint-schedule__body').exists()).toBe(true)
       expect(wrapper.find('[data-state]').exists()).toBe(false)
     })
 
-    it('replaces the ScheduleCalendar grid once an emptyMessage is given', () => {
+    it('replaces the ScheduleCalendar grid once an emptyText is given', () => {
       const wrapper = mount(ScheduleCalendar, {
-        props: { events: [], emptyMessage: 'Nothing scheduled' },
+        props: { events: [], emptyText: 'Nothing scheduled' },
       })
 
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)

package/src/__tests__/components/{DateTimePicker.test.ts → DatePicker.datetime.test.ts}

@@ -2,12 +2,13 @@ import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
-import DateTimePicker from '../../components/DateTimePicker.vue'
+import DatePicker from '../../components/DatePicker.vue'
 
-describe('DateTimePicker', () => {
+describe('DatePicker type="datetime"', () => {
   it('uses the shared calendar panel and keeps time selection working', async () => {
-    const wrapper = mount(DateTimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'datetime',
         modelValue: '2026-04-22T14:30',
       },
     })
@@ -28,8 +29,9 @@ describe('DateTimePicker', () => {
   })
 
   it('uses shared dropdown state for Escape close behavior', async () => {
-    const wrapper = mount(DateTimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'datetime',
         modelValue: '2026-04-22T14:30',
       },
       attachTo: document.body,
@@ -47,8 +49,8 @@ describe('DateTimePicker', () => {
   })
 
   it('opens from the keyboard, focuses the calendar, and restores focus on close', async () => {
-    const wrapper = mount(DateTimePicker, {
-      props: { modelValue: '2026-04-22T14:30' },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'datetime', modelValue: '2026-04-22T14:30' },
       attachTo: document.body,
     })
     const input = wrapper.get<HTMLInputElement>('input').element
@@ -71,7 +73,7 @@ describe('DateTimePicker', () => {
   })
 
   it('marks the panel as a non-modal dialog', async () => {
-    const wrapper = mount(DateTimePicker, { attachTo: document.body })
+    const wrapper = mount(DatePicker, { props: { type: 'datetime' }, attachTo: document.body })
 
     await wrapper.get('input').trigger('click')
 

package/src/__tests__/components/{TimePicker.test.ts → DatePicker.time.test.ts}

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import TimePicker from '../../components/TimePicker.vue'
+import DatePicker from '../../components/DatePicker.vue'
 
-describe('TimePicker', () => {
+describe('DatePicker type="time"', () => {
   it('opens from keyboard disclosure shortcuts', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(DatePicker, { props: { type: 'time' } })
 
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
 
@@ -12,8 +12,9 @@ describe('TimePicker', () => {
   })
 
   it('uses shared dropdown state for Escape and outside-click close behavior', async () => {
-    const wrapper = mount(TimePicker, {
+    const wrapper = mount(DatePicker, {
       props: {
+        type: 'time',
         modelValue: '14:30',
       },
       attachTo: document.body,
@@ -37,8 +38,8 @@ describe('TimePicker', () => {
   })
 
   it('publishes the highlighted slot through aria-activedescendant', async () => {
-    const wrapper = mount(TimePicker, {
-      props: { modelValue: '14:30' },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'time', modelValue: '14:30' },
       attachTo: document.body,
     })
 
@@ -59,8 +60,8 @@ describe('TimePicker', () => {
   })
 
   it('jumps to the first and last selectable slot with Home and End', async () => {
-    const wrapper = mount(TimePicker, {
-      props: { min: '09:00', max: '10:00', step: 30 },
+    const wrapper = mount(DatePicker, {
+      props: { type: 'time', min: '09:00', max: '10:00', step: 30 },
       attachTo: document.body,
     })
 
@@ -81,7 +82,7 @@ describe('TimePicker', () => {
   })
 
   it('returns focus to the input when Escape closes the list', async () => {
-    const wrapper = mount(TimePicker, { attachTo: document.body })
+    const wrapper = mount(DatePicker, { props: { type: 'time' }, attachTo: document.body })
     const input = wrapper.get<HTMLInputElement>('input').element
 
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })
@@ -98,7 +99,7 @@ describe('TimePicker', () => {
   })
 
   it('should render the dropdown on the shared popover surface when opened', async () => {
-    const wrapper = mount(TimePicker)
+    const wrapper = mount(DatePicker, { props: { type: 'time' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -106,7 +107,7 @@ describe('TimePicker', () => {
   })
 
   it('should mark the selected slot as a selected menu item when opened', async () => {
-    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', modelValue: '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -114,7 +115,7 @@ describe('TimePicker', () => {
   })
 
   it('should reserve the check column on unselected slots when opened', async () => {
-    const wrapper = mount(TimePicker, { props: { modelValue: '00:15' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', modelValue: '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -122,7 +123,7 @@ describe('TimePicker', () => {
   })
 
   it('should mark a slot unavailable when disabledSlots returns a reason', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -130,7 +131,7 @@ describe('TimePicker', () => {
   })
 
   it('should render the reason inline when a slot is unavailable', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Booked · HPLC-02' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -138,7 +139,7 @@ describe('TimePicker', () => {
   })
 
   it('should not render a reason when disabledSlots returns true', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' } })
 
     await wrapper.get('input').trigger('click')
 
@@ -146,7 +147,7 @@ describe('TimePicker', () => {
   })
 
   it('should not emit a value when an unavailable slot is clicked', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
 
     await wrapper.get('input').trigger('click')
     await wrapper.findAll('.mint-time-picker__slot')[1].trigger('click')
@@ -155,7 +156,7 @@ describe('TimePicker', () => {
   })
 
   it('should skip unavailable slots when moving the highlight with ArrowDown', async () => {
-    const wrapper = mount(TimePicker, { props: { disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
+    const wrapper = mount(DatePicker, { props: { type: 'time', disabledSlots: (time: string) => time === '00:15' && 'Maintenance' } })
 
     await wrapper.get('input').trigger('click')
     await wrapper.get('.mint-time-picker').trigger('keydown', { key: 'ArrowDown' })

package/src/__tests__/components/DoseCalculator.test.ts

@@ -2,9 +2,14 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import BaseButton from '../../components/BaseButton.vue'
-import BaseInput from '../../components/BaseInput.vue'
+import NumberInput from '../../components/NumberInput.vue'
 import DoseCalculator from '../../components/DoseCalculator.vue'
 
+/** The serial row's own number fields; the volume fields are NumberInputs with `units`. */
+function serialInputs(wrapper: Awaited<ReturnType<typeof mountSerial>>) {
+  return wrapper.findAllComponents(NumberInput).filter((i) => !i.props('units'))
+}
+
 async function mountSerial(props: Record<string, unknown> = {}) {
   const wrapper = mount(DoseCalculator, { props: { mode: 'serial', ...props } })
   await nextTick()
@@ -12,22 +17,22 @@ async function mountSerial(props: Record<string, unknown> = {}) {
 }
 
 describe('DoseCalculator (6c)', () => {
-  it('should enter the dilution factor in a BaseInput with a × suffix', async () => {
+  it('should enter the dilution factor in a NumberInput with a × unit', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAll('.mint-input-group__suffix').map((s) => s.text())).toContain('×')
+    expect(serialInputs(wrapper).map((i) => i.props('unit'))).toContain('×')
   })
 
-  it('should enter the number of dilutions in a BaseInput', async () => {
+  it('should enter the number of dilutions in a NumberInput', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('modelValue'))).toContain(8)
+    expect(serialInputs(wrapper).map((i) => i.props('modelValue'))).toContain(8)
   })
 
   it('should recalculate when the dilution factor changes', async () => {
     const wrapper = await mountSerial()
 
-    wrapper.findAllComponents(BaseInput).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
+    serialInputs(wrapper).find((i) => i.props('modelValue') === 3)!.vm.$emit('update:modelValue', 2)
     await nextTick()
 
     expect(wrapper.emitted('calculate')?.at(-1)?.[0]).toMatchObject({ steps: expect.any(Array) })
@@ -42,6 +47,6 @@ describe('DoseCalculator (6c)', () => {
   it('should size the serial row fields to the 32px control height', async () => {
     const wrapper = await mountSerial()
 
-    expect(wrapper.findAllComponents(BaseInput).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
+    expect(serialInputs(wrapper).map((i) => i.props('size'))).toEqual(['sm', 'sm'])
   })
 })

package/src/__tests__/components/DoseCalculatorVolumeField.test.ts

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import DoseCalculatorVolumeField from '../../components/DoseCalculatorVolumeField.vue'
 import FormField from '../../components/FormField.vue'
-import UnitInput from '../../components/UnitInput.vue'
-import type { VolumeUnit } from '../../composables/useDoseCalculator'
+import NumberInput from '../../components/NumberInput.vue'
+import type { VolumeUnit } from '../../utils/dose'
 
 const units: VolumeUnit[] = ['µL', 'mL', 'L']
 
@@ -23,7 +23,7 @@ describe('DoseCalculatorVolumeField', () => {
   it('should emit unit updates while preserving the current value', () => {
     const wrapper = mountField({ value: 100, unit: 'µL' })
 
-    wrapper.findComponent(UnitInput).vm.$emit('update:unit', 'mL')
+    wrapper.findComponent(NumberInput).vm.$emit('update:unit', 'mL')
 
     expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ value: 100, unit: 'mL' }])
   })
@@ -36,10 +36,10 @@ describe('DoseCalculatorVolumeField', () => {
     expect(wrapper.emitted('update:modelValue')).toBeUndefined()
   })
 
-  it('should offer every volume unit in the UnitInput segment (6c)', () => {
+  it('should offer every volume unit in the NumberInput unit segment (6c)', () => {
     const wrapper = mountField()
 
-    expect(wrapper.findComponent(UnitInput).props('units').map((u: { value: string }) => u.value)).toEqual(units)
+    expect(wrapper.findComponent(NumberInput).props('units')!.map((u: { value: string }) => u.value)).toEqual(units)
   })
 
   it('should lay the field out as a FormField row (6c)', () => {
@@ -51,6 +51,6 @@ describe('DoseCalculatorVolumeField', () => {
   it('should size the volume field to the 32px control height', () => {
     const wrapper = mountField()
 
-    expect(wrapper.findComponent(UnitInput).props('size')).toBe('sm')
+    expect(wrapper.findComponent(NumberInput).props('size')).toBe('sm')
   })
 })

package/src/__tests__/components/ExperimentSelectorModal.test.ts

@@ -48,7 +48,7 @@ function experiment(overrides: Partial<ExperimentSummary> = {}): ExperimentSumma
 }
 
 interface ModalProps {
-  modelValue: boolean
+  open: boolean
   allowedExperimentTypes?: string[] | null
   currentExperimentId?: number | null
 }
@@ -59,7 +59,7 @@ function mountModal(props: ModalProps) {
     global: {
       stubs: {
         BaseModal: {
-          props: ['modelValue', 'title', 'size'],
+          props: ['open', 'title', 'size'],
           template: '<div><slot /></div>',
         },
       },
@@ -77,21 +77,21 @@ describe('ExperimentSelectorModal', () => {
   })
 
   it('fetches experiments when mounted already open', () => {
-    mountModal({ modelValue: true })
+    mountModal({ open: true })
 
     expect(fetchFilterOptions).toHaveBeenCalledTimes(1)
     expect(fetchExperiments).toHaveBeenCalledTimes(1)
   })
 
   it('does not fetch while mounted closed', () => {
-    mountModal({ modelValue: false })
+    mountModal({ open: false })
 
     expect(fetchFilterOptions).not.toHaveBeenCalled()
     expect(fetchExperiments).not.toHaveBeenCalled()
   })
 
   it('passes allowed experiment types to the selector composable', () => {
-    mountModal({ modelValue: false, allowedExperimentTypes: ['mass_spectrometry'] })
+    mountModal({ open: false, allowedExperimentTypes: ['mass_spectrometry'] })
 
     expect(useExperimentSelector).toHaveBeenCalledWith({
       experimentType: undefined,
@@ -102,7 +102,7 @@ describe('ExperimentSelectorModal', () => {
   it('commits the clicked platform record to the shared store', async () => {
     const record = experiment()
     experiments.value = [record]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
@@ -113,7 +113,7 @@ describe('ExperimentSelectorModal', () => {
 
   it('does not emit a select event — the store is the single owner', async () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
@@ -122,37 +122,37 @@ describe('ExperimentSelectorModal', () => {
 
   it('closes itself after committing a selection', async () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     await wrapper.find('.mint-resource-picker__row').trigger('click')
 
-    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
   it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__code').text()).toBe('EXP-007')
   })
 
   it('should state the status as text in the right-hand column', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__aside').text()).toContain('Ongoing')
   })
 
   it('should tint the status with the experiment status variant', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true })
+    const wrapper = mountModal({ open: true })
 
     expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--primary')
   })
 
   it('should fill the current experiment row', () => {
     experiments.value = [experiment()]
-    const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
+    const wrapper = mountModal({ open: true, currentExperimentId: 7 })
 
     expect(wrapper.find('.mint-resource-picker__row--selected').exists()).toBe(true)
   })
@@ -160,12 +160,12 @@ describe('ExperimentSelectorModal', () => {
   it('clears the shared store from the clear-selection footer', async () => {
     const store = useExperimentStore()
     store.select(experiment())
-    const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
+    const wrapper = mountModal({ open: true, currentExperimentId: 7 })
 
     await wrapper.find('.mint-experiment-selector__clear-btn').trigger('click')
 
     expect(store.current).toBeNull()
     expect(store.currentId).toBeNull()
-    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 })