@konoma-development/vue-components 0.1.9 → 0.1.11
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/.playground/nuxt.config.ts +44 -1
- package/components/form/KonomaCheckboxList.vue +2 -4
- package/components/table/KonomaTable.vue +96 -96
- package/components/ui/KonomaTheme.vue +36 -10
- package/eslint.config.ts +1 -1
- package/package.json +4 -4
- package/types/form.ts +33 -35
- package/types/table.ts +1 -3
|
@@ -1,9 +1,52 @@
|
|
|
1
1
|
export default defineNuxtConfig({
|
|
2
2
|
extends: [['..', { install: true }]],
|
|
3
|
-
modules: ['@nuxt/eslint'],
|
|
3
|
+
modules: ['@nuxt/eslint', '@unocss/nuxt', '@nuxt/icon', '@vueuse/nuxt', 'floating-vue/nuxt'],
|
|
4
4
|
eslint: {
|
|
5
5
|
config: {
|
|
6
6
|
standalone: false,
|
|
7
7
|
},
|
|
8
8
|
},
|
|
9
|
+
unocss: {
|
|
10
|
+
nuxtLayers: true,
|
|
11
|
+
},
|
|
12
|
+
typescript: {
|
|
13
|
+
typeCheck: true,
|
|
14
|
+
// Customize app/server TypeScript config
|
|
15
|
+
tsConfig: {
|
|
16
|
+
compilerOptions: {
|
|
17
|
+
moduleResolution: 'bundler',
|
|
18
|
+
noImplicitAny: true,
|
|
19
|
+
noImplicitOverride: false,
|
|
20
|
+
allowSyntheticDefaultImports: true,
|
|
21
|
+
esModuleInterop: true,
|
|
22
|
+
skipLibCheck: true,
|
|
23
|
+
},
|
|
24
|
+
exclude: ['node_modules/**', 'shared/openapi/**'],
|
|
25
|
+
},
|
|
26
|
+
// Customize build-time TypeScript config
|
|
27
|
+
nodeTsConfig: {
|
|
28
|
+
compilerOptions: {
|
|
29
|
+
moduleResolution: 'bundler',
|
|
30
|
+
noImplicitAny: true,
|
|
31
|
+
noImplicitOverride: false,
|
|
32
|
+
allowSyntheticDefaultImports: true,
|
|
33
|
+
esModuleInterop: true,
|
|
34
|
+
skipLibCheck: true,
|
|
35
|
+
},
|
|
36
|
+
exclude: ['node_modules/**', 'shared/openapi/**'],
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
vite: {
|
|
40
|
+
build: {
|
|
41
|
+
rollupOptions: {
|
|
42
|
+
external: ['@oxc-parser/binding-wasm32-wasi'],
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
optimizeDeps: {
|
|
46
|
+
include: [
|
|
47
|
+
'@vue/devtools-core',
|
|
48
|
+
'@vue/devtools-kit',
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
},
|
|
9
52
|
});
|
|
@@ -7,9 +7,7 @@
|
|
|
7
7
|
<KonomaCheckbox
|
|
8
8
|
v-for="(option, i) in options"
|
|
9
9
|
:key="i"
|
|
10
|
-
|
|
11
|
-
:error="error"
|
|
12
|
-
v-bind="{ ...$attrs, ...childClasses }"
|
|
10
|
+
v-bind="{ ...props, ...childClasses }"
|
|
13
11
|
:value="values?.includes(option.value)"
|
|
14
12
|
@change=" (_, e) => $emit('change', option.value, e)"
|
|
15
13
|
>
|
|
@@ -32,7 +30,7 @@ import { positionClasses } from '../../types/form';
|
|
|
32
30
|
import { baseClasses } from '../defaults/checkboxList';
|
|
33
31
|
import KonomaCheckbox from './KonomaCheckbox.vue';
|
|
34
32
|
|
|
35
|
-
withDefaults(defineProps<FormFieldProps<DataType>>(), {
|
|
33
|
+
const props = withDefaults(defineProps<FormFieldProps<DataType>>(), {
|
|
36
34
|
labelClasses: baseClasses.labelClasses,
|
|
37
35
|
wrapperClasses: baseClasses.wrapperClasses,
|
|
38
36
|
classes: baseClasses.classes,
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<div
|
|
10
10
|
v-for="column in currentColumnsLeft"
|
|
11
11
|
:key="column.id"
|
|
12
|
-
:style="`
|
|
12
|
+
:style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`"
|
|
13
13
|
:class="[
|
|
14
14
|
headerClasses,
|
|
15
15
|
hasFilters ? 'h-24' : 'h-12',
|
|
@@ -40,46 +40,46 @@
|
|
|
40
40
|
</div>
|
|
41
41
|
<div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="bg-kvc-table-header text-xs text-secondary-500 font-medium min-h-10 w-full" @click.stop>
|
|
42
42
|
<template v-if="column.filterable && column.filterKey">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
43
|
+
<slot v-if="$slots[getFilterSlotName(column.id as ColumnId)]" :filters="filters" :update-filters="updateFilters" :name="getFilterSlotName(column.id as ColumnId)">
|
|
44
|
+
<KonomaInput
|
|
45
|
+
:key="filters[column.filterKey]?.join(', ')"
|
|
46
|
+
:value="filters[column.filterKey]?.join(', ')"
|
|
47
|
+
is-clearable
|
|
48
|
+
class="h-10"
|
|
49
|
+
:icon-right-name="filters[column.filterKey] ? 'heroicons:x-mark' : ''"
|
|
50
|
+
@key-down="async ($event) => {
|
|
51
|
+
if ($event.key === 'Enter' && column.filterKey) {
|
|
52
|
+
const key = column.filterKey;
|
|
53
|
+
const value = ($event.currentTarget as HTMLInputElement).value;
|
|
54
|
+
if ($event) {
|
|
55
|
+
await updateFilters({ ...filters, [key]: [value] });
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
const newFilters = { ...filters };
|
|
59
|
+
delete newFilters[key];
|
|
60
|
+
await updateFilters(newFilters);
|
|
61
|
+
}
|
|
57
62
|
}
|
|
58
|
-
|
|
63
|
+
}"
|
|
64
|
+
@click.stop
|
|
65
|
+
@icon-right-click.stop="async ($event) => {
|
|
66
|
+
$event.stopPropagation();
|
|
67
|
+
const key = column.filterKey;
|
|
68
|
+
if (key) {
|
|
59
69
|
const newFilters = { ...filters };
|
|
60
70
|
delete newFilters[key];
|
|
61
71
|
await updateFilters(newFilters);
|
|
62
72
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
@icon-right-click.stop="async ($event) => {
|
|
67
|
-
$event.stopPropagation();
|
|
68
|
-
const key = column.filterKey;
|
|
69
|
-
if (key) {
|
|
70
|
-
const newFilters = { ...filters };
|
|
71
|
-
delete newFilters[key];
|
|
72
|
-
await updateFilters(newFilters);
|
|
73
|
-
}
|
|
74
|
-
}"
|
|
75
|
-
/>
|
|
73
|
+
}"
|
|
74
|
+
/>
|
|
75
|
+
</slot>
|
|
76
76
|
</template>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
80
80
|
<div
|
|
81
81
|
v-for="column in currentColumnsCenter" :key="column.id"
|
|
82
|
-
:style="`
|
|
82
|
+
:style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`"
|
|
83
83
|
:class="[
|
|
84
84
|
headerClasses,
|
|
85
85
|
hasFilters ? 'h-24' : 'h-12',
|
|
@@ -110,46 +110,46 @@
|
|
|
110
110
|
</div>
|
|
111
111
|
<div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="bg-kvc-table-header text-xs text-secondary-500 font-medium min-h-10 w-full" @click.stop>
|
|
112
112
|
<template v-if="column.filterable && column.filterKey">
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
113
|
+
<slot v-if="$slots[getFilterSlotName(column.id as ColumnId)]" :filters="filters" :update-filters="updateFilters" :name="getFilterSlotName(column.id as ColumnId)">
|
|
114
|
+
<KonomaInput
|
|
115
|
+
:key="filters[column.filterKey]?.join(', ')"
|
|
116
|
+
:value="filters[column.filterKey]?.join(', ')"
|
|
117
|
+
is-clearable
|
|
118
|
+
class="h-10"
|
|
119
|
+
:icon-right-name="filters[column.filterKey] ? 'heroicons:x-mark' : ''"
|
|
120
|
+
@key-down="async ($event) => {
|
|
121
|
+
if ($event.key === 'Enter' && column.filterKey) {
|
|
122
|
+
const key = column.filterKey;
|
|
123
|
+
const value = ($event.currentTarget as HTMLInputElement).value;
|
|
124
|
+
if ($event) {
|
|
125
|
+
await updateFilters({ ...filters, [key]: [value] });
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
const newFilters = { ...filters };
|
|
129
|
+
delete newFilters[key];
|
|
130
|
+
await updateFilters(newFilters);
|
|
131
|
+
}
|
|
127
132
|
}
|
|
128
|
-
|
|
133
|
+
}"
|
|
134
|
+
@click.stop
|
|
135
|
+
@icon-right-click.stop="async ($event) => {
|
|
136
|
+
$event.stopPropagation();
|
|
137
|
+
const key = column.filterKey;
|
|
138
|
+
if (key) {
|
|
129
139
|
const newFilters = { ...filters };
|
|
130
140
|
delete newFilters[key];
|
|
131
141
|
await updateFilters(newFilters);
|
|
132
142
|
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
@icon-right-click.stop="async ($event) => {
|
|
137
|
-
$event.stopPropagation();
|
|
138
|
-
const key = column.filterKey;
|
|
139
|
-
if (key) {
|
|
140
|
-
const newFilters = { ...filters };
|
|
141
|
-
delete newFilters[key];
|
|
142
|
-
await updateFilters(newFilters);
|
|
143
|
-
}
|
|
144
|
-
}"
|
|
145
|
-
/>
|
|
143
|
+
}"
|
|
144
|
+
/>
|
|
145
|
+
</slot>
|
|
146
146
|
</template>
|
|
147
147
|
</div>
|
|
148
148
|
</div>
|
|
149
149
|
<div v-if="currentColumnsRight.length" class="flex flex-row h-full items-center right-0 sticky">
|
|
150
150
|
<div
|
|
151
151
|
v-for="column in currentColumnsRight"
|
|
152
|
-
:key="column.id" :style="`
|
|
152
|
+
:key="column.id" :style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`" class="bg-kvc-table-header text-xs font-medium px-4 py-3 flex flex-row h-full truncate items-start justify-end last:rounded-tr-kvc-table"
|
|
153
153
|
>
|
|
154
154
|
{{ column.title }}
|
|
155
155
|
</div>
|
|
@@ -164,49 +164,43 @@
|
|
|
164
164
|
<div
|
|
165
165
|
v-for="column in currentColumnsRight"
|
|
166
166
|
:key="column.id"
|
|
167
|
-
:style="`
|
|
167
|
+
:style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`"
|
|
168
168
|
:class="[rowLeftWrapperClasses, column.grow ? 'grow' : ''].join(' ')"
|
|
169
169
|
:title="(entry[column.id] as string) || ''"
|
|
170
170
|
>
|
|
171
|
-
<
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
{{ (entry[column.id] as string) || '-' }}
|
|
177
|
-
</div>
|
|
171
|
+
<slot :entry :name="getColumnSlotName(column.id as ColumnId)">
|
|
172
|
+
<div class="text-sm p-4 h-14 truncate">
|
|
173
|
+
{{ (entry[column.id] as string) || '-' }}
|
|
174
|
+
</div>
|
|
175
|
+
</slot>
|
|
178
176
|
</div>
|
|
179
177
|
</div>
|
|
180
178
|
<div
|
|
181
179
|
v-for="column in currentColumnsCenter"
|
|
182
180
|
:key="column.id"
|
|
183
|
-
:style="`
|
|
181
|
+
:style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`"
|
|
184
182
|
:class="[rowCenterWrapperClasses, column.grow ? 'grow' : ''].join(' ')"
|
|
185
183
|
:title="(entry[column.id] as string) || ''"
|
|
186
184
|
>
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
{{ (entry[column.id] as string) || '-' }}
|
|
193
|
-
</div>
|
|
185
|
+
<slot :entry :name="getColumnSlotName(column.id as ColumnId)">
|
|
186
|
+
<div class="text-sm p-4 h-14 truncate">
|
|
187
|
+
{{ (entry[column.id] as string) || '-' }}
|
|
188
|
+
</div>
|
|
189
|
+
</slot>
|
|
194
190
|
</div>
|
|
195
191
|
<div v-if="currentColumnsRight.length" class="border-l flex flex-row right-0 sticky">
|
|
196
192
|
<div
|
|
197
193
|
v-for="column in currentColumnsRight"
|
|
198
194
|
:key="column.id"
|
|
199
|
-
:style="`
|
|
195
|
+
:style="`min-width: ${column.initialWidth}; max-width: ${!column.grow ? column.initialWidth : undefined};`"
|
|
200
196
|
:class="[rowRightWrapperClasses, column.grow ? 'grow' : ''].join(' ')"
|
|
201
197
|
:title="(entry[column.id] as string) || ''"
|
|
202
198
|
>
|
|
203
|
-
<
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
{{ (entry[column.id] as string) || '-' }}
|
|
209
|
-
</div>
|
|
199
|
+
<slot :entry :name="getColumnSlotName(column.id as ColumnId)">
|
|
200
|
+
<div class="text-sm p-4 h-14 truncate">
|
|
201
|
+
{{ (entry[column.id] as string) || '-' }}
|
|
202
|
+
</div>
|
|
203
|
+
</slot>
|
|
210
204
|
</div>
|
|
211
205
|
</div>
|
|
212
206
|
</div>
|
|
@@ -234,13 +228,20 @@
|
|
|
234
228
|
</div>
|
|
235
229
|
</template>
|
|
236
230
|
|
|
237
|
-
<script lang="ts" setup generic="DataType
|
|
231
|
+
<script lang="ts" setup generic="DataType">
|
|
238
232
|
import type { PaginationClasses, TableColumn } from '../../types/table';
|
|
239
233
|
import { baseClasses } from '../defaults/table';
|
|
240
234
|
import KonomaInput from '../form/KonomaInput.vue';
|
|
241
235
|
import KonomaIcon from '../ui/KonomaIcon.vue';
|
|
242
236
|
import KonomaPagination from './KonomaPagination.vue';
|
|
243
237
|
|
|
238
|
+
type ColumnId = Extract<TableColumn<DataType>['id'], string>
|
|
239
|
+
type TableSlots = Record<`column-${ColumnId}`, (props: { entry: DataType }) => any>
|
|
240
|
+
& Record<`filter-${ColumnId}`, (props: {
|
|
241
|
+
filters: Record<string, string[]>
|
|
242
|
+
updateFilters: (filters: Record<string, string[]>) => Promise<void>
|
|
243
|
+
}) => any>
|
|
244
|
+
|
|
244
245
|
const props = withDefaults(defineProps<{
|
|
245
246
|
wrapperClasses?: string
|
|
246
247
|
tableClasses?: string
|
|
@@ -260,15 +261,6 @@ const props = withDefaults(defineProps<{
|
|
|
260
261
|
columnsCenter: TableColumn<DataType>[]
|
|
261
262
|
columnsRight?: TableColumn<DataType>[]
|
|
262
263
|
columnsLeft?: TableColumn<DataType>[]
|
|
263
|
-
// TODO: Custom cell renderers
|
|
264
|
-
cellRenderer?: { [key in keyof DataType]?: (data: DataType & { dragRef?: Ref }) => string }
|
|
265
|
-
// TODO: Custom filter components
|
|
266
|
-
filterComponents?: {
|
|
267
|
-
[key in keyof DataType]?: (
|
|
268
|
-
filters: Record<string, string[]>,
|
|
269
|
-
setFilters: (filters: Record<string, string[]>) => Promise<void>,
|
|
270
|
-
) => string;
|
|
271
|
-
}
|
|
272
264
|
filters?: Record<string, string[]>
|
|
273
265
|
showFilters?: boolean
|
|
274
266
|
data: DataType[]
|
|
@@ -312,7 +304,17 @@ const emit = defineEmits<{
|
|
|
312
304
|
(e: 'onUpdateColumnsRight', columns: TableColumn<DataType>[], updateMeta?: boolean): void
|
|
313
305
|
}>()
|
|
314
306
|
|
|
315
|
-
|
|
307
|
+
defineSlots<Partial<TableSlots>>()
|
|
308
|
+
|
|
309
|
+
function getColumnSlotName(columnId: ColumnId): `column-${ColumnId}` {
|
|
310
|
+
return `column-${columnId}`
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
function getFilterSlotName(columnId: ColumnId): `filter-${ColumnId}` {
|
|
314
|
+
return `filter-${columnId}`
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
const locale = inject<string>('locale', 'de')
|
|
316
318
|
|
|
317
319
|
const hasFilters = computed(() => {
|
|
318
320
|
return !!(
|
|
@@ -335,8 +337,6 @@ const currentEnd = computed(() => {
|
|
|
335
337
|
return props.currentPage * props.pagesize;
|
|
336
338
|
});
|
|
337
339
|
|
|
338
|
-
// const headerRef = useTemplateRef('header');
|
|
339
|
-
|
|
340
340
|
const currentColumnsLeft = computed(() => {
|
|
341
341
|
return props.columnsLeft?.filter(column => !column?.hidden) || []
|
|
342
342
|
});
|
|
@@ -11,28 +11,44 @@ const props = defineProps<{
|
|
|
11
11
|
}>();
|
|
12
12
|
|
|
13
13
|
const requiredThemeShades = [
|
|
14
|
-
'50',
|
|
15
14
|
'100',
|
|
16
|
-
'150',
|
|
17
15
|
'200',
|
|
18
|
-
'250',
|
|
19
16
|
'300',
|
|
20
|
-
'350',
|
|
21
17
|
'400',
|
|
22
|
-
'450',
|
|
23
18
|
'500',
|
|
24
|
-
'550',
|
|
25
19
|
'600',
|
|
26
|
-
'650',
|
|
27
20
|
'700',
|
|
28
|
-
'750',
|
|
29
21
|
'800',
|
|
30
|
-
'850',
|
|
31
22
|
'900',
|
|
32
|
-
'950',
|
|
33
23
|
'DEFAULT',
|
|
34
24
|
] as const;
|
|
35
25
|
|
|
26
|
+
const optionalThemeShades = [
|
|
27
|
+
'50',
|
|
28
|
+
'150',
|
|
29
|
+
'250',
|
|
30
|
+
'350',
|
|
31
|
+
'450',
|
|
32
|
+
'550',
|
|
33
|
+
'650',
|
|
34
|
+
'750',
|
|
35
|
+
'850',
|
|
36
|
+
'950',
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const optionalThemeShadesFallbacks: Record<typeof optionalThemeShades[number], typeof requiredThemeShades[number]> = {
|
|
40
|
+
50: '100',
|
|
41
|
+
150: '200',
|
|
42
|
+
250: '300',
|
|
43
|
+
350: '400',
|
|
44
|
+
450: '500',
|
|
45
|
+
550: '600',
|
|
46
|
+
650: '700',
|
|
47
|
+
750: '800',
|
|
48
|
+
850: '900',
|
|
49
|
+
950: '900',
|
|
50
|
+
}
|
|
51
|
+
|
|
36
52
|
const appConfig = useAppConfig();
|
|
37
53
|
const requiredThemeColors = Object.keys(appConfig['konoma-theme']);
|
|
38
54
|
|
|
@@ -64,6 +80,16 @@ async function initTheme(): Promise<Record<AppConfigThemeKey, Record<keyof typeo
|
|
|
64
80
|
|
|
65
81
|
const unocssColorKeys = Object.keys(unocssColorObject);
|
|
66
82
|
const missingShades = requiredThemeShades.filter(shade => !unocssColorKeys.includes(shade));
|
|
83
|
+
|
|
84
|
+
for (const optionalShade of optionalThemeShades) {
|
|
85
|
+
if (!unocssColorKeys.includes(optionalShade)) {
|
|
86
|
+
const fallbackShade = optionalThemeShadesFallbacks[optionalShade];
|
|
87
|
+
if (fallbackShade && unocssColorKeys.includes(fallbackShade)) {
|
|
88
|
+
(unocssColorObject as Record<string, string>)[optionalShade] = unocssColorObject[fallbackShade];
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
67
93
|
if (missingShades.length) {
|
|
68
94
|
throw new Error(
|
|
69
95
|
`Theme color "${effectiveColorName}" is missing "${missingShades.join('", "')}" ${missingShades.length > 1 ? 'shades' : 'shade'}`,
|
package/eslint.config.ts
CHANGED
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"type": "module",
|
|
7
|
-
"version": "0.1.
|
|
7
|
+
"version": "0.1.11",
|
|
8
8
|
"packageManager": "yarn@4.14.1",
|
|
9
9
|
"main": "./nuxt.config.ts",
|
|
10
10
|
"scripts": {
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"@nuxt/devtools": "3.2.4",
|
|
30
30
|
"@nuxt/eslint": "1.15.2",
|
|
31
31
|
"@nuxt/icon": "2.2.1",
|
|
32
|
-
"@nuxt/schema": "4.4.
|
|
32
|
+
"@nuxt/schema": "4.4.4",
|
|
33
33
|
"@nuxt/test-utils": "4.0.3",
|
|
34
34
|
"@pinia/nuxt": "0.11.3",
|
|
35
|
-
"@sentry/nuxt": "10.
|
|
35
|
+
"@sentry/nuxt": "10.51.0",
|
|
36
36
|
"@types/node": "22.19.17",
|
|
37
37
|
"@unocss/eslint-plugin": "66.6.8",
|
|
38
38
|
"@unocss/nuxt": "66.6.8",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"changelogen": "0.6.2",
|
|
44
44
|
"eslint": "10.2.1",
|
|
45
45
|
"floating-vue": "5.2.2",
|
|
46
|
-
"nuxt": "4.4.
|
|
46
|
+
"nuxt": "4.4.4",
|
|
47
47
|
"nuxt-headlessui": "1.2.2",
|
|
48
48
|
"pinia": "3.0.4",
|
|
49
49
|
"tslib": "2.8.1",
|
package/types/form.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import type { ClassValue } from 'vue';
|
|
2
|
-
|
|
3
1
|
type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
4
2
|
|
|
5
3
|
export interface FormDataType {
|
|
@@ -15,64 +13,64 @@ export interface Option {
|
|
|
15
13
|
|
|
16
14
|
/** Classes for the form components. Not all classes have effects in all components. Properties that start with 'class-' apply to the component in general, other properties apply to specific parts of the component */
|
|
17
15
|
export interface Classes {
|
|
18
|
-
class?:
|
|
16
|
+
class?: string
|
|
19
17
|
/** Base classes, usually assigned to the control */
|
|
20
|
-
classes?:
|
|
18
|
+
classes?: string
|
|
21
19
|
/** Base classes, assigned directly to the control. Might be needed in case of more complex nesting */
|
|
22
|
-
controlClasses?:
|
|
20
|
+
controlClasses?: string
|
|
23
21
|
/** Used for components that have specific styling when in neutral state */
|
|
24
|
-
classesNeutral?:
|
|
22
|
+
classesNeutral?: string
|
|
25
23
|
/** Used for components that have specific styling when empty */
|
|
26
|
-
classesEmpty?:
|
|
27
|
-
classesDisabled?:
|
|
24
|
+
classesEmpty?: string
|
|
25
|
+
classesDisabled?: string
|
|
28
26
|
/** Used for components that have specific styling when in error */
|
|
29
|
-
classesError?:
|
|
27
|
+
classesError?: string
|
|
30
28
|
/** Used for components that have specific styling when filled */
|
|
31
|
-
classesFilled?:
|
|
29
|
+
classesFilled?: string
|
|
32
30
|
/** Used for the label in components that have specific styling when empty */
|
|
33
|
-
labelClassesEmpty?:
|
|
31
|
+
labelClassesEmpty?: string
|
|
34
32
|
/** Used for the label in components that have specific styling when in error */
|
|
35
|
-
labelClassesError?:
|
|
33
|
+
labelClassesError?: string
|
|
36
34
|
/** Used for the label in components that have specific styling when filled */
|
|
37
|
-
labelClassesFilled?:
|
|
35
|
+
labelClassesFilled?: string
|
|
38
36
|
/** General classes for the label */
|
|
39
|
-
labelClasses?:
|
|
37
|
+
labelClasses?: string
|
|
40
38
|
/** Needed in case of nested label */
|
|
41
|
-
labelWrapperClasses?:
|
|
39
|
+
labelWrapperClasses?: string
|
|
42
40
|
/** Used for the icon in components that have specific styling when filled */
|
|
43
|
-
iconClassesFilled?:
|
|
41
|
+
iconClassesFilled?: string
|
|
44
42
|
/** General classes for the wrapper */
|
|
45
|
-
wrapperClasses?:
|
|
43
|
+
wrapperClasses?: string
|
|
46
44
|
/** General classes for the icon on the left */
|
|
47
|
-
iconLeftClasses?:
|
|
45
|
+
iconLeftClasses?: string
|
|
48
46
|
/** General classes for the icon on the right */
|
|
49
|
-
iconRightClasses?:
|
|
47
|
+
iconRightClasses?: string
|
|
50
48
|
/** General classes for the error message */
|
|
51
|
-
errorClasses?:
|
|
49
|
+
errorClasses?: string
|
|
52
50
|
/** Additional classes for the control when an icon is present on the left */
|
|
53
|
-
additionalClassesIconLeft?:
|
|
51
|
+
additionalClassesIconLeft?: string
|
|
54
52
|
/** Additional classes for the control when an icon is present on the right */
|
|
55
|
-
additionalClassesIconRight?:
|
|
53
|
+
additionalClassesIconRight?: string
|
|
56
54
|
/** General classes for hints placed within the component */
|
|
57
|
-
hintClasses?:
|
|
55
|
+
hintClasses?: string
|
|
58
56
|
/** General classes for the resize element */
|
|
59
|
-
resizeClasses?:
|
|
57
|
+
resizeClasses?: string
|
|
60
58
|
/** General classes for the icon within the resize element */
|
|
61
|
-
resizeIconClasses?:
|
|
59
|
+
resizeIconClasses?: string
|
|
62
60
|
/** Classes to be applied to all values for components with multiple possible values */
|
|
63
|
-
optionClasses?:
|
|
61
|
+
optionClasses?: string
|
|
64
62
|
/** Classes to be applied to the wrapper for elements on the left side */
|
|
65
|
-
wrapperLeftClasses?:
|
|
63
|
+
wrapperLeftClasses?: string
|
|
66
64
|
/** Classes to be applied to the wrapper for elements on the right side */
|
|
67
|
-
wrapperRightClasses?:
|
|
65
|
+
wrapperRightClasses?: string
|
|
68
66
|
// Properties for classes specific to the select component since it is effectively an Omnibox that is more complex than the other form components
|
|
69
|
-
focusClasses?:
|
|
70
|
-
optionFocusedClasses?:
|
|
71
|
-
optionSelectedClasses?:
|
|
72
|
-
valueClasses?:
|
|
73
|
-
placeholderClasses?:
|
|
74
|
-
indicatorClasses?:
|
|
75
|
-
valueContainerClasses?:
|
|
67
|
+
focusClasses?: string
|
|
68
|
+
optionFocusedClasses?: string
|
|
69
|
+
optionSelectedClasses?: string
|
|
70
|
+
valueClasses?: string
|
|
71
|
+
placeholderClasses?: string
|
|
72
|
+
indicatorClasses?: string
|
|
73
|
+
valueContainerClasses?: string
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
export interface FormFieldEmits {
|
package/types/table.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface TableColumn<DataType> {
|
|
2
2
|
id: keyof DataType
|
|
3
3
|
title?: string
|
|
4
|
-
initialWidth?: string
|
|
4
|
+
initialWidth?: string
|
|
5
5
|
hidden?: boolean
|
|
6
6
|
sorting?: '+' | '-'
|
|
7
7
|
// Mutually exclusive with onClick
|
|
@@ -13,8 +13,6 @@ export interface TableColumn<DataType> {
|
|
|
13
13
|
allowResize?: boolean
|
|
14
14
|
filterable?: boolean
|
|
15
15
|
grow?: boolean
|
|
16
|
-
// TODO: support custom filter component
|
|
17
|
-
filterComponent?: (filters: Record<string, string[]>, setFilters: (filters: Record<string, string[]>) => Promise<void>) => string
|
|
18
16
|
}
|
|
19
17
|
|
|
20
18
|
export interface DragItem {
|