snail.vue 2.0.13 → 2.0.15

package/dist/snail.vue.umd.js

@@ -5,8 +5,8 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailView));
 })(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
 
-  const _hoisted_1$k = ["title"];
-  var _sfc_main$B = vue.defineComponent({
+  const _hoisted_1$l = ["title"];
+  var _sfc_main$A = vue.defineComponent({
     ...{
       name: "Button",
       inheritAttrs: true
@@ -22,15 +22,11 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-button", [__props.size, __props.type]]),
           title: __props.title
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$k);
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$l);
       };
     }
   });
 
-  var addLink = href => setTimeout(snail_view.link.register, 0, href);
-
-  addLink("/styles/snail.vue.vue.css");
-
   function getSvgDraw(iconType, draw) {
     switch (iconType) {
       case "success":
@@ -53,6 +49,8 @@
         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":
@@ -69,10 +67,10 @@
     }
   }
 
-  const _hoisted_1$j = ["viewBox", "width", "height"];
+  const _hoisted_1$k = ["viewBox", "width", "height"];
   const _hoisted_2$c = ["textContent"];
   const _hoisted_3$a = ["fill", "stroke", "stroke-width", "d"];
-  var _sfc_main$A = vue.defineComponent({
+  var _sfc_main$z = vue.defineComponent({
     ...{
       name: "Icon",
       inheritAttrs: true
@@ -110,16 +108,16 @@
             "stroke-width": __props.strokeWidth,
             d
           }, null, 8, _hoisted_3$a);
-        }), 256))], 46, _hoisted_1$j);
+        }), 256))], 46, _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 = vue.defineComponent({
+  var _sfc_main$y = vue.defineComponent({
     ...{
       name: "Choose",
       inheritAttrs: true
@@ -198,7 +196,7 @@
           }, null, 8, _hoisted_2$b)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(["status", [node.selected ? "selected" : ""]])
-          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 0,
             type: "success",
             size: 12,
@@ -211,168 +209,15 @@
             key: 3,
             class: "item-des",
             textContent: vue.toDisplayString(node.item.description)
-          }, null, 8, _hoisted_4$7)) : vue.createCommentVNode("", true)], 14, _hoisted_1$i);
+          }, null, 8, _hoisted_4$7)) : vue.createCommentVNode("", true)], 14, _hoisted_1$j);
         }), 128))], 2);
       };
     }
   });
 
