@web-utils/component 2.0.14 → 2.7.0

package/dist/components/queue/index.js

@@ -0,0 +1,76 @@
+import { n as l } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var s = function() {
+  var e = this, t = e.$createElement, n = e._self._c || t;
+  return n("div", {
+    class: ["avue-queue", {
+      "avue-queue--block": e.block
+    }]
+  }, [n("div", {
+    ref: "queue",
+    staticClass: "animated",
+    class: e.animate
+  }, [e._t("default")], 2)]);
+}, i = [];
+const o = {
+  name: "Queue",
+  props: {
+    enter: {
+      type: String,
+      default: "fadeInLeft"
+    },
+    leave: {
+      type: String,
+      default: "fadeOutRight"
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    delay: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      isFixed: 0,
+      animate: []
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      addEventListener("scroll", this.handleAnimate), this.handleAnimate();
+    });
+  },
+  destroyed() {
+    removeEventListener("scroll", this.handleAnimate);
+  },
+  methods: {
+    handleAnimate() {
+      let e = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, t = document.documentElement.clientHeight, n = this.$refs.queue;
+      e + t > n.offsetTop ? setTimeout(() => {
+        this.animate = [this.enter, "avue-opacity--active"];
+      }, this.delay) : this.animate = ["avue-opacity"];
+    }
+  }
+}, a = {};
+var u = /* @__PURE__ */ l(
+  o,
+  s,
+  i,
+  !1,
+  r,
+  null,
+  null,
+  null
+);
+function r(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const d = /* @__PURE__ */ function() {
+  return u.exports;
+}();
+export {
+  d as default
+};

package/dist/components/record-video/index.js

@@ -0,0 +1,173 @@
+import { s } from "../../chunks/util.5053d54e.js";
+import { n as o } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+let n = class {
+  /**
+   * 构造函数
+   *
+   * @param  {Object}   videoObj 视频对象
+   */
+  constructor(t) {
+    this.video = t, this.mediaRecorder = null, this.chunks = [];
+  }
+  /**
+   * 初始化
+   *
+   * @return {Object} promise
+   */
+  init() {
+    return new Promise((t, i) => {
+      navigator.mediaDevices.getUserMedia({
+        audio: !0,
+        video: !0
+        // video: {
+        //     width: this.videoWidth,
+        //     height: this.videoHeight
+        // }
+      }).then((r) => {
+        "srcObject" in this.video ? this.video.srcObject = r : this.video.src = window.URL.createObjectURL(r), this.video.addEventListener("loadmetadata", () => {
+          this.video.play();
+        }), this.mediaRecorder = new MediaRecorder(r), this.mediaRecorder.addEventListener("dataavailable", (d) => {
+          this.chunks.push(d.data);
+        }), t();
+      }).catch((r) => {
+        i(r);
+      });
+    });
+  }
+  /**
+   * 视频开始录制
+   */
+  startRecord() {
+    this.mediaRecorder.state === "inactive" && this.mediaRecorder.start();
+  }
+  /**
+   * 视频结束录制
+   */
+  stopRecord() {
+    this.mediaRecorder.state === "recording" && this.mediaRecorder.stop();
+  }
+  /**
+   * 检测当前浏览器对否支持
+   *
+   * @return {boolean} 当前浏览器是否支持
+   */
+  isSupport() {
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
+      return !0;
+  }
+};
+var c = function() {
+  var e = this, t = e.$createElement, i = e._self._c || t;
+  return i("div", {
+    staticClass: "avue-video",
+    style: e.styleName
+  }, [i("div", {
+    staticClass: "avue-video__border"
+  }, [i("span", {
+    style: e.borderStyleName
+  }), i("span", {
+    style: e.borderStyleName
+  }), i("span", {
+    style: e.borderStyleName
+  }), i("span", {
+    style: e.borderStyleName
+  })]), i("img", {
+    staticClass: "avue-video__img",
+    style: e.imgStyleName,
+    attrs: {
+      src: e.background,
+      alt: ""
+    }
+  }), i("video", {
+    ref: "main",
+    staticClass: "avue-video__main",
+    attrs: {
+      autoplay: "",
+      muted: ""
+    },
+    domProps: {
+      muted: !0
+    }
+  })]);
+}, l = [];
+const v = {
+  name: "RecordVideo",
+  props: {
+    background: {
+      type: String
+    },
+    width: {
+      type: [String, Number],
+      default: 500
+    }
+  },
+  data() {
+    return {
+      videoObj: null
+    };
+  },
+  computed: {
+    styleName() {
+      return {
+        width: s(this.width)
+      };
+    },
+    imgStyleName() {
+      return {
+        width: s(this.width / 2)
+      };
+    },
+    borderStyleName() {
+      return {
+        width: s(this.width / 15),
+        height: s(this.width / 15),
+        borderWidth: s(5)
+      };
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.videoObj = new n(this.$refs.main), this.videoObj.init().then(() => {
+        this.videoObj.mediaRecorder.addEventListener("stop", this.getData, !1);
+      });
+    },
+    startRecord() {
+      this.videoObj.startRecord();
+    },
+    stopRecord() {
+      this.videoObj.stopRecord();
+    },
+    getData() {
+      const e = new Blob(this.videoObj.chunks, {
+        type: "video/mp4"
+      }), t = new FileReader();
+      t.readAsDataURL(e), t.addEventListener("loadend", () => {
+        var i = t.result;
+        this.$emit("data-change", i);
+      });
+    }
+  }
+}, a = {};
+var h = /* @__PURE__ */ o(
+  v,
+  c,
+  l,
+  !1,
+  m,
+  null,
+  null,
+  null
+);
+function m(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const b = /* @__PURE__ */ function() {
+  return h.exports;
+}();
+export {
+  b as default
+};

package/dist/components/record-video/style.css

@@ -0,0 +1 @@
+.avue-video{position:relative;width:500px;overflow:hidden}.avue-video__border span{position:absolute;width:30px;height:30px;border-width:4px;color:#0073eb;border-style:solid}.avue-video__border span:nth-child(1){left:15px;top:15px;border-right:0;border-bottom:0}.avue-video__border span:nth-child(2){right:15px;top:15px;border-left:0;border-bottom:0}.avue-video__border span:nth-child(3){bottom:15px;left:15px;border-right:0;border-top:0}.avue-video__border span:nth-child(4){bottom:15px;right:15px;border-left:0;border-top:0}.avue-video__img{width:100px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.avue-video__main{width:100%}

package/dist/components/resize-observer/index.js

@@ -1,5 +1,5 @@
-import { g as o } from "../../chunks/f71045fc.js";
-import { n as h } from "../../chunks/5d4282fb.js";
+import { g as o } from "../../chunks/utils.fa73de78.js";
+import { n as h } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
 var a = function() {
   var e = this, t = e.$createElement, r = e._self._c || t;
   return r("div", {

package/dist/components/search/index.js

@@ -0,0 +1,142 @@
+import { a as i, c as n } from "../../chunks/util.5053d54e.js";
+import { i as o } from "../../chunks/init.352281f5.js";
+import { n as l } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var h = function() {
+  var t = this, e = t.$createElement, r = t._self._c || e;
+  return r("ElRow", {
+    class: ["avue-search", {
+      "avue--card": t.isCard
+    }],
+    attrs: {
+      span: 24
+    }
+  }, t._l(t.columnOption, function(s) {
+    return r("ElCol", {
+      key: s.prop,
+      staticClass: "avue-search__item",
+      attrs: {
+        span: s.span || 24
+      }
+    }, [r("p", {
+      staticClass: "avue-search__title"
+    }, [t._v(" " + t._s(s.label) + ": ")]), r("div", {
+      staticClass: "avue-search__content"
+    }, [t.mainSlot.includes(s.prop) ? t._t(s.prop, null, {
+      dic: t.DIC[s.prop]
+    }) : t._l(t.DIC[s.prop], function(a) {
+      return r("span", {
+        key: t.getKey(a, s.props, t.valueKey),
+        class: ["avue-search__tags", {
+          "avue-search__tags--active": t.getActive(a, s)
+        }],
+        on: {
+          click: function(f) {
+            return t.handleClick(s, a);
+          }
+        }
+      }, [t._v(t._s(t.getKey(a, s.props, t.labelKey)))]);
+    })], 2)]);
+  }), 1);
+}, u = [];
+const c = {
+  name: "Search",
+  mixins: [o],
+  props: {
+    value: {}
+  },
+  computed: {
+    form: {
+      get() {
+        return this.value;
+      },
+      set(t) {
+        this.setVal(t);
+      }
+    },
+    props() {
+      return this.parentOption.props || {};
+    },
+    labelKey() {
+      return i.label;
+    },
+    valueKey() {
+      return i.value;
+    },
+    mainSlot() {
+      let t = [];
+      return this.propOption.forEach((e) => {
+        this.$scopedSlots[e.prop] && t.push(e.prop);
+      }), t;
+    },
+    isCard() {
+      return this.parentOption.card;
+    },
+    parentOption() {
+      return this.tableOption;
+    },
+    propOption() {
+      return this.columnOption;
+    },
+    columnOption() {
+      return this.parentOption.column;
+    }
+  },
+  watch: {
+    value: {
+      handler(t) {
+        this.setVal(t);
+      },
+      deep: !0
+    }
+  },
+  created() {
+    this.dataFormat();
+  },
+  methods: {
+    setVal(t) {
+      this.$emit("input", t), this.$emit("change", t);
+    },
+    getKey(t = {}, e = {}, r) {
+      return t[e[r] || this.props[r] || r];
+    },
+    dataFormat() {
+      this.propOption.forEach((t) => {
+        const e = t.prop;
+        n(this.form[e]) && this.$set(this.form, e, t.multiple === !1 ? "" : []);
+      });
+    },
+    getActive(t, e) {
+      const r = this.getKey(t, e.props, this.valueKey);
+      return e.multiple === !1 ? this.form[e.prop] === r : this.form[e.prop].includes(r);
+    },
+    handleClick(t, e) {
+      const r = this.getKey(e, t.props, this.valueKey);
+      if (t.multiple === !1)
+        this.form[t.prop] = r;
+      else {
+        const s = this.form[t.prop].indexOf(r);
+        s === -1 ? this.form[t.prop].push(r) : this.form[t.prop].splice(s, 1);
+      }
+    }
+  }
+}, p = {};
+var _ = /* @__PURE__ */ l(
+  c,
+  h,
+  u,
+  !1,
+  v,
+  null,
+  null,
+  null
+);
+function v(t) {
+  for (let e in p)
+    this[e] = p[e];
+}
+const O = /* @__PURE__ */ function() {
+  return _.exports;
+}();
+export {
+  O as default
+};

package/dist/components/search/style.css

@@ -0,0 +1 @@
+.avue-search{padding:0 20px}.avue-search__item{padding:20px 0 10px;display:flex;align-items:flex-start;border-bottom:1px dashed #e8e8e8}.avue-search__item:last-child{border-bottom:none}.avue-search__tags{padding:0 12px;margin-right:24px;margin-bottom:12px;font-size:14px;color:#000000a6;cursor:pointer;white-space:nowrap;display:inline-block}.avue-search__tags:hover{color:#1890ff}.avue-search__tags--active{color:#fff;background-color:#1890ff;border-radius:5px}.avue-search__tags--active:hover{opacity:.85;color:#fff}.avue-search__title{margin:0;padding:0 20px;width:120px;font-size:14px;text-align:right;display:inline-block;box-sizing:border-box}.avue-search__content{width:calc(100% - 190px);display:inline-block}.avue-search__content .el-tag{margin-right:10px;margin-bottom:10px}

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

@@ -1,6 +1,6 @@
 import { copy, isInContainer } from "@web-utils/core";
 import ClickOutside from "element-ui/lib/utils/clickoutside";
-import { n as normalizeComponent } from "../../chunks/5d4282fb.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
 var render = function() {
   var t = this, r = t.$createElement, e = t._self._c || r;
   return e("div", {

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,4 +1,4 @@
-import { n } from "../../chunks/5d4282fb.js";
+import { n } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
 var o = function() {
   var t = this, e = t.$createElement, i = t._self._c || e;
   return i("div", {
@@ -154,6 +154,7 @@ const c = {
     this.init();
   },
   methods: {
+    // 初始化
     init() {
       if (this.stack = [], this.canvas = this.$refs.canvas, !this.canvas.getContext) {
         alert("当前浏览器不支持手写签名");
@@ -167,35 +168,47 @@ const c = {
         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 黑体`, 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);
     },
+    // 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);
     },
+    // PC 端鼠标按下开始绘画后，跟踪移动轨迹
     move(t) {
       this.moveLine(t.clientX, t.clientY, t);
     },
+    // PC 端鼠标松开结束绘画
     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();
     },

package/dist/components/skeleton/index.js

@@ -0,0 +1,82 @@
+import { n as o } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var r = function() {
+  var e = this, a = e.$createElement, t = e._self._c || a;
+  return t("div", {
+    staticClass: "avue-skeleton"
+  }, [e.loading ? e._l(e.number, function(d, n) {
+    return t("div", {
+      key: n,
+      staticClass: "avue-skeleton__item"
+    }, [t("div", {
+      staticClass: "avue-skeleton__header"
+    }, [e.avatar ? t("span", {
+      staticClass: "avue-skeleton__vatar'),className]"
+    }) : e._e()]), t("div", {
+      staticClass: "avue-skeleton__content"
+    }, [t("h3", {
+      class: ["avue-skeleton__title", e.className]
+    }), t("div", {
+      staticClass: "avue-skeleton__list"
+    }, e._l(e.rows, function(m, l) {
+      return t("p", {
+        key: l,
+        class: ["avue-skeleton__li", e.className],
+        style: e.styleName
+      });
+    }), 0)])]);
+  }) : t("div", [e._t("default")], 2)], 2);
+}, _ = [];
+const i = "avue-skeleton", u = {
+  name: "Skeleton",
+  props: {
+    loading: {
+      type: Boolean,
+      default: !0
+    },
+    avatar: Boolean,
+    active: {
+      type: Boolean,
+      default: !0
+    },
+    block: Boolean,
+    number: {
+      type: Number,
+      default: 1
+    },
+    rows: {
+      type: Number,
+      default: 3
+    }
+  },
+  computed: {
+    styleName() {
+      return this.block ? {
+        width: "100%"
+      } : {};
+    },
+    className() {
+      let { active: e } = this;
+      return { [`${i}__loading`]: e };
+    }
+  }
+}, s = {};
+var c = /* @__PURE__ */ o(
+  u,
+  r,
+  _,
+  !1,
+  v,
+  null,
+  null,
+  null
+);
+function v(e) {
+  for (let a in s)
+    this[a] = s[a];
+}
+const p = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  p as default
+};

package/dist/components/skeleton/style.css

@@ -0,0 +1 @@
+.avue-skeleton__avatar{width:40px;height:40px;line-height:40px;display:inline-block;border-radius:50%;background:#f2f2f2}.avue-skeleton__header{display:table-cell;vertical-align:top;padding-right:16px}.avue-skeleton__content{display:table-cell;vertical-align:top;width:100%}.avue-skeleton__title{margin-top:16px;height:16px;width:40%;background:#f2f2f2}.avue-skeleton__item{padding-top:16px;padding-bottom:16px;border-bottom:1px solid #e8e8e8}.avue-skeleton__item:last-child{border-bottom:none}.avue-skeleton__li{margin-bottom:10px;height:16px;background:#f2f2f2;list-style:none;width:100%}.avue-skeleton__li:last-child{width:50%}.avue-skeleton__loading{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);animation:avue-skeleton-loading 1.4s ease infinite;background-size:400% 100%}@keyframes avue-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}