@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/ComponentBindingRenderer.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+/** Render generated SDK component bindings such as WellPlate, DoseCalculator, DataFrame, and PlateMapEditor. */
+import { computed, type Component } from 'vue'
+import DataFrame from './DataFrame.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import ExperimentTimeline from './ExperimentTimeline.vue'
+import PlateMapEditor from './PlateMapEditor.vue'
+import ReagentList from './ReagentList.vue'
+import SampleSelector from './SampleSelector.vue'
+import WellPlate from './WellPlate.vue'
+
+export interface ComponentBindingRendererBinding {
+  id?: string
+  component: string
+  props?: Record<string, unknown> | readonly string[]
+  propsObject?: Record<string, unknown>
+  description?: string
+  template_id?: string
+}
+
+type ComponentBindingRendererLayout = 'grid' | 'stack'
+
+interface Props {
+  /** Single generated SDK component binding to render. */
+  binding?: ComponentBindingRendererBinding
+  /** Generated SDK component bindings to render. */
+  bindings?: ComponentBindingRendererBinding[]
+  /** Optional allow-list of component names, for example ['WellPlate', 'DataFrame']. */
+  include?: string[]
+  /** Optional deny-list of component names. */
+  exclude?: string[]
+  /** Compact child component sizing. */
+  dense?: boolean
+  /** Prefer preview-safe props for editable components. */
+  readonly?: boolean
+  /** Show component/template labels above each rendered component. */
+  showHeaders?: boolean
+  /** Show binding descriptions in each header. */
+  showDescriptions?: boolean
+  /** Grid or vertical stack layout. */
+  layout?: ComponentBindingRendererLayout
+  /** Message shown when no binding can be rendered. */
+  emptyText?: string
+}
+
+type RenderableBinding = ComponentBindingRendererBinding & {
+  id: string
+  componentImpl: Component
+  normalizedProps: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  binding: undefined,
+  bindings: () => [],
+  include: () => [],
+  exclude: () => [],
+  dense: false,
+  readonly: true,
+  showHeaders: true,
+  showDescriptions: true,
+  layout: 'grid',
+  emptyText: 'No renderable SDK component bindings.',
+})
+
+const componentRegistry: Record<string, Component> = {
+  DataFrame,
+  DoseCalculator,
+  ExperimentTimeline,
+  PlateMapEditor,
+  ReagentList,
+  SampleSelector,
+  WellPlate,
+}
+
+const inputBindings = computed<ComponentBindingRendererBinding[]>(() => [
+  ...(props.binding ? [props.binding] : []),
+  ...props.bindings,
+])
+
+const renderableBindings = computed<RenderableBinding[]>(() =>
+  inputBindings.value
+    .filter(binding => isIncluded(binding.component))
+    .map((binding, index) => {
+      const componentImpl = componentRegistry[binding.component]
+      if (!componentImpl) return null
+      return {
+        ...binding,
+        id: binding.id ?? `${binding.component}-${index + 1}`,
+        componentImpl,
+        normalizedProps: normalizeProps(binding),
+      }
+    })
+    .filter((binding): binding is RenderableBinding => binding !== null)
+)
+
+const rendererClasses = computed(() => [
+  'mint-component-binding-renderer',
+  `mint-component-binding-renderer--${props.layout}`,
+  props.dense ? 'mint-component-binding-renderer--dense' : '',
+])
+
+function isIncluded(componentName: string): boolean {
+  if (props.include.length > 0 && !props.include.includes(componentName)) return false
+  return !props.exclude.includes(componentName)
+}
+
+function baseProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  if (binding.propsObject) return { ...binding.propsObject }
+  if (isRecord(binding.props)) return { ...binding.props }
+  return {}
+}
+
+function normalizeProps(binding: ComponentBindingRendererBinding): Record<string, unknown> {
+  const base = baseProps(binding)
+
+  switch (binding.component) {
+    case 'WellPlate':
+      return {
+        ...base,
+        readonly: props.readonly || Boolean(base.readonly),
+        size: props.dense ? 'md' : (base.size ?? 'fill'),
+      }
+    case 'PlateMapEditor':
+      return {
+        ...base,
+        size: props.dense ? 'md' : (base.size ?? 'fill'),
+        showToolbar: props.readonly ? false : (base.showToolbar ?? true),
+        showSidebar: props.readonly ? false : (base.showSidebar ?? true),
+        allowAddPlates: props.readonly ? false : (base.allowAddPlates ?? true),
+        allowAddSamples: props.readonly ? false : (base.allowAddSamples ?? true),
+      }
+    case 'DataFrame':
+      return {
+        ...base,
+        size: props.dense ? 'sm' : (base.size ?? 'md'),
+        maxHeight: base.maxHeight ?? (props.dense ? '280px' : undefined),
+      }
+    case 'ExperimentTimeline':
+      return {
+        ...base,
+        editable: props.readonly ? false : base.editable,
+        size: props.dense ? 'sm' : (base.size ?? 'md'),
+      }
+    case 'ReagentList':
+      return {
+        ...base,
+        readonly: props.readonly || Boolean(base.readonly),
+      }
+    case 'SampleSelector':
+      return {
+        ...base,
+        enableGrouping: props.readonly ? false : (base.enableGrouping ?? true),
+        enableSmartGroup: props.readonly ? false : (base.enableSmartGroup ?? true),
+      }
+    default:
+      return base
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+</script>
+
+<template>
+  <div :class="rendererClasses">
+    <section
+      v-for="renderableBinding in renderableBindings"
+      :key="renderableBinding.id"
+      class="mint-component-binding-renderer__item"
+      :data-component-binding-id="renderableBinding.id"
+      :data-template-id="renderableBinding.template_id"
+      :data-template-component="renderableBinding.component"
+    >
+      <header
+        v-if="showHeaders"
+        class="mint-component-binding-renderer__header"
+      >
+        <div class="mint-component-binding-renderer__title-group">
+          <p class="mint-component-binding-renderer__component">
+            {{ renderableBinding.component }}
+          </p>
+          <p
+            v-if="renderableBinding.template_id || renderableBinding.id"
+            class="mint-component-binding-renderer__source"
+          >
+            {{ renderableBinding.template_id ?? renderableBinding.id }}
+          </p>
+        </div>
+        <p
+          v-if="showDescriptions && renderableBinding.description"
+          class="mint-component-binding-renderer__description"
+        >
+          {{ renderableBinding.description }}
+        </p>
+      </header>
+
+      <div class="mint-component-binding-renderer__body">
+        <component
+          :is="renderableBinding.componentImpl"
+          v-bind="renderableBinding.normalizedProps"
+        />
+      </div>
+    </section>
+
+    <p
+      v-if="renderableBindings.length === 0"
+      class="mint-component-binding-renderer__empty"
+    >
+      {{ emptyText }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-component-binding-renderer {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-component-binding-renderer--grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+}
+
+.mint-component-binding-renderer--stack {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mint-component-binding-renderer--dense {
+  gap: 0.75rem;
+}
+
+.mint-component-binding-renderer__item {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-card, #ffffff);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
+}
+
+.mint-component-binding-renderer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  background: var(--bg-secondary, #f8fafc);
+}
+
+.mint-component-binding-renderer__title-group {
+  min-width: 0;
+}
+
+.mint-component-binding-renderer__component {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.mint-component-binding-renderer__source,
+.mint-component-binding-renderer__description,
+.mint-component-binding-renderer__empty {
+  margin: 0;
+  color: var(--text-secondary, #475569);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.mint-component-binding-renderer__description {
+  max-width: 24rem;
+  text-align: right;
+}
+
+.mint-component-binding-renderer__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__header,
+.mint-component-binding-renderer--dense .mint-component-binding-renderer__body {
+  padding: 0.75rem;
+}
+
+.mint-component-binding-renderer__empty {
+  padding: 1rem;
+  border: 1px dashed var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-secondary, #f8fafc);
+  text-align: center;
+}
+
+@media (max-width: 720px) {
+  .mint-component-binding-renderer__header {
+    display: block;
+  }
+
+  .mint-component-binding-renderer__description {
+    max-width: none;
+    margin-top: 0.25rem;
+    text-align: left;
+  }
+}
+</style>

package/src/components/ConcentrationInput.vue

@@ -6,6 +6,7 @@ import {
   type ConcentrationValue,
   type ConcentrationUnit,
 } from '../composables/useConcentrationUnits'
+import UnitInput from './UnitInput.vue'
 
 interface Props {
   modelValue?: ConcentrationValue
@@ -52,6 +53,16 @@ const availableUnits = computed(() => {
   return filteredCategories.value.flatMap(cat => cat.units)
 })
 
+const unitOptions = computed(() =>
+  filteredCategories.value.flatMap(category =>
+    category.units.map(unit => ({
+      value: unit,
+      label: unit,
+      group: filteredCategories.value.length > 1 ? category.label : undefined,
+    }))
+  )
+)
+
 // Current value and unit
 const currentValue = computed(() => props.modelValue?.value)
 const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
@@ -62,10 +73,7 @@ const conversionHint = computed(() => {
   return getConversionHint(props.modelValue)
 })
 
-function handleValueInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = target.value === '' ? undefined : Number(target.value)
-
+function handleValueUpdate(value: number | undefined) {
   if (value === undefined || isNaN(value)) {
     emit('update:modelValue', undefined)
     return
@@ -86,13 +94,10 @@ function handleValueInput(event: Event) {
   })
 }
 
-function handleUnitChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const unit = target.value as ConcentrationUnit
-
+function handleUnitUpdate(unit: string) {
   emit('update:modelValue', {
     value: currentValue.value ?? 0,
-    unit,
+    unit: unit as ConcentrationUnit,
   })
 }
 
@@ -115,61 +120,19 @@ watch(availableUnits, (units) => {
       disabled ? 'mint-concentration-input--disabled' : '',
     ]"
   >
-    <div :class="['mint-concentration-input__controls', `mint-concentration-input__controls--${size}`]">
-      <input
-        type="number"
-        :value="currentValue"
-        :min="min"
-        :max="max"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-concentration-input__value',
-          `mint-concentration-input__value--${size}`,
-          disabled ? 'mint-concentration-input__value--disabled' : '',
-        ]"
-        aria-label="Concentration value"
-        @input="handleValueInput"
-      />
-
-      <div class="mint-concentration-input__unit">
-        <select
-          :value="currentUnit"
-          :disabled="disabled"
-          :class="[
-            'mint-concentration-input__unit-select',
-            `mint-concentration-input__unit-select--${size}`,
-          ]"
-          aria-label="Concentration unit"
-          @change="handleUnitChange"
-        >
-          <template v-for="category in filteredCategories" :key="category.label">
-            <optgroup
-              v-if="filteredCategories.length > 1"
-              :label="category.label"
-              class="mint-concentration-input__unit-group"
-            >
-              <option
-                v-for="unit in category.units"
-                :key="unit"
-                :value="unit"
-              >
-                {{ unit }}
-              </option>
-            </optgroup>
-            <template v-else>
-              <option
-                v-for="unit in category.units"
-                :key="unit"
-                :value="unit"
-              >
-                {{ unit }}
-              </option>
-            </template>
-          </template>
-        </select>
-      </div>
-    </div>
+    <UnitInput
+      :model-value="currentValue"
+      :unit="currentUnit"
+      :units="unitOptions"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      :placeholder="placeholder"
+      @update:model-value="handleValueUpdate"
+      @update:unit="handleUnitUpdate"
+    />
 
     <div
       v-if="showConversion && conversionHint"