kempo 2.5.0 → 2.6.0

package/dist/components/DirectoryViewer.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),selectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this[selectedHandler]=e=>{},this.registerAttributes({hasHandle:!!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileSelected directorySelected",this[selectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirSelected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);export class Directory extends Component{constructor(e=!1){super(),this[handle]=e,this[selectDirectoryClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){return!!await super.render(e)&&(this[handle]&&(this.innerHTML=this[handle].name,onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler])),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler])}get rootDir(){return this.closest("k-directory-viewer")}select(){const e=this.rootDir.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("directorySelected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon id="extIcon" name="file"></k-icon> ${this[handle].name}\n        </slot>\n      </button>\n      ${super.shadowTemplate}\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([selected]) #selectFile {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}}const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}get rootDir(){return this.closest("k-directory-viewer")}select(){const e=this.rootDir.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileSelected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/dist/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>`<td>${e[t]||""}</td>`)).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <table>\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
+import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>{let s=e[t]||"";return Array.isArray(s)&&(s=s.join(", ")),`<td>${s}</td>`})).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <table>\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);

package/dist/components/ThemeSwitcher.js

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

package/docs/components/table.html

@@ -22,6 +22,7 @@
         <a href="#requirements">Requirements</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
+        <a href="#arrays">Displaying Arrays</a><br />
       </div>
     </details>
 
@@ -107,6 +108,23 @@
       ]);
     </script>
 
+    <h3 id="arrays"><a href="#arrays" class="no-link">Displaying Arrays</a></h3>
+    <p>The table component can display arrays of strings or numbers by joining them with a comma and a space.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"hobbies"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'hobbies'</span>).setData([<br />    {<br />      <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br />      <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">"Reading"</span>, <span class="hljs-string">"Hiking"</span>, <span class="hljs-string">"Gaming"</span>]<br />    },<br />    {<br />      <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br />      <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">"Cooking"</span>, <span class="hljs-string">"Traveling"</span>]<br />    }<br />  ]);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="hobbies"></k-table>
+    <script type="module">
+      document.getElementById('hobbies').setData([
+        {
+          name: "Dustin",
+          hobbies: ["Reading", "Hiking", "Gaming"]
+        },
+        {
+          name: "Kayla",
+          hobbies: ["Cooking", "Traveling"]
+        }
+      ]);
+    </script>
+
     <h3 id="constructor"><a href="#consttructor" class="no-link">Constructor</a></h3>
     <h6>Extends <a href="./component.html">Component</a></h6>
     <h5>
@@ -139,10 +157,10 @@
     <h5><code>setData(<i>&lt;Array>object</i> records, <i>&lt;Array>object</i> fields)<i>: undefined</i></code></h5>
     <p>Sets the records and the fields and renders the table, if no fields are provided then they will be automatically generated from the keys of the first 100 records.</p>
 
-    <h5><code>renderFields()<i>: undefined</i></code></h5>
+    <h5><code>renderFields()<i>: undefined</i></h5>
     <p>Renders the fields as table headers, this is called automatically by setData, you should never have to call it.</p>
 
-    <h5><code>renderRecords()<i>: undefined</i></code></h5>
+    <h5><code>renderRecords()<i>: undefined</i></h5>
     <p>Renders the records as table row, this is called automatically by setData, you should never have to call it.</p>
 
   </main>

package/docs/kempo/components/DirectoryViewer.js

@@ -1 +1 @@
-import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirselected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer[selected], k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),loadDirectoryClickHandler=Symbol(),selectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol(),filters=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[watchId]=!1,this[filters]=[],this[loadDirectoryClickHandler]=()=>this.loadDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():(this.toggleOpen(),this.select())},this[changeCallback]=()=>{this.updateContents()},this[selectedHandler]=e=>{},this.registerAttributes({hasHandle:!!e,selected:!1})}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileSelected directorySelected",this[selectedHandler]),onEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.rendered&&this[handle]&&(this.opened||this.root)){for await(const e of this[handle].values())"directory"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.filters.every((t=>t(e)))&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("loadDirectory"),"click",this[loadDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}get rootDir(){return this.root?this:this.closest('k-directory-viewer[root="true"]')}get filters(){return this.rootDir[filters]}async loadDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,dispatchEvent(this,"directoryloaded",{dirHandle:this[handle],dirComponent:this}),this.renderDirectory()))}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}select(){const e=this.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("dirSelected",{detail:{dirHandle:this[handle],dirComponent:this},bubbles:!0,composed:!0})))}addFilter(e){this[filters].push(e),this.renderContents()}get shadowTemplate(){return`\n      <button\n        id="loadDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #loadDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n      :host([selected]) #openToggle {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);export class Directory extends Component{constructor(e=!1){super(),this[handle]=e,this[selectDirectoryClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){return!!await super.render(e)&&(this[handle]&&(this.innerHTML=this[handle].name,onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler])),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler])}get rootDir(){return this.closest("k-directory-viewer")}select(){const e=this.rootDir.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("directorySelected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon id="extIcon" name="file"></k-icon> ${this[handle].name}\n        </slot>\n      </button>\n      ${super.shadowTemplate}\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([selected]) #selectFile {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n    `}}const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}get rootDir(){return this.closest("k-directory-viewer")}select(){const e=this.rootDir.querySelector("k-directory[selected], k-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileSelected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/docs/kempo/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>`<td>${e[t]||""}</td>`)).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <table>\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
+import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>{let s=e[t]||"";return Array.isArray(s)&&(s=s.join(", ")),`<td>${s}</td>`})).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <table>\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);

package/docs/kempo/components/ThemeSwitcher.js

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

package/package.json

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

package/src/components/DirectoryViewer.js

