kempo-ui 0.0.9 → 0.0.11

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 (60) hide show
  1. package/dist/src/components/Card.js +3 -3
  2. package/dist/src/components/Dialog.js +11 -11
  3. package/dist/src/components/Icon.js +1 -1
  4. package/dist/src/components/Toggle.js +15 -14
  5. package/dist/src/components/Tree.js +11 -3
  6. package/docs/components/accordion.html +34 -123
  7. package/docs/components/card.html +43 -58
  8. package/docs/components/collapsible.html +38 -159
  9. package/docs/components/content-slider.html +36 -183
  10. package/docs/components/dialog.html +38 -303
  11. package/docs/components/focus-capture.html +42 -79
  12. package/docs/components/hybrid-component.html +36 -73
  13. package/docs/components/icon.html +43 -123
  14. package/docs/components/import.html +43 -40
  15. package/docs/components/light-component.html +37 -61
  16. package/docs/components/persistant-collapsible.html +40 -85
  17. package/docs/components/photo-viewer.html +39 -187
  18. package/docs/components/resize.html +40 -141
  19. package/docs/components/shadow-component.html +41 -54
  20. package/docs/components/show-more.html +42 -94
  21. package/docs/components/side-menu.html +41 -124
  22. package/docs/components/sortable.html +38 -95
  23. package/docs/components/split.html +41 -113
  24. package/docs/components/table.html +34 -271
  25. package/docs/components/tableControls.html +54 -56
  26. package/docs/components/tableCustomFields.html +54 -92
  27. package/docs/components/tableFetchRecords.html +52 -91
  28. package/docs/components/tableFieldSortHide.html +54 -54
  29. package/docs/components/tablePagination.html +54 -79
  30. package/docs/components/tableRecordEditing.html +54 -123
  31. package/docs/components/tableRecordFiltering.html +52 -65
  32. package/docs/components/tableRecordHiding.html +53 -58
  33. package/docs/components/tableRecordSearching.html +54 -54
  34. package/docs/components/tableRecordSelection.html +55 -55
  35. package/docs/components/tableRowControls.html +55 -58
  36. package/docs/components/tableSorting.html +54 -52
  37. package/docs/components/tabs.html +45 -148
  38. package/docs/components/tags.html +40 -73
  39. package/docs/components/theme-switcher.html +38 -87
  40. package/docs/components/timestamp.html +40 -45
  41. package/docs/components/toast.html +32 -318
  42. package/docs/components/toggle.html +41 -120
  43. package/docs/components/tree.html +41 -146
  44. package/docs/index.html +56 -209
  45. package/docs/src/components/Card.js +3 -3
  46. package/docs/src/components/Dialog.js +11 -11
  47. package/docs/src/components/Icon.js +1 -1
  48. package/docs/src/components/Toggle.js +15 -14
  49. package/docs/src/components/Tree.js +11 -3
  50. package/docs/utils/debounce.html +31 -33
  51. package/docs/utils/drag.html +31 -44
  52. package/docs/utils/formatTimestamp.html +31 -69
  53. package/docs/utils/init.js +1 -0
  54. package/docs/utils/propConverters.html +26 -82
  55. package/docs/utils/toTitleCase.html +31 -26
  56. package/docs/utils/watchWindowSize.html +8 -98
  57. package/package.json +1 -1
  58. package/src/components/Card.js +3 -0
  59. package/src/components/Toggle.js +69 -69
  60. package/src/components/Tree.js +10 -2
package/docs/components/hybrid-component.html CHANGED
@@ -3,106 +3,69 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../src/kempo-hljs.css" />
6
+ <title>watchWindowSize - Kempo UI</title>
7
+ <link rel="stylesheet" href="../kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../kempo-hljs.css" />
9
10
  <link rel="stylesheet" href="../styles.css" />
11
+ <script>window.litDisableBundleWarning = true;</script>
10
12
  <script type="module" src="./init.js"></script>
11
13
  </head>
12
14
  <body>
13
15
  <k-import src="../nav.inc.html"></k-import>
14
- <h1 class="ta-center">HybridComponent</h1>
15
16
  <main>
16
- <details class="b r mb">
17
+ <h1>watchWindowSize</h1>
18
+
19
+ <details
20
+ class="b r mb"
21
+ >
17
22
  <summary class="p">Table of Contents</summary>
18
23
  <div class="m mt0 pl">
19
- <h6>Guide</h6>
20
- <a href="#overview">Overview</a><br />
24
+ <h6>Usage</h6>
21
25
  <a href="#basicUsage">Basic Usage</a><br />
22
- <a href="#whenToUse">When to Use</a><br />
23
-
24
- <h6 class="mt">JavaScript Reference</h6>
25
- <a href="#constructor">Constructor</a><br />
26
- <a href="#requirements">Requirements</a><br />
27
- <a href="#properties">Properties</a><br />
28
- <a href="#methods">Methods</a><br />
26
+ <a href="#functions">Functions</a><br />
27
+ <a href="#examples">Examples</a><br />
29
28
  </div>
30
29
  </details>
31
30
 
32
- <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
33
- <p>HybridComponent is a base class that extends <a href="shadow-component.html">ShadowComponent</a> and provides both shadow DOM rendering with Kempo CSS styles AND light DOM rendering. Use this when you want your component to:</p>
34
- <ul>
35
- <li>Have shadow DOM with Kempo CSS for internal UI elements</li>
36
- <li>Also render content to the light DOM alongside natural children</li>
37
- <li>Combine the benefits of both shadow and light DOM</li>
38
- </ul>
39
- <p>Components like <a href="collapsible.html">Collapsible</a>, <a href="dialog.html">Dialog</a>, and <a href="side-menu.html">SideMenu</a> extend HybridComponent.</p>
31
+ <h3>Description</h3>
32
+ <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>
40
33
 
41
34
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
42
- <p>Create a custom component by extending HybridComponent and implementing both <code>render()</code> for shadow DOM and <code>renderLightDom()</code> for light DOM:</p>
43
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> HybridComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./HybridComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHybridComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">HybridComponent</span> {<br /> <span class="hljs-keyword">static</span> properties = {<br /> <span class="hljs-attr">title</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br /> };<br /><br /> <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br /> :host {<br /> display: block;<br /> }<br /> .shadow-content {<br /> background: var(--c_primary);<br /> color: var(--tc_on_primary);<br /> padding: var(--spacer);<br /> }<br /> `</span>;<br /><br /> <span class="hljs-title function_">constructor</span>() {<br /> <span class="hljs-variable language_">super</span>();<br /> <span class="hljs-variable language_">this</span>.title = <span class="hljs-string">'Hybrid'</span>;<br /> }<br /><br /> <span class="hljs-comment">// Shadow DOM content with Kempo CSS styles</span><br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> &lt;div class="shadow-content"&gt;<br /> &lt;h3&gt;<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.title}</span> Component&lt;/h3&gt;<br /> &lt;slot name="lightRoot"&gt;&lt;/slot&gt;<br /> &lt;/div&gt;<br /> `</span>;<br /> }<br /><br /> <span class="hljs-comment">// Light DOM content alongside natural children</span><br /> <span class="hljs-title function_">renderLightDom</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> &lt;p class="p"&gt;This is rendered to light DOM&lt;/p&gt;<br /> &lt;slot&gt;&lt;/slot&gt;<br /> `</span>;<br /> }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-hybrid-component'</span>, MyHybridComponent);</code></pre>
44
-
45
- <p><strong>Important:</strong> The default <code>render()</code> method includes <code>&lt;slot name="lightRoot"&gt;&lt;/slot&gt;</code> which is where the light DOM content appears. If you override <code>render()</code>, make sure to include this slot.</p>
35
+ <p>Import and use the window size watching functions:</p>
36
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
46
37
 
