snail.vue 2.0.13 → 2.0.16

package/dist/snail.vue.js

@@ -1,10 +1,10 @@
 //@ sourceURL=/snail.vue.js
-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';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, onBeforeUnmount, onActivated, vShow, getCurrentScope, onScopeDispose } from 'vue';
+import { throwError, isObject, correctNumber, correctString, useKey, isArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isNumberNotNaN, isStringNotEmpty, hasAny, mustFunction, useScope, removeFromArray, mustObject, isArrayNotEmpty, hasOwnProperty, isString, script, delay, useTimer, defer, useAsyncScope, useHook, newId, throwIfTrue, isFunction, getTimeNumber, getDateValue, parseDate, formatDateValue, getDateByValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, isValidTime, getFromArray, onMountScope } from 'snail.core';
+import { css, link, useObserver, useAnimation } from 'snail.view';
 
-const _hoisted_1$k = ["title"];
-var _sfc_main$B = defineComponent({
+const _hoisted_1$l = ["title"];
+var _sfc_main$A = defineComponent({
   ...{
     name: "Button",
     inheritAttrs: true
@@ -20,16 +20,12 @@ var _sfc_main$B = 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$k);
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮", -1))])], 10, _hoisted_1$l);
     };
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
-function getSvgDraw(iconType, draw) {
+function getBuiltinIcon(iconType) {
   switch (iconType) {
     case "success":
       return ["M 102.272 613.285 a 48.9258 48.9258 0 0 1 -1.34967 -62.8444 l 26.0656 -31.2113 a 50.6129 50.6129 0 0 1 62.6756 -11.2192 l 199.583 121.218 c 19.4859 11.8097 49.0102 8.26677 65.9655 -8.01371 l 540.714 -519.625 a 40.3216 40.3216 0 0 1 57.9518 1.6871 l 37.9597 43.3583 a 47.5762 47.5762 0 0 1 -0.843545 62.4226 L 452.766 920.675 a 38.4658 38.4658 0 0 1 -56.8553 1.18097 L 102.272 613.285 Z"];
@@ -51,14 +47,14 @@ function getSvgDraw(iconType, draw) {
       return ["M651.3 514.2c0 8.2-3.1 16.4-9.4 22.6L426.4 752.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L574 514.2 381.1 321.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l215.5 215.5c6.2 6.3 9.4 14.5 9.4 22.6z"];
     case "datepicker":
       return ["M848.9 118h-93.5c-8.7 0-15.8-7.1-15.8-15.8V60.6c0-16.3-12.8-30.2-29.2-30.6-17-0.5-30.8 13.1-30.8 30v42.3c0 8.7-7.1 15.8-15.8 15.8H363.3c-8.7 0-15.8-7.1-15.8-15.8V60.6c0-16.3-12.8-30.2-29.2-30.6-17-0.5-30.8 13.1-30.8 30v42.3c0 8.7-7.1 15.8-15.8 15.8h-96.6C98.8 118 37 179.8 37 256.1v599.8C37 932.2 98.8 994 175.1 994h673.7c76.3 0 138.1-61.8 138.1-138.1V256.1c0.1-76.3-61.7-138.1-138-138.1zM97 256.1c0-43.2 35-78.1 78.1-78.1h96.6c8.7 0 15.8 7.1 15.8 15.8v41.7c0 16.3 12.8 30.2 29.2 30.6 17 0.5 30.8-13.1 30.8-30v-42.3c0-8.7 7.1-15.8 15.8-15.8h300.5c8.7 0 15.8 7.1 15.8 15.8v41.7c0 16.3 12.8 30.2 29.2 30.6 17 0.5 30.8-13.1 30.8-30v-42.3c0-8.7 7.1-15.8 15.8-15.8h93.5c43.2 0 78.1 35 78.1 78.1v45.4c0 11.4-9.2 20.6-20.6 20.6H117.6c-11.4 0-20.6-9.2-20.6-20.6v-45.4zM927 856c0 43.2-35 78.1-78.1 78.1H175.1c-43.1 0-78.1-35-78.1-78.1V402.7c0-11.4 9.2-20.6 20.6-20.6h788.9c11.4 0 20.6 9.2 20.6 20.6L927 856z", "M240.3 586.1H306c16.5 0 30-13.4 30-30 0-16.5-13.4-30-30-30h-65.7c-16.5 0-30 13.4-30 30s13.4 30 30 30zM479.2 586.1h65.7c16.5 0 30-13.4 30-30 0-16.5-13.4-30-30-30h-65.7c-16.5 0-30 13.4-30 30 0.1 16.6 13.5 30 30 30zM718.2 586.1h65.7c16.5 0 30-13.4 30-30 0-16.5-13.4-30-30-30h-65.7c-16.5 0-30 13.4-30 30s13.4 30 30 30zM312 730.1h-65.7c-16.5 0-30 13.4-30 30 0 16.5 13.4 30 30 30H312c16.5 0 30-13.4 30-30s-13.4-30-30-30zM551 730.1h-65.7c-16.5 0-30 13.4-30 30 0 16.5 13.4 30 30 30H551c16.5 0 30-13.4 30-30-0.1-16.6-13.5-30-30-30zM789.9 730.1h-65.7c-16.5 0-30 13.4-30 30 0 16.5 13.4 30 30 30h65.7c16.5 0 30-13.4 30-30s-13.4-30-30-30z"];
+    case "timepicker":
+      return ["M511.3 926.5c-55.9 0-110.2-11-161.2-32.6-49.3-20.9-93.6-50.7-131.7-88.8-38-38-67.9-82.3-88.8-131.7C108 622.3 97 568.1 97 512.2S108 402 129.6 351c20.9-49.3 50.7-93.6 88.8-131.7 38-38 82.3-67.9 131.7-88.8C401.2 108.9 455.4 98 511.3 98s110.2 11 161.2 32.6c49.3 20.9 93.6 50.7 131.7 88.8 38 38 67.9 82.3 88.8 131.7 21.6 51.1 32.6 105.3 32.6 161.2s-11 110.2-32.6 161.2c-20.9 49.3-50.7 93.6-88.8 131.7s-82.3 67.9-131.7 88.8c-51 21.5-105.3 32.5-161.2 32.5z m0-768.5C316 158 157.1 316.9 157.1 512.2S316 866.5 511.3 866.5s354.2-158.9 354.2-354.2S706.7 158 511.3 158z", "M640.1 702.1c-7.7 0-15.3-2.9-21.2-8.8l-128-127.9c-5.6-5.6-8.8-13.3-8.8-21.2V288c0-16.6 13.4-30 30-30s30 13.4 30 30v243.8l119.2 119.1c11.7 11.7 11.7 30.7 0 42.4-5.8 5.9-13.5 8.8-21.2 8.8z"];
     case "plus":
       return ["M 768 469.333 h -213.333 V 256 c 0 -25.6 -17.0667 -42.6667 -42.6667 -42.6667 s -42.6667 17.0667 -42.6667 42.6667 v 213.333 H 256 c -25.6 0 -42.6667 17.0667 -42.6667 42.6667 s 17.0667 42.6667 42.6667 42.6667 h 213.333 v 213.333 c 0 25.6 17.0667 42.6667 42.6667 42.6667 s 42.6667 -17.0667 42.6667 -42.6667 v -213.333 h 213.333 c 25.6 0 42.6667 -17.0667 42.6667 -42.6667 s -17.0667 -42.6667 -42.6667 -42.6667 Z"];
     case "subtract":
       return ["M768 554.666667H256c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z"];
     case "grip":
       return ["M 384 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z"];
-    case "custom":
-      return isArrayNotEmpty(draw) ? draw : isStringNotEmpty(draw) ? [draw] : throwError("options.draw must be a non-empty string or string array");
     default:
       {
         throwError(`not support icon type: ${iconType}.`);
@@ -67,57 +63,82 @@ function getSvgDraw(iconType, draw) {
   }
 }
 
-const _hoisted_1$j = ["viewBox", "width", "height"];
+const _hoisted_1$k = ["viewBox"];
 const _hoisted_2$c = ["textContent"];
-const _hoisted_3$a = ["fill", "stroke", "stroke-width", "d"];
-var _sfc_main$A = defineComponent({
-  ...{
-    name: "Icon",
-    inheritAttrs: true
-  },
+const _hoisted_3$a = ["d"];
+var _sfc_main$z = defineComponent({
   __name: "icon",
   props: {
     title: {},
+    custom: {
+      type: Boolean
+    },
     type: {},
-    viewBox: {},
+    button: {
+      type: Boolean
+    },
+    size: {},
     color: {},
     hoverColor: {},
-    size: {},
-    stroke: {},
-    strokeWidth: {},
-    draw: {},
-    rotate: {}
+    rotate: {},
+    viewBox: {}
   },
   setup(__props) {
+    const props = __props;
     const isMouseEnterRef = shallowRef(false);
+    const sizeRef = computed(() => {
+      if (isObject(props.size) == true) {
+        return {
+          width: correctNumber(props.size.width, 24),
+          height: correctNumber(props.size.height, 24)
+        };
+      } else {
+        const number = correctNumber(props.size, 24);
+        return {
+          width: number,
+          height: number
+        };
+      }
+    });
+    const styleRef = computed(() => {
+      const style = Object.create(null);
+      let fill = isMouseEnterRef.value ? correctString(props.hoverColor, props.color, true) : void 0;
+      fill == void 0 && (fill = correctString(props.color, void 0, true));
+      fill && (style.fill = fill);
+      const rotate = correctNumber(props.rotate, 0);
+      rotate != 0 && (style.transform = `rotate(${rotate}deg)`);
+      return style;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        class: normalizeClass(["snail-icon", __props.type]),
-        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,
+      return openBlock(), createElementBlock("svg", mergeProps({
+        class: ["snail-icon", __props.type, {
+          button: __props.button
+        }],
+        viewBox: unref(correctString)(__props.viewBox, "0 0 1024 1024", false)
+      }, sizeRef.value, {
+        style: styleRef.value,
         onMouseenter: _cache[0] || (_cache[0] = $event => isMouseEnterRef.value = true),
         onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
-      }, [createElementVNode("title", {
+      }), [createElementVNode("title", {
         textContent: toDisplayString(__props.title || "")
-      }, null, 8, _hoisted_2$c), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getSvgDraw)(__props.type, __props.draw), d => {
+      }, null, 8, _hoisted_2$c), __props.custom == true ? renderSlot(_ctx.$slots, "default", {
+        key: 0
+      }) : (openBlock(true), createElementBlock(Fragment, {
+        key: 1
+      }, renderList(unref(getBuiltinIcon)(__props.type), 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$a);
-      }), 256))], 46, _hoisted_1$j);
+      }), 256))], 16, _hoisted_1$k);
     };
   }
 });
 
-const _hoisted_1$i = ["title", "onClick"];
+const _hoisted_1$j = ["title", "onClick"];
 const _hoisted_2$b = ["type", "checked"];
 const _hoisted_3$9 = ["textContent"];
 const _hoisted_4$7 = ["textContent"];
-var _sfc_main$z = defineComponent({
+var _sfc_main$y = defineComponent({
   ...{
     name: "Choose",
     inheritAttrs: true
@@ -196,7 +217,7 @@ var _sfc_main$z = defineComponent({
         }, null, 8, _hoisted_2$b)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["status", [node.selected ? "selected" : ""]])
-        }, [node.selected ? (openBlock(), createBlock(_sfc_main$A, {
+        }, [node.selected ? (openBlock(), createBlock(_sfc_main$z, {
           key: 0,
           type: "success",
           size: 12,
@@ -209,168 +230,15 @@ var _sfc_main$z = defineComponent({
           key: 3,
           class: "item-des",
           textContent: toDisplayString(node.item.description)
-        }, null, 8, _hoisted_4$7)) : createCommentVNode("", true)], 14, _hoisted_1$i);
+        }, null, 8, _hoisted_4$7)) : createCommentVNode("", true)], 14, _hoisted_1$j);
       }), 128))], 2);
     };
   }
 });
 
