@gopowerteam/table-render 0.0.1 → 0.0.2

package/dist/es/index.mjs

@@ -1,64 +1,505 @@
-import { defineComponent as n, reactive as d, createVNode as o } from "vue";
-import { Table as s } from "@arco-design/web-vue";
-const l = /* @__PURE__ */ n({
+import { ref as w, getCurrentInstance as M, onMounted as $, onUpdated as R, createVNode as c, Fragment as k, createTextVNode as F, defineComponent as E, isVNode as V, provide as P, mergeProps as q } from "vue";
+import { Button as j, Tag as z, Descriptions as A, DescriptionsItem as B, Table as _ } from "@arco-design/web-vue";
+import { FormRender as D } from "@gopowerteam/form-render";
+import { useModal as W, ModalProvider as K } from "@gopowerteam/modal-render";
+function L(e, t, r) {
+  const [u, ...a] = (t.index || t.key).split(".").reverse(), l = a.reverse().reduce((n, f) => n == null ? void 0 : n[f], e);
+  l[u] = r;
+}
+function N(e) {
+  const t = w([]), r = (a) => {
+    const l = e.filter((n) => n.formatter);
+    return l.length > 0 ? a.map((n) => (l.forEach((f) => {
+      f.formatter && L(n, f, f.formatter(n));
+    }), n)) : a;
+  };
+  return [t, (a) => {
+    t.value = r(a);
+  }];
+}
+function U(e) {
+  return e.filter((t) => t.form).map((t) => ({
+    key: t.key,
+    title: t.title,
+    ...typeof t.form == "boolean" ? {} : t.form
+  }));
+}
+function Ce(e) {
+  const t = M(), r = w();
+  function u() {
+    var l, n;
+    const a = (n = (l = t == null ? void 0 : t.proxy) == null ? void 0 : l.$refs) == null ? void 0 : n[e];
+    a && (r.value = a);
+  }
+  return $(u), R(u), r;
+}
+function o(e) {
+  return (t, r) => e[t](r);
+}
+const G = Symbol.for("RenderColumnType");
+function s(e, t, r) {
+  return t.$type = e, t.$disableColumnMode = r == null ? void 0 : r.disableColumnMode, t.$disableViewMode = r == null ? void 0 : r.disableViewMode, t.$options = (r == null ? void 0 : r.showOverflow) ?? !0, t;
+}
+function h(e, t) {
+  return (t.index || t.key).split(".").reduce((r, u) => r == null ? void 0 : r[u], e);
+}
+function H(e) {
+  return s("button", (r, u, a) => {
+    const l = W(), n = Array.isArray(e) ? e : "buttons" in e ? e.buttons : [e], f = (d, g) => typeof d == "function" ? d(r) : d === void 0 ? g : d;
+    async function i(d) {
+      await (d.confirm === !0 ? new Promise((b) => {
+        l.confirm({
+          title: "提示信息",
+          content: d.confirmText ?? "您确定要执行该操作？",
+          onOk: () => b(!0),
+          onCancel: () => b(!1)
+        });
+      }) : Promise.resolve(!0)) && (d != null && d.onClick) && (await d.onClick(r), d.autoReload && (a != null && a.emits) && (a == null || a.emits("reload")));
+    }
+    return c(k, null, [n.filter((d) => f(d.visiable, !0)).map((d) => c(j, {
+      onClick: () => i(d),
+      type: d.type || "text",
+      shape: d.shape,
+      disabled: f(d.disabled, !1)
+    }, {
+      icon: d.icon,
+      default: () => (typeof d.content == "function" ? d.content(r) : d.content) || ""
+    }))]);
+  }, {
+    disableViewMode: !0
+  });
+}
+function T(e) {
+  const t = (a) => a.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,"), r = (a) => (parseFloat(a.toString()) / ((e == null ? void 0 : e.scale) || 1)).toFixed((e == null ? void 0 : e.precision) || 2);
+  return s("dict", (a, l) => {
+    const n = h(a, l);
+    return c("div", null, [(e == null ? void 0 : e.prefix) !== void 0 && c("span", null, [e == null ? void 0 : e.prefix]), c("span", {
+      class: "currency_value"
+    }, [(e == null ? void 0 : e.thousands) === !1 ? r(n) : t(r(n))]), (e == null ? void 0 : e.suffix) !== void 0 && c("span", null, [e == null ? void 0 : e.suffix])]);
+  });
+}
+const J = {
+  success: "arcoblue",
+  warning: "orange",
+  error: "red"
+};
+function Q(e) {
+  return e instanceof Map ? e : e.dict;
+}
+function X(e) {
+  const t = e instanceof Map ? !1 : e.tag;
+  return typeof t == "string" ? J[t] : t;
+}
+function Y(e) {
+  const t = Q(e), r = X(e);
+  return s("dict", (a, l) => {
+    const n = h(a, l);
+    return r ? c(z, {
+      color: r === !0 ? void 0 : r
+    }, {
+      default: () => [t.get(n) || n]
+    }) : c("span", null, [t.get(n) || n]);
+  });
+}
+function Z(e) {
+  function t(a, l) {
+    var f;
+    const n = (f = document.getElementById(a)) == null ? void 0 : f.getBoundingClientRect();
+    if (n) {
+      const i = new Image(100, 100);
+      i.id = `IMAGE_${a}_PREVIEW`, i.src = l, i.setAttribute("style", ["position:fixed;", `top:${n.top}px;`, `left:${n.left + n.width}px;`, "min-width:400px;", "height:auto;", "z-index:100;"].join("")), document.body.appendChild(i);
+    }
+  }
+  function r(a) {
+    const l = document.getElementById(`IMAGE_${a}_PREVIEW`);
+    l == null || l.remove();
+  }
+  return s("image", (a, l, n) => {
+    const f = h(a, l), i = Math.random().toString(32).slice(2).toUpperCase(), d = {
+      width: n != null && n.previewing ? (e == null ? void 0 : e.width) || "auto" : "40px",
+      height: n != null && n.previewing && (e == null ? void 0 : e.height) || "auto",
+      borderRadius: e == null ? void 0 : e.radius,
+      maxWidth: !(e != null && e.height) && !(e != null && e.width) ? "150px" : "auto",
+      display: "block",
+      margin: "auto",
+      objectFit: "contain",
+      transform: `rotate(${(e == null ? void 0 : e.rotate) || 0}deg)`,
+      cursor: e != null && e.preview ? "pointer" : "unset"
+    }, g = `${l.index || l.key}_parsed`;
+    if (e != null && e.parse && (e == null || e.parse(f).then((b) => a[g] = b)), e != null && e.parse && !a[g])
+      return c("div", null, [F("Loading...")]);
+    {
+      const b = a[g] || f;
+      return c("img", {
+        id: i,
+        onMouseenter: () => (e == null ? void 0 : e.preview) && !(n != null && n.previewing) && t(i, b),
+        onMouseleave: () => (e == null ? void 0 : e.preview) && !(n != null && n.previewing) && r(i),
+        src: b,
+        style: d
+      }, null);
+    }
+  });
+}
+const p = " ";
+function ee(e) {
+  return e == null ? void 0 : e.replace(/(\d{3})\d*(\d{4})/g, "$1****$2");
+}
+function re(e, t) {
+  return e == null ? void 0 : e.replace(/\*/g, "M").replace(/\B(?=(?:\S{4})+$)/g, t ?? p).replace(/M/g, "*");
+}
+function te(e) {
+  return s("phone", (r, u) => {
+    const a = h(r, u), l = re(e != null && e.safe ? ee(a) : a, e == null ? void 0 : e.separator);
+    return e != null && e.callable ? c("a", {
+      style: "text-decoration:none;",
+      href: `tel:${a}`
+    }, [l]) : c("span", null, [l]);
+  });
+}
+function ne(e) {
+  return s("render", (r) => e(r), {
+    showOverflow: !1
+  });
+}
+function ae(e) {
+  return s("tag", (r, u) => {
+    const a = h(r, u), l = (e == null ? void 0 : e.textColors) || ["#F87335"], n = (e == null ? void 0 : e.backgroundColors) || ["#FFF4E8"];
+    return c("div", {
+      style: {
+        display: "flex",
+        flexWrap: "wrap"
+      }
+    }, [a.map((f, i) => c("span", {
+      style: {
+        margin: "2px",
+        padding: "2px 5px",
+        border: `solid 2px ${(e == null ? void 0 : e.border) || "transparent"}`,
+        borderRadius: `${(e == null ? void 0 : e.radius) || 0}px`,
+        color: typeof l == "function" ? l(f, i) : l[i % l.length],
+        backgroundColor: typeof n == "function" ? n(f, i) : n[i % n.length]
+      }
+    }, [f]))]);
+  }, {
+    showOverflow: !1
+  });
+}
+function S(e) {
+  if (typeof e == "string")
+    return e;
+  if (typeof e == "number")
+    return `${e}px`;
+}
+function le(e, t, r) {
+  var u, a;
+  return typeof e == "function" ? (u = e(r)) == null ? void 0 : u.toString() : typeof (e == null ? void 0 : e.content) == "function" ? (a = e == null ? void 0 : e.content(r)) == null ? void 0 : a.toString() : typeof (e == null ? void 0 : e.content) == "string" ? e == null ? void 0 : e.content : h(r, t);
+}
+function ue(e, t) {
+  if (typeof e != "function") {
+    if (typeof (e == null ? void 0 : e.color) == "function")
+      return e == null ? void 0 : e.color(t);
+    if (typeof (e == null ? void 0 : e.color) == "string")
+      return e == null ? void 0 : e.color;
+  }
+}
+function de(e, t) {
+  if (typeof e != "function")
+    return typeof (e == null ? void 0 : e.size) == "function" ? S(e == null ? void 0 : e.size(t)) : S(e == null ? void 0 : e.size);
+}
+function ce(e, t) {
+  let r = "";
+  const u = ue(e, t), a = de(e, t);
+  return u && (r += `color:${u};`), a && (r += `font-size:${a};`), r;
+}
+function fe(e) {
+  return s("text", (r, u) => {
+    const a = le(e || {}, u, r), l = ce(e || {}, r);
+    return c("span", {
+      style: l
+    }, [a]);
+  });
+}
+function ie() {
+  return {
+    text: fe,
+    dict: Y,
+    tag: ae,
+    render: ne,
+    phone: te,
+    image: Z,
+    currency: T,
+    date: T,
+    button: H
+  };
+}
+function I(e, t) {
+  if (!(e != null && e.render))
+    return;
+  const r = e.render({
+    ...ie()
+    // ...(Table?.$override?.table || {}),
+  });
+  return {
+    render: ({
+      record: u
+    }) => r(u, e, t),
+    [G]: r.$type,
+    disableColumnMode: r.$disableColumnMode,
+    disableViewMode: r.$disableViewMode,
+    showOverflow: r.$showOverflow,
+    isRenderColumn: r.$type === "render",
+    type: r.$type
+  };
+}
+function me(e, t, r) {
+  return e.map((u) => ({
+    ...t || {},
+    ...u
+  })).map((u) => ye(u, r)).filter(Boolean);
+}
+function ye(e, t) {
+  const {
+    render: r
+  } = I(e, {
+    previewing: !1,
+    emits: t
+  }) || {};
+  if (!(e.visiable === !1 || typeof e.visiable == "function" && e.visiable() === !1))
+    return {
+      dataIndex: e.index || e.key,
+      title: e.title,
+      width: e.width === "auto" ? void 0 : e.width,
+      align: e.align ?? "center",
+      fixed: e.fixed,
+      ellipsis: e.ellipsis ?? !0,
+      tooltip: !0,
+      ...e.extraProps,
+      render: r
+    };
+}
+function ge(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !V(e);
+}
+const be = /* @__PURE__ */ E({
+  props: {
+    record: {
+      type: Object,
+      required: !0
+    },
+    columns: {
+      type: Array,
+      required: !0
+    },
+    minWidth: {
+      type: Number,
+      required: !1,
+      default: 300
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    exclude: {
+      type: Array,
+      default: () => []
+    },
+    layout: {
+      type: String,
+      required: !1,
+      default: "horizontal"
+    },
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const t = M(), r = w(0), u = e.columns.map((l) => ({
+      options: l,
+      renderer: I(l, {
+        previewing: !0
+      })
+    })).filter(({
+      options: l
+    }) => {
+      var n;
+      return !((n = e.exclude) != null && n.includes(l.key));
+    }).filter(({
+      renderer: l
+    }) => !(l != null && l.disableViewMode));
+    function a() {
+      var l;
+      if (t) {
+        const n = (l = t.proxy) == null ? void 0 : l.$el;
+        console.log(n.offsetWidth), r.value = Math.floor(n.offsetWidth / e.minWidth);
+      }
+    }
+    return $(() => {
+      a();
+    }), () => {
+      let l;
+      return c("div", {
+        class: "preview-container"
+      }, [c(A, {
+        column: r.value,
+        bordered: !0,
+        align: "left",
+        layout: e.layout
+      }, ge(l = u.map((n) => c(B, {
+        label: n.options.title
+      }, {
+        default: () => {
+          var f, i;
+          return [(f = n.renderer) != null && f.render ? (i = n.renderer) == null ? void 0 : i.render({
+            record: e.record
+          }) : h(e.record, n.options)];
+        }
+      }))) ? l : {
+        default: () => [l]
+      })]);
+    };
+  }
+}), ve = /* @__PURE__ */ E({
   props: {
-    a: {
-      type: String
+    // 数据主键
+    rowKey: {
+      type: String,
+      required: !0
+    },
+    form: {
+      type: Object,
+      required: !1
+    },
+    columns: {
+      type: Object,
+      required: !0
+    },
+    autoLoad: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    loadData: {
+      type: Function,
+      required: !1
+    },
+    height: {
+      type: Number,
+      required: !1
+    },
+    size: {
+      type: String,
+      required: !1,
+      default: "large"
+    },
+    columnsOptions: {
+      type: Object,
+      required: !1
     }
+    // 分页配置
+    // pagination: {
+    //   type: Object as PropType<PaginationOptions | boolean>,
+    //   required: false,
+    // },
   },
+  expose: ["preview", "export"],
   setup(e) {
-    console.log(e.a);
+    const t = Math.random().toString(32).slice(2).toUpperCase(), r = w(), u = w(), a = w(), [l, n] = N(e.columns), f = {
+      rowKey: e.rowKey,
+      size: e.size,
+      scroll: {
+        x: e.columns.reduce((m, y) => m += typeof y.width != "number" ? Math.max(y.title.length * 16, 80) : y.width, 0),
+        y: e.height ?? "100%"
+      }
+    };
+    P("a", "xxxxasdasdasd");
+    const i = e.form || U(e.columns), d = (m) => {
+      var x;
+      if (!e.loadData)
+        return;
+      m != null && m.reset;
+      const y = {
+        ...((x = u.value) == null ? void 0 : x.formSource) || {}
+      };
+      Object.keys(y).forEach((v) => {
+        [null, void 0, ""].includes(y[v]) && delete y[v];
+      }), e.loadData({
+        form: y,
+        update: n
+      });
+    }, g = (m) => {
+      const y = l.value.find((x) => x[e.rowKey] === m.key);
+      if (!y)
+        throw new Error("未找到需要预览的数据");
+      a.value.open(be, {
+        record: y,
+        columns: e.columns
+      }, {
+        title: m.title || "详情",
+        mode: m.mode
+      });
+    }, C = o({
+      reload: d,
+      preview: g,
+      export: (m) => {
+      },
+      edit: (m) => {
+      }
+    }), O = me(e.columns, e.columnsOptions, C);
+    return $(() => {
+      e.autoLoad && d();
+    }), {
+      tableId: t,
+      tableInstance: r,
+      tableSource: l,
+      tableOptions: f,
+      tableColumns: O,
+      tableEvents: C,
+      tableForm: i,
+      formInstance: u,
+      modalInstance: a,
+      reload: d,
+      preview: g
+    };
   },
   render() {
-    const e = [{
-      title: "Name",
-      dataIndex: "name"
-    }, {
-      title: "Salary",
-      dataIndex: "salary"
-    }, {
-      title: "Address",
-      dataIndex: "address"
-    }, {
-      title: "Email",
-      dataIndex: "email"
-    }], a = d([{
-      key: "1",
-      name: "Jane Doe",
-      salary: 23e3,
-      address: "32 Park Road, London",
-      email: "jane.doe@example.com"
-    }, {
-      key: "2",
-      name: "Alisa Ross",
-      salary: 25e3,
-      address: "35 Park Road, London",
-      email: "alisa.ross@example.com"
-    }, {
-      key: "3",
-      name: "Kevin Sandra",
-      salary: 22e3,
-      address: "31 Park Road, London",
-      email: "kevin.sandra@example.com"
-    }, {
-      key: "4",
-      name: "Ed Hellen",
-      salary: 17e3,
-      address: "42 Park Road, London",
-      email: "ed.hellen@example.com"
+    const e = () => {
+      if (this.tableForm)
+        return c("div", {
+          class: "table-form"
+        }, [c(D, {
+          form: this.tableForm,
+          ref: (r) => this.formInstance = r,
+          searchable: !0,
+          onSubmit: () => this.tableEvents("reload")
+        }, null)]);
+    }, t = () => c("div", {
+      class: "table-body"
+    }, [c(_, q({
+      data: this.tableSource,
+      columns: this.tableColumns,
+      ref: (r) => this.tableInstance = r
+    }, this.tableOptions), null)]);
+    return c("div", {
+      class: "table-render"
+    }, [c(K, {
+      ref: (r) => this.modalInstance = r
     }, {
-      key: "5",
-      name: "William Smith",
-      salary: 27e3,
-      address: "62 Park Road, London",
-      email: "william.smith@example.com"
-    }]);
-    return o(s, {
-      columns: e,
-      data: a
-    }, null);
+      default: () => [c("div", {
+        class: "table-render-content"
+      }, [e(), t()])]
+    })]);
   }
 });
+function Te(e) {
+  return e;
+}
+function Se(e) {
+  return e;
+}
 export {
-  l as TableRender
+  ve as TableRender,
+  Te as defineColumns,
+  Se as defineTableLoad,
+  o as useEvents,
+  Ce as useTable
 };

package/dist/es/interfaces/index.d.ts

@@ -0,0 +1,9 @@
+export * from './table-column-render';
+export * from './table-column-options';
+export * from './table-load-params';
+export interface DataRecord {
+    [key: string]: any;
+}
+export interface DataProp {
+    [key: string]: any;
+}

package/dist/es/interfaces/table-column-options.d.ts

@@ -0,0 +1,39 @@
+import type { FormItemOptions } from '@gopowerteam/form-render';
+import type { TableColumnData } from '@arco-design/web-vue';
+import type { TableColumnRender } from './table-column-render';
+import type { DataRecord } from '.';
+export interface TableColumnPreviewOptions {
+    span?: number;
+}
+export interface TableColumnSharedOptions {
+    align?: 'left' | 'right' | 'center';
+    width?: number;
+    ellipsis?: boolean;
+}
+/**
+ * 列配置
+ */
+export interface TableColumnOptions<T> {
+    key: string;
+    title: string;
+    index?: string;
+    fixed?: 'left' | 'right';
+    align?: 'left' | 'right' | 'center';
+    width?: number | 'auto';
+    render?: TableColumnRender<T>;
+    form?: boolean | Omit<FormItemOptions, 'key' | 'title'>;
+    formatter?: DataFormatter<T>;
+    ellipsis?: boolean;
+    preview?: TableColumnPreviewOptions;
+    exportable?: ExportColumnOptions | boolean;
+    treeNode?: boolean;
+    visiable?: boolean | (() => boolean);
+    extraProps?: Partial<Omit<TableColumnData, 'dataIndex' | 'title' | 'fixed' | 'align' | 'width'>>;
+}
+export interface ExportColumnOptions {
+    header?: string;
+    width?: number;
+    content?: (record: DataRecord) => string | number | undefined;
+}
+export type TableColumnsOptions<T = DataRecord> = TableColumnOptions<T>[];
+export type DataFormatter<T> = (record: T) => string | number | Date | undefined;

package/dist/es/interfaces/table-column-render.d.ts

@@ -0,0 +1,28 @@
+import type { EventEmits } from '../hooks';
+import type { TableColumnRenders } from '../table-columns';
+import type { TableColumnOptions } from './table-column-options';
+interface TableColumnRenderResultType {
+    $type?: string;
+    $disableColumnMode?: boolean;
+    $disableViewMode?: boolean;
+    $showOverflow?: boolean;
+}
+export interface TableColumnRenderResult<T> extends TableColumnRenderResultType {
+    (record: T, columnOptions: TableColumnOptions<T>, ctx?: {
+        previewing?: boolean;
+        emits?: EventEmits;
+    }): JSX.Element;
+}
+/**
+ * Render函数
+ */
+export interface TableColumnRender<T> {
+    (render: TableColumnRenderFun<T>): TableColumnRenderResult<T>;
+}
+/**
+ * Render函数模板
+ */
+type TableColumnRenderFun<T> = ReturnType<typeof TableColumnRenders<T>> & {
+    [key: string]: any;
+};
+export {};

package/dist/es/interfaces/table-load-params.d.ts

@@ -0,0 +1,21 @@
+export interface DataRecord {
+    [key: string]: any;
+}
+export interface DataProp {
+    [key: string]: any;
+}
+/**
+ * 分页接口
+ */
+export interface PageService {
+    page: number;
+    size: number;
+}
+/**
+ * 数据加载参数
+ */
+export interface TableLoadParams {
+    form: DataRecord;
+    page?: PageService;
+    update: (data: DataRecord[]) => void;
+}

package/dist/es/render/table-column-render.d.ts

@@ -0,0 +1,30 @@
+import { type TableColumnData, type TableData } from '@arco-design/web-vue';
+import type { TableColumnOptions, TableColumnSharedOptions, TableColumnsOptions } from '../interfaces';
+import { RenderColumnType } from '../utils';
+import type { EventEmits } from '../hooks';
+/**
+ * 生成Render模板
+ * @param render
+ * @returns
+ */
+export declare function toRenderColumn<T>(options?: TableColumnOptions<T>, context?: {
+    previewing?: boolean;
+    emits?: EventEmits;
+}): {
+    render: ({ record }: {
+        record: TableData;
+    }) => JSX.Element;
+    [RenderColumnType]: string | undefined;
+    disableColumnMode: boolean | undefined;
+    disableViewMode: boolean | undefined;
+    showOverflow: boolean | undefined;
+    isRenderColumn: boolean;
+    type: string | undefined;
+} | undefined;
+export declare function renderTableColumns(columns: TableColumnsOptions, columnsOptions: TableColumnSharedOptions | undefined, events: EventEmits): TableColumnData[];
+/**
+ * 创建表格列
+ * @param options
+ * @returns
+ */
+export declare function renderTableColumn<T>(options: TableColumnOptions<T>, events: EventEmits): TableColumnData | undefined;