configurabletable 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/configurable-table.js +8928 -0
- package/dist/configurable-table.umd.cjs +67 -0
- package/dist/style.css +1 -1
- package/package.json +5 -1
- package/dist/style.js +0 -112
- package/dist/style.umd.cjs +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "configurabletable",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "一个可配置的 Vue 3 表格组件",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/configurable-table.umd.cjs",
|
|
@@ -35,5 +35,9 @@
|
|
|
35
35
|
"@vitejs/plugin-vue": "^5.2.4",
|
|
36
36
|
"vite": "^6.4.3",
|
|
37
37
|
"vue": "^3.5.43"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@element-plus/icons-vue": "^2.3.2",
|
|
41
|
+
"element-plus": "^2.14.6"
|
|
38
42
|
}
|
|
39
43
|
}
|
package/dist/style.js
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { ref as m, computed as N, watch as P, openBlock as n, createElementBlock as a, createElementVNode as r, createCommentVNode as g, Fragment as y, renderList as _, normalizeStyle as T, createTextVNode as C, toDisplayString as h, withDirectives as $, vModelCheckbox as w } from "vue";
|
|
2
|
-
const A = (s, x) => {
|
|
3
|
-
const f = s.__vccOpts || s;
|
|
4
|
-
for (const [u, k] of x)
|
|
5
|
-
f[u] = k;
|
|
6
|
-
return f;
|
|
7
|
-
}, D = { class: "pro-table" }, E = {
|
|
8
|
-
key: 0,
|
|
9
|
-
style: { width: "40px" }
|
|
10
|
-
}, O = ["onClick"], F = { key: 0 }, I = { key: 0 }, K = ["value"], L = ["onClick"], M = {
|
|
11
|
-
key: 0,
|
|
12
|
-
class: "pagination"
|
|
13
|
-
}, R = ["disabled"], U = {
|
|
14
|
-
__name: "ProTable",
|
|
15
|
-
props: {
|
|
16
|
-
columns: { type: Array, default: () => [] },
|
|
17
|
-
data: { type: Array, default: () => [] },
|
|
18
|
-
selection: { type: Boolean, default: !1 },
|
|
19
|
-
pagination: { type: Boolean, default: !1 },
|
|
20
|
-
pageSize: { type: Number, default: 10 }
|
|
21
|
-
},
|
|
22
|
-
emits: ["selection-change", "sort-change"],
|
|
23
|
-
setup(s, { expose: x, emit: f }) {
|
|
24
|
-
const u = s, k = f, i = m(1), b = m([]), c = m(""), d = m("asc"), S = N(() => {
|
|
25
|
-
let t = [...u.data];
|
|
26
|
-
if (c.value && t.sort((l, e) => {
|
|
27
|
-
const v = l[c.value], o = e[c.value];
|
|
28
|
-
if (v === o) return 0;
|
|
29
|
-
const p = v > o ? 1 : -1;
|
|
30
|
-
return d.value === "asc" ? p : -p;
|
|
31
|
-
}), u.pagination) {
|
|
32
|
-
const l = (i.value - 1) * u.pageSize;
|
|
33
|
-
t = t.slice(l, l + u.pageSize);
|
|
34
|
-
}
|
|
35
|
-
return t;
|
|
36
|
-
});
|
|
37
|
-
function B(t) {
|
|
38
|
-
c.value === t ? d.value = d.value === "asc" ? "desc" : "asc" : (c.value = t, d.value = "asc"), k("sort-change", { prop: t, order: d.value });
|
|
39
|
-
}
|
|
40
|
-
function V(t, l) {
|
|
41
|
-
return t.buttons ? t.buttons.filter((e) => !e.hide || !e.hide(l)) : [];
|
|
42
|
-
}
|
|
43
|
-
function z(t) {
|
|
44
|
-
b.value = t.target.checked ? [...u.data] : [];
|
|
45
|
-
}
|
|
46
|
-
return P(b, (t) => k("selection-change", t)), x({ currentPage: i }), (t, l) => (n(), a("div", D, [
|
|
47
|
-
r("table", null, [
|
|
48
|
-
r("thead", null, [
|
|
49
|
-
r("tr", null, [
|
|
50
|
-
s.selection ? (n(), a("th", E, [
|
|
51
|
-
r("input", {
|
|
52
|
-
type: "checkbox",
|
|
53
|
-
onChange: z
|
|
54
|
-
}, null, 32)
|
|
55
|
-
])) : g("", !0),
|
|
56
|
-
(n(!0), a(y, null, _(s.columns, (e) => (n(), a("th", {
|
|
57
|
-
key: e.prop,
|
|
58
|
-
style: T({ width: e.width ? e.width + "px" : "auto" }),
|
|
59
|
-
onClick: (v) => e.sortable && B(e.prop)
|
|
60
|
-
}, [
|
|
61
|
-
C(h(e.label) + " ", 1),
|
|
62
|
-
e.sortable ? (n(), a("span", F, h(c.value === e.prop ? d.value === "asc" ? "↑" : "↓" : "↕"), 1)) : g("", !0)
|
|
63
|
-
], 12, O))), 128))
|
|
64
|
-
])
|
|
65
|
-
]),
|
|
66
|
-
r("tbody", null, [
|
|
67
|
-
(n(!0), a(y, null, _(S.value, (e, v) => (n(), a("tr", { key: v }, [
|
|
68
|
-
s.selection ? (n(), a("td", I, [
|
|
69
|
-
$(r("input", {
|
|
70
|
-
type: "checkbox",
|
|
71
|
-
value: e,
|
|
72
|
-
"onUpdate:modelValue": l[0] || (l[0] = (o) => b.value = o)
|
|
73
|
-
}, null, 8, K), [
|
|
74
|
-
[w, b.value]
|
|
75
|
-
])
|
|
76
|
-
])) : g("", !0),
|
|
77
|
-
(n(!0), a(y, null, _(s.columns, (o) => (n(), a("td", {
|
|
78
|
-
key: o.prop
|
|
79
|
-
}, [
|
|
80
|
-
o.type === "action" ? (n(!0), a(y, { key: 0 }, _(V(o, e), (p) => (n(), a("button", {
|
|
81
|
-
key: p.label,
|
|
82
|
-
onClick: (q) => p.handler(e, v)
|
|
83
|
-
}, h(p.label), 9, L))), 128)) : o.formatter ? (n(), a(y, { key: 1 }, [
|
|
84
|
-
C(h(o.formatter(e, o)), 1)
|
|
85
|
-
], 64)) : (n(), a(y, { key: 2 }, [
|
|
86
|
-
C(h(e[o.prop]), 1)
|
|
87
|
-
], 64))
|
|
88
|
-
]))), 128))
|
|
89
|
-
]))), 128))
|
|
90
|
-
])
|
|
91
|
-
]),
|
|
92
|
-
s.pagination ? (n(), a("div", M, [
|
|
93
|
-
r("button", {
|
|
94
|
-
disabled: i.value <= 1,
|
|
95
|
-
onClick: l[1] || (l[1] = (e) => i.value--)
|
|
96
|
-
}, "上一页", 8, R),
|
|
97
|
-
r("span", null, "第 " + h(i.value) + " 页", 1),
|
|
98
|
-
r("button", {
|
|
99
|
-
onClick: l[2] || (l[2] = (e) => i.value++)
|
|
100
|
-
}, "下一页")
|
|
101
|
-
])) : g("", !0)
|
|
102
|
-
]));
|
|
103
|
-
}
|
|
104
|
-
}, j = /* @__PURE__ */ A(U, [["__scopeId", "data-v-4888b0d6"]]), H = {
|
|
105
|
-
install(s) {
|
|
106
|
-
s.component("ProTable", j);
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
export {
|
|
110
|
-
j as ProTable,
|
|
111
|
-
H as default
|
|
112
|
-
};
|
package/dist/style.umd.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.ConfigurableTable={},r.Vue))})(this,(function(r,e){"use strict";const h=(a,B)=>{const k=a.__vccOpts||a;for(const[c,f]of B)k[c]=f;return k},b={class:"pro-table"},u={key:0,style:{width:"40px"}},E=["onClick"],V={key:0},_={key:0},N=["value"],C=["onClick"],S={key:0,class:"pagination"},x=["disabled"],g=h({__name:"ProTable",props:{columns:{type:Array,default:()=>[]},data:{type:Array,default:()=>[]},selection:{type:Boolean,default:!1},pagination:{type:Boolean,default:!1},pageSize:{type:Number,default:10}},emits:["selection-change","sort-change"],setup(a,{expose:B,emit:k}){const c=a,f=k,s=e.ref(1),y=e.ref([]),i=e.ref(""),d=e.ref("asc"),D=e.computed(()=>{let n=[...c.data];if(i.value&&n.sort((o,t)=>{const m=o[i.value],l=t[i.value];if(m===l)return 0;const p=m>l?1:-1;return d.value==="asc"?p:-p}),c.pagination){const o=(s.value-1)*c.pageSize;n=n.slice(o,o+c.pageSize)}return n});function F(n){i.value===n?d.value=d.value==="asc"?"desc":"asc":(i.value=n,d.value="asc"),f("sort-change",{prop:n,order:d.value})}function P(n,o){return n.buttons?n.buttons.filter(t=>!t.hide||!t.hide(o)):[]}function z(n){y.value=n.target.checked?[...c.data]:[]}return e.watch(y,n=>f("selection-change",n)),B({currentPage:s}),(n,o)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("table",null,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[a.selection?(e.openBlock(),e.createElementBlock("th",u,[e.createElementVNode("input",{type:"checkbox",onChange:z},null,32)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,t=>(e.openBlock(),e.createElementBlock("th",{key:t.prop,style:e.normalizeStyle({width:t.width?t.width+"px":"auto"}),onClick:m=>t.sortable&&F(t.prop)},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.sortable?(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(i.value===t.prop?d.value==="asc"?"↑":"↓":"↕"),1)):e.createCommentVNode("",!0)],12,E))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(D.value,(t,m)=>(e.openBlock(),e.createElementBlock("tr",{key:m},[a.selection?(e.openBlock(),e.createElementBlock("td",_,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",value:t,"onUpdate:modelValue":o[0]||(o[0]=l=>y.value=l)},null,8,N),[[e.vModelCheckbox,y.value]])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,l=>(e.openBlock(),e.createElementBlock("td",{key:l.prop},[l.type==="action"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(P(l,t),p=>(e.openBlock(),e.createElementBlock("button",{key:p.label,onClick:$=>p.handler(t,m)},e.toDisplayString(p.label),9,C))),128)):l.formatter?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(l.formatter(t,l)),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(t[l.prop]),1)],64))]))),128))]))),128))])]),a.pagination?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("button",{disabled:s.value<=1,onClick:o[1]||(o[1]=t=>s.value--)},"上一页",8,x),e.createElementVNode("span",null,"第 "+e.toDisplayString(s.value)+" 页",1),e.createElementVNode("button",{onClick:o[2]||(o[2]=t=>s.value++)},"下一页")])):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-4888b0d6"]]),T={install(a){a.component("ProTable",g)}};r.ProTable=g,r.default=T,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|