@spectrum-web-components/dropzone 0.8.0 → 0.9.1
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 +30 -33
- package/package.json +4 -4
- package/src/Dropzone.d.ts +1 -1
- package/src/Dropzone.js +2 -1
- package/src/Dropzone.js.map +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
|
|
|
29
29
|
## Example
|
|
30
30
|
|
|
31
31
|
```html
|
|
32
|
-
<sp-dropzone id="dropzone-1"
|
|
32
|
+
<sp-dropzone id="dropzone-1" style="width: 400px; height: 200px">
|
|
33
33
|
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
34
34
|
<svg
|
|
35
35
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -44,32 +44,27 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
|
|
|
44
44
|
</sp-illustrated-message>
|
|
45
45
|
|
|
46
46
|
<div>
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</sp-link>
|
|
59
|
-
</div>
|
|
47
|
+
<label for="file-input" onclick="this.nextElementSibling.click()">
|
|
48
|
+
<sp-link href="javascript:;">Select a File</sp-link>
|
|
49
|
+
from your computer
|
|
50
|
+
</label>
|
|
51
|
+
<input type="file" id="file-input" style="display: none" />
|
|
52
|
+
</div>
|
|
53
|
+
<div>
|
|
54
|
+
or
|
|
55
|
+
<sp-link href="http://stock.adobe.com" target="blank">
|
|
56
|
+
Search Adobe Stock
|
|
57
|
+
</sp-link>
|
|
60
58
|
</div>
|
|
61
59
|
</sp-dropzone>
|
|
62
60
|
```
|
|
63
61
|
|
|
64
62
|
### Dragged
|
|
65
63
|
|
|
64
|
+
When a file is dragged over the `<sp-dropzone>` element, it will display with the `dragged` attribute, as follows:
|
|
65
|
+
|
|
66
66
|
```html
|
|
67
|
-
<sp-dropzone
|
|
68
|
-
id="dropzone"
|
|
69
|
-
tabindex="0"
|
|
70
|
-
dragged
|
|
71
|
-
style="width: 400px; height: 200px"
|
|
72
|
-
>
|
|
67
|
+
<sp-dropzone id="dropzone" dragged style="width: 400px; height: 200px">
|
|
73
68
|
<sp-illustrated-message heading="Drag and Drop Your File">
|
|
74
69
|
<svg
|
|
75
70
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -84,19 +79,21 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
|
|
|
84
79
|
</sp-illustrated-message>
|
|
85
80
|
|
|
86
81
|
<div>
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</sp-link>
|
|
99
|
-
</div>
|
|
82
|
+
<label for="file-input" onclick="this.nextElementSibling.click()">
|
|
83
|
+
<sp-link href="javascript:;">Select a File</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>
|
|
100
93
|
</div>
|
|
101
94
|
</sp-dropzone>
|
|
102
95
|
```
|
|
96
|
+
|
|
97
|
+
## Accessibility
|
|
98
|
+
|
|
99
|
+
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, supply appropriate `role` and `aria-label` attributes to clarify what these actions are and how to complete them.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/dropzone",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,16 +44,16 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
48
48
|
"tslib": "^2.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@spectrum-css/dropzone": "^3.0.
|
|
51
|
+
"@spectrum-css/dropzone": "^3.0.10"
|
|
52
52
|
},
|
|
53
53
|
"types": "./src/index.d.ts",
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
55
55
|
"sideEffects": [
|
|
56
56
|
"./sp-*.js"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
|
|
59
59
|
}
|
package/src/Dropzone.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
export declare type DropzoneEventDetail = DragEvent;
|
|
3
3
|
export declare type DropEffects = 'copy' | 'move' | 'link' | 'none';
|
|
4
4
|
/**
|
package/src/Dropzone.js
CHANGED
|
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html, SpectrumElement,
|
|
13
|
+
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
14
15
|
import dropzoneStyles from './dropzone.css.js';
|
|
15
16
|
/**
|
|
16
17
|
* @element sp-dropzone
|
package/src/Dropzone.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.js","sourceRoot":"","sources":["Dropzone.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,
|
|
1
|
+
{"version":3,"file":"Dropzone.js","sourceRoot":"","sources":["Dropzone.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAM/C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,eAAe;IAA7C;;QAkBY,gBAAW,GAAgB,MAAM,CAAC;QAGnC,cAAS,GAAG,KAAK,CAAC;QAEjB,uBAAkB,GAAkB,IAAI,CAAC;IA0FrD,CAAC;IAhHU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,cAAc,CAAC,CAAC;IAC5B,CAAC;IAED;;;;OAIG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAkB;QACpC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAClD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC5B;IACL,CAAC;IAQM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACzD,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9C,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IAEM,UAAU,CAAC,KAAgB;QAC9B,MAAM,iBAAiB,GAAG,IAAI,WAAW,CAAC,2BAA2B,EAAE;YACnE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAK;SAChB,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;YACrB,OAAO;SACV;QACD,IAAI,CAAC,YAAY,EAAE;YACf,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACvC,OAAO;SACV;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAChD,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,sBAAsB,EAAE;YAC1D,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAK;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACtC,CAAC;IAEM,WAAW,CAAC,KAAgB;QAC/B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAEvB,MAAM,SAAS,GAAG,IAAI,WAAW,CAAC,uBAAuB,EAAE;gBACvD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,KAAK;aAChB,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC;IAEM,MAAM,CAAC,KAAgB;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,MAAM,SAAS,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAK;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;IAES,uBAAuB;QAC7B,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAClC;IACL,CAAC;CACJ;AA5FG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;2CACxC","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*/\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport dropzoneStyles from './dropzone.css.js';\n\nexport type DropzoneEventDetail = DragEvent;\n\nexport type DropEffects = 'copy' | 'move' | 'link' | 'none';\n\n/**\n * @element sp-dropzone\n *\n * @slot - The default slot on an `sp-dropzone` is a great place to place upload instructions\n * built with an `sp-illustrated-message` or other information, possibly even built from data\n * provided by the upload, to support users successfully interacting with the drag and drop\n * based features of your application\n *\n * @fires sp-dropzone-should-accept - A cancellable event that confirms whether or not\n * a file dropped on the UI should be accepted.\n * @fires sp-dropzone-dragover - Announces when files have been dragged over the UI, but not yet dropped.\n * @fires sp-dropzone-dragleave - Announces when dragged files have been moved out of the UI without having been dropped.\n * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.\n */\nexport class Dropzone extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [dropzoneStyles];\n }\n\n /**\n * Controls the feedback (typically visual) the user is given during a drag and drop operation\n * @attr\n * @type {'copy' | 'move' | 'link' | 'none'}\n */\n public get dropEffect(): DropEffects {\n return this._dropEffect;\n }\n public set dropEffect(value: DropEffects) {\n if (['copy', 'move', 'link', 'none'].includes(value)) {\n this._dropEffect = value;\n }\n }\n private _dropEffect: DropEffects = 'copy';\n\n @property({ type: Boolean, reflect: true, attribute: 'dragged' })\n public isDragged = false;\n\n private debouncedDragLeave: number | null = null;\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('drop', this.onDrop);\n this.addEventListener('dragover', this.onDragOver);\n this.addEventListener('dragleave', this.onDragLeave);\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.removeEventListener('drop', this.onDrop);\n this.removeEventListener('dragover', this.onDragOver);\n this.removeEventListener('dragleave', this.onDragLeave);\n }\n\n public onDragOver(event: DragEvent): void {\n const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: event,\n });\n const shouldAccept = this.dispatchEvent(shouldAcceptEvent);\n if (!event.dataTransfer) {\n return;\n }\n if (!shouldAccept) {\n event.dataTransfer.dropEffect = 'none';\n return;\n }\n\n event.preventDefault();\n\n this.clearDebouncedDragLeave();\n\n this.isDragged = true;\n\n event.dataTransfer.dropEffect = this.dropEffect;\n const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {\n bubbles: true,\n composed: true,\n detail: event,\n });\n this.dispatchEvent(dragOverEvent);\n }\n\n public onDragLeave(event: DragEvent): void {\n this.clearDebouncedDragLeave();\n\n this.debouncedDragLeave = window.setTimeout(() => {\n this.isDragged = false;\n\n const dragLeave = new CustomEvent('sp-dropzone-dragleave', {\n bubbles: true,\n composed: true,\n detail: event,\n });\n this.dispatchEvent(dragLeave);\n }, 100);\n }\n\n public onDrop(event: DragEvent): void {\n event.preventDefault();\n\n this.clearDebouncedDragLeave();\n\n this.isDragged = false;\n const dropEvent = new CustomEvent('sp-dropzone-drop', {\n bubbles: true,\n composed: true,\n detail: event,\n });\n this.dispatchEvent(dropEvent);\n }\n\n protected render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected clearDebouncedDragLeave(): void {\n if (this.debouncedDragLeave) {\n clearTimeout(this.debouncedDragLeave);\n this.debouncedDragLeave = null;\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-dropzone:should-accept': CustomEvent<DragEvent>;\n 'sp-dropzone:dragover': CustomEvent<DragEvent>;\n 'sp-dropzone:dragleave': CustomEvent<DragEvent>;\n 'sp-dropzone:drop': CustomEvent<DragEvent>;\n }\n}\n"]}
|