@mdui/shared 1.0.3 → 1.0.4

package/helpers/observeResize.js

@@ -16,17 +16,17 @@ export const observeResize = (target, callback) => {
     const result = {
         unobserve: () => {
             $target.each((_, target) => {
-                const coArr = weakMap.get(target) ?? [];
-                const index = coArr.findIndex((co) => co.key === key);
+                const options = weakMap.get(target);
+                const index = options.coArr.findIndex((co) => co.key === key);
                 if (index !== -1) {
-                    coArr.splice(index, 1);
+                    options.coArr.splice(index, 1);
                 }
-                if (!coArr.length) {
+                if (!options.coArr.length) {
                     observer.unobserve(target);
                     weakMap.delete(target);
                 }
                 else {
-                    weakMap.set(target, coArr);
+                    weakMap.set(target, options);
                 }
             });
         },
@@ -37,8 +37,9 @@ export const observeResize = (target, callback) => {
         observer = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
                 const target = entry.target;
-                const coArr = weakMap.get(target);
-                coArr.forEach((co) => {
+                const options = weakMap.get(target);
+                options.entry = entry;
+                options.coArr.forEach((co) => {
                     co.callback.call(result, entry, result);
                 });
             });
@@ -46,10 +47,14 @@ export const observeResize = (target, callback) => {
     }
     // 添加监听
     $target.each((_, target) => {
+        const options = weakMap.get(target) ?? { coArr: [] };
+        // 同一个元素已添加过监听后，再次添加新的监听时，不会立即执行回调函数，所以这里手动调用一次回调函数
+        if (options.coArr.length && options.entry) {
+            callback.call(result, options.entry, result);
+        }
+        options.coArr.push({ callback, key });
+        weakMap.set(target, options);
         observer.observe(target);
-        const coArr = weakMap.get(target) ?? [];
-        coArr.push({ callback, key });
-        weakMap.set(target, coArr);
     });
     return result;
 };

package/helpers/scroll.d.ts

@@ -10,15 +10,19 @@ import '@mdui/jq/methods/width.js';
  * @param fresh 是否重新计算
  */
 export declare const getScrollBarSize: (fresh?: boolean) => number;
+/**
+ * 判断指定元素当前是否有滚动条
+ */
+export declare const hasScrollbar: (target: HTMLElement) => boolean;
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export declare const lockScreen: (source: HTMLElement, target?: HTMLElement) => void;
 /**
  * 解除指定元素的滚动状态锁定。
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export declare const unlockScreen: (source: HTMLElement, target?: HTMLElement) => void;

package/helpers/scroll.js

@@ -47,33 +47,41 @@ export const getScrollBarSize = (fresh) => {
     }
     return scrollBarSizeCached;
 };
+/**
+ * 判断指定元素当前是否有滚动条
+ */
+export const hasScrollbar = (target) => {
+    return target.scrollHeight > target.clientHeight;
+};
 const lockMap = new WeakMap();
 const className = 'mdui-lock-screen';
 /**
  * 锁定指定元素，禁止滚动。对同一个元素多次调用此方法，只会锁定一次
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export const lockScreen = (source, target) => {
     const document = getDocument();
-    target ??= document.body;
+    target ??= document.documentElement;
     if (!lockMap.has(target)) {
         lockMap.set(target, new Set());
     }
     const lock = lockMap.get(target);
     lock.add(source);
-    $(target)
-        .addClass(className)
-        .css('width', `calc(100% - ${getScrollBarSize()}px)`);
+    const $target = $(target);
+    if (hasScrollbar(target)) {
+        $target.css('width', `calc(100% - ${getScrollBarSize()}px)`);
+    }
+    $target.addClass(className);
 };
 /**
  * 解除指定元素的滚动状态锁定。
  * @param source 由该元素触发锁定
- * @param target 锁定该元素的滚动状态，默认为 body
+ * @param target 锁定该元素的滚动状态，默认为 html
  */
 export const unlockScreen = (source, target) => {
     const document = getDocument();
-    target ??= document.body;
+    target ??= document.documentElement;
     const lock = lockMap.get(target);
     if (!lock) {
         return;

package/mixins/focusable.js

@@ -24,7 +24,7 @@ export const FocusableMixin = (superclass) => {
         constructor() {
             super(...arguments);
             /**
-             * 是否在页面加载完成后自动获得焦点
+             * 是否在页面加载完成后自动获取焦点
              */
             this.autofocus = false;
             /**
@@ -42,7 +42,7 @@ export const FocusableMixin = (superclass) => {
             this._tabIndex = 0;
         }
         /**
-         * 通过 Tab 键在元素之间切换焦点时，tabIndex 属性指定了元素获取焦点的顺序
+         * 元素在使用 Tab 键切换焦点时的顺序
          */
         get tabIndex() {
             const $this = $(this);
@@ -131,11 +131,11 @@ export const FocusableMixin = (superclass) => {
             }
         }
         /**
-         * 将焦点设置在当前元素。
+         * 将焦点设置到当前元素。
          *
-         * 可传入一个对象作为参数。对象属性为：
+         * 可以传入一个对象作为参数，该对象的属性包括：
          *
-         * * `preventScroll`：默认情况下，在聚焦后会滚动页面，以将聚焦的元素滚动到视图中。可将该属性设为 `true` 以阻止页面滚动。
+         * * `preventScroll`：默认情况下，元素获取焦点后，页面会滚动以将该元素滚动到视图中。如果不希望页面滚动，可以将此属性设置为 `true`。
          */
         focus(options) {
             if (this.focusDisabled || !this.focusElement) {
@@ -149,7 +149,7 @@ export const FocusableMixin = (superclass) => {
             }
         }
         /**
-         * 从当前元素中移除焦点
+         * 移除当前元素的焦点
          */
         blur() {
             if (this.focusElement !== this) {

package/mixins/scrollBehavior.js

@@ -48,6 +48,7 @@ export const ScrollBehaviorMixin = (superclass) => {
             if ((oldValue && !newValue) || (!oldValue && newValue)) {
                 this.updateContainerPadding();
             }
+            // @ts-ignore
             if (!this.scrollBehavior) {
                 return;
             }
@@ -71,6 +72,7 @@ export const ScrollBehaviorMixin = (superclass) => {
             if (!listening) {
                 return;
             }
+            // @ts-ignore
             if (this.scrollBehavior) {
                 this.updateScrollTop(listening);
                 listening.addEventListener('scroll', this.onListeningScroll);
@@ -98,6 +100,7 @@ export const ScrollBehaviorMixin = (superclass) => {
          * @param behavior 为数组时，只要其中一个行为在 scrollBehavior 中，即返回 `true`
          */
         hasScrollBehavior(behavior) {
+            // @ts-ignore
             const behaviors = (this.scrollBehavior?.split(' ') ??
                 []);
             if (Array.isArray(behavior)) {
@@ -193,9 +196,6 @@ export const ScrollBehaviorMixin = (superclass) => {
     __decorate([
         property({ attribute: 'scroll-target' })
     ], ScrollBehaviorMixinClass.prototype, "scrollTarget", void 0);
-    __decorate([
-        property({ reflect: true, attribute: 'scroll-behavior' })
-    ], ScrollBehaviorMixinClass.prototype, "scrollBehavior", void 0);
     __decorate([
         property({ type: Number, reflect: true, attribute: 'scroll-threshold' })
     ], ScrollBehaviorMixinClass.prototype, "scrollThreshold", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdui/shared",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "mdui 项目的公共部分",
   "type": "module",
   "files": [