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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Stepper/src/Stepper.vue"],"names":[],"mappings":"AAyIA,mBACA,oBAAA,CAEA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,wBAAA,CAAA,gBACA,CAEA,mBACA,aAAA,CACA,uBAAA,CACA,eAAA,CACA,mBAAA,CACA,4BAAA,CACA,iCACA,CAEA,mBACA,UAAA,CACA,WACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.Stepper\"\n\t>\n\t\t<m-button\n\t\t\tshape=\"pill\"\n\t\t\tvariant=\"primary\"\n\t\t\t:size=\"size\"\n\t\t\t:color=\"color\"\n\t\t\t:text-color=\"textColor\"\n\t\t\t:disabled=\"value === minVal\"\n\t\t\t@click=\"decrement\"\n\t\t>\n\t\t\t<minus :class=\"$s.Icon\" />\n\t\t</m-button>\n\t\t<span :class=\"$s.Quantity\">\n\t\t\t{{ value }}\n\t\t</span>\n\t\t<m-button\n\t\t\tshape=\"pill\"\n\t\t\tvariant=\"primary\"\n\t\t\t:size=\"size\"\n\t\t\t:color=\"color\"\n\t\t\t:text-color=\"textColor\"\n\t\t\t:disabled=\"value === maxVal\"\n\t\t\t@click=\"increment\"\n\t\t>\n\t\t\t<plus :class=\"$s.Icon\" />\n\t\t</m-button>\n\t</div>\n</template>\n\n<script>\nimport { MButton } from '@square/maker/components/Button';\nimport Plus from '@square/maker-icons/Plus';\nimport Minus from '@square/maker-icons/Minus';\n\nexport default {\n\tcomponents: {\n\t\tMButton,\n\t\tPlus,\n\t\tMinus,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'stepper:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * stepper's current value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * stepper min value\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * stepper max value\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * stepper button background color\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: '#cccccc',\n\t\t},\n\t\t/**\n\t\t * stepper button text color\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: '#000000',\n\t\t},\n\n\t\t/**\n\t\t * stepper button size\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (size) => ['small', 'medium', 'large'].includes(size),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tmaxVal() {\n\t\t\treturn Number.parseInt(this.max, 10);\n\t\t},\n\n\t\tminVal() {\n\t\t\treturn Number.parseInt(this.min, 10);\n\t\t},\n\t},\n\n\tmethods: {\n\t\tincrement() {\n\t\t\tif (!Number.isNaN(this.maxVal) && this.value >= this.maxVal) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst incrementBy = 1;\n\t\t\t/**\n\t\t\t * updated stepper value\n\t\t\t * @property {number}\n\t\t\t */\n\t\t\tthis.$emit('stepper:update', this.value + incrementBy);\n\t\t},\n\t\tdecrement() {\n\t\t\tif (!Number.isNaN(this.minVal) && this.value <= this.minVal) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst decrementBy = 1;\n\t\t\t/**\n\t\t\t * updated stepper value\n\t\t\t * @property {number}\n\t\t\t */\n\t\t\tthis.$emit('stepper:update', this.value - decrementBy);\n\t\t},\n\t},\n};\n\n</script>\n\n<style module=\"$s\">\n.Stepper {\n\t--text-color: #4f2d52;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tuser-select: none;\n}\n\n.Quantity {\n\tmargin: 0 16px;\n\tcolor: var(--text-color);\n\tfont-weight: 500;\n\tfont-family: inherit;\n\tfont-feature-settings: \"tnum\";\n\tfont-variant-numeric: tabular-nums;\n}\n\n.Icon {\n\twidth: 24px;\n\theight: 24px;\n}\n</style>\n"]}