qidian-vue-ui 2.8.6 → 2.8.8
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.vue2.mjs +2 -1
- package/dist/components/dialog/form.vue.mjs +2 -1
- package/dist/components/form/config.d.ts +3 -1
- package/dist/components/form/config.mjs +4 -0
- package/dist/components/form/index.css +24 -29
- package/dist/components/form/index.vue.mjs +1 -1
- package/dist/components/form/index.vue2.mjs +18 -6
- package/dist/components/form/item.css +21 -2
- package/dist/components/form/item.vue.mjs +1 -1
- package/dist/components/form/item.vue2.mjs +24 -4
- package/dist/components/form/types.d.ts +8 -2
- package/package.json +1 -1
|
@@ -20,6 +20,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
20
|
onReset: { type: Function },
|
|
21
21
|
crudMode: {},
|
|
22
22
|
size: {},
|
|
23
|
+
labelAlign: {},
|
|
24
|
+
contentAlign: {},
|
|
23
25
|
items: {},
|
|
24
26
|
loading: { type: Boolean },
|
|
25
27
|
loadingProps: {},
|
|
@@ -33,7 +35,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
35
|
disabled: { type: Boolean },
|
|
34
36
|
errorMessage: {},
|
|
35
37
|
id: {},
|
|
36
|
-
labelAlign: {},
|
|
37
38
|
labelWidth: {},
|
|
38
39
|
preventSubmitDefault: { type: Boolean },
|
|
39
40
|
readonly: { type: Boolean },
|
|
@@ -18,6 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
18
18
|
wrapper: {},
|
|
19
19
|
crudMode: {},
|
|
20
20
|
size: {},
|
|
21
|
+
labelAlign: {},
|
|
22
|
+
contentAlign: {},
|
|
21
23
|
items: {},
|
|
22
24
|
loading: { type: Boolean },
|
|
23
25
|
loadingProps: {},
|
|
@@ -30,7 +32,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
30
32
|
disabled: { type: Boolean },
|
|
31
33
|
errorMessage: {},
|
|
32
34
|
id: {},
|
|
33
|
-
labelAlign: {},
|
|
34
35
|
labelWidth: {},
|
|
35
36
|
preventSubmitDefault: { type: Boolean },
|
|
36
37
|
readonly: { type: Boolean },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComputedRef, InjectionKey } from 'vue';
|
|
2
|
-
import type { QdFormBeforeSubmitQueueItem } from './types';
|
|
2
|
+
import type { QdFormBeforeSubmitQueueItem, QdFormContentAlign, QdFormLabelAlign } from './types';
|
|
3
3
|
export interface QdFormGridItemRegistryEntry {
|
|
4
4
|
gridIndex: ComputedRef<number | undefined>;
|
|
5
5
|
visible: ComputedRef<boolean>;
|
|
@@ -7,6 +7,8 @@ export interface QdFormGridItemRegistryEntry {
|
|
|
7
7
|
isFill: ComputedRef<boolean>;
|
|
8
8
|
}
|
|
9
9
|
export declare const PROVIDE_FORM_REGISTER_GRID_ITEM: InjectionKey<(entry: QdFormGridItemRegistryEntry) => void>;
|
|
10
|
+
export declare const PROVIDE_FORM_LABEL_ALIGN: InjectionKey<ComputedRef<QdFormLabelAlign | undefined>>;
|
|
11
|
+
export declare const PROVIDE_FORM_CONTENT_ALIGN: InjectionKey<ComputedRef<QdFormContentAlign | undefined>>;
|
|
10
12
|
export declare const PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE: InjectionKey<(item: QdFormBeforeSubmitQueueItem) => void>;
|
|
11
13
|
export declare const PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE: InjectionKey<(item: QdFormBeforeSubmitQueueItem) => void>;
|
|
12
14
|
export declare const PROVIDE_FORM_RESET_QUEUE: InjectionKey<(item: () => void) => void>;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
const PROVIDE_FORM_REGISTER_GRID_ITEM = /* @__PURE__ */ Symbol("QdFormRegisterGridItem");
|
|
2
|
+
const PROVIDE_FORM_LABEL_ALIGN = /* @__PURE__ */ Symbol("QdFormLabelAlign");
|
|
3
|
+
const PROVIDE_FORM_CONTENT_ALIGN = /* @__PURE__ */ Symbol("QdFormContentAlign");
|
|
2
4
|
const PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE = /* @__PURE__ */ Symbol("QdFormAddBeforeSubmitQueue");
|
|
3
5
|
const PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE = /* @__PURE__ */ Symbol("QdFormAddAfterSubmitQueue");
|
|
4
6
|
const PROVIDE_FORM_RESET_QUEUE = /* @__PURE__ */ Symbol("QdFormResetQueue");
|
|
5
7
|
export {
|
|
6
8
|
PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE,
|
|
7
9
|
PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE,
|
|
10
|
+
PROVIDE_FORM_CONTENT_ALIGN,
|
|
11
|
+
PROVIDE_FORM_LABEL_ALIGN,
|
|
8
12
|
PROVIDE_FORM_REGISTER_GRID_ITEM,
|
|
9
13
|
PROVIDE_FORM_RESET_QUEUE
|
|
10
14
|
};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
.qd-form--small[data-v-
|
|
1
|
+
.qd-form--small[data-v-e1405600] {
|
|
2
2
|
font: var(--td-font-body-small);
|
|
3
3
|
}
|
|
4
|
-
.qd-form--small[data-v-
|
|
4
|
+
.qd-form--small[data-v-e1405600] .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-e1405600] .t-form__controls,
|
|
9
|
+
.qd-form--small[data-v-e1405600] .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-e1405600] .qd-grid {
|
|
13
13
|
border: 1px solid var(--td-component-border);
|
|
14
14
|
background-color: var(--td-component-border);
|
|
15
15
|
gap: 1px !important;
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
}
|
|
18
|
-
.qd-form--descriptions[data-v-
|
|
18
|
+
.qd-form--descriptions[data-v-e1405600] .qd-grid-item {
|
|
19
19
|
background-color: var(--td-bg-color-container);
|
|
20
20
|
}
|
|
21
|
-
.qd-form--descriptions[data-v-
|
|
21
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__item {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: stretch;
|
|
24
24
|
height: 100%;
|
|
25
25
|
margin-bottom: 0 !important;
|
|
26
26
|
}
|
|
27
|
-
.qd-form--descriptions[data-v-
|
|
27
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__label {
|
|
28
28
|
display: flex;
|
|
29
29
|
flex-direction: column;
|
|
30
30
|
justify-content: center;
|
|
@@ -33,17 +33,12 @@
|
|
|
33
33
|
height: 100%;
|
|
34
34
|
min-height: var(--td-comp-margin-xxl);
|
|
35
35
|
}
|
|
36
|
-
.qd-form--descriptions[data-v-
|
|
36
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__label--top {
|
|
37
37
|
border-bottom: 1px solid var(--td-component-border);
|
|
38
|
-
align-items: center;
|
|
39
38
|
height: var(--qd-form-description-label-height, auto);
|
|
40
39
|
white-space: normal;
|
|
41
40
|
}
|
|
42
|
-
.qd-form--descriptions[data-v-
|
|
43
|
-
justify-content: center;
|
|
44
|
-
text-align: center;
|
|
45
|
-
}
|
|
46
|
-
.qd-form--descriptions[data-v-21fd541b] .t-form__controls {
|
|
41
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__controls {
|
|
47
42
|
flex: 1 1 0;
|
|
48
43
|
overflow: hidden;
|
|
49
44
|
display: flex;
|
|
@@ -54,44 +49,44 @@
|
|
|
54
49
|
height: 100%;
|
|
55
50
|
min-height: var(--td-comp-margin-xxl);
|
|
56
51
|
}
|
|
57
|
-
.qd-form--descriptions[data-v-
|
|
52
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__controls-content {
|
|
58
53
|
min-height: auto;
|
|
59
54
|
}
|
|
60
|
-
.qd-form--descriptions[data-v-
|
|
55
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item--label-top {
|
|
61
56
|
display: grid;
|
|
62
57
|
grid-template-rows: auto minmax(min-content, 1fr);
|
|
63
58
|
grid-row: span 2 !important;
|
|
64
59
|
}
|
|
65
|
-
.qd-form--descriptions[data-v-
|
|
60
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item--label-top > .t-form__item {
|
|
66
61
|
display: contents;
|
|
67
62
|
}
|
|
68
|
-
.qd-form--descriptions[data-v-
|
|
63
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item--label-top .t-form__controls-content {
|
|
69
64
|
white-space: normal;
|
|
70
65
|
}
|
|
71
|
-
.qd-form--descriptions[data-v-
|
|
66
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item--empty-content .t-form__controls {
|
|
72
67
|
padding: 0 !important;
|
|
73
68
|
min-height: 0;
|
|
74
69
|
height: 0;
|
|
75
70
|
overflow: hidden;
|
|
76
71
|
}
|
|
77
|
-
.qd-form--descriptions[data-v-
|
|
78
|
-
.qd-form--descriptions[data-v-
|
|
72
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__item-with-extra .t-form__controls,
|
|
73
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__item-with-help .t-form__controls {
|
|
79
74
|
height: auto;
|
|
80
75
|
overflow: visible;
|
|
81
76
|
}
|
|
82
|
-
.qd-form--descriptions[data-v-
|
|
83
|
-
.qd-form--descriptions[data-v-
|
|
77
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__item-with-extra .t-input__extra,
|
|
78
|
+
.qd-form--descriptions[data-v-e1405600] .t-form__item-with-help .t-input__extra {
|
|
84
79
|
position: static;
|
|
85
80
|
}
|
|
86
|
-
.qd-form--descriptions[data-v-
|
|
81
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item:not(.qd-form-item--label-top):not(.qd-form-item--label-width-full) .t-form__label {
|
|
87
82
|
border-right: 1px solid var(--td-component-border);
|
|
88
83
|
}
|
|
89
|
-
.qd-form--descriptions[data-v-
|
|
90
|
-
.qd-form--descriptions[data-v-
|
|
84
|
+
.qd-form--descriptions[data-v-e1405600] .qd-form-item--filler,
|
|
85
|
+
.qd-form--descriptions[data-v-e1405600] .qd-grid-item--fill {
|
|
91
86
|
background-color: var(--td-bg-color-secondarycontainer);
|
|
92
87
|
}
|
|
93
|
-
.qd-form--descriptions-mini[data-v-
|
|
94
|
-
.qd-form--descriptions-mini[data-v-
|
|
88
|
+
.qd-form--descriptions-mini[data-v-e1405600] .t-form__label,
|
|
89
|
+
.qd-form--descriptions-mini[data-v-e1405600] .t-form__controls {
|
|
95
90
|
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
|
|
96
91
|
font: var(--td-font-body-small);
|
|
97
92
|
}
|
|
@@ -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-e1405600"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdForm as default
|
|
8
8
|
};
|
|
@@ -6,7 +6,7 @@ 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
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
|
+
import { PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE, PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE, PROVIDE_FORM_RESET_QUEUE, PROVIDE_FORM_REGISTER_GRID_ITEM, PROVIDE_FORM_LABEL_ALIGN, PROVIDE_FORM_CONTENT_ALIGN } from "./config.mjs";
|
|
10
10
|
import QdFormItem from "./item.vue.mjs";
|
|
11
11
|
import { qdFormGrid, qdFormProps } from "./props.mjs";
|
|
12
12
|
import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
|
|
@@ -20,6 +20,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
20
|
props: /* @__PURE__ */ mergeDefaults({
|
|
21
21
|
crudMode: {},
|
|
22
22
|
size: {},
|
|
23
|
+
labelAlign: {},
|
|
24
|
+
contentAlign: {},
|
|
23
25
|
items: {},
|
|
24
26
|
loading: { type: Boolean },
|
|
25
27
|
loadingProps: {},
|
|
@@ -33,7 +35,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
35
|
disabled: { type: Boolean },
|
|
34
36
|
errorMessage: {},
|
|
35
37
|
id: {},
|
|
36
|
-
labelAlign: {},
|
|
37
38
|
labelWidth: {},
|
|
38
39
|
preventSubmitDefault: { type: Boolean },
|
|
39
40
|
readonly: { type: Boolean },
|
|
@@ -102,6 +103,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
102
103
|
const submitShowFirstErrorMessage = ref();
|
|
103
104
|
const submitScrollToFirstError = ref();
|
|
104
105
|
let submitResolver;
|
|
106
|
+
provide(
|
|
107
|
+
PROVIDE_FORM_LABEL_ALIGN,
|
|
108
|
+
computed(() => reProps.value.labelAlignClass)
|
|
109
|
+
);
|
|
110
|
+
provide(
|
|
111
|
+
PROVIDE_FORM_CONTENT_ALIGN,
|
|
112
|
+
computed(() => reProps.value.contentAlign)
|
|
113
|
+
);
|
|
105
114
|
const reProps = computed(() => {
|
|
106
115
|
const {
|
|
107
116
|
columns,
|
|
@@ -133,10 +142,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
133
142
|
mini,
|
|
134
143
|
small: componentSize === "small" && !(descriptions && mini),
|
|
135
144
|
itemSize,
|
|
145
|
+
labelAlignClass: !formOptions.labelAlign && descriptions ? "left" : formOptions.labelAlign ?? "top",
|
|
146
|
+
contentAlign: formOptions.contentAlign ?? (formOptions.labelAlign === "top" ? "left" : formOptions.labelAlign === "top-center" ? "center" : "left-center"),
|
|
136
147
|
formOptions: {
|
|
137
148
|
...formOptions,
|
|
138
149
|
size: componentSize,
|
|
139
|
-
labelAlign: !formOptions.labelAlign && descriptions ? "left" : formOptions.labelAlign ?? "top",
|
|
150
|
+
labelAlign: !formOptions.labelAlign && descriptions ? "left" : (formOptions.labelAlign === "top-center" ? "top" : formOptions.labelAlign) ?? "top",
|
|
140
151
|
scrollToFirstError: submitShowErrorMessage.value === false ? "" : submitScrollToFirstError.value ?? scrollToFirstError,
|
|
141
152
|
onReset: reOnReset
|
|
142
153
|
},
|
|
@@ -360,7 +371,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
360
371
|
ref: "form",
|
|
361
372
|
class: [
|
|
362
373
|
"qd-form",
|
|
363
|
-
reProps.value.
|
|
374
|
+
reProps.value.labelAlignClass ? `qd-form--label-${reProps.value.labelAlignClass}` : "",
|
|
364
375
|
_ctx.$slots.footer ? "qd-form--has-footer" : "",
|
|
365
376
|
reProps.value.descriptions ? "qd-form--descriptions" : "",
|
|
366
377
|
reProps.value.descriptions && reProps.value.mini ? "qd-form--descriptions-mini" : "",
|
|
@@ -382,11 +393,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
382
393
|
"crud-mode": __props.crudMode,
|
|
383
394
|
context: unref(data),
|
|
384
395
|
"default-clearable": __props.defaultClearable,
|
|
385
|
-
"label-align": reProps.value.formItems?.[node.index].labelAlign ?? reProps.value.
|
|
396
|
+
"label-align": reProps.value.formItems?.[node.index].labelAlign ?? reProps.value.labelAlignClass,
|
|
397
|
+
"content-align": reProps.value.formItems?.[node.index].contentAlign ?? reProps.value.contentAlign
|
|
386
398
|
}, { ref_for: true }, reProps.value.formItems?.[node.index], {
|
|
387
399
|
"grid-index": node.index,
|
|
388
400
|
size: reProps.value.formItems?.[node.index].size ?? reProps.value.itemSize
|
|
389
|
-
}), null, 16, ["crud-mode", "context", "default-clearable", "label-align", "grid-index", "size"])) : (openBlock(), createBlock(unref(QdGridItem), {
|
|
401
|
+
}), null, 16, ["crud-mode", "context", "default-clearable", "label-align", "content-align", "grid-index", "size"])) : (openBlock(), createBlock(unref(QdGridItem), {
|
|
390
402
|
key: 1,
|
|
391
403
|
class: "qd-form-item--filler",
|
|
392
404
|
col: node.span,
|
|
@@ -1,6 +1,25 @@
|
|
|
1
|
-
.qd-form-item[data-v-
|
|
1
|
+
.qd-form-item--content-center[data-v-f071ba7b] .t-form__controls {
|
|
2
|
+
text-align: center;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
}
|
|
5
|
+
.qd-form-item--content-center[data-v-f071ba7b] .t-form__controls-content {
|
|
6
|
+
text-align: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
}
|
|
9
|
+
.qd-form-item--content-center-top[data-v-f071ba7b] .t-form__controls-content {
|
|
10
|
+
text-align: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
}
|
|
13
|
+
.qd-form-item--content-left-center[data-v-f071ba7b] .t-form__controls {
|
|
14
|
+
justify-content: center;
|
|
15
|
+
}
|
|
16
|
+
.qd-form-item--label-top-center[data-v-f071ba7b] .t-form__label {
|
|
17
|
+
text-align: center;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
.qd-form-item[data-v-f071ba7b] > .t-form__item > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
2
21
|
width: 100%;
|
|
3
22
|
}
|
|
4
|
-
.qd-form-item__component[data-v-
|
|
23
|
+
.qd-form-item__component[data-v-f071ba7b]:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
5
24
|
width: 100%;
|
|
6
25
|
}
|
|
@@ -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-f071ba7b"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdFormItem as default
|
|
8
8
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import './item.css'
|
|
2
|
-
import { defineComponent, mergeDefaults, computed,
|
|
2
|
+
import { defineComponent, mergeDefaults, computed, inject, isVNode, 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
|
+
import { PROVIDE_FORM_LABEL_ALIGN, PROVIDE_FORM_CONTENT_ALIGN, PROVIDE_FORM_REGISTER_GRID_ITEM } from "./config.mjs";
|
|
8
8
|
import { qdFormItemProps } from "./props.mjs";
|
|
9
9
|
import { resolveQdFormItemOptions } from "./utils.mjs";
|
|
10
10
|
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH, DEFAULT_COL } from "../grid/config.mjs";
|
|
@@ -25,10 +25,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
25
25
|
help: { type: [String, Function, Object] },
|
|
26
26
|
rules: {},
|
|
27
27
|
size: {},
|
|
28
|
+
labelAlign: {},
|
|
29
|
+
contentAlign: {},
|
|
28
30
|
trimOnBlur: { type: Boolean },
|
|
29
31
|
gridIndex: {},
|
|
30
32
|
for: {},
|
|
31
|
-
labelAlign: {},
|
|
32
33
|
labelWidth: {},
|
|
33
34
|
name: {},
|
|
34
35
|
requiredMark: { type: Boolean },
|
|
@@ -48,6 +49,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
48
49
|
const props = __props;
|
|
49
50
|
const currentContext = computed(() => props.context || {});
|
|
50
51
|
const { t } = useConfig("form");
|
|
52
|
+
const injectedLabelAlign = inject(PROVIDE_FORM_LABEL_ALIGN, void 0);
|
|
53
|
+
const injectedContentAlign = inject(PROVIDE_FORM_CONTENT_ALIGN, void 0);
|
|
54
|
+
const effectiveLabelAlign = computed(
|
|
55
|
+
() => props.labelAlign ?? injectedLabelAlign?.value
|
|
56
|
+
);
|
|
57
|
+
const effectiveContentAlign = computed(
|
|
58
|
+
() => props.contentAlign ?? injectedContentAlign?.value
|
|
59
|
+
);
|
|
60
|
+
const effectiveDefaultContentAlign = computed(() => {
|
|
61
|
+
if (effectiveLabelAlign.value === "top-center") return "center";
|
|
62
|
+
if (effectiveLabelAlign.value === "top") return "left";
|
|
63
|
+
return "left-center";
|
|
64
|
+
});
|
|
51
65
|
const reIfRender = computed(() => {
|
|
52
66
|
const ifRender = props.ifRender;
|
|
53
67
|
if (isEmpty(ifRender)) return true;
|
|
@@ -103,6 +117,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
103
117
|
size,
|
|
104
118
|
trimOnBlur,
|
|
105
119
|
gridIndex: gridIndex2,
|
|
120
|
+
labelAlign,
|
|
121
|
+
contentAlign,
|
|
106
122
|
...formItemOptions
|
|
107
123
|
} = props;
|
|
108
124
|
const { component: reComponent, rules: wrappedRules } = resolveQdFormItemOptions({
|
|
@@ -112,8 +128,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
112
128
|
t
|
|
113
129
|
});
|
|
114
130
|
return {
|
|
131
|
+
labelAlignClass: effectiveLabelAlign.value === "top-center" ? "qd-form-item--label-top qd-form-item--label-top-center" : effectiveLabelAlign.value === "top" ? "qd-form-item--label-top" : "",
|
|
132
|
+
contentAlignClass: (effectiveContentAlign.value ?? effectiveDefaultContentAlign.value) === "center-top" ? "qd-form-item--content-center-top" : (effectiveContentAlign.value ?? effectiveDefaultContentAlign.value) === "center" ? "qd-form-item--content-center" : (effectiveContentAlign.value ?? effectiveDefaultContentAlign.value) === "left-center" ? "qd-form-item--content-left-center" : "qd-form-item--content-left",
|
|
115
133
|
formItemOptions: {
|
|
116
134
|
...formItemOptions,
|
|
135
|
+
labelAlign: effectiveLabelAlign.value === "top-center" ? "top" : effectiveLabelAlign.value,
|
|
117
136
|
label: reLabel.value,
|
|
118
137
|
rules: wrappedRules
|
|
119
138
|
},
|
|
@@ -131,7 +150,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
131
150
|
class: [
|
|
132
151
|
"qd-form-item",
|
|
133
152
|
reProps.value.formItemOptions.name ? `qd-form-item__${reProps.value.formItemOptions.name}` : "",
|
|
134
|
-
reProps.value.
|
|
153
|
+
reProps.value.labelAlignClass,
|
|
154
|
+
reProps.value.contentAlignClass,
|
|
135
155
|
reProps.value.formItemOptions.labelWidth === "100%" ? "qd-form-item--label-width-full" : "",
|
|
136
156
|
!reProps.value.configRendererOptions.config && !_ctx.$slots.default ? "qd-form-item--empty-content" : ""
|
|
137
157
|
]
|
|
@@ -2,6 +2,8 @@ import type { CustomValidateResolveType, Data, FormInstanceFunctions, FormRule,
|
|
|
2
2
|
import type { AllowedComponentProps } from 'vue';
|
|
3
3
|
import type { QdComputeFunction, QdConfigRendererProps, QdConfigValue } from '../config-renderer';
|
|
4
4
|
import type { QdGridItemProps, QdGridProps } from '../grid';
|
|
5
|
+
export type QdFormLabelAlign = TdFormProps['labelAlign'] | 'top-center';
|
|
6
|
+
export type QdFormContentAlign = 'left' | 'center' | 'center-top' | 'left-center';
|
|
5
7
|
export interface QdFormRule<FD extends Data = Data> extends Omit<FormRule, 'validator'> {
|
|
6
8
|
validator?: (val: ValueType, data: FD) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
|
|
7
9
|
}
|
|
@@ -10,7 +12,7 @@ export type QdFormBeforeSubmitQueueResult = boolean | {
|
|
|
10
12
|
message?: string;
|
|
11
13
|
};
|
|
12
14
|
export type QdFormBeforeSubmitQueueItem = () => Promise<QdFormBeforeSubmitQueueResult> | QdFormBeforeSubmitQueueResult;
|
|
13
|
-
export interface QdFormItemProps extends Omit<TdFormItemProps, 'label' | 'rules' | 'help'>, AllowedComponentProps, QdGridItemProps, Pick<QdFormProps, 'crudMode' | 'defaultClearable'> {
|
|
15
|
+
export interface QdFormItemProps extends Omit<TdFormItemProps, 'label' | 'rules' | 'help' | 'labelAlign'>, AllowedComponentProps, QdGridItemProps, Pick<QdFormProps, 'crudMode' | 'defaultClearable'> {
|
|
14
16
|
context?: QdConfigRendererProps['context'];
|
|
15
17
|
component?: QdConfigRendererProps['config'];
|
|
16
18
|
label?: TdFormItemProps['label'] | QdConfigValue<TNodeReturnValue>;
|
|
@@ -19,6 +21,8 @@ export interface QdFormItemProps extends Omit<TdFormItemProps, 'label' | 'rules'
|
|
|
19
21
|
help?: TdFormItemProps['help'] | QdComputeFunction<TNodeReturnValue>;
|
|
20
22
|
rules?: QdFormRule[];
|
|
21
23
|
size?: SizeEnum;
|
|
24
|
+
labelAlign?: QdFormLabelAlign;
|
|
25
|
+
contentAlign?: QdFormContentAlign;
|
|
22
26
|
trimOnBlur?: boolean;
|
|
23
27
|
gridIndex?: number;
|
|
24
28
|
}
|
|
@@ -26,9 +30,11 @@ export interface QdFormSubmitContext<FD extends Data = Data> extends SubmitConte
|
|
|
26
30
|
showErrorMessage: boolean;
|
|
27
31
|
formData: FD;
|
|
28
32
|
}
|
|
29
|
-
export interface QdFormProps<FD extends Data = Data> extends Omit<TdFormProps<FD>, 'layout' | 'onSubmit' | 'size'>, QdGridProps {
|
|
33
|
+
export interface QdFormProps<FD extends Data = Data> extends Omit<TdFormProps<FD>, 'layout' | 'onSubmit' | 'size' | 'labelAlign'>, QdGridProps {
|
|
30
34
|
crudMode?: 'add' | 'view' | 'edit';
|
|
31
35
|
size?: SizeEnum | 'mini';
|
|
36
|
+
labelAlign?: QdFormLabelAlign;
|
|
37
|
+
contentAlign?: QdFormContentAlign;
|
|
32
38
|
items?: QdFormItemProps[];
|
|
33
39
|
loading?: boolean;
|
|
34
40
|
loadingProps?: TdLoadingProps;
|