mdui 2.0.2 → 2.0.4

package/components/tooltip/index.d.ts

@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/filter.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/prop.js';
 import '@mdui/jq/methods/width.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
  * @summary 工具提示组件
@@ -19,57 +19,57 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @event close - tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭
  * @event closed - tooltip 隐藏动画完成时，事件被触发
  *
- * @slot - tooltip 触发的目标元素，仅 `default` slot 中的第一个元素会作为目标元素
- * @slot headline - tooltip 的标题，仅 `variant="rich"` 时该 slot 才有效
+ * @slot - tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素
+ * @slot headline - tooltip 的标题，只有当 `variant="rich"` 时，此 slot 才有效
  * @slot content - tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替
- * @slot action - tooltip 底部的按钮，仅 `variant="rich"` 时该 slot 才有效
+ * @slot action - tooltip 底部的按钮，只有当 `variant="rich"` 时，此 slot 才有效
  *
- * @csspart popup - 工具提示的容器
+ * @csspart popup - tooltip 的容器
  * @csspart headline - 标题
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-export declare class Tooltip extends LitElement {
+export declare class Tooltip extends MduiElement<TooltipEventMap> {
     static styles: CSSResultGroup;
     /**
-     * tooltip 的形状。默认为 `plain`。可选值为：
+     * tooltip 的形状。默认为 `plain`。可选值包括：
      *
-     * * `plain`：纯文本，用于简单的单行文本
-     * * `rich`：富文本，可包含标题、正文、及操作按钮
+     * * `plain`：纯文本，适用于简单的单行文本
+     * * `rich`：富文本，可以包含标题、正文和操作按钮
      */
-    variant: /*纯文本，用于简单的单行文本*/ 'plain' | /*富文本，可包含标题、正文、及操作按钮*/ 'rich';
+    variant: /*纯文本，适用于简单的单行文本*/ 'plain' | /*富文本，可以包含标题、正文和操作按钮*/ 'rich';
     /**
-     * tooltip 的位置。默认为 `auto`。可选值为：
+     * tooltip 的位置。默认为 `auto`。可选值包括：
      *
      * * `auto`：自动判断位置。`variant="plan"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
      * * `top-left`：位于左上方
-     * * `top-start`：位于上方，且左对齐
-     * * `top`：位于上方，且居中对齐
-     * * `top-end`：位于上方，且右对齐
+     * * `top-start`：位于上方，左对齐
+     * * `top`：位于上方，居中对齐
+     * * `top-end`：位于上方，右对齐
      * * `top-right`：位于右上方
      * * `bottom-left`：位于左下方
-     * * `bottom-start`：位于下方，且左对齐
-     * * `bottom`：位于下方，且居中对齐
-     * * `bottom-end`：位于下方，且右对齐
+     * * `bottom-start`：位于下方，左对齐
+     * * `bottom`：位于下方，居中对齐
+     * * `bottom-end`：位于下方，右对齐
      * * `bottom-right`：位于右下方
-     * * `left-start`：位于左侧，且顶部对齐
-     * * `left`：位于左侧，且居中对齐
-     * * `left-end`：位于左侧，且底部对齐
-     * * `right-start`：位于右侧，且顶部对齐
-     * * `right`：位于右侧，且居中对齐
-     * * `right-end`：位于右侧，且底部对齐
+     * * `left-start`：位于左侧，顶部对齐
+     * * `left`：位于左侧，居中对齐
+     * * `left-end`：位于左侧，底部对齐
+     * * `right-start`：位于右侧，顶部对齐
+     * * `right`：位于右侧，居中对齐
+     * * `right-end`：位于右侧，底部对齐
      */
-    placement: /*自动判断位置*/ 'auto' | /*位于左上方*/ 'top-left' | /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于右上方*/ 'top-right' | /*位于左下方*/ 'bottom-left' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于右下方*/ 'bottom-right' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*自动判断位置*/ 'auto' | /*位于左上方*/ 'top-left' | /*位于上方，左对齐*/ 'top-start' | /*位于上方，居中对齐*/ 'top' | /*位于上方，右对齐*/ 'top-end' | /*位于右上方*/ 'top-right' | /*位于左下方*/ 'bottom-left' | /*位于下方，左对齐*/ 'bottom-start' | /*位于下方，居中对齐*/ 'bottom' | /*位于下方，右对齐*/ 'bottom-end' | /*位于右下方*/ 'bottom-right' | /*位于左侧，顶部对齐*/ 'left-start' | /*位于左侧，居中对齐*/ 'left' | /*位于左侧，底部对齐*/ 'left-end' | /*位于右侧，顶部对齐*/ 'right-start' | /*位于右侧，居中对齐*/ 'right' | /*位于右侧，底部对齐*/ 'right-end';
     /**
-     * hover 触发显示的延时，单位为毫秒
+     * 鼠标悬浮触发显示的延时，单位为毫秒
      */
     openDelay: number;
     /**
-     * hover 触发隐藏的延时，单位为毫秒
+     * 鼠标悬浮触发隐藏的延时，单位为毫秒
      */
     closeDelay: number;
     /**
@@ -81,14 +81,14 @@ export declare class Tooltip extends LitElement {
      */
     content?: string;
     /**
-     * 触发方式，支持传入多个值，用空格分隔。可选值为：
+     * 触发方式，支持多个值，用空格分隔。可选值包括：
      *
      * * `click`：点击时触发
-     * * `hover`：鼠标悬浮触发
+     * * `hover`：鼠标悬浮时触发
      * * `focus`：聚焦时触发
-     * * `manual`：使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式
+     * * `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式
      */
-    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式*/ 'manual' | string;
+    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮时触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式*/ 'manual' | string;
     /**
      * 是否禁用 tooltip
      */
@@ -98,6 +98,7 @@ export declare class Tooltip extends LitElement {
      */
     open: boolean;
     private observeResize?;
+    private overflowAncestors?;
     private hoverTimeout;
     private readonly popupRef;
     private readonly hasSlotController;
@@ -133,6 +134,12 @@ export declare class Tooltip extends LitElement {
     private onWindowScroll;
     private updatePositioner;
 }
+export interface TooltipEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tooltip': Tooltip;

package/components/tooltip/index.js

@@ -1,21 +1,22 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/filter.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/prop.js';
 import '@mdui/jq/methods/width.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { HoverController } from '@mdui/shared/controllers/hover.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -34,67 +35,67 @@ import { style } from './style.js';
  * @event close - tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭
  * @event closed - tooltip 隐藏动画完成时，事件被触发
  *
- * @slot - tooltip 触发的目标元素，仅 `default` slot 中的第一个元素会作为目标元素
- * @slot headline - tooltip 的标题，仅 `variant="rich"` 时该 slot 才有效
+ * @slot - tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素
+ * @slot headline - tooltip 的标题，只有当 `variant="rich"` 时，此 slot 才有效
  * @slot content - tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替
- * @slot action - tooltip 底部的按钮，仅 `variant="rich"` 时该 slot 才有效
+ * @slot action - tooltip 底部的按钮，只有当 `variant="rich"` 时，此 slot 才有效
  *
- * @csspart popup - 工具提示的容器
+ * @csspart popup - tooltip 的容器
  * @csspart headline - 标题
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-let Tooltip = class Tooltip extends LitElement {
+let Tooltip = class Tooltip extends MduiElement {
     constructor() {
         super();
         /**
-         * tooltip 的形状。默认为 `plain`。可选值为：
+         * tooltip 的形状。默认为 `plain`。可选值包括：
          *
-         * * `plain`：纯文本，用于简单的单行文本
-         * * `rich`：富文本，可包含标题、正文、及操作按钮
+         * * `plain`：纯文本，适用于简单的单行文本
+         * * `rich`：富文本，可以包含标题、正文和操作按钮
          */
         this.variant = 'plain';
         /**
-         * tooltip 的位置。默认为 `auto`。可选值为：
+         * tooltip 的位置。默认为 `auto`。可选值包括：
          *
          * * `auto`：自动判断位置。`variant="plan"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
          * * `top-left`：位于左上方
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
+         * * `top-start`：位于上方，左对齐
+         * * `top`：位于上方，居中对齐
+         * * `top-end`：位于上方，右对齐
          * * `top-right`：位于右上方
          * * `bottom-left`：位于左下方
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
+         * * `bottom-start`：位于下方，左对齐
+         * * `bottom`：位于下方，居中对齐
+         * * `bottom-end`：位于下方，右对齐
          * * `bottom-right`：位于右下方
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `left-start`：位于左侧，顶部对齐
+         * * `left`：位于左侧，居中对齐
+         * * `left-end`：位于左侧，底部对齐
+         * * `right-start`：位于右侧，顶部对齐
+         * * `right`：位于右侧，居中对齐
+         * * `right-end`：位于右侧，底部对齐
          */
         this.placement = 'auto';
         /**
-         * hover 触发显示的延时，单位为毫秒
+         * 鼠标悬浮触发显示的延时，单位为毫秒
          */
         this.openDelay = 150;
         /**
-         * hover 触发隐藏的延时，单位为毫秒
+         * 鼠标悬浮触发隐藏的延时，单位为毫秒
          */
         this.closeDelay = 150;
         /**
-         * 触发方式，支持传入多个值，用空格分隔。可选值为：
+         * 触发方式，支持多个值，用空格分隔。可选值包括：
          *
          * * `click`：点击时触发
-         * * `hover`：鼠标悬浮触发
+         * * `hover`：鼠标悬浮时触发
          * * `focus`：聚焦时触发
-         * * `manual`：使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式
+         * * `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式
          */
         this.trigger = 'hover focus';
         /**
@@ -149,10 +150,8 @@ let Tooltip = class Tooltip extends LitElement {
                 await this.updateComplete;
             }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -164,33 +163,36 @@ let Tooltip = class Tooltip extends LitElement {
                 easing,
             });
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
             return;
         }
         // 关闭
         if (!this.open && hasUpdated) {
-            const requestClose = emit(this, 'close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             await stopAnimations(this.popupRef.value);
             await animateTo(this.popupRef.value, [{ transform: 'scale(1)' }, { transform: 'scale(0)' }], { duration, easing });
             this.popupRef.value.hidden = true;
-            emit(this, 'closed');
+            this.emit('closed');
         }
     }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('pointerdown', this.onDocumentClick);
-        window.addEventListener('scroll', this.onWindowScroll);
+        this.overflowAncestors = getOverflowAncestors(this.target);
+        this.overflowAncestors.forEach((ancestor) => {
+            ancestor.addEventListener('scroll', this.onWindowScroll);
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
-        window.removeEventListener('scroll', this.onWindowScroll);
+        this.overflowAncestors?.forEach((ancestor) => {
+            ancestor.removeEventListener('scroll', this.onWindowScroll);
+        });
         this.observeResize?.unobserve();
     }
     firstUpdated(changedProperties) {

package/components/top-app-bar/top-app-bar-title.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-top-app-bar>` 组件配合使用
+ * @summary 顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用
  *
  * ```html
  * <mdui-top-app-bar>
@@ -13,12 +13,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * ```
  *
  * @slot - 顶部应用栏的标题文本
- * @slot label-large - 展开状态的标题文本
+ * @slot label-large - 展开状态下的标题文本
  *
- * @csspart label 文本内容
- * @csspart label-large 展开状态的文本内容
+ * @csspart label 标题文本
+ * @csspart label-large 展开状态下的标题文本
  */
-export declare class TopAppBarTitle extends LitElement {
+export declare class TopAppBarTitle extends MduiElement<TopAppBarTitleEventMap> {
     static styles: CSSResultGroup;
     /**
      * 顶部应用栏形状。由 mdui-top-app-bar 组件控制该参数
@@ -39,6 +39,8 @@ export declare class TopAppBarTitle extends LitElement {
      */
     private onSlotChange;
 }
+export interface TopAppBarTitleEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-top-app-bar-title': TopAppBarTitle;

package/components/top-app-bar/top-app-bar-title.js

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { getInnerHtmlFromSlot } from '@mdui/shared/helpers/slot.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { topAppBarTitleStyle } from './top-app-bar-title-style.js';
 /**
- * @summary 顶部应用栏标题组件。需与 `<mdui-top-app-bar>` 组件配合使用
+ * @summary 顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用
  *
  * ```html
  * <mdui-top-app-bar>
@@ -20,12 +21,12 @@ import { topAppBarTitleStyle } from './top-app-bar-title-style.js';
  * ```
  *
  * @slot - 顶部应用栏的标题文本
- * @slot label-large - 展开状态的标题文本
+ * @slot label-large - 展开状态下的标题文本
  *
- * @csspart label 文本内容
- * @csspart label-large 展开状态的文本内容
+ * @csspart label 标题文本
+ * @csspart label-large 展开状态下的标题文本
  */
-let TopAppBarTitle = class TopAppBarTitle extends LitElement {
+let TopAppBarTitle = class TopAppBarTitle extends MduiElement {
     constructor() {
         super(...arguments);
         /**

package/components/top-app-bar/top-app-bar.d.ts

@@ -22,13 +22,13 @@ declare const TopAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
-export declare class TopAppBar extends TopAppBar_base {
+export declare class TopAppBar extends TopAppBar_base<TopAppBarEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 顶部应用栏形状。默认为 `small`。可选值为：
+     * 顶部应用栏的形状。默认为 `small`。可选值包括：
      *
      * * `center-aligned`：小型应用栏，标题居中
      * * `small`：小型应用栏
@@ -41,11 +41,11 @@ export declare class TopAppBar extends TopAppBar_base {
      */
     hide: boolean;
     /**
-     * 是否缩小成 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
+     * 是否缩小为 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
      */
     shrink: boolean;
     /**
-     * 滚动行为。可同时使用多个值，多个值之间用空格分割。可选值为：
+     * 滚动行为。可同时使用多个值，用空格分隔。可选值包括：
      *
      * * `hide`：滚动时隐藏
      * * `shrink`：在中型、大型应用栏中可使用，滚动时缩小成小型应用栏的样式
@@ -66,6 +66,12 @@ export declare class TopAppBar extends TopAppBar_base {
     protected runScrollNoThreshold(isScrollingUp: boolean, scrollTop: number): void;
     protected runScrollThreshold(isScrollingUp: boolean, scrollTop: number): void;
 }
+export interface TopAppBarEventMap {
+    show: CustomEvent<void>;
+    shown: CustomEvent<void>;
+    hide: CustomEvent<void>;
+    hidden: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-top-app-bar': TopAppBar;

package/components/top-app-bar/top-app-bar.js

@@ -3,7 +3,6 @@ import { html } from 'lit';
 import { customElement, property, queryAssignedElements, } from 'lit/decorators.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 { 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';
@@ -27,14 +26,14 @@ import { topAppBarStyle } from './top-app-bar-style.js';
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
-         * 顶部应用栏形状。默认为 `small`。可选值为：
+         * 顶部应用栏的形状。默认为 `small`。可选值包括：
          *
          * * `center-aligned`：小型应用栏，标题居中
          * * `small`：小型应用栏
@@ -47,7 +46,7 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
          */
         this.hide = false;
         /**
-         * 是否缩小成 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
+         * 是否缩小为 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
          */
         this.shrink = false;
         /**
@@ -88,7 +87,7 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
         super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (e) => {
             if (e.target === this) {
-                emit(this, this.hide ? 'hidden' : 'shown');
+                this.emit(this.hide ? 'hidden' : 'shown');
             }
         });
     }
@@ -119,15 +118,15 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
         if (this.hasScrollBehavior('hide')) {
             // 向下滚动
             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;
                 }
             }