snail.vue 2.0.11 → 2.0.13

package/dist/snail.vue.umd.js

@@ -5,8 +5,8 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailView));
 })(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
 
-  const _hoisted_1$j = ["title"];
-  var _sfc_main$y = vue.defineComponent({
+  const _hoisted_1$k = ["title"];
+  var _sfc_main$B = vue.defineComponent({
     ...{
       name: "Button",
       inheritAttrs: true
@@ -22,7 +22,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-button", [__props.size, __props.type]]),
           title: __props.title
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$j);
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$k);
       };
     }
   });
@@ -69,10 +69,10 @@
     }
   }
 
-  const _hoisted_1$i = ["width", "height"];
-  const _hoisted_2$b = ["textContent"];
-  const _hoisted_3$9 = ["fill", "stroke", "stroke-width", "d"];
-  var _sfc_main$x = vue.defineComponent({
+  const _hoisted_1$j = ["viewBox", "width", "height"];
+  const _hoisted_2$c = ["textContent"];
+  const _hoisted_3$a = ["fill", "stroke", "stroke-width", "d"];
+  var _sfc_main$A = vue.defineComponent({
     ...{
       name: "Icon",
       inheritAttrs: true
@@ -81,6 +81,7 @@
     props: {
       title: {},
       type: {},
+      viewBox: {},
       color: {},
       hoverColor: {},
       size: {},
@@ -94,7 +95,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("svg", {
           class: vue.normalizeClass(["snail-icon", __props.type]),
-          viewBox: "0 0 1024 1024",
+          viewBox: vue.unref(snail_core.correctString)(__props.viewBox, "0 0 1024 1024", false),
           style: vue.normalizeStyle(__props.rotate ? `transform: rotate(${__props.rotate}deg);` : ""),
           width: __props.size || 24,
           height: __props.size || 24,
@@ -102,23 +103,23 @@
           onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
         }, [vue.createElementVNode("title", {
           textContent: vue.toDisplayString(__props.title || "")
-        }, null, 8, _hoisted_2$b), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(getSvgDraw)(__props.type, __props.draw), d => {
+        }, null, 8, _hoisted_2$c), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(getSvgDraw)(__props.type, __props.draw), d => {
           return vue.openBlock(), vue.createElementBlock("path", {
             fill: isMouseEnterRef.value ? __props.hoverColor || __props.color : __props.color,
             stroke: __props.stroke,
             "stroke-width": __props.strokeWidth,
             d
-          }, null, 8, _hoisted_3$9);
-        }), 256))], 46, _hoisted_1$i);
+          }, null, 8, _hoisted_3$a);
+        }), 256))], 46, _hoisted_1$j);
       };
     }
   });
 
-  const _hoisted_1$h = ["title", "onClick"];
-  const _hoisted_2$a = ["type", "checked"];
-  const _hoisted_3$8 = ["textContent"];
-  const _hoisted_4$6 = ["textContent"];
-  var _sfc_main$w = vue.defineComponent({
+  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$z = vue.defineComponent({
     ...{
       name: "Choose",
       inheritAttrs: true
@@ -194,10 +195,10 @@
             key: 0,
             type: vue.unref(type),
             checked: node.selected
-          }, null, 8, _hoisted_2$a)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, null, 8, _hoisted_2$b)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(["status", [node.selected ? "selected" : ""]])
-          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 0,
             type: "success",
             size: 12,
@@ -206,18 +207,18 @@
             key: 2,
             class: "item-text",
             textContent: vue.toDisplayString(node.item.text)
-          }, null, 8, _hoisted_3$8)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
+          }, null, 8, _hoisted_3$9)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 3,
             class: "item-des",
             textContent: vue.toDisplayString(node.item.description)
-          }, null, 8, _hoisted_4$6)) : vue.createCommentVNode("", true)], 14, _hoisted_1$h);
+          }, null, 8, _hoisted_4$7)) : vue.createCommentVNode("", true)], 14, _hoisted_1$i);
         }), 128))], 2);
       };
     }
   });
 
-  const _hoisted_1$g = ["id"];
-  var _sfc_main$v = vue.defineComponent({
+  const _hoisted_1$h = ["id"];
+  var _sfc_main$y = vue.defineComponent({
     __name: "datepicker",
     props: {
       type: {},
@@ -368,12 +369,12 @@
           class: "snail-datepicker",
           id: vue.unref(id),
           onClick
-        }, null, 8, _hoisted_1$g);
+        }, null, 8, _hoisted_1$h);
       };
     }
   });
 
-  var _sfc_main$u = vue.defineComponent({
+  var _sfc_main$x = vue.defineComponent({
     ...{
       name: "Footer",
       inheritAttrs: true
@@ -404,13 +405,13 @@
           class: vue.normalizeClass(["snail-footer", {
             "start-divider": __props.divider
           }, __props.align || "right"])
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
           key: 0,
           size: "max",
           type: "default",
           onClick: _cache[0] || (_cache[0] = $event => emits("cancel")),
           textContent: vue.toDisplayString(__props.cancelName || "取消")
-        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
           key: 1,
           size: "max",
           type: "primary",
@@ -421,8 +422,8 @@
     }
   });
 
-  const _hoisted_1$f = ["textContent"];
-  var _sfc_main$t = vue.defineComponent({
+  const _hoisted_1$g = ["textContent"];
+  var _sfc_main$w = vue.defineComponent({
     ...{
       name: "Header",
       inheritAttrs: true
@@ -461,7 +462,7 @@
           key: 0,
           textContent: vue.toDisplayString(__props.title),
           class: vue.normalizeClass(["header-title", __props.titleAlign])
-        }, null, 10, _hoisted_1$f)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, null, 10, _hoisted_1$g)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 1,
           type: "close",
           size: 22,
@@ -473,18 +474,18 @@
     }
   });
 
-  const _hoisted_1$e = ["textContent"];
-  const _hoisted_2$9 = {
+  const _hoisted_1$f = ["textContent"];
+  const _hoisted_2$a = {
     key: 0,
     class: "required",
     textContent: "*"
   };
-  const _hoisted_3$7 = {
+  const _hoisted_3$8 = {
     class: "input-body"
   };
-  const _hoisted_4$5 = ["type", "value", "readonly", "placeholder", "title"];
-  const _hoisted_5$3 = ["title"];
-  var _sfc_main$s = vue.defineComponent({
+  const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
+  const _hoisted_5$4 = ["title"];
+  var _sfc_main$v = vue.defineComponent({
     ...{
       name: "Input",
       inheritAttrs: true
@@ -536,7 +537,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$e), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$9)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$7, [vue.createElementVNode("input", {
+        }, null, 8, _hoisted_1$f), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$a)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$8, [vue.createElementVNode("input", {
           ref: "input-el",
           type: __props.type || "text",
           value: inputModel.value,
@@ -545,15 +546,15 @@
           title: inputModel.value,
           onChange: onValueChange,
           onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-        }, null, 40, _hoisted_4$5), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, null, 40, _hoisted_4$6), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: "validate",
           title: validateRef.value
-        }, [vue.createVNode(_sfc_main$x, {
+        }, [vue.createVNode(_sfc_main$A, {
           type: "error",
           size: 16,
           color: "red"
-        })], 8, _hoisted_5$3)) : vue.createCommentVNode("", true)])], 2);
+        })], 8, _hoisted_5$4)) : vue.createCommentVNode("", true)])], 2);
       };
     }
   });
@@ -758,20 +759,20 @@
     return formatter;
   }
 
