@morscherlab/mld-sdk 0.6.5 → 0.7.1

package/src/composables/useFormBuilder.ts

@@ -0,0 +1,382 @@
+import { ref, computed, watch } from 'vue'
+import { useForm, type FieldRules, type UseFormReturn } from './useForm'
+import { getFieldRegistryEntry, getTypeDefault } from './formBuilderRegistry'
+import type {
+  FormSchema,
+  FormFieldSchema,
+  FormSectionSchema,
+  FieldCondition,
+  FieldValidation,
+  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
+}
+
+// ---------------------------------------------------------------------------
+// useFormBuilder
+// ---------------------------------------------------------------------------
+
+/**
+ * Drive a `FormSchema` as reactive form state.
+ *
+ * Builds initial values from schema defaults and `initialData`, derives
+ * validation rules from `FieldValidation` descriptors and enhancement
+ * validators, evaluates `FieldCondition` expressions for field/section
+ * visibility, and wires wizard step navigation when `schema.steps` is set.
+ *
+ * @param schema - Declarative form or wizard schema.
+ * @param initialData - Values that override schema defaults.
+ * @param enhancements - TypeScript-only callbacks (dynamic options, validators,
+ *   submit handler, transform, field-change watcher).
+ */
+export function useFormBuilder<T extends Record<string, unknown> = Record<string, unknown>>(
+  schema: FormSchema,
+  initialData?: Partial<T>,
+  enhancements?: FormEnhancements<T>,
+): UseFormBuilderReturn<T> {
+  const fields = flattenFields(schema)
+  const sections = collectSections(schema)
+
+  // -- Build initial values --------------------------------------------------
+  const initialValues = {} as Record<string, unknown>
+  for (const field of fields) {
+    const key = field.name
+    if (initialData && key in initialData) {
+      initialValues[key] = (initialData as Record<string, unknown>)[key]
+    } else if (field.defaultValue !== undefined) {
+      initialValues[key] = field.defaultValue
+    } else {
+      initialValues[key] = getTypeDefault(field.type)
+    }
+  }
+
+  // -- Build validation rules ------------------------------------------------
+  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]
+
+    // Wrap validators to skip hidden fields
+    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
+    }
+
+    // Wrap all rules to skip hidden fields
+    if (Object.keys(base).length > 0) {
+      rules[field.name] = base
+    }
+  }
+
+  // -- Create form -----------------------------------------------------------
+  const form = useForm(initialValues as T, rules as Partial<Record<keyof T, FieldRules>>)
+
+  // -- Visibility ------------------------------------------------------------
+  function isFieldVisible(name: string): boolean {
+    const enhancement = enhancements?.fields?.[name as keyof T]
+    if (enhancement?.visible) {
+      return enhancement.visible(form.data as T)
+    }
+
+    const field = fields.find((f) => f.name === name)
+    if (field?.condition) {
+      return evaluateCondition(field.condition, form.data as Record<string, unknown>)
+    }
+
+    return true
+  }
+
+  function isSectionVisible(id: string): boolean {
+    const section = sections.find((s) => s.id === id)
+    if (section?.condition) {
+      return evaluateCondition(section.condition, form.data as Record<string, unknown>)
+    }
+    return true
+  }
+
+  // -- Resolved field props --------------------------------------------------
+  function getResolvedFieldProps(field: FormFieldSchema): Record<string, unknown> {
+    const entry = getFieldRegistryEntry(field.type)
+    const formProps = form.getFieldProps(field.name as keyof T)
+
+    const merged: Record<string, unknown> = {
+      ...entry.defaults,
+      ...(field.props ?? {}),
+    }
+
+    // Dynamic enhancement props
+    const enhancement = enhancements?.fields?.[field.name as keyof T]
+    if (enhancement?.props) {
+      Object.assign(merged, enhancement.props(form.data as T))
+    }
+
+    // Dynamic options
+    const options = getFieldOptions(field.name)
+    if (options) {
+      merged.options = options
+    }
+
+    // Form field bindings
+    if (entry.vModel) {
+      merged.modelValue = formProps.modelValue
+      merged['onUpdate:modelValue'] = formProps['onUpdate:modelValue']
+    }
+    merged.onBlur = formProps.onBlur
+
+    // Error as boolean for components that use boolean error prop
+    const errorMsg = formProps.error
+    if (errorMsg) {
+      merged.error = true
+    }
+
+    // Schema-level props
+    if (field.placeholder) merged.placeholder = field.placeholder
+    if (field.size) merged.size = field.size
+    if (field.disabled) merged.disabled = true
+    if (field.readonly) merged.readonly = true
+
+    // Radio group needs a name prop
+    if (field.type === 'radio' && !merged.name) {
+      merged.name = field.name
+    }
+
+    return merged
+  }
+
+  function getFieldOptions(name: string): { label: string; value: unknown }[] | undefined {
+    const enhancement = enhancements?.fields?.[name as keyof T]
+    if (enhancement?.options) {
+      return enhancement.options(form.data as T)
+    }
+
+    const field = fields.find((f) => f.name === name)
+    if (field?.props?.options) {
+      return field.props.options as { label: string; value: unknown }[]
+    }
+
+    return undefined
+  }
+
+  // -- Wizard state ----------------------------------------------------------
+  const currentStep = ref(0)
+
+  const isCurrentStepValid = computed(() => {
+    if (!schema.steps) return form.isValid.value
+
+    const step = schema.steps[currentStep.value]
+    if (!step) return true
+
+    for (const section of step.sections) {
+      if (!isSectionVisible(section.id)) continue
+      for (const field of section.fields) {
+        if (!isFieldVisible(field.name)) continue
+        if (!form.validateField(field.name)) return false
+      }
+    }
+    return true
+  })
+
+  function goNext(): boolean {
+    if (!schema.steps) return false
+
+    // Touch and validate all visible fields in current step
+    const step = schema.steps[currentStep.value]
+    if (!step) return false
+
+    let valid = true
+    for (const section of step.sections) {
+      if (!isSectionVisible(section.id)) continue
+      for (const field of section.fields) {
+        if (!isFieldVisible(field.name)) continue
+        form.setFieldTouched(field.name, true)
+        if (!form.validateField(field.name)) valid = false
+      }
+    }
+
+    if (!valid) return false
+
+    if (currentStep.value < schema.steps.length - 1) {
+      currentStep.value++
+    }
+    return true
+  }
+
+  function goBack(): void {
+    if (currentStep.value > 0) {
+      currentStep.value--
+    }
+  }
+
+  function goToStep(index: number): void {
+    if (!schema.steps) return
+    if (index >= 0 && index < schema.steps.length) {
+      currentStep.value = index
+    }
+  }
+
+  // -- Validate (skip hidden fields) -----------------------------------------
+  function validate(): boolean {
+    let allValid = true
+    for (const field of fields) {
+      if (!isFieldVisible(field.name)) continue
+      form.setFieldTouched(field.name, true)
+      if (!form.validateField(field.name)) {
+        allValid = false
+      }
+    }
+    return allValid
+  }
+
+  // -- Submit ----------------------------------------------------------------
+  async function submit(): Promise<void> {
+    if (!validate()) return
+
+    // Build submission data excluding hidden fields
+    let submitData = {} as Record<string, unknown>
+    for (const field of fields) {
+      if (isFieldVisible(field.name)) {
+        submitData[field.name] = (form.data as Record<string, unknown>)[field.name]
+      }
+    }
+
+    if (enhancements?.transform) {
+      submitData = enhancements.transform(submitData as T) as Record<string, unknown>
+    }
+
+    if (enhancements?.onSubmit) {
+      form.isSubmitting.value = true
+      try {
+        await enhancements.onSubmit(submitData as T)
+      } finally {
+        form.isSubmitting.value = false
+      }
+    }
+  }
+
+  // -- Reset -----------------------------------------------------------------
+  function reset(values?: Partial<T>): void {
+    form.reset(values)
+    currentStep.value = 0
+  }
+
+  // -- onFieldChange wiring --------------------------------------------------
+  if (enhancements?.onFieldChange) {
+    const callback = enhancements.onFieldChange
+    watch(
+      () => ({ ...(form.data as Record<string, unknown>) }),
+      (newData, oldData) => {
+        if (!oldData) return
+        for (const key of Object.keys(newData)) {
+          if (newData[key] !== oldData[key]) {
+            callback(key as keyof T, newData[key], newData as T)
+          }
+        }
+      },
+      { deep: true },
+    )
+  }
+
+  return {
+    form: form as UseFormReturn<T>,
+    rules: rules as Partial<Record<keyof T, FieldRules>>,
+    isFieldVisible,
+    isSectionVisible,
+    fields,
+    getResolvedFieldProps,
+    getFieldOptions,
+    currentStep,
+    isCurrentStepValid,
+    goNext,
+    goBack,
+    goToStep,
+    validate,
+    reset,
+    submit,
+  }
+}

