kempo-ui 0.0.67 → 0.0.69
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/ShadowComponent.js +1 -1
- package/dist/components/Tree.js +10 -16
- package/docs/components/accordion.html +1 -1
- package/docs/components/card.html +1 -1
- package/docs/components/color-picker.html +1 -1
- package/docs/components/content-slider.html +1 -1
- package/docs/components/dialog.html +1 -1
- package/docs/components/dropdown.html +1 -1
- package/docs/components/focus-capture.html +1 -1
- package/docs/components/html-editor.html +1 -1
- package/docs/components/hybrid-component.html +1 -1
- package/docs/components/icon.html +1 -1
- package/docs/components/import.html +1 -1
- package/docs/components/light-component.html +1 -1
- package/docs/components/photo-viewer.html +1 -1
- package/docs/components/resize.html +1 -1
- package/docs/components/shadow-component.html +1 -1
- package/docs/components/show-more.html +1 -1
- package/docs/components/side-menu.html +1 -1
- package/docs/components/side-panel-basic.html +1 -1
- package/docs/components/side-panel-dual.html +1 -1
- package/docs/components/side-panel-menu.html +1 -1
- package/docs/components/side-panel-persistent.html +1 -1
- package/docs/components/side-panel-scroll.html +1 -1
- package/docs/components/side-panel.html +1 -1
- package/docs/components/sortable.html +1 -1
- package/docs/components/spinner.html +1 -1
- package/docs/components/split.html +1 -1
- package/docs/components/table.html +1 -1
- package/docs/components/tableControls.html +1 -1
- package/docs/components/tableCustomFields.html +1 -1
- package/docs/components/tableFetchRecords.html +1 -1
- package/docs/components/tableFieldSortHide.html +1 -1
- package/docs/components/tablePagination.html +1 -1
- package/docs/components/tableRecordEditing.html +1 -1
- package/docs/components/tableRecordFiltering.html +1 -1
- package/docs/components/tableRecordHiding.html +1 -1
- package/docs/components/tableRecordSearching.html +1 -1
- package/docs/components/tableRecordSelection.html +1 -1
- package/docs/components/tableRowControls.html +1 -1
- package/docs/components/tableSorting.html +1 -1
- package/docs/components/tabs.html +1 -1
- package/docs/components/tags.html +1 -1
- package/docs/components/theme-switcher.html +1 -1
- package/docs/components/timestamp.html +1 -1
- package/docs/components/toast.html +1 -1
- package/docs/components/toggle.html +19 -1
- package/docs/components/tree.html +197 -30
- package/docs/index.html +1 -1
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/Tree.js +10 -16
- package/docs/utils/context.html +1 -1
- package/docs/utils/cookie.html +1 -1
- package/docs/utils/debounce.html +1 -1
- package/docs/utils/drag.html +1 -1
- package/docs/utils/formatTimestamp.html +1 -1
- package/docs/utils/object.html +1 -1
- package/docs/utils/propConverters.html +1 -1
- package/docs/utils/string.html +1 -1
- package/docs/utils/theme.html +1 -1
- package/docs/utils/toTitleCase.html +1 -1
- package/docs/utils/type.html +1 -1
- package/docs/utils/wait.html +1 -1
- package/package.json +5 -1
- package/src/components/ShadowComponent.js +1 -1
- package/src/components/Toggle.js +2 -0
- package/src/components/Tree.js +95 -137
- package/tests/components/Toggle.browser-test.js +31 -0
- package/tests/components/Tree.browser-test.js +161 -161
- package/tools/highlight.js +51 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
9
9
|
<link rel="manifest" href="../manifest.json" />
|
|
10
10
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
11
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
12
12
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
13
13
|
<link rel="stylesheet" href="../styles.css" />
|
|
14
14
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
<h6>Examples</h6>
|
|
26
26
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
27
27
|
<a href="#depthControl">Controlling Initial Depth</a><br />
|
|
28
|
-
<a href="#
|
|
28
|
+
<a href="#customNodes">Custom Node Types</a><br />
|
|
29
|
+
<a href="#directoryExample">Directory Example</a><br />
|
|
29
30
|
|
|
30
31
|
<h6 class="mt"><a href="jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
31
32
|
<a href="#constructor">Constructor</a><br />
|
|
@@ -41,7 +42,21 @@
|
|
|
41
42
|
</p>
|
|
42
43
|
<div class="row -mx mb">
|
|
43
44
|
<div class="col d-span-6 m-span-12 px">
|
|
44
|
-
<pre><code class="hljs
|
|
45
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span>
|
|
46
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript">
|
|
47
|
+
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Tree</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Tree.js'</span>;
|
|
48
|
+
<span class="hljs-keyword">const</span> tree = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'myTree'</span>);
|
|
49
|
+
tree.<span class="hljs-property">data</span> = {
|
|
50
|
+
<span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,
|
|
51
|
+
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
|
|
52
|
+
<span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,
|
|
53
|
+
<span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],
|
|
54
|
+
<span class="hljs-attr">address</span>: {
|
|
55
|
+
<span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,
|
|
56
|
+
<span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span>
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
45
60
|
</div>
|
|
46
61
|
<div class="col d-span-6 m-span-12 px">
|
|
47
62
|
<k-tree id="myTree"></k-tree>
|
|
@@ -67,7 +82,23 @@
|
|
|
67
82
|
shows depth set to <code>2</code>:</p>
|
|
68
83
|
<div class="row -mx mb">
|
|
69
84
|
<div class="col d-span-6 m-span-12 px">
|
|
70
|
-
<pre><code class="hljs
|
|
85
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span>
|
|
86
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript">
|
|
87
|
+
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Tree</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Tree.js'</span>;
|
|
88
|
+
<span class="hljs-keyword">const</span> tree = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'depthTree'</span>);
|
|
89
|
+
tree.<span class="hljs-property">data</span> = {
|
|
90
|
+
<span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,
|
|
91
|
+
<span class="hljs-attr">departments</span>: {
|
|
92
|
+
<span class="hljs-attr">engineering</span>: {
|
|
93
|
+
<span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],
|
|
94
|
+
<span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]
|
|
95
|
+
},
|
|
96
|
+
<span class="hljs-attr">sales</span>: {
|
|
97
|
+
<span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
71
102
|
</div>
|
|
72
103
|
<div class="col d-span-6 m-span-12 px">
|
|
73
104
|
<k-tree id="depthTree" depth="2"></k-tree>
|
|
@@ -90,24 +121,57 @@
|
|
|
90
121
|
</div>
|
|
91
122
|
</div>
|
|
92
123
|
|
|
93
|
-
<h3 id="
|
|
94
|
-
<p>You can define custom
|
|
95
|
-
<code>
|
|
96
|
-
<code>
|
|
124
|
+
<h3 id="customNodes"><a href="#customNodes" class="no-link">Custom Node Types</a></h3>
|
|
125
|
+
<p>You can define custom node types to handle specific data. Create a class that extends
|
|
126
|
+
<code>TreeNode</code>, implement a <code>static detect</code> method, and override <code>renderLabel()</code>
|
|
127
|
+
and/or <code>getChildren()</code>, then register it with <code>Tree.addNode()</code>.</p>
|
|
97
128
|
<div class="row -mx mb">
|
|
98
129
|
<div class="col d-span-6 m-span-12 px">
|
|
99
|
-
<pre><code class="hljs
|
|
130
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span>
|
|
131
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript">
|
|
132
|
+
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Tree</span>, { <span class="hljs-title class_">TreeNode</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Tree.js'</span>;
|
|
133
|
+
<span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/lit-all.min.js'</span>;
|
|
134
|
+
|
|
135
|
+
<span class="hljs-keyword">class</span> <span class="hljs-title class_">DateNode</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">TreeNode</span> {
|
|
136
|
+
<span class="hljs-title function_">renderLabel</span>(<span class="hljs-params"></span>){
|
|
137
|
+
<span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>;
|
|
138
|
+
<span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>📅 </span><span class="hljs-subst">${month}</span><span class="language-xml">/</span><span class="hljs-subst">${day}</span><span class="language-xml">/</span><span class="hljs-subst">${year}</span><span class="language-xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span>`</span>;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
<span class="hljs-title function_">getChildren</span>(<span class="hljs-params"></span>){ <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; }
|
|
142
|
+
|
|
143
|
+
<span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =></span> {
|
|
144
|
+
<span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span>
|
|
145
|
+
&& value !== <span class="hljs-literal">null</span>
|
|
146
|
+
&& <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value
|
|
147
|
+
&& <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value
|
|
148
|
+
&& <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
<span class="hljs-title class_">Tree</span>.<span class="hljs-title function_">addNode</span>(<span class="hljs-title class_">DateNode</span>);
|
|
153
|
+
|
|
154
|
+
<span class="hljs-keyword">const</span> tree = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'customTree'</span>);
|
|
155
|
+
tree.<span class="hljs-property">data</span> = {
|
|
156
|
+
<span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,
|
|
157
|
+
<span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },
|
|
158
|
+
<span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },
|
|
159
|
+
<span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,
|
|
160
|
+
<span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span>
|
|
161
|
+
};
|
|
162
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
100
163
|
</div>
|
|
101
164
|
<div class="col d-span-6 m-span-12 px">
|
|
102
165
|
<k-tree id="customTree"></k-tree>
|
|
103
166
|
<script type="module">
|
|
104
|
-
import Tree, {
|
|
167
|
+
import Tree, { TreeNode } from '../src/components/Tree.js';
|
|
105
168
|
import { html } from '../src/lit-all.min.js';
|
|
106
|
-
class
|
|
107
|
-
|
|
169
|
+
class DateNode extends TreeNode {
|
|
170
|
+
renderLabel(){
|
|
108
171
|
const { month, day, year } = this.value;
|
|
109
|
-
return html`<span class="tc-warning"
|
|
172
|
+
return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
|
|
110
173
|
}
|
|
174
|
+
getChildren(){ return null; }
|
|
111
175
|
static detect = value => {
|
|
112
176
|
return typeof value === 'object'
|
|
113
177
|
&& value !== null
|
|
@@ -116,7 +180,7 @@
|
|
|
116
180
|
&& 'year' in value;
|
|
117
181
|
};
|
|
118
182
|
}
|
|
119
|
-
Tree.
|
|
183
|
+
Tree.addNode(DateNode);
|
|
120
184
|
const tree = document.getElementById('customTree');
|
|
121
185
|
tree.data = {
|
|
122
186
|
event: 'Tech Conference 2025',
|
|
@@ -129,6 +193,110 @@
|
|
|
129
193
|
</div>
|
|
130
194
|
</div>
|
|
131
195
|
|
|
196
|
+
<h3 id="directoryExample"><a href="#directoryExample" class="no-link">Directory Example</a></h3>
|
|
197
|
+
<p>This example uses the
|
|
198
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank">File System Access API</a>.
|
|
199
|
+
<code>FileHandleNode</code> and <code>DirHandleNode</code> detect
|
|
200
|
+
<code>FileSystemFileHandle</code> and <code>FileSystemDirectoryHandle</code> directly —
|
|
201
|
+
no data transformation needed. <code>DirHandleNode</code> loads its children asynchronously
|
|
202
|
+
using a reactive internal property, so the tree populates lazily as nodes are opened.</p>
|
|
203
|
+
<div class="row -mx mb">
|
|
204
|
+
<div class="col d-span-6 m-span-12 px">
|
|
205
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"browseBtn"</span>></span>Browse Directory<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
206
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dirTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tree</span>></span>
|
|
207
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript">
|
|
208
|
+
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Tree</span>, { <span class="hljs-title class_">TreeNode</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Tree.js'</span>;
|
|
209
|
+
<span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/lit-all.min.js'</span>;
|
|
210
|
+
|
|
211
|
+
<span class="hljs-keyword">class</span> <span class="hljs-title class_">FileHandleNode</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">TreeNode</span> {
|
|
212
|
+
<span class="hljs-title function_">renderLabel</span>(<span class="hljs-params"></span>){
|
|
213
|
+
<span class="hljs-keyword">const</span> ext = <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>.<span class="hljs-title function_">split</span>(<span class="hljs-string">'.'</span>).<span class="hljs-title function_">pop</span>().<span class="hljs-title function_">toLowerCase</span>();
|
|
214
|
+
<span class="hljs-keyword">const</span> iconName = { <span class="hljs-attr">js</span>: <span class="hljs-string">'code'</span>, <span class="hljs-attr">html</span>: <span class="hljs-string">'code_blocks'</span>, <span class="hljs-attr">css</span>: <span class="hljs-string">'code'</span>,
|
|
215
|
+
<span class="hljs-attr">json</span>: <span class="hljs-string">'file-text'</span>, <span class="hljs-attr">md</span>: <span class="hljs-string">'file-text'</span> }[ext] ?? <span class="hljs-string">'file'</span>;
|
|
216
|
+
<span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${iconName}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span>`</span>;
|
|
217
|
+
}
|
|
218
|
+
<span class="hljs-title function_">getChildren</span>(<span class="hljs-params"></span>){ <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; }
|
|
219
|
+
<span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">v</span> =></span> v <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">FileSystemFileHandle</span>;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
<span class="hljs-keyword">class</span> <span class="hljs-title class_">DirHandleNode</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">TreeNode</span> {
|
|
223
|
+
<span class="hljs-keyword">static</span> properties = { ...<span class="hljs-title class_">TreeNode</span>.<span class="hljs-property">properties</span>, <span class="hljs-attr">entries</span>: { <span class="hljs-attr">state</span>: <span class="hljs-literal">true</span> } };
|
|
224
|
+
|
|
225
|
+
<span class="hljs-title function_">connectedCallback</span>(<span class="hljs-params"></span>){
|
|
226
|
+
<span class="hljs-variable language_">super</span>.<span class="hljs-title function_">connectedCallback</span>();
|
|
227
|
+
(<span class="hljs-title function_">async</span> () => {
|
|
228
|
+
<span class="hljs-keyword">const</span> entries = [];
|
|
229
|
+
<span class="hljs-keyword">for</span> <span class="hljs-title function_">await</span>(<span class="hljs-keyword">const</span> [name, handle] <span class="hljs-keyword">of</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>.<span class="hljs-title function_">entries</span>())
|
|
230
|
+
entries.<span class="hljs-title function_">push</span>([name, handle]);
|
|
231
|
+
<span class="hljs-variable language_">this</span>.<span class="hljs-property">entries</span> = entries;
|
|
232
|
+
})();
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
<span class="hljs-title function_">getChildren</span>(<span class="hljs-params"></span>){ <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">entries</span> ?? []; }
|
|
236
|
+
<span class="hljs-title function_">renderLabel</span>(<span class="hljs-params"></span>){ <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>; }
|
|
237
|
+
<span class="hljs-title function_">renderIcon</span>(<span class="hljs-params"></span>){
|
|
238
|
+
<span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${<span class="hljs-variable language_">this</span>.opened ? <span class="hljs-string">'folder-open'</span> : <span class="hljs-string">'folder'</span>}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-icon</span>></span>`</span>;
|
|
239
|
+
}
|
|
240
|
+
<span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">v</span> =></span> v <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">FileSystemDirectoryHandle</span>;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
<span class="hljs-title class_">Tree</span>.<span class="hljs-title function_">addNode</span>(<span class="hljs-title class_">FileHandleNode</span>, <span class="hljs-title class_">DirHandleNode</span>);
|
|
244
|
+
|
|
245
|
+
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'browseBtn'</span>).<span class="hljs-property">onclick</span> = <span class="hljs-title function_">async</span> () => {
|
|
246
|
+
<span class="hljs-keyword">const</span> handle = <span class="hljs-keyword">await</span> <span class="hljs-title function_">showDirectoryPicker</span>();
|
|
247
|
+
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'dirTree'</span>).<span class="hljs-property">data</span> = handle;
|
|
248
|
+
};
|
|
249
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
250
|
+
</div>
|
|
251
|
+
<div class="col d-span-6 m-span-12 px">
|
|
252
|
+
<button id="browseBtn" class="btn">Browse Directory</button>
|
|
253
|
+
<k-tree id="dirTree" depth="1"></k-tree>
|
|
254
|
+
<script type="module">
|
|
255
|
+
import Tree, { TreeNode } from '../src/components/Tree.js';
|
|
256
|
+
import { html } from '../src/lit-all.min.js';
|
|
257
|
+
|
|
258
|
+
class FileHandleNode extends TreeNode {
|
|
259
|
+
renderLabel(){
|
|
260
|
+
const ext = this.value.name.split('.').pop().toLowerCase();
|
|
261
|
+
const iconName = { js: 'code', html: 'code_blocks', css: 'code',
|
|
262
|
+
json: 'file-text', md: 'file-text' }[ext] ?? 'file';
|
|
263
|
+
return html`<k-icon name="${iconName}"></k-icon>`;
|
|
264
|
+
}
|
|
265
|
+
getChildren(){ return null; }
|
|
266
|
+
static detect = v => v instanceof FileSystemFileHandle;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
class DirHandleNode extends TreeNode {
|
|
270
|
+
static properties = { ...TreeNode.properties, entries: { state: true } };
|
|
271
|
+
|
|
272
|
+
connectedCallback(){
|
|
273
|
+
super.connectedCallback();
|
|
274
|
+
(async () => {
|
|
275
|
+
const entries = [];
|
|
276
|
+
for await(const [name, handle] of this.value.entries())
|
|
277
|
+
entries.push([name, handle]);
|
|
278
|
+
this.entries = entries;
|
|
279
|
+
})();
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
getChildren(){ return this.entries ?? []; }
|
|
283
|
+
renderLabel(){ return ''; }
|
|
284
|
+
renderIcon(){
|
|
285
|
+
return html`<k-icon name="${this.opened ? 'folder-open' : 'folder'}"></k-icon>`;
|
|
286
|
+
}
|
|
287
|
+
static detect = v => v instanceof FileSystemDirectoryHandle;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
Tree.addNode(FileHandleNode, DirHandleNode);
|
|
291
|
+
|
|
292
|
+
document.getElementById('browseBtn').onclick = async () => {
|
|
293
|
+
const handle = await showDirectoryPicker();
|
|
294
|
+
document.getElementById('dirTree').data = handle;
|
|
295
|
+
};
|
|
296
|
+
</script>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
132
300
|
<h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
133
301
|
|
|
134
302
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
@@ -158,26 +326,25 @@
|
|
|
158
326
|
|
|
159
327
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
160
328
|
|
|
161
|
-
<h4><code>Tree.
|
|
162
|
-
<p>Register one or more custom
|
|
329
|
+
<h4><code>Tree.addNode(...nodeClasses)</code> <span class="tc-muted small">Static</span></h4>
|
|
330
|
+
<p>Register one or more custom node classes. Node classes should extend <code>TreeNode</code> and implement:</p>
|
|
163
331
|
<ul>
|
|
164
|
-
<li><code>
|
|
165
|
-
<li><code>
|
|
166
|
-
</li>
|
|
167
|
-
<li><code>
|
|
332
|
+
<li><code>static detect(value)</code> — Returns <code>true</code> if this node type should handle the given value</li>
|
|
333
|
+
<li><code>renderLabel()</code> — Returns a Lit template for the node's label (optional override)</li>
|
|
334
|
+
<li><code>getChildren()</code> — Returns <code>null</code> for leaf behavior, or an array of <code>[key, value]</code> pairs to render children (optional override)</li>
|
|
335
|
+
<li><code>renderIcon()</code> — Returns a Lit template for the branch toggle icon (optional override)</li>
|
|
168
336
|
</ul>
|
|
169
|
-
<p>
|
|
337
|
+
<p>Nodes are checked in order of registration (most recently added first).</p>
|
|
170
338
|
|
|
171
|
-
<
|
|
172
|
-
<p>The Tree component comes with built-in leaf types for JavaScript primitives:</p>
|
|
339
|
+
<p>The Tree component comes with built-in node types for JavaScript primitives:</p>
|
|
173
340
|
<ul>
|
|
174
|
-
<li><strong>
|
|
175
|
-
<li><strong>
|
|
176
|
-
<li><strong>
|
|
177
|
-
<li><strong>
|
|
178
|
-
<li><strong>
|
|
341
|
+
<li><strong>StringNode</strong> — Renders strings in green with quotes</li>
|
|
342
|
+
<li><strong>NumberNode</strong> — Renders numbers in blue</li>
|
|
343
|
+
<li><strong>BooleanNode</strong> — Renders <code>true</code> in green, <code>false</code> in red</li>
|
|
344
|
+
<li><strong>NullNode</strong> — Renders <code>null</code> in muted gray</li>
|
|
345
|
+
<li><strong>UndefinedNode</strong> — Renders <code>undefined</code> in muted gray</li>
|
|
179
346
|
</ul>
|
|
180
|
-
<p>Objects and arrays that don't match any registered
|
|
347
|
+
<p>Objects and arrays that don't match any registered node type are rendered as collapsible branches using the default <code>TreeNode</code> behavior.</p>
|
|
181
348
|
</main>
|
|
182
349
|
<div style="height:33vh"></div>
|
|
183
350
|
<script type="module" src="../src/components/Import.js"></script>
|
package/docs/index.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<title>Kempo UI Documentation</title>
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="./manifest.json" />
|
|
9
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css">
|
|
10
10
|
<link rel="stylesheet" href="./kempo-hljs.css">
|
|
11
11
|
<link rel="stylesheet" href="./kempo-vars.css">
|
|
12
12
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{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(()=>{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.11/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}}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";let nodeTagCounter=0;export default class Tree extends ShadowComponent{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:boolExists,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){if(null===this.data||void 0===this.data)return html`<slot></slot>`;if(Tree.nodes.find(e=>e.detect(this.data)))return html`
|
|
2
2
|
<div class="tree-root">
|
|
3
|
-
${
|
|
3
|
+
${Tree.renderValue(this.data,null,0,this.depth)}
|
|
4
4
|
</div>
|
|
5
|
-
|
|
5
|
+
`;const e=Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):"object"==typeof this.data?Object.entries(this.data):null;return html`
|
|
6
6
|
<div class="tree-root">
|
|
7
|
-
${Tree.renderValue(this.data,null,0,this.depth)}
|
|
7
|
+
${e?e.map(([e,t])=>Tree.renderValue(t,e,1,this.depth)):Tree.renderValue(this.data,null,0,this.depth)}
|
|
8
8
|
</div>
|
|
9
|
-
|
|
9
|
+
`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,r=0){const n=Tree.nodes.find(t=>t.detect(e))??TreeNode,a=document.createElement(n.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=r,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(){super(),this.value=null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
|
|
10
10
|
<div>
|
|
11
11
|
<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
|
|
12
|
-
|
|
13
|
-
${
|
|
12
|
+
${this.renderIcon()}
|
|
13
|
+
${t}${this.renderLabel()}
|
|
14
14
|
</button>
|
|
15
15
|
${this.opened?html`
|
|
16
16
|
<div class="pl">
|
|
17
|
-
${
|
|
17
|
+
${e.map(([e,t])=>Tree.renderValue(t,e,this.depth+1,this.maxDepth))}
|
|
18
18
|
</div>
|
|
19
19
|
`:""}
|
|
20
20
|
</div>
|
|
21
|
-
|
|
21
|
+
`:html`<span class="d-b">${t}${this.renderLabel()}</span>`}static styles=css`
|
|
22
22
|
:host{
|
|
23
23
|
display: block;
|
|
24
24
|
}
|
|
@@ -33,10 +33,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
|
|
|
33
33
|
.branch-label:focus-visible{
|
|
34
34
|
box-shadow: var(--focus_shadow);
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
transition: transform var(--animation_ms, 200ms);
|
|
38
|
-
}
|
|
39
|
-
.toggle-icon.opened{
|
|
40
|
-
transform: rotate(90deg);
|
|
41
|
-
}
|
|
42
|
-
`}window.customElements.define("k-tree-branch",TreeBranch);export class TreeLeaf{constructor(e=null){this.value=e}render(){return html`${this.value}`}static detect=()=>!1}export class StringLeaf extends TreeLeaf{render(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberLeaf extends TreeLeaf{render(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanLeaf extends TreeLeaf{render(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addLeaf(UndefinedLeaf,NullLeaf,BooleanLeaf,NumberLeaf,StringLeaf);
|
|
36
|
+
`;static detect=()=>!1}window.customElements.define("k-tree-node",TreeNode);export class StringNode extends TreeNode{renderLabel(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberNode extends TreeNode{renderLabel(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanNode extends TreeNode{renderLabel(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullNode extends TreeNode{renderLabel(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedNode extends TreeNode{renderLabel(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addNode(StringNode,NumberNode,BooleanNode,NullNode,UndefinedNode);
|
package/docs/utils/context.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/cookie.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/debounce.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/drag.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/object.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/string.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/theme.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/type.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/docs/utils/wait.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
|
|
8
8
|
<link rel="manifest" href="../manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
10
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
|
|
11
11
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
12
12
|
<link rel="stylesheet" href="../styles.css" />
|
|
13
13
|
<script>window.litDisableBundleWarning = true;</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kempo-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.69",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A Lit based web-component library",
|
|
6
6
|
"main": "index.js",
|
|
@@ -27,8 +27,12 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/dustinpoissant/kempo-ui#readme",
|
|
29
29
|
"devDependencies": {
|
|
30
|
+
"highlight.js": "^11.11.1",
|
|
30
31
|
"kempo-server": "^1.8.2",
|
|
31
32
|
"kempo-testing-framework": "^1.4.0",
|
|
32
33
|
"terser": "^5.43.1"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"kempo-css": "^1.3.11"
|
|
33
37
|
}
|
|
34
38
|
}
|
|
@@ -29,7 +29,7 @@ export default class ShadowComponent extends LitElement {
|
|
|
29
29
|
|
|
30
30
|
const link = document.createElement('link');
|
|
31
31
|
link.rel = 'stylesheet';
|
|
32
|
-
link.href = window.kempo?.pathToStylesheet || 'https://cdn.jsdelivr.net/npm/kempo-css@1.3.
|
|
32
|
+
link.href = window.kempo?.pathToStylesheet || 'https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css';
|
|
33
33
|
shadowRoot.appendChild(link);
|
|
34
34
|
|
|
35
35
|
// Inject component styles if they exist
|
package/src/components/Toggle.js
CHANGED