@web-utils/component 2.0.13 → 2.7.0

package/dist/components/search-popover/style.css

@@ -1,93 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.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 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
-  display: inline-flex;
-  height: 18px;
-  justify-content: center;
-  margin-right: 0.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 0 #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;
-}
+.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}

package/dist/components/sign/index.js

@@ -0,0 +1,128 @@
+import { s as g } from "../../chunks/util.5053d54e.js";
+import { n as p } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var m = function() {
+  var e = this, a = e.$createElement, n = e._self._c || a;
+  return n("div", {
+    staticClass: "avue-sige"
+  }, [n("canvas", {
+    ref: "canvas",
+    staticClass: "avue-sige__canvas",
+    attrs: {
+      width: e.width,
+      height: e.height
+    }
+  })]);
+}, x = [];
+function _(e, a, n, o, t, l) {
+  e.save(), e.fillStyle = t, e.translate(a, n), e.rotate(Math.PI + l), e.beginPath();
+  for (var i = Math.sin(0), v = Math.cos(0), c = Math.PI / 5 * 4, h = 0; h < 5; h++) {
+    var i = Math.sin(h * c), v = Math.cos(h * c);
+    e.lineTo(i * o, v * o);
+  }
+  e.closePath(), e.stroke(), e.fill(), e.restore();
+}
+const w = {
+  name: "Sign",
+  props: {
+    width: {
+      type: Number,
+      default: 600
+    },
+    height: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      disabled: !1,
+      linex: [],
+      liney: [],
+      linen: [],
+      canvas: {},
+      context: {}
+    };
+  },
+  computed: {
+    styleName() {
+      return {
+        width: g(this.width),
+        height: g(this.height)
+      };
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    getStar(e, a, n) {
+      var o = this.canvas, t = this.context, l = o.width / 2, i = o.height / 2;
+      t.lineWidth = 7, t.strokeStyle = "#f00", t.beginPath(), t.arc(l, i, 110, 0, Math.PI * 2), t.stroke(), _(t, l, i, 20, "#f00", 0), t.font = "18px 黑体", t.textBaseline = "middle", t.textAlign = "center", t.lineWidth = 1, t.strokeStyle = "#f00", t.strokeText(e, l, i + 50), t.font = "14px 黑体", t.textBaseline = "middle", t.textAlign = "center", t.lineWidth = 1, t.strokeStyle = "#f00", t.strokeText(n, l, i + 80), t.translate(l, i), t.font = "22px 黑体";
+      for (var v = a.length, c = 4 * Math.PI / (3 * (v - 1)), h = a.split(""), r, s = 0; s < v; s++)
+        r = h[s], s == 0 ? t.rotate(5 * Math.PI / 6) : t.rotate(c), t.save(), t.translate(90, 0), t.rotate(Math.PI / 2), t.strokeText(r, 0, 0), t.restore(), t.save();
+      this.disabled = !0;
+    },
+    submit(e, a) {
+      return e || (e = this.width), a || (a = this.height), this.canvas.toDataURL("i/png");
+    },
+    clear() {
+      this.linex = new Array(), this.liney = new Array(), this.linen = new Array(), this.disabled = !1, this.canvas.width = this.canvas.width;
+    },
+    init() {
+      this.canvas = this.$refs.canvas;
+      var e = this.canvas, a = this;
+      typeof document.ontouchstart < "u" ? (e.addEventListener("touchmove", v, !1), e.addEventListener("touchstart", c, !1), e.addEventListener("touchend", h, !1)) : (e.addEventListener("mousemove", v, !1), e.addEventListener("mousedown", c, !1), e.addEventListener("mouseup", h, !1), e.addEventListener("mouseleave", h, !1)), this.context = e.getContext("2d");
+      var n = this.context;
+      this.linex = new Array(), this.liney = new Array(), this.linen = new Array();
+      var o = 1, t = 30, l = 0;
+      function i(r, s) {
+        var u = r.getBoundingClientRect(), d, f;
+        return s.targetTouches ? (d = s.targetTouches[0].clientX, f = s.targetTouches[0].clientY) : (d = s.clientX, f = s.clientY), {
+          x: (d - u.left) * (r.width / u.width),
+          y: (f - u.top) * (r.height / u.height)
+        };
+      }
+      function v(r) {
+        if (!a.disabled) {
+          var s = i(e, r).x, u = i(e, r).y;
+          if (l == 1) {
+            a.linex.push(s), a.liney.push(u), a.linen.push(1), n.save(), n.translate(n.canvas.width / 2, n.canvas.height / 2), n.translate(-n.canvas.width / 2, -n.canvas.height / 2), n.beginPath(), n.lineWidth = 2;
+            for (var d = 1; d < a.linex.length; d++)
+              o = a.linex[d], t = a.liney[d], a.linen[d] == 0 ? n.moveTo(o, t) : n.lineTo(o, t);
+            n.shadowBlur = 10, n.stroke(), n.restore();
+          }
+          r.preventDefault();
+        }
+      }
+      function c(r) {
+        if (!a.disabled) {
+          var s = i(e, r).x, u = i(e, r).y;
+          l = 1, a.linex.push(s), a.liney.push(u), a.linen.push(0);
+        }
+      }
+      function h() {
+        a.disabled || (l = 0);
+      }
+    }
+  }
+}, y = {};
+var M = /* @__PURE__ */ p(
+  w,
+  m,
+  x,
+  !1,
+  b,
+  null,
+  null,
+  null
+);
+function b(e) {
+  for (let a in y)
+    this[a] = y[a];
+}
+const S = /* @__PURE__ */ function() {
+  return M.exports;
+}();
+export {
+  S as default
+};

package/dist/components/sign/style.css

@@ -0,0 +1 @@
+.avue-sign{padding:5px}.avue-sign__canvas{border:1px solid #ccc}

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

@@ -1,132 +1,123 @@
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
+import { n } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var o = function() {
+  var t = this, e = t.$createElement, i = t._self._c || e;
+  return i("div", {
     staticClass: "sign-panel flex-column"
-  }, [_c("div", {
+  }, [i("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !_vm.disabled && _vm.edit,
+      value: !t.disabled && t.edit,
       expression: "!disabled && edit"
     }],
     staticClass: "sign-edit"
-  }, [_c("div", {
+  }, [i("div", {
     staticClass: "sign-draw-area",
     style: {
-      width: `${_vm.width + 2}px`,
-      height: `${_vm.height + 2}px`
+      width: `${t.width + 2}px`,
+      height: `${t.height + 2}px`
     }
-  }, [_c("div", {
+  }, [i("div", {
     staticClass: "sign-watermark",
     style: {
-      fontSize: `${_vm.fontSize}px`
+      fontSize: `${t.fontSize}px`
     }
-  }, [_vm._v(" " + _vm._s(_vm.text) + " ")]), _c("canvas", {
+  }, [t._v(" " + t._s(t.text) + " ")]), i("canvas", {
     ref: "canvas",
     staticClass: "sign-canvas",
     attrs: {
-      "width": _vm.width,
-      "height": _vm.height
+      width: t.width,
+      height: t.height
     },
     on: {
-      "touchstart": function($event) {
-        $event.stopPropagation();
-        return _vm.touchstart.apply(null, arguments);
+      touchstart: function(s) {
+        return s.stopPropagation(), t.touchstart.apply(null, arguments);
       },
-      "touchmove": function($event) {
-        $event.stopPropagation();
-        return _vm.touchmove.apply(null, arguments);
+      touchmove: function(s) {
+        return s.stopPropagation(), t.touchmove.apply(null, arguments);
       },
-      "mousedown": function($event) {
-        $event.stopPropagation();
-        return _vm.down.apply(null, arguments);
+      mousedown: function(s) {
+        return s.stopPropagation(), t.down.apply(null, arguments);
       },
-      "touchend": function($event) {
-        $event.stopPropagation();
-        return _vm.touchend.apply(null, arguments);
+      touchend: function(s) {
+        return s.stopPropagation(), t.touchend.apply(null, arguments);
       },
-      "mouseup": function($event) {
-        $event.stopPropagation();
-        return _vm.up.apply(null, arguments);
+      mouseup: function(s) {
+        return s.stopPropagation(), t.up.apply(null, arguments);
       }
     }
-  }, [_vm._v("当前浏览器不支持手写签名 ")])]), _c("div", {
+  }, [t._v("当前浏览器不支持手写签名 ")])]), i("div", {
     staticClass: "sign-tool-bar"
-  }, [_c("div", {
+  }, [i("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      "color": "red"
+      color: "red"
     },
     on: {
-      "click": _vm.clear
+      click: t.clear
     }
-  }, [_c("i", {
+  }, [i("i", {
     staticClass: "fa fa-trash"
-  }), _vm._v(" 清除 ")]), _c("div", {
+  }), t._v(" 清除 ")]), i("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      "color": "red"
+      color: "red"
     },
     on: {
-      "click": _vm.cancel
+      click: t.cancel
     }
-  }, [_c("i", {
+  }, [i("i", {
     staticClass: "fa fa-close"
-  }), _vm._v(" 取消 ")]), _c("div", {
+  }), t._v(" 取消 ")]), i("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      "color": "orange"
+      color: "orange"
     },
     on: {
-      "click": _vm.rollback
+      click: t.rollback
     }
-  }, [_c("i", {
+  }, [i("i", {
     staticClass: "fa fa-repeat"
-  }), _vm._v(" 撤销 ")]), _c("div", {
+  }), t._v(" 撤销 ")]), i("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      "color": "green"
+      color: "green"
     },
     on: {
-      "click": _vm.save
+      click: t.save
     }
-  }, [_c("i", {
+  }, [i("i", {
     staticClass: "fa fa-check"
-  }), _vm._v(" 确定 ")])])]), _c("div", {
+  }), t._v(" 确定 ")])])]), i("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: _vm.disabled || !_vm.edit,
+      value: t.disabled || !t.edit,
       expression: "disabled || !edit"
     }],
     staticClass: "sign-view",
     style: {
-      cursor: _vm.disabled ? "not-allowed" : "pointer"
+      cursor: t.disabled ? "not-allowed" : "pointer"
     },
     on: {
-      "click": _vm.showSign
+      click: t.showSign
     }