-  const _hoisted_1$h = ["id"];
-  var _sfc_main$y = vue.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
-      } = snail_core.useTimer();
-      const {
-        range
-      } = props;
-      const format = props.format || "yyyy-MM-dd";
-      const id = `DP${snail_core.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 = snail_core.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);
-      }
-      snail_view.link.register("/styles/zane-calendar.css");
-      vue.onMounted(() => {
-        snail_core.script.has("zane-calendar") || snail_core.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
-        };
-        snail_core.script.load("zane-calendar").then(calendar => {
-          console.log(zaneOptions);
-          snail_core.isFunction(calendar) || snail_core.throwError("load zane-calendar failed: value is not a function.");
-          calendar(zaneOptions);
-        }, reason => snail_core.throwError(reason));
-      });
-      vue.onUnmounted(() => {
-        destroyZanePopup(id);
-        range && destroyZanePopup(`${id}DOUBLE`);
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "snail-datepicker",
-          id: vue.unref(id),
-          onClick
-        }, null, 8, _hoisted_1$h);
-      };
-    }
-  });
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
 
   var _sfc_main$x = vue.defineComponent({
     ...{
@@ -405,13 +250,13 @@
           class: vue.normalizeClass(["snail-footer", {
             "start-divider": __props.divider
           }, __props.align || "right"])
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 0,
           size: "max",
           type: "default",
           onClick: _cache[0] || (_cache[0] = $event => emits("cancel")),
           textContent: vue.toDisplayString(__props.cancelName || "取消")
-        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
           key: 1,
           size: "max",
           type: "primary",
@@ -422,7 +267,7 @@
     }
   });
 
-  const _hoisted_1$g = ["textContent"];
+  const _hoisted_1$i = ["textContent"];
   var _sfc_main$w = vue.defineComponent({
     ...{
       name: "Header",
@@ -462,7 +307,7 @@
           key: 0,
           textContent: vue.toDisplayString(__props.title),
           class: vue.normalizeClass(["header-title", __props.titleAlign])
-        }, null, 10, _hoisted_1$g)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, null, 10, _hoisted_1$i)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 1,
           type: "close",
           size: 22,
@@ -474,7 +319,7 @@
     }
   });
 
-  const _hoisted_1$f = ["textContent"];
+  const _hoisted_1$h = ["textContent"];
   const _hoisted_2$a = {
     key: 0,
     class: "required",
@@ -537,7 +382,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$f), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$a)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$8, [vue.createElementVNode("input", {
+        }, null, 8, _hoisted_1$h), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$a)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$8, [vue.createElementVNode("input", {
           ref: "input-el",
           type: __props.type || "text",
           value: inputModel.value,
@@ -550,7 +395,7 @@
           key: 0,
           class: "validate",
           title: validateRef.value
-        }, [vue.createVNode(_sfc_main$A, {
+        }, [vue.createVNode(_sfc_main$z, {
           type: "error",
           size: 16,
           color: "red"
@@ -759,7 +604,7 @@
     return formatter;
   }
 
-  const _hoisted_1$e = {
+  const _hoisted_1$g = {
     key: 0,
     class: "number-prefix"
   };
@@ -919,7 +764,7 @@
             "has-prefix": vue.unref(hasPrefix),
             "has-suffix": vue.unref(hasSuffix)
           }])
-        }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createElementVNode("span", {
+        }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(prefix))
         }, null, 8, _hoisted_2$9)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
@@ -939,13 +784,13 @@
         }, [vue.createElementVNode("div", {
           class: "controls default subtract",
           onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$A, {
+        }, [vue.createVNode(_sfc_main$z, {
           type: "subtract",
           size: 20
         })]), vue.createElementVNode("div", {
           class: "controls default plus",
           onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$A, {
+        }, [vue.createVNode(_sfc_main$z, {
           type: "plus",
           size: 20
         })])], 64)) : vue.unref(controls) == "right" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -953,14 +798,14 @@
         }, [vue.createElementVNode("div", {
           class: "controls right plus",
           onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$A, {
+        }, [vue.createVNode(_sfc_main$z, {
           type: "arrow",
           size: 20,
           rotate: 270
         })]), vue.createElementVNode("div", {
           class: "controls right subtract",
           onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$A, {
+        }, [vue.createVNode(_sfc_main$z, {
           type: "arrow",
           size: 20,
           rotate: 90
@@ -982,7 +827,7 @@
     }
   });
 
-  const _hoisted_1$d = ["placeholder", "readonly"];
+  const _hoisted_1$f = ["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$t = vue.defineComponent({
     ...{
@@ -1029,9 +874,9 @@
           readonly: __props.readonly,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => textModel.value = $event),
           onKeyup: _cache[1] || (_cache[1] = $event => onSearch($event))
-        }, null, 40, _hoisted_1$d), [[vue.vModelText, textModel.value, void 0, {
+        }, null, 40, _hoisted_1$f), [[vue.vModelText, textModel.value, void 0, {
           trim: true
-        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$A, {
+        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$z, {
           class: "search-button",
           type: "custom",
           draw: searchIon,
@@ -1252,7 +1097,7 @@
     }
   }
 
-  const _hoisted_1$c = {
+  const _hoisted_1$e = {
     class: "snail-confirm flex-column"
   };
   const _hoisted_2$8 = ["innerHTML"];
@@ -1284,7 +1129,7 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [vue.createVNode(_sfc_main$w, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createVNode(_sfc_main$w, {
           "use-to": "dialog",
           title: __props.title || "提示",
           onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
@@ -1304,7 +1149,104 @@
     }
   });
 
+  const MOTION = Object.freeze({
+    "fade": {
+      enter: "fade-in",
+      leave: "fade-out"
+    },
+    "scale": {
+      enter: "scale-in",
+      leave: "scale-out"
+    },
+    "rotate": {
+      enter: "rotate-in",
+      leave: "rotate-out"
+    },
+    "top": {
+      enter: "top-in",
+      leave: "top-out"
+    },
+    "topBottom": {
+      enter: "top-in",
+      leave: "bottom-out"
+    },
+    "bottom": {
+      enter: "bottom-in",
+      leave: "bottom-out"
+    },
+    "bottomTop": {
+      enter: "bottom-in",
+      leave: "top-out"
+    },
+    "left": {
+      enter: "left-in",
+      leave: "left-out"
+    },
+    "leftRight": {
+      enter: "left-in",
+      leave: "right-out"
+    },
+    "right": {
+      enter: "right-in",
+      leave: "right-out"
+    },
+    "rightLeft": {
+      enter: "right-in",
+      leave: "left-out"
+    }
+  });
+  for (var key in MOTION) snail_core.hasOwnProperty(MOTION, key) && Object.freeze(MOTION[key]);
+
   var _sfc_main$r = vue.defineComponent({
+    __name: "motion",
+    props: {
+      multiple: {
+        type: Boolean
+      },
+      effect: {},
+      duration: {},
+      mode: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const durationRef = vue.computed(() => {
+        const number = snail_core.correctNumber(props.duration, 200);
+        return number > 0 ? number : 0;
+      });
+      const motionClassRef = vue.computed(buildMotionClass);
+      function buildMotionClass() {
+        const effectClass = Object.create(null);
+        if (durationRef.value > 0) {
+          if (snail_core.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 vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.multiple ? vue.TransitionGroup : vue.Transition), vue.mergeProps({
+          appear: "",
+          duration: durationRef.value
+        }, __props.multiple ? void 0 : {
+          mode: __props.mode
+        }, motionClassRef.value), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, ["duration"]);
+      };
+    }
+  });
+
+  var _sfc_main$q = vue.defineComponent({
     ...{
       name: "Loading",
       inheritAttrs: true
@@ -1328,8 +1270,8 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.Transition, {
-          name: __props.transition
+        return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+          effect: vue.unref(MOTION).fade
         }, {
           default: vue.withCtx(() => [__props.show ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
@@ -1338,12 +1280,12 @@
             }, __props.rootClass])
           }, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)))], 2)) : vue.createCommentVNode("", true)]),
           _: 3
-        }, 8, ["name"]);
+        }, 8, ["effect"]);
       };
     }
   });
 
-  var _sfc_main$q = vue.defineComponent({
+  var _sfc_main$p = vue.defineComponent({
     ...{
       name: "Dynamic",
       inheritAttrs: false
@@ -1367,7 +1309,7 @@
       const loadingComponent = vue.defineComponent({
         inheritAttrs: false,
         components: {
-          Loading: _sfc_main$r
+          Loading: _sfc_main$q
         },
         template: "<Loading :mask-disabled='true' />"
       });
@@ -1434,7 +1376,7 @@
     }
   });
 
-  var _sfc_main$p = vue.defineComponent({
+  var _sfc_main$o = vue.defineComponent({
     ...{
       name: "DialogContainer",
       inheritAttrs: true
@@ -1479,7 +1421,7 @@
           onClick: _cache[1] || (_cache[1] = vue.withModifiers($event => {
             __props.options.closeOnMask && vue.unref(closePopup)();
           }, ["self"]))
-        }, [vue.createVNode(_sfc_main$q, vue.mergeProps({
+        }, [vue.createVNode(_sfc_main$p, vue.mergeProps({
           class: "dialog-body",
           name: __props.options.name,
           component: __props.options.component,
@@ -1494,7 +1436,7 @@
     }
   });
 
-  var _sfc_main$o = vue.defineComponent({
+  var _sfc_main$n = vue.defineComponent({
     ...{
       name: "FollowContainer",
       inheritAttrs: true
@@ -1615,7 +1557,7 @@
         });
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
           class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1632,7 +1574,7 @@
     }
   });
 
-  var _sfc_main$n = vue.defineComponent({
+  var _sfc_main$m = vue.defineComponent({
     ...{
       name: "PopupContainer",
       inheritAttrs: true
@@ -1652,7 +1594,7 @@
         model = vue.shallowRef(void 0)
       } = __props.options;
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
           class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1670,12 +1612,12 @@
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$d = {
     key: 1,
     class: "icon"
   };
   const _hoisted_2$7 = ["innerHTML"];
-  var _sfc_main$m = vue.defineComponent({
+  var _sfc_main$l = vue.defineComponent({
     ...{
       name: "ToastContainer",
       inheritAttrs: true
@@ -1713,7 +1655,7 @@
           }),
           onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
           onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 0,
           class: "close-icon",
           type: "close",
@@ -1724,7 +1666,7 @@
           onClick: _cache[2] || (_cache[2] = $event => {
             vue.unref(closePopup)();
           })
-        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$A, {
+        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [vue.createVNode(_sfc_main$z, {
           type: vue.unref(props).type,
           fill: "#707070",
           size: 20
@@ -1738,7 +1680,7 @@
 
   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) {
@@ -1771,7 +1713,7 @@
           },
           onBeforeClose: fn => hook.register("onBeforeClose", fn)
         });
-        const descriptor = openPopup(_sfc_main$p, options, extOptions);
+        const descriptor = openPopup(_sfc_main$o, options, extOptions);
         scope = snail_core.useAsyncScope(deferred.promise);
         monitorDialog(descriptor, scope, deferred);
       }
@@ -1789,7 +1731,7 @@
           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);
     }
@@ -1806,7 +1748,7 @@
       });
     }
     function toast(type, message, options) {
-      return popupInCustomContainer(_sfc_main$m, {
+      return popupInCustomContainer(_sfc_main$l, {
         url: "#ToastContainer",
         props: {
           ...(options || Object.create(null)),
@@ -1839,7 +1781,7 @@
         },
         ...extOptions
       });
-      const descriptor = openPopup(container || _sfc_main$n, options, extOptions);
+      const descriptor = openPopup(container || _sfc_main$m, options, extOptions);
       const scope = snail_core.useAsyncScope(deferred.promise);
       scope.onDestroy(() => destroyPopup(descriptor, deferred));
       return scope;
@@ -1977,12 +1919,12 @@
     return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyREREODhFQ0M5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyREREODhFREM5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjJEREQ4OEVBQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjJEREQ4OEVCQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++keGxAAAA5lJREFUeNrsmktoE0EYx3eSTdpsk2abvnwcFBVp8QFqVPDgQaGgIogIoictelKKVhARBA8q+KAVrFqooh4qXgRfiHpTEHqw9iCKXqQHSVstpqlt0yabrP9p52K1yW72GTMf/JhZMrM7/3l+37REVVWhlMwjlJhxwVwwF8wFc8FcMBfsnIlGKg98TxRa9RbYAFYXUnl+XbjoRpiKXVXMU9qns3xK76CC/YC4QfA1MAg26aiTZGlQQ9la8AZ0g3VuENwLqsArsFVnXW+e30PgKVgGnoA+Nwi+Cw6DAHgGdmqoMwJoXJrJUcYPHoGN4C3Yl6e8rWv4Nmhma/kh2J6n/HW2JsdylLkKtoAPYAeYcPxYmmX32AjcAVHwPEfZFxreR2fAJ9Z5CbMaSYzceMxxDtN198vKo8Vt57ClYh0d4f/OtTTgOjpquaa8WEhldISM5DRYWYCXZdTS4DVoR9tSegdI9y6Nl1KBL5k/7JRto99HW/ZAtGralJ7DTtCPEUKUmqqKPlH0rtXgMZk2utms2jk0PEqPqt3gEOiybJdGjy5BcobmI7LUC7HrbRQ7HaR4PORoOBRoY+f0RbSp3spjqQNIPtEb8/vEqFMnixTwH0T6gPnwbZYIRk/uZWtHqApLQzaP7GyL1kSCPUinqIuKtjWZKhgvpFt1O82X+cXPXq9njdNHD2ZZC/aRTvZ4A20sN3OEz7IgXJDDkls8laV11aEBpHGaB62mCEbPNSA5QvNYO+88hDS6xcHABtbq9XiusMdTYJ4ZI3yBORdKZTBQ6zKnqq62OiQh7WdByzmjgqlzsWs6BAqW9xAiLHJdMECEY36f9zJ7pLt3oxHH4/j0O4kwWREoW8BuKvSYxG4utFoWjOoVHZErlg/+GP2I7ApwkgnXHy1h/VLntNJA76sROfgFI9CgoXh8OD72OJ3OHDA46Am4m3KhU7rSyJfRl2QiOaXVE3oPsU0mzPKw3RcAf5iiZEPaOkf9KsxcyVq7s1vu7SsZEQ5/LO81ydhk3I5Q05Y/tcQTExKLY/+9U2XV++PJVLMtZ7cdH0mlFfnnyPgIpm3s758y3Qj3NiNfY8sxlmeXNt2NhC/ej0grllXVdHIyVY/RbTD7G9iliZkXAIZsKqUspjjmjgolZlwwF1xigr8VoaYBI4I7ilBwl5Hw8JIwcx3aAha6XCj9t4ub4HzBjgfftLhgLpgL5oK5YC6YC+aCuWDt9luAAQC2EPxjL8cUkwAAAABJRU5ErkJggg==";
   }
 
-  const _hoisted_1$a = {
+  const _hoisted_1$c = {
     class: "snail-empty"
   };
   const _hoisted_2$6 = ["src"];
   const _hoisted_3$6 = ["textContent"];
-  var _sfc_main$l = vue.defineComponent({
+  var _sfc_main$k = vue.defineComponent({
     ...{
       name: "Empty",
       inheritAttrs: true
@@ -1995,7 +1937,7 @@
     setup(__props) {
       const defaultImageBase64 = getNoDataBase64Image();
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("img", {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [vue.createElementVNode("img", {
           src: __props.imageUrl || vue.unref(defaultImageBase64)
         }, null, 8, _hoisted_2$6), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
@@ -2005,13 +1947,13 @@
     }
   });
 
-  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 = vue.defineComponent({
+  var _sfc_main$j = vue.defineComponent({
     ...{
       name: "SelectNode",
       inheritAttrs: true
@@ -2056,15 +1998,15 @@
         }, [vue.createElementVNode("div", {
           class: "item-text ellipsis",
           textContent: vue.toDisplayString(__props.item.text)
-        }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, null, 8, _hoisted_2$5), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 0,
           type: "arrow",
           color: "#8a9099"
-        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [vue.createVNode(_sfc_main$A, {
+        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [vue.createVNode(_sfc_main$z, {
           type: "success",
           color: "white",
           size: 12
-        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$9)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$b)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
         }, vue.renderList(vue.unref(showChildrenRef), child => {
           return vue.openBlock(), vue.createBlock(_component_SelectNode, {
@@ -2081,7 +2023,7 @@
     }
   });
 
-  var _sfc_main$j = vue.defineComponent({
+  var _sfc_main$i = vue.defineComponent({
     ...{
       name: "Select2Popup",
       inheritAttrs: true
@@ -2259,7 +2201,7 @@
           onSearch,
           key: "select-search"
         }), null, 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(itemsRef.value, item => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$k, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$j, {
             key: vue.unref(context).getKey(item),
             multiple: __props.multiple,
             item,
@@ -2268,7 +2210,7 @@
             onEnter: onEnterSelectNode,
             onClick: onClickSelectNode
           }, null, 8, ["multiple", "item", "context"]);
-        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
           key: 1,
           message: "无结果"
         })) : vue.createCommentVNode("", true), showClearButtonRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -2280,7 +2222,7 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$a = {
     key: 0,
     class: "select-result"
   };
@@ -2291,9 +2233,9 @@
     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 = vue.defineComponent({
+  var _sfc_main$h = vue.defineComponent({
     ...{
       name: "Select",
       inheritAttrs: true
@@ -2425,7 +2367,7 @@
           ref: "select"
         }, [__props.items && __props.items.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
-        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
+        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
           class: "select-text ellipsis",
           title: selectedTextRef.value,
           textContent: vue.toDisplayString(selectedTextRef.value)
@@ -2433,7 +2375,7 @@
           key: 1,
           class: "placeholder",
           textContent: vue.toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-        }, null, 8, _hoisted_3$4)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, null, 8, _hoisted_3$4)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 2,
           type: "arrow",
           size: 24,
@@ -2446,7 +2388,7 @@
     }
   });
 
-  var _sfc_main$h = vue.defineComponent({
+  var _sfc_main$g = vue.defineComponent({
     ...{
       name: "Switch",
       inheritAttrs: true
@@ -2495,8 +2437,8 @@
     }
   });
 
-  const _hoisted_1$7 = ["readonly", "placeholder", "rows"];
-  var _sfc_main$g = vue.defineComponent({
+  const _hoisted_1$9 = ["readonly", "placeholder", "rows"];
+  var _sfc_main$f = vue.defineComponent({
     ...{
       name: "Textarea"
     },
@@ -2556,87 +2498,12 @@
           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)), [[vue.vModelText, valueModel.value]]);
-      };
-    }
-  });
-
-  var _sfc_main$f = vue.defineComponent({
-    __name: "transitions",
-    props: {
-      group: {
-        type: Boolean
-      },
-      duration: {},
-      customClass: {},
-      effect: {}
-    },
-    setup(__props) {
-      const props = __props;
-      const classNames = vue.computed(() => {
-        const array = [props.customClass || "snail-transition"];
-        if (snail_core.isArray(props.effect)) {
-          props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
-        } else {
-          array.push(props.effect || "fade");
-        }
-        props.duration === 0 && array.push("no-duration");
-        return array.join(" ");
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.group ? vue.TransitionGroup : vue.Transition), {
-          appear: "",
-          duration: __props.duration,
-          "enter-active-class": `${classNames.value} enter-active`,
-          "enter-from-class": `${classNames.value} enter-from`,
-          "enter-to-class": `${classNames.value} enter-to`,
-          "leave-active-class": `${classNames.value} leave-active`,
-          "leave-from-class": `${classNames.value} leave-from`,
-          "leave-to-class": `${classNames.value} leave-to`
-        }, {
-          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 8, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
+        }), null, 16, _hoisted_1$9)), [[vue.vModelText, valueModel.value]]);
       };
     }
   });
 
-  var _sfc_main$e = vue.defineComponent({
-    __name: "element",
-    props: {
-      tag: {},
-      show: {
-        type: Boolean
-      },
-      showMode: {},
-      transition: {},
-      children: {}
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$f, vue.mergeProps({
-          group: false
-        }, __props.transition, {
-          duration: __props.transition ? __props.transition.duration : 0
-        }), {
-          default: vue.withCtx(() => [(__props.showMode == "vShow" ? true : __props.show) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(snail_core.correctString)(__props.tag, "div", true)), {
-            key: 0
-          }, {
-            default: vue.withCtx(() => [vue.createVNode(_sfc_main$f, vue.mergeProps(__props.children, {
-              duration: __props.children ? __props.children.duration : 0
-            }), {
-              default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
-              _: 3
-            }, 16, ["duration"])]),
-            _: 3
-          }, 512)), [[vue.vShow, __props.showMode == "vShow" ? __props.show : true]]) : vue.createCommentVNode("", true)]),
-          _: 3
-        }, 16, ["duration"]);
-      };
-    }
-  });
-
-  const _hoisted_1$6 = {
+  const _hoisted_1$8 = {
     class: "fold-header"
   };
   const _hoisted_2$3 = ["textContent"];
@@ -2649,7 +2516,7 @@
     class: "fold-body",
     ref: "foldBody"
   };
-  var _sfc_main$d = vue.defineComponent({
+  var _sfc_main$e = vue.defineComponent({
     ...{
       name: "Fold",
       inheritAttrs: true
@@ -2719,14 +2586,14 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-fold", statusModel.value])
-        }, [vue.createElementVNode("div", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
+        }, [vue.createElementVNode("div", _hoisted_1$8, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
           class: "title ellipsis",
           textContent: vue.toDisplayString(__props.title)
         }, null, 8, _hoisted_2$3), !!__props.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "subtitle ellipsis",
           textContent: vue.toDisplayString(__props.subtitle)
-        }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createVNode(_sfc_main$A, {
+        }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createVNode(_sfc_main$z, {
           type: "arrow",
           title: statusModel.value == "expand" ? "收起" : "展开",
           onClick: onStatusClick
@@ -2735,7 +2602,7 @@
     }
   });
 
-  var _sfc_main$c = vue.defineComponent({
+  var _sfc_main$d = vue.defineComponent({
     ...{
       name: "Scroll",
       inheritAttrs: true
@@ -2865,7 +2732,7 @@
     }
   });
 
-  var _sfc_main$b = vue.defineComponent({
+  var _sfc_main$c = vue.defineComponent({
     __name: "layout",
     props: {
       mode: {},
@@ -2931,7 +2798,7 @@
             key: item
           }, [areaMap.value[item] && _ctx.$slots[item] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 0
-          }, [areaMap.value[item].scrollable ? (vue.openBlock(), vue.createBlock(_sfc_main$c, vue.mergeProps({
+          }, [areaMap.value[item].scrollable ? (vue.openBlock(), vue.createBlock(_sfc_main$d, vue.mergeProps({
             key: 0,
             class: areaMap.value[item].class,
             style: areaMap.value[item].style
@@ -2950,37 +2817,7 @@
     }
   });
 
-  var _sfc_main$a = vue.defineComponent({
-    __name: "motion",
-    props: {
-      enter: {},
-      leave: {},
-      multiple: {
-        type: Boolean
-      },
-      duration: {},
-      mode: {}
-    },
-    setup(__props) {
-      const props = __props;
-      const duration = snail_core.correctNumber(props.duration, 200);
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.multiple ? vue.TransitionGroup : vue.Transition), {
-          appear: "",
-          type: "animation",
-          duration: vue.unref(duration),
-          mode: __props.mode,
-          "enter-active-class": vue.unref(snail_core.correctString)(props.enter, "fade-in", true),
-          "leave-active-class": vue.unref(snail_core.correctString)(props.leave, "fade-out", true)
-        }, {
-          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 8, ["duration", "mode", "enter-active-class", "leave-active-class"]);
-      };
-    }
-  });
-
-  var _sfc_main$9 = vue.defineComponent({
+  var _sfc_main$b = vue.defineComponent({
     ...{
       name: "Sort",
       inheritAttrs: true
@@ -3081,10 +2918,10 @@
     }
   });
 
-  const _hoisted_1$5 = {
+  const _hoisted_1$7 = {
     class: "table-body"
   };
-  var _sfc_main$8 = vue.defineComponent({
+  var _sfc_main$a = vue.defineComponent({
     ...{
       name: "Table",
       inheritAttrs: true
@@ -3109,7 +2946,7 @@
       const hStyleRef = vue.computed(() => snail_view.css.buildStyle(props.headerStyle));
       const fStyleRef = vue.computed(() => snail_view.css.buildStyle(props.footerStyle));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
           class: vue.normalizeClass(["snail-table", {
             "start-border": __props.border == true
           }]),
@@ -3119,7 +2956,7 @@
           default: vue.withCtx(() => [vue.createElementVNode("div", {
             class: "table-header",
             style: vue.normalizeStyle(hStyleRef.value)
-          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$5, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
+          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$7, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
             class: "table-footer",
             style: vue.normalizeStyle(fStyleRef.value)
           }, [vue.renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -3129,7 +2966,7 @@
     }
   });
 
-  var _sfc_main$7 = vue.defineComponent({
+  var _sfc_main$9 = vue.defineComponent({
     ...{
       name: "TableRow",
       inheritAttrs: true
@@ -3152,7 +2989,7 @@
     }
   });
 
-  var _sfc_main$6 = vue.defineComponent({
+  var _sfc_main$8 = vue.defineComponent({
     ...{
       name: "TableCol",
       inheritAttrs: true
@@ -3198,7 +3035,7 @@
     }
   });
 
-  const _hoisted_1$4 = {
+  const _hoisted_1$6 = {
     key: 0,
     class: "node-fold"
   };
@@ -3211,7 +3048,7 @@
     class: "snail-tree-children hidden",
     ref: "children"
   };
-  var _sfc_main$5 = vue.defineComponent({
+  var _sfc_main$7 = vue.defineComponent({
     ...{
       name: "TreeNode",
       inheritAttrs: true
@@ -3329,7 +3166,7 @@
           key: 1
         }, [_cache[4] || (_cache[4] = vue.createElementVNode("div", {
           class: "indent"
-        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 0,
           class: vue.normalizeClass(statusRef.value),
           type: "custom",
@@ -3361,10 +3198,10 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$5 = {
     class: "snail-tree"
   };
-  var _sfc_main$4 = vue.defineComponent({
+  var _sfc_main$6 = vue.defineComponent({
     ...{
       name: "Tree",
       inheritAttrs: true
@@ -3398,15 +3235,15 @@
         emits("click", node, parents);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$c, {
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$d, {
           "scroll-y": true
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.nodes || [], node => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$7, {
               key: vue.unref(context).getKey(node),
               node,
               parent: void 0,
@@ -3427,7 +3264,7 @@
     }
   });
 
-  var _sfc_main$3 = vue.defineComponent({
+  var _sfc_main$5 = vue.defineComponent({
     __name: "wrapper",
     props: {
       readonly: {
@@ -3456,7 +3293,7 @@
           title: "对话框"
         }, {
           onClose: _cache[0] || (_cache[0] = $event => emits("cancel"))
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$c, vue.mergeProps({
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$d, vue.mergeProps({
           class: "wrapper-body"
         }, __props.content || {
           scrollX: false,
@@ -3478,7 +3315,7 @@
     snail_core.mustObject(options, "options");
     target instanceof HTMLElement || snail_core.throwError("target must be a HTMLElement");
     target.classList.add("snail-app");
-    const app = vue.createApp(_sfc_main$q, options);
+    const app = vue.createApp(_sfc_main$p, options);
     triggerAppCreated(app);
     app.mount(target);
     const scope = snail_core.useScope().onDestroy(() => app.unmount());
@@ -3486,54 +3323,6 @@
     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) snail_core.hasOwnProperty(MOTION, key) && Object.freeze(MOTION[key]);
-
   function initStepByFormat(format) {
     switch (format) {
       case "yyyy":
@@ -3560,8 +3349,8 @@
     return items;
   }
   function buildMonthItems(yearItem, min, max) {
-    const minDate = new Date(snail_core.formatDateValue(min, "yyyy-MM"));
-    const maxDate = new Date(snail_core.formatDateValue(max, "yyyy-MM"));
+    const minDate = snail_core.parseDate(snail_core.formatDateValue(min, "yyyy-MM"), "min");
+    const maxDate = snail_core.parseDate(snail_core.formatDateValue(max, "yyyy-MM"), "max");
     const items = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
     return items.map((item, index) => {
       const mi = {
@@ -3571,16 +3360,19 @@
         disabled: yearItem.disabled
       };
       if (mi.disabled != true) {
-        const date = new Date(snail_core.formatDateValue(mi, "yyyy-MM"));
+        const date = snail_core.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(snail_core.formatDateValue(min, "yyyy-MM-dd"));
-    const maxDate = new Date(snail_core.formatDateValue(max, "yyyy-MM-dd"));
-    const date = new Date(monthItem.year, monthItem.month - 1);
+    const minDate = snail_core.parseDate(snail_core.formatDateValue(min, "yyyy-MM-dd"), "min");
+    const maxDate = snail_core.parseDate(snail_core.formatDateValue(max, "yyyy-MM-dd"), "max");
+    const date = snail_core.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++) {
@@ -3592,7 +3384,7 @@
         disabled: monthItem.disabled
       };
       if (item.disabled != true) {
-        const date2 = new Date(snail_core.formatDateValue(item, "yyyy-MM-dd"));
+        const date2 = snail_core.getDateByValue(item);
         item.disabled = minDate != void 0 && date2 < minDate || maxDate != void 0 && date2 > maxDate;
       }
       items[index] = Object.freeze(item);
@@ -3610,9 +3402,9 @@
     return items;
   }
   function buildMinuteItems(hourItem, min, max) {
+    const minNumber = min && min.minute != void 0 ? snail_core.getTimeNumber(min.hour, min.minute, 0) : void 0;
+    const maxNumber = max && max.minute != void 0 ? snail_core.getTimeNumber(max.hour, max.minute, 0) : void 0;
     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,
@@ -3620,7 +3412,7 @@
         disabled: hourItem.disabled
       };
       if (item.disabled != true) {
-        const number = getTimeNumber(item.hour, item.minute, 0);
+        const number = snail_core.getTimeNumber(item.hour, item.minute, 0);
         item.disabled = minNumber != void 0 && number < minNumber || maxNumber != void 0 && number > maxNumber;
       }
       items[index] = Object.freeze(item);
@@ -3629,8 +3421,8 @@
   }
   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;
+    const minNumber = min && min.minute != void 0 ? snail_core.getTimeNumber(min.hour, min.minute, min.second) : void 0;
+    const maxNumber = max && max.minute != void 0 ? snail_core.getTimeNumber(max.hour, max.minute, max.second) : void 0;
     for (let index = 0; index < items.length; index++) {
       const item = {
         second: index,
@@ -3639,44 +3431,15 @@
         disabled: minuteItem.disabled
       };
       if (item.disabled != true) {
-        const number = getTimeNumber(item.hour, item.minute, item.second);
+        const number = snail_core.getTimeNumber(item.hour, item.minute, item.second);
         item.disabled = minNumber != void 0 && number < minNumber || maxNumber != void 0 && number > maxNumber;
       }
       items[index] = Object.freeze(item);
     }
     return items;
   }
-  function getTimeNumber(hour, minute, second) {
-    return (hour || 0) * 1e4 + (minute || 0) * 100 + (second || 0);
-  }
-  function isValidTime(format, time, min, max) {
-    time = snail_core.correctTimeValue(time);
-    if (time) {
-      min = snail_core.correctTimeValue({
-        ...min
-      });
-      const timeNumber = getTimeNumber(time.hour, time.minute, format == "HH:mm" ? 0 : time.second);
-      if (min != void 0) {
-        const minNumber = getTimeNumber(min.hour, min.minute, format == "HH:mm" ? 0 : max.second);
-        if (timeNumber < minNumber) {
-          return false;
-        }
-      }
-      max = snail_core.correctTimeValue({
-        ...max
-      });
-      if (max != void 0) {
-        const maxNumber = getTimeNumber(max.hour, max.minute, format == "HH:mm" ? 0 : max.second);
-        if (timeNumber > maxNumber) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return false;
-  }
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$4 = {
     class: "tz-item",
     ref: "hour-items"
   };
@@ -3692,7 +3455,7 @@
     ref: "second-items"
   };
   const _hoisted_6$1 = ["textContent", "onClick"];
-  var _sfc_main$2 = vue.defineComponent({
+  var _sfc_main$4 = vue.defineComponent({
     __name: "time-pc",
     props: {
       value: {},
@@ -3728,9 +3491,9 @@
       const props = __props;
       const emits = __emit;
       const format = props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss";
-      const min = snail_core.parseTimeValue(props.min);
-      const max = snail_core.parseTimeValue(props.max);
-      const timeRef = vue.ref(snail_core.parseTimeValue(props.value) || snail_core.getTimeValue(new Date()));
+      const min = snail_core.parseTimeValue(props.min, "min");
+      const max = snail_core.parseTimeValue(props.max, "max");
+      const timeRef = vue.ref(snail_core.parseTimeValue(props.value, "min") || snail_core.getTimeValue(new Date()));
       const isValidTimeRef = vue.computed(() => format == "HH:mm" ? minuteItems.value && minuteItems.value[timeRef.value.minute].disabled != true : secondItems.value && secondItems.value[timeRef.value.second].disabled != true);
       const hourItems = vue.shallowRef(buildHourItems(min, max));
       const minuteItems = vue.shallowRef();
@@ -3795,17 +3558,17 @@
       }
       vue.onMounted(rebuildItems);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           class: vue.normalizeClass(["time-picker pc", {
             "second-disabled": vue.unref(format) != "HH:mm:ss"
           }]),
           mode: "vertical"
         }, vue.createSlots({
-          main: vue.withCtx(() => [vue.createVNode(_sfc_main$f, {
-            group: true,
-            effect: "down-up"
+          main: vue.withCtx(() => [vue.createVNode(_sfc_main$r, {
+            multiple: "",
+            effect: vue.unref(MOTION).top
           }, {
-            default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hourItems.value, item => {
+            default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$4, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hourItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(["tzi-number", {
                   active: item.hour == timeRef.value.hour,
@@ -3837,23 +3600,23 @@
               }, null, 10, _hoisted_6$1);
             }), 128))], 512)) : vue.createCommentVNode("", true)]),
             _: 1
-          })]),
+          }, 8, ["effect"])]),
           _: 2
         }, [__props.toolbarDisabled != true ? {
           name: "bottom",
-          fn: vue.withCtx(() => [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+          fn: vue.withCtx(() => [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 0,
             type: "link",
             size: "small",
             textContent: "清空",
             onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), __props.inPopup && __props.closePopup("")))
-          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
             type: "link",
             size: "small",
             textContent: "现在",
             onClick: _cache[1] || (_cache[1] = $event => rebuildItems(vue.unref(snail_core.getTimeValue)(new Date())))
-          })) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$B, {
+          })) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$A, {
             type: "link",
             size: "small",
             textContent: "确定",
@@ -3868,7 +3631,7 @@
     }
   });
 
-  const _hoisted_1$1 = ["textContent"];
+  const _hoisted_1$3 = ["textContent"];
   const _hoisted_2 = ["textContent"];
   const _hoisted_3 = ["textContent"];
   const _hoisted_4 = ["textContent", "onClick"];
@@ -3876,7 +3639,7 @@
   const _hoisted_6 = ["textContent"];
   const _hoisted_7 = ["textContent", "onClick"];
   const _hoisted_8 = ["textContent"];
-  var _sfc_main$1 = vue.defineComponent({
+  var _sfc_main$3 = vue.defineComponent({
     __name: "date-pc",
     props: {
       value: {},
@@ -3916,18 +3679,18 @@
       const {
         inPopup
       } = props;
-      const dateRef = vue.ref(snail_core.parseDateValue(props.value));
+      const dateRef = vue.ref(snail_core.parseDateValue(props.value, "min"));
       const format = snail_core.correctDateFormat(props.format, "yyyy-MM-dd");
-      const min = Object.freeze(snail_core.parseDateValue(props.min));
-      const max = Object.freeze(snail_core.parseDateValue(props.max));
+      const min = Object.freeze(snail_core.parseDateValue(props.min, "min"));
+      const max = Object.freeze(snail_core.parseDateValue(props.max, "max"));
       const endStep = initStepByFormat(format);
       const stepRef = vue.shallowRef(endStep);
       const yearItems = vue.shallowRef();
       const monthItems = vue.shallowRef();
       const dayItemsRef = vue.shallowRef([]);
       const isValidDateRef = vue.computed(validateDate);
-      const minPickTime = Object.freeze(snail_core.parseTimeValue(props.minPickTime));
-      const maxPickTime = Object.freeze(snail_core.parseTimeValue(props.maxPickTime));
+      const minPickTime = Object.freeze(snail_core.parseTimeValue(props.minPickTime, "min"));
+      const maxPickTime = Object.freeze(snail_core.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 ? vue.useTemplateRef("time-area") : void 0;
       function validateDate() {
@@ -3950,7 +3713,7 @@
           case "yyyy-MM-dd HH:mm":
           case "yyyy-MM-dd HH:mm:ss":
             {
-              if (isValidTime(timeFormat, dateRef.value, minPickTime, maxPickTime) == true) {
+              if (snail_core.isValidTime(timeFormat, dateRef.value, minPickTime, maxPickTime) == true) {
                 const date = snail_core.getDateByValue(dateRef.value);
                 const disabled = min && date < snail_core.getDateByValue(min) || max && date > snail_core.getDateByValue(max);
                 return disabled != true;
@@ -3987,7 +3750,7 @@
             }
           case "day":
             {
-              const date = new Date(dateRef.value.year, dateRef.value.month - 1, 1);
+              const date = snail_core.getDateByValue(dateRef.value);
               date.setMonth(date.getMonth() + basis);
               dateRef.value.year = date.getFullYear();
               dateRef.value.month = date.getMonth() + 1;
@@ -4052,30 +3815,33 @@
         }
       }
       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: snail_core.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 = snail_core.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: snail_core.formatTimeValue(dateRef.value, timeFormat),
-          min: props.minPickTime,
-          max: props.minPickTime,
-          followX: "start",
-          followY: "before",
-          spaceX: -2,
-          spaceY: 4
-        });
-        task.finally(() => setTimeout(() => props.pinned.value = false)).then(text => {
-          if (text != void 0) {
-            const time = snail_core.parseTimeValue(text) || Object.create(null);
-            dateRef.value.hour = time.hour;
-            dateRef.value.minute = time.minute;
-            dateRef.value.second = time.second;
-          }
-        }, reason => {
-          console.error(reason);
-        });
       }
       function onNow() {
         stepRef.value = initStepByFormat(format);
@@ -4092,7 +3858,7 @@
       dateRef.value == void 0 && (dateRef.value = electDateValue());
       buildPickerItems(stepRef.value, 0);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           class: vue.normalizeClass(["date-picker pc", {
             "time-now": __props.pinned && __props.pinned.value == true
           }]),
@@ -4104,7 +3870,7 @@
             height: "30px"
           }
         }, vue.createSlots({
-          top: vue.withCtx(() => [vue.createVNode(_sfc_main$A, {
+          top: vue.withCtx(() => [vue.createVNode(_sfc_main$z, {
             type: "arrow",
             rotate: 180,
             size: 26,
@@ -4114,7 +3880,7 @@
           }, [stepRef.value == "year" ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             textContent: vue.toDisplayString(`${yearItems.value[0].year}年 - ${vue.unref(snail_core.getFromArray)(yearItems.value, -1).year}年`)
-          }, null, 8, _hoisted_1$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          }, null, 8, _hoisted_1$3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 1
           }, [vue.createElementVNode("div", {
             textContent: vue.toDisplayString(`${dateRef.value.year}年`),
@@ -4123,7 +3889,7 @@
             key: 0,
             textContent: vue.toDisplayString(`${dateRef.value.month}月`),
             onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
-          }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)], 64))], 2), vue.createVNode(_sfc_main$A, {
+          }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)], 64))], 2), vue.createVNode(_sfc_main$z, {
             type: "arrow",
             size: 26,
             onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
@@ -4188,19 +3954,19 @@
             onClick: onSelectTime
           }, null, 10, _hoisted_8)) : vue.createCommentVNode("", true), __props.toolbarDisabled != true ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 1
-          }, [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+          }, [__props.clearDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 0,
             type: "link",
             size: "small",
             textContent: "清空",
             onClick: _cache[4] || (_cache[4] = $event => (emits("clear"), vue.unref(inPopup) && __props.closePopup("")))
-          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+          })) : vue.createCommentVNode("", true), __props.nowDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
             type: "link",
             size: "small",
             textContent: "现在",
             onClick: onNow
-          })) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$B, {
+          })) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$A, {
             type: "link",
             size: "small",
             textContent: "确定",
@@ -4217,40 +3983,32 @@
 
   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 = snail_core.correctNumber(popupOptions.spaceX, 2);
+        popupOptions.spaceY = snail_core.correctNumber(popupOptions.spaceY, 2);
+        popupOptions.spaceClient = snail_core.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: snail_core.correctNumber(popupOptions.spaceX, 2),
-        spaceY: snail_core.correctNumber(popupOptions.spaceY, 2),
-        spaceClient: snail_core.correctNumber(popupOptions.spaceClient, 10),
-        closeOnMask: true,
         props: {
           ...options,
           picker: manager,
@@ -4266,6 +4024,178 @@
     return manager;
   }
 
+  const _hoisted_1$2 = ["title"];
+  var _sfc_main$2 = vue.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 = vue.useTemplateRef("datepicker");
+      const {
+        showDate
+      } = usePicker();
+      const {
+        watcher
+      } = useReactive();
+      const valueRef = vue.shallowRef();
+      let pickerScope;
+      function resetDateValue(value) {
+        const dateValue = snail_core.parseDateValue(value, "min");
+        valueRef.value = snail_core.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);
+          }
+        }
+      }
+      snail_core.isStringNotEmpty(props.value) && resetDateValue(props.value);
+      watcher(() => props.value, newValue => newValue !== valueRef.value && resetDateValue(newValue));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["snail-datepicker", {
+            readonly: __props.readonly
+          }]),
+          ref: "datepicker",
+          title: valueRef.value,
+          onClick: showPicker
+        }, [vue.withDirectives(vue.createElementVNode("input", {
+          class: "wh-fill",
+          type: "text",
+          readonly: "",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
+        }, null, 512), [[vue.vModelText, valueRef.value]]), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          key: 0,
+          type: "datepicker",
+          color: "#aeb6c2",
+          "hover-color": "#279bf1",
+          size: 16
+        })) : vue.createCommentVNode("", true)], 10, _hoisted_1$2);
+      };
+    }
+  });
+
+  const _hoisted_1$1 = ["title"];
+  var _sfc_main$1 = vue.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 = vue.useTemplateRef("timepicker");
+      const {
+        showTime
+      } = usePicker();
+      const {
+        watcher
+      } = useReactive();
+      const valueRef = vue.shallowRef();
+      let pickerScope;
+      function resetTimeValue(value) {
+        const timeValue = snail_core.parseTimeValue(value, "min");
+        valueRef.value = snail_core.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);
+          }
+        }
+      }
+      snail_core.isStringNotEmpty(props.value) && resetTimeValue(props.value);
+      watcher(() => props.value, newValue => newValue !== valueRef.value && resetTimeValue(newValue));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["snail-timepicker", {
+            readonly: __props.readonly
+          }]),
+          ref: "timepicker",
+          title: valueRef.value,
+          onClick: showPicker
+        }, [vue.withDirectives(vue.createElementVNode("input", {
+          class: "wh-fill",
+          type: "text",
+          readonly: "",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
+        }, null, 512), [[vue.vModelText, valueRef.value]]), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          key: 0,
+          type: "timepicker",
+          color: "#aeb6c2",
+          "hover-color": "#279bf1",
+          size: 20
+        })) : vue.createCommentVNode("", true)], 10, _hoisted_1$1);
+      };
+    }
+  });
+
   const _hoisted_1 = ["textContent"];
   var _sfc_main = vue.defineComponent({
     ...{
@@ -4351,12 +4281,12 @@
           onTouchstart: onStartDrag,
           onTouchmove: onDragMove,
           onTouchend: onDragEnd
-        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 0,
           type: "success",
           size: 20,
           color: "white"
-        })) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+        })) : (vue.openBlock(), vue.createBlock(_sfc_main$z, {
           key: 1,
           type: "custom",
           size: 20,
@@ -4368,34 +4298,33 @@
   });
 
   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
   };
 
   snail_core.onMountScope(scope => {