snail.vue 2.0.28 → 2.0.29

package/dist/snail.vue.umd.js

@@ -17,12 +17,18 @@
       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);
       };
     }
   });
@@ -74,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",
@@ -97,9 +103,13 @@
       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 {
@@ -116,9 +126,10 @@
       });
       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);
@@ -136,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
@@ -154,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({
@@ -233,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, {
@@ -357,7 +367,7 @@
   });
 
   const _hoisted_1$k = ["textContent"];
-  const _hoisted_2$d = {
+  const _hoisted_2$f = {
     key: 0,
     class: "required",
     textContent: "*"
@@ -419,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,
@@ -646,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,
@@ -805,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",
@@ -1145,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",
@@ -1181,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,
@@ -1842,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",
@@ -1898,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);
       };
     }
   });
@@ -2144,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({
     ...{
@@ -2161,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)])]);
@@ -2170,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"
@@ -2220,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, {
@@ -2448,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,
@@ -2593,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 || "请选择")
@@ -2732,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: {
@@ -2780,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);
       };
     }
@@ -2790,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({
@@ -2882,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"
@@ -3199,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"
@@ -3300,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" ? "收起" : "展开",
@@ -3627,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"
   };
@@ -3758,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,
@@ -3859,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: {
@@ -3893,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"
@@ -4023,7 +4033,7 @@
     class: "tz-item",
     ref: "hour-items"
   };
-  const _hoisted_2$1 = ["textContent", "onClick", "onDblclick"];
+  const _hoisted_2$3 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_3$1 = {
     class: "tz-item",
     ref: "minute-items"
@@ -4040,6 +4050,7 @@
     props: {
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       toolbarDisabled: {
@@ -4156,7 +4167,7 @@
                 textContent: vue.toDisplayString(vue.unref(snail_core.padStart)(item.hour, 2, "0")),
                 onClick: $event => onHourClick(item),
                 onDblclick: $event => onHourClick(item)
-              }, null, 42, _hoisted_2$1);
+              }, 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", {
@@ -4213,7 +4224,7 @@
   });
 
   const _hoisted_1$3 = ["textContent"];
-  const _hoisted_2 = ["textContent"];
+  const _hoisted_2$2 = ["textContent"];
   const _hoisted_3 = ["textContent"];
   const _hoisted_4 = ["textContent", "onClick", "onDblclick"];
   const _hoisted_5 = ["textContent", "onClick", "onDblclick"];
@@ -4225,6 +4236,7 @@
     props: {
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       minPickTime: {},
@@ -4401,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) {
@@ -4450,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])
@@ -4461,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, {
@@ -4576,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,
@@ -4605,6 +4638,7 @@
   }
 
   const _hoisted_1$2 = ["title"];
+  const _hoisted_2$1 = ["textContent"];
   var _sfc_main$2 = vue.defineComponent({
     __name: "date-picker",
     props: {
@@ -4613,6 +4647,7 @@
       },
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       minPickTime: {},
@@ -4625,7 +4660,8 @@
       },
       clearDisabled: {
         type: Boolean
-      }
+      },
+      popup: {}
     },
     emits: ["change"],
     setup(__props, _ref) {
@@ -4652,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) {
@@ -4670,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,
@@ -4693,6 +4728,7 @@
   });
 
   const _hoisted_1$1 = ["title"];
+  const _hoisted_2 = ["textContent"];
   var _sfc_main$1 = vue.defineComponent({
     __name: "time-picker",
     props: {
@@ -4701,6 +4737,7 @@
       },
       value: {},
       format: {},
+      mode: {},
       min: {},
       max: {},
       toolbarDisabled: {
@@ -4711,7 +4748,8 @@
       },
       clearDisabled: {
         type: Boolean
-      }
+      },
+      popup: {}
     },
     emits: ["change"],
     setup(__props, _ref) {
@@ -4738,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) {
@@ -4756,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,

package/dist/styles/snail.vue.vue.css

@@ -7,7 +7,7 @@
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/header.vue 	 index:0 */
 .snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:bold}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/icon.vue 	 index:0 */
