snail.view 1.0.9 → 1.0.11

package/dist/snail.view.d.ts

@@ -1,5 +1,10 @@
 import { IScope, IVersionManager } from 'snail.core';
 
+/**
+ * CSS 样式相关属性
+ *  1、支持class样式和style样式
+ *  2、针对常用style样式做结构封装，值仅封装常用的，若不满足则自己写样式控制
+ */
 /**
  * CSS管理器
  */
@@ -20,10 +25,9 @@ interface ICSSManager {
     /**
      * 构建样式
      * @param options 样式配置
-     * @param isFlex 是否是flex布局
      * @returns 计算出来的组件样式信息
      */
-    buildStyle(options: AllStyle | undefined, isFlex?: boolean): Partial<CSSStyleDeclaration>;
+    buildStyle(options: AllStyle): Record<string, string>;
 }
 /**
  * css 样式
@@ -50,52 +54,76 @@ type CSSDescriptor = {
  * - 高度、宽度、对齐、边框、内边距等合集
  * - 对齐方式、、、
  */
-type AllStyle = AlignStyle & FlexStyle & HeightStyle & WidthStyle & MarginStyle & BorderStyle & PaddingStyle & TransitionStyle;
+type AllStyle = BaseStyle & FlexBoxStyle & WidthStyle & HeightStyle & MarginStyle & BorderStyle & PaddingStyle & TransitionStyle;
 /**
- * 组件对齐样式
- * - flex布局时约束 align-items和 justify-content
- * - 非flex布局时约束 text-align和 vertical-align
+ * 基础样式：对齐方式、颜色属性
  */