47
- <p><strong>Also Important:</strong> Always call <code>super.updated()</code> when overriding the <code>updated()</code> lifecycle method:</p>
48
- <pre><code class="hljs javascript"><span class="hljs-title function_">updated</span>(changedProperties) {<br /> <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">updated</span>(); <span class="hljs-comment">// Required!</span><br /> <br /> <span class="hljs-comment">// Your custom logic here</span><br />}</code></pre>
49
-
50
- <h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
51
- <p>Use HybridComponent when:</p>
52
- <ul>
53
- <li>You need styled internal UI elements (buttons, headers, etc.) in shadow DOM</li>
54
- <li>You also need to render content to light DOM alongside natural children</li>
55
- <li>You want Kempo CSS styles for your component UI but need flexibility for user content</li>
56
- </ul>
38
+ <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
57
39
 
58
- <p><strong>Example use cases:</strong></p>
40
+ <h5><code>watchWindowSize(handler)</code></h5>
41
+ <p>Registers a handler function to be called when the window is resized.</p>
59
42
  <ul>
60
- <li><strong>Dialog:</strong> Shadow DOM for styled dialog chrome (header, footer, overlay), light DOM for user content</li>
61
- <li><strong>Collapsible:</strong> Shadow DOM for toggle button, light DOM for collapsible content</li>
62
- <li><strong>SideMenu:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
43
+ <li><strong>handler:</strong> Function that receives the new window width</li>
44
+ <li><strong>Returns:</strong> Current window width</li>
63
45
  </ul>
64
46
 
65
- <p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
66
- <p>Use <a href="light-component.html">LightComponent</a> instead when you only need light DOM.</p>
67
-
68
- <h2 id="jsRef">JavaScript Reference</h2>
69
-
70
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
71
- <h6>Extends ShadowComponent</h6>
72
- <h5><code>new HybridComponent()</code></h5>
73
- <p>Creates a new HybridComponent instance with both shadow DOM (with Kempo CSS) and light DOM rendering.</p>
74
-
75
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
47
+ <h5><code>unwatchWindowSize(handler)</code></h5>
48
+ <p>Unregisters a previously registered handler function.</p>
76
49
  <ul>
77
- <li>Lit (html, render)</li>
78
- <li><a href="shadow-component.html">ShadowComponent</a></li>
50
+ <li><strong>handler:</strong> The same function reference that was registered</li>
79
51
  </ul>
80
52
 
81
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
82
- <h5><code>lightRoot<i>: HTMLElement</i></code></h5>
83
- <p>A container element with <code>display: contents</code> that holds the rendered light DOM content. It has <code>slot="lightRoot"</code> to connect it to the shadow DOM slot. Created automatically by <code>createRenderRoot()</code>.</p>
84
-
85
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
86
- <h5><code>createRenderRoot()<i>: Element</i></code></h5>
87
- <p>Creates both shadow DOM (via <code>super.createRenderRoot()</code>) and light DOM render containers. This method:</p>
88
- <ul>
89
- <li>Calls the parent ShadowComponent's <code>createRenderRoot()</code> to set up shadow DOM with Kempo CSS</li>
90
- <li>Creates a <code>lightRoot</code> div with <code>display: contents</code> and <code>slot="lightRoot"</code></li>
91
- <li>Appends <code>lightRoot</code> to the component element</li>
92
- <li>Returns the shadow render container</li>
93
- </ul>
53
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
54
+
55
+ <h4>Responsive Component</h4>
56
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br /> Content adapts to screen size<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> `</span>;<br /> }<br />}</code></pre>
94
57
 
95
- <h5><code>updated()<i>: void</i></code></h5>
96
- <p>Called automatically by Lit when the component updates. Renders the result of <code>renderLightDom()</code> into <code>lightRoot</code>. Override this method if needed, but always call <code>super.updated()</code>.</p>
58
+ <h4>Multiple Handlers</h4>
59
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
97
60
 
98
- <h5><code>renderLightDom()<i>: TemplateResult</i></code></h5>
99
- <p>Override this method to define what should be rendered to the light DOM. Returns an empty template by default. Use Lit's <code>html</code> tagged template literal to return your content. Typically includes a <code>&lt;slot&gt;&lt;/slot&gt;</code> for natural children.</p>
61
+ <h4>Breakpoint Detection</h4>
62
+ <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
100
63
 
101
- <h5><code>render()<i>: TemplateResult</i></code></h5>
102
- <p>Override this method to define what should be rendered to the shadow DOM. The default implementation returns <code>html`&lt;slot name="lightRoot"&gt;&lt;/slot&gt;`</code> which displays the light DOM content. When overriding, make sure to include this slot where you want the light DOM content to appear.</p>
64
+ <h4>Performance Benefits</h4>
65
+ <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
66
+ <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
103
67
 
104
68
  </main>
105
69
  <div style="height:33vh"></div>
106
- <script type="module" src="../src/components/Import.js"></script>
107
70
  </body>
108
71
  </html>
package/docs/components/icon.html CHANGED
@@ -3,149 +3,69 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Icon - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
8
- <link rel="stylesheet" href="../src/kempo-hljs.css" />
6
+ <title>watchWindowSize - Kempo UI</title>
7
+ <link rel="stylesheet" href="../kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../kempo-hljs.css" />
9
10
  <link rel="stylesheet" href="../styles.css" />
11
+ <script>window.litDisableBundleWarning = true;</script>
10
12
  <script type="module" src="./init.js"></script>
11
13
  </head>
12
14
  <body>
13
15
  <k-import src="../nav.inc.html"></k-import>
14
- <h1 class="ta-center">Icon</h1>
15
16
  <main>
16
- <details class="b r mb">
17
+ <h1>watchWindowSize</h1>
18
+
19
+ <details
20
+ class="b r mb"
21
+ >
17
22
  <summary class="p">Table of Contents</summary>
18
23
  <div class="m mt0 pl">
19
- <h6>Examples</h6>
24
+ <h6>Usage</h6>
20
25
  <a href="#basicUsage">Basic Usage</a><br />
21
- <a href="#explicitSource">Explicitly Set the Source</a><br />
22
- <a href="#fallbackIcon">Fallback Icon</a><br />
23
- <a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
24
- <a href="#addingIcons">Adding Icons</a><br />
25
- <a href="#updatingIconDirectoryPath">Updating the Icon Directory Path</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="#properties">Properties</a><br />
31
- <a href="#methods">Methods</a><br />
26
+ <a href="#functions">Functions</a><br />
27
+ <a href="#examples">Examples</a><br />
32
28
  </div>
33
29
  </details>
34
30
 
35
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
- <p>Create an icon using the <code>k-icon</code> component. You can specify the icon by setting the <code>name</code> or <code>src</code> attribute.</p>
37
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
38
- <div class="row -mx mb">
39
- <div class="col d-span-6 m-span-12 px">
40
- <k-icon name="folder"></k-icon>
41
- </div>
42
- <div class="col d-span-6 m-span-12 px">
43
- <k-icon src="/path/to/icon.svg"></k-icon>
44
- </div>
45
- </div>
46
-
47
- <div class="row -mx mb">
48
- <div class="col d-span-6 m-span-12 px">
49
- <k-card label="HTML">
50
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"play"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pause"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
51
- </k-card>
52
- </div>
53
- <div class="col d-span-6 m-span-12 px">
54
- <k-card label="Output*">
55
- <k-icon name="menu"></k-icon>
56
- <k-icon name="close"></k-icon>
57
- <k-icon name="play"></k-icon>
58
- <k-icon name="pause"></k-icon>
59
- </k-card>
60
- </div>
61
- </div>
62
-
63
- <h3 id="explicitSource"><a href="#explicitSource" class="no-link">Explicitly Set the Source</a></h3>
64
- <p>You can use any SVG file that is publicly available (on your site or any other public domain) by using the <code>src</code> attribute instead of <code>name</code>. The Icon component will automatically fix the SVG to ensure compatibility by removing width/height attributes and setting fill colors to <code>currentColor</code> so the icon adapts to the current text color.</p>
65
- <div class="row -mx mb">
66
- <div class="col d-span-6 m-span-12 px">
67
- <k-card label="HTML">
68
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
69
- </k-card>
70
- </div>
71
- <div class="col d-span-6 m-span-12 px">
72
- <k-card label="Output*">
73
- <k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>
74
- </k-card>
75
- </div>
76
- </div>
77
-
78
- <h3 id="fallbackIcon"><a href="#fallbackIcon" class="no-link">Fallback Icon</a></h3>
79
- <p>Put an SVG inside of the <code>k-icon</code> to be the fallback if one is not found that matches the provided name or source. Otherwise a <k-icon></k-icon> will be the fallback icon.</p>
80
- <div class="row -mx mb">
81
- <div class="col d-span-6 m-span-12 px">
82
- <k-card label="HTML">
83
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
84
- </k-card>
85
- </div>
86
- <div class="col d-span-6 m-span-12 px">
87
- <k-card label="Output*">
88
- <k-icon name="invalid"></k-icon>
89
- <k-icon name="invalid">
90
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
91
- </k-icon>
92
- </k-card>
93
- </div>
94
- </div>
95
-
96
- <h3 id="changingIconDirectory"><a href="#changingIconDirectory" class="no-link">Changing the Icon Directory Location</a></h3>
97
- <p>To change the location of the directory holding the icons import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location, do this before icons are loaded (for example in the head of the document).</p>
98
- <pre><code class="hljs xml"><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> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br /> Icon.pathToIcons = <span class="hljs-string">'./pathTo/icons'</span>;<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
31
+ <h3>Description</h3>
32
+ <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>
99
33
 
100
- <h3 id="addingIcons"><a href="#addingIcons" class="no-link">Adding Icons</a></h3>
101
- <p>Add your SVGs to the directory. The Icon component will automatically remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag and set the fill of all objects (path, rect, circle) to <code>currentColor</code>. This allows the icon to adapt to the font color where it is rendered and ensures consistent sizing. However, you can manually prepare your icons this way for better performance.</p>
102
- <div class="row -mx mb">
103
- <div class="col d-span-6 m-span-12 px">
104
- <k-card label="Before">
105
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"24"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"24"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
106
- </k-card>
107
- </div>
108
- <div class="col d-span-6 m-span-12 px">
109
- <k-card label="After">
110
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 -960 960 960"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></code></pre>
111
- </k-card>
112
- </div>
113
- </div>
34
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
35
+ <p>Import and use the window size watching functions:</p>
36
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
114
37
 
115
- <h3 id="updatingIconDirectoryPath"><a href="#updatingIconDirectoryPath" class="no-link">Updating the Icon Directory Path</a></h3>
116
- <p>To change the location of the directory holding the icons, import the <code>Icon</code> class, and set the static member <code>pathToIcons</code> to point to the correct location. Do this before icons are loaded (for example, in the head of the document).</p>
117
- <pre><code class="hljs xml"><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> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br /> Icon.pathToIcons = [<span class="hljs-string">'./pathTo/icons'</span>];<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
38
+ <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
39
+
40
+ <h5><code>watchWindowSize(handler)</code></h5>
41
+ <p>Registers a handler function to be called when the window is resized.</p>
42
+ <ul>
43
+ <li><strong>handler:</strong> Function that receives the new window width</li>
44
+ <li><strong>Returns:</strong> Current window width</li>
45
+ </ul>
118
46
 
119
- <h2 id="jsRef">JavaScript Reference</h2>
47
+ <h5><code>unwatchWindowSize(handler)</code></h5>
48
+ <p>Unregisters a previously registered handler function.</p>
49
+ <ul>
50
+ <li><strong>handler:</strong> The same function reference that was registered</li>
51
+ </ul>
120
52
 
121
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
122
- <h6>Extends <a href="./component.html">Component</a></h6>
123
- <h5>
124
- <code>new Icon()</code><br />
125
- <code>new Icon(<i>string</i> name)</code>
126
- </h5>
53
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
54
+
55
+ <h4>Responsive Component</h4>
56
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br /> Content adapts to screen size<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> `</span>;<br /> }<br />}</code></pre>
127
57
 
