snail.vue 2.0.12 → 2.0.13

package/dist/snail.vue.js

@@ -1,10 +1,10 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, onMounted, onUnmounted, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, withModifiers, getCurrentInstance, resolveComponent, onBeforeUnmount, TransitionGroup, getCurrentScope, onScopeDispose } from 'vue';
-import { throwError, isArrayNotEmpty, isStringNotEmpty, useKey, isArray, useTimer, newId, script, isFunction, getFromArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isObject, isNumberNotNaN, hasAny, mustFunction, useScope, removeFromArray, mustObject, delay, defer, useAsyncScope, useHook, throwIfTrue, correctTimeValue, getDateValue, formatDateValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, getDateByValue, correctNumber, onMountScope } from 'snail.core';
-import { css, link, useObserver, useAnimation } from 'snail.view';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, onMounted, onUnmounted, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, withModifiers, getCurrentInstance, resolveComponent, TransitionGroup, vShow, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
+import { throwError, isArrayNotEmpty, isStringNotEmpty, correctString, useKey, isArray, useTimer, newId, script, isFunction, getFromArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isObject, isNumberNotNaN, hasAny, mustFunction, useScope, removeFromArray, mustObject, delay, defer, useAsyncScope, useHook, correctNumber, throwIfTrue, hasOwnProperty, correctTimeValue, getDateValue, formatDateValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, getDateByValue, onMountScope } from 'snail.core';
+import { link, css, useObserver, useAnimation } from 'snail.view';
 
 const _hoisted_1$k = ["title"];
