fantasia-ui 0.1.28 → 0.1.30
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/README.md +50 -80
- package/dist/components/modules/FTable.vue.d.ts +27 -6
- package/dist/fantasia-ui.es.js +2 -2
- package/dist/fantasia-ui.umd.js +2 -2
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/types/modules/f-table.d.ts +16 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,96 +37,66 @@ export default {
|
|
|
37
37
|
### Table 组件
|
|
38
38
|
|
|
39
39
|
```vue
|
|
40
|
-
<script lang="ts">
|
|
40
|
+
<script lang="ts" setup>
|
|
41
41
|
import { FTable } from 'fantasia-ui';
|
|
42
|
-
import type { Actions, Columns } from 'fantasia-ui';
|
|
43
|
-
import {
|
|
42
|
+
import type { Actions, Columns } from 'fantasia-ui/dist';
|
|
43
|
+
import { reactive } from 'vue';
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
const data = [
|
|
46
|
+
{
|
|
47
|
+
id: 1,
|
|
48
|
+
nickname: '测试用户'
|
|
49
|
+
}
|
|
50
|
+
]
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
data: {
|
|
55
|
-
columns: [
|
|
56
|
-
{
|
|
57
|
-
prop: 'id',
|
|
58
|
-
label: 'ID',
|
|
59
|
-
sortable: true
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
prop: 'nickname',
|
|
63
|
-
label: '昵称',
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
prop: 'username',
|
|
67
|
-
label: '用户名',
|
|
68
|
-
align: 'center',
|
|
69
|
-
filters: [
|
|
70
|
-
{
|
|
71
|
-
text: '测试',
|
|
72
|
-
value: '测试'
|
|
73
|
-
}
|
|
74
|
-
]
|
|
75
|
-
}
|
|
76
|
-
],
|
|
77
|
-
actions: [
|
|
78
|
-
{
|
|
79
|
-
action: 'button',
|
|
80
|
-
label: '删除',
|
|
81
|
-
event: 'delete',
|
|
82
|
-
type: 'danger'
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
action: 'button',
|
|
86
|
-
label: '删除',
|
|
87
|
-
event: 'delete',
|
|
88
|
-
type: 'danger'
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
action: 'button',
|
|
92
|
-
label: '删除',
|
|
93
|
-
event: 'delete',
|
|
94
|
-
type: 'danger'
|
|
95
|
-
},
|
|
96
|
-
],
|
|
97
|
-
data: [
|
|
98
|
-
{
|
|
99
|
-
id: 1,
|
|
100
|
-
nickname: '测试'
|
|
101
|
-
}
|
|
102
|
-
]
|
|
52
|
+
const columns = reactive<Columns[]>([
|
|
53
|
+
{
|
|
54
|
+
prop: 'id',
|
|
55
|
+
label: 'ID'
|
|
103
56
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
57
|
+
{
|
|
58
|
+
prop: 'nickname',
|
|
59
|
+
label: '昵称'
|
|
60
|
+
}
|
|
61
|
+
])
|
|
62
|
+
|
|
63
|
+
const actions = reactive<Actions[]>([
|
|
64
|
+
{
|
|
65
|
+
action: 'switch',
|
|
66
|
+
event: 'change',
|
|
67
|
+
prop: 'change',
|
|
68
|
+
config: {
|
|
69
|
+
activeText: '启用',
|
|
70
|
+
inactiveText: '禁用',
|
|
71
|
+
activeValue: 0,
|
|
72
|
+
inactiveValue: 1
|
|
121
73
|
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
action: 'button',
|
|
77
|
+
event: 'delete',
|
|
78
|
+
label: '删除',
|
|
79
|
+
type: 'danger',
|
|
80
|
+
icon: 'delete'
|
|
81
|
+
}
|
|
82
|
+
])
|
|
83
|
+
|
|
84
|
+
const handleAction = (row: any, event: string) => {
|
|
85
|
+
switch (event) {
|
|
86
|
+
case 'change':
|
|
87
|
+
console.log("切换了");
|
|
88
|
+
break;
|
|
89
|
+
case 'delete':
|
|
90
|
+
console.log("删除了");
|
|
91
|
+
break;
|
|
122
92
|
}
|
|
123
93
|
}
|
|
124
94
|
</script>
|
|
125
95
|
|
|
126
96
|
<template>
|
|
127
|
-
<FTable :
|
|
128
|
-
<template #
|
|
129
|
-
<
|
|
97
|
+
<FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
|
|
98
|
+
<template #id="{ row }">
|
|
99
|
+
<h1>{{ row }}</h1>
|
|
130
100
|
</template>
|
|
131
101
|
</FTable>
|
|
132
102
|
</template>
|
|
@@ -2,13 +2,34 @@ import { PropType } from 'vue';
|
|
|
2
2
|
import { Actions, Columns, Data } from '../../types';
|
|
3
3
|
declare function __VLS_template(): {
|
|
4
4
|
attrs: Partial<{}>;
|
|
5
|
-
slots:
|
|
6
|
-
|
|
7
|
-
}) => any>> & {
|
|
8
|
-
actions?(_: {
|
|
5
|
+
slots: Readonly<{
|
|
6
|
+
[prop: string]: {
|
|
9
7
|
row: any;
|
|
10
|
-
}
|
|
11
|
-
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* 自定义空内容插槽
|
|
11
|
+
* @param props 插槽属性
|
|
12
|
+
*/
|
|
13
|
+
empty: any;
|
|
14
|
+
/**
|
|
15
|
+
* 自定义操作列插槽
|
|
16
|
+
* @param props 插槽属性
|
|
17
|
+
*/
|
|
18
|
+
actions: any;
|
|
19
|
+
}> & {
|
|
20
|
+
[prop: string]: {
|
|
21
|
+
row: any;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* 自定义空内容插槽
|
|
25
|
+
* @param props 插槽属性
|
|
26
|
+
*/
|
|
27
|
+
empty: any;
|
|
28
|
+
/**
|
|
29
|
+
* 自定义操作列插槽
|
|
30
|
+
* @param props 插槽属性
|
|
31
|
+
*/
|
|
32
|
+
actions: any;
|
|
12
33
|
};
|
|
13
34
|
refs: {};
|
|
14
35
|
rootEl: any;
|
package/dist/fantasia-ui.es.js
CHANGED
|
@@ -60,7 +60,7 @@ const Uc = { key: 1 }, Wc = { class: "f-table__action" }, $c = /* @__PURE__ */ k
|
|
|
60
60
|
default: Ge(({ row: h }) => [
|
|
61
61
|
J(n)[o.prop] ? v0(c.$slots, o.prop, {
|
|
62
62
|
key: 0,
|
|
63
|
-
row: h
|
|
63
|
+
row: h[o.prop]
|
|
64
64
|
}, void 0, !0) : (m(), w("span", Uc, Y0(h[o.prop]), 1))
|
|
65
65
|
]),
|
|
66
66
|
_: 2
|
|
@@ -123,7 +123,7 @@ const Uc = { key: 1 }, Wc = { class: "f-table__action" }, $c = /* @__PURE__ */ k
|
|
|
123
123
|
for (const [a, n] of t)
|
|
124
124
|
r[a] = n;
|
|
125
125
|
return r;
|
|
126
|
-
}, En = /* @__PURE__ */ rs($c, [["__scopeId", "data-v-
|
|
126
|
+
}, En = /* @__PURE__ */ rs($c, [["__scopeId", "data-v-cf598e9b"]]), Gc = Symbol(), e2 = "el", Xc = "is-", Pr = (e, t, r, a, n) => {
|
|
127
127
|
let s = `${e}-${t}`;
|
|
128
128
|
return r && (s += `-${r}`), a && (s += `__${a}`), n && (s += `--${n}`), s;
|
|
129
129
|
}, Kc = Symbol("namespaceContextKey"), ts = (e) => {
|