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.
Files changed (51) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/AsyncSelect.d.vue.ts +25 -0
  3. package/dist/runtime/components/AsyncSelect.vue +178 -0
  4. package/dist/runtime/components/AsyncSelect.vue.d.ts +25 -0
  5. package/dist/runtime/components/AsyncTreeSelect.d.vue.ts +23 -0
  6. package/dist/runtime/components/AsyncTreeSelect.vue +151 -0
  7. package/dist/runtime/components/AsyncTreeSelect.vue.d.ts +23 -0
  8. package/dist/runtime/components/Empty.d.vue.ts +1 -1
  9. package/dist/runtime/components/Empty.vue.d.ts +1 -1
  10. package/dist/runtime/components/date-picker/Input.d.vue.ts +2 -2
  11. package/dist/runtime/components/date-picker/Input.vue.d.ts +2 -2
  12. package/dist/runtime/components/flow/FlowEdge.client.vue +6 -4
  13. package/dist/runtime/components/flow/FlowEditor.client.d.vue.ts +14 -0
  14. package/dist/runtime/components/flow/FlowEditor.client.vue +43 -7
  15. package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts +14 -0
  16. package/dist/runtime/components/flow/FlowNode.client.vue +32 -25
  17. package/dist/runtime/components/flow/FlowToolbar.d.vue.ts +3 -0
  18. package/dist/runtime/components/flow/FlowToolbar.vue +16 -1
  19. package/dist/runtime/components/flow/FlowToolbar.vue.d.ts +3 -0
  20. package/dist/runtime/components/form/field/AsyncObjectSelect.d.vue.ts +4 -2
  21. package/dist/runtime/components/form/field/AsyncObjectSelect.vue +16 -13
  22. package/dist/runtime/components/form/field/AsyncObjectSelect.vue.d.ts +4 -2
  23. package/dist/runtime/components/form/field/AsyncSelect.d.vue.ts +8 -12
  24. package/dist/runtime/components/form/field/AsyncSelect.vue +31 -146
  25. package/dist/runtime/components/form/field/AsyncSelect.vue.d.ts +8 -12
  26. package/dist/runtime/components/form/field/AsyncTreeSelect.d.vue.ts +3 -5
  27. package/dist/runtime/components/form/field/AsyncTreeSelect.vue +31 -112
  28. package/dist/runtime/components/form/field/AsyncTreeSelect.vue.d.ts +3 -5
  29. package/dist/runtime/components/form/field/index.vue +3 -41
  30. package/dist/runtime/components/sys/department/CreateModal.vue +9 -9
  31. package/dist/runtime/components/sys/menu/CreateModal.vue +3 -3
  32. package/dist/runtime/components/sys/user/CreateModal.vue +9 -7
  33. package/dist/runtime/components/sys/user/Table.vue +3 -3
  34. package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.d.vue.ts +2 -6
  35. package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.vue +28 -122
  36. package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.vue.d.ts +2 -6
  37. package/dist/runtime/components/table/query/where/simple/item/opr/index.vue +2 -2
  38. package/dist/runtime/components/table/settings/UserTableColumnModal.d.vue.ts +2 -2
  39. package/dist/runtime/components/table/settings/UserTableColumnModal.vue.d.ts +2 -2
  40. package/dist/runtime/composables/flow/useFlowStyles.d.ts +2 -0
  41. package/dist/runtime/composables/flow/useFlowStyles.js +3 -0
  42. package/dist/runtime/constants/columns.js +2 -2
  43. package/dist/runtime/constants/flow.d.ts +4 -0
  44. package/dist/runtime/constants/flow.js +1 -0
  45. package/dist/runtime/types/components/async-select.d.ts +30 -0
  46. package/dist/runtime/types/components/async-select.js +0 -0
  47. package/dist/runtime/types/components/form/field.d.ts +8 -25
  48. package/dist/runtime/types/components/index.d.ts +1 -0
  49. package/dist/runtime/types/components/index.js +1 -0
  50. package/dist/runtime/types/components/table/column.d.ts +3 -27
  51. package/package.json +18 -18
package/dist/module.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "dependencies": [
8
8
  "@nuxt/ui"
9
9
  ],
10
- "version": "0.2.4",
10
+ "version": "0.2.5",
11
11
  "builder": {
12
12
  "@nuxt/module-builder": "1.0.2",
13
13
  "unbuild": "3.6.1"
@@ -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;