kempo 2.9.2 → 2.9.4
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/Accordion.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/DirectoryViewer.js +1 -1
- package/dist/components/FocusCapture.js +1 -1
- package/dist/components/Timestamp.js +1 -1
- package/dist/components/Toggle.js +1 -1
- package/dist/index.js +1 -1
- package/dist/utils/formatTimestamp.js +1 -1
- package/docs/components/_template.html +9 -0
- package/docs/components/accordion.html +52 -12
- package/docs/components/card.html +68 -8
- package/docs/components/component.html +6 -0
- package/docs/components/content-slider.html +8 -0
- package/docs/components/dialog.html +145 -5
- package/docs/components/directory-viewer.html +51 -40
- package/docs/components/focus-capture.html +68 -0
- package/docs/components/icon.html +76 -5
- package/docs/components/import.html +47 -0
- package/docs/components/lazy-component.html +45 -15
- package/docs/components/reactive-component.html +69 -0
- package/docs/components/reactive-lazy-component.html +69 -0
- package/docs/components/resize.html +52 -3
- package/docs/components/search.html +102 -0
- package/docs/components/show-more.html +54 -5
- package/docs/components/{sidemenu.html → side-menu.html} +56 -3
- package/docs/components/split.html +57 -16
- package/docs/components/table.html +20 -20
- package/docs/components/tabs.html +72 -4
- package/docs/components/tags.html +94 -0
- package/docs/components/theme-switcher.html +74 -0
- package/docs/components/timestamp.html +86 -0
- package/docs/components/toggle.html +37 -34
- package/docs/index.html +5 -0
- package/docs/kempo/components/Accordion.js +1 -1
- package/docs/kempo/components/Dialog.js +1 -1
- package/docs/kempo/components/DirectoryViewer.js +1 -1
- package/docs/kempo/components/FocusCapture.js +1 -1
- package/docs/kempo/components/Timestamp.js +1 -1
- package/docs/kempo/components/Toggle.js +1 -1
- package/docs/kempo/index.js +1 -1
- package/docs/kempo/utils/formatTimestamp.js +1 -1
- package/docs/nav-1.inc.html +16 -2
- package/docs/nav.inc.html +10 -2
- package/docs/search.json +281 -23
- package/docs/styles/_template.html +6 -0
- package/docs/styles/borders-spacing.html +6 -0
- package/docs/styles/buttons.html +6 -0
- package/docs/styles/colors.html +6 -0
- package/docs/styles/displays-layouts.html +6 -0
- package/docs/styles/embed-1.html +6 -0
- package/docs/styles/inputs.html +6 -0
- package/docs/styles/tables.html +6 -0
- package/docs/styles/typography.html +6 -0
- package/docs/{components/stacks.html → utils/_template.html} +11 -30
- package/docs/utils/cli.html +84 -0
- package/docs/utils/cookie.html +87 -0
- package/docs/utils/debounce.html +61 -0
- package/docs/utils/drag.html +85 -0
- package/docs/utils/element.html +124 -0
- package/docs/utils/format-timestamp.html +64 -0
- package/docs/utils/fuzzy-match.html +60 -0
- package/package.json +1 -1
- package/src/components/Accordion.js +0 -1
- package/src/components/Dialog.js +3 -2
- package/src/components/DirectoryViewer.js +21 -92
- package/src/components/FocusCapture.js +2 -1
- package/src/components/Search.js +4 -1
- package/src/components/Timestamp.js +7 -4
- package/src/components/Toggle.js +3 -0
- package/src/utils/formatTimestamp.js +26 -10
- package/docs/table.html +0 -0
- package/src/components/Stacks.js +0 -79
- package/src/utils/files.js +0 -15
|
@@ -6,34 +6,36 @@
|
|
|
6
6
|
<title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
18
|
<h1 class="ta-center">Toggle</h1>
|
|
13
19
|
<main>
|
|
14
|
-
<details
|
|
15
|
-
class="b r mb"
|
|
16
|
-
>
|
|
20
|
+
<details class="b r mb">
|
|
17
21
|
<summary class="p">Table of Contents</summary>
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</li>
|
|
33
|
-
</ul>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#onByDefault">On By Default</a><br />
|
|
26
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
27
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
28
|
+
|
|
29
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
30
|
+
<a href="#constructor">Constructor</a><br />
|
|
31
|
+
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#attributes">Attributes</a><br />
|
|
33
|
+
<a href="#properties">Properties</a><br />
|
|
34
|
+
<a href="#methods">Methods</a><br />
|
|
35
|
+
</div>
|
|
34
36
|
</details>
|
|
35
37
|
|
|
36
|
-
<h3 id="basicUsage">Basic Usage</h3>
|
|
38
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
39
|
<div class="row -mx">
|
|
38
40
|
<div class="col m-span-12 px">
|
|
39
41
|
<k-card label="HTML">
|
|
@@ -47,7 +49,7 @@
|
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
49
51
|
|
|
50
|
-
<h3 id="onByDefault">On By Default</h3>
|
|
52
|
+
<h3 id="onByDefault"><a href="#onByDefault" class="no-link">On By Default</a></h3>
|
|
51
53
|
<div class="row -mx">
|
|
52
54
|
<div class="col m-span-12 px">
|
|
53
55
|
<k-card label="HTML">
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
</div>
|
|
62
64
|
</div>
|
|
63
65
|
|
|
64
|
-
<h3 id="customStyles">Custom Styles</h3>
|
|
66
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
65
67
|
<div class="row -mx">
|
|
66
68
|
<div class="col m-span-12 px">
|
|
67
69
|
<k-card label="HTML">
|
|
@@ -88,7 +90,7 @@
|
|
|
88
90
|
</div>
|
|
89
91
|
</div>
|
|
90
92
|
|
|
91
|
-
<h3 id="javascriptUsage">JavaScript Usage</h3>
|
|
93
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
|
|
92
94
|
<div class="row -mx">
|
|
93
95
|
<div class="col m-span-12 px">
|
|
94
96
|
<k-card label="HTML">
|
|
@@ -117,33 +119,34 @@
|
|
|
117
119
|
</div>
|
|
118
120
|
</div>
|
|
119
121
|
|
|
120
|
-
<h2 id="
|
|
122
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
121
123
|
|
|
122
|
-
<h3 id="constructor">Constructor</h3>
|
|
124
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
123
125
|
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
124
126
|
<h5>
|
|
125
127
|
<code>new Toggle()</code>
|
|
126
128
|
</h5>
|
|
127
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Toggle <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-keyword">const</span> myToggle = <span class="hljs-keyword">new</span> Toggle();<br /><span class="hljs-built_in">document</span>.body.appendChild(myToggle);</code></pre>
|
|
128
129
|
|
|
129
|
-
<h3 id="
|
|
130
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
131
|
+
<ul>
|
|
132
|
+
<li><a href="./component.html">Component</a></li>
|
|
133
|
+
</ul>
|
|
130
134
|
|
|
131
|
-
<
|
|
135
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
136
|
+
<h5><code>value<i>: boolean</i></code></h5>
|
|
132
137
|
<p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
|
|
133
|
-
<pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(myToggle.value); <span class="hljs-comment">// true or false</span></code></pre>
|
|
134
138
|
<p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
|
|
135
139
|
|
|
136
|
-
<h3 id="methods">Methods</h3>
|
|
137
|
-
<h5><code>on()
|
|
140
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
141
|
+
<h5><code>on()<i>: this</i></code></h5>
|
|
138
142
|
<p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
|
|
139
143
|
|
|
140
|
-
<h5><code>off()
|
|
144
|
+
<h5><code>off()<i>: this</i></code></h5>
|
|
141
145
|
<p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
|
|
142
146
|
|
|
143
|
-
<h5><code>toggle()
|
|
147
|
+
<h5><code>toggle()<i>: this</i></code></h5>
|
|
144
148
|
<p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
|
|
145
149
|
|
|
146
|
-
|
|
147
150
|
</main>
|
|
148
151
|
<div style="height:33vh"></div>
|
|
149
152
|
<script type="module" src="../kempo/components/Import.js"></script>
|
package/docs/index.html
CHANGED
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Kempo - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="./kempo/kempo-vars.css" /><link rel="stylesheet" href="./kempo/kempo-styles.css" />
|
|
8
|
+
<script type="module">
|
|
9
|
+
import Icon from './kempo/components/Icon.js';
|
|
10
|
+
Icon.pathToIcons = ['./icons'];
|
|
11
|
+
</script>
|
|
8
12
|
</head>
|
|
9
13
|
<body>
|
|
10
14
|
<k-import src="./nav.inc.html"></k-import>
|
|
@@ -12,5 +16,6 @@
|
|
|
12
16
|
|
|
13
17
|
</main>
|
|
14
18
|
<script type="module" src="./kempo/components/Import.js"></script>
|
|
19
|
+
|
|
15
20
|
</body>
|
|
16
21
|
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";
|
|
1
|
+
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Accordion extends Component{constructor(){super(),this.unrender=!0}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const n=this.getPanel(e);if(n){n.active=!0,n.transitioning=!0,setTimeout((()=>{n.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),dispatchEvent(this,"openpanel",{panelName:e})}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout((()=>{t.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const n=this.getHeader(e);n&&(n.active=!1),dispatchEvent(this,"closepanel",{panelName:e})}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),dispatchEvent(this,"togglepanel",{panelName:e}))}get shadowStyles(){return'\n :host {\n display: block;\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n }\n ::slotted(k-accordion-header){\n border-top: 1px solid var(--c_border);\n }\n ::slotted(k-accordion-header[active="true"]) {\n border-bottom: 1px solid var(--c_border);\n }\n ::slotted(k-accordion-header:first-of-type) {\n border-top: 0;\n }\n ::slotted(k-accordion-header:last-of-type:not([active="true"])) {\n border-bottom: 0;\n }\n '}}window.customElements.define("k-accordion",Accordion);const clickHandler=Symbol();export class AccordionHeader extends Component{constructor(e="Show More",t=""){super(),this[clickHandler]=()=>{this.accordion.togglePanel(this.forPanel)},this.registerAttributes({forPanel:t,active:!1})}async render(e){return!!await super.render(e)&&(onEvent(this,"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler])}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return"\n :host {\n display: block;\n padding: 1rem;\n cursor: pointer;\n }\n "}}window.customElements.define("k-accordion-header",AccordionHeader);export class AccordionPanel extends Component{constructor(e=""){super(),this.registerAttributes({name:e,active:!1,transitioning:!1})}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n interpolate-size: allow-keywords;\n height: 0;\n overflow: hidden;\n transition: height var(--animation_ms) ease-in-out;\n }\n :host([active="true"]) {\n height: max-content;\n }\n `}}window.customElements.define("k-accordion-panel",AccordionPanel);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:
|
|
1
|
+
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:s="success ml",confirmAction:i=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:s,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:i,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n <k-focus-capture>\n <button id="overlay" aria-label="Close the Dialog"></button>\n <div id="wrapper">\n <div\n id="dialog"\n role="dialog"\n aria-modal="true"\n aria-labelledby="title"\n >\n <div\n id="header"\n class="${this._hasTitle()?"has-title":""}"\n >\n <div\n id="title"\n ><slot name="title"></slot></div>\n ${this.renderIf(this.closeBtn,'\n <button\n id="close"\n >\n <k-icon name="close"></k-icon>\n </button>\n ')}\n </div>\n <div id="body">\n ${super.shadowTemplate}\n </div>\n ${this.renderIf(this.cancelText||this.confirmText,`\n <div id="footer">\n ${this.renderIf(this.cancelText,`\n <button id="cancel" class="${this.cancelClasses}">\n ${this.cancelText}\n </button>\n `)}\n ${this.renderIf(this.confirmText,`\n <button id="confirm" class="${this.confirmClasses}">\n ${this.confirmText}\n </button>\n `)}\n </div>\n `)}\n </div>\n </div>\n </k-focus-capture>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: inline;\n height: 1px;\n width: 1px;\n position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n top: 0;\n left: 0;\n z-index: 100;\n }\n :host(:not([opened])){\n display: none;\n }\n #overlay {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: var(--c_overlay);\n z-index: 100;\n border: 0px solid transparent;\n box-shadow: 0 0 0 transparent;\n }\n #wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 101;\n pointer-events: none;\n }\n #dialog {\n display: flex;\n flex-direction: column;\n min-width: var(--min_width, 20rem);\n width: var(--width, fit-content);\n max-width: var(--max_width, calc(100vw - 2rem));\n min-height: var(--min_height, 12rem);\n height: var(--height, fit-content);\n max-height: var(--max_height, calc(100vh - 2rem));\n background-color: var(--c_bg);\n box-shadow: var(--drop_shadow);\n border-radius: var(--radius);\n pointer-events: all;\n }\n #header {\n display: flex;\n align-items: center;\n }\n #header.has-title {\n border-bottom: 1px solid var(--c_border);\n }\n #title {\n flex: 1 1 auto;\n }\n #close {\n border: 0px;\n background: transparent;\n box-shadow: 0 0 0 transparent;\n color: var(--tc);\n }\n #close k-icon {\n pointer-events: none;\n }\n #body {\n flex: 1 1 auto;\n }\n #footer {\n display: flex;\n justify-content: flex-end;\n padding: var(--spacer_h);\n }\n `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n <h5 slot="title" class="pyh px m0">${t.title}</h5>\n <p class="p">${e}</p>\n `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n <p class="p">${e}</p>\n `,{...t,cancelText:"Ok"});onEvent(o,"close",n)}}window.customElements.define("k-dialog",Dialog);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";import Component from"./Component.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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LazyComponent from"./LazyComponent.js";export default class FocusCapture extends LazyComponent{constructor(){super({delegatesFocus:!0})}render(){super.render(),this.shadowRoot.getElementById("after")
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";import{onEvent}from"../utils/element.js";export default class FocusCapture extends LazyComponent{constructor(){super({delegatesFocus:!0})}render(){super.render(),onEvent(this.shadowRoot.getElementById("after"),"focus",(()=>{this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus()}))}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div id="after" tabindex="0"></div>\n `}get shadowStyles(){return"\n :host {\n display: inline-block;\n }\n "}}window.customElements.define("k-focus-capture",FocusCapture);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends Component{constructor(t){super(),this.
|
|
1
|
+
import Component from"./Component.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends Component{constructor(t=0,e="",m=""){super(),this.registerAttributes({timestamp:t,locale:m,format:e})}attributeChangedCallback(t,e,m){"timestamp"==t&&(this.innerHTML=m?formatTimestamp(m,this.format,this.locale||navigator.language):"")}static observedAttributes=["timestamp"]}window.customElements.define("k-timestamp",Timestamp);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,
|
|
1
|
+
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const clickHandler=Symbol(),keyDownHandler=Symbol();export default class Toggle extends Component{constructor(){super(),this[clickHandler]=()=>{this.toggle()},this[keyDownHandler]=({code:n})=>{["Space","Enter"].includes(n)&&this.toggle()},this.registerAttributes({value:!1}),this.tabIndex=0}connectedCallback(){super.connectedCallback(),onEvent(this,"click",this[clickHandler]),onEvent(this,"keydown",this[keyDownHandler])}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler]),offEvent(this,"keydown",this[keyDownHandler])}attributeChangedCallback(n,e,t){"value"===n&&dispatchEvent(this,"change",{value:t})}on(){return this.value=!0,dispatchEvent(this,"on",{value:!0}),this}off(){return this.value=!1,dispatchEvent(this,"on",{value:!1}),this}toggle(){return this.value?this.off():this.on(),dispatchEvent(this,"toggle",{value:this.value}),this}get shadowTemplate(){return`\n <div id="switch">\n <div id="handle"></div>\n </div>\n <label id="label">\n ${super.shadowTemplate}\n </label>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n --switch_height: 2rem;\n --switch_width: 3rem;\n --switch_border: 1px solid var(--c_border);\n --switch_background__off: var(--c_bg__alt);\n --switch_background__on: var(--c_success);\n --handle_size__off: 1rem;\n --handle_size__on: 1.5rem;\n --handle_border: 1px solid var(--c_border);\n --handle_background__off: var(--c_border);\n --handle_background__on: white;\n\n display: flex;\n align-items: center;\n cursor: pointer;\n margin-bottom: var(--spacer);\n border-radius: 999rem;\n }\n #switch {\n display: flex;\n align-items: center;\n width: var(--switch_width);\n height: var(--switch_height);\n border: var(--switch_border);\n background: var(--switch_background__off);\n border-radius: 999rem;\n margin-right: var(--spacer);\n }\n #handle {\n --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);\n width: var(--handle_size__off);\n height: var(--handle_size__off);\n border: var(--handle_border);\n background: var(--handle_background__off);\n border-radius: 999rem;\n transform: translateX(var(--margin));\n transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);\n }\n :host([value="true"]) #switch {\n background: var(--switch_background__on);\n }\n :host([value="true"]) #handle {\n --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);\n --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));\n width: var(--handle_size__on);\n height: var(--handle_size__on);\n background: var(--handle_background__on);\n transform: translateX(var(--d));\n }\n #label {\n display: block;\n flex: 1 1 auto;\n padding: 0;\n }\n `}static observedAttributes=[...Component.observedAttributes,"value"]}window.customElements.define("k-toggle",Toggle);
|
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
|
|
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 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 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,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,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
|
-
export default(i,t)=>
|
|
1
|
+
export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,(e=>t[e]))}return s.toLocaleString(t||navigator.language)};
|
package/docs/nav-1.inc.html
CHANGED
|
@@ -48,14 +48,28 @@
|
|
|
48
48
|
<a href="../components/icon.html">Icon</a>
|
|
49
49
|
<a href="../components/import.html">Import</a>
|
|
50
50
|
<a href="../components/resize.html">Resize</a>
|
|
51
|
+
<a href="../components/search.html">Search</a>
|
|
51
52
|
<a href="../components/show-more.html">Show More</a>
|
|
52
|
-
<a href="../components/
|
|
53
|
+
<a href="../components/side-menu.html">Side Menu</a>
|
|
53
54
|
<a href="../components/split.html">Split</a>
|
|
54
|
-
<a href="../components/stacks.html">Stack</a>
|
|
55
55
|
<a href="../components/table.html">Table</a>
|
|
56
56
|
<a href="../components/tabs.html">Tabs</a>
|
|
57
|
+
<a href="../components/tags.html">Tags</a>
|
|
58
|
+
<a href="../components/theme-switcher.html">Theme Switcher</a>
|
|
59
|
+
<a href="../components/timestamp.html">Timestamp</a>
|
|
57
60
|
<a href="../components/toggle.html">Toggle</a>
|
|
58
61
|
</div>
|
|
62
|
+
|
|
63
|
+
<h5 class="mb0">Utils</h5>
|
|
64
|
+
<div class="pl mb">
|
|
65
|
+
<a href="../utils/cli.html">CLI</a>
|
|
66
|
+
<a href="../utils/cookie.html">Cookie</a>
|
|
67
|
+
<a href="../utils/debounce.html">Debounce</a>
|
|
68
|
+
<a href="../utils/drag.html">Drag</a>
|
|
69
|
+
<a href="../utils/element.html">Element</a>
|
|
70
|
+
<a href="../utils/format-timestamp.html">Format Timestamp</a>
|
|
71
|
+
<a href="../utils/fuzzy-match.html">Fuzzy Match</a>
|
|
72
|
+
</div>
|
|
59
73
|
</menu>
|
|
60
74
|
</k-side-menu>
|
|
61
75
|
<script>
|
package/docs/nav.inc.html
CHANGED
|
@@ -48,14 +48,22 @@
|
|
|
48
48
|
<a href="./components/icon.html">Icon</a>
|
|
49
49
|
<a href="./components/import.html">Import</a>
|
|
50
50
|
<a href="./components/resize.html">Resize</a>
|
|
51
|
+
<a href="./components/search.html">Search</a>
|
|
51
52
|
<a href="./components/show-more.html">Show More</a>
|
|
52
|
-
<a href="./components/
|
|
53
|
+
<a href="./components/side-menu.html">Side Menu</a>
|
|
53
54
|
<a href="./components/split.html">Split</a>
|
|
54
|
-
<a href="./components/stacks.html">Stack</a>
|
|
55
55
|
<a href="./components/table.html">Table</a>
|
|
56
56
|
<a href="./components/tabs.html">Tabs</a>
|
|
57
|
+
<a href="./components/tags.html">Tags</a>
|
|
58
|
+
<a href="./components/theme-switcher.html">Theme Switcher</a>
|
|
59
|
+
<a href="./components/timestamp.html">Timestamp</a>
|
|
57
60
|
<a href="./components/toggle.html">Toggle</a>
|
|
58
61
|
</div>
|
|
62
|
+
|
|
63
|
+
<h5 class="mb0">Utils</h5>
|
|
64
|
+
<div class="pl mb">
|
|
65
|
+
|
|
66
|
+
</div>
|
|
59
67
|
</menu>
|
|
60
68
|
</k-side-menu>
|
|
61
69
|
<script>
|