kempo-ui 0.3.13 → 0.3.15
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/docs/components/accordion.html +2 -0
- package/docs/components/aside.html +2 -0
- package/docs/components/card.html +2 -0
- package/docs/components/code-editor.html +2 -0
- package/docs/components/color-picker.html +2 -0
- package/docs/components/combobox.html +612 -0
- package/docs/components/content-slider.html +2 -0
- package/docs/components/context.html +2 -0
- package/docs/components/dialog.html +2 -0
- package/docs/components/dropdown.html +2 -0
- package/docs/components/filter-list.html +2 -0
- package/docs/components/focus-capture.html +2 -0
- package/docs/components/html-editor.html +2 -0
- package/docs/components/hybrid-component.html +2 -0
- package/docs/components/icon.html +2 -0
- package/docs/components/import.html +2 -0
- package/docs/components/light-component.html +2 -0
- package/docs/components/nav-spacer.html +2 -0
- package/docs/components/nav.html +2 -0
- package/docs/components/photo-viewer.html +2 -0
- package/docs/components/resize.html +2 -0
- package/docs/components/shadow-component.html +2 -0
- package/docs/components/show-more.html +2 -0
- package/docs/components/sortable.html +2 -0
- package/docs/components/spinner.html +2 -0
- package/docs/components/split.html +2 -0
- package/docs/components/table.html +2 -0
- package/docs/components/tableControls.html +2 -0
- package/docs/components/tableCustomFields.html +2 -0
- package/docs/components/tableFetchRecords.html +2 -0
- package/docs/components/tableFieldSortHide.html +2 -0
- package/docs/components/tablePagination.html +2 -0
- package/docs/components/tablePlaceholder.html +2 -0
- package/docs/components/tableRecordEditing.html +2 -0
- package/docs/components/tableRecordFiltering.html +2 -0
- package/docs/components/tableRecordHiding.html +2 -0
- package/docs/components/tableRecordSearching.html +2 -0
- package/docs/components/tableRecordSelection.html +2 -0
- package/docs/components/tableRowControls.html +2 -0
- package/docs/components/tableServerSync.html +2 -0
- package/docs/components/tableSorting.html +2 -0
- package/docs/components/tabs.html +2 -0
- package/docs/components/tags.html +2 -0
- package/docs/components/theme-select.html +2 -0
- package/docs/components/theme-switcher.html +2 -0
- package/docs/components/timestamp.html +2 -0
- package/docs/components/toast.html +2 -0
- package/docs/components/toggle.html +2 -0
- package/docs/components/tree.html +2 -0
- package/docs/index.html +8 -0
- package/docs/src/components/Combobox.js +97 -0
- package/docs/src/components/Option.js +1 -0
- package/docs/utils/context.html +2 -0
- package/docs/utils/cookie.html +2 -0
- package/docs/utils/debounce.html +2 -0
- package/docs/utils/drag.html +2 -0
- package/docs/utils/elevation.html +2 -0
- package/docs/utils/formatTimestamp.html +2 -0
- package/docs/utils/object.html +2 -0
- package/docs/utils/propConverters.html +2 -0
- package/docs/utils/string.html +2 -0
- package/docs/utils/theme.html +2 -0
- package/docs/utils/toTitleCase.html +2 -0
- package/docs/utils/type.html +2 -0
- package/docs/utils/wait.html +2 -0
- package/docs-src/components/combobox.page.html +358 -0
- package/docs-src/index.page.html +6 -0
- package/docs-src/nav.fragment.html +2 -0
- package/llms.txt +1 -0
- package/package.json +2 -2
- package/src/components/Combobox.js +338 -0
- package/src/components/Option.js +19 -0
- package/tests/components/Combobox.browser-test.js +790 -0
|
@@ -0,0 +1,612 @@
|
|
|
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>Combobox - 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@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
|
+
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
|
|
18
|
+
<k-nav fixed class="bg-primary">
|
|
19
|
+
<button id="toggleNavSideMenu" class="link">
|
|
20
|
+
<k-icon name="menu"></k-icon>
|
|
21
|
+
</button>
|
|
22
|
+
<a href="../" class="d-if ph" style="align-items: center">
|
|
23
|
+
<img src="../media/icon32.png" alt="Kempo UI Icon" class="pr" />
|
|
24
|
+
Kempo UI
|
|
25
|
+
</a>
|
|
26
|
+
<div style="position:relative;margin:0 .25rem;align-self:center;" theme="light">
|
|
27
|
+
<input id="navSearchInput" type="search" placeholder="Search docs..." autocomplete="off" style="width:11rem;" />
|
|
28
|
+
<div id="navSearchDropdown" hidden theme="light" 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);">
|
|
29
|
+
<k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
|
|
30
|
+
<k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
|
|
31
|
+
<k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
|
|
32
|
+
<k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
33
|
+
<k-filter-item filter-keywords="code editor codeeditor monaco components"><a href="../components/code-editor.html">Code Editor<br><small>Component</small></a></k-filter-item>
|
|
34
|
+
<k-filter-item filter-keywords="combobox combo box search autocomplete components"><a href="../components/combobox.html">Combobox<br><small>Component</small></a></k-filter-item>
|
|
35
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
|
|
36
|
+
<k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
|
|
37
|
+
<k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
|
|
38
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
39
|
+
<k-filter-item filter-keywords="dropdown select components"><a href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
40
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a href="../components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
|
|
41
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a href="../components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
42
|
+
<k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
|
|
43
|
+
<k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
44
|
+
<k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
45
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
46
|
+
<k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a href="../components/nav-spacer.html">Nav Spacer<br><small>Component</small></a></k-filter-item>
|
|
47
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
48
|
+
<k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
49
|
+
<k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
|
|
50
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
|
|
51
|
+
<k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
52
|
+
<k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
53
|
+
<k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
54
|
+
<k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
55
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
56
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
57
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
58
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
59
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
60
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
61
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
62
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
63
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
64
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
65
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
66
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
67
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a href="../components/tablePlaceholder.html">Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
68
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
69
|
+
<k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
70
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
|
|
71
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
72
|
+
<k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
|
|
73
|
+
<k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
|
|
74
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
|
|
75
|
+
<k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
76
|
+
<k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
77
|
+
<k-filter-item filter-keywords="light component base"><a href="../components/light-component.html">Light Component<br><small>Base Component</small></a></k-filter-item>
|
|
78
|
+
<k-filter-item filter-keywords="hybrid component base"><a href="../components/hybrid-component.html">Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
79
|
+
<k-filter-item filter-keywords="cookie utils utility"><a href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
80
|
+
<k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
81
|
+
<k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
82
|
+
<k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
83
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
84
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
85
|
+
<k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
86
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
|
|
87
|
+
<k-filter-item filter-keywords="string utils utility"><a href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
88
|
+
<k-filter-item filter-keywords="theme utils utility"><a href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
89
|
+
<k-filter-item filter-keywords="type utils utility"><a href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
90
|
+
<k-filter-item filter-keywords="wait async utils utility"><a href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
91
|
+
</k-filter-list>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="flex"></div>
|
|
95
|
+
<a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
|
|
96
|
+
<a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icon></a>
|
|
97
|
+
<a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icon></a>
|
|
98
|
+
<k-theme-switcher></k-theme-switcher>
|
|
99
|
+
</k-nav>
|
|
100
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
101
|
+
<k-aside id="navSideMenu" main="overlay" state="offscreen">
|
|
102
|
+
<menu>
|
|
103
|
+
<a href="../" class="ta-center bb mb r0">
|
|
104
|
+
<h1 class="tc-primary">Kempo UI</h1>
|
|
105
|
+
<img src="../media/icon128.png" alt="Kempo UI Icon" />
|
|
106
|
+
</a>
|
|
107
|
+
|
|
108
|
+
<div class="pl mb">
|
|
109
|
+
<h3>Components</h3>
|
|
110
|
+
<a href="../components/accordion.html">Accordion</a>
|
|
111
|
+
<a href="../components/aside.html">Aside</a>
|
|
112
|
+
<a href="../components/card.html">Card</a>
|
|
113
|
+
<a href="../components/code-editor.html">Code Editor</a>
|
|
114
|
+
<a href="../components/combobox.html">Combobox</a>
|
|
115
|
+
<a href="../components/color-picker.html">ColorPicker</a>
|
|
116
|
+
<a href="../components/content-slider.html">Content Slider</a>
|
|
117
|
+
<a href="../components/context.html">Context</a>
|
|
118
|
+
<a href="../components/dialog.html">Dialog</a>
|
|
119
|
+
<a href="../components/dropdown.html">Dropdown</a>
|
|
120
|
+
<a href="../components/filter-list.html">Filter List</a>
|
|
121
|
+
<a href="../components/focus-capture.html">FocusCapture</a>
|
|
122
|
+
<a href="../components/html-editor.html">HTML Editor</a>
|
|
123
|
+
<a href="../components/icon.html">Icon</a>
|
|
124
|
+
<a href="../components/import.html">Import</a>
|
|
125
|
+
<a href="../components/nav.html">Nav</a>
|
|
126
|
+
<a href="../components/nav-spacer.html">Nav Spacer</a>
|
|
127
|
+
<a href="../components/photo-viewer.html">Photo Viewer</a>
|
|
128
|
+
<a href="../components/resize.html">Resize</a>
|
|
129
|
+
<a href="../components/show-more.html">Show More</a>
|
|
130
|
+
<a href="../components/sortable.html">Sortable</a>
|
|
131
|
+
<a href="../components/spinner.html">Spinner</a>
|
|
132
|
+
<a href="../components/split.html">Split</a>
|
|
133
|
+
<a href="../components/table.html">Table</a>
|
|
134
|
+
<a href="../components/tabs.html">Tabs</a>
|
|
135
|
+
<a href="../components/tags.html">Tags</a>
|
|
136
|
+
<a href="../components/theme-select.html">Theme Select</a>
|
|
137
|
+
<a href="../components/theme-switcher.html">Theme Switcher</a>
|
|
138
|
+
<a href="../components/timestamp.html">Timestamp</a>
|
|
139
|
+
<a href="../components/toast.html">Toast</a>
|
|
140
|
+
<a href="../components/toggle.html">Toggle</a>
|
|
141
|
+
<a href="../components/tree.html">Tree</a>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<h5 class="mb0">Base Components</h5>
|
|
145
|
+
<div class="pl mb">
|
|
146
|
+
<a href="../components/shadow-component.html">Shadow Component</a>
|
|
147
|
+
<a href="../components/light-component.html">Light Component</a>
|
|
148
|
+
<a href="../components/hybrid-component.html">Hybrid Component</a>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<h5 class="mb0">Utils</h5>
|
|
152
|
+
<div class="pl mb">
|
|
153
|
+
<a href="../utils/cookie.html">cookie</a>
|
|
154
|
+
<a href="../utils/context.html">context</a>
|
|
155
|
+
<a href="../utils/debounce.html">debounce</a>
|
|
156
|
+
<a href="../utils/drag.html">drag</a>
|
|
157
|
+
<a href="../utils/elevation.html">elevation</a>
|
|
158
|
+
<a href="../utils/formatTimestamp.html">formatTimestamp</a>
|
|
159
|
+
<a href="../utils/object.html">object</a>
|
|
160
|
+
<a href="../utils/propConverters.html">propConverters</a>
|
|
161
|
+
<a href="../utils/string.html">string</a>
|
|
162
|
+
<a href="../utils/theme.html">theme</a>
|
|
163
|
+
<a href="../utils/type.html">type</a>
|
|
164
|
+
<a href="../utils/wait.html">wait</a>
|
|
165
|
+
</div>
|
|
166
|
+
</menu>
|
|
167
|
+
</k-aside>
|
|
168
|
+
<style>
|
|
169
|
+
#navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
|
|
170
|
+
#navSearchList a:hover{background:rgba(128,128,128,.15);}
|
|
171
|
+
#navSearchList a small{display:block;color:var(--tc_muted);}
|
|
172
|
+
</style>
|
|
173
|
+
<script src="../src/components/Nav.js" type="module"></script>
|
|
174
|
+
<script src="../src/components/FilterList.js" type="module"></script>
|
|
175
|
+
<script src="../src/components/FilterItem.js" type="module"></script>
|
|
176
|
+
<script src="../src/components/Aside.js" type="module"></script>
|
|
177
|
+
<script src="../src/components/Icon.js" type="module"></script>
|
|
178
|
+
<script src="../src/components/ThemeSwitcher.js" type="module"></script>
|
|
179
|
+
<script type="module">
|
|
180
|
+
import debounce from '../src/utils/debounce.js';
|
|
181
|
+
|
|
182
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
183
|
+
await window.customElements.whenDefined('k-aside');
|
|
184
|
+
document.getElementById('navSideMenu').toggle();
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
document.addEventListener('click', function(e) {
|
|
188
|
+
if(e.target.matches('a[href^="#"]')) {
|
|
189
|
+
e.preventDefault();
|
|
190
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
191
|
+
const target = document.getElementById(targetId);
|
|
192
|
+
if(target) {
|
|
193
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
194
|
+
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
195
|
+
history.replaceState(null, '', url);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
/*
|
|
201
|
+
Nav Search
|
|
202
|
+
*/
|
|
203
|
+
const searchInput = document.getElementById('navSearchInput');
|
|
204
|
+
const searchDropdown = document.getElementById('navSearchDropdown');
|
|
205
|
+
let navSearchList = null;
|
|
206
|
+
|
|
207
|
+
const openSearch = async () => {
|
|
208
|
+
await customElements.whenDefined('k-filter-list');
|
|
209
|
+
if(!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
210
|
+
navSearchList.filter(searchInput.value);
|
|
211
|
+
searchDropdown.hidden = false;
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
const closeSearch = () => {
|
|
215
|
+
searchDropdown.hidden = true;
|
|
216
|
+
navSearchList?.clearFocus();
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
searchInput.addEventListener('focus', openSearch);
|
|
220
|
+
|
|
221
|
+
searchInput.addEventListener('input', debounce(e => {
|
|
222
|
+
navSearchList?.filter(e.target.value);
|
|
223
|
+
}, 150));
|
|
224
|
+
|
|
225
|
+
searchInput.addEventListener('keydown', e => {
|
|
226
|
+
if(e.key === 'Escape') {
|
|
227
|
+
searchInput.value = '';
|
|
228
|
+
searchInput.blur();
|
|
229
|
+
closeSearch();
|
|
230
|
+
} else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
231
|
+
navSearchList?.handleKeydown(e);
|
|
232
|
+
}
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
searchInput.addEventListener('blur', () => {
|
|
236
|
+
setTimeout(closeSearch, 150);
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
document.addEventListener('keydown', e => {
|
|
240
|
+
let active = document.activeElement;
|
|
241
|
+
while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
242
|
+
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) {
|
|
246
|
+
searchInput.focus();
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
</script>
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
<k-main>
|
|
253
|
+
|
|
254
|
+
<h1 class="ta-center">Combobox</h1>
|
|
255
|
+
|
|
256
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
257
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
258
|
+
<k-accordion-panel name="toc-panel">
|
|
259
|
+
<div class="m pl">
|
|
260
|
+
<h6>Examples</h6>
|
|
261
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
262
|
+
<a href="#dynamicSearch">Dynamic Search</a><br />
|
|
263
|
+
<a href="#required">Required</a><br />
|
|
264
|
+
<a href="#requireMatch">Require Match</a><br />
|
|
265
|
+
<a href="#maxVisible">Max Visible</a><br />
|
|
266
|
+
|
|
267
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
268
|
+
<a href="#constructor">Constructor</a><br />
|
|
269
|
+
<a href="#requirements">Requirements</a><br />
|
|
270
|
+
<a href="#attributes">Attributes / Properties</a><br />
|
|
271
|
+
<a href="#children">Children</a><br />
|
|
272
|
+
<a href="#methods">Methods</a><br />
|
|
273
|
+
<a href="#eventsRef">Events</a><br />
|
|
274
|
+
<a href="#cssVars">CSS Custom Properties</a><br />
|
|
275
|
+
</div>
|
|
276
|
+
</k-accordion-panel>
|
|
277
|
+
</k-accordion>
|
|
278
|
+
|
|
279
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
280
|
+
<p>Define options as <code><k-option></code> children. As the user types, options are filtered to match the input.</p>
|
|
281
|
+
<div class="row -mx">
|
|
282
|
+
<div class="col m-span-12 px">
|
|
283
|
+
<k-card label="HTML">
|
|
284
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-combobox</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'Select a fruit...'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'apple'</span>></span>Apple<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'banana'</span>></span>Banana<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'cherry'</span>></span>Cherry<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'date'</span>></span>Date<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'elderberry'</span>></span>Elderberry<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'fig'</span>></span>Fig<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'grape'</span>></span>Grape<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'honeydew'</span>></span>Honeydew<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'kiwi'</span>></span>Kiwi<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'lemon'</span>></span>Lemon<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-combobox</span>></span></code></pre>
|
|
285
|
+
</k-card>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="col m-span-12 px">
|
|
288
|
+
<k-card label="Output">
|
|
289
|
+
<k-combobox placeholder="Select a fruit...">
|
|
290
|
+
<k-option value="apple">Apple</k-option>
|
|
291
|
+
<k-option value="banana">Banana</k-option>
|
|
292
|
+
<k-option value="cherry">Cherry</k-option>
|
|
293
|
+
<k-option value="date">Date</k-option>
|
|
294
|
+
<k-option value="elderberry">Elderberry</k-option>
|
|
295
|
+
<k-option value="fig">Fig</k-option>
|
|
296
|
+
<k-option value="grape">Grape</k-option>
|
|
297
|
+
<k-option value="honeydew">Honeydew</k-option>
|
|
298
|
+
<k-option value="kiwi">Kiwi</k-option>
|
|
299
|
+
<k-option value="lemon">Lemon</k-option>
|
|
300
|
+
</k-combobox>
|
|
301
|
+
</k-card>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<h3 id="dynamicSearch"><a href="#dynamicSearch" class="no-link">Dynamic Search</a></h3>
|
|
306
|
+
<p>Listen for the <code>search</code> event to fetch options from an external source when the user pauses typing. Use <code>setOptions()</code> to replace the <code><k-option></code> children programmatically. Set the <code>searching</code> attribute to show a loading spinner while results load.</p>
|
|
307
|
+
<div class="row -mx">
|
|
308
|
+
<div class="col m-span-12 px">
|
|
309
|
+
<k-card label="HTML">
|
|
310
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-combobox</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'dynamicCombobox'</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'Search users...'</span> <span class="hljs-attr">debounce-ms</span>=<span class="hljs-string">'400'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-combobox</span>></span></code></pre>
|
|
311
|
+
</k-card>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="col m-span-12 px">
|
|
314
|
+
<k-card label="JavaScript">
|
|
315
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> cb = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#dynamicCombobox'</span>);<br>cb.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'search'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> cb.<span class="hljs-property">searching</span> = <span class="hljs-literal">true</span>;<br> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">'/api/users?q='</span> + <span class="hljs-built_in">encodeURIComponent</span>(e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>)).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">r</span> =></span> r.<span class="hljs-title function_">json</span>()).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">users</span> =></span> {<br> cb.<span class="hljs-title function_">setOptions</span>(users.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">u</span> =></span> ({<br> <span class="hljs-attr">label</span>: u.<span class="hljs-property">email</span>,<br> <span class="hljs-attr">value</span>: u.<span class="hljs-property">id</span><br> })));<br> cb.<span class="hljs-property">searching</span> = <span class="hljs-literal">false</span>;<br> });<br>});<br>cb.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'select'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Selected:'</span>, e.<span class="hljs-property">detail</span>.<span class="hljs-property">label</span>, e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>);<br>});</code></pre>
|
|
316
|
+
</k-card>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="col m-span-12 px">
|
|
319
|
+
<k-card label="Output">
|
|
320
|
+
<k-combobox id="dynamicCombobox" placeholder="Search users..." debounce-ms="400"></k-combobox>
|
|
321
|
+
<p class="mt" id="dynamicResult"></p>
|
|
322
|
+
</k-card>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<h3 id="required"><a href="#required" class="no-link">Required</a></h3>
|
|
327
|
+
<p>The combobox is form-associated. Use the <code>required</code> attribute to prevent submitting when the field is empty.</p>
|
|
328
|
+
<div class="row -mx">
|
|
329
|
+
<div class="col m-span-12 px">
|
|
330
|
+
<k-card label="HTML">
|
|
331
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'requiredForm'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-combobox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'fruit'</span> <span class="hljs-attr">required</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'Required field...'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'apple'</span>></span>Apple<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'banana'</span>></span>Banana<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'cherry'</span>></span>Cherry<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">k-combobox</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'submit'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'btn primary mt'</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre>
|
|
332
|
+
</k-card>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="col m-span-12 px">
|
|
335
|
+
<k-card label="Output">
|
|
336
|
+
<form id="requiredForm">
|
|
337
|
+
<k-combobox name="fruit" required placeholder="Required field...">
|
|
338
|
+
<k-option value="apple">Apple</k-option>
|
|
339
|
+
<k-option value="banana">Banana</k-option>
|
|
340
|
+
<k-option value="cherry">Cherry</k-option>
|
|
341
|
+
</k-combobox>
|
|
342
|
+
<button type="submit" class="btn primary mt">Submit</button>
|
|
343
|
+
</form>
|
|
344
|
+
<p class="mt" id="requiredResult"></p>
|
|
345
|
+
</k-card>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<h3 id="requireMatch"><a href="#requireMatch" class="no-link">Require Match</a></h3>
|
|
350
|
+
<p>Use <code>require-match</code> to only accept values that match an existing option. An empty value is still valid (the field is not required), but any typed text that does not match an option label will fail validation.</p>
|
|
351
|
+
<div class="row -mx">
|
|
352
|
+
<div class="col m-span-12 px">
|
|
353
|
+
<k-card label="HTML">
|
|
354
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'matchForm'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-combobox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">'color'</span> <span class="hljs-attr">require-match</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'Type or pick a color...'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'red'</span>></span>Red<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'green'</span>></span>Green<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'blue'</span>></span>Blue<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">k-combobox</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'submit'</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'btn primary mt'</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br><span class="hljs-tag"></<span class="hljs-name">form</span>></span></code></pre>
|
|
355
|
+
</k-card>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="col m-span-12 px">
|
|
358
|
+
<k-card label="Output">
|
|
359
|
+
<form id="matchForm">
|
|
360
|
+
<k-combobox name="color" require-match placeholder="Type or pick a color...">
|
|
361
|
+
<k-option value="red">Red</k-option>
|
|
362
|
+
<k-option value="green">Green</k-option>
|
|
363
|
+
<k-option value="blue">Blue</k-option>
|
|
364
|
+
</k-combobox>
|
|
365
|
+
<button type="submit" class="btn primary mt">Submit</button>
|
|
366
|
+
</form>
|
|
367
|
+
<p class="mt" id="matchResult"></p>
|
|
368
|
+
</k-card>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
<h3 id="maxVisible"><a href="#maxVisible" class="no-link">Max Visible</a></h3>
|
|
373
|
+
<p>Use <code>max-visible</code> to limit the number of options shown at once. A “more” indicator appears when additional matches exist.</p>
|
|
374
|
+
<div class="row -mx">
|
|
375
|
+
<div class="col m-span-12 px">
|
|
376
|
+
<k-card label="HTML">
|
|
377
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">k-combobox</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'Shows 4 at a time...'</span> <span class="hljs-attr">max-visible</span>=<span class="hljs-string">'4'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'1'</span>></span>Alpha<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'2'</span>></span>Bravo<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'3'</span>></span>Charlie<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'4'</span>></span>Delta<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'5'</span>></span>Echo<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'6'</span>></span>Foxtrot<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'7'</span>></span>Golf<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'8'</span>></span>Hotel<span class="hljs-tag"></<span class="hljs-name">k-option</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-combobox</span>></span></code></pre>
|
|
378
|
+
</k-card>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="col m-span-12 px">
|
|
381
|
+
<k-card label="Output">
|
|
382
|
+
<k-combobox placeholder="Shows 4 at a time..." max-visible="4">
|
|
383
|
+
<k-option value="1">Alpha</k-option>
|
|
384
|
+
<k-option value="2">Bravo</k-option>
|
|
385
|
+
<k-option value="3">Charlie</k-option>
|
|
386
|
+
<k-option value="4">Delta</k-option>
|
|
387
|
+
<k-option value="5">Echo</k-option>
|
|
388
|
+
<k-option value="6">Foxtrot</k-option>
|
|
389
|
+
<k-option value="7">Golf</k-option>
|
|
390
|
+
<k-option value="8">Hotel</k-option>
|
|
391
|
+
</k-combobox>
|
|
392
|
+
</k-card>
|
|
393
|
+
</div>
|
|
394
|
+
</div>
|
|
395
|
+
|
|
396
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
397
|
+
|
|
398
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
399
|
+
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'module'</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'path/to/Combobox.js'</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
400
|
+
<p><code>Combobox.js</code> automatically imports <code>Option.js</code>, so only one script tag is needed. <code>k-spinner</code> must be loaded separately if using the <code>searching</code> indicator.</p>
|
|
401
|
+
|
|
402
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
403
|
+
<p>The following components are required:</p>
|
|
404
|
+
<ul>
|
|
405
|
+
<li><a href="./spinner.html"><code>k-spinner</code></a> — used for the searching indicator</li>
|
|
406
|
+
</ul>
|
|
407
|
+
|
|
408
|
+
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes / Properties</a></h3>
|
|
409
|
+
<table class="b r">
|
|
410
|
+
<thead>
|
|
411
|
+
<tr>
|
|
412
|
+
<th>Attribute</th>
|
|
413
|
+
<th>Property</th>
|
|
414
|
+
<th>Type</th>
|
|
415
|
+
<th>Default</th>
|
|
416
|
+
<th>Description</th>
|
|
417
|
+
</tr>
|
|
418
|
+
</thead>
|
|
419
|
+
<tbody>
|
|
420
|
+
<tr>
|
|
421
|
+
<td><code>value</code></td>
|
|
422
|
+
<td><code>value</code></td>
|
|
423
|
+
<td><code>String</code></td>
|
|
424
|
+
<td><code>''</code></td>
|
|
425
|
+
<td>The current text input value.</td>
|
|
426
|
+
</tr>
|
|
427
|
+
<tr>
|
|
428
|
+
<td><code>name</code></td>
|
|
429
|
+
<td><code>name</code></td>
|
|
430
|
+
<td><code>String</code></td>
|
|
431
|
+
<td><code>''</code></td>
|
|
432
|
+
<td>Form field name, submitted with the form.</td>
|
|
433
|
+
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td><code>placeholder</code></td>
|
|
436
|
+
<td><code>placeholder</code></td>
|
|
437
|
+
<td><code>String</code></td>
|
|
438
|
+
<td><code>''</code></td>
|
|
439
|
+
<td>Placeholder text for the input field.</td>
|
|
440
|
+
</tr>
|
|
441
|
+
<tr>
|
|
442
|
+
<td><code>opened</code></td>
|
|
443
|
+
<td><code>opened</code></td>
|
|
444
|
+
<td><code>Boolean</code></td>
|
|
445
|
+
<td><code>false</code></td>
|
|
446
|
+
<td>Whether the options dropdown is visible.</td>
|
|
447
|
+
</tr>
|
|
448
|
+
<tr>
|
|
449
|
+
<td><code>searching</code></td>
|
|
450
|
+
<td><code>searching</code></td>
|
|
451
|
+
<td><code>Boolean</code></td>
|
|
452
|
+
<td><code>false</code></td>
|
|
453
|
+
<td>Shows a loading spinner in the dropdown.</td>
|
|
454
|
+
</tr>
|
|
455
|
+
<tr>
|
|
456
|
+
<td><code>required</code></td>
|
|
457
|
+
<td><code>required</code></td>
|
|
458
|
+
<td><code>Boolean</code></td>
|
|
459
|
+
<td><code>false</code></td>
|
|
460
|
+
<td>Marks the field as required for form validation.</td>
|
|
461
|
+
</tr>
|
|
462
|
+
<tr>
|
|
463
|
+
<td><code>require-match</code></td>
|
|
464
|
+
<td><code>requireMatch</code></td>
|
|
465
|
+
<td><code>Boolean</code></td>
|
|
466
|
+
<td><code>false</code></td>
|
|
467
|
+
<td>When set, only values matching an existing option are valid.</td>
|
|
468
|
+
</tr>
|
|
469
|
+
<tr>
|
|
470
|
+
<td><code>disabled</code></td>
|
|
471
|
+
<td><code>disabled</code></td>
|
|
472
|
+
<td><code>Boolean</code></td>
|
|
473
|
+
<td><code>false</code></td>
|
|
474
|
+
<td>Disables the combobox.</td>
|
|
475
|
+
</tr>
|
|
476
|
+
<tr>
|
|
477
|
+
<td><code>debounce-ms</code></td>
|
|
478
|
+
<td><code>debounceMs</code></td>
|
|
479
|
+
<td><code>Number</code></td>
|
|
480
|
+
<td><code>300</code></td>
|
|
481
|
+
<td>Milliseconds to wait after typing before firing the <code>search</code> event.</td>
|
|
482
|
+
</tr>
|
|
483
|
+
<tr>
|
|
484
|
+
<td><code>max-visible</code></td>
|
|
485
|
+
<td><code>maxVisible</code></td>
|
|
486
|
+
<td><code>Number</code></td>
|
|
487
|
+
<td><code>8</code></td>
|
|
488
|
+
<td>Maximum number of options visible at once.</td>
|
|
489
|
+
</tr>
|
|
490
|
+
</tbody>
|
|
491
|
+
</table>
|
|
492
|
+
|
|
493
|
+
<h3 id="children"><a href="#children" class="no-link">Children</a></h3>
|
|
494
|
+
<table class="b r">
|
|
495
|
+
<thead>
|
|
496
|
+
<tr>
|
|
497
|
+
<th>Element</th>
|
|
498
|
+
<th>Description</th>
|
|
499
|
+
</tr>
|
|
500
|
+
</thead>
|
|
501
|
+
<tbody>
|
|
502
|
+
<tr>
|
|
503
|
+
<td><code><k-option value="...">Label</k-option></code></td>
|
|
504
|
+
<td>Defines a selectable option. The <code>value</code> attribute is the form value; the text content is the displayed label. If <code>value</code> is omitted, the text content is used as both.</td>
|
|
505
|
+
</tr>
|
|
506
|
+
</tbody>
|
|
507
|
+
</table>
|
|
508
|
+
|
|
509
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
510
|
+
<table class="b r">
|
|
511
|
+
<thead>
|
|
512
|
+
<tr>
|
|
513
|
+
<th>Method</th>
|
|
514
|
+
<th>Description</th>
|
|
515
|
+
</tr>
|
|
516
|
+
</thead>
|
|
517
|
+
<tbody>
|
|
518
|
+
<tr>
|
|
519
|
+
<td><code>setOptions(options)</code></td>
|
|
520
|
+
<td>Replaces all <code><k-option></code> children. Accepts an array of strings or <code>{label, value}</code> objects. Returns <code>this</code>.</td>
|
|
521
|
+
</tr>
|
|
522
|
+
<tr>
|
|
523
|
+
<td><code>clear()</code></td>
|
|
524
|
+
<td>Clears the input value and closes the dropdown. Returns <code>this</code>.</td>
|
|
525
|
+
</tr>
|
|
526
|
+
</tbody>
|
|
527
|
+
</table>
|
|
528
|
+
<p>Example:</p>
|
|
529
|
+
<pre><code class="hljs javascript">combobox.<span class="hljs-title function_">setOptions</span>([<span class="hljs-string">'Apple'</span>, <span class="hljs-string">'Banana'</span>, {<br> <span class="hljs-attr">label</span>: <span class="hljs-string">'alice@example.com'</span>,<br> <span class="hljs-attr">value</span>: <span class="hljs-number">101</span><br>}]);</code></pre>
|
|
530
|
+
|
|
531
|
+
<h3 id="eventsRef"><a href="#eventsRef" class="no-link">Events</a></h3>
|
|
532
|
+
<table class="b r">
|
|
533
|
+
<thead>
|
|
534
|
+
<tr>
|
|
535
|
+
<th>Event</th>
|
|
536
|
+
<th>Detail</th>
|
|
537
|
+
<th>Description</th>
|
|
538
|
+
</tr>
|
|
539
|
+
</thead>
|
|
540
|
+
<tbody>
|
|
541
|
+
<tr>
|
|
542
|
+
<td><code>search</code></td>
|
|
543
|
+
<td><code>{ value: String }</code></td>
|
|
544
|
+
<td>Fired after the user stops typing for <code>debounce-ms</code> milliseconds.</td>
|
|
545
|
+
</tr>
|
|
546
|
+
<tr>
|
|
547
|
+
<td><code>select</code></td>
|
|
548
|
+
<td><code>{ value: *, label: String }</code></td>
|
|
549
|
+
<td>Fired when the user selects an option from the list.</td>
|
|
550
|
+
</tr>
|
|
551
|
+
<tr>
|
|
552
|
+
<td><code>change</code></td>
|
|
553
|
+
<td>—</td>
|
|
554
|
+
<td>Fired after an option is selected.</td>
|
|
555
|
+
</tr>
|
|
556
|
+
</tbody>
|
|
557
|
+
</table>
|
|
558
|
+
|
|
559
|
+
<h3 id="cssVars"><a href="#cssVars" class="no-link">CSS Custom Properties</a></h3>
|
|
560
|
+
<p>The combobox inherits kempo-css variables for colors, borders, spacing, and animation timing. No additional custom properties are defined.</p>
|
|
561
|
+
|
|
562
|
+
</k-main>
|
|
563
|
+
<div style="height:33vh"></div>
|
|
564
|
+
<script type="module" src="../src/components/Main.js"></script>
|
|
565
|
+
|
|
566
|
+
<script type="module" src="../src/components/Combobox.js"></script>
|
|
567
|
+
<script type="module" src="../src/components/Spinner.js"></script>
|
|
568
|
+
<script type="module" src="../src/components/Accordion.js"></script>
|
|
569
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
570
|
+
<script type="module">
|
|
571
|
+
const fakeUsers = [
|
|
572
|
+
'alice@example.com', 'bob@example.com', 'carol@example.com',
|
|
573
|
+
'dave@example.com', 'eve@example.com', 'frank@example.com',
|
|
574
|
+
'grace@example.com', 'heidi@example.com', 'ivan@example.com',
|
|
575
|
+
'judy@example.com', 'kate@example.com', 'leo@example.com'
|
|
576
|
+
];
|
|
577
|
+
const dynamicCb = document.querySelector('#dynamicCombobox');
|
|
578
|
+
const dynamicResult = document.querySelector('#dynamicResult');
|
|
579
|
+
dynamicCb.addEventListener('search', (e) => {
|
|
580
|
+
dynamicCb.searching = true;
|
|
581
|
+
setTimeout(() => {
|
|
582
|
+
dynamicCb.setOptions(
|
|
583
|
+
fakeUsers.filter(u => u.includes(e.detail.value.toLowerCase())).slice(0, 5)
|
|
584
|
+
);
|
|
585
|
+
dynamicCb.searching = false;
|
|
586
|
+
}, 800);
|
|
587
|
+
});
|
|
588
|
+
dynamicCb.addEventListener('select', (e) => {
|
|
589
|
+
dynamicResult.textContent = 'Selected: ' + e.detail.label;
|
|
590
|
+
});
|
|
591
|
+
|
|
592
|
+
document.querySelector('#requiredForm').addEventListener('submit', (e) => {
|
|
593
|
+
e.preventDefault();
|
|
594
|
+
const data = new FormData(e.target);
|
|
595
|
+
document.querySelector('#requiredResult').textContent = 'Submitted: fruit=' + data.get('fruit');
|
|
596
|
+
});
|
|
597
|
+
|
|
598
|
+
document.querySelector('#matchForm').addEventListener('submit', (e) => {
|
|
599
|
+
e.preventDefault();
|
|
600
|
+
const data = new FormData(e.target);
|
|
601
|
+
document.querySelector('#matchResult').textContent = 'Submitted: color=' + data.get('colorruit');
|
|
602
|
+
});
|
|
603
|
+
|
|
604
|
+
document.querySelector('#matchForm').addEventListener('submit', (e) => {
|
|
605
|
+
e.preventDefault();
|
|
606
|
+
const data = new FormData(e.target);
|
|
607
|
+
document.querySelector('#matchResult').textContent = 'Submitted: color=' + data.get('color');
|
|
608
|
+
});
|
|
609
|
+
</script>
|
|
610
|
+
|
|
611
|
+
</body>
|
|
612
|
+
</html>
|