snail.vue 2.0.27 → 2.0.29

package/dist/snail.vue.umd.js

@@ -17,16 +17,26 @@
       size: {},
       type: {}
     },
-    setup(__props) {
+    emits: ["click"],
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
+      const emits = __emit;
       return (_ctx, _cache) => {
         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$o);
+          title: __props.title,
+          onClick: _cache[0] || (_cache[0] = evt => emits("click", evt))
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[1] || (_cache[1] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$o);
       };
     }
   });
 
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
+
   function getBuiltinIcon(iconType) {
     switch (iconType) {
       case "success":
@@ -45,6 +55,8 @@
         return ["M896 256H128a96 96 0 0 0-96 96v256a96 96 0 0 0 96 96h32v-160h704v160h32a96 96 0 0 0 96-96v-256a96 96 0 0 0-96-96z m-67.52 208a64 64 0 1 1 64-64 64 64 0 0 1-64 64zM224 960a32 32 0 0 0 32 32h512a32 32 0 0 0 32-32V608H224zM800 96a35.2 35.2 0 0 0-35.52-32h-512A29.12 29.12 0 0 0 224 96v96h576z"];
       case "edit":
         return ["M 780.8 366.933 c 34.1333 -34.1333 34.1333 -93.8667 0 -128 c -38.4 -34.1333 -93.8667 -34.1333 -132.267 0 l -68.2667 68.2667 l 132.267 128 l 68.2667 -68.2667 Z M 541.867 349.867 l -277.333 277.333 L 213.333 806.4 l 179.2 -51.2 l 281.6 -277.333 Z M 469.333 768 h 341.333 v 42.6667 h -341.333 Z"];
+      case "pause":
+        return ["M716.805057 780.798397V243.199797c0-21.204979-17.196985-38.40377-38.40377-38.403771s-38.401964 17.196985-38.401964 38.403771v537.5986c0 21.204979 17.196985 38.392933 38.401964 38.392933s38.40377-17.187954 38.40377-38.392933zM384.000677 780.798397V243.199797c0-21.204979-17.187954-38.40377-38.391127-38.403771-21.215816 0-38.40377 17.196985-38.40377 38.403771v537.5986c0 21.204979 17.187954 38.392933 38.40377 38.392933 21.203173 0 38.391127-17.187954 38.391127-38.392933z"];
       case "arrow":
         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":
@@ -68,7 +80,7 @@
   }
 
   const _hoisted_1$n = ["viewBox"];
-  const _hoisted_2$f = ["textContent"];
+  const _hoisted_2$h = ["textContent"];
   const _hoisted_3$a = ["d"];
   var _sfc_main$E = vue.defineComponent({
     __name: "icon",
@@ -86,11 +98,18 @@
       hoverColor: {},
       rotate: {},
       opacity: {},
+      border: {},
+      radius: {},
+      background: {},
       viewBox: {}
     },
-    setup(__props) {
+    emits: ["click"],
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
       const props = __props;
-      const isMouseEnterRef = vue.shallowRef(false);
+      const emits = __emit;
       const sizeRef = vue.computed(() => {
         if (snail_core.isObject(props.size) == true) {
           return {
@@ -107,13 +126,17 @@
       });
       const styleRef = vue.computed(() => {
         const style = Object.create(null);
-        let fill = isMouseEnterRef.value ? snail_core.correctString(props.hoverColor, props.color, true) : void 0;
-        fill == void 0 && (fill = snail_core.correctString(props.color, void 0, true));
-        fill && (style.fill = fill);
+        let fill = snail_core.correctString(props.color, void 0, true);
+        fill && (style["--fill"] = fill);
+        fill = snail_core.correctString(props.hoverColor, fill, true);
+        fill && (style["--hover"] = fill);
         const rotate = snail_core.correctNumber(props.rotate, 0);
         rotate != 0 && (style.transform = `rotate(${rotate}deg)`);
         const opacity = snail_core.correctNumber(props.opacity, void 0);
         opacity >= 0 && (style.opacity = opacity);
+        style.border = snail_core.correctString(props.border, void 0, true);
+        style.borderRadius = snail_core.correctString(props.radius, void 0, true);
+        style.background = snail_core.correctString(props.background, void 0, true);
         return style;
       });
       return (_ctx, _cache) => {
@@ -124,11 +147,10 @@
           viewBox: vue.unref(snail_core.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)
+          onClick: _cache[0] || (_cache[0] = evt => emits("click", evt))
         }), [vue.createElementVNode("title", {
           textContent: vue.toDisplayString(__props.title || "")
-        }, null, 8, _hoisted_2$f), __props.custom == true ? vue.renderSlot(_ctx.$slots, "default", {
+        }, null, 8, _hoisted_2$h), __props.custom == true ? vue.renderSlot(_ctx.$slots, "default", {
           key: 0
         }) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
@@ -142,7 +164,7 @@
   });
 
   const _hoisted_1$m = ["title", "onClick"];
-  const _hoisted_2$e = ["type", "checked"];
+  const _hoisted_2$g = ["type", "checked"];
   const _hoisted_3$9 = ["textContent"];
   const _hoisted_4$6 = ["textContent"];
   var _sfc_main$D = vue.defineComponent({
@@ -221,7 +243,7 @@
             key: 0,
             type: vue.unref(type),
             checked: node.selected
-          }, null, 8, _hoisted_2$e)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, null, 8, _hoisted_2$g)) : 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$E, {
@@ -243,10 +265,6 @@
     }
   });
 
-  var addLink = href => setTimeout(snail_view.link.register, 0, href);
-
-  addLink("/styles/snail.vue.vue.css");
-
   var _sfc_main$C = vue.defineComponent({
     ...{
       name: "Footer",
@@ -349,7 +367,7 @@
   });
 
   const _hoisted_1$k = ["textContent"];
-  const _hoisted_2$d = {
+  const _hoisted_2$f = {
     key: 0,
     class: "required",
     textContent: "*"
@@ -411,7 +429,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$k), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$8, [vue.createElementVNode("input", {
+        }, null, 8, _hoisted_1$k), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$f)) : 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,
@@ -638,7 +656,7 @@
     key: 0,
     class: "number-prefix"
   };
-  const _hoisted_2$c = ["textContent"];
+  const _hoisted_2$e = ["textContent"];
   const _hoisted_3$7 = ["inputmode", "placeholder", "title"];
   const _hoisted_4$4 = {
     key: 1,
@@ -797,7 +815,7 @@
         }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(prefix))
-        }, null, 8, _hoisted_2$c)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$e)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: vue.normalizeClass(["input-panel", vue.unref(controls)])
         }, [vue.withDirectives(vue.createElementVNode("input", {
           type: "text",
@@ -1137,7 +1155,7 @@
   const _hoisted_1$h = {
     class: "snail-confirm flex-column"
   };
-  const _hoisted_2$b = ["innerHTML"];
+  const _hoisted_2$d = ["innerHTML"];
   var _sfc_main$x = vue.defineComponent({
     ...{
       name: "ConfirmContainer",
@@ -1173,7 +1191,7 @@
         }, null, 8, ["title"]), vue.createElementVNode("div", {
           class: "confirm-body",
           innerHTML: __props.message || "请确认？"
-        }, null, 8, _hoisted_2$b), vue.createVNode(_sfc_main$C, {
+        }, null, 8, _hoisted_2$d), vue.createVNode(_sfc_main$C, {
           align: "right",
           "cancel-name": __props.cancelName,
           "cancel-disabled": __props.cancelDisabled,
@@ -1834,7 +1852,7 @@
     key: 1,
     class: "icon"
   };
-  const _hoisted_2$a = ["innerHTML"];
+  const _hoisted_2$c = ["innerHTML"];
   var _sfc_main$o = vue.defineComponent({
     ...{
       name: "ToastContainer",
@@ -1890,7 +1908,7 @@
         }, null, 8, ["type"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: "message",
           innerHTML: vue.unref(props).message
-        }, null, 8, _hoisted_2$a)], 38);
+        }, null, 8, _hoisted_2$c)], 38);
       };
     }
   });
@@ -2136,7 +2154,7 @@
   const _hoisted_1$f = {
     class: "snail-empty"
   };
-  const _hoisted_2$9 = ["src"];
+  const _hoisted_2$b = ["src"];
   const _hoisted_3$6 = ["textContent"];
   var _sfc_main$n = vue.defineComponent({
     ...{
@@ -2153,7 +2171,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [vue.createElementVNode("img", {
           src: __props.imageUrl || vue.unref(defaultImageBase64)
-        }, null, 8, _hoisted_2$9), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$b), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
           textContent: vue.toDisplayString(__props.message || "无数据")
         }, null, 8, _hoisted_3$6)])]);
@@ -2162,7 +2180,7 @@
   });
 
   const _hoisted_1$e = ["title"];
-  const _hoisted_2$8 = ["textContent"];
+  const _hoisted_2$a = ["textContent"];
   const _hoisted_3$5 = {
     key: 1,
     class: "select-status"
@@ -2212,7 +2230,7 @@
         }, [vue.createElementVNode("div", {
           class: "item-text ellipsis",
           textContent: vue.toDisplayString(__props.item.text)
-        }, null, 8, _hoisted_2$8), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+        }, null, 8, _hoisted_2$a), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
           key: 0,
           type: "arrow"
         })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [vue.createVNode(_sfc_main$E, {
@@ -2440,7 +2458,7 @@
     key: 0,
     class: "select-result"
   };
-  const _hoisted_2$7 = ["title", "textContent"];
+  const _hoisted_2$9 = ["title", "textContent"];
   const _hoisted_3$4 = ["textContent"];
   const _hoisted_4$3 = {
     key: 1,
@@ -2585,7 +2603,7 @@
           class: "select-text ellipsis",
           title: selectedTextRef.value,
           textContent: vue.toDisplayString(selectedTextRef.value)
-        }, null, 8, _hoisted_2$7)])])) : (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_2$9)])])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           class: "placeholder",
           textContent: vue.toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
@@ -2724,7 +2742,7 @@
   });
 
   const _hoisted_1$b = ["onClick"];
-  const _hoisted_2$6 = ["textContent"];
+  const _hoisted_2$8 = ["textContent"];
   var _sfc_main$h = vue.defineComponent({
     __name: "action-items",
     props: {
@@ -2772,7 +2790,7 @@
           }), null, 16)) : vue.createCommentVNode("", true), vue.createElementVNode("span", {
             class: "ellipsis",
             textContent: vue.toDisplayString(action.name)
-          }, null, 8, _hoisted_2$6)], 12, _hoisted_1$b);
+          }, null, 8, _hoisted_2$8)], 12, _hoisted_1$b);
         }), 128))], 2);
       };
     }
@@ -2782,7 +2800,7 @@
     class: "snail-action flex-cross-center",
     ref: "snail-action"
   };
-  const _hoisted_2$5 = {
+  const _hoisted_2$7 = {
     class: "action-slot flex-cross-center"
   };
   var _sfc_main$g = vue.defineComponent({
@@ -2792,7 +2810,11 @@
         type: Boolean
       },
       trigger: {},
-      actions: {}
+      actions: {},
+      followX: {},
+      followY: {},
+      spaceX: {},
+      spaceY: {}
     },
     emits: ["trigger"],
     setup(__props, _ref) {
@@ -2824,8 +2846,10 @@
             closeOnMask: true,
             closeOnResize: true,
             closeOnTarget: true,
-            followX: longPress ? ["center", "start", "end"] : ["after", "end", "start", "end", "center"],
-            followY: longPress ? ["center", "after", "before"] : ["after", "before", "center", "end", "after"],
+            followX: props.followX || ["center", "start", "end", "after", "before", "ratio"],
+            followY: props.followY || ["after", "before", "center", "end", "start", "ratio"],
+            spaceX: props.spaceX,
+            spaceY: props.spaceY,
             props: {
               mode: "vertical",
               actions: props.actions
@@ -2847,7 +2871,7 @@
           pressStartDate = void 0;
           if (time >= 0.5) {
             navigator.vibrate && navigator.vibrate(200);
-            onFollowShow(true);
+            onFollowShow();
           }
         }
       }
@@ -2868,7 +2892,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", _hoisted_2$5, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotHandle))))]), __props.disabled != true && (__props.trigger == "hover" || __props.trigger == "always") ? (vue.openBlock(), vue.createElementBlock("div", {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", _hoisted_2$7, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotHandle))))]), __props.disabled != true && (__props.trigger == "hover" || __props.trigger == "always") ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["trigger-area", {
             hidden: __props.trigger == "hover"
@@ -2877,7 +2901,7 @@
           button: "",
           type: "more",
           size: 16,
-          onClick: _cache[0] || (_cache[0] = $event => onFollowShow(false))
+          onClick: _cache[0] || (_cache[0] = $event => onFollowShow())
         })])], 2)) : vue.createCommentVNode("", true)], 512);
       };
     }
