kempo-ui 0.0.28 → 0.0.30

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 (57) hide show
  1. package/.github/copilot-instructions.md +16 -0
  2. package/color-picker-fixed.png +0 -0
  3. package/dist/components/Accordion.js +1 -1
  4. package/dist/components/ColorPicker.js +34 -0
  5. package/dist/components/Table.js +1 -1
  6. package/dist/utils/cookie.js +1 -0
  7. package/dist/utils/object.js +1 -0
  8. package/dist/utils/string.js +1 -0
  9. package/dist/utils/type.js +1 -0
  10. package/dist/utils/wait.js +1 -0
  11. package/docs/components/color-picker.html +369 -0
  12. package/docs/components/content-slider.html +2 -2
  13. package/docs/components/theme-switcher.html +4 -4
  14. package/docs/index.html +33 -3
  15. package/docs/init-1.js +1 -1
  16. package/docs/nav-1.inc.html +6 -1
  17. package/docs/nav.inc.html +6 -1
  18. package/docs/src/components/Accordion.js +1 -1
  19. package/docs/src/components/ColorPicker.js +34 -0
  20. package/docs/src/components/Table.js +1 -1
  21. package/docs/src/utils/cookie.js +1 -0
  22. package/docs/src/utils/object.js +1 -0
  23. package/docs/src/utils/string.js +1 -0
  24. package/docs/src/utils/type.js +1 -0
  25. package/docs/src/utils/wait.js +1 -0
  26. package/docs/utils/cookie.html +145 -0
  27. package/docs/utils/object.html +93 -0
  28. package/docs/utils/string.html +83 -0
  29. package/docs/utils/toTitleCase.html +2 -1
  30. package/docs/utils/type.html +48 -0
  31. package/docs/utils/wait.html +48 -0
  32. package/package.json +1 -1
  33. package/src/components/Accordion.js +5 -13
  34. package/src/components/Card.js +1 -3
  35. package/src/components/ColorPicker.js +578 -0
  36. package/src/components/ContentSlider.js +1 -3
  37. package/src/components/Dialog.js +1 -3
  38. package/src/components/Icon.js +1 -3
  39. package/src/components/Import.js +1 -3
  40. package/src/components/PhotoViewer.js +1 -3
  41. package/src/components/Resize.js +1 -3
  42. package/src/components/ShowMore.js +1 -3
  43. package/src/components/SideMenu.js +1 -3
  44. package/src/components/Table.js +1 -1
  45. package/src/components/ThemeSwitcher.js +1 -3
  46. package/src/components/tableControls/Edit.js +1 -3
  47. package/src/components/tableControls/HiddenCount.js +1 -3
  48. package/src/components/tableControls/Search.js +1 -3
  49. package/src/components/tableControls/TableControl.js +1 -3
  50. package/src/utils/cookie.js +20 -0
  51. package/src/utils/object.js +198 -0
  52. package/src/utils/string.js +74 -0
  53. package/src/utils/type.js +13 -0
  54. package/src/utils/wait.js +18 -0
  55. package/dist/utils/toTitleCase.js +0 -1
  56. package/docs/src/utils/toTitleCase.js +0 -1
  57. package/src/utils/toTitleCase.js +0 -9
package/docs/utils/toTitleCase.html CHANGED
@@ -33,10 +33,11 @@
33
33
 
34
34
  <h3>Description</h3>
35
35
  <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>
36
+ <p><strong>Note:</strong> This function is now part of the string utilities module.</p>
36
37
 
37
38
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
39
  <p>Import and use the toTitleCase function to convert strings to title case:</p>
39
- <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>
40
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { toTitleCase } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.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>
40
41
 
41
42
  <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
42
43
  <h5><code>str<i>: string</i></code></h5>
package/docs/utils/type.html ADDED
@@ -0,0 +1,48 @@
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>Type Utilities - Kempo UI</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
9
+ <link rel="stylesheet" href="../kempo-vars.css" />
10
+ <link rel="stylesheet" href="../kempo.min.css" />
11
+ <link rel="stylesheet" href="../kempo-hljs.css" />
12
+ <link rel="stylesheet" href="../styles.css" />
13
+ <script>window.litDisableBundleWarning = true;</script>
14
+ <script src="../init-1.js" type="module"></script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav-1.inc.html"></k-import>
18
+ <main>
19
+ <h1>Type Utilities</h1>
20
+
21
+ <k-accordion persistent-id="toc" class="b r mb">
22
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
23
+ <k-accordion-panel name="toc-panel">
24
+ <div class="m ">
25
+ <h6>Functions</h6>
26
+ <a href="#typeOf">typeOf</a><br />
27
+ <a href="#isType">isType</a><br />
28
+ </div>
29
+ </k-accordion-panel>
30
+ </k-accordion>
31
+
32
+ <h3>Description</h3>
33
+ <p>The type utilities module provides functions for checking and identifying JavaScript value types, including enhanced type detection for arrays, elements, and null values.</p>
34
+
35
+ <h3 id="typeOf"><a href="#typeOf" class="no-link">typeOf</a></h3>
36
+ <p>Returns the type of a value as a string, with enhanced detection for arrays, DOM elements, and null.</p>
37
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { typeOf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/type.js'</span>;<br /><br />typeOf(<span class="hljs-string">'hello'</span>); <span class="hljs-comment">// "string"</span><br />typeOf(<span class="hljs-number">42</span>); <span class="hljs-comment">// "number"</span><br />typeOf([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]); <span class="hljs-comment">// "array"</span><br />typeOf(<span class="hljs-literal">null</span>); <span class="hljs-comment">// "null"</span><br />typeOf(document.body); <span class="hljs-comment">// "element" (in browser)</span></code></pre>
38
+
39
+ <h3 id="isType"><a href="#isType" class="no-link">isType</a></h3>
40
+ <p>Checks if a value is of a specific type.</p>
41
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { isType } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/type.js'</span>;<br /><br />isType(<span class="hljs-string">'hello'</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// true</span><br />isType([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>], <span class="hljs-string">'array'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-literal">null</span>, <span class="hljs-string">'null'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-number">42</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// false</span></code></pre>
42
+
43
+ </main>
44
+ <div style="height:33vh"></div>
45
+ <script type="module" src="../src/components/Import.js"></script>
46
+ <script type="module" src="../src/components/Accordion.js"></script>
47
+ </body>
48
+ </html>
package/docs/utils/wait.html ADDED
@@ -0,0 +1,48 @@
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>Wait Utilities - Kempo UI</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
9
+ <link rel="stylesheet" href="../kempo-vars.css" />
10
+ <link rel="stylesheet" href="../kempo.min.css" />
11
+ <link rel="stylesheet" href="../kempo-hljs.css" />
12
+ <link rel="stylesheet" href="../styles.css" />
13
+ <script>window.litDisableBundleWarning = true;</script>
14
+ <script src="../init-1.js" type="module"></script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav-1.inc.html"></k-import>
18
+ <main>
19
+ <h1>Wait Utilities</h1>
20
+
21
+ <k-accordion persistent-id="toc" class="b r mb">
22
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
23
+ <k-accordion-panel name="toc-panel">
24
+ <div class="m ">
25
+ <h6>Functions</h6>
26
+ <a href="#wait">wait</a><br />
27
+ <a href="#waitFrames">waitFrames</a><br />
28
+ </div>
29
+ </k-accordion-panel>
30
+ </k-accordion>
31
+
32
+ <h3>Description</h3>
33
+ <p>The wait utilities module provides functions for creating delays and waiting for animation frames, useful for timing operations and animations.</p>
34
+
35
+ <h3 id="wait"><a href="#wait" class="no-link">wait</a></h3>
36
+ <p>Creates a promise that resolves after a specified number of milliseconds.</p>
37
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { wait } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 1 second</span><br />await wait(<span class="hljs-number">1000</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 1 second'</span>);</code></pre>
38
+
39
+ <h3 id="waitFrames"><a href="#waitFrames" class="no-link">waitFrames</a></h3>
40
+ <p>Creates a promise that resolves after a specified number of animation frames.</p>
41
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { waitFrames } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 2 animation frames</span><br />await waitFrames(<span class="hljs-number">2</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 2 frames'</span>);</code></pre>
42
+
43
+ </main>
44
+ <div style="height:33vh"></div>
45
+ <script type="module" src="../src/components/Import.js"></script>
46
+ <script type="module" src="../src/components/Accordion.js"></script>
47
+ </body>
48
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.28",
3
+ "version": "0.0.30",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
package/src/components/Accordion.js CHANGED
@@ -1,11 +1,9 @@
1
1
  import ShadowComponent from './ShadowComponent.js';
2
2
  import { html, css } from '../lit-all.min.js';
3
- import { boolExists, boolTrueFalse } from '../utils/propConverters.js';
3
+ import { boolExists } from '../utils/propConverters.js';
4
4
 
5
5
  export default class Accordion extends ShadowComponent {
6
- /*
7
- Properties
8
- */
6
+ /* Properties */
9
7
  static properties = {
10
8
  multiple: {
11
9
  type: Boolean,
@@ -29,9 +27,7 @@ export default class Accordion extends ShadowComponent {
29
27
  super.connectedCallback?.();
30
28
  }
31
29
 
32
- /*
33
- Lifecycle: Restore persistent state when persistentId changes
34
- */
30
+ /* Lifecycle Callbacks */
35
31
  updated(changedProps) {
36
32
  super.updated?.(changedProps);
37
33
  if (changedProps.has('persistentId') && this.persistentId && window?.localStorage) {
@@ -192,9 +188,7 @@ render() {
192
188
  }
193
189
 
194
190
  export class AccordionHeader extends ShadowComponent {
195
- /*
196
- Properties
197
- */
191
+ /* Properties */
198
192
  static properties = {
199
193
  forPanel: { type: String, reflect: true, attribute: 'for-panel' },
200
194
  active: { type: Boolean, reflect: true, converter: boolExists }
@@ -262,9 +256,7 @@ export class AccordionHeader extends ShadowComponent {
262
256
  }
263
257
 
264
258
  export class AccordionPanel extends ShadowComponent {
265
- /*
266
- Properties
267
- */
259
+ /* Properties */
268
260
  static properties = {
269
261
  name: { type: String, reflect: true },
270
262
  active: { type: Boolean, reflect: true, converter: boolExists },
package/src/components/Card.js CHANGED
@@ -2,9 +2,7 @@ import ShadowComponent from './ShadowComponent.js';
2
2
  import { html, css } from '../lit-all.min.js';
3
3
 
4
4
  export default class Card extends ShadowComponent {
5
- /*
6
- Properties
7
- */
5
+ /* Properties */
8
6
  static properties = {
9
7
  label: { type: String, reflect: true }
10
8
  };