@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/switch/switch.js
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
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;
|
|
34
|
+
};
|
|
35
|
+
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
|
|
36
|
+
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
|
|
37
|
+
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
|
|
6
38
|
};
|
|
7
39
|
import { css, html, LitElement, nothing } from "lit";
|
|
8
40
|
import { property, state } from "lit/decorators.js";
|
|
@@ -61,85 +93,142 @@ const styles = css `
|
|
|
61
93
|
* @csspart thumb - The movable thumb indicator.
|
|
62
94
|
* @fires checked-change - Fired when toggled. Detail: { checked: boolean }
|
|
63
95
|
*/
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
96
|
+
let DuiSwitch = (() => {
|
|
97
|
+
let _classSuper = LitElement;
|
|
98
|
+
let _checked_decorators;
|
|
99
|
+
let _checked_initializers = [];
|
|
100
|
+
let _checked_extraInitializers = [];
|
|
101
|
+
let _defaultChecked_decorators;
|
|
102
|
+
let _defaultChecked_initializers = [];
|
|
103
|
+
let _defaultChecked_extraInitializers = [];
|
|
104
|
+
let _disabled_decorators;
|
|
105
|
+
let _disabled_initializers = [];
|
|
106
|
+
let _disabled_extraInitializers = [];
|
|
107
|
+
let _readOnly_decorators;
|
|
108
|
+
let _readOnly_initializers = [];
|
|
109
|
+
let _readOnly_extraInitializers = [];
|
|
110
|
+
let _required_decorators;
|
|
111
|
+
let _required_initializers = [];
|
|
112
|
+
let _required_extraInitializers = [];
|
|
113
|
+
let _name_decorators;
|
|
114
|
+
let _name_initializers = [];
|
|
115
|
+
let _name_extraInitializers = [];
|
|
116
|
+
let _value_decorators;
|
|
117
|
+
let _value_initializers = [];
|
|
118
|
+
let _value_extraInitializers = [];
|
|
119
|
+
let _uncheckedValue_decorators;
|
|
120
|
+
let _uncheckedValue_initializers = [];
|
|
121
|
+
let _uncheckedValue_extraInitializers = [];
|
|
122
|
+
let _private_internalChecked_decorators;
|
|
123
|
+
let _private_internalChecked_initializers = [];
|
|
124
|
+
let _private_internalChecked_extraInitializers = [];
|
|
125
|
+
let _private_internalChecked_descriptor;
|
|
126
|
+
let __fieldCtx_decorators;
|
|
127
|
+
let __fieldCtx_initializers = [];
|
|
128
|
+
let __fieldCtx_extraInitializers = [];
|
|
129
|
+
return class DuiSwitch extends _classSuper {
|
|
130
|
+
static {
|
|
131
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
132
|
+
_checked_decorators = [property({ type: Boolean, reflect: true })];
|
|
133
|
+
_defaultChecked_decorators = [property({ type: Boolean, attribute: "default-checked" })];
|
|
134
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
135
|
+
_readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
|
|
136
|
+
_required_decorators = [property({ type: Boolean, reflect: true })];
|
|
137
|
+
_name_decorators = [property()];
|
|
138
|
+
_value_decorators = [property()];
|
|
139
|
+
_uncheckedValue_decorators = [property({ attribute: "unchecked-value" })];
|
|
140
|
+
_private_internalChecked_decorators = [state()];
|
|
141
|
+
__fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
|
|
142
|
+
__esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
|
|
143
|
+
__esDecorate(this, null, _defaultChecked_decorators, { kind: "accessor", name: "defaultChecked", static: false, private: false, access: { has: obj => "defaultChecked" in obj, get: obj => obj.defaultChecked, set: (obj, value) => { obj.defaultChecked = value; } }, metadata: _metadata }, _defaultChecked_initializers, _defaultChecked_extraInitializers);
|
|
144
|
+
__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);
|
|
145
|
+
__esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
|
|
146
|
+
__esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
|
|
147
|
+
__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);
|
|
148
|
+
__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);
|
|
149
|
+
__esDecorate(this, null, _uncheckedValue_decorators, { kind: "accessor", name: "uncheckedValue", static: false, private: false, access: { has: obj => "uncheckedValue" in obj, get: obj => obj.uncheckedValue, set: (obj, value) => { obj.uncheckedValue = value; } }, metadata: _metadata }, _uncheckedValue_initializers, _uncheckedValue_extraInitializers);
|
|
150
|
+
__esDecorate(this, _private_internalChecked_descriptor = { get: __setFunctionName(function () { return this.#internalChecked_accessor_storage; }, "#internalChecked", "get"), set: __setFunctionName(function (value) { this.#internalChecked_accessor_storage = value; }, "#internalChecked", "set") }, _private_internalChecked_decorators, { kind: "accessor", name: "#internalChecked", static: false, private: true, access: { has: obj => #internalChecked in obj, get: obj => obj.#internalChecked, set: (obj, value) => { obj.#internalChecked = value; } }, metadata: _metadata }, _private_internalChecked_initializers, _private_internalChecked_extraInitializers);
|
|
151
|
+
__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);
|
|
152
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
110
153
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
this.#
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
154
|
+
static tagName = "dui-switch";
|
|
155
|
+
static styles = [base, styles];
|
|
156
|
+
#checked_accessor_storage = __runInitializers(this, _checked_initializers, undefined);
|
|
157
|
+
get checked() { return this.#checked_accessor_storage; }
|
|
158
|
+
set checked(value) { this.#checked_accessor_storage = value; }
|
|
159
|
+
#defaultChecked_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _defaultChecked_initializers, false));
|
|
160
|
+
get defaultChecked() { return this.#defaultChecked_accessor_storage; }
|
|
161
|
+
set defaultChecked(value) { this.#defaultChecked_accessor_storage = value; }
|
|
162
|
+
#disabled_accessor_storage = (__runInitializers(this, _defaultChecked_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
163
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
164
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
165
|
+
#readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false));
|
|
166
|
+
get readOnly() { return this.#readOnly_accessor_storage; }
|
|
167
|
+
set readOnly(value) { this.#readOnly_accessor_storage = value; }
|
|
168
|
+
#required_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
169
|
+
get required() { return this.#required_accessor_storage; }
|
|
170
|
+
set required(value) { this.#required_accessor_storage = value; }
|
|
171
|
+
#name_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _name_initializers, undefined));
|
|
172
|
+
get name() { return this.#name_accessor_storage; }
|
|
173
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
174
|
+
#value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, "on"));
|
|
175
|
+
get value() { return this.#value_accessor_storage; }
|
|
176
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
177
|
+
#uncheckedValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _uncheckedValue_initializers, ""));
|
|
178
|
+
get uncheckedValue() { return this.#uncheckedValue_accessor_storage; }
|
|
179
|
+
set uncheckedValue(value) { this.#uncheckedValue_accessor_storage = value; }
|
|
180
|
+
#internalChecked_accessor_storage = (__runInitializers(this, _uncheckedValue_extraInitializers), __runInitializers(this, _private_internalChecked_initializers, false));
|
|
181
|
+
get #internalChecked() { return _private_internalChecked_descriptor.get.call(this); }
|
|
182
|
+
set #internalChecked(value) { return _private_internalChecked_descriptor.set.call(this, value); }
|
|
183
|
+
#_fieldCtx_accessor_storage = (__runInitializers(this, _private_internalChecked_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
|
|
184
|
+
get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
|
|
185
|
+
set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
|
|
186
|
+
get #isChecked() {
|
|
187
|
+
return this.checked ?? this.#internalChecked;
|
|
126
188
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
this.dispatchEvent(checkedChangeEvent({ checked: newChecked }));
|
|
130
|
-
};
|
|
131
|
-
#handleKeyDown = (e) => {
|
|
132
|
-
if (e.key === " " || e.key === "Enter") {
|
|
133
|
-
e.preventDefault();
|
|
134
|
-
this.#handleClick();
|
|
189
|
+
get #isDisabled() {
|
|
190
|
+
return this.disabled || (this._fieldCtx?.disabled ?? false);
|
|
135
191
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
192
|
+
get #isInvalid() {
|
|
193
|
+
return this._fieldCtx?.invalid ?? false;
|
|
194
|
+
}
|
|
195
|
+
connectedCallback() {
|
|
196
|
+
super.connectedCallback();
|
|
197
|
+
if (this.checked === undefined && this.defaultChecked) {
|
|
198
|
+
this.#internalChecked = true;
|
|
199
|
+
}
|
|
200
|
+
this.addEventListener("click", this.#handleHostClick);
|
|
201
|
+
}
|
|
202
|
+
disconnectedCallback() {
|
|
203
|
+
super.disconnectedCallback();
|
|
204
|
+
this.removeEventListener("click", this.#handleHostClick);
|
|
205
|
+
}
|
|
206
|
+
#handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (_e) => {
|
|
207
|
+
this.#handleClick();
|
|
208
|
+
});
|
|
209
|
+
#handleClick = () => {
|
|
210
|
+
if (this.#isDisabled || this.readOnly)
|
|
211
|
+
return;
|
|
212
|
+
const newChecked = !this.#isChecked;
|
|
213
|
+
if (this.checked === undefined) {
|
|
214
|
+
this.#internalChecked = newChecked;
|
|
215
|
+
}
|
|
216
|
+
this._fieldCtx?.markDirty();
|
|
217
|
+
this._fieldCtx?.markTouched();
|
|
218
|
+
this.dispatchEvent(checkedChangeEvent({ checked: newChecked }));
|
|
219
|
+
};
|
|
220
|
+
#handleKeyDown = (e) => {
|
|
221
|
+
if (e.key === " " || e.key === "Enter") {
|
|
222
|
+
e.preventDefault();
|
|
223
|
+
this.#handleClick();
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
render() {
|
|
227
|
+
const isChecked = this.#isChecked;
|
|
228
|
+
const isDisabled = this.#isDisabled;
|
|
229
|
+
const isInvalid = this.#isInvalid;
|
|
230
|
+
const controlId = this._fieldCtx?.controlId ?? "";
|
|
231
|
+
return html `
|
|
143
232
|
<span
|
|
144
233
|
part="root"
|
|
145
234
|
role="switch"
|
|
@@ -173,33 +262,7 @@ export class DuiSwitch extends LitElement {
|
|
|
173
262
|
</span>
|
|
174
263
|
<slot></slot>
|
|
175
264
|
`;
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
], DuiSwitch.prototype, "checked", null);
|
|
181
|
-
__decorate([
|
|
182
|
-
property({ type: Boolean, attribute: "default-checked" })
|
|
183
|
-
], DuiSwitch.prototype, "defaultChecked", null);
|
|
184
|
-
__decorate([
|
|
185
|
-
property({ type: Boolean, reflect: true })
|
|
186
|
-
], DuiSwitch.prototype, "disabled", null);
|
|
187
|
-
__decorate([
|
|
188
|
-
property({ type: Boolean, reflect: true, attribute: "read-only" })
|
|
189
|
-
], DuiSwitch.prototype, "readOnly", null);
|
|
190
|
-
__decorate([
|
|
191
|
-
property({ type: Boolean, reflect: true })
|
|
192
|
-
], DuiSwitch.prototype, "required", null);
|
|
193
|
-
__decorate([
|
|
194
|
-
property()
|
|
195
|
-
], DuiSwitch.prototype, "name", null);
|
|
196
|
-
__decorate([
|
|
197
|
-
property()
|
|
198
|
-
], DuiSwitch.prototype, "value", null);
|
|
199
|
-
__decorate([
|
|
200
|
-
property({ attribute: "unchecked-value" })
|
|
201
|
-
], DuiSwitch.prototype, "uncheckedValue", null);
|
|
202
|
-
__decorate([
|
|
203
|
-
consume({ context: fieldContext, subscribe: true }),
|
|
204
|
-
state()
|
|
205
|
-
], DuiSwitch.prototype, "_fieldCtx", null);
|
|
265
|
+
}
|
|
266
|
+
};
|
|
267
|
+
})();
|
|
268
|
+
export { DuiSwitch };
|
package/tabs/tab.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
|
|
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;
|
|
7
35
|
};
|
|
8
36
|
import { css, html, LitElement } from "lit";
|
|
9
37
|
import { property } from "lit/decorators.js";
|
|
@@ -38,38 +66,59 @@ const styles = css `
|
|
|
38
66
|
/**
|
|
39
67
|
* Individual tab trigger button.
|
|
40
68
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
#handleKeyDown = (event) => {
|
|
63
|
-
if (this.disabled)
|
|
64
|
-
return;
|
|
65
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
66
|
-
event.preventDefault();
|
|
67
|
-
this._ctx?.select(this.value);
|
|
69
|
+
let DuiTab = (() => {
|
|
70
|
+
let _classSuper = LitElement;
|
|
71
|
+
let _value_decorators;
|
|
72
|
+
let _value_initializers = [];
|
|
73
|
+
let _value_extraInitializers = [];
|
|
74
|
+
let _disabled_decorators;
|
|
75
|
+
let _disabled_initializers = [];
|
|
76
|
+
let _disabled_extraInitializers = [];
|
|
77
|
+
let __ctx_decorators;
|
|
78
|
+
let __ctx_initializers = [];
|
|
79
|
+
let __ctx_extraInitializers = [];
|
|
80
|
+
return class DuiTab extends _classSuper {
|
|
81
|
+
static {
|
|
82
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
83
|
+
_value_decorators = [property()];
|
|
84
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
85
|
+
__ctx_decorators = [consume({ context: tabsContext, subscribe: true })];
|
|
86
|
+
__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);
|
|
87
|
+
__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);
|
|
88
|
+
__esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
|
|
89
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
68
90
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
91
|
+
static tagName = "dui-tab";
|
|
92
|
+
static styles = [base, styles];
|
|
93
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
94
|
+
/** Tab value used to match with the corresponding panel. */
|
|
95
|
+
get value() { return this.#value_accessor_storage; }
|
|
96
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
97
|
+
#disabled_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
98
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
99
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
100
|
+
#_ctx_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, __ctx_initializers, void 0));
|
|
101
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
102
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
103
|
+
get #isActive() {
|
|
104
|
+
return this._ctx?.value === this.value;
|
|
105
|
+
}
|
|
106
|
+
#handleClick = (__runInitializers(this, __ctx_extraInitializers), () => {
|
|
107
|
+
if (this.disabled)
|
|
108
|
+
return;
|
|
109
|
+
this._ctx?.select(this.value);
|
|
110
|
+
});
|
|
111
|
+
#handleKeyDown = (event) => {
|
|
112
|
+
if (this.disabled)
|
|
113
|
+
return;
|
|
114
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
115
|
+
event.preventDefault();
|
|
116
|
+
this._ctx?.select(this.value);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
render() {
|
|
120
|
+
const isActive = this.#isActive;
|
|
121
|
+
return html `
|
|
73
122
|
<button
|
|
74
123
|
part="tab"
|
|
75
124
|
role="tab"
|
|
@@ -84,14 +133,7 @@ export class DuiTab extends LitElement {
|
|
|
84
133
|
<slot></slot>
|
|
85
134
|
</button>
|
|
86
135
|
`;
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
], DuiTab.prototype, "value", null);
|
|
92
|
-
__decorate([
|
|
93
|
-
property({ type: Boolean, reflect: true })
|
|
94
|
-
], DuiTab.prototype, "disabled", null);
|
|
95
|
-
__decorate([
|
|
96
|
-
consume({ context: tabsContext, subscribe: true })
|
|
97
|
-
], DuiTab.prototype, "_ctx", null);
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
})();
|
|
139
|
+
export { DuiTab };
|
package/tabs/tabs-indicator.js
CHANGED
|
@@ -19,8 +19,8 @@ const styles = css `
|
|
|
19
19
|
* Place inside dui-tabs-list.
|
|
20
20
|
*/
|
|
21
21
|
export class DuiTabsIndicator extends LitElement {
|
|
22
|
-
static
|
|
23
|
-
static
|
|
22
|
+
static tagName = "dui-tabs-indicator";
|
|
23
|
+
static styles = [base, styles];
|
|
24
24
|
render() {
|
|
25
25
|
return html `<span part="indicator"></span>`;
|
|
26
26
|
}
|