mdui 2.0.2 → 2.0.4

package/components/switch/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/check.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -39,10 +39,10 @@ import { style } from './style.js';
  * @csspart unchecked-icon - 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
  *
- * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
+let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -54,11 +54,11 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
          */
         this.checked = false;
         /**
-         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         * 默认选中状态。在重置表单时，将重置为此状态。此属性只能通过 JavaScript 属性设置
          */
         this.defaultChecked = false;
         /**
-         * 提交表单时，是否必须选中该开关
+         * 提交表单时，是否必须选中此开关
          */
         this.required = false;
         /**
@@ -83,13 +83,13 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
         this.hasSlotController = new HasSlotController(this, 'unchecked-icon');
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         return this.inputRef.value.validity;
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         return this.inputRef.value.validationMessage;
@@ -123,12 +123,12 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -137,20 +137,20 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            const requestInvalid = emit(this, 'invalid', {
+            const eventProceeded = this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
             });
             // 调用了 preventDefault() 时，隐藏默认的表单错误提示
-            if (requestInvalid.defaultPrevented) {
+            if (!eventProceeded) {
                 this.blur();
                 this.focus();
             }
@@ -158,9 +158,9 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -183,7 +183,7 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
      */
     onChange() {
         this.checked = this.inputRef.value.checked;
-        emit(this, 'change');
+        this.emit('change');
     }
 };
 Switch.styles = [componentStyle, style];

package/components/tabs/tab-panel.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -15,12 +15,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-tabs>
  * ```
  *
- * @slot - 选项卡面板内容
+ * @slot - 选项卡面板项内容
  */
-export declare class TabPanel extends LitElement {
+export declare class TabPanel extends MduiElement<TabPanelEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该选项卡面板的值
+     * 选项卡面板项的值
      */
     value?: string;
     /**
@@ -29,6 +29,8 @@ export declare class TabPanel extends LitElement {
     protected active: boolean;
     protected render(): TemplateResult;
 }
+export interface TabPanelEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab-panel': TabPanel;

package/components/tabs/tab-panel.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabPanelStyle } from './tab-panel-style.js';
 /**
- * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
+ * @summary 选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -19,9 +20,9 @@ import { tabPanelStyle } from './tab-panel-style.js';
  * </mdui-tabs>
  * ```
  *
- * @slot - 选项卡面板内容
+ * @slot - 选项卡面板项内容
  */
