@morscherlab/mint-sdk 1.0.0-beta.3 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/ActionItem.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, h } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
-import ActionItem from '../../components/ActionItem.vue'
+import ActionItemInternal from '../../components/internal/ActionItemInternal.vue'
 
 function createRouterLinkStub(navigate = vi.fn()) {
   return defineComponent({
@@ -18,9 +18,9 @@ function createRouterLinkStub(navigate = vi.fn()) {
   })
 }
 
-describe('ActionItem', () => {
+describe('ActionItemInternal', () => {
   it('renders a normal button action and emits clicks', async () => {
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       slots: { default: 'Run' },
     })
 
@@ -33,7 +33,7 @@ describe('ActionItem', () => {
   })
 
   it('renders disabled href actions without navigating or emitting', async () => {
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: {
         href: '/disabled',
         disabled: true,
@@ -52,7 +52,7 @@ describe('ActionItem', () => {
 
   it('renders router actions through router-link and navigates after emitting', async () => {
     const navigate = vi.fn()
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: { to: '/settings' },
       slots: { default: 'Settings' },
       global: {
@@ -73,7 +73,7 @@ describe('ActionItem', () => {
 
   it('renders disabled router actions without href, navigation, or emitted clicks', async () => {
     const navigate = vi.fn()
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: {
         to: '/settings',
         disabled: true,

package/src/__tests__/components/AppLayout.test.ts

@@ -124,6 +124,50 @@ describe('AppLayout', () => {
     })
   })
 
+  describe('responsive sidebar shell', () => {
+    it('does not render mobile toggle by default', () => {
+      const wrapper = mount(AppLayout, {
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      expect(wrapper.find('.mint-layout__sidebar-toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-layout--responsive-sidebar').exists()).toBe(false)
+    })
+
+    it('renders a mobile toggle when responsiveSidebar is enabled', async () => {
+      const wrapper = mount(AppLayout, {
+        props: { responsiveSidebar: true },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      const toggle = wrapper.get('.mint-layout__sidebar-toggle')
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      expect(wrapper.find('.mint-layout__sidebar-backdrop').exists()).toBe(false)
+
+      await toggle.trigger('click')
+
+      expect(wrapper.find('.mint-layout--sidebar-open').exists()).toBe(true)
+      expect(wrapper.get('.mint-layout__sidebar-toggle').attributes('aria-expanded')).toBe('true')
+      expect(wrapper.find('.mint-layout__sidebar-backdrop').exists()).toBe(true)
+      expect(wrapper.emitted('update:sidebarOpen')).toEqual([[true]])
+    })
+
+    it('supports controlled mobile sidebar open state and closes from backdrop', async () => {
+      const wrapper = mount(AppLayout, {
+        props: {
+          responsiveSidebar: true,
+          sidebarOpen: true,
+        },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      expect(wrapper.find('.mint-layout--sidebar-open').exists()).toBe(true)
+      await wrapper.get('.mint-layout__sidebar-backdrop').trigger('click')
+
+      expect(wrapper.emitted('update:sidebarOpen')).toEqual([[false]])
+    })
+  })
+
   describe('integration: all slots', () => {
     it('should render topbar, sidebar, and main content together', () => {
       const wrapper = mount(AppLayout, {

package/src/__tests__/components/AppSidebar.test.ts

@@ -145,6 +145,120 @@ describe('AppSidebar', () => {
     })
   })
 
+  describe('sidebar chrome and collapse state', () => {
+    it('applies analysis variant defaults for common plugin sidebars', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          title: 'Peak Picking',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(true)
+    })
+
+    it('lets explicit props override analysis variant defaults', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          floating: true,
+          width: '18rem',
+          collapsible: false,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(false)
+    })
+
+    it('renders title, subtitle, and badge in the built-in header', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          subtitle: 'run-001.msd',
+          badge: 3,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar__title').text()).toBe('Peak Picking')
+      expect(wrapper.find('.mint-sidebar__subtitle').text()).toBe('run-001.msd')
+      expect(wrapper.find('.mint-sidebar__badge').text()).toBe('3')
+    })
+
+    it('toggles uncontrolled collapsed state and emits the update', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          collapsible: true,
+          width: '18rem',
+          collapsedWidth: '3rem',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.get('.mint-sidebar__collapse-button').trigger('click')
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 3rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+    })
+
+    it('supports controlled collapsed state and a collapsed slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          collapsible: true,
+          collapsed: true,
+        },
+        slots: {
+          collapsed: '<button class="collapsed-action">2</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.collapsed-action').text()).toBe('2')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+    })
+
+    it('renders an empty analysis shell for route-owned sidebar content', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          variant: 'analysis',
+          title: 'Sequence',
+          contentId: 'seqgen-sidebar',
+          showWhenEmpty: true,
+        },
+        slots: {
+          footer: '<button class="generate-action">Generate</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__sections').attributes('id')).toBe('seqgen-sidebar')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.find('.generate-action').exists()).toBe(true)
+    })
+  })
+
   describe('panels and activeView', () => {
     it('should render sections for active view', () => {
       const wrapper = mount(AppSidebar, {
@@ -569,6 +683,18 @@ describe('AppSidebar', () => {
   })
 
   describe('slots', () => {
+    it('renders the default slot as sidebar content without panels', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { variant: 'analysis' },
+        slots: {
+          default: '<div class="route-sidebar-content">Route controls</div>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.route-sidebar-content').text()).toBe('Route controls')
+    })
+
     it('should render header slot', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },
@@ -621,11 +747,13 @@ describe('AppSidebar', () => {
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
     })
 
-    it('should handle undefined activeView', () => {
+    it('uses the first non-empty panel view when activeView is omitted', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels },
       })
-      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
     })
   })
 

package/src/__tests__/components/AppToastContainer.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import AppToastContainer from '../../components/AppToastContainer.vue'
-import ToastNotification from '../../components/ToastNotification.vue'
 import { useToast } from '../../composables/useToast'
 
 describe('AppToastContainer', () => {
@@ -35,14 +34,4 @@ describe('AppToastContainer', () => {
 
     expect(toast.toasts.value).toHaveLength(0)
   })
-
-  it('keeps ToastNotification as a compatibility wrapper', async () => {
-    const wrapper = mountContainer(ToastNotification)
-
-    toast.info('Legacy import still works', 10000)
-    await nextTick()
-
-    expect(wrapper.findComponent(AppToastContainer).exists()).toBe(true)
-    expect(wrapper.find('.mint-toast__message').text()).toBe('Legacy import still works')
-  })
 })