package/src/composables/usePluginConfig.ts

@@ -0,0 +1,92 @@
+import { ref, computed, onMounted, type Ref, type ComputedRef } from 'vue'
+import { useApi } from './useApi'
+import { usePlatformContext } from './usePlatformContext'
+
+export interface UsePluginConfigReturn {
+  config: Ref<Record<string, unknown>>
+  isLoading: Ref<boolean>
+  isSaving: Ref<boolean>
+  error: Ref<string | null>
+  isDirty: ComputedRef<boolean>
+  load: () => Promise<void>
+  save: () => Promise<boolean>
+  reset: () => void
+}
+
+export function usePluginConfig(pluginName?: string): UsePluginConfigReturn {
+  const api = useApi()
+  const { plugin } = usePlatformContext()
+
+  const resolvedName = computed(() => pluginName ?? plugin.value?.name ?? '')
+
+  const config = ref<Record<string, unknown>>({})
+  const savedConfig = ref<Record<string, unknown>>({})
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+  const error = ref<string | null>(null)
+
+  const isDirty = computed(() => {
+    return JSON.stringify(config.value) !== JSON.stringify(savedConfig.value)
+  })
+
+  async function load(): Promise<void> {
+    const name = resolvedName.value
+    if (!name) return
+
+    isLoading.value = true
+    error.value = null
+    try {
+      const response = await api.get<{ plugin_name: string; config: Record<string, unknown> }>(
+        `/api/plugins/${encodeURIComponent(name)}/config`,
+      )
+      config.value = { ...response.config }
+      savedConfig.value = { ...response.config }
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Failed to load plugin config'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function save(): Promise<boolean> {
+    const name = resolvedName.value
+    if (!name) return false
+
+    isSaving.value = true
+    error.value = null
+    try {
+      const response = await api.put<{ plugin_name: string; config: Record<string, unknown> }>(
+        `/api/plugins/${encodeURIComponent(name)}/config`,
+        { config: config.value },
+      )
+      config.value = { ...response.config }
+      savedConfig.value = { ...response.config }
+      return true
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Failed to save plugin config'
+      return false
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  function reset(): void {
+    config.value = { ...savedConfig.value }
+    error.value = null
+  }
+
+  onMounted(() => {
+    load()
+  })
+
+  return {
+    config,
+    isLoading,
+    isSaving,
+    error,
+    isDirty,
+    load,
+    save,
+    reset,
+  }
+}

package/src/index.ts

@@ -133,6 +133,9 @@ export {
   compareTime,
   // Schedule drag
   useScheduleDrag,
+  // Plugin config
+  usePluginConfig,
+  type UsePluginConfigReturn,
 } from './composables'
 
 // Stores

package/src/styles/components/app-container.css

@@ -12,6 +12,7 @@
   box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
   border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
   background-color: var(--bg-card, var(--mld-bg-card, #ffffff));
+  padding: 1rem;
 }
 
 .mld-container--scrollable {

package/src/styles/components/app-layout.css

@@ -62,7 +62,6 @@
 
 .mld-layout--floating .mld-layout__topbar {
   border-radius: var(--radius-lg, 0.75rem);
-  overflow: hidden;
   box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
   border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
 }
@@ -94,6 +93,6 @@
   border-bottom: none;
   margin: 0;
   width: 100%;
-  border-radius: 0;
+  border-radius: var(--radius-lg, 0.75rem);
   box-shadow: none;
 }

package/src/styles/components/form-builder.css

@@ -0,0 +1,69 @@
+/* FormBuilder */
+.mld-form-builder {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mld-form-builder--sm {
+  gap: 1rem;
+}
+
+.mld-form-builder--lg {
+  gap: 2rem;
+}
+
+.mld-form-builder__step {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* FormSection */
+.mld-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.mld-form-section--static {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.mld-form-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.mld-form-section__title {
+  font-size: var(--font-size-base, 0.9375rem);
+  font-weight: 600;
+  color: var(--color-text, #1a1a2e);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.mld-form-section__description {
+  font-size: var(--font-size-sm, 0.8125rem);
+  color: var(--color-text-secondary, #6b7280);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.mld-form-section__grid {
+  display: grid;
+  gap: 1rem;
+}
+
+/* FormActions */
+.mld-form-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border, #e5e7eb);
+}

package/src/styles/components/number-input.css

@@ -2,6 +2,7 @@
 
 .mld-number-input {
   display: inline-flex;
+  max-width: 100%;
   border-radius: 0.5rem;
   border: 1px solid var(--border-color);
   overflow: hidden;
@@ -42,6 +43,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   background-color: var(--bg-tertiary);
   color: var(--text-muted);
   border: none;
@@ -85,7 +87,8 @@
 }
 
 .mld-number-input__input {
-  width: 5rem;
+  flex: 1;
+  min-width: 0;
   text-align: center;
   background-color: var(--bg-secondary);
   color: var(--text-primary);

package/src/styles/index.css

@@ -78,3 +78,4 @@
 @import './components/time-range-input.css';
 @import './components/schedule-calendar.css';
 @import './components/resource-card.css';
+@import './components/form-builder.css';