snail.vue 2.0.5 → 2.0.7

package/dist/snail.vue.umd.js

@@ -5,8 +5,8 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailView));
 })(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
 
-  const _hoisted_1$h = ["title"];
-  var _sfc_main$u = vue.defineComponent({
+  const _hoisted_1$j = ["title"];
+  var _sfc_main$x = vue.defineComponent({
     ...{
       name: "Button",
       inheritAttrs: true
@@ -22,7 +22,7 @@
         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$h);
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode("按钮", -1))])], 10, _hoisted_1$j);
       };
     }
   });
@@ -69,10 +69,10 @@
     }
   }
 
-  const _hoisted_1$g = ["width", "height"];
-  const _hoisted_2$a = ["textContent"];
-  const _hoisted_3$7 = ["fill", "stroke", "stroke-width", "d"];
-  var _sfc_main$t = vue.defineComponent({
+  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({
     ...{
       name: "Icon",
       inheritAttrs: true
@@ -102,23 +102,23 @@
           onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
         }, [vue.createElementVNode("title", {
           textContent: vue.toDisplayString(__props.title || "")
-        }, null, 8, _hoisted_2$a), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(getSvgDraw)(__props.type, __props.draw), draw => {
+        }, null, 8, _hoisted_2$b), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(getSvgDraw)(__props.type, __props.draw), draw => {
           return vue.openBlock(), vue.createElementBlock("path", {
             fill: isMouseEnterRef.value ? __props.hoverColor || __props.color : __props.color,
             stroke: __props.stroke,
             "stroke-width": __props.strokeWidth,
             d: draw
-          }, null, 8, _hoisted_3$7);
-        }), 256))], 46, _hoisted_1$g);
+          }, null, 8, _hoisted_3$8);
+        }), 256))], 46, _hoisted_1$i);
       };
     }
   });
 
-  const _hoisted_1$f = ["title", "onClick"];
-  const _hoisted_2$9 = ["type", "checked"];
-  const _hoisted_3$6 = ["textContent"];
-  const _hoisted_4$4 = ["textContent"];
-  var _sfc_main$s = vue.defineComponent({
+  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({
     ...{
       name: "Choose",
       inheritAttrs: true
@@ -172,7 +172,11 @@
           const newSelected = type == "checkbox" && props.items.length == 1 ? !node.selected : true;
           chooseItemsRef.value.forEach(item => item.selected = false);
           node.selected = newSelected;
-          valuesModel.value = newSelected ? node.item.value : void 0;
+          const newValue = newSelected ? node.item.value : void 0;
+          if (valuesModel.value == newValue) {
+            return;
+          }
+          valuesModel.value = newValue;
         }
         vue.nextTick(() => emits("change", valuesModel.value));
       }
@@ -190,10 +194,10 @@
             key: 0,
             type: vue.unref(type),
             checked: node.selected
-          }, null, 8, _hoisted_2$9)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, 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$t, {
+          }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
             key: 0,
             type: "success",
             size: 12,
@@ -202,18 +206,18 @@
             key: 2,
             class: "item-text",
             textContent: vue.toDisplayString(node.item.text)
-          }, null, 8, _hoisted_3$6)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
+          }, null, 8, _hoisted_3$7)) : 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$4)) : vue.createCommentVNode("", true)], 14, _hoisted_1$f);
+          }, null, 8, _hoisted_4$5)) : vue.createCommentVNode("", true)], 14, _hoisted_1$h);
         }), 128))], 2);
       };
     }
   });
 
-  const _hoisted_1$e = ["id"];
-  var _sfc_main$r = vue.defineComponent({
+  const _hoisted_1$g = ["id"];
+  var _sfc_main$u = vue.defineComponent({
     __name: "datepicker",
     props: {
       type: {},
@@ -364,12 +368,12 @@
           class: "snail-datepicker",
           id: vue.unref(id),
           onClick
-        }, null, 8, _hoisted_1$e);
+        }, null, 8, _hoisted_1$g);
       };
     }
   });
 
-  var _sfc_main$q = vue.defineComponent({
+  var _sfc_main$t = vue.defineComponent({
     ...{
       name: "Footer",
       inheritAttrs: true
@@ -400,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$u, {
+        }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [__props.cancelDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           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$u, {
+        }, null, 8, ["textContent"])) : vue.createCommentVNode("", true), __props.confirmDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
           key: 1,
           size: "max",
           type: "primary",
@@ -417,8 +421,8 @@
     }
   });
 
-  const _hoisted_1$d = ["textContent"];
-  var _sfc_main$p = vue.defineComponent({
+  const _hoisted_1$f = ["textContent"];
+  var _sfc_main$s = vue.defineComponent({
     ...{
       name: "Header",
       inheritAttrs: true
@@ -457,7 +461,7 @@
           key: 0,
           textContent: vue.toDisplayString(__props.title),
           class: vue.normalizeClass(["header-title", __props.titleAlign])
-        }, null, 10, _hoisted_1$d)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
+        }, null, 10, _hoisted_1$f)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), __props.closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 1,
           type: "close",
           size: 22,
@@ -469,18 +473,18 @@
     }
   });
 
-  const _hoisted_1$c = ["textContent"];
-  const _hoisted_2$8 = {
+  const _hoisted_1$e = ["textContent"];
+  const _hoisted_2$9 = {
     key: 0,
     class: "required",
     textContent: "*"
   };
-  const _hoisted_3$5 = {
+  const _hoisted_3$6 = {
     class: "input-body"
   };
-  const _hoisted_4$3 = ["type", "value", "readonly", "placeholder", "title"];
-  const _hoisted_5$1 = ["title"];
-  var _sfc_main$o = vue.defineComponent({
+  const _hoisted_4$4 = ["type", "value", "readonly", "placeholder", "title"];
+  const _hoisted_5$2 = ["title"];
+  var _sfc_main$r = vue.defineComponent({
     ...{
       name: "Input",
       inheritAttrs: true
@@ -532,7 +536,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$c), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$8)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$5, [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$6, [vue.createElementVNode("input", {
           ref: "input-el",
           type: __props.type || "text",
           value: inputModel.value,
@@ -541,22 +545,445 @@
           title: inputModel.value,
           onChange: onValueChange,
           onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-        }, null, 40, _hoisted_4$3), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, null, 40, _hoisted_4$4), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: "validate",
           title: validateRef.value
-        }, [vue.createVNode(_sfc_main$t, {
+        }, [vue.createVNode(_sfc_main$w, {
           type: "error",
           size: 16,
           color: "red"
-        })], 8, _hoisted_5$1)) : vue.createCommentVNode("", true)])], 2);
+        })], 8, _hoisted_5$2)) : vue.createCommentVNode("", true)])], 2);
       };
     }
   });
 