@@ -3185,7 +3209,7 @@
   });
 
   const _hoisted_1$9 = ["textContent"];
-  const _hoisted_2$4 = ["textContent"];
+  const _hoisted_2$6 = ["textContent"];
   const _hoisted_3$3 = {
     key: 1,
     class: "status"
@@ -3286,7 +3310,7 @@
           key: 0,
           class: "subtitle ellipsis",
           textContent: vue.toDisplayString(__props.subtitle)
-        }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$E, {
+        }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$E, {
           type: "arrow",
           button: "",
           title: statusModel.value == "expand" ? "收起" : "展开",
@@ -3613,7 +3637,7 @@
     key: 0,
     class: "node-fold"
   };
-  const _hoisted_2$3 = ["title", "textContent"];
+  const _hoisted_2$5 = ["title", "textContent"];
   const _hoisted_3$2 = {
     class: "node-slot ellipsis"
   };
@@ -3744,7 +3768,7 @@
           class: "node-text ellipsis",
           title: __props.node.text,
           textContent: vue.toDisplayString(__props.node.text)
-        }, null, 8, _hoisted_2$3), vue.createElementVNode("div", _hoisted_3$2, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34), [[vue.vShow, showRef.value]]), vue.withDirectives(vue.createElementVNode("div", _hoisted_4$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.node.children, child => {
+        }, null, 8, _hoisted_2$5), vue.createElementVNode("div", _hoisted_3$2, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34), [[vue.vShow, showRef.value]]), vue.withDirectives(vue.createElementVNode("div", _hoisted_4$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.node.children, child => {
           return vue.openBlock(), vue.createBlock(_component_TreeNode, {
             key: __props.context.getKey(child),
             node: child,
@@ -3845,7 +3869,7 @@
   const _hoisted_1$5 = {
     class: "snail-flash-number"
   };
-  const _hoisted_2$2 = ["textContent"];
+  const _hoisted_2$4 = ["textContent"];
   var _sfc_main$5 = vue.defineComponent({
     __name: "flash-number",
     props: {
@@ -3879,7 +3903,7 @@
             key: item.id,
             textContent: vue.toDisplayString(item.text),
             class: vue.normalizeClass(vue.unref(snail_core.isNullish)(item.number) ? "" : "number-item")
-          }, null, 10, _hoisted_2$2);
+          }, null, 10, _hoisted_2$4);
         }), 128)), _cache[0] || (_cache[0] = vue.createElementVNode("span", {
           style: {
             "color": "red"
@@ -4009,23 +4033,24 @@
     class: "tz-item",
     ref: "hour-items"
   };
-  const _hoisted_2$1 = ["textContent", "onClick"];
+  const _hoisted_2$3 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_3$1 = {
     class: "tz-item",
     ref: "minute-items"
   };
-  const _hoisted_4$1 = ["textContent", "onClick"];
+  const _hoisted_4$1 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_5$1 = {
     key: 0,
     class: "tz-item",
     ref: "second-items"
   };
-  const _hoisted_6$1 = ["textContent", "onClick"];
+  const _hoisted_6$1 = ["textContent", "onClick", "onDblclick"];
   var _sfc_main$4 = vue.defineComponent({
     __name: "time-pc",
     props: {
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       toolbarDisabled: {
@@ -4090,29 +4115,27 @@
           block: "center"
         });
       }
-      function onHourClick(item) {
+      function onHourClick(item, dbClick) {
         if (item.disabled != true && timeRef.value.hour != item.hour) {
           timeRef.value.hour = item.hour;
           minuteItems.value = buildMinuteItems(item, min, max);
           secondItems.value = buildSecondItems(minuteItems.value[timeRef.value.minute], min, max);
         }
       }
-      function onMinuteClick(item) {
+      function onMinuteClick(item, dbClick) {
         if (item.disabled != true) {
+          timeRef.value.minute = item.minute;
           if (format == "HH:mm") {
-            const value = snail_core.formatTimeValue(item, "HH:mm");
-            emits("confirm", value);
-            props.inPopup && props.closePopup(value);
+            dbClick && onConfirm();
           } else if (timeRef.value.minute != item.minute) {
-            timeRef.value.minute = item.minute;
             secondItems.value = buildSecondItems(item, min, max);
           }
         }
       }
-      function onSecondClick(item) {
+      function onSecondClick(item, dbClick) {
         if (item.disabled != true) {
           timeRef.value.second = item.second;
-          onConfirm();
+          dbClick && onConfirm();
         }
       }
       function onConfirm() {
@@ -4142,8 +4165,9 @@
                 }]),
                 key: item.hour,
                 textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.hour, 2, "0")),
-                onClick: $event => onHourClick(item)
-              }, null, 10, _hoisted_2$1);
+                onClick: $event => onHourClick(item),
+                onDblclick: $event => onHourClick(item)
+              }, null, 42, _hoisted_2$3);
             }), 128))], 512), vue.createElementVNode("div", _hoisted_3$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(minuteItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(["tzi-number", {
@@ -4152,8 +4176,9 @@
                 }]),
                 key: `${item.hour}:${item.minute}`,
                 textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.minute, 2, "0")),
