@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/ShortPassword.js

@@ -1,41 +1,231 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, computed as t, watch as l, resolveComponent as n, openBlock as s, createElementBlock as a, createVNode as o, withCtx as i, createElementVNode as r, toDisplayString as u, withDirectives as c, normalizeStyle as p, vModelText as d, Fragment as v, renderList as m, createCommentVNode as f } from "vue";
-import { c as g } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { ref, computed, watch, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, withDirectives, normalizeStyle, vModelText, Fragment, renderList, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: y, translate: k } = g("shortpassword"), w = y({ props: { title: { type: String, default: "" }, desc: { type: String, default: "" }, tips: { type: String, default: "" }, visible: { type: Boolean, default: false }, modelValue: { type: String, default: "" }, errorMsg: { type: String, default: "" }, noButton: { type: Boolean, default: true }, closeOnClickOverlay: { type: Boolean, default: true }, length: { type: [String, Number], default: 6 }, isWrapTeleport: { type: Boolean, default: true } }, emits: ["update:modelValue", "update:visible", "complete", "change", "ok", "tips", "close", "cancel"], setup(n2, { emit: s2 }) {
-  const a2 = e(n2.modelValue), o2 = e(), i2 = t(() => u2(Number(n2.length))), r2 = e(n2.visible);
-  function u2(e2) {
-    return Math.min(Math.max(4, e2), 6);
+const { create, translate } = createComponent("shortpassword");
+const _sfc_main = create({
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    desc: {
+      type: String,
+      default: ""
+    },
+    tips: {
+      type: String,
+      default: ""
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    noButton: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    },
+    length: {
+      type: [String, Number],
+      default: 6
+    },
+    isWrapTeleport: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:visible", "complete", "change", "ok", "tips", "close", "cancel"],
+  setup(props, { emit }) {
+    const realInput = ref(props.modelValue);
+    const realpwd = ref();
+    const comLen = computed(() => range(Number(props.length)));
+    const show = ref(props.visible);
+    function sureClick() {
+      emit("ok", realInput.value);
+    }
+    function focus() {
+      realpwd.value.focus();
+    }
+    watch(() => props.visible, (value) => {
+      show.value = value;
+    });
+    watch(() => props.modelValue, (value) => {
+      realInput.value = value;
+      emit("update:modelValue", value);
+    }, {
+      deep: true,
+      immediate: true
+    });
+    function changeValue(e) {
+      const input = e.target;
+      let val = input.value;
+      if (val.length > comLen.value) {
+        val = val.slice(0, comLen.value);
+        realInput.value = val;
+      }
+      if (String(realInput.value).length === comLen.value) {
+        emit("complete", val);
+      }
+      emit("change", val);
+      emit("update:modelValue", val);
+    }
+    function close() {
+      emit("update:visible", false);
+      emit("cancel");
+    }
+    function closeIcon() {
+      emit("update:visible", false);
+      emit("close");
+    }
+    function range(val) {
+      return Math.min(Math.max(4, val), 6);
+    }
+    function onTips() {
+      emit("tips");
+    }
+    function systemStyle() {
+      let u = navigator.userAgent;
+      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
+      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if (isIOS) {
+        return {
+          paddingRight: "1200px"
+        };
+      }
+      if (isAndroid) {
+        return {
+          opacity: 0,
+          zindex: 10
+        };
+      }
+    }
+    return {
+      comLen,
+      sureClick,
+      realInput,
+      realpwd,
+      focus,
+      range,
+      changeValue,
+      close,
+      onTips,
+      show,
+      systemStyle,
+      closeIcon,
+      translate
+    };
   }
-  return l(() => n2.visible, (e2) => {
-    r2.value = e2;
-  }), l(() => n2.modelValue, (e2) => {
-    a2.value = e2, s2("update:modelValue", e2);
-  }, { deep: true, immediate: true }), { comLen: i2, sureClick: function() {
-    s2("ok", a2.value);
-  }, realInput: a2, realpwd: o2, focus: function() {
-    o2.value.focus();
-  }, range: u2, changeValue: function(e2) {
-    let t2 = e2.target.value;
-    t2.length > i2.value && (t2 = t2.slice(0, i2.value), a2.value = t2), String(a2.value).length === i2.value && s2("complete", t2), s2("change", t2), s2("update:modelValue", t2);
-  }, close: function() {
-    s2("update:visible", false), s2("cancel");
-  }, onTips: function() {
-    s2("tips");
-  }, show: r2, systemStyle: function() {
-    let e2 = navigator.userAgent, t2 = e2.indexOf("Android") > -1 || e2.indexOf("Linux") > -1;
-    return !!e2.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) ? { paddingRight: "1200px" } : t2 ? { opacity: 0, zindex: 10 } : void 0;
-  }, closeIcon: function() {
-    s2("update:visible", false), s2("close");
-  }, translate: k };
-} }), x = { class: "nut-shortpsd-title" }, C = { class: "nut-shortpsd-subtitle" }, b = { class: "nut-input-normalw" }, S = r("div", { class: "nut-input-site" }, null, -1), V = { key: 0, class: "nut-shortpsd-icon" }, I = { class: "nut-shortpsd-message" }, O = { class: "nut-shortpsd-error" }, T = { key: 0, class: "nut-shortpsd-forget" }, B = { key: 0, class: "nut-shortpsd-footer" };
-var M = h(w, [["render", function(e2, t2, l2, g2, h2, y2) {
-  const k2 = n("nut-icon"), w2 = n("nut-popup");
-  return s(), a("view", null, [o(w2, { style: { padding: "32px 24px 28px 24px", borderRadius: "12px", textAlign: "center" }, visible: e2.show, "onUpdate:visible": t2[6] || (t2[6] = (t3) => e2.show = t3), closeable: true, onClickCloseIcon: e2.closeIcon, "close-on-click-overlay": e2.closeOnClickOverlay, onClickOverlay: e2.close, isWrapTeleport: e2.isWrapTeleport }, { default: i(() => [r("view", x, u(e2.title || e2.translate("title")), 1), r("view", C, u(e2.desc || e2.translate("desc")), 1), r("div", b, [c(r("input", { ref: "realpwd", class: "nut-input-real", type: "number", maxlength: "6", style: p(e2.systemStyle()), "onUpdate:modelValue": t2[0] || (t2[0] = (t3) => e2.realInput = t3), onInput: t2[1] || (t2[1] = (...t3) => e2.changeValue && e2.changeValue(...t3)) }, null, 36), [[d, e2.realInput]]), S, r("view", { class: "nut-shortpsd-fake", onClick: t2[2] || (t2[2] = (...t3) => e2.focus && e2.focus(...t3)) }, [(s(true), a(v, null, m(new Array(e2.comLen), (t3, l3) => (s(), a("view", { class: "nut-shortpsd-li", key: l3 }, [String(e2.realInput).length > l3 ? (s(), a("view", V)) : f("", true)]))), 128))])]), r("view", I, [r("view", O, u(e2.errorMsg), 1), e2.tips || e2.translate("tips") ? (s(), a("view", T, [o(k2, { class: "icon", size: "11px", name: "tips" }), r("view", { onClick: t2[3] || (t2[3] = (...t3) => e2.onTips && e2.onTips(...t3)) }, u(e2.tips || e2.translate("tips")), 1)])) : f("", true)]), e2.noButton ? f("", true) : (s(), a("view", B, [r("view", { class: "nut-shortpsd-cancle", onClick: t2[4] || (t2[4] = (...t3) => e2.close && e2.close(...t3)) }, u(e2.translate("cancel")), 1), r("view", { class: "nut-shortpsd-sure", onClick: t2[5] || (t2[5] = (...t3) => e2.sureClick && e2.sureClick(...t3)) }, u(e2.translate("confirm")), 1)]))]), _: 1 }, 8, ["visible", "onClickCloseIcon", "close-on-click-overlay", "onClickOverlay", "isWrapTeleport"])]);
-}]]);
-export { M as default };
+});
+const _hoisted_1 = { class: "nut-shortpsd-title" };
+const _hoisted_2 = { class: "nut-shortpsd-subtitle" };
+const _hoisted_3 = { class: "nut-input-normalw" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "nut-input-site" }, null, -1);
+const _hoisted_5 = {
+  key: 0,
+  class: "nut-shortpsd-icon"
+};
+const _hoisted_6 = { class: "nut-shortpsd-message" };
+const _hoisted_7 = { class: "nut-shortpsd-error" };
+const _hoisted_8 = {
+  key: 0,
+  class: "nut-shortpsd-forget"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "nut-shortpsd-footer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createElementBlock("view", null, [
+    createVNode(_component_nut_popup, {
+      style: {
+        padding: "32px 24px 28px 24px",
+        borderRadius: "12px",
+        textAlign: "center"
+      },
+      visible: _ctx.show,
+      "onUpdate:visible": _cache[6] || (_cache[6] = ($event) => _ctx.show = $event),
+      closeable: true,
+      onClickCloseIcon: _ctx.closeIcon,
+      "close-on-click-overlay": _ctx.closeOnClickOverlay,
+      onClickOverlay: _ctx.close,
+      isWrapTeleport: _ctx.isWrapTeleport
+    }, {
+      default: withCtx(() => [
+        createElementVNode("view", _hoisted_1, toDisplayString(_ctx.title || _ctx.translate("title")), 1),
+        createElementVNode("view", _hoisted_2, toDisplayString(_ctx.desc || _ctx.translate("desc")), 1),
+        createElementVNode("div", _hoisted_3, [
+          withDirectives(createElementVNode("input", {
+            ref: "realpwd",
+            class: "nut-input-real",
+            type: "number",
+            maxlength: "6",
+            style: normalizeStyle(_ctx.systemStyle()),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.realInput = $event),
+            onInput: _cache[1] || (_cache[1] = (...args) => _ctx.changeValue && _ctx.changeValue(...args))
+          }, null, 36), [
+            [vModelText, _ctx.realInput]
+          ]),
+          _hoisted_4,
+          createElementVNode("view", {
+            class: "nut-shortpsd-fake",
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(new Array(_ctx.comLen), (sublen, index2) => {
+              return openBlock(), createElementBlock("view", {
+                class: "nut-shortpsd-li",
+                key: index2
+              }, [
+                String(_ctx.realInput).length > index2 ? (openBlock(), createElementBlock("view", _hoisted_5)) : createCommentVNode("", true)
+              ]);
+            }), 128))
+          ])
+        ]),
+        createElementVNode("view", _hoisted_6, [
+          createElementVNode("view", _hoisted_7, toDisplayString(_ctx.errorMsg), 1),
+          _ctx.tips || _ctx.translate("tips") ? (openBlock(), createElementBlock("view", _hoisted_8, [
+            createVNode(_component_nut_icon, {
+              class: "icon",
+              size: "11px",
+              name: "tips"
+            }),
+            createElementVNode("view", {
+              onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onTips && _ctx.onTips(...args))
+            }, toDisplayString(_ctx.tips || _ctx.translate("tips")), 1)
+          ])) : createCommentVNode("", true)
+        ]),
+        !_ctx.noButton ? (openBlock(), createElementBlock("view", _hoisted_9, [
+          createElementVNode("view", {
+            class: "nut-shortpsd-cancle",
+            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.close && _ctx.close(...args))
+          }, toDisplayString(_ctx.translate("cancel")), 1),
+          createElementVNode("view", {
+            class: "nut-shortpsd-sure",
+            onClick: _cache[5] || (_cache[5] = (...args) => _ctx.sureClick && _ctx.sureClick(...args))
+          }, toDisplayString(_ctx.translate("confirm")), 1)
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 8, ["visible", "onClickCloseIcon", "close-on-click-overlay", "onClickOverlay", "isWrapTeleport"])
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/SideNavBar.js

@@ -1,30 +1,87 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, reactive as t, computed as r, onMounted as s, toRefs as n, openBlock as a, createElementBlock as o, normalizeClass as l, createElementVNode as i, renderSlot as c } from "vue";
-import { c as u } from "./component.js";
-import { _ as d } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, onMounted, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: f, create: p } = u("sidenavbar"), m = p({ props: { offset: { type: [String, Number], default: 15 } }, emits: [], setup: (a2, o2) => {
-  const l2 = e(null), i2 = t({ count: 1, observer: null }), c2 = r(() => ({ [f]: true })), u2 = (e2, t2 = 1) => {
-    for (let r2 = 0; r2 < e2.length; r2++) {
-      let s2 = e2[r2];
-      s2.children[0].style.paddingLeft = a2.offset * t2 + "px", s2.className.includes("nut-sidenavbaritem") || u2(Array.from(s2.children[1].children), ++i2.count);
+const { componentName, create } = createComponent("sidenavbar");
+const _sfc_main = create({
+  props: {
+    offset: {
+      type: [String, Number],
+      default: 15
     }
-    i2.count--;
-  }, d2 = () => {
-    let e2 = l2.value.childNodes;
-    e2.length && (e2 = Array.from(e2).filter((e3) => e3.nodeType !== 3).map((e3) => e3), u2(e2));
-  };
-  return s(() => {
-    d2(), i2.observer = new MutationObserver(function() {
-      i2.count = 1, d2();
-    }), i2.observer.observe(l2.value, { attributes: false, childList: true, characterData: false, subtree: false });
-  }), { ...n(i2), list: l2, classes: c2 };
-} }), v = { class: "nut-sidenavbar__content" }, b = { class: "nut-sidenavbar__content__list", ref: "list" };
-var h = d(m, [["render", function(e2, t2, r2, s2, n2, u2) {
-  return a(), o("view", { class: l(e2.classes) }, [i("view", v, [i("view", b, [c(e2.$slots, "default")], 512)])], 2);
-}]]);
-export { h as default };
+  },
+  emits: [],
+  setup: (props, context) => {
+    const list = ref(null);
+    const state = reactive({
+      count: 1,
+      observer: null
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const setPaddingLeft = (nodeList, level = 1) => {
+      for (let i = 0; i < nodeList.length; i++) {
+        let item = nodeList[i];
+        item.children[0].style.paddingLeft = props.offset * level + "px";
+        if (!item.className.includes("nut-sidenavbaritem")) {
+          setPaddingLeft(Array.from(item.children[1].children), ++state.count);
+        }
+      }
+      state.count--;
+    };
+    const handleSlots = () => {
+      let childNodes = list.value.childNodes;
+      if (childNodes.length) {
+        childNodes = Array.from(childNodes).filter((item) => item.nodeType !== 3).map((item) => {
+          return item;
+        });
+        setPaddingLeft(childNodes);
+      }
+    };
+    onMounted(() => {
+      handleSlots();
+      state.observer = new MutationObserver(function() {
+        state.count = 1;
+        handleSlots();
+      });
+      state.observer.observe(list.value, {
+        attributes: false,
+        childList: true,
+        characterData: false,
+        subtree: false
+      });
+    });
+    return {
+      ...toRefs(state),
+      list,
+      classes
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-sidenavbar__content" };
+const _hoisted_2 = {
+  class: "nut-sidenavbar__content__list",
+  ref: "list"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      createElementVNode("view", _hoisted_2, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512)
+    ])
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/SideNavBarItem.js

@@ -1,16 +1,51 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { computed as e, openBlock as t, createElementBlock as i, withModifiers as a, createElementVNode as l, toDisplayString as n } from "vue";
-import { c as r } from "./component.js";
-import { _ as s } from "./plugin-vue_export-helper.js";
+import { computed, openBlock, createElementBlock, withModifiers, createElementVNode, toDisplayString } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: o, create: c } = r("sidenavbaritem"), p = c({ props: { title: { type: String, default: "" }, ikey: { type: String, default: "" } }, emits: ["click"], setup: (t2, i2) => ({ classes: e(() => ({ [o]: true })), handleClick: () => {
-  i2.emit("click");
-} }) }), m = ["ikey"], u = { class: "nut-sidenavbaritem__title" };
-var d = s(p, [["render", function(e2, r2, s2, o2, c2, p2) {
-  return t(), i("view", { class: "nut-sidenavbaritem", onClick: r2[0] || (r2[0] = a((...t2) => e2.handleClick && e2.handleClick(...t2), ["stop"])), ikey: e2.ikey }, [l("span", u, n(e2.title), 1)], 8, m);
-}]]);
-export { d as default };
+const { componentName, create } = createComponent("sidenavbaritem");
+const _sfc_main = create({
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    ikey: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup: (props, context) => {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const handleClick = () => {
+      context.emit("click");
+    };
+    return {
+      classes,
+      handleClick
+    };
+  }
+});
+const _hoisted_1 = ["ikey"];
+const _hoisted_2 = { class: "nut-sidenavbaritem__title" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: "nut-sidenavbaritem",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])),
+    ikey: _ctx.ikey
+  }, [
+    createElementVNode("span", _hoisted_2, toDisplayString(_ctx.title), 1)
+  ], 8, _hoisted_1);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Signature.js

@@ -1,47 +1,166 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, computed as t, reactive as n, onMounted as a, toRefs as s, resolveComponent as r, openBlock as l, createElementBlock as o, normalizeClass as u, createElementVNode as i, toDisplayString as c, createVNode as v, withCtx as p, createTextVNode as d } from "vue";
-import { c as m } from "./component.js";
-import { _ as g } from "./plugin-vue_export-helper.js";
+import { ref, computed, reactive, onMounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, createTextVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: h, create: f, translate: y } = m("signature"), S = f({ props: { customClass: { type: String, default: "" }, lineWidth: { type: Number, default: 2 }, strokeStyle: { type: String, default: "#000" }, type: { type: String, default: "png" }, unSupportTpl: { type: String, default: "" } }, components: {}, emits: ["confirm", "clear"], setup(r2, { emit: l2 }) {
-  const o2 = e(null), u2 = e(null), i2 = t(() => ({ [h]: true, [`${r2.customClass}`]: r2.customClass })), c2 = n({ canvasHeight: 0, canvasWidth: 0, ctx: null, isSupportTouch: "ontouchstart" in window, events: "ontouchstart" in window ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"] }), v2 = () => {
-    let e2 = document.createElement("canvas");
-    return !(!e2.getContext || !e2.getContext("2d"));
-  }, p2 = (e2) => {
-    e2.preventDefault(), c2.ctx.beginPath(), c2.ctx.lineWidth = r2.lineWidth, c2.ctx.strokeStyle = r2.strokeStyle, o2.value.addEventListener(c2.events[1], d2, false), o2.value.addEventListener(c2.events[2], m2, false), o2.value.addEventListener(c2.events[3], g2, false);
-  }, d2 = (e2) => {
-    e2.preventDefault();
-    let t2 = c2.isSupportTouch ? e2.touches[0] : e2, n2 = o2.value.getBoundingClientRect(), a2 = t2.clientX - n2.left, s2 = t2.clientY - n2.top;
-    c2.ctx.lineTo(a2, s2), c2.ctx.stroke();
-  }, m2 = (e2) => {
-    e2.preventDefault(), o2.value.removeEventListener(c2.events[1], d2, false), o2.value.removeEventListener(c2.events[2], m2, false);
-  }, g2 = (e2) => {
-    e2.preventDefault(), o2.value.removeEventListener(c2.events[1], d2, false), o2.value.removeEventListener(c2.events[2], m2, false);
-  }, f2 = () => {
-    o2.value.addEventListener(c2.events[2], m2, false), c2.ctx.clearRect(0, 0, c2.canvasWidth, c2.canvasHeight), c2.ctx.closePath(), l2("clear");
-  }, S2 = (e2) => {
-    let t2;
-    switch (r2.type) {
-      case "png":
-        t2 = e2.toDataURL("image/png");
-        break;
-      case "jpg":
-        t2 = e2.toDataURL("image/jpeg", 0.8);
+const { componentName, create, translate } = createComponent("signature");
+const _sfc_main = create({
+  props: {
+    customClass: {
+      type: String,
+      default: ""
+    },
+    lineWidth: {
+      type: Number,
+      default: 2
+    },
+    strokeStyle: {
+      type: String,
+      default: "#000"
+    },
+    type: {
+      type: String,
+      default: "png"
+    },
+    unSupportTpl: {
+      type: String,
+      default: ""
     }
-    f2(), l2("confirm", e2, t2);
-  };
-  return a(() => {
-    v2() && (c2.ctx = o2.value.getContext("2d"), c2.canvasWidth = u2.value.offsetWidth, c2.canvasHeight = u2.value.offsetHeight, o2.value.addEventListener(c2.events[0], p2, false));
-  }), { ...s(c2), canvas: o2, wrap: u2, isCanvasSupported: v2, confirm: () => {
-    S2(o2.value);
-  }, clear: f2, classes: i2, translate: y };
-} }), x = { class: "nut-signature-inner", ref: "wrap" }, C = ["height", "width"], L = { key: 1, class: "nut-signature-unsopport" };
-var w = g(S, [["render", function(e2, t2, n2, a2, s2, m2) {
-  const g2 = r("nut-button");
-  return l(), o("div", { class: u(e2.classes) }, [i("div", x, [() => e2.isCanvasSupported() ? (l(), o("canvas", { key: 0, ref: "canvas", height: e2.canvasHeight, width: e2.canvasWidth }, null, 8, C)) : (l(), o("p", L, c(e2.unSupportTpl || e2.translate("unSupportTpl")), 1))], 512), v(g2, { class: "nut-signature-btn", type: "default", onClick: t2[0] || (t2[0] = (t3) => e2.clear()) }, { default: p(() => [d(c(e2.translate("reSign")), 1)]), _: 1 }), v(g2, { class: "nut-signature-btn", type: "primary", onClick: t2[1] || (t2[1] = (t3) => e2.confirm()) }, { default: p(() => [d(c(e2.translate("confirm")), 1)]), _: 1 })], 2);
-}]]);
-export { w as default };
+  },
+  components: {},
+  emits: ["confirm", "clear"],
+  setup(props, { emit }) {
+    const canvas = ref(null);
+    const wrap = ref(null);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${props.customClass}`]: props.customClass
+      };
+    });
+    const state = reactive({
+      canvasHeight: 0,
+      canvasWidth: 0,
+      ctx: null,
+      isSupportTouch: "ontouchstart" in window,
+      events: "ontouchstart" in window ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"]
+    });
+    const isCanvasSupported = () => {
+      let elem = document.createElement("canvas");
+      return !!(elem.getContext && elem.getContext("2d"));
+    };
+    const addEvent = () => {
+      canvas.value.addEventListener(state.events[0], startEventHandler, false);
+    };
+    const startEventHandler = (event) => {
+      event.preventDefault();
+      state.ctx.beginPath();
+      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.strokeStyle = props.strokeStyle;
+      canvas.value.addEventListener(state.events[1], moveEventHandler, false);
+      canvas.value.addEventListener(state.events[2], endEventHandler, false);
+      canvas.value.addEventListener(state.events[3], leaveEventHandler, false);
+    };
+    const moveEventHandler = (event) => {
+      event.preventDefault();
+      let evt = state.isSupportTouch ? event.touches[0] : event;
+      let coverPos = canvas.value.getBoundingClientRect();
+      let mouseX = evt.clientX - coverPos.left;
+      let mouseY = evt.clientY - coverPos.top;
+      state.ctx.lineTo(mouseX, mouseY);
+      state.ctx.stroke();
+    };
+    const endEventHandler = (event) => {
+      event.preventDefault();
+      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
+      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
+    };
+    const leaveEventHandler = (event) => {
+      event.preventDefault();
+      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
+      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
+    };
+    const clear = () => {
+      canvas.value.addEventListener(state.events[2], endEventHandler, false);
+      state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
+      state.ctx.closePath();
+      emit("clear");
+    };
+    const confirm = () => {
+      onSave(canvas.value);
+    };
+    const onSave = (canvas2) => {
+      let dataurl;
+      switch (props.type) {
+        case "png":
+          dataurl = canvas2.toDataURL("image/png");
+          break;
+        case "jpg":
+          dataurl = canvas2.toDataURL("image/jpeg", 0.8);
+          break;
+      }
+      clear();
+      emit("confirm", canvas2, dataurl);
+    };
+    onMounted(() => {
+      if (isCanvasSupported()) {
+        state.ctx = canvas.value.getContext("2d");
+        state.canvasWidth = wrap.value.offsetWidth;
+        state.canvasHeight = wrap.value.offsetHeight;
+        addEvent();
+      }
+    });
+    return { ...toRefs(state), canvas, wrap, isCanvasSupported, confirm, clear, classes, translate };
+  }
+});
+const _hoisted_1 = {
+  class: "nut-signature-inner",
+  ref: "wrap"
+};
+const _hoisted_2 = ["height", "width"];
+const _hoisted_3 = {
+  key: 1,
+  class: "nut-signature-unsopport"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_button = resolveComponent("nut-button");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      (() => _ctx.isCanvasSupported()) ? (openBlock(), createElementBlock("canvas", {
+        key: 0,
+        ref: "canvas",
+        height: _ctx.canvasHeight,
+        width: _ctx.canvasWidth
+      }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(_ctx.unSupportTpl || _ctx.translate("unSupportTpl")), 1))
+    ], 512),
+    createVNode(_component_nut_button, {
+      class: "nut-signature-btn",
+      type: "default",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clear())
+    }, {
+      default: withCtx(() => [
+        createTextVNode(toDisplayString(_ctx.translate("reSign")), 1)
+      ]),
+      _: 1
+    }),
+    createVNode(_component_nut_button, {
+      class: "nut-signature-btn",
+      type: "primary",
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirm())
+    }, {
+      default: withCtx(() => [
+        createTextVNode(toDisplayString(_ctx.translate("confirm")), 1)
+      ]),
+      _: 1
+    })
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };