@deepfuture/dui-components 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_deprecated/center/center.js +2 -2
- package/_deprecated/hstack/hstack.js +79 -33
- package/_deprecated/page-inset/page-inset.js +104 -56
- package/_deprecated/vstack/vstack.js +61 -19
- package/accordion/accordion-item.js +217 -147
- package/accordion/accordion.js +214 -149
- package/alert-dialog/alert-dialog-close.js +2 -2
- package/alert-dialog/alert-dialog-popup.js +230 -166
- package/alert-dialog/alert-dialog-trigger.js +2 -2
- package/alert-dialog/alert-dialog.js +128 -73
- package/avatar/avatar.js +175 -115
- package/badge/badge.js +2 -2
- package/breadcrumb/breadcrumb-ellipsis.js +2 -2
- package/breadcrumb/breadcrumb-item.js +2 -2
- package/breadcrumb/breadcrumb-link.js +2 -2
- package/breadcrumb/breadcrumb-page.js +2 -2
- package/breadcrumb/breadcrumb-separator.js +2 -2
- package/breadcrumb/breadcrumb.js +2 -2
- package/button/button.js +109 -65
- package/calendar/calendar.js +368 -290
- package/checkbox/checkbox-group.js +146 -87
- package/checkbox/checkbox.js +232 -167
- package/collapsible/collapsible.js +210 -132
- package/combobox/combobox.js +318 -252
- package/command/command-empty.js +67 -25
- package/command/command-group.js +87 -47
- package/command/command-input.js +84 -44
- package/command/command-item.js +168 -124
- package/command/command-list.js +60 -18
- package/command/command-separator.js +2 -2
- package/command/command-shortcut.js +2 -2
- package/command/command.js +297 -232
- package/data-table/data-table.js +225 -153
- package/dialog/dialog-close.js +2 -2
- package/dialog/dialog-popup.js +247 -181
- package/dialog/dialog-trigger.js +2 -2
- package/dialog/dialog.js +128 -73
- package/dropzone/dropzone.js +310 -249
- package/icon/icon.js +2 -2
- package/input/input.js +204 -143
- package/link/link.js +62 -24
- package/menu/menu-item.js +66 -24
- package/menu/menu.js +189 -136
- package/menubar/menubar.js +142 -91
- package/number-field/number-field.js +277 -204
- package/package.json +2 -2
- package/popover/popover-close.js +2 -2
- package/popover/popover-popup.js +126 -76
- package/popover/popover-trigger.js +2 -2
- package/popover/popover.js +181 -120
- package/portal/portal.js +128 -86
- package/preview-card/preview-card-popup.js +114 -66
- package/preview-card/preview-card-trigger.js +2 -2
- package/preview-card/preview-card.js +211 -142
- package/progress/progress.js +91 -45
- package/radio/radio-group.js +153 -90
- package/radio/radio.js +137 -94
- package/scroll-area/scroll-area.js +382 -283
- package/select/select.js +260 -203
- package/separator/separator.js +60 -18
- package/sidebar/sidebar-content.js +2 -2
- package/sidebar/sidebar-footer.js +2 -2
- package/sidebar/sidebar-group-label.js +2 -2
- package/sidebar/sidebar-group.js +2 -2
- package/sidebar/sidebar-header.js +2 -2
- package/sidebar/sidebar-inset.js +2 -2
- package/sidebar/sidebar-menu-button.js +118 -74
- package/sidebar/sidebar-menu-item.js +2 -2
- package/sidebar/sidebar-menu.js +2 -2
- package/sidebar/sidebar-provider.js +202 -129
- package/sidebar/sidebar-separator.js +2 -2
- package/sidebar/sidebar-trigger.js +2 -2
- package/sidebar/sidebar.js +150 -85
- package/slider/slider.js +217 -159
- package/spinner/spinner.js +70 -28
- package/switch/switch.js +174 -111
- package/tabs/tab.js +89 -47
- package/tabs/tabs-indicator.js +2 -2
- package/tabs/tabs-list.js +92 -54
- package/tabs/tabs-panel.js +90 -44
- package/tabs/tabs.js +130 -71
- package/textarea/textarea.js +153 -95
- package/toggle/toggle-group.js +184 -125
- package/toggle/toggle.js +131 -76
- package/toolbar/toolbar.js +79 -33
- package/tooltip/tooltip-popup.js +108 -60
- package/tooltip/tooltip-trigger.js +93 -55
- package/tooltip/tooltip.js +225 -154
- package/trunc/trunc.js +78 -34
|
@@ -25,8 +25,8 @@ const styles = css `
|
|
|
25
25
|
* @slot - Label text.
|
|
26
26
|
*/
|
|
27
27
|
export class DuiSidebarGroupLabel extends LitElement {
|
|
28
|
-
static
|
|
29
|
-
static
|
|
28
|
+
static tagName = "dui-sidebar-group-label";
|
|
29
|
+
static styles = [base, styles];
|
|
30
30
|
#ctx = new ContextConsumer(this, {
|
|
31
31
|
context: sidebarContext,
|
|
32
32
|
subscribe: true,
|
package/sidebar/sidebar-group.js
CHANGED
|
@@ -18,8 +18,8 @@ const styles = css `
|
|
|
18
18
|
* @slot - Default slot for group content (menus, items, etc.).
|
|
19
19
|
*/
|
|
20
20
|
export class DuiSidebarGroup extends LitElement {
|
|
21
|
-
static
|
|
22
|
-
static
|
|
21
|
+
static tagName = "dui-sidebar-group";
|
|
22
|
+
static styles = [base, styles];
|
|
23
23
|
render() {
|
|
24
24
|
return html `
|
|
25
25
|
<slot name="label"></slot>
|
|
@@ -13,8 +13,8 @@ const styles = css `
|
|
|
13
13
|
* @slot - Default slot for header content (logo, title, etc.).
|
|
14
14
|
*/
|
|
15
15
|
export class DuiSidebarHeader extends LitElement {
|
|
16
|
-
static
|
|
17
|
-
static
|
|
16
|
+
static tagName = "dui-sidebar-header";
|
|
17
|
+
static styles = [base, styles];
|
|
18
18
|
render() {
|
|
19
19
|
return html `<slot></slot>`;
|
|
20
20
|
}
|
package/sidebar/sidebar-inset.js
CHANGED
|
@@ -21,8 +21,8 @@ const styles = css `
|
|
|
21
21
|
* @slot - Default slot for main page content.
|
|
22
22
|
*/
|
|
23
23
|
export class DuiSidebarInset extends LitElement {
|
|
24
|
-
static
|
|
25
|
-
static
|
|
24
|
+
static tagName = "dui-sidebar-inset";
|
|
25
|
+
static styles = [base, styles];
|
|
26
26
|
render() {
|
|
27
27
|
return html `<slot></slot>`;
|
|
28
28
|
}
|
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
|
|
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";
|
|
@@ -81,50 +109,76 @@ const styles = css `
|
|
|
81
109
|
* @slot suffix - Suffix slot, shown after the label.
|
|
82
110
|
* @fires spa-navigate - Fired on normal link clicks. Detail: { href: string }
|
|
83
111
|
*/
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
#onLinkClick = (event) => {
|
|
112
|
-
if (this.disabled) {
|
|
113
|
-
event.preventDefault();
|
|
114
|
-
return;
|
|
112
|
+
let DuiSidebarMenuButton = (() => {
|
|
113
|
+
let _classSuper = LitElement;
|
|
114
|
+
let _active_decorators;
|
|
115
|
+
let _active_initializers = [];
|
|
116
|
+
let _active_extraInitializers = [];
|
|
117
|
+
let _disabled_decorators;
|
|
118
|
+
let _disabled_initializers = [];
|
|
119
|
+
let _disabled_extraInitializers = [];
|
|
120
|
+
let _tooltip_decorators;
|
|
121
|
+
let _tooltip_initializers = [];
|
|
122
|
+
let _tooltip_extraInitializers = [];
|
|
123
|
+
let _href_decorators;
|
|
124
|
+
let _href_initializers = [];
|
|
125
|
+
let _href_extraInitializers = [];
|
|
126
|
+
return class DuiSidebarMenuButton extends _classSuper {
|
|
127
|
+
static {
|
|
128
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
129
|
+
_active_decorators = [property({ type: Boolean, reflect: true })];
|
|
130
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
131
|
+
_tooltip_decorators = [property()];
|
|
132
|
+
_href_decorators = [property()];
|
|
133
|
+
__esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
|
|
134
|
+
__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);
|
|
135
|
+
__esDecorate(this, null, _tooltip_decorators, { kind: "accessor", name: "tooltip", static: false, private: false, access: { has: obj => "tooltip" in obj, get: obj => obj.tooltip, set: (obj, value) => { obj.tooltip = value; } }, metadata: _metadata }, _tooltip_initializers, _tooltip_extraInitializers);
|
|
136
|
+
__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);
|
|
137
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
115
138
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
139
|
+
static tagName = "dui-sidebar-menu-button";
|
|
140
|
+
static styles = [base, styles];
|
|
141
|
+
#active_accessor_storage = __runInitializers(this, _active_initializers, false);
|
|
142
|
+
/** Whether the button is in active/selected state. */
|
|
143
|
+
get active() { return this.#active_accessor_storage; }
|
|
144
|
+
set active(value) { this.#active_accessor_storage = value; }
|
|
145
|
+
#disabled_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
146
|
+
/** Whether the button is disabled. */
|
|
147
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
148
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
149
|
+
#tooltip_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _tooltip_initializers, ""));
|
|
150
|
+
/** Tooltip text shown when sidebar is icon-collapsed. */
|
|
151
|
+
get tooltip() { return this.#tooltip_accessor_storage; }
|
|
152
|
+
set tooltip(value) { this.#tooltip_accessor_storage = value; }
|
|
153
|
+
#href_accessor_storage = (__runInitializers(this, _tooltip_extraInitializers), __runInitializers(this, _href_initializers, undefined));
|
|
154
|
+
/** When set, renders as an anchor tag instead of a button. */
|
|
155
|
+
get href() { return this.#href_accessor_storage; }
|
|
156
|
+
set href(value) { this.#href_accessor_storage = value; }
|
|
157
|
+
#ctx = (__runInitializers(this, _href_extraInitializers), new ContextConsumer(this, {
|
|
158
|
+
context: sidebarContext,
|
|
159
|
+
subscribe: true,
|
|
160
|
+
}));
|
|
161
|
+
get #isIconCollapsed() {
|
|
162
|
+
const ctx = this.#ctx.value;
|
|
163
|
+
return ctx?.collapsible === "icon" && ctx?.state === "collapsed";
|
|
124
164
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
165
|
+
#onLinkClick = (event) => {
|
|
166
|
+
if (this.disabled) {
|
|
167
|
+
event.preventDefault();
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
if (this.href &&
|
|
171
|
+
!(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
this.dispatchEvent(new CustomEvent("spa-navigate", {
|
|
174
|
+
detail: { href: this.href },
|
|
175
|
+
bubbles: true,
|
|
176
|
+
composed: true,
|
|
177
|
+
}));
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
#renderButton() {
|
|
181
|
+
return html `
|
|
128
182
|
<button
|
|
129
183
|
class="Button"
|
|
130
184
|
?disabled=${this.disabled}
|
|
@@ -135,9 +189,9 @@ export class DuiSidebarMenuButton extends LitElement {
|
|
|
135
189
|
<span class="Suffix"><slot name="suffix"></slot></span>
|
|
136
190
|
</button>
|
|
137
191
|
`;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
192
|
+
}
|
|
193
|
+
#renderLink() {
|
|
194
|
+
return html `
|
|
141
195
|
<a
|
|
142
196
|
class="Button"
|
|
143
197
|
href=${this.href ?? nothing}
|
|
@@ -150,10 +204,10 @@ export class DuiSidebarMenuButton extends LitElement {
|
|
|
150
204
|
<span class="Suffix"><slot name="suffix"></slot></span>
|
|
151
205
|
</a>
|
|
152
206
|
`;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
207
|
+
}
|
|
208
|
+
#renderContent() {
|
|
209
|
+
const iconCollapsed = this.#isIconCollapsed;
|
|
210
|
+
return html `
|
|
157
211
|
<div
|
|
158
212
|
class="Row"
|
|
159
213
|
?data-icon-collapsed=${iconCollapsed}
|
|
@@ -162,11 +216,11 @@ export class DuiSidebarMenuButton extends LitElement {
|
|
|
162
216
|
${this.href !== undefined ? this.#renderLink() : this.#renderButton()}
|
|
163
217
|
</div>
|
|
164
218
|
`;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
219
|
+
}
|
|
220
|
+
render() {
|
|
221
|
+
const iconCollapsed = this.#isIconCollapsed;
|
|
222
|
+
if (iconCollapsed && this.tooltip) {
|
|
223
|
+
return html `
|
|
170
224
|
<dui-tooltip>
|
|
171
225
|
<dui-tooltip-trigger>
|
|
172
226
|
${this.#renderContent()}
|
|
@@ -176,19 +230,9 @@ export class DuiSidebarMenuButton extends LitElement {
|
|
|
176
230
|
</dui-tooltip-popup>
|
|
177
231
|
</dui-tooltip>
|
|
178
232
|
`;
|
|
233
|
+
}
|
|
234
|
+
return this.#renderContent();
|
|
179
235
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
__decorate([
|
|
184
|
-
property({ type: Boolean, reflect: true })
|
|
185
|
-
], DuiSidebarMenuButton.prototype, "active", null);
|
|
186
|
-
__decorate([
|
|
187
|
-
property({ type: Boolean, reflect: true })
|
|
188
|
-
], DuiSidebarMenuButton.prototype, "disabled", null);
|
|
189
|
-
__decorate([
|
|
190
|
-
property()
|
|
191
|
-
], DuiSidebarMenuButton.prototype, "tooltip", null);
|
|
192
|
-
__decorate([
|
|
193
|
-
property()
|
|
194
|
-
], DuiSidebarMenuButton.prototype, "href", null);
|
|
236
|
+
};
|
|
237
|
+
})();
|
|
238
|
+
export { DuiSidebarMenuButton };
|
|
@@ -12,8 +12,8 @@ const styles = css `
|
|
|
12
12
|
* @slot - Default slot for a `<dui-sidebar-menu-button>` or other content.
|
|
13
13
|
*/
|
|
14
14
|
export class DuiSidebarMenuItem extends LitElement {
|
|
15
|
-
static
|
|
16
|
-
static
|
|
15
|
+
static tagName = "dui-sidebar-menu-item";
|
|
16
|
+
static styles = [base, styles];
|
|
17
17
|
render() {
|
|
18
18
|
return html `<slot></slot>`;
|
|
19
19
|
}
|
package/sidebar/sidebar-menu.js
CHANGED
|
@@ -18,8 +18,8 @@ const styles = css `
|
|
|
18
18
|
* @slot - Default slot for `<dui-sidebar-menu-item>` elements.
|
|
19
19
|
*/
|
|
20
20
|
export class DuiSidebarMenu extends LitElement {
|
|
21
|
-
static
|
|
22
|
-
static
|
|
21
|
+
static tagName = "dui-sidebar-menu";
|
|
22
|
+
static styles = [base, styles];
|
|
23
23
|
render() {
|
|
24
24
|
return html `
|
|
25
25
|
<ul class="Menu" role="list">
|