snail.vue 1.0.23 → 1.0.26

package/dist/snail.vue.d.ts

@@ -1,4 +1,5 @@
-import { AlignStyle, SizeOptions } from 'snail.view';
+import * as snail_view from 'snail.view';
+import { AlignStyle, WidthStyle, FlexStyle, BorderStyle, PaddingStyle, HeightStyle } from 'snail.view';
 import * as vue from 'vue';
 import { Component, App, Ref, ShallowRef } from 'vue';
 import { IScope } from 'snail.core';
@@ -13,10 +14,11 @@ type LoadingOptions = {
      */
     show: boolean;
     /**
-     * 展示遮罩层
-     * - 默认值：false，显示遮罩层
+     * 禁用【遮罩层】
+     * - false  显示遮罩层
+     * - true   不显示遮罩层
      */
-    disabledMask?: boolean;
+    maskDisabled?: boolean;
     /**
      * loading的根样式
      * - 外部传入后，可进行自由定制loading样式
@@ -116,7 +118,7 @@ type InputOptions = {
      * - 对齐方式
      * - 标题区域宽度
      */
-    titleStyle?: AlignStyle & SizeOptions;
+    titleStyle?: AlignStyle & WidthStyle & FlexStyle;
 };
 /**
  * 输入框事件
@@ -202,73 +204,17 @@ type TableStyleOptions = {
     /**
      * 高度
      */
-    height?: number;
-    /**
-     * 高度单位
-     * - 默认 px
-     */
-    heightUnit?: "px" | "rem" | "vw" | "vh";
+    height?: string;
 };
 /**
  * Table 行配置选项
  */
-type TableRowOptions = {
-    /**
-     * 行高
-     */
-    height: number;
-    /**
-     * 行高单位
-     * - 默认px
-     */
-    unit?: "px" | "rem" | "vw" | "vh";
-};
+type TableRowOptions = HeightStyle & {};
 /**
  * Table 列配置选项
+ * - border 样式需要配合TableOptions.border使用，否则会导致边框线重叠
  */
-type TableColOptions = {
-    /**
-     * 列占比
-     * - 存在时，width属性无效
-     */
-    flex?: number;
-    /**
-     * 列宽
-     */
-    width?: number;
-    /**
-     * 列最小宽度
-     * - width属性未指定、或者无效时生效；
-     * - 推荐和flex搭配使用
-     */
-    minWidth?: number;
-    /**
-     * 列最大宽度
-     * - width属性未指定、或者无效时生效；
-     * - 推荐和flex搭配使用
-     */
-    maxWidth?: number;
-    /**
-     * 列宽单位
-     * - 默认px
-     */
-    unit?: "px" | "rem" | "vw" | "vh";
-    /**
-     * 列对齐方式
-     * - 默认left
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * border样式
-     * - 完整的border样式；如 1px soloid #000000
-     * - 需要配合TableOptions.border使用，否则会导致边框线重叠
-     */
-    borderStyle?: string;
-    /**
-     * padding样式
-     */
-    paddingStyle?: string;
-};
+type TableColOptions = FlexStyle & WidthStyle & Pick<AlignStyle, "align"> & Pick<BorderStyle, "border"> & Pick<PaddingStyle, "padding">;
 
 /**
  * 折叠面板配置选项
@@ -284,10 +230,10 @@ type FoldOptions = {
      */
     subtitle?: string;
     /**
-     * 使用禁用【折叠】功能
+     * 禁用【折叠】功能
      * - true 则禁用折叠，始终展开内容区域
      */
-    disable?: boolean;
+    disabled?: boolean;
 };
 /**
  * 折叠状态
@@ -438,7 +384,7 @@ type HeaderOptions = {
     /** 禁用【关闭】按钮
      * - 默认值false
      */
-    closeDisable?: boolean;
+    closeDisabled?: boolean;
 };
 /**
  * 头部事件
@@ -473,7 +419,7 @@ type FooterOptions = {
      * 禁用【取消】按钮
      * - 为true时，不显示【取消】按钮
      */
