mdui 2.0.1 → 2.0.3

package/components/list/list-subheader.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
@@ -13,10 +13,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 文本
  */
-export declare class ListSubheader extends LitElement {
+export declare class ListSubheader extends MduiElement<ListSubheaderEventMap> {
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }
+export interface ListSubheaderEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list-subheader': ListSubheader;

package/components/list/list-subheader.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listSubheaderStyle } from './list-subheader-style.js';
 /**
@@ -16,7 +17,7 @@ import { listSubheaderStyle } from './list-subheader-style.js';
  *
  * @slot - 文本
  */
-export let ListSubheader = class ListSubheader extends LitElement {
+let ListSubheader = class ListSubheader extends MduiElement {
     render() {
         return html `<slot></slot>`;
     }
@@ -28,3 +29,4 @@ ListSubheader.styles = [
 ListSubheader = __decorate([
     customElement('mdui-list-subheader')
 ], ListSubheader);
+export { ListSubheader };

package/components/list/list.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
@@ -13,10 +13,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-list-item>` 元素
  */
-export declare class List extends LitElement {
+export declare class List extends MduiElement<ListEventMap> {
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }
+export interface ListEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-list': List;

package/components/list/list.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { listStyle } from './list-style.js';
 /**
@@ -16,7 +17,7 @@ import { listStyle } from './list-style.js';
  *
  * @slot - `<mdui-list-item>` 元素
  */
-export let List = class List extends LitElement {
+let List = class List extends MduiElement {
     render() {
         return html `<slot></slot>`;
     }
@@ -25,3 +26,4 @@ List.styles = [componentStyle, listStyle];
 List = __decorate([
     customElement('mdui-list')
 ], List);
+export { List };

package/components/menu/menu-item.d.ts

@@ -1,16 +1,16 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/innerHeight.js';
 import '@mdui/jq/methods/innerWidth.js';
 import '@mdui/jq/methods/width.js';
 import '@mdui/jq/static/contains.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/arrow-right.js';
 import '@mdui/shared/icons/check.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-declare const MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 菜单项组件
  *
@@ -44,7 +44,7 @@ declare const MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @csspart selected-icon - 选中状态的图标
  * @csspart submenu - 子菜单元素
  */
-export declare class MenuItem extends MenuItem_base {
+export declare class MenuItem extends MenuItem_base<MenuItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该菜单项的值
@@ -90,6 +90,7 @@ export declare class MenuItem extends MenuItem_base {
     private readonly containerRef;
     private readonly submenuRef;
     private readonly hasSlotController;
+    private readonly definedController;
     constructor();
     protected get focusDisabled(): boolean;
     protected get focusElement(): HTMLElement;
@@ -115,6 +116,14 @@ export declare class MenuItem extends MenuItem_base {
     private updateSubmenuPositioner;
     private renderInner;
 }
+export interface MenuItemEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    'submenu-open': CustomEvent<void>;
+    'submenu-opened': CustomEvent<void>;
+    'submenu-close': CustomEvent<void>;
+    'submenu-closed': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-menu-item': MenuItem;

package/components/menu/menu-item.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
@@ -12,11 +12,12 @@ import '@mdui/jq/methods/innerWidth.js';
 import '@mdui/jq/methods/width.js';
 import { isUndefined } from '@mdui/jq/shared/helper.js';
 import '@mdui/jq/static/contains.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 { 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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
@@ -61,7 +62,7 @@ import { menuItemStyle } from './menu-item-style.js';
  * @csspart selected-icon - 选中状态的图标
  * @csspart submenu - 子菜单元素
  */
-export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super();
         /**
@@ -72,11 +73,11 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
          * 是否打开子菜单
          */
         this.submenuOpen = false;
-        // 是否已选中该菜单项，由 mdui-menu 控制该参数
+        // 是否已选中该菜单项。由 <mdui-menu> 控制该参数
         this.selected = false;
-        // 由 mdui-menu 控制该参数
+        // 是否使用更紧凑的布局。由 <mdui-menu> 控制该参数
         this.dense = false;
-        // 是否可聚焦。由 mdui-menu 控制该参数
+        // 是否可聚焦。由 <mdui-menu> 控制该参数
         this.focusable = false;
         // 每一个 menu-item 元素都添加一个唯一的 key
         this.key = uniqueId();
@@ -84,6 +85,9 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
         this.containerRef = createRef();
         this.submenuRef = createRef();
         this.hasSlotController = new HasSlotController(this, '[default]', 'icon', 'end-icon', 'end-text', 'submenu', 'custom');
+        this.definedController = new DefinedController(this, {
+            relatedElements: [''],
+        });
         this.onOuterClick = this.onOuterClick.bind(this);
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
@@ -96,7 +100,7 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
         return this.disabled || !this.focusable;
     }
     get focusElement() {
-        return this.href ? this.containerRef.value : this;
+        return this.href && !this.disabled ? this.containerRef.value : this;
     }
     get rippleDisabled() {
         return this.disabled;
@@ -109,20 +113,23 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
     }
     async onOpenChange() {
         const hasUpdated = this.hasUpdated;
+        // 默认为关闭状态。因此首次渲染时，且为关闭状态，不执行
+        if (!this.submenuOpen && !hasUpdated) {
+            return;
+        }
+        await this.definedController.whenDefined();
+        if (!hasUpdated) {
+            await this.updateComplete;
+        }
         const easingLinear = getEasing(this, 'linear');
         const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
         const easingEmphasizedAccelerate = getEasing(this, 'emphasized-accelerate');
         // 打开
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.submenuOpen) {
-            if (!hasUpdated) {
-                await this.updateComplete;
-            }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'submenu-open', {
-                    cancelable: true,
-                });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('submenu-open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -141,16 +148,12 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
                 }),
             ]);
             if (hasUpdated) {
-                emit(this, 'submenu-opened');
+                this.emit('submenu-opened');
             }
-            return;
         }
-        // 关闭
-        if (!this.submenuOpen && hasUpdated) {
-            const requestClose = emit(this, 'submenu-close', {
-                cancelable: true,
-            });
-            if (requestClose.defaultPrevented) {
+        else {
+            const eventProceeded = this.emit('submenu-close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             const duration = getDuration(this, 'short4');
@@ -159,13 +162,17 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
                 animateTo(this.submenuRef.value, [{ transform: 'scaleY(1)' }, { transform: 'scaleY(0.45)' }], { duration, easing: easingEmphasizedAccelerate }),
                 animateTo(this.submenuRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.875 }, { opacity: 0 }], { duration, easing: easingLinear }),
             ]);
-            this.submenuRef.value.hidden = true;
-            emit(this, 'submenu-closed');
+            if (this.submenuRef.value) {
+                this.submenuRef.value.hidden = true;
+            }
+            this.emit('submenu-closed');
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('pointerdown', this.onOuterClick);
+        this.definedController.whenDefined().then(() => {
+            document.addEventListener('pointerdown', this.onOuterClick);
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -173,12 +180,14 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.addEventListener('focus', this.onFocus);
-        this.addEventListener('blur', this.onBlur);
-        this.addEventListener('click', this.onClick);
-        this.addEventListener('keydown', this.onKeydown);
-        this.addEventListener('mouseenter', this.onMouseEnter);
-        this.addEventListener('mouseleave', this.onMouseLeave);
+        this.definedController.whenDefined().then(() => {
+            this.addEventListener('focus', this.onFocus);
+            this.addEventListener('blur', this.onBlur);
+            this.addEventListener('click', this.onClick);
+            this.addEventListener('keydown', this.onKeydown);
+            this.addEventListener('mouseenter', this.onMouseEnter);
+            this.addEventListener('mouseleave', this.onMouseLeave);
+        });
     }
     render() {
         const hasSubmenu = this.hasSubmenu;
@@ -205,6 +214,7 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
                 className,
                 content: this.renderInner(useDefaultEndIcon, hasIcon),
                 refDirective: ref(this.containerRef),
+                tabIndex: this.focusable ? 0 : -1,
             })
             : html `<div part="container" ${ref(this.containerRef)} class="${className}">${this.renderInner(useDefaultEndIcon, hasIcon)}</div>`} ${when(hasSubmenu, () => html `<slot name="submenu" ${ref(this.submenuRef)} part="submenu" class="submenu" hidden></slot>`)}`;
     }
@@ -262,15 +272,16 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
     }
     onKeydown(event) {
         // 切换子菜单打开状态
-        if (!this.disabled && this.hasSubmenu) {
-            if (!this.submenuOpen && event.key === 'Enter') {
-                event.stopPropagation();
-                this.submenuOpen = true;
-            }
-            if (this.submenuOpen && event.key === 'Escape') {
-                event.stopPropagation();
-                this.submenuOpen = false;
-            }
+        if (this.disabled || !this.hasSubmenu) {
+            return;
+        }
+        if (!this.submenuOpen && event.key === 'Enter') {
+            event.stopPropagation();
+            this.submenuOpen = true;
+        }
+        if (this.submenuOpen && event.key === 'Escape') {
+            event.stopPropagation();
+            this.submenuOpen = false;
         }
     }
     onMouseEnter() {
@@ -298,6 +309,7 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
             this.submenuOpen = false;
         }, this.submenuCloseDelay || 50);
     }
