sard-uniapp 1.24.0 → 1.24.2
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 +29 -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 +10 -0
- package/components/config/index.js +8 -0
- package/components/count-down/README.md +8 -6
- package/components/count-down/common.d.ts +3 -0
- package/components/count-down/count-down.vue +20 -4
- package/components/count-down/index.scss +10 -0
- package/components/fab/README.md +27 -20
- package/components/fab/common.d.ts +17 -0
- package/components/fab/fab.d.ts +12 -0
- package/components/fab/fab.vue +80 -26
- package/components/fab/index.scss +35 -5
- package/components/floating-bubble/README.md +10 -9
- package/components/floating-bubble/common.d.ts +2 -0
- package/components/floating-bubble/floating-bubble.d.ts +1 -0
- package/components/floating-bubble/floating-bubble.vue +18 -127
- package/components/floating-bubble/useFloatingBubble.d.ts +43 -0
- package/components/floating-bubble/useFloatingBubble.js +137 -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/README.md +8 -8
- package/components/popout/common.d.ts +13 -2
- package/components/popout/popout.vue +75 -45
- 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/tag/tag.vue +5 -1
- 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
|
@@ -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 },
|
|
@@ -95,53 +95,54 @@ import Input from 'sard-uniapp/components/input/input.vue'
|
|
|
95
95
|
|
|
96
96
|
### InputProps
|
|
97
97
|
|
|
98
|
-
| 属性
|
|
99
|
-
|
|
|
100
|
-
| root-class
|
|
101
|
-
| root-style
|
|
102
|
-
| model-value (v-model)
|
|
103
|
-
| clearable
|
|
104
|
-
| show-clear-only-focus
|
|
105
|
-
| show-count
|
|
106
|
-
| inlaid
|
|
107
|
-
| borderless
|
|
108
|
-
| readonly
|
|
109
|
-
| focused
|
|
110
|
-
| min-height
|
|
111
|
-
| placeholder
|
|
112
|
-
| placeholder-style
|
|
113
|
-
| placeholder-class
|
|
114
|
-
| disabled
|
|
115
|
-
| maxlength
|
|
116
|
-
| focus
|
|
117
|
-
| cursor-spacing
|
|
118
|
-
| cursor
|
|
119
|
-
| confirm-type
|
|
120
|
-
| confirm-hold
|
|
121
|
-
| selection-start
|
|
122
|
-
| selection-end
|
|
123
|
-
| adjust-position
|
|
124
|
-
| hold-keyboard
|
|
125
|
-
| auto-blur
|
|
126
|
-
| ignore-composition-event
|
|
127
|
-
| inputmode
|
|
128
|
-
| auto-height
|
|
129
|
-
| fixed
|
|
130
|
-
| show-confirm-bar
|
|
131
|
-
| disable-default-padding
|
|
132
|
-
| type
|
|
133
|
-
| always-embed
|
|
134
|
-
| safe-password-cert-path
|
|
135
|
-
| safe-password-length
|
|
136
|
-
| safe-password-time-stamp
|
|
137
|
-
| safe-password-nonce
|
|
138
|
-
| safe-password-salt
|
|
139
|
-
| safe-password-custom-hash
|
|
140
|
-
| random-number
|
|
141
|
-
| controlled
|
|
142
|
-
| always-system
|
|
143
|
-
| validate-event
|
|
144
|
-
| show-eye <sup>1.21.2+</sup>
|
|
98
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
99
|
+
| ------------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------ |
|
|
100
|
+
| root-class | 组件根元素类名 | string | - |
|
|
101
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
102
|
+
| model-value (v-model) | 输入框值 | string \| number | - |
|
|
103
|
+
| clearable | 是否显示清空按钮 | boolean | false |
|
|
104
|
+
| show-clear-only-focus | 是否只在聚焦时显示清空按钮 | boolean | false |
|
|
105
|
+
| show-count | 是否展示字数 | boolean | false |
|
|
106
|
+
| inlaid | 嵌入式状态 | boolean | false |
|
|
107
|
+
| borderless | 是否隐藏边框 | boolean | false |
|
|
108
|
+
| readonly | 只读状态 | boolean | false |
|
|
109
|
+
| focused | 是否显示获焦样式，用于结合自定义键盘使用时显示高亮效果 | boolean | false |
|
|
110
|
+
| min-height | 输入框最小高度 | string | - |
|
|
111
|
+
| placeholder | 输入框占位符内容 | string | - |
|
|
112
|
+
| placeholder-style | 输入框占位符样式 | string | - |
|
|
113
|
+
| placeholder-class | 输入框占位符类名 | string | - |
|
|
114
|
+
| disabled | 禁用状态 | boolean | false |
|
|
115
|
+
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | number | 140 |
|
|
116
|
+
| focus | 获取焦点 | boolean | - |
|
|
117
|
+
| cursor-spacing | 指定光标与键盘的距离 | number | 30 |
|
|
118
|
+
| cursor | 指定 focus 时的光标位置 | number | -1 |
|
|
119
|
+
| confirm-type | 设置键盘右下角按钮的文字 | "send" \| "search" \| "next" \| "go" \| "done" | 'done' |
|
|
120
|
+
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起 | boolean | false |
|
|
121
|
+
| selection-start | 光标起始位置 | number | -1 |
|
|
122
|
+
| selection-end | 光标结束位置 | number | -1 |
|
|
123
|
+
| adjust-position | 键盘弹起时，是否自动上推页面 | boolean | true |
|
|
124
|
+
| hold-keyboard | focus 时，点击页面的时候不收起键盘 | boolean | false |
|
|
125
|
+
| auto-blur | 键盘收起时，是否自动失去焦点 | boolean | false |
|
|
126
|
+
| ignore-composition-event | 是否忽略组件内对文本合成系统事件的处理 | boolean | true |
|
|
127
|
+
| inputmode | 用户在编辑元素或其内容时可能输入的数据类型的提示 | 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' | 'text' |
|
|
128
|
+
| auto-height | 文本域自动高度 | boolean | false |
|
|
129
|
+
| fixed | 如果 `textarea` 是在一个 `position:fixed` 的区域，需要显示指定属性 `fixed` 为 `true` | boolean | false |
|
|
130
|
+
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏 | boolean | true |
|
|
131
|
+
| disable-default-padding | 是否去掉 iOS 下的默认内边距 | boolean | false |
|
|
132
|
+
| type | 输入框类型 | 'text' \| 'password' \| 'textarea' \| 'number' \|'idcard' \| 'digit' \| 'tel' \| 'safe-password' \| 'nickname' | 'text' |
|
|
133
|
+
| always-embed | 强制 input 处于同层状态 | boolean | - |
|
|
134
|
+
| safe-password-cert-path | 安全键盘加密公钥的路径，只支持包内路径 | string | - |
|
|
135
|
+
| safe-password-length | 安全键盘输入密码长度 | number | - |
|
|
136
|
+
| safe-password-time-stamp | 安全键盘加密时间戳 | number | - |
|
|
137
|
+
| safe-password-nonce | 安全键盘加密盐值 | string | - |
|
|
138
|
+
| safe-password-salt | 安全键盘计算 `hash` 盐值，若指定 `custom-hash` 则无效 | string | - |
|
|
139
|
+
| safe-password-custom-hash | 安全键盘计算 `hash` 的算法表达式 | string | - |
|
|
140
|
+
| random-number | 当 `type` 为 `number, digit, idcard` 数字键盘是否随机排列 | boolean | false |
|
|
141
|
+
| controlled | 是否为受控组件。为 `true` 时，value 内容会完全受 `setData` 控制 | boolean | false |
|
|
142
|
+
| always-system | 是否强制使用系统键盘和 `Web-view `创建的 `input` 元素 | boolean | false |
|
|
143
|
+
| validate-event | 是否触发表单验证 | boolean | true |
|
|
144
|
+
| show-eye <sup>1.21.2+</sup> | `type` 为 `password` 时，是否显示眼睛图标按钮 | boolean | false |
|
|
145
|
+
| enableNative <sup>1.23.5+</sup> | (支付宝小程序)是否启用原生input元素 | boolean | false |
|
|
145
146
|
|
|
146
147
|
### InputSlots
|
|
147
148
|
|
|
@@ -217,6 +217,7 @@ import {
|
|
|
217
217
|
* @property {boolean} alwaysSystem 是否强制使用系统键盘和 `Web-view `创建的 `input` 元素，默认值：false。
|
|
218
218
|
* @property {boolean} validateEvent 是否触发表单验证，默认值：true。
|
|
219
219
|
* @property {boolean} showEye `type` 为 `password` 时，是否显示眼睛图标按钮，默认值：false。
|
|
220
|
+
* @property {boolean} enableNative (支付宝小程序)是否启用原生input元素，默认值：false。
|
|
220
221
|
* @event {(value: string) => void} update 输入框值改变时触发
|
|
221
222
|
* @event {(value: string) => void} input 输入框值改变时触发
|
|
222
223
|
* @event {(value: string) => void} change 键盘非聚焦状态且内容改变时触发
|
|
@@ -51,20 +51,21 @@ import Keyboard from 'sard-uniapp/components/keyboard/keyboard.vue'
|
|
|
51
51
|
|
|
52
52
|
### KeyboardProps
|
|
53
53
|
|
|
54
|
-
| 属性
|
|
55
|
-
|
|
|
56
|
-
| root-class
|
|
57
|
-
| root-style
|
|
58
|
-
| type
|
|
59
|
-
| mode<sup>1.24+</sup> | plate
|
|
54
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
55
|
+
| --------------------------------- | ------------------- | ------------------------------------------------------ | --------- |
|
|
56
|
+
| root-class | 组件根元素类名 | string | - |
|
|
57
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
58
|
+
| type | 键盘类型 | 'number' \| 'digit' \| 'idcard' \| 'random' \| 'plate' | 'number' |
|
|
59
|
+
| mode (v-model) <sup>1.24.1+</sup> | 'plate'键盘时的模式 | 'chinese' \| 'english' | 'chinese' |
|
|
60
60
|
|
|
61
61
|
### KeyboardEmits
|
|
62
62
|
|
|
63
|
-
| 事件
|
|
64
|
-
|
|
|
65
|
-
| input
|
|
66
|
-
| delete
|
|
67
|
-
| toggle<sup>1.23.3+</sup>
|
|
63
|
+
| 事件 | 描述 | 类型 |
|
|
64
|
+
| ------------------------------ | ------------------------ | -------------------------------------- |
|
|
65
|
+
| input | 可输入按键点击时触发 | (key: string) => void |
|
|
66
|
+
| delete | 点击删除按钮时触发 | () => void |
|
|
67
|
+
| toggle <sup>1.23.3+</sup> | 切换车牌号的中英文时触发 | (mode: 'chinese' \| 'english') => void |
|
|
68
|
+
| update:mode <sup>1.24.1+</sup> | 切换车牌号的中英文时触发 | (mode: 'chinese' \| 'english') => void |
|
|
68
69
|
|
|
69
70
|
### KeyBoardExpose
|
|
70
71
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { KeyboardProps, KeyboardSlots, KeyboardEmits, KeyBoardExpose, } from './common';
|
|
1
|
+
export type { KeyboardProps, KeyboardSlots, KeyboardEmits, KeyBoardExpose, KeyboardPlateMode, } from './common';
|
|
@@ -7,10 +7,12 @@ declare const __VLS_component: import("vue").DefineComponent<KeyboardProps, {
|
|
|
7
7
|
delete: () => any;
|
|
8
8
|
input: (key: string) => any;
|
|
9
9
|
toggle: (mode: KeyboardPlateMode) => any;
|
|
10
|
+
"update:mode": (mode: KeyboardPlateMode) => any;
|
|
10
11
|
}, string, import("vue").PublicProps, Readonly<KeyboardProps> & Readonly<{
|
|
11
12
|
onDelete?: (() => any) | undefined;
|
|
12
13
|
onInput?: ((key: string) => any) | undefined;
|
|
13
14
|
onToggle?: ((mode: KeyboardPlateMode) => any) | undefined;
|
|
15
|
+
"onUpdate:mode"?: ((mode: KeyboardPlateMode) => any) | undefined;
|
|
14
16
|
}>, {
|
|
15
17
|
type: "number" | "digit" | "idcard" | "random" | "plate";
|
|
16
18
|
mode: KeyboardPlateMode;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
</view>
|
|
51
51
|
</template>
|
|
52
52
|
<template v-else-if="type === 'plate'">
|
|
53
|
-
<template v-if="
|
|
53
|
+
<template v-if="innerMode === 'chinese'">
|
|
54
54
|
<view
|
|
55
55
|
v-for="(key, i) in chineseKeys"
|
|
56
56
|
:key="key"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
:style="`order: ${interceptOrder}`"
|
|
70
70
|
></view>
|
|
71
71
|
</template>
|
|
72
|
-
<template v-if="
|
|
72
|
+
<template v-if="innerMode === 'english'">
|
|
73
73
|
<view
|
|
74
74
|
v-for="(key, i) in englishKeys"
|
|
75
75
|
:key="key"
|
|
@@ -121,10 +121,11 @@ import SarIcon from "../icon/icon.vue";
|
|
|
121
121
|
* @property {string} rootClass 组件根元素类名，默认值：-。
|
|
122
122
|
* @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
|
|
123
123
|
* @property {'number' | 'digit' | 'idcard' | 'random' | 'plate'} type 键盘类型，默认值：'number'。
|
|
124
|
-
* @property {'chinese' | 'english'} mode plate
|
|
124
|
+
* @property {'chinese' | 'english'} mode 'plate'键盘时的模式，默认值：'chinese'。
|
|
125
125
|
* @event {(key: string) => void} input 可输入按键点击时触发
|
|
126
126
|
* @event {() => void} delete 点击删除按钮时触发
|
|
127
127
|
* @event {(mode: 'chinese' | 'english') => void} toggle 切换车牌号的中英文时触发
|
|
128
|
+
* @event {(mode: 'chinese' | 'english') => void} update 切换车牌号的中英文时触发
|
|
128
129
|
*/
|
|
129
130
|
export default _defineComponent({
|
|
130
131
|
components: {
|
|
@@ -143,7 +144,7 @@ export default _defineComponent({
|
|
|
143
144
|
type: { type: String, required: false },
|
|
144
145
|
mode: { type: String, required: false }
|
|
145
146
|
}, defaultKeyboardProps),
|
|
146
|
-
emits: ["input", "delete", "toggle"],
|
|
147
|
+
emits: ["input", "delete", "toggle", "update:mode"],
|
|
147
148
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
148
149
|
const props = __props;
|
|
149
150
|
const emit = __emit;
|
|
@@ -158,8 +159,8 @@ export default _defineComponent({
|
|
|
158
159
|
shuffle() {
|
|
159
160
|
randomKeys.value = getRandomKeys();
|
|
160
161
|
},
|
|
161
|
-
toggle(
|
|
162
|
-
onToggle(
|
|
162
|
+
toggle(mode) {
|
|
163
|
+
onToggle(mode);
|
|
163
164
|
}
|
|
164
165
|
});
|
|
165
166
|
const randomKeys = ref([]);
|
|
@@ -174,23 +175,30 @@ export default _defineComponent({
|
|
|
174
175
|
immediate: true
|
|
175
176
|
}
|
|
176
177
|
);
|
|
177
|
-
const
|
|
178
|
+
const innerMode = ref(props.mode);
|
|
179
|
+
watch(
|
|
180
|
+
() => props.mode,
|
|
181
|
+
() => {
|
|
182
|
+
innerMode.value = props.mode;
|
|
183
|
+
}
|
|
184
|
+
);
|
|
178
185
|
const toggleKey = computed(() => {
|
|
179
186
|
return {
|
|
180
187
|
chinese: "ABC",
|
|
181
188
|
english: "\u7701\u4EFD"
|
|
182
|
-
}[
|
|
189
|
+
}[innerMode.value];
|
|
183
190
|
});
|
|
184
191
|
const interceptOrder = computed(() => {
|
|
185
|
-
if (
|
|
192
|
+
if (innerMode.value === "english") {
|
|
186
193
|
return englishKeys.length - 8;
|
|
187
194
|
}
|
|
188
195
|
const overflow = chineseKeys.length % 10;
|
|
189
196
|
return chineseKeys.length - (overflow > 7 ? 0 : overflow + 1);
|
|
190
197
|
});
|
|
191
198
|
const onToggle = (newMode) => {
|
|
192
|
-
|
|
193
|
-
emit("toggle",
|
|
199
|
+
innerMode.value = newMode || (innerMode.value === "chinese" ? "english" : "chinese");
|
|
200
|
+
emit("toggle", innerMode.value);
|
|
201
|
+
emit("update:mode", innerMode.value);
|
|
194
202
|
};
|
|
195
203
|
const keyboardClass = computed(() => {
|
|
196
204
|
return classNames(bem.b(), bem.m(props.type), props.rootClass);
|
|
@@ -204,7 +212,7 @@ export default _defineComponent({
|
|
|
204
212
|
const backspaceClass = computed(() => {
|
|
205
213
|
return classNames(bem.e("key-wrapper"), bem.em("key-wrapper", "backspace"));
|
|
206
214
|
});
|
|
207
|
-
const __returned__ = { props, emit, bem, onKeyClick, onBackspace, randomKeys,
|
|
215
|
+
const __returned__ = { props, emit, bem, onKeyClick, onBackspace, randomKeys, innerMode, toggleKey, interceptOrder, onToggle, keyboardClass, keyboardStyle, toggleClass, backspaceClass, get classNames() {
|
|
208
216
|
return classNames;
|
|
209
217
|
}, get numberKeys() {
|
|
210
218
|
return numberKeys;
|