@web-utils/component 2.0.13 → 2.2.0

package/dialog-form/index.mjs

@@ -0,0 +1,148 @@
+import { isEmpty as n } from "@web-utils/core";
+import { d as l } from "../chunks/util.C2Bhx22L.mjs";
+import r from "vue";
+import { n as c } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var d = function() {
+  var t = this, e = t.$createElement, o = t._self._c || e;
+  return o(t.dialogType, t._b({
+    tag: "Component",
+    staticClass: "dialog-form",
+    attrs: {
+      visible: t.visible,
+      "destroy-on-close": "",
+      "before-close": t.beforeClose
+    },
+    on: {
+      "update:visible": function(s) {
+        t.visible = s;
+      }
+    }
+  }, "Component", t.dialog, !1), [o("FyForm", {
+    ref: "form",
+    attrs: {
+      option: Object.assign({}, t.deepClone(t.option), {
+        menuBtn: !1
+      }),
+      status: t.disabled
+    },
+    on: {
+      "update:status": function(s) {
+        t.disabled = s;
+      },
+      submit: t.handleSubmit,
+      "reset-change": t.close
+    },
+    model: {
+      value: t.data,
+      callback: function(s) {
+        t.data = s;
+      },
+      expression: "data"
+    }
+  }), t.isEmpty(t.option.menuBtn, !0) ? o("span", {
+    staticClass: "avue-dialog__footer",
+    class: `avue-dialog__footer--${t.menuPosition}`
+  }, [t.isEmpty(t.option.submitBtn, !0) ? o("ElButton", {
+    attrs: {
+      size: t.$AVUE.size,
+      icon: t.option.submitIcon,
+      loading: t.disabled,
+      type: "primary"
+    },
+    on: {
+      click: t.submit
+    }
+  }, [t._v(t._s(t.option.submitText))]) : t._e(), t.isEmpty(t.option.emptyBtn, !0) ? o("ElButton", {
+    attrs: {
+      disabled: t.disabled,
+      size: t.$AVUE.size,
+      icon: t.option.emptyIcon
+    },
+    on: {
+      click: t.reset
+    }
+  }, [t._v(t._s(t.option.emptyText))]) : t._e()], 1) : t._e()], 1);
+}, m = [];
+const i = {
+  name: "DialogForm",
+  data() {
+    return {
+      opt: {},
+      disabled: !1,
+      callback: null,
+      visible: !1,
+      dialog: {
+        closeOnClickModal: !1
+      },
+      isDrawer: !1,
+      option: {
+        submitText: "提交",
+        emptyText: "关闭",
+        submitIcon: "el-icon-check",
+        emptyIcon: "el-icon-close",
+        column: []
+      },
+      data: {}
+    };
+  },
+  computed: {
+    dialogType() {
+      return this.isDrawer ? "ElDrawer" : "ElementDialog";
+    },
+    menuPosition() {
+      return this.opt.menuPosition || "center";
+    }
+  },
+  methods: {
+    isEmpty: n,
+    deepClone: l,
+    submit() {
+      this.$refs.form.submit();
+    },
+    reset() {
+      this.$refs.form.resetForm();
+    },
+    beforeClose(t) {
+      t(), this.close();
+    },
+    show(t) {
+      this.opt = t, this.callback = t.callback;
+      const e = this.deepClone(t);
+      ["callback", "option", "data"].forEach((o) => delete e[o]), this.dialog = Object.assign(this.dialog, e), this.dialog.size = this.dialog.width, this.isDrawer = this.dialog.type === "drawer", this.option = Object.assign(this.option, t.option), this.data = t.data, this.visible = !0;
+    },
+    close() {
+      const t = () => {
+        this.visible = !1, this.$destroy(), this.$el.remove();
+      };
+      typeof this.dialog.beforeClose == "function" ? this.dialog.beforeClose(t) : t();
+    },
+    handleSubmit(t, e) {
+      this.callback && this.callback({ data: t, close: this.close, done: e });
+    }
+  }
+};
+i.showForm = (t) => {
+  const e = r.extend(i), o = new e().$mount();
+  return document.body.appendChild(o.$el), o.show(t), o;
+};
+const u = i, a = {};
+var p = /* @__PURE__ */ c(
+  u,
+  d,
+  m,
+  !1,
+  b,
+  null,
+  null,
+  null
+);
+function b(t) {
+  for (let e in a)
+    this[e] = a[e];
+}
+const v = /* @__PURE__ */ function() {
+  return p.exports;
+}();
+export {
+  v as default
+};

package/dialog-form/style.css

@@ -0,0 +1 @@
+.dialog-form .element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body,.dialog-form .el-drawer__body{flex-direction:column;flex:auto;padding:0;display:flex}.dialog-form .element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body .avue-form,.dialog-form .el-drawer__body .avue-form{flex:auto}

package/dynamic-table/index.mjs

