kempo 2.7.3 → 2.8.0

package/docs/icons/file-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-200h560v-367L567-760H200v560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h400l240 240v400q0 33-23.5 56.5T760-120H200Zm80-160h400v-80H280v80Zm0-160h400v-80H280v80Zm0-160h280v-80H280v80Zm-80 400v-560 560Z"/></svg>

package/docs/icons/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>

package/docs/icons/folder-clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-280q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm-46-248q11-5 22-8.5t24-3.5q42 0 71 29t29 71q0 13-3.5 24t-8.5 22L434-528Zm46 188q-42 0-71-29t-29-71q0-13 3.5-24t8.5-22l134 134q-11 5-22 8.5t-24 3.5ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/docs/icons/folder-create.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M560-320h80v-80h80v-80h-80v-80h-80v80h-80v80h80v80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/docs/icons/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/></svg>

package/docs/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/docs/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>

package/docs/icons/label-add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160v-80h120l180-240-180-240H160v200H80v-200q0-33 23.5-56.5T160-800h440q19 0 36 8.5t28 23.5l216 288-216 288q-11 15-28 23.5t-36 8.5H480Zm-10-320ZM200-120v-120H80v-80h120v-120h80v120h120v80H280v120h-80Z"/></svg>

package/docs/icons/label.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h440q19 0 36 8.5t28 23.5l216 288-216 288q-11 15-28 23.5t-36 8.5H160Zm0-80h440l180-240-180-240H160v480Zm220-240Z"/></svg>

package/docs/icons/mode-auto.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>

package/docs/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>

package/docs/icons/tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m240-160 40-160H120l20-80h160l40-160H180l20-80h160l40-160h80l-40 160h160l40-160h80l-40 160h160l-20 80H660l-40 160h160l-20 80H600l-40 160h-80l40-160H360l-40 160h-80Zm140-240h160l40-160H420l-40 160Z"/></svg>

package/docs/icons/tools.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M756-120 537-339l84-84 219 219-84 84Zm-552 0-84-84 276-276-68-68-28 28-51-51v82l-28 28-121-121 28-28h82l-50-50 142-142q20-20 43-29t47-9q24 0 47 9t43 29l-92 92 50 50-28 28 68 68 90-90q-4-11-6.5-23t-2.5-24q0-59 40.5-99.5T701-841q15 0 28.5 3t27.5 9l-99 99 72 72 99-99q7 14 9.5 27.5T841-701q0 59-40.5 99.5T701-561q-12 0-24-2t-23-7L204-120Z"/></svg>

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,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);
+import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:a=1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:a})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;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(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const a=document.createElement("tr");this.controls?.before?.length&&a.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const i=document.createElement("td");if(null===s)i.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),i.innerHTML=t}a.appendChild(i)})),this.controls?.after?.length&&a.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(a)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:a,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(r)),a&&onEvent(e,"click",(()=>a(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:a=!1}={}){let o=!1,i=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),o=!0),s&&(this.pageSize=s,o=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,i=!0),a&&(this.currentPage=a,o=!0),o&&(this.renderFields(),this.renderRecords()),i&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\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        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);

package/docs/kempo/components/ThemeSwitcher.js

@@ -1 +1 @@
-import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="autoMode"\n          name="mode-auto"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="lightMode"\n          name="mode-light"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="mode-dark"\n          class="mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      .mode {\n        display: none;\n      }\n      :host([current-theme="auto"]) #autoMode,\n      :host([current-theme="light"]) #lightMode,\n      :host([current-theme="dark"]) #darkMode {\n        display: block;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
+import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";import"./Icon.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")},this.registerAttribute("currentTheme",ThemeSwitcher.getCurrentTheme())}async render(e){return!!await super.render(e)&&(onEvent(window,"storage",this[storageWatcher]),onEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("toggle"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button\n        id="toggle"\n        class="no-btn"\n      >\n        <k-icon\n          id="autoMode"\n          name="mode-auto"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="lightMode"\n          name="mode-light"\n          class="mode"\n        ></k-icon>\n        <k-icon\n          id="darkMode"\n          name="mode-dark"\n          class="mode"\n        ></k-icon>\n      </button>\n    '}get shadowStyles(){return'\n      :host {\n        --padding: var(--spacer);\n\n        display: flex;\n      }\n      #toggle {\n        padding: var(--padding);\n      }\n      .mode {\n        display: none;\n      }\n      :host([current-theme="auto"]) #autoMode,\n      :host([current-theme="light"]) #lightMode,\n      :host([current-theme="dark"]) #darkMode {\n        display: block;\n      }\n    '}static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),dispatchEvent(window,"storage",{theme:e})}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);

