@xleddyl/443-components-vue 0.12.1 → 0.13.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 (9) hide show
  1. package/CATALOG.md +1 -1
  2. package/README.md +2 -1
  3. package/dist/grid/cells/ButtonCell.vue +35 -0
  4. package/dist/grid/cells/ButtonCell.vue.d.ts +432 -0
  5. package/dist/grid/data-grid.css +19 -0
  6. package/dist/grid/index.d.ts +1 -0
  7. package/dist/grid/index.mjs +1 -0
  8. package/dist/grid/types.d.ts +6 -0
  9. package/package.json +1 -1
package/CATALOG.md CHANGED
@@ -279,7 +279,7 @@ Import from `@xleddyl/443-components-vue/grid`. It wraps AG Grid Community.
279
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`, `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` |
280
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. | `grid/spreadsheet.vue` |
281
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`). | `grid/data-grid.vue` |
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). | `grid/data-grid.vue` |
283
283
 
284
284
  Grid helpers: `registerGridModules`, `registerGridEditorModules`, `registerGridFilterModules`, `registerGridSpreadsheetModules` (register AG Grid modules by hand), `createGridTheme`, `parseTsv`, `formatTsv`.
285
285
 
package/README.md CHANGED
@@ -354,7 +354,7 @@ Several controls in one `FormField`. Only the primary control takes the field id
354
354
  | layout | Accordion, AppShell, Breadcrumbs, Card, CopyButton, Grid, NavLink, PageHeader, Separator, Sidebar, SidebarNav, SidebarSection, Stack, Stepper, Tabs, ThemeSwitch, Toolbar |
355
355
  | templates | DashboardLayout, AuthLayout, DashboardPage, ListPage, DetailPage, FormPage, SettingsPage, SettingsSection, SettingsModal, SettingsGroup, AppearanceSettings, SaveBar, ErrorPage, NotFoundPage, EmptyPage, Brand, AccountMenu |
356
356
  | feedback | Alert, EmptyState, LoadingOverlay, Meter, Progress, ProgressRing, Skeleton |
357
- | grid | DataGrid, GridToolbar, cell renderers (BadgeCell, BooleanCell, DateCell, EmptyCell, ImageCell, LinkCell) |
357
+ | grid | DataGrid, GridToolbar, cell renderers (BadgeCell, BooleanCell, ButtonCell, DateCell, EmptyCell, ImageCell, LinkCell) |
358
358
  | editor | RichTextEditor |
359
359
  | chart | ChartPanel, ChartLegend, LineChart, BarChart, DoughnutChart |
360
360
 
@@ -806,6 +806,7 @@ Accessibility related props and defaults:
806
806
 
807
807
  - Rendering stays virtual: the range, active cell and dirty marks are `cellClassRules` (merged with your own) and only the rendered cells of the affected rows refresh. The range tint is `--k-grid-range-background`, its border and the fill handle `--k-grid-range-border`, dirty cells `--k-grid-dirty-background` and `--k-grid-dirty-marker`. `parseTsv` and `formatTsv` are exported from `/grid`.
808
808
  - `DataGrid` row classes: `gridOptions.rowClass`, `gridOptions.rowClassRules` (`{ 'is-archived': (params) => params.data?.archived }`) and `gridOptions.getRowClass` reach AG Grid unchanged. Style the classes in host CSS under `.k-data-grid .ag-row.<class>`.
809
+ - `ButtonCell` renders the value as an inline button that calls `onClick(value, data, event)` without selecting or clicking the row (for example to open a modal with details of that cell). `label` and `ariaLabel` customize the text and the accessible name, `emptyLabel` shows a button for empty values; without a label and with no value it renders the empty placeholder. It uses the column `valueFormatter` output when present.
809
810
  - `LinkCell` renders internal hrefs (starting with `/`) with the configured link component (`NuxtLink` in Nuxt, `createLinkComponent(RouterLink)` in plain Vue), so they navigate without a reload; other hrefs stay a plain `<a>`.
