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

package/src/components/ActionItem.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/** Private routable action primitive for SDK nav and menu components. */
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  href?: string
+  to?: string | Record<string, unknown>
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+type RouterNavigate = (event?: MouseEvent) => unknown
+
+function blockDisabledEvent(event: MouseEvent) {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+}
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    blockDisabledEvent(event)
+    return
+  }
+  emit('click', event)
+}
+
+function handleRouterClick(event: MouseEvent, navigate: RouterNavigate) {
+  if (props.disabled) {
+    blockDisabledEvent(event)
+    return
+  }
+  emit('click', event)
+  void navigate(event)
+}
+</script>
+
+<template>
+  <a
+    v-if="href"
+    v-bind="$attrs"
+    :href="disabled ? undefined : href"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : undefined"
+    @click="handleClick"
+  >
+    <slot />
+  </a>
+  <router-link
+    v-else-if="to"
+    :to="to"
+    custom
+    v-slot="{ href: routerHref, navigate }"
+  >
+    <a
+      v-bind="$attrs"
+      :href="disabled ? undefined : routerHref"
+      :aria-disabled="disabled || undefined"
+      :tabindex="disabled ? -1 : undefined"
+      @click="handleRouterClick($event, navigate)"
+    >
+      <slot />
+    </a>
+  </router-link>
+  <button
+    v-else
+    v-bind="$attrs"
+    :type="type"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/AppAvatarMenu.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { computed } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
 import type { AccountMenuItem } from '../types/components'
