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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Choice/src/Choice.vue","webpack://../components/Choice/src/ChoiceOption.vue"],"names":[],"mappings":"AAmFA,mBACA,gBAAA,CACA,iBAAA,CACA,kBAAA,CAEA,YAAA,CACA,qBAAA,CACA,8BAAA,CACA,0BAAA,CACA,mBAAA,CACA,8BACA,CClCA,mBACA,mBAAA,CACA,kBAAA,CACA,wBAAA,CACA,4CAAA,CACA,kDAAA,CACA,iCAAA,CACA,gCAAA,CACA,6BAAA,CACA,0BAAA,CAEA,aAAA,CACA,6BAAA,CACA,8BAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,eAAA,CACA,+CAAA,CACA,WAAA,CACA,kCAAA,CACA,YAAA,CACA,kCAAA,CACA,cAgBA,CAdA,oCACA,gBACA,CAEA,yBACA,wEAGA,CAEA,4BACA,uCAAA,CACA,WACA,CAGA,mBACA,wBAAA,CACA,iDAKA,CAHA,4BACA,yCACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.Container,\n\t\t]\"\n\t>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport assert from '@square/maker/utils/assert';\nimport key from './key';\n\nexport default {\n\tprovide() {\n\t\treturn {\n\t\t\t[key]: this.$data,\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},\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\twatch: {\n\t\tselected() {\n\t\t\tthis.validateProps();\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.');\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Container {\n\t--font-size: 14px;\n\t--font-weight: 500;\n\t--line-height: 24px;\n\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\tfont-weight: var(--font-weight);\n\tfont-size: var(--font-size);\n\tfont-family: inherit;\n\tline-height: var(--line-height);\n}\n</style>\n","<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t{ [$s.selected]: isSelected },\n\t\t]\"\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\t},\n\n\tcomputed: {\n\t\tisSelected() {\n\t\t\tif (this.controlState.isMultiSelect) {\n\t\t\t\treturn this.controlState.currentValue.includes(this.value);\n\t\t\t}\n\t\t\treturn this.controlState.currentValue === this.value;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tselectSelf() {\n\t\t\tlet currentValue = this.value;\n\n\t\t\tif (this.controlState.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\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\t--border-radius: 8px;\n\t--color-white: #fff;\n\t--normal-text-color: #222;\n\t--normal-disabled-text-color: rgba(0, 0, 0, 0.4);\n\t--selected-disabled-text-color: rgba(255, 255, 255, 0.4);\n\t--normal-background-color: #f2f2f2;\n\t--selected-background-color: #222;\n\t--color-focus: rgba(0, 0, 0, 0.3);\n\t--button-padding: 12px 24px;\n\n\tflex-shrink: 0;\n\tpadding: var(--button-padding);\n\tcolor: var(--normal-text-color);\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tline-height: inherit;\n\ttext-align: left;\n\tbackground-color: var(--normal-background-color);\n\tborder: none;\n\tborder-radius: var(--border-radius);\n\toutline: none;\n\tbox-shadow: var(--focus-border, 0 0);\n\tcursor: pointer;\n\n\t&:not(:last-child) {\n\t\tmargin-right: 8px;\n\t}\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 1px var(--color-white),\n\t\t\t0 0 0 3px var(--color-focus);\n\t}\n\n\t&:disabled {\n\t\tcolor: var(--normal-disabled-text-color);\n\t\tcursor: initial;\n\t}\n}\n\n.selected {\n\tcolor: var(--color-white);\n\tbackground-color: var(--selected-background-color);\n\n\t&:disabled {\n\t\tcolor: var(--selected-disabled-text-color);\n\t}\n}\n</style>\n"]}