snail.vue 2.0.27 → 2.0.29

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, vShow, onBeforeUnmount, onActivated, getCurrentScope, onScopeDispose } from 'vue';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, shallowRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, vShow, onBeforeUnmount, onActivated, getCurrentScope, onScopeDispose } from 'vue';
 import { throwError, isObject, correctNumber, correctString, useKey, isArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isNumberNotNaN, isStringNotEmpty, hasAny, mustFunction, useScope, removeFromArray, mustObject, isArrayNotEmpty, hasOwnProperty, isString, script, delay, useTimer, runAsync, defer, useAsyncScope, useHook, newId, throwIfTrue, isFunction, isNullish, getTimeNumber, getDateValue, parseDate, formatDateValue, getDateByValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, isValidTime, getFromArray, onMountScope } from 'snail.core';
-import { css, link, useObserver, useScroll, useAnimation } from 'snail.view';
+import { link, css, useObserver, useScroll, useAnimation } from 'snail.view';
 
 const _hoisted_1$o = ["title"];
 var _sfc_main$F = defineComponent({
@@ -15,16 +15,26 @@ var _sfc_main$F = defineComponent({
     size: {},
     type: {}
   },
-  setup(__props) {
+  emits: ["click"],
+  setup(__props, _ref) {
+    let {
+      emit: __emit
+    } = _ref;
+    const emits = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-button", [__props.size, __props.type]]),
-        title: __props.title
-      }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("按钮", -1))])], 10, _hoisted_1$o);
+        title: __props.title,
+        onClick: _cache[0] || (_cache[0] = evt => emits("click", evt))
+      }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[1] || (_cache[1] = createTextVNode("按钮", -1))])], 10, _hoisted_1$o);
     };
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 function getBuiltinIcon(iconType) {
   switch (iconType) {
     case "success":
@@ -43,6 +53,8 @@ function getBuiltinIcon(iconType) {
       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":
@@ -66,7 +78,7 @@ function getBuiltinIcon(iconType) {
 }
 
 const _hoisted_1$n = ["viewBox"];
-const _hoisted_2$f = ["textContent"];
+const _hoisted_2$h = ["textContent"];
 const _hoisted_3$a = ["d"];
 var _sfc_main$E = defineComponent({
   __name: "icon",
@@ -84,11 +96,18 @@ var _sfc_main$E = defineComponent({
     hoverColor: {},
     rotate: {},
     opacity: {},
+    border: {},
+    radius: {},
+    background: {},
     viewBox: {}
   },
-  setup(__props) {
+  emits: ["click"],
+  setup(__props, _ref) {
+    let {
+      emit: __emit
+    } = _ref;
     const props = __props;
-    const isMouseEnterRef = shallowRef(false);
+    const emits = __emit;
     const sizeRef = computed(() => {
       if (isObject(props.size) == true) {
         return {
@@ -105,13 +124,17 @@ var _sfc_main$E = defineComponent({
     });
     const styleRef = computed(() => {
       const style = Object.create(null);
-      let fill = isMouseEnterRef.value ? correctString(props.hoverColor, props.color, true) : void 0;
-      fill == void 0 && (fill = correctString(props.color, void 0, true));
-      fill && (style.fill = fill);
+      let fill = correctString(props.color, void 0, true);
+      fill && (style["--fill"] = fill);
+      fill = correctString(props.hoverColor, fill, true);
+      fill && (style["--hover"] = fill);
       const rotate = correctNumber(props.rotate, 0);
       rotate != 0 && (style.transform = `rotate(${rotate}deg)`);
       const opacity = correctNumber(props.opacity, void 0);
       opacity >= 0 && (style.opacity = opacity);
+      style.border = correctString(props.border, void 0, true);
+      style.borderRadius = correctString(props.radius, void 0, true);
+      style.background = correctString(props.background, void 0, true);
       return style;
     });
     return (_ctx, _cache) => {
@@ -122,11 +145,10 @@ var _sfc_main$E = defineComponent({
         viewBox: unref(correctString)(__props.viewBox, "0 0 1024 1024", false)
       }, sizeRef.value, {
         style: styleRef.value,
-        onMouseenter: _cache[0] || (_cache[0] = $event => isMouseEnterRef.value = true),
-        onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
+        onClick: _cache[0] || (_cache[0] = evt => emits("click", evt))
       }), [createElementVNode("title", {
         textContent: toDisplayString(__props.title || "")
-      }, null, 8, _hoisted_2$f), __props.custom == true ? renderSlot(_ctx.$slots, "default", {
+      }, null, 8, _hoisted_2$h), __props.custom == true ? renderSlot(_ctx.$slots, "default", {
         key: 0
       }) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
@@ -140,7 +162,7 @@ var _sfc_main$E = defineComponent({
 });
 
 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 = defineComponent({
@@ -219,7 +241,7 @@ var _sfc_main$D = defineComponent({
           key: 0,
           type: unref(type),
           checked: node.selected
-        }, null, 8, _hoisted_2$e)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_2$g)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["status", [node.selected ? "selected" : ""]])
         }, [node.selected ? (openBlock(), createBlock(_sfc_main$E, {
@@ -241,10 +263,6 @@ var _sfc_main$D = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 var _sfc_main$C = defineComponent({
   ...{
     name: "Footer",
@@ -347,7 +365,7 @@ var _sfc_main$B = defineComponent({
 });
 
 const _hoisted_1$k = ["textContent"];
-const _hoisted_2$d = {
+const _hoisted_2$f = {
   key: 0,
   class: "required",
   textContent: "*"
@@ -409,7 +427,7 @@ var _sfc_main$A = defineComponent({
       }, [createElementVNode("span", {
         class: "text",
         textContent: toDisplayString(__props.title)
-      }, null, 8, _hoisted_1$k), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$d)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$8, [createElementVNode("input", {
+      }, null, 8, _hoisted_1$k), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$f)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$8, [createElementVNode("input", {
         ref: "input-el",
         type: __props.type || "text",
         value: inputModel.value,
@@ -636,7 +654,7 @@ const _hoisted_1$j = {
   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,
@@ -795,7 +813,7 @@ var _sfc_main$z = defineComponent({
       }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$j, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(prefix))
-      }, null, 8, _hoisted_2$c)])) : createCommentVNode("", true), createElementVNode("div", {
+      }, null, 8, _hoisted_2$e)])) : createCommentVNode("", true), createElementVNode("div", {
         class: normalizeClass(["input-panel", unref(controls)])
       }, [withDirectives(createElementVNode("input", {
         type: "text",
@@ -1135,7 +1153,7 @@ function deducePosition(strategy, targetStart, targetEnd, contentSize, clientSiz
 const _hoisted_1$h = {
   class: "snail-confirm flex-column"
 };
-const _hoisted_2$b = ["innerHTML"];
+const _hoisted_2$d = ["innerHTML"];
 var _sfc_main$x = defineComponent({
   ...{
     name: "ConfirmContainer",
@@ -1171,7 +1189,7 @@ var _sfc_main$x = defineComponent({
       }, null, 8, ["title"]), createElementVNode("div", {
         class: "confirm-body",
         innerHTML: __props.message || "请确认？"
-      }, null, 8, _hoisted_2$b), createVNode(_sfc_main$C, {
+      }, null, 8, _hoisted_2$d), createVNode(_sfc_main$C, {
         align: "right",
         "cancel-name": __props.cancelName,
         "cancel-disabled": __props.cancelDisabled,
@@ -1832,7 +1850,7 @@ const _hoisted_1$g = {
   key: 1,
   class: "icon"
 };
-const _hoisted_2$a = ["innerHTML"];
+const _hoisted_2$c = ["innerHTML"];
 var _sfc_main$o = defineComponent({
   ...{
     name: "ToastContainer",
@@ -1888,7 +1906,7 @@ var _sfc_main$o = defineComponent({
       }, null, 8, ["type"])])) : createCommentVNode("", true), createElementVNode("div", {
         class: "message",
         innerHTML: unref(props).message
-      }, null, 8, _hoisted_2$a)], 38);
+      }, null, 8, _hoisted_2$c)], 38);
     };
   }
 });
@@ -2134,7 +2152,7 @@ function getNoDataBase64Image() {
 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 = defineComponent({
   ...{
@@ -2151,7 +2169,7 @@ var _sfc_main$n = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [createElementVNode("img", {
         src: __props.imageUrl || unref(defaultImageBase64)
-      }, null, 8, _hoisted_2$9), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+      }, null, 8, _hoisted_2$b), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
         class: "message",
         textContent: toDisplayString(__props.message || "无数据")
       }, null, 8, _hoisted_3$6)])]);
@@ -2160,7 +2178,7 @@ var _sfc_main$n = defineComponent({
 });
 
 const _hoisted_1$e = ["title"];
-const _hoisted_2$8 = ["textContent"];
+const _hoisted_2$a = ["textContent"];
 const _hoisted_3$5 = {
   key: 1,
   class: "select-status"
@@ -2210,7 +2228,7 @@ var _sfc_main$m = defineComponent({
       }, [createElementVNode("div", {
         class: "item-text ellipsis",
         textContent: toDisplayString(__props.item.text)
-      }, null, 8, _hoisted_2$8), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$E, {
+      }, null, 8, _hoisted_2$a), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$E, {
         key: 0,
         type: "arrow"
       })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$E, {
@@ -2438,7 +2456,7 @@ const _hoisted_1$d = {
   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,
@@ -2583,7 +2601,7 @@ var _sfc_main$k = defineComponent({
         class: "select-text ellipsis",
         title: selectedTextRef.value,
         textContent: toDisplayString(selectedTextRef.value)
-      }, null, 8, _hoisted_2$7)])])) : (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$9)])])) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: "placeholder",
         textContent: toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
@@ -2722,7 +2740,7 @@ var _sfc_main$i = defineComponent({
 });
 
 const _hoisted_1$b = ["onClick"];
-const _hoisted_2$6 = ["textContent"];
+const _hoisted_2$8 = ["textContent"];
 var _sfc_main$h = defineComponent({
   __name: "action-items",
   props: {
@@ -2770,7 +2788,7 @@ var _sfc_main$h = defineComponent({
         }), null, 16)) : createCommentVNode("", true), createElementVNode("span", {
           class: "ellipsis",
           textContent: toDisplayString(action.name)
-        }, null, 8, _hoisted_2$6)], 12, _hoisted_1$b);
+        }, null, 8, _hoisted_2$8)], 12, _hoisted_1$b);
       }), 128))], 2);
     };
   }