-const _hoisted_1$h = ["id"];
-var _sfc_main$y = defineComponent({
-  __name: "datepicker",
-  props: {
-    type: {},
-    range: {
-      type: Boolean
-    },
-    format: {},
-    begin: {},
-    end: {},
-    min: {},
-    max: {},
-    zIndex: {},
-    timeDisabled: {
-      type: Boolean
-    },
-    secondDisabled: {
-      type: Boolean
-    },
-    cleanDisabled: {
-      type: Boolean
-    },
-    nowDisabled: {
-      type: Boolean
-    },
-    submitDisabled: {
-      type: Boolean
-    },
-    width: {},
-    height: {},
-    behindTop: {}
-  },
-  emits: ["change", "picker-focus", "picker-blur"],
-  setup(__props, _ref) {
-    let {
-      expose: __expose,
-      emit: __emit
-    } = _ref;
-    const props = __props;
-    const emits = __emit;
-    const {
-      onInterval,
-      onTimeout
-    } = useTimer();
-    const {
-      range
-    } = props;
-    const format = props.format || "yyyy-MM-dd";
-    const id = `DP${newId()}`.toUpperCase();
-    var pickerInitialTimer = void 0;
-    var pickerLastStatus = void 0;
-    var pickerStatusTimer = void 0;
-    const pickerStatusArray = [];
-    __expose({
-      showPicker
-    });
-    function initZanePopup(flag) {
-      const obj = window[flag] ? window[flag].$obj : void 0;
-      if (obj) {
-        obj.removeEventListener("mouseenter", onZanePopupFocus);
-        obj.removeEventListener("mouseleave", onZanePopupFocus);
-        obj.addEventListener("mouseenter", onZanePopupFocus);
-        obj.addEventListener("mouseleave", onZanePopupFocus);
-        return true;
-      }
-    }
-    function destroyZanePopup(flag) {
-      if (window[flag]) {
-        window[flag].removeCalendar && window[flag].removeCalendar();
-        delete window[flag];
-      }
-    }
-    function showPicker(delay) {
-      const div = document.getElementById(id);
-      div && (delay > 0 ? onTimeout(() => div.click(), delay) : div.click());
-    }
-    function onClick() {
-      if (pickerInitialTimer && pickerInitialTimer.destroyed != true) {
-        return;
-      }
-      pickerInitialTimer = onInterval(() => {
-        let counter = 0;
-        initZanePopup(id) && counter++;
-        range && initZanePopup(`${id}DOUBLE`) && counter++;
-        counter == (range ? 2 : 1) && pickerInitialTimer.destroy();
-      }, 10);
-      const timeoutScope = onTimeout(() => pickerInitialTimer.destroyed || pickerInitialTimer.destroy(), 5e3);
-      pickerInitialTimer.onDestroy(() => timeoutScope.destroyed || timeoutScope.destroy());
-    }
-    function onZaneMounted() {}
-    function onZanePopupFocus(e) {
-      const type = e.type == "mouseenter" ? "focus" : "blur";
-      pickerStatusArray.push(type);
-      pickerStatusTimer && pickerStatusTimer.destroy();
-      pickerStatusTimer = onTimeout(() => {
-        const lastStatus = getFromArray(pickerStatusArray, -1);
-        lastStatus && pickerLastStatus != lastStatus && emits(`picker-${lastStatus}`);
-        pickerLastStatus = lastStatus;
-        pickerStatusTimer = void 0;
-        pickerStatusArray.splice(0);
-      }, 0);
-    }
-    function onZaneDone(full, begin, end) {
-      if (format.includes("-") == true) {
-        begin && (begin = begin.replaceAll("/", "-"));
-        end && (end = end.replaceAll("/", "-"));
-      }
-      emits("change", begin, end);
-    }
-    link.register("/styles/zane-calendar.css");
-    onMounted(() => {
-      script.has("zane-calendar") || throwError(`zane-calendar module unregistered.`);
-      const zaneOptions = {
-        elem: `#${id}`,
-        type: `${range ? "double" : ""}${props.type || "day"}`,
-        format,
-        begintime: props.begin || "",
-        endtime: props.end || "",
-        min: props.min || "1900-10-01",
-        max: props.max || "",
-        zindex: props.zIndex || 1e4,
-        showtime: props.timeDisabled != true,
-        showsecond: props.secondDisabled != true,
-        showclean: props.cleanDisabled != true,
-        shownow: props.nowDisabled != true,
-        showsubmit: props.submitDisabled != true,
-        width: props.width || 280,
-        height: props.height || 300,
-        behindTop: props.behindTop || 4,
-        lang: "cn",
-        event: "click",
-        position: "fixed",
-        haveBotBtns: true,
-        mounted: onZaneMounted,
-        done: onZaneDone
-      };
-      script.load("zane-calendar").then(calendar => {
-        console.log(zaneOptions);
-        isFunction(calendar) || throwError("load zane-calendar failed: value is not a function.");
-        calendar(zaneOptions);
-      }, reason => throwError(reason));
-    });
-    onUnmounted(() => {
-      destroyZanePopup(id);
-      range && destroyZanePopup(`${id}DOUBLE`);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "snail-datepicker",
-        id: unref(id),
-        onClick
-      }, null, 8, _hoisted_1$h);
-    };
-  }
-});
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
 
 var _sfc_main$x = defineComponent({
   ...{
@@ -403,13 +271,13 @@ var _sfc_main$x = defineComponent({
         class: normalizeClass(["snail-footer", {
           "start-divider": __props.divider
         }, __props.align || "right"])
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         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$B, {
+      }, null, 8, ["textContent"])) : createCommentVNode("", true), __props.confirmDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
         key: 1,
         size: "max",
         type: "primary",
@@ -420,7 +288,7 @@ var _sfc_main$x = defineComponent({
   }
 });
 
-const _hoisted_1$g = ["textContent"];
+const _hoisted_1$i = ["textContent"];
 var _sfc_main$w = defineComponent({
   ...{
     name: "Header",
@@ -460,19 +328,20 @@ var _sfc_main$w = defineComponent({
         key: 0,
         textContent: toDisplayString(__props.title),
         class: normalizeClass(["header-title", __props.titleAlign])
-      }, null, 10, _hoisted_1$g)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
+      }, null, 10, _hoisted_1$i)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
         key: 1,
+        class: "close-icon",
         type: "close",
+        button: "",
         size: 22,
         color: __props.useTo == "page" ? "#2e3033" : "#464953",
-        class: "close-icon",
         onClick: _cache[0] || (_cache[0] = $event => emits("close"))
       }, null, 8, ["color"])) : createCommentVNode("", true)], 2);
     };
   }
 });
 
