@octabits-io/nuxt-ui-kit 0.17.1 → 0.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octabits-io/nuxt-ui-kit",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "description": "Frontend kit for Nuxt/Vue admin SPAs: OIDC session harness (oidc-client-ts), API-client seams (base URL + OIDC bearer), auth/org store cores, and a route-guard builder — factory-style seams the app wires into its own plugins, stores, and middleware",
   "license": "MIT",
   "type": "module",

package/src/components/PageActions.vue

@@ -21,6 +21,7 @@ import {
   foldInlineActions,
   groupIsPrimary,
   isInlineBound as isItemInlineBound,
+  buildMenuActionGroups,
   resolveCollapseStages,
   type PageActionsItem,
 } from './pageActions.ts';
@@ -137,26 +138,6 @@ function toMenuItem(item: PageActionsItem): DropdownMenuItem {
 }
 
 const menuGroups = computed<DropdownMenuItem[][]>(() => {
-  const collapsedAutos = collapsed.value
-    ? actionItems.value.filter(item => (item.visibility ?? 'auto') === 'auto')
-    : [];
-
-  // Menu-only items grouped by section, in first-appearance order.
-  const sections = new Map<string, PageActionsItem[]>();
-  for (const item of actionItems.value) {
-    if ((item.visibility ?? 'auto') !== 'menu') continue;
-    const section = item.section ?? item.group?.id ?? 'default';
-    if (!sections.has(section)) sections.set(section, []);
-    sections.get(section)!.push(item);
-  }
-
-  // AI items bound to the menu (explicit 'menu', or 'auto' while collapsed)
-  // form their own group between the action sections and the utilities.
-  const aiGroup = aiItems.value.filter(item =>
-    (item.visibility ?? 'auto') === 'menu'
-    || ((item.visibility ?? 'auto') === 'auto' && collapsed.value),
-  );
-
   const utilityGroup: DropdownMenuItem[] = utilitiesCollapsed.value
     ? [
         ...props.utilityItems.map(toMenuItem),
@@ -166,10 +147,11 @@ const menuGroups = computed<DropdownMenuItem[][]>(() => {
       ]
     : [];
 
+  // Action groups (incl. their ORDER — see buildMenuActionGroups) are pure and
+  // live in the module; the utilities need i18n and the help registry.
   return [
-    collapsedAutos.map(toMenuItem),
-    ...[...sections.values()].map(group => group.map(toMenuItem)),
-    aiGroup.map(toMenuItem),
+    ...buildMenuActionGroups(actionItems.value, aiItems.value, collapsed.value)
+      .map(group => group.map(toMenuItem)),
     utilityGroup,
   ].filter(group => group.length > 0);
 });
@@ -177,6 +159,21 @@ const menuGroups = computed<DropdownMenuItem[][]>(() => {
 const hasUtilityRegion = computed(() =>
   inlineUtilityItems.value.length > 0 || (showHelp.value && !utilitiesCollapsed.value),
 );
+
+/**
+ * Is there anything to the LEFT of the utility region for the separator to
+ * separate it from? Everything the template renders before it, in order:
+ * the inline actions, the AI cluster, and the overflow menu (which draws
+ * nothing when its group list is empty).
+ *
+ * Without this the rule is drawn against the start of the cluster. A record
+ * route that declares no actions — only the help registry — renders a bar
+ * whose entire content is a vertical line and the Help button beside it, the
+ * line dividing Help from nothing.
+ */
+const hasLeadingContent = computed(() =>
+  inlineEntries.value.length > 0 || inlineAiItems.value.length > 0 || menuGroups.value.length > 0,
+);
 </script>
 
 <template>
@@ -251,7 +248,7 @@ const hasUtilityRegion = computed(() =>
   </UDropdownMenu>
   <PageActionMenu :items="menuGroups" />
   <template v-if="hasUtilityRegion">
-    <USeparator orientation="vertical" class="h-5 mx-1" />
+    <USeparator v-if="hasLeadingContent" orientation="vertical" class="h-5 mx-1" />
     <PageAction
       v-for="item in inlineUtilityItems"
       :key="item.key"

package/src/components/pageActions.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
+  buildMenuActionGroups,
   foldInlineActions,
   groupIsPrimary,
   isInlineBound,
@@ -156,3 +157,53 @@ describe('resolveCollapseStages', () => {
     }
   });
 });
+
+describe('buildMenuActionGroups', () => {
+  const item = (over: Partial<PageActionsItem>): PageActionsItem =>
+    ({ key: over.key ?? 'k', icon: 'i', label: over.label ?? 'l', ...over });
+
+  const keys = (groups: PageActionsItem[][]) => groups.map(g => g.map(i => i.key));
+
+  it('keeps an AI row above the destructive section', () => {
+    // The regression this exists for: an AI item appended AFTER the sections
+    // rendered under "Delete", where a "Generate page content" row reads as an
+    // afterthought to the deletion.
+    const actions = [
+      item({ key: 'export', visibility: 'menu' }),
+      item({ key: 'delete', visibility: 'menu', section: 'destructive', color: 'error' }),
+    ];
+    const ai = [item({ key: 'generate', kind: 'ai' })];
+
+    expect(keys(buildMenuActionGroups(actions, ai, true)))
+      .toEqual([['generate'], ['export'], ['delete']]);
+  });
+
+  it('sits with the other collapsed actions, not behind them', () => {
+    const actions = [item({ key: 'edit' }), item({ key: 'delete', visibility: 'menu' })];
+    const ai = [item({ key: 'generate', kind: 'ai' })];
+
+    // 'edit' collapses out of the bar; the AI row is its own group beside it.
+    expect(keys(buildMenuActionGroups(actions, ai, true)))
+      .toEqual([['edit'], ['generate'], ['delete']]);
+  });
+
+  it('leaves inline-bound items out of the menu entirely', () => {
+    const actions = [item({ key: 'publish', visibility: 'always' }), item({ key: 'edit' })];
+    const ai = [item({ key: 'generate', kind: 'ai', visibility: 'always' })];
+
+    // Wide: nothing collapses. Narrow: 'always' items still render inline, so
+    // the menu holds only 'edit'.
+    expect(keys(buildMenuActionGroups(actions, ai, false))).toEqual([]);
+    expect(keys(buildMenuActionGroups(actions, ai, true))).toEqual([['edit']]);
+  });
+
+  it('orders menu sections by first appearance, so the caller decides', () => {
+    const actions = [
+      item({ key: 'a', visibility: 'menu', section: 'one' }),
+      item({ key: 'b', visibility: 'menu', section: 'two' }),
+      item({ key: 'c', visibility: 'menu', section: 'one' }),
+    ];
+    expect(keys(buildMenuActionGroups(actions, [], false)))
+      .toEqual([['a', 'c'], ['b']]);
+  });
+})

package/src/components/pageActions.ts

@@ -193,3 +193,46 @@ export function resolveCollapseStages(
     utilitiesCollapsed: collapsed || width < (utilityCollapseBelow ?? collapseBelow),
   };
 }
+
+/**
+ * The overflow menu's ACTION groups, in render order — everything above the
+ * utility group, which the component builds itself (it needs i18n and the help
+ * registry).
+ *
+ * The order is the whole point, and it is a convention the type cannot express:
+ * destructive rows are the last-declared menu section, so anything appended
+ * after the sections lands under "Delete". AI items used to, which read as an
+ * afterthought to the deletion rather than as a thing you might do to the
+ * record. They belong with the other collapsed actions instead.
+ *
+ * Groups render separated, and empty ones are dropped by the caller.
+ */
+export function buildMenuActionGroups(
+  actionItems: PageActionsItem[],
+  aiItems: PageActionsItem[],
+  collapsed: boolean,
+): PageActionsItem[][] {
+  const visibilityOf = (item: PageActionsItem) => item.visibility ?? 'auto';
+
+  // 'auto' actions the current width pushed out of the bar.
+  const collapsedAutos = collapsed
+    ? actionItems.filter(item => visibilityOf(item) === 'auto')
+    : [];
+
+  // Menu-only items, grouped by section in first-appearance order — so a
+  // caller's declaration order decides, and 'destructive' stays last by
+  // being declared last.
+  const sections = new Map<string, PageActionsItem[]>();
+  for (const item of actionItems) {
+    if (visibilityOf(item) !== 'menu') continue;
+    const section = item.section ?? item.group?.id ?? 'default';
+    if (!sections.has(section)) sections.set(section, []);
+    sections.get(section)!.push(item);
+  }
+
+  const aiGroup = aiItems.filter(item =>
+    visibilityOf(item) === 'menu' || (visibilityOf(item) === 'auto' && collapsed),
+  );
+
+  return [collapsedAutos, aiGroup, ...sections.values()].filter(group => group.length > 0);
+}