kempo-ui 0.0.3 → 0.0.5

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 (193) hide show
  1. package/.github/workflows/publish-major.yml +39 -0
  2. package/.github/workflows/publish-minor.yml +39 -0
  3. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +1 -1
  4. package/.vscode/settings.json +2 -0
  5. package/dist/kempo-hljs.css +1 -0
  6. package/dist/src/components/Accordion.js +36 -0
  7. package/dist/src/components/Card.js +37 -0
  8. package/dist/src/components/Collapsible.js +41 -0
  9. package/dist/src/components/ContentSlider.js +44 -0
  10. package/dist/src/components/Dialog.js +120 -0
  11. package/dist/src/components/Icon.js +2 -2
  12. package/dist/src/components/PersistantCollapsible.js +1 -0
  13. package/dist/src/components/PhotoViewer.js +135 -0
  14. package/dist/src/components/Resize.js +96 -0
  15. package/dist/src/components/ShadowComponent.js +1 -1
  16. package/dist/src/components/ShowMore.js +42 -0
  17. package/dist/src/components/SideMenu.js +1 -1
  18. package/dist/src/components/Sortable.js +45 -0
  19. package/dist/src/components/Split.js +84 -0
  20. package/dist/src/components/Table.js +151 -0
  21. package/dist/src/components/Tabs.js +155 -0
  22. package/dist/src/components/Tags.js +69 -0
  23. package/dist/src/components/ThemeSwitcher.js +23 -0
  24. package/dist/src/components/Timestamp.js +1 -0
  25. package/dist/src/components/Toast.js +141 -0
  26. package/dist/src/components/Toggle.js +74 -0
  27. package/dist/src/components/tableControls/DeleteRecord.js +7 -0
  28. package/dist/src/components/tableControls/Edit.js +18 -0
  29. package/dist/src/components/tableControls/ExportCSV.js +8 -0
  30. package/dist/src/components/tableControls/ExportJson.js +8 -0
  31. package/dist/src/components/tableControls/FieldSortHide.js +26 -0
  32. package/dist/src/components/tableControls/Filters.js +47 -0
  33. package/dist/src/components/tableControls/FirstPage.js +9 -0
  34. package/dist/src/components/tableControls/HiddenCount.js +3 -0
  35. package/dist/src/components/tableControls/Hide.js +5 -0
  36. package/dist/src/components/tableControls/LastPage.js +9 -0
  37. package/dist/src/components/tableControls/NextPage.js +9 -0
  38. package/dist/src/components/tableControls/PageSelect.js +22 -0
  39. package/dist/src/components/tableControls/PageSize.js +5 -0
  40. package/dist/src/components/tableControls/PrevPage.js +9 -0
  41. package/dist/src/components/tableControls/Search.js +9 -0
  42. package/dist/src/components/tableControls/ShowAll.js +5 -0
  43. package/dist/src/components/tableControls/TableControl.js +16 -0
  44. package/dist/src/utils/debounce.js +1 -0
  45. package/dist/src/utils/drag.js +1 -0
  46. package/dist/src/utils/formatTimestamp.js +1 -0
  47. package/dist/src/utils/propConverters.js +1 -0
  48. package/dist/src/utils/toTitleCase.js +1 -0
  49. package/dist/src/utils/watchWindowSize.js +1 -0
  50. package/docs/components/accordion.html +69 -25
  51. package/docs/components/card.html +6 -5
  52. package/docs/components/collapsible.html +198 -0
  53. package/docs/components/content-slider.html +56 -26
  54. package/docs/components/dialog.html +54 -48
  55. package/docs/components/focus-capture.html +59 -15
  56. package/docs/components/hybrid-component.html +112 -0
  57. package/docs/components/icon.html +5 -10
  58. package/docs/components/import.html +1 -6
  59. package/docs/components/light-component.html +99 -0
  60. package/docs/components/persistant-collapsible.html +123 -0
  61. package/docs/components/photo-viewer.html +226 -0
  62. package/docs/components/resize.html +44 -18
  63. package/docs/components/shadow-component.html +88 -0
  64. package/docs/components/show-more.html +12 -6
  65. package/docs/components/side-menu.html +3 -12
  66. package/docs/components/sortable.html +91 -55
  67. package/docs/components/split.html +26 -5
  68. package/docs/components/tablePagination.html +4 -4
  69. package/docs/components/tableRecordFiltering.html +16 -3
  70. package/docs/components/tableRecordSelection.html +2 -2
  71. package/docs/components/tabs.html +24 -7
  72. package/docs/components/tags.html +24 -8
  73. package/docs/components/theme-switcher.html +3 -6
  74. package/docs/components/timestamp.html +20 -24
  75. package/docs/components/toast.html +23 -32
  76. package/docs/components/toggle.html +4 -3
  77. package/docs/icons/error.svg +1 -1
  78. package/docs/icons/warning.svg +1 -1
  79. package/docs/index.html +197 -5
  80. package/docs/kempo-hljs.css +1 -0
  81. package/docs/kempo.min.css +1 -1
  82. package/docs/media/civic.jpg +0 -0
  83. package/docs/media/corvette.jpg +0 -0
  84. package/docs/media/evo.jpg +0 -0
  85. package/docs/media/gtr.jpg +0 -0
  86. package/docs/media/nsx.jpg +0 -0
  87. package/docs/nav.inc.html +19 -24
  88. package/docs/src/components/Accordion.js +36 -0
  89. package/docs/src/components/Card.js +37 -0
  90. package/docs/src/components/Collapsible.js +41 -0
  91. package/docs/src/components/ContentSlider.js +44 -0
  92. package/docs/src/components/Dialog.js +120 -0
  93. package/docs/src/components/Icon.js +2 -2
  94. package/docs/src/components/PersistantCollapsible.js +1 -0
  95. package/docs/src/components/PhotoViewer.js +135 -0
  96. package/docs/src/components/Resize.js +96 -0
  97. package/docs/src/components/ShadowComponent.js +1 -1
  98. package/docs/src/components/ShowMore.js +42 -0
  99. package/docs/src/components/SideMenu.js +1 -1
  100. package/docs/src/components/Sortable.js +45 -0
  101. package/docs/src/components/Split.js +84 -0
  102. package/docs/src/components/Table.js +151 -0
  103. package/docs/src/components/Tabs.js +155 -0
  104. package/docs/src/components/Tags.js +69 -0
  105. package/docs/src/components/ThemeSwitcher.js +23 -0
  106. package/docs/src/components/Timestamp.js +1 -0
  107. package/docs/src/components/Toast.js +141 -0
  108. package/docs/src/components/Toggle.js +74 -0
  109. package/docs/src/components/tableControls/DeleteRecord.js +7 -0
  110. package/docs/src/components/tableControls/Edit.js +18 -0
  111. package/docs/src/components/tableControls/ExportCSV.js +8 -0
  112. package/docs/src/components/tableControls/ExportJson.js +8 -0
  113. package/docs/src/components/tableControls/FieldSortHide.js +26 -0
  114. package/docs/src/components/tableControls/Filters.js +47 -0
  115. package/docs/src/components/tableControls/FirstPage.js +9 -0
  116. package/docs/src/components/tableControls/HiddenCount.js +3 -0
  117. package/docs/src/components/tableControls/Hide.js +5 -0
  118. package/docs/src/components/tableControls/LastPage.js +9 -0
  119. package/docs/src/components/tableControls/NextPage.js +9 -0
  120. package/docs/src/components/tableControls/PageSelect.js +22 -0
  121. package/docs/src/components/tableControls/PageSize.js +5 -0
  122. package/docs/src/components/tableControls/PrevPage.js +9 -0
  123. package/docs/src/components/tableControls/Search.js +9 -0
  124. package/docs/src/components/tableControls/ShowAll.js +5 -0
  125. package/docs/src/components/tableControls/TableControl.js +16 -0
  126. package/docs/src/utils/debounce.js +1 -0
  127. package/docs/src/utils/drag.js +1 -0
  128. package/docs/src/utils/formatTimestamp.js +1 -0
  129. package/docs/src/utils/propConverters.js +1 -0
  130. package/docs/src/utils/toTitleCase.js +1 -0
  131. package/docs/src/utils/watchWindowSize.js +1 -0
  132. package/docs/utils/debounce.html +78 -0
  133. package/docs/utils/drag.html +89 -0
  134. package/docs/utils/formatTimestamp.html +114 -0
  135. package/docs/utils/propConverters.html +132 -0
  136. package/docs/utils/toTitleCase.html +71 -0
  137. package/docs/utils/watchWindowSize.html +166 -0
  138. package/icons/error.svg +1 -1
  139. package/icons/warning.svg +1 -1
  140. package/package.json +1 -1
  141. package/scripts/build.js +4 -1
  142. package/scripts/docs.js +4 -2
  143. package/src/components/Accordion.js +229 -0
  144. package/src/components/Collapsible.js +109 -0
  145. package/src/components/ContentSlider.js +205 -0
  146. package/src/components/Dialog.js +376 -0
  147. package/src/components/PersistantCollapsible.js +69 -0
  148. package/src/components/PhotoViewer.js +368 -0
  149. package/src/components/Resize.js +210 -0
  150. package/src/components/ShadowComponent.js +3 -1
  151. package/src/components/ShowMore.js +109 -0
  152. package/src/components/Sortable.js +193 -0
  153. package/src/components/Split.js +192 -0
  154. package/src/components/Table.js +1202 -0
  155. package/src/components/Tabs.js +428 -0
  156. package/src/components/Tags.js +253 -0
  157. package/src/components/Timestamp.js +31 -0
  158. package/src/components/Toast.js +454 -0
  159. package/src/components/Toggle.js +173 -0
  160. package/src/components/tableControls/DeleteRecord.js +29 -0
  161. package/src/components/tableControls/Edit.js +88 -0
  162. package/src/components/tableControls/ExportCSV.js +71 -0
  163. package/src/components/tableControls/ExportJson.js +55 -0
  164. package/src/components/tableControls/FieldSortHide.js +76 -0
  165. package/src/components/tableControls/Filters.js +114 -0
  166. package/src/components/tableControls/FirstPage.js +65 -0
  167. package/src/components/tableControls/HiddenCount.js +45 -0
  168. package/src/components/tableControls/Hide.js +34 -0
  169. package/src/components/tableControls/LastPage.js +65 -0
  170. package/src/components/tableControls/NextPage.js +65 -0
  171. package/src/components/tableControls/PageSelect.js +109 -0
  172. package/src/components/tableControls/PageSize.js +68 -0
  173. package/src/components/tableControls/PrevPage.js +65 -0
  174. package/src/components/tableControls/Search.js +58 -0
  175. package/src/components/tableControls/ShowAll.js +34 -0
  176. package/src/components/tableControls/TableControl.js +105 -0
  177. package/src/utils/debounce.js +9 -0
  178. package/src/utils/drag.js +80 -0
  179. package/src/utils/formatTimestamp.js +27 -0
  180. package/src/utils/toTitleCase.js +9 -0
  181. package/src/utils/watchWindowSize.js +16 -0
  182. package/dist/src/utils/cli.js +0 -1
  183. package/dist/src/utils/fs-utils.js +0 -1
  184. package/docs/components/component.html +0 -90
  185. package/docs/components/directory-viewer.html +0 -90
  186. package/docs/components/lazy-component.html +0 -84
  187. package/docs/components/reactive-component.html +0 -69
  188. package/docs/components/reactive-lazy-component.html +0 -69
  189. package/docs/components/search.html +0 -102
  190. package/docs/src/utils/cli.js +0 -1
  191. package/docs/src/utils/fs-utils.js +0 -1
  192. package/src/utils/cli.js +0 -43
  193. package/src/utils/fs-utils.js +0 -41
