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

package/src/composables/useControlWorkspace.ts

@@ -0,0 +1,207 @@
+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 {
+  useControlSchema,
+} from './useControlSchema'
+import type {
+  ControlComponentBinding,
+  ControlComponentBindingsById,
+  ControlComponentBindingsConfig,
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModelBinding,
+  ControlSchema,
+  ControlValues,
+  ControlWorkspaceComponentBindings,
+  ControlWorkspaceFormBinding,
+  ControlWorkspaceOptions,
+  ControlWorkspacePillNavBinding,
+  ControlWorkspaceSidebarBinding,
+  ControlWorkspaceTopBarBinding,
+  ControlWorkspaceTopBarSettingsBinding,
+  UseControlWorkspaceReturn,
+} from './useControlSchema'
+
+/** 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 = isControlModelBindingInput<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,
+  }
+}
+
+function isControlModelBindingInput<TControls extends ControlSchema>(
+  value: TControls | (ControlModelBinding & { controls: TControls }),
+): value is ControlModelBinding & { controls: TControls } {
+  return (
+    typeof value === 'object'
+    && value !== null
+    && 'controls' in value
+    && 'controlOptions' in value
+  )
+}