@mdui/shared 1.0.6 → 1.0.8

package/decorators/default-value.js

@@ -27,7 +27,7 @@ export function defaultValue(propertyName = 'value') {
                 const converter = options.converter || defaultConverter;
                 const fromAttribute = isFunction(converter)
                     ? converter
-                    : converter?.fromAttribute ?? defaultConverter.fromAttribute;
+                    : (converter?.fromAttribute ?? defaultConverter.fromAttribute);
                 const newValue = fromAttribute(value, options.type);
                 if (this[propertyName] !== newValue) {
                     this[key] = newValue;

package/helpers/decorator.d.ts

@@ -8,6 +8,9 @@
  * 但在 vue 的服务端渲染（ssr）时，不存在 DOM 对象，所以会把 attribute 属性设置成 attr="true" 或 attr="false"
  * 所以在 attribute 属性 attr="false" 时，需要把属性值转换为布尔值 false
  *
+ * 在 CSS 中选择布尔属性时，必须排除掉属性值为 false 的情况。i 表示不区分大小写。仅 public 属性需要这样处理，private 和 protected 属性不需要
+ * 例如：:host([hide]:not([hide="false" i])) { ... }
+ *
  * 这段代码不能封装成函数，否则生成 custom-elements.json 会识别不了
  * 这段注释仅在这里写一次，其他地方不再重复
  *

package/helpers/decorator.js

@@ -8,11 +8,14 @@
  * 但在 vue 的服务端渲染（ssr）时，不存在 DOM 对象，所以会把 attribute 属性设置成 attr="true" 或 attr="false"
  * 所以在 attribute 属性 attr="false" 时，需要把属性值转换为布尔值 false
  *
+ * 在 CSS 中选择布尔属性时，必须排除掉属性值为 false 的情况。i 表示不区分大小写。仅 public 属性需要这样处理，private 和 protected 属性不需要
+ * 例如：:host([hide]:not([hide="false" i])) { ... }
+ *
  * 这段代码不能封装成函数，否则生成 custom-elements.json 会识别不了
  * 这段注释仅在这里写一次，其他地方不再重复
  *
  * @see https://v3-migration.vuejs.org/zh/breaking-changes/attribute-coercion.html
  */
 export const booleanConverter = (value) => {
-    return value !== null && value !== 'false';
+    return value !== null && value.toLowerCase() !== 'false';
 };

package/mixin.less

@@ -348,21 +348,21 @@
 // @duration 为 short1、short2 等
 // @timing-function 为 standard、standard-accelerate、emphasized 等
 // @delay 可以为整数，表示毫秒；也可以为 short1、short2 等
-.transition(@property, @duration, @timing-function, @delay: 0) {
+.transition(@prop, @duration, @timing-function, @delay: 0) {
   @durationVariable: "--mdui-motion-duration-@{duration}";
   @timingFunctionVariable: "--mdui-motion-easing-@{timing-function}";
 
-  & when (@delay =0) {
-    transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable})";
+  & when (@delay = 0) {
+    transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable})";
   }
 
-  & when not (@delay =0) {
+  & when not (@delay = 0) {
     & when (isnumber(@delay)) {
-      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) @{delay}ms";
+      transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable}) @{delay}ms";
     }
 
     & when not (isnumber(@delay)) {
-      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) var(--mdui-motion-duration-@{delay})";
+      transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable}) var(--mdui-motion-duration-@{delay})";
     }
   }
 }

package/mixins/scrollBehavior.d.ts

