nuxt-unified-ui 0.5.12 → 0.5.14

package/app/components/un-table.vue

@@ -4,14 +4,16 @@
 
 const props = defineProps({
   columns: Array,
+  ui: Object,
   loading: Boolean,
   data: Array,
   hidePagination: Boolean,
   totalItems: Number,
+  itemsPerPageItems: Array,
+  rowTo: Function,
+  stickyActions: Boolean,
   actions: Array,
   extraActions: Array,
-  stickyActions: Boolean,
-  ui: Object,
   meta: Object,
 });
 
@@ -66,14 +68,32 @@ const columnPinning = computed(() => {
 
 const tableUi = computed(() => {
   return {
-    tr: 'data-[expanded=true]:bg-elevated!',
-    ...(props.ui || {}),
+    ...(props.ui ?? {}),
+    tr: [
+      'data-[expanded=true]:bg-elevated!',
+      props.rowTo ? 'cursor-pointer' : '',
+      (props.ui ?? {}).tr,
+    ].filter(Boolean).join(' '),
   };
 });
 
 
 /* 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 +103,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 +129,7 @@ function getExtraActionItems(row) {
           'vIf',
           'actionType',
           'tooltip',
+          'warning',
           'to',
           'href',
           'disabled',
@@ -108,13 +146,20 @@ function getExtraActionItems(row) {
 
 /* pagination */
 
-const pageSizeItems = [
-  5,
-  10,
-  25,
-  50,
-  100,
-];
+const pageSizeItems = computed(() => {
+  if (props.itemsPerPageItems?.length) {
+    return props.itemsPerPageItems;
+  }
+  else {
+    return [
+      5,
+      10,
+      25,
+      50,
+      100,
+    ];
+  }
+});
 
 </script>
 
@@ -145,17 +190,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 +270,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.14",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {

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

@@ -522,8 +522,8 @@ 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`
-- `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)
+- 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` → `:items-per-page-items` → `:row-to` → `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`
 
 ### Default attribute values (omit noise)

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

@@ -27,14 +27,16 @@ Do **not** add sort, filter, or selection props to `un-table`. Resource dashboar
 | `actions` | Visible row buttons; adds the trailing `actions` column |
 | `extraActions` | Overflow `u-dropdown-menu` (ellipsis); also creates the column |
 | `stickyActions` | Pin the `actions` column to the right |
-| `ui` | Merged into `u-table` `:ui` after the expanded-row `tr` class |
+| `rowTo` | Adds `cursor-pointer` on rows; parent still owns navigation |
+| `ui` | Merged into `u-table` `:ui`. Default `tr` classes (`data-[expanded=true]:bg-elevated!`, plus `cursor-pointer` when `rowTo` is set) are prepended to `ui.tr` |
 | `meta` | Passed through to `u-table` |
 | `v-model:itemsPerPage` | Page size (default `'25'`; choices 5 / 10 / 25 / 50 / 100) |
+| `itemsPerPageItems` | Overrides the page-size select options |
 | `v-model:currentPage` | Page number (default `'1'`) |
 
 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>`
 
@@ -46,12 +48,14 @@ Omit unused props. When present, write them in this order:
 4. `:data`
 5. `hide-pagination`
 6. `:total-items`
-7. `v-model:items-per-page`
-8. `v-model:current-page`
-9. `sticky-actions`
-10. `:actions`
-11. `:extra-actions`
-12. `:meta`
+7. `:items-per-page-items`
+8. `:row-to`
+9. `v-model:items-per-page`
+10. `v-model:current-page`
+11. `sticky-actions`
+12. `:actions`
+13. `:extra-actions`
+14. `:meta`
 
 Models are always **page size, then page**. Closing `>` sits on the same line as the last attribute.
 
@@ -160,9 +164,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 +194,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 +249,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:
@@ -251,6 +285,7 @@ const currentPage = ref(1);
 ```
 
 - Layer default page size is `25` if the parent does not bind the model. Host pages often use `10` or `20` — set the ref explicitly.
+- Page-size choices default to `5 / 10 / 25 / 50 / 100`. Pass `:items-per-page-items` to replace that list.
 - Server lists: `skip = (currentPage - 1) * itemsPerPage`, `limit = itemsPerPage`, `total-items` from the `/count` endpoint.
 - Client lists: pass `data` already sliced; `total-items` is the uncut length.
 - Reset `currentPage` to `1` when page size, filters, or the resource path change.