@deepfuture/dui-components 0.0.11 → 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/README.md +191 -0
- package/_deprecated/center/center.js +2 -2
- package/_deprecated/center/index.d.ts +3 -1
- package/_deprecated/center/index.js +3 -1
- package/_deprecated/hstack/hstack.js +79 -33
- package/_deprecated/hstack/index.d.ts +3 -1
- package/_deprecated/hstack/index.js +3 -1
- package/_deprecated/page-inset/index.d.ts +3 -1
- package/_deprecated/page-inset/index.js +3 -1
- package/_deprecated/page-inset/page-inset.js +104 -56
- package/_deprecated/vstack/index.d.ts +3 -1
- package/_deprecated/vstack/index.js +3 -1
- package/_deprecated/vstack/vstack.js +61 -19
- package/accordion/accordion-item.js +217 -147
- package/accordion/accordion.js +214 -149
- package/accordion/index.d.ts +5 -2
- package/accordion/index.js +5 -2
- 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/alert-dialog/index.d.ts +9 -4
- package/alert-dialog/index.js +9 -4
- package/avatar/avatar.js +175 -115
- package/avatar/index.d.ts +3 -1
- package/avatar/index.js +3 -1
- package/badge/badge.js +2 -2
- package/badge/index.d.ts +3 -1
- package/badge/index.js +3 -1
- 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/breadcrumb/index.d.ts +13 -6
- package/breadcrumb/index.js +13 -6
- package/button/button.js +109 -65
- package/button/index.d.ts +3 -1
- package/button/index.js +3 -1
- package/calendar/calendar.js +368 -290
- package/calendar/index.d.ts +3 -1
- package/calendar/index.js +3 -1
- package/checkbox/checkbox-group.js +146 -87
- package/checkbox/checkbox.js +232 -167
- package/checkbox/index.d.ts +5 -2
- package/checkbox/index.js +5 -2
- package/collapsible/collapsible.js +210 -132
- package/collapsible/index.d.ts +3 -1
- package/collapsible/index.js +3 -1
- package/combobox/combobox.js +318 -252
- package/combobox/index.d.ts +3 -1
- package/combobox/index.js +3 -1
- 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/command/index.d.ts +17 -8
- package/command/index.js +17 -8
- package/data-table/data-table.js +225 -153
- package/data-table/index.d.ts +3 -1
- package/data-table/index.js +3 -1
- 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/dialog/index.d.ts +9 -4
- package/dialog/index.js +9 -4
- package/dropzone/dropzone.js +310 -249
- package/dropzone/index.d.ts +3 -1
- package/dropzone/index.js +3 -1
- package/icon/icon.js +2 -2
- package/icon/index.d.ts +3 -1
- package/icon/index.js +3 -1
- package/input/index.d.ts +3 -1
- package/input/index.js +3 -1
- package/input/input.js +204 -143
- package/link/index.d.ts +3 -1
- package/link/index.js +3 -1
- package/link/link.js +62 -24
- package/menu/index.d.ts +5 -2
- package/menu/index.js +5 -2
- package/menu/menu-item.js +66 -24
- package/menu/menu.js +189 -136
- package/menubar/index.d.ts +3 -1
- package/menubar/index.js +3 -1
- package/menubar/menubar.js +142 -91
- package/number-field/index.d.ts +3 -1
- package/number-field/index.js +3 -1
- package/number-field/number-field.js +277 -204
- package/package.json +5 -4
- package/popover/index.d.ts +9 -4
- package/popover/index.js +9 -4
- 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/index.d.ts +3 -1
- package/portal/index.js +3 -1
- package/portal/portal.js +128 -86
- package/preview-card/index.d.ts +7 -3
- package/preview-card/index.js +7 -3
- 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/index.d.ts +3 -1
- package/progress/index.js +3 -1
- package/progress/progress.js +91 -45
- package/radio/index.d.ts +5 -2
- package/radio/index.js +5 -2
- package/radio/radio-group.js +153 -90
- package/radio/radio.js +137 -94
- package/scroll-area/index.d.ts +3 -1
- package/scroll-area/index.js +3 -1
- package/scroll-area/scroll-area.js +382 -276
- package/select/index.d.ts +3 -1
- package/select/index.js +3 -1
- package/select/select.js +260 -203
- package/separator/index.d.ts +3 -1
- package/separator/index.js +3 -1
- package/separator/separator.js +60 -18
- package/sidebar/index.d.ts +27 -13
- package/sidebar/index.js +32 -13
- 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/index.d.ts +3 -1
- package/slider/index.js +3 -1
- package/slider/slider.js +217 -159
- package/spinner/index.d.ts +3 -1
- package/spinner/index.js +3 -1
- package/spinner/spinner.js +70 -28
- package/switch/index.d.ts +3 -1
- package/switch/index.js +3 -1
- package/switch/switch.js +174 -111
- package/tabs/index.d.ts +11 -5
- package/tabs/index.js +11 -5
- 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/index.d.ts +3 -1
- package/textarea/index.js +3 -1
- package/textarea/textarea.js +153 -95
- package/toggle/index.d.ts +5 -2
- package/toggle/index.js +5 -2
- package/toggle/toggle-group.js +184 -125
- package/toggle/toggle.js +131 -76
- package/toolbar/index.d.ts +3 -1
- package/toolbar/index.js +3 -1
- package/toolbar/toolbar.js +79 -33
- package/tooltip/index.d.ts +7 -3
- package/tooltip/index.js +7 -3
- package/tooltip/tooltip-popup.js +108 -60
- package/tooltip/tooltip-trigger.js +93 -55
- package/tooltip/tooltip.js +225 -154
- package/trunc/index.d.ts +3 -1
- package/trunc/index.js +3 -1
- package/trunc/trunc.js +78 -34
- package/accordion/register.d.ts +0 -1
- package/accordion/register.js +0 -8
- package/alert-dialog/register.d.ts +0 -1
- package/alert-dialog/register.js +0 -16
- package/avatar/register.d.ts +0 -1
- package/avatar/register.js +0 -4
- package/badge/register.d.ts +0 -1
- package/badge/register.js +0 -4
- package/breadcrumb/register.d.ts +0 -1
- package/breadcrumb/register.js +0 -14
- package/button/register.d.ts +0 -1
- package/button/register.js +0 -4
- package/calendar/register.d.ts +0 -1
- package/calendar/register.js +0 -4
- package/checkbox/register.d.ts +0 -1
- package/checkbox/register.js +0 -8
- package/collapsible/register.d.ts +0 -1
- package/collapsible/register.js +0 -4
- package/combobox/register.d.ts +0 -1
- package/combobox/register.js +0 -4
- package/command/register.d.ts +0 -1
- package/command/register.js +0 -22
- package/data-table/register.d.ts +0 -1
- package/data-table/register.js +0 -4
- package/dialog/register.d.ts +0 -1
- package/dialog/register.js +0 -16
- package/dropzone/register.d.ts +0 -1
- package/dropzone/register.js +0 -4
- package/icon/register.d.ts +0 -1
- package/icon/register.js +0 -4
- package/input/register.d.ts +0 -1
- package/input/register.js +0 -4
- package/link/register.d.ts +0 -1
- package/link/register.js +0 -4
- package/menu/register.d.ts +0 -1
- package/menu/register.js +0 -8
- package/menubar/register.d.ts +0 -1
- package/menubar/register.js +0 -4
- package/number-field/register.d.ts +0 -1
- package/number-field/register.js +0 -4
- package/popover/register.d.ts +0 -1
- package/popover/register.js +0 -16
- package/portal/register.d.ts +0 -1
- package/portal/register.js +0 -4
- package/preview-card/register.d.ts +0 -1
- package/preview-card/register.js +0 -12
- package/progress/register.d.ts +0 -1
- package/progress/register.js +0 -4
- package/radio/register.d.ts +0 -1
- package/radio/register.js +0 -8
- package/scroll-area/register.d.ts +0 -1
- package/scroll-area/register.js +0 -4
- package/select/register.d.ts +0 -1
- package/select/register.js +0 -4
- package/separator/register.d.ts +0 -1
- package/separator/register.js +0 -4
- package/sidebar/register.d.ts +0 -1
- package/sidebar/register.js +0 -52
- package/slider/register.d.ts +0 -1
- package/slider/register.js +0 -4
- package/spinner/register.d.ts +0 -1
- package/spinner/register.js +0 -4
- package/switch/register.d.ts +0 -1
- package/switch/register.js +0 -4
- package/tabs/register.d.ts +0 -1
- package/tabs/register.js +0 -10
- package/textarea/register.d.ts +0 -1
- package/textarea/register.js +0 -4
- package/toggle/register.d.ts +0 -1
- package/toggle/register.js +0 -8
- package/toolbar/register.d.ts +0 -1
- package/toolbar/register.js +0 -4
- package/tooltip/register.d.ts +0 -1
- package/tooltip/register.js +0 -12
- package/trunc/register.d.ts +0 -1
- package/trunc/register.js +0 -4
package/radio/radio-group.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
|
|
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 } from "lit";
|
|
9
41
|
import { property, state } from "lit/decorators.js";
|
|
@@ -41,70 +73,117 @@ const styles = css `
|
|
|
41
73
|
* @csspart root - The group container element.
|
|
42
74
|
* @fires value-change - Fired when the selected value changes. Detail: { value: string }
|
|
43
75
|
*/
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
let DuiRadioGroup = (() => {
|
|
77
|
+
let _classSuper = LitElement;
|
|
78
|
+
let _name_decorators;
|
|
79
|
+
let _name_initializers = [];
|
|
80
|
+
let _name_extraInitializers = [];
|
|
81
|
+
let _value_decorators;
|
|
82
|
+
let _value_initializers = [];
|
|
83
|
+
let _value_extraInitializers = [];
|
|
84
|
+
let _defaultValue_decorators;
|
|
85
|
+
let _defaultValue_initializers = [];
|
|
86
|
+
let _defaultValue_extraInitializers = [];
|
|
87
|
+
let _disabled_decorators;
|
|
88
|
+
let _disabled_initializers = [];
|
|
89
|
+
let _disabled_extraInitializers = [];
|
|
90
|
+
let _readOnly_decorators;
|
|
91
|
+
let _readOnly_initializers = [];
|
|
92
|
+
let _readOnly_extraInitializers = [];
|
|
93
|
+
let _required_decorators;
|
|
94
|
+
let _required_initializers = [];
|
|
95
|
+
let _required_extraInitializers = [];
|
|
96
|
+
let _private_internalValue_decorators;
|
|
97
|
+
let _private_internalValue_initializers = [];
|
|
98
|
+
let _private_internalValue_extraInitializers = [];
|
|
99
|
+
let _private_internalValue_descriptor;
|
|
100
|
+
let __ctx_decorators;
|
|
101
|
+
let __ctx_initializers = [];
|
|
102
|
+
let __ctx_extraInitializers = [];
|
|
103
|
+
return class DuiRadioGroup extends _classSuper {
|
|
104
|
+
static {
|
|
105
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
106
|
+
_name_decorators = [property()];
|
|
107
|
+
_value_decorators = [property()];
|
|
108
|
+
_defaultValue_decorators = [property({ attribute: "default-value" })];
|
|
109
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
110
|
+
_readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
|
|
111
|
+
_required_decorators = [property({ type: Boolean, reflect: true })];
|
|
112
|
+
_private_internalValue_decorators = [state()];
|
|
113
|
+
__ctx_decorators = [provide({ context: radioGroupContext }), state()];
|
|
114
|
+
__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);
|
|
115
|
+
__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);
|
|
116
|
+
__esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
|
|
117
|
+
__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);
|
|
118
|
+
__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);
|
|
119
|
+
__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);
|
|
120
|
+
__esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
|
|
121
|
+
__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);
|
|
122
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
80
123
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
124
|
+
static tagName = "dui-radio-group";
|
|
125
|
+
static styles = [base, styles];
|
|
126
|
+
#name_accessor_storage = __runInitializers(this, _name_initializers, undefined);
|
|
127
|
+
/** The name attribute for form submission. */
|
|
128
|
+
get name() { return this.#name_accessor_storage; }
|
|
129
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
130
|
+
#value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, undefined));
|
|
131
|
+
/** Selected value (controlled). */
|
|
132
|
+
get value() { return this.#value_accessor_storage; }
|
|
133
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
134
|
+
#defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, undefined));
|
|
135
|
+
/** Initial selected value for uncontrolled usage. */
|
|
136
|
+
get defaultValue() { return this.#defaultValue_accessor_storage; }
|
|
137
|
+
set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
|
|
138
|
+
#disabled_accessor_storage = (__runInitializers(this, _defaultValue_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
139
|
+
/** Whether all radios in the group are disabled. */
|
|
140
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
141
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
142
|
+
#readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false));
|
|
143
|
+
/** Whether all radios in the group are read-only. */
|
|
144
|
+
get readOnly() { return this.#readOnly_accessor_storage; }
|
|
145
|
+
set readOnly(value) { this.#readOnly_accessor_storage = value; }
|
|
146
|
+
#required_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
147
|
+
/** Whether a selection is required. */
|
|
148
|
+
get required() { return this.#required_accessor_storage; }
|
|
149
|
+
set required(value) { this.#required_accessor_storage = value; }
|
|
150
|
+
#internalValue_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
|
|
151
|
+
get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
|
|
152
|
+
set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
|
|
153
|
+
#getSelectedValue = (__runInitializers(this, _private_internalValue_extraInitializers), () => this.value ?? this.#internalValue);
|
|
154
|
+
#select = (val) => {
|
|
155
|
+
if (this.disabled || this.readOnly)
|
|
156
|
+
return;
|
|
157
|
+
if (this.value === undefined) {
|
|
158
|
+
this.#internalValue = val;
|
|
159
|
+
}
|
|
160
|
+
this.dispatchEvent(valueChangeEvent({ value: val }));
|
|
94
161
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
162
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, this.#buildContext());
|
|
163
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
164
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
165
|
+
#buildContext() {
|
|
166
|
+
return {
|
|
167
|
+
name: this.name,
|
|
168
|
+
value: this.#getSelectedValue(),
|
|
169
|
+
disabled: this.disabled,
|
|
170
|
+
readOnly: this.readOnly,
|
|
171
|
+
required: this.required,
|
|
172
|
+
select: this.#select,
|
|
173
|
+
};
|
|
100
174
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
175
|
+
connectedCallback() {
|
|
176
|
+
super.connectedCallback();
|
|
177
|
+
if (this.value === undefined && this.defaultValue !== undefined) {
|
|
178
|
+
this.#internalValue = this.defaultValue;
|
|
179
|
+
}
|
|
180
|
+
this._ctx = this.#buildContext();
|
|
181
|
+
}
|
|
182
|
+
willUpdate() {
|
|
183
|
+
this._ctx = this.#buildContext();
|
|
184
|
+
}
|
|
185
|
+
render() {
|
|
186
|
+
return html `
|
|
108
187
|
<div
|
|
109
188
|
part="root"
|
|
110
189
|
role="radiogroup"
|
|
@@ -115,27 +194,11 @@ export class DuiRadioGroup extends LitElement {
|
|
|
115
194
|
<slot></slot>
|
|
116
195
|
</div>
|
|
117
196
|
`;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
__decorate([
|
|
127
|
-
property({ attribute: "default-value" })
|
|
128
|
-
], DuiRadioGroup.prototype, "defaultValue", null);
|
|
129
|
-
__decorate([
|
|
130
|
-
property({ type: Boolean, reflect: true })
|
|
131
|
-
], DuiRadioGroup.prototype, "disabled", null);
|
|
132
|
-
__decorate([
|
|
133
|
-
property({ type: Boolean, reflect: true, attribute: "read-only" })
|
|
134
|
-
], DuiRadioGroup.prototype, "readOnly", null);
|
|
135
|
-
__decorate([
|
|
136
|
-
property({ type: Boolean, reflect: true })
|
|
137
|
-
], DuiRadioGroup.prototype, "required", null);
|
|
138
|
-
__decorate([
|
|
139
|
-
provide({ context: radioGroupContext }),
|
|
140
|
-
state()
|
|
141
|
-
], DuiRadioGroup.prototype, "_ctx", null);
|
|
197
|
+
}
|
|
198
|
+
constructor() {
|
|
199
|
+
super(...arguments);
|
|
200
|
+
__runInitializers(this, __ctx_extraInitializers);
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
})();
|
|
204
|
+
export { DuiRadioGroup };
|
package/radio/radio.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
|
|
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, nothing } from "lit";
|
|
9
37
|
import { property, state } from "lit/decorators.js";
|
|
@@ -76,82 +104,108 @@ const styles = css `
|
|
|
76
104
|
* @csspart indicator - The selected state indicator.
|
|
77
105
|
* @cssprop --radio-size - Size of the radio button.
|
|
78
106
|
*/
|
|
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
|
-
return (this.disabled ||
|
|
106
|
-
(this.#groupCtx.value?.disabled ?? false) ||
|
|
107
|
-
(this._fieldCtx?.disabled ?? false));
|
|
108
|
-
}
|
|
109
|
-
get #isReadOnly() {
|
|
110
|
-
return this.readOnly || (this.#groupCtx.value?.readOnly ?? false);
|
|
111
|
-
}
|
|
112
|
-
get #isRequired() {
|
|
113
|
-
return this.#groupCtx.value?.required ?? false;
|
|
114
|
-
}
|
|
115
|
-
get #isInvalid() {
|
|
116
|
-
return this._fieldCtx?.invalid ?? false;
|
|
117
|
-
}
|
|
118
|
-
connectedCallback() {
|
|
119
|
-
super.connectedCallback();
|
|
120
|
-
this.addEventListener("click", this.#handleHostClick);
|
|
121
|
-
}
|
|
122
|
-
disconnectedCallback() {
|
|
123
|
-
super.disconnectedCallback();
|
|
124
|
-
this.removeEventListener("click", this.#handleHostClick);
|
|
125
|
-
}
|
|
126
|
-
#handleHostClick = (e) => {
|
|
127
|
-
if (e.target.closest("[part='root']"))
|
|
128
|
-
return;
|
|
129
|
-
this.#handleClick(e);
|
|
130
|
-
};
|
|
131
|
-
#handleClick = (_e) => {
|
|
132
|
-
if (this.#isDisabled || this.#isReadOnly)
|
|
133
|
-
return;
|
|
134
|
-
const ctx = this.#groupCtx.value;
|
|
135
|
-
if (ctx) {
|
|
136
|
-
ctx.select(this.value);
|
|
137
|
-
this._fieldCtx?.markDirty();
|
|
138
|
-
this._fieldCtx?.markTouched();
|
|
107
|
+
let DuiRadio = (() => {
|
|
108
|
+
let _classSuper = LitElement;
|
|
109
|
+
let _value_decorators;
|
|
110
|
+
let _value_initializers = [];
|
|
111
|
+
let _value_extraInitializers = [];
|
|
112
|
+
let _disabled_decorators;
|
|
113
|
+
let _disabled_initializers = [];
|
|
114
|
+
let _disabled_extraInitializers = [];
|
|
115
|
+
let _readOnly_decorators;
|
|
116
|
+
let _readOnly_initializers = [];
|
|
117
|
+
let _readOnly_extraInitializers = [];
|
|
118
|
+
let __fieldCtx_decorators;
|
|
119
|
+
let __fieldCtx_initializers = [];
|
|
120
|
+
let __fieldCtx_extraInitializers = [];
|
|
121
|
+
return class DuiRadio extends _classSuper {
|
|
122
|
+
static {
|
|
123
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
124
|
+
_value_decorators = [property()];
|
|
125
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
126
|
+
_readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
|
|
127
|
+
__fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
|
|
128
|
+
__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);
|
|
129
|
+
__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);
|
|
130
|
+
__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);
|
|
131
|
+
__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);
|
|
132
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
139
133
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
134
|
+
static tagName = "dui-radio";
|
|
135
|
+
static styles = [base, styles];
|
|
136
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
137
|
+
/** The value attribute for this radio option. */
|
|
138
|
+
get value() { return this.#value_accessor_storage; }
|
|
139
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
140
|
+
#disabled_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
141
|
+
/** Whether the radio is disabled. */
|
|
142
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
143
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
144
|
+
#readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false));
|
|
145
|
+
/** Whether the radio is read-only. */
|
|
146
|
+
get readOnly() { return this.#readOnly_accessor_storage; }
|
|
147
|
+
set readOnly(value) { this.#readOnly_accessor_storage = value; }
|
|
148
|
+
#groupCtx = (__runInitializers(this, _readOnly_extraInitializers), new ContextConsumer(this, {
|
|
149
|
+
context: radioGroupContext,
|
|
150
|
+
subscribe: true,
|
|
151
|
+
}));
|
|
152
|
+
#_fieldCtx_accessor_storage = __runInitializers(this, __fieldCtx_initializers, void 0);
|
|
153
|
+
get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
|
|
154
|
+
set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
|
|
155
|
+
get #isChecked() {
|
|
156
|
+
return this.#groupCtx.value?.value === this.value;
|
|
145
157
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
get #isDisabled() {
|
|
159
|
+
return (this.disabled ||
|
|
160
|
+
(this.#groupCtx.value?.disabled ?? false) ||
|
|
161
|
+
(this._fieldCtx?.disabled ?? false));
|
|
162
|
+
}
|
|
163
|
+
get #isReadOnly() {
|
|
164
|
+
return this.readOnly || (this.#groupCtx.value?.readOnly ?? false);
|
|
165
|
+
}
|
|
166
|
+
get #isRequired() {
|
|
167
|
+
return this.#groupCtx.value?.required ?? false;
|
|
168
|
+
}
|
|
169
|
+
get #isInvalid() {
|
|
170
|
+
return this._fieldCtx?.invalid ?? false;
|
|
171
|
+
}
|
|
172
|
+
connectedCallback() {
|
|
173
|
+
super.connectedCallback();
|
|
174
|
+
this.addEventListener("click", this.#handleHostClick);
|
|
175
|
+
}
|
|
176
|
+
disconnectedCallback() {
|
|
177
|
+
super.disconnectedCallback();
|
|
178
|
+
this.removeEventListener("click", this.#handleHostClick);
|
|
179
|
+
}
|
|
180
|
+
#handleHostClick = (__runInitializers(this, __fieldCtx_extraInitializers), (e) => {
|
|
181
|
+
if (e.target.closest("[part='root']"))
|
|
182
|
+
return;
|
|
183
|
+
this.#handleClick(e);
|
|
184
|
+
});
|
|
185
|
+
#handleClick = (_e) => {
|
|
186
|
+
if (this.#isDisabled || this.#isReadOnly)
|
|
187
|
+
return;
|
|
188
|
+
const ctx = this.#groupCtx.value;
|
|
189
|
+
if (ctx) {
|
|
190
|
+
ctx.select(this.value);
|
|
191
|
+
this._fieldCtx?.markDirty();
|
|
192
|
+
this._fieldCtx?.markTouched();
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
#handleKeyDown = (e) => {
|
|
196
|
+
if (e.key === " ") {
|
|
197
|
+
e.preventDefault();
|
|
198
|
+
this.#handleClick(e);
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
render() {
|
|
202
|
+
const isChecked = this.#isChecked;
|
|
203
|
+
const isDisabled = this.#isDisabled;
|
|
204
|
+
const isReadOnly = this.#isReadOnly;
|
|
205
|
+
const isRequired = this.#isRequired;
|
|
206
|
+
const isInvalid = this.#isInvalid;
|
|
207
|
+
const controlId = this._fieldCtx?.controlId ?? "";
|
|
208
|
+
return html `
|
|
155
209
|
<span
|
|
156
210
|
part="root"
|
|
157
211
|
role="radio"
|
|
@@ -192,18 +246,7 @@ export class DuiRadio extends LitElement {
|
|
|
192
246
|
</span>
|
|
193
247
|
<slot></slot>
|
|
194
248
|
`;
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
], DuiRadio.prototype, "value", null);
|
|
200
|
-
__decorate([
|
|
201
|
-
property({ type: Boolean, reflect: true })
|
|
202
|
-
], DuiRadio.prototype, "disabled", null);
|
|
203
|
-
__decorate([
|
|
204
|
-
property({ type: Boolean, reflect: true, attribute: "read-only" })
|
|
205
|
-
], DuiRadio.prototype, "readOnly", null);
|
|
206
|
-
__decorate([
|
|
207
|
-
consume({ context: fieldContext, subscribe: true }),
|
|
208
|
-
state()
|
|
209
|
-
], DuiRadio.prototype, "_fieldCtx", null);
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
})();
|
|
252
|
+
export { DuiRadio };
|
package/scroll-area/index.d.ts
CHANGED
package/scroll-area/index.js
CHANGED