-  const _hoisted_1$b = ["placeholder", "readonly"];
+  function useReactive() {
+    function transition(rv, effect, time) {
+      snail_core.throwIfFalse(snail_core.isObject(effect), "transition: effect must be an object.");
+      const scope = scopes.get();
+      rv.value = effect.from;
+      const endId = setTimeout(scope.destroy, time);
+      return scope.onDestroy(function () {
+        rv.value = effect.to;
+        clearTimeout(endId);
+      });
+    }
+    function load(task, status, delay) {
+      snail_core.throwIfFalse(snail_core.isPromise(task), "task: task must be a Promise.");
+      status.value = true;
+      task.finally(function () {
+        delay > 0 ? setTimeout(() => status.value = false, delay) : status.value = false;
+      });
+      return snail_core.wait(task);
+    }
+    function watcher(source, callback, deep) {
+      const {
+        stop
+      } = vue.watch(source, callback, {
+        deep
+      });
+      return scopes.get().onDestroy(stop);
+    }
+    const manager = snail_core.mountScope({
+      transition,
+      load,
+      watcher
+    }, "IReactiveManager");
+    const scopes = snail_core.useScopes();
+    manager.onDestroy(scopes.destroy);
+    return Object.freeze(manager);
+  }
+
+  function useFormatter(options) {
+    const multiplier = options.formatMultiplier > 1 ? Math.trunc(Math.log10(options.formatMultiplier)) : 0;
+    const step = options.step > 1 ? parseInt(String(options.step)) : 1;
+    const clamp = options.clamp || "keep";
+    function format(text, isEnd) {
+      snail_core.isStringNotEmpty(text) && (text = text.replace(/,/g, ""));
+      if (snail_core.hasAny(text) == false) {
+        return Object.freeze({
+          valid: true,
+          number: void 0,
+          text: ""
+        });
+      }
+      const isNegative = text.startsWith("-");
+      if (isNegative == true) {
+        text = text.substring(1);
+        if (text.length == 0) {
+          return Object.freeze({
+            valid: isEnd ? false : true,
+            number: void 0,
+            text: isEnd ? "" : "-"
+          });
+        }
+      }
+      if (/^(?:[1-9]\d*|0)(?:\.\d*)?$/.test(text) == false) {
+        return Object.freeze({
+          valid: false,
+          number: void 0,
+          text: ""
+        });
+      }
+      isEnd && formatter.precision >= 0 && (text = parseFloat(text).toFixed(formatter.precision));
+      const number = isNegative ? -parseFloat(text) : parseFloat(text);
+      const error = 9007199254740991 < number || number < -9007199254740991 ? "超过Number的最大精度范围" : void 0;
+      const [integerPart, decimalPart] = text.split(".");
+      const multiplier2 = dealMultiplier(integerPart, decimalPart);
+      return Object.freeze({
+        valid: true,
+        number,
+        text: isNegative ? `-${text}` : text,
+        error,
+        isNegative,
+        isDecimal: decimalPart !== void 0,
+        integerPart,
+        decimalPart,
+        integerPartAfterMultiplier: multiplier2.integerPart,
+        decimalPartAfterMultiplier: multiplier2.decimalPart
+      });
+    }
+    function checkThreshold(number) {
+      const belowMin = formatter.minValue == void 0 ? false : number < formatter.minValue;
+      const exceedMax = formatter.maxValue == void 0 ? false : number > formatter.maxValue;
+      if (belowMin == true) {
+        clamp == "clamp" && (number = formatter.minValue);
+      } else if (exceedMax == true) {
+        clamp == "clamp" && (number = formatter.maxValue);
+      }
+      return {
+        number,
+        belowMin,
+        exceedMax
+      };
+    }
+    function buildUpper(result) {
+      if (formatter.upper == true) {
+        const rt = buildIntegerPartUpperText(result.integerPartAfterMultiplier);
+        if (rt.success != true) {
+          return rt.reason;
+        }
+        const decimalPart = buildDecimalPartUpperText(result.decimalPartAfterMultiplier) || "整";
+        return `${result.isNegative ? "负" : ""}${rt.data}元${decimalPart}`;
+      }
+      return "";
+    }
+    function buildThousands(result) {
+      if (formatter.thousands != "disabled") {
+        const integerPart = (formatter.thousands == "inline" ? result.integerPart : result.integerPartAfterMultiplier).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        const decimalPart = formatter.thousands == "inline" ? result.decimalPart : result.decimalPartAfterMultiplier;
+        return decimalPart === void 0 ? `${result.isNegative ? "-" : ""}${integerPart}` : `${result.isNegative ? "-" : ""}${integerPart}.${decimalPart}`;
+      }
+      return "";
+    }
+    function calcByStep(number, isPlus) {
+      number === void 0 && (number = 0);
+      let [, tmpStr] = String(number).split(".");
+      number = Math.trunc(number) + (isPlus ? step : -step);
+      tmpStr = tmpStr === void 0 ? String(number) : `${number}.${tmpStr}`;
+      return parseFloat(tmpStr);
+    }
+    function dealMultiplier(integerPart, decimalPart) {
+      for (let index = 1; index <= multiplier; index++) {
+        let moveStr = void 0;
+        if (snail_core.isStringNotEmpty(decimalPart) == true) {
+          moveStr = decimalPart[0];
+          decimalPart = decimalPart.substring(1);
+        }
+        moveStr === void 0 && (moveStr = "0");
+        integerPart += moveStr;
+      }
+      return {
+        integerPart,
+        decimalPart
+      };
+    }
+    function buildIntegerPartUpperText(integerPart) {
+      if (snail_core.isStringNotEmpty(integerPart) != true) {
+        return {
+          success: true,
+          data: ""
+        };
+      }
+      const digits = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
+      const units = ["仟万", "佰万", "拾万", "万", "仟", "佰", "拾", "亿", "仟", "佰", "拾", "万", "仟", "佰", "拾", ""];
+      const isNegativeNumber = integerPart.startsWith("-");
+      isNegativeNumber && (integerPart = integerPart.substring(1));
+      if (units.length < integerPart.length) {
+        return {
+          success: false,
+          reason: `转换大写时整数部分最多支持${units.length}位。`
+        };
+      }
+      const texts = [];
+      const unitsOffset = units.length - integerPart.length;
+      for (let index = integerPart.length - 1; index >= 0; index--) {
+        const digit = `${digits[parseInt(integerPart[index])]}`;
+        const unit = units[index + unitsOffset];
+        digit != "零" ? texts.push(`${digit}${unit}`) : (unit == "亿" || unit == "万") && texts.push(unit);
+      }
+      isNegativeNumber && texts.push("负");
+      const text = texts.reverse().join("").replace("万万亿", "万亿").replace("亿万", "亿") || "零";
+      return {
+        success: true,
+        data: text
+      };
+    }
+    function buildDecimalPartUpperText(decimalPart) {
+      if (snail_core.isStringNotEmpty(decimalPart) != true) {
+        return "";
+      }
+      const digits = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
+      let one = parseInt(decimalPart[0]),
+        two = parseInt(decimalPart[1]);
+      if (isNaN(two) == true || two === 0) {
+        return isNaN(one) == true || one === 0 ? "" : `${digits[one]}角`;
+      } else {
+        return isNaN(one) == true || one === 0 ? `零${digits[two]}分` : `${digits[one]}角${digits[two]}分`;
+      }
+    }
+    const formatter = Object.freeze(snail_core.mountScope({
+      minValue: snail_core.isNumberNotNaN(options.minValue) ? options.minValue : void 0,
+      maxValue: snail_core.isNumberNotNaN(options.maxValue) ? options.maxValue : void 0,
+      precision: options.precision >= 0 ? parseInt(String(options.precision)) : void 0,
+      thousands: options.thousands || "disabled",
+      upper: options.upper === true,
+      format,
+      checkThreshold,
+      buildUpper,
+      buildThousands,
+      calcByStep
+    }, "INumberFormatter"));
+    return formatter;
+  }
+
+  const _hoisted_1$d = {
+    key: 0,
+    class: "number-prefix"
+  };
+  const _hoisted_2$8 = ["textContent"];
+  const _hoisted_3$5 = ["inputmode", "placeholder", "title"];
+  const _hoisted_4$3 = {
+    key: 1,
+    class: "number-suffix"
+  };
+  const _hoisted_5$1 = ["textContent"];
+  const _hoisted_6 = ["title", "textContent"];
+  const _hoisted_7 = ["title", "textContent"];
+  var _sfc_main$q = vue.defineComponent({
+    __name: "number",
+    props: vue.mergeModels({
+      placeholder: {},
+      readonly: {
+        type: Boolean
+      },
+      minValue: {},
+      maxValue: {},
+      clamp: {},
+      precision: {},
+      thousands: {},
+      upper: {
+        type: Boolean
+      },
+      formatMultiplier: {},
+      prefix: {},
+      suffix: {},
+      controls: {},
+      step: {}
+    }, {
+      "modelValue": {},
+      "modelModifiers": {}
+    }),
+    emits: vue.mergeModels(["change", "error", "belowMin", "exceedMax"], ["update:modelValue"]),
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
+      const _ = __props;
+      const emits = __emit;
+      const valueModel = vue.useModel(__props, "modelValue");
+      const inputDom = vue.useTemplateRef("input");
+      const {
+        watcher
+      } = useReactive();
+      const formatter = useFormatter(_);
+      const {
+        readonly,
+        prefix,
+        suffix
+      } = _;
+      const {
+        precision,
+        upper,
+        thousands,
+        format,
+        checkThreshold,
+        buildUpper,
+        buildThousands,
+        calcByStep
+      } = formatter;
+      const hasPrefix = snail_core.isStringNotEmpty(prefix);
+      const hasSuffix = snail_core.isStringNotEmpty(suffix);
+      const controls = readonly == true ? "disabled" : _.controls || "disabled";
+      const displayValueRef = vue.shallowRef();
+      const thousandsTextRef = vue.shallowRef();
+      const upperTextRef = vue.shallowRef();
+      let originNumber = valueModel.value;
+      let latestNumber = valueModel.value;
+      let needBackSection;
+      let ignoreCurValueChange;
+      function resetDisplayValue(newValue) {
+        if (displayValueRef.value !== newValue) {
+          ignoreCurValueChange = true;
+          displayValueRef.value = newValue;
+          setTimeout(() => ignoreCurValueChange = false, 0);
+          return true;
+        }
+        return false;
+      }
+      function formatInput(text, isEnd, onInValid, onResetDisplay) {
+        const result = format(text, isEnd);
+        if (result.error) {
+          emits("error", result.error);
+          return;
+        }
+        latestNumber = result.number;
+        if (result.valid != true) {
+          onInValid && onInValid();
+        } else if (result.number === void 0 || isNaN(result.number) == true) {
+          upperTextRef.value = "";
+          thousandsTextRef.value = "";
+        } else {
+          upperTextRef.value = buildUpper(result);
+          thousandsTextRef.value = buildThousands(result);
+          thousands == "inline" ? resetDisplayValue(thousandsTextRef.value) && onResetDisplay && onResetDisplay() : resetDisplayValue(result.text) && onResetDisplay && onResetDisplay();
+        }
+        return result;
+      }
+      function validateRange() {
+        const check = checkThreshold(latestNumber);
+        check.belowMin == true && emits("belowMin", latestNumber, formatter.minValue);
+        check.exceedMax == true && emits("exceedMax", latestNumber, formatter.maxValue);
+        latestNumber = check.number;
+      }
+      function bakSectionStart() {
+        const inputSectionStart = inputDom.value ? inputDom.value.selectionStart : null;
+        return {
+          restore(offset) {
+            inputSectionStart != null && needBackSection && vue.nextTick(() => {
+              const newPosition = inputSectionStart + (offset == void 0 ? 0 : offset);
+              inputDom.value.setSelectionRange(newPosition, newPosition);
+            });
+          }
+        };
+      }
+      function formatOnEnd(triggerChangeEvent) {
+        needBackSection = false;
+        validateRange();
+        formatInput(String(latestNumber), true, () => {
+          latestNumber = void 0;
+          resetDisplayValue("");
+        });
+        valueModel.value = latestNumber;
+        const hasChange = originNumber != latestNumber;
+        const oldValue = originNumber;
+        originNumber = latestNumber;
+        hasChange && triggerChangeEvent && emits("change", originNumber, oldValue);
+      }
+      function onStepClick(isPlus) {
+        latestNumber = calcByStep(latestNumber, isPlus);
+        formatOnEnd(true);
+      }
+      originNumber !== void 0 && formatOnEnd(false);
+      watcher(valueModel, (newValue, oldValue) => {
+        if (newValue !== latestNumber) {
+          latestNumber = newValue;
+          formatOnEnd(false);
+        }
+      });
+      watcher(displayValueRef, (newValue, oldValue) => {
+        const bak = bakSectionStart();
+        oldValue == void 0 && (oldValue = "");
+        ignoreCurValueChange || formatInput(newValue, false, () => {
+          latestNumber = valueModel.value;
+          resetDisplayValue(oldValue);
+          bak.restore(oldValue.length - newValue.length);
+        }, () => bak.restore(displayValueRef.value.length - newValue.length));
+        valueModel.value = latestNumber;
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["snail-number", {
+            "has-prefix": vue.unref(hasPrefix),
+            "has-suffix": vue.unref(hasSuffix)
+          }])
+        }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [vue.createElementVNode("span", {
+          class: "ellipsis",
+          textContent: vue.toDisplayString(vue.unref(prefix))
+        }, null, 8, _hoisted_2$8)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+          class: vue.normalizeClass(["input-panel", vue.unref(controls)])
+        }, [vue.withDirectives(vue.createElementVNode("input", {
+          type: "text",
+          ref: "input",
+          inputmode: vue.unref(precision) > 0 ? "decimal" : "numeric",
+          placeholder: vue.unref(readonly) ? "" : __props.placeholder,
+          title: displayValueRef.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => displayValueRef.value = $event),
+          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, {
+          key: 0
+        }, [vue.createElementVNode("div", {
+          class: "controls default subtract",
+          onClick: _cache[4] || (_cache[4] = $event => onStepClick(false))
+        }, [vue.createVNode(_sfc_main$w, {
+          type: "subtract",
+          size: 20
+        })]), vue.createElementVNode("div", {
+          class: "controls default plus",
+          onClick: _cache[5] || (_cache[5] = $event => onStepClick(true))
+        }, [vue.createVNode(_sfc_main$w, {
+          type: "plus",
+          size: 20
+        })])], 64)) : vue.unref(controls) == "right" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: 1
+        }, [vue.createElementVNode("div", {
+          class: "controls right plus",
+          onClick: _cache[6] || (_cache[6] = $event => onStepClick(true))
+        }, [vue.createVNode(_sfc_main$w, {
+          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, {
+          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", {
+          class: "ellipsis",
+          textContent: vue.toDisplayString(vue.unref(suffix))
+        }, null, 8, _hoisted_5$1)])) : 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", {
+          key: 3,
+          class: "number-util ellipsis",
+          title: thousandsTextRef.value,
+          textContent: vue.toDisplayString(`千分位：${thousandsTextRef.value || ""}`)
+        }, null, 8, _hoisted_7)) : vue.createCommentVNode("", true)], 2);
+      };
+    }
+  });
+
+  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$n = vue.defineComponent({
+  var _sfc_main$p = vue.defineComponent({
     ...{
       name: "Search",
       inheritAttrs: true
@@ -601,9 +1028,9 @@
           readonly: __props.readonly,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => textModel.value = $event),
           onKeyup: _cache[1] || (_cache[1] = $event => onSearch($event))
-        }, null, 40, _hoisted_1$b), [[vue.vModelText, textModel.value, void 0, {
+        }, null, 40, _hoisted_1$c), [[vue.vModelText, textModel.value, void 0, {
           trim: true
-        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$t, {
+        }]]), vue.createElementVNode("div", null, [vue.createVNode(_sfc_main$w, {
           class: "search-button",
           type: "custom",
           draw: searchIon,
@@ -824,11 +1251,11 @@
     }
   }
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     class: "snail-confirm flex-column"
   };
   const _hoisted_2$7 = ["innerHTML"];
-  var _sfc_main$m = vue.defineComponent({
+  var _sfc_main$o = vue.defineComponent({
     ...{
       name: "ConfirmContainer",
       inheritAttrs: true
@@ -855,14 +1282,14 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_sfc_main$p, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [vue.createVNode(_sfc_main$s, {
           "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$q, {
+        }, null, 8, _hoisted_2$7), vue.createVNode(_sfc_main$t, {
           align: "right",
           "cancel-name": __props.cancelName,
           "cancel-disabled": __props.cancelDisabled,
@@ -875,7 +1302,7 @@
     }
   });
 
-  var _sfc_main$l = vue.defineComponent({
+  var _sfc_main$n = vue.defineComponent({
     ...{
       name: "Loading",
       inheritAttrs: true
@@ -914,44 +1341,7 @@
     }
   });
 
-  function useReactive() {
-    function transition(rv, effect, time) {
-      snail_core.throwIfFalse(snail_core.isObject(effect), "transition: effect must be an object.");
-      const scope = scopes.get();
-      rv.value = effect.from;
-      const endId = setTimeout(scope.destroy, time);
-      return scope.onDestroy(function () {
-        rv.value = effect.to;
-        clearTimeout(endId);
-      });
-    }
-    function load(task, status, delay) {
-      snail_core.throwIfFalse(snail_core.isPromise(task), "task: task must be a Promise.");
-      status.value = true;
-      task.finally(function () {
-        delay > 0 ? setTimeout(() => status.value = false, delay) : status.value = false;
-      });
-      return snail_core.wait(task);
-    }
-    function watcher(source, callback, deep) {
-      const {
-        stop
-      } = vue.watch(source, callback, {
-        deep
-      });
-      return scopes.get().onDestroy(stop);
-    }
-    const manager = snail_core.mountScope({
-      transition,
-      load,
-      watcher
-    }, "IReactiveManager");
-    const scopes = snail_core.useScopes();
-    manager.onDestroy(scopes.destroy);
-    return Object.freeze(manager);
-  }
-
-  var _sfc_main$k = vue.defineComponent({
+  var _sfc_main$m = vue.defineComponent({
     ...{
       name: "Dynamic",
       inheritAttrs: false
@@ -970,11 +1360,27 @@
         watcher
       } = useReactive();
       const componentRef = vue.ref(null);
-      const dynamicComponentRef = vue.shallowRef(void 0);
-      const dynamicErrorRef = vue.shallowRef(void 0);
+      const dynamicComponentRef = vue.shallowRef();
+      const errorRef = vue.shallowRef(void 0);
+      const loadingComponent = vue.defineComponent({
+        inheritAttrs: false,
+        components: {
+          Loading: _sfc_main$n
+        },
+        template: "<Loading :mask-disabled='true' />"
+      });
+      const errorComponent = vue.defineComponent({
+        inheritAttrs: false,
+        template: `<div class="snail-dynamic-error">load component error：<span v-text="error" /></div>`,
+        data() {
+          return {
+            error: errorRef
+          };
+        }
+      });
       async function buildDynamicComponent() {
-        dynamicComponentRef.value = void 0;
-        dynamicErrorRef.value = void 0;
+        dynamicComponentRef.value = loadingComponent;
+        errorRef.value = void 0;
         if (snail_core.isStringNotEmpty(__props.name) == true) {
           dynamicComponentRef.value = __props.name;
           return;
@@ -988,19 +1394,20 @@
           await snail_core.delay(200);
           try {
             const comp = await task;
-            snail_core.isObject(comp) || snail_core.isStringNotEmpty(comp) ? dynamicComponentRef.value = comp : dynamicErrorRef.value = `load component failed:return nulll or undefined. url:${__props.url}.`;
+            snail_core.isObject(comp) || snail_core.isStringNotEmpty(comp) ? dynamicComponentRef.value = comp : errorRef.value = `load component failed:return nulll or undefined. url:${__props.url}.`;
           } catch (ex) {
             dynamicComponentRef.value = void 0;
-            dynamicErrorRef.value = ex.message;
+            errorRef.value = ex.message;
           }
         } else {
-          dynamicErrorRef.value = "load error: name component、url are all empty.";
+          errorRef.value = "load error: name component、url are all empty.";
         }
       }
       {
         watcher(() => __props.name, buildDynamicComponent);
         watcher(() => __props.component, buildDynamicComponent);
         watcher(() => __props.url, buildDynamicComponent);
+        watcher(errorRef, () => snail_core.isStringNotEmpty(errorRef.value) && (dynamicComponentRef.value = errorComponent));
         buildDynamicComponent();
       }
       vue.onErrorCaptured((error, vm, info) => {
@@ -1010,7 +1417,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(dynamicComponentRef.value), vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(dynamicComponentRef.value), vue.mergeProps({
           ref_key: "componentRef",
           ref: componentRef
         }, __props.props, _ctx.$attrs), vue.createSlots({
@@ -1018,21 +1425,14 @@
         }, [vue.renderList(_ctx.$slots, (_, name) => {
           return {
             name,
-            fn: vue.withCtx(slotData => [vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotData)))])
+            fn: vue.withCtx(slotData => [vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotData == void 0 ? {} : slotData)))])
           };
-        })]), 1040)), dynamicErrorRef.value != void 0 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          key: 0,
-          class: "snail-dynamic-error"
-        }, _ctx.$attrs), [_cache[0] || (_cache[0] = vue.createTextVNode(" load component error：", -1)), vue.createElementVNode("span", null, vue.toDisplayString(dynamicErrorRef.value), 1)], 16)) : dynamicComponentRef.value == void 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
-          key: 1,
-          show: true,
-          "mask-disabled": true
-        })) : vue.createCommentVNode("", true)], 64);
+        })]), 1040);
       };
     }
   });
 
