snail.vue 2.0.9 → 2.0.11

package/dist/snail.vue.umd.js

@@ -6,7 +6,7 @@
 })(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
 
   const _hoisted_1$j = ["title"];
-  var _sfc_main$x = vue.defineComponent({
+  var _sfc_main$y = vue.defineComponent({
     ...{
       name: "Button",
       inheritAttrs: true
@@ -71,8 +71,8 @@
 
   const _hoisted_1$i = ["width", "height"];
   const _hoisted_2$b = ["textContent"];
-  const _hoisted_3$8 = ["fill", "stroke", "stroke-width", "d"];
-  var _sfc_main$w = vue.defineComponent({
+  const _hoisted_3$9 = ["fill", "stroke", "stroke-width", "d"];
+  var _sfc_main$x = vue.defineComponent({
     ...{
       name: "Icon",
       inheritAttrs: true
@@ -108,7 +108,7 @@
             stroke: __props.stroke,
             "stroke-width": __props.strokeWidth,
             d
-          }, null, 8, _hoisted_3$8);
+          }, null, 8, _hoisted_3$9);
         }), 256))], 46, _hoisted_1$i);
       };
     }
@@ -116,9 +116,9 @@
 
   const _hoisted_1$h = ["title", "onClick"];
   const _hoisted_2$a = ["type", "checked"];
-  const _hoisted_3$7 = ["textContent"];
-  const _hoisted_4$5 = ["textContent"];
-  var _sfc_main$v = vue.defineComponent({
+  const _hoisted_3$8 = ["textContent"];
+  const _hoisted_4$6 = ["textContent"];
+  var _sfc_main$w = vue.defineComponent({
     ...{
       name: "Choose",
       inheritAttrs: true
@@ -197,7 +197,7 @@
           }, null, 8, _hoisted_2$a)) : 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$w, {
+          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 0,
             type: "success",
             size: 12,
@@ -206,18 +206,18 @@
             key: 2,
             class: "item-text",
             textContent: vue.toDisplayString(node.item.text)
-          }, null, 8, _hoisted_3$7)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
+          }, null, 8, _hoisted_3$8)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 3,
             class: "item-des",
             textContent: vue.toDisplayString(node.item.description)
-          }, null, 8, _hoisted_4$5)) : vue.createCommentVNode("", true)], 14, _hoisted_1$h);
+          }, null, 8, _hoisted_4$6)) : vue.createCommentVNode("", true)], 14, _hoisted_1$h);
         }), 128))], 2);
       };
     }
   });
 
   const _hoisted_1$g = ["id"];
-  var _sfc_main$u = vue.defineComponent({
+  var _sfc_main$v = vue.defineComponent({
     __name: "datepicker",
     props: {
       type: {},
@@ -373,7 +373,7 @@
     }
   });
 
-  var _sfc_main$t = vue.defineComponent({
+  var _sfc_main$u = vue.defineComponent({
     ...{
       name: "Footer",
       inheritAttrs: true
@@ -404,13 +404,13 @@
           class: vue.normalizeClass(["snail-footer", {
             "start-divider": __props.divider
           }, __props.align || "right"])
-        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
           key: 0,
           size: "max",
           type: "default",
           onClick: _cache[0] || (_cache[0] = $event => emits("cancel")),
           textContent: vue.toDisplayString(__props.cancelName || "取消")
-        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
           key: 1,
           size: "max",
           type: "primary",
@@ -422,7 +422,7 @@
   });
 
   const _hoisted_1$f = ["textContent"];
-  var _sfc_main$s = vue.defineComponent({
+  var _sfc_main$t = vue.defineComponent({
     ...{
       name: "Header",
       inheritAttrs: true
@@ -461,7 +461,7 @@
           key: 0,
           textContent: vue.toDisplayString(__props.title),
           class: vue.normalizeClass(["header-title", __props.titleAlign])
-        }, null, 10, _hoisted_1$f)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, null, 10, _hoisted_1$f)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 1,
           type: "close",
           size: 22,
@@ -479,12 +479,12 @@
     class: "required",
     textContent: "*"
   };
-  const _hoisted_3$6 = {
+  const _hoisted_3$7 = {
     class: "input-body"
   };
-  const _hoisted_4$4 = ["type", "value", "readonly", "placeholder", "title"];
-  const _hoisted_5$2 = ["title"];
-  var _sfc_main$r = vue.defineComponent({
+  const _hoisted_4$5 = ["type", "value", "readonly", "placeholder", "title"];
+  const _hoisted_5$3 = ["title"];
+  var _sfc_main$s = vue.defineComponent({
     ...{
       name: "Input",
       inheritAttrs: true
@@ -536,7 +536,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$e), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$9)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$6, [vue.createElementVNode("input", {
+        }, null, 8, _hoisted_1$e), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$9)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$7, [vue.createElementVNode("input", {
           ref: "input-el",
           type: __props.type || "text",
           value: inputModel.value,
@@ -545,15 +545,15 @@
           title: inputModel.value,
           onChange: onValueChange,
           onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-        }, null, 40, _hoisted_4$4), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, null, 40, _hoisted_4$5), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: "validate",
           title: validateRef.value
-        }, [vue.createVNode(_sfc_main$w, {
+        }, [vue.createVNode(_sfc_main$x, {
           type: "error",
           size: 16,
           color: "red"
-        })], 8, _hoisted_5$2)) : vue.createCommentVNode("", true)])], 2);
+        })], 8, _hoisted_5$3)) : vue.createCommentVNode("", true)])], 2);
       };
     }
   });
@@ -763,15 +763,15 @@
     class: "number-prefix"
   };
   const _hoisted_2$8 = ["textContent"];
