kempo-ui 0.3.14 → 0.3.16
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/Combobox.js +97 -0
- package/dist/components/Option.js +1 -0
- package/dist/components/ThemeSwitcher.js +77 -14
- package/docs/components/accordion.html +282 -94
- package/docs/components/aside.html +282 -94
- package/docs/components/card.html +282 -94
- package/docs/components/code-editor.html +282 -94
- package/docs/components/color-picker.html +282 -94
- package/docs/components/combobox.html +798 -0
- package/docs/components/content-slider.html +282 -94
- package/docs/components/context.html +282 -94
- package/docs/components/dialog.html +282 -94
- package/docs/components/dropdown.html +282 -94
- package/docs/components/filter-list.html +282 -94
- package/docs/components/focus-capture.html +282 -94
- package/docs/components/html-editor.html +282 -94
- package/docs/components/hybrid-component.html +282 -94
- package/docs/components/icon.html +282 -94
- package/docs/components/import.html +282 -94
- package/docs/components/light-component.html +282 -94
- package/docs/components/nav-spacer.html +282 -94
- package/docs/components/nav.html +282 -94
- package/docs/components/photo-viewer.html +282 -94
- package/docs/components/resize.html +282 -94
- package/docs/components/shadow-component.html +282 -94
- package/docs/components/show-more.html +282 -94
- package/docs/components/sortable.html +282 -94
- package/docs/components/spinner.html +282 -94
- package/docs/components/split.html +282 -94
- package/docs/components/table.html +282 -94
- package/docs/components/tableControls.html +282 -94
- package/docs/components/tableCustomFields.html +282 -94
- package/docs/components/tableFetchRecords.html +282 -94
- package/docs/components/tableFieldSortHide.html +282 -94
- package/docs/components/tablePagination.html +282 -94
- package/docs/components/tablePlaceholder.html +282 -94
- package/docs/components/tableRecordEditing.html +282 -94
- package/docs/components/tableRecordFiltering.html +282 -94
- package/docs/components/tableRecordHiding.html +282 -94
- package/docs/components/tableRecordSearching.html +282 -94
- package/docs/components/tableRecordSelection.html +282 -94
- package/docs/components/tableRowControls.html +282 -94
- package/docs/components/tableServerSync.html +282 -94
- package/docs/components/tableSorting.html +282 -94
- package/docs/components/tabs.html +282 -94
- package/docs/components/tags.html +282 -94
- package/docs/components/theme-select.html +282 -94
- package/docs/components/theme-switcher-aside.html +47 -0
- package/docs/components/theme-switcher.html +441 -101
- package/docs/components/timestamp.html +282 -94
- package/docs/components/toast.html +282 -94
- package/docs/components/toggle.html +282 -94
- package/docs/components/tree.html +282 -94
- package/docs/index.html +288 -94
- package/docs/src/components/Combobox.js +97 -0
- package/docs/src/components/Option.js +1 -0
- package/docs/src/components/ThemeSwitcher.js +77 -14
- package/docs/utils/context.html +282 -94
- package/docs/utils/cookie.html +282 -94
- package/docs/utils/debounce.html +282 -94
- package/docs/utils/drag.html +282 -94
- package/docs/utils/elevation.html +282 -94
- package/docs/utils/formatTimestamp.html +282 -94
- package/docs/utils/object.html +282 -94
- package/docs/utils/propConverters.html +282 -94
- package/docs/utils/string.html +282 -94
- package/docs/utils/theme.html +282 -94
- package/docs/utils/toTitleCase.html +282 -94
- package/docs/utils/type.html +282 -94
- package/docs/utils/wait.html +282 -94
- package/docs-src/components/combobox.page.html +358 -0
- package/docs-src/components/theme-switcher-aside.page.html +35 -0
- package/docs-src/components/theme-switcher.page.html +159 -7
- package/docs-src/index.page.html +6 -0
- package/docs-src/nav.fragment.html +283 -95
- package/llms.txt +2 -1
- package/package.json +1 -1
- package/src/components/Combobox.js +338 -0
- package/src/components/Option.js +19 -0
- package/src/components/ThemeSwitcher.js +171 -24
- package/tests/components/Combobox.browser-test.js +790 -0
- package/tests/components/ThemeSwitcher.browser-test.js +361 -33
|
@@ -17,93 +17,249 @@
|
|
|
17
17
|
</head>
|
|
18
18
|
<body>
|
|
19
19
|
|
|
20
|
-
<k-nav
|
|
21
|
-
|
|
20
|
+
<k-nav
|
|
21
|
+
fixed
|
|
22
|
+
class="bg-primary"
|
|
23
|
+
>
|
|
24
|
+
<button
|
|
25
|
+
id="toggleNavSideMenu"
|
|
26
|
+
class="link"
|
|
27
|
+
>
|
|
22
28
|
<k-icon name="menu"></k-icon>
|
|
23
29
|
</button>
|
|
24
|
-
<a
|
|
25
|
-
|
|
30
|
+
<a
|
|
31
|
+
href="../"
|
|
32
|
+
class="d-if ph"
|
|
33
|
+
style="align-items: center"
|
|
34
|
+
>
|
|
35
|
+
<img
|
|
36
|
+
src="../media/icon32.png"
|
|
37
|
+
alt="Kempo UI Icon"
|
|
38
|
+
class="pr"
|
|
39
|
+
/>
|
|
26
40
|
Kempo UI
|
|
27
41
|
</a>
|
|
28
|
-
<div
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<k-filter-item filter-keywords="
|
|
50
|
-
|
|
51
|
-
<k-filter-item filter-keywords="
|
|
52
|
-
|
|
53
|
-
<k-filter-item filter-keywords="
|
|
54
|
-
|
|
55
|
-
<k-filter-item filter-keywords="
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<k-filter-item filter-keywords="
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<k-filter-item filter-keywords="
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<k-filter-item filter-keywords="
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<k-filter-item filter-keywords="
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<k-filter-item filter-keywords="
|
|
71
|
-
|
|
72
|
-
<k-filter-item filter-keywords="
|
|
73
|
-
|
|
74
|
-
<k-filter-item filter-keywords="
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<k-filter-item filter-keywords="
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<k-filter-item filter-keywords="
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<k-filter-item filter-keywords="
|
|
84
|
-
|
|
85
|
-
<k-filter-item filter-keywords="
|
|
86
|
-
|
|
87
|
-
<k-filter-item filter-keywords="
|
|
88
|
-
|
|
89
|
-
<k-filter-item filter-keywords="
|
|
90
|
-
|
|
91
|
-
|
|
42
|
+
<div
|
|
43
|
+
style="position:relative;margin:0 .25rem;align-self:center;"
|
|
44
|
+
theme="light"
|
|
45
|
+
>
|
|
46
|
+
<input
|
|
47
|
+
id="navSearchInput"
|
|
48
|
+
type="search"
|
|
49
|
+
placeholder="Search docs..."
|
|
50
|
+
autocomplete="off"
|
|
51
|
+
style="width:11rem;"
|
|
52
|
+
/>
|
|
53
|
+
<div
|
|
54
|
+
id="navSearchDropdown"
|
|
55
|
+
hidden
|
|
56
|
+
theme="light"
|
|
57
|
+
style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);"
|
|
58
|
+
>
|
|
59
|
+
<k-filter-list
|
|
60
|
+
id="navSearchList"
|
|
61
|
+
style="display:block;padding:.25rem 0;"
|
|
62
|
+
>
|
|
63
|
+
<k-filter-item filter-keywords="accordion components"><a
|
|
64
|
+
href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
|
|
65
|
+
<k-filter-item filter-keywords="aside sidebar components"><a
|
|
66
|
+
href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
|
|
67
|
+
<k-filter-item filter-keywords="card components"><a
|
|
68
|
+
href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
69
|
+
<k-filter-item filter-keywords="code editor codeeditor monaco components"><a
|
|
70
|
+
href="../components/code-editor.html"
|
|
71
|
+
>Code Editor<br><small>Component</small></a></k-filter-item>
|
|
72
|
+
<k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
|
|
73
|
+
href="../components/combobox.html"
|
|
74
|
+
>Combobox<br><small>Component</small></a></k-filter-item>
|
|
75
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a
|
|
76
|
+
href="../components/color-picker.html"
|
|
77
|
+
>Color Picker<br><small>Component</small></a></k-filter-item>
|
|
78
|
+
<k-filter-item filter-keywords="content slider components"><a
|
|
79
|
+
href="../components/content-slider.html"
|
|
80
|
+
>Content Slider<br><small>Component</small></a></k-filter-item>
|
|
81
|
+
<k-filter-item filter-keywords="context state global components"><a
|
|
82
|
+
href="../components/context.html"
|
|
83
|
+
>Context<br><small>Component</small></a></k-filter-item>
|
|
84
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a
|
|
85
|
+
href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
86
|
+
<k-filter-item filter-keywords="dropdown select components"><a
|
|
87
|
+
href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
88
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a
|
|
89
|
+
href="../components/filter-list.html"
|
|
90
|
+
>Filter List<br><small>Component</small></a></k-filter-item>
|
|
91
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a
|
|
92
|
+
href="../components/focus-capture.html"
|
|
93
|
+
>Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
94
|
+
<k-filter-item filter-keywords="html editor components"><a
|
|
95
|
+
href="../components/html-editor.html">HTML
|
|
96
|
+
Editor<br><small>Component</small></a></k-filter-item>
|
|
97
|
+
<k-filter-item filter-keywords="icon components"><a
|
|
98
|
+
href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
99
|
+
<k-filter-item filter-keywords="import components"><a
|
|
100
|
+
href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
101
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a
|
|
102
|
+
href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
103
|
+
<k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a
|
|
104
|
+
href="../components/nav-spacer.html"
|
|
105
|
+
>Nav Spacer<br><small>Component</small></a></k-filter-item>
|
|
106
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a
|
|
107
|
+
href="../components/photo-viewer.html"
|
|
108
|
+
>Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
109
|
+
<k-filter-item filter-keywords="resize components"><a
|
|
110
|
+
href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
111
|
+
<k-filter-item filter-keywords="show more showmore components"><a
|
|
112
|
+
href="../components/show-more.html"
|
|
113
|
+
>Show More<br><small>Component</small></a></k-filter-item>
|
|
114
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a
|
|
115
|
+
href="../components/sortable.html"
|
|
116
|
+
>Sortable<br><small>Component</small></a></k-filter-item>
|
|
117
|
+
<k-filter-item filter-keywords="spinner loading components"><a
|
|
118
|
+
href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
119
|
+
<k-filter-item filter-keywords="split pane components"><a
|
|
120
|
+
href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
121
|
+
<k-filter-item filter-keywords="table data grid components"><a
|
|
122
|
+
href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
123
|
+
<k-filter-item filter-keywords="table controls advanced example"><a
|
|
124
|
+
href="../components/tableControls.html"
|
|
125
|
+
>Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
126
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a
|
|
127
|
+
href="../components/tableCustomFields.html"
|
|
128
|
+
>Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
129
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a
|
|
130
|
+
href="../components/tableFetchRecords.html"
|
|
131
|
+
>Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
132
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a
|
|
133
|
+
href="../components/tableFieldSortHide.html"
|
|
134
|
+
>Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
135
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a
|
|
136
|
+
href="../components/tablePagination.html"
|
|
137
|
+
>Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
138
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a
|
|
139
|
+
href="../components/tableRecordEditing.html"
|
|
140
|
+
>Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
141
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a
|
|
142
|
+
href="../components/tableRecordFiltering.html"
|
|
143
|
+
>Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
144
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a
|
|
145
|
+
href="../components/tableRecordHiding.html"
|
|
146
|
+
>Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
147
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a
|
|
148
|
+
href="../components/tableRecordSearching.html"
|
|
149
|
+
>Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
150
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a
|
|
151
|
+
href="../components/tableRecordSelection.html"
|
|
152
|
+
>Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
153
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a
|
|
154
|
+
href="../components/tableRowControls.html"
|
|
155
|
+
>Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
156
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a
|
|
157
|
+
href="../components/tableServerSync.html"
|
|
158
|
+
>Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
159
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a
|
|
160
|
+
href="../components/tableSorting.html"
|
|
161
|
+
>Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
162
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a
|
|
163
|
+
href="../components/tablePlaceholder.html"
|
|
164
|
+
>Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
165
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a
|
|
166
|
+
href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
167
|
+
<k-filter-item filter-keywords="tags tag input components"><a
|
|
168
|
+
href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
169
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a
|
|
170
|
+
href="../components/theme-select.html"
|
|
171
|
+
>Theme Select<br><small>Component</small></a></k-filter-item>
|
|
172
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a
|
|
173
|
+
href="../components/theme-switcher.html"
|
|
174
|
+
>Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
175
|
+
<k-filter-item filter-keywords="timestamp date time components"><a
|
|
176
|
+
href="../components/timestamp.html"
|
|
177
|
+
>Timestamp<br><small>Component</small></a></k-filter-item>
|
|
178
|
+
<k-filter-item filter-keywords="toast notification alert components"><a
|
|
179
|
+
href="../components/toast.html"
|
|
180
|
+
>Toast<br><small>Component</small></a></k-filter-item>
|
|
181
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a
|
|
182
|
+
href="../components/toggle.html"
|
|
183
|
+
>Toggle<br><small>Component</small></a></k-filter-item>
|
|
184
|
+
<k-filter-item filter-keywords="tree treeview components"><a
|
|
185
|
+
href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
186
|
+
<k-filter-item filter-keywords="shadow component base"><a
|
|
187
|
+
href="../components/shadow-component.html"
|
|
188
|
+
>Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
189
|
+
<k-filter-item filter-keywords="light component base"><a
|
|
190
|
+
href="../components/light-component.html">Light Component<br><small>Base
|
|
191
|
+
Component</small></a></k-filter-item>
|
|
192
|
+
<k-filter-item filter-keywords="hybrid component base"><a
|
|
193
|
+
href="../components/hybrid-component.html"
|
|
194
|
+
>Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
195
|
+
<k-filter-item filter-keywords="cookie utils utility"><a
|
|
196
|
+
href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
197
|
+
<k-filter-item filter-keywords="context utils utility"><a
|
|
198
|
+
href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
199
|
+
<k-filter-item filter-keywords="debounce utils utility"><a
|
|
200
|
+
href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
201
|
+
<k-filter-item filter-keywords="drag utils utility"><a
|
|
202
|
+
href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
203
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a
|
|
204
|
+
href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
205
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a
|
|
206
|
+
href="../utils/formatTimestamp.html"
|
|
207
|
+
>formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
208
|
+
<k-filter-item filter-keywords="object utils utility"><a
|
|
209
|
+
href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
210
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a
|
|
211
|
+
href="../utils/propConverters.html"
|
|
212
|
+
>propConverters<br><small>Utility</small></a></k-filter-item>
|
|
213
|
+
<k-filter-item filter-keywords="string utils utility"><a
|
|
214
|
+
href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
215
|
+
<k-filter-item filter-keywords="theme utils utility"><a
|
|
216
|
+
href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
217
|
+
<k-filter-item filter-keywords="type utils utility"><a
|
|
218
|
+
href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
219
|
+
<k-filter-item filter-keywords="wait async utils utility"><a
|
|
220
|
+
href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
92
221
|
</k-filter-list>
|
|
93
222
|
</div>
|
|
94
223
|
</div>
|
|
95
224
|
<div class="flex"></div>
|
|
96
|
-
<a
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
225
|
+
<a
|
|
226
|
+
href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
227
|
+
target="_blank"
|
|
228
|
+
><k-icon name="license"></k-icon></a>
|
|
229
|
+
<a
|
|
230
|
+
href="https://www.npmjs.com/package/kempo-ui"
|
|
231
|
+
target="_blank"
|
|
232
|
+
><k-icon name="npm"></k-icon></a>
|
|
233
|
+
<a
|
|
234
|
+
href="https://github.com/dustinpoissant/kempo-ui"
|
|
235
|
+
target="_blank"
|
|
236
|
+
><k-icon name="github-mark"></k-icon></a>
|
|
237
|
+
<k-theme-switcher
|
|
238
|
+
class="mr"
|
|
239
|
+
style="
|
|
240
|
+
--padding: 0.5rem;
|
|
241
|
+
--c_active: var(--tc_on_primary);
|
|
242
|
+
--tc_active: var(--c_primary);
|
|
243
|
+
--c_inactive__hover: rgba(255, 255, 255, 0.1);
|
|
244
|
+
"
|
|
245
|
+
></k-theme-switcher>
|
|
100
246
|
</k-nav>
|
|
101
247
|
<div style="width: 100%; height: 4rem;"></div>
|
|
102
|
-
<k-aside
|
|
248
|
+
<k-aside
|
|
249
|
+
id="navSideMenu"
|
|
250
|
+
main="overlay"
|
|
251
|
+
state="offscreen"
|
|
252
|
+
>
|
|
103
253
|
<menu>
|
|
104
|
-
<a
|
|
254
|
+
<a
|
|
255
|
+
href="../"
|
|
256
|
+
class="ta-center bb mb r0"
|
|
257
|
+
>
|
|
105
258
|
<h1 class="tc-primary">Kempo UI</h1>
|
|
106
|
-
<img
|
|
259
|
+
<img
|
|
260
|
+
src="../media/icon128.png"
|
|
261
|
+
alt="Kempo UI Icon"
|
|
262
|
+
/>
|
|
107
263
|
</a>
|
|
108
264
|
|
|
109
265
|
<div class="pl mb">
|
|
@@ -112,6 +268,7 @@
|
|
|
112
268
|
<a href="../components/aside.html">Aside</a>
|
|
113
269
|
<a href="../components/card.html">Card</a>
|
|
114
270
|
<a href="../components/code-editor.html">Code Editor</a>
|
|
271
|
+
<a href="../components/combobox.html">Combobox</a>
|
|
115
272
|
<a href="../components/color-picker.html">ColorPicker</a>
|
|
116
273
|
<a href="../components/content-slider.html">Content Slider</a>
|
|
117
274
|
<a href="../components/context.html">Context</a>
|
|
@@ -166,16 +323,47 @@
|
|
|
166
323
|
</menu>
|
|
167
324
|
</k-aside>
|
|
168
325
|
<style>
|
|
169
|
-
#navSearchList a{
|
|
170
|
-
|
|
171
|
-
|
|
326
|
+
#navSearchList a {
|
|
327
|
+
display: block;
|
|
328
|
+
padding: .25rem .5rem;
|
|
329
|
+
border-radius: var(--radius);
|
|
330
|
+
text-decoration: none;
|
|
331
|
+
color: var(--tc);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
#navSearchList a:hover {
|
|
335
|
+
background: rgba(128, 128, 128, .15);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
#navSearchList a small {
|
|
339
|
+
display: block;
|
|
340
|
+
color: var(--tc_muted);
|
|
341
|
+
}
|
|
172
342
|
</style>
|
|
173
|
-
<script
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<script
|
|
178
|
-
|
|
343
|
+
<script
|
|
344
|
+
src="../src/components/Nav.js"
|
|
345
|
+
type="module"
|
|
346
|
+
></script>
|
|
347
|
+
<script
|
|
348
|
+
src="../src/components/FilterList.js"
|
|
349
|
+
type="module"
|
|
350
|
+
></script>
|
|
351
|
+
<script
|
|
352
|
+
src="../src/components/FilterItem.js"
|
|
353
|
+
type="module"
|
|
354
|
+
></script>
|
|
355
|
+
<script
|
|
356
|
+
src="../src/components/Aside.js"
|
|
357
|
+
type="module"
|
|
358
|
+
></script>
|
|
359
|
+
<script
|
|
360
|
+
src="../src/components/Icon.js"
|
|
361
|
+
type="module"
|
|
362
|
+
></script>
|
|
363
|
+
<script
|
|
364
|
+
src="../src/components/ThemeSwitcher.js"
|
|
365
|
+
type="module"
|
|
366
|
+
></script>
|
|
179
367
|
<script type="module">
|
|
180
368
|
import debounce from '../src/utils/debounce.js';
|
|
181
369
|
|
|
@@ -184,12 +372,12 @@
|
|
|
184
372
|
document.getElementById('navSideMenu').toggle();
|
|
185
373
|
});
|
|
186
374
|
|
|
187
|
-
document.addEventListener('click', function(e) {
|
|
188
|
-
if(e.target.matches('a[href^="#"]')) {
|
|
375
|
+
document.addEventListener('click', function (e) {
|
|
376
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
189
377
|
e.preventDefault();
|
|
190
378
|
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
191
379
|
const target = document.getElementById(targetId);
|
|
192
|
-
if(target) {
|
|
380
|
+
if (target) {
|
|
193
381
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
194
382
|
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
195
383
|
history.replaceState(null, '', url);
|
|
@@ -206,7 +394,7 @@
|
|
|
206
394
|
|
|
207
395
|
const openSearch = async () => {
|
|
208
396
|
await customElements.whenDefined('k-filter-list');
|
|
209
|
-
if(!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
397
|
+
if (!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
210
398
|
navSearchList.filter(searchInput.value);
|
|
211
399
|
searchDropdown.hidden = false;
|
|
212
400
|
};
|
|
@@ -223,11 +411,11 @@
|
|
|
223
411
|
}, 150));
|
|
224
412
|
|
|
225
413
|
searchInput.addEventListener('keydown', e => {
|
|
226
|
-
if(e.key === 'Escape') {
|
|
414
|
+
if (e.key === 'Escape') {
|
|
227
415
|
searchInput.value = '';
|
|
228
416
|
searchInput.blur();
|
|
229
417
|
closeSearch();
|
|
230
|
-
} else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
418
|
+
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
231
419
|
navSearchList?.handleKeydown(e);
|
|
232
420
|
}
|
|
233
421
|
});
|
|
@@ -238,11 +426,11 @@
|
|
|
238
426
|
|
|
239
427
|
document.addEventListener('keydown', e => {
|
|
240
428
|
let active = document.activeElement;
|
|
241
|
-
while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
429
|
+
while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
242
430
|
const tag = active?.tagName;
|
|
243
|
-
if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
244
|
-
if(e.metaKey || e.ctrlKey || e.altKey) return;
|
|
245
|
-
if(e.key.length === 1) {
|
|
431
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
432
|
+
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
433
|
+
if (e.key.length === 1) {
|
|
246
434
|
searchInput.focus();
|
|
247
435
|
}
|
|
248
436
|
});
|