element-plus-suite 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,129 @@
+# Element Plus Suite
+
+Element Plus Suite 是基于 Element Plus 二次封装的组件库，开箱即用。可以显著地提升制作 CRUD 页面的效率，轻松搬砖。
+
+[文档](https://th74100.github.io/element-plus-suite/) · [GitHub](https://github.com/th74100/element-plus-suite)
+
+## 特性
+
+- **🚀 高效开发**：提供常用业务组件，减少重复代码
+- **🎯 灵活配置**：支持 JSON 配置式和模板式，满足不同场景需求
+- **💪 TypeScript**：提供完整的类型定义，更好的开发体验
+- **🔥 Element Plus**：基于 Element Plus，支持主题定制
+
+## 环境要求
+
+- Vue 3.2 或更高版本
+- Element Plus 2.0 或更高版本
+- 支持 ESM 的现代构建工具
+
+## 安装
+
+```bash
+npm install element-plus-suite
+```
+
+## 注册组件
+
+如果项目已经全局注册 Element Plus，可以直接注册组件库：
+
+```ts
+import { createApp } from 'vue'
+import ElementPlusSuite from 'element-plus-suite'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(ElementPlusSuite)
+app.mount('#app')
+```
+
+如果需要一起注册 Element Plus：
+
+```ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import ElementPlusSuite from 'element-plus-suite'
+import 'element-plus-suite/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(ElementPlus)
+app.use(ElementPlusSuite)
+app.mount('#app')
+```
+
+也可以按需导入：
+
+```ts
+import { ElTablePro } from 'element-plus-suite'
+```
+
+## 快速开始
+
+```vue
+<script setup lang="ts">
+import { ElTablePro, type TableProColumn } from 'element-plus-suite'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+const columns: TableProColumn<User>[] = [
+  { prop: 'name', label: '姓名', minWidth: 140 },
+  { prop: 'email', label: '邮箱', minWidth: 220 },
+]
+
+const dataSource: User[] = [
+  { id: 1, name: '林晓', email: 'linxiao@example.com' },
+  { id: 2, name: '陈默', email: 'chenmo@example.com' },
+]
+</script>
+
+<template>
+  <ElTablePro
+    :columns="columns"
+    :data="dataSource"
+    row-key="id"
+    :pagination="false"
+  />
+</template>
+```
+
+## 远程数据
+
+将 `data` 换成 `request` 即可接入远程数据。`request` 接收当前分页参数和取消信号，并返回统一的数据结构：
+
+```ts
+import type { TableProRequest } from 'element-plus-suite'
+
+const requestUsers: TableProRequest<User> = async ({
+  page,
+  pageSize,
+  signal,
+}) => {
+  const params = new URLSearchParams({
+    page: String(page ?? 1),
+    pageSize: String(pageSize ?? 20),
+  })
+  const response = await fetch(`/api/users?${params}`, { signal })
+  const payload = await response.json()
+
+  return {
+    data: payload.list,
+    total: payload.total,
+  }
+}
+```
+
+接口的原始返回结构在 `request` 内部适配即可，组件只接收 `data` 和 `total`。
+
+更多用法请查看[文档](https://th74100.github.io/element-plus-suite/)。
+
+## License
+
+MIT

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),b=require("element-plus");function M(e,t){return e.flatMap(r=>{if(r.visible===!1)return[];const{visible:l,slot:c,headerSlot:s,render:u,headerRender:n,autoMerge:a,children:d,...m}=r,p={...m},g={},h=c?t[c]:void 0,y=s?t[s]:void 0;if(h?g.default=h:u&&(g.default=f=>u({row:f.row,column:f.column,$index:f.$index})),y?g.header=y:n&&(g.header=f=>n({column:f.column,$index:f.$index,store:f.store,_self:f._self})),d?.length){const f={default:()=>M(d,t)};return g.header&&(f.header=g.header),[o.h(b.ElTableColumn,p,f)]}return[o.h(b.ElTableColumn,p,Object.keys(g).length?g:void 0)]})}function z(e){return e.prop??e.property}function x(e,t){if(e===null||typeof e!="object")return;const r=e;if(Object.prototype.hasOwnProperty.call(r,t))return r[t];if(!t.includes("."))return;let l=r;for(const c of t.split(".")){if(l===null||typeof l!="object")return;l=l[c]}return l}function q(e){return e.flatMap(t=>t.visible===!1?[]:t.children?.length?q(t.children):[t])}function C(e,t=[]){const r=q(e),l=new Map;for(const n of r){const a=z(n);a&&!l.has(a)&&l.set(a,n)}const c=new Set,s=[],u=n=>{!n||c.has(n)||!l.has(n)||(c.add(n),s.push({key:n,getValue:a=>x(a,n)}))};return t.forEach(u),r.forEach(n=>{n.autoMerge&&u(z(n))}),s}function D(e,t){const r=e.length,l=new Map(t.map(u=>[u.key,Array.from({length:r},()=>1)]));if(!r||!t.length)return l;const c=e.map(u=>t.map(n=>n.getValue(u))),s=t.map(()=>0);for(let u=1;u<=r;u+=1){let n=!0;for(let a=0;a<t.length;a+=1){const d=u<r&&n&&c[u][a]===c[u-1][a];if(!d){const m=l.get(t[a].key),p=s[a],g=u-p;m[p]=g;for(let h=p+1;h<u;h+=1)m[h]=0;s[a]=u}n=d}}return l}function I(e,t="children"){return e.some(r=>{if(r===null||typeof r!="object")return!1;const l=r[t];return Array.isArray(l)&&l.length>0})}function L(e){const t=o.computed(()=>C(e.columns(),e.mergeFields())),r=o.computed(()=>t.value.length?e.tableRef.value?.store?.states?.data?.value??e.data.value:e.data.value),l=o.computed(()=>{if(!t.value.length||e.lazy())return new Map;const s=e.treeProps()?.children??"children",u=r.value;return I(u,s)?new Map:D(u,t.value)});return{spanMethod:o.computed(()=>{const s=e.userSpanMethod();return t.value.length?u=>{const n=s?.(u);if(n!==void 0)return n;const a=u.column.property,d=a?l.value.get(a)?.[u.rowIndex]:void 0;if(!(d===void 0||d===1))return{rowspan:d,colspan:1}}:s}),spanMap:l}}const T={page:1,pageSize:20,pageSizes:[10,20,50,100],layout:"total, sizes, prev, pager, next, jumper",background:!0};function _(e){return e===!1?null:{...T,...e===!0?{}:e??{}}}function O(e){const t=o.computed(()=>_(e())),r=o.shallowRef(t.value?.page??1),l=o.shallowRef(t.value?.pageSize??20);o.watch(()=>t.value?.page,n=>{n!==void 0&&(r.value=n)}),o.watch(()=>t.value?.pageSize,n=>{n!==void 0&&(l.value=n)});const c=o.computed(()=>t.value?r.value:null),s=o.computed(()=>t.value?l.value:null);function u(n){l.value=n,r.value=1}return{enabled:o.computed(()=>t.value!=null),config:t,currentPage:r,pageSize:l,requestPage:c,requestPageSize:s,setPageSize:u}}function j(e){const t=o.shallowRef(!1);let r=null,l=0;async function c(){const u=e.request();if(!u)return;r?.abort(),r=new AbortController;const n=++l,a=r;t.value=!0;try{const d=await u({page:e.page(),pageSize:e.pageSize(),signal:a.signal});if(a.signal.aborted||n!==l)return;e.onData?.(d),e.onLoaded?.(d)}catch(d){if(a.signal.aborted||n!==l)return;e.onError?.(d)}finally{n===l&&(t.value=!1)}}function s(){r?.abort(),l+=1,t.value=!1}return o.onBeforeUnmount(s),{loading:t,load:c,cancel:s}}const A=o.defineComponent({name:"ElTablePro",inheritAttrs:!1,props:{columns:{type:Array,default:()=>[]},request:{type:Function,default:void 0},pagination:{type:[Boolean,Object],default:!0},mergeFields:{type:Array,default:()=>[]},data:{type:Array,default:()=>[]},rowKey:{type:[String,Function],required:!0}},emits:{loaded:e=>!0,error:e=>!0},setup(e,{attrs:t,emit:r,expose:l}){const c=o.useSlots(),s=o.shallowRef(null),u=o.shallowRef([]),n=o.shallowRef(0),a=O(()=>e.pagination),d=o.computed(()=>{const i=e.rowKey;return typeof i=="function"?v=>String(i(v)):i}),{loading:m,load:p,cancel:g}=j({request:()=>e.request,page:()=>a.requestPage.value,pageSize:()=>a.requestPageSize.value,onData:i=>{u.value=i.data,n.value=i.total},onLoaded:i=>r("loaded",i),onError:i=>r("error",i)}),h=o.computed(()=>m.value),y=o.computed(()=>{if(e.request)return u.value;if(!e.data)return[];if(!a.config.value)return e.data;const i=(a.currentPage.value-1)*a.pageSize.value;return e.data.slice(i,i+a.pageSize.value)}),f=o.computed(()=>e.request?n.value:e.data?.length??0),{spanMethod:R}=L({tableRef:s,columns:()=>e.columns,data:y,mergeFields:()=>e.mergeFields,userSpanMethod:()=>t.spanMethod,treeProps:()=>t.treeProps,lazy:()=>!!t.lazy});async function S(i){i?.page!==void 0&&(a.currentPage.value=i.page),await p()}o.watch(()=>e.request,i=>{u.value=[],n.value=0,i?S():g()}),o.watch(()=>[a.requestPage.value,a.requestPageSize.value],()=>{e.request&&S()});const F=new Proxy({},{get(i,v){if(v==="reload")return S;const P=s.value;if(!P)return;const w=P[v];return typeof w=="function"?w.bind(P):w},has(i,v){return v==="reload"?!0:s.value!=null&&v in s.value}});return l(F),o.onMounted(()=>{e.request&&S()}),()=>{const i=o.h(b.ElTable,{...t,ref:s,data:y.value,rowKey:d.value,spanMethod:R.value},{default:()=>M(e.columns,c),empty:c.empty,append:c.append});return[o.withDirectives(i,[[b.vLoading,h.value]]),a.enabled.value?o.h(b.ElPagination,{currentPage:a.currentPage.value,pageSize:a.pageSize.value,total:f.value,pageSizes:[...a.config.value?.pageSizes??[]],layout:a.config.value?.layout,background:a.config.value?.background,"onUpdate:currentPage":v=>{a.currentPage.value=v},"onUpdate:pageSize":v=>{a.setPageSize(v)}}):null]}}}),k=[A];function E(e){k.forEach(t=>{const r=t.name;r&&e.component(r,t)})}const B={install:E};exports.ElTablePro=A;exports.TABLE_PRO_DEFAULT_PAGINATION=T;exports.default=B;exports.install=E;exports.normalizePagination=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),b=require("element-plus");function M(e,t){return e.flatMap(r=>{if(r.visible===!1)return[];const{visible:u,slot:c,headerSlot:s,render:l,headerRender:n,autoMerge:a,children:d,...m}=r,p={...m},g={},h=c?t[c]:void 0,y=s?t[s]:void 0;if(h?g.default=h:l&&(g.default=f=>l({row:f.row,column:f.column,$index:f.$index})),y?g.header=y:n&&(g.header=f=>n({column:f.column,$index:f.$index,store:f.store,_self:f._self})),d?.length){const f={default:()=>M(d,t)};return g.header&&(f.header=g.header),[o.h(b.ElTableColumn,p,f)]}return[o.h(b.ElTableColumn,p,Object.keys(g).length?g:void 0)]})}function z(e){return e.prop??e.property}function x(e,t){if(e===null||typeof e!="object")return;const r=e;if(Object.prototype.hasOwnProperty.call(r,t))return r[t];if(!t.includes("."))return;let u=r;for(const c of t.split(".")){if(u===null||typeof u!="object")return;u=u[c]}return u}function q(e){return e.flatMap(t=>t.visible===!1?[]:t.children?.length?q(t.children):[t])}function C(e,t=[]){const r=q(e),u=new Map;for(const n of r){const a=z(n);a&&!u.has(a)&&u.set(a,n)}const c=new Set,s=[],l=n=>{!n||c.has(n)||!u.has(n)||(c.add(n),s.push({key:n,getValue:a=>x(a,n)}))};return t.forEach(l),r.forEach(n=>{n.autoMerge&&l(z(n))}),s}function D(e,t){const r=e.length,u=new Map(t.map(l=>[l.key,Array.from({length:r},()=>1)]));if(!r||!t.length)return u;const c=e.map(l=>t.map(n=>n.getValue(l))),s=t.map(()=>0);for(let l=1;l<=r;l+=1){let n=!0;for(let a=0;a<t.length;a+=1){const d=l<r&&n&&c[l][a]===c[l-1][a];if(!d){const m=u.get(t[a].key),p=s[a],g=l-p;m[p]=g;for(let h=p+1;h<l;h+=1)m[h]=0;s[a]=l}n=d}}return u}function I(e,t="children"){return e.some(r=>{if(r===null||typeof r!="object")return!1;const u=r[t];return Array.isArray(u)&&u.length>0})}function L(e){const t=o.computed(()=>C(e.columns(),e.mergeFields())),r=o.computed(()=>t.value.length?e.tableRef.value?.store?.states?.data?.value??e.data.value:e.data.value),u=o.computed(()=>{if(!t.value.length||e.lazy())return new Map;const s=e.treeProps()?.children??"children",l=r.value;return I(l,s)?new Map:D(l,t.value)});return{spanMethod:o.computed(()=>{const s=e.userSpanMethod();return t.value.length?l=>{const n=s?.(l);if(n!==void 0)return n;const a=l.column.property,d=a?u.value.get(a)?.[l.rowIndex]:void 0;if(!(d===void 0||d===1))return{rowspan:d,colspan:1}}:s}),spanMap:u}}const T={page:1,pageSize:20,pageSizes:[10,20,50,100],layout:"total, sizes, prev, pager, next, jumper",background:!0};function _(e){return e===!1?null:{...T,...e===!0?{}:e??{}}}function O(e){const t=o.computed(()=>_(e())),r=o.shallowRef(t.value?.page??1),u=o.shallowRef(t.value?.pageSize??20);o.watch(()=>t.value?.page,n=>{n!==void 0&&(r.value=n)}),o.watch(()=>t.value?.pageSize,n=>{n!==void 0&&(u.value=n)});const c=o.computed(()=>t.value?r.value:null),s=o.computed(()=>t.value?u.value:null);function l(n){u.value=n,r.value=1}return{enabled:o.computed(()=>t.value!=null),config:t,currentPage:r,pageSize:u,requestPage:c,requestPageSize:s,setPageSize:l}}function j(e){const t=o.shallowRef(!1);let r=null,u=0;async function c(){const l=e.request();if(!l)return;r?.abort(),r=new AbortController;const n=++u,a=r;t.value=!0;try{const d=await l({page:e.page(),pageSize:e.pageSize(),signal:a.signal});if(a.signal.aborted||n!==u)return;e.onData?.(d),e.onLoaded?.(d)}catch(d){if(a.signal.aborted||n!==u)return;e.onError?.(d)}finally{n===u&&(t.value=!1)}}function s(){r?.abort(),u+=1,t.value=!1}return o.onBeforeUnmount(s),{loading:t,load:c,cancel:s}}const A=o.defineComponent({name:"ElTablePro",inheritAttrs:!1,props:{columns:{type:Array,default:()=>[]},request:{type:Function,default:void 0},pagination:{type:[Boolean,Object],default:!0},mergeFields:{type:Array,default:()=>[]},data:{type:Array,default:()=>[]},rowKey:{type:[String,Function],required:!0}},emits:{loaded:e=>!0,error:e=>!0},setup(e,{attrs:t,emit:r,expose:u}){const c=o.useSlots(),s=o.shallowRef(null),l=o.shallowRef([]),n=o.shallowRef(0),a=O(()=>e.pagination),d=o.computed(()=>{const i=e.rowKey;return typeof i=="function"?v=>String(i(v)):i}),{loading:m,load:p,cancel:g}=j({request:()=>e.request,page:()=>a.requestPage.value,pageSize:()=>a.requestPageSize.value,onData:i=>{l.value=i.data,n.value=i.total},onLoaded:i=>r("loaded",i),onError:i=>r("error",i)}),h=o.computed(()=>m.value),y=o.computed(()=>{if(e.request)return l.value;if(!e.data)return[];if(!a.config.value)return e.data;const i=(a.currentPage.value-1)*a.pageSize.value;return e.data.slice(i,i+a.pageSize.value)}),f=o.computed(()=>e.request?n.value:e.data?.length??0),{spanMethod:R}=L({tableRef:s,columns:()=>e.columns,data:y,mergeFields:()=>e.mergeFields,userSpanMethod:()=>t.spanMethod,treeProps:()=>t.treeProps,lazy:()=>!!t.lazy});async function S(i){i?.page!==void 0&&(a.currentPage.value=i.page),await p()}o.watch(()=>e.request,i=>{l.value=[],n.value=0,i?S():g()}),o.watch(()=>[a.requestPage.value,a.requestPageSize.value],()=>{e.request&&S()});const F=new Proxy({},{get(i,v){if(v==="reload")return S;const P=s.value;if(!P)return;const w=P[v];return typeof w=="function"?w.bind(P):w},has(i,v){return v==="reload"?!0:s.value!=null&&v in s.value}});return u(F),o.onMounted(()=>{e.request&&S()}),()=>{const i=o.h(b.ElTable,{...t,ref:s,data:y.value,rowKey:d.value,spanMethod:R.value},{default:()=>M(e.columns,c),empty:c.empty,append:c.append});return o.h("div",{class:"el-table-pro"},[o.withDirectives(i,[[b.vLoading,h.value]]),a.enabled.value?o.h(b.ElPagination,{currentPage:a.currentPage.value,pageSize:a.pageSize.value,total:f.value,pageSizes:[...a.config.value?.pageSizes??[]],layout:a.config.value?.layout,background:a.config.value?.background,"onUpdate:currentPage":v=>{a.currentPage.value=v},"onUpdate:pageSize":v=>{a.setPageSize(v)}}):null])}}}),k=[A];function E(e){k.forEach(t=>{const r=t.name;r&&e.component(r,t)})}const B={install:E};exports.ElTablePro=A;exports.TABLE_PRO_DEFAULT_PAGINATION=T;exports.default=B;exports.install=E;exports.normalizePagination=_;

