snail.view 1.0.11 → 1.0.13

package/.code-snippets

@@ -0,0 +1,97 @@
+//	配合snail库进行less混合代码提示使用的代码片段
+{
+	//	引入基础Mixins样式
+	"@import-mixins-base": {
+		"prefix": "@import-base-mixins",
+		"scope": "less",
+		"description": "引入基础Mixins样式",
+		"body": [
+			"// 引入基础Mixins样式",
+			"@import \"snail.view/dist/styles/base-mixins.less\";"
+		]
+	},
+	// *****************************************   👉  文本样式    *****************************************
+	"text-ellipsis": {
+		"prefix": ".text-ellipsis",
+		"scope": "less",
+		"description": "文本溢出时出省略号",
+		"body": [
+			"// 文本溢出时出省略号",
+			".text-ellipsis();",
+		]
+	},
+	// *****************************************   👉  高宽定位    *****************************************
+	"wh-fill": {
+		"prefix": ".wh-fill",
+		"scope": "less",
+		"description": "高度、宽度100%填充满",
+		"body": [
+			"// width:100%；height:100%",
+			".wh-fill();"
+		]
+	},
+	"wh-fill-hidden": {
+		"prefix": ".wh-fill-hidden",
+		"scope": "less",
+		"description": "高度、宽度100%填充满，隐藏溢出的内容",
+		"body": [
+			"// width:100%；height:100%；overflow: hidden",
+			".wh-fill-hidden();"
+		]
+	},
+	"left-right-start": {
+		"prefix": ".left-right-start",
+		"scope": "less",
+		"description": "left:0,top:0；辅助 fixed、absolute定位使用",
+		"body": [
+			"// left、right起始位置：left: 0; top: 0",
+			".left-right-start();"
+		]
+	},
+	"left-right-center": {
+		"prefix": ".left-right-center",
+		"scope": "less",
+		"description": "通过left、rigth进行居中展示：left:50% top:50%; transform: translate(-50%, -50%)",
+		"body": [
+			"// 通过left、rigth进行居中展示：left:50% top:50%; transform: translate(-50%, -50%)",
+			".left-right-center();"
+		]
+	},
+	// *****************************************   👉  弹性盒子    *****************************************"
+	"flex-main-center": {
+		"prefix": ".flex-main-center",
+		"scope": "less",
+		"description": "flex 布局，主轴居中",
+		"body": [
+			"// flex 布局：display: flex，justify-content 为center",
+			".flex-main-center();"
+		]
+	},
+	"flex-cross-center": {
+		"prefix": ".flex-cross-center",
+		"scope": "less",
+		"description": "flex 布局，交叉轴居中",
+		"body": [
+			"// flex 布局：display: flex，align-items 为center",
+			".flex-cross-center();"
+		]
+	},
+	"flex-center": {
+		"prefix": ".flex-center",
+		"scope": "less",
+		"description": "flex 布局，主轴和交叉轴居中",
+		"body": [
+			"// flex 布局：display: flex，align-items、justify-content 都为center",
+			".flex-center();"
+		]
+	},
+	"flex-right": {
+		"prefix": ".flex-right",
+		"scope": "less",
+		"description": "flex 布局，主轴和交叉轴居右",
+		"body": [
+			"// flex 布局：display: flex，align-items、justify-content 都为right",
+			".flex-right();"
+		]
+	}
+}

package/dist/snail.view.d.ts

@@ -279,7 +279,7 @@ interface IAnimationManager {
      * - 开始动画时，清理 to end 操作样式，设置 from 再设异步置 to 样式
      * - 动画结束后，清理 from to 操作样式，保留 end 样式
      * @param el 执行动画的元素
-     * @param effect 动画效果配置，约束 from to end 样式
+     * @param effect 过渡效果配置，约束 from to end 样式
      * @param time 动画持续时长，单位ms，默认200ms；动画结束后销毁作用域
      * @returns 动画作用域
      * @example 将div的高度在1s内从100px变为200px。动画结束后保持200px高度，则可以使用如下代码：
@@ -289,30 +289,31 @@ interface IAnimationManager {
      *      end: { height: "200px" }
      * }, 1000);
      */
-    transition(el: HTMLElement, effect: TransitionEffectOptions, time?: number): IScope;
+    transition(el: HTMLElement, effect: TransitionEffect<CSS>, time?: number): IScope;
 }
 /**
  * 过渡动画效果配置信息
  * - 执行顺序 from - to - end
+ * - 支持泛型，扩展更通用的过渡表述场景
  */
