sard-uniapp 1.24.0 → 1.24.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/CHANGELOG.md +13 -0
- package/components/checkbox-input/checkbox-input.d.ts +1 -0
- package/components/checkbox-input/checkbox-input.vue +3 -0
- package/components/checkbox-input/common.d.ts +1 -0
- package/components/checkbox-popout/README.md +11 -10
- package/components/checkbox-popout/checkbox-popout.d.ts +1 -0
- package/components/checkbox-popout/checkbox-popout.vue +11 -1
- package/components/checkbox-popout/common.d.ts +2 -0
- package/components/config/index.d.ts +4 -0
- package/components/config/index.js +3 -0
- package/components/form/README.md +38 -36
- package/components/form/common.d.ts +3 -0
- package/components/form/form.d.ts +1 -0
- package/components/form/form.vue +2 -0
- package/components/form/useForm.js +1 -0
- package/components/form-item/form-item.vue +12 -3
- package/components/form-item/index.scss +4 -2
- package/components/form-item/useFormItem.d.ts +1 -0
- package/components/form-item/useFormItem.js +2 -0
- package/components/form-item-plain/form-item-plain.vue +2 -0
- package/components/form-plain/form-plain.d.ts +1 -0
- package/components/form-plain/form-plain.vue +2 -0
- package/components/input/README.md +48 -47
- package/components/input/input.vue +1 -0
- package/components/keyboard/README.md +12 -11
- package/components/keyboard/common.d.ts +1 -0
- package/components/keyboard/index.d.ts +1 -1
- package/components/keyboard/keyboard.d.ts +2 -0
- package/components/keyboard/keyboard.vue +20 -12
- package/components/locale/lang/ar-SA.d.ts +124 -0
- package/components/locale/lang/ar-SA.js +124 -0
- package/components/popout-input/index.scss +5 -0
- package/components/popout-input/popout-input.vue +11 -2
- package/components/popout-input/variables.scss +1 -0
- package/components/radio-input/common.d.ts +1 -0
- package/components/radio-input/radio-input.d.ts +1 -0
- package/components/radio-input/radio-input.vue +3 -0
- package/components/radio-popout/README.md +10 -9
- package/components/radio-popout/common.d.ts +2 -0
- package/components/radio-popout/radio-popout.d.ts +1 -0
- package/components/radio-popout/radio-popout.vue +10 -1
- package/components/rate/index.scss +2 -3
- package/components/stepper/index.scss +2 -3
- package/components/switch/index.scss +8 -4
- package/components/tree/README.md +1 -0
- package/components/tree/common.d.ts +5 -0
- package/components/tree/tree.d.ts +8 -0
- package/components/tree/tree.vue +11 -3
- package/components/tree-node/tree-node.vue +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
## [1.24.1](https://github.com/sutras/sard-uniapp/compare/v1.24.0...v1.24.1) (2025-08-31)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **form:** 新增content-position属性 ([b588249](https://github.com/sutras/sard-uniapp/commit/b5882493653491d6a03f0b04f898b6b9c31a06c5))
|
|
7
|
+
* **keyboard:** 为车牌键盘模式添加双向绑定支持 ([740f7bf](https://github.com/sutras/sard-uniapp/commit/740f7bf074658d845d49ad5582663af639757260))
|
|
8
|
+
* **tree:** 新增node-click事件 ([a70e5d7](https://github.com/sutras/sard-uniapp/commit/a70e5d786305e580cbac7eb8c897ed79cff54059))
|
|
9
|
+
* 新增checkbox-popout和radio-popout新增icon-position属性 ([32f458a](https://github.com/sutras/sard-uniapp/commit/32f458aa46ceebdb4ed46f51733f3749e60461a0))
|
|
10
|
+
* 新增阿拉伯语支持 ([b0b2c60](https://github.com/sutras/sard-uniapp/commit/b0b2c6050bad21f476e767659c8ac6802bfcadb6))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
1
14
|
# [1.24.0](https://github.com/sutras/sard-uniapp/compare/v1.23.5...v1.24.0) (2025-08-24)
|
|
2
15
|
|
|
3
16
|
|
|
@@ -9,6 +9,7 @@ declare const __VLS_component: import("vue").DefineComponent<CheckboxInputProps,
|
|
|
9
9
|
}>, {
|
|
10
10
|
options: import("../checkbox/common").CheckboxGroupOption[];
|
|
11
11
|
valueOnClear: () => any;
|
|
12
|
+
iconPosition: "left" | "right";
|
|
12
13
|
validateEvent: boolean;
|
|
13
14
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
15
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
:searchable="searchable"
|
|
35
35
|
:filter-placeholder="filterPlaceholder"
|
|
36
36
|
:resettable="resettable"
|
|
37
|
+
:icon-position="iconPosition"
|
|
37
38
|
@change="onChange"
|
|
38
39
|
@visible-hook="onVisibleHook"
|
|
39
40
|
@confirm="onConfirm"
|
|
@@ -74,6 +75,7 @@ import { usePopoutInput } from "../../use";
|
|
|
74
75
|
* @property {boolean} searchable 是否可搜索,默认值:false。
|
|
75
76
|
* @property {string} filterPlaceholder 搜索输入框占位符内容,默认值:-。
|
|
76
77
|
* @property {boolean} resettable 关闭弹出框后,是否可复位弹出框值,默认值:false。
|
|
78
|
+
* @property {'left' | 'right'} iconPosition 可定义复选框的位置,默认值:'left'。
|
|
77
79
|
* @property {boolean} clearable 是否显示清空按钮,默认值:false。
|
|
78
80
|
* @property {string} placeholder 输入框占位符内容,默认值:-。
|
|
79
81
|
* @property {() => any} valueOnClear 设置点击清除按钮后的值,默认值:() => undefined。
|
|
@@ -115,6 +117,7 @@ export default _defineComponent({
|
|
|
115
117
|
searchable: { type: Boolean, required: false },
|
|
116
118
|
filterPlaceholder: { type: String, required: false },
|
|
117
119
|
resettable: { type: Boolean, required: false },
|
|
120
|
+
iconPosition: { type: String, required: false },
|
|
118
121
|
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
119
122
|
rootClass: { type: String, required: false },
|
|
120
123
|
modelValue: { type: Array, required: false },
|
|
@@ -9,6 +9,7 @@ export declare const defaultCheckboxInputProps: () => {
|
|
|
9
9
|
valueOnClear: CheckboxInputProps["valueOnClear"];
|
|
10
10
|
options: () => never[];
|
|
11
11
|
validateEvent: boolean;
|
|
12
|
+
iconPosition: CheckboxPopoutProps["iconPosition"];
|
|
12
13
|
};
|
|
13
14
|
export interface CheckboxInputSlots extends PopoutInputSlots {
|
|
14
15
|
}
|
|
@@ -48,16 +48,17 @@ import CheckboxPopout from 'sard-uniapp/components/checkbox-popout/checkbox-popo
|
|
|
48
48
|
|
|
49
49
|
继承 [`CheckboxGroupProps`](./checkbox#CheckboxGroupProps) 并有以下额外属性:
|
|
50
50
|
|
|
51
|
-
| 属性 | 描述 | 类型
|
|
52
|
-
| ----------------------------------- | -------------------------------- |
|
|
53
|
-
| popout-class | 弹窗框根元素类名 | string
|
|
54
|
-
| popout-style | 弹窗框根元素样式 | StyleValue
|
|
55
|
-
| visible (v-model) | 是否显示弹出框 | boolean
|
|
56
|
-
| title | 弹出框标题 | string
|
|
57
|
-
| show-check-all <sup>1.20+</sup> | 是否显示全选 | boolean
|
|
58
|
-
| searchable <sup>1.20+</sup> | 是否可搜索 | boolean
|
|
59
|
-
| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容 | string
|
|
60
|
-
| resettable <sup>1.23.3+</sup> | 关闭弹出框后,是否可复位弹出框值 | boolean
|
|
51
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
52
|
+
| ----------------------------------- | -------------------------------- | ----------------- | ------ |
|
|
53
|
+
| popout-class | 弹窗框根元素类名 | string | - |
|
|
54
|
+
| popout-style | 弹窗框根元素样式 | StyleValue | - |
|
|
55
|
+
| visible (v-model) | 是否显示弹出框 | boolean | - |
|
|
56
|
+
| title | 弹出框标题 | string | - |
|
|
57
|
+
| show-check-all <sup>1.20+</sup> | 是否显示全选 | boolean | false |
|
|
58
|
+
| searchable <sup>1.20+</sup> | 是否可搜索 | boolean | false |
|
|
59
|
+
| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容 | string | - |
|
|
60
|
+
| resettable <sup>1.23.3+</sup> | 关闭弹出框后,是否可复位弹出框值 | boolean | false |
|
|
61
|
+
| icon-position <sup>1.24.1+</sup> | 可定义复选框的位置 | 'left' \| 'right' | 'left' |
|
|
61
62
|
|
|
62
63
|
### CheckboxPopoutEmits
|
|
63
64
|
|
|
@@ -8,6 +8,7 @@ declare const __VLS_component: import("vue").DefineComponent<CheckboxPopoutProps
|
|
|
8
8
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
9
9
|
}>, {
|
|
10
10
|
options: import("../checkbox/common").CheckboxGroupOption[];
|
|
11
|
+
iconPosition: "left" | "right";
|
|
11
12
|
validateEvent: boolean;
|
|
12
13
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
14
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
@@ -61,7 +61,15 @@
|
|
|
61
61
|
:hover="!option.disabled"
|
|
62
62
|
@click="select(option, toggle)"
|
|
63
63
|
>
|
|
64
|
-
<template #icon>
|
|
64
|
+
<template v-if="iconPosition === 'left'" #icon>
|
|
65
|
+
<sar-checkbox
|
|
66
|
+
readonly
|
|
67
|
+
:disabled="option.disabled"
|
|
68
|
+
:value="option.value"
|
|
69
|
+
:validate-event="false"
|
|
70
|
+
/>
|
|
71
|
+
</template>
|
|
72
|
+
<template v-if="iconPosition === 'right'" #value>
|
|
65
73
|
<sar-checkbox
|
|
66
74
|
readonly
|
|
67
75
|
:disabled="option.disabled"
|
|
@@ -116,6 +124,7 @@ import { defaultOptionKeys } from "../checkbox/common";
|
|
|
116
124
|
* @property {boolean} searchable 是否可搜索,默认值:false。
|
|
117
125
|
* @property {string} filterPlaceholder 搜索输入框占位符内容,默认值:-。
|
|
118
126
|
* @property {boolean} resettable 关闭弹出框后,是否可复位弹出框值,默认值:false。
|
|
127
|
+
* @property {'left' | 'right'} iconPosition 可定义复选框的位置,默认值:'left'。
|
|
119
128
|
* @event {(visible: boolean) => void} update 弹出框显隐时触发
|
|
120
129
|
* @event {(value: any[] | undefined) => void} change 复选输入组件值改变时触发
|
|
121
130
|
* @event {() => void} confirm 点击确定按钮时触发
|
|
@@ -155,6 +164,7 @@ export default _defineComponent({
|
|
|
155
164
|
searchable: { type: Boolean, required: false },
|
|
156
165
|
filterPlaceholder: { type: String, required: false },
|
|
157
166
|
resettable: { type: Boolean, required: false },
|
|
167
|
+
iconPosition: { type: String, required: false },
|
|
158
168
|
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
159
169
|
rootClass: { type: String, required: false },
|
|
160
170
|
modelValue: { type: Array, required: false },
|
|
@@ -10,10 +10,12 @@ export interface CheckboxPopoutProps extends CheckboxGroupProps {
|
|
|
10
10
|
searchable?: boolean;
|
|
11
11
|
filterPlaceholder?: string;
|
|
12
12
|
resettable?: boolean;
|
|
13
|
+
iconPosition?: 'left' | 'right';
|
|
13
14
|
}
|
|
14
15
|
export declare const defaultCheckboxPopoutProps: () => {
|
|
15
16
|
options: () => never[];
|
|
16
17
|
validateEvent: boolean;
|
|
18
|
+
iconPosition: CheckboxPopoutProps["iconPosition"];
|
|
17
19
|
};
|
|
18
20
|
export interface CheckboxPopoutSlots {
|
|
19
21
|
default?(props: Record<string, never>): any;
|
|
@@ -5,6 +5,7 @@ import { type CalendarInputProps } from '../calendar-input';
|
|
|
5
5
|
import { type CalendarProps } from '../calendar';
|
|
6
6
|
import { type CascaderInputProps } from '../cascader-input';
|
|
7
7
|
import { type CheckboxGroupProps } from '../checkbox';
|
|
8
|
+
import { type CheckboxPopoutProps } from '../checkbox-popout';
|
|
8
9
|
import { type CheckboxInputProps } from '../checkbox-input';
|
|
9
10
|
import { type CoolIconProps } from '../cool-icon';
|
|
10
11
|
import { type DatetimePickerInputProps } from '../datetime-picker-input';
|
|
@@ -127,6 +128,7 @@ export declare const defaultConfig: {
|
|
|
127
128
|
};
|
|
128
129
|
checkboxPopout: {
|
|
129
130
|
validateEvent: boolean;
|
|
131
|
+
iconPosition: CheckboxPopoutProps["iconPosition"];
|
|
130
132
|
};
|
|
131
133
|
coolIcon: {
|
|
132
134
|
shape: CoolIconProps["shape"];
|
|
@@ -218,6 +220,7 @@ export declare const defaultConfig: {
|
|
|
218
220
|
labelAlign: FormProps["labelAlign"];
|
|
219
221
|
labelValign: FormProps["labelValign"];
|
|
220
222
|
starPosition: FormProps["starPosition"];
|
|
223
|
+
contentPosition: FormProps["contentPosition"];
|
|
221
224
|
showError: boolean;
|
|
222
225
|
scrollDuration: number;
|
|
223
226
|
};
|
|
@@ -368,6 +371,7 @@ export declare const defaultConfig: {
|
|
|
368
371
|
radioPopout: {
|
|
369
372
|
validateEvent: boolean;
|
|
370
373
|
type: RadioPopoutProps["type"];
|
|
374
|
+
iconPosition: RadioPopoutProps["iconPosition"];
|
|
371
375
|
};
|
|
372
376
|
rate: {
|
|
373
377
|
count: number;
|
|
@@ -78,6 +78,7 @@ export const defaultConfig = {
|
|
|
78
78
|
},
|
|
79
79
|
checkboxPopout: {
|
|
80
80
|
validateEvent: true,
|
|
81
|
+
iconPosition: 'left',
|
|
81
82
|
},
|
|
82
83
|
coolIcon: {
|
|
83
84
|
shape: 'oval',
|
|
@@ -169,6 +170,7 @@ export const defaultConfig = {
|
|
|
169
170
|
labelAlign: 'start',
|
|
170
171
|
labelValign: 'center',
|
|
171
172
|
starPosition: 'left',
|
|
173
|
+
contentPosition: 'left',
|
|
172
174
|
showError: true,
|
|
173
175
|
scrollDuration: 150,
|
|
174
176
|
},
|
|
@@ -319,6 +321,7 @@ export const defaultConfig = {
|
|
|
319
321
|
radioPopout: {
|
|
320
322
|
validateEvent: true,
|
|
321
323
|
type: 'circle',
|
|
324
|
+
iconPosition: 'left',
|
|
322
325
|
},
|
|
323
326
|
rate: {
|
|
324
327
|
count: 5,
|
|
@@ -176,25 +176,26 @@ import FormItemPlain from 'sard-uniapp/components/form-item-plain/form-item-plai
|
|
|
176
176
|
|
|
177
177
|
### FormProps
|
|
178
178
|
|
|
179
|
-
| 属性
|
|
180
|
-
|
|
|
181
|
-
| root-class
|
|
182
|
-
| root-style
|
|
183
|
-
| model
|
|
184
|
-
| rules
|
|
185
|
-
| validate-trigger
|
|
186
|
-
| validate-on-rule-change
|
|
187
|
-
| direction
|
|
188
|
-
| label-width
|
|
189
|
-
| label-align
|
|
190
|
-
| label-valign
|
|
191
|
-
| star-position
|
|
192
|
-
| hide-star
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
| scroll-
|
|
196
|
-
|
|
|
197
|
-
|
|
|
179
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
180
|
+
| ----------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
|
|
181
|
+
| root-class | 组件根元素类名 | string | - |
|
|
182
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
183
|
+
| model | 表单数据对象 | Record\<string, any> | - |
|
|
184
|
+
| rules | 表单验证规则 | FormRules | - |
|
|
185
|
+
| validate-trigger | 设置字段校验的时机 | TriggerType | change |
|
|
186
|
+
| validate-on-rule-change | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | true |
|
|
187
|
+
| direction | 表单排列方向 | 'horizontal' \| 'vertical' | 'horizontal' |
|
|
188
|
+
| label-width | 标签宽度 | string | - |
|
|
189
|
+
| label-align | 标签水平对齐方式 | 'start' \| 'center' \| 'end' | 'start' |
|
|
190
|
+
| label-valign | 标签垂直对齐方式 | 'start' \| 'center' \| 'end' | 'start' |
|
|
191
|
+
| star-position | 必填星号在标签的左边或右边 | 'left' \| 'right' | 'left' |
|
|
192
|
+
| hide-star | 是否隐藏必填时的星号 | boolean | false |
|
|
193
|
+
| content-position <sup>1.24.1+</sup> | 内容位置 | 'left' \| 'right' | 'left' |
|
|
194
|
+
| show-error | 是否显示校验错误信息 | boolean | true |
|
|
195
|
+
| scroll-to-first-error | 当校验失败时,滚动到第一个错误表单项 | boolean | false |
|
|
196
|
+
| scroll-into-view-options | 自定义滚动配置选项 | [ScrollIntoViewOptions](../utilities/geometry#ScrollIntoViewOptions) | {position: 'nearest', startOffset: 0, endOffset: 0} |
|
|
197
|
+
| disabled | 是否禁用该表单内的所有组件。 如果设置为 `true`, 它将覆盖内部组件的 `disabled` 属性 | boolean | false |
|
|
198
|
+
| readonly | 是否只读该表单内的所有组件。 如果设置为 `true`, 它将覆盖内部组件的 `readonly` 属性 | boolean | false |
|
|
198
199
|
|
|
199
200
|
### FormSlots
|
|
200
201
|
|
|
@@ -213,23 +214,24 @@ import FormItemPlain from 'sard-uniapp/components/form-item-plain/form-item-plai
|
|
|
213
214
|
|
|
214
215
|
### FormItemProps
|
|
215
216
|
|
|
216
|
-
| 属性
|
|
217
|
-
|
|
|
218
|
-
| root-class
|
|
219
|
-
| root-style
|
|
220
|
-
| direction
|
|
221
|
-
| label-width
|
|
222
|
-
| label-align
|
|
223
|
-
| label-valign
|
|
224
|
-
| star-position
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
|
229
|
-
|
|
|
230
|
-
|
|
|
231
|
-
|
|
|
232
|
-
|
|
|
217
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
218
|
+
| ----------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
|
|
219
|
+
| root-class | 组件根元素类名 | string | - |
|
|
220
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
221
|
+
| direction | 表单排列方向 | 'horizontal' \| 'vertical' | 'horizontal' |
|
|
222
|
+
| label-width | 标签宽度 | string | - |
|
|
223
|
+
| label-align | 标签水平对齐方式 | 'start' \| 'center' \| 'end' | 'start' |
|
|
224
|
+
| label-valign | 标签垂直对齐方式 | 'start' \| 'center' \| 'end' | 'start' |
|
|
225
|
+
| star-position | 必填星号在标签的左边或右边 | 'left' \| 'right' | 'left' |
|
|
226
|
+
| content-position <sup>1.24.1+</sup> | 内容位置 | 'left' \| 'right' | 'left' |
|
|
227
|
+
| label | 标签文本 | string | - |
|
|
228
|
+
| required | 是否为必填项,如不设置,则会根据校验规则确认 | boolean | - |
|
|
229
|
+
| name | 表单域 `model` 字段,在使用 `validate、reset` 方法的情况下,该属性是必填的。 | FieldName | - |
|
|
230
|
+
| rules | 表单验证规则 | Rule \| Rule[] | - |
|
|
231
|
+
| validate-trigger | 设置字段校验的时机 | TriggerType | change |
|
|
232
|
+
| error | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 `error`,并显示该错误信息。 | string | - |
|
|
233
|
+
| show-error | 是否显示校验错误信息 | boolean | true |
|
|
234
|
+
| inlaid | 去掉边框和内边距,用于嵌入到其他组件中 | boolean | false |
|
|
233
235
|
|
|
234
236
|
### FormItemSlots
|
|
235
237
|
|
|
@@ -25,6 +25,7 @@ export interface FormProps {
|
|
|
25
25
|
labelAlign?: 'start' | 'center' | 'end';
|
|
26
26
|
labelValign?: 'start' | 'center' | 'end';
|
|
27
27
|
starPosition?: 'left' | 'right';
|
|
28
|
+
contentPosition?: 'left' | 'right';
|
|
28
29
|
hideStar?: boolean;
|
|
29
30
|
showError?: boolean;
|
|
30
31
|
scrollToFirstError?: boolean;
|
|
@@ -54,6 +55,7 @@ export interface FormItemProps {
|
|
|
54
55
|
starPosition?: 'left' | 'right';
|
|
55
56
|
label?: string;
|
|
56
57
|
hideStar?: boolean;
|
|
58
|
+
contentPosition?: 'left' | 'right';
|
|
57
59
|
required?: boolean | undefined;
|
|
58
60
|
name?: FieldName;
|
|
59
61
|
rules?: Rule | Rule[];
|
|
@@ -94,6 +96,7 @@ export interface FormContext {
|
|
|
94
96
|
labelAlign: FormProps['labelAlign'];
|
|
95
97
|
labelValign: FormProps['labelValign'];
|
|
96
98
|
starPosition: FormProps['starPosition'];
|
|
99
|
+
contentPosition: FormProps['contentPosition'];
|
|
97
100
|
hideStar: FormProps['hideStar'];
|
|
98
101
|
showError: FormProps['showError'];
|
|
99
102
|
scrollIntoViewOptions: FormProps['scrollIntoViewOptions'];
|
|
@@ -10,6 +10,7 @@ declare const __VLS_component: import("vue").DefineComponent<FormProps, {
|
|
|
10
10
|
labelAlign: "start" | "center" | "end";
|
|
11
11
|
labelValign: "start" | "center" | "end";
|
|
12
12
|
starPosition: "left" | "right";
|
|
13
|
+
contentPosition: "left" | "right";
|
|
13
14
|
validateOnRuleChange: boolean;
|
|
14
15
|
showError: boolean;
|
|
15
16
|
scrollDuration: number;
|
package/components/form/form.vue
CHANGED
|
@@ -25,6 +25,7 @@ import { useForm } from "./useForm";
|
|
|
25
25
|
* @property {'start' | 'center' | 'end'} labelValign 标签垂直对齐方式,默认值:'start'。
|
|
26
26
|
* @property {'left' | 'right'} starPosition 必填星号在标签的左边或右边,默认值:'left'。
|
|
27
27
|
* @property {boolean} hideStar 是否隐藏必填时的星号,默认值:false。
|
|
28
|
+
* @property {'left' | 'right'} contentPosition 内容位置,默认值:'left'。
|
|
28
29
|
* @property {boolean} showError 是否显示校验错误信息,默认值:true。
|
|
29
30
|
* @property {boolean} scrollToFirstError 当校验失败时,滚动到第一个错误表单项,默认值:false。
|
|
30
31
|
* @property {[ScrollIntoViewOptions](../utilities/geometry#ScrollIntoViewOptions)} scrollIntoViewOptions 自定义滚动配置选项,默认值:{position: 'nearest', startOffset: 0, endOffset: 0}。
|
|
@@ -51,6 +52,7 @@ export default _defineComponent({
|
|
|
51
52
|
labelAlign: { type: String, required: false },
|
|
52
53
|
labelValign: { type: String, required: false },
|
|
53
54
|
starPosition: { type: String, required: false },
|
|
55
|
+
contentPosition: { type: String, required: false },
|
|
54
56
|
hideStar: { type: Boolean, required: false },
|
|
55
57
|
showError: { type: Boolean, required: false },
|
|
56
58
|
scrollToFirstError: { type: Boolean, required: false },
|
|
@@ -75,6 +75,7 @@ export function useForm(props) {
|
|
|
75
75
|
labelAlign: toRef(() => props.labelAlign),
|
|
76
76
|
labelValign: toRef(() => props.labelValign),
|
|
77
77
|
starPosition: toRef(() => props.starPosition),
|
|
78
|
+
contentPosition: toRef(() => props.contentPosition),
|
|
78
79
|
hideStar: toRef(() => props.hideStar),
|
|
79
80
|
showError: toRef(() => props.showError),
|
|
80
81
|
scrollIntoViewOptions: toRef(() => props.scrollIntoViewOptions),
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<view v-if="shouldShowStar" :class="bem.e('star')">*</view>
|
|
9
9
|
<slot name="label">{{ label }}</slot>
|
|
10
10
|
</view>
|
|
11
|
-
<view :class="
|
|
11
|
+
<view :class="contentClass">
|
|
12
12
|
<slot></slot>
|
|
13
13
|
<slot name="validate" :state="validateState"></slot>
|
|
14
14
|
<slot
|
|
@@ -40,6 +40,7 @@ import { useFormItem } from "./useFormItem";
|
|
|
40
40
|
* @property {'start' | 'center' | 'end'} labelAlign 标签水平对齐方式,默认值:'start'。
|
|
41
41
|
* @property {'start' | 'center' | 'end'} labelValign 标签垂直对齐方式,默认值:'start'。
|
|
42
42
|
* @property {'left' | 'right'} starPosition 必填星号在标签的左边或右边,默认值:'left'。
|
|
43
|
+
* @property {'left' | 'right'} contentPosition 内容位置,默认值:'left'。
|
|
43
44
|
* @property {string} label 标签文本,默认值:-。
|
|
44
45
|
* @property {boolean} required 是否为必填项,如不设置,则会根据校验规则确认,默认值:-。
|
|
45
46
|
* @property {FieldName} name 表单域 `model` 字段,在使用 `validate、reset` 方法的情况下,该属性是必填的。,默认值:-。
|
|
@@ -67,6 +68,7 @@ export default _defineComponent({
|
|
|
67
68
|
starPosition: { type: String, required: false },
|
|
68
69
|
label: { type: String, required: false },
|
|
69
70
|
hideStar: { type: Boolean, required: false },
|
|
71
|
+
contentPosition: { type: String, required: false },
|
|
70
72
|
required: { type: Boolean, required: false, skipCheck: true },
|
|
71
73
|
name: { type: [String, Number, Array], required: false },
|
|
72
74
|
rules: { type: [Object, Array], required: false },
|
|
@@ -89,7 +91,8 @@ export default _defineComponent({
|
|
|
89
91
|
labelAlign,
|
|
90
92
|
labelValign,
|
|
91
93
|
starPosition,
|
|
92
|
-
labelWidth
|
|
94
|
+
labelWidth,
|
|
95
|
+
contentPosition
|
|
93
96
|
} = useFormItem(props);
|
|
94
97
|
__expose(expose);
|
|
95
98
|
const formItemClass = computed(() => {
|
|
@@ -112,7 +115,13 @@ export default _defineComponent({
|
|
|
112
115
|
width: direction.value === "horizontal" && labelWidth.value
|
|
113
116
|
});
|
|
114
117
|
});
|
|
115
|
-
const
|
|
118
|
+
const contentClass = computed(() => {
|
|
119
|
+
return classNames(
|
|
120
|
+
bem.e("content"),
|
|
121
|
+
bem.em("content", "right", contentPosition.value === "right")
|
|
122
|
+
);
|
|
123
|
+
});
|
|
124
|
+
const __returned__ = { props, bem, expose, fieldId, validateState, shouldShowStar, validateMessage, shouldShowError, direction, labelAlign, labelValign, starPosition, labelWidth, contentPosition, formItemClass, formItemStyle, labelStyle, contentClass, get isNullish() {
|
|
116
125
|
return isNullish;
|
|
117
126
|
} };
|
|
118
127
|
return __returned__;
|
|
@@ -18,4 +18,5 @@ export declare function useFormItem(props: FormItemProps): {
|
|
|
18
18
|
labelValign: import("vue").ComputedRef<"start" | "center" | "end" | undefined>;
|
|
19
19
|
starPosition: import("vue").ComputedRef<"left" | "right" | undefined>;
|
|
20
20
|
labelWidth: import("vue").ComputedRef<string | undefined>;
|
|
21
|
+
contentPosition: import("vue").ComputedRef<"left" | "right" | undefined>;
|
|
21
22
|
};
|
|
@@ -181,6 +181,7 @@ export function useFormItem(props) {
|
|
|
181
181
|
const labelValign = computed(() => props.labelValign || formContext.labelValign);
|
|
182
182
|
const starPosition = computed(() => props.starPosition || formContext.starPosition);
|
|
183
183
|
const labelWidth = computed(() => props.labelWidth || formContext.labelWidth);
|
|
184
|
+
const contentPosition = computed(() => props.contentPosition ?? formContext.contentPosition);
|
|
184
185
|
provide(formItemContextSymbol, context);
|
|
185
186
|
const expose = {
|
|
186
187
|
validate,
|
|
@@ -202,5 +203,6 @@ export function useFormItem(props) {
|
|
|
202
203
|
labelValign,
|
|
203
204
|
starPosition,
|
|
204
205
|
labelWidth,
|
|
206
|
+
contentPosition,
|
|
205
207
|
};
|
|
206
208
|
}
|
|
@@ -29,6 +29,7 @@ import { defaultFormItemProps } from "../form/common";
|
|
|
29
29
|
* @property {'start' | 'center' | 'end'} labelAlign 标签水平对齐方式,默认值:'start'。
|
|
30
30
|
* @property {'start' | 'center' | 'end'} labelValign 标签垂直对齐方式,默认值:'start'。
|
|
31
31
|
* @property {'left' | 'right'} starPosition 必填星号在标签的左边或右边,默认值:'left'。
|
|
32
|
+
* @property {'left' | 'right'} contentPosition 内容位置,默认值:'left'。
|
|
32
33
|
* @property {string} label 标签文本,默认值:-。
|
|
33
34
|
* @property {boolean} required 是否为必填项,如不设置,则会根据校验规则确认,默认值:-。
|
|
34
35
|
* @property {FieldName} name 表单域 `model` 字段,在使用 `validate、reset` 方法的情况下,该属性是必填的。,默认值:-。
|
|
@@ -56,6 +57,7 @@ export default _defineComponent({
|
|
|
56
57
|
starPosition: { type: String, required: false },
|
|
57
58
|
label: { type: String, required: false },
|
|
58
59
|
hideStar: { type: Boolean, required: false },
|
|
60
|
+
contentPosition: { type: String, required: false },
|
|
59
61
|
required: { type: Boolean, required: false, skipCheck: true },
|
|
60
62
|
name: { type: [String, Number, Array], required: false },
|
|
61
63
|
rules: { type: [Object, Array], required: false },
|
|
@@ -10,6 +10,7 @@ declare const __VLS_component: import("vue").DefineComponent<FormPlainProps, {
|
|
|
10
10
|
labelAlign: "start" | "center" | "end";
|
|
11
11
|
labelValign: "start" | "center" | "end";
|
|
12
12
|
starPosition: "left" | "right";
|
|
13
|
+
contentPosition: "left" | "right";
|
|
13
14
|
validateOnRuleChange: boolean;
|
|
14
15
|
showError: boolean;
|
|
15
16
|
scrollDuration: number;
|
|
@@ -21,6 +21,7 @@ import { defaultFormProps } from "../form/common";
|
|
|
21
21
|
* @property {'start' | 'center' | 'end'} labelValign 标签垂直对齐方式,默认值:'start'。
|
|
22
22
|
* @property {'left' | 'right'} starPosition 必填星号在标签的左边或右边,默认值:'left'。
|
|
23
23
|
* @property {boolean} hideStar 是否隐藏必填时的星号,默认值:false。
|
|
24
|
+
* @property {'left' | 'right'} contentPosition 内容位置,默认值:'left'。
|
|
24
25
|
* @property {boolean} showError 是否显示校验错误信息,默认值:true。
|
|
25
26
|
* @property {boolean} scrollToFirstError 当校验失败时,滚动到第一个错误表单项,默认值:false。
|
|
26
27
|
* @property {[ScrollIntoViewOptions](../utilities/geometry#ScrollIntoViewOptions)} scrollIntoViewOptions 自定义滚动配置选项,默认值:{position: 'nearest', startOffset: 0, endOffset: 0}。
|
|
@@ -47,6 +48,7 @@ export default _defineComponent({
|
|
|
47
48
|
labelAlign: { type: String, required: false },
|
|
48
49
|
labelValign: { type: String, required: false },
|
|
49
50
|
starPosition: { type: String, required: false },
|
|
51
|
+
contentPosition: { type: String, required: false },
|
|
50
52
|
hideStar: { type: Boolean, required: false },
|
|
51
53
|
showError: { type: Boolean, required: false },
|
|
52
54
|
scrollToFirstError: { type: Boolean, required: false },
|