@spectrum-web-components/dropzone 0.9.0 → 0.9.3-express.12

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.
Files changed (6) hide show
  1. package/README.md +38 -31
  2. package/package.json +4 -4
  3. package/test/dropzone.test-vrt.js +0 -15
  4. package/test/dropzone.test-vrt.js.map +0 -1
  5. package/test/dropzone.test.js +0 -153
  6. package/test/dropzone.test.js.map +0 -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" tabindex="0" style="width: 400px; height: 200px">
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,32 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
44
44
  </sp-illustrated-message>
45
45
 
46
46
  <div>
47
- <div>
48
- <label for="file-input" onclick="this.nextElementSibling.click()">
49
- <sp-link href="javascript:;">Select a File</sp-link>
50
- from your computer
51
- </label>
52
- <input type="file" id="file-input" style="display: none" />
53
- </div>
54
- <div>
55
- or
56
- <sp-link href="http://stock.adobe.com" target="blank">
57
- Search Adobe Stock
47
+ <label for="file-input">
48
+ <sp-link
49
+ href="javascript:;"
50
+ onclick="this.parentElement.nextElementSibling.click()"
51
+ >
52
+ Select a File
58
53
  </sp-link>
59
- </div>
54
+ from your computer
55
+ </label>
56
+ <input type="file" id="file-input" style="display: none" />
57
+ </div>
58
+ <div>
59
+ or
60
+ <sp-link href="http://stock.adobe.com" target="blank">
61
+ Search Adobe Stock
62
+ </sp-link>
60
63
  </div>
61
64
  </sp-dropzone>
62
65
  ```
63
66
 
64
67
  ### Dragged
65
68
 
69
+ When a file is dragged over the `<sp-dropzone>` element, it will display with the `dragged` attribute, as follows:
70
+
66
71
  ```html
67
- <sp-dropzone
68
- id="dropzone"
69
- tabindex="0"
70
- dragged
71
- style="width: 400px; height: 200px"
72
- >
72
+ <sp-dropzone id="dropzone" dragged style="width: 400px; height: 200px">
73
73
  <sp-illustrated-message heading="Drag and Drop Your File">
74
74
  <svg
75
75
  xmlns="http://www.w3.org/2000/svg"
@@ -84,19 +84,26 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
84
84
  </sp-illustrated-message>
85
85
 
86
86
  <div>
87
- <div>
88
- <label for="file-input" onclick="this.nextElementSibling.click()">
89
- <sp-link href="javascript:;">Select a File</sp-link>
90
- from your computer
91
- </label>
92
- <input type="file" id="file-input" style="display: none" />
93
- </div>
94
- <div>
95
- or
96
- <sp-link href="http://stock.adobe.com" target="blank">
97
- Search Adobe Stock
87
+ <label for="file-input">
88
+ <sp-link
89
+ href="javascript:;"
90
+ onclick="this.parentElement.nextElementSibling.click()"
91
+ >
92
+ Select a File
98
93
  </sp-link>
99
- </div>
94
+ from your computer
95
+ </label>
96
+ <input type="file" id="file-input" style="display: none" />
97
+ </div>
98
+ <div>
99
+ or
100
+ <sp-link href="http://stock.adobe.com" target="blank">
101
+ Search Adobe Stock
102
+ </sp-link>
100
103
  </div>
101
104
  </sp-dropzone>
