@deepfuture/dui-components 0.0.12 → 0.0.14
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 -3
- 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/button/button.js
CHANGED
|
@@ -1,8 +1,36 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
2
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
3
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
4
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
5
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
6
|
+
var _, done = false;
|
|
7
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
8
|
+
var context = {};
|
|
9
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
10
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
11
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
12
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
13
|
+
if (kind === "accessor") {
|
|
14
|
+
if (result === void 0) continue;
|
|
15
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
16
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
17
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
18
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
19
|
+
}
|
|
20
|
+
else if (_ = accept(result)) {
|
|
21
|
+
if (kind === "field") initializers.unshift(_);
|
|
22
|
+
else descriptor[key] = _;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
26
|
+
done = true;
|
|
27
|
+
};
|
|
28
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
29
|
+
var useValue = arguments.length > 2;
|
|
30
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
31
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
32
|
+
}
|
|
33
|
+
return useValue ? value : void 0;
|
|
6
34
|
};
|
|
7
35
|
import { css, html, LitElement, nothing } from "lit";
|
|
8
36
|
import { property } from "lit/decorators.js";
|
|
@@ -48,47 +76,73 @@ const styles = css `
|
|
|
48
76
|
* @csspart root - The button or anchor element.
|
|
49
77
|
* @fires dui-navigate - Fired on normal link clicks. Detail: { href: string }
|
|
50
78
|
*/
|
|
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
|
-
if (this.disabled) {
|
|
78
|
-
event.preventDefault();
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
if (this.href) {
|
|
85
|
-
event.preventDefault();
|
|
86
|
-
this.dispatchEvent(navigateEvent({ href: this.href }));
|
|
79
|
+
let DuiButton = (() => {
|
|
80
|
+
let _classSuper = LitElement;
|
|
81
|
+
let _disabled_decorators;
|
|
82
|
+
let _disabled_initializers = [];
|
|
83
|
+
let _disabled_extraInitializers = [];
|
|
84
|
+
let _focusableWhenDisabled_decorators;
|
|
85
|
+
let _focusableWhenDisabled_initializers = [];
|
|
86
|
+
let _focusableWhenDisabled_extraInitializers = [];
|
|
87
|
+
let _type_decorators;
|
|
88
|
+
let _type_initializers = [];
|
|
89
|
+
let _type_extraInitializers = [];
|
|
90
|
+
let _href_decorators;
|
|
91
|
+
let _href_initializers = [];
|
|
92
|
+
let _href_extraInitializers = [];
|
|
93
|
+
return class DuiButton extends _classSuper {
|
|
94
|
+
static {
|
|
95
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
96
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
97
|
+
_focusableWhenDisabled_decorators = [property({ type: Boolean, attribute: "focusable-when-disabled" })];
|
|
98
|
+
_type_decorators = [property()];
|
|
99
|
+
_href_decorators = [property()];
|
|
100
|
+
__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);
|
|
101
|
+
__esDecorate(this, null, _focusableWhenDisabled_decorators, { kind: "accessor", name: "focusableWhenDisabled", static: false, private: false, access: { has: obj => "focusableWhenDisabled" in obj, get: obj => obj.focusableWhenDisabled, set: (obj, value) => { obj.focusableWhenDisabled = value; } }, metadata: _metadata }, _focusableWhenDisabled_initializers, _focusableWhenDisabled_extraInitializers);
|
|
102
|
+
__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);
|
|
103
|
+
__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);
|
|
104
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
87
105
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
106
|
+
static tagName = "dui-button";
|
|
107
|
+
static shadowRootOptions = {
|
|
108
|
+
...LitElement.shadowRootOptions,
|
|
109
|
+
delegatesFocus: true,
|
|
110
|
+
};
|
|
111
|
+
static styles = [base, styles];
|
|
112
|
+
#disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false);
|
|
113
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
114
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
115
|
+
#focusableWhenDisabled_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _focusableWhenDisabled_initializers, false));
|
|
116
|
+
get focusableWhenDisabled() { return this.#focusableWhenDisabled_accessor_storage; }
|
|
117
|
+
set focusableWhenDisabled(value) { this.#focusableWhenDisabled_accessor_storage = value; }
|
|
118
|
+
#type_accessor_storage = (__runInitializers(this, _focusableWhenDisabled_extraInitializers), __runInitializers(this, _type_initializers, "button"));
|
|
119
|
+
get type() { return this.#type_accessor_storage; }
|
|
120
|
+
set type(value) { this.#type_accessor_storage = value; }
|
|
121
|
+
#href_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _href_initializers, undefined));
|
|
122
|
+
get href() { return this.#href_accessor_storage; }
|
|
123
|
+
set href(value) { this.#href_accessor_storage = value; }
|
|
124
|
+
#handleClick = (__runInitializers(this, _href_extraInitializers), (e) => {
|
|
125
|
+
if (this.disabled) {
|
|
126
|
+
e.preventDefault();
|
|
127
|
+
e.stopPropagation();
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
#onLinkClick = (event) => {
|
|
131
|
+
if (this.disabled) {
|
|
132
|
+
event.preventDefault();
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (this.href) {
|
|
139
|
+
event.preventDefault();
|
|
140
|
+
this.dispatchEvent(navigateEvent({ href: this.href }));
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
#renderButton() {
|
|
144
|
+
const ariaDisabled = this.disabled && this.focusableWhenDisabled;
|
|
145
|
+
return html `
|
|
92
146
|
<button
|
|
93
147
|
part="root"
|
|
94
148
|
type="${this.type}"
|
|
@@ -99,9 +153,9 @@ export class DuiButton extends LitElement {
|
|
|
99
153
|
<slot></slot>
|
|
100
154
|
</button>
|
|
101
155
|
`;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
156
|
+
}
|
|
157
|
+
#renderLink() {
|
|
158
|
+
return html `
|
|
105
159
|
<a
|
|
106
160
|
part="root"
|
|
107
161
|
href="${this.href ?? nothing}"
|
|
@@ -111,20 +165,10 @@ export class DuiButton extends LitElement {
|
|
|
111
165
|
<slot></slot>
|
|
112
166
|
</a>
|
|
113
167
|
`;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
], DuiButton.prototype, "disabled", null);
|
|
122
|
-
__decorate([
|
|
123
|
-
property({ type: Boolean, attribute: "focusable-when-disabled" })
|
|
124
|
-
], DuiButton.prototype, "focusableWhenDisabled", null);
|
|
125
|
-
__decorate([
|
|
126
|
-
property()
|
|
127
|
-
], DuiButton.prototype, "type", null);
|
|
128
|
-
__decorate([
|
|
129
|
-
property()
|
|
130
|
-
], DuiButton.prototype, "href", null);
|
|
168
|
+
}
|
|
169
|
+
render() {
|
|
170
|
+
return this.href !== undefined ? this.#renderLink() : this.#renderButton();
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
})();
|
|
174
|
+
export { DuiButton };
|