-let TabPanel = class TabPanel extends LitElement {
+let TabPanel = class TabPanel extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/tabs/tab.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -21,19 +21,19 @@ declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../r
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 选项卡导航项的文本
+ * @slot - 选项卡导航项的文本内容
  * @slot icon - 选项卡导航项中的图标
  * @slot badge - 徽标
  * @slot custom - 自定义整个选项卡导航项中的内容
  *
- * @csspart container - 导航项容器
- * @csspart icon - 导航项中的图标
- * @csspart label - 导航项的文本
+ * @csspart container - 选项卡导航项容器
+ * @csspart icon - 选项卡导航项中的图标
+ * @csspart label - 选项卡导航项的文本
  */
-export declare class Tab extends Tab_base {
+export declare class Tab extends Tab_base<TabEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该选项卡导航项的值
+     * 选项卡导航项的值
      */
     value?: string;
     /**
@@ -61,6 +61,10 @@ export declare class Tab extends Tab_base {
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }
+export interface TabEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab': Tab;

package/components/tabs/tab.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -14,7 +15,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { tabStyle } from './tab-style.js';
 /**
- * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -31,16 +32,16 @@ import { tabStyle } from './tab-style.js';
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 选项卡导航项的文本
+ * @slot - 选项卡导航项的文本内容
  * @slot icon - 选项卡导航项中的图标
  * @slot badge - 徽标
  * @slot custom - 自定义整个选项卡导航项中的内容
  *
- * @csspart container - 导航项容器
- * @csspart icon - 导航项中的图标
- * @csspart label - 导航项的文本
+ * @csspart container - 选项卡导航项容器
+ * @csspart icon - 选项卡导航项中的图标
+ * @csspart label - 选项卡导航项的文本
  */
-let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
+let Tab = class Tab extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**

package/components/tabs/tabs.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
- * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -27,36 +27,36 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-export declare class Tabs extends LitElement {
+export declare class Tabs extends MduiElement<TabsEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 选项卡形状。可选值为：
+     * 选项卡形状。可选值包括：
      *
-     * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
-     * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+     * * `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景
+     * * `secondary`：适用于位于页面中，用于切换一组相关内容的场景
      */
-    variant: /*位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡*/ 'primary' | /*位于页面中，用于切换一组相关内容时，可使用该形状的选项卡*/ 'secondary';
+    variant: /*适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景*/ 'primary' | /*适用于位于页面中，用于切换一组相关内容的场景*/ 'secondary';
     /**
      * 当前激活的 `<mdui-tab>` 的值
      */
     value?: string;
     /**
-     * 选项卡位置。默认为 `top-start`。可选值为：
+     * 选项卡位置。默认为 `top-start`。可选值包括：
      *
-     * * `top-start`：位于上方，且左对齐
-     * * `top`：位于上方，且居中对齐
-     * * `top-end`：位于上方，且右对齐
-     * * `bottom-start`：位于下方，且左对齐
-     * * `bottom`：位于下方，且居中对齐
-     * * `bottom-end`：位于下方，且右对齐
-     * * `left-start`：位于左侧，且顶部对齐
-     * * `left`：位于左侧，且居中对齐
-     * * `left-end`：位于左侧，且底部对齐
-     * * `right-start`：位于右侧，且顶部对齐
-     * * `right`：位于右侧，且居中对齐
-     * * `right-end`：位于右侧，且底部对齐
+     * * `top-start`：位于上方，左对齐
+     * * `top`：位于上方，居中对齐
+     * * `top-end`：位于上方，右对齐
+     * * `bottom-start`：位于下方，左对齐
+     * * `bottom`：位于下方，居中对齐
+     * * `bottom-end`：位于下方，右对齐
+     * * `left-start`：位于左侧，顶部对齐
+     * * `left`：位于左侧，居中对齐
+     * * `left-end`：位于左侧，底部对齐
+     * * `right-start`：位于右侧，顶部对齐
+     * * `right`：位于右侧，居中对齐
+     * * `right-end`：位于右侧，底部对齐
      */
-    placement: /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*位于上方，左对齐*/ 'top-start' | /*位于上方，居中对齐*/ 'top' | /*位于上方，右对齐*/ 'top-end' | /*位于下方，左对齐*/ 'bottom-start' | /*位于下方，居中对齐*/ 'bottom' | /*位于下方，右对齐*/ 'bottom-end' | /*位于左侧，顶部对齐*/ 'left-start' | /*位于左侧，居中对齐*/ 'left' | /*位于左侧，底部对齐*/ 'left-end' | /*位于右侧，顶部对齐*/ 'right-start' | /*位于右侧，居中对齐*/ 'right' | /*位于右侧，底部对齐*/ 'right-end';
     /**
      * 是否填满父元素宽度
      */
@@ -81,6 +81,9 @@ export declare class Tabs extends LitElement {
     private updateActive;
     private updateIndicator;
 }
+export interface TabsEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tabs': Tabs;

package/components/tabs/tabs.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -8,15 +8,15 @@ import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabsStyle } from './tabs-style.js';
 /**
- * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -38,31 +38,31 @@ import { tabsStyle } from './tabs-style.js';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-let Tabs = class Tabs extends LitElement {
+let Tabs = class Tabs extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 选项卡形状。可选值为：
+         * 选项卡形状。可选值包括：
          *
-         * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
-         * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+         * * `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景
+         * * `secondary`：适用于位于页面中，用于切换一组相关内容的场景
          */
         this.variant = 'primary';
         /**
-         * 选项卡位置。默认为 `top-start`。可选值为：
+         * 选项卡位置。默认为 `top-start`。可选值包括：
          *
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `top-start`：位于上方，左对齐
+         * * `top`：位于上方，居中对齐
+         * * `top-end`：位于上方，右对齐
+         * * `bottom-start`：位于下方，左对齐
+         * * `bottom`：位于下方，居中对齐
+         * * `bottom-end`：位于下方，右对齐
+         * * `left-start`：位于左侧，顶部对齐
+         * * `left`：位于左侧，居中对齐
+         * * `left-end`：位于左侧，底部对齐
+         * * `right-start`：位于右侧，顶部对齐
+         * * `right`：位于右侧，居中对齐
+         * * `right-end`：位于右侧，底部对齐
          */
         this.placement = 'top-start';
         /**
@@ -85,7 +85,7 @@ let Tabs = class Tabs extends LitElement {
         this.value = this.tabs.find((tab) => tab.key === this.activeKey)?.value;
         this.updateActive();
         if (!this.isInitial) {
-            emit(this, 'change');
+            this.emit('change');
         }
     }
     async onValueChange() {
@@ -121,6 +121,9 @@ let Tabs = class Tabs extends LitElement {
         await this.definedController.whenDefined();
         const target = event.target;
         const tab = target.closest('mdui-tab');
+        if (!tab) {
+            return;
+        }
         this.activeKey = tab.key;
         this.isInitial = false;
         this.updateActive();