mdui 1.0.2 → 2.0.0

package/components/list/list-subheader-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const listSubheaderStyle = css `:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`;

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @slot - 文本
+ */
+export declare class ListSubheader extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-list-subheader': ListSubheader;
+    }
+}

package/components/list/list-subheader.js

@@ -0,0 +1,30 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { listSubheaderStyle } from './list-subheader-style.js';
+/**
+ * @summary 列表标题组件。需与 `<mdui-list>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @slot - 文本
+ */
+export let ListSubheader = class ListSubheader extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ListSubheader.styles = [
+    componentStyle,
+    listSubheaderStyle,
+];
+ListSubheader = __decorate([
+    customElement('mdui-list-subheader')
+], ListSubheader);

package/components/list/list.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @slot - `<mdui-list-item>` 元素
+ */
+export declare class List extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-list': List;
+    }
+}

package/components/list/list.js

@@ -0,0 +1,27 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { listStyle } from './list-style.js';
+/**
+ * @summary 列表组件。需与 `<mdui-list-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-list>
+ * ..<mdui-list-subheader>Subheader</mdui-list-subheader>
+ * ..<mdui-list-item>Item 1</mdui-list-item>
+ * ..<mdui-list-item>Item 2</mdui-list-item>
+ * </mdui-list>
+ * ```
+ *
+ * @slot - `<mdui-list-item>` 元素
+ */
+export let List = class List extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+List.styles = [componentStyle, listStyle];
+List = __decorate([
+    customElement('mdui-list')
+], List);

package/components/list-item.d.ts

@@ -0,0 +1 @@
+export * from './list/list-item.js';

package/components/list-item.js

@@ -0,0 +1 @@
+export * from './list/list-item.js';

package/components/list-subheader.d.ts

@@ -0,0 +1 @@
+export * from './list/list-subheader.js';

package/components/list-subheader.js

@@ -0,0 +1 @@
+export * from './list/list-subheader.js';

package/components/list.d.ts

@@ -0,0 +1 @@
+export * from './list/list.js';

package/components/list.js

@@ -0,0 +1 @@
+export * from './list/list.js';

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

@@ -0,0 +1 @@
+export declare const menuItemStyle: import("lit").CSSResult;

package/components/menu/menu-item-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const menuItemStyle = css `:host{position:relative;display:block}:host([selected]){background-color:rgba(var(--mdui-color-primary),12%)}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}.preset{display:flex;align-items:center;text-decoration:none;height:3rem;padding:0 .75rem}.preset.dense{height:2rem}.label-container{flex:1 1 100%;min-width:0}.label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.end-icon,.end-text,.icon,.selected-icon{display:none;flex:0 0 auto;color:rgb(var(--mdui-color-on-surface-variant))}.has-end-icon .end-icon,.has-end-text .end-text,.has-icon .icon,.has-icon .selected-icon{display:flex}.end-icon,.icon,.selected-icon{font-size:1.5rem}.end-icon::slotted(mdui-avatar),.icon::slotted(mdui-avatar),.selected-icon::slotted(mdui-avatar){width:1.5rem;height:1.5rem}.dense .end-icon,.dense .icon,.dense .selected-icon{font-size:1.125rem}.dense .end-icon::slotted(mdui-avatar),.dense .icon::slotted(mdui-avatar),.dense .selected-icon::slotted(mdui-avatar){width:1.125rem;height:1.125rem}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}.end-text{font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon,.selected-icon{margin-right:.75rem}.end-icon,.end-text{margin-left:.75rem}.arrow-right{color:rgb(var(--mdui-color-on-surface))}.submenu{--shape-corner:var(--mdui-shape-corner-extra-small);display:block;position:absolute;z-index:1;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.submenu::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`;

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

@@ -0,0 +1,123 @@
+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 '@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;
+/**
+ * @summary 菜单项组件
+ *
+ * ```html
+ * <mdui-menu>
+ * ..<mdui-menu-item>Item 1</mdui-menu-item>
+ * ..<mdui-menu-item>Item 2</mdui-menu-item>
+ * </mdui-menu>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event submenu-open - 子菜单开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单打开
+ * @event submenu-opened - 子菜单打开动画完成时，事件被触发
+ * @event submenu-close - 子菜单开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单关闭
+ * @event submenu-closed - 子菜单关闭动画完成时，事件被触发
+ *
+ * @slot - 菜单项的文本
+ * @slot icon - 菜单项左侧图标
+ * @slot end-icon - 菜单项右侧图标
+ * @slot end-text - 菜单右侧的文本
+ * @slot selected-icon - 选中状态的图标
+ * @slot submenu - 子菜单
+ * @slot custom - 任意自定义内容
+ *
+ * @csspart container - 菜单项的容器
+ * @csspart icon - 左侧的图标
+ * @csspart label - 文本内容
+ * @csspart end-icon - 右侧的图标
+ * @csspart end-text - 右侧的文本
+ * @csspart selected-icon - 选中状态的图标
+ * @csspart submenu - 子菜单元素
+ */
+export declare class MenuItem extends MenuItem_base {
+    static styles: CSSResultGroup;
+    /**
+     * 该菜单项的值
+     */
+    value?: string;
+    /**
+     * 是否禁用该菜单项
+     */
+    disabled: boolean;
+    /**
+     * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     *
+     * 如果需要在左侧留出一个图标的位置，可以传入空字符串进行占位
+     */
+    icon?: string;
+    /**
+     * 右侧的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
+     */
+    endIcon?: string;
+    /**
+     * 右侧的文本。也可以通过 `slot="end-text"` 设置
+     */
+    endText?: string;
+    /**
+     * 选中状态的 Material Icons 图标名。也可以通过 `slot="selected-icon"` 设置
+     */
+    selectedIcon?: string;
+    /**
+     * 是否打开子菜单
+     */
+    submenuOpen: boolean;
+    protected selected: boolean;
+    protected dense: boolean;
+    protected selects?: 'single' | 'multiple';
+    protected submenuTrigger?: string;
+    protected submenuOpenDelay?: number;
+    protected submenuCloseDelay?: number;
+    protected focusable: boolean;
+    protected readonly key: number;
+    private submenuOpenTimeout;
+    private submenuCloseTimeout;
+    private readonly rippleRef;
+    private readonly containerRef;
+    private readonly submenuRef;
+    private readonly hasSlotController;
+    constructor();
+    protected get focusDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get rippleDisabled(): boolean;
+    protected get rippleElement(): Ripple;
+    private get hasSubmenu();
+    private onOpenChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+    /**
+     * 点击子菜单外面的区域，关闭子菜单
+     */
+    private onOuterClick;
+    private hasTrigger;
+    private onFocus;
+    private onBlur;
+    private onClick;
+    private onKeydown;
+    private onMouseEnter;
+    private onMouseLeave;
+    private updateSubmenuPositioner;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-menu-item': MenuItem;
+    }
+}
+export {};

package/components/menu/menu-item.js

