v-nuxt-ui 0.2.4 → 0.2.5
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/dist/module.json +1 -1
- package/dist/runtime/components/AsyncSelect.d.vue.ts +25 -0
- package/dist/runtime/components/AsyncSelect.vue +178 -0
- package/dist/runtime/components/AsyncSelect.vue.d.ts +25 -0
- package/dist/runtime/components/AsyncTreeSelect.d.vue.ts +23 -0
- package/dist/runtime/components/AsyncTreeSelect.vue +151 -0
- package/dist/runtime/components/AsyncTreeSelect.vue.d.ts +23 -0
- package/dist/runtime/components/Empty.d.vue.ts +1 -1
- package/dist/runtime/components/Empty.vue.d.ts +1 -1
- package/dist/runtime/components/date-picker/Input.d.vue.ts +2 -2
- package/dist/runtime/components/date-picker/Input.vue.d.ts +2 -2
- package/dist/runtime/components/flow/FlowEdge.client.vue +6 -4
- package/dist/runtime/components/flow/FlowEditor.client.d.vue.ts +14 -0
- package/dist/runtime/components/flow/FlowEditor.client.vue +43 -7
- package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts +14 -0
- package/dist/runtime/components/flow/FlowNode.client.vue +32 -25
- package/dist/runtime/components/flow/FlowToolbar.d.vue.ts +3 -0
- package/dist/runtime/components/flow/FlowToolbar.vue +16 -1
- package/dist/runtime/components/flow/FlowToolbar.vue.d.ts +3 -0
- package/dist/runtime/components/form/field/AsyncObjectSelect.d.vue.ts +4 -2
- package/dist/runtime/components/form/field/AsyncObjectSelect.vue +16 -13
- package/dist/runtime/components/form/field/AsyncObjectSelect.vue.d.ts +4 -2
- package/dist/runtime/components/form/field/AsyncSelect.d.vue.ts +8 -12
- package/dist/runtime/components/form/field/AsyncSelect.vue +31 -146
- package/dist/runtime/components/form/field/AsyncSelect.vue.d.ts +8 -12
- package/dist/runtime/components/form/field/AsyncTreeSelect.d.vue.ts +3 -5
- package/dist/runtime/components/form/field/AsyncTreeSelect.vue +31 -112
- package/dist/runtime/components/form/field/AsyncTreeSelect.vue.d.ts +3 -5
- package/dist/runtime/components/form/field/index.vue +3 -41
- package/dist/runtime/components/sys/department/CreateModal.vue +9 -9
- package/dist/runtime/components/sys/menu/CreateModal.vue +3 -3
- package/dist/runtime/components/sys/user/CreateModal.vue +9 -7
- package/dist/runtime/components/sys/user/Table.vue +3 -3
- package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.d.vue.ts +2 -6
- package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.vue +28 -122
- package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.vue.d.ts +2 -6
- package/dist/runtime/components/table/query/where/simple/item/opr/index.vue +2 -2
- package/dist/runtime/components/table/settings/UserTableColumnModal.d.vue.ts +2 -2
- package/dist/runtime/components/table/settings/UserTableColumnModal.vue.d.ts +2 -2
- package/dist/runtime/composables/flow/useFlowStyles.d.ts +2 -0
- package/dist/runtime/composables/flow/useFlowStyles.js +3 -0
- package/dist/runtime/constants/columns.js +2 -2
- package/dist/runtime/constants/flow.d.ts +4 -0
- package/dist/runtime/constants/flow.js +1 -0
- package/dist/runtime/types/components/async-select.d.ts +30 -0
- package/dist/runtime/types/components/async-select.js +0 -0
- package/dist/runtime/types/components/form/field.d.ts +8 -25
- package/dist/runtime/types/components/index.d.ts +1 -0
- package/dist/runtime/types/components/index.js +1 -0
- package/dist/runtime/types/components/table/column.d.ts +3 -27
- package/package.json +18 -18
package/dist/module.json
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { AsyncSelectCombinedValue, VAsyncSelectProps } from '#v/types';
|
|
2
|
+
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<(VAsyncSelectProps<T> & {
|
|
4
|
+
modelValue: AsyncSelectCombinedValue;
|
|
5
|
+
}) & {
|
|
6
|
+
"onUpdate:modelValue"?: ((value: AsyncSelectCombinedValue) => any) | undefined;
|
|
7
|
+
}> & (typeof globalThis extends {
|
|
8
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
9
|
+
} ? P : {});
|
|
10
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<{
|
|
11
|
+
focus: () => void;
|
|
12
|
+
}>) => void;
|
|
13
|
+
attrs: any;
|
|
14
|
+
slots: {};
|
|
15
|
+
emit: (event: "update:modelValue", value: AsyncSelectCombinedValue) => void;
|
|
16
|
+
}>) => import("vue").VNode & {
|
|
17
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
18
|
+
};
|
|
19
|
+
declare const _default: typeof __VLS_export;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
22
|
+
[K in keyof T]: T[K];
|
|
23
|
+
} : {
|
|
24
|
+
[K in keyof T as K]: T[K];
|
|
25
|
+
}) & {};
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref, computed, useTemplateRef, watch } from "vue";
|
|
3
|
+
import { useDebounceFn } from "@vueuse/core";
|
|
4
|
+
import { defu } from "defu";
|
|
5
|
+
import { useFetching } from "#v/composables/useBoolean";
|
|
6
|
+
import { isEmptyString } from "#v/utils";
|
|
7
|
+
import { useOverlay } from "@nuxt/ui/composables";
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
label: { type: String, required: false },
|
|
10
|
+
floatingPlaceholder: { type: Boolean, required: false },
|
|
11
|
+
disabled: { type: Boolean, required: false },
|
|
12
|
+
placeholder: { type: String, required: false },
|
|
13
|
+
size: { type: null, required: false },
|
|
14
|
+
icon: { type: null, required: false },
|
|
15
|
+
listApi: { type: Function, required: true },
|
|
16
|
+
searchFields: { type: Function, required: false },
|
|
17
|
+
likeSearchFields: { type: Array, required: false },
|
|
18
|
+
extraQuery: { type: Object, required: false },
|
|
19
|
+
fetchAll: { type: Boolean, required: false },
|
|
20
|
+
labelField: { type: null, required: true },
|
|
21
|
+
valueField: { type: null, required: true },
|
|
22
|
+
labelRenderFn: { type: Function, required: false },
|
|
23
|
+
enableEmptyOption: { type: Boolean, required: false },
|
|
24
|
+
multiple: { type: Boolean, required: false },
|
|
25
|
+
afterSelect: { type: Function, required: false },
|
|
26
|
+
canCreate: { type: Boolean, required: false },
|
|
27
|
+
createModalComponent: { type: null, required: false },
|
|
28
|
+
createModalOpenProps: { type: Object, required: false }
|
|
29
|
+
});
|
|
30
|
+
const overlay = useOverlay();
|
|
31
|
+
const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
|
|
32
|
+
const { fetching, startFetching, endFetching } = useFetching();
|
|
33
|
+
const searchedModel = ref([]);
|
|
34
|
+
const currentSelectedModels = computed(() => [modelValue.value.extraModels ?? []].flat());
|
|
35
|
+
const allModels = computed(() => {
|
|
36
|
+
const newSearchedModel = [];
|
|
37
|
+
if (props.enableEmptyOption) {
|
|
38
|
+
newSearchedModel.push({
|
|
39
|
+
[props.valueField]: 0,
|
|
40
|
+
[props.labelField]: "\u65E0"
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
newSearchedModel.push(...currentSelectedModels.value);
|
|
44
|
+
searchedModel.value.forEach((searchedItem) => {
|
|
45
|
+
const idx = newSearchedModel.findIndex((item) => item[props.valueField] === searchedItem[props.valueField]);
|
|
46
|
+
if (idx === -1) {
|
|
47
|
+
newSearchedModel.push(searchedItem);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
return newSearchedModel;
|
|
51
|
+
});
|
|
52
|
+
const items = computed(() => {
|
|
53
|
+
const models = fetching.value ? currentSelectedModels.value : allModels.value;
|
|
54
|
+
return models.map((p) => ({
|
|
55
|
+
label: String(props.labelRenderFn ? props.labelRenderFn(p) : p[props.labelField] ?? ""),
|
|
56
|
+
value: p[props.valueField]
|
|
57
|
+
})).filter((p) => p.label && !isEmptyString(String(p.value)));
|
|
58
|
+
});
|
|
59
|
+
const onFetchItems = async (searchTerm2) => {
|
|
60
|
+
try {
|
|
61
|
+
startFetching();
|
|
62
|
+
const query = {
|
|
63
|
+
pagination: { pageNum: 1, pageSize: 10 },
|
|
64
|
+
whereQuery: { items: [] }
|
|
65
|
+
};
|
|
66
|
+
if (!isEmptyString(searchTerm2)) {
|
|
67
|
+
props.likeSearchFields?.forEach((field) => {
|
|
68
|
+
query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm2, andOr: "or" });
|
|
69
|
+
});
|
|
70
|
+
query.whereQuery?.items?.push(...props.searchFields?.(searchTerm2) ?? []);
|
|
71
|
+
}
|
|
72
|
+
const result = await props.listApi(defu(query, props.extraQuery));
|
|
73
|
+
if (result.data) {
|
|
74
|
+
searchedModel.value = result.data.value.data?.list ?? [];
|
|
75
|
+
}
|
|
76
|
+
} finally {
|
|
77
|
+
endFetching();
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const onCreateNew = async () => {
|
|
81
|
+
if (!props.createModalComponent) return;
|
|
82
|
+
const modal = overlay.create(props.createModalComponent);
|
|
83
|
+
modal.open({
|
|
84
|
+
model: { id: 0 },
|
|
85
|
+
...props.createModalOpenProps,
|
|
86
|
+
onSave: (newModel) => {
|
|
87
|
+
searchedModel.value.push(newModel);
|
|
88
|
+
const newValue = newModel[props.valueField];
|
|
89
|
+
if (props.multiple) {
|
|
90
|
+
modelValue.value = {
|
|
91
|
+
values: Array.isArray(modelValue.value.values) ? [...modelValue.value.values, newValue] : [newValue],
|
|
92
|
+
extraModels: [...modelValue.value.extraModels ?? [], newModel]
|
|
93
|
+
};
|
|
94
|
+
} else {
|
|
95
|
+
modelValue.value = {
|
|
96
|
+
values: newValue,
|
|
97
|
+
extraModels: [newModel]
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
const onSelect = (values) => {
|
|
104
|
+
if (props.multiple) {
|
|
105
|
+
const newValues = Array.isArray(values) ? values : [];
|
|
106
|
+
const newExtraModels = allModels.value.filter((m) => newValues.includes(m[props.valueField]));
|
|
107
|
+
modelValue.value = {
|
|
108
|
+
values: newValues,
|
|
109
|
+
extraModels: newExtraModels
|
|
110
|
+
};
|
|
111
|
+
} else {
|
|
112
|
+
const newValue = values;
|
|
113
|
+
const newExtraModel = allModels.value.find((m) => m[props.valueField] === newValue);
|
|
114
|
+
modelValue.value = {
|
|
115
|
+
values: newValue,
|
|
116
|
+
extraModels: newExtraModel ? [newExtraModel] : []
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
const searchTerm = ref("");
|
|
121
|
+
const onDebounceFetchItems = useDebounceFn(onFetchItems, 512);
|
|
122
|
+
watch(searchTerm, (newVal) => {
|
|
123
|
+
onDebounceFetchItems(newVal);
|
|
124
|
+
}, { immediate: false });
|
|
125
|
+
const inputMenuRef = useTemplateRef("inputMenu");
|
|
126
|
+
defineExpose({
|
|
127
|
+
focus: () => {
|
|
128
|
+
inputMenuRef.value?.inputRef.focus();
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
</script>
|
|
132
|
+
|
|
133
|
+
<template>
|
|
134
|
+
<UInputMenu
|
|
135
|
+
ref="inputMenu"
|
|
136
|
+
:model-value="modelValue.values"
|
|
137
|
+
:search-term="searchTerm"
|
|
138
|
+
:items="items"
|
|
139
|
+
:multiple="multiple"
|
|
140
|
+
:size="size"
|
|
141
|
+
:placeholder="placeholder"
|
|
142
|
+
:create-item="canCreate && createModalComponent && {
|
|
143
|
+
position: 'top',
|
|
144
|
+
when: 'always'
|
|
145
|
+
}"
|
|
146
|
+
:reset-search-term-on-select="false"
|
|
147
|
+
color="neutral"
|
|
148
|
+
delete-icon="i-lucide-trash"
|
|
149
|
+
value-key="value"
|
|
150
|
+
clear
|
|
151
|
+
clear-icon="i-lucide-circle-x"
|
|
152
|
+
:icon="icon"
|
|
153
|
+
:loading="fetching"
|
|
154
|
+
:disabled="disabled"
|
|
155
|
+
open-on-focus
|
|
156
|
+
trailing
|
|
157
|
+
:ui="{
|
|
158
|
+
root: 'min-w-32',
|
|
159
|
+
base: 'peer',
|
|
160
|
+
content: 'min-w-fit',
|
|
161
|
+
tagsInput: 'min-w-4 w-0'
|
|
162
|
+
}"
|
|
163
|
+
:content="{
|
|
164
|
+
align: 'start'
|
|
165
|
+
}"
|
|
166
|
+
@update:open="(opened) => {
|
|
167
|
+
if (opened) {
|
|
168
|
+
onFetchItems(searchTerm);
|
|
169
|
+
}
|
|
170
|
+
}"
|
|
171
|
+
@update:model-value="(newValues) => {
|
|
172
|
+
console.log(newValues);
|
|
173
|
+
onSelect(newValues);
|
|
174
|
+
inputMenuRef?.inputRef.focus();
|
|
175
|
+
}"
|
|
176
|
+
@create="onCreateNew"
|
|
177
|
+
/>
|
|
178
|
+
</template>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { AsyncSelectCombinedValue, VAsyncSelectProps } from '#v/types';
|
|
2
|
+
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<(VAsyncSelectProps<T> & {
|
|
4
|
+
modelValue: AsyncSelectCombinedValue;
|
|
5
|
+
}) & {
|
|
6
|
+
"onUpdate:modelValue"?: ((value: AsyncSelectCombinedValue) => any) | undefined;
|
|
7
|
+
}> & (typeof globalThis extends {
|
|
8
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
9
|
+
} ? P : {});
|
|
10
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<{
|
|
11
|
+
focus: () => void;
|
|
12
|
+
}>) => void;
|
|
13
|
+
attrs: any;
|
|
14
|
+
slots: {};
|
|
15
|
+
emit: (event: "update:modelValue", value: AsyncSelectCombinedValue) => void;
|
|
16
|
+
}>) => import("vue").VNode & {
|
|
17
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
18
|
+
};
|
|
19
|
+
declare const _default: typeof __VLS_export;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
22
|
+
[K in keyof T]: T[K];
|
|
23
|
+
} : {
|
|
24
|
+
[K in keyof T as K]: T[K];
|
|
25
|
+
}) & {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { AsyncSelectCombinedValue, VAsyncSelectProps } from '#v/types';
|
|
2
|
+
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<(VAsyncSelectProps<T> & {
|
|
4
|
+
modelValue: AsyncSelectCombinedValue;
|
|
5
|
+
}) & {
|
|
6
|
+
"onUpdate:modelValue"?: ((value: AsyncSelectCombinedValue) => any) | undefined;
|
|
7
|
+
}> & (typeof globalThis extends {
|
|
8
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
9
|
+
} ? P : {});
|
|
10
|
+
expose: (exposed: {}) => void;
|
|
11
|
+
attrs: any;
|
|
12
|
+
slots: {};
|
|
13
|
+
emit: (event: "update:modelValue", value: AsyncSelectCombinedValue) => void;
|
|
14
|
+
}>) => import("vue").VNode & {
|
|
15
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: typeof __VLS_export;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
20
|
+
[K in keyof T]: T[K];
|
|
21
|
+
} : {
|
|
22
|
+
[K in keyof T as K]: T[K];
|
|
23
|
+
}) & {};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref, computed } from "vue";
|
|
3
|
+
import { useFetching } from "#v/composables/useBoolean";
|
|
4
|
+
import { flattenTree, treeifyOptions, isEmptyString } from "#v/utils";
|
|
5
|
+
import { defu } from "defu";
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
label: { type: String, required: false },
|
|
8
|
+
floatingPlaceholder: { type: Boolean, required: false },
|
|
9
|
+
disabled: { type: Boolean, required: false },
|
|
10
|
+
placeholder: { type: String, required: false },
|
|
11
|
+
size: { type: null, required: false },
|
|
12
|
+
icon: { type: null, required: false },
|
|
13
|
+
listApi: { type: Function, required: true },
|
|
14
|
+
searchFields: { type: Function, required: false },
|
|
15
|
+
likeSearchFields: { type: Array, required: false },
|
|
16
|
+
extraQuery: { type: Object, required: false, default: () => ({
|
|
17
|
+
orderQuery: [
|
|
18
|
+
{ field: "createdAt", order: "desc" }
|
|
19
|
+
]
|
|
20
|
+
}) },
|
|
21
|
+
fetchAll: { type: Boolean, required: false },
|
|
22
|
+
labelField: { type: null, required: true },
|
|
23
|
+
valueField: { type: null, required: true },
|
|
24
|
+
labelRenderFn: { type: Function, required: false },
|
|
25
|
+
enableEmptyOption: { type: Boolean, required: false },
|
|
26
|
+
multiple: { type: Boolean, required: false },
|
|
27
|
+
afterSelect: { type: Function, required: false },
|
|
28
|
+
canCreate: { type: Boolean, required: false },
|
|
29
|
+
createModalComponent: { type: null, required: false },
|
|
30
|
+
createModalOpenProps: { type: Object, required: false }
|
|
31
|
+
});
|
|
32
|
+
const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
|
|
33
|
+
const treeModelValue = computed(() => allModels.value.filter((item) => item[props.valueField] === modelValue.value));
|
|
34
|
+
const open = ref(false);
|
|
35
|
+
const searchedModel = ref([]);
|
|
36
|
+
const currentSelectedModels = computed(() => [modelValue.value.extraModels ?? []].flat());
|
|
37
|
+
const allModels = computed(() => {
|
|
38
|
+
const newSearchedModel = [];
|
|
39
|
+
if (props.enableEmptyOption) {
|
|
40
|
+
newSearchedModel.push({
|
|
41
|
+
[props.valueField]: 0,
|
|
42
|
+
[props.labelField]: "\u65E0"
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
newSearchedModel.push(...currentSelectedModels.value);
|
|
46
|
+
searchedModel.value.forEach((searchedItem) => {
|
|
47
|
+
const idx = newSearchedModel.findIndex((item) => item[props.valueField] === searchedItem[props.valueField]);
|
|
48
|
+
if (idx === -1) {
|
|
49
|
+
newSearchedModel.push(searchedItem);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
return newSearchedModel;
|
|
53
|
+
});
|
|
54
|
+
const onSelect = (values) => {
|
|
55
|
+
if (props.multiple) {
|
|
56
|
+
const newValues = Array.isArray(values) ? values : [];
|
|
57
|
+
const newExtraModels = allModels.value.filter((m) => newValues.includes(m[props.valueField]));
|
|
58
|
+
modelValue.value = {
|
|
59
|
+
values: newValues,
|
|
60
|
+
extraModels: newExtraModels
|
|
61
|
+
};
|
|
62
|
+
} else {
|
|
63
|
+
const newValue = values;
|
|
64
|
+
const newExtraModel = allModels.value.find((m) => m[props.valueField] === newValue);
|
|
65
|
+
modelValue.value = {
|
|
66
|
+
values: newValue,
|
|
67
|
+
extraModels: newExtraModel ? [newExtraModel] : []
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const items = computed(() => {
|
|
72
|
+
const options = treeifyOptions(
|
|
73
|
+
allModels.value,
|
|
74
|
+
onSelect,
|
|
75
|
+
props.labelField,
|
|
76
|
+
props.valueField,
|
|
77
|
+
"parentId"
|
|
78
|
+
);
|
|
79
|
+
options.unshift({
|
|
80
|
+
label: "\u65E0",
|
|
81
|
+
value: 0,
|
|
82
|
+
onSelect: () => onSelect(0)
|
|
83
|
+
});
|
|
84
|
+
return options;
|
|
85
|
+
});
|
|
86
|
+
const expandedItemValues = computed(() => flattenTree(items.value).filter((item) => item !== void 0).map((item) => item.value ?? ""));
|
|
87
|
+
const { fetching, startFetching, endFetching } = useFetching();
|
|
88
|
+
const searchTerm = ref("");
|
|
89
|
+
const onFetchItems = async () => {
|
|
90
|
+
try {
|
|
91
|
+
startFetching();
|
|
92
|
+
const query = {
|
|
93
|
+
pagination: { pageNum: 1, pageSize: props.fetchAll ? 0 : 10 },
|
|
94
|
+
whereQuery: { items: [] }
|
|
95
|
+
};
|
|
96
|
+
if (!isEmptyString(searchTerm.value)) {
|
|
97
|
+
props.likeSearchFields?.forEach((field) => {
|
|
98
|
+
query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm.value });
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
const result = await props.listApi(defu(query, props.extraQuery));
|
|
102
|
+
if (result.data) {
|
|
103
|
+
searchedModel.value = result.data.value.data?.list ?? [];
|
|
104
|
+
}
|
|
105
|
+
} finally {
|
|
106
|
+
endFetching();
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
</script>
|
|
110
|
+
|
|
111
|
+
<template>
|
|
112
|
+
<UPopover
|
|
113
|
+
:open="open"
|
|
114
|
+
:ui="{
|
|
115
|
+
content: 'min-w-(--reka-popover-trigger-width)'
|
|
116
|
+
}"
|
|
117
|
+
@update:open="(newOpen) => {
|
|
118
|
+
open = newOpen;
|
|
119
|
+
if (newOpen) {
|
|
120
|
+
onFetchItems();
|
|
121
|
+
}
|
|
122
|
+
}"
|
|
123
|
+
>
|
|
124
|
+
<UButton
|
|
125
|
+
:label="modelValue.values === 0 ? '\u65E0' : allModels.find((item) => item[valueField] === modelValue.values)?.[labelField] ?? ' '"
|
|
126
|
+
color="neutral"
|
|
127
|
+
variant="outline"
|
|
128
|
+
block
|
|
129
|
+
icon="i-lucide-folder-tree"
|
|
130
|
+
:loading="fetching"
|
|
131
|
+
trailing-icon="i-lucide-chevron-down"
|
|
132
|
+
:disabled="disabled"
|
|
133
|
+
:ui="{
|
|
134
|
+
leadingIcon: 'text-dimmed',
|
|
135
|
+
trailingIcon: 'text-dimmed'
|
|
136
|
+
}"
|
|
137
|
+
/>
|
|
138
|
+
|
|
139
|
+
<template #content>
|
|
140
|
+
<UTree
|
|
141
|
+
:model-value="treeModelValue"
|
|
142
|
+
:items="items"
|
|
143
|
+
:disabled="fetching"
|
|
144
|
+
:expanded="expandedItemValues"
|
|
145
|
+
:get-key="(i) => i.value"
|
|
146
|
+
multiple
|
|
147
|
+
class="p-1 max-h-80 overflow-auto"
|
|
148
|
+
/>
|
|
149
|
+
</template>
|
|
150
|
+
</UPopover>
|
|
151
|
+
</template>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { AsyncSelectCombinedValue, VAsyncSelectProps } from '#v/types';
|
|
2
|
+
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<(VAsyncSelectProps<T> & {
|
|
4
|
+
modelValue: AsyncSelectCombinedValue;
|
|
5
|
+
}) & {
|
|
6
|
+
"onUpdate:modelValue"?: ((value: AsyncSelectCombinedValue) => any) | undefined;
|
|
7
|
+
}> & (typeof globalThis extends {
|
|
8
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
9
|
+
} ? P : {});
|
|
10
|
+
expose: (exposed: {}) => void;
|
|
11
|
+
attrs: any;
|
|
12
|
+
slots: {};
|
|
13
|
+
emit: (event: "update:modelValue", value: AsyncSelectCombinedValue) => void;
|
|
14
|
+
}>) => import("vue").VNode & {
|
|
15
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: typeof __VLS_export;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
20
|
+
[K in keyof T]: T[K];
|
|
21
|
+
} : {
|
|
22
|
+
[K in keyof T as K]: T[K];
|
|
23
|
+
}) & {};
|
|
@@ -4,9 +4,9 @@ type __VLS_Props = EmptyProps & {
|
|
|
4
4
|
};
|
|
5
5
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
6
6
|
title: string;
|
|
7
|
-
size: string | number | symbol;
|
|
8
7
|
variant: string | number | symbol;
|
|
9
8
|
icon: import("@nuxt/ui").IconProps["name"];
|
|
9
|
+
size: string | number | symbol;
|
|
10
10
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
11
|
declare const _default: typeof __VLS_export;
|
|
12
12
|
export default _default;
|
|
@@ -4,9 +4,9 @@ type __VLS_Props = EmptyProps & {
|
|
|
4
4
|
};
|
|
5
5
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
6
6
|
title: string;
|
|
7
|
-
size: string | number | symbol;
|
|
8
7
|
variant: string | number | symbol;
|
|
9
8
|
icon: import("@nuxt/ui").IconProps["name"];
|
|
9
|
+
size: string | number | symbol;
|
|
10
10
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
11
|
declare const _default: typeof __VLS_export;
|
|
12
12
|
export default _default;
|
|
@@ -12,12 +12,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
12
12
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
13
13
|
focus: () => any;
|
|
14
14
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
|
-
blur: (e: FocusEvent) => any;
|
|
16
15
|
focus: (e: FocusEvent) => any;
|
|
16
|
+
blur: (e: FocusEvent) => any;
|
|
17
17
|
"update:value": (value: string | undefined) => any;
|
|
18
18
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
|
-
onBlur?: ((e: FocusEvent) => any) | undefined;
|
|
20
19
|
onFocus?: ((e: FocusEvent) => any) | undefined;
|
|
20
|
+
onBlur?: ((e: FocusEvent) => any) | undefined;
|
|
21
21
|
"onUpdate:value"?: ((value: string | undefined) => any) | undefined;
|
|
22
22
|
}>, {
|
|
23
23
|
icon: InputProps["icon"];
|
|
@@ -12,12 +12,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
12
12
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
13
13
|
focus: () => any;
|
|
14
14
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
|
-
blur: (e: FocusEvent) => any;
|
|
16
15
|
focus: (e: FocusEvent) => any;
|
|
16
|
+
blur: (e: FocusEvent) => any;
|
|
17
17
|
"update:value": (value: string | undefined) => any;
|
|
18
18
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
|
-
onBlur?: ((e: FocusEvent) => any) | undefined;
|
|
20
19
|
onFocus?: ((e: FocusEvent) => any) | undefined;
|
|
20
|
+
onBlur?: ((e: FocusEvent) => any) | undefined;
|
|
21
21
|
"onUpdate:value"?: ((value: string | undefined) => any) | undefined;
|
|
22
22
|
}>, {
|
|
23
23
|
icon: InputProps["icon"];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref, computed, nextTick } from "vue";
|
|
2
|
+
import { ref, computed, nextTick, inject } from "vue";
|
|
3
3
|
import { useFlowStyles } from "#v/composables/flow/useFlowStyles";
|
|
4
|
-
import { FLOW_EDGE_STROKE_TYPES } from "#v/constants";
|
|
4
|
+
import { FLOW_EDGE_STROKE_TYPES, FLOW_EDITABLE_KEY } from "#v/constants";
|
|
5
5
|
import { EdgeLabelRenderer, getSmoothStepPath, getBezierPath, getStraightPath, BaseEdge } from "@vue-flow/core";
|
|
6
6
|
const props = defineProps({
|
|
7
7
|
id: { type: String, required: true },
|
|
@@ -35,6 +35,7 @@ const props = defineProps({
|
|
|
35
35
|
targetX: { type: Number, required: true },
|
|
36
36
|
targetY: { type: Number, required: true }
|
|
37
37
|
});
|
|
38
|
+
const editable = inject(FLOW_EDITABLE_KEY, ref(true));
|
|
38
39
|
const {
|
|
39
40
|
edgeMarkerStart,
|
|
40
41
|
edgeMarkerEnd,
|
|
@@ -130,6 +131,7 @@ const editingLabel = ref(false);
|
|
|
130
131
|
const tempLabel = ref("");
|
|
131
132
|
const inputRef = ref(null);
|
|
132
133
|
const startEditing = () => {
|
|
134
|
+
if (!editable.value) return;
|
|
133
135
|
editingLabel.value = true;
|
|
134
136
|
tempLabel.value = typeof props.label === "string" ? props.label : "";
|
|
135
137
|
nextTick(() => {
|
|
@@ -225,9 +227,9 @@ const labelBorderColorStyle = computed(() => effectiveNodeBorderColor.value ? {
|
|
|
225
227
|
>
|
|
226
228
|
{{ label }}
|
|
227
229
|
</div>
|
|
228
|
-
<!-- Invisible placeholder for edges without label -->
|
|
230
|
+
<!-- Invisible placeholder for edges without label (only in editable mode) -->
|
|
229
231
|
<div
|
|
230
|
-
v-else
|
|
232
|
+
v-else-if="editable"
|
|
231
233
|
class="w-6 h-4 opacity-0 hover:opacity-30 hover:bg-muted rounded transition-opacity"
|
|
232
234
|
/>
|
|
233
235
|
</div>
|
|
@@ -16,6 +16,15 @@ type __VLS_Props = {
|
|
|
16
16
|
maxZoom?: number;
|
|
17
17
|
/** 默认缩放 */
|
|
18
18
|
defaultZoom?: number;
|
|
19
|
+
/** 是否允许鼠标滚轮缩放 */
|
|
20
|
+
zoomable?: boolean;
|
|
21
|
+
/** 是否允许拖拽画布(平移) */
|
|
22
|
+
draggable?: boolean;
|
|
23
|
+
/** 是否可编辑(false 时:工具栏新增按钮禁用、edge 不能增删改、node handles 不显示) */
|
|
24
|
+
editable?: boolean;
|
|
25
|
+
/** 是否自动适配填满容器并居中 */
|
|
26
|
+
fitView?: boolean;
|
|
27
|
+
fitViewPadding?: number;
|
|
19
28
|
};
|
|
20
29
|
declare var __VLS_21: {
|
|
21
30
|
data: any;
|
|
@@ -33,13 +42,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
|
|
|
33
42
|
"onEdit-node"?: ((node: FlowNodeType) => any) | undefined;
|
|
34
43
|
}>, {
|
|
35
44
|
modelValue: Flow;
|
|
45
|
+
draggable: boolean;
|
|
36
46
|
api: FlowApi;
|
|
47
|
+
editable: boolean;
|
|
37
48
|
showBackground: boolean;
|
|
38
49
|
showToolbar: boolean;
|
|
39
50
|
showStats: boolean;
|
|
40
51
|
minZoom: number;
|
|
41
52
|
maxZoom: number;
|
|
42
53
|
defaultZoom: number;
|
|
54
|
+
zoomable: boolean;
|
|
55
|
+
fitView: boolean;
|
|
56
|
+
fitViewPadding: number;
|
|
43
57
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
44
58
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
45
59
|
declare const _default: typeof __VLS_export;
|