+    // 更新子菜单的位置
     updateSubmenuPositioner() {
         const $window = $(window);
         const $submenu = $(this.submenuRef.value);
@@ -410,3 +422,4 @@ __decorate([
 MenuItem = __decorate([
     customElement('mdui-menu-item')
 ], MenuItem);
+export { MenuItem };

package/components/menu/menu.d.ts

@@ -1,4 +1,3 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/add.js';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/find.js';
@@ -6,6 +5,7 @@ import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
 import '@mdui/jq/methods/parent.js';
 import '@mdui/jq/methods/parents.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * 键盘快捷键：
@@ -30,7 +30,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Menu extends LitElement {
+export declare class Menu extends MduiElement<MenuEventMap> {
     static styles: CSSResultGroup;
     /**
      * 菜单项的可选中状态。默认为不可选中。可选值为：
@@ -71,8 +71,9 @@ export declare class Menu extends LitElement {
     submenuCloseDelay: number;
     private selectedKeys;
     private readonly childrenItems;
-    private hasSetDefaultValue;
+    private isInitial;
     private lastActiveItems;
+    private readonly definedController;
     private get items();
     private get itemsEnabled();
     private get isSingle();
@@ -95,6 +96,8 @@ export declare class Menu extends LitElement {
     blur(): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
+    private setSelectedKeys;
+    private setValue;
     private getSiblingsItems;
     private updateFocusable;
     private updateSelected;
@@ -104,6 +107,9 @@ export declare class Menu extends LitElement {
     private onClick;
     private onKeyDown;
 }
+export interface MenuEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-menu': Menu;