@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

package/src/composables/useControlWorkspace.ts

@@ -0,0 +1,201 @@
+import {
+  computed,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import type {
+  PillNavItem,
+  TopBarSettingsConfig,
+} from '../types'
+import {
+  replaceRecord,
+} from './controlSchemaUtils'
+import {
+  mergeControlWorkspaceOptions,
+} from './controlWorkspaceOptions'
+import {
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
+  controlValuesToComponentProps,
+} from './controlComponentBindings'
+import {
+  isControlModelBinding,
+} from './controlSchemaModel'
+import {
+  useControlSchema,
+} from './useControlSchema'
+import type {
+  ControlComponentBinding,
+  ControlComponentBindingsById,
+  ControlComponentBindingsConfig,
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModelBinding,
+  ControlSchema,
+  ControlValues,
+  ControlWorkspaceComponentBindings,
+  ControlWorkspaceFormBinding,
+  ControlWorkspaceOptions,
+  ControlWorkspacePillNavBinding,
+  ControlWorkspaceSidebarBinding,
+  ControlWorkspaceTopBarBinding,
+  ControlWorkspaceTopBarSettingsBinding,
+  UseControlWorkspaceReturn,
+} from './controlSchemaTypes'
+
+/** Prepare shared reactive values plus AppTopBar/AppSidebar/FormBuilder bindings from one simple controls data model. */
+export function useControlWorkspace<TControls extends ControlSchema>(
+  controlsOrModel: TControls | (ControlModelBinding & { controls: TControls }),
+  options: ControlWorkspaceOptions = {},
+): UseControlWorkspaceReturn<TControls> {
+  const model = isControlModelBinding<ControlModelBinding & { controls: TControls }>(controlsOrModel)
+    ? controlsOrModel
+    : undefined
+  const controls: TControls = model ? model.controls : controlsOrModel as TControls
+  const workspaceOptions = model
+    ? mergeControlWorkspaceOptions(model.controlOptions, options)
+    : options
+  const { initialValues, topBarSettings, ...schemaOptions } = workspaceOptions
+  const schema = useControlSchema(controls, schemaOptions)
+  const activeView = ref(schema.defaultView)
+  const values = reactive({
+    ...schema.initialValues,
+    ...(initialValues ?? {}),
+  }) as ControlValues<TControls> & Record<string, unknown>
+
+  function setActiveView(viewId: string) {
+    syncActiveView(viewId)
+  }
+
+  function syncActiveView(viewId: string) {
+    if (!schema.viewIds.includes(viewId)) return
+    if (activeView.value !== viewId) activeView.value = viewId
+    if (sidebar.activeView !== viewId) sidebar.activeView = viewId
+    if (pillNav.currentItemId !== viewId) pillNav.currentItemId = viewId
+  }
+
+  function setValues(nextValues: Record<string, unknown>) {
+    Object.assign(values, nextValues)
+  }
+
+  function resetValues(nextValues: Record<string, unknown> = {}) {
+    replaceRecord(values, {
+      ...schema.initialValues,
+      ...nextValues,
+    })
+  }
+
+  function getComponentProps(
+    mapping?: ControlComponentPropsMap<ControlValues<TControls> & Record<string, unknown>>,
+  ): Record<string, unknown> {
+    return controlValuesToComponentProps(values, mapping)
+  }
+
+  function getComponentPropsById(
+    mappings?: ControlComponentPropsByIdMap<ControlValues<TControls> & Record<string, unknown>>,
+  ): Record<string, Record<string, unknown>> {
+    if (mappings === undefined) return {}
+
+    return Object.fromEntries(
+      Object.entries(mappings).map(([id, mapping]) => [
+        id,
+        controlValuesToComponentProps(values, mapping),
+      ]),
+    )
+  }
+
+  function getComponentBindings(
+    bindings?: ControlComponentBindingsConfig<ControlValues<TControls> & Record<string, unknown>>,
+  ): ControlComponentBinding[] {
+    return controlValuesToComponentBindings(values, bindings)
+  }
+
+  function getComponentBindingsById(
+    bindings?: ControlComponentBindingsConfig<ControlValues<TControls> & Record<string, unknown>>,
+  ): ControlComponentBindingsById {
+    return controlValuesToComponentBindingsById(values, bindings)
+  }
+
+  const componentProps = computed(() => (
+    model?.componentProps === undefined ? {} : getComponentProps(model.componentProps)
+  ))
+  const componentPropsById = computed(() => getComponentPropsById(model?.componentPropsById))
+  const componentBindings = computed(() => getComponentBindings(model?.componentBindings))
+  const componentBindingsById = computed(() => getComponentBindingsById(model?.componentBindings))
+  const form = {
+    ...schema.form,
+    modelValue: values,
+    'onUpdate:modelValue': setValues,
+  } as ControlWorkspaceFormBinding
+
+  const topBarSettingsConfig: TopBarSettingsConfig = {
+    ...schema.topBarSettingsConfig,
+    ...(topBarSettings ?? {}),
+    values,
+  }
+  const sidebar = reactive({
+    ...schema.sidebar,
+    activeView: activeView.value,
+    modelValue: values,
+    'onUpdate:modelValue': setValues,
+    values,
+    'onUpdate:values': setValues,
+  }) as ControlWorkspaceSidebarBinding
+  const pillNav = reactive({
+    items: schema.viewItems,
+    currentItemId: activeView.value,
+    onSelect: (item: PillNavItem) => setActiveView(item.id),
+  }) as ControlWorkspacePillNavBinding
+  const topBarSettingsBinding = {
+    showSettings: true,
+    settingsConfig: topBarSettingsConfig,
+    onSettingsValuesChange: setValues,
+  } as ControlWorkspaceTopBarSettingsBinding
+  const topBarProps = computed<ControlWorkspaceTopBarBinding>(() => ({
+    pillNav: pillNav.items,
+    currentPillId: pillNav.currentItemId,
+    onPillSelect: pillNav.onSelect,
+    ...topBarSettingsBinding,
+  }))
+  const bindings: ControlWorkspaceComponentBindings = {
+    form,
+    sidebar,
+    topBar: topBarProps,
+    topBarSettings: topBarSettingsBinding,
+    pillNav,
+    componentBindings,
+    componentBindingsById,
+    componentProps,
+    componentPropsById,
+  }
+
+  watch(activeView, syncActiveView, { flush: 'sync' })
+  watch(() => sidebar.activeView, syncActiveView, { flush: 'sync' })
+  watch(() => pillNav.currentItemId, syncActiveView, { flush: 'sync' })
+
+  return {
+    ...schema,
+    schema,
+    values,
+    activeView,
+    topBarSettingsConfig,
+    form,
+    sidebar,
+    topBar: topBarProps,
+    pillNav,
+    topBarSettings: topBarSettingsBinding,
+    bindings,
+    componentBindings,
+    componentBindingsById,
+    componentProps,
+    componentPropsById,
+    setActiveView,
+    setValues,
+    resetValues,
+    getComponentProps,
+    getComponentPropsById,
+    getComponentBindings,
+    getComponentBindingsById,
+  }
+}

package/src/composables/useForm.ts

@@ -1,24 +1,7 @@
 import { ref, reactive, computed, toRaw, watch, type Ref } from 'vue'
+import { validateFieldValue, type FieldRules } from './useFormValidation'
 
-/**
- * Validation rule function type.
- * Returns error message string if invalid, undefined/null if valid.
- */
-export type ValidationRule<T = unknown> = (value: T, formData: Record<string, unknown>) => string | undefined | null
-
-/**
- * Field validation rules configuration.
- */
-export interface FieldRules<T = unknown> {
-  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?: RegExp | { value: RegExp; message: string }
-  email?: boolean | string
-  custom?: ValidationRule<T> | ValidationRule<T>[]
-}
+export type { FieldRules, ValidationRule } from './useFormValidation'
 
 /**
  * Field validation rules configuration.
@@ -69,68 +52,6 @@ export interface UseFormReturn<T extends Record<string, unknown>> {
   }
 }
 
-// Built-in validators
-const validators = {
-  required: (value: unknown, message = 'This field is required'): string | null => {
-    if (value === null || value === undefined || value === '') {
-      return message
-    }
-    if (Array.isArray(value) && value.length === 0) {
-      return message
-    }
-    return null
-  },
-
-  minLength: (value: unknown, min: number, message?: string): string | null => {
-    if (typeof value !== 'string') return null
-    if (value.length < min) {
-      return message || `Must be at least ${min} characters`
-    }
-    return null
-  },
-
-  maxLength: (value: unknown, max: number, message?: string): string | null => {
-    if (typeof value !== 'string') return null
-    if (value.length > max) {
-      return message || `Must be at most ${max} characters`
-    }
-    return null
-  },
-
-  min: (value: unknown, min: number, message?: string): string | null => {
-    if (typeof value !== 'number') return null
-    if (value < min) {
-      return message || `Must be at least ${min}`
-    }
-    return null
-  },
-
-  max: (value: unknown, max: number, message?: string): string | null => {
-    if (typeof value !== 'number') return null
-    if (value > max) {
-      return message || `Must be at most ${max}`
-    }
-    return null
-  },
-
-  pattern: (value: unknown, pattern: RegExp, message?: string): string | null => {
-    if (typeof value !== 'string') return null
-    if (!pattern.test(value)) {
-      return message || 'Invalid format'
-    }
-    return null
-  },
-
-  email: (value: unknown, message = 'Invalid email address'): string | null => {
-    if (typeof value !== 'string' || !value) return null
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-    if (!emailRegex.test(value)) {
-      return message
-    }
-    return null
-  },
-}
-
 /**
  * Form state management composable with validation.
  *
@@ -205,112 +126,9 @@ export function useForm<T extends Record<string, unknown>>(
   function validateField(field: string): boolean {
     const value = data[field as keyof T]
     const fieldRules = rules[field as keyof T]
-
-    if (!fieldRules) {
-      errors[field] = null
-      return true
-    }
-
-    // Check required
-    if (fieldRules.required) {
-      const message = typeof fieldRules.required === 'string' ? fieldRules.required : undefined
-      const error = validators.required(value, message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Skip other validations if empty and not required
-    if (value === null || value === undefined || value === '') {
-      errors[field] = null
-      return true
-    }
-
-    // Check minLength
-    if (fieldRules.minLength !== undefined) {
-      const config = typeof fieldRules.minLength === 'number'
-        ? { value: fieldRules.minLength, message: undefined }
-        : fieldRules.minLength
-      const error = validators.minLength(value, config.value, config.message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check maxLength
-    if (fieldRules.maxLength !== undefined) {
-      const config = typeof fieldRules.maxLength === 'number'
-        ? { value: fieldRules.maxLength, message: undefined }
-        : fieldRules.maxLength
-      const error = validators.maxLength(value, config.value, config.message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check min
-    if (fieldRules.min !== undefined) {
-      const config = typeof fieldRules.min === 'number'
-        ? { value: fieldRules.min, message: undefined }
-        : fieldRules.min
-      const error = validators.min(value, config.value, config.message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check max
-    if (fieldRules.max !== undefined) {
-      const config = typeof fieldRules.max === 'number'
-        ? { value: fieldRules.max, message: undefined }
-        : fieldRules.max
-      const error = validators.max(value, config.value, config.message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check pattern
-    if (fieldRules.pattern !== undefined) {
-      const config = fieldRules.pattern instanceof RegExp
-        ? { value: fieldRules.pattern, message: undefined }
-        : fieldRules.pattern
-      const error = validators.pattern(value, config.value, config.message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check email
-    if (fieldRules.email) {
-      const message = typeof fieldRules.email === 'string' ? fieldRules.email : undefined
-      const error = validators.email(value, message)
-      if (error) {
-        errors[field] = error
-        return false
-      }
-    }
-
-    // Check custom validators
-    if (fieldRules.custom) {
-      const customRules = Array.isArray(fieldRules.custom) ? fieldRules.custom : [fieldRules.custom]
-      for (const rule of customRules) {
-        const error = rule(value, data as Record<string, unknown>)
-        if (error) {
-          errors[field] = error
-          return false
-        }
-      }
-    }
-
-    errors[field] = null
-    return true
+    const error = validateFieldValue(value, fieldRules, data as Record<string, unknown>)
+    errors[field] = error
+    return error === null
   }
 
   // Validate all fields

package/src/composables/useFormBuilder.ts

@@ -1,167 +1,25 @@
 import { reactive, ref, computed, shallowRef, watch } from 'vue'
 import { useForm, type FieldRules, type UseFormReturn } from './useForm'
-import { getFieldRegistryEntry, getTypeDefault } from './formBuilderRegistry'
+import { getFieldRegistryEntry } from './formBuilderRegistry'
+import {
+  buildInitialValues,
+  buildRules,
+  collectSections,
+  evaluateCondition,
+  flattenFields,
+  replaceArray,
+  replaceRecord,
+} from './formBuilderSchema'
 import type {
   FormSchema,
   FormFieldSchema,
   FormSectionSchema,
-  FieldCondition,
-  FieldValidation,
   FormOptionInput,
   FormEnhancements,
   UseFormBuilderReturn,
 } from '../types/form-builder'
 
-// ---------------------------------------------------------------------------
-// Condition evaluator
-// ---------------------------------------------------------------------------
-
-/**
- * Evaluate a JSON-serializable field condition against the current form data.
- *
- * Supports logical operators (`and`, `or`, `not`) and comparison operators
- * (`eq`, `neq`, `gt`, `lt`, `gte`, `lte`, `in`, `notIn`, `truthy`, `falsy`,
- * `contains`). Returns `true` if the condition passes.
- */
-export function evaluateCondition(
-  condition: FieldCondition,
-  data: Record<string, unknown>,
-): boolean {
-  if ('and' in condition) {
-    return condition.and.every((c) => evaluateCondition(c, data))
-  }
-  if ('or' in condition) {
-    return condition.or.some((c) => evaluateCondition(c, data))
-  }
-  if ('not' in condition) {
-    return !evaluateCondition(condition.not, data)
-  }
-
-  const value = data[condition.field]
-
-  if ('eq' in condition) return value === condition.eq
-  if ('neq' in condition) return value !== condition.neq
-  if ('gt' in condition) return typeof value === 'number' && value > condition.gt
-  if ('lt' in condition) return typeof value === 'number' && value < condition.lt
-  if ('gte' in condition) return typeof value === 'number' && value >= condition.gte
-  if ('lte' in condition) return typeof value === 'number' && value <= condition.lte
-  if ('in' in condition) return condition.in.includes(value)
-  if ('notIn' in condition) return !condition.notIn.includes(value)
-  if ('truthy' in condition) return !!value
-  if ('falsy' in condition) return !value
-  if ('contains' in condition) {
-    if (typeof value === 'string') return value.includes(condition.contains)
-    if (Array.isArray(value)) return value.includes(condition.contains)
-    return false
-  }
-
-  return true
-}
-
-// ---------------------------------------------------------------------------
-// Schema helpers
-// ---------------------------------------------------------------------------
-
-/** Return all sections across steps (wizard) or directly from a flat schema. */
-function collectSections(schema: FormSchema): FormSectionSchema[] {
-  return schema.steps ? schema.steps.flatMap((step) => step.sections) : schema.sections
-}
-
-/** Return all field schemas in schema order, flattening sections and steps. */
-function flattenFields(schema: FormSchema): FormFieldSchema[] {
-  return collectSections(schema).flatMap((section) => section.fields)
-}
-
-/** Convert a JSON-safe `FieldValidation` descriptor to a runtime `FieldRules` object. */
-function convertValidation(v: FieldValidation): FieldRules {
-  const rules: FieldRules = {}
-
-  if (v.required !== undefined) rules.required = v.required
-  if (v.minLength !== undefined) rules.minLength = v.minLength
-  if (v.maxLength !== undefined) rules.maxLength = v.maxLength
-  if (v.min !== undefined) rules.min = v.min
-  if (v.max !== undefined) rules.max = v.max
-  if (v.email !== undefined) rules.email = v.email
-
-  if (v.pattern !== undefined) {
-    rules.pattern =
-      typeof v.pattern === 'string'
-        ? new RegExp(v.pattern)
-        : { value: new RegExp(v.pattern.value), message: v.pattern.message }
-  }
-
-  return rules
-}
-
-function buildInitialValues<T extends Record<string, unknown>>(
-  fields: readonly FormFieldSchema[],
-  initialData?: Partial<T>,
-): Record<string, unknown> {
-  const initialValues = {} as Record<string, unknown>
-
-  for (const field of fields) {
-    const key = field.name
-    if (initialData && hasOwnKey(initialData, key)) {
-      initialValues[key] = (initialData as Record<string, unknown>)[key]
-    } else if (field.defaultValue !== undefined) {
-      initialValues[key] = field.defaultValue
-    } else {
-      initialValues[key] = getTypeDefault(field.type)
-    }
-  }
-
-  return initialValues
-}
-
-function buildRules<T extends Record<string, unknown>>(
-  fields: readonly FormFieldSchema[],
-  enhancements?: FormEnhancements<T>,
-): Partial<Record<string, FieldRules>> {
-  const rules: Partial<Record<string, FieldRules>> = {}
-
-  for (const field of fields) {
-    const base: FieldRules = field.validation ? convertValidation(field.validation) : {}
-    const enhancement = enhancements?.fields?.[field.name as keyof T]
-
-    const customValidators: Array<(
-      value: unknown,
-      formData: Record<string, unknown>,
-    ) => string | undefined | null> = []
-
-    if (enhancement?.validate) {
-      const fn = enhancement.validate
-      customValidators.push((value, formData) => fn(value, formData as T))
-    }
-
-    if (customValidators.length > 0) {
-      base.custom = customValidators
-    }
-
-    if (Object.keys(base).length > 0) {
-      rules[field.name] = base
-    }
-  }
-
-  return rules
-}
-
-function replaceArray<T>(target: T[], values: readonly T[]): void {
-  target.splice(0, target.length, ...values)
-}
-
-function replaceRecord<TValue>(
-  target: Partial<Record<string, TValue>>,
-  source: Partial<Record<string, TValue>>,
-): void {
-  for (const key of Object.keys(target)) {
-    delete target[key]
-  }
-  Object.assign(target, source)
-}
-
-function hasOwnKey(source: object, key: string): boolean {
-  return Object.prototype.hasOwnProperty.call(source, key)
-}
+export { evaluateCondition } from './formBuilderSchema'
 
 // ---------------------------------------------------------------------------
 // useFormBuilder