添加组件的事件类型声明

zdhxiong · Nov 30, 2023 · 4f9c2e1 · 4f9c2e1
1 parent 5f996c2
commit 4f9c2e1
Show file tree

Hide file tree

Showing 57 changed files with 579 additions and 281 deletions.
diff --git a/packages/mdui/src/components/avatar/index.ts b/packages/mdui/src/components/avatar/index.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -24,7 +25,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-avatar')
-export class Avatar extends LitElement {
+export class Avatar extends MduiElement<AvatarEventMap> {
   public static override styles: CSSResultGroup = [componentStyle, style];
 
   /**
@@ -80,6 +81,8 @@ export class Avatar extends LitElement {
   }
 }
 
+export interface AvatarEventMap {}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-avatar': Avatar;

diff --git a/packages/mdui/src/components/badge/index.ts b/packages/mdui/src/components/badge/index.ts
@@ -1,5 +1,6 @@
-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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -17,7 +18,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-badge')
-export class Badge extends LitElement {
+export class Badge extends MduiElement<BadgeEventMap> {
   public static override styles: CSSResultGroup = [componentStyle, style];
 
   /**
@@ -39,6 +40,8 @@ export class Badge extends LitElement {
   }
 }
 
+export interface BadgeEventMap {}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-badge': Badge;

diff --git a/packages/mdui/src/components/bottom-app-bar/index.ts b/packages/mdui/src/components/bottom-app-bar/index.ts
@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
@@ -35,7 +34,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
 @customElement('mdui-bottom-app-bar')
-export class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
+export class BottomAppBar extends ScrollBehaviorMixin(
+  LayoutItemBase,
+)<BottomAppBarEventMap> {
   public static override styles: CSSResultGroup = [componentStyle, style];
 
   /**
@@ -79,7 +80,7 @@ export class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
 
     this.addEventListener('transitionend', (event: TransitionEvent) => {
       if (event.target === this) {
-        emit(this, this.hide ? 'hidden' : 'shown');
+        this.emit(this.hide ? 'hidden' : 'shown');
       }
     });
   }
@@ -95,22 +96,29 @@ export class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
   protected runScrollThreshold(isScrollingUp: boolean) {
     // 向下滚动
     if (!isScrollingUp && !this.hide) {
-      const requestHide = emit(this, 'hide');
-      if (!requestHide.defaultPrevented) {
+      const eventProceeded = this.emit('hide', { cancelable: true });
+      if (eventProceeded) {
         this.hide = true;
       }
     }
 
     // 向上滚动
     if (isScrollingUp && this.hide) {
-      const requestShow = emit(this, 'show');
-      if (!requestShow.defaultPrevented) {
+      const eventProceeded = this.emit('show', { cancelable: true });
+      if (eventProceeded) {
         this.hide = false;
       }
     }
   }
 }
 
+export interface BottomAppBarEventMap {
+  show: CustomEvent<void>;
+  shown: CustomEvent<void>;
+  hide: CustomEvent<void>;
+  hidden: CustomEvent<void>;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-bottom-app-bar': BottomAppBar;

diff --git a/packages/mdui/src/components/button-icon/index.ts b/packages/mdui/src/components/button-icon/index.ts
@@ -4,7 +4,6 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.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 { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
@@ -36,7 +35,7 @@ import type { Ref } from 'lit/directives/ref.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-button-icon')
-export class ButtonIcon extends ButtonBase {
+export class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
   public static override styles: CSSResultGroup = [ButtonBase.styles, style];
 
   /**
@@ -99,7 +98,7 @@ export class ButtonIcon extends ButtonBase {
 
   @watch('selected', true)
   private onSelectedChange() {
-    emit(this, 'change');
+    this.emit('change');
   }
 
   protected override firstUpdated(changedProperties: PropertyValues): void {
@@ -164,6 +163,13 @@ export class ButtonIcon extends ButtonBase {
   }
 }
 
+export interface ButtonIconEventMap {
+  focus: FocusEvent;
+  blur: FocusEvent;
+  change: CustomEvent<void>;
+  invalid: CustomEvent<void>;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-button-icon': ButtonIcon;

diff --git a/packages/mdui/src/components/button/button-base.ts b/packages/mdui/src/components/button/button-base.ts
@@ -1,10 +1,10 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import cc from 'classcat';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController } from '@mdui/shared/controllers/form.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -22,9 +22,9 @@ type RenderButtonOptions = {
   tabindex?: number;
 };
 
-export class ButtonBase extends AnchorMixin(
-  RippleMixin(FocusableMixin(LitElement)),
-) {
+export class ButtonBase<E> extends AnchorMixin(
+  RippleMixin(FocusableMixin(MduiElement)),
+)<E> {
   public static override styles: CSSResultGroup = [
     componentStyle,
     buttonBaseStyle,
@@ -212,7 +212,8 @@ export class ButtonBase extends AnchorMixin(
       const valid = (this.focusElement as HTMLButtonElement).checkValidity();
 
       if (!valid) {
-        emit(this, 'invalid', {
+        // @ts-ignore
+        this.emit('invalid', {
           bubbles: false,
           cancelable: true,
           composed: false,
@@ -237,7 +238,8 @@ export class ButtonBase extends AnchorMixin(
       ).reportValidity();
 
       if (invalid) {
-        emit(this, 'invalid', {
+        // @ts-ignore
+        this.emit('invalid', {
           bubbles: false,
           cancelable: true,
           composed: false,

diff --git a/packages/mdui/src/components/button/index.ts b/packages/mdui/src/components/button/index.ts
@@ -34,7 +34,7 @@ import type { Ref } from 'lit/directives/ref.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-button')
-export class Button extends ButtonBase {
+export class Button extends ButtonBase<ButtonEventMap> {
   public static override styles: CSSResultGroup = [ButtonBase.styles, style];
 
   /**
@@ -134,6 +134,12 @@ export class Button extends ButtonBase {
   }
 }
 
+export interface ButtonEventMap {
+  focus: FocusEvent;
+  blur: FocusEvent;
+  invalid: CustomEvent<void>;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-button': Button;

diff --git a/packages/mdui/src/components/card/index.ts b/packages/mdui/src/components/card/index.ts
@@ -1,6 +1,7 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.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 { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -26,7 +27,9 @@ import type { Ref } from 'lit/directives/ref.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-card')
-export class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+export class Card extends AnchorMixin(
+  RippleMixin(FocusableMixin(MduiElement)),
+)<CardEventMap> {
   public static override styles: CSSResultGroup = [componentStyle, style];
 
   /**
@@ -96,6 +99,11 @@ export class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
   }
 }
 
+export interface CardEventMap {
+  focus: FocusEvent;
+  blur: FocusEvent;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-card': Card;

diff --git a/packages/mdui/src/components/checkbox/index.ts b/packages/mdui/src/components/checkbox/index.ts
@@ -1,14 +1,14 @@
-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 { 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 '@mdui/shared/icons/check-box-outline-blank.js';
 import '@mdui/shared/icons/check-box.js';
 import '@mdui/shared/icons/indeterminate-check-box.js';
@@ -48,7 +48,7 @@ import type { Ref } from 'lit/directives/ref.js';
  */
 @customElement('mdui-checkbox')
 export class Checkbox
-  extends RippleMixin(FocusableMixin(LitElement))
+  extends RippleMixin(FocusableMixin(MduiElement))<CheckboxEventMap>
   implements FormControl
 {
   public static override styles: CSSResultGroup = [componentStyle, style];
@@ -210,7 +210,7 @@ export class Checkbox
     const valid = this.inputRef.value!.checkValidity();
 
     if (!valid) {
-      emit(this, 'invalid', {
+      this.emit('invalid', {
         bubbles: false,
         cancelable: true,
         composed: false,
@@ -229,14 +229,14 @@ export class Checkbox
     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();
       }
@@ -314,10 +314,18 @@ export class Checkbox
   private onChange() {
     this.checked = this.inputRef.value!.checked;
     this.indeterminate = false;
-    emit(this, 'change');
+    this.emit('change');
   }
 }
 
+export interface CheckboxEventMap {
+  focus: FocusEvent;
+  blur: FocusEvent;
+  change: CustomEvent<void>;
+  input: Event;
+  invalid: CustomEvent<void>;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-checkbox': Checkbox;

diff --git a/packages/mdui/src/components/chip/index.ts b/packages/mdui/src/components/chip/index.ts
@@ -5,7 +5,6 @@ import cc from 'classcat';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.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 '@mdui/shared/icons/clear.js';
@@ -46,7 +45,7 @@ import type { Ref } from 'lit/directives/ref.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 @customElement('mdui-chip')
-export class Chip extends ButtonBase {
+export class Chip extends ButtonBase<ChipEventMap> {
   public static override styles: CSSResultGroup = [ButtonBase.styles, style];
 
   /**
@@ -150,7 +149,7 @@ export class Chip extends ButtonBase {
 
   @watch('selected', true)
   private onSelectedChange() {
-    emit(this, 'change');
+    this.emit('change');
   }
 
   protected override firstUpdated(changedProperties: PropertyValues): void {
@@ -223,7 +222,7 @@ export class Chip extends ButtonBase {
 
     // 按下 Delete 或 BackSpace 键时，触发 delete 事件
     if (this.deletable && ['Delete', 'Backspace'].includes(event.key)) {
-      emit(this, 'delete');
+      this.emit('delete');
     }
   }
 
@@ -232,7 +231,7 @@ export class Chip extends ButtonBase {
    */
   private onDelete(event: MouseEvent) {
     event.stopPropagation();
-    emit(this, 'delete');
+    this.emit('delete');
   }
 
   private renderIcon(): TemplateResult {
@@ -311,6 +310,14 @@ export class Chip extends ButtonBase {
   }
 }
 
+export interface ChipEventMap {
+  focus: FocusEvent;
+  blur: FocusEvent;
+  invalid: CustomEvent<void>;
+  change: CustomEvent<void>;
+  delete: CustomEvent<void>;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'mdui-chip': Chip;