@morscherlab/mld-sdk 0.6.0

package/src/components/StepWizard.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface WizardStep {
+  id: string
+  label: string
+  description?: string
+  icon?: string
+  optional?: boolean
+}
+
+type WizardStepState = 'pending' | 'active' | 'completed' | 'disabled'
+
+interface Props {
+  steps: WizardStep[]
+  modelValue?: number
+  linear?: boolean
+  showProgress?: boolean
+  showStepNumbers?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  linear: true,
+  showProgress: true,
+  showStepNumbers: true,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+  'complete': []
+  'cancel': []
+  'step-change': [change: [from: number, to: number]]
+}>()
+
+const stepValidity = ref<boolean[]>([])
+
+// Initialize validity for all steps to true
+if (stepValidity.value.length === 0) {
+  stepValidity.value = props.steps.map(() => true)
+}
+
+const stepStates = computed<WizardStepState[]>(() => {
+  return props.steps.map((_, index) => {
+    if (index === props.modelValue) return 'active'
+    if (index < props.modelValue && stepValidity.value[index] !== false) return 'completed'
+    if (index > props.modelValue && props.linear) {
+      for (let i = props.modelValue; i < index; i++) {
+        if (stepValidity.value[i] === false) return 'disabled'
+      }
+    }
+    return 'pending'
+  })
+})
+
+function setStepValid(index: number, valid: boolean) {
+  if (index >= 0 && index < props.steps.length) {
+    stepValidity.value[index] = valid
+  }
+}
+
+function goToStep(index: number) {
+  if (index < 0 || index >= props.steps.length) return
+  if (stepStates.value[index] === 'disabled') return
+
+  if (props.linear && index > props.modelValue) {
+    for (let i = props.modelValue; i < index; i++) {
+      if (stepValidity.value[i] === false) return
+    }
+  }
+
+  const from = props.modelValue
+  emit('step-change', [from, index])
+  emit('update:modelValue', index)
+}
+
+function goNext() {
+  if (stepValidity.value[props.modelValue] === false) return
+  if (props.modelValue < props.steps.length - 1) {
+    goToStep(props.modelValue + 1)
+  }
+}
+
+function goBack() {
+  if (props.modelValue > 0) {
+    goToStep(props.modelValue - 1)
+  }
+}
+
+function finish() {
+  if (stepValidity.value[props.modelValue] === false) return
+  if (props.modelValue === props.steps.length - 1) {
+    emit('complete')
+  }
+}
+
+function cancel() {
+  emit('cancel')
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.preventDefault()
+      goBack()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      goNext()
+      break
+    case 'Escape':
+      cancel()
+      break
+  }
+}
+
+defineExpose({ setStepValid })
+</script>
+
+<template>
+  <div
+    :class="['mld-wizard', `mld-wizard--${props.size}`]"
+    tabindex="0"
+    @keydown="handleKeydown"
+  >
+    <!-- Progress indicator -->
+    <div v-if="props.showProgress" class="mld-wizard__progress">
+      <slot name="progress" :steps="props.steps" :current="props.modelValue" :states="stepStates">
+        <div class="mld-wizard__steps-indicator">
+          <template v-for="(step, index) in props.steps" :key="step.id">
+            <!-- Connector line (before each step except first) -->
+            <div
+              v-if="index > 0"
+              :class="[
+                'mld-wizard__step-connector',
+                stepStates[index - 1] === 'completed' ? 'mld-wizard__step-connector--completed' : '',
+              ]"
+            />
+            <!-- Step indicator -->
+            <div
+              :class="[
+                'mld-wizard__step-indicator',
+                `mld-wizard__step-indicator--${stepStates[index]}`,
+              ]"
+              @click="goToStep(index)"
+            >
+              <div class="mld-wizard__step-dot">
+                <template v-if="stepStates[index] === 'completed'">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                </template>
+                <template v-else-if="props.showStepNumbers">
+                  {{ index + 1 }}
+                </template>
+              </div>
+              <div class="mld-wizard__step-label">{{ step.label }}</div>
+            </div>
+          </template>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Step content -->
+    <div class="mld-wizard__body">
+      <div
+        v-for="(step, index) in props.steps"
+        :key="step.id"
+        v-show="index === props.modelValue"
+        class="mld-wizard__step-content"
+      >
+        <slot :name="`step-${step.id}`" :step="step" :index="index" />
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="mld-wizard__navigation">
+      <slot
+        name="navigation"
+        :go-back="goBack"
+        :go-next="goNext"
+        :finish="finish"
+        :cancel="cancel"
+        :is-first="props.modelValue === 0"
+        :is-last="props.modelValue === props.steps.length - 1"
+        :can-proceed="stepValidity[props.modelValue] !== false"
+      >
+        <button
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--cancel"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+        <div style="flex: 1" />
+        <button
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--back"
+          :disabled="props.modelValue === 0"
+          @click="goBack"
+        >
+          Back
+        </button>
+        <button
+          v-if="props.modelValue < props.steps.length - 1"
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--next"
+          :disabled="stepValidity[props.modelValue] === false"
+          @click="goNext"
+        >
+          Next
+        </button>
+        <button
+          v-else
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--finish"
+          :disabled="stepValidity[props.modelValue] === false"
+          @click="finish"
+        >
+          Finish
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/step-wizard.css';
+</style>

