nicklabs-ui 1.0.35 → 1.0.37

package/README.md

@@ -2,7 +2,7 @@
 
 A Vue 3 component library with glassmorphism design, built for modern web applications.
 
-**Version**: 1.0.34 | **Framework**: Vue 3.5+
+**Version**: 1.0.36 | **Framework**: Vue 3.5+
 
 ---
 
@@ -28,6 +28,7 @@ A Vue 3 component library with glassmorphism design, built for modern web applic
     - [NCode](#ncode)
   - [Modals & Overlays](#modals--overlays)
     - [NModal](#nmodal)
+    - [NDrawer](#ndrawer)
     - [NAlert](#nalert)
     - [NToast](#ntoast)
     - [NTooltip](#ntooltip)
@@ -728,14 +729,20 @@ A full-featured data management component combining table, pagination, filtering
 | `itemKey` | `string` | `"id"` | Unique key field |
 | `pageSize` | `number` | `10` | Items per page |
 | `maxPageButtons` | `number` | `7` | Visible page buttons |
-| `filterable` | `boolean` | `false` | Show filter button |
+| `creatable` | `boolean` | `false` | Show create button |
+| `createLabel` | `string` | `"新增"` | Create button label |
 | `updatable` | `boolean` | `false` | Show row edit button |
+| `updateLabel` | `string` | `"編輯"` | Edit button label |
 | `deletable` | `boolean` | `false` | Show row delete button |
-| `creatable` | `boolean` | `false` | Show create button |
+| `deleteLabel` | `string` | `"刪除"` | Delete button label |
 | `batchDeletable` | `boolean` | `false` | Enable batch delete with checkboxes |
+| `batchDeleteLabel` | `string` | `"批量刪除"` | Batch delete button label |
+| `filterable` | `boolean` | `false` | Show filter button |
+| `filterLabel` | `string` | `"篩選"` | Filter button label |
 | `refreshable` | `boolean` | `false` | Show refresh button |
+| `refreshLabel` | `string` | `"重新整理"` | Refresh button label |
 | `emptyTitle` | `string` | `"目前沒有資料"` | Empty state title |
-| `emptyDescription` | `string` | — | Empty state description |
+| `emptyDescription` | `string` | `"可以點擊上方的按鈕來新增資料或重新整理"` | Empty state description |
 | `emptyIcon` | `string` | — | Custom SVG string for empty state |
 
 **Events**
@@ -964,6 +971,69 @@ function confirm() {
 
 ---
 
+#### NDrawer
+
+A teleported side drawer that slides in from the right or left edge of the viewport.
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `show` | `boolean` | `false` | Visibility (v-model:show) |
+| `title` | `string` | — | Drawer title |
+| `width` | `string` | `"380px"` | Drawer width |
+| `placement` | `"right" \| "left"` | `"right"` | Which side to slide in from |
+| `closeOnClickOverlay` | `boolean` | `true` | Close when backdrop clicked |
+| `showClose` | `boolean` | `true` | Show close button |
+| `zIndex` | `number` | `1000` | Custom z-index |
+
+**Events**
+
+| Event | Description |
+|-------|-------------|
+| `update:show` | Visibility changed |
+| `close` | Drawer closed |
+| `open` | Drawer opened |
+
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| `default` | Drawer body content |
+| `title` | Override the title area |
+| `footer` | Footer actions area (renders footer only when provided) |
+
+**Usage**
+
+```vue
+<template>
+  <NButton @click="isOpen = true">Open Drawer</NButton>
+
+  <NDrawer v-model:show="isOpen" title="Edit Item">
+    <NInput v-model="name" title="Name" placeholder="Enter name" />
+
+    <template #footer>
+      <NButton variant="outline" @click="isOpen = false">Cancel</NButton>
+      <NButton variant="solid" intent="primary" @click="save">Save</NButton>
+    </template>
+  </NDrawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { NDrawer, NButton, NInput } from 'nicklabs-ui'
+
+const isOpen = ref(false)
+const name = ref('')
+
+function save() {
+  isOpen.value = false
+}
+</script>
+```
+
+---
+
 #### NAlert
 
 Programmatic alert and confirm dialogs via the `useAlert` composable.
@@ -1236,10 +1306,10 @@ Form wrapper with optional tab navigation and hero section header.
 |------|------|---------|-------------|
 | `model` | `object` | `{}` | Form data object |
 | `disabled` | `boolean` | `false` | Disable all inputs |
+| `icon` | `string` | — | Header icon (SVG string) |
 | `title` | `string` | — | Form header title |
 | `description` | `string` | — | Form header description |
-| `icon` | `string` | — | Header icon (SVG string) |
-| `tabs` | `string[]` | `[]` | Tab labels for multi-section forms |
+| `tabs` | `string[]` | `[]` | Tab labels; active tab persisted to localStorage |
 
 **Events**
 
@@ -1252,6 +1322,7 @@ Form wrapper with optional tab navigation and hero section header.
 
 | Slot | Description |
 |------|-------------|
+| `heroSection` | Replace the entire hero header (rarely needed) |
 | `toolbar` | Toolbar area in the hero header (buttons, etc.) |
 | `description` | Custom description content in hero header |
 | `tab0` | Content for first tab (or only content when no tabs) |
@@ -1606,9 +1677,6 @@ import { useDisclosure } from 'nicklabs-ui'
 
 // Array destructuring
 const [isOpen, open, close] = useDisclosure()
-
-// Object destructuring
-const { isOpen, open, close } = useDisclosure()
 ```
 
 **Usage**