@web-utils/component 2.7.35 → 2.7.37

package/dist/components/page-skeleton/index.mjs

@@ -0,0 +1,56 @@
+import { n as o } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var a = function() {
+  var e = this, t = e.$createElement, n = e._self._c || t;
+  return n("Page", {
+    staticClass: "page-skeleton"
+  }, [e.header ? e._t("header", function() {
+    return [e.title ? n("PageHeader", {
+      attrs: {
+        title: e.title
+      }
+    }) : n("NavBar")];
+  }) : e._e(), n("div", {
+    class: ["page-content", {
+      "flex-column": e.flexColumn,
+      "flex-row": e.flexRow,
+      "content-scroll": e.contentScroll
+    }, e.contentClass]
+  }, [e._t("default")], 2)], 2);
+}, r = [];
+const s = {
+  name: "PageSkeleton",
+  props: {
+    title: String,
+    flexColumn: Boolean,
+    flexRow: Boolean,
+    header: {
+      type: Boolean,
+      default: !0
+    },
+    contentClass: String,
+    contentScroll: {
+      type: Boolean,
+      default: !0
+    }
+  }
+}, l = {};
+var c = /* @__PURE__ */ o(
+  s,
+  a,
+  r,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let t in l)
+    this[t] = l[t];
+}
+const i = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  i as default
+};

package/dist/components/page-skeleton/style.css

@@ -1,23 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.page-skeleton .page-content {
-  position: relative;
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-}
-.page-skeleton .page-content.content-scroll {
-  overflow: auto;
-}
-.page-skeleton .page-content.flex-column {
-  display: flex;
-  flex-direction: column;
-  height: 0;
-}
-.page-skeleton .page-content.flex-row {
-  display: flex;
-}
+.page-skeleton .page-content{position:relative;flex:1 1 auto;width:100%;height:100%}.page-skeleton .page-content.content-scroll{overflow:auto}.page-skeleton .page-content.flex-column{display:flex;flex-direction:column;height:0}.page-skeleton .page-content.flex-row{display:flex}

package/dist/components/page-skeleton-new/index.mjs

@@ -0,0 +1,98 @@
+import { n as a } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var s = function() {
+  var e = this, l = e.$createElement, t = e._self._c || l;
+  return t("Page", {
+    staticClass: "page-skeleton-new",
+    attrs: {
+      horizontal: ""
+    }
+  }, [t("div", {
+    staticClass: "page-skeleton-new-left",
+    style: {
+      width: e.sidebarWidth
+    }
+  }, [e.header ? t("div", {
+    staticClass: "page-skeleton-new-header",
+    staticStyle: {
+      "margin-right": "0"
+    }
+  }, [t("span", {
+    staticClass: "section-title"
+  }, [e._v(e._s(e.title))])]) : e._e(), t("div", {
+    staticClass: "flex-item",
+    staticStyle: {
+      "border-right": "1px solid #eee"
+    }
+  }, [e._t("sidebar-content", function() {
+    return [e._v(" 侧栏内容 ")];
+  })], 2)]), t("div", {
+    staticClass: "page-skeleton-new-right",
+    style: {
+      width: `calc(100% - ${e.sidebarWidth})`
+    }
+  }, [e.header ? t("div", {
+    staticClass: "page-skeleton-new-header",
+    staticStyle: {
+      "margin-left": "0",
+      "padding-left": "10px"
+    }
+  }, [t("div", {
+    staticClass: "flex-item flex-row vertical-center"
+  }, [e._t("header-left")], 2), t("div", {
+    staticClass: "flex-item flex-row vertical-center"
+  }, [t("div", {
+    class: ["flex-row", "flex-item", "vertical-center", "align-end"]
+  }, [e._t("header-right")], 2)])]) : e._e(), t("div", {
+    class: ["page-skeleton-new-page-content", "flex-item", {
+      "flex-column": e.flexColumn,
+      "flex-row": e.flexRow,
+      "content-scroll": e.contentScroll
+    }, e.contentClass]
+  }, [e._t("default", function() {
+    return [e._v("内容")];
+  })], 2)])]);
+}, i = [];
+const r = {
+  name: "PageSkeletonNew",
+  props: {
+    title: {
+      type: String,
+      default: "页面标题"
+    },
+    flexColumn: Boolean,
+    flexRow: Boolean,
+    header: {
+      type: Boolean,
+      default: !0
+    },
+    contentClass: String,
+    contentScroll: {
+      type: Boolean,
+      default: !0
+    },
+    sidebarWidth: {
+      type: String,
+      default: "240px"
+    }
+  }
+}, n = {};
+var o = /* @__PURE__ */ a(
+  r,
+  s,
+  i,
+  !1,
+  c,
+  null,
+  null,
+  null
+);
+function c(e) {
+  for (let l in n)
+    this[l] = n[l];
+}
+const _ = /* @__PURE__ */ function() {
+  return o.exports;
+}();
+export {
+  _ as default
+};

