kempo 2.9.0 → 2.9.1
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/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 +4 -4
- 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;this.records.slice(t,n).forEach(((s,r)=>{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+r),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+r):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+r)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const d=document.createElement("td");if(null===s)d.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))),d.innerHTML=t}i.appendChild(d)})),this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(i)}))}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};
|
|
@@ -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;this.records.slice(t,n).forEach(((s,r)=>{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+r),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+r):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+r)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const d=document.createElement("td");if(null===s)d.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))),d.innerHTML=t}i.appendChild(d)})),this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(i)}))}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
|
|
|
@@ -198,7 +198,7 @@ export default class Table extends Component {
|
|
|
198
198
|
}
|
|
199
199
|
} else if(icon){
|
|
200
200
|
const $button = document.createElement('button');
|
|
201
|
-
$button.classList.add('pq');
|
|
201
|
+
$button.classList.add('pq', 'no-btn');
|
|
202
202
|
$button.appendChild(new Icon(icon));
|
|
203
203
|
if (action) {
|
|
204
204
|
onEvent($button, 'click', () => action(this, record, index));
|
|
@@ -225,7 +225,7 @@ export default class Table extends Component {
|
|
|
225
225
|
}
|
|
226
226
|
} else if(icon){
|
|
227
227
|
const $button = document.createElement('button');
|
|
228
|
-
$button.classList.add('pq');
|
|
228
|
+
$button.classList.add('pq', 'no-btn');
|
|
229
229
|
$button.appendChild(new Icon(icon));
|
|
230
230
|
if (action) {
|
|
231
231
|
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);
|