@xleddyl/443-components-vue 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/CATALOG.md +185 -175
  2. package/README.md +47 -21
  3. package/dist/components/data/Tag.vue +2 -0
  4. package/dist/components/data/Tag.vue.d.ts +2 -0
  5. package/dist/components/data/TagList.vue +239 -0
  6. package/dist/components/data/TagList.vue.d.ts +53 -0
  7. package/dist/components/data/index.d.ts +1 -0
  8. package/dist/components/data/index.mjs +1 -0
  9. package/dist/components/data/types.d.ts +15 -0
  10. package/dist/components/forms/Combobox.vue +33 -4
  11. package/dist/components/forms/Combobox.vue.d.ts +3 -1
  12. package/dist/components/forms/NumberInput.vue.d.ts +1 -1
  13. package/dist/components/forms/PinInput.vue.d.ts +2 -2
  14. package/dist/components/forms/types.d.ts +2 -0
  15. package/dist/components/layout/AppShell.vue +14 -2
  16. package/dist/components/layout/AppShell.vue.d.ts +3 -1
  17. package/dist/components/layout/Stepper.vue +148 -0
  18. package/dist/components/layout/Stepper.vue.d.ts +420 -0
  19. package/dist/components/layout/index.d.ts +1 -0
  20. package/dist/components/layout/index.mjs +1 -0
  21. package/dist/components/layout/types.d.ts +12 -0
  22. package/dist/components/overlays/Toaster.vue +10 -0
  23. package/dist/components/overlays/Toaster.vue.d.ts +1 -1
  24. package/dist/components/templates/DashboardLayout.vue +2 -0
  25. package/dist/components/templates/DashboardLayout.vue.d.ts +3 -1
  26. package/dist/components/templates/types.d.ts +2 -1
  27. package/dist/composables/data.d.ts +1 -0
  28. package/dist/composables/data.mjs +1 -0
  29. package/dist/composables/useSortable.d.ts +38 -0
  30. package/dist/composables/useSortable.mjs +215 -0
  31. package/dist/grid/cells/BadgeCell.vue +90 -18
  32. package/dist/grid/cells/BadgeCell.vue.d.ts +14 -14
  33. package/dist/grid/data-grid.css +24 -0
  34. package/dist/grid/spreadsheet.mjs +8 -4
  35. package/dist/grid/types.d.ts +2 -0
  36. package/dist/internal/data/sortable.d.ts +5 -0
  37. package/dist/internal/data/sortable.mjs +23 -0
  38. package/dist/internal/overlays/avoid.d.ts +26 -0
  39. package/dist/internal/overlays/avoid.mjs +134 -0
  40. package/dist/locale/de.mjs +20 -0
  41. package/dist/locale/en.mjs +20 -0
  42. package/dist/locale/it.mjs +20 -0
  43. package/dist/locale/types.d.ts +20 -0
  44. package/dist/nuxt/module.mjs +14 -0
  45. package/dist/nuxt/runtime/layouts/dashboard.vue +8 -1
  46. package/dist/styles/data/tag-list.css +93 -0
  47. package/dist/styles/data.css +1 -0
  48. package/dist/styles/forced-colors.css +10 -0
  49. package/dist/styles/layout/app-shell.css +23 -0
  50. package/dist/styles/layout/stepper.css +244 -0
  51. package/dist/styles/layout.css +1 -0
  52. package/dist/styles/overlays/toast.css +17 -12
  53. package/package.json +1 -1
package/CATALOG.md CHANGED
@@ -28,92 +28,100 @@ Playground paths in this file are relative to `playground/nuxt/app/pages/compone
28
28
 
29
29
  ## Which component for which task
30
30
 
31
- | Task | Use |
32
- | ------------------------------------------------------------ | ------------------------------------------------------------------------- |
33
- | Form with validation, dirty state and server errors | `useForm` + `Form` + `FormField` + field components |
34
- | One labelled field with error, hint and required marker | `FormField` |
35
- | Map a server error (409, 422) to fields | `useForm` option `submitError`, `form.setErrors`, `form.setIssues` |
36
- | Form as a full page with sticky save footer | `FormPage` |
37
- | Warn before the user leaves with unsaved changes | `useDirtyGuard` (or `FormPage`, it has `guard`) |
38
- | Floating "unsaved changes" bar | `SaveBar` |
39
- | Single line text | `Input` |
40
- | Multi line text | `Textarea` |
41
- | Rich text (bold, lists, links) | `RichTextEditor` (group `editor`) |
42
- | Password with strength meter and generator | `PasswordInput` |
43
- | Number with stepper, locale format | `NumberInput` |
44
- | Money or unit prefix and suffix around an input | `InputGroup` + `InputAddon` |
45
- | One choice from a short list (5 or fewer) | `RadioGroup` or `SegmentedControl` |
46
- | One choice from a longer list, no search | `Select` |
47
- | Searchable select, async search, multi select, create option | `Combobox` |
48
- | Several choices as checkboxes | `CheckboxGroup` |
49
- | One yes or no | `Switch` (instant setting) or `Checkbox` (part of a form) |
50
- | Date, date and time, month | `DateInput` (native) or `DatePicker` (popover calendar, ranges) |
51
- | Inline calendar | `Calendar` |
52
- | Time of day | `TimeInput` |
53
- | Color | `ColorInput` |
54
- | Number in a range | `Slider` |
55
- | One time code, OTP | `PinInput` |
56
- | File or folder upload with drop zone | `FileInput` |
57
- | Drop files on any element | `useFileDrop` |
58
- | Confirm a destructive action | `useConfirm` |
59
- | Show a message the user must acknowledge | `useAlert` |
60
- | Ask for one text value | `usePrompt` |
61
- | Short message after an action | `toast` |
62
- | Toast for a promise (loading, success, error) | `toast.promise` |
63
- | Detail or edit panel from the side | `Drawer` (or `useDrawer().open`) |
64
- | Dialog with a form or content | `Modal` (or `useModal().open` to get the result as a promise) |
65
- | Menu opened by a button | `DropdownMenu` |
66
- | Right click menu | `ContextMenu` |
67
- | Small floating panel with content or a form | `Popover` |
68
- | Preview on hover (user card) | `HoverCard` |
69
- | Short label on hover or focus | `Tooltip` |
70
- | Global search, command menu (Cmd+K) | `CommandPalette` (the `DashboardLayout` has it with `search`) |
71
- | Small table, simple sort | `Table` (+ `useTableSort` for client sort) |
72
- | Big table, many rows, editing, Excel-like | `DataGrid` (+ `spreadsheet` prop for Excel-like editing) |
73
- | Whole list page: search, filters, table, pagination | `ListPage` |
74
- | Page numbers and page size | `Pagination` |
75
- | Bulk actions bar for selected rows | `SelectionBar` |
76
- | Filter chips, active filters | `FilterPills` |
77
- | Tags, chips, removable labels | `Tag` |
78
- | Status label, counter, dot | `Badge` |
79
- | User picture or initials; stack of users | `Avatar`; `AvatarGroup` |
80
- | Key figure with delta and trend (KPI) | `Stat` |
81
- | Label and value pairs (details) | `DescriptionList` |
82
- | Event history, activity feed | `Timeline` |
83
- | Hierarchy, folders, drag to reorder | `Tree` |
84
- | Charts (line, bar, doughnut) | `ChartPanel` + `LineChart` / `BarChart` / `DoughnutChart` (group `chart`) |
85
- | Tabs | `Tabs` |
86
- | Collapsible sections, FAQ | `Accordion` |
87
- | Container with title and actions | `Card` |
88
- | Page title, description, breadcrumbs, actions | `PageHeader` (or a page template) |
89
- | Breadcrumbs only | `Breadcrumbs` |
90
- | Dashboard layout with sidebar, search, account and settings | `DashboardLayout` (or the Nuxt layout `k-dashboard`) |
91
- | Custom app frame with your own sidebar | `AppShell` + `Sidebar` + `SidebarNav` |
92
- | Login, sign up, reset password page | `AuthLayout` (or the Nuxt layout `k-auth`) |
93
- | Settings in a modal (account, appearance, your sections) | `SettingsModal` (the `DashboardLayout` embeds it) |
94
- | Settings as a page with sections | `SettingsPage` + `SettingsSection` + `SettingsGroup` |
95
- | Theme and preset choice | `AppearanceSettings`, `ThemeSwitch`, `useTheme`, `usePreset` |
96
- | Detail page of one record with tabs and aside | `DetailPage` |
97
- | Overview page with stats | `DashboardPage` |
98
- | First run screen with steps | `EmptyPage` |
99
- | Error page, 404 page | `ErrorPage`, `NotFoundPage` |
100
- | Empty state inside a card or list | `EmptyState` |
101
- | Loading placeholder for content | `Skeleton` |
102
- | Spinner; spinner that fills its container | `Spinner`; `Spinner block` |
103
- | Cover an area while it loads | `LoadingOverlay` |
104
- | Global loading bar or blocking screen | `useLoading` / `withLoading` (needs `OverlayHost`) |
105
- | Loading flag for one button or form | `useLoadingState`, or `loading` prop of `Button` |
106
- | Progress of a task | `Progress` (bar) or `ProgressRing` |
107
- | Value in a known range (quota, score) | `Meter` |
108
- | Inline message (info, warning, error) | `Alert` |
109
- | Copy text to the clipboard | `CopyButton` or `useCopy` |
110
- | Keyboard shortcut handler; show a shortcut | `useHotkey`; `Kbd` |
111
- | Row or column layout with gap; responsive grid | `Stack`; `Grid` |
112
- | Line or labelled divider; section heading with actions | `Separator` |
113
- | Group of buttons or tools with arrow key navigation | `Toolbar` |
114
- | Text for screen readers only | `VisuallyHidden` |
115
- | Translations of the component texts | `useLocale` (languages: en, it, de) |
116
- | Custom icons | `createIcons`, `provideIcons`, Nuxt option `k.icons` |
31
+ | Task | Use |
32
+ | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
33
+ | Form with validation, dirty state and server errors | `useForm` + `Form` + `FormField` + field components |
34
+ | One labelled field with error, hint and required marker | `FormField` |
35
+ | Map a server error (409, 422) to fields | `useForm` option `submitError`, `form.setErrors`, `form.setIssues` |
36
+ | Form as a full page with sticky save footer | `FormPage` |
37
+ | Warn before the user leaves with unsaved changes | `useDirtyGuard` (or `FormPage`, it has `guard`) |
38
+ | Floating "unsaved changes" bar | `SaveBar` |
39
+ | Single line text | `Input` |
40
+ | Multi line text | `Textarea` |
41
+ | Rich text (bold, lists, links) | `RichTextEditor` (group `editor`) |
42
+ | Password with strength meter and generator | `PasswordInput` |
43
+ | Number with stepper, locale format | `NumberInput` |
44
+ | Money or unit prefix and suffix around an input | `InputGroup` + `InputAddon` |
45
+ | One choice from a short list (5 or fewer) | `RadioGroup` or `SegmentedControl` |
46
+ | One choice from a longer list, no search | `Select` |
47
+ | Searchable select, async search, multi select, create option | `Combobox` |
48
+ | Create new values with a format or rule (tags, codes) | `Combobox` with `creatable`, `createTransform`, `createValidate` |
49
+ | Several choices as checkboxes | `CheckboxGroup` |
50
+ | One yes or no | `Switch` (instant setting) or `Checkbox` (part of a form) |
51
+ | Date, date and time, month | `DateInput` (native) or `DatePicker` (popover calendar, ranges) |
52
+ | Inline calendar | `Calendar` |
53
+ | Time of day | `TimeInput` |
54
+ | Color | `ColorInput` |
55
+ | Number in a range | `Slider` |
56
+ | One time code, OTP | `PinInput` |
57
+ | File or folder upload with drop zone | `FileInput` |
58
+ | Drop files on any element | `useFileDrop` |
59
+ | `useSortable` | Reorder any small list by pointer drag (live, Escape cancels) and Alt with the arrow keys, with an announcement. `TagList` uses it. | `useSortable(containerRef, { items, onMove(items, move), orientation, disabled, handle, canMove, label, movedText })` returns `{ itemProps(index), move(from, to), canMove, dragging, announcement }`. Bind `itemProps(index)` on each item and render `announcement` in a live region. | `data/tag-list.vue` |
60
+ | Confirm a destructive action | `useConfirm` |
61
+ | Show a message the user must acknowledge | `useAlert` |
62
+ | Ask for one text value | `usePrompt` |
63
+ | Short message after an action | `toast` |
64
+ | Toast for a promise (loading, success, error) | `toast.promise` |
65
+ | Toast after saving in an open Drawer | `toast` (the stack moves beside the drawer or above its footer) |
66
+ | Detail or edit panel from the side | `Drawer` (or `useDrawer().open`) |
67
+ | Dialog with a form or content | `Modal` (or `useModal().open` to get the result as a promise) |
68
+ | Menu opened by a button | `DropdownMenu` |
69
+ | Right click menu | `ContextMenu` |
70
+ | Small floating panel with content or a form | `Popover` |
71
+ | Preview on hover (user card) | `HoverCard` |
72
+ | Short label on hover or focus | `Tooltip` |
73
+ | Global search, command menu (Cmd+K) | `CommandPalette` (the `DashboardLayout` has it with `search`) |
74
+ | Small table, simple sort | `Table` (+ `useTableSort` for client sort) |
75
+ | Big table, many rows, editing, Excel-like | `DataGrid` (+ `spreadsheet` prop for Excel-like editing) |
76
+ | Several tags or statuses in one grid cell | `BadgeCell` with an array value (`max` adds a `+N` badge) |
77
+ | Whole list page: search, filters, table, pagination | `ListPage` |
78
+ | Page numbers and page size | `Pagination` |
79
+ | Bulk actions bar for selected rows | `SelectionBar` |
80
+ | Filter chips, active filters | `FilterPills` |
81
+ | Tags, chips, removable labels | `Tag` |
82
+ | Reorder chips by drag and keyboard, drop items from another panel | `TagList` (`sortable`, `removable`, `accept` + `@item-drop`) |
83
+ | Reorder any list by drag and keyboard | `useSortable` |
84
+ | Status label, counter, dot | `Badge` |
85
+ | User picture or initials; stack of users | `Avatar`; `AvatarGroup` |
86
+ | Key figure with delta and trend (KPI) | `Stat` |
87
+ | Label and value pairs (details) | `DescriptionList` |
88
+ | Event history, activity feed | `Timeline` |
89
+ | Hierarchy, folders, drag to reorder | `Tree` |
90
+ | Charts (line, bar, doughnut) | `ChartPanel` + `LineChart` / `BarChart` / `DoughnutChart` (group `chart`) |
91
+ | Tabs | `Tabs` |
92
+ | Wizard steps, step indicator (Step 2 of 4) | `Stepper` |
93
+ | Collapsible sections, FAQ | `Accordion` |
94
+ | Container with title and actions | `Card` |
95
+ | Page title, description, breadcrumbs, actions | `PageHeader` (or a page template) |
96
+ | Breadcrumbs only | `Breadcrumbs` |
97
+ | Dashboard layout with sidebar, search, account and settings | `DashboardLayout` (or the Nuxt layout `k-dashboard`) |
98
+ | Page that fills the panel height (a full height grid) | `content="fill"` or `"centered"` on `DashboardLayout` / `AppShell`, `definePageMeta({ content: 'fill' })` |
99
+ | Custom app frame with your own sidebar | `AppShell` + `Sidebar` + `SidebarNav` |
100
+ | Login, sign up, reset password page | `AuthLayout` (or the Nuxt layout `k-auth`) |
101
+ | Settings in a modal (account, appearance, your sections) | `SettingsModal` (the `DashboardLayout` embeds it) |
102
+ | Settings as a page with sections | `SettingsPage` + `SettingsSection` + `SettingsGroup` |
103
+ | Theme and preset choice | `AppearanceSettings`, `ThemeSwitch`, `useTheme`, `usePreset` |
104
+ | Detail page of one record with tabs and aside | `DetailPage` |
105
+ | Overview page with stats | `DashboardPage` |
106
+ | First run screen with steps | `EmptyPage` |
107
+ | Error page, 404 page | `ErrorPage`, `NotFoundPage` |
108
+ | Empty state inside a card or list | `EmptyState` |
109
+ | Loading placeholder for content | `Skeleton` |
110
+ | Spinner; spinner that fills its container | `Spinner`; `Spinner block` |
111
+ | Cover an area while it loads | `LoadingOverlay` |
112
+ | Global loading bar or blocking screen | `useLoading` / `withLoading` (needs `OverlayHost`) |
113
+ | Loading flag for one button or form | `useLoadingState`, or `loading` prop of `Button` |
114
+ | Progress of a task | `Progress` (bar) or `ProgressRing` |
115
+ | Value in a known range (quota, score) | `Meter` |
116
+ | Inline message (info, warning, error) | `Alert` |
117
+ | Copy text to the clipboard | `CopyButton` or `useCopy` |
118
+ | Keyboard shortcut handler; show a shortcut | `useHotkey`; `Kbd` |
119
+ | Row or column layout with gap; responsive grid | `Stack`; `Grid` |
120
+ | Line or labelled divider; section heading with actions | `Separator` |
121
+ | Group of buttons or tools with arrow key navigation | `Toolbar` |
122
+ | Text for screen readers only | `VisuallyHidden` |
123
+ | Translations of the component texts | `useLocale` (languages: en, it, de) |
124
+ | Custom icons | `createIcons`, `provideIcons`, Nuxt option `k.icons` |
117
125
 
118
126
  ## Core
119
127
 
@@ -137,86 +145,88 @@ Playground paths in this file are relative to `playground/nuxt/app/pages/compone
137
145
 
138
146
  All field components work inside `FormField` and take `invalid`, `disabled`, `readonly`, `required` and `size`. They use `v-model`.
139
147
 