128
- <h4>Parameters</h4>
129
- <h5><code>name<i>: string</i></code></h5>
130
- <p>The name of the icon.</p>
58
+ <h4>Multiple Handlers</h4>
59
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
131
60
 
132
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
133
- <ul>
134
- <li><a href="./shadow-component.html">ShadowComponent</a></li>
135
- </ul>
61
+ <h4>Breakpoint Detection</h4>
62
+ <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
136
63
 
137
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
138
- <h5><code>name<i>: string</i></code></h5>
139
- <p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
140
- <h5><code>src<i>: string</i></code></h5>
141
- <p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
142
- <h5><code>pathToIcons<i>: Array</i></code></h5>
143
- <p>An array of paths to directories containing icons. This is a static property that affects all icon instances.</p>
64
+ <h4>Performance Benefits</h4>
65
+ <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
66
+ <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
144
67
 
145
68
  </main>
146
69
  <div style="height:33vh"></div>
147
- <script type="module" src="../src/components/Import.js"></script>
148
- <script type="module" src="../src/components/Card.js"></script>
149
- <script type="module" src="../src/components/Icon.js"></script>
150
70
  </body>
151
- </html>
71
+ </html>
package/docs/components/import.html CHANGED
@@ -3,66 +3,69 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Import - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../src/kempo-hljs.css" />
6
+ <title>watchWindowSize - Kempo UI</title>
7
+ <link rel="stylesheet" href="../kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../kempo-hljs.css" />
9
10
  <link rel="stylesheet" href="../styles.css" />
