@mineadmin/table 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 X.Mo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,8 @@
+## MineAdmin Table 组件
+
+二次封装了element plus table
+
+
+## 许可证
+
+[MIT © 2022-present, @mineadmin/table](./LICENSE)

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue';
+import { MaTableOptions, MaTableColumns } from '../types';
+import '../style/index.scss';
+declare const _default: import("vue").DefineComponent<{
+    options: {
+        type: PropType<MaTableOptions>;
+        default: () => {};
+    };
+    columns: {
+        type: PropType<MaTableColumns[]>;
+        default: () => any[];
+    };
+}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<MaTableOptions>;
+        default: () => {};
+    };
+    columns: {
+        type: PropType<MaTableColumns[]>;
+        default: () => any[];
+    };
+}>>, {
+    options: {};
+    columns: MaTableColumns[];
+}, {}>;
+export default _default;

package/dist/components/tableProps.d.ts

@@ -0,0 +1,113 @@
+import type { PropType } from 'vue';
+import type { PaginationProps } from 'element-plus/es/components/pagination/src/pagination';
+import { MaTableColumns } from '../types';
+declare const _default: {
+    options: {
+        data: {
+            type: PropType<any[]>;
+            default: () => never[];
+        };
+        size: {
+            readonly type: PropType<import("element-plus/es/utils/index.mjs").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        width: (NumberConstructor | StringConstructor)[];
+        height: (NumberConstructor | StringConstructor)[];
+        maxHeight: (NumberConstructor | StringConstructor)[];
+        fit: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        stripe: BooleanConstructor;
+        border: BooleanConstructor;
+        rowKey: PropType<string | ((row: any) => string) | undefined>;
+        showHeader: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showSummary: BooleanConstructor;
+        sumText: StringConstructor;
+        summaryMethod: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").SummaryMethod<any> | undefined>;
+        rowClassName: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").ColumnCls<any> | undefined>;
+        rowStyle: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").ColumnStyle<any> | undefined>;
+        cellClassName: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").CellCls<any> | undefined>;
+        cellStyle: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").CellStyle<any> | undefined>;
+        headerRowClassName: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").ColumnCls<any> | undefined>;
+        headerRowStyle: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").ColumnStyle<any> | undefined>;
+        headerCellClassName: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").CellCls<any> | undefined>;
+        headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").CellStyle<any> | undefined>;
+        highlightCurrentRow: BooleanConstructor;
+        currentRowKey: (NumberConstructor | StringConstructor)[];
+        emptyText: StringConstructor;
+        expandRowKeys: PropType<string[] | undefined>;
+        defaultExpandAll: BooleanConstructor;
+        defaultSort: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").Sort | undefined>;
+        tooltipEffect: StringConstructor;
+        tooltipOptions: PropType<Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "transition" | "placement" | "effect" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "popperClass" | "appendTo" | "showArrow">> | undefined>;
+        spanMethod: PropType<((data: {
+            row: any;
+            rowIndex: number;
+            column: import("element-plus/es/components/table/src/table-column/defaults.mjs").TableColumnCtx<any>;
+            columnIndex: number;
+        }) => number[] | {
+            rowspan: number;
+            colspan: number;
+        } | undefined) | undefined>;
+        selectOnIndeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        indent: {
+            type: NumberConstructor;
+            default: number;
+        };
+        treeProps: {
+            type: PropType<import("element-plus/es/components/table/src/table/defaults.mjs").TreeProps | undefined>;
+            default: () => {
+                hasChildren: string;
+                children: string;
+                checkStrictly: boolean;
+            };
+        };
+        lazy: BooleanConstructor;
+        load: PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults.mjs").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+        style: {
+            type: PropType<import("vue").CSSProperties>;
+            default: () => {};
+        };
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+        tableLayout: {
+            type: PropType<"fixed" | "auto">;
+            default: string;
+        };
+        scrollbarAlwaysOn: BooleanConstructor;
+        flexible: BooleanConstructor;
+        showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "transition" | "placement" | "effect" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "popperClass" | "appendTo" | "showArrow">> | undefined>;
+        loading: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        columnAlign: {
+            type: StringConstructor;
+            default: string;
+        };
+        headerAlign: {
+            type: StringConstructor;
+            default: string;
+        };
+        pagination: {
+            type: PropType<PaginationProps>;
+            default: PaginationProps;
+        };
+    };
+    columns: {
+        type: PropType<MaTableColumns[]>;
+        default: any[];
+    };
+};
+export default _default;

