mdui 2.0.3 → 2.0.4
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/components/avatar/index.d.ts +13 -13
- package/components/avatar/index.js +4 -4
- package/components/badge/index.d.ts +7 -6
- package/components/badge/index.js +6 -5
- package/components/bottom-app-bar/index.d.ts +4 -3
- package/components/bottom-app-bar/index.js +3 -3
- package/components/button/button-base-style.js +1 -1
- package/components/button/button-base.d.ts +43 -44
- package/components/button/button-base.js +20 -20
- package/components/button/index.d.ts +13 -13
- package/components/button/index.js +12 -12
- package/components/button-icon/index.d.ts +8 -8
- package/components/button-icon/index.js +7 -7
- package/components/card/index.d.ts +8 -8
- package/components/card/index.js +7 -7
- package/components/checkbox/index.d.ts +20 -20
- package/components/checkbox/index.js +18 -18
- package/components/chip/index.d.ts +19 -19
- package/components/chip/index.js +16 -16
- package/components/circular-progress/index.d.ts +2 -2
- package/components/circular-progress/index.js +1 -1
- package/components/collapse/collapse-item.d.ts +4 -4
- package/components/collapse/collapse-item.js +2 -2
- package/components/collapse/collapse.d.ts +6 -9
- package/components/collapse/collapse.js +4 -4
- package/components/dialog/index.d.ts +13 -13
- package/components/dialog/index.js +13 -13
- package/components/divider/index.d.ts +3 -3
- package/components/divider/index.js +3 -3
- package/components/dropdown/index.d.ts +35 -35
- package/components/dropdown/index.js +33 -33
- package/components/fab/index.d.ts +6 -6
- package/components/fab/index.js +6 -6
- package/components/layout/layout-item.d.ts +7 -7
- package/components/layout/layout-item.js +6 -6
- package/components/layout/layout-main.d.ts +2 -2
- package/components/layout/layout-main.js +2 -2
- package/components/layout/layout.d.ts +2 -2
- package/components/layout/layout.js +2 -2
- package/components/linear-progress/index.d.ts +4 -4
- package/components/linear-progress/index.js +3 -3
- package/components/list/list-item.d.ts +17 -17
- package/components/list/list-item.js +7 -7
- package/components/list/list-subheader.d.ts +2 -2
- package/components/list/list-subheader.js +2 -2
- package/components/list/list.d.ts +1 -1
- package/components/list/list.js +1 -1
- package/components/menu/menu-item.d.ts +4 -4
- package/components/menu/menu-item.js +2 -2
- package/components/menu/menu.d.ts +15 -18
- package/components/menu/menu.js +8 -8
- package/components/navigation-bar/navigation-bar-item.d.ts +5 -5
- package/components/navigation-bar/navigation-bar-item.js +4 -4
- package/components/navigation-bar/navigation-bar.d.ts +9 -8
- package/components/navigation-bar/navigation-bar.js +6 -6
- package/components/navigation-drawer/index.d.ts +19 -20
- package/components/navigation-drawer/index.js +44 -30
- package/components/navigation-rail/navigation-rail-item.d.ts +6 -6
- package/components/navigation-rail/navigation-rail-item.js +4 -4
- package/components/navigation-rail/navigation-rail.d.ts +10 -11
- package/components/navigation-rail/navigation-rail.js +9 -10
- package/components/radio/radio-group.d.ts +13 -13
- package/components/radio/radio-group.js +11 -11
- package/components/radio/radio.d.ts +3 -3
- package/components/radio/radio.js +3 -3
- package/components/range-slider/index.d.ts +4 -5
- package/components/range-slider/index.js +4 -5
- package/components/segmented-button/segmented-button-group.d.ts +17 -20
- package/components/segmented-button/segmented-button-group.js +11 -14
- package/components/segmented-button/segmented-button.d.ts +3 -3
- package/components/segmented-button/segmented-button.js +3 -3
- package/components/select/index.d.ts +31 -32
- package/components/select/index.js +19 -20
- package/components/slider/index.d.ts +1 -1
- package/components/slider/index.js +1 -1
- package/components/slider/slider-base.d.ts +15 -15
- package/components/slider/slider-base.js +13 -13
- package/components/snackbar/index.d.ts +21 -21
- package/components/snackbar/index.js +15 -15
- package/components/switch/index.d.ts +14 -14
- package/components/switch/index.js +11 -11
- package/components/tabs/tab-panel.d.ts +3 -3
- package/components/tabs/tab-panel.js +2 -2
- package/components/tabs/tab.d.ts +6 -6
- package/components/tabs/tab.js +5 -5
- package/components/tabs/tabs.d.ts +19 -19
- package/components/tabs/tabs.js +17 -17
- package/components/text-field/index.d.ts +51 -51
- package/components/text-field/index.js +25 -25
- package/components/tooltip/index.d.ts +31 -31
- package/components/tooltip/index.js +28 -28
- package/components/top-app-bar/top-app-bar-title.d.ts +4 -4
- package/components/top-app-bar/top-app-bar-title.js +4 -4
- package/components/top-app-bar/top-app-bar.d.ts +5 -5
- package/components/top-app-bar/top-app-bar.js +4 -4
- package/css-data.en.json +2826 -0
- package/css-data.zh-cn.json +374 -367
- package/custom-elements.json +1072 -1115
- package/html-data.en.json +6551 -0
- package/html-data.zh-cn.json +1420 -1435
- package/jsx.en.d.ts +3303 -0
- package/jsx.zh-cn.d.ts +3351 -0
- package/mdui.esm.js +9 -9
- package/mdui.global.js +5 -5
- package/package.json +6 -5
- package/web-types.en.json +11718 -0
- package/web-types.zh-cn.json +3222 -3232
|
@@ -4,7 +4,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
|
|
4
4
|
import type { FormControl } from '@mdui/jq/shared/form.js';
|
|
5
5
|
import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
6
6
|
/**
|
|
7
|
-
* @summary
|
|
7
|
+
* @summary 分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用
|
|
8
8
|
*
|
|
9
9
|
* ```html
|
|
10
10
|
* <mdui-segmented-button-group>
|
|
@@ -19,7 +19,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
19
19
|
*
|
|
20
20
|
* @slot - `<mdui-segmented-button>` 组件
|
|
21
21
|
*
|
|
22
|
-
* @cssprop --shape-corner -
|
|
22
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
23
23
|
*/
|
|
24
24
|
export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGroupEventMap> implements FormControl {
|
|
25
25
|
static styles: CSSResultGroup;
|
|
@@ -28,12 +28,12 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
|
|
|
28
28
|
*/
|
|
29
29
|
fullWidth: boolean;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* 分段按钮的可选中状态,默认为不可选中。可选值包括:
|
|
32
32
|
*
|
|
33
|
-
* * `single
|
|
34
|
-
* * `multiple
|
|
33
|
+
* * `single`:单选
|
|
34
|
+
* * `multiple`:多选
|
|
35
35
|
*/
|
|
36
|
-
selects?:
|
|
36
|
+
selects?: /*单选*/ 'single' | /*多选*/ 'multiple';
|
|
37
37
|
/**
|
|
38
38
|
* 是否为禁用状态
|
|
39
39
|
*/
|
|
@@ -43,9 +43,9 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
|
|
|
43
43
|
*/
|
|
44
44
|
required: boolean;
|
|
45
45
|
/**
|
|
46
|
-
* 关联的
|
|
46
|
+
* 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
|
|
47
47
|
*
|
|
48
|
-
*
|
|
48
|
+
* 如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。
|
|
49
49
|
*/
|
|
50
50
|
form?: string;
|
|
51
51
|
/**
|
|
@@ -53,12 +53,9 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
|
|
|
53
53
|
*/
|
|
54
54
|
name: string;
|
|
55
55
|
/**
|
|
56
|
-
* 当前选中的 `<mdui-segmented-button>`
|
|
56
|
+
* 当前选中的 `<mdui-segmented-button>` 的值。
|
|
57
57
|
*
|
|
58
|
-
* Note
|
|
59
|
-
* 该属性的 HTML 属性始终为字符串,且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
|
|
60
|
-
* 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串,在 `selects="multiple"` 时为字符串数组。
|
|
61
|
-
* 所以,在 `selects="multiple"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。
|
|
58
|
+
* **Note**:该属性的 HTML 属性始终为字符串,且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects="single"` 时为字符串,在 `selects="multiple"` 时为字符串数组。所以,在 `selects="multiple"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。
|
|
62
59
|
*/
|
|
63
60
|
value: string | string[];
|
|
64
61
|
/**
|
|
@@ -75,11 +72,11 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
|
|
|
75
72
|
private readonly formController;
|
|
76
73
|
private readonly definedController;
|
|
77
74
|
/**
|
|
78
|
-
*
|
|
75
|
+
* 表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
|
|
79
76
|
*/
|
|
80
77
|
get validity(): ValidityState;
|
|
81
78
|
/**
|
|
82
|
-
*
|
|
79
|
+
* 如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串
|
|
83
80
|
*/
|
|
84
81
|
get validationMessage(): string;
|
|
85
82
|
private get items();
|
|
@@ -93,19 +90,19 @@ export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGro
|
|
|
93
90
|
private onInvalidChange;
|
|
94
91
|
connectedCallback(): void;
|
|
95
92
|
/**
|
|
96
|
-
*
|
|
93
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
|
|
97
94
|
*/
|
|
98
95
|
checkValidity(): boolean;
|
|
99
96
|
/**
|
|
100
|
-
*
|
|
97
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`。
|
|
101
98
|
*
|
|
102
|
-
*
|
|
99
|
+
* 如果验证未通过,还会在组件上显示验证失败的提示。
|
|
103
100
|
*/
|
|
104
101
|
reportValidity(): boolean;
|
|
105
102
|
/**
|
|
106
|
-
*
|
|
103
|
+
* 设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证
|
|
107
104
|
*
|
|
108
|
-
* @param message
|
|
105
|
+
* @param message 自定义的错误提示文本
|
|
109
106
|
*/
|
|
110
107
|
setCustomValidity(message: string): void;
|
|
111
108
|
protected render(): TemplateResult;
|
|
@@ -19,7 +19,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
|
|
19
19
|
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
|
20
20
|
import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
|
|
21
21
|
/**
|
|
22
|
-
* @summary
|
|
22
|
+
* @summary 分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用
|
|
23
23
|
*
|
|
24
24
|
* ```html
|
|
25
25
|
* <mdui-segmented-button-group>
|
|
@@ -34,7 +34,7 @@ import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
|
|
|
34
34
|
*
|
|
35
35
|
* @slot - `<mdui-segmented-button>` 组件
|
|
36
36
|
*
|
|
37
|
-
* @cssprop --shape-corner -
|
|
37
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
38
38
|
*/
|
|
39
39
|
let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
40
40
|
constructor() {
|
|
@@ -56,12 +56,9 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
|
56
56
|
*/
|
|
57
57
|
this.name = '';
|
|
58
58
|
/**
|
|
59
|
-
* 当前选中的 `<mdui-segmented-button>`
|
|
59
|
+
* 当前选中的 `<mdui-segmented-button>` 的值。
|
|
60
60
|
*
|
|
61
|
-
* Note
|
|
62
|
-
* 该属性的 HTML 属性始终为字符串,且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
|
|
63
|
-
* 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串,在 `selects="multiple"` 时为字符串数组。
|
|
64
|
-
* 所以,在 `selects="multiple"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。
|
|
61
|
+
* **Note**:该属性的 HTML 属性始终为字符串,且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects="single"` 时为字符串,在 `selects="multiple"` 时为字符串数组。所以,在 `selects="multiple"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。
|
|
65
62
|
*/
|
|
66
63
|
this.value = '';
|
|
67
64
|
/**
|
|
@@ -83,13 +80,13 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
|
83
80
|
});
|
|
84
81
|
}
|
|
85
82
|
/**
|
|
86
|
-
*
|
|
83
|
+
* 表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
|
|
87
84
|
*/
|
|
88
85
|
get validity() {
|
|
89
86
|
return this.inputRef.value.validity;
|
|
90
87
|
}
|
|
91
88
|
/**
|
|
92
|
-
*
|
|
89
|
+
* 如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串
|
|
93
90
|
*/
|
|
94
91
|
get validationMessage() {
|
|
95
92
|
return this.inputRef.value.validationMessage;
|
|
@@ -195,7 +192,7 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
|
195
192
|
this.defaultValue = this.selects === 'multiple' ? [] : '';
|
|
196
193
|
}
|
|
197
194
|
/**
|
|
198
|
-
*
|
|
195
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
|
|
199
196
|
*/
|
|
200
197
|
checkValidity() {
|
|
201
198
|
const valid = this.inputRef.value.checkValidity();
|
|
@@ -209,9 +206,9 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
|
209
206
|
return valid;
|
|
210
207
|
}
|
|
211
208
|
/**
|
|
212
|
-
*
|
|
209
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`。
|
|
213
210
|
*
|
|
214
|
-
*
|
|
211
|
+
* 如果验证未通过,还会在组件上显示验证失败的提示。
|
|
215
212
|
*/
|
|
216
213
|
reportValidity() {
|
|
217
214
|
this.invalid = !this.inputRef.value.reportValidity();
|
|
@@ -230,9 +227,9 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
|
|
|
230
227
|
return !this.invalid;
|
|
231
228
|
}
|
|
232
229
|
/**
|
|
233
|
-
*
|
|
230
|
+
* 设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证
|
|
234
231
|
*
|
|
235
|
-
* @param message
|
|
232
|
+
* @param message 自定义的错误提示文本
|
|
236
233
|
*/
|
|
237
234
|
setCustomValidity(message) {
|
|
238
235
|
this.inputRef.value.setCustomValidity(message);
|
|
@@ -4,7 +4,7 @@ import '../icon.js';
|
|
|
4
4
|
import type { Ripple } from '../ripple/index.js';
|
|
5
5
|
import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
6
6
|
/**
|
|
7
|
-
* @summary
|
|
7
|
+
* @summary 分段按钮项组件。需配合 `<mdui-segmented-button-group>` 组件使用
|
|
8
8
|
*
|
|
9
9
|
* ```html
|
|
10
10
|
* <mdui-segmented-button-group>
|
|
@@ -18,12 +18,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
18
18
|
* @event blur - 失去焦点时触发
|
|
19
19
|
* @event invalid - 表单字段验证未通过时触发
|
|
20
20
|
*
|
|
21
|
-
* @slot -
|
|
21
|
+
* @slot - 分段按钮项的文本内容
|
|
22
22
|
* @slot icon - 分段按钮项的左侧图标
|
|
23
23
|
* @slot selected-icon - 选中状态的左侧图标
|
|
24
24
|
* @slot end-icon - 分段按钮项的右侧图标
|
|
25
25
|
*
|
|
26
|
-
* @csspart button - 内部的 button 或 a 元素
|
|
26
|
+
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
|
27
27
|
* @csspart icon - 左侧的图标
|
|
28
28
|
* @csspart selected-icon - 选中状态的左侧图标
|
|
29
29
|
* @csspart end-icon - 右侧的图标
|
|
@@ -12,7 +12,7 @@ import { ButtonBase } from '../button/button-base.js';
|
|
|
12
12
|
import '../icon.js';
|
|
13
13
|
import { segmentedButtonStyle } from './segmented-button-style.js';
|
|
14
14
|
/**
|
|
15
|
-
* @summary
|
|
15
|
+
* @summary 分段按钮项组件。需配合 `<mdui-segmented-button-group>` 组件使用
|
|
16
16
|
*
|
|
17
17
|
* ```html
|
|
18
18
|
* <mdui-segmented-button-group>
|
|
@@ -26,12 +26,12 @@ import { segmentedButtonStyle } from './segmented-button-style.js';
|
|
|
26
26
|
* @event blur - 失去焦点时触发
|
|
27
27
|
* @event invalid - 表单字段验证未通过时触发
|
|
28
28
|
*
|
|
29
|
-
* @slot -
|
|
29
|
+
* @slot - 分段按钮项的文本内容
|
|
30
30
|
* @slot icon - 分段按钮项的左侧图标
|
|
31
31
|
* @slot selected-icon - 选中状态的左侧图标
|
|
32
32
|
* @slot end-icon - 分段按钮项的右侧图标
|
|
33
33
|
*
|
|
34
|
-
* @csspart button - 内部的 button 或 a 元素
|
|
34
|
+
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
|
35
35
|
* @csspart icon - 左侧的图标
|
|
36
36
|
* @csspart selected-icon - 选中状态的左侧图标
|
|
37
37
|
* @csspart end-icon - 右侧的图标
|
|
@@ -8,7 +8,7 @@ import type { FormControl } from '@mdui/jq/shared/form.js';
|
|
|
8
8
|
import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
9
9
|
declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
|
|
10
10
|
/**
|
|
11
|
-
* @summary
|
|
11
|
+
* @summary 选择框组件。需配合 `<mdui-menu-item>` 组件使用
|
|
12
12
|
*
|
|
13
13
|
* ```html
|
|
14
14
|
* <mdui-select>
|
|
@@ -21,7 +21,7 @@ declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@
|
|
|
21
21
|
* @event blur - 失去焦点时触发
|
|
22
22
|
* @event change - 选中的值变更时触发
|
|
23
23
|
* @event invalid - 表单字段验证未通过时触发
|
|
24
|
-
* @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()`
|
|
24
|
+
* @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空选择框
|
|
25
25
|
*
|
|
26
26
|
* @slot - `<mdui-menu-item>` 元素
|
|
27
27
|
* @slot icon - 左侧图标
|
|
@@ -39,25 +39,24 @@ declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@
|
|
|
39
39
|
export declare class Select extends Select_base<SelectEventMap> implements FormControl {
|
|
40
40
|
static styles: CSSResultGroup;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* 选择框的样式。可选值包括:
|
|
43
43
|
*
|
|
44
|
-
* * `filled
|
|
45
|
-
* * `outlined
|
|
44
|
+
* * `filled`:带背景色的选择框,视觉效果较强
|
|
45
|
+
* * `outlined`:带边框的选择框,视觉效果较弱
|
|
46
46
|
*/
|
|
47
|
-
variant:
|
|
47
|
+
variant: /*带背景色的选择框,视觉效果较强*/ 'filled' | /*带边框的选择框,视觉效果较弱*/ 'outlined';
|
|
48
48
|
/**
|
|
49
49
|
* 是否支持多选
|
|
50
50
|
*/
|
|
51
51
|
multiple: boolean;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
53
|
+
* 选择框的名称,将与表单数据一起提交
|
|
54
54
|
*/
|
|
55
55
|
name: string;
|
|
56
56
|
/**
|
|
57
|
-
*
|
|
57
|
+
* 选择框的值,将与表单数据一起提交。
|
|
58
58
|
*
|
|
59
|
-
*
|
|
60
|
-
* HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 设置
|
|
59
|
+
* 如果未指定 `multiple` 属性,该值为字符串;如果指定了 `multiple` 属性,该值为字符串数组。HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 属性设置。
|
|
61
60
|
*/
|
|
62
61
|
value: string | string[];
|
|
63
62
|
/**
|
|
@@ -69,61 +68,61 @@ export declare class Select extends Select_base<SelectEventMap> implements FormC
|
|
|
69
68
|
*/
|
|
70
69
|
label?: string;
|
|
71
70
|
/**
|
|
72
|
-
*
|
|
71
|
+
* 占位符文本
|
|
73
72
|
*/
|
|
74
73
|
placeholder?: string;
|
|
75
74
|
/**
|
|
76
|
-
*
|
|
75
|
+
* 选择框底部的帮助文本。也可以通过 `slot="helper"` 设置
|
|
77
76
|
*/
|
|
78
77
|
helper?: string;
|
|
79
78
|
/**
|
|
80
|
-
*
|
|
79
|
+
* 是否可以清空选择框
|
|
81
80
|
*/
|
|
82
81
|
clearable: boolean;
|
|
83
82
|
/**
|
|
84
|
-
*
|
|
83
|
+
* 当选择框可清空时,显示在选择框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot="clear-icon"` 设置
|
|
85
84
|
*/
|
|
86
85
|
clearIcon?: string;
|
|
87
86
|
/**
|
|
88
|
-
*
|
|
87
|
+
* 选择框的位置。可选值包括:
|
|
89
88
|
*
|
|
90
|
-
* * `auto
|
|
89
|
+
* * `auto`:自动判断位置
|
|
91
90
|
* * `bottom`:位于下方
|
|
92
91
|
* * `top`:位于上方
|
|
93
92
|
*/
|
|
94
|
-
placement:
|
|
93
|
+
placement: /*自动判断位置*/ 'auto' | /*位于下方*/ 'bottom' | /*位于上方*/ 'top';
|
|
95
94
|
/**
|
|
96
95
|
* 文本是否右对齐
|
|
97
96
|
*/
|
|
98
97
|
endAligned: boolean;
|
|
99
98
|
/**
|
|
100
|
-
*
|
|
99
|
+
* 选择框的前缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot="prefix"` 设置
|
|
101
100
|
*/
|
|
102
101
|
prefix: string;
|
|
103
102
|
/**
|
|
104
|
-
*
|
|
103
|
+
* 选择框的后缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot="suffix"` 设置
|
|
105
104
|
*/
|
|
106
105
|
suffix?: string;
|
|
107
106
|
/**
|
|
108
|
-
*
|
|
107
|
+
* 选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
|
|
109
108
|
*/
|
|
110
109
|
icon?: string;
|
|
111
110
|
/**
|
|
112
|
-
*
|
|
111
|
+
* 选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
|
|
113
112
|
*/
|
|
114
113
|
endIcon?: string;
|
|
115
114
|
/**
|
|
116
|
-
*
|
|
115
|
+
* 表单字段验证失败时,显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot="error-icon"` 设置
|
|
117
116
|
*/
|
|
118
117
|
errorIcon?: string;
|
|
119
118
|
/**
|
|
120
|
-
* 关联的
|
|
119
|
+
* 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
|
|
121
120
|
*
|
|
122
|
-
*
|
|
121
|
+
* 如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。
|
|
123
122
|
*/
|
|
124
123
|
form?: string;
|
|
125
124
|
/**
|
|
126
|
-
*
|
|
125
|
+
* 是否为只读状态
|
|
127
126
|
*/
|
|
128
127
|
readonly: boolean;
|
|
129
128
|
/**
|
|
@@ -149,11 +148,11 @@ export declare class Select extends Select_base<SelectEventMap> implements FormC
|
|
|
149
148
|
private readonly hasSlotController;
|
|
150
149
|
private readonly definedController;
|
|
151
150
|
/**
|
|
152
|
-
*
|
|
151
|
+
* 表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
|
|
153
152
|
*/
|
|
154
153
|
get validity(): ValidityState;
|
|
155
154
|
/**
|
|
156
|
-
*
|
|
155
|
+
* 如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串
|
|
157
156
|
*/
|
|
158
157
|
get validationMessage(): string;
|
|
159
158
|
protected get focusElement(): HTMLElement;
|
|
@@ -161,19 +160,19 @@ export declare class Select extends Select_base<SelectEventMap> implements FormC
|
|
|
161
160
|
connectedCallback(): void;
|
|
162
161
|
disconnectedCallback(): void;
|
|
163
162
|
/**
|
|
164
|
-
*
|
|
163
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
|
|
165
164
|
*/
|
|
166
165
|
checkValidity(): boolean;
|
|
167
166
|
/**
|
|
168
|
-
*
|
|
167
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`。
|
|
169
168
|
*
|
|
170
|
-
*
|
|
169
|
+
* 如果验证未通过,还会在组件上显示验证失败的提示。
|
|
171
170
|
*/
|
|
172
171
|
reportValidity(): boolean;
|
|
173
172
|
/**
|
|
174
|
-
*
|
|
173
|
+
* 设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证
|
|
175
174
|
*
|
|
176
|
-
* @param message
|
|
175
|
+
* @param message 自定义的错误提示文本
|
|
177
176
|
*/
|
|
178
177
|
setCustomValidity(message: string): void;
|
|
179
178
|
protected firstUpdated(changedProperties: PropertyValues): void;
|
|
@@ -21,7 +21,7 @@ import '../menu.js';
|
|
|
21
21
|
import '../text-field.js';
|
|
22
22
|
import { style } from './style.js';
|
|
23
23
|
/**
|
|
24
|
-
* @summary
|
|
24
|
+
* @summary 选择框组件。需配合 `<mdui-menu-item>` 组件使用
|
|
25
25
|
*
|
|
26
26
|
* ```html
|
|
27
27
|
* <mdui-select>
|
|
@@ -34,7 +34,7 @@ import { style } from './style.js';
|
|
|
34
34
|
* @event blur - 失去焦点时触发
|
|
35
35
|
* @event change - 选中的值变更时触发
|
|
36
36
|
* @event invalid - 表单字段验证未通过时触发
|
|
37
|
-
* @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()`
|
|
37
|
+
* @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空选择框
|
|
38
38
|
*
|
|
39
39
|
* @slot - `<mdui-menu-item>` 元素
|
|
40
40
|
* @slot icon - 左侧图标
|
|
@@ -53,10 +53,10 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
53
53
|
constructor() {
|
|
54
54
|
super(...arguments);
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
56
|
+
* 选择框的样式。可选值包括:
|
|
57
57
|
*
|
|
58
|
-
* * `filled
|
|
59
|
-
* * `outlined
|
|
58
|
+
* * `filled`:带背景色的选择框,视觉效果较强
|
|
59
|
+
* * `outlined`:带边框的选择框,视觉效果较弱
|
|
60
60
|
*/
|
|
61
61
|
this.variant = 'filled';
|
|
62
62
|
/**
|
|
@@ -64,14 +64,13 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
64
64
|
*/
|
|
65
65
|
this.multiple = false;
|
|
66
66
|
/**
|
|
67
|
-
*
|
|
67
|
+
* 选择框的名称,将与表单数据一起提交
|
|
68
68
|
*/
|
|
69
69
|
this.name = '';
|
|
70
70
|
/**
|
|
71
|
-
*
|
|
71
|
+
* 选择框的值,将与表单数据一起提交。
|
|
72
72
|
*
|
|
73
|
-
*
|
|
74
|
-
* HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 设置
|
|
73
|
+
* 如果未指定 `multiple` 属性,该值为字符串;如果指定了 `multiple` 属性,该值为字符串数组。HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 属性设置。
|
|
75
74
|
*/
|
|
76
75
|
this.value = '';
|
|
77
76
|
/**
|
|
@@ -79,13 +78,13 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
79
78
|
*/
|
|
80
79
|
this.defaultValue = '';
|
|
81
80
|
/**
|
|
82
|
-
*
|
|
81
|
+
* 是否可以清空选择框
|
|
83
82
|
*/
|
|
84
83
|
this.clearable = false;
|
|
85
84
|
/**
|
|
86
|
-
*
|
|
85
|
+
* 选择框的位置。可选值包括:
|
|
87
86
|
*
|
|
88
|
-
* * `auto
|
|
87
|
+
* * `auto`:自动判断位置
|
|
89
88
|
* * `bottom`:位于下方
|
|
90
89
|
* * `top`:位于上方
|
|
91
90
|
*/
|
|
@@ -95,7 +94,7 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
95
94
|
*/
|
|
96
95
|
this.endAligned = false;
|
|
97
96
|
/**
|
|
98
|
-
*
|
|
97
|
+
* 是否为只读状态
|
|
99
98
|
*/
|
|
100
99
|
this.readonly = false;
|
|
101
100
|
/**
|
|
@@ -122,13 +121,13 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
122
121
|
});
|
|
123
122
|
}
|
|
124
123
|
/**
|
|
125
|
-
*
|
|
124
|
+
* 表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
|
|
126
125
|
*/
|
|
127
126
|
get validity() {
|
|
128
127
|
return this.hiddenInputRef.value.validity;
|
|
129
128
|
}
|
|
130
129
|
/**
|
|
131
|
-
*
|
|
130
|
+
* 如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串
|
|
132
131
|
*/
|
|
133
132
|
get validationMessage() {
|
|
134
133
|
return this.hiddenInputRef.value.validationMessage;
|
|
@@ -159,7 +158,7 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
159
158
|
this.observeResize?.unobserve();
|
|
160
159
|
}
|
|
161
160
|
/**
|
|
162
|
-
*
|
|
161
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
|
|
163
162
|
*/
|
|
164
163
|
checkValidity() {
|
|
165
164
|
const valid = this.hiddenInputRef.value.checkValidity();
|
|
@@ -173,9 +172,9 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
173
172
|
return valid;
|
|
174
173
|
}
|
|
175
174
|
/**
|
|
176
|
-
*
|
|
175
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`。
|
|
177
176
|
*
|
|
178
|
-
*
|
|
177
|
+
* 如果验证未通过,还会在组件上显示验证失败的提示。
|
|
179
178
|
*/
|
|
180
179
|
reportValidity() {
|
|
181
180
|
this.invalid = !this.hiddenInputRef.value.reportValidity();
|
|
@@ -190,9 +189,9 @@ let Select = class Select extends FocusableMixin(MduiElement) {
|
|
|
190
189
|
return !this.invalid;
|
|
191
190
|
}
|
|
192
191
|
/**
|
|
193
|
-
*
|
|
192
|
+
* 设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证
|
|
194
193
|
*
|
|
195
|
-
* @param message
|
|
194
|
+
* @param message 自定义的错误提示文本
|
|
196
195
|
*/
|
|
197
196
|
setCustomValidity(message) {
|
|
198
197
|
this.hiddenInputRef.value.setCustomValidity(message);
|
|
@@ -11,7 +11,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
|
11
11
|
*
|
|
12
12
|
* @event focus - 获得焦点时触发
|
|
13
13
|
* @event blur - 失去焦点时触发
|
|
14
|
-
* @event change -
|
|
14
|
+
* @event change - 在值发生变更,且失去焦点时,将触发该事件
|
|
15
15
|
* @event input - 值变更时触发
|
|
16
16
|
* @event invalid - 表单字段验证未通过时触发
|
|
17
17
|
*
|
|
@@ -5,11 +5,11 @@ declare const SliderBase_base: import("@open-wc/dedupe-mixin").Constructor<impor
|
|
|
5
5
|
export declare class SliderBase<E> extends SliderBase_base<E> {
|
|
6
6
|
static styles: CSSResultGroup;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* 滑块的最小值,默认为 `0`
|
|
9
9
|
*/
|
|
10
10
|
min: number;
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* 滑块的最大值,默认为 `100`
|
|
13
13
|
*/
|
|
14
14
|
max: number;
|
|
15
15
|
/**
|
|
@@ -21,21 +21,21 @@ export declare class SliderBase<E> extends SliderBase_base<E> {
|
|
|
21
21
|
*/
|
|
22
22
|
tickmarks: boolean;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* 是否隐藏文本提示
|
|
25
25
|
*/
|
|
26
26
|
nolabel: boolean;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* 是否被禁用
|
|
29
29
|
*/
|
|
30
30
|
disabled: boolean;
|
|
31
31
|
/**
|
|
32
|
-
* 关联的
|
|
32
|
+
* 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
|
|
33
33
|
*
|
|
34
|
-
*
|
|
34
|
+
* 如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。
|
|
35
35
|
*/
|
|
36
36
|
form?: string;
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
38
|
+
* 滑块的名称,该名称将与表单数据一起提交
|
|
39
39
|
*/
|
|
40
40
|
name: string;
|
|
41
41
|
/**
|
|
@@ -48,35 +48,35 @@ export declare class SliderBase<E> extends SliderBase_base<E> {
|
|
|
48
48
|
protected readonly inputRef: Ref<HTMLInputElement>;
|
|
49
49
|
protected readonly trackActiveRef: Ref<HTMLElement>;
|
|
50
50
|
/**
|
|
51
|
-
*
|
|
51
|
+
* 表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
|
|
52
52
|
*/
|
|
53
53
|
get validity(): ValidityState;
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
55
|
+
* 如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串
|
|
56
56
|
*/
|
|
57
57
|
get validationMessage(): string;
|
|
58
58
|
protected get rippleDisabled(): boolean;
|
|
59
59
|
protected get focusElement(): HTMLElement;
|
|
60
60
|
protected get focusDisabled(): boolean;
|
|
61
61
|
/**
|
|
62
|
-
*
|
|
62
|
+
* 用于自定义标签的显示格式的函数。函数参数为滑块的当前值,返回值为期望显示的文本。
|
|
63
63
|
*/
|
|
64
64
|
labelFormatter: (value: number) => string;
|
|
65
65
|
private onDisabledChange;
|
|
66
66
|
/**
|
|
67
|
-
*
|
|
67
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
|
|
68
68
|
*/
|
|
69
69
|
checkValidity(): boolean;
|
|
70
70
|
/**
|
|
71
|
-
*
|
|
71
|
+
* 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`。
|
|
72
72
|
*
|
|
73
|
-
*
|
|
73
|
+
* 如果验证未通过,还会在组件上显示验证失败的提示。
|
|
74
74
|
*/
|
|
75
75
|
reportValidity(): boolean;
|
|
76
76
|
/**
|
|
77
|
-
*
|
|
77
|
+
* 设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证
|
|
78
78
|
*
|
|
79
|
-
* @param message
|
|
79
|
+
* @param message 自定义的错误提示文本
|
|
80
80
|
*/
|
|
81
81
|
setCustomValidity(message: string): void;
|
|
82
82
|
/**
|