@morscherlab/mld-sdk 0.6.5 → 0.7.0

package/dist/types/form-builder.d.ts

@@ -0,0 +1,167 @@
+import { FieldRules } from '../composables/useForm';
+/** All supported field types that map to SDK components. */
+export type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'toggle' | 'radio' | 'slider' | 'tags' | 'date' | 'time' | 'datetime' | 'file' | 'formula' | 'sequence' | 'molecule' | 'concentration' | 'unit';
+export type FieldCondition = {
+    field: string;
+    eq: unknown;
+} | {
+    field: string;
+    neq: unknown;
+} | {
+    field: string;
+    gt: number;
+} | {
+    field: string;
+    lt: number;
+} | {
+    field: string;
+    gte: number;
+} | {
+    field: string;
+    lte: number;
+} | {
+    field: string;
+    in: unknown[];
+} | {
+    field: string;
+    notIn: unknown[];
+} | {
+    field: string;
+    truthy: true;
+} | {
+    field: string;
+    falsy: true;
+} | {
+    field: string;
+    contains: string;
+} | {
+    and: FieldCondition[];
+} | {
+    or: FieldCondition[];
+} | {
+    not: FieldCondition;
+};
+export interface FieldValidation {
+    required?: boolean | string;
+    minLength?: number | {
+        value: number;
+        message: string;
+    };
+    maxLength?: number | {
+        value: number;
+        message: string;
+    };
+    min?: number | {
+        value: number;
+        message: string;
+    };
+    max?: number | {
+        value: number;
+        message: string;
+    };
+    /** Pattern as a string (converted to RegExp at runtime). */
+    pattern?: string | {
+        value: string;
+        message: string;
+    };
+    email?: boolean | string;
+}
+export interface FormFieldSchema {
+    name: string;
+    label: string;
+    type: FormFieldType;
+    defaultValue?: unknown;
+    placeholder?: string;
+    hint?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    readonly?: boolean;
+    validation?: FieldValidation;
+    condition?: FieldCondition;
+    /** Grid column span (1-3). Defaults to 1. */
+    colSpan?: number;
+    /** Extra props passed directly to the underlying component. */
+    props?: Record<string, unknown>;
+}
+export interface FormSectionSchema {
+    id: string;
+    title: string;
+    description?: string;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    /** Number of grid columns (1-3). Defaults to 1. */
+    columns?: 1 | 2 | 3;
+    fields: FormFieldSchema[];
+    condition?: FieldCondition;
+}
+export interface FormStepSchema {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    optional?: boolean;
+    sections: FormSectionSchema[];
+}
+export type FormSchema = {
+    sections: FormSectionSchema[];
+    steps?: never;
+    submitLabel?: string;
+    cancelLabel?: string;
+    showCancel?: boolean;
+} | {
+    sections?: never;
+    steps: FormStepSchema[];
+    submitLabel?: string;
+    cancelLabel?: string;
+    showCancel?: boolean;
+};
+export interface FieldEnhancement<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** Custom validator appended to the field's rules. */
+    validate?: (value: unknown, data: T) => string | undefined | null;
+    /** Dynamic visibility (overrides schema condition if both present). */
+    visible?: (data: T) => boolean;
+    /** Dynamic options for select/multiselect/radio fields. */
+    options?: (data: T) => {
+        label: string;
+        value: unknown;
+    }[];
+    /** Dynamic extra props merged into the component. */
+    props?: (data: T) => Record<string, unknown>;
+}
+export interface FormEnhancements<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** Per-field enhancements keyed by field name. */
+    fields?: Partial<Record<keyof T, FieldEnhancement<T>>>;
+    /** Called on successful submit. */
+    onSubmit?: (data: T) => Promise<void> | void;
+    /** Transform data before submit (return transformed copy). */
+    transform?: (data: T) => T | Record<string, unknown>;
+    /** Called when any field value changes. */
+    onFieldChange?: (field: keyof T, value: unknown, data: T) => void;
+}
+export interface UseFormBuilderReturn<T extends Record<string, unknown>> {
+    /** Underlying useForm return. */
+    form: import('../composables/useForm').UseFormReturn<T>;
+    /** Validation rules derived from schema + enhancements. */
+    rules: Partial<Record<keyof T, FieldRules>>;
+    /** Whether a field is currently visible. */
+    isFieldVisible: (name: string) => boolean;
+    /** Whether a section is currently visible. */
+    isSectionVisible: (id: string) => boolean;
+    /** All flattened field schemas. */
+    fields: FormFieldSchema[];
+    /** Resolve final component props for a field. */
+    getResolvedFieldProps: (field: FormFieldSchema) => Record<string, unknown>;
+    /** Get options for a select/radio/multiselect field. */
+    getFieldOptions: (name: string) => {
+        label: string;
+        value: unknown;
+    }[] | undefined;
+    currentStep: import('vue').Ref<number>;
+    isCurrentStepValid: import('vue').ComputedRef<boolean>;
+    goNext: () => boolean;
+    goBack: () => void;
+    goToStep: (index: number) => void;
+    validate: () => boolean;
+    reset: (values?: Partial<T>) => void;
+    submit: () => Promise<void>;
+}

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, MoleculeData, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
+export type { FormFieldType, FieldCondition, FieldValidation, FormFieldSchema, FormSectionSchema, FormStepSchema, FormSchema, FieldEnhancement, FormEnhancements, UseFormBuilderReturn, } from './form-builder';
 export type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, RegisterRequest, UpdateProfileRequest, CredentialInfo, } from './auth';
 export type { PluginInfo, PluginNavItem, PluginSettings, PluginSettingField, PlatformContext, PlatformContextOptions, PlatformEventType, PlatformEvent, ThemeMode, ColorPalette, TableDensity, } from './platform';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/composables/formBuilderRegistry.test.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect } from 'vitest'
