@web-utils/component 1.2.4 → 1.2.6

package/dist/components/search-popover/index.js

@@ -1,2 +1,391 @@
-import{copy,isInContainer}from"@web-utils/core";import ClickOutside from"element-ui/lib/utils/clickoutside";import{n as normalizeComponent}from"../../chunks/6499de3a.js";var render=function(){var e=this,r=e.$createElement,t=e._self._c||r;return t("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopover,expression:"showPopover"},{name:"click-outside",rawName:"v-click-outside",value:e.hidePopover,expression:"hidePopover"}],staticClass:"search-popover"},[t("div",{staticStyle:{padding:"10px"}},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.keyword,expression:"keyword"}],ref:"searchInput",staticClass:"search-input",attrs:{placeholder:e.currentItem?e.currentItem.name:"\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22 ..."},domProps:{value:e.keyword},on:{input:function(o){o.target.composing||(e.keyword=o.target.value)}}})]),t("ul",{ref:"ul",staticStyle:{"list-style-type":"none",flex:"1",overflow:"auto"}},[e.filterList.length?e._l(e.filterList,function(o,s){return t("li",{key:o.name+s,staticClass:"search-li",attrs:{id:`item-${s}`},on:{mousemove:function(i){return e.mouseHoverItem(o,s)}}},[t("a",{class:["search-item",{active:e.currentIndex===s}],attrs:{target:o.url?"_blank":"",rel:"noopener noreferrer",href:o.url?o.url:"javascript:void(0)"},on:{click:function(i){return e.onItemClick(o)}}},[t("div",{staticClass:"search-icon"},[t("i",{class:o.icon||"el-icon-menu"})]),t("div",{staticStyle:{flex:"1","text-align":"left",padding:"0 10px","overflow-x":"hidden","box-sizing":"border-box"}},[t("p",{staticStyle:{"margin-bottom":"4px","font-size":"16px"}},[e._v(e._s(o.name))]),t("p",{staticClass:"url"},[e._v(e._s(o.url||o.path))])]),t("div",{staticClass:"search-icon search-action"},[t("svg",{staticClass:"action",attrs:{width:"20",height:"20",viewBox:"0 0 20 20"}},[t("g",{attrs:{stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"}},[t("path",{attrs:{d:"M18 3v4c0 2-2 4-4 4H2"}}),t("path",{attrs:{d:"M8 17l-6-6 6-6"}})])])])])])}):e.evalResult!==""?t("li",{staticClass:"search-li",on:{click:e.copyEvalResult,mousemove:function(o){return e.mouseHoverItem({},-1)}}},[t("a",{class:["search-item",{active:e.currentIndex===-1}],attrs:{rel:"noopener noreferrer",href:"javascript:void(0)"}},[e._m(0),t("div",{staticStyle:{flex:"1","text-align":"left",padding:"0 10px","overflow-x":"hidden","box-sizing":"border-box"}},[t("p",{staticStyle:{"margin-bottom":"4px","font-size":"16px"}},[e._v("Result: "+e._s(e.evalResult))]),t("p",{staticClass:"url"},[e._v("\u70B9\u51FB\u6216\u8FD9\u6309 Enter \u952E\u590D\u5236")])]),t("div",{staticClass:"search-icon search-action"},[t("svg",{staticClass:"action",attrs:{width:"20",height:"20",viewBox:"0 0 20 20"}},[t("g",{attrs:{stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"}},[t("path",{attrs:{d:"M18 3v4c0 2-2 4-4 4H2"}}),t("path",{attrs:{d:"M8 17l-6-6 6-6"}})])])])])]):t("li",{staticStyle:{height:"100%",display:"flex","align-items":"center","justify-content":"center",color:"#808080"}},[e._v(" Sorry,no result ! ")])],2),t("div",{staticClass:"footer-tips"},[t("span",{staticClass:"keyboard-key"},[t("svg",{attrs:{width:"15",height:"15"}},[t("g",{attrs:{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.2"}},[t("path",{attrs:{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}})])])]),t("span",{staticStyle:{"font-size":"12px","margin-right":"20px"}},[e._v("\u9009\u62E9")]),t("span",{staticClass:"keyboard-key"},[t("svg",{attrs:{width:"15",height:"15"}},[t("g",{attrs:{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.2"}},[t("path",{attrs:{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}})])])]),t("span",{staticClass:"keyboard-key"},[t("svg",{attrs:{width:"15",height:"15"}},[t("g",{attrs:{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.2"}},[t("path",{attrs:{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}})])])]),t("span",{staticStyle:{"font-size":"12px","margin-right":"20px"}},[e._v("\u5207\u6362")]),t("span",{staticClass:"keyboard-key"},[t("svg",{attrs:{width:"15",height:"15"}},[t("g",{attrs:{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.2"}},[t("path",{attrs:{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}})])])]),t("span",{staticStyle:{"font-size":"12px"}},[e._v("\u5173\u95ED")])])])},staticRenderFns=[function(){var e=this,r=e.$createElement,t=e._self._c||r;return t("div",{staticClass:"search-icon"},[t("i",{staticClass:"fa fa-table"})])}],SearchPopover_vue_vue_type_style_index_0_lang=(()=>`.search-popover{border-radius:4px;z-index:100;position:fixed;overflow:hidden;background-color:#f5f6f7;display:inline-flex;flex-direction:column;border:1px solid #1989fa;width:560px;height:500px;top:0;left:0;transform:translate3d(calc((100vw - 560px)/2),15%,0);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACZJREFUeNpi/PTpEwMY8PLyMsFZnz9/ZoKzgAzG////Q1hAABBgAFeiDto+NxIZAAAAAElFTkSuQmCC);background-repeat:repeat}.search-popover .footer-tips{padding:10px;text-align:left;border-top:1px solid #1989fa}.search-popover .keyboard-key{align-items:center;background:linear-gradient(-225deg,#d5dbe4,#f8f8f8);border-radius:2px;box-shadow:inset 0 -2px #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;display:inline-flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;width:20px}.search-popover .search-input{height:46px;border:1px solid #1989fa;appearance:none;border-radius:4px;outline:none;width:100%;box-sizing:border-box;padding:10px}.search-popover .search-li{padding:10px}.search-popover .search-icon{color:#969faf;flex-shrink:0;font-size:24px}.search-popover .search-item{box-shadow:0 1px 3px #d4d9e1;text-decoration:none;box-sizing:border-box;color:#000;padding:10px;display:flex;align-items:center;border-radius:4px;background-color:#fff;overflow-x:hidden}.search-popover .search-item .search-action{display:none}.search-popover .search-item .url{color:#969faf;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow-x:hidden}.search-popover .search-item.active{color:#fff;background-color:#1989fa}.search-popover .search-item.active .url{color:#fff}.search-popover .search-item.active .search-action{display:inline-block}.search-popover .search-item.active .search-icon{color:#fff}
-`)();const __vue2_script={name:"SearchPopover",directives:{ClickOutside},props:{services:{type:Array,default:()=>[]}},data(){return{showPopover:!1,keyword:"",currentIndex:0,last:0}},computed:{filterList(){return this.services.filter(e=>e.name.indexOf(this.keyword)>-1)},currentItem(){var e;return(e=this.filterList)==null?void 0:e[this.currentIndex]},evalResult(){try{return eval(this.keyword)}catch(e){return""}}},watch:{keyword(){this.currentIndex=0,!this.currentItem&&this.currentIndex!==-1&&(this.currentIndex=-1)},showPopover(e){e?document.body.style.overflow="hidden":document.body.style.overflow=""}},mounted(){window.addEventListener("keydown",this.keydown)},destroyed(){window.removeEventListener("keydown",this.keydown)},methods:{async onItemClick(e){e.path&&(this.hidePopover(),await this.$router.push(e.path))},copyEvalResult(){return copy(this.evalResult)},hidePopover(){this.showPopover=!1},displayPopover(){this.showPopover=!0},mouseHoverItem(e,r){this.currentIndex=r},async keydown(e){if(e.key==="Shift"){const r=Date.now()-this.last;r>0&&r<500?(this.showPopover=!0,await this.$nextTick(),this.$refs.searchInput.focus()):this.last=Date.now()}this.showPopover===!0&&(e.key==="Escape"&&this.hidePopover(),e.key==="Enter"&&(this.currentItem?this.currentItem.url?(window.open(this.currentItem.url,"_blank"),this.hidePopover()):this.currentItem.path&&await this.onItemClick(this.currentItem):this.copyEvalResult()),e.key==="ArrowUp"&&(this.currentIndex--,this.currentIndex<0&&(this.currentIndex=this.filterList.length-1),this.scrollIntoView(this.currentIndex)),e.key==="ArrowDown"&&(this.currentIndex++,this.currentIndex>=this.filterList.length&&(this.currentIndex=0),this.scrollIntoView(this.currentIndex)))},scrollIntoView(e){if(e===0){this.$refs.ul.scrollTop=0;return}if(e===this.filterList.length){this.$refs.ul.scrollTop=this.$refs.ul.scrollHeight;return}const r=this.$refs.ul.querySelector(`#item-${e}`);isInContainer(r,this.$refs.ul,{topOffset:-78,bottomOffset:78})||(this.$refs.ul.scrollTop=r.offsetTop-r.clientHeight+20)}}},__cssModules={};var __component__=normalizeComponent(__vue2_script,render,staticRenderFns,!1,__vue2_injectStyles,null,null,null);function __vue2_injectStyles(e){for(let r in __cssModules)this[r]=__cssModules[r]}var SearchPopover=function(){return __component__.exports}();export{SearchPopover as default};
+import { copy, isInContainer } from "@web-utils/core";
+import ClickOutside from "element-ui/lib/utils/clickoutside";
+import { n as normalizeComponent } from "../../chunks/6499de3a.js";
+var render = function() {
+  var t = this, r = t.$createElement, e = t._self._c || r;
+  return e("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: t.showPopover,
+      expression: "showPopover"
+    }, {
+      name: "click-outside",
+      rawName: "v-click-outside",
+      value: t.hidePopover,
+      expression: "hidePopover"
+    }],
+    staticClass: "search-popover"
+  }, [e("div", {
+    staticStyle: {
+      padding: "10px"
+    }
+  }, [e("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: t.keyword,
+      expression: "keyword"
+    }],
+    ref: "searchInput",
+    staticClass: "search-input",
+    attrs: {
+      placeholder: t.currentItem ? t.currentItem.name : "\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22 ..."
+    },
+    domProps: {
+      value: t.keyword
+    },
+    on: {
+      input: function(s) {
+        s.target.composing || (t.keyword = s.target.value);
+      }
+    }
+  })]), e("ul", {
+    ref: "ul",
+    staticStyle: {
+      "list-style-type": "none",
+      flex: "1",
+      overflow: "auto"
+    }
+  }, [t.filterList.length ? t._l(t.filterList, function(s, o) {
+    return e("li", {
+      key: s.name + o,
+      staticClass: "search-li",
+      attrs: {
+        id: `item-${o}`
+      },
+      on: {
+        mousemove: function(i) {
+          return t.mouseHoverItem(s, o);
+        }
+      }
+    }, [e("a", {
+      class: ["search-item", {
+        active: t.currentIndex === o
+      }],
+      attrs: {
+        target: s.url ? "_blank" : "",
+        rel: "noopener noreferrer",
+        href: s.url ? s.url : "javascript:void(0)"
+      },
+      on: {
+        click: function(i) {
+          return t.onItemClick(s);
+        }
+      }
+    }, [e("div", {
+      staticClass: "search-icon"
+    }, [e("i", {
+      class: s.icon || "el-icon-menu"
+    })]), e("div", {
+      staticStyle: {
+        flex: "1",
+        "text-align": "left",
+        padding: "0 10px",
+        "overflow-x": "hidden",
+        "box-sizing": "border-box"
+      }
+    }, [e("p", {
+      staticStyle: {
+        "margin-bottom": "4px",
+        "font-size": "16px"
+      }
+    }, [t._v(t._s(s.name))]), e("p", {
+      staticClass: "url"
+    }, [t._v(t._s(s.url || s.path))])]), e("div", {
+      staticClass: "search-icon search-action"
+    }, [e("svg", {
+      staticClass: "action",
+      attrs: {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20"
+      }
+    }, [e("g", {
+      attrs: {
+        stroke: "currentColor",
+        fill: "none",
+        "fill-rule": "evenodd",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }
+    }, [e("path", {
+      attrs: {
+        d: "M18 3v4c0 2-2 4-4 4H2"
+      }
+    }), e("path", {
+      attrs: {
+        d: "M8 17l-6-6 6-6"
+      }
+    })])])])])]);
+  }) : t.evalResult !== "" ? e("li", {
+    staticClass: "search-li",
+    on: {
+      click: t.copyEvalResult,
+      mousemove: function(s) {
+        return t.mouseHoverItem({}, -1);
+      }
+    }
+  }, [e("a", {
+    class: ["search-item", {
+      active: t.currentIndex === -1
+    }],
+    attrs: {
+      rel: "noopener noreferrer",
+      href: "javascript:void(0)"
+    }
+  }, [t._m(0), e("div", {
+    staticStyle: {
+      flex: "1",
+      "text-align": "left",
+      padding: "0 10px",
+      "overflow-x": "hidden",
+      "box-sizing": "border-box"
+    }
+  }, [e("p", {
+    staticStyle: {
+      "margin-bottom": "4px",
+      "font-size": "16px"
+    }
+  }, [t._v("Result: " + t._s(t.evalResult))]), e("p", {
+    staticClass: "url"
+  }, [t._v("\u70B9\u51FB\u6216\u8FD9\u6309 Enter \u952E\u590D\u5236")])]), e("div", {
+    staticClass: "search-icon search-action"
+  }, [e("svg", {
+    staticClass: "action",
+    attrs: {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20"
+    }
+  }, [e("g", {
+    attrs: {
+      stroke: "currentColor",
+      fill: "none",
+      "fill-rule": "evenodd",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M18 3v4c0 2-2 4-4 4H2"
+    }
+  }), e("path", {
+    attrs: {
+      d: "M8 17l-6-6 6-6"
+    }
+  })])])])])]) : e("li", {
+    staticStyle: {
+      height: "100%",
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "center",
+      color: "#808080"
+    }
+  }, [t._v(" Sorry,no result ! ")])], 2), e("div", {
+    staticClass: "footer-tips"
+  }, [e("span", {
+    staticClass: "keyboard-key"
+  }, [e("svg", {
+    attrs: {
+      width: "15",
+      height: "15"
+    }
+  }, [e("g", {
+    attrs: {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.2"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
+    }
+  })])])]), e("span", {
+    staticStyle: {
+      "font-size": "12px",
+      "margin-right": "20px"
+    }
+  }, [t._v("\u9009\u62E9")]), e("span", {
+    staticClass: "keyboard-key"
+  }, [e("svg", {
+    attrs: {
+      width: "15",
+      height: "15"
+    }
+  }, [e("g", {
+    attrs: {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.2"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3"
+    }
+  })])])]), e("span", {
+    staticClass: "keyboard-key"
+  }, [e("svg", {
+    attrs: {
+      width: "15",
+      height: "15"
+    }
+  }, [e("g", {
+    attrs: {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.2"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3"
+    }
+  })])])]), e("span", {
+    staticStyle: {
+      "font-size": "12px",
+      "margin-right": "20px"
+    }
+  }, [t._v("\u5207\u6362")]), e("span", {
+    staticClass: "keyboard-key"
+  }, [e("svg", {
+    attrs: {
+      width: "15",
+      height: "15"
+    }
+  }, [e("g", {
+    attrs: {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.2"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
+    }
+  })])])]), e("span", {
+    staticStyle: {
+      "font-size": "12px"
+    }
+  }, [t._v("\u5173\u95ED")])])]);
+}, staticRenderFns = [function() {
+  var t = this, r = t.$createElement, e = t._self._c || r;
+  return e("div", {
+    staticClass: "search-icon"
+  }, [e("i", {
+    staticClass: "fa fa-table"
+  })]);
+}];
+const SearchPopover_vue_vue_type_style_index_0_lang = "", __vue2_script = {
+  name: "SearchPopover",
+  directives: {
+    ClickOutside
+  },
+  props: {
+    services: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showPopover: !1,
+      keyword: "",
+      currentIndex: 0,
+      last: 0
+    };
+  },
+  computed: {
+    filterList() {
+      return this.services.filter((t) => t.name.indexOf(this.keyword) > -1);
+    },
+    currentItem() {
+      var t;
+      return (t = this.filterList) == null ? void 0 : t[this.currentIndex];
+    },
+    evalResult() {
+      try {
+        return eval(this.keyword);
+      } catch (t) {
+        return "";
+      }
+    }
+  },
+  watch: {
+    keyword() {
+      this.currentIndex = 0, !this.currentItem && this.currentIndex !== -1 && (this.currentIndex = -1);
+    },
+    showPopover(t) {
+      t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+    }
+  },
+  mounted() {
+    window.addEventListener("keydown", this.keydown);
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.keydown);
+  },
+  methods: {
+    async onItemClick(t) {
+      t.path && (this.hidePopover(), await this.$router.push(t.path));
+    },
+    copyEvalResult() {
+      return copy(this.evalResult);
+    },
+    hidePopover() {
+      this.showPopover = !1;
+    },
+    displayPopover() {
+      this.showPopover = !0;
+    },
+    mouseHoverItem(t, r) {
+      this.currentIndex = r;
+    },
+    async keydown(t) {
+      if (t.key === "Shift") {
+        const r = Date.now() - this.last;
+        r > 0 && r < 500 ? (this.showPopover = !0, await this.$nextTick(), this.$refs.searchInput.focus()) : this.last = Date.now();
+      }
+      this.showPopover === !0 && (t.key === "Escape" && this.hidePopover(), t.key === "Enter" && (this.currentItem ? this.currentItem.url ? (window.open(this.currentItem.url, "_blank"), this.hidePopover()) : this.currentItem.path && await this.onItemClick(this.currentItem) : this.copyEvalResult()), t.key === "ArrowUp" && (this.currentIndex--, this.currentIndex < 0 && (this.currentIndex = this.filterList.length - 1), this.scrollIntoView(this.currentIndex)), t.key === "ArrowDown" && (this.currentIndex++, this.currentIndex >= this.filterList.length && (this.currentIndex = 0), this.scrollIntoView(this.currentIndex)));
+    },
+    scrollIntoView(t) {
+      if (t === 0) {
+        this.$refs.ul.scrollTop = 0;
+        return;
+      }
+      if (t === this.filterList.length) {
+        this.$refs.ul.scrollTop = this.$refs.ul.scrollHeight;
+        return;
+      }
+      const r = this.$refs.ul.querySelector(`#item-${t}`);
+      isInContainer(r, this.$refs.ul, { topOffset: -78, bottomOffset: 78 }) || (this.$refs.ul.scrollTop = r.offsetTop - r.clientHeight + 20);
+    }
+  }
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  !1,
+  __vue2_injectStyles,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles(t) {
+  for (let r in __cssModules)
+    this[r] = __cssModules[r];
+}
+const SearchPopover = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+export {
+  SearchPopover as default
+};