-                onClick: $event => onMinuteClick(item)
-              }, null, 10, _hoisted_4$1);
+                onClick: $event => onMinuteClick(item),
+                onDblclick: $event => onMinuteClick(item, true)
+              }, null, 42, _hoisted_4$1);
             }), 128))], 512), vue.unref(format) == "HH:mm:ss" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(secondItems.value, item => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(["tzi-number", {
@@ -4162,8 +4187,9 @@
                 }]),
                 key: `${item.hour}:${item.minute}:${item.second}`,
                 textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.second, 2, "0")),
-                onClick: $event => onSecondClick(item)
-              }, null, 10, _hoisted_6$1);
+                onClick: $event => onSecondClick(item),
+                onDblclick: $event => onSecondClick(item, true)
+              }, null, 42, _hoisted_6$1);
             }), 128))], 512)) : vue.createCommentVNode("", true)]),
             _: 1
           }, 8, ["effect"])]),
@@ -4198,18 +4224,19 @@
   });
 
   const _hoisted_1$3 = ["textContent"];
-  const _hoisted_2 = ["textContent"];
+  const _hoisted_2$2 = ["textContent"];
   const _hoisted_3 = ["textContent"];
-  const _hoisted_4 = ["textContent", "onClick"];
-  const _hoisted_5 = ["textContent", "onClick"];
+  const _hoisted_4 = ["textContent", "onClick", "onDblclick"];
+  const _hoisted_5 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_6 = ["textContent"];
-  const _hoisted_7 = ["textContent", "onClick"];
+  const _hoisted_7 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_8 = ["textContent"];
   var _sfc_main$3 = vue.defineComponent({
     __name: "date-pc",
     props: {
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       minPickTime: {},
@@ -4334,13 +4361,11 @@
       function onSwitchStepClick(newValue) {
         setTimeout(() => stepRef.value = newValue);
       }
-      function onYearItemClick(item) {
+      function onYearItemClick(item, dbClick) {
         if (item.disabled != true) {
           dateRef.value.year = item.year;
           if (format == "yyyy") {
-            const value = String(dateRef.value.year).padStart(4, "0");
-            emits("confirm", value);
-            props.inPopup && props.closePopup(value);
+            dbClick && onConfirm();
           } else {
             dateRef.value.month = 1;
             monthItems.value = buildMonthItems(item, min, max);
@@ -4348,14 +4373,12 @@
           }
         }
       }
-      function onMonthItemClick(item) {
+      function onMonthItemClick(item, dbClick) {
         if (item.disabled != true) {
           dateRef.value.year = item.year;
           dateRef.value.month = item.month;
           if (format == "yyyy-MM") {
-            const value = snail_core.formatDateValue(dateRef.value, "yyyy-MM");
-            emits("confirm", value);
-            props.inPopup && props.closePopup(value);
+            dbClick && onConfirm();
           } else {
             dateRef.value.day = 1;
             dayItemsRef.value = buildDayItems(item, min, max);
@@ -4363,19 +4386,17 @@
           }
         }
       }
-      function onDayItemClick(item) {
+      function onDayItemClick(item, dbClick) {
         if (item.disabled != true) {
-          const isNowMonth = item.year == dateRef.value.year && item.month == dateRef.value.month;
           Object.assign(dateRef.value, {
             year: item.year,
             month: item.month,
             day: item.day
           });
           if (format == "yyyy-MM-dd") {
-            const value = snail_core.formatDateValue(dateRef.value, "yyyy-MM-dd");
-            emits("confirm", value);
-            props.inPopup && props.closePopup(value);
+            dbClick && onConfirm();
           } else {
+            const isNowMonth = item.year == dateRef.value.year && item.month == dateRef.value.month;
             isNowMonth || buildPickerItems("day", 0);
           }
         }
@@ -4392,10 +4413,13 @@
             clearDisabled: props.clearDisabled,
             toolbarDisabled: props.toolbarDisabled
           }, {
-            followX: "start",
-            followY: "before",
-            spaceX: -2,
-            spaceY: 4
+            mode: "follow",
+            follow: {
+              followX: "start",
+              followY: "before",
+              spaceX: -2,
+              spaceY: 4
+            }
           });
           task.finally(() => setTimeout(() => props.pinned.value = false)).then(text => {
             if (text != void 0) {
@@ -4441,6 +4465,8 @@
             button: "",
             rotate: 180,
             size: 26,
+            color: "#8a9099",
+            "hover-color": "#58a4fd",
             onClick: _cache[0] || (_cache[0] = $event => buildPickerItems(stepRef.value, -1))
           }), vue.createElementVNode("div", {
             class: vue.normalizeClass(["header-content", stepRef.value])
@@ -4452,14 +4478,17 @@
           }, [vue.createElementVNode("div", {
             textContent: vue.toDisplayString(`${dateRef.value.year}年`),
             onClick: _cache[1] || (_cache[1] = $event => onSwitchStepClick("year"))
-          }, null, 8, _hoisted_2), stepRef.value == "day" ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, null, 8, _hoisted_2$2), stepRef.value == "day" ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             textContent: vue.toDisplayString(`${dateRef.value.month}月`),
             onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
           }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)], 64))], 2), vue.createVNode(_sfc_main$E, {
+            class: "flex-0",
             type: "arrow",
             button: "",
             size: 26,
+            color: "#8a9099",
+            "hover-color": "#58a4fd",
             onClick: _cache[3] || (_cache[3] = $event => buildPickerItems(stepRef.value, 1))
           })]),
           main: vue.withCtx(() => [stepRef.value == "year" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
@@ -4473,8 +4502,9 @@
               key: item.year
             }, [vue.createElementVNode("span", {
               textContent: vue.toDisplayString(item.year),
-              onClick: $event => onYearItemClick(item)
-            }, null, 8, _hoisted_4)], 2);
+              onClick: $event => onYearItemClick(item),
+              onDblclick: $event => onYearItemClick(item, true)
+            }, null, 40, _hoisted_4)], 2);
           }), 128)) : stepRef.value == "month" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
             key: 1
           }, vue.renderList(monthItems.value, item => {
@@ -4486,8 +4516,9 @@
               key: `${item.year}-${item.month}`
             }, [vue.createElementVNode("span", {
               textContent: vue.toDisplayString(item.text),
-              onClick: $event => onMonthItemClick(item)
-            }, null, 8, _hoisted_5)], 2);
+              onClick: $event => onMonthItemClick(item),
+              onDblclick: $event => onMonthItemClick(item, true)
+            }, null, 40, _hoisted_5)], 2);
           }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: 2
           }, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["日", "一", "二", "三", "四", "五", "六"], item => {
@@ -4506,8 +4537,9 @@
               key: `${item.year}-${item.month}-${item.day}`
             }, [vue.createElementVNode("span", {
               textContent: vue.toDisplayString(item.day),
-              onClick: $event => onDayItemClick(item)
-            }, null, 8, _hoisted_7)], 2);
+              onClick: $event => onDayItemClick(item),
+              onDblclick: $event => onDayItemClick(item, true)
+            }, null, 40, _hoisted_7)], 2);
           }), 128))], 64))]),
           _: 2
         }, [vue.unref(endStep) == stepRef.value && (__props.toolbarDisabled != true || vue.unref(timeFormat) != void 0) ? {
@@ -4564,25 +4596,38 @@
       return showPicker(target, _sfc_main$4, options, popupOptions);
     }
     function showPicker(target, component, options, popupOptions) {
-      {
-        popupOptions = {
-          ...popupOptions
-        };
-        popupOptions.followX = popupOptions.followX || ["start", "end", "center", "before", "after"];
-        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,
-        props: {
-          ...options,
-          picker: manager,
-          popup
+      if (popupOptions && popupOptions.mode == "dialog") {
+        return popup.dialog({
+          component,
+          ...(popupOptions.dialog || {
+            closeOnEscape: false,
+            closeOnMask: true
+          }),
+          props: {
+            ...options,
+            picker: manager,
+            popup
+          }
+        });
+      } else {
+        const follow = (popupOptions ? popupOptions.follow : void 0) || Object.create(null);
+        {
+          follow.followX = follow.followX || ["center", "start", "end", "before", "after"];
+          follow.spaceX = snail_core.correctNumber(follow.spaceX, 2);
+          follow.spaceY = snail_core.correctNumber(follow.spaceY, 2);
+          follow.spaceClient = snail_core.correctNumber(follow.spaceClient, 10);
+          follow.closeOnMask = follow.closeOnMask == void 0 ? true : follow.closeOnMask;
         }
-      });
+        return popup.follow(target, {
+          ...follow,
+          component,
+          props: {
+            ...options,
+            picker: manager,
+            popup
+          }
+        });
+      }
     }
     const manager = Object.freeze(snail_core.mountScope({
       showDate,
@@ -4593,6 +4638,7 @@
   }
 
   const _hoisted_1$2 = ["title"];
+  const _hoisted_2$1 = ["textContent"];
   var _sfc_main$2 = vue.defineComponent({
     __name: "date-picker",
     props: {
@@ -4601,6 +4647,7 @@
       },
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       minPickTime: {},
@@ -4613,7 +4660,8 @@
       },
       clearDisabled: {
         type: Boolean
-      }
+      },
+      popup: {}
     },
     emits: ["change"],
     setup(__props, _ref) {
@@ -4640,10 +4688,7 @@
           pickerScope = showDate(pickerDom.value, {
             ...props,
             value: valueRef.value
-          }, {
-            followX: evt.target.tagName == "svg" ? ["end"] : void 0,
-            closeOnTarget: true
-          });
+          }, props.popup);
           const dateText = await pickerScope;
           pickerScope = void 0;
           if (dateText !== void 0 && dateText != valueRef.value) {
@@ -4658,18 +4703,20 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-datepicker", {
-            readonly: __props.readonly
+            readonly: __props.readonly,
+            "simple": __props.mode == "simple"
           }]),