@@ -2780,7 +2798,7 @@ const _hoisted_1$a = {
   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 = defineComponent({
@@ -2790,7 +2808,11 @@ var _sfc_main$g = defineComponent({
       type: Boolean
     },
     trigger: {},
-    actions: {}
+    actions: {},
+    followX: {},
+    followY: {},
+    spaceX: {},
+    spaceY: {}
   },
   emits: ["trigger"],
   setup(__props, _ref) {
@@ -2822,8 +2844,10 @@ var _sfc_main$g = defineComponent({
           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
@@ -2845,7 +2869,7 @@ var _sfc_main$g = defineComponent({
         pressStartDate = void 0;
         if (time >= 0.5) {
           navigator.vibrate && navigator.vibrate(200);
-          onFollowShow(true);
+          onFollowShow();
         }
       }
     }
@@ -2866,7 +2890,7 @@ var _sfc_main$g = defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", _hoisted_2$5, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotHandle))))]), __props.disabled != true && (__props.trigger == "hover" || __props.trigger == "always") ? (openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", _hoisted_2$7, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotHandle))))]), __props.disabled != true && (__props.trigger == "hover" || __props.trigger == "always") ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["trigger-area", {
           hidden: __props.trigger == "hover"
@@ -2875,7 +2899,7 @@ var _sfc_main$g = defineComponent({
         button: "",
         type: "more",
         size: 16,
-        onClick: _cache[0] || (_cache[0] = $event => onFollowShow(false))
+        onClick: _cache[0] || (_cache[0] = $event => onFollowShow())
       })])], 2)) : createCommentVNode("", true)], 512);
     };
   }
