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.
Files changed (107) hide show
  1. package/components/avatar/index.d.ts +13 -13
  2. package/components/avatar/index.js +4 -4
  3. package/components/badge/index.d.ts +7 -6
  4. package/components/badge/index.js +6 -5
  5. package/components/bottom-app-bar/index.d.ts +4 -3
  6. package/components/bottom-app-bar/index.js +3 -3
  7. package/components/button/button-base-style.js +1 -1
  8. package/components/button/button-base.d.ts +43 -44
  9. package/components/button/button-base.js +20 -20
  10. package/components/button/index.d.ts +13 -13
  11. package/components/button/index.js +12 -12
  12. package/components/button-icon/index.d.ts +8 -8
  13. package/components/button-icon/index.js +7 -7
  14. package/components/card/index.d.ts +8 -8
  15. package/components/card/index.js +7 -7
  16. package/components/checkbox/index.d.ts +20 -20
  17. package/components/checkbox/index.js +18 -18
  18. package/components/chip/index.d.ts +19 -19
  19. package/components/chip/index.js +16 -16
  20. package/components/circular-progress/index.d.ts +2 -2
  21. package/components/circular-progress/index.js +1 -1
  22. package/components/collapse/collapse-item.d.ts +4 -4
  23. package/components/collapse/collapse-item.js +2 -2
  24. package/components/collapse/collapse.d.ts +6 -9
  25. package/components/collapse/collapse.js +4 -4
  26. package/components/dialog/index.d.ts +13 -13
  27. package/components/dialog/index.js +13 -13
  28. package/components/divider/index.d.ts +3 -3
  29. package/components/divider/index.js +3 -3
  30. package/components/dropdown/index.d.ts +35 -35
  31. package/components/dropdown/index.js +33 -33
  32. package/components/fab/index.d.ts +6 -6
  33. package/components/fab/index.js +6 -6
  34. package/components/layout/layout-item.d.ts +7 -7
  35. package/components/layout/layout-item.js +6 -6
  36. package/components/layout/layout-main.d.ts +2 -2
  37. package/components/layout/layout-main.js +2 -2
  38. package/components/layout/layout.d.ts +2 -2
  39. package/components/layout/layout.js +2 -2
  40. package/components/linear-progress/index.d.ts +4 -4
  41. package/components/linear-progress/index.js +3 -3
  42. package/components/list/list-item.d.ts +17 -17
  43. package/components/list/list-item.js +7 -7
  44. package/components/list/list-subheader.d.ts +2 -2
  45. package/components/list/list-subheader.js +2 -2
  46. package/components/list/list.d.ts +1 -1
  47. package/components/list/list.js +1 -1
  48. package/components/menu/menu-item.d.ts +4 -4
  49. package/components/menu/menu-item.js +2 -2
  50. package/components/menu/menu.d.ts +15 -18
  51. package/components/menu/menu.js +8 -8
  52. package/components/navigation-bar/navigation-bar-item.d.ts +5 -5
  53. package/components/navigation-bar/navigation-bar-item.js +4 -4
  54. package/components/navigation-bar/navigation-bar.d.ts +9 -8
  55. package/components/navigation-bar/navigation-bar.js +6 -6
  56. package/components/navigation-drawer/index.d.ts +19 -20
  57. package/components/navigation-drawer/index.js +44 -30
  58. package/components/navigation-rail/navigation-rail-item.d.ts +6 -6
  59. package/components/navigation-rail/navigation-rail-item.js +4 -4
  60. package/components/navigation-rail/navigation-rail.d.ts +10 -11
  61. package/components/navigation-rail/navigation-rail.js +9 -10
  62. package/components/radio/radio-group.d.ts +13 -13
  63. package/components/radio/radio-group.js +11 -11
  64. package/components/radio/radio.d.ts +3 -3
  65. package/components/radio/radio.js +3 -3
  66. package/components/range-slider/index.d.ts +4 -5
  67. package/components/range-slider/index.js +4 -5
  68. package/components/segmented-button/segmented-button-group.d.ts +17 -20
  69. package/components/segmented-button/segmented-button-group.js +11 -14
  70. package/components/segmented-button/segmented-button.d.ts +3 -3
  71. package/components/segmented-button/segmented-button.js +3 -3
  72. package/components/select/index.d.ts +31 -32
  73. package/components/select/index.js +19 -20
  74. package/components/slider/index.d.ts +1 -1
  75. package/components/slider/index.js +1 -1
  76. package/components/slider/slider-base.d.ts +15 -15
  77. package/components/slider/slider-base.js +13 -13
  78. package/components/snackbar/index.d.ts +21 -21
  79. package/components/snackbar/index.js +15 -15
  80. package/components/switch/index.d.ts +14 -14
  81. package/components/switch/index.js +11 -11
  82. package/components/tabs/tab-panel.d.ts +3 -3
  83. package/components/tabs/tab-panel.js +2 -2
  84. package/components/tabs/tab.d.ts +6 -6
  85. package/components/tabs/tab.js +5 -5
  86. package/components/tabs/tabs.d.ts +19 -19
  87. package/components/tabs/tabs.js +17 -17
  88. package/components/text-field/index.d.ts +51 -51
  89. package/components/text-field/index.js +25 -25
  90. package/components/tooltip/index.d.ts +31 -31
  91. package/components/tooltip/index.js +28 -28
  92. package/components/top-app-bar/top-app-bar-title.d.ts +4 -4
  93. package/components/top-app-bar/top-app-bar-title.js +4 -4
  94. package/components/top-app-bar/top-app-bar.d.ts +5 -5
  95. package/components/top-app-bar/top-app-bar.js +4 -4
  96. package/css-data.en.json +2826 -0
  97. package/css-data.zh-cn.json +374 -367
  98. package/custom-elements.json +1072 -1115
  99. package/html-data.en.json +6551 -0
  100. package/html-data.zh-cn.json +1420 -1435
  101. package/jsx.en.d.ts +3303 -0
  102. package/jsx.zh-cn.d.ts +3351 -0
  103. package/mdui.esm.js +9 -9
  104. package/mdui.global.js +5 -5
  105. package/package.json +6 -5
  106. package/web-types.en.json +11718 -0
  107. 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 分段按钮组件。需与 `<mdui-segmented-button>` 组件配合使用
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 - 组件的圆角大小。可以指定一个具体的像素值;但更推荐[引用设计令牌](/docs/2/styles/design-tokens#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?: /*最多只能选中一个*/ 'single' | /*可以选中多个*/ 'multiple';
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
- * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
46
+ * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
47
47
  *
48
- * 如果此属性未指定,则元素必须是 `form` 元素的后代。利用此属性,你可以将元素放置在页面中的任何位置,而不仅仅是作为 `form` 元素的后代。
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`
93
+ * 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
97
94
  */
98
95
  checkValidity(): boolean;
99
96
  /**
100
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`。
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 分段按钮组件。需与 `<mdui-segmented-button>` 组件配合使用
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 - 组件的圆角大小。可以指定一个具体的像素值;但更推荐[引用设计令牌](/docs/2/styles/design-tokens#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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`。
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 分段按钮项组件。需与 `<mdui-segmented-button-group>` 组件配合使用
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 分段按钮项组件。需与 `<mdui-segmented-button-group>` 组件配合使用
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 选择框组件。需与 `<mdui-menu-item>` 组件配合使用
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: /*带背景色的下拉框,视觉效果较强*/ 'filled' | /*带边框的下拉框,视觉效果较弱*/ 'outlined';
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
- * 若未指定 `multiple` 属性,则该值为字符串;否则,该值为字符串数组。
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
- * 下拉框底部的帮助文本。也可以通过 `slot="helper"` 设置
75
+ * 选择框底部的帮助文本。也可以通过 `slot="helper"` 设置
77
76
  */
78
77
  helper?: string;
79
78
  /**
80
- * 是否可清空下拉框
79
+ * 是否可以清空选择框
81
80
  */
82
81
  clearable: boolean;
83
82
  /**
84
- * 可清空下拉框时,显示在下拉框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot="clear-icon"` 设置
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: /*自动判断方位*/ 'auto' | /*位于下方*/ 'bottom' | /*位于上方*/ 'top';
93
+ placement: /*自动判断位置*/ 'auto' | /*位于下方*/ 'bottom' | /*位于上方*/ 'top';
95
94
  /**
96
95
  * 文本是否右对齐
97
96
  */
98
97
  endAligned: boolean;
99
98
  /**
100
- * 下拉框的前缀文本。仅在聚焦状态,或下拉框有值时才会显示。也可以通过 `slot="prefix"` 设置
99
+ * 选择框的前缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot="prefix"` 设置
101
100
  */
102
101
  prefix: string;
103
102
  /**
104
- * 下拉框的后缀文本。仅在聚焦状态,或下拉框有值时才会显示。也可以通过 `slot="suffix"` 设置
103
+ * 选择框的后缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot="suffix"` 设置
105
104
  */
106
105
  suffix?: string;
107
106
  /**
108
- * 下拉框的前缀图标的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
107
+ * 选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
109
108
  */
110
109
  icon?: string;
111
110
  /**
112
- * 下拉框的后缀图标的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
111
+ * 选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
113
112
  */
114
113
  endIcon?: string;
115
114
  /**
116
- * 表单字段验证失败时,显示在下拉框右侧的 Material Icons 图标名。也可以通过 `slot="error-icon"` 设置
115
+ * 表单字段验证失败时,显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot="error-icon"` 设置
117
116
  */
118
117
  errorIcon?: string;
119
118
  /**
120
- * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
119
+ * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
121
120
  *
122
- * 如果此属性未指定,则元素必须是 `form` 元素的后代。利用此属性,你可以将元素放置在页面中的任何位置,而不仅仅是作为 `form` 元素的后代。
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`
163
+ * 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
165
164
  */
166
165
  checkValidity(): boolean;
167
166
  /**
168
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`。
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 选择框组件。需与 `<mdui-menu-item>` 组件配合使用
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
- * 若未指定 `multiple` 属性,则该值为字符串;否则,该值为字符串数组。
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`。
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
  *
@@ -21,7 +21,7 @@ import { style } from './style.js';
21
21
  *
22
22
  * @event focus - 获得焦点时触发
23
23
  * @event blur - 失去焦点时触发
24
- * @event change - 在值发生了变更,且失去了焦点时,将触发该事件
24
+ * @event change - 在值发生变更,且失去焦点时,将触发该事件
25
25
  * @event input - 值变更时触发
26
26
  * @event invalid - 表单字段验证未通过时触发
27
27
  *
@@ -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
- * 最小允许值,默认为 `0`
8
+ * 滑块的最小值,默认为 `0`
9
9
  */
10
10
  min: number;
11
11
  /**
12
- * 最大允许值,默认为 `100`
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
- * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
32
+ * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
33
33
  *
34
- * 如果此属性未指定,则元素必须是 `form` 元素的后代。利用此属性,你可以将元素放置在页面中的任何位置,而不仅仅是作为 `form` 元素的后代。
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
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`
67
+ * 检查表单字段是否通过验证。如果未通过,返回 `false` 并触发 `invalid` 事件;如果通过,返回 `true`
68
68
  */
69
69
  checkValidity(): boolean;
70
70
  /**
71
- * 检查表单字段是否验证通过。若未通过则返回 `false`,并触发 `invalid` 事件;若验证通过,则返回 `true`。
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
  /**