proto-table-wc 0.0.457 → 0.0.459

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,83 +1,83 @@
1
1
  import { h } from "@stencil/core";
2
2
  export class DemoTable {
3
- constructor() {
4
- this.fields = [
5
- { label: 'Date', prop: 'date' },
6
- { label: 'List Price', prop: 'price' },
7
- { label: '% of Market', prop: 'market' },
8
- { label: 'ProfitTime Score', prop: 'score' },
9
- ];
10
- this.items = [];
11
- this.table = undefined;
12
- this.renderDetails = item => {
13
- const { tags = [] } = item;
14
- return (h("div", { class: "detailWrapper" }, h("span", null, tags.length, " details..."), h("ul", null, tags.map(tag => (h("li", null, tag))))));
15
- };
16
- }
17
- componentWillLoad() {
18
- this.items = [
19
- {
20
- date: '08/30/2020',
21
- price: '$24,000',
22
- market: '98%',
23
- score: 'No Score',
24
- tags: ['one', 'two', 'three'],
25
- },
26
- {
27
- date: '08/31/2020',
28
- price: '$24,000',
29
- market: '99%',
30
- score: 'No Score',
31
- tags: ['uno', 'duo'],
32
- },
33
- {
34
- date: '09/01/2020',
35
- price: '$27,000',
36
- market: '102%',
37
- score: 'Platinum',
38
- },
39
- {
40
- date: '09/02/2020',
41
- price: '$27,423',
42
- market: '104%',
43
- score: 'Platinum',
44
- tags: ['dog', 'cat', 'fish', 'hamster'],
45
- },
46
- {
47
- date: '09/03/2020',
48
- price: '$27,521',
49
- market: '106%',
50
- score: 'Platinum',
51
- tags: ['4wd', 'sports'],
52
- },
53
- {
54
- date: '09/04/2020',
55
- price: '$27,687',
56
- market: '107%',
57
- score: 'Platinum',
58
- tags: ['leather', 'chrome'],
59
- },
60
- ];
61
- }
62
- componentDidLoad() {
63
- const { table, items, fields } = this;
64
- table.data = items;
65
- table.fields = fields;
66
- table.details = this.renderDetails;
67
- }
68
- render() {
69
- return h("proto-table", { ref: el => (this.table = el) });
70
- }
71
- static get is() { return "demo-table"; }
72
- static get encapsulation() { return "shadow"; }
73
- static get originalStyleUrls() {
74
- return {
75
- "$": ["demo-table.css"]
76
- };
77
- }
78
- static get styleUrls() {
79
- return {
80
- "$": ["demo-table.css"]
81
- };
82
- }
3
+ constructor() {
4
+ this.fields = [
5
+ { label: 'Date', prop: 'date' },
6
+ { label: 'List Price', prop: 'price' },
7
+ { label: '% of Market', prop: 'market' },
8
+ { label: 'ProfitTime Score', prop: 'score' },
9
+ ];
10
+ this.items = [];
11
+ this.table = undefined;
12
+ this.renderDetails = item => {
13
+ const { tags = [] } = item;
14
+ return (h("div", { class: "detailWrapper" }, h("span", null, tags.length, " details..."), h("ul", null, tags.map(tag => (h("li", null, tag))))));
15
+ };
16
+ }
17
+ componentWillLoad() {
18
+ this.items = [
19
+ {
20
+ date: '08/30/2020',
21
+ price: '$24,000',
22
+ market: '98%',
23
+ score: 'No Score',
24
+ tags: ['one', 'two', 'three'],
25
+ },
26
+ {
27
+ date: '08/31/2020',
28
+ price: '$24,000',
29
+ market: '99%',
30
+ score: 'No Score',
31
+ tags: ['uno', 'duo'],
32
+ },
33
+ {
34
+ date: '09/01/2020',
35
+ price: '$27,000',
36
+ market: '102%',
37
+ score: 'Platinum',
38
+ },
39
+ {
40
+ date: '09/02/2020',
41
+ price: '$27,423',
42
+ market: '104%',
43
+ score: 'Platinum',
44
+ tags: ['dog', 'cat', 'fish', 'hamster'],
45
+ },
46
+ {
47
+ date: '09/03/2020',
48
+ price: '$27,521',
49
+ market: '106%',
50
+ score: 'Platinum',
51
+ tags: ['4wd', 'sports'],
52
+ },
53
+ {
54
+ date: '09/04/2020',
55
+ price: '$27,687',
56
+ market: '107%',
57
+ score: 'Platinum',
58
+ tags: ['leather', 'chrome'],
59
+ },
60
+ ];
61
+ }
62
+ componentDidLoad() {
63
+ const { table, items, fields } = this;
64
+ table.data = items;
65
+ table.fields = fields;
66
+ table.details = this.renderDetails;
67
+ }
68
+ render() {
69
+ return h("proto-table", { ref: el => (this.table = el) });
70
+ }
71
+ static get is() { return "demo-table"; }
72
+ static get encapsulation() { return "shadow"; }
73
+ static get originalStyleUrls() {
74
+ return {
75
+ "$": ["demo-table.css"]
76
+ };
77
+ }
78
+ static get styleUrls() {
79
+ return {
80
+ "$": ["demo-table.css"]
81
+ };
82
+ }
83
83
  }
@@ -1,11 +1,11 @@
1
1
  const iconPaths = {
2
- 'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
3
- 'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
4
- 'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
5
- 'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
6
- 'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
7
- 'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
8
- 'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
2
+ 'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
3
+ 'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
4
+ 'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
5
+ 'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
6
+ 'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
7
+ 'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
8
+ 'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
9
9
  };
10
10
  export { iconPaths };
11
11
  export default iconPaths;
@@ -1,145 +1,145 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { iconPaths } from "./iconPaths";
3
3
  const iconAliases = {
4
- 'right': 'show',
5
- 'down': 'hide',
6
- 'arrow-up': 'sort',
7
- 'arrow-down': 'sort',
4
+ 'right': 'show',
5
+ 'down': 'hide',
6
+ 'arrow-up': 'sort',
7
+ 'arrow-down': 'sort',
8
8
  };
9
9
  const aliasFor = name => {
10
- return iconAliases[name];
10
+ return iconAliases[name];
11
11
  };
12
12
  export class ProtoTable {
13
- constructor() {
14
- this.protoIcon = (name, hex = undefined, size = 24) => {
15
- const path = iconPaths[name];
16
- 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" })));
17
- };
18
- this.handleCellClick = (index, row) => {
19
- return () => {
20
- if (index === 0) {
21
- this.expanded = this.expanded === row ? undefined : row;
22
- }
23
- };
24
- };
25
- this.handleSortClick = index => {
26
- // NOTE: small state machine for dealing with sorting...
27
- return () => {
28
- if (this.sort === index) {
29
- if (this.clicks === 2) {
30
- this.clicks = 0;
31
- this.sort = undefined;
32
- }
33
- else {
34
- this.clicks = this.clicks + 1;
35
- }
36
- }
37
- else {
38
- this.sort = index;
39
- this.clicks = 1;
40
- }
41
- };
42
- };
43
- this.iconFor = column => {
44
- return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';
45
- };
46
- this.header = () => {
47
- const { fields, iconFor, protoIcon } = this;
48
- return (h("div", { class: "header" }, fields.map(({ label }, index) => {
49
- const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';
50
- const ikon = iconFor(index);
51
- return (h("div", { class: cellClass, onClick: this.handleSortClick(index) }, protoIcon(ikon), h("span", null, label)));
52
- })));
53
- };
54
- this.row = (data, row) => {
55
- const { fields, protoIcon } = this;
56
- const rowClass = this.expanded === row ? 'row expanded' : 'row';
57
- return (h("div", { class: "rowContainer" }, h("div", { class: rowClass }, fields.map(({ prop }, index) => {
58
- const cellClass = index === this.sort ? 'cell sort' : 'cell';
59
- return (h("div", { class: cellClass, onClick: this.handleCellClick(index, row) }, index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'), data[prop]));
60
- })), this.details && this.expanded === row && this.details(data)));
61
- };
62
- this.data = [];
63
- this.details = undefined;
64
- this.fields = [];
65
- this.expanded = undefined;
66
- this.sort = undefined;
67
- this.clicks = 0;
68
- }
69
- render() {
70
- const items = this.data || [];
71
- return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
72
- }
73
- static get is() { return "proto-table"; }
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": "[]"
101
- },
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"
119
- },
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
- }
13
+ constructor() {
14
+ this.protoIcon = (name, hex = undefined, size = 24) => {
15
+ const path = iconPaths[name];
16
+ 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" })));
17
+ };
18
+ this.handleCellClick = (index, row) => {
19
+ return () => {
20
+ if (index === 0) {
21
+ this.expanded = this.expanded === row ? undefined : row;
22
+ }
23
+ };
24
+ };
25
+ this.handleSortClick = index => {
26
+ // NOTE: small state machine for dealing with sorting...
27
+ return () => {
28
+ if (this.sort === index) {
29
+ if (this.clicks === 2) {
30
+ this.clicks = 0;
31
+ this.sort = undefined;
32
+ }
33
+ else {
34
+ this.clicks = this.clicks + 1;
35
+ }
36
+ }
37
+ else {
38
+ this.sort = index;
39
+ this.clicks = 1;
40
+ }
41
+ };
42
+ };
43
+ this.iconFor = column => {
44
+ return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';
45
+ };
46
+ this.header = () => {
47
+ const { fields, iconFor, protoIcon } = this;
48
+ return (h("div", { class: "header" }, fields.map(({ label }, index) => {
49
+ const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';
50
+ const ikon = iconFor(index);
51
+ return (h("div", { class: cellClass, onClick: this.handleSortClick(index) }, protoIcon(ikon), h("span", null, label)));
52
+ })));
53
+ };
54
+ this.row = (data, row) => {
55
+ const { fields, protoIcon } = this;
56
+ const rowClass = this.expanded === row ? 'row expanded' : 'row';
57
+ return (h("div", { class: "rowContainer" }, h("div", { class: rowClass }, fields.map(({ prop }, index) => {
58
+ const cellClass = index === this.sort ? 'cell sort' : 'cell';
59
+ return (h("div", { class: cellClass, onClick: this.handleCellClick(index, row) }, index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'), data[prop]));
60
+ })), this.details && this.expanded === row && this.details(data)));
61
+ };
62
+ this.data = [];
63
+ this.details = undefined;
64
+ this.fields = [];
65
+ this.expanded = undefined;
66
+ this.sort = undefined;
67
+ this.clicks = 0;
68
+ }
69
+ render() {
70
+ const items = this.data || [];
71
+ return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
72
+ }
73
+ static get is() { return "proto-table"; }
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": "[]"
101
+ },
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"
119
+ },
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
+ }
145
145
  }