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>Resize - 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,162 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Resize</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
|
-
|
|
22
|
+
<a href="#resizeDimention">Resize Dimension</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="#slots">Slots</a><br />
|
|
28
29
|
</div>
|
|
29
30
|
</details>
|
|
30
31
|
|
|
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
32
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<
|
|
33
|
+
<p>Set the initial height and width using normal styles.</p>
|
|
34
|
+
<div class="row -mx mb">
|
|
35
|
+
<div class="col d-span-6 m-span-12 px">
|
|
36
|
+
<k-card label="HTML">
|
|
37
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br />></span><br /> Resize Me<br /><span class="hljs-tag"></<span class="hljs-name">k-resize</span>></span></code></pre>
|
|
38
|
+
</k-card>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="col d-span-6 m-span-12 px">
|
|
41
|
+
<k-card label="Output*" class="pb">
|
|
42
|
+
<k-resize
|
|
43
|
+
style="height: 200px; width: 200px;"
|
|
44
|
+
>
|
|
45
|
+
<p class="p">
|
|
46
|
+
Resize Me
|
|
47
|
+
</p>
|
|
48
|
+
</k-resize>
|
|
49
|
+
</k-card>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<p>Set the minimum and maximum height and width using normal styles. The default min-height and min-width is <code>10rem</code> and the default max-height and max-width is <code>100%</code>.</p>
|
|
53
|
+
<div class="row -mx mb">
|
|
54
|
+
<div class="col d-span-6 m-span-12 px">
|
|
55
|
+
<k-card label="HTML">
|
|
56
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"</span><br />></span><br /> Resize Me<br /><span class="hljs-tag"></<span class="hljs-name">k-resize</span>></span></code></pre>
|
|
57
|
+
</k-card>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="col d-span-6 m-span-12 px">
|
|
60
|
+
<k-card label="Output*" class="pb">
|
|
61
|
+
<k-resize
|
|
62
|
+
style="min-height: 100px; height: 200px; max-height: 300px; min-width: 100px; width: 200px; max-width: 300px;"
|
|
63
|
+
>
|
|
64
|
+
<p class="p">
|
|
65
|
+
Resize Me
|
|
66
|
+
</p>
|
|
67
|
+
</k-resize>
|
|
68
|
+
</k-card>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<h3 id="resizeDimention"><a href="#resizeDimention" class="no-link">Resize Dimension</a></h3>
|
|
73
|
+
<div class="row -mx mb">
|
|
74
|
+
<div class="col d-span-6 m-span-12 px">
|
|
75
|
+
<k-card label="HTML">
|
|
76
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimension</span>=<span class="hljs-string">"width"</span><br />></span><br /> Resize Width<br /><span class="hljs-tag"></<span class="hljs-name">k-resize</span>></span></code></pre>
|
|
77
|
+
</k-card>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="col d-span-6 m-span-12 px">
|
|
80
|
+
<k-card label="Output*" class="pb">
|
|
81
|
+
<k-resize
|
|
82
|
+
style="height: 200px; width: 200px;"
|
|
83
|
+
dimension="width"
|
|
84
|
+
>
|
|
85
|
+
<p class="p">
|
|
86
|
+
Resize Width
|
|
87
|
+
</p>
|
|
88
|
+
</k-resize>
|
|
89
|
+
</k-card>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="row -mx mb">
|
|
93
|
+
<div class="col d-span-6 m-span-12 px">
|
|
94
|
+
<k-card label="HTML">
|
|
95
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimension</span>=<span class="hljs-string">"height"</span><br />></span><br /> Resize Height<br /><span class="hljs-tag"></<span class="hljs-name">k-resize</span>></span></code></pre>
|
|
96
|
+
</k-card>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="col d-span-6 m-span-12 px">
|
|
99
|
+
<k-card label="Output*" class="pb">
|
|
100
|
+
<k-resize
|
|
101
|
+
style="height: 200px; width: 200px;"
|
|
102
|
+
dimension="height"
|
|
103
|
+
>
|
|
104
|
+
<p class="p">
|
|
105
|
+
Resize Height
|
|
106
|
+
</p>
|
|
107
|
+
</k-resize>
|
|
108
|
+
</k-card>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
37
112
|
|
|
38
|
-
<h3
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
113
|
+
<h3>* Notes</h3>
|
|
114
|
+
<p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></p>
|
|
115
|
+
|
|
116
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
117
|
+
|
|
118
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
119
|
+
<h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
|
|
120
|
+
<h5>
|
|
121
|
+
<code>new Resize()</code>
|
|
122
|
+
</h5>
|
|
123
|
+
|
|
124
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
42
125
|
<ul>
|
|
43
|
-
<li><
|
|
44
|
-
<li><
|
|
126
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
127
|
+
<li><a href="../utils/drag.js">drag Utility Function</a></li>
|
|
45
128
|
</ul>
|
|
46
129
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
130
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
131
|
+
<h5><code>resizing<i>: string</i></code></h5>
|
|
132
|
+
<p>Indicates which handle is currently being used to resize the element. Values can be <code>"side"</code>, <code>"bottom"</code>, <code>"corner"</code>, or empty string. Syncs with the <code>resizing</code> attribute.</p>
|
|
133
|
+
<h5><code>dimension<i>: string</i></code></h5>
|
|
134
|
+
<p>Restricts resizing to a specific dimension. Possible values are <code>"width"</code> (horizontal only) or <code>"height"</code> (vertical only). If not specified, both dimensions can be resized. Syncs with the <code>dimension</code> attribute.</p>
|
|
135
|
+
|
|
136
|
+
<h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
|
|
137
|
+
<h5><code>default</code></h5>
|
|
138
|
+
<p>The main content area that will be resizable. Content automatically gets scroll behavior when it overflows the container.</p>
|
|
139
|
+
|
|
140
|
+
<h4>Resize Handles</h4>
|
|
141
|
+
<p>The resize component provides three types of handles:</p>
|
|
49
142
|
<ul>
|
|
50
|
-
<li><strong>
|
|
143
|
+
<li><strong>Side Handle</strong>: Allows horizontal resizing (width adjustment)</li>
|
|
144
|
+
<li><strong>Bottom Handle</strong>: Allows vertical resizing (height adjustment)</li>
|
|
145
|
+
<li><strong>Corner Handle</strong>: Allows diagonal resizing (both width and height)</li>
|
|
51
146
|
</ul>
|
|
52
147
|
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
148
|
+
<h4>CSS Custom Properties</h4>
|
|
149
|
+
<p>The component respects the following CSS custom properties:</p>
|
|
150
|
+
<ul>
|
|
151
|
+
<li><code>--handle_size</code>: Size of the resize handles (default: 1rem)</li>
|
|
152
|
+
<li><code>--c_border</code>: Border color of the container</li>
|
|
153
|
+
<li><code>--c_highlight</code>: Background color of active handles during resize</li>
|
|
154
|
+
<li><code>--radius</code>: Border radius of the container</li>
|
|
155
|
+
</ul>
|
|
60
156
|
|
|
61
|
-
<h4>
|
|
62
|
-
<
|
|
157
|
+
<h4>Touch and Mouse Support</h4>
|
|
158
|
+
<p>The component supports both mouse and touch interactions for resizing on desktop and mobile devices.</p>
|
|
63
159
|
|
|
64
|
-
<h4>
|
|
65
|
-
<
|
|
66
|
-
|
|
160
|
+
<h4>Behavior Notes</h4>
|
|
161
|
+
<ul>
|
|
162
|
+
<li>During resize operations, pointer events on the main content are disabled to prevent interference</li>
|
|
163
|
+
<li>The component enforces minimum dimensions of 10rem × 10rem and maximum dimensions of 100%</li>
|
|
164
|
+
<li>Active resize handles are highlighted with the theme's highlight color</li>
|
|
165
|
+
<li>Content automatically scrolls when it exceeds the container dimensions</li>
|
|
166
|
+
</ul>
|
|
67
167
|
|
|
68
168
|
</main>
|
|
69
169
|
<div style="height:33vh"></div>
|
|
170
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
171
|
+
<script type="module" src="../src/components/Resize.js"></script>
|
|
70
172
|
</body>
|
|
71
|
-
</html>
|
|
173
|
+
</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>ShadowComponent - 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,74 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">ShadowComponent</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
|
-
<a href="#
|
|
23
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
24
|
+
<a href="#stylesheetPath">Changing Stylesheet Path</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="#staticProperties">Static Properties</a><br />
|
|
30
|
+
<a href="#methods">Methods</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
31
|
-
<h3>
|
|
32
|
-
<p>
|
|
34
|
+
<h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
|
|
35
|
+
<p>ShadowComponent is a base class that extends LitElement and provides automatic shadow DOM encapsulation with Kempo CSS stylesheet injection. Use this when you want your component to have:</p>
|
|
36
|
+
<ul>
|
|
37
|
+
<li>Shadow DOM for style encapsulation</li>
|
|
38
|
+
<li>Automatic access to Kempo CSS styles</li>
|
|
39
|
+
<li>Scoped component-specific styles</li>
|
|
40
|
+
</ul>
|
|
41
|
+
<p>Most Kempo UI components extend ShadowComponent, including <a href="dialog.html">Dialog</a>, <a href="card.html">Card</a>, <a href="accordion.html">Accordion</a>, and many others.</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 ShadowComponent:</p>
|
|
45
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.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_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="p b r"><br /> <h3>My Component</h3><br /> <p>This has shadow DOM with Kempo CSS styles.</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-component'</span>, MyComponent);</code></pre>
|
|
37
46
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
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>
|
|
47
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
48
|
+
<p>Add component-specific styles using the static <code>styles</code> property:</p>
|
|
49
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.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_">MyStyledComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br /> :host {<br /> display: block;<br /> padding: var(--spacer);<br /> }<br /> .custom-element {<br /> background-color: var(--c_primary);<br /> color: var(--tc_on_primary);<br /> border-radius: var(--radius);<br /> }<br /> `</span>;<br /><br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="custom-element p"><br /> Custom styled content<br /> </div><br /> `</span>;<br /> }<br />}</code></pre>
|
|
46
50
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
49
|
-
<
|
|
50
|
-
<li><strong>handler:</strong> The same function reference that was registered</li>
|
|
51
|
-
</ul>
|
|
51
|
+
<h3 id="stylesheetPath"><a href="#stylesheetPath" class="no-link">Changing Stylesheet Path</a></h3>
|
|
52
|
+
<p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally or per-component:</p>
|
|
53
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Change globally for all ShadowComponent instances</span><br /><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br />ShadowComponent.stylesheetPath = <span class="hljs-string">'/custom-path/kempo.min.css'</span>;<br /><br /><span class="hljs-comment">// Or override for a specific component</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> stylesheetPath = <span class="hljs-string">'/custom.css'</span>;<br /> <span class="hljs-comment">// ...</span><br />}</code></pre>
|
|
52
54
|
|
|
53
|
-
<
|
|
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>
|
|
55
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
57
56
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
57
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
58
|
+
<h6>Extends LitElement</h6>
|
|
59
|
+
<h5><code>new ShadowComponent()</code></h5>
|
|
60
|
+
<p>Creates a new ShadowComponent instance with shadow DOM and automatic Kempo CSS stylesheet injection.</p>
|
|
60
61
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
62
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
63
|
+
<ul>
|
|
64
|
+
<li>Lit (LitElement)</li>
|
|
65
|
+
</ul>
|
|
66
|
+
|
|
67
|
+
<h3 id="staticProperties"><a href="#staticProperties" class="no-link">Static Properties</a></h3>
|
|
68
|
+
<h5><code>stylesheetPath<i>: string</i></code></h5>
|
|
69
|
+
<p>The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is <code>'/kempo.min.css'</code>. This can be set globally on the ShadowComponent class or overridden in subclasses.</p>
|
|
63
70
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
71
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
72
|
+
<h5><code>createRenderRoot()<i>: Element</i></code></h5>
|
|
73
|
+
<p>Creates the shadow root and injects the Kempo CSS stylesheet. This method:</p>
|
|
74
|
+
<ul>
|
|
75
|
+
<li>Attaches a shadow DOM with <code>mode: 'open'</code></li>
|
|
76
|
+
<li>Injects a <code><link></code> element pointing to the Kempo CSS stylesheet</li>
|
|
77
|
+
<li>Injects component-specific styles from the static <code>styles</code> property if defined</li>
|
|
78
|
+
<li>Creates a render container with <code>display: contents</code> for layout transparency</li>
|
|
79
|
+
</ul>
|
|
67
80
|
|
|
68
81
|
</main>
|
|
69
82
|
<div style="height:33vh"></div>
|
|
83
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
84
|
</body>
|
|
71
85
|
</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>Show More - 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>
|
|
@@ -14,58 +13,112 @@
|
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
16
15
|
<main>
|
|
17
|
-
<h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
16
|
+
<h1 class="ta-center">Show More</h1>
|
|
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="#moreLessButtonText">"More" / "Less" Button Text</a><br />
|
|
23
|
+
<a href="#closedHeight">Closed Height</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="#cssCustomProperties">CSS Custom 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-show-more</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor...<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-show-more</span>></span></code></pre>
|
|
39
|
+
</k-card>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="col m-span-12 px">
|
|
42
|
+
<k-card label="Output">
|
|
43
|
+
<k-show-more>
|
|
44
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
|
|
45
|
+
</k-show-more>
|
|
46
|
+
</k-card>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
37
49
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
50
|
+
<h3 id="moreLessButtonText"><a href="#moreLessButtonText" class="no-link">"More" / "Less" Button Text</a></h3>
|
|
51
|
+
<p>Change the text of the show "more" or "less" buttons by creating an element that has a <code>slot</code> attribute of <code>"more"</code> or <code>"less"</code>.</p>
|
|
52
|
+
<div class="row -mx">
|
|
53
|
+
<div class="col m-span-12 px">
|
|
54
|
+
<k-card label="HTML">
|
|
55
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-show-more</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor...<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"more"</span>></span>Reveal Details<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"less"</span>></span>Hide Details<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-show-more</span>></span></code></pre>
|
|
56
|
+
</k-card>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="col m-span-12 px">
|
|
59
|
+
<k-card label="Output">
|
|
60
|
+
<k-show-more>
|
|
61
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
|
|
62
|
+
<span slot="more">Reveal Details</span>
|
|
63
|
+
<span slot="less">Hide Details</span>
|
|
64
|
+
</k-show-more>
|
|
65
|
+
</k-card>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
46
68
|
|
|
47
|
-
<
|
|
48
|
-
<p>
|
|
69
|
+
<h3 id="closedHeight"><a href="#closedHeight" class="no-link">Closed Height</a></h3>
|
|
70
|
+
<p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
|
|
71
|
+
<div class="row -mx">
|
|
72
|
+
<div class="col m-span-12 px">
|
|
73
|
+
<k-card label="HTML">
|
|
74
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-show-more</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--closed_height: 4rem"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor...<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-show-more</span>></span></code></pre>
|
|
75
|
+
</k-card>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="col m-span-12 px">
|
|
78
|
+
<k-card label="Output">
|
|
79
|
+
<k-show-more
|
|
80
|
+
style="--closed_height: 4rem"
|
|
81
|
+
>
|
|
82
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
|
|
83
|
+
</k-show-more>
|
|
84
|
+
</k-card>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
89
|
+
|
|
90
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
91
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
92
|
+
<h5>
|
|
93
|
+
<code>new ShowMore()</code>
|
|
94
|
+
</h5>
|
|
95
|
+
|
|
96
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
97
|
<ul>
|
|
50
|
-
<li><
|
|
98
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
99
|
+
<li><a href="./icon.html">Icon</a></li>
|
|
51
100
|
</ul>
|
|
52
101
|
|
|
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>
|
|
102
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
103
|
+
<h5><code>opened<i>: boolean</i></code></h5>
|
|
104
|
+
<p>Whether the content is expanded. Syncs to <code>opened</code> attribute.</p>
|
|
60
105
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
106
|
+
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
107
|
+
<h5><code>--closed_height</code></h5>
|
|
108
|
+
<p>The height of the content when in the collapsed state. Default is <code>7rem</code>.</p>
|
|
63
109
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
110
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
111
|
+
<h5><code>more()<i>: void</i></code></h5>
|
|
112
|
+
<p>Expands the content.</p>
|
|
113
|
+
<h5><code>less()<i>: void</i></code></h5>
|
|
114
|
+
<p>Collapses the content.</p>
|
|
115
|
+
<h5><code>toggle()<i>: void</i></code></h5>
|
|
116
|
+
<p>Toggles the content between expanded and collapsed states.</p>
|
|
67
117
|
|
|
68
118
|
</main>
|
|
69
119
|
<div style="height:33vh"></div>
|
|
120
|
+
|
|
121
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
122
|
+
<script type="module" src="../src/components/ShowMore.js"></script>
|
|
70
123
|
</body>
|
|
71
|
-
</html>
|
|
124
|
+
</html>
|