@a2simcode/ui 0.0.216 → 0.0.217
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/components/button/index.d.ts +6 -6
- package/dist/components/button/src/button.vue.d.ts +5 -5
- package/dist/simcode-ui.es.js +9 -10
- package/dist/simcode-ui.umd.js +1 -1
- package/dist/stats.html +1 -1
- package/dist/ui.css +1 -1
- package/docs/components/button.md +8 -8
- package/docs/components/meta/button.ts +138 -138
- package/docs/components/table-panel.md +7 -6
- package/docs/examples/button/disabled.vue +39 -6
- package/docs/examples/button/status.vue +34 -0
- package/docs/examples/button/type.vue +1 -1
- package/docs/examples/buttons/basic.vue +2 -2
- package/docs/examples/buttons/disabled.vue +1 -1
- package/docs/examples/buttons/group.vue +1 -1
- package/docs/examples/buttons/link.vue +1 -1
- package/docs/examples/table/action-filter.vue +1 -1
- package/docs/examples/table/actions.vue +1 -1
- package/docs/examples/table-panel/basic.vue +1 -1
- package/docs/examples/table-panel/batch-operations.vue +3 -2
- package/docs/examples/table-panel/multiple-selection.vue +1 -1
- package/package.json +1 -1
- package/docs/examples/button/danger.vue +0 -9
|
@@ -1,212 +1,212 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
|
|
2
|
+
props: [
|
|
3
3
|
{
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
name: 'type',
|
|
5
|
+
description: '按钮的类型',
|
|
6
|
+
type: '"primary" | "dashed" | "link" | "text" | "default" | "outline"',
|
|
7
|
+
default: "'default'",
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
name: 'status',
|
|
11
|
+
description: '按钮的状态',
|
|
12
|
+
type: '"normal" | "success" | "warning" | "danger"',
|
|
13
|
+
default: "'normal'",
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
name: 'size',
|
|
17
|
+
description: '设置按钮大小',
|
|
18
|
+
type: '"large" | "default" | "small"',
|
|
19
|
+
default: "'default'",
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
name: 'shape',
|
|
23
|
+
description: '设置按钮形状',
|
|
24
|
+
type: '"default" | "circle" | "round"',
|
|
25
|
+
default: "'default'",
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
name: 'disabled',
|
|
29
|
+
description: '按钮不可用状态',
|
|
30
|
+
type: 'boolean',
|
|
31
|
+
default: 'false',
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
name: 'block',
|
|
35
|
+
description: '将按钮宽度调整为其父宽度的选项',
|
|
36
|
+
type: 'boolean',
|
|
37
|
+
default: 'false',
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
name: 'loading',
|
|
41
|
+
description: '设置按钮载入状态',
|
|
42
|
+
type: 'boolean | { delay?: number }',
|
|
43
|
+
default: 'false',
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
name: 'icon',
|
|
47
|
+
description: '图标',
|
|
48
|
+
type: 'string',
|
|
49
|
+
default: "''",
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
name: 'href',
|
|
53
|
+
description: '点击跳转的地址，指定此属性 button 的行为和 a 链接一致',
|
|
54
|
+
type: 'string',
|
|
55
|
+
default: "''",
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
name: 'target',
|
|
59
|
+
description: '相当于 a 链接的 target 属性，href 存在时生效',
|
|
60
|
+
type: 'string',
|
|
61
|
+
default: "'_self'",
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
name: 'label',
|
|
65
|
+
description: '按钮内容',
|
|
66
|
+
type: 'string',
|
|
67
|
+
default: "''",
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
name: 'notLabel',
|
|
71
|
+
description: '是否不要文字',
|
|
72
|
+
type: 'boolean',
|
|
73
|
+
default: 'false',
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
name: 'compact',
|
|
77
|
+
description: '是否紧凑模式',
|
|
78
|
+
type: 'boolean',
|
|
79
|
+
default: 'false',
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
name: 'lastCompactItem',
|
|
83
|
+
description: '',
|
|
84
|
+
type: 'boolean',
|
|
85
|
+
default: 'false',
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
name: 'firstCompactItem',
|
|
89
|
+
description: '',
|
|
90
|
+
type: 'boolean',
|
|
91
|
+
default: 'false',
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
94
|
+
name: 'isNotStopClick',
|
|
95
|
+
description: '是否不触发点击事件阻断',
|
|
96
|
+
type: 'boolean',
|
|
97
|
+
default: 'false',
|
|
98
|
+
},
|
|
99
99
|
],
|
|
100
|
-
|
|
100
|
+
events: [
|
|
101
101
|
{
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
102
|
+
name: 'click',
|
|
103
|
+
description: '点击按钮时触发',
|
|
104
|
+
type: 'MouseEvent',
|
|
105
|
+
},
|
|
106
106
|
],
|
|
107
|
-
|
|
107
|
+
slots: [
|
|
108
108
|
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
109
|
+
name: 'iconAfter',
|
|
110
|
+
description: '按钮后置图标插槽',
|
|
111
|
+
},
|
|
112
112
|
],
|
|
113
|
-
|
|
113
|
+
methods: [
|
|
114
114
|
{
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
name: 'focus',
|
|
116
|
+
description: '',
|
|
117
|
+
type: '() => void',
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
120
|
+
name: 'blur',
|
|
121
|
+
description: '',
|
|
122
|
+
type: '() => void',
|
|
123
|
+
},
|
|
124
124
|
],
|
|
125
|
-
|
|
125
|
+
types: [
|
|
126
126
|
{
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
name: 'ButtonProps',
|
|
128
|
+
properties: [
|
|
129
129
|
{
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
130
|
+
name: 'type',
|
|
131
|
+
type: "'primary' | 'dashed' | 'link' | 'text' | 'default' | 'outline'",
|
|
132
|
+
description: '按钮的类型',
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
135
|
+
name: 'status',
|
|
136
|
+
type: "'normal' | 'success' | 'warning' | 'danger'",
|
|
137
|
+
description: '按钮的状态',
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
name: 'size',
|
|
141
|
+
type: "'large' | 'default' | 'small'",
|
|
142
|
+
description: '设置按钮大小',
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
name: 'shape',
|
|
146
|
+
type: "'default' | 'circle' | 'round'",
|
|
147
|
+
description: '设置按钮形状',
|
|
148
148
|
},
|
|
149
149
|
{
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
name: 'disabled',
|
|
151
|
+
type: 'boolean',
|
|
152
|
+
description: '按钮不可用状态',
|
|
153
153
|
},
|
|
154
154
|
{
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
name: 'block',
|
|
156
|
+
type: 'boolean',
|
|
157
|
+
description: '将按钮宽度调整为其父宽度的选项',
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
name: 'loading',
|
|
161
|
+
type: 'boolean | { delay?: number }',
|
|
162
|
+
description: '设置按钮载入状态',
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
165
|
+
name: 'icon',
|
|
166
|
+
type: 'string',
|
|
167
|
+
description: '图标',
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
170
|
+
name: 'href',
|
|
171
|
+
type: 'string',
|
|
172
|
+
description: '点击跳转的地址，指定此属性 button 的行为和 a 链接一致',
|
|
173
173
|
},
|
|
174
174
|
{
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
175
|
+
name: 'target',
|
|
176
|
+
type: 'string',
|
|
177
|
+
description: '相当于 a 链接的 target 属性，href 存在时生效',
|
|
178
178
|
},
|
|
179
179
|
{
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
180
|
+
name: 'label',
|
|
181
|
+
type: 'string',
|
|
182
|
+
description: '按钮内容',
|
|
183
183
|
},
|
|
184
184
|
{
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
185
|
+
name: 'notLabel',
|
|
186
|
+
type: 'boolean',
|
|
187
|
+
description: '是否不要文字',
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
name: 'compact',
|
|
191
|
+
type: 'boolean',
|
|
192
|
+
description: '是否紧凑模式',
|
|
193
193
|
},
|
|
194
194
|
{
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
195
|
+
name: 'lastCompactItem',
|
|
196
|
+
type: 'boolean',
|
|
197
|
+
description: '',
|
|
198
198
|
},
|
|
199
199
|
{
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
200
|
+
name: 'firstCompactItem',
|
|
201
|
+
type: 'boolean',
|
|
202
|
+
description: '',
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
}
|
|
209
|
-
]
|
|
210
|
-
}
|
|
211
|
-
]
|
|
205
|
+
name: 'isNotStopClick',
|
|
206
|
+
type: 'boolean',
|
|
207
|
+
description: '是否不触发点击事件阻断',
|
|
208
|
+
},
|
|
209
|
+
],
|
|
210
|
+
},
|
|
211
|
+
],
|
|
212
212
|
}
|
|
@@ -185,12 +185,13 @@
|
|
|
185
185
|
|
|
186
186
|
### ButtonItem 类型
|
|
187
187
|
|
|
188
|
-
| 属性名 | 说明 | 类型 | 默认值
|
|
189
|
-
| ------ | ------------ | --------------------------------------------------------------------- |
|
|
190
|
-
| label | 按钮显示文本 | `string` | -
|
|
191
|
-
| icon | 按钮图标 | `string` | -
|
|
192
|
-
| type | 按钮类型 | `'primary' \| '
|
|
193
|
-
|
|
|
188
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
189
|
+
| ------ | ------------ | --------------------------------------------------------------------- | ---------- |
|
|
190
|
+
| label | 按钮显示文本 | `string` | - |
|
|
191
|
+
| icon | 按钮图标 | `string` | - |
|
|
192
|
+
| type | 按钮类型 | `'primary' \| 'dashed' \| 'link' \| 'text' \| 'default' \| 'outline'` | - |
|
|
193
|
+
| status | 按钮状态 | `'normal' \| 'success' \| 'warning' \| 'danger'` | `'normal'` |
|
|
194
|
+
| click | 按钮点击回调 | `() => void` | - |
|
|
194
195
|
|
|
195
196
|
### loadData 参数
|
|
196
197
|
|
|
@@ -1,9 +1,42 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div style="display: flex;
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<div style="display: flex; flex-direction: column; gap: 12px">
|
|
3
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
4
|
+
<j-button disabled label="Default Disabled" />
|
|
5
|
+
<j-button type="primary" disabled label="Primary Disabled" />
|
|
6
|
+
<j-button type="dashed" disabled label="Dashed Disabled" />
|
|
7
|
+
<j-button type="text" disabled label="Text Disabled" />
|
|
8
|
+
<j-button type="link" disabled label="Link Disabled" />
|
|
9
|
+
<j-button type="outline" disabled label="Outline Disabled" />
|
|
10
|
+
</div>
|
|
11
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
12
|
+
<j-button status="success" disabled label="Success Disabled" />
|
|
13
|
+
<j-button status="warning" disabled label="Warning Disabled" />
|
|
14
|
+
<j-button status="danger" disabled label="Danger Disabled" />
|
|
15
|
+
</div>
|
|
16
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
17
|
+
<j-button type="primary" status="success" disabled label="Primary Success Disabled" />
|
|
18
|
+
<j-button type="primary" status="warning" disabled label="Primary Warning Disabled" />
|
|
19
|
+
<j-button type="primary" status="danger" disabled label="Primary Danger Disabled" />
|
|
20
|
+
</div>
|
|
21
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
22
|
+
<j-button type="dashed" status="success" disabled label="Dashed Success Disabled" />
|
|
23
|
+
<j-button type="dashed" status="warning" disabled label="Dashed Warning Disabled" />
|
|
24
|
+
<j-button type="dashed" status="danger" disabled label="Dashed Danger Disabled" />
|
|
25
|
+
</div>
|
|
26
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
27
|
+
<j-button type="text" status="success" disabled label="Text Success Disabled" />
|
|
28
|
+
<j-button type="text" status="warning" disabled label="Text Warning Disabled" />
|
|
29
|
+
<j-button type="text" status="danger" disabled label="Text Danger Disabled" />
|
|
30
|
+
</div>
|
|
31
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
32
|
+
<j-button type="link" status="success" disabled label="Link Success Disabled" />
|
|
33
|
+
<j-button type="link" status="warning" disabled label="Link Warning Disabled" />
|
|
34
|
+
<j-button type="link" status="danger" disabled label="Link Danger Disabled" />
|
|
35
|
+
</div>
|
|
36
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
37
|
+
<j-button type="outline" status="success" disabled label="Outline Success Disabled" />
|
|
38
|
+
<j-button type="outline" status="warning" disabled label="Outline Warning Disabled" />
|
|
39
|
+
<j-button type="outline" status="danger" disabled label="Outline Danger Disabled" />
|
|
40
|
+
</div>
|
|
8
41
|
</div>
|
|
9
42
|
</template>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="display: flex; flex-direction: column; gap: 12px">
|
|
3
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
4
|
+
<j-button status="success" label="Success" />
|
|
5
|
+
<j-button status="warning" label="Warning" />
|
|
6
|
+
<j-button status="danger" label="Danger" />
|
|
7
|
+
</div>
|
|
8
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
9
|
+
<j-button type="primary" status="success" label="Primary Success" />
|
|
10
|
+
<j-button type="primary" status="warning" label="Primary Warning" />
|
|
11
|
+
<j-button type="primary" status="danger" label="Primary Danger" />
|
|
12
|
+
</div>
|
|
13
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
14
|
+
<j-button type="dashed" status="success" label="Dashed Success" />
|
|
15
|
+
<j-button type="dashed" status="warning" label="Dashed Warning" />
|
|
16
|
+
<j-button type="dashed" status="danger" label="Dashed Danger" />
|
|
17
|
+
</div>
|
|
18
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
19
|
+
<j-button type="text" status="success" label="Text Success" />
|
|
20
|
+
<j-button type="text" status="warning" label="Text Warning" />
|
|
21
|
+
<j-button type="text" status="danger" label="Text Danger" />
|
|
22
|
+
</div>
|
|
23
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
24
|
+
<j-button type="link" status="success" label="Link Success" />
|
|
25
|
+
<j-button type="link" status="warning" label="Link Warning" />
|
|
26
|
+
<j-button type="link" status="danger" label="Link Danger" />
|
|
27
|
+
</div>
|
|
28
|
+
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
29
|
+
<j-button type="outline" status="success" label="Outline Success" />
|
|
30
|
+
<j-button type="outline" status="warning" label="Outline Warning" />
|
|
31
|
+
<j-button type="outline" status="danger" label="Outline Danger" />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
3
3
|
<j-button type="primary" label="Primary Button" />
|
|
4
|
-
<j-button type="success" label="Success Button" />
|
|
5
4
|
<j-button label="Default Button" />
|
|
6
5
|
<j-button type="dashed" label="Dashed Button" />
|
|
7
6
|
<j-button type="text" label="Text Button" />
|
|
8
7
|
<j-button type="link" label="Link Button" />
|
|
8
|
+
<j-button type="outline" label="Outline Button" />
|
|
9
9
|
</div>
|
|
10
10
|
</template>
|
|
@@ -34,7 +34,7 @@ const buttonList = ref([
|
|
|
34
34
|
id: 'delete',
|
|
35
35
|
label: '删除',
|
|
36
36
|
config: {
|
|
37
|
-
|
|
37
|
+
status: 'danger',
|
|
38
38
|
icon: 'material-symbols-light:delete-outline',
|
|
39
39
|
},
|
|
40
40
|
click: () => {
|
|
@@ -51,7 +51,7 @@ const buttonList = ref([
|
|
|
51
51
|
uploadAccept: 'image/*',
|
|
52
52
|
uploadCallback: (data: any) => {
|
|
53
53
|
console.log(data)
|
|
54
|
-
return true
|
|
54
|
+
return true // 上传的网络请求返回 true 表示上传成功
|
|
55
55
|
},
|
|
56
56
|
uploadSuccess: () => {
|
|
57
57
|
console.log('上传成功')
|
|
@@ -123,7 +123,8 @@ const batchButtons = ref([
|
|
|
123
123
|
{
|
|
124
124
|
label: '批量删除',
|
|
125
125
|
icon: 'mdi:delete',
|
|
126
|
-
type: '
|
|
126
|
+
type: 'primary',
|
|
127
|
+
status: 'danger',
|
|
127
128
|
click: (selectedRecords: Record<string, any>[]) => {
|
|
128
129
|
ElMessageBox.confirm(`确定要删除选中的 ${selectedRecords.length} 条记录吗？`, '批量删除', {
|
|
129
130
|
confirmButtonText: '确定',
|
|
@@ -170,7 +171,7 @@ const actions = ref([
|
|
|
170
171
|
{
|
|
171
172
|
id: 'delete',
|
|
172
173
|
label: '删除',
|
|
173
|
-
config: {
|
|
174
|
+
config: { status: 'danger' },
|
|
174
175
|
click: (row: Record<string, any>) => {
|
|
175
176
|
ElMessage.warning(`删除: ${row.orderId}`)
|
|
176
177
|
},
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div style="display: flex; gap: 8px; flex-wrap: wrap">
|
|
3
|
-
<j-button danger label="Danger Default" />
|
|
4
|
-
<j-button type="primary" danger label="Danger Primary" />
|
|
5
|
-
<j-button type="dashed" danger label="Danger Dashed" />
|
|
6
|
-
<j-button type="text" danger label="Danger Text" />
|
|
7
|
-
<j-button type="link" danger label="Danger Link" />
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|