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.
Files changed (125) 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/Icon.js +1 -1
  6. package/dist/components/Search.js +1 -1
  7. package/dist/components/Table.js +1 -1
  8. package/dist/components/Timestamp.js +1 -1
  9. package/dist/components/Toggle.js +1 -1
  10. package/dist/components/tableControls/DeleteSelected.js +1 -1
  11. package/dist/components/tableControls/Edit.js +1 -0
  12. package/dist/components/tableControls/Filters.js +1 -0
  13. package/dist/components/tableControls/HiddenCount.js +1 -0
  14. package/dist/components/tableControls/Hide.js +1 -0
  15. package/dist/components/tableControls/PageSelect.js +1 -1
  16. package/dist/components/tableControls/PageSize.js +1 -1
  17. package/dist/components/tableControls/ShowAll.js +1 -0
  18. package/dist/index.js +1 -1
  19. package/dist/kempo-styles.css +1 -1
  20. package/dist/kempo-vars.css +1 -1
  21. package/dist/utils/formatTimestamp.js +1 -1
  22. package/docs/components/_template.html +9 -0
  23. package/docs/components/accordion.html +52 -12
  24. package/docs/components/card.html +68 -8
  25. package/docs/components/component.html +6 -0
  26. package/docs/components/content-slider.html +8 -0
  27. package/docs/components/dialog.html +145 -5
  28. package/docs/components/directory-viewer.html +51 -40
  29. package/docs/components/focus-capture.html +68 -0
  30. package/docs/components/icon.html +76 -5
  31. package/docs/components/import.html +47 -0
  32. package/docs/components/lazy-component.html +45 -15
  33. package/docs/components/reactive-component.html +69 -0
  34. package/docs/components/reactive-lazy-component.html +69 -0
  35. package/docs/components/resize.html +52 -3
  36. package/docs/components/search.html +102 -0
  37. package/docs/components/show-more.html +54 -5
  38. package/docs/components/{sidemenu.html → side-menu.html} +56 -3
  39. package/docs/components/split.html +57 -16
  40. package/docs/components/table.html +90 -189
  41. package/docs/components/tableControls.html +91 -0
  42. package/docs/components/tableCustomFields.html +112 -0
  43. package/docs/components/tablePagination.html +92 -0
  44. package/docs/components/tableRecordEditing.html +144 -0
  45. package/docs/components/tableRecordFiltering.html +82 -0
  46. package/docs/components/tableRecordHiding.html +84 -0
  47. package/docs/components/tableRecordSelection.html +86 -0
  48. package/docs/components/tableRowControls.html +103 -0
  49. package/docs/components/tabs.html +72 -4
  50. package/docs/components/tags.html +94 -0
  51. package/docs/components/theme-switcher.html +74 -0
  52. package/docs/components/timestamp.html +86 -0
  53. package/docs/components/toggle.html +37 -34
  54. package/docs/icons/check.svg +1 -0
  55. package/docs/icons/hide.svg +1 -0
  56. package/docs/icons/show.svg +1 -0
  57. package/docs/index.html +5 -0
  58. package/docs/kempo/components/Accordion.js +1 -1
  59. package/docs/kempo/components/Dialog.js +1 -1
  60. package/docs/kempo/components/DirectoryViewer.js +1 -1
  61. package/docs/kempo/components/FocusCapture.js +1 -1
  62. package/docs/kempo/components/Icon.js +1 -1
  63. package/docs/kempo/components/Search.js +1 -1
  64. package/docs/kempo/components/Table.js +1 -1
  65. package/docs/kempo/components/Timestamp.js +1 -1
  66. package/docs/kempo/components/Toggle.js +1 -1
  67. package/docs/kempo/components/tableControls/DeleteSelected.js +1 -1
  68. package/docs/kempo/components/tableControls/Edit.js +1 -0
  69. package/docs/kempo/components/tableControls/Filters.js +1 -0
  70. package/docs/kempo/components/tableControls/HiddenCount.js +1 -0
  71. package/docs/kempo/components/tableControls/Hide.js +1 -0
  72. package/docs/kempo/components/tableControls/PageSelect.js +1 -1
  73. package/docs/kempo/components/tableControls/PageSize.js +1 -1
  74. package/docs/kempo/components/tableControls/ShowAll.js +1 -0
  75. package/docs/kempo/index.js +1 -1
  76. package/docs/kempo/kempo-styles.css +1 -1
  77. package/docs/kempo/kempo-vars.css +1 -1
  78. package/docs/kempo/utils/formatTimestamp.js +1 -1
  79. package/docs/nav-1.inc.html +16 -2
  80. package/docs/nav.inc.html +10 -2
  81. package/docs/search.json +281 -23
  82. package/docs/styles/_template.html +6 -0
  83. package/docs/styles/borders-spacing.html +6 -0
  84. package/docs/styles/buttons.html +6 -0
  85. package/docs/styles/colors.html +6 -0
  86. package/docs/styles/displays-layouts.html +6 -0
  87. package/docs/styles/embed-1.html +6 -0
  88. package/docs/styles/inputs.html +6 -0
  89. package/docs/styles/tables.html +6 -0
  90. package/docs/styles/typography.html +6 -0
  91. package/docs/{components/stacks.html → utils/_template.html} +11 -30
  92. package/docs/utils/cli.html +84 -0
  93. package/docs/utils/cookie.html +87 -0
  94. package/docs/utils/debounce.html +61 -0
  95. package/docs/utils/drag.html +85 -0
  96. package/docs/utils/element.html +124 -0
  97. package/docs/utils/format-timestamp.html +64 -0
  98. package/docs/utils/fuzzy-match.html +60 -0
  99. package/icons/check.svg +1 -0
  100. package/icons/hide.svg +1 -0
  101. package/icons/show.svg +1 -0
  102. package/package.json +1 -1
  103. package/src/components/Accordion.js +0 -1
  104. package/src/components/Dialog.js +15 -6
  105. package/src/components/DirectoryViewer.js +21 -92
  106. package/src/components/FocusCapture.js +2 -1
  107. package/src/components/Icon.js +3 -1
  108. package/src/components/Search.js +4 -1
  109. package/src/components/Table.js +469 -139
  110. package/src/components/Timestamp.js +7 -4
  111. package/src/components/Toggle.js +3 -0
  112. package/src/components/tableControls/DeleteSelected.js +36 -22
  113. package/src/components/tableControls/Edit.js +88 -0
  114. package/src/components/tableControls/Filters.js +128 -0
  115. package/src/components/tableControls/HiddenCount.js +42 -0
  116. package/src/components/tableControls/Hide.js +43 -0
  117. package/src/components/tableControls/PageSelect.js +54 -30
  118. package/src/components/tableControls/PageSize.js +33 -16
  119. package/src/components/tableControls/ShowAll.js +40 -0
  120. package/src/kempo-styles.css +7 -0
  121. package/src/kempo-vars.css +2 -0
  122. package/src/utils/formatTimestamp.js +26 -10
  123. package/docs/table.html +0 -0
  124. package/src/components/Stacks.js +0 -79
  125. package/src/utils/files.js +0 -15
package/docs/utils/cookie.html ADDED
@@ -0,0 +1,87 @@
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>Cookie - Utils - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
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>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav-1.inc.html"></k-import>
19
+ <h1 class="ta-center">Cookie</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#saveCookie">saveCookie</a><br />
29
+ <a href="#getCookie">getCookie</a><br />
30
+ <a href="#deleteCookie">deleteCookie</a><br />
31
+ </div>
32
+ </details>
33
+
34
+ <h3>Description</h3>
35
+ <p>The Cookie utility provides functions to manage cookies in the browser.</p>
36
+
37
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
+ <pre><code class="language-js">import { saveCookie, getCookie, deleteCookie } from '../src/utils/cookie.js';
39
+
40
+ // Save a cookie
41
+ saveCookie('username', 'john_doe');
42
+
43
+ // Get a cookie
44
+ const username = getCookie('username');
45
+ console.log(username);
46
+
47
+ // Delete a cookie
48
+ deleteCookie('username');</code></pre>
49
+
50
+ <h2 id="jsRef">JavaScript Reference</h2>
51
+
52
+ <h3 id="saveCookie"><a href="#saveCookie" class="no-link">saveCookie</a></h3>
53
+ <h5>
54
+ <code>saveCookie(<i>name</i> string, <i>value</i> string, <i>minutes</i> number, <i>path</i> string)</code>
55
+ </h5>
56
+ <h4>Parameters</h4>
57
+ <h5><code>name<i>: string</i></code></h5>
58
+ <p>The name of the cookie.</p>
59
+ <h5><code>value<i>: string</i></code></h5>
60
+ <p>The value of the cookie.</p>
61
+ <h5><code>minutes<i>: number</i></code></h5>
62
+ <p>The expiration time of the cookie in minutes. Default is 30 days.</p>
63
+ <h5><code>path<i>: string</i></code></h5>
64
+ <p>The path where the cookie is accessible. Default is '/'.</p>
65
+
66
+ <h3 id="getCookie"><a href="#getCookie" class="no-link">getCookie</a></h3>
67
+ <h5>
68
+ <code>getCookie(<i>name</i> string)</code>
69
+ </h5>
70
+ <h4>Parameters</h4>
71
+ <h5><code>name<i>: string</i></code></h5>
72
+ <p>The name of the cookie to retrieve.</p>
73
+ <h4>Returns</h4>
74
+ <p>The value of the cookie, or null if the cookie does not exist.</p>
75
+
76
+ <h3 id="deleteCookie"><a href="#deleteCookie" class="no-link">deleteCookie</a></h3>
77
+ <h5>
78
+ <code>deleteCookie(<i>name</i> string)</code>
79
+ </h5>
80
+ <h4>Parameters</h4>
81
+ <h5><code>name<i>: string</i></code></h5>
82
+ <p>The name of the cookie to delete.</p>
83
+
84
+ </main>
85
+ <script type="module" src="../kempo/components/Import.js"></script>
86
+ </body>
87
+ </html>
package/docs/utils/debounce.html ADDED
@@ -0,0 +1,61 @@
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>Debounce - Utils - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
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>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav-1.inc.html"></k-import>
19
+ <h1 class="ta-center">Debounce</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#debounce">debounce</a><br />
29
+ </div>
30
+ </details>
31
+
32
+ <h3>Description</h3>
33
+ <p>The Debounce utility provides a function to delay the execution of a function until after a specified wait time has elapsed since the last time it was invoked.</p>
34
+
35
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
+ <pre><code class="language-js">import debounce from '../src/utils/debounce.js';
37
+
38
+ const saveInput = debounce(() => {
39
+ console.log('Saving data');
40
+ }, 2000);
41
+
42
+ document.getElementById('input').addEventListener('input', saveInput);</code></pre>
43
+
44
+ <h2 id="jsRef">JavaScript Reference</h2>
45
+
46
+ <h3 id="debounce"><a href="#debounce" class="no-link">debounce</a></h3>
47
+ <h5>
48
+ <code>debounce(<i>func</i> function, <i>timeout</i> number)</code>
49
+ </h5>
50
+ <h4>Parameters</h4>
51
+ <h5><code>func<i>: function</i></code></h5>
52
+ <p>The function to debounce.</p>
53
+ <h5><code>timeout<i>: number</i></code></h5>
54
+ <p>The number of milliseconds to delay. Default is 300ms.</p>
55
+ <h4>Returns</h4>
56
+ <p>A debounced version of the provided function.</p>
57
+
58
+ </main>
59
+ <script type="module" src="../kempo/components/Import.js"></script>
60
+ </body>
61
+ </html>
package/docs/utils/drag.html ADDED
@@ -0,0 +1,85 @@
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>Drag - Utils - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
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>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav-1.inc.html"></k-import>
19
+ <h1 class="ta-center">Drag</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#drag">drag</a><br />
29
+ </div>
30
+ </details>
31
+
32
+ <h3>Description</h3>
33
+ <p>The Drag utility provides a function to handle drag events and execute callbacks during the drag lifecycle.</p>
34
+
35
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
+ <pre><code class="language-js">import drag from '../src/utils/drag.js';
37
+
38
+ const element = document.getElementById('draggable');
39
+ const removeListeners = drag({
40
+ element,
41
+ callback: (diff) => console.log(diff),
42
+ startCallback: () => console.log('Drag started'),
43
+ moveCallback: (diff) => console.log('Dragging', diff),
44
+ endCallback: (diff) => console.log('Drag ended', diff),
45
+ preventScroll: true
46
+ });
47
+
48
+ // To remove event listeners
49
+ removeListeners();</code></pre>
50
+
51
+ <h2 id="jsRef">JavaScript Reference</h2>
52
+
53
+ <h3 id="drag"><a href="#drag" class="no-link">drag</a></h3>
54
+ <h5>
55
+ <code>drag(<i>options</i> object)</code>
56
+ </h5>
57
+ <h4>Parameters</h4>
58
+ <h5><code>options<i>: object</i></code></h5>
59
+ <p>An object containing the following properties:</p>
60
+
61
+ <h6><code>element<i>: HTMLElement</i></code></h6>
62
+ <p>The element to attach drag events to.</p>
63
+
64
+ <h6><code>callback<i>: function</i></code></h6>
65
+ <p>A function to call on drag move. The object passed into the callback contains an <code>x</code> and a <code>y</code> that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.</p>
66
+
67
+ <h6><code>startCallback<i>: function</i></code></h6>
68
+ <p>A function to call on drag start. The object passed into the callback contains an <code>x</code> and a <code>y</code> that represents the initial position of the mouse.</p>
69
+
70
+ <h6><code>moveCallback<i>: function</i></code></h6>
71
+ <p>A function to call on drag move. The object passed into the callback contains an <code>x</code> and a <code>y</code> that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.</p>
72
+
73
+ <h6><code>endCallback<i>: function</i></code></h6>
74
+ <p>A function to call on drag end. The object passed into the callback contains an <code>x</code> and a <code>y</code> that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.</p>
75
+
76
+ <h6><code>preventScroll<i>: boolean</i></code></h6>
77
+ <p>Whether to prevent scrolling during drag. Default is false.</p>
78
+
79
+ <h4>Returns</h4>
80
+ <p>A function to remove the event listeners.</p>
81
+
82
+ </main>
83
+ <script type="module" src="../kempo/components/Import.js"></script>
84
+ </body>
85
+ </html>
package/docs/utils/element.html ADDED
@@ -0,0 +1,124 @@
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>Element - Utils - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
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>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav-1.inc.html"></k-import>
19
+ <h1 class="ta-center">Element</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#onEvent">onEvent</a><br />
29
+ <a href="#offEvent">offEvent</a><br />
30
+ <a href="#dispatchEvent">dispatchEvent</a><br />
31
+ <a href="#isInView">isInView</a><br />
32
+ <a href="#firstFocusable">firstFocusable</a><br />
33
+ <a href="#setProp">setProp</a><br />
34
+ </div>
35
+ </details>
36
+
37
+ <br><h3>Description</h3>
38
+ <p>The Element utility provides functions to handle DOM events, check element visibility, and manipulate element properties.</p>
39
+
40
+ <br><h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { onEvent, offEvent, dispatchEvent, isInView, firstFocusable, setProp } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/element.js'</span>;<br /><br /><span class="hljs-comment">// Add event listener</span><br />onEvent(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myElement'</span>), <span class="hljs-string">'click'</span>, () =&gt; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Clicked'</span>));<br /><br /><span class="hljs-comment">// Remove event listener</span><br />offEvent(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myElement'</span>), <span class="hljs-string">'click'</span>, () =&gt; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Clicked'</span>));<br /><br /><span class="hljs-comment">// Dispatch event</span><br />dispatchEvent(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myElement'</span>), <span class="hljs-string">'customEvent'</span>, { <span class="hljs-attr">detail</span>: <span class="hljs-string">'example'</span> });<br /><br /><span class="hljs-comment">// Check if element is in view</span><br />isInView(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myElement'</span>)).then(<span class="hljs-function"><span class="hljs-params">inView</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(inView));<br /><br /><span class="hljs-comment">// Get first focusable element</span><br /><span class="hljs-keyword">const</span> firstFocusableElement = firstFocusable(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myContainer'</span>));<br /><span class="hljs-built_in">console</span>.log(firstFocusableElement);<br /><br /><span class="hljs-comment">// Set property on element</span><br />setProp(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myElement'</span>), <span class="hljs-string">'innerText'</span>, <span class="hljs-string">'New Text'</span>);</code></pre>
42
+
43
+ <br><h2 id="jsRef">JavaScript Reference</h2>
44
+
45
+ <br><h3 id="onEvent"><a href="#onEvent" class="no-link">onEvent</a></h3>
46
+ <h6>
47
+ <code>onEvent(<i>element</i> EventTarget | NodeList | Array | string, <i>events</i> string, <i>handler</i> function, <i>scope</i> Document)</code>
48
+ </h6>
49
+ <h5>Parameters</h5>
50
+ <h6><code>element<i>: EventTarget | NodeList | Array | string</i></code></h6>
51
+ <p>The element(s) to attach the event listener to.</p>
52
+ <h6><code>events<i>: string</i></code></h6>
53
+ <p>The event(s) to listen for, separated by spaces.</p>
54
+ <h6><code>handler<i>: function</i></code></h6>
55
+ <p>The function to call when the event is triggered.</p>
56
+ <h6><code>scope<i>: Document</i></code></h6>
57
+ <p>The scope to query for elements if a string selector is provided. Default is <code>document</code>.</p>
58
+
59
+ <br><h3 id="offEvent"><a href="#offEvent" class="no-link">offEvent</a></h3>
60
+ <h6>
61
+ <code>offEvent(<i>element</i> EventTarget | NodeList | Array | string, <i>events</i> string, <i>handler</i> function, <i>scope</i> Document)</code>
62
+ </h6>
63
+ <h5>Parameters</h5>
64
+ <h6><code>element<i>: EventTarget | NodeList | Array | string</i></code></h6>
65
+ <p>The element(s) to remove the event listener from.</p>
66
+ <h6><code>events<i>: string</i></code></h6>
67
+ <p>The event(s) to stop listening for, separated by spaces.</p>
68
+ <h6><code>handler<i>: function</i></code></h6>
69
+ <p>The function to remove from the event listener.</p>
70
+ <h6><code>scope<i>: Document</i></code></h6>
71
+ <p>The scope to query for elements if a string selector is provided. Default is <code>document</code>.</p>
72
+
73
+ <br><h3 id="dispatchEvent"><a href="#dispatchEvent" class="no-link">dispatchEvent</a></h3>
74
+ <h6>
75
+ <code>dispatchEvent(<i>element</i> EventTarget | NodeList | Array | string, <i>events</i> string, <i>detail</i> any, <i>options</i> object)</code>
76
+ </h6>
77
+ <h5>Parameters</h5>
78
+ <h6><code>element<i>: EventTarget | NodeList | Array | string</i></code></h6>
79
+ <p>The element(s) to dispatch the event on.</p>
80
+ <h6><code>events<i>: string</i></code></h6>
81
+ <p>The event(s) to dispatch, separated by spaces.</p>
82
+ <h6><code>detail<i>: any</i></code></h6>
83
+ <p>The detail to include in the event.</p>
84
+ <h6><code>options<i>: object</i></code></h6>
85
+ <p>Additional options for the event. Default is <code>{ scope: document, bubbles: false }</code>.</p>
86
+
87
+ <br><h3 id="isInView"><a href="#isInView" class="no-link">isInView</a></h3>
88
+ <h6>
89
+ <code>isInView(<i>element</i> HTMLElement)</code>
90
+ </h6>
91
+ <h5>Parameters</h5>
92
+ <h6><code>element<i>: HTMLElement</i></code></h6>
93
+ <p>The element to check for visibility.</p>
94
+ <h5>Returns</h5>
95
+ <p>A promise that resolves to <code>true</code> if the element is in view, and <code>false</code> otherwise.</p>
96
+
97
+ <br><h3 id="firstFocusable"><a href="#firstFocusable" class="no-link">firstFocusable</a></h3>
98
+ <h6>
99
+ <code>firstFocusable(<i>scope</i> HTMLElement)</code>
100
+ </h6>
101
+ <h5>Parameters</h5>
102
+ <h6><code>scope<i>: HTMLElement</i></code></h6>
103
+ <p>The scope to query for focusable elements.</p>
104
+ <h5>Returns</h5>
105
+ <p>The first focusable element within the scope.</p>
106
+
107
+ <br><h3 id="setProp"><a href="#setProp" class="no-link">setProp</a></h3>
108
+ <h6>
109
+ <code>setProp(<i>element</i> HTMLElement | NodeList | Array | string, <i>prop</i> string, <i>value</i> any, <i>scope</i> Document)</code>
110
+ </h6>
111
+ <h5>Parameters</h5>
112
+ <h6><code>element<i>: HTMLElement | NodeList | Array | string</i></code></h6>
113
+ <p>The element(s) to set the property on.</p>
114
+ <h6><code>prop<i>: string</i></code></h6>
115
+ <p>The property to set.</p>
116
+ <h6><code>value<i>: any</i></code></h6>
117
+ <p>The value to set the property to.</p>
118
+ <h6><code>scope<i>: Document</i></code></h6>
119
+ <p>The scope to query for elements if a string selector is provided. Default is <code>document</code>.</p>
120
+
121
+ </main>
122
+ <script type="module" src="../kempo/components/Import.js"></script>
123
+ </body>
124
+ </html>
package/docs/utils/format-timestamp.html ADDED
@@ -0,0 +1,64 @@
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>formatTimestamp - Utils - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
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>
16
+ </head>
17
+ <body>
18
+ <k-import src="../nav-1.inc.html"></k-import>
19
+ <h1 class="ta-center">formatTimestamp</h1>
20
+ <main>
21
+ <details class="b r mb">
22
+ <summary class="p">Table of Contents</summary>
23
+ <div class="m mt0 pl">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#function">Function</a><br />
29
+ <a href="#parameters">Parameters</a><br />
30
+ <a href="#returns">Returns</a><br />
31
+ </div>
32
+ </details>
33
+
34
+ <h3>Description</h3>
35
+ <p>The <code>formatTimestamp</code> function formats a given timestamp into a specified format or locale string.</p>
36
+
37
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
+ <pre><code class="language-javascript">
39
+ import formatTimestamp from '../../src/utils/formatTimestamp.js';
40
+
41
+ const timestamp = Date.now();
42
+ console.log(formatTimestamp(timestamp, 'YYYY-MM-DD hh:mm:ss')); // Example output: 2023-10-05 14:48:32
43
+ console.log(formatTimestamp(timestamp)); // Example output: 10/5/2023, 2:48:32 PM if the browser locale is en-US
44
+ </code></pre>
45
+
46
+ <h2 id="jsRef">JavaScript Reference</h2>
47
+
48
+ <h3 id="function"><a href="#function" class="no-link">Function</a></h3>
49
+ <h5><code>formatTimestamp(timestamp, format, forceLocale)</code></h5>
50
+
51
+ <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
52
+ <ul>
53
+ <li><code>timestamp</code> <i>: number</i> - The timestamp to format.</li>
54
+ <li><code>format</code> <i>: string</i> (optional) - The format string. If not provided, the locale string is returned.</li>
55
+ <li><code>forceLocale</code> <i>: string</i> (optional) - The locale to use for formatting.</li>
56
+ </ul>
57
+
58
+ <h3 id="returns"><a href="#returns" class="no-link">Returns</a></h3>
59
+ <p><code>string</code> - The formatted timestamp.</p>
60
+
61
+ </main>
62
+ <script type="module" src="../kempo/components/Import.js"></script>
63
+ </body>
64
+ </html>
package/docs/utils/fuzzy-match.html ADDED
@@ -0,0 +1,60 @@
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>Fuzzy Match Utility Documentation</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css">
8
+ <link rel="stylesheet" href="../kempo/kempo-styles.css">
9
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css">
10
+ <script type="module">
11
+ import Icon from '../kempo/components/Icon.js';
12
+ Icon.pathToIcons = ['../icons'];
13
+ </script>
14
+ </head>
15
+ <body>
16
+ <k-import src="../nav-1.inc.html"></k-import>
17
+ <h1 class="ta-center">Fuzzy Match Utility Documentation</h1>
18
+ <main>
19
+ <details class="b r mb">
20
+ <summary class="p">Table of Contents</summary>
21
+ <div class="m mt0 pl">
22
+ <h6>Examples</h6>
23
+ <a href="#basicUsage">Basic Usage</a><br />
24
+
25
+ <h6 class="mt">JavaScript Reference</h6>
26
+ <a href="#fuzzyMatch">fuzzyMatch</a><br />
27
+ <a href="#fuzzyMatchArray">fuzzyMatchArray</a><br />
28
+ </div>
29
+ </details>
30
+
31
+ <h3>Description</h3>
32
+ <p>This module provides functions for performing fuzzy matching on strings.</p>
33
+
34
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
35
+
36
+ <h2 id="jsRef">JavaScript Reference</h2>
37
+
38
+ <h3 id="fuzzyMatch"><a href="#fuzzyMatch" class="no-link">fuzzyMatch(str1, str2)</a></h3>
39
+ <p>Performs a fuzzy match between two strings and returns a score between 0 and 10.</p>
40
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { fuzzyMatch } <span class="hljs-keyword">from</span> <span class="hljs-string">'./src/utils/fuzzyMatch.js'</span>;<br /><br /><span class="hljs-keyword">const</span> score = fuzzyMatch(<span class="hljs-string">'example'</span>, <span class="hljs-string">'exampel'</span>);<br /><span class="hljs-built_in">console</span>.log(score); <span class="hljs-comment">// Outputs a score between 0 and 10</span></code></pre>
41
+ <p><strong>Parameters:</strong></p>
42
+ <ul>
43
+ <li><code>str1</code> (string): The first string to match against.</li>
44
+ <li><code>str2</code> (string): The second string to match.</li>
45
+ </ul>
46
+ <p><strong>Returns:</strong> (number): A score between 0 and 10 indicating the strength of the match.</p>
47
+
48
+ <h3 id="fuzzyMatchArray"><a href="#fuzzyMatchArray" class="no-link">fuzzyMatchArray(array, targetString)</a></h3>
49
+ <p>Calculates the average non-zero fuzzy match score of a target string against an array of strings.</p>
50
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { fuzzyMatchArray } <span class="hljs-keyword">from</span> <span class="hljs-string">'./src/utils/fuzzyMatch.js'</span>;<br /><br /><span class="hljs-keyword">const</span> averageScore = fuzzyMatchArray([<span class="hljs-string">'example'</span>, <span class="hljs-string">'sample'</span>, <span class="hljs-string">'exampel'</span>], <span class="hljs-string">'exampel'</span>);<br /><span class="hljs-built_in">console</span>.log(averageScore); <span class="hljs-comment">// Outputs the average non-zero score</span></code></pre>
51
+ <p><strong>Parameters:</strong></p>
52
+ <ul>
53
+ <li><code>array</code> (Array&lt;string&gt;): An array of strings to match against.</li>
54
+ <li><code>targetString</code> (string): The string to match.</li>
55
+ </ul>
56
+ <p><strong>Returns:</strong> (number): The average non-zero match score.</p>
57
+ </main>
58
+ <script type="module" src="../kempo/components/Import.js"></script>
59
+ </body>
60
+ </html>
package/icons/check.svg ADDED
@@ -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>
package/icons/hide.svg ADDED
@@ -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>
package/icons/show.svg ADDED
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo",
3
- "version": "2.9.2",
3
+ "version": "2.10.0",
4
4
  "type": "module",
5
5
  "description": "A web component library",
6
6
  "main": "dist/index.js",
package/src/components/Accordion.js CHANGED
@@ -4,7 +4,6 @@ import {
4
4
  offEvent,
5
5
  dispatchEvent
6
6
  } from '../utils/element.js';
7
- import raf from '../utils/raf.js';
8
7
 
9
8
  export default class Accordion extends Component {
10
9
  constructor(){
package/src/components/Dialog.js CHANGED
@@ -182,7 +182,7 @@ export default class Dialog extends Component {
182
182
  justify-content: center;
183
183
  align-items: center;
184
184
  position: fixed;
185
- width: 100vw;
185
+ width: 100%;
186
186
  height: 100vh;
187
187
  top: 0;
188
188
  left: 0;
@@ -194,10 +194,10 @@ export default class Dialog extends Component {
194
194
  flex-direction: column;
195
195
  min-width: var(--min_width, 20rem);
196
196
  width: var(--width, fit-content);
197
- max-width: var(--max_width, calc(100vw - 2rem));
197
+ max-width: var(--max_width, calc(100vw - 4rem));
198
198
  min-height: var(--min_height, 12rem);
199
199
  height: var(--height, fit-content);
200
- max-height: var(--max_height, calc(100vh - 2rem));
200
+ max-height: var(--max_height, calc(100vh - 4rem));
201
201
  background-color: var(--c_bg);
202
202
  box-shadow: var(--drop_shadow);
203
203
  border-radius: var(--radius);
@@ -256,13 +256,20 @@ export default class Dialog extends Component {
256
256
  } else {
257
257
  $dialog.innerHTML = contents;
258
258
  }
259
+ if (options.width) $dialog.style.setProperty('--width', options.width);
260
+ if (options.minWidth) $dialog.style.setProperty('--min_width', options.minWidth);
261
+ if (options.maxWidth) $dialog.style.setProperty('--max_width', options.maxWidth);
262
+ if (options.height) $dialog.style.setProperty('--height', options.height);
263
+ if (options.minHeight) $dialog.style.setProperty('--min_height', options.minHeight);
264
+ if (options.maxHeight) $dialog.style.setProperty('--max_height', options.maxHeight);
259
265
  document.body.prepend($dialog);
260
266
  $dialog.open();
267
+ return $dialog;
261
268
  }
262
269
  static confirm(text, responseCallback, options = {
263
270
  title: 'Confirm'
264
271
  }){
265
- Dialog.create(`
272
+ return Dialog.create(`
266
273
  <h5 slot="title" class="pyh px m0">${options.title}</h5>
267
274
  <p class="p">${text}</p>
268
275
  `, {
@@ -284,13 +291,15 @@ export default class Dialog extends Component {
284
291
  static error(text, responseCallback, options = {
285
292
  title: 'Error'
286
293
  }){
287
- Dialog.create(`
294
+ const $dialog = Dialog.create(`
288
295
  <h5 slot="title" class="pyh px m0 tc-danger">${options.title}</h5>
289
296
  <p class="p">${text}</p>
290
297
  `, {
291
298
  ...options,
292
- cancelText: 'Ok'
299
+ cancelText: 'Ok',
293
300
  });
301
+ onEvent($dialog, 'close', responseCallback);
302
+ return $dialog;
294
303
  }
295
304
  }
296
305
  window.customElements.define('k-dialog', Dialog);