+import ActionItem from './ActionItem.vue'
 
 interface Props {
   userName?: string
@@ -25,8 +27,10 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const isOpen = ref(false)
-const rootRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, close, toggle } = useDropdownState({
+  onOpen: () => emit('menu-open'),
+  onClose: () => emit('menu-close'),
+})
 
 const initials = computed(() => {
   if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
@@ -38,53 +42,20 @@ const initials = computed(() => {
   return 'U'
 })
 
-function toggle() {
-  isOpen.value = !isOpen.value
-  if (isOpen.value) {
-    emit('menu-open')
-  } else {
-    emit('menu-close')
-  }
+function closeSilently() {
+  isOpen.value = false
 }
 
 function handleSelect(item: AccountMenuItem) {
   if (item.divider) return
   emit('select', item)
-  isOpen.value = false
-  emit('menu-close')
+  close()
 }
 
 function handleSignOut() {
   emit('sign-out')
-  isOpen.value = false
-  emit('menu-close')
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (!isOpen.value) return
-  const target = event.target as Node
-  if (rootRef.value && !rootRef.value.contains(target)) {
-    isOpen.value = false
-    emit('menu-close')
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
-    emit('menu-close')
-  }
+  close()
 }
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
@@ -112,24 +83,12 @@ onUnmounted(() => {
         <div v-if="userEmail" class="mint-avatar-menu__user-email">{{ userEmail }}</div>
       </div>
 
-      <slot name="items" :close="() => (isOpen = false)">
+      <slot name="items" :close="closeSilently">
         <template v-for="item in items" :key="item.id">
           <div v-if="item.divider" class="mint-avatar-menu__divider" role="separator" />
-          <a
-            v-else-if="item.href"
+          <ActionItem
+            v-else
             :href="item.href"
-            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
-            role="menuitem"
-            @click="handleSelect(item)"
-          >
-            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
-              <slot name="item-icon" :item="item" />
-            </span>
-            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </a>
-          <router-link
-            v-else-if="item.to"
             :to="item.to"
             :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
@@ -140,20 +99,7 @@ onUnmounted(() => {
             </span>
             <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
             <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </router-link>
-          <button
-            v-else
-            type="button"
-            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
-            role="menuitem"
-            @click="handleSelect(item)"
-          >
-            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
-              <slot name="item-icon" :item="item" />
-            </span>
-            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
-          </button>
+          </ActionItem>
         </template>
       </slot>
 

package/src/components/AppLayout.story.vue

@@ -8,11 +8,11 @@ import BaseSelect from './BaseSelect.vue'
 import BaseToggle from './BaseToggle.vue'
 import BaseButton from './BaseButton.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
-import type { SidebarToolSection, TopBarTab } from '../types'
+import type { PillNavItem, SidebarToolSection } from '../types'
 
-const activeTab = ref('analysis')
+const activeView = ref('analysis')
 
-const tabs: TopBarTab[] = [
+const pillNav: PillNavItem[] = [
   { id: 'analysis', label: 'Analysis' },
   { id: 'results', label: 'Results' },
   { id: 'settings', label: 'Settings' },
@@ -53,17 +53,17 @@ const logScale = ref(false)
               <AppTopBar
                 title="My Plugin"
                 subtitle="Laboratory Analysis"
-                :tabs="tabs"
-                :current-tab-id="activeTab"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
                 :show-theme-toggle="true"
                 home-path=""
-                @tab-select="t => activeTab = t.id"
+                @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
                 :panels="toolPanels"
-                :active-view="activeTab"
+                :active-view="activeView"
                 :floating="false"
                 :side="state.sidebarPosition"
               >
@@ -86,11 +86,11 @@ const logScale = ref(false)
             </template>
             <div style="padding: 2rem;">
               <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
-                {{ activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }}
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
               </h2>
               <p style="color: var(--text-muted, #94a3b8);">
-                Main content area. The sidebar shows tools for the "{{ activeTab }}" view.
-                Switch tabs to see different tool panels (settings tab has none).
+                Main content area. The sidebar shows tools for the "{{ activeView }}" view.
+                Switch modes to see different tool panels (settings has none).
               </p>
             </div>
           </AppLayout>
@@ -116,19 +116,19 @@ const logScale = ref(false)
         >
           <template #topbar>
             <AppTopBar
-              plugin-name="Plate Analyzer"
-              title="Dashboard"
-              :tabs="tabs"
-              :current-tab-id="activeTab"
+              title="Plate Analyzer"
+              subtitle="Dashboard"
+              :pill-nav="pillNav"
+              :current-pill-id="activeView"
               :show-theme-toggle="true"
               home-path=""
-              @tab-select="t => activeTab = t.id"
+              @pill-select="item => activeView = item.id"
             />
           </template>
           <template #sidebar>
             <AppSidebar
               :panels="toolPanels"
-              :active-view="activeTab"
+              :active-view="activeView"
               :floating="false"
             >
               <template #header>
@@ -222,19 +222,19 @@ const logScale = ref(false)
           <AppLayout :floating="true" sidebar-width="280px">
             <template #topbar>
               <AppTopBar
-                plugin-name="IC50 Calculator"
-                title="Analysis"
-                :tabs="tabs"
-                :current-tab-id="activeTab"
+                title="IC50 Calculator"
+                subtitle="Analysis"
+                :pill-nav="pillNav"
+                :current-pill-id="activeView"
                 :show-theme-toggle="true"
                 home-path=""
-                @tab-select="t => activeTab = t.id"
+                @pill-select="item => activeView = item.id"
               />
             </template>
             <template #sidebar>
               <AppSidebar
                 :panels="toolPanels"
-                :active-view="activeTab"
+                :active-view="activeView"
                 :floating="false"
               >
                 <template #section-parameters>
@@ -255,7 +255,7 @@ const logScale = ref(false)
             </template>
             <div style="padding: 2rem;">
               <h2 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">
-                {{ activeTab.charAt(0).toUpperCase() + activeTab.slice(1) }}
+                {{ activeView.charAt(0).toUpperCase() + activeView.slice(1) }}
               </h2>
               <p style="color: var(--text-muted, #94a3b8);">
                 Full layout with experiment selector in the top bar.
@@ -273,8 +273,8 @@ const logScale = ref(false)
           <AppLayout :floating="true">
             <template #topbar>
               <AppTopBar
-                plugin-name="Plate Analyzer"
-                title="Dashboard"
+                title="Plate Analyzer"
+                subtitle="Dashboard"
                 :show-theme-toggle="true"
                 home-path=""
               />

package/src/components/AppPageSelector.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 /** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import type { PageSelectorItem } from '../types/components'
+import { computed } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import type { PageSelectorItem, PageSelectorItemInput } from '../types/components'
+import { normalizeItemInput } from '../utils/items'
+import { isPluginIconFormat } from '../utils/pluginIcon'
+import ActionItem from './ActionItem.vue'
+import PluginIcon from './PluginIcon.vue'
 
 interface Props {
-  pages: PageSelectorItem[]
+  pages: PageSelectorItemInput[]
   currentPageId?: string
   placeholder?: string
   minWidth?: string
@@ -19,46 +24,22 @@ const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const isOpen = ref(false)
-const rootRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, close, toggle } = useDropdownState()
+const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
 
 const current = computed<PageSelectorItem | undefined>(() =>
-  props.pages.find((p) => p.id === props.currentPageId) ?? props.pages[0],
+  normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0],
 )
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
 function handleSelect(page: PageSelectorItem) {
   if (page.disabled) return
-  emit('select', page)
-  isOpen.value = false
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (!isOpen.value) return
-  const target = event.target as Node
-  if (rootRef.value && !rootRef.value.contains(target)) {
-    isOpen.value = false
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isOpen.value) {
-    isOpen.value = false
+  if (page.href || page.to) {
+    close()
+    return
   }
+  emit('select', page)
+  close()
 }
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
@@ -71,6 +52,22 @@ onUnmounted(() => {
       aria-haspopup="menu"
       @click.stop="toggle"
     >
+      <span
+        v-if="current"
+        class="mint-page-selector__icon"
+        :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
+      >
+        <slot name="icon" :page="current">
+          <PluginIcon
+            v-if="isPluginIconFormat(current.icon)"
+            class="mint-page-selector__trigger-metadata-icon"
+            :icon="current.icon"
+            size="sm"
+            variant="tinted"
+          />
+          <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
+        </slot>
+      </span>
       <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
       <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
         <svg
@@ -90,66 +87,38 @@ onUnmounted(() => {
 
     <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
       <div class="mint-page-selector__menu-title">Go to</div>
-      <template v-for="page in pages" :key="page.id">
-        <a
-          v-if="page.href"
-          :href="page.href"
-          :class="[
-            'mint-page-selector__item',
-            { 'mint-page-selector__item--active': page.id === current?.id },
-            { 'mint-page-selector__item--disabled': page.disabled },
-          ]"
-          role="menuitem"
-          @click="isOpen = false"
-        >
-          <span class="mint-page-selector__item-icon">
-            <slot name="item-icon" :page="page">
-              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
-            </slot>
-          </span>
-          <span class="mint-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
-        </a>
-        <router-link
-          v-else-if="page.to"
-          :to="page.to"
-          :class="[
-            'mint-page-selector__item',
-            { 'mint-page-selector__item--active': page.id === current?.id },
-            { 'mint-page-selector__item--disabled': page.disabled },
-          ]"
-          role="menuitem"
-          @click="isOpen = false"
-        >
-          <span class="mint-page-selector__item-icon">
-            <slot name="item-icon" :page="page">
-              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
-            </slot>
-          </span>
-          <span class="mint-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
-        </router-link>
-        <button
-          v-else
-          type="button"
-          :class="[
-            'mint-page-selector__item',
-            { 'mint-page-selector__item--active': page.id === current?.id },
-            { 'mint-page-selector__item--disabled': page.disabled },
-          ]"
-          role="menuitem"
-          :disabled="page.disabled"
-          @click="handleSelect(page)"
+      <ActionItem
+        v-for="page in normalizedPages"
+        :key="page.id"
+        :href="page.href"
+        :to="page.to"
+        :disabled="page.disabled"
+        :class="[
+          'mint-page-selector__item',
+          { 'mint-page-selector__item--active': page.id === current?.id },
+          { 'mint-page-selector__item--disabled': page.disabled },
+        ]"
+        role="menuitem"
+        @click="handleSelect(page)"
+      >
+        <span
+          class="mint-page-selector__item-icon"
+          :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
         >
-          <span class="mint-page-selector__item-icon">
-            <slot name="item-icon" :page="page">
-              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
-            </slot>
-          </span>
-          <span class="mint-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
-        </button>
-      </template>
+          <slot name="item-icon" :page="page">
+            <PluginIcon
+              v-if="isPluginIconFormat(page.icon)"
+              class="mint-page-selector__metadata-icon"
+              :icon="page.icon"
+              size="sm"
+              variant="tinted"
+            />
+            <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+          </slot>
+        </span>
+        <span class="mint-page-selector__item-label">{{ page.label }}</span>
+        <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
+      </ActionItem>
     </div>
   </div>
 </template>

package/src/components/AppPillNav.vue

@@ -1,63 +1,68 @@
 <script setup lang="ts">
 /** Horizontal pill-style navigation bar that emits select events and supports href, router-link, or button items. */
-import type { PillNavItem } from '../types/components'
+import { computed } from 'vue'
+import type { PillNavItem, PillNavItemInput } from '../types/components'
+import { normalizeItemInput } from '../utils/items'
+import ActionItem from './ActionItem.vue'
 
 interface Props {
-  items: PillNavItem[]
+  items: PillNavItemInput[]
   currentItemId?: string
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   select: [item: PillNavItem]
 }>()
 
+const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizeItemInput))
+
 function handleClick(item: PillNavItem) {
   if (item.disabled) return
+  if (item.href || item.to) return
   emit('select', item)
 }
+
+function isSvgIcon(icon: PillNavItem['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
 </script>
 
 <template>
   <nav class="mint-pill-nav" aria-label="Primary">
-    <template v-for="item in items" :key="item.id">
-      <a
-        v-if="item.href"
-        :href="item.href"
-        :class="[
-          'mint-pill-nav__item',
-          { 'mint-pill-nav__item--active': item.id === currentItemId },
-          { 'mint-pill-nav__item--disabled': item.disabled },
-        ]"
-      >
-        {{ item.label }}
-      </a>
-      <router-link
-        v-else-if="item.to"
-        :to="item.to"
-        :class="[
-          'mint-pill-nav__item',
-          { 'mint-pill-nav__item--active': item.id === currentItemId },
-          { 'mint-pill-nav__item--disabled': item.disabled },
-        ]"
-      >
-        {{ item.label }}
-      </router-link>
-      <button
-        v-else
-        type="button"
-        :class="[
-          'mint-pill-nav__item',
-          { 'mint-pill-nav__item--active': item.id === currentItemId },
-          { 'mint-pill-nav__item--disabled': item.disabled },
-        ]"
-        :disabled="item.disabled"
-        @click="handleClick(item)"
+    <ActionItem
+      v-for="item in normalizedItems"
+      :key="item.id"
+      :href="item.href"
+      :to="item.to"
+      :disabled="item.disabled"
+      :class="[
+        'mint-pill-nav__item',
+        { 'mint-pill-nav__item--active': item.id === currentItemId },
+        { 'mint-pill-nav__item--disabled': item.disabled },
+      ]"
+      @click="handleClick(item)"
+    >
+      <svg
+        v-if="isSvgIcon(item.icon)"
+        class="mint-pill-nav__icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
       >
-        {{ item.label }}
-      </button>
-    </template>
+        <template v-if="Array.isArray(item.icon)">
+          <path v-for="(d, index) in item.icon" :key="index" :d="d" />
+        </template>
+        <path v-else :d="item.icon" />
+      </svg>
+      {{ item.label }}
+    </ActionItem>
   </nav>
 </template>