package/dist/components/page-skeleton-new/style.css

@@ -1,42 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.page-skeleton-new .page-skeleton-new-header {
-  display: flex;
-  flex-direction: row;
-  height: 40px;
-  margin: 0 10px;
-  line-height: 40px;
-  border-bottom: 2px #eee solid;
-}
-.page-skeleton-new .page-skeleton-new-header .align-end {
-  justify-content: flex-end;
-}
-.page-skeleton-new .page-skeleton-new-left {
-  display: flex;
-  flex-direction: column;
-}
-.page-skeleton-new .page-skeleton-new-right {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-.page-skeleton-new .page-skeleton-new-page-content {
-  flex: 1 1 auto;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.page-skeleton-new .page-skeleton-new-page-content.content-scroll {
-  overflow: auto;
-}
-.page-skeleton-new .page-skeleton-new-page-content.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-.page-skeleton-new .page-skeleton-new-page-content.flex-row {
-  display: flex;
-}
+.page-skeleton-new .page-skeleton-new-header{display:flex;flex-direction:row;height:40px;margin:0 10px;line-height:40px;border-bottom:2px #eee solid}.page-skeleton-new .page-skeleton-new-header .align-end{justify-content:flex-end}.page-skeleton-new .page-skeleton-new-left{display:flex;flex-direction:column}.page-skeleton-new .page-skeleton-new-right{flex:1 1 auto;display:flex;flex-direction:column}.page-skeleton-new .page-skeleton-new-page-content{flex:1 1 auto;position:relative;width:100%;height:100%}.page-skeleton-new .page-skeleton-new-page-content.content-scroll{overflow:auto}.page-skeleton-new .page-skeleton-new-page-content.flex-column{display:flex;flex-direction:column}.page-skeleton-new .page-skeleton-new-page-content.flex-row{display:flex}

package/dist/components/pageable-table/index.mjs

@@ -0,0 +1,478 @@
+var v = Object.defineProperty, $ = Object.defineProperties;
+var w = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, a, t) => a in e ? v(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, c = (e, a) => {
+  for (var t in a || (a = {}))
+    f.call(a, t) && g(e, t, a[t]);
+  if (p)
+    for (var t of p(a))
+      b.call(a, t) && g(e, t, a[t]);
+  return e;
+}, m = (e, a) => $(e, w(a));
+var y = (e, a) => {
+  var t = {};
+  for (var s in e)
+    f.call(e, s) && a.indexOf(s) < 0 && (t[s] = e[s]);
+  if (e != null && p)
+    for (var s of p(e))
+      a.indexOf(s) < 0 && b.call(e, s) && (t[s] = e[s]);
+  return t;
+};
+var h = (e, a, t) => new Promise((s, l) => {
+  var u = (r) => {
+    try {
+      i(t.next(r));
+    } catch (d) {
+      l(d);
+    }
+  }, n = (r) => {
+    try {
+      i(t.throw(r));
+    } catch (d) {
+      l(d);
+    }
+  }, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(u, n);
+  i((t = t.apply(e, a)).next());
+});
+import { hasOwn as C } from "@web-utils/core";
+import { cloneDeep as _, merge as k } from "@web-utils/integrations/lodash";
+import { f as S, h as x, i as P } from "../../chunks/index.9b7a65d1.mjs";
+import { n as B } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var E = function() {
+  var e = this, a = e.$createElement, t = e._self._c || a;
+  return t("div", {
+    class: ["pageable-table", {
+      "auto-height": e.autoHeight
+    }]
+  }, [t("div", {
+    staticClass: "pageable-table-wrapper"
+  }, [e._t("toolbar"), t("ElTable", e._g(e._b({
+    ref: "table",
+    class: ["flex-item", {
+      "header-bold": e.headerBold
+    }],
+    attrs: {
+      data: e.records,
+      border: e.border
+    },
+    on: {
+      "hook:updated": e.updateTableScrollPosition,
+      "sort-change": e.onSortChange,
+      "row-dblclick": e.rowDbClick,
+      "current-change": e.onCurrentChange
+    },
+    scopedSlots: e._u([{
+      key: "empty",
+      fn: function() {
+        return [e._t("empty", function() {
+          return [e.tableStatus === e.TABLE_STATUS.loading ? [t("span", {
+            staticClass: "pageable-table-loading"
+          }, [t("i", {
+            staticClass: "table-status-icon el-icon-loading"
+          }), e._v(" 加载中...")])] : e.tableStatus === e.TABLE_STATUS.error ? [t("ElButton", {
+            staticClass: "pageable-table-error",
+            attrs: {
+              icon: "table-status-icon fa fa-frown-o"
+            },
+            on: {
+              click: e.refresh
+            }
+          }, [e._v(" 加载失败，点击重试！ ")])] : [e._v(" 暂无数据 ")]];
+        })];
+      },
+      proxy: !0
+    }, {
+      key: "append",
+      fn: function() {
+        return [e._t("append")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "ElTable", e.filterTableProperties(e.mergeAttrs), !1), e.filterTableEvents(e.$listeners)), [e.multiple && e.selection ? t("TableColumn", {
+    key: "multiple",
+    attrs: {
+      type: "selection",
+      width: "45",
+      align: "center"
+    }
+  }) : e._e(), !e.multiple && e.selection ? t("TableColumn", {
+    key: "single",
+    attrs: {
+      type: "single-selection",
+      "class-name": "single-select-column",
+      width: "45",
+      align: "center"
+    },
+    scopedSlots: e._u([{
+      key: "header",
+      fn: function() {
+        return [t("ElRadio", {
+          attrs: {
+            value: !!e.currentRow,
+            label: !0
+          }
+        }, [t("span")])];
+      },
+      proxy: !0
+    }, {
+      key: "default",
+      fn: function(s) {
+        var l = s.row;
+        return [t("ElRadio", {
+          attrs: {
+            label: !0,
+            value: e.currentRow && e.currentRow[e.$attrs["row-key"] || "id"] === l[e.$attrs["row-key"] || "id"]
+          }
+        }, [t("span")])];
+      }
+    }], null, !1, 307797321)
+  }) : e._e(), e.index ? t("TableColumn", {
+    key: "order",
+    attrs: {
+      type: "index",
+      label: "序号",
+      width: e.indexWidth,
+      align: "center"
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function(s) {
+        var l = s.$index;
+        return [e._v(" " + e._s((e.page.page - 1) * e.page.limit + l + 1 || l + 1) + " ")];
+      }
+    }], null, !1, 4238275121)
+  }) : e._e(), e._t("default", function() {
+    return [e.columns && e.columns.length ? e._l(e.headers, function(s, l) {
+      return t("TableColumn", e._b({
+        key: `${s.prop}-${l}`
+      }, "TableColumn", s, !1));
+    }) : t("TableColumn", {
+      attrs: {
+        label: "点击表格行复制模板"
+      },
+      scopedSlots: e._u([{
+        key: "default",
+        fn: function(s) {
+          var l = s.row;
+          return [t("pre", {
+            staticClass: "pointer"
+          }, [e._v(e._s(JSON.stringify(l, null, "	")))])];
+        }
+      }])
+    })];
+  })], 2), t("ElPagination", {
+    staticClass: "flex-not-shrink",
+    attrs: {
+      "current-page": e.page.page,
+      "hide-on-single-page": e.hideOnSinglePage,
+      "page-size": e.page.limit,
+      total: e.page.total,
+      background: "",
+      layout: "total, prev, pager, next, jumper"
+    },
+    on: {
+      "current-change": function(s) {
+        e.page.page = s;
+      }
+    }
+  })], 2)]);
+}, A = [];
+const o = {
+  loading: 1,
+  error: -1,
+  empty: 2,
+  success: 0
+}, R = {
+  name: "PageableTable",
+  bus: {
+    reloadTableView(e) {
+      e === this.viewId && this.getPage();
+    }
+  },
+  inheritAttrs: !1,
+  props: {
+    viewId: {
+      type: String
+    },
+    url: {
+      type: String
+    },
+    httpGet: Boolean,
+    hideOnSinglePage: Boolean,
+    api: {
+      type: Function
+    },
+    filters: {
+      type: Object
+    },
+    filter: {
+      type: Object
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    model: {
+      type: Object
+    },
+    ascs: {
+      type: String,
+      default: ""
+    },
+    descs: {
+      type: String,
+      default: ""
+    },
+    headerBold: Boolean,
+    autoHeight: Boolean,
+    immediate: {
+      type: Boolean,
+      default: !0
+    },
+    index: {
+      type: Boolean,
+      default: !0
+    },
+    multiple: {
+      type: Boolean,
+      default: !0
+    },
+    selection: {
+      type: Boolean,
+      default: !0
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    reloadOnModelChange: {
+      type: Boolean,
+      default: !1
+    },
+    columns: {
+      type: Array
+    },
+    pageSize: {
+      type: Number,
+      default: 25
+    }
+  },
+  data() {
+    let e = { rules: [] };
+    this.rules && this.rules.length > 0 && (e.rules = this.rules), this.filters && (e = this.filters), this.filter && (e = Object.assign({}, e, this.filter));
+    let a = {};
+    this.model && (a = _(this.model));
+    const t = this.pageSize;
+    return {
+      TABLE_STATUS: Object.freeze(o),
+      tableStatus: o.empty,
+      records: [],
+      currentRow: null,
+      page: {
+        total: 0,
+        page: 1,
+        limit: t,
+        ascs: this.ascs,
+        descs: this.descs,
+        model: a,
+        filters: e
+      }
+    };
+  },
+  computed: {
+    guard() {
+      return this.reloadOnModelChange ? {
+        asc: this.page.ascs,
+        desc: this.page.descs,
+        page: this.page.page,
+        model: this.page.model,
+        filters: this.page.filters
+      } : {
+        asc: this.page.ascs,
+        desc: this.page.descs,
+        page: this.page.page,
+        filters: this.page.filters
+      };
+    },
+    method() {
+      return this.httpGet ? this.httpGet : this.httpPost;
+    },
+    indexWidth() {
+      const e = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
+      return e.length > 3 ? 50 + (e.length - 3) * 10 : 50;
+    },
+    mergeAttrs() {
+      return k({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
+    },
+    headers() {
+      var e;
+      return ((e = this.columns) == null ? void 0 : e.map(S)) || [];
+    }
+  },
+  watch: {
+    url: { handler: "reload" },
+    api: { handler: "reload" },
+    "$attrs.data"() {
+      this.getPage();
+    },
+    model: {
+      deep: !0,
+      handler(e) {
+        this.setModel(e);
+      }
+    }
+  },
+  created() {
+    this.$watch(() => this.guard, this.getPage, {
+      deep: !0,
+      immediate: this.immediate
+    });
+  },
+  mounted() {
+    this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
+  },
+  beforeDestroy() {
+    this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
+  },
+  methods: {
+    rowDbClick(...e) {
+      var t;
+      const a = this.$refs.table.$children.find((s) => {
+        var l;
+        return ((l = s.$options) == null ? void 0 : l.name) === "ElTableBody";
+      });
+      a && ((t = a.$refs.tooltip) == null || t.hide()), this.$emit("row-dblclick", ...e);
+    },
+    updateTableScrollPosition() {
+      return h(this, null, function* () {
+        this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+      });
+    },
+    filterTableProperties: x,
+    filterTableEvents: P,
+    filterTableColumnProperties: S,
+    onTableScroll() {
+      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
+    },
+    onSortChange({
+      prop: e,
+      order: a
+    }) {
+      this.page.ascs = a === "ascending" ? e : "", this.page.descs = a === "descending" ? e : "";
+    },
+    onCurrentChange(e) {
+      this.currentRow = e;
+    },
+    /**
+     *
+     * @param {FilterRule} rule
+     */
+    addRule(e) {
+      this.removeRule(e.field), this.page.filters.rules.push(e);
+    },
+    addRules(e) {
+      e.forEach((a) => this.addRule(a));
+    },
+    setModelField(e, a) {
+      this.$set(this.page.model, e, a);
+    },
+    setModel(e) {
+      this.page.page = 1, this.page.model = _(e);
+    },
+    deleteModelField(e) {
+      delete this.page.model[e];
+    },
+    removeRule(e) {
+      const a = this.page.filters.rules, t = a.findIndex((s) => s.field === e);
+      t > -1 && a.splice(t, 1);
+    },
+    addFilter({
+      field: e,
+      op: a,
+      value: t
+    }) {
+      this.page.filters = Object.assign({}, this.page.filters, {
+        rules: [{
+          field: e,
+          op: a,
+          value: t
+        }],
+        op: "and"
+      });
+    },
+    clearFilters() {
+      this.page.filters = {};
+    },
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
+    search() {
+      this.setModel(this.model), this.getPage();
+    },
+    getPage() {
+      return h(this, null, function* () {
+        var r;
+        if (C(this.$attrs, "data")) {
+          this.records = this.$attrs.data, this.page.page = 1, this.page.total = this.records.length, this.page.limit = this.page.total;
+          return;
+        }
+        this.records = [];
+        let e;
+        const i = this.page, { filters: a } = i, t = y(i, ["filters"]), s = c({}, t);
+        if ((r = a == null ? void 0 : a.rules) != null && r.length && (s.filters = { rules: a.rules }), this.api || this.url) {
+          this.tableStatus = o.loading;
+          try {
+            this.api && (e = yield this.api(s)), this.url && (e = yield this.method(this.url, s));
+          } catch (d) {
+            this.tableStatus = o.error, console.error(d);
+            return;
+          }
+        } else {
+          this.$notify.warning({
+            title: "开发提示！",
+            message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
+          });
+          return;
+        }
+        const { data: l } = e || {}, { total: u, records: n } = l || {};
+        this.page.total = Number(u), this.records = n, !n || !n.length ? this.tableStatus = o.empty : this.tableStatus = o.success, this.$refs.table.doLayout(), this.$emit("page-loaded", l);
+      });
+    },
+    refresh() {
+      return h(this, null, function* () {
+        yield this.getPage();
+      });
+    },
+    reload() {
+      return h(this, null, function* () {
+        this.page = m(c({}, this.$options.data.call(this).page), {
+          total: this.page.total
+        });
+      });
+    },
+    scrollTo(e, a) {
+      e && (this.$refs.table.bodyWrapper.scrollTop = e), a && (this.$refs.table.bodyWrapper.scrollLeft = a);
+    }
+  }
+}, T = {};
+var O = /* @__PURE__ */ B(
+  R,
+  E,
+  A,
+  !1,
+  L,
+  null,
+  null,
+  null
+);
+function L(e) {
+  for (let a in T)
+    this[a] = T[a];
+}
+const D = /* @__PURE__ */ function() {
+  return O.exports;
+}();
+export {
+  D as default
+};