@weni/unnnic-system 3.34.2 → 3.35.0
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/index.d.ts +24 -0
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +5013 -4994
- package/dist/unnnic.umd.js +27 -27
- package/package.json +1 -1
- package/src/components/ui/table/TableCell.vue +74 -8
- package/src/components/ui/table/TableHead.vue +15 -3
- package/src/components/ui/table/TableHeader.vue +5 -1
- package/src/components/ui/table/TableRow.vue +11 -14
- package/src/stories/Table.stories.js +437 -155
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import unnnicTable from '../components/Table/Table.vue';
|
|
2
2
|
import unnnicTableRow from '../components/Table/TableRow.vue';
|
|
3
|
-
import
|
|
4
|
-
import unnnicCheckbox from '../components/Checkbox/Checkbox.vue';
|
|
3
|
+
import UnnnicButton from '../components/Button/Button.vue';
|
|
5
4
|
import {
|
|
5
|
+
Table,
|
|
6
6
|
TableHeader,
|
|
7
7
|
TableBody,
|
|
8
8
|
TableHead,
|
|
@@ -11,156 +11,99 @@ import {
|
|
|
11
11
|
import UnnnicTag from '@/components/Tag/Tag.vue';
|
|
12
12
|
import { action } from 'storybook/actions';
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
},
|
|
14
|
+
const tableRows = [
|
|
15
|
+
{
|
|
16
|
+
invoice:
|
|
17
|
+
'INV001 — With ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
18
|
+
status: { scheme: 'green', text: 'Paid' },
|
|
19
|
+
method: 'Credit Card',
|
|
20
|
+
amount: '$250.00',
|
|
22
21
|
},
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
unnnicTableRow,
|
|
30
|
-
unnnicButton,
|
|
31
|
-
unnnicCheckbox,
|
|
22
|
+
{
|
|
23
|
+
invoice:
|
|
24
|
+
'INV002 — Without ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
25
|
+
status: { scheme: 'red', text: 'Pending' },
|
|
26
|
+
method: 'Bank Transfer',
|
|
27
|
+
amount: '$199.00',
|
|
32
28
|
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
:items="table.items"
|
|
39
|
-
:style="{ maxHeight: '280px', maxWidth: '800px', }"
|
|
40
|
-
>
|
|
41
|
-
<template v-slot:header>
|
|
42
|
-
<unnnic-table-row :headers="table.headers">
|
|
43
|
-
<template v-slot:checkarea>
|
|
44
|
-
<unnnic-checkbox :modelValue="generalValue" @change="changeGeneralCheckbox" :style="{margin: '4px'}"/>
|
|
45
|
-
</template>
|
|
46
|
-
</unnnic-table-row>
|
|
47
|
-
</template>
|
|
48
|
-
|
|
49
|
-
<template v-slot:item="{ item }">
|
|
50
|
-
<unnnic-table-row :headers="table.headers">
|
|
51
|
-
<template v-slot:checkarea>
|
|
52
|
-
<unnnic-checkbox v-model="item.selected" :style="{margin: '4px'}"/>
|
|
53
|
-
</template>
|
|
54
|
-
|
|
55
|
-
<template v-slot:project>
|
|
56
|
-
<div :title="item.project" class="break-text">
|
|
57
|
-
{{ item.project }}
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
60
|
-
|
|
61
|
-
<template v-slot:contacts>
|
|
62
|
-
<div :title="item.contacts" class="break-text">
|
|
63
|
-
{{ item.contacts }}
|
|
64
|
-
</div>
|
|
65
|
-
</template>
|
|
66
|
-
|
|
67
|
-
<template v-slot:export>
|
|
68
|
-
<div :style="{ textAlign: 'center' }">
|
|
69
|
-
<unnnic-button
|
|
70
|
-
size="small"
|
|
71
|
-
type="secondary"
|
|
72
|
-
iconCenter="upload-bottom-1"
|
|
73
|
-
/>
|
|
74
|
-
</div>
|
|
75
|
-
</template>
|
|
76
|
-
</unnnic-table-row>
|
|
77
|
-
</template>
|
|
78
|
-
</unnnic-table>
|
|
79
|
-
</div>
|
|
80
|
-
`,
|
|
81
|
-
|
|
82
|
-
data() {
|
|
83
|
-
return {
|
|
84
|
-
table: {
|
|
85
|
-
headers: [
|
|
86
|
-
{
|
|
87
|
-
id: 'checkarea',
|
|
88
|
-
text: '',
|
|
89
|
-
width: '32px',
|
|
90
|
-
condensed: true,
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
id: 'project',
|
|
94
|
-
text: 'Projeto',
|
|
95
|
-
flex: 1,
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
id: 'contacts',
|
|
99
|
-
text: 'Nº Contatos',
|
|
100
|
-
flex: 1,
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
id: 'export',
|
|
104
|
-
text: 'Exportar',
|
|
105
|
-
width: '55px',
|
|
106
|
-
},
|
|
107
|
-
],
|
|
108
|
-
items: [
|
|
109
|
-
{
|
|
110
|
-
selected: false,
|
|
111
|
-
project: 'Funil de Marketing Digital',
|
|
112
|
-
contacts: '125.256.325',
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
selected: false,
|
|
116
|
-
project: 'Funil de Marketing Digital',
|
|
117
|
-
contacts: '125.256.325',
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
selected: false,
|
|
121
|
-
project: 'Juntando vetores',
|
|
122
|
-
contacts: '35.251',
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
selected: false,
|
|
126
|
-
project: 'Hospital Unimed',
|
|
127
|
-
contacts: '12.478',
|
|
128
|
-
},
|
|
129
|
-
],
|
|
130
|
-
},
|
|
131
|
-
};
|
|
29
|
+
{
|
|
30
|
+
invoice: 'INV003 — Monthly subscription',
|
|
31
|
+
status: { scheme: 'green', text: 'Paid' },
|
|
32
|
+
method: 'PayPal',
|
|
33
|
+
amount: '$49.00',
|
|
132
34
|
},
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
if (!this.table.items.find((item) => !item.selected)) {
|
|
141
|
-
return true;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
return 'less';
|
|
145
|
-
},
|
|
35
|
+
{
|
|
36
|
+
invoice: 'INV004 — Enterprise license',
|
|
37
|
+
status: { scheme: 'orange', text: 'Overdue' },
|
|
38
|
+
method: 'Wire Transfer',
|
|
39
|
+
amount: '$1,200.00',
|
|
146
40
|
},
|
|
41
|
+
];
|
|
147
42
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
43
|
+
export default {
|
|
44
|
+
title: 'Data Display/Table',
|
|
45
|
+
component: Table,
|
|
46
|
+
tags: ['autodocs'],
|
|
47
|
+
parameters: {
|
|
48
|
+
docs: {
|
|
49
|
+
description: {
|
|
50
|
+
component: `<div>**Transitional component to replace the legacy [Table](?path=/docs/data-display-tablenext--default) in the future.**
|
|
51
|
+
<br/>
|
|
52
|
+
<br/>
|
|
53
|
+
A composable semantic table built with HTML table elements and subcomponents.
|
|
54
|
+
<br/>
|
|
55
|
+
Use \`UnnnicTable\` with \`version="2"\` as the wrapper, then compose rows and cells with \`UnnnicTableHeader\`, \`UnnnicTableBody\`, \`UnnnicTableHead\`, \`UnnnicTableCell\`, and \`UnnnicTableRow\`.
|
|
56
|
+
<br/>
|
|
57
|
+
Supports text ellipsis, left/center/right alignment, custom cell content via slots, and clickable rows with keyboard interaction.
|
|
58
|
+
</div>`,
|
|
59
|
+
},
|
|
154
60
|
},
|
|
155
61
|
},
|
|
156
|
-
});
|
|
157
|
-
|
|
158
|
-
export const Default = Template.bind({});
|
|
159
|
-
Default.args = {
|
|
160
|
-
version: '1',
|
|
161
62
|
};
|
|
162
63
|
|
|
163
|
-
export const
|
|
64
|
+
export const Default = {
|
|
65
|
+
parameters: {
|
|
66
|
+
docs: {
|
|
67
|
+
description: {
|
|
68
|
+
story:
|
|
69
|
+
'Default table with header, body rows, text ellipsis, slot content for tags, and a clickable row.',
|
|
70
|
+
},
|
|
71
|
+
source: {
|
|
72
|
+
code: `<UnnnicTable version="2">
|
|
73
|
+
<UnnnicTableHeader>
|
|
74
|
+
<UnnnicTableRow>
|
|
75
|
+
<UnnnicTableHead width="50%">Invoice</UnnnicTableHead>
|
|
76
|
+
<UnnnicTableHead width="20%">Status</UnnnicTableHead>
|
|
77
|
+
<UnnnicTableHead width="15%">Method</UnnnicTableHead>
|
|
78
|
+
<UnnnicTableHead width="15%">Amount</UnnnicTableHead>
|
|
79
|
+
</UnnnicTableRow>
|
|
80
|
+
</UnnnicTableHeader>
|
|
81
|
+
<UnnnicTableBody>
|
|
82
|
+
<UnnnicTableRow>
|
|
83
|
+
<UnnnicTableCell ellipsis>
|
|
84
|
+
INV001 — With ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
85
|
+
</UnnnicTableCell>
|
|
86
|
+
<UnnnicTableCell>
|
|
87
|
+
<UnnnicTag scheme="green" text="Paid" />
|
|
88
|
+
</UnnnicTableCell>
|
|
89
|
+
<UnnnicTableCell>Credit Card</UnnnicTableCell>
|
|
90
|
+
<UnnnicTableCell>$250.00</UnnnicTableCell>
|
|
91
|
+
</UnnnicTableRow>
|
|
92
|
+
<UnnnicTableRow @click="handleRowClick">
|
|
93
|
+
<UnnnicTableCell>
|
|
94
|
+
INV002 — Without ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
95
|
+
</UnnnicTableCell>
|
|
96
|
+
<UnnnicTableCell>
|
|
97
|
+
<UnnnicTag scheme="red" text="Pending" />
|
|
98
|
+
</UnnnicTableCell>
|
|
99
|
+
<UnnnicTableCell>Bank Transfer</UnnnicTableCell>
|
|
100
|
+
<UnnnicTableCell>$199.00</UnnnicTableCell>
|
|
101
|
+
</UnnnicTableRow>
|
|
102
|
+
</UnnnicTableBody>
|
|
103
|
+
</UnnnicTable>`,
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
},
|
|
164
107
|
render: () => ({
|
|
165
108
|
components: {
|
|
166
109
|
unnnicTable,
|
|
@@ -177,17 +120,13 @@ export const Version2 = {
|
|
|
177
120
|
};
|
|
178
121
|
},
|
|
179
122
|
template: `
|
|
180
|
-
<unnnic-table version="2">
|
|
123
|
+
<unnnic-table version="2" :style="{ maxWidth: '800px' }">
|
|
181
124
|
<TableHeader>
|
|
182
125
|
<unnnic-table-row>
|
|
183
|
-
<TableHead width="50%">
|
|
184
|
-
Invoice
|
|
185
|
-
</TableHead>
|
|
126
|
+
<TableHead width="50%">Invoice</TableHead>
|
|
186
127
|
<TableHead width="20%">Status</TableHead>
|
|
187
128
|
<TableHead width="15%">Method</TableHead>
|
|
188
|
-
<TableHead width="15%">
|
|
189
|
-
Amount
|
|
190
|
-
</TableHead>
|
|
129
|
+
<TableHead width="15%">Amount</TableHead>
|
|
191
130
|
</unnnic-table-row>
|
|
192
131
|
</TableHeader>
|
|
193
132
|
<TableBody>
|
|
@@ -195,21 +134,364 @@ export const Version2 = {
|
|
|
195
134
|
<TableCell ellipsis>
|
|
196
135
|
INV001 — With ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
197
136
|
</TableCell>
|
|
198
|
-
<TableCell><UnnnicTag scheme="green" text="Paid" /></TableCell>
|
|
199
|
-
<TableCell>Credit Card</TableCell>
|
|
200
137
|
<TableCell>
|
|
201
|
-
|
|
138
|
+
<UnnnicTag scheme="green" text="Paid" />
|
|
202
139
|
</TableCell>
|
|
140
|
+
<TableCell>Credit Card</TableCell>
|
|
141
|
+
<TableCell>$250.00</TableCell>
|
|
203
142
|
</unnnic-table-row>
|
|
204
143
|
<unnnic-table-row @click="onRowClick">
|
|
205
144
|
<TableCell>
|
|
206
145
|
INV002 — Without ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
207
146
|
</TableCell>
|
|
208
|
-
<TableCell
|
|
147
|
+
<TableCell>
|
|
148
|
+
<UnnnicTag scheme="red" text="Pending" />
|
|
149
|
+
</TableCell>
|
|
209
150
|
<TableCell>Bank Transfer</TableCell>
|
|
151
|
+
<TableCell>$199.00</TableCell>
|
|
152
|
+
</unnnic-table-row>
|
|
153
|
+
</TableBody>
|
|
154
|
+
</unnnic-table>
|
|
155
|
+
`,
|
|
156
|
+
}),
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
export const ColumnWidth = {
|
|
160
|
+
parameters: {
|
|
161
|
+
docs: {
|
|
162
|
+
description: {
|
|
163
|
+
story:
|
|
164
|
+
'Use the `width` prop on `UnnnicTableHead` to set each column size. Values follow CSS `width` (percentages, pixels, or other length units) and apply to the header cell, which defines the column layout.',
|
|
165
|
+
},
|
|
166
|
+
source: {
|
|
167
|
+
code: `<UnnnicTable version="2">
|
|
168
|
+
<UnnnicTableHeader>
|
|
169
|
+
<UnnnicTableRow>
|
|
170
|
+
<UnnnicTableHead width="50%">Invoice</UnnnicTableHead>
|
|
171
|
+
<UnnnicTableHead width="120px">Method</UnnnicTableHead>
|
|
172
|
+
<UnnnicTableHead width="10%">Amount</UnnnicTableHead>
|
|
173
|
+
</UnnnicTableRow>
|
|
174
|
+
</UnnnicTableHeader>
|
|
175
|
+
<UnnnicTableBody>
|
|
176
|
+
<UnnnicTableRow>
|
|
177
|
+
<UnnnicTableCell>INV001 — Monthly subscription</UnnnicTableCell>
|
|
178
|
+
<UnnnicTableCell>Credit Card</UnnnicTableCell>
|
|
179
|
+
<UnnnicTableCell>$250.00</UnnnicTableCell>
|
|
180
|
+
</UnnnicTableRow>
|
|
181
|
+
</UnnnicTableBody>
|
|
182
|
+
</UnnnicTable>`,
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
render: () => ({
|
|
187
|
+
components: {
|
|
188
|
+
unnnicTable,
|
|
189
|
+
unnnicTableRow,
|
|
190
|
+
TableHeader,
|
|
191
|
+
TableBody,
|
|
192
|
+
TableHead,
|
|
193
|
+
TableCell,
|
|
194
|
+
},
|
|
195
|
+
template: `
|
|
196
|
+
<unnnic-table version="2">
|
|
197
|
+
<TableHeader>
|
|
198
|
+
<unnnic-table-row>
|
|
199
|
+
<TableHead width="50%">Invoice (50%)</TableHead>
|
|
200
|
+
<TableHead width="120px">Method (120px)</TableHead>
|
|
201
|
+
<TableHead width="10%">Amount (10%)</TableHead>
|
|
202
|
+
</unnnic-table-row>
|
|
203
|
+
</TableHeader>
|
|
204
|
+
<TableBody>
|
|
205
|
+
<unnnic-table-row>
|
|
206
|
+
<TableCell>INV001 — Monthly subscription with a longer invoice label</TableCell>
|
|
207
|
+
<TableCell>Credit Card</TableCell>
|
|
208
|
+
<TableCell>$250.00</TableCell>
|
|
209
|
+
</unnnic-table-row>
|
|
210
|
+
<unnnic-table-row>
|
|
211
|
+
<TableCell>INV002 — Enterprise license</TableCell>
|
|
212
|
+
<TableCell>Wire Transfer</TableCell>
|
|
213
|
+
<TableCell>$1,200.00</TableCell>
|
|
214
|
+
</unnnic-table-row>
|
|
215
|
+
</TableBody>
|
|
216
|
+
</unnnic-table>
|
|
217
|
+
`,
|
|
218
|
+
}),
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
export const Alignment = {
|
|
222
|
+
parameters: {
|
|
223
|
+
docs: {
|
|
224
|
+
description: {
|
|
225
|
+
story:
|
|
226
|
+
'Use the `align` prop on `UnnnicTableHead` and `UnnnicTableCell` to align content to the left, center or right.',
|
|
227
|
+
},
|
|
228
|
+
source: {
|
|
229
|
+
code: `<UnnnicTable version="2">
|
|
230
|
+
<UnnnicTableHeader>
|
|
231
|
+
<UnnnicTableRow>
|
|
232
|
+
<UnnnicTableHead>Product</UnnnicTableHead>
|
|
233
|
+
<UnnnicTableHead align="right">Quantity</UnnnicTableHead>
|
|
234
|
+
<UnnnicTableHead align="right">Amount</UnnnicTableHead>
|
|
235
|
+
</UnnnicTableRow>
|
|
236
|
+
</UnnnicTableHeader>
|
|
237
|
+
<UnnnicTableBody>
|
|
238
|
+
<UnnnicTableRow>
|
|
239
|
+
<UnnnicTableCell>Marketing plan</UnnnicTableCell>
|
|
240
|
+
<UnnnicTableCell align="right">12</UnnnicTableCell>
|
|
241
|
+
<UnnnicTableCell align="right">$1,200.00</UnnnicTableCell>
|
|
242
|
+
</UnnnicTableRow>
|
|
243
|
+
</UnnnicTableBody>
|
|
244
|
+
</UnnnicTable>`,
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
},
|
|
248
|
+
render: () => ({
|
|
249
|
+
components: {
|
|
250
|
+
unnnicTable,
|
|
251
|
+
unnnicTableRow,
|
|
252
|
+
TableHeader,
|
|
253
|
+
TableBody,
|
|
254
|
+
TableHead,
|
|
255
|
+
TableCell,
|
|
256
|
+
},
|
|
257
|
+
template: `
|
|
258
|
+
<unnnic-table version="2">
|
|
259
|
+
<TableHeader>
|
|
260
|
+
<unnnic-table-row>
|
|
261
|
+
<TableHead>Product</TableHead>
|
|
262
|
+
<TableHead align="center">Quantity</TableHead>
|
|
263
|
+
<TableHead align="right">Amount</TableHead>
|
|
264
|
+
</unnnic-table-row>
|
|
265
|
+
</TableHeader>
|
|
266
|
+
<TableBody>
|
|
267
|
+
<unnnic-table-row>
|
|
268
|
+
<TableCell>Marketing plan</TableCell>
|
|
269
|
+
<TableCell align="center">12</TableCell>
|
|
270
|
+
<TableCell align="right">$1,200.00</TableCell>
|
|
271
|
+
</unnnic-table-row>
|
|
272
|
+
<unnnic-table-row>
|
|
273
|
+
<TableCell>Support package</TableCell>
|
|
274
|
+
<TableCell align="center">3</TableCell>
|
|
275
|
+
<TableCell align="right">$450.00</TableCell>
|
|
276
|
+
</unnnic-table-row>
|
|
277
|
+
</TableBody>
|
|
278
|
+
</unnnic-table>
|
|
279
|
+
`,
|
|
280
|
+
}),
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
export const SlotContent = {
|
|
284
|
+
parameters: {
|
|
285
|
+
docs: {
|
|
286
|
+
description: {
|
|
287
|
+
story:
|
|
288
|
+
'Use the default slot on `UnnnicTableCell` to render custom components such as tags or buttons.',
|
|
289
|
+
},
|
|
290
|
+
source: {
|
|
291
|
+
code: `<UnnnicTable version="2">
|
|
292
|
+
<UnnnicTableHeader>
|
|
293
|
+
<UnnnicTableRow>
|
|
294
|
+
<UnnnicTableHead>Name</UnnnicTableHead>
|
|
295
|
+
<UnnnicTableHead>Status</UnnnicTableHead>
|
|
296
|
+
<UnnnicTableHead align="right">Actions</UnnnicTableHead>
|
|
297
|
+
</UnnnicTableRow>
|
|
298
|
+
</UnnnicTableHeader>
|
|
299
|
+
<UnnnicTableBody>
|
|
300
|
+
<UnnnicTableRow>
|
|
301
|
+
<UnnnicTableCell>Project Alpha</UnnnicTableCell>
|
|
302
|
+
<UnnnicTableCell>
|
|
303
|
+
<UnnnicTag scheme="green" text="Active" />
|
|
304
|
+
</UnnnicTableCell>
|
|
305
|
+
<UnnnicTableCell align="right">
|
|
306
|
+
<UnnnicButton text="Edit" size="small" type="secondary" />
|
|
307
|
+
</UnnnicTableCell>
|
|
308
|
+
</UnnnicTableRow>
|
|
309
|
+
</UnnnicTableBody>
|
|
310
|
+
</UnnnicTable>`,
|
|
311
|
+
},
|
|
312
|
+
},
|
|
313
|
+
},
|
|
314
|
+
render: () => ({
|
|
315
|
+
components: {
|
|
316
|
+
unnnicTable,
|
|
317
|
+
unnnicTableRow,
|
|
318
|
+
TableHeader,
|
|
319
|
+
TableBody,
|
|
320
|
+
TableHead,
|
|
321
|
+
TableCell,
|
|
322
|
+
UnnnicTag,
|
|
323
|
+
UnnnicButton,
|
|
324
|
+
},
|
|
325
|
+
template: `
|
|
326
|
+
<unnnic-table version="2">
|
|
327
|
+
<TableHeader>
|
|
328
|
+
<unnnic-table-row>
|
|
329
|
+
<TableHead width="40%">Name</TableHead>
|
|
330
|
+
<TableHead width="15%">Status</TableHead>
|
|
331
|
+
<TableHead width="15%" align="right">Actions</TableHead>
|
|
332
|
+
</unnnic-table-row>
|
|
333
|
+
</TableHeader>
|
|
334
|
+
<TableBody>
|
|
335
|
+
<unnnic-table-row>
|
|
336
|
+
<TableCell>Project Alpha</TableCell>
|
|
337
|
+
<TableCell>
|
|
338
|
+
<UnnnicTag scheme="green" text="Active" />
|
|
339
|
+
</TableCell>
|
|
340
|
+
<TableCell align="right">
|
|
341
|
+
<UnnnicButton text="Edit" size="small" type="secondary" />
|
|
342
|
+
</TableCell>
|
|
343
|
+
</unnnic-table-row>
|
|
344
|
+
<unnnic-table-row>
|
|
345
|
+
<TableCell>Project Beta</TableCell>
|
|
210
346
|
<TableCell>
|
|
211
|
-
|
|
347
|
+
<UnnnicTag scheme="orange" text="Pending" />
|
|
348
|
+
</TableCell>
|
|
349
|
+
<TableCell align="right">
|
|
350
|
+
<UnnnicButton text="Edit" size="small" type="secondary" />
|
|
351
|
+
</TableCell>
|
|
352
|
+
</unnnic-table-row>
|
|
353
|
+
</TableBody>
|
|
354
|
+
</unnnic-table>
|
|
355
|
+
`,
|
|
356
|
+
}),
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
export const ClickableRow = {
|
|
360
|
+
parameters: {
|
|
361
|
+
docs: {
|
|
362
|
+
description: {
|
|
363
|
+
story:
|
|
364
|
+
'Attach `@click` to `UnnnicTableRow` to make rows interactive. Keyboard users can activate the row with Enter or Space.',
|
|
365
|
+
},
|
|
366
|
+
source: {
|
|
367
|
+
code: `<UnnnicTable version="2">
|
|
368
|
+
<UnnnicTableHeader>
|
|
369
|
+
<UnnnicTableRow>
|
|
370
|
+
<UnnnicTableHead width="50%">Invoice</UnnnicTableHead>
|
|
371
|
+
<UnnnicTableHead width="20%">Status</UnnnicTableHead>
|
|
372
|
+
<UnnnicTableHead width="15%">Method</UnnnicTableHead>
|
|
373
|
+
<UnnnicTableHead width="15%" align="right">Amount</UnnnicTableHead>
|
|
374
|
+
</UnnnicTableRow>
|
|
375
|
+
</UnnnicTableHeader>
|
|
376
|
+
<UnnnicTableBody>
|
|
377
|
+
<UnnnicTableRow
|
|
378
|
+
v-for="(row, index) in rows"
|
|
379
|
+
:key="index"
|
|
380
|
+
@click="handleRowClick(row)"
|
|
381
|
+
>
|
|
382
|
+
<UnnnicTableCell>{{ row.invoice }}</UnnnicTableCell>
|
|
383
|
+
<UnnnicTableCell>
|
|
384
|
+
<UnnnicTag :scheme="row.status.scheme" :text="row.status.text" />
|
|
385
|
+
</UnnnicTableCell>
|
|
386
|
+
<UnnnicTableCell>{{ row.method }}</UnnnicTableCell>
|
|
387
|
+
<UnnnicTableCell align="right">{{ row.amount }}</UnnnicTableCell>
|
|
388
|
+
</UnnnicTableRow>
|
|
389
|
+
</UnnnicTableBody>
|
|
390
|
+
</UnnnicTable>`,
|
|
391
|
+
},
|
|
392
|
+
},
|
|
393
|
+
},
|
|
394
|
+
render: () => ({
|
|
395
|
+
components: {
|
|
396
|
+
unnnicTable,
|
|
397
|
+
unnnicTableRow,
|
|
398
|
+
TableHeader,
|
|
399
|
+
TableBody,
|
|
400
|
+
TableHead,
|
|
401
|
+
TableCell,
|
|
402
|
+
UnnnicTag,
|
|
403
|
+
},
|
|
404
|
+
setup() {
|
|
405
|
+
return {
|
|
406
|
+
onRowClick: action('click'),
|
|
407
|
+
rows: tableRows,
|
|
408
|
+
};
|
|
409
|
+
},
|
|
410
|
+
template: `
|
|
411
|
+
<unnnic-table version="2" :style="{ maxWidth: '800px' }">
|
|
412
|
+
<TableHeader>
|
|
413
|
+
<unnnic-table-row>
|
|
414
|
+
<TableHead width="50%">Invoice</TableHead>
|
|
415
|
+
<TableHead width="20%">Status</TableHead>
|
|
416
|
+
<TableHead width="15%">Method</TableHead>
|
|
417
|
+
<TableHead width="15%" align="right">Amount</TableHead>
|
|
418
|
+
</unnnic-table-row>
|
|
419
|
+
</TableHeader>
|
|
420
|
+
<TableBody>
|
|
421
|
+
<unnnic-table-row
|
|
422
|
+
v-for="(row, index) in rows"
|
|
423
|
+
:key="index"
|
|
424
|
+
@click="onRowClick"
|
|
425
|
+
>
|
|
426
|
+
<TableCell>{{ row.invoice }}</TableCell>
|
|
427
|
+
<TableCell>
|
|
428
|
+
<UnnnicTag :scheme="row.status.scheme" :text="row.status.text" />
|
|
429
|
+
</TableCell>
|
|
430
|
+
<TableCell>{{ row.method }}</TableCell>
|
|
431
|
+
<TableCell align="right">{{ row.amount }}</TableCell>
|
|
432
|
+
</unnnic-table-row>
|
|
433
|
+
</TableBody>
|
|
434
|
+
</unnnic-table>
|
|
435
|
+
`,
|
|
436
|
+
}),
|
|
437
|
+
};
|
|
438
|
+
|
|
439
|
+
export const WithoutEllipsis = {
|
|
440
|
+
parameters: {
|
|
441
|
+
docs: {
|
|
442
|
+
description: {
|
|
443
|
+
story:
|
|
444
|
+
'Set `:ellipsis="false"` on `UnnnicTableCell` to show the full text. Ellipsis is enabled by default.',
|
|
445
|
+
},
|
|
446
|
+
source: {
|
|
447
|
+
code: `<UnnnicTable version="2">
|
|
448
|
+
<UnnnicTableHeader>
|
|
449
|
+
<UnnnicTableRow>
|
|
450
|
+
<UnnnicTableHead width="70%">Description</UnnnicTableHead>
|
|
451
|
+
<UnnnicTableHead width="30%">Reference</UnnnicTableHead>
|
|
452
|
+
</UnnnicTableRow>
|
|
453
|
+
</UnnnicTableHeader>
|
|
454
|
+
<UnnnicTableBody>
|
|
455
|
+
<UnnnicTableRow>
|
|
456
|
+
<UnnnicTableCell :ellipsis="false">
|
|
457
|
+
The lazy fox jumps over the quick brown dog while carrying a very long description.
|
|
458
|
+
</UnnnicTableCell>
|
|
459
|
+
<UnnnicTableCell :ellipsis="false">REF-0000123456789</UnnnicTableCell>
|
|
460
|
+
</UnnnicTableRow>
|
|
461
|
+
</UnnnicTableBody>
|
|
462
|
+
</UnnnicTable>`,
|
|
463
|
+
},
|
|
464
|
+
},
|
|
465
|
+
},
|
|
466
|
+
render: () => ({
|
|
467
|
+
components: {
|
|
468
|
+
unnnicTable,
|
|
469
|
+
unnnicTableRow,
|
|
470
|
+
TableHeader,
|
|
471
|
+
TableBody,
|
|
472
|
+
TableHead,
|
|
473
|
+
TableCell,
|
|
474
|
+
},
|
|
475
|
+
template: `
|
|
476
|
+
<unnnic-table version="2" :style="{ maxWidth: '600px' }">
|
|
477
|
+
<TableHeader>
|
|
478
|
+
<unnnic-table-row>
|
|
479
|
+
<TableHead width="70%">Description</TableHead>
|
|
480
|
+
<TableHead width="30%">Reference</TableHead>
|
|
481
|
+
</unnnic-table-row>
|
|
482
|
+
</TableHeader>
|
|
483
|
+
<TableBody>
|
|
484
|
+
<unnnic-table-row>
|
|
485
|
+
<TableCell :ellipsis="false">
|
|
486
|
+
The lazy fox jumps over the quick brown dog while carrying a very long description that should wrap.
|
|
487
|
+
</TableCell>
|
|
488
|
+
<TableCell :ellipsis="false">REF-0000123456789</TableCell>
|
|
489
|
+
</unnnic-table-row>
|
|
490
|
+
<unnnic-table-row>
|
|
491
|
+
<TableCell :ellipsis="false">
|
|
492
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
|
|
212
493
|
</TableCell>
|
|
494
|
+
<TableCell :ellipsis="false">REF-0000987654321</TableCell>
|
|
213
495
|
</unnnic-table-row>
|
|
214
496
|
</TableBody>
|
|
215
497
|
</unnnic-table>
|