@xleddyl/443-components-vue 0.14.0 → 0.16.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.
- package/CATALOG.md +155 -153
- package/README.md +79 -2
- package/dist/chart/BarChart.vue.d.ts +2 -2
- package/dist/chart/ChartLegend.vue.d.ts +4 -4
- package/dist/chart/ChartPanel.vue.d.ts +2 -2
- package/dist/chart/ChartSummary.vue.d.ts +2 -2
- package/dist/chart/DoughnutChart.vue.d.ts +2 -2
- package/dist/chart/LineChart.vue.d.ts +2 -2
- package/dist/components/core/Button.vue.d.ts +2 -2
- package/dist/components/core/FieldMessage.vue.d.ts +2 -2
- package/dist/components/core/FormAlerts.vue.d.ts +2 -2
- package/dist/components/core/FormField.vue.d.ts +2 -2
- package/dist/components/core/Input.vue.d.ts +4 -4
- package/dist/components/core/Kbd.vue.d.ts +2 -2
- package/dist/components/core/Root.vue.d.ts +4 -4
- package/dist/components/core/Spinner.vue.d.ts +2 -2
- package/dist/components/core/Textarea.vue.d.ts +4 -4
- package/dist/components/core/VisuallyHidden.vue.d.ts +4 -4
- package/dist/components/data/Avatar.vue.d.ts +2 -2
- package/dist/components/data/AvatarGroup.vue.d.ts +2 -2
- package/dist/components/data/Badge.vue.d.ts +2 -2
- package/dist/components/data/DescriptionList.vue.d.ts +2 -2
- package/dist/components/data/FilterPill.vue.d.ts +2 -2
- package/dist/components/data/Pagination.vue +14 -8
- package/dist/components/data/Pagination.vue.d.ts +13 -10
- package/dist/components/data/SelectionBar.vue.d.ts +2 -2
- package/dist/components/data/Stat.vue.d.ts +4 -4
- package/dist/components/data/Tag.vue.d.ts +4 -4
- package/dist/components/data/Timeline.vue.d.ts +2 -2
- package/dist/components/data/Tree.vue.d.ts +4 -4
- package/dist/components/data/types.d.ts +1 -0
- package/dist/components/feedback/Alert.vue.d.ts +4 -4
- package/dist/components/feedback/EmptyState.vue.d.ts +2 -2
- package/dist/components/feedback/LoadingOverlay.vue.d.ts +2 -2
- package/dist/components/feedback/Meter.vue.d.ts +2 -2
- package/dist/components/feedback/Progress.vue.d.ts +2 -2
- package/dist/components/feedback/ProgressRing.vue.d.ts +2 -2
- package/dist/components/feedback/Skeleton.vue.d.ts +2 -2
- package/dist/components/forms/Calendar.vue.d.ts +4 -4
- package/dist/components/forms/ColorInput.vue.d.ts +4 -4
- package/dist/components/forms/DateInput.vue.d.ts +4 -4
- package/dist/components/forms/DatePicker.vue.d.ts +4 -4
- package/dist/components/forms/FileInput.vue.d.ts +4 -4
- package/dist/components/forms/InputAddon.vue.d.ts +2 -2
- package/dist/components/forms/InputGroup.vue.d.ts +2 -2
- package/dist/components/forms/NumberInput.vue.d.ts +4 -4
- package/dist/components/forms/PasswordInput.vue.d.ts +4 -4
- package/dist/components/forms/PinInput.vue.d.ts +4 -4
- package/dist/components/forms/Radio.vue.d.ts +2 -2
- package/dist/components/forms/Slider.vue.d.ts +4 -4
- package/dist/components/forms/Switch.vue.d.ts +4 -4
- package/dist/components/forms/TimeInput.vue.d.ts +4 -4
- package/dist/components/layout/Accordion.vue.d.ts +4 -4
- package/dist/components/layout/AppShell.vue.d.ts +4 -4
- package/dist/components/layout/Breadcrumbs.vue.d.ts +2 -2
- package/dist/components/layout/Card.vue.d.ts +4 -4
- package/dist/components/layout/CopyButton.vue.d.ts +4 -4
- package/dist/components/layout/Grid.vue.d.ts +2 -2
- package/dist/components/layout/NavLink.vue.d.ts +4 -4
- package/dist/components/layout/PageHeader.vue.d.ts +2 -2
- package/dist/components/layout/Separator.vue.d.ts +2 -2
- package/dist/components/layout/Sidebar.vue.d.ts +2 -2
- package/dist/components/layout/SidebarSection.vue.d.ts +2 -2
- package/dist/components/layout/Stack.vue.d.ts +4 -4
- package/dist/components/layout/Stepper.vue.d.ts +4 -4
- package/dist/components/layout/Tabs.vue.d.ts +4 -4
- package/dist/components/layout/ThemeSwitch.vue.d.ts +2 -2
- package/dist/components/layout/Toolbar.vue.d.ts +2 -2
- package/dist/components/overlays/CommandPalette.vue.d.ts +2 -2
- package/dist/components/overlays/ConfirmDialog.vue.d.ts +4 -4
- package/dist/components/overlays/ConfirmHost.vue.d.ts +4 -4
- package/dist/components/overlays/ContextMenu.vue.d.ts +4 -4
- package/dist/components/overlays/Drawer.vue.d.ts +4 -4
- package/dist/components/overlays/DropdownMenu.vue.d.ts +4 -4
- package/dist/components/overlays/HoverCard.vue.d.ts +4 -4
- package/dist/components/overlays/Modal.vue.d.ts +4 -4
- package/dist/components/overlays/Popover.vue.d.ts +4 -4
- package/dist/components/overlays/Toaster.vue.d.ts +2 -2
- package/dist/components/overlays/Tooltip.vue.d.ts +2 -2
- package/dist/components/templates/AccountMenu.vue.d.ts +4 -4
- package/dist/components/templates/AppearanceSettings.vue.d.ts +2 -2
- package/dist/components/templates/AuthLayout.vue.d.ts +2 -2
- package/dist/components/templates/Brand.vue.d.ts +4 -4
- package/dist/components/templates/DashboardLayout.vue +2 -0
- package/dist/components/templates/DashboardLayout.vue.d.ts +3 -2
- package/dist/components/templates/DashboardPage.vue.d.ts +2 -2
- package/dist/components/templates/DetailPage.vue.d.ts +4 -4
- package/dist/components/templates/EmptyPage.vue.d.ts +2 -2
- package/dist/components/templates/ErrorPage.vue.d.ts +2 -2
- package/dist/components/templates/ListPage.vue +7 -3
- package/dist/components/templates/ListPage.vue.d.ts +5 -5
- package/dist/components/templates/SaveBar.vue.d.ts +4 -4
- package/dist/components/templates/SettingsGroup.vue.d.ts +2 -2
- package/dist/components/templates/SettingsModal.vue.d.ts +4 -4
- package/dist/components/templates/SettingsPage.vue.d.ts +4 -4
- package/dist/components/templates/SettingsSection.vue.d.ts +4 -4
- package/dist/composables/core.d.ts +1 -0
- package/dist/composables/core.mjs +1 -0
- package/dist/composables/usePreferences.d.ts +17 -0
- package/dist/composables/usePreferences.mjs +50 -0
- package/dist/editor/RichTextEditor.vue.d.ts +4 -4
- package/dist/grid/DataGrid.vue +57 -13
- package/dist/grid/DataGrid.vue.d.ts +5 -4
- package/dist/grid/GridToolbar.vue.d.ts +4 -4
- package/dist/grid/cells/BadgeCell.vue.d.ts +2 -2
- package/dist/grid/cells/BooleanCell.vue.d.ts +2 -2
- package/dist/grid/cells/ButtonCell.vue.d.ts +2 -2
- package/dist/grid/cells/DateCell.vue.d.ts +2 -2
- package/dist/grid/cells/EmptyCell.vue.d.ts +2 -2
- package/dist/grid/cells/ImageCell.vue.d.ts +2 -2
- package/dist/grid/types.d.ts +5 -1
- package/dist/internal/core/LiveRegion.vue.d.ts +2 -2
- package/dist/internal/core/preferences.d.ts +34 -0
- package/dist/internal/core/preferences.mjs +184 -0
- package/dist/internal/core/preset.mjs +4 -1
- package/dist/internal/core/theme.mjs +4 -1
- package/dist/internal/layout/NavGroup.vue.d.ts +4 -4
- package/dist/internal/layout/persist.mjs +44 -9
- package/dist/internal/overlays/DialogFrame.vue.d.ts +4 -4
- package/dist/internal/overlays/MenuList.vue.d.ts +4 -4
- package/dist/internal/overlays/OverlayView.vue.d.ts +4 -4
- package/dist/locale/de.mjs +2 -1
- package/dist/locale/en.mjs +2 -1
- package/dist/locale/it.mjs +2 -1
- package/dist/locale/types.d.ts +1 -0
- package/dist/nuxt/runtime/layouts/auth.vue.d.ts +4 -4
- package/dist/nuxt/runtime/layouts/dashboard.vue.d.ts +4 -4
- package/dist/styles/forms/select.css +16 -2
- package/dist/styles/templates/settings-modal.css +9 -4
- package/package.json +1 -1
package/CATALOG.md
CHANGED
|
@@ -28,104 +28,105 @@ 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
|
|
32
|
-
|
|
|
33
|
-
| Form with validation, dirty state and server errors
|
|
34
|
-
| One labelled field with error, hint and required marker
|
|
35
|
-
| Map a server error (409, 422) to fields
|
|
36
|
-
| Form as a full page with sticky save footer
|
|
37
|
-
| Warn before the user leaves with unsaved changes
|
|
38
|
-
| Floating "unsaved changes" bar
|
|
39
|
-
| Single line text
|
|
40
|
-
| Multi line text
|
|
41
|
-
| Rich text (bold, lists, links)
|
|
42
|
-
| Password with strength meter and generator
|
|
43
|
-
| Number with stepper, locale format
|
|
44
|
-
| Money or unit prefix and suffix around an input
|
|
45
|
-
| One choice from a short list (5 or fewer)
|
|
46
|
-
| One choice from a longer list, no search
|
|
47
|
-
| Searchable select, async search, multi select, create option
|
|
48
|
-
| Create new values with a format or rule (tags, codes)
|
|
49
|
-
| Several choices as checkboxes
|
|
50
|
-
| One yes or no
|
|
51
|
-
| Date, date and time, month
|
|
52
|
-
| Inline calendar
|
|
53
|
-
| Time of day
|
|
54
|
-
| Color
|
|
55
|
-
| Number in a range
|
|
56
|
-
| One time code, OTP
|
|
57
|
-
| File or folder upload with drop zone
|
|
58
|
-
| Drop files on any element
|
|
59
|
-
| `useSortable`
|
|
60
|
-
| Confirm a destructive action
|
|
61
|
-
| Show a message the user must acknowledge
|
|
62
|
-
| Ask for one text value
|
|
63
|
-
| Short message after an action
|
|
64
|
-
| Toast for a promise (loading, success, error)
|
|
65
|
-
| Toast after saving in an open Drawer
|
|
66
|
-
| Detail or edit panel from the side
|
|
67
|
-
| Dialog with a form or content
|
|
68
|
-
| Buttons in a Modal or Drawer header
|
|
69
|
-
| Deep link to a drawer or modal (`?family=fam_1`, `?family=new`)
|
|
70
|
-
| Menu opened by a button
|
|
71
|
-
| Right click menu
|
|
72
|
-
| Small floating panel with content or a form
|
|
73
|
-
| Preview on hover (user card)
|
|
74
|
-
| Short label on hover or focus
|
|
75
|
-
| Global search, command menu (Cmd+K)
|
|
76
|
-
| Small table, simple sort
|
|
77
|
-
| Big table, many rows, editing, Excel-like
|
|
78
|
-
| Filters for a grid (selects, dates in a modal from the toolbar)
|
|
79
|
-
| Several tags or statuses in one grid cell
|
|
80
|
-
| Whole list page: search, filters, table, pagination
|
|
81
|
-
| Page numbers and page size
|
|
82
|
-
| Bulk actions bar for selected rows
|
|
83
|
-
| Filter chips, active filters
|
|
84
|
-
| Tags, chips, removable labels
|
|
85
|
-
| Reorder chips by drag and keyboard, drop items from another panel
|
|
86
|
-
| Reorder any list by drag and keyboard
|
|
87
|
-
| Status label, counter, dot
|
|
88
|
-
| User picture or initials; stack of users
|
|
89
|
-
| Key figure with delta and trend (KPI)
|
|
90
|
-
| Label and value pairs (details)
|
|
91
|
-
| Event history, activity feed
|
|
92
|
-
| Hierarchy, folders, drag to reorder
|
|
93
|
-
| Charts (line, bar, doughnut)
|
|
94
|
-
| Tabs
|
|
95
|
-
| Wizard steps, step indicator (Step 2 of 4)
|
|
96
|
-
| Collapsible sections, FAQ
|
|
97
|
-
| Container with title and actions
|
|
98
|
-
| Page title, description, breadcrumbs, actions
|
|
99
|
-
| Breadcrumbs only
|
|
100
|
-
| Dashboard layout with sidebar, search, account and settings
|
|
101
|
-
| Actions in a settings section header ("Add user")
|
|
102
|
-
| Page that fills the panel height (a full height grid)
|
|
103
|
-
| Custom app frame with your own sidebar
|
|
104
|
-
| Login, sign up, reset password page
|
|
105
|
-
| Settings in a modal (account, appearance, your sections)
|
|
106
|
-
| Settings as a page with sections
|
|
107
|
-
| Theme and preset choice
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
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
|
+
| Buttons in a Modal or Drawer header | `#actions` slot of `Modal` / `Drawer` (right side, before the close button) |
|
|
69
|
+
| Deep link to a drawer or modal (`?family=fam_1`, `?family=new`) | `useRouteState('family')` + `:open="!!familyId"`; settings: `route` on `SettingsModal`, `settingsRoute` on `DashboardLayout` |
|
|
70
|
+
| Menu opened by a button | `DropdownMenu` |
|
|
71
|
+
| Right click menu | `ContextMenu` |
|
|
72
|
+
| Small floating panel with content or a form | `Popover` |
|
|
73
|
+
| Preview on hover (user card) | `HoverCard` |
|
|
74
|
+
| Short label on hover or focus | `Tooltip` |
|
|
75
|
+
| Global search, command menu (Cmd+K) | `CommandPalette` (the `DashboardLayout` has it with `search`) |
|
|
76
|
+
| Small table, simple sort | `Table` (+ `useTableSort` for client sort) |
|
|
77
|
+
| Big table, many rows, editing, Excel-like | `DataGrid` (+ `spreadsheet` prop for Excel-like editing) |
|
|
78
|
+
| Filters for a grid (selects, dates in a modal from the toolbar) | `DataGrid` `#filters` slot with `filterCount` and `@filters-reset` |
|
|
79
|
+
| Several tags or statuses in one grid cell | `BadgeCell` with an array value (`max` adds a `+N` badge) |
|
|
80
|
+
| Whole list page: search, filters, table, pagination | `ListPage` |
|
|
81
|
+
| Page numbers and page size | `Pagination` |
|
|
82
|
+
| Bulk actions bar for selected rows | `SelectionBar` |
|
|
83
|
+
| Filter chips, active filters | `FilterPills` |
|
|
84
|
+
| Tags, chips, removable labels | `Tag` |
|
|
85
|
+
| Reorder chips by drag and keyboard, drop items from another panel | `TagList` (`sortable`, `removable`, `accept` + `@item-drop`) |
|
|
86
|
+
| Reorder any list by drag and keyboard | `useSortable` |
|
|
87
|
+
| Status label, counter, dot | `Badge` |
|
|
88
|
+
| User picture or initials; stack of users | `Avatar`; `AvatarGroup` |
|
|
89
|
+
| Key figure with delta and trend (KPI) | `Stat` |
|
|
90
|
+
| Label and value pairs (details) | `DescriptionList` |
|
|
91
|
+
| Event history, activity feed | `Timeline` |
|
|
92
|
+
| Hierarchy, folders, drag to reorder | `Tree` |
|
|
93
|
+
| Charts (line, bar, doughnut) | `ChartPanel` + `LineChart` / `BarChart` / `DoughnutChart` (group `chart`) |
|
|
94
|
+
| Tabs | `Tabs` |
|
|
95
|
+
| Wizard steps, step indicator (Step 2 of 4) | `Stepper` |
|
|
96
|
+
| Collapsible sections, FAQ | `Accordion` |
|
|
97
|
+
| Container with title and actions | `Card` |
|
|
98
|
+
| Page title, description, breadcrumbs, actions | `PageHeader` (or a page template) |
|
|
99
|
+
| Breadcrumbs only | `Breadcrumbs` |
|
|
100
|
+
| Dashboard layout with sidebar, search, account and settings | `DashboardLayout` (or the Nuxt layout `k-dashboard`) |
|
|
101
|
+
| Actions in a settings section header ("Add user") | `#actions-<id>` on `SettingsModal`, `#settings-actions-<id>` on `DashboardLayout` (gets `page`, `openPage`, `back`) |
|
|
102
|
+
| Page that fills the panel height (a full height grid) | `content="fill"` or `"centered"` on `DashboardLayout` / `AppShell`, `definePageMeta({ content: 'fill' })` |
|
|
103
|
+
| Custom app frame with your own sidebar | `AppShell` + `Sidebar` + `SidebarNav` |
|
|
104
|
+
| Login, sign up, reset password page | `AuthLayout` (or the Nuxt layout `k-auth`) |
|
|
105
|
+
| Settings in a modal (account, appearance, your sections) | `SettingsModal` (the `DashboardLayout` embeds it) |
|
|
106
|
+
| Settings as a page with sections | `SettingsPage` + `SettingsSection` + `SettingsGroup` |
|
|
107
|
+
| Theme and preset choice | `AppearanceSettings`, `ThemeSwitch`, `useTheme`, `usePreset` |
|
|
108
|
+
| Remember UI choices per user (theme, sidebar, grid columns, page size) | `createPreferences` with your store (`createRemotePreferenceStore` for an API), `usePreference` for your own keys |
|
|
109
|
+
| Detail page of one record with tabs and aside | `DetailPage` |
|
|
110
|
+
| Overview page with stats | `DashboardPage` |
|
|
111
|
+
| First run screen with steps | `EmptyPage` |
|
|
112
|
+
| Error page, 404 page | `ErrorPage`, `NotFoundPage` |
|
|
113
|
+
| Empty state inside a card or list | `EmptyState` |
|
|
114
|
+
| Loading placeholder for content | `Skeleton` |
|
|
115
|
+
| Spinner; spinner that fills its container | `Spinner`; `Spinner block` |
|
|
116
|
+
| Cover an area while it loads | `LoadingOverlay` |
|
|
117
|
+
| Global loading bar or blocking screen | `useLoading` / `withLoading` (needs `OverlayHost`) |
|
|
118
|
+
| Loading flag for one button or form | `useLoadingState`, or `loading` prop of `Button` |
|
|
119
|
+
| Progress of a task | `Progress` (bar) or `ProgressRing` |
|
|
120
|
+
| Value in a known range (quota, score) | `Meter` |
|
|
121
|
+
| Inline message (info, warning, error) | `Alert` |
|
|
122
|
+
| Copy text to the clipboard | `CopyButton` or `useCopy` |
|
|
123
|
+
| Keyboard shortcut handler; show a shortcut | `useHotkey`; `Kbd` |
|
|
124
|
+
| Row or column layout with gap; responsive grid | `Stack`; `Grid` |
|
|
125
|
+
| Line or labelled divider; section heading with actions | `Separator` |
|
|
126
|
+
| Group of buttons or tools with arrow key navigation | `Toolbar` |
|
|
127
|
+
| Text for screen readers only | `VisuallyHidden` |
|
|
128
|
+
| Translations of the component texts | `useLocale` (languages: en, it, de) |
|
|
129
|
+
| Custom icons | `createIcons`, `provideIcons`, Nuxt option `k.icons` |
|
|
129
130
|
|
|
130
131
|
## Core
|
|
131
132
|
|
|
@@ -196,7 +197,7 @@ Mount `OverlayHost` once for the imperative hooks (see [Composables](#composable
|
|
|
196
197
|
| Component | Purpose and when to use it | Main props, models, slots, events | Playground |
|
|
197
198
|
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
198
199
|
| `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` |
|
|
199
|
-
| `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`.
|
|
200
|
+
| `Pagination` | Page buttons, page size select and summary. Client or server paging. | Models: `v-model:page`, `v-model:pageSize`. Props: `total`, `pageSizes` (numbers, `'all'` for every row), `allLabel`, `showEdges`, `showJump`, `compact`, `loading`, `showSummary`. Slot: `summary`. | `data/pagination.vue` |
|
|
200
201
|
| `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` |
|
|
201
202
|
| `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` |
|
|
202
203
|
| `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` |
|
|
@@ -227,7 +228,7 @@ Mount `OverlayHost` once for the imperative hooks (see [Composables](#composable
|
|
|
227
228
|
| `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` |
|
|
228
229
|
| `ThemeSwitch` | Light, dark and system switch. | Props: `variant` (segmented, icon), `size`, `showLabels`. | `layout/theme-switch.vue` |
|
|
229
230
|
| `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` |
|
|
230
|
-
| `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
|
|
231
|
+
| `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` (collapsed state in the preferences store), `shortcut`. Slots: default, `sidebar`, `topbar`, `overlays`. | `layout/app-shell.vue` |
|
|
231
232
|
| `Sidebar` | Sidebar content with header, collapse button and footer. Goes in the `sidebar` slot of `AppShell`. | Props: `label`, `collapsible`, `collapseLabel`, `brandAlign` (`start`, `center`). Icons `sidebar-collapse` and `sidebar-expand` for the collapse button. Slots: default, `header`, `top`, `footer`. | `layout/app-shell.vue` |
|
|
232
233
|
| `SidebarNav` | Navigation list from data, with groups and children. | Props: `items` (`NavItem[]` or `NavSection[]`: `label`, `to`, `icon`, `badge`, `children`), `currentPath`. | `layout/app-shell.vue` |
|
|
233
234
|
| `SidebarSection` | Labelled block inside a sidebar for hand written links. | Prop: `label`. Slot: default. | `layout/app-shell.vue` |
|
|
@@ -248,25 +249,25 @@ Mount `OverlayHost` once for the imperative hooks (see [Composables](#composable
|
|
|
248
249
|
|
|
249
250
|
Templates combine core parts into whole pages and layouts. Start from them for new pages.
|
|
250
251
|
|
|
251
|
-
| Component | Purpose and when to use it | Main props, models, slots, events
|
|
252
|
-
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
253
|
-
| `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`, `settingsRoute`, `settingsResolvePage`, `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`, `settings-section-<id>`, `settings-actions-<id>`. Event: `accountSelect`. | `templates/dashboard-layout.vue` |
|
|
254
|
-
| `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`.
|
|
255
|
-
| `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`.
|
|
256
|
-
| `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>`.
|
|
257
|
-
| `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`.
|
|
258
|
-
| `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`.
|
|
259
|
-
| `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`.
|
|
260
|
-
| `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`.
|
|
261
|
-
| `SettingsGroup` | Block with label, description and actions inside a settings section. | Props: `label`, `description`, `level`, `row`. Slots: default, `label`, `description`, `actions`.
|
|
262
|
-
| `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`, `route` (sync with `?settings=<section>/<page>`), `resolvePage(section, id, parents)`. Slots: `section-<id>`, `actions-<id>` (right of the header row, also on a subpage), `account-fields`.
|
|
263
|
-
| `AppearanceSettings` | Theme (light, dark, system) and preset cards. Used by `SettingsModal`. Use alone in a settings page. | Props: `presets` (list or false), `themes`, `level`.
|
|
264
|
-
| `SaveBar` | Floating bar with save and discard for unsaved changes. | Props: `visible`, `saving`, `message`, `saveLabel`, `discardLabel`, `form`. Slots: default, `actions`. Events: `save`, `discard`.
|
|
265
|
-
| `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`.
|
|
266
|
-
| `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`.
|
|
267
|
-
| `NotFoundPage` | 404 screen. | Props: `title`, `message`, `homeTo`, `homeLabel`, `backLabel`, `brandName`, `fill`, `onHome`. Slots: default, `actions`, `brand`.
|
|
268
|
-
| `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`.
|
|
269
|
-
| `AccountMenu` | Account button with avatar, name and a dropdown menu. Used by `DashboardLayout`. | Props: `name`, `email`, `avatar`, `menu` (menu items), `placement`, `icon`. Event: `select`.
|
|
252
|
+
| Component | Purpose and when to use it | Main props, models, slots, events | Playground |
|
|
253
|
+
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
|
|
254
|
+
| `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`, `settingsRoute`, `settingsResolvePage`, `settingsHideSession`, `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`, `settings-section-<id>`, `settings-actions-<id>`. Event: `accountSelect`. | `templates/dashboard-layout.vue` |
|
|
255
|
+
| `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` |
|
|
256
|
+
| `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` |
|
|
257
|
+
| `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` |
|
|
258
|
+
| `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` |
|
|
259
|
+
| `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` |
|
|
260
|
+
| `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` |
|
|
261
|
+
| `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` |
|
|
262
|
+
| `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` |
|
|
263
|
+
| `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`, `route` (sync with `?settings=<section>/<page>`), `resolvePage(section, id, parents)`. Slots: `section-<id>`, `actions-<id>` (right of the header row, also on a subpage), `account-fields`. | `templates/settings-modal.vue` |
|
|
264
|
+
| `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) |
|
|
265
|
+
| `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` |
|
|
266
|
+
| `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` |
|
|
267
|
+
| `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` |
|
|
268
|
+
| `NotFoundPage` | 404 screen. | Props: `title`, `message`, `homeTo`, `homeLabel`, `backLabel`, `brandName`, `fill`, `onHome`. Slots: default, `actions`, `brand`. | `templates/error-page.vue` |
|
|
269
|
+
| `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` |
|
|
270
|
+
| `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` |
|
|
270
271
|
|
|
271
272
|
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".
|
|
272
273
|
|
|
@@ -274,12 +275,12 @@ Nuxt ready layouts: with `k: { layouts: true }` the module registers the layouts
|
|
|
274
275
|
|
|
275
276
|
Import from `@xleddyl/443-components-vue/grid`. It wraps AG Grid Community.
|
|
276
277
|
|
|
277
|
-
| Component | Purpose and when to use it | Main props, models, slots, events
|
|
278
|
-
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
279
|
-
| `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
|
|
280
|
-
| `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.
|
|
281
|
-
| `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`, `filterCount`. Model: `v-model` (query). Slots: default (actions), `filters`. Events: `resetColumns`, `filtersReset`.
|
|
282
|
-
| 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`), `ButtonCell` (`onClick`, `label`, `ariaLabel`, `emptyLabel`; an inline button that does not trigger the row click).
|
|
278
|
+
| Component | Purpose and when to use it | Main props, models, slots, events | Playground |
|
|
279
|
+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
|
|
280
|
+
| `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` (columns and page size in the preferences store), `density`, `selectable`, `loading`, `height`, `fill`, `autoHeight`, `toolbar`, `searchable`, `columnMenu`, `exportable`, `serverSort`, `pagination`, `serverPagination`, `total`, `filterable`, `editable`, `spreadsheet`, `gridOptions`, `messages`, `filterCount`. Slots: `actions`, `filters` (`{ close, count }`, hosted in a modal opened by a funnel button next to the search). Events: `filtersReset`, `rowClick`, `selectionChange`, `sortChange`, `filterChange`, `cellsChange`, `cellsInvalid`, `dirtyChange`, `rangeChange`, `copy`. | `grid/data-grid.vue` |
|
|
281
|
+
| `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` |
|
|
282
|
+
| `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`, `filterCount`. Model: `v-model` (query). Slots: default (actions), `filters`. Events: `resetColumns`, `filtersReset`. | - |
|
|
283
|
+
| 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`), `ButtonCell` (`onClick`, `label`, `ariaLabel`, `emptyLabel`; an inline button that does not trigger the row click). | `grid/data-grid.vue` |
|
|
283
284
|
|
|
284
285
|
Grid helpers: `registerGridModules`, `registerGridEditorModules`, `registerGridFilterModules`, `registerGridSpreadsheetModules` (register AG Grid modules by hand), `createGridTheme`, `parseTsv`, `formatTsv`.
|
|
285
286
|
|
|
@@ -307,34 +308,35 @@ Chart helpers: `useChartColors`, `readChartColors`, `withAlpha`, `registerChartM
|
|
|
307
308
|
|
|
308
309
|
All are exported from `@xleddyl/443-components-vue` and auto-imported in Nuxt.
|
|
309
310
|
|
|
310
|
-
| Composable
|
|
311
|
-
|
|
|
312
|
-
| `useForm`
|
|
313
|
-
| `useField`, `useFieldControl`
|
|
314
|
-
| `provideFieldBoundary`, `provideAuxiliaryControls`
|
|
315
|
-
| `toast` / `useToast`
|
|
316
|
-
| `useConfirm`
|
|
317
|
-
| `useAlert`
|
|
318
|
-
| `usePrompt`
|
|
319
|
-
| `useModal`, `useDrawer`, `useOverlay`
|
|
320
|
-
| `useModalContext`
|
|
321
|
-
| `useLoading`, `withLoading`
|
|
322
|
-
| `useLoadingState`
|
|
323
|
-
| `useDirtyGuard`
|
|
324
|
-
| `useFileDrop`
|
|
325
|
-
| `useHotkey`
|
|
326
|
-
| `useCopy`
|
|
327
|
-
| `useTableSort`
|
|
328
|
-
| `usePasswordStrength`
|
|
329
|
-
| `useTheme`
|
|
330
|
-
| `usePreset`
|
|
331
|
-
| `
|
|
332
|
-
| `
|
|
333
|
-
| `
|
|
334
|
-
| `
|
|
335
|
-
| `
|
|
336
|
-
| `
|
|
337
|
-
| `
|
|
311
|
+
| Composable | Purpose and when to use it | Signature and notes | Playground |
|
|
312
|
+
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
|
|
313
|
+
| `useForm` | State of a form: values, errors, warnings, touched, dirty, submit, server errors. Use it for every form with more than one field. | `useForm({ schema, values, validator, warnings, validateOn, onSubmit, onInvalid, submitError, messages, translateMessage })`. Schema fields: `initial`, `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`. `validator` takes any Standard Schema (Zod 4, Valibot, ArkType). Returns `values`, `errors`, `dirty`, `dirtyFields`, `valid`, `submitting`, `validate`, `validateSync`, `setError`, `setErrors`, `setIssues`, `reset(next?)`, `submit`, `touch`, `isRequired`. Pass it to `Form`. | `core/form.vue` |
|
|
314
|
+
| `useField`, `useFieldControl` | Build your own field control that reads the surrounding `FormField` (id, invalid, described by). | `useFieldControl({ role: 'auxiliary' })` for a secondary control. `control.setControlError(message)` reports a control level error. | `core/form-field.vue` |
|
|
315
|
+
| `provideFieldBoundary`, `provideAuxiliaryControls` | In your own overlay component, stop controls from inheriting the field context of the trigger. | Call in `setup`. | - |
|
|
316
|
+
| `toast` / `useToast` | Toasts. | `toast(title, opts)`, `toast.success`, `.error`, `.warning`, `.info`, `.loading`, `.promise(promise, { loading, success, error })`, `.update(id, opts)`, `.dismiss(id)`. Options: `description` (string or list), `action` (`label`, `onClick`), `duration`, `dismissible`. | `overlays/toast.vue` |
|
|
317
|
+
| `useConfirm` | Ask yes or no. Returns a promise of `true` or `false`. | `await useConfirm()({ title, description, tone, confirmLabel, cancelLabel, body })`. | `overlays/hooks.vue` |
|
|
318
|
+
| `useAlert` | Show a message and wait until the user closes it. | `await useAlert()({ title, description, tone })`. | `overlays/hooks.vue` |
|
|
319
|
+
| `usePrompt` | Ask for one text value. Returns the string or `null`. | `await usePrompt()({ title, label, value, placeholder, type, required, validate(value), onConfirm(value) })`. | `overlays/hooks.vue` |
|
|
320
|
+
| `useModal`, `useDrawer`, `useOverlay` | Open a component as a modal or drawer and await its result. Use it when the content is a component with its own logic. | `const result = await useModal().open(Component, props, { title, size, beforeClose })`. The handle has `id`, `close(result)`, `update(props)`. `useModal().close(id?)`, `closeAll()`. `useOverlay` is the base (option `as`). | `overlays/hooks.vue` |
|
|
321
|
+
| `useModalContext` | Inside a component opened by `useModal` or `useDrawer`: close with a result and set the loading state. | `const { close, setLoading } = useModalContext<R>()`. | `overlays/hooks.vue` |
|
|
322
|
+
| `useLoading`, `withLoading` | Global loading: top bar after a delay, or a blocking screen. Ref counted. | `useLoading().wrap(promise, { blocking, label })`, `start()` returns a stop function. `withLoading(fn)` wraps a function. Needs `OverlayHost`. | `overlays/hooks.vue` |
|
|
323
|
+
| `useLoadingState` | Local loading and error flag for a button or form. | `const { loading, error, run } = useLoadingState()`; `await run(() => api.save())`. | `overlays/hooks.vue` |
|
|
324
|
+
| `useDirtyGuard` | Ask before leaving a page or closing the tab with unsaved changes. | `useDirtyGuard(dirty, options?)`. Returns `confirmLeave()` and `allowNext()`. `FormPage` already uses it. | `templates/form-page.vue` |
|
|
325
|
+
| `useFileDrop` | Make any element a drop zone. Use `FileInput` when you need the full control. | `useFileDrop(targetRef, { onDrop(files, event), disabled, ignore })` returns `{ over, reset }`. `readDroppedFiles(dataTransfer)` walks dropped folders. | `forms/file-input.vue` |
|
|
326
|
+
| `useHotkey` | Keyboard shortcut for a page or component. | `useHotkey('mod+k', handler, { enabled, preventDefault, allowInInputs, target })`. `formatHotkey` and `ariaKeyShortcuts` are exported. | `overlays/command-palette.vue` |
|
|
327
|
+
| `useCopy` | Copy text with a `copied` flag. | `const { copy, copied, error } = useCopy({ resetAfter })`. | `layout/copy-button.vue` |
|
|
328
|
+
| `useTableSort` | Client side sort for `Table`. | `const { sort, sorted } = useTableSort(rows, { columns, initial, locale })`. Bind `sort` to `v-model:sort` and render `sorted`. | `data/table.vue` |
|
|
329
|
+
| `usePasswordStrength` | Score a password. Also `scorePassword` and `generatePassword`. | Returns the level 0 to 4. `PasswordInput` already uses it. | `forms/password-input.vue` |
|
|
330
|
+
| `useTheme` | Read or set the theme preference (system, light, dark). | `const { preference, resolved, set } = useTheme()`. Nuxt module stores it in a cookie. | `layout/theme-switch.vue` |
|
|
331
|
+
| `usePreset` | Read or set the visual preset. | `presetOptions` lists the presets. | `presets.vue` (pages root) |
|
|
332
|
+
| `usePreference`, `usePreferences`, `createPreferences`, `providePreferences` | Remember UI choices per user (theme, preset, sidebar collapsed, DataGrid columns and page size, your own keys) in one pluggable store. | `app.use(createPreferences(store))`; a store is `{ get, set, subscribe?, clientOnly? }`. `createRemotePreferenceStore({ initial, save, debounce })` for an API, `createLocalPreferenceStore()` is the default. `usePreference(key, fallback, { validate })` is a writable computed. Keys: `theme`, `preset`, `shell:<storageKey>`, `grid:<storageKey>` (`PREFERENCE_KEYS`). | `core/preferences.vue` |
|
|
333
|
+
| `useAppShell` | Read the `AppShell` state (collapsed, open) from a child component. | Returns the shell context or `null` outside a shell. | `layout/app-shell.vue` |
|
|
334
|
+
| `useRouteState` | Bind a ref to a URL query parameter: deep links to drawers and modals, back button closes them, filters in the URL. | `useRouteState(key, { parse, serialize, default, history: 'push' \| 'replace' })`. Returns a ref; `undefined` or `''` removes the parameter. No-op without a router. | `overlays/drawer.vue` |
|
|
335
|
+
| `useScrollLock` | Lock the page scroll while something is open. | `useScrollLock(activeRef)`. | - |
|
|
336
|
+
| `useLocale` | Translate component texts and read the active locale (en, it, de). | `const { locale, t } = useLocale()`. `provideLocale` and `createLocale` set it. Nuxt follows `k.locale`. | `languages.vue` (pages root) |
|
|
337
|
+
| `useIcons` helpers, `createIcons`, `provideIcons` | Register your own icons by name. | Nuxt: option `k.icons: { dir: '~/assets/icons' }`. | `components/core/icon.vue` |
|
|
338
|
+
| `useLinkComponent`, `createLinkComponent` | Use the router link (for example `NuxtLink`) for every `to` prop. | The Nuxt module does it for you. | - |
|
|
339
|
+
| `useDashboard` (Nuxt only) | Runtime account, breadcrumbs and badges for the `k-dashboard` layout. | Auto-imported by the module. | `layouts/` of the playground |
|
|
338
340
|
|
|
339
341
|
## Before you build your own
|
|
340
342
|
|