@wpmoo/ui 1.0.0-rc.2 → 1.0.0-rc.3
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/ASSET_LICENSE.md +1 -1
- package/README.md +23 -8
- package/THIRD_PARTY_NOTICES.md +53 -0
- package/certification.json +8 -3
- package/dist/assets/css/moo-ui.css +8208 -7623
- package/dist/assets/css/moo-ui.min.css +3 -3
- package/dist/assets/css/moo.css +549 -59
- package/dist/assets/css/moo.min.css +3 -3
- package/dist/js/chart.js +15258 -0
- package/dist/js/chart.min.js +27 -0
- package/dist/js/combobox.js +28 -23
- package/dist/js/context-menu.js +5 -0
- package/dist/js/datatable.js +5 -0
- package/dist/js/datepicker.js +1154 -0
- package/dist/js/datepicker.min.js +6 -0
- package/dist/js/sidebar.js +67 -25
- package/dist/js/slider.js +324 -0
- package/package.json +17 -5
- package/scss/_config.scss +24 -0
- package/scss/_facade-settings.scss +0 -51
- package/scss/settings/_facade_public.scss +0 -23
package/dist/js/combobox.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Moo UI combobox.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
|
|
3
|
+
* Copyright 2026 WPMoo (https://wpmoo.org)
|
|
4
|
+
* Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
|
|
5
|
+
*/
|
|
1
6
|
const instances = new WeakMap();
|
|
2
7
|
const normalize = (value) => value.trim().toLowerCase();
|
|
3
8
|
|
|
@@ -30,36 +35,36 @@ export default class Combobox {
|
|
|
30
35
|
throw new TypeError("Combobox requires an input, menu, and at least one option.");
|
|
31
36
|
}
|
|
32
37
|
|
|
33
|
-
this._isMultiple = element.dataset.
|
|
38
|
+
this._isMultiple = element.dataset.comboboxMultiple === "true";
|
|
34
39
|
this._hidden = this._isMultiple ? null : element.querySelector('input[type="hidden"]');
|
|
35
40
|
this._chipValue = element.querySelector(".combobox-value");
|
|
36
|
-
this._valueStore = element.querySelector("[data-
|
|
37
|
-
this._chipIconTemplate = element.querySelector("[data-
|
|
38
|
-
this._clearTrigger = element.querySelector("[data-
|
|
41
|
+
this._valueStore = element.querySelector("[data-combobox-value-store]");
|
|
42
|
+
this._chipIconTemplate = element.querySelector("[data-combobox-chip-icon]");
|
|
43
|
+
this._clearTrigger = element.querySelector("[data-combobox-clear]");
|
|
39
44
|
this._indicator = element.querySelector(".combobox-indicator");
|
|
40
|
-
this._groups = Array.from(element.querySelectorAll("[data-
|
|
41
|
-
this._separators = Array.from(element.querySelectorAll("[data-
|
|
45
|
+
this._groups = Array.from(element.querySelectorAll("[data-combobox-group]"));
|
|
46
|
+
this._separators = Array.from(element.querySelectorAll("[data-combobox-separator]"));
|
|
42
47
|
this._listeners = [];
|
|
43
48
|
this._generated = [];
|
|
44
49
|
this._startsOpen = this._menu.classList.contains("show");
|
|
45
50
|
|
|
46
|
-
this._empty = this._menu.querySelector("[data-
|
|
51
|
+
this._empty = this._menu.querySelector("[data-combobox-empty]");
|
|
47
52
|
if (!this._empty) {
|
|
48
53
|
this._empty = this._document.createElement("li");
|
|
49
54
|
this._empty.className = "combobox-empty";
|
|
50
55
|
this._empty.hidden = true;
|
|
51
|
-
this._empty.dataset.
|
|
56
|
+
this._empty.dataset.comboboxEmpty = "true";
|
|
52
57
|
this._empty.textContent = this._config.noResultsText;
|
|
53
58
|
this._menu.appendChild(this._empty);
|
|
54
59
|
this._generated.push(this._empty);
|
|
55
60
|
}
|
|
56
61
|
|
|
57
|
-
this._liveRegion = element.querySelector("[data-
|
|
62
|
+
this._liveRegion = element.querySelector("[data-combobox-live]");
|
|
58
63
|
if (!this._liveRegion) {
|
|
59
64
|
this._liveRegion = this._document.createElement("span");
|
|
60
65
|
this._liveRegion.className = "visually-hidden";
|
|
61
66
|
this._liveRegion.setAttribute("aria-live", "polite");
|
|
62
|
-
this._liveRegion.dataset.
|
|
67
|
+
this._liveRegion.dataset.comboboxLive = "true";
|
|
63
68
|
element.appendChild(this._liveRegion);
|
|
64
69
|
this._generated.push(this._liveRegion);
|
|
65
70
|
}
|
|
@@ -67,8 +72,8 @@ export default class Combobox {
|
|
|
67
72
|
instances.set(element, this);
|
|
68
73
|
this._bindEvents();
|
|
69
74
|
this._toggleClear(
|
|
70
|
-
this._input.dataset.
|
|
71
|
-
element.dataset.
|
|
75
|
+
this._input.dataset.comboboxSelected === "true" ||
|
|
76
|
+
element.dataset.comboboxSelected === "true"
|
|
72
77
|
);
|
|
73
78
|
this._syncMultipleValue();
|
|
74
79
|
this._filterOptions({ open: this._startsOpen, activate: this._startsOpen });
|
|
@@ -85,8 +90,8 @@ export default class Combobox {
|
|
|
85
90
|
this._closeMenu(false);
|
|
86
91
|
this._generated.forEach((element) => element.remove());
|
|
87
92
|
this._generated = [];
|
|
88
|
-
this._chipValue?.querySelectorAll("[data-
|
|
89
|
-
this._valueStore?.querySelectorAll("[data-
|
|
93
|
+
this._chipValue?.querySelectorAll("[data-combobox-generated]").forEach((item) => item.remove());
|
|
94
|
+
this._valueStore?.querySelectorAll("[data-combobox-generated]").forEach((item) => item.remove());
|
|
90
95
|
instances.delete(this._element);
|
|
91
96
|
}
|
|
92
97
|
|
|
@@ -108,7 +113,7 @@ export default class Combobox {
|
|
|
108
113
|
}
|
|
109
114
|
|
|
110
115
|
_optionGroupIsHidden(option) {
|
|
111
|
-
return option.closest("[data-
|
|
116
|
+
return option.closest("[data-combobox-group]")?.hidden || false;
|
|
112
117
|
}
|
|
113
118
|
|
|
114
119
|
_visibleOptions() {
|
|
@@ -173,8 +178,8 @@ export default class Combobox {
|
|
|
173
178
|
|
|
174
179
|
_toggleClear(selected) {
|
|
175
180
|
const value = selected ? "true" : "false";
|
|
176
|
-
this._element.dataset.
|
|
177
|
-
this._input.dataset.
|
|
181
|
+
this._element.dataset.comboboxSelected = value;
|
|
182
|
+
this._input.dataset.comboboxSelected = value;
|
|
178
183
|
if (this._clearTrigger) {
|
|
179
184
|
this._clearTrigger.hidden = !selected;
|
|
180
185
|
if (this._indicator) {
|
|
@@ -189,7 +194,7 @@ export default class Combobox {
|
|
|
189
194
|
const chip = this._document.createElement("span");
|
|
190
195
|
chip.className = "badge text-bg-secondary combobox-chip";
|
|
191
196
|
chip.dataset.value = value;
|
|
192
|
-
chip.dataset.
|
|
197
|
+
chip.dataset.comboboxGenerated = "true";
|
|
193
198
|
const labelElement = this._document.createElement("span");
|
|
194
199
|
labelElement.className = "combobox-chip__label";
|
|
195
200
|
labelElement.textContent = label;
|
|
@@ -198,7 +203,7 @@ export default class Combobox {
|
|
|
198
203
|
remove.className = "combobox-chip__remove";
|
|
199
204
|
remove.type = "button";
|
|
200
205
|
remove.dataset.value = value;
|
|
201
|
-
remove.dataset.
|
|
206
|
+
remove.dataset.comboboxChipRemove = "true";
|
|
202
207
|
remove.setAttribute("aria-label", `Remove ${label}`);
|
|
203
208
|
remove.append(this._chipIconTemplate?.content.cloneNode(true) || "x");
|
|
204
209
|
chip.appendChild(remove);
|
|
@@ -215,13 +220,13 @@ export default class Combobox {
|
|
|
215
220
|
}
|
|
216
221
|
if (this._valueStore) {
|
|
217
222
|
this._valueStore.replaceChildren();
|
|
218
|
-
const name = this._valueStore.dataset.
|
|
223
|
+
const name = this._valueStore.dataset.comboboxName || "";
|
|
219
224
|
selected.forEach((option) => {
|
|
220
225
|
const field = this._document.createElement("input");
|
|
221
226
|
field.type = "hidden";
|
|
222
227
|
field.name = name;
|
|
223
228
|
field.value = option.dataset.value || "";
|
|
224
|
-
field.dataset.
|
|
229
|
+
field.dataset.comboboxGenerated = "true";
|
|
225
230
|
this._valueStore.appendChild(field);
|
|
226
231
|
});
|
|
227
232
|
}
|
|
@@ -363,7 +368,7 @@ export default class Combobox {
|
|
|
363
368
|
_bindEvents() {
|
|
364
369
|
this._listen(this._input, "focus", () => {
|
|
365
370
|
this._openMenu();
|
|
366
|
-
if (!this._isMultiple && this._input.dataset.
|
|
371
|
+
if (!this._isMultiple && this._input.dataset.comboboxSelected === "true") {
|
|
367
372
|
this._input.select();
|
|
368
373
|
}
|
|
369
374
|
this._activateFirstOptionIfNeeded();
|
|
@@ -415,7 +420,7 @@ export default class Combobox {
|
|
|
415
420
|
_handleRootClick(event) {
|
|
416
421
|
const target = event.target;
|
|
417
422
|
const trigger = target instanceof this._window.Element
|
|
418
|
-
? target.closest("[data-
|
|
423
|
+
? target.closest("[data-combobox-chip-remove]")
|
|
419
424
|
: null;
|
|
420
425
|
if (trigger) {
|
|
421
426
|
event.preventDefault();
|
package/dist/js/context-menu.js
CHANGED
package/dist/js/datatable.js
CHANGED