mdui 2.1.2 → 2.1.4

package/components/tooltip/index.js

@@ -62,7 +62,7 @@ let Tooltip = class Tooltip extends MduiElement {
         /**
          * tooltip 的位置。默认为 `auto`。可选值包括：
          *
-         * * `auto`：自动判断位置。`variant="plan"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
+         * * `auto`：自动判断位置。`variant="plain"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
          * * `top-left`：位于左上方
          * * `top-start`：位于上方，左对齐
          * * `top`：位于上方，居中对齐
@@ -182,9 +182,15 @@ let Tooltip = class Tooltip extends MduiElement {
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('pointerdown', this.onDocumentClick);
-        this.overflowAncestors = getOverflowAncestors(this.target);
-        this.overflowAncestors.forEach((ancestor) => {
-            ancestor.addEventListener('scroll', this.onWindowScroll);
+        this.definedController.whenDefined().then(() => {
+            this.overflowAncestors = getOverflowAncestors(this.target);
+            this.overflowAncestors.forEach((ancestor) => {
+                ancestor.addEventListener('scroll', this.onWindowScroll);
+            });
+            // trigger 尺寸变化时，重新调整 tooltip 的位置
+            this.observeResize = observeResize(this.target, () => {
+                this.updatePositioner();
+            });
         });
     }
     disconnectedCallback() {
@@ -205,10 +211,6 @@ let Tooltip = class Tooltip extends MduiElement {
             target.addEventListener('keydown', this.onKeydown);
             target.addEventListener('mouseenter', this.onMouseEnter);
             target.addEventListener('mouseleave', this.onMouseLeave);
-            // trigger 尺寸变化时，重新调整 tooltip 的位置
-            this.observeResize = observeResize(target, () => {
-                this.updatePositioner();
-            });
         });
     }
     render() {

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const topAppBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;right:0;left:0;display:flex;flex:0 0 auto;align-items:flex-start;justify-content:flex-start;border-bottom-left-radius:var(--shape-corner);border-bottom-right-radius:var(--shape-corner);z-index:var(--z-index);transition:top var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear),background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);padding:.75rem .5rem;height:4rem;background-color:rgb(var(--mdui-color-surface))}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([scroll-behavior~=shrink]){transition-duration:var(--mdui-motion-duration-short4)}:host([scrolling]){background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}::slotted(mdui-button-icon){color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}::slotted(mdui-button-icon:first-child){color:rgb(var(--mdui-color-on-surface))}::slotted(mdui-avatar){width:1.875rem;height:1.875rem;margin-top:.3125rem;margin-bottom:.3125rem}::slotted(*){flex-shrink:0}::slotted(:not(:last-child)){margin-right:.5rem}:host([variant=medium]){height:7rem}:host([variant=large]){height:9.5rem}:host([hide]){transition-duration:var(--mdui-motion-duration-short4);top:-4.625rem}:host([hide][variant=medium]){top:-7.625rem}:host([hide][variant=large]){top:-10.125rem}:host([shrink][variant=large]),:host([shrink][variant=medium]){transition-duration:var(--mdui-motion-duration-short4);height:4rem}`;
+export const topAppBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;right:0;left:0;display:flex;flex:0 0 auto;align-items:flex-start;justify-content:flex-start;border-bottom-left-radius:var(--shape-corner);border-bottom-right-radius:var(--shape-corner);z-index:var(--z-index);transition:top var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear),background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);padding:.75rem .5rem;height:4rem;background-color:rgb(var(--mdui-color-surface))}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([scroll-behavior~=shrink]){transition-duration:var(--mdui-motion-duration-short4)}:host([scrolling]){background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}::slotted(mdui-button-icon){color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}::slotted(mdui-button-icon:first-child){color:rgb(var(--mdui-color-on-surface))}::slotted(mdui-avatar){width:1.875rem;height:1.875rem;margin-top:.3125rem;margin-bottom:.3125rem}::slotted(*){flex-shrink:0}::slotted(:not(:last-child)){margin-right:.5rem}:host([variant=medium]){height:7rem}:host([variant=large]){height:9.5rem}:host([hide]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);top:-4.625rem}:host([hide][variant=medium]:not([hide=false i])){top:-7.625rem}:host([hide][variant=large]:not([hide=false i])){top:-10.125rem}:host([shrink][variant=large]:not([shrink=false i])),:host([shrink][variant=medium]:not([shrink=false i])){transition-duration:var(--mdui-motion-duration-short4);height:4rem}`;

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

@@ -57,6 +57,7 @@ export declare class TopAppBar extends TopAppBar_base<TopAppBarEventMap> {
      */
     private scrolling;
     private readonly titleElements;
+    private definedController;
     protected get scrollPaddingPosition(): ScrollPaddingPosition;
     protected get layoutPlacement(): LayoutPlacement;
     private onVariantChange;

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -53,6 +54,9 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
          * 滚动条是否不位于顶部
          */
         this.scrolling = false;
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-top-app-bar-title'],
+        });
     }
     get scrollPaddingPosition() {
         return 'top';
@@ -65,12 +69,13 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
             // variant 变更时，重新为 scrollTargetContainer 元素添加 padding-top。避免 top-app-bar 覆盖内容
             this.addEventListener('transitionend', async () => {
                 await this.scrollBehaviorDefinedController.whenDefined();
-                this.updateContainerPadding();
+                this.setContainerPadding('update', this.scrollTarget);
             }, { once: true });
         }
         else {
             await this.updateComplete;
         }
+        await this.definedController.whenDefined();
         this.titleElements.forEach((titleElement) => {
             titleElement.variant = this.variant;
         });
@@ -79,6 +84,7 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
         if (!this.hasUpdated) {
             await this.updateComplete;
         }
+        await this.definedController.whenDefined();
         this.titleElements.forEach((titleElement) => {
             titleElement.shrink = this.shrink;
         });