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.
@@ -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-21fd541b] {
1
+ .qd-form--small[data-v-e1405600] {
2
2
  font: var(--td-font-body-small);
3
3
  }
4
- .qd-form--small[data-v-21fd541b] .t-form__label--top {
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-21fd541b] .t-form__controls,
9
- .qd-form--small[data-v-21fd541b] .t-form__controls-content {
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-21fd541b] .qd-grid {
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-21fd541b] .qd-grid-item {
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-21fd541b] .t-form__item {
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-21fd541b] .t-form__label {
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-21fd541b] .t-form__label--top {
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-21fd541b] .t-form__label--top + .t-form__controls > .t-form__controls-content {
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-21fd541b] .t-form__controls-content {
52
+ .qd-form--descriptions[data-v-e1405600] .t-form__controls-content {
58
53
  min-height: auto;
59
54
  }
60
- .qd-form--descriptions[data-v-21fd541b] .qd-form-item--label-top {
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-21fd541b] .qd-form-item--label-top > .t-form__item {
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-21fd541b] .qd-form-item--label-top .t-form__controls-content {
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-21fd541b] .qd-form-item--empty-content .t-form__controls {
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-21fd541b] .t-form__item-with-extra .t-form__controls,
78
- .qd-form--descriptions[data-v-21fd541b] .t-form__item-with-help .t-form__controls {
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-21fd541b] .t-form__item-with-extra .t-input__extra,
83
- .qd-form--descriptions[data-v-21fd541b] .t-form__item-with-help .t-input__extra {
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-21fd541b] .qd-form-item:not(.qd-form-item--label-top):not(.qd-form-item--label-width-full) .t-form__label {
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-21fd541b] .qd-form-item--filler,
90
- .qd-form--descriptions[data-v-21fd541b] .qd-grid-item--fill {
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-21fd541b] .t-form__label,
94
- .qd-form--descriptions-mini[data-v-21fd541b] .t-form__controls {
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-21fd541b"]]);
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.formOptions.labelAlign ? `qd-form--label-${reProps.value.formOptions.labelAlign}` : "",
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.formOptions.labelAlign
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-f980dade] > .t-form__item > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
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-f980dade]:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
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-f980dade"]]);
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, isVNode, inject, ref, createBlock, createCommentVNode, openBlock, unref, mergeProps, withCtx, createVNode, normalizeProps, guardReactiveProps, createSlots, renderSlot, renderList } from "vue";
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.formItemOptions.labelAlign === "top" ? "qd-form-item--label-top" : "",
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qidian-vue-ui",
3
- "version": "2.8.6",
3
+ "version": "2.8.8",
4
4
  "description": "基于 TDesign 的 QiDian Vue UI 组件库",
5
5
  "author": "qidian",
6
6
  "license": "MIT",