@morscherlab/mld-sdk 0.6.0

package/src/components/Tooltip.story.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import Tooltip from './Tooltip.vue'
+
+const positions: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'left', 'right']
+</script>
+
+<template>
+  <Story title="Data Display/Tooltip">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 4rem; display: flex; align-items: center; justify-content: center;">
+          <Tooltip :text="state.text" :position="state.position" :delay="state.delay">
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;"
+            >
+              Hover me
+            </button>
+          </Tooltip>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.text" title="Tooltip Text" />
+        <HstSelect
+          v-model="state.position"
+          title="Position"
+          :options="positions.map(p => ({ label: p, value: p }))"
+        />
+        <HstSlider v-model="state.delay" title="Delay (ms)" :min="0" :max="1000" :step="50" />
+      </template>
+    </Variant>
+
+    <Variant title="All Positions">
+      <div style="padding: 6rem; display: flex; gap: 3rem; align-items: center; justify-content: center; flex-wrap: wrap;">
+        <Tooltip
+          v-for="pos in positions"
+          :key="pos"
+          :text="`Tooltip on ${pos}`"
+          :position="pos"
+          :delay="100"
+        >
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; min-width: 100px; text-align: center;"
+          >
+            {{ pos }}
+          </button>
+        </Tooltip>
+      </div>
+    </Variant>
+
+    <Variant title="On Text Content">
+      <div style="padding: 4rem; max-width: 500px; margin: 0 auto; line-height: 1.8; color: var(--text-primary, #1e293b);">
+        <p style="margin: 0;">
+          The experiment used
+          <Tooltip text="Dimethyl sulfoxide - a polar aprotic solvent" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mld-primary, #3B82F6);">DMSO</span>
+          </Tooltip>
+          as the vehicle control. Samples were incubated at
+          <Tooltip text="Standard mammalian cell culture temperature" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mld-primary, #3B82F6);">37 C</span>
+          </Tooltip>
+          for 24 hours before
+          <Tooltip text="3-(4,5-dimethylthiazol-2-yl)-2,5-diphenyltetrazolium bromide" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mld-primary, #3B82F6);">MTT</span>
+          </Tooltip>
+          assay readout.
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="On Icon Buttons">
+      <div style="padding: 4rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Tooltip text="Add new sample" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip text="Export results" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip text="Delete experiment" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ef4444;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="3 6 5 6 21 6" />
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            </svg>
+          </button>
+        </Tooltip>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Tooltip.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from 'vue'
+
+interface Props {
+  text: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'top',
+  delay: 200,
+})
+
+const visible = ref(false)
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+function show() {
+  timeoutId = setTimeout(() => {
+    visible.value = true
+  }, props.delay)
+}
+
+function hide() {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  visible.value = false
+}
+
+onBeforeUnmount(() => {
+  if (timeoutId) clearTimeout(timeoutId)
+})
+</script>
+
+<template>
+  <span
+    class="mld-tooltip"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+    <span
+      :class="[
+        'mld-tooltip__content',
+        `mld-tooltip__content--${position}`,
+        visible ? 'mld-tooltip__content--visible' : '',
+      ]"
+      role="tooltip"
+    >
+      {{ text }}
+    </span>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/tooltip.css';
+</style>

package/src/components/UnitInput.story.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import UnitInput from './UnitInput.vue'
+
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+
+const concentrationValue = ref<number | undefined>(10)
+const concentrationUnit = ref('uM')
+
+const concentrationUnits = [
+  { value: 'M', label: 'M', factor: 1, group: 'Molar' },
+  { value: 'mM', label: 'mM', factor: 1e-3, group: 'Molar' },
+  { value: 'uM', label: 'uM', factor: 1e-6, group: 'Molar' },
+  { value: 'nM', label: 'nM', factor: 1e-9, group: 'Molar' },
+  { value: 'pM', label: 'pM', factor: 1e-12, group: 'Molar' },
+  { value: 'mg/mL', label: 'mg/mL', factor: 1e-3, group: 'Mass' },
+  { value: 'ug/mL', label: 'ug/mL', factor: 1e-6, group: 'Mass' },
+  { value: 'ng/mL', label: 'ng/mL', factor: 1e-9, group: 'Mass' },
+]
+
+const volumeUnits = [
+  { value: 'L', label: 'L', factor: 1 },
+  { value: 'mL', label: 'mL', factor: 1e-3 },
+  { value: 'uL', label: 'uL', factor: 1e-6 },
+  { value: 'nL', label: 'nL', factor: 1e-9 },
+]
+
+const temperatureUnits = [
+  { value: 'C', label: 'Celsius' },
+  { value: 'F', label: 'Fahrenheit' },
+  { value: 'K', label: 'Kelvin' },
+]
+
+const weightUnits = [
+  { value: 'kg', label: 'kg', factor: 1000 },
+  { value: 'g', label: 'g', factor: 1 },
+  { value: 'mg', label: 'mg', factor: 1e-3 },
+  { value: 'ug', label: 'ug', factor: 1e-6 },
+]
+</script>
+
+<template>
+  <Story title="Scientific/UnitInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+          <UnitInput
+            v-model="concentrationValue"
+            v-model:unit="concentrationUnit"
+            :units="concentrationUnits"
+            :placeholder="state.placeholder"
+            :size="state.size"
+            :disabled="state.disabled"
+            :error="state.error"
+            :convert-on-unit-change="state.convertOnUnitChange"
+            :precision="state.precision"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstSlider v-model="state.precision" title="Precision" :min="0" :max="8" :step="1" />
+        <HstCheckbox v-model="state.convertOnUnitChange" title="Convert on Unit Change" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+    </Variant>
+
+    <Variant title="Concentration (Grouped Units)">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Grouped units with automatic conversion
+        </p>
+        <UnitInput
+          :model-value="10"
+          unit="uM"
+          :units="concentrationUnits"
+          convert-on-unit-change
+          :precision="3"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Volume">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="250"
+          unit="uL"
+          :units="volumeUnits"
+          convert-on-unit-change
+          :precision="2"
+          placeholder="Enter volume"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Temperature (No Conversion)">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="37"
+          unit="C"
+          :units="temperatureUnits"
+          placeholder="Enter temperature"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Weight with Min/Max">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Clamped between 0 and 1000
+        </p>
+        <UnitInput
+          :model-value="5.5"
+          unit="mg"
+          :units="weightUnits"
+          :min="0"
+          :max="1000"
+          :step="0.1"
+          convert-on-unit-change
+          :precision="2"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <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>
+          <UnitInput
+            :model-value="10"
+            unit="uM"
+            :units="concentrationUnits"
+            :size="size"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="10"
+          unit="uM"
+          :units="concentrationUnits"
+          error
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="37"
+          unit="C"
+          :units="temperatureUnits"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/UnitInput.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface UnitOption {
+  value: string
+  label: string
+  factor?: number
+  group?: string
+}
+
+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">
+      <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>