kempo 2.9.1 → 2.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/components/Accordion.js +1 -1
  2. package/dist/components/Dialog.js +1 -1
  3. package/dist/components/DirectoryViewer.js +1 -1
  4. package/dist/components/FocusCapture.js +1 -1
  5. package/dist/components/Table.js +1 -1
  6. package/dist/components/Timestamp.js +1 -1
  7. package/dist/components/Toggle.js +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/utils/formatTimestamp.js +1 -1
  10. package/docs/components/_template.html +9 -0
  11. package/docs/components/accordion.html +52 -12
  12. package/docs/components/card.html +68 -8
  13. package/docs/components/component.html +6 -0
  14. package/docs/components/content-slider.html +8 -0
  15. package/docs/components/dialog.html +145 -5
  16. package/docs/components/directory-viewer.html +51 -40
  17. package/docs/components/focus-capture.html +68 -0
  18. package/docs/components/icon.html +76 -5
  19. package/docs/components/import.html +47 -0
  20. package/docs/components/lazy-component.html +45 -15
  21. package/docs/components/reactive-component.html +69 -0
  22. package/docs/components/reactive-lazy-component.html +69 -0
  23. package/docs/components/resize.html +52 -3
  24. package/docs/components/search.html +102 -0
  25. package/docs/components/show-more.html +54 -5
  26. package/docs/components/{sidemenu.html → side-menu.html} +56 -3
  27. package/docs/components/split.html +57 -16
  28. package/docs/components/table.html +13 -5
  29. package/docs/components/tabs.html +72 -4
  30. package/docs/components/tags.html +94 -0
  31. package/docs/components/theme-switcher.html +74 -0
  32. package/docs/components/timestamp.html +86 -0
  33. package/docs/components/toggle.html +37 -34
  34. package/docs/index.html +5 -0
  35. package/docs/kempo/components/Accordion.js +1 -1
  36. package/docs/kempo/components/Dialog.js +1 -1
  37. package/docs/kempo/components/DirectoryViewer.js +1 -1
  38. package/docs/kempo/components/FocusCapture.js +1 -1
  39. package/docs/kempo/components/Table.js +1 -1
  40. package/docs/kempo/components/Timestamp.js +1 -1
  41. package/docs/kempo/components/Toggle.js +1 -1
  42. package/docs/kempo/index.js +1 -1
  43. package/docs/kempo/utils/formatTimestamp.js +1 -1
  44. package/docs/nav-1.inc.html +16 -2
  45. package/docs/nav.inc.html +10 -2
  46. package/docs/search.json +281 -23
  47. package/docs/styles/_template.html +6 -0
  48. package/docs/styles/borders-spacing.html +6 -0
  49. package/docs/styles/buttons.html +6 -0
  50. package/docs/styles/colors.html +6 -0
  51. package/docs/styles/displays-layouts.html +6 -0
  52. package/docs/styles/embed-1.html +6 -0
  53. package/docs/styles/inputs.html +6 -0
  54. package/docs/styles/tables.html +6 -0
  55. package/docs/styles/typography.html +6 -0
  56. package/docs/{components/stacks.html → utils/_template.html} +11 -30
  57. package/docs/utils/cli.html +84 -0
  58. package/docs/utils/cookie.html +87 -0
  59. package/docs/utils/debounce.html +61 -0
  60. package/docs/utils/drag.html +85 -0
  61. package/docs/utils/element.html +124 -0
  62. package/docs/utils/format-timestamp.html +64 -0
  63. package/docs/utils/fuzzy-match.html +60 -0
  64. package/package.json +1 -1
  65. package/src/components/Accordion.js +0 -1
  66. package/src/components/Dialog.js +3 -2
  67. package/src/components/DirectoryViewer.js +21 -92
  68. package/src/components/FocusCapture.js +2 -1
  69. package/src/components/Search.js +4 -1
  70. package/src/components/Table.js +15 -8
  71. package/src/components/Timestamp.js +7 -4
  72. package/src/components/Toggle.js +3 -0
  73. package/src/utils/formatTimestamp.js +26 -10
  74. package/docs/table.html +0 -0
  75. package/src/components/Stacks.js +0 -79
  76. package/src/utils/files.js +0 -15
package/docs/components/split.html CHANGED
@@ -6,28 +6,48 @@
6
6
  <title>Split - 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">Split</h1>
13
19
  <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">&lt;<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>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
20
- </k-card>
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="#resizing">Resizing</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 />
21
33
  </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>
34
+ </details>
35
+
36
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
37
+ <p>Create a split view using the <code>k-split</code> component. Add content to the left pane by placing it inside the component, and add content to the right pane by using the <code>slot="right"</code> attribute.</p>
38
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<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>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
39
+ <k-split style="height: 10rem" class="b">
40
+ <div>Left Pane Content</div>
41
+ <div slot="right">Right Pane Content</div>
42
+ </k-split>
43
+
44
+ <h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
45
+ <p>The split view can be resized by dragging the divider handle. The initial width of the left pane can be set using the <code>--left_width</code> CSS custom property.</p>
46
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--left_width: 30%; height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
47
+ <k-split style="--left_width: 30%; height: 10rem" class="b">
48
+ <div>Left Pane Content</div>
49
+ <div slot="right">Right Pane Content</div>
50
+ </k-split>
31
51
 
32
52
  <h3>Sizes</h3>
33
53
  <p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
@@ -57,6 +77,27 @@
57
77
  </div>
58
78
  </div>
59
79
 
80
+ <h2 id="jsRef">JavaScript Reference</h2>
81
+
82
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
83
+ <h6>Extends <a href="./component.html">Component</a></h6>
84
+ <h5>
85
+ <code>new Split()</code>
86
+ </h5>
87
+
88
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
89
+ <ul>
90
+ <li><a href="./component.html">Component</a></li>
91
+ </ul>
92
+
93
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
94
+ <h5><code>resizing<i>: boolean</i></code></h5>
95
+ <p>Indicates whether the split view is currently being resized.</p>
96
+
97
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
98
+ <h5><code>setSize(size)<i>: void</i></code></h5>
99
+ <p>Sets the width of the left pane.</p>
100
+
60
101
  </main>
61
102
  <div style="height:33vh"></div>
62
103
  <script type="module" src="../kempo/components/Import.js"></script>
package/docs/components/table.html CHANGED
@@ -7,6 +7,12 @@
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
9
  <script type="module" src="../kempo/components/Table.js"></script>
10
+ <script type="module">
11
+ import Icon from '../kempo/components/Icon.js';
12
+ import Search from '../kempo/components/Search.js';
13
+ Icon.pathToIcons = ['../icons'];
14
+ Search.searchDataUrl = '../search.json';
15
+ </script>
10
16
  <script>
11
17
 
12
18
  window.contacts = [];
@@ -256,20 +262,19 @@
256
262
  </script>
257
263
 
258
264
  <h3 id="recordSelection"><a href="#recordSelection" class="no-link">Record Selection</a></h3>
259
- <p>The table component supports record selection. You can enable record selection by setting the <code>enableSelection</code> property to <code>true</code>.</p>
260
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /><br /> <span class="hljs-keyword">const</span> $recordSelectionExample = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>);<br /> $recordSelectionExample.setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">enableSelection</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">bottom</span>: [<br /> Table.controls.prevPage,<br /> Table.controls.nextPage,<br /> Table.controls.spacer,<br /> Table.controls.selectCount,<br /> Table.controls.deleteSelected<br /> ]<br /> },<br /> <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span><br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
265
+ <p>The table component supports record selection. You can enable selection by setting the <code>enableSelection</code> property to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
266
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">enableSelection</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">bottom</span>: [<br /> Table.controls.prevPage,<br /> Table.controls.nextPage,<br /> Table.controls.pageSelect,<br /> Table.controls.spacer,<br /> Table.controls.selectCount,<br /> Table.controls.deleteSelected<br /> ]<br /> },<br /> <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span><br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
261
267
  <k-table id="recordSelectionExample"></k-table>
262
268
  <script type="module">
263
269
  import Table from '../kempo/components/Table.js';
264
-
265
- const $recordSelectionExample = document.getElementById('recordSelectionExample');
266
- $recordSelectionExample.setData({
270
+ document.getElementById('recordSelectionExample').setData({
267
271
  records: contacts,
268
272
  enableSelection: true,
269
273
  controls: {
270
274
  bottom: [
271
275
  Table.controls.prevPage,
272
276
  Table.controls.nextPage,
277
+ Table.controls.pageSelect,
273
278
  Table.controls.spacer,
274
279
  Table.controls.selectCount,
275
280
  Table.controls.deleteSelected
@@ -279,6 +284,9 @@
279
284
  });
280
285
  </script>
281
286
 
287
+ <br />
288
+ <hr class="my" />
289
+
282
290
  <h2>JavaScript Reference</h2>
283
291
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
284
292
  <h6>Extends <a href="./component.html">Component</a></h6>
package/docs/components/tabs.html CHANGED
@@ -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
- <h1 class="ta-center">Tabs</h1>
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">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br /> HTML Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br /> JavaScript Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
14
39
  <k-tabs>
15
40
  <k-tab for="html">HTML</k-tab>
16
- <k-tab for="js">Tab 2</k-tab>
41
+ <k-tab for="js">JavaScript</k-tab>
17
42
  <k-tab-content name="html">
18
- <p>HTML Code</p>
43
+ <p>HTML Content</p>
19
44
  </k-tab-content>
20
45
  <k-tab-content name="js">
21
- <p>JS Code</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">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-spacer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br /> HTML Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br /> JavaScript Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</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>
package/docs/components/tags.html ADDED
@@ -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">&lt;<span class="hljs-name">k-tags</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</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">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Allowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</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">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Disallowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</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>
package/docs/components/theme-switcher.html ADDED
@@ -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">&lt;<span class="hljs-name">k-theme-switcher</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-theme-switcher</span>&gt;</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>
package/docs/components/timestamp.html ADDED
@@ -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">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</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">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</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>