-  const _hoisted_1$d = {
+  const _hoisted_1$e = {
     key: 0,
     class: "number-prefix"
   };
-  const _hoisted_2$8 = ["textContent"];
-  const _hoisted_3$6 = ["inputmode", "placeholder", "title"];
-  const _hoisted_4$4 = {
+  const _hoisted_2$9 = ["textContent"];
+  const _hoisted_3$7 = ["inputmode", "placeholder", "title"];
+  const _hoisted_4$5 = {
     key: 1,
     class: "number-suffix"
   };
-  const _hoisted_5$2 = ["textContent"];
-  const _hoisted_6$1 = ["title", "textContent"];
-  const _hoisted_7 = ["title", "textContent"];
-  var _sfc_main$r = vue.defineComponent({
+  const _hoisted_5$3 = ["textContent"];
+  const _hoisted_6$2 = ["title", "textContent"];
+  const _hoisted_7$1 = ["title", "textContent"];
+  var _sfc_main$u = vue.defineComponent({
     __name: "number",
     props: vue.mergeModels({
       placeholder: {},
@@ -918,10 +919,10 @@
             "has-prefix": vue.unref(hasPrefix),
             "has-suffix": vue.unref(hasSuffix)
           }])
-        }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [vue.createElementVNode("span", {
+        }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(prefix))
-        }, null, 8, _hoisted_2$8)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$9)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: vue.normalizeClass(["input-panel", vue.unref(controls)])
         }, [vue.withDirectives(vue.createElementVNode("input", {
           type: "text",
@@ -933,18 +934,18 @@
           onFocus: _cache[1] || (_cache[1] = $event => vue.isRef(needBackSection) ? needBackSection.value = true : needBackSection = true),
           onPaste: _cache[2] || (_cache[2] = $event => vue.isRef(needBackSection) ? needBackSection.value = false : needBackSection = false),
           onBlur: _cache[3] || (_cache[3] = $event => formatOnEnd(true))
-        }, null, 40, _hoisted_3$6), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        }, null, 40, _hoisted_3$7), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
         }, [vue.createElementVNode("div", {
           class: "controls default subtract",
           onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$x, {
+        }, [vue.createVNode(_sfc_main$A, {
           type: "subtract",
           size: 20
         })]), vue.createElementVNode("div", {
           class: "controls default plus",
           onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$x, {
+        }, [vue.createVNode(_sfc_main$A, {
           type: "plus",
           size: 20
         })])], 64)) : vue.unref(controls) == "right" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -952,38 +953,38 @@
         }, [vue.createElementVNode("div", {
           class: "controls right plus",
           onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$x, {
+        }, [vue.createVNode(_sfc_main$A, {
           type: "arrow",
           size: 20,
           rotate: 270
         })]), vue.createElementVNode("div", {
           class: "controls right subtract",
           onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$x, {
+        }, [vue.createVNode(_sfc_main$A, {
           type: "arrow",
           size: 20,
           rotate: 90
-        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("span", {
+        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(suffix))
-        }, null, 8, _hoisted_5$2)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_5$3)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 2,
           class: "number-util ellipsis",
           title: upperTextRef.value,
           textContent: vue.toDisplayString(`大写：${upperTextRef.value || ""}`)
-        }, null, 8, _hoisted_6$1)) : vue.createCommentVNode("", true), vue.unref(thousands) == "below" ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_6$2)) : vue.createCommentVNode("", true), vue.unref(thousands) == "below" ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 3,
           class: "number-util ellipsis",
           title: thousandsTextRef.value,
           textContent: vue.toDisplayString(`千分位：${thousandsTextRef.value || ""}`)
-        }, null, 8, _hoisted_7)) : vue.createCommentVNode("", true)], 2);
+        }, null, 8, _hoisted_7$1)) : vue.createCommentVNode("", true)], 2);
       };
     }
   });
 
