@feedmepos/mf-payment 1.3.1 → 1.3.3

package/dist/vue-signature-pad.esm-IXPjf4fL.js

@@ -0,0 +1,460 @@
+import { defineComponent as D, h as P } from "vue";
+/*!
+ * Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
+ * (c) 2020 Szymon Nowak | Released under the MIT license
+ */
+class y {
+  constructor(t, e, i) {
+    this.x = t, this.y = e, this.time = i || Date.now();
+  }
+  distanceTo(t) {
+    return Math.sqrt(Math.pow(this.x - t.x, 2) + Math.pow(this.y - t.y, 2));
+  }
+  equals(t) {
+    return this.x === t.x && this.y === t.y && this.time === t.time;
+  }
+  velocityFrom(t) {
+    return this.time !== t.time ? this.distanceTo(t) / (this.time - t.time) : 0;
+  }
+}
+class x {
+  constructor(t, e, i, n, o, r) {
+    this.startPoint = t, this.control2 = e, this.control1 = i, this.endPoint = n, this.startWidth = o, this.endWidth = r;
+  }
+  static fromPoints(t, e) {
+    const i = this.calculateControlPoints(t[0], t[1], t[2]).c2, n = this.calculateControlPoints(t[1], t[2], t[3]).c1;
+    return new x(t[1], i, n, t[2], e.start, e.end);
+  }
+  static calculateControlPoints(t, e, i) {
+    const n = t.x - e.x, o = t.y - e.y, r = e.x - i.x, a = e.y - i.y, d = { x: (t.x + e.x) / 2, y: (t.y + e.y) / 2 }, h = { x: (e.x + i.x) / 2, y: (e.y + i.y) / 2 }, c = Math.sqrt(n * n + o * o), g = Math.sqrt(r * r + a * a), f = d.x - h.x, m = d.y - h.y, l = g / (c + g), u = { x: h.x + f * l, y: h.y + m * l }, v = e.x - u.x, p = e.y - u.y;
+    return {
+      c1: new y(d.x + v, d.y + p),
+      c2: new y(h.x + v, h.y + p)
+    };
+  }
+  length() {
+    let e = 0, i, n;
+    for (let o = 0; o <= 10; o += 1) {
+      const r = o / 10, a = this.point(r, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x), d = this.point(r, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+      if (o > 0) {
+        const h = a - i, c = d - n;
+        e += Math.sqrt(h * h + c * c);
+      }
+      i = a, n = d;
+    }
+    return e;
+  }
+  point(t, e, i, n, o) {
+    return e * (1 - t) * (1 - t) * (1 - t) + 3 * i * (1 - t) * (1 - t) * t + 3 * n * (1 - t) * t * t + o * t * t * t;
+  }
+}
+function S(s, t = 250) {
+  let e = 0, i = null, n, o, r;
+  const a = () => {
+    e = Date.now(), i = null, n = s.apply(o, r), i || (o = null, r = []);
+  };
+  return function(...h) {
+    const c = Date.now(), g = t - (c - e);
+    return o = this, r = h, g <= 0 || g > t ? (i && (clearTimeout(i), i = null), e = c, n = s.apply(o, r), i || (o = null, r = [])) : i || (i = window.setTimeout(a, g)), n;
+  };
+}
+class w {
+  constructor(t, e = {}) {
+    this.canvas = t, this.options = e, this._handleMouseDown = (i) => {
+      i.which === 1 && (this._mouseButtonDown = !0, this._strokeBegin(i));
+    }, this._handleMouseMove = (i) => {
+      this._mouseButtonDown && this._strokeMoveUpdate(i);
+    }, this._handleMouseUp = (i) => {
+      i.which === 1 && this._mouseButtonDown && (this._mouseButtonDown = !1, this._strokeEnd(i));
+    }, this._handleTouchStart = (i) => {
+      if (i.preventDefault(), i.targetTouches.length === 1) {
+        const n = i.changedTouches[0];
+        this._strokeBegin(n);
+      }
+    }, this._handleTouchMove = (i) => {
+      i.preventDefault();
+      const n = i.targetTouches[0];
+      this._strokeMoveUpdate(n);
+    }, this._handleTouchEnd = (i) => {
+      if (i.target === this.canvas) {
+        i.preventDefault();
+        const o = i.changedTouches[0];
+        this._strokeEnd(o);
+      }
+    }, this.velocityFilterWeight = e.velocityFilterWeight || 0.7, this.minWidth = e.minWidth || 0.5, this.maxWidth = e.maxWidth || 2.5, this.throttle = "throttle" in e ? e.throttle : 16, this.minDistance = "minDistance" in e ? e.minDistance : 5, this.dotSize = e.dotSize || function() {
+      return (this.minWidth + this.maxWidth) / 2;
+    }, this.penColor = e.penColor || "black", this.backgroundColor = e.backgroundColor || "rgba(0,0,0,0)", this.onBegin = e.onBegin, this.onEnd = e.onEnd, this._strokeMoveUpdate = this.throttle ? S(w.prototype._strokeUpdate, this.throttle) : w.prototype._strokeUpdate, this._ctx = t.getContext("2d"), this.clear(), this.on();
+  }
+  clear() {
+    const { _ctx: t, canvas: e } = this;
+    t.fillStyle = this.backgroundColor, t.clearRect(0, 0, e.width, e.height), t.fillRect(0, 0, e.width, e.height), this._data = [], this._reset(), this._isEmpty = !0;
+  }
+  fromDataURL(t, e = {}, i) {
+    const n = new Image(), o = e.ratio || window.devicePixelRatio || 1, r = e.width || this.canvas.width / o, a = e.height || this.canvas.height / o;
+    this._reset(), n.onload = () => {
+      this._ctx.drawImage(n, 0, 0, r, a), i && i();
+    }, n.onerror = (d) => {
+      i && i(d);
+    }, n.src = t, this._isEmpty = !1;
+  }
+  toDataURL(t = "image/png", e) {
+    switch (t) {
+      case "image/svg+xml":
+        return this._toSVG();
+      default:
+        return this.canvas.toDataURL(t, e);
+    }
+  }
+  on() {
+    this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", window.PointerEvent ? this._handlePointerEvents() : (this._handleMouseEvents(), "ontouchstart" in window && this._handleTouchEvents());
+  }
+  off() {
+    this.canvas.style.touchAction = "auto", this.canvas.style.msTouchAction = "auto", this.canvas.removeEventListener("pointerdown", this._handleMouseDown), this.canvas.removeEventListener("pointermove", this._handleMouseMove), document.removeEventListener("pointerup", this._handleMouseUp), this.canvas.removeEventListener("mousedown", this._handleMouseDown), this.canvas.removeEventListener("mousemove", this._handleMouseMove), document.removeEventListener("mouseup", this._handleMouseUp), this.canvas.removeEventListener("touchstart", this._handleTouchStart), this.canvas.removeEventListener("touchmove", this._handleTouchMove), this.canvas.removeEventListener("touchend", this._handleTouchEnd);
+  }
+  isEmpty() {
+    return this._isEmpty;
+  }
+  fromData(t) {
+    this.clear(), this._fromData(t, ({ color: e, curve: i }) => this._drawCurve({ color: e, curve: i }), ({ color: e, point: i }) => this._drawDot({ color: e, point: i })), this._data = t;
+  }
+  toData() {
+    return this._data;
+  }
+  _strokeBegin(t) {
+    const e = {
+      color: this.penColor,
+      points: []
+    };
+    typeof this.onBegin == "function" && this.onBegin(t), this._data.push(e), this._reset(), this._strokeUpdate(t);
+  }
+  _strokeUpdate(t) {
+    if (this._data.length === 0) {
+      this._strokeBegin(t);
+      return;
+    }
+    const e = t.clientX, i = t.clientY, n = this._createPoint(e, i), o = this._data[this._data.length - 1], r = o.points, a = r.length > 0 && r[r.length - 1], d = a ? n.distanceTo(a) <= this.minDistance : !1, h = o.color;
+    if (!a || !(a && d)) {
+      const c = this._addPoint(n);
+      a ? c && this._drawCurve({ color: h, curve: c }) : this._drawDot({ color: h, point: n }), r.push({
+        time: n.time,
+        x: n.x,
+        y: n.y
+      });
+    }
+  }
+  _strokeEnd(t) {
+    this._strokeUpdate(t), typeof this.onEnd == "function" && this.onEnd(t);
+  }
+  _handlePointerEvents() {
+    this._mouseButtonDown = !1, this.canvas.addEventListener("pointerdown", this._handleMouseDown), this.canvas.addEventListener("pointermove", this._handleMouseMove), document.addEventListener("pointerup", this._handleMouseUp);
+  }
+  _handleMouseEvents() {
+    this._mouseButtonDown = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown), this.canvas.addEventListener("mousemove", this._handleMouseMove), document.addEventListener("mouseup", this._handleMouseUp);
+  }
+  _handleTouchEvents() {
+    this.canvas.addEventListener("touchstart", this._handleTouchStart), this.canvas.addEventListener("touchmove", this._handleTouchMove), this.canvas.addEventListener("touchend", this._handleTouchEnd);
+  }
+  _reset() {
+    this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (this.minWidth + this.maxWidth) / 2, this._ctx.fillStyle = this.penColor;
+  }
+  _createPoint(t, e) {
+    const i = this.canvas.getBoundingClientRect();
+    return new y(t - i.left, e - i.top, (/* @__PURE__ */ new Date()).getTime());
+  }
+  _addPoint(t) {
+    const { _lastPoints: e } = this;
+    if (e.push(t), e.length > 2) {
+      e.length === 3 && e.unshift(e[0]);
+      const i = this._calculateCurveWidths(e[1], e[2]), n = x.fromPoints(e, i);
+      return e.shift(), n;
+    }
+    return null;
+  }
+  _calculateCurveWidths(t, e) {
+    const i = this.velocityFilterWeight * e.velocityFrom(t) + (1 - this.velocityFilterWeight) * this._lastVelocity, n = this._strokeWidth(i), o = {
+      end: n,
+      start: this._lastWidth
+    };
+    return this._lastVelocity = i, this._lastWidth = n, o;
+  }
+  _strokeWidth(t) {
+    return Math.max(this.maxWidth / (t + 1), this.minWidth);
+  }
+  _drawCurveSegment(t, e, i) {
+    const n = this._ctx;
+    n.moveTo(t, e), n.arc(t, e, i, 0, 2 * Math.PI, !1), this._isEmpty = !1;
+  }
+  _drawCurve({ color: t, curve: e }) {
+    const i = this._ctx, n = e.endWidth - e.startWidth, o = Math.floor(e.length()) * 2;
+    i.beginPath(), i.fillStyle = t;
+    for (let r = 0; r < o; r += 1) {
+      const a = r / o, d = a * a, h = d * a, c = 1 - a, g = c * c, f = g * c;
+      let m = f * e.startPoint.x;
+      m += 3 * g * a * e.control1.x, m += 3 * c * d * e.control2.x, m += h * e.endPoint.x;
+      let l = f * e.startPoint.y;
+      l += 3 * g * a * e.control1.y, l += 3 * c * d * e.control2.y, l += h * e.endPoint.y;
+      const u = Math.min(e.startWidth + h * n, this.maxWidth);
+      this._drawCurveSegment(m, l, u);
+    }
+    i.closePath(), i.fill();
+  }
+  _drawDot({ color: t, point: e }) {
+    const i = this._ctx, n = typeof this.dotSize == "function" ? this.dotSize() : this.dotSize;
+    i.beginPath(), this._drawCurveSegment(e.x, e.y, n), i.closePath(), i.fillStyle = t, i.fill();
+  }
+  _fromData(t, e, i) {
+    for (const n of t) {
+      const { color: o, points: r } = n;
+      if (r.length > 1)
+        for (let a = 0; a < r.length; a += 1) {
+          const d = r[a], h = new y(d.x, d.y, d.time);
+          this.penColor = o, a === 0 && this._reset();
+          const c = this._addPoint(h);
+          c && e({ color: o, curve: c });
+        }
+      else
+        this._reset(), i({
+          color: o,
+          point: r[0]
+        });
+    }
+  }
+  _toSVG() {
+    const t = this._data, e = Math.max(window.devicePixelRatio || 1, 1), i = 0, n = 0, o = this.canvas.width / e, r = this.canvas.height / e, a = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    a.setAttribute("width", this.canvas.width.toString()), a.setAttribute("height", this.canvas.height.toString()), this._fromData(t, ({ color: m, curve: l }) => {
+      const u = document.createElement("path");
+      if (!isNaN(l.control1.x) && !isNaN(l.control1.y) && !isNaN(l.control2.x) && !isNaN(l.control2.y)) {
+        const v = `M ${l.startPoint.x.toFixed(3)},${l.startPoint.y.toFixed(3)} C ${l.control1.x.toFixed(3)},${l.control1.y.toFixed(3)} ${l.control2.x.toFixed(3)},${l.control2.y.toFixed(3)} ${l.endPoint.x.toFixed(3)},${l.endPoint.y.toFixed(3)}`;
+        u.setAttribute("d", v), u.setAttribute("stroke-width", (l.endWidth * 2.25).toFixed(3)), u.setAttribute("stroke", m), u.setAttribute("fill", "none"), u.setAttribute("stroke-linecap", "round"), a.appendChild(u);
+      }
+    }, ({ color: m, point: l }) => {
+      const u = document.createElement("circle"), v = typeof this.dotSize == "function" ? this.dotSize() : this.dotSize;
+      u.setAttribute("r", v.toString()), u.setAttribute("cx", l.x.toString()), u.setAttribute("cy", l.y.toString()), u.setAttribute("fill", m), a.appendChild(u);
+    });
+    const d = "data:image/svg+xml;base64,", h = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${i} ${n} ${o} ${r}" width="${o}" height="${r}">`;
+    let c = a.innerHTML;
+    if (c === void 0) {
+      const m = document.createElement("dummy"), l = a.childNodes;
+      m.innerHTML = "";
+      for (let u = 0; u < l.length; u += 1)
+        m.appendChild(l[u].cloneNode(!0));
+      c = m.innerHTML;
+    }
+    const f = h + c + "</svg>";
+    return d + btoa(f);
+  }
+}
+var M = {
+  format: "image/png",
+  quality: 0.92,
+  width: void 0,
+  height: void 0,
+  Canvas: void 0,
+  crossOrigin: void 0
+}, E = function(s, t) {
+  return s === void 0 && (s = []), t === void 0 && (t = {}), new Promise(function(e) {
+    t = Object.assign({}, M, t);
+    var i = t.Canvas ? new t.Canvas() : window.document.createElement("canvas"), n = t.Canvas ? t.Canvas.Image : window.Image;
+    t.Canvas && (t.quality *= 100);
+    var o = s.map(function(a) {
+      return new Promise(function(d, h) {
+        a.constructor.name !== "Object" && (a = { src: a });
+        var c = new n();
+        c.crossOrigin = t.crossOrigin, c.onerror = function() {
+          return h(new Error("Couldn't load image"));
+        }, c.onload = function() {
+          return d(Object.assign({}, a, { img: c }));
+        }, c.src = a.src;
+      });
+    }), r = i.getContext("2d");
+    e(Promise.all(o).then(function(a) {
+      var d = function(h) {
+        return t[h] || Math.max.apply(Math, a.map(function(c) {
+          return c.img[h];
+        }));
+      };
+      return i.width = d("width"), i.height = d("height"), a.forEach(function(h) {
+        return r.globalAlpha = h.opacity ? h.opacity : 1, r.drawImage(h.img, h.x || 0, h.y || 0);
+      }), t.Canvas && t.format === "image/jpeg" ? new Promise(function(h) {
+        i.toDataURL(t.format, {
+          quality: t.quality,
+          progressive: !1
+        }, function(c, g) {
+          if (c)
+            throw c;
+          h(g);
+        });
+      }) : i.toDataURL(t.format, t.quality);
+    }));
+  });
+};
+const _ = ["image/png", "image/jpeg", "image/svg+xml"], T = (s) => _.includes(s), b = {
+  dotSize: (0.5 + 2.5) / 2,
+  minWidth: 0.5,
+  maxWidth: 2.5,
+  throttle: 16,
+  minDistance: 5,
+  backgroundColor: "rgba(0,0,0,0)",
+  penColor: "black",
+  velocityFilterWeight: 0.7,
+  onBegin: () => {
+  },
+  onEnd: () => {
+  }
+}, C = (s) => JSON.parse(JSON.stringify(s)), A = {
+  src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
+  x: 0,
+  y: 0
+};
+var W = D({
+  name: "VueSignaturePad",
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    images: {
+      type: Array,
+      default: () => []
+    },
+    scaleToDevicePixelRatio: {
+      type: Boolean,
+      default: () => !0
+    }
+  },
+  data: () => ({
+    signaturePad: {},
+    cacheImages: [],
+    signatureData: A,
+    onResizeHandler: null
+  }),
+  computed: {
+    propsImagesAndCustomImages() {
+      const s = C(this.images), t = C(this.cacheImages);
+      return [...s, ...t];
+    }
+  },
+  watch: {
+    options: function(s) {
+      Object.keys(s).forEach((t) => {
+        this.signaturePad[t] && (this.signaturePad[t] = s[t]);
+      });
+    }
+  },
+  mounted() {
+    const {
+      options: s
+    } = this, t = this.$refs.signaturePadCanvas, e = new w(t, {
+      ...b,
+      ...s
+    });
+    this.signaturePad = e, s.resizeHandler && (this.resizeCanvas = s.resizeHandler.bind(this)), this.onResizeHandler = this.resizeCanvas.bind(this), window.addEventListener("resize", this.onResizeHandler, !1), this.resizeCanvas();
+  },
+  beforeUnmount() {
+    this.onResizeHandler && window.removeEventListener("resize", this.onResizeHandler, !1);
+  },
+  methods: {
+    resizeCanvas() {
+      const s = this.$refs.signaturePadCanvas, t = this.signaturePad.toData(), e = this.scaleToDevicePixelRatio ? Math.max(window.devicePixelRatio || 1, 1) : 1;
+      s.width = s.offsetWidth * e, s.height = s.offsetHeight * e, s.getContext("2d").scale(e, e), this.signaturePad.clear(), this.signatureData = A, this.signaturePad.fromData(t);
+    },
+    saveSignature() {
+      let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _[0], t = arguments.length > 1 ? arguments[1] : void 0;
+      const {
+        signaturePad: e
+      } = this, i = {
+        isEmpty: !1,
+        data: void 0
+      };
+      if (!T(s)) {
+        const n = _.join(", ");
+        throw new Error(`The Image type is incorrect! We are support ${n} types.`);
+      }
+      return e.isEmpty() ? {
+        ...i,
+        isEmpty: !0
+      } : (this.signatureData = e.toDataURL(s, t), {
+        ...i,
+        data: this.signatureData
+      });
+    },
+    undoSignature() {
+      const {
+        signaturePad: s
+      } = this, t = s.toData();
+      if (t)
+        return s.fromData(t.slice(0, -1));
+    },
+    mergeImageAndSignature(s) {
+      return this.signatureData = s, E([...this.images, ...this.cacheImages, this.signatureData]);
+    },
+    addImages() {
+      let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+      return this.cacheImages = [...this.cacheImages, ...s], E([...this.images, ...this.cacheImages, this.signatureData]);
+    },
+    fromDataURL(s) {
+      let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, e = arguments.length > 2 ? arguments[2] : void 0;
+      return this.signaturePad.fromDataURL(s, t, e);
+    },
+    fromData(s) {
+      return this.signaturePad.fromData(s);
+    },
+    toData() {
+      return this.signaturePad.toData();
+    },
+    lockSignaturePad() {
+      return this.signaturePad.off();
+    },
+    openSignaturePad() {
+      return this.signaturePad.on();
+    },
+    isEmpty() {
+      return this.signaturePad.isEmpty();
+    },
+    getPropImagesAndCacheImages() {
+      return this.propsImagesAndCustomImages;
+    },
+    clearCacheImages() {
+      return this.cacheImages = [], this.cacheImages;
+    },
+    clearSignature() {
+      return this.signaturePad.clear();
+    }
+  },
+  render() {
+    const {
+      width: s,
+      height: t,
+      customStyle: e
+    } = this;
+    return P("div", {
+      style: {
+        width: s,
+        height: t,
+        ...e
+      }
+    }, [P("canvas", {
+      style: {
+        width: s,
+        height: t
+      },
+      ref: "signaturePadCanvas"
+    })]);
+  }
+});
+W.__file = "src/components/VueSignaturePad.vue";
+export {
+  W as s
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-payment",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "type": "module",
   "files": [
     "dist"