@square/maker/components/Menu/styles.css.map

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAoLA,gBACA,yDACA,oBACA,CAEA,gBACA,sDACA,oDACA,CAEA,gBACA,0DACA,yDACA,4DACA,oDAOA,kBADA,2DAHA,sBAEA,eADA,eAFA,iBAMA,CAEA,gBAGA,UACA,aAGA,CAEA,gCAHA,oBALA,kBACA,QAGA,0BAaA,CATA,gBAMA,8BADA,YAFA,WACA,UAKA,CAEA,gCAGA,mBAkBA,wCANA,8CACA,qCACA,sBAbA,mBAKA,+BAUA,eAjBA,aAUA,oBADA,kBADA,oBAJA,YAYA,aAVA,gBADA,sBAOA,uBAMA,iCAPA,mBARA,UA6DA,CA3CA,8DAEA,iBACA,CAEA,8DACA,6BACA,CAMA,gUAEA,uCACA,CAEA,kDACA,mBACA,UACA,CAEA,8DACA,+BACA,CAEA,wDACA,YACA,CAEA,8SAKA,gDADA,wFAEA,CAEA,oMAEA,6BACA,CCpIA,gBACA,aACA,sBACA,eACA,CC9BA,gCDiCA,iBCvBA,CAVA,gBACA,sBAEA,eADA,YAQA,CAJA,4CAEA,sDACA,CAGA,gBACA,cACA,UACA,CAEA,gCAGA,YADA,UAEA","sources":["webpack://@square/maker/./src/components/Select/src/SelectControl.vue","webpack://@square/maker/./src/components/Menu/src/Menu.vue","webpack://@square/maker/./src/components/Menu/src/MenuOption.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.SelectContainer,\n\t\t\t$s[`variant_${variant}`],\n\t\t]\"\n\t>\n\t\t<button\n\t\t\tv-if=\"$slots['private-menu']\"\n\t\t\t:class=\"[\n\t\t\t\t$s.SelectButton,\n\t\t\t\t{\n\t\t\t\t\t[$s.hasPrefix]: $slots.prefix,\n\t\t\t\t},\n\t\t\t]\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t\t<span>\n\t\t\t\t<!--\n\t\t\t\t\t@slot private slot used internally in Menu component\n\t\t\t\t\t@private\n\t\t\t\t-->\n\t\t\t\t<slot name=\"private-menu\" />\n\t\t\t</span>\n\t\t</button>\n\t\t<select\n\t\t\tv-else\n\t\t\tref=\"select\"\n\t\t\tv-model=\"selected\"\n\t\t\t:class=\"[\n\t\t\t\t$s.Select,\n\t\t\t\t{\n\t\t\t\t\t[$s.selected]: optionSelected,\n\t\t\t\t\t[$s.invalid]: invalid,\n\t\t\t\t\t[$s.hasPrefix]: $slots.prefix,\n\t\t\t\t},\n\t\t\t]\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t\t<option\n\t\t\t\tv-if=\"placeholder\"\n\t\t\t\t:value=\"placeholderValue\"\n\t\t\t\tdisabled\n\t\t\t>\n\t\t\t\t{{ placeholder }}\n\t\t\t</option>\n\t\t\t<option\n\t\t\t\tv-for=\"option in options\"\n\t\t\t\t:key=\"option.value\"\n\t\t\t\t:value=\"option.value\"\n\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t:selected=\"option.value === value\"\n\t\t\t>\n\t\t\t\t{{ option.label }}\n\t\t\t</option>\n\t\t</select>\n\t\t<m-icon\n\t\t\t:class=\"$s.Icon\"\n\t\t\tname=\"chevronDown\"\n\t\t/>\n\t\t<!--\n\t\t\tPrefix slot needs to come after the select, so we can target\n\t\t\tthem with the sibling selector (~) to apply webkit autofill styles\n\t\t\twhich are not otherwise targetable.\n\t\t-->\n\t\t<span\n\t\t\tv-if=\"$slots.prefix\"\n\t\t\t:class=\"$s.Prefix\"\n\t\t>\n\t\t\t<!-- @slot Select prefix -->\n\t\t\t<slot name=\"prefix\" />\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { MIcon } from '@square/maker/components/Icon';\n\n/**\n * @inheritAttrs select\n * @inheritListeners select\n */\nexport default {\n\tcomponents: {\n\t\tMIcon,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'select:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Select variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'fill',\n\t\t\tvalidator: (variant) => ['fill', 'outline'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * current selected value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Select placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Select options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => ([]),\n\t\t},\n\t\t/**\n\t\t * Toggles select invalid state\n\t\t */\n\t\tinvalid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tselected: {\n\t\t\tget() {\n\t\t\t\treturn this.value;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tthis.$emit('select:update', value);\n\t\t\t\treturn value;\n\t\t\t},\n\t\t},\n\n\t\toptionSelected() {\n\t\t\treturn this.options.find((opt) => opt.value === this.value);\n\t\t},\n\n\t\tplaceholderValue() {\n\t\t\t// This will return the current value if its not a valid option\n\t\t\treturn !this.optionSelected ? this.value : undefined;\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tupdated() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tmethods: {\n\t\tsetCustomValidity() {\n\t\t\tconst customValidity = this.invalid ? 'invalid' : '';\n\t\t\t// sets element's internal :invalid flag\n\t\t\tthis.$refs?.select?.setCustomValidity(customValidity);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/*\n\tMost (if not all) of these should be provided\n\tby the Theme Context, but this is a placeholder\n\tuntil we get a Theme Context component\n*/\n.variant_fill {\n\t--color-background: $maker-color-neutral-10;\n\t--color-border: transparent;\n}\n\n.variant_outline {\n\t--color-background: $maker-color-background;\n\t--color-border: $maker-color-neutral-20;\n}\n\n.SelectContainer {\n\t--color-placeholder: $maker-color-neutral-80;\n\t--color-foreground: $maker-color-neutral-90;\n\t--color-border-active: $maker-color-neutral-80;\n\t--color-error: $maker-color-error-fill;\n\n\tposition: relative;\n\tbox-sizing: border-box;\n\tmin-width: 80px;\n\tfont-size: 16px;\n\tborder-radius: $maker-shape-default-border-radius;\n\tfill: currentColor;\n}\n\n.Prefix {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 16px;\n\tline-height: 0;\n\ttransform: translateY(-50%);\n\tpointer-events: none;\n}\n\n.Icon {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 16px;\n\twidth: 16px;\n\theight: 16px;\n\tcolor: var(--color-foreground);\n\ttransform: translateY(-50%);\n\tpointer-events: none;\n}\n\n.Select,\n.SelectButton {\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: inherit;\n\twidth: 100%;\n\theight: 48px;\n\tpadding: 0 32px 0 16px;\n\toverflow: hidden;\n\tcolor: var(--color-placeholder);\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tbackground-color: var(--color-background, #fff);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: inherit;\n\toutline: none;\n\tcursor: pointer;\n\ttransition: border-color 0.2s ease;\n\tappearance: none;\n\n\t&.hasPrefix {\n\t\t/* select left padding + icon width + icon right padding */\n\t\tpadding-left: calc(16px + 16px + 8px);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--color-foreground);\n\t}\n\n\t&:not(:disabled, .invalid):hover {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:not(:disabled, .invalid):focus,\n\t&:not(:disabled, .invalid):active {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&.invalid {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&::-ms-expand {\n\t\tdisplay: none;\n\t}\n\n\t&:-webkit-autofill,\n\t&:-webkit-autofill:hover,\n\t&:-webkit-autofill:focus,\n\t&:-webkit-autofill:active {\n\t\tbox-shadow: 0 0 0 48px var(--color-foreground) inset, 0 0 0 9999px var(--color-foreground);\n\t\t-webkit-text-fill-color: var(--color-background);\n\t}\n\n\t&:-webkit-autofill ~ .Icon,\n\t&:-webkit-autofill ~ .Prefix {\n\t\tcolor: var(--color-background);\n\t}\n}\n</style>\n","<template>\n\t<div\n\t\t:class=\"$s.Menu\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-popover\n\t\t\tref=\"popover\"\n\t\t\tplacement=\"bottom-start\"\n\t\t\t@open=\"$emit('menu:open')\"\n\t\t\t@close=\"$emit('menu:close')\"\n\t\t>\n\t\t\t<template #action=\"popover\">\n\t\t\t\t<select-control\n\t\t\t\t\tv-if=\"$slots['toggle-select']\"\n\t\t\t\t\t:class=\"$s.MenuSelectControl\"\n\t\t\t\t\t@click.stop=\"popover.toggle()\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#prefix\n\t\t\t\t\t>\n\t\t\t\t\t\t<!-- @slot Select toggle prefix -->\n\t\t\t\t\t\t<slot name=\"toggle-select-prefix\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#private-menu\n\t\t\t\t\t>\n\t\t\t\t\t\t<!-- @slot Select toggle text -->\n\t\t\t\t\t\t<slot name=\"toggle-select\" />\n\t\t\t\t\t</template>\n\t\t\t\t</select-control>\n\t\t\t\t<div\n\t\t\t\t\tv-else\n\t\t\t\t\t@click=\"popover.toggle()\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @slot Custom toggle slot (not rendered if toggle-select is used) -->\n\t\t\t\t\t<slot\n\t\t\t\t\t\tname=\"toggle\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<template #content>\n\t\t\t\t<m-popover-content\n\t\t\t\t\t:class=\"$s.MenuContent\"\n\t\t\t\t\tpadding=\"16px 0\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @slot Menu options -->\n\t\t\t\t\t<div role=\"menu\">\n\t\t\t\t\t\t<slot name=\"menu\" />\n\t\t\t\t\t</div>\n\t\t\t\t</m-popover-content>\n\t\t\t</template>\n\t\t</m-popover>\n\t\t<pseudo-window\n\t\t\tdocument\n\t\t\t@keydown.esc=\"close\"\n\t\t/>\n\t</div>\n</template>\n\n<script>\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MPopover, MPopoverContent } from '@square/maker/components/Popover';\nimport assert from '@square/maker/utils/assert';\nimport SelectControl from '../../Select/src/SelectControl.vue';\nimport key from './key';\n\nexport default {\n\tcomponents: {\n\t\tPseudoWindow,\n\t\tMPopover,\n\t\tMPopoverContent,\n\t\tSelectControl,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\t[key]: this.$data,\n\t\t};\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'selected',\n\t\tevent: 'menu:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Selected menu option\n\t\t */\n\t\tselected: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'single-select',\n\t\t\tvalidator: (type) => ['multi-select', 'single-select', 'action'].includes(type),\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentValue: this.selected,\n\t\t\tisSingleSelect: this.type === 'single-select',\n\t\t\tisMultiSelect: this.type === 'multi-select',\n\t\t\tisActionSelect: this.type === 'action',\n\t\t};\n\t},\n\n\twatch: {\n\t\tselected() {\n\t\t\tthis.validateProps();\n\t\t\tthis.currentValue = this.selected;\n\t\t},\n\n\t\tcurrentValue(newValue) {\n\t\t\tthis.$emit('menu:update', newValue);\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.validateProps();\n\t},\n\n\tmethods: {\n\t\tvalidateProps() {\n\t\t\tif (this.isMultiSelect) {\n\t\t\t\tassert.error(Array.isArray(this.selected), 'The v-model value for a multi-select must be of type Array.', 'Menu');\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * closes the menu\n\t\t * @public\n\t\t */\n\t\tclose() {\n\t\t\t/**\n\t\t\t * ESC keyup event on window\n\t\t\t * @property {string}\n\t\t\t */\n\t\t\tthis.$refs.popover.close();\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.MenuContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 200px;\n}\n\n.MenuSelectControl {\n\tfill: currentColor;\n}\n</style>\n","<template>\n\t<m-row\n\t\t:class=\"$s.MenuOption\"\n\t\trole=\"menuitem\"\n\t\ttabindex=\"0\"\n\t\tv-bind=\"$attrs\"\n\t\t@click=\"selectSelf\"\n\t\t@keydown=\"handleKeyboardEvent\"\n\t>\n\t\t<template\n\t\t\tv-for=\"(_, slot) of $slots\"\n\t\t\t#[slot]\n\t\t>\n\t\t\t<slot\n\t\t\t\t:name=\"slot\"\n\t\t\t/>\n\t\t</template>\n\t\t<template\n\t\t\tv-if=\"isSelectOption\"\n\t\t\t#prefix\n\t\t>\n\t\t\t<span\n\t\t\t\t:class=\"$s.Check\"\n\t\t\t>\n\t\t\t\t<m-icon\n\t\t\t\t\tv-if=\"isSelected\"\n\t\t\t\t\t:class=\"$s.Icon\"\n\t\t\t\t\tname=\"check\"\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</template>\n\t</m-row>\n</template>\n\n<script>\nimport { MRow } from '@square/maker/components/Row';\nimport { MIcon } from '@square/maker/components/Icon';\nimport key from './key';\n\n/**\n * @inheritSlots ../../../components/Row/src/Row.vue\n */\nexport default {\n\tcomponents: {\n\t\tMRow,\n\t\tMIcon,\n\t},\n\n\tinject: {\n\t\tcontrolState: key,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisSelected() {\n\t\t\tconst { isMultiSelect, isSingleSelect, currentValue } = this.controlState;\n\n\t\t\tif (isMultiSelect) {\n\t\t\t\treturn currentValue.includes(this.value);\n\t\t\t}\n\t\t\treturn isSingleSelect && currentValue === this.value;\n\t\t},\n\n\t\tisSelectOption() {\n\t\t\tconst { isMultiSelect, isSingleSelect } = this.controlState;\n\t\t\treturn isMultiSelect || isSingleSelect;\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.$el?.previousElementSibling === null) {\n\t\t\tthis.$el.focus({ preventScroll: true });\n\t\t}\n\t},\n\n\tmethods: {\n\t\tselectSelf(clickEvent) {\n\t\t\tconst { isMultiSelect, isActionSelect } = this.controlState;\n\n\t\t\tif (isActionSelect && this.$listeners.click) {\n\t\t\t\tthis.$listeners.click(clickEvent);\n\t\t\t}\n\n\t\t\tlet currentValue = this.value;\n\n\t\t\tif (isMultiSelect) {\n\t\t\t\tconst currentValueArray = this.controlState.currentValue.slice();\n\n\t\t\t\tif (currentValueArray.includes(currentValue)) {\n\t\t\t\t\tconst singleValue = 1;\n\t\t\t\t\tcurrentValueArray.splice(currentValueArray.indexOf(currentValue), singleValue);\n\t\t\t\t} else {\n\t\t\t\t\tcurrentValueArray.push(currentValue);\n\t\t\t\t}\n\n\t\t\t\tcurrentValue = currentValueArray;\n\t\t\t}\n\n\t\t\tthis.controlState.currentValue = currentValue;\n\n\t\t\tthis.$emit('option:click');\n\t\t},\n\n\t\thandleKeyboardEvent(event) {\n\t\t\tswitch (event.key) {\n\t\t\tcase 'Enter':\n\t\t\t\tthis.selectSelf();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tthis.$el?.previousElementSibling?.focus({ preventScroll: true });\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tthis.$el?.nextElementSibling?.focus({ preventScroll: true });\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.MenuOption {\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tcursor: pointer;\n\tfill: currentColor;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: $maker-color-neutral-10;\n\t}\n}\n\n.Check {\n\tdisplay: block;\n\topacity: 0.7;\n}\n\n.Check,\n.Icon {\n\twidth: 24px;\n\theight: 24px;\n}\n</style>\n"],"names":[],"sourceRoot":""}