@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/UnitInput.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+/** Numeric input paired with a grouped unit selector, with optional auto-conversion and conversion hint when the unit changes. */
+import { computed, ref, watch } from 'vue'
+import type { UnitOption } from '../types'
+
+interface Props {
+  modelValue?: number
+  unit?: string
+  units: UnitOption[]
+  precision?: number
+  min?: number
+  max?: number
+  step?: number
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  convertOnUnitChange?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  precision: undefined,
+  step: undefined,
+  placeholder: 'Enter value',
+  disabled: false,
+  error: false,
+  size: 'md',
+  convertOnUnitChange: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  'update:unit': [unit: string]
+  'change': [data: { value: number | undefined; unit: string }]
+}>()
+
+const conversionHint = ref<string | null>(null)
+
+const currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))
+
+// Group units by their group property
+const hasGroups = computed(() => props.units.some(u => u.group))
+
+const groupedUnits = computed(() => {
+  if (!hasGroups.value) return null
+  const groups = new Map<string, UnitOption[]>()
+  const ungrouped: UnitOption[] = []
+  for (const u of props.units) {
+    if (u.group) {
+      if (!groups.has(u.group)) groups.set(u.group, [])
+      groups.get(u.group)!.push(u)
+    } else {
+      ungrouped.push(u)
+    }
+  }
+  return { groups, ungrouped }
+})
+
+function findUnit(value: string): UnitOption | undefined {
+  return props.units.find(u => u.value === value)
+}
+
+function roundToPrecision(value: number): number {
+  if (props.precision === undefined) return value
+  const factor = Math.pow(10, props.precision)
+  return Math.round(value * factor) / factor
+}
+
+function clamp(value: number): number {
+  let result = value
+  if (props.min !== undefined && result < props.min) result = props.min
+  if (props.max !== undefined && result > props.max) result = props.max
+  return result
+}
+
+function handleValueInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = target.value === '' ? undefined : Number(target.value)
+
+  conversionHint.value = null
+
+  if (value === undefined || isNaN(value)) {
+    emit('update:modelValue', undefined)
+    emit('change', { value: undefined, unit: currentUnit.value })
+    return
+  }
+
+  const clamped = clamp(value)
+  emit('update:modelValue', clamped)
+  emit('change', { value: clamped, unit: currentUnit.value })
+}
+
+function handleUnitChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const newUnitValue = target.value
+  const oldUnitValue = currentUnit.value
+
+  let newValue = props.modelValue
+
+  if (props.convertOnUnitChange && newValue !== undefined) {
+    const oldUnit = findUnit(oldUnitValue)
+    const newUnit = findUnit(newUnitValue)
+
+    if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {
+      const converted = newValue * (oldUnit.factor / newUnit.factor)
+      newValue = roundToPrecision(converted)
+      newValue = clamp(newValue)
+      conversionHint.value = `Converted from ${oldUnit.label} to ${newUnit.label}`
+      emit('update:modelValue', newValue)
+    }
+  }
+
+  emit('update:unit', newUnitValue)
+  emit('change', { value: newValue, unit: newUnitValue })
+}
+
+// Clear conversion hint after a delay
+watch(conversionHint, (hint) => {
+  if (hint) {
+    setTimeout(() => {
+      conversionHint.value = null
+    }, 3000)
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-unit-input',
+      error ? 'mld-unit-input--error' : '',
+      disabled ? 'mld-unit-input--disabled' : '',
+    ]"
+  >
+    <div :class="['mld-unit-input__controls', `mld-unit-input__controls--${size}`]">
+      <input
+        type="number"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="[
+          'mld-unit-input__value',
+          `mld-unit-input__value--${size}`,
+          disabled ? 'mld-unit-input__value--disabled' : '',
+        ]"
+        aria-label="Value"
+        @input="handleValueInput"
+      />
+
+      <div class="mld-unit-input__unit">
+        <select
+          :value="currentUnit"
+          :disabled="disabled"
+          :class="[
+            'mld-unit-input__unit-select',
+            `mld-unit-input__unit-select--${size}`,
+          ]"
+          aria-label="Unit"
+          @change="handleUnitChange"
+        >
+          <template v-if="groupedUnits">
+            <template v-if="groupedUnits.ungrouped.length > 0">
+              <option
+                v-for="u in groupedUnits.ungrouped"
+                :key="u.value"
+                :value="u.value"
+              >
+                {{ u.label }}
+              </option>
+            </template>
+            <optgroup
+              v-for="[groupLabel, groupUnits] in groupedUnits.groups"
+              :key="groupLabel"
+              :label="groupLabel"
+              class="mld-unit-input__unit-group"
+            >
+              <option
+                v-for="u in groupUnits"
+                :key="u.value"
+                :value="u.value"
+              >
+                {{ u.label }}
+              </option>
+            </optgroup>
+          </template>
+          <template v-else>
+            <option
+              v-for="u in units"
+              :key="u.value"
+              :value="u.value"
+            >
+              {{ u.label }}
+            </option>
+          </template>
+        </select>
+      </div>
+    </div>
+
+    <div
+      v-if="conversionHint"
+      class="mld-unit-input__conversion-hint"
+    >
+      {{ conversionHint }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/unit-input.css';
+</style>

package/src/components/WellEditPopup.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import type { Well, WellEditData, WellEditField } from '../types'
+
+interface Props {
+  wellId: string
+  wellData?: Partial<Well>
+  editFields?: WellEditField[]
+  defaultInjectionVolume?: number
+  position: { x: number; y: number }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  wellData: () => ({}),
+  editFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  defaultInjectionVolume: 5,
+})
+
+const emit = defineEmits<{
+  save: [data: WellEditData]
+  clear: []
+  close: []
+}>()
+
+const showAdvanced = ref(false)
+
+const formData = ref({
+  label: '',
+  sampleType: 'sample',
+  injectionVolume: props.defaultInjectionVolume,
+  injectionCount: 1,
+  customMethod: '',
+})
+
+watch(
+  () => [props.wellId, props.wellData] as const,
+  () => {
+    const meta = props.wellData?.metadata as Record<string, unknown> | undefined
+    formData.value = {
+      label: (meta?.label as string) || '',
+      sampleType: props.wellData?.sampleType || 'sample',
+      injectionVolume: (meta?.injectionVolume as number) || props.defaultInjectionVolume,
+      injectionCount: (meta?.injectionCount as number) || 1,
+      customMethod: (meta?.customMethod as string) || '',
+    }
+    showAdvanced.value = (formData.value.injectionCount > 1) || !!formData.value.customMethod
+  },
+  { immediate: true },
+)
+
+const hasField = (field: WellEditField) => props.editFields.includes(field)
+
+const popupStyle = computed(() => {
+  const x = props.position.x
+  const y = props.position.y
+  const style: Record<string, string> = {
+    left: `${x}px`,
+    top: `${y}px`,
+  }
+  return style
+})
+
+function save() {
+  emit('save', {
+    wellId: props.wellId,
+    label: formData.value.label.trim(),
+    sampleType: formData.value.sampleType,
+    injectionVolume: formData.value.injectionVolume,
+    injectionCount: formData.value.injectionCount || 1,
+    customMethod: formData.value.customMethod?.trim() || '',
+  })
+}
+
+function clear() {
+  emit('clear')
+}
+
+function close() {
+  emit('close')
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+const sampleTypeButtons = [
+  { type: 'sample', label: 'S', tooltip: 'Sample' },
+  { type: 'blank', label: 'B', tooltip: 'Blank' },
+  { type: 'qc', label: 'Q', tooltip: 'QC' },
+]
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <div class="mld-well-edit-popup__backdrop" @click="close" />
+
+    <!-- Popup -->
+    <div
+      class="mld-well-edit-popup"
+      :style="popupStyle"
+      @click.stop
+    >
+      <!-- Header -->
+      <div class="mld-well-edit-popup__header">
+        <div class="mld-well-edit-popup__header-left">
+          <span class="mld-well-edit-popup__well-id">{{ wellId }}</span>
+          <span class="mld-well-edit-popup__title">Edit Well</span>
+        </div>
+        <button class="mld-well-edit-popup__close" @click="close">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body -->
+      <div class="mld-well-edit-popup__body">
+        <!-- Sample Name -->
+        <div v-if="hasField('label')">
+          <label class="mld-well-edit-popup__label">Sample Name</label>
+          <input
+            v-model="formData.label"
+            type="text"
+            placeholder="e.g., Sample_001"
+            class="mld-well-edit-popup__input"
+            @keydown.enter="save"
+            autofocus
+          />
+        </div>
+
+        <!-- Type + Volume row -->
+        <div class="mld-well-edit-popup__row">
+          <div v-if="hasField('sampleType')">
+            <label class="mld-well-edit-popup__label">Type</label>
+            <div class="mld-well-edit-popup__type-grid">
+              <button
+                v-for="btn in sampleTypeButtons"
+                :key="btn.type"
+                :title="btn.tooltip"
+                class="mld-well-edit-popup__type-btn"
+                :class="{
+                  [`mld-well-edit-popup__type-btn--${btn.type}`]: formData.sampleType === btn.type,
+                }"
+                @click="formData.sampleType = btn.type"
+              >
+                {{ btn.label }}
+              </button>
+            </div>
+          </div>
+          <div v-if="hasField('injectionVolume')">
+            <label class="mld-well-edit-popup__label">Volume (uL)</label>
+            <input
+              v-model.number="formData.injectionVolume"
+              type="number"
+              min="0.1"
+              max="100"
+              step="0.5"
+              class="mld-well-edit-popup__input"
+            />
+          </div>
+        </div>
+
+        <!-- Advanced toggle -->
+        <label
+          v-if="hasField('injectionCount') || hasField('customMethod')"
+          class="mld-well-edit-popup__advanced-toggle"
+        >
+          <input type="checkbox" v-model="showAdvanced" />
+          <span>Advanced options</span>
+        </label>
+
+        <!-- Advanced fields -->
+        <template v-if="showAdvanced">
+          <!-- Injection count -->
+          <div v-if="hasField('injectionCount')">
+            <label class="mld-well-edit-popup__label">Repeat Injections</label>
+            <div class="mld-well-edit-popup__count-grid">
+              <button
+                v-for="n in [1, 2, 3, 4, 5]"
+                :key="n"
+                class="mld-well-edit-popup__count-btn"
+                :class="{ 'mld-well-edit-popup__count-btn--active': formData.injectionCount === n }"
+                @click="formData.injectionCount = n"
+              >
+                {{ n }}&times;
+              </button>
+              <input
+                v-model.number="formData.injectionCount"
+                type="number"
+                min="1"
+                max="10"
+                class="mld-well-edit-popup__count-input"
+              />
+            </div>
+          </div>
+
+          <!-- Custom method -->
+          <div v-if="hasField('customMethod')">
+            <label class="mld-well-edit-popup__label">Custom Method Path</label>
+            <input
+              v-model="formData.customMethod"
+              type="text"
+              placeholder="Leave empty for default"
+              class="mld-well-edit-popup__input mld-well-edit-popup__input--mono"
+            />
+          </div>
+        </template>
+      </div>
+
+      <!-- Footer -->
+      <div class="mld-well-edit-popup__footer">
+        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--clear" @click="clear">
+          Clear Well
+        </button>
+        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--save" @click="save">
+          Save
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/well-edit-popup.css';
+</style>