package/src/components/TagsInput.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import TagsInput from './TagsInput.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const sampleTags = ref(['HeLa', 'MCF-7', 'A549'])
+const emptyTags = ref<string[]>([])
+</script>
+
+<template>
+  <Story title="Base Inputs/TagsInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <TagsInput
+            v-model="state.tags"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :max-tags="state.useMaxTags ? state.maxTags : undefined"
+            :allow-duplicates="state.allowDuplicates"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Tags: <code>{{ JSON.stringify(state.tags) }}</code>
+          </p>
+        </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 }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.allowDuplicates" title="Allow Duplicates" />
+        <HstCheckbox v-model="state.useMaxTags" title="Limit Max Tags" />
+        <HstSlider v-model="state.maxTags" title="Max Tags" :min="1" :max="20" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <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>
+          <TagsInput v-model="sampleTags" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Placeholder">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          v-model="emptyTags"
+          placeholder="Type a cell line and press Enter..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pre-filled Tags">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['DMSO', 'Staurosporine', 'Doxorubicin', 'Paclitaxel', 'Cisplatin']"
+          placeholder="Add compound..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Max Tags Limit">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Maximum 3 tags allowed</p>
+        <TagsInput
+          :model-value="['Tag 1', 'Tag 2']"
+          :max-tags="3"
+          placeholder="Add up to 3 tags..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['invalid-tag']"
+          error
+          placeholder="Fix the tags..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['Read', 'Only', 'Tags']"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/TagsInput.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  modelValue?: string[]
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  maxTags?: number
+  allowDuplicates?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  error: false,
+  size: 'md',
+  allowDuplicates: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const inputValue = ref('')
+const inputRef = ref<HTMLInputElement>()
+
+const canAddMore = computed(() => {
+  if (props.maxTags === undefined) return true
+  return props.modelValue.length < props.maxTags
+})
+
+function addTag(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return
+  if (!canAddMore.value) return
+  if (!props.allowDuplicates && props.modelValue.includes(trimmed)) return
+
+  emit('update:modelValue', [...props.modelValue, trimmed])
+  inputValue.value = ''
+}
+
+function removeTag(index: number) {
+  if (props.disabled) return
+  const newTags = [...props.modelValue]
+  newTags.splice(index, 1)
+  emit('update:modelValue', newTags)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ',') {
+    event.preventDefault()
+    addTag(inputValue.value)
+  } else if (event.key === 'Backspace' && !inputValue.value && props.modelValue.length > 0) {
+    removeTag(props.modelValue.length - 1)
+  }
+}
+
+function handlePaste(event: ClipboardEvent) {
+  event.preventDefault()
+  const text = event.clipboardData?.getData('text')
+  if (!text) return
+
+  const tags = text.split(/[,\n]/).map(t => t.trim()).filter(Boolean)
+  const newTags = [...props.modelValue]
+
+  for (const tag of tags) {
+    if (!canAddMore.value) break
+    if (!props.allowDuplicates && newTags.includes(tag)) continue
+    newTags.push(tag)
+  }
+
+  emit('update:modelValue', newTags)
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-tags-input',
+      `mld-tags-input--${size}`,
+      error ? 'mld-tags-input--error' : '',
+      disabled ? 'mld-tags-input--disabled' : '',
+    ]"
+    @click="focusInput"
+  >
+    <span
+      v-for="(tag, index) in modelValue"
+      :key="`${tag}-${index}`"
+      :class="['mld-tags-input__tag', `mld-tags-input__tag--${size}`]"
+    >
+      {{ tag }}
+      <button
+        v-if="!disabled"
+        type="button"
+        :aria-label="`Remove ${tag}`"
+        class="mld-tags-input__tag-remove"
+        @click.stop="removeTag(index)"
+      >
+        <svg class="mld-tags-input__tag-remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </span>
+
+    <input
+      ref="inputRef"
+      v-model="inputValue"
+      type="text"
+      :placeholder="modelValue.length === 0 ? placeholder : ''"
+      :disabled="disabled || !canAddMore"
+      :class="['mld-tags-input__input', `mld-tags-input__input--${size}`]"
+      @keydown="handleKeydown"
+      @paste="handlePaste"
+      @blur="addTag(inputValue)"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/tags-input.css';
+</style>

package/src/components/ThemeToggle.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ThemeToggle from './ThemeToggle.vue'
+
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Action/ThemeToggle">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <ThemeToggle :size="state.size" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <ThemeToggle :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ThemeToggle.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
+
+const { isDark, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['mld-theme-toggle', `mld-theme-toggle--${size}`]"
+    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="toggleTheme"
+  >
+    <!-- Lucide sun -->
+    <svg
+      v-if="isDark"
+      :class="`mld-theme-toggle__icon--${size}`"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+    <!-- Lucide moon -->
+    <svg
+      v-else
+      :class="`mld-theme-toggle__icon--${size}`"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+    </svg>
+  </button>
+</template>
+
+<style>
+@import '../styles/components/theme-toggle.css';
+</style>

package/src/components/TimePicker.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import TimePicker from './TimePicker.vue'
+
+function initState() {
+  return {
+    modelValue: '09:00' as string | undefined,
+    placeholder: 'Select time',
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    step: 15,
+    format: '24h' as const,
+    clearable: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Scheduling/TimePicker">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 300px;">
+          <TimePicker
+            v-model="state.modelValue"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :step="state.step"
+            :format="state.format"
+            :clearable="state.clearable"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.modelValue" title="Value (HH:mm)" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSlider v-model="state.step" title="Step (minutes)" :min="5" :max="60" :step="5" />
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="[
+            { value: '24h', label: '24-hour' },
+            { value: '12h', label: '12-hour' },
+          ]"
+        />
+        <HstCheckbox v-model="state.clearable" title="Clearable" />
+      </template>
+    </Variant>
+
+    <Variant title="12-Hour Format">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="14:30" format="12h" />
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker
+          model-value="10:00"
+          min="08:00"
+          max="18:00"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="30-Minute Steps">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="09:30" :step="30" />
+      </div>
+    </Variant>
+
+    <Variant title="Clearable">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="15:00" clearable />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="09:00" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>