@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/tabs/tabs-list.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
7
35
|
};
|
|
8
36
|
import { css, html, LitElement } from "lit";
|
|
9
37
|
import { consume } from "@lit/context";
|
|
@@ -27,59 +55,69 @@ const styles = css `
|
|
|
27
55
|
/**
|
|
28
56
|
* Container for tab triggers. Manages indicator positioning via CSS custom properties.
|
|
29
57
|
*/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
58
|
+
let DuiTabsList = (() => {
|
|
59
|
+
let _classSuper = LitElement;
|
|
60
|
+
let __ctx_decorators;
|
|
61
|
+
let __ctx_initializers = [];
|
|
62
|
+
let __ctx_extraInitializers = [];
|
|
63
|
+
return class DuiTabsList extends _classSuper {
|
|
64
|
+
static {
|
|
65
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
66
|
+
__ctx_decorators = [consume({ context: tabsContext, subscribe: true })];
|
|
67
|
+
__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);
|
|
68
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
69
|
+
}
|
|
70
|
+
static tagName = "dui-tabs-list";
|
|
71
|
+
static styles = [base, styles];
|
|
72
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, void 0);
|
|
73
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
74
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
75
|
+
#resizeObserver = __runInitializers(this, __ctx_extraInitializers);
|
|
76
|
+
connectedCallback() {
|
|
77
|
+
super.connectedCallback();
|
|
78
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
79
|
+
this.#updateIndicatorPosition();
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
disconnectedCallback() {
|
|
83
|
+
super.disconnectedCallback();
|
|
84
|
+
this.#resizeObserver?.disconnect();
|
|
85
|
+
}
|
|
86
|
+
firstUpdated() {
|
|
87
|
+
const list = this.shadowRoot?.querySelector("[part='list']");
|
|
88
|
+
if (list) {
|
|
89
|
+
this.#resizeObserver?.observe(list);
|
|
90
|
+
}
|
|
40
91
|
this.#updateIndicatorPosition();
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
disconnectedCallback() {
|
|
44
|
-
super.disconnectedCallback();
|
|
45
|
-
this.#resizeObserver?.disconnect();
|
|
46
|
-
}
|
|
47
|
-
firstUpdated() {
|
|
48
|
-
const list = this.shadowRoot?.querySelector("[part='list']");
|
|
49
|
-
if (list) {
|
|
50
|
-
this.#resizeObserver?.observe(list);
|
|
51
92
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
updated() {
|
|
55
|
-
this.#updateIndicatorPosition();
|
|
56
|
-
}
|
|
57
|
-
#updateIndicatorPosition() {
|
|
58
|
-
const list = this.shadowRoot?.querySelector("[part='list']");
|
|
59
|
-
if (!list)
|
|
60
|
-
return;
|
|
61
|
-
const slot = this.shadowRoot?.querySelector("slot");
|
|
62
|
-
const slottedElements = slot?.assignedElements() ?? [];
|
|
63
|
-
const activeTab = slottedElements.find((el) => el.tagName === "DUI-TAB" &&
|
|
64
|
-
el.getAttribute("value") === this._ctx?.value);
|
|
65
|
-
if (activeTab) {
|
|
66
|
-
const listRect = list.getBoundingClientRect();
|
|
67
|
-
const tabRect = activeTab.getBoundingClientRect();
|
|
68
|
-
const left = tabRect.left - listRect.left;
|
|
69
|
-
const width = tabRect.width;
|
|
70
|
-
list.style.setProperty("--active-tab-left", `${left}px`);
|
|
71
|
-
list.style.setProperty("--active-tab-width", `${width}px`);
|
|
93
|
+
updated() {
|
|
94
|
+
this.#updateIndicatorPosition();
|
|
72
95
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
96
|
+
#updateIndicatorPosition() {
|
|
97
|
+
const list = this.shadowRoot?.querySelector("[part='list']");
|
|
98
|
+
if (!list)
|
|
99
|
+
return;
|
|
100
|
+
const slot = this.shadowRoot?.querySelector("slot");
|
|
101
|
+
const slottedElements = slot?.assignedElements() ?? [];
|
|
102
|
+
const activeTab = slottedElements.find((el) => el.tagName === "DUI-TAB" &&
|
|
103
|
+
el.getAttribute("value") === this._ctx?.value);
|
|
104
|
+
if (activeTab) {
|
|
105
|
+
const listRect = list.getBoundingClientRect();
|
|
106
|
+
const tabRect = activeTab.getBoundingClientRect();
|
|
107
|
+
const left = tabRect.left - listRect.left;
|
|
108
|
+
const width = tabRect.width;
|
|
109
|
+
list.style.setProperty("--active-tab-left", `${left}px`);
|
|
110
|
+
list.style.setProperty("--active-tab-width", `${width}px`);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
render() {
|
|
114
|
+
const orientation = this._ctx?.orientation ?? "horizontal";
|
|
115
|
+
return html `
|
|
77
116
|
<div part="list" role="tablist" data-orientation=${orientation}>
|
|
78
117
|
<slot></slot>
|
|
79
118
|
</div>
|
|
80
119
|
`;
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
], DuiTabsList.prototype, "_ctx", null);
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
})();
|
|
123
|
+
export { DuiTabsList };
|
package/tabs/tabs-panel.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
7
35
|
};
|
|
8
36
|
import { css, html, LitElement, nothing } from "lit";
|
|
9
37
|
import { property } from "lit/decorators.js";
|
|
@@ -31,37 +59,58 @@ const styles = css `
|
|
|
31
59
|
/**
|
|
32
60
|
* Content panel for a tab. Shown when the matching tab is active.
|
|
33
61
|
*/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.
|
|
62
|
+
let DuiTabsPanel = (() => {
|
|
63
|
+
let _classSuper = LitElement;
|
|
64
|
+
let _value_decorators;
|
|
65
|
+
let _value_initializers = [];
|
|
66
|
+
let _value_extraInitializers = [];
|
|
67
|
+
let _keepMounted_decorators;
|
|
68
|
+
let _keepMounted_initializers = [];
|
|
69
|
+
let _keepMounted_extraInitializers = [];
|
|
70
|
+
let __ctx_decorators;
|
|
71
|
+
let __ctx_initializers = [];
|
|
72
|
+
let __ctx_extraInitializers = [];
|
|
73
|
+
return class DuiTabsPanel extends _classSuper {
|
|
74
|
+
static {
|
|
75
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
76
|
+
_value_decorators = [property()];
|
|
77
|
+
_keepMounted_decorators = [property({ type: Boolean, attribute: "keep-mounted" })];
|
|
78
|
+
__ctx_decorators = [consume({ context: tabsContext, subscribe: true })];
|
|
79
|
+
__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);
|
|
80
|
+
__esDecorate(this, null, _keepMounted_decorators, { kind: "accessor", name: "keepMounted", static: false, private: false, access: { has: obj => "keepMounted" in obj, get: obj => obj.keepMounted, set: (obj, value) => { obj.keepMounted = value; } }, metadata: _metadata }, _keepMounted_initializers, _keepMounted_extraInitializers);
|
|
81
|
+
__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);
|
|
82
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
54
83
|
}
|
|
55
|
-
|
|
56
|
-
|
|
84
|
+
static tagName = "dui-tabs-panel";
|
|
85
|
+
static styles = [base, styles];
|
|
86
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
87
|
+
/** Panel value — must match the corresponding tab's value. */
|
|
88
|
+
get value() { return this.#value_accessor_storage; }
|
|
89
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
90
|
+
#keepMounted_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _keepMounted_initializers, false));
|
|
91
|
+
/** Keep panel in DOM when not active. */
|
|
92
|
+
get keepMounted() { return this.#keepMounted_accessor_storage; }
|
|
93
|
+
set keepMounted(value) { this.#keepMounted_accessor_storage = value; }
|
|
94
|
+
#_ctx_accessor_storage = (__runInitializers(this, _keepMounted_extraInitializers), __runInitializers(this, __ctx_initializers, void 0));
|
|
95
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
96
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
97
|
+
get #isActive() {
|
|
98
|
+
return this._ctx?.value === this.value;
|
|
57
99
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
100
|
+
willUpdate() {
|
|
101
|
+
if (this.#isActive) {
|
|
102
|
+
this.removeAttribute("data-hidden");
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
this.setAttribute("data-hidden", "");
|
|
106
|
+
}
|
|
63
107
|
}
|
|
64
|
-
|
|
108
|
+
render() {
|
|
109
|
+
const isActive = this.#isActive;
|
|
110
|
+
if (!isActive && !this.keepMounted) {
|
|
111
|
+
return nothing;
|
|
112
|
+
}
|
|
113
|
+
return html `
|
|
65
114
|
<div
|
|
66
115
|
part="panel"
|
|
67
116
|
role="tabpanel"
|
|
@@ -71,14 +120,11 @@ export class DuiTabsPanel extends LitElement {
|
|
|
71
120
|
<slot></slot>
|
|
72
121
|
</div>
|
|
73
122
|
`;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
__decorate([
|
|
83
|
-
consume({ context: tabsContext, subscribe: true })
|
|
84
|
-
], DuiTabsPanel.prototype, "_ctx", null);
|
|
123
|
+
}
|
|
124
|
+
constructor() {
|
|
125
|
+
super(...arguments);
|
|
126
|
+
__runInitializers(this, __ctx_extraInitializers);
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
})();
|
|
130
|
+
export { DuiTabsPanel };
|
package/tabs/tabs.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
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";
|
|
@@ -36,76 +68,103 @@ const styles = css `
|
|
|
36
68
|
/**
|
|
37
69
|
* A tabbed interface component with animated indicator and keyboard navigation.
|
|
38
70
|
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
let DuiTabs = (() => {
|
|
72
|
+
let _classSuper = LitElement;
|
|
73
|
+
let _value_decorators;
|
|
74
|
+
let _value_initializers = [];
|
|
75
|
+
let _value_extraInitializers = [];
|
|
76
|
+
let _defaultValue_decorators;
|
|
77
|
+
let _defaultValue_initializers = [];
|
|
78
|
+
let _defaultValue_extraInitializers = [];
|
|
79
|
+
let _orientation_decorators;
|
|
80
|
+
let _orientation_initializers = [];
|
|
81
|
+
let _orientation_extraInitializers = [];
|
|
82
|
+
let _controls_decorators;
|
|
83
|
+
let _controls_initializers = [];
|
|
84
|
+
let _controls_extraInitializers = [];
|
|
85
|
+
let _private_internalValue_decorators;
|
|
86
|
+
let _private_internalValue_initializers = [];
|
|
87
|
+
let _private_internalValue_extraInitializers = [];
|
|
88
|
+
let _private_internalValue_descriptor;
|
|
89
|
+
let __ctx_decorators;
|
|
90
|
+
let __ctx_initializers = [];
|
|
91
|
+
let __ctx_extraInitializers = [];
|
|
92
|
+
return class DuiTabs extends _classSuper {
|
|
93
|
+
static {
|
|
94
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
95
|
+
_value_decorators = [property()];
|
|
96
|
+
_defaultValue_decorators = [property({ attribute: "default-value" })];
|
|
97
|
+
_orientation_decorators = [property({ reflect: true })];
|
|
98
|
+
_controls_decorators = [property({ reflect: true })];
|
|
99
|
+
_private_internalValue_decorators = [state()];
|
|
100
|
+
__ctx_decorators = [provide({ context: tabsContext }), state()];
|
|
101
|
+
__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);
|
|
102
|
+
__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);
|
|
103
|
+
__esDecorate(this, null, _orientation_decorators, { kind: "accessor", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
|
|
104
|
+
__esDecorate(this, null, _controls_decorators, { kind: "accessor", name: "controls", static: false, private: false, access: { has: obj => "controls" in obj, get: obj => obj.controls, set: (obj, value) => { obj.controls = value; } }, metadata: _metadata }, _controls_initializers, _controls_extraInitializers);
|
|
105
|
+
__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);
|
|
106
|
+
__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);
|
|
107
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
65
108
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
109
|
+
static tagName = "dui-tabs";
|
|
110
|
+
static styles = [base, styles];
|
|
111
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
|
|
112
|
+
/** Controlled active tab value. */
|
|
113
|
+
get value() { return this.#value_accessor_storage; }
|
|
114
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
115
|
+
#defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, undefined));
|
|
116
|
+
/** Initial active tab value (uncontrolled mode). */
|
|
117
|
+
get defaultValue() { return this.#defaultValue_accessor_storage; }
|
|
118
|
+
set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
|
|
119
|
+
#orientation_accessor_storage = (__runInitializers(this, _defaultValue_extraInitializers), __runInitializers(this, _orientation_initializers, "horizontal"));
|
|
120
|
+
/** Layout orientation. */
|
|
121
|
+
get orientation() { return this.#orientation_accessor_storage; }
|
|
122
|
+
set orientation(value) { this.#orientation_accessor_storage = value; }
|
|
123
|
+
#controls_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _controls_initializers, "header"));
|
|
124
|
+
/** Whether tab list appears above or below content. */
|
|
125
|
+
get controls() { return this.#controls_accessor_storage; }
|
|
126
|
+
set controls(value) { this.#controls_accessor_storage = value; }
|
|
127
|
+
#internalValue_accessor_storage = (__runInitializers(this, _controls_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
|
|
128
|
+
get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
|
|
129
|
+
set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
|
|
130
|
+
#getValue = (__runInitializers(this, _private_internalValue_extraInitializers), () => this.value ?? this.#internalValue);
|
|
131
|
+
#select = (tabValue) => {
|
|
132
|
+
if (this.value === undefined) {
|
|
133
|
+
this.#internalValue = tabValue;
|
|
134
|
+
}
|
|
135
|
+
this.dispatchEvent(valueChangeEvent(tabValue));
|
|
76
136
|
};
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
137
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, this.#buildContext());
|
|
138
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
139
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
140
|
+
#buildContext() {
|
|
141
|
+
return {
|
|
142
|
+
value: this.#getValue(),
|
|
143
|
+
orientation: this.orientation,
|
|
144
|
+
select: this.#select,
|
|
145
|
+
};
|
|
82
146
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
147
|
+
connectedCallback() {
|
|
148
|
+
super.connectedCallback();
|
|
149
|
+
if (this.value === undefined && this.defaultValue !== undefined) {
|
|
150
|
+
this.#internalValue = this.defaultValue;
|
|
151
|
+
}
|
|
152
|
+
this._ctx = this.#buildContext();
|
|
153
|
+
}
|
|
154
|
+
willUpdate() {
|
|
155
|
+
this._ctx = this.#buildContext();
|
|
156
|
+
}
|
|
157
|
+
render() {
|
|
158
|
+
return html `
|
|
90
159
|
<div part="root" data-orientation=${this.orientation}>
|
|
91
160
|
<slot></slot>
|
|
92
161
|
</div>
|
|
93
162
|
`;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ reflect: true })
|
|
104
|
-
], DuiTabs.prototype, "orientation", null);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ reflect: true })
|
|
107
|
-
], DuiTabs.prototype, "controls", null);
|
|
108
|
-
__decorate([
|
|
109
|
-
provide({ context: tabsContext }),
|
|
110
|
-
state()
|
|
111
|
-
], DuiTabs.prototype, "_ctx", null);
|
|
163
|
+
}
|
|
164
|
+
constructor() {
|
|
165
|
+
super(...arguments);
|
|
166
|
+
__runInitializers(this, __ctx_extraInitializers);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
})();
|
|
170
|
+
export { DuiTabs };
|
package/textarea/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { DuiTextarea, textareaChangeEvent } from "./textarea.js";
|
|
2
|
+
export { DuiTextarea, textareaChangeEvent };
|
|
2
3
|
export type { TextareaResize } from "./textarea.js";
|
|
4
|
+
export declare const textareaFamily: (typeof DuiTextarea)[];
|
package/textarea/index.js
CHANGED