mdui 2.0.0 → 2.0.2

package/components/dialog/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import '../icon.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 对话框组件
  *
@@ -83,9 +83,10 @@ export declare class Dialog extends LitElement {
     private readonly panelRef;
     private readonly bodyRef;
     private readonly hasSlotController;
+    private readonly definedController;
     private onOpenChange;
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     private onOverlayClick;
     private renderIcon;

package/components/dialog/index.js

@@ -4,6 +4,7 @@ import { customElement, property, queryAssignedElements, } from 'lit/decorators.
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.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';
@@ -48,7 +49,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Dialog = class Dialog extends LitElement {
+let Dialog = class Dialog extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -75,10 +76,17 @@ export let Dialog = class Dialog extends LitElement {
         this.panelRef = createRef();
         this.bodyRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'header', 'icon', 'headline', 'description', 'action', '[default]');
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-top-app-bar'],
+        });
     }
     async onOpenChange() {
-        var _a;
         const hasUpdated = this.hasUpdated;
+        // 默认为关闭状态。因此首次渲染时，且为关闭状态，不执行
+        if (!this.open && !hasUpdated) {
+            return;
+        }
+        await this.definedController.whenDefined();
         if (!hasUpdated) {
             await this.updateComplete;
         }
@@ -87,6 +95,11 @@ export let Dialog = class Dialog extends LitElement {
         const easingLinear = getEasing(this, 'linear');
         const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
         const easingEmphasizedAccelerate = getEasing(this, 'emphasized-accelerate');
+        const stopAnimation = () => Promise.all([
+            stopAnimations(this.overlayRef.value),
+            stopAnimations(this.panelRef.value),
+            ...children.map((child) => stopAnimations(child)),
+        ]);
         // 打开
         // 要区分是否首次渲染，首次渲染不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.open) {
@@ -100,7 +113,7 @@ export let Dialog = class Dialog extends LitElement {
             }
             this.style.display = 'flex';
             // 包含 <mdui-top-app-bar slot="header"> 时
-            const topAppBarElements = (_a = this.topAppBarElements) !== null && _a !== void 0 ? _a : [];
+            const topAppBarElements = this.topAppBarElements ?? [];
             if (topAppBarElements.length) {
                 const topAppBarElement = topAppBarElements[0];
                 // top-app-bar 未设置 scrollTarget 时，默认设置为 bodyRef
@@ -113,11 +126,7 @@ export let Dialog = class Dialog extends LitElement {
             this.originalTrigger = document.activeElement;
             this.modalHelper.activate();
             lockScreen(this);
-            await Promise.all([
-                stopAnimations(this.overlayRef.value),
-                stopAnimations(this.panelRef.value),
-                ...children.map((child) => stopAnimations(child)),
-            ]);
+            await stopAnimation();
             // 设置聚焦
             requestAnimationFrame(() => {
                 const autoFocusTarget = this.querySelector('[autofocus]');
@@ -158,9 +167,8 @@ export let Dialog = class Dialog extends LitElement {
             if (hasUpdated) {
                 emit(this, 'opened');
             }
-            return;
         }
-        if (!this.open && hasUpdated) {
+        else {
             const requestClose = emit(this, 'close', {
                 cancelable: true,
             });
@@ -168,11 +176,7 @@ export let Dialog = class Dialog extends LitElement {
                 return;
             }
             this.modalHelper.deactivate();
-            await Promise.all([
-                stopAnimations(this.overlayRef.value),
-                stopAnimations(this.panelRef.value),
-                ...children.map((child) => stopAnimations(child)),
-            ]);
+            await stopAnimation();
             const duration = getDuration(this, 'short4');
             await Promise.all([
                 animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], {
@@ -190,15 +194,18 @@ export let Dialog = class Dialog extends LitElement {
             unlockScreen(this);
             // 对话框关闭后，恢复焦点到原有的元素上
             const trigger = this.originalTrigger;
-            if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+            if (typeof trigger?.focus === 'function') {
                 setTimeout(() => trigger.focus());
             }
             emit(this, 'closed');
-            return;
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScreen(this);
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.modalHelper = new Modal(this);
         this.addEventListener('keydown', (event) => {
             if (this.open && this.closeOnEsc && event.key === 'Escape') {
@@ -207,10 +214,6 @@ export let Dialog = class Dialog extends LitElement {
             }
         });
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        unlockScreen(this);
-    }
     render() {
         const hasActionSlot = this.hasSlotController.test('action');
         const hasDefaultSlot = this.hasSlotController.test('[default]');
@@ -305,3 +308,4 @@ __decorate([
 Dialog = __decorate([
     customElement('mdui-dialog')
 ], Dialog);
+export { Dialog };

package/components/divider/index.js

@@ -11,7 +11,7 @@ import { style } from './style.js';
  * <mdui-divider></mdui-divider>
  * ```
  */
-export let Divider = class Divider extends LitElement {
+let Divider = class Divider extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -56,3 +56,4 @@ __decorate([
 Divider = __decorate([
     customElement('mdui-divider')
 ], Divider);
+export { Divider };

package/components/dropdown/index.d.ts

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
-import '@mdui/jq/methods/on.js';
 import '@mdui/jq/methods/width.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
@@ -84,8 +83,8 @@ export declare class Dropdown extends LitElement {
      * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
      */
     openOnPointer: boolean;
-    private readonly triggerSlots;
-    private readonly panelSlots;
+    private readonly triggerElements;
+    private readonly panelElements;
     private pointerOffsetX;
     private pointerOffsetY;
     private animateDirection;
@@ -93,9 +92,9 @@ export declare class Dropdown extends LitElement {
     private closeTimeout;
     private observeResize?;
     private readonly panelRef;
+    private readonly definedController;
     constructor();
-    private get triggerSlot();
-    private get panelSlot();
+    private get triggerElement();
     private onPositionChange;
     private onOpenChange;
     connectedCallback(): void;

package/components/dropdown/index.js

@@ -5,8 +5,9 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
 import '@mdui/jq/methods/is.js';
-import '@mdui/jq/methods/on.js';
 import '@mdui/jq/methods/width.js';
+import { isFunction } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.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';
@@ -41,7 +42,7 @@ import { style } from './style.js';
  *
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Dropdown = class Dropdown extends LitElement {
+let Dropdown = class Dropdown extends LitElement {
     constructor() {
         super();
         /**
@@ -97,6 +98,9 @@ export let Dropdown = class Dropdown extends LitElement {
          */
         this.openOnPointer = false;
         this.panelRef = createRef();
+        this.definedController = new DefinedController(this, {
+            relatedElements: [''],
+        });
         this.onDocumentClick = this.onDocumentClick.bind(this);
         this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
         this.onWindowScroll = this.onWindowScroll.bind(this);
@@ -107,31 +111,33 @@ export let Dropdown = class Dropdown extends LitElement {
         this.onMouseEnter = this.onMouseEnter.bind(this);
         this.onPanelClick = this.onPanelClick.bind(this);
     }
-    get triggerSlot() {
-        return this.triggerSlots[0];
-    }
-    get panelSlot() {
-        return this.panelSlots[0];
+    get triggerElement() {
+        return this.triggerElements[0];
     }
     // 这些属性变更时，需要更新样式
     async onPositionChange() {
-        // 打开动画开始前，设置 panel 的样式
+        // 如果是打开状态，则更新 panel 的位置
         if (this.open) {
+            await this.definedController.whenDefined();
             this.updatePositioner();
         }
     }
     async onOpenChange() {
-        var _a, _b, _c, _d;
         const hasUpdated = this.hasUpdated;
+        // 默认为关闭状态。因此首次渲染时，且为关闭状态，不执行
+        if (!this.open && !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.open) {
-            if (!hasUpdated) {
-                await this.updateComplete;
-            }
             if (hasUpdated) {
                 const requestOpen = emit(this, 'open', {
                     cancelable: true,
@@ -141,9 +147,10 @@ export let Dropdown = class Dropdown extends LitElement {
                 }
             }
             // dropdown 打开时，尝试把焦点放到 panel 中
-            if (typeof ((_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
-                this.panelSlot.focus();
-            }
+            const focusablePanel = this.panelElements.find((panel) => isFunction(panel.focus));
+            setTimeout(() => {
+                focusablePanel?.focus();
+            });
             const duration = getDuration(this, 'medium4');
             await stopAnimations(this.panelRef.value);
             this.panelRef.value.hidden = false;
@@ -164,10 +171,8 @@ export let Dropdown = class Dropdown extends LitElement {
             if (hasUpdated) {
                 emit(this, 'opened');
             }
-            return;
         }
-        // 关闭
-        if (!this.open && hasUpdated) {
+        else {
             const requestClose = emit(this, 'close', {
                 cancelable: true,
             });
@@ -176,10 +181,10 @@ export let Dropdown = class Dropdown extends LitElement {
             }
             // dropdown 关闭时，如果不支持 focus 触发，且焦点在 dropdown 内，则焦点回到 trigger 上
             if (!this.hasTrigger('focus') &&
-                typeof ((_b = this.triggerSlot) === null || _b === void 0 ? void 0 : _b.focus) === 'function' &&
+                isFunction(this.triggerElement?.focus) &&
                 (this.contains(document.activeElement) ||
-                    this.contains((_d = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.assignedSlot) !== null && _d !== void 0 ? _d : null))) {
-                this.triggerSlot.focus();
+                    this.contains(document.activeElement?.assignedSlot ?? null))) {
+                this.triggerElement.focus();
             }
             const duration = getDuration(this, 'short4');
             await stopAnimations(this.panelRef.value);
@@ -199,35 +204,35 @@ export let Dropdown = class Dropdown extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('pointerdown', this.onDocumentClick);
-        document.addEventListener('keydown', this.onDocumentKeydown);
-        window.addEventListener('scroll', this.onWindowScroll);
-        // triggerSlot 的尺寸变化时，重新调整 panel 的位置
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.triggerSlot, () => {
-                this.updatePositioner();
-            });
+        this.definedController.whenDefined().then(() => {
+            document.addEventListener('pointerdown', this.onDocumentClick);
+            document.addEventListener('keydown', this.onDocumentKeydown);
+            window.addEventListener('scroll', this.onWindowScroll);
         });
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
         document.removeEventListener('keydown', this.onDocumentKeydown);
         window.removeEventListener('scroll', this.onWindowScroll);
-        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.observeResize?.unobserve();
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('mouseleave', this.onMouseLeave);
-        this.triggerSlot.addEventListener('focus', this.onFocus);
-        this.triggerSlot.addEventListener('click', this.onClick);
-        this.triggerSlot.addEventListener('contextmenu', this.onContextMenu);
-        this.triggerSlot.addEventListener('mouseenter', this.onMouseEnter);
-        $(this.panelRef.value).on('click', this.onPanelClick);
+        this.definedController.whenDefined().then(() => {
+            this.triggerElement.addEventListener('focus', this.onFocus);
+            this.triggerElement.addEventListener('click', this.onClick);
+            this.triggerElement.addEventListener('contextmenu', this.onContextMenu);
+            this.triggerElement.addEventListener('mouseenter', this.onMouseEnter);
+            // triggerElement 的尺寸变化时，重新调整 panel 的位置
+            this.observeResize = observeResize(this.triggerElement, () => {
+                this.updatePositioner();
+            });
+        });
     }
     render() {
-        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden></slot>`;
+        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden @click="${this.onPanelClick}"></slot>`;
     }
     /**
      * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY
@@ -250,7 +255,7 @@ export let Dropdown = class Dropdown extends LitElement {
         // 当包含 contextmenu 且不包含 click 时，点击 trigger，关闭
         if (this.hasTrigger('contextmenu') &&
             !this.hasTrigger('click') &&
-            path.includes(this.triggerSlot)) {
+            path.includes(this.triggerElement)) {
             this.open = false;
         }
     }
@@ -258,7 +263,6 @@ export let Dropdown = class Dropdown extends LitElement {
      * 在 document 上按下按键时，根据条件判断是否要关闭 dropdown
      */
     onDocumentKeydown(event) {
-        var _a;
         if (this.disabled || !this.open) {
             return;
         }
@@ -270,8 +274,7 @@ export let Dropdown = class Dropdown extends LitElement {
         // 按下 Tab 键时，关闭 dropdown
         if (event.key === 'Tab') {
             // 如果不支持 focus 触发，则焦点回到 trigger 上（这个会在 onOpenChange 中执行 ）这里只需阻止默认的 Tab 行为
-            if (!this.hasTrigger('focus') &&
-                typeof ((_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
+            if (!this.hasTrigger('focus') && isFunction(this.triggerElement?.focus)) {
                 event.preventDefault();
             }
             this.open = false;
@@ -304,10 +307,9 @@ export let Dropdown = class Dropdown extends LitElement {
         this.open = !this.open;
     }
     onPanelClick(e) {
-        const event = e;
         if (!this.disabled &&
             !this.stayOpenOnClick &&
-            $(event.target).is('mdui-menu-item')) {
+            $(e.target).is('mdui-menu-item')) {
             this.open = false;
         }
     }
@@ -345,17 +347,19 @@ export let Dropdown = class Dropdown extends LitElement {
             this.open = false;
         }, this.closeDelay || 50);
     }
+    // 更新 panel 的位置
     updatePositioner() {
-        var _a;
         const $panel = $(this.panelRef.value);
         const $window = $(window);
-        const panelSlots = this.panelSlots;
+        const panelElements = this.panelElements;
         const panelRect = {
-            width: Math.max(...((_a = panelSlots === null || panelSlots === void 0 ? void 0 : panelSlots.map((panel) => panel.offsetWidth)) !== null && _a !== void 0 ? _a : [])),
-            height: panelSlots === null || panelSlots === void 0 ? void 0 : panelSlots.map((panel) => panel.offsetHeight).reduce((total, height) => total + height),
+            width: Math.max(...(panelElements?.map((panel) => panel.offsetWidth) ?? [])),
+            height: panelElements
+                ?.map((panel) => panel.offsetHeight)
+                .reduce((total, height) => total + height, 0),
         };
-        // 在光标位置触发时，假设 triggerSlot 的宽高为 0，位置位于光标位置
-        const triggerClientRect = this.triggerSlot.getBoundingClientRect();
+        // 在光标位置触发时，假设 triggerElement 的宽高为 0，位置位于光标位置
+        const triggerClientRect = this.triggerElement.getBoundingClientRect();
         const triggerRect = this.openOnPointer
             ? {
                 top: this.pointerOffsetY + triggerClientRect.top,
@@ -555,10 +559,10 @@ __decorate([
 ], Dropdown.prototype, "openOnPointer", void 0);
 __decorate([
     queryAssignedElements({ slot: 'trigger', flatten: true })
-], Dropdown.prototype, "triggerSlots", void 0);
+], Dropdown.prototype, "triggerElements", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })
-], Dropdown.prototype, "panelSlots", void 0);
+], Dropdown.prototype, "panelElements", void 0);
 __decorate([
     watch('placement', true),
     watch('openOnPointer', true)
@@ -569,3 +573,4 @@ __decorate([
 Dropdown = __decorate([
     customElement('mdui-dropdown')
 ], Dropdown);
+export { Dropdown };

package/components/fab/index.d.ts

@@ -53,6 +53,7 @@ export declare class Fab extends ButtonBase {
     extended: boolean;
     private readonly rippleRef;
     private readonly hasSlotController;
+    private readonly definedController;
     protected get rippleElement(): Ripple;
     /**
      * extended 变更时，设置动画

package/components/fab/index.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import cc from 'classcat';
+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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
@@ -34,7 +35,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Fab = class Fab extends ButtonBase {
+let Fab = class Fab extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -59,6 +60,9 @@ export let Fab = class Fab extends ButtonBase {
         this.extended = false;
         this.rippleRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'icon');
+        this.definedController = new DefinedController(this, {
+            relatedElements: [''],
+        });
     }
     get rippleElement() {
         return this.rippleRef.value;
@@ -68,15 +72,15 @@ export let Fab = class Fab extends ButtonBase {
      */
     async onExtendedChange() {
         const hasUpdated = this.hasUpdated;
-        if (!this.extended) {
-            this.style.width = '';
+        if (this.extended) {
+            this.style.width = `${this.scrollWidth}px`;
         }
         else {
-            this.style.width = `${this.scrollWidth}px`;
+            this.style.width = '';
         }
+        await this.definedController.whenDefined();
         await this.updateComplete;
         if (this.extended && !hasUpdated) {
-            await delay();
             this.style.width = `${this.scrollWidth}px`;
         }
         if (!hasUpdated) {
@@ -142,3 +146,4 @@ __decorate([
 Fab = __decorate([
     customElement('mdui-fab')
 ], Fab);
+export { Fab };

package/components/icon/index.js

@@ -17,7 +17,7 @@ import { style } from './style.js';
  *
  * @slot - `svg` 图标的内容
  */
-export let Icon = class Icon extends LitElement {
+let Icon = class Icon extends LitElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
@@ -55,3 +55,4 @@ __decorate([
 Icon = __decorate([
     customElement('mdui-icon')
 ], Icon);
+export { Icon };

package/components/layout/helper.d.ts

@@ -6,11 +6,9 @@ import type { LayoutMain } from './layout-main.js';
 import type { Layout } from './layout.js';
 export type LayoutPlacement = 'top' | 'left' | 'right' | 'bottom';
 export declare class LayoutManager {
-    private $layout;
     private $main?;
     private states;
     private items?;
-    constructor(element: Layout);
     /**
      * 注册 `<mdui-layout-main>`
      */
@@ -39,10 +37,6 @@ export declare class LayoutManager {
      * 获取 `<mdui-layout-item>` 及 `<mdui-layout-main>` 元素
      */
     getItemsAndMain(): (LayoutItemBase | LayoutMain)[];
-    /**
-     * 检查指定 `<mdui-layout-item>` 元素是否已注册
-     */
-    hasItem(element: LayoutItemBase): boolean;
     /**
      * 更新 `order` 值，更新完后重新计算布局
      */
@@ -60,6 +54,11 @@ export declare class LayoutManager {
      * 按 order 排序，order 相同时，按在 DOM 中的顺序排序
      */
     private resort;
+    /**
+     * 组件宽度是否为 0
+     * mdui-navigation-drawer 较为特殊，在为模态化时，占据的宽度为 0
+     */
+    private isNoWidth;
 }
 /**
  * 获取 layout 实例