proto-table-wc 0.0.457 → 0.0.459

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,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
  }