-type AlignStyle = {
+type BaseStyle = {
+    /**
+     * 文本颜色
+     */
+    color?: string;
     /**
-     * 对齐方式
+     * 背景颜色
+     */
+    backgroundColor?: string;
+    /**
+     * 文本对齐方式
      * - left: 左对齐
      * - center: 居中对齐
      * - right: 右对齐
      */
-    align?: "left" | "center" | "right";
+    textAlign?: "left" | "center" | "right";
     /**
      * 垂直对齐方式
      * - top: 顶部对齐
      * - middle: 居中对齐
      * - bottom: 底部对齐
      */
-    valign?: "top" | "middle" | "bottom";
+    verticalAlign?: "top" | "middle" | "bottom";
 };
 /**
- * 主轴弹性样式
+ * 弹性盒子样式
+ * - Flex Container
+ * - Flex Item
  */
-type FlexStyle = {
+type FlexBoxStyle = {
+    /**
+     * 项目主轴方向对齐方式
+     * - 取值较多，先列举常用的
+     */
+    justifyContent?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    /**
+     * 项目交叉轴方向对齐方式
+     * - 取值较多，先列举常用的
+     */
+    alignItems?: "start" | "center" | "end";
     /**
      * 弹性置
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
      */
     flex?: string;
     /**
      * 主轴初始大小
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
      */
     flexBasis?: string;
     /**
      * 主轴放大系数
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
      */
-    flexGrow?: number | "inherit" | "initial" | "revert" | "unset";
+    flexGrow?: number;
     /**
      * 主轴收缩规则
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink
      */
-    flexShrink?: number | "inherit" | "initial" | "unset";
+    flexShrink?: number;
+    /**
+     * 项目的排列顺序。数值越小，排列越靠前
+     */
+    order?: number;
+    /**
+     * 项目在交叉轴方向的对齐方式
+     * - 自定义，独立与容器指定的 alignItems
+     * - 取值较多，先列举常用的
+     */
+    alignSelf?: "start" | "center" | "end";
 };
 /**
  * 宽度样式
@@ -470,4 +498,4 @@ type ElementSize = {
 declare function useObserver(): IObserver & IScope;
 
 export { configLink, css, link, linkMap, useAnimation, useLink, useObserver };
-export type { AlignStyle, AllStyle, BorderStyle, CSS, CSSDescriptor, ElementSize, FlexStyle, 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, TransitionEffectOptions, TransitionStyle, WidthStyle };

package/dist/snail.view.js

@@ -7,85 +7,6 @@ function getAnimationScope(manager, el) {
   return useKeyScope(el, false).scope;
 }
 
-function buildAlign(style, align, isFlex) {
-  if (isFlex == true) {
-    const map = {
-      "left": "start",
-      "center": "center",
-      "right": "end",
-      "top": "start",
-      "middle": "center",
-      "bottom": "end"
-    };
-    const aV = map[align.align],
-      vaV = map[align.valign];
-    aV && (style.justifyContent = aV);
-    vaV && (style.alignItems = vaV);
-  } else {
-    align.align && (style.textAlign = align.align);
-    align.valign && (style.verticalAlign = align.valign);
-  }
-}
-function buildFlex(style, flex) {
-  if (flex) {
-    flex.flex && (style.flex = flex.flex);
-    flex.flexBasis && (style.flexBasis = flex.flexBasis);
-    flex.flexGrow && (style.flexGrow = String(flex.flexGrow));
-    flex.flexShrink && (style.flexShrink = String(flex.flexShrink));
-  }
-}
-function buildWidth(style, width) {
-  if (width) {
-    width.width && (style.width = width.width);
-    width.minWidth && (style.minWidth = width.minWidth);
-    width.maxWidth && (style.maxWidth = width.maxWidth);
-  }
-}
-function buildHeight(style, height) {
-  if (height) {
-    height.height && (style.height = height.height);
-    height.minHeight && (style.minHeight = height.minHeight);
-    height.maxHeight && (style.maxHeight = height.maxHeight);
-  }
-}
-function buildMargin(style, margin) {
-  if (margin) {
-    margin.margin && (style.margin = margin.margin);
-    margin.marginTop && (style.marginTop = margin.marginTop);
-    margin.marginRight && (style.marginRight = margin.marginRight);
-    margin.marginBottom && (style.marginBottom = margin.marginBottom);
-    margin.marginLeft && (style.marginLeft = margin.marginLeft);
-  }
-}
-function buildBorder(style, border) {
-  if (border) {
-    border.borderRadius && (style.borderRadius = border.borderRadius);
-    border.border && (style.border = border.border);
-    border.borderTop && (style.borderTop = border.borderTop);
-    border.borderRight && (style.borderRight = border.borderRight);
-    border.borderBottom && (style.borderBottom = border.borderBottom);
-    border.borderLeft && (style.borderLeft = border.borderLeft);
-  }
-}
-function buildPadding(style, padding) {
-  if (padding) {
-    padding.padding && (style.padding = padding.padding);
-    padding.paddingTop && (style.paddingTop = padding.paddingTop);
-    padding.paddingRight && (style.paddingRight = padding.paddingRight);
-    padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
-    padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
-  }
-}
-function buildTransition(style, transition) {
-  if (transition) {
-    transition.transition && (style.transition = transition.transition);
-    transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
-    transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
-    transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
-    transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
-  }
-}
-
 function useCSS() {
   function parse(css2) {
     if (isStringNotEmpty(css2) == true) {
@@ -110,17 +31,55 @@ function useCSS() {
     css2 && isArrayNotEmpty(css2.class) && css2.class.forEach(name => type == "add" ? el.classList.add(name) : el.classList.remove(name));
     css2 && css2.style && Object.keys(css2.style).forEach(key => type == "add" ? el.style.setProperty(key, css2.style[key]) : el.style.removeProperty(key));
   }
-  function buildStyle(options, isFlex) {
+  function buildStyle(options) {
     const style = Object.create(null);
-    if (options) {
-      buildAlign(style, options, isFlex);
-      isFlex && buildFlex(style, options);
-      buildWidth(style, options);
-      buildHeight(style, options);
-      buildMargin(style, options);
-      buildBorder(style, options);
-      buildPadding(style, options);
-      buildTransition(style, options);
+    if (!!!options) {
+      return style;
+    }
+    {
+      options.color && (style.color = options.color);
+      options.backgroundColor && (style.backgroundColor = options.backgroundColor);
+      options.textAlign && (style.textAlign = options.textAlign);
+      options.verticalAlign && (style.verticalAlign = options.verticalAlign);
+      options.justifyContent && (style.justifyContent = options.justifyContent);
+      options.alignItems && (style.alignItems = options.alignItems);
+      options.flex && (style.flex = options.flex);
+      options.flexBasis && (style.flexBasis = options.flexBasis);
+      options.flexGrow > 0 && (style.flexGrow = String(options.flexGrow));
+      options.flexShrink > 0 && (style.flexShrink = String(options.flexShrink));
+      options.order > 0 && (style.order = String(options.order));
+      options.alignSelf && (style.alignSelf = options.alignSelf);
+    }
+    {
+      options.width && (style.width = options.width);
+      options.minWidth && (style.minWidth = options.minWidth);
+      options.maxWidth && (style.maxWidth = options.maxWidth);
+      options.height && (style.height = options.height);
+      options.minHeight && (style.minHeight = options.minHeight);
+      options.maxHeight && (style.maxHeight = options.maxHeight);
+      options.margin && (style.margin = options.margin);
+      options.marginTop && (style.marginTop = options.marginTop);
+      options.marginRight && (style.marginRight = options.marginRight);
+      options.marginBottom && (style.marginBottom = options.marginBottom);
+      options.marginLeft && (style.marginLeft = options.marginLeft);
+      options.borderRadius && (style.borderRadius = options.borderRadius);
+      options.border && (style.border = options.border);
+      options.borderTop && (style.borderTop = options.borderTop);
+      options.borderRight && (style.borderRight = options.borderRight);
+      options.borderBottom && (style.borderBottom = options.borderBottom);
+      options.borderLeft && (style.borderLeft = options.borderLeft);
+      options.padding && (style.padding = options.padding);
+      options.paddingTop && (style.paddingTop = options.paddingTop);
+      options.paddingRight && (style.paddingRight = options.paddingRight);
+      options.paddingBottom && (style.paddingBottom = options.paddingBottom);
+      options.paddingLeft && (style.paddingLeft = options.paddingLeft);
+    }
+    {
+      options.transition && (style.transition = options.transition);
+      options.transitionProperty && (style.transitionProperty = options.transitionProperty);
+      options.transitionDuration && (style.transitionDuration = options.transitionDuration);
+      options.transitionDelay && (style.transitionDelay = options.transitionDelay);
+      options.transitionTimingFunction && (style.transitionTimingFunction = options.transitionTimingFunction);
     }
     return style;
   }

package/dist/snail.view.umd.js

@@ -11,85 +11,6 @@
       return snail_core.useKeyScope(el, false).scope;
     }
 
-    function buildAlign(style, align, isFlex) {
-      if (isFlex == true) {
-        const map = {
-          "left": "start",
-          "center": "center",
-          "right": "end",
-          "top": "start",
-          "middle": "center",
-          "bottom": "end"
-        };
-        const aV = map[align.align],
-          vaV = map[align.valign];
-        aV && (style.justifyContent = aV);
-        vaV && (style.alignItems = vaV);
-      } else {
-        align.align && (style.textAlign = align.align);
-        align.valign && (style.verticalAlign = align.valign);
-      }
-    }
-    function buildFlex(style, flex) {
-      if (flex) {
-        flex.flex && (style.flex = flex.flex);
-        flex.flexBasis && (style.flexBasis = flex.flexBasis);
-        flex.flexGrow && (style.flexGrow = String(flex.flexGrow));
-        flex.flexShrink && (style.flexShrink = String(flex.flexShrink));
-      }
-    }
-    function buildWidth(style, width) {
-      if (width) {
-        width.width && (style.width = width.width);
-        width.minWidth && (style.minWidth = width.minWidth);
-        width.maxWidth && (style.maxWidth = width.maxWidth);
-      }
-    }
-    function buildHeight(style, height) {
-      if (height) {
-        height.height && (style.height = height.height);
-        height.minHeight && (style.minHeight = height.minHeight);
-        height.maxHeight && (style.maxHeight = height.maxHeight);
-      }
-    }
-    function buildMargin(style, margin) {
-      if (margin) {
-        margin.margin && (style.margin = margin.margin);
-        margin.marginTop && (style.marginTop = margin.marginTop);
-        margin.marginRight && (style.marginRight = margin.marginRight);
-        margin.marginBottom && (style.marginBottom = margin.marginBottom);
-        margin.marginLeft && (style.marginLeft = margin.marginLeft);
-      }
-    }
-    function buildBorder(style, border) {
-      if (border) {
-        border.borderRadius && (style.borderRadius = border.borderRadius);
-        border.border && (style.border = border.border);
-        border.borderTop && (style.borderTop = border.borderTop);
-        border.borderRight && (style.borderRight = border.borderRight);
-        border.borderBottom && (style.borderBottom = border.borderBottom);
-        border.borderLeft && (style.borderLeft = border.borderLeft);
-      }
-    }
-    function buildPadding(style, padding) {
-      if (padding) {
-        padding.padding && (style.padding = padding.padding);
-        padding.paddingTop && (style.paddingTop = padding.paddingTop);
-        padding.paddingRight && (style.paddingRight = padding.paddingRight);
-        padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
-        padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
-      }
-    }
-    function buildTransition(style, transition) {
-      if (transition) {
-        transition.transition && (style.transition = transition.transition);
-        transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
-        transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
-        transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
-        transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
-      }
-    }
-
     function useCSS() {
       function parse(css2) {
         if (snail_core.isStringNotEmpty(css2) == true) {
@@ -114,17 +35,55 @@
         css2 && snail_core.isArrayNotEmpty(css2.class) && css2.class.forEach(name => type == "add" ? el.classList.add(name) : el.classList.remove(name));
         css2 && css2.style && Object.keys(css2.style).forEach(key => type == "add" ? el.style.setProperty(key, css2.style[key]) : el.style.removeProperty(key));
       }
-      function buildStyle(options, isFlex) {
+      function buildStyle(options) {
         const style = Object.create(null);
-        if (options) {
-          buildAlign(style, options, isFlex);
-          isFlex && buildFlex(style, options);
-          buildWidth(style, options);
-          buildHeight(style, options);
-          buildMargin(style, options);
-          buildBorder(style, options);
-          buildPadding(style, options);
-          buildTransition(style, options);
+        if (!!!options) {
+          return style;
+        }
+        {
+          options.color && (style.color = options.color);
+          options.backgroundColor && (style.backgroundColor = options.backgroundColor);
+          options.textAlign && (style.textAlign = options.textAlign);
+          options.verticalAlign && (style.verticalAlign = options.verticalAlign);
+          options.justifyContent && (style.justifyContent = options.justifyContent);
+          options.alignItems && (style.alignItems = options.alignItems);
+          options.flex && (style.flex = options.flex);
+          options.flexBasis && (style.flexBasis = options.flexBasis);
+          options.flexGrow > 0 && (style.flexGrow = String(options.flexGrow));
+          options.flexShrink > 0 && (style.flexShrink = String(options.flexShrink));
+          options.order > 0 && (style.order = String(options.order));
+          options.alignSelf && (style.alignSelf = options.alignSelf);
+        }
+        {
+          options.width && (style.width = options.width);
+          options.minWidth && (style.minWidth = options.minWidth);
+          options.maxWidth && (style.maxWidth = options.maxWidth);
+          options.height && (style.height = options.height);
+          options.minHeight && (style.minHeight = options.minHeight);
+          options.maxHeight && (style.maxHeight = options.maxHeight);
+          options.margin && (style.margin = options.margin);
+          options.marginTop && (style.marginTop = options.marginTop);
+          options.marginRight && (style.marginRight = options.marginRight);
+          options.marginBottom && (style.marginBottom = options.marginBottom);
+          options.marginLeft && (style.marginLeft = options.marginLeft);
+          options.borderRadius && (style.borderRadius = options.borderRadius);
+          options.border && (style.border = options.border);
+          options.borderTop && (style.borderTop = options.borderTop);
+          options.borderRight && (style.borderRight = options.borderRight);
+          options.borderBottom && (style.borderBottom = options.borderBottom);
+          options.borderLeft && (style.borderLeft = options.borderLeft);
+          options.padding && (style.padding = options.padding);
+          options.paddingTop && (style.paddingTop = options.paddingTop);
+          options.paddingRight && (style.paddingRight = options.paddingRight);
+          options.paddingBottom && (style.paddingBottom = options.paddingBottom);
+          options.paddingLeft && (style.paddingLeft = options.paddingLeft);
+        }
+        {
+          options.transition && (style.transition = options.transition);
+          options.transitionProperty && (style.transitionProperty = options.transitionProperty);
+          options.transitionDuration && (style.transitionDuration = options.transitionDuration);
+          options.transitionDelay && (style.transitionDelay = options.transitionDelay);
+          options.transitionTimingFunction && (style.transitionTimingFunction = options.transitionTimingFunction);
         }
         return style;
       }

package/package.json

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