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

package/src/components/ConfirmDialog.story.vue

@@ -2,9 +2,9 @@
 import { ref } from 'vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import BaseButton from './BaseButton.vue'
-import type { ConfirmVariant } from '../types'
+import type { Tone } from '../types'
 
-const variants: ConfirmVariant[] = ['danger', 'warning', 'info']
+const tones: Tone[] = ['error', 'warning', 'info', 'success', 'primary', 'neutral']
 
 const dialogOpen = ref(false)
 const dangerOpen = ref(false)
@@ -34,7 +34,7 @@ function initPlayground() {
     title: 'Delete experiment',
     subtitle: 'EXP-2024-001 · Dose-response',
     message: 'This will permanently delete the experiment and all associated data. This action cannot be undone.',
-    variant: 'danger' as ConfirmVariant,
+    tone: 'error' as Tone,
     confirmLabel: 'Delete',
     cancelLabel: 'Cancel',
     loading: false,
@@ -53,11 +53,11 @@ function initPlayground() {
             Last event: <code>{{ lastAction }}</code>
           </div>
           <ConfirmDialog
-            v-model="dialogOpen"
+            v-model:open="dialogOpen"
             :title="state.title"
             :subtitle="state.subtitle"
             :message="state.message"
-            :variant="state.variant"
+            :tone="state.tone"
             :confirm-label="state.confirmLabel"
             :cancel-label="state.cancelLabel"
             :loading="state.loading"
@@ -72,9 +72,9 @@ function initPlayground() {
         <HstText v-model="state.subtitle" title="Subtitle (context line)" />
         <HstText v-model="state.message" title="Message" />
         <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
         />
         <HstText v-model="state.confirmLabel" title="Confirm label" />
         <HstText v-model="state.cancelLabel" title="Cancel label" />
@@ -87,18 +87,18 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="danger" @click="uninstallOpen = true">Uninstall plugin</BaseButton>
         <ConfirmDialog
-          v-model="uninstallOpen"
+          v-model:open="uninstallOpen"
           title="Confirm uninstall"
           subtitle="mint-plugin-metabolomics · v2.4.1"
           message="Removing this plugin will delete its routes from the platform on next restart. Plugin data and registered experiment types will be preserved."
-          variant="danger"
+          tone="error"
           confirm-label="Uninstall"
           @confirm="() => { uninstallOpen = false; log('uninstalled metabolomics') }"
         />
       </div>
       <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
         The canonical refresh layout: title + subtitle (plugin name · version) sit in the modal header; body holds
-        only the explanatory message; red confirm carries the variant intent — no icon needed.
+        only the explanatory message; red confirm carries the tone — no icon needed.
       </p>
     </Variant>
 
@@ -107,10 +107,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="danger" @click="dangerOpen = true">Delete experiment</BaseButton>
         <ConfirmDialog
-          v-model="dangerOpen"
+          v-model:open="dangerOpen"
           title="Delete Experiment"
           message="Are you sure you want to delete this experiment? All associated data, plates, and analysis results will be permanently removed. This action cannot be undone."
-          variant="danger"
+          tone="error"
           confirm-label="Delete"
           @confirm="() => { dangerOpen = false; log('deleted') }"
         />
@@ -122,10 +122,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="secondary" @click="warningOpen = true">Reset analysis</BaseButton>
         <ConfirmDialog
-          v-model="warningOpen"
+          v-model:open="warningOpen"
           title="Reset Analysis"
           message="This will discard all unsaved changes and reset the analysis to its initial state. Do you want to continue?"
-          variant="warning"
+          tone="warning"
           confirm-label="Reset"
           @confirm="() => { warningOpen = false; log('reset') }"
         />
@@ -137,10 +137,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="infoOpen = true">Export data</BaseButton>
         <ConfirmDialog
-          v-model="infoOpen"
+          v-model:open="infoOpen"
           title="Export Data"
           message="This will generate a CSV export of all 96 wells across 3 plates. The download will start automatically."
-          variant="info"
+          tone="info"
           confirm-label="Export"
           @confirm="() => { infoOpen = false; log('exported') }"
         />
@@ -152,10 +152,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="saveOpen = true">Save to EXP-042</BaseButton>
         <ConfirmDialog
-          v-model="saveOpen"
+          v-model:open="saveOpen"
           title="Save to Experiment"
           message="Save current data to DRP Dose-Response Screen · March 2026?"
-          variant="info"
+          tone="info"
           confirm-label="Save"
           @confirm="() => { saveOpen = false; log('saved to EXP-042') }"
         />
@@ -171,10 +171,10 @@ function initPlayground() {
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton variant="primary" @click="loadingOpen = true">Submit results</BaseButton>
         <ConfirmDialog
-          v-model="loadingOpen"
+          v-model:open="loadingOpen"
           title="Submit Results"
           message="Submit the analysis results to the platform? This may take a moment."
-          variant="info"
+          tone="info"
           confirm-label="Submit"
           :loading="isLoading"
           @confirm="handleConfirmLoading"

package/src/components/ConfirmDialog.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-/** Confirm/cancel dialog with danger, warning, and info variants; blocks close while loading. */
+/** Confirm/cancel dialog whose `tone` colors the confirm button; blocks close while loading. */
 import { computed } from 'vue'
-import type { ButtonVariant } from '../types'
+import type { ButtonVariant, Tone } from '../types'
 import BaseModal from './BaseModal.vue'
 import BaseButton from './BaseButton.vue'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   title?: string
   subtitle?: string
   message?: string
-  variant?: 'danger' | 'warning' | 'info'
+  tone?: Tone
   confirmLabel?: string
   cancelLabel?: string
   loading?: boolean
@@ -18,20 +18,20 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: 'Confirm',
-  variant: 'danger',
+  tone: 'error',
   confirmLabel: 'Confirm',
   cancelLabel: 'Cancel',
   loading: false,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   confirm: []
   cancel: []
 }>()
 
 function handleCancel() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
   emit('cancel')
 }
 
@@ -40,29 +40,30 @@ function handleConfirm() {
 }
 
 const confirmVariant = computed<ButtonVariant>(() => {
-  if (props.variant === 'info') return 'primary'
-  if (props.variant === 'warning') return 'cta'
-  return 'danger'
+  if (props.tone === 'error') return 'danger'
+  if (props.tone === 'warning' || props.tone === 'cta') return 'cta'
+  if (props.tone === 'success') return 'success'
+  return 'primary'
 })
 </script>
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :subtitle="subtitle"
     size="sm"
     :closable="!loading"
     :close-on-overlay="!loading"
     :close-on-escape="!loading"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
     <div class="mint-confirm">
       <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on
-           the message; variant intent is carried by the confirm button's color. -->
+           the message; tone is carried by the confirm button's color. -->
       <div
         v-if="$slots.icon"
-        :class="['mint-confirm__icon', `mint-confirm__icon--${variant}`]"
+        :class="['mint-confirm__icon', `mint-confirm__icon--${tone}`]"
       >
         <slot name="icon" />
       </div>

package/src/components/DataFrame.story.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import DataFrame from './DataFrame.vue'
-import type { DataFrameColumn, PaginationState } from '../types'
+import type { DataFrameColumn } from '../types'
+import { defineDataFrame } from '../composables/componentSpecs'
 
 const columns: DataFrameColumn[] = [
   { key: 'id', label: 'ID', sortable: true, width: 60, align: 'center' },
@@ -27,7 +28,9 @@ const data = [
   { id: 12, compound: 'Vehicle', concentration: 0, response: 1.8, well: 'C2', status: 'Pass' },
 ]
 
-const selectedKeys = ref<(string | number)[]>([])
+const selected = ref<(string | number)[]>([])
+const page = ref(1)
+const table = defineDataFrame({ columns, rowKey: 'id' })
 
 // Case-sensitive units stay as written; numeric columns align on the decimal (2a).
 const measureData = [
@@ -57,7 +60,6 @@ function measureColumns(state: UnitsState): DataFrameColumn[] {
     { key: 'volume', label: 'Volume', unit: 'mL', type, precision: state.precision },
   ]
 }
-const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.length })
 </script>
 
 <template>
@@ -67,19 +69,20 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
         <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
           <DataFrame
             :error="state.error || null"
+            v-model:selected="selected"
+            :spec="defineDataFrame({
+              columns,
+              rowKey: 'id',
+              striped: state.striped,
+              bordered: state.bordered,
+              sortable: state.sortable,
+              searchable: state.searchable,
+              selectable: state.selectable,
+              size: state.size,
+              stickyHeader: state.stickyHeader,
+            })"
             :data="data"
