kempo 2.6.1 → 2.6.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,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before
|
|
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,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!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(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({icon:e,action:r})=>{const s=document.createElement("button"),o=new Icon(e);return s.appendChild(o),s.addEventListener("click",(()=>r(t,this))),s.outerHTML})).join("")}</td>`}setData(e,t=!1,r={before:[],after:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=r,this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\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 r=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>r.add(e)))})),[...r].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
|
@@ -177,7 +177,22 @@
|
|
|
177
177
|
<p>An array of objects that represents the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this parameter is omitted, the fields will be automatically generated from the first 100 records.</p>
|
|
178
178
|
|
|
179
179
|
<h5><code><i>object</i> controls</code></h5>
|
|
180
|
-
<p>An object containing arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a callback function. The <code>controls</code> object can
|
|
180
|
+
<p>An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a callback function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string) and <code>action</code> (function).</p>
|
|
181
|
+
<p>Example:</p>
|
|
182
|
+
<pre><code class="hljs javascript">{
|
|
183
|
+
before: [
|
|
184
|
+
{
|
|
185
|
+
icon: 'edit',
|
|
186
|
+
action: (record, table) => console.log('Edit', record, table)
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
after: [
|
|
190
|
+
{
|
|
191
|
+
icon: 'delete',
|
|
192
|
+
action: (record, table) => console.log('Delete', record, table)
|
|
193
|
+
}
|
|
194
|
+
]
|
|
195
|
+
}</code></pre>
|
|
181
196
|
|
|
182
197
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
183
198
|
<ul>
|
|
@@ -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,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before
|
|
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,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!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(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({icon:e,action:r})=>{const s=document.createElement("button"),o=new Icon(e);return s.appendChild(o),s.addEventListener("click",(()=>r(t,this))),s.outerHTML})).join("")}</td>`}setData(e,t=!1,r={before:[],after:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=r,this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\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 r=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>r.add(e)))})),[...r].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
package/package.json
CHANGED
package/src/components/Table.js
CHANGED
|
@@ -26,8 +26,8 @@ export default class Table extends Component {
|
|
|
26
26
|
return false;
|
|
27
27
|
}
|
|
28
28
|
renderFields(){
|
|
29
|
-
const beforeControls = this.controls.before
|
|
30
|
-
const afterControls = this.controls.after
|
|
29
|
+
const beforeControls = this.controls.before?.length ? '<th></th>' : '';
|
|
30
|
+
const afterControls = this.controls.after?.length ? '<th></th>' : '';
|
|
31
31
|
this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
|
|
32
32
|
}
|
|
33
33
|
renderRecords(){
|
|
@@ -42,7 +42,7 @@ export default class Table extends Component {
|
|
|
42
42
|
}).join('');
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
renderControls(controls, record) {
|
|
45
|
+
renderControls(controls = [], record) {
|
|
46
46
|
if (controls.length === 0) return '';
|
|
47
47
|
return `<td>${controls.map(({ icon, action }) => {
|
|
48
48
|
const button = document.createElement('button');
|