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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA8OA,gBAEA,gBACA,YACA,eAHA,SAIA,CAEA,gBACA,eACA,CAEA,6BACA,eACA","sources":["webpack://@square/maker/./src/components/Accordion/src/Accordion.vue"],"sourcesContent":["<template>\n\t<div\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-row\n\t\t\t:id=\"id\"\n\t\t\t:class=\"$s.AccordionHeader\"\n\t\t\ttype=\"button\"\n\t\t\telement=\"button\"\n\t\t\t:aria-expanded=\"isExpanded\"\n\t\t\t:aria-controls=\"`${id}-content`\"\n\t\t\t@click=\"toggleExpanded\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<!-- @slot title of accordion -->\n\t\t\t\t<slot name=\"title\">\n\t\t\t\t\t<m-text\n\t\t\t\t\t\tpattern=\"title\"\n\t\t\t\t\t\t:size=\"-2\"\n\t\t\t\t\t\ttext-transform=\"uppercase\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ title }}\n\t\t\t\t\t</m-text>\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template #secondary>\n\t\t\t\t<!-- @slot secondary info, goes under title -->\n\t\t\t\t<slot name=\"secondary\">\n\t\t\t\t\t<m-text\n\t\t\t\t\t\tv-if=\"secondary\"\n\t\t\t\t\t\tpattern=\"paragraph\"\n\t\t\t\t\t\t:size=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ secondary }}\n\t\t\t\t\t</m-text>\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template #side>\n\t\t\t\t<!-- @slot side info, goes left of open/close icon -->\n\t\t\t\t<slot name=\"side\">\n\t\t\t\t\t<m-text\n\t\t\t\t\t\tv-if=\"side\"\n\t\t\t\t\t\tpattern=\"title\"\n\t\t\t\t\t\t:size=\"-2\"\n\t\t\t\t\t\ttext-transform=\"uppercase\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ side }}\n\t\t\t\t\t</m-text>\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template #side-secondary>\n\t\t\t\t<!-- @slot side secondary info, goes under side slot -->\n\t\t\t\t<slot name=\"side-secondary\">\n\t\t\t\t\t<m-text\n\t\t\t\t\t\tv-if=\"sideSecondary\"\n\t\t\t\t\t\tpattern=\"paragraph\"\n\t\t\t\t\t\t:size=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ sideSecondary }}\n\t\t\t\t\t</m-text>\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template #suffix>\n\t\t\t\t<!-- @slot open & close icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<m-icon :name=\"iconName\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</m-row>\n\t\t<m-transition-collapse>\n\t\t\t<div\n\t\t\t\tv-if=\"isExpanded\"\n\t\t\t\t:id=\"`${id}-content`\"\n\t\t\t\trole=\"region\"\n\t\t\t\t:aria-labelledby=\"id\"\n\t\t\t\t:aria-hidden=\"!isExpanded\"\n\t\t\t\t:class=\"$s.ContentWrapper\"\n\t\t\t>\n\t\t\t\t<!-- @slot content to expand & collapse -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</m-transition-collapse>\n\t</div>\n</template>\n\n<script>\nimport { isUndefined } from 'lodash';\nimport { MRow } from '@square/maker/components/Row';\nimport { MText } from '@square/maker/components/Text';\nimport { MIcon } from '@square/maker/components/Icon';\nimport { MTransitionCollapse } from '@square/maker/components/TransitionCollapse';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tMText,\n\t\tMIcon,\n\t\tMRow,\n\t\tMTransitionCollapse,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'expanded',\n\t\tevent: 'accordion:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * if truthy or equal to expandKey the accordion will expand, otherwise it will collapse\n\t\t */\n\t\texpanded: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * used to orchestrate the collapsing & expanding of multiple accordions\n\t\t */\n\t\texpandKey: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * accordion title, will be overriden if title slot is used\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * secondary info, will be overridden if secondary slot is used\n\t\t */\n\t\tsecondary: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * accordion side title, will be overriden if title slot is used\n\t\t */\n\t\tside: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * secondary side info, will be overridden if side-secondary slot is used\n\t\t */\n\t\tsideSecondary: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * ID for the accordion header, used for aria-controls.\n\t\t * A unique ID will be generated if not provided.\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => {\n\t\t\t\tconst BASE_36 = 36;\n\t\t\t\tconst RANDOM_ID_START_INDEX = 2;\n\t\t\t\tconst RANDOM_ID_LENGTH = 9;\n\t\t\t\treturn `m-accordion-header-${Math.random()\n\t\t\t\t\t.toString(BASE_36)\n\t\t\t\t\t.slice(RANDOM_ID_START_INDEX, RANDOM_ID_START_INDEX + RANDOM_ID_LENGTH)}`;\n\t\t\t},\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalExpanded: !!this.expanded,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\tisExpanded() {\n\t\t\t// if user didn't pass expanded prop OR is not listening\n\t\t\t// to updates then use internal data to manage expanded state\n\t\t\tif (isUndefined(this.expanded) || !this.$listeners['accordion:update']) {\n\t\t\t\treturn this.internalExpanded;\n\t\t\t}\n\t\t\tif (isUndefined(this.expandKey)) {\n\t\t\t\treturn !!this.expanded;\n\t\t\t}\n\t\t\treturn this.expanded === this.expandKey;\n\t\t},\n\t\ticonName() {\n\t\t\treturn this.isExpanded ? 'chevronUp' : 'chevronDown';\n\t\t},\n\t},\n\n\tmethods: {\n\t\ttoggleExpanded() {\n\t\t\t// no listener, just toggle internal state\n\t\t\tif (!this.$listeners['accordion:update']) {\n\t\t\t\tthis.internalExpanded = !this.internalExpanded;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// listener but no control, just emit updates\n\t\t\tif (isUndefined(this.expanded)) {\n\t\t\t\tthis.internalExpanded = !this.internalExpanded;\n\t\t\t\t/**\n\t\t\t\t * emits updated expand value after state change\n\t\t\t\t */\n\t\t\t\tthis.$emit('accordion:update', this.internalExpanded);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// listener & control, but no expandKey\n\t\t\t// emit toggled expanded value\n\t\t\tif (isUndefined(this.expandKey)) {\n\t\t\t\tthis.$emit('accordion:update', !this.expanded);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// collapsing with expandKey, emit false\n\t\t\tif (this.expanded === this.expandKey) {\n\t\t\t\tthis.$emit('accordion:update', false);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// expanding with expandKey, emit expandKey\n\t\t\tthis.$emit('accordion:update', this.expandKey);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.AccordionHeader {\n\tpadding: 0;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n}\n\n.ContentWrapper {\n\toverflow: hidden;\n}\n\n.ContentWrapper > *:first-child {\n\tmargin-top: 16px;\n}\n</style>\n"],"names":[],"sourceRoot":""}