-            :columns="columns"
-            row-key="id"
-            :striped="state.striped"
-            :bordered="state.bordered"
-            :sortable="state.sortable"
-            :searchable="state.searchable"
-            :selectable="state.selectable"
             :loading="state.loading"
-            :size="state.size"
-            :sticky-header="state.stickyHeader"
-            :selected-keys="selectedKeys"
-            @update:selected-keys="selectedKeys = $event"
           />
         </div>
       </template>
@@ -105,7 +108,7 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Units and Numeric Columns" :init-state="initUnitsState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
-          <DataFrame :data="measureData" :columns="measureColumns(state)" row-key="sample" />
+          <DataFrame :spec="{ columns: measureColumns(state), rowKey: 'sample' }" :data="measureData" />
         </div>
       </template>
 
@@ -119,12 +122,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Sortable with Search">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          :spec="{ columns, rowKey: 'id', sortable: true, searchable: true, searchPlaceholder: 'Search compounds, wells...' }"
           :data="data"
-          :columns="columns"
-          row-key="id"
-          sortable
-          searchable
-          search-placeholder="Search compounds, wells..."
         />
       </div>
     </Variant>
@@ -132,12 +131,9 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="With Pagination">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          v-model:page="page"
+          :spec="{ columns, rowKey: 'id', sortable: true, pagination: { pageSize: 5 } }"
           :data="data"
