@web-utils/component 2.0.13 → 2.2.0

package/present-view/index.mjs

@@ -0,0 +1,365 @@
+var c = (t, e, o) => new Promise((r, s) => {
+  var n = (i) => {
+    try {
+      a(o.next(i));
+    } catch (f) {
+      s(f);
+    }
+  }, l = (i) => {
+    try {
+      a(o.throw(i));
+    } catch (f) {
+      s(f);
+    }
+  }, a = (i) => i.done ? r(i.value) : Promise.resolve(i.value).then(n, l);
+  a((o = o.apply(t, e)).next());
+});
+import { hasOwn as d, toStringArray as p, delay as v, isInContainer as w } from "@web-utils/core";
+import { merge as y } from "@web-utils/integrations/lodash";
+import _ from "@web-utils/component/resize-observer";
+import "@web-utils/component/resize-observer/style.css";
+import { n as g } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var x = function() {
+  var t = this, e = t.$createElement, o = t._self._c || e;
+  return o("div", {
+    class: ["form-view", t.className]
+  }, [o("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !t.isFormLoading,
+      expression: "!isFormLoading"
+    }],
+    staticClass: "form-view-toolbar"
+  }, [t._t("form-view-toolbar", function() {
+    return [o("Toolbar", t._g(t._b({
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: t.showToolbar,
+        expression: "showToolbar"
+      }],
+      on: {
+        edit: t.onEdit
+      },
+      scopedSlots: t._u([{
+        key: "default",
+        fn: function(r) {
+          var s = r.buttons;
+          return [t._t("toolbar-button", null, {
+            buttons: s
+          })];
+        }
+      }, t._l(t.getToolbarSlotKeys(), function(r) {
+        return {
+          key: r,
+          fn: function() {
+            return [t._t(r)];
+          },
+          proxy: !0
+        };
+      }), {
+        key: "toolbar-right",
+        fn: function() {
+          return [t._t("toolbar-right")];
+        },
+        proxy: !0
+      }], null, !0)
+    }, "Toolbar", Object.assign({}, t.toolbarProps, {
+      buttons: t.getToolbarButtons(t.toolbarProps.buttons)
+    }), !1), t.toolbarListeners))];
+  })], 2), o("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !t.isFormLoading,
+      expression: "!isFormLoading"
+    }],
+    staticClass: "form-scroller-wrapper"
+  }, [o("div", {
+    ref: "formScroller",
+    class: ["form-scroller", "absolute-box", t.contentClass],
+    on: {
+      scroll: t.onFormScroll
+    }
+  }, [t.notForm ? o("div", {
+    staticClass: "not-form",
+    style: {
+      width: t.formWidth
+    }
+  }, [t.title ? o("div", {
+    staticClass: "form-view-title"
+  }, [t._v(t._s(t.title))]) : t._e(), t._t("default", function() {
+    return [o("EmptyView", {
+      attrs: {
+        "empty-tips": "请添加表单内容"
+      }
+    })];
+  }), o("Toolbar", t._g(t._b({
+    attrs: {
+      footer: ""
+    },
+    scopedSlots: t._u([{
+      key: "default",
+      fn: function(r) {
+        var s = r.buttons, n = r.footer;
+        return [t._t("footer-button", null, {
+          buttons: s,
+          footer: n
+        })];
+      }
+    }, t._l(t.getFooterSlotKeys(), function(r) {
+      return {
+        key: t.getFooterSlotKey(r),
+        fn: function() {
+          return [t._t(r)];
+        },
+        proxy: !0
+      };
+    })], null, !0)
+  }, "Toolbar", Object.assign({}, t.toolbarProps, {
+    buttons: t.getFooterBarButtons(t.toolbarProps.buttons)
+  }), !1), t.toolbarListeners)), t.$scopedSlots["form-bottom"] ? t._t("form-bottom") : t._e()], 2) : o("div", {
+    class: ["form-card", {
+      "un-limit": t.unLimit
+    }],
+    style: {
+      width: `calc(${t.formWidth} + 40px)`
+    }
+  }, [o("div", {
+    staticClass: "form-content"
+  }, [t.title ? o("div", {
+    staticClass: "form-view-title"
+  }, [t._v(t._s(t.title))]) : t._e(), t._t("default", function() {
+    return [o("EmptyView", {
+      attrs: {
+        "empty-tips": "请添加表单内容"
+      }
+    })];
+  }), t.getFooterBarButtons(t.toolbarProps.buttons).length ? o("Toolbar", t._g(t._b({
+    attrs: {
+      footer: ""
+    },
+    scopedSlots: t._u([{
+      key: "default",
+      fn: function(r) {
+        var s = r.buttons, n = r.footer;
+        return [t._t("footer-button", null, {
+          buttons: s,
+          footer: n
+        })];
+      }
+    }, t._l(t.getFooterSlotKeys(), function(r) {
+      return {
+        key: t.getFooterSlotKey(r),
+        fn: function() {
+          return [t._t(r)];
+        },
+        proxy: !0
+      };
+    })], null, !0)
+  }, "Toolbar", Object.assign({}, t.toolbarProps, {
+    buttons: t.getFooterBarButtons(t.toolbarProps.buttons)
+  }), !1), t.toolbarListeners)) : t._e()], 2)]), t.$scopedSlots["form-bottom"] || t.$parent.$options.flowForm && t.flowContext.logs.length ? o("div", {
+    class: ["form-card", {
+      "un-limit": t.unLimit
+    }],
+    staticStyle: {
+      "min-height": "0"
+    },
+    style: {
+      width: `calc(${t.formWidth} + 40px)`
+    }
+  }, [o("div", {
+    staticClass: "form-content"
+  }, [o("FormItemGroup", {
+    attrs: {
+      "block-title": "流程日志"
+    }
+  }, [o("FlowLog", {
+    attrs: {
+      fetch: !1,
+      "show-title": !1,
+      "business-key": t.$parent.bizKey
+    }
+  })], 1), t._t("form-bottom")], 2)]) : t._e()]), o("ResizeObserver", {
+    on: {
+      notify: t.onFormResize
+    }
+  })], 1), t.formNav && !t.isFormLoading && t.showNav && t.tabs.length ? o("div", {
+    staticClass: "form-nav"
+  }, [o("div", {
+    staticClass: "form-nav-header"
+  }, [t._v("表单导航")]), o("ul", {
+    staticClass: "form-nav-list"
+  }, t._l(t.tabs, function(r, s) {
+    return o("li", {
+      key: r.blockTitle,
+      class: ["form-nav-item", {
+        active: t.activeIndex === s
+      }],
+      on: {
+        click: function(n) {
+          return t.tabClick(r, s);
+        }
+      }
+    }, [t._v(" " + t._s(r.blockTitle) + " ")]);
+  }), 0)]) : t._e(), t.isFormLoading ? o("LoadingView", {
+    attrs: {
+      "icon-size": "34px",
+      "font-size": "16px"
+    }
+  }) : t._e()], 1);
+}, $ = [];
+const b = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], S = b.map((t) => `${t}-down`), F = ["back", "withdraw", "edit"], m = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], u = (t, e) => {
+  if (t.classList.contains(e))
+    return t;
+  let o = t.parentNode;
+  for (; o && !o.classList.contains(e); )
+    o = o.parentNode;
+  return o.classList.contains(e) ? o : null;
+}, k = {
+  name: "PresentView",
+  components: {
+    ResizeObserver: _
+  },
+  inject: {
+    flowContext: {
+      default: {}
+    }
+  },
+  props: {
+    notForm: Boolean,
+    loading: Boolean,
+    unLimit: Boolean,
+    formWidth: {
+      type: String,
+      default: "75%"
+    },
+    toolbarAttrs: {
+      type: Object,
+      default: () => {
+      }
+    },
+    toolbarListeners: Object,
+    contentClass: String,
+    className: String,
+    title: String,
+    showToolbar: {
+      type: Boolean,
+      default: !0
+    },
+    formNav: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      tabs: [],
+      activeIndex: -1,
+      tryByClick: !1,
+      showNav: !1
+    };
+  },
+  computed: {
+    isFormLoading() {
+      return this.loading || d(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+    },
+    toolbarProps() {
+      var r;
+      const t = {}, e = ((r = this.toolbarAttrs) == null ? void 0 : r.buttons) || this.$parent.buttons, o = y({}, this.toolbarAttrs, t);
+      return o.buttons = e || ["back"], o.buttons = p(o.buttons), o;
+    }
+  },
+  created() {
+    this.$on("FormView.addTab", (t) => {
+      t && (this.activeIndex === -1 && (this.activeIndex = 0), this.tabs.push(t), this.tabs = this.tabs.sort((e, o) => {
+        const r = u(e.$el, "form-card"), s = u(o.$el, "form-card");
+        if (r === s) {
+          const n = [].indexOf.call(e.$el.parentNode.children, e.$el), l = [].indexOf.call(o.$el.parentNode.children, o.$el);
+          return n - l;
+        } else {
+          const n = u(r, "form-scroller"), l = [].indexOf.call(n.children, r), a = [].indexOf.call(n.children, s);
+          return l - a;
+        }
+      }), t.active && (this.activeIndex = this.tabs.indexOf(t), this.tabClick(t, this.activeIndex)));
+    }), this.$on("FormView.removeTab", (t) => {
+      if (t) {
+        const e = this.tabs.indexOf(t);
+        this.tabs.splice(e, 1), this.activeIndex > this.tabs.length - 1 && (this.activeIndex = 0);
+      }
+    }), this.onFormResize({ width: window.document.body.clientWidth });
+  },
+  activated() {
+    return c(this, null, function* () {
+      this.$refs.formScroller && (yield this.$nextTick(), this.scrollTo(this.formScrollTop, this.formScrollLeft));
+    });
+  },
+  methods: {
+    getToolbarSlotKeys() {
+      return Object.keys(this.$scopedSlots).filter((t) => b.includes(t));
+    },
+    getFooterSlotKeys() {
+      return Object.keys(this.$scopedSlots).filter((t) => S.includes(t));
+    },
+    getFooterSlotKey(t) {
+      return t.replace("-down", "");
+    },
+    onFormResize({ width: t }) {
+      this.showNav = t > 1500;
+    },
+    onEdit() {
+      !this.toolbarListeners.edit && d(this.$parent, "disabled") && (this.$parent.disabled = !1);
+    },
+    tabClick(t, e) {
+      return c(this, null, function* () {
+        this.showNav && (yield this.$nextTick(), t.expand || (t.open(), yield v(200), yield this.$nextTick()), this.tryByClick = !0, this.activeIndex = e, this.$refs.formScroller.scrollTop = t.$el.offsetTop - 10);
+      });
+    },
+    tryActive() {
+      return c(this, null, function* () {
+        if (this.showNav) {
+          for (let t = 0; t < this.tabs.length; t++)
+            if (w(this.tabs[t].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+              this.activeIndex = t;
+              break;
+            }
+        }
+      });
+    },
+    onFormScroll() {
+      this.formScrollTop = this.$refs.formScroller.scrollTop, this.formScrollLeft = this.$refs.formScroller.scrollLeft, !this.tryByClick && this.tabs.length && window.requestAnimationFrame(this.tryActive), this.tryByClick = !1;
+    },
+    scrollTo(t, e) {
+      t && (this.$refs.formScroller.scrollTop = t), e && (this.$refs.formScroller.scrollLeft = e);
+    },
+    getToolbarButtons(t) {
+      return t.filter((e) => !m.includes(e) && e.indexOf(":down") < 0).map((e) => e.replace(":up", ""));
+    },
+    getFooterBarButtons(t) {
+      let e = t.filter((o) => !F.includes(o) && (m.includes(o) || o.indexOf(":down") > -1)).map((o) => o.replace(":down", ""));
+      return e = e || [], this.$parent.isEnabled && !e.includes("cancel") && e.push("cancel"), e;
+    }
+  }
+}, h = {};
+var B = /* @__PURE__ */ g(
+  k,
+  x,
+  $,
+  !1,
+  L,
+  null,
+  null,
+  null
+);
+function L(t) {
+  for (let e in h)
+    this[e] = h[e];
+}
+const j = /* @__PURE__ */ function() {
+  return B.exports;
+}();
+export {
+  j as default
+};

package/present-view/style.css

@@ -0,0 +1 @@
+.form-view{flex-direction:column;height:100%;display:flex}.form-view .form-scroller-wrapper{flex:1;position:relative}.form-view .not-form{margin:0 auto}.form-view .form-view-toolbar{overflow:hidden}.form-view .form-scroller{flex:1;overflow:auto}.form-view .form-scroller .el-row{position:static}.form-view .form-content .el-form .el-row{padding-right:2rem}.form-view .form-content .el-form .el-row .el-row{padding-right:0}.form-view .form-card{color:#303133;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;max-width:1000px;margin:14px auto;padding:20px;transition:all .3s;box-shadow:0 2px 12px rgba(0,0,0,.1)}.form-view .form-card.un-limit{max-width:100%}.form-view .form-nav{background-color:#fff;position:absolute;top:55px;left:20px;box-shadow:0 2px 12px rgba(0,0,0,.1)}.form-view .form-nav-list{min-width:180px;padding:10px 20px}.form-view .form-nav-header{color:#e34e55;background-color:#f3f5fb;padding:5px 20px;font-size:15px;font-weight:700;position:relative}.form-view .form-nav-item{cursor:pointer;padding:5px 0;position:relative;font-family:element-icons!important}.form-view .form-nav-item.active,.form-view .form-nav-item:hover{color:#e34e55;font-weight:700}.form-view .form-nav-item.active:before{content:"";position:absolute;left:-14px}.form-view .form-view-title{color:#333;text-align:center;background-color:#fff;width:100%;height:36px;margin-top:-10px;margin-bottom:10px;font-size:22px;line-height:36px}.form-view .tip{background-color:#ecf8ff;border-left:5px solid #50bfff;border-radius:4px;margin:20px 0;padding:8px 16px}.form-view .tip p{color:#5e6d82;font-size:14px;line-height:1.5em}.form-view .tip.danger{background-color:#fde2e2;border-left-color:#f56c6c}.form-view .tip.danger p{color:#564646}.form-view .tip.warning{background-color:#f7efe2;border-left-color:#e6a23c}.form-view .tip.warning p{color:#5d564b}.form-view .select-num{color:#898989;font-size:12px}.form-view .select-num .num{font-family:impact,Constantia,Georgia;font-size:19px}.form-view .el-table .el-table__header th{color:#595959;background:#fff;font-weight:400}.form-view .el-table td{padding:4px 0}

package/queue/index.mjs

@@ -0,0 +1,71 @@
+import { n as o } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+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: "animate__animated",
+    class: e.animate
+  }, [e._t("default")], 2)]);
+}, i = [];
+const l = {
+  name: "Queue",
+  props: {
+    enter: {
+      type: String,
+      default: "fadeInLeft"
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    delay: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      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__ */ o(
+  l,
+  s,
+  i,
+  !1,
+  c,
+  null,
+  null,
+  null
+);
+function c(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const d = /* @__PURE__ */ function() {
+  return u.exports;
+}();
+export {
+  d as default
+};

package/queue/style.css

@@ -0,0 +1 @@
+.avue-queue--block{display:inline-block}

package/record-video/index.mjs

@@ -0,0 +1,173 @@
+import { s } from "../chunks/util.C2Bhx22L.mjs";
+import { n as o } from "../chunks/vueComponentNormalizer.JwmUNtgn.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((r) => {
+        this.video && ("srcObject" in this.video ? this.video.srcObject = r : this.video.src = window.URL.createObjectURL(r), this.video.addEventListener("loadmetadata", () => {
+          var d;
+          (d = this.video) == null || d.play();
+        }), this.mediaRecorder = new MediaRecorder(r), this.mediaRecorder.addEventListener("dataavailable", (d) => {
+          this.chunks.push(d.data);
+        }), e(!0));
+      }).catch((r) => {
+        i(r);
+      });
+    });
+  }
+  /**
+   * 视频开始录制
+   */
+  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: 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 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,
+  m,
+  null,
+  null,
+  null
+);
+function m(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{width:500px;position:relative;overflow:hidden}.avue-video__border span{color:#0073eb;border-style:solid;border-width:4px;width:30px;height:30px;position:absolute}.avue-video__border span:first-child{border-bottom:0;border-right:0;top:15px;left:15px}.avue-video__border span:nth-child(2){border-bottom:0;border-left:0;top:15px;right:15px}.avue-video__border span:nth-child(3){border-top:0;border-right:0;bottom:15px;left:15px}.avue-video__border span:nth-child(4){border-top:0;border-left:0;bottom:15px;right:15px}.avue-video__img{width:100px;position:absolute;top:50%;left:50%;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.LGsb2aDq.mjs";
+import { n as h } from "../chunks/vueComponentNormalizer.JwmUNtgn.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,
+  f,
+  null,
+  null,
+  null
+);
+function f(e) {
+  for (let t in n)
+    this[t] = n[t];
+}
+const u = /* @__PURE__ */ function() {
+  return d.exports;
+}();
+export {
+  u as default
+};

package/resize-observer/style.css

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