@koumoul/vjsf 3.9.0 → 3.10.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/package.json +2 -2
- package/src/components/nodes/list.vue +123 -89
- package/types/compat/v2.d.ts +1 -1
- package/types/compat/v2.d.ts.map +1 -1
- package/types/components/fragments/list-item-menu.vue.d.ts +11 -0
- package/types/components/fragments/list-item-menu.vue.d.ts.map +1 -0
- package/types/components/fragments/select-item.vue.d.ts +2 -2
- package/types/components/fragments/select-selection.vue.d.ts +2 -2
- package/types/composables/use-get-items.d.ts +1 -1
- package/types/composables/use-node.d.ts +1 -1
- package/types/composables/use-select-node.d.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koumoul/vjsf",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.0",
|
|
4
4
|
"description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "vitest run",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"vuetify": "^3.6.13"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
|
-
"@json-layout/core": "~1.4.
|
|
74
|
+
"@json-layout/core": "~1.4.3",
|
|
75
75
|
"@vueuse/core": "^10.5.0",
|
|
76
76
|
"debug": "^4.3.4"
|
|
77
77
|
},
|
|
@@ -45,8 +45,14 @@ const { activeDnd, sortableArray, draggable, hovered, dragging, itemBind, handle
|
|
|
45
45
|
? sortableArray.value.reduce((a, child) => { a[child.key] = child.data; return a }, /** @type {Record<string, any>} */({}))
|
|
46
46
|
: sortableArray.value.map((child) => child.data)
|
|
47
47
|
props.statefulLayout.input(props.modelValue, newData)
|
|
48
|
+
dragPrepared.value = -1
|
|
48
49
|
})
|
|
49
50
|
watch(children, (array) => { sortableArray.value = array })
|
|
51
|
+
const dragPrepared = ref(-1)
|
|
52
|
+
const prepareDrag = (/** @type {number} */index) => {
|
|
53
|
+
dragPrepared.value = index
|
|
54
|
+
menuOpened.value = -1
|
|
55
|
+
}
|
|
50
56
|
|
|
51
57
|
/* manage hovered and edited items */
|
|
52
58
|
// const editedItem = computed(() => activatedItems.value[fullKey.value])
|
|
@@ -65,6 +71,7 @@ const activeItem = computed(() => {
|
|
|
65
71
|
}
|
|
66
72
|
if (dragging.value !== -1) return -1
|
|
67
73
|
if (menuOpened.value !== -1) return menuOpened.value
|
|
74
|
+
if (dragPrepared.value !== -1) return dragPrepared.value
|
|
68
75
|
return hovered.value
|
|
69
76
|
})
|
|
70
77
|
|
|
@@ -117,6 +124,7 @@ const deleteItem = (childIndex) => {
|
|
|
117
124
|
|
|
118
125
|
menuOpened.value = -1
|
|
119
126
|
}
|
|
127
|
+
const preparedDelete = ref(false)
|
|
120
128
|
|
|
121
129
|
/**
|
|
122
130
|
* @param {import('@json-layout/core').StateNode} child
|
|
@@ -136,6 +144,7 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
|
|
|
136
144
|
if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
|
|
137
145
|
if (options.value.readOnly) return 'transparent'
|
|
138
146
|
if (activeItem.value === childIndex) return theme.current.value.colors.primary
|
|
147
|
+
if (dragPrepared.value === childIndex) return theme.current.value.colors.primary
|
|
139
148
|
return 'transparent'
|
|
140
149
|
})
|
|
141
150
|
|
|
@@ -185,99 +194,124 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
|
|
|
185
194
|
:icon="statefulLayout.options.icons.edit"
|
|
186
195
|
/>
|
|
187
196
|
</v-list-item-action>
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<v-list-item-action
|
|
223
|
-
v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
|
|
197
|
+
<v-list-item-action
|
|
198
|
+
v-else-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single' && editedItem === childIndex"
|
|
199
|
+
>
|
|
200
|
+
<v-btn
|
|
201
|
+
:title="modelValue.messages.close"
|
|
202
|
+
:icon="statefulLayout.options.icons.edit"
|
|
203
|
+
variant="flat"
|
|
204
|
+
color="primary"
|
|
205
|
+
:density="buttonDensity"
|
|
206
|
+
@click="statefulLayout.deactivateItem(modelValue)"
|
|
207
|
+
/>
|
|
208
|
+
</v-list-item-action>
|
|
209
|
+
<v-list-item-action
|
|
210
|
+
v-else-if="dragPrepared === childIndex"
|
|
211
|
+
>
|
|
212
|
+
<v-btn
|
|
213
|
+
:title="modelValue.messages.sort"
|
|
214
|
+
:icon="statefulLayout.options.icons.sort"
|
|
215
|
+
variant="flat"
|
|
216
|
+
color="primary"
|
|
217
|
+
:density="buttonDensity"
|
|
218
|
+
v-bind="handleBind(childIndex)"
|
|
219
|
+
/>
|
|
220
|
+
</v-list-item-action>
|
|
221
|
+
<v-list-item-action
|
|
222
|
+
v-else-if="editedItem === undefined && modelValue.layout.listActions.length"
|
|
223
|
+
>
|
|
224
|
+
<v-menu
|
|
225
|
+
location="bottom end"
|
|
226
|
+
z-index="3000"
|
|
227
|
+
:density="modelValue.options.density"
|
|
228
|
+
:close-on-content-click="false"
|
|
229
|
+
:model-value="menuOpened === childIndex"
|
|
230
|
+
@update:model-value="value => {menuOpened = value ? childIndex : -1}"
|
|
224
231
|
>
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
232
|
+
<template #activator="{props: activatorProps}">
|
|
233
|
+
<v-btn
|
|
234
|
+
v-bind="activatorProps"
|
|
235
|
+
:icon="statefulLayout.options.icons.menu"
|
|
236
|
+
variant="plain"
|
|
237
|
+
slim
|
|
238
|
+
:density="buttonDensity"
|
|
239
|
+
/>
|
|
240
|
+
</template>
|
|
241
|
+
<v-list :density="modelValue.options.density">
|
|
242
|
+
<v-list-item
|
|
243
|
+
v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
|
|
244
|
+
:density="modelValue.options.density"
|
|
245
|
+
base-color="primary"
|
|
246
|
+
@click="statefulLayout.activateItem(modelValue, childIndex)"
|
|
247
|
+
>
|
|
248
|
+
<template #prepend>
|
|
249
|
+
<v-icon :icon="statefulLayout.options.icons.edit" />
|
|
250
|
+
</template>
|
|
251
|
+
{{ modelValue.messages.edit }}
|
|
252
|
+
</v-list-item>
|
|
253
|
+
<v-list-item
|
|
254
|
+
v-if="modelValue.layout.listActions.includes('duplicate')"
|
|
255
|
+
@click="duplicateItem(child, childIndex)"
|
|
256
|
+
>
|
|
257
|
+
<template #prepend>
|
|
258
|
+
<v-icon :icon="statefulLayout.options.icons.duplicate" />
|
|
259
|
+
</template>
|
|
260
|
+
{{ modelValue.messages.duplicate }}
|
|
261
|
+
</v-list-item>
|
|
262
|
+
<v-list-item
|
|
263
|
+
v-if="modelValue.layout.listActions.includes('sort') && activeDnd"
|
|
264
|
+
:disabled="modelValue.data.length === 1"
|
|
265
|
+
@click="prepareDrag(childIndex)"
|
|
266
|
+
>
|
|
267
|
+
<template #prepend>
|
|
268
|
+
<v-icon :icon="statefulLayout.options.icons.sort" />
|
|
269
|
+
</template>
|
|
270
|
+
{{ modelValue.messages.sort }}
|
|
271
|
+
</v-list-item>
|
|
272
|
+
<v-list-item
|
|
273
|
+
v-if="modelValue.layout.listActions.includes('sort')"
|
|
274
|
+
:disabled="childIndex === 0"
|
|
275
|
+
@click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex - 1)); menuOpened = -1"
|
|
276
|
+
>
|
|
277
|
+
<template #prepend>
|
|
278
|
+
<v-icon :icon="statefulLayout.options.icons.sortUp" />
|
|
279
|
+
</template>
|
|
280
|
+
{{ modelValue.messages.up }}
|
|
281
|
+
</v-list-item>
|
|
282
|
+
<v-list-item
|
|
283
|
+
v-if="modelValue.layout.listActions.includes('sort')"
|
|
284
|
+
:disabled="childIndex === modelValue.data.length - 1"
|
|
285
|
+
@click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex + 1)); menuOpened = -1"
|
|
286
|
+
>
|
|
287
|
+
<template #prepend>
|
|
288
|
+
<v-icon :icon="statefulLayout.options.icons.sortDown" />
|
|
289
|
+
</template>
|
|
290
|
+
{{ modelValue.messages.down }}
|
|
291
|
+
</v-list-item>
|
|
292
|
+
<v-list-item
|
|
293
|
+
v-if="modelValue.layout.listActions.includes('delete')"
|
|
294
|
+
base-color="warning"
|
|
295
|
+
@click="preparedDelete = true"
|
|
296
|
+
>
|
|
297
|
+
<template #prepend>
|
|
298
|
+
<v-icon :icon="statefulLayout.options.icons.delete" />
|
|
299
|
+
</template>
|
|
300
|
+
{{ modelValue.messages.delete }}
|
|
301
|
+
</v-list-item>
|
|
302
|
+
<v-list-item v-if="preparedDelete">
|
|
303
|
+
<v-spacer />
|
|
231
304
|
<v-btn
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
variant="plain"
|
|
235
|
-
slim
|
|
236
|
-
:density="buttonDensity"
|
|
237
|
-
/>
|
|
238
|
-
</template>
|
|
239
|
-
<v-list>
|
|
240
|
-
<v-list-item
|
|
241
|
-
v-if="modelValue.layout.listActions.includes('delete')"
|
|
242
|
-
base-color="warning"
|
|
305
|
+
color="warning"
|
|
306
|
+
class="float-right ma-1"
|
|
243
307
|
@click="deleteItem(childIndex)"
|
|
244
308
|
>
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
v-if="modelValue.layout.listActions.includes('duplicate')"
|
|
252
|
-
@click="duplicateItem(child, childIndex)"
|
|
253
|
-
>
|
|
254
|
-
<template #prepend>
|
|
255
|
-
<v-icon :icon="statefulLayout.options.icons.duplicate" />
|
|
256
|
-
</template>
|
|
257
|
-
{{ modelValue.messages.duplicate }}
|
|
258
|
-
</v-list-item>
|
|
259
|
-
<v-list-item
|
|
260
|
-
v-if="modelValue.layout.listActions.includes('sort')"
|
|
261
|
-
@click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex - 1))"
|
|
262
|
-
>
|
|
263
|
-
<template #prepend>
|
|
264
|
-
<v-icon :icon="statefulLayout.options.icons.sortUp" />
|
|
265
|
-
</template>
|
|
266
|
-
{{ modelValue.messages.up }}
|
|
267
|
-
</v-list-item>
|
|
268
|
-
<v-list-item
|
|
269
|
-
v-if="modelValue.layout.listActions.includes('sort')"
|
|
270
|
-
@click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex + 1))"
|
|
271
|
-
>
|
|
272
|
-
<template #prepend>
|
|
273
|
-
<v-icon :icon="statefulLayout.options.icons.sortDown" />
|
|
274
|
-
</template>
|
|
275
|
-
{{ modelValue.messages.down }}
|
|
276
|
-
</v-list-item>
|
|
277
|
-
</v-list>
|
|
278
|
-
</v-menu>
|
|
279
|
-
</v-list-item-action>
|
|
280
|
-
</template>
|
|
309
|
+
{{ modelValue.messages.confirm }}
|
|
310
|
+
</v-btn>
|
|
311
|
+
</v-list-item>
|
|
312
|
+
</v-list>
|
|
313
|
+
</v-menu>
|
|
314
|
+
</v-list-item-action>
|
|
281
315
|
</div>
|
|
282
316
|
</template>
|
|
283
317
|
</v-list-item>
|
package/types/compat/v2.d.ts
CHANGED
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
* @param {string} lang
|
|
6
6
|
* @returns
|
|
7
7
|
*/
|
|
8
|
-
export function v2compat(_schema: object, _ajv?: ajvModule.
|
|
8
|
+
export function v2compat(_schema: object, _ajv?: ajvModule.Ajv | undefined, lang?: string): ajvModule.SchemaObject;
|
|
9
9
|
import ajvModule from 'ajv';
|
|
10
10
|
//# sourceMappingURL=v2.d.ts.map
|
package/types/compat/v2.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAyMA;;;;;;GAMG;AACH,kCALW,MAAM
|
|
1
|
+
{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAyMA;;;;;;GAMG;AACH,kCALW,MAAM,2CAEN,MAAM,0BAoBhB;sBAjOqB,KAAK"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<any, {
|
|
2
|
+
$emit: (event: "delete" | "drag" | "sortUp" | "sortDown", ...args: any[]) => void;
|
|
3
|
+
listNode: import("../../types.js").VjsfListNode;
|
|
4
|
+
statefulLayout: import("../../types.js").VjsfStatefulLayout;
|
|
5
|
+
$props: {
|
|
6
|
+
readonly listNode?: import("../../types.js").VjsfListNode | undefined;
|
|
7
|
+
readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
|
|
8
|
+
};
|
|
9
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
+
export default _default;
|
|
11
|
+
//# sourceMappingURL=list-item-menu.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list-item-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/list-item-menu.vue.js"],"names":[],"mappings":""}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
declare const _default: import("vue").DefineComponent<any, {
|
|
2
2
|
multiple: boolean;
|
|
3
|
-
item: import("
|
|
3
|
+
item: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
|
|
4
4
|
avatarProps: Record<string, any>;
|
|
5
5
|
itemProps: Record<string, any>;
|
|
6
6
|
$props: {
|
|
7
7
|
readonly multiple?: boolean | undefined;
|
|
8
|
-
readonly item?: import("
|
|
8
|
+
readonly item?: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
|
|
9
9
|
readonly avatarProps?: Record<string, any> | undefined;
|
|
10
10
|
readonly itemProps?: Record<string, any> | undefined;
|
|
11
11
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
declare const _default: import("vue").DefineComponent<any, {
|
|
2
2
|
multiple: boolean;
|
|
3
|
-
item: import("
|
|
3
|
+
item: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
|
|
4
4
|
avatarProps: Record<string, any>;
|
|
5
5
|
last: boolean;
|
|
6
6
|
$props: {
|
|
7
7
|
readonly multiple?: boolean | undefined;
|
|
8
|
-
readonly item?: import("
|
|
8
|
+
readonly item?: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
|
|
9
9
|
readonly avatarProps?: Record<string, any> | undefined;
|
|
10
10
|
readonly last?: boolean | undefined;
|
|
11
11
|
};
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfNode>, statefulLayout: import('../types.js').VjsfStatefulLayout): {
|
|
6
6
|
hasItems: import("vue").ComputedRef<boolean>;
|
|
7
|
-
items: import("vue").Ref<import("
|
|
7
|
+
items: import("vue").Ref<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
|
|
8
8
|
loading: import("vue").Ref<boolean, boolean>;
|
|
9
9
|
search: import("vue").Ref<string, string>;
|
|
10
10
|
prepareSelectedItem: (selectedItem: any, itemValue: any) => any;
|
|
@@ -25,7 +25,7 @@ export default function _default(nodeRef: import('vue').Ref<import('../types.js'
|
|
|
25
25
|
compSlots: import("vue").ComputedRef<Record<string, any>>;
|
|
26
26
|
options: import("vue").ComputedRef<Required<import("../types.js").VjsfOptions>>;
|
|
27
27
|
skeleton: import("vue").ComputedRef<import("../../node_modules/@json-layout/core/types/compile/types.js").SkeletonNode>;
|
|
28
|
-
layout: import("vue").ComputedRef<import("
|
|
28
|
+
layout: import("vue").ComputedRef<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").BaseCompObject>;
|
|
29
29
|
data: import("vue").ComputedRef<unknown>;
|
|
30
30
|
children: import("vue").ComputedRef<import("../../node_modules/@json-layout/core/types/state/types.js").StateNode[] | undefined>;
|
|
31
31
|
};
|
|
@@ -19,7 +19,7 @@ export default function _default(nodeRef: import('vue').Ref<import('../types.js'
|
|
|
19
19
|
}>;
|
|
20
20
|
getItems: {
|
|
21
21
|
hasItems: import("vue").ComputedRef<boolean>;
|
|
22
|
-
items: import("vue").Ref<import("
|
|
22
|
+
items: import("vue").Ref<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
|
|
23
23
|
loading: import("vue").Ref<boolean, boolean>;
|
|
24
24
|
search: import("vue").Ref<string, string>;
|
|
25
25
|
prepareSelectedItem: (selectedItem: any, itemValue: any) => any;
|