@web-utils/component 2.7.36 → 2.8.0

package/properties-panel/style.css

@@ -0,0 +1 @@
+.process-panel__container{box-sizing:border-box;max-height:100%;padding:0 8px;overflow-y:auto;border-left:1px solid #eee;box-shadow:0 0 8px #ccc}.panel-tab__title{padding:0 8px;font-weight:600;font-size:1.1em;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #eee}.panel-tab__content .panel-tab__content--title{display:flex;justify-content:space-between;padding-bottom:8px}.panel-tab__content .panel-tab__content--title span{flex:1;text-align:left}.element-property{display:flex;align-items:flex-start;width:100%;margin:8px 0}.element-property .element-property__label{display:block;box-sizing:border-box;width:90px;padding-right:12px;overflow:hidden;font-size:14px;line-height:32px;text-align:right}.element-property .element-property__value{flex:1;line-height:32px}.element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.list-property{flex-direction:column}.list-property .element-listener-item{display:inline-grid;grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%}.list-property .element-listener-item+.element-listener-item{margin-top:8px}.listener-filed__title{display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-top:0}.listener-filed__title span{width:200px;font-size:14px;text-align:left}.listener-filed__title i{margin-right:8px}.element-drawer__button{display:inline-flex;justify-content:space-around;width:100%;margin-top:8px}.element-drawer__button>.el-button{width:100%}.el-collapse-item__content{padding-bottom:0}.el-input.is-disabled .el-input__inner{color:#999}.el-form-item.el-form-item--mini{margin-bottom:0}.el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}

package/queue/index.mjs

@@ -0,0 +1,76 @@
+import { n as s } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var o = 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 l = {
+  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() {
+      const 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__ */ s(
+  l,
+  o,
+  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/record-video/index.mjs

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

package/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;color:#0073eb;border-style:solid;border-width:4px}.avue-video__border span:nth-child(1){top:15px;left:15px;border-right:0;border-bottom:0}.avue-video__border span:nth-child(2){top:15px;right:15px;border-bottom:0;border-left:0}.avue-video__border span:nth-child(3){bottom:15px;left:15px;border-top:0;border-right:0}.avue-video__border span:nth-child(4){right:15px;bottom:15px;border-top:0;border-left:0}.avue-video__img{position:absolute;top:50%;left:50%;width:100px;transform:translate(-50%,-50%)}.avue-video__main{width:100%}

package/resize-observer/index.mjs

@@ -0,0 +1,62 @@
+import { j as o } from "../chunks/index.57f871af.mjs";
+import { n as h } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var a = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("div", {
+    staticClass: "resize-observer",
+    attrs: {
+      tabindex: "-1"
+    }
+  });
+}, l = [];
+let i;
+function s() {
+  s.init || (s.init = !0, i = o() !== -1);
+}
+const c = {
+  name: "ResizeObserver",
+  mounted() {
+    s(), this.$nextTick(() => {
+      this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight;
+    });
+    const e = document.createElement("object");
+    this._resizeObject = e, e.setAttribute("aria-hidden", "true"), e.setAttribute("tabindex", -1), e.onload = this.addResizeHandlers, e.type = "text/html", i && this.$el.appendChild(e), e.data = "about:blank", i || this.$el.appendChild(e);
+  },
+  beforeDestroy() {
+    this.removeResizeHandlers();
+  },
+  methods: {
+    compareAndNotify() {
+      (this._w !== this.$el.offsetWidth || this._h !== this.$el.offsetHeight) && (this._w = this.$el.offsetWidth, this._h = this.$el.offsetHeight, this.$emit("notify", {
+        width: this._w,
+        height: this._h
+      }));
+    },
+    addResizeHandlers() {
+      this._resizeObject.contentDocument.defaultView.addEventListener("resize", this.compareAndNotify), this.compareAndNotify();
+    },
+    removeResizeHandlers() {
+      this._resizeObject && this._resizeObject.onload && (!i && this._resizeObject.contentDocument && this._resizeObject.contentDocument.defaultView.removeEventListener("resize", this.compareAndNotify), this.$el.removeChild(this._resizeObject), this._resizeObject.onload = null, this._resizeObject = null);
+    }
+  }
+}, n = {};
+var d = /* @__PURE__ */ h(
+  c,
+  a,
+  l,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let t in n)
+    this[t] = n[t];
+}
+const m = /* @__PURE__ */ function() {
+  return d.exports;
+}();
+export {
+  m as default
+};

package/resize-observer/style.css

@@ -0,0 +1 @@
+.resize-observer{position:absolute;top:0;left:0;z-index:-1;display:block;width:100%;height:100%;overflow:hidden;background-color:transparent;border:none;opacity:0;pointer-events:none}.resize-observer>object{position:absolute;top:0;left:0;z-index:-1;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}

package/search/index.mjs

@@ -0,0 +1,143 @@
+import { D as i } from "../chunks/util.17330567.mjs";
+import { i as n } from "../chunks/init.f04c7036.mjs";
+import { isBlank as o } from "@web-utils/core";
+import { n as l } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+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(v) {
+            return t.handleClick(s, a);
+          }
+        }
+      }, [t._v(t._s(t.getKey(a, s.props, t.labelKey)))]);
+    })], 2)]);
+  }), 1);
+}, u = [];
+const c = {
+  name: "Search",
+  mixins: [n],
+  props: {
+    value: [String, Object, Number, Boolean, Array]
+  },
+  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() {
+      const 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;
+        o(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,
+  f,
+  null,
+  null,
+  null
+);
+function f(t) {
+  for (let e in p)
+    this[e] = p[e];
+}
+const g = /* @__PURE__ */ function() {
+  return _.exports;
+}();
+export {
+  g as default
+};

package/search/style.css

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