@spectrum-web-components/picker 0.40.1 → 0.40.2
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 +13 -13
- package/stories/picker.stories.js +7 -39
- package/stories/picker.stories.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/picker",
|
|
3
|
-
"version": "0.40.
|
|
3
|
+
"version": "0.40.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -65,17 +65,17 @@
|
|
|
65
65
|
"lit-html"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@spectrum-web-components/base": "^0.40.
|
|
69
|
-
"@spectrum-web-components/button": "^0.40.
|
|
70
|
-
"@spectrum-web-components/icon": "^0.40.
|
|
71
|
-
"@spectrum-web-components/icons-ui": "^0.40.
|
|
72
|
-
"@spectrum-web-components/icons-workflow": "^0.40.
|
|
73
|
-
"@spectrum-web-components/menu": "^0.40.
|
|
74
|
-
"@spectrum-web-components/overlay": "^0.40.
|
|
75
|
-
"@spectrum-web-components/popover": "^0.40.
|
|
76
|
-
"@spectrum-web-components/reactive-controllers": "^0.40.
|
|
77
|
-
"@spectrum-web-components/shared": "^0.40.
|
|
78
|
-
"@spectrum-web-components/tray": "^0.40.
|
|
68
|
+
"@spectrum-web-components/base": "^0.40.2",
|
|
69
|
+
"@spectrum-web-components/button": "^0.40.2",
|
|
70
|
+
"@spectrum-web-components/icon": "^0.40.2",
|
|
71
|
+
"@spectrum-web-components/icons-ui": "^0.40.2",
|
|
72
|
+
"@spectrum-web-components/icons-workflow": "^0.40.2",
|
|
73
|
+
"@spectrum-web-components/menu": "^0.40.2",
|
|
74
|
+
"@spectrum-web-components/overlay": "^0.40.2",
|
|
75
|
+
"@spectrum-web-components/popover": "^0.40.2",
|
|
76
|
+
"@spectrum-web-components/reactive-controllers": "^0.40.2",
|
|
77
|
+
"@spectrum-web-components/shared": "^0.40.2",
|
|
78
|
+
"@spectrum-web-components/tray": "^0.40.2"
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
81
|
"@spectrum-css/picker": "^7.0.8"
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"./sync/index.js",
|
|
89
89
|
"./sync/sp-*.js"
|
|
90
90
|
],
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "e5fd35c7a98569150ca695ec0e0e7411c9c64c28"
|
|
92
92
|
}
|
|
@@ -9,6 +9,8 @@ import "@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js";
|
|
|
9
9
|
import { states } from "./states.js";
|
|
10
10
|
import "@spectrum-web-components/field-label/sp-field-label.js";
|
|
11
11
|
import { spreadProps } from "../../../test/lit-helpers.js";
|
|
12
|
+
import { isOverlayOpen } from "../../overlay/stories/index.js";
|
|
13
|
+
import "../../overlay/stories/index.js";
|
|
12
14
|
export default {
|
|
13
15
|
title: "Picker",
|
|
14
16
|
component: "sp-picker",
|
|
@@ -137,6 +139,7 @@ export const tooltip = (args) => {
|
|
|
137
139
|
tooltip.args = {
|
|
138
140
|
open: true
|
|
139
141
|
};
|
|
142
|
+
tooltip.decorators = [isOverlayOpen];
|
|
140
143
|
export const noVisibleLabel = (args) => {
|
|
141
144
|
return html`
|
|
142
145
|
<sp-picker
|
|
@@ -268,6 +271,7 @@ export const iconsNone = (args) => {
|
|
|
268
271
|
iconsNone.args = {
|
|
269
272
|
open: true
|
|
270
273
|
};
|
|
274
|
+
iconsNone.decorators = [isOverlayOpen];
|
|
271
275
|
export const iconValue = (args) => {
|
|
272
276
|
return html`
|
|
273
277
|
<sp-field-label for="picker-quiet">
|
|
@@ -325,6 +329,7 @@ export const iconsOnly = (args) => {
|
|
|
325
329
|
iconsOnly.args = {
|
|
326
330
|
open: true
|
|
327
331
|
};
|
|
332
|
+
iconsOnly.decorators = [isOverlayOpen];
|
|
328
333
|
export const Open = (args) => {
|
|
329
334
|
return html`
|
|
330
335
|
<style>
|
|
@@ -378,6 +383,7 @@ export const Open = (args) => {
|
|
|
378
383
|
Open.args = {
|
|
379
384
|
open: true
|
|
380
385
|
};
|
|
386
|
+
Open.decorators = [isOverlayOpen];
|
|
381
387
|
export const initialValue = (args) => {
|
|
382
388
|
return html`
|
|
383
389
|
<sp-field-label for="picker-initial">Where do you live?</sp-field-label>
|
|
@@ -419,44 +425,6 @@ export const readonly = (args) => {
|
|
|
419
425
|
</sp-picker>
|
|
420
426
|
`;
|
|
421
427
|
};
|
|
422
|
-
function nextFrame() {
|
|
423
|
-
return new Promise((res) => requestAnimationFrame(() => res()));
|
|
424
|
-
}
|
|
425
|
-
class CustomPickerReady extends HTMLElement {
|
|
426
|
-
constructor() {
|
|
427
|
-
super();
|
|
428
|
-
this.handleTriggerOpened = async () => {
|
|
429
|
-
await nextFrame();
|
|
430
|
-
const picker = document.querySelector("#picker-state");
|
|
431
|
-
picker.addEventListener("sp-opened", this.handlePickerOpen);
|
|
432
|
-
picker.open = true;
|
|
433
|
-
};
|
|
434
|
-
this.handlePickerOpen = async () => {
|
|
435
|
-
const picker = document.querySelector("#picker-state");
|
|
436
|
-
const actions = [nextFrame, picker.updateComplete];
|
|
437
|
-
await Promise.all(actions);
|
|
438
|
-
this.ready(true);
|
|
439
|
-
};
|
|
440
|
-
this.readyPromise = Promise.resolve(false);
|
|
441
|
-
this.readyPromise = new Promise((res) => {
|
|
442
|
-
this.ready = res;
|
|
443
|
-
this.setup();
|
|
444
|
-
});
|
|
445
|
-
}
|
|
446
|
-
async setup() {
|
|
447
|
-
await nextFrame();
|
|
448
|
-
}
|
|
449
|
-
get updateComplete() {
|
|
450
|
-
return this.readyPromise;
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
customElements.define("complex-picker-ready", CustomPickerReady);
|
|
454
|
-
const customPickerDecorator = (story) => {
|
|
455
|
-
return html`
|
|
456
|
-
${story()}
|
|
457
|
-
<custom-picker-ready></custom-picker-ready>
|
|
458
|
-
`;
|
|
459
|
-
};
|
|
460
428
|
export const custom = (args) => {
|
|
461
429
|
const initialState = "lb1-mo";
|
|
462
430
|
return html`
|
|
@@ -492,8 +460,8 @@ export const custom = (args) => {
|
|
|
492
460
|
</p>
|
|
493
461
|
`;
|
|
494
462
|
};
|
|
495
|
-
custom.decorators = [customPickerDecorator];
|
|
496
463
|
custom.args = {
|
|
497
464
|
open: true
|
|
498
465
|
};
|
|
466
|
+
custom.decorators = [isOverlayOpen];
|
|
499
467
|
//# sourceMappingURL=picker.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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/tooltip/sp-tooltip.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 value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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 tooltip = (args: StoryArgs): TemplateResult => {\n const { open, ...rest } = args;\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(rest)}\n >\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </sp-menu-item>\n <sp-tooltip\n slot=\"tooltip\"\n ?open=${open}\n self-managed\n placement=\"right\"\n >\n This Picker wants to know where you live.\n </sp-tooltip>\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};\ntooltip.args = {\n open: true,\n};\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker\n @change=${handleChange(args)}\n label=\"Where do you live?\"\n ${spreadProps(args)}\n >\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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 slottedLabel = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n <span slot=\"label\">Where do you live?</span>\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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 .backdrop-filter-test {\n backdrop-filter: saturate(80%);\n }\n </style>\n <fieldset class=\"backdrop-filter-test\">\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-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-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-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\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass CustomPickerReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const picker = document.querySelector('#picker-state') as Picker;\n picker.addEventListener('sp-opened', this.handlePickerOpen);\n picker.open = true;\n };\n\n handlePickerOpen = async (): Promise<void> => {\n const picker = document.querySelector('#picker-state') as Picker;\n const actions = [nextFrame, picker.updateComplete];\n\n await Promise.all(actions);\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('complex-picker-ready', CustomPickerReady);\n\nconst customPickerDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <custom-picker-ready></custom-picker-ready>\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.decorators = [customPickerDecorator];\n\ncustom.args = {\n open: true,\n};\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,cAAc;AACvB,OAAO;AACP,SAAS,mBAAmB;
|
|
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/tooltip/sp-tooltip.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';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport '../../overlay/stories/index.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 value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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 tooltip = (args: StoryArgs): TemplateResult => {\n const { open, ...rest } = args;\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(rest)}\n >\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </sp-menu-item>\n <sp-tooltip\n slot=\"tooltip\"\n ?open=${open}\n self-managed\n placement=\"right\"\n >\n This Picker wants to know where you live.\n </sp-tooltip>\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};\ntooltip.args = {\n open: true,\n};\ntooltip.decorators = [isOverlayOpen];\n\nexport const noVisibleLabel = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker\n @change=${handleChange(args)}\n label=\"Where do you live?\"\n ${spreadProps(args)}\n >\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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 slottedLabel = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-picker @change=${handleChange(args)} ${spreadProps(args)}>\n <span slot=\"label\">Where do you live?</span>\n <sp-menu-item value=\"option-1\">Deselect</sp-menu-item>\n <sp-menu-item value=\"option-2\">Select Inverse</sp-menu-item>\n <sp-menu-item value=\"option-3\">Feather...</sp-menu-item>\n <sp-menu-item value=\"option-4\">Select and Mask...</sp-menu-item>\n <sp-menu-item value=\"option-5\">Save Selection</sp-menu-item>\n <sp-menu-item disabled value=\"option-6\">\n Make Work Path\n </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};\niconsNone.decorators = [isOverlayOpen];\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};\niconsOnly.decorators = [isOverlayOpen];\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 .backdrop-filter-test {\n backdrop-filter: saturate(80%);\n }\n </style>\n <fieldset class=\"backdrop-filter-test\">\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-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};\nOpen.decorators = [isOverlayOpen];\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-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-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};\ncustom.args = {\n open: true,\n};\ncustom.decorators = [isOverlayOpen];\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|