package/dist/components/sign-panel/index.js

@@ -1 +1,242 @@
-import{n as a}from"../../chunks/6499de3a.js";var o=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"sign-panel flex-column"},[e("div",{directives:[{name:"show",rawName:"v-show",value:!t.disabled&&t.edit,expression:"!disabled && edit"}],staticClass:"sign-edit"},[e("div",{staticClass:"sign-draw-area",style:{width:`${t.width+2}px`,height:`${t.height+2}px`}},[e("div",{staticClass:"sign-watermark",style:{fontSize:`${t.fontSize}px`}},[t._v(" "+t._s(t.text)+" ")]),e("canvas",{ref:"canvas",staticClass:"sign-canvas",attrs:{width:t.width,height:t.height},on:{touchstart:function(s){return s.stopPropagation(),t.touchstart.apply(null,arguments)},touchmove:function(s){return s.stopPropagation(),t.touchmove.apply(null,arguments)},mousedown:function(s){return s.stopPropagation(),t.down.apply(null,arguments)},touchend:function(s){return s.stopPropagation(),t.touchend.apply(null,arguments)},mouseup:function(s){return s.stopPropagation(),t.up.apply(null,arguments)}}},[t._v("\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u624B\u5199\u7B7E\u540D ")])]),e("div",{staticClass:"sign-tool-bar"},[e("div",{staticClass:"sign-button flex-item",staticStyle:{color:"red"},on:{click:t.clear}},[e("i",{staticClass:"fa fa-trash"}),t._v(" \u6E05\u9664 ")]),e("div",{staticClass:"sign-button flex-item",staticStyle:{color:"red"},on:{click:t.cancel}},[e("i",{staticClass:"fa fa-close"}),t._v(" \u53D6\u6D88 ")]),e("div",{staticClass:"sign-button flex-item",staticStyle:{color:"orange"},on:{click:t.rollback}},[e("i",{staticClass:"fa fa-repeat"}),t._v(" \u64A4\u9500 ")]),e("div",{staticClass:"sign-button flex-item",staticStyle:{color:"green"},on:{click:t.save}},[e("i",{staticClass:"fa fa-check"}),t._v(" \u786E\u5B9A ")])])]),e("div",{directives:[{name:"show",rawName:"v-show",value:t.disabled||!t.edit,expression:"disabled || !edit"}],staticClass:"sign-view",style:{cursor:t.disabled?"not-allowed":"pointer"},on:{click:t.showSign}},[t.value?e("img",{staticClass:"sign-image",attrs:{src:t.value,alt:"\u7B7E\u540D"}}):t._e(),t.value?t._e():e("p",{staticClass:"sign-tips",style:{color:!t.value&&t.disabled?"red":""}},[t._v(" "+t._s(t.disabled?"\u672A\u7B7E\u540D":"\u70B9\u51FB\u8FDB\u884C\u7B7E\u540D")+" ")]),t.disabled?t._e():e("i",{staticClass:"el-icon-edit-outline sign-edit-icon"})])])},l=[];const c={name:"SignPanel",props:{width:{type:Number,default:400},height:{type:Number,default:150},lineWidth:{type:Number,default:1},text:{type:String,default:"\u7B7E\u540D\u533A"},fontSize:{type:Number,default:20},value:{type:String},disabled:Boolean},data(){return{edit:!1}},mounted(){this.init()},methods:{init(){if(this.stack=[],this.canvas=this.$refs.canvas,!this.canvas.getContext){alert("\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u624B\u5199\u7B7E\u540D");return}this.canvasInit()},rollback(){if(this.stack.length>0){const t=this.stack[this.stack.length-1];this.ctx.putImageData(t,0,0),this.stack.length=this.stack.length-1}},position(){this.restorePoint=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);const t=this.canvas.getBoundingClientRect();this.start=t.left,this.end=t.top},canvasInit(){this.ctx=this.canvas.getContext("2d"),this.ctx.lineCap="round",this.ctx.lineWidth=this.lineWidth,this.ctx.clearRect(0,0,this.width,this.height),this.blank=this.canvas.toDataURL("image/png")},drawWaterMark(){this.ctx.font=`${this.fontSize}px bold \u9ED1\u4F53`,this.ctx.fillStyle="#eee",this.ctx.textAlign="center",this.ctx.shadowBlur=1,this.ctx.textBaseline="middle",this.ctx.fillText(this.text,this.width/2,this.height/2)},down(t){this.position(),this.startLine(t.clientX,t.clientY,t),this.target=t.target,this.target.addEventListener("mousemove",this.move),window.addEventListener("mouseup",this.up)},move(t){this.moveLine(t.clientX,t.clientY,t)},up(){this.target&&this.target.removeEventListener("mousemove",this.move),window.removeEventListener("mouseup",this.up),this.record()},touchstart(t){this.position(),this.startLine(t.changedTouches[0].clientX,t.changedTouches[0].clientY,t)},touchmove(t){this.moveLine(t.touches[0].clientX,t.touches[0].clientY,t)},startLine(t,i){this.ctx.beginPath(),t-=this.start,i-=this.end,this.ctx.moveTo(t,i)},moveLine(t,i,e){e&&e.preventDefault(),t-=this.start,i-=this.end,this.ctx.lineTo(t,i),this.ctx.stroke()},clear(){this.ctx.clearRect(0,0,this.width,this.height)},cancel(){this.clear(),this.edit=!1},touchend(){this.record()},record(){this.stack.push(this.restorePoint)},save(){const t=this.canvas.toDataURL("image/png");this.blank===t?this.$emit("input",""):this.$emit("input",t),this.edit=!1,this.stack.length=0,this.ctx.clearRect(0,0,this.width,this.height)},showSign(){this.disabled||(this.edit=!0)}}},n={};var r=a(c,o,l,!1,h,null,null,null);function h(t){for(let i in n)this[i]=n[i]}var d=function(){return r.exports}();export{d as default};
+import { n } from "../../chunks/6499de3a.js";
+var o = function() {
+  var t = this, e = t.$createElement, i = t._self._c || e;
+  return i("div", {
+    staticClass: "sign-panel flex-column"
+  }, [i("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !t.disabled && t.edit,
+      expression: "!disabled && edit"
+    }],
+    staticClass: "sign-edit"
+  }, [i("div", {
+    staticClass: "sign-draw-area",
+    style: {
+      width: `${t.width + 2}px`,
+      height: `${t.height + 2}px`
+    }
+  }, [i("div", {
+    staticClass: "sign-watermark",
+    style: {
+      fontSize: `${t.fontSize}px`
+    }
+  }, [t._v(" " + t._s(t.text) + " ")]), i("canvas", {
+    ref: "canvas",
+    staticClass: "sign-canvas",
+    attrs: {
+      width: t.width,
+      height: t.height
+    },
+    on: {
+      touchstart: function(s) {
+        return s.stopPropagation(), t.touchstart.apply(null, arguments);
+      },
+      touchmove: function(s) {
+        return s.stopPropagation(), t.touchmove.apply(null, arguments);
+      },
+      mousedown: function(s) {
+        return s.stopPropagation(), t.down.apply(null, arguments);
+      },
+      touchend: function(s) {
+        return s.stopPropagation(), t.touchend.apply(null, arguments);
+      },
+      mouseup: function(s) {
+        return s.stopPropagation(), t.up.apply(null, arguments);
+      }
+    }
+  }, [t._v("\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u624B\u5199\u7B7E\u540D ")])]), i("div", {
+    staticClass: "sign-tool-bar"
+  }, [i("div", {
+    staticClass: "sign-button flex-item",
+    staticStyle: {
+      color: "red"
+    },
+    on: {
+      click: t.clear
+    }
+  }, [i("i", {
+    staticClass: "fa fa-trash"
+  }), t._v(" \u6E05\u9664 ")]), i("div", {
+    staticClass: "sign-button flex-item",
+    staticStyle: {
+      color: "red"
+    },
+    on: {
+      click: t.cancel
+    }
+  }, [i("i", {
+    staticClass: "fa fa-close"
+  }), t._v(" \u53D6\u6D88 ")]), i("div", {
+    staticClass: "sign-button flex-item",
+    staticStyle: {
+      color: "orange"
+    },
+    on: {
+      click: t.rollback
+    }
+  }, [i("i", {
+    staticClass: "fa fa-repeat"
+  }), t._v(" \u64A4\u9500 ")]), i("div", {
+    staticClass: "sign-button flex-item",
+    staticStyle: {
+      color: "green"
+    },
+    on: {
+      click: t.save
+    }
+  }, [i("i", {
+    staticClass: "fa fa-check"
+  }), t._v(" \u786E\u5B9A ")])])]), i("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: t.disabled || !t.edit,
+      expression: "disabled || !edit"
+    }],
+    staticClass: "sign-view",
+    style: {
+      cursor: t.disabled ? "not-allowed" : "pointer"
+    },
+    on: {
+      click: t.showSign
+    }
+  }, [t.value ? i("img", {
+    staticClass: "sign-image",
+    attrs: {
+      src: t.value,
+      alt: "\u7B7E\u540D"
+    }
+  }) : t._e(), t.value ? t._e() : i("p", {
+    staticClass: "sign-tips",
+    style: {
+      color: !t.value && t.disabled ? "red" : ""
+    }
+  }, [t._v(" " + t._s(t.disabled ? "\u672A\u7B7E\u540D" : "\u70B9\u51FB\u8FDB\u884C\u7B7E\u540D") + " ")]), t.disabled ? t._e() : i("i", {
+    staticClass: "el-icon-edit-outline sign-edit-icon"
+  })])]);
+}, l = [];
+const c = {
+  name: "SignPanel",
+  props: {
+    width: {
+      type: Number,
+      default: 400
+    },
+    height: {
+      type: Number,
+      default: 150
+    },
+    lineWidth: {
+      type: Number,
+      default: 1
+    },
+    text: {
+      type: String,
+      default: "\u7B7E\u540D\u533A"
+    },
+    fontSize: {
+      type: Number,
+      default: 20
+    },
+    value: {
+      type: String
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {
+      edit: !1
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      if (this.stack = [], this.canvas = this.$refs.canvas, !this.canvas.getContext) {
+        alert("\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u624B\u5199\u7B7E\u540D");
+        return;
+      }
+      this.canvasInit();
+    },
+    rollback() {
+      if (this.stack.length > 0) {
+        const t = this.stack[this.stack.length - 1];
+        this.ctx.putImageData(t, 0, 0), this.stack.length = this.stack.length - 1;
+      }
+    },
+    position() {
+      this.restorePoint = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      const t = this.canvas.getBoundingClientRect();
+      this.start = t.left, this.end = t.top;
+    },
+    canvasInit() {
+      this.ctx = this.canvas.getContext("2d"), this.ctx.lineCap = "round", this.ctx.lineWidth = this.lineWidth, this.ctx.clearRect(0, 0, this.width, this.height), this.blank = this.canvas.toDataURL("image/png");
+    },
+    drawWaterMark() {
+      this.ctx.font = `${this.fontSize}px bold \u9ED1\u4F53`, this.ctx.fillStyle = "#eee", this.ctx.textAlign = "center", this.ctx.shadowBlur = 1, this.ctx.textBaseline = "middle", this.ctx.fillText(this.text, this.width / 2, this.height / 2);
+    },
+    down(t) {
+      this.position(), this.startLine(t.clientX, t.clientY, t), this.target = t.target, this.target.addEventListener("mousemove", this.move), window.addEventListener("mouseup", this.up);
+    },
+    move(t) {
+      this.moveLine(t.clientX, t.clientY, t);
+    },
+    up() {
+      this.target && this.target.removeEventListener("mousemove", this.move), window.removeEventListener("mouseup", this.up), this.record();
+    },
+    touchstart(t) {
+      this.position(), this.startLine(t.changedTouches[0].clientX, t.changedTouches[0].clientY, t);
+    },
+    touchmove(t) {
+      this.moveLine(t.touches[0].clientX, t.touches[0].clientY, t);
+    },
+    startLine(t, e) {
+      this.ctx.beginPath(), t -= this.start, e -= this.end, this.ctx.moveTo(t, e);
+    },
+    moveLine(t, e, i) {
+      i && i.preventDefault(), t -= this.start, e -= this.end, this.ctx.lineTo(t, e), this.ctx.stroke();
+    },
+    clear() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+    },
+    cancel() {
+      this.clear(), this.edit = !1;
+    },
+    touchend() {
+      this.record();
+    },
+    record() {
+      this.stack.push(this.restorePoint);
+    },
+    save() {
+      const t = this.canvas.toDataURL("image/png");
+      this.blank === t ? this.$emit("input", "") : this.$emit("input", t), this.edit = !1, this.stack.length = 0, this.ctx.clearRect(0, 0, this.width, this.height);
+    },
+    showSign() {
+      this.disabled || (this.edit = !0);
+    }
+  }
+}, a = {};
+var h = /* @__PURE__ */ n(
+  c,
+  o,
+  l,
+  !1,
+  r,
+  null,
+  null,
+  null
+);
+function r(t) {
+  for (let e in a)
+    this[e] = a[e];
+}
+const u = /* @__PURE__ */ function() {
+  return h.exports;
+}();
+export {
+  u as default
+};