kempo-ui 0.0.11 → 0.0.13
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.
- package/docs/components/accordion.html +122 -32
- package/docs/components/card.html +57 -41
- package/docs/components/collapsible.html +158 -36
- package/docs/components/content-slider.html +182 -35
- package/docs/components/dialog.html +79 -45
- package/docs/components/focus-capture.html +78 -40
- package/docs/components/hybrid-component.html +72 -34
- package/docs/components/icon.html +122 -41
- package/docs/components/import.html +39 -41
- package/docs/components/light-component.html +60 -35
- package/docs/components/persistant-collapsible.html +84 -38
- package/docs/components/photo-viewer.html +186 -37
- package/docs/components/resize.html +140 -38
- package/docs/components/shadow-component.html +53 -39
- package/docs/components/show-more.html +93 -40
- package/docs/components/side-menu.html +122 -38
- package/docs/components/sortable.html +94 -36
- package/docs/components/split.html +112 -39
- package/docs/components/table.html +269 -31
- package/docs/components/tableControls.html +54 -51
- package/docs/components/tableCustomFields.html +90 -51
- package/docs/components/tableFetchRecords.html +89 -49
- package/docs/components/tableFieldSortHide.html +52 -51
- package/docs/components/tablePagination.html +77 -51
- package/docs/components/tableRecordEditing.html +121 -51
- package/docs/components/tableRecordFiltering.html +63 -49
- package/docs/components/tableRecordHiding.html +56 -50
- package/docs/components/tableRecordSearching.html +52 -51
- package/docs/components/tableRecordSelection.html +53 -52
- package/docs/components/tableRowControls.html +56 -52
- package/docs/components/tableSorting.html +50 -51
- package/docs/components/tabs.html +147 -43
- package/docs/components/tags.html +72 -38
- package/docs/components/theme-switcher.html +86 -36
- package/docs/components/timestamp.html +44 -38
- package/docs/components/toast.html +25 -44
- package/docs/components/toggle.html +119 -39
- package/docs/components/tree.html +145 -39
- package/docs/dev.config.json +1 -1
- package/docs/index.html +209 -55
- package/docs/utils/debounce.html +31 -28
- package/docs/utils/drag.html +42 -28
- package/docs/utils/formatTimestamp.html +67 -28
- package/docs/utils/propConverters.html +80 -23
- package/docs/utils/toTitleCase.html +24 -28
- package/docs/utils/watchWindowSize.html +96 -5
- package/package.json +1 -1
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Toast - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,41 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Toast</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
17
|
<details
|
|
20
18
|
class="b r mb"
|
|
21
19
|
>
|
|
22
20
|
<summary class="p">Table of Contents</summary>
|
|
23
21
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
22
|
+
<h6>Examples</h6>
|
|
25
23
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
24
|
+
<a href="#positions">Different Positions</a><br />
|
|
25
|
+
<a href="#timeouts">Timeouts</a><br />
|
|
26
|
+
<a href="#actionAndClose">Action and Close Buttons</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#staticMethods">Static Methods</a><br />
|
|
31
|
+
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#properties">Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
<a href="#events">Events</a><br />
|
|
35
|
+
<a href="#toastContainer">ToastContainer</a><br />
|
|
28
36
|
</div>
|
|
29
37
|
</details>
|
|
30
38
|
|
|
31
39
|
<h3>Description</h3>
|
|
32
|
-
<p>The
|
|
40
|
+
<p>The Toast component provides a way to display short-lived notifications to users. Toasts appear in a corner of the screen, can be configured with different positions, and can optionally include action and close buttons. Toasts can be set to automatically close after a specified timeout or remain until manually dismissed.</p>
|
|
33
41
|
|
|
34
42
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<li><strong>handler:</strong> Function that receives the new window width</li>
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
46
|
-
|
|
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>
|
|
52
|
-
|
|
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 < <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"><<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>></span><br /> Content adapts to screen size<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></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>) =></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 < <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>) =></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 < <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>) =></span> {<br /> <span class="hljs-keyword">let</span> currentBreakpoint = <span class="hljs-string">'mobile'</span>;<br /> <br /> <span class="hljs-keyword">if</span> (width >= breakpoints.desktop) {<br /> currentBreakpoint = <span class="hljs-string">'desktop'</span>;<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (width >= 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>
|
|
63
|
-
|
|
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>) =></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>
|
|
67
|
-
|
|
68
|
-
</main>
|
|
69
|
-
<div style="height:33vh"></div>
|
|
43
|
+
<div class="row -mx">
|
|
44
|
+
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
45
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>Open Toast<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>);<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="col d-span-6 t-span-6 m-span-12 px">
|
|
48
|
+
<button id="example1" class="mb">Open Toast</button>
|
|
49
|
+
<script type="module" src="./init.js"></script>
|
|
50
|
+
<script type="module" src="../src/components/Toast.js"></script>
|
|
70
51
|
</body>
|
|
71
52
|
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,140 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Toggle</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
22
|
+
<a href="#onByDefault">On By Default</a><br />
|
|
23
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
24
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
25
|
+
|
|
26
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<a href="#constructor">Constructor</a><br />
|
|
28
|
+
<a href="#requirements">Requirements</a><br />
|
|
29
|
+
<a href="#properties">Properties</a><br />
|
|
30
|
+
<a href="#methods">Methods</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
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>
|
|
33
|
-
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<
|
|
36
|
-
|
|
35
|
+
<div class="row -mx">
|
|
36
|
+
<div class="col m-span-12 px">
|
|
37
|
+
<k-card label="HTML">
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-toggle</span>></span>Toggle Me<span class="hljs-tag"></<span class="hljs-name">k-toggle</span>></span></code></pre>
|
|
39
|
+
</k-card>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="col m-span-12 px">
|
|
42
|
+
<k-card label="Output">
|
|
43
|
+
<k-toggle>Toggle Me</k-toggle>
|
|
44
|
+
</k-card>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
37
47
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
<h3 id="onByDefault"><a href="#onByDefault" class="no-link">On By Default</a></h3>
|
|
49
|
+
<div class="row -mx">
|
|
50
|
+
<div class="col m-span-12 px">
|
|
51
|
+
<k-card label="HTML">
|
|
52
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-toggle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>></span>Toggle Me<span class="hljs-tag"></<span class="hljs-name">k-toggle</span>></span></code></pre>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="col m-span-12 px">
|
|
56
|
+
<k-card label="Output">
|
|
57
|
+
<k-toggle value="true">Toggle Me</k-toggle>
|
|
58
|
+
</k-card>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
63
|
+
<div class="row -mx">
|
|
64
|
+
<div class="col m-span-12 px">
|
|
65
|
+
<k-card label="HTML">
|
|
66
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-toggle</span> <br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --switch_height: 3rem;<br /> --switch_width: 5rem;<br /> --switch_border: none;<br /> --switch_background__off: var(--c_danger);<br /> --switch_background__on: var(--c_success);<br /> --handle_size__off: 2rem;<br /> --handle_size__on: calc(3rem - 2px);<br /> --handle_border: none;<br /> --handle_background__off: #ddd;<br /> --handle_background__on: white;<br /> "</span><br />></span>Toggle Me<span class="hljs-tag"></<span class="hljs-name">k-toggle</span>></span></code></pre>
|
|
67
|
+
</k-card>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="col m-span-12 px">
|
|
70
|
+
<k-card label="Output">
|
|
71
|
+
<k-toggle
|
|
72
|
+
style="
|
|
73
|
+
--switch_height: 3rem;
|
|
74
|
+
--switch_width: 5rem;
|
|
75
|
+
--switch_border: none;
|
|
76
|
+
--switch_background__off: var(--c_danger);
|
|
77
|
+
--switch_background__on: var(--c_success);
|
|
78
|
+
--handle_size__off: 2rem;
|
|
79
|
+
--handle_size__on: calc(3rem - 2px);
|
|
80
|
+
--handle_border: none;
|
|
81
|
+
--handle_background__off: #ddd;
|
|
82
|
+
--handle_background__on: white;
|
|
83
|
+
"
|
|
84
|
+
>Toggle Me</k-toggle>
|
|
85
|
+
</k-card>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
|
|
90
|
+
<div class="row -mx">
|
|
91
|
+
<div class="col m-span-12 px">
|
|
92
|
+
<k-card label="HTML">
|
|
93
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-toggle</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tog1"</span>></span>Toggle Me<span class="hljs-tag"></<span class="hljs-name">k-toggle</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOn"</span>></span>Turn On<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"turnOff"</span>></span>Turn Off<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle"</span>></span>Toggle<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-keyword">const</span> $tog1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'tog1'</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOn'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> $tog1.on();<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'turnOff'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> $tog1.off();<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'toggle'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> $tog1.toggle();<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
94
|
+
</k-card>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="col m-span-12 px">
|
|
97
|
+
<k-card label="Output">
|
|
98
|
+
<k-toggle id="tog1">Toggle Me</k-toggle>
|
|
99
|
+
<button id="turnOn">Turn On</button>
|
|
100
|
+
<button id="turnOff">Turn Off</button>
|
|
101
|
+
<button id="toggle">Toggle</button>
|
|
102
|
+
<script>
|
|
103
|
+
const $tog1 = document.getElementById('tog1');
|
|
104
|
+
document.getElementById('turnOn').addEventListener('click', ()=>{
|
|
105
|
+
$tog1.on();
|
|
106
|
+
});
|
|
107
|
+
document.getElementById('turnOff').addEventListener('click', ()=>{
|
|
108
|
+
$tog1.off();
|
|
109
|
+
});
|
|
110
|
+
document.getElementById('toggle').addEventListener('click', ()=>{
|
|
111
|
+
$tog1.toggle();
|
|
112
|
+
});
|
|
113
|
+
</script>
|
|
114
|
+
</k-card>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
119
|
+
|
|
120
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
121
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
122
|
+
<h5>
|
|
123
|
+
<code>new Toggle()</code>
|
|
124
|
+
</h5>
|
|
46
125
|
|
|
47
|
-
<
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
126
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
127
|
<ul>
|
|
50
|
-
<li><
|
|
128
|
+
<li><a href="./component.html">Component</a></li>
|
|
51
129
|
</ul>
|
|
52
130
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<
|
|
131
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
132
|
+
<h5><code>value<i>: boolean</i></code></h5>
|
|
133
|
+
<p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>. Syncs to <code>value</code> attribute.</p>
|
|
134
|
+
<p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
|
|
57
135
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
136
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
137
|
+
<h5><code>on()<i>: this</i></code></h5>
|
|
138
|
+
<p>Set's the <code>value</code> to <code>true</code>, dispatches a <code><i>change</i></code> and an <code><i>on</i></code> event. The switch visual changes to the <b>on</b> state.</p>
|
|
60
139
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
140
|
+
<h5><code>off()<i>: this</i></code></h5>
|
|
141
|
+
<p>Set's the <code>value</code> to <code>false</code>, dispatches a <code><i>change</i></code> and an <code><i>off</i></code> event. The switch visual changes to the <b>off</b> state.</p>
|
|
63
142
|
|
|
64
|
-
<
|
|
65
|
-
<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>) =></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>
|
|
143
|
+
<h5><code>toggle()<i>: this</i></code></h5>
|
|
144
|
+
<p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
|
|
67
145
|
|
|
68
146
|
</main>
|
|
69
147
|
<div style="height:33vh"></div>
|
|
148
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
149
|
+
<script type="module" src="../src/components/Toggle.js"></script>
|
|
70
150
|
</body>
|
|
71
|
-
</html>
|
|
151
|
+
</html>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Tree - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,166 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Tree</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
<a href="#
|
|
22
|
+
<a href="#depthControl">Controlling Initial Depth</a><br />
|
|
23
|
+
<a href="#customLeafs">Custom Leaf Types</a><br />
|
|
24
|
+
|
|
25
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
26
|
+
<a href="#constructor">Constructor</a><br />
|
|
27
|
+
<a href="#requirements">Requirements</a><br />
|
|
28
|
+
<a href="#properties">Properties</a><br />
|
|
29
|
+
<a href="#methods">Methods</a><br />
|
|
28
30
|
</div>
|
|
29
31
|
</details>
|
|
30
32
|
|
|
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>
|
|
33
|
-
|
|
34
33
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
34
|
+
<p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> property.</p>
|
|
35
|
+
<div class="row -mx mb">
|
|
36
|
+
<div class="col d-span-6 m-span-12 px">
|
|
37
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,<br /> <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,<br /> <span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],<br /> <span class="hljs-attr">address</span>: {<br /> <span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,<br /> <span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span><br /> }<br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="col d-span-6 m-span-12 px">
|
|
40
|
+
<k-tree id="myTree"></k-tree>
|
|
41
|
+
<script type="module">
|
|
42
|
+
import Tree from '../src/components/Tree.js';
|
|
43
|
+
const tree = document.getElementById('myTree');
|
|
44
|
+
tree.data = {
|
|
45
|
+
name: 'John Doe',
|
|
46
|
+
age: 30,
|
|
47
|
+
active: true,
|
|
48
|
+
hobbies: ['reading', 'coding'],
|
|
49
|
+
address: {
|
|
50
|
+
street: '123 Main St',
|
|
51
|
+
city: 'New York'
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
</script>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
37
57
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
58
|
+
<h3 id="depthControl"><a href="#depthControl" class="no-link">Controlling Initial Depth</a></h3>
|
|
59
|
+
<p>Use the <code>depth</code> attribute to control how many levels of branches are open by default. This example shows depth set to <code>2</code>:</p>
|
|
60
|
+
<div class="row -mx mb">
|
|
61
|
+
<div class="col d-span-6 m-span-12 px">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'depthTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,<br /> <span class="hljs-attr">departments</span>: {<br /> <span class="hljs-attr">engineering</span>: {<br /> <span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],<br /> <span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]<br /> },<br /> <span class="hljs-attr">sales</span>: {<br /> <span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]<br /> }<br /> }<br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="col d-span-6 m-span-12 px">
|
|
65
|
+
<k-tree id="depthTree" depth="2"></k-tree>
|
|
66
|
+
<script type="module">
|
|
67
|
+
import Tree from '../src/components/Tree.js';
|
|
68
|
+
const tree = document.getElementById('depthTree');
|
|
69
|
+
tree.data = {
|
|
70
|
+
company: 'Tech Corp',
|
|
71
|
+
departments: {
|
|
72
|
+
engineering: {
|
|
73
|
+
frontend: ['Alice', 'Bob'],
|
|
74
|
+
backend: ['Charlie', 'Diana']
|
|
75
|
+
},
|
|
76
|
+
sales: {
|
|
77
|
+
team: ['Eve', 'Frank']
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
</script>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<h3 id="customLeafs"><a href="#customLeafs" class="no-link">Custom Leaf Types</a></h3>
|
|
86
|
+
<p>You can define custom leaf types to handle specific data types. Create a class that extends <code>TreeLeaf</code>, implement a <code>detect</code> static method that checks for specific properties, and a <code>render</code> method, then register it with <code>Tree.addLeaf()</code>.</p>
|
|
87
|
+
<div class="row -mx mb">
|
|
88
|
+
<div class="col d-span-6 m-span-12 px">
|
|
89
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Tree, { TreeLeaf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/lit-all.min.js'</span>;<br /><br /> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DateLeaf</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">TreeLeaf</span> </span>{<br /> render(){<br /> <span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-keyword">this</span>.value;<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>📅 </span><span class="hljs-subst">${month}</span><span class="xml">/</span><span class="hljs-subst">${day}</span><span class="xml">/</span><span class="hljs-subst">${year}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span>`</span>;<br /> }<br /><br /> <span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =></span> {<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span> <br /> && value !== <span class="hljs-literal">null</span><br /> && <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value <br /> && <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value <br /> && <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;<br /> };<br /> }<br /><br /> Tree.addLeaf(DateLeaf);<br /><br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,<br /> <span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,<br /> <span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span><br /> };<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="col d-span-6 m-span-12 px">
|
|
92
|
+
<k-tree id="customTree"></k-tree>
|
|
93
|
+
<script type="module">
|
|
94
|
+
import Tree, { TreeLeaf } from '../src/components/Tree.js';
|
|
95
|
+
import { html } from '../src/lit-all.min.js';
|
|
96
|
+
|
|
97
|
+
class DateLeaf extends TreeLeaf {
|
|
98
|
+
render(){
|
|
99
|
+
const { month, day, year } = this.value;
|
|
100
|
+
return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
static detect = value => {
|
|
104
|
+
return typeof value === 'object'
|
|
105
|
+
&& value !== null
|
|
106
|
+
&& 'month' in value
|
|
107
|
+
&& 'day' in value
|
|
108
|
+
&& 'year' in value;
|
|
109
|
+
};
|
|
110
|
+
}
|
|
46
111
|
|
|
47
|
-
|
|
48
|
-
|
|
112
|
+
Tree.addLeaf(DateLeaf);
|
|
113
|
+
|
|
114
|
+
const tree = document.getElementById('customTree');
|
|
115
|
+
tree.data = {
|
|
116
|
+
event: 'Tech Conference 2025',
|
|
117
|
+
startDate: { month: 10, day: 15, year: 2025 },
|
|
118
|
+
endDate: { month: 10, day: 17, year: 2025 },
|
|
119
|
+
location: 'San Francisco',
|
|
120
|
+
attendees: 250
|
|
121
|
+
};
|
|
122
|
+
</script>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
127
|
+
|
|
128
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
129
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
130
|
+
<h5><code>new Tree()</code></h5>
|
|
131
|
+
<p>Creates a new Tree component instance.</p>
|
|
132
|
+
|
|
133
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
134
|
<ul>
|
|
50
|
-
<li><
|
|
135
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
136
|
+
<li>lit-all.min.js</li>
|
|
51
137
|
</ul>
|
|
52
138
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
139
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
140
|
+
<h4><code>data</code> <span class="tc-muted small">Object | Array</span></h4>
|
|
141
|
+
<p>The data to display in the tree. Can be any JavaScript object or array. Nested objects and arrays will be rendered as collapsible branches.</p>
|
|
142
|
+
|
|
143
|
+
<h4><code>depth</code> <span class="tc-muted small">Number</span> <span class="tc-muted small">default: 0</span></h4>
|
|
144
|
+
<p>The number of branch levels that should be open by default. A value of <code>0</code> means all branches are closed, <code>1</code> means the first level is open, <code>2</code> means the first two levels are open, etc. This property is reflected as an attribute.</p>
|
|
57
145
|
|
|
58
|
-
<h4>
|
|
59
|
-
<
|
|
146
|
+
<h4><code>editable</code> <span class="tc-muted small">Boolean</span></h4>
|
|
147
|
+
<p>Whether the tree should be editable. <em>Note: This feature is not yet implemented.</em></p>
|
|
60
148
|
|
|
61
|
-
<
|
|
62
|
-
|
|
149
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
150
|
+
|
|
151
|
+
<h4><code>Tree.addLeaf(...leafClasses)</code> <span class="tc-muted small">Static</span></h4>
|
|
152
|
+
<p>Register one or more custom leaf classes. Leaf classes should extend <code>TreeLeaf</code> and implement:</p>
|
|
153
|
+
<ul>
|
|
154
|
+
<li><code>constructor(value)</code> - Optional, TreeLeaf base constructor accepts the value</li>
|
|
155
|
+
<li><code>static detect(value)</code> - Returns <code>true</code> if this leaf type should handle the given value</li>
|
|
156
|
+
<li><code>render()</code> - Returns a Lit template or DOM node that renders the value (without the key)</li>
|
|
157
|
+
</ul>
|
|
158
|
+
<p>Leafs are checked in order of registration (most recently added first).</p>
|
|
159
|
+
|
|
160
|
+
<h3>Default Leaf Types</h3>
|
|
161
|
+
<p>The Tree component comes with built-in leaf types for JavaScript primitives:</p>
|
|
162
|
+
<ul>
|
|
163
|
+
<li><strong>StringLeaf</strong> - Renders strings in green with quotes</li>
|
|
164
|
+
<li><strong>NumberLeaf</strong> - Renders numbers in blue</li>
|
|
165
|
+
<li><strong>BooleanLeaf</strong> - Renders <code>true</code> in green, <code>false</code> in red</li>
|
|
166
|
+
<li><strong>NullLeaf</strong> - Renders <code>null</code> in muted gray</li>
|
|
167
|
+
<li><strong>UndefinedLeaf</strong> - Renders <code>undefined</code> in muted gray</li>
|
|
168
|
+
</ul>
|
|
169
|
+
<p>Objects and arrays that don't match any registered leaf type are rendered as collapsible branches.</p>
|
|
63
170
|
|
|
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>) =></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>
|
|
67
171
|
|
|
68
172
|
</main>
|
|
69
173
|
<div style="height:33vh"></div>
|
|
174
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
175
|
+
<script type="module" src="../src/components/Tree.js"></script>
|
|
70
176
|
</body>
|
|
71
|
-
</html>
|
|
177
|
+
</html>
|
package/docs/dev.config.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"customRoutes": {
|
|
3
3
|
"/": "./index.html",
|
|
4
4
|
"/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
|
|
5
|
-
"/kempo-vars.css": "../
|
|
5
|
+
"/kempo-vars.css": "../kempo-vars.css",
|
|
6
6
|
"/kempo-hljs.css": "../src/kempo-hljs.css",
|
|
7
7
|
"/icons/**": "../icons/**",
|
|
8
8
|
"/src/**": "../src/**"
|