-const _hoisted_1$f = ["textContent"];
+const _hoisted_1$h = ["textContent"];
 const _hoisted_2$a = {
   key: 0,
   class: "required",
@@ -535,7 +404,7 @@ var _sfc_main$v = defineComponent({
       }, [createElementVNode("span", {
         class: "text",
         textContent: toDisplayString(__props.title)
-      }, 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", {
+      }, null, 8, _hoisted_1$h), __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,
@@ -548,8 +417,9 @@ var _sfc_main$v = defineComponent({
         key: 0,
         class: "validate",
         title: validateRef.value
-      }, [createVNode(_sfc_main$A, {
+      }, [createVNode(_sfc_main$z, {
         type: "error",
+        button: "",
         size: 16,
         color: "red"
       })], 8, _hoisted_5$4)) : createCommentVNode("", true)])], 2);
@@ -757,7 +627,7 @@ function useFormatter(options) {
   return formatter;
 }
 
-const _hoisted_1$e = {
+const _hoisted_1$g = {
   key: 0,
   class: "number-prefix"
 };
@@ -917,7 +787,7 @@ var _sfc_main$u = defineComponent({
           "has-prefix": unref(hasPrefix),
           "has-suffix": unref(hasSuffix)
         }])
-      }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$e, [createElementVNode("span", {
+      }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$g, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(prefix))
       }, null, 8, _hoisted_2$9)])) : createCommentVNode("", true), createElementVNode("div", {
@@ -937,29 +807,33 @@ var _sfc_main$u = defineComponent({
       }, [createElementVNode("div", {
         class: "controls default subtract",
         onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$A, {
+      }, [createVNode(_sfc_main$z, {
         type: "subtract",
+        button: "",
         size: 20
       })]), createElementVNode("div", {
         class: "controls default plus",
         onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$A, {
+      }, [createVNode(_sfc_main$z, {
         type: "plus",
+        button: "",
         size: 20
       })])], 64)) : unref(controls) == "right" ? (openBlock(), createElementBlock(Fragment, {
         key: 1
       }, [createElementVNode("div", {
         class: "controls right plus",
         onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-      }, [createVNode(_sfc_main$A, {
+      }, [createVNode(_sfc_main$z, {
         type: "arrow",
+        button: "",
         size: 20,
         rotate: 270
       })]), createElementVNode("div", {
         class: "controls right subtract",
         onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-      }, [createVNode(_sfc_main$A, {
+      }, [createVNode(_sfc_main$z, {
         type: "arrow",
+        button: "",
         size: 20,
         rotate: 90
       })])], 64)) : createCommentVNode("", true)], 2), unref(hasSuffix) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("span", {
@@ -980,8 +854,7 @@ var _sfc_main$u = defineComponent({
   }
 });
 
-const _hoisted_1$d = ["placeholder", "readonly"];
-const searchIon = "M 860.16 824.32 l -163.84 -163.84 c 102.4 -120.32 97.28 -302.08 -17.92 -414.72 c -120.32 -120.32 -314.88 -120.32 -435.2 0 c -120.32 120.32 -120.32 314.88 0 435.2 c 112.64 112.64 294.4 120.32 414.72 17.92 l 163.84 163.84 c 10.24 10.24 25.6 10.24 35.84 0 c 12.8 -12.8 12.8 -28.16 2.56 -38.4 Z M 281.6 642.56 C 181.76 542.72 181.76 381.44 281.6 281.6 c 99.84 -99.84 261.12 -99.84 360.96 0 c 99.84 99.84 99.84 261.12 0 360.96 c -99.84 102.4 -261.12 102.4 -360.96 0 Z";
+const _hoisted_1$f = ["placeholder", "readonly"];
 var _sfc_main$t = defineComponent({
   ...{
     name: "Search",
@@ -1027,15 +900,19 @@ var _sfc_main$t = 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$d), [[vModelText, textModel.value, void 0, {
+      }, null, 40, _hoisted_1$f), [[vModelText, textModel.value, void 0, {
         trim: true
-      }]]), createElementVNode("div", null, [createVNode(_sfc_main$A, {
+      }]]), createElementVNode("div", null, [createVNode(_sfc_main$z, {
         class: "search-button",
-        type: "custom",
-        draw: searchIon,
-        size: 24,
+        custom: "",
+        button: "",
         color: "#707070",
         onClick: _cache[2] || (_cache[2] = $event => onSearch(void 0))
+      }, {
+        default: withCtx(() => [...(_cache[3] || (_cache[3] = [createElementVNode("path", {
+          d: "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"
+        }, null, -1)]))]),
+        _: 1
       })])], 2);
     };
   }
@@ -1250,7 +1127,7 @@ function deducePosition(strategy, targetStart, targetEnd, contentSize, clientSiz
   }
 }
 
-const _hoisted_1$c = {
+const _hoisted_1$e = {
   class: "snail-confirm flex-column"
 };
 const _hoisted_2$8 = ["innerHTML"];
@@ -1282,7 +1159,7 @@ var _sfc_main$s = defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [createVNode(_sfc_main$w, {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [createVNode(_sfc_main$w, {
         "use-to": "dialog",
         title: __props.title || "提示",
         onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
@@ -1302,7 +1179,104 @@ var _sfc_main$s = defineComponent({
   }
 });
 
+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]);
+
 var _sfc_main$r = defineComponent({
+  __name: "motion",
+  props: {
+    multiple: {
+      type: Boolean
+    },
+    effect: {},
+    duration: {},
+    mode: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const durationRef = computed(() => {
+      const number = correctNumber(props.duration, 200);
+      return number > 0 ? number : 0;
+    });
+    const motionClassRef = computed(buildMotionClass);
+    function buildMotionClass() {
+      const effectClass = Object.create(null);
+      if (durationRef.value > 0) {
+        if (isString(props.effect) == false) {
+          const effect = props.effect || MOTION.fade;
+          effectClass.enterActiveClass = effect.enter;
+          effectClass.leaveActiveClass = effect.leave;
+        } else if (props.effect.length > 0) {
+          effectClass.enterActiveClass = `${props.effect} enter-active`;
+          effectClass.enterFromClass = `${props.effect} enter-from`;
+          effectClass.enterToClass = `${props.effect} enter-to`;
+          effectClass.leaveActiveClass = `${props.effect} leave-active`;
+          effectClass.leaveFromClass = `${props.effect} leave-from`;
+          effectClass.leaveToClass = `${props.effect} leave-to`;
+        }
+      }
+      return effectClass;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.multiple ? TransitionGroup : Transition), mergeProps({
+        appear: "",
+        duration: durationRef.value
+      }, __props.multiple ? void 0 : {
+        mode: __props.mode
+      }, motionClassRef.value), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["duration"]);
+    };
+  }
+});
+
+var _sfc_main$q = defineComponent({
   ...{
     name: "Loading",
     inheritAttrs: true
@@ -1326,8 +1300,8 @@ var _sfc_main$r = defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: __props.transition
+      return openBlock(), createBlock(_sfc_main$r, {
+        effect: unref(MOTION).fade
       }, {
         default: withCtx(() => [__props.show ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -1336,12 +1310,12 @@ var _sfc_main$r = defineComponent({
           }, __props.rootClass])
         }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$attrs)))], 2)) : createCommentVNode("", true)]),
         _: 3
-      }, 8, ["name"]);
+      }, 8, ["effect"]);
     };
   }
 });
 
