@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/input/input.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/input */
|
|
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, state } from "lit/decorators.js";
|
|
@@ -41,103 +69,174 @@ const styles = css `
|
|
|
41
69
|
* @csspart input - The native input element.
|
|
42
70
|
* @fires input-change - Fired when value changes. Detail: { value: string }
|
|
43
71
|
*/
|
|
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
|
-
|
|
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
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
return this._fieldCtx?.invalid ?? false;
|
|
116
|
-
}
|
|
117
|
-
firstUpdated() {
|
|
118
|
-
if (this.autofocus) {
|
|
119
|
-
this.focus();
|
|
72
|
+
let DuiInput = (() => {
|
|
73
|
+
let _classSuper = LitElement;
|
|
74
|
+
let _type_decorators;
|
|
75
|
+
let _type_initializers = [];
|
|
76
|
+
let _type_extraInitializers = [];
|
|
77
|
+
let _value_decorators;
|
|
78
|
+
let _value_initializers = [];
|
|
79
|
+
let _value_extraInitializers = [];
|
|
80
|
+
let _placeholder_decorators;
|
|
81
|
+
let _placeholder_initializers = [];
|
|
82
|
+
let _placeholder_extraInitializers = [];
|
|
83
|
+
let _disabled_decorators;
|
|
84
|
+
let _disabled_initializers = [];
|
|
85
|
+
let _disabled_extraInitializers = [];
|
|
86
|
+
let _required_decorators;
|
|
87
|
+
let _required_initializers = [];
|
|
88
|
+
let _required_extraInitializers = [];
|
|
89
|
+
let _readonly_decorators;
|
|
90
|
+
let _readonly_initializers = [];
|
|
91
|
+
let _readonly_extraInitializers = [];
|
|
92
|
+
let _minLength_decorators;
|
|
93
|
+
let _minLength_initializers = [];
|
|
94
|
+
let _minLength_extraInitializers = [];
|
|
95
|
+
let _maxLength_decorators;
|
|
96
|
+
let _maxLength_initializers = [];
|
|
97
|
+
let _maxLength_extraInitializers = [];
|
|
98
|
+
let _pattern_decorators;
|
|
99
|
+
let _pattern_initializers = [];
|
|
100
|
+
let _pattern_extraInitializers = [];
|
|
101
|
+
let _name_decorators;
|
|
102
|
+
let _name_initializers = [];
|
|
103
|
+
let _name_extraInitializers = [];
|
|
104
|
+
let _autocomplete_decorators;
|
|
105
|
+
let _autocomplete_initializers = [];
|
|
106
|
+
let _autocomplete_extraInitializers = [];
|
|
107
|
+
let _autofocus_decorators;
|
|
108
|
+
let _autofocus_initializers = [];
|
|
109
|
+
let _autofocus_extraInitializers = [];
|
|
110
|
+
let __fieldCtx_decorators;
|
|
111
|
+
let __fieldCtx_initializers = [];
|
|
112
|
+
let __fieldCtx_extraInitializers = [];
|
|
113
|
+
return class DuiInput extends _classSuper {
|
|
114
|
+
static {
|
|
115
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
116
|
+
_type_decorators = [property({ type: String })];
|
|
117
|
+
_value_decorators = [property({ type: String })];
|
|
118
|
+
_placeholder_decorators = [property({ type: String })];
|
|
119
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
120
|
+
_required_decorators = [property({ type: Boolean })];
|
|
121
|
+
_readonly_decorators = [property({ type: Boolean })];
|
|
122
|
+
_minLength_decorators = [property({ type: Number, attribute: "minlength" })];
|
|
123
|
+
_maxLength_decorators = [property({ type: Number, attribute: "maxlength" })];
|
|
124
|
+
_pattern_decorators = [property({ type: String })];
|
|
125
|
+
_name_decorators = [property({ type: String })];
|
|
126
|
+
_autocomplete_decorators = [property({ type: String })];
|
|
127
|
+
_autofocus_decorators = [property({ type: Boolean })];
|
|
128
|
+
__fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
|
|
129
|
+
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
130
|
+
__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);
|
|
131
|
+
__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);
|
|
132
|
+
__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);
|
|
133
|
+
__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);
|
|
134
|
+
__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);
|
|
135
|
+
__esDecorate(this, null, _minLength_decorators, { kind: "accessor", name: "minLength", static: false, private: false, access: { has: obj => "minLength" in obj, get: obj => obj.minLength, set: (obj, value) => { obj.minLength = value; } }, metadata: _metadata }, _minLength_initializers, _minLength_extraInitializers);
|
|
136
|
+
__esDecorate(this, null, _maxLength_decorators, { kind: "accessor", name: "maxLength", static: false, private: false, access: { has: obj => "maxLength" in obj, get: obj => obj.maxLength, set: (obj, value) => { obj.maxLength = value; } }, metadata: _metadata }, _maxLength_initializers, _maxLength_extraInitializers);
|
|
137
|
+
__esDecorate(this, null, _pattern_decorators, { kind: "accessor", name: "pattern", static: false, private: false, access: { has: obj => "pattern" in obj, get: obj => obj.pattern, set: (obj, value) => { obj.pattern = value; } }, metadata: _metadata }, _pattern_initializers, _pattern_extraInitializers);
|
|
138
|
+
__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);
|
|
139
|
+
__esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
|
|
140
|
+
__esDecorate(this, null, _autofocus_decorators, { kind: "accessor", name: "autofocus", static: false, private: false, access: { has: obj => "autofocus" in obj, get: obj => obj.autofocus, set: (obj, value) => { obj.autofocus = value; } }, metadata: _metadata }, _autofocus_initializers, _autofocus_extraInitializers);
|
|
141
|
+
__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);
|
|
142
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
120
143
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
144
|
+
static tagName = "dui-input";
|
|
145
|
+
static shadowRootOptions = {
|
|
146
|
+
...LitElement.shadowRootOptions,
|
|
147
|
+
delegatesFocus: true,
|
|
148
|
+
};
|
|
149
|
+
static styles = [base, styles];
|
|
150
|
+
#type_accessor_storage = __runInitializers(this, _type_initializers, "text");
|
|
151
|
+
/** Input type (text, email, password, etc.) */
|
|
152
|
+
get type() { return this.#type_accessor_storage; }
|
|
153
|
+
set type(value) { this.#type_accessor_storage = value; }
|
|
154
|
+
#value_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _value_initializers, ""));
|
|
155
|
+
/** Current input value. */
|
|
156
|
+
get value() { return this.#value_accessor_storage; }
|
|
157
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
158
|
+
#placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
|
|
159
|
+
/** Placeholder text. */
|
|
160
|
+
get placeholder() { return this.#placeholder_accessor_storage; }
|
|
161
|
+
set placeholder(value) { this.#placeholder_accessor_storage = value; }
|
|
162
|
+
#disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
163
|
+
/** Whether the input is disabled. */
|
|
164
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
165
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
166
|
+
#required_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
167
|
+
/** Whether the input is required. */
|
|
168
|
+
get required() { return this.#required_accessor_storage; }
|
|
169
|
+
set required(value) { this.#required_accessor_storage = value; }
|
|
170
|
+
#readonly_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _readonly_initializers, false));
|
|
171
|
+
/** Whether the input is read-only. */
|
|
172
|
+
get readonly() { return this.#readonly_accessor_storage; }
|
|
173
|
+
set readonly(value) { this.#readonly_accessor_storage = value; }
|
|
174
|
+
#minLength_accessor_storage = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _minLength_initializers, undefined));
|
|
175
|
+
/** Minimum length for text inputs. */
|
|
176
|
+
get minLength() { return this.#minLength_accessor_storage; }
|
|
177
|
+
set minLength(value) { this.#minLength_accessor_storage = value; }
|
|
178
|
+
#maxLength_accessor_storage = (__runInitializers(this, _minLength_extraInitializers), __runInitializers(this, _maxLength_initializers, undefined));
|
|
179
|
+
/** Maximum length for text inputs. */
|
|
180
|
+
get maxLength() { return this.#maxLength_accessor_storage; }
|
|
181
|
+
set maxLength(value) { this.#maxLength_accessor_storage = value; }
|
|
182
|
+
#pattern_accessor_storage = (__runInitializers(this, _maxLength_extraInitializers), __runInitializers(this, _pattern_initializers, undefined));
|
|
183
|
+
/** Pattern for validation. */
|
|
184
|
+
get pattern() { return this.#pattern_accessor_storage; }
|
|
185
|
+
set pattern(value) { this.#pattern_accessor_storage = value; }
|
|
186
|
+
#name_accessor_storage = (__runInitializers(this, _pattern_extraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
187
|
+
/** Name attribute for form submission. */
|
|
188
|
+
get name() { return this.#name_accessor_storage; }
|
|
189
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
190
|
+
#autocomplete_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers, undefined));
|
|
191
|
+
/** Autocomplete hint for the browser. */
|
|
192
|
+
get autocomplete() { return this.#autocomplete_accessor_storage; }
|
|
193
|
+
set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
|
|
194
|
+
#autofocus_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _autofocus_initializers, false));
|
|
195
|
+
/** Whether the input should receive focus on mount. */
|
|
196
|
+
get autofocus() { return this.#autofocus_accessor_storage; }
|
|
197
|
+
set autofocus(value) { this.#autofocus_accessor_storage = value; }
|
|
198
|
+
#_fieldCtx_accessor_storage = (__runInitializers(this, _autofocus_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
|
|
199
|
+
get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
|
|
200
|
+
set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
|
|
201
|
+
get #controlId() {
|
|
202
|
+
return this._fieldCtx?.controlId ?? "";
|
|
203
|
+
}
|
|
204
|
+
get #descriptionId() {
|
|
205
|
+
return this._fieldCtx?.descriptionId;
|
|
206
|
+
}
|
|
207
|
+
get #errorId() {
|
|
208
|
+
return this._fieldCtx?.errorId;
|
|
209
|
+
}
|
|
210
|
+
get #isDisabled() {
|
|
211
|
+
return this.disabled || (this._fieldCtx?.disabled ?? false);
|
|
212
|
+
}
|
|
213
|
+
get #isInvalid() {
|
|
214
|
+
return this._fieldCtx?.invalid ?? false;
|
|
215
|
+
}
|
|
216
|
+
firstUpdated() {
|
|
217
|
+
if (this.autofocus) {
|
|
218
|
+
this.focus();
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
#onInput = (__runInitializers(this, __fieldCtx_extraInitializers), (event) => {
|
|
222
|
+
const target = event.target;
|
|
223
|
+
this.value = target.value;
|
|
224
|
+
this._fieldCtx?.markDirty();
|
|
225
|
+
this._fieldCtx?.setFilled(this.value.length > 0);
|
|
226
|
+
this.dispatchEvent(inputChangeEvent({ value: this.value }));
|
|
227
|
+
});
|
|
228
|
+
#onFocus = () => {
|
|
229
|
+
this._fieldCtx?.setFocused(true);
|
|
230
|
+
};
|
|
231
|
+
#onBlur = () => {
|
|
232
|
+
this._fieldCtx?.setFocused(false);
|
|
233
|
+
this._fieldCtx?.markTouched();
|
|
234
|
+
};
|
|
235
|
+
render() {
|
|
236
|
+
const describedBy = [this.#descriptionId, this.#isInvalid ? this.#errorId : undefined]
|
|
237
|
+
.filter(Boolean)
|
|
238
|
+
.join(" ") || undefined;
|
|
239
|
+
return html `
|
|
141
240
|
<input
|
|
142
241
|
part="input"
|
|
143
242
|
id="${this.#controlId}"
|
|
@@ -166,45 +265,7 @@ export class DuiInput extends LitElement {
|
|
|
166
265
|
@blur="${this.#onBlur}"
|
|
167
266
|
/>
|
|
168
267
|
`;
|
|
169
|
-
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
], DuiInput.prototype, "type", null);
|
|
174
|
-
__decorate([
|
|
175
|
-
property({ type: String })
|
|
176
|
-
], DuiInput.prototype, "value", null);
|
|
177
|
-
__decorate([
|
|
178
|
-
property({ type: String })
|
|
179
|
-
], DuiInput.prototype, "placeholder", null);
|
|
180
|
-
__decorate([
|
|
181
|
-
property({ type: Boolean, reflect: true })
|
|
182
|
-
], DuiInput.prototype, "disabled", null);
|
|
183
|
-
__decorate([
|
|
184
|
-
property({ type: Boolean })
|
|
185
|
-
], DuiInput.prototype, "required", null);
|
|
186
|
-
__decorate([
|
|
187
|
-
property({ type: Boolean })
|
|
188
|
-
], DuiInput.prototype, "readonly", null);
|
|
189
|
-
__decorate([
|
|
190
|
-
property({ type: Number, attribute: "minlength" })
|
|
191
|
-
], DuiInput.prototype, "minLength", null);
|
|
192
|
-
__decorate([
|
|
193
|
-
property({ type: Number, attribute: "maxlength" })
|
|
194
|
-
], DuiInput.prototype, "maxLength", null);
|
|
195
|
-
__decorate([
|
|
196
|
-
property({ type: String })
|
|
197
|
-
], DuiInput.prototype, "pattern", null);
|
|
198
|
-
__decorate([
|
|
199
|
-
property({ type: String })
|
|
200
|
-
], DuiInput.prototype, "name", null);
|
|
201
|
-
__decorate([
|
|
202
|
-
property({ type: String })
|
|
203
|
-
], DuiInput.prototype, "autocomplete", null);
|
|
204
|
-
__decorate([
|
|
205
|
-
property({ type: Boolean })
|
|
206
|
-
], DuiInput.prototype, "autofocus", null);
|
|
207
|
-
__decorate([
|
|
208
|
-
consume({ context: fieldContext, subscribe: true }),
|
|
209
|
-
state()
|
|
210
|
-
], DuiInput.prototype, "_fieldCtx", null);
|
|
268
|
+
}
|
|
269
|
+
};
|
|
270
|
+
})();
|
|
271
|
+
export { DuiInput };
|
package/link/link.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/link */
|
|
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";
|
|
@@ -34,24 +62,34 @@ const styles = css `
|
|
|
34
62
|
* @slot - Link content.
|
|
35
63
|
* @fires spa-navigate - Fired on plain left-click. Detail: { href }.
|
|
36
64
|
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
65
|
+
let DuiLink = (() => {
|
|
66
|
+
let _classSuper = LitElement;
|
|
67
|
+
let _href_decorators;
|
|
68
|
+
let _href_initializers = [];
|
|
69
|
+
let _href_extraInitializers = [];
|
|
70
|
+
return class DuiLink extends _classSuper {
|
|
71
|
+
static {
|
|
72
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
73
|
+
_href_decorators = [property()];
|
|
74
|
+
__esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
|
|
75
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
76
|
+
}
|
|
77
|
+
static tagName = "dui-link";
|
|
78
|
+
static styles = [base, styles];
|
|
79
|
+
#href_accessor_storage = __runInitializers(this, _href_initializers, "");
|
|
80
|
+
/** The URL to navigate to. */
|
|
81
|
+
get href() { return this.#href_accessor_storage; }
|
|
82
|
+
set href(value) { this.#href_accessor_storage = value; }
|
|
83
|
+
#onClick = (__runInitializers(this, _href_extraInitializers), (event) => {
|
|
84
|
+
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
this.dispatchEvent(spaNavigateEvent({ href: this.href }));
|
|
89
|
+
});
|
|
90
|
+
render() {
|
|
91
|
+
return html `<a href="${this.href}" @click="${this.#onClick}"><slot></slot></a>`;
|
|
47
92
|
}
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
this.dispatchEvent(spaNavigateEvent({ href: this.href }));
|
|
50
93
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
__decorate([
|
|
56
|
-
property()
|
|
57
|
-
], DuiLink.prototype, "href", null);
|
|
94
|
+
})();
|
|
95
|
+
export { DuiLink };
|
package/menu/menu-item.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/menu */
|
|
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";
|
|
@@ -29,26 +57,40 @@ const componentStyles = css `
|
|
|
29
57
|
*
|
|
30
58
|
* @slot default - Item content (text, icons, etc.).
|
|
31
59
|
*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
60
|
+
let DuiMenuItem = (() => {
|
|
61
|
+
let _classSuper = LitElement;
|
|
62
|
+
let _disabled_decorators;
|
|
63
|
+
let _disabled_initializers = [];
|
|
64
|
+
let _disabled_extraInitializers = [];
|
|
65
|
+
return class DuiMenuItem extends _classSuper {
|
|
66
|
+
static {
|
|
67
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
68
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
69
|
+
__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);
|
|
70
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
71
|
+
}
|
|
72
|
+
static tagName = "dui-menu-item";
|
|
73
|
+
static styles = [base, hostStyles, componentStyles];
|
|
74
|
+
#disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false);
|
|
75
|
+
/** Whether the item is disabled. */
|
|
76
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
77
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
78
|
+
connectedCallback() {
|
|
79
|
+
super.connectedCallback();
|
|
80
|
+
this.setAttribute("role", "menuitem");
|
|
81
|
+
this.setAttribute("tabindex", "-1");
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
return html `
|
|
46
85
|
<div class="Item" part="root" aria-disabled="${this.disabled}">
|
|
47
86
|
<slot></slot>
|
|
48
87
|
</div>
|
|
49
88
|
`;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
89
|
+
}
|
|
90
|
+
constructor() {
|
|
91
|
+
super(...arguments);
|
|
92
|
+
__runInitializers(this, _disabled_extraInitializers);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
})();
|
|
96
|
+
export { DuiMenuItem };
|