mdui 2.0.1 → 2.0.2

package/components/tooltip/index.d.ts

@@ -98,12 +98,16 @@ export declare class Tooltip extends LitElement {
      */
     open: boolean;
     private observeResize?;
-    private target;
     private hoverTimeout;
     private readonly popupRef;
     private readonly hasSlotController;
     private readonly hoverController;
+    private readonly definedController;
     constructor();
+    /**
+     * 获取第一个非 <style> 和 content slot 的子元素，作为 tooltip 的目标元素
+     */
+    private get target();
     private onPositionChange;
     private onOpenChange;
     connectedCallback(): void;
@@ -115,10 +119,6 @@ export declare class Tooltip extends LitElement {
      * 请求关闭 tooltip。鼠标未悬浮在 tooltip 上时，直接关闭；否则等鼠标移走再关闭
      */
     private requestClose;
-    /**
-     * 获取第一个非 <style> 和 content slot 的子元素，作为 tooltip 的目标元素
-     */
-    private getTarget;
     private hasTrigger;
     private onFocus;
     private onBlur;

package/components/tooltip/index.js

@@ -9,6 +9,7 @@ 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 { 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';
@@ -47,7 +48,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Tooltip = class Tooltip extends LitElement {
+let Tooltip = class Tooltip extends LitElement {
     constructor() {
         super();
         /**
@@ -107,6 +108,9 @@ export let Tooltip = class Tooltip extends LitElement {
         this.popupRef = createRef();
         this.hasSlotController = new HasSlotController(this, 'headline', 'action');
         this.hoverController = new HoverController(this, this.popupRef);
+        this.definedController = new DefinedController(this, {
+            needDomReady: true,
+        });
         this.onDocumentClick = this.onDocumentClick.bind(this);
         this.onWindowScroll = this.onWindowScroll.bind(this);
         this.onFocus = this.onFocus.bind(this);
@@ -116,8 +120,16 @@ export let Tooltip = class Tooltip extends LitElement {
         this.onMouseEnter = this.onMouseEnter.bind(this);
         this.onMouseLeave = this.onMouseLeave.bind(this);
     }
+    /**
+     * 获取第一个非 <style> 和 content slot 的子元素，作为 tooltip 的目标元素
+     */
+    get target() {
+        return [...this.children].find((el) => el.tagName.toLowerCase() !== 'style' &&
+            el.getAttribute('slot') !== 'content');
+    }
     async onPositionChange() {
         if (this.open) {
+            await this.definedController.whenDefined();
             this.updatePositioner();
         }
     }
@@ -128,6 +140,7 @@ export let Tooltip = class Tooltip extends LitElement {
         // 打开
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
         if (this.open) {
+            await this.definedController.whenDefined();
             // 先关闭页面中所有其他相同 variant 的 tooltip
             $(`mdui-tooltip[variant="${this.variant}"]`)
                 .filter((_, element) => element !== this)
@@ -167,36 +180,34 @@ export let Tooltip = class Tooltip extends LitElement {
             await animateTo(this.popupRef.value, [{ transform: 'scale(1)' }, { transform: 'scale(0)' }], { duration, easing });
             this.popupRef.value.hidden = true;
             emit(this, 'closed');
-            return;
         }
     }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('pointerdown', this.onDocumentClick);
         window.addEventListener('scroll', this.onWindowScroll);
-        // trigger 尺寸变化时，重新调整 tooltip 的位置
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.target, () => {
-                this.updatePositioner();
-            });
-        });
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onDocumentClick);
         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.target = this.getTarget();
-        this.target.addEventListener('focus', this.onFocus);
-        this.target.addEventListener('blur', this.onBlur);
-        this.target.addEventListener('pointerdown', this.onClick);
-        this.target.addEventListener('keydown', this.onKeydown);
-        this.target.addEventListener('mouseenter', this.onMouseEnter);
-        this.target.addEventListener('mouseleave', this.onMouseLeave);
+        this.definedController.whenDefined().then(() => {
+            const target = this.target;
+            target.addEventListener('focus', this.onFocus);
+            target.addEventListener('blur', this.onBlur);
+            target.addEventListener('pointerdown', this.onClick);
+            target.addEventListener('keydown', this.onKeydown);
+            target.addEventListener('mouseenter', this.onMouseEnter);
+            target.addEventListener('mouseleave', this.onMouseLeave);
+            // trigger 尺寸变化时，重新调整 tooltip 的位置
+            this.observeResize = observeResize(target, () => {
+                this.updatePositioner();
+            });
+        });
     }
     render() {
         const hasHeadline = this.isRich() &&
@@ -210,7 +221,7 @@ export let Tooltip = class Tooltip extends LitElement {
     /**
      * 请求关闭 tooltip。鼠标未悬浮在 tooltip 上时，直接关闭；否则等鼠标移走再关闭
      */
-    async requestClose() {
+    requestClose() {
         if (!this.hoverController.isHover) {
             this.open = false;
             return;
@@ -228,13 +239,6 @@ export let Tooltip = class Tooltip extends LitElement {
             }
         }, true);
     }
-    /**
-     * 获取第一个非 <style> 和 content slot 的子元素，作为 tooltip 的目标元素
-     */
-    getTarget() {
-        return [...this.children].find((el) => el.tagName.toLowerCase() !== 'style' &&
-            el.getAttribute('slot') !== 'content');
-    }
     hasTrigger(trigger) {
         const triggers = this.trigger.split(' ');
         return triggers.includes(trigger);
@@ -495,3 +499,4 @@ __decorate([
 Tooltip = __decorate([
     customElement('mdui-tooltip')
 ], Tooltip);
+export { Tooltip };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const topAppBarTitleStyle = css `:host{display:block;width:100%;flex-shrink:initial!important;overflow:hidden;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-title-large-size);font-weight:var(--mdui-typescale-title-large-weight);letter-spacing:var(--mdui-typescale-title-large-tracking);line-height:var(--mdui-typescale-title-large-line-height);line-height:2.5rem}.label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}:host([variant=center-aligned]) .label{text-align:center}:host([variant=large]:not([shrink])) .label,:host([variant=medium]:not([shrink])) .label{opacity:0}:host([variant=large][shrink]) .label,:host([variant=medium][shrink]) .label{transition-delay:var(--mdui-motion-duration-short2)}.label-large{display:none;position:absolute;width:100%;left:0;margin-right:0;padding:0 1rem;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}:host([variant=large]) .label-large,:host([variant=medium]) .label-large{display:block}:host([variant=medium]) .label-large{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;bottom:.75rem;font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}:host([variant=large]) .label-large{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;bottom:1.25rem;font-size:var(--mdui-typescale-headline-medium-size);font-weight:var(--mdui-typescale-headline-medium-weight);letter-spacing:var(--mdui-typescale-headline-medium-tracking);line-height:var(--mdui-typescale-headline-medium-line-height)}:host([variant=large]:not([shrink])) .label-large,:host([variant=medium]:not([shrink])) .label-large{opacity:1;transition-delay:var(--mdui-motion-duration-short2)}:host([variant=large][shrink]) .label-large,:host([variant=medium][shrink]) .label-large{opacity:0;z-index:-1}`;
+export const topAppBarTitleStyle = css `:host{display:block;width:100%;flex-shrink:initial!important;overflow:hidden;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-title-large-size);font-weight:var(--mdui-typescale-title-large-weight);letter-spacing:var(--mdui-typescale-title-large-tracking);line-height:var(--mdui-typescale-title-large-line-height);line-height:2.5rem}.label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label.variant-center-aligned{text-align:center}.label.variant-large:not(.shrink),.label.variant-medium:not(.shrink){opacity:0}.label.variant-large.shrink,.label.variant-medium.shrink{transition-delay:var(--mdui-motion-duration-short2)}.label-large{display:none;position:absolute;width:100%;left:0;margin-right:0;padding:0 1rem;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label-large.variant-large,.label-large.variant-medium{display:block}.label-large.variant-medium{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;bottom:.75rem;font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.label-large.variant-large{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;bottom:1.25rem;font-size:var(--mdui-typescale-headline-medium-size);font-weight:var(--mdui-typescale-headline-medium-weight);letter-spacing:var(--mdui-typescale-headline-medium-tracking);line-height:var(--mdui-typescale-headline-medium-line-height)}.label-large.variant-large:not(.shrink),.label-large.variant-medium:not(.shrink){opacity:1;transition-delay:var(--mdui-motion-duration-short2)}.label-large.variant-large.shrink,.label-large.variant-medium.shrink{opacity:0;z-index:-1}`;

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

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
-import { booleanConverter } from '@mdui/shared/helpers/decorator.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';
@@ -25,7 +25,7 @@ import { topAppBarTitleStyle } from './top-app-bar-title-style.js';
  * @csspart label 文本内容
  * @csspart label-large 展开状态的文本内容
  */
-export let TopAppBarTitle = class TopAppBarTitle extends LitElement {
+let TopAppBarTitle = class TopAppBarTitle extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -42,9 +42,16 @@ export let TopAppBarTitle = class TopAppBarTitle extends LitElement {
     }
     render() {
         const hasLabelLargeSlot = this.hasSlotController.test('label-large');
-        return html `<slot part="label" class="label" ${ref(this.defaultSlotRef)} @slotchange="${() => this.onSlotChange(hasLabelLargeSlot)}"></slot>${hasLabelLargeSlot
-            ? html `<slot name="label-large" part="label-large" class="label-large"></slot>`
-            : html `<div ${ref(this.labelLargeRef)} part="label-large" class="label-large"></div>`}`;
+        const className = classMap({
+            shrink: this.shrink,
+            'variant-center-aligned': this.variant === 'center-aligned',
+            'variant-small': this.variant === 'small',
+            'variant-medium': this.variant === 'medium',
+            'variant-large': this.variant === 'large',
+        });
+        return html `<slot part="label" class="label ${className}" ${ref(this.defaultSlotRef)} @slotchange="${() => this.onSlotChange(hasLabelLargeSlot)}"></slot>${hasLabelLargeSlot
+            ? html `<slot name="label-large" part="label-large" class="label-large ${className}"></slot>`
+            : html `<div ${ref(this.labelLargeRef)} part="label-large" class="label-large ${className}"></div>`}`;
     }
     /**
      * default slot 变化时，同步到 label-large 中
@@ -62,15 +69,12 @@ TopAppBarTitle.styles = [
     topAppBarTitleStyle,
 ];
 __decorate([
-    property({ reflect: true })
+    state()
 ], TopAppBarTitle.prototype, "variant", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], TopAppBarTitle.prototype, "shrink", void 0);
 TopAppBarTitle = __decorate([
     customElement('mdui-top-app-bar-title')
 ], TopAppBarTitle);
+export { TopAppBarTitle };

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

@@ -1,7 +1,7 @@
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const TopAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
 /**
  * @summary 顶部应用栏组件
@@ -61,7 +61,7 @@ export declare class TopAppBar extends TopAppBar_base {
     protected get layoutPlacement(): LayoutPlacement;
     private onVariantChange;
     private onShrinkChange;
-    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     protected runScrollNoThreshold(isScrollingUp: boolean, scrollTop: number): void;
     protected runScrollThreshold(isScrollingUp: boolean, scrollTop: number): void;

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

@@ -30,7 +30,7 @@ import { topAppBarStyle } from './top-app-bar-style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
+let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
@@ -64,7 +64,8 @@ export let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBas
     async onVariantChange() {
         if (this.hasUpdated) {
             // variant 变更时，重新为 scrollTargetContainer 元素添加 padding-top。避免 top-app-bar 覆盖内容
-            this.addEventListener('transitionend', () => {
+            this.addEventListener('transitionend', async () => {
+                await this.scrollBehaviorDefinedController.whenDefined();
                 this.updateContainerPadding();
             }, { once: true });
         }
@@ -83,8 +84,8 @@ export let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBas
             titleElement.shrink = this.shrink;
         });
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (e) => {
             if (e.target === this) {
                 emit(this, this.hide ? 'hidden' : 'shown');
@@ -176,3 +177,4 @@ __decorate([
 TopAppBar = __decorate([
     customElement('mdui-top-app-bar')
 ], TopAppBar);
+export { TopAppBar };