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
package/docs/index.html
CHANGED
|
@@ -3,69 +3,223 @@
|
|
|
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="
|
|
8
|
-
<link rel="stylesheet" href="
|
|
9
|
-
<link rel="stylesheet" href="
|
|
10
|
-
<link rel="stylesheet" href="../styles.css" />
|
|
6
|
+
<title>Kempo UI Documentation</title>
|
|
7
|
+
<link rel="stylesheet" href="./kempo.min.css">
|
|
8
|
+
<link rel="stylesheet" href="./kempo-vars.css">
|
|
9
|
+
<link rel="stylesheet" href="./styles.css">
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
11
|
<script type="module" src="./init.js"></script>
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
|
-
<k-import src="
|
|
14
|
+
<k-import src="./nav.inc.html"></k-import>
|
|
16
15
|
<main>
|
|
17
|
-
<h1>
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
22
|
-
<summary class="p">Table of Contents</summary>
|
|
23
|
-
<div class="m mt0 pl">
|
|
24
|
-
<h6>Usage</h6>
|
|
25
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#functions">Functions</a><br />
|
|
27
|
-
<a href="#examples">Examples</a><br />
|
|
28
|
-
</div>
|
|
29
|
-
</details>
|
|
16
|
+
<h1>Kempo UI</h1>
|
|
17
|
+
<p>Welcome to the Kempo UI component library documentation.</p>
|
|
30
18
|
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
19
|
+
<h2>Components</h2>
|
|
20
|
+
<div class="row -mx">
|
|
21
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
22
|
+
<a href="./components/accordion.html" class="card mb no-link d-b">
|
|
23
|
+
<h3 class="tc-primary">Accordion</h3>
|
|
24
|
+
<p class="tc-muted">Collapsible sections with smooth animations and toggle controls.</p>
|
|
25
|
+
</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
28
|
+
<a href="./components/card.html" class="card mb no-link d-b">
|
|
29
|
+
<h3 class="tc-primary">Card</h3>
|
|
30
|
+
<p class="tc-muted">Container component with optional labels and border styling.</p>
|
|
31
|
+
</a>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
34
|
+
<a href="./components/collapsible.html" class="card mb no-link d-b">
|
|
35
|
+
<h3 class="tc-primary">Collapsible</h3>
|
|
36
|
+
<p class="tc-muted">Toggle visibility of content with smooth expand/collapse transitions.</p>
|
|
37
|
+
</a>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
40
|
+
<a href="./components/persistant-collapsible.html" class="card mb no-link d-b">
|
|
41
|
+
<h3 class="tc-primary">PersistantCollapsible</h3>
|
|
42
|
+
<p class="tc-muted">Collapsible with localStorage to remember state across sessions.</p>
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
46
|
+
<a href="./components/content-slider.html" class="card mb no-link d-b">
|
|
47
|
+
<h3 class="tc-primary">Content Slider</h3>
|
|
48
|
+
<p class="tc-muted">Swipeable carousel for images and content with navigation controls.</p>
|
|
49
|
+
</a>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
52
|
+
<a href="./components/dialog.html" class="card mb no-link d-b">
|
|
53
|
+
<h3 class="tc-primary">Dialog</h3>
|
|
54
|
+
<p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
|
|
55
|
+
</a>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
58
|
+
<a href="./components/focus-capture.html" class="card mb no-link d-b">
|
|
59
|
+
<h3 class="tc-primary">FocusCapture</h3>
|
|
60
|
+
<p class="tc-muted">Trap keyboard focus within a container for accessibility.</p>
|
|
61
|
+
</a>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
64
|
+
<a href="./components/icon.html" class="card mb no-link d-b">
|
|
65
|
+
<h3 class="tc-primary">Icon</h3>
|
|
66
|
+
<p class="tc-muted">Display SVG icons from a collection with customizable size and color.</p>
|
|
67
|
+
</a>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
70
|
+
<a href="./components/import.html" class="card mb no-link d-b">
|
|
71
|
+
<h3 class="tc-primary">Import</h3>
|
|
72
|
+
<p class="tc-muted">Dynamically load and include HTML snippets into your pages.</p>
|
|
73
|
+
</a>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
76
|
+
<a href="./components/photo-viewer.html" class="card mb no-link d-b">
|
|
77
|
+
<h3 class="tc-primary">Photo Viewer</h3>
|
|
78
|
+
<p class="tc-muted">Lightbox gallery for viewing images with zoom and navigation.</p>
|
|
79
|
+
</a>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
82
|
+
<a href="./components/resize.html" class="card mb no-link d-b">
|
|
83
|
+
<h3 class="tc-primary">Resize</h3>
|
|
84
|
+
<p class="tc-muted">Draggable handle to resize adjacent elements dynamically.</p>
|
|
85
|
+
</a>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
88
|
+
<a href="./components/show-more.html" class="card mb no-link d-b">
|
|
89
|
+
<h3 class="tc-primary">Show More</h3>
|
|
90
|
+
<p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
|
|
91
|
+
</a>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
94
|
+
<a href="./components/side-menu.html" class="card mb no-link d-b">
|
|
95
|
+
<h3 class="tc-primary">Side Menu</h3>
|
|
96
|
+
<p class="tc-muted">Slide-out navigation drawer with focus management.</p>
|
|
97
|
+
</a>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
100
|
+
<a href="./components/sortable.html" class="card mb no-link d-b">
|
|
101
|
+
<h3 class="tc-primary">Sortable</h3>
|
|
102
|
+
<p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
|
|
103
|
+
</a>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
106
|
+
<a href="./components/split.html" class="card mb no-link d-b">
|
|
107
|
+
<h3 class="tc-primary">Split</h3>
|
|
108
|
+
<p class="tc-muted">Resizable split panes with horizontal or vertical layouts.</p>
|
|
109
|
+
</a>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
112
|
+
<a href="./components/table.html" class="card mb no-link d-b">
|
|
113
|
+
<h3 class="tc-primary">Table</h3>
|
|
114
|
+
<p class="tc-muted">Feature-rich data tables with sorting, filtering, and pagination.</p>
|
|
115
|
+
</a>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
118
|
+
<a href="./components/tabs.html" class="card mb no-link d-b">
|
|
119
|
+
<h3 class="tc-primary">Tabs</h3>
|
|
120
|
+
<p class="tc-muted">Tabbed interface for organizing content into switchable panels.</p>
|
|
121
|
+
</a>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
124
|
+
<a href="./components/tags.html" class="card mb no-link d-b">
|
|
125
|
+
<h3 class="tc-primary">Tags</h3>
|
|
126
|
+
<p class="tc-muted">Input field for adding and removing tags with keyboard support.</p>
|
|
127
|
+
</a>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
130
|
+
<a href="./components/toast.html" class="card mb no-link d-b">
|
|
131
|
+
<h3 class="tc-primary">Toast</h3>
|
|
132
|
+
<p class="tc-muted">Notification messages that appear temporarily at screen corners.</p>
|
|
133
|
+
</a>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
136
|
+
<a href="./components/theme-switcher.html" class="card mb no-link d-b">
|
|
137
|
+
<h3 class="tc-primary">Theme Switcher</h3>
|
|
138
|
+
<p class="tc-muted">Toggle between light, dark, and auto theme modes.</p>
|
|
139
|
+
</a>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
142
|
+
<a href="./components/timestamp.html" class="card mb no-link d-b">
|
|
143
|
+
<h3 class="tc-primary">Timestamp</h3>
|
|
144
|
+
<p class="tc-muted">Display formatted dates and times with relative formatting.</p>
|
|
145
|
+
</a>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
148
|
+
<a href="./components/toggle.html" class="card mb no-link d-b">
|
|
149
|
+
<h3 class="tc-primary">Toggle</h3>
|
|
150
|
+
<p class="tc-muted">Switch component for boolean values with custom styling.</p>
|
|
151
|
+
</a>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
154
|
+
<a href="./components/tree.html" class="card mb no-link d-b">
|
|
155
|
+
<h3 class="tc-primary">Tree</h3>
|
|
156
|
+
<p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
|
|
157
|
+
</a>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
63
160
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
|
|
161
|
+
<h2>Base Components</h2>
|
|
162
|
+
<div class="row -mx">
|
|
163
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
164
|
+
<a href="./components/shadow-component.html" class="card mb no-link d-b">
|
|
165
|
+
<h3 class="tc-primary">Shadow Component</h3>
|
|
166
|
+
<p class="tc-muted">Base class for components with shadow DOM and scoped styles.</p>
|
|
167
|
+
</a>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
170
|
+
<a href="./components/light-component.html" class="card mb no-link d-b">
|
|
171
|
+
<h3 class="tc-primary">Light Component</h3>
|
|
172
|
+
<p class="tc-muted">Base class for components that render directly to light DOM.</p>
|
|
173
|
+
</a>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
176
|
+
<a href="./components/hybrid-component.html" class="card mb no-link d-b">
|
|
177
|
+
<h3 class="tc-primary">Hybrid Component</h3>
|
|
178
|
+
<p class="tc-muted">Base class combining shadow and light DOM rendering.</p>
|
|
179
|
+
</a>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
67
182
|
|
|
183
|
+
<h2>Utils</h2>
|
|
184
|
+
<div class="row -mx">
|
|
185
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
186
|
+
<a href="./utils/debounce.html" class="card mb no-link d-b">
|
|
187
|
+
<h3 class="tc-primary">debounce</h3>
|
|
188
|
+
<p class="tc-muted">Delay function execution until after a specified wait period.</p>
|
|
189
|
+
</a>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
192
|
+
<a href="./utils/drag.html" class="card mb no-link d-b">
|
|
193
|
+
<h3 class="tc-primary">drag</h3>
|
|
194
|
+
<p class="tc-muted">Handle mouse and touch drag interactions with cleanup.</p>
|
|
195
|
+
</a>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
198
|
+
<a href="./utils/formatTimestamp.html" class="card mb no-link d-b">
|
|
199
|
+
<h3 class="tc-primary">formatTimestamp</h3>
|
|
200
|
+
<p class="tc-muted">Format dates into human-readable relative or absolute strings.</p>
|
|
201
|
+
</a>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
204
|
+
<a href="./utils/propConverters.html" class="card mb no-link d-b">
|
|
205
|
+
<h3 class="tc-primary">propConverters</h3>
|
|
206
|
+
<p class="tc-muted">Type converters for Lit component properties and attributes.</p>
|
|
207
|
+
</a>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
210
|
+
<a href="./utils/toTitleCase.html" class="card mb no-link d-b">
|
|
211
|
+
<h3 class="tc-primary">toTitleCase</h3>
|
|
212
|
+
<p class="tc-muted">Convert strings from various formats to Title Case.</p>
|
|
213
|
+
</a>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
216
|
+
<a href="./utils/watchWindowSize.html" class="card mb no-link d-b">
|
|
217
|
+
<h3 class="tc-primary">watchWindowSize</h3>
|
|
218
|
+
<p class="tc-muted">Monitor window resize events with debounced callbacks.</p>
|
|
219
|
+
</a>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div style="height:33vh"></div>
|
|
68
223
|
</main>
|
|
69
|
-
<div style="height:33vh"></div>
|
|
70
224
|
</body>
|
|
71
225
|
</html>
|
package/docs/utils/debounce.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>debounce - Kempo UI</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<body>
|
|
15
15
|
<k-import src="../nav.inc.html"></k-import>
|
|
16
16
|
<main>
|
|
17
|
-
<h1>
|
|
17
|
+
<h1>debounce</h1>
|
|
18
18
|
|
|
19
19
|
<details
|
|
20
20
|
class="b r mb"
|
|
@@ -23,47 +23,50 @@
|
|
|
23
23
|
<div class="m mt0 pl">
|
|
24
24
|
<h6>Usage</h6>
|
|
25
25
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
26
|
+
<a href="#parameters">Parameters</a><br />
|
|
27
27
|
<a href="#examples">Examples</a><br />
|
|
28
28
|
</div>
|
|
29
29
|
</details>
|
|
30
30
|
|
|
31
31
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code>
|
|
32
|
+
<p>The <code>debounce</code> utility function limits the rate at which a function can be executed. It delays the execution of a function until after a specified timeout has passed since the last time it was invoked.</p>
|
|
33
33
|
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the
|
|
36
|
-
<pre><code class="hljs javascript"
|
|
35
|
+
<p>Import and use the debounce function to limit function execution frequency:</p>
|
|
36
|
+
<pre><code class="hljs javascript">import debounce from './utils/debounce.js';
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<li><strong>Returns:</strong> Current window width</li>
|
|
45
|
-
</ul>
|
|
38
|
+
const handleSearch = debounce((query) => {
|
|
39
|
+
console.log('Searching for:', query);
|
|
40
|
+
}, 300);
|
|
41
|
+
|
|
42
|
+
// Will only execute after 300ms of no calls
|
|
43
|
+
handleSearch('test');</code></pre>
|
|
46
44
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
<h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
|
|
46
|
+
<h5><code>func<i>: Function</i></code></h5>
|
|
47
|
+
<p>The function to debounce.</p>
|
|
48
|
+
<h5><code>timeout<i>: number</i></code> (optional)</h5>
|
|
49
|
+
<p>The number of milliseconds to delay execution. Defaults to 300ms.</p>
|
|
52
50
|
|
|
53
51
|
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
52
|
|
|
55
|
-
<h4>
|
|
56
|
-
<pre><code class="hljs javascript"
|
|
53
|
+
<h4>Search Input Debouncing</h4>
|
|
54
|
+
<pre><code class="hljs javascript">const debouncedSearch = debounce((searchTerm) => {
|
|
55
|
+
// API call or expensive search operation
|
|
56
|
+
performSearch(searchTerm);
|
|
57
|
+
}, 500);
|
|
57
58
|
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
searchInput.addEventListener('input', (e) => {
|
|
60
|
+
debouncedSearch(e.target.value);
|
|
61
|
+
});</code></pre>
|
|
60
62
|
|
|
61
|
-
<h4>
|
|
62
|
-
<pre><code class="hljs javascript"
|
|
63
|
+
<h4>Window Resize Handler</h4>
|
|
64
|
+
<pre><code class="hljs javascript">const debouncedResize = debounce(() => {
|
|
65
|
+
// Expensive layout calculations
|
|
66
|
+
recalculateLayout();
|
|
67
|
+
}, 250);
|
|
63
68
|
|
|
64
|
-
|
|
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>
|
|
69
|
+
window.addEventListener('resize', debouncedResize);</code></pre>
|
|
67
70
|
|
|
68
71
|
</main>
|
|
69
72
|
<div style="height:33vh"></div>
|
package/docs/utils/drag.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>drag - Kempo UI</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<body>
|
|
15
15
|
<k-import src="../nav.inc.html"></k-import>
|
|
16
16
|
<main>
|
|
17
|
-
<h1>
|
|
17
|
+
<h1>drag</h1>
|
|
18
18
|
|
|
19
19
|
<details
|
|
20
20
|
class="b r mb"
|
|
@@ -23,47 +23,61 @@
|
|
|
23
23
|
<div class="m mt0 pl">
|
|
24
24
|
<h6>Usage</h6>
|
|
25
25
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
26
|
+
<a href="#options">Options</a><br />
|
|
27
|
+
<a href="#callbacks">Callbacks</a><br />
|
|
28
|
+
<a href="#returnValue">Return Value</a><br />
|
|
27
29
|
<a href="#examples">Examples</a><br />
|
|
28
30
|
</div>
|
|
29
31
|
</details>
|
|
30
32
|
|
|
31
33
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code>
|
|
34
|
+
<p>The <code>drag</code> utility function enables drag interactions on DOM elements. It handles both mouse and touch events, providing callbacks for drag start, move, and end events.</p>
|
|
33
35
|
|
|
34
36
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>Import and use the
|
|
36
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span>
|
|
37
|
+
<p>Import and use the drag function to make elements draggable. The function returns a cleanup function that should be called to remove all event listeners:</p>
|
|
38
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> drag <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/drag.js'</span>;<br /><br /><span class="hljs-keyword">const</span> element = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.draggable'</span>);<br /><span class="hljs-keyword">const</span> cleanup = <span class="hljs-title function_">drag</span>({<br /> element,<br /> <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =></span> {<br /> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Dragged:'</span>, diff.x, diff.y);<br /> }<br />});<br /><br /><span class="hljs-comment">// Later, when you need to remove the drag functionality</span><br /><span class="hljs-title function_">cleanup</span>();</code></pre>
|
|
37
39
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</
|
|
40
|
+
<h3 id="options"><a href="#options" class="no-link">Options</a></h3>
|
|
41
|
+
<h5><code>element<i>: HTMLElement</i></code></h5>
|
|
42
|
+
<p>The DOM element to make draggable.</p>
|
|
43
|
+
<h5><code>preventScroll<i>: boolean</i></code> (optional)</h5>
|
|
44
|
+
<p>Whether to prevent scroll behavior during drag. Defaults to false.</p>
|
|
45
|
+
|
|
46
|
+
<h3 id="callbacks"><a href="#callbacks" class="no-link">Callbacks</a></h3>
|
|
47
|
+
<h5><code>callback<i>: Function</i></code> (optional)</h5>
|
|
48
|
+
<p>Called on every drag move. Receives a diff object with x, y coordinates and original options.</p>
|
|
49
|
+
<h5><code>startCallback<i>: Function</i></code> (optional)</h5>
|
|
50
|
+
<p>Called when drag starts. Receives a diff object with x: 0, y: 0 and original options.</p>
|
|
51
|
+
<h5><code>moveCallback<i>: Function</i></code> (optional)</h5>
|
|
52
|
+
<p>Called on every drag move (in addition to callback). Receives a diff object.</p>
|
|
53
|
+
<h5><code>endCallback<i>: Function</i></code> (optional)</h5>
|
|
54
|
+
<p>Called when drag ends. Receives a diff object with the final position.</p>
|
|
46
55
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
</ul>
|
|
56
|
+
<h3 id="returnValue"><a href="#returnValue" class="no-link">Return Value</a></h3>
|
|
57
|
+
<h5><code>cleanup<i>: Function</i></code></h5>
|
|
58
|
+
<p>The drag function returns a cleanup function. Call this function to remove all event listeners and stop the drag functionality. This is important for preventing memory leaks when removing or destroying components.</p>
|
|
59
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> cleanup = <span class="hljs-title function_">drag</span>({ element, callback });<br /><br /><span class="hljs-comment">// Later, when component is destroyed or drag is no longer needed</span><br /><span class="hljs-title function_">cleanup</span>();</code></pre>
|
|
52
60
|
|
|
53
61
|
<h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
|
|
54
62
|
|
|
55
|
-
<h4>
|
|
56
|
-
<pre><code class="hljs javascript"
|
|
63
|
+
<h4>Draggable Element</h4>
|
|
64
|
+
<pre><code class="hljs javascript">const box = document.querySelector('.box');
|
|
65
|
+
let position = { x: 0, y: 0 };
|
|
57
66
|
|
|
58
|
-
|
|
59
|
-
|
|
67
|
+
drag({
|
|
68
|
+
element: box,
|
|
69
|
+
callback: (diff) => {
|
|
70
|
+
position.x += diff.x;
|
|
71
|
+
position.y += diff.y;
|
|
72
|
+
box.style.transform = `translate(${position.x}px, ${position.y}px)`;
|
|
73
|
+
}
|
|
74
|
+
});</code></pre>
|
|
60
75
|
|
|
61
|
-
<h4>
|
|
62
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span>
|
|
76
|
+
<h4>Resize Handle</h4>
|
|
77
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> resizeHandle = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.resize-handle'</span>);<br /><span class="hljs-keyword">const</span> panel = <span class="hljs-built_in">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.panel'</span>);<br /><br /><span class="hljs-title function_">drag</span>({<br /> <span class="hljs-attr">element</span>: resizeHandle,<br /> <span class="hljs-attr">preventScroll</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =></span> {<br /> <span class="hljs-keyword">const</span> newWidth = panel.offsetWidth + diff.x;<br /> panel.style.width = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(<span class="hljs-number">100</span>, newWidth) + <span class="hljs-string">'px'</span>;<br /> },<br /> <span class="hljs-attr">startCallback</span>: <span class="hljs-function">() =></span> {<br /> panel.classList.<span class="hljs-title function_">add</span>(<span class="hljs-string">'resizing'</span>);<br /> },<br /> <span class="hljs-attr">endCallback</span>: <span class="hljs-function">() =></span> {<br /> panel.classList.<span class="hljs-title function_">remove</span>(<span class="hljs-string">'resizing'</span>);<br /> }<br />});</code></pre>
|
|
63
78
|
|
|
64
|
-
<h4>
|
|
65
|
-
<
|
|
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>
|
|
79
|
+
<h4>Component with Cleanup</h4>
|
|
80
|
+
<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> drag <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/drag.js'</span>;<br /><br /><span class="hljs-keyword">class</span> <span class="hljs-title class_">DraggableComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-title function_">constructor</span>() {<br /> <span class="hljs-variable language_">super</span>();<br /> <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br /> }<br /><br /> <span class="hljs-title function_">firstUpdated</span>() {<br /> <span class="hljs-keyword">const</span> handle = <span class="hljs-variable language_">this</span>.shadowRoot.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.drag-handle'</span>);<br /> <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-title function_">drag</span>({<br /> <span class="hljs-attr">element</span>: handle,<br /> <span class="hljs-attr">moveCallback</span>: <span class="hljs-function">(<span class="hljs-params">diff</span>) =></span> {<br /> <span class="hljs-variable language_">this</span>.style.transform = <span class="hljs-string">`translate(<span class="hljs-subst">${diff.x}</span>px, <span class="hljs-subst">${diff.y}</span>px)`</span>;<br /> }<br /> });<br /> }<br /><br /> <span class="hljs-title function_">disconnectedCallback</span>() {<br /> <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">disconnectedCallback</span>();<br /> <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.cleanupDrag) {<br /> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cleanupDrag</span>();<br /> <span class="hljs-variable language_">this</span>.cleanupDrag = <span class="hljs-literal">null</span>;<br /> }<br /> }<br />}</code></pre>
|
|
67
81
|
|
|
68
82
|
</main>
|
|
69
83
|
<div style="height:33vh"></div>
|