@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.3

package/src/components/FormActions.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-/**
- * Action bar rendered at the bottom of a FormBuilder.
- *
- * Supports two modes:
- * - Flat form: shows an optional Cancel button and a Submit button.
- * - Wizard (`isWizard=true`): shows Back / Next on intermediate steps and
- *   Submit only on the last step. Back is hidden on the first step.
- *
- * The `canProceed` prop gates the primary action (Next or Submit) to prevent
- * advancing when the current step has validation errors.
- */
-import BaseButton from './BaseButton.vue'
-
-interface Props {
-  isWizard?: boolean
-  isFirst?: boolean
-  isLast?: boolean
-  canProceed?: boolean
-  loading?: boolean
-  disabled?: boolean
-  submitLabel?: string
-  cancelLabel?: string
-  showCancel?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  isWizard: false,
-  isFirst: true,
-  isLast: true,
-  canProceed: true,
-  loading: false,
-  disabled: false,
-  submitLabel: 'Submit',
-  cancelLabel: 'Cancel',
-  showCancel: false,
-})
-
-const emit = defineEmits<{
-  submit: []
-  cancel: []
-  back: []
-  next: []
-}>()
-</script>
-
-<template>
-  <div class="mint-form-actions">
-    <BaseButton
-      v-if="showCancel"
-      variant="ghost"
-      :disabled="loading || disabled"
-      @click="emit('cancel')"
-    >
-      {{ cancelLabel }}
-    </BaseButton>
-
-    <div style="flex: 1" />
-
-    <BaseButton
-      v-if="isWizard && !isFirst"
-      variant="secondary"
-      :disabled="loading || disabled"
-      @click="emit('back')"
-    >
-      Back
-    </BaseButton>
-
-    <BaseButton
-      v-if="isWizard && !isLast"
-      variant="primary"
-      :disabled="!canProceed || loading || disabled"
-      @click="emit('next')"
-    >
-      Next
-    </BaseButton>
-
-    <BaseButton
-      v-if="!isWizard || isLast"
-      variant="primary"
-      :loading="loading"
-      :disabled="!canProceed || loading || disabled"
-      @click="emit('submit')"
-    >
-      {{ submitLabel }}
-    </BaseButton>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormBuilder.story.vue

