@morscherlab/mld-sdk 0.6.0

package/src/components/ConcentrationInput.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import {
+  useConcentrationUnits,
+  type ConcentrationValue,
+  type ConcentrationUnit,
+} from '../composables/useConcentrationUnits'
+
+interface Props {
+  modelValue?: ConcentrationValue
+  allowedUnits?: ConcentrationUnit[]
+  showConversion?: boolean
+  molecularWeight?: number
+  min?: number
+  max?: number
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showConversion: true,
+  disabled: false,
+  error: false,
+  size: 'md',
+  placeholder: 'Enter value',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ConcentrationValue | undefined]
+}>()
+
+const { unitCategories, getConversionHint } = useConcentrationUnits()
+
+// Filter categories based on allowedUnits
+const filteredCategories = computed(() => {
+  if (!props.allowedUnits || props.allowedUnits.length === 0) {
+    return unitCategories.value
+  }
+  return unitCategories.value
+    .map(cat => ({
+      label: cat.label,
+      units: cat.units.filter(u => props.allowedUnits!.includes(u)),
+    }))
+    .filter(cat => cat.units.length > 0)
+})
+
+// Flatten all available units
+const availableUnits = computed(() => {
+  return filteredCategories.value.flatMap(cat => cat.units)
+})
+
+// Current value and unit
+const currentValue = computed(() => props.modelValue?.value)
+const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
+
+// Conversion hint
+const conversionHint = computed(() => {
+  if (!props.showConversion || !props.modelValue) return null
+  return getConversionHint(props.modelValue)
+})
+
+function handleValueInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = target.value === '' ? undefined : Number(target.value)
+
+  if (value === undefined || isNaN(value)) {
+    emit('update:modelValue', undefined)
+    return
+  }
+
+  // Apply min/max constraints
+  let clampedValue = value
+  if (props.min !== undefined && clampedValue < props.min) {
+    clampedValue = props.min
+  }
+  if (props.max !== undefined && clampedValue > props.max) {
+    clampedValue = props.max
+  }
+
+  emit('update:modelValue', {
+    value: clampedValue,
+    unit: currentUnit.value,
+  })
+}
+
+function handleUnitChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const unit = target.value as ConcentrationUnit
+
+  emit('update:modelValue', {
+    value: currentValue.value ?? 0,
+    unit,
+  })
+}
+
+// Ensure modelValue always has a valid unit
+watch(availableUnits, (units) => {
+  if (props.modelValue && !units.includes(props.modelValue.unit)) {
+    emit('update:modelValue', {
+      value: props.modelValue.value,
+      unit: units[0] || 'µM',
+    })
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-concentration-input',
+      error ? 'mld-concentration-input--error' : '',
+      disabled ? 'mld-concentration-input--disabled' : '',
+    ]"
+  >
+    <div class="mld-concentration-input__controls">
+      <input
+        type="number"
+        :value="currentValue"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="[
+          'mld-concentration-input__value',
+          `mld-concentration-input__value--${size}`,
+          disabled ? 'mld-concentration-input__value--disabled' : '',
+        ]"
+        aria-label="Concentration value"
+        @input="handleValueInput"
+      />
+
+      <div class="mld-concentration-input__unit">
+        <select
+          :value="currentUnit"
+          :disabled="disabled"
+          :class="[
+            'mld-concentration-input__unit-select',
+            `mld-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="mld-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>
+
+    <div
+      v-if="showConversion && conversionHint"
+      class="mld-concentration-input__conversion"
+    >
+      {{ conversionHint }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/concentration-input.css';
+</style>

package/src/components/ConfirmDialog.story.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import type { ConfirmVariant } from '../types'
+
+const variants: ConfirmVariant[] = ['danger', 'warning', 'info']
+
+const dialogOpen = ref(false)
+const dangerOpen = ref(false)
+const warningOpen = ref(false)
+const infoOpen = ref(false)
+const loadingOpen = ref(false)
+const isLoading = ref(false)
+
+function handleConfirmLoading() {
+  isLoading.value = true
+  setTimeout(() => {
+    isLoading.value = false
+    loadingOpen.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <Story title="Layout/ConfirmDialog">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <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; font-size: 0.875rem;"
+            @click="dialogOpen = true"
+          >
+            Open Dialog
+          </button>
+          <ConfirmDialog
+            v-model="dialogOpen"
+            :title="state.title"
+            :message="state.message"
+            :variant="state.variant"
+            :confirm-label="state.confirmLabel"
+            :cancel-label="state.cancelLabel"
+            :loading="state.loading"
+            @confirm="dialogOpen = false"
+            @cancel="dialogOpen = false"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.message" title="Message" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstText v-model="state.confirmLabel" title="Confirm Label" />
+        <HstText v-model="state.cancelLabel" title="Cancel Label" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+      </template>
+    </Variant>
+
+    <Variant title="Danger">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
+          @click="dangerOpen = true"
+        >
+          Delete Experiment
+        </button>
+        <ConfirmDialog
+          v-model="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"
+          confirm-label="Delete"
+          @confirm="dangerOpen = false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Warning">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid #f59e0b; border-radius: 0.375rem; background: var(--bg-card, #fff); color: #f59e0b; cursor: pointer; font-size: 0.875rem;"
+          @click="warningOpen = true"
+        >
+          Reset Analysis
+        </button>
+        <ConfirmDialog
+          v-model="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"
+          confirm-label="Reset"
+          @confirm="warningOpen = false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Info">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid #3b82f6; border-radius: 0.375rem; background: var(--bg-card, #fff); color: #3b82f6; cursor: pointer; font-size: 0.875rem;"
+          @click="infoOpen = true"
+        >
+          Export Data
+        </button>
+        <ConfirmDialog
+          v-model="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"
+          confirm-label="Export"
+          @confirm="infoOpen = false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Loading State">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <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; font-size: 0.875rem;"
+          @click="loadingOpen = true"
+        >
+          Submit with Loading
+        </button>
+        <ConfirmDialog
+          v-model="loadingOpen"
+          title="Submit Results"
+          message="Submit the analysis results to the platform? This may take a moment."
+          variant="info"
+          confirm-label="Submit"
+          :loading="isLoading"
+          @confirm="handleConfirmLoading"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ConfirmDialog.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import BaseModal from './BaseModal.vue'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  message?: string
+  variant?: 'danger' | 'warning' | 'info'
+  confirmLabel?: string
+  cancelLabel?: string
+  loading?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'Confirm',
+  variant: 'danger',
+  confirmLabel: 'Confirm',
+  cancelLabel: 'Cancel',
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  confirm: []
+  cancel: []
+}>()
+
+function handleCancel() {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+
+function handleConfirm() {
+  emit('confirm')
+}
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    size="sm"
+    :closable="!loading"
+    :close-on-overlay="!loading"
+    :close-on-escape="!loading"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="mld-confirm">
+      <div :class="['mld-confirm__icon', `mld-confirm__icon--${variant}`]">
+        <slot name="icon">
+          <!-- Lucide triangle-alert for danger/warning -->
+          <svg v-if="variant === 'danger' || variant === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+          </svg>
+          <!-- Lucide info for info -->
+          <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+          </svg>
+        </slot>
+      </div>
+      <div class="mld-confirm__content">
+        <h4 v-if="title" class="mld-confirm__title">{{ title }}</h4>
+        <p v-if="message" class="mld-confirm__message">{{ message }}</p>
+        <slot />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="mld-confirm__footer">
+        <button
+          type="button"
+          class="mld-confirm__btn-cancel"
+          :disabled="loading"
+          @click="handleCancel"
+        >
+          {{ cancelLabel }}
+        </button>
+        <button
+          type="button"
+          :class="['mld-confirm__btn-confirm', `mld-confirm__btn-confirm--${variant}`]"
+          :disabled="loading"
+          @click="handleConfirm"
+        >
+          <svg v-if="loading" class="mld-confirm__btn-spinner" fill="none" viewBox="0 0 24 24">
+            <circle style="opacity: 0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path style="opacity: 0.75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          {{ confirmLabel }}
+        </button>
+      </div>
+    </template>
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/confirm-dialog.css';
+</style>

package/src/components/DataFrame.story.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DataFrame from './DataFrame.vue'
+import type { DataFrameColumn, PaginationState } from '../types'
+
+const columns: DataFrameColumn[] = [
+  { key: 'id', label: 'ID', sortable: true, width: 60, align: 'center' },
+  { key: 'compound', label: 'Compound', sortable: true },
+  { key: 'concentration', label: 'Conc. (uM)', sortable: true, align: 'right' },
+  { key: 'response', label: 'Response (%)', sortable: true, align: 'right' },
+  { key: 'well', label: 'Well', align: 'center' },
+  { key: 'status', label: 'Status' },
+]
+
+const data = [
+  { id: 1, compound: 'MLD-2847', concentration: 10.0, response: 95.2, well: 'A1', status: 'Pass' },
+  { id: 2, compound: 'MLD-2847', concentration: 3.33, response: 82.1, well: 'A2', status: 'Pass' },
+  { id: 3, compound: 'MLD-2847', concentration: 1.11, response: 54.7, well: 'A3', status: 'Pass' },
+  { id: 4, compound: 'MLD-2847', concentration: 0.37, response: 23.4, well: 'A4', status: 'Pass' },
+  { id: 5, compound: 'MLD-2847', concentration: 0.12, response: 8.9, well: 'A5', status: 'Pass' },
+  { id: 6, compound: 'MLD-3192', concentration: 10.0, response: 88.7, well: 'B1', status: 'Pass' },
+  { id: 7, compound: 'MLD-3192', concentration: 3.33, response: 71.3, well: 'B2', status: 'Pass' },
+  { id: 8, compound: 'MLD-3192', concentration: 1.11, response: 45.2, well: 'B3', status: 'Flagged' },
+  { id: 9, compound: 'MLD-3192', concentration: 0.37, response: 18.6, well: 'B4', status: 'Pass' },
+  { id: 10, compound: 'MLD-3192', concentration: 0.12, response: 5.1, well: 'B5', status: 'Pass' },
+  { id: 11, compound: 'Vehicle', concentration: 0, response: 2.3, well: 'C1', status: 'Pass' },
+  { id: 12, compound: 'Vehicle', concentration: 0, response: 1.8, well: 'C2', status: 'Pass' },
+]
+
+const selectedKeys = ref<(string | number)[]>([])
+const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.length })
+</script>
+
+<template>
+  <Story title="Data Display/DataFrame">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+          <DataFrame
+            :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>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="['sm', 'md', 'lg'].map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.striped" title="Striped" />
+        <HstCheckbox v-model="state.bordered" title="Bordered" />
+        <HstCheckbox v-model="state.sortable" title="Sortable" />
+        <HstCheckbox v-model="state.searchable" title="Searchable" />
+        <HstCheckbox v-model="state.selectable" title="Selectable" />
+        <HstCheckbox v-model="state.stickyHeader" title="Sticky Header" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+      </template>
+    </Variant>
+
+    <Variant title="Sortable with Search">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          sortable
+          searchable
+          search-placeholder="Search compounds, wells..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Pagination">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          sortable
+          :pagination="pagination"
+          @update:pagination="pagination = $event"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Selectable Rows">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :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' }}
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="[]"
+          :columns="columns"
+          loading
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="[]"
+          :columns="columns"
+          empty-text="No experiment results found. Run an analysis to populate this table."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Compact (sm)">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          size="sm"
+          sortable
+          bordered
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>