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>Icon - 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,141 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Icon</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="#explicitSource">Explicitly Set the Source</a><br />
|
|
23
|
+
<a href="#fallbackIcon">Fallback Icon</a><br />
|
|
24
|
+
<a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
|
|
25
|
+
<a href="#addingIcons">Adding Icons</a><br />
|
|
26
|
+
<a href="#updatingIconDirectoryPath">Updating the Icon Directory Path</a><br />
|
|
27
|
+
|
|
28
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
29
|
+
<a href="#constructor">Constructor</a><br />
|
|
30
|
+
<a href="#requirements">Requirements</a><br />
|
|
31
|
+
<a href="#properties">Properties</a><br />
|
|
32
|
+
<a href="#methods">Methods</a><br />
|
|
28
33
|
</div>
|
|
29
34
|
</details>
|
|
30
35
|
|
|
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
36
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs
|
|
37
|
+
<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>
|
|
38
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span></code></pre>
|
|
39
|
+
<div class="row -mx mb">
|
|
40
|
+
<div class="col d-span-6 m-span-12 px">
|
|
41
|
+
<k-icon name="folder"></k-icon>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col d-span-6 m-span-12 px">
|
|
44
|
+
<k-icon src="/path/to/icon.svg"></k-icon>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
37
47
|
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
48
|
+
<div class="row -mx mb">
|
|
49
|
+
<div class="col d-span-6 m-span-12 px">
|
|
50
|
+
<k-card label="HTML">
|
|
51
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"menu"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"play"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pause"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span></code></pre>
|
|
52
|
+
</k-card>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="col d-span-6 m-span-12 px">
|
|
55
|
+
<k-card label="Output*">
|
|
56
|
+
<k-icon name="menu"></k-icon>
|
|
57
|
+
<k-icon name="close"></k-icon>
|
|
58
|
+
<k-icon name="play"></k-icon>
|
|
59
|
+
<k-icon name="pause"></k-icon>
|
|
60
|
+
</k-card>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
46
63
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
49
|
-
<
|
|
50
|
-
<
|
|
51
|
-
|
|
64
|
+
<h3 id="explicitSource"><a href="#explicitSource" class="no-link">Explicitly Set the Source</a></h3>
|
|
65
|
+
<p>You can use any svg file that is publically available (on your site or any other public domain) buy using the <code>src</code> attribute instead of <code>name</code>. The code will attempt to ensure compatability.</p>
|
|
66
|
+
<div class="row -mx mb">
|
|
67
|
+
<div class="col d-span-6 m-span-12 px">
|
|
68
|
+
<k-card label="HTML">
|
|
69
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span></code></pre>
|
|
70
|
+
</k-card>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="col d-span-6 m-span-12 px">
|
|
73
|
+
<k-card label="Output*">
|
|
74
|
+
<k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>
|
|
75
|
+
</k-card>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
52
78
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
79
|
+
<h3 id="fallbackIcon"><a href="#fallbackIcon" class="no-link">Fallback Icon</a></h3>
|
|
80
|
+
<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>
|
|
81
|
+
<div class="row -mx mb">
|
|
82
|
+
<div class="col d-span-6 m-span-12 px">
|
|
83
|
+
<k-card label="HTML">
|
|
84
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"invalid"</span>></span><br /> <span class="hljs-tag"><<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><span class="hljs-tag"><<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>/></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span></code></pre>
|
|
85
|
+
</k-card>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="col d-span-6 m-span-12 px">
|
|
88
|
+
<k-card label="Output*">
|
|
89
|
+
<k-icon name="invalid"></k-icon>
|
|
90
|
+
<k-icon name="invalid">
|
|
91
|
+
<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>
|
|
92
|
+
</k-icon>
|
|
93
|
+
</k-card>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<h3 id="changingIconDirectory"><a href="#changingIconDirectory" class="no-link">Changing the Icon Directory Location</a></h3>
|
|
98
|
+
<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>
|
|
99
|
+
<pre><code class="hljs xml"><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> 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"></<span class="hljs-name">script</span>></span></code></pre>
|
|
100
|
+
|
|
101
|
+
<h3 id="addingIcons"><a href="#addingIcons" class="no-link">Adding Icons</a></h3>
|
|
102
|
+
<p>Add your SVGs to the directory, remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of <code>currentColor</code>, this will allow the icon to adapt to the font color where it is rendered.</p>
|
|
103
|
+
<div class="row -mx mb">
|
|
104
|
+
<div class="col d-span-6 m-span-12 px">
|
|
105
|
+
<k-card label="Before">
|
|
106
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<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>></span><span class="hljs-tag"><<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>/></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span></code></pre>
|
|
107
|
+
</k-card>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="col d-span-6 m-span-12 px">
|
|
110
|
+
<k-card label="After">
|
|
111
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<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><span class="hljs-tag"><<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>/></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span></code></pre>
|
|
112
|
+
</k-card>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
57
115
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
116
|
+
<h3 id="updatingIconDirectoryPath"><a href="#updatingIconDirectoryPath" class="no-link">Updating the Icon Directory Path</a></h3>
|
|
117
|
+
<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>
|
|
118
|
+
<pre><code class="hljs xml"><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> 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"></<span class="hljs-name">script</span>></span></code></pre>
|
|
60
119
|
|
|
61
|
-
<
|
|
62
|
-
|
|
120
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
121
|
+
|
|
122
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
123
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
124
|
+
<h5>
|
|
125
|
+
<code>new Icon()</code><br />
|
|
126
|
+
<code>new Icon(<i>string</i> name)</code>
|
|
127
|
+
</h5>
|
|
128
|
+
|
|
129
|
+
<h4>Parameters</h4>
|
|
130
|
+
<h5><code>name<i>: string</i></code></h5>
|
|
131
|
+
<p>The name of the icon.</p>
|
|
132
|
+
|
|
133
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
134
|
+
<ul>
|
|
135
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
136
|
+
</ul>
|
|
63
137
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
138
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
139
|
+
<h5><code>name<i>: string</i></code></h5>
|
|
140
|
+
<p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
|
|
141
|
+
<h5><code>src<i>: string</i></code></h5>
|
|
142
|
+
<p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
|
|
143
|
+
<h5><code>pathToIcons<i>: Array</i></code></h5>
|
|
144
|
+
<p>An array of paths to directories containing icons. This is a static property that affects all icon instances.</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/Card.js"></script>
|
|
150
|
+
<script type="module" src="../src/components/Icon.js"></script>
|
|
70
151
|
</body>
|
|
71
|
-
</html>
|
|
152
|
+
</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>Import - 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,58 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Import</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
|
-
|
|
27
|
-
<
|
|
22
|
+
|
|
23
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
24
|
+
<a href="#constructor">Constructor</a><br />
|
|
25
|
+
<a href="#requirements">Requirements</a><br />
|
|
26
|
+
<a href="#properties">Properties</a><br />
|
|
27
|
+
<a href="#methods">Methods</a><br />
|
|
28
28
|
</div>
|
|
29
29
|
</details>
|
|
30
30
|
|
|
31
|
-
<h3>
|
|
32
|
-
<p>
|
|
31
|
+
<h3>What is an import</h3>
|
|
32
|
+
<p>Import commonly used HTML snippets.</p>
|
|
33
|
+
<k-card label="import-me.html">
|
|
34
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>I am html<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
35
|
+
</k-card>
|
|
36
|
+
<k-card label="HTML">
|
|
37
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-import</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"import-me.html"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-import</span>></span></code></pre>
|
|
38
|
+
</k-card>
|
|
39
|
+
<k-card label="Results">
|
|
40
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<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>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>I am html<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-import</span>></span></code></pre>
|
|
41
|
+
</k-card>
|
|
33
42
|
|
|
34
|
-
<
|
|
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>) =></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
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
37
44
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<h5
|
|
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>
|
|
45
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
46
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
47
|
+
<h5>
|
|
48
|
+
<code>new Import()</code>
|
|
49
|
+
</h5>
|
|
46
50
|
|
|
47
|
-
<
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
51
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
52
|
<ul>
|
|
50
|
-
<li><
|
|
53
|
+
<li><a href="./component.html">Component</a></li>
|
|
51
54
|
</ul>
|
|
52
55
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
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>
|
|
56
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
57
|
+
<h5><code>src<i>: string</i></code></h5>
|
|
58
|
+
<p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
|
|
63
59
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
60
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
61
|
+
<h5><code>load()<i>: Promise</i></code></h5>
|
|
62
|
+
<p>Loads the HTML snippet from the specified source URL.</p>
|
|
67
63
|
|
|
68
64
|
</main>
|
|
69
65
|
<div style="height:33vh"></div>
|
|
66
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
67
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
70
68
|
</body>
|
|
71
|
-
</html>
|
|
69
|
+
</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>LightComponent - Base 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,85 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">LightComponent</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>Guide</h6>
|
|
21
|
+
<a href="#overview">Overview</a><br />
|
|
25
22
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
|
|
23
|
+
<a href="#whenToUse">When to Use</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>
|
|
32
|
-
<p>
|
|
33
|
+
<h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
|
|
34
|
+
<p>LightComponent is a base class that extends LitElement and renders directly to the light DOM instead of shadow DOM. Use this when you want your component to:</p>
|
|
35
|
+
<ul>
|
|
36
|
+
<li>Render content in the light DOM (no shadow DOM encapsulation)</li>
|
|
37
|
+
<li>Allow global CSS to style component content</li>
|
|
38
|
+
<li>Interact naturally with parent page styles</li>
|
|
39
|
+
<li>Support natural children alongside rendered content</li>
|
|
40
|
+
</ul>
|
|
41
|
+
<p>Components like <a href="persistant-collapsible.html">PersistantCollapsible</a> and <a href="theme-switcher.html">ThemeSwitcher</a> extend LightComponent.</p>
|
|
33
42
|
|
|
34
43
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> {
|
|
44
|
+
<p>Create a custom component by extending LightComponent and implementing <code>renderLightDom()</code>:</p>
|
|
45
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LightComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./LightComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html } <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_">MyLightComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">LightComponent</span> {<br /> <span class="hljs-keyword">static</span> properties = {<br /> <span class="hljs-attr">message</span>: { <span class="hljs-attr">type</span>: <span class="hljs-title class_">String</span> }<br /> };<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>.message = <span class="hljs-string">'Hello'</span>;<br /> }<br /><br /> <span class="hljs-title function_">renderLightDom</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="card p"><br /> <p><span class="hljs-subst">${<span class="hljs-variable language_">this</span>.message}</span> from Light DOM!</p><br /> </div><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-light-component'</span>, MyLightComponent);</code></pre>
|
|
37
46
|
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
47
|
+
<p><strong>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 /> <span class="hljs-keyword">if</span>(changedProperties.<span class="hljs-title function_">has</span>(<span class="hljs-string">'message'</span>)) {<br /> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Message changed'</span>);<br /> }<br />}</code></pre>
|
|
49
|
+
|
|
50
|
+
<h3 id="whenToUse"><a href="#whenToUse" class="no-link">When to Use</a></h3>
|
|
51
|
+
<p>Use LightComponent when:</p>
|
|
42
52
|
<ul>
|
|
43
|
-
<li
|
|
44
|
-
<li
|
|
53
|
+
<li>You want global page styles to apply to your component</li>
|
|
54
|
+
<li>You need to render alongside natural children</li>
|
|
55
|
+
<li>Shadow DOM encapsulation would interfere with your component's purpose</li>
|
|
56
|
+
<li>You're working with third-party libraries that expect light DOM</li>
|
|
45
57
|
</ul>
|
|
58
|
+
<p>Use <a href="shadow-component.html">ShadowComponent</a> instead when you need style encapsulation and scoped CSS.</p>
|
|
59
|
+
<p>Use <a href="hybrid-component.html">HybridComponent</a> when you need both shadow DOM styles and light DOM rendering.</p>
|
|
60
|
+
|
|
61
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
46
62
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
63
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
64
|
+
<h6>Extends LitElement</h6>
|
|
65
|
+
<h5><code>new LightComponent()</code></h5>
|
|
66
|
+
<p>Creates a new LightComponent instance that renders to the light DOM.</p>
|
|
67
|
+
|
|
68
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
69
|
<ul>
|
|
50
|
-
<li
|
|
70
|
+
<li>Lit (LitElement, html, render)</li>
|
|
51
71
|
</ul>
|
|
52
72
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
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>
|
|
73
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
74
|
+
<h5><code>lightRoot<i>: HTMLElement</i></code></h5>
|
|
75
|
+
<p>A container element with <code>display: contents</code> that holds the rendered light DOM content. Created automatically by <code>createRenderRoot()</code>.</p>
|
|
57
76
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
77
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
78
|
+
<h5><code>createRenderRoot()<i>: Element</i></code></h5>
|
|
79
|
+
<p>Creates the light DOM render container instead of shadow DOM. This method:</p>
|
|
80
|
+
<ul>
|
|
81
|
+
<li>Creates a <code>div</code> with <code>display: contents</code> for layout transparency</li>
|
|
82
|
+
<li>Appends it to the component as <code>lightRoot</code></li>
|
|
83
|
+
<li>Returns <code>this</code> instead of a shadow root</li>
|
|
84
|
+
</ul>
|
|
60
85
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
86
|
+
<h5><code>updated()<i>: void</i></code></h5>
|
|
87
|
+
<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>
|
|
63
88
|
|
|
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>
|
|
89
|
+
<h5><code>renderLightDom()<i>: TemplateResult</i></code></h5>
|
|
90
|
+
<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.</p>
|
|
67
91
|
|
|
68
92
|
</main>
|
|
69
93
|
<div style="height:33vh"></div>
|
|
94
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
95
|
</body>
|
|
71
96
|
</html>
|