@spectrum-web-components/dropzone 0.41.2 → 0.42.0
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 +1 -1
- package/package.json +4 -4
- package/stories/dropzone.stories.js +131 -29
- package/stories/dropzone.stories.js.map +2 -2
package/README.md
CHANGED
|
@@ -106,4 +106,4 @@ When a file is dragged over the `<sp-dropzone>` element, it will display with th
|
|
|
106
106
|
|
|
107
107
|
## Accessibility
|
|
108
108
|
|
|
109
|
-
When actions, e.g. copy/paste, can be enacted directly on the `<sp-dropzone>` element itself, be sure to supply a `tabindex` so that keyboard users can find this interaction in the tab order. For screen readers,
|
|
109
|
+
When actions, e.g. copy/paste, can be enacted directly on the `<sp-dropzone>` element itself, be sure to supply a `tabindex` so that keyboard users can find this interaction in the tab order. For screen readers, be sure to announce what the actions are, how to complete them, and when they are completed by supplying the appropriate `role` and `aria-label` attributes.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/dropzone",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.42.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@spectrum-css/dropzone": "^5.2.
|
|
63
|
+
"@spectrum-css/dropzone": "^5.2.4"
|
|
64
64
|
},
|
|
65
65
|
"types": "./src/index.d.ts",
|
|
66
66
|
"customElements": "custom-elements.json",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"./sp-*.js",
|
|
69
69
|
"./**/*.dev.js"
|
|
70
70
|
],
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "9b3bd55ff8e8f9438817255976e77fd456b19d72"
|
|
72
72
|
}
|
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result)
|
|
10
|
+
__defProp(target, key, result);
|
|
11
|
+
return result;
|
|
12
|
+
};
|
|
13
|
+
import {
|
|
14
|
+
html,
|
|
15
|
+
LitElement
|
|
16
|
+
} from "@spectrum-web-components/base";
|
|
17
|
+
import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
|
|
18
|
+
import { state } from "@spectrum-web-components/base/src/decorators.js";
|
|
3
19
|
import "@spectrum-web-components/dropzone/sp-dropzone.js";
|
|
4
20
|
import { illustration } from "../test/test-svg";
|
|
5
21
|
import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
|
|
@@ -27,48 +43,134 @@ export default {
|
|
|
27
43
|
export const Default = (args) => {
|
|
28
44
|
return html`
|
|
29
45
|
<sp-dropzone id="dropzone" tabindex="0" ?dragged=${args.isDragged}>
|
|
30
|
-
<sp-illustrated-message heading="Drag and Drop Your File"
|
|
46
|
+
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
31
47
|
${illustration}
|
|
32
|
-
<div slot="description">
|
|
33
|
-
<label for="file-input">
|
|
34
|
-
<sp-link>Select a File</sp-link>
|
|
35
|
-
from your computer
|
|
36
|
-
</label>
|
|
37
|
-
<input type="file" id="file-input" style="display: none" />
|
|
38
|
-
</div>
|
|
39
|
-
<div slot="description">
|
|
40
|
-
or
|
|
41
|
-
<sp-link href="http://stock.adobe.com" target="blank">
|
|
42
|
-
Search Adobe Stock
|
|
43
|
-
</sp-link>
|
|
44
|
-
</div>
|
|
45
48
|
</sp-illustrated-message>
|
|
49
|
+
<div>
|
|
50
|
+
<label for="file-input">
|
|
51
|
+
<sp-link
|
|
52
|
+
href="javascript:;"
|
|
53
|
+
onclick="this.parentElement.nextElementSibling.click()"
|
|
54
|
+
>
|
|
55
|
+
Select a File
|
|
56
|
+
</sp-link>
|
|
57
|
+
from your computer
|
|
58
|
+
</label>
|
|
59
|
+
<input type="file" id="file-input" style="display: none" />
|
|
60
|
+
</div>
|
|
61
|
+
<div>
|
|
62
|
+
or
|
|
63
|
+
<sp-link href="http://stock.adobe.com" target="blank">
|
|
64
|
+
Search Adobe Stock
|
|
65
|
+
</sp-link>
|
|
66
|
+
</div>
|
|
46
67
|
</sp-dropzone>
|
|
47
68
|
`;
|
|
48
69
|
};
|
|
49
70
|
export const Dragged = (args) => {
|
|
50
71
|
return html`
|
|
51
72
|
<sp-dropzone id="dropzone" tabindex="0" ?dragged=${args.isDragged}>
|
|
52
|
-
<sp-illustrated-message heading="Drag and Drop Your File"
|
|
73
|
+
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
53
74
|
${illustration}
|
|
54
|
-
<div slot="description">
|
|
55
|
-
<label for="file-input">
|
|
56
|
-
<sp-link>Select a File</sp-link>
|
|
57
|
-
from your computer
|
|
58
|
-
</label>
|
|
59
|
-
<input type="file" id="file-input" style="display: none" />
|
|
60
|
-
</div>
|
|
61
|
-
<div slot="description">
|
|
62
|
-
or
|
|
63
|
-
<sp-link href="http://stock.adobe.com" target="blank">
|
|
64
|
-
Search Adobe Stock
|
|
65
|
-
</sp-link>
|
|
66
|
-
</div>
|
|
67
75
|
</sp-illustrated-message>
|
|
76
|
+
<div>
|
|
77
|
+
<label for="file-input">
|
|
78
|
+
<sp-link
|
|
79
|
+
href="javascript:;"
|
|
80
|
+
onclick="this.parentElement.nextElementSibling.click()"
|
|
81
|
+
>
|
|
82
|
+
Select a File
|
|
83
|
+
</sp-link>
|
|
84
|
+
from your computer
|
|
85
|
+
</label>
|
|
86
|
+
<input type="file" id="file-input" style="display: none" />
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
or
|
|
90
|
+
<sp-link href="http://stock.adobe.com" target="blank">
|
|
91
|
+
Search Adobe Stock
|
|
92
|
+
</sp-link>
|
|
93
|
+
</div>
|
|
68
94
|
</sp-dropzone>
|
|
69
95
|
`;
|
|
70
96
|
};
|
|
71
97
|
Dragged.args = {
|
|
72
98
|
isDragged: true
|
|
73
99
|
};
|
|
100
|
+
class ControlledDropzone extends LitElement {
|
|
101
|
+
constructor() {
|
|
102
|
+
super(...arguments);
|
|
103
|
+
this.fileName = "mock_file.png";
|
|
104
|
+
this.input = void 0;
|
|
105
|
+
}
|
|
106
|
+
render() {
|
|
107
|
+
return html`
|
|
108
|
+
<span>
|
|
109
|
+
${this.renderMockFile()}
|
|
110
|
+
<sp-dropzone
|
|
111
|
+
tabindex="0"
|
|
112
|
+
id="dropzone"
|
|
113
|
+
drop-effect="copy"
|
|
114
|
+
?dragged=${this.input !== void 0}
|
|
115
|
+
@sp-dropzone-drop=${this.onChange}
|
|
116
|
+
>
|
|
117
|
+
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
118
|
+
${illustration}
|
|
119
|
+
</sp-illustrated-message>
|
|
120
|
+
<div>
|
|
121
|
+
<label for="file-input">
|
|
122
|
+
<sp-link
|
|
123
|
+
href="javascript:;"
|
|
124
|
+
onclick="this.parentElement.nextElementSibling.click()"
|
|
125
|
+
>
|
|
126
|
+
Select a File
|
|
127
|
+
</sp-link>
|
|
128
|
+
from your computer
|
|
129
|
+
</label>
|
|
130
|
+
<input
|
|
131
|
+
type="file"
|
|
132
|
+
id="file-input"
|
|
133
|
+
style="display: none"
|
|
134
|
+
@change=${this.onChange}
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
${this.renderUploadButton()}
|
|
138
|
+
</sp-dropzone>
|
|
139
|
+
</span>
|
|
140
|
+
`;
|
|
141
|
+
}
|
|
142
|
+
renderMockFile() {
|
|
143
|
+
return this.input === void 0 ? html`
|
|
144
|
+
<sp-action-button
|
|
145
|
+
draggable="true"
|
|
146
|
+
style="margin-bottom: 16px;"
|
|
147
|
+
>
|
|
148
|
+
Drag ${this.fileName}
|
|
149
|
+
</sp-action-button>
|
|
150
|
+
` : html`
|
|
151
|
+
<sp-action-button style="margin-bottom: 16px;">
|
|
152
|
+
Added ${this.fileName}
|
|
153
|
+
</sp-action-button>
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
renderUploadButton() {
|
|
157
|
+
return this.input === void 0 ? null : html`
|
|
158
|
+
<sp-action-button autofocus style="margin-top: 16px;">
|
|
159
|
+
Upload ${this.fileName}
|
|
160
|
+
</sp-action-button>
|
|
161
|
+
`;
|
|
162
|
+
}
|
|
163
|
+
onChange() {
|
|
164
|
+
this.input = this.fileName;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
__decorateClass([
|
|
168
|
+
state()
|
|
169
|
+
], ControlledDropzone.prototype, "input", 2);
|
|
170
|
+
defineElement("controlled-dropzone", ControlledDropzone);
|
|
171
|
+
export const Controlled = () => {
|
|
172
|
+
return html`
|
|
173
|
+
<controlled-dropzone></controlled-dropzone>
|
|
174
|
+
`;
|
|
175
|
+
};
|
|
74
176
|
//# sourceMappingURL=dropzone.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["dropzone.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n html,\n LitElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/dropzone/sp-dropzone.js';\nimport { illustration } from '../test/test-svg';\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-dropzone',\n title: 'Dropzone',\n args: {\n isDragged: false,\n },\n argTypes: {\n isDragged: {\n name: 'isDragged',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype StoryArgs = {\n isDragged?: boolean;\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n <sp-illustrated-message heading=\"Drag and Drop Your File\">\n ${illustration}\n </sp-illustrated-message>\n <div>\n <label for=\"file-input\">\n <sp-link\n href=\"javascript:;\"\n onclick=\"this.parentElement.nextElementSibling.click()\"\n >\n Select a File\n </sp-link>\n from your computer\n </label>\n <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n </div>\n <div>\n or\n <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n Search Adobe Stock\n </sp-link>\n </div>\n </sp-dropzone>\n `;\n};\n\nexport const Dragged = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n <sp-illustrated-message heading=\"Drag and Drop Your File\">\n ${illustration}\n </sp-illustrated-message>\n <div>\n <label for=\"file-input\">\n <sp-link\n href=\"javascript:;\"\n onclick=\"this.parentElement.nextElementSibling.click()\"\n >\n Select a File\n </sp-link>\n from your computer\n </label>\n <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n </div>\n <div>\n or\n <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n Search Adobe Stock\n </sp-link>\n </div>\n </sp-dropzone>\n `;\n};\nDragged.args = {\n isDragged: true,\n};\n\nclass ControlledDropzone extends LitElement {\n private fileName = 'mock_file.png';\n\n @state()\n private input?: string = undefined;\n\n override render(): TemplateResult {\n return html`\n <span>\n ${this.renderMockFile()}\n <sp-dropzone\n tabindex=\"0\"\n id=\"dropzone\"\n drop-effect=\"copy\"\n ?dragged=${this.input !== undefined}\n @sp-dropzone-drop=${this.onChange}\n >\n <sp-illustrated-message heading=\"Drag and Drop Your File\">\n ${illustration}\n </sp-illustrated-message>\n <div>\n <label for=\"file-input\">\n <sp-link\n href=\"javascript:;\"\n onclick=\"this.parentElement.nextElementSibling.click()\"\n >\n Select a File\n </sp-link>\n from your computer\n </label>\n <input\n type=\"file\"\n id=\"file-input\"\n style=\"display: none\"\n @change=${this.onChange}\n />\n </div>\n ${this.renderUploadButton()}\n </sp-dropzone>\n </span>\n `;\n }\n\n private renderMockFile(): TemplateResult {\n return this.input === undefined\n ? html`\n <sp-action-button\n draggable=\"true\"\n style=\"margin-bottom: 16px;\"\n >\n Drag ${this.fileName}\n </sp-action-button>\n `\n : html`\n <sp-action-button style=\"margin-bottom: 16px;\">\n Added ${this.fileName}\n </sp-action-button>\n `;\n }\n\n private renderUploadButton(): TemplateResult | null {\n return this.input === undefined\n ? null\n : html`\n <sp-action-button autofocus style=\"margin-top: 16px;\">\n Upload ${this.fileName}\n </sp-action-button>\n `;\n }\n\n private onChange(): void {\n this.input = this.fileName;\n }\n}\ndefineElement('controlled-dropzone', ControlledDropzone);\n\nexport const Controlled = (): TemplateResult => {\n return html`\n <controlled-dropzone></controlled-dropzone>\n `;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAWA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEtB,OAAO;AACP,SAAS,oBAAoB;AAC7B,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,IACF,WAAW;AAAA,EACf;AAAA,EACA,UAAU;AAAA,IACN,WAAW;AAAA,MACP,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAMO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AAEO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AACA,QAAQ,OAAO;AAAA,EACX,WAAW;AACf;AAEA,MAAM,2BAA2B,WAAW;AAAA,EAA5C;AAAA;AACI,SAAQ,WAAW;AAGnB,SAAQ,QAAiB;AAAA;AAAA,EAEhB,SAAyB;AAC9B,WAAO;AAAA;AAAA,kBAEG,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKR,KAAK,UAAU,MAAS;AAAA,wCACf,KAAK,QAAQ;AAAA;AAAA;AAAA,0BAG3B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAgBA,KAAK,QAAQ;AAAA;AAAA;AAAA,sBAG7B,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,EAI3C;AAAA,EAEQ,iBAAiC;AACrC,WAAO,KAAK,UAAU,SAChB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKe,KAAK,QAAQ;AAAA;AAAA,kBAG5B;AAAA;AAAA,8BAEgB,KAAK,QAAQ;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEQ,qBAA4C;AAChD,WAAO,KAAK,UAAU,SAChB,OACA;AAAA;AAAA,+BAEiB,KAAK,QAAQ;AAAA;AAAA;AAAA,EAGxC;AAAA,EAEQ,WAAiB;AACrB,SAAK,QAAQ,KAAK;AAAA,EACtB;AACJ;AArEY;AAAA,EADP,MAAM;AAAA,GAHL,mBAIM;AAsEZ,cAAc,uBAAuB,kBAAkB;AAEhD,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|