@@ -3183,7 +3207,7 @@ var _sfc_main$e = defineComponent({
 });
 
 const _hoisted_1$9 = ["textContent"];
-const _hoisted_2$4 = ["textContent"];
+const _hoisted_2$6 = ["textContent"];
 const _hoisted_3$3 = {
   key: 1,
   class: "status"
@@ -3284,7 +3308,7 @@ var _sfc_main$d = defineComponent({
         key: 0,
         class: "subtitle ellipsis",
         textContent: toDisplayString(__props.subtitle)
-      }, null, 8, _hoisted_2$4)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_3$3, [createVNode(_sfc_main$E, {
+      }, null, 8, _hoisted_2$6)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_3$3, [createVNode(_sfc_main$E, {
         type: "arrow",
         button: "",
         title: statusModel.value == "expand" ? "收起" : "展开",
@@ -3611,7 +3635,7 @@ const _hoisted_1$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"
 };
@@ -3742,7 +3766,7 @@ var _sfc_main$7 = defineComponent({
         class: "node-text ellipsis",
         title: __props.node.text,
         textContent: toDisplayString(__props.node.text)
-      }, null, 8, _hoisted_2$3), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34), [[vShow, showRef.value]]), withDirectives(createElementVNode("div", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, child => {
+      }, null, 8, _hoisted_2$5), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34), [[vShow, showRef.value]]), withDirectives(createElementVNode("div", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, child => {
         return openBlock(), createBlock(_component_TreeNode, {
           key: __props.context.getKey(child),
           node: child,
@@ -3843,7 +3867,7 @@ function mount(target, options, onDestroyed) {
 const _hoisted_1$5 = {
   class: "snail-flash-number"
 };
-const _hoisted_2$2 = ["textContent"];
+const _hoisted_2$4 = ["textContent"];
 var _sfc_main$5 = defineComponent({
   __name: "flash-number",
   props: {
@@ -3877,7 +3901,7 @@ var _sfc_main$5 = defineComponent({
           key: item.id,
           textContent: toDisplayString(item.text),
           class: normalizeClass(unref(isNullish)(item.number) ? "" : "number-item")
-        }, null, 10, _hoisted_2$2);
+        }, null, 10, _hoisted_2$4);
       }), 128)), _cache[0] || (_cache[0] = createElementVNode("span", {
         style: {
           "color": "red"
@@ -4007,23 +4031,24 @@ const _hoisted_1$4 = {
   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 = defineComponent({
   __name: "time-pc",
   props: {
     value: {},
     format: {},
+    mode: {},
     min: {},
     max: {},
     toolbarDisabled: {
@@ -4088,29 +4113,27 @@ var _sfc_main$4 = defineComponent({
         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 = 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() {
@@ -4140,8 +4163,9 @@ var _sfc_main$4 = defineComponent({
               }]),
               key: item.hour,
               textContent: toDisplayString(unref(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), createElementVNode("div", _hoisted_3$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(minuteItems.value, item => {
             return openBlock(), createElementBlock("div", {
               class: normalizeClass(["tzi-number", {
@@ -4150,8 +4174,9 @@ var _sfc_main$4 = defineComponent({
               }]),
               key: `${item.hour}:${item.minute}`,
               textContent: toDisplayString(unref(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), unref(format) == "HH:mm:ss" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(secondItems.value, item => {
             return openBlock(), createElementBlock("div", {
               class: normalizeClass(["tzi-number", {
@@ -4160,8 +4185,9 @@ var _sfc_main$4 = defineComponent({
               }]),
               key: `${item.hour}:${item.minute}:${item.second}`,
               textContent: toDisplayString(unref(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)) : createCommentVNode("", true)]),
           _: 1
         }, 8, ["effect"])]),
@@ -4196,18 +4222,19 @@ var _sfc_main$4 = defineComponent({
 });
 
 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 = defineComponent({
   __name: "date-pc",
   props: {
     value: {},
     format: {},
+    mode: {},
     min: {},
     max: {},
     minPickTime: {},
@@ -4332,13 +4359,11 @@ var _sfc_main$3 = defineComponent({
     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);
@@ -4346,14 +4371,12 @@ var _sfc_main$3 = defineComponent({
         }
       }
     }
-    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 = 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);
@@ -4361,19 +4384,17 @@ var _sfc_main$3 = defineComponent({
         }
       }
     }
-    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 = 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);
         }
       }
@@ -4390,10 +4411,13 @@ var _sfc_main$3 = defineComponent({
           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) {
@@ -4439,6 +4463,8 @@ var _sfc_main$3 = defineComponent({
           button: "",
           rotate: 180,
           size: 26,
+          color: "#8a9099",
+          "hover-color": "#58a4fd",
           onClick: _cache[0] || (_cache[0] = $event => buildPickerItems(stepRef.value, -1))
         }), createElementVNode("div", {
           class: normalizeClass(["header-content", stepRef.value])
@@ -4450,14 +4476,17 @@ var _sfc_main$3 = defineComponent({
         }, [createElementVNode("div", {
           textContent: toDisplayString(`${dateRef.value.year}年`),
           onClick: _cache[1] || (_cache[1] = $event => onSwitchStepClick("year"))
-        }, null, 8, _hoisted_2), stepRef.value == "day" ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_2$2), stepRef.value == "day" ? (openBlock(), createElementBlock("div", {
           key: 0,
           textContent: toDisplayString(`${dateRef.value.month}月`),
           onClick: _cache[2] || (_cache[2] = $event => onSwitchStepClick("month"))
         }, null, 8, _hoisted_3)) : createCommentVNode("", true)], 64))], 2), createVNode(_sfc_main$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: withCtx(() => [stepRef.value == "year" ? (openBlock(true), createElementBlock(Fragment, {
@@ -4471,8 +4500,9 @@ var _sfc_main$3 = defineComponent({
             key: item.year
           }, [createElementVNode("span", {
             textContent: 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" ? (openBlock(true), createElementBlock(Fragment, {
           key: 1
         }, renderList(monthItems.value, item => {
@@ -4484,8 +4514,9 @@ var _sfc_main$3 = defineComponent({
             key: `${item.year}-${item.month}`
           }, [createElementVNode("span", {
             textContent: 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)) : (openBlock(), createElementBlock(Fragment, {
           key: 2
         }, [(openBlock(), createElementBlock(Fragment, null, renderList(["日", "一", "二", "三", "四", "五", "六"], item => {
@@ -4504,8 +4535,9 @@ var _sfc_main$3 = defineComponent({
             key: `${item.year}-${item.month}-${item.day}`
           }, [createElementVNode("span", {
             textContent: 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
       }, [unref(endStep) == stepRef.value && (__props.toolbarDisabled != true || unref(timeFormat) != void 0) ? {
@@ -4562,25 +4594,38 @@ function usePicker() {
     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 = correctNumber(popupOptions.spaceX, 2);
-      popupOptions.spaceY = correctNumber(popupOptions.spaceY, 2);
-      popupOptions.spaceClient = correctNumber(popupOptions.spaceClient, 10);
-      popupOptions.closeOnMask = popupOptions.closeOnMask == void 0 ? true : popupOptions.closeOnMask;
-    }
-    return popup.follow(target, {
-      ...popupOptions,
-      component,
-      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 = correctNumber(follow.spaceX, 2);
+        follow.spaceY = correctNumber(follow.spaceY, 2);
+        follow.spaceClient = 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(mountScope({
     showDate,
@@ -4591,6 +4636,7 @@ function usePicker() {
 }
 
 const _hoisted_1$2 = ["title"];
+const _hoisted_2$1 = ["textContent"];
 var _sfc_main$2 = defineComponent({
   __name: "date-picker",
   props: {
@@ -4599,6 +4645,7 @@ var _sfc_main$2 = defineComponent({
     },
     value: {},
     format: {},
+    mode: {},
     min: {},
     max: {},
     minPickTime: {},
@@ -4611,7 +4658,8 @@ var _sfc_main$2 = defineComponent({
     },
     clearDisabled: {
       type: Boolean
-    }
+    },
+    popup: {}
   },
   emits: ["change"],
   setup(__props, _ref) {
@@ -4638,10 +4686,7 @@ var _sfc_main$2 = defineComponent({
         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) {
@@ -4656,18 +4701,20 @@ var _sfc_main$2 = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-datepicker", {
-          readonly: __props.readonly
+          readonly: __props.readonly,
+          "simple": __props.mode == "simple"
         }]),
-        ref: "datepicker",
         title: valueRef.value,
+        ref: "datepicker",
         onClick: showPicker
-      }, [withDirectives(createElementVNode("input", {
-        class: "wh-fill",
-        type: "text",
-        readonly: "",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
-      }, null, 512), [[vModelText, valueRef.value]]), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$E, {
+      }, [__props.mode != "simple" || unref(isStringNotEmpty)(valueRef.value) ? (openBlock(), createElementBlock("span", {
         key: 0,
+        class: normalizeClass(["ellipsis", {
+          "flex-1": __props.mode != "simple"
+        }]),
+        textContent: toDisplayString(valueRef.value)
+      }, null, 10, _hoisted_2$1)) : createCommentVNode("", true), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$E, {
+        key: 1,
         type: "datepicker",
         button: "",
         size: 16,
@@ -4679,6 +4726,7 @@ var _sfc_main$2 = defineComponent({
 });
 
 const _hoisted_1$1 = ["title"];
+const _hoisted_2 = ["textContent"];
 var _sfc_main$1 = defineComponent({
   __name: "time-picker",
   props: {
@@ -4687,6 +4735,7 @@ var _sfc_main$1 = defineComponent({
     },
     value: {},
     format: {},
+    mode: {},
     min: {},
     max: {},
     toolbarDisabled: {
@@ -4697,7 +4746,8 @@ var _sfc_main$1 = defineComponent({
     },
     clearDisabled: {
       type: Boolean
-    }
+    },
+    popup: {}
   },
   emits: ["change"],
   setup(__props, _ref) {
@@ -4724,10 +4774,7 @@ var _sfc_main$1 = defineComponent({
         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) {
@@ -4742,18 +4789,20 @@ var _sfc_main$1 = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-timepicker", {
-          readonly: __props.readonly
+          readonly: __props.readonly,
+          "simple": __props.mode == "simple"
         }]),
         ref: "timepicker",
         title: valueRef.value,
         onClick: showPicker
-      }, [withDirectives(createElementVNode("input", {
-        class: "wh-fill",
-        type: "text",
-        readonly: "",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueRef.value = $event)
-      }, null, 512), [[vModelText, valueRef.value]]), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$E, {
+      }, [__props.mode != "simple" || unref(isStringNotEmpty)(valueRef.value) ? (openBlock(), createElementBlock("span", {
         key: 0,
+        class: normalizeClass(["ellipsis", {
+          "flex-1": __props.mode != "simple"
+        }]),
+        textContent: toDisplayString(valueRef.value)
+      }, null, 10, _hoisted_2)) : createCommentVNode("", true), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$E, {
+        key: 1,
         type: "timepicker",
         button: "",
         size: 20,