package/dist/index.css

@@ -0,0 +1 @@
+.el-table-pro{display:flex;flex-direction:column;gap:16px;min-width:0}

package/dist/index.js

@@ -1,19 +1,19 @@
-import { h as P, computed as g, shallowRef as m, watch as z, onBeforeUnmount as F, defineComponent as C, useSlots as D, onMounted as R, withDirectives as j } from "vue";
+import { h as S, computed as g, shallowRef as m, watch as z, onBeforeUnmount as F, defineComponent as C, useSlots as D, onMounted as R, withDirectives as j } from "vue";
 import { ElTableColumn as q, ElTable as I, vLoading as L, ElPagination as k } from "element-plus";
 function T(e, t) {
   return e.flatMap((r) => {
     if (r.visible === !1) return [];
     const {
-      visible: l,
+      visible: u,
       slot: s,
       headerSlot: o,
-      render: u,
+      render: l,
       headerRender: n,
       autoMerge: a,
       children: c,
       ...y
     } = r, p = { ...y }, f = {}, h = s ? t[s] : void 0, b = o ? t[o] : void 0;
-    if (h ? f.default = h : u && (f.default = (d) => u({
+    if (h ? f.default = h : l && (f.default = (d) => l({
       row: d.row,
       column: d.column,
       $index: d.$index
@@ -26,10 +26,10 @@ function T(e, t) {
       const d = {
         default: () => T(c, t)
       };
-      return f.header && (d.header = f.header), [P(q, p, d)];
+      return f.header && (d.header = f.header), [S(q, p, d)];
     }
     return [
-      P(
+      S(
         q,
         p,
         Object.keys(f).length ? f : void 0
@@ -46,82 +46,82 @@ function O(e, t) {
   if (Object.prototype.hasOwnProperty.call(r, t))
     return r[t];
   if (!t.includes(".")) return;
-  let l = r;
+  let u = r;
   for (const s of t.split(".")) {
-    if (l === null || typeof l != "object") return;
-    l = l[s];
+    if (u === null || typeof u != "object") return;
+    u = u[s];
   }
-  return l;
+  return u;
 }
 function _(e) {
   return e.flatMap((t) => t.visible === !1 ? [] : t.children?.length ? _(t.children) : [t]);
 }
 function V(e, t = []) {
-  const r = _(e), l = /* @__PURE__ */ new Map();
+  const r = _(e), u = /* @__PURE__ */ new Map();
   for (const n of r) {
     const a = x(n);
-    a && !l.has(a) && l.set(a, n);
+    a && !u.has(a) && u.set(a, n);
   }
-  const s = /* @__PURE__ */ new Set(), o = [], u = (n) => {
-    !n || s.has(n) || !l.has(n) || (s.add(n), o.push({
+  const s = /* @__PURE__ */ new Set(), o = [], l = (n) => {
+    !n || s.has(n) || !u.has(n) || (s.add(n), o.push({
       key: n,
       getValue: (a) => O(a, n)
     }));
   };
-  return t.forEach(u), r.forEach((n) => {
-    n.autoMerge && u(x(n));
+  return t.forEach(l), r.forEach((n) => {
+    n.autoMerge && l(x(n));
   }), o;
 }
 function B(e, t) {
-  const r = e.length, l = new Map(
-    t.map((u) => [u.key, Array.from({ length: r }, () => 1)])
+  const r = e.length, u = new Map(
+    t.map((l) => [l.key, Array.from({ length: r }, () => 1)])
   );
-  if (!r || !t.length) return l;
-  const s = e.map((u) => t.map((n) => n.getValue(u))), o = t.map(() => 0);
-  for (let u = 1; u <= r; u += 1) {
+  if (!r || !t.length) return u;
+  const s = e.map((l) => t.map((n) => n.getValue(l))), o = t.map(() => 0);
+  for (let l = 1; l <= r; l += 1) {
     let n = !0;
     for (let a = 0; a < t.length; a += 1) {
-      const c = u < r && n && s[u][a] === s[u - 1][a];
+      const c = l < r && n && s[l][a] === s[l - 1][a];
       if (!c) {
-        const y = l.get(t[a].key), p = o[a], f = u - p;
+        const y = u.get(t[a].key), p = o[a], f = l - p;
         y[p] = f;
-        for (let h = p + 1; h < u; h += 1)
+        for (let h = p + 1; h < l; h += 1)
           y[h] = 0;
-        o[a] = u;
+        o[a] = l;
       }
       n = c;
     }
   }
-  return l;
+  return u;
 }
 function K(e, t = "children") {
   return e.some((r) => {
     if (r === null || typeof r != "object") return !1;
-    const l = r[t];
-    return Array.isArray(l) && l.length > 0;
+    const u = r[t];
+    return Array.isArray(u) && u.length > 0;
   });
 }
 function U(e) {
   const t = g(
     () => V(e.columns(), e.mergeFields())
-  ), r = g(() => t.value.length ? e.tableRef.value?.store?.states?.data?.value ?? e.data.value : e.data.value), l = g(() => {
+  ), r = g(() => t.value.length ? e.tableRef.value?.store?.states?.data?.value ?? e.data.value : e.data.value), u = g(() => {
     if (!t.value.length || e.lazy())
       return /* @__PURE__ */ new Map();
-    const o = e.treeProps()?.children ?? "children", u = r.value;
-    return K(u, o) ? /* @__PURE__ */ new Map() : B(u, t.value);
+    const o = e.treeProps()?.children ?? "children", l = r.value;
+    return K(l, o) ? /* @__PURE__ */ new Map() : B(l, t.value);
   });
   return {
     spanMethod: g(() => {
       const o = e.userSpanMethod();
-      return t.value.length ? (u) => {
-        const n = o?.(u);
+      return t.value.length ? (l) => {
+        const n = o?.(l);
         if (n !== void 0) return n;
-        const a = u.column.property, c = a ? l.value.get(a)?.[u.rowIndex] : void 0;
+        const a = l.column.property, c = a ? u.value.get(a)?.[l.rowIndex] : void 0;
         if (!(c === void 0 || c === 1))
           return { rowspan: c, colspan: 1 };
       } : o;
     }),
-    spanMap: l
+    spanMap: u
   };
 }
 const $ = {
@@ -138,7 +138,7 @@ function N(e) {
   };
 }
 function G(e) {
-  const t = g(() => N(e())), r = m(t.value?.page ?? 1), l = m(t.value?.pageSize ?? 20);
+  const t = g(() => N(e())), r = m(t.value?.page ?? 1), u = m(t.value?.pageSize ?? 20);
   z(
     () => t.value?.page,
     (n) => {
@@ -147,56 +147,56 @@ function G(e) {
   ), z(
     () => t.value?.pageSize,
     (n) => {
-      n !== void 0 && (l.value = n);
+      n !== void 0 && (u.value = n);
     }
   );
   const s = g(
     () => t.value ? r.value : null
   ), o = g(
-    () => t.value ? l.value : null
+    () => t.value ? u.value : null
   );
-  function u(n) {
-    l.value = n, r.value = 1;
+  function l(n) {
+    u.value = n, r.value = 1;
   }
   return {
     // 模板直接依赖这个布尔值，避免访问可能为 null 的配置。
     enabled: g(() => t.value != null),
     config: t,
     currentPage: r,
-    pageSize: l,
+    pageSize: u,
     requestPage: s,
     requestPageSize: o,
-    setPageSize: u
+    setPageSize: l
   };
 }
 function H(e) {
   const t = m(!1);
-  let r = null, l = 0;
+  let r = null, u = 0;
   async function s() {
-    const u = e.request();
-    if (!u) return;
+    const l = e.request();
+    if (!l) return;
     r?.abort(), r = new AbortController();
-    const n = ++l, a = r;
+    const n = ++u, a = r;
     t.value = !0;
     try {
-      const c = await u({
+      const c = await l({
         page: e.page(),
         pageSize: e.pageSize(),
         signal: a.signal
       });
-      if (a.signal.aborted || n !== l)
+      if (a.signal.aborted || n !== u)
         return;
       e.onData?.(c), e.onLoaded?.(c);
     } catch (c) {
-      if (a.signal.aborted || n !== l)
+      if (a.signal.aborted || n !== u)
         return;
       e.onError?.(c);
     } finally {
-      n === l && (t.value = !1);
+      n === u && (t.value = !1);
     }
   }
   function o() {
-    r?.abort(), l += 1, t.value = !1;
+    r?.abort(), u += 1, t.value = !1;
   }
   return F(o), { loading: t, load: s, cancel: o };
 }
@@ -236,9 +236,9 @@ const J = /* @__PURE__ */ C({
   setup(e, {
     attrs: t,
     emit: r,
-    expose: l
+    expose: u
   }) {
-    const s = D(), o = m(null), u = m([]), n = m(0), a = G(() => e.pagination), c = g(() => {
+    const s = D(), o = m(null), l = m([]), n = m(0), a = G(() => e.pagination), c = g(() => {
       const i = e.rowKey;
       return typeof i == "function" ? (v) => String(i(v)) : i;
     }), {
@@ -250,12 +250,12 @@ const J = /* @__PURE__ */ C({
       page: () => a.requestPage.value,
       pageSize: () => a.requestPageSize.value,
       onData: (i) => {
-        u.value = i.data, n.value = i.total;
+        l.value = i.data, n.value = i.total;
       },
       onLoaded: (i) => r("loaded", i),
       onError: (i) => r("error", i)
     }), h = g(() => y.value), b = g(() => {
-      if (e.request) return u.value;
+      if (e.request) return l.value;
       if (!e.data) return [];
       if (!a.config.value) return e.data;
       const i = (a.currentPage.value - 1) * a.pageSize.value;
@@ -271,17 +271,17 @@ const J = /* @__PURE__ */ C({
       treeProps: () => t.treeProps,
       lazy: () => !!t.lazy
     });
-    async function S(i) {
+    async function P(i) {
       i?.page !== void 0 && (a.currentPage.value = i.page), await p();
     }
     z(() => e.request, (i) => {
-      u.value = [], n.value = 0, i ? S() : f();
+      l.value = [], n.value = 0, i ? P() : f();
     }), z(() => [a.requestPage.value, a.requestPageSize.value], () => {
-      e.request && S();
+      e.request && P();
     });
     const E = new Proxy({}, {
       get(i, v) {
-        if (v === "reload") return S;
+        if (v === "reload") return P;
         const M = o.value;
         if (!M) return;
         const w = M[v];
@@ -291,10 +291,10 @@ const J = /* @__PURE__ */ C({
         return v === "reload" ? !0 : o.value != null && v in o.value;
       }
     });
-    return l(E), R(() => {
-      e.request && S();
+    return u(E), R(() => {
+      e.request && P();
     }), () => {
-      const i = P(I, {
+      const i = S(I, {
         ...t,
         ref: o,
         data: b.value,
@@ -305,7 +305,9 @@ const J = /* @__PURE__ */ C({
         empty: s.empty,
         append: s.append
       });
-      return [j(i, [[L, h.value]]), a.enabled.value ? P(k, {
+      return S("div", {
+        class: "el-table-pro"
+      }, [j(i, [[L, h.value]]), a.enabled.value ? S(k, {
         currentPage: a.currentPage.value,
         pageSize: a.pageSize.value,
         total: d.value,
@@ -318,7 +320,7 @@ const J = /* @__PURE__ */ C({
         "onUpdate:pageSize": (v) => {
           a.setPageSize(v);
         }
-      }) : null];
+      }) : null]);
     };
   }
 }), Q = [J];

package/dist/table-pro/index.vue.d.ts

@@ -25,9 +25,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<string | ((row: any) => string | number)>;
         required: true;
     };
-}>, () => (import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}> | null)[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     loaded: (_result: TableProRequestResult<any>) => true;
     error: (_error: unknown) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "element-plus-suite",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Unofficial enhancement components for Element Plus",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/th74100/element-plus-suite.git"
+  },
+  "homepage": "https://th74100.github.io/element-plus-suite/",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -15,7 +23,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "scripts": {
     "build": "vite build",