-    cancelDisable?: boolean;
+    cancelDisabled?: boolean;
     /**
      * 【确定】按钮名称
      * - 默认【确定】
@@ -483,7 +429,7 @@ type FooterOptions = {
      * 禁用【确定】按钮
      * - 为true时，不显示【确定】按钮
      */
-    confirmDisable?: boolean;
+    confirmDisabled?: boolean;
 };
 /**
  * 底部组件事件
@@ -699,7 +645,7 @@ type ConfirmOptions = {
      * 禁用【取消】按钮
      * - 为true时，不显示【取消】按钮
      */
-    cancelDisable?: boolean;
+    cancelDisabled?: boolean;
     /**
      * 【确定】按钮名称
      * - 默认【确定】
@@ -709,7 +655,7 @@ type ConfirmOptions = {
      * 禁用【确定】按钮
      * - 为true时，不显示【确定】按钮
      */
-    confirmDisable?: boolean;
+    confirmDisabled?: boolean;
 };
 /**
  * 确认弹窗句柄
@@ -945,18 +891,18 @@ declare const components: {
         };
     });
     TableRow: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TableRowOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<snail_view.HeightStyle> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<TableRowOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<snail_view.HeightStyle> & Readonly<{}>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<TableRowOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<snail_view.HeightStyle> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;
         };

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
 import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, createBlock, createCommentVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, unref, computed, mergeProps, mergeModels, useModel, Transition, withCtx, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, createSlots, renderList, useTemplateRef, onUnmounted, createVNode, normalizeStyle, TransitionGroup, withModifiers, createApp, onMounted } from 'vue';
-import { tidyString, throwError, mustString, style, mustFunction, useScope, isStringNotEmpty, isObject, script, delay, getMessage, useHook, mustObject, defer, newId, isFunction } from 'snail.core';
-import { useAnimation, style as style$1, useObserver } from 'snail.view';
+import { tidyString, throwError, mustString, mustFunction, useScope, isStringNotEmpty, isObject, script, delay, getMessage, useHook, mustObject, defer, newId, isFunction } from 'snail.core';
+import { link, useAnimation, css, useObserver } from 'snail.view';
 
 var _sfc_main$h = defineComponent({
   ...{
@@ -23,6 +23,10 @@ var _sfc_main$h = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 var _sfc_main$g = defineComponent({
   ...{
     name: "Footer",
@@ -35,11 +39,11 @@ var _sfc_main$g = defineComponent({
       type: Boolean
     },
     cancelName: {},
-    cancelDisable: {
+    cancelDisabled: {
       type: Boolean
     },
     confirmName: {},
-    confirmDisable: {
+    confirmDisabled: {
       type: Boolean
     }
   },
@@ -55,13 +59,13 @@ var _sfc_main$g = defineComponent({
         class: normalizeClass(["snail-footer", {
           "start-divider": props.divider
         }, props.align || "right"])
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [props.cancelDisable != true ? (openBlock(), createBlock(_sfc_main$h, {
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$h, {
         key: 0,
         size: "max",
         type: "default",
         onClick: _cache[0] || (_cache[0] = $event => emit("cancel")),
         textContent: toDisplayString(props.cancelName || "取消")
-      }, null, 8, ["textContent"])) : createCommentVNode("", true), props.confirmDisable != true ? (openBlock(), createBlock(_sfc_main$h, {
+      }, null, 8, ["textContent"])) : createCommentVNode("", true), props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$h, {
         key: 1,
         size: "max",
         type: "primary",
@@ -155,7 +159,7 @@ var _sfc_main$e = defineComponent({
     titleAlign: {
       default: "center"
     },
-    closeDisable: {
+    closeDisabled: {
       type: Boolean,
       default: false
     }
@@ -180,7 +184,7 @@ var _sfc_main$e = defineComponent({
         key: 0,
         textContent: toDisplayString(_ctx.title),
         class: normalizeClass(["header-title", _ctx.titleAlign])
-      }, null, 10, _hoisted_1$8)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), _ctx.closeDisable != true ? (openBlock(), createBlock(_sfc_main$f, mergeProps({
+      }, null, 10, _hoisted_1$8)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), _ctx.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$f, mergeProps({
         key: 1,
         class: "close-icon"
       }, closeIconOptions.value, {
@@ -190,10 +194,6 @@ var _sfc_main$e = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(style.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 var _sfc_main$d = defineComponent({
   ...{
     name: "Switch",
@@ -274,7 +274,7 @@ var _sfc_main$c = defineComponent({
       type: Boolean,
       default: false
     },
-    disabledMask: {
+    maskDisabled: {
       type: Boolean,
       default: false
     },
@@ -293,7 +293,7 @@ var _sfc_main$c = defineComponent({
         default: withCtx(() => [_ctx.show ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["snail-loading", {
-            "show-mask": _ctx.disabledMask != true
+            "show-mask": _ctx.maskDisabled != true
           }, _ctx.rootClass])
         }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$attrs)))], 2)) : createCommentVNode("", true)]),
         _: 3
@@ -393,6 +393,10 @@ const _hoisted_4$1 = {
   class: "status"
 };
 const _hoisted_5$1 = ["title"];
+const _hoisted_6 = {
+  class: "fold-body",
+  ref: "foldBody"
+};
 var _sfc_main$a = defineComponent({
   ...{
     name: "Fold",
@@ -402,7 +406,7 @@ var _sfc_main$a = defineComponent({
   props: mergeModels({
     title: {},
     subtitle: {},
-    disable: {
+    disabled: {
       type: Boolean
     }
   }, {
@@ -420,18 +424,42 @@ var _sfc_main$a = defineComponent({
     const emit = __emit;
     const animationScope = useAnimation();
     const status = useModel(__props, "status");
-    const statusWatch = watch(status, calcFoldStyle);
+    const statusWatch = watch(status, updateFoldStyle);
     const statusIcon = getFoldStatusDraw();
-    const foldBodyRef = useTemplateRef("foldBodyRef");
-    function calcFoldStyle() {
+    const foldStatusSpanRef = useTemplateRef("foldStatusSpan");
+    const foldBodyRef = useTemplateRef("foldBody");
+    function updateFoldStyle() {
+      const isExpand = status.value == "expand";
+      if (foldStatusSpanRef.value) {
+        animationScope.transition(foldStatusSpanRef.value, {
+          from: {
+            transition: "transform 0.2s ease",
+            transform: isExpand ? "rotateZ(180deg)" : "rotate(0)"
+          },
+          to: {
+            transform: isExpand ? "rotate(0)" : "rotateZ(180deg)"
+          },
+          end: {
+            transform: isExpand ? "" : "rotateZ(180deg)"
+          }
+        });
+      }
       if (foldBodyRef.value) {
         const minHeight = 32;
         const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-        animationScope.roll(foldBodyRef.value, "vertical", {
-          start: `${status.value == "expand" ? minHeight : maxHeight}px`,
-          target: `${status.value == "expand" ? maxHeight : minHeight}px`,
-          time: 200,
-          clear: true
+        animationScope.transition(foldBodyRef.value.parentElement, {
+          from: {
+            transition: "height 0.2s ease",
+            overflow: "hidden",
+            height: `${isExpand ? minHeight : maxHeight}px`
+          },
+          to: {
+            height: `${isExpand ? maxHeight : minHeight}px`
+          },
+          end: {
+            overflow: isExpand ? "" : "hidden",
+            height: isExpand ? "" : `${minHeight}px`
+          }
         });
       }
     }
@@ -462,17 +490,14 @@ var _sfc_main$a = defineComponent({
         key: 0,
         class: "subtitle",
         textContent: toDisplayString(props.subtitle)
-      }, null, 8, _hoisted_3$2)) : createCommentVNode("", true), props.disable != true ? (openBlock(), createElementBlock("div", _hoisted_4$1, [createElementVNode("span", {
-        title: status.value == "expand" ? "收起" : "展开"
+      }, null, 8, _hoisted_3$2)) : createCommentVNode("", true), props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$1, [createElementVNode("span", {
+        title: status.value == "expand" ? "收起" : "展开",
+        ref: "foldStatusSpan"
       }, [createVNode(_sfc_main$f, {
         type: "custom",
         draw: unref(statusIcon),
         onClick: onStatusClick
-      }, null, 8, ["draw"])], 8, _hoisted_5$1)])) : createCommentVNode("", true)])]), createElementVNode("div", {
-        class: "fold-body",
-        ref_key: "foldBodyRef",
-        ref: foldBodyRef
-      }, [renderSlot(_ctx.$slots, "default")], 512)], 2);
+      }, null, 8, ["draw"])], 8, _hoisted_5$1)])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")], 512)], 2);
     };
   }
 });
@@ -535,7 +560,7 @@ var _sfc_main$8 = defineComponent({
       styleOptions = styleOptions || {};
       const style = Object.create(null);
       styleOptions.background && (style.background = styleOptions.background);
-      styleOptions.height && (style.height = styleOptions.height + (styleOptions.heightUnit || "px"));
+      styleOptions.height && (style.height = styleOptions.height);
       return style;
     }
     return (_ctx, _cache) => {
@@ -546,10 +571,10 @@ var _sfc_main$8 = defineComponent({
         "scroll-x": props.scrollX,
         "scroll-y": props.scrollY
       }, {
-        default: withCtx(() => [createElementVNode("header", {
+        default: withCtx(() => [createElementVNode("div", {
           class: "table-header",
           style: normalizeStyle(getStyle(props.headerStyle))
-        }, [renderSlot(_ctx.$slots, "header")], 4), createElementVNode("main", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]), createElementVNode("footer", {
+        }, [renderSlot(_ctx.$slots, "header")], 4), createElementVNode("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
           class: "table-footer",
           style: normalizeStyle(getStyle(props.footerStyle))
         }, [renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -567,15 +592,12 @@ var _sfc_main$7 = defineComponent({
   __name: "table-row",
   props: {
     height: {},
-    unit: {}
+    minHeight: {},
+    maxHeight: {}
   },
   setup(__props) {
     const props = __props;
-    const rowStyle = computed(() => {
-      const style = Object.create(null);
-      props.height > 0 && (style.height = props.height + (props.unit || "px"));
-      return style;
-    });
+    const rowStyle = computed(() => css.buildStyle(props));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "table-row",
@@ -593,27 +615,19 @@ var _sfc_main$6 = defineComponent({
   __name: "table-col",
   props: {
     flex: {},
+    flexBasis: {},
+    flexGrow: {},
+    flexShrink: {},
     width: {},
     minWidth: {},
     maxWidth: {},
-    unit: {},
     align: {},
-    borderStyle: {},
-    paddingStyle: {}
+    border: {},
+    padding: {}
   },
   setup(__props) {
     const props = __props;
-    const colStyle = computed(() => {
-      const style = Object.create(null);
-      props.flex != void 0 ? style.flex = String(props.flex) : props.width && (style.width = props.width + (props.unit || "px"));
-      if (props.flex != void 0 || props.width == void 0) {
-        props.minWidth && (style.minWidth = props.minWidth + (props.unit || "px"));
-        props.maxWidth && (style.maxWidth = props.maxWidth + (props.unit || "px"));
-      }
-      props.borderStyle && (style.border = props.borderStyle);
-      props.paddingStyle && (style.padding = props.paddingStyle);
-      return style;
-    });
+    const colStyle = computed(() => css.buildStyle(props));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["table-col", props.align]),
@@ -757,10 +771,7 @@ const initVueApp = (() => {
 })();
 
 function getTitleStyle(options, isFlex) {
-  return options && options.titleStyle ? style$1.build({
-    ...options.titleStyle,
-    width: options.titleStyle
-  }, isFlex) : Object.create(null);
+  return options && options.titleStyle ? css.buildStyle(options.titleStyle, isFlex) : Object.create(null);
 }
 
 const _hoisted_1$4 = ["textContent"];
@@ -943,11 +954,11 @@ var _sfc_main$2 = defineComponent({
     title: {},
     message: {},
     cancelName: {},
-    cancelDisable: {
+    cancelDisabled: {
       type: Boolean
     },
     confirmName: {},
-    confirmDisable: {
+    confirmDisabled: {
       type: Boolean
     },
     inDialog: {
@@ -972,9 +983,9 @@ var _sfc_main$2 = defineComponent({
       }, null, 8, _hoisted_2$1), createVNode(_sfc_main$g, {
         align: "right",
         "cancel-name": props.cancelName,
-        "cancel-disable": props.cancelDisable,
+        "cancel-disable": props.cancelDisabled,
         "confirm-name": props.confirmName,
-        "confirm-disable": props.confirmDisable,
+        "confirm-disable": props.confirmDisabled,
         onCancel: _cache[1] || (_cache[1] = $event => props.closeDialog(false)),
         onConfirm: _cache[2] || (_cache[2] = $event => props.closeDialog(true))
       }, null, 8, ["cancel-name", "cancel-disable", "confirm-name", "confirm-disable"])]);
@@ -1044,6 +1055,7 @@ var _sfc_main$1 = defineComponent({
       emit: __emit
     } = _ref;
     const emit = __emit;
+    const observer = useObserver();
     const isTouch = "ontouchstart" in window;
     const dragHandle = useTemplateRef("dragHandle");
     const dragInfo = ref({
@@ -1081,10 +1093,11 @@ var _sfc_main$1 = defineComponent({
         }
       }
     }
-    isTouch || onMounted(() => {
-      addEventListener("mousemove", onDragMove);
-      addEventListener("mouseup", onDragEnd);
+    isTouch || onMounted(function () {
+      observer.onEvent(window, "mousemove", onDragMove);
+      observer.onEvent(window, "mouseup", onDragEnd);
     });
+    onUnmounted(observer.destroy);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-drag-verify", {

package/dist/snail.vue.umd.js

@@ -37,11 +37,11 @@
         type: Boolean
       },
       cancelName: {},
-      cancelDisable: {
+      cancelDisabled: {
         type: Boolean
       },
       confirmName: {},
-      confirmDisable: {
+      confirmDisabled: {
         type: Boolean
       }
     },
@@ -57,13 +57,13 @@
           class: vue.normalizeClass(["snail-footer", {
             "start-divider": props.divider
           }, props.align || "right"])
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [props.cancelDisable != true ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
           key: 0,
           size: "max",
           type: "default",
           onClick: _cache[0] || (_cache[0] = $event => emit("cancel")),
           textContent: vue.toDisplayString(props.cancelName || "取消")
-        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), props.confirmDisable != true ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
           key: 1,
           size: "max",
           type: "primary",
@@ -157,7 +157,7 @@
       titleAlign: {
         default: "center"
       },
-      closeDisable: {
+      closeDisabled: {
         type: Boolean,
         default: false
       }
@@ -182,7 +182,7 @@
           key: 0,
           textContent: vue.toDisplayString(_ctx.title),
           class: vue.normalizeClass(["header-title", _ctx.titleAlign])
-        }, null, 10, _hoisted_1$8)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), _ctx.closeDisable != true ? (vue.openBlock(), vue.createBlock(_sfc_main$f, vue.mergeProps({
+        }, null, 10, _hoisted_1$8)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), _ctx.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$f, vue.mergeProps({
           key: 1,
           class: "close-icon"
         }, closeIconOptions.value, {
@@ -272,7 +272,7 @@
         type: Boolean,
         default: false
       },
-      disabledMask: {
+      maskDisabled: {
         type: Boolean,
         default: false
       },
@@ -291,7 +291,7 @@
           default: vue.withCtx(() => [_ctx.show ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: vue.normalizeClass(["snail-loading", {
-              "show-mask": _ctx.disabledMask != true
+              "show-mask": _ctx.maskDisabled != true
             }, _ctx.rootClass])
           }, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)))], 2)) : vue.createCommentVNode("", true)]),
           _: 3
@@ -391,6 +391,10 @@
     class: "status"
   };
   const _hoisted_5$1 = ["title"];
+  const _hoisted_6 = {
+    class: "fold-body",
+    ref: "foldBody"
+  };
   var _sfc_main$a = vue.defineComponent({
     ...{
       name: "Fold",
@@ -400,7 +404,7 @@
     props: vue.mergeModels({
       title: {},
       subtitle: {},
-      disable: {
+      disabled: {
         type: Boolean
       }
     }, {
@@ -418,18 +422,42 @@
       const emit = __emit;
       const animationScope = snail_view.useAnimation();
       const status = vue.useModel(__props, "status");
-      const statusWatch = vue.watch(status, calcFoldStyle);
+      const statusWatch = vue.watch(status, updateFoldStyle);
       const statusIcon = getFoldStatusDraw();
-      const foldBodyRef = vue.useTemplateRef("foldBodyRef");
-      function calcFoldStyle() {
+      const foldStatusSpanRef = vue.useTemplateRef("foldStatusSpan");
+      const foldBodyRef = vue.useTemplateRef("foldBody");
+      function updateFoldStyle() {
+        const isExpand = status.value == "expand";
+        if (foldStatusSpanRef.value) {
+          animationScope.transition(foldStatusSpanRef.value, {
+            from: {
+              transition: "transform 0.2s ease",
+              transform: isExpand ? "rotateZ(180deg)" : "rotate(0)"
+            },
+            to: {
+              transform: isExpand ? "rotate(0)" : "rotateZ(180deg)"
+            },
+            end: {
+              transform: isExpand ? "" : "rotateZ(180deg)"
+            }
+          });
+        }
         if (foldBodyRef.value) {
           const minHeight = 32;
           const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-          animationScope.roll(foldBodyRef.value, "vertical", {
-            start: `${status.value == "expand" ? minHeight : maxHeight}px`,
-            target: `${status.value == "expand" ? maxHeight : minHeight}px`,
-            time: 200,
-            clear: true
+          animationScope.transition(foldBodyRef.value.parentElement, {
+            from: {
+              transition: "height 0.2s ease",
+              overflow: "hidden",
+              height: `${isExpand ? minHeight : maxHeight}px`
+            },
+            to: {
+              height: `${isExpand ? maxHeight : minHeight}px`
+            },
+            end: {
+              overflow: isExpand ? "" : "hidden",
+              height: isExpand ? "" : `${minHeight}px`
+            }
           });
         }
       }
@@ -460,17 +488,14 @@
           key: 0,
           class: "subtitle",
           textContent: vue.toDisplayString(props.subtitle)
-        }, null, 8, _hoisted_3$2)) : vue.createCommentVNode("", true), props.disable != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.createElementVNode("span", {
-          title: status.value == "expand" ? "收起" : "展开"
+        }, null, 8, _hoisted_3$2)) : vue.createCommentVNode("", true), props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.createElementVNode("span", {
+          title: status.value == "expand" ? "收起" : "展开",
+          ref: "foldStatusSpan"
         }, [vue.createVNode(_sfc_main$f, {
           type: "custom",
           draw: vue.unref(statusIcon),
           onClick: onStatusClick
-        }, null, 8, ["draw"])], 8, _hoisted_5$1)])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", {
-          class: "fold-body",
-          ref_key: "foldBodyRef",
-          ref: foldBodyRef
-        }, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
+        }, null, 8, ["draw"])], 8, _hoisted_5$1)])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
       };
     }
   });
@@ -533,7 +558,7 @@
         styleOptions = styleOptions || {};
         const style = Object.create(null);
         styleOptions.background && (style.background = styleOptions.background);
-        styleOptions.height && (style.height = styleOptions.height + (styleOptions.heightUnit || "px"));
+        styleOptions.height && (style.height = styleOptions.height);
         return style;
       }
       return (_ctx, _cache) => {
@@ -544,10 +569,10 @@
           "scroll-x": props.scrollX,
           "scroll-y": props.scrollY
         }, {
-          default: vue.withCtx(() => [vue.createElementVNode("header", {
+          default: vue.withCtx(() => [vue.createElementVNode("div", {
             class: "table-header",
             style: vue.normalizeStyle(getStyle(props.headerStyle))
-          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("main", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("footer", {
+          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
             class: "table-footer",
             style: vue.normalizeStyle(getStyle(props.footerStyle))
           }, [vue.renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -565,15 +590,12 @@
     __name: "table-row",
     props: {
       height: {},
-      unit: {}
+      minHeight: {},
+      maxHeight: {}
     },
     setup(__props) {
       const props = __props;
-      const rowStyle = vue.computed(() => {
-        const style = Object.create(null);
-        props.height > 0 && (style.height = props.height + (props.unit || "px"));
-        return style;
-      });
+      const rowStyle = vue.computed(() => snail_view.css.buildStyle(props));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "table-row",
@@ -591,27 +613,19 @@
     __name: "table-col",
     props: {
       flex: {},
+      flexBasis: {},
+      flexGrow: {},
+      flexShrink: {},
       width: {},
       minWidth: {},
       maxWidth: {},
-      unit: {},
       align: {},
-      borderStyle: {},
-      paddingStyle: {}
+      border: {},
+      padding: {}
     },
     setup(__props) {
       const props = __props;
-      const colStyle = vue.computed(() => {
-        const style = Object.create(null);
-        props.flex != void 0 ? style.flex = String(props.flex) : props.width && (style.width = props.width + (props.unit || "px"));
-        if (props.flex != void 0 || props.width == void 0) {
-          props.minWidth && (style.minWidth = props.minWidth + (props.unit || "px"));
-          props.maxWidth && (style.maxWidth = props.maxWidth + (props.unit || "px"));
-        }
-        props.borderStyle && (style.border = props.borderStyle);
-        props.paddingStyle && (style.padding = props.paddingStyle);
-        return style;
-      });
+      const colStyle = vue.computed(() => snail_view.css.buildStyle(props));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["table-col", props.align]),
@@ -755,10 +769,7 @@
   })();
 
   function getTitleStyle(options, isFlex) {
-    return options && options.titleStyle ? snail_view.style.build({
-      ...options.titleStyle,
-      width: options.titleStyle
-    }, isFlex) : Object.create(null);
+    return options && options.titleStyle ? snail_view.css.buildStyle(options.titleStyle, isFlex) : Object.create(null);
   }
 
   const _hoisted_1$4 = ["textContent"];
@@ -941,11 +952,11 @@
       title: {},
       message: {},
       cancelName: {},
-      cancelDisable: {
+      cancelDisabled: {
         type: Boolean
       },
       confirmName: {},
-      confirmDisable: {
+      confirmDisabled: {
         type: Boolean
       },
       inDialog: {
@@ -970,9 +981,9 @@
         }, null, 8, _hoisted_2$1), vue.createVNode(_sfc_main$g, {
           align: "right",
           "cancel-name": props.cancelName,
-          "cancel-disable": props.cancelDisable,
+          "cancel-disable": props.cancelDisabled,
           "confirm-name": props.confirmName,
-          "confirm-disable": props.confirmDisable,
+          "confirm-disable": props.confirmDisabled,
           onCancel: _cache[1] || (_cache[1] = $event => props.closeDialog(false)),
           onConfirm: _cache[2] || (_cache[2] = $event => props.closeDialog(true))
         }, null, 8, ["cancel-name", "cancel-disable", "confirm-name", "confirm-disable"])]);
@@ -1042,6 +1053,7 @@
         emit: __emit
       } = _ref;
       const emit = __emit;
+      const observer = snail_view.useObserver();
       const isTouch = "ontouchstart" in window;
       const dragHandle = vue.useTemplateRef("dragHandle");
       const dragInfo = vue.ref({
@@ -1079,10 +1091,11 @@
           }
         }
       }
-      isTouch || vue.onMounted(() => {
-        addEventListener("mousemove", onDragMove);
-        addEventListener("mouseup", onDragEnd);
+      isTouch || vue.onMounted(function () {
+        observer.onEvent(window, "mousemove", onDragMove);
+        observer.onEvent(window, "mouseup", onDragEnd);
       });
+      vue.onUnmounted(observer.destroy);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-drag-verify", {

package/dist/styles/snail.vue.vue.css

@@ -1,23 +1,25 @@
+/* src:base\icon.vue 	 index:0 */
+.snail-icon{cursor:pointer;opacity:1}
+/* src:base\header.vue 	 index:0 */
+.snail-header{align-items:center;background-color:#fff;display:flex;flex-direction:row;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding-left:24px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:base\button.vue 	 index:0 */
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
 /* src:base\footer.vue 	 index:0 */
 .snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:left}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:right}
