qidian-vue-ui 2.4.1 → 2.5.1
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/components/crud/search/index.vue.d.ts +4 -0
- package/dist/components/crud/search/index.vue2.mjs +2 -0
- package/dist/components/crud/search/props.d.ts +2 -0
- package/dist/components/dialog/form.vue.mjs +2 -0
- package/dist/components/dialog/props.d.ts +2 -0
- package/dist/components/form/config.d.ts +7 -1
- package/dist/components/form/config.mjs +2 -0
- package/dist/components/form/index.css +22 -19
- package/dist/components/form/index.vue.mjs +1 -1
- package/dist/components/form/index.vue2.mjs +78 -15
- package/dist/components/form/item.css +2 -2
- package/dist/components/form/item.vue.mjs +1 -1
- package/dist/components/form/item.vue2.mjs +23 -2
- package/dist/components/form/props.d.ts +2 -0
- package/dist/components/form/props.mjs +2 -0
- package/dist/components/form/types.d.ts +5 -0
- package/dist/components/grid/index.d.ts +2 -1
- package/dist/components/grid/item.css +1 -1
- package/dist/components/grid/item.vue.mjs +1 -1
- package/dist/components/grid/item.vue2.mjs +10 -41
- package/dist/components/grid/utils.d.ts +3 -0
- package/dist/components/grid/utils.mjs +26 -0
- package/dist/index.mjs +5 -1
- package/package.json +1 -1
|
@@ -8,9 +8,11 @@ type __VLS_Slots = {} & {
|
|
|
8
8
|
declare const __VLS_component: import("vue").DefineComponent<QdCrudSearchProps, {
|
|
9
9
|
submit: (params?: {
|
|
10
10
|
showErrorMessage?: boolean;
|
|
11
|
+
showFirstErrorMessage?: boolean;
|
|
11
12
|
scrollToFirstError?: import("../..").QdFormProps["scrollToFirstError"];
|
|
12
13
|
}) => Promise<import("../..").QdFormSubmitContext<import("tdesign-vue-next").Data>>;
|
|
13
14
|
validate: (params?: import("tdesign-vue-next").FormValidateParams & {
|
|
15
|
+
showFirstErrorMessage?: boolean;
|
|
14
16
|
scrollToFirstError?: import("../..").QdFormProps["scrollToFirstError"];
|
|
15
17
|
}) => Promise<import("tdesign-vue-next").FormValidateResult<import("tdesign-vue-next").Data>>;
|
|
16
18
|
clearValidate: (fields?: (string | number)[] | undefined) => void;
|
|
@@ -36,6 +38,8 @@ declare const __VLS_component: import("vue").DefineComponent<QdCrudSearchProps,
|
|
|
36
38
|
gutter: number | import("tdesign-vue-next").GutterObject | (number | import("tdesign-vue-next").GutterObject)[];
|
|
37
39
|
grid: import("../..").QdGridItemProps;
|
|
38
40
|
defaultClearable: boolean;
|
|
41
|
+
autoFill: boolean;
|
|
42
|
+
showFirstErrorMessage: boolean;
|
|
39
43
|
btnDisabled: boolean;
|
|
40
44
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
45
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -25,6 +25,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
25
25
|
loadingProps: {},
|
|
26
26
|
defaultClearable: { type: Boolean },
|
|
27
27
|
descriptions: { type: Boolean },
|
|
28
|
+
autoFill: { type: Boolean },
|
|
29
|
+
showFirstErrorMessage: { type: Boolean },
|
|
28
30
|
onSubmit: { type: Function },
|
|
29
31
|
colon: { type: Boolean },
|
|
30
32
|
data: {},
|
|
@@ -23,6 +23,7 @@ export declare const qdCrudSearchProps: {
|
|
|
23
23
|
};
|
|
24
24
|
readonly gutter: () => number[];
|
|
25
25
|
readonly data: () => any;
|
|
26
|
+
readonly autoFill: true;
|
|
26
27
|
readonly disabled: undefined;
|
|
27
28
|
readonly readonly: undefined;
|
|
28
29
|
readonly labelWidth: "auto";
|
|
@@ -32,5 +33,6 @@ export declare const qdCrudSearchProps: {
|
|
|
32
33
|
readonly preventSubmitDefault: true;
|
|
33
34
|
readonly requiredMark: undefined;
|
|
34
35
|
readonly showErrorMessage: true;
|
|
36
|
+
readonly showFirstErrorMessage: true;
|
|
35
37
|
readonly statusIcon: undefined;
|
|
36
38
|
};
|
|
@@ -23,6 +23,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
23
23
|
loadingProps: {},
|
|
24
24
|
defaultClearable: { type: Boolean },
|
|
25
25
|
descriptions: { type: Boolean },
|
|
26
|
+
autoFill: { type: Boolean },
|
|
27
|
+
showFirstErrorMessage: { type: Boolean },
|
|
26
28
|
colon: { type: Boolean },
|
|
27
29
|
data: {},
|
|
28
30
|
disabled: { type: Boolean },
|
|
@@ -36,6 +36,7 @@ export declare const qdDialogFormProps: {
|
|
|
36
36
|
readonly gutter: () => number[];
|
|
37
37
|
readonly grid: () => {};
|
|
38
38
|
readonly data: () => any;
|
|
39
|
+
readonly autoFill: true;
|
|
39
40
|
readonly disabled: undefined;
|
|
40
41
|
readonly readonly: undefined;
|
|
41
42
|
readonly labelWidth: "auto";
|
|
@@ -45,6 +46,7 @@ export declare const qdDialogFormProps: {
|
|
|
45
46
|
readonly preventSubmitDefault: true;
|
|
46
47
|
readonly requiredMark: undefined;
|
|
47
48
|
readonly showErrorMessage: true;
|
|
49
|
+
readonly showFirstErrorMessage: true;
|
|
48
50
|
readonly statusIcon: undefined;
|
|
49
51
|
readonly defaultClearable: undefined;
|
|
50
52
|
};
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import type { InjectionKey } from 'vue';
|
|
1
|
+
import type { ComputedRef, InjectionKey } from 'vue';
|
|
2
2
|
import type { QdFormBeforeSubmitQueueItem } from './types';
|
|
3
|
+
export interface QdFormGridItemRegistryEntry {
|
|
4
|
+
gridIndex: ComputedRef<number | undefined>;
|
|
5
|
+
visible: ComputedRef<boolean>;
|
|
6
|
+
colSpan: ComputedRef<number>;
|
|
7
|
+
}
|
|
8
|
+
export declare const PROVIDE_FORM_REGISTER_GRID_ITEM: InjectionKey<(entry: QdFormGridItemRegistryEntry) => void>;
|
|
3
9
|
export declare const PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE: InjectionKey<(item: QdFormBeforeSubmitQueueItem) => void>;
|
|
4
10
|
export declare const PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE: InjectionKey<(item: QdFormBeforeSubmitQueueItem) => void>;
|
|
5
11
|
export declare const PROVIDE_FORM_RESET_QUEUE: InjectionKey<(item: () => void) => void>;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
const PROVIDE_FORM_REGISTER_GRID_ITEM = /* @__PURE__ */ Symbol("QdFormRegisterGridItem");
|
|
1
2
|
const PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE = /* @__PURE__ */ Symbol("QdFormAddBeforeSubmitQueue");
|
|
2
3
|
const PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE = /* @__PURE__ */ Symbol("QdFormAddAfterSubmitQueue");
|
|
3
4
|
const PROVIDE_FORM_RESET_QUEUE = /* @__PURE__ */ Symbol("QdFormResetQueue");
|
|
4
5
|
export {
|
|
5
6
|
PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE,
|
|
6
7
|
PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE,
|
|
8
|
+
PROVIDE_FORM_REGISTER_GRID_ITEM,
|
|
7
9
|
PROVIDE_FORM_RESET_QUEUE
|
|
8
10
|
};
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
.qd-form--small[data-v-
|
|
1
|
+
.qd-form--small[data-v-c29fabc1] {
|
|
2
2
|
font: var(--td-font-body-small);
|
|
3
3
|
}
|
|
4
|
-
.qd-form--small[data-v-
|
|
4
|
+
.qd-form--small[data-v-c29fabc1] .t-form__label--top {
|
|
5
5
|
min-height: var(--td-comp-margin-xxl);
|
|
6
6
|
line-height: var(--td-comp-margin-xxl);
|
|
7
7
|
}
|
|
8
|
-
.qd-form--small[data-v-
|
|
9
|
-
.qd-form--small[data-v-
|
|
8
|
+
.qd-form--small[data-v-c29fabc1] .t-form__controls,
|
|
9
|
+
.qd-form--small[data-v-c29fabc1] .t-form__controls-content {
|
|
10
10
|
min-height: var(--td-comp-margin-xxl);
|
|
11
11
|
}
|
|
12
|
-
.qd-form--descriptions[data-v-
|
|
12
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-grid {
|
|
13
13
|
border-top: 1px solid var(--td-component-border);
|
|
14
14
|
border-left: 1px solid var(--td-component-border);
|
|
15
15
|
}
|
|
16
|
-
.qd-form--descriptions[data-v-
|
|
16
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-grid-item {
|
|
17
17
|
border-right: 1px solid var(--td-component-border);
|
|
18
18
|
border-bottom: 1px solid var(--td-component-border);
|
|
19
19
|
}
|
|
20
|
-
.qd-form--descriptions[data-v-
|
|
20
|
+
.qd-form--descriptions[data-v-c29fabc1] .t-form__item {
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: stretch;
|
|
23
23
|
height: 100%;
|
|
24
24
|
}
|
|
25
|
-
.qd-form--descriptions[data-v-
|
|
25
|
+
.qd-form--descriptions[data-v-c29fabc1] .t-form__label {
|
|
26
26
|
display: flex;
|
|
27
27
|
flex-direction: column;
|
|
28
28
|
justify-content: center;
|
|
@@ -30,17 +30,17 @@
|
|
|
30
30
|
padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l);
|
|
31
31
|
height: 100%;
|
|
32
32
|
}
|
|
33
|
-
.qd-form--descriptions[data-v-
|
|
33
|
+
.qd-form--descriptions[data-v-c29fabc1] .t-form__label--top {
|
|
34
34
|
border-bottom: 1px solid var(--td-component-border);
|
|
35
35
|
align-items: center;
|
|
36
36
|
height: var(--qd-form-description-label-height, auto);
|
|
37
37
|
white-space: normal;
|
|
38
38
|
}
|
|
39
|
-
.qd-form--descriptions[data-v-
|
|
39
|
+
.qd-form--descriptions[data-v-c29fabc1] .t-form__label--top + .t-form__controls > .t-form__controls-content {
|
|
40
40
|
justify-content: center;
|
|
41
41
|
text-align: center;
|
|
42
42
|
}
|
|
43
|
-
.qd-form--descriptions[data-v-
|
|
43
|
+
.qd-form--descriptions[data-v-c29fabc1] .t-form__controls {
|
|
44
44
|
flex: 1 1 0;
|
|
45
45
|
overflow: hidden;
|
|
46
46
|
display: flex;
|
|
@@ -50,28 +50,31 @@
|
|
|
50
50
|
margin-left: 0 !important;
|
|
51
51
|
height: 100%;
|
|
52
52
|
}
|
|
53
|
-
.qd-form--descriptions[data-v-
|
|
53
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item--label-top {
|
|
54
54
|
display: grid;
|
|
55
|
-
grid-template-rows: auto minmax(min-content,
|
|
55
|
+
grid-template-rows: auto minmax(min-content, 1fr);
|
|
56
56
|
grid-row: span 2 !important;
|
|
57
57
|
}
|
|
58
|
-
.qd-form--descriptions[data-v-
|
|
58
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item--label-top > .t-form__item {
|
|
59
59
|
display: contents;
|
|
60
60
|
}
|
|
61
|
-
.qd-form--descriptions[data-v-
|
|
61
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item--label-top .t-form__controls-content {
|
|
62
62
|
white-space: normal;
|
|
63
63
|
}
|
|
64
|
-
.qd-form--descriptions[data-v-
|
|
64
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item--empty-content .t-form__controls {
|
|
65
65
|
padding: 0 !important;
|
|
66
66
|
min-height: 0;
|
|
67
67
|
height: 0;
|
|
68
68
|
overflow: hidden;
|
|
69
69
|
}
|
|
70
|
-
.qd-form--descriptions[data-v-
|
|
70
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item:not(.qd-form-item--label-top):not(.qd-form-item--label-width-full) .t-form__label {
|
|
71
71
|
border-right: 1px solid var(--td-component-border);
|
|
72
72
|
}
|
|
73
|
-
.qd-form--descriptions
|
|
74
|
-
|
|
73
|
+
.qd-form--descriptions[data-v-c29fabc1] .qd-form-item--filler {
|
|
74
|
+
background-color: var(--td-bg-color-secondarycontainer);
|
|
75
|
+
}
|
|
76
|
+
.qd-form--descriptions-mini[data-v-c29fabc1] .t-form__label,
|
|
77
|
+
.qd-form--descriptions-mini[data-v-c29fabc1] .t-form__controls {
|
|
75
78
|
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
|
|
76
79
|
font: var(--td-font-body-small);
|
|
77
80
|
}
|
|
@@ -2,7 +2,7 @@ import './index.css'
|
|
|
2
2
|
import _sfc_main from "./index.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c29fabc1"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdForm as default
|
|
8
8
|
};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import './index.css'
|
|
2
|
-
import { defineComponent, mergeDefaults, provide, nextTick, onBeforeUnmount, useTemplateRef, ref, computed, watch, onMounted, withDirectives, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementBlock, Fragment, renderList } from "vue";
|
|
2
|
+
import { defineComponent, mergeDefaults, provide, nextTick, onBeforeUnmount, shallowRef, useTemplateRef, ref, computed, watch, onMounted, withDirectives, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementBlock, Fragment, renderList } from "vue";
|
|
3
3
|
import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
|
|
4
4
|
import { createExposeProxy, resizeDirective, easyCopy, hasOwn, to, suspectedWrapperPromise } from "qidian-shared";
|
|
5
5
|
import { Form, LoadingDirective } from "tdesign-vue-next";
|
|
6
6
|
import { useModal } from "../../hooks/useModal.mjs";
|
|
7
7
|
import { useConfig } from "../config-provider/useConfig.mjs";
|
|
8
|
-
import {
|
|
8
|
+
import { DEFAULT_COLUMNS } from "../grid/config.mjs";
|
|
9
|
+
import { PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE, PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE, PROVIDE_FORM_RESET_QUEUE, PROVIDE_FORM_REGISTER_GRID_ITEM } from "./config.mjs";
|
|
9
10
|
import QdFormItem from "./item.vue.mjs";
|
|
10
11
|
import { qdFormGrid, qdFormProps } from "./props.mjs";
|
|
11
12
|
import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
|
|
12
13
|
import QdGrid from "../grid/index.vue.mjs";
|
|
14
|
+
import QdGridItem from "../grid/item.vue.mjs";
|
|
13
15
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
14
16
|
...{
|
|
15
17
|
name: "QdForm"
|
|
@@ -23,6 +25,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
23
25
|
loadingProps: {},
|
|
24
26
|
defaultClearable: { type: Boolean },
|
|
25
27
|
descriptions: { type: Boolean },
|
|
28
|
+
autoFill: { type: Boolean },
|
|
29
|
+
showFirstErrorMessage: { type: Boolean },
|
|
26
30
|
onSubmit: { type: Function },
|
|
27
31
|
colon: { type: Boolean },
|
|
28
32
|
data: {},
|
|
@@ -83,9 +87,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
87
|
resetQueue.splice(index, 1);
|
|
84
88
|
});
|
|
85
89
|
});
|
|
90
|
+
const gridItemRegistry = shallowRef([]);
|
|
91
|
+
provide(PROVIDE_FORM_REGISTER_GRID_ITEM, (entry) => {
|
|
92
|
+
nextTick(() => {
|
|
93
|
+
gridItemRegistry.value = [...gridItemRegistry.value, entry];
|
|
94
|
+
});
|
|
95
|
+
onBeforeUnmount(() => {
|
|
96
|
+
gridItemRegistry.value = gridItemRegistry.value.filter((it) => it !== entry);
|
|
97
|
+
});
|
|
98
|
+
});
|
|
86
99
|
const formRef = useTemplateRef("form");
|
|
87
100
|
const gridRef = useTemplateRef("gridInstance");
|
|
88
101
|
const submitShowErrorMessage = ref();
|
|
102
|
+
const submitShowFirstErrorMessage = ref();
|
|
89
103
|
const submitScrollToFirstError = ref();
|
|
90
104
|
let submitResolver;
|
|
91
105
|
const reProps = computed(() => {
|
|
@@ -97,6 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
97
111
|
items,
|
|
98
112
|
onSubmit,
|
|
99
113
|
data: data2,
|
|
114
|
+
showFirstErrorMessage,
|
|
100
115
|
scrollToFirstError,
|
|
101
116
|
loading: externalLoad,
|
|
102
117
|
size,
|
|
@@ -142,11 +157,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
142
157
|
...props.loadingProps
|
|
143
158
|
};
|
|
144
159
|
});
|
|
160
|
+
const gridNodes = computed(() => {
|
|
161
|
+
const items = reProps.value.formItems;
|
|
162
|
+
if (!items?.length) return [];
|
|
163
|
+
if (!reProps.value.descriptions || !props.autoFill) {
|
|
164
|
+
return items.map((_, index) => ({ type: "item", index }));
|
|
165
|
+
}
|
|
166
|
+
const columns = reProps.value.gridOptions.columns ?? DEFAULT_COLUMNS;
|
|
167
|
+
const entryMap = new Map(gridItemRegistry.value.map((entry) => [entry.gridIndex.value, entry]));
|
|
168
|
+
const nodes = [];
|
|
169
|
+
let used = 0;
|
|
170
|
+
items.forEach((_, index) => {
|
|
171
|
+
const entry = entryMap.get(index);
|
|
172
|
+
if (entry?.visible.value) {
|
|
173
|
+
const span = entry.colSpan.value;
|
|
174
|
+
if (span > 0) {
|
|
175
|
+
if (used + span > columns) {
|
|
176
|
+
const remaining2 = columns - used;
|
|
177
|
+
if (remaining2 > 0) nodes.push({ type: "filler", span: remaining2 });
|
|
178
|
+
used = 0;
|
|
179
|
+
}
|
|
180
|
+
used += span;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
nodes.push({ type: "item", index });
|
|
184
|
+
});
|
|
185
|
+
const remaining = columns - used;
|
|
186
|
+
if (remaining > 0) nodes.push({ type: "filler", span: remaining });
|
|
187
|
+
return nodes;
|
|
188
|
+
});
|
|
189
|
+
const descriptionsFillerRow = computed(
|
|
190
|
+
() => reProps.value.formOptions.labelAlign === "top" ? 2 : 1
|
|
191
|
+
);
|
|
145
192
|
async function handleSubmit(context) {
|
|
146
193
|
const showErrorMessage = submitShowErrorMessage.value ?? props.showErrorMessage;
|
|
194
|
+
const showFirstErrorMessage = submitShowFirstErrorMessage.value ?? props.showFirstErrorMessage;
|
|
147
195
|
submitShowErrorMessage.value = void 0;
|
|
196
|
+
submitShowFirstErrorMessage.value = void 0;
|
|
148
197
|
submitScrollToFirstError.value = void 0;
|
|
149
|
-
if (
|
|
198
|
+
if (showFirstErrorMessage && context.firstError) {
|
|
150
199
|
msgError(context.firstError);
|
|
151
200
|
}
|
|
152
201
|
const submitContext = {
|
|
@@ -167,6 +216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
167
216
|
const expose = {
|
|
168
217
|
submit: async (params) => {
|
|
169
218
|
submitShowErrorMessage.value = params?.showErrorMessage;
|
|
219
|
+
submitShowFirstErrorMessage.value = params?.showFirstErrorMessage;
|
|
170
220
|
submitScrollToFirstError.value = params?.scrollToFirstError;
|
|
171
221
|
const queueRes = await Promise.all(
|
|
172
222
|
beforeSubmitQueue.map((item) => suspectedWrapperPromise(item()))
|
|
@@ -189,8 +239,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
189
239
|
}
|
|
190
240
|
});
|
|
191
241
|
const showErrorMessage = submitShowErrorMessage.value ?? props.showErrorMessage;
|
|
242
|
+
const showFirstErrorMessage = submitShowFirstErrorMessage.value ?? props.showFirstErrorMessage ?? showErrorMessage;
|
|
192
243
|
if (reQueueRes.success === false) {
|
|
193
|
-
if (
|
|
244
|
+
if (showFirstErrorMessage && reQueueRes.message) {
|
|
194
245
|
msgError(reQueueRes.message);
|
|
195
246
|
}
|
|
196
247
|
const context = {
|
|
@@ -201,6 +252,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
201
252
|
crudMode: reProps.value.formOptions.crudMode
|
|
202
253
|
};
|
|
203
254
|
submitShowErrorMessage.value = context.showErrorMessage;
|
|
255
|
+
submitShowFirstErrorMessage.value = false;
|
|
204
256
|
handleSubmit(context);
|
|
205
257
|
return context;
|
|
206
258
|
}
|
|
@@ -229,12 +281,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
229
281
|
},
|
|
230
282
|
validate: async (params) => {
|
|
231
283
|
submitShowErrorMessage.value = params?.showErrorMessage;
|
|
284
|
+
submitShowFirstErrorMessage.value = params?.showFirstErrorMessage;
|
|
232
285
|
submitScrollToFirstError.value = !params ? void 0 : hasOwn(params, "scrollToFirstError") ? params.scrollToFirstError : "";
|
|
233
286
|
const [err, res] = await to(formRef.value.validate(params));
|
|
234
287
|
submitShowErrorMessage.value = void 0;
|
|
288
|
+
submitShowFirstErrorMessage.value = void 0;
|
|
235
289
|
submitScrollToFirstError.value = void 0;
|
|
236
290
|
if (err) throw err;
|
|
237
|
-
|
|
291
|
+
const showFirstErrorMessage = params?.showFirstErrorMessage ?? props.showFirstErrorMessage ?? params?.showErrorMessage;
|
|
292
|
+
if (showFirstErrorMessage && typeof res === "object" && Object.keys(res).length) {
|
|
238
293
|
const resValue = Object.values(res);
|
|
239
294
|
let firstError = "";
|
|
240
295
|
resValue.some((item) => {
|
|
@@ -316,16 +371,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
316
371
|
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(reProps.value.gridOptions)), () => [
|
|
317
372
|
withDirectives((openBlock(), createBlock(unref(QdGrid), mergeProps({ ref: "gridInstance" }, reProps.value.gridOptions), {
|
|
318
373
|
default: withCtx(() => [
|
|
319
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(
|
|
320
|
-
return openBlock(),
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
374
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(gridNodes.value, (node, index) => {
|
|
375
|
+
return openBlock(), createElementBlock(Fragment, { key: index }, [
|
|
376
|
+
node.type === "item" ? (openBlock(), createBlock(QdFormItem, mergeProps({
|
|
377
|
+
key: 0,
|
|
378
|
+
"crud-mode": __props.crudMode,
|
|
379
|
+
context: unref(data),
|
|
380
|
+
"default-clearable": __props.defaultClearable,
|
|
381
|
+
"label-align": reProps.value.formItems?.[node.index].labelAlign ?? reProps.value.formOptions.labelAlign
|
|
382
|
+
}, { ref_for: true }, reProps.value.formItems?.[node.index], {
|
|
383
|
+
"grid-index": node.index,
|
|
384
|
+
size: reProps.value.formItems?.[node.index].size ?? reProps.value.itemSize
|
|
385
|
+
}), null, 16, ["crud-mode", "context", "default-clearable", "label-align", "grid-index", "size"])) : (openBlock(), createBlock(unref(QdGridItem), {
|
|
386
|
+
key: 1,
|
|
387
|
+
class: "qd-form-item--filler",
|
|
388
|
+
col: node.span,
|
|
389
|
+
row: descriptionsFillerRow.value
|
|
390
|
+
}, null, 8, ["col", "row"]))
|
|
391
|
+
], 64);
|
|
329
392
|
}), 128))
|
|
330
393
|
]),
|
|
331
394
|
_: 1
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.qd-form-item[data-v-
|
|
1
|
+
.qd-form-item[data-v-e6936515] > .t-form__item > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
2
2
|
width: 100%;
|
|
3
3
|
}
|
|
4
|
-
.qd-form-item__component[data-v-
|
|
4
|
+
.qd-form-item__component[data-v-e6936515]:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
5
5
|
width: 100%;
|
|
6
6
|
}
|
|
@@ -2,7 +2,7 @@ import './item.css'
|
|
|
2
2
|
import _sfc_main from "./item.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdFormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdFormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6936515"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdFormItem as default
|
|
8
8
|
};
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import './item.css'
|
|
2
|
-
import { defineComponent, mergeDefaults, computed, createBlock, createCommentVNode, openBlock, unref, mergeProps, withCtx, createVNode, normalizeProps, guardReactiveProps, createSlots, renderSlot, renderList } from "vue";
|
|
2
|
+
import { defineComponent, mergeDefaults, computed, inject, ref, createBlock, createCommentVNode, openBlock, unref, mergeProps, withCtx, createVNode, normalizeProps, guardReactiveProps, createSlots, renderSlot, renderList } from "vue";
|
|
3
3
|
import { isEmpty, filterSlots } from "qidian-shared";
|
|
4
4
|
import { FormItem } from "tdesign-vue-next";
|
|
5
5
|
import { useConfig } from "../config-provider/useConfig.mjs";
|
|
6
6
|
import { qdUseComputeValue } from "../config-renderer/compute.mjs";
|
|
7
|
+
import { PROVIDE_FORM_REGISTER_GRID_ITEM } from "./config.mjs";
|
|
7
8
|
import { qdFormItemProps } from "./props.mjs";
|
|
8
9
|
import { resolveQdFormItemOptions } from "./utils.mjs";
|
|
10
|
+
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH } from "../grid/config.mjs";
|
|
11
|
+
import { resolveGridSpan, mergeGridValue } from "../grid/utils.mjs";
|
|
9
12
|
import QdGridItem from "../grid/item.vue.mjs";
|
|
10
13
|
import _sfc_main$1 from "../config-renderer/index.vue.mjs";
|
|
11
14
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -22,6 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
22
25
|
rules: {},
|
|
23
26
|
size: {},
|
|
24
27
|
trimOnBlur: { type: Boolean },
|
|
28
|
+
gridIndex: {},
|
|
25
29
|
for: {},
|
|
26
30
|
label: {},
|
|
27
31
|
labelAlign: {},
|
|
@@ -57,8 +61,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
57
61
|
}
|
|
58
62
|
return ifRender;
|
|
59
63
|
});
|
|
64
|
+
const gridDefaultProps = inject(PROVIDE_GRID_ITEM_PROPS_KEY, void 0);
|
|
65
|
+
const gridWidth = inject(PROVIDE_GRID_WIDTH_KEY, ref(DEFAULT_GRID_WIDTH));
|
|
66
|
+
const colSpan = computed(
|
|
67
|
+
() => resolveGridSpan(mergeGridValue(props.col, gridDefaultProps?.value?.col), gridWidth.value)
|
|
68
|
+
);
|
|
69
|
+
const gridIndex = computed(() => props.gridIndex);
|
|
70
|
+
inject(PROVIDE_FORM_REGISTER_GRID_ITEM, void 0)?.({ visible: reIfRender, colSpan, gridIndex });
|
|
60
71
|
const reProps = computed(() => {
|
|
61
|
-
const {
|
|
72
|
+
const {
|
|
73
|
+
col,
|
|
74
|
+
row,
|
|
75
|
+
component,
|
|
76
|
+
required,
|
|
77
|
+
rules,
|
|
78
|
+
size,
|
|
79
|
+
trimOnBlur,
|
|
80
|
+
gridIndex: gridIndex2,
|
|
81
|
+
...formItemOptions
|
|
82
|
+
} = props;
|
|
62
83
|
const { component: reComponent, rules: wrappedRules } = resolveQdFormItemOptions({
|
|
63
84
|
formItem: props,
|
|
64
85
|
context: currentContext.value,
|
|
@@ -13,6 +13,7 @@ export declare const qdFormProps: {
|
|
|
13
13
|
readonly gutter: () => number[];
|
|
14
14
|
readonly grid: () => {};
|
|
15
15
|
readonly data: () => any;
|
|
16
|
+
readonly autoFill: true;
|
|
16
17
|
readonly disabled: undefined;
|
|
17
18
|
readonly readonly: undefined;
|
|
18
19
|
readonly labelWidth: "auto";
|
|
@@ -22,6 +23,7 @@ export declare const qdFormProps: {
|
|
|
22
23
|
readonly preventSubmitDefault: true;
|
|
23
24
|
readonly requiredMark: undefined;
|
|
24
25
|
readonly showErrorMessage: true;
|
|
26
|
+
readonly showFirstErrorMessage: true;
|
|
25
27
|
readonly statusIcon: undefined;
|
|
26
28
|
readonly defaultClearable: undefined;
|
|
27
29
|
};
|
|
@@ -13,6 +13,7 @@ const qdFormProps = {
|
|
|
13
13
|
gutter: () => qdFormGutter,
|
|
14
14
|
grid: () => ({}),
|
|
15
15
|
data: () => ({}),
|
|
16
|
+
autoFill: true,
|
|
16
17
|
disabled: void 0,
|
|
17
18
|
readonly: void 0,
|
|
18
19
|
// labelAlign: 'top',
|
|
@@ -23,6 +24,7 @@ const qdFormProps = {
|
|
|
23
24
|
preventSubmitDefault: true,
|
|
24
25
|
requiredMark: void 0,
|
|
25
26
|
showErrorMessage: true,
|
|
27
|
+
showFirstErrorMessage: true,
|
|
26
28
|
statusIcon: void 0,
|
|
27
29
|
defaultClearable: void 0
|
|
28
30
|
};
|
|
@@ -19,6 +19,7 @@ export interface QdFormItemProps extends Omit<TdFormItemProps, 'rules' | 'help'>
|
|
|
19
19
|
rules?: QdFormRule[];
|
|
20
20
|
size?: SizeEnum;
|
|
21
21
|
trimOnBlur?: boolean;
|
|
22
|
+
gridIndex?: number;
|
|
22
23
|
}
|
|
23
24
|
export interface QdFormSubmitContext<FD extends Data = Data> extends SubmitContext<FD>, Pick<QdFormProps, 'crudMode'> {
|
|
24
25
|
showErrorMessage: boolean;
|
|
@@ -32,14 +33,18 @@ export interface QdFormProps<FD extends Data = Data> extends Omit<TdFormProps<FD
|
|
|
32
33
|
loadingProps?: TdLoadingProps;
|
|
33
34
|
defaultClearable?: boolean;
|
|
34
35
|
descriptions?: boolean;
|
|
36
|
+
autoFill?: boolean;
|
|
37
|
+
showFirstErrorMessage?: boolean;
|
|
35
38
|
onSubmit?: (context: QdFormSubmitContext<FD>) => void;
|
|
36
39
|
}
|
|
37
40
|
export interface QdFormInstanceFunctions<FD extends Data = Data> extends Omit<FormInstanceFunctions, 'submit' | 'validate'> {
|
|
38
41
|
submit: (params?: {
|
|
39
42
|
showErrorMessage?: boolean;
|
|
43
|
+
showFirstErrorMessage?: boolean;
|
|
40
44
|
scrollToFirstError?: QdFormProps['scrollToFirstError'];
|
|
41
45
|
}) => Promise<QdFormSubmitContext<FD>>;
|
|
42
46
|
validate: (params?: FormValidateParams & {
|
|
47
|
+
showFirstErrorMessage?: boolean;
|
|
43
48
|
scrollToFirstError?: QdFormProps['scrollToFirstError'];
|
|
44
49
|
}) => Promise<FormValidateResult<FD>>;
|
|
45
50
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from './config';
|
|
1
|
+
export { DEFAULT_GRID_WIDTH, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from './config';
|
|
2
2
|
export { default as QdGrid } from './index.vue';
|
|
3
3
|
export { default as QdGridItem } from './item.vue';
|
|
4
4
|
export type { QdGridItemProps, QdGridProps } from './types';
|
|
5
|
+
export { mergeGridValue, resolveGridSpan } from './utils';
|
|
@@ -2,7 +2,7 @@ import './item.css'
|
|
|
2
2
|
import _sfc_main from "./item.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d5f57c8"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdGridItem as default
|
|
8
8
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './item.css'
|
|
2
2
|
import { defineComponent, inject, ref, computed, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH, DEFAULT_ROW } from "./config.mjs";
|
|
4
|
+
import { mergeGridValue, resolveGridSpan } from "./utils.mjs";
|
|
5
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
6
|
...{
|
|
7
7
|
name: "QdGridItem"
|
|
@@ -15,45 +15,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
15
15
|
const props = __props;
|
|
16
16
|
const defaultProps = inject(PROVIDE_GRID_ITEM_PROPS_KEY, void 0);
|
|
17
17
|
const gridWidth = inject(PROVIDE_GRID_WIDTH_KEY, ref(DEFAULT_GRID_WIDTH));
|
|
18
|
-
const reProps = computed(() => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
return {
|
|
29
|
-
col: mergeGutterValue(props.col, defaultProps?.value?.col),
|
|
30
|
-
row: mergeGutterValue(props.row, defaultProps?.value?.row)
|
|
31
|
-
};
|
|
32
|
-
});
|
|
33
|
-
const getColSpan = computed(() => {
|
|
34
|
-
const { col } = reProps.value;
|
|
35
|
-
if (isEmpty(col)) return DEFAULT_COL;
|
|
36
|
-
if (typeof col === "number") return col;
|
|
37
|
-
const { span, xxl, xl, lg, md, sm, xs } = col;
|
|
38
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.xxl && !isEmpty(xxl)) return xxl;
|
|
39
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.xl && !isEmpty(xl)) return xl;
|
|
40
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.lg && !isEmpty(lg)) return lg;
|
|
41
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.md && !isEmpty(md)) return md;
|
|
42
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.sm && !isEmpty(sm)) return sm;
|
|
43
|
-
return xs ?? span ?? DEFAULT_COL;
|
|
44
|
-
});
|
|
45
|
-
const getRowSpan = computed(() => {
|
|
46
|
-
const { row } = reProps.value;
|
|
47
|
-
if (isEmpty(row)) return DEFAULT_ROW;
|
|
48
|
-
if (typeof row === "number") return row;
|
|
49
|
-
const { span, xxl, xl, lg, md, sm, xs } = row;
|
|
50
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.xxl && !isEmpty(xxl)) return xxl;
|
|
51
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.xl && !isEmpty(xl)) return xl;
|
|
52
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.lg && !isEmpty(lg)) return lg;
|
|
53
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.md && !isEmpty(md)) return md;
|
|
54
|
-
if (gridWidth.value >= DEFAULT_BREAKPOINTS.sm && !isEmpty(sm)) return sm;
|
|
55
|
-
return xs ?? span ?? DEFAULT_ROW;
|
|
56
|
-
});
|
|
18
|
+
const reProps = computed(() => ({
|
|
19
|
+
col: mergeGridValue(props.col, defaultProps?.value?.col),
|
|
20
|
+
row: mergeGridValue(props.row, defaultProps?.value?.row)
|
|
21
|
+
}));
|
|
22
|
+
const getColSpan = computed(() => resolveGridSpan(reProps.value.col, gridWidth.value));
|
|
23
|
+
const getRowSpan = computed(
|
|
24
|
+
() => resolveGridSpan(reProps.value.row, gridWidth.value, DEFAULT_ROW)
|
|
25
|
+
);
|
|
57
26
|
const itemStyle = computed(() => {
|
|
58
27
|
if (getColSpan.value === 0 || getRowSpan.value === 0) {
|
|
59
28
|
return { display: "none" };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { GridGutterValue } from './types';
|
|
2
|
+
export declare function mergeGridValue(prop: GridGutterValue | undefined, defaultProp: GridGutterValue | undefined): GridGutterValue | undefined;
|
|
3
|
+
export declare function resolveGridSpan(value: GridGutterValue | undefined, gridWidth: number, fallback?: number): number;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { isEmpty } from "qidian-shared";
|
|
2
|
+
import { DEFAULT_COL, DEFAULT_BREAKPOINTS } from "./config.mjs";
|
|
3
|
+
function mergeGridValue(prop, defaultProp) {
|
|
4
|
+
if (prop === void 0) return defaultProp;
|
|
5
|
+
if (!defaultProp) return prop;
|
|
6
|
+
if (typeof prop === "number" || typeof defaultProp === "number") return prop;
|
|
7
|
+
return {
|
|
8
|
+
...defaultProp,
|
|
9
|
+
...prop
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
function resolveGridSpan(value, gridWidth, fallback = DEFAULT_COL) {
|
|
13
|
+
if (isEmpty(value)) return fallback;
|
|
14
|
+
if (typeof value === "number") return value;
|
|
15
|
+
const { span, xxl, xl, lg, md, sm, xs } = value;
|
|
16
|
+
if (gridWidth >= DEFAULT_BREAKPOINTS.xxl && !isEmpty(xxl)) return xxl;
|
|
17
|
+
if (gridWidth >= DEFAULT_BREAKPOINTS.xl && !isEmpty(xl)) return xl;
|
|
18
|
+
if (gridWidth >= DEFAULT_BREAKPOINTS.lg && !isEmpty(lg)) return lg;
|
|
19
|
+
if (gridWidth >= DEFAULT_BREAKPOINTS.md && !isEmpty(md)) return md;
|
|
20
|
+
if (gridWidth >= DEFAULT_BREAKPOINTS.sm && !isEmpty(sm)) return sm;
|
|
21
|
+
return xs ?? span ?? fallback;
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
mergeGridValue,
|
|
25
|
+
resolveGridSpan
|
|
26
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -34,9 +34,10 @@ import { PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE, PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUE
|
|
|
34
34
|
import { default as default24 } from "./components/form/index.vue.mjs";
|
|
35
35
|
import { default as default25 } from "./components/form/item.vue.mjs";
|
|
36
36
|
import { qdFormGrid, qdFormGutter } from "./components/form/props.mjs";
|
|
37
|
-
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from "./components/grid/config.mjs";
|
|
37
|
+
import { DEFAULT_GRID_WIDTH, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from "./components/grid/config.mjs";
|
|
38
38
|
import { default as default26 } from "./components/grid/index.vue.mjs";
|
|
39
39
|
import { default as default27 } from "./components/grid/item.vue.mjs";
|
|
40
|
+
import { mergeGridValue, resolveGridSpan } from "./components/grid/utils.mjs";
|
|
40
41
|
import { default as default28 } from "./components/left-ribbon-tag/index.vue.mjs";
|
|
41
42
|
import { default as default29 } from "./components/org/tag/index.vue.mjs";
|
|
42
43
|
import { default as default30 } from "./components/read-write/index.vue.mjs";
|
|
@@ -68,6 +69,7 @@ import * as auth from "./utils/auth.mjs";
|
|
|
68
69
|
import { useUICsl } from "./utils/tools.mjs";
|
|
69
70
|
import { formatDuration } from "./utils/date.mjs";
|
|
70
71
|
export {
|
|
72
|
+
DEFAULT_GRID_WIDTH,
|
|
71
73
|
PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE,
|
|
72
74
|
PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE,
|
|
73
75
|
PROVIDE_FORM_RESET_QUEUE,
|
|
@@ -125,6 +127,7 @@ export {
|
|
|
125
127
|
hasPermiDirective,
|
|
126
128
|
hasRole,
|
|
127
129
|
hasRoleDirective,
|
|
130
|
+
mergeGridValue,
|
|
128
131
|
parseVModelPath,
|
|
129
132
|
qdAsyncCompute,
|
|
130
133
|
qdCompute,
|
|
@@ -132,6 +135,7 @@ export {
|
|
|
132
135
|
qdFormGutter,
|
|
133
136
|
qdUploadAcceptMap,
|
|
134
137
|
qdUseComputeValue,
|
|
138
|
+
resolveGridSpan,
|
|
135
139
|
resolveVModelBinding,
|
|
136
140
|
setValueByPath,
|
|
137
141
|
useAgentChat,
|