-  var _sfc_main$j = vue.defineComponent({
+  var _sfc_main$l = vue.defineComponent({
     ...{
       name: "DialogContainer",
       inheritAttrs: true
@@ -1077,7 +1477,7 @@
           onClick: _cache[1] || (_cache[1] = vue.withModifiers($event => {
             __props.options.closeOnMask && vue.unref(closePopup)();
           }, ["self"]))
-        }, [vue.createVNode(_sfc_main$k, vue.mergeProps({
+        }, [vue.createVNode(_sfc_main$m, vue.mergeProps({
           class: "dialog-body",
           name: __props.options.name,
           component: __props.options.component,
@@ -1091,7 +1491,7 @@
     }
   });
 
-  var _sfc_main$i = vue.defineComponent({
+  var _sfc_main$k = vue.defineComponent({
     ...{
       name: "FollowContainer",
       inheritAttrs: true
@@ -1204,7 +1604,7 @@
         });
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$k, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, vue.mergeProps({
           class: ["snail-follow initial", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1221,7 +1621,7 @@
     }
   });
 
-  var _sfc_main$h = vue.defineComponent({
+  var _sfc_main$j = vue.defineComponent({
     ...{
       name: "PopupContainer",
       inheritAttrs: true
@@ -1241,7 +1641,7 @@
         model = vue.shallowRef(void 0)
       } = __props.options;
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$k, vue.mergeProps({
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, vue.mergeProps({
           class: ["snail-popup", [__props.popupStatus.value, __props.popupTransition.value]],
           style: {
             "z-index": __props.zIndex
@@ -1258,12 +1658,12 @@
     }
   });
 
-  const _hoisted_1$9 = {
-    key: 0,
+  const _hoisted_1$a = {
+    key: 1,
     class: "icon"
   };
   const _hoisted_2$6 = ["innerHTML"];
-  var _sfc_main$g = vue.defineComponent({
+  var _sfc_main$i = vue.defineComponent({
     ...{
       name: "ToastContainer",
       inheritAttrs: true
@@ -1281,15 +1681,16 @@
       const {
         onTimeout
       } = snail_core.useTimer();
+      const props = __props.options.props;
       const {
         closePopup
       } = __props.extOptions;
-      const props = __props.options.props;
+      const duration = props.duration > 0 ? props.duration : 1500;
       const closeFillRef = vue.ref("#707070");
       var destroyTimer;
       function onMouseEvent(isLeave) {
         destroyTimer && destroyTimer.destroy();
-        destroyTimer = isLeave ? onTimeout(closePopup, 1500) : void 0;
+        destroyTimer = isLeave ? onTimeout(closePopup, duration) : void 0;
       }
       vue.onMounted(() => onMouseEvent(true));
       return (_ctx, _cache) => {
@@ -1300,9 +1701,10 @@
           }),
           onMouseenter: _cache[3] || (_cache[3] = $event => onMouseEvent(false)),
           onMouseleave: _cache[4] || (_cache[4] = $event => onMouseEvent(true))
-        }, [vue.createVNode(_sfc_main$t, {
-          type: "close",
+        }, [vue.unref(props).closeDisabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+          key: 0,
           class: "close-icon",
+          type: "close",
           fill: closeFillRef.value,
           size: 20,
           onMouseenter: _cache[0] || (_cache[0] = $event => closeFillRef.value = "red"),
@@ -1310,7 +1712,7 @@
           onClick: _cache[2] || (_cache[2] = $event => {
             vue.unref(closePopup)();
           })
-        }, null, 8, ["fill"]), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [vue.createVNode(_sfc_main$t, {
+        }, null, 8, ["fill"])) : vue.createCommentVNode("", true), vue.unref(props).type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_sfc_main$w, {
           type: vue.unref(props).type,
           fill: "#707070",
           size: 20
@@ -1324,7 +1726,7 @@
 
   function usePopup() {
     function popup(options) {
-      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$h, options);
+      const scope = checkOptions(options, checkPopup) || popupInCustomContainer(_sfc_main$j, options);
       return addScope2Scopes(scope);
     }
     function dialog(options) {
@@ -1357,7 +1759,7 @@
           },
           onBeforeClose: fn => hook.register("onBeforeClose", fn)
         });
-        const descriptor = openPopup(_sfc_main$j, options, extOptions);
+        const descriptor = openPopup(_sfc_main$l, options, extOptions);
         scope = snail_core.useAsyncScope(deferred.promise);
         monitorDialog(descriptor, scope, deferred);
       }
@@ -1375,14 +1777,14 @@
           inPopup: "follow",
           target
         };
-        scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$i, options, extOptions);
+        scope = checkOptions(options, checkFollow) || popupInCustomContainer(_sfc_main$k, options, extOptions);
       }
       return addScope2Scopes(scope);
     }
     function confirm(title, message, options) {
       options = options || Object.create(null);
       return dialog({
-        component: _sfc_main$m,
+        component: _sfc_main$o,
         closeOnEscape: true,
         props: {
           ...options,
@@ -1392,7 +1794,7 @@
       });
     }
     function toast(type, message, options) {
-      return popupInCustomContainer(_sfc_main$g, {
+      return popupInCustomContainer(_sfc_main$i, {
         url: "#ToastContainer",
         props: {
           ...(options || Object.create(null)),
@@ -1425,7 +1827,7 @@
         },
         ...extOptions
       });
-      const descriptor = openPopup(container || _sfc_main$h, options, extOptions);
+      const descriptor = openPopup(container || _sfc_main$j, options, extOptions);
       const scope = snail_core.useAsyncScope(deferred.promise);
       scope.onDestroy(() => destroyPopup(descriptor, deferred));
       return scope;
@@ -1563,12 +1965,12 @@
     return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyREREODhFQ0M5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyREREODhFREM5M0UxMUU5ODlFREVENzc4Njk0RjQ2MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjJEREQ4OEVBQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjJEREQ4OEVCQzkzRTExRTk4OUVERUQ3Nzg2OTRGNDYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++keGxAAAA5lJREFUeNrsmktoE0EYx3eSTdpsk2abvnwcFBVp8QFqVPDgQaGgIogIoictelKKVhARBA8q+KAVrFqooh4qXgRfiHpTEHqw9iCKXqQHSVstpqlt0yabrP9p52K1yW72GTMf/JhZMrM7/3l+37REVVWhlMwjlJhxwVwwF8wFc8FcMBfsnIlGKg98TxRa9RbYAFYXUnl+XbjoRpiKXVXMU9qns3xK76CC/YC4QfA1MAg26aiTZGlQQ9la8AZ0g3VuENwLqsArsFVnXW+e30PgKVgGnoA+Nwi+Cw6DAHgGdmqoMwJoXJrJUcYPHoGN4C3Yl6e8rWv4Nmhma/kh2J6n/HW2JsdylLkKtoAPYAeYcPxYmmX32AjcAVHwPEfZFxreR2fAJ9Z5CbMaSYzceMxxDtN198vKo8Vt57ClYh0d4f/OtTTgOjpquaa8WEhldISM5DRYWYCXZdTS4DVoR9tSegdI9y6Nl1KBL5k/7JRto99HW/ZAtGralJ7DTtCPEUKUmqqKPlH0rtXgMZk2utms2jk0PEqPqt3gEOiybJdGjy5BcobmI7LUC7HrbRQ7HaR4PORoOBRoY+f0RbSp3spjqQNIPtEb8/vEqFMnixTwH0T6gPnwbZYIRk/uZWtHqApLQzaP7GyL1kSCPUinqIuKtjWZKhgvpFt1O82X+cXPXq9njdNHD2ZZC/aRTvZ4A20sN3OEz7IgXJDDkls8laV11aEBpHGaB62mCEbPNSA5QvNYO+88hDS6xcHABtbq9XiusMdTYJ4ZI3yBORdKZTBQ6zKnqq62OiQh7WdByzmjgqlzsWs6BAqW9xAiLHJdMECEY36f9zJ7pLt3oxHH4/j0O4kwWREoW8BuKvSYxG4utFoWjOoVHZErlg/+GP2I7ApwkgnXHy1h/VLntNJA76sROfgFI9CgoXh8OD72OJ3OHDA46Am4m3KhU7rSyJfRl2QiOaXVE3oPsU0mzPKw3RcAf5iiZEPaOkf9KsxcyVq7s1vu7SsZEQ5/LO81ydhk3I5Q05Y/tcQTExKLY/+9U2XV++PJVLMtZ7cdH0mlFfnnyPgIpm3s758y3Qj3NiNfY8sxlmeXNt2NhC/ej0grllXVdHIyVY/RbTD7G9iliZkXAIZsKqUspjjmjgolZlwwF1xigr8VoaYBI4I7ilBwl5Hw8JIwcx3aAha6XCj9t4ub4HzBjgfftLhgLpgL5oK5YC6YC+aCuWDt9luAAQC2EPxjL8cUkwAAAABJRU5ErkJggg==";
   }
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     class: "snail-empty"
   };
   const _hoisted_2$5 = ["src"];
   const _hoisted_3$4 = ["textContent"];
-  var _sfc_main$f = vue.defineComponent({
+  var _sfc_main$h = vue.defineComponent({
     ...{
       name: "Empty",
       inheritAttrs: true
@@ -1581,7 +1983,7 @@
     setup(__props) {
       const defaultImageBase64 = getNoDataBase64Image();
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [vue.createElementVNode("img", {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [vue.createElementVNode("img", {
           src: __props.imageUrl || vue.unref(defaultImageBase64)
         }, null, 8, _hoisted_2$5), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
@@ -1591,13 +1993,13 @@
     }
   });
 
-  const _hoisted_1$7 = ["title"];
+  const _hoisted_1$8 = ["title"];
   const _hoisted_2$4 = ["textContent"];
   const _hoisted_3$3 = {
     key: 1,
     class: "select-status"
   };
-  var _sfc_main$e = vue.defineComponent({
+  var _sfc_main$g = vue.defineComponent({
     ...{
       name: "SelectNode",
       inheritAttrs: true
@@ -1642,15 +2044,15 @@
         }, [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$t, {
+        }, null, 8, _hoisted_2$4), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 0,
           type: "arrow",
           color: "#8a9099"
-        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$t, {
+        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$w, {
           type: "success",
           color: "white",
           size: 12
-        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$7)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+        })])) : vue.createCommentVNode("", true)], 42, _hoisted_1$8)) : vue.createCommentVNode("", true), showRef.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
         }, vue.renderList(vue.unref(showChildrenRef), child => {
           return vue.openBlock(), vue.createBlock(_component_SelectNode, {
@@ -1667,7 +2069,7 @@
     }
   });
 
-  var _sfc_main$d = vue.defineComponent({
+  var _sfc_main$f = vue.defineComponent({
     ...{
       name: "Select2Popup",
       inheritAttrs: true
@@ -1839,13 +2241,13 @@
           key: 0
         }, [vue.createTextVNode(" 暂无选项 ")], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 1
-        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
+        }, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$p, 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$e, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$g, {
             key: vue.unref(context).getKey(item),
             multiple: __props.multiple,
             item,
@@ -1854,7 +2256,7 @@
             onEnter: onEnterSelectNode,
             onClick: onClickSelectNode
           }, null, 8, ["multiple", "item", "context"]);
-        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+        }), 128)), itemsRef.value.length == 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
           key: 1,
           message: "无结果"
         })) : vue.createCommentVNode("", true), showClearButtonRef.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -1866,7 +2268,7 @@
     }
   });
 
-  const _hoisted_1$6 = {
+  const _hoisted_1$7 = {
     key: 0,
     class: "select-result"
   };
@@ -1877,9 +2279,9 @@
     class: "placeholder"
   };
   onAppCreated((app, type) => {
-    type == "popup" && app.component("SelectPopup", _sfc_main$d);
+    type == "popup" && app.component("SelectPopup", _sfc_main$f);
   });
-  var _sfc_main$c = vue.defineComponent({
+  var _sfc_main$e = vue.defineComponent({
     ...{
       name: "Select",
       inheritAttrs: true
@@ -2011,7 +2413,7 @@
           ref: "select"
         }, [__props.items && __props.items.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
-        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
+        }, [selectedItemsRef.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(vue.unref(slotOptions))), () => [vue.createElementVNode("div", {
           class: "select-text ellipsis",
           title: selectedTextRef.value,
           textContent: vue.toDisplayString(selectedTextRef.value)
@@ -2019,7 +2421,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$t, {
+        }, null, 8, _hoisted_3$2)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 2,
           type: "arrow",
           size: 24,
@@ -2032,7 +2434,7 @@
     }
   });
 
-  var _sfc_main$b = vue.defineComponent({
+  var _sfc_main$d = vue.defineComponent({
     ...{
       name: "Switch",
       inheritAttrs: true
@@ -2081,6 +2483,72 @@
     }
   });
 
+  const _hoisted_1$6 = ["readonly", "placeholder", "rows"];
+  var _sfc_main$c = vue.defineComponent({
+    ...{
+      name: "Textarea"
+    },
+    __name: "textarea",
+    props: vue.mergeModels({
+      readonly: {
+        type: Boolean
+      },
+      placeholder: {},
+      autoHeight: {
+        type: Boolean
+      },
+      minRows: {},
+      maxRows: {}
+    }, {
+      "modelValue": {
+        default: void 0
+      },
+      "modelModifiers": {}
+    }),
+    emits: vue.mergeModels(["focus", "input", "blur", "change"], ["update:modelValue"]),
+    setup(__props, _ref) {
+      let {
+        emit: __emit
+      } = _ref;
+      const props = __props;
+      const emits = __emit;
+      const valueModel = vue.useModel(__props, "modelValue");
+      const textareaDom = vue.useTemplateRef("textarea");
+      const minRows = props.minRows > 0 ? props.minRows : 4;
+      const maxRows = props.maxRows > 0 ? props.maxRows : 10;
+      const rowsRef = vue.shallowRef(minRows);
+      async function calcRows() {
+        if (textareaDom.value) {
+          rowsRef.value = 1;
+          await vue.nextTick();
+          const style = window.getComputedStyle(textareaDom.value);
+          let lineHeight = parseFloat(style.lineHeight);
+          isNaN(lineHeight) && (lineHeight = parseFloat(style.fontSize) * 1.2);
+          const vPadding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+          const rows = Math.trunc((textareaDom.value.scrollHeight - vPadding) / lineHeight);
+          rowsRef.value = Math.max(minRows, Math.min(maxRows, rows));
+        }
+        requestAnimationFrame(calcRows);
+      }
+      props.autoHeight == true && vue.onMounted(calcRows);
+      return (_ctx, _cache) => {
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
+          class: "snail-textarea",
+          ref: "textarea"
+        }, _ctx.$attrs, {
+          readonly: __props.readonly,
+          placeholder: __props.placeholder,
+          rows: rowsRef.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => valueModel.value = $event),
+          onFocus: _cache[1] || (_cache[1] = $event => emits("focus")),
+          onInput: _cache[2] || (_cache[2] = $event => emits("input", textareaDom.value.value)),
+          onBlur: _cache[3] || (_cache[3] = $event => emits("blur", textareaDom.value.value)),
+          onChange: _cache[4] || (_cache[4] = $event => emits("change", textareaDom.value.value))
+        }), null, 16, _hoisted_1$6)), [[vue.vModelText, valueModel.value]]);
+      };
+    }
+  });
+
   const _hoisted_1$5 = {
     class: "fold-header"
   };
@@ -2094,7 +2562,7 @@
     class: "fold-body",
     ref: "foldBody"
   };
-  var _sfc_main$a = vue.defineComponent({
+  var _sfc_main$b = vue.defineComponent({
     ...{
       name: "Fold",
       inheritAttrs: true
@@ -2171,7 +2639,7 @@
           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$t, {
+        }, null, 8, _hoisted_3$1)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.createVNode(_sfc_main$w, {
           type: "arrow",
           title: statusModel.value == "expand" ? "收起" : "展开",
           onClick: onStatusClick
@@ -2180,7 +2648,7 @@
     }
   });
 
-  var _sfc_main$9 = vue.defineComponent({
+  var _sfc_main$a = vue.defineComponent({
     ...{
       name: "Scroll",
       inheritAttrs: true
@@ -2305,7 +2773,7 @@
     key: 1,
     class: "layout-end"
   };
-  var _sfc_main$8 = vue.defineComponent({
+  var _sfc_main$9 = vue.defineComponent({
     __name: "layout",
     props: {
       mode: {},
@@ -2315,7 +2783,7 @@
       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$9, vue.mergeProps({
+        }, [_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")]),
@@ -2325,16 +2793,13 @@
     }
   });
 
-  var _sfc_main$7 = vue.defineComponent({
+  var _sfc_main$8 = vue.defineComponent({
     ...{
       name: "Sort",
       inheritAttrs: true
     },
     __name: "sort",
     props: {
-      disabled: {
-        type: Boolean
-      },
       changer: {},
       draggable: {},
       handle: {},
@@ -2342,9 +2807,15 @@
       ghostClass: {},
       filter: {},
       group: {},
-      animation: {}
+      animation: {},
+      disabled: {
+        type: Boolean
+      },
+      sortDisabled: {
+        type: Boolean
+      }
     },
-    emits: ["update"],
+    emits: ["start", "move", "add", "remove", "end", "update"],
     setup(__props, _ref) {
       let {
         emit: __emit
@@ -2368,8 +2839,24 @@
         }
         if (props.disabled != true && MODULE_Sortable != void 0) {
           sortPanel.classList.add("sortable");
+          const group = {
+            name: void 0,
+            pull: true,
+            put: true
+          };
+          snail_core.isStringNotEmpty(props.group) ? group.name = props.group : snail_core.isObject(props.group) && Object.assign(group, props.group);
+          group.name || (group.name = snail_core.newId());
+          if (typeof group.pull == "function") {
+            const orign = group.pull;
+            group.pull = (to, from, item) => orign(item, to.el, from.el);
+          }
+          if (typeof group.put == "function") {
+            const orign = group.put;
+            group.put = (to, from, item) => orign(item, to.el, from.el);
+          }
           sortInstance = new MODULE_Sortable(sortPanel, {
-            group: props.group || snail_core.newId(),
+            group,
+            sort: props.sortDisabled != true,
             draggable: props.draggable,
             dragClass: props.dragClass || "snail-sort-drag",
             ghostClass: props.ghostClass || "snail-sort-ghost",
@@ -2379,9 +2866,12 @@
             animation: props.animation > 0 ? props.animation : 150,
             forceFallback: true,
             fallbackTolerance: 2,
-            onUpdate(evt) {
-              emits("update", evt.oldIndex, evt.newIndex);
-            }
+            onStart: evt => emits("start", evt),
+            onMove: (evt, originalEvent) => emits("move", evt, originalEvent),
+            onAdd: evt => emits("add", evt),
+            onRemove: evt => emits("remove", evt),
+            onEnd: evt => emits("end", evt),
+            onUpdate: evt => emits("update", evt.oldIndex, evt.newIndex)
           });
         }
       }
@@ -2407,7 +2897,7 @@
   const _hoisted_1$3 = {
     class: "table-body"
   };
-  var _sfc_main$6 = vue.defineComponent({
+  var _sfc_main$7 = vue.defineComponent({
     ...{
       name: "Table",
       inheritAttrs: true
@@ -2431,7 +2921,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$9, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
           class: vue.normalizeClass(["snail-table", {
             "start-border": __props.border == true
           }]),
@@ -2451,7 +2941,7 @@
     }
   });
 
-  var _sfc_main$5 = vue.defineComponent({
+  var _sfc_main$6 = vue.defineComponent({
     ...{
       name: "TableRow",
       inheritAttrs: true
@@ -2474,7 +2964,7 @@
     }
   });
 
-  var _sfc_main$4 = vue.defineComponent({
+  var _sfc_main$5 = vue.defineComponent({
     ...{
       name: "TableCol",
       inheritAttrs: true
@@ -2520,6 +3010,43 @@
     }
   });
 
+  var _sfc_main$4 = vue.defineComponent({
+    __name: "transitions",
+    props: {
+      customClass: {},
+      effect: {},
+      group: {
+        type: Boolean
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const classNames = vue.computed(() => {
+        const array = [props.customClass || "snail-transition"];
+        if (snail_core.isArray(props.effect)) {
+          props.effect.length > 0 ? array.push(...props.effect) : array.push("fade");
+        } else {
+          array.push(props.effect || "fade");
+        }
+        return array.join(" ");
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.group ? vue.TransitionGroup : vue.Transition), vue.mergeProps(_ctx.$attrs, {
+          appear: "",
+          "enter-active-class": `${classNames.value} enter-active`,
+          "enter-from-class": `${classNames.value} enter-from`,
+          "enter-to-class": `${classNames.value} enter-to`,
+          "leave-active-class": `${classNames.value} leave-active`,
+          "leave-from-class": `${classNames.value} leave-from`,
+          "leave-to-class": `${classNames.value} leave-to`
+        }), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, ["enter-active-class", "enter-from-class", "enter-to-class", "leave-active-class", "leave-from-class", "leave-to-class"]);
+      };
+    }
+  });
+
   const _hoisted_1$2 = {
     key: 0,
     class: "node-fold"
@@ -2651,7 +3178,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$t, {
+        }, null, -1)), __props.options.foldDisabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [showChildrenRef.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 0,
           class: vue.normalizeClass(statusRef.value),
           type: "custom",
@@ -2720,11 +3247,11 @@
         emits("click", node, parents);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [__props.search ? (vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
           key: 0
         }, __props.search, {
           onSearch
-        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$9, {
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$a, {
           "scroll-y": true
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.nodes || [], node => {
@@ -2771,14 +3298,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$p, vue.mergeProps({
+        }, [__props.header && __props.header.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$s, 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$9, vue.mergeProps({
+        }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$a, vue.mergeProps({
           class: "wrapper-body"
         }, __props.content || {
           scrollX: false,
@@ -2786,7 +3313,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$q, vue.mergeProps({
+        }, 16), __props.footer && __props.readonly != true && __props.footer.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$t, vue.mergeProps({
           key: 1
         }, __props.footer || {}, {
           onCancel: _cache[1] || (_cache[1] = $event => emits("cancel")),
@@ -2800,7 +3327,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$k, options);
+    const app = vue.createApp(_sfc_main$m, options);
     triggerAppCreated(app);
     app.mount(target);
     const scope = snail_core.useScope().onDestroy(() => app.unmount());
@@ -2893,12 +3420,12 @@
           onTouchstart: onStartDrag,
           onTouchmove: onDragMove,
           onTouchend: onDragEnd
-        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
+        }, [dragInfoRef.value.status == "success" ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 0,
           type: "success",
           size: 20,
           color: "white"
-        })) : (vue.openBlock(), vue.createBlock(_sfc_main$t, {
+        })) : (vue.openBlock(), vue.createBlock(_sfc_main$w, {
           key: 1,
           type: "custom",
           size: 20,
@@ -2910,29 +3437,32 @@
   });
 
   const components = {
-    Button: _sfc_main$u,
-    Choose: _sfc_main$s,
-    DatePicker: _sfc_main$r,
-    Footer: _sfc_main$q,
-    Header: _sfc_main$p,
-    Icon: _sfc_main$t,
-    Search: _sfc_main$n,
-    Select: _sfc_main$c,
-    Switch: _sfc_main$b,
-    Dynamic: _sfc_main$k,
-    Fold: _sfc_main$a,
-    Layout: _sfc_main$8,
-    Scroll: _sfc_main$9,
-    Sort: _sfc_main$7,
-    Table: _sfc_main$6,
-    TableRow: _sfc_main$5,
-    TableCol: _sfc_main$4,
+    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,
-    Input: _sfc_main$o,
     DragVerify: _sfc_main,
-    Empty: _sfc_main$f,
-    Loading: _sfc_main$l
+    Empty: _sfc_main$h,
+    Loading: _sfc_main$n
   };
 
   snail_core.onMountScope(scope => {