-var _sfc_main$q = defineComponent({
+var _sfc_main$p = defineComponent({
   ...{
     name: "Dynamic",
     inheritAttrs: false
@@ -1365,7 +1339,7 @@ var _sfc_main$q = defineComponent({
     const loadingComponent = defineComponent({
       inheritAttrs: false,
       components: {
-        Loading: _sfc_main$r
+        Loading: _sfc_main$q
       },
       template: "<Loading :mask-disabled='true' />"
     });
@@ -1432,7 +1406,7 @@ var _sfc_main$q = defineComponent({
   }
 });
 
-var _sfc_main$p = defineComponent({
+var _sfc_main$o = defineComponent({
   ...{
     name: "DialogContainer",
     inheritAttrs: true
@@ -1477,7 +1451,7 @@ var _sfc_main$p = defineComponent({
         onClick: _cache[1] || (_cache[1] = withModifiers($event => {
           __props.options.closeOnMask && unref(closePopup)();
         }, ["self"]))
-      }, [createVNode(_sfc_main$q, mergeProps({
+      }, [createVNode(_sfc_main$p, mergeProps({
         class: "dialog-body",
         name: __props.options.name,
         component: __props.options.component,
@@ -1492,7 +1466,7 @@ var _sfc_main$p = defineComponent({
   }
 });
 
-var _sfc_main$o = defineComponent({
+var _sfc_main$n = defineComponent({
   ...{
     name: "FollowContainer",
     inheritAttrs: true
@@ -1613,7 +1587,7 @@ var _sfc_main$o = defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$q, mergeProps({
+      return openBlock(), createBlock(_sfc_main$p, mergeProps({
         class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1630,7 +1604,7 @@ var _sfc_main$o = defineComponent({
   }
 });
 
-var _sfc_main$n = defineComponent({
+var _sfc_main$m = defineComponent({
   ...{
     name: "PopupContainer",
     inheritAttrs: true
@@ -1650,7 +1624,7 @@ var _sfc_main$n = defineComponent({
       model = shallowRef(void 0)
     } = __props.options;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$q, mergeProps({
+      return openBlock(), createBlock(_sfc_main$p, mergeProps({
         class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
         style: {
           "z-index": __props.zIndex
@@ -1668,12 +1642,12 @@ var _sfc_main$n = defineComponent({
   }
 });
 
-const _hoisted_1$b = {
+const _hoisted_1$d = {
   key: 1,
   class: "icon"
 };
 const _hoisted_2$7 = ["innerHTML"];
-var _sfc_main$m = defineComponent({
+var _sfc_main$l = defineComponent({
   ...{
     name: "ToastContainer",
     inheritAttrs: true
@@ -1696,7 +1670,6 @@ var _sfc_main$m = defineComponent({
       closePopup
     } = __props.extOptions;
     const duration = props.duration > 0 ? props.duration : 1500;
-    const closeFillRef = ref("#707070");
     var destroyTimer;
     function onMouseEvent(isLeave) {
       destroyTimer && destroyTimer.destroy();
@@ -1709,22 +1682,22 @@ var _sfc_main$m = defineComponent({
         style: normalizeStyle({
           "z-index": __props.zIndex
         }),
-        onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
-        onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
+        onMouseenter: _cache[1] || (_cache[1] = $event => onMouseEvent(false)),
+        onMouseleave: _cache[2] || (_cache[2] = $event => onMouseEvent(true))
+      }, [unref(props).closeDisabled != true ? (openBlock(), createBlock(_sfc_main$z, {
         key: 0,
         class: "close-icon",
         type: "close",
-        fill: closeFillRef.value,
+        button: "",
         size: 20,
-        onMouseenter: _cache[0] || (_cache[0] = $event => closeFillRef.value = "red"),
-        onMouseleave: _cache[1] || (_cache[1] = $event => closeFillRef.value = "#707070"),
-        onClick: _cache[2] || (_cache[2] = $event => {
+        color: "#707070",
+        "hover-color": "red",
+        onClick: _cache[0] || (_cache[0] = $event => {
           unref(closePopup)();
         })
-      }, null, 8, ["fill"])) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$b, [createVNode(_sfc_main$A, {
+      })) : createCommentVNode("", true), unref(props).type ? (openBlock(), createElementBlock("div", _hoisted_1$d, [createVNode(_sfc_main$z, {
         type: unref(props).type,
-        fill: "#707070",
+        color: "#707070",
         size: 20
       }, null, 8, ["type"])])) : createCommentVNode("", true), createElementVNode("div", {
         class: "message",
@@ -1736,7 +1709,7 @@ var _sfc_main$m = defineComponent({
 
 function usePopup() {
   function popup(options) {
-    const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$n, options);
+    const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$m, options);
     return addScope2Scopes(scope);
   }
   function dialog(options) {
@@ -1769,7 +1742,7 @@ function usePopup() {
         },
         onBeforeClose: fn => hook.register("onBeforeClose", fn)
       });
-      const descriptor = openPopup(_sfc_main$p, options, extOptions);
+      const descriptor = openPopup(_sfc_main$o, options, extOptions);
       scope = useAsyncScope(deferred.promise);
       monitorDialog(descriptor, scope, deferred);
     }
@@ -1787,7 +1760,7 @@ function usePopup() {
         inPopup: "follow",
         target
       };
-      scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$o, options, extOptions);
+      scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$n, options, extOptions);
     }
     return addScope2Scopes(scope);
   }
@@ -1804,7 +1777,7 @@ function usePopup() {
     });
   }
   function toast(type, message, options) {
-    return popupInCustomContainer(_sfc_main$m, {
+    return popupInCustomContainer(_sfc_main$l, {
       url: "#ToastContainer",
       props: {
         ...(options || Object.create(null)),
@@ -1837,7 +1810,7 @@ function usePopup() {
       },
       ...extOptions
     });
-    const descriptor = openPopup(container || _sfc_main$n, options, extOptions);
+    const descriptor = openPopup(container || _sfc_main$m, options, extOptions);
     const scope = useAsyncScope(deferred.promise);
     scope.onDestroy(() => destroyPopup(descriptor, deferred));
     return scope;
@@ -1968,19 +1941,16 @@ function useSelectContext(items, selectsRef, separator) {
   return Object.freeze(context);
 }
 
-function getTwoArrowIconDraw() {
-  return "M759.467 533.333L469.333 243.2l29.867-29.867 320 320-320 320-29.867-29.866 290.134-290.134z m-298.667 0L170.667 243.2l29.866-29.867 320 320-320 320-29.866-29.866L460.8 533.333z";
-}
 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$a = {
+const _hoisted_1$c = {
   class: "snail-empty"
 };
 const _hoisted_2$6 = ["src"];
 const _hoisted_3$6 = ["textContent"];
-var _sfc_main$l = defineComponent({
+var _sfc_main$k = defineComponent({
   ...{
     name: "Empty",
     inheritAttrs: true
@@ -1993,7 +1963,7 @@ var _sfc_main$l = defineComponent({
   setup(__props) {
     const defaultImageBase64 = getNoDataBase64Image();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("img", {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [createElementVNode("img", {
         src: __props.imageUrl || unref(defaultImageBase64)
       }, null, 8, _hoisted_2$6), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
         class: "message",
@@ -2003,13 +1973,13 @@ var _sfc_main$l = defineComponent({
   }
 });
 
-const _hoisted_1$9 = ["title"];
+const _hoisted_1$b = ["title"];
 const _hoisted_2$5 = ["textContent"];
 const _hoisted_3$5 = {
   key: 1,
   class: "select-status"
 };
-var _sfc_main$k = defineComponent({
+var _sfc_main$j = defineComponent({
   ...{
     name: "SelectNode",
     inheritAttrs: true
@@ -2054,15 +2024,15 @@ var _sfc_main$k = defineComponent({
       }, [createElementVNode("div", {
         class: "item-text ellipsis",
         textContent: toDisplayString(__props.item.text)
-      }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$A, {
+      }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$z, {
         key: 0,
-        type: "arrow",
-        color: "#8a9099"
-      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$A, {
+        type: "arrow"
+      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$z, {
         type: "success",
-        color: "white",
-        size: 12
-      })])) : createCommentVNode("", true)], 42, _hoisted_1$9)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
+        button: "",
+        size: 12,
+        color: "white"
+      })])) : createCommentVNode("", true)], 42, _hoisted_1$b)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(unref(showChildrenRef), child => {
         return openBlock(), createBlock(_component_SelectNode, {
@@ -2079,7 +2049,7 @@ var _sfc_main$k = defineComponent({
   }
 });
 
-var _sfc_main$j = defineComponent({
+var _sfc_main$i = defineComponent({
   ...{
     name: "Select2Popup",
     inheritAttrs: true
@@ -2257,7 +2227,7 @@ var _sfc_main$j = defineComponent({
         onSearch,
         key: "select-search"
       }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(itemsRef.value, item => {
-        return openBlock(), createBlock(_sfc_main$k, {
+        return openBlock(), createBlock(_sfc_main$j, {
           key: unref(context).getKey(item),
           multiple: __props.multiple,
           item,
@@ -2266,7 +2236,7 @@ var _sfc_main$j = defineComponent({
           onEnter: onEnterSelectNode,
           onClick: onClickSelectNode
         }, null, 8, ["multiple", "item", "context"]);
-      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$l, {
+      }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$k, {
         key: 1,
         message: "无结果"
       })) : createCommentVNode("", true), showClearButtonRef.value ? (openBlock(), createElementBlock("div", {
@@ -2278,7 +2248,7 @@ var _sfc_main$j = defineComponent({
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$a = {
   key: 0,
   class: "select-result"
 };
@@ -2289,9 +2259,9 @@ const _hoisted_4$4 = {
   class: "placeholder"
 };
 onAppCreated((app, type) => {
-  type == "popup" && app.component("SelectPopup", _sfc_main$j);
+  type == "popup" && app.component("SelectPopup", _sfc_main$i);
 });
-var _sfc_main$i = defineComponent({
+var _sfc_main$h = defineComponent({
   ...{
     name: "Select",
     inheritAttrs: true
@@ -2423,7 +2393,7 @@ var _sfc_main$i = defineComponent({
         ref: "select"
       }, [__props.items && __props.items.length ? (openBlock(), createElementBlock(Fragment, {
         key: 0
-      }, [selectedItemsRef.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
+      }, [selectedItemsRef.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$a, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
         class: "select-text ellipsis",
         title: selectedTextRef.value,
         textContent: toDisplayString(selectedTextRef.value)
@@ -2431,20 +2401,18 @@ var _sfc_main$i = defineComponent({
         key: 1,
         class: "placeholder",
         textContent: toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$A, {
+      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$z, {
         key: 2,
         type: "arrow",
+        button: "",
         size: 24,
-        color: "#8a9099",
-        style: {
-          "transform": "rotate(90deg)"
-        }
+        rotate: 90
       })) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$4, "暂无可选项"))], 2);
     };
   }
 });
 
-var _sfc_main$h = defineComponent({
+var _sfc_main$g = defineComponent({
   ...{
     name: "Switch",
     inheritAttrs: true
@@ -2493,8 +2461,8 @@ var _sfc_main$h = defineComponent({
   }
 });
 
-const _hoisted_1$7 = ["readonly", "placeholder", "rows"];
-var _sfc_main$g = defineComponent({
+const _hoisted_1$9 = ["readonly", "placeholder", "rows"];
+var _sfc_main$f = defineComponent({
   ...{
     name: "Textarea"
   },
@@ -2554,87 +2522,12 @@ var _sfc_main$g = 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$7)), [[vModelText, valueModel.value]]);
+      }), null, 16, _hoisted_1$9)), [[vModelText, valueModel.value]]);
     };
   }
 });
 
-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 = {
+const _hoisted_1$8 = {
   class: "fold-header"
 };
 const _hoisted_2$3 = ["textContent"];
@@ -2647,7 +2540,7 @@ const _hoisted_5$2 = {
   class: "fold-body",
   ref: "foldBody"
 };
-var _sfc_main$d = defineComponent({
+var _sfc_main$e = defineComponent({
   ...{
     name: "Fold",
     inheritAttrs: true
@@ -2717,23 +2610,26 @@ var _sfc_main$d = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-fold", statusModel.value])
-      }, [createElementVNode("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
+      }, [createElementVNode("div", _hoisted_1$8, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
         class: "title ellipsis",
         textContent: toDisplayString(__props.title)
       }, null, 8, _hoisted_2$3), !!__props.subtitle ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "subtitle ellipsis",
         textContent: toDisplayString(__props.subtitle)
-      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$A, {
+      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$z, {
+        custom: false,
         type: "arrow",
+        button: "",
         title: statusModel.value == "expand" ? "收起" : "展开",
+        rotate: statusModel.value == "expand" ? -90 : 90,
         onClick: onStatusClick
-      }, null, 8, ["title"])])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512)], 2);
+      }, null, 8, ["title", "rotate"])])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512)], 2);
     };
   }
 });
 
-var _sfc_main$c = defineComponent({
+var _sfc_main$d = defineComponent({
   ...{
     name: "Scroll",
     inheritAttrs: true
@@ -2863,7 +2759,7 @@ var _sfc_main$c = defineComponent({
   }
 });
 
-var _sfc_main$b = defineComponent({
+var _sfc_main$c = defineComponent({
   __name: "layout",
   props: {
     mode: {},
@@ -2929,7 +2825,7 @@ var _sfc_main$b = defineComponent({
           key: item
         }, [areaMap.value[item] && _ctx.$slots[item] ? (openBlock(), createElementBlock(Fragment, {
           key: 0
-        }, [areaMap.value[item].scrollable ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
+        }, [areaMap.value[item].scrollable ? (openBlock(), createBlock(_sfc_main$d, mergeProps({
           key: 0,
           class: areaMap.value[item].class,
           style: areaMap.value[item].style
@@ -2948,37 +2844,7 @@ var _sfc_main$b = defineComponent({
   }
 });
 
-var _sfc_main$a = defineComponent({
-  __name: "motion",
-  props: {
-    enter: {},
-    leave: {},
-    multiple: {
-      type: Boolean
-    },
-    duration: {},
-    mode: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const duration = correctNumber(props.duration, 200);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.multiple ? TransitionGroup : Transition), {
-        appear: "",
-        type: "animation",
-        duration: unref(duration),
-        mode: __props.mode,
-        "enter-active-class": unref(correctString)(props.enter, "fade-in", true),
-        "leave-active-class": unref(correctString)(props.leave, "fade-out", true)
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, ["duration", "mode", "enter-active-class", "leave-active-class"]);
-    };
-  }
-});
-
-var _sfc_main$9 = defineComponent({
+var _sfc_main$b = defineComponent({
   ...{
     name: "Sort",
     inheritAttrs: true
@@ -3079,10 +2945,10 @@ var _sfc_main$9 = defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$7 = {
   class: "table-body"
 };
-var _sfc_main$8 = defineComponent({
+var _sfc_main$a = defineComponent({
   ...{
     name: "Table",
     inheritAttrs: true
@@ -3107,7 +2973,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$c, {
+      return openBlock(), createBlock(_sfc_main$d, {
         class: normalizeClass(["snail-table", {
           "start-border": __props.border == true
         }]),
@@ -3117,7 +2983,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$5, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
+        }, [renderSlot(_ctx.$slots, "header")], 4), createElementVNode("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
           class: "table-footer",
           style: normalizeStyle(fStyleRef.value)
         }, [renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -3127,7 +2993,7 @@ var _sfc_main$8 = defineComponent({
   }
 });
 
-var _sfc_main$7 = defineComponent({
+var _sfc_main$9 = defineComponent({
   ...{
     name: "TableRow",
     inheritAttrs: true
@@ -3150,7 +3016,7 @@ var _sfc_main$7 = defineComponent({
   }
 });
 
-var _sfc_main$6 = defineComponent({
+var _sfc_main$8 = defineComponent({
   ...{
     name: "TableCol",
     inheritAttrs: true
@@ -3196,7 +3062,7 @@ var _sfc_main$6 = defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "node-fold"
 };
@@ -3205,11 +3071,10 @@ const _hoisted_3$2 = {
   class: "node-slot ellipsis"
 };
 const _hoisted_4$2 = {
-  key: 1,
-  class: "snail-tree-children hidden",
+  class: "snail-tree-children",
   ref: "children"
 };
-var _sfc_main$5 = defineComponent({
+var _sfc_main$7 = defineComponent({
   ...{
     name: "TreeNode",
     inheritAttrs: true
@@ -3234,10 +3099,6 @@ var _sfc_main$5 = defineComponent({
     const {
       transition
     } = useAnimation();
-    const {
-      watcher
-    } = useReactive();
-    const treeNodeDom = useTemplateRef("tree-node");
     const isHoveredRef = shallowRef(false);
     const showRef = computed(() => __props.context.isShow(__props.node, true));
     const showChildrenRef = computed(() => __props.context.isShowChildren(__props.node, true));
@@ -3294,28 +3155,22 @@ var _sfc_main$5 = defineComponent({
       parents = __props.parent ? [__props.parent, ...parents] : parents;
       emits("click", child, parents);
     }
-    watcher(isHoveredRef, newValue => {
-      treeNodeDom.value.classList.remove("hovered");
-      newValue && treeNodeDom.value.classList.add("hovered");
-    });
-    watcher(() => __props.context.isActived(__props.node), newValue => {
-      if (treeNodeDom.value) {
-        treeNodeDom.value.classList.remove("actived");
-        newValue && treeNodeDom.value.classList.add("actived");
-      }
-    });
-    onMounted(() => {
+    onMounted(async () => {
+      await nextTick();
       if (childrenDom.value) {
         __props.options.expandLevel != void 0 && __props.options.expandLevel < nextLevel && toggleFold();
-        childrenDom.value && childrenDom.value.classList.remove("hidden");
         nodeEmitsDisabled = false;
       }
     });
+    onActivated(() => {});
     return (_ctx, _cache) => {
       const _component_TreeNode = resolveComponent("TreeNode", true);
-      return openBlock(), createElementBlock(Fragment, null, [showRef.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(["snail-tree-node", __props.node.clickable ? "clickable" : "", `level-${__props.level}`]),
+      return openBlock(), createElementBlock(Fragment, null, [withDirectives(createElementVNode("div", {
+        class: normalizeClass(["snail-tree-node", `level-${__props.level}`, {
+          clickable: __props.node.clickable,
+          hovered: isHoveredRef.value,
+          actived: __props.context.isActived(__props.node)
+        }]),
         ref: "tree-node",
         onMouseenter: _cache[0] || (_cache[0] = $event => isHoveredRef.value = true),
         onMouseleave: _cache[1] || (_cache[1] = $event => isHoveredRef.value = false),
@@ -3325,21 +3180,24 @@ var _sfc_main$5 = defineComponent({
         key: 0
       }, unref(slotOptions)))) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [_cache[4] || (_cache[4] = createElementVNode("div", {
+      }, [_cache[5] || (_cache[5] = createElementVNode("div", {
         class: "indent"
-      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$A, {
+      }, null, -1)), __props.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$6, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$z, {
         key: 0,
         class: normalizeClass(statusRef.value),
-        type: "custom",
-        size: 24,
-        color: "#8a8099",
-        draw: "M 298.667 426.667 l 213.333 256 l 213.333 -256 Z",
+        custom: "",
+        button: "",
         onClick: toggleFold
-      }, null, 8, ["class"])) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
+      }, {
+        default: withCtx(() => [...(_cache[4] || (_cache[4] = [createElementVNode("path", {
+          d: "M 298.667 426.667 l 213.333 256 l 213.333 -256 Z"
+        }, null, -1)]))]),
+        _: 1
+      }, 8, ["class"])) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
         class: "node-text ellipsis",
         title: __props.node.text,
         textContent: toDisplayString(__props.node.text)
-      }, 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 => {
+      }, null, 8, _hoisted_2$2), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34), [[vShow, showRef.value]]), withDirectives(createElementVNode("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,
@@ -3354,15 +3212,15 @@ var _sfc_main$5 = defineComponent({
           }, slotProps))]),
           _: 3
         }, 8, ["node", "parent", "options", "context"]);
-      }), 128))], 512)) : createCommentVNode("", true)], 64);
+      }), 128))], 512), [[vShow, showRef.value && showChildrenRef.value]])], 64);
     };
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$5 = {
   class: "snail-tree"
 };
-var _sfc_main$4 = defineComponent({
+var _sfc_main$6 = defineComponent({
   ...{
     name: "Tree",
     inheritAttrs: true
@@ -3396,15 +3254,15 @@ var _sfc_main$4 = defineComponent({
       emits("click", node, parents);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [__props.search ? (openBlock(), createBlock(_sfc_main$t, mergeProps({
         key: 0
       }, __props.search, {
         onSearch
-      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$c, {
+      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$d, {
         "scroll-y": true
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes || [], node => {
-          return openBlock(), createBlock(_sfc_main$5, {
+          return openBlock(), createBlock(_sfc_main$7, {
             key: unref(context).getKey(node),
             node,
             parent: void 0,
@@ -3425,7 +3283,7 @@ var _sfc_main$4 = defineComponent({
   }
 });
 
-var _sfc_main$3 = defineComponent({
+var _sfc_main$5 = defineComponent({
   __name: "wrapper",
   props: {
     readonly: {
@@ -3454,7 +3312,7 @@ var _sfc_main$3 = defineComponent({
         title: "对话框"
       }, {
         onClose: _cache[0] || (_cache[0] = $event => emits("cancel"))
-      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$c, mergeProps({
+      }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$d, mergeProps({
         class: "wrapper-body"
       }, __props.content || {
         scrollX: false,
@@ -3476,7 +3334,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$q, options);
+  const app = createApp(_sfc_main$p, options);
   triggerAppCreated(app);
   app.mount(target);
   const scope = useScope().onDestroy(() => app.unmount());
@@ -3484,54 +3342,6 @@ function mount(target, options, onDestroyed) {
   return scope;
 }
 
-const MOTION = Object.freeze({
-  "fade": {
-    enter: "fade-in",
-    leave: "fade-out"
-  },
-  "scale": {
-    enter: "scale-in",
-    leave: "scale-out"
-  },
-  "rotate": {
-    enter: "rotate-in",
-    leave: "rotate-out"
-  },
-  "top": {
-    enter: "top-in",
-    leave: "top-out"
-  },
-  "topBottom": {
-    enter: "top-in",
-    leave: "bottom-out"
-  },
-  "bottom": {
-    enter: "bottom-in",
-    leave: "bottom-out"
-  },
-  "bottomTop": {
-    enter: "bottom-in",
-    leave: "top-out"
-  },
-  "left": {
-    enter: "left-in",
-    leave: "left-out"
-  },
-  "leftRight": {
-    enter: "left-in",
-    leave: "right-out"
-  },
-  "right": {
-    enter: "right-in",
-    leave: "right-out"
-  },
-  "rightLeft": {
-    enter: "right-in",
-    leave: "left-out"
-  }
-});
-for (var key in MOTION) hasOwnProperty(MOTION, key) && Object.freeze(MOTION[key]);
-
 function initStepByFormat(format) {
   switch (format) {
     case "yyyy":
@@ -3558,8 +3368,8 @@ function buildYearItems(year, min, max) {
   return items;
 }
 function buildMonthItems(yearItem, min, max) {
-  const minDate = new Date(formatDateValue(min, "yyyy-MM"));
-  const maxDate = new Date(formatDateValue(max, "yyyy-MM"));
+  const minDate = parseDate(formatDateValue(min, "yyyy-MM"), "min");
+  const maxDate = parseDate(formatDateValue(max, "yyyy-MM"), "max");
   const items = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
   return items.map((item, index) => {
     const mi = {
@@ -3569,16 +3379,19 @@ function buildMonthItems(yearItem, min, max) {
       disabled: yearItem.disabled
     };
     if (mi.disabled != true) {
-      const date = new Date(formatDateValue(mi, "yyyy-MM"));
+      const date = getDateByValue(mi);
       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);
+  const minDate = parseDate(formatDateValue(min, "yyyy-MM-dd"), "min");
+  const maxDate = parseDate(formatDateValue(max, "yyyy-MM-dd"), "max");
+  const date = getDateByValue({
+    ...monthItem,
+    day: 1
+  });
   date.setDate(date.getDate() - (date.getDay() || 7) - 1);
   const items = new Array(42);
   for (var index = 0; index < items.length; index++) {
@@ -3590,7 +3403,7 @@ function buildDayItems(monthItem, min, max) {
       disabled: monthItem.disabled
     };
     if (item.disabled != true) {
-      const date2 = new Date(formatDateValue(item, "yyyy-MM-dd"));
+      const date2 = getDateByValue(item);
       item.disabled = minDate != void 0 && date2 < minDate || maxDate != void 0 && date2 > maxDate;
     }
     items[index] = Object.freeze(item);
@@ -3608,9 +3421,9 @@ function buildHourItems(min, max) {
   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;
+  const items = new Array(60);
   for (let index = 0; index < items.length; index++) {
     const item = {
       minute: index,
@@ -3644,37 +3457,8 @@ function buildSecondItems(minuteItem, min, max) {
   }
   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 = {
+const _hoisted_1$4 = {
   class: "tz-item",
   ref: "hour-items"
 };
@@ -3690,7 +3474,7 @@ const _hoisted_5$1 = {
   ref: "second-items"
 };
 const _hoisted_6$1 = ["textContent", "onClick"];
-var _sfc_main$2 = defineComponent({
+var _sfc_main$4 = defineComponent({
   __name: "time-pc",
   props: {
     value: {},
@@ -3726,9 +3510,9 @@ var _sfc_main$2 = defineComponent({
     const props = __props;
     const emits = __emit;
     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 min = parseTimeValue(props.min, "min");
+    const max = parseTimeValue(props.max, "max");
+    const timeRef = ref(parseTimeValue(props.value, "min") || 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();
@@ -3793,17 +3577,17 @@ var _sfc_main$2 = defineComponent({
     }
     onMounted(rebuildItems);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: normalizeClass(["time-picker pc", {
           "second-disabled": unref(format) != "HH:mm:ss"
         }]),
         mode: "vertical"
       }, createSlots({
-        main: withCtx(() => [createVNode(_sfc_main$f, {
-          group: true,
-          effect: "down-up"
+        main: withCtx(() => [createVNode(_sfc_main$r, {
+          multiple: "",
+          effect: unref(MOTION).top
         }, {
-          default: withCtx(() => [createElementVNode("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(hourItems.value, item => {
+          default: withCtx(() => [createElementVNode("div", _hoisted_1$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(hourItems.value, item => {
             return openBlock(), createElementBlock("div", {
               class: normalizeClass(["tzi-number", {
                 active: item.hour == timeRef.value.hour,
@@ -3835,23 +3619,23 @@ var _sfc_main$2 = defineComponent({
             }, null, 10, _hoisted_6$1);
           }), 128))], 512)) : createCommentVNode("", true)]),
           _: 1
-        })]),
+        }, 8, ["effect"])]),
         _: 2
       }, [__props.toolbarDisabled != true ? {
         name: "bottom",
-        fn: withCtx(() => [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+        fn: withCtx(() => [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
           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, {
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
           key: 1,
           type: "link",
           size: "small",
           textContent: "现在",
           onClick: _cache[1] || (_cache[1] = $event => rebuildItems(unref(getTimeValue)(new Date())))
-        })) : createCommentVNode("", true), createVNode(_sfc_main$B, {
+        })) : createCommentVNode("", true), createVNode(_sfc_main$A, {
           type: "link",
           size: "small",
           textContent: "确定",
@@ -3866,7 +3650,7 @@ var _sfc_main$2 = defineComponent({
   }
 });
 
-const _hoisted_1$1 = ["textContent"];
+const _hoisted_1$3 = ["textContent"];
 const _hoisted_2 = ["textContent"];
 const _hoisted_3 = ["textContent"];
 const _hoisted_4 = ["textContent", "onClick"];
@@ -3874,7 +3658,7 @@ const _hoisted_5 = ["textContent", "onClick"];
 const _hoisted_6 = ["textContent"];
 const _hoisted_7 = ["textContent", "onClick"];
 const _hoisted_8 = ["textContent"];
-var _sfc_main$1 = defineComponent({
+var _sfc_main$3 = defineComponent({
   __name: "date-pc",
   props: {
     value: {},
@@ -3914,18 +3698,18 @@ var _sfc_main$1 = defineComponent({
     const {
       inPopup
     } = props;
-    const dateRef = ref(parseDateValue(props.value));
+    const dateRef = ref(parseDateValue(props.value, "min"));
     const format = correctDateFormat(props.format, "yyyy-MM-dd");
-    const min = Object.freeze(parseDateValue(props.min));
-    const max = Object.freeze(parseDateValue(props.max));
+    const min = Object.freeze(parseDateValue(props.min, "min"));
+    const max = Object.freeze(parseDateValue(props.max, "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 minPickTime = Object.freeze(parseTimeValue(props.minPickTime, "min"));
+    const maxPickTime = Object.freeze(parseTimeValue(props.maxPickTime, "max"));
     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() {
@@ -3985,7 +3769,7 @@ var _sfc_main$1 = defineComponent({
           }
         case "day":
           {
-            const date = new Date(dateRef.value.year, dateRef.value.month - 1, 1);
+            const date = getDateByValue(dateRef.value);
             date.setMonth(date.getMonth() + basis);
             dateRef.value.year = date.getFullYear();
             dateRef.value.month = date.getMonth() + 1;
@@ -4050,30 +3834,33 @@ var _sfc_main$1 = defineComponent({
       }
     }
     async function onSelectTime() {
-      if (props.picker == void 0 || timeAreaDom.value == void 0 || props.pinned.value == true) {
-        return;
+      if (props.picker != void 0 && timeAreaDom.value != void 0 && props.pinned.value != true) {
+        props.pinned.value = true;
+        const task = props.picker.showTime(timeAreaDom.value, {
+          format: timeFormat,
+          value: formatTimeValue(dateRef.value, timeFormat),
+          min: props.minPickTime,
+          max: props.minPickTime,
+          nowDisabled: props.nowDisabled,
+          clearDisabled: props.clearDisabled,
+          toolbarDisabled: props.toolbarDisabled
+        }, {
+          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, "min") || Object.create(null);
+            dateRef.value.hour = time.hour;
+            dateRef.value.minute = time.minute;
+            dateRef.value.second = time.second;
+          }
+        }, reason => {
+          console.error(reason);
+        });
       }
-      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);
@@ -4090,7 +3877,7 @@ var _sfc_main$1 = defineComponent({
     dateRef.value == void 0 && (dateRef.value = electDateValue());
     buildPickerItems(stepRef.value, 0);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: normalizeClass(["date-picker pc", {
           "time-now": __props.pinned && __props.pinned.value == true
         }]),
@@ -4102,8 +3889,9 @@ var _sfc_main$1 = defineComponent({
           height: "30px"
         }
       }, createSlots({
-        top: withCtx(() => [createVNode(_sfc_main$A, {
+        top: withCtx(() => [createVNode(_sfc_main$z, {
           type: "arrow",
+          button: "",
           rotate: 180,
           size: 26,
           onClick: _cache[0] || (_cache[0] = $event => buildPickerItems(stepRef.value, -1))
@@ -4112,7 +3900,7 @@ var _sfc_main$1 = defineComponent({
         }, [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, {
+        }, null, 8, _hoisted_1$3)) : (openBlock(), createElementBlock(Fragment, {
           key: 1
         }, [createElementVNode("div", {
           textContent: toDisplayString(`${dateRef.value.year}年`),
@@ -4121,8 +3909,9 @@ var _sfc_main$1 = defineComponent({
           key: 0,
           textContent: toDisplayString(`${dateRef.value.month}月`),
           onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
-        }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$A, {
+        }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$z, {
           type: "arrow",
+          button: "",
           size: 26,
           onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
         })]),
@@ -4186,19 +3975,19 @@ var _sfc_main$1 = defineComponent({
           onClick: onSelectTime
         }, null, 10, _hoisted_8)) : createCommentVNode("", true), __props.toolbarDisabled != true ? (openBlock(), createElementBlock(Fragment, {
           key: 1
-        }, [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$B, {
+        }, [__props.clearDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
           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, {
+        })) : createCommentVNode("", true), __props.nowDisabled != true ? (openBlock(), createBlock(_sfc_main$A, {
           key: 1,
           type: "link",
           size: "small",
           textContent: "现在",
           onClick: onNow
-        })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_sfc_main$B, {
+        })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_sfc_main$A, {
           type: "link",
           size: "small",
           textContent: "确定",
@@ -4215,40 +4004,32 @@ var _sfc_main$1 = defineComponent({
 
 function usePicker() {
   const popup = usePopup();
-  function showDate(target, options) {
+  function showDate(target, options, popupOptions) {
     options = {
       ...options
     };
-    return showPicker(target, _sfc_main$1, options);
+    return showPicker(target, _sfc_main$3, options, popupOptions);
   }
-  function showTime(target, options) {
+  function showTime(target, options, popupOptions) {
     options = {
       ...options
     };
-    return showPicker(target, _sfc_main$2, options);
+    return showPicker(target, _sfc_main$4, options, popupOptions);
   }
-  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;
+  function showPicker(target, component, options, popupOptions) {
+    {
+      popupOptions = {
+        ...popupOptions
+      };
+      popupOptions.followX = popupOptions.followX || ["start", "end", "center"];
+      popupOptions.spaceX = correctNumber(popupOptions.spaceX, 2);
+      popupOptions.spaceY = correctNumber(popupOptions.spaceY, 2);
+      popupOptions.spaceClient = correctNumber(popupOptions.spaceClient, 10);
+      popupOptions.closeOnMask = popupOptions.closeOnMask == void 0 ? true : popupOptions.closeOnMask;
     }
     return popup.follow(target, {
+      ...popupOptions,
       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,
         picker: manager,
@@ -4264,6 +4045,180 @@ function usePicker() {
   return manager;
 }
 
+const _hoisted_1$2 = ["title"];
+var _sfc_main$2 = defineComponent({
+  __name: "date-picker",
+  props: {
+    readonly: {
+      type: Boolean
+    },
+    value: {},
+    format: {},
+    min: {},
+    max: {},
+    minPickTime: {},
+    maxPickTime: {},
+    toolbarDisabled: {
+      type: Boolean
+    },
+    nowDisabled: {
+      type: Boolean
+    },
+    clearDisabled: {
+      type: Boolean
+    }
+  },
+  emits: ["change"],
+  setup(__props, _ref) {
+    let {
+      emit: __emit
+    } = _ref;
+    const props = __props;
+    const emits = __emit;
+    const pickerDom = useTemplateRef("datepicker");
+    const {
+      showDate
+    } = usePicker();
+    const {
+      watcher
+    } = useReactive();
+    const valueRef = shallowRef();
+    let pickerScope;
+    function resetDateValue(value) {
+      const dateValue = parseDateValue(value, "min");
+      valueRef.value = formatDateValue(dateValue, props.format);
+    }
+    async function showPicker(evt) {
+      if (props.readonly != true && pickerScope == void 0) {
+        pickerScope = showDate(pickerDom.value, {
+          ...props,
+          value: valueRef.value
+        }, {
+          followX: evt.target.tagName == "svg" ? ["end"] : void 0,
+          closeOnTarget: true
+        });
+        const dateText = await pickerScope;
+        pickerScope = void 0;
+        if (dateText !== void 0 && dateText != valueRef.value) {
+          const oldText = valueRef.value;
+          valueRef.value = dateText;
+          emits("change", dateText, oldText);
+        }
+      }
+    }
+    isStringNotEmpty(props.value) && resetDateValue(props.value);
+    watcher(() => props.value, newValue => newValue !== valueRef.value && resetDateValue(newValue));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["snail-datepicker", {
+          readonly: __props.readonly
+        }]),
+        ref: "datepicker",
+        title: valueRef.value,
+        onClick: showPicker
+      }, [withDirectives(createElementVNode("input", {
+        class: "wh-fill",
+        type: "text",
+        readonly: "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
+      }, null, 512), [[vModelText, valueRef.value]]), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$z, {
+        key: 0,
+        type: "datepicker",
+        button: "",
+        size: 16,
+        color: "#aeb6c2",
+        "hover-color": "#279bf1"
+      })) : createCommentVNode("", true)], 10, _hoisted_1$2);
+    };
+  }
+});
+
+const _hoisted_1$1 = ["title"];
+var _sfc_main$1 = defineComponent({
+  __name: "time-picker",
+  props: {
+    readonly: {
+      type: Boolean
+    },
+    value: {},
+    format: {},
+    min: {},
+    max: {},
+    toolbarDisabled: {
+      type: Boolean
+    },
+    nowDisabled: {
+      type: Boolean
+    },
+    clearDisabled: {
+      type: Boolean
+    }
+  },
+  emits: ["change"],
+  setup(__props, _ref) {
+    let {
+      emit: __emit
+    } = _ref;
+    const props = __props;
+    const emits = __emit;
+    const pickerDom = useTemplateRef("timepicker");
+    const {
+      showTime
+    } = usePicker();
+    const {
+      watcher
+    } = useReactive();
+    const valueRef = shallowRef();
+    let pickerScope;
+    function resetTimeValue(value) {
+      const timeValue = parseTimeValue(value, "min");
+      valueRef.value = formatTimeValue(timeValue, props.format);
+    }
+    async function showPicker(evt) {
+      if (props.readonly != true && pickerScope == void 0) {
+        pickerScope = showTime(pickerDom.value, {
+          ...props,
+          value: valueRef.value
+        }, {
+          followX: evt.target.tagName == "svg" ? ["end"] : void 0,
+          closeOnTarget: true
+        });
+        const timeText = await pickerScope;
+        pickerScope = void 0;
+        if (timeText !== void 0 && timeText != valueRef.value) {
+          const oldText = valueRef.value;
+          valueRef.value = timeText;
+          emits("change", timeText, oldText);
+        }
+      }
+    }
+    isStringNotEmpty(props.value) && resetTimeValue(props.value);
+    watcher(() => props.value, newValue => newValue !== valueRef.value && resetTimeValue(newValue));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["snail-timepicker", {
+          readonly: __props.readonly
+        }]),
+        ref: "timepicker",
+        title: valueRef.value,
+        onClick: showPicker
+      }, [withDirectives(createElementVNode("input", {
+        class: "wh-fill",
+        type: "text",
+        readonly: "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
+      }, null, 512), [[vModelText, valueRef.value]]), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$z, {
+        key: 0,
+        type: "timepicker",
+        button: "",
+        size: 20,
+        color: "#aeb6c2",
+        "hover-color": "#279bf1"
+      })) : createCommentVNode("", true)], 10, _hoisted_1$1);
+    };
+  }
+});
+
 const _hoisted_1 = ["textContent"];
 var _sfc_main = defineComponent({
   ...{
@@ -4293,7 +4248,6 @@ var _sfc_main = defineComponent({
       endX: 0,
       distance: 0
     });
-    const towArrowIcon = getTwoArrowIconDraw();
     function getMaxDistance() {
       return dragHandleDom.value.parentElement.getBoundingClientRect().width - dragHandleDom.value.getBoundingClientRect().width;
     }
@@ -4349,55 +4303,61 @@ var _sfc_main = defineComponent({
         onTouchstart: onStartDrag,
         onTouchmove: onDragMove,
         onTouchend: onDragEnd
-      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$A, {
+      }, [dragInfoRef.value.status == "success" ? (openBlock(), createBlock(_sfc_main$z, {
         key: 0,
         type: "success",
         size: 20,
         color: "white"
-      })) : (openBlock(), createBlock(_sfc_main$A, {
+      })) : (openBlock(), createBlock(_sfc_main$z, {
         key: 1,
-        type: "custom",
+        custom: "",
         size: 20,
-        color: "#948D8D",
-        draw: unref(towArrowIcon)
-      }, null, 8, ["draw"]))], 36)], 2);
+        color: "#948d8d",
+        style: {
+          "cursor": "move"
+        }
+      }, {
+        default: withCtx(() => [...(_cache[0] || (_cache[0] = [createElementVNode("path", {
+          d: "M759.467 533.333L469.333 243.2l29.867-29.867 320 320-320 320-29.867-29.866 290.134-290.134z m-298.667 0L170.667 243.2l29.866-29.867 320 320-320 320-29.866-29.866L460.8 533.333z"
+        }, null, -1)]))]),
+        _: 1
+      }))], 36)], 2);
     };
   }
 });
 
 const components = {
-  Button: _sfc_main$B,
-  Choose: _sfc_main$z,
-  DatePicker: _sfc_main$y,
+  Button: _sfc_main$A,
+  Choose: _sfc_main$y,
   Footer: _sfc_main$x,
   Header: _sfc_main$w,
-  Icon: _sfc_main$A,
+  Icon: _sfc_main$z,
   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$f,
-  Tree: _sfc_main$4,
-  Wrapper: _sfc_main$3,
+  Select: _sfc_main$h,
+  Switch: _sfc_main$g,
+  Textarea: _sfc_main$f,
+  Dynamic: _sfc_main$p,
+  Fold: _sfc_main$e,
+  Motion: _sfc_main$r,
+  Layout: _sfc_main$c,
+  Scroll: _sfc_main$d,
+  Sort: _sfc_main$b,
+  Table: _sfc_main$a,
+  TableRow: _sfc_main$9,
+  TableCol: _sfc_main$8,
+  Tree: _sfc_main$6,
+  Wrapper: _sfc_main$5,
+  DatePicker: _sfc_main$2,
+  TimePicker: _sfc_main$1,
   DragVerify: _sfc_main,
-  Empty: _sfc_main$l,
-  Loading: _sfc_main$r
+  Empty: _sfc_main$k,
+  Loading: _sfc_main$q
 };
 
 onMountScope(scope => {
   getCurrentScope() && onScopeDispose(scope.destroy);
 });
 
-export { MOTION, components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
+export { MOTION, components, getBuiltinIcon, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };