@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 8.24 kB
Source Map (JSON)
{"version":3,"file":"collapsible.cjs","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n ref=\"collapsible\"\n v-on=\"$listeners\"\n >\n <!-- Element for capturing keypress events -->\n <div\n :id=\"!ariaLabelledBy && labelledBy\"\n ref=\"anchor\"\n :class=\"anchorClass\"\n >\n <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n <slot\n name=\"anchor\"\n :attrs=\"{\n 'aria-controls': id,\n 'aria-expanded': isOpen.toString(),\n 'role': 'button',\n }\"\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-controls=\"id\"\n :aria-expanded=\"`${isOpen}`\"\n :style=\"{\n 'width': maxWidth,\n }\"\n @click=\"defaultToggleOpen\"\n >\n <dt-icon-chevron-down\n v-if=\"isOpen\"\n class=\"d-collapsible__icon\"\n size=\"300\"\n />\n <dt-icon-chevron-right\n v-else\n class=\"d-collapsible__icon\"\n size=\"300\"\n />\n <span\n class=\"d-collapsible__anchor-text\"\n :title=\"anchorText\"\n >\n {{ anchorText }}\n </span>\n </dt-button>\n </slot>\n </div>\n <dt-collapsible-lazy-show\n :id=\"id\"\n ref=\"contentWrapper\"\n :aria-hidden=\"`${!isOpen}`\"\n :aria-labelledby=\"labelledBy\"\n :aria-label=\"ariaLabel\"\n :show=\"isOpen\"\n :element-type=\"contentElementType\"\n :class=\"contentClass\"\n :style=\"{\n 'max-height': maxHeight,\n 'max-width': maxWidth,\n }\"\n data-qa=\"dt-collapsible--content\"\n tabindex=\"-1\"\n appear\n v-on=\"$listeners\"\n @after-leave=\"onLeaveTransitionComplete\"\n @after-enter=\"onEnterTransitionComplete\"\n >\n <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n <slot\n name=\"content\"\n />\n </dt-collapsible-lazy-show>\n </component>\n</template>\n\n<script>\nimport { getUniqueString } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n name: 'DtCollapsible',\n\n components: {\n DtButton,\n DtCollapsibleLazyShow,\n DtLazyShow,\n DtIconChevronDown,\n DtIconChevronRight,\n },\n\n props: {\n /**\n * Text that is displayed on the anchor if nothing is passed in the slot.\n * Ignored if the anchor slot is used.\n */\n anchorText: {\n type: String,\n default: null,\n },\n\n /**\n * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n * expanded and trigger on click by default. If you set this value, the default trigger\n * behavior will be disabled, and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * The id of the content wrapper.\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * HTML element type (tag name) of the root element of the component.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * HTML element type (tag name) of the content wrapper element.\n */\n contentElementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * Additional class name for the anchor wrapper element.\n */\n anchorClass: {\n type: [String, Array, Object],\n default: null,\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: null,\n },\n\n /**\n * The maximum width of the anchor and collapsible element.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: null,\n },\n\n /**\n * The maximum height of the collapsible element.\n * Possible units rem|px|%|em\n */\n maxHeight: {\n type: String,\n default: null,\n },\n\n /**\n * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Id of the element that labels the collapsible content. Defaults to the anchor element.\n * Should provide this or ariaLabel but not both.\n */\n ariaLabelledBy: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when the content is shown or hidden\n *\n * @event opened\n * @type {Boolean}\n */\n 'opened',\n ],\n\n data () {\n return {\n isOpen: true,\n };\n },\n\n computed: {\n labelledBy () {\n // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n // there is no aria-label and the labelledby should point to the anchor\n return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n },\n },\n\n watch: {\n open: {\n handler: function (open) {\n if (open !== null) {\n this.isOpen = open;\n }\n },\n\n immediate: true,\n },\n },\n\n mounted () {\n this.validateProperAnchor();\n },\n\n methods: {\n onLeaveTransitionComplete () {\n this.$emit('opened', false);\n if (this.open !== null) {\n this.$emit('update:open', false);\n }\n },\n\n onEnterTransitionComplete () {\n this.$emit('opened', true, this.$refs.content);\n if (this.open !== null) {\n this.$emit('update:open', true);\n }\n },\n\n defaultToggleOpen () {\n if (this.open === null) {\n this.toggleOpen();\n }\n },\n\n toggleOpen () {\n this.isOpen = !this.isOpen;\n },\n\n validateProperAnchor () {\n if (!this.anchorText && !this.$scopedSlots.anchor) {\n console.error('anchor text and anchor slot content cannot both be falsy');\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIconChevronDown","DtIconChevronRight","getUniqueString","open"],"mappings":"iXAyFAA,EAAA,CACA,KAAA,gBAEA,WAAA,CACA,SAAAC,EAAAA,QACA,sBAAAC,EAAAA,QACA,WAAAC,EAAAA,QACA,kBAAAC,EAAAA,kBACA,mBAAAC,EAAAA,kBACA,EAEA,MAAA,CAKA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EASA,KAAA,CACA,KAAA,QACA,QAAA,IACA,EAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,EAAAA,gBAAA,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,KACA,EAKA,mBAAA,CACA,KAAA,OACA,QAAA,KACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,IACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,IACA,EAMA,SAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAKA,cAQA,QACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,EACA,CACA,EAEA,SAAA,CACA,YAAA,CAGA,OAAA,KAAA,gBAAA,CAAA,KAAA,WAAAA,EAAAA,gBAAA,uBAAA,CACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,SAAAC,EAAA,CACAA,IAAA,OACA,KAAA,OAAAA,EAEA,EAEA,UAAA,EACA,CACA,EAEA,SAAA,CACA,KAAA,qBAAA,CACA,EAEA,QAAA,CACA,2BAAA,CACA,KAAA,MAAA,SAAA,EAAA,EACA,KAAA,OAAA,MACA,KAAA,MAAA,cAAA,EAAA,CAEA,EAEA,2BAAA,CACA,KAAA,MAAA,SAAA,GAAA,KAAA,MAAA,OAAA,EACA,KAAA,OAAA,MACA,KAAA,MAAA,cAAA,EAAA,CAEA,EAEA,mBAAA,CACA,KAAA,OAAA,MACA,KAAA,WAAA,CAEA,EAEA,YAAA,CACA,KAAA,OAAA,CAAA,KAAA,MACA,EAEA,sBAAA,CACA,CAAA,KAAA,YAAA,CAAA,KAAA,aAAA,QACA,QAAA,MAAA,0DAAA,CAEA,CACA,CACA"}