kempo 2.9.2 → 2.10.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/dist/components/Accordion.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/DirectoryViewer.js +1 -1
- package/dist/components/FocusCapture.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Search.js +1 -1
- package/dist/components/Table.js +1 -1
- package/dist/components/Timestamp.js +1 -1
- package/dist/components/Toggle.js +1 -1
- package/dist/components/tableControls/DeleteSelected.js +1 -1
- package/dist/components/tableControls/Edit.js +1 -0
- package/dist/components/tableControls/Filters.js +1 -0
- package/dist/components/tableControls/HiddenCount.js +1 -0
- package/dist/components/tableControls/Hide.js +1 -0
- package/dist/components/tableControls/PageSelect.js +1 -1
- package/dist/components/tableControls/PageSize.js +1 -1
- package/dist/components/tableControls/ShowAll.js +1 -0
- package/dist/index.js +1 -1
- package/dist/kempo-styles.css +1 -1
- package/dist/kempo-vars.css +1 -1
- package/dist/utils/formatTimestamp.js +1 -1
- package/docs/components/_template.html +9 -0
- package/docs/components/accordion.html +52 -12
- package/docs/components/card.html +68 -8
- package/docs/components/component.html +6 -0
- package/docs/components/content-slider.html +8 -0
- package/docs/components/dialog.html +145 -5
- package/docs/components/directory-viewer.html +51 -40
- package/docs/components/focus-capture.html +68 -0
- package/docs/components/icon.html +76 -5
- package/docs/components/import.html +47 -0
- package/docs/components/lazy-component.html +45 -15
- package/docs/components/reactive-component.html +69 -0
- package/docs/components/reactive-lazy-component.html +69 -0
- package/docs/components/resize.html +52 -3
- package/docs/components/search.html +102 -0
- package/docs/components/show-more.html +54 -5
- package/docs/components/{sidemenu.html → side-menu.html} +56 -3
- package/docs/components/split.html +57 -16
- package/docs/components/table.html +90 -189
- package/docs/components/tableControls.html +91 -0
- package/docs/components/tableCustomFields.html +112 -0
- package/docs/components/tablePagination.html +92 -0
- package/docs/components/tableRecordEditing.html +144 -0
- package/docs/components/tableRecordFiltering.html +82 -0
- package/docs/components/tableRecordHiding.html +84 -0
- package/docs/components/tableRecordSelection.html +86 -0
- package/docs/components/tableRowControls.html +103 -0
- package/docs/components/tabs.html +72 -4
- package/docs/components/tags.html +94 -0
- package/docs/components/theme-switcher.html +74 -0
- package/docs/components/timestamp.html +86 -0
- package/docs/components/toggle.html +37 -34
- package/docs/icons/check.svg +1 -0
- package/docs/icons/hide.svg +1 -0
- package/docs/icons/show.svg +1 -0
- package/docs/index.html +5 -0
- package/docs/kempo/components/Accordion.js +1 -1
- package/docs/kempo/components/Dialog.js +1 -1
- package/docs/kempo/components/DirectoryViewer.js +1 -1
- package/docs/kempo/components/FocusCapture.js +1 -1
- package/docs/kempo/components/Icon.js +1 -1
- package/docs/kempo/components/Search.js +1 -1
- package/docs/kempo/components/Table.js +1 -1
- package/docs/kempo/components/Timestamp.js +1 -1
- package/docs/kempo/components/Toggle.js +1 -1
- package/docs/kempo/components/tableControls/DeleteSelected.js +1 -1
- package/docs/kempo/components/tableControls/Edit.js +1 -0
- package/docs/kempo/components/tableControls/Filters.js +1 -0
- package/docs/kempo/components/tableControls/HiddenCount.js +1 -0
- package/docs/kempo/components/tableControls/Hide.js +1 -0
- package/docs/kempo/components/tableControls/PageSelect.js +1 -1
- package/docs/kempo/components/tableControls/PageSize.js +1 -1
- package/docs/kempo/components/tableControls/ShowAll.js +1 -0
- package/docs/kempo/index.js +1 -1
- package/docs/kempo/kempo-styles.css +1 -1
- package/docs/kempo/kempo-vars.css +1 -1
- package/docs/kempo/utils/formatTimestamp.js +1 -1
- package/docs/nav-1.inc.html +16 -2
- package/docs/nav.inc.html +10 -2
- package/docs/search.json +281 -23
- package/docs/styles/_template.html +6 -0
- package/docs/styles/borders-spacing.html +6 -0
- package/docs/styles/buttons.html +6 -0
- package/docs/styles/colors.html +6 -0
- package/docs/styles/displays-layouts.html +6 -0
- package/docs/styles/embed-1.html +6 -0
- package/docs/styles/inputs.html +6 -0
- package/docs/styles/tables.html +6 -0
- package/docs/styles/typography.html +6 -0
- package/docs/{components/stacks.html → utils/_template.html} +11 -30
- package/docs/utils/cli.html +84 -0
- package/docs/utils/cookie.html +87 -0
- package/docs/utils/debounce.html +61 -0
- package/docs/utils/drag.html +85 -0
- package/docs/utils/element.html +124 -0
- package/docs/utils/format-timestamp.html +64 -0
- package/docs/utils/fuzzy-match.html +60 -0
- package/icons/check.svg +1 -0
- package/icons/hide.svg +1 -0
- package/icons/show.svg +1 -0
- package/package.json +1 -1
- package/src/components/Accordion.js +0 -1
- package/src/components/Dialog.js +15 -6
- package/src/components/DirectoryViewer.js +21 -92
- package/src/components/FocusCapture.js +2 -1
- package/src/components/Icon.js +3 -1
- package/src/components/Search.js +4 -1
- package/src/components/Table.js +469 -139
- package/src/components/Timestamp.js +7 -4
- package/src/components/Toggle.js +3 -0
- package/src/components/tableControls/DeleteSelected.js +36 -22
- package/src/components/tableControls/Edit.js +88 -0
- package/src/components/tableControls/Filters.js +128 -0
- package/src/components/tableControls/HiddenCount.js +42 -0
- package/src/components/tableControls/Hide.js +43 -0
- package/src/components/tableControls/PageSelect.js +54 -30
- package/src/components/tableControls/PageSize.js +33 -16
- package/src/components/tableControls/ShowAll.js +40 -0
- package/src/kempo-styles.css +7 -0
- package/src/kempo-vars.css +2 -0
- package/src/utils/formatTimestamp.js +26 -10
- package/docs/table.html +0 -0
- package/src/components/Stacks.js +0 -79
- package/src/utils/files.js +0 -15
|
@@ -6,21 +6,89 @@
|
|
|
6
6
|
<title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">Tabs</h1>
|
|
12
19
|
<main>
|
|
13
|
-
<
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#tabSpacers">Tab Spacers</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#attributes">Attributes</a><br />
|
|
31
|
+
<a href="#properties">Properties</a><br />
|
|
32
|
+
<a href="#methods">Methods</a><br />
|
|
33
|
+
</div>
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
|
+
<p>Create tabs using the <code>k-tabs</code> component. Add tabs using the <code>k-tab</code> component and tab contents using the <code>k-tab-content</code> component. Use the <code>for</code> attribute on the <code>k-tab</code> component to link it to the corresponding <code>k-tab-content</code> component.</p>
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
14
39
|
<k-tabs>
|
|
15
40
|
<k-tab for="html">HTML</k-tab>
|
|
16
|
-
<k-tab for="js">
|
|
41
|
+
<k-tab for="js">JavaScript</k-tab>
|
|
17
42
|
<k-tab-content name="html">
|
|
18
|
-
<p>HTML
|
|
43
|
+
<p>HTML Content</p>
|
|
19
44
|
</k-tab-content>
|
|
20
45
|
<k-tab-content name="js">
|
|
21
|
-
<p>
|
|
46
|
+
<p>JavaScript Content</p>
|
|
22
47
|
</k-tab-content>
|
|
23
48
|
</k-tabs>
|
|
49
|
+
|
|
50
|
+
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
51
|
+
<p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
|
|
52
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-spacer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>></span><br /> HTML Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>></span><br /> JavaScript Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
53
|
+
<k-tabs>
|
|
54
|
+
<k-tab for="html">HTML</k-tab>
|
|
55
|
+
<k-tab-spacer></k-tab-spacer>
|
|
56
|
+
<k-tab for="js">JavaScript</k-tab>
|
|
57
|
+
<k-tab-content name="html">
|
|
58
|
+
<p>HTML Content</p>
|
|
59
|
+
</k-tab-content>
|
|
60
|
+
<k-tab-content name="js">
|
|
61
|
+
<p>JavaScript Content</p>
|
|
62
|
+
</k-tab-content>
|
|
63
|
+
</k-tabs>
|
|
64
|
+
|
|
65
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
66
|
+
|
|
67
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
68
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
69
|
+
<h5>
|
|
70
|
+
<code>new Tabs()</code>
|
|
71
|
+
</h5>
|
|
72
|
+
|
|
73
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
74
|
+
<ul>
|
|
75
|
+
<li><a href="./component.html">Component</a></li>
|
|
76
|
+
</ul>
|
|
77
|
+
|
|
78
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
79
|
+
<h5><code>active<i>: string</i></code></h5>
|
|
80
|
+
<p>The name of the active tab.</p>
|
|
81
|
+
|
|
82
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
83
|
+
<h5><code>getTab(id)<i>: Tab</i></code></h5>
|
|
84
|
+
<p>Returns the tab with the specified id.</p>
|
|
85
|
+
<h5><code>getActiveTab()<i>: Tab</i></code></h5>
|
|
86
|
+
<p>Returns the currently active tab.</p>
|
|
87
|
+
<h5><code>getContent(id)<i>: TabContent</i></code></h5>
|
|
88
|
+
<p>Returns the tab content with the specified id.</p>
|
|
89
|
+
<h5><code>getActiveContent()<i>: TabContent</i></code></h5>
|
|
90
|
+
<p>Returns the currently active tab content.</p>
|
|
91
|
+
|
|
24
92
|
</main>
|
|
25
93
|
<div style="height:33vh"></div>
|
|
26
94
|
<script type="module" src="../kempo/components/Import.js"></script>
|
|
@@ -0,0 +1,94 @@
|
|
|
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>Tags - 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
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">Tags</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#allowedTags">Allowed Tags</a><br />
|
|
26
|
+
<a href="#disallowedTags">Disallowed Tags</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#requirements">Requirements</a><br />
|
|
31
|
+
<a href="#attributes">Attributes</a><br />
|
|
32
|
+
<a href="#properties">Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
</div>
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
<h3>Description</h3>
|
|
38
|
+
<p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./component.html">Component</a> class.</p>
|
|
39
|
+
|
|
40
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
41
|
+
<p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.</p>
|
|
42
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
43
|
+
<k-tags>
|
|
44
|
+
<label>Tags</label>
|
|
45
|
+
</k-tags>
|
|
46
|
+
|
|
47
|
+
<h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
|
|
48
|
+
<p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
|
|
49
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Allowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
50
|
+
<k-tags allowed-tags="tag1,tag2,tag3">
|
|
51
|
+
<label>Allowed Tags</label>
|
|
52
|
+
</k-tags>
|
|
53
|
+
|
|
54
|
+
<h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
|
|
55
|
+
<p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
|
|
56
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Disallowed Tags<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tags</span>></span></code></pre>
|
|
57
|
+
<k-tags disallowed-tags="tag1,tag2,tag3">
|
|
58
|
+
<label>Disallowed Tags</label>
|
|
59
|
+
</k-tags>
|
|
60
|
+
|
|
61
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
62
|
+
|
|
63
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
64
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
65
|
+
<h5>
|
|
66
|
+
<code>new Tags()</code>
|
|
67
|
+
</h5>
|
|
68
|
+
|
|
69
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
70
|
+
<ul>
|
|
71
|
+
<li><a href="./component.html">Component</a></li>
|
|
72
|
+
</ul>
|
|
73
|
+
|
|
74
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
75
|
+
<h5><code>value<i>: string</i></code></h5>
|
|
76
|
+
<p>A comma-separated list of tags.</p>
|
|
77
|
+
<h5><code>allowedTags<i>: string</i></code></h5>
|
|
78
|
+
<p>A comma-separated list of allowed tags. If specified, only these tags can be added.</p>
|
|
79
|
+
<h5><code>disallowedTags<i>: string</i></code></h5>
|
|
80
|
+
<p>A comma-separated list of disallowed tags. If specified, these tags cannot be added.</p>
|
|
81
|
+
|
|
82
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
83
|
+
<h5><code>addTag(tag)<i>: void</i></code></h5>
|
|
84
|
+
<p>Adds a tag to the list of tags.</p>
|
|
85
|
+
<h5><code>removeTag(tag)<i>: void</i></code></h5>
|
|
86
|
+
<p>Removes a tag from the list of tags.</p>
|
|
87
|
+
<h5><code>validateTags()<i>: string</i></code></h5>
|
|
88
|
+
<p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.</p>
|
|
89
|
+
|
|
90
|
+
</main>
|
|
91
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
92
|
+
<script type="module" src="../kempo/components/Tags.js"></script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
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>ThemeSwitcher - 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
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">ThemeSwitcher</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
|
|
26
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<a href="#constructor">Constructor</a><br />
|
|
28
|
+
<a href="#requirements">Requirements</a><br />
|
|
29
|
+
<a href="#attributes">Attributes</a><br />
|
|
30
|
+
<a href="#properties">Properties</a><br />
|
|
31
|
+
<a href="#methods">Methods</a><br />
|
|
32
|
+
<a href="#staticMethods">Static Methods</a><br />
|
|
33
|
+
</div>
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<h3>Description</h3>
|
|
37
|
+
<p>The <code>ThemeSwitcher</code> component allows users to switch between different themes. It extends the <a href="./component.html">Component</a> class.</p>
|
|
38
|
+
|
|
39
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
40
|
+
<p>Use the <code>ThemeSwitcher</code> component to allow users to switch between different themes. The component will automatically save the selected theme to local storage and apply it on page load.</p>
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
42
|
+
<k-theme-switcher></k-theme-switcher>
|
|
43
|
+
|
|
44
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
45
|
+
|
|
46
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
47
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
48
|
+
<h5>
|
|
49
|
+
<code>new ThemeSwitcher()</code>
|
|
50
|
+
</h5>
|
|
51
|
+
|
|
52
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
53
|
+
<ul>
|
|
54
|
+
<li><a href="./component.html">Component</a></li>
|
|
55
|
+
</ul>
|
|
56
|
+
|
|
57
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
58
|
+
<p>The <code>ThemeSwitcher</code> class does not introduce any new attributes beyond those provided by the <a href="./component.html">Component</a> class.</p>
|
|
59
|
+
|
|
60
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
61
|
+
<p>The <code>ThemeSwitcher</code> class does not introduce any new methods beyond those provided by the <a href="./component.html">Component</a> class.</p>
|
|
62
|
+
|
|
63
|
+
<h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
|
|
64
|
+
<h5><code>static setTheme(theme)<i>: void</i></code></h5>
|
|
65
|
+
<p>Sets the specified theme and saves it to local storage.</p>
|
|
66
|
+
|
|
67
|
+
<h5><code>static getCurrentTheme()<i>: string</i></code></h5>
|
|
68
|
+
<p>Gets the current theme from local storage or the document attribute.</p>
|
|
69
|
+
|
|
70
|
+
</main>
|
|
71
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
72
|
+
<script type="module" src="../kempo/components/ThemeSwitcher.js"></script>
|
|
73
|
+
</body>
|
|
74
|
+
</html>
|
|
@@ -0,0 +1,86 @@
|
|
|
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>Timestamp - 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
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">Timestamp</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#customFormat">Custom Format</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#attributes">Attributes</a><br />
|
|
31
|
+
<a href="#properties">Properties</a><br />
|
|
32
|
+
<a href="#methods">Methods</a><br />
|
|
33
|
+
</div>
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<h3>Description</h3>
|
|
37
|
+
<p>The <code>Timestamp</code> component displays a formatted timestamp. It extends the <a href="./component.html">Component</a> class.</p>
|
|
38
|
+
|
|
39
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
40
|
+
<p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp based on the provided locale or the user's current locale if no locale is provided.</p>
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
42
|
+
<k-timestamp timestamp="1633024800000"></k-timestamp>
|
|
43
|
+
|
|
44
|
+
<h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
|
|
45
|
+
<p>Use the <code>format</code> attribute to specify a custom format for the timestamp. The format should be a string like <code>YYYY-MM-DD hh:mm:ss:iiii</code>.</p>
|
|
46
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"YYYY-MM-DD hh:mm:ss"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-timestamp</span>></span></code></pre>
|
|
47
|
+
<k-timestamp timestamp="1633024800000" format="YYYY-MM-DD hh:mm:ss"></k-timestamp>
|
|
48
|
+
|
|
49
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
50
|
+
|
|
51
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
52
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
53
|
+
<h5>
|
|
54
|
+
<code>new Timestamp(timestamp, format, locale)</code>
|
|
55
|
+
</h5>
|
|
56
|
+
|
|
57
|
+
<h4>Parameters</h4>
|
|
58
|
+
<h5><code>timestamp<i>: number</i></code></h5>
|
|
59
|
+
<p>The timestamp to be formatted and displayed.</p>
|
|
60
|
+
<h5><code>format<i>: string</i></code></h5>
|
|
61
|
+
<p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
|
|
62
|
+
<h5><code>locale<i>: string</i></code></h5>
|
|
63
|
+
<p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
|
|
64
|
+
|
|
65
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
66
|
+
<ul>
|
|
67
|
+
<li><a href="./component.html">Component</a></li>
|
|
68
|
+
<li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
|
|
69
|
+
</ul>
|
|
70
|
+
|
|
71
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
72
|
+
<h5><code>timestamp<i>: number</i></code></h5>
|
|
73
|
+
<p>The timestamp to be formatted and displayed.</p>
|
|
74
|
+
<h5><code>format<i>: string</i></code></h5>
|
|
75
|
+
<p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
|
|
76
|
+
<h5><code>locale<i>: string</i></code></h5>
|
|
77
|
+
<p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
|
|
78
|
+
|
|
79
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
80
|
+
<p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the <a href="./component.html">Component</a> class.</p>
|
|
81
|
+
|
|
82
|
+
</main>
|
|
83
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
84
|
+
<script type="module" src="../kempo/components/Timestamp.js"></script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
@@ -6,34 +6,36 @@
|
|
|
6
6
|
<title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Icon from '../kempo/components/Icon.js';
|
|
11
|
+
import Search from '../kempo/components/Search.js';
|
|
12
|
+
Icon.pathToIcons = ['../icons'];
|
|
13
|
+
Search.searchDataUrl = '../search.json';
|
|
14
|
+
</script>
|
|
9
15
|
</head>
|
|
10
16
|
<body>
|
|
11
17
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
12
18
|
<h1 class="ta-center">Toggle</h1>
|
|
13
19
|
<main>
|
|
14
|
-
<details
|
|
15
|
-
class="b r mb"
|
|
16
|
-
>
|
|
20
|
+
<details class="b r mb">
|
|
17
21
|
<summary class="p">Table of Contents</summary>
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</li>
|
|
33
|
-
</ul>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#onByDefault">On By Default</a><br />
|
|
26
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
27
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
28
|
+
|
|
29
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
30
|
+
<a href="#constructor">Constructor</a><br />
|
|
31
|
+
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#attributes">Attributes</a><br />
|
|
33
|
+
<a href="#properties">Properties</a><br />
|
|
34
|
+
<a href="#methods">Methods</a><br />
|
|
35
|
+
</div>
|
|
34
36
|
</details>
|
|
35
37
|
|
|
36
|
-
<h3 id="basicUsage">Basic Usage</h3>
|
|
38
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
39
|
<div class="row -mx">
|
|
38
40
|
<div class="col m-span-12 px">
|
|
39
41
|
<k-card label="HTML">
|
|
@@ -47,7 +49,7 @@
|
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
49
51
|
|
|
50
|
-
<h3 id="onByDefault">On By Default</h3>
|
|
52
|
+
<h3 id="onByDefault"><a href="#onByDefault" class="no-link">On By Default</a></h3>
|
|
51
53
|
<div class="row -mx">
|
|
52
54
|
<div class="col m-span-12 px">
|
|
53
55
|
<k-card label="HTML">
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
</div>
|
|
62
64
|
</div>
|
|
63
65
|
|
|
64
|
-
<h3 id="customStyles">Custom Styles</h3>
|
|
66
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
65
67
|
<div class="row -mx">
|
|
66
68
|
<div class="col m-span-12 px">
|
|
67
69
|
<k-card label="HTML">
|
|
@@ -88,7 +90,7 @@
|
|
|
88
90
|
</div>
|
|
89
91
|
</div>
|
|
90
92
|
|
|
91
|
-
<h3 id="javascriptUsage">JavaScript Usage</h3>
|
|
93
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
|
|
92
94
|
<div class="row -mx">
|
|
93
95
|
<div class="col m-span-12 px">
|
|
94
96
|
<k-card label="HTML">
|
|
@@ -117,33 +119,34 @@
|
|
|
117
119
|
</div>
|
|
118
120
|
</div>
|
|
119
121
|
|
|
120
|
-
<h2 id="
|
|
122
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
121
123
|
|
|
122
|
-
<h3 id="constructor">Constructor</h3>
|
|
124
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
123
125
|
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
124
126
|
<h5>
|
|
125
127
|
<code>new Toggle()</code>
|
|
126
128
|
</h5>
|
|
127
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Toggle <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-keyword">const</span> myToggle = <span class="hljs-keyword">new</span> Toggle();<br /><span class="hljs-built_in">document</span>.body.appendChild(myToggle);</code></pre>
|
|
128
129
|
|
|
129
|
-
<h3 id="
|
|
130
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
131
|
+
<ul>
|
|
132
|
+
<li><a href="./component.html">Component</a></li>
|
|
133
|
+
</ul>
|
|
130
134
|
|
|
131
|
-
<
|
|
135
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
136
|
+
<h5><code>value<i>: boolean</i></code></h5>
|
|
132
137
|
<p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
|
|
133
|
-
<pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(myToggle.value); <span class="hljs-comment">// true or false</span></code></pre>
|
|
134
138
|
<p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
|
|
135
139
|
|
|
136
|
-
<h3 id="methods">Methods</h3>
|
|
137
|
-
<h5><code>on()
|
|
140
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
141
|
+
<h5><code>on()<i>: this</i></code></h5>
|
|
138
142
|
<p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
|
|
139
143
|
|
|
140
|
-
<h5><code>off()
|
|
144
|
+
<h5><code>off()<i>: this</i></code></h5>
|
|
141
145
|
<p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
|
|
142
146
|
|
|
143
|
-
<h5><code>toggle()
|
|
147
|
+
<h5><code>toggle()<i>: this</i></code></h5>
|
|
144
148
|
<p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
|
|
145
149
|
|
|
146
|
-
|
|
147
150
|
</main>
|
|
148
151
|
<div style="height:33vh"></div>
|
|
149
152
|
<script type="module" src="../kempo/components/Import.js"></script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
|
package/docs/index.html
CHANGED
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Kempo - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="./kempo/kempo-vars.css" /><link rel="stylesheet" href="./kempo/kempo-styles.css" />
|
|
8
|
+
<script type="module">
|
|
9
|
+
import Icon from './kempo/components/Icon.js';
|
|
10
|
+
Icon.pathToIcons = ['./icons'];
|
|
11
|
+
</script>
|
|
8
12
|
</head>
|
|
9
13
|
<body>
|
|
10
14
|
<k-import src="./nav.inc.html"></k-import>
|
|
@@ -12,5 +16,6 @@
|
|
|
12
16
|
|
|
13
17
|
</main>
|
|
14
18
|
<script type="module" src="./kempo/components/Import.js"></script>
|
|
19
|
+
|
|
15
20
|
</body>
|
|
16
21
|
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";
|
|
1
|
+
import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Accordion extends Component{constructor(){super(),this.unrender=!0}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const n=this.getPanel(e);if(n){n.active=!0,n.transitioning=!0,setTimeout((()=>{n.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),dispatchEvent(this,"openpanel",{panelName:e})}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout((()=>{t.transitioning=!1}),parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const n=this.getHeader(e);n&&(n.active=!1),dispatchEvent(this,"closepanel",{panelName:e})}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),dispatchEvent(this,"togglepanel",{panelName:e}))}get shadowStyles(){return'\n :host {\n display: block;\n border: 1px solid var(--c_border);\n border-radius: var(--radius);\n }\n ::slotted(k-accordion-header){\n border-top: 1px solid var(--c_border);\n }\n ::slotted(k-accordion-header[active="true"]) {\n border-bottom: 1px solid var(--c_border);\n }\n ::slotted(k-accordion-header:first-of-type) {\n border-top: 0;\n }\n ::slotted(k-accordion-header:last-of-type:not([active="true"])) {\n border-bottom: 0;\n }\n '}}window.customElements.define("k-accordion",Accordion);const clickHandler=Symbol();export class AccordionHeader extends Component{constructor(e="Show More",t=""){super(),this[clickHandler]=()=>{this.accordion.togglePanel(this.forPanel)},this.registerAttributes({forPanel:t,active:!1})}async render(e){return!!await super.render(e)&&(onEvent(this,"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[clickHandler])}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return"\n :host {\n display: block;\n padding: 1rem;\n cursor: pointer;\n }\n "}}window.customElements.define("k-accordion-header",AccordionHeader);export class AccordionPanel extends Component{constructor(e=""){super(),this.registerAttributes({name:e,active:!1,transitioning:!1})}get accordion(){return this.closest("k-accordion")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n interpolate-size: allow-keywords;\n height: 0;\n overflow: hidden;\n transition: height var(--animation_ms) ease-in-out;\n }\n :host([active="true"]) {\n height: max-content;\n }\n `}}window.customElements.define("k-accordion-panel",AccordionPanel);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:
|
|
1
|
+
import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n <k-focus-capture>\n <button id="overlay" aria-label="Close the Dialog"></button>\n <div id="wrapper">\n <div\n id="dialog"\n role="dialog"\n aria-modal="true"\n aria-labelledby="title"\n >\n <div\n id="header"\n class="${this._hasTitle()?"has-title":""}"\n >\n <div\n id="title"\n ><slot name="title"></slot></div>\n ${this.renderIf(this.closeBtn,'\n <button\n id="close"\n >\n <k-icon name="close"></k-icon>\n </button>\n ')}\n </div>\n <div id="body">\n ${super.shadowTemplate}\n </div>\n ${this.renderIf(this.cancelText||this.confirmText,`\n <div id="footer">\n ${this.renderIf(this.cancelText,`\n <button id="cancel" class="${this.cancelClasses}">\n ${this.cancelText}\n </button>\n `)}\n ${this.renderIf(this.confirmText,`\n <button id="confirm" class="${this.confirmClasses}">\n ${this.confirmText}\n </button>\n `)}\n </div>\n `)}\n </div>\n </div>\n </k-focus-capture>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: inline;\n height: 1px;\n width: 1px;\n position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n top: 0;\n left: 0;\n z-index: 100;\n }\n :host(:not([opened])){\n display: none;\n }\n #overlay {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: var(--c_overlay);\n z-index: 100;\n border: 0px solid transparent;\n box-shadow: 0 0 0 transparent;\n }\n #wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100%;\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 - 4rem));\n min-height: var(--min_height, 12rem);\n height: var(--height, fit-content);\n max-height: var(--max_height, calc(100vh - 4rem));\n background-color: var(--c_bg);\n box-shadow: var(--drop_shadow);\n border-radius: var(--radius);\n pointer-events: all;\n }\n #header {\n display: flex;\n align-items: center;\n }\n #header.has-title {\n border-bottom: 1px solid var(--c_border);\n }\n #title {\n flex: 1 1 auto;\n }\n #close {\n border: 0px;\n background: transparent;\n box-shadow: 0 0 0 transparent;\n color: var(--tc);\n }\n #close k-icon {\n pointer-events: none;\n }\n #body {\n flex: 1 1 auto;\n }\n #footer {\n display: flex;\n justify-content: flex-end;\n padding: var(--spacer_h);\n }\n `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n <h5 slot="title" class="pyh px m0">${t.title}</h5>\n <p class="p">${e}</p>\n `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n <p class="p">${e}</p>\n `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);
|