@web-utils/component 2.0.13 → 2.2.0

package/context-menu/index.mjs

@@ -0,0 +1,255 @@
+import { n as a } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var d = function() {
+  var t = this, i = t.$createElement, e = t._self._c || i;
+  return t.rendered ? e("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: t.visible,
+      expression: "visible"
+    }],
+    staticClass: "cm-container",
+    style: t.axisComputed
+  }, [e("svg", {
+    staticStyle: {
+      position: "absolute",
+      width: "0",
+      height: "0",
+      overflow: "hidden"
+    },
+    attrs: {
+      "aria-hidden": "true"
+    }
+  }, [e("symbol", {
+    attrs: {
+      id: "icon-arrow",
+      viewBox: "0 0 1024 1024"
+    }
+  }, [e("path", {
+    attrs: {
+      d: "M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z"
+    }
+  })])]), e("ul", {
+    staticClass: "cm-ul cm-ul-1 easy-cm-ul",
+    class: t.underline ? "cm-underline" : ""
+  }, t._l(t.list, function(s, l) {
+    return e("li", {
+      key: l,
+      style: t.liStyle
+    }, [e("div", {
+      class: t.firstLeft ? "cm-left" : "",
+      on: {
+        click: function(n) {
+          return t.onItemClick(s, [l]);
+        }
+      }
+    }, [e("i", {
+      staticClass: "cm-item-icon",
+      class: s.icon
+    }), e("span", {
+      staticClass: "cm-item-label"
+    }, [t._v(t._s(s.text))]), t.arrow && s.children && s.children.length > 0 ? e("svg", {
+      staticClass: "icon",
+      attrs: {
+        "aria-hidden": "true"
+      }
+    }, [e("use", {
+      attrs: {
+        "xlink:href": "#icon-arrow"
+      }
+    })]) : t._e()]), s.children && s.children.length > 0 ? e("ul", {
+      staticClass: "cm-ul cm-ul-2 easy-cm-ul",
+      class: t.underline ? "cm-underline" : "",
+      style: t.secondBorderCheck(l)
+    }, t._l(s.children, function(n, r) {
+      return e("li", {
+        key: r,
+        style: t.liStyle
+      }, [e("div", {
+        class: t.secondLeft ? "cm-left" : "",
+        on: {
+          click: function(h) {
+            return t.onItemClick(n, [l, r]);
+          }
+        }
+      }, [e("i", {
+        staticClass: "cm-item-icon",
+        class: n.icon
+      }), e("span", {
+        staticClass: "cm-item-label"
+      }, [t._v(t._s(n.text))]), t.arrow && n.children && n.children.length > 0 ? e("svg", {
+        staticClass: "icon",
+        attrs: {
+          "aria-hidden": "true"
+        }
+      }, [e("use", {
+        attrs: {
+          "xlink:href": "#icon-arrow"
+        }
+      })]) : t._e()]), n.children && n.children.length > 0 ? e("ul", {
+        staticClass: "cm-ul cm-ul-3 easy-cm-ul",
+        class: t.underline ? "cm-underline" : "",
+        style: t.thirdBorderCheck(l, r)
+      }, t._l(n.children, function(h, o) {
+        return e("li", {
+          key: o,
+          style: t.liStyle
+        }, [e("div", {
+          on: {
+            click: function(p) {
+              return t.onItemClick(h, [l, r, o]);
+            }
+          }
+        }, [e("i", {
+          staticClass: "cm-item-icon",
+          class: h.icon
+        }), e("span", {
+          staticClass: "cm-item-label"
+        }, [t._v(t._s(h.text))])])]);
+      }), 0) : t._e()]);
+    }), 0) : t._e()]);
+  }), 0)]) : t._e();
+}, u = [];
+const m = {
+  name: "ContextMenu",
+  props: {
+    list: {
+      type: Array,
+      required: !0
+    },
+    // 是否开启下划线
+    underline: Boolean,
+    appendToBody: Boolean,
+    // 是否开启箭头
+    arrow: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否开启边界检测
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    // 列表项宽度
+    itemWidth: {
+      type: Number,
+      default: 140
+    },
+    // 列表项高度
+    itemHeight: {
+      type: Number,
+      default: 36
+    },
+    // 列表项字体
+    itemFontSize: {
+      type: [Number, String],
+      default: 12
+    },
+    // 显示点偏移量
+    offset: {
+      type: Object,
+      default: () => ({
+        x: 6,
+        y: 2
+      })
+    },
+    // 边界距离
+    borderWidth: {
+      type: Number,
+      default: 6
+    }
+  },
+  data() {
+    return {
+      // 是否显示
+      visible: !1,
+      rendered: !1,
+      // 触发点坐标
+      axis: {
+        x: 0,
+        y: 0
+      }
+    };
+  },
+  computed: {
+    axisComputed() {
+      return {
+        top: `${this.axis.y + this.offset.y}px`,
+        left: `${this.axis.x + this.offset.x}px`
+      };
+    },
+    liStyle() {
+      return {
+        width: `${this.itemWidth}px`,
+        height: `${this.itemHeight}px`,
+        lineHeight: `${this.itemHeight}px`,
+        fontSize: `${this.itemFontSize}px`
+      };
+    },
+    firstLeft() {
+      const t = document.body.offsetWidth;
+      return this.axis.x + this.itemWidth * 2 >= t;
+    },
+    secondLeft() {
+      const t = document.body.offsetWidth;
+      return this.axis.x + this.itemWidth * 3 >= t;
+    }
+  },
+  watch: {
+    axis() {
+      if (this.border) {
+        const t = document.body.offsetWidth, i = document.body.offsetHeight;
+        this.axis.x + this.offset.x + this.itemWidth >= t && (this.axis.x = t - this.itemWidth - this.borderWidth - this.offset.x), this.axis.y + this.offset.y + this.itemHeight * this.list.length >= i && (this.axis.y = i - this.itemHeight * this.list.length - this.borderWidth - this.offset.y);
+      }
+    }
+  },
+  destroyed() {
+    var t;
+    this.appendToBody && ((t = this.$el) != null && t.parentNode) && this.$el.parentNode.removeChild(this.$el);
+  },
+  methods: {
+    secondBorderCheck(t) {
+      const i = document.body.offsetWidth, e = document.body.offsetHeight, s = this.axis.y + (t + this.list[t].children.length) * this.itemHeight;
+      return {
+        left: this.axis.x + this.itemWidth * 2 >= i ? "-100%" : "100%",
+        top: e >= s ? 0 : `${-(this.list[t].children.length - 1) * this.itemHeight}px`
+      };
+    },
+    thirdBorderCheck(t, i) {
+      const e = document.body.offsetWidth, s = document.body.offsetHeight, l = this.axis.y + this.list[t].children[i].children.length * this.itemHeight + (t + i) * this.itemHeight + parseInt(this.secondBorderCheck(t).top);
+      return {
+        left: this.axis.x + this.itemWidth * 3 >= e ? "-100%" : "100%",
+        top: l > s ? `${-(this.list[t].children[i].children.length - 1) * this.itemHeight}px` : 0
+      };
+    },
+    show(t) {
+      document.addEventListener("click", this.hide, !0), this.axis = { x: t.clientX, y: t.clientY }, this.rendered = !0, this.visible = !0, this.appendToBody && document.body.appendChild(this.$el);
+    },
+    hide() {
+      this.visible = !1, document.removeEventListener("click", this.hide);
+    },
+    onItemClick(t, i) {
+      this.$emit("on-item-click", t, i);
+    }
+  }
+}, c = {};
+var f = /* @__PURE__ */ a(
+  m,
+  d,
+  u,
+  !1,
+  y,
+  null,
+  null,
+  null
+);
+function y(t) {
+  for (let i in c)
+    this[i] = c[i];
+}
+const b = /* @__PURE__ */ function() {
+  return f.exports;
+}();
+export {
+  b as default
+};

