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

package/src/components/ControlWorkspaceView.vue

@@ -0,0 +1,378 @@
+<script setup lang="ts">
+/** Complete control workspace component that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder forms. */
+import { computed, effectScope, onScopeDispose, shallowRef, toRaw, watch, type EffectScope } from 'vue'
+import type { TopBarVariant } from '../types'
+import type { FormEnhancements } from '../types/form-builder'
+import type {
+  ControlComponentBindingsConfig,
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+  UseControlWorkspaceReturn,
+} from '../composables/useControlSchema'
+import { defineControlModel, mergeControlWorkspaceOptions, useControlWorkspace } from '../composables/useControlSchema'
+import AppLayout from './AppLayout.vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+import FormBuilder from './FormBuilder.vue'
+
+type ControlWorkspaceSidebarVariant = 'default' | 'analysis'
+type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
+
+interface ControlWorkspaceDefaultSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  values: ResolvedControlWorkspace['values']
+  componentBindings: ReturnType<ResolvedControlWorkspace['getComponentBindings']>
+  componentBindingsById: ReturnType<ResolvedControlWorkspace['getComponentBindingsById']>
+  componentProps: ReturnType<ResolvedControlWorkspace['getComponentProps']>
+  componentPropsById: ReturnType<ResolvedControlWorkspace['getComponentPropsById']>
+}
+
+interface ControlWorkspaceTopbarSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  topBar: ResolvedControlWorkspace['bindings']['topBar']['value']
+}
+
+interface ControlWorkspaceSidebarSlotProps {
+  workspace: ResolvedControlWorkspace
+  bindings: ResolvedControlWorkspace['bindings']
+  sidebar: ResolvedControlWorkspace['sidebar']
+}
+
+interface Props {
+  /** Model returned by defineControlModel()/defineDoseDesignControlModel(), or a raw nested ControlModel. */
+  model?: ControlModel | ControlModelBinding
+  /** Workspace returned by useControlWorkspace(). Use for full manual control. */
+  workspace?: UseControlWorkspaceReturn<ControlSchema>
+  /** Compact controls schema. When provided without workspace, the view creates the workspace internally. */
+  controls?: ControlSchema
+  /** Options passed to the internally generated useControlWorkspace() call. */
+  controlOptions?: ControlWorkspaceOptions
+  /** Initial values for the internally generated workspace. Merged over controlOptions.initialValues. */
+  initialValues?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** External values for the internally generated workspace. Supports v-model:values. */
+  values?: Record<string, unknown>
+  /** AppTopBar title. */
+  title?: string
+  /** AppTopBar subtitle. */
+  subtitle?: string
+  /** AppTopBar visual variant. */
+  topBarVariant?: TopBarVariant
+  /** AppSidebar/AppLayout sidebar width. */
+  sidebarWidth?: string
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  sidebarVariant?: ControlWorkspaceSidebarVariant
+  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
+  responsiveSidebar?: boolean
+  /** Sidebar position in AppLayout. */
+  sidebarPosition?: 'left' | 'right'
+  /** Optional AppSidebar chrome title for LEAF-style plugin workbenches. */
+  sidebarTitle?: string
+  /** Optional AppSidebar chrome subtitle for active experiment/run context. */
+  sidebarSubtitle?: string
+  /** Optional compact badge/count rendered in the AppSidebar chrome header. */
+  sidebarBadge?: string | number
+  /** Floating AppLayout style. */
+  floating?: boolean
+  /** Compact AppSidebar density. */
+  dense?: boolean
+  /** Whether AppTopBar should show generated settings. */
+  showSettings?: boolean
+  /** Render FormBuilder actions in the default content. */
+  showFormActions?: boolean
+  /** Runtime FormBuilder enhancements passed to generated forms. */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Optional SDK component bindings exposed to the default slot with resolved props. */
+  componentBindings?: ControlComponentBindingsConfig
+  /** Optional mapping from workspace values to component props exposed to the default slot. */
+  componentProps?: ControlComponentPropsMap
+  /** Optional named mappings from workspace values to component props exposed to the default slot. */
+  componentPropsById?: ControlComponentPropsByIdMap
+  /** Loading/saving state passed to generated forms. */
+  formLoading?: boolean
+  /** Disabled state passed to generated forms. */
+  formDisabled?: boolean
+  /** Readonly state passed to generated forms. */
+  formReadonly?: boolean
+  /** FormBuilder size in the default content. */
+  formSize?: 'sm' | 'md' | 'lg'
+}
+
+const emit = defineEmits<{
+  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:modelValue': [values: Record<string, unknown>]
+  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
+  'update:values': [values: Record<string, unknown>]
+  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
+  submit: [values: Record<string, unknown>]
+  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
+  cancel: []
+}>()
+
+defineSlots<{
+  default?: (props: ControlWorkspaceDefaultSlotProps) => unknown
+  topbar?: (props: ControlWorkspaceTopbarSlotProps) => unknown
+  sidebar?: (props: ControlWorkspaceSidebarSlotProps) => unknown
+}>()
+
+const props = withDefaults(defineProps<Props>(), {
+  model: undefined,
+  workspace: undefined,
+  controls: undefined,
+  controlOptions: () => ({}),
+  initialValues: undefined,
+  modelValue: undefined,
+  values: undefined,
+  title: 'Workspace',
+  subtitle: undefined,
+  topBarVariant: 'card',
+  sidebarWidth: '320px',
+  sidebarVariant: 'analysis',
+  responsiveSidebar: true,
+  sidebarPosition: 'left',
+  sidebarTitle: undefined,
+  sidebarSubtitle: undefined,
+  sidebarBadge: undefined,
+  floating: false,
+  dense: true,
+  showSettings: true,
+  showFormActions: false,
+  formEnhancements: undefined,
+  componentBindings: undefined,
+  componentProps: undefined,
+  componentPropsById: undefined,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'md',
+})
+
+const externalValues = computed(() => props.modelValue ?? props.values)
+const resolvedModel = computed<ControlModelBinding | undefined>(() => {
+  if (props.model === undefined) return undefined
+  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+})
+const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
+const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
+  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+)
+
+const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => {
+  if (props.initialValues === undefined && externalValues.value === undefined) return baseControlOptions.value
+
+  return {
+    ...baseControlOptions.value,
+    initialValues: {
+      ...(baseControlOptions.value.initialValues ?? {}),
+      ...(props.initialValues ?? {}),
+      ...(externalValues.value ?? {}),
+    },
+  }
+})
+
+let generatedWorkspaceScope: EffectScope | undefined
+
+function createGeneratedWorkspace(seedValues: Record<string, unknown> = {}) {
+  generatedWorkspaceScope?.stop()
+  generatedWorkspaceScope = effectScope()
+  return generatedWorkspaceScope.run(() =>
+    useControlWorkspace(resolvedControls.value, {
+      ...resolvedControlOptions.value,
+      initialValues: {
+        ...seedValues,
+        ...(resolvedControlOptions.value.initialValues ?? {}),
+      },
+    })
+  )!
+}
+
+const generatedWorkspace = shallowRef<UseControlWorkspaceReturn<ControlSchema>>(createGeneratedWorkspace())
+const resolvedWorkspace = computed<UseControlWorkspaceReturn<ControlSchema>>(() => props.workspace ?? generatedWorkspace.value)
+const resolvedComponentBindings = computed(() =>
+  resolvedWorkspace.value.getComponentBindings(props.componentBindings ?? resolvedModel.value?.componentBindings)
+)
+const resolvedComponentBindingsById = computed(() =>
+  resolvedWorkspace.value.getComponentBindingsById(props.componentBindings ?? resolvedModel.value?.componentBindings)
+)
+const resolvedComponentProps = computed(() =>
+  resolvedWorkspace.value.getComponentProps(props.componentProps ?? resolvedModel.value?.componentProps)
+)
+const resolvedComponentPropsById = computed(() =>
+  resolvedWorkspace.value.getComponentPropsById(props.componentPropsById ?? resolvedModel.value?.componentPropsById)
+)
+const resolvedBindings = computed<ResolvedControlWorkspace['bindings']>(() => ({
+  ...resolvedWorkspace.value.bindings,
+  componentBindings: resolvedComponentBindings,
+  componentBindingsById: resolvedComponentBindingsById,
+  componentProps: resolvedComponentProps,
+  componentPropsById: resolvedComponentPropsById,
+}))
+const resolvedTopBarSlot = computed(() => resolvedWorkspace.value.bindings.topBar.value)
+
+watch(
+  [() => props.model, () => props.controls, () => props.controlOptions, () => props.initialValues],
+  () => {
+    const previousWorkspace = generatedWorkspace.value
+    const previousActiveView = previousWorkspace.activeView.value
+    generatedWorkspace.value = createGeneratedWorkspace({ ...previousWorkspace.values })
+    generatedWorkspace.value.setActiveView(previousActiveView)
+  },
+  { deep: true },
+)
+
+onScopeDispose(() => generatedWorkspaceScope?.stop())
+
+watch(
+  externalValues,
+  (values) => {
+    if (values === undefined || props.workspace !== undefined) return
+    if (recordsEqual(generatedWorkspace.value.values, values)) return
+    generatedWorkspace.value.setValues(values)
+  },
+  { deep: true },
+)
+
+watch(
+  () => generatedWorkspace.value.values,
+  (values) => {
+    if (props.workspace !== undefined) return
+    const nextValues = { ...values }
+    if (externalValues.value !== undefined && recordsEqual(externalValues.value, nextValues)) return
+    emit('update:modelValue', nextValues)
+    emit('update:values', nextValues)
+  },
+  { deep: true },
+)
+
+function recordsEqual(left: Record<string, unknown>, right: Record<string, unknown>): boolean {
+  const leftKeys = Object.keys(left)
+  const rightKeys = Object.keys(right)
+  if (leftKeys.length !== rightKeys.length) return false
+  return leftKeys.every(key => valuesEqual(left[key], right[key]))
+}
+
+function valuesEqual(left: unknown, right: unknown): boolean {
+  const leftRaw = toRaw(left)
+  const rightRaw = toRaw(right)
+
+  if (Object.is(leftRaw, rightRaw)) return true
+
+  if (Array.isArray(leftRaw) || Array.isArray(rightRaw)) {
+    if (!Array.isArray(leftRaw) || !Array.isArray(rightRaw)) return false
+    if (leftRaw.length !== rightRaw.length) return false
+    return leftRaw.every((item, index) => valuesEqual(item, rightRaw[index]))
+  }
+
+  if (isPlainRecord(leftRaw) || isPlainRecord(rightRaw)) {
+    if (!isPlainRecord(leftRaw) || !isPlainRecord(rightRaw)) return false
+    return recordsEqual(leftRaw, rightRaw)
+  }
+
+  return false
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
+  return 'controlOptions' in model
+}
+</script>
+
+<template>
+  <AppLayout
+    class="mint-control-workspace-view"
+    :sidebar-position="sidebarPosition"
+    :sidebar-width="sidebarWidth"
+    :responsive-sidebar="responsiveSidebar"
+    :floating="floating"
+  >
+    <template #topbar>
+      <slot
+        name="topbar"
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :top-bar="resolvedTopBarSlot"
+      >
+        <AppTopBar
+          :title="title"
+          :subtitle="subtitle"
+          :variant="topBarVariant"
+          :pill-nav="resolvedWorkspace.pillNav.items"
+          :current-pill-id="resolvedWorkspace.pillNav.currentItemId"
+          :show-settings="showSettings"
+          :settings-config="resolvedWorkspace.topBarSettings.settingsConfig"
+          @pill-select="resolvedWorkspace.pillNav.onSelect"
+          @settings-values-change="resolvedWorkspace.topBarSettings.onSettingsValuesChange"
+        />
+      </slot>
+    </template>
+
+    <template #sidebar>
+      <slot
+        name="sidebar"
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :sidebar="resolvedWorkspace.sidebar"
+      >
+        <AppSidebar
+          v-bind="resolvedWorkspace.sidebar"
+          :title="sidebarTitle"
+          :subtitle="sidebarSubtitle"
+          :badge="sidebarBadge"
+          :variant="sidebarVariant"
+          :floating="false"
+          :dense="dense"
+          :width="sidebarWidth"
+          :form-enhancements="formEnhancements"
+          :form-loading="formLoading"
+          :form-disabled="formDisabled"
+          :form-readonly="formReadonly"
+        />
+      </slot>
+    </template>
+
+    <main class="mint-control-workspace-view__content">
+      <slot
+        :workspace="resolvedWorkspace"
+        :bindings="resolvedBindings"
+        :values="resolvedWorkspace.values"
+        :component-bindings="resolvedComponentBindings"
+        :component-bindings-by-id="resolvedComponentBindingsById"
+        :component-props="resolvedComponentProps"
+        :component-props-by-id="resolvedComponentPropsById"
+      >
+        <FormBuilder
+          v-bind="resolvedWorkspace.form"
+          :enhancements="formEnhancements"
+          :loading="formLoading"
+          :disabled="formDisabled"
+          :readonly="formReadonly"
+          :show-actions="showFormActions"
+          :size="formSize"
+          @submit="emit('submit', $event)"
+          @cancel="emit('cancel')"
+        />
+      </slot>
+    </main>
+  </AppLayout>
+</template>
+
+<style scoped>
+.mint-control-workspace-view {
+  min-width: 0;
+}
+
+.mint-control-workspace-view__content {
+  min-width: 0;
+  padding: 1rem;
+}
+</style>