-          :columns="columns"
-          row-key="id"
-          sortable
-          :pagination="pagination"
-          @update:pagination="pagination = $event"
         />
       </div>
     </Variant>
@@ -145,15 +141,12 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Selectable Rows">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          v-model:selected="selected"
+          :spec="{ columns, rowKey: 'id', selectable: true }"
           :data="data"
-          :columns="columns"
-          row-key="id"
-          selectable
-          :selected-keys="selectedKeys"
-          @update:selected-keys="selectedKeys = $event"
         />
         <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Selected IDs: {{ selectedKeys.length ? selectedKeys.join(', ') : 'none' }}
+          Selected IDs: {{ selected.length ? selected.join(', ') : 'none' }}
         </p>
       </div>
     </Variant>
@@ -161,8 +154,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Loading State">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          :spec="table"
           :data="[]"
-          :columns="columns"
           loading
         />
       </div>
@@ -171,8 +164,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Empty State">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          :spec="table"
           :data="[]"
-          :columns="columns"
           empty-text="No experiment results found. Run an analysis to populate this table."
         />
       </div>
@@ -181,12 +174,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Compact (sm)">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          :spec="{ columns, rowKey: 'id', size: 'sm', sortable: true }"
           :data="data"
-          :columns="columns"
-          row-key="id"
-          size="sm"
-          sortable
-          bordered
         />
       </div>
     </Variant>
@@ -194,9 +183,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
     <Variant title="Error">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame
+          :spec="table"
           :data="data"
-          :columns="columns"
-          row-key="id"
           error="Could not load the result table."
         />
       </div>