11
+ <script>window.litDisableBundleWarning = true;</script>
10
12
  <script type="module" src="./init.js"></script>
11
13
  </head>
12
14
  <body>
13
15
  <k-import src="../nav.inc.html"></k-import>
14
- <h1 class="ta-center">Import</h1>
15
16
  <main>
16
- <details class="b r mb">
17
+ <h1>watchWindowSize</h1>
18
+
19
+ <details
20
+ class="b r mb"
21
+ >
17
22
  <summary class="p">Table of Contents</summary>
18
23
  <div class="m mt0 pl">
19
- <h6>Examples</h6>
24
+ <h6>Usage</h6>
20
25
  <a href="#basicUsage">Basic Usage</a><br />
21
-
22
- <h6 class="mt">JavaScript Reference</h6>
23
- <a href="#constructor">Constructor</a><br />
24
- <a href="#requirements">Requirements</a><br />
25
- <a href="#properties">Properties</a><br />
26
- <a href="#methods">Methods</a><br />
26
+ <a href="#functions">Functions</a><br />
27
+ <a href="#examples">Examples</a><br />
27
28
  </div>
28
29
  </details>
29
30
 
30
- <h3>What is an import</h3>
31
- <p>Import commonly used HTML snippets.</p>
32
- <k-card label="import-me.html">
33
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
34
- </k-card>
35
- <k-card label="HTML">
36
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
37
- </k-card>
38
- <k-card label="Results">
39
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span> <span class="hljs-attr">rendered</span>=<span class="hljs-string">"true"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I am html<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-import</span>&gt;</span></code></pre>
40
- </k-card>
31
+ <h3>Description</h3>
32
+ <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>
41
33
 
