kempo 2.9.0 → 2.9.2
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 +1 -1
- package/dist/components/tableControls/DeleteSelected.js +1 -0
- package/dist/components/tableControls/PageSelect.js +1 -0
- package/dist/components/tableControls/PageSize.js +1 -0
- package/dist/components/tableControls/SelectCount.js +1 -0
- package/dist/index.js +1 -1
- package/docs/components/table.html +20 -12
- package/docs/kempo/components/Table.js +1 -1
- package/docs/kempo/components/tableControls/DeleteSelected.js +1 -0
- package/docs/kempo/components/tableControls/PageSelect.js +1 -0
- package/docs/kempo/components/tableControls/PageSize.js +1 -0
- package/docs/kempo/components/tableControls/SelectCount.js +1 -0
- package/docs/kempo/index.js +1 -1
- package/package.json +1 -1
- package/scripts/build.js +43 -24
- package/src/components/Table.js +19 -12
- package/src/components/tableControls/DeleteSelected.js +1 -1
- package/src/components/tableControls/SelectCount.js +2 -1
- package/dist/components/Stack.js +0 -1
- package/docs/kempo/components/Stack.js +0 -1
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";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:
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import SelectCount from"./tableControls/SelectCount.js";import PageSelect from"./tableControls/PageSelect.js";import PageSize from"./tableControls/PageSize.js";import DeleteSelected from"./tableControls/DeleteSelected.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","no-btn"),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","no-btn"),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)},selectCount:{render:e=>new SelectCount(e)},deleteSelected:{render:e=>new DeleteSelected(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:i=1,enableSelection:o=!1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:i,enableSelection:o,selectedIndexes:[]})}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>":"",n=this.enableSelection?'<th class="selection"><input type="checkbox" id="select-all"></th>':"";if(this.shadowRoot.getElementById("fields").innerHTML=`${n}${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`,this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize,s=this.records.slice(t,n);let r=!1;s.forEach(((n,s)=>{const i=document.createElement("tr");if(this.enableSelection){const e=document.createElement("td");e.classList.add("selection");const n=document.createElement("input");n.type="checkbox",n.checked=this.selectedIndexes.includes(t+s),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+s):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+s)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}if(this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,n,t+s)),null===n){const e=document.createElement("td");e.colSpan=this.fields.length,e.innerHTML="<i>Loading...</i>",r=!0,i.appendChild(e)}else this.fields.forEach((({name:e,formatter:t,calculator:s},r)=>{const o=document.createElement("td");let d;s?d=s(n,this):(d=n[e]||"",Array.isArray(d)?d=t?d.map(t).join(", "):d.join(", "):t&&(d=t(d))),o.innerHTML=d,i.appendChild(o)}));this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,n,t+s)),e.appendChild(i)})),r&&dispatchEvent(this,"fetchRecords",{start:t,end:n})}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:i,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","no-btn"),e.appendChild(new Icon(r)),i&&onEvent(e,"click",(()=>i(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","no-btn"),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:i=!1,enableSelection:o=!1}={}){let d=!1,c=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),d=!0),s&&(this.pageSize=s,d=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,c=!0),i&&(this.currentPage=i,d=!0),void 0!==o&&(this.enableSelection=o,d=!0),d&&(this.renderFields(),this.renderRecords()),c&&(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.selectedIndexes=this.selectedIndexes.filter((t=>t!==e)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes}),this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}getSelectedRecords(){return this.selectedIndexes.map((e=>this.records[e]))}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)this.selectedIndexes.includes(n)||this.selectedIndexes.push(n);this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);this.selectedIndexes=this.selectedIndexes.filter((n=>n<e||n>=t)),this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)if(!this.selectedIndexes.includes(n))return!1;return!0}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 th.selection, td.selection {\n width: 50px;\n }\n th.selection input,\n td.selection input {\n margin: 0;\n width: 1.35rem;\n height: 1.35rem;\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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class DeleteSelected extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){this.updateButtonState();const e=this.shadowRoot.getElementById("deleteSelectedButton");return onEvent(e,"click",(()=>this.deleteSelected())),onEvent(this.table,"selectionChange",(()=>this.updateButtonState())),!0}return!1}deleteSelected(){const e=this.table.selectedIndexes;e.sort(((e,t)=>t-e)),e.forEach((e=>this.table.deleteRecord(e))),this.table.selectedIndexes=[],this.table.renderRecords(),this.updateButtonState()}updateButtonState(){this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.selectedIndexes.length}get shadowTemplate(){return'\n <button id="deleteSelectedButton" class="pq no-btn">\n <k-icon name="delete"></k-icon>\n </button>\n '}get shadowStyles(){return"\n :host {\n display: inline-flex;\n width: max-content;\n align-items: baseline;\n }\n button {\n display: flex;\n align-items: center;\n }\n "}}window.customElements.define("k-table-delete-selected",DeleteSelected);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n Selected: <span id="selectCount"></span>\n '}get shadowStyles(){return"\n :host {\n display: inline-flex;\n width: max-content;\n align-items: baseline;\n align-self: center;\n }\n label {\n white-space: nowrap;\n }\n "}}window.customElements.define("k-table-select-count",SelectCount);
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
|
|
1
|
+
import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import SelectCount from"./components/tableControlsSelectCount.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,DeleteSelected:DeleteSelected,PageSelect:PageSelect,PageSize:PageSize,SelectCount:SelectCount,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
|
|
@@ -255,28 +255,36 @@
|
|
|
255
255
|
});
|
|
256
256
|
</script>
|
|
257
257
|
|
|
258
|
-
<h3 id="
|
|
259
|
-
<p>The table component supports
|
|
260
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"
|
|
261
|
-
<k-table id="
|
|
258
|
+
<h3 id="fetchRecords"><a href="#fetchRecords" class="no-link">Fetch Records</a></h3>
|
|
259
|
+
<p>The table component supports fetching records dynamically. You can set up the fetch records feature by using the <code>setupFetchRecords</code> method.</p>
|
|
260
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fetchRecordsExample"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-table</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /><br /> <span class="hljs-keyword">const</span> $fetchRecordsExample = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br /> <span class="hljs-keyword">const</span> totalRecords = <span class="hljs-number">100</span>;<br /> $fetchRecordsExample.setData({<br /> <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span>,<br /> <span class="hljs-attr">records</span>: contacts.slice(<span class="hljs-number">0</span>, <span class="hljs-number">10</span>),<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">bottom</span>: [<br /> Table.controls.prevPage,<br /> Table.controls.nextPage,<br /> Table.controls.pageSelect,<br /> Table.controls.spacer,<br /> Table.controls.pageSize<br /> ]<br /> }<br /> });<br /> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mockFetchRecords</span>(<span class="hljs-params">start, count</span>) </span>{<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {<br /> setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {<br /> resolve(contacts.slice(start, start + count));<br /> }, <span class="hljs-number">1000</span>);<br /> });<br /> }<br /> $fetchRecordsExample.setupFetchRecords(totalRecords, mockFetchRecords);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
261
|
+
<k-table id="fetchRecordsExample"></k-table>
|
|
262
262
|
<script type="module">
|
|
263
263
|
import Table from '../kempo/components/Table.js';
|
|
264
264
|
|
|
265
|
-
const $
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
265
|
+
const $fetchRecordsExample = document.getElementById('fetchRecordsExample');
|
|
266
|
+
const totalRecords = 100;
|
|
267
|
+
$fetchRecordsExample.setData({
|
|
268
|
+
pageSize: 10,
|
|
269
|
+
records: contacts.slice(0, 10),
|
|
269
270
|
controls: {
|
|
270
271
|
bottom: [
|
|
271
272
|
Table.controls.prevPage,
|
|
272
273
|
Table.controls.nextPage,
|
|
274
|
+
Table.controls.pageSelect,
|
|
273
275
|
Table.controls.spacer,
|
|
274
|
-
Table.controls.
|
|
275
|
-
Table.controls.deleteSelected
|
|
276
|
+
Table.controls.pageSize
|
|
276
277
|
]
|
|
277
|
-
}
|
|
278
|
-
pageSize: 10
|
|
278
|
+
}
|
|
279
279
|
});
|
|
280
|
+
function mockFetchRecords(start, count) {
|
|
281
|
+
return new Promise((resolve) => {
|
|
282
|
+
setTimeout(() => {
|
|
283
|
+
resolve(contacts.slice(start, start + count));
|
|
284
|
+
}, 1000);
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
$fetchRecordsExample.setupFetchRecords(totalRecords, mockFetchRecords);
|
|
280
288
|
</script>
|
|
281
289
|
|
|
282
290
|
<h2>JavaScript Reference</h2>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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:
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import SelectCount from"./tableControls/SelectCount.js";import PageSelect from"./tableControls/PageSelect.js";import PageSize from"./tableControls/PageSize.js";import DeleteSelected from"./tableControls/DeleteSelected.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","no-btn"),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","no-btn"),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)},selectCount:{render:e=>new SelectCount(e)},deleteSelected:{render:e=>new DeleteSelected(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:i=1,enableSelection:o=!1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:i,enableSelection:o,selectedIndexes:[]})}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>":"",n=this.enableSelection?'<th class="selection"><input type="checkbox" id="select-all"></th>':"";if(this.shadowRoot.getElementById("fields").innerHTML=`${n}${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`,this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize,s=this.records.slice(t,n);let r=!1;s.forEach(((n,s)=>{const i=document.createElement("tr");if(this.enableSelection){const e=document.createElement("td");e.classList.add("selection");const n=document.createElement("input");n.type="checkbox",n.checked=this.selectedIndexes.includes(t+s),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+s):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+s)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}if(this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,n,t+s)),null===n){const e=document.createElement("td");e.colSpan=this.fields.length,e.innerHTML="<i>Loading...</i>",r=!0,i.appendChild(e)}else this.fields.forEach((({name:e,formatter:t,calculator:s},r)=>{const o=document.createElement("td");let d;s?d=s(n,this):(d=n[e]||"",Array.isArray(d)?d=t?d.map(t).join(", "):d.join(", "):t&&(d=t(d))),o.innerHTML=d,i.appendChild(o)}));this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,n,t+s)),e.appendChild(i)})),r&&dispatchEvent(this,"fetchRecords",{start:t,end:n})}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:i,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","no-btn"),e.appendChild(new Icon(r)),i&&onEvent(e,"click",(()=>i(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","no-btn"),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:i=!1,enableSelection:o=!1}={}){let d=!1,c=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),d=!0),s&&(this.pageSize=s,d=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,c=!0),i&&(this.currentPage=i,d=!0),void 0!==o&&(this.enableSelection=o,d=!0),d&&(this.renderFields(),this.renderRecords()),c&&(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.selectedIndexes=this.selectedIndexes.filter((t=>t!==e)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes}),this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}getSelectedRecords(){return this.selectedIndexes.map((e=>this.records[e]))}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)this.selectedIndexes.includes(n)||this.selectedIndexes.push(n);this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);this.selectedIndexes=this.selectedIndexes.filter((n=>n<e||n>=t)),this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)if(!this.selectedIndexes.includes(n))return!1;return!0}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 th.selection, td.selection {\n width: 50px;\n }\n th.selection input,\n td.selection input {\n margin: 0;\n width: 1.35rem;\n height: 1.35rem;\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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class DeleteSelected extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){this.updateButtonState();const e=this.shadowRoot.getElementById("deleteSelectedButton");return onEvent(e,"click",(()=>this.deleteSelected())),onEvent(this.table,"selectionChange",(()=>this.updateButtonState())),!0}return!1}deleteSelected(){const e=this.table.selectedIndexes;e.sort(((e,t)=>t-e)),e.forEach((e=>this.table.deleteRecord(e))),this.table.selectedIndexes=[],this.table.renderRecords(),this.updateButtonState()}updateButtonState(){this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.selectedIndexes.length}get shadowTemplate(){return'\n <button id="deleteSelectedButton" class="pq no-btn">\n <k-icon name="delete"></k-icon>\n </button>\n '}get shadowStyles(){return"\n :host {\n display: inline-flex;\n width: max-content;\n align-items: baseline;\n }\n button {\n display: flex;\n align-items: center;\n }\n "}}window.customElements.define("k-table-delete-selected",DeleteSelected);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n Selected: <span id="selectCount"></span>\n '}get shadowStyles(){return"\n :host {\n display: inline-flex;\n width: max-content;\n align-items: baseline;\n align-self: center;\n }\n label {\n white-space: nowrap;\n }\n "}}window.customElements.define("k-table-select-count",SelectCount);
|
package/docs/kempo/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
|
|
1
|
+
import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import SelectCount from"./components/tableControlsSelectCount.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,DeleteSelected:DeleteSelected,PageSelect:PageSelect,PageSize:PageSize,SelectCount:SelectCount,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
|
package/package.json
CHANGED
package/scripts/build.js
CHANGED
|
@@ -8,14 +8,31 @@ const __filename = fileURLToPath(import.meta.url);
|
|
|
8
8
|
const __dirname = path.dirname(__filename);
|
|
9
9
|
|
|
10
10
|
console.log('Loading utils');
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
const components = [];
|
|
13
|
+
async function buildComponents(dir) {
|
|
14
|
+
const files = await fs.readdir(dir);
|
|
15
|
+
for (const file of files) {
|
|
16
|
+
const fullPath = path.join(dir, file);
|
|
17
|
+
const stat = await fs.lstat(fullPath);
|
|
18
|
+
if (stat.isDirectory()) {
|
|
19
|
+
await buildComponents(fullPath);
|
|
20
|
+
} else if (file.endsWith('.js')) {
|
|
21
|
+
components.push(fullPath);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const componentsDir = path.join(__dirname, '..', 'src', 'components');
|
|
27
|
+
await buildComponents(componentsDir);
|
|
28
|
+
|
|
12
29
|
let complete = 0;
|
|
13
30
|
|
|
14
31
|
console.log('Loading Component Source Code');
|
|
15
32
|
process.stdout.write(`0/${components.length} = 0%`);
|
|
16
33
|
const componentCode = {};
|
|
17
|
-
await Promise.all(components.map(
|
|
18
|
-
componentCode[component] = await fs.readFile(
|
|
34
|
+
await Promise.all(components.map(async component => {
|
|
35
|
+
componentCode[component] = await fs.readFile(component, 'utf-8');
|
|
19
36
|
process.stdout.write("\r");
|
|
20
37
|
complete++;
|
|
21
38
|
process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
|
|
@@ -25,9 +42,9 @@ process.stdout.write("\n");
|
|
|
25
42
|
complete = 0;
|
|
26
43
|
console.log('Minifying Component Source Code');
|
|
27
44
|
process.stdout.write(`0/${components.length} = 0%`);
|
|
28
|
-
const
|
|
29
|
-
await Promise.all(components.map(
|
|
30
|
-
|
|
45
|
+
const minifiedComponents = {};
|
|
46
|
+
await Promise.all(components.map(async componentFile => {
|
|
47
|
+
minifiedComponents[componentFile] = (await minify(componentCode[componentFile])).code;
|
|
31
48
|
process.stdout.write("\r");
|
|
32
49
|
complete++;
|
|
33
50
|
process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
|
|
@@ -37,9 +54,11 @@ process.stdout.write("\n");
|
|
|
37
54
|
complete = 0;
|
|
38
55
|
console.log('Saving Minified Components to dist/');
|
|
39
56
|
process.stdout.write(`0/${components.length} = 0%`);
|
|
40
|
-
await
|
|
41
|
-
|
|
42
|
-
|
|
57
|
+
await Promise.all(components.map(async component => {
|
|
58
|
+
const relativePath = path.relative(componentsDir, component);
|
|
59
|
+
const destPath = path.join('./dist/components', relativePath);
|
|
60
|
+
await fse.ensureDir(path.dirname(destPath));
|
|
61
|
+
await fs.writeFile(destPath, minifiedComponents[component], 'utf-8');
|
|
43
62
|
process.stdout.write("\r");
|
|
44
63
|
complete++;
|
|
45
64
|
process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
|
|
@@ -47,17 +66,17 @@ await Promise.all(components.map( async component => {
|
|
|
47
66
|
process.stdout.write("\n");
|
|
48
67
|
|
|
49
68
|
console.log('Loading Utils');
|
|
50
|
-
const utils = (await fs.readdir('./src/utils/')).map(f=>f.substring(0,f.length-3));
|
|
69
|
+
const utils = (await fs.readdir('./src/utils/')).map(f => f.substring(0, f.length - 3));
|
|
51
70
|
complete = 0;
|
|
52
71
|
|
|
53
72
|
console.log('Loading Utils Source Code');
|
|
54
73
|
process.stdout.write(`0/${utils.length} = 0%`);
|
|
55
74
|
const utilCode = {};
|
|
56
|
-
await Promise.all(utils.map(
|
|
75
|
+
await Promise.all(utils.map(async util => {
|
|
57
76
|
utilCode[util] = await fs.readFile(`./src/utils/${util}.js`, 'utf-8');
|
|
58
77
|
process.stdout.write("\r");
|
|
59
78
|
complete++;
|
|
60
|
-
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
|
|
79
|
+
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
|
|
61
80
|
}));
|
|
62
81
|
process.stdout.write("\n");
|
|
63
82
|
|
|
@@ -65,11 +84,11 @@ complete = 0;
|
|
|
65
84
|
console.log('Minifying Utils Source Code');
|
|
66
85
|
process.stdout.write(`0/${utils.length} = 0%`);
|
|
67
86
|
const minifiedUtils = {};
|
|
68
|
-
await Promise.all(utils.map(
|
|
69
|
-
minifiedUtils[utilFile] = (await minify(utilCode[utilFile])).code
|
|
87
|
+
await Promise.all(utils.map(async utilFile => {
|
|
88
|
+
minifiedUtils[utilFile] = (await minify(utilCode[utilFile])).code;
|
|
70
89
|
process.stdout.write("\r");
|
|
71
90
|
complete++;
|
|
72
|
-
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
|
|
91
|
+
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
|
|
73
92
|
}));
|
|
74
93
|
process.stdout.write("\n");
|
|
75
94
|
|
|
@@ -77,21 +96,21 @@ complete = 0;
|
|
|
77
96
|
console.log('Saving Minified Utils to dist/');
|
|
78
97
|
process.stdout.write(`0/${utils.length} = 0%`);
|
|
79
98
|
await fse.ensureDir('./dist/utils');
|
|
80
|
-
await Promise.all(utils.map(
|
|
99
|
+
await Promise.all(utils.map(async util => {
|
|
81
100
|
await fs.writeFile(`./dist/utils/${util}.js`, minifiedUtils[util], 'utf-8');
|
|
82
101
|
process.stdout.write("\r");
|
|
83
102
|
complete++;
|
|
84
|
-
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
|
|
103
|
+
process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
|
|
85
104
|
}));
|
|
86
105
|
process.stdout.write("\n");
|
|
87
106
|
|
|
88
|
-
console.log('
|
|
107
|
+
console.log('Generating export file');
|
|
89
108
|
const main = `
|
|
90
|
-
${components.map(
|
|
91
|
-
${utils.map(
|
|
109
|
+
${components.map(component => `import ${path.basename(component, '.js')} from './components/${path.relative(componentsDir, component)}';`).join('')}
|
|
110
|
+
${utils.map(util => `import ${util} from './utils/${util}.js';`).join('')}
|
|
92
111
|
export default {
|
|
93
|
-
${components.map(
|
|
94
|
-
${utils.map(
|
|
112
|
+
${components.map(component => `${path.basename(component, '.js')}`).join(',')},
|
|
113
|
+
${utils.map(util => `${util}`).join(',')}
|
|
95
114
|
};
|
|
96
115
|
`;
|
|
97
116
|
const minifiedMain = (await minify(main)).code;
|
|
@@ -108,9 +127,9 @@ await fs.writeFile('./dist/kempo-vars.css', minifiedKempoVarsCSS, 'utf-8');
|
|
|
108
127
|
console.log('Loading kempo-styles.css');
|
|
109
128
|
const kempoStylesCSS = await fs.readFile('./src/kempo-styles.css', 'utf-8');
|
|
110
129
|
console.log('Minifying kempo-styles.css');
|
|
111
|
-
const
|
|
130
|
+
const minifiedKempoStylesCSS = kempoStylesCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
|
|
112
131
|
console.log('Saving kempo-styles.css');
|
|
113
|
-
await fs.writeFile('./dist/kempo-styles.css',
|
|
132
|
+
await fs.writeFile('./dist/kempo-styles.css', minifiedKempoStylesCSS, 'utf-8');
|
|
114
133
|
|
|
115
134
|
console.log('Loading kempo-hljs.css');
|
|
116
135
|
const kempoHljsCSS = await fs.readFile('./src/kempo-hljs.css', 'utf-8');
|
package/src/components/Table.js
CHANGED
|
@@ -12,7 +12,7 @@ export default class Table extends Component {
|
|
|
12
12
|
prevPage: {
|
|
13
13
|
render: (table) => {
|
|
14
14
|
const $button = document.createElement('button');
|
|
15
|
-
$button.classList.add('pq');
|
|
15
|
+
$button.classList.add('pq', 'no-btn');
|
|
16
16
|
$button.appendChild(new Icon('chevron-left'));
|
|
17
17
|
onEvent($button, 'click', () => table.prevPage());
|
|
18
18
|
|
|
@@ -27,7 +27,7 @@ export default class Table extends Component {
|
|
|
27
27
|
nextPage: {
|
|
28
28
|
render: (table) => {
|
|
29
29
|
const $button = document.createElement('button');
|
|
30
|
-
$button.classList.add('pq');
|
|
30
|
+
$button.classList.add('pq', 'no-btn');
|
|
31
31
|
$button.appendChild(new Icon('chevron-right'));
|
|
32
32
|
onEvent($button, 'click', () => table.nextPage());
|
|
33
33
|
|
|
@@ -127,6 +127,7 @@ export default class Table extends Component {
|
|
|
127
127
|
const start = (this.currentPage - 1) * this.pageSize;
|
|
128
128
|
const end = start + this.pageSize;
|
|
129
129
|
const paginatedRecords = this.records.slice(start, end);
|
|
130
|
+
let fetchRecords = false;
|
|
130
131
|
paginatedRecords.forEach((record, index) => {
|
|
131
132
|
const $tr = document.createElement('tr');
|
|
132
133
|
if (this.enableSelection) {
|
|
@@ -149,12 +150,15 @@ export default class Table extends Component {
|
|
|
149
150
|
if(this.controls?.before?.length){
|
|
150
151
|
$tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
|
|
151
152
|
}
|
|
152
|
-
|
|
153
|
+
if(record === null){
|
|
153
154
|
const $td = document.createElement('td');
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
$td.colSpan = this.fields.length;
|
|
156
|
+
$td.innerHTML = '<i>Loading...</i>';
|
|
157
|
+
fetchRecords = true;
|
|
158
|
+
$tr.appendChild($td);
|
|
159
|
+
} else {
|
|
160
|
+
this.fields.forEach(({name, formatter, calculator}, index) => {
|
|
161
|
+
const $td = document.createElement('td');
|
|
158
162
|
let value;
|
|
159
163
|
if(calculator){
|
|
160
164
|
value = calculator(record, this);
|
|
@@ -173,14 +177,17 @@ export default class Table extends Component {
|
|
|
173
177
|
}
|
|
174
178
|
}
|
|
175
179
|
$td.innerHTML = value;
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
180
|
+
$tr.appendChild($td);
|
|
181
|
+
});
|
|
182
|
+
}
|
|
179
183
|
if(this.controls?.after?.length){
|
|
180
184
|
$tr.appendChild(this.renderRowControls(this.controls.after, record, start + index));
|
|
181
185
|
}
|
|
182
186
|
$records.appendChild($tr);
|
|
183
187
|
});
|
|
188
|
+
if(fetchRecords){
|
|
189
|
+
dispatchEvent(this, 'fetchRecords', { start, end });
|
|
190
|
+
}
|
|
184
191
|
}
|
|
185
192
|
|
|
186
193
|
renderRowControls(controls = [], record, index) {
|
|
@@ -198,7 +205,7 @@ export default class Table extends Component {
|
|
|
198
205
|
}
|
|
199
206
|
} else if(icon){
|
|
200
207
|
const $button = document.createElement('button');
|
|
201
|
-
$button.classList.add('pq');
|
|
208
|
+
$button.classList.add('pq', 'no-btn');
|
|
202
209
|
$button.appendChild(new Icon(icon));
|
|
203
210
|
if (action) {
|
|
204
211
|
onEvent($button, 'click', () => action(this, record, index));
|
|
@@ -225,7 +232,7 @@ export default class Table extends Component {
|
|
|
225
232
|
}
|
|
226
233
|
} else if(icon){
|
|
227
234
|
const $button = document.createElement('button');
|
|
228
|
-
$button.classList.add('pq');
|
|
235
|
+
$button.classList.add('pq', 'no-btn');
|
|
229
236
|
$button.appendChild(new Icon(icon));
|
|
230
237
|
if (action) {
|
|
231
238
|
onEvent($button, 'click', () => action(this));
|
|
@@ -35,7 +35,7 @@ export default class DeleteSelected extends Component {
|
|
|
35
35
|
|
|
36
36
|
get shadowTemplate() {
|
|
37
37
|
return /*html*/`
|
|
38
|
-
<button id="deleteSelectedButton" class="pq">
|
|
38
|
+
<button id="deleteSelectedButton" class="pq no-btn">
|
|
39
39
|
<k-icon name="delete"></k-icon>
|
|
40
40
|
</button>
|
|
41
41
|
`;
|
|
@@ -26,7 +26,7 @@ export default class SelectCount extends Component {
|
|
|
26
26
|
|
|
27
27
|
get shadowTemplate() {
|
|
28
28
|
return /*html*/`
|
|
29
|
-
|
|
29
|
+
Selected: <span id="selectCount"></span>
|
|
30
30
|
`;
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -36,6 +36,7 @@ export default class SelectCount extends Component {
|
|
|
36
36
|
display: inline-flex;
|
|
37
37
|
width: max-content;
|
|
38
38
|
align-items: baseline;
|
|
39
|
+
align-self: center;
|
|
39
40
|
}
|
|
40
41
|
label {
|
|
41
42
|
white-space: nowrap;
|
package/dist/components/Stack.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import Component from"./components/Component.js";export default class Stack extends Component{constructor(){super()}}window.customElements.define("k-stack",Stack);export class StackPanel extends Component{get shadowStyles(){return"\n :host {\n display: block;\n }\n "}}window.customElements.define("k-stack-panel",StackPanel);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import Component from"./components/Component.js";export default class Stack extends Component{constructor(){super()}}window.customElements.define("k-stack",Stack);export class StackPanel extends Component{get shadowStyles(){return"\n :host {\n display: block;\n }\n "}}window.customElements.define("k-stack-panel",StackPanel);
|