@web-utils/component 2.0.13 → 2.2.0

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

@@ -1,292 +0,0 @@
-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", {
-    staticClass: "sign-panel flex-column"
-  }, [_c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.disabled && _vm.edit,
-      expression: "!disabled && edit"
-    }],
-    staticClass: "sign-edit"
-  }, [_c("div", {
-    staticClass: "sign-draw-area",
-    style: {
-      width: `${_vm.width + 2}px`,
-      height: `${_vm.height + 2}px`
-    }
-  }, [_c("div", {
-    staticClass: "sign-watermark",
-    style: {
-      fontSize: `${_vm.fontSize}px`
-    }
-  }, [_vm._v(" " + _vm._s(_vm.text) + " ")]), _c("canvas", {
-    ref: "canvas",
-    staticClass: "sign-canvas",
-    attrs: {
-      "width": _vm.width,
-      "height": _vm.height
-    },
-    on: {
-      "touchstart": function($event) {
-        $event.stopPropagation();
-        return _vm.touchstart.apply(null, arguments);
-      },
-      "touchmove": function($event) {
-        $event.stopPropagation();
-        return _vm.touchmove.apply(null, arguments);
-      },
-      "mousedown": function($event) {
-        $event.stopPropagation();
-        return _vm.down.apply(null, arguments);
-      },
-      "touchend": function($event) {
-        $event.stopPropagation();
-        return _vm.touchend.apply(null, arguments);
-      },
-      "mouseup": function($event) {
-        $event.stopPropagation();
-        return _vm.up.apply(null, arguments);
-      }
-    }
-  }, [_vm._v("当前浏览器不支持手写签名 ")])]), _c("div", {
-    staticClass: "sign-tool-bar"
-  }, [_c("div", {
-    staticClass: "sign-button flex-item",
-    staticStyle: {
-      "color": "red"
-    },
-    on: {
-      "click": _vm.clear
-    }
-  }, [_c("i", {
-    staticClass: "fa fa-trash"
-  }), _vm._v(" 清除 ")]), _c("div", {
-    staticClass: "sign-button flex-item",
-    staticStyle: {
-      "color": "red"
-    },
-    on: {
-      "click": _vm.cancel
-    }
-  }, [_c("i", {
-    staticClass: "fa fa-close"
-  }), _vm._v(" 取消 ")]), _c("div", {
-    staticClass: "sign-button flex-item",
-    staticStyle: {
-      "color": "orange"
-    },
-    on: {
-      "click": _vm.rollback
-    }
-  }, [_c("i", {
-    staticClass: "fa fa-repeat"
-  }), _vm._v(" 撤销 ")]), _c("div", {
-    staticClass: "sign-button flex-item",
-    staticStyle: {
-      "color": "green"
-    },
-    on: {
-      "click": _vm.save
-    }
-  }, [_c("i", {
-    staticClass: "fa fa-check"
-  }), _vm._v(" 确定 ")])])]), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.disabled || !_vm.edit,
-      expression: "disabled || !edit"
-    }],
-    staticClass: "sign-view",
-    style: {
-      cursor: _vm.disabled ? "not-allowed" : "pointer"
-    },
-    on: {
-      "click": _vm.showSign
-    }
-  }, [_vm.value ? _c("img", {
-    staticClass: "sign-image",
-    attrs: {
-      "src": _vm.value,
-      "alt": "签名"
-    }
-  }) : _vm._e(), !_vm.value ? _c("p", {
-    staticClass: "sign-tips",
-    style: {
-      color: !_vm.value && _vm.disabled ? "red" : ""
-    }
-  }, [_vm._v(" " + _vm._s(_vm.disabled ? "未签名" : "点击进行签名") + " ")]) : _vm._e(), !_vm.disabled ? _c("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 = {
-  name: "SignPanel",
-  props: {
-    width: {
-      type: Number,
-      default: 400
-    },
-    height: {
-      type: Number,
-      default: 150
-    },
-    lineWidth: {
-      type: Number,
-      default: 1
-    },
-    text: {
-      type: String,
-      default: "签名区"
-    },
-    fontSize: {
-      type: Number,
-      default: 20
-    },
-    value: {
-      type: String
-    },
-    disabled: Boolean
-  },
-  data() {
-    return {
-      edit: false
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.stack = [];
-      this.canvas = this.$refs.canvas;
-      if (!this.canvas.getContext) {
-        alert("当前浏览器不支持手写签名");
-        return;
-      }
-      this.canvasInit();
-    },
-    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;
-      }
-    },
-    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;
-    },
-    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 黑体`;
-      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);
-    },
-    move(e) {
-      this.moveLine(e.clientX, e.clientY, e);
-    },
-    up() {
-      if (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);
-    },
-    touchmove(e) {
-      this.moveLine(e.touches[0].clientX, e.touches[0].clientY, e);
-    },
-    startLine(x, y) {
-      this.ctx.beginPath();
-      x -= this.start;
-      y -= this.end;
-      this.ctx.moveTo(x, y);
-    },
-    moveLine(x, y, event) {
-      event && event.preventDefault();
-      x -= this.start;
-      y -= this.end;
-      this.ctx.lineTo(x, y);
-      this.ctx.stroke();
-    },
-    clear() {
-      this.ctx.clearRect(0, 0, this.width, this.height);
-    },
-    cancel() {
-      this.clear();
-      this.edit = false;
-    },
-    touchend() {
-      this.record();
-    },
-    record() {
-      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);
-    },
-    showSign() {
-      if (!this.disabled) {
-        this.edit = true;
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const SignPanel = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  SignPanel as default
-};

package/dist/components/sign-panel/style.css

@@ -1,97 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.sign-panel {
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  background: #fff;
-  user-select: none;
-}
-.sign-panel .sign-canvas {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 155, 0);
-  border: 1px solid #ccc;
-}
-.sign-panel .sign-tool-bar {
-  display: flex;
-  width: 100%;
-  border: 1px solid #ccc;
-  border-top: none;
-}
-.sign-panel .sign-tips {
-  user-select: none;
-  pointer-events: none;
-}
-.sign-panel .sign-button {
-  padding: 6px;
-  line-height: 1.6;
-  text-align: center;
-  background-color: #ebeef5;
-  cursor: pointer;
-  user-select: none;
-}
-.sign-panel .sign-button:hover {
-  color: #1989fa;
-  background-color: #d0d4de;
-}
-.sign-panel .sign-button:nth-child(n) {
-  border-right: 1px solid #ccc;
-}
-.sign-panel .sign-button:last-child {
-  border: none !important;
-}
-.sign-panel .sign-watermark {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #eee;
-}
-.sign-panel .sign-view {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 212px;
-  height: 80px;
-  background-color: #fff;
-  border: 1px solid #eee;
-}
-.sign-panel .sign-edit-icon {
-  position: absolute;
-  right: 4px;
-  bottom: 4px;
-}
-.sign-panel .sign-image {
-  display: inline-block;
-  min-width: 160px;
-  height: 80px;
-}
-.sign-panel .sign-edit {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 100%;
-  background-color: #fff;
-}
-.sign-panel .sign-draw-area {
-  position: relative;
-  max-width: 100%;
-}

package/dist/components/split-pane/index.js

@@ -1,270 +0,0 @@
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-function oneOf(value, validList) {
-  for (let i = 0; i < validList.length; i++) {
-    if (value === validList[i]) {
-      return true;
-    }
-  }
-  return false;
-}
-const on = function() {
-  if (document.addEventListener) {
-    return function(element, event, handler) {
-      if (element && event && handler) {
-        element.addEventListener(event, handler, false);
-      }
-    };
-  } else {
-    return function(element, event, handler) {
-      if (element && event && handler) {
-        element.attachEvent(`on${event}`, handler);
-      }
-    };
-  }
-}();
-const off = function() {
-  if (document.removeEventListener) {
-    return function(element, event, handler) {
-      if (element && event) {
-        element.removeEventListener(event, handler, false);
-      }
-    };
-  } else {
-    return function(element, event, handler) {
-      if (element && event) {
-        element.detachEvent(`on${event}`, handler);
-      }
-    };
-  }
-}();
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    ref: "outerWrapper",
-    class: _vm.wrapperClasses
-  }, [_vm.isHorizontal ? _c("div", {
-    class: `${_vm.prefix}-horizontal`
-  }, [!_vm.hideLeft ? [_c("div", {
-    class: [`${_vm.prefix}-pane`, "left-pane"],
-    style: {
-      right: `${_vm.anotherOffset}%`
-    }
-  }, [_vm._t("left")], 2), _c("div", {
-    class: `${_vm.prefix}-trigger-con`,
-    style: {
-      left: `calc(${_vm.offset}% + ${_vm.triggerSize / 2}px)`,
-      width: `${_vm.triggerSize}px`
-    },
-    on: {
-      "mousedown": _vm.handleMousedown
-    }
-  }, [_vm._t("trigger", function() {
-    return [_c("Trigger", {
-      attrs: {
-        "mode": "vertical"
-      }
-    })];
-  })], 2), _c("div", {
-    class: [`${_vm.prefix}-pane`, "right-pane"],
-    style: {
-      left: `calc(${_vm.offset}% + ${_vm.triggerSize}px)`
-    }
-  }, [_vm._t("right")], 2)] : _c("div", {
-    class: [`${_vm.prefix}-pane`, "right-pane"],
-    staticStyle: {
-      "left": "0"
-    }
-  }, [_vm._t("right")], 2)], 2) : _c("div", {
-    class: `${_vm.prefix}-vertical`
-  }, [_c("div", {
-    class: [`${_vm.prefix}-pane`, "top-pane"],
-    style: {
-      bottom: `${_vm.anotherOffset}%`
-    }
-  }, [_vm._t("top")], 2), _c("div", {
-    class: `${_vm.prefix}-trigger-con`,
-    style: {
-      top: `calc(${_vm.offset}% + ${_vm.triggerSize / 2}px)`,
-      height: `${_vm.triggerSize}px`
-    },
-    on: {
-      "mousedown": _vm.handleMousedown
-    }
-  }, [_vm._t("trigger", function() {
-    return [_c("Trigger", {
-      attrs: {
-        "mode": "horizontal"
-      }
-    })];
-  })], 2), _c("div", {
-    class: [`${_vm.prefix}-pane`, "bottom-pane"],
-    style: {
-      top: `calc(${_vm.offset}% + ${_vm.triggerSize}px)`
-    }
-  }, [_vm._t("bottom")], 2)]), _c("ResizeObserver", {
-    on: {
-      "notify": _vm.resetOffset
-    }
-  })], 1);
-};
-var staticRenderFns = [];
-const SplitPane_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "SplitPane",
-  props: {
-    value: {
-      type: [Number, String],
-      default: 0.5
-    },
-    mode: {
-      validator(value) {
-        return oneOf(value, ["horizontal", "vertical"]);
-      },
-      default: "horizontal"
-    },
-    hideLeft: Boolean,
-    triggerSize: {
-      type: Number,
-      default: 6
-    },
-    min: {
-      type: [Number, String],
-      default: "40px"
-    },
-    max: {
-      type: [Number, String],
-      default: "40px"
-    }
-  },
-  data() {
-    return {
-      prefix: "egd-split",
-      offset: 0,
-      oldOffset: 0,
-      isMoving: false
-    };
-  },
-  computed: {
-    wrapperClasses() {
-      return [`${this.prefix}-wrapper`, this.isMoving ? "no-select" : ""];
-    },
-    isHorizontal() {
-      return this.mode === "horizontal";
-    },
-    anotherOffset() {
-      return 100 - this.offset;
-    },
-    valueIsPx() {
-      return typeof this.value === "string";
-    },
-    offsetSize() {
-      return this.isHorizontal ? "offsetWidth" : "offsetHeight";
-    },
-    computedMin() {
-      return this.getComputedThresholdValue("min");
-    },
-    computedMax() {
-      return this.getComputedThresholdValue("max");
-    }
-  },
-  watch: {
-    value: "resetOffset"
-  },
-  async mounted() {
-    await this.$nextTick();
-    this.resetOffset();
-  },
-  methods: {
-    resetOffset() {
-      this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 1e4 / 100;
-    },
-    px2percent(numerator, denominator) {
-      return parseFloat(numerator) / parseFloat(denominator);
-    },
-    getComputedThresholdValue(type) {
-      const size = this.$refs.outerWrapper[this.offsetSize];
-      if (this.valueIsPx) {
-        return typeof this[type] === "string" ? this[type] : size * this[type];
-      } else {
-        return typeof this[type] === "string" ? this.px2percent(this[type], size) : this[type];
-      }
-    },
-    getMin(value1, value2) {
-      if (this.valueIsPx) {
-        return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
-      } else {
-        return Math.min(value1, value2);
-      }
-    },
-    getMax(value1, value2) {
-      if (this.valueIsPx) {
-        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
-      } else {
-        return Math.max(value1, value2);
-      }
-    },
-    getAnotherOffset(value) {
-      let res = 0;
-      if (this.valueIsPx) {
-        res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
-      } else {
-        res = 1 - value;
-      }
-      return res;
-    },
-    handleMove(e) {
-      const pageOffset = this.isHorizontal ? e.pageX : e.pageY;
-      const offset = pageOffset - this.initOffset;
-      const outerWidth = this.$refs.outerWrapper[this.offsetSize];
-      let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth);
-      const anotherValue = this.getAnotherOffset(value);
-      if (parseFloat(value) <= parseFloat(this.computedMin))
-        value = this.getMax(value, this.computedMin);
-      if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) {
-        value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
-      }
-      e.atMin = this.value === this.computedMin;
-      e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
-      this.$emit("input", value);
-      this.$emit("on-moving", e);
-    },
-    handleUp() {
-      this.isMoving = false;
-      off(window, "mousemove", this.handleMove);
-      off(window, "mouseup", this.handleUp);
-      this.$emit("on-move-end");
-    },
-    handleMousedown(e) {
-      this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
-      this.oldOffset = this.value;
-      this.isMoving = true;
-      on(window, "mousemove", this.handleMove);
-      on(window, "mouseup", this.handleUp);
-      this.$emit("on-move-start");
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const SplitPane = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  SplitPane as default
-};