package/dist/components/useTable.d.ts

@@ -0,0 +1 @@
+export default function useTable(refName: string): Promise<any>;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue';
+import useTable from './components/useTable';
+import type { MaTableInstallOptions } from './types';
+export declare const MaTable: {
+    install(app: App, options?: MaTableInstallOptions): void;
+};
+export default MaTable;
+export { useTable };
+export type { MaTableOptions, } from './types';

package/dist/index.es.js

@@ -0,0 +1,72 @@
+import { defineComponent as R, ref as b, inject as H, onMounted as N, nextTick as A, onBeforeUnmount as V, computed as $, createVNode as u, mergeProps as C, withDirectives as k, resolveDirective as I, Fragment as m, isVNode as F, getCurrentInstance as S } from "vue";
+import { ElLoadingDirective as U, ElPagination as q, ElTable as G, ElEmpty as J, ElTableColumn as K } from "element-plus";
+const z = R({ name: "MaTable", props: { options: { type: Object, default: () => ({}) }, columns: { type: Array, default: () => [] } }, directives: { Loading: U }, setup(i, { slots: a, attrs: d, emit: h, expose: t }) {
+  const l = b(i.options), g = b(i.columns), D = H("MaTableOptions"), w = b(!1), T = b(), y = () => {
+    const { adaptionOffsetBottom: e } = l.value, n = window.innerHeight - (e ?? 65);
+    l.value.height = `${n}px`;
+  };
+  N(async () => {
+    w.value = !0, await A(() => {
+      var e;
+      (e = l.value) != null && e.adaption && (y(), window.addEventListener("resize", y));
+    });
+  }), V(() => {
+    var e;
+    w.value = !1, (e = l.value) != null && e.adaption && window.removeEventListener("resize", y);
+  });
+  const B = $(() => {
+    const { pagination: e } = l.value;
+    return e ? u("div", { className: "mineadmin-pagination", style: `justify-content: ${(e == null ? void 0 : e.align) ?? "right"}` }, [u(q, C(e, { size: (e == null ? void 0 : e.size) ?? "default", pagerCount: (e == null ? void 0 : e.pagerCount) ?? 5, layout: (e == null ? void 0 : e.layout) ?? "total, prev, pager, next, sizes, jumper" }), null)]) : null;
+  }), x = (e, n) => {
+    var M, E, P;
+    if (e != null && e.hide && (e == null ? void 0 : e.hide) instanceof Function && e.hide(d) || e != null && e.hide && typeof (e == null ? void 0 : e.hide) == "boolean" && e.hide) return;
+    let p = { default: (s) => {
+      var r, v, f;
+      return ((r = e == null ? void 0 : e.cellRender) == null ? void 0 : r.call(e, Object.assign(s, { options: l.value, attrs: d }))) ?? ((v = a == null ? void 0 : a[`column-${e.prop}`]) == null ? void 0 : v.call(a, s)) ?? ((f = a == null ? void 0 : a.default) == null ? void 0 : f.call(a, s));
+    }, header: (s) => {
+      var r, v, f;
+      return ((r = e == null ? void 0 : e.headerRender) == null ? void 0 : r.call(e, Object.assign(s, { options: l.value, attrs: d }))) ?? ((v = a == null ? void 0 : a[`header-${e.prop}`]) == null ? void 0 : v.call(a, s)) ?? ((f = a == null ? void 0 : a.header) == null ? void 0 : f.call(a, s));
+    }, filterIcon: (s) => {
+      var r;
+      return (r = a == null ? void 0 : a.filterIcon) == null ? void 0 : r.call(a, s);
+    } };
+    const { children: c, ...o } = e;
+    return c && c.length > 0 && (p = c == null ? void 0 : c.map(x)), u(K, C({ key: n }, o, { align: (e == null ? void 0 : e.align) ?? ((M = l.value) == null ? void 0 : M.columnAlign) ?? "center", headerAlign: (e == null ? void 0 : e.headerAlign) ?? ((E = l.value) == null ? void 0 : E.headerAlign) ?? "center", showOverflowTooltip: (e == null ? void 0 : e.showOverflowTooltip) ?? ((P = l.value) == null ? void 0 : P.showOverflowTooltip) ?? !0 }), typeof (O = p) == "function" || Object.prototype.toString.call(O) === "[object Object]" && !F(O) ? p : { default: () => [p] });
+    var O;
+  }, L = () => {
+    const { loading: e, loadingConfig: n, height: p, maxHeight: c } = l.value;
+    return k(u("div", { className: "mineadmin-table", "element-loading-svg": (n == null ? void 0 : n.svg) ?? '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"/></svg>', "element-loading-svg-view-box": (n == null ? void 0 : n.viewBox) ?? "-9, -9, 50, 50", "element-loading-text": (n == null ? void 0 : n.text) ?? null, "element-loading-spinner": (n == null ? void 0 : n.spinner) ?? null, "element-loading-background": (n == null ? void 0 : n.spinner) ?? null, "element-loading-custom-class": (n == null ? void 0 : n.customClass) ?? null }, [u(m, null, [u(G, C({ ref: T }, l.value, d), { default: () => {
+      var o;
+      return [u(m, null, [(o = g.value) == null ? void 0 : o.map(x)])];
+    }, append: () => {
+      var o;
+      return (o = a.append) == null ? void 0 : o.call(a);
+    }, empty: () => {
+      var o;
+      return ((o = a.empty) == null ? void 0 : o.call(a)) ?? u(J, null, null);
+    } }), B.value])]), [[I("loading"), e]]);
+  }, j = (e) => g.value = e;
+  return t({ setData: (e) => l.value.data = e, setPagination: (e) => l.value.pagination = e, setLoadingState: (e) => l.value.loading = e, setOptions: (e) => l.value = Object.assign(l.value, e), getOptions: () => l.value, setColumns: j, getColumns: () => g.value, appendColumn: (e) => g.value.push(e), removeColumn: (e) => j(g.value.filter((n) => n.prop !== e)), getColumnByProp: (e) => {
+    var n;
+    return ((n = g.value.filter((p) => p.prop === e)) == null ? void 0 : n[0]) ?? null;
+  }, getTableRef: () => T.value }), () => D.ssr ? w.value && L() : L();
+} });
+function X(i) {
+  return new Promise(async (a, d) => {
+    const h = S();
+    await A(() => {
+      if (h && h.refs[i]) {
+        const t = h.refs[i];
+        a({ instance: t, setData: t == null ? void 0 : t.setData, setOptions: t == null ? void 0 : t.setOptions, setColumns: t == null ? void 0 : t.setColumns, setPagination: t == null ? void 0 : t.setPagination, getTableRef: t == null ? void 0 : t.getTableRef });
+      } else d("[@mineadmin/table]: not found ref for ma-table component");
+    });
+  });
+}
+const Y = { install(i, a) {
+  i.component(z.name, z), i.provide("MaTableOptions", a ?? { ssr: !1 });
+} };
+export {
+  Y as MaTable,
+  Y as default,
+  X as useTable
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],t):t((s=typeof globalThis<"u"?globalThis:s||self).MaTable={},s.Vue,s.ElementPlus)})(this,function(s,t,v){"use strict";const O=t.defineComponent({name:"MaTable",props:{options:{type:Object,default:()=>({})},columns:{type:Array,default:()=>[]}},directives:{Loading:v.ElLoadingDirective},setup(u,{slots:a,attrs:c,emit:b,expose:o}){const i=t.ref(u.options),g=t.ref(u.columns),E=t.inject("MaTableOptions"),w=t.ref(!1),C=t.ref(),y=()=>{const{adaptionOffsetBottom:e}=i.value,l=window.innerHeight-(e??65);i.value.height=`${l}px`};t.onMounted(async()=>{w.value=!0,await t.nextTick(()=>{var e;(e=i.value)!=null&&e.adaption&&(y(),window.addEventListener("resize",y))})}),t.onBeforeUnmount(()=>{var e;w.value=!1,(e=i.value)!=null&&e.adaption&&window.removeEventListener("resize",y)});const D=t.computed(()=>{const{pagination:e}=i.value;return e?t.createVNode("div",{className:"mineadmin-pagination",style:`justify-content: ${(e==null?void 0:e.align)??"right"}`},[t.createVNode(v.ElPagination,t.mergeProps(e,{size:(e==null?void 0:e.size)??"default",pagerCount:(e==null?void 0:e.pagerCount)??5,layout:(e==null?void 0:e.layout)??"total, prev, pager, next, sizes, jumper"}),null)]):null}),j=(e,l)=>{var M,N,P;if(e!=null&&e.hide&&(e==null?void 0:e.hide)instanceof Function&&e.hide(c)||e!=null&&e.hide&&typeof(e==null?void 0:e.hide)=="boolean"&&e.hide)return;let p={default:r=>{var d,f,h;return((d=e==null?void 0:e.cellRender)==null?void 0:d.call(e,Object.assign(r,{options:i.value,attrs:c})))??((f=a==null?void 0:a[`column-${e.prop}`])==null?void 0:f.call(a,r))??((h=a==null?void 0:a.default)==null?void 0:h.call(a,r))},header:r=>{var d,f,h;return((d=e==null?void 0:e.headerRender)==null?void 0:d.call(e,Object.assign(r,{options:i.value,attrs:c})))??((f=a==null?void 0:a[`header-${e.prop}`])==null?void 0:f.call(a,r))??((h=a==null?void 0:a.header)==null?void 0:h.call(a,r))},filterIcon:r=>{var d;return(d=a==null?void 0:a.filterIcon)==null?void 0:d.call(a,r)}};const{children:m,...n}=e;return m&&m.length>0&&(p=m==null?void 0:m.map(j)),t.createVNode(v.ElTableColumn,t.mergeProps({key:l},n,{align:(e==null?void 0:e.align)??((M=i.value)==null?void 0:M.columnAlign)??"center",headerAlign:(e==null?void 0:e.headerAlign)??((N=i.value)==null?void 0:N.headerAlign)??"center",showOverflowTooltip:(e==null?void 0:e.showOverflowTooltip)??((P=i.value)==null?void 0:P.showOverflowTooltip)??!0}),typeof(T=p)=="function"||Object.prototype.toString.call(T)==="[object Object]"&&!t.isVNode(T)?p:{default:()=>[p]});var T},V=()=>{const{loading:e,loadingConfig:l,height:p,maxHeight:m}=i.value;return t.withDirectives(t.createVNode("div",{className:"mineadmin-table","element-loading-svg":(l==null?void 0:l.svg)??'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"/></svg>',"element-loading-svg-view-box":(l==null?void 0:l.viewBox)??"-9, -9, 50, 50","element-loading-text":(l==null?void 0:l.text)??null,"element-loading-spinner":(l==null?void 0:l.spinner)??null,"element-loading-background":(l==null?void 0:l.spinner)??null,"element-loading-custom-class":(l==null?void 0:l.customClass)??null},[t.createVNode(t.Fragment,null,[t.createVNode(v.ElTable,t.mergeProps({ref:C},i.value,c),{default:()=>{var n;return[t.createVNode(t.Fragment,null,[(n=g.value)==null?void 0:n.map(j)])]},append:()=>{var n;return(n=a.append)==null?void 0:n.call(a)},empty:()=>{var n;return((n=a.empty)==null?void 0:n.call(a))??t.createVNode(v.ElEmpty,null,null)}}),D.value])]),[[t.resolveDirective("loading"),e]])},L=e=>g.value=e;return o({setData:e=>i.value.data=e,setPagination:e=>i.value.pagination=e,setLoadingState:e=>i.value.loading=e,setOptions:e=>i.value=Object.assign(i.value,e),getOptions:()=>i.value,setColumns:L,getColumns:()=>g.value,appendColumn:e=>g.value.push(e),removeColumn:e=>L(g.value.filter(l=>l.prop!==e)),getColumnByProp:e=>{var l;return((l=g.value.filter(p=>p.prop===e))==null?void 0:l[0])??null},getTableRef:()=>C.value}),()=>E.ssr?w.value&&V():V()}}),x={install(u,a){u.component(O.name,O),u.provide("MaTableOptions",a??{ssr:!1})}};s.MaTable=x,s.default=x,s.useTable=function(u){return new Promise(async(a,c)=>{const b=t.getCurrentInstance();await t.nextTick(()=>{if(b&&b.refs[u]){const o=b.refs[u];a({instance:o,setData:o==null?void 0:o.setData,setOptions:o==null?void 0:o.setOptions,setColumns:o==null?void 0:o.setColumns,setPagination:o==null?void 0:o.setPagination,getTableRef:o==null?void 0:o.getTableRef})}else c("[@mineadmin/table]: not found ref for ma-table component")})})},Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.mineadmin-table{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}.mineadmin-pagination{width:100%;display:flex;padding:.5rem 0}

package/dist/types/index.d.ts

@@ -0,0 +1,17 @@
+import { MaTableColumns, TableColumnFilterPlacement, TableColumnSortOrders, TableColumnSortable, TableColumnRenderer, TableColumnFixed, TableColumnScope, TableColumnType, TableColumn } from './table-column';
+import { MaTableOptions, MaTableSetting } from './table-options';
+import { LoadingConfig } from './loading-config';
+import { PaginationProps } from './pagination';
+import { Ref } from 'vue';
+type MaTableInstallOptions = {
+    ssr?: boolean;
+};
+interface MaTableExpose {
+    instance: any;
+    setData: (data: any[]) => void;
+    setOptions: (opts: MaTableOptions) => void;
+    setColumns: (cols: MaTableColumns[]) => void;
+    setPagination: (pagination: PaginationProps) => void;
+    getTableRef: () => Ref<HTMLElement>;
+}
+export type { MaTableInstallOptions, MaTableSetting, MaTableColumns, MaTableExpose, MaTableOptions, TableColumnFilterPlacement, TableColumnSortOrders, TableColumnSortable, TableColumnRenderer, TableColumnScope, TableColumnFixed, TableColumnType, PaginationProps, LoadingConfig, TableColumn, };

package/dist/types/loading-config.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description 加载动画相关配置
+ * @see {@link https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4}
+ */
+export interface LoadingConfig {
+    text?: string;
+    spinner?: string;
+    svg?: string;
+    viewBox?: string;
+    background?: string;
+    customClass?: string;
+}

package/dist/types/pagination.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'vue';
+/**
+ * @description 分页相关配置。注意：`pageSize`、`total`、`currentPage` 这三个属性必传
+ * @see {@link https://element-plus.org/zh-CN/component/pagination.html#%E5%B1%9E%E6%80%A7}
+ */
+export interface PaginationProps {
+    total: number;
+    pageSize?: number;
+    currentPage?: number;
+    size?: '' | 'small' | 'default' | 'large';
+    small?: boolean;
+    background?: boolean;
+    defaultPageSize?: number;
+    pageCount?: number;
+    pagerCount?: number;
+    defaultCurrentPage?: number;
+    layout?: string;
+    pageSizes?: number[];
+    popperClass?: string;
+    prevText?: string;
+    nextText?: string;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    align?: 'left' | 'center' | 'right';
+    style?: CSSProperties;
+    class?: string;
+    onSizeChange?: (value: number) => void;
+    onCurrentChange?: (value: number) => void;
+    onChange?: (currentPage: number, pageSize: number) => void;
+    onPrevClick?: (value: number) => void;
+    onNextClick?: (value: number) => void;
+}

package/dist/types/table-column.d.ts

@@ -0,0 +1,69 @@
+import type { TableColumnCtx } from 'element-plus';
+import type { VNode } from 'vue';
+export type TableColumnSortOrders = 'ascending' | 'descending' | null;
+export type TableColumnType = 'selection' | 'index' | 'expand';
+export type TableColumnSortable = false | true | 'custom';
+export type TableColumnFixed = true | 'left' | 'right';
+export type TableColumnFilterPlacement = 'top-start' | 'top-end' | 'top' | 'bottom-start' | 'bottom-end' | 'bottom' | 'left-start' | 'left-end' | 'left' | 'right-start' | 'right-end' | 'right';
+type FilterMethods = (value: any, row: any, column: TableColumnCtx<any>) => void;
+export interface TableHeaderScope {
+    column: TableColumnCtx<any>;
+    $index: number;
+}
+export interface TableColumnScope {
+    row?: any;
+    column: TableColumn;
+    $index: number;
+}
+export interface TableColumnRenderer extends TableColumnScope {
+    options: TableColumn;
+    attrs: any;
+}
+/**
+ * @description `element-plus` 的 `table` 中 `Table-column` 属性，未拓展
+ * @see {@link https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7}
+ */
+export interface TableColumn {
+    label?: string;
+    prop?: string | ((index: number) => string);
+    type?: TableColumnType;
+    index?: number | ((index: number) => number);
+    columnKey?: string;
+    width?: string | number;
+    minWidth?: string | number;
+    fixed?: TableColumnFixed;
+    renderHeader?: (data: TableHeaderScope) => VNode | string;
+    sortable?: TableColumnSortable;
+    sortMethod?: (a: any, b: any) => number;
+    sortBy?: string | ((row: any, index: number) => string) | string[];
+    sortOrders?: Array<TableColumnSortOrders>;
+    resizable?: boolean;
+    formatter?: (row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => VNode | string;
+    showOverflowTooltip?: boolean;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    className?: string;
+    labelClassName?: string;
+    selectable?: (row: any, index: number) => boolean;
+    reserveSelection?: boolean;
+    filters?: {
+        text: string;
+        value: string;
+    }[];
+    filterPlacement?: TableColumnFilterPlacement;
+    filterClassName?: string;
+    filterMultiple?: boolean;
+    filterMethod?: FilterMethods;
+    filteredValue?: Array<any>;
+}
+/**
+ * @description `element-plus` 的 `table` 中 `Table-column` 属性，已拓展，额外增加 `hide` 、`slot` 、`cellRenderer` 、`headerRenderer` 四个属性
+ * @see {@link https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7}
+ */
+export interface MaTableColumns extends TableColumn {
+    hide?: boolean | CallableFunction;
+    children?: MaTableColumns[];
+    cellRender?: (data: TableColumnRenderer) => VNode | string;
+    headerRender?: (data: TableColumnRenderer) => VNode | string;
+}
+export {};

package/dist/types/table-options.d.ts

@@ -0,0 +1,77 @@
+import { PaginationProps, LoadingConfig } from './index';
+import { MaTableColumns } from './table-column';
+import type { TableColumnCtx, SummaryMethod, ColumnStyle, ColumnCls, CellStyle, TreeNode, CellCls, Sort } from 'element-plus';
+import type { TableOverflowTooltipOptions } from 'element-plus/es/components/table/src/util';
+export interface ExtraOptions {
+    containerHeight?: string;
+    loading?: boolean;
+    loadingConfig?: LoadingConfig;
+    columnAlign?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    showOverflowTooltip?: boolean;
+    pagination?: PaginationProps;
+    adaption?: boolean;
+    adaptionOffsetBottom?: number;
+}
+/**
+ * @description `element-plus` 的 `table` 属性，未拓展
+ * @see {@link https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7}
+ */
+export interface MaTableOptions extends ExtraOptions {
+    data?: Array<any>;
+    height?: string | number;
+    maxHeight?: string | number;
+    stripe?: boolean;
+    border?: boolean;
+    size?: '' | 'large' | 'default' | 'small';
+    fit?: boolean;
+    showHeader?: boolean;
+    highlightCurrentRow?: boolean;
+    currentRowKey?: string | number;
+    rowClassName?: ColumnCls<any>;
+    rowStyle?: ColumnStyle<any>;
+    cellClassName?: CellCls<any>;
+    cellStyle?: CellStyle<any>;
+    headerRowClassName?: ColumnCls<any>;
+    headerRowStyle?: ColumnStyle<any>;
+    headerCellClassName?: CellCls<any>;
+    headerCellStyle?: CellStyle<any>;
+    rowKey?: string | ((row: any) => string);
+    emptyText?: string;
+    defaultExpandAll?: boolean;
+    expandRowKeys?: any[];
+    defaultSort?: Sort;
+    tooltipEffect?: 'dark' | 'light';
+    tooltipOptions?: TableOverflowTooltipOptions;
+    showSummary?: boolean;
+    sumText?: string;
+    summaryMethod?: SummaryMethod<any>;
+    spanMethod?: (data: {
+        row: any;
+        rowIndex: number;
+        column: TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined;
+    selectOnIndeterminate?: boolean;
+    indent?: number;
+    lazy?: boolean;
+    load?: (row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void;
+    treeProps?: {
+        hasChildren?: string;
+        children?: string;
+    };
+    tableLayout?: 'fixed' | 'auto';
+    scrollbarAlwaysOn?: boolean;
+    flexible?: boolean;
+}
+export interface MaTableSetting {
+    columns?: MaTableColumns[];
+    /**
+     * @description 拓展 `element-plus` 的 `table` 属性
+     * @see {@link https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7}
+     */
+    options?: MaTableOptions;
+}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@mineadmin/table",
+  "version": "1.0.0",
+  "packageManager": "pnpm@8.6.10",
+  "description": "基于element plus的表格组件，进行封装，提供方便、灵活的配置和使用方式",
+  "keywords": [
+    "@mineadmin/table",
+    "element-plus",
+    "typescript",
+    "el-table",
+    "nuxt3",
+    "vue3",
+    "vite",
+    "tsx"
+  ],
+  "homepage": "https://github.com/mineadmin/mineadmin-table/tree/main/#readme",
+  "bugs": {
+    "url": "https://github.com/mineadmin/mineadmin-table/issues"
+  },
+  "license": "MIT",
+  "author": "kanyxmo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mineadmin/mineadmin-table.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "jsdelivr": "dist/index.umd.js",
+  "unpkg": "dist/index.umd.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./volar": {
+      "types": "./volar.d.ts"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "volar.d.ts"
+  ],
+  "style": "dist/index.css",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lib": "vite build && vue-tsc -p tsconfig.build.json",
+    "lint": "prettier --write  \"packages/**/*.{ts,tsx}\" \"__tests__/table.test.tsx\" \"src/*.{ts,tsx,vue}\"",
+    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
+    "lint:pretty": "pretty-quick --staged",
+    "pub": "pub lib"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.0.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.8.0",
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.25.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/types": "^18.4.3",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/node": "^20.10.5",
+    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/test-utils": "^2.4.3",
+    "eslint": "^9.7.0",
+    "husky": "^8.0.3",
+    "jsdom": "^23.0.1",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
+    "rollup": "^4.3.0",
+    "sass": "^1.77.8",
+    "sass-loader": "^13.3.2",
+    "typescript": "^5.3.3",
+    "vite": "5.3.3",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "0.34.6",
+    "vue-i18n": "^9.13.1",
+    "vue-tsc": "^2.0.26"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "webpack"
+      ]
+    }
+  }
+}

package/volar.d.ts

@@ -0,0 +1,8 @@
+// Auto generated component declarations
+declare module "vue" {
+  export interface GlobalComponents {
+    MaTable: typeof import("@mineadmin/table")["MaTable"];
+  }
+}
+
+export {};