@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/toggle/toggle.js
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
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;
|
|
34
|
+
};
|
|
35
|
+
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
|
|
36
|
+
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
|
|
37
|
+
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
|
|
6
38
|
};
|
|
7
39
|
import { css, html, LitElement } from "lit";
|
|
8
40
|
import { property, state } from "lit/decorators.js";
|
|
@@ -43,63 +75,100 @@ const styles = css `
|
|
|
43
75
|
* @csspart root - The button element.
|
|
44
76
|
* @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
|
|
45
77
|
*/
|
|
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
|
-
|
|
78
|
+
let DuiToggle = (() => {
|
|
79
|
+
let _classSuper = LitElement;
|
|
80
|
+
let _pressed_decorators;
|
|
81
|
+
let _pressed_initializers = [];
|
|
82
|
+
let _pressed_extraInitializers = [];
|
|
83
|
+
let _defaultPressed_decorators;
|
|
84
|
+
let _defaultPressed_initializers = [];
|
|
85
|
+
let _defaultPressed_extraInitializers = [];
|
|
86
|
+
let _disabled_decorators;
|
|
87
|
+
let _disabled_initializers = [];
|
|
88
|
+
let _disabled_extraInitializers = [];
|
|
89
|
+
let _value_decorators;
|
|
90
|
+
let _value_initializers = [];
|
|
91
|
+
let _value_extraInitializers = [];
|
|
92
|
+
let _private_internalPressed_decorators;
|
|
93
|
+
let _private_internalPressed_initializers = [];
|
|
94
|
+
let _private_internalPressed_extraInitializers = [];
|
|
95
|
+
let _private_internalPressed_descriptor;
|
|
96
|
+
let __groupCtx_decorators;
|
|
97
|
+
let __groupCtx_initializers = [];
|
|
98
|
+
let __groupCtx_extraInitializers = [];
|
|
99
|
+
return class DuiToggle extends _classSuper {
|
|
100
|
+
static {
|
|
101
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
102
|
+
_pressed_decorators = [property({ type: Boolean })];
|
|
103
|
+
_defaultPressed_decorators = [property({ type: Boolean, attribute: "default-pressed" })];
|
|
104
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
105
|
+
_value_decorators = [property()];
|
|
106
|
+
_private_internalPressed_decorators = [state()];
|
|
107
|
+
__groupCtx_decorators = [consume({ context: toggleGroupContext, subscribe: true }), state()];
|
|
108
|
+
__esDecorate(this, null, _pressed_decorators, { kind: "accessor", name: "pressed", static: false, private: false, access: { has: obj => "pressed" in obj, get: obj => obj.pressed, set: (obj, value) => { obj.pressed = value; } }, metadata: _metadata }, _pressed_initializers, _pressed_extraInitializers);
|
|
109
|
+
__esDecorate(this, null, _defaultPressed_decorators, { kind: "accessor", name: "defaultPressed", static: false, private: false, access: { has: obj => "defaultPressed" in obj, get: obj => obj.defaultPressed, set: (obj, value) => { obj.defaultPressed = value; } }, metadata: _metadata }, _defaultPressed_initializers, _defaultPressed_extraInitializers);
|
|
110
|
+
__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);
|
|
111
|
+
__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);
|
|
112
|
+
__esDecorate(this, _private_internalPressed_descriptor = { get: __setFunctionName(function () { return this.#internalPressed_accessor_storage; }, "#internalPressed", "get"), set: __setFunctionName(function (value) { this.#internalPressed_accessor_storage = value; }, "#internalPressed", "set") }, _private_internalPressed_decorators, { kind: "accessor", name: "#internalPressed", static: false, private: true, access: { has: obj => #internalPressed in obj, get: obj => obj.#internalPressed, set: (obj, value) => { obj.#internalPressed = value; } }, metadata: _metadata }, _private_internalPressed_initializers, _private_internalPressed_extraInitializers);
|
|
113
|
+
__esDecorate(this, null, __groupCtx_decorators, { kind: "accessor", name: "_groupCtx", static: false, private: false, access: { has: obj => "_groupCtx" in obj, get: obj => obj._groupCtx, set: (obj, value) => { obj._groupCtx = value; } }, metadata: _metadata }, __groupCtx_initializers, __groupCtx_extraInitializers);
|
|
114
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
74
115
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
116
|
+
static tagName = "dui-toggle";
|
|
117
|
+
static shadowRootOptions = {
|
|
118
|
+
...LitElement.shadowRootOptions,
|
|
119
|
+
delegatesFocus: true,
|
|
120
|
+
};
|
|
121
|
+
static styles = [base, styles];
|
|
122
|
+
#pressed_accessor_storage = __runInitializers(this, _pressed_initializers, undefined);
|
|
123
|
+
get pressed() { return this.#pressed_accessor_storage; }
|
|
124
|
+
set pressed(value) { this.#pressed_accessor_storage = value; }
|
|
125
|
+
#defaultPressed_accessor_storage = (__runInitializers(this, _pressed_extraInitializers), __runInitializers(this, _defaultPressed_initializers, false));
|
|
126
|
+
get defaultPressed() { return this.#defaultPressed_accessor_storage; }
|
|
127
|
+
set defaultPressed(value) { this.#defaultPressed_accessor_storage = value; }
|
|
128
|
+
#disabled_accessor_storage = (__runInitializers(this, _defaultPressed_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
129
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
130
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
131
|
+
#value_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _value_initializers, undefined));
|
|
132
|
+
get value() { return this.#value_accessor_storage; }
|
|
133
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
134
|
+
#internalPressed_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _private_internalPressed_initializers, false));
|
|
135
|
+
get #internalPressed() { return _private_internalPressed_descriptor.get.call(this); }
|
|
136
|
+
set #internalPressed(value) { return _private_internalPressed_descriptor.set.call(this, value); }
|
|
137
|
+
#_groupCtx_accessor_storage = (__runInitializers(this, _private_internalPressed_extraInitializers), __runInitializers(this, __groupCtx_initializers, void 0));
|
|
138
|
+
get _groupCtx() { return this.#_groupCtx_accessor_storage; }
|
|
139
|
+
set _groupCtx(value) { this.#_groupCtx_accessor_storage = value; }
|
|
140
|
+
get #isPressed() {
|
|
141
|
+
if (this._groupCtx && this.value !== undefined) {
|
|
142
|
+
return this._groupCtx.value.includes(this.value);
|
|
143
|
+
}
|
|
144
|
+
return this.pressed ?? this.#internalPressed;
|
|
84
145
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (this.#isDisabled)
|
|
88
|
-
return;
|
|
89
|
-
if (this._groupCtx && this.value !== undefined) {
|
|
90
|
-
this._groupCtx.toggle(this.value);
|
|
91
|
-
return;
|
|
146
|
+
get #isDisabled() {
|
|
147
|
+
return this.disabled || (this._groupCtx?.disabled ?? false);
|
|
92
148
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
this
|
|
149
|
+
connectedCallback() {
|
|
150
|
+
super.connectedCallback();
|
|
151
|
+
if (this.pressed === undefined && this.defaultPressed) {
|
|
152
|
+
this.#internalPressed = true;
|
|
153
|
+
}
|
|
96
154
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
155
|
+
#handleClick = (__runInitializers(this, __groupCtx_extraInitializers), () => {
|
|
156
|
+
if (this.#isDisabled)
|
|
157
|
+
return;
|
|
158
|
+
if (this._groupCtx && this.value !== undefined) {
|
|
159
|
+
this._groupCtx.toggle(this.value);
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
const newPressed = !this.#isPressed;
|
|
163
|
+
if (this.pressed === undefined) {
|
|
164
|
+
this.#internalPressed = newPressed;
|
|
165
|
+
}
|
|
166
|
+
this.dispatchEvent(pressedChangeEvent({ pressed: newPressed }));
|
|
167
|
+
});
|
|
168
|
+
render() {
|
|
169
|
+
const isPressed = this.#isPressed;
|
|
170
|
+
const isDisabled = this.#isDisabled;
|
|
171
|
+
return html `
|
|
103
172
|
<button
|
|
104
173
|
part="root"
|
|
105
174
|
type="button"
|
|
@@ -113,21 +182,7 @@ export class DuiToggle extends LitElement {
|
|
|
113
182
|
<slot></slot>
|
|
114
183
|
</button>
|
|
115
184
|
`;
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
], DuiToggle.prototype, "pressed", null);
|
|
121
|
-
__decorate([
|
|
122
|
-
property({ type: Boolean, attribute: "default-pressed" })
|
|
123
|
-
], DuiToggle.prototype, "defaultPressed", null);
|
|
124
|
-
__decorate([
|
|
125
|
-
property({ type: Boolean, reflect: true })
|
|
126
|
-
], DuiToggle.prototype, "disabled", null);
|
|
127
|
-
__decorate([
|
|
128
|
-
property()
|
|
129
|
-
], DuiToggle.prototype, "value", null);
|
|
130
|
-
__decorate([
|
|
131
|
-
consume({ context: toggleGroupContext, subscribe: true }),
|
|
132
|
-
state()
|
|
133
|
-
], DuiToggle.prototype, "_groupCtx", null);
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
})();
|
|
188
|
+
export { DuiToggle };
|
package/toolbar/index.d.ts
CHANGED
package/toolbar/index.js
CHANGED
package/toolbar/toolbar.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/toolbar */
|
|
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";
|
|
@@ -40,23 +68,44 @@ const styles = css `
|
|
|
40
68
|
align-items: center;
|
|
41
69
|
}
|
|
42
70
|
`;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
71
|
+
let DuiToolbar = (() => {
|
|
72
|
+
let _classSuper = LitElement;
|
|
73
|
+
let _inset_decorators;
|
|
74
|
+
let _inset_initializers = [];
|
|
75
|
+
let _inset_extraInitializers = [];
|
|
76
|
+
let _hasButtonLeft_decorators;
|
|
77
|
+
let _hasButtonLeft_initializers = [];
|
|
78
|
+
let _hasButtonLeft_extraInitializers = [];
|
|
79
|
+
let _hasButtonRight_decorators;
|
|
80
|
+
let _hasButtonRight_initializers = [];
|
|
81
|
+
let _hasButtonRight_extraInitializers = [];
|
|
82
|
+
return class DuiToolbar extends _classSuper {
|
|
83
|
+
static {
|
|
84
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
85
|
+
_inset_decorators = [property({ type: Boolean, reflect: true })];
|
|
86
|
+
_hasButtonLeft_decorators = [property({ type: Boolean, reflect: true, attribute: "has-button-left" })];
|
|
87
|
+
_hasButtonRight_decorators = [property({ type: Boolean, reflect: true, attribute: "has-button-right" })];
|
|
88
|
+
__esDecorate(this, null, _inset_decorators, { kind: "accessor", name: "inset", static: false, private: false, access: { has: obj => "inset" in obj, get: obj => obj.inset, set: (obj, value) => { obj.inset = value; } }, metadata: _metadata }, _inset_initializers, _inset_extraInitializers);
|
|
89
|
+
__esDecorate(this, null, _hasButtonLeft_decorators, { kind: "accessor", name: "hasButtonLeft", static: false, private: false, access: { has: obj => "hasButtonLeft" in obj, get: obj => obj.hasButtonLeft, set: (obj, value) => { obj.hasButtonLeft = value; } }, metadata: _metadata }, _hasButtonLeft_initializers, _hasButtonLeft_extraInitializers);
|
|
90
|
+
__esDecorate(this, null, _hasButtonRight_decorators, { kind: "accessor", name: "hasButtonRight", static: false, private: false, access: { has: obj => "hasButtonRight" in obj, get: obj => obj.hasButtonRight, set: (obj, value) => { obj.hasButtonRight = value; } }, metadata: _metadata }, _hasButtonRight_initializers, _hasButtonRight_extraInitializers);
|
|
91
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
92
|
+
}
|
|
93
|
+
static tagName = "dui-toolbar";
|
|
94
|
+
static styles = [base, styles];
|
|
95
|
+
#inset_accessor_storage = __runInitializers(this, _inset_initializers, false);
|
|
96
|
+
/** Adds horizontal and vertical padding. */
|
|
97
|
+
get inset() { return this.#inset_accessor_storage; }
|
|
98
|
+
set inset(value) { this.#inset_accessor_storage = value; }
|
|
99
|
+
#hasButtonLeft_accessor_storage = (__runInitializers(this, _inset_extraInitializers), __runInitializers(this, _hasButtonLeft_initializers, false));
|
|
100
|
+
/** Reduces left inset padding when a button is the first item. */
|
|
101
|
+
get hasButtonLeft() { return this.#hasButtonLeft_accessor_storage; }
|
|
102
|
+
set hasButtonLeft(value) { this.#hasButtonLeft_accessor_storage = value; }
|
|
103
|
+
#hasButtonRight_accessor_storage = (__runInitializers(this, _hasButtonLeft_extraInitializers), __runInitializers(this, _hasButtonRight_initializers, false));
|
|
104
|
+
/** Reduces right inset padding when a button is the last item. */
|
|
105
|
+
get hasButtonRight() { return this.#hasButtonRight_accessor_storage; }
|
|
106
|
+
set hasButtonRight(value) { this.#hasButtonRight_accessor_storage = value; }
|
|
107
|
+
render() {
|
|
108
|
+
return html `
|
|
60
109
|
<nav part="root" role="toolbar">
|
|
61
110
|
<div part="left">
|
|
62
111
|
<slot name="left"></slot>
|
|
@@ -69,14 +118,11 @@ export class DuiToolbar extends LitElement {
|
|
|
69
118
|
</div>
|
|
70
119
|
</nav>
|
|
71
120
|
`;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
__decorate([
|
|
81
|
-
property({ type: Boolean, reflect: true, attribute: "has-button-right" })
|
|
82
|
-
], DuiToolbar.prototype, "hasButtonRight", null);
|
|
121
|
+
}
|
|
122
|
+
constructor() {
|
|
123
|
+
super(...arguments);
|
|
124
|
+
__runInitializers(this, _hasButtonRight_extraInitializers);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
})();
|
|
128
|
+
export { DuiToolbar };
|
package/tooltip/index.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { DuiTooltip, openChangeEvent } from "./tooltip.js";
|
|
2
|
+
export { DuiTooltip, openChangeEvent };
|
|
2
3
|
export type { TooltipOpenChangeDetail } from "./tooltip.js";
|
|
3
|
-
|
|
4
|
-
export {
|
|
4
|
+
import { DuiTooltipTrigger } from "./tooltip-trigger.js";
|
|
5
|
+
export { DuiTooltipTrigger };
|
|
6
|
+
import { DuiTooltipPopup } from "./tooltip-popup.js";
|
|
7
|
+
export { DuiTooltipPopup };
|
|
5
8
|
export type { TooltipContext, TooltipSide } from "./tooltip-context.js";
|
|
9
|
+
export declare const tooltipFamily: (typeof DuiTooltip | typeof DuiTooltipTrigger | typeof DuiTooltipPopup)[];
|
package/tooltip/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
|
|
1
|
+
import { DuiTooltip, openChangeEvent } from "./tooltip.js";
|
|
2
|
+
export { DuiTooltip, openChangeEvent };
|
|
3
|
+
import { DuiTooltipTrigger } from "./tooltip-trigger.js";
|
|
4
|
+
export { DuiTooltipTrigger };
|
|
5
|
+
import { DuiTooltipPopup } from "./tooltip-popup.js";
|
|
6
|
+
export { DuiTooltipPopup };
|
|
7
|
+
export const tooltipFamily = [DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup];
|
package/tooltip/tooltip-popup.js
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
|
|
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
|
-
import { property } from "lit/decorators.js";
|
|
41
|
+
import { property, state } from "lit/decorators.js";
|
|
10
42
|
import { ContextConsumer } from "@lit/context";
|
|
11
43
|
import { base } from "@deepfuture/dui-core/base";
|
|
12
44
|
import { tooltipContext } from "./tooltip-context.js";
|
|
@@ -67,37 +99,54 @@ const portalPopupStyles = [
|
|
|
67
99
|
*
|
|
68
100
|
* @slot - Tooltip content.
|
|
69
101
|
*/
|
|
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
|
-
|
|
102
|
+
let DuiTooltipPopup = (() => {
|
|
103
|
+
let _classSuper = LitElement;
|
|
104
|
+
let _showArrow_decorators;
|
|
105
|
+
let _showArrow_initializers = [];
|
|
106
|
+
let _showArrow_extraInitializers = [];
|
|
107
|
+
let _private_side_decorators;
|
|
108
|
+
let _private_side_initializers = [];
|
|
109
|
+
let _private_side_extraInitializers = [];
|
|
110
|
+
let _private_side_descriptor;
|
|
111
|
+
return class DuiTooltipPopup extends _classSuper {
|
|
112
|
+
static {
|
|
113
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
114
|
+
_showArrow_decorators = [property({ type: Boolean, attribute: "show-arrow" })];
|
|
115
|
+
_private_side_decorators = [state()];
|
|
116
|
+
__esDecorate(this, null, _showArrow_decorators, { kind: "accessor", name: "showArrow", static: false, private: false, access: { has: obj => "showArrow" in obj, get: obj => obj.showArrow, set: (obj, value) => { obj.showArrow = value; } }, metadata: _metadata }, _showArrow_initializers, _showArrow_extraInitializers);
|
|
117
|
+
__esDecorate(this, _private_side_descriptor = { get: __setFunctionName(function () { return this.#side_accessor_storage; }, "#side", "get"), set: __setFunctionName(function (value) { this.#side_accessor_storage = value; }, "#side", "set") }, _private_side_decorators, { kind: "accessor", name: "#side", static: false, private: true, access: { has: obj => #side in obj, get: obj => obj.#side, set: (obj, value) => { obj.#side = value; } }, metadata: _metadata }, _private_side_initializers, _private_side_extraInitializers);
|
|
118
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
119
|
+
}
|
|
120
|
+
static tagName = "dui-tooltip-popup";
|
|
121
|
+
static styles = [base, hostStyles];
|
|
122
|
+
#showArrow_accessor_storage = __runInitializers(this, _showArrow_initializers, true);
|
|
123
|
+
/** Whether to show an arrow pointing to the trigger. */
|
|
124
|
+
get showArrow() { return this.#showArrow_accessor_storage; }
|
|
125
|
+
set showArrow(value) { this.#showArrow_accessor_storage = value; }
|
|
126
|
+
#side_accessor_storage = (__runInitializers(this, _showArrow_extraInitializers), __runInitializers(this, _private_side_initializers, "top"));
|
|
127
|
+
get #side() { return _private_side_descriptor.get.call(this); }
|
|
128
|
+
set #side(value) { return _private_side_descriptor.set.call(this, value); }
|
|
129
|
+
#ctx = (__runInitializers(this, _private_side_extraInitializers), new ContextConsumer(this, {
|
|
130
|
+
context: tooltipContext,
|
|
131
|
+
subscribe: true,
|
|
132
|
+
}));
|
|
133
|
+
#wasOpen = false;
|
|
134
|
+
#portal = new FloatingPortalController(this, {
|
|
135
|
+
getAnchor: () => this.#ctx.value?.triggerEl,
|
|
136
|
+
matchWidth: false,
|
|
137
|
+
placement: "top",
|
|
138
|
+
offset: 6,
|
|
139
|
+
styles: portalPopupStyles,
|
|
140
|
+
contentContainer: ".Content",
|
|
141
|
+
onPosition: ({ placement }) => {
|
|
142
|
+
const actualSide = placement.split("-")[0];
|
|
143
|
+
if (actualSide !== this.#side) {
|
|
144
|
+
this.#side = actualSide;
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
renderPopup: (portal) => {
|
|
148
|
+
const popupId = this.#ctx.value?.popupId ?? "";
|
|
149
|
+
return html `
|
|
101
150
|
<div
|
|
102
151
|
class="Popup"
|
|
103
152
|
id="${popupId}"
|
|
@@ -110,28 +159,27 @@ export class DuiTooltipPopup extends LitElement {
|
|
|
110
159
|
${this.showArrow ? renderArrow(this.#side) : ""}
|
|
111
160
|
</div>
|
|
112
161
|
`;
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
162
|
+
},
|
|
163
|
+
});
|
|
164
|
+
updated() {
|
|
165
|
+
const isOpen = this.#ctx.value?.open ?? false;
|
|
166
|
+
if (isOpen && !this.#wasOpen) {
|
|
167
|
+
this.#updatePlacement();
|
|
168
|
+
this.#portal.open();
|
|
169
|
+
}
|
|
170
|
+
else if (!isOpen && this.#wasOpen) {
|
|
171
|
+
this.#portal.close();
|
|
172
|
+
}
|
|
173
|
+
this.#wasOpen = isOpen;
|
|
120
174
|
}
|
|
121
|
-
|
|
122
|
-
this.#
|
|
175
|
+
#updatePlacement() {
|
|
176
|
+
const side = this.#ctx.value?.side ?? "top";
|
|
177
|
+
this.#portal.placement = side;
|
|
178
|
+
this.#portal.offset = this.#ctx.value?.sideOffset ?? 6;
|
|
123
179
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
render() {
|
|
132
|
-
return html `<slot></slot>`;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
__decorate([
|
|
136
|
-
property({ type: Boolean, attribute: "show-arrow" })
|
|
137
|
-
], DuiTooltipPopup.prototype, "showArrow", null);
|
|
180
|
+
render() {
|
|
181
|
+
return html `<slot></slot>`;
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
})();
|
|
185
|
+
export { DuiTooltipPopup };
|