@xleddyl/443-components-vue 0.13.0 → 0.14.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 +16 -16
- package/README.md +1 -1
- package/dist/components/data/Tree.vue +6 -1
- package/dist/components/data/Tree.vue.d.ts +3 -0
- package/package.json +1 -1
package/CATALOG.md
CHANGED
|
@@ -193,22 +193,22 @@ Mount `OverlayHost` once for the imperative hooks (see [Composables](#composable
|
|
|
193
193
|
|
|
194
194
|
## Data
|
|
195
195
|
|
|
196
|
-
| Component | Purpose and when to use it | Main props, models, slots, events
|
|
197
|
-
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
198
|
-
| `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`.
|
|
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
|
-
| `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.
|
|
201
|
-
| `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`.
|
|
202
|
-
| `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.
|
|
203
|
-
| `Tag` | Chip or label, optionally removable. Use `Badge` for a status. | Props: `label`, `tone`, `size`, `icon`, `removable`, `removeLabel`, `removeTabindex`, `disabled`. Slot: default. Event: `remove`.
|
|
204
|
-
| `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 }`).
|
|
205
|
-
| `Badge` | Status label, counter or dot. Not interactive. | Props: `label` (string or number), `tone`, `variant` (soft, solid, outline), `size`, `dot`, `pulse`, `icon`. Slot: default.
|
|
206
|
-
| `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`.
|
|
207
|
-
| `AvatarGroup` | Overlapping stack of avatars with "+N". | Props: `items` (`src`, `name`, `alt`), `max`, `size`, `shape`, `moreLabel`.
|
|
208
|
-
| `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`.
|
|
209
|
-
| `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>`.
|
|
210
|
-
| `Timeline` | Vertical list of events or activity. | Props: `items` (`title`, `description`, `time`, `datetime`, `icon`, `tone`), `compact`. Slot: `item`.
|
|
211
|
-
| `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`.
|
|
196
|
+
| Component | Purpose and when to use it | Main props, models, slots, events | Playground |
|
|
197
|
+
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
198
|
+
| `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`. | `data/pagination.vue` |
|
|
200
|
+
| `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
|
+
| `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
|
+
| `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` |
|
|
203
|
+
| `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` |
|
|
204
|
+
| `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` |
|
|
205
|
+
| `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` |
|
|
206
|
+
| `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` |
|
|
207
|
+
| `AvatarGroup` | Overlapping stack of avatars with "+N". | Props: `items` (`src`, `name`, `alt`), `max`, `size`, `shape`, `moreLabel`. | `data/avatar.vue` |
|
|
208
|
+
| `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` |
|
|
209
|
+
| `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` |
|
|
210
|
+
| `Timeline` | Vertical list of events or activity. | Props: `items` (`title`, `description`, `time`, `datetime`, `icon`, `tone`), `compact`. Slot: `item`. | `data/timeline.vue` |
|
|
211
|
+
| `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`, `moveButtons` (default `true`; `false` hides the row arrows, drag and Alt+arrow keys still work), `canDrop`, `size`, `checkmark`, `emptyText`. Slots: `label`, `meta`, `empty`. Events: `select`, `move`. | `data/tree.vue` |
|
|
212
212
|
|
|
213
213
|
## Layout
|
|
214
214
|
|
package/README.md
CHANGED
|
@@ -362,7 +362,7 @@ Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`,
|
|
|
362
362
|
|
|
363
363
|
### Lists, trees and uploads
|
|
364
364
|
|
|
365
|
-
- `Tree` takes `size="sm"` for dense rows, `checkmark`, `descriptionVariant` (`mono`, the default for paths and slugs, or `text`; a node can override it with its own `descriptionVariant`), `emptyText` (or `#empty`) and works inside a `FormField` (labelled and described by the field). With `reorderable` rows get a drag handle and Alt with the up and down arrows moves them; `nestable` also lets rows change level (drop in the middle of a row, Alt with left and right). The `move` event carries `{ node, target, position, from: { parent, index }, to: { parent, index } }`, `to.index` being the final index, and `applyTreeMove(nodes, move)` returns the updated tree. `canDrop(move)` vetoes a move. Moves are announced to screen readers.
|
|
365
|
+
- `Tree` takes `size="sm"` for dense rows, `checkmark`, `descriptionVariant` (`mono`, the default for paths and slugs, or `text`; a node can override it with its own `descriptionVariant`), `emptyText` (or `#empty`) and works inside a `FormField` (labelled and described by the field). With `reorderable` rows get a drag handle and Alt with the up and down arrows moves them; `nestable` also lets rows change level (drop in the middle of a row, Alt with left and right). Each row also shows move buttons; `moveButtons: false` hides them and keeps drag and the keyboard. The `move` event carries `{ node, target, position, from: { parent, index }, to: { parent, index } }`, `to.index` being the final index, and `applyTreeMove(nodes, move)` returns the updated tree. `canDrop(move)` vetoes a move. Moves are announced to screen readers.
|
|
366
366
|
- `Select` takes string, number or boolean option values (`{ value: true, label: 'Yes' }`); the model gets the option value back with its type and is typed `T | null | undefined`, so `v-model` works on a narrow ref (`Ref<'a' | 'b' | null>`). An option whose value is `''` is a real option: it is selected and shown with its own label, distinct from the placeholder, which still maps to `null`.
|
|
367
367
|
- `Input` and `Textarea` take `counter`: with a `maxlength` attribute they show `length / maxlength` inside the field, describe the control with "12 of 40 characters" (`form.characterCount`) and announce "Character limit reached" when it is hit.
|
|
368
368
|
- `Input` takes `transform: (value: string) => string`, applied to the typed text before it reaches the model (the caret keeps its place; IME composition is transformed when it ends). `:transform="(value) => value.toUpperCase()"` enforces uppercase codes. Values set from outside are not transformed.
|
|
@@ -91,7 +91,11 @@
|
|
|
91
91
|
<span v-if="checkmark && selectable" class="k-tree-check" aria-hidden="true">
|
|
92
92
|
<Icon v-if="selected === entry.node.id" name="check" />
|
|
93
93
|
</span>
|
|
94
|
-
<span
|
|
94
|
+
<span
|
|
95
|
+
v-if="canReorder && moveButtons && !entry.node.disabled"
|
|
96
|
+
class="k-tree-actions"
|
|
97
|
+
@click.stop
|
|
98
|
+
>
|
|
95
99
|
<Button
|
|
96
100
|
v-for="action in rowActions(entry)"
|
|
97
101
|
:key="action.direction"
|
|
@@ -142,6 +146,7 @@ const props = defineProps({
|
|
|
142
146
|
descriptionVariant: { type: String, required: false, default: "mono" },
|
|
143
147
|
reorderable: { type: Boolean, required: false },
|
|
144
148
|
nestable: { type: Boolean, required: false },
|
|
149
|
+
moveButtons: { type: Boolean, required: false, default: true },
|
|
145
150
|
canDrop: { type: Function, required: false },
|
|
146
151
|
reorderText: { type: String, required: false },
|
|
147
152
|
invalid: { type: Boolean, required: false, default: void 0 },
|
|
@@ -23,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
23
23
|
descriptionVariant?: TreeDescriptionVariant;
|
|
24
24
|
reorderable?: boolean;
|
|
25
25
|
nestable?: boolean;
|
|
26
|
+
moveButtons?: boolean;
|
|
26
27
|
canDrop?: (move: TreeMove) => boolean;
|
|
27
28
|
reorderText?: string;
|
|
28
29
|
invalid?: boolean;
|
|
@@ -237,6 +238,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
237
238
|
descriptionVariant?: TreeDescriptionVariant;
|
|
238
239
|
reorderable?: boolean;
|
|
239
240
|
nestable?: boolean;
|
|
241
|
+
moveButtons?: boolean;
|
|
240
242
|
canDrop?: (move: TreeMove) => boolean;
|
|
241
243
|
reorderText?: string;
|
|
242
244
|
invalid?: boolean;
|
|
@@ -445,6 +447,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
445
447
|
invalid: boolean;
|
|
446
448
|
selectable: boolean;
|
|
447
449
|
bordered: boolean;
|
|
450
|
+
moveButtons: boolean;
|
|
448
451
|
descriptionVariant: TreeDescriptionVariant;
|
|
449
452
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
450
453
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
package/package.json
CHANGED