nicklabs-ui 1.0.50 → 1.0.51

package/README.md

@@ -1098,6 +1098,8 @@ Notification toasts via the `useToast` composable.
 
 > `NToast` must be mounted once at the app root level.
 
+> When only a `description` is passed (no `title`), the description is rendered with title styling (bold, larger font) for better visual clarity.
+
 **Setup**
 
 ```vue
@@ -1342,6 +1344,7 @@ Form wrapper with optional tab navigation and hero section header.
 | `title` | `string` | — | Form header title |
 | `description` | `string` | — | Form header description |
 | `tabs` | `string[]` | `[]` | Tab labels; active tab persisted to localStorage |
+| `modelValue` | `number` | — | Controlled tab index (v-model); when provided, overrides internal state |
 
 **Events**
 
@@ -1349,6 +1352,7 @@ Form wrapper with optional tab navigation and hero section header.
 |-------|---------|-------------|
 | `submit` | `Record<string, any>` | Form submitted with model data |
 | `reset` | — | Form reset |
+| `update:modelValue` | `number` | Tab changed — emitted on every tab click for v-model binding |
 
 **Slots**
 
@@ -1370,6 +1374,7 @@ Form wrapper with optional tab navigation and hero section header.
     title="User Profile"
     description="Manage your account details"
     :tabs="['Basic Info', 'Security', 'Preferences']"
+    v-model="activeTab"
     @submit="handleSubmit"
   >
     <template #toolbar>
@@ -1392,10 +1397,11 @@ Form wrapper with optional tab navigation and hero section header.
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { NForm, NInput, NButton } from 'nicklabs-ui'
 
 const formData = reactive({ name: '', email: '', password: '' })
+const activeTab = ref(0)  // control tab externally
 
 function handleSubmit(model) {
   console.log('Submitted:', model)
@@ -1619,7 +1625,7 @@ const { toasts, toast, removeToast } = useToast()
 
 ```typescript
 interface ToastOptions {
-  title?: string    // Optional heading
+  title?: string    // Optional heading; when omitted, description uses title styling
   duration?: number // Auto-dismiss ms (default: 4000)
 }
 ```