kempo 2.7.0 → 2.7.2

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(){const e=this.shadowRoot.getElementById("records");e.innerHTML="",this.records.forEach((t=>{const r=document.createElement("tr");this.controls?.before?.length&&r.appendChild(this.renderControls(this.controls.before,t)),this.fields.forEach((({name:e})=>{const n=document.createElement("td");let s=t[e]||"";Array.isArray(s)&&(s=s.join(", ")),n.innerHTML=s,r.appendChild(n)})),this.controls?.after?.length&&r.appendChild(this.renderControls(this.controls.after,t)),e.appendChild(r)}))}renderControls(e=[],t){const r=document.createElement("td");return e.forEach((({html:e,icon:n,action:s,render:o})=>{if(e)r.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(t,this);e instanceof HTMLElement?r.appendChild(e):"string"==typeof e&&r.appendChild(document.createRange().createContextualFragment(e))}else if(n){const e=document.createElement("button");e.appendChild(new Icon(n)),s&&e.addEventListener("click",(()=>s(t,this))),r.appendChild(e)}})),r}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/docs/components/table.html

@@ -22,6 +22,7 @@
         <a href="#requirements">Requirements</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
+        <a href="#controls">Row Controls</a><br />
       </div>
     </details>
 
@@ -107,6 +108,47 @@
       ]);
     </script>
 
+    <h3 id="controls"><a href="#controls" class="no-link">Row Controls</a></h3>
+    <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. All controls are combined into a single <code>&lt;td&gt;</code> with each control being a button.</p>
+
+    
+    <k-table id="contacts2"></k-table>
+    <script type="module">
+      document.getElementById('contacts2').setData([
+        {
+          name: "Dustin",
+          phoneNumber: "(111) 111-1111",
+          emailAddress: "dustin@mailserver.com",
+          gender: "Male"
+        },
+        {
+          name: "Kayla",
+          phoneNumber: "(222) 222-2222",
+          emailAddress: "kayla@mailserver.com",
+          gender: "Female"
+        }
+      ], false, {
+        before: [
+          {
+            icon: 'edit',
+            action: (record, table) => console.log('Edit', record, table)
+          }
+        ],
+        after: [
+          {
+            icon: 'delete',
+            action: (record, table) => console.log('Delete', record, table)
+          },
+          {
+            html: '<span>Custom HTML</span>'
+          },
+          {
+            render: (record, table) => `<a href="mailto:${record.emailAddress}">Email</a>`
+          }
+        ]
+      });
+    </script>
+
     <h3 id="constructor"><a href="#consttructor" class="no-link">Constructor</a></h3>
     <h6>Extends <a href="./component.html">Component</a></h6>
     <h5>
@@ -150,11 +192,10 @@
           action: (record, table) => console.log('Delete', record, table)
         },
         {
-          html: '<span>Custom HTML</span>',
-          action: (record, table) => console.log('Custom Action', record, table)
+          html: '<span>Custom HTML</span>'
         },
         {
-          render: (record, table) => `<button onclick="console.log('Rendered Action', ${record}, ${table})">Rendered Button</button>`
+          render: (record, table) => `&lt;button onclick="console.log('Rendered Action', ${record}, ${table})">Rendered Button&lt;/button>`
         }
       ]
     }</code></pre>

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(){const e=this.shadowRoot.getElementById("records");e.innerHTML="",this.records.forEach((t=>{const r=document.createElement("tr");this.controls?.before?.length&&r.appendChild(this.renderControls(this.controls.before,t)),this.fields.forEach((({name:e})=>{const n=document.createElement("td");let s=t[e]||"";Array.isArray(s)&&(s=s.join(", ")),n.innerHTML=s,r.appendChild(n)})),this.controls?.after?.length&&r.appendChild(this.renderControls(this.controls.after,t)),e.appendChild(r)}))}renderControls(e=[],t){const r=document.createElement("td");return e.forEach((({html:e,icon:n,action:s,render:o})=>{if(e)r.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(t,this);e instanceof HTMLElement?r.appendChild(e):"string"==typeof e&&r.appendChild(document.createRange().createContextualFragment(e))}else if(n){const e=document.createElement("button");e.appendChild(new Icon(n)),s&&e.addEventListener("click",(()=>s(t,this))),r.appendChild(e)}})),r}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

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

package/src/components/Table.js

@@ -26,38 +26,56 @@ export default class Table extends Component {
     return false;
   }
   renderFields(){
-    const beforeControls = this.controls.before?.length ? '<th></th>' : '';
-    const afterControls = this.controls.after?.length ? '<th></th>' : '';
+    const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
+    const afterControls = this.controls?.after?.length ? '<th></th>' : '';
     this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
   }
   renderRecords(){
-    this.shadowRoot.getElementById('records').innerHTML = this.records.map((record) => {
-      return `<tr>${this.renderControls(this.controls.before, record)}${this.fields.map(({name}) => {
+    const $records = this.shadowRoot.getElementById('records');
+    $records.innerHTML = '';
+    this.records.forEach((record) => {
+      const $tr = document.createElement('tr');
+      if(this.controls?.before?.length){
+        $tr.appendChild(this.renderControls(this.controls.before, record));
+      }
+      this.fields.forEach(({name}) => {
+        const $td = document.createElement('td');
         let value = record[name] || '';
         if (Array.isArray(value)) {
           value = value.join(', ');
         }
-        return `<td>${value}</td>`;
-      }).join('')}${this.renderControls(this.controls.after, record)}</tr>`;
-    }).join('');
+        $td.innerHTML = value;
+        $tr.appendChild($td);
+      });
+      if(this.controls?.after?.length){
+        $tr.appendChild(this.renderControls(this.controls.after, record));
+      }
+      $records.appendChild($tr);
+    });
   }
   
   renderControls(controls = [], record) {
-    if (controls.length === 0) return '';
-    return `<td>${controls.map(({ html, icon, action }) => {
+    const $td = document.createElement('td');
+    controls.forEach(({ html, icon, action, render }) => {
       if(html){
-        return html;
+        $td.appendChild(document.createRange().createContextualFragment(html));
       } else if(render && typeof(render) === 'function'){
-        return render(record, this);
-      } else {
+        const rendered = render(record, this);
+        if(rendered instanceof HTMLElement){
+          $td.appendChild(rendered);
+        } else if(typeof(rendered) === 'string'){
+          $td.appendChild(document.createRange().createContextualFragment(rendered));
+        }
+      } else if(icon){
         const $button = document.createElement('button');
         $button.appendChild(new Icon(icon));
         if (action) {
           $button.addEventListener('click', () => action(record, this));
         }
+        $td.appendChild($button);
       }
-      return button.outerHTML;
-    }).join('')}</td>`;
+    });
+    return $td;
   }
 
   setData(records, fields = false, controls = { before: [], after: [] }){
@@ -66,7 +84,6 @@ export default class Table extends Component {
     this.controls = controls;
     this.renderFields();
     this.renderRecords();
-    this.renderControls();
   }
 
   get shadowTemplate(){