@spectrum-web-components/picker 0.11.3 → 0.11.6-devmode.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/package.json +39 -22
- package/sp-picker.dev.js +3 -0
- package/sp-picker.dev.js.map +7 -0
- package/sp-picker.js +3 -14
- package/sp-picker.js.map +7 -1
- package/src/Picker.d.ts +0 -1
- package/src/Picker.dev.js +501 -0
- package/src/Picker.dev.js.map +7 -0
- package/src/Picker.js +424 -457
- package/src/Picker.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/picker.css.dev.js +304 -0
- package/src/picker.css.dev.js.map +7 -0
- package/src/picker.css.js +17 -38
- package/src/picker.css.js.map +7 -1
- package/src/spectrum-picker.css.dev.js +300 -0
- package/src/spectrum-picker.css.dev.js.map +7 -0
- package/src/spectrum-picker.css.js +17 -38
- package/src/spectrum-picker.css.js.map +7 -1
- package/stories/picker-sizes.stories.js +22 -30
- package/stories/picker-sizes.stories.js.map +7 -1
- package/stories/picker.stories.js +84 -95
- package/stories/picker.stories.js.map +7 -1
- package/stories/states.js +225 -236
- package/stories/states.js.map +7 -1
- package/sync/index.dev.js +8 -0
- package/sync/index.dev.js.map +7 -0
- package/sync/index.js +6 -15
- package/sync/index.js.map +7 -1
- package/sync/sp-picker.dev.js +3 -0
- package/sync/sp-picker.dev.js.map +7 -0
- package/sync/sp-picker.js +3 -14
- package/sync/sp-picker.js.map +7 -1
- package/test/benchmark/basic-test.js +256 -267
- package/test/benchmark/basic-test.js.map +7 -1
- package/test/index.js +830 -836
- package/test/index.js.map +7 -1
- package/test/picker-reparenting.test.js +71 -76
- package/test/picker-reparenting.test.js.map +7 -1
- package/test/picker-responsive.test.js +41 -53
- package/test/picker-responsive.test.js.map +7 -1
- package/test/picker-sizes.test-vrt.js +4 -15
- package/test/picker-sizes.test-vrt.js.map +7 -1
- package/test/picker-sync.test.js +5 -16
- package/test/picker-sync.test.js.map +7 -1
- package/test/picker.test-vrt.js +4 -15
- package/test/picker.test-vrt.js.map +7 -1
- package/test/picker.test.js +5 -16
- package/test/picker.test.js.map +7 -1
|
@@ -1,88 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import '../sp-picker.js';
|
|
14
|
-
import '@spectrum-web-components/menu/sp-menu-item.js';
|
|
15
|
-
import '@spectrum-web-components/menu/sp-menu-divider.js';
|
|
16
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
|
|
17
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
|
|
18
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
|
|
19
|
-
import { states } from './states.js';
|
|
20
|
-
import '@spectrum-web-components/field-label/sp-field-label.js';
|
|
21
|
-
import { spreadProps } from '../../../test/lit-helpers.js';
|
|
1
|
+
import { html } from "@spectrum-web-components/base";
|
|
2
|
+
import "@spectrum-web-components/picker/sp-picker.js";
|
|
3
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
4
|
+
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
5
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
|
|
6
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
|
|
7
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js";
|
|
8
|
+
import { states } from "./states.js";
|
|
9
|
+
import "@spectrum-web-components/field-label/sp-field-label.js";
|
|
10
|
+
import { spreadProps } from "../../../test/lit-helpers.js";
|
|
22
11
|
export default {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
12
|
+
title: "Picker",
|
|
13
|
+
component: "sp-picker",
|
|
14
|
+
args: {
|
|
15
|
+
disabled: false,
|
|
16
|
+
invalid: false,
|
|
17
|
+
open: false,
|
|
18
|
+
quiet: false
|
|
19
|
+
},
|
|
20
|
+
argTypes: {
|
|
21
|
+
onChange: { action: "change" },
|
|
22
|
+
disabled: {
|
|
23
|
+
name: "disabled",
|
|
24
|
+
type: { name: "boolean", required: false },
|
|
25
|
+
description: "Disable this control. It will not receive focus or events.",
|
|
26
|
+
table: {
|
|
27
|
+
type: { summary: "boolean" },
|
|
28
|
+
defaultValue: { summary: false }
|
|
29
|
+
},
|
|
30
|
+
control: {
|
|
31
|
+
type: "boolean"
|
|
32
|
+
}
|
|
30
33
|
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
control: {
|
|
42
|
-
type: 'boolean',
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
invalid: {
|
|
46
|
-
name: 'invalid',
|
|
47
|
-
type: { name: 'boolean', required: false },
|
|
48
|
-
table: {
|
|
49
|
-
type: { summary: 'boolean' },
|
|
50
|
-
defaultValue: { summary: false },
|
|
51
|
-
},
|
|
52
|
-
control: {
|
|
53
|
-
type: 'boolean',
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
open: {
|
|
57
|
-
name: 'open',
|
|
58
|
-
type: { name: 'boolean', required: false },
|
|
59
|
-
description: 'Whether the menu is open or not.',
|
|
60
|
-
table: {
|
|
61
|
-
type: { summary: 'boolean' },
|
|
62
|
-
defaultValue: { summary: false },
|
|
63
|
-
},
|
|
64
|
-
control: 'boolean',
|
|
65
|
-
},
|
|
66
|
-
quiet: {
|
|
67
|
-
name: 'quiet',
|
|
68
|
-
type: { name: 'boolean', required: false },
|
|
69
|
-
table: {
|
|
70
|
-
type: { summary: 'boolean' },
|
|
71
|
-
defaultValue: { summary: false },
|
|
72
|
-
},
|
|
73
|
-
control: {
|
|
74
|
-
type: 'boolean',
|
|
75
|
-
},
|
|
76
|
-
},
|
|
34
|
+
invalid: {
|
|
35
|
+
name: "invalid",
|
|
36
|
+
type: { name: "boolean", required: false },
|
|
37
|
+
table: {
|
|
38
|
+
type: { summary: "boolean" },
|
|
39
|
+
defaultValue: { summary: false }
|
|
40
|
+
},
|
|
41
|
+
control: {
|
|
42
|
+
type: "boolean"
|
|
43
|
+
}
|
|
77
44
|
},
|
|
45
|
+
open: {
|
|
46
|
+
name: "open",
|
|
47
|
+
type: { name: "boolean", required: false },
|
|
48
|
+
description: "Whether the menu is open or not.",
|
|
49
|
+
table: {
|
|
50
|
+
type: { summary: "boolean" },
|
|
51
|
+
defaultValue: { summary: false }
|
|
52
|
+
},
|
|
53
|
+
control: "boolean"
|
|
54
|
+
},
|
|
55
|
+
quiet: {
|
|
56
|
+
name: "quiet",
|
|
57
|
+
type: { name: "boolean", required: false },
|
|
58
|
+
table: {
|
|
59
|
+
type: { summary: "boolean" },
|
|
60
|
+
defaultValue: { summary: false }
|
|
61
|
+
},
|
|
62
|
+
control: {
|
|
63
|
+
type: "boolean"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
78
67
|
};
|
|
79
68
|
const handleChange = ({ onChange }) => (event) => {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
69
|
+
const picker = event.target;
|
|
70
|
+
if (onChange)
|
|
71
|
+
onChange(picker.value);
|
|
83
72
|
};
|
|
84
73
|
export const Default = (args) => {
|
|
85
|
-
|
|
74
|
+
return html`
|
|
86
75
|
<sp-field-label for="picker-1">Where do you live?</sp-field-label>
|
|
87
76
|
<sp-picker
|
|
88
77
|
id="picker-1"
|
|
@@ -108,7 +97,7 @@ export const Default = (args) => {
|
|
|
108
97
|
`;
|
|
109
98
|
};
|
|
110
99
|
export const quiet = (args) => {
|
|
111
|
-
|
|
100
|
+
return html`
|
|
112
101
|
<sp-field-label for="picker-quiet">Where do you live?</sp-field-label>
|
|
113
102
|
<sp-picker
|
|
114
103
|
${spreadProps(args)}
|
|
@@ -131,10 +120,10 @@ export const quiet = (args) => {
|
|
|
131
120
|
`;
|
|
132
121
|
};
|
|
133
122
|
quiet.args = {
|
|
134
|
-
|
|
123
|
+
quiet: true
|
|
135
124
|
};
|
|
136
125
|
export const icons = (args) => {
|
|
137
|
-
|
|
126
|
+
return html`
|
|
138
127
|
<sp-field-label for="picker-quiet">
|
|
139
128
|
Choose an action type...
|
|
140
129
|
</sp-field-label>
|
|
@@ -161,7 +150,7 @@ export const icons = (args) => {
|
|
|
161
150
|
`;
|
|
162
151
|
};
|
|
163
152
|
export const iconsNone = (args) => {
|
|
164
|
-
|
|
153
|
+
return html`
|
|
165
154
|
<sp-field-label for="picker-quiet">
|
|
166
155
|
Choose an action type...
|
|
167
156
|
</sp-field-label>
|
|
@@ -189,10 +178,10 @@ export const iconsNone = (args) => {
|
|
|
189
178
|
`;
|
|
190
179
|
};
|
|
191
180
|
iconsNone.args = {
|
|
192
|
-
|
|
181
|
+
open: true
|
|
193
182
|
};
|
|
194
183
|
export const iconValue = (args) => {
|
|
195
|
-
|
|
184
|
+
return html`
|
|
196
185
|
<sp-field-label for="picker-quiet">
|
|
197
186
|
Choose an action type...
|
|
198
187
|
</sp-field-label>
|
|
@@ -221,7 +210,7 @@ export const iconValue = (args) => {
|
|
|
221
210
|
`;
|
|
222
211
|
};
|
|
223
212
|
export const iconsOnly = (args) => {
|
|
224
|
-
|
|
213
|
+
return html`
|
|
225
214
|
<sp-field-label for="picker-quiet">
|
|
226
215
|
Choose an action type...
|
|
227
216
|
</sp-field-label>
|
|
@@ -246,10 +235,10 @@ export const iconsOnly = (args) => {
|
|
|
246
235
|
`;
|
|
247
236
|
};
|
|
248
237
|
iconsOnly.args = {
|
|
249
|
-
|
|
238
|
+
open: true
|
|
250
239
|
};
|
|
251
240
|
export const Open = (args) => {
|
|
252
|
-
|
|
241
|
+
return html`
|
|
253
242
|
<style>
|
|
254
243
|
fieldset {
|
|
255
244
|
float: left;
|
|
@@ -297,10 +286,10 @@ export const Open = (args) => {
|
|
|
297
286
|
`;
|
|
298
287
|
};
|
|
299
288
|
Open.args = {
|
|
300
|
-
|
|
289
|
+
open: true
|
|
301
290
|
};
|
|
302
291
|
export const initialValue = (args) => {
|
|
303
|
-
|
|
292
|
+
return html`
|
|
304
293
|
<sp-field-label for="picker-initial">Where do you live?</sp-field-label>
|
|
305
294
|
<sp-picker
|
|
306
295
|
id="picker-initial"
|
|
@@ -322,7 +311,7 @@ export const initialValue = (args) => {
|
|
|
322
311
|
`;
|
|
323
312
|
};
|
|
324
313
|
export const readonly = (args) => {
|
|
325
|
-
|
|
314
|
+
return html`
|
|
326
315
|
<sp-picker
|
|
327
316
|
@change=${handleChange(args)}
|
|
328
317
|
readonly
|
|
@@ -343,8 +332,8 @@ export const readonly = (args) => {
|
|
|
343
332
|
`;
|
|
344
333
|
};
|
|
345
334
|
export const custom = (args) => {
|
|
346
|
-
|
|
347
|
-
|
|
335
|
+
const initialState = "lb1-mo";
|
|
336
|
+
return html`
|
|
348
337
|
<sp-field-label for="picker-state">
|
|
349
338
|
What state do you live in?
|
|
350
339
|
</sp-field-label>
|
|
@@ -356,7 +345,7 @@ export const custom = (args) => {
|
|
|
356
345
|
${spreadProps(args)}
|
|
357
346
|
value=${initialState}
|
|
358
347
|
>
|
|
359
|
-
${states.map((state) => html
|
|
348
|
+
${states.map((state) => html`
|
|
360
349
|
<sp-menu-item
|
|
361
350
|
id=${state.id}
|
|
362
351
|
value=${state.id}
|
|
@@ -376,6 +365,6 @@ export const custom = (args) => {
|
|
|
376
365
|
`;
|
|
377
366
|
};
|
|
378
367
|
custom.args = {
|
|
379
|
-
|
|
368
|
+
open: true
|
|
380
369
|
};
|
|
381
|
-
//# sourceMappingURL=picker.stories.js.map
|
|
370
|
+
//# sourceMappingURL=picker.stories.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"picker.stories.js","sourceRoot":"","sources":["picker.stories.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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-picker.js';\nimport { Picker } from '../';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n title: 'Picker',\n component: 'sp-picker',\n args: {\n disabled: false,\n invalid: false,\n open: false,\n quiet: false,\n },\n argTypes: {\n onChange: { action: 'change' },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n invalid: {\n name: 'invalid',\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 open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the menu is open or not.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n quiet: {\n name: 'quiet',\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\ninterface StoryArgs {\n disabled?: boolean;\n invalid?: boolean;\n open?: boolean;\n quiet?: boolean;\n showText?: boolean;\n onChange?: (val: string) => void;\n [prop: string]: unknown;\n}\n\nconst handleChange =\n ({ onChange }: StoryArgs) =>\n (event: Event): void => {\n const picker = event.target as Picker;\n if (onChange) onChange(picker.value);\n };\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-1\">Where do you live?</sp-field-label>\n <sp-picker\n id=\"picker-1\"\n @change=${handleChange(args)}\n label=\"Select a Country with a very long label, too long, in fact\"\n ${spreadProps(args)}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">Where do you live?</sp-field-label>\n <sp-picker\n ${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an item\"\n >\n <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\nquiet.args = {\n quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n value=\"1\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n value=\"1\"\n icons=\"none\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\niconsNone.args = {\n open: true,\n};\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n icons=\"only\"\n style=\"--spectrum-picker-width: 100px\"\n value=\"2\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n style=\"--spectrum-picker-width: 100px\"\n value=\"3\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n </sp-menu-item>\n </sp-picker>\n `;\n};\niconsOnly.args = {\n open: true,\n};\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n return html`\n <style>\n fieldset {\n float: left;\n clear: left;\n margin-bottom: 15px;\n }\n </style>\n <fieldset>\n <sp-field-label for=\"picker-open\">\n Where do you live?\n </sp-field-label>\n <sp-picker\n id=\"picker-open\"\n label=\"Open picker\"\n ${spreadProps(args)}\n @change=${handleChange(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long, in fact\n </span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-picker>\n </fieldset>\n <fieldset>\n <sp-field-label for=\"picker-closed\">\n Where do you live?\n </sp-field-label>\n <sp-picker\n id=\"picker-closed\"\n label=\"Picker that displays below the options\"\n @change=${handleChange(args)}\n >\n <span slot=\"label\">\n Other menu that goes behind the open one\n </span>\n <sp-menu-item>Not so many options...</sp-menu-item>\n </sp-picker>\n </fieldset>\n `;\n};\nOpen.args = {\n open: true,\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-initial\">Where do you live?</sp-field-label>\n <sp-picker\n id=\"picker-initial\"\n @change=${handleChange(args)}\n value=\"item-2\"\n ${spreadProps(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker\n @change=${handleChange(args)}\n readonly\n value=\"item-2\"\n ${spreadProps(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n const initialState = 'lb1-mo';\n return html`\n <sp-field-label for=\"picker-state\">\n What state do you live in?\n </sp-field-label>\n <sp-picker\n style=\"width: 400px;\"\n @change=${handleChange(args)}\n id=\"picker-state\"\n label=\"Pick a state\"\n ${spreadProps(args)}\n value=${initialState}\n >\n ${states.map(\n (state) => html`\n <sp-menu-item\n id=${state.id}\n value=${state.id}\n ?selected=${state.id === initialState}\n >\n ${state.label}\n </sp-menu-item>\n `\n )}\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\n\ncustom.args = {\n open: true,\n};\n"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["picker.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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';\nimport { states } from './states.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n title: 'Picker',\n component: 'sp-picker',\n args: {\n disabled: false,\n invalid: false,\n open: false,\n quiet: false,\n },\n argTypes: {\n onChange: { action: 'change' },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n invalid: {\n name: 'invalid',\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 open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the menu is open or not.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n quiet: {\n name: 'quiet',\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\ninterface StoryArgs {\n disabled?: boolean;\n invalid?: boolean;\n open?: boolean;\n quiet?: boolean;\n showText?: boolean;\n onChange?: (val: string) => void;\n [prop: string]: unknown;\n}\n\nconst handleChange =\n ({ onChange }: StoryArgs) =>\n (event: Event): void => {\n const picker = event.target as Picker;\n if (onChange) onChange(picker.value);\n };\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-1\">Where do you live?</sp-field-label>\n <sp-picker\n id=\"picker-1\"\n @change=${handleChange(args)}\n label=\"Select a Country with a very long label, too long, in fact\"\n ${spreadProps(args)}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\n\nexport const quiet = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">Where do you live?</sp-field-label>\n <sp-picker\n ${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an item\"\n >\n <sp-menu-item value=\"1\">Item 1</sp-menu-item>\n <sp-menu-item value=\"2\">Item 2</sp-menu-item>\n <sp-menu-item value=\"3\">Item 3</sp-menu-item>\n <sp-menu-item value=\"4\">Item 4</sp-menu-item>\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\nquiet.args = {\n quiet: true,\n};\n\nexport const icons = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n value=\"1\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const iconsNone = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n value=\"1\"\n icons=\"none\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\niconsNone.args = {\n open: true,\n};\n\nexport const iconValue = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n icons=\"only\"\n style=\"--spectrum-picker-width: 100px\"\n value=\"2\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\"></sp-icon-copy>\n Copy\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\"></sp-icon-delete>\n Delete\n </sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const iconsOnly = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-quiet\">\n Choose an action type...\n </sp-field-label>\n <sp-picker\n ...=${spreadProps(args)}\n id=\"picker-quiet\"\n @change=${handleChange(args)}\n label=\"Pick an action\"\n style=\"--spectrum-picker-width: 100px\"\n value=\"3\"\n >\n <sp-menu-item value=\"1\">\n <sp-icon-edit slot=\"icon\" label=\"Edit\"></sp-icon-edit>\n </sp-menu-item>\n <sp-menu-item value=\"2\">\n <sp-icon-copy slot=\"icon\" label=\"Copy\"></sp-icon-copy>\n </sp-menu-item>\n <sp-menu-item value=\"3\">\n <sp-icon-delete slot=\"icon\" label=\"Delete\"></sp-icon-delete>\n </sp-menu-item>\n </sp-picker>\n `;\n};\niconsOnly.args = {\n open: true,\n};\n\nexport const Open = (args: StoryArgs): TemplateResult => {\n return html`\n <style>\n fieldset {\n float: left;\n clear: left;\n margin-bottom: 15px;\n }\n </style>\n <fieldset>\n <sp-field-label for=\"picker-open\">\n Where do you live?\n </sp-field-label>\n <sp-picker\n id=\"picker-open\"\n label=\"Open picker\"\n ${spreadProps(args)}\n @change=${handleChange(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long, in fact\n </span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-picker>\n </fieldset>\n <fieldset>\n <sp-field-label for=\"picker-closed\">\n Where do you live?\n </sp-field-label>\n <sp-picker\n id=\"picker-closed\"\n label=\"Picker that displays below the options\"\n @change=${handleChange(args)}\n >\n <span slot=\"label\">\n Other menu that goes behind the open one\n </span>\n <sp-menu-item>Not so many options...</sp-menu-item>\n </sp-picker>\n </fieldset>\n `;\n};\nOpen.args = {\n open: true,\n};\n\nexport const initialValue = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"picker-initial\">Where do you live?</sp-field-label>\n <sp-picker\n id=\"picker-initial\"\n @change=${handleChange(args)}\n value=\"item-2\"\n ${spreadProps(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const readonly = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker\n @change=${handleChange(args)}\n readonly\n value=\"item-2\"\n ${spreadProps(args)}\n >\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n <sp-menu-item value=\"item-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"item-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"item-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"item-4\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item value=\"item-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"item-6\">Make Work Path</sp-menu-item>\n </sp-picker>\n `;\n};\n\nexport const custom = (args: StoryArgs): TemplateResult => {\n const initialState = 'lb1-mo';\n return html`\n <sp-field-label for=\"picker-state\">\n What state do you live in?\n </sp-field-label>\n <sp-picker\n style=\"width: 400px;\"\n @change=${handleChange(args)}\n id=\"picker-state\"\n label=\"Pick a state\"\n ${spreadProps(args)}\n value=${initialState}\n >\n ${states.map(\n (state) => html`\n <sp-menu-item\n id=${state.id}\n value=${state.id}\n ?selected=${state.id === initialState}\n >\n ${state.label}\n </sp-menu-item>\n `\n )}\n </sp-picker>\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n `;\n};\n\ncustom.args = {\n open: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|