-  const _hoisted_1$c = ["placeholder", "readonly"];
+  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$q = vue.defineComponent({
+  var _sfc_main$t = vue.defineComponent({
     ...{
       name: "Search",
       inheritAttrs: true
@@ -1028,9 +1029,9 @@
           readonly: __props.readonly,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => textModel.value = $event),
           onKeyup: _cache[1] || (_cache[1] = $event => onSearch($event))
-        }, null, 40, _hoisted_1$c), [[vue.vModelText, textModel.value, void 0, {
+        }, null, 40, _hoisted_1$d), [[vue.vModelText, textModel.value, void 0, {
           trim: true
-        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$x, {
+        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$A, {
           class: "search-button",
           type: "custom",
           draw: searchIon,
@@ -1251,11 +1252,11 @@
     }
   }
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     class: "snail-confirm flex-column"
   };
-  const _hoisted_2$7 = ["innerHTML"];
-  var _sfc_main$p = vue.defineComponent({
+  const _hoisted_2$8 = ["innerHTML"];
+  var _sfc_main$s = vue.defineComponent({
     ...{
       name: "ConfirmContainer",
       inheritAttrs: true
@@ -1283,14 +1284,14 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$t, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [vue.createVNode(_sfc_main$w, {
           "use-to": "dialog",
           title: __props.title || "提示",
           onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
         }, null, 8, ["title"]), vue.createElementVNode("div", {
           class: "confirm-body",
           innerHTML: __props.message || "请确认？"
-        }, null, 8, _hoisted_2$7), vue.createVNode(_sfc_main$u, {
+        }, null, 8, _hoisted_2$8), vue.createVNode(_sfc_main$x, {
           align: "right",
           "cancel-name": __props.cancelName,
           "cancel-disabled": __props.cancelDisabled,
@@ -1303,7 +1304,7 @@
     }
   });
 
-  var _sfc_main$o = vue.defineComponent({
+  var _sfc_main$r = vue.defineComponent({
     ...{
       name: "Loading",
       inheritAttrs: true
@@ -1342,7 +1343,7 @@
     }
   });
 
-  var _sfc_main$n = vue.defineComponent({
+  var _sfc_main$q = vue.defineComponent({
     ...{
       name: "Dynamic",
       inheritAttrs: false
@@ -1366,7 +1367,7 @@
       const loadingComponent = vue.defineComponent({
         inheritAttrs: false,
         components: {
-          Loading: _sfc_main$o
+          Loading: _sfc_main$r
         },
         template: "<Loading :mask-disabled='true' />"
       });
@@ -1433,7 +1434,7 @@
     }
   });
 
-  var _sfc_main$m = vue.defineComponent({
+  var _sfc_main$p = vue.defineComponent({
     ...{
       name: "DialogContainer",
       inheritAttrs: true
@@ -1478,7 +1479,7 @@
           onClick: _cache[1] || (_cache[1] = vue.withModifiers($event => {
             __props.options.closeOnMask && vue.unref(closePopup)();
           }, ["self"]))
-        }, [vue.createVNode(_sfc_main$n, vue.mergeProps({
+        }, [vue.createVNode(_sfc_main$q, vue.mergeProps({
           class: "dialog-body",
           name: __props.options.name,
           component: __props.options.component,
@@ -1493,7 +1494,7 @@
     }
   });
 
-  var _sfc_main$l = vue.defineComponent({
+  var _sfc_main$o = vue.defineComponent({
     ...{
       name: "FollowContainer",
       inheritAttrs: true
@@ -1614,7 +1615,7 @@
         });
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
           class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1631,7 +1632,7 @@
     }
   });
 
-  var _sfc_main$k = vue.defineComponent({
+  var _sfc_main$n = vue.defineComponent({
     ...{
       name: "PopupContainer",
       inheritAttrs: true
@@ -1651,7 +1652,7 @@
         model = vue.shallowRef(void 0)
       } = __props.options;
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
           class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1669,12 +1670,12 @@
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     key: 1,
     class: "icon"
   };
-  const _hoisted_2$6 = ["innerHTML"];
-  var _sfc_main$j = vue.defineComponent({
+  const _hoisted_2$7 = ["innerHTML"];
+  var _sfc_main$m = vue.defineComponent({
     ...{
       name: "ToastContainer",
       inheritAttrs: true
@@ -1712,7 +1713,7 @@
           }),
           onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
           onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 0,
           class: "close-icon",
           type: "close",
@@ -1723,21 +1724,21 @@
           onClick: _cache[2] || (_cache[2] = $event => {
             vue.unref(closePopup)();
           })
-        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_sfc_main$x, {
+        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$A, {
           type: vue.unref(props).type,
           fill: "#707070",
           size: 20
         }, null, 8, ["type"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: "message",
           innerHTML: vue.unref(props).message
-        }, null, 8, _hoisted_2$6)], 38);
+        }, null, 8, _hoisted_2$7)], 38);
       };
     }
   });
 
   function usePopup() {
     function popup(options) {
-      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$k, options);
+      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$n, options);
       return addScope2Scopes(scope);
     }
     function dialog(options) {
@@ -1770,7 +1771,7 @@
           },
           onBeforeClose: fn => hook.register("onBeforeClose", fn)
         });
-        const descriptor = openPopup(_sfc_main$m, options, extOptions);
+        const descriptor = openPopup(_sfc_main$p, options, extOptions);
         scope = snail_core.useAsyncScope(deferred.promise);
         monitorDialog(descriptor, scope, deferred);
       }
@@ -1788,14 +1789,14 @@
           inPopup: "follow",
           target
         };
-        scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$l, 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$p,
+        component: _sfc_main$s,
         closeOnEscape: true,
         props: {
           ...options,
@@ -1805,7 +1806,7 @@
       });
     }
     function toast(type, message, options) {
-      return popupInCustomContainer(_sfc_main$j, {
+      return popupInCustomContainer(_sfc_main$m, {
         url: "#ToastContainer",
         props: {
           ...(options || Object.create(null)),
@@ -1838,7 +1839,7 @@
         },
         ...extOptions
       });
-      const descriptor = openPopup(container || _sfc_main$k, options, extOptions);
+      const descriptor = openPopup(container || _sfc_main$n, options, extOptions);
       const scope = snail_core.useAsyncScope(deferred.promise);
       scope.onDestroy(() => destroyPopup(descriptor, deferred));
       return scope;
@@ -1976,12 +1977,12 @@
     return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyREREODhFQ0M5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyREREODhFREM5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjJEREQ4OEVBQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjJEREQ4OEVCQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++keGxAAAA5lJREFUeNrsmktoE0EYx3eSTdpsk2abvnwcFBVp8QFqVPDgQaGgIogIoictelKKVhARBA8q+KAVrFqooh4qXgRfiHpTEHqw9iCKXqQHSVstpqlt0yabrP9p52K1yW72GTMf/JhZMrM7/3l+37REVVWhlMwjlJhxwVwwF8wFc8FcMBfsnIlGKg98TxRa9RbYAFYXUnl+XbjoRpiKXVXMU9qns3xK76CC/YC4QfA1MAg26aiTZGlQQ9la8AZ0g3VuENwLqsArsFVnXW+e30PgKVgGnoA+Nwi+Cw6DAHgGdmqoMwJoXJrJUcYPHoGN4C3Yl6e8rWv4Nmhma/kh2J6n/HW2JsdylLkKtoAPYAeYcPxYmmX32AjcAVHwPEfZFxreR2fAJ9Z5CbMaSYzceMxxDtN198vKo8Vt57ClYh0d4f/OtTTgOjpquaa8WEhldISM5DRYWYCXZdTS4DVoR9tSegdI9y6Nl1KBL5k/7JRto99HW/ZAtGralJ7DTtCPEUKUmqqKPlH0rtXgMZk2utms2jk0PEqPqt3gEOiybJdGjy5BcobmI7LUC7HrbRQ7HaR4PORoOBRoY+f0RbSp3spjqQNIPtEb8/vEqFMnixTwH0T6gPnwbZYIRk/uZWtHqApLQzaP7GyL1kSCPUinqIuKtjWZKhgvpFt1O82X+cXPXq9njdNHD2ZZC/aRTvZ4A20sN3OEz7IgXJDDkls8laV11aEBpHGaB62mCEbPNSA5QvNYO+88hDS6xcHABtbq9XiusMdTYJ4ZI3yBORdKZTBQ6zKnqq62OiQh7WdByzmjgqlzsWs6BAqW9xAiLHJdMECEY36f9zJ7pLt3oxHH4/j0O4kwWREoW8BuKvSYxG4utFoWjOoVHZErlg/+GP2I7ApwkgnXHy1h/VLntNJA76sROfgFI9CgoXh8OD72OJ3OHDA46Am4m3KhU7rSyJfRl2QiOaXVE3oPsU0mzPKw3RcAf5iiZEPaOkf9KsxcyVq7s1vu7SsZEQ5/LO81ydhk3I5Q05Y/tcQTExKLY/+9U2XV++PJVLMtZ7cdH0mlFfnnyPgIpm3s758y3Qj3NiNfY8sxlmeXNt2NhC/ej0grllXVdHIyVY/RbTD7G9iliZkXAIZsKqUspjjmjgolZlwwF1xigr8VoaYBI4I7ilBwl5Hw8JIwcx3aAha6XCj9t4ub4HzBjgfftLhgLpgL5oK5YC6YC+aCuWDt9luAAQC2EPxjL8cUkwAAAABJRU5ErkJggg==";
   }
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$a = {
     class: "snail-empty"
   };
-  const _hoisted_2$5 = ["src"];
-  const _hoisted_3$5 = ["textContent"];
-  var _sfc_main$i = vue.defineComponent({
+  const _hoisted_2$6 = ["src"];
+  const _hoisted_3$6 = ["textContent"];
+  var _sfc_main$l = vue.defineComponent({
     ...{
       name: "Empty",
       inheritAttrs: true
@@ -1994,23 +1995,23 @@
     setup(__props) {
       const defaultImageBase64 = getNoDataBase64Image();
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [vue.createElementVNode("img", {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("img", {
           src: __props.imageUrl || vue.unref(defaultImageBase64)
-        }, null, 8, _hoisted_2$5), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$6), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
           textContent: vue.toDisplayString(__props.message || "无数据")
-        }, null, 8, _hoisted_3$5)])]);
+        }, null, 8, _hoisted_3$6)])]);
       };
     }
   });
 
-  const _hoisted_1$8 = ["title"];
-  const _hoisted_2$4 = ["textContent"];
-  const _hoisted_3$4 = {
+  const _hoisted_1$9 = ["title"];
+  const _hoisted_2$5 = ["textContent"];
+  const _hoisted_3$5 = {
     key: 1,
     class: "select-status"
   };
-  var _sfc_main$h = vue.defineComponent({
+  var _sfc_main$k = vue.defineComponent({
     ...{
       name: "SelectNode",
       inheritAttrs: true
@@ -2055,15 +2056,15 @@
         }, [vue.createElementVNode("div", {
           class: "item-text ellipsis",
           textContent: vue.toDisplayString(__props.item.text)
-        }, null, 8, _hoisted_2$4), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 0,
           type: "arrow",
           color: "#8a9099"
-        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [vue.createVNode(_sfc_main$x, {
+        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [vue.createVNode(_sfc_main$A, {
           type: "success",
           color: "white",
           size: 12
-        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$8)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$9)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
         }, vue.renderList(vue.unref(showChildrenRef), child => {
           return vue.openBlock(), vue.createBlock(_component_SelectNode, {
@@ -2080,7 +2081,7 @@
     }
   });
 
-  var _sfc_main$g = vue.defineComponent({
+  var _sfc_main$j = vue.defineComponent({
     ...{
       name: "Select2Popup",
       inheritAttrs: true
@@ -2252,13 +2253,13 @@
           key: 0
         }, [vue.createTextVNode(" 暂无选项 ")], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 1
-        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
+        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch,
           key: "select-search"
         }), null, 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(itemsRef.value, item => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$h, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$k, {
             key: vue.unref(context).getKey(item),
             multiple: __props.multiple,
             item,
@@ -2267,7 +2268,7 @@
             onEnter: onEnterSelectNode,
             onClick: onClickSelectNode
           }, null, 8, ["multiple", "item", "context"]);
-        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
           key: 1,
           message: "无结果"
         })) : vue.createCommentVNode("", true), showClearButtonRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -2279,20 +2280,20 @@
     }
   });
 
-  const _hoisted_1$7 = {
+  const _hoisted_1$8 = {
     key: 0,
     class: "select-result"
   };
-  const _hoisted_2$3 = ["title", "textContent"];
-  const _hoisted_3$3 = ["textContent"];
-  const _hoisted_4$3 = {
+  const _hoisted_2$4 = ["title", "textContent"];
+  const _hoisted_3$4 = ["textContent"];
+  const _hoisted_4$4 = {
     key: 1,
     class: "placeholder"
   };
   onAppCreated((app, type) => {
-    type == "popup" && app.component("SelectPopup", _sfc_main$g);
+    type == "popup" && app.component("SelectPopup", _sfc_main$j);
   });
-  var _sfc_main$f = vue.defineComponent({
+  var _sfc_main$i = vue.defineComponent({
     ...{
       name: "Select",
       inheritAttrs: true
@@ -2424,15 +2425,15 @@
           ref: "select"
         }, [__props.items && __props.items.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
-        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
+        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
           class: "select-text ellipsis",
           title: selectedTextRef.value,
           textContent: vue.toDisplayString(selectedTextRef.value)
-        }, null, 8, _hoisted_2$3)])])) : (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_2$4)])])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           class: "placeholder",
           textContent: vue.toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-        }, null, 8, _hoisted_3$3)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, null, 8, _hoisted_3$4)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 2,
           type: "arrow",
           size: 24,
@@ -2440,12 +2441,12 @@
           style: {
             "transform": "rotate(90deg)"
           }
-        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, "暂无可选项"))], 2);
+        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, "暂无可选项"))], 2);
       };
     }
   });
 
-  var _sfc_main$e = vue.defineComponent({
+  var _sfc_main$h = vue.defineComponent({
     ...{
       name: "Switch",
       inheritAttrs: true
@@ -2494,8 +2495,8 @@
     }
   });
 
-  const _hoisted_1$6 = ["readonly", "placeholder", "rows"];
-  var _sfc_main$d = vue.defineComponent({
+  const _hoisted_1$7 = ["readonly", "placeholder", "rows"];
+  var _sfc_main$g = vue.defineComponent({
     ...{
       name: "Textarea"
     },
@@ -2555,25 +2556,100 @@
           onInput: _cache[2] || (_cache[2] = $event => emits("input", textareaDom.value.value)),
           onBlur: _cache[3] || (_cache[3] = $event => emits("blur", textareaDom.value.value)),
           onChange: _cache[4] || (_cache[4] = $event => emits("change", textareaDom.value.value))
-        }), null, 16, _hoisted_1$6)), [[vue.vModelText, valueModel.value]]);
+        }), null, 16, _hoisted_1$7)), [[vue.vModelText, valueModel.value]]);
       };
     }
   });
 
