dpot-ui 0.1.0

package/dist/index.es.js

@@ -0,0 +1,893 @@
+var x = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("div", {
+    class: ["dp-check_view_", e.value.includes(e.data.code) && "dp-check_view_checked_"],
+    attrs: {
+      disabled: e.disabled
+    },
+    on: {
+      click: function(t) {
+        return t.stopPropagation(), e.handleChange.apply(null, arguments);
+      }
+    }
+  }, [o("span", {
+    staticClass: "dp-check_tag_"
+  }), o("span", {
+    staticClass: "dp-check_name_"
+  }, [e._v(e._s(e.data.name))])]);
+}, S = [];
+function h(e, r, o, t, n, s, a, l) {
+  var i = typeof e == "function" ? e.options : e;
+  r && (i.render = r, i.staticRenderFns = o, i._compiled = !0), t && (i.functional = !0), s && (i._scopeId = "data-v-" + s);
+  var d;
+  if (a ? (d = function(c) {
+    c = c || // cached call
+    this.$vnode && this.$vnode.ssrContext || // stateful
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !c && typeof __VUE_SSR_CONTEXT__ < "u" && (c = __VUE_SSR_CONTEXT__), n && n.call(this, c), c && c._registeredComponents && c._registeredComponents.add(a);
+  }, i._ssrRegister = d) : n && (d = l ? function() {
+    n.call(
+      this,
+      (i.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : n), d)
+    if (i.functional) {
+      i._injectStyles = d;
+      var I = i.render;
+      i.render = function($, p) {
+        return d.call(p), I($, p);
+      };
+    } else {
+      var f = i.beforeCreate;
+      i.beforeCreate = f ? [].concat(f, d) : [d];
+    }
+  return {
+    exports: e,
+    options: i
+  };
+}
+const w = {
+  name: "dp-check",
+  props: {
+    data: {
+      type: Object
+    },
+    value: {
+      type: Array
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  methods: {
+    handleChange() {
+      if (this.disabled)
+        return;
+      const e = this.value.includes(this.data.code) ? this.value.filter((r) => r !== this.data.code) : [...this.value, this.data.code];
+      this.$emit("change", e, this.data.key);
+    }
+  }
+}, g = {};
+var k = /* @__PURE__ */ h(
+  w,
+  x,
+  S,
+  !1,
+  D,
+  "1b8ae42a",
+  null,
+  null
+);
+function D(e) {
+  for (let r in g)
+    this[r] = g[r];
+}
+const H = /* @__PURE__ */ function() {
+  return k.exports;
+}();
+var F = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("div", {
+    class: ["dp-radio_view_", e.value === e.data.code && "dp-radio_view_checked_"],
+    attrs: {
+      disabled: e.disabled
+    },
+    on: {
+      click: function(t) {
+        return t.stopPropagation(), e.handleChange.apply(null, arguments);
+      }
+    }
+  }, [o("span", {
+    staticClass: "dp-radio_tag_"
+  }), o("span", {
+    staticClass: "dp-radio_name_"
+  }, [e._v(e._s(e.data.name))])]);
+}, j = [];
+const O = {
+  name: "dp-radio",
+  props: {
+    data: {
+      type: Object
+    },
+    value: {
+      type: [String, Number, Boolean]
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  methods: {
+    handleChange() {
+      if (this.disabled)
+        return !1;
+      this.$emit("change", this.data.code, this.data.key);
+    }
+  }
+}, b = {};
+var R = /* @__PURE__ */ h(
+  O,
+  F,
+  j,
+  !1,
+  M,
+  "e7bf9628",
+  null,
+  null
+);
+function M(e) {
+  for (let r in b)
+    this[r] = b[r];
+}
+const T = /* @__PURE__ */ function() {
+  return R.exports;
+}();
+var E = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("div", {
+    staticClass: "dp-checkfilter_view_"
+  }, [o("span", {
+    class: [e.value.length && "dp-checkfilter_title_checked_"]
+  }, [e._v(e._s(e.title))]), o("span", {
+    staticClass: "dp-checkfilter_arrow_"
+  }), o("div", {
+    staticClass: "dp-checkfilter_option_view_"
+  }, [o("div", {
+    staticClass: "dp-checkfilter_option_list_"
+  }, [e.type === "check" ? e._l(e.option, function(t) {
+    return o("dp-check", {
+      key: t.code,
+      attrs: {
+        data: Object.assign({}, t, {
+          key: e.code
+        }),
+        value: e.value
+      },
+      on: {
+        change: e.handleChange
+      }
+    });
+  }) : e.type === "radio" ? e._l(e.option, function(t) {
+    return o("dp-radio", {
+      key: t.code,
+      attrs: {
+        data: Object.assign({}, t, {
+          key: e.code
+        }),
+        value: e.value[0]
+      },
+      on: {
+        change: e.handleChange
+      }
+    });
+  }) : e._e()], 2)])]);
+}, W = [];
+const z = {
+  name: "dp-checkfilter",
+  components: {
+    DpCheck: H,
+    DpRadio: T
+  },
+  props: {
+    title: {
+      type: String
+    },
+    code: {
+      type: String
+    },
+    type: {
+      type: String,
+      validator(e) {
+        return ["check", "radio"].includes(e);
+      }
+    },
+    option: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleChange(e, r) {
+      this.$emit("change", { key: r, value: [e].flat() });
+    }
+  }
+}, v = {};
+var L = /* @__PURE__ */ h(
+  z,
+  E,
+  W,
+  !1,
+  P,
+  "20c78138",
+  null,
+  null
+);
+function P(e) {
+  for (let r in v)
+    this[r] = v[r];
+}
+const B = /* @__PURE__ */ function() {
+  return L.exports;
+}();
+var K = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("li", {
+    class: ["dp-table_header_item_ dp-table_header_item_height_", e.item.children ? "dp-table_header_item_group_" : "dp-table_header_item_border_", e.item.sortKey && "dp-table_header_item_cursor_"],
+    style: Object.assign({
+      borderColor: e.borderColor,
+      justifyContent: e.align
+    }, e.item.style, e.item.privateStyle),
+    on: {
+      click: function(t) {
+        return t.stopPropagation(), e.handleItemClick(e.item, e.fullCode);
+      }
+    }
+  }, [e._t(e.item.slot || e.item.code, function() {
+    return [e.item.children ? [o("div", {
+      staticClass: "dp-table_header_item_border_ dp-table_header_item_group_title_ dp-table_header_item_height_",
+      style: {
+        borderColor: e.borderColor,
+        justifyContent: e.align
+      }
+    }, [e._v(e._s(e.item.name))]), e.item.children ? o("ul", {
+      staticClass: "dp-table_header_item_child_",
+      style: {
+        borderColor: e.borderColor
+      }
+    }, e._l(e.item.children, function(t) {
+      return o("dp-table-header-item", {
+        key: t.code,
+        attrs: {
+          align: e.align,
+          fullCode: [].concat(e.fullCode, [t.code]),
+          item: t,
+          borderColor: e.borderColor,
+          sortInfo: e.sortInfo,
+          filterInfo: e.filterInfo
+        },
+        on: {
+          changeWidth: e.handleChildResize,
+          changeSort: e.handleItemClick,
+          changeFilter: e.handleChangeFilter
+        },
+        scopedSlots: e._u([e._l(e.$slots, function(n, s) {
+          return {
+            key: s,
+            fn: function() {
+              return [e._t(s)];
+            },
+            proxy: !0
+          };
+        })], null, !0)
+      });
+    }), 1) : e._e()] : e.item.type && e.item.option ? [o("dp-checkfilter", {
+      staticClass: "dp-table_header_filter_view_",
+      style: {
+        justifyContent: e.align
+      },
+      attrs: {
+        title: e.item.name,
+        code: e.item.filterKey || e.item.code,
+        type: e.item.type,
+        option: e.item.option,
+        value: (e.filterInfo[e.fullCode.join("_")] || {}).value
+      },
+      on: {
+        change: e.handleChangeFilter
+      }
+    })] : [e._v(" " + e._s(e.item.name) + " "), e.item.sortKey ? o("span", {
+      class: ["dp-table_header_item_sort_", e.sortInfo.target.join("_") === e.fullCode.join("_") && e.sortInfo.value === "up" && "dp-table_header_item_sort_up_", e.sortInfo.target.join("_") === e.fullCode.join("_") && e.sortInfo.value === "down" && "dp-table_header_item_sort_down_"]
+    }) : e._e()]];
+  })], 2);
+}, A = [];
+const N = {
+  name: "dp-table-header-item",
+  components: {
+    DpCheckfilter: B
+  },
+  props: {
+    item: {
+      type: Object
+    },
+    align: {
+      type: String
+    },
+    borderColor: {
+      type: String
+    },
+    sortInfo: {
+      type: Object
+    },
+    filterInfo: {
+      type: Object
+    },
+    fullCode: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      resizer: null,
+      widthObj: {}
+    };
+  },
+  methods: {
+    handleResize() {
+      this.$emit("changeWidth", { [this.fullCode.join("_")]: this.$el.offsetWidth });
+    },
+    handleChildResize(e) {
+      this.widthObj = { ...this.widthObj, ...e }, this.$emit("changeWidth", e);
+    },
+    handleItemClick(e, r) {
+      this.$emit("changeSort", { ...e }, r);
+    },
+    handleChangeFilter(e) {
+      this.$emit("changeFilter", { [this.fullCode.join("_")]: { target: this.fullCode, ...e, filterKey: this.item.filterKey || this.item.code, filterFn: this.item.filterFn } });
+    }
+  },
+  mounted() {
+    this.item.children || (this.resizer = new ResizeObserver(this.handleResize), this.resizer.observe(this.$el));
+  },
+  beforeUnMounted() {
+    this.resizer && this.resizer.unobserve(this.$el);
+  }
+}, y = {};
+var U = /* @__PURE__ */ h(
+  N,
+  K,
+  A,
+  !1,
+  q,
+  "4272af7c",
+  null,
+  null
+);
+function q(e) {
+  for (let r in y)
+    this[r] = y[r];
+}
+const V = /* @__PURE__ */ function() {
+  return U.exports;
+}(), u = (e, r, o) => {
+  const t = e[o];
+  if (!t.isFixed || !r[t.code])
+    return {};
+  const n = (a) => typeof a == "number" ? [a] : Object.values(a).map((l) => n(l)).flat();
+  return { position: "sticky", left: `${e.filter((a, l) => l < o && a.isFixed).map((a) => n(r[a.code])).reduce((a, l) => parseFloat(a) + parseFloat(l), 0)}px` };
+}, _ = (e, r) => {
+  const o = e[r[0]];
+  return r.length > 1 ? _(o, r.slice(1)) : o;
+};
+var X = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("ul", {
+    staticClass: "dp-table_header_view_",
+    style: {
+      borderColor: e.borderColor,
+      backgroundColor: e.bgColor
+    }
+  }, e._l(e.data, function(t, n) {
+    return o("dp-item", {
+      key: t.code,
+      class: [t.isFixed && "dp-table_fixed_bg_", e.isLeftScroll && "dp-table_fixed_shadow_"],
+      style: Object.assign({}, e.fixedStyle[n]),
+      attrs: {
+        item: t,
+        align: e.align,
+        fullCode: [t.code],
+        borderColor: e.borderColor,
+        sortInfo: e.sortInfo,
+        filterInfo: e.filterInfo
+      },
+      on: {
+        changeWidth: e.handleChangeWidthInfo,
+        changeSort: e.handleChangeSort,
+        changeFilter: e.handleChangeFilter
+      },
+      scopedSlots: e._u([e._l(e.$slots, function(s, a) {
+        return {
+          key: a,
+          fn: function() {
+            return [e._t(a)];
+          },
+          proxy: !0
+        };
+      })], null, !0)
+    });
+  }), 1);
+}, G = [];
+const J = {
+  name: "dp-table-header",
+  components: {
+    DpItem: V
+  },
+  props: {
+    // 表头数据
+    data: {
+      type: Array
+    },
+    // 文字对齐方向
+    align: {
+      type: String
+    },
+    // 边框色
+    borderColor: {
+      type: String
+    },
+    // 背景色
+    bgColor: {
+      type: String
+    },
+    // 是否左滚动
+    isLeftScroll: {
+      type: Boolean
+    },
+    // 排序
+    sortInfo: {
+      type: Object
+    },
+    // 筛选
+    filterInfo: {
+      type: Object
+    }
+  },
+  computed: {
+    fixedStyle() {
+      return this.data.map((e, r) => ({ ...u(this.data, this.widthInfo, r), backgroundColor: this.bgColor }));
+    }
+  },
+  data() {
+    return {
+      widthInfo: {},
+      timer: null
+    };
+  },
+  methods: {
+    computFixedStyle: u,
+    handleChangeWidthInfo(e) {
+      this.widthInfo = { ...this.widthInfo, ...e }, clearTimeout(this.timer), this.timer = setTimeout(() => {
+        this.$emit("changeWidth", this.widthInfo);
+      }, 300);
+    },
+    handleChangeSort(e, r) {
+      this.$emit("changeSort", e, r);
+    },
+    handleChangeFilter(e) {
+      this.$emit("changeFilter", e);
+    }
+  }
+}, m = {};
+var Q = /* @__PURE__ */ h(
+  J,
+  X,
+  G,
+  !1,
+  Y,
+  "2553e3f4",
+  null,
+  null
+);
+function Y(e) {
+  for (let r in m)
+    this[r] = m[r];
+}
+const Z = /* @__PURE__ */ function() {
+  return Q.exports;
+}();
+var ee = function() {
+  var e = this, r = e.$createElement, o = e._self._c || r;
+  return o("div", {
+    staticClass: "dp-table_view_border_",
+    style: {
+      borderColor: e.borderColor
+    }
+  }, [o("div", {
+    ref: "table",
+    staticClass: "dp-table_view_",
+    on: {
+      "&scroll": function(t) {
+        return e.handleScroll.apply(null, arguments);
+      }
+    }
+  }, [o("dp-header", {
+    ref: "header",
+    attrs: {
+      data: e.resultHeadData,
+      align: e.dir,
+      borderColor: e.borderColor,
+      bgColor: e.bgColor,
+      isLeftScroll: !!e.scrollLeft,
+      sortInfo: e.sortInfo,
+      filterInfo: e.filterInfo
+    },
+    on: {
+      changeWidth: e.handleSetWidthInfo,
+      changeSort: e.handleChangeSort,
+      changeFilter: e.handleChangeFilter
+    },
+    scopedSlots: e._u([e._l(e.$slots, function(t, n) {
+      return {
+        key: n,
+        fn: function() {
+          return [e._t(n)];
+        },
+        proxy: !0
+      };
+    })], null, !0)
+  }), o("div"), o("div", {
+    staticClass: "dp-table_body_view_",
+    style: {
+      height: e.fullHeight + "px",
+      paddingTop: e.beforeHeight + "px"
+    }
+  }, e._l(e.resultData, function(t) {
+    return o("div", {
+      key: t.__key,
+      class: ["dp-table_body_item_", t.__isTotalData && "dp-table_total_view_"],
+      style: Object.assign({
+        background: e.evenColor
+      }, t.style, e.hoverStyle, {
+        height: `${e.fullHeightInfo[t.__key]}px`
+      }),
+      on: {
+        mouseenter: function(n) {
+          return e.handleChangeFlag(!0);
+        },
+        mouseleave: function(n) {
+          return e.handleChangeFlag(!1);
+        }
+      }
+    }, [e._l(e.deepHeadData, function(n, s) {
+      return [t[n.code] instanceof Object ? [t[n.code].slot ? o("div", {
+        class: ["dp-table_body_item_group_col_", n.isFixed && "dp-table_fixed_bg_", !!e.scrollLeft && "dp-table_fixed_shadow_"],
+        style: Object.assign({
+          borderColor: e.borderColor
+        }, n.style, n.colStyle, {
+          background: e.evenColor
+        }, e.fixedStyle[s], e.computWidth(t[n.code]))
+      }, e._l([t[n.code].slot].flat(), function(a) {
+        return o("div", {
+          key: a,
+          staticClass: "dp-table_body_item_child_",
+          style: Object.assign({
+            borderColor: e.borderColor,
+            padding: e.itemPadding,
+            justifyContent: e.dir
+          }, n.style, n.colStyle, t[n.code].style, {
+            width: "100%"
+          })
+        }, [e._t(a, null, {
+          item: t
+        })], 2);
+      }), 0) : t[n.code].raw ? o("div", {
+        class: ["dp-table_body_item_group_col_", n.isFixed && "dp-table_fixed_bg_", !!e.scrollLeft && "dp-table_fixed_shadow_"],
+        style: Object.assign({
+          borderColor: e.borderColor
+        }, n.style, n.colStyle, {
+          background: e.evenColor
+        }, e.fixedStyle[s], e.computWidth(t[n.code]))
+      }, e._l([t[n.code].raw].flat(), function(a, l) {
+        return o("div", {
+          key: l,
+          staticClass: "dp-table_body_item_child_",
+          style: Object.assign({
+            borderColor: e.borderColor,
+            padding: e.itemPadding,
+            justifyContent: e.dir
+          }, n.style, n.colStyle, t[n.code].style, {
+            width: "100%"
+          }),
+          domProps: {
+            innerHTML: e._s(a)
+          }
+        });
+      }), 0) : t[n.code].value ? o("div", {
+        class: ["dp-table_body_item_group_col_", n.isFixed && "dp-table_fixed_bg_", !!e.scrollLeft && "dp-table_fixed_shadow_"],
+        style: Object.assign({
+          borderColor: e.borderColor
+        }, n.style, n.colStyle, {
+          background: e.evenColor
+        }, e.fixedStyle[s], e.computWidth(t[n.code]))
+      }, e._l([t[n.code].value].flat(), function(a, l) {
+        return o("div", {
+          key: l,
+          staticClass: "dp-table_body_item_child_",
+          style: Object.assign({
+            borderColor: e.borderColor,
+            padding: e.itemPadding,
+            justifyContent: e.dir
+          }, n.style, n.colStyle, t[n.code].style, {
+            width: "100%"
+          })
+        }, [e._v(e._s(a))]);
+      }), 0) : e._e()] : o("div", {
+        class: ["dp-table_body_item_child_", n.isFixed && "dp-table_fixed_bg_", !!e.scrollLeft && "dp-table_fixed_shadow_"],
+        style: Object.assign({
+          borderColor: e.borderColor,
+          padding: e.itemPadding,
+          justifyContent: e.dir
+        }, n.style, n.colStyle, {
+          background: e.evenColor
+        }, e.fixedStyle[s])
+      }, [e._v(e._s(t[n.code]))])];
+    }), t.__isTotalData ? o("span", {
+      staticClass: "dp-table_total_border_",
+      style: {
+        borderColor: e.borderColor
+      }
+    }) : e._e()], 2);
+  }), 0)], 1)]);
+}, te = [];
+const re = {
+  name: "dp-table",
+  components: {
+    DpHeader: Z
+  },
+  props: {
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: "#ebeef5"
+    },
+    // 表头背景色
+    bgColor: {
+      type: String,
+      default: "#f5f7fa"
+    },
+    // 偶数行背景色
+    evenColor: {
+      type: String,
+      default: ""
+    },
+    // hover行背景色
+    hoverColor: {
+      type: String,
+      default: ""
+    },
+    // 内容对齐方向
+    align: {
+      type: String,
+      default: "center",
+      validator(e) {
+        return ["left", "center", "right"].includes(e);
+      }
+    },
+    // 表头数据
+    headData: {
+      type: Array,
+      required: !0
+    },
+    // 表体数据
+    bodyData: {
+      type: Array,
+      required: !0
+    },
+    // 合计数据
+    totalData: {
+      type: Object
+    },
+    // 表体单行高度
+    rowHeight: {
+      type: Number,
+      default: 0
+    },
+    // 表体单元格高度
+    rowItemHeight: {
+      type: Number,
+      default: 48
+    },
+    // 起始序号，默认不显示序号
+    basicSub: {
+      type: Number,
+      default: 0
+    },
+    // 单元格内边距
+    itemPadding: {
+      type: String,
+      default: "0 10px"
+    }
+  },
+  computed: {
+    // 文字对齐方向
+    dir() {
+      return {
+        left: "flex-start",
+        center: "center",
+        right: "flex-end"
+      }[this.align];
+    },
+    // 组装序号表头
+    resultHeadData() {
+      const e = this.basicSub > 0 ? { name: "序号", code: "__sub", isFixed: !0, style: { width: "70px" }, privateStyle: { background: this.bgColor } } : null;
+      return e ? [e, ...this.headData] : this.headData;
+    },
+    // 平铺表头
+    deepHeadData() {
+      const e = [], r = (o) => {
+        o.children ? o.children.forEach((t) => r({ ...t, code: `${o.code}_${t.code}` })) : e.push(o);
+      };
+      return this.resultHeadData.forEach((o) => r(o)), e;
+    },
+    // 筛选后的表体数据
+    filterBodyData() {
+      const e = Object.values(this.filterInfo).filter((r) => r.value.length);
+      return e.length ? [...this.bodyData].filter((r) => {
+        let o = !0;
+        return e.some((t) => {
+          if (!t.value.includes(_(r, t.target)))
+            return o = !1, !0;
+        }), o;
+      }) : this.bodyData;
+    },
+    // 表体各行高度数据
+    fullHeightInfo() {
+      return this.filterBodyData.concat(this.totalData ? [this.totalData] : []).map((e, r) => {
+        let o = 0;
+        if (this.rowHeight)
+          o = this.rowHeight;
+        else if (this.rowItemHeight) {
+          const t = {}, n = (a, l) => {
+            l.children ? l.children.forEach((i) => n((a || {})[i.code], { ...i, code: `${l.code}_${i.code}` })) : t[l.code] = a;
+          };
+          this.headData.filter((a) => a.children).forEach((a) => n(e[a.code], a)), o = Math.max(...this.deepHeadData.map((a) => t[a.code] instanceof Object ? t[a.code].slot ? [t[a.code].slot].flat().length : t[a.code].raw ? [t[a.code].raw].flat().length : t[a.code].value ? [t[a.code].value].flat().length : 1 : 1)) * this.rowItemHeight;
+        }
+        return o;
+      });
+    },
+    // 表体渲染数据
+    resultData() {
+      return Object.keys(this.widthInfo).length < this.headData.length || !this.headData.length ? [] : (this.sortInfo.value ? [...this.filterBodyData].sort((r, o) => {
+        const t = _(r, this.sortInfo.target), n = _(o, this.sortInfo.target);
+        return this.sortInfo.value === "up" ? t - n : n - t;
+      }) : this.filterBodyData).slice(this.beforeIndex, this.currentIndex).concat(this.totalData ? [{ ...this.totalData, __sub: "", __isTotalData: !0 }] : []).map((r, o) => {
+        const t = {}, n = (s, a) => {
+          a.children ? a.children.forEach((l) => n((s || {})[l.code], { ...l, code: `${a.code}_${l.code}` })) : t[a.code] = s;
+        };
+        return this.headData.filter((s) => s.children).forEach((s) => n(r[s.code], s)), Object.keys(t).forEach((s) => {
+          if (t[s] instanceof Object && (t[s].merge || 0) > 1) {
+            const a = this.deepHeadData.findIndex((i) => i.code === s), l = this.deepHeadData.slice(a, a + t[s].merge);
+            l.forEach((i) => {
+              const d = t[i.code];
+              d instanceof Object || (t[i.code] = { value: d }), t[i.code] = { ...t[i.code], isMergeIgnored: !0 };
+            }), t[s].isMerge = !0, t[s].width = l.map((i) => this.widthInfo[i.code]).reduce((i, d) => i + d, 0);
+          }
+        }), {
+          __sub: o + parseInt(this.basicSub) + this.beforeIndex,
+          ...r,
+          ...t,
+          __key: o + this.beforeIndex
+        };
+      });
+    },
+    // 冻结列样式
+    fixedStyle() {
+      return this.headData.map((e, r) => u(this.resultHeadData, this.widthInfo, r));
+    },
+    // 行hover样式
+    hoverStyle() {
+      return this.headData.map((e) => this.hoverFlag ? { background: this.hoverColor } : {});
+    },
+    // 表体总高度
+    fullHeight() {
+      return this.fullHeightInfo.reduce((e, r) => e + r, 0);
+    },
+    // 计算单行高度
+    resultRowHeight() {
+      return this.rowHeight || (this.rowItemHeight * (this.bodyData.length + (this.totalData ? 1 : 0)) === this.fullHeight ? this.rowItemHeight : this.rowHeight);
+    },
+    // 前置填充高度
+    beforeHeight() {
+      return Math.max(this.resultRowHeight ? this.beforeIndex * this.resultRowHeight : this.fullHeightInfo.slice(0, this.beforeIndex).reduce((e, r) => e + r, 0), 0);
+    }
+  },
+  watch: {
+    bodyData() {
+      this.$refs.table.scrollTop = 0, this.$refs.table.scrollLeft = 0, this.scrollLeft = 0, this.beforeIndex = 0, this.currentIndex = 30;
+    }
+  },
+  data() {
+    return {
+      widthInfo: {},
+      scrollLeft: 0,
+      currentIndex: 30,
+      beforeIndex: 0,
+      timer: null,
+      hoverFlag: !1,
+      sortInfo: {
+        target: [],
+        value: null
+      },
+      filterInfo: {}
+    };
+  },
+  methods: {
+    // 计算合并单元格的宽度
+    computWidth(e) {
+      return e instanceof Object && e.isMerge ? { width: `${e.width}px` } : {};
+    },
+    // 收集表头各单元格宽度数据
+    handleSetWidthInfo(e) {
+      this.widthInfo = e;
+    },
+    // 滚动事件
+    handleScroll(e) {
+      this.scrollLeft = e.target.scrollLeft, clearTimeout(this.timer), this.timer = setTimeout(() => {
+        if (this.resultRowHeight)
+          this.beforeIndex = Math.max(Math.floor((e.target.scrollTop - this.$el.offsetHeight / 2) / this.resultRowHeight), 0), this.currentIndex = Math.max(this.beforeIndex + Math.ceil(this.$el.offsetHeight / this.resultRowHeight) * 2, 30);
+        else {
+          let r = 0, o = 0;
+          this.beforeIndex = this.fullHeightInfo.findIndex((t) => {
+            const n = r + t >= e.target.scrollTop - this.$el.offsetHeight / 2;
+            return n || (r += t), n;
+          }), o = r, this.currentIndex = Math.max(this.beforeIndex + this.fullHeightInfo.slice(this.beforeIndex).findIndex((t) => (o += t, o >= r + this.$el.offsetHeight * 2)), 30);
+        }
+      }, 10);
+    },
+    // 单行hover
+    handleChangeFlag(e) {
+      this.hoverFlag = e;
+    },
+    // 操作排序
+    handleChangeSort(e, r) {
+      if (this.sortInfo.target.join("_") === r.join("_")) {
+        const o = ["up", "down", null];
+        this.sortInfo.value = o[(o.findIndex((t) => t === (this.sortInfo.value || null)) + 1) % o.length];
+      } else
+        this.sortInfo = { target: r, value: "up", sortKey: e.sortKey, sortFn: e.sortFn || null };
+      this.$emit("changeSort", { key: e.sortKey, value: this.sortInfo.value });
+    },
+    // 操作筛选
+    handleChangeFilter(e) {
+      this.filterInfo = { ...this.filterInfo, ...e }, this.beforeIndex = 0, this.currentIndex = 30, this.$refs.table.scrollTop = 0, this.$emit("changeFilter", Object.values(this.filterInfo).map((r) => ({ key: r.key, value: r.value })));
+    }
+  }
+}, C = {};
+var oe = /* @__PURE__ */ h(
+  re,
+  ee,
+  te,
+  !1,
+  ne,
+  "c60b4a66",
+  null,
+  null
+);
+function ne(e) {
+  for (let r in C)
+    this[r] = C[r];
+}
+const ae = /* @__PURE__ */ function() {
+  return oe.exports;
+}(), ie = [
+  ae
+], se = {
+  install: (e) => {
+    ie.forEach((r) => e.component(r.name, r));
+  }
+};
+export {
+  ae as Table,
+  se as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.dp-check_view_[data-v-1b8ae42a]{font-size:14px;padding:5px 10px;min-width:60px;display:flex;cursor:pointer}.dp-check_view_[data-v-1b8ae42a]:hover{background-color:#e8e8e8}.dp-check_view_[disabled][data-v-1b8ae42a]{pointer-events:none}.dp-check_tag_[data-v-1b8ae42a]{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #999;margin-right:10px;transform:translateY(1px)}.dp-check_name_[data-v-1b8ae42a]{white-space:break-spaces}.dp-check_view_checked_ .dp-check_tag_[data-v-1b8ae42a]{border-color:#fe8227;background-color:#fe8227}.dp-check_view_checked_ .dp-check_tag_[data-v-1b8ae42a]:before{content:"";width:9px;height:5px;border-bottom:1px solid #fff;border-left:1px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}.dp-check_view_checked_ .dp-check_name_[data-v-1b8ae42a]{color:#fe8227}.dp-radio_view_[data-v-e7bf9628]{font-size:14px;padding:5px 10px;min-width:60px;display:flex;cursor:pointer}.dp-radio_view_[data-v-e7bf9628]:hover{background-color:#e8e8e8}.dp-radio_view_[disabled][data-v-e7bf9628]{pointer-events:none}.dp-radio_tag_[data-v-e7bf9628]{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #999;margin-right:10px;transform:translateY(1px)}.dp-radio_name_[data-v-e7bf9628]{white-space:break-spaces}.dp-radio_view_checked_ .dp-radio_tag_[data-v-e7bf9628]{border-color:#fe8227}.dp-radio_view_checked_ .dp-radio_tag_[data-v-e7bf9628]:before{content:"";width:10px;height:10px;border-radius:50%;background-color:#fe8227}.dp-radio_view_checked_ .dp-radio_name_[data-v-e7bf9628]{color:#fe8227}.dp-checkfilter_view_[data-v-20c78138]{display:flex;align-items:center;justify-content:center;padding:10px 0;position:relative;cursor:pointer}.dp-checkfilter_arrow_[data-v-20c78138]{position:relative;width:6px;height:6px;margin:0 10px;border-bottom:2px solid #999;border-left:2px solid #999;transform:rotate(-45deg) translateY(-2px);transition:all .1s}.dp-checkfilter_option_view_[data-v-20c78138]{overflow:hidden;visibility:hidden;position:absolute;z-index:1000;left:0;top:100%;width:100%;border-radius:5px;box-shadow:3px 3px 10px #c3c3c3;transform:scaleY(0);transform-origin:top;transition:all .1s}.dp-checkfilter_title_checked_[data-v-20c78138]{color:#fe8227}.dp-checkfilter_view_:hover .dp-checkfilter_arrow_[data-v-20c78138]{transform:rotate(135deg) translate(3px,-3px)}.dp-checkfilter_view_:hover .dp-checkfilter_option_view_[data-v-20c78138]{transform:scale(1);overflow:visible;visibility:inherit}.dp-checkfilter_option_view_[data-v-20c78138]:before{content:"";position:absolute;left:calc(50% - 4px);top:-4px;width:8px;height:8px;background-color:#fff;box-shadow:3px 3px 10px #c3c3c3;transform:rotate(45deg)}.dp-checkfilter_option_list_[data-v-20c78138]{max-height:400px;overflow:auto;border-radius:5px;background-color:#fff;position:relative;z-index:2}.dp-table_header_item_height_[data-v-4272af7c]{min-height:40px}.dp-table_header_item_[data-v-4272af7c]{white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;flex-shrink:0}.dp-table_header_item_group_[data-v-4272af7c]{flex-direction:column;align-items:stretch}.dp-table_header_item_group_title_[data-v-4272af7c]{display:flex;align-items:center;justify-content:center}.dp-table_header_item_border_[data-v-4272af7c]{border-right:1px solid;border-bottom:1px solid;padding:3px 10px}.dp-table_header_item_child_[data-v-4272af7c]{display:flex}.dp-table_header_item_sort_[data-v-4272af7c]{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;width:16px;height:12px}.dp-table_header_item_sort_[data-v-4272af7c]:before,.dp-table_header_item_sort_[data-v-4272af7c]:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}.dp-table_header_item_sort_[data-v-4272af7c]:before{border-bottom:5px solid #999}.dp-table_header_item_sort_[data-v-4272af7c]:after{border-top:5px solid #999}.dp-table_header_item_sort_up_[data-v-4272af7c]:before{border-bottom-color:#fe8227}.dp-table_header_item_sort_down_[data-v-4272af7c]:after{border-top-color:#fe8227}.dp-table_header_item_cursor_[data-v-4272af7c]{cursor:pointer}.dp-table_header_filter_view_[data-v-4272af7c]{flex:1}.dp-table_header_view_[data-v-2553e3f4]{flex-shrink:0;display:inline-flex;border-top:1px solid;position:sticky;z-index:3;top:0;user-select:none}.dp-table_fixed_bg_[data-v-2553e3f4]{background-color:#fff}.dp-table_fixed_bg_.dp-table_fixed_shadow_[data-v-2553e3f4]{box-shadow:5px 0 8px -3px #e3e3e3}.dp-table_view_border_[data-v-c60b4a66]{border:1px solid;border-top:0;display:inline-block;max-width:100%;font-size:0}.dp-table_view_[data-v-c60b4a66]{display:inline-block;max-width:100%;overflow:auto;max-height:80vh;font-size:0;position:relative;box-sizing:border-box}.dp-table_body_view_[data-v-c60b4a66]{display:inline-flex;flex-direction:column;box-sizing:border-box;min-height:50px}.dp-table_body_view_[data-v-c60b4a66]:empty{display:flex;align-items:center;justify-content:center}.dp-table_body_view_[data-v-c60b4a66]:empty:before{content:"\6682\65e0\6570\636e";line-height:2;color:#999}.dp-table_view_>*[data-v-c60b4a66]{font-size:14px}.dp-table_body_item_[data-v-c60b4a66]{display:inline-flex}.dp-table_fixed_bg_[data-v-c60b4a66]{background-color:#fff}.dp-table_fixed_bg_.dp-table_fixed_shadow_[data-v-c60b4a66]{box-shadow:5px 0 8px -3px #e3e3e3}.dp-table_body_item_group_col_[data-v-c60b4a66]{display:flex;flex-direction:column}.dp-table_body_item_group_col_>*[data-v-c60b4a66]{flex:1}.dp-table_body_item_child_[data-v-c60b4a66]{flex-shrink:0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:30px;border-right:1px solid;border-bottom:1px solid;box-sizing:border-box;overflow:hidden}.dp-table_total_view_[data-v-c60b4a66]{position:sticky;bottom:0;display:inline-flex;background-color:#fff;overflow:visible}.dp-table_total_border_[data-v-c60b4a66]{position:absolute;left:0;top:-1px;color:inherit;z-index:4;width:100%;border-top:1px solid}

package/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "dpot-ui",
+    "private": false,
+    "version": "0.1.0",
+    "author": "Jeesn",
+    "main": "./dist/index.es.js",
+    "module": "./dist/index.es.js",
+    "style": "./dist/style.css",
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.es.js"
+        },
+        "./*": "./*"
+    },
+    "files": [
+        "dist",
+        "docs"
+    ],
+    "peerDependencies": {
+        "vue": ">=2.6.14"
+    }
+}