-type TransitionEffectOptions = {
+type TransitionEffect<T> = {
     /**
      * 过渡动画开始样式
      * - 支持 class 、style 样式属性
      * - 如 高度 从 100 到 200；100 则为动画开始样式
      */
-    from: CSS;
+    from: T;
     /**
      * 过渡动画目标样式
      * - 支持 class 、style 样式属性
      * - 如 高度 从 100 到 200；200 则为动画目标样式
      */
-    to: CSS;
+    to: T;
     /**
      * 动画结束样式
      * - 支持 class 、style 样式属性
      */
-    end?: CSS;
+    end?: T;
 };
 
 /**
@@ -498,4 +499,4 @@ type ElementSize = {
 declare function useObserver(): IObserver & IScope;
 
 export { configLink, css, link, linkMap, useAnimation, useLink, useObserver };
-export type { AllStyle, BaseStyle, BorderStyle, CSS, CSSDescriptor, ElementSize, FlexBoxStyle, HeightStyle, IAnimationManager, ICSSManager, ILinkManager, IObserver, LinkElement, LinkFile, LinkOptions, MarginStyle, PaddingStyle, TransitionEffectOptions, TransitionStyle, WidthStyle };
+export type { AllStyle, BaseStyle, BorderStyle, CSS, CSSDescriptor, ElementSize, FlexBoxStyle, HeightStyle, IAnimationManager, ICSSManager, ILinkManager, IObserver, LinkElement, LinkFile, LinkOptions, MarginStyle, PaddingStyle, TransitionEffect, TransitionStyle, WidthStyle };

package/dist/snail.view.js

@@ -102,12 +102,14 @@ function useAnimation() {
     css.operate(el, "clear", toCss);
     css.operate(el, "clear", endCss);
     css.operate(el, "add", fromCss);
-    setTimeout(css.operate, 1, el, "add", toCss);
-    setTimeout(scope.destroy, time > 0 ? time : 200);
+    const toId = setTimeout(css.operate, 1, el, "add", toCss);
+    const endId = setTimeout(scope.destroy, time > 0 ? time : 200);
     return scope.onDestroy(function () {
       css.operate(el, "clear", fromCss);
       css.operate(el, "clear", toCss);
       css.operate(el, "add", endCss);
+      clearTimeout(toId);
+      clearTimeout(endId);
     });
   }
   const manager = mountScope({

package/dist/snail.view.umd.js

@@ -106,12 +106,14 @@
         css.operate(el, "clear", toCss);
         css.operate(el, "clear", endCss);
         css.operate(el, "add", fromCss);
-        setTimeout(css.operate, 1, el, "add", toCss);
-        setTimeout(scope.destroy, time > 0 ? time : 200);
+        const toId = setTimeout(css.operate, 1, el, "add", toCss);
+        const endId = setTimeout(scope.destroy, time > 0 ? time : 200);
         return scope.onDestroy(function () {
           css.operate(el, "clear", fromCss);
           css.operate(el, "clear", toCss);
           css.operate(el, "add", endCss);
+          clearTimeout(toId);
+          clearTimeout(endId);
         });
       }
       const manager = snail_core.mountScope({

package/dist/styles/base-mixins.less

@@ -2,9 +2,65 @@
 //  命名规则: .样式信息（如w代表width）-属性（如fill表示填充）()
 //  混入集中的样式统一采用（）结尾，避免直接输出；仅作为【定义混入】，不直接参与less样式编译输出
 
-// *****************************************   👉  盒子模型    *****************************************
-//  高度、宽度填充满，全100%
+// *****************************************   👉  文本       *****************************************
+//  文本溢出时出省略号
+.text-ellipsis() {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// *****************************************   👉  高宽定位    *****************************************
+//  高度、宽度100%填充满
 .wh-fill() {
     width: 100%;
     height: 100%;
+}
+
+//  高度、宽度100%填充满，隐藏溢出的内容
+.wh-fill-hidden() {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+//  left、right起始位置：left: 0; top: 0;
+.left-right-start() {
+    left: 0;
+    top: 0;
+}
+
+//  通过left、rigth进行居中展示：left:50% top:50%; transform: translate(-50%, -50%)
+.left-right-center() {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+// *****************************************   👉  弹性盒子    *****************************************
+//  flex 布局，主轴居中
+.flex-main-center() {
+    display: flex;
+    justify-content: center;
+}
+
+//  flex 布局，交叉轴居中
+.flex-cross-center() {
+    display: flex;
+    align-items: center;
+}
+
+//  flex 布局，主轴和交叉轴居中
+.flex-center() {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+//  flex 布局，主轴和交叉轴居右
+.flex-right() {
+    display: flex;
+    align-items: right;
+    justify-content: right;
 }

package/package.json

@@ -3,7 +3,7 @@
     "description": "对视图界面做的一些封装。如样式计算助手方法，常用样式less混入、变量等；dom相关助手类",
     "author": "snail_dev@163.com",
     "license": "MIT",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "type": "module",
     "main": "dist/snail.view.js",
     "module": "dist/snail.view.js",
@@ -14,7 +14,7 @@
         "types": "tsc -p ./tsconfig.dts.json --declarationDir ./dist/_types"
     },
     "dependencies": {
-        "snail.core": ">=2.0.6"
+        "snail.core": ">=2.0.9"
     },
     "devDependencies": {
         "rollup": ">=4.39.0",