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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA8JA,gBACA,iBACA,mBAGA,aACA,sBAFA,aAKA,wDADA,2BADA,oDAGA,8BAKA,CAHA,+BACA,cACA,CCnHA,gBACA,2BAUA,uDACA,YACA,2DAEA,mCAVA,4CAWA,eAbA,cAKA,oBADA,kBADA,oBAGA,oBAKA,aAVA,8BAMA,gBAOA,oCAgBA,CAdA,sBACA,8GAGA,CAEA,qDACA,sDACA,CAEA,yBACA,mBACA,UACA,CAGA,gBAEA,6EADA,0EAMA,CAHA,yBACA,0EACA,CCjCA,gBACA,4DACA,8DAGA,eACA,iCAFA,UAiBA,CAbA,+BACA,0CACA,uDACA,CAEA,+BACA,mBACA,UACA,CAEA,2DACA,uCACA","sources":["webpack://@square/maker/./src/components/Choice/src/Choice.vue","webpack://@square/maker/./src/components/Choice/src/ChoiceOption.vue","webpack://@square/maker/./src/components/Choice/src/ChoiceCard.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"{\n\t\t\t[$s.Choice]: true,\n\t\t\t[$s.wrapChoices]: wrapChoices\n\t\t}\"\n\t\t:style=\"style\"\n\t>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport assert from '@square/maker/utils/assert';\nimport { getContrast } from '@square/maker/utils/get-contrast';\nimport { colord } from 'colord';\nimport key from './key';\n\nexport default {\n\tprovide() {\n\t\t/**\n\t\t * Unfortunately, it's difficult to pass reactive data via a provider in Vue 2\n\t\t * Vue 3 will bring the `computed` helper to make (most of) this cleaner\n\t\t */\n\t\treturn {\n\t\t\t[key]: this,\n\t\t};\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tmodel: {\n\t\tprop: 'selected',\n\t\tevent: 'choice:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Selected choice option\n\t\t */\n\t\tselected: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Disables choice option\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selects single choice option or multiple choice options\n\t\t */\n\t\tmode: {\n\t\t\ttype: String,\n\t\t\tdefault: 'single-select',\n\t\t\tvalidator: (modeValue) => ['single-select', 'multi-select'].includes(modeValue),\n\t\t},\n\t\t/**\n\t\t * Background color of a selected option\n\t\t */\n\t\tselectedColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid,\n\t\t},\n\t\t/**\n\t\t * Wraps the choice options\n\t\t */\n\t\twrapChoices: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentValue: this.selected,\n\t\t\tisMultiSelect: this.mode === 'multi-select',\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('choice', [\n\t\t\t'selectedColor',\n\t\t]),\n\t\tcontrastColor() {\n\t\t\treturn getContrast(this.resolvedSelectedColor, '#fff');\n\t\t},\n\t\tstyle() {\n\t\t\tif (this.resolvedSelectedColor) {\n\t\t\t\treturn {\n\t\t\t\t\t'--selected-color': this.resolvedSelectedColor,\n\t\t\t\t\t'--selected-contrast-color': this.contrastColor,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn {};\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('choice: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.', 'Choice');\n\t\t\t}\n\t\t},\n\n\t\tisSelected(value) {\n\t\t\tif (this.isMultiSelect) {\n\t\t\t\treturn this.currentValue.includes(value);\n\t\t\t}\n\t\t\treturn this.currentValue === value;\n\t\t},\n\n\t\tselectValue(value) {\n\t\t\tif (this.isMultiSelect) {\n\t\t\t\tconst currentValueArray = this.currentValue.slice();\n\n\t\t\t\tif (currentValueArray.includes(value)) {\n\t\t\t\t\tconst singleValue = 1;\n\t\t\t\t\tcurrentValueArray.splice(currentValueArray.indexOf(value), singleValue);\n\t\t\t\t} else {\n\t\t\t\t\tcurrentValueArray.push(value);\n\t\t\t\t}\n\n\t\t\t\tvalue = currentValueArray;\n\t\t\t}\n\n\t\t\tthis.currentValue = value;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Choice {\n\t--font-size: 14px;\n\t--line-height: 24px;\n\n\tdisplay: flex;\n\tgap: 8px;\n\tbox-sizing: border-box;\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-size: var(--font-size);\n\tfont-family: $maker-font-label-font-family;\n\tline-height: var(--line-height);\n\n\t&.wrapChoices {\n\t\tflex-wrap: wrap;\n\t}\n}\n</style>\n","<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.ChoiceOption,\n\t\t\t{ [$s.selected]: isSelected },\n\t\t]\"\n\t\t:disabled=\"isDisabled\"\n\t\t@click=\"selectSelf\"\n\t>\n\t\t<slot />\n\t</button>\n</template>\n\n<script>\nimport key from './key';\n\nexport default {\n\tinject: {\n\t\tcontrolState: key,\n\t},\n\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisSelected() {\n\t\t\treturn this.controlState.isSelected(this.value);\n\t\t},\n\n\t\tisDisabled() {\n\t\t\treturn this.disabled || this.controlState.disabled;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tselectSelf() {\n\t\t\tthis.controlState.selectValue(this.value);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/*\n\tDefined in Choice component:\n\t--selected-color\n\t--selected-contrast-color\n*/\n.ChoiceOption {\n\t--button-padding: 12px 24px;\n\n\tflex-shrink: 0;\n\tpadding: var(--button-padding);\n\tcolor: $maker-color-neutral-90;\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tline-height: inherit;\n\ttext-align: left;\n\tbackground-color: $maker-color-neutral-10;\n\tborder: none;\n\tborder-radius: $maker-shape-default-border-radius;\n\toutline: none;\n\tbox-shadow: var(--focus-border, 0 0);\n\tcursor: pointer;\n\ttransition: background-color 0.2s ease;\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 1px $maker-color-neutral-10,\n\t\t\t0 0 0 3px $maker-color-neutral-20;\n\t}\n\n\t&:not(:disabled, .selected):hover {\n\t\tbackground-color: $maker-color-neutral-20;\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n.selected {\n\tcolor: var(--selected-contrast-color, $maker-color-neutral-10);\n\tbackground-color: var(--selected-color, $maker-color-neutral-90);\n\n\t&:disabled {\n\t\tcolor: var(--selected-contrast-color, $maker-color-neutral-20);\n\t}\n}\n</style>\n","<template>\n\t<m-card\n\t\t:class=\"[\n\t\t\t$s.ChoiceCard,\n\t\t\t{\n\t\t\t\t[$s.selected]: isSelected,\n\t\t\t\t[$s.disabled]: isDisabled,\n\t\t\t},\n\t\t]\"\n\t\t:disabled=\"isDisabled\"\n\t\t@click=\"selectSelf\"\n\t>\n\t\t<!-- @slot has `selected` prop -->\n\t\t<slot\n\t\t\t:selected=\"isSelected\"\n\t\t/>\n\t</m-card>\n</template>\n\n<script>\nimport { MCard } from '@square/maker/components/Card';\nimport key from './key';\n\nexport default {\n\tcomponents: {\n\t\tMCard,\n\t},\n\n\tinject: {\n\t\tcontrolState: key,\n\t},\n\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisSelected() {\n\t\t\treturn this.controlState.isSelected(this.value);\n\t\t},\n\n\t\tisDisabled() {\n\t\t\treturn this.disabled || this.controlState.disabled;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tselectSelf() {\n\t\t\tif (!this.isDisabled) {\n\t\t\t\tthis.controlState.selectValue(this.value);\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.ChoiceCard {\n\t--color-border-active: $maker-color-neutral-80;\n\t--color-border-selected: $maker-color-neutral-90;\n\n\twidth: 100%;\n\tcursor: pointer;\n\ttransition: border-color 0.2s ease;\n\n\t&.selected {\n\t\tborder-color: var(--color-border-selected);\n\t\tbox-shadow: 0 0 0 1px var(--color-border-selected) inset;\n\t}\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&:not(.disabled, .selected):hover {\n\t\tborder-color: var(--color-border-active);\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}