kempo 2.7.2 → 2.7.3
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/components/Table.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,o={before:[],after:[],top:[],bottom:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[],top:[],bottom:[]}}),e&&this.setData(e,t,o)}async render(e){return!!await super.render(e)&&(this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom"),!0)}renderFields(){const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){const e=this.shadowRoot.getElementById("records");e.innerHTML="",this.records.forEach((t=>{const o=document.createElement("tr");this.controls?.before?.length&&o.appendChild(this.renderRowControls(this.controls.before,t)),this.fields.forEach((({name:e})=>{const n=document.createElement("td");let r=t[e]||"";Array.isArray(r)&&(r=r.join(", ")),n.innerHTML=r,o.appendChild(n)})),this.controls?.after?.length&&o.appendChild(this.renderRowControls(this.controls.after,t)),e.appendChild(o)}))}renderRowControls(e=[],t){const o=document.createElement("td");return e.forEach((({html:e,icon:n,action:r,render:s})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(s&&"function"==typeof s){const e=s(this,t);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(n){const e=document.createElement("button");e.appendChild(new Icon(n)),r&&e.addEventListener("click",(()=>r(this,t))),o.appendChild(e)}})),o}renderControls(e=[],t){const o=document.createElement("div");e.forEach((({html:e,icon:t,action:n,render:r})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.appendChild(new Icon(t)),n&&e.addEventListener("click",(()=>n(this))),o.appendChild(e)}})),this.shadowRoot.getElementById(t).innerHTML="",this.shadowRoot.getElementById(t).appendChild(o)}setData(e,t=!1,o={before:[],after:[],top:[],bottom:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=o,this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom")}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <div id="top"></div>\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\n <div id="bottom"></div>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n margin-bottom: var(--spacer);\n }\n `}static extractFieldsFromRecords(e,t=100){const o=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>o.add(e)))})),[...o].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
|
@@ -131,19 +131,31 @@
|
|
|
131
131
|
before: [
|
|
132
132
|
{
|
|
133
133
|
icon: 'edit',
|
|
134
|
-
action: (
|
|
134
|
+
action: (table, record) => console.log('Edit', table, record)
|
|
135
135
|
}
|
|
136
136
|
],
|
|
137
137
|
after: [
|
|
138
138
|
{
|
|
139
139
|
icon: 'delete',
|
|
140
|
-
action: (
|
|
140
|
+
action: (table, record) => console.log('Delete', table, record)
|
|
141
141
|
},
|
|
142
142
|
{
|
|
143
143
|
html: '<span>Custom HTML</span>'
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
|
-
render: (
|
|
146
|
+
render: (table, record) => `<a href="mailto:${record.emailAddress}">Email</a>`
|
|
147
|
+
}
|
|
148
|
+
],
|
|
149
|
+
top: [
|
|
150
|
+
{
|
|
151
|
+
icon: 'add',
|
|
152
|
+
action: (table) => console.log('Add', table)
|
|
153
|
+
}
|
|
154
|
+
],
|
|
155
|
+
bottom: [
|
|
156
|
+
{
|
|
157
|
+
icon: 'refresh',
|
|
158
|
+
action: (table) => console.log('Refresh', table)
|
|
147
159
|
}
|
|
148
160
|
]
|
|
149
161
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,o={before:[],after:[],top:[],bottom:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[],top:[],bottom:[]}}),e&&this.setData(e,t,o)}async render(e){return!!await super.render(e)&&(this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom"),!0)}renderFields(){const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){const e=this.shadowRoot.getElementById("records");e.innerHTML="",this.records.forEach((t=>{const o=document.createElement("tr");this.controls?.before?.length&&o.appendChild(this.renderRowControls(this.controls.before,t)),this.fields.forEach((({name:e})=>{const n=document.createElement("td");let r=t[e]||"";Array.isArray(r)&&(r=r.join(", ")),n.innerHTML=r,o.appendChild(n)})),this.controls?.after?.length&&o.appendChild(this.renderRowControls(this.controls.after,t)),e.appendChild(o)}))}renderRowControls(e=[],t){const o=document.createElement("td");return e.forEach((({html:e,icon:n,action:r,render:s})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(s&&"function"==typeof s){const e=s(this,t);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(n){const e=document.createElement("button");e.appendChild(new Icon(n)),r&&e.addEventListener("click",(()=>r(this,t))),o.appendChild(e)}})),o}renderControls(e=[],t){const o=document.createElement("div");e.forEach((({html:e,icon:t,action:n,render:r})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.appendChild(new Icon(t)),n&&e.addEventListener("click",(()=>n(this))),o.appendChild(e)}})),this.shadowRoot.getElementById(t).innerHTML="",this.shadowRoot.getElementById(t).appendChild(o)}setData(e,t=!1,o={before:[],after:[],top:[],bottom:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=o,this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom")}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <div id="top"></div>\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\n <div id="bottom"></div>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n margin-bottom: var(--spacer);\n }\n `}static extractFieldsFromRecords(e,t=100){const o=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>o.add(e)))})),[...o].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
package/package.json
CHANGED
package/src/components/Table.js
CHANGED
|
@@ -3,13 +3,13 @@ import Icon from './Icon.js'; // Import Icon component
|
|
|
3
3
|
import { toTitleCase } from '../utils/string.js';
|
|
4
4
|
|
|
5
5
|
export default class Table extends Component {
|
|
6
|
-
constructor(data = false, fields = false, controls = { before: [], after: [] }){
|
|
6
|
+
constructor(data = false, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
|
|
7
7
|
super();
|
|
8
8
|
|
|
9
9
|
this.registerProps({
|
|
10
10
|
fields: [],
|
|
11
11
|
records: [],
|
|
12
|
-
controls: { before: [], after: [] }
|
|
12
|
+
controls: { before: [], after: [], top: [], bottom: [] }
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
/* Init */
|
|
@@ -19,8 +19,10 @@ export default class Table extends Component {
|
|
|
19
19
|
}
|
|
20
20
|
async render(force){
|
|
21
21
|
if(await super.render(force)){
|
|
22
|
+
this.renderControls(this.controls.top, 'top');
|
|
22
23
|
this.renderFields();
|
|
23
24
|
this.renderRecords();
|
|
25
|
+
this.renderControls(this.controls.bottom, 'bottom');
|
|
24
26
|
return true;
|
|
25
27
|
}
|
|
26
28
|
return false;
|
|
@@ -36,7 +38,7 @@ export default class Table extends Component {
|
|
|
36
38
|
this.records.forEach((record) => {
|
|
37
39
|
const $tr = document.createElement('tr');
|
|
38
40
|
if(this.controls?.before?.length){
|
|
39
|
-
$tr.appendChild(this.
|
|
41
|
+
$tr.appendChild(this.renderRowControls(this.controls.before, record));
|
|
40
42
|
}
|
|
41
43
|
this.fields.forEach(({name}) => {
|
|
42
44
|
const $td = document.createElement('td');
|
|
@@ -48,19 +50,19 @@ export default class Table extends Component {
|
|
|
48
50
|
$tr.appendChild($td);
|
|
49
51
|
});
|
|
50
52
|
if(this.controls?.after?.length){
|
|
51
|
-
$tr.appendChild(this.
|
|
53
|
+
$tr.appendChild(this.renderRowControls(this.controls.after, record));
|
|
52
54
|
}
|
|
53
55
|
$records.appendChild($tr);
|
|
54
56
|
});
|
|
55
57
|
}
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
renderRowControls(controls = [], record) {
|
|
58
60
|
const $td = document.createElement('td');
|
|
59
61
|
controls.forEach(({ html, icon, action, render }) => {
|
|
60
62
|
if(html){
|
|
61
63
|
$td.appendChild(document.createRange().createContextualFragment(html));
|
|
62
64
|
} else if(render && typeof(render) === 'function'){
|
|
63
|
-
const rendered = render(
|
|
65
|
+
const rendered = render(this, record);
|
|
64
66
|
if(rendered instanceof HTMLElement){
|
|
65
67
|
$td.appendChild(rendered);
|
|
66
68
|
} else if(typeof(rendered) === 'string'){
|
|
@@ -70,7 +72,7 @@ export default class Table extends Component {
|
|
|
70
72
|
const $button = document.createElement('button');
|
|
71
73
|
$button.appendChild(new Icon(icon));
|
|
72
74
|
if (action) {
|
|
73
|
-
$button.addEventListener('click', () => action(
|
|
75
|
+
$button.addEventListener('click', () => action(this, record));
|
|
74
76
|
}
|
|
75
77
|
$td.appendChild($button);
|
|
76
78
|
}
|
|
@@ -78,22 +80,51 @@ export default class Table extends Component {
|
|
|
78
80
|
return $td;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
|
|
83
|
+
renderControls(controls = [], position) {
|
|
84
|
+
const $container = document.createElement('div');
|
|
85
|
+
controls.forEach(({ html, icon, action, render }) => {
|
|
86
|
+
if(html){
|
|
87
|
+
$container.appendChild(document.createRange().createContextualFragment(html));
|
|
88
|
+
} else if(render && typeof(render) === 'function'){
|
|
89
|
+
const rendered = render(this);
|
|
90
|
+
if(rendered instanceof HTMLElement){
|
|
91
|
+
$container.appendChild(rendered);
|
|
92
|
+
} else if(typeof(rendered) === 'string'){
|
|
93
|
+
$container.appendChild(document.createRange().createContextualFragment(rendered));
|
|
94
|
+
}
|
|
95
|
+
} else if(icon){
|
|
96
|
+
const $button = document.createElement('button');
|
|
97
|
+
$button.appendChild(new Icon(icon));
|
|
98
|
+
if (action) {
|
|
99
|
+
$button.addEventListener('click', () => action(this));
|
|
100
|
+
}
|
|
101
|
+
$container.appendChild($button);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
this.shadowRoot.getElementById(position).innerHTML = '';
|
|
105
|
+
this.shadowRoot.getElementById(position).appendChild($container);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
setData(records, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
|
|
82
109
|
this.records = records;
|
|
83
110
|
this.fields = fields || Table.extractFieldsFromRecords(this.records);
|
|
84
111
|
this.controls = controls;
|
|
112
|
+
this.renderControls(this.controls.top, 'top');
|
|
85
113
|
this.renderFields();
|
|
86
114
|
this.renderRecords();
|
|
115
|
+
this.renderControls(this.controls.bottom, 'bottom');
|
|
87
116
|
}
|
|
88
117
|
|
|
89
118
|
get shadowTemplate(){
|
|
90
119
|
return /*html*/`
|
|
91
120
|
${super.shadowTemplate}
|
|
92
121
|
<div class="responsive-table">
|
|
122
|
+
<div id="top"></div>
|
|
93
123
|
<table>
|
|
94
124
|
<thead id="fields"></thead>
|
|
95
125
|
<tbody id="records"></tbody>
|
|
96
126
|
</table>
|
|
127
|
+
<div id="bottom"></div>
|
|
97
128
|
</div>
|
|
98
129
|
`;
|
|
99
130
|
}
|