@byan99/vue-base-table 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# @byan99/vue-base-table
+
+基于 Vue 3 + TypeScript 的可复用表格组件。
+
+## 安装
+
+```bash
+npm install @byan99/vue-base-table
+```
+
+## 使用
+
+```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
+  name: string
+  role: string
+}
+
+const columns: TableColumn<UserRow>[] = [
+  { key: 'id', label: 'ID', width: '80px', align: 'center' },
+  { key: 'name', label: '姓名' },
+  { key: 'role', label: '角色' },
+]
+
+const data: UserRow[] = [
+  { id: 1, name: '张三', role: '管理员' },
+  { id: 2, name: '李四', role: '编辑' },
+]
+</script>
+
+<template>
+  <BaseTable :columns="columns" :data="data" stripe bordered />
+</template>
+```
+
+## 本地开发
+
+```bash
+npm run dev
+```
+
+## 构建组件库
+
+```bash
+npm run build:lib
+```
+
+## 发布到 npm
+
+1. 在 [npmjs.com](https://www.npmjs.com/) 注册账号
+2. 修改 `package.json` 中的 `name`（必须全局唯一，建议使用 `@your-scope/vue-base-table`）
+3. 填写 `author`、`repository` 等字段
+4. 登录并发布：
+
+```bash
+npm login
+npm publish
+```
+
+如果是 scoped 包且需公开访问：
+
+```bash
+npm publish --access public
+```
+
+## API
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| columns | `TableColumn[]` | - | 列配置 |
+| data | `T[]` | - | 表格数据 |
+| loading | `boolean` | `false` | 加载状态 |
+| emptyText | `string` | `'暂无数据'` | 空数据提示 |
+| stripe | `boolean` | `false` | 斑马纹 |
+| bordered | `boolean` | `false` | 边框 |
+
+支持通过 `#columnKey="{ row, value }"` 插槽自定义单元格。

package/dist/index.css

@@ -0,0 +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}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index"

package/dist/index.js

@@ -0,0 +1,44 @@
+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) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ i({
+	__name: "BaseTable",
+	props: {
+		columns: {},
+		data: {},
+		loading: { type: Boolean },
+		emptyText: {},
+		stripe: { type: Boolean },
+		bordered: { type: Boolean }
+	},
+	setup(i) {
+		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({
+				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));
+	}
+}), [["__scopeId", "data-v-c67b71ed"]]);
+//#endregion
+export { h as BaseTable };

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

@@ -0,0 +1,24 @@
+import { TableColumn } 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> & {
+        columns: TableColumn<T>[];
+        data: T[];
+        loading?: boolean;
+        emptyText?: string;
+        stripe?: boolean;
+        bordered?: boolean;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Partial<Record<NonNullable<keyof T & string>, (_: {
+        row: T;
+        value: T[keyof T & string];
+    }) => any>>;
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

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

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

@@ -0,0 +1,15 @@
+export type TableAlign = 'left' | 'center' | 'right';
+export interface TableColumn<T extends object = Record<string, unknown>> {
+    key: keyof T & string;
+    label: string;
+    width?: string;
+    align?: TableAlign;
+}
+export interface TableProps<T extends object = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    loading?: boolean;
+    emptyText?: string;
+    stripe?: boolean;
+    bordered?: boolean;
+}

package/dist/src/index.d.ts

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

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@byan99/vue-base-table",
+  "version": "0.1.0",
+  "description": "A reusable Vue 3 table component with TypeScript support",
+  "type": "module",
+  "keywords": [
+    "vue",
+    "vue3",
+    "table",
+    "component",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "byan99",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.vue"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:lib",
+    "build:lib": "vue-tsc -b && vite build --mode lib",
+    "build:demo": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.39",
+    "vue-tsc": "^3.3.5"
+  }
+}