kempo 1.0.0
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/.gitattributes +2 -0
- package/LICENSE +21 -0
- package/README.md +2 -0
- package/dist/components/Card.js +1 -0
- package/dist/components/CodeEditor.js +1 -0
- package/dist/components/Component.js +1 -0
- package/dist/components/Dialog.js +1 -0
- package/dist/components/FocusCapture.js +1 -0
- package/dist/components/Icon.js +1 -0
- package/dist/components/Import.js +1 -0
- package/dist/components/LazyComponent.js +1 -0
- package/dist/components/ReactiveComponent.js +1 -0
- package/dist/components/ReactiveLazyComponent.js +1 -0
- package/dist/components/Resize.js +1 -0
- package/dist/components/Search.js +1 -0
- package/dist/components/ShowMore.js +1 -0
- package/dist/components/SideMenu.js +1 -0
- package/dist/components/Split.js +1 -0
- package/dist/components/Tabs.js +1 -0
- package/dist/components/ThemeSwitcher.js +1 -0
- package/dist/components/Timestamp.js +1 -0
- package/dist/components/WebSnippetEditor.js +1 -0
- package/dist/index.js +1 -0
- package/dist/kempo-hljs.css +1 -0
- package/dist/kempo-styles.css +1 -0
- package/dist/kempo-vars.css +1 -0
- package/dist/kempo.css +1 -0
- package/dist/kempo.js +1 -0
- package/dist/utils/cli.js +1 -0
- package/dist/utils/cookie.js +1 -0
- package/dist/utils/debounce.js +1 -0
- package/dist/utils/drag.js +1 -0
- package/dist/utils/element.js +1 -0
- package/dist/utils/formatTimestamp.js +1 -0
- package/dist/utils/fuzzyMatch.js +1 -0
- package/dist/utils/getPreferredTheme.js +1 -0
- package/dist/utils/loadCss.js +1 -0
- package/dist/utils/loadScript.js +1 -0
- package/dist/utils/object.js +1 -0
- package/dist/utils/string.js +1 -0
- package/dist/utils/toFunction.js +1 -0
- package/dist/utils/type.js +1 -0
- package/dist/utils/waitFrames.js +1 -0
- package/docs/components/_template.html +22 -0
- package/docs/components/card.html +35 -0
- package/docs/components/codeeditor.html +29 -0
- package/docs/components/component.html +88 -0
- package/docs/components/dialog.html +89 -0
- package/docs/components/icon.html +73 -0
- package/docs/components/import.html +34 -0
- package/docs/components/lazycomponent.html +50 -0
- package/docs/components/resize.html +107 -0
- package/docs/components/show-more.html +92 -0
- package/docs/components/sidemenu.html +97 -0
- package/docs/components/split.html +70 -0
- package/docs/components/tabs.html +33 -0
- package/docs/components/websnippeteditor.html +42 -0
- package/docs/index.html +17 -0
- package/docs/kempo/components/Card.js +1 -0
- package/docs/kempo/components/CodeEditor.js +1 -0
- package/docs/kempo/components/Collapse.js +1 -0
- package/docs/kempo/components/Component.js +1 -0
- package/docs/kempo/components/Dialog.js +1 -0
- package/docs/kempo/components/FocusCapture.js +1 -0
- package/docs/kempo/components/Icon.js +1 -0
- package/docs/kempo/components/Import.js +1 -0
- package/docs/kempo/components/LazyComponent.js +1 -0
- package/docs/kempo/components/ReactiveComponent.js +1 -0
- package/docs/kempo/components/ReactiveLazyComponent.js +1 -0
- package/docs/kempo/components/Resize.js +1 -0
- package/docs/kempo/components/Search.js +1 -0
- package/docs/kempo/components/ShowMore.js +1 -0
- package/docs/kempo/components/SideMenu.js +1 -0
- package/docs/kempo/components/Split.js +1 -0
- package/docs/kempo/components/Tabs.js +1 -0
- package/docs/kempo/components/ThemeSwitcher.js +1 -0
- package/docs/kempo/components/Timestamp.js +1 -0
- package/docs/kempo/components/WebSnippetEditor.js +1 -0
- package/docs/kempo/icons/arrow-down-double.svg +1 -0
- package/docs/kempo/icons/arrow-up-double.svg +1 -0
- package/docs/kempo/icons/close.svg +2 -0
- package/docs/kempo/icons/compare.svg +1 -0
- package/docs/kempo/icons/dark-mode.svg +1 -0
- package/docs/kempo/icons/delete.svg +1 -0
- package/docs/kempo/icons/filter-off.svg +1 -0
- package/docs/kempo/icons/filter.svg +1 -0
- package/docs/kempo/icons/light-mode.svg +1 -0
- package/docs/kempo/icons/menu.svg +1 -0
- package/docs/kempo/icons/pause.svg +1 -0
- package/docs/kempo/icons/play.svg +1 -0
- package/docs/kempo/icons/search.svg +1 -0
- package/docs/kempo/icons/settings.svg +1 -0
- package/docs/kempo/icons/storage.svg +1 -0
- package/docs/kempo/icons/trash-x.svg +1 -0
- package/docs/kempo/index.js +1 -0
- package/docs/kempo/kempo-hljs.css +1 -0
- package/docs/kempo/kempo-styles.css +1 -0
- package/docs/kempo/kempo-vars.css +1 -0
- package/docs/kempo/kempo.css +1 -0
- package/docs/kempo/kempo.js +1 -0
- package/docs/kempo/utils/cli.js +1 -0
- package/docs/kempo/utils/cookie.js +1 -0
- package/docs/kempo/utils/debounce.js +1 -0
- package/docs/kempo/utils/drag.js +1 -0
- package/docs/kempo/utils/element.js +1 -0
- package/docs/kempo/utils/formatTimestamp.js +1 -0
- package/docs/kempo/utils/fuzzyMatch.js +1 -0
- package/docs/kempo/utils/getPreferredTheme.js +1 -0
- package/docs/kempo/utils/loadCss.js +1 -0
- package/docs/kempo/utils/loadScript.js +1 -0
- package/docs/kempo/utils/object.js +1 -0
- package/docs/kempo/utils/string.js +1 -0
- package/docs/kempo/utils/toFunction.js +1 -0
- package/docs/kempo/utils/type.js +1 -0
- package/docs/kempo/utils/waitFrames.js +1 -0
- package/docs/nav-1.inc.html +66 -0
- package/docs/nav.inc.html +66 -0
- package/docs/search.json +94 -0
- package/docs/styles/_template.html +22 -0
- package/docs/styles/borders-spacing.html +193 -0
- package/docs/styles/buttons.html +113 -0
- package/docs/styles/colors.html +65 -0
- package/docs/styles/displays-layouts.html +156 -0
- package/docs/styles/embed-1.html +35 -0
- package/docs/styles/inputs.html +89 -0
- package/docs/styles/tables.html +143 -0
- package/docs/styles/typography.html +116 -0
- package/icons/arrow-down-double.svg +1 -0
- package/icons/arrow-up-double.svg +1 -0
- package/icons/close.svg +2 -0
- package/icons/compare.svg +1 -0
- package/icons/dark-mode.svg +1 -0
- package/icons/delete.svg +1 -0
- package/icons/filter-off.svg +1 -0
- package/icons/filter.svg +1 -0
- package/icons/light-mode.svg +1 -0
- package/icons/menu.svg +1 -0
- package/icons/pause.svg +1 -0
- package/icons/play.svg +1 -0
- package/icons/search.svg +1 -0
- package/icons/settings.svg +1 -0
- package/icons/storage.svg +1 -0
- package/icons/trash-x.svg +1 -0
- package/kempo/components/Card.js +65 -0
- package/kempo/components/CodeEditor.js +141 -0
- package/kempo/components/Component.js +109 -0
- package/kempo/components/Dialog.js +277 -0
- package/kempo/components/FocusCapture.js +30 -0
- package/kempo/components/Icon.js +60 -0
- package/kempo/components/Import.js +40 -0
- package/kempo/components/LazyComponent.js +40 -0
- package/kempo/components/ReactiveComponent.js +11 -0
- package/kempo/components/ReactiveLazyComponent.js +11 -0
- package/kempo/components/Resize.js +168 -0
- package/kempo/components/Search.js +136 -0
- package/kempo/components/ShowMore.js +82 -0
- package/kempo/components/SideMenu.js +156 -0
- package/kempo/components/Split.js +133 -0
- package/kempo/components/Tabs.js +254 -0
- package/kempo/components/ThemeSwitcher.js +77 -0
- package/kempo/components/Timestamp.js +25 -0
- package/kempo/components/WebSnippetEditor.js +159 -0
- package/kempo/kempo-hljs.css +145 -0
- package/kempo/kempo-styles.css +893 -0
- package/kempo/kempo-vars.css +154 -0
- package/kempo/kempo.js +48 -0
- package/kempo/utils/cli.js +54 -0
- package/kempo/utils/cookie.js +16 -0
- package/kempo/utils/debounce.js +9 -0
- package/kempo/utils/drag.js +74 -0
- package/kempo/utils/element.js +69 -0
- package/kempo/utils/formatTimestamp.js +11 -0
- package/kempo/utils/fuzzyMatch.js +55 -0
- package/kempo/utils/getPreferredTheme.js +1 -0
- package/kempo/utils/loadCss.js +10 -0
- package/kempo/utils/loadScript.js +10 -0
- package/kempo/utils/object.js +177 -0
- package/kempo/utils/string.js +54 -0
- package/kempo/utils/toFunction.js +24 -0
- package/kempo/utils/type.js +8 -0
- package/kempo/utils/waitFrames.js +17 -0
- package/package.json +33 -0
- package/scripts/build.js +131 -0
- package/scripts/docs.js +14 -0
- package/test/components/SuiteList.js +26 -0
- package/test/components/Test.js +357 -0
- package/test/index.html +49 -0
- package/test/index.js +25 -0
- package/test/suite.html +45 -0
- package/test/suites.inc.html +4 -0
- package/test/tests/components/Component.test.js +138 -0
- package/test/tests/utils/cli.test.js +113 -0
- package/test/tests/utils/cookie.test.js +87 -0
- package/test/tests/utils/debounce.test.js +71 -0
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
|
+
<h1 class="ta-center">Split</h1>
|
|
13
|
+
<main>
|
|
14
|
+
<h3>Basic Usage</h3>
|
|
15
|
+
<p>Drag the separator between the "left" and "right" sides to resize the sides. The height should be explicitly set.</p>
|
|
16
|
+
<div class="row -mx">
|
|
17
|
+
<div class="col m-span-12 px">
|
|
18
|
+
<k-card label="HTML">
|
|
19
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>left<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>right<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
20
|
+
</k-card>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="col m-span-12 px">
|
|
23
|
+
<k-card label="Output">
|
|
24
|
+
<k-split style="height: 10rem" class="b">
|
|
25
|
+
<p>left</p>
|
|
26
|
+
<p slot="right">right</p>
|
|
27
|
+
</k-split>
|
|
28
|
+
</k-card>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<h3>Sizes</h3>
|
|
33
|
+
<p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
|
|
34
|
+
<p>Set the CSS Custom Property <code>--min_pane_width</code> to set the minimum size each side can be.</p>
|
|
35
|
+
<p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the sides).</p>
|
|
36
|
+
<div class="row -mx">
|
|
37
|
+
<div class="col m-span-12 px">
|
|
38
|
+
<k-card label="HTML">
|
|
39
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --left_width: 100px;<br /> --min_pane_width: 100px;<br /> --handle_width: 20px;<br /> height: 10rem<br /> "</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>left<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>right<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
40
|
+
</k-card>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col m-span-12 px">
|
|
43
|
+
<k-card label="Output">
|
|
44
|
+
<k-split
|
|
45
|
+
style="
|
|
46
|
+
--left_width: 100px;
|
|
47
|
+
--min_pane_width: 100px;
|
|
48
|
+
--handle_width: 20px;
|
|
49
|
+
height: 10rem
|
|
50
|
+
"
|
|
51
|
+
class="b"
|
|
52
|
+
>
|
|
53
|
+
<p>left</p>
|
|
54
|
+
<p slot="right">right</p>
|
|
55
|
+
</k-split>
|
|
56
|
+
</k-card>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
</main>
|
|
61
|
+
<div style="height:33vh"></div>
|
|
62
|
+
<script type="module">
|
|
63
|
+
import Icon from '../kempo/components/Icon.js';
|
|
64
|
+
Icon.pathToIcons = '../kempo/icons';
|
|
65
|
+
</script>
|
|
66
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
67
|
+
<script type="module" src="../kempo/components/Card.js"></script>
|
|
68
|
+
<script type="module" src="../kempo/components/Split.js"></script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
|
+
<main>
|
|
13
|
+
<h1 class="ta-center">Tabs</h1>
|
|
14
|
+
<k-tabs>
|
|
15
|
+
<k-tab for="html">HTML</k-tab>
|
|
16
|
+
<k-tab for="js">Tab 2</k-tab>
|
|
17
|
+
<k-tab-content name="html">
|
|
18
|
+
<p>HTML Code</p>
|
|
19
|
+
</k-tab-content>
|
|
20
|
+
<k-tab-content name="js">
|
|
21
|
+
<p>JS Code</p>
|
|
22
|
+
</k-tab-content>
|
|
23
|
+
</k-tabs>
|
|
24
|
+
</main>
|
|
25
|
+
<div style="height:33vh"></div>
|
|
26
|
+
<script type="module">
|
|
27
|
+
import Icon from '../kempo/components/Icon.js';
|
|
28
|
+
Icon.pathToIcons = '../kempo/icons';
|
|
29
|
+
</script>
|
|
30
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
31
|
+
<script type="module" src="../kempo/components/Tabs.js"></script>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Web Snippet Editor - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
|
+
<h1 class="ta-center">Web Snippet Editor</h1>
|
|
13
|
+
<main>
|
|
14
|
+
<k-web-snippet-editor
|
|
15
|
+
use-kempo="false"
|
|
16
|
+
>
|
|
17
|
+
<pre for="html">
|
|
18
|
+
<button id="hello">
|
|
19
|
+
Click Me
|
|
20
|
+
</button>
|
|
21
|
+
</pre>
|
|
22
|
+
<pre for="css">
|
|
23
|
+
#hello {
|
|
24
|
+
color: blue;
|
|
25
|
+
}
|
|
26
|
+
</pre>
|
|
27
|
+
<pre for="js">
|
|
28
|
+
document.getElementById('hello').addEventListener('click', () => {
|
|
29
|
+
alert('Hello World');
|
|
30
|
+
});
|
|
31
|
+
</pre>
|
|
32
|
+
</k-web-snippet-editor>
|
|
33
|
+
</main>
|
|
34
|
+
<div style="height:33vh"></div>
|
|
35
|
+
<script type="module">
|
|
36
|
+
import Icon from '../kempo/components/Icon.js';
|
|
37
|
+
Icon.pathToIcons = '../kempo/icons';
|
|
38
|
+
</script>
|
|
39
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
40
|
+
<script type="module" src="../kempo/components/WebSnippetEditor.js"></script>
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Kempo - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="./kempo/kempo-vars.css" /><link rel="stylesheet" href="./kempo/kempo-styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<k-import src="./nav.inc.html"></k-import>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from './kempo/components/Icon.js';
|
|
13
|
+
Icon.pathToIcons = './kempo/icons';
|
|
14
|
+
</script>
|
|
15
|
+
<script type="module" src="./kempo/components/Import.js"></script>
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import{setProp}from"../utils/element.js";export default class Card extends Component{constructor(r=""){super(),this.registerAttribute("label",r)}attributeChangedCallback(r,e,n){"label"===r&&setProp(this.shadowRoot.getElementById("label"),"innerHTML",n)}get shadowTemplate(){return`\n <div id="card">\n <div id="label">${this.label}</div>\n ${super.shadowTemplate}\n </div>\n `}get shadowStyles(){return"\n :host {\n display: block;\n }\n #card {\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n margin-bottom: var(--spacer);\n padding: var(--spacer);\n position: relative;\n background-color: var(--c_bg);\n }\n #label {\n position: absolute;\n top: -1.25em;\n left: 1.25em;\n background-color: var(--c_bg);\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n padding: var(--spacer_h);\n }\n :host([label]) {\n padding-top: calc(1.5 * var(--spacer));\n margin-top: var(--spacer);\n }\n :host([label]) #card {\n padding-top: calc(1.5 * var(--spacer));\n }\n :host(:not([label])) #label {\n display: none;\n }\n\n "}static get renderOnAttributes(){return["label"]}}window.customElements.define("k-card",Card);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import hljs from"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1," ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e=this.language?hljs.highlight(this.value,{language:this.language}):hljs.highlightAuto(this.value),this.shadowRoot.getElementById("editor").innerHTML=e.value.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n <pre id="editor" contenteditable="true"></pre>\n '}get shadowStyles(){return`\n ${super.shadowStyles}\n :root {\n --d_caret: white;\n --l_caret: black;\n --caret: var(--l_caret);\n }\n @media (prefers-color-scheme: light) { \n :root:not([theme="dark"]) {\n --caret: var(--l_caret);\n }\n }\n :root[theme="light"] {\n --caret: var(--l_caret);\n }\n @media (prefers-color-scheme: dark) {\n :root:not([theme="light"]) {\n --caret: var(--d_caret);\n }\n }\n :root[theme="dark"] {\n --caret: var(--d_caret);\n }\n :host {\n display: block;\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n max-height: 20rem;\n overflow: auto;\n caret-color: var(--caret);\n }\n :host(:focus-within){\n box-shadow: var(--focus_shadow);\n }\n #editor {\n min-height: 6rem;\n outline: none;\n font-family: var(--ff_mono);\n resize: vertical;\n padding: var(--spacer);\n margin-bottom: 0;\n resize: vertical;\n counter-reset: line-number;\n white-space: pre-wrap;\n padding-left: 2.5rem;\n position: relative;\n }\n #editor .line::before {\n content: counter(line-number); /* Use the counter value as content */\n counter-increment: line-number; /* Increment the counter */\n display: inline-block;\n width: 2rem;\n text-align: right; /* Align numbers to the right */\n opacity: 0.65;\n position: absolute;\n left: 0;\n user-select: none;\n }\n .line {\n width: 100%;\n overflow-wrap: break-word;\n word-break: break-all;\n }\n `}}window.customElements.define("k-code-editor",CodeEditor);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import ReactiveLazyComponent from"./ReactiveLazyComponent.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const toggleClickHandler=Symbol("toggleClickHandler");export default class Collapse extends ReactiveLazyComponent{constructor(){super(),this[toggleClickHandler]=()=>{this.toggle(),this.shadowRoot.getElementById("toggle").focus()},this.registerAttribute("opened",!1)}async render(e){return!!super.render(e)&&(onEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler]),!0)}disconnectedCallback(){offEvent(this.shadowRoot.getElementById("toggle"),"click",this[toggleClickHandler]),super.disconnectedCallback()}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"opened"===e&&dispatchEvent(this,n?"change opened":"change closed")}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,dispatchEvent(this,"toggle")}get shadowTemplate(){return`\n <button\n id="toggle"\n class="no-btn p"\n >\n <slot name="${this.opened?"closeText":"openText"}">${this.opened?"Hide Content":"Show Content"}</slot>\n </button>\n ${this.renderIf(this.opened,`\n <div id="content">\n ${super.shadowTemplate}\n </div>\n `)}\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n }\n #toggle {\n width: 100%;\n }\n `}static renderOnChange=["opened"];static observedAttributes=this.renderOnChange}window.customElements.define("k-collapse",Collapse);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{getCase}from"../utils/string.js";export default class Component extends HTMLElement{constructor(t={}){super(),this.attachShadow({mode:"open",...t}),this.registerAttribute("rendered",!1)}async connectedCallback(){this.render()}async disconnectedCallback(){}async attributeChangedCallback(){}async propChangedCallback(){}async render(t=!1){if(t||!this.rendered)return this.shadowRoot.innerHTML=`<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!0,!0}registerAttribute(t,e=""){const{camel:s,dash:r}=getCase(t),i=typeof e;Object.defineProperty(this,s,{get:()=>{const t=this.getAttribute(r);return"number"==i?parseFloat(t):"object"===i?"string"==typeof t?JSON.parse(t):t:"boolean"===i?"string"==typeof t?"true"===t.toLowerCase().trim():!!t:"string"===i?t||"":t},set:t=>{this[r]!==t&&("boolean"===i?t?this.setAttribute(r,"true"):this.removeAttribute(r):"object"===i?this.setAttribute(r,JSON.stringify(t||{})):"number"===i?t||0===t?this.setAttribute(r,t):this.removeAttribute(r):this.setAttribute(r,t))}}),null===this.getAttribute(r)&&(this[s]=e)}registerAttributes(t){for(const e in t)this.registerAttribute(e,t[e])}registerProp(t,e){const s=Symbol(t);this[s]=e,Object.defineProperty(this,t,{get:()=>this[s],set:e=>{if(this[s]!==e){const r=this[s];this[s]=e,this.propChangedCallback(t,r,e)}}})}registerProps(t){for(const e in t)this.registerProp(e,t[e])}renderIf(t,e){return t?e:""}get shadowTemplate(){return"\n <slot></slot>\n "}get shadowStyles(){return""}static observedAttributes=["rendered"];static pathToKempo=import.meta.url.substring(0,import.meta.url.indexOf("/components/Component.js"))}
|
|
@@ -0,0 +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:n=!1,closeBtn:e=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:c="",cancelAction:l=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:n,closeBtn:e,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:l,closeCallback:r,previousFocus:null,_clickHandler:n=>{const{target:{id:e}}=n;"overlay"==e&&this.overlayClose||"close"==e?this.close():"cancel"==e?(this.cancelAction(n),n.defaultPrevented||this.close()):"confirm"==e&&(this.confirmAction(n),n.defaultPrevented||this.close())},_keydownHandler:({keyCode:n})=>{27===n&&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(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const n=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);n&&n.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 n=firstFocusable(this.shadowRoot);n&&(this.previousFocus=document.activeElement,n.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: 0;\n width: 0;\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(n="",e={}){const t=new Dialog({opened:!0,...e});onEvent(t,"close",t.remove),n instanceof HTMLElement||n instanceof DocumentFragment?t.appendChild(n):n instanceof NodeList?n.forEach((n=>t.appendChild(n))):t.innerHTML=n,document.body.appendChild(t)}static confirm(n,e,t){Dialog.create(`\n <h5 slot="title" class="pyh px m0">Confirm Event Deletion</h5>\n <p class="p">${n}</p>\n `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1)})}}window.customElements.define("k-dialog",Dialog);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";export default class FocusCapture extends LazyComponent{constructor(){super({delegatesFocus:!0})}render(){super.render(),this.shadowRoot.getElementById("after").addEventListener("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);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){return!!await super.render(t)&&(this.src?(this.innerHTML=await(await fetch(this.src)).text(),this.fixSVG()):this.name?(this.innerHTML=await(await fetch(`${Icon.pathToIcons}/${this.name}.svg`)).text(),this.fixSVG()):(this.rendered=!1,this.innerHTML=""),!0)}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n :host {\n display: inline-block;\n vertical-align: bottom;\n }\n ::slotted(svg){\n height: 1.35em;\n vertical-align: middle;\n }\n "}static observedAttributes=["name","src"];static pathToIcons="/icons"}window.customElements.define("k-icon",Icon);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";export default class Import extends Component{constructor(){super(),this.registerAttribute("src")}attributeChangedCallback(t,e,r){"src"===t&&e!==r&&this.render(!0)}async render(t){const e=this.src;e&&await super.render(t)&&(this.innerHTML=await(await fetch(e)).text(),this.querySelectorAll("script").forEach((t=>{const e=document.createElement("script");t.getAttribute("type")&&(e.type=t.getAttribute("type")),t.getAttribute("src")&&(e.src=t.getAttribute("src")),t.textContent&&(e.textContent=t.textContent),t.parentElement.replaceChild(e,t)})))}get shadowStyles(){return"\n :host {\n display: inline;\n }\n "}static get renderOnAttributes(){retur.src}}window.customElements.define("k-import",Import);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import{isInView}from"../utils/element.js";export default class LazyComponent extends Component{constructor(e){super(e),new IntersectionObserver((([e])=>{e.intersectionRatio>0&&!this.rendered?this.inViewCallback():this.outOfViewCallback()})).observe(this),this.registerAttribute("unrender",!1)}async connectedCallback(){await this.renderSkelton(),await isInView(this)&&await this.inViewCallback()}async inViewCallback(){await this.render()}async outOfViewCallback(){this.unrender&&await this.renderSkelton()}async renderSkelton(){this.shadowRoot.innerHTML=`<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`,this.rendered=!1}get skeletonTemplate(){return'<div style="height: var(--skeleton_height, 1rem)"></div>'}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";export default class ReactiveComponent extends Component{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";export default class ReactiveComponent extends LazyComponent{attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),this.constructor.renderOnChange.includes(e)&&this.render(!0)}static renderOnChange=[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import drag from"../utils/drag.js";const startSize=Symbol("startSize"),dragStartHandler=Symbol("dragStartHandler"),dragEndHandler=Symbol("dragEndHandler"),dragSideHandler=Symbol("dragSideHandler"),dragBottomHandler=Symbol("dragBottomHandler"),dragCornerHandler=Symbol("dragCornerHandler"),cleanupFuncs=Symbol("cleanupFuncs");export default class Resize extends Component{constructor(){super(),this[startSize]={width:0,height:0},this[dragStartHandler]=({element:n})=>{const{width:e,height:t}=this.getBoundingClientRect();this[startSize].width=e,this[startSize].height=t,this.resizing=n.id},this[dragEndHandler]=()=>{this.resizing=""},this[dragSideHandler]=({x:n})=>{this.style.width=this[startSize].width+n+"px"},this[dragBottomHandler]=({y:n})=>{this.style.height=this[startSize].height+n+"px"},this[dragCornerHandler]=({x:n,y:e})=>{this.style.width=this[startSize].width+n+"px",this.style.height=this[startSize].height+e+"px"},this[cleanupFuncs]=[],this.registerAttribute("resizing","")}async render(n){return!!await super.render(n)&&(this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("side"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragSideHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("bottom"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragBottomHandler],preventScroll:!0})),this[cleanupFuncs].push(drag({element:this.shadowRoot.getElementById("corner"),startCallback:this[dragStartHandler],endCallback:this[dragEndHandler],callback:this[dragCornerHandler],preventScroll:!0})),!0)}disconnectedCallback(){super.disconnectedCallback(),this[cleanupFuncs].forEach((n=>n()))}get shadowTemplate(){return`\n <div id="main">\n ${super.shadowTemplate}\n </div>\n <div id="side" class="handle">\n <svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" /></svg>\n </div>\n <div id="bottom" class="handle">\n <svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" /></svg>\n </div>\n <div id="corner" class="handle">\n <svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" /></svg>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n --handle_size: 1rem;\n\n display: grid;\n grid-template-columns: 1fr var(--handle_size);\n grid-template-rows: 1fr var(--handle_size);\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n min-width: 10rem;\n max-width: 100%;\n min-height: 10rem;\n max-height: 100%;\n }\n :host([dimention="height"]){\n grid-template-columns: 1fr;\n }\n :host([dimention="width"]){\n grid-template-rows: 1fr;\n }\n #main {\n grid-row: 1;\n grid-column: 1;\n overflow: auto;\n }\n #side {\n grid-row: 1;\n grid-column: 2;\n cursor: ew-resize;\n }\n #bottom {\n grid-row: 2;\n grid-column: 1;\n text-align: center;\n cursor: ns-resize;\n }\n #corner {\n grid-row: 2;\n grid-column: 2;\n overflow: hidden;\n cursor: nwse-resize;\n }\n .handle {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .handle svg {\n transform: scale(0.5);\n }\n #bottom svg {\n height: var(--handle_size);\n }\n #side svg {\n width: var(--handle_size);\n }\n #corner svg {\n width: var(--handle_size);\n height: var(--handle_size);\n }\n :host(:not([resizing=""])) #main {\n pointer-events: none;\n }\n :host([resizing="side"]) #side,\n :host([resizing="corner"]) #side,\n :host([resizing="corner"]) #corner,\n :host([resizing="corner"]) #bottom,\n :host([resizing="bottom"]) #bottom {\n background-color: var(--c_highlight);\n }\n :host([dimention="height"]) #side,\n :host([dimention="height"]) #corner,\n :host([dimention="width"]) #bottom,\n :host([dimention="width"]) #corner {\n display: none;\n }\n `}}window.customElements.define("k-resize",Resize);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch("/search.json")).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n <div id="wrapper">\n <input\n id="input"\n placeholder="Search"\n type="search"\n />\n <div id="results"></div>\n </div>\n '}get shadowStyles(){return'\n :host {\n display: inline-block;\n align-self: center;\n }\n #wrapper {\n position: relative;\n }\n #input {\n width: 100%;\n margin: 0;\n }\n #results {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n max-height: 20rem;\n background-color: var(--c_bg);\n color: var(--tc);\n box-shadow: var(--drop_shadow);\n }\n :host([opened="true"]) #results {\n display: block;\n }\n #results a {\n display: block;\n padding: var(--spacer_h);\n text-decoration: none;\n border-bottom: 1px solid var(--c_border);\n border-radius: 0;\n }\n #results a:last-child {\n border-bottom: 0;\n }\n '}}window.customElements.define("k-search",Search);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";import"./Icon.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class ShowMore extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerProp("_toggleClickHandler",(()=>this.toggle()))}async render(n){await super.render(n),onEvent(this.shadowRoot.getElementById("toggle"),"click",this._toggleClickHandler)}more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened?this.less():this.more()}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="content">\n ${super.shadowTemplate}\n </div>\n <button\n id="toggle"\n class="no-btn"\n >\n <span id="more">\n <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>\n </span>\n <span id="less">\n <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>\n </span>\n </button>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n --closed_height: 7rem;\n \n display: block;\n }\n :host(:not([opened])) #content{\n height: var(--closed_height);\n overflow-y: hidden;\n }\n :host(:not([opened])) #content {\n margin-bottom: calc(var(--closed_height) * -0.9);\n }\n :host(:not([opened])) #toggle {\n padding-top: calc(var(--closed_height) - 2rem);\n background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);\n }\n #toggle {\n width: 100%;\n padding: var(--spacer_h);\n text-align: center;\n background: var(--c_bg);\n }\n :host([opened]) #more,\n :host(:not([opened])) #less {\n display: none;\n }\n `}}window.customElements.define("k-show-more",ShowMore);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import LazyComponent from"./LazyComponent.js";import"./Icon.js";import"./FocusCapture.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export class SideMenu extends LazyComponent{constructor(){super(),this.registerAttribute("opened",!1),this.registerAttribute("overlayClose",!0),this.registerProps({_overlayClick:()=>{this.overlayClose&&this.close()}})}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("overlay"),"click",this._overlayClick)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===n&&dispatchEvent(this,"true"===t?"change open":"change close")}render(n){super.render(n),onEvent(this.shadowRoot.getElementById("overlay"),"click",this._overlayClick)}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),dispatchEvent(this,"toggle")}get shadowTemplate(){return`\n <k-focus-capture>\n <div id="container">\n <button id="overlay" class="no-btn">\n <k-icon id="overlay-x" name="close"></k-icon>\n </button>\n <div id="menu">\n ${super.shadowTemplate}\n </div>\n </div>\n </k-focus-capture>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n --bg: var(--c_bg);\n --width: 20rem;\n\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: 100%;\n height: 100vh;\n z-index: 100;\n pointer-events: none;\n }\n :host([opened]) {\n pointer-events: auto;\n }\n k-focus-capture {\n width: 100%;\n height: 100%;\n }\n #container {\n position: relative;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity var(--animation_ms, 256ms);\n }\n :host([opened]) #container {\n opacity: 1;\n }\n #overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n background: var(--overlay, rgba(0, 0, 0, 0.5));\n }\n #overlay-x {\n position: absolute;\n top: var(--spacer_h);\n right: var(--spacer_h);\n font-size: 1.75rem;\n cursor: pointer;\n color: var(--tc_light);\n }\n :host([overlay-close="false"]) #overlay-x {\n display: none;\n }\n :host([overlay-close="false"]) #overlay {\n cursor: default;\n }\n #menu {\n position: absolute;\n width: var(--width);\n max-width: calc(100vw - 6rem);\n height: 100vh;\n overflow-y: auto;\n left: calc(var(--width) * -1);\n top: 0;\n background: var(--bg);\n transition: left var(--animation_ms, 256ms);\n padding: var(--menu_padding, var(--spacer))\n }\n :host([opened]) #menu {\n left: 0;\n }\n :host([side="right"]) #menu {\n left: auto;\n transition: right var(--animation_ms, 256ms);\n right: calc(var(--width) * -1);\n }\n :host([opened][side="right"]) #menu {\n right: 0;\n }\n :host([side="right"]) #overlay-x {\n right: auto;\n left: var(--spacer_h);\n }\n `}static get observedAttributes(){return["opened",...super.observedAttributes]}}window.customElements.define("k-side-menu",SideMenu);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import drag from"../utils/drag.js";import{dispatchEvent}from"../utils/element.js";const dragStartWidth=Symbol(),dragStartCallback=Symbol(),dragEndCallback=Symbol(),dragCallback=Symbol(),dragCleanup=Symbol();export default class Split extends Component{constructor(t,e){super(),this[dragStartWidth]=0,this[dragStartCallback]=()=>{this.resizing=!0,this[dragStartWidth]=Math.round(this.shadowRoot.getElementById("left").getBoundingClientRect().width),dispatchEvent(this,"resizestart",{startSize:this[dragStartWidth]})},this[dragCallback]=({x:t})=>{const e=`${this[dragStartWidth]+t}px`;this.setSize(e),dispatchEvent(this,"resize",{size:e})},this[dragEndCallback]=({x:t})=>{this.resizing=!1;const e=`${this[dragStartWidth]+t}px`;this.setSize(e),dispatchEvent(this,"resizeend",{size:e})},this[dragCleanup]=()=>{},this.registerAttribute("resizing",!1)}async connectedCallback(){super.connectedCallback(),this[dragCleanup]=drag({element:this.shadowRoot.getElementById("divider-handle"),callback:this[dragCallback],startCallback:this[dragStartCallback],endCallback:this[dragEndCallback]})}disconnectedCallback(){super.disconnectedCallback(),this[dragCleanup]()}setSize(t){this.style.setProperty("--left_width",t)}get shadowTemplate(){return`\n <div\n id="left"\n class="pane"\n >\n ${super.shadowTemplate}\n </div>\n <div id="divider-handle">\n <div id="divider-border"></div>\n </div>\n <div\n id="right"\n class="pane"\n >\n <slot name="right"></slot>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n --left_width: calc( (100% - var(--handle_width)) / 2);\n --handle_width: 0.5rem;\n --min_pane_width: 6rem;\n\n height: 100%;\n display: flex;\n align-items: stretch;\n flex: 1 1 auto;\n overflow: hidden;\n }\n .pane, #divider-handle {\n display: inline-block;\n }\n .pane {\n min-width: var(--min_pane_width);\n max-width: calc(100% - var(--min_pane_width));\n max-height: 100%;\n overflow: hidden;\n }\n #left {\n flex: 0 0 var(--left_width);\n }\n #divider-handle {\n display: flex;\n justify-content: center;\n width: var(--handle_width);\n cursor: ew-resize;\n }\n :host([resizing]) #divider-handle {\n background-color: var(--tc_primary);\n }\n :host([resizing]) .pane {\n pointer-events: none;\n user-select: none;\n }\n #divider-border {\n width: 1px;\n height: 100%;\n border-left: 1px solid var(--c_border);\n }\n #right {\n flex: 1 1;\n }\n \n `}}window.customElements.define("k-split",Split);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n <button id="button">\n ${super.shadowTemplate}\n </button>\n `}get shadowStyles(){return"\n :host {\n margin-bottom: -1px;\n }\n #button {\n padding: var(--spacer_h);\n background-color: transparent;\n border: none;\n cursor: inherit;\n box-shadow: none;\n color: inherit;\n }\n :host(:not([active])) #button {\n cursor: pointer;\n }\n :host([active]){\n border-bottom: 2px solid var(--c_primary);\n margin-bottom: -1px;\n }\n :host([active]) #button {\n color: var(--tc_primary);\n }\n "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n height: 100%;\n max-height: 100%;\n flex: 1 1 auto;\n overflow: hidden;\n }\n :host([active]) {\n display: block;\n }\n :host(:not([active])) {\n display: none;\n }\n `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="tabs">\n <slot name="tabs"></slot>\n </div>\n <div id="contents">\n ${super.shadowTemplate}\n </div>\n </div>\n \n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n overflow: hidden;\n }\n #wrapper {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n height: 100%;\n overflow: hidden;\n }\n #tabs {\n display: flex;\n border-bottom: 1px solid var(--c_border);\n padding: 0;\n margin-top: calc(0 - var(--spacer));\n align-items: flex-start;\n }\n #contents {\n display: flex;\n flex-direction: column;\n flex: 1;\n max-height: 100%;\n overflow: hidden\n }\n `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n flex: 1 1 auto;\n height: 1px;\n }\n `}}window.customElements.define("k-tab-spacer",TabSpacer);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import{onEvent,dispatchEvent}from"../utils/element.js";const storageWatcher=Symbol("storageWatcher"),clickHandler=Symbol("clickHandler");export default class ThemeSwitcher extends Component{constructor(){super(),this[storageWatcher]=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()},this[clickHandler]=()=>{ThemeSwitcher.setTheme("light"===ThemeSwitcher.getCurrentTheme()?"dark":"light")},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)}get shadowTemplate(){return'\n <button\n id="toggle"\n class="no-btn"\n >\n <k-icon\n id="lightMode"\n name="light-mode"\n ></k-icon>\n <k-icon\n id="darkMode"\n name="dark-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 :host([current-theme="dark"]) #darkMode,\n :host([current-theme="light"]) #lightMode {\n display: none;\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||(e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),e}}ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),window.customElements.define("k-theme-switcher",ThemeSwitcher);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends Component{constructor(t){super(),this.registerAttribute("timestamp",0),t&&(this.timestamp=t)}attributeChangedCallback(t,e,m){"timestamp"==t&&(this.innerHTML=m?formatTimestamp(m,"en-US"):"")}static observedAttributes=["timestamp"]}window.customElements.define("k-timestamp",Timestamp);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Component from"./Component.js";import{escapeHTML,unescapeHTML}from"../utils/string.js";import"./Split.js";import"./Tabs.js";import"./CodeEditor.js";const changeHandler=Symbol();export default class WebSnippetEditor extends Component{constructor(){super(),this[changeHandler]=()=>{this.renderResults()},this.registerAttributes({useKempo:!1,showHtml:!0,showCss:!0,showJs:!0,scripts:""})}async render(){await super.render();const t=this.querySelector('pre[for="html"]'),e=this.shadowRoot.getElementById("html");e.addEventListener("change",this[changeHandler]),e.value=escapeHTML(t?t.textContent:"<div>\n \n</div>");const n=this.querySelector('pre[for="css"]'),s=this.shadowRoot.getElementById("css");s.addEventListener("change",this[changeHandler]),s.value=n?n.textContent:"div {\n \n}";const o=this.querySelector('pre[for="js"]'),a=this.shadowRoot.getElementById("js");a.addEventListener("change",this[changeHandler]),a.value=o?o.textContent:"",this.renderResults()}renderResults(){const t=this.shadowRoot.getElementById("html").value,e=this.shadowRoot.getElementById("css").value,n=this.shadowRoot.getElementById("js").value,s=this.shadowRoot.getElementById("results");s.innerHTML="";const o=document.createElement("iframe");o.frameBorder="0",s.appendChild(o);const a=o.contentDocument||o.contentWindow.document;a.body.innerHTML=`\n ${this.useKempo?'<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />':""}\n <style>\n body, html {\n background-color: transparent;\n }\n body {\n overflow-y: auto;\n padding: var(--spacer_q, 4px);\n }\n ${e}\n </style>\n ${t}\n `,this.useKempo&&this.scripts&&this.scripts.split(",").forEach((t=>{const e=document.createElement("script");e.type="module",e.src=t,a.head.appendChild(e)}));const r=document.createElement("script");r.textContent=n,a.head.appendChild(r)}get shadowTemplate(){return`\n <k-split id="split">\n <k-tabs class="ml">\n ${this.showHtml?'<k-tab for="html">HTML</k-tab>':""}\n ${this.showCss?'<k-tab for="css">CSS</k-tab>':""}\n ${this.showJs?'<k-tab for="js">JS</k-tab>':""}\n <k-tab-content name="html">\n <k-code-editor\n id="html"\n language="xml"\n class="my"\n ></k-code-editor>\n </k-tab-content>\n <k-tab-content name="css">\n <k-code-editor\n id="css"\n language="css"\n class="my"\n ></k-code-editor>\n </k-tab-content>\n <k-tab-content name="js">\n <k-code-editor\n id="js"\n language="js"\n class="my"\n ></k-code-editor>\n </k-tab-content>\n </k-tabs>\n <div\n id="results"\n slot="right"\n ></div>\n </k-split>\n `}get shadowStyles(){return"\n :host {\n --min-height: auto;\n --height: auto;\n --max-height: auto;\n display: block;\n }\n k-tab-content {\n min-height: var(--min-height);\n height: var(--height);\n max-height: var(--max-height);\n }\n k-code-editor {\n max-height: calc(100% - (2 * var(--spacer)));\n }\n #results,\n iframe {\n width: 100%;\n height: 100%;\n background-color: transparent;\n }\n "}}window.customElements.define("k-web-snippet-editor",WebSnippetEditor);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M28.25 38V10H36v28ZM12 38V10h7.75v28Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M16 37.85v-28l22 14Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.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 Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import WebSnippetEditor from"./components/WebSnippetEditor.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 string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* Reset*/*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--spacer_h) var(--spacer);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--spacer_h) var(--spacer);margin-bottom:var(--spacer);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_border_width:2px}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#f0f0f0;--btn_bg__hover:#e9e9e9;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);--link_decoration:underline;--input_border_width:2px}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}@import './kempo-styles.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const components={"k-card":"Card","k-code-editor":"CodeEditor","k-dialog":"Dialog","k-icon":"Icon","k-import":"Import","k-resize":"Resize","k-search":"Search","k-show-more":"ShowMore","k-side-menu":"SideMenu","k-split":"Split","k-tabs":"Tabs","k-web-snippet-editor":"WebSnippetEditor"},lookFor=new Set(Object.keys(components));window.kempo=Object.assign({},{pathToRoot:"./",pathToKempoFromRoot:"./kempo/",pathToIconsFromRoot:"./kempo/icons/",autoLoadComponents:()=>{lookFor.forEach((async e=>{if(document.querySelector(e)){const o=`${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[e]}.js`;console.log(o),import(o),lookFor.delete(e)}}))},_darkModeQuery:window.matchMedia("(prefers-color-scheme: dark)"),_theme:"auto",_themeListener:e=>{"auto"===window.kempo._theme&&document.documentElement.setAttribute("theme",e.matches?"dark":"light")},setTheme:e=>{window.kempo._theme=e,"auto"===window.kempo._theme?document.documentElement.setAttribute("theme",window.kempo._darkModeQuery.matches?"dark":"light"):document.documentElement.setAttribute("theme",e)}},window.kempo||{}),window.kempo.autoLoadComponents(),window.kempo._darkModeQuery.addEventListener("change",window.kempo._themeListener),window.kempo.setTheme(document.documentElement.getAttribute("theme")||"auto");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const args={};let win={};"undefined"!=typeof window?win=window:"undefined"!=typeof global&&(win=global),win.log=(...e)=>{args.debug&&console.log(...e)};export default(e={d:"debug"})=>{let s="",t=[];const n=()=>{s&&(0===t.length?args[s]=!0:1===t.length?args[s]=t[0]:args[s]=t)};for(let g=2;g<process.argv.length;g++){const o=process.argv[g];o.startsWith("-")?(n(),o.startsWith("--")?s=o.slice(2):(s=o.slice(1),e[s]&&(s=e[s])),t=[]):t.push(o)}return n(),args};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const saveCookie=(e,o,t=43200,i="/")=>{const n=new Date(Date.now()+60*t*1e3);document.cookie=`${e}=${o};expires=${n.toUTCString()};path=${i}`},getCookie=e=>{const o=document.cookie.split(";").map((e=>e.trim().split("="))),t=o.find((o=>o[0]===e));return t?t[1]:null},deleteCookie=e=>{document.cookie=`${e}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`};export{saveCookie,getCookie,deleteCookie};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout((()=>{e.apply(this,o)}),t)}}export default debounce;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default(e={})=>{let t,o,n;const{element:s=(()=>{}),callback:a=(()=>{}),startCallback:v=(()=>{}),moveCallback:i=(()=>{}),endCallback:r=(()=>{}),preventScroll:d=!1}=e,u=s=>{d&&s.preventDefault(),clearTimeout(n);const v=s.pageX||s.touches[0].pageX,r=s.pageY||s.touches[0].pageY,u={x:v-t,y:r-o,...e};a(u),i(u)},c=({pageX:s,pageY:v})=>{clearTimeout(n);const i={x:s-t,y:v-o,...e};a(i),r(i),m()},p=s=>{clearTimeout(n),t=s.pageX||s.touches[0].pageX,o=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};v(a),window.addEventListener("mousemove",u,{passive:!d}),window.addEventListener("mouseup",c,{passive:!d}),window.addEventListener("touchmove",u,{passive:!d}),window.addEventListener("touchend",c,{passive:!d})},m=()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c)};return s.addEventListener("mousedown",p,{passive:!d}),s.addEventListener("touchstart",p,{passive:!d}),()=>{s.removeEventListener("mousedown",p),m()}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import waitFrames from"./waitFrames.js";export const onEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.addEventListener(e,n)})):t instanceof NodeList||t instanceof Array?t.forEach((t=>onEvent(t,e,n))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>onEvent(t,e,n)))};export const offEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.removeEventListener(e,n)})):t instanceof NodeList||t instanceof Array?t.forEach((t=>offEvent(t,e,n))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>offEvent(t,e,n)))};export const dispatchEvent=(t,e,n,o=document)=>{t instanceof EventTarget?e.toLowerCase().split(" ").forEach((e=>{t.dispatchEvent(new CustomEvent(e,{detail:n}))})):t instanceof NodeList||t instanceof Array?t.forEach((t=>dispatchEvent(t,e,handler))):"string"==typeof t&&o.querySelectorAll(t).forEach((t=>dispatchEvent(t,e,handler)))};export const isInView=async t=>{await waitFrames(2);const e=t.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,o=window.innerWidth||document.documentElement.clientWidth;if(e.bottom<0||e.top>n||e.right<0||e.left>o)return!1;for(;t;){const e=getComputedStyle(t);if("none"===e.display||"hidden"===e.visibility)return!1;t=t.parentElement}return!0};export const firstFocusable=t=>t.querySelector('a[href]:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])');export const setProp=(t,e,n,o=document)=>{t instanceof HTMLElement?t[e]=n:t instanceof NodeList||t instanceof Array?[...t].forEach((t=>dispatchEvent(t,e,n))):"string"==typeof t&&dispatchEvent(o.querySelectorAll(t),e,n)};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default(i,t)=>Intl.DateTimeFormat(t||navigator.language,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",millisecond:"3-digit"}).format(new Date(parseInt(i)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const fuzzyMatch=(t,r)=>{const e=((t,r)=>{const e=t.length,n=r.length,a=Array.from({length:e+1},(()=>Array(n+1).fill(0)));for(let h=0;h<=e;h++)for(let e=0;e<=n;e++)a[h][e]=0===h?e:0===e?h:Math.min(a[h-1][e-1]+(t.charAt(h-1)===r.charAt(e-1)?0:1),a[h][e-1]+1,a[h-1][e]+1);return a[e][n]})(t.toLowerCase(),r.toLowerCase());if(0===e)return 10;const n=Math.max(0,10-e/3),a=Math.min((t.length-e)/t.length,1);return Math.round(5*n+5*a)};export const fuzzyMatchArray=(t,r)=>{const e=t.map((t=>fuzzyMatch(t,r))).filter((t=>0!==t));if(0===e.length)return 0;return e.reduce(((t,r)=>t+r),0)/e.length};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default()=>window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default(e,n="stylesheet")=>new Promise(((o,t)=>{const r=document.createElement("link");r.rel=n,r.href=e,r.onload=o,r.onerror=t,document.head.appendChild(r)}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default(e,o="module")=>new Promise(((t,d)=>{const n=document.createElement("script");n.type=o,n.src=e,n.onload=t,n.onerror=d,document.head.appendChild(n)}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{typeOf,isType}from"./type.js";export const toJson=e=>JSON.stringify(e,((t,n)=>""!==t&&n===e?"<<Circular Reference>>":"undefined"!=typeof Element&&n instanceof Element?n.outerHTML:"function"===typeOf(n)?`<<Function ${t}>>`:n));export const flattenObject=(e,t=100,n=0,o=[])=>{const r=n+1;return null===e?{}:Object.keys(e).reduce(((n,c)=>{const s=e[c],l=[...o,c].join(".");return"undefined"!==typeOf(Element)&&s instanceof Element?{...n,[l]:s.outerHTML}:null===s?{...n,[l]:null}:"object"==typeof s?t<=r?{...n,[l]:"<<Max Depth Reached>>"}:{...n,...flattenObject(s,t,r,[...o,c])}:{...n,[l]:s}}),{})};export const flattenedObjects=(...e)=>e.map((e=>flattenObject(e)));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach((e=>{o.push(`${e} = ${objectSummary(n[e])}`)})),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map((e=>clone(e))):"object"===t?Object.keys(e).reduce(((t,n)=>({...t,[n]:clone(e[n])})),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const pruneVar=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?pruneObject(e):[e,!1],pruneObject=e=>{const t={};return Object.keys(e).forEach((n=>{const[o,r]=pruneVar(e[n]);r||(t[n]=o)})),[t,0===Object.keys(t).length]};export const prune=e=>pruneObject(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map((e=>Object.keys(e))).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map((t=>1!==new Set(e.map((e=>e[t]))).size?t:null)).filter((e=>null!==e));export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every(((e,t)=>e===o[t]))||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const camelToDash=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();export const dashToCamel=e=>e.replace(/-([a-z])/g,((e,t)=>t.toUpperCase()));export const isCamelCase=e=>/[a-z][A-Z]/.test(e);export const getCase=e=>isCamelCase(e)?{camel:e,dash:camelToDash(e)}:{camel:dashToCamel(e),dash:e};export const escapeHTML=e=>e.replace(/[&<>"'/]/g,(e=>{switch(e){case"&":return"&";case"<":return"<";case">":return">";case'"':return""";case"'":return"'";case"/":return"/";default:return e}}));export const unescapeHTML=e=>e.replace(/&|<|>|"|'|//g,(e=>{switch(e){case"&":return"&";case"<":return"<";case">":return">";case""":return'"';case"'":return"'";case"/":return"/";default:return e}}));export const trim=(e,t)=>e.replace(new RegExp(`^[${t}]+|[${t}]+$`,"g"),"");export const compoundKey=e=>trim(e.join("."),".");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default t=>{if("function"==typeof t)return t;if("string"==typeof t){const n=t.split(".");let o=window;for(const t of n)if(o=o[t],void 0===o)break;if("function"==typeof o)return o;try{return new Function(t)}catch(t){console.error("Failed to create function from string:",t)}}return()=>t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const typeOf=e=>null===e?"null":e instanceof Array?"array":"undefined"!=typeof Element&&e instanceof Element?"element":typeof e;export const isType=(e,n)=>typeOf(e)===n;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default(e=1)=>new Promise((t=>{let n=0;requestAnimationFrame((function i(){n++,n>=e?t():requestAnimationFrame(i)}))}));
|