kempo 2.7.1 → 2.7.3

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,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);
+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/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,59 @@
       ]);
     </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: (table, record) => console.log('Edit', table, record)
+          }
+        ],
+        after: [
+          {
+            icon: 'delete',
+            action: (table, record) => console.log('Delete', table, record)
+          },
+          {
+            html: '<span>Custom HTML</span>'
+          },
+          {
+            render: (table, record) => `<a href="mailto:${record.emailAddress}">Email</a>`
+          }
+        ],
+        top: [
+          {
+            icon: 'add',
+            action: (table) => console.log('Add', table)
+          }
+        ],
+        bottom: [
+          {
+            icon: 'refresh',
+            action: (table) => console.log('Refresh', table)
+          }
+        ]
+      });
+    </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 +204,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,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);
+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

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

package/src/components/Table.js

@@ -3,13 +3,13 @@ import Icon from './Icon.js'; // Import Icon component
 import { toTitleCase } from '../utils/string.js';
 
 export default class Table extends Component {
-  constructor(data = false, fields = false, controls = { before: [], after: [] }){
+  constructor(data = false, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
     super();
 
     this.registerProps({
       fields: [],
       records: [],
-      controls: { before: [], after: [] }
+      controls: { before: [], after: [], top: [], bottom: [] }
     });
 
     /* Init */
@@ -19,64 +19,112 @@ export default class Table extends Component {
   }
   async render(force){
     if(await super.render(force)){
+      this.renderControls(this.controls.top, 'top');
       this.renderFields();
       this.renderRecords();
+      this.renderControls(this.controls.bottom, 'bottom');
       return true;
     }
     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.renderRowControls(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.renderRowControls(this.controls.after, record));
+      }
+      $records.appendChild($tr);
+    });
   }
   
-  renderControls(controls = [], record) {
-    if (controls.length === 0) return '';
-    return `<td>${controls.map(({ html, icon, action, render }) => {
+  renderRowControls(controls = [], record) {
+    const $td = document.createElement('td');
+    controls.forEach(({ html, icon, action, render }) => {
+      if(html){
+        $td.appendChild(document.createRange().createContextualFragment(html));
+      } else if(render && typeof(render) === 'function'){
+        const rendered = render(this, record);
+        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(this, record));
+        }
+        $td.appendChild($button);
+      }
+    });
+    return $td;
+  }
+
+  renderControls(controls = [], position) {
+    const $container = document.createElement('div');
+    controls.forEach(({ html, icon, action, render }) => {
       if(html){
-        return html;
+        $container.appendChild(document.createRange().createContextualFragment(html));
       } else if(render && typeof(render) === 'function'){
-        return render(record, this);
-      } else {
+        const rendered = render(this);
+        if(rendered instanceof HTMLElement){
+          $container.appendChild(rendered);
+        } else if(typeof(rendered) === 'string'){
+          $container.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));
+          $button.addEventListener('click', () => action(this));
         }
+        $container.appendChild($button);
       }
-      return button.outerHTML;
-    }).join('')}</td>`;
+    });
+    this.shadowRoot.getElementById(position).innerHTML = '';
+    this.shadowRoot.getElementById(position).appendChild($container);
   }
 
-  setData(records, fields = false, controls = { before: [], after: [] }){
+  setData(records, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
     this.records = records;
     this.fields = fields || Table.extractFieldsFromRecords(this.records);
     this.controls = controls;
+    this.renderControls(this.controls.top, 'top');
     this.renderFields();
     this.renderRecords();
-    this.renderControls();
+    this.renderControls(this.controls.bottom, 'bottom');
   }
 
   get shadowTemplate(){
     return /*html*/`
       ${super.shadowTemplate}
       <div class="responsive-table">
+        <div id="top"></div>
         <table>
           <thead id="fields"></thead>
           <tbody id="records"></tbody>
         </table>
+        <div id="bottom"></div>
       </div>
     `;
   }