@xleddyl/443-components-vue 0.16.2 → 0.16.4
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 +6 -6
- package/README.md +1 -0
- package/dist/composables/useTheme.mjs +2 -2
- package/dist/grid/DataGrid.vue +3 -0
- package/dist/grid/DataGrid.vue.d.ts +25 -0
- package/dist/grid/GridToolbar.vue +1 -0
- package/dist/grid/GridToolbar.vue.d.ts +3 -1
- package/dist/internal/core/theme.mjs +1 -1
- package/package.json +1 -1
package/CATALOG.md
CHANGED
|
@@ -275,12 +275,12 @@ Nuxt ready layouts: with `k: { layouts: true }` the module registers the layouts
|
|
|
275
275
|
|
|
276
276
|
Import from `@xleddyl/443-components-vue/grid`. It wraps AG Grid Community.
|
|
277
277
|
|
|
278
|
-
| Component | Purpose and when to use it | Main props, models, slots, events
|
|
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.
|
|
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).
|
|
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`, `actions-end` (after the column menu and export buttons), `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` |
|
|
284
284
|
|
|
285
285
|
Grid helpers: `registerGridModules`, `registerGridEditorModules`, `registerGridFilterModules`, `registerGridSpreadsheetModules` (register AG Grid modules by hand), `createGridTheme`, `parseTsv`, `formatTsv`.
|
|
286
286
|
|
package/README.md
CHANGED
|
@@ -826,6 +826,7 @@ Accessibility related props and defaults:
|
|
|
826
826
|
- `DataGrid` sort is a model: `v-model:sort` (`{ column, direction } | null`) sets the sorted column from outside (server side sort, a sort restored from the URL) and follows header clicks. Leave it unset for an uncontrolled grid. `sortChange` still fires with `serverSort`.
|
|
827
827
|
- `DataGrid` takes `rowHeight` and `headerHeight` (pixels) for an exact row size on top of `density`, and `headerText: (field, column) => string | undefined` to name every column that has a `field` and no `headerName` (from your i18n).
|
|
828
828
|
- `DataGrid` `filterable` registers the AG Grid text, number and date filters (`registerGridFilterModules()` does it without the prop) and turns `filter` on for every column. `filterChange(model, event)` fires with `api.getFilterModel()` whenever a column filter changes, also when the filters come from `gridOptions` or your own registered modules.
|
|
829
|
+
- `DataGrid` `#actions-end` slot: same props as `#actions`, rendered at the end of the toolbar, after the column menu and export buttons (a view switch). `GridToolbar` takes it as `#end`.
|
|
829
830
|
- `DataGrid` `#filters` slot: put your own filter controls (Select, Combobox, DateInput bound with `v-model`) in it and the toolbar shows a square funnel button right after the search input (at the start with `:searchable="false"`), before the `actions`. The button opens a `Modal` titled "Filters" that hosts the slot, so the filters still apply live; its footer has "Reset filters" (emits `filtersReset`, disabled while `filterCount` is 0) and "Show results" (closes it). `filterCount` shows the number of active filters as a badge on the button and in its accessible name ("Filters, 2 active", `grid.filtersActive`). Slot props: `{ close, count }`. Focus returns to the button on close, and the modal becomes a bottom sheet on small screens. `GridToolbar` takes the same slot, prop and event.
|
|
830
831
|
|
|
831
832
|
```vue
|
|
@@ -9,9 +9,9 @@ import {
|
|
|
9
9
|
import { THEME_KEY } from "../internal/keys.mjs";
|
|
10
10
|
export { THEME_STORAGE_KEY, isThemePreference } from "../internal/core/theme.mjs";
|
|
11
11
|
export const themeOptions = [
|
|
12
|
-
{ value: "system", label: "System", icon: "computer-desktop" },
|
|
13
12
|
{ value: "light", label: "Light", icon: "sun" },
|
|
14
|
-
{ value: "dark", label: "Dark", icon: "moon" }
|
|
13
|
+
{ value: "dark", label: "Dark", icon: "moon" },
|
|
14
|
+
{ value: "system", label: "System", icon: "computer-desktop" }
|
|
15
15
|
];
|
|
16
16
|
export function provideTheme(store) {
|
|
17
17
|
provide(THEME_KEY, store);
|
package/dist/grid/DataGrid.vue
CHANGED
|
@@ -27,6 +27,9 @@
|
|
|
27
27
|
@filters-reset="emit('filtersReset')"
|
|
28
28
|
>
|
|
29
29
|
<slot name="actions" :api="api" v-bind="sheetSlot" />
|
|
30
|
+
<template v-if="$slots['actions-end']" #end>
|
|
31
|
+
<slot name="actions-end" :api="api" v-bind="sheetSlot" />
|
|
32
|
+
</template>
|
|
30
33
|
<template v-if="$slots.filters" #filters="scope">
|
|
31
34
|
<slot name="filters" v-bind="scope" />
|
|
32
35
|
</template>
|
|
@@ -109,6 +109,31 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
|
|
|
109
109
|
clearDirty: (rowIds?: string[]) => void;
|
|
110
110
|
api: GridApi<T> | null;
|
|
111
111
|
}) => any;
|
|
112
|
+
} & {
|
|
113
|
+
'actions-end'?: (props: {
|
|
114
|
+
range: GridCellRange | null;
|
|
115
|
+
selectedCellCount: number;
|
|
116
|
+
dirtyCount: number;
|
|
117
|
+
canUndo: boolean;
|
|
118
|
+
canRedo: boolean;
|
|
119
|
+
getRange: () => GridCellRange | null;
|
|
120
|
+
getSelectedCells: () => import("./types").GridSelectedCell<T>[];
|
|
121
|
+
selectRange: (range: import("./types").GridRangeInput) => void;
|
|
122
|
+
selectAll: () => void;
|
|
123
|
+
clearRange: () => void;
|
|
124
|
+
setRangeValue: (value: unknown, options?: import("./types").GridSetRangeValueOptions) => number;
|
|
125
|
+
copyRange: () => Promise<string | null>;
|
|
126
|
+
paste: (text: string) => number;
|
|
127
|
+
fillDown: () => number;
|
|
128
|
+
fillRight: () => number;
|
|
129
|
+
clearCells: () => number;
|
|
130
|
+
undo: () => boolean;
|
|
131
|
+
redo: () => boolean;
|
|
132
|
+
clearHistory: () => void;
|
|
133
|
+
getDirtyCells: () => import("./types").GridDirtyCell[];
|
|
134
|
+
clearDirty: (rowIds?: string[]) => void;
|
|
135
|
+
api: GridApi<T> | null;
|
|
136
|
+
}) => any;
|
|
112
137
|
} & {
|
|
113
138
|
filters?: (props: {
|
|
114
139
|
close: () => void;
|
|
@@ -3,11 +3,13 @@ declare function closeFilters(): void;
|
|
|
3
3
|
declare var __VLS_28: {
|
|
4
4
|
close: typeof closeFilters;
|
|
5
5
|
count: number;
|
|
6
|
-
}, __VLS_45: {};
|
|
6
|
+
}, __VLS_45: {}, __VLS_65: {};
|
|
7
7
|
type __VLS_Slots = {} & {
|
|
8
8
|
filters?: (props: typeof __VLS_28) => any;
|
|
9
9
|
} & {
|
|
10
10
|
default?: (props: typeof __VLS_45) => any;
|
|
11
|
+
} & {
|
|
12
|
+
end?: (props: typeof __VLS_65) => any;
|
|
11
13
|
};
|
|
12
14
|
declare const __VLS_base: import("vue").DefineComponent<{
|
|
13
15
|
api?: import("ag-grid-community").GridApi | null;
|
|
@@ -4,7 +4,7 @@ import { DARK_SCHEME_QUERY, isClient } from "./env.mjs";
|
|
|
4
4
|
import { bindPreference, resolvePreferences } from "./preferences.mjs";
|
|
5
5
|
import { createStoredRef } from "./storage.mjs";
|
|
6
6
|
export const THEME_STORAGE_KEY = "k-theme";
|
|
7
|
-
export const THEME_ORDER = ["
|
|
7
|
+
export const THEME_ORDER = ["light", "dark", "system"];
|
|
8
8
|
export function isThemePreference(value) {
|
|
9
9
|
return THEME_ORDER.includes(value);
|
|
10
10
|
}
|
package/package.json
CHANGED