42
- <h2 id="jsRef">JavaScript Reference</h2>
34
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
35
+ <p>Import and use the window size watching functions:</p>
36
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
43
37
 
44
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
45
- <h6>Extends <a href="./component.html">Component</a></h6>
46
- <h5>
47
- <code>new Import()</code>
48
- </h5>
38
+ <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
39
+
40
+ <h5><code>watchWindowSize(handler)</code></h5>
41
+ <p>Registers a handler function to be called when the window is resized.</p>
42
+ <ul>
43
+ <li><strong>handler:</strong> Function that receives the new window width</li>
44
+ <li><strong>Returns:</strong> Current window width</li>
45
+ </ul>
49
46
 
50
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
47
+ <h5><code>unwatchWindowSize(handler)</code></h5>
48
+ <p>Unregisters a previously registered handler function.</p>
51
49
  <ul>
52
- <li><a href="./component.html">Component</a></li>
50
+ <li><strong>handler:</strong> The same function reference that was registered</li>
53
51
  </ul>
54
52
 
55
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
56
- <h5><code>src<i>: string</i></code></h5>
57
- <p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
53
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
54
+
55
+ <h4>Responsive Component</h4>
56
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResponsiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LitElement</span> </span>{<br /> <span class="hljs-keyword">constructor</span>() {<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.isMobile = <span class="hljs-literal">false</span>;<br /> <span class="hljs-keyword">this</span>.resizeHandler = <span class="hljs-keyword">this</span>.handleResize.bind(<span class="hljs-keyword">this</span>);<br /> }<br /><br /> connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> currentWidth = watchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> <span class="hljs-keyword">this</span>.handleResize(currentWidth);<br /> }<br /><br /> disconnectedCallback() {<br /> <span class="hljs-keyword">super</span>.disconnectedCallback();<br /> unwatchWindowSize(<span class="hljs-keyword">this</span>.resizeHandler);<br /> }<br /><br /> handleResize(width) {<br /> <span class="hljs-keyword">this</span>.isMobile = width &lt; <span class="hljs-number">768</span>;<br /> <span class="hljs-keyword">this</span>.requestUpdate();<br /> }<br /><br /> render() {<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-keyword">this</span>.isMobile ? <span class="hljs-string">'mobile'</span> : <span class="hljs-string">'desktop'</span>}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><br /> Content adapts to screen size<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> `</span>;<br /> }<br />}</code></pre>
57
+
58
+ <h4>Multiple Handlers</h4>
59
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Handler for navigation</span><br /><span class="hljs-keyword">const</span> navHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> nav = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.navigation'</span>);<br /> nav.classList.toggle(<span class="hljs-string">'mobile'</span>, width &lt; <span class="hljs-number">1024</span>);<br />};<br /><br /><span class="hljs-comment">// Handler for sidebar</span><br /><span class="hljs-keyword">const</span> sidebarHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> sidebar = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.sidebar'</span>);<br /> sidebar.style.display = width &lt; <span class="hljs-number">768</span> ? <span class="hljs-string">'none'</span> : <span class="hljs-string">'block'</span>;<br />};<br /><br /><span class="hljs-comment">// Both handlers will be called on resize</span><br />watchWindowSize(navHandler);<br />watchWindowSize(sidebarHandler);<br /><br /><span class="hljs-comment">// Clean up when needed</span><br />unwatchWindowSize(navHandler);<br />unwatchWindowSize(sidebarHandler);</code></pre>
60
+
61
+ <h4>Breakpoint Detection</h4>
62
+ <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> breakpoints = {<br /> <span class="hljs-attr">mobile</span>: <span class="hljs-number">768</span>,<br /> <span class="hljs-attr">tablet</span>: <span class="hljs-number">1024</span>,<br /> <span class="hljs-attr">desktop</span>: <span class="hljs-number">1200</span><br />};<br /><br /><span class="hljs-keyword">const</span> breakpointHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width &gt;= breakpoints.tablet) {<br /> currentBreakpoint = <span class="hljs-string">'tablet'</span>;<br /> }<br /> <br /> <span class="hljs-built_in">document</span>.body.setAttribute(<span class="hljs-string">'data-breakpoint'</span>, currentBreakpoint);<br /> <br /> <span class="hljs-comment">// Dispatch custom event</span><br /> <span class="hljs-built_in">window</span>.dispatchEvent(<span class="hljs-keyword">new</span> CustomEvent(<span class="hljs-string">'breakpointchange'</span>, {<br /> <span class="hljs-attr">detail</span>: { width, <span class="hljs-attr">breakpoint</span>: currentBreakpoint }<br /> }));<br />};<br /><br />watchWindowSize(breakpointHandler);</code></pre>
58
63
 
59
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
60
- <h5><code>load()<i>: Promise</i></code></h5>
61
- <p>Loads the HTML snippet from the specified source URL.</p>
64
+ <h4>Performance Benefits</h4>
65
+ <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
66
+ <pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =&gt;</span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
62
67
 
63
68
  </main>
64
69
  <div style="height:33vh"></div>
65
- <script type="module" src="../src/components/Import.js"></script>
66
- <script type="module" src="../src/components/Card.js"></script>
67
70
  </body>
68
- </html>
71
+ </html>