-  const _hoisted_1$5 = {
+  var _sfc_main$f = vue.defineComponent({
+    __name: "transitions",
+    props: {
+      group: {
+        type: Boolean
+      },
+      duration: {},
+      customClass: {},
+      effect: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const classNames = vue.computed(() => {
+        const array = [props.customClass || "snail-transition"];
+        if (snail_core.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 vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.group ? vue.TransitionGroup : vue.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: vue.withCtx(() => [vue.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 = vue.defineComponent({
+    __name: "element",
+    props: {
+      tag: {},
+      show: {
+        type: Boolean
+      },
+      showMode: {},
+      transition: {},
+      children: {}
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$f, vue.mergeProps({
+          group: false
+        }, __props.transition, {
+          duration: __props.transition ? __props.transition.duration : 0
+        }), {
+          default: vue.withCtx(() => [(__props.showMode == "vShow" ? true : __props.show) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(snail_core.correctString)(__props.tag, "div", true)), {
+            key: 0
+          }, {
+            default: vue.withCtx(() => [vue.createVNode(_sfc_main$f, vue.mergeProps(__props.children, {
+              duration: __props.children ? __props.children.duration : 0
+            }), {
+              default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+              _: 3
+            }, 16, ["duration"])]),
+            _: 3
+          }, 512)), [[vue.vShow, __props.showMode == "vShow" ? __props.show : true]]) : vue.createCommentVNode("", true)]),
+          _: 3
+        }, 16, ["duration"]);
+      };
+    }
+  });
+
+  const _hoisted_1$6 = {
     class: "fold-header"
   };
-  const _hoisted_2$2 = ["textContent"];
-  const _hoisted_3$2 = ["textContent"];
-  const _hoisted_4$2 = {
+  const _hoisted_2$3 = ["textContent"];
+  const _hoisted_3$3 = ["textContent"];
+  const _hoisted_4$3 = {
     key: 1,
     class: "status"
   };
-  const _hoisted_5$1 = {
+  const _hoisted_5$2 = {
     class: "fold-body",
     ref: "foldBody"
   };
-  var _sfc_main$c = vue.defineComponent({
+  var _sfc_main$d = vue.defineComponent({
     ...{
       name: "Fold",
       inheritAttrs: true
@@ -2643,23 +2719,23 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-fold", statusModel.value])
-        }, [vue.createElementVNode("div", _hoisted_1$5, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
+        }, [vue.createElementVNode("div", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
           class: "title ellipsis",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_2$2), !!__props.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_2$3), !!__props.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "subtitle ellipsis",
           textContent: vue.toDisplayString(__props.subtitle)
-        }, null, 8, _hoisted_3$2)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.createVNode(_sfc_main$x, {
+        }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createVNode(_sfc_main$A, {
           type: "arrow",
           title: statusModel.value == "expand" ? "收起" : "展开",
           onClick: onStatusClick
-        }, null, 8, ["title"])])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_5$1, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
+        }, null, 8, ["title"])])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_5$2, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
       };
     }
   });
 