@@ -0,0 +1,412 @@
+import { __decorate } from "tslib";
+import { html, LitElement } 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';
+import cc from 'classcat';
+import { $ } from '@mdui/jq/$.js';
+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 { isUndefined } from '@mdui/jq/shared/helper.js';
+import '@mdui/jq/static/contains.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';
+import '@mdui/shared/icons/arrow-right.js';
+import '@mdui/shared/icons/check.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { menuItemStyle } from './menu-item-style.js';
+/**
+ * @summary 菜单项组件
+ *
+ * ```html
+ * <mdui-menu>
+ * ..<mdui-menu-item>Item 1</mdui-menu-item>
+ * ..<mdui-menu-item>Item 2</mdui-menu-item>
+ * </mdui-menu>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event submenu-open - 子菜单开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单打开
+ * @event submenu-opened - 子菜单打开动画完成时，事件被触发
+ * @event submenu-close - 子菜单开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单关闭
+ * @event submenu-closed - 子菜单关闭动画完成时，事件被触发
+ *
+ * @slot - 菜单项的文本
+ * @slot icon - 菜单项左侧图标
+ * @slot end-icon - 菜单项右侧图标
+ * @slot end-text - 菜单右侧的文本
+ * @slot selected-icon - 选中状态的图标
+ * @slot submenu - 子菜单
+ * @slot custom - 任意自定义内容
+ *
+ * @csspart container - 菜单项的容器
+ * @csspart icon - 左侧的图标
+ * @csspart label - 文本内容
+ * @csspart end-icon - 右侧的图标
+ * @csspart end-text - 右侧的文本
+ * @csspart selected-icon - 选中状态的图标
+ * @csspart submenu - 子菜单元素
+ */
+export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+    constructor() {
+        super();
+        /**
+         * 是否禁用该菜单项
+         */
+        this.disabled = false;
+        /**
+         * 是否打开子菜单
+         */
+        this.submenuOpen = false;
+        // 是否已选中该菜单项，由 mdui-menu 控制该参数
+        this.selected = false;
+        // 由 mdui-menu 控制该参数
+        this.dense = false;
+        // 是否可聚焦。由 mdui-menu 控制该参数
+        this.focusable = false;
+        // 每一个 menu-item 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.rippleRef = createRef();
+        this.containerRef = createRef();
+        this.submenuRef = createRef();
+        this.hasSlotController = new HasSlotController(this, '[default]', 'icon', 'end-icon', 'end-text', 'submenu', 'custom');
+        this.onOuterClick = this.onOuterClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+        this.onClick = this.onClick.bind(this);
+        this.onKeydown = this.onKeydown.bind(this);
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
+    get focusDisabled() {
+        return this.disabled || !this.focusable;
+    }
+    get focusElement() {
+        return this.href ? this.containerRef.value : this;
+    }
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get hasSubmenu() {
+        return this.hasSlotController.test('submenu');
+    }
+    async onOpenChange() {
+        const hasUpdated = this.hasUpdated;
+        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) {
+                    return;
+                }
+            }
+            const duration = getDuration(this, 'medium4');
+            await stopAnimations(this.submenuRef.value);
+            this.submenuRef.value.hidden = false;
+            this.updateSubmenuPositioner();
+            await Promise.all([
+                animateTo(this.submenuRef.value, [{ transform: 'scaleY(0.45)' }, { transform: 'scaleY(1)' }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingEmphasizedDecelerate,
+                }),
+                animateTo(this.submenuRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.125 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }),
+            ]);
+            if (hasUpdated) {
+                emit(this, 'submenu-opened');
+            }
+            return;
+        }
+        // 关闭
+        if (!this.submenuOpen && hasUpdated) {
+            const requestClose = emit(this, 'submenu-close', {
+                cancelable: true,
+            });
+            if (requestClose.defaultPrevented) {
+                return;
+            }
+            const duration = getDuration(this, 'short4');
+            await stopAnimations(this.submenuRef.value);
+            await Promise.all([
+                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');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointerdown', this.onOuterClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointerdown', this.onOuterClick);
+    }
+    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);
+    }
+    render() {
+        const hasSubmenu = this.hasSubmenu;
+        const hasCustomSlot = this.hasSlotController.test('custom');
+        const hasEndIconSlot = this.hasSlotController.test('end-icon');
+        const useDefaultEndIcon = !this.endIcon && hasSubmenu && !hasEndIconSlot;
+        const hasEndIcon = this.endIcon || hasSubmenu || hasEndIconSlot;
+        const hasIcon = !isUndefined(this.icon) ||
+            this.selects === 'single' ||
+            this.selects === 'multiple' ||
+            this.hasSlotController.test('icon');
+        const hasEndText = !!this.endText || this.hasSlotController.test('end-text');
+        const className = cc({
+            container: true,
+            dense: this.dense,
+            preset: !hasCustomSlot,
+            'has-icon': hasIcon,
+            'has-end-text': hasEndText,
+            'has-end-icon': hasEndIcon,
+        });
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled
+            ? this.renderAnchor({
+                part: 'container',
+                className,
+                content: this.renderInner(useDefaultEndIcon, hasIcon),
+                refDirective: ref(this.containerRef),
+            })
+            : 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>`)}`;
+    }
+    /**
+     * 点击子菜单外面的区域，关闭子菜单
+     */
+    onOuterClick(event) {
+        if (!this.disabled &&
+            this.submenuOpen &&
+            this !== event.target &&
+            !$.contains(this, event.target)) {
+            this.submenuOpen = false;
+        }
+    }
+    hasTrigger(trigger) {
+        return this.submenuTrigger
+            ? this.submenuTrigger.split(' ').includes(trigger)
+            : false;
+    }
+    onFocus() {
+        if (this.disabled ||
+            this.submenuOpen ||
+            !this.hasTrigger('focus') ||
+            !this.hasSubmenu) {
+            return;
+        }
+        this.submenuOpen = true;
+    }
+    onBlur() {
+        if (this.disabled ||
+            !this.submenuOpen ||
+            !this.hasTrigger('focus') ||
+            !this.hasSubmenu) {
+            return;
+        }
+        this.submenuOpen = false;
+    }
+    onClick(event) {
+        // e.button 为 0 时，为鼠标左键点击。忽略鼠标中间和右键
+        if (this.disabled || event.button) {
+            return;
+        }
+        // 切换子菜单打开状态
+        if (!this.hasTrigger('click') ||
+            event.target !== this ||
+            !this.hasSubmenu) {
+            return;
+        }
+        // 支持 hover 和 focus 触发时，点击菜单项不关闭子菜单
+        if (this.submenuOpen &&
+            (this.hasTrigger('hover') || this.hasTrigger('focus'))) {
+            return;
+        }
+        this.submenuOpen = !this.submenuOpen;
+    }
+    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;
+            }
+        }
+    }
+    onMouseEnter() {
+        // 不做 submenuOpen 的判断，因为可以延时打开和关闭
+        if (this.disabled || !this.hasTrigger('hover') || !this.hasSubmenu) {
+            return;
+        }
+        window.clearTimeout(this.submenuCloseTimeout);
+        if (this.submenuOpenDelay) {
+            this.submenuOpenTimeout = window.setTimeout(() => {
+                this.submenuOpen = true;
+            }, this.submenuOpenDelay);
+        }
+        else {
+            this.submenuOpen = true;
+        }
+    }
+    onMouseLeave() {
+        // 不做 submenuOpen 的判断，因为可以延时打开和关闭
+        if (this.disabled || !this.hasTrigger('hover') || !this.hasSubmenu) {
+            return;
+        }
+        window.clearTimeout(this.submenuOpenTimeout);
+        this.submenuCloseTimeout = window.setTimeout(() => {
+            this.submenuOpen = false;
+        }, this.submenuCloseDelay || 50);
+    }
+    updateSubmenuPositioner() {
+        const $window = $(window);
+        const $submenu = $(this.submenuRef.value);
+        const itemRect = this.getBoundingClientRect();
+        const submenuWidth = $submenu.innerWidth();
+        const submenuHeight = $submenu.innerHeight();
+        const screenMargin = 8; // 子菜单与屏幕界至少保留 8px 间距
+        let placementX = 'bottom';
+        let placementY = 'right';
+        // 判断子菜单上下位置
+        if ($window.height() - itemRect.top > submenuHeight + screenMargin) {
+            placementX = 'bottom';
+        }
+        else if (itemRect.top + itemRect.height > submenuHeight + screenMargin) {
+            placementX = 'top';
+        }
+        // 判断子菜单左右位置
+        if ($window.width() - itemRect.left - itemRect.width >
+            submenuWidth + screenMargin) {
+            placementY = 'right';
+        }
+        else if (itemRect.left > submenuWidth + screenMargin) {
+            placementY = 'left';
+        }
+        $(this.submenuRef.value).css({
+            top: placementX === 'bottom' ? 0 : itemRect.height - submenuHeight,
+            left: placementY === 'right' ? itemRect.width : -submenuWidth,
+            transformOrigin: [
+                placementY === 'right' ? 0 : '100%',
+                placementX === 'bottom' ? 0 : '100%',
+            ].join(' '),
+        });
+    }
+    renderInner(useDefaultEndIcon, hasIcon) {
+        return html `<slot name="custom">${this.selected
+            ? html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon
+                ? html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`
+            : html `<slot name="icon" part="icon" class="icon">${hasIcon
+                ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+                : nothingTemplate}</slot>`}<div class="label-container"><slot part="label" class="label"></slot></div><slot name="end-text" part="end-text" class="end-text">${this.endText}</slot>${useDefaultEndIcon
+            ? html `<mdui-icon-arrow-right part="end-icon" class="end-icon arrow-right"></mdui-icon-arrow-right>`
+            : html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+                ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
+                : nothingTemplate}</slot>`}</slot>`;
+    }
+};
+MenuItem.styles = [
+    componentStyle,
+    menuItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], MenuItem.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MenuItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-icon' })
+], MenuItem.prototype, "endIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-text' })
+], MenuItem.prototype, "endText", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'selected-icon' })
+], MenuItem.prototype, "selectedIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'submenu-open',
+    })
+], MenuItem.prototype, "submenuOpen", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], MenuItem.prototype, "selected", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "dense", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "selects", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "submenuTrigger", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "submenuOpenDelay", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "submenuCloseDelay", void 0);
+__decorate([
+    state()
+], MenuItem.prototype, "focusable", void 0);
+__decorate([
+    watch('submenuOpen')
+], MenuItem.prototype, "onOpenChange", null);
+MenuItem = __decorate([
+    customElement('mdui-menu-item')
+], MenuItem);

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

@@ -0,0 +1 @@
+export declare const menuStyle: import("lit").CSSResult;