@@ -1,203 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import FormBuilder from './FormBuilder.vue'
-import { defineControlModel, defineControls } from '../composables/useControlSchema'
-
-type FormSize = 'sm' | 'md' | 'lg'
-
-const icons = {
-  scale: ['M16 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z', 'M2 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z', 'M7 21h10', 'M12 3v18', 'M3 7h2c2 0 5-1 7-4 2 3 5 4 7 4h2'],
-  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-}
-
-const analysisModel = defineControlModel({
-  views: {
-    analysis: {
-      label: 'Analysis',
-      sections: {
-        parameters: {
-          label: 'Parameters',
-          description: 'Model and threshold controls',
-          columns: 2,
-          controls: {
-            threshold: {
-              type: 'number',
-              label: 'Threshold',
-              default: 0.05,
-              min: 0,
-              max: 1,
-              props: { step: 0.01 },
-            },
-            method: {
-              label: 'Method',
-              default: 'logistic',
-              options: ['linear', 'logistic', 'spline'],
-            },
-            normalize: {
-              label: 'Normalize intensities',
-              default: true,
-              type: 'toggle',
-              hint: 'Scale each sample before fitting',
-              icon: icons.scale,
-              iconColor: '#6366f1',
-              iconBg: '#e0e7ff',
-            },
-          },
-        },
-        quality: {
-          label: 'Quality Control',
-          description: 'Result filters',
-          columns: 2,
-          controls: {
-            minPeakArea: {
-              type: 'number',
-              label: 'Min peak area',
-              default: 1000,
-              min: 0,
-            },
-            excludeOutliers: {
-              label: 'Exclude outliers',
-              default: true,
-              type: 'checkbox',
-              hint: 'Hide flagged injections from summaries',
-              icon: icons.eye,
-              iconColor: '#0ea5e9',
-              iconBg: '#e0f2fe',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-const compactControls = defineControls({
-  sampleName: {
-    label: 'Sample name',
-    default: 'Vehicle',
-    required: true,
-    section: 'sample',
-    sectionLabel: 'Sample',
-  },
-  concentration: {
-    type: 'number',
-    label: 'Concentration',
-    default: 10,
-    min: 0,
-    section: 'sample',
-  },
-  unit: {
-    label: 'Unit',
-    default: 'uM',
-    options: ['nM', 'uM', 'mM'],
-    section: 'sample',
-  },
-})
-
-const modelValues = ref<Record<string, unknown>>({})
-const controlValues = ref<Record<string, unknown>>({})
-
-function initState() {
-  return {
-    size: 'md' as FormSize,
-    showActions: true,
-    readonly: false,
-    disabled: false,
-  }
-}
-</script>
-
-<template>
-  <Story title="Forms/FormBuilder" :init-state="initState">
-    <Variant title="Model Driven">
-      <template #default="{ state }">
-        <div class="form-builder-story">
-          <div class="form-builder-story__surface">
-            <FormBuilder
-              v-model="modelValues"
-              :model="analysisModel"
-              :size="state.size"
-              :show-actions="state.showActions"
-              :readonly="state.readonly"
-              :disabled="state.disabled"
-            />
-          </div>
-          <pre class="form-builder-story__values">{{ JSON.stringify(modelValues, null, 2) }}</pre>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { label: 'Small', value: 'sm' },
-            { label: 'Medium', value: 'md' },
-            { label: 'Large', value: 'lg' },
-          ]"
-        />
-        <HstCheckbox v-model="state.showActions" title="Actions" />
-        <HstCheckbox v-model="state.readonly" title="Readonly" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="Compact Controls">
-      <div class="form-builder-story">
-        <div class="form-builder-story__surface form-builder-story__surface--narrow">
-          <FormBuilder
-            v-model="controlValues"
-            :controls="compactControls"
-            :show-actions="false"
-          />
-        </div>
-        <pre class="form-builder-story__values">{{ JSON.stringify(controlValues, null, 2) }}</pre>
-      </div>
-    </Variant>
-  </Story>
-</template>
-
-<style scoped>
-.form-builder-story {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
-  gap: 1rem;
-  align-items: start;
-  padding: 2rem;
-  min-height: 640px;
-  background: var(--bg-secondary, #f8fafc);
-}
-
-.form-builder-story__surface {
-  min-width: 0;
-  padding: 1rem;
-  border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 0.5rem);
-  background: var(--bg-primary, #fff);
-}
-
-.form-builder-story__surface--narrow {
-  max-width: 34rem;
-}
-
-.form-builder-story__values {
-  min-width: 0;
-  margin: 0;
-  padding: 0.875rem;
-  border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 0.5rem);
-  background: var(--bg-tertiary, #f1f5f9);
-  color: var(--text-secondary, #475569);
-  font-family: var(--font-mono, monospace);
-  font-size: 0.75rem;
-  line-height: 1.5;
-  overflow: auto;
-}
-
-@media (max-width: 900px) {
-  .form-builder-story {
-    grid-template-columns: 1fr;
-    padding: 1rem;
-  }
-}
-</style>

package/src/components/FormBuilder.vue

@@ -1,311 +0,0 @@
-<script setup lang="ts">
-/**
- * Schema-driven form component that renders flat or multi-step wizard forms.
- *
- * Pass a `FormSchema` with either `sections` (flat) or `steps` (wizard), or
- * pass a compact `controls` schema for standard generated forms.
- * Use `v-model` for two-way binding of the form data; the `submit` event
- * carries only the data for currently-visible fields. Supply `enhancements`
- * for dynamic options, custom validators, a submit handler, and field-change
- * callbacks that cannot be expressed in JSON.
- * Compact control schemas can be bound directly:
- * `<FormBuilder :controls="controls" v-model="values" />`.
- * Complete control models can also be bound directly:
- * `<FormBuilder :model="workspaceModel" v-model="values" />`.
- *
- * Exposes `form`, `validate`, `reset`, `updateSchema`, `goNext`, `goBack`,
- * `goToStep`, and `builder` for imperative control via template refs.
- *
- * Slots:
- * - `field:<name>` — override a single field's input component
- * - `section:<id>` — replace an entire section body
- * - `section:<id>:after` — inject content after a section
- * - `actions` — replace the default FormActions bar when `showActions` is true
- *
- * @example Recommended
- * ```vue
- * <FormBuilder v-model="values" :model="formModel" />
- * ```
- */
-import { ref, computed, watch } from 'vue'
-import type { FormSchema, FormEnhancements, UseFormBuilderReturn } from '../types/form-builder'
-import type { WizardStep } from '../types'
-import {
-  controlsToFormSchema,
-  getControlDefaults,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
-  type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
-} from '../composables/useControlSchema'
-import { useFormBuilder } from '../composables/useFormBuilder'
-import {
-  formSchemaFieldNames,
-  pickExistingRecordKeys,
-  recordValuesEqualForKeys,
-} from '../utils/formModelSync'
-import StepWizard from './StepWizard.vue'
-import FormSectionRenderer from './internal/FormSectionRenderer.vue'
-import FormActions from './FormActions.vue'
-
-interface Props {
-  /** Full form or wizard schema. Takes precedence when `controls` is also provided. */
-  schema?: FormSchema
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step form generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema used to generate a flat FormSchema. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation, including shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  modelValue?: Record<string, unknown>
-  enhancements?: FormEnhancements<Record<string, unknown>>
-  loading?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  readonly?: boolean
-  /** Show the default or slotted form actions. */
-  showActions?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  model: undefined,
-  controlOptions: () => ({}),
-  loading: false,
-  disabled: false,
-  readonly: false,
-  showActions: true,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [data: Record<string, unknown>]
-  submit: [data: Record<string, unknown>]
-  cancel: []
-}>()
-
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
-
-const resolvedSchema = computed<FormSchema>(() => {
-  if (props.schema) return props.schema
-  if (resolvedControls.value) return controlsToFormSchema(resolvedControls.value, resolvedControlOptions.value)
-  return { sections: [] }
-})
-
-const resolvedModelValue = computed<Record<string, unknown>>(() => ({
-  ...(resolvedControls.value ? getControlDefaults(resolvedControls.value) : {}),
-  ...(resolvedControlOptions.value.initialValues ?? {}),
-  ...(props.modelValue ?? {}),
-}))
-
-const builder = useFormBuilder(
-  resolvedSchema.value,
-  resolvedModelValue.value,
-  props.enhancements,
-)
-
-// Sync schema/control changes into the internal builder so generated forms stay coherent.
-watch(
-  resolvedSchema,
-  (schema) => {
-    const fieldNames = formSchemaFieldNames(schema)
-    const schemaValues = pickExistingRecordKeys(resolvedModelValue.value, fieldNames)
-    const existingValues = pickExistingRecordKeys(
-      builder.form.data as Record<string, unknown>,
-      fieldNames,
-    )
-    const nextValues = props.modelValue === undefined
-      ? { ...schemaValues, ...existingValues }
-      : schemaValues
-
-    builder.updateSchema(schema, nextValues)
-  },
-  { deep: true },
-)
-
-// Sync external modelValue changes into the internal form without resetting on no-op echo updates.
-watch(
-  () => props.modelValue,
-  () => {
-    const data = resolvedModelValue.value
-    const fieldNames = builderFieldNames()
-    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return
-    builder.reset(pickExistingRecordKeys(data, fieldNames))
-  },
-  { deep: true },
-)
-
-// Sync modelValue changes back to parent
-watch(
-  () => ({ ...builder.form.data }),
-  (data) => emit('update:modelValue', data as Record<string, unknown>),
-  { deep: true },
-)
-
-// Wizard support
-const isWizard = computed(() => !!resolvedSchema.value.steps)
-const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
-
-const wizardSteps = computed<WizardStep[]>(() => {
-  if (!resolvedSchema.value.steps) return []
-  return resolvedSchema.value.steps.map((step) => ({
-    id: step.id,
-    label: step.label,
-    description: step.description,
-    icon: step.icon,
-    optional: step.optional,
-  }))
-})
-
-// Sync step validation state with StepWizard
-watch(
-  () => builder.isCurrentStepValid.value,
-  (valid) => {
-    wizardRef.value?.setStepValid(builder.currentStep.value, valid)
-  },
-)
-
-function handleNext() {
-  const success = builder.goNext()
-  if (success) {
-    wizardRef.value?.setStepValid(builder.currentStep.value - 1, true)
-  }
-}
-
-async function handleSubmit() {
-  await builder.submit()
-  const formData = builder.form.data as Record<string, unknown>
-  const visibleData = Object.fromEntries(
-    builder.fields
-      .filter((f) => builder.isFieldVisible(f.name))
-      .map((f) => [f.name, formData[f.name]]),
-  )
-  emit('submit', visibleData)
-}
-
-function handleCancel() {
-  emit('cancel')
-}
-
-function builderFieldNames(): string[] {
-  return builder.fields.map(field => field.name)
-}
-
-defineExpose({
-  form: builder.form,
-  validate: builder.validate,
-  reset: builder.reset,
-  updateSchema: builder.updateSchema,
-  goNext: builder.goNext,
-  goBack: builder.goBack,
-  goToStep: builder.goToStep,
-  builder,
-})
-</script>
-
-<template>
-  <div :class="['mint-form-builder', size ? `mint-form-builder--${size}` : '']">
-    <!-- Wizard mode -->
-    <template v-if="isWizard && resolvedSchema.steps">
-      <StepWizard
-        ref="wizardRef"
-        :steps="wizardSteps"
-        :model-value="builder.currentStep.value"
-        @update:model-value="builder.goToStep($event)"
-      >
-        <template v-for="step in resolvedSchema.steps" :key="step.id" #[`step-${step.id}`]>
-          <div class="mint-form-builder__step">
-            <template v-for="section in step.sections" :key="section.id">
-              <FormSectionRenderer
-                v-if="builder.isSectionVisible(section.id)"
-                :section="section"
-                :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
-              >
-                <!-- Forward field slots -->
-                <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
-                  <slot :name="`field:${field.name}`" v-bind="slotProps" />
-                </template>
-                <!-- Forward section slots -->
-                <template #[`section:${section.id}`]="slotProps">
-                  <slot :name="`section:${section.id}`" v-bind="slotProps" />
-                </template>
-                <template #[`section:${section.id}:after`]="slotProps">
-                  <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
-                </template>
-              </FormSectionRenderer>
-            </template>
-          </div>
-        </template>
-
-        <template v-if="showActions" #navigation="{ isFirst, isLast }">
-          <slot name="actions" :form="builder.form" :builder="builder">
-            <FormActions
-              is-wizard
-              :is-first="isFirst"
-              :is-last="isLast"
-              :can-proceed="builder.isCurrentStepValid.value"
-              :loading="loading || builder.form.isSubmitting.value"
-              :disabled="disabled"
-              :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
-              :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
-              :show-cancel="resolvedSchema.showCancel ?? false"
-              @next="handleNext"
-              @back="builder.goBack"
-              @submit="handleSubmit"
-              @cancel="handleCancel"
-            />
-          </slot>
-        </template>
-      </StepWizard>
-    </template>
-
-    <!-- Flat mode -->
-    <template v-else-if="resolvedSchema.sections">
-      <template v-for="section in resolvedSchema.sections" :key="section.id">
-        <FormSectionRenderer
-          v-if="builder.isSectionVisible(section.id)"
-          :section="section"
-          :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
-        >
-          <!-- Forward field slots -->
-          <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
-            <slot :name="`field:${field.name}`" v-bind="slotProps" />
-          </template>
-          <!-- Forward section slots -->
-          <template #[`section:${section.id}`]="slotProps">
-            <slot :name="`section:${section.id}`" v-bind="slotProps" />
-          </template>
-          <template #[`section:${section.id}:after`]="slotProps">
-            <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
-          </template>
-        </FormSectionRenderer>
-      </template>
-
-      <slot v-if="showActions" name="actions" :form="builder.form" :builder="builder">
-        <FormActions
-          :loading="loading || builder.form.isSubmitting.value"
-          :disabled="disabled"
-          :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
-          :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
-          :show-cancel="resolvedSchema.showCancel ?? false"
-          @submit="handleSubmit"
-          @cancel="handleCancel"
-        />
-      </slot>
-    </template>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>