102
105
  ```
106
+
107
+ ## Accessibility
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, 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.9.0",
3
+ "version": "0.9.3-express.12+27420d682",
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.5.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.5"
51
+ "@spectrum-css/dropzone": "^3.0.14"
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": "7ce77352f6894043bceac9ef92b21e5f85420969"
58
+ "gitHead": "27420d682bb3b3f679875e1f4148c10df0bd738c"
59
59
  }
package/test/dropzone.test-vrt.js DELETED
@@ -1,15 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import * as stories from '../stories/dropzone.stories.js';
13
- import { regressVisuals } from '../../../test/visual/test.js';
14
- regressVisuals('DropzoneStories', stories);
15
- //# sourceMappingURL=dropzone.test-vrt.js.map
package/test/dropzone.test-vrt.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropzone.test-vrt.js","sourceRoot":"","sources":["dropzone.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/dropzone.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('DropzoneStories', stories);\n"]}
package/test/dropzone.test.js DELETED
@@ -1,153 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '../sp-dropzone.js';
13
- import { illustration } from './test-svg.js';
14
- import { waitForPredicate } from '../../../test/testing-helpers.js';
15
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
16
- describe('Dropzone', () => {
17
- it('loads', async () => {
18
- const el = await fixture(html `
19
- <sp-dropzone id="dropzone">
20
- <sp-illustrated-message heading="Drag and Drop Your File">
21
- ${illustration}
22
- </sp-illustrated-message>
23
-
24
- <div style="color: grey">
25
- <div>
26
- <label for="file-input">
27
- <sp-link>Select a File</sp-link>
28
- from your computer
29
- </label>
30
- <input
31
- type="file"
32
- id="file-input"
33
- style="display: none"
34
- />
35
- </div>
36
- <div>
37
- or
38
- <sp-link
39
- href="http://stock.adobe.com"
40
- target="blank"
41
- >
42
- Search Adobe Stock
43
- </sp-link>
44
- </div>
45
- </div>
46
- </sp-dropzone>
47
- `);
48
- expect(el).to.not.equal(undefined);
49
- if (!el.shadowRoot)
50
- throw new Error('No shadowRoot');
51
- const slot = el.shadowRoot.querySelector('slot');
52
- expect(slot).to.not.equal(undefined);
53
- return true;
54
- });
55
- it('manages `dropEffects`', async () => {
56
- const el = await fixture(html `
57
- <sp-dropzone id="dropzone"></sp-dropzone>
58
- `);
59
- await elementUpdated(el);
60
- expect(el.dropEffect).to.equal('copy');
61
- el.dropEffect = 'move';
62
- await elementUpdated(el);
63
- expect(el.dropEffect).to.equal('move');
64
- });
65
- it('manages `dragover` events', async () => {
66
- const el = await fixture(html `
67
- <sp-dropzone id="dropzone"></sp-dropzone>
68
- `);
69
- await elementUpdated(el);
70
- expect(el.isDragged).to.be.false;
71
- el.dispatchEvent(new DragEvent('dragover'));
72
- expect(el.isDragged).to.be.false;
73
- let dataTransfer = false;
74
- try {
75
- // Safari doesn't like this...
76
- dataTransfer = new DataTransfer();
77
- }
78
- catch (error) { }
79
- if (dataTransfer) {
80
- const dragOverEvent = new DragEvent('dragover', {
81
- dataTransfer,
82
- });
83
- el.dispatchEvent(dragOverEvent);
84
- expect(el.isDragged).to.be.true;
85
- // We should be able to make the following test here:
86
- // expect(dataTransfer.dropEffect).to.equal(el.dropEffect);
87
- // However, Chrome doesn't like it in the context of a test...
88
- }
89
- });
90
- it('allows `dragover` events to be canceled', async () => {
91
- const canceledDrag = (event) => {
92
- event.preventDefault();
93
- };
94
- const el = await fixture(html `
95
- <sp-dropzone
96
- id="dropzone"
97
- @sp-dropzone-should-accept=${canceledDrag}
98
- ></sp-dropzone>
99
- `);
100
- await elementUpdated(el);
101
- expect(el.isDragged).to.be.false;
102
- let dataTransfer = false;
103
- try {
104
- // Safari doesn't like this...
105
- dataTransfer = new DataTransfer();
106
- }
107
- catch (error) { }
108
- if (dataTransfer) {
109
- const dragOverEvent = new DragEvent('dragover', {
110
- dataTransfer,
111
- });
112
- el.dispatchEvent(dragOverEvent);
113
- expect(el.isDragged).to.be.false;
114
- expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);
115
- expect(dataTransfer.dropEffect).to.equal('none');
116
- }
117
- });
118
- it('manages `dragleave` events via debounce', async () => {
119
- let dragLeftCount = 0;
120
- const onDragLeave = () => {
121
- dragLeftCount += 1;
122
- };
123
- const el = await fixture(html `
124
- <sp-dropzone
125
- id="dropzone"
126
- @sp-dropzone-dragleave=${onDragLeave}
127
- ></sp-dropzone>
128
- `);
129
- await elementUpdated(el);
130
- expect(dragLeftCount).to.equal(0);
131
- el.dispatchEvent(new DragEvent('dragleave'));
132
- el.dispatchEvent(new DragEvent('dragleave'));
133
- await waitForPredicate(() => dragLeftCount === 1);
134
- expect(dragLeftCount).to.equal(1);
135
- });
136
- it('manages `dragleave` events', async () => {
137
- let dropped = false;
138
- const onDrop = () => {
139
- dropped = true;
140
- };
141
- const el = await fixture(html `
142
- <sp-dropzone
143
- id="dropzone"
144
- @sp-dropzone-drop=${onDrop}
145
- ></sp-dropzone>
146
- `);
147
- await elementUpdated(el);
148
- expect(dropped).to.be.false;
149
- el.dispatchEvent(new DragEvent('drop'));
150
- expect(dropped).to.be.true;
151
- });
152
- });
153
- //# sourceMappingURL=dropzone.test.js.map
package/test/dropzone.test.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropzone.test.js","sourceRoot":"","sources":["dropzone.test.ts"],"names":[],"mappings":"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","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 '../sp-dropzone.js';\nimport { Dropzone } from '../';\nimport { illustration } from './test-svg.js';\nimport { waitForPredicate } from '../../../test/testing-helpers.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Dropzone', () => {\n it('loads', async () => {\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone id=\"dropzone\">\n <sp-illustrated-message heading=\"Drag and Drop Your File\">\n ${illustration}\n </sp-illustrated-message>\n\n <div style=\"color: grey\">\n <div>\n <label for=\"file-input\">\n <sp-link>Select a File</sp-link>\n from your computer\n </label>\n <input\n type=\"file\"\n id=\"file-input\"\n style=\"display: none\"\n />\n </div>\n <div>\n or\n <sp-link\n href=\"http://stock.adobe.com\"\n target=\"blank\"\n >\n Search Adobe Stock\n </sp-link>\n </div>\n </div>\n </sp-dropzone>\n `\n );\n expect(el).to.not.equal(undefined);\n if (!el.shadowRoot) throw new Error('No shadowRoot');\n const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n expect(slot).to.not.equal(undefined);\n return true;\n });\n it('manages `dropEffects`', async () => {\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone id=\"dropzone\"></sp-dropzone>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.dropEffect).to.equal('copy');\n\n el.dropEffect = 'move';\n\n await elementUpdated(el);\n\n expect(el.dropEffect).to.equal('move');\n });\n it('manages `dragover` events', async () => {\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone id=\"dropzone\"></sp-dropzone>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.isDragged).to.be.false;\n\n el.dispatchEvent(new DragEvent('dragover'));\n\n expect(el.isDragged).to.be.false;\n\n let dataTransfer: DataTransfer | boolean = false;\n try {\n // Safari doesn't like this...\n dataTransfer = new DataTransfer();\n } catch (error) {}\n if (dataTransfer) {\n const dragOverEvent = new DragEvent('dragover', {\n dataTransfer,\n });\n\n el.dispatchEvent(dragOverEvent);\n\n expect(el.isDragged).to.be.true;\n // We should be able to make the following test here:\n // expect(dataTransfer.dropEffect).to.equal(el.dropEffect);\n // However, Chrome doesn't like it in the context of a test...\n }\n });\n it('allows `dragover` events to be canceled', async () => {\n const canceledDrag = (event: DragEvent): void => {\n event.preventDefault();\n };\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone\n id=\"dropzone\"\n @sp-dropzone-should-accept=${canceledDrag}\n ></sp-dropzone>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.isDragged).to.be.false;\n\n let dataTransfer: DataTransfer | boolean = false;\n try {\n // Safari doesn't like this...\n dataTransfer = new DataTransfer();\n } catch (error) {}\n if (dataTransfer) {\n const dragOverEvent = new DragEvent('dragover', {\n dataTransfer,\n });\n\n el.dispatchEvent(dragOverEvent);\n\n expect(el.isDragged).to.be.false;\n expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);\n expect(dataTransfer.dropEffect).to.equal('none');\n }\n });\n it('manages `dragleave` events via debounce', async () => {\n let dragLeftCount = 0;\n const onDragLeave = (): void => {\n dragLeftCount += 1;\n };\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone\n id=\"dropzone\"\n @sp-dropzone-dragleave=${onDragLeave}\n ></sp-dropzone>\n `\n );\n\n await elementUpdated(el);\n\n expect(dragLeftCount).to.equal(0);\n\n el.dispatchEvent(new DragEvent('dragleave'));\n el.dispatchEvent(new DragEvent('dragleave'));\n\n await waitForPredicate(() => dragLeftCount === 1);\n\n expect(dragLeftCount).to.equal(1);\n });\n\n it('manages `dragleave` events', async () => {\n let dropped = false;\n const onDrop = (): void => {\n dropped = true;\n };\n const el = await fixture<Dropzone>(\n html`\n <sp-dropzone\n id=\"dropzone\"\n @sp-dropzone-drop=${onDrop}\n ></sp-dropzone>\n `\n );\n\n await elementUpdated(el);\n\n expect(dropped).to.be.false;\n\n el.dispatchEvent(new DragEvent('drop'));\n\n expect(dropped).to.be.true;\n });\n});\n"]}