@byan99/vue-base-table 0.1.0 → 0.3.0

package/README.md

@@ -1,20 +1,28 @@
 # @byan99/vue-base-table
 
-基于 Vue 3 + TypeScript 的可复用表格组件。
+基于 Vue 3 + Element Plus + TypeScript 的可复用表格组件。
 
 ## 安装
 
 ```bash
-npm install @byan99/vue-base-table
+npm install @byan99/vue-base-table element-plus
 ```
 
 ## 使用
 
+在入口文件中注册 Element Plus 并引入样式：
+
+```ts
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+app.use(ElementPlus)
+```
+
 ```vue
 <script setup lang="ts">
 import { BaseTable } from '@byan99/vue-base-table'
 import type { TableColumn } from '@byan99/vue-base-table'
-import '@byan99/vue-base-table/style.css'
 
 interface UserRow {
   id: number

package/dist/index.css

@@ -1,2 +1,2 @@
-.table-wrapper[data-v-c67b71ed]{border-radius:8px;width:100%;overflow-x:auto}.table-wrapper--bordered[data-v-c67b71ed]{border:1px solid var(--border)}.base-table[data-v-c67b71ed]{border-collapse:collapse;text-align:left;width:100%;font-size:15px}.base-table th[data-v-c67b71ed],.base-table td[data-v-c67b71ed]{border-bottom:1px solid var(--border);padding:12px 16px}.base-table th[data-v-c67b71ed]{color:var(--text-h);background:var(--code-bg);font-weight:500}.base-table td[data-v-c67b71ed]{color:var(--text)}.base-table tbody tr:last-child td[data-v-c67b71ed]{border-bottom:none}.base-table--stripe tbody tr[data-v-c67b71ed]:nth-child(2n){background:var(--social-bg)}.base-table tbody tr:hover td[data-v-c67b71ed]{background:var(--accent-bg)}.base-table__state[data-v-c67b71ed]{text-align:center;color:var(--text);padding:32px 16px}
+.base-table[data-v-e3b643d1]{width:100%}
 /*$vite$:1*/

package/dist/index.js

@@ -1,6 +1,8 @@
-import { Fragment as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderList as c, renderSlot as l, toDisplayString as u } from "vue";
-//#region src/components/Table/BaseTable.vue?vue&type=script&setup=true&lang.ts
-var d = { key: 0 }, f = ["colspan"], p = { key: 1 }, m = ["colspan"], h = /*#__PURE__*/ ((e, t) => {
+import { Fragment as e, createBlock as t, createElementBlock as n, createTextVNode as r, defineComponent as i, openBlock as a, renderList as o, renderSlot as s, toDisplayString as c, unref as l, withCtx as u } from "vue";
+import { ElTable as d, ElTableColumn as f } from "element-plus";
+//#endregion
+//#region src/components/Table/BaseTable.vue
+var p = /*#__PURE__*/ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
@@ -12,33 +14,68 @@ var d = { key: 0 }, f = ["colspan"], p = { key: 1 }, m = ["colspan"], h = /*#__P
 		loading: { type: Boolean },
 		emptyText: {},
 		stripe: { type: Boolean },
-		bordered: { type: Boolean }
+		bordered: { type: Boolean },
+		defaultSort: {}
 	},
-	setup(i) {
+	emits: ["sortChange"],
+	setup(i, { emit: p }) {
+		let m = p;
 		function h(e, t) {
 			let n = e[t];
 			return n == null ? "" : String(n);
 		}
-		return (g, _) => (s(), t("div", { class: a(["table-wrapper", { "table-wrapper--bordered": i.bordered }]) }, [n("table", { class: a(["base-table", { "base-table--stripe": i.stripe }]) }, [n("thead", null, [n("tr", null, [(s(!0), t(e, null, c(i.columns, (e) => (s(), t("th", {
-			key: e.key,
-			style: o({
+		function g(e) {
+			m("sortChange", {
+				prop: e.prop,
+				order: e.order
+			});
+		}
+		return (p, m) => (a(), t(l(d), {
+			class: "base-table",
+			data: i.data,
+			stripe: i.stripe,
+			border: i.bordered,
+			loading: i.loading,
+			"empty-text": i.emptyText ?? "暂无数据",
+			"default-sort": i.defaultSort,
+			onSortChange: g
+		}, {
+			default: u(() => [(a(!0), n(e, null, o(i.columns, (e) => (a(), t(l(f), {
+				key: e.key,
+				prop: e.key,
+				label: e.label,
 				width: e.width,
-				textAlign: e.align ?? "left"
-			})
-		}, u(e.label), 5))), 128))])]), n("tbody", null, [i.loading ? (s(), t("tr", d, [n("td", {
-			colspan: i.columns.length,
-			class: "base-table__state"
-		}, " 加载中... ", 8, f)])) : i.data.length ? (s(!0), t(e, { key: 2 }, c(i.data, (n, a) => (s(), t("tr", { key: a }, [(s(!0), t(e, null, c(i.columns, (e) => (s(), t("td", {
-			key: e.key,
-			style: o({ textAlign: e.align ?? "left" })
-		}, [l(g.$slots, e.key, {
-			row: n,
-			value: n[e.key]
-		}, () => [r(u(h(n, e.key)), 1)], !0)], 4))), 128))]))), 128)) : (s(), t("tr", p, [n("td", {
-			colspan: i.columns.length,
-			class: "base-table__state"
-		}, u(i.emptyText ?? "暂无数据"), 9, m)]))])], 2)], 2));
+				align: e.align ?? "left",
+				sortable: e.sortable,
+				"sort-method": e.sortMethod,
+				"sort-by": e.sortBy,
+				"sort-orders": e.sortOrders
+			}, {
+				default: u(({ row: t }) => [s(p.$slots, e.key, {
+					row: t,
+					value: t[e.key]
+				}, () => [r(c(h(t, e.key)), 1)], !0)]),
+				_: 2
+			}, 1032, [
+				"prop",
+				"label",
+				"width",
+				"align",
+				"sortable",
+				"sort-method",
+				"sort-by",
+				"sort-orders"
+			]))), 128))]),
+			_: 3
+		}, 8, [
+			"data",
+			"stripe",
+			"border",
+			"loading",
+			"empty-text",
+			"default-sort"
+		]));
 	}
-}), [["__scopeId", "data-v-c67b71ed"]]);
+}), [["__scopeId", "data-v-e3b643d1"]]);
 //#endregion
-export { h as BaseTable };
+export { p as BaseTable };

package/dist/src/components/Table/BaseTable.vue.d.ts

@@ -1,12 +1,15 @@
-import { TableColumn } from './types';
+import { TableColumn, TableDefaultSort, TableSortChangePayload } from './types';
 declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSortChange?: ((payload: TableSortChangePayload) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSortChange"> & {
         columns: TableColumn<T>[];
         data: T[];
         loading?: boolean;
         emptyText?: string;
         stripe?: boolean;
         bordered?: boolean;
+        defaultSort?: TableDefaultSort;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -14,7 +17,7 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
         row: T;
         value: T[keyof T & string];
     }) => any>>;
-    emit: {};
+    emit: (evt: "sortChange", payload: TableSortChangePayload) => void;
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/src/components/Table/index.d.ts

@@ -1,2 +1,2 @@
 export { default as BaseTable } from './BaseTable.vue';
-export type { TableAlign, TableColumn, TableProps } from './types';
+export type { TableAlign, TableColumn, TableDefaultSort, TableProps, TableSortChangePayload, TableSortOrder, } from './types';

package/dist/src/components/Table/types.d.ts

@@ -1,9 +1,26 @@
 export type TableAlign = 'left' | 'center' | 'right';
+export type TableSortOrder = 'ascending' | 'descending';
 export interface TableColumn<T extends object = Record<string, unknown>> {
     key: keyof T & string;
     label: string;
     width?: string;
     align?: TableAlign;
+    /** 是否可排序；`custom` 表示远程排序，需监听 sort-change */
+    sortable?: boolean | 'custom';
+    /** 本地排序比较函数，sortable 为 true 时生效 */
+    sortMethod?: (a: T, b: T) => number;
+    /** 排序字段，默认使用 key */
+    sortBy?: string | string[];
+    /** 排序策略循环顺序，默认 ['ascending', 'descending', null] */
+    sortOrders?: (TableSortOrder | null)[];
+}
+export interface TableDefaultSort {
+    prop: string;
+    order: TableSortOrder;
+}
+export interface TableSortChangePayload {
+    prop: string | null;
+    order: TableSortOrder | null;
 }
 export interface TableProps<T extends object = Record<string, unknown>> {
     columns: TableColumn<T>[];
@@ -12,4 +29,5 @@ export interface TableProps<T extends object = Record<string, unknown>> {
     emptyText?: string;
     stripe?: boolean;
     bordered?: boolean;
+    defaultSort?: TableDefaultSort;
 }

package/dist/src/index.d.ts

@@ -1,2 +1,2 @@
 export { BaseTable } from './components/Table';
-export type { TableAlign, TableColumn, TableProps } from './components/Table';
+export type { TableAlign, TableColumn, TableDefaultSort, TableProps, TableSortChangePayload, TableSortOrder, } from './components/Table';

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@byan99/vue-base-table",
-  "version": "0.1.0",
-  "description": "A reusable Vue 3 table component with TypeScript support",
+  "version": "0.3.0",
+  "description": "A reusable Vue 3 table component based on Element Plus with TypeScript support",
   "type": "module",
   "keywords": [
     "vue",
     "vue3",
     "table",
     "component",
-    "typescript"
+    "typescript",
+    "element-plus"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "author": "byan99",
   "repository": {
@@ -42,12 +46,14 @@
     "prepublishOnly": "npm run build:lib"
   },
   "peerDependencies": {
+    "element-plus": "^2.9.0",
     "vue": "^3.5.0"
   },
   "devDependencies": {
     "@types/node": "^24.13.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",
+    "element-plus": "^2.14.2",
     "typescript": "~6.0.2",
     "vite": "^8.1.1",
     "vite-plugin-dts": "^4.5.4",