@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
|
@@ -19,8 +19,8 @@ const styles = css `
|
|
|
19
19
|
* @csspart root - The `<li>` element.
|
|
20
20
|
*/
|
|
21
21
|
export class DuiBreadcrumbItem extends LitElement {
|
|
22
|
-
static
|
|
23
|
-
static
|
|
22
|
+
static tagName = "dui-breadcrumb-item";
|
|
23
|
+
static styles = [base, styles];
|
|
24
24
|
render() {
|
|
25
25
|
return html `
|
|
26
26
|
<li part="root">
|
|
@@ -20,8 +20,8 @@ const styles = css `
|
|
|
20
20
|
* @csspart root - The wrapper `<span>` element.
|
|
21
21
|
*/
|
|
22
22
|
export class DuiBreadcrumbLink extends LitElement {
|
|
23
|
-
static
|
|
24
|
-
static
|
|
23
|
+
static tagName = "dui-breadcrumb-link";
|
|
24
|
+
static styles = [base, styles];
|
|
25
25
|
render() {
|
|
26
26
|
return html `
|
|
27
27
|
<span part="root">
|
|
@@ -19,8 +19,8 @@ const styles = css `
|
|
|
19
19
|
* @csspart root - The `<span>` element with `aria-current="page"`.
|
|
20
20
|
*/
|
|
21
21
|
export class DuiBreadcrumbPage extends LitElement {
|
|
22
|
-
static
|
|
23
|
-
static
|
|
22
|
+
static tagName = "dui-breadcrumb-page";
|
|
23
|
+
static styles = [base, styles];
|
|
24
24
|
render() {
|
|
25
25
|
return html `
|
|
26
26
|
<span
|
|
@@ -20,8 +20,8 @@ const styles = css `
|
|
|
20
20
|
* @csspart root - The `<li>` element (presentational, aria-hidden).
|
|
21
21
|
*/
|
|
22
22
|
export class DuiBreadcrumbSeparator extends LitElement {
|
|
23
|
-
static
|
|
24
|
-
static
|
|
23
|
+
static tagName = "dui-breadcrumb-separator";
|
|
24
|
+
static styles = [base, styles];
|
|
25
25
|
render() {
|
|
26
26
|
return html `
|
|
27
27
|
<li
|
package/breadcrumb/breadcrumb.js
CHANGED
|
@@ -24,8 +24,8 @@ const styles = css `
|
|
|
24
24
|
* @csspart root - The `<ol>` element.
|
|
25
25
|
*/
|
|
26
26
|
export class DuiBreadcrumb extends LitElement {
|
|
27
|
-
static
|
|
28
|
-
static
|
|
27
|
+
static tagName = "dui-breadcrumb";
|
|
28
|
+
static styles = [base, styles];
|
|
29
29
|
render() {
|
|
30
30
|
return html `
|
|
31
31
|
<nav aria-label="breadcrumb">
|
package/breadcrumb/index.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
|
|
6
|
-
export {
|
|
1
|
+
import { DuiBreadcrumb } from "./breadcrumb.js";
|
|
2
|
+
export { DuiBreadcrumb };
|
|
3
|
+
import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
|
|
4
|
+
export { DuiBreadcrumbItem };
|
|
5
|
+
import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
|
|
6
|
+
export { DuiBreadcrumbLink };
|
|
7
|
+
import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
|
|
8
|
+
export { DuiBreadcrumbPage };
|
|
9
|
+
import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
|
|
10
|
+
export { DuiBreadcrumbSeparator };
|
|
11
|
+
import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
|
|
12
|
+
export { DuiBreadcrumbEllipsis };
|
|
13
|
+
export declare const breadcrumbFamily: (typeof DuiBreadcrumb | typeof DuiBreadcrumbItem | typeof DuiBreadcrumbLink | typeof DuiBreadcrumbPage | typeof DuiBreadcrumbSeparator | typeof DuiBreadcrumbEllipsis)[];
|
package/breadcrumb/index.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
|
|
6
|
-
export {
|
|
1
|
+
import { DuiBreadcrumb } from "./breadcrumb.js";
|
|
2
|
+
export { DuiBreadcrumb };
|
|
3
|
+
import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
|
|
4
|
+
export { DuiBreadcrumbItem };
|
|
5
|
+
import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
|
|
6
|
+
export { DuiBreadcrumbLink };
|
|
7
|
+
import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
|
|
8
|
+
export { DuiBreadcrumbPage };
|
|
9
|
+
import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
|
|
10
|
+
export { DuiBreadcrumbSeparator };
|
|
11
|
+
import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
|
|
12
|
+
export { DuiBreadcrumbEllipsis };
|
|
13
|
+
export const breadcrumbFamily = [DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis];
|
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 };
|
package/button/index.d.ts
CHANGED
package/button/index.js
CHANGED