810
811
  - `DataGrid` translates the AG Grid ARIA strings through the catalog (`grid.*`; your own `localeText` still wins) and announces row count changes.
811
812
 
package/dist/grid/cells/ButtonCell.vue ADDED
@@ -0,0 +1,35 @@
1
+ <template>
2
+ <button
3
+ v-if="text"
4
+ type="button"
5
+ class="k-data-grid-button"
6
+ :aria-label="ariaLabel"
7
+ @click.stop="onClick"
8
+ @mousedown.stop
9
+ >
10
+ {{ text }}
11
+ </button>
12
+ <EmptyCell v-else :context="cellContext" />
13
+ </template>
14
+
15
+ <script setup>
16
+ import { computed } from "vue";
17
+ import EmptyCell from "./EmptyCell.vue";
18
+ const props = defineProps({
19
+ params: { type: Object, required: true }
20
+ });
21
+ const raw = computed(() => props.params.value);
22
+ const text = computed(() => {
23
+ const label = props.params.label?.(raw.value, props.params.data);
24
+ if (label !== void 0) return label;
25
+ if (raw.value === null || raw.value === void 0 || raw.value === "") {
26
+ return props.params.emptyLabel ?? "";
27
+ }
28
+ return props.params.valueFormatted ?? String(raw.value);
29
+ });
30
+ const ariaLabel = computed(() => props.params.ariaLabel?.(raw.value, props.params.data));
31
+ function onClick(event) {
32
+ props.params.onClick?.(raw.value, props.params.data, event);
33
+ }
34
+ const cellContext = computed(() => props.params.context);
35
+ </script>
package/dist/grid/cells/ButtonCell.vue.d.ts ADDED
@@ -0,0 +1,432 @@
1
+ import type { ButtonCellParams, GridCellContext } from '../types';
2
+ declare const __VLS_export: import("vue").DefineComponent<{
3
+ params: import("ag-grid-community").ICellRendererParams<any, any, any> & ButtonCellParams<unknown>;
4
+ autofocus?: (boolean | "true" | "false") | undefined;
5
+ disabled?: (boolean | "true" | "false") | undefined;
6
+ form?: string | undefined | undefined;
7
+ formaction?: string | undefined | undefined;
8
+ formenctype?: string | undefined | undefined;
9
+ formmethod?: string | undefined | undefined;
10
+ formnovalidate?: (boolean | "true" | "false") | undefined;
11
+ formtarget?: string | undefined | undefined;
12
+ name?: string | undefined | undefined;
13
+ type?: "submit" | "reset" | "button" | undefined | undefined;
14
+ value?: string | number | readonly string[] | undefined;
15
+ popovertarget?: string | undefined;
16
+ popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
17
+ innerHTML?: string | undefined | undefined;
18
+ class?: import("vue").ClassValue;
19
+ style?: import("vue").StyleValue;
20
+ accesskey?: string | undefined | undefined;
21
+ contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
22
+ contextmenu?: string | undefined | undefined;
23
+ dir?: string | undefined | undefined;
24
+ draggable?: (boolean | "true" | "false") | undefined;
25
+ enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
26
+ enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
27
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
28
+ id?: string | undefined | undefined;
29
+ inert?: (boolean | "true" | "false") | undefined;
30
+ lang?: string | undefined | undefined;
31
+ placeholder?: string | undefined | undefined;
32
+ spellcheck?: (boolean | "true" | "false") | undefined;
33
+ tabindex?: (string | number) | undefined;
34
+ title?: string | undefined | undefined;
35
+ translate?: "yes" | "no" | undefined | undefined;
36
+ radiogroup?: string | undefined | undefined;
37
+ role?: string | undefined | undefined;
38
+ about?: string | undefined | undefined;
39
+ datatype?: string | undefined | undefined;
40
+ inlist?: any;
41
+ prefix?: string | undefined | undefined;
42
+ property?: string | undefined | undefined;
43
+ resource?: string | undefined | undefined;
44
+ typeof?: string | undefined | undefined;
45
+ vocab?: string | undefined | undefined;
46
+ autocapitalize?: string | undefined | undefined;
47
+ autocorrect?: string | undefined | undefined;
48
+ autosave?: string | undefined | undefined;
49
+ color?: string | undefined | undefined;
50
+ itemprop?: string | undefined | undefined;
51
+ itemscope?: (boolean | "true" | "false") | undefined;
52
+ itemtype?: string | undefined | undefined;
53
+ itemid?: string | undefined | undefined;
54
+ itemref?: string | undefined | undefined;
55
+ results?: (string | number) | undefined;
56
+ security?: string | undefined | undefined;
57
+ unselectable?: "on" | "off" | undefined | undefined;
58
+ inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
59
+ is?: string | undefined | undefined;
60
+ exportparts?: string | undefined;
61
+ part?: string | undefined;
62
+ popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
63
+ 'aria-activedescendant'?: string | undefined | undefined;
64
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
65
+ 'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
66
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
67
+ 'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
68
+ 'aria-colcount'?: (string | number) | undefined;
69
+ 'aria-colindex'?: (string | number) | undefined;
70
+ 'aria-colspan'?: (string | number) | undefined;
71
+ 'aria-controls'?: string | undefined | undefined;
72
+ 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
73
+ 'aria-describedby'?: string | undefined | undefined;
74
+ 'aria-details'?: string | undefined | undefined;
75
+ 'aria-disabled'?: (boolean | "true" | "false") | undefined;
76
+ 'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
77
+ 'aria-errormessage'?: string | undefined | undefined;
78
+ 'aria-expanded'?: (boolean | "true" | "false") | undefined;
79
+ 'aria-flowto'?: string | undefined | undefined;
80
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
81
+ 'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
82
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
83
+ 'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
84
+ 'aria-keyshortcuts'?: string | undefined | undefined;
85
+ 'aria-label'?: string | undefined | undefined;
86
+ 'aria-labelledby'?: string | undefined | undefined;
87
+ 'aria-level'?: (string | number) | undefined;
88
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
89
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
90
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
91
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
92
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
93
+ 'aria-owns'?: string | undefined | undefined;
94
+ 'aria-placeholder'?: string | undefined | undefined;
95
+ 'aria-posinset'?: (string | number) | undefined;
96
+ 'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
97
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
98
+ 'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
99
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
100
+ 'aria-roledescription'?: string | undefined | undefined;
101
+ 'aria-rowcount'?: (string | number) | undefined;
102
+ 'aria-rowindex'?: (string | number) | undefined;
103
+ 'aria-rowspan'?: (string | number) | undefined;
104
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
105
+ 'aria-setsize'?: (string | number) | undefined;
106
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
107
+ 'aria-valuemax'?: (string | number) | undefined;
108
+ 'aria-valuemin'?: (string | number) | undefined;
109
+ 'aria-valuenow'?: (string | number) | undefined;
110
+ 'aria-valuetext'?: string | undefined | undefined;
111
+ onCopy?: ((payload: ClipboardEvent) => void) | undefined;
112
+ onCut?: ((payload: ClipboardEvent) => void) | undefined;
113
+ onPaste?: ((payload: ClipboardEvent) => void) | undefined;
114
+ onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
115
+ onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
116
+ onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
117
+ onDrag?: ((payload: DragEvent) => void) | undefined;
118
+ onDragend?: ((payload: DragEvent) => void) | undefined;
119
+ onDragenter?: ((payload: DragEvent) => void) | undefined;
120
+ onDragexit?: ((payload: DragEvent) => void) | undefined;
121
+ onDragleave?: ((payload: DragEvent) => void) | undefined;
122
+ onDragover?: ((payload: DragEvent) => void) | undefined;
123
+ onDragstart?: ((payload: DragEvent) => void) | undefined;
124
+ onDrop?: ((payload: DragEvent) => void) | undefined;
125
+ onFocus?: ((payload: FocusEvent) => void) | undefined;
126
+ onFocusin?: ((payload: FocusEvent) => void) | undefined;
127
+ onFocusout?: ((payload: FocusEvent) => void) | undefined;
128
+ onBlur?: ((payload: FocusEvent) => void) | undefined;
129
+ onChange?: ((payload: Event) => void) | undefined;
130
+ onBeforeinput?: ((payload: InputEvent) => void) | undefined;
131
+ onFormdata?: ((payload: FormDataEvent) => void) | undefined;
132
+ onInput?: ((payload: InputEvent) => void) | undefined;
133
+ onReset?: ((payload: Event) => void) | undefined;
134
+ onSubmit?: ((payload: SubmitEvent) => void) | undefined;
135
+ onInvalid?: ((payload: Event) => void) | undefined;
136
+ onFullscreenchange?: ((payload: Event) => void) | undefined;
137
+ onFullscreenerror?: ((payload: Event) => void) | undefined;
138
+ onLoad?: ((payload: Event) => void) | undefined;
139
+ onError?: ((payload: Event) => void) | undefined;
140
+ onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
141
+ onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
142
+ onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
143
+ onDblclick?: ((payload: MouseEvent) => void) | undefined;
144
+ onMousedown?: ((payload: MouseEvent) => void) | undefined;
145
+ onMouseenter?: ((payload: MouseEvent) => void) | undefined;
146
+ onMouseleave?: ((payload: MouseEvent) => void) | undefined;
147
+ onMousemove?: ((payload: MouseEvent) => void) | undefined;
148
+ onMouseout?: ((payload: MouseEvent) => void) | undefined;
149
+ onMouseover?: ((payload: MouseEvent) => void) | undefined;
150
+ onMouseup?: ((payload: MouseEvent) => void) | undefined;
151
+ onAbort?: ((payload: UIEvent) => void) | undefined;
152
+ onCanplay?: ((payload: Event) => void) | undefined;
153
+ onCanplaythrough?: ((payload: Event) => void) | undefined;
154
+ onDurationchange?: ((payload: Event) => void) | undefined;
155
+ onEmptied?: ((payload: Event) => void) | undefined;
156
+ onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
157
+ onEnded?: ((payload: Event) => void) | undefined;
158
+ onLoadeddata?: ((payload: Event) => void) | undefined;
159
+ onLoadedmetadata?: ((payload: Event) => void) | undefined;
160
+ onLoadstart?: ((payload: Event) => void) | undefined;
161
+ onPause?: ((payload: Event) => void) | undefined;
162
+ onPlay?: ((payload: Event) => void) | undefined;
163
+ onPlaying?: ((payload: Event) => void) | undefined;
164
+ onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
165
+ onRatechange?: ((payload: Event) => void) | undefined;
166
+ onSeeked?: ((payload: Event) => void) | undefined;
167
+ onSeeking?: ((payload: Event) => void) | undefined;
168
+ onStalled?: ((payload: Event) => void) | undefined;
169
+ onSuspend?: ((payload: Event) => void) | undefined;
170
+ onTimeupdate?: ((payload: Event) => void) | undefined;
171
+ onVolumechange?: ((payload: Event) => void) | undefined;
172
+ onWaiting?: ((payload: Event) => void) | undefined;
173
+ onSelect?: ((payload: Event) => void) | undefined;
174
+ onScroll?: ((payload: Event) => void) | undefined;
175
+ onScrollend?: ((payload: Event) => void) | undefined;
176
+ onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
177
+ onTouchend?: ((payload: TouchEvent) => void) | undefined;
178
+ onTouchmove?: ((payload: TouchEvent) => void) | undefined;
179
+ onTouchstart?: ((payload: TouchEvent) => void) | undefined;
180
+ onAuxclick?: ((payload: PointerEvent) => void) | undefined;
181
+ onClick?: ((payload: PointerEvent) => void) | undefined;
182
+ onContextmenu?: ((payload: PointerEvent) => void) | undefined;
183
+ onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
184
+ onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
185
+ onPointerdown?: ((payload: PointerEvent) => void) | undefined;
186
+ onPointermove?: ((payload: PointerEvent) => void) | undefined;
187
+ onPointerup?: ((payload: PointerEvent) => void) | undefined;
188
+ onPointercancel?: ((payload: PointerEvent) => void) | undefined;
189
+ onPointerenter?: ((payload: PointerEvent) => void) | undefined;
190
+ onPointerleave?: ((payload: PointerEvent) => void) | undefined;
191
+ onPointerover?: ((payload: PointerEvent) => void) | undefined;
192
+ onPointerout?: ((payload: PointerEvent) => void) | undefined;
193
+ onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
194
+ onToggle?: ((payload: ToggleEvent) => void) | undefined;
195
+ onWheel?: ((payload: WheelEvent) => void) | undefined;
196
+ onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
197
+ onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
198
+ onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
199
+ onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
200
+ onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
201
+ onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
202
+ onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
203
+ onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
204
+ onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
205
+ key?: PropertyKey | undefined;
206
+ ref?: import("vue").VNodeRef | undefined;
207
+ ref_for?: boolean | undefined | undefined;
208
+ ref_key?: string | undefined | undefined;
209
+ context?: GridCellContext;
210
+ onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
211
+ onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
212
+ onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
213
+ onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
214
+ onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
215
+ onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
216
+ }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
217
+ params: import("ag-grid-community").ICellRendererParams<any, any, any> & ButtonCellParams<unknown>;
218
+ autofocus?: (boolean | "true" | "false") | undefined;
219
+ disabled?: (boolean | "true" | "false") | undefined;
220
+ form?: string | undefined | undefined;
221
+ formaction?: string | undefined | undefined;
222
+ formenctype?: string | undefined | undefined;
223
+ formmethod?: string | undefined | undefined;
224
+ formnovalidate?: (boolean | "true" | "false") | undefined;
225
+ formtarget?: string | undefined | undefined;
226
+ name?: string | undefined | undefined;
227
+ type?: "submit" | "reset" | "button" | undefined | undefined;
228
+ value?: string | number | readonly string[] | undefined;
229
+ popovertarget?: string | undefined;
230
+ popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
231
+ innerHTML?: string | undefined | undefined;
232
+ class?: import("vue").ClassValue;
233
+ style?: import("vue").StyleValue;
234
+ accesskey?: string | undefined | undefined;
235
+ contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
236
+ contextmenu?: string | undefined | undefined;
237
+ dir?: string | undefined | undefined;
238
+ draggable?: (boolean | "true" | "false") | undefined;
239
+ enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
240
+ enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
241
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
242
+ id?: string | undefined | undefined;
243
+ inert?: (boolean | "true" | "false") | undefined;
244
+ lang?: string | undefined | undefined;
245
+ placeholder?: string | undefined | undefined;
246
+ spellcheck?: (boolean | "true" | "false") | undefined;
247
+ tabindex?: (string | number) | undefined;
248
+ title?: string | undefined | undefined;
249
+ translate?: "yes" | "no" | undefined | undefined;
250
+ radiogroup?: string | undefined | undefined;
251
+ role?: string | undefined | undefined;
252
+ about?: string | undefined | undefined;
253
+ datatype?: string | undefined | undefined;
254
+ inlist?: any;
255
+ prefix?: string | undefined | undefined;
256
+ property?: string | undefined | undefined;
257
+ resource?: string | undefined | undefined;
258
+ typeof?: string | undefined | undefined;
259
+ vocab?: string | undefined | undefined;
260
+ autocapitalize?: string | undefined | undefined;
261
+ autocorrect?: string | undefined | undefined;
262
+ autosave?: string | undefined | undefined;
263
+ color?: string | undefined | undefined;
264
+ itemprop?: string | undefined | undefined;
265
+ itemscope?: (boolean | "true" | "false") | undefined;
266
+ itemtype?: string | undefined | undefined;
267
+ itemid?: string | undefined | undefined;
268
+ itemref?: string | undefined | undefined;
269
+ results?: (string | number) | undefined;
270
+ security?: string | undefined | undefined;
271
+ unselectable?: "on" | "off" | undefined | undefined;
272
+ inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
273
+ is?: string | undefined | undefined;
274
+ exportparts?: string | undefined;
275
+ part?: string | undefined;
276
+ popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
277
+ 'aria-activedescendant'?: string | undefined | undefined;
278
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
279
+ 'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
280
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
281
+ 'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
282
+ 'aria-colcount'?: (string | number) | undefined;
283
+ 'aria-colindex'?: (string | number) | undefined;
284
+ 'aria-colspan'?: (string | number) | undefined;
285
+ 'aria-controls'?: string | undefined | undefined;
286
+ 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
287
+ 'aria-describedby'?: string | undefined | undefined;
288
+ 'aria-details'?: string | undefined | undefined;
289
+ 'aria-disabled'?: (boolean | "true" | "false") | undefined;
290
+ 'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
291
+ 'aria-errormessage'?: string | undefined | undefined;
292
+ 'aria-expanded'?: (boolean | "true" | "false") | undefined;
293
+ 'aria-flowto'?: string | undefined | undefined;
294
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
295
+ 'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
296
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
297
+ 'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
298
+ 'aria-keyshortcuts'?: string | undefined | undefined;
299
+ 'aria-label'?: string | undefined | undefined;
300
+ 'aria-labelledby'?: string | undefined | undefined;
301
+ 'aria-level'?: (string | number) | undefined;
302
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
303
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
304
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
305
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
306
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
307
+ 'aria-owns'?: string | undefined | undefined;
308
+ 'aria-placeholder'?: string | undefined | undefined;
309
+ 'aria-posinset'?: (string | number) | undefined;
310
+ 'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
311
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
312
+ 'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
313
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
314
+ 'aria-roledescription'?: string | undefined | undefined;
315
+ 'aria-rowcount'?: (string | number) | undefined;
316
+ 'aria-rowindex'?: (string | number) | undefined;
317
+ 'aria-rowspan'?: (string | number) | undefined;
318
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
319
+ 'aria-setsize'?: (string | number) | undefined;
320
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
321
+ 'aria-valuemax'?: (string | number) | undefined;
322
+ 'aria-valuemin'?: (string | number) | undefined;
323
+ 'aria-valuenow'?: (string | number) | undefined;
324
+ 'aria-valuetext'?: string | undefined | undefined;
325
+ onCopy?: ((payload: ClipboardEvent) => void) | undefined;
326
+ onCut?: ((payload: ClipboardEvent) => void) | undefined;
327
+ onPaste?: ((payload: ClipboardEvent) => void) | undefined;
328
+ onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
329
+ onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
330
+ onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
331
+ onDrag?: ((payload: DragEvent) => void) | undefined;
332
+ onDragend?: ((payload: DragEvent) => void) | undefined;
333
+ onDragenter?: ((payload: DragEvent) => void) | undefined;
334
+ onDragexit?: ((payload: DragEvent) => void) | undefined;
335
+ onDragleave?: ((payload: DragEvent) => void) | undefined;
336
+ onDragover?: ((payload: DragEvent) => void) | undefined;
337
+ onDragstart?: ((payload: DragEvent) => void) | undefined;
338
+ onDrop?: ((payload: DragEvent) => void) | undefined;
339
+ onFocus?: ((payload: FocusEvent) => void) | undefined;
340
+ onFocusin?: ((payload: FocusEvent) => void) | undefined;
341
+ onFocusout?: ((payload: FocusEvent) => void) | undefined;
342
+ onBlur?: ((payload: FocusEvent) => void) | undefined;
343
+ onChange?: ((payload: Event) => void) | undefined;
344
+ onBeforeinput?: ((payload: InputEvent) => void) | undefined;
345
+ onFormdata?: ((payload: FormDataEvent) => void) | undefined;
346
+ onInput?: ((payload: InputEvent) => void) | undefined;
347
+ onReset?: ((payload: Event) => void) | undefined;
348
+ onSubmit?: ((payload: SubmitEvent) => void) | undefined;
349
+ onInvalid?: ((payload: Event) => void) | undefined;
350
+ onFullscreenchange?: ((payload: Event) => void) | undefined;
351
+ onFullscreenerror?: ((payload: Event) => void) | undefined;
352
+ onLoad?: ((payload: Event) => void) | undefined;
353
+ onError?: ((payload: Event) => void) | undefined;
354
+ onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
355
+ onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
356
+ onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
357
+ onDblclick?: ((payload: MouseEvent) => void) | undefined;
358
+ onMousedown?: ((payload: MouseEvent) => void) | undefined;
359
+ onMouseenter?: ((payload: MouseEvent) => void) | undefined;
360
+ onMouseleave?: ((payload: MouseEvent) => void) | undefined;
361
+ onMousemove?: ((payload: MouseEvent) => void) | undefined;
362
+ onMouseout?: ((payload: MouseEvent) => void) | undefined;
363
+ onMouseover?: ((payload: MouseEvent) => void) | undefined;
364
+ onMouseup?: ((payload: MouseEvent) => void) | undefined;
365
+ onAbort?: ((payload: UIEvent) => void) | undefined;
366
+ onCanplay?: ((payload: Event) => void) | undefined;
367
+ onCanplaythrough?: ((payload: Event) => void) | undefined;
368
+ onDurationchange?: ((payload: Event) => void) | undefined;
369
+ onEmptied?: ((payload: Event) => void) | undefined;
370
+ onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
371
+ onEnded?: ((payload: Event) => void) | undefined;
372
+ onLoadeddata?: ((payload: Event) => void) | undefined;
373
+ onLoadedmetadata?: ((payload: Event) => void) | undefined;
374
+ onLoadstart?: ((payload: Event) => void) | undefined;
375
+ onPause?: ((payload: Event) => void) | undefined;
376
+ onPlay?: ((payload: Event) => void) | undefined;
377
+ onPlaying?: ((payload: Event) => void) | undefined;
378
+ onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
379
+ onRatechange?: ((payload: Event) => void) | undefined;
380
+ onSeeked?: ((payload: Event) => void) | undefined;
381
+ onSeeking?: ((payload: Event) => void) | undefined;
382
+ onStalled?: ((payload: Event) => void) | undefined;
383
+ onSuspend?: ((payload: Event) => void) | undefined;
384
+ onTimeupdate?: ((payload: Event) => void) | undefined;
385
+ onVolumechange?: ((payload: Event) => void) | undefined;
386
+ onWaiting?: ((payload: Event) => void) | undefined;
387
+ onSelect?: ((payload: Event) => void) | undefined;
388
+ onScroll?: ((payload: Event) => void) | undefined;
389
+ onScrollend?: ((payload: Event) => void) | undefined;
390
+ onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
391
+ onTouchend?: ((payload: TouchEvent) => void) | undefined;
392
+ onTouchmove?: ((payload: TouchEvent) => void) | undefined;
393
+ onTouchstart?: ((payload: TouchEvent) => void) | undefined;
394
+ onAuxclick?: ((payload: PointerEvent) => void) | undefined;
395
+ onClick?: ((payload: PointerEvent) => void) | undefined;
396
+ onContextmenu?: ((payload: PointerEvent) => void) | undefined;
397
+ onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
398
+ onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
399
+ onPointerdown?: ((payload: PointerEvent) => void) | undefined;
400
+ onPointermove?: ((payload: PointerEvent) => void) | undefined;
401
+ onPointerup?: ((payload: PointerEvent) => void) | undefined;
402
+ onPointercancel?: ((payload: PointerEvent) => void) | undefined;
403
+ onPointerenter?: ((payload: PointerEvent) => void) | undefined;
404
+ onPointerleave?: ((payload: PointerEvent) => void) | undefined;
405
+ onPointerover?: ((payload: PointerEvent) => void) | undefined;
406
+ onPointerout?: ((payload: PointerEvent) => void) | undefined;
407
+ onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
408
+ onToggle?: ((payload: ToggleEvent) => void) | undefined;
409
+ onWheel?: ((payload: WheelEvent) => void) | undefined;
410
+ onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
411
+ onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
412
+ onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
413
+ onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
414
+ onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
415
+ onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
416
+ onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
417
+ onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
418
+ onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
419
+ key?: PropertyKey | undefined;
420
+ ref?: import("vue").VNodeRef | undefined;
421
+ ref_for?: boolean | undefined | undefined;
422
+ ref_key?: string | undefined | undefined;
423
+ context?: GridCellContext;
424
+ onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
425
+ onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
426
+ onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
427
+ onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
428
+ onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
429
+ onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
430
+ }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
431
+ declare const _default: typeof __VLS_export;
432
+ export default _default;
package/dist/grid/data-grid.css CHANGED
@@ -276,6 +276,25 @@
276
276
  text-decoration-color: currentColor;
