@bridge-ui/vue 0.2.0 → 0.4.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/ai/skills/bridge-ui-components/SKILL.md +3 -1
- package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +40 -45
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +2 -1
- package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js +39 -44
- package/dist/Components/ColorField/composables/useColorField.d.ts +3 -1
- package/dist/Components/DataTable/DataTable.js +5 -0
- package/dist/Components/DataTable/DataTable.vue.d.ts +43 -0
- package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js +396 -0
- package/dist/Components/DataTable/DataTableCellContent.js +5 -0
- package/dist/Components/DataTable/DataTableCellContent.vue.d.ts +23 -0
- package/dist/Components/DataTable/DataTableCellContent.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/Components/DataTable/DataTableColumnsMenu.js +5 -0
- package/dist/Components/DataTable/DataTableColumnsMenu.vue.d.ts +17 -0
- package/dist/Components/DataTable/DataTableColumnsMenu.vue_vue_type_script_setup_true_lang.js +92 -0
- package/dist/Components/DataTable/DataTableFilterMenu.js +5 -0
- package/dist/Components/DataTable/DataTableFilterMenu.vue.d.ts +20 -0
- package/dist/Components/DataTable/DataTableFilterMenu.vue_vue_type_script_setup_true_lang.js +151 -0
- package/dist/Components/DataTable/DataTableFilterOptions.js +5 -0
- package/dist/Components/DataTable/DataTableFilterOptions.vue.d.ts +17 -0
- package/dist/Components/DataTable/DataTableFilterOptions.vue_vue_type_script_setup_true_lang.js +81 -0
- package/dist/Components/DataTable/DataTableSearch.js +5 -0
- package/dist/Components/DataTable/DataTableSearch.vue.d.ts +12 -0
- package/dist/Components/DataTable/DataTableSearch.vue_vue_type_script_setup_true_lang.js +39 -0
- package/dist/Components/DataTable/DataTableSelection.js +5 -0
- package/dist/Components/DataTable/DataTableSelection.vue.d.ts +20 -0
- package/dist/Components/DataTable/DataTableSelection.vue_vue_type_script_setup_true_lang.js +56 -0
- package/dist/Components/DataTable/DataTableSortButton.js +5 -0
- package/dist/Components/DataTable/DataTableSortButton.vue.d.ts +17 -0
- package/dist/Components/DataTable/DataTableSortButton.vue_vue_type_script_setup_true_lang.js +43 -0
- package/dist/Components/DataTable/DataTableToolbarButton.js +5 -0
- package/dist/Components/DataTable/DataTableToolbarButton.vue.d.ts +14 -0
- package/dist/Components/DataTable/DataTableToolbarButton.vue_vue_type_script_setup_true_lang.js +31 -0
- package/dist/Components/DataTable/composables/useDataTable.d.ts +565 -0
- package/dist/Components/DataTable/composables/useDataTable.js +511 -0
- package/dist/Components/DataTable/composables/useDataTableColumnsMenu.d.ts +27 -0
- package/dist/Components/DataTable/composables/useDataTableColumnsMenu.js +54 -0
- package/dist/Components/DataTable/dataTable.types.d.ts +497 -0
- package/dist/Components/DataTable/index.d.ts +3 -0
- package/dist/Components/DataTable/index.js +3 -0
- package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js +52 -57
- package/dist/Components/DateField/composables/useDateField.d.ts +3 -1
- package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js +50 -55
- package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +3 -1
- package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js +56 -61
- package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +3 -1
- package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js +56 -61
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +3 -1
- package/dist/Components/FormField/composables/useFormField.d.ts +2 -1
- package/dist/Components/FormField/composables/useFormField.js +80 -75
- package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/Menu/composables/useMenu.d.ts +1 -1
- package/dist/Components/Menu/composables/useMenu.js +7 -3
- package/dist/Components/Menu/menu.types.d.ts +6 -0
- package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js +53 -43
- package/dist/Components/NumberField/composables/useNumberField.d.ts +9 -2
- package/dist/Components/NumberField/composables/useNumberField.js +49 -36
- package/dist/Components/NumberField/index.d.ts +1 -1
- package/dist/Components/NumberField/numberField.types.d.ts +13 -1
- package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js +28 -33
- package/dist/Components/PasswordField/composables/usePasswordField.d.ts +2 -1
- package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js +9 -9
- package/dist/Components/Radio/composables/useRadio.js +57 -54
- package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js +42 -47
- package/dist/Components/Select/composables/useSelect.d.ts +2 -1
- package/dist/Components/Slider/Slider.vue_vue_type_script_setup_true_lang.js +43 -48
- package/dist/Components/Slider/composables/useSlider.d.ts +3 -3
- package/dist/Components/Snackbar/composables/useSnackbar.d.ts +1 -1
- package/dist/Components/Table/Table.js +5 -0
- package/dist/Components/Table/Table.vue.d.ts +16 -0
- package/dist/Components/Table/Table.vue_vue_type_script_setup_true_lang.js +44 -0
- package/dist/Components/Table/TableBody.js +5 -0
- package/dist/Components/Table/TableBody.vue.d.ts +11 -0
- package/dist/Components/Table/TableBody.vue_vue_type_script_setup_true_lang.js +17 -0
- package/dist/Components/Table/TableCaption.js +5 -0
- package/dist/Components/Table/TableCaption.vue.d.ts +11 -0
- package/dist/Components/Table/TableCaption.vue_vue_type_script_setup_true_lang.js +17 -0
- package/dist/Components/Table/TableCell.js +5 -0
- package/dist/Components/Table/TableCell.vue.d.ts +11 -0
- package/dist/Components/Table/TableCell.vue_vue_type_script_setup_true_lang.js +19 -0
- package/dist/Components/Table/TableFooter.js +5 -0
- package/dist/Components/Table/TableFooter.vue.d.ts +11 -0
- package/dist/Components/Table/TableFooter.vue_vue_type_script_setup_true_lang.js +17 -0
- package/dist/Components/Table/TableHead.js +5 -0
- package/dist/Components/Table/TableHead.vue.d.ts +11 -0
- package/dist/Components/Table/TableHead.vue_vue_type_script_setup_true_lang.js +19 -0
- package/dist/Components/Table/TableHeader.js +5 -0
- package/dist/Components/Table/TableHeader.vue.d.ts +11 -0
- package/dist/Components/Table/TableHeader.vue_vue_type_script_setup_true_lang.js +17 -0
- package/dist/Components/Table/TableRow.js +5 -0
- package/dist/Components/Table/TableRow.vue.d.ts +11 -0
- package/dist/Components/Table/TableRow.vue_vue_type_script_setup_true_lang.js +17 -0
- package/dist/Components/Table/composables/useTable.d.ts +19 -0
- package/dist/Components/Table/composables/useTable.js +89 -0
- package/dist/Components/Table/composables/useTableCell.d.ts +12 -0
- package/dist/Components/Table/composables/useTableCell.js +40 -0
- package/dist/Components/Table/composables/useTablePart.d.ts +12 -0
- package/dist/Components/Table/composables/useTablePart.js +32 -0
- package/dist/Components/Table/composables/useTableRow.d.ts +6 -0
- package/dist/Components/Table/composables/useTableRow.js +29 -0
- package/dist/Components/Table/index.d.ts +14 -0
- package/dist/Components/Table/index.js +14 -0
- package/dist/Components/Table/table.types.d.ts +417 -0
- package/dist/Components/Table/tableInjectionKey.d.ts +114 -0
- package/dist/Components/Table/tableInjectionKey.js +4 -0
- package/dist/Components/TextField/TextField.vue_vue_type_script_setup_true_lang.js +11 -16
- package/dist/Components/TextField/composables/useTextField.d.ts +2 -1
- package/dist/Components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js +15 -20
- package/dist/Components/Textarea/composables/useTextarea.d.ts +2 -1
- package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js +45 -50
- package/dist/Components/TimeField/composables/useTimeField.d.ts +3 -1
- package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js +45 -50
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +3 -1
- package/dist/Utils/index.d.ts +1 -0
- package/dist/Utils/index.js +28 -27
- package/dist/Utils/useOptionalModel.d.ts +6 -0
- package/dist/Utils/useOptionalModel.js +13 -0
- package/dist/augments.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/theme.css +46 -42
- package/docs/README.md +2 -0
- package/docs/components/CalendarDate.md +1 -1
- package/docs/components/DataTable.md +371 -0
- package/docs/components/DateField.md +2 -2
- package/docs/components/DatePicker.md +3 -3
- package/docs/components/DateRangePicker.md +1 -1
- package/docs/components/NumberField.md +17 -6
- package/docs/components/Pagination.md +2 -2
- package/docs/components/Table.md +122 -0
- package/docs/examples/i18n-dictionary.ts +10 -0
- package/docs/examples/icon-fontawesome.ts +12 -0
- package/docs/examples/icon-heroicons.ts +12 -0
- package/docs/examples/icon-lucide.ts +12 -0
- package/docs/examples/icon-phosphor.ts +12 -0
- package/docs/examples/icon-tabler.ts +12 -0
- package/package.json +9 -2
|
@@ -0,0 +1,497 @@
|
|
|
1
|
+
import { HTMLAttributes, Slot, VNodeChild } from 'vue';
|
|
2
|
+
import { DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, FieldOverlayMode } from '@bridge-ui/core/Domain';
|
|
3
|
+
import { TableAlign, TableRounded, TableSize, TableVariant } from '@bridge-ui/core/Tokens';
|
|
4
|
+
import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
|
|
5
|
+
import { CheckboxProps } from '../Checkbox/checkbox.types';
|
|
6
|
+
import { PaginationOwnProps } from '../Pagination/pagination.types';
|
|
7
|
+
import { ProgressOwnProps } from '../Progress/progress.types';
|
|
8
|
+
import { RadioProps } from '../Radio/radio.types';
|
|
9
|
+
import { SelectOwnProps } from '../Select/select.types';
|
|
10
|
+
import { TableAlignOverrides, TableRoundedOverrides, TableSizeOverrides, TableVariantOverrides } from '../Table/table.types';
|
|
11
|
+
import { TextFieldOwnProps } from '../TextField/textField.types';
|
|
12
|
+
export type { DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSelectionMode, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, };
|
|
13
|
+
/**
|
|
14
|
+
* Column definition with Vue renderers.
|
|
15
|
+
*/
|
|
16
|
+
export type DataTableColumn<T> = Omit<DataTableColumnBase<T>, "align"> & {
|
|
17
|
+
/**
|
|
18
|
+
* Text alignment for the header and cells.
|
|
19
|
+
*
|
|
20
|
+
* @default "start"
|
|
21
|
+
*/
|
|
22
|
+
align?: MergeProps<TableAlign, TableAlignOverrides>;
|
|
23
|
+
/**
|
|
24
|
+
* Cell renderer for a data row. Used when no `#item.{id}` slot is set.
|
|
25
|
+
* Defaults to the column accessor (or `row[id]`).
|
|
26
|
+
*
|
|
27
|
+
* @default undefined
|
|
28
|
+
*/
|
|
29
|
+
cell?: (row: T) => VNodeChild;
|
|
30
|
+
/**
|
|
31
|
+
* Header content.
|
|
32
|
+
*/
|
|
33
|
+
header: VNodeChild;
|
|
34
|
+
/**
|
|
35
|
+
* Footer cell for a summary row. Receives the current (filtered) rows.
|
|
36
|
+
*/
|
|
37
|
+
summary?: (rows: T[]) => VNodeChild;
|
|
38
|
+
};
|
|
39
|
+
export interface DataTableClasses {
|
|
40
|
+
/**
|
|
41
|
+
* Classes merged onto the body rowgroup.
|
|
42
|
+
*/
|
|
43
|
+
body?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Classes merged onto body cells.
|
|
46
|
+
*/
|
|
47
|
+
cell?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Classes merged onto the empty-state region.
|
|
50
|
+
*/
|
|
51
|
+
empty?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Classes merged onto the footer region below the table.
|
|
54
|
+
*/
|
|
55
|
+
footer?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Classes merged onto header cells.
|
|
58
|
+
*/
|
|
59
|
+
head?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Classes merged onto the header rowgroup.
|
|
62
|
+
*/
|
|
63
|
+
header?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Classes merged onto the loading region.
|
|
66
|
+
*/
|
|
67
|
+
loading?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Classes merged onto the pagination region.
|
|
70
|
+
*/
|
|
71
|
+
pagination?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Classes merged onto the per-page Select.
|
|
74
|
+
*/
|
|
75
|
+
perPage?: string;
|
|
76
|
+
/**
|
|
77
|
+
* Classes merged onto the DataTable root.
|
|
78
|
+
*/
|
|
79
|
+
root?: string;
|
|
80
|
+
/**
|
|
81
|
+
* Classes merged onto rows.
|
|
82
|
+
*/
|
|
83
|
+
row?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Classes merged onto the toolbar search field.
|
|
86
|
+
*/
|
|
87
|
+
search?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Classes merged onto the `<table>` element.
|
|
90
|
+
*/
|
|
91
|
+
table?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Classes merged onto the toolbar region.
|
|
94
|
+
*/
|
|
95
|
+
toolbar?: string;
|
|
96
|
+
/**
|
|
97
|
+
* Classes merged onto the table wrapper (`Table` root).
|
|
98
|
+
*/
|
|
99
|
+
wrapper?: string;
|
|
100
|
+
}
|
|
101
|
+
export interface DataTableCustomProps {
|
|
102
|
+
/**
|
|
103
|
+
* Props forwarded to the body rowgroup.
|
|
104
|
+
*
|
|
105
|
+
* @default undefined
|
|
106
|
+
*/
|
|
107
|
+
body?: HTMLAttributes;
|
|
108
|
+
/**
|
|
109
|
+
* Props forwarded to body cells.
|
|
110
|
+
*
|
|
111
|
+
* @default undefined
|
|
112
|
+
*/
|
|
113
|
+
cell?: HTMLAttributes;
|
|
114
|
+
/**
|
|
115
|
+
* Extra props for selection checkboxes.
|
|
116
|
+
*
|
|
117
|
+
* @default undefined
|
|
118
|
+
*/
|
|
119
|
+
checkbox?: Partial<Omit<CheckboxProps, "modelValue" | "indeterminate">>;
|
|
120
|
+
/**
|
|
121
|
+
* Props forwarded to the empty-state region.
|
|
122
|
+
*
|
|
123
|
+
* @default undefined
|
|
124
|
+
*/
|
|
125
|
+
empty?: HTMLAttributes;
|
|
126
|
+
/**
|
|
127
|
+
* Props forwarded to the footer region below the table.
|
|
128
|
+
*
|
|
129
|
+
* @default undefined
|
|
130
|
+
*/
|
|
131
|
+
footer?: HTMLAttributes;
|
|
132
|
+
/**
|
|
133
|
+
* Props forwarded to header cells.
|
|
134
|
+
*
|
|
135
|
+
* @default undefined
|
|
136
|
+
*/
|
|
137
|
+
head?: HTMLAttributes;
|
|
138
|
+
/**
|
|
139
|
+
* Props forwarded to the header rowgroup.
|
|
140
|
+
*
|
|
141
|
+
* @default undefined
|
|
142
|
+
*/
|
|
143
|
+
header?: HTMLAttributes;
|
|
144
|
+
/**
|
|
145
|
+
* Props forwarded to the loading region.
|
|
146
|
+
*
|
|
147
|
+
* @default undefined
|
|
148
|
+
*/
|
|
149
|
+
loading?: HTMLAttributes;
|
|
150
|
+
/**
|
|
151
|
+
* Extra props for the built-in `Pagination`.
|
|
152
|
+
*
|
|
153
|
+
* @default undefined
|
|
154
|
+
*/
|
|
155
|
+
pagination?: Partial<Omit<PaginationOwnProps, "count">>;
|
|
156
|
+
/**
|
|
157
|
+
* Extra props for the built-in per-page `Select`.
|
|
158
|
+
*
|
|
159
|
+
* @default undefined
|
|
160
|
+
*/
|
|
161
|
+
perPage?: Partial<Omit<SelectOwnProps, "options">>;
|
|
162
|
+
/**
|
|
163
|
+
* Extra props for the built-in `Progress` (`loadingVariant="bar"`).
|
|
164
|
+
*
|
|
165
|
+
* @default undefined
|
|
166
|
+
*/
|
|
167
|
+
progress?: Partial<ProgressOwnProps>;
|
|
168
|
+
/**
|
|
169
|
+
* Extra props for selection radios (`selectionMode="single"`).
|
|
170
|
+
*
|
|
171
|
+
* @default undefined
|
|
172
|
+
*/
|
|
173
|
+
radio?: Partial<Omit<RadioProps, "modelValue">>;
|
|
174
|
+
/**
|
|
175
|
+
* Props forwarded to the DataTable root.
|
|
176
|
+
*
|
|
177
|
+
* @default undefined
|
|
178
|
+
*/
|
|
179
|
+
root?: HTMLAttributes;
|
|
180
|
+
/**
|
|
181
|
+
* Props forwarded to rows.
|
|
182
|
+
*
|
|
183
|
+
* @default undefined
|
|
184
|
+
*/
|
|
185
|
+
row?: HTMLAttributes;
|
|
186
|
+
/**
|
|
187
|
+
* Extra props for the toolbar search field.
|
|
188
|
+
*
|
|
189
|
+
* @default undefined
|
|
190
|
+
*/
|
|
191
|
+
search?: Partial<Omit<TextFieldOwnProps, "modelValue">>;
|
|
192
|
+
/**
|
|
193
|
+
* Props forwarded to the `<table>` element.
|
|
194
|
+
*
|
|
195
|
+
* @default undefined
|
|
196
|
+
*/
|
|
197
|
+
table?: HTMLAttributes;
|
|
198
|
+
/**
|
|
199
|
+
* Props forwarded to the toolbar region.
|
|
200
|
+
*
|
|
201
|
+
* @default undefined
|
|
202
|
+
*/
|
|
203
|
+
toolbar?: HTMLAttributes;
|
|
204
|
+
/**
|
|
205
|
+
* Props forwarded to the table wrapper (`Table` root).
|
|
206
|
+
*
|
|
207
|
+
* @default undefined
|
|
208
|
+
*/
|
|
209
|
+
wrapper?: HTMLAttributes;
|
|
210
|
+
}
|
|
211
|
+
export interface DataTableEmits {
|
|
212
|
+
/**
|
|
213
|
+
* Emitted when per-column text search should update (`v-model:column-search`).
|
|
214
|
+
*/
|
|
215
|
+
"update:columnSearch": [search: DataTableColumnSearch];
|
|
216
|
+
/**
|
|
217
|
+
* Emitted when expanded row ids should update (`v-model:expanded`).
|
|
218
|
+
*/
|
|
219
|
+
"update:expanded": [ids: string[]];
|
|
220
|
+
/**
|
|
221
|
+
* Emitted when column filters should update (`v-model:filters`).
|
|
222
|
+
*/
|
|
223
|
+
"update:filters": [filters: DataTableFilters];
|
|
224
|
+
/**
|
|
225
|
+
* Emitted when hidden column ids should update (`v-model:hidden-columns`).
|
|
226
|
+
*/
|
|
227
|
+
"update:hiddenColumns": [ids: string[]];
|
|
228
|
+
/**
|
|
229
|
+
* Emitted when the numbered page should update (`v-model:page`).
|
|
230
|
+
*/
|
|
231
|
+
"update:page": [page: number];
|
|
232
|
+
/**
|
|
233
|
+
* Emitted when the page size should update (`v-model:per-page`).
|
|
234
|
+
* DataTable also resets to page 1.
|
|
235
|
+
*/
|
|
236
|
+
"update:perPage": [perPage: number];
|
|
237
|
+
/**
|
|
238
|
+
* Emitted when the toolbar search query should update (`v-model:search`).
|
|
239
|
+
*/
|
|
240
|
+
"update:search": [query: string];
|
|
241
|
+
/**
|
|
242
|
+
* Emitted when selected row ids should update (`v-model:selection`).
|
|
243
|
+
*/
|
|
244
|
+
"update:selection": [ids: string[]];
|
|
245
|
+
/**
|
|
246
|
+
* Emitted when sort should update (`v-model:sorting`).
|
|
247
|
+
*/
|
|
248
|
+
"update:sorting": [sorting: DataTableSorting];
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* Opinionated data table. Compose with `columns` / `rows`.
|
|
252
|
+
*/
|
|
253
|
+
export interface DataTableOwnProps<T> {
|
|
254
|
+
/**
|
|
255
|
+
* Classes for DataTable regions.
|
|
256
|
+
*
|
|
257
|
+
* @default undefined
|
|
258
|
+
*/
|
|
259
|
+
classes?: DataTableClasses;
|
|
260
|
+
/**
|
|
261
|
+
* Column definitions (Bridge shape).
|
|
262
|
+
*
|
|
263
|
+
* @default []
|
|
264
|
+
*/
|
|
265
|
+
columns?: DataTableColumn<T>[];
|
|
266
|
+
/**
|
|
267
|
+
* Controlled per-column text search: column id → query. Set `searchable`
|
|
268
|
+
* on a column to show the field in that header's filter menu.
|
|
269
|
+
*
|
|
270
|
+
* @default undefined
|
|
271
|
+
*/
|
|
272
|
+
columnSearch?: DataTableColumnSearch;
|
|
273
|
+
/**
|
|
274
|
+
* Overlay shell for the column visibility panel. `auto` uses `menu` on
|
|
275
|
+
* desktop and `drawer` on mobile.
|
|
276
|
+
*
|
|
277
|
+
* @default "auto"
|
|
278
|
+
*/
|
|
279
|
+
columnsOverlay?: FieldOverlayMode;
|
|
280
|
+
/**
|
|
281
|
+
* Shows Reset / OK on the column visibility overlay. Unset defaults to
|
|
282
|
+
* `true` for `modal` / `drawer` shells (`false` for `menu`). Selection
|
|
283
|
+
* stays draft until OK.
|
|
284
|
+
*
|
|
285
|
+
* @default undefined
|
|
286
|
+
*/
|
|
287
|
+
columnsShowFooter?: boolean;
|
|
288
|
+
/**
|
|
289
|
+
* Extra props for internal parts (`table`, `wrapper`, checkboxes, …).
|
|
290
|
+
*
|
|
291
|
+
* @default undefined
|
|
292
|
+
*/
|
|
293
|
+
customProps?: DataTableCustomProps;
|
|
294
|
+
/**
|
|
295
|
+
* Controlled expanded row ids.
|
|
296
|
+
*
|
|
297
|
+
* @default undefined
|
|
298
|
+
*/
|
|
299
|
+
expanded?: string[];
|
|
300
|
+
/**
|
|
301
|
+
* Overlay shell for column filter panels. `auto` uses `menu` on desktop
|
|
302
|
+
* and `drawer` on mobile.
|
|
303
|
+
*
|
|
304
|
+
* @default "auto"
|
|
305
|
+
*/
|
|
306
|
+
filterOverlay?: FieldOverlayMode;
|
|
307
|
+
/**
|
|
308
|
+
* Controlled column filters: column id → selected option values.
|
|
309
|
+
*
|
|
310
|
+
* @default undefined
|
|
311
|
+
*/
|
|
312
|
+
filters?: DataTableFilters;
|
|
313
|
+
/**
|
|
314
|
+
* Stretch the table to at least the wrapper width. When `false`, the
|
|
315
|
+
* wrapper hugs column content, and pagination / per-page follow that width.
|
|
316
|
+
*
|
|
317
|
+
* @default true
|
|
318
|
+
*/
|
|
319
|
+
full?: boolean;
|
|
320
|
+
/**
|
|
321
|
+
* Stable row id. Required for reliable selection.
|
|
322
|
+
*
|
|
323
|
+
* @default undefined
|
|
324
|
+
*/
|
|
325
|
+
getRowId?: (row: T) => string;
|
|
326
|
+
/**
|
|
327
|
+
* Controlled hidden column ids.
|
|
328
|
+
*
|
|
329
|
+
* @default undefined
|
|
330
|
+
*/
|
|
331
|
+
hiddenColumns?: string[];
|
|
332
|
+
/**
|
|
333
|
+
* Row hover styles on the body.
|
|
334
|
+
*
|
|
335
|
+
* @default false
|
|
336
|
+
*/
|
|
337
|
+
hoverable?: boolean;
|
|
338
|
+
/**
|
|
339
|
+
* Show the loading region (`aria-busy` on the table).
|
|
340
|
+
*
|
|
341
|
+
* @default false
|
|
342
|
+
*/
|
|
343
|
+
loading?: boolean;
|
|
344
|
+
/**
|
|
345
|
+
* How `loading` is shown. `overlay` dims the table; `bar` dims the table
|
|
346
|
+
* and draws a progress line under the header.
|
|
347
|
+
*
|
|
348
|
+
* @default "overlay"
|
|
349
|
+
*/
|
|
350
|
+
loadingVariant?: DataTableLoadingVariant;
|
|
351
|
+
/**
|
|
352
|
+
* Controlled page for built-in numbered Pagination (1-based).
|
|
353
|
+
*
|
|
354
|
+
* @default undefined
|
|
355
|
+
*/
|
|
356
|
+
page?: number;
|
|
357
|
+
/**
|
|
358
|
+
* Total pages for built-in numbered Pagination. Use this or `totalCount`.
|
|
359
|
+
*
|
|
360
|
+
* @default undefined
|
|
361
|
+
*/
|
|
362
|
+
pageCount?: number;
|
|
363
|
+
/**
|
|
364
|
+
* Page size. With `page` and no `pageCount`/`totalCount`, slices `rows`
|
|
365
|
+
* locally. With server paging, only drives the per-page Select.
|
|
366
|
+
*
|
|
367
|
+
* @default undefined
|
|
368
|
+
*/
|
|
369
|
+
perPage?: number;
|
|
370
|
+
/**
|
|
371
|
+
* Options for the built-in per-page Select.
|
|
372
|
+
*
|
|
373
|
+
* @default [10, 25, 50, 100]
|
|
374
|
+
*/
|
|
375
|
+
perPageOptions?: number[];
|
|
376
|
+
/**
|
|
377
|
+
* Corner radius of the table wrapper, header, and footer.
|
|
378
|
+
*
|
|
379
|
+
* @default "lg"
|
|
380
|
+
*/
|
|
381
|
+
rounded?: MergeProps<TableRounded, TableRoundedOverrides>;
|
|
382
|
+
/**
|
|
383
|
+
* Current page of data (or the full set when not paging on the server).
|
|
384
|
+
*
|
|
385
|
+
* @default []
|
|
386
|
+
*/
|
|
387
|
+
rows?: T[];
|
|
388
|
+
/**
|
|
389
|
+
* Controlled toolbar search query. Filters visible columns client-side,
|
|
390
|
+
* or emits `update:search` only when server-paged.
|
|
391
|
+
*
|
|
392
|
+
* @default undefined
|
|
393
|
+
*/
|
|
394
|
+
search?: string;
|
|
395
|
+
/**
|
|
396
|
+
* Controlled selected row ids.
|
|
397
|
+
*
|
|
398
|
+
* @default undefined
|
|
399
|
+
*/
|
|
400
|
+
selection?: string[];
|
|
401
|
+
/**
|
|
402
|
+
* Row selection chrome: radios (`single`) or checkboxes (`multiple`).
|
|
403
|
+
*
|
|
404
|
+
* @default "multiple"
|
|
405
|
+
*/
|
|
406
|
+
selectionMode?: DataTableSelectionMode;
|
|
407
|
+
/**
|
|
408
|
+
* Cell padding / type scale.
|
|
409
|
+
*
|
|
410
|
+
* @default "md"
|
|
411
|
+
*/
|
|
412
|
+
size?: MergeProps<TableSize, TableSizeOverrides>;
|
|
413
|
+
/**
|
|
414
|
+
* Controlled sort: one column, or `null` when unsorted.
|
|
415
|
+
*
|
|
416
|
+
* @default undefined
|
|
417
|
+
*/
|
|
418
|
+
sorting?: DataTableSorting;
|
|
419
|
+
/**
|
|
420
|
+
* Stick header cells to the page (`true`) or inside the wrapper (`"boxed"`).
|
|
421
|
+
* For boxed, set a max height on `classes.wrapper` or `classes.root`.
|
|
422
|
+
*
|
|
423
|
+
* @default false
|
|
424
|
+
*/
|
|
425
|
+
stickyHeader?: DataTableStickyHeader;
|
|
426
|
+
/**
|
|
427
|
+
* Alternating body row surfaces.
|
|
428
|
+
*
|
|
429
|
+
* @default false
|
|
430
|
+
*/
|
|
431
|
+
striped?: boolean;
|
|
432
|
+
/**
|
|
433
|
+
* Total item count when the app owns paging. Derives page count with
|
|
434
|
+
* `perPage`. Use this or `pageCount`, not both (`pageCount` wins).
|
|
435
|
+
*
|
|
436
|
+
* @default undefined
|
|
437
|
+
*/
|
|
438
|
+
totalCount?: number;
|
|
439
|
+
/**
|
|
440
|
+
* Chrome treatment. Built-in Pagination follows the matching variant.
|
|
441
|
+
*
|
|
442
|
+
* @default "plain"
|
|
443
|
+
*/
|
|
444
|
+
variant?: MergeProps<TableVariant, TableVariantOverrides>;
|
|
445
|
+
}
|
|
446
|
+
/**
|
|
447
|
+
* Opinionated data table slots. Per-column cells use `#item.{columnId}`
|
|
448
|
+
* (`row`, `value`) and override `columns[].cell`.
|
|
449
|
+
*/
|
|
450
|
+
export interface DataTableSlots<T = unknown> {
|
|
451
|
+
/**
|
|
452
|
+
* Shown when `rows` is empty.
|
|
453
|
+
*/
|
|
454
|
+
empty?: Slot<undefined>;
|
|
455
|
+
/**
|
|
456
|
+
* Rendered in a spanning row when a row is expanded.
|
|
457
|
+
*/
|
|
458
|
+
expanded?: Slot<{
|
|
459
|
+
row: T;
|
|
460
|
+
}>;
|
|
461
|
+
/**
|
|
462
|
+
* Region below the table, above pagination.
|
|
463
|
+
*/
|
|
464
|
+
footer?: Slot<undefined>;
|
|
465
|
+
/**
|
|
466
|
+
* Catch-all cell slot when `#item.{columnId}` is not set.
|
|
467
|
+
*/
|
|
468
|
+
item?: Slot<DataTableItemSlotProps<T>>;
|
|
469
|
+
/**
|
|
470
|
+
* Indicator shown when `loading` is set. Overlay defaults to a spin; bar
|
|
471
|
+
* defaults to `Progress` under the header.
|
|
472
|
+
*/
|
|
473
|
+
loading?: Slot<undefined>;
|
|
474
|
+
/**
|
|
475
|
+
* Replaces the built-in numbered Pagination (no auto variant). Receives
|
|
476
|
+
* `page`, `count`, `variant`, and `onPageChange`.
|
|
477
|
+
*/
|
|
478
|
+
pagination?: Slot<DataTablePaginationSlotProps>;
|
|
479
|
+
/**
|
|
480
|
+
* Replaces the built-in per-page Select. Receives `perPage`, `options`,
|
|
481
|
+
* and `onPerPageChange`.
|
|
482
|
+
*/
|
|
483
|
+
perPage?: Slot<DataTablePerPageSlotProps>;
|
|
484
|
+
/**
|
|
485
|
+
* Replaces the toolbar search field.
|
|
486
|
+
*/
|
|
487
|
+
search?: Slot<undefined>;
|
|
488
|
+
/**
|
|
489
|
+
* Leading toolbar region (left of Columns / Search).
|
|
490
|
+
*/
|
|
491
|
+
toolbar?: Slot<undefined>;
|
|
492
|
+
/**
|
|
493
|
+
* Extra controls beside Columns and Search in the toolbar end cluster.
|
|
494
|
+
*/
|
|
495
|
+
toolbarActions?: Slot<undefined>;
|
|
496
|
+
}
|
|
497
|
+
export type DataTableProps<T = unknown> = MergeHtmlProps<DataTableOwnProps<T>, HTMLAttributes>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { useDataTable } from './composables/useDataTable';
|
|
2
|
+
export type { DataTableClasses, DataTableColumn, DataTableColumnBase, DataTableColumnClasses, DataTableColumnSearch, DataTableCustomProps, DataTableEmits, DataTableFilterOption, DataTableFilters, DataTableItemSlotProps, DataTableLoadingVariant, DataTableOwnProps, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableProps, DataTableSelectionMode, DataTableSlots, DataTableSorting, DataTableStickyEdge, DataTableStickyHeader, } from './dataTable.types';
|
|
3
|
+
export { default as DataTable } from './DataTable.vue';
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
|
|
2
2
|
import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
|
|
3
|
-
import n from "
|
|
4
|
-
import
|
|
5
|
-
import i from "../FormField/
|
|
6
|
-
import a from "../
|
|
7
|
-
import
|
|
8
|
-
import s from "
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
3
|
+
import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
|
|
4
|
+
import r from "../Icon/Icon.js";
|
|
5
|
+
import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
|
|
6
|
+
import a from "../FormField/FormField.js";
|
|
7
|
+
import o from "../FieldOverlay/FieldOverlay.js";
|
|
8
|
+
import { useDateField as s } from "./composables/useDateField.js";
|
|
9
|
+
import c from "../DatePicker/DatePicker.js";
|
|
10
|
+
import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
|
|
11
11
|
//#region src/Components/DateField/DateField.vue?vue&type=script&setup=true&lang.ts
|
|
12
|
-
var
|
|
12
|
+
var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
|
|
13
13
|
inheritAttrs: !1,
|
|
14
14
|
__name: "DateField",
|
|
15
15
|
props: /*@__PURE__*/ v({
|
|
@@ -81,58 +81,53 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
|
|
|
81
81
|
"open"
|
|
82
82
|
], ["update:modelValue"]),
|
|
83
83
|
setup(g, { emit: v }) {
|
|
84
|
-
let F = O(g, "modelValue"),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
default: k(() => [f("div", N, [f("input", x(_(D(G))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(K), {
|
|
92
|
-
onClick: o[0] ||= (...e) => D(q) && D(q)(...e),
|
|
93
|
-
"aria-label": D(R)("Clear"),
|
|
94
|
-
onKeydown: [o[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
|
|
95
|
-
}), [h(D(n), y({
|
|
84
|
+
let P = v, F = e(), I = O(g, "modelValue"), L = g, R = C(L.defaultValue ?? null), z = n(I, R), { open: ee, fill: B, overlay: V, dateOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: te, overlayCustomProps: ne, datePickerCustomProps: re } = s(L, z, P);
|
|
85
|
+
return (e, n) => (S(), d(l, null, [h(D(a), { field: D(U) }, p({
|
|
86
|
+
default: k(() => [f("div", M, [f("input", x(_(D(W))), null, 16), D(Z) ? (S(), d("span", y({ key: 0 }, D(G), {
|
|
87
|
+
onClick: n[0] ||= (...e) => D(K) && D(K)(...e),
|
|
88
|
+
"aria-label": D(F)("Clear"),
|
|
89
|
+
onKeydown: [n[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
|
|
90
|
+
}), [h(D(r), y({
|
|
96
91
|
icon: "clear",
|
|
97
|
-
size: D(
|
|
98
|
-
},
|
|
92
|
+
size: D(X)
|
|
93
|
+
}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
|
|
99
94
|
_: 2
|
|
100
|
-
}, [w(D(t)(D(
|
|
95
|
+
}, [w(D(t)(D(i), e.$slots), (t) => ({
|
|
101
96
|
name: t,
|
|
102
97
|
fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
|
|
103
|
-
}))]), 1032, ["field"]), h(D(
|
|
104
|
-
overlay: D(
|
|
105
|
-
"model-value": D(
|
|
106
|
-
"custom-props": D(
|
|
107
|
-
"onUpdate:modelValue": D(
|
|
98
|
+
}))]), 1032, ["field"]), h(D(o), {
|
|
99
|
+
overlay: D(V),
|
|
100
|
+
"model-value": D(ee),
|
|
101
|
+
"custom-props": D(ne),
|
|
102
|
+
"onUpdate:modelValue": D(Q)
|
|
108
103
|
}, {
|
|
109
|
-
default: k(() => [h(D(
|
|
110
|
-
fill: D(
|
|
111
|
-
value: D(
|
|
112
|
-
class: b(D(
|
|
113
|
-
range: D(
|
|
114
|
-
"show-footer": D(
|
|
115
|
-
"read-only":
|
|
116
|
-
"max-date": D(
|
|
117
|
-
"min-date": D(
|
|
118
|
-
multiple: D(
|
|
119
|
-
"time-zone": D(
|
|
120
|
-
"hide-years": D(
|
|
121
|
-
onChange: D(
|
|
122
|
-
onCancel: D(
|
|
123
|
-
"hide-months": D(
|
|
124
|
-
"default-view": D(
|
|
125
|
-
error: D(
|
|
126
|
-
color: D(
|
|
127
|
-
"start-of-week": D(
|
|
128
|
-
"custom-props": D(
|
|
129
|
-
disabled: D(
|
|
130
|
-
"disable-dates": D(
|
|
131
|
-
"hide-weekdays": D(
|
|
132
|
-
"disable-years": D(
|
|
133
|
-
"disable-months": D(
|
|
134
|
-
rounded: D(
|
|
135
|
-
"hide-outside-days": D(
|
|
104
|
+
default: k(() => [h(D(c), {
|
|
105
|
+
fill: D(B),
|
|
106
|
+
value: D(q),
|
|
107
|
+
class: b(D(Y)),
|
|
108
|
+
range: D(H).range,
|
|
109
|
+
"show-footer": D(J),
|
|
110
|
+
"read-only": L.readonly,
|
|
111
|
+
"max-date": D(H).maxDate,
|
|
112
|
+
"min-date": D(H).minDate,
|
|
113
|
+
multiple: D(H).multiple,
|
|
114
|
+
"time-zone": D(H).timeZone,
|
|
115
|
+
"hide-years": D(H).hideYears,
|
|
116
|
+
onChange: D($),
|
|
117
|
+
onCancel: D(te),
|
|
118
|
+
"hide-months": D(H).hideMonths,
|
|
119
|
+
"default-view": D(H).defaultView,
|
|
120
|
+
error: D(U).invalidated.value,
|
|
121
|
+
color: D(U).merged.value.color,
|
|
122
|
+
"start-of-week": D(H).startOfWeek,
|
|
123
|
+
"custom-props": D(re),
|
|
124
|
+
disabled: D(U).isDisabled.value,
|
|
125
|
+
"disable-dates": D(H).disableDates,
|
|
126
|
+
"hide-weekdays": D(H).hideWeekdays,
|
|
127
|
+
"disable-years": D(H).disableYears,
|
|
128
|
+
"disable-months": D(H).disableMonths,
|
|
129
|
+
rounded: D(U).merged.value.rounded,
|
|
130
|
+
"hide-outside-days": D(H).hideOutsideDays
|
|
136
131
|
}, p({
|
|
137
132
|
day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
|
|
138
133
|
_: 2
|
|
@@ -151,4 +146,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
|
|
|
151
146
|
}
|
|
152
147
|
});
|
|
153
148
|
//#endregion
|
|
154
|
-
export {
|
|
149
|
+
export { P as default };
|
|
@@ -179,7 +179,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
|
|
|
179
179
|
dir?: string | undefined | undefined;
|
|
180
180
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
181
181
|
enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
182
|
-
enterKeyHint?: "
|
|
182
|
+
enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
|
|
183
183
|
hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
|
|
184
184
|
inert?: (boolean | "true" | "false") | undefined;
|
|
185
185
|
placeholder?: string | undefined | undefined;
|
|
@@ -449,6 +449,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
|
|
|
449
449
|
endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
|
|
450
450
|
invalidated: import('vue').ComputedRef<boolean>;
|
|
451
451
|
containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
|
|
452
|
+
"data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
|
|
452
453
|
"data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
|
|
453
454
|
}>>;
|
|
454
455
|
startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
|
|
@@ -720,6 +721,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
|
|
|
720
721
|
disableAutoFocus?: boolean;
|
|
721
722
|
disableScrollLock?: boolean;
|
|
722
723
|
keepMounted?: boolean;
|
|
724
|
+
matchWidth?: boolean;
|
|
723
725
|
offset?: number;
|
|
724
726
|
onShowChange?: (show: boolean) => void;
|
|
725
727
|
persistent?: boolean;
|