-  }, [_vm.value ? _c("img", {
+  }, [t.value ? i("img", {
     staticClass: "sign-image",
     attrs: {
-      "src": _vm.value,
-      "alt": "签名"
+      src: t.value,
+      alt: "签名"
     }
-  }) : _vm._e(), !_vm.value ? _c("p", {
+  }) : t._e(), t.value ? t._e() : i("p", {
     staticClass: "sign-tips",
     style: {
-      color: !_vm.value && _vm.disabled ? "red" : ""
+      color: !t.value && t.disabled ? "red" : ""
     }
-  }, [_vm._v(" " + _vm._s(_vm.disabled ? "未签名" : "点击进行签名") + " ")]) : _vm._e(), !_vm.disabled ? _c("i", {
+  }, [t._v(" " + t._s(t.disabled ? "未签名" : "点击进行签名") + " ")]), t.disabled ? t._e() : i("i", {
     staticClass: "el-icon-edit-outline sign-edit-icon"
-  }) : _vm._e()])]);
-};
-var staticRenderFns = [];
-const SignPanel_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
+  })])]);
+}, l = [];
+const c = {
   name: "SignPanel",
   props: {
     width: {
@@ -156,17 +147,16 @@ const __vue2_script = {
   },
   data() {
     return {
-      edit: false
+      edit: !1
     };
   },
   mounted() {
     this.init();
   },
   methods: {
+    // 初始化
     init() {
-      this.stack = [];
-      this.canvas = this.$refs.canvas;
-      if (!this.canvas.getContext) {
+      if (this.stack = [], this.canvas = this.$refs.canvas, !this.canvas.getContext) {
         alert("当前浏览器不支持手写签名");
         return;
       }
@@ -174,75 +164,59 @@ const __vue2_script = {
     },
     rollback() {
       if (this.stack.length > 0) {
-        const restorePoint = this.stack[this.stack.length - 1];
-        this.ctx.putImageData(restorePoint, 0, 0);
-        this.stack.length = this.stack.length - 1;
+        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 rect = this.canvas.getBoundingClientRect();
-      this.start = rect.left;
-      this.end = rect.top;
+      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");
+      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 黑体`;
-      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);
+      this.ctx.font = `${this.fontSize}px bold 黑体`, 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(e) {
-      this.position();
-      this.startLine(e.clientX, e.clientY, e);
-      this.target = e.target;
-      this.target.addEventListener("mousemove", this.move);
-      window.addEventListener("mouseup", this.up);
+    // PC 端鼠标按下开始绘画
+    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(e) {
-      this.moveLine(e.clientX, e.clientY, e);
+    // PC 端鼠标按下开始绘画后，跟踪移动轨迹
+    move(t) {
+      this.moveLine(t.clientX, t.clientY, t);
     },
+    // PC 端鼠标松开结束绘画
     up() {
-      if (this.target) {
-        this.target.removeEventListener("mousemove", this.move);
-      }
-      window.removeEventListener("mouseup", this.up);
-      this.record();
+      this.target && this.target.removeEventListener("mousemove", this.move), window.removeEventListener("mouseup", this.up), this.record();
     },
-    touchstart(e) {
-      this.position();
-      this.startLine(e.changedTouches[0].clientX, e.changedTouches[0].clientY, e);
+    // 移动端触摸开始绘画
+    touchstart(t) {
+      this.position(), this.startLine(t.changedTouches[0].clientX, t.changedTouches[0].clientY, t);
     },
-    touchmove(e) {
-      this.moveLine(e.touches[0].clientX, e.touches[0].clientY, e);
+    // 移动端触摸开始绘画后，跟踪滑动轨迹
+    touchmove(t) {
+      this.moveLine(t.touches[0].clientX, t.touches[0].clientY, t);
     },
-    startLine(x, y) {
-      this.ctx.beginPath();
-      x -= this.start;
-      y -= this.end;
-      this.ctx.moveTo(x, y);
+    // 开始绘画
+    startLine(t, e) {
+      this.ctx.beginPath(), t -= this.start, e -= this.end, this.ctx.moveTo(t, e);
     },
-    moveLine(x, y, event) {
-      event && event.preventDefault();
-      x -= this.start;
-      y -= this.end;
-      this.ctx.lineTo(x, y);
-      this.ctx.stroke();
+    // 绘制移动轨迹
+    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 = false;
+      this.clear(), this.edit = !1;
     },
     touchend() {
       this.record();
@@ -251,42 +225,31 @@ const __vue2_script = {
       this.stack.push(this.restorePoint);
     },
     save() {
-      const dataURL = this.canvas.toDataURL("image/png");
-      if (this.blank === dataURL) {
-        this.$emit("input", "");
-      } else {
-        this.$emit("input", dataURL);
-      }
-      this.edit = false;
-      this.stack.length = 0;
-      this.ctx.clearRect(0, 0, this.width, this.height);
+      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() {
-      if (!this.disabled) {
-        this.edit = true;
-      }
+      this.disabled || (this.edit = !0);
     }
   }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
+}, a = {};
+var h = /* @__PURE__ */ n(
+  c,
+  o,
+  l,
+  !1,
+  r,
   null,
   null,
   null
 );
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+function r(t) {
+  for (let e in a)
+    this[e] = a[e];
 }
-const SignPanel = /* @__PURE__ */ function() {
-  return __component__.exports;
+const u = /* @__PURE__ */ function() {
+  return h.exports;
 }();
 export {
-  SignPanel as default
+  u as default
 };