140
- | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
141
- | ------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
142
- | `Checkbox` | One boolean, or one value in an array model. Use `Switch` for an instant setting. | Model: boolean or array. Props: `label`, `description`, `value`, `indeterminate`. Slots: default, `description`. | `forms/checkbox.vue` |
143
- | `CheckboxGroup` | Several choices as checkboxes from `options`. | Model: `T[]`. Props: `options` (`label`, `value`, `description`, `disabled`, `icon`), `legend`, `orientation`, `columns`, `variant` (default, filled), `name`. | `forms/checkbox-group.vue` |
144
- | `Radio` | One radio option, used inside `RadioGroup`. | Props: `value`, `label`, `description`, `icon`. Slots: default, `description`. | `forms/radio-group.vue` |
145
- | `RadioGroup` | One choice from a short list. Use `Select` for long lists, `SegmentedControl` for a compact toggle. | Model: value or null. Props: `options`, `legend`, `orientation`, `variant` (default, card), `name`. | `forms/radio-group.vue` |
146
- | `SegmentedControl` | Compact toggle between 2 to 5 options (view mode, period). | Model: value (with `required` it is never null). Props: `options` (`label`, `value`, `icon`, `title`, `muted`), `iconOnly`, `block`, `label`. Slot: `option`. | `forms/segmented-control.vue` |
147
- | `Select` | Native styled select. Use `Combobox` when search or async options are needed. | Model: `T or null`. Props: `options` (items or groups with `label`, `value`, `disabled`), `placeholder`, `icon`. Option values can be string, number or boolean. | `forms/select.vue` |
148
- | `Combobox` | Searchable select. Local filter, async `search`, `multiple` with tags, `creatable`. | Models: `v-model`, `v-model:query`. Props: `options` (`label`, `value`, `description`, `icon`, `keywords`), `search(query, signal)`, `filter`, `multiple`, `hideTags`, `creatable`, `debounce`, `minQueryLength`, `maxSelected`, `clearable`, `loading`, `placeholder`, `emptyText`. Slots: `option`, `empty`. Events: `create`, `open`, `close`. | `forms/combobox.vue` |
149
- | `Switch` | On or off setting that applies at once. | Model: boolean. Props: `label`, `description`, `labelPosition`, `checkedIcon`, `uncheckedIcon`, `name`. Slots: default, `description`. | `forms/switch.vue` |
150
- | `NumberInput` | Locale aware number with stepper, min, max, step. | Model: number or null. Props: `min`, `max`, `step`, `largeStep`, `locale`, `formatOptions` (currency, percent), `stepper`, `wheel`, `align`, `icon`, `placeholder`. | `forms/number-input.vue` |
151
- | `PasswordInput` | Password with show or hide, optional generator, copy and strength meter. | Model: string. Props: `generate` (true or a function), `copy`, `strength`, `minLength`, `autocomplete`. Event: `generate`. | `forms/password-input.vue` |
152
- | `PinInput` | One time code or PIN in separate cells. | Model: string. Props: `length`, `mode` (numeric, alphanumeric, alphabetic), `mask`, `uppercase`, `separatorAfter`, `autocomplete`. Event: `complete(value)`. | `forms/pin-input.vue` |
153
- | `InputGroup` | Join an input with addons or buttons on its sides. | Props: `label`, `size`, `block`. Slot: default (inputs, `InputAddon`, `Button`). | `forms/input-group.vue` |
154
- | `InputAddon` | Static text or icon (currency, domain, unit) inside an `InputGroup`. | Props: `label`, `icon`, `size`. Slot: default. | `forms/input-group.vue` |
155
- | `DateInput` | Native date, datetime-local, month or week input. Use `DatePicker` for a calendar popover or ranges. | Model: ISO string or null. Props: `type`, `min`, `max`, `step`, `clearable`. | `forms/date-input.vue` |
156
- | `DatePicker` | Input with a calendar popover. Single date or `range`. | Model: ISO string, range object (`start`, `end`) or null. Props: `range`, `min`, `max`, `isDateDisabled`, `locale`, `weekStartsOn`, `format`, `closeOnSelect`, `clearable`. Slot: `footer`. | `forms/date-picker.vue` |
157
- | `Calendar` | Inline calendar. Use it for availability views, or as a building block. | Models: `v-model` (date or range), `v-model:month`. Props: `range`, `min`, `max`, `isDateDisabled`, `locale`, `weekStartsOn`, `dayText(iso)`. Slots: `day`, `footer`. Event: `select`. | `forms/calendar.vue` |
158
- | `TimeInput` | Time of day (HH:MM, optional seconds). | Model: string or null. Props: `min`, `max`, `step`, `seconds`, `clearable`. | `forms/time-input.vue` |
159
- | `ColorInput` | Color text field with picker and swatches. | Model: hex string or null. Props: `swatches` (strings or `{ value, label }`), `placeholder`, `invalidText`. | `forms/color-input.vue` |
160
- | `Slider` | Number in a range with drag handle. | Model: number. Props: `min`, `max`, `step`, `bubble` (true, always), `marks`, `format(value)`, `label`. Event: `change` (on release). | `forms/slider.vue` |
161
- | `FileInput` | Drop zone and file picker. Validates type, size and count. Supports folders and previews. | Model: `File`, `File[]` or null. Props: `accept`, `acceptMode`, `maxSize`, `maxFiles`, `multiple`, `directory`, `directoryAction`, `previews`, `list`, `loading`, `capture`, `title`, `dropText`, `hint`. Slots: `title`, `hint`, `actions`. Events: `add`, `remove`, `invalid`, `reject`. | `forms/file-input.vue` |
148
+ | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
149
+ | ------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- |
150
+ | `Checkbox` | One boolean, or one value in an array model. Use `Switch` for an instant setting. | Model: boolean or array. Props: `label`, `description`, `value`, `indeterminate`. Slots: default, `description`. | `forms/checkbox.vue` |
151
+ | `CheckboxGroup` | Several choices as checkboxes from `options`. | Model: `T[]`. Props: `options` (`label`, `value`, `description`, `disabled`, `icon`), `legend`, `orientation`, `columns`, `variant` (default, filled), `name`. | `forms/checkbox-group.vue` |
152
+ | `Radio` | One radio option, used inside `RadioGroup`. | Props: `value`, `label`, `description`, `icon`. Slots: default, `description`. | `forms/radio-group.vue` |
153
+ | `RadioGroup` | One choice from a short list. Use `Select` for long lists, `SegmentedControl` for a compact toggle. | Model: value or null. Props: `options`, `legend`, `orientation`, `variant` (default, card), `name`. | `forms/radio-group.vue` |
154
+ | `SegmentedControl` | Compact toggle between 2 to 5 options (view mode, period). | Model: value (with `required` it is never null). Props: `options` (`label`, `value`, `icon`, `title`, `muted`), `iconOnly`, `block`, `label`. Slot: `option`. | `forms/segmented-control.vue` |
155
+ | `Select` | Native styled select. Use `Combobox` when search or async options are needed. | Model: `T or null`. Props: `options` (items or groups with `label`, `value`, `disabled`), `placeholder`, `icon`. Option values can be string, number or boolean. | `forms/select.vue` |
156
+ | `Combobox` | Searchable select. Local filter, async `search`, `multiple` with tags, `creatable`. | Models: `v-model`, `v-model:query`. Props: `options` (`label`, `value`, `description`, `icon`, `keywords`), `search(query, signal)`, `filter`, `multiple`, `hideTags`, `creatable`, `createTransform`, `createValidate` (a returned string is the inline error), `debounce`, `minQueryLength`, `maxSelected`, `clearable`, `loading`, `placeholder`, `emptyText`. Slots: `option`, `empty`. Events: `create`, `open`, `close`. | `forms/combobox.vue` |
157
+ | `Switch` | On or off setting that applies at once. | Model: boolean. Props: `label`, `description`, `labelPosition`, `checkedIcon`, `uncheckedIcon`, `name`. Slots: default, `description`. | `forms/switch.vue` |
158
+ | `NumberInput` | Locale aware number with stepper, min, max, step. | Model: number or null. Props: `min`, `max`, `step`, `largeStep`, `locale`, `formatOptions` (currency, percent), `stepper`, `wheel`, `align`, `icon`, `placeholder`. | `forms/number-input.vue` |
159
+ | `PasswordInput` | Password with show or hide, optional generator, copy and strength meter. | Model: string. Props: `generate` (true or a function), `copy`, `strength`, `minLength`, `autocomplete`. Event: `generate`. | `forms/password-input.vue` |
160
+ | `PinInput` | One time code or PIN in separate cells. | Model: string. Props: `length`, `mode` (numeric, alphanumeric, alphabetic), `mask`, `uppercase`, `separatorAfter`, `autocomplete`. Event: `complete(value)`. | `forms/pin-input.vue` |
161
+ | `InputGroup` | Join an input with addons or buttons on its sides. | Props: `label`, `size`, `block`. Slot: default (inputs, `InputAddon`, `Button`). | `forms/input-group.vue` |
162
+ | `InputAddon` | Static text or icon (currency, domain, unit) inside an `InputGroup`. | Props: `label`, `icon`, `size`. Slot: default. | `forms/input-group.vue` |
163
+ | `DateInput` | Native date, datetime-local, month or week input. Use `DatePicker` for a calendar popover or ranges. | Model: ISO string or null. Props: `type`, `min`, `max`, `step`, `clearable`. | `forms/date-input.vue` |
164
+ | `DatePicker` | Input with a calendar popover. Single date or `range`. | Model: ISO string, range object (`start`, `end`) or null. Props: `range`, `min`, `max`, `isDateDisabled`, `locale`, `weekStartsOn`, `format`, `closeOnSelect`, `clearable`. Slot: `footer`. | `forms/date-picker.vue` |
165
+ | `Calendar` | Inline calendar. Use it for availability views, or as a building block. | Models: `v-model` (date or range), `v-model:month`. Props: `range`, `min`, `max`, `isDateDisabled`, `locale`, `weekStartsOn`, `dayText(iso)`. Slots: `day`, `footer`. Event: `select`. | `forms/calendar.vue` |
166
+ | `TimeInput` | Time of day (HH:MM, optional seconds). | Model: string or null. Props: `min`, `max`, `step`, `seconds`, `clearable`. | `forms/time-input.vue` |
167
+ | `ColorInput` | Color text field with picker and swatches. | Model: hex string or null. Props: `swatches` (strings or `{ value, label }`), `placeholder`, `invalidText`. | `forms/color-input.vue` |
168
+ | `Slider` | Number in a range with drag handle. | Model: number. Props: `min`, `max`, `step`, `bubble` (true, always), `marks`, `format(value)`, `label`. Event: `change` (on release). | `forms/slider.vue` |
169
+ | `FileInput` | Drop zone and file picker. Validates type, size and count. Supports folders and previews. | Model: `File`, `File[]` or null. Props: `accept`, `acceptMode`, `maxSize`, `maxFiles`, `multiple`, `directory`, `directoryAction`, `previews`, `list`, `loading`, `capture`, `title`, `dropText`, `hint`. Slots: `title`, `hint`, `actions`. Events: `add`, `remove`, `invalid`, `reject`. | `forms/file-input.vue` |
162
170
 