-  var _sfc_main$b = vue.defineComponent({
+  var _sfc_main$c = vue.defineComponent({
     ...{
       name: "Scroll",
       inheritAttrs: true
@@ -2789,11 +2865,11 @@
     }
   });
 
-  var _sfc_main$a = vue.defineComponent({
+  var _sfc_main$b = vue.defineComponent({
     __name: "layout",
     props: {
       mode: {},
-      default: {},
+      main: {},
       left: {},
       right: {},
       top: {},
@@ -2803,8 +2879,8 @@
       const props = __props;
       const areaMap = vue.computed(() => {
         const map = Object.create(null);
-        map.default = {
-          scrollable: props.default && props.default.scroll != void 0,
+        map.main = {
+          scrollable: props.main && props.main.scroll != void 0,
           class: "main-area",
           style: void 0
         };
@@ -2850,12 +2926,12 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-layout", __props.mode])
-        }, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["top", "left", "default", "right", "bottom"], item => {
+        }, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["top", "left", "main", "right", "bottom"], item => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: item
           }, [areaMap.value[item] && _ctx.$slots[item] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 0
-          }, [areaMap.value[item].scrollable ? (vue.openBlock(), vue.createBlock(_sfc_main$b, vue.mergeProps({
+          }, [areaMap.value[item].scrollable ? (vue.openBlock(), vue.createBlock(_sfc_main$c, vue.mergeProps({
             key: 0,
             class: areaMap.value[item].class,
             style: areaMap.value[item].style
@@ -2874,6 +2950,36 @@
     }
   });
 
+  var _sfc_main$a = vue.defineComponent({
+    __name: "motion",
+    props: {
+      enter: {},
+      leave: {},
+      multiple: {
+        type: Boolean
+      },
+      duration: {},
+      mode: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const duration = snail_core.correctNumber(props.duration, 200);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.multiple ? vue.TransitionGroup : vue.Transition), {
+          appear: "",
+          type: "animation",
+          duration: vue.unref(duration),
+          mode: __props.mode,
+          "enter-active-class": vue.unref(snail_core.correctString)(props.enter, "fade-in", true),
+          "leave-active-class": vue.unref(snail_core.correctString)(props.leave, "fade-out", true)
+        }, {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 8, ["duration", "mode", "enter-active-class", "leave-active-class"]);
+      };
+    }
+  });
+
   var _sfc_main$9 = vue.defineComponent({
     ...{
       name: "Sort",
@@ -2975,7 +3081,7 @@
     }
   });
 
-  const _hoisted_1$4 = {
+  const _hoisted_1$5 = {
     class: "table-body"
   };
   var _sfc_main$8 = vue.defineComponent({
@@ -3003,7 +3109,7 @@
       const hStyleRef = vue.computed(() => snail_view.css.buildStyle(props.headerStyle));
       const fStyleRef = vue.computed(() => snail_view.css.buildStyle(props.footerStyle));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           class: vue.normalizeClass(["snail-table", {
             "start-border": __props.border == true
           }]),
@@ -3013,7 +3119,7 @@
           default: vue.withCtx(() => [vue.createElementVNode("div", {
             class: "table-header",
             style: vue.normalizeStyle(hStyleRef.value)
-          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
+          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$5, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
             class: "table-footer",
             style: vue.normalizeStyle(fStyleRef.value)
           }, [vue.renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -3092,60 +3198,20 @@
     }
   });
 
-  var _sfc_main$5 = vue.defineComponent({
-    __name: "transitions",
-    props: {
-      group: {
-        type: Boolean
-      },
-      duration: {},
-      customClass: {},
-      effect: {}
-    },
-    setup(__props) {
-      const props = __props;
-      const classNames = vue.computed(() => {
-        const array = [props.customClass || "snail-transition"];
-        if (snail_core.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 vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.group ? vue.TransitionGroup : vue.Transition), vue.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: vue.withCtx(() => [vue.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$3 = {
+  const _hoisted_1$4 = {
     key: 0,
     class: "node-fold"
   };
-  const _hoisted_2$1 = ["title", "textContent"];
-  const _hoisted_3$1 = {
+  const _hoisted_2$2 = ["title", "textContent"];
+  const _hoisted_3$2 = {
     class: "node-slot ellipsis"
   };
-  const _hoisted_4$1 = {
+  const _hoisted_4$2 = {
     key: 1,
     class: "snail-tree-children hidden",
     ref: "children"
   };
-  var _sfc_main$4 = vue.defineComponent({
+  var _sfc_main$5 = vue.defineComponent({
     ...{
       name: "TreeNode",
       inheritAttrs: true
@@ -3263,7 +3329,7 @@
           key: 1
         }, [_cache[4] || (_cache[4] = vue.createElementVNode("div", {
           class: "indent"
-        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 0,
           class: vue.normalizeClass(statusRef.value),
           type: "custom",
@@ -3275,7 +3341,7 @@
           class: "node-text ellipsis",
           title: __props.node.text,
           textContent: vue.toDisplayString(__props.node.text)
-        }, null, 8, _hoisted_2$1), vue.createElementVNode("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34)) : vue.createCommentVNode("", true), showRef.value && showChildrenRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.node.children, child => {
+        }, null, 8, _hoisted_2$2), vue.createElementVNode("div", _hoisted_3$2, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34)) : vue.createCommentVNode("", true), showRef.value && showChildrenRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.node.children, child => {
           return vue.openBlock(), vue.createBlock(_component_TreeNode, {
             key: __props.context.getKey(child),
             node: child,
@@ -3295,10 +3361,10 @@
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$3 = {
     class: "snail-tree"
   };
-  var _sfc_main$3 = vue.defineComponent({
+  var _sfc_main$4 = vue.defineComponent({
     ...{
       name: "Tree",
       inheritAttrs: true
@@ -3332,15 +3398,15 @@
         emits("click", node, parents);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$b, {
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$c, {
           "scroll-y": true
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.nodes || [], node => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$4, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$5, {
               key: vue.unref(context).getKey(node),
               node,
               parent: void 0,
@@ -3361,7 +3427,7 @@
     }
   });
 
-  var _sfc_main$2 = vue.defineComponent({
+  var _sfc_main$3 = vue.defineComponent({
     __name: "wrapper",
     props: {
       readonly: {
@@ -3383,14 +3449,14 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-wrapper", __props.inPopup ? "in-popup" : "in-normal"])
-        }, [__props.header && __props.header.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
+        }, [__props.header && __props.header.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, vue.mergeProps({
           key: 0
         }, __props.header || {
           useTo: "dialog",
           title: "对话框"
         }, {
           onClose: _cache[0] || (_cache[0] = $event => emits("cancel"))
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$b, vue.mergeProps({
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$c, vue.mergeProps({
           class: "wrapper-body"
         }, __props.content || {
           scrollX: false,
@@ -3398,7 +3464,7 @@
         }), {
           default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
           _: 3
-        }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$u, vue.mergeProps({
+        }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, vue.mergeProps({
           key: 1
         }, __props.footer || {}, {
           onCancel: _cache[1] || (_cache[1] = $event => emits("cancel")),
@@ -3412,7 +3478,7 @@
     snail_core.mustObject(options, "options");
     target instanceof HTMLElement || snail_core.throwError("target must be a HTMLElement");
     target.classList.add("snail-app");
-    const app = vue.createApp(_sfc_main$n, options);
+    const app = vue.createApp(_sfc_main$q, options);
     triggerAppCreated(app);
     app.mount(target);
     const scope = snail_core.useScope().onDestroy(() => app.unmount());
@@ -3420,36 +3486,230 @@
     return scope;
   }
 
-  const _hoisted_1$1 = {
+  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) snail_core.hasOwnProperty(MOTION, key) && Object.freeze(MOTION[key]);
+
+  function initStepByFormat(format) {
+    switch (format) {
+      case "yyyy":
+        return "year";
+      case "yyyy-MM":
+        return "month";
+      default:
+        return "day";
+    }
+  }
+  function electDateValue(min, max) {
+    return snail_core.getDateValue(new Date());
+  }
+  function buildYearItems(year, min, max) {
+    year = year - 10;
+    const items = new Array(18);
+    for (var index = 0; index < items.length; index++) {
+      year += 1;
+      items[index] = Object.freeze({
+        year,
+        disabled: min && min.year != void 0 && year < min.year || max && max.year != void 0 && year > max.year
+      });
+    }
+    return items;
+  }
+  function buildMonthItems(yearItem, min, max) {
+    const minDate = new Date(snail_core.formatDateValue(min, "yyyy-MM"));
+    const maxDate = new Date(snail_core.formatDateValue(max, "yyyy-MM"));
+    const items = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
+    return items.map((item, index) => {
+      const mi = {
+        text: item,
+        month: index + 1,
+        year: yearItem.year,
+        disabled: yearItem.disabled
+      };
+      if (mi.disabled != true) {
+        const date = new Date(snail_core.formatDateValue(mi, "yyyy-MM"));
+        mi.disabled = minDate != void 0 && date < minDate || maxDate != void 0 && date > maxDate;
+      }
+      return Object.freeze(mi);
+    });
+  }
+  function buildDayItems(monthItem, min, max) {
+    const minDate = new Date(snail_core.formatDateValue(min, "yyyy-MM-dd"));
+    const maxDate = new Date(snail_core.formatDateValue(max, "yyyy-MM-dd"));
+    const date = new Date(monthItem.year, monthItem.month - 1);
+    date.setDate(date.getDate() - (date.getDay() || 7) - 1);
+    const items = new Array(42);
+    for (var index = 0; index < items.length; index++) {
+      date.setDate(date.getDate() + 1);
+      const item = {
+        day: date.getDate(),
+        month: date.getMonth() + 1,
+        year: date.getFullYear(),
+        disabled: monthItem.disabled
+      };
+      if (item.disabled != true) {
+        const date2 = new Date(snail_core.formatDateValue(item, "yyyy-MM-dd"));
+        item.disabled = minDate != void 0 && date2 < minDate || maxDate != void 0 && date2 > maxDate;
+      }
+      items[index] = Object.freeze(item);
+    }
+    return items;
+  }
+  function buildHourItems(min, max) {
+    const items = new Array(24);
+    for (var index = 0; index < items.length; index++) {
+      items[index] = Object.freeze({
+        hour: index,
+        disabled: min && min.hour != void 0 && index < min.hour || max && max.hour != void 0 && index > max.hour
+      });
+    }
+    return items;
+  }
+  function buildMinuteItems(hourItem, min, max) {
+    const items = new Array(60);
+    const minNumber = min && min.minute != void 0 ? getTimeNumber(min.hour, min.minute, 0) : void 0;
+    const maxNumber = max && max.minute != void 0 ? getTimeNumber(max.hour, max.minute, 0) : void 0;
+    for (let index = 0; index < items.length; index++) {
+      const item = {
+        minute: index,
+        hour: hourItem.hour,
+        disabled: hourItem.disabled
+      };
+      if (item.disabled != true) {
+        const number = getTimeNumber(item.hour, item.minute, 0);
+        item.disabled = minNumber != void 0 && number < minNumber || maxNumber != void 0 && number > maxNumber;
+      }
+      items[index] = Object.freeze(item);
+    }
+    return items;
+  }
+  function buildSecondItems(minuteItem, min, max) {
+    const items = new Array(60);
+    const minNumber = min && min.minute != void 0 ? getTimeNumber(min.hour, min.minute, min.second) : void 0;
+    const maxNumber = max && max.minute != void 0 ? getTimeNumber(max.hour, max.minute, max.second) : void 0;
+    for (let index = 0; index < items.length; index++) {
+      const item = {
+        second: index,
+        minute: minuteItem.minute,
+        hour: minuteItem.hour,
+        disabled: minuteItem.disabled
+      };
+      if (item.disabled != true) {
+        const number = getTimeNumber(item.hour, item.minute, item.second);
+        item.disabled = minNumber != void 0 && number < minNumber || maxNumber != void 0 && number > maxNumber;
+      }
+      items[index] = Object.freeze(item);
+    }
+    return items;
+  }
+  function getTimeNumber(hour, minute, second) {
+    return (hour || 0) * 1e4 + (minute || 0) * 100 + (second || 0);
+  }
+  function isValidTime(format, time, min, max) {
+    time = snail_core.correctTimeValue(time);
+    if (time) {
+      min = snail_core.correctTimeValue({
+        ...min
+      });
+      const timeNumber = getTimeNumber(time.hour, time.minute, format == "HH:mm" ? 0 : time.second);
+      if (min != void 0) {
+        const minNumber = getTimeNumber(min.hour, min.minute, format == "HH:mm" ? 0 : max.second);
+        if (timeNumber < minNumber) {
+          return false;
+        }
+      }
+      max = snail_core.correctTimeValue({
+        ...max
+      });
+      if (max != void 0) {
+        const maxNumber = getTimeNumber(max.hour, max.minute, format == "HH:mm" ? 0 : max.second);
+        if (timeNumber > maxNumber) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+
+  const _hoisted_1$2 = {
     class: "tz-item",
     ref: "hour-items"
   };
-  const _hoisted_2 = ["textContent", "onClick"];
-  const _hoisted_3 = {
+  const _hoisted_2$1 = ["textContent", "onClick"];
+  const _hoisted_3$1 = {
     class: "tz-item",
     ref: "minute-items"
   };
-  const _hoisted_4 = ["textContent", "onClick"];
-  const _hoisted_5 = {
+  const _hoisted_4$1 = ["textContent", "onClick"];
+  const _hoisted_5$1 = {
     key: 0,
     class: "tz-item",
     ref: "second-items"
   };
-  const _hoisted_6 = ["textContent", "onClick"];
-  var _sfc_main$1 = vue.defineComponent({
+  const _hoisted_6$1 = ["textContent", "onClick"];
+  var _sfc_main$2 = vue.defineComponent({
     __name: "time-pc",
     props: {
       value: {},
-      initialDisabled: {
+      format: {},
+      min: {},
+      max: {},
+      toolbarDisabled: {
         type: Boolean
       },
       nowDisabled: {
         type: Boolean
       },
-      manager: {},
-      format: {},
-      min: {},
-      max: {},
+      clearDisabled: {
+        type: Boolean
+      },
+      popup: {},
+      picker: {},
       inPopup: {},
       closePopup: {
         type: Function
@@ -3467,203 +3727,543 @@
       } = _ref;
       const props = __props;
       const emits = __emit;
-      const tm = props.manager || snail_core.useTime({
-        format: props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss",
-        min: snail_core.parseTime(props.min),
-        max: snail_core.parseTime(props.max)
-      });
-      const {
-        toast
-      } = usePopup();
-      const {
-        inPopup,
-        closePopup
-      } = props;
-      const secondDisabled = tm.format == "HH:mm";
-      const tvRef = vue.ref();
+      const format = props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss";
+      const min = snail_core.parseTimeValue(props.min);
+      const max = snail_core.parseTimeValue(props.max);
+      const timeRef = vue.ref(snail_core.parseTimeValue(props.value) || snail_core.getTimeValue(new Date()));
+      const isValidTimeRef = vue.computed(() => format == "HH:mm" ? minuteItems.value && minuteItems.value[timeRef.value.minute].disabled != true : secondItems.value && secondItems.value[timeRef.value.second].disabled != true);
+      const hourItems = vue.shallowRef(buildHourItems(min, max));
+      const minuteItems = vue.shallowRef();
+      const secondItems = vue.shallowRef();
       const hItemsDom = vue.useTemplateRef("hour-items");
       const mItemsDom = vue.useTemplateRef("minute-items");
       const sItemsDom = vue.useTemplateRef("second-items");
-      function getTimeClass(type, value) {
-        switch (type) {
-          case "hour":
-            return {
-              active: tvRef.value.hour == value,
-              disabled: tm.validateHH(value) == false
-            };
-          case "minute":
-            return {
-              active: tvRef.value.minute == value,
-              disabled: tm.validateHHmm(tvRef.value.hour, value) == false
-            };
-          case "second":
-            return {
-              active: tvRef.value.second == value,
-              disabled: tm.validateHHmmss(tvRef.value.hour, tvRef.value.minute, value) == false
-            };
-        }
+      async function rebuildItems(time) {
+        time != void 0 && (timeRef.value = time);
+        minuteItems.value = buildMinuteItems(hourItems.value[timeRef.value.hour], min, max);
+        secondItems.value = buildSecondItems(minuteItems.value[timeRef.value.minute], min, max);
+        await vue.nextTick();
+        scrollIntoView(hItemsDom.value);
+        scrollIntoView(mItemsDom.value);
+        scrollIntoView(sItemsDom.value);
       }
       function scrollIntoView(items) {
-        let activeIndex = void 0,
-          firstValidIndex;
+        let activeIndex = void 0;
         for (var index = 0; index < (items ? items.children.length : 0); index++) {
           const ele = items.children[index];
-          if (ele.classList.contains("disabled") == true) {
-            continue;
-          }
-          if (firstValidIndex == void 0) {
-            firstValidIndex = index;
-          }
           if (ele.classList.contains("active") == true) {
             activeIndex = index;
             break;
           }
         }
-        let showIndex = activeIndex;
-        if (activeIndex == void 0) {
-          if (firstValidIndex != void 0) {
-            showIndex = firstValidIndex;
-          }
-        }
-        showIndex != void 0 && items.children[showIndex].scrollIntoView({
+        activeIndex != void 0 && items.children[activeIndex].scrollIntoView({
           behavior: "smooth",
           block: "center"
         });
       }
-      async function onTimeClick(type, value) {
-        switch (type) {
-          case "hour":
-            if (tm.validateHH(value)) {
-              tvRef.value.hour = value;
-              await vue.nextTick();
-              scrollIntoView(mItemsDom.value);
-            }
-            break;
-          case "minute":
-            if (tm.validateHHmm(tvRef.value.hour, value)) {
-              tvRef.value.minute = value;
-              await vue.nextTick();
-              scrollIntoView(sItemsDom.value);
-            }
-            break;
-          case "second":
-            if (tm.validateHHmmss(tvRef.value.hour, tvRef.value.minute, value)) {
-              tvRef.value.second = value;
-            }
-            break;
+      function onHourClick(item) {
+        if (item.disabled != true && timeRef.value.hour != item.hour) {
+          timeRef.value.hour = item.hour;
+          minuteItems.value = buildMinuteItems(item, min, max);
+          secondItems.value = buildSecondItems(minuteItems.value[timeRef.value.minute], min, max);
         }
       }
-      async function onNow() {
-        tvRef.value = snail_core.getTimeNow();
-        if (tm.validate(tvRef.value)) {
-          await vue.nextTick();
-          scrollIntoView(hItemsDom.value);
-          scrollIntoView(mItemsDom.value);
-          scrollIntoView(sItemsDom.value);
+      function onMinuteClick(item) {
+        if (item.disabled != true) {
+          if (format == "HH:mm") {
+            const value = snail_core.formatTimeValue(item, "HH:mm");
+            emits("confirm", value);
+            props.inPopup && props.closePopup(value);
+          } else if (timeRef.value.minute != item.minute) {
+            timeRef.value.minute = item.minute;
+            secondItems.value = buildSecondItems(item, min, max);
+          }
         }
       }
-      function onConfirm() {
-        tvRef.value = tm.correct(tvRef.value) || Object.create(null);
-        if (tvRef.value == void 0 || tvRef.value.hour == void 0) {
-          return toast("error", "请选选择时间");
-        }
-        if (secondDisabled != true && tvRef.value.minute == void 0) {
-          return toast("error", "请选选择时间");
+      function onSecondClick(item) {
+        if (item.disabled != true) {
+          timeRef.value.second = item.second;
+          onConfirm();
         }
-        const value = tm.toString(tvRef.value);
-        emits("confirm", value);
-        inPopup && closePopup(value);
       }
-      {
-        props.value && (tvRef.value = tm.parse(props.value));
-        tvRef.value || props.initialDisabled || (tvRef.value = tm.correct(snail_core.getTimeNow()));
-        tvRef.value || (tvRef.value = Object.create(null));
+      function onConfirm() {
+        if (isValidTimeRef.value == true) {
+          const value = snail_core.formatTimeValue(timeRef.value, format);
+          emits("confirm", value);
+          props.inPopup && props.closePopup(value);
+        }
       }
-      vue.onMounted(async () => {
-        await vue.nextTick();
-        scrollIntoView(hItemsDom.value);
-        scrollIntoView(mItemsDom.value);
-        scrollIntoView(sItemsDom.value);
-      });
+      vue.onMounted(rebuildItems);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
-          class: vue.normalizeClass(["snail-time-picker pc", {
-            "second-disabled": secondDisabled
+        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          class: vue.normalizeClass(["time-picker pc", {
+            "second-disabled": vue.unref(format) != "HH:mm:ss"
           }]),
           mode: "vertical"
-        }, {
-          default: vue.withCtx(() => [vue.createVNode(_sfc_main$5, {
+        }, vue.createSlots({
+          main: vue.withCtx(() => [vue.createVNode(_sfc_main$f, {
             group: true,
             effect: "down-up"
           }, {
-            default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(24).fill(void 0), (_, index) => {
+            default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hourItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["tzi-number", getTimeClass("hour", index)]),
-                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
-                onClick: $event => onTimeClick("hour", index)
-              }, null, 10, _hoisted_2);
-            }), 256))], 512), vue.createElementVNode("div", _hoisted_3, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(60).fill(void 0), (_, index) => {
+                class: vue.normalizeClass(["tzi-number", {
+                  active: item.hour == timeRef.value.hour,
+                  disabled: item.disabled
+                }]),
+                key: item.hour,
+                textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.hour, 2, "0")),
+                onClick: $event => onHourClick(item)
+              }, null, 10, _hoisted_2$1);
+            }), 128))], 512), vue.createElementVNode("div", _hoisted_3$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(minuteItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["tzi-number", getTimeClass("minute", index)]),
-                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
-                onClick: $event => onTimeClick("minute", index)
-              }, null, 10, _hoisted_4);
-            }), 256))], 512), secondDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(60).fill(void 0), (_, index) => {
+                class: vue.normalizeClass(["tzi-number", {
+                  active: item.minute == timeRef.value.minute,
+                  disabled: item.disabled
+                }]),
+                key: `${item.hour}:${item.minute}`,
+                textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.minute, 2, "0")),
+                onClick: $event => onMinuteClick(item)
+              }, null, 10, _hoisted_4$1);
+            }), 128))], 512), vue.unref(format) == "HH:mm:ss" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(secondItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["tzi-number", getTimeClass("second", index)]),
-                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
-                onClick: $event => onTimeClick("second", index)
-              }, null, 10, _hoisted_6);
-            }), 256))], 512)) : vue.createCommentVNode("", true)]),
-            bottom: vue.withCtx(() => [vue.createVNode(_sfc_main$y, {
-              type: "link",
-              size: "small",
-              textContent: "清空",
-              onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), vue.unref(inPopup) && vue.unref(closePopup)("")))
-            }), vue.unref(tm).validate(vue.unref(snail_core.getTimeNow)()) ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
-              key: 0,
-              type: "link",
-              size: "small",
-              textContent: "现在",
-              onClick: onNow
-            })) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$y, {
-              type: "link",
-              size: "small",
-              textContent: "确定",
-              onClick: onConfirm
-            })]),
+                class: vue.normalizeClass(["tzi-number", {
+                  active: item.second == timeRef.value.second,
+                  disabled: item.disabled
+                }]),
+                key: `${item.hour}:${item.minute}:${item.second}`,
+                textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.second, 2, "0")),
+                onClick: $event => onSecondClick(item)
+              }, null, 10, _hoisted_6$1);
+            }), 128))], 512)) : vue.createCommentVNode("", true)]),
             _: 1
           })]),
-          _: 1
-        }, 8, ["class"]);
+          _: 2
+        }, [__props.toolbarDisabled != true ? {
+          name: "bottom",
+          fn: vue.withCtx(() => [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+            key: 0,
+            type: "link",
+            size: "small",
+            textContent: "清空",
+            onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), __props.inPopup && __props.closePopup("")))
+          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+            key: 1,
+            type: "link",
+            size: "small",
+            textContent: "现在",
+            onClick: _cache[1] || (_cache[1] = $event => rebuildItems(vue.unref(snail_core.getTimeValue)(new Date())))
+          })) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$B, {
+            type: "link",
+            size: "small",
+            textContent: "确定",
+            class: vue.normalizeClass({
+              disabled: isValidTimeRef.value != true
+            }),
+            onClick: onConfirm
+          }, null, 8, ["class"])]),
+          key: "0"
+        } : void 0]), 1032, ["class"]);
+      };
+    }
+  });
+
+  const _hoisted_1$1 = ["textContent"];
+  const _hoisted_2 = ["textContent"];
+  const _hoisted_3 = ["textContent"];
+  const _hoisted_4 = ["textContent", "onClick"];
+  const _hoisted_5 = ["textContent", "onClick"];
+  const _hoisted_6 = ["textContent"];
+  const _hoisted_7 = ["textContent", "onClick"];
+  const _hoisted_8 = ["textContent"];
+  var _sfc_main$1 = vue.defineComponent({
+    __name: "date-pc",
+    props: {
+      value: {},
+      format: {},
+      min: {},
+      max: {},
+      minPickTime: {},
+      maxPickTime: {},
+      toolbarDisabled: {
+        type: Boolean
+      },
+      nowDisabled: {
+        type: Boolean
+      },
+      clearDisabled: {
+        type: Boolean
+      },
+      popup: {},
+      picker: {},
+      popupStatus: {},
+      target: {},
+      followX: {},
+      followY: {},
+      pinned: {},
+      inPopup: {},
+      closePopup: {
+        type: Function
+      }
+    },
+    emits: ["clear", "confirm"],
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
+      const props = __props;
+      const emits = __emit;
+      const {
+        inPopup
+      } = props;
+      const dateRef = vue.ref(snail_core.parseDateValue(props.value));
+      const format = snail_core.correctDateFormat(props.format, "yyyy-MM-dd");
+      const min = Object.freeze(snail_core.parseDateValue(props.min));
+      const max = Object.freeze(snail_core.parseDateValue(props.max));
+      const endStep = initStepByFormat(format);
+      const stepRef = vue.shallowRef(endStep);
+      const yearItems = vue.shallowRef();
+      const monthItems = vue.shallowRef();
+      const dayItemsRef = vue.shallowRef([]);
+      const isValidDateRef = vue.computed(validateDate);
+      const minPickTime = Object.freeze(snail_core.parseTimeValue(props.minPickTime));
+      const maxPickTime = Object.freeze(snail_core.parseTimeValue(props.maxPickTime));
+      const timeFormat = format == "yyyy-MM-dd HH:mm" ? "HH:mm" : format == "yyyy-MM-dd HH:mm:ss" ? "HH:mm:ss" : void 0;
+      const timeAreaDom = timeFormat ? vue.useTemplateRef("time-area") : void 0;
+      function validateDate() {
+        switch (format) {
+          case "yyyy":
+            {
+              const item = yearItems.value.find(item2 => item2.year == dateRef.value.year);
+              return item && item.disabled != true;
+            }
+          case "yyyy-MM":
+            {
+              const item = monthItems.value.find(item2 => item2.year == dateRef.value.year && item2.month == dateRef.value.month);
+              return item && item.disabled != true;
+            }
+          case "yyyy-MM-dd":
+            {
+              const item = dayItemsRef.value.find(item2 => item2.year == dateRef.value.year && item2.month == dateRef.value.month && item2.day == dateRef.value.day);
+              return item ? item.disabled != true : false;
+            }
+          case "yyyy-MM-dd HH:mm":
+          case "yyyy-MM-dd HH:mm:ss":
+            {
+              if (isValidTime(timeFormat, dateRef.value, minPickTime, maxPickTime) == true) {
+                const date = snail_core.getDateByValue(dateRef.value);
+                const disabled = min && date < snail_core.getDateByValue(min) || max && date > snail_core.getDateByValue(max);
+                return disabled != true;
+              }
+              return false;
+            }
+          default:
+            return false;
+        }
+      }
+      function buildPickerItems(step, basis) {
+        switch (step) {
+          case "year":
+            {
+              dateRef.value.year += basis * 18;
+              yearItems.value = buildYearItems(dateRef.value.year, min, max);
+              if (basis != 0) {
+                dateRef.value.month = 1;
+                dateRef.value.day = 1;
+              }
+              break;
+            }
+          case "month":
+            {
+              dateRef.value.year += basis;
+              let yearItem = (yearItems.value || []).find(item => item.year == dateRef.value.year);
+              if (yearItem == void 0) {
+                buildPickerItems("year", 0);
+                yearItem = yearItems.value[9];
+              }
+              monthItems.value = buildMonthItems(yearItem, min, max);
+              basis != 0 && (dateRef.value.day = 1);
+              break;
+            }
+          case "day":
+            {
+              const date = new Date(dateRef.value.year, dateRef.value.month - 1, 1);
+              date.setMonth(date.getMonth() + basis);
+              dateRef.value.year = date.getFullYear();
+              dateRef.value.month = date.getMonth() + 1;
+              let monthItem = (monthItems.value || []).find(item => item.year == dateRef.value.year && item.month == dateRef.value.month);
+              if (monthItem == void 0) {
+                buildPickerItems("month", 0);
+                monthItem = monthItems.value[dateRef.value.month - 1];
+              }
+              dayItemsRef.value = buildDayItems(monthItem, min, max);
+              basis != 0 && (dateRef.value.day = 1);
+              break;
+            }
+        }
+      }
+      function onSwitchStepClick(newValue) {
+        setTimeout(() => stepRef.value = newValue);
+      }
+      function onYearItemClick(item) {
+        if (item.disabled != true) {
+          dateRef.value.year = item.year;
+          if (format == "yyyy") {
+            const value = String(dateRef.value.year).padStart(4, "0");
+            emits("confirm", value);
+            props.inPopup && props.closePopup(value);
+          } else {
+            dateRef.value.month = 1;
+            monthItems.value = buildMonthItems(item, min, max);
+            onSwitchStepClick("month");
+          }
+        }
+      }
+      function onMonthItemClick(item) {
+        if (item.disabled != true) {
+          dateRef.value.year = item.year;
+          dateRef.value.month = item.month;
+          if (format == "yyyy-MM") {
+            const value = snail_core.formatDateValue(dateRef.value, "yyyy-MM");
+            emits("confirm", value);
+            props.inPopup && props.closePopup(value);
+          } else {
+            dateRef.value.day = 1;
+            dayItemsRef.value = buildDayItems(item, min, max);
+            onSwitchStepClick("day");
+          }
+        }
+      }
+      function onDayItemClick(item) {
+        if (item.disabled != true) {
+          const isNowMonth = item.year == dateRef.value.year && item.month == dateRef.value.month;
+          Object.assign(dateRef.value, {
+            year: item.year,
+            month: item.month,
+            day: item.day
+          });
+          if (format == "yyyy-MM-dd") {
+            const value = snail_core.formatDateValue(dateRef.value, "yyyy-MM-dd");
+            emits("confirm", value);
+            props.inPopup && props.closePopup(value);
+          } else {
+            isNowMonth || buildPickerItems("day", 0);
+          }
+        }
+      }
+      async function onSelectTime() {
+        if (props.picker == void 0 || timeAreaDom.value == void 0 || props.pinned.value == true) {
+          return;
+        }
+        props.pinned.value = true;
+        const task = props.picker.showTime(timeAreaDom.value, {
+          format: timeFormat,
+          value: snail_core.formatTimeValue(dateRef.value, timeFormat),
+          min: props.minPickTime,
+          max: props.minPickTime,
+          followX: "start",
+          followY: "before",
+          spaceX: -2,
+          spaceY: 4
+        });
+        task.finally(() => setTimeout(() => props.pinned.value = false)).then(text => {
+          if (text != void 0) {
+            const time = snail_core.parseTimeValue(text) || Object.create(null);
+            dateRef.value.hour = time.hour;
+            dateRef.value.minute = time.minute;
+            dateRef.value.second = time.second;
+          }
+        }, reason => {
+          console.error(reason);
+        });
+      }
+      function onNow() {
+        stepRef.value = initStepByFormat(format);
+        dateRef.value = snail_core.getDateValue(new Date());
+        buildPickerItems(stepRef.value, 0);
+      }
+      function onConfirm() {
+        if (isValidDateRef.value == true) {
+          const value = snail_core.formatDateValue(dateRef.value, format);
+          emits("confirm", value);
+          props.inPopup && props.closePopup(value);
+        }
+      }
+      dateRef.value == void 0 && (dateRef.value = electDateValue());
+      buildPickerItems(stepRef.value, 0);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          class: vue.normalizeClass(["date-picker pc", {
+            "time-now": __props.pinned && __props.pinned.value == true
+          }]),
+          mode: "vertical",
+          top: {
+            height: "40px"
+          },
+          bottom: {
+            height: "30px"
+          }
+        }, vue.createSlots({
+          top: vue.withCtx(() => [vue.createVNode(_sfc_main$A, {
+            type: "arrow",
+            rotate: 180,
+            size: 26,
+            onClick: _cache[0] || (_cache[0] = $event => buildPickerItems(stepRef.value, -1))
+          }), vue.createElementVNode("div", {
+            class: vue.normalizeClass(["header-content", stepRef.value])
+          }, [stepRef.value == "year" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            textContent: vue.toDisplayString(`${yearItems.value[0].year}年 - ${vue.unref(snail_core.getFromArray)(yearItems.value, -1).year}年`)
+          }, null, 8, _hoisted_1$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, [vue.createElementVNode("div", {
+            textContent: vue.toDisplayString(`${dateRef.value.year}年`),
+            onClick: _cache[1] || (_cache[1] = $event => onSwitchStepClick("year"))
+          }, null, 8, _hoisted_2), stepRef.value == "day" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            textContent: vue.toDisplayString(`${dateRef.value.month}月`),
+            onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
+          }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)], 64))], 2), vue.createVNode(_sfc_main$A, {
+            type: "arrow",
+            size: 26,
+            onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
+          })]),
+          main: vue.withCtx(() => [stepRef.value == "year" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+            key: 0
+          }, vue.renderList(yearItems.value, item => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(["year-item", {
+                "active": dateRef.value.year == item.year,
+                "disabled": item.disabled
+              }]),
+              key: item.year
+            }, [vue.createElementVNode("span", {
+              textContent: vue.toDisplayString(item.year),
+              onClick: $event => onYearItemClick(item)
+            }, null, 8, _hoisted_4)], 2);
+          }), 128)) : stepRef.value == "month" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, vue.renderList(monthItems.value, item => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(["month-item", {
+                "active": dateRef.value.month == item.month,
+                "disabled": item.disabled
+              }]),
+              key: `${item.year}-${item.month}`
+            }, [vue.createElementVNode("span", {
+              textContent: vue.toDisplayString(item.text),
+              onClick: $event => onMonthItemClick(item)
+            }, null, 8, _hoisted_5)], 2);
+          }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 2
+          }, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["日", "一", "二", "三", "四", "五", "六"], item => {
+            return vue.createElementVNode("div", {
+              class: "day-item week",
+              key: item,
+              textContent: vue.toDisplayString(item)
+            }, null, 8, _hoisted_6);
+          }), 64)), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dayItemsRef.value, item => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(["day-item", {
+                "active": dateRef.value.year == item.year && dateRef.value.month == item.month && dateRef.value.day == item.day,
+                "now-month": dateRef.value.year == item.year && dateRef.value.month == item.month,
+                "disabled": item.disabled
+              }]),
+              key: `${item.year}-${item.month}-${item.day}`
+            }, [vue.createElementVNode("span", {
+              textContent: vue.toDisplayString(item.day),
+              onClick: $event => onDayItemClick(item)
+            }, null, 8, _hoisted_7)], 2);
+          }), 128))], 64))]),
+          _: 2
+        }, [vue.unref(endStep) == stepRef.value && (__props.toolbarDisabled != true || vue.unref(timeFormat) != void 0) ? {
+          name: "bottom",
+          fn: vue.withCtx(() => [vue.unref(timeFormat) != void 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["time-area", {
+              placeholder: dateRef.value.hour == void 0
+            }]),
+            ref: "time-area",
+            textContent: vue.toDisplayString(vue.unref(snail_core.formatTimeValue)(dateRef.value, vue.unref(timeFormat)) || "选择时间"),
+            onClick: onSelectTime
+          }, null, 10, _hoisted_8)) : vue.createCommentVNode("", true), __props.toolbarDisabled != true ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+            key: 0,
+            type: "link",
+            size: "small",
+            textContent: "清空",
+            onClick: _cache[4] || (_cache[4] = $event => (emits("clear"), vue.unref(inPopup) && __props.closePopup("")))
+          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+            key: 1,
+            type: "link",
+            size: "small",
+            textContent: "现在",
+            onClick: onNow
+          })) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$B, {
+            type: "link",
+            size: "small",
+            textContent: "确定",
+            class: vue.normalizeClass({
+              "disabled": isValidDateRef.value != true
+            }),
+            onClick: onConfirm
+          }, null, 8, ["class"])]),
+          key: "0"
+        } : void 0]), 1032, ["class"]);
       };
     }
   });
 
   function usePicker() {
     const popup = usePopup();
+    function showDate(target, options) {
+      options = {
+        ...options
+      };
+      return showPicker(target, _sfc_main$1, options);
+    }
     function showTime(target, options) {
       options = {
         ...options
       };
-      delete options["manager"];
+      return showPicker(target, _sfc_main$2, options);
+    }
+    function showPicker(target, component, options) {
+      let popupOptions = Object.create(null);
+      if (options != void 0) {
+        popupOptions.followX = options.followX;
+        popupOptions.followY = options.followY;
+        popupOptions.spaceX = options.spaceX;
+        popupOptions.spaceY = options.spaceY;
+        popupOptions.spaceClient = options.spaceClien;
+        delete options.followX;
+        delete options.followY;
+        delete options.spaceX;
+        delete options.spaceY;
+        delete options.spaceClient;
+      }
       return popup.follow(target, {
-        component: _sfc_main$1,
-        followX: ["center"],
-        spaceClient: 10,
-        spaceY: 2,
-        spaceX: 2,
+        component,
+        followX: popupOptions.followX || "center",
+        followY: popupOptions.followY,
+        spaceX: snail_core.correctNumber(popupOptions.spaceX, 2),
+        spaceY: snail_core.correctNumber(popupOptions.spaceY, 2),
+        spaceClient: snail_core.correctNumber(popupOptions.spaceClient, 10),
         closeOnMask: true,
-        props: options
+        props: {
+          ...options,
+          picker: manager,
+          popup
+        }
       });
     }
-    {
-      const manager = Object.freeze(snail_core.mountScope({
-        showTime
-      }, "IPickerManager"));
-      manager.onDestroy(popup.destroy);
-      return manager;
-    }
+    const manager = Object.freeze(snail_core.mountScope({
+      showDate,
+      showTime
+    }, "IPickerManager"));
+    manager.onDestroy(popup.destroy);
+    return manager;
   }
 
   const _hoisted_1 = ["textContent"];
@@ -3751,12 +4351,12 @@
           onTouchstart: onStartDrag,
           onTouchmove: onDragMove,
           onTouchend: onDragEnd
-        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 0,
           type: "success",
           size: 20,
           color: "white"
-        })) : (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        })) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 1,
           type: "custom",
           size: 20,
@@ -3768,38 +4368,41 @@
   });
 
   const components = {
-    Button: _sfc_main$y,
-    Choose: _sfc_main$w,
-    DatePicker: _sfc_main$v,
-    Footer: _sfc_main$u,
-    Header: _sfc_main$t,
-    Icon: _sfc_main$x,
-    Input: _sfc_main$s,
-    Number: _sfc_main$r,
-    Search: _sfc_main$q,
-    Select: _sfc_main$f,
-    Switch: _sfc_main$e,
-    Textarea: _sfc_main$d,
-    Dynamic: _sfc_main$n,
-    Fold: _sfc_main$c,
-    Layout: _sfc_main$a,
-    Scroll: _sfc_main$b,
+    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$9,
     Table: _sfc_main$8,
     TableRow: _sfc_main$7,
     TableCol: _sfc_main$6,
-    Transitions: _sfc_main$5,
-    Tree: _sfc_main$3,
-    Wrapper: _sfc_main$2,
+    Transitions: _sfc_main$f,
+    Tree: _sfc_main$4,
+    Wrapper: _sfc_main$3,
     DragVerify: _sfc_main,
-    Empty: _sfc_main$i,
-    Loading: _sfc_main$o
+    Empty: _sfc_main$l,
+    Loading: _sfc_main$r
   };
 
   snail_core.onMountScope(scope => {
     vue.getCurrentScope() && vue.onScopeDispose(scope.destroy);
   });
 
+  exports.MOTION = MOTION;
   exports.components = components;
   exports.getSvgDraw = getSvgDraw;
   exports.mount = mount;