@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/AppSidebar.vue

@@ -2,144 +2,78 @@
 /**
  * AppSidebar - Context-sensitive toolkit panel
  *
- * Shows tool sections relevant to the active view. Sections are defined via
- * the `panels` config and rendered as flat groups (header row + hairline,
- * no nested card). Controls can be provided through named slots or
- * auto-rendered from FormBuilder schemas.
+ * Shows tool sections relevant to the active view. Sections come from the
+ * spec: a `controls` model built with `defineControlModel()` generates them,
+ * and hand-written `panels` are merged over the generated ones. Each section
+ * renders as a flat group (header row + hairline, no nested card). Controls
+ * can be provided through named slots or auto-rendered from the section forms.
  *
  * When activeView is omitted, the first non-empty panel view is selected.
  * When no view has matching panels, the sidebar hides entirely.
  *
  * @example Recommended
  * ```vue
- * <AppSidebar v-model="values" :model="sidebarModel" />
+ * <AppSidebar v-model:values="values" :spec="{ title: 'Parameters', controls: sidebarModel }" />
  * ```
  */
 import { computed, ref, useSlots, type Slots } from 'vue'
-import type { PillNavItem, SidebarToolSection, SidebarToolSectionAction } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
+import type { PluginWorkspaceSidebarSpec, SidebarToolSection, SidebarToolSectionAction } from '../types'
+import type { FormSchema } from '../types/form-builder'
 import {
   controlsToSectionFormSchemas,
   controlsToSidebarPanels,
   getControlDefaults,
-  mergeControlWorkspaceOptions,
-  resolveControlModel,
-  type ControlModel,
-  type ControlModelBinding,
-  type ControlSchema,
-  type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import FormBuilder from './FormBuilder.vue'
+import { applySpecDefaults } from '../composables/componentSpecs'
+import FormSchemaInternal from './internal/FormSchemaInternal.vue'
 
 interface Props {
-  /** Optional chrome title rendered above generated sections. */
-  title?: string
-  /** Optional secondary chrome copy rendered below title. */
-  subtitle?: string
-  /** Optional compact badge/count rendered in the chrome header. */
-  badge?: string | number
-  /** Map of view IDs to their tool sections */
-  panels?: Record<string, SidebarToolSection[]>
+  /** Structure: header, sections, forms, width, side, collapse. Optional: every option has a default. */
+  spec?: PluginWorkspaceSidebarSpec
   /** Which view's panels to display. Defaults to the first non-empty panel view. */
   activeView?: string
-  /** Floating shell with absolute positioning. Prefer letting `AppLayout` own this; it stays for standalone use. */
-  floating?: boolean
-  /** Section density. `compact` (default) is the 36px header row; `comfortable` restores the roomier spacing. */
-  density?: 'compact' | 'comfortable'
-  /** @deprecated Compact is now the default; removed in MINT 1.4. Pass `density="comfortable"` for the roomier layout. */
-  dense?: boolean
-  /** Width when visible. */
-  width?: string
-  /** Position sidebar on left or right side */
-  side?: 'left' | 'right'
-  /** Toggle state map: sectionId → boolean */
-  toggleState?: Record<string, boolean>
-  /** Optional FormBuilder schemas keyed by section ID. Used when no section slot is provided. */
-  forms?: Record<string, FormSchema>
-  /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewIds?: string[]
-  /** Generated AppTopBar pillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
-  viewItems?: PillNavItem[]
-  /** Default view ID used when activeView is omitted. */
-  defaultView?: string
-  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step sidebar/form generation. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema. When provided, AppSidebar generates panels, section forms, and default values. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation, including shared initialValues. */
-  controlOptions?: ControlWorkspaceOptions
-  /** DOM id for the scrollable content area. Use with Teleport when route/tab children own sidebar controls. */
-  contentId?: string
-  /** Render the sidebar shell even when no panel matches the active view. Useful for default-slot or Teleport-driven sidebars. */
-  showWhenEmpty?: boolean
-  /** Shared values for auto-rendered section forms. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** Shared values for auto-rendered section forms */
+  /** Values of the section forms. Bind with `v-model:values`. */
   values?: Record<string, unknown>
-  /** Runtime FormBuilder enhancements for auto-rendered section forms */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Show submit/cancel actions inside auto-rendered section forms */
-  showFormActions?: boolean
-  /** Loading/saving state for auto-rendered section forms */
+  /** Collapsed state. Bind with `v-model:collapsed`; unbound, the sidebar keeps its own. */
+  collapsed?: boolean
+  /** On / off state of the section toggles, keyed by section id. */
+  toggleState?: Record<string, boolean>
+  /** Loading / saving state of the section forms. */
   formLoading?: boolean
-  /** Disabled state for auto-rendered section forms */
+  /** Disabled state of the section forms. */
   formDisabled?: boolean
-  /** Readonly state for auto-rendered section forms */
+  /** Readonly state of the section forms. */
   formReadonly?: boolean
-  /** Size passed to auto-rendered section forms */
-  formSize?: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. */
-  collapsible?: boolean
-  /** Controlled collapsed state. */
-  collapsed?: boolean
-  /** Initial collapsed state when collapsed is uncontrolled. */
-  defaultCollapsed?: boolean
-  /** Width when collapsed. */
-  collapsedWidth?: string
-  /** Accessible label for the collapse action. */
-  collapseButtonLabel?: string
-  /** Accessible label for the expand action. */
-  expandButtonLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  subtitle: undefined,
-  badge: undefined,
-  panels: () => ({}),
+  spec: () => ({}),
   activeView: '',
-  floating: true,
-  density: undefined,
-  dense: undefined,
-  width: '280px',
-  side: 'left',
-  toggleState: () => ({}),
-  forms: () => ({}),
-  viewIds: () => [],
-  viewItems: () => [],
-  defaultView: '',
-  model: undefined,
-  controlOptions: () => ({}),
-  contentId: undefined,
-  showWhenEmpty: false,
-  modelValue: undefined,
   values: () => ({}),
-  showFormActions: false,
+  collapsed: undefined,
+  toggleState: () => ({}),
   formLoading: false,
   formDisabled: false,
   formReadonly: false,
+})
+
+const config = computed(() => applySpecDefaults({
+  panels: {},
+  forms: {},
+  floating: true,
+  dense: true,
+  width: '280px',
+  position: 'left',
+  whenEmpty: false,
   formSize: 'sm',
   collapsible: false,
-  collapsed: undefined,
-  defaultCollapsed: false,
   collapsedWidth: '3rem',
   collapseButtonLabel: 'Collapse sidebar',
   expandButtonLabel: 'Expand sidebar',
-})
+}, props.spec))
 
 const emit = defineEmits<{
   'update:toggle': [sectionId: string, value: boolean]
-  'update:modelValue': [values: Record<string, unknown>]
   'update:values': [values: Record<string, unknown>]
   'update:collapsed': [value: boolean]
   'section-action': [sectionId: string, actionId: string]
@@ -148,7 +82,7 @@ const emit = defineEmits<{
 }>()
 
 const slots: Slots = useSlots()
-const internalCollapsed = ref(props.defaultCollapsed)
+const internalCollapsed = ref(false)
 const collapsedModel = computed({
   get: () => props.collapsed ?? internalCollapsed.value,
   set: (value: boolean) => {
@@ -157,10 +91,6 @@ const collapsedModel = computed({
   },
 })
 
-const resolvedDensity = computed(() =>
-  props.density ?? (props.dense === false ? 'comfortable' : 'compact'),
-)
-
 // Per-section open state; falls back to `defaultOpen` until the user toggles.
 const openState = ref<Record<string, boolean>>({})
 
@@ -172,53 +102,45 @@ function toggleSection(section: SidebarToolSection) {
   openState.value[section.id] = !isSectionOpen(section)
 }
 
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
+// Own computed: a new spec object with the same control model keeps the generated schemas,
+// so the section forms keep their errors, touched and dirty state.
+const controlModel = computed(() => config.value.controls)
 
 const generatedPanels = computed<Record<string, SidebarToolSection[]>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSidebarPanels(resolvedControls.value, resolvedControlOptions.value)
+  const model = controlModel.value
+  return model ? controlsToSidebarPanels(model.controls, model.controlOptions) : {}
 })
 
 const generatedForms = computed<Record<string, FormSchema>>(() => {
-  if (!resolvedControls.value) return {}
-  return controlsToSectionFormSchemas(resolvedControls.value, resolvedControlOptions.value)
+  const model = controlModel.value
+  return model ? controlsToSectionFormSchemas(model.controls, model.controlOptions) : {}
 })
 
 const generatedDefaults = computed<Record<string, unknown>>(() => {
-  if (!resolvedControls.value) return {}
+  const model = controlModel.value
+  if (!model) return {}
   return {
-    ...getControlDefaults(resolvedControls.value),
-    ...(resolvedControlOptions.value.initialValues ?? {}),
+    ...getControlDefaults(model.controls),
+    ...(model.controlOptions.initialValues ?? {}),
   }
 })
 
 const resolvedPanels = computed<Record<string, SidebarToolSection[]>>(() =>
-  mergeSidebarPanels(generatedPanels.value, props.panels),
+  mergeSidebarPanels(generatedPanels.value, config.value.panels),
 )
 
 const resolvedForms = computed<Record<string, FormSchema>>(() => ({
   ...generatedForms.value,
-  ...props.forms,
+  ...config.value.forms,
 }))
 
 const resolvedValues = computed<Record<string, unknown>>(() => ({
   ...generatedDefaults.value,
-  ...(props.modelValue ?? props.values),
+  ...props.values,
 }))
 
 const resolvedActiveView = computed(() => {
   if (props.activeView) return props.activeView
-  if (props.defaultView) return props.defaultView
   return firstVisibleViewId(resolvedPanels.value)
 })
 
@@ -228,27 +150,25 @@ const activeSections = computed<SidebarToolSection[]>(() => {
 })
 
 const isVisible = computed<boolean>(() =>
-  activeSections.value.length > 0 || props.showWhenEmpty || Boolean(slots.default),
+  activeSections.value.length > 0 || config.value.whenEmpty || Boolean(slots.default),
 )
 
 const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
-  `mint-sidebar--${props.side}`,
-  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
-  resolvedDensity.value === 'comfortable' ? 'mint-sidebar--comfortable' : '',
-  props.collapsible ? 'mint-sidebar--collapsible' : '',
+  `mint-sidebar--${config.value.position}`,
+  config.value.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  config.value.dense ? '' : 'mint-sidebar--comfortable',
+  config.value.collapsible ? 'mint-sidebar--collapsible' : '',
   collapsedModel.value ? 'mint-sidebar--collapsed' : '',
   !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
 const sidebarStyle = computed<Record<string, string>>(() => ({
-  width: collapsedModel.value ? props.collapsedWidth : props.width,
+  width: collapsedModel.value ? config.value.collapsedWidth : config.value.width,
 }))
 
 function handleFormUpdate(values: Record<string, unknown>) {
-  const nextValues = { ...resolvedValues.value, ...values }
-  emit('update:modelValue', nextValues)
-  emit('update:values', nextValues)
+  emit('update:values', { ...resolvedValues.value, ...values })
 }
 
 function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
@@ -339,7 +259,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
   >
     <!-- Header slot / built-in chrome -->
     <div
-      v-if="$slots.header || title || subtitle || badge !== undefined || collapsible"
+      v-if="$slots.header || config.title || config.subtitle || config.badge !== undefined || config.collapsible"
       class="mint-sidebar__header"
     >
       <slot
@@ -349,16 +269,16 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
       >
         <div v-if="!collapsedModel" class="mint-sidebar__heading">
           <div class="mint-sidebar__heading-copy">
-            <h2 v-if="title" class="mint-sidebar__title">{{ title }}</h2>
-            <p v-if="subtitle" class="mint-sidebar__subtitle">{{ subtitle }}</p>
+            <h2 v-if="config.title" class="mint-sidebar__title">{{ config.title }}</h2>
+            <p v-if="config.subtitle" class="mint-sidebar__subtitle">{{ config.subtitle }}</p>
           </div>
-          <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
+          <span v-if="config.badge !== undefined" class="mint-sidebar__badge">{{ config.badge }}</span>
         </div>
         <button
-          v-if="collapsible"
+          v-if="config.collapsible"
           type="button"
           class="mint-sidebar__collapse-button"
-          :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
+          :aria-label="collapsedModel ? config.expandButtonLabel : config.collapseButtonLabel"
           :aria-expanded="!collapsedModel"
           @click="toggleCollapsed"
         >
@@ -382,7 +302,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
     <!-- Tool sections -->
     <div
       v-if="!collapsedModel"
-      :id="contentId"
+      :id="config.contentId"
       class="mint-sidebar__sections"
     >
       <div
@@ -502,16 +422,15 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
         <Transition name="collapse">
           <div v-show="isSectionOpen(section)" class="mint-sidebar__group-body">
             <slot :name="`section-${section.id}`">
-              <FormBuilder
+              <FormSchemaInternal
                 v-if="resolvedForms[section.id]"
                 :model-value="resolvedValues"
                 :schema="resolvedForms[section.id]"
-                :enhancements="formEnhancements"
+                :enhancements="config.controls?.controlOptions.enhancements"
                 :loading="formLoading"
                 :disabled="formDisabled"
                 :readonly="formReadonly"
-                :size="formSize"
-                :show-actions="showFormActions"
+                :size="config.formSize"
                 @update:model-value="handleFormUpdate"
                 @submit="handleFormSubmit(section.id, $event)"
                 @cancel="handleFormCancel(section.id)"

package/src/components/AppToastContainer.story.vue

@@ -29,7 +29,7 @@ function showAll() {
 
 function triggerLongToast(type: 'success' | 'error') {
   const duration = type === 'success' ? 4000 : 6000
-  toast.show(`Progress bar TTL demo — ${duration}ms`, type, duration)
+  toast[type](`Progress bar TTL demo — ${duration}ms`, { duration })
 }
 </script>