mdui 2.0.0 → 2.0.2

package/components/layout/helper.js

@@ -5,9 +5,8 @@ import '@mdui/jq/methods/get.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 export class LayoutManager {
-    constructor(element) {
+    constructor() {
         this.states = [];
-        this.$layout = $(element);
     }
     /**
      * 注册 `<mdui-layout-main>`
@@ -29,15 +28,9 @@ export class LayoutManager {
         this.states.push(state);
         // 监听元素尺寸变化
         state.observeResize = observeResize(state.element, () => {
-            // drawer 较特殊，在为模态化时，占据的宽度为 0
-            if (isNodeName(state.element, 'mdui-navigation-drawer') &&
-                // @ts-ignore
-                state.element.isModal) {
-                this.updateLayout(state.element, { width: 0 });
-            }
-            else {
-                this.updateLayout(state.element);
-            }
+            this.updateLayout(state.element, {
+                width: this.isNoWidth(state) ? 0 : undefined,
+            });
         });
         this.items = undefined;
         this.resort();
@@ -48,14 +41,13 @@ export class LayoutManager {
      * 取消注册 `<mdui-layout-item>`
      */
     unregisterItem(element) {
-        var _a;
         const index = this.states.findIndex((item) => item.element === element);
         if (index < 0) {
             return;
         }
         // 取消监听尺寸变化
         const item = this.states[index];
-        (_a = item.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        item.observeResize?.unobserve();
         this.items = undefined;
         // 移除一个元素，并从下一个元素开始更新
         this.states.splice(index, 1);
@@ -68,16 +60,19 @@ export class LayoutManager {
      */
     getItems() {
         if (!this.items) {
-            this.items = this.$layout
-                .children([
-                'mdui-navigation-bar',
-                'mdui-navigation-drawer',
-                'mdui-navigation-rail',
-                'mdui-bottom-app-bar',
-                'mdui-top-app-bar',
-                'mdui-layout-item',
-            ].join(','))
-                .get();
+            const items = this.states.map((state) => state.element);
+            this.items = items.sort((a, b) => {
+                const position = a.compareDocumentPosition(b);
+                if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+                    return -1;
+                }
+                else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            });
         }
         return this.items;
     }
@@ -93,12 +88,6 @@ export class LayoutManager {
     getItemsAndMain() {
         return [...this.getItems(), this.getMain()].filter((i) => i);
     }
-    /**
-     * 检查指定 `<mdui-layout-item>` 元素是否已注册
-     */
-    hasItem(element) {
-        return this.getItems().includes(element);
-    }
     /**
      * 更新 `order` 值，更新完后重新计算布局
      */
@@ -115,8 +104,8 @@ export class LayoutManager {
         const state = element
             ? {
                 element,
-                width: size === null || size === void 0 ? void 0 : size.width,
-                height: size === null || size === void 0 ? void 0 : size.height,
+                width: size?.width,
+                height: size?.height,
             }
             : undefined;
         const index = state
@@ -127,7 +116,6 @@ export class LayoutManager {
         }
         Object.assign(this.states[index], state);
         this.states.forEach((currState, currIndex) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (currIndex < index) {
                 return;
             }
@@ -135,24 +123,22 @@ export class LayoutManager {
             const placement = currState.element.layoutPlacement;
             // 前一个元素
             const prevState = currIndex > 0 ? this.states[currIndex - 1] : undefined;
-            const top = (_a = prevState === null || prevState === void 0 ? void 0 : prevState.top) !== null && _a !== void 0 ? _a : 0;
-            const right = (_b = prevState === null || prevState === void 0 ? void 0 : prevState.right) !== null && _b !== void 0 ? _b : 0;
-            const bottom = (_c = prevState === null || prevState === void 0 ? void 0 : prevState.bottom) !== null && _c !== void 0 ? _c : 0;
-            const left = (_d = prevState === null || prevState === void 0 ? void 0 : prevState.left) !== null && _d !== void 0 ? _d : 0;
+            const top = prevState?.top ?? 0;
+            const right = prevState?.right ?? 0;
+            const bottom = prevState?.bottom ?? 0;
+            const left = prevState?.left ?? 0;
             Object.assign(currState, { top, right, bottom, left });
             switch (placement) {
                 case 'top':
-                    currState.top += (_e = currState.height) !== null && _e !== void 0 ? _e : currState.element.offsetHeight;
-                    break;
-                case 'right':
-                    currState.right += (_f = currState.width) !== null && _f !== void 0 ? _f : currState.element.offsetWidth;
-                    break;
                 case 'bottom':
-                    currState.bottom +=
-                        (_g = currState.height) !== null && _g !== void 0 ? _g : currState.element.offsetHeight;
+                    currState[placement] +=
+                        currState.height ?? currState.element.offsetHeight;
                     break;
+                case 'right':
                 case 'left':
-                    currState.left += (_h = currState.width) !== null && _h !== void 0 ? _h : currState.element.offsetWidth;
+                    currState[placement] +=
+                        (this.isNoWidth(currState) ? 0 : currState.width) ??
+                            currState.element.offsetWidth;
                     break;
             }
             currState.height = currState.width = undefined;
@@ -181,9 +167,8 @@ export class LayoutManager {
     resort() {
         const items = this.getItems();
         this.states.sort((a, b) => {
-            var _a, _b;
-            const aOrder = (_a = a.element.order) !== null && _a !== void 0 ? _a : 0;
-            const bOrder = (_b = b.element.order) !== null && _b !== void 0 ? _b : 0;
+            const aOrder = a.element.order ?? 0;
+            const bOrder = b.element.order ?? 0;
             if (aOrder > bOrder) {
                 return 1;
             }
@@ -199,6 +184,15 @@ export class LayoutManager {
             return 0;
         });
     }
+    /**
+     * 组件宽度是否为 0
+     * mdui-navigation-drawer 较为特殊，在为模态化时，占据的宽度为 0
+     */
+    isNoWidth(state) {
+        return (isNodeName(state.element, 'mdui-navigation-drawer') &&
+            // @ts-ignore
+            state.element.isModal);
+    }
 }
 const layoutManagerMap = new WeakMap();
 /**
@@ -206,7 +200,7 @@ const layoutManagerMap = new WeakMap();
  */
 export const getLayout = (element) => {
     if (!layoutManagerMap.has(element)) {
-        layoutManagerMap.set(element, new LayoutManager(element));
+        layoutManagerMap.set(element, new LayoutManager());
     }
     return layoutManagerMap.get(element);
 };

package/components/layout/layout-item-base.js

@@ -18,8 +18,7 @@ export class LayoutItemBase extends LitElement {
     }
     // order 变更时，需要重新调整布局
     onOrderChange() {
-        var _a;
-        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateOrder();
+        this.layoutManager?.updateOrder();
     }
     connectedCallback() {
         super.connectedCallback();

package/components/layout/layout-item.js

@@ -18,7 +18,7 @@ import { layoutItemStyle } from './layout-item-style.js';
  *
  * @slot - 可以是任意内容
  */
-export let LayoutItem = class LayoutItem extends LayoutItemBase {
+let LayoutItem = class LayoutItem extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
@@ -36,8 +36,7 @@ export let LayoutItem = class LayoutItem extends LayoutItemBase {
     }
     // placement 变更时，需要重新调整布局
     onPlacementChange() {
-        var _a;
-        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateLayout(this);
+        this.layoutManager?.updateLayout(this);
     }
     render() {
         return html `<slot></slot>`;
@@ -56,3 +55,4 @@ __decorate([
 LayoutItem = __decorate([
     customElement('mdui-layout-item')
 ], LayoutItem);
+export { LayoutItem };

package/components/layout/layout-main.js

@@ -18,7 +18,7 @@ import { layoutMainStyle } from './layout-main-style.js';
  *
  * @slot - 可以是任意内容
  */
-export let LayoutMain = class LayoutMain extends LitElement {
+let LayoutMain = class LayoutMain extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         const parentElement = this.parentElement;
@@ -44,3 +44,4 @@ LayoutMain.styles = [
 LayoutMain = __decorate([
     customElement('mdui-layout-main')
 ], LayoutMain);
+export { LayoutMain };

package/components/layout/layout.js

@@ -17,7 +17,7 @@ import { layoutStyle } from './layout-style.js';
  *
  * @slot - 可以是 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
  */
-export let Layout = class Layout extends LitElement {
+let Layout = class Layout extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -41,3 +41,4 @@ __decorate([
 Layout = __decorate([
     customElement('mdui-layout')
 ], Layout);
+export { Layout };

package/components/linear-progress/index.js

@@ -16,7 +16,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let LinearProgress = class LinearProgress extends LitElement {
+let LinearProgress = class LinearProgress extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -25,12 +25,11 @@ export let LinearProgress = class LinearProgress extends LitElement {
         this.max = 1;
     }
     render() {
-        var _a;
         const isDeterminate = !isUndefined(this.value);
         if (isDeterminate) {
             const value = this.value;
             return html `<div part="indicator" class="determinate" style="${styleMap({
-                width: `${(value / Math.max((_a = this.max) !== null && _a !== void 0 ? _a : value, value)) * 100}%`,
+                width: `${(value / Math.max(this.max ?? value, value)) * 100}%`,
             })}"></div>`;
         }
         return html `<div part="indicator" class="indeterminate"></div>`;
@@ -46,3 +45,4 @@ __decorate([
 LinearProgress = __decorate([
     customElement('mdui-linear-progress')
 ], LinearProgress);
+export { LinearProgress };

package/components/list/list-item.js

@@ -43,7 +43,7 @@ import { listItemStyle } from './list-item-style.js';
  * @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-rounded - 指定了 `rounded` 时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -81,7 +81,7 @@ export let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMi
         return this.focusDisabled;
     }
     get focusElement() {
-        return this.href ? this.itemRef.value : this;
+        return this.href && !this.disabled ? this.itemRef.value : this;
     }
     get focusDisabled() {
         return this.href ? this.disabled : this.disabled || this.nonclickable;
@@ -184,3 +184,4 @@ __decorate([
 ListItem = __decorate([
     customElement('mdui-list-item')
 ], ListItem);
+export { ListItem };

package/components/list/list-subheader.js

@@ -16,7 +16,7 @@ import { listSubheaderStyle } from './list-subheader-style.js';
  *
  * @slot - 文本
  */
-export let ListSubheader = class ListSubheader extends LitElement {
+let ListSubheader = class ListSubheader extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
@@ -28,3 +28,4 @@ ListSubheader.styles = [
 ListSubheader = __decorate([
     customElement('mdui-list-subheader')
 ], ListSubheader);
+export { ListSubheader };

package/components/list/list.js

@@ -16,7 +16,7 @@ import { listStyle } from './list-style.js';
  *
  * @slot - `<mdui-list-item>` 元素
  */
-export let List = class List extends LitElement {
+let List = class List extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
@@ -25,3 +25,4 @@ List.styles = [componentStyle, listStyle];
 List = __decorate([
     customElement('mdui-list')
 ], List);
+export { List };

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

@@ -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;

package/components/menu/menu-item.js

@@ -12,6 +12,7 @@ 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 { 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';
@@ -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(LitElement))) {
     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,15 +113,20 @@ 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,
@@ -143,10 +152,8 @@ export let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMi
             if (hasUpdated) {
                 emit(this, 'submenu-opened');
             }
-            return;
         }
-        // 关闭
-        if (!this.submenuOpen && hasUpdated) {
+        else {
             const requestClose = emit(this, 'submenu-close', {
                 cancelable: true,
             });
@@ -159,13 +166,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;
+            if (this.submenuRef.value) {
+                this.submenuRef.value.hidden = true;
+            }
             emit(this, 'submenu-closed');
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('pointerdown', this.onOuterClick);
+        this.definedController.whenDefined().then(() => {
+            document.addEventListener('pointerdown', this.onOuterClick);
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -173,12 +184,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 +218,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 +276,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 +313,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 +426,4 @@ __decorate([
 MenuItem = __decorate([
     customElement('mdui-menu-item')
 ], MenuItem);
+export { MenuItem };

package/components/menu/menu.d.ts

@@ -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;