@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/dropzone/dropzone.js
CHANGED
|
@@ -1,13 +1,44 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/dropzone */
|
|
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
|
-
var _a;
|
|
9
40
|
import { css, html, LitElement } from "lit";
|
|
10
|
-
import { property } from "lit/decorators.js";
|
|
41
|
+
import { property, state } from "lit/decorators.js";
|
|
11
42
|
import { base } from "@deepfuture/dui-core/base";
|
|
12
43
|
import { customEvent } from "@deepfuture/dui-core/event";
|
|
13
44
|
// Event Factories
|
|
@@ -67,240 +98,293 @@ const styles = css `
|
|
|
67
98
|
* @fires dragleave - File dragged away from the dropzone.
|
|
68
99
|
* @fires dropzone-error - Internal error (e.g. file dialog failure).
|
|
69
100
|
*/
|
|
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
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
this
|
|
122
|
-
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
/** Opens the native file dialog programmatically. */
|
|
127
|
-
openFileDialog() {
|
|
128
|
-
if (this.disabled)
|
|
129
|
-
return;
|
|
130
|
-
const input = this.shadowRoot?.querySelector('input[type="file"]');
|
|
131
|
-
if (!input)
|
|
132
|
-
return;
|
|
133
|
-
try {
|
|
134
|
-
input.click();
|
|
135
|
-
}
|
|
136
|
-
catch (error) {
|
|
137
|
-
this.dispatchEvent(dropzoneErrorEvent({
|
|
138
|
-
error,
|
|
139
|
-
code: _a.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,
|
|
140
|
-
}));
|
|
101
|
+
let DuiDropzone = (() => {
|
|
102
|
+
var _a;
|
|
103
|
+
let _classSuper = LitElement;
|
|
104
|
+
let _accept_decorators;
|
|
105
|
+
let _accept_initializers = [];
|
|
106
|
+
let _accept_extraInitializers = [];
|
|
107
|
+
let _multiple_decorators;
|
|
108
|
+
let _multiple_initializers = [];
|
|
109
|
+
let _multiple_extraInitializers = [];
|
|
110
|
+
let _disabled_decorators;
|
|
111
|
+
let _disabled_initializers = [];
|
|
112
|
+
let _disabled_extraInitializers = [];
|
|
113
|
+
let _maxFiles_decorators;
|
|
114
|
+
let _maxFiles_initializers = [];
|
|
115
|
+
let _maxFiles_extraInitializers = [];
|
|
116
|
+
let _maxSize_decorators;
|
|
117
|
+
let _maxSize_initializers = [];
|
|
118
|
+
let _maxSize_extraInitializers = [];
|
|
119
|
+
let _minSize_decorators;
|
|
120
|
+
let _minSize_initializers = [];
|
|
121
|
+
let _minSize_extraInitializers = [];
|
|
122
|
+
let _autoFocus_decorators;
|
|
123
|
+
let _autoFocus_initializers = [];
|
|
124
|
+
let _autoFocus_extraInitializers = [];
|
|
125
|
+
let _noStyle_decorators;
|
|
126
|
+
let _noStyle_initializers = [];
|
|
127
|
+
let _noStyle_extraInitializers = [];
|
|
128
|
+
let _private_isDragOver_decorators;
|
|
129
|
+
let _private_isDragOver_initializers = [];
|
|
130
|
+
let _private_isDragOver_extraInitializers = [];
|
|
131
|
+
let _private_isDragOver_descriptor;
|
|
132
|
+
return class DuiDropzone extends _classSuper {
|
|
133
|
+
static {
|
|
134
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
135
|
+
_accept_decorators = [property({ type: String, reflect: true })];
|
|
136
|
+
_multiple_decorators = [property({ type: Boolean, reflect: true })];
|
|
137
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
138
|
+
_maxFiles_decorators = [property({ type: Number, reflect: true, attribute: "max-files" })];
|
|
139
|
+
_maxSize_decorators = [property({ type: Number, reflect: true, attribute: "max-size" })];
|
|
140
|
+
_minSize_decorators = [property({ type: Number, reflect: true, attribute: "min-size" })];
|
|
141
|
+
_autoFocus_decorators = [property({ type: Boolean, reflect: true, attribute: "auto-focus" })];
|
|
142
|
+
_noStyle_decorators = [property({ type: Boolean, reflect: true, attribute: "no-style" })];
|
|
143
|
+
_private_isDragOver_decorators = [state()];
|
|
144
|
+
__esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
|
|
145
|
+
__esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
|
|
146
|
+
__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);
|
|
147
|
+
__esDecorate(this, null, _maxFiles_decorators, { kind: "accessor", name: "maxFiles", static: false, private: false, access: { has: obj => "maxFiles" in obj, get: obj => obj.maxFiles, set: (obj, value) => { obj.maxFiles = value; } }, metadata: _metadata }, _maxFiles_initializers, _maxFiles_extraInitializers);
|
|
148
|
+
__esDecorate(this, null, _maxSize_decorators, { kind: "accessor", name: "maxSize", static: false, private: false, access: { has: obj => "maxSize" in obj, get: obj => obj.maxSize, set: (obj, value) => { obj.maxSize = value; } }, metadata: _metadata }, _maxSize_initializers, _maxSize_extraInitializers);
|
|
149
|
+
__esDecorate(this, null, _minSize_decorators, { kind: "accessor", name: "minSize", static: false, private: false, access: { has: obj => "minSize" in obj, get: obj => obj.minSize, set: (obj, value) => { obj.minSize = value; } }, metadata: _metadata }, _minSize_initializers, _minSize_extraInitializers);
|
|
150
|
+
__esDecorate(this, null, _autoFocus_decorators, { kind: "accessor", name: "autoFocus", static: false, private: false, access: { has: obj => "autoFocus" in obj, get: obj => obj.autoFocus, set: (obj, value) => { obj.autoFocus = value; } }, metadata: _metadata }, _autoFocus_initializers, _autoFocus_extraInitializers);
|
|
151
|
+
__esDecorate(this, null, _noStyle_decorators, { kind: "accessor", name: "noStyle", static: false, private: false, access: { has: obj => "noStyle" in obj, get: obj => obj.noStyle, set: (obj, value) => { obj.noStyle = value; } }, metadata: _metadata }, _noStyle_initializers, _noStyle_extraInitializers);
|
|
152
|
+
__esDecorate(this, _private_isDragOver_descriptor = { get: __setFunctionName(function () { return this.#isDragOver_accessor_storage; }, "#isDragOver", "get"), set: __setFunctionName(function (value) { this.#isDragOver_accessor_storage = value; }, "#isDragOver", "set") }, _private_isDragOver_decorators, { kind: "accessor", name: "#isDragOver", static: false, private: true, access: { has: obj => #isDragOver in obj, get: obj => obj.#isDragOver, set: (obj, value) => { obj.#isDragOver = value; } }, metadata: _metadata }, _private_isDragOver_initializers, _private_isDragOver_extraInitializers);
|
|
153
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
141
154
|
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
155
|
+
static tagName = "dui-dropzone";
|
|
156
|
+
static styles = [base, styles];
|
|
157
|
+
static ERROR_CODES = {
|
|
158
|
+
FILE_DIALOG_OPEN_FAILED: "FILE_DIALOG_OPEN_FAILED",
|
|
159
|
+
FILE_PROCESSING_FAILED: "FILE_PROCESSING_FAILED",
|
|
160
|
+
};
|
|
161
|
+
static REJECTION_CODES = {
|
|
162
|
+
TOO_MANY_FILES: "TOO_MANY_FILES",
|
|
163
|
+
FILE_TOO_LARGE: "FILE_TOO_LARGE",
|
|
164
|
+
FILE_TOO_SMALL: "FILE_TOO_SMALL",
|
|
165
|
+
FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
|
|
166
|
+
};
|
|
167
|
+
#accept_accessor_storage = __runInitializers(this, _accept_initializers, void 0);
|
|
168
|
+
/** Accepted file types (e.g. "image/*,.pdf"). */
|
|
169
|
+
get accept() { return this.#accept_accessor_storage; }
|
|
170
|
+
set accept(value) { this.#accept_accessor_storage = value; }
|
|
171
|
+
#multiple_accessor_storage = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _multiple_initializers, false));
|
|
172
|
+
/** Allow multiple files. */
|
|
173
|
+
get multiple() { return this.#multiple_accessor_storage; }
|
|
174
|
+
set multiple(value) { this.#multiple_accessor_storage = value; }
|
|
175
|
+
#disabled_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
176
|
+
/** Disable the dropzone. */
|
|
177
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
178
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
179
|
+
#maxFiles_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _maxFiles_initializers, Infinity));
|
|
180
|
+
/** Maximum number of files allowed. */
|
|
181
|
+
get maxFiles() { return this.#maxFiles_accessor_storage; }
|
|
182
|
+
set maxFiles(value) { this.#maxFiles_accessor_storage = value; }
|
|
183
|
+
#maxSize_accessor_storage = (__runInitializers(this, _maxFiles_extraInitializers), __runInitializers(this, _maxSize_initializers, Infinity));
|
|
184
|
+
/** Maximum file size in bytes. */
|
|
185
|
+
get maxSize() { return this.#maxSize_accessor_storage; }
|
|
186
|
+
set maxSize(value) { this.#maxSize_accessor_storage = value; }
|
|
187
|
+
#minSize_accessor_storage = (__runInitializers(this, _maxSize_extraInitializers), __runInitializers(this, _minSize_initializers, 0));
|
|
188
|
+
/** Minimum file size in bytes. */
|
|
189
|
+
get minSize() { return this.#minSize_accessor_storage; }
|
|
190
|
+
set minSize(value) { this.#minSize_accessor_storage = value; }
|
|
191
|
+
#autoFocus_accessor_storage = (__runInitializers(this, _minSize_extraInitializers), __runInitializers(this, _autoFocus_initializers, false));
|
|
192
|
+
/** Auto-focus the dropzone on mount. */
|
|
193
|
+
get autoFocus() { return this.#autoFocus_accessor_storage; }
|
|
194
|
+
set autoFocus(value) { this.#autoFocus_accessor_storage = value; }
|
|
195
|
+
#noStyle_accessor_storage = (__runInitializers(this, _autoFocus_extraInitializers), __runInitializers(this, _noStyle_initializers, false));
|
|
196
|
+
/** Disable default dropzone styling. */
|
|
197
|
+
get noStyle() { return this.#noStyle_accessor_storage; }
|
|
198
|
+
set noStyle(value) { this.#noStyle_accessor_storage = value; }
|
|
199
|
+
#isDragOver_accessor_storage = (__runInitializers(this, _noStyle_extraInitializers), __runInitializers(this, _private_isDragOver_initializers, false));
|
|
200
|
+
get #isDragOver() { return _private_isDragOver_descriptor.get.call(this); }
|
|
201
|
+
set #isDragOver(value) { return _private_isDragOver_descriptor.set.call(this, value); }
|
|
202
|
+
connectedCallback() {
|
|
203
|
+
super.connectedCallback();
|
|
204
|
+
if (this.autoFocus && !this.disabled) {
|
|
205
|
+
this.updateComplete.then(() => {
|
|
206
|
+
this.shadowRoot?.querySelector("[part='root']")?.focus();
|
|
207
|
+
});
|
|
208
|
+
}
|
|
178
209
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
210
|
+
/** Opens the native file dialog programmatically. */
|
|
211
|
+
openFileDialog() {
|
|
212
|
+
if (this.disabled)
|
|
213
|
+
return;
|
|
214
|
+
const input = this.shadowRoot?.querySelector('input[type="file"]');
|
|
215
|
+
if (!input)
|
|
216
|
+
return;
|
|
217
|
+
try {
|
|
218
|
+
input.click();
|
|
219
|
+
}
|
|
220
|
+
catch (error) {
|
|
221
|
+
this.dispatchEvent(dropzoneErrorEvent({
|
|
222
|
+
error,
|
|
223
|
+
code: DuiDropzone.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,
|
|
224
|
+
}));
|
|
225
|
+
}
|
|
184
226
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
227
|
+
#handleDragEnter = (__runInitializers(this, _private_isDragOver_extraInitializers), (e) => {
|
|
228
|
+
e.preventDefault();
|
|
229
|
+
e.stopPropagation();
|
|
230
|
+
if (this.disabled)
|
|
231
|
+
return;
|
|
232
|
+
this.#isDragOver = true;
|
|
233
|
+
this.dispatchEvent(dropzoneDragEnterEvent());
|
|
234
|
+
});
|
|
235
|
+
#handleDragOver = (e) => {
|
|
195
236
|
e.preventDefault();
|
|
237
|
+
e.stopPropagation();
|
|
238
|
+
if (this.disabled)
|
|
239
|
+
return;
|
|
240
|
+
if (e.dataTransfer) {
|
|
241
|
+
e.dataTransfer.dropEffect = "copy";
|
|
242
|
+
}
|
|
243
|
+
this.dispatchEvent(dropzoneDragOverEvent());
|
|
244
|
+
};
|
|
245
|
+
#handleDragLeave = (e) => {
|
|
246
|
+
e.preventDefault();
|
|
247
|
+
e.stopPropagation();
|
|
248
|
+
if (this.disabled)
|
|
249
|
+
return;
|
|
250
|
+
this.#isDragOver = false;
|
|
251
|
+
this.dispatchEvent(dropzoneDragLeaveEvent());
|
|
252
|
+
};
|
|
253
|
+
#handleDrop = (e) => {
|
|
254
|
+
e.preventDefault();
|
|
255
|
+
e.stopPropagation();
|
|
256
|
+
if (this.disabled)
|
|
257
|
+
return;
|
|
258
|
+
this.#isDragOver = false;
|
|
259
|
+
try {
|
|
260
|
+
const files = Array.from(e.dataTransfer?.files ?? []);
|
|
261
|
+
this.#processFiles(files);
|
|
262
|
+
}
|
|
263
|
+
catch (error) {
|
|
264
|
+
this.dispatchEvent(dropzoneErrorEvent({
|
|
265
|
+
error,
|
|
266
|
+
code: DuiDropzone.ERROR_CODES.FILE_PROCESSING_FAILED,
|
|
267
|
+
}));
|
|
268
|
+
}
|
|
269
|
+
};
|
|
270
|
+
#handleClick = () => {
|
|
271
|
+
if (this.disabled)
|
|
272
|
+
return;
|
|
196
273
|
this.openFileDialog();
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
try {
|
|
205
|
-
this.#processFiles(files);
|
|
206
|
-
}
|
|
207
|
-
catch (error) {
|
|
208
|
-
this.dispatchEvent(dropzoneErrorEvent({
|
|
209
|
-
error,
|
|
210
|
-
code: _a.ERROR_CODES.FILE_PROCESSING_FAILED,
|
|
211
|
-
}));
|
|
212
|
-
}
|
|
213
|
-
finally {
|
|
214
|
-
input.value = "";
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
#processFiles(files) {
|
|
218
|
-
const { acceptedFiles, rejectedFiles } = this.#validateFiles(files);
|
|
219
|
-
this.dispatchEvent(dropzoneDropEvent({ acceptedFiles, rejectedFiles }));
|
|
220
|
-
if (acceptedFiles.length > 0) {
|
|
221
|
-
this.dispatchEvent(dropAcceptedEvent({ acceptedFiles }));
|
|
222
|
-
}
|
|
223
|
-
if (rejectedFiles.length > 0) {
|
|
224
|
-
this.dispatchEvent(dropRejectedEvent({ rejectedFiles }));
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
#validateFiles(files) {
|
|
228
|
-
const acceptedFiles = [];
|
|
229
|
-
const rejectedFiles = [];
|
|
230
|
-
const maxAllowed = this.multiple ? this.maxFiles : 1;
|
|
231
|
-
if (files.length > maxAllowed) {
|
|
232
|
-
for (const file of files) {
|
|
233
|
-
rejectedFiles.push({
|
|
234
|
-
file,
|
|
235
|
-
errors: [
|
|
236
|
-
{
|
|
237
|
-
code: _a.REJECTION_CODES.TOO_MANY_FILES,
|
|
238
|
-
message: this.multiple
|
|
239
|
-
? `Too many files. Maximum allowed is ${this.maxFiles}.`
|
|
240
|
-
: "Multiple files not allowed.",
|
|
241
|
-
},
|
|
242
|
-
],
|
|
243
|
-
});
|
|
274
|
+
};
|
|
275
|
+
#handleKeyDown = (e) => {
|
|
276
|
+
if (this.disabled)
|
|
277
|
+
return;
|
|
278
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
279
|
+
e.preventDefault();
|
|
280
|
+
this.openFileDialog();
|
|
244
281
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
});
|
|
282
|
+
};
|
|
283
|
+
#handleInputChange = (e) => {
|
|
284
|
+
if (this.disabled)
|
|
285
|
+
return;
|
|
286
|
+
const input = e.target;
|
|
287
|
+
const files = Array.from(input.files ?? []);
|
|
288
|
+
try {
|
|
289
|
+
this.#processFiles(files);
|
|
254
290
|
}
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
});
|
|
291
|
+
catch (error) {
|
|
292
|
+
this.dispatchEvent(dropzoneErrorEvent({
|
|
293
|
+
error,
|
|
294
|
+
code: DuiDropzone.ERROR_CODES.FILE_PROCESSING_FAILED,
|
|
295
|
+
}));
|
|
260
296
|
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
code: _a.REJECTION_CODES.FILE_INVALID_TYPE,
|
|
264
|
-
message: `File type not accepted. Allowed types: ${this.accept}`,
|
|
265
|
-
});
|
|
297
|
+
finally {
|
|
298
|
+
input.value = "";
|
|
266
299
|
}
|
|
267
|
-
|
|
268
|
-
|
|
300
|
+
};
|
|
301
|
+
#processFiles(files) {
|
|
302
|
+
const { acceptedFiles, rejectedFiles } = this.#validateFiles(files);
|
|
303
|
+
this.dispatchEvent(dropzoneDropEvent({ acceptedFiles, rejectedFiles }));
|
|
304
|
+
if (acceptedFiles.length > 0) {
|
|
305
|
+
this.dispatchEvent(dropAcceptedEvent({ acceptedFiles }));
|
|
269
306
|
}
|
|
270
|
-
|
|
271
|
-
|
|
307
|
+
if (rejectedFiles.length > 0) {
|
|
308
|
+
this.dispatchEvent(dropRejectedEvent({ rejectedFiles }));
|
|
272
309
|
}
|
|
273
310
|
}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
311
|
+
#validateFiles(files) {
|
|
312
|
+
const acceptedFiles = [];
|
|
313
|
+
const rejectedFiles = [];
|
|
314
|
+
const maxAllowed = this.multiple ? this.maxFiles : 1;
|
|
315
|
+
if (files.length > maxAllowed) {
|
|
316
|
+
for (const file of files) {
|
|
317
|
+
rejectedFiles.push({
|
|
318
|
+
file,
|
|
319
|
+
errors: [
|
|
320
|
+
{
|
|
321
|
+
code: DuiDropzone.REJECTION_CODES.TOO_MANY_FILES,
|
|
322
|
+
message: this.multiple
|
|
323
|
+
? `Too many files. Maximum allowed is ${this.maxFiles}.`
|
|
324
|
+
: "Multiple files not allowed.",
|
|
325
|
+
},
|
|
326
|
+
],
|
|
327
|
+
});
|
|
286
328
|
}
|
|
329
|
+
return { acceptedFiles, rejectedFiles };
|
|
287
330
|
}
|
|
288
|
-
|
|
289
|
-
const
|
|
290
|
-
if (file.
|
|
291
|
-
|
|
331
|
+
for (const file of files) {
|
|
332
|
+
const errors = [];
|
|
333
|
+
if (file.size > this.maxSize) {
|
|
334
|
+
errors.push({
|
|
335
|
+
code: DuiDropzone.REJECTION_CODES.FILE_TOO_LARGE,
|
|
336
|
+
message: `File is too large. Maximum size is ${this.maxSize} bytes.`,
|
|
337
|
+
});
|
|
338
|
+
}
|
|
339
|
+
if (file.size < this.minSize) {
|
|
340
|
+
errors.push({
|
|
341
|
+
code: DuiDropzone.REJECTION_CODES.FILE_TOO_SMALL,
|
|
342
|
+
message: `File is too small. Minimum size is ${this.minSize} bytes.`,
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
if (this.accept && !this.#isValidFileType(file)) {
|
|
346
|
+
errors.push({
|
|
347
|
+
code: DuiDropzone.REJECTION_CODES.FILE_INVALID_TYPE,
|
|
348
|
+
message: `File type not accepted. Allowed types: ${this.accept}`,
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
if (errors.length > 0) {
|
|
352
|
+
rejectedFiles.push({ file, errors });
|
|
353
|
+
}
|
|
354
|
+
else {
|
|
355
|
+
acceptedFiles.push(file);
|
|
292
356
|
}
|
|
293
357
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
358
|
+
return { acceptedFiles, rejectedFiles };
|
|
359
|
+
}
|
|
360
|
+
#isValidFileType(file) {
|
|
361
|
+
if (!this.accept)
|
|
362
|
+
return true;
|
|
363
|
+
const acceptedTypes = this.accept
|
|
364
|
+
.split(",")
|
|
365
|
+
.map((type) => type.trim().toLowerCase());
|
|
366
|
+
for (const acceptedType of acceptedTypes) {
|
|
367
|
+
if (acceptedType.startsWith(".")) {
|
|
368
|
+
if (file.name.toLowerCase().endsWith(acceptedType)) {
|
|
369
|
+
return true;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
else if (acceptedType.endsWith("/*")) {
|
|
373
|
+
const baseType = acceptedType.slice(0, -2);
|
|
374
|
+
if (file.type.toLowerCase().startsWith(baseType)) {
|
|
375
|
+
return true;
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
else {
|
|
379
|
+
if (file.type.toLowerCase() === acceptedType) {
|
|
380
|
+
return true;
|
|
381
|
+
}
|
|
297
382
|
}
|
|
298
383
|
}
|
|
384
|
+
return false;
|
|
299
385
|
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
render() {
|
|
303
|
-
return html `
|
|
386
|
+
render() {
|
|
387
|
+
return html `
|
|
304
388
|
<div
|
|
305
389
|
part="root"
|
|
306
390
|
tabindex="${this.disabled ? -1 : 0}"
|
|
@@ -327,30 +411,7 @@ export class DuiDropzone extends LitElement {
|
|
|
327
411
|
hidden
|
|
328
412
|
/>
|
|
329
413
|
`;
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
property({ type: String, reflect: true })
|
|
335
|
-
], DuiDropzone.prototype, "accept", null);
|
|
336
|
-
__decorate([
|
|
337
|
-
property({ type: Boolean, reflect: true })
|
|
338
|
-
], DuiDropzone.prototype, "multiple", null);
|
|
339
|
-
__decorate([
|
|
340
|
-
property({ type: Boolean, reflect: true })
|
|
341
|
-
], DuiDropzone.prototype, "disabled", null);
|
|
342
|
-
__decorate([
|
|
343
|
-
property({ type: Number, reflect: true, attribute: "max-files" })
|
|
344
|
-
], DuiDropzone.prototype, "maxFiles", null);
|
|
345
|
-
__decorate([
|
|
346
|
-
property({ type: Number, reflect: true, attribute: "max-size" })
|
|
347
|
-
], DuiDropzone.prototype, "maxSize", null);
|
|
348
|
-
__decorate([
|
|
349
|
-
property({ type: Number, reflect: true, attribute: "min-size" })
|
|
350
|
-
], DuiDropzone.prototype, "minSize", null);
|
|
351
|
-
__decorate([
|
|
352
|
-
property({ type: Boolean, reflect: true, attribute: "auto-focus" })
|
|
353
|
-
], DuiDropzone.prototype, "autoFocus", null);
|
|
354
|
-
__decorate([
|
|
355
|
-
property({ type: Boolean, reflect: true, attribute: "no-style" })
|
|
356
|
-
], DuiDropzone.prototype, "noStyle", null);
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
})();
|
|
417
|
+
export { DuiDropzone };
|
package/dropzone/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent } from "./dropzone.js";
|
|
2
|
+
export { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent };
|
|
2
3
|
export type { DropzoneErrorCode, DropzoneRejectionCode, FileRejectionError, RejectedFile, DropzoneDropDetail, DropzoneAcceptedDetail, DropzoneRejectedDetail, DropzoneErrorDetail, } from "./dropzone.js";
|
|
4
|
+
export declare const dropzoneFamily: (typeof DuiDropzone)[];
|
package/dropzone/index.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent } from "./dropzone.js";
|
|
2
|
+
export { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent };
|
|
3
|
+
export const dropzoneFamily = [DuiDropzone];
|
package/icon/icon.js
CHANGED
|
@@ -26,8 +26,8 @@ const styles = css `
|
|
|
26
26
|
* @cssprop [--icon-color=currentColor] - Icon color.
|
|
27
27
|
*/
|
|
28
28
|
export class DuiIcon extends LitElement {
|
|
29
|
-
static
|
|
30
|
-
static
|
|
29
|
+
static tagName = "dui-icon";
|
|
30
|
+
static styles = [base, styles];
|
|
31
31
|
render() {
|
|
32
32
|
return html `<slot></slot>`;
|
|
33
33
|
}
|
package/icon/index.d.ts
CHANGED
package/icon/index.js
CHANGED