@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.32 kB
Source Map (JSON)
{"version":3,"file":"collapsible-lazy-show.cjs","sources":["../../../components/collapsible/collapsible_lazy_show.vue"],"sourcesContent":["<template>\n <!-- applies the transition on initial render -->\n <transition\n :appear=\"appear\"\n enter-active-class=\"d-collapsible__enter-active\"\n leave-active-class=\"d-collapsible__leave-active\"\n :css=\"isCSSEnabled\"\n @before-enter=\"beforeEnter\"\n @enter=\"enter\"\n @after-enter=\"afterEnter\"\n @before-leave=\"beforeLeave\"\n @leave=\"leave\"\n @after-leave=\"afterLeave\"\n v-on=\"$listeners\"\n >\n <component\n :is=\"elementType\"\n v-show=\"show\"\n v-on=\"$listeners\"\n >\n <!-- @slot slot for Content within collapsible -->\n <slot v-if=\"initialized\" />\n </component>\n </transition>\n</template>\n\n<script>\nexport default {\n name: 'DtCollapsibleLazyShow',\n\n /******************\n * PROPS *\n ******************/\n props: {\n /**\n * Whether the child slot is shown.\n */\n show: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Enable/Disable transition animation\n */\n appear: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML element type (tag name) of the content wrapper element.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n },\n\n /******************\n * DATA *\n ******************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n /******************\n * COMPUTED *\n ******************/\n computed: {\n /**\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n */\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /******************\n * WATCH *\n ******************/\n watch: {\n show: function (newValue) {\n if (!newValue || this.initialized) return;\n\n this.initialized = true;\n },\n },\n\n methods: {\n /**\n * @param {HTMLElement} element\n */\n beforeEnter (element) {\n requestAnimationFrame(() => {\n if (!element.style.height) {\n element.style.height = '0px';\n }\n });\n },\n\n /**\n * @param {HTMLElement} element\n */\n enter (element) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n element.style.height = `${element.scrollHeight}px`;\n });\n });\n },\n\n /**\n * @param {HTMLElement} element\n */\n afterEnter (element) {\n element.style.height = null;\n },\n\n /**\n * @param {HTMLElement} element\n */\n beforeLeave (element) {\n requestAnimationFrame(() => {\n if (!element.style.height) {\n element.style.height = `${element.offsetHeight}px`;\n }\n });\n },\n\n /**\n * @param {HTMLElement} element\n */\n leave (element) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n element.style.height = '0px';\n });\n });\n },\n\n /**\n * @param {HTMLElement} element\n */\n afterLeave (element) {\n element.style.height = null;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","newValue","element"],"mappings":"0KA2BAA,EAAA,CACA,KAAA,wBAKA,MAAA,CAIA,KAAA,CACA,KAAA,QACA,QAAA,IACA,EAKA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,KACA,CACA,EAKA,MAAA,CACA,MAAA,CACA,YAAA,CAAA,CAAA,KAAA,IACA,CACA,EAKA,SAAA,CAOA,cAAA,CACA,OAAA,QAAA,IAAA,WAAA,MACA,CACA,EAKA,MAAA,CACA,KAAA,SAAAC,EAAA,CACA,CAAAA,GAAA,KAAA,cAEA,KAAA,YAAA,GACA,CACA,EAEA,QAAA,CAIA,YAAAC,EAAA,CACA,sBAAA,IAAA,CACAA,EAAA,MAAA,SACAA,EAAA,MAAA,OAAA,MAEA,CAAA,CACA,EAKA,MAAAA,EAAA,CACA,sBAAA,IAAA,CACA,sBAAA,IAAA,CACAA,EAAA,MAAA,OAAA,GAAAA,EAAA,YAAA,IACA,CAAA,CACA,CAAA,CACA,EAKA,WAAAA,EAAA,CACAA,EAAA,MAAA,OAAA,IACA,EAKA,YAAAA,EAAA,CACA,sBAAA,IAAA,CACAA,EAAA,MAAA,SACAA,EAAA,MAAA,OAAA,GAAAA,EAAA,YAAA,KAEA,CAAA,CACA,EAKA,MAAAA,EAAA,CACA,sBAAA,IAAA,CACA,sBAAA,IAAA,CACAA,EAAA,MAAA,OAAA,KACA,CAAA,CACA,CAAA,CACA,EAKA,WAAAA,EAAA,CACAA,EAAA,MAAA,OAAA,IACA,CACA,CACA"}