package/src/components/DataFrame.vue

@@ -2,6 +2,9 @@
 /** Data table with sortable columns, search, pagination, and optional row selection. */
 import { ref, computed } from 'vue'
 import type { DataFrameColumn, SortState, PaginationState } from '../types'
+import { useSortedItems } from '../composables/useSortedItems'
+import { useTextSearch } from '../composables/useTextSearch'
+import { useListSelection } from '../composables/useListSelection'
 
 /**
  * DataFrame - Data table with sorting, searching, pagination, and row selection.
@@ -114,43 +117,27 @@ function formatCell(col: DataFrameColumn, row: Record<string, unknown>, index: n
   return String(value)
 }
 
-// Filtering
-const filteredData = computed(() => {
-  if (!props.searchable || !searchQuery.value.trim()) return props.data
-  const query = searchQuery.value.toLowerCase()
-  const keys = props.searchKeys ?? props.columns.map(c => c.key)
-  return props.data.filter(row =>
-    keys.some(key => {
-      const val = getCellValue(row, key)
-      return val !== null && val !== undefined && String(val).toLowerCase().includes(query)
-    })
-  )
+const textSearch = useTextSearch({
+  items: () => props.data,
+  query: searchQuery,
+  enabled: () => props.searchable,
+  getText: (row) => {
+    const keys = props.searchKeys ?? props.columns.map(c => c.key)
+    return keys.map(key => getCellValue(row, key))
+  },
 })
-
-// Sorting
-const sortedData = computed(() => {
-  const sort = activeSort.value
-  if (!sort || !sort.direction) return filteredData.value
-
-  const col = props.columns.find(c => c.key === sort.key)
-  if (!col) return filteredData.value
-
-  return [...filteredData.value].sort((a, b) => {
-    const aVal = getCellValue(a, sort.key)
-    const bVal = getCellValue(b, sort.key)
-
-    if (aVal === null || aVal === undefined) return 1
-    if (bVal === null || bVal === undefined) return -1
-
-    let cmp = 0
-    if (typeof aVal === 'number' && typeof bVal === 'number') {
-      cmp = aVal - bVal
-    } else {
-      cmp = String(aVal).localeCompare(String(bVal))
-    }
-    return sort.direction === 'asc' ? cmp : -cmp
-  })
+const filteredData = textSearch.filteredItems
+
+const tableSort = useSortedItems({
+  items: filteredData,
+  sort: activeSort,
+  enabled: () => {
+    const sort = activeSort.value
+    return Boolean(sort?.direction && props.columns.some(c => c.key === sort.key))
+  },
+  getValue: (row, key) => getCellValue(row, key),
 })
+const sortedData = tableSort.sortedItems
 
 // Pagination
 const paginatedData = computed(() => {
@@ -199,11 +186,15 @@ function isColumnSortable(col: DataFrameColumn): boolean {
 }
 
 // Selection
+const pageRowKeys = computed(() =>
+  paginatedData.value.map((row, i) => getRowKey(row, i))
+)
+const rowSelection = useListSelection({
+  selected: () => props.selectedKeys,
+  items: pageRowKeys,
+})
 const allSelected = computed(() => {
-  if (!props.selectable || paginatedData.value.length === 0) return false
-  return paginatedData.value.every((row, i) =>
-    props.selectedKeys.includes(getRowKey(row, i))
-  )
+  return props.selectable && rowSelection.isAllSelected.value
 })
 
 const selectIndeterminate = computed(() => {
@@ -214,19 +205,12 @@ function toggleSelectAll() {
   if (allSelected.value) {
     emit('update:selectedKeys', [])
   } else {
-    emit('update:selectedKeys', paginatedData.value.map((row, i) => getRowKey(row, i)))
+    emit('update:selectedKeys', rowSelection.itemValues.value)
   }
 }
 
 function toggleRowSelect(key: string | number) {
-  const next = [...props.selectedKeys]
-  const idx = next.indexOf(key)
-  if (idx >= 0) {
-    next.splice(idx, 1)
-  } else {
-    next.push(key)
-  }
-  emit('update:selectedKeys', next)
+  emit('update:selectedKeys', rowSelection.toggleValue(key))
 }
 
 const wrapperStyle = computed(() => {
@@ -325,7 +309,7 @@ const wrapperStyle = computed(() => {
               'mint-dataframe__row',
               {
                 'mint-dataframe__row--striped': striped && rowIndex % 2 === 1,
-                'mint-dataframe__row--selected': selectedKeys.includes(getRowKey(row, rowIndex)),
+                'mint-dataframe__row--selected': rowSelection.isSelected(getRowKey(row, rowIndex)),
               },
             ]"
             @click="emit('row-click', row, rowIndex)"
@@ -333,7 +317,7 @@ const wrapperStyle = computed(() => {
             <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
               <input
                 type="checkbox"
-                :checked="selectedKeys.includes(getRowKey(row, rowIndex))"
+                :checked="rowSelection.isSelected(getRowKey(row, rowIndex))"
                 class="mint-dataframe__checkbox"
                 @click.stop
                 @change="toggleRowSelect(getRowKey(row, rowIndex))"