-  const _hoisted_3$5 = ["inputmode", "placeholder", "title"];
-  const _hoisted_4$3 = {
+  const _hoisted_3$6 = ["inputmode", "placeholder", "title"];
+  const _hoisted_4$4 = {
     key: 1,
     class: "number-suffix"
   };
-  const _hoisted_5$1 = ["textContent"];
-  const _hoisted_6 = ["title", "textContent"];
+  const _hoisted_5$2 = ["textContent"];
+  const _hoisted_6$1 = ["title", "textContent"];
   const _hoisted_7 = ["title", "textContent"];
-  var _sfc_main$q = vue.defineComponent({
+  var _sfc_main$r = vue.defineComponent({
     __name: "number",
     props: vue.mergeModels({
       placeholder: {},
@@ -933,18 +933,18 @@
           onFocus: _cache[1] || (_cache[1] = $event => vue.isRef(needBackSection) ? needBackSection.value = true : needBackSection = true),
           onPaste: _cache[2] || (_cache[2] = $event => vue.isRef(needBackSection) ? needBackSection.value = false : needBackSection = false),
           onBlur: _cache[3] || (_cache[3] = $event => formatOnEnd(true))
-        }, null, 40, _hoisted_3$5), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        }, null, 40, _hoisted_3$6), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
         }, [vue.createElementVNode("div", {
           class: "controls default subtract",
           onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$w, {
+        }, [vue.createVNode(_sfc_main$x, {
           type: "subtract",
           size: 20
         })]), vue.createElementVNode("div", {
           class: "controls default plus",
           onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$w, {
+        }, [vue.createVNode(_sfc_main$x, {
           type: "plus",
           size: 20
         })])], 64)) : vue.unref(controls) == "right" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -952,26 +952,26 @@
         }, [vue.createElementVNode("div", {
           class: "controls right plus",
           onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
-        }, [vue.createVNode(_sfc_main$w, {
+        }, [vue.createVNode(_sfc_main$x, {
           type: "arrow",
           size: 20,
           rotate: 270
         })]), vue.createElementVNode("div", {
           class: "controls right subtract",
           onClick: _cache[7] || (_cache[7] = $event => onStepClick(false))
-        }, [vue.createVNode(_sfc_main$w, {
+        }, [vue.createVNode(_sfc_main$x, {
           type: "arrow",
           size: 20,
           rotate: 90
-        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createElementVNode("span", {
+        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(suffix))
-        }, null, 8, _hoisted_5$1)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_5$2)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 2,
           class: "number-util ellipsis",
           title: upperTextRef.value,
           textContent: vue.toDisplayString(`大写：${upperTextRef.value || ""}`)
-        }, null, 8, _hoisted_6)) : vue.createCommentVNode("", true), vue.unref(thousands) == "below" ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_6$1)) : vue.createCommentVNode("", true), vue.unref(thousands) == "below" ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 3,
           class: "number-util ellipsis",
           title: thousandsTextRef.value,
@@ -983,7 +983,7 @@
 
   const _hoisted_1$c = ["placeholder", "readonly"];
   const searchIon = "M 860.16 824.32 l -163.84 -163.84 c 102.4 -120.32 97.28 -302.08 -17.92 -414.72 c -120.32 -120.32 -314.88 -120.32 -435.2 0 c -120.32 120.32 -120.32 314.88 0 435.2 c 112.64 112.64 294.4 120.32 414.72 17.92 l 163.84 163.84 c 10.24 10.24 25.6 10.24 35.84 0 c 12.8 -12.8 12.8 -28.16 2.56 -38.4 Z M 281.6 642.56 C 181.76 542.72 181.76 381.44 281.6 281.6 c 99.84 -99.84 261.12 -99.84 360.96 0 c 99.84 99.84 99.84 261.12 0 360.96 c -99.84 102.4 -261.12 102.4 -360.96 0 Z";
-  var _sfc_main$p = vue.defineComponent({
+  var _sfc_main$q = vue.defineComponent({
     ...{
       name: "Search",
       inheritAttrs: true
@@ -1030,7 +1030,7 @@
           onKeyup: _cache[1] || (_cache[1] = $event => onSearch($event))
         }, null, 40, _hoisted_1$c), [[vue.vModelText, textModel.value, void 0, {
           trim: true
-        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$w, {
+        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$x, {
           class: "search-button",
           type: "custom",
           draw: searchIon,
@@ -1255,7 +1255,7 @@
     class: "snail-confirm flex-column"
   };
   const _hoisted_2$7 = ["innerHTML"];
-  var _sfc_main$o = vue.defineComponent({
+  var _sfc_main$p = vue.defineComponent({
     ...{
       name: "ConfirmContainer",
       inheritAttrs: true
@@ -1283,14 +1283,14 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$s, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$t, {
           "use-to": "dialog",
           title: __props.title || "提示",
           onClose: _cache[0] || (_cache[0] = $event => __props.closePopup(false))
         }, null, 8, ["title"]), vue.createElementVNode("div", {
           class: "confirm-body",
           innerHTML: __props.message || "请确认？"
-        }, null, 8, _hoisted_2$7), vue.createVNode(_sfc_main$t, {
+        }, null, 8, _hoisted_2$7), vue.createVNode(_sfc_main$u, {
           align: "right",
           "cancel-name": __props.cancelName,
           "cancel-disabled": __props.cancelDisabled,
@@ -1303,7 +1303,7 @@
     }
   });
 
-  var _sfc_main$n = vue.defineComponent({
+  var _sfc_main$o = vue.defineComponent({
     ...{
       name: "Loading",
       inheritAttrs: true
@@ -1342,7 +1342,7 @@
     }
   });
 
-  var _sfc_main$m = vue.defineComponent({
+  var _sfc_main$n = vue.defineComponent({
     ...{
       name: "Dynamic",
       inheritAttrs: false
@@ -1366,7 +1366,7 @@
       const loadingComponent = vue.defineComponent({
         inheritAttrs: false,
         components: {
-          Loading: _sfc_main$n
+          Loading: _sfc_main$o
         },
         template: "<Loading :mask-disabled='true' />"
       });
@@ -1433,7 +1433,7 @@
     }
   });
 
-  var _sfc_main$l = vue.defineComponent({
+  var _sfc_main$m = vue.defineComponent({
     ...{
       name: "DialogContainer",
       inheritAttrs: true
@@ -1478,7 +1478,7 @@
           onClick: _cache[1] || (_cache[1] = vue.withModifiers($event => {
             __props.options.closeOnMask && vue.unref(closePopup)();
           }, ["self"]))
-        }, [vue.createVNode(_sfc_main$m, vue.mergeProps({
+        }, [vue.createVNode(_sfc_main$n, vue.mergeProps({
           class: "dialog-body",
           name: __props.options.name,
           component: __props.options.component,
@@ -1493,7 +1493,7 @@
     }
   });
 
-  var _sfc_main$k = vue.defineComponent({
+  var _sfc_main$l = vue.defineComponent({
     ...{
       name: "FollowContainer",
       inheritAttrs: true
@@ -1595,7 +1595,15 @@
             onEvent(window, "resize", () => __props.options.closeOnResize ? closePopup(void 0) : rootDom.value && buildFollow());
             onEvent(window, "keyup", evet => __props.options.closeOnEscape && evet.key === "Escape" && followExt.pinned.value != true && closePopup(void 0));
             onEvent(window, "click", event => {
-              __props.options.closeOnMask && followExt.pinned.value != true && rootDom.value != event.target && rootDom.value.contains(event.target) == false && closePopup(void 0);
+              if (__props.options.closeOnMask != true || followExt.pinned.value == true) {
+                return;
+              }
+              const isClickInContainer = rootDom.value === event.target || rootDom.value.contains(event.target);
+              const isClickInTarget = __props.extOptions.target == event.target || __props.extOptions.target.contains(event.target);
+              if (isClickInContainer || isClickInTarget && __props.options.closeOnTarget != true) {
+                return;
+              }
+              closePopup(void 0);
             });
             onMutation(rootDom.value, {
               childList: true,
@@ -1606,7 +1614,7 @@
         });
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
           class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1623,7 +1631,7 @@
     }
   });
 
-  var _sfc_main$j = vue.defineComponent({
+  var _sfc_main$k = vue.defineComponent({
     ...{
       name: "PopupContainer",
       inheritAttrs: true
@@ -1643,7 +1651,7 @@
         model = vue.shallowRef(void 0)
       } = __props.options;
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
           class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1666,7 +1674,7 @@
     class: "icon"
   };
   const _hoisted_2$6 = ["innerHTML"];
-  var _sfc_main$i = vue.defineComponent({
+  var _sfc_main$j = vue.defineComponent({
     ...{
       name: "ToastContainer",
       inheritAttrs: true
@@ -1704,7 +1712,7 @@
           }),
           onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
           onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 0,
           class: "close-icon",
           type: "close",
@@ -1715,7 +1723,7 @@
           onClick: _cache[2] || (_cache[2] = $event => {
             vue.unref(closePopup)();
           })
-        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_sfc_main$w, {
+        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_sfc_main$x, {
           type: vue.unref(props).type,
           fill: "#707070",
           size: 20
@@ -1729,7 +1737,7 @@
 
   function usePopup() {
     function popup(options) {
-      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$j, options);
+      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$k, options);
       return addScope2Scopes(scope);
     }
     function dialog(options) {
@@ -1762,7 +1770,7 @@
           },
           onBeforeClose: fn => hook.register("onBeforeClose", fn)
         });
-        const descriptor = openPopup(_sfc_main$l, options, extOptions);
+        const descriptor = openPopup(_sfc_main$m, options, extOptions);
         scope = snail_core.useAsyncScope(deferred.promise);
         monitorDialog(descriptor, scope, deferred);
       }
@@ -1780,14 +1788,14 @@
           inPopup: "follow",
           target
         };
-        scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$k, options, extOptions);
+        scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$l, options, extOptions);
       }
       return addScope2Scopes(scope);
     }
     function confirm(title, message, options) {
       options = options || Object.create(null);
       return dialog({
-        component: _sfc_main$o,
+        component: _sfc_main$p,
         closeOnEscape: true,
         props: {
           ...options,
@@ -1797,7 +1805,7 @@
       });
     }
     function toast(type, message, options) {
-      return popupInCustomContainer(_sfc_main$i, {
+      return popupInCustomContainer(_sfc_main$j, {
         url: "#ToastContainer",
         props: {
           ...(options || Object.create(null)),
@@ -1830,7 +1838,7 @@
         },
         ...extOptions
       });
-      const descriptor = openPopup(container || _sfc_main$j, options, extOptions);
+      const descriptor = openPopup(container || _sfc_main$k, options, extOptions);
       const scope = snail_core.useAsyncScope(deferred.promise);
       scope.onDestroy(() => destroyPopup(descriptor, deferred));
       return scope;
@@ -1972,8 +1980,8 @@
     class: "snail-empty"
   };
   const _hoisted_2$5 = ["src"];
-  const _hoisted_3$4 = ["textContent"];
-  var _sfc_main$h = vue.defineComponent({
+  const _hoisted_3$5 = ["textContent"];
+  var _sfc_main$i = vue.defineComponent({
     ...{
       name: "Empty",
       inheritAttrs: true
@@ -1991,18 +1999,18 @@
         }, null, 8, _hoisted_2$5), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
           textContent: vue.toDisplayString(__props.message || "无数据")
-        }, null, 8, _hoisted_3$4)])]);
+        }, null, 8, _hoisted_3$5)])]);
       };
     }
   });
 
   const _hoisted_1$8 = ["title"];
   const _hoisted_2$4 = ["textContent"];
-  const _hoisted_3$3 = {
+  const _hoisted_3$4 = {
     key: 1,
     class: "select-status"
   };
-  var _sfc_main$g = vue.defineComponent({
+  var _sfc_main$h = vue.defineComponent({
     ...{
       name: "SelectNode",
       inheritAttrs: true
@@ -2047,11 +2055,11 @@
         }, [vue.createElementVNode("div", {
           class: "item-text ellipsis",
           textContent: vue.toDisplayString(__props.item.text)
-        }, null, 8, _hoisted_2$4), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, null, 8, _hoisted_2$4), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 0,
           type: "arrow",
           color: "#8a9099"
-        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$w, {
+        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [vue.createVNode(_sfc_main$x, {
           type: "success",
           color: "white",
           size: 12
@@ -2072,7 +2080,7 @@
     }
   });
 
-  var _sfc_main$f = vue.defineComponent({
+  var _sfc_main$g = vue.defineComponent({
     ...{
       name: "Select2Popup",
       inheritAttrs: true
@@ -2244,13 +2252,13 @@
           key: 0
         }, [vue.createTextVNode(" 暂无选项 ")], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 1
-        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
+        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch,
           key: "select-search"
         }), null, 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(itemsRef.value, item => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$h, {
             key: vue.unref(context).getKey(item),
             multiple: __props.multiple,
             item,
@@ -2259,7 +2267,7 @@
             onEnter: onEnterSelectNode,
             onClick: onClickSelectNode
           }, null, 8, ["multiple", "item", "context"]);
-        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
           key: 1,
           message: "无结果"
         })) : vue.createCommentVNode("", true), showClearButtonRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -2276,15 +2284,15 @@
     class: "select-result"
   };
   const _hoisted_2$3 = ["title", "textContent"];
-  const _hoisted_3$2 = ["textContent"];
-  const _hoisted_4$2 = {
+  const _hoisted_3$3 = ["textContent"];
+  const _hoisted_4$3 = {
     key: 1,
     class: "placeholder"
   };
   onAppCreated((app, type) => {
-    type == "popup" && app.component("SelectPopup", _sfc_main$f);
+    type == "popup" && app.component("SelectPopup", _sfc_main$g);
   });
-  var _sfc_main$e = vue.defineComponent({
+  var _sfc_main$f = vue.defineComponent({
     ...{
       name: "Select",
       inheritAttrs: true
@@ -2424,7 +2432,7 @@
           key: 1,
           class: "placeholder",
           textContent: vue.toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-        }, null, 8, _hoisted_3$2)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, null, 8, _hoisted_3$3)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 2,
           type: "arrow",
           size: 24,
@@ -2432,12 +2440,12 @@
           style: {
             "transform": "rotate(90deg)"
           }
-        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, "暂无可选项"))], 2);
+        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, "暂无可选项"))], 2);
       };
     }
   });
 
-  var _sfc_main$d = vue.defineComponent({
+  var _sfc_main$e = vue.defineComponent({
     ...{
       name: "Switch",
       inheritAttrs: true
@@ -2487,7 +2495,7 @@
   });
 
   const _hoisted_1$6 = ["readonly", "placeholder", "rows"];
-  var _sfc_main$c = vue.defineComponent({
+  var _sfc_main$d = vue.defineComponent({
     ...{
       name: "Textarea"
     },
@@ -2556,16 +2564,16 @@
     class: "fold-header"
   };
   const _hoisted_2$2 = ["textContent"];
-  const _hoisted_3$1 = ["textContent"];
-  const _hoisted_4$1 = {
+  const _hoisted_3$2 = ["textContent"];
+  const _hoisted_4$2 = {
     key: 1,
     class: "status"
   };
-  const _hoisted_5 = {
+  const _hoisted_5$1 = {
     class: "fold-body",
     ref: "foldBody"
   };
-  var _sfc_main$b = vue.defineComponent({
+  var _sfc_main$c = vue.defineComponent({
     ...{
       name: "Fold",
       inheritAttrs: true
@@ -2642,16 +2650,16 @@
           key: 0,
           class: "subtitle ellipsis",
           textContent: vue.toDisplayString(__props.subtitle)
-        }, null, 8, _hoisted_3$1)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.createVNode(_sfc_main$w, {
+        }, null, 8, _hoisted_3$2)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.createVNode(_sfc_main$x, {
           type: "arrow",
           title: statusModel.value == "expand" ? "收起" : "展开",
           onClick: onStatusClick
-        }, null, 8, ["title"])])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
+        }, null, 8, ["title"])])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_5$1, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
       };
     }
   });
 
-  var _sfc_main$a = vue.defineComponent({
+  var _sfc_main$b = vue.defineComponent({
     ...{
       name: "Scroll",
       inheritAttrs: true
@@ -2663,7 +2671,8 @@
       },
       scrollY: {
         type: Boolean
-      }
+      },
+      barSize: {}
     },
     emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
     setup(__props, _ref) {
@@ -2680,10 +2689,27 @@
       const {
         onInterval
       } = snail_core.useTimer();
-      const classRef = vue.computed(() => ({
-        "scroll-x": props.scrollX == true,
-        "scroll-y": props.scrollY == true
-      }));
+      const styleRef = vue.computed(() => {
+        const style = Object.create(null);
+        (props.scrollX || props.scrollY) && (style["--scroll-overflow"] = `${props.scrollX == true ? "auto" : "hidden"} ${props.scrollY == true ? "auto" : "hidden"}`);
+        if (props.barSize) {
+          switch (props.barSize) {
+            case "normal":
+              style["--scroll-bar-size"] = "10px";
+              break;
+            case "small":
+              style["--scroll-bar-size"] = "6px";
+              break;
+            case "mini":
+              style["--scroll-bar-size"] = "4px";
+              break;
+            case "none":
+              style["--scroll-bar-size"] = "0";
+              break;
+          }
+        }
+        return style;
+      });
       var preStatus = void 0;
       __expose({
         scroll,
@@ -2739,15 +2765,9 @@
         events.top && emits("top");
         events.bottom && emits("bottom");
         if (rootDom.value) {
-          rootDom.value.classList.remove("x-bar", "y-bar", "left", "right", "top", "bottom");
-          const classes = [];
-          status.xbar && classes.push("x-bar");
-          status.ybar && classes.push("y-bar");
-          status.left && classes.push("left");
-          status.right && classes.push("right");
-          status.top && classes.push("top");
-          status.bottom && classes.push("bottom");
-          classes.length && rootDom.value.classList.add(...classes);
+          rootDom.value.classList.remove("x-bar", "y-bar");
+          status.xbar && rootDom.value.classList.add("x-bar");
+          status.ybar && rootDom.value.classList.add("y-bar");
         }
       }
       vue.onMounted(() => {
@@ -2760,43 +2780,101 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["snail-scroll", classRef.value]),
+          class: "snail-scroll",
           ref: "scroll-root",
+          style: vue.normalizeStyle(styleRef.value),
           onScroll: refreshScrollInfo
-        }, [vue.renderSlot(_ctx.$slots, "default")], 34);
+        }, [vue.renderSlot(_ctx.$slots, "default")], 36);
       };
     }
   });
 
-  const _hoisted_1$4 = {
-    key: 0,
-    class: "layout-start"
-  };
-  const _hoisted_2$1 = {
-    key: 1,
-    class: "layout-end"
-  };
-  var _sfc_main$9 = vue.defineComponent({
+  var _sfc_main$a = vue.defineComponent({
     __name: "layout",
     props: {
       mode: {},
-      scroll: {}
+      default: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {}
     },
     setup(__props) {
+      const props = __props;
+      const areaMap = vue.computed(() => {
+        const map = Object.create(null);
+        map.default = {
+          scrollable: props.default && props.default.scroll != void 0,
+          class: "main-area",
+          style: void 0
+        };
+        if (props.mode == "vertical") {
+          map.top = {
+            scrollable: props.top && props.top.scroll != void 0,
+            class: "top-area",
+            style: buildHeightStyle(props.top)
+          };
+          map.bottom = {
+            scrollable: props.bottom && props.bottom.scroll != void 0,
+            class: "bottom-area",
+            style: buildHeightStyle(props.bottom)
+          };
+        } else {
+          map.left = {
+            scrollable: props.left && props.left.scroll != void 0,
+            class: "left-area",
+            style: buildWidthStyle(props.left)
+          };
+          map.right = {
+            scrollable: props.right && props.right.scroll != void 0,
+            class: "right-area",
+            style: buildWidthStyle(props.right)
+          };
+        }
+        return map;
+      });
+      function buildWidthStyle(style) {
+        return style ? snail_view.css.buildStyle({
+          minWidth: style.minWidth,
+          width: style.width,
+          maxWidth: style.maxWidth
+        }) : void 0;
+      }
+      function buildHeightStyle(style) {
+        return style ? snail_view.css.buildStyle({
+          minHeight: style.minHeight,
+          height: style.height,
+          maxHeight: style.maxHeight
+        }) : void 0;
+      }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-layout", __props.mode])
-        }, [_ctx.$slots.start ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "start")])) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$a, vue.mergeProps({
-          class: "layout-body"
-        }, __props.scroll), {
-          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 16), _ctx.$slots.end ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [vue.renderSlot(_ctx.$slots, "end")])) : vue.createCommentVNode("", true)], 2);
+        }, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["top", "left", "default", "right", "bottom"], item => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: item
+          }, [areaMap.value[item] && _ctx.$slots[item] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 0
+          }, [areaMap.value[item].scrollable ? (vue.openBlock(), vue.createBlock(_sfc_main$b, vue.mergeProps({
+            key: 0,
+            class: areaMap.value[item].class,
+            style: areaMap.value[item].style
+          }, {
+            ref_for: true
+          }, props[item].scroll), {
+            default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, item)]),
+            _: 2
+          }, 1040, ["class", "style"])) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: vue.normalizeClass(areaMap.value[item].class),
+            style: vue.normalizeStyle(areaMap.value[item].style)
+          }, [vue.renderSlot(_ctx.$slots, item)], 6))], 64)) : vue.createCommentVNode("", true)], 64);
+        }), 64))], 2);
       };
     }
   });
 
