snail.vue 2.0.11 → 2.0.13

package/dist/snail.vue.js

@@ -1,10 +1,10 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, onMounted, onUnmounted, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, withModifiers, getCurrentInstance, resolveComponent, onBeforeUnmount, TransitionGroup, getCurrentScope, onScopeDispose } from 'vue';
-import { throwError, isArrayNotEmpty, isStringNotEmpty, useKey, isArray, useTimer, newId, script, isFunction, getFromArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isObject, isNumberNotNaN, hasAny, mustFunction, useScope, removeFromArray, mustObject, delay, defer, useAsyncScope, useHook, throwIfTrue, useTime, parseTime, getTimeNow, onMountScope } from 'snail.core';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, onMounted, onUnmounted, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, withModifiers, getCurrentInstance, resolveComponent, TransitionGroup, vShow, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
+import { throwError, isArrayNotEmpty, isStringNotEmpty, correctString, useKey, isArray, useTimer, newId, script, isFunction, getFromArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isObject, isNumberNotNaN, hasAny, mustFunction, useScope, removeFromArray, mustObject, delay, defer, useAsyncScope, useHook, correctNumber, throwIfTrue, hasOwnProperty, correctTimeValue, getDateValue, formatDateValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, getDateByValue, onMountScope } from 'snail.core';
 import { link, css, useObserver, useAnimation } from 'snail.view';
 
-const _hoisted_1$j = ["title"];
-var _sfc_main$y = defineComponent({
+const _hoisted_1$k = ["title"];
+var _sfc_main$B = defineComponent({
   ...{
     name: "Button",
     inheritAttrs: true
@@ -20,7 +20,7 @@ var _sfc_main$y = defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-button", [__props.size, __props.type]]),
         title: __props.title
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮", -1))])], 10, _hoisted_1$j);
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮", -1))])], 10, _hoisted_1$k);
     };
   }
 });
@@ -67,10 +67,10 @@ function getSvgDraw(iconType, draw) {
   }
 }
 
-const _hoisted_1$i = ["width", "height"];
-const _hoisted_2$b = ["textContent"];
-const _hoisted_3$9 = ["fill", "stroke", "stroke-width", "d"];
-var _sfc_main$x = 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 = defineComponent({
   ...{
     name: "Icon",
     inheritAttrs: true
@@ -79,6 +79,7 @@ var _sfc_main$x = defineComponent({
   props: {
     title: {},
     type: {},
+    viewBox: {},
     color: {},
     hoverColor: {},
     size: {},
@@ -92,7 +93,7 @@ var _sfc_main$x = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
         class: normalizeClass(["snail-icon", __props.type]),
-        viewBox: "0 0 1024 1024",
+        viewBox: unref(correctString)(__props.viewBox, "0 0 1024 1024", false),
         style: normalizeStyle(__props.rotate ? `transform: rotate(${__props.rotate}deg);` : ""),
         width: __props.size || 24,
         height: __props.size || 24,
@@ -100,23 +101,23 @@ var _sfc_main$x = defineComponent({
         onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
       }, [createElementVNode("title", {
         textContent: toDisplayString(__props.title || "")
-      }, null, 8, _hoisted_2$b), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getSvgDraw)(__props.type, __props.draw), d => {
+      }, null, 8, _hoisted_2$c), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getSvgDraw)(__props.type, __props.draw), d => {
         return openBlock(), 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 = 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 = defineComponent({
   ...{
     name: "Choose",
     inheritAttrs: true
@@ -192,10 +193,10 @@ var _sfc_main$w = defineComponent({
           key: 0,
           type: unref(type),
           checked: node.selected
-        }, null, 8, _hoisted_2$a)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_2$b)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["status", [node.selected ? "selected" : ""]])
-        }, [node.selected ? (openBlock(), createBlock(_sfc_main$x, {
+        }, [node.selected ? (openBlock(), createBlock(_sfc_main$A, {
           key: 0,
           type: "success",
           size: 12,
@@ -204,18 +205,18 @@ var _sfc_main$w = defineComponent({
           key: 2,
           class: "item-text",
           textContent: toDisplayString(node.item.text)
-        }, null, 8, _hoisted_3$8)) : createCommentVNode("", true), node.item.description ? (openBlock(), createElementBlock("span", {
+        }, null, 8, _hoisted_3$9)) : createCommentVNode("", true), node.item.description ? (openBlock(), createElementBlock("span", {
           key: 3,
           class: "item-des",
           textContent: toDisplayString(node.item.description)
-        }, null, 8, _hoisted_4$6)) : createCommentVNode("", true)], 14, _hoisted_1$h);
+        }, null, 8, _hoisted_4$7)) : createCommentVNode("", true)], 14, _hoisted_1$i);
       }), 128))], 2);
     };
   }
 });
 
-const _hoisted_1$g = ["id"];
-var _sfc_main$v = defineComponent({
+const _hoisted_1$h = ["id"];
+var _sfc_main$y = defineComponent({
   __name: "datepicker",
   props: {
     type: {},
@@ -366,12 +367,12 @@ var _sfc_main$v = defineComponent({
         class: "snail-datepicker",
         id: unref(id),
         onClick
-      }, null, 8, _hoisted_1$g);
+      }, null, 8, _hoisted_1$h);
     };
   }
 });
 
