@1024pix/pix-ui 51.3.0 → 51.4.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.
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{{#if this.displayHeader}}
|
|
2
|
-
<th scope="col" ...attributes>
|
|
3
|
-
|
|
2
|
+
<th scope="col" ...attributes aria-sort={{this.ariaSort}}>
|
|
3
|
+
<div class="pix-table-header-container">
|
|
4
|
+
{{yield to="header"}}
|
|
5
|
+
{{#if this.sortable}}
|
|
6
|
+
<PixIconButton
|
|
7
|
+
@ariaLabel={{this.iconLabel}}
|
|
8
|
+
@iconName={{this.iconName}}
|
|
9
|
+
@triggerAction={{@onSort}}
|
|
10
|
+
@size="small"
|
|
11
|
+
/>
|
|
12
|
+
{{/if}}
|
|
13
|
+
</div>
|
|
4
14
|
</th>
|
|
5
15
|
{{else}}
|
|
6
16
|
<td ...attributes class={{this.typeClass}}>
|
|
@@ -6,10 +6,77 @@ export default class PixTableColumn extends Component {
|
|
|
6
6
|
return this.args.context === 'header';
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
get type() {
|
|
10
|
+
return this.args.type ?? 'text';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
get sortable() {
|
|
14
|
+
return Boolean(this.args.onSort);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
get sortOrder() {
|
|
18
|
+
if (this.args.sortOrder === undefined) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
const correctSortOrders = ['asc', 'desc', null];
|
|
22
|
+
warn(
|
|
23
|
+
'PixTableColumn: you need to provide a valid sortOrder',
|
|
24
|
+
correctSortOrders.includes(this.args.sortOrder),
|
|
25
|
+
{
|
|
26
|
+
id: 'pix-ui.table-column.sortOrder.not-valid',
|
|
27
|
+
},
|
|
28
|
+
);
|
|
29
|
+
return this.args.sortOrder;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
get iconName() {
|
|
33
|
+
const isText = this.type === 'text';
|
|
34
|
+
if (!this.sortOrder) {
|
|
35
|
+
return isText ? 'sortAz' : 'sort';
|
|
36
|
+
}
|
|
37
|
+
if (this.sortOrder === 'asc') {
|
|
38
|
+
return isText ? 'sortAzAsc' : 'sortAsc';
|
|
39
|
+
}
|
|
40
|
+
return isText ? 'sortAzDesc' : 'sortDesc';
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
get iconLabel() {
|
|
44
|
+
warn(
|
|
45
|
+
'PixTableColumn: parameters `@ariaLabelDefaultSort`, `@ariaLabelSortDesc` and `@ariaLabelSortAsc` are required for sort buttons',
|
|
46
|
+
![
|
|
47
|
+
this.args.ariaLabelDefaultSort,
|
|
48
|
+
this.args.ariaLabelSortDesc,
|
|
49
|
+
this.args.ariaLabelSortAsc,
|
|
50
|
+
].includes(undefined),
|
|
51
|
+
{
|
|
52
|
+
id: 'pix-ui.pix-table-column.sortAriaLabels.required',
|
|
53
|
+
},
|
|
54
|
+
);
|
|
55
|
+
if (!this.sortOrder) {
|
|
56
|
+
return this.args.ariaLabelDefaultSort;
|
|
57
|
+
}
|
|
58
|
+
if (this.sortOrder === 'asc') {
|
|
59
|
+
return this.args.ariaLabelSortDesc;
|
|
60
|
+
}
|
|
61
|
+
return this.args.ariaLabelSortAsc;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
get ariaSort() {
|
|
65
|
+
if (!this.sortable) {
|
|
66
|
+
return undefined;
|
|
67
|
+
}
|
|
68
|
+
if (!this.sortOrder) {
|
|
69
|
+
return 'none';
|
|
70
|
+
}
|
|
71
|
+
if (this.sortOrder === 'asc') {
|
|
72
|
+
return 'ascending';
|
|
73
|
+
}
|
|
74
|
+
return 'descending';
|
|
75
|
+
}
|
|
76
|
+
|
|
9
77
|
get typeClass() {
|
|
10
78
|
const correctTypes = ['number', 'text'];
|
|
11
|
-
|
|
12
|
-
warn('PixTableColumn: you need to provide a valid type', correctTypes.includes(type), {
|
|
79
|
+
warn('PixTableColumn: you need to provide a valid type', correctTypes.includes(this.type), {
|
|
13
80
|
id: 'pix-ui.table-column.type.incorrect',
|
|
14
81
|
});
|
|
15
82
|
if (this.args.type === 'number') {
|