-.snail-icon{fill:#8a8099;opacity:1;transition:all .2s linear}.snail-icon.button{cursor:pointer}
+.snail-icon{--fill:#8a8099;--hover:#8a8099;fill:var(--fill);opacity:1;transition:all .2s linear}.snail-icon.button{cursor:pointer}@media (hover:hover) and (pointer:fine){.snail-icon:hover{fill:var(--hover)}}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{flex:1}.snail-input>.input-body>span{background-color:red;flex-shrink:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/number.vue 	 index:0 */
@@ -16,12 +16,12 @@
 .snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/select.vue 	 index:0 */
 .snail-select{align-items:center;border:1px solid #dddfed;border-radius:4px;color:#2e3033;display:flex;height:32px;width:100%}.snail-select:not(.readonly){background-color:#fff}.snail-select:not(.readonly,.empty){cursor:pointer}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.placeholder{flex:1;padding:0 10px 0 6px}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{flex:1;padding:0 8px}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/textarea.vue 	 index:0 */
-textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overflow-y:auto;resize:none;width:100%}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/switch.vue 	 index:0 */
 .snail-switch{cursor:pointer;overflow:hidden;position:relative}.snail-switch.readonly{cursor:not-allowed}.snail-switch.switch{border-radius:10px 10px 10px 10px;height:20px!important;width:36px!important}.snail-switch.switch>div.on{background-color:#5ca3ff}.snail-switch.switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch.switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.switch.on>div.off{left:100%;top:0}.snail-switch.switch.on>div.status{left:calc(100% - 18px)}.snail-switch.switch.off>div.off{left:0;top:0}.snail-switch.switch.off>div.status{left:2px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/switch.vue 	 index:1 */
 .snail-switch.checkbox,.snail-switch.radio{align-items:center;display:flex;flex-shrink:0;height:18px;justify-content:center;width:18px}.snail-switch.checkbox.off,.snail-switch.radio.off{border:1px solid #dcdfe6}.snail-switch.checkbox.on,.snail-switch.radio.on{background-color:#4c9aff;border:1px solid #4c9aff}.snail-switch.radio{border-radius:50%}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/textarea.vue 	 index:0 */
+textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overflow-y:auto;resize:none;width:100%}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/action.vue 	 index:0 */
 .snail-action,.snail-action *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-action>.action-slot{flex:1;overflow:hidden;position:relative}.snail-action>.trigger-area{align-items:center;flex-shrink:0;width:-moz-fit-content;width:fit-content}.snail-action>.trigger-area.hidden{display:none}.snail-action:hover>.trigger-area{display:flex}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/dynamic.vue 	 index:0 */
@@ -53,9 +53,9 @@ textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overf
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/other/flash-number.vue 	 index:0 */
 
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/date-picker.vue 	 index:0 */
-.snail-datepicker{height:32px;position:relative}.snail-datepicker>input:not(.readonly){cursor:pointer;padding-right:30px!important}.snail-datepicker>svg{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
+.snail-datepicker{align-items:center;border-radius:4px;color:#2e3033;display:flex;gap:8px;height:32px;position:relative}.snail-datepicker>svg{flex-shrink:0;margin-right:8px}.snail-datepicker:not(.readonly){cursor:pointer}.snail-datepicker:not(.readonly)>span{padding-left:10px}.snail-datepicker:not(.simple){border:1px solid #dddfed;width:100%}.snail-datepicker.simple{width:-moz-fit-content;width:fit-content}.snail-datepicker.simple>span{padding-left:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/time-picker.vue 	 index:0 */
-.snail-timepicker{height:32px;position:relative}.snail-timepicker>input:not(.readonly){cursor:pointer;padding-right:34px!important}.snail-timepicker>svg{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
+.snail-timepicker{align-items:center;border-radius:4px;color:#2e3033;display:flex;gap:8px;height:32px;position:relative}.snail-timepicker>svg{flex-shrink:0;margin-right:8px}.snail-timepicker:not(.readonly){cursor:pointer}.snail-timepicker:not(.readonly)>span{padding-left:10px}.snail-timepicker:not(.simple){border:1px solid #dddfed;width:100%}.snail-timepicker.simple{width:-moz-fit-content;width:fit-content}.snail-timepicker.simple>span{padding-left:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/prompt/drag-verify.vue 	 index:0 */
 .snail-drag-verify{background:#f8f9fa;border:1px solid #dddfed;border-radius:8px;height:40px;overflow:hidden;position:relative;width:100%}.snail-drag-verify>div{height:100%;width:100%}.snail-drag-verify>.drag-progress{background-color:#0c6;transition:width .5s ease-in-out}.snail-drag-verify>.drag-handle,.snail-drag-verify>.verify-message{left:0;position:absolute;top:0;transition:left .5s ease-in-out}.snail-drag-verify>.verify-message{background-image:-webkit-linear-gradient(left,#666,#666 45%,#fff 50%,#666 55%,#666);-webkit-text-fill-color:transparent;align-items:center;animation:snail-drag-verify 2s linear infinite;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#7e848c;display:flex;font-size:12px;font-weight:400;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-drag-verify>.drag-handle{align-items:center;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURQAAAGBQUGBaWmJZWWJYWGNYWGNZWWJYWGJZWWBYWGNYWGNZWWRYWIqwlb0AAAANdFJOUwAQMMDQoFBgcCCw4ECQ8pPMAAAAP0lEQVQI12NgwATTGBgawAwRBYZwMIPRiYErAcxSFmA0AjN4HBikBcCsUgYmQxQGE0wKphhIQrSzwAyEW4EOACHhB32zIad6AAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;border-right:1px solid #dddfed;display:flex;justify-content:center;width:40px}.snail-drag-verify.dragging>.drag-handle,.snail-drag-verify.dragging>.drag-progress{transition:none!important}.snail-drag-verify.success>.verify-message{-webkit-text-fill-color:#fff;color:#fff}.snail-drag-verify.success>.drag-handle>svg{background:#76c61d;border-radius:50%;padding:4px}@keyframes snail-drag-verify{0%{background-position:0 0}to{background-position:-200% 0}}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/prompt/empty.vue 	 index:0 */
@@ -65,7 +65,7 @@ textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overf
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/time-pc.vue 	 index:0 */
 .snail-layout.time-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:240px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:210px!important}.snail-layout.time-picker.pc>.main-area{display:flex;flex-wrap:nowrap;justify-content:space-between;margin:10px;overflow:hidden}.snail-layout.time-picker.pc>.main-area>.tz-item{border:1px solid #eee;border-left:none;flex-shrink:0;overflow:hidden auto;width:30%}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number{align-items:center;border-left:1px solid #eee;cursor:pointer;display:flex;height:24px;justify-content:center}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number:hover{background-color:#f4f4f4}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active{background-color:#58a4fd;border-color:#58a4fd;color:#fff!important}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active.disabled{opacity:.6}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.disabled{color:#ddd;cursor:not-allowed}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar{width:4px}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.6);border:none;border-radius:0}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}.snail-layout.time-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.time-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.time-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.time-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.time-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}.snail-layout.time-picker.pc.second-disabled{width:180px}.snail-layout.time-picker.pc.second-disabled>.main-area>.tz-item{width:46%}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/date-pc.vue 	 index:0 */
-.snail-layout.date-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:300px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:280px!important}.snail-layout.date-picker.pc.time-now:after{background-color:gray;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%}.snail-layout.date-picker.pc>.top-area{align-items:center;border-bottom:1px solid #eee;display:flex;flex-wrap:nowrap;padding:0 4px}.snail-layout.date-picker.pc>.top-area>svg{fill:#8a9099;flex-shrink:0}.snail-layout.date-picker.pc>.top-area>svg:hover{fill:#58a4fd}.snail-layout.date-picker.pc>.top-area>div.header-content{align-items:center;display:flex;flex:1;justify-content:center}.snail-layout.date-picker.pc>.top-area>div.header-content>div{align-items:center;display:flex;font-size:16px;height:100%}.snail-layout.date-picker.pc>.top-area>div.header-content>div:nth-child(2){margin-left:8px}.snail-layout.date-picker.pc>.top-area>div.header-content:not(.year)>div:hover{color:#58a4fd;cursor:pointer}.snail-layout.date-picker.pc>.main-area{display:flex;flex-wrap:wrap;justify-content:space-between}.snail-layout.date-picker.pc>.main-area>div{align-items:center;display:flex;flex-shrink:0;font-size:13px;justify-content:center;position:relative}.snail-layout.date-picker.pc>.main-area>div>span{align-items:center;display:flex;height:28px;justify-content:center}.snail-layout.date-picker.pc>.main-area>div>span:hover{background:#f4f4f4;cursor:pointer}.snail-layout.date-picker.pc>.main-area>div.active>span{background-color:#58a4fd;color:#fff!important}.snail-layout.date-picker.pc>.main-area>div.active.disabled{opacity:.6}.snail-layout.date-picker.pc>.main-area>div.disabled>span{color:#aaa;cursor:not-allowed}.snail-layout.date-picker.pc>.main-area>div.day-item{height:30px;width:36px}.snail-layout.date-picker.pc>.main-area>div.day-item.week{font-weight:bold}.snail-layout.date-picker.pc>.main-area>div.day-item.active>span,.snail-layout.date-picker.pc>.main-area>div.day-item:hover>span{border-radius:100%;width:28px}.snail-layout.date-picker.pc>.main-area>div.day-item:not(.now-month)>span{color:#aaa}.snail-layout.date-picker.pc>.main-area>div.month-item,.snail-layout.date-picker.pc>.main-area>div.year-item{width:30%}.snail-layout.date-picker.pc>.main-area>div.month-item.active>span,.snail-layout.date-picker.pc>.main-area>div.month-item:hover>span,.snail-layout.date-picker.pc>.main-area>div.year-item.active>span,.snail-layout.date-picker.pc>.main-area>div.year-item:hover>span{border-radius:15px;padding:0 8px;width:-moz-fit-content;width:fit-content}.snail-layout.date-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.date-picker.pc>.bottom-area>.time-area{color:#58a4fd;cursor:pointer;font-size:12px;margin-left:10px;margin-right:auto}.snail-layout.date-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.date-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.date-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.date-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}
+.snail-layout.date-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:300px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:280px!important}.snail-layout.date-picker.pc.time-now:after{background-color:gray;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%}.snail-layout.date-picker.pc>.top-area{align-items:center;border-bottom:1px solid #eee;display:flex;flex-wrap:nowrap;padding:0 4px}.snail-layout.date-picker.pc>.top-area>div.header-content{align-items:center;display:flex;flex:1;justify-content:center}.snail-layout.date-picker.pc>.top-area>div.header-content>div{align-items:center;display:flex;font-size:16px;height:100%}.snail-layout.date-picker.pc>.top-area>div.header-content>div:nth-child(2){margin-left:8px}.snail-layout.date-picker.pc>.top-area>div.header-content:not(.year)>div:hover{color:#58a4fd;cursor:pointer}.snail-layout.date-picker.pc>.main-area{display:flex;flex-wrap:wrap;justify-content:space-between}.snail-layout.date-picker.pc>.main-area>div{align-items:center;display:flex;flex-shrink:0;font-size:13px;justify-content:center;position:relative}.snail-layout.date-picker.pc>.main-area>div>span{align-items:center;display:flex;height:28px;justify-content:center}.snail-layout.date-picker.pc>.main-area>div>span:hover{background:#f4f4f4;cursor:pointer}.snail-layout.date-picker.pc>.main-area>div.active>span{background-color:#58a4fd;color:#fff!important}.snail-layout.date-picker.pc>.main-area>div.active.disabled{opacity:.6}.snail-layout.date-picker.pc>.main-area>div.disabled>span{color:#aaa;cursor:not-allowed}.snail-layout.date-picker.pc>.main-area>div.day-item{height:30px;width:36px}.snail-layout.date-picker.pc>.main-area>div.day-item.week{font-weight:bold}.snail-layout.date-picker.pc>.main-area>div.day-item.active>span,.snail-layout.date-picker.pc>.main-area>div.day-item:hover>span{border-radius:100%;width:28px}.snail-layout.date-picker.pc>.main-area>div.day-item:not(.now-month)>span{color:#aaa}.snail-layout.date-picker.pc>.main-area>div.month-item,.snail-layout.date-picker.pc>.main-area>div.year-item{width:30%}.snail-layout.date-picker.pc>.main-area>div.month-item.active>span,.snail-layout.date-picker.pc>.main-area>div.month-item:hover>span,.snail-layout.date-picker.pc>.main-area>div.year-item.active>span,.snail-layout.date-picker.pc>.main-area>div.year-item:hover>span{border-radius:15px;padding:0 8px;width:-moz-fit-content;width:fit-content}.snail-layout.date-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.date-picker.pc>.bottom-area>.time-area{color:#58a4fd;cursor:pointer;font-size:12px;margin-left:10px;margin-right:auto}.snail-layout.date-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.date-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.date-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.date-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/confirm-container.vue 	 index:0 */
 .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/dialog-container.vue 	 index:0 */

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",