kempo-ui 0.0.40 → 0.0.41
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/dist/components/Dropdown.js +123 -0
- package/dist/components/ShadowComponent.js +1 -1
- package/dist/components/Spinner.js +113 -0
- package/docs/components/dropdown.html +282 -0
- package/docs/components/spinner.html +214 -0
- package/docs/index.html +12 -0
- package/docs/nav-1.inc.html +2 -0
- package/docs/src/components/Dropdown.js +123 -0
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/Spinner.js +113 -0
- package/package.json +1 -1
- package/src/components/Dropdown.js +358 -0
- package/src/components/Spinner.js +152 -0
- package/tests/components/Dropdown.browser-test.js +557 -0
- package/tests/components/HybridComponent.browser-test.js +8 -2
- package/tests/components/ShadowComponent.browser-test.js +6 -6
- package/tests/components/Spinner.browser-test.js +335 -0
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Spinner - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
|
+
<link rel="manifest" href="../manifest.json" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
13
|
+
<script>window.litDisableBundleWarning = true;</script>
|
|
14
|
+
<script src="../init-1.js" type="module"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
18
|
+
<main>
|
|
19
|
+
<h1 class="ta-center">Spinner</h1>
|
|
20
|
+
|
|
21
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
22
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
23
|
+
<k-accordion-panel name="toc-panel">
|
|
24
|
+
<div class="m">
|
|
25
|
+
<h6>Examples</h6>
|
|
26
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
27
|
+
<a href="#sizes">Sizes</a><br />
|
|
28
|
+
<a href="#variants">Variants</a><br />
|
|
29
|
+
<a href="#customColors">Custom Colors</a><br />
|
|
30
|
+
<a href="#withText">With Text</a><br />
|
|
31
|
+
<a href="#buttonLoading">Button Loading State</a><br />
|
|
32
|
+
|
|
33
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
34
|
+
<a href="#constructor">Constructor</a><br />
|
|
35
|
+
<a href="#requirements">Requirements</a><br />
|
|
36
|
+
<a href="#attributes">Attributes</a><br />
|
|
37
|
+
<a href="#cssVariables">CSS Variables</a><br />
|
|
38
|
+
</div>
|
|
39
|
+
</k-accordion-panel>
|
|
40
|
+
</k-accordion>
|
|
41
|
+
|
|
42
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
43
|
+
<p>Create loading spinners using the <code>k-spinner</code> component.</p>
|
|
44
|
+
<div class="row -mx">
|
|
45
|
+
<div class="col m-span-12 px">
|
|
46
|
+
<k-card label="HTML">
|
|
47
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
48
|
+
</k-card>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="col m-span-12 px">
|
|
51
|
+
<k-card label="Output">
|
|
52
|
+
<k-spinner></k-spinner>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<h3 id="sizes"><a href="#sizes" class="no-link">Sizes</a></h3>
|
|
58
|
+
<p>Control the spinner size using the <code>size</code> attribute. Options are <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, and <code>xl</code>.</p>
|
|
59
|
+
<div class="row -mx">
|
|
60
|
+
<div class="col m-span-12 px">
|
|
61
|
+
<k-card label="HTML">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"md"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
63
|
+
</k-card>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col m-span-12 px">
|
|
66
|
+
<k-card label="Output">
|
|
67
|
+
<div class="d-f ai-c gap">
|
|
68
|
+
<k-spinner size="xs"></k-spinner>
|
|
69
|
+
<k-spinner size="sm"></k-spinner>
|
|
70
|
+
<k-spinner size="md"></k-spinner>
|
|
71
|
+
<k-spinner size="lg"></k-spinner>
|
|
72
|
+
<k-spinner size="xl"></k-spinner>
|
|
73
|
+
</div>
|
|
74
|
+
</k-card>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<h3 id="variants"><a href="#variants" class="no-link">Variants</a></h3>
|
|
79
|
+
<p>Choose from different spinner styles using the <code>variant</code> attribute. Options are <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, and <code>ring</code>.</p>
|
|
80
|
+
<div class="row -mx">
|
|
81
|
+
<div class="col m-span-12 px">
|
|
82
|
+
<k-card label="HTML">
|
|
83
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"spinner"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dots"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"bars"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"pulse"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"ring"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
84
|
+
</k-card>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="col m-span-12 px">
|
|
87
|
+
<k-card label="Output">
|
|
88
|
+
<div class="d-f ai-c gap-lg">
|
|
89
|
+
<div class="ta-center">
|
|
90
|
+
<k-spinner variant="spinner" size="lg"></k-spinner>
|
|
91
|
+
<p class="mt-sm mb0">spinner</p>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="ta-center">
|
|
94
|
+
<k-spinner variant="dots" size="lg"></k-spinner>
|
|
95
|
+
<p class="mt-sm mb0">dots</p>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="ta-center">
|
|
98
|
+
<k-spinner variant="bars" size="lg"></k-spinner>
|
|
99
|
+
<p class="mt-sm mb0">bars</p>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="ta-center">
|
|
102
|
+
<k-spinner variant="pulse" size="lg"></k-spinner>
|
|
103
|
+
<p class="mt-sm mb0">pulse</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="ta-center">
|
|
106
|
+
<k-spinner variant="ring" size="lg"></k-spinner>
|
|
107
|
+
<p class="mt-sm mb0">ring</p>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</k-card>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<h3 id="customColors"><a href="#customColors" class="no-link">Custom Colors</a></h3>
|
|
115
|
+
<p>Customize spinner colors using CSS variables.</p>
|
|
116
|
+
<div class="row -mx">
|
|
117
|
+
<div class="col m-span-12 px">
|
|
118
|
+
<k-card label="HTML">
|
|
119
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_success)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_danger)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_warning)"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: #9c27b0"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span></code></pre>
|
|
120
|
+
</k-card>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="col m-span-12 px">
|
|
123
|
+
<k-card label="Output">
|
|
124
|
+
<div class="d-f ai-c gap">
|
|
125
|
+
<k-spinner style="--spinner-color: var(--c_success)"></k-spinner>
|
|
126
|
+
<k-spinner style="--spinner-color: var(--c_danger)"></k-spinner>
|
|
127
|
+
<k-spinner style="--spinner-color: var(--c_warning)"></k-spinner>
|
|
128
|
+
<k-spinner style="--spinner-color: #9c27b0"></k-spinner>
|
|
129
|
+
</div>
|
|
130
|
+
</k-card>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<h3 id="withText"><a href="#withText" class="no-link">With Text</a></h3>
|
|
135
|
+
<p>Combine spinners with text for loading messages.</p>
|
|
136
|
+
<div class="row -mx">
|
|
137
|
+
<div class="col m-span-12 px">
|
|
138
|
+
<k-card label="HTML">
|
|
139
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f ai-c gap"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Loading...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
140
|
+
</k-card>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="col m-span-12 px">
|
|
143
|
+
<k-card label="Output">
|
|
144
|
+
<div class="d-f ai-c gap">
|
|
145
|
+
<k-spinner size="sm"></k-spinner>
|
|
146
|
+
<span>Loading...</span>
|
|
147
|
+
</div>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<h3 id="buttonLoading"><a href="#buttonLoading" class="no-link">Button Loading State</a></h3>
|
|
153
|
+
<p>Use spinners inside buttons to indicate loading states.</p>
|
|
154
|
+
<div class="row -mx">
|
|
155
|
+
<div class="col m-span-12 px">
|
|
156
|
+
<k-card label="HTML">
|
|
157
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> ></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> Saving...<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">disabled</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> ></span><span class="hljs-tag"></<span class="hljs-name">k-spinner</span>></span><br /> Loading...<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
158
|
+
</k-card>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="col m-span-12 px">
|
|
161
|
+
<k-card label="Output">
|
|
162
|
+
<div class="d-f gap">
|
|
163
|
+
<button disabled>
|
|
164
|
+
<k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
|
|
165
|
+
Saving...
|
|
166
|
+
</button>
|
|
167
|
+
<button class="primary" disabled>
|
|
168
|
+
<k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
|
|
169
|
+
Loading...
|
|
170
|
+
</button>
|
|
171
|
+
</div>
|
|
172
|
+
</k-card>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
177
|
+
|
|
178
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
179
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
180
|
+
<h5><code>new Spinner()</code></h5>
|
|
181
|
+
|
|
182
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
183
|
+
<ul>
|
|
184
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
185
|
+
</ul>
|
|
186
|
+
|
|
187
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
188
|
+
<h5><code>size<i>: string</i></code></h5>
|
|
189
|
+
<p>The size of the spinner. Options: <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, <code>xl</code>.</p>
|
|
190
|
+
|
|
191
|
+
<h5><code>variant<i>: string</i></code></h5>
|
|
192
|
+
<p>The style variant of the spinner. Options: <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, <code>ring</code>.</p>
|
|
193
|
+
|
|
194
|
+
<h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
|
|
195
|
+
<h5><code>--spinner-size</code></h5>
|
|
196
|
+
<p>The width and height of the spinner. Set automatically based on <code>size</code> attribute.</p>
|
|
197
|
+
|
|
198
|
+
<h5><code>--spinner-border-width</code></h5>
|
|
199
|
+
<p>The border thickness for spinner and ring variants. Set automatically based on <code>size</code> attribute.</p>
|
|
200
|
+
|
|
201
|
+
<h5><code>--spinner-color</code></h5>
|
|
202
|
+
<p>The primary color of the spinner. Default is <code>var(--c_primary)</code>.</p>
|
|
203
|
+
|
|
204
|
+
<h5><code>--spinner-track-color</code></h5>
|
|
205
|
+
<p>The background track color for the spinner variant. Default is <code>var(--c_border)</code>.</p>
|
|
206
|
+
|
|
207
|
+
</main>
|
|
208
|
+
<div style="height:33vh"></div>
|
|
209
|
+
<script type="module" src="../src/components/Spinner.js"></script>
|
|
210
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
211
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
212
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
213
|
+
</body>
|
|
214
|
+
</html>
|
package/docs/index.html
CHANGED
|
@@ -78,6 +78,12 @@
|
|
|
78
78
|
<p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
|
|
79
79
|
</a>
|
|
80
80
|
</div>
|
|
81
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
82
|
+
<a href="./components/dropdown.html" class="card mb no-link d-b">
|
|
83
|
+
<h3 class="tc-primary">Dropdown</h3>
|
|
84
|
+
<p class="tc-muted">Action menus with keyboard navigation and customizable positioning.</p>
|
|
85
|
+
</a>
|
|
86
|
+
</div>
|
|
81
87
|
<div class="span-12 t-span-6 d-span-4 px">
|
|
82
88
|
<a href="./components/focus-capture.html" class="card mb no-link d-b">
|
|
83
89
|
<h3 class="tc-primary">FocusCapture</h3>
|
|
@@ -126,6 +132,12 @@
|
|
|
126
132
|
<p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
|
|
127
133
|
</a>
|
|
128
134
|
</div>
|
|
135
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
136
|
+
<a href="./components/spinner.html" class="card mb no-link d-b">
|
|
137
|
+
<h3 class="tc-primary">Spinner</h3>
|
|
138
|
+
<p class="tc-muted">Loading indicators with multiple styles and sizes.</p>
|
|
139
|
+
</a>
|
|
140
|
+
</div>
|
|
129
141
|
<div class="span-12 t-span-6 d-span-4 px">
|
|
130
142
|
<a href="./components/split.html" class="card mb no-link d-b">
|
|
131
143
|
<h3 class="tc-primary">Split</h3>
|
package/docs/nav-1.inc.html
CHANGED
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
<a href="../components/color-picker.html">ColorPicker</a>
|
|
37
37
|
<a href="../components/content-slider.html">Content Slider</a>
|
|
38
38
|
<a href="../components/dialog.html">Dialog</a>
|
|
39
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
39
40
|
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
40
41
|
<a href="../components/icon.html">Icon</a>
|
|
41
42
|
<a href="../components/import.html">Import</a>
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
<a href="../components/show-more.html">Show More</a>
|
|
45
46
|
<a href="../components/side-menu.html">Side Menu</a>
|
|
46
47
|
<a href="../components/sortable.html">Sortable</a>
|
|
48
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
47
49
|
<a href="../components/split.html">Split</a>
|
|
48
50
|
<a href="../components/table.html">Table</a>
|
|
49
51
|
<a href="../components/tabs.html">Tabs</a>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};anchorId=`dropdown-anchor-${Math.random().toString(36).slice(2,11)}`;constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}getPositionArea(){const t=this.openDirection.toLowerCase().trim().split(/\s+/),e={down:"bottom",up:"top",left:"left",right:"right",center:"center"};return t.map(t=>e[t]||t).join(" ")}getFallbacks(){this.getPositionArea().split(" ");const t=[];return t.push("flip-block"),t.push("flip-inline"),t.push("flip-block flip-inline"),t.join(", ")}static styles=css`
|
|
2
|
+
:host {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
#trigger {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
anchor-name: --dropdown-trigger;
|
|
9
|
+
}
|
|
10
|
+
#menu {
|
|
11
|
+
display: none;
|
|
12
|
+
position: fixed;
|
|
13
|
+
position-anchor: --dropdown-trigger;
|
|
14
|
+
z-index: 1000;
|
|
15
|
+
min-width: anchor-size(width);
|
|
16
|
+
background: var(--c_bg);
|
|
17
|
+
border: 1px solid var(--c_border);
|
|
18
|
+
box-shadow: var(--drop_shadow);
|
|
19
|
+
margin: 0.25rem;
|
|
20
|
+
}
|
|
21
|
+
:host([opened]) #menu {
|
|
22
|
+
display: block;
|
|
23
|
+
}
|
|
24
|
+
/* Default: down left */
|
|
25
|
+
#menu {
|
|
26
|
+
position-area: bottom span-right;
|
|
27
|
+
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
|
|
28
|
+
}
|
|
29
|
+
/* down right */
|
|
30
|
+
:host([open-direction="down right"]) #menu {
|
|
31
|
+
position-area: bottom span-left;
|
|
32
|
+
}
|
|
33
|
+
/* down center */
|
|
34
|
+
:host([open-direction="down center"]) #menu,
|
|
35
|
+
:host([open-direction="down"]) #menu {
|
|
36
|
+
position-area: bottom center;
|
|
37
|
+
}
|
|
38
|
+
/* up left */
|
|
39
|
+
:host([open-direction="up left"]) #menu {
|
|
40
|
+
position-area: top span-right;
|
|
41
|
+
}
|
|
42
|
+
/* up right */
|
|
43
|
+
:host([open-direction="up right"]) #menu {
|
|
44
|
+
position-area: top span-left;
|
|
45
|
+
}
|
|
46
|
+
/* up center */
|
|
47
|
+
:host([open-direction="up center"]) #menu,
|
|
48
|
+
:host([open-direction="up"]) #menu {
|
|
49
|
+
position-area: top center;
|
|
50
|
+
}
|
|
51
|
+
/* left up */
|
|
52
|
+
:host([open-direction="left up"]) #menu {
|
|
53
|
+
position-area: left span-top;
|
|
54
|
+
}
|
|
55
|
+
/* left down */
|
|
56
|
+
:host([open-direction="left down"]) #menu {
|
|
57
|
+
position-area: left span-bottom;
|
|
58
|
+
}
|
|
59
|
+
/* left center */
|
|
60
|
+
:host([open-direction="left center"]) #menu,
|
|
61
|
+
:host([open-direction="left"]) #menu {
|
|
62
|
+
position-area: left center;
|
|
63
|
+
}
|
|
64
|
+
/* right up */
|
|
65
|
+
:host([open-direction="right up"]) #menu {
|
|
66
|
+
position-area: right span-top;
|
|
67
|
+
}
|
|
68
|
+
/* right down */
|
|
69
|
+
:host([open-direction="right down"]) #menu {
|
|
70
|
+
position-area: right span-bottom;
|
|
71
|
+
}
|
|
72
|
+
/* right center */
|
|
73
|
+
:host([open-direction="right center"]) #menu,
|
|
74
|
+
:host([open-direction="right"]) #menu {
|
|
75
|
+
position-area: right center;
|
|
76
|
+
}
|
|
77
|
+
/* Slotted menu item styles (not trigger) */
|
|
78
|
+
::slotted(a:not([slot="trigger"])),
|
|
79
|
+
::slotted(button:not([slot="trigger"])) {
|
|
80
|
+
all: unset !important;
|
|
81
|
+
display: block !important;
|
|
82
|
+
box-sizing: border-box !important;
|
|
83
|
+
width: 100% !important;
|
|
84
|
+
padding: var(--spacer_h) var(--spacer) !important;
|
|
85
|
+
color: var(--tc) !important;
|
|
86
|
+
background: transparent !important;
|
|
87
|
+
border: none !important;
|
|
88
|
+
border-top: 1px solid var(--c_border) !important;
|
|
89
|
+
border-radius: 0 !important;
|
|
90
|
+
font: inherit !important;
|
|
91
|
+
text-align: left !important;
|
|
92
|
+
cursor: pointer !important;
|
|
93
|
+
white-space: nowrap !important;
|
|
94
|
+
transition: background var(--animation_ms) !important;
|
|
95
|
+
}
|
|
96
|
+
::slotted(a.k-dropdown-first),
|
|
97
|
+
::slotted(button.k-dropdown-first) {
|
|
98
|
+
border-top: none !important;
|
|
99
|
+
}
|
|
100
|
+
::slotted(a:not([slot="trigger"]):hover),
|
|
101
|
+
::slotted(a:not([slot="trigger"]):focus-visible),
|
|
102
|
+
::slotted(button:not([slot="trigger"]):hover),
|
|
103
|
+
::slotted(button:not([slot="trigger"]):focus-visible) {
|
|
104
|
+
background: var(--c_bg__alt) !important;
|
|
105
|
+
outline: none !important;
|
|
106
|
+
}
|
|
107
|
+
::slotted(a:not([slot="trigger"])[disabled]),
|
|
108
|
+
::slotted(button:not([slot="trigger"])[disabled]) {
|
|
109
|
+
opacity: 0.5 !important;
|
|
110
|
+
cursor: not-allowed !important;
|
|
111
|
+
pointer-events: none !important;
|
|
112
|
+
}
|
|
113
|
+
::slotted(hr) {
|
|
114
|
+
display: none !important;
|
|
115
|
+
}
|
|
116
|
+
`;handleSlotChange=t=>{t.target.assignedElements().filter(t=>t.matches("a, button")).forEach((t,e)=>t.classList.toggle("k-dropdown-first",0===e))};render(){return html`
|
|
117
|
+
<div id="trigger" @click=${this.handleTriggerClick}>
|
|
118
|
+
<slot name="trigger"></slot>
|
|
119
|
+
</div>
|
|
120
|
+
<div id="menu" role="menu" @click=${this.handleMenuClick}>
|
|
121
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
122
|
+
</div>
|
|
123
|
+
`}}customElements.define("k-dropdown",Dropdown);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{console.log("MutationObserver fired for",this.constructor.name),this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
1
|
+
import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{console.log("MutationObserver fired for",this.constructor.name),this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Spinner extends ShadowComponent{static properties={size:{type:String,reflect:!0},variant:{type:String,reflect:!0}};constructor(){super(),this.size="md",this.variant="spinner"}static styles=css`
|
|
2
|
+
:host {
|
|
3
|
+
--spinner-size: 2rem;
|
|
4
|
+
--spinner-border-width: 3px;
|
|
5
|
+
--spinner-color: var(--c_primary);
|
|
6
|
+
--spinner-track-color: var(--c_border);
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
}
|
|
11
|
+
/* Sizes */
|
|
12
|
+
:host([size="xs"]) {
|
|
13
|
+
--spinner-size: 1rem;
|
|
14
|
+
--spinner-border-width: 2px;
|
|
15
|
+
}
|
|
16
|
+
:host([size="sm"]) {
|
|
17
|
+
--spinner-size: 1.5rem;
|
|
18
|
+
--spinner-border-width: 2px;
|
|
19
|
+
}
|
|
20
|
+
:host([size="md"]) {
|
|
21
|
+
--spinner-size: 2rem;
|
|
22
|
+
--spinner-border-width: 3px;
|
|
23
|
+
}
|
|
24
|
+
:host([size="lg"]) {
|
|
25
|
+
--spinner-size: 3rem;
|
|
26
|
+
--spinner-border-width: 4px;
|
|
27
|
+
}
|
|
28
|
+
:host([size="xl"]) {
|
|
29
|
+
--spinner-size: 4rem;
|
|
30
|
+
--spinner-border-width: 5px;
|
|
31
|
+
}
|
|
32
|
+
/* Spinner variant */
|
|
33
|
+
.spinner {
|
|
34
|
+
width: var(--spinner-size);
|
|
35
|
+
height: var(--spinner-size);
|
|
36
|
+
border: var(--spinner-border-width) solid var(--spinner-track-color);
|
|
37
|
+
border-top-color: var(--spinner-color);
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
animation: spin 0.8s linear infinite;
|
|
40
|
+
}
|
|
41
|
+
@keyframes spin {
|
|
42
|
+
to { transform: rotate(360deg); }
|
|
43
|
+
}
|
|
44
|
+
/* Dots variant */
|
|
45
|
+
.dots {
|
|
46
|
+
display: flex;
|
|
47
|
+
gap: calc(var(--spinner-size) * 0.2);
|
|
48
|
+
}
|
|
49
|
+
.dots span {
|
|
50
|
+
width: calc(var(--spinner-size) * 0.3);
|
|
51
|
+
height: calc(var(--spinner-size) * 0.3);
|
|
52
|
+
background: var(--spinner-color);
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
animation: bounce 1.4s ease-in-out infinite both;
|
|
55
|
+
}
|
|
56
|
+
.dots span:nth-child(1) { animation-delay: -0.32s; }
|
|
57
|
+
.dots span:nth-child(2) { animation-delay: -0.16s; }
|
|
58
|
+
.dots span:nth-child(3) { animation-delay: 0s; }
|
|
59
|
+
@keyframes bounce {
|
|
60
|
+
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
|
|
61
|
+
40% { transform: scale(1); opacity: 1; }
|
|
62
|
+
}
|
|
63
|
+
/* Bars variant */
|
|
64
|
+
.bars {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: calc(var(--spinner-size) * 0.1);
|
|
68
|
+
height: var(--spinner-size);
|
|
69
|
+
}
|
|
70
|
+
.bars span {
|
|
71
|
+
width: calc(var(--spinner-size) * 0.15);
|
|
72
|
+
height: 60%;
|
|
73
|
+
background: var(--spinner-color);
|
|
74
|
+
border-radius: calc(var(--spinner-size) * 0.05);
|
|
75
|
+
animation: bars 1.2s ease-in-out infinite;
|
|
76
|
+
}
|
|
77
|
+
.bars span:nth-child(1) { animation-delay: -0.24s; }
|
|
78
|
+
.bars span:nth-child(2) { animation-delay: -0.12s; }
|
|
79
|
+
.bars span:nth-child(3) { animation-delay: 0s; }
|
|
80
|
+
.bars span:nth-child(4) { animation-delay: 0.12s; }
|
|
81
|
+
@keyframes bars {
|
|
82
|
+
0%, 40%, 100% { height: 40%; }
|
|
83
|
+
20% { height: 100%; }
|
|
84
|
+
}
|
|
85
|
+
/* Pulse variant */
|
|
86
|
+
.pulse {
|
|
87
|
+
width: var(--spinner-size);
|
|
88
|
+
height: var(--spinner-size);
|
|
89
|
+
background: var(--spinner-color);
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
animation: pulse 1.5s ease-in-out infinite;
|
|
92
|
+
}
|
|
93
|
+
@keyframes pulse {
|
|
94
|
+
0% { transform: scale(0.8); opacity: 0.5; }
|
|
95
|
+
50% { transform: scale(1); opacity: 1; }
|
|
96
|
+
100% { transform: scale(0.8); opacity: 0.5; }
|
|
97
|
+
}
|
|
98
|
+
/* Ring variant */
|
|
99
|
+
.ring {
|
|
100
|
+
width: var(--spinner-size);
|
|
101
|
+
height: var(--spinner-size);
|
|
102
|
+
border: var(--spinner-border-width) solid var(--spinner-color);
|
|
103
|
+
border-radius: 50%;
|
|
104
|
+
animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
105
|
+
}
|
|
106
|
+
@keyframes ring {
|
|
107
|
+
0% { transform: rotate(0deg); border-color: var(--spinner-color) transparent transparent transparent; }
|
|
108
|
+
25% { border-color: transparent var(--spinner-color) transparent transparent; }
|
|
109
|
+
50% { border-color: transparent transparent var(--spinner-color) transparent; }
|
|
110
|
+
75% { border-color: transparent transparent transparent var(--spinner-color); }
|
|
111
|
+
100% { transform: rotate(360deg); border-color: var(--spinner-color) transparent transparent transparent; }
|
|
112
|
+
}
|
|
113
|
+
`;render(){switch(this.variant){case"dots":return html`<div class="dots"><span></span><span></span><span></span></div>`;case"bars":return html`<div class="bars"><span></span><span></span><span></span><span></span></div>`;case"pulse":return html`<div class="pulse"></div>`;case"ring":return html`<div class="ring"></div>`;default:return html`<div class="spinner"></div>`}}}customElements.define("k-spinner",Spinner);
|