package/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>

package/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>

package/package.json

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

package/scripts/build.js

@@ -1,6 +1,11 @@
 import fs from 'fs/promises';
 import fse from 'fs-extra';
 import { minify } from 'terser';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 console.log('Loading utils');
 const components = (await fs.readdir('./src/components/')).map(f=>f.substring(0,f.length-3));
@@ -118,4 +123,13 @@ console.log('Copying dist/ to docs/');
 await fse.ensureDir('./docs/'); // will also ensure docs/kempo
 await fse.copy('./dist', './docs/kempo')
 
+const iconsSrcDir = path.join(__dirname, '../icons');
+const iconsDestDir = path.join(__dirname, '../docs/icons');
+
+console.log('Deleting svg icons currently in docs/icons');
+await fse.ensureDir(iconsDestDir);
+await fse.emptyDir(iconsDestDir);
+console.log('Copying all files from icons to docs/icons');
+await fse.copy(iconsSrcDir, iconsDestDir);
+
 console.log('Build Complete');

package/src/components/Table.js

@@ -1,68 +1,147 @@
 import Component from './Component.js';
-import Icon from './Icon.js'; // Import Icon component
+import Icon from './Icon.js';
 import { toTitleCase } from '../utils/string.js';
+import { onEvent, dispatchEvent } from '../utils/element.js';
 
 export default class Table extends Component {
-  constructor(data = false, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
+  static controls = {
+    prevPage: {
+      render: (table) => {
+        const $button = document.createElement('button');
+        $button.classList.add('pq');
+        $button.appendChild(new Icon('chevron-left'));
+        onEvent($button, 'click', () => table.prevPage());
+
+        // Disable button if on the first page
+        onEvent(table, 'pageChange', () => {
+          $button.disabled = table.getCurrentPage() === 1;
+        });
+
+        return $button;
+      }
+    },
+    nextPage: {
+      render: (table) => {
+        const $button = document.createElement('button');
+        $button.classList.add('pq');
+        $button.appendChild(new Icon('chevron-right'));
+        onEvent($button, 'click', () => table.nextPage());
+
+        // Disable button if on the last page
+        onEvent(table, 'pageChange', () => {
+          $button.disabled = table.getCurrentPage() === table.getTotalPages();
+        });
+
+        return $button;
+      }
+    },
+    pageSelect: {
+      render: (table) => new PageSelect(table)
+    },
+    pageSize: {
+      render: (table) => new PageSize(table)
+    },
+    spacer: {
+      html: '<div class="flex"></div>'
+    }
+  };
+
+  constructor({
+    records = [],
+    fields = [],
+    controls = { before: [], after: [], top: [], bottom: [] },
+    pageSize = 100,
+    pageSizeOptions = [10, 25, 50, 100, 500],
+    currentPage = 1,
+  } = {}) {
     super();
 
     this.registerProps({
-      fields: [],
-      records: [],
-      controls: { before: [], after: [], top: [], bottom: [] }
+      fields: fields,
+      records: records,
+      controls: controls,
+      pageSize,
+      pageSizeOptions,
+      currentPage,
     });
 
     /* Init */
-    if(data){
-      this.setData(data, fields, controls);
-    }
+    // 
   }
   async render(force){
     if(await super.render(force)){
-      this.renderControls(this.controls.top, 'top');
-      this.renderFields();
-      this.renderRecords();
-      this.renderControls(this.controls.bottom, 'bottom');
+      this.setData({
+        records: this.records,
+        fields: this.fields,
+        controls: this.controls,
+        pageSize: this.pageSize,
+        pageSizeOptions: this.pageSizeOptions,
+        currentPage: this.currentPage
+      });
       return true;
     }
     return false;
   }
   renderFields(){
+    if(!this.rendered) return;
     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(){
+    if(!this.rendered) return;
     const $records = this.shadowRoot.getElementById('records');
     $records.innerHTML = '';
-    this.records.forEach((record) => {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    const paginatedRecords = this.records.slice(start, end);
+    paginatedRecords.forEach((record, index) => {
       const $tr = document.createElement('tr');
       if(this.controls?.before?.length){
-        $tr.appendChild(this.renderRowControls(this.controls.before, record));
+        $tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
       }
-      this.fields.forEach(({name}) => {
+      this.fields.forEach(({name, formatter, calculator}) => {
         const $td = document.createElement('td');
-        let value = record[name] || '';
-        if (Array.isArray(value)) {
-          value = value.join(', ');
+        if (record === null) {
+          $td.innerHTML = 'Loading...';
+            dispatchEvent(this, 'fetchRecords', { start, end });
+        } else {
+          let value;
+          if(calculator){
+            value = calculator(record, this);
+          } else {
+            value = record[name] || '';
+            if (Array.isArray(value)) {
+              if(formatter){
+                value = value.map(formatter).join(', ');
+              } else {
+                value = value.join(', ');
+              }
+            } else {
+              if(formatter){
+                value = formatter(value);
+              }
+            }
+          }
+          $td.innerHTML = value;
         }
-        $td.innerHTML = value;
         $tr.appendChild($td);
       });
       if(this.controls?.after?.length){
-        $tr.appendChild(this.renderRowControls(this.controls.after, record));
+        $tr.appendChild(this.renderRowControls(this.controls.after, record, start + index));
       }
       $records.appendChild($tr);
     });
   }
   
-  renderRowControls(controls = [], record) {
+  renderRowControls(controls = [], record, index) {
+    if(!this.rendered) return;
     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);
+        const rendered = render(this, record, index);
         if(rendered instanceof HTMLElement){
           $td.appendChild(rendered);
         } else if(typeof(rendered) === 'string'){
@@ -70,9 +149,10 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
+        $button.classList.add('pq');
         $button.appendChild(new Icon(icon));
         if (action) {
-          $button.addEventListener('click', () => action(this, record));
+          onEvent($button, 'click', () => action(this, record, index));
         }
         $td.appendChild($button);
       }
@@ -81,7 +161,9 @@ export default class Table extends Component {
   }
 
   renderControls(controls = [], position) {
-    const $container = document.createElement('div');
+    if(!this.rendered) return;
+    const $container = this.shadowRoot.getElementById(position);
+    $container.innerHTML = '';
     controls.forEach(({ html, icon, action, render }) => {
       if(html){
         $container.appendChild(document.createRange().createContextualFragment(html));
@@ -94,25 +176,135 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
+        $button.classList.add('pq');
         $button.appendChild(new Icon(icon));
         if (action) {
-          $button.addEventListener('click', () => action(this));
+          onEvent($button, 'click', () => action(this));
         }
         $container.appendChild($button);
       }
     });
-    this.shadowRoot.getElementById(position).innerHTML = '';
-    this.shadowRoot.getElementById(position).appendChild($container);
   }
 
-  setData(records, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
+  getCurrentPage() {
+    return this.currentPage;
+  }
+
+  getTotalPages() {
+    return Math.ceil(this.records.length / this.pageSize);
+  }
+
+  setPage(page) {
+    if (page < 1 || page > this.getTotalPages()) return;
+    this.currentPage = page;
+    this.renderRecords();
+    // Trigger page change event
+    dispatchEvent(this, 'pageChange');
+  }
+
+  nextPage() {
+    if (this.currentPage < this.getTotalPages()) {
+      this.setPage(this.currentPage + 1);
+    }
+  }
+
+  prevPage() {
+    if (this.currentPage > 1) {
+      this.setPage(this.currentPage - 1);
+    }
+  }
+
+  setPageSize(pageSize) {
+    this.pageSize = pageSize;
+    this.currentPage = 1;
+    this.renderRecords();
+    // Trigger page size change event
+    dispatchEvent(this, 'pageSizeChange');
+  }
+
+  setData({
+    records = false,
+    fields = false,
+    controls = false,
+    pageSize = false,
+    pageSizeOptions = false,
+    currentPage = false
+  } = {}) {
+    let rerender = false;
+    let rerenderControls = false;
+    if(records){
+      this.records = records;
+      this.fields = fields || Table.extractFieldsFromRecords(this.records);
+      rerender = true;
+    }
+    if (pageSize) {
+      this.pageSize = pageSize;
+      rerender = true;
+    }
+    if (pageSizeOptions) {
+      this.pageSizeOptions = pageSizeOptions;
+    }
+    if (controls) {
+      this.controls = controls;
+      rerenderControls = true;
+    }
+    if(currentPage){
+      this.currentPage = currentPage;
+      rerender = true;
+    }
+    if(rerender){
+      this.renderFields();
+      this.renderRecords();
+    }
+    if(rerenderControls){
+      this.renderControls(this.controls.top, 'top');
+      this.renderControls(this.controls.bottom, 'bottom');
+    }
+  }
+
+  setRecords(records) {
     this.records = records;
-    this.fields = fields || Table.extractFieldsFromRecords(this.records);
-    this.controls = controls;
-    this.renderControls(this.controls.top, 'top');
-    this.renderFields();
+    this.currentPage = 1;
     this.renderRecords();
-    this.renderControls(this.controls.bottom, 'bottom');
+    dispatchEvent(this, 'recordsSet', { records });
+  }
+
+  setupFetchRecords(totalRecords, callback) {
+    const previousLength = this.records.length;
+    if (previousLength < totalRecords) {
+      this.records.length = totalRecords;
+      this.records.fill(null, previousLength);
+    }
+
+    onEvent(this, 'fetchRecords', async (event) => {
+      const { start, end } = event.detail;
+      const records = await callback(start, end - start);
+      this.records.splice(start, records.length, ...records);
+      this.renderRecords();
+    });
+  }
+
+  addRecord(record) {
+    this.records.push(record);
+    this.renderRecords();
+    dispatchEvent(this, 'recordAdded', { record });
+  }
+
+  updateRecord(index, newRecord) {
+    this.records[index] = newRecord;
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    if (index >= start && index < end) {
+      this.renderRecords();
+    }
+  }
+
+  deleteRecord(index) {
+    if (index >= 0 && index < this.records.length) {
+      this.records.splice(index, 1);
+      this.renderRecords();
+      dispatchEvent(this, 'recordDeleted', { index });
+    }
   }
 
   get shadowTemplate(){
@@ -120,7 +312,7 @@ export default class Table extends Component {
       ${super.shadowTemplate}
       <div class="responsive-table">
         <div id="top"></div>
-        <table>
+        <table class="b0">
           <thead id="fields"></thead>
           <tbody id="records"></tbody>
         </table>
@@ -134,6 +326,35 @@ export default class Table extends Component {
       :host {
         display: block;
         margin-bottom: var(--spacer);
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+      }
+      #top, #bottom {
+        display: flex;
+      }
+      th {
+        border-top: none;
+      }
+      tr:last-child td:first-child {
+        border-bottom-left-radius: 0;
+      }
+      tr:last-child td:last-child {
+        border-bottom-right-radius: 0;
+      }
+      tr:last-child td {
+        border-bottom: none;
+      }
+      th:first-child, td:first-child {
+        border-left: none;
+      }
+      th:last-child, td:last-child {
+        border-right: none;
+      }
+      #top:not(:empty) {
+        border-bottom: 1px solid var(--c_border);
+      }
+      #bottom:not(:empty) {
+        border-top: 1px solid var(--c_border);
       }
     `;
   }
@@ -147,3 +368,131 @@ export default class Table extends Component {
   }
 }
 window.customElements.define('k-table', Table);
+
+class PageSelect extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  async render() {
+    if(await super.render()){
+      this.updateOptions();
+      return true;
+    }
+    return false;
+  }
+
+  updateOptions() {
+    const $select = this.shadowRoot.getElementById('pageSelect');
+    $select.innerHTML = '';
+    for (let i = 1; i <= this.table.getTotalPages(); i++) {
+      const $option = document.createElement('option');
+      $option.value = i;
+      $option.textContent = i;
+      $select.appendChild($option);
+    }
+    $select.value = this.table.getCurrentPage();
+    const $totalPages = this.shadowRoot.getElementById('totalPages');
+    $totalPages.textContent = this.table.getTotalPages();
+
+    onEvent($select, 'change', () => {
+      this.table.setPage(parseInt($select.value));
+    });
+
+    onEvent(this.table, 'pageSizeChange', () => {
+      this.updateOptions();
+    });
+
+    onEvent(this.table, 'pageChange', () => {
+      $select.value = this.table.getCurrentPage();
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <select id="pageSelect" class="mxq"></select>
+      <label> out of <span id="totalPages"></span></label>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      #pageSelect, label {
+        display: inline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-select', PageSelect);
+
+class PageSize extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  async render() {
+    if(await super.render()){
+      const $select = this.shadowRoot.getElementById('pageSizeSelect');
+      const options = this.table.pageSizeOptions;
+      options.forEach(size => {
+        const $option = document.createElement('option');
+        $option.value = size;
+        $option.textContent = size;
+        $select.appendChild($option);
+      });
+      $select.value = this.table.pageSize;
+
+      onEvent($select, 'change', () => {
+        this.table.setPageSize(parseInt($select.value));
+      });
+
+      onEvent(this.table, 'pageSizeChange', () => {
+        $select.value = this.table.pageSize;
+      });
+
+      return true;
+    }
+    return false;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <label for="pageSizeSelect">Page Size: </label>
+      <select id="pageSizeSelect" class="mxq"></select>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-size', PageSize);