-var _sfc_main$u = defineComponent({
+var _sfc_main$x = defineComponent({
   ...{
     name: "Footer",
     inheritAttrs: true
@@ -402,13 +403,13 @@ var _sfc_main$u = defineComponent({
         class: normalizeClass(["snail-footer", {
           "start-divider": __props.divider
         }, __props.align || "right"])
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$y, {
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
         key: 0,
         size: "max",
         type: "default",
         onClick: _cache[0] || (_cache[0] = $event => emits("cancel")),
         textContent: toDisplayString(__props.cancelName || "取消")
-      }, null, 8, ["textContent"])) : createCommentVNode("", true), __props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$y, {
+      }, null, 8, ["textContent"])) : createCommentVNode("", true), __props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
         key: 1,
         size: "max",
         type: "primary",
@@ -419,8 +420,8 @@ var _sfc_main$u = defineComponent({
   }
 });
 
-const _hoisted_1$f = ["textContent"];
-var _sfc_main$t = defineComponent({
+const _hoisted_1$g = ["textContent"];
+var _sfc_main$w = defineComponent({
   ...{
     name: "Header",
     inheritAttrs: true
@@ -459,7 +460,7 @@ var _sfc_main$t = defineComponent({
         key: 0,
         textContent: toDisplayString(__props.title),
         class: normalizeClass(["header-title", __props.titleAlign])
-      }, null, 10, _hoisted_1$f)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$x, {
+      }, null, 10, _hoisted_1$g)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 1,
         type: "close",
         size: 22,
@@ -471,18 +472,18 @@ var _sfc_main$t = defineComponent({
   }
 });
 
-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 = defineComponent({
+const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
+const _hoisted_5$4 = ["title"];
+var _sfc_main$v = defineComponent({
   ...{
     name: "Input",
     inheritAttrs: true
@@ -534,7 +535,7 @@ var _sfc_main$s = defineComponent({
       }, [createElementVNode("span", {
         class: "text",
         textContent: toDisplayString(__props.title)
-      }, null, 8, _hoisted_1$e), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$9)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$7, [createElementVNode("input", {
+      }, null, 8, _hoisted_1$f), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$a)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$8, [createElementVNode("input", {
         ref: "input-el",
         type: __props.type || "text",
         value: inputModel.value,
@@ -543,15 +544,15 @@ var _sfc_main$s = defineComponent({
         title: inputModel.value,
         onChange: onValueChange,
         onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-      }, null, 40, _hoisted_4$5), !!validateRef.value ? (openBlock(), createElementBlock("span", {
+      }, null, 40, _hoisted_4$6), !!validateRef.value ? (openBlock(), createElementBlock("span", {
         key: 0,
         class: "validate",
         title: validateRef.value
-      }, [createVNode(_sfc_main$x, {
+      }, [createVNode(_sfc_main$A, {
         type: "error",
         size: 16,
         color: "red"
-      })], 8, _hoisted_5$3)) : createCommentVNode("", true)])], 2);
+      })], 8, _hoisted_5$4)) : createCommentVNode("", true)])], 2);
     };
   }
 });
