nuxt-unified-ui 0.5.12 → 0.5.13

package/app/components/un-table.vue

@@ -74,6 +74,20 @@ const tableUi = computed(() => {
 
 /* actions */
 
+const actionButtonOmitKeys = [
+  'actionType',
+  'vIf',
+  'tooltip',
+  'warning',
+  'to',
+  'href',
+  'disabled',
+  'onClick',
+  'label',
+  'items',
+];
+
+
 function resolveActionValue(value, row) {
   if (typeof value === 'function') {
     return value(row.original);
@@ -83,6 +97,23 @@ function resolveActionValue(value, row) {
   }
 }
 
+function getActionWarning(action, row) {
+  return resolveActionValue(action.warning, row);
+}
+
+function getSplitActionItems(action, row) {
+  return (resolveActionValue(action.items, row) || []).map(it => {
+    return {
+      ...radOmit(it, [
+        'onClick',
+        'onSelect',
+      ]),
+      label: resolveActionValue(it.label, row),
+      onSelect: () => it.onSelect?.(row.original),
+    };
+  });
+}
+
 function getExtraActionItems(row) {
   return (props.extraActions || [])
     .filter(it => !it.vIf || it.vIf(row.original))
@@ -92,6 +123,7 @@ function getExtraActionItems(row) {
           'vIf',
           'actionType',
           'tooltip',
+          'warning',
           'to',
           'href',
           'disabled',
@@ -145,17 +177,61 @@ const pageSizeItems = [
             <template v-if="!action.vIf || action.vIf(row.original)">
 
               <template v-if="!action.actionType || action.actionType === 'button'">
-                <u-tooltip :text="action.tooltip">
-                  <u-button
-                    variant="subtle"
-                    v-bind="radOmit(action, [ 'actionType', 'vIf', 'tooltip', 'to', 'href', 'disabled', 'onClick' ])"
-                    :to="resolveActionValue(action.to, row)"
-                    :href="resolveActionValue(action.href, row)"
-                    :disabled="resolveActionValue(action.disabled, row)"
-                    loading-auto
-                    @click="action.onClick?.(row.original)"
-                  />
-                </u-tooltip>
+                <div class="flex flex-col items-end gap-1.5">
+                  <u-tooltip :text="resolveActionValue(action.tooltip, row)">
+                    <span class="inline-flex">
+                      <u-button
+                        variant="subtle"
+                        v-bind="radOmit(action, actionButtonOmitKeys)"
+                        :label="resolveActionValue(action.label, row)"
+                        :to="resolveActionValue(action.to, row)"
+                        :href="resolveActionValue(action.href, row)"
+                        :disabled="resolveActionValue(action.disabled, row)"
+                        loading-auto
+                        @click.stop="action.onClick?.(row.original)"
+                      />
+                    </span>
+                  </u-tooltip>
+                  <template v-if="getActionWarning(action, row)">
+                    <span class="flex items-center gap-1.5 text-sm text-warning max-w-sm">
+                      <u-icon
+                        name="lucide:triangle-alert"
+                        class="shrink-0 size-4"
+                      />
+                      <span>
+                        {{ getActionWarning(action, row) }}
+                      </span>
+                    </span>
+                  </template>
+                </div>
+              </template>
+
+              <template v-else-if="action.actionType === 'split'">
+                <div class="flex">
+                  <u-tooltip :text="resolveActionValue(action.tooltip, row)">
+                    <span class="inline-flex">
+                      <u-button
+                        variant="subtle"
+                        v-bind="radOmit(action, actionButtonOmitKeys)"
+                        class="rounded-e-none"
+                        :label="resolveActionValue(action.label, row)"
+                        :disabled="resolveActionValue(action.disabled, row)"
+                        loading-auto
+                        @click.stop="action.onClick?.(row.original)"
+                      />
+                    </span>
+                  </u-tooltip>
+                  <u-dropdown-menu :items="getSplitActionItems(action, row)">
+                    <u-button
+                      variant="subtle"
+                      :color="action.color"
+                      icon="lucide:chevron-down"
+                      class="rounded-s-none"
+                      :disabled="resolveActionValue(action.disabled, row)"
+                      @click.stop
+                    />
+                  </u-dropdown-menu>
+                </div>
               </template>
 
               <template v-else-if="action.actionType === 'separator'">
@@ -181,6 +257,7 @@ const pageSizeItems = [
               <u-button
                 variant="subtle"
                 icon="lucide:ellipsis-vertical"
+                @click.stop
               />
             </u-dropdown-menu>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {

package/skills/nuxt-unified-ui/references/code-style.md

@@ -522,7 +522,7 @@ Practical shortcuts:
 
 - `u-button`: `variant` → `color` → `size` → `icon` → label/value → `block` → `disabled` → `loading-auto` → events
 - `u-input` / `u-select*`: user-facing props (`:placeholder`, `:label`) → transient state (`:loading`, `:disabled`) → data source (`:items`) → `class` → `v-model` → events
-- Action objects (`:actions`, `:append-actions`, table row actions): `vIf` → `actionType` → `color` → `icon` → `label` → `tooltip` → `disabled` → `to` → `href` → `onClick`
+- Action objects (`:actions`, `:append-actions`, table row actions): `vIf` → `actionType` → `color` → `icon` → `label` → `tooltip` → `warning` → `disabled` → `to` → `href` → `onClick` → `items`
 - `un-table`: `:columns` → `class` / `:ui` → `:loading` → `:data` → `hide-pagination` → `:total-items` → `v-model:items-per-page` → `v-model:current-page` → `sticky-actions` → `:actions` → `:extra-actions` → `:meta` (omit unused). Full table rules → [tables.md](tables.md)
 - Tab / select item objects: `value` → `icon` → `label`
 

package/skills/nuxt-unified-ui/references/public-surface.md

@@ -12,7 +12,7 @@ Reference components in **kebab-case** in templates.
 | `un-card` | `un-card.vue` | Card + typography + action rows |
 | `un-typography` | `un-typography.vue` | Icon / title / subtitle / text / append |
 | `un-spinner` | `un-spinner.vue` | Spinning Lucide loader icon |
-| `un-table` | `un-table.vue` | `u-table` + row actions + pagination footer → [tables.md](tables.md) |
+| `un-table` | `un-table.vue` | `u-table` + row actions (button / split / warning) + pagination footer → [tables.md](tables.md) |
 
 ## Composables
 

package/skills/nuxt-unified-ui/references/tables.md

@@ -34,7 +34,7 @@ Do **not** add sort, filter, or selection props to `un-table`. Resource dashboar
 
 The actions column is added when **either** `actions` or `extraActions` has length. `#actions-cell` is then owned by the wrapper — do not override it.
 
-`to` / `href` / `disabled` on an action may be a value or `(row) => …`. `vIf(row)` hides the item. `onClick(row)` receives the original row. Buttons use `loading-auto`.
+`to` / `href` / `disabled` / `label` / `tooltip` / `warning` on an action may be a value or `(row) => …`. `vIf(row)` hides the item. `onClick(row)` receives the original row. Action clicks use `@click.stop` so they do not select the row. Buttons use `loading-auto`.
 
 ## Attribute order on `<un-table>`
 
@@ -160,9 +160,19 @@ Two channels:
 
 Use `actions` for the one or two primary row operations (view, edit, delete). Use `extraActions` for the rest (assign, revoke, copy, archive). A vertical separator is inserted between the two groups automatically.
 
+`actionType` values on `actions`:
+
+| `actionType` | UI |
+|--------------|----|
+| omitted / `'button'` | Inline `u-button` |
+| `'split'` | Primary button plus a chevron `u-dropdown-menu` |
+| `'separator'` | Vertical rule between button groups |
+
+`warning` is a string or `(row) => string | undefined` rendered under the button (triangle + text). Split `items` may be an array or `(row) => array`. Each item uses `label` (value or `(row) => …`) and `onSelect(row)` — do not put `onClick` on split items.
+
 Field order on **every** action object (omit unused):
 
-`vIf` → `actionType` → `color` → `icon` → `label` → `tooltip` → `disabled` → `to` → `href` → `onClick`
+`vIf` → `actionType` → `color` → `icon` → `label` → `tooltip` → `warning` → `disabled` → `to` → `href` → `onClick` → `items`
 
 ```js
 const itemActions = computed(() => {
@@ -180,11 +190,30 @@ const itemActions = computed(() => {
     {
       actionType: 'separator',
     },
+    {
+      actionType: 'split',
+      icon: 'lucide:download',
+      tooltip: 'Download',
+      onClick: handleItemDownloadFile,
+      items: [
+        {
+          icon: 'lucide:file-text',
+          label: 'Download file',
+          onSelect: handleItemDownloadFile,
+        },
+        {
+          icon: 'lucide:file-archive',
+          label: 'Download archive',
+          onSelect: handleItemDownloadArchive,
+        },
+      ],
+    },
     {
       vIf: it => it.status !== 'archived',
       color: 'error',
       icon: 'lucide:trash',
-      tooltip: 'Delete',
+      tooltip: it => it.role === 'admin' ? 'Admins cannot be deleted' : 'Delete',
+      warning: it => it.role === 'admin' ? 'Admins cannot be deleted' : undefined,
       disabled: it => it.role === 'admin',
       onClick: handleItemDelete,
     },
@@ -216,8 +245,9 @@ Rules:
 - Destructive: `color: 'error'` before `icon`.
 - Emphasized extra action: `color: 'primary'` before `icon`.
 - `{ actionType: 'separator' }` is a lone-key object between visual groups in `actions`.
+- `{ actionType: 'split', items, onClick }` is a default click plus overflow choices; item handlers are `onSelect`.
 - Omit `variant: 'subtle'` — that is the button default.
-- `vIf` / `disabled` / `to` / `href` take `(row) => …` when they depend on the row.
+- `vIf` / `disabled` / `to` / `href` / `label` / `tooltip` / `warning` take `(row) => …` when they depend on the row.
 - Do not put toolbar Create / Refresh on the row. Those belong on the parent `un-card` (`:actions` / `:append-actions`).
 
 Resource managers prepend custom row actions, then default Edit / Delete: