nuxt-unified-ui 0.5.13 → 0.5.15

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,8 +68,12 @@ 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(' '),
   };
 });
 
@@ -140,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>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "main": "./nuxt.config.ts",
   "types": "./index.d.ts",
   "exports": {
@@ -22,13 +22,13 @@
     "@formkit/tempo": "1.1.0",
     "@iconify-json/lucide": "1.2.135",
     "@nuxt/kit": "4.5.2",
-    "@nuxt/ui": "4.11.1",
+    "@nuxt/ui": "4.11.2",
     "@nuxtjs/i18n": "10.6.0",
     "@types/canvas-confetti": "1.9.0",
     "@vueuse/core": "15.0.0",
     "@vueuse/nuxt": "15.0.0",
     "canvas-confetti": "1.9.4",
-    "radashi": "12.9.5",
+    "radashi": "12.9.6",
     "unified-mongo-filter": "0.4.0"
   },
   "peerDependencies": {

package/skills/nuxt-unified-ui/SKILL.md

@@ -8,10 +8,11 @@ description: >-
   (attribute order, row actions, pagination), pages /
   definePageMeta, page /* params */ and /* seo */ blocks, ufetch / useUFetch wrapping, unified resources
   (server plugins, REST handleResource*, resource-manager dashboard /
-  customization), attribute order/defaults, and whitespace/formatting
-  conventions for all Nuxt-generated code. Use when working in or consuming
-  nuxt-unified-ui, declaring or customizing resources, or whenever generating
-  Vue/Nuxt code that must match unified code style.
+  customization), layer-private app/atoms and app/libs vs public
+  components/utils (relative imports), attribute order/defaults, and
+  whitespace/formatting conventions for all Nuxt-generated code. Use when
+  working in or consuming nuxt-unified-ui, declaring or customizing resources,
+  or whenever generating Vue/Nuxt code that must match unified code style.
 ---
 
 # nuxt-unified-ui
@@ -75,6 +76,7 @@ Absolute highlights:
 - Light naming: `handleXxx` handlers, `it` in short callbacks, descriptive `for...of`, computeds use block + `return`
 - Pages: explicit `definePageMeta.name`, `/* params */` for `route.params` / `route.query`, required `/* seo */` (`useHead` + `useSeoMeta`, `useJsonld` when installed) → [pages.md](references/pages.md)
 - Fetching: `ufetch(url, {` one line; `useUFetch` with URL on next line + `data*Data` / `is*Loading` / `refresh*` → [data-fetching.md](references/data-fetching.md)
+- Layer modules: generate private first (`app/atoms/` components, `app/libs/` functions and similar); promote to `app/components/` / `app/utils/` only when another layer needs them; import `atoms`/`libs` with relative paths → [code-style.md](references/code-style.md)
 
 ---
 
@@ -152,6 +154,7 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 | New page / route | [pages.md](references/pages.md) |
 | List/detail fetch or mutation | [data-fetching.md](references/data-fetching.md) |
 | New / custom resource | [resources.md](references/resources.md) |
+| New component / util in a layer | Start in `app/atoms/` or `app/libs/`; relative imports; promote to `components/` / `utils/` only if another layer needs it → [code-style.md](references/code-style.md) |
 | Formatting any of the above | [code-style.md](references/code-style.md) |
 
 ## Do / don’t
@@ -164,6 +167,7 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 - Handle dialog actions in `onClick`
 - Follow code style for every generated file
 - Resources: plugin → full REST set → dashboard nav / custom `<resource-manager>` page → [resources.md](references/resources.md)
+- Start generated layer components in `app/atoms/` and functions in `app/libs/`; import them with relative paths; move to `app/components/` / `app/utils/` only when another layer needs them
 
 **Don’t**
 
@@ -173,3 +177,5 @@ From `nuxt.config.ts`: `@vueuse/nuxt`, `@nuxt/ui`, `@nuxtjs/i18n`; `ui.colorMode
 - Set choice-button `value` unless the await result must distinguish buttons
 - Assume color mode is enabled (layer disables it)
 - Reimplement resource CRUD in route files (use `handleResource*`; customize via dedicated pages + domain APIs)
+- Put a layer-private component or util in `components/` or `utils/` (becomes app-global)
+- Import `atoms`/`libs` via `~/`, `#layers`, or from another layer — use relative paths; promote first if another layer needs them

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

@@ -1,8 +1,8 @@
 # Nuxt unified code style
 
-**Mandatory** whenever generating or editing code in a Nuxt project that uses this stack. Applies to **all** Nuxt project files: Vue SFCs and `.ts`/`.js` under `app/`, `server/`, composables, utils, plugins, middleware, etc.
+**Mandatory** whenever generating or editing code in a Nuxt project that uses this stack. Applies to **all** Nuxt project files: Vue SFCs and `.ts`/`.js` under `app/` (including `atoms/` and `libs/`), `server/`, composables, utils, plugins, middleware, etc.
 