@@ -756,20 +757,20 @@ function useFormatter(options) {
   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 = defineComponent({
+const _hoisted_5$3 = ["textContent"];
+const _hoisted_6$2 = ["title", "textContent"];
+const _hoisted_7$1 = ["title", "textContent"];
+var _sfc_main$u = defineComponent({
   __name: "number",
   props: mergeModels({
     placeholder: {},
@@ -916,10 +917,10 @@ var _sfc_main$r = defineComponent({
           "has-prefix": unref(hasPrefix),
           "has-suffix": unref(hasSuffix)
         }])
-      }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$d, [createElementVNode("span", {
+      }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$e, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(prefix))
-      }, null, 8, _hoisted_2$8)])) : createCommentVNode("", true), createElementVNode("div", {
+      }, null, 8, _hoisted_2$9)])) : createCommentVNode("", true), createElementVNode("div", {
         class: normalizeClass(["input-panel", unref(controls)])
       }, [withDirectives(createElementVNode("input", {
         type: "text",
@@ -931,18 +932,18 @@ var _sfc_main$r = defineComponent({
         onFocus: _cache[1] || (_cache[1] = $event => isRef(needBackSection) ? needBackSection.value = true : needBackSection = true),
         onPaste: _cache[2] || (_cache[2] = $event => isRef(needBackSection) ? needBackSection.value = false : needBackSection = false),
         onBlur: _cache[3] || (_cache[3] = $event => formatOnEnd(true))
-      }, null, 40, _hoisted_3$6), [[vModelText, displayValueRef.value]]), unref(controls) == "default" ? (openBlock(), createElementBlock(Fragment, {
+      }, null, 40, _hoisted_3$7), [[vModelText, displayValueRef.value]]), unref(controls) == "default" ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, [createElementVNode("div", {
         class: "controls default subtract",
         onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$x, {
+      }, [createVNode(_sfc_main$A, {
         type: "subtract",
         size: 20
       })]), createElementVNode("div", {
         class: "controls default plus",
         onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$x, {
+      }, [createVNode(_sfc_main$A, {
         type: "plus",
         size: 20
       })])], 64)) : unref(controls) == "right" ? (openBlock(), createElementBlock(Fragment, {
@@ -950,38 +951,38 @@ var _sfc_main$r = defineComponent({
       }, [createElementVNode("div", {
         class: "controls right plus",
         onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$x, {
+      }, [createVNode(_sfc_main$A, {
         type: "arrow",
         size: 20,
         rotate: 270
       })]), createElementVNode("div", {
         class: "controls right subtract",
         onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$x, {
+      }, [createVNode(_sfc_main$A, {
         type: "arrow",
         size: 20,
         rotate: 90
-      })])], 64)) : createCommentVNode("", true)], 2), unref(hasSuffix) ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("span", {
+      })])], 64)) : createCommentVNode("", true)], 2), unref(hasSuffix) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(suffix))
-      }, null, 8, _hoisted_5$2)])) : createCommentVNode("", true), unref(upper) ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_5$3)])) : createCommentVNode("", true), unref(upper) ? (openBlock(), createElementBlock("div", {
         key: 2,
         class: "number-util ellipsis",
         title: upperTextRef.value,
         textContent: toDisplayString(`大写：${upperTextRef.value || ""}`)
-      }, null, 8, _hoisted_6$1)) : createCommentVNode("", true), unref(thousands) == "below" ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_6$2)) : createCommentVNode("", true), unref(thousands) == "below" ? (openBlock(), createElementBlock("div", {
         key: 3,
         class: "number-util ellipsis",
         title: thousandsTextRef.value,
         textContent: toDisplayString(`千分位：${thousandsTextRef.value || ""}`)
-      }, null, 8, _hoisted_7)) : createCommentVNode("", true)], 2);
+      }, null, 8, _hoisted_7$1)) : 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 = defineComponent({
+var _sfc_main$t = defineComponent({
   ...{
     name: "Search",
     inheritAttrs: true
@@ -1026,9 +1027,9 @@ var _sfc_main$q = defineComponent({
         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), [[vModelText, textModel.value, void 0, {
+      }, null, 40, _hoisted_1$d), [[vModelText, textModel.value, void 0, {
         trim: true
-      }]]), createElementVNode("div", null, [createVNode(_sfc_main$x, {
+      }]]), createElementVNode("div", null, [createVNode(_sfc_main$A, {
         class: "search-button",
         type: "custom",
         draw: searchIon,
@@ -1249,11 +1250,11 @@ function deducePosition(strategy, targetStart, targetEnd, contentSize, clientSiz
   }
 }
 
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   class: "snail-confirm flex-column"
 };
-const _hoisted_2$7 = ["innerHTML"];
-var _sfc_main$p = defineComponent({
+const _hoisted_2$8 = ["innerHTML"];
+var _sfc_main$s = defineComponent({
   ...{
     name: "ConfirmContainer",
     inheritAttrs: true
@@ -1281,14 +1282,14 @@ var _sfc_main$p = defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [createVNode(_sfc_main$t, {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [createVNode(_sfc_main$w, {
         "use-to": "dialog",
         title: __props.title || "提示",
         onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
       }, null, 8, ["title"]), createElementVNode("div", {
         class: "confirm-body",
         innerHTML: __props.message || "请确认？"
-      }, null, 8, _hoisted_2$7), createVNode(_sfc_main$u, {
+      }, null, 8, _hoisted_2$8), createVNode(_sfc_main$x, {
         align: "right",
         "cancel-name": __props.cancelName,
         "cancel-disabled": __props.cancelDisabled,
@@ -1301,7 +1302,7 @@ var _sfc_main$p = defineComponent({
   }
 });
 
-var _sfc_main$o = defineComponent({
+var _sfc_main$r = defineComponent({
   ...{
     name: "Loading",
     inheritAttrs: true
@@ -1340,7 +1341,7 @@ var _sfc_main$o = defineComponent({
   }
 });
 
-var _sfc_main$n = defineComponent({
+var _sfc_main$q = defineComponent({
   ...{
     name: "Dynamic",
     inheritAttrs: false
@@ -1364,7 +1365,7 @@ var _sfc_main$n = defineComponent({
     const loadingComponent = defineComponent({
       inheritAttrs: false,
       components: {
-        Loading: _sfc_main$o
+        Loading: _sfc_main$r
       },
       template: "<Loading :mask-disabled='true' />"
     });
@@ -1431,7 +1432,7 @@ var _sfc_main$n = defineComponent({
   }
 });
 
-var _sfc_main$m = defineComponent({
+var _sfc_main$p = defineComponent({
   ...{
     name: "DialogContainer",
     inheritAttrs: true
@@ -1476,7 +1477,7 @@ var _sfc_main$m = defineComponent({
         onClick: _cache[1] || (_cache[1] = withModifiers($event => {
           __props.options.closeOnMask && unref(closePopup)();
         }, ["self"]))
-      }, [createVNode(_sfc_main$n, mergeProps({
+      }, [createVNode(_sfc_main$q, mergeProps({
         class: "dialog-body",
         name: __props.options.name,
         component: __props.options.component,
@@ -1491,7 +1492,7 @@ var _sfc_main$m = defineComponent({
   }
 });
 
-var _sfc_main$l = defineComponent({
+var _sfc_main$o = defineComponent({
   ...{
     name: "FollowContainer",
     inheritAttrs: true
@@ -1612,7 +1613,7 @@ var _sfc_main$l = defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$n, mergeProps({
+      return openBlock(), createBlock(_sfc_main$q, mergeProps({
         class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1629,7 +1630,7 @@ var _sfc_main$l = defineComponent({
   }
 });
 
-var _sfc_main$k = defineComponent({
+var _sfc_main$n = defineComponent({
   ...{
     name: "PopupContainer",
     inheritAttrs: true
@@ -1649,7 +1650,7 @@ var _sfc_main$k = defineComponent({
       model = shallowRef(void 0)
     } = __props.options;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$n, mergeProps({
+      return openBlock(), createBlock(_sfc_main$q, mergeProps({
         class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1667,12 +1668,12 @@ var _sfc_main$k = defineComponent({
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 1,
   class: "icon"
 };
-const _hoisted_2$6 = ["innerHTML"];
-var _sfc_main$j = defineComponent({
+const _hoisted_2$7 = ["innerHTML"];
+var _sfc_main$m = defineComponent({
   ...{
     name: "ToastContainer",
     inheritAttrs: true
@@ -1710,7 +1711,7 @@ var _sfc_main$j = defineComponent({
         }),
         onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
         onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$x, {
+      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         class: "close-icon",
         type: "close",
@@ -1721,21 +1722,21 @@ var _sfc_main$j = defineComponent({
         onClick: _cache[2] || (_cache[2] = $event => {
           unref(closePopup)();
         })
-      }, null, 8, ["fill"])) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$a, [createVNode(_sfc_main$x, {
+      }, null, 8, ["fill"])) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$b, [createVNode(_sfc_main$A, {
         type: unref(props).type,
         fill: "#707070",
         size: 20
       }, null, 8, ["type"])])) : createCommentVNode("", true), createElementVNode("div", {
         class: "message",
         innerHTML: 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) {
@@ -1768,7 +1769,7 @@ function usePopup() {
         },
         onBeforeClose: fn => hook.register("onBeforeClose", fn)
       });
-      const descriptor = openPopup(_sfc_main$m, options, extOptions);
+      const descriptor = openPopup(_sfc_main$p, options, extOptions);
       scope = useAsyncScope(deferred.promise);
       monitorDialog(descriptor, scope, deferred);
     }
@@ -1786,14 +1787,14 @@ function usePopup() {
         inPopup: "follow",
         target
       };
-      scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$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,
@@ -1803,7 +1804,7 @@ function usePopup() {
     });
   }
   function toast(type, message, options) {
-    return popupInCustomContainer(_sfc_main$j, {
+    return popupInCustomContainer(_sfc_main$m, {
       url: "#ToastContainer",
       props: {
         ...(options || Object.create(null)),
@@ -1836,7 +1837,7 @@ function usePopup() {
       },
       ...extOptions
     });
-    const descriptor = openPopup(container || _sfc_main$k, options, extOptions);
+    const descriptor = openPopup(container || _sfc_main$n, options, extOptions);
     const scope = useAsyncScope(deferred.promise);
     scope.onDestroy(() => destroyPopup(descriptor, deferred));
     return scope;
@@ -1974,12 +1975,12 @@ function getNoDataBase64Image() {
   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 = defineComponent({
+const _hoisted_2$6 = ["src"];
+const _hoisted_3$6 = ["textContent"];
+var _sfc_main$l = defineComponent({
   ...{
     name: "Empty",
     inheritAttrs: true
@@ -1992,23 +1993,23 @@ var _sfc_main$i = defineComponent({
   setup(__props) {
     const defaultImageBase64 = getNoDataBase64Image();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [createElementVNode("img", {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("img", {
         src: __props.imageUrl || unref(defaultImageBase64)
-      }, null, 8, _hoisted_2$5), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+      }, null, 8, _hoisted_2$6), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
         class: "message",
         textContent: 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 = defineComponent({
+var _sfc_main$k = defineComponent({
   ...{
     name: "SelectNode",
     inheritAttrs: true
@@ -2053,15 +2054,15 @@ var _sfc_main$h = defineComponent({
       }, [createElementVNode("div", {
         class: "item-text ellipsis",
         textContent: toDisplayString(__props.item.text)
-      }, null, 8, _hoisted_2$4), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$x, {
+      }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         type: "arrow",
         color: "#8a9099"
-      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$4, [createVNode(_sfc_main$x, {
+      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$A, {
         type: "success",
         color: "white",
         size: 12
-      })])) : createCommentVNode("", true)], 42, _hoisted_1$8)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
+      })])) : createCommentVNode("", true)], 42, _hoisted_1$9)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(unref(showChildrenRef), child => {
         return openBlock(), createBlock(_component_SelectNode, {
@@ -2078,7 +2079,7 @@ var _sfc_main$h = defineComponent({
   }
 });
 
-var _sfc_main$g = defineComponent({
+var _sfc_main$j = defineComponent({
   ...{
     name: "Select2Popup",
     inheritAttrs: true
@@ -2250,13 +2251,13 @@ var _sfc_main$g = defineComponent({
         key: 0
       }, [createTextVNode(" 暂无选项 ")], 64)) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [__props.search ? (openBlock(), createBlock(_sfc_main$q, mergeProps({
+      }, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
         key: 0
       }, __props.search, {
         onSearch,
         key: "select-search"
       }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(itemsRef.value, item => {
-        return openBlock(), createBlock(_sfc_main$h, {
+        return openBlock(), createBlock(_sfc_main$k, {
           key: unref(context).getKey(item),
           multiple: __props.multiple,
           item,
@@ -2265,7 +2266,7 @@ var _sfc_main$g = defineComponent({
           onEnter: onEnterSelectNode,
           onClick: onClickSelectNode
         }, null, 8, ["multiple", "item", "context"]);
-      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$i, {
+      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$l, {
         key: 1,
         message: "无结果"
       })) : createCommentVNode("", true), showClearButtonRef.value ? (openBlock(), createElementBlock("div", {
@@ -2277,20 +2278,20 @@ var _sfc_main$g = defineComponent({
   }
 });
 
-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 = defineComponent({
+var _sfc_main$i = defineComponent({
   ...{
     name: "Select",
     inheritAttrs: true
@@ -2422,15 +2423,15 @@ var _sfc_main$f = defineComponent({
         ref: "select"
       }, [__props.items && __props.items.length ? (openBlock(), createElementBlock(Fragment, {
         key: 0
-      }, [selectedItemsRef.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
+      }, [selectedItemsRef.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
         class: "select-text ellipsis",
         title: selectedTextRef.value,
         textContent: toDisplayString(selectedTextRef.value)
-      }, null, 8, _hoisted_2$3)])])) : (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$4)])])) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: "placeholder",
         textContent: toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-      }, null, 8, _hoisted_3$3)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$x, {
+      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 2,
         type: "arrow",
         size: 24,
@@ -2438,12 +2439,12 @@ var _sfc_main$f = defineComponent({
         style: {
           "transform": "rotate(90deg)"
         }
-      })) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$3, "暂无可选项"))], 2);
+      })) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$4, "暂无可选项"))], 2);
     };
   }
 });
 
-var _sfc_main$e = defineComponent({
+var _sfc_main$h = defineComponent({
   ...{
     name: "Switch",
     inheritAttrs: true
@@ -2492,8 +2493,8 @@ var _sfc_main$e = defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["readonly", "placeholder", "rows"];
-var _sfc_main$d = defineComponent({
+const _hoisted_1$7 = ["readonly", "placeholder", "rows"];
+var _sfc_main$g = defineComponent({
   ...{
     name: "Textarea"
   },
@@ -2553,25 +2554,100 @@ var _sfc_main$d = defineComponent({
         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)), [[vModelText, valueModel.value]]);
+      }), null, 16, _hoisted_1$7)), [[vModelText, valueModel.value]]);
     };
   }
 });
 
-const _hoisted_1$5 = {
+var _sfc_main$f = defineComponent({
+  __name: "transitions",
+  props: {
+    group: {
+      type: Boolean
+    },
+    duration: {},
+    customClass: {},
+    effect: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const classNames = computed(() => {
+      const array = [props.customClass || "snail-transition"];
+      if (isArray(props.effect)) {
+        props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
+      } else {
+        array.push(props.effect || "fade");
+      }
+      props.duration === 0 && array.push("no-duration");
+      return array.join(" ");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.group ? TransitionGroup : Transition), {
+        appear: "",
+        duration: __props.duration,
+        "enter-active-class": `${classNames.value} enter-active`,
+        "enter-from-class": `${classNames.value} enter-from`,
+        "enter-to-class": `${classNames.value} enter-to`,
+        "leave-active-class": `${classNames.value} leave-active`,
+        "leave-from-class": `${classNames.value} leave-from`,
+        "leave-to-class": `${classNames.value} leave-to`
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
+    };
+  }
+});
+
+var _sfc_main$e = defineComponent({
+  __name: "element",
+  props: {
+    tag: {},
+    show: {
+      type: Boolean
+    },
+    showMode: {},
+    transition: {},
+    children: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$f, mergeProps({
+        group: false
+      }, __props.transition, {
+        duration: __props.transition ? __props.transition.duration : 0
+      }), {
+        default: withCtx(() => [(__props.showMode == "vShow" ? true : __props.show) ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(correctString)(__props.tag, "div", true)), {
+          key: 0
+        }, {
+          default: withCtx(() => [createVNode(_sfc_main$f, mergeProps(__props.children, {
+            duration: __props.children ? __props.children.duration : 0
+          }), {
+            default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 16, ["duration"])]),
+          _: 3
+        }, 512)), [[vShow, __props.showMode == "vShow" ? __props.show : true]]) : createCommentVNode("", true)]),
+        _: 3
+      }, 16, ["duration"]);
+    };
+  }
+});
+
+const _hoisted_1$6 = {
   class: "fold-header"
 };
-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 = defineComponent({
+var _sfc_main$d = defineComponent({
   ...{
     name: "Fold",
     inheritAttrs: true
@@ -2641,23 +2717,23 @@ var _sfc_main$c = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-fold", statusModel.value])
-      }, [createElementVNode("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
+      }, [createElementVNode("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
         class: "title ellipsis",
         textContent: toDisplayString(__props.title)
-      }, null, 8, _hoisted_2$2), !!__props.subtitle ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$3), !!__props.subtitle ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "subtitle ellipsis",
         textContent: toDisplayString(__props.subtitle)
-      }, null, 8, _hoisted_3$2)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$2, [createVNode(_sfc_main$x, {
+      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$A, {
         type: "arrow",
         title: statusModel.value == "expand" ? "收起" : "展开",
         onClick: onStatusClick
-      }, null, 8, ["title"])])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default")], 512)], 2);
+      }, null, 8, ["title"])])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512)], 2);
     };
   }
 });
 
-var _sfc_main$b = defineComponent({
+var _sfc_main$c = defineComponent({
   ...{
     name: "Scroll",
     inheritAttrs: true
@@ -2787,11 +2863,11 @@ var _sfc_main$b = defineComponent({
   }
 });
 
-var _sfc_main$a = defineComponent({
+var _sfc_main$b = defineComponent({
   __name: "layout",
   props: {
     mode: {},
-    default: {},
+    main: {},
     left: {},
     right: {},
     top: {},
@@ -2801,8 +2877,8 @@ var _sfc_main$a = defineComponent({
     const props = __props;
     const areaMap = 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
       };
@@ -2848,12 +2924,12 @@ var _sfc_main$a = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-layout", __props.mode])
-      }, [(openBlock(), createElementBlock(Fragment, null, renderList(["top", "left", "default", "right", "bottom"], item => {
+      }, [(openBlock(), createElementBlock(Fragment, null, renderList(["top", "left", "main", "right", "bottom"], item => {
         return openBlock(), createElementBlock(Fragment, {
           key: item
         }, [areaMap.value[item] && _ctx.$slots[item] ? (openBlock(), createElementBlock(Fragment, {
           key: 0
-        }, [areaMap.value[item].scrollable ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
+        }, [areaMap.value[item].scrollable ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
           key: 0,
           class: areaMap.value[item].class,
           style: areaMap.value[item].style
@@ -2872,6 +2948,36 @@ var _sfc_main$a = defineComponent({
   }
 });
 
+var _sfc_main$a = defineComponent({
+  __name: "motion",
+  props: {
+    enter: {},
+    leave: {},
+    multiple: {
+      type: Boolean
+    },
+    duration: {},
+    mode: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const duration = correctNumber(props.duration, 200);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.multiple ? TransitionGroup : Transition), {
+        appear: "",
+        type: "animation",
+        duration: unref(duration),
+        mode: __props.mode,
+        "enter-active-class": unref(correctString)(props.enter, "fade-in", true),
+        "leave-active-class": unref(correctString)(props.leave, "fade-out", true)
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["duration", "mode", "enter-active-class", "leave-active-class"]);
+    };
+  }
+});
+
 var _sfc_main$9 = defineComponent({
   ...{
     name: "Sort",
@@ -2973,7 +3079,7 @@ var _sfc_main$9 = defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   class: "table-body"
 };
 var _sfc_main$8 = defineComponent({
@@ -3001,7 +3107,7 @@ var _sfc_main$8 = defineComponent({
     const hStyleRef = computed(() => css.buildStyle(props.headerStyle));
     const fStyleRef = computed(() => css.buildStyle(props.footerStyle));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: normalizeClass(["snail-table", {
           "start-border": __props.border == true
         }]),
@@ -3011,7 +3117,7 @@ var _sfc_main$8 = defineComponent({
         default: withCtx(() => [createElementVNode("div", {
           class: "table-header",
           style: normalizeStyle(hStyleRef.value)
-        }, [renderSlot(_ctx.$slots, "header")], 4), createElementVNode("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
+        }, [renderSlot(_ctx.$slots, "header")], 4), createElementVNode("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
           class: "table-footer",
           style: normalizeStyle(fStyleRef.value)
         }, [renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -3090,60 +3196,20 @@ var _sfc_main$6 = defineComponent({
   }
 });
 
-var _sfc_main$5 = defineComponent({
-  __name: "transitions",
-  props: {
-    group: {
-      type: Boolean
-    },
-    duration: {},
-    customClass: {},
-    effect: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const classNames = computed(() => {
-      const array = [props.customClass || "snail-transition"];
-      if (isArray(props.effect)) {
-        props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
-      } else {
-        array.push(props.effect || "fade");
-      }
-      console.log(array);
-      return array.join(" ");
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.group ? TransitionGroup : Transition), mergeProps(_ctx.$attrs, {
-        appear: "",
-        duration: __props.duration,
-        "enter-active-class": `${classNames.value} enter-active`,
-        "enter-from-class": `${classNames.value} enter-from`,
-        "enter-to-class": `${classNames.value} enter-to`,
-        "leave-active-class": `${classNames.value} leave-active`,
-        "leave-from-class": `${classNames.value} leave-from`,
-        "leave-to-class": `${classNames.value} leave-to`
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
-    };
-  }
-});
-
-const _hoisted_1$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 = defineComponent({
+var _sfc_main$5 = defineComponent({
   ...{
     name: "TreeNode",
     inheritAttrs: true
@@ -3261,7 +3327,7 @@ var _sfc_main$4 = defineComponent({
         key: 1
       }, [_cache[4] || (_cache[4] = createElementVNode("div", {
         class: "indent"
-      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$x, {
+      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         class: normalizeClass(statusRef.value),
         type: "custom",
@@ -3273,7 +3339,7 @@ var _sfc_main$4 = defineComponent({
         class: "node-text ellipsis",
         title: __props.node.text,
         textContent: toDisplayString(__props.node.text)
-      }, null, 8, _hoisted_2$1), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34)) : createCommentVNode("", true), showRef.value && showChildrenRef.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, child => {
+      }, null, 8, _hoisted_2$2), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34)) : createCommentVNode("", true), showRef.value && showChildrenRef.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, child => {
         return openBlock(), createBlock(_component_TreeNode, {
           key: __props.context.getKey(child),
           node: child,
@@ -3293,10 +3359,10 @@ var _sfc_main$4 = defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   class: "snail-tree"
 };
-var _sfc_main$3 = defineComponent({
+var _sfc_main$4 = defineComponent({
   ...{
     name: "Tree",
     inheritAttrs: true
@@ -3330,15 +3396,15 @@ var _sfc_main$3 = defineComponent({
       emits("click", node, parents);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [__props.search ? (openBlock(), createBlock(_sfc_main$q, mergeProps({
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
         key: 0
       }, __props.search, {
         onSearch
-      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$b, {
+      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$c, {
         "scroll-y": true
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes || [], node => {
-          return openBlock(), createBlock(_sfc_main$4, {
+          return openBlock(), createBlock(_sfc_main$5, {
             key: unref(context).getKey(node),
             node,
             parent: void 0,
@@ -3359,7 +3425,7 @@ var _sfc_main$3 = defineComponent({
   }
 });
 
-var _sfc_main$2 = defineComponent({
+var _sfc_main$3 = defineComponent({
   __name: "wrapper",
   props: {
     readonly: {
@@ -3381,14 +3447,14 @@ var _sfc_main$2 = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-wrapper", __props.inPopup ? "in-popup" : "in-normal"])
-      }, [__props.header && __props.header.disabled != true ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
+      }, [__props.header && __props.header.disabled != true ? (openBlock(), createBlock(_sfc_main$w, mergeProps({
         key: 0
       }, __props.header || {
         useTo: "dialog",
         title: "对话框"
       }, {
         onClose: _cache[0] || (_cache[0] = $event => emits("cancel"))
-      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$b, mergeProps({
+      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$c, mergeProps({
         class: "wrapper-body"
       }, __props.content || {
         scrollX: false,
@@ -3396,7 +3462,7 @@ var _sfc_main$2 = defineComponent({
       }), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3
-      }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (openBlock(), createBlock(_sfc_main$u, mergeProps({
+      }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (openBlock(), createBlock(_sfc_main$x, mergeProps({
         key: 1
       }, __props.footer || {}, {
         onCancel: _cache[1] || (_cache[1] = $event => emits("cancel")),
@@ -3410,7 +3476,7 @@ function mount(target, options, onDestroyed) {
   mustObject(options, "options");
   target instanceof HTMLElement || throwError("target must be a HTMLElement");
   target.classList.add("snail-app");
-  const app = createApp(_sfc_main$n, options);
+  const app = createApp(_sfc_main$q, options);
   triggerAppCreated(app);
   app.mount(target);
   const scope = useScope().onDestroy(() => app.unmount());
@@ -3418,36 +3484,230 @@ function mount(target, options, onDestroyed) {
   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) 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 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(formatDateValue(min, "yyyy-MM"));
+  const maxDate = new Date(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(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(formatDateValue(min, "yyyy-MM-dd"));
+  const maxDate = new Date(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(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 = correctTimeValue(time);
+  if (time) {
+    min = 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 = 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 = defineComponent({
+const _hoisted_6$1 = ["textContent", "onClick"];
+var _sfc_main$2 = 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
@@ -3465,203 +3725,543 @@ var _sfc_main$1 = defineComponent({
     } = _ref;
     const props = __props;
     const emits = __emit;
-    const tm = props.manager || useTime({
-      format: props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss",
-      min: parseTime(props.min),
-      max: parseTime(props.max)
-    });
-    const {
-      toast
-    } = usePopup();
-    const {
-      inPopup,
-      closePopup
-    } = props;
-    const secondDisabled = tm.format == "HH:mm";
-    const tvRef = ref();
+    const format = props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss";
+    const min = parseTimeValue(props.min);
+    const max = parseTimeValue(props.max);
+    const timeRef = ref(parseTimeValue(props.value) || getTimeValue(new Date()));
+    const isValidTimeRef = computed(() => format == "HH:mm" ? minuteItems.value && minuteItems.value[timeRef.value.minute].disabled != true : secondItems.value && secondItems.value[timeRef.value.second].disabled != true);
+    const hourItems = shallowRef(buildHourItems(min, max));
+    const minuteItems = shallowRef();
+    const secondItems = shallowRef();
     const hItemsDom = useTemplateRef("hour-items");
     const mItemsDom = useTemplateRef("minute-items");
     const sItemsDom = 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 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 nextTick();
-            scrollIntoView(mItemsDom.value);
-          }
-          break;
-        case "minute":
-          if (tm.validateHHmm(tvRef.value.hour, value)) {
-            tvRef.value.minute = value;
-            await 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 = getTimeNow();
-      if (tm.validate(tvRef.value)) {
-        await nextTick();
-        scrollIntoView(hItemsDom.value);
-        scrollIntoView(mItemsDom.value);
-        scrollIntoView(sItemsDom.value);
+    function onMinuteClick(item) {
+      if (item.disabled != true) {
+        if (format == "HH:mm") {
+          const value = 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(getTimeNow()));
-      tvRef.value || (tvRef.value = Object.create(null));
+    function onConfirm() {
+      if (isValidTimeRef.value == true) {
+        const value = formatTimeValue(timeRef.value, format);
+        emits("confirm", value);
+        props.inPopup && props.closePopup(value);
+      }
     }
-    onMounted(async () => {
-      await nextTick();
-      scrollIntoView(hItemsDom.value);
-      scrollIntoView(mItemsDom.value);
-      scrollIntoView(sItemsDom.value);
-    });
+    onMounted(rebuildItems);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
-        class: normalizeClass(["snail-time-picker pc", {
-          "second-disabled": secondDisabled
+      return openBlock(), createBlock(_sfc_main$b, {
+        class: normalizeClass(["time-picker pc", {
+          "second-disabled": unref(format) != "HH:mm:ss"
         }]),
         mode: "vertical"
-      }, {
-        default: withCtx(() => [createVNode(_sfc_main$5, {
+      }, createSlots({
+        main: withCtx(() => [createVNode(_sfc_main$f, {
           group: true,
           effect: "down-up"
         }, {
-          default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(Array(24).fill(void 0), (_, index) => {
+          default: withCtx(() => [createElementVNode("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(hourItems.value, item => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["tzi-number", getTimeClass("hour", index)]),
-              textContent: toDisplayString(String(index).padStart(2, "0")),
-              onClick: $event => onTimeClick("hour", index)
-            }, null, 10, _hoisted_2);
-          }), 256))], 512), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(Array(60).fill(void 0), (_, index) => {
+              class: normalizeClass(["tzi-number", {
+                active: item.hour == timeRef.value.hour,
+                disabled: item.disabled
+              }]),
+              key: item.hour,
+              textContent: toDisplayString(unref(padStart)(item.hour, 2, "0")),
+              onClick: $event => onHourClick(item)
+            }, null, 10, _hoisted_2$1);
+          }), 128))], 512), createElementVNode("div", _hoisted_3$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(minuteItems.value, item => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["tzi-number", getTimeClass("minute", index)]),
-              textContent: toDisplayString(String(index).padStart(2, "0")),
-              onClick: $event => onTimeClick("minute", index)
-            }, null, 10, _hoisted_4);
-          }), 256))], 512), secondDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(Array(60).fill(void 0), (_, index) => {
+              class: normalizeClass(["tzi-number", {
+                active: item.minute == timeRef.value.minute,
+                disabled: item.disabled
+              }]),
+              key: `${item.hour}:${item.minute}`,
+              textContent: toDisplayString(unref(padStart)(item.minute, 2, "0")),
+              onClick: $event => onMinuteClick(item)
+            }, null, 10, _hoisted_4$1);
+          }), 128))], 512), unref(format) == "HH:mm:ss" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(secondItems.value, item => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["tzi-number", getTimeClass("second", index)]),
-              textContent: toDisplayString(String(index).padStart(2, "0")),
-              onClick: $event => onTimeClick("second", index)
-            }, null, 10, _hoisted_6);
-          }), 256))], 512)) : createCommentVNode("", true)]),
-          bottom: withCtx(() => [createVNode(_sfc_main$y, {
-            type: "link",
-            size: "small",
-            textContent: "清空",
-            onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), unref(inPopup) && unref(closePopup)("")))
-          }), unref(tm).validate(unref(getTimeNow)()) ? (openBlock(), createBlock(_sfc_main$y, {
-            key: 0,
-            type: "link",
-            size: "small",
-            textContent: "现在",
-            onClick: onNow
-          })) : createCommentVNode("", true), createVNode(_sfc_main$y, {
-            type: "link",
-            size: "small",
-            textContent: "确定",
-            onClick: onConfirm
-          })]),
+              class: normalizeClass(["tzi-number", {
+                active: item.second == timeRef.value.second,
+                disabled: item.disabled
+              }]),
+              key: `${item.hour}:${item.minute}:${item.second}`,
+              textContent: toDisplayString(unref(padStart)(item.second, 2, "0")),
+              onClick: $event => onSecondClick(item)
+            }, null, 10, _hoisted_6$1);
+          }), 128))], 512)) : createCommentVNode("", true)]),
           _: 1
         })]),
-        _: 1
-      }, 8, ["class"]);
+        _: 2
+      }, [__props.toolbarDisabled != true ? {
+        name: "bottom",
+        fn: withCtx(() => [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+          key: 0,
+          type: "link",
+          size: "small",
+          textContent: "清空",
+          onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), __props.inPopup && __props.closePopup("")))
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+          key: 1,
+          type: "link",
+          size: "small",
+          textContent: "现在",
+          onClick: _cache[1] || (_cache[1] = $event => rebuildItems(unref(getTimeValue)(new Date())))
+        })) : createCommentVNode("", true), createVNode(_sfc_main$B, {
+          type: "link",
+          size: "small",
+          textContent: "确定",
+          class: 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 = 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 = ref(parseDateValue(props.value));
+    const format = correctDateFormat(props.format, "yyyy-MM-dd");
+    const min = Object.freeze(parseDateValue(props.min));
+    const max = Object.freeze(parseDateValue(props.max));
+    const endStep = initStepByFormat(format);
+    const stepRef = shallowRef(endStep);
+    const yearItems = shallowRef();
+    const monthItems = shallowRef();
+    const dayItemsRef = shallowRef([]);
+    const isValidDateRef = computed(validateDate);
+    const minPickTime = Object.freeze(parseTimeValue(props.minPickTime));
+    const maxPickTime = Object.freeze(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 ? 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 = getDateByValue(dateRef.value);
+              const disabled = min && date < getDateByValue(min) || max && date > 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 = 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 = 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: 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 = 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 = getDateValue(new Date());
+      buildPickerItems(stepRef.value, 0);
+    }
+    function onConfirm() {
+      if (isValidDateRef.value == true) {
+        const value = 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 openBlock(), createBlock(_sfc_main$b, {
+        class: normalizeClass(["date-picker pc", {
+          "time-now": __props.pinned && __props.pinned.value == true
+        }]),
+        mode: "vertical",
+        top: {
+          height: "40px"
+        },
+        bottom: {
+          height: "30px"
+        }
+      }, createSlots({
+        top: withCtx(() => [createVNode(_sfc_main$A, {
+          type: "arrow",
+          rotate: 180,
+          size: 26,
+          onClick: _cache[0] || (_cache[0] = $event => buildPickerItems(stepRef.value, -1))
+        }), createElementVNode("div", {
+          class: normalizeClass(["header-content", stepRef.value])
+        }, [stepRef.value == "year" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          textContent: toDisplayString(`${yearItems.value[0].year}年 - ${unref(getFromArray)(yearItems.value, -1).year}年`)
+        }, null, 8, _hoisted_1$1)) : (openBlock(), createElementBlock(Fragment, {
+          key: 1
+        }, [createElementVNode("div", {
+          textContent: toDisplayString(`${dateRef.value.year}年`),
+          onClick: _cache[1] || (_cache[1] = $event => onSwitchStepClick("year"))
+        }, null, 8, _hoisted_2), stepRef.value == "day" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          textContent: toDisplayString(`${dateRef.value.month}月`),
+          onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
+        }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$A, {
+          type: "arrow",
+          size: 26,
+          onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
+        })]),
+        main: withCtx(() => [stepRef.value == "year" ? (openBlock(true), createElementBlock(Fragment, {
+          key: 0
+        }, renderList(yearItems.value, item => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["year-item", {
+              "active": dateRef.value.year == item.year,
+              "disabled": item.disabled
+            }]),
+            key: item.year
+          }, [createElementVNode("span", {
+            textContent: toDisplayString(item.year),
+            onClick: $event => onYearItemClick(item)
+          }, null, 8, _hoisted_4)], 2);
+        }), 128)) : stepRef.value == "month" ? (openBlock(true), createElementBlock(Fragment, {
+          key: 1
+        }, renderList(monthItems.value, item => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["month-item", {
+              "active": dateRef.value.month == item.month,
+              "disabled": item.disabled
+            }]),
+            key: `${item.year}-${item.month}`
+          }, [createElementVNode("span", {
+            textContent: toDisplayString(item.text),
+            onClick: $event => onMonthItemClick(item)
+          }, null, 8, _hoisted_5)], 2);
+        }), 128)) : (openBlock(), createElementBlock(Fragment, {
+          key: 2
+        }, [(openBlock(), createElementBlock(Fragment, null, renderList(["日", "一", "二", "三", "四", "五", "六"], item => {
+          return createElementVNode("div", {
+            class: "day-item week",
+            key: item,
+            textContent: toDisplayString(item)
+          }, null, 8, _hoisted_6);
+        }), 64)), (openBlock(true), createElementBlock(Fragment, null, renderList(dayItemsRef.value, item => {
+          return openBlock(), createElementBlock("div", {
+            class: 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}`
+          }, [createElementVNode("span", {
+            textContent: toDisplayString(item.day),
+            onClick: $event => onDayItemClick(item)
+          }, null, 8, _hoisted_7)], 2);
+        }), 128))], 64))]),
+        _: 2
+      }, [unref(endStep) == stepRef.value && (__props.toolbarDisabled != true || unref(timeFormat) != void 0) ? {
+        name: "bottom",
+        fn: withCtx(() => [unref(timeFormat) != void 0 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["time-area", {
+            placeholder: dateRef.value.hour == void 0
+          }]),
+          ref: "time-area",
+          textContent: toDisplayString(unref(formatTimeValue)(dateRef.value, unref(timeFormat)) || "选择时间"),
+          onClick: onSelectTime
+        }, null, 10, _hoisted_8)) : createCommentVNode("", true), __props.toolbarDisabled != true ? (openBlock(), createElementBlock(Fragment, {
+          key: 1
+        }, [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+          key: 0,
+          type: "link",
+          size: "small",
+          textContent: "清空",
+          onClick: _cache[4] || (_cache[4] = $event => (emits("clear"), unref(inPopup) && __props.closePopup("")))
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+          key: 1,
+          type: "link",
+          size: "small",
+          textContent: "现在",
+          onClick: onNow
+        })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_sfc_main$B, {
+          type: "link",
+          size: "small",
+          textContent: "确定",
+          class: 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: correctNumber(popupOptions.spaceX, 2),
+      spaceY: correctNumber(popupOptions.spaceY, 2),
+      spaceClient: correctNumber(popupOptions.spaceClient, 10),
       closeOnMask: true,
-      props: options
+      props: {
+        ...options,
+        picker: manager,
+        popup
+      }
     });
   }
-  {
-    const manager = Object.freeze(mountScope({
-      showTime
-    }, "IPickerManager"));
-    manager.onDestroy(popup.destroy);
-    return manager;
-  }
+  const manager = Object.freeze(mountScope({
+    showDate,
+    showTime
+  }, "IPickerManager"));
+  manager.onDestroy(popup.destroy);
+  return manager;
 }
 
 const _hoisted_1 = ["textContent"];
@@ -3749,12 +4349,12 @@ var _sfc_main = defineComponent({
         onTouchstart: onStartDrag,
         onTouchmove: onDragMove,
         onTouchend: onDragEnd
-      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$x, {
+      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$A, {
         key: 0,
         type: "success",
         size: 20,
         color: "white"
-      })) : (openBlock(), createBlock(_sfc_main$x, {
+      })) : (openBlock(), createBlock(_sfc_main$A, {
         key: 1,
         type: "custom",
         size: 20,
@@ -3766,36 +4366,38 @@ var _sfc_main = defineComponent({
 });
 
 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
 };
 
 onMountScope(scope => {
   getCurrentScope() && onScopeDispose(scope.destroy);
 });
 
-export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
+export { MOTION, components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };