v-nuxt-ui 0.2.4 → 0.2.6

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 +15 -0
  14. package/dist/runtime/components/flow/FlowEditor.client.vue +44 -7
  15. package/dist/runtime/components/flow/FlowEditor.client.vue.d.ts +15 -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
@@ -1,8 +1,8 @@
1
1
  <script setup>
2
- import { ref, computed, provide, watchEffect, onMounted, onBeforeUnmount } from "vue";
2
+ import { ref, computed, provide, watchEffect, watch, nextTick, onMounted, onBeforeUnmount, toRef } from "vue";
3
3
  import { VueFlow, useVueFlow, Panel } from "@vue-flow/core";
4
4
  import { Background } from "@vue-flow/background";
5
- import { FLOW_MOUSE_POSITION_KEY, FLOW_EDGE_STROKE_TYPES } from "#v/constants";
5
+ import { FLOW_MOUSE_POSITION_KEY, FLOW_EDITABLE_KEY, FLOW_EDGE_STROKE_TYPES } from "#v/constants";
6
6
  import FlowNode from "./FlowNode.client.vue";
7
7
  import FlowEdge from "./FlowEdge.client.vue";
8
8
  import FlowToolbar from "./FlowToolbar.vue";
@@ -16,7 +16,13 @@ const props = defineProps({
16
16
  showStats: { type: Boolean, required: false, default: true },
17
17
  minZoom: { type: Number, required: false, default: 0.2 },
18
18
  maxZoom: { type: Number, required: false, default: 4 },
19
- defaultZoom: { type: Number, required: false, default: 1 }
19
+ defaultZoom: { type: Number, required: false, default: 1 },
20
+ zoomable: { type: Boolean, required: false, default: true },
21
+ draggable: { type: Boolean, required: false, default: true },
22
+ editable: { type: Boolean, required: false, default: true },
23
+ fitView: { type: Boolean, required: false, default: false },
24
+ fitViewPadding: { type: Number, required: false, default: 0.01 },
25
+ noFlowNodeBorder: { type: Boolean, required: false }
20
26
  });
21
27
  const emit = defineEmits(["update:modelValue", "edit-node"]);