-/* src:base\header.vue 	 index:0 */
-.snail-header{align-items:center;background-color:#fff;display:flex;flex-direction:row;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding-left:24px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
-/* src:base\icon.vue 	 index:0 */
-.snail-icon{cursor:pointer;opacity:1}
 /* src:container\dynamic.vue 	 index:0 */
 .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:base\switch.vue 	 index:0 */
 .snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:default}
 /* src:container\fold.vue 	 index:0 */
-.snail-fold{flex-shrink:0;transition:height .2s ease}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;white-space:nowrap}.snail-fold>div.fold-header>.title{color:#2e3033;font-size:14px;font-weight:700;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{display:flex;flex:1;justify-content:right;justify-self:right}.snail-fold>div.fold-header>div.status>span{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>span{transform:rotate(0deg)}.snail-fold.fold{height:32px;overflow:hidden}.snail-fold.fold>div.fold-header>div.status>span{transform:rotate(180deg)}
-/* src:container\components\table-col.vue 	 index:0 */
-.table-col{align-items:center;display:inline-flex;height:100%;white-space:nowrap}.table-col.left{justify-content:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
+.snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;white-space:nowrap}.snail-fold>div.fold-header>.title{color:#2e3033;font-size:14px;font-weight:700;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{display:flex;flex:1;justify-content:right;justify-self:right}.snail-fold>div.fold-body{padding-left:20px}
+/* src:container\scroll.vue 	 index:0 */
+.snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
 /* src:container\table.vue 	 index:0 */
-.snail-table{display:flex;flex-direction:column}.snail-table>footer.table-footer,.snail-table>header.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>header.table-header{position:sticky!important;top:0}.snail-table>main.table-body{flex:1;width:100%}.snail-table.start-border>footer.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>header.table-header>.table-col:nth-child(n+2),.snail-table.start-border>main.table-body>.table-row>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>footer.table-footer>.table-col,.snail-table.start-border>main.table-body>.table-row>.table-col{border-top:none!important}
+.snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{position:sticky!important;top:0}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
 /* src:container\components\table-row.vue 	 index:0 */
 .table-row{align-items:center;display:flex;min-width:100%}
+/* src:container\components\table-col.vue 	 index:0 */
+.table-col{align-items:center;display:inline-flex;height:100%;white-space:nowrap}.table-col.left{justify-content:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
 /* src:form\input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;font-size:14px;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{border:1px solid #dddfed;color:#2e3033;flex:1;font-size:14px;font-weight:400;padding:0 10px;text-overflow:ellipsis}.snail-input>.input-body>input:focus{border:1px solid #3292ea}.snail-input>.input-body>span{background-color:red;flex-shrink:0}.snail-input.readonly>div.input-body>input:focus{border:1px solid #dddfed}
 /* src:prompt\drag-verify.vue 	 index:0 */
@@ -26,11 +28,9 @@
 .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-size:14px;font-weight:400;padding:0 10px 10px}
 /* src:prompt\loading.vue 	 index:0 */
 .snail-loading{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .5s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
-/* src:container\scroll.vue 	 index:0 */
-.snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
+/* src:prompt\components\toast.vue 	 index:0 */
+.snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
 /* src:container\components\dialog-wrapper.vue 	 index:0 */
 .snail-dialog{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;position:absolute;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);box-sizing:border-box;position:relative}.snail-dialog.unactive:before{display:none!important}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}.snail-dialog-enter-active,.snail-dialog-leave-active{transition:scale .1s ease-in-out,opacity .1s ease}.snail-dialog-enter-from{opacity:0;scale:.4}.snail-dialog-leave-to{opacity:0;scale:0}
 /* src:prompt\components\confirm.vue 	 index:0 */
-.snail-confirm{background-color:#fff;border-radius:4px;box-sizing:border-box;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>main{flex:1;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word;box-sizing:border-box}
-/* src:prompt\components\toast.vue 	 index:0 */
-.snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
+.snail-confirm{background-color:#fff;border-radius:4px;box-sizing:border-box;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>main{flex:1;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word;box-sizing:border-box}

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.23",
+  "version": "1.0.26",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=2.0.3",
-    "snail.view": ">=1.0.2"
+    "snail.core": ">=2.0.6",
+    "snail.view": ">=1.0.10"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.10",