kempo 2.7.0 → 2.7.1

package/dist/components/Table.js

@@ -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?.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((({html:e,icon:r,action:s})=>{if(e)return e;if(render&&"function"==typeof render)return render(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.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(),this.renderControls()}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);
+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((({html:e,icon:r,action:s,render:n})=>{if(e)return e;if(n&&"function"==typeof n)return n(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.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(),this.renderControls()}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/docs/kempo/components/Table.js

@@ -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?.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((({html:e,icon:r,action:s})=>{if(e)return e;if(render&&"function"==typeof render)return render(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.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(),this.renderControls()}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);
+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((({html:e,icon:r,action:s,render:n})=>{if(e)return e;if(n&&"function"==typeof n)return n(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.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(),this.renderControls()}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

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Table.js

@@ -44,7 +44,7 @@ export default class Table extends Component {
   
   renderControls(controls = [], record) {
     if (controls.length === 0) return '';
-    return `<td>${controls.map(({ html, icon, action }) => {
+    return `<td>${controls.map(({ html, icon, action, render }) => {
       if(html){
         return html;
       } else if(render && typeof(render) === 'function'){