@octabits-io/nuxt-ui-kit 0.9.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@octabits-io/nuxt-ui-kit",
3
- "version": "0.9.0",
3
+ "version": "0.9.1",
4
4
  "description": "Frontend kit for Nuxt/Vue admin SPAs: OIDC session harness (oidc-client-ts), Eden Treaty client factory, auth/org store cores, and a route-guard builder — factory-style seams the app wires into its own plugins, stores, and middleware",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -15,9 +15,13 @@ import PageUtilityActions from './PageUtilityActions.vue'
15
15
  * Standard page header.
16
16
  *
17
17
  * Conventions enforced by this component and its siblings:
18
- * - State-changing decision actions (confirm, publish, cancel, ) render
19
- * labeled via `show-label`; generic reversible tools (edit, preview,
20
- * download, add) stay icon-only with tooltips.
18
+ * - EVERY inline `#actions` button is labeled (`show-label`) — no icon-only
19
+ * buttons in the header. Hierarchy comes from tone alone: at most ONE
20
+ * `tone="primary"` (solid) per state the state's main next step — ghost
21
+ * neutral for the rest.
22
+ * - Actions that are destructive only in *some* states (e.g. cancel) render
23
+ * inline while they are the state's decision counterpart, and move to the
24
+ * overflow menu (red) once they become destructive maintenance.
21
25
  * - Max 3 inline actions visible per state in `#actions`; more go in `overflowItems`.
22
26
  * - Destructive actions are ALWAYS placed inside the overflow menu, never inline.
23
27
  * - Header height, spacing, and tooltip behavior are normalized via `PageAction`.
@@ -99,7 +103,9 @@ const titleClass = computed(() => props.density === 'compact' ? 'font-display te
99
103
  <slot name="badges" />
100
104
  </div>
101
105
 
102
- <div class="ml-auto flex items-center gap-1">
106
+ <!-- flex-wrap: labeled actions overflow narrow (mobile) viewports otherwise —
107
+ the outer header wraps rows, but this cluster must wrap internally too. -->
108
+ <div class="ml-auto flex flex-wrap items-center gap-1">
103
109
  <slot name="actions" />
104
110
  <PageActionMenu
105
111
  v-if="overflowItems.length"