-var _sfc_main$z = defineComponent({
+var _sfc_main$B = defineComponent({
   ...{
     name: "Button",
     inheritAttrs: true
@@ -25,6 +25,10 @@ var _sfc_main$z = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 function getSvgDraw(iconType, draw) {
   switch (iconType) {
     case "success":
@@ -63,10 +67,10 @@ function getSvgDraw(iconType, draw) {
   }
 }
 
-const _hoisted_1$j = ["width", "height"];
+const _hoisted_1$j = ["viewBox", "width", "height"];
 const _hoisted_2$c = ["textContent"];
 const _hoisted_3$a = ["fill", "stroke", "stroke-width", "d"];
-var _sfc_main$y = defineComponent({
+var _sfc_main$A = defineComponent({
   ...{
     name: "Icon",
     inheritAttrs: true
@@ -75,6 +79,7 @@ var _sfc_main$y = defineComponent({
   props: {
     title: {},
     type: {},
+    viewBox: {},
     color: {},
     hoverColor: {},
     size: {},
@@ -88,7 +93,7 @@ var _sfc_main$y = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
         class: normalizeClass(["snail-icon", __props.type]),
-        viewBox: "0 0 1024 1024",
+        viewBox: unref(correctString)(__props.viewBox, "0 0 1024 1024", false),
         style: normalizeStyle(__props.rotate ? `transform: rotate(${__props.rotate}deg);` : ""),
         width: __props.size || 24,
         height: __props.size || 24,
@@ -112,7 +117,7 @@ const _hoisted_1$i = ["title", "onClick"];
 const _hoisted_2$b = ["type", "checked"];
 const _hoisted_3$9 = ["textContent"];
 const _hoisted_4$7 = ["textContent"];
-var _sfc_main$x = defineComponent({
+var _sfc_main$z = defineComponent({
   ...{
     name: "Choose",
     inheritAttrs: true
@@ -191,7 +196,7 @@ var _sfc_main$x = defineComponent({
         }, null, 8, _hoisted_2$b)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["status", [node.selected ? "selected" : ""]])
-        }, [node.selected ? (openBlock(), createBlock(_sfc_main$y, {
+        }, [node.selected ? (openBlock(), createBlock(_sfc_main$A, {
           key: 0,
           type: "success",
           size: 12,
@@ -210,12 +215,8 @@ var _sfc_main$x = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 const _hoisted_1$h = ["id"];
-var _sfc_main$w = defineComponent({
+var _sfc_main$y = defineComponent({
   __name: "datepicker",
   props: {
     type: {},
@@ -371,7 +372,7 @@ var _sfc_main$w = defineComponent({
   }
 });
 
-var _sfc_main$v = defineComponent({
+var _sfc_main$x = defineComponent({
   ...{
     name: "Footer",
     inheritAttrs: true
@@ -402,13 +403,13 @@ var _sfc_main$v = defineComponent({
         class: normalizeClass(["snail-footer", {
           "start-divider": __props.divider
         }, __props.align || "right"])
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
         key: 0,
         size: "max",
         type: "default",
         onClick: _cache[0] || (_cache[0] = $event => emits("cancel")),
         textContent: toDisplayString(__props.cancelName || "取消")
-      }, null, 8, ["textContent"])) : createCommentVNode("", true), __props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+      }, null, 8, ["textContent"])) : createCommentVNode("", true), __props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
         key: 1,
         size: "max",
         type: "primary",
@@ -420,7 +421,7 @@ var _sfc_main$v = defineComponent({
 });
 
 const _hoisted_1$g = ["textContent"];
-var _sfc_main$u = defineComponent({
+var _sfc_main$w = defineComponent({
   ...{
     name: "Header",
     inheritAttrs: true
@@ -459,7 +460,7 @@ var _sfc_main$u = defineComponent({
         key: 0,
         textContent: toDisplayString(__props.title),
         class: normalizeClass(["header-title", __props.titleAlign])
-      }, null, 10, _hoisted_1$g)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$y, {
+      }, null, 10, _hoisted_1$g)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 1,
         type: "close",
         size: 22,
@@ -482,7 +483,7 @@ const _hoisted_3$8 = {
 };
 const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
 const _hoisted_5$4 = ["title"];
-var _sfc_main$t = defineComponent({
+var _sfc_main$v = defineComponent({
   ...{
     name: "Input",
     inheritAttrs: true
@@ -547,7 +548,7 @@ var _sfc_main$t = defineComponent({
         key: 0,
         class: "validate",
         title: validateRef.value
-      }, [createVNode(_sfc_main$y, {
+      }, [createVNode(_sfc_main$A, {
         type: "error",
         size: 16,
         color: "red"
@@ -769,7 +770,7 @@ const _hoisted_4$5 = {
 const _hoisted_5$3 = ["textContent"];
 const _hoisted_6$2 = ["title", "textContent"];
 const _hoisted_7$1 = ["title", "textContent"];
-var _sfc_main$s = defineComponent({
+var _sfc_main$u = defineComponent({
   __name: "number",
   props: mergeModels({
     placeholder: {},
@@ -936,13 +937,13 @@ var _sfc_main$s = defineComponent({
       }, [createElementVNode("div", {
         class: "controls default subtract",
         onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$y, {
+      }, [createVNode(_sfc_main$A, {
         type: "subtract",
         size: 20
       })]), createElementVNode("div", {
         class: "controls default plus",
         onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$y, {
+      }, [createVNode(_sfc_main$A, {
         type: "plus",
         size: 20
       })])], 64)) : unref(controls) == "right" ? (openBlock(), createElementBlock(Fragment, {
@@ -950,14 +951,14 @@ var _sfc_main$s = defineComponent({
       }, [createElementVNode("div", {
         class: "controls right plus",
         onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$y, {
+      }, [createVNode(_sfc_main$A, {
         type: "arrow",
         size: 20,
         rotate: 270
       })]), createElementVNode("div", {
         class: "controls right subtract",
         onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$y, {
+      }, [createVNode(_sfc_main$A, {
         type: "arrow",
         size: 20,
         rotate: 90
@@ -981,7 +982,7 @@ var _sfc_main$s = defineComponent({
 
 const _hoisted_1$d = ["placeholder", "readonly"];
 const searchIon = "M 860.16 824.32 l -163.84 -163.84 c 102.4 -120.32 97.28 -302.08 -17.92 -414.72 c -120.32 -120.32 -314.88 -120.32 -435.2 0 c -120.32 120.32 -120.32 314.88 0 435.2 c 112.64 112.64 294.4 120.32 414.72 17.92 l 163.84 163.84 c 10.24 10.24 25.6 10.24 35.84 0 c 12.8 -12.8 12.8 -28.16 2.56 -38.4 Z M 281.6 642.56 C 181.76 542.72 181.76 381.44 281.6 281.6 c 99.84 -99.84 261.12 -99.84 360.96 0 c 99.84 99.84 99.84 261.12 0 360.96 c -99.84 102.4 -261.12 102.4 -360.96 0 Z";
-var _sfc_main$r = defineComponent({
+var _sfc_main$t = defineComponent({
   ...{
     name: "Search",
     inheritAttrs: true
@@ -1028,7 +1029,7 @@ var _sfc_main$r = defineComponent({
         onKeyup: _cache[1] || (_cache[1] = $event => onSearch($event))
       }, null, 40, _hoisted_1$d), [[vModelText, textModel.value, void 0, {
         trim: true
-      }]]), createElementVNode("div", null, [createVNode(_sfc_main$y, {
+      }]]), createElementVNode("div", null, [createVNode(_sfc_main$A, {
         class: "search-button",
         type: "custom",
         draw: searchIon,
@@ -1253,7 +1254,7 @@ const _hoisted_1$c = {
   class: "snail-confirm flex-column"
 };
 const _hoisted_2$8 = ["innerHTML"];
-var _sfc_main$q = defineComponent({
+var _sfc_main$s = defineComponent({
   ...{
     name: "ConfirmContainer",
     inheritAttrs: true
@@ -1281,14 +1282,14 @@ var _sfc_main$q = defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [createVNode(_sfc_main$u, {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [createVNode(_sfc_main$w, {
         "use-to": "dialog",
         title: __props.title || "提示",
         onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
       }, null, 8, ["title"]), createElementVNode("div", {
         class: "confirm-body",
         innerHTML: __props.message || "请确认？"
-      }, null, 8, _hoisted_2$8), createVNode(_sfc_main$v, {
+      }, null, 8, _hoisted_2$8), createVNode(_sfc_main$x, {
         align: "right",
         "cancel-name": __props.cancelName,
         "cancel-disabled": __props.cancelDisabled,
@@ -1301,7 +1302,7 @@ var _sfc_main$q = defineComponent({
   }
 });
 
-var _sfc_main$p = defineComponent({
+var _sfc_main$r = defineComponent({
   ...{
     name: "Loading",
     inheritAttrs: true
@@ -1340,7 +1341,7 @@ var _sfc_main$p = defineComponent({
   }
 });
 
-var _sfc_main$o = defineComponent({
+var _sfc_main$q = defineComponent({
   ...{
     name: "Dynamic",
     inheritAttrs: false
@@ -1364,7 +1365,7 @@ var _sfc_main$o = defineComponent({
     const loadingComponent = defineComponent({
       inheritAttrs: false,
       components: {
-        Loading: _sfc_main$p
+        Loading: _sfc_main$r
       },
       template: "<Loading :mask-disabled='true' />"
     });
@@ -1431,7 +1432,7 @@ var _sfc_main$o = defineComponent({
   }
 });
 
-var _sfc_main$n = defineComponent({
+var _sfc_main$p = defineComponent({
   ...{
     name: "DialogContainer",
     inheritAttrs: true
@@ -1476,7 +1477,7 @@ var _sfc_main$n = defineComponent({
         onClick: _cache[1] || (_cache[1] = withModifiers($event => {
           __props.options.closeOnMask && unref(closePopup)();
         }, ["self"]))
-      }, [createVNode(_sfc_main$o, mergeProps({
+      }, [createVNode(_sfc_main$q, mergeProps({
         class: "dialog-body",
         name: __props.options.name,
         component: __props.options.component,
@@ -1491,7 +1492,7 @@ var _sfc_main$n = defineComponent({
   }
 });
 
-var _sfc_main$m = defineComponent({
+var _sfc_main$o = defineComponent({
   ...{
     name: "FollowContainer",
     inheritAttrs: true
@@ -1612,7 +1613,7 @@ var _sfc_main$m = defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, mergeProps({
+      return openBlock(), createBlock(_sfc_main$q, mergeProps({
         class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1629,7 +1630,7 @@ var _sfc_main$m = defineComponent({
   }
 });
 
-var _sfc_main$l = defineComponent({
+var _sfc_main$n = defineComponent({
   ...{
     name: "PopupContainer",
     inheritAttrs: true
@@ -1649,7 +1650,7 @@ var _sfc_main$l = defineComponent({
       model = shallowRef(void 0)
     } = __props.options;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, mergeProps({
+      return openBlock(), createBlock(_sfc_main$q, mergeProps({
         class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1672,7 +1673,7 @@ const _hoisted_1$b = {
   class: "icon"
 };
 const _hoisted_2$7 = ["innerHTML"];
-var _sfc_main$k = defineComponent({
+var _sfc_main$m = defineComponent({
   ...{
     name: "ToastContainer",
     inheritAttrs: true
@@ -1710,7 +1711,7 @@ var _sfc_main$k = defineComponent({
         }),
         onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
         onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$y, {
+      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         class: "close-icon",
         type: "close",
@@ -1721,7 +1722,7 @@ var _sfc_main$k = defineComponent({
         onClick: _cache[2] || (_cache[2] = $event => {
           unref(closePopup)();
         })
-      }, null, 8, ["fill"])) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$b, [createVNode(_sfc_main$y, {
+      }, null, 8, ["fill"])) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$b, [createVNode(_sfc_main$A, {
         type: unref(props).type,
         fill: "#707070",
         size: 20
@@ -1735,7 +1736,7 @@ var _sfc_main$k = defineComponent({
 
 function usePopup() {
   function popup(options) {
-    const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$l, options);
+    const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$n, options);
     return addScope2Scopes(scope);
   }
   function dialog(options) {
@@ -1768,7 +1769,7 @@ function usePopup() {
         },
         onBeforeClose: fn => hook.register("onBeforeClose", fn)
       });
-      const descriptor = openPopup(_sfc_main$n, options, extOptions);
+      const descriptor = openPopup(_sfc_main$p, options, extOptions);
       scope = useAsyncScope(deferred.promise);
       monitorDialog(descriptor, scope, deferred);
     }
@@ -1786,14 +1787,14 @@ function usePopup() {
         inPopup: "follow",
         target
       };
-      scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$m, options, extOptions);
+      scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$o, options, extOptions);
     }
     return addScope2Scopes(scope);
   }
   function confirm(title, message, options) {
     options = options || Object.create(null);
     return dialog({
-      component: _sfc_main$q,
+      component: _sfc_main$s,
       closeOnEscape: true,
       props: {
         ...options,
@@ -1803,7 +1804,7 @@ function usePopup() {
     });
   }
   function toast(type, message, options) {
-    return popupInCustomContainer(_sfc_main$k, {
+    return popupInCustomContainer(_sfc_main$m, {
       url: "#ToastContainer",
       props: {
         ...(options || Object.create(null)),
@@ -1836,7 +1837,7 @@ function usePopup() {
       },
       ...extOptions
     });
-    const descriptor = openPopup(container || _sfc_main$l, options, extOptions);
+    const descriptor = openPopup(container || _sfc_main$n, options, extOptions);
     const scope = useAsyncScope(deferred.promise);
     scope.onDestroy(() => destroyPopup(descriptor, deferred));
     return scope;
@@ -1979,7 +1980,7 @@ const _hoisted_1$a = {
 };
 const _hoisted_2$6 = ["src"];
 const _hoisted_3$6 = ["textContent"];
-var _sfc_main$j = defineComponent({
+var _sfc_main$l = defineComponent({
   ...{
     name: "Empty",
     inheritAttrs: true
@@ -2008,7 +2009,7 @@ const _hoisted_3$5 = {
   key: 1,
   class: "select-status"
 };
-var _sfc_main$i = defineComponent({
+var _sfc_main$k = defineComponent({
   ...{
     name: "SelectNode",
     inheritAttrs: true
@@ -2053,11 +2054,11 @@ var _sfc_main$i = defineComponent({
       }, [createElementVNode("div", {
         class: "item-text ellipsis",
         textContent: toDisplayString(__props.item.text)
-      }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$y, {
+      }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         type: "arrow",
         color: "#8a9099"
-      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$y, {
+      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$A, {
         type: "success",
         color: "white",
         size: 12
@@ -2078,7 +2079,7 @@ var _sfc_main$i = defineComponent({
   }
 });
 
-var _sfc_main$h = defineComponent({
+var _sfc_main$j = defineComponent({
   ...{
     name: "Select2Popup",
     inheritAttrs: true
@@ -2250,13 +2251,13 @@ var _sfc_main$h = defineComponent({
         key: 0
       }, [createTextVNode(" 暂无选项 ")], 64)) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [__props.search ? (openBlock(), createBlock(_sfc_main$r, mergeProps({
+      }, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
         key: 0
       }, __props.search, {
         onSearch,
         key: "select-search"
       }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(itemsRef.value, item => {
-        return openBlock(), createBlock(_sfc_main$i, {
+        return openBlock(), createBlock(_sfc_main$k, {
           key: unref(context).getKey(item),
           multiple: __props.multiple,
           item,
@@ -2265,7 +2266,7 @@ var _sfc_main$h = defineComponent({
           onEnter: onEnterSelectNode,
           onClick: onClickSelectNode
         }, null, 8, ["multiple", "item", "context"]);
-      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$j, {
+      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$l, {
         key: 1,
         message: "无结果"
       })) : createCommentVNode("", true), showClearButtonRef.value ? (openBlock(), createElementBlock("div", {
@@ -2288,9 +2289,9 @@ const _hoisted_4$4 = {
   class: "placeholder"
 };
 onAppCreated((app, type) => {
-  type == "popup" && app.component("SelectPopup", _sfc_main$h);
+  type == "popup" && app.component("SelectPopup", _sfc_main$j);
 });
-var _sfc_main$g = defineComponent({
+var _sfc_main$i = defineComponent({
   ...{
     name: "Select",
     inheritAttrs: true
@@ -2430,7 +2431,7 @@ var _sfc_main$g = defineComponent({
         key: 1,
         class: "placeholder",
         textContent: toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$y, {
+      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 2,
         type: "arrow",
         size: 24,
@@ -2443,7 +2444,7 @@ var _sfc_main$g = defineComponent({
   }
 });
 
-var _sfc_main$f = defineComponent({
+var _sfc_main$h = defineComponent({
   ...{
     name: "Switch",
     inheritAttrs: true
@@ -2493,7 +2494,7 @@ var _sfc_main$f = defineComponent({
 });
 
 const _hoisted_1$7 = ["readonly", "placeholder", "rows"];
-var _sfc_main$e = defineComponent({
+var _sfc_main$g = defineComponent({
   ...{
     name: "Textarea"
   },
@@ -2558,6 +2559,81 @@ var _sfc_main$e = defineComponent({
   }
 });
 
+var _sfc_main$f = defineComponent({
+  __name: "transitions",
+  props: {
+    group: {
+      type: Boolean
+    },
+    duration: {},
+    customClass: {},
+    effect: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const classNames = computed(() => {
+      const array = [props.customClass || "snail-transition"];
+      if (isArray(props.effect)) {
+        props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
+      } else {
+        array.push(props.effect || "fade");
+      }
+      props.duration === 0 && array.push("no-duration");
+      return array.join(" ");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.group ? TransitionGroup : Transition), {
+        appear: "",
+        duration: __props.duration,
+        "enter-active-class": `${classNames.value} enter-active`,
+        "enter-from-class": `${classNames.value} enter-from`,
+        "enter-to-class": `${classNames.value} enter-to`,
+        "leave-active-class": `${classNames.value} leave-active`,
+        "leave-from-class": `${classNames.value} leave-from`,
+        "leave-to-class": `${classNames.value} leave-to`
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
+    };
+  }
+});
+
+var _sfc_main$e = defineComponent({
+  __name: "element",
+  props: {
+    tag: {},
+    show: {
+      type: Boolean
+    },
+    showMode: {},
+    transition: {},
+    children: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$f, mergeProps({
+        group: false
+      }, __props.transition, {
+        duration: __props.transition ? __props.transition.duration : 0
+      }), {
+        default: withCtx(() => [(__props.showMode == "vShow" ? true : __props.show) ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(correctString)(__props.tag, "div", true)), {
+          key: 0
+        }, {
+          default: withCtx(() => [createVNode(_sfc_main$f, mergeProps(__props.children, {
+            duration: __props.children ? __props.children.duration : 0
+          }), {
+            default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 16, ["duration"])]),
+          _: 3
+        }, 512)), [[vShow, __props.showMode == "vShow" ? __props.show : true]]) : createCommentVNode("", true)]),
+        _: 3
+      }, 16, ["duration"]);
+    };
+  }
+});
+
 const _hoisted_1$6 = {
   class: "fold-header"
 };
@@ -2648,7 +2724,7 @@ var _sfc_main$d = defineComponent({
         key: 0,
         class: "subtitle ellipsis",
         textContent: toDisplayString(__props.subtitle)
-      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$y, {
+      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$A, {
         type: "arrow",
         title: statusModel.value == "expand" ? "收起" : "展开",
         onClick: onStatusClick
@@ -2873,6 +2949,36 @@ var _sfc_main$b = defineComponent({
 });
 
 var _sfc_main$a = defineComponent({
+  __name: "motion",
+  props: {
+    enter: {},
+    leave: {},
+    multiple: {
+      type: Boolean
+    },
+    duration: {},
+    mode: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const duration = correctNumber(props.duration, 200);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.multiple ? TransitionGroup : Transition), {
+        appear: "",
+        type: "animation",
+        duration: unref(duration),
+        mode: __props.mode,
+        "enter-active-class": unref(correctString)(props.enter, "fade-in", true),
+        "leave-active-class": unref(correctString)(props.leave, "fade-out", true)
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["duration", "mode", "enter-active-class", "leave-active-class"]);
+    };
+  }
+});
+
+var _sfc_main$9 = defineComponent({
   ...{
     name: "Sort",
     inheritAttrs: true
@@ -2976,7 +3082,7 @@ var _sfc_main$a = defineComponent({
 const _hoisted_1$5 = {
   class: "table-body"
 };
-var _sfc_main$9 = defineComponent({
+var _sfc_main$8 = defineComponent({
   ...{
     name: "Table",
     inheritAttrs: true
@@ -3021,7 +3127,7 @@ var _sfc_main$9 = defineComponent({
   }
 });
 
-var _sfc_main$8 = defineComponent({
+var _sfc_main$7 = defineComponent({
   ...{
     name: "TableRow",
     inheritAttrs: true
@@ -3044,7 +3150,7 @@ var _sfc_main$8 = defineComponent({
   }
 });
 
-var _sfc_main$7 = defineComponent({
+var _sfc_main$6 = defineComponent({
   ...{
     name: "TableCol",
     inheritAttrs: true
@@ -3090,46 +3196,6 @@ var _sfc_main$7 = defineComponent({
   }
 });
 
-var _sfc_main$6 = defineComponent({
-  __name: "transitions",
-  props: {
-    group: {
-      type: Boolean
-    },
-    duration: {},
-    customClass: {},
-    effect: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const classNames = computed(() => {
-      const array = [props.customClass || "snail-transition"];
-      if (isArray(props.effect)) {
-        props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
-      } else {
-        array.push(props.effect || "fade");
-      }
-      console.log(array);
-      return array.join(" ");
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.group ? TransitionGroup : Transition), mergeProps(_ctx.$attrs, {
-        appear: "",
-        duration: __props.duration,
-        "enter-active-class": `${classNames.value} enter-active`,
-        "enter-from-class": `${classNames.value} enter-from`,
-        "enter-to-class": `${classNames.value} enter-to`,
-        "leave-active-class": `${classNames.value} leave-active`,
-        "leave-from-class": `${classNames.value} leave-from`,
-        "leave-to-class": `${classNames.value} leave-to`
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
-    };
-  }
-});
-
 const _hoisted_1$4 = {
   key: 0,
   class: "node-fold"
@@ -3261,7 +3327,7 @@ var _sfc_main$5 = defineComponent({
         key: 1
       }, [_cache[4] || (_cache[4] = createElementVNode("div", {
         class: "indent"
-      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$y, {
+      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         class: normalizeClass(statusRef.value),
         type: "custom",
@@ -3330,7 +3396,7 @@ var _sfc_main$4 = defineComponent({
       emits("click", node, parents);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.search ? (openBlock(), createBlock(_sfc_main$r, mergeProps({
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
         key: 0
       }, __props.search, {
         onSearch
@@ -3381,7 +3447,7 @@ var _sfc_main$3 = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-wrapper", __props.inPopup ? "in-popup" : "in-normal"])
-      }, [__props.header && __props.header.disabled != true ? (openBlock(), createBlock(_sfc_main$u, mergeProps({
+      }, [__props.header && __props.header.disabled != true ? (openBlock(), createBlock(_sfc_main$w, mergeProps({
         key: 0
       }, __props.header || {
         useTo: "dialog",
@@ -3396,7 +3462,7 @@ var _sfc_main$3 = defineComponent({
       }), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3
-      }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (openBlock(), createBlock(_sfc_main$v, mergeProps({
+      }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (openBlock(), createBlock(_sfc_main$x, mergeProps({
         key: 1
       }, __props.footer || {}, {
         onCancel: _cache[1] || (_cache[1] = $event => emits("cancel")),
@@ -3410,7 +3476,7 @@ function mount(target, options, onDestroyed) {
   mustObject(options, "options");
   target instanceof HTMLElement || throwError("target must be a HTMLElement");
   target.classList.add("snail-app");
-  const app = createApp(_sfc_main$o, options);
+  const app = createApp(_sfc_main$q, options);
   triggerAppCreated(app);
   app.mount(target);
   const scope = useScope().onDestroy(() => app.unmount());
@@ -3418,6 +3484,54 @@ function mount(target, options, onDestroyed) {
   return scope;
 }
 
+const MOTION = Object.freeze({
+  "fade": {
+    enter: "fade-in",
+    leave: "fade-out"
+  },
+  "scale": {
+    enter: "scale-in",
+    leave: "scale-out"
+  },
+  "rotate": {
+    enter: "rotate-in",
+    leave: "rotate-out"
+  },
+  "top": {
+    enter: "top-in",
+    leave: "top-out"
+  },
+  "topBottom": {
+    enter: "top-in",
+    leave: "bottom-out"
+  },
+  "bottom": {
+    enter: "bottom-in",
+    leave: "bottom-out"
+  },
+  "bottomTop": {
+    enter: "bottom-in",
+    leave: "top-out"
+  },
+  "left": {
+    enter: "left-in",
+    leave: "left-out"
+  },
+  "leftRight": {
+    enter: "left-in",
+    leave: "right-out"
+  },
+  "right": {
+    enter: "right-in",
+    leave: "right-out"
+  },
+  "rightLeft": {
+    enter: "right-in",
+    leave: "left-out"
+  }
+});
+for (var key in MOTION) hasOwnProperty(MOTION, key) && Object.freeze(MOTION[key]);
+
 function initStepByFormat(format) {
   switch (format) {
     case "yyyy":
@@ -3685,7 +3799,7 @@ var _sfc_main$2 = defineComponent({
         }]),
         mode: "vertical"
       }, createSlots({
-        main: withCtx(() => [createVNode(_sfc_main$6, {
+        main: withCtx(() => [createVNode(_sfc_main$f, {
           group: true,
           effect: "down-up"
         }, {
@@ -3725,19 +3839,19 @@ var _sfc_main$2 = defineComponent({
         _: 2
       }, [__props.toolbarDisabled != true ? {
         name: "bottom",
-        fn: withCtx(() => [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+        fn: withCtx(() => [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
           key: 0,
           type: "link",
           size: "small",
           textContent: "清空",
           onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), __props.inPopup && __props.closePopup("")))
-        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
           key: 1,
           type: "link",
           size: "small",
           textContent: "现在",
           onClick: _cache[1] || (_cache[1] = $event => rebuildItems(unref(getTimeValue)(new Date())))
-        })) : createCommentVNode("", true), createVNode(_sfc_main$z, {
+        })) : createCommentVNode("", true), createVNode(_sfc_main$B, {
           type: "link",
           size: "small",
           textContent: "确定",
@@ -3988,7 +4102,7 @@ var _sfc_main$1 = defineComponent({
           height: "30px"
         }
       }, createSlots({
-        top: withCtx(() => [createVNode(_sfc_main$y, {
+        top: withCtx(() => [createVNode(_sfc_main$A, {
           type: "arrow",
           rotate: 180,
           size: 26,
@@ -4007,7 +4121,7 @@ var _sfc_main$1 = defineComponent({
           key: 0,
           textContent: toDisplayString(`${dateRef.value.month}月`),
           onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
-        }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$y, {
+        }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$A, {
           type: "arrow",
           size: 26,
           onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
@@ -4072,19 +4186,19 @@ var _sfc_main$1 = defineComponent({
           onClick: onSelectTime
         }, null, 10, _hoisted_8)) : createCommentVNode("", true), __props.toolbarDisabled != true ? (openBlock(), createElementBlock(Fragment, {
           key: 1
-        }, [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+        }, [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
           key: 0,
           type: "link",
           size: "small",
           textContent: "清空",
           onClick: _cache[4] || (_cache[4] = $event => (emits("clear"), unref(inPopup) && __props.closePopup("")))
-        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
           key: 1,
           type: "link",
           size: "small",
           textContent: "现在",
           onClick: onNow
-        })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_sfc_main$z, {
+        })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_sfc_main$B, {
           type: "link",
           size: "small",
           textContent: "确定",
@@ -4235,12 +4349,12 @@ var _sfc_main = defineComponent({
         onTouchstart: onStartDrag,
         onTouchmove: onDragMove,
         onTouchend: onDragEnd
-      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$y, {
+      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         type: "success",
         size: 20,
         color: "white"
-      })) : (openBlock(), createBlock(_sfc_main$y, {
+      })) : (openBlock(), createBlock(_sfc_main$A, {
         key: 1,
         type: "custom",
         size: 20,
@@ -4252,36 +4366,38 @@ var _sfc_main = defineComponent({
 });
 
 const components = {
-  Button: _sfc_main$z,
-  Choose: _sfc_main$x,
-  DatePicker: _sfc_main$w,
-  Footer: _sfc_main$v,
-  Header: _sfc_main$u,
-  Icon: _sfc_main$y,
-  Input: _sfc_main$t,
-  Number: _sfc_main$s,
-  Search: _sfc_main$r,
-  Select: _sfc_main$g,
-  Switch: _sfc_main$f,
-  Textarea: _sfc_main$e,
-  Dynamic: _sfc_main$o,
+  Button: _sfc_main$B,
+  Choose: _sfc_main$z,
+  DatePicker: _sfc_main$y,
+  Footer: _sfc_main$x,
+  Header: _sfc_main$w,
+  Icon: _sfc_main$A,
+  Input: _sfc_main$v,
+  Number: _sfc_main$u,
+  Search: _sfc_main$t,
+  Select: _sfc_main$i,
+  Switch: _sfc_main$h,
+  Textarea: _sfc_main$g,
+  Dynamic: _sfc_main$q,
+  Element: _sfc_main$e,
   Fold: _sfc_main$d,
+  Motion: _sfc_main$a,
   Layout: _sfc_main$b,
   Scroll: _sfc_main$c,
-  Sort: _sfc_main$a,
-  Table: _sfc_main$9,
-  TableRow: _sfc_main$8,
-  TableCol: _sfc_main$7,
-  Transitions: _sfc_main$6,
+  Sort: _sfc_main$9,
+  Table: _sfc_main$8,
+  TableRow: _sfc_main$7,
+  TableCol: _sfc_main$6,
+  Transitions: _sfc_main$f,
   Tree: _sfc_main$4,
   Wrapper: _sfc_main$3,
   DragVerify: _sfc_main,
-  Empty: _sfc_main$j,
-  Loading: _sfc_main$p
+  Empty: _sfc_main$l,
+  Loading: _sfc_main$r
 };
 
 onMountScope(scope => {
   getCurrentScope() && onScopeDispose(scope.destroy);
 });
 
-export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
+export { MOTION, components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };