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

package/src/components/BaseToggle.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 /** Renders an on/off toggle switch with label, size, and keyboard interaction support. */
+import Tooltip from './Tooltip.vue'
+
 interface Props {
   modelValue?: boolean
   label?: string
+  description?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
   reverse?: boolean
+  variant?: 'default' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   reverse: false,
+  variant: 'default',
 })
 
 const emit = defineEmits<{
@@ -31,17 +39,74 @@ function handleKeydown(event: KeyboardEvent) {
     toggle()
   }
 }
+
+function isSvgIcon(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function iconStyle(): Record<string, string> {
+  return {
+    color: props.iconColor ?? (props.modelValue ? 'var(--color-primary)' : 'var(--text-muted)'),
+  }
+}
 </script>
 
 <template>
   <div
     :class="[
       'mint-toggle',
+      `mint-toggle--${variant}`,
       reverse ? 'mint-toggle--reverse' : '',
       disabled ? 'mint-toggle--disabled' : '',
+      modelValue ? 'mint-toggle--checked' : '',
     ]"
     @click="toggle"
   >
+    <span
+      v-if="variant === 'row' && icon"
+      class="mint-toggle__row-icon"
+      :style="iconStyle()"
+      aria-hidden="true"
+    >
+      <svg
+        v-if="isSvgIcon(icon)"
+        class="mint-toggle__row-svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <template v-if="Array.isArray(icon)">
+          <path v-for="(d, i) in icon" :key="i" :d="d" />
+        </template>
+        <path v-else :d="icon" />
+      </svg>
+      <span v-else class="mint-toggle__row-text-icon">{{ icon }}</span>
+    </span>
+    <span
+      v-if="variant === 'row' && label"
+      class="mint-toggle__copy"
+    >
+      <Tooltip
+        v-if="description"
+        :text="description"
+        position="right"
+        max-width="16rem"
+      >
+        <span :class="['mint-toggle__label', `mint-toggle__label--${size}`, 'mint-toggle__label--tooltip']">
+          {{ label }}
+        </span>
+      </Tooltip>
+      <span
+        v-else
+        :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
+      >
+        {{ label }}
+      </span>
+    </span>
     <div
       role="switch"
       :tabindex="disabled ? -1 : 0"
@@ -63,7 +128,7 @@ function handleKeydown(event: KeyboardEvent) {
       />
     </div>
     <span
-      v-if="label"
+      v-if="label && variant !== 'row'"
       :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
     >
       {{ label }}

package/src/components/CollapsibleCard.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
 /** Card whose body collapses with a chevron-rotate animation, with an optional inline toggle switch independent of expand state. */
 import { ref, computed } from 'vue'
+import type { SidebarBadgeTone, SidebarToolSectionAction } from '../types'
 
 interface Props {
   title: string
   subtitle?: string
+  badge?: string | number
+  badgeTone?: SidebarBadgeTone
   defaultOpen?: boolean
   disabled?: boolean
   dense?: boolean
   icon?: string | string[]
   iconColor?: string
   iconBg?: string
+  actions?: SidebarToolSectionAction[]
   showToggle?: boolean
   toggleValue?: boolean
   toggleColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  badge: undefined,
+  badgeTone: 'cta',
   defaultOpen: false,
   disabled: false,
   dense: false,
+  actions: () => [],
   showToggle: false,
   toggleValue: false,
   toggleColor: '',
@@ -27,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:toggleValue': [value: boolean]
+  action: [actionId: string]
 }>()
 
 const isOpen = ref(props.defaultOpen)
@@ -55,10 +63,7 @@ const iconColorStyle = computed(() => ({
   color: props.iconColor || 'var(--color-primary)',
 }))
 
-const isSvgIcon = computed(() => {
-  if (!props.icon) return false
-  return Array.isArray(props.icon) || props.icon.startsWith('M') || props.icon.startsWith('m')
-})
+const isSvgIcon = computed(() => isSvgIconValue(props.icon))
 
 const toggleTrackStyle = computed(() => {
   if (!props.toggleValue || !props.toggleColor) return {}
@@ -67,47 +72,111 @@ const toggleTrackStyle = computed(() => {
     borderColor: props.toggleColor,
   }
 })
+
+const badgeClasses = computed(() => [
+  'mint-collapsible-card__badge',
+  `mint-collapsible-card__badge--${props.badgeTone}`,
+])
+
+function isSvgIconValue(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function actionClasses(action: SidebarToolSectionAction): string[] {
+  return [
+    'mint-collapsible-card__action',
+    action.tone ? `mint-collapsible-card__action--${action.tone}` : '',
+    action.disabled ? 'mint-collapsible-card__action--disabled' : '',
+  ]
+}
+
+function actionStyle(action: SidebarToolSectionAction): Record<string, string> {
+  return action.iconColor ? { color: action.iconColor } : {}
+}
+
+function handleActionClick(action: SidebarToolSectionAction) {
+  if (props.disabled || action.disabled) return
+  emit('action', action.id)
+}
 </script>
 
 <template>
   <div :class="['mint-collapsible-card', dense ? 'mint-collapsible-card--dense' : '']">
-    <button
-      type="button"
-      :class="headerClasses"
-      :disabled="disabled"
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <div class="mint-collapsible-card__title-section">
-        <!-- Icon badge -->
-        <div v-if="icon" class="mint-collapsible-card__icon-badge" :style="iconBgStyle">
+    <div class="mint-collapsible-card__header-shell">
+      <button
+        type="button"
+        :class="headerClasses"
+        :disabled="disabled"
+        :aria-expanded="isOpen"
+        @click="toggle"
+      >
+        <div class="mint-collapsible-card__title-section">
+          <!-- Icon badge -->
+          <div v-if="icon" class="mint-collapsible-card__icon-badge" :style="iconBgStyle">
+            <svg
+              v-if="isSvgIcon"
+              class="mint-collapsible-card__icon"
+              :style="iconColorStyle"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <template v-if="Array.isArray(icon)">
+                <path v-for="(d, i) in icon" :key="i" :d="d" />
+              </template>
+              <path v-else :d="icon" />
+            </svg>
+            <span v-else class="mint-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
+          </div>
+
+          <div class="mint-collapsible-card__titles">
+            <h3 class="mint-collapsible-card__title">{{ title }}</h3>
+            <p v-if="subtitle" class="mint-collapsible-card__subtitle">{{ subtitle }}</p>
+          </div>
+        </div>
+      </button>
+
+      <div class="mint-collapsible-card__actions">
+        <span v-if="badge !== undefined" :class="badgeClasses">
+          {{ badge }}
+        </span>
+
+        <button
+          v-for="action in actions"
+          :key="action.id"
+          type="button"
+          :class="actionClasses(action)"
+          :style="actionStyle(action)"
+          :disabled="disabled || action.disabled"
+          :aria-label="action.label"
+          :title="action.label"
+          @click="handleActionClick(action)"
+        >
           <svg
-            v-if="isSvgIcon"
-            class="mint-collapsible-card__icon"
-            :style="iconColorStyle"
+            v-if="action.icon && isSvgIconValue(action.icon)"
+            class="mint-collapsible-card__action-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
+            aria-hidden="true"
           >
-            <template v-if="Array.isArray(icon)">
-              <path v-for="(d, i) in icon" :key="i" :d="d" />
+            <template v-if="Array.isArray(action.icon)">
+              <path v-for="(d, i) in action.icon" :key="i" :d="d" />
             </template>
-            <path v-else :d="icon" />
+            <path v-else :d="action.icon" />
           </svg>
-          <span v-else class="mint-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
-        </div>
-
-        <div class="mint-collapsible-card__titles">
-          <h3 class="mint-collapsible-card__title">{{ title }}</h3>
-          <p v-if="subtitle" class="mint-collapsible-card__subtitle">{{ subtitle }}</p>
-        </div>
-      </div>
+          <span v-else-if="action.icon" class="mint-collapsible-card__action-text-icon">
+            {{ action.icon }}
+          </span>
+        </button>
 
-      <div class="mint-collapsible-card__actions">
-        <!-- Toggle switch -->
         <div
           v-if="showToggle"
           class="mint-collapsible-card__toggle"
@@ -134,23 +203,32 @@ const toggleTrackStyle = computed(() => {
           </div>
         </div>
 
-        <!-- Chevron -->
-        <svg
-          :class="[
-            'mint-collapsible-card__chevron',
-            isOpen ? 'mint-collapsible-card__chevron--open' : '',
-          ]"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          viewBox="0 0 24 24"
+        <button
+          type="button"
+          class="mint-collapsible-card__chevron-button"
+          :disabled="disabled"
+          :aria-label="isOpen ? 'Collapse section' : 'Expand section'"
+          :aria-expanded="isOpen"
+          @click="toggle"
         >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
+          <svg
+            :class="[
+              'mint-collapsible-card__chevron',
+              isOpen ? 'mint-collapsible-card__chevron--open' : '',
+            ]"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
       </div>
-    </button>
+    </div>
 
     <Transition name="collapse">
       <div v-show="isOpen" class="mint-collapsible-card__body">

package/src/components/FormBuilder.story.vue

@@ -5,6 +5,11 @@ import { defineControlModel, defineControls } from '../composables/useControlSch
 
 type FormSize = 'sm' | 'md' | 'lg'
 
+const icons = {
+  scale: ['M16 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z', 'M2 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z', 'M7 21h10', 'M12 3v18', 'M3 7h2c2 0 5-1 7-4 2 3 5 4 7 4h2'],
+  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
+}
+
 const analysisModel = defineControlModel({
   views: {
     analysis: {
@@ -32,6 +37,10 @@ const analysisModel = defineControlModel({
               label: 'Normalize intensities',
               default: true,
               type: 'toggle',
+              hint: 'Scale each sample before fitting',
+              icon: icons.scale,
+              iconColor: '#6366f1',
+              iconBg: '#e0e7ff',
             },
           },
         },
@@ -50,6 +59,10 @@ const analysisModel = defineControlModel({
               label: 'Exclude outliers',
               default: true,
               type: 'checkbox',
+              hint: 'Hide flagged injections from summaries',
+              icon: icons.eye,
+              iconColor: '#0ea5e9',
+              iconBg: '#e0f2fe',
             },
           },
         },

package/src/components/PluginWorkspaceView.shell.ts

@@ -14,6 +14,7 @@ const topBarForwardedSlots = new Set([
 const sidebarForwardedSlots = new Set([
   'header',
   'collapsed',
+  'collapsed-footer',
   'footer',
 ])
 

package/src/components/PluginWorkspaceView.vue

@@ -115,6 +115,7 @@ const emit = defineEmits<{
   'update:values': [values: Record<string, unknown>]
   'update:sidebarCollapsed': [value: boolean]
   'update:toggle': [sectionId: string, value: boolean]
+  'section-action': [sectionId: string, actionId: string]
   'form-submit': [sectionId: string, values: Record<string, unknown>]
   'form-cancel': [sectionId: string]
 }>()
@@ -135,6 +136,7 @@ defineSlots<{
   'settings-appearance'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   header?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   collapsed?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'collapsed-footer'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
   footer?: (props: PluginWorkspaceForwardedSlotProps) => unknown
 }>()
 
@@ -358,6 +360,7 @@ function handleFormCancel(sectionId: string) {
           @update:model-value="handleControlValuesUpdate"
           @update:collapsed="emit('update:sidebarCollapsed', $event)"
           @update:toggle="handleToggle"
+          @section-action="(sectionId, actionId) => emit('section-action', sectionId, actionId)"
           @form-submit="handleFormSubmit"
           @form-cancel="handleFormCancel"
         >

package/src/components/internal/FormFieldRendererInternal.vue

@@ -15,6 +15,24 @@ const props = defineProps<Props>()
 
 const entry = computed(() => getFieldRegistryEntry(props.field.type))
 
+const isChoiceField = computed(() =>
+  props.field.type === 'checkbox' || props.field.type === 'toggle',
+)
+
+const componentProps = computed<Record<string, unknown>>(() => {
+  if (!isChoiceField.value) return props.resolvedProps
+
+  return {
+    variant: 'row',
+    label: props.field.label,
+    description: props.field.hint,
+    icon: props.field.icon,
+    iconColor: props.field.iconColor,
+    iconBg: props.field.iconBg,
+    ...props.resolvedProps,
+  }
+})
+
 const errorMessage = computed(() => {
   const name = props.field.name
   return props.form.touched[name] ? props.form.errors[name] : null
@@ -27,22 +45,22 @@ function handleUpload(files: File[]) {
 
 <template>
   <FormField
-    :label="field.label"
+    :label="isChoiceField ? undefined : field.label"
     :error="errorMessage ?? undefined"
-    :hint="field.hint"
+    :hint="isChoiceField ? undefined : field.hint"
     :required="!!field.validation?.required"
-    :html-for="field.name"
+    :html-for="isChoiceField ? undefined : field.name"
   >
     <slot :name="`field:${field.name}`" :field="field" :form="form" :field-props="form.getFieldProps(field.name)">
       <component
         :is="entry.component"
         v-if="entry.vModel"
-        v-bind="resolvedProps"
+        v-bind="componentProps"
       />
       <component
         :is="entry.component"
         v-else
-        v-bind="resolvedProps"
+        v-bind="componentProps"
         @upload="handleUpload"
       />
     </slot>

package/src/composables/controlSchemaAdapters.ts

@@ -82,6 +82,9 @@ export function controlsToSidebarPanels(
         icon: sidebarConfig?.icon ?? config.icon,
         iconColor: sidebarConfig?.iconColor ?? config.iconColor,
         iconBg: sidebarConfig?.iconBg ?? config.iconBg,
+        badge: sidebarConfig?.badge ?? config.badge,
+        badgeTone: sidebarConfig?.badgeTone ?? config.badgeTone,
+        actions: sidebarConfig?.actions ?? config.actions,
         defaultOpen: sidebarConfig?.defaultOpen ?? config.defaultOpen,
         showToggle: sidebarConfig?.showToggle ?? config.showToggle,
       }

package/src/composables/controlSchemaFormFields.ts

@@ -25,6 +25,9 @@ export function controlToFormField(control: NormalizedControl): FormFieldSchema
     defaultValue: defaultValueForControl(definition, type),
     placeholder: definition.placeholder,
     hint: definition.hint,
+    icon: definition.icon,
+    iconColor: definition.iconColor,
+    iconBg: definition.iconBg,
     size: definition.size,
     disabled: definition.disabled,
     readonly: definition.readonly,

package/src/composables/controlSchemaTypes.ts

@@ -4,7 +4,9 @@ import type {
 } from 'vue'
 import type {
   PillNavItem,
+  SidebarBadgeTone,
   SidebarToolSection,
+  SidebarToolSectionAction,
   SelectOption,
   SettingsModalSchema,
   TopBarSettingsConfig,
@@ -35,6 +37,9 @@ export interface ControlSectionConfig {
   icon?: string | string[]
   iconColor?: string
   iconBg?: string
+  badge?: string | number
+  badgeTone?: SidebarBadgeTone
+  actions?: SidebarToolSectionAction[]
   columns?: 1 | 2 | 3
   condition?: FieldCondition
   access?: AccessPolicy
@@ -66,6 +71,9 @@ export interface ControlDefinition {
   defaultValue?: unknown
   placeholder?: string
   hint?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
   readonly?: boolean