163
171
  ## Overlays
164
172
 
165
173
  Mount `OverlayHost` once for the imperative hooks (see [Composables](#composables)).
166
174
 
167
- | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
168
- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
169
- | `Modal` | Centered dialog for forms and content. Use `Drawer` for a side panel, `useConfirm` for a yes or no question. | Model: `v-model:open`. Props: `title`, `description`, `size` (sm to xl, full, fit, fullscreen), `width`, `minHeight`, `dismissible`, `hideClose`, `sheet`, `flush`, `loading`, `beforeClose(reason)`. Slots: default, `header`, `footer`, `title-trailing`. Events: `open`, `close`, `afterLeave`. | `overlays/modal.vue` |
170
- | `Drawer` | Panel from the side or bottom for details and edit forms. Use `Modal` for short focused dialogs. | Model: `v-model:open`. Props: `title`, `description`, `side` (left, right, bottom), `size` (sm to xl, full), `dismissible`, `hideClose`, `flush`, `loading`, `beforeClose(reason)`. Slots like `Modal`. Events: `open`, `close`, `afterLeave`. | `overlays/drawer.vue` |
171
- | `ConfirmDialog` | Declarative confirm dialog. Prefer `useConfirm()`. Use this one only when the dialog state lives in the template. | Model: `v-model:open`. Props: `title`, `description`, `confirmLabel`, `cancelLabel`, `tone`, `icon`, `hideCancel`, `onConfirm`. Events: `resolve(confirmed)`, `cancel`, `afterLeave`. | `overlays/confirm-dialog.vue` |
172
- | `ConfirmHost` | Renders the dialogs of `useConfirm`, `useAlert`, `usePrompt`. `OverlayHost` includes it. Do not mount it alone. | None. | - |
173
- | `OverlayHost` | One mount point for toasts, confirm dialogs, programmatic modals and loading indicators. | Props: `toaster` (true or options), `confirm`, `modals`, `loading` (true or `{ bar, delay, label }`). | `overlays/hooks.vue` |
174
- | `Toaster` | Renders toasts. `OverlayHost` includes it. Use it directly only for custom options. | Props: `position`, `max`, `duration`, `gap`, `expand`, `progress`, `hotkey`. | `overlays/toast.vue` |
175
- | `DropdownMenu` | Menu opened by its trigger. Items can have icons, shortcuts, checkboxes, radios, sub menus and links. | Model: `v-model:open`. Props: `items` (`label`, `icon`, `to`, `href`, `tone: danger`, `shortcut`, `disabled`, `children`, `onSelect`; also `type`: checkbox, radio, label, separator), `placement`, `offset`, `matchTriggerWidth`, `minWidth`. Slot: default (the trigger). Event: `select`. | `overlays/dropdown-menu.vue` |
176
- | `ContextMenu` | Menu on right click of the wrapped area. | Model: `v-model:open`. Props: `items` (same as `DropdownMenu`), `disabled`. Slot: default (the area). Event: `select`. | `overlays/context-menu.vue` |
177
- | `Popover` | Floating panel with any content (a form, filters) opened by its trigger. Use `DropdownMenu` for a list of actions. | Model: `v-model:open`. Props: `placement`, `offset`, `arrow`, `label`, `initialFocus`. Slots: default (the trigger), `content`. | `overlays/popover.vue` |
178
- | `HoverCard` | Rich preview on hover or focus (user card, link preview). Use `Tooltip` for plain text. | Model: `v-model:open`. Props: `placement`, `openDelay`, `closeDelay`, `arrow`, `disabled`. Slots: default (trigger), `content`. | `overlays/hover-card.vue` |
179
- | `Tooltip` | Short text on hover or focus. Optional shortcut. | Props: `text`, `placement`, `openDelay`, `closeDelay`, `arrow`, `shortcut`, `disabled`. Slots: default (trigger), `content`. | `overlays/tooltip.vue` |
180
- | `CommandPalette` | Search and command dialog (Cmd+K) with groups, recent items, async search and typed item data. | Models: `v-model:open`, `v-model:query`. Props: `groups` (items with `id`, `label`, `description`, `icon`, `shortcut`, `keywords`, `to`, `data`, `onSelect`), `search(query, signal)`, `shortcut`, `trigger`, `recentKey`, `emptyText`, `notice`. Slots: `item`, `empty`, `group-label`, `after-results`. Events: `select`, `open`, `close`. | `overlays/command-palette.vue` |
175
+ | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
176
+ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
177
+ | `Modal` | Centered dialog for forms and content. Use `Drawer` for a side panel, `useConfirm` for a yes or no question. | Model: `v-model:open`. Props: `title`, `description`, `size` (sm to xl, full, fit, fullscreen), `width`, `minHeight`, `dismissible`, `hideClose`, `sheet`, `flush`, `loading`, `beforeClose(reason)`. Slots: default, `header`, `footer`, `title-trailing`. Events: `open`, `close`, `afterLeave`. | `overlays/modal.vue` |
178
+ | `Drawer` | Panel from the side or bottom for details and edit forms. Use `Modal` for short focused dialogs. | Model: `v-model:open`. Props: `title`, `description`, `side` (left, right, bottom), `size` (sm to xl, full), `dismissible`, `hideClose`, `flush`, `loading`, `beforeClose(reason)`. Slots like `Modal`. Events: `open`, `close`, `afterLeave`. | `overlays/drawer.vue` |
179
+ | `ConfirmDialog` | Declarative confirm dialog. Prefer `useConfirm()`. Use this one only when the dialog state lives in the template. | Model: `v-model:open`. Props: `title`, `description`, `confirmLabel`, `cancelLabel`, `tone`, `icon`, `hideCancel`, `onConfirm`. Events: `resolve(confirmed)`, `cancel`, `afterLeave`. | `overlays/confirm-dialog.vue` |
180
+ | `ConfirmHost` | Renders the dialogs of `useConfirm`, `useAlert`, `usePrompt`. `OverlayHost` includes it. Do not mount it alone. | None. | - |
181
+ | `OverlayHost` | One mount point for toasts, confirm dialogs, programmatic modals and loading indicators. | Props: `toaster` (true or options), `confirm`, `modals`, `loading` (true or `{ bar, delay, label }`). | `overlays/hooks.vue` |
182
+ | `Toaster` | Renders toasts. `OverlayHost` includes it. Use it directly only for custom options. The stack moves out of the way of an open side Drawer (beside it, or above its footer). | Props: `position`, `max`, `duration`, `gap`, `expand`, `progress`, `hotkey`. | `overlays/toast.vue` |
183
+ | `DropdownMenu` | Menu opened by its trigger. Items can have icons, shortcuts, checkboxes, radios, sub menus and links. | Model: `v-model:open`. Props: `items` (`label`, `icon`, `to`, `href`, `tone: danger`, `shortcut`, `disabled`, `children`, `onSelect`; also `type`: checkbox, radio, label, separator), `placement`, `offset`, `matchTriggerWidth`, `minWidth`. Slot: default (the trigger). Event: `select`. | `overlays/dropdown-menu.vue` |
184
+ | `ContextMenu` | Menu on right click of the wrapped area. | Model: `v-model:open`. Props: `items` (same as `DropdownMenu`), `disabled`. Slot: default (the area). Event: `select`. | `overlays/context-menu.vue` |
185
+ | `Popover` | Floating panel with any content (a form, filters) opened by its trigger. Use `DropdownMenu` for a list of actions. | Model: `v-model:open`. Props: `placement`, `offset`, `arrow`, `label`, `initialFocus`. Slots: default (the trigger), `content`. | `overlays/popover.vue` |
186
+ | `HoverCard` | Rich preview on hover or focus (user card, link preview). Use `Tooltip` for plain text. | Model: `v-model:open`. Props: `placement`, `openDelay`, `closeDelay`, `arrow`, `disabled`. Slots: default (trigger), `content`. | `overlays/hover-card.vue` |
187
+ | `Tooltip` | Short text on hover or focus. Optional shortcut. | Props: `text`, `placement`, `openDelay`, `closeDelay`, `arrow`, `shortcut`, `disabled`. Slots: default (trigger), `content`. | `overlays/tooltip.vue` |
188
+ | `CommandPalette` | Search and command dialog (Cmd+K) with groups, recent items, async search and typed item data. | Models: `v-model:open`, `v-model:query`. Props: `groups` (items with `id`, `label`, `description`, `icon`, `shortcut`, `keywords`, `to`, `data`, `onSelect`), `search(query, signal)`, `shortcut`, `trigger`, `recentKey`, `emptyText`, `notice`. Slots: `item`, `empty`, `group-label`, `after-results`. Events: `select`, `open`, `close`. | `overlays/command-palette.vue` |
181
189
 
182
190
  ## Data
183
191
 
184
- | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
185
- | ----------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
186
- | `Table` | Small to medium table with sort, selection, links and loading rows. For thousands of rows or editing use `DataGrid`. | Models: `v-model:sort` (`{ key, direction }`), `v-model:selected` (row keys). Props: `rows`, `columns` (`key`, `label`, `align`, `width`, `numeric`, `sortable`, `value`, `format`), `rowKey`, `selectable`, `rowTo`, `loading`, `emptyText`, `density`, `stickyHeader`, `maxHeight`, `bordered`, `caption`. Slots: `cell-<key>`, `header-<key>`, `empty`. Event: `rowClick`. | `data/table.vue` |
187
- | `Pagination` | Page buttons, page size select and summary. Client or server paging. | Models: `v-model:page`, `v-model:pageSize`. Props: `total`, `pageSizes`, `showEdges`, `showJump`, `compact`, `loading`, `showSummary`. Slot: `summary`. | `data/pagination.vue` |
188
- | `SelectionBar` | Shows the selected count and bulk actions for a list or table. | Props: `count`, `total`, `placement` (inline, sticky, floating), `onSelectAll`, `onClear`. Slots: `actions`, `count`. With `count` 0 it renders nothing visible. | `data/selection-bar.vue` |
189
- | `FilterPills` | Quick filters as pills: single, multiple, menu or panel pills, removable active filters. | Model: value, array (`multiple`) or null. Props: `options` (`value`, `label`, `valueLabel`, `count`, `icon`, `menu`, `panel`, `removable`), `multiple`, `required`, `clearable`, `size`. Slots: `pill`, `panel-<value>`. Events: `select`, `remove`. | `data/filter-pills.vue` |
190
- | `FilterPill` | One pill button. Use it alone for a custom filter trigger. `FilterPills` uses it. | Props: `label`, `valueLabel`, `icon`, `count`, `active`, `pressed`, `caret`, `size`, `disabled`. Slot: default. | `data/filter-pills.vue` |
191
- | `Tag` | Chip or label, optionally removable. Use `Badge` for a status. | Props: `label`, `tone`, `size`, `icon`, `removable`, `removeLabel`, `disabled`. Slot: default. Event: `remove`. | `data/tag.vue` |
192
- | `Badge` | Status label, counter or dot. Not interactive. | Props: `label` (string or number), `tone`, `variant` (soft, solid, outline), `size`, `dot`, `pulse`, `icon`. Slot: default. | `data/badge.vue` |
193
- | `Avatar` | User picture with initials fallback and status dot. | Props: `src`, `name`, `alt`, `size` (xs to xl), `shape` (circle, square), `status` (online, away, busy, offline), `decorative`. Slot: `fallback`. | `data/avatar.vue` |
194
- | `AvatarGroup` | Overlapping stack of avatars with "+N". | Props: `items` (`src`, `name`, `alt`), `max`, `size`, `shape`, `moreLabel`. | `data/avatar.vue` |
195
- | `Stat` | Key figure (KPI) with unit, delta, trend, hint and optional sparkline. Can be a link. | Props: `label`, `value`, `unit`, `delta`, `trend` (up, down, flat), `invert` (down is good), `hint`, `icon`, `loading`, `to`, `href`, `plain`. Slots: `label`, `value`, `icon`, `sparkline`, `footer`. | `data/stat.vue` |
196
- | `DescriptionList` | Label and value pairs for a record. Use it on detail views. | Props: `items` (`key`, `label`, `value`, `hint`), `layout` (stacked, inline, grid), `columns`, `divided`, `emptyText`. Slots: `term`, `value`, `value-<key>`. | `data/description-list.vue` |
197
- | `Timeline` | Vertical list of events or activity. | Props: `items` (`title`, `description`, `time`, `datetime`, `icon`, `tone`), `compact`. Slot: `item`. | `data/timeline.vue` |
198
- | `Tree` | Expandable hierarchy with selection, drag to reorder and nesting. | Models: `v-model:expanded`, `v-model:selected`. Props: `nodes` (`id`, `label`, `description`, `meta`, `icon`, `children`, `disabled`), `selectable`, `reorderable`, `nestable`, `canDrop`, `size`, `checkmark`, `emptyText`. Slots: `label`, `meta`, `empty`. Events: `select`, `move`. | `data/tree.vue` |
192
+ | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
193
+ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
194
+ | `Table` | Small to medium table with sort, selection, links and loading rows. For thousands of rows or editing use `DataGrid`. | Models: `v-model:sort` (`{ key, direction }`), `v-model:selected` (row keys). Props: `rows`, `columns` (`key`, `label`, `align`, `width`, `numeric`, `sortable`, `value`, `format`), `rowKey`, `selectable`, `rowTo`, `loading`, `emptyText`, `density`, `stickyHeader`, `maxHeight`, `bordered`, `caption`. Slots: `cell-<key>`, `header-<key>`, `empty`. Event: `rowClick`. | `data/table.vue` |
195
+ | `Pagination` | Page buttons, page size select and summary. Client or server paging. | Models: `v-model:page`, `v-model:pageSize`. Props: `total`, `pageSizes`, `showEdges`, `showJump`, `compact`, `loading`, `showSummary`. Slot: `summary`. | `data/pagination.vue` |
196
+ | `SelectionBar` | Shows the selected count and bulk actions for a list or table. | Props: `count`, `total`, `placement` (inline, sticky, floating), `onSelectAll`, `onClear`. Slots: `actions`, `count`. With `count` 0 it renders nothing visible. | `data/selection-bar.vue` |
197
+ | `FilterPills` | Quick filters as pills: single, multiple, menu or panel pills, removable active filters. | Model: value, array (`multiple`) or null. Props: `options` (`value`, `label`, `valueLabel`, `count`, `icon`, `menu`, `panel`, `removable`), `multiple`, `required`, `clearable`, `size`. Slots: `pill`, `panel-<value>`. Events: `select`, `remove`. | `data/filter-pills.vue` |
198
+ | `FilterPill` | One pill button. Use it alone for a custom filter trigger. `FilterPills` uses it. | Props: `label`, `valueLabel`, `icon`, `count`, `active`, `pressed`, `caret`, `size`, `disabled`. Slot: default. | `data/filter-pills.vue` |
199
+ | `Tag` | Chip or label, optionally removable. Use `Badge` for a status. | Props: `label`, `tone`, `size`, `icon`, `removable`, `removeLabel`, `removeTabindex`, `disabled`. Slot: default. Event: `remove`. | `data/tag.vue` |
200
+ | `TagList` | A list of `Tag` chips, reorderable by drag, by keyboard (Alt with an arrow key) or move buttons, removable, and a drop target for items dragged from another panel (columns of an export). | Model: `v-model` (`TagListItem[]`: `value`, `label`, `tone`, `icon`, `removable`, `disabled`). Props: `label`, `sortable`, `removable`, `moveButtons`, `accept` (MIME types or a function), `dropEffect`, `tone`, `size`, `disabled`, `emptyText`, `removeLabel`. Slots: `item`, `empty`. Events: `remove`, `move`, `itemDrop` (`{ index, dataTransfer, event }`). | `data/tag-list.vue` |
201
+ | `Badge` | Status label, counter or dot. Not interactive. | Props: `label` (string or number), `tone`, `variant` (soft, solid, outline), `size`, `dot`, `pulse`, `icon`. Slot: default. | `data/badge.vue` |
202
+ | `Avatar` | User picture with initials fallback and status dot. | Props: `src`, `name`, `alt`, `size` (xs to xl), `shape` (circle, square), `status` (online, away, busy, offline), `decorative`. Slot: `fallback`. | `data/avatar.vue` |
203
+ | `AvatarGroup` | Overlapping stack of avatars with "+N". | Props: `items` (`src`, `name`, `alt`), `max`, `size`, `shape`, `moreLabel`. | `data/avatar.vue` |
204
+ | `Stat` | Key figure (KPI) with unit, delta, trend, hint and optional sparkline. Can be a link. | Props: `label`, `value`, `unit`, `delta`, `trend` (up, down, flat), `invert` (down is good), `hint`, `icon`, `loading`, `to`, `href`, `plain`. Slots: `label`, `value`, `icon`, `sparkline`, `footer`. | `data/stat.vue` |
205
+ | `DescriptionList` | Label and value pairs for a record. Use it on detail views. | Props: `items` (`key`, `label`, `value`, `hint`), `layout` (stacked, inline, grid), `columns`, `divided`, `emptyText`. Slots: `term`, `value`, `value-<key>`. | `data/description-list.vue` |
206
+ | `Timeline` | Vertical list of events or activity. | Props: `items` (`title`, `description`, `time`, `datetime`, `icon`, `tone`), `compact`. Slot: `item`. | `data/timeline.vue` |
207
+ | `Tree` | Expandable hierarchy with selection, drag to reorder and nesting. | Models: `v-model:expanded`, `v-model:selected`. Props: `nodes` (`id`, `label`, `description`, `meta`, `icon`, `children`, `disabled`), `selectable`, `reorderable`, `nestable`, `canDrop`, `size`, `checkmark`, `emptyText`. Slots: `label`, `meta`, `empty`. Events: `select`, `move`. | `data/tree.vue` |
199
208
 
200
209
  ## Layout
201
210
 
202
- | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
203
- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
204
- | `Card` | Container with optional title, description, icon, actions and footer. Can be a link or a selectable button. | Props: `title`, `description`, `icon`, `variant` (raised, outline, subtle), `padding`, `as`, `to`, `href`, `selected`, `disabled`, `animated`. Slots: default, `header`, `title`, `description`, `icon`, `actions`, `footer`. | `layout/card.vue` |
205
- | `PageHeader` | Page title with description, breadcrumbs, badge and actions. The page templates include it. | Props: `title`, `description`, `icon`, `breadcrumbs`, `level`, `bordered`, `align`, `truncate`. Slots: `actions`, `badge`, `description`, `title`, `icon`, `breadcrumbs`. | `layout/page-header.vue` |
206
- | `Breadcrumbs` | Path navigation. | Props: `items` (`label`, `to`, `href`, `icon`), `separator`, `linkLast`, `ancestors`. Slot: `item`. | `layout/breadcrumbs.vue` |
207
- | `Tabs` | Tabs with panels, badges and dots. Segmented or underline. | Model: `v-model` (active value). Props: `items` (`value`, `label`, `icon`, `badge`, `badgeTone`, `dot`, `disabled`), `variant`, `size`, `lazy`, `fill`, `stretch`, `inset`. Slots: `panel-<value>`, `panel`. | `layout/tabs.vue` |
208
- | `Accordion` | Collapsible sections. | Model: `v-model` (open value or values). Props: `items` (`value`, `title`, `description`, `content`, `icon`), `multiple`, `collapsible`, `variant`. Slots: default, `title`. | `layout/accordion.vue` |
209
- | `Separator` | Divider, labelled divider, or section heading with description and actions. | Props: `orientation`, `variant` (label, heading), `label`, `description`, `align`, `level`. Slots: default, `description`, `actions`. | `layout/separator.vue` |
210
- | `Stack` | Flex row or column with gap. | Props: `direction`, `gap` (none to xl), `align`, `justify`, `wrap`, `responsive`, `as`. | `layout/stack.vue` |
211
- | `Grid` | Responsive CSS grid. | Props: `columns` (number or breakpoints), `minItemWidth` (auto fit), `gap`, `as`. | `layout/grid.vue` |
212
- | `Toolbar` | Group of controls with arrow key navigation (ARIA toolbar). | Props: `label`, `orientation`, `roving`, `bordered`. | `layout/toolbar.vue` |
213
- | `CopyButton` | Button that copies a value and shows "copied". | Props: `value`, `label`, `copiedLabel`, `showLabel`, `size`, `variant`, `tone`, `resetAfter`. Event: `copy(success)`. | `layout/copy-button.vue` |
214
- | `ThemeSwitch` | Light, dark and system switch. | Props: `variant` (segmented, icon), `size`, `showLabels`. | `layout/theme-switch.vue` |
215
- | `NavLink` | One navigation link with icon, badge and active state. | Props: `label`, `to`, `href`, `icon`, `badge`, `active`, `match` (exact, prefix), `external`, `disabled`. Slots: default, `icon`. | `layout/nav-link.vue` |
216
- | `AppShell` | App frame: sidebar, topbar, mobile menu, collapse, skip link. Use it for a custom frame. Use `DashboardLayout` for the ready one. | Models: `v-model:collapsed`, `v-model:open`. Props: `variant` (inset, sidebar, floating), `fluid`, `fill`, `topbar`, `storageKey`, `shortcut`. Slots: default, `sidebar`, `topbar`, `overlays`. | `layout/app-shell.vue` |
217
- | `Sidebar` | Sidebar content with header, collapse button and footer. Goes in the `sidebar` slot of `AppShell`. | Props: `label`, `collapsible`. Slots: default, `header`, `top`, `footer`. | `layout/app-shell.vue` |
218
- | `SidebarNav` | Navigation list from data, with groups and children. | Props: `items` (`NavItem[]` or `NavSection[]`: `label`, `to`, `icon`, `badge`, `children`), `currentPath`. | `layout/app-shell.vue` |
219
- | `SidebarSection` | Labelled block inside a sidebar for hand written links. | Prop: `label`. Slot: default. | `layout/app-shell.vue` |
211
+ | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
212
+ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
213
+ | `Card` | Container with optional title, description, icon, actions and footer. Can be a link or a selectable button. | Props: `title`, `description`, `icon`, `variant` (raised, outline, subtle), `padding`, `as`, `to`, `href`, `selected`, `disabled`, `animated`. Slots: default, `header`, `title`, `description`, `icon`, `actions`, `footer`. | `layout/card.vue` |
214
+ | `PageHeader` | Page title with description, breadcrumbs, badge and actions. The page templates include it. | Props: `title`, `description`, `icon`, `breadcrumbs`, `level`, `bordered`, `align`, `truncate`. Slots: `actions`, `badge`, `description`, `title`, `icon`, `breadcrumbs`. | `layout/page-header.vue` |
215
+ | `Breadcrumbs` | Path navigation. | Props: `items` (`label`, `to`, `href`, `icon`), `separator`, `linkLast`, `ancestors`. Slot: `item`. | `layout/breadcrumbs.vue` |
216
+ | `Stepper` | Step indicator for wizards and multi step flows (import, checkout). Horizontal or vertical, compact on narrow widths. | Model: `v-model` (current step value). Props: `steps` (`value`, `label`, `description`, `icon`, `disabled`, `state`: `complete` or `error`), `label`, `orientation`, `size`, `linear` (only completed and current steps clickable), `readonly`, `compact` (`'auto'` by default, `true`, `false`), `positionLabel`, `completeLabel`, `errorLabel`. Event: `select`. | `layout/stepper.vue` |
217
+ | `Tabs` | Tabs with panels, badges and dots. Segmented or underline. | Model: `v-model` (active value). Props: `items` (`value`, `label`, `icon`, `badge`, `badgeTone`, `dot`, `disabled`), `variant`, `size`, `lazy`, `fill`, `stretch`, `inset`. Slots: `panel-<value>`, `panel`. | `layout/tabs.vue` |
218
+ | `Accordion` | Collapsible sections. | Model: `v-model` (open value or values). Props: `items` (`value`, `title`, `description`, `content`, `icon`), `multiple`, `collapsible`, `variant`. Slots: default, `title`. | `layout/accordion.vue` |
219
+ | `Separator` | Divider, labelled divider, or section heading with description and actions. | Props: `orientation`, `variant` (label, heading), `label`, `description`, `align`, `level`. Slots: default, `description`, `actions`. | `layout/separator.vue` |
220
+ | `Stack` | Flex row or column with gap. | Props: `direction`, `gap` (none to xl), `align`, `justify`, `wrap`, `responsive`, `as`. | `layout/stack.vue` |
221
+ | `Grid` | Responsive CSS grid. | Props: `columns` (number or breakpoints), `minItemWidth` (auto fit), `gap`, `as`. | `layout/grid.vue` |
222
+ | `Toolbar` | Group of controls with arrow key navigation (ARIA toolbar). | Props: `label`, `orientation`, `roving`, `bordered`. | `layout/toolbar.vue` |
223
+ | `CopyButton` | Button that copies a value and shows "copied". | Props: `value`, `label`, `copiedLabel`, `showLabel`, `size`, `variant`, `tone`, `resetAfter`. Event: `copy(success)`. | `layout/copy-button.vue` |
224
+ | `ThemeSwitch` | Light, dark and system switch. | Props: `variant` (segmented, icon), `size`, `showLabels`. | `layout/theme-switch.vue` |
225
+ | `NavLink` | One navigation link with icon, badge and active state. | Props: `label`, `to`, `href`, `icon`, `badge`, `active`, `match` (exact, prefix), `external`, `disabled`. Slots: default, `icon`. | `layout/nav-link.vue` |
226
+ | `AppShell` | App frame: sidebar, topbar, mobile menu, collapse, skip link. Use it for a custom frame. Use `DashboardLayout` for the ready one. | Models: `v-model:collapsed`, `v-model:open`. Props: `variant` (inset, sidebar, floating), `content` (`page`, `fill`, `centered`, `bleed`), `fluid`, `fill`, `topbar`, `storageKey`, `shortcut`. Slots: default, `sidebar`, `topbar`, `overlays`. | `layout/app-shell.vue` |
227
+ | `Sidebar` | Sidebar content with header, collapse button and footer. Goes in the `sidebar` slot of `AppShell`. | Props: `label`, `collapsible`. Slots: default, `header`, `top`, `footer`. | `layout/app-shell.vue` |
228
+ | `SidebarNav` | Navigation list from data, with groups and children. | Props: `items` (`NavItem[]` or `NavSection[]`: `label`, `to`, `icon`, `badge`, `children`), `currentPath`. | `layout/app-shell.vue` |
229
+ | `SidebarSection` | Labelled block inside a sidebar for hand written links. | Prop: `label`. Slot: default. | `layout/app-shell.vue` |
220
230
 
221
231
  ## Feedback
222
232
 
@@ -234,25 +244,25 @@ Mount `OverlayHost` once for the imperative hooks (see [Composables](#composable
234
244
 
235
245
  Templates combine core parts into whole pages and layouts. Start from them for new pages.
236
246
 
237
- | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
238
- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
239
- | `DashboardLayout` | Ready app frame: brand, navigation, command search, account menu, settings modal, breadcrumbs, theme switch. Put it in `layouts/default.vue`. | Models: `v-model:collapsed`, `v-model:open`, `v-model:settingsOpen`, `v-model:settingsSection`. Props: `navigation` (`NavItem[]` or `NavSection[]`), `account` (`name`, `email`, `avatar`, `role`, `menu`), `brandName`, `brandIcon`, `brandLogo`, `breadcrumbs`, `search` (true, groups or function), `settingsSections`, `variant`, `fluid`, `fill`, `onSignOut`. Slots: default, `actions`, `brand`, `sidebar`, `sidebar-footer`, `account`, `topbar`, `search-item`, `settings-account-fields`. Event: `accountSelect`. | `templates/dashboard-layout.vue` |
240
- | `AuthLayout` | Login, sign up and reset password frame. Centered card or split with aside. | Props: `variant` (centered, split), `title`, `description`, `footer`, `brandName`, `brandIcon`, `brandLogo`, `asideTitle`, `asideDescription`, `themeSwitch`. Slots: default, `links`, `footer`, `brand`, `aside`, `corner`. | `templates/auth-layout.vue` |
241
- | `ListPage` | Whole list page: header, search, filters, table, pagination, bulk actions, loading, empty, no results and error states. Client or server mode (`total`). | Models: `page`, `pageSize`, `search`, `filter`, `sort`, `selected`. Props: `title`, `rows`, `columns`, `rowKey`, `rowTo`, `selectable`, `loading`, `error`, `total`, `paginate`, `searchable`, `searchKeys`, `filters`, `filterKey`, `filterMultiple`, `emptyTitle`. Slots: `actions`, `toolbar`, `toolbar-end`, `bulk`, `empty`, `empty-actions`, `no-results`, `error`, `cell-<key>`, `table`. Events: `retry`, `clear`, `rowClick`. | `templates/list-page.vue` |
242
- | `DetailPage` | Record page: back link, title, status, actions, tabs, main column and aside with description lists. | Model: `v-model:tab`. Props: `title`, `backTo`, `backLabel`, `status` (`label`, `tone`, `dot`), `tabs`, `sections` (`title`, `items`), `loading`, `error`. Slots: default, `actions`, `badge`, `meta`, `aside`, `aside-before`, `panel-<value>`. | `templates/detail-page.vue` |
243
- | `FormPage` | Form page: header, cards in a `Form`, sticky submit and cancel footer, dirty guard. | Props: `title`, `backTo`, `form` (from `useForm`), `dirty`, `saving`, `guard`, `requireDirty`, `submitLabel`, `cancelLabel`, `cancelTo`, `width`, `sticky`. Slots: default, `actions`, `footer`, `status`. Events: `submit`, `submitted`, `invalid`, `reset`, `cancel`. | `templates/form-page.vue` |
244
- | `DashboardPage` | Overview page: header, stat grid, content grid. | Props: `title`, `eyebrow`, `description`, `stats` (`PageStat[]`), `statsColumns`, `columns`, `loading`. Slots: default, `actions`, `stats`, `sparkline`, `before`, `after`, `eyebrow`. | `templates/dashboard-page.vue` |
245
- | `SettingsPage` | Settings as a page: section nav, panels, floating save bar when `dirty`. | Model: `v-model:section`. Props: `title`, `sections` (`value`, `label`, `icon`, `to`), `dirty`, `saving`, `saveBar`, `form`. Slots: `section-<value>`, `actions`, `nav-footer`. Events: `save`, `discard`. | `templates/settings-page.vue` |
246
- | `SettingsSection` | Card of one settings section with a save footer. | Props: `title`, `description`, `icon`, `hint`, `saveable`, `saving`, `saveDisabled`, `saveLabel`, `form`. Slots: default, `actions`, `footer`, `hint`. Event: `save`. | `templates/settings-page.vue` |
247
- | `SettingsGroup` | Block with label, description and actions inside a settings section. | Props: `label`, `description`, `level`, `row`. Slots: default, `label`, `description`, `actions`. | `templates/settings-modal.vue` |
248
- | `SettingsModal` | Settings dialog with nav, built-in account and appearance sections, your own sections and subpages. | Models: `v-model:open`, `v-model:section`, `v-model:pages`. Props: `sections` (`id`, `label`, `icon`, `group`, `badge`, `to`), `account`, `presets`, `title`, `onSignOut`, `hideSession`, `beforeClose`. Slots: `section-<id>`, `actions-<id>`, `account-fields`. | `templates/settings-modal.vue` |
249
- | `AppearanceSettings` | Theme (light, dark, system) and preset cards. Used by `SettingsModal`. Use alone in a settings page. | Props: `presets` (list or false), `themes`, `level`. | `presets.vue` (pages root) |
250
- | `SaveBar` | Floating bar with save and discard for unsaved changes. | Props: `visible`, `saving`, `message`, `saveLabel`, `discardLabel`, `form`. Slots: default, `actions`. Events: `save`, `discard`. | `templates/settings-page.vue` |
251
- | `EmptyPage` | First run screen with illustration, actions and onboarding steps. | Props: `title`, `description`, `icon`, `actionLabel`, `actionTo`, `onAction`, `secondaryLabel`, `steps` (`title`, `description`, `done`, `to`), `fill`. Slots: default, `illustration`, `title`, `description`, `actions`. | `templates/empty-page.vue` |
252
- | `ErrorPage` | Error screen. Reads a Nuxt `error`. Use it in `app/error.vue`. | Props: `error`, `statusCode`, `title`, `message`, `homeTo`, `homeLabel`, `retryLabel`, `brandName`, `fill`, `onHome`, `onRetry`. Slots: default, `title`, `message`, `actions`, `brand`. | `templates/error-page.vue` |
253
- | `NotFoundPage` | 404 screen. | Props: `title`, `message`, `homeTo`, `homeLabel`, `backLabel`, `brandName`, `fill`, `onHome`. Slots: default, `actions`, `brand`. | `templates/error-page.vue` |
254
- | `Brand` | Logo and name block (image URL, inline SVG or component). | Props: `name`, `subtitle`, `icon`, `logo`, `to`, `size`, `accent`, `hideText`, `showName`. Slots: default, `logo`, `mark`, `subtitle`. | `templates/dashboard-layout.vue` |
255
- | `AccountMenu` | Account button with avatar, name and a dropdown menu. Used by `DashboardLayout`. | Props: `name`, `email`, `avatar`, `menu` (menu items), `placement`, `icon`. Event: `select`. | `templates/dashboard-layout.vue` |
247
+ | Component | Purpose and when to use it | Main props, models, slots, events | Playground |
248
+ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- |
249
+ | `DashboardLayout` | Ready app frame: brand, navigation, command search, account menu, settings modal, breadcrumbs, theme switch. Put it in `layouts/default.vue`. | Models: `v-model:collapsed`, `v-model:open`, `v-model:settingsOpen`, `v-model:settingsSection`. Props: `navigation` (`NavItem[]` or `NavSection[]`), `account` (`name`, `email`, `avatar`, `role`, `menu`), `brandName`, `brandIcon`, `brandLogo`, `breadcrumbs`, `search` (true, groups or function), `settingsSections`, `variant`, `content` (`page`, `fill`, `centered`, `bleed`; per page with `definePageMeta({ content })` in `k-dashboard`), `fluid`, `fill`, `onSignOut`. Slots: default, `actions`, `brand`, `sidebar`, `sidebar-footer`, `account`, `topbar`, `search-item`, `settings-account-fields`. Event: `accountSelect`. | `templates/dashboard-layout.vue` |
250
+ | `AuthLayout` | Login, sign up and reset password frame. Centered card or split with aside. | Props: `variant` (centered, split), `title`, `description`, `footer`, `brandName`, `brandIcon`, `brandLogo`, `asideTitle`, `asideDescription`, `themeSwitch`. Slots: default, `links`, `footer`, `brand`, `aside`, `corner`. | `templates/auth-layout.vue` |
251
+ | `ListPage` | Whole list page: header, search, filters, table, pagination, bulk actions, loading, empty, no results and error states. Client or server mode (`total`). | Models: `page`, `pageSize`, `search`, `filter`, `sort`, `selected`. Props: `title`, `rows`, `columns`, `rowKey`, `rowTo`, `selectable`, `loading`, `error`, `total`, `paginate`, `searchable`, `searchKeys`, `filters`, `filterKey`, `filterMultiple`, `emptyTitle`. Slots: `actions`, `toolbar`, `toolbar-end`, `bulk`, `empty`, `empty-actions`, `no-results`, `error`, `cell-<key>`, `table`. Events: `retry`, `clear`, `rowClick`. | `templates/list-page.vue` |
252
+ | `DetailPage` | Record page: back link, title, status, actions, tabs, main column and aside with description lists. | Model: `v-model:tab`. Props: `title`, `backTo`, `backLabel`, `status` (`label`, `tone`, `dot`), `tabs`, `sections` (`title`, `items`), `loading`, `error`. Slots: default, `actions`, `badge`, `meta`, `aside`, `aside-before`, `panel-<value>`. | `templates/detail-page.vue` |
253
+ | `FormPage` | Form page: header, cards in a `Form`, sticky submit and cancel footer, dirty guard. | Props: `title`, `backTo`, `form` (from `useForm`), `dirty`, `saving`, `guard`, `requireDirty`, `submitLabel`, `cancelLabel`, `cancelTo`, `width`, `sticky`. Slots: default, `actions`, `footer`, `status`. Events: `submit`, `submitted`, `invalid`, `reset`, `cancel`. | `templates/form-page.vue` |
254
+ | `DashboardPage` | Overview page: header, stat grid, content grid. | Props: `title`, `eyebrow`, `description`, `stats` (`PageStat[]`), `statsColumns`, `columns`, `loading`. Slots: default, `actions`, `stats`, `sparkline`, `before`, `after`, `eyebrow`. | `templates/dashboard-page.vue` |
255
+ | `SettingsPage` | Settings as a page: section nav, panels, floating save bar when `dirty`. | Model: `v-model:section`. Props: `title`, `sections` (`value`, `label`, `icon`, `to`), `dirty`, `saving`, `saveBar`, `form`. Slots: `section-<value>`, `actions`, `nav-footer`. Events: `save`, `discard`. | `templates/settings-page.vue` |
256
+ | `SettingsSection` | Card of one settings section with a save footer. | Props: `title`, `description`, `icon`, `hint`, `saveable`, `saving`, `saveDisabled`, `saveLabel`, `form`. Slots: default, `actions`, `footer`, `hint`. Event: `save`. | `templates/settings-page.vue` |
257
+ | `SettingsGroup` | Block with label, description and actions inside a settings section. | Props: `label`, `description`, `level`, `row`. Slots: default, `label`, `description`, `actions`. | `templates/settings-modal.vue` |
258
+ | `SettingsModal` | Settings dialog with nav, built-in account and appearance sections, your own sections and subpages. | Models: `v-model:open`, `v-model:section`, `v-model:pages`. Props: `sections` (`id`, `label`, `icon`, `group`, `badge`, `to`), `account`, `presets`, `title`, `onSignOut`, `hideSession`, `beforeClose`. Slots: `section-<id>`, `actions-<id>`, `account-fields`. | `templates/settings-modal.vue` |
259
+ | `AppearanceSettings` | Theme (light, dark, system) and preset cards. Used by `SettingsModal`. Use alone in a settings page. | Props: `presets` (list or false), `themes`, `level`. | `presets.vue` (pages root) |
260
+ | `SaveBar` | Floating bar with save and discard for unsaved changes. | Props: `visible`, `saving`, `message`, `saveLabel`, `discardLabel`, `form`. Slots: default, `actions`. Events: `save`, `discard`. | `templates/settings-page.vue` |
261
+ | `EmptyPage` | First run screen with illustration, actions and onboarding steps. | Props: `title`, `description`, `icon`, `actionLabel`, `actionTo`, `onAction`, `secondaryLabel`, `steps` (`title`, `description`, `done`, `to`), `fill`. Slots: default, `illustration`, `title`, `description`, `actions`. | `templates/empty-page.vue` |
262
+ | `ErrorPage` | Error screen. Reads a Nuxt `error`. Use it in `app/error.vue`. | Props: `error`, `statusCode`, `title`, `message`, `homeTo`, `homeLabel`, `retryLabel`, `brandName`, `fill`, `onHome`, `onRetry`. Slots: default, `title`, `message`, `actions`, `brand`. | `templates/error-page.vue` |
263
+ | `NotFoundPage` | 404 screen. | Props: `title`, `message`, `homeTo`, `homeLabel`, `backLabel`, `brandName`, `fill`, `onHome`. Slots: default, `actions`, `brand`. | `templates/error-page.vue` |
264
+ | `Brand` | Logo and name block (image URL, inline SVG or component). | Props: `name`, `subtitle`, `icon`, `logo`, `to`, `size`, `accent`, `hideText`, `showName`. Slots: default, `logo`, `mark`, `subtitle`. | `templates/dashboard-layout.vue` |
265
+ | `AccountMenu` | Account button with avatar, name and a dropdown menu. Used by `DashboardLayout`. | Props: `name`, `email`, `avatar`, `menu` (menu items), `placement`, `icon`. Event: `select`. | `templates/dashboard-layout.vue` |
256
266
 
257
267
  Nuxt ready layouts: with `k: { layouts: true }` the module registers the layouts `k-dashboard` and `k-auth`. They read brand, navigation, account and settings from `app.config.ts` (`k` key). `useDashboard()` gives the runtime account, breadcrumbs and badges for `k-dashboard`. See README, section "Nuxt: ready layouts".
258
268
 
@@ -265,7 +275,7 @@ Import from `@xleddyl/443-components-vue/grid`. It wraps AG Grid Community.
265
275
  | `DataGrid` | Big table: virtual scroll, column menu, search, CSV export, selection, server sort and paging, inline editing. For small tables use `Table`. | Models: `v-model:query`, `v-model:page`, `v-model:pageSize`, `v-model:sort` (`{ column, direction }`). Props: `rows`, `columns` (AG Grid `ColDef`), `rowIdKey` or `getRowId`, `storageKey`, `density`, `selectable`, `loading`, `height`, `fill`, `autoHeight`, `toolbar`, `searchable`, `columnMenu`, `exportable`, `serverSort`, `pagination`, `serverPagination`, `total`, `filterable`, `editable`, `spreadsheet`, `gridOptions`, `messages`. Slot: `actions`. Events: `rowClick`, `selectionChange`, `sortChange`, `filterChange`, `cellsChange`, `cellsInvalid`, `dirtyChange`, `rangeChange`, `copy`. | `grid/data-grid.vue` |
266
276
  | `DataGrid` with `spreadsheet` | Excel-like editing: cell range selection, copy and paste (TSV), fill down and right, clear, undo and redo, dirty cell tracking. Set `rowIdKey` or `getRowId`. | Template ref methods (`GridSpreadsheetMethods`): `getRange`, `getSelectedCells`, `selectRange`, `selectAll`, `setRangeValue`, `copyRange`, `paste`, `fillDown`, `fillRight`, `clearCells`, `undo`, `redo`, `getDirtyCells`, `clearDirty`. The `actions` slot gets the same methods plus `range`, `selectedCellCount`, `dirtyCount`, `canUndo`, `canRedo`. Use `cellsChange` to save edits, `cellsInvalid` for rejected input. | `grid/spreadsheet.vue` |
267
277
  | `GridToolbar` | Toolbar of `DataGrid` (search, column menu, export). `DataGrid` already renders it. Use it alone only for a custom grid setup. | Props: `api`, `searchable`, `columnMenu`, `exportable`, `exportFileName`, `debounce`. Model: `v-model` (query). Event: `resetColumns`. | - |
268
- | Cell renderers | Use as `cellRenderer` in a column definition, with `cellRendererParams`. | `BadgeCell` (`tones`, `labels`, `defaultTone`, `variant`), `BooleanCell` (`trueLabel`, `falseLabel`), `DateCell` (`locale`, `options`, `relative`), `EmptyCell` (placeholder for empty values), `ImageCell` (`alt`, `rounded`, `fit`, `size`), `LinkCell` (`href`, `label`, `target`). | `grid/data-grid.vue` |
278
+ | Cell renderers | Use as `cellRenderer` in a column definition, with `cellRendererParams`. | `BadgeCell` (`tones`, `labels`, `defaultTone`, `variant`; array values render one badge each, `max` adds a `+N` badge, `wrap`), `BooleanCell` (`trueLabel`, `falseLabel`), `DateCell` (`locale`, `options`, `relative`), `EmptyCell` (placeholder for empty values), `ImageCell` (`alt`, `rounded`, `fit`, `size`), `LinkCell` (`href`, `label`, `target`). | `grid/data-grid.vue` |
269
279
 
270
280
  Grid helpers: `registerGridModules`, `registerGridEditorModules`, `registerGridFilterModules`, `registerGridSpreadsheetModules` (register AG Grid modules by hand), `createGridTheme`, `parseTsv`, `formatTsv`.
271
281