@web-utils/component 2.7.36 → 2.8.0

package/e-charts/index.mjs

@@ -0,0 +1,216 @@
+import * as s from "echarts/core";
+import { isString as a } from "@web-utils/core";
+import { debounce as n } from "@web-utils/integrations/lodash";
+import { addListener as o, removeListener as c } from "resize-detector";
+import { n as d } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var l = function() {
+  var t = this, e = t.$createElement, i = t._self._c || e;
+  return i("div", {
+    staticClass: "echarts",
+    style: {
+      width: t.width,
+      height: t.height
+    }
+  });
+}, p = [];
+const g = ["theme", "initOptions", "autoResize"], u = ["manualUpdate", "watchShallow"], f = {
+  name: "ECharts",
+  props: {
+    options: {
+      type: Object
+    },
+    theme: {
+      type: [String, Object]
+    },
+    initOptions: {
+      type: Object
+    },
+    group: {
+      type: String
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    autoResize: Boolean,
+    watchShallow: Boolean,
+    manualUpdate: Boolean
+  },
+  data() {
+    return {
+      lastArea: 0
+    };
+  },
+  watch: {
+    group(t) {
+      this.chart.group = t;
+    }
+  },
+  created() {
+    this.initOptionsWatcher(), g.forEach((t) => {
+      this.$watch(
+        t,
+        () => {
+          this.refresh();
+        },
+        { deep: !0 }
+      );
+    }), u.forEach((t) => {
+      this.$watch(t, () => {
+        this.initOptionsWatcher(), this.refresh();
+      });
+    });
+  },
+  mounted() {
+    this.options && this.init();
+  },
+  activated() {
+    this.autoResize && this.chart && this.chart.resize();
+  },
+  destroyed() {
+    this.chart && this.destroy();
+  },
+  methods: {
+    // provide an explicit merge option method
+    mergeOptions(t, e, i) {
+      this.manualUpdate && (this.manualOptions = t), this.chart ? this.delegateMethod("setOption", t, e, i) : this.init(t);
+    },
+    // just delegates ECharts methods to Vue component
+    // use explicit params to reduce transpiled size for now
+    appendData(t) {
+      this.delegateMethod("appendData", t);
+    },
+    resize(t) {
+      this.delegateMethod("resize", t);
+    },
+    dispatchAction(t) {
+      this.delegateMethod("dispatchAction", t);
+    },
+    convertToPixel(t, e) {
+      return this.delegateMethod("convertToPixel", t, e);
+    },
+    convertFromPixel(t, e) {
+      return this.delegateMethod("convertFromPixel", t, e);
+    },
+    containPixel(t, e) {
+      return this.delegateMethod("containPixel", t, e);
+    },
+    showLoading(t, e) {
+      this.delegateMethod("showLoading", t, e);
+    },
+    hideLoading() {
+      this.delegateMethod("hideLoading");
+    },
+    getDataURL(t) {
+      return this.delegateMethod("getDataURL", t);
+    },
+    getConnectedDataURL(t) {
+      return this.delegateMethod("getConnectedDataURL", t);
+    },
+    clear() {
+      this.delegateMethod("clear");
+    },
+    dispose() {
+      this.delegateMethod("dispose");
+    },
+    delegateMethod(t, ...e) {
+      return this.chart || this.init(), this.chart[t](...e);
+    },
+    delegateGet(t) {
+      return this.chart || this.init(), this.chart[t]();
+    },
+    getArea() {
+      return this.$el.offsetWidth * this.$el.offsetHeight;
+    },
+    init(t) {
+      if (this.chart)
+        return;
+      const e = s.init(this.$el, this.theme, this.initOptions);
+      this.group && (e.group = this.group), e.setOption(t || this.manualOptions || this.options || {}, !0), Object.keys(this.$listeners).forEach((i) => {
+        const h = this.$listeners[i];
+        i.indexOf("zr:") === 0 ? e.getZr().on(i.slice(3), h) : e.on(i, h);
+      }), this.autoResize && (this.lastArea = this.getArea(), this.__resizeHandler = n(
+        () => {
+          this.lastArea === 0 ? (this.mergeOptions({}, !0), this.resize(), this.mergeOptions(this.options || this.manualOptions || {}, !0)) : this.resize(), this.lastArea = this.getArea();
+        },
+        100,
+        { leading: !0 }
+      ), o(this.$el, this.__resizeHandler)), Object.defineProperties(this, {
+        // Only recalculated when accessed from JavaScript.
+        // Won't update DOM on value change because getters
+        // don't depend on reactive values
+        width: {
+          configurable: !0,
+          get: () => this.delegateGet("getWidth")
+        },
+        height: {
+          configurable: !0,
+          get: () => this.delegateGet("getHeight")
+        },
+        isDisposed: {
+          configurable: !0,
+          get: () => !!this.delegateGet("isDisposed")
+        },
+        computedOptions: {
+          configurable: !0,
+          get: () => this.delegateGet("getOption")
+        }
+      }), this.chart = e;
+    },
+    initOptionsWatcher() {
+      this.__unwatchOptions && (this.__unwatchOptions(), this.__unwatchOptions = null), this.manualUpdate || (this.__unwatchOptions = this.$watch(
+        "options",
+        (t, e) => {
+          !this.chart && t ? this.init() : this.chart.setOption(t, t !== e);
+        },
+        { deep: !this.watchShallow }
+      ));
+    },
+    destroy() {
+      this.autoResize && c(this.$el, this.__resizeHandler), this.dispose(), this.chart = null;
+    },
+    refresh() {
+      this.chart && (this.destroy(), this.init());
+    }
+  },
+  connect(t) {
+    a(t) || (t = t.map((e) => e.chart)), s.connect(t);
+  },
+  disconnect(t) {
+    s.disConnect(t);
+  },
+  getMap(t) {
+    return s.getMap(t);
+  },
+  registerMap(t, e, i) {
+    s.registerMap(t, e, i);
+  },
+  registerTheme(t, e) {
+    s.registerTheme(t, e);
+  },
+  graphic: s.graphic
+}, r = {};
+var _ = /* @__PURE__ */ d(
+  f,
+  l,
+  p,
+  !1,
+  m,
+  null,
+  null,
+  null
+);
+function m(t) {
+  for (let e in r)
+    this[e] = r[e];
+}
+const z = /* @__PURE__ */ function() {
+  return _.exports;
+}();
+export {
+  z as default
+};

package/e-charts/style.css

@@ -0,0 +1 @@
+.echarts{width:100%;height:100%}

package/easy-popup/index.mjs

@@ -0,0 +1,87 @@
+import { n as o } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var r = function() {
+  var e = this, t = e.$createElement, i = e._self._c || t;
+  return e.rendered ? i("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: e.visible,
+      expression: "visible"
+    }],
+    staticClass: "easy-popup",
+    style: e.axisComputed
+  }, [e._t("default")], 2) : e._e();
+}, n = [];
+const a = {
+  name: "EasyPopup",
+  props: {
+    // 是否开启边界检测
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    // 显示点偏移量
+    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`
+      };
+    }
+  },
+  watch: {
+    axis() {
+      if (this.border) {
+        const e = document.body.offsetWidth, t = document.body.offsetHeight;
+        this.axis.x + this.offset.x >= e && (this.axis.x = e - this.borderWidth - this.offset.x), this.axis.y + this.offset.y >= t && (this.axis.y = t - this.borderWidth - this.offset.y);
+      }
+    }
+  },
+  methods: {
+    show(e) {
+      document.addEventListener("click", this.hide, !0), this.axis = { x: e.clientX, y: e.clientY }, this.rendered = !0, this.visible = !0;
+    },
+    hide() {
+      this.visible = !1, document.removeEventListener("click", this.hide);
+    }
+  }
+}, s = {};
+var d = /* @__PURE__ */ o(
+  a,
+  r,
+  n,
+  !1,
+  h,
+  null,
+  null,
+  null
+);
+function h(e) {
+  for (let t in s)
+    this[t] = s[t];
+}
+const f = /* @__PURE__ */ function() {
+  return d.exports;
+}();
+export {
+  f as default
+};

package/easy-popup/style.css

@@ -0,0 +1 @@
+.easy-popup{position:fixed;z-index:9999;width:300px;min-height:200px;padding:12px;background:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px #0000001a;user-select:none}

package/editable-progress/index.mjs

@@ -0,0 +1,141 @@
+import { n as r } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var l = function() {
+  var e = this, t = e.$createElement, s = e._self._c || t;
+  return s("div", {
+    staticClass: "editable-progress",
+    on: {
+      mouseover: e.onMouseOver,
+      mousedown: e.onMouseDown,
+      mouseleave: e.onMouseLeave,
+      click: e.wrapperClick
+    }
+  }, [s("ElProgress", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !e.slider,
+      expression: "!slider"
+    }],
+    class: e.percent === 100 ? "progress__success" : "",
+    attrs: {
+      "stroke-width": e.strokeWidth,
+      "text-inside": "",
+      percentage: e.percent
+    }
+  }), e.disabled ? e._e() : s("ElSlider", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: e.slider,
+      expression: "slider"
+    }],
+    ref: "slider",
+    style: {
+      width: `${e.max === 100 ? 100 : e.max - 1}%`
+    },
+    attrs: {
+      "tooltip-class": e.tooltipClass,
+      max: e.max,
+      "format-tooltip": e.formatTooltip,
+      disabled: e.disabled,
+      step: e.step
+    },
+    on: {
+      input: e.onInput,
+      change: e.onChange
+    },
+    model: {
+      value: e.percent,
+      callback: function(i) {
+        e.percent = i;
+      },
+      expression: "percent"
+    }
+  })], 1);
+}, n = [];
+const a = {
+  name: "EditableProgress",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    strokeWidth: {
+      type: Number,
+      default: 22
+    },
+    step: {
+      type: Number,
+      default: 10
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      slider: !1,
+      mouseDown: !1,
+      tooltipClass: "hide-tooltip",
+      percent: this.value
+    };
+  },
+  watch: {
+    value(e) {
+      this.percent !== e && (this.percent = e);
+    }
+  },
+  methods: {
+    formatTooltip(e) {
+      return `${e}%`;
+    },
+    onInput(e) {
+      this.value !== e && this.$emit("input", e);
+    },
+    onChange(e) {
+      this.slider = !1, this.tooltipClass = "hide-tooltip", this.$emit("change", e);
+    },
+    onMouseOver() {
+      this.disabled || this.slider || (this.slider = !0, this.$nextTick(() => {
+        this.$refs.slider.$refs.button1.$refs.tooltip.updatePopper(), this.tooltipClass = "";
+      }));
+    },
+    onMouseDown() {
+      this.disabled || (this.mouseDown = !0, window.addEventListener("mouseup", this.onMouseUp));
+    },
+    onMouseUp() {
+      this.disabled || (this.mouseDown = !1, this.tooltipClass = "hide-tooltip", window.removeEventListener("mouseup", this.onMouseUp));
+    },
+    onMouseLeave() {
+      this.disabled || this.mouseDown || (this.tooltipClass = "hide-tooltip", this.slider = !1);
+    },
+    wrapperClick() {
+      this.disabled || (this.slider = !0);
+    }
+  }
+}, o = {};
+var u = /* @__PURE__ */ r(
+  a,
+  l,
+  n,
+  !1,
+  d,
+  null,
+  null,
+  null
+);
+function d(e) {
+  for (let t in o)
+    this[t] = o[t];
+}
+const h = /* @__PURE__ */ function() {
+  return u.exports;
+}();
+export {
+  h as default
+};

package/editable-progress/style.css

@@ -0,0 +1 @@
+.editable-progress{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;background-color:#e4e7ed;border-radius:100px}.editable-progress .el-progress,.editable-progress .el-slider{width:100%;font-weight:700}.editable-progress .el-slider__runway{margin:0}.editable-progress .el-progress-bar__outer{background-color:#e4e7ed}.editable-progress .el-slider__bar,.editable-progress .el-slider__runway{height:22px;border-radius:100px}.editable-progress .el-slider__button-wrapper{width:52px;height:52px}.editable-progress .el-slider__button-wrapper .el-slider__button{width:24px;height:24px}