-This document is about the **look and shape** of code — whitespace, wrapping, braces, template structure, sectioning, and light naming that affects scanning — not business logic or architecture.
+This document is about the **look and shape** of code — whitespace, wrapping, braces, template structure, sectioning, file placement for layer-private vs public modules, and light naming that affects scanning — not business logic.
 
 ---
 
@@ -372,7 +372,7 @@ The comment names a logical domain, not a declaration kind. Follow it with a bla
 ```ts
 /* resource */
 
-import ResourceExplorerCell from '~/atoms/resource-explorer-cell.vue';
+import ResourceExplorerCell from '../atoms/resource-explorer-cell.vue';
 
 
 const itemsPerPage = ref(20);
@@ -431,6 +431,39 @@ Place non-auto-imported imports **inside the section that uses them**, not hoist
 import { VisXYContainer, VisLine } from '@unovis/vue';
 ```
 
+### Layer-private `atoms` / `libs` vs public `components` / `utils`
+
+Nuxt auto-imports `app/components/` and `app/utils/` across the **entire** app (every layer). Files that must stay inside one layer do not belong there.
+
+Any component or util in a layer which is not supposed to be used from another layer should be put in (`atoms` for components) and (`libs` for functions and ...), and if we notice that one of these is needed in another layer, we move it to `components` or `utils` folder. A generated component or util starts in these private folders, then moves into public ones if needed. These should be imported with relative path in their callsites.
+
+| Role | Directory | Visibility |
+|------|-----------|------------|
+| Private Vue component | `app/atoms/` | This layer only |
+| Private function / helper / similar | `app/libs/` | This layer only |
+| Public Vue component | `app/components/` | Whole app (auto-imported) |
+| Public util | `app/utils/` | Whole app (auto-imported) |
+
+`app/composables/` is public like `utils/`. Private composables and other non-component helpers go in `app/libs/`.
+
+**Generate private first.** New components go in `app/atoms/`. New functions and similar go in `app/libs/`. Promote (move the file, update call sites) to `app/components/` or `app/utils/` only when another layer needs them. After a promote, drop the relative import — public modules are auto-imported.
+
+**Import `atoms` / `libs` with relative paths only** (`../atoms/foo.vue`, `../libs/bar`). Never `~/`, `@/`, `#layers/`, or other aliases. Never import another layer's `atoms` or `libs`; promote first, then use the public auto-import.
+
+Do not register `atoms` or `libs` with Nuxt `components` / `imports` config.
+
+```ts
+// ✅ same layer
+import ResourceExplorerCell from '../atoms/resource-explorer-cell.vue';
+import { formatColumn } from '../libs/format-column';
+```
+
+```ts
+// ❌ aliases / other layers
+import ResourceExplorerCell from '~/atoms/resource-explorer-cell.vue';
+import { formatColumn } from '#layers/other-layer/libs/format-column';
+```
+
 ### Watcher formatting
 
 - Prefer `watchImmediate` over `watch(..., { immediate: true })`
@@ -523,7 +556,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` → `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)
+- `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)
@@ -781,6 +814,10 @@ export default defineEventHandler(async event => {
 | `.ts`/`.js` with no leading blanks (and no imports) | two blank lines at file start |
 | Blank lines before first `import` | `import` on line 1 |
 | Blank lines around a function that is only one `for` / `if` / `try` chain | Function `{` / `}` flush against that block |
+| Layer-private component in `components/` | `app/atoms/` |
+| Layer-private util in `utils/` or `composables/` | `app/libs/` |
+| `~/atoms/...` / `#layers/.../atoms` / `#layers/.../libs` | Relative `../atoms/...` / `../libs/...` |
+| Import another layer's `atoms` or `libs` | Promote to `components/` / `utils/`, then auto-import |
 
 ---
 
@@ -808,3 +845,4 @@ export default defineEventHandler(async event => {
 - [ ] Computeds that return structures use block + `return`
 - [ ] Pages: explicit `definePageMeta.name`, `/* params */` + `/* seo */` placement, named navigation ([pages.md](pages.md))
 - [ ] Fetching: `ufetch` / `useUFetch` wrap styles and destructure names ([data-fetching.md](data-fetching.md))
+- [ ] New layer components/utils start in `app/atoms/` or `app/libs/`; `atoms`/`libs` imported with relative paths only; promote to `components/` / `utils/` only when another layer needs them

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

@@ -27,9 +27,11 @@ 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.
@@ -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.
 
@@ -281,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.