-  var _sfc_main$8 = vue.defineComponent({
+  var _sfc_main$9 = vue.defineComponent({
     ...{
       name: "Sort",
       inheritAttrs: true
@@ -2897,10 +2975,10 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     class: "table-body"
   };
-  var _sfc_main$7 = vue.defineComponent({
+  var _sfc_main$8 = vue.defineComponent({
     ...{
       name: "Table",
       inheritAttrs: true
@@ -2913,6 +2991,7 @@
       scrollY: {
         type: Boolean
       },
+      barSize: {},
       border: {
         type: Boolean
       },
@@ -2924,7 +3003,7 @@
       const hStyleRef = vue.computed(() => snail_view.css.buildStyle(props.headerStyle));
       const fStyleRef = vue.computed(() => snail_view.css.buildStyle(props.footerStyle));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
           class: vue.normalizeClass(["snail-table", {
             "start-border": __props.border == true
           }]),
@@ -2934,7 +3013,7 @@
           default: vue.withCtx(() => [vue.createElementVNode("div", {
             class: "table-header",
             style: vue.normalizeStyle(hStyleRef.value)
-          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$3, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
+          }, [vue.renderSlot(_ctx.$slots, "header")], 4), vue.createElementVNode("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", {
             class: "table-footer",
             style: vue.normalizeStyle(fStyleRef.value)
           }, [vue.renderSlot(_ctx.$slots, "footer")], 4)]),
@@ -2944,7 +3023,7 @@
     }
   });
 
-  var _sfc_main$6 = vue.defineComponent({
+  var _sfc_main$7 = vue.defineComponent({
     ...{
       name: "TableRow",
       inheritAttrs: true
@@ -2967,7 +3046,7 @@
     }
   });
 
-  var _sfc_main$5 = vue.defineComponent({
+  var _sfc_main$6 = vue.defineComponent({
     ...{
       name: "TableCol",
       inheritAttrs: true
@@ -3013,14 +3092,15 @@
     }
   });
 
-  var _sfc_main$4 = vue.defineComponent({
+  var _sfc_main$5 = vue.defineComponent({
     __name: "transitions",
     props: {
-      customClass: {},
-      effect: {},
       group: {
         type: Boolean
-      }
+      },
+      duration: {},
+      customClass: {},
+      effect: {}
     },
     setup(__props) {
       const props = __props;
@@ -3031,11 +3111,13 @@
         } else {
           array.push(props.effect || "fade");
         }
+        console.log(array);
         return array.join(" ");
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.group ? vue.TransitionGroup : vue.Transition), vue.mergeProps(_ctx.$attrs, {
           appear: "",
+          duration: __props.duration,
           "enter-active-class": `${classNames.value} enter-active`,
           "enter-from-class": `${classNames.value} enter-from`,
           "enter-to-class": `${classNames.value} enter-to`,
@@ -3045,25 +3127,25 @@
         }), {
           default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
           _: 3
-        }, 16, ["enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
+        }, 16, ["duration", "enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
       };
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$3 = {
     key: 0,
     class: "node-fold"
   };
-  const _hoisted_2 = ["title", "textContent"];
-  const _hoisted_3 = {
+  const _hoisted_2$1 = ["title", "textContent"];
+  const _hoisted_3$1 = {
     class: "node-slot ellipsis"
   };
-  const _hoisted_4 = {
+  const _hoisted_4$1 = {
     key: 1,
     class: "snail-tree-children hidden",
     ref: "children"
   };
-  var _sfc_main$3 = vue.defineComponent({
+  var _sfc_main$4 = vue.defineComponent({
     ...{
       name: "TreeNode",
       inheritAttrs: true
@@ -3181,7 +3263,7 @@
           key: 1
         }, [_cache[4] || (_cache[4] = vue.createElementVNode("div", {
           class: "indent"
-        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 0,
           class: vue.normalizeClass(statusRef.value),
           type: "custom",
@@ -3193,7 +3275,7 @@
           class: "node-text ellipsis",
           title: __props.node.text,
           textContent: vue.toDisplayString(__props.node.text)
-        }, null, 8, _hoisted_2), vue.createElementVNode("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34)) : vue.createCommentVNode("", true), showRef.value && showChildrenRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.node.children, child => {
+        }, null, 8, _hoisted_2$1), vue.createElementVNode("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))))])], 64))], 34)) : vue.createCommentVNode("", true), showRef.value && showChildrenRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [(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,
@@ -3213,10 +3295,10 @@
     }
   });
 
-  const _hoisted_1$1 = {
+  const _hoisted_1$2 = {
     class: "snail-tree"
   };
-  var _sfc_main$2 = vue.defineComponent({
+  var _sfc_main$3 = vue.defineComponent({
     ...{
       name: "Tree",
       inheritAttrs: true
@@ -3250,15 +3332,15 @@
         emits("click", node, parents);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$q, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$a, {
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$b, {
           "scroll-y": true
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.nodes || [], node => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$3, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$4, {
               key: vue.unref(context).getKey(node),
               node,
               parent: void 0,
@@ -3279,7 +3361,7 @@
     }
   });
 
-  var _sfc_main$1 = vue.defineComponent({
+  var _sfc_main$2 = vue.defineComponent({
     __name: "wrapper",
     props: {
       readonly: {
@@ -3301,14 +3383,14 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-wrapper", __props.inPopup ? "in-popup" : "in-normal"])
-        }, [__props.header && __props.header.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$s, vue.mergeProps({
+        }, [__props.header && __props.header.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
           key: 0
         }, __props.header || {
           useTo: "dialog",
           title: "对话框"
         }, {
           onClose: _cache[0] || (_cache[0] = $event => emits("cancel"))
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$a, vue.mergeProps({
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$b, vue.mergeProps({
           class: "wrapper-body"
         }, __props.content || {
           scrollX: false,
@@ -3316,7 +3398,7 @@
         }), {
           default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
           _: 3
-        }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
+        }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$u, vue.mergeProps({
           key: 1
         }, __props.footer || {}, {
           onCancel: _cache[1] || (_cache[1] = $event => emits("cancel")),
@@ -3330,7 +3412,7 @@
     snail_core.mustObject(options, "options");
     target instanceof HTMLElement || snail_core.throwError("target must be a HTMLElement");
     target.classList.add("snail-app");
-    const app = vue.createApp(_sfc_main$m, options);
+    const app = vue.createApp(_sfc_main$n, options);
     triggerAppCreated(app);
     app.mount(target);
     const scope = snail_core.useScope().onDestroy(() => app.unmount());
@@ -3338,6 +3420,252 @@
     return scope;
   }
 
+  const _hoisted_1$1 = {
+    class: "tz-item",
+    ref: "hour-items"
+  };
+  const _hoisted_2 = ["textContent", "onClick"];
+  const _hoisted_3 = {
+    class: "tz-item",
+    ref: "minute-items"
+  };
+  const _hoisted_4 = ["textContent", "onClick"];
+  const _hoisted_5 = {
+    key: 0,
+    class: "tz-item",
+    ref: "second-items"
+  };
+  const _hoisted_6 = ["textContent", "onClick"];
+  var _sfc_main$1 = vue.defineComponent({
+    __name: "time-pc",
+    props: {
+      value: {},
+      initialDisabled: {
+        type: Boolean
+      },
+      nowDisabled: {
+        type: Boolean
+      },
+      manager: {},
+      format: {},
+      min: {},
+      max: {},
+      inPopup: {},
+      closePopup: {
+        type: Function
+      },
+      popupStatus: {},
+      target: {},
+      followX: {},
+      followY: {},
+      pinned: {}
+    },
+    emits: ["clear", "confirm"],
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
+      const props = __props;
+      const emits = __emit;
+      const tm = props.manager || snail_core.useTime({
+        format: props.format == "HH:mm" ? "HH:mm" : "HH:mm:ss",
+        min: snail_core.parseTime(props.min),
+        max: snail_core.parseTime(props.max)
+      });
+      const {
+        toast
+      } = usePopup();
+      const {
+        inPopup,
+        closePopup
+      } = props;
+      const secondDisabled = tm.format == "HH:mm";
+      const tvRef = vue.ref();
+      const hItemsDom = vue.useTemplateRef("hour-items");
+      const mItemsDom = vue.useTemplateRef("minute-items");
+      const sItemsDom = vue.useTemplateRef("second-items");
+      function getTimeClass(type, value) {
+        switch (type) {
+          case "hour":
+            return {
+              active: tvRef.value.hour == value,
+              disabled: tm.validateHH(value) == false
+            };
+          case "minute":
+            return {
+              active: tvRef.value.minute == value,
+              disabled: tm.validateHHmm(tvRef.value.hour, value) == false
+            };
+          case "second":
+            return {
+              active: tvRef.value.second == value,
+              disabled: tm.validateHHmmss(tvRef.value.hour, tvRef.value.minute, value) == false
+            };
+        }
+      }
+      function scrollIntoView(items) {
+        let activeIndex = void 0,
+          firstValidIndex;
+        for (var index = 0; index < (items ? items.children.length : 0); index++) {
+          const ele = items.children[index];
+          if (ele.classList.contains("disabled") == true) {
+            continue;
+          }
+          if (firstValidIndex == void 0) {
+            firstValidIndex = index;
+          }
+          if (ele.classList.contains("active") == true) {
+            activeIndex = index;
+            break;
+          }
+        }
+        let showIndex = activeIndex;
+        if (activeIndex == void 0) {
+          if (firstValidIndex != void 0) {
+            showIndex = firstValidIndex;
+          }
+        }
+        showIndex != void 0 && items.children[showIndex].scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+      async function onTimeClick(type, value) {
+        switch (type) {
+          case "hour":
+            if (tm.validateHH(value)) {
+              tvRef.value.hour = value;
+              await vue.nextTick();
+              scrollIntoView(mItemsDom.value);
+            }
+            break;
+          case "minute":
+            if (tm.validateHHmm(tvRef.value.hour, value)) {
+              tvRef.value.minute = value;
+              await vue.nextTick();
+              scrollIntoView(sItemsDom.value);
+            }
+            break;
+          case "second":
+            if (tm.validateHHmmss(tvRef.value.hour, tvRef.value.minute, value)) {
+              tvRef.value.second = value;
+            }
+            break;
+        }
+      }
+      async function onNow() {
+        tvRef.value = snail_core.getTimeNow();
+        if (tm.validate(tvRef.value)) {
+          await vue.nextTick();
+          scrollIntoView(hItemsDom.value);
+          scrollIntoView(mItemsDom.value);
+          scrollIntoView(sItemsDom.value);
+        }
+      }
+      function onConfirm() {
+        tvRef.value = tm.correct(tvRef.value) || Object.create(null);
+        if (tvRef.value == void 0 || tvRef.value.hour == void 0) {
+          return toast("error", "请选选择时间");
+        }
+        if (secondDisabled != true && tvRef.value.minute == void 0) {
+          return toast("error", "请选选择时间");
+        }
+        const value = tm.toString(tvRef.value);
+        emits("confirm", value);
+        inPopup && closePopup(value);
+      }
+      {
+        props.value && (tvRef.value = tm.parse(props.value));
+        tvRef.value || props.initialDisabled || (tvRef.value = tm.correct(snail_core.getTimeNow()));
+        tvRef.value || (tvRef.value = Object.create(null));
+      }
+      vue.onMounted(async () => {
+        await vue.nextTick();
+        scrollIntoView(hItemsDom.value);
+        scrollIntoView(mItemsDom.value);
+        scrollIntoView(sItemsDom.value);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+          class: vue.normalizeClass(["snail-time-picker pc", {
+            "second-disabled": secondDisabled
+          }]),
+          mode: "vertical"
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(_sfc_main$5, {
+            group: true,
+            effect: "down-up"
+          }, {
+            default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(24).fill(void 0), (_, index) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["tzi-number", getTimeClass("hour", index)]),
+                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
+                onClick: $event => onTimeClick("hour", index)
+              }, null, 10, _hoisted_2);
+            }), 256))], 512), vue.createElementVNode("div", _hoisted_3, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(60).fill(void 0), (_, index) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["tzi-number", getTimeClass("minute", index)]),
+                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
+                onClick: $event => onTimeClick("minute", index)
+              }, null, 10, _hoisted_4);
+            }), 256))], 512), secondDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array(60).fill(void 0), (_, index) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["tzi-number", getTimeClass("second", index)]),
+                textContent: vue.toDisplayString(String(index).padStart(2, "0")),
+                onClick: $event => onTimeClick("second", index)
+              }, null, 10, _hoisted_6);
+            }), 256))], 512)) : vue.createCommentVNode("", true)]),
+            bottom: vue.withCtx(() => [vue.createVNode(_sfc_main$y, {
+              type: "link",
+              size: "small",
+              textContent: "清空",
+              onClick: _cache[0] || (_cache[0] = $event => (emits("clear"), vue.unref(inPopup) && vue.unref(closePopup)("")))
+            }), vue.unref(tm).validate(vue.unref(snail_core.getTimeNow)()) ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+              key: 0,
+              type: "link",
+              size: "small",
+              textContent: "现在",
+              onClick: onNow
+            })) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$y, {
+              type: "link",
+              size: "small",
+              textContent: "确定",
+              onClick: onConfirm
+            })]),
+            _: 1
+          })]),
+          _: 1
+        }, 8, ["class"]);
+      };
+    }
+  });
+
+  function usePicker() {
+    const popup = usePopup();
+    function showTime(target, options) {
+      options = {
+        ...options
+      };
+      delete options["manager"];
+      return popup.follow(target, {
+        component: _sfc_main$1,
+        followX: ["center"],
+        spaceClient: 10,
+        spaceY: 2,
+        spaceX: 2,
+        closeOnMask: true,
+        props: options
+      });
+    }
+    {
+      const manager = Object.freeze(snail_core.mountScope({
+        showTime
+      }, "IPickerManager"));
+      manager.onDestroy(popup.destroy);
+      return manager;
+    }
+  }
+
   const _hoisted_1 = ["textContent"];
   var _sfc_main = vue.defineComponent({
     ...{
@@ -3423,12 +3751,12 @@
           onTouchstart: onStartDrag,
           onTouchmove: onDragMove,
           onTouchend: onDragEnd
-        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 0,
           type: "success",
           size: 20,
           color: "white"
-        })) : (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+        })) : (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 1,
           type: "custom",
           size: 20,
@@ -3440,32 +3768,32 @@
   });
 
   const components = {
-    Button: _sfc_main$x,
-    Choose: _sfc_main$v,
-    DatePicker: _sfc_main$u,
-    Footer: _sfc_main$t,
-    Header: _sfc_main$s,
-    Icon: _sfc_main$w,
-    Input: _sfc_main$r,
-    Number: _sfc_main$q,
-    Search: _sfc_main$p,
-    Select: _sfc_main$e,
-    Switch: _sfc_main$d,
-    Textarea: _sfc_main$c,
-    Dynamic: _sfc_main$m,
-    Fold: _sfc_main$b,
-    Layout: _sfc_main$9,
-    Scroll: _sfc_main$a,
-    Sort: _sfc_main$8,
-    Table: _sfc_main$7,
-    TableRow: _sfc_main$6,
-    TableCol: _sfc_main$5,
-    Transitions: _sfc_main$4,
-    Tree: _sfc_main$2,
-    Wrapper: _sfc_main$1,
+    Button: _sfc_main$y,
+    Choose: _sfc_main$w,
+    DatePicker: _sfc_main$v,
+    Footer: _sfc_main$u,
+    Header: _sfc_main$t,
+    Icon: _sfc_main$x,
+    Input: _sfc_main$s,
+    Number: _sfc_main$r,
+    Search: _sfc_main$q,
+    Select: _sfc_main$f,
+    Switch: _sfc_main$e,
+    Textarea: _sfc_main$d,
+    Dynamic: _sfc_main$n,
+    Fold: _sfc_main$c,
+    Layout: _sfc_main$a,
+    Scroll: _sfc_main$b,
+    Sort: _sfc_main$9,
+    Table: _sfc_main$8,
+    TableRow: _sfc_main$7,
+    TableCol: _sfc_main$6,
+    Transitions: _sfc_main$5,
+    Tree: _sfc_main$3,
+    Wrapper: _sfc_main$2,
     DragVerify: _sfc_main,
-    Empty: _sfc_main$h,
-    Loading: _sfc_main$n
+    Empty: _sfc_main$i,
+    Loading: _sfc_main$o
   };
 
   snail_core.onMountScope(scope => {
@@ -3477,6 +3805,7 @@
   exports.mount = mount;
   exports.onAppCreated = onAppCreated;
   exports.triggerAppCreated = triggerAppCreated;
+  exports.usePicker = usePicker;
   exports.usePopup = usePopup;
   exports.useReactive = useReactive;
   exports.useTreeContext = useTreeContext;