@@ -0,0 +1,195 @@
+import { fastClone as u, validateNumber as d, validateIdCard as c, validatePhoneNum as m } from "@web-utils/core";
+import { n as f } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var h = function() {
+  var e = this, i = e.$createElement, t = e._self._c || i;
+  return t("div", {
+    staticClass: "dynamic-table"
+  }, [t("ElTable", {
+    key: e.key,
+    staticStyle: {
+      width: "100%"
+    },
+    attrs: {
+      data: e.value
+    }
+  }, [e._l(e.columns, function(a) {
+    return t("TableColumn", {
+      key: a.prop,
+      attrs: {
+        prop: a.prop,
+        label: a.label,
+        "min-width": "150"
+      },
+      scopedSlots: e._u([{
+        key: "default",
+        fn: function(l) {
+          var n = l.row, r = l.$index;
+          return [t("ElFormItem", {
+            style: {
+              marginBottom: e.inputDisabled ? "0px" : "16px"
+            },
+            attrs: {
+              prop: `${e.prop}.${r}.${a.prop}`,
+              size: "mini",
+              rules: e.getRules(a)
+            }
+          }, [t("ElInput", {
+            attrs: {
+              "prefix-icon": e.getIcon(a),
+              disabled: e.inputDisabled,
+              placeholder: e.inputDisabled ? "" : `请输入${a.label}！`
+            },
+            model: {
+              value: n[a.prop],
+              callback: function(s) {
+                e.$set(n, a.prop, s);
+              },
+              expression: "row[column.prop]"
+            }
+          })], 1)];
+        }
+      }], null, !0)
+    });
+  }), e.inputDisabled ? e._e() : t("TableColumn", {
+    attrs: {
+      label: "操作",
+      width: "60",
+      fixed: "right"
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function(a) {
+        var l = a.row, n = a.column, r = a.$index;
+        return [t("i", {
+          staticClass: "el-icon-minus dynamic-table-action-icon",
+          staticStyle: {
+            position: "relative",
+            top: "-8px",
+            color: "#f00"
+          },
+          attrs: {
+            title: "删除"
+          },
+          on: {
+            click: function(s) {
+              return s.stopPropagation(), e.removeRow(l, r, n);
+            }
+          }
+        })];
+      }
+    }], null, !1, 410881950)
+  })], 2), e.inputDisabled ? e._e() : t("ElButton", {
+    staticStyle: {
+      color: "#08c108"
+    },
+    attrs: {
+      type: "text",
+      icon: "el-icon-plus"
+    },
+    on: {
+      click: e.addRow
+    }
+  }, [e._v(" 添加 ")])], 1);
+}, v = [];
+const o = {
+  number: "fa fa-superscript",
+  email: "el-icon-lx-mail",
+  phone: "fa fa-phone",
+  idCard: "el-icon-lx-news"
+}, y = {
+  name: "DynamicTable",
+  inject: {
+    elForm: {
+      default: ""
+    },
+    elFormItem: {
+      default: ""
+    }
+  },
+  props: {
+    prop: {
+      type: String,
+      default: "rows"
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {
+      key: 1
+    };
+  },
+  computed: {
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+  watch: {
+    value: {
+      deep: !0,
+      handler(e) {
+        this.$emit("input", e);
+      }
+    },
+    columns: {
+      deep: !0,
+      handler() {
+        this.key++;
+      }
+    }
+  },
+  methods: {
+    getIcon(e) {
+      return o[e.type] ? o[e.type] : "";
+    },
+    addRow() {
+      const e = this.value;
+      e.push(this.newRow()), this.$emit("input", e);
+    },
+    removeRow(e, i) {
+      const t = this.value;
+      t.splice(i, 1), this.$emit("input", t);
+    },
+    newRow() {
+      const e = {};
+      return this.columns.forEach((i) => {
+        e[i.prop] = void 0;
+      }), e;
+    },
+    getRules(e) {
+      const i = e.rules;
+      if (["email", "idCard", "phone", "number"].includes(e.type)) {
+        const t = u(i || []);
+        return e.type === "number" && t.push({ validator: d, message: "请输入数字！" }), e.type === "email" && t.push({ type: "email", message: "请输入正确的邮箱地址！" }), e.type === "idCard" && t.push({ validator: c, message: "请输入正确的身份证号码！" }), e.type === "phone" && t.push({ validator: m, message: "请输入正确的手机号码！" }), t;
+      } else
+        return i;
+    }
+  }
+}, p = {};
+var b = /* @__PURE__ */ f(
+  y,
+  h,
+  v,
+  !1,
+  w,
+  null,
+  null,
+  null
+);
+function w(e) {
+  for (let i in p)
+    this[i] = p[i];
+}
+const $ = /* @__PURE__ */ function() {
+  return b.exports;
+}();
+export {
+  $ as default
+};

package/dynamic-table/style.css

@@ -0,0 +1 @@
+.dynamic-table{flex-direction:column;align-items:center;width:100%;display:flex}.dynamic-table .dynamic-table-action-icon{cursor:pointer;margin-left:10px;font-weight:700}.dynamic-table .el-form-item{margin-bottom:0}.dynamic-table .el-table{flex:auto}.dynamic-table .el-table td{padding:2px 0}.dynamic-table .el-input.is-disabled .el-input__inner{background-color:transparent;border:none}

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.JwmUNtgn.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 m = /* @__PURE__ */ d(
+  f,
+  l,
+  p,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(t) {
+  for (let e in r)
+    this[e] = r[e];
+}
+const R = /* @__PURE__ */ function() {
+  return m.exports;
+}();
+export {
+  R as default
+};

package/e-charts/style.css

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

package/easy-popup/index.mjs

@@ -0,0 +1,136 @@
+var d = (e, t, i) => new Promise((o, a) => {
+  var h = (s) => {
+    try {
+      n(i.next(s));
+    } catch (r) {
+      a(r);
+    }
+  }, f = (s) => {
+    try {
+      n(i.throw(s));
+    } catch (r) {
+      a(r);
+    }
+  }, n = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(h, f);
+  n((i = i.apply(e, t)).next());
+});
+import { getComputedWidth as u, getComputedHeight as c } from "@web-utils/core";
+import { n as p } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var v = function() {
+  var e = this, t = e.$createElement, i = e._self._c || t;
+  return i("Transition", {
+    attrs: {
+      name: "easy-popup"
+    }
+  }, [e.rendered ? i("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: e.visible,
+      expression: "visible"
+    }],
+    ref: "container",
+    class: ["easy-popup", {
+      "easy-popup__visible": e.visible,
+      "easy-popup__hide": !e.visible,
+      "flex-row": e.flexRow,
+      "flex-column": e.flexColumn
+    }],
+    style: e.position,
+    on: {
+      mouseleave: function(o) {
+        e.hideOnMouseLeave && e.hide();
+      }
+    }
+  }, [e._t("default")], 2) : e._e()]);
+}, x = [];
+const m = {
+  name: "EasyPopup",
+  props: {
+    // 是否开启边界检测
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    // 显示点偏移量
+    offset: {
+      type: Object,
+      default: () => ({ x: 6, y: 2 })
+    },
+    // 边界距离
+    borderWidth: {
+      type: Number,
+      default: 6
+    },
+    appendToBody: Boolean,
+    flexRow: Boolean,
+    flexColumn: Boolean,
+    hideOnMouseLeave: {
+      type: Boolean,
+      default: !0
+    },
+    interactive: Boolean
+  },
+  data() {
+    return {
+      // 是否显示
+      visible: !1,
+      rendered: !1,
+      // 触发点坐标
+      axis: { x: 0, y: 0 }
+    };
+  },
+  computed: {
+    position() {
+      return {
+        top: `${this.axis.y + this.offset.y}px`,
+        left: `${this.axis.x + this.offset.x}px`
+      };
+    }
+  },
+  watch: {
+    axis() {
+      return d(this, null, function* () {
+        if (this.border) {
+          yield this.$nextTick();
+          const e = u(this.$refs.container), t = c(this.$refs.container), i = document.body.offsetWidth, o = document.body.offsetHeight;
+          this.axis.x + this.offset.x + e >= i && (this.axis.x = i - e - this.borderWidth - this.offset.x), this.axis.y + this.offset.y + t >= o && (this.axis.y = o - t - this.borderWidth - this.offset.y);
+        }
+      });
+    }
+  },
+  destroyed() {
+    this.$el.remove();
+  },
+  methods: {
+    show({ clientX: e, clientY: t }) {
+      this.axis = { x: e, y: t }, this.visible || (document.addEventListener("click", this.doHide, !0), this.rendered = !0, this.visible = !0), this.appendToBody && document.body.appendChild(this.$el);
+    },
+    hide() {
+      this.visible = !1, document.removeEventListener("click", this.doHide);
+    },
+    doHide(e) {
+      this.interactive && this.$el.contains(e.target) || this.hide();
+    }
+  }
+}, l = {};
+var y = /* @__PURE__ */ p(
+  m,
+  v,
+  x,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let t in l)
+    this[t] = l[t];
+}
+const B = /* @__PURE__ */ function() {
+  return y.exports;
+}();
+export {
+  B as default
+};

package/easy-popup/style.css

@@ -0,0 +1 @@
+.easy-popup{z-index:9999;background:#fff;border:1px solid #ebeef5;border-radius:4px;width:300px;min-height:200px;padding:12px;position:fixed;box-shadow:0 2px 12px rgba(0,0,0,.1)}@keyframes easy-popup-zoom-in{0%{opacity:0;transform:scale3d(0,0,0)}to{opacity:1}}.easy-popup-enter-active,.easy-popup-enter{animation:.2s easy-popup-zoom-in}@keyframes easy-popup-zoom-out{0%{opacity:1}to{opacity:0;transform:scale3d(0,0,0)}}.easy-popup-leave-active,.easy-popup-leave{animation:.2s easy-popup-zoom-out}