@@ -10,8 +10,7 @@ import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
 
 const handle = Symbol(),
       loadDirectoryClickHandler = Symbol(),
-      openToggleClickHandler = Symbol(),
-      fileSelectedHandler = Symbol(),
+      selectedHandler = Symbol(),
       watchId = Symbol(),
       changeCallback = Symbol(),
       filters = Symbol();
@@ -37,13 +36,13 @@ export default class DirectoryViewer extends LazyComponent {
     this[changeCallback] = () => {
       this.updateContents();
     }
+    this[selectedHandler] = (e) => {
+      
+    }
 
     /* Init */
-    this.slot = 'content';
     this.registerAttributes({
-      root: !_handle,
       hasHandle: !!_handle,
-      opened: !_handle,
       selected: false
     });
   }
@@ -51,9 +50,8 @@ export default class DirectoryViewer extends LazyComponent {
   /* Lifecycle Callbacks */
   async render(force){
     if(await super.render(force)){
-      onEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
+      onEvent(this.shadowRoot, 'fileSelected directorySelected', this[selectedHandler]);
       onEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
-      onEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
       this.renderDirectory();
       return true;
     }
@@ -133,15 +131,6 @@ export default class DirectoryViewer extends LazyComponent {
       }
     }
   }
-  open(){
-    this.opened = true;
-  }
-  close(){
-    if(!this.root) this.opened = false;
-  }
-  toggleOpen(){
-    if(!this.root) this.opened = !this.opened;
-  }
   clearDirectoryHandle(){
     this[handle] = false;
     this.hasHandle = false;
@@ -183,11 +172,11 @@ export default class DirectoryViewer extends LazyComponent {
     }
   }
   select(){
-    const $currentSelection = this.closest('k-directory-viewer[root]').querySelector('k-directory-viewer[selected], k-directory-viewer-file[selected]');
+    const $currentSelection = this.querySelector('k-directory[selected], k-file[selected]');
     if($currentSelection === this) return;
     if($currentSelection) $currentSelection.selected = false;
     this.selected = true;
-    this.dispatchEvent(new CustomEvent('dirselected', {
+    this.dispatchEvent(new CustomEvent('dirSelected', {
       detail: {
         dirHandle: this[handle],
         dirComponent: this
@@ -269,6 +258,83 @@ export default class DirectoryViewer extends LazyComponent {
 }
 window.customElements.define('k-directory-viewer', DirectoryViewer);
 
+export class Directory extends Component {
+  constructor(_handle = false){
+    super();
+
+    /* Private Members */
+    this[handle] = _handle;
+
+    /* Private Methods */
+    this[selectDirectoryClickHandler] = () => this.select();
+
+    /* Init */
+    this.slot = 'content';
+    this.registerAttribute('selected', false);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force){
+    if(await super.render(force)){
+      if(this[handle]){
+        this.innerHTML = this[handle].name;
+        onEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+      }
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+  }
+
+  /* Protected Members */
+  get rootDir(){
+    return this.closest('k-directory-viewer')
+  }
+
+  /* Public Methods */
+  select(){
+    const $currentSelection = this.rootDir.querySelector('k-directory[selected], k-file[selected]');
+    if($currentSelection === this) return;
+    if($currentSelection) $currentSelection.selected = false;
+    this.selected = true;
+    this.dispatchEvent(new CustomEvent('directorySelected', {
+      detail: {
+        fileHandle: this[handle],
+        fileComponent: this
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="selectDirectory"
+      >
+        <slot name="selectButton">
+          <k-icon id="extIcon" name="file"></k-icon> ${this[handle].name}
+        </slot>
+      </button>
+      ${super.shadowTemplate}
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host([selected]) #selectFile {
+        background-color: var(--c_primary);
+        color: var(--tc_on_primary);
+        border-radius: var(--raidus);
+      }
+    `;
+  }
+}
+
 const selectFileClickHandler = Symbol();
 export class File extends Component {
   constructor(_handle = false){
@@ -310,13 +376,18 @@ export class File extends Component {
     offEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
   }
 
+  /* Protected Members */
+  get rootDir(){
+    return this.closest('k-directory-viewer')
+  }
+
   /* Public Methods */
   select(){
-    const $currentSelection = this.closest('k-directory-viewer[root]').querySelector('k-directory-viewer[selected], k-directory-viewer-file[selected]');
+    const $currentSelection = this.rootDir.querySelector('k-directory[selected], k-file[selected]');
     if($currentSelection === this) return;
     if($currentSelection) $currentSelection.selected = false;
     this.selected = true;
-    this.dispatchEvent(new CustomEvent('fileselected', {
+    this.dispatchEvent(new CustomEvent('fileSelected', {
       detail: {
         fileHandle: this[handle],
         fileComponent: this

package/src/components/Table.js

@@ -28,7 +28,13 @@ export default class Table extends Component {
   }
   renderRecords(){
     this.shadowRoot.getElementById('records').innerHTML = this.records.map((record) => {
-      return `<tr>${this.fields.map(({name})=>`<td>${record[name] || ''}</td>`).join('')}</tr>`;
+      return `<tr>${this.fields.map(({name}) => {
+        let value = record[name] || '';
+        if (Array.isArray(value)) {
+          value = value.join(', ');
+        }
+        return `<td>${value}</td>`;
+      }).join('')}</tr>`;
     }).join('');
   }
   

package/src/components/ThemeSwitcher.js

@@ -48,12 +48,12 @@ export default class ThemeSwitcher extends Component {
         ></k-icon>
         <k-icon
           id="lightMode"
-          name="light-mode"
+          name="mode-light"
           class="mode"
         ></k-icon>
         <k-icon
           id="darkMode"
-          name="dark-mode"
+          name="mode-dark"
           class="mode"
         ></k-icon>
       </button>