277
277
  }
278
278
 
279
+ .k-data-grid-button {
280
+ margin: 0;
281
+ padding: 0;
282
+ font: inherit;
283
+ color: var(--k-accent-text);
284
+ text-align: inherit;
285
+ text-decoration: underline dotted;
286
+ text-decoration-color: var(--k-accent-line);
287
+ text-underline-offset: 2px;
288
+ cursor: pointer;
289
+ background: none;
290
+ border: 0;
291
+ transition: text-decoration-color var(--k-duration) var(--k-ease);
292
+ }
293
+
294
+ .k-data-grid-button:hover {
295
+ text-decoration-color: currentColor;
296
+ }
297
+
279
298
  .k-data-grid-clipboard {
280
299
  position: fixed;
281
300
  inset-block-start: 0;
package/dist/grid/index.d.ts CHANGED
@@ -6,6 +6,7 @@ export { default as EmptyCell } from './cells/EmptyCell.vue';
6
6
  export { default as BadgeCell } from './cells/BadgeCell.vue';
7
7
  export { default as ImageCell } from './cells/ImageCell.vue';
8
8
  export { default as LinkCell } from './cells/LinkCell.vue';
9
+ export { default as ButtonCell } from './cells/ButtonCell.vue';
9
10
  export { registerGridEditorModules, registerGridFilterModules, registerGridModules, registerGridSpreadsheetModules, } from './modules';
10
11
  export { createGridTheme } from './theme';
11
12
  export { formatTsv, parseTsv } from './tsv';
package/dist/grid/index.mjs CHANGED
@@ -6,6 +6,7 @@ export { default as EmptyCell } from "./cells/EmptyCell.vue";
6
6
  export { default as BadgeCell } from "./cells/BadgeCell.vue";
7
7
  export { default as ImageCell } from "./cells/ImageCell.vue";
8
8
  export { default as LinkCell } from "./cells/LinkCell.vue";
9
+ export { default as ButtonCell } from "./cells/ButtonCell.vue";
9
10
  export {
10
11
  registerGridEditorModules,
11
12
  registerGridFilterModules,
package/dist/grid/types.d.ts CHANGED
@@ -65,6 +65,12 @@ export interface LinkCellParams<T = unknown> {
65
65
  label?: (value: unknown, data: T | undefined) => string;
66
66
  target?: string;
67
67
  }
68
+ export interface ButtonCellParams<T = unknown> {
69
+ onClick?: (value: unknown, data: T | undefined, event: MouseEvent) => void;
70
+ label?: (value: unknown, data: T | undefined) => string | undefined;
71
+ ariaLabel?: (value: unknown, data: T | undefined) => string | undefined;
72
+ emptyLabel?: string;
73
+ }
68
74
  export type CellProps<P> = {
69
75
  params: ICellRendererParams & P;
70
76
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xleddyl/443-components-vue",
3
- "version": "0.12.1",
3
+ "version": "0.13.0",
4
4
  "description": "Compact, scoped dashboard components for Vue and Nuxt",
5
5
  "license": "MIT",
6
6
  "author": "Edoardo Alberti (https://github.com/xleddyl)",