@deepfuture/dui-components 0.0.12 → 0.0.13
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/_deprecated/center/center.js +2 -2
- package/_deprecated/hstack/hstack.js +79 -33
- package/_deprecated/page-inset/page-inset.js +104 -56
- package/_deprecated/vstack/vstack.js +61 -19
- package/accordion/accordion-item.js +217 -147
- package/accordion/accordion.js +214 -149
- package/alert-dialog/alert-dialog-close.js +2 -2
- package/alert-dialog/alert-dialog-popup.js +230 -166
- package/alert-dialog/alert-dialog-trigger.js +2 -2
- package/alert-dialog/alert-dialog.js +128 -73
- package/avatar/avatar.js +175 -115
- package/badge/badge.js +2 -2
- package/breadcrumb/breadcrumb-ellipsis.js +2 -2
- package/breadcrumb/breadcrumb-item.js +2 -2
- package/breadcrumb/breadcrumb-link.js +2 -2
- package/breadcrumb/breadcrumb-page.js +2 -2
- package/breadcrumb/breadcrumb-separator.js +2 -2
- package/breadcrumb/breadcrumb.js +2 -2
- package/button/button.js +109 -65
- package/calendar/calendar.js +368 -290
- package/checkbox/checkbox-group.js +146 -87
- package/checkbox/checkbox.js +232 -167
- package/collapsible/collapsible.js +210 -132
- package/combobox/combobox.js +318 -252
- package/command/command-empty.js +67 -25
- package/command/command-group.js +87 -47
- package/command/command-input.js +84 -44
- package/command/command-item.js +168 -124
- package/command/command-list.js +60 -18
- package/command/command-separator.js +2 -2
- package/command/command-shortcut.js +2 -2
- package/command/command.js +297 -232
- package/data-table/data-table.js +225 -153
- package/dialog/dialog-close.js +2 -2
- package/dialog/dialog-popup.js +247 -181
- package/dialog/dialog-trigger.js +2 -2
- package/dialog/dialog.js +128 -73
- package/dropzone/dropzone.js +310 -249
- package/icon/icon.js +2 -2
- package/input/input.js +204 -143
- package/link/link.js +62 -24
- package/menu/menu-item.js +66 -24
- package/menu/menu.js +189 -136
- package/menubar/menubar.js +142 -91
- package/number-field/number-field.js +277 -204
- package/package.json +2 -2
- package/popover/popover-close.js +2 -2
- package/popover/popover-popup.js +126 -76
- package/popover/popover-trigger.js +2 -2
- package/popover/popover.js +181 -120
- package/portal/portal.js +128 -86
- package/preview-card/preview-card-popup.js +114 -66
- package/preview-card/preview-card-trigger.js +2 -2
- package/preview-card/preview-card.js +211 -142
- package/progress/progress.js +91 -45
- package/radio/radio-group.js +153 -90
- package/radio/radio.js +137 -94
- package/scroll-area/scroll-area.js +382 -283
- package/select/select.js +260 -203
- package/separator/separator.js +60 -18
- package/sidebar/sidebar-content.js +2 -2
- package/sidebar/sidebar-footer.js +2 -2
- package/sidebar/sidebar-group-label.js +2 -2
- package/sidebar/sidebar-group.js +2 -2
- package/sidebar/sidebar-header.js +2 -2
- package/sidebar/sidebar-inset.js +2 -2
- package/sidebar/sidebar-menu-button.js +118 -74
- package/sidebar/sidebar-menu-item.js +2 -2
- package/sidebar/sidebar-menu.js +2 -2
- package/sidebar/sidebar-provider.js +202 -129
- package/sidebar/sidebar-separator.js +2 -2
- package/sidebar/sidebar-trigger.js +2 -2
- package/sidebar/sidebar.js +150 -85
- package/slider/slider.js +217 -159
- package/spinner/spinner.js +70 -28
- package/switch/switch.js +174 -111
- package/tabs/tab.js +89 -47
- package/tabs/tabs-indicator.js +2 -2
- package/tabs/tabs-list.js +92 -54
- package/tabs/tabs-panel.js +90 -44
- package/tabs/tabs.js +130 -71
- package/textarea/textarea.js +153 -95
- package/toggle/toggle-group.js +184 -125
- package/toggle/toggle.js +131 -76
- package/toolbar/toolbar.js +79 -33
- package/tooltip/tooltip-popup.js +108 -60
- package/tooltip/tooltip-trigger.js +93 -55
- package/tooltip/tooltip.js +225 -154
- package/trunc/trunc.js +78 -34
package/select/select.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/select */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
35
|
+
};
|
|
36
|
+
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
|
|
37
|
+
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
|
|
38
|
+
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
|
|
7
39
|
};
|
|
8
40
|
import { css, html, LitElement, nothing } from "lit";
|
|
9
41
|
import { property, state } from "lit/decorators.js";
|
|
@@ -94,49 +126,91 @@ const portalPopupStyles = [
|
|
|
94
126
|
* @fires value-change - Fired when the selected value changes.
|
|
95
127
|
* Detail: { value: string, option: SelectOption }
|
|
96
128
|
*/
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
this
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
this
|
|
136
|
-
this._fieldCtx
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
129
|
+
let DuiSelect = (() => {
|
|
130
|
+
let _classSuper = LitElement;
|
|
131
|
+
let _options_decorators;
|
|
132
|
+
let _options_initializers = [];
|
|
133
|
+
let _options_extraInitializers = [];
|
|
134
|
+
let _value_decorators;
|
|
135
|
+
let _value_initializers = [];
|
|
136
|
+
let _value_extraInitializers = [];
|
|
137
|
+
let _placeholder_decorators;
|
|
138
|
+
let _placeholder_initializers = [];
|
|
139
|
+
let _placeholder_extraInitializers = [];
|
|
140
|
+
let _disabled_decorators;
|
|
141
|
+
let _disabled_initializers = [];
|
|
142
|
+
let _disabled_extraInitializers = [];
|
|
143
|
+
let _name_decorators;
|
|
144
|
+
let _name_initializers = [];
|
|
145
|
+
let _name_extraInitializers = [];
|
|
146
|
+
let __fieldCtx_decorators;
|
|
147
|
+
let __fieldCtx_initializers = [];
|
|
148
|
+
let __fieldCtx_extraInitializers = [];
|
|
149
|
+
let _private_highlightedIndex_decorators;
|
|
150
|
+
let _private_highlightedIndex_initializers = [];
|
|
151
|
+
let _private_highlightedIndex_extraInitializers = [];
|
|
152
|
+
let _private_highlightedIndex_descriptor;
|
|
153
|
+
return class DuiSelect extends _classSuper {
|
|
154
|
+
static {
|
|
155
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
156
|
+
_options_decorators = [property({ attribute: false })];
|
|
157
|
+
_value_decorators = [property({ type: String })];
|
|
158
|
+
_placeholder_decorators = [property({ type: String })];
|
|
159
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
160
|
+
_name_decorators = [property({ type: String })];
|
|
161
|
+
__fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
|
|
162
|
+
_private_highlightedIndex_decorators = [state()];
|
|
163
|
+
__esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
|
|
164
|
+
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
165
|
+
__esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
|
|
166
|
+
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
167
|
+
__esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
|
|
168
|
+
__esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
|
|
169
|
+
__esDecorate(this, _private_highlightedIndex_descriptor = { get: __setFunctionName(function () { return this.#highlightedIndex_accessor_storage; }, "#highlightedIndex", "get"), set: __setFunctionName(function (value) { this.#highlightedIndex_accessor_storage = value; }, "#highlightedIndex", "set") }, _private_highlightedIndex_decorators, { kind: "accessor", name: "#highlightedIndex", static: false, private: true, access: { has: obj => #highlightedIndex in obj, get: obj => obj.#highlightedIndex, set: (obj, value) => { obj.#highlightedIndex = value; } }, metadata: _metadata }, _private_highlightedIndex_initializers, _private_highlightedIndex_extraInitializers);
|
|
170
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
171
|
+
}
|
|
172
|
+
static tagName = "dui-select";
|
|
173
|
+
static styles = [base, hostStyles, componentStyles];
|
|
174
|
+
#options_accessor_storage = __runInitializers(this, _options_initializers, []);
|
|
175
|
+
/** The available options. */
|
|
176
|
+
get options() { return this.#options_accessor_storage; }
|
|
177
|
+
set options(value) { this.#options_accessor_storage = value; }
|
|
178
|
+
#value_accessor_storage = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _value_initializers, ""));
|
|
179
|
+
/** Currently selected value. */
|
|
180
|
+
get value() { return this.#value_accessor_storage; }
|
|
181
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
182
|
+
#placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, "Select..."));
|
|
183
|
+
/** Placeholder text shown when no value is selected. */
|
|
184
|
+
get placeholder() { return this.#placeholder_accessor_storage; }
|
|
185
|
+
set placeholder(value) { this.#placeholder_accessor_storage = value; }
|
|
186
|
+
#disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
187
|
+
/** Whether the select is disabled. */
|
|
188
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
189
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
190
|
+
#name_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
191
|
+
/** Name for form submission. */
|
|
192
|
+
get name() { return this.#name_accessor_storage; }
|
|
193
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
194
|
+
#_fieldCtx_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
|
|
195
|
+
get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
|
|
196
|
+
set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
|
|
197
|
+
#highlightedIndex_accessor_storage = (__runInitializers(this, __fieldCtx_extraInitializers), __runInitializers(this, _private_highlightedIndex_initializers, -1));
|
|
198
|
+
get #highlightedIndex() { return _private_highlightedIndex_descriptor.get.call(this); }
|
|
199
|
+
set #highlightedIndex(value) { return _private_highlightedIndex_descriptor.set.call(this, value); }
|
|
200
|
+
#triggerId = (__runInitializers(this, _private_highlightedIndex_extraInitializers), `select-trigger-${crypto.randomUUID().slice(0, 8)}`);
|
|
201
|
+
#listboxId = `select-listbox-${crypto.randomUUID().slice(0, 8)}`;
|
|
202
|
+
#popup = new FloatingPortalController(this, {
|
|
203
|
+
getAnchor: () => this.shadowRoot?.querySelector(".Trigger"),
|
|
204
|
+
styles: portalPopupStyles,
|
|
205
|
+
onOpen: () => {
|
|
206
|
+
this.#highlightedIndex = this.#selectedIndex;
|
|
207
|
+
},
|
|
208
|
+
onClose: () => {
|
|
209
|
+
this.#highlightedIndex = -1;
|
|
210
|
+
this._fieldCtx?.markTouched();
|
|
211
|
+
},
|
|
212
|
+
renderPopup: (portal) => {
|
|
213
|
+
return html `
|
|
140
214
|
<div
|
|
141
215
|
class="Popup"
|
|
142
216
|
?data-starting-style="${portal.isStarting}"
|
|
@@ -153,145 +227,145 @@ export class DuiSelect extends LitElement {
|
|
|
153
227
|
</div>
|
|
154
228
|
</div>
|
|
155
229
|
`;
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
get #isInvalid() {
|
|
163
|
-
return this._fieldCtx?.invalid ?? false;
|
|
164
|
-
}
|
|
165
|
-
get #selectedOption() {
|
|
166
|
-
return this.options.find((o) => o.value === this.value);
|
|
167
|
-
}
|
|
168
|
-
get #selectedIndex() {
|
|
169
|
-
return this.options.findIndex((o) => o.value === this.value);
|
|
170
|
-
}
|
|
171
|
-
get #displayValue() {
|
|
172
|
-
return this.#selectedOption?.label ?? "";
|
|
173
|
-
}
|
|
174
|
-
// ---- Event handlers ----
|
|
175
|
-
#onTriggerClick = (event) => {
|
|
176
|
-
event.stopPropagation();
|
|
177
|
-
if (this.#isDisabled)
|
|
178
|
-
return;
|
|
179
|
-
if (this.#popup.isOpen) {
|
|
180
|
-
this.#popup.close();
|
|
230
|
+
},
|
|
231
|
+
});
|
|
232
|
+
// ---- Computed ----
|
|
233
|
+
get #isDisabled() {
|
|
234
|
+
return this.disabled || (this._fieldCtx?.disabled ?? false);
|
|
181
235
|
}
|
|
182
|
-
|
|
183
|
-
this
|
|
236
|
+
get #isInvalid() {
|
|
237
|
+
return this._fieldCtx?.invalid ?? false;
|
|
184
238
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
break;
|
|
203
|
-
}
|
|
204
|
-
case "ArrowDown": {
|
|
205
|
-
event.preventDefault();
|
|
206
|
-
if (!this.#popup.isOpen) {
|
|
207
|
-
this.#popup.open();
|
|
208
|
-
}
|
|
209
|
-
else {
|
|
210
|
-
this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, 1);
|
|
211
|
-
}
|
|
212
|
-
break;
|
|
239
|
+
get #selectedOption() {
|
|
240
|
+
return this.options.find((o) => o.value === this.value);
|
|
241
|
+
}
|
|
242
|
+
get #selectedIndex() {
|
|
243
|
+
return this.options.findIndex((o) => o.value === this.value);
|
|
244
|
+
}
|
|
245
|
+
get #displayValue() {
|
|
246
|
+
return this.#selectedOption?.label ?? "";
|
|
247
|
+
}
|
|
248
|
+
// ---- Event handlers ----
|
|
249
|
+
#onTriggerClick = (event) => {
|
|
250
|
+
event.stopPropagation();
|
|
251
|
+
if (this.#isDisabled)
|
|
252
|
+
return;
|
|
253
|
+
if (this.#popup.isOpen) {
|
|
254
|
+
this.#popup.close();
|
|
213
255
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
if (!this.#popup.isOpen) {
|
|
217
|
-
this.#popup.open();
|
|
218
|
-
}
|
|
219
|
-
else {
|
|
220
|
-
this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, -1);
|
|
221
|
-
}
|
|
222
|
-
break;
|
|
256
|
+
else {
|
|
257
|
+
this.#popup.open();
|
|
223
258
|
}
|
|
224
|
-
|
|
225
|
-
|
|
259
|
+
};
|
|
260
|
+
#onTriggerKeyDown = (event) => {
|
|
261
|
+
if (this.#isDisabled)
|
|
262
|
+
return;
|
|
263
|
+
switch (event.key) {
|
|
264
|
+
case "Enter":
|
|
265
|
+
case " ": {
|
|
226
266
|
event.preventDefault();
|
|
227
|
-
|
|
267
|
+
if (this.#popup.isOpen) {
|
|
268
|
+
const option = this.options[this.#highlightedIndex];
|
|
269
|
+
if (option && !option.disabled) {
|
|
270
|
+
this.#selectOption(option);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
else {
|
|
274
|
+
this.#popup.open();
|
|
275
|
+
}
|
|
276
|
+
break;
|
|
228
277
|
}
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
case "End": {
|
|
232
|
-
if (this.#popup.isOpen) {
|
|
278
|
+
case "ArrowDown": {
|
|
233
279
|
event.preventDefault();
|
|
234
|
-
|
|
280
|
+
if (!this.#popup.isOpen) {
|
|
281
|
+
this.#popup.open();
|
|
282
|
+
}
|
|
283
|
+
else {
|
|
284
|
+
this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, 1);
|
|
285
|
+
}
|
|
286
|
+
break;
|
|
235
287
|
}
|
|
236
|
-
|
|
237
|
-
}
|
|
238
|
-
case "Escape": {
|
|
239
|
-
if (this.#popup.isOpen) {
|
|
288
|
+
case "ArrowUp": {
|
|
240
289
|
event.preventDefault();
|
|
241
|
-
this.#popup.
|
|
242
|
-
|
|
290
|
+
if (!this.#popup.isOpen) {
|
|
291
|
+
this.#popup.open();
|
|
292
|
+
}
|
|
293
|
+
else {
|
|
294
|
+
this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, -1);
|
|
295
|
+
}
|
|
296
|
+
break;
|
|
243
297
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
298
|
+
case "Home": {
|
|
299
|
+
if (this.#popup.isOpen) {
|
|
300
|
+
event.preventDefault();
|
|
301
|
+
this.#highlightedIndex = this.#nextEnabledIndex(-1, 1);
|
|
302
|
+
}
|
|
303
|
+
break;
|
|
249
304
|
}
|
|
250
|
-
|
|
305
|
+
case "End": {
|
|
306
|
+
if (this.#popup.isOpen) {
|
|
307
|
+
event.preventDefault();
|
|
308
|
+
this.#highlightedIndex = this.#nextEnabledIndex(this.options.length, -1);
|
|
309
|
+
}
|
|
310
|
+
break;
|
|
311
|
+
}
|
|
312
|
+
case "Escape": {
|
|
313
|
+
if (this.#popup.isOpen) {
|
|
314
|
+
event.preventDefault();
|
|
315
|
+
this.#popup.close();
|
|
316
|
+
this.#focusTrigger();
|
|
317
|
+
}
|
|
318
|
+
break;
|
|
319
|
+
}
|
|
320
|
+
case "Tab": {
|
|
321
|
+
if (this.#popup.isOpen) {
|
|
322
|
+
this.#popup.close();
|
|
323
|
+
}
|
|
324
|
+
break;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
#onListMouseDown = (event) => {
|
|
329
|
+
event.preventDefault();
|
|
330
|
+
};
|
|
331
|
+
#onItemClick = (option) => {
|
|
332
|
+
if (option.disabled)
|
|
333
|
+
return;
|
|
334
|
+
this.#selectOption(option);
|
|
335
|
+
};
|
|
336
|
+
#onItemMouseEnter = (index) => {
|
|
337
|
+
if (!this.options[index]?.disabled) {
|
|
338
|
+
this.#highlightedIndex = index;
|
|
251
339
|
}
|
|
340
|
+
};
|
|
341
|
+
// ---- Selection ----
|
|
342
|
+
#selectOption(option) {
|
|
343
|
+
this.value = option.value;
|
|
344
|
+
this._fieldCtx?.markDirty();
|
|
345
|
+
this._fieldCtx?.setFilled(this.value.length > 0);
|
|
346
|
+
this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
|
|
347
|
+
this.#popup.close();
|
|
348
|
+
this.#focusTrigger();
|
|
252
349
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
#onItemMouseEnter = (index) => {
|
|
263
|
-
if (!this.options[index]?.disabled) {
|
|
264
|
-
this.#highlightedIndex = index;
|
|
350
|
+
#nextEnabledIndex(current, direction) {
|
|
351
|
+
const len = this.options.length;
|
|
352
|
+
let next = current + direction;
|
|
353
|
+
while (next >= 0 && next < len) {
|
|
354
|
+
if (!this.options[next].disabled)
|
|
355
|
+
return next;
|
|
356
|
+
next += direction;
|
|
357
|
+
}
|
|
358
|
+
return current;
|
|
265
359
|
}
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
this.value = option.value;
|
|
270
|
-
this._fieldCtx?.markDirty();
|
|
271
|
-
this._fieldCtx?.setFilled(this.value.length > 0);
|
|
272
|
-
this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
|
|
273
|
-
this.#popup.close();
|
|
274
|
-
this.#focusTrigger();
|
|
275
|
-
}
|
|
276
|
-
#nextEnabledIndex(current, direction) {
|
|
277
|
-
const len = this.options.length;
|
|
278
|
-
let next = current + direction;
|
|
279
|
-
while (next >= 0 && next < len) {
|
|
280
|
-
if (!this.options[next].disabled)
|
|
281
|
-
return next;
|
|
282
|
-
next += direction;
|
|
360
|
+
#focusTrigger() {
|
|
361
|
+
const trigger = this.shadowRoot?.querySelector(".Trigger");
|
|
362
|
+
trigger?.focus();
|
|
283
363
|
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
}
|
|
290
|
-
// ---- Render ----
|
|
291
|
-
#renderItem = (option, index) => {
|
|
292
|
-
const isSelected = option.value === this.value;
|
|
293
|
-
const isHighlighted = index === this.#highlightedIndex;
|
|
294
|
-
return html `
|
|
364
|
+
// ---- Render ----
|
|
365
|
+
#renderItem = (option, index) => {
|
|
366
|
+
const isSelected = option.value === this.value;
|
|
367
|
+
const isHighlighted = index === this.#highlightedIndex;
|
|
368
|
+
return html `
|
|
295
369
|
<div
|
|
296
370
|
class="Item"
|
|
297
371
|
role="option"
|
|
@@ -305,16 +379,16 @@ export class DuiSelect extends LitElement {
|
|
|
305
379
|
>
|
|
306
380
|
<span class="ItemIndicator">
|
|
307
381
|
${isSelected
|
|
308
|
-
|
|
309
|
-
|
|
382
|
+
? html `<dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></dui-icon>`
|
|
383
|
+
: nothing}
|
|
310
384
|
</span>
|
|
311
385
|
<span class="ItemText">${option.label}</span>
|
|
312
386
|
</div>
|
|
313
387
|
`;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
388
|
+
};
|
|
389
|
+
render() {
|
|
390
|
+
const hasValue = this.value !== "" && this.#selectedOption != null;
|
|
391
|
+
return html `
|
|
318
392
|
<div
|
|
319
393
|
class="Trigger"
|
|
320
394
|
part="trigger"
|
|
@@ -325,8 +399,8 @@ export class DuiSelect extends LitElement {
|
|
|
325
399
|
aria-expanded="${this.#popup.isOpen}"
|
|
326
400
|
aria-controls="${this.#listboxId}"
|
|
327
401
|
aria-activedescendant="${this.#highlightedIndex >= 0
|
|
328
|
-
|
|
329
|
-
|
|
402
|
+
? `${this.#listboxId}-option-${this.#highlightedIndex}`
|
|
403
|
+
: nothing}"
|
|
330
404
|
aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
|
|
331
405
|
aria-invalid="${this.#isInvalid}"
|
|
332
406
|
?data-disabled="${this.#isDisabled}"
|
|
@@ -350,27 +424,10 @@ export class DuiSelect extends LitElement {
|
|
|
350
424
|
</div>
|
|
351
425
|
|
|
352
426
|
${this.name
|
|
353
|
-
|
|
354
|
-
|
|
427
|
+
? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
|
|
428
|
+
: nothing}
|
|
355
429
|
`;
|
|
356
|
-
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
], DuiSelect.prototype, "options", null);
|
|
361
|
-
__decorate([
|
|
362
|
-
property({ type: String })
|
|
363
|
-
], DuiSelect.prototype, "value", null);
|
|
364
|
-
__decorate([
|
|
365
|
-
property({ type: String })
|
|
366
|
-
], DuiSelect.prototype, "placeholder", null);
|
|
367
|
-
__decorate([
|
|
368
|
-
property({ type: Boolean, reflect: true })
|
|
369
|
-
], DuiSelect.prototype, "disabled", null);
|
|
370
|
-
__decorate([
|
|
371
|
-
property({ type: String })
|
|
372
|
-
], DuiSelect.prototype, "name", null);
|
|
373
|
-
__decorate([
|
|
374
|
-
consume({ context: fieldContext, subscribe: true }),
|
|
375
|
-
state()
|
|
376
|
-
], DuiSelect.prototype, "_fieldCtx", null);
|
|
430
|
+
}
|
|
431
|
+
};
|
|
432
|
+
})();
|
|
433
|
+
export { DuiSelect };
|
package/separator/separator.js
CHANGED
|
@@ -1,8 +1,36 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
2
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
3
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
4
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
5
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
6
|
+
var _, done = false;
|
|
7
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
8
|
+
var context = {};
|
|
9
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
10
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
11
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
12
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
13
|
+
if (kind === "accessor") {
|
|
14
|
+
if (result === void 0) continue;
|
|
15
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
16
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
17
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
18
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
19
|
+
}
|
|
20
|
+
else if (_ = accept(result)) {
|
|
21
|
+
if (kind === "field") initializers.unshift(_);
|
|
22
|
+
else descriptor[key] = _;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
26
|
+
done = true;
|
|
27
|
+
};
|
|
28
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
29
|
+
var useValue = arguments.length > 2;
|
|
30
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
31
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
32
|
+
}
|
|
33
|
+
return useValue ? value : void 0;
|
|
6
34
|
};
|
|
7
35
|
import { css, html, LitElement } from "lit";
|
|
8
36
|
import { property } from "lit/decorators.js";
|
|
@@ -29,22 +57,36 @@ const styles = css `
|
|
|
29
57
|
*
|
|
30
58
|
* @csspart root - The separator element.
|
|
31
59
|
*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
60
|
+
let DuiSeparator = (() => {
|
|
61
|
+
let _classSuper = LitElement;
|
|
62
|
+
let _orientation_decorators;
|
|
63
|
+
let _orientation_initializers = [];
|
|
64
|
+
let _orientation_extraInitializers = [];
|
|
65
|
+
return class DuiSeparator extends _classSuper {
|
|
66
|
+
static {
|
|
67
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
68
|
+
_orientation_decorators = [property({ reflect: true })];
|
|
69
|
+
__esDecorate(this, null, _orientation_decorators, { kind: "accessor", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
|
|
70
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
71
|
+
}
|
|
72
|
+
static tagName = "dui-separator";
|
|
73
|
+
static styles = [base, styles];
|
|
74
|
+
#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
|
|
75
|
+
get orientation() { return this.#orientation_accessor_storage; }
|
|
76
|
+
set orientation(value) { this.#orientation_accessor_storage = value; }
|
|
77
|
+
render() {
|
|
78
|
+
return html `
|
|
40
79
|
<div
|
|
41
80
|
part="root"
|
|
42
81
|
role="separator"
|
|
43
82
|
aria-orientation="${this.orientation}"
|
|
44
83
|
></div>
|
|
45
84
|
`;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
85
|
+
}
|
|
86
|
+
constructor() {
|
|
87
|
+
super(...arguments);
|
|
88
|
+
__runInitializers(this, _orientation_extraInitializers);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
})();
|
|
92
|
+
export { DuiSeparator };
|
|
@@ -18,8 +18,8 @@ const styles = css `
|
|
|
18
18
|
* @slot - Default slot for sidebar groups, menus, etc.
|
|
19
19
|
*/
|
|
20
20
|
export class DuiSidebarContent extends LitElement {
|
|
21
|
-
static
|
|
22
|
-
static
|
|
21
|
+
static tagName = "dui-sidebar-content";
|
|
22
|
+
static styles = [base, styles];
|
|
23
23
|
render() {
|
|
24
24
|
return html `
|
|
25
25
|
<dui-scroll-area>
|
|
@@ -13,8 +13,8 @@ const styles = css `
|
|
|
13
13
|
* @slot - Default slot for footer content (user info, settings, etc.).
|
|
14
14
|
*/
|
|
15
15
|
export class DuiSidebarFooter extends LitElement {
|
|
16
|
-
static
|
|
17
|
-
static
|
|
16
|
+
static tagName = "dui-sidebar-footer";
|
|
17
|
+
static styles = [base, styles];
|
|
18
18
|
render() {
|
|
19
19
|
return html `<slot></slot>`;
|
|
20
20
|
}
|