nicklabs-ui 1.0.104 → 1.0.106

package/README.md

@@ -2,7 +2,7 @@
 
 A Vue 3 component library with glassmorphism design, built for modern web applications.
 
-**Version**: 1.0.87 | **Framework**: Vue 3.5+
+**Version**: 1.0.106 | **Framework**: Vue 3.5+
 
 ---
 
@@ -880,6 +880,8 @@ A type-safe, sortable data table with support for batch selection and action slo
 | `emptyTitle` | `string` | `"目前沒有資料"` | Title when no data |
 | `emptyDescription` | `string` | — | Description when no data |
 | `itemKey` | `string` | `"id"` | Unique key field |
+| `stickyActions` | `boolean` | `false` | Pin the actions column to the right edge during horizontal scroll. Also pinned automatically when any column has `sticky: true` |
+| `stickyBatch` | `boolean` | `false` | Pin the leftmost batch column to the left edge during horizontal scroll |
 
 **Events**
 
@@ -894,7 +896,8 @@ A type-safe, sortable data table with support for batch selection and action slo
 |------|-------------|
 | `batch` | Content in the batch selection header column |
 | `actions-header` | Custom header text for the actions column (default: "操作") |
-| `actions` | Custom action buttons per row (scoped: `{ item, column, index }`) |
+| `item` | Custom cell renderer for a row (scoped: `{ item, index, sticky }`). Render one `<td>` per column; for a sticky column, spread `v-bind="sticky(columnKey)"` onto its `<td>` |
+| `actions` | Custom action buttons per row (scoped: `{ item, index }`) |
 | `empty` | Custom empty state content |
 
 **NTableColumn Interface**
@@ -904,9 +907,47 @@ interface NTableColumn {
   key: string       // Data field key
   label: string     // Column header text
   sortable?: boolean
+  sticky?: boolean  // Pin this column to the right edge (header + actions pinned together)
 }
 ```
 
+**Sticky columns**
+
+For wide tables that scroll horizontally, mark columns with `sticky: true` to pin them to the right edge. The actions column is pinned automatically whenever any column is sticky (or set `stickyActions` to pin only the actions column). Offsets are measured at runtime, so columns can be any width.
+
+The header `<th>` is pinned by the component, but the body `<td>` is rendered by you in the `item` slot — so the slot exposes a `sticky(key)` helper that returns the binding to spread onto the matching `<td>`:
+
+```vue
+<template>
+  <NTable :columns="columns" :items="rows" sticky-actions>
+    <template #item="{ item, sticky }">
+      <td>{{ item.name }}</td>
+      <td>{{ item.email }}</td>
+      <td>{{ item.phone }}</td>
+      <!-- Sticky cells: spread the binding so the body cell pins with its header -->
+      <td v-bind="sticky('role')">{{ item.role }}</td>
+      <td v-bind="sticky('status')">{{ item.status }}</td>
+    </template>
+
+    <template #actions>
+      <NButton size="sm" variant="ghost" intent="primary">Edit</NButton>
+    </template>
+  </NTable>
+</template>
+
+<script setup lang="ts">
+import type { NTableColumn } from 'nicklabs-ui'
+
+const columns: NTableColumn[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'phone', label: 'Phone' },
+  { key: 'role', label: 'Role', sticky: true },    // pinned right
+  { key: 'status', label: 'Status', sticky: true }, // pinned right
+]
+</script>
+```
+
 **Usage**
 
 ```vue
@@ -1111,6 +1152,8 @@ A full-featured data management component combining table, pagination, filtering
 | `emptyTitle` | `string` | `"目前沒有資料"` | Empty state title |
 | `emptyDescription` | `string` | `"可以點擊上方的按鈕來新增資料或重新整理"` | Empty state description |
 | `emptyIcon` | `string` | — | Custom SVG string for empty state |
+| `stickyActions` | `boolean` | `false` | Pin the actions column to the right edge. Also pinned automatically when any column has `sticky: true` |
+| `stickyBatch` | `boolean` | `false` | Pin the leftmost batch (select-all) column to the left edge (requires `batchDeletable`) |
 
 **Events**
 
@@ -1131,7 +1174,7 @@ A full-featured data management component combining table, pagination, filtering
 | Slot | Description |
 |------|-------------|
 | `toolbar` | Extra toolbar content (alongside create/refresh buttons) |
-| `item` | Custom cell renderer (scoped: `{ item, column, index }`) |
+| `item` | Custom cell renderer (scoped: `{ item, index, sticky }`). For a sticky column, spread `v-bind="sticky(columnKey)"` onto its `<td>` |
 | `actions` | Custom action buttons per row (scoped: `{ item, index }`) |
 | `actions-header` | Custom header text for the actions column |
 
@@ -1169,6 +1212,19 @@ interface User {
 </script>
 ```
 
+> **Sticky columns.** NList renders through [NTable](#ntable), so the same sticky behavior applies. Mark trailing columns with `sticky: true` to pin them right (the actions column follows automatically), and set `stickyBatch` to pin the select-all checkbox column left. The `item` slot exposes a `sticky(key)` helper — spread `v-bind="sticky(columnKey)"` onto the matching `<td>`:
+>
+> ```vue
+> <NList :items="users" :columns="columns" updatable deletable batch-deletable sticky-batch>
+>   <template #item="{ item, sticky }">
+>     <td>{{ item.name }}</td>
+>     <td>{{ item.email }}</td>
+>     <td v-bind="sticky('role')">{{ item.role }}</td>
+>   </template>
+> </NList>
+> <!-- columns: [..., { key: 'role', label: 'Role', sticky: true }] -->
+> ```
+
 ---
 
 #### NTag
@@ -2289,6 +2345,7 @@ interface NTableColumn {
   key: string
   label: string
   sortable?: boolean
+  sticky?: boolean  // Pin this column to the right edge on horizontal scroll
 }
 
 type NTableSortOrder = 'asc' | 'desc' | null