package/context-menu/style.css

@@ -0,0 +1 @@
+.cm-container{z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed}.cm-container .icon{vertical-align:-.15em;fill:currentColor;width:.9em;height:.9em;position:absolute;top:50%;right:0;overflow:hidden;transform:translateY(-50%)}.cm-container .cm-item-icon{margin-right:4px}.cm-container .cm-ul{color:#2e2e2e;background-color:#fff;width:100%;margin:0;padding:0;list-style:none;box-shadow:0 0 1px #666}.cm-container .cm-ul li{box-sizing:border-box;text-align:left;cursor:pointer;width:100%;position:relative}.cm-container .cm-ul li:hover>ul{display:block}.cm-container .cm-ul li div{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;width:100%;height:100%;padding:0 .8em;display:inline-block;position:relative;overflow:hidden}.cm-container .cm-ul li i{text-align:center;width:1em;font-size:1.3em;display:inline-block}.cm-container .cm-ul li div:hover{color:#fff;background-color:#666}.cm-container .cm-ul-2,.cm-container .cm-ul-3{z-index:10000;display:none;position:absolute;top:0}.cm-container .cm-left svg{left:0;transform:translateY(-50%)rotate(180deg)}.cm-container .cm-underline li div:after{z-index:10001;content:"";background-color:#ccc;width:90%;height:1px;position:absolute;top:0;left:5%}.cm-container .cm-underline li div:hover:after,.cm-container .cm-underline>li:first-child>div:after{display:none}

package/count-up/index.mjs

@@ -0,0 +1,131 @@
+var o = Object.defineProperty, c = Object.defineProperties;
+var d = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var r = (t, e, s) => e in t ? o(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, n = (t, e) => {
+  for (var s in e || (e = {}))
+    l.call(e, s) && r(t, s, e[s]);
+  if (i)
+    for (var s of i(e))
+      p.call(e, s) && r(t, s, e[s]);
+  return t;
+}, a = (t, e) => c(t, d(e));
+import { CountUp as h } from "countup.js";
+import { n as m } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var f = function() {
+  var t = this, e = t.$createElement, s = t._self._c || e;
+  return s("span", [t._v(t._s(t.end))]);
+}, _ = [];
+const y = {
+  name: "CountUp",
+  props: {
+    animation: {
+      type: Boolean,
+      default: !0
+    },
+    start: {
+      type: [Number, String],
+      required: !1,
+      default: 0
+    },
+    end: {
+      type: [Number, String],
+      required: !0
+    },
+    decimals: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      required: !1,
+      default: 2
+    },
+    options: {
+      type: Object,
+      required: !1,
+      default() {
+        return {};
+      }
+    },
+    callback: {
+      type: Function,
+      required: !1,
+      default: () => {
+      }
+    }
+  },
+  watch: {
+    decimals() {
+      var t;
+      (t = this.c) == null || t.update(this.end);
+    },
+    end(t) {
+      var e;
+      (e = this.c) == null || e.update(t);
+    }
+  },
+  mounted() {
+    this.animation && this.init();
+  },
+  beforeDestroy() {
+    this.destroy();
+  },
+  methods: {
+    init() {
+      this.c || (this.c = new h(
+        this.$el,
+        this.end,
+        a(n({}, this.options), {
+          decimal: this.decimals,
+          duration: this.duration,
+          startVal: this.start
+        })
+      ), this.c.start(() => {
+        this.callback(this.c);
+      }));
+    },
+    destroy() {
+      this.c = null;
+    }
+  },
+  start(t) {
+    var e;
+    (e = this.c) == null || e.start(() => {
+      t && t(this.c);
+    });
+  },
+  pauseResume() {
+    var t;
+    (t = this.c) == null || t.pauseResume();
+  },
+  reset() {
+    var t;
+    (t = this.c) == null || t.reset();
+  },
+  update(t) {
+    var e;
+    (e = this.c) == null || e.update(t);
+  }
+}, u = {};
+var v = /* @__PURE__ */ m(
+  y,
+  f,
+  _,
+  !1,
+  b,
+  null,
+  null,
+  null
+);
+function b(t) {
+  for (let e in u)
+    this[e] = u[e];
+}
+const U = /* @__PURE__ */ function() {
+  return v.exports;
+}();
+export {
+  U as default
+};

package/custom-scrollbar/index.mjs

@@ -0,0 +1,116 @@
+import "overlayscrollbars/overlayscrollbars.css";
+import { OverlayScrollbars as r } from "overlayscrollbars";
+import { defaults as c } from "lodash-es";
+import { n as a } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var h = function() {
+  var t = this, e = t.$createElement, o = t._self._c || e;
+  return o(t.element, {
+    tag: "Component"
+  }, [t._t("default")], 2);
+}, p = [];
+const u = {
+  name: "CustomScrollbar",
+  props: {
+    element: {
+      type: String,
+      default: "div"
+    },
+    options: Object,
+    theme: {
+      type: String,
+      default: "os-theme-dark"
+    },
+    onLoadMore: Function,
+    onScroll: Function,
+    reverse: Boolean
+  },
+  data() {
+    return {
+      scrollTop: 0
+    };
+  },
+  computed: {
+    innerOptions() {
+      return c(
+        {
+          scrollbars: { autoHide: "leave", autoHideDelay: 100, theme: this.theme }
+        },
+        this.options
+      );
+    }
+  },
+  watch: {
+    innerOptions(t) {
+      const e = this.scroller;
+      r.valid(e) && e.options(t);
+    }
+  },
+  mounted() {
+    this.scroller = r(
+      this.$el,
+      this.innerOptions,
+      {
+        scroll: this.internalScroll,
+        initialized: this.initialized
+      }
+    );
+  },
+  activated() {
+    var t;
+    this.viewport.scrollTop = (t = this.scrollTop) != null ? t : 0;
+  },
+  deactivated() {
+    this.scrollTop = this.viewport.scrollTop;
+  },
+  beforeDestroy() {
+    const t = this.scroller;
+    r.valid(t) && (t.destroy(), this.scroller = null);
+  },
+  methods: {
+    initialized(t) {
+      const { viewport: e } = t.elements();
+      this.viewport = e;
+    },
+    scrollBottom() {
+      this.viewport.scrollTop = this.viewport.scrollHeight;
+    },
+    getScroller() {
+      return this.scroller;
+    },
+    getScrollHeight() {
+      return this.viewport.scrollHeight;
+    },
+    setScrollTop(t) {
+      this.viewport.scrollTop = t;
+    },
+    internalScroll(t, e) {
+      var l, i, s;
+      const o = this.viewport;
+      if ((l = this.onScroll) == null || l.call(this, e), !this.reverse && Math.ceil(o.clientHeight + o.scrollTop) >= o.scrollHeight) {
+        (i = this.onLoadMore) == null || i.call(this);
+        return;
+      }
+      this.reverse && o.scrollTop === 0 && ((s = this.onLoadMore) == null || s.call(this));
+    }
+  }
+}, n = {};
+var d = /* @__PURE__ */ a(
+  u,
+  h,
+  p,
+  !1,
+  v,
+  null,
+  null,
+  null
+);
+function v(t) {
+  for (let e in n)
+    this[e] = n[e];
+}
+const g = /* @__PURE__ */ function() {
+  return d.exports;
+}();
+export {
+  g as default
+};

package/data-box/index.mjs

@@ -0,0 +1,97 @@
+import { n as r } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var c = function() {
+  var a = this, s = a.$createElement, n = a._self._c || s;
+  return n("div", {
+    staticClass: "data-box"
+  }, [n("ElRow", {
+    attrs: {
+      span: 24
+    }
+  }, a._l(a.data, function(t, i) {
+    return n("ElCol", {
+      key: i,
+      attrs: {
+        md: a.span,
+        xs: 24,
+        sm: 12
+      }
+    }, [n("div", {
+      staticClass: "item"
+    }, [n("a", {
+      attrs: {
+        href: t.href,
+        target: t.target
+      },
+      on: {
+        click: function(p) {
+          t.click && t.click(t);
+        }
+      }
+    }, [n("div", {
+      staticClass: "item-icon",
+      style: {
+        backgroundColor: t.color
+      }
+    }, [n("i", {
+      class: t.icon
+    })]), n("div", {
+      staticClass: "item-info"
+    }, [n("CountUp", {
+      staticClass: "title",
+      style: {
+        color: t.color
+      },
+      attrs: {
+        animation: t.animation || a.animation,
+        decimals: t.decimals || a.decimals,
+        end: t.count
+      }
+    }), n("div", {
+      staticClass: "info"
+    }, [a._v(a._s(t.title))])], 1)])])]);
+  }), 1)], 1);
+}, e = [];
+const l = {
+  name: "DataBox",
+  props: {
+    option: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  computed: {
+    animation() {
+      return this.option.animation;
+    },
+    decimals() {
+      return this.option.decimals || 0;
+    },
+    span() {
+      return this.option.span || 8;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  }
+}, o = {};
+var u = /* @__PURE__ */ r(
+  l,
+  c,
+  e,
+  !1,
+  d,
+  null,
+  null,
+  null
+);
+function d(a) {
+  for (let s in o)
+    this[s] = o[s];
+}
+const v = /* @__PURE__ */ function() {
+  return u.exports;
+}();
+export {
+  v as default
+};

package/data-box/style.css

@@ -0,0 +1 @@
+.data-box .item{box-sizing:border-box;border-radius:5px;width:96%;height:100px;margin:0 auto 10px;position:relative;overflow:hidden}.data-box .item:hover .item-text{top:0}.data-box .item a{text-decoration:none;display:flex}.data-box .item a:visited{color:inherit}.data-box .item-icon{color:#fff;text-align:center;justify-content:center;align-items:center;width:100px;height:100px;line-height:100px;display:flex}.data-box .item-icon i{font-size:48px!important}.data-box .item-info{background-color:#fff;border:1px solid #eee;border-left:none;border-radius:0 5px 5px 0;flex-direction:column;flex:1;justify-content:center;display:flex}.data-box .item-info .title{text-align:center;font-size:30px;line-height:40px}.data-box .item-info .info{color:#999;text-align:center;font-size:14px}

package/data-card/index.mjs

@@ -0,0 +1,98 @@
+import { n as s } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var c = function() {
+  var t = this, e = t.$createElement, r = t._self._c || e;
+  return r("div", {
+    staticClass: "data-card"
+  }, [r("ElRow", {
+    attrs: {
+      span: 24
+    }
+  }, t._l(t.data, function(o, n) {
+    return r("ElCol", {
+      key: n,
+      attrs: {
+        md: t.span,
+        xs: 24,
+        sm: 12
+      }
+    }, [r("div", {
+      staticClass: "item"
+    }, [r("a", {
+      attrs: {
+        href: o.href,
+        target: o.target
+      },
+      on: {
+        click: function(p) {
+          o.click && o.click(o);
+        }
+      }
+    }, [r("img", {
+      staticClass: "item-img",
+      attrs: {
+        src: o.src,
+        alt: ""
+      }
+    }), r("div", {
+      staticClass: "item-text",
+      style: {
+        backgroundColor: t.bgText
+      }
+    }, [r("h3", {
+      style: {
+        color: t.colorText
+      }
+    }, [t._v(t._s(o.name))]), r("p", {
+      style: {
+        color: t.colorText
+      }
+    }, [t._v(t._s(o.text))])])])])]);
+  }), 1)], 1);
+}, l = [];
+const i = {
+  name: "DataCard",
+  props: {
+    option: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    data() {
+      return this.option.data || [];
+    },
+    colorText() {
+      return this.option.colorText || "#fff";
+    },
+    bgText() {
+      return this.option.bgText || "#2e323f";
+    },
+    borderColor() {
+      return this.option.borderColor || "#2e323f";
+    }
+  }
+}, a = {};
+var u = /* @__PURE__ */ s(
+  i,
+  c,
+  l,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(t) {
+  for (let e in a)
+    this[e] = a[e];
+}
+const f = /* @__PURE__ */ function() {
+  return u.exports;
+}();
+export {
+  f as default
+};

package/data-card/style.css

@@ -0,0 +1 @@
+.data-card .item{border:1px solid #fff;border-radius:5px;width:230px;height:340px;margin:0 auto 50px;position:relative;overflow:hidden}.data-card .item:hover .item-text{top:0}.data-card .item-img{border-radius:5px 5px 0 0;width:100%}.data-card .item-text{box-sizing:border-box;opacity:.9;border-radius:0 0 5px 5px;width:100%;height:340px;padding:20px 15px;transition:top .4s;position:absolute;top:150px;overflow:auto}.data-card .item-text>p{text-indent:2em;font-size:12px;line-height:25px}