@@ -10,7 +10,7 @@ export declare class ScrollBehaviorMixinInterface {
     scrollBehavior?: ScrollBehavior;
     scrollThreshold?: number;
     protected scrollBehaviorDefinedController: DefinedController;
-    protected updateContainerPadding(): void;
+    protected setContainerPadding(action: 'add' | 'update' | 'remove', scrollTarget?: string | HTMLElement | JQ<HTMLElement>): void;
     protected hasScrollBehavior(behavior: ScrollBehavior | ScrollBehavior[]): boolean;
 }
 /**

package/mixins/scrollBehavior.js

@@ -5,6 +5,11 @@ import '@mdui/jq/methods/css.js';
 import { isNodeName } from '@mdui/jq/shared/helper.js';
 import { DefinedController } from '../controllers/defined.js';
 import { watch } from '../decorators/watch.js';
+/**
+ * 如果同时有多个组件在同一个元素上设置了 padding-top 或 padding-bottom，则移除其中一个组件时，不移除 padding-top 或 padding-bottom
+ * 键为添加 padding 的目标元素，值为在分别在 top 和 bottom 上添加的组件数组
+ */
+const weakMap = new WeakMap();
 /**
  * 滚动行为
  *
@@ -43,10 +48,12 @@ export const ScrollBehaviorMixin = (superclass) => {
             throw new Error('Must implement scrollPaddingPosition getter');
         }
         async onScrollTargetChange(oldValue, newValue) {
+            const hasUpdated = this.hasUpdated;
             await this.scrollBehaviorDefinedController.whenDefined();
-            // 仅在有值切换到无值、或无值切换到有值时，更新
-            if ((oldValue && !newValue) || (!oldValue && newValue)) {
-                this.updateContainerPadding();
+            // 旧元素移除 padding，新元素添加 padding
+            if (hasUpdated) {
+                this.setContainerPadding('remove', oldValue);
+                this.setContainerPadding('add', newValue);
             }
             if (!this.scrollBehavior) {
                 return;
@@ -61,12 +68,8 @@ export const ScrollBehaviorMixin = (superclass) => {
                 newListening.addEventListener('scroll', this.onListeningScroll);
             }
         }
-        async onScrollBehaviorChange(oldValue, newValue) {
+        async onScrollBehaviorChange() {
             await this.scrollBehaviorDefinedController.whenDefined();
-            // 仅在有值切换到无值、或无值切换到有值时，更新
-            if ((oldValue && !newValue) || (!oldValue && newValue)) {
-                this.updateContainerPadding();
-            }
             const listening = this.getListening(this.scrollTarget);
             if (!listening) {
                 return;
@@ -83,13 +86,13 @@ export const ScrollBehaviorMixin = (superclass) => {
             super.connectedCallback();
             this.scrollBehaviorDefinedController.whenDefined().then(() => {
                 this.isParentLayout = isNodeName(this.parentElement, 'mdui-layout');
-                this.updateContainerPadding();
+                this.setContainerPadding('add', this.scrollTarget);
             });
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.scrollBehaviorDefinedController.whenDefined().then(() => {
-                this.updateContainerPadding(false);
+                this.setContainerPadding('remove', this.scrollTarget);
             });
         }
         /**
@@ -110,42 +113,58 @@ export const ScrollBehaviorMixin = (superclass) => {
         /**
          * 执行滚动事件，在滚动距离超过 scrollThreshold 时才会执行
          * Note: 父类可以按需实现该方法
-         * @param isScrollingUp 是否向上滚动
-         * @param scrollTop 距离 scrollTarget 顶部的距离
+         * @param _isScrollingUp 是否向上滚动
+         * @param _scrollTop 距离 scrollTarget 顶部的距离
          */
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        runScrollThreshold(isScrollingUp, scrollTop) {
+        runScrollThreshold(_isScrollingUp, _scrollTop) {
             return;
         }
         /**
          * 执行滚动事件，会无视 scrollThreshold，始终会执行
-         * @param isScrollingUp 是否向上滚动
-         * @param scrollTop 距离 scrollTarget 顶部的距离
+         * @param _isScrollingUp 是否向上滚动
+         * @param _scrollTop 距离 scrollTarget 顶部的距离
          */
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        runScrollNoThreshold(isScrollingUp, scrollTop) {
+        runScrollNoThreshold(_isScrollingUp, _scrollTop) {
             return;
         }
         /**
          * 更新滚动容器的 padding，避免内容被 navigation-bar 覆盖
-         * 仅 scrollBehavior 包含 hide、shrink 时，添加 padding
-         * @param withPadding 该值为 false 时，为移除 padding
+         * @param action 新增、更新、移除 padding
+         * @param scrollTarget 在该元素上添加、更新或移除 padding
          */
-        updateContainerPadding(withPadding = true) {
-            const container = this.getContainer(this.scrollTarget);
+        setContainerPadding(action, scrollTarget) {
+            const container = this.getContainer(scrollTarget);
             if (!container || this.isParentLayout) {
                 return;
             }
-            const propName = this.scrollPaddingPosition === 'top' ? 'paddingTop' : 'paddingBottom';
-            if (withPadding) {
-                const propValue = this.getListening(this.scrollTarget) &&
-                    ['fixed', 'absolute'].includes($(this).css('position'))
+            const position = this.scrollPaddingPosition;
+            const propName = position === 'top' ? 'paddingTop' : 'paddingBottom';
+            if (action === 'add' || action === 'update') {
+                const propValue = ['fixed', 'absolute'].includes($(this).css('position'))
                     ? this.offsetHeight
                     : null;
                 $(container).css({ [propName]: propValue });
+                // 添加 padding 时，weakMap 中添加指定元素
+                if (action === 'add' && propValue !== null) {
+                    const options = weakMap.get(container) ?? { top: [], bottom: [] };
+                    options[position].push(this);
+                    weakMap.set(container, options);
+                }
             }
-            else {
-                $(container).css({ [propName]: null });
+            // 如果 weakMap 中指定元素的计数为 0，则移除 padding
+            if (action === 'remove') {
+                const options = weakMap.get(container);
+                if (!options) {
+                    return;
+                }
+                const index = options[position].indexOf(this);
+                if (index > -1) {
+                    options[position].splice(index, 1);
+                    weakMap.set(container, options);
+                }
+                if (!options[position].length) {
+                    $(container).css({ [propName]: null });
+                }
             }
         }
         onListeningScroll() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdui/shared",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "mdui 项目的公共部分",
   "type": "module",
   "files": [
@@ -27,10 +27,10 @@
   },
   "homepage": "https://github.com/zdhxiong/mdui#readme",
   "dependencies": {
-    "@lit/reactive-element": "^2.0.4",
-    "lit": "^3.1.4",
-    "ssr-window": "^4.0.2",
-    "tslib": "^2.6.3",
-    "@mdui/jq": "^3.0.2"
+    "@lit/reactive-element": "^2.1.0",
+    "lit": "^3.3.0",
+    "ssr-window": "^5.0.0",
+    "tslib": "^2.8.1",
+    "@mdui/jq": "^3.0.3"
   }
 }