snail.view 1.0.21 → 1.0.23

package/.code-snippets

@@ -10,16 +10,6 @@
 			"@import \"snail.view/dist/styles/base-mixins.less\";"
 		]
 	},
-	// *****************************************   👉  所有元素    *****************************************
-	".*-box-sizing": {
-		"prefix": ".*-box-sizing",
-		"scope": "less",
-		"description": "所有元素的box-sizing属性设置为border-box",
-		"body": [
-			"//  所有元素的box-sizing属性设置为border-box",
-			".\\*-box-sizing();",
-		]
-	},
 	// *****************************************   👉  文本样式    *****************************************
 	"text-ellipsis": {
 		"prefix": ".text-ellipsis",
@@ -76,6 +66,24 @@
 			".left-top-center();"
 		]
 	},
+	"absolute-fill": {
+		"prefix": ".absolute-fill",
+		"scope": "less",
+		"description": "绝对定位，填充父元素，并定位到0,0位置",
+		"body": [
+			"//  绝对定位，填充父元素，并定位到0,0位置",
+			".absolute-fill();"
+		]
+	},
+	"absolute-fill-hidden": {
+		"prefix": ".absolute-fill-hidden",
+		"scope": "less",
+		"description": "绝对定位，填充父元素，隐藏溢出的内容，并定位到0,0位置",
+		"body": [
+			"//  绝对定位，填充父元素，隐藏溢出的内容，并定位到0,0位置",
+			".absolute-fill-hidden();"
+		]
+	},
 	// *****************************************   👉  弹性盒子    *****************************************"
 	"flex-main-center": {
 		"prefix": ".flex-main-center",

package/dist/snail.view.d.ts

@@ -506,6 +506,17 @@ interface IObserver {
      * @returns 作用域，可销毁监听
      */
     onClient(el: Element, fn: (rect: DOMRectReadOnly) => void): IScope;
+    /**
+     * 监听元素的突变
+     *  - 通过options配置支持元素自身属性、子元素、子元素属性等；如支持子元素发生变化时（添加、删除、属性变化）等
+     *  - 内部通过 MutationObserver 实现；详细参照：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
+     * - scope销毁时自动移除监听
+     * @param el 监听元素
+     * @param options  配置选项，监听元素的哪些变化
+     * @param fn 回调方法
+     * @returns 作用域，可销毁监听
+     */
+    onMutation(el: Element, options: MutationObserverInit, fn: (record: MutationRecord[], observer: MutationObserver) => void): IScope;
 }
 /**
  * 元素尺寸

package/dist/snail.view.js

@@ -1,5 +1,5 @@
 //@ sourceURL=/snail.view.js
-import { checkScope, throwIfFalse, useKeyScope, isArrayNotEmpty, isStringNotEmpty, isObject, useScopes, mountScope, extract, hasOwnProperty, tidyString, event, mustString, version, useScope, run, mustFunction } from 'snail.core';
+import { checkScope, throwIfFalse, useKeyScope, isArrayNotEmpty, isStringNotEmpty, isObject, useScopes, mountScope, extract, hasOwnProperty, tidyString, event, mustString, version, useScope, mustFunction, run } from 'snail.core';
 
 function getAnimationScope(manager, el) {
   checkScope(manager, "getAnimationScope: manager destroyed.");
@@ -303,10 +303,19 @@ function useObserver() {
     }, 100);
     return scope.onDestroy(() => clearInterval(timer));
   }
+  function onMutation(el, options, fn) {
+    checkScope(manager, "onClient: observer destroyed.");
+    throwIfFalse(el instanceof Element, "onClient: el must be a Element.");
+    mustFunction(fn, "onMutation: fn");
+    const observe = new MutationObserver(fn);
+    observe.observe(el, options);
+    return scopes.get().onDestroy(() => observe.disconnect());
+  }
   const manager = mountScope({
     onEvent,
     onSize,
-    onClient
+    onClient,
+    onMutation
   }, "IObserver");
   manager.onDestroy(scopes.destroy);
   return Object.freeze(manager);

package/dist/snail.view.umd.js

@@ -307,10 +307,19 @@
         }, 100);
         return scope.onDestroy(() => clearInterval(timer));
       }
+      function onMutation(el, options, fn) {
+        snail_core.checkScope(manager, "onClient: observer destroyed.");
+        snail_core.throwIfFalse(el instanceof Element, "onClient: el must be a Element.");
+        snail_core.mustFunction(fn, "onMutation: fn");
+        const observe = new MutationObserver(fn);
+        observe.observe(el, options);
+        return scopes.get().onDestroy(() => observe.disconnect());
+      }
       const manager = snail_core.mountScope({
         onEvent,
         onSize,
-        onClient
+        onClient,
+        onMutation
       }, "IObserver");
       manager.onDestroy(scopes.destroy);
       return Object.freeze(manager);

package/dist/styles/base-mixins.less

@@ -27,9 +27,9 @@
 
 //  高度、宽度100%填充满，隐藏溢出的内容
 .wh-fill-hidden() {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
+    //  width:100%；height:100%
+    .wh-fill();
 }
 
 //  left、top起始位置：left: 0; top: 0;
@@ -45,6 +45,21 @@
     transform: translate(-50%, -50%);
 }
 
+//  绝对定位，填充父元素，并定位到0,0位置
+.absolute-fill() {
+    position: absolute;
+    //  width:100%；height:100%
+    .wh-fill();
+    //  left、top起始位置：left: 0; top: 0
+    .left-top-start();
+}
+
+//  绝对定位，填充父元素，隐藏溢出的内容，并定位到0,0位置
+.absolute-fill-hidden() {
+    .absolute-fill();
+    overflow: hidden;
+}
+
 // *****************************************   👉  弹性盒子    *****************************************
 //  flex 布局，主轴居中
 .flex-main-center() {

package/package.json

@@ -3,7 +3,7 @@
     "description": "对视图界面做的一些封装。如样式计算助手方法，常用样式less混入、变量等；dom相关助手类",
     "author": "snail_dev@163.com",
     "license": "MIT",
-    "version": "1.0.21",
+    "version": "1.0.23",
     "type": "module",
     "main": "dist/snail.view.js",
     "module": "dist/snail.view.js",