-          ref: "datepicker",
           title: valueRef.value,
+          ref: "datepicker",
           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$E, {
+        }, [__props.mode != "simple" || vue.unref(snail_core.isStringNotEmpty)(valueRef.value) ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
+          class: vue.normalizeClass(["ellipsis", {
+            "flex-1": __props.mode != "simple"
+          }]),
+          textContent: vue.toDisplayString(valueRef.value)
+        }, null, 10, _hoisted_2$1)) : vue.createCommentVNode("", true), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+          key: 1,
           type: "datepicker",
           button: "",
           size: 16,
@@ -4681,6 +4728,7 @@
   });
 
   const _hoisted_1$1 = ["title"];
+  const _hoisted_2 = ["textContent"];
   var _sfc_main$1 = vue.defineComponent({
     __name: "time-picker",
     props: {
@@ -4689,6 +4737,7 @@
       },
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       toolbarDisabled: {
@@ -4699,7 +4748,8 @@
       },
       clearDisabled: {
         type: Boolean
-      }
+      },
+      popup: {}
     },
     emits: ["change"],
     setup(__props, _ref) {
@@ -4726,10 +4776,7 @@
           pickerScope = showTime(pickerDom.value, {
             ...props,
             value: valueRef.value
-          }, {
-            followX: evt.target.tagName == "svg" ? ["end"] : void 0,
-            closeOnTarget: true
-          });
+          }, props.popup);
           const timeText = await pickerScope;
           pickerScope = void 0;
           if (timeText !== void 0 && timeText != valueRef.value) {
@@ -4744,18 +4791,20 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-timepicker", {
-            readonly: __props.readonly
+            readonly: __props.readonly,
+            "simple": __props.mode == "simple"
           }]),
           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$E, {
+        }, [__props.mode != "simple" || vue.unref(snail_core.isStringNotEmpty)(valueRef.value) ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
+          class: vue.normalizeClass(["ellipsis", {
+            "flex-1": __props.mode != "simple"
+          }]),
+          textContent: vue.toDisplayString(valueRef.value)
+        }, null, 10, _hoisted_2)) : vue.createCommentVNode("", true), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+          key: 1,
           type: "timepicker",
           button: "",
           size: 20,