22
28
  const handleUpdateModel = (model) => {
@@ -50,6 +56,7 @@ const {
50
56
  edgePathType,
51
57
  edgeColor,
52
58
  edgeLabelColor,
59
+ nodeShowBorder,
53
60
  nodeBorderWidth,
54
61
  nodeBorderRadius,
55
62
  nodeBorderColor,
@@ -67,7 +74,7 @@ const {
67
74
  effectiveNodeHandleColor,
68
75
  effectiveEdgeColor
69
76
  } = useFlowStyles();
70
- const { onConnect, onNodeDragStop, onEdgeUpdate, getSelectedNodes, getSelectedEdges, getViewport } = useVueFlow();
77
+ const { onConnect, onNodeDragStop, onEdgeUpdate, getSelectedNodes, getSelectedEdges, getViewport, fitView: vueFlowFitView } = useVueFlow();
71
78
  const handleResizeEnd = async (nodeId, dimensions) => {
72
79
  await updateNodeDimensions(nodeId, dimensions);
73
80
  };
@@ -84,6 +91,7 @@ const {
84
91
  } = resizeLogic;
85
92
  const mousePosition = ref({ x: 0, y: 0 });
86
93
  provide(FLOW_MOUSE_POSITION_KEY, mousePosition);
94
+ provide(FLOW_EDITABLE_KEY, toRef(props, "editable"));
87
95
  const handleEditNode = (nodeId) => {
88
96
  const flowNode = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
89
97
  if (flowNode) {
@@ -94,6 +102,7 @@ watchEffect(() => {
94
102
  flowLogic.syncNodes((nodeId) => ({
95
103
  onEdit: () => handleEditNode(nodeId),
96
104
  onDelete: () => deleteNode(nodeId),
105
+ showBorder: nodeShowBorder.value && !props.noFlowNodeBorder,
97
106
  borderWidth: nodeBorderWidth.value,
98
107
  borderRadius: nodeBorderRadius.value,
99
108
  borderColor: effectiveNodeBorderColor.value,
@@ -103,6 +112,7 @@ watchEffect(() => {
103
112
  handleSize: nodeHandleSize.value,
104
113
  handleColor: effectiveNodeHandleColor.value,
105
114
  onResizeStart: (event, edge) => {
115
+ if (!props.editable) return;
106
116
  const node = props.modelValue?.nodes?.find((n) => String(n.id) === nodeId);
107
117
  if (node) {
108
118
  startResize(event, nodeId, node, edge);
@@ -138,6 +148,7 @@ const isEditableTarget = (target) => {
138
148
  return element.isContentEditable || tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
139
149
  };
140
150
  const handleKeyDown = async (event) => {
151
+ if (!props.editable) return;
141
152
  if (!isDeleteKey(event)) return;
142
153
  if (isEditableTarget(event.target)) return;
143
154
  event.preventDefault();
@@ -159,6 +170,9 @@ onMounted(() => {
159
170
  document.addEventListener("keydown", handleKeyDown, true);
160
171
  window.addEventListener("mousemove", handleGlobalMouseMove);
161
172
  window.addEventListener("mouseup", handleMouseUp);
173
+ if (props.fitView) {
174
+ setTimeout(() => vueFlowFitView({ padding: props.fitViewPadding }), 100);
175
+ }
162
176
  onBeforeUnmount(() => {
163
177
  document.removeEventListener("keydown", handleKeyDown, true);
164
178
  window.removeEventListener("mousemove", handleGlobalMouseMove);
@@ -170,13 +184,25 @@ onNodeDragStop(async (event) => {
170
184
  await updateNodePosition(node.id, node.position.x, node.position.y);
171
185
  });
172
186
  onConnect(async (params) => {
187
+ if (!props.editable) return;
173
188
  await createEdge(params);
174
189
  });
175
190
  onEdgeUpdate(({ edge, connection }) => {
191
+ if (!props.editable) return;
176
192
  if (connection.source && connection.target) {
177
193
  reconnectEdge(edge.id, connection);
178
194
  }
179
195
  });
196
+ watch(
197
+ [
198
+ () => props.fitView,
199
+ () => nodes.value.map((n) => `${n.id}:${n.position?.x}:${n.position?.y}:${n.data?.width}:${n.data?.height}`).join(",")
200
+ ],
201
+ () => {
202
+ if (props.fitView) nextTick(() => vueFlowFitView({ padding: props.fitViewPadding }));
203
+ },
204
+ { flush: "post" }
205
+ );
180
206
  const defaultEdgeOptions = computed(() => {
181
207
  const dasharray = FLOW_EDGE_STROKE_TYPES.find((t) => t.type === edgeStrokeType.value)?.dasharray || "";
182
208
  return {
@@ -205,8 +231,16 @@ const isValidConnection = () => true;
205
231
  :snap-grid="[GRID_SIZE, GRID_SIZE]"
206
232
  :default-edge-options="defaultEdgeOptions"
207
233
  :is-valid-connection="isValidConnection"
208
- :edges-updatable="true"
209
- fit-view-on-init
234
+ :edges-updatable="editable"
235
+ :zoom-on-scroll="zoomable"
236
+ :zoom-on-pinch="zoomable"
237
+ :zoom-on-double-click="zoomable"
238
+ :pan-on-drag="draggable"
239
+ :pan-on-scroll="false"
240
+ :nodes-draggable="draggable"
241
+ :nodes-connectable="editable"
242
+ :elements-selectable="editable"
243
+ :class="{ 'flow-fit-view': fitView }"
210
244
  >
211
245
  <Background
212
246
  v-if="showBackground"
@@ -231,6 +265,7 @@ const isValidConnection = () => true;
231
265
  <FlowToolbar
232
266
  :on-add-node="createNode"
233
267
  :loading="loading"
268
+ :editable="editable"
234
269
  :edge-stroke-width="edgeStrokeWidth"
235
270
  :edge-stroke-type="edgeStrokeType"
236
271
  :edge-path-type="edgePathType"
@@ -239,6 +274,7 @@ const isValidConnection = () => true;
239
274
  :edge-animated="edgeAnimated"
240
275
  :edge-color="edgeColor"
241
276
  :edge-label-color="edgeLabelColor"
277
+ :node-show-border="nodeShowBorder"
242
278
  :node-border-width="nodeBorderWidth"
243
279
  :node-border-radius="nodeBorderRadius"
244
280
  :node-border-color="nodeBorderColor"
@@ -255,6 +291,7 @@ const isValidConnection = () => true;
255
291
  :on-toggle-edge-animated="() => edgeAnimated = !edgeAnimated"
256
292
  :on-edge-color-change="(v) => edgeColor = v"
257
293
  :on-edge-label-color-change="(v) => edgeLabelColor = v"
294
+ :on-toggle-node-show-border="() => nodeShowBorder = !nodeShowBorder"
258
295
  :on-node-border-width-change="(v) => nodeBorderWidth = v"
259
296
  :on-node-border-radius-change="(v) => nodeBorderRadius = v"
260
297
  :on-node-border-color-change="(v) => nodeBorderColor = v"
@@ -291,5 +328,5 @@ const isValidConnection = () => true;
291
328
  </template>
292
329
 
293
330
  <style>
294
- @import "@vue-flow/core/dist/style.css";@import "@vue-flow/core/dist/theme-default.css";.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
331
+ @import "@vue-flow/core/dist/style.css";@import "@vue-flow/core/dist/theme-default.css";.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.flow-fit-view{height:100%!important;width:100%!important}
295
332
  </style>
@@ -16,6 +16,16 @@ 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;
28
+ noFlowNodeBorder?: boolean;
19
29
  };
20
30
  declare var __VLS_21: {
21
31
  data: any;
@@ -33,13 +43,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
33
43
  "onEdit-node"?: ((node: FlowNodeType) => any) | undefined;
34
44
  }>, {
35
45
  modelValue: Flow;
46
+ draggable: boolean;
36
47
  api: FlowApi;
48
+ editable: boolean;
37
49
  showBackground: boolean;
38
50
  showToolbar: boolean;
39
51
  showStats: boolean;
40
52
  minZoom: number;
41
53
  maxZoom: number;
42
54
  defaultZoom: number;
55
+ zoomable: boolean;
56
+ fitView: boolean;
57
+ fitViewPadding: number;
43
58
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
44
59
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
45
60
  declare const _default: typeof __VLS_export;
@@ -1,12 +1,13 @@
1
1
  <script setup>
2
- import { computed } from "vue";
2
+ import { computed, inject, ref } from "vue";
3
3
  import { Handle } from "@vue-flow/core";
4
- import { FLOW_RESIZE_HANDLES, GRID_SIZE } from "#v/constants";
4
+ import { FLOW_RESIZE_HANDLES, FLOW_EDITABLE_KEY, GRID_SIZE } from "#v/constants";
5
5
  import { useFlowNode } from "#v/composables";
6
6
  const props = defineProps({
7
7
  data: { type: null, required: true },
8
8
  selected: { type: Boolean, required: false }
9
9
  });
10
+ const editable = inject(FLOW_EDITABLE_KEY, ref(true));
10
11
  const {
11
12
  nodeRef,
12
13
  isHoveredLocal,
@@ -20,21 +21,23 @@ const {
20
21
  const setNodeRef = (el) => {
21
22
  nodeRef.value = el instanceof HTMLElement ? el : null;
22
23
  };
24
+ const showBorder = computed(() => props.data.showBorder !== false);
23
25
  </script>
24
26
 
25
27
  <template>
26
28
  <div
27
29
  :ref="setNodeRef"
28
- class="bg-background border relative flex"
30
+ class="bg-background relative flex"
31
+ :class="{ border: showBorder }"
29
32
  :style="{
30
33
  boxSizing: 'border-box',
31
34
  width: data.width ? `${data.width}px` : GRID_SIZE * 6 + 'px',
32
35
  height: data.height ? `${data.height}px` : 'auto',
33
36
  minWidth: GRID_SIZE * 2 + 'px',
34
37
  minHeight: GRID_SIZE * 2 + 'px',
35
- borderWidth: data.borderWidth ? `${data.borderWidth}px` : '2px',
36
- borderStyle: 'solid',
37
- borderColor,
38
+ borderWidth: showBorder ? data.borderWidth ? `${data.borderWidth}px` : '2px' : '0px',
39
+ borderStyle: showBorder ? 'solid' : 'none',
40
+ borderColor: showBorder ? borderColor : 'transparent',
38
41
  borderRadius: data.borderRadius !== void 0 ? `${data.borderRadius}px` : '6px',
39
42
  ...data.bgColor ? { backgroundColor: data.bgColor } : {},
40
43
  ...data.fontColor ? { color: data.fontColor } : {},
@@ -44,16 +47,18 @@ const setNodeRef = (el) => {
44
47
  @mouseleave="isHoveredLocal = false"
45
48
  @dblclick="data.onEdit?.()"
46
49
  >
47
- <!-- Connection handles (z-index 高于 resize handles,优先响应连线拖拽) -->
48
- <Handle
49
- v-for="handle in activeHandles"
50
- :id="`${handle.id}`"
51
- :key="`${handle.id}`"
52
- type="source"
53
- :position="handle.position"
54
- :style="handleStyle(handle)"
55
- @mousedown.stop
56
- />
50
+ <!-- Connection handles:仅在可编辑模式下渲染 -->
51
+ <template v-if="editable">
52
+ <Handle
53
+ v-for="handle in activeHandles"
54
+ :id="`${handle.id}`"
55
+ :key="`${handle.id}`"
56
+ type="source"
57
+ :position="handle.position"
58
+ :style="handleStyle(handle)"
59
+ @mousedown.stop
60
+ />
61
+ </template>
57
62
 
58
63
  <!-- content -->
59
64
  <div class="flex items-center justify-center gap-2 w-full">
@@ -62,14 +67,16 @@ const setNodeRef = (el) => {
62
67
  </slot>
63
68
  </div>
64
69
 
65
- <!-- Resize handles (z-index 低于 connection handles,连线优先) -->
66
- <div
67
- v-for="rh in FLOW_RESIZE_HANDLES"
68
- :key="rh.edge"
69
- class="absolute nodrag"
70
- :class="rh.class"
71
- :style="{ zIndex: rh.zIndex, cursor: rh.cursor }"
72
- @mousedown.stop.prevent="data.onResizeStart?.($event, rh.edge)"
73
- />
70
+ <!-- Resize handles:仅在可编辑模式下渲染 -->
71
+ <template v-if="editable">
72
+ <div
73
+ v-for="rh in FLOW_RESIZE_HANDLES"
74
+ :key="rh.edge"
75
+ class="absolute nodrag"
76
+ :class="rh.class"
77
+ :style="{ zIndex: rh.zIndex, cursor: rh.cursor }"
78
+ @mousedown.stop.prevent="data.onResizeStart?.($event, rh.edge)"
79
+ />
80
+ </template>
74
81
  </div>
75
82
  </template>
@@ -12,6 +12,8 @@ type __VLS_Props = {
12
12
  edgeAnimated?: boolean;
13
13
  edgeColor?: string;
14
14
  edgeLabelColor?: string;
15
+ editable?: boolean;
16
+ nodeShowBorder?: boolean;
15
17
  nodeBorderWidth?: number;
16
18
  nodeBorderRadius?: number;
17
19
  nodeBorderColor?: string;
@@ -34,6 +36,7 @@ type __VLS_Props = {
34
36
  onToggleEdgeAnimated?: () => void;
35
37
  onEdgeColorChange?: (color: string) => void;
36
38
  onEdgeLabelColorChange?: (color: string) => void;
39
+ onToggleNodeShowBorder?: () => void;
37
40
  onNodeBorderWidthChange?: (width: number) => void;
38
41
  onNodeBorderRadiusChange?: (radius: number) => void;
39
42
  onNodeBorderColorChange?: (color: string) => void;
@@ -27,6 +27,8 @@ defineProps({
27
27
  edgeAnimated: { type: Boolean, required: false },
28
28
  edgeColor: { type: String, required: false },
29
29
  edgeLabelColor: { type: String, required: false },
30
+ editable: { type: Boolean, required: false },
31
+ nodeShowBorder: { type: Boolean, required: false },
30
32
  nodeBorderWidth: { type: Number, required: false },
31
33
  nodeBorderRadius: { type: Number, required: false },
32
34
  nodeBorderColor: { type: String, required: false },
@@ -46,6 +48,7 @@ defineProps({
46
48
  onToggleEdgeAnimated: { type: Function, required: false },
47
49
  onEdgeColorChange: { type: Function, required: false },
48
50
  onEdgeLabelColorChange: { type: Function, required: false },
51
+ onToggleNodeShowBorder: { type: Function, required: false },
49
52
  onNodeBorderWidthChange: { type: Function, required: false },
50
53
  onNodeBorderRadiusChange: { type: Function, required: false },
51
54
  onNodeBorderColorChange: { type: Function, required: false },
@@ -80,7 +83,7 @@ function getStrokeDasharray(value) {
80
83
  icon="i-lucide-circle-plus"
81
84
  size="sm"
82
85
  variant="subtle"
83
- :disabled="loading"
86
+ :disabled="loading || editable === false"
84
87
  :loading="loading"
85
88
  @click="onAddNode?.()"
86
89
  />
@@ -148,6 +151,17 @@ function getStrokeDasharray(value) {
148
151
 
149
152
  <template #node>
150
153
  <div class="flex flex-col gap-4">
154
+ <!-- 显示边框 -->
155
+ <FlowToolbarItemWrapper label="显示边框">
156
+ <div class="flex items-center h-7">
157
+ <USwitch
158
+ :model-value="nodeShowBorder"
159
+ size="lg"
160
+ @update:model-value="onToggleNodeShowBorder?.()"
161
+ />
162
+ </div>
163
+ </FlowToolbarItemWrapper>
164
+
151
165
  <!-- 边框粗细 -->
152
166
  <FlowToolbarItemWrapper label="边框粗细">
153
167
  <USelect
@@ -155,6 +169,7 @@ function getStrokeDasharray(value) {
155
169
  :items="FLOW_WIDTH_ITEMS"
156
170
  :size="itemSize"
157
171
  trailing-icon=""
172
+ :disabled="!nodeShowBorder"
158
173
  @update:model-value="(v) => onNodeBorderWidthChange?.(v)"
159
174
  >
160
175
  <template #item-leading="{ item }">
@@ -12,6 +12,8 @@ type __VLS_Props = {
12
12
  edgeAnimated?: boolean;
13
13
  edgeColor?: string;
14
14
  edgeLabelColor?: string;
15
+ editable?: boolean;
16
+ nodeShowBorder?: boolean;
15
17
  nodeBorderWidth?: number;
16
18
  nodeBorderRadius?: number;
17
19
  nodeBorderColor?: string;
@@ -34,6 +36,7 @@ type __VLS_Props = {
34
36
  onToggleEdgeAnimated?: () => void;
35
37
  onEdgeColorChange?: (color: string) => void;
36
38
  onEdgeLabelColorChange?: (color: string) => void;
39
+ onToggleNodeShowBorder?: () => void;
37
40
  onNodeBorderWidthChange?: (width: number) => void;
38
41
  onNodeBorderRadiusChange?: (radius: number) => void;
39
42
  onNodeBorderColorChange?: (color: string) => void;
@@ -1,6 +1,8 @@
1
- import type { VFormFieldAsyncSelectProps } from '#v/types';
2
1
  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<(VFormFieldAsyncSelectProps<T> & {
2
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<({
3
+ initModel?: any | any[];
4
+ onUpdateInitModel?(model: any | any[] | undefined): void;
5
+ } & import("#v/types").VAsyncSelectProps<T> & {
4
6
  modelValue: T[] | undefined;
5
7
  }) & {
6
8
  "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;
@@ -2,33 +2,38 @@
2
2
  import { ref, watch } from "vue";
3
3
  import AsyncSelect from "./AsyncSelect.vue";
4
4
  const props = defineProps({
5
+ initModel: { type: null, required: false },
6
+ onUpdateInitModel: { type: Function, required: false },
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 },
5
13
  listApi: { type: Function, required: true },
14
+ searchFields: { type: Function, required: false },
15
+ likeSearchFields: { type: Array, required: false },
6
16
  extraQuery: { type: Object, required: false },
7
- initModelValues: { type: null, required: false },
8
- onUpdateInitModelValues: { type: Function, required: false },
9
- searchFields: { type: Array, required: true },
10
- extraSearchFieldFn: { type: Function, required: false },
11
- labelField: { type: null, required: false },
17
+ fetchAll: { type: Boolean, required: false },
18
+ labelField: { type: null, required: true },
12
19
  valueField: { type: null, required: true },
13
20
  labelRenderFn: { type: Function, required: false },
14
21
  enableEmptyOption: { type: Boolean, required: false },
15
- disableOprSelector: { type: Boolean, required: false },
16
22
  multiple: { type: Boolean, required: false },
17
- placeholder: { type: String, required: false },
18
- size: { type: null, required: false },
23
+ afterSelect: { type: Function, required: false },
19
24
  canCreate: { type: Boolean, required: false },
20
25
  createModalComponent: { type: null, required: false },
21
26
  createModalOpenProps: { type: Object, required: false }
22
27
  });
23
28
  const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
24
- const initModelValue = ref(modelValue.value);
25
29
  const modelValueWithValueField = ref(modelValue.value?.map((item) => item[props.valueField]));
26
30
  watch(
27
- [initModelValue, modelValueWithValueField],
31
+ [props.initModel, modelValueWithValueField],
28
32
  () => {
29
33
  const newModelValue = [];
30
34
  modelValueWithValueField.value?.forEach((value) => {
31
- const item = initModelValue.value?.find((innerItem) => innerItem[props.valueField] === value);
35
+ const initModelArray = Array.isArray(props.initModel) ? props.initModel : [props.initModel].filter(Boolean);
36
+ const item = initModelArray.find((innerItem) => innerItem[props.valueField] === value);
32
37
  if (item) {
33
38
  newModelValue.push(item);
34
39
  }
@@ -43,7 +48,5 @@ watch(
43
48
  <AsyncSelect
44
49
  v-bind="props"
45
50
  v-model="modelValueWithValueField"
46
- :init-model-values="initModelValue"
47
- @update-init-model-values="(newInitModelValues) => initModelValue = newInitModelValues"
48
51
  />
49
52
  </template>
@@ -1,6 +1,8 @@
1
- import type { VFormFieldAsyncSelectProps } from '#v/types';
2
1
  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<(VFormFieldAsyncSelectProps<T> & {
2
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<({
3
+ initModel?: any | any[];
4
+ onUpdateInitModel?(model: any | any[] | undefined): void;
5
+ } & import("#v/types").VAsyncSelectProps<T> & {
4
6
  modelValue: T[] | undefined;
5
7
  }) & {
6
8
  "onUpdate:modelValue"?: ((value: T[] | undefined) => any) | undefined;
@@ -1,23 +1,19 @@
1
- import { type Component as VueComponent } from 'vue';
2
- import type { VFormFieldAsyncSelectProps } from '#v/types';
1
+ import type { AsyncSelectValue } from '#v/types';
3
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<{
4
- props: import("vue").PublicProps & __VLS_PrettifyLocal<(VFormFieldAsyncSelectProps<T> & {
5
- icon?: string;
6
- disabled?: boolean;
7
- canCreate?: boolean;
8
- createModalComponent?: VueComponent;
9
- createModalOpenProps?: Record<string, any>;
10
- } & {
11
- modelValue: string[] | number[] | number | string | null | undefined;
3
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<({
4
+ initModel?: any | any[];
5
+ onUpdateInitModel?(model: any | any[] | undefined): void;
6
+ } & import("#v/types").VAsyncSelectProps<T> & {
7
+ modelValue: AsyncSelectValue;
12
8
  }) & {
13
- "onUpdate:modelValue"?: ((value: string | number | number[] | string[] | null | undefined) => any) | undefined;
9
+ "onUpdate:modelValue"?: ((value: AsyncSelectValue) => any) | undefined;
14
10
  }> & (typeof globalThis extends {
15
11
  __VLS_PROPS_FALLBACK: infer P;
16
12
  } ? P : {});
17
13
  expose: (exposed: {}) => void;
18
14
  attrs: any;
19
15
  slots: {};
20
- emit: (event: "update:modelValue", value: string | number | number[] | string[] | null | undefined) => void;
16
+ emit: (event: "update:modelValue", value: AsyncSelectValue) => void;
21
17
  }>) => import("vue").VNode & {
22
18
  __ctx?: Awaited<typeof __VLS_setup>;
23
19
  };