proto-table-wc 0.0.326 → 0.0.328
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/demo-table_2.cjs.entry.js +1 -1
- package/dist/cjs/{index-7e27bef2.js → index-a6d8dc88.js} +183 -43
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/proto-table-wc.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/demo-table/demo-table.js +12 -12
- package/dist/collection/components/proto-table/proto-table.js +77 -81
- package/dist/esm/demo-table_2.entry.js +1 -1
- package/dist/esm/{index-c660fbbf.js → index-db21c56b.js} +183 -43
- package/dist/esm/loader.js +2 -2
- package/dist/esm/proto-table-wc.js +2 -2
- package/dist/proto-table-wc/{p-33ec0835.entry.js → p-1f6f46a5.entry.js} +1 -1
- package/dist/proto-table-wc/{p-fe8bd63d.js → p-9746b0d9.js} +0 -0
- package/dist/proto-table-wc/proto-table-wc.esm.js +1 -1
- package/loader/package.json +1 -0
- package/package.json +3 -3
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { h } from '@stencil/core';
|
2
2
|
import { iconPaths } from './iconPaths';
|
3
3
|
const iconAliases = {
|
4
4
|
'right': 'show',
|
@@ -19,11 +19,7 @@ export class ProtoTable {
|
|
19
19
|
this.clicks = 0;
|
20
20
|
this.protoIcon = (name, hex = undefined, size = 24) => {
|
21
21
|
const path = iconPaths[name];
|
22
|
-
return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" },
|
23
|
-
h("title", null, aliasFor(name)),
|
24
|
-
h("g", { fill: hex },
|
25
|
-
h("path", { d: path })),
|
26
|
-
h("path", { d: "M0 0h24v24H0z", fill: "none" })));
|
22
|
+
return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, aliasFor(name)), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
|
27
23
|
};
|
28
24
|
this.handleCellClick = (index, row) => {
|
29
25
|
return () => {
|
@@ -58,92 +54,92 @@ export class ProtoTable {
|
|
58
54
|
return (h("div", { class: "header" }, fields.map(({ label }, index) => {
|
59
55
|
const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';
|
60
56
|
const ikon = iconFor(index);
|
61
|
-
return (h("div", { class: cellClass, onClick: this.handleSortClick(index) },
|
62
|
-
protoIcon(ikon),
|
63
|
-
h("span", null, label)));
|
57
|
+
return (h("div", { class: cellClass, onClick: this.handleSortClick(index) }, protoIcon(ikon), h("span", null, label)));
|
64
58
|
})));
|
65
59
|
};
|
66
60
|
this.row = (data, row) => {
|
67
61
|
const { fields, protoIcon } = this;
|
68
62
|
const rowClass = this.expanded === row ? 'row expanded' : 'row';
|
69
|
-
return (h("div", { class: "rowContainer" },
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'),
|
74
|
-
data[prop]));
|
75
|
-
})),
|
76
|
-
this.details && this.expanded === row && this.details(data)));
|
63
|
+
return (h("div", { class: "rowContainer" }, h("div", { class: rowClass }, fields.map(({ prop }, index) => {
|
64
|
+
const cellClass = index === this.sort ? 'cell sort' : 'cell';
|
65
|
+
return (h("div", { class: cellClass, onClick: this.handleCellClick(index, row) }, index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'), data[prop]));
|
66
|
+
})), this.details && this.expanded === row && this.details(data)));
|
77
67
|
};
|
78
68
|
}
|
79
69
|
render() {
|
80
70
|
const items = this.data || [];
|
81
|
-
return (h("div", { class: "table" },
|
82
|
-
this.header(),
|
83
|
-
items.map((item, index) => this.row(item, index))));
|
71
|
+
return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
|
84
72
|
}
|
85
73
|
static get is() { return "proto-table"; }
|
86
|
-
static get originalStyleUrls() {
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
"
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
"original": "any",
|
114
|
-
"resolved": "any",
|
115
|
-
"references": {}
|
116
|
-
},
|
117
|
-
"required": false,
|
118
|
-
"optional": false,
|
119
|
-
"docs": {
|
120
|
-
"tags": [],
|
121
|
-
"text": ""
|
122
|
-
},
|
123
|
-
"attribute": "details",
|
124
|
-
"reflect": false,
|
125
|
-
"defaultValue": "undefined"
|
126
|
-
},
|
127
|
-
"fields": {
|
128
|
-
"type": "unknown",
|
129
|
-
"mutable": false,
|
130
|
-
"complexType": {
|
131
|
-
"original": "any[]",
|
132
|
-
"resolved": "any[]",
|
133
|
-
"references": {}
|
74
|
+
static get originalStyleUrls() {
|
75
|
+
return {
|
76
|
+
"$": ["proto-table.css"]
|
77
|
+
};
|
78
|
+
}
|
79
|
+
static get styleUrls() {
|
80
|
+
return {
|
81
|
+
"$": ["proto-table.css"]
|
82
|
+
};
|
83
|
+
}
|
84
|
+
static get properties() {
|
85
|
+
return {
|
86
|
+
"data": {
|
87
|
+
"type": "unknown",
|
88
|
+
"mutable": false,
|
89
|
+
"complexType": {
|
90
|
+
"original": "any[]",
|
91
|
+
"resolved": "any[]",
|
92
|
+
"references": {}
|
93
|
+
},
|
94
|
+
"required": false,
|
95
|
+
"optional": false,
|
96
|
+
"docs": {
|
97
|
+
"tags": [],
|
98
|
+
"text": ""
|
99
|
+
},
|
100
|
+
"defaultValue": "[]"
|
134
101
|
},
|
135
|
-
"
|
136
|
-
|
137
|
-
|
138
|
-
"
|
139
|
-
|
102
|
+
"details": {
|
103
|
+
"type": "any",
|
104
|
+
"mutable": false,
|
105
|
+
"complexType": {
|
106
|
+
"original": "any",
|
107
|
+
"resolved": "any",
|
108
|
+
"references": {}
|
109
|
+
},
|
110
|
+
"required": false,
|
111
|
+
"optional": false,
|
112
|
+
"docs": {
|
113
|
+
"tags": [],
|
114
|
+
"text": ""
|
115
|
+
},
|
116
|
+
"attribute": "details",
|
117
|
+
"reflect": false,
|
118
|
+
"defaultValue": "undefined"
|
140
119
|
},
|
141
|
-
"
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
120
|
+
"fields": {
|
121
|
+
"type": "unknown",
|
122
|
+
"mutable": false,
|
123
|
+
"complexType": {
|
124
|
+
"original": "any[]",
|
125
|
+
"resolved": "any[]",
|
126
|
+
"references": {}
|
127
|
+
},
|
128
|
+
"required": false,
|
129
|
+
"optional": false,
|
130
|
+
"docs": {
|
131
|
+
"tags": [],
|
132
|
+
"text": ""
|
133
|
+
},
|
134
|
+
"defaultValue": "[]"
|
135
|
+
}
|
136
|
+
};
|
137
|
+
}
|
138
|
+
static get states() {
|
139
|
+
return {
|
140
|
+
"expanded": {},
|
141
|
+
"sort": {},
|
142
|
+
"clicks": {}
|
143
|
+
};
|
144
|
+
}
|
149
145
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
1
|
+
import { r as registerInstance, h } from './index-db21c56b.js';
|
2
2
|
|
3
3
|
const demoTableCss = ".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";
|
4
4
|
|