+import { getFieldRegistryEntry, getTypeDefault } from '../../composables/formBuilderRegistry'
+import type { FormFieldType } from '../../types/form-builder'
+
+describe('formBuilderRegistry', () => {
+  describe('getFieldRegistryEntry', () => {
+    it('should return an entry for every supported field type', () => {
+      const types: FormFieldType[] = [
+        'text', 'email', 'password', 'tel', 'url', 'search',
+        'number', 'textarea', 'select', 'multiselect',
+        'checkbox', 'toggle', 'radio', 'slider', 'tags',
+        'date', 'time', 'datetime', 'file',
+        'formula', 'sequence', 'molecule', 'concentration', 'unit',
+      ]
+
+      for (const type of types) {
+        const entry = getFieldRegistryEntry(type)
+        expect(entry, `missing registry entry for type "${type}"`).toBeDefined()
+        expect(entry.component).toBeDefined()
+        expect(typeof entry.vModel).toBe('boolean')
+        expect(typeof entry.defaults).toBe('object')
+      }
+    })
+
+    it('should return correct component for text type', () => {
+      const entry = getFieldRegistryEntry('text')
+      expect(entry.vModel).toBe(true)
+      expect(entry.defaults).toEqual({ type: 'text' })
+    })
+
+    it('should return correct defaults for email type', () => {
+      const entry = getFieldRegistryEntry('email')
+      expect(entry.defaults).toEqual({ type: 'email' })
+      expect(entry.vModel).toBe(true)
+    })
+
+    it('should return correct defaults for password type', () => {
+      const entry = getFieldRegistryEntry('password')
+      expect(entry.defaults).toEqual({ type: 'password' })
+    })
+
+    it('should return correct defaults for tel type', () => {
+      const entry = getFieldRegistryEntry('tel')
+      expect(entry.defaults).toEqual({ type: 'tel' })
+    })
+
+    it('should return correct defaults for url type', () => {
+      const entry = getFieldRegistryEntry('url')
+      expect(entry.defaults).toEqual({ type: 'url' })
+    })
+
+    it('should return correct defaults for search type', () => {
+      const entry = getFieldRegistryEntry('search')
+      expect(entry.defaults).toEqual({ type: 'search' })
+    })
+
+    it('should have vModel false for file type', () => {
+      const entry = getFieldRegistryEntry('file')
+      expect(entry.vModel).toBe(false)
+    })
+
+    it('should have vModel true for all non-file types', () => {
+      const vModelTypes: FormFieldType[] = [
+        'text', 'email', 'password', 'tel', 'url', 'search',
+        'number', 'textarea', 'select', 'multiselect',
+        'checkbox', 'toggle', 'radio', 'slider', 'tags',
+        'date', 'time', 'datetime',
+        'formula', 'sequence', 'molecule', 'concentration', 'unit',
+      ]
+
+      for (const type of vModelTypes) {
+        const entry = getFieldRegistryEntry(type)
+        expect(entry.vModel, `vModel should be true for "${type}"`).toBe(true)
+      }
+    })
+
+    it('should return empty defaults object for number type', () => {
+      const entry = getFieldRegistryEntry('number')
+      expect(entry.defaults).toEqual({})
+    })
+
+    it('should return empty defaults object for checkbox type', () => {
+      const entry = getFieldRegistryEntry('checkbox')
+      expect(entry.defaults).toEqual({})
+    })
+  })
+
+  describe('getTypeDefault', () => {
+    it('should return false for checkbox', () => {
+      expect(getTypeDefault('checkbox')).toBe(false)
+    })
+
+    it('should return false for toggle', () => {
+      expect(getTypeDefault('toggle')).toBe(false)
+    })
+
+    it('should return undefined for number', () => {
+      expect(getTypeDefault('number')).toBeUndefined()
+    })
+
+    it('should return undefined for slider', () => {
+      expect(getTypeDefault('slider')).toBeUndefined()
+    })
+
+    it('should return empty array for multiselect', () => {
+      expect(getTypeDefault('multiselect')).toEqual([])
+    })
+
+    it('should return empty array for tags', () => {
+      expect(getTypeDefault('tags')).toEqual([])
+    })
+
+    it('should return empty string for text', () => {
+      expect(getTypeDefault('text')).toBe('')
+    })
+
+    it('should return empty string for email', () => {
+      expect(getTypeDefault('email')).toBe('')
+    })
+
+    it('should return empty string for password', () => {
+      expect(getTypeDefault('password')).toBe('')
+    })
+
+    it('should return empty string for textarea', () => {
+      expect(getTypeDefault('textarea')).toBe('')
+    })
+
+    it('should return empty string for select', () => {
+      expect(getTypeDefault('select')).toBe('')
+    })
+
+    it('should return empty string for date', () => {
+      expect(getTypeDefault('date')).toBe('')
+    })
+
+    it('should return empty string for time', () => {
+      expect(getTypeDefault('time')).toBe('')
+    })
+
+    it('should return empty string for datetime', () => {
+      expect(getTypeDefault('datetime')).toBe('')
+    })
+
+    it('should return empty string for file', () => {
+      expect(getTypeDefault('file')).toBe('')
+    })
+
+    it('should return empty string for radio', () => {
+      expect(getTypeDefault('radio')).toBe('')
+    })
+
+    it('should return empty string for formula', () => {
+      expect(getTypeDefault('formula')).toBe('')
+    })
+
+    it('should return empty string for sequence', () => {
+      expect(getTypeDefault('sequence')).toBe('')
+    })
+
+    it('should return empty string for molecule', () => {
+      expect(getTypeDefault('molecule')).toBe('')
+    })
+
+    it('should return empty string for concentration', () => {
+      expect(getTypeDefault('concentration')).toBe('')
+    })
+
+    it('should return empty string for unit', () => {
+      expect(getTypeDefault('unit')).toBe('')
+    })
+
+    it('should return a new array instance each call for multiselect', () => {
+      const a = getTypeDefault('multiselect')
+      const b = getTypeDefault('multiselect')
+      expect(a).toEqual(b)
+      // Each call should return a distinct array
+      expect(a).not.toBe(b)
+    })
+
+    it('should return a new array instance each call for tags', () => {
+      const a = getTypeDefault('tags')
+      const b = getTypeDefault('tags')
+      expect(a).not.toBe(b)
+    })
+  })
+})