package/docs/utils/formatTimestamp.html ADDED
@@ -0,0 +1,114 @@
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 - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>formatTimestamp</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#parameters">Parameters</a><br />
31
+ <a href="#formatTokens">Format Tokens</a><br />
32
+ <a href="#examples">Examples</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3>Description</h3>
37
+ <p>The <code>formatTimestamp</code> utility function formats timestamps using custom format tokens or locale-specific formatting.</p>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Import and use the formatTimestamp function to format dates:</p>
41
+ <pre><code class="hljs javascript">import formatTimestamp from './utils/formatTimestamp.js';
42
+
43
+ const timestamp = Date.now();
44
+ const formatted = formatTimestamp(timestamp, 'YYYY-MM-DD');
45
+ console.log(formatted); // "2025-09-19"</code></pre>
46
+
47
+ <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
48
+ <h5><code>timestamp<i>: number|string</i></code></h5>
49
+ <p>The timestamp to format (milliseconds since epoch).</p>
50
+ <h5><code>format<i>: string</i></code> (optional)</h5>
51
+ <p>The format string using tokens. If not provided, uses locale-specific formatting.</p>
52
+ <h5><code>forceLocale<i>: string</i></code> (optional)</h5>
53
+ <p>The locale to use for formatting when no format is specified.</p>
54
+
55
+ <h3 id="formatTokens"><a href="#formatTokens" class="no-link">Format Tokens</a></h3>
56
+ <h5><code>YYYY</code></h5>
57
+ <p>4-digit year (e.g., 2025)</p>
58
+ <h5><code>YY</code></h5>
59
+ <p>2-digit year (e.g., 25)</p>
60
+ <h5><code>MM</code></h5>
61
+ <p>2-digit month (01-12)</p>
62
+ <h5><code>M</code></h5>
63
+ <p>1-digit month (1-12)</p>
64
+ <h5><code>DD</code></h5>
65
+ <p>2-digit day (01-31)</p>
66
+ <h5><code>D</code></h5>
67
+ <p>1-digit day (1-31)</p>
68
+ <h5><code>hh</code></h5>
69
+ <p>2-digit hour (00-23)</p>
70
+ <h5><code>h</code></h5>
71
+ <p>1-digit hour (0-23)</p>
72
+ <h5><code>mm</code></h5>
73
+ <p>2-digit minute (00-59)</p>
74
+ <h5><code>m</code></h5>
75
+ <p>1-digit minute (0-59)</p>
76
+ <h5><code>ss</code></h5>
77
+ <p>2-digit second (00-59)</p>
78
+ <h5><code>s</code></h5>
79
+ <p>1-digit second (0-59)</p>
80
+ <h5><code>iiii, iii, ii, i</code></h5>
81
+ <p>Milliseconds with different padding</p>
82
+
83
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
84
+
85
+ <h4>Date Formats</h4>
86
+ <pre><code class="hljs javascript">const timestamp = 1633024800000;
87
+
88
+ formatTimestamp(timestamp, 'YYYY-MM-DD'); // "2021-10-01"
89
+ formatTimestamp(timestamp, 'MM/DD/YYYY'); // "10/01/2021"
90
+ formatTimestamp(timestamp, 'DD-MM-YY'); // "01-10-21"</code></pre>
91
+
92
+ <h4>Time Formats</h4>
93
+ <pre><code class="hljs javascript">formatTimestamp(timestamp, 'hh:mm:ss'); // "00:00:00"
94
+ formatTimestamp(timestamp, 'h:mm'); // "0:00"
95
+ formatTimestamp(timestamp, 'hh:mm:ss.iii'); // "00:00:00.000"</code></pre>
96
+
97
+ <h4>Combined Formats</h4>
98
+ <pre><code class="hljs javascript">formatTimestamp(timestamp, 'YYYY-MM-DD hh:mm:ss');
99
+ // "2021-10-01 00:00:00"
100
+
101
+ formatTimestamp(timestamp, 'MM/DD/YY at h:mm');
102
+ // "10/01/21 at 0:00"</code></pre>
103
+
104
+ <h4>Locale Formatting</h4>
105
+ <pre><code class="hljs javascript">// Uses browser locale when no format specified
106
+ formatTimestamp(timestamp); // "10/1/2021, 12:00:00 AM"
107
+
108
+ // Force specific locale
109
+ formatTimestamp(timestamp, null, 'de-DE'); // German formatting</code></pre>
110
+
111
+ </main>
112
+ <div style="height:33vh"></div>
113
+ </body>
114
+ </html>
package/docs/utils/propConverters.html ADDED
@@ -0,0 +1,132 @@
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>propConverters - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>propConverters</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#boolTrueFalse">boolTrueFalse</a><br />
31
+ <a href="#boolExists">boolExists</a><br />
32
+ <a href="#examples">Examples</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3>Description</h3>
37
+ <p>The <code>propConverters</code> module provides Lit Element property converters for handling boolean attributes in web components. These converters manage the conversion between JavaScript boolean values and HTML attribute strings.</p>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Import and use the converters in your Lit Element component properties:</p>
41
+ <pre><code class="hljs javascript">import { boolTrueFalse, boolExists } from './utils/propConverters.js';
42
+
43
+ static properties = {
44
+ enabled: { type: Boolean, reflect: true, converter: boolTrueFalse },
45
+ visible: { type: Boolean, reflect: true, converter: boolExists }
46
+ };</code></pre>
47
+
48
+ <h3 id="boolTrueFalse"><a href="#boolTrueFalse" class="no-link">boolTrueFalse</a></h3>
49
+ <p>Converts between boolean values and explicit "true"/"false" string attributes.</p>
50
+
51
+ <h4>Behavior</h4>
52
+ <ul>
53
+ <li><strong>fromAttribute:</strong> "true" → true, "false" → false, null → undefined</li>
54
+ <li><strong>toAttribute:</strong> true → "true", false → "false"</li>
55
+ </ul>
56
+
57
+ <h4>HTML Usage</h4>
58
+ <pre><code class="hljs xml">&lt;my-component enabled="true"&gt;&lt;/my-component&gt;
59
+ &lt;my-component enabled="false"&gt;&lt;/my-component&gt;</code></pre>
60
+
61
+ <h3 id="boolExists"><a href="#boolExists" class="no-link">boolExists</a></h3>
62
+ <p>Converts between boolean values and attribute presence/absence.</p>
63
+
64
+ <h4>Behavior</h4>
65
+ <ul>
66
+ <li><strong>fromAttribute:</strong> attribute present → true, attribute absent → false</li>
67
+ <li><strong>toAttribute:</strong> true → "", false → null (removes attribute)</li>
68
+ </ul>
69
+
70
+ <h4>HTML Usage</h4>
71
+ <pre><code class="hljs xml">&lt;my-component visible&gt;&lt;/my-component&gt; &lt;!-- visible = true --&gt;
72
+ &lt;my-component&gt;&lt;/my-component&gt; &lt;!-- visible = false --&gt;</code></pre>
73
+
74
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
75
+
76
+ <h4>Component with Both Converters</h4>
77
+ <pre><code class="hljs javascript">import { LitElement, html } from 'lit';
78
+ import { boolTrueFalse, boolExists } from './utils/propConverters.js';
79
+
80
+ class MyComponent extends LitElement {
81
+ static properties = {
82
+ autoplay: { type: Boolean, reflect: true, converter: boolTrueFalse },
83
+ hidden: { type: Boolean, reflect: true, converter: boolExists },
84
+ loop: { type: Boolean, reflect: true, converter: boolTrueFalse }
85
+ };
86
+
87
+ constructor() {
88
+ super();
89
+ this.autoplay = false;
90
+ this.hidden = false;
91
+ this.loop = false;
92
+ }
93
+
94
+ render() {
95
+ return html`
96
+ &lt;div ?hidden="${this.hidden}"&gt;
97
+ Content ${this.autoplay ? 'with' : 'without'} autoplay
98
+ ${this.loop ? '(looping)' : ''}
99
+ &lt;/div&gt;
100
+ `;
101
+ }
102
+ }</code></pre>
103
+
104
+ <h4>HTML Usage Examples</h4>
105
+ <pre><code class="hljs xml">&lt;!-- Using boolTrueFalse converter --&gt;
106
+ &lt;my-component autoplay="true" loop="false"&gt;&lt;/my-component&gt;
107
+
108
+ &lt;!-- Using boolExists converter --&gt;
109
+ &lt;my-component hidden&gt;&lt;/my-component&gt;
110
+
111
+ &lt;!-- Combined usage --&gt;
112
+ &lt;my-component autoplay="true" loop="true" hidden&gt;&lt;/my-component&gt;</code></pre>
113
+
114
+ <h4>When to Use Each Converter</h4>
115
+ <p><strong>Use boolTrueFalse when:</strong></p>
116
+ <ul>
117
+ <li>You need explicit true/false values in HTML</li>
118
+ <li>The attribute value is important for clarity</li>
119
+ <li>Working with form controls or interactive elements</li>
120
+ </ul>
121
+
122
+ <p><strong>Use boolExists when:</strong></p>
123
+ <ul>
124
+ <li>Following HTML standards (like hidden, disabled attributes)</li>
125
+ <li>The presence of the attribute is what matters</li>
126
+ <li>Creating more semantic HTML</li>
127
+ </ul>
128
+
129
+ </main>
130
+ <div style="height:33vh"></div>
131
+ </body>
132
+ </html>
package/docs/utils/toTitleCase.html ADDED
@@ -0,0 +1,71 @@
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>toTitleCase - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>toTitleCase</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#parameters">Parameters</a><br />
31
+ <a href="#returnValue">Return Value</a><br />
32
+ <a href="#examples">Examples</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3>Description</h3>
37
+ <p>The <code>toTitleCase</code> utility function converts strings to title case format. It handles camelCase, snake_case, kebab-case, and regular text, converting them into properly capitalized title case with spaces between words.</p>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Import and use the toTitleCase function to convert strings to title case:</p>
41
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> toTitleCase <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/toTitleCase.js'</span>;<br /><br /><span class="hljs-keyword">const</span> result = <span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'helloWorld'</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// "Hello World"</span></code></pre>
42
+
43
+ <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
44
+ <h5><code>str<i>: string</i></code></h5>
45
+ <p>The string to convert to title case. Can be in any format (camelCase, snake_case, kebab-case, or regular text).</p>
46
+
47
+ <h3 id="returnValue"><a href="#returnValue" class="no-link">Return Value</a></h3>
48
+ <h5><code><i>string</i></code></h5>
49
+ <p>The input string converted to title case with proper spacing and capitalization.</p>
50
+
51
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
52
+
53
+ <h4>Converting camelCase</h4>
54
+ <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'firstName'</span>); <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customerAddress'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'userId'</span>); <span class="hljs-comment">// "User Id"</span></code></pre>
55
+
56
+ <h4>Converting snake_case</h4>
57
+ <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first_name'</span>); <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer_address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user_id'</span>); <span class="hljs-comment">// "User Id"</span></code></pre>
58
+
59
+ <h4>Converting kebab-case</h4>
60
+ <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'first-name'</span>); <span class="hljs-comment">// "First Name"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'customer-address'</span>); <span class="hljs-comment">// "Customer Address"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'user-id'</span>); <span class="hljs-comment">// "User Id"</span></code></pre>
61
+
62
+ <h4>Converting regular text</h4>
63
+ <pre><code class="hljs javascript"><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'hello world'</span>); <span class="hljs-comment">// "Hello World"</span><br /><span class="hljs-title function_">toTitleCase</span>(<span class="hljs-string">'the quick brown fox'</span>); <span class="hljs-comment">// "The Quick Brown Fox"</span></code></pre>
64
+
65
+ <h4>Practical Use Case: Table Column Headers</h4>
66
+ <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> columns = [<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'lastName'</span>, <span class="hljs-string">'emailAddress'</span>];<br /><br /><span class="hljs-keyword">const</span> headers = columns.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">col</span> =&gt;</span> <span class="hljs-title function_">toTitleCase</span>(col));<br /><span class="hljs-comment">// ["First Name", "Last Name", "Email Address"]</span></code></pre>
67
+
68
+ </main>
69
+ <div style="height:33vh"></div>
70
+ </body>
71
+ </html>
package/docs/utils/watchWindowSize.html ADDED
@@ -0,0 +1,166 @@
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>watchWindowSize - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>watchWindowSize</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#functions">Functions</a><br />
31
+ <a href="#examples">Examples</a><br />
32
+ </div>
33
+ </details>
34
+
35
+ <h3>Description</h3>
36
+ <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
37
+
38
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
39
+ <p>Import and use the window size watching functions:</p>
40
+ <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
41
+
42
+ const handler = (width) => {
43
+ console.log('Window width:', width);
44
+ };
45
+
46
+ // Start watching
47
+ const currentWidth = watchWindowSize(handler);
48
+
49
+ // Stop watching when done
50
+ unwatchWindowSize(handler);</code></pre>
51
+
52
+ <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
53
+
54
+ <h5><code>watchWindowSize(handler)</code></h5>
55
+ <p>Registers a handler function to be called when the window is resized.</p>
56
+ <ul>
57
+ <li><strong>handler:</strong> Function that receives the new window width</li>
58
+ <li><strong>Returns:</strong> Current window width</li>
59
+ </ul>
60
+
61
+ <h5><code>unwatchWindowSize(handler)</code></h5>
62
+ <p>Unregisters a previously registered handler function.</p>
63
+ <ul>
64
+ <li><strong>handler:</strong> The same function reference that was registered</li>
65
+ </ul>
66
+
67
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
68
+
69
+ <h4>Responsive Component</h4>
70
+ <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
71
+
72
+ class ResponsiveComponent extends LitElement {
73
+ constructor() {
74
+ super();
75
+ this.isMobile = false;
76
+ this.resizeHandler = this.handleResize.bind(this);
77
+ }
78
+
79
+ connectedCallback() {
80
+ super.connectedCallback();
81
+ const currentWidth = watchWindowSize(this.resizeHandler);
82
+ this.handleResize(currentWidth);
83
+ }
84
+
85
+ disconnectedCallback() {
86
+ super.disconnectedCallback();
87
+ unwatchWindowSize(this.resizeHandler);
88
+ }
89
+
90
+ handleResize(width) {
91
+ this.isMobile = width < 768;
92
+ this.requestUpdate();
93
+ }
94
+
95
+ render() {
96
+ return html`
97
+ &lt;div class="${this.isMobile ? 'mobile' : 'desktop'}"&gt;
98
+ Content adapts to screen size
99
+ &lt;/div&gt;
100
+ `;
101
+ }
102
+ }</code></pre>
103
+
104
+ <h4>Multiple Handlers</h4>
105
+ <pre><code class="hljs javascript">// Handler for navigation
106
+ const navHandler = (width) => {
107
+ const nav = document.querySelector('.navigation');
108
+ nav.classList.toggle('mobile', width < 1024);
109
+ };
110
+
111
+ // Handler for sidebar
112
+ const sidebarHandler = (width) => {
113
+ const sidebar = document.querySelector('.sidebar');
114
+ sidebar.style.display = width < 768 ? 'none' : 'block';
115
+ };
116
+
117
+ // Both handlers will be called on resize
118
+ watchWindowSize(navHandler);
119
+ watchWindowSize(sidebarHandler);
120
+
121
+ // Clean up when needed
122
+ unwatchWindowSize(navHandler);
123
+ unwatchWindowSize(sidebarHandler);</code></pre>
124
+
125
+ <h4>Breakpoint Detection</h4>
126
+ <pre><code class="hljs javascript">const breakpoints = {
127
+ mobile: 768,
128
+ tablet: 1024,
129
+ desktop: 1200
130
+ };
131
+
132
+ const breakpointHandler = (width) => {
133
+ let currentBreakpoint = 'mobile';
134
+
135
+ if (width >= breakpoints.desktop) {
136
+ currentBreakpoint = 'desktop';
137
+ } else if (width >= breakpoints.tablet) {
138
+ currentBreakpoint = 'tablet';
139
+ }
140
+
141
+ document.body.setAttribute('data-breakpoint', currentBreakpoint);
142
+
143
+ // Dispatch custom event
144
+ window.dispatchEvent(new CustomEvent('breakpointchange', {
145
+ detail: { width, breakpoint: currentBreakpoint }
146
+ }));
147
+ };
148
+
149
+ watchWindowSize(breakpointHandler);</code></pre>
150
+
151
+ <h4>Performance Benefits</h4>
152
+ <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
153
+ <pre><code class="hljs javascript">// This handler will only be called after resize events stop
154
+ const expensiveHandler = (width) => {
155
+ // Expensive DOM calculations or API calls
156
+ recalculateLayout();
157
+ updateCharts();
158
+ reflow();
159
+ };
160
+
161
+ watchWindowSize(expensiveHandler); // Automatically debounced</code></pre>
162
+
163
+ </main>
164
+ <div style="height:33vh"></div>
165
+ </body>
166
+ </html>
package/icons/error.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="error" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>
package/icons/warning.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="warning" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
package/scripts/build.js CHANGED
@@ -2,7 +2,7 @@ import fs from 'fs/promises';
2
2
  import { minify } from 'terser';
3
3
  import path from 'path';
4
4
  import { fileURLToPath } from 'url';
5
- import { ensureDir, copyDir, emptyDir } from '../src/utils/fs-utils.js';
5
+ import { ensureDir, copyDir, emptyDir } from 'kempo-server/utils/fs-utils';
6
6
 
7
7
  const __filename = fileURLToPath(import.meta.url);
8
8
  const __dirname = path.dirname(__filename);
@@ -89,6 +89,9 @@ const minifiedKempoHljsCSS = kempoHljsCSS.replace(/\s*\{\s*/g, '{').replace(/\s*
89
89
  console.log('Saving kempo-hljs.css');
90
90
  await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
91
91
 
92
+ console.log('Cleaning docs/src/ directory');
93
+ await emptyDir('./docs/src/');
94
+
92
95
  console.log('Copying dist/ to docs/');
93
96
  await ensureDir('./docs/');
94
97
  await copyDir('./dist', './docs/');
package/scripts/docs.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { dirname, join } from 'path';
2
2
  import { fileURLToPath } from 'url';
3
3
  import { spawn } from 'child_process';
4
- import { getArgs, runChildNodeProcess } from '../src/utils/cli.js';
4
+ import { getArgs, runChildNodeProcessScript } from 'kempo-server/utils/cli';
5
5
 
6
6
  const __filename = fileURLToPath(import.meta.url);
7
7
  const __dirname = dirname(__filename);
@@ -21,7 +21,9 @@ const {
21
21
  } = options;
22
22
 
23
23
  if(build && !noBuild){
24
- await runChildNodeProcess(join(__dirname, 'build.js'));
24
+ console.log('Building component files...');
25
+ await runChildNodeProcessScript(join(__dirname, 'build.js'));
26
+ console.log('Component files built!');
25
27
  }
26
28
 
27
29
  const rootDir = 'docs';