@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.72 kB
Source Map (JSON)
{"version":3,"file":"collapsible-lazy-show.cjs","names":[],"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 v-bind=\"$attrs\"\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 >\n <component\n :is=\"elementType\"\n v-show=\"show\"\n v-bind=\"$attrs\"\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 inheritAttrs: false,\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"],"mappings":"wNA2BA,IAAK,EAAU,CACb,KAAM,wBAEN,aAAc,GAKd,MAAO,CAIL,KAAM,CACJ,KAAM,QACN,QAAS,KACV,CAKD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,MACV,CACF,CAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KACrB,EAMH,SAAU,CAOR,cAAgB,CACd,OAAA,QAAA,IAAA,WAAgC,QAEnC,CAKD,MAAO,CACL,KAAM,SAAU,EAAU,CACpB,CAAC,GAAY,KAAK,cAEtB,KAAK,YAAc,KAEtB,CAED,QAAS,CAIP,YAAa,EAAS,CACpB,0BAA4B,CACrB,EAAQ,MAAM,SACjB,EAAQ,MAAM,OAAS,QAEzB,EAMJ,MAAO,EAAS,CACd,0BAA4B,CAC1B,0BAA4B,CAC1B,EAAQ,MAAM,OAAS,GAAG,EAAQ,aAAa,KAC/C,EACF,EAMJ,WAAY,EAAS,CACnB,EAAQ,MAAM,OAAS,MAMzB,YAAa,EAAS,CACpB,0BAA4B,CACrB,EAAQ,MAAM,SACjB,EAAQ,MAAM,OAAS,GAAG,EAAQ,aAAa,MAEjD,EAMJ,MAAO,EAAS,CACd,0BAA4B,CAC1B,0BAA4B,CAC1B,EAAQ,MAAM,OAAS,OACvB,EACF,EAMJ,WAAY,EAAS,CACnB,EAAQ,MAAM,OAAS,MAE1B,CACF,mEApIc,EAAA,YAAA,EAAA,EAAA,YAAA,CApBV,OAAQ,EAAA,OACT,qBAAmB,8BACnB,qBAAmB,+BACX,EAAA,OAAM,CACb,IAAK,EAAA,aACL,cAAc,EAAA,YACd,QAAO,EAAA,MACP,aAAa,EAAA,WACb,cAAc,EAAA,YACd,QAAO,EAAA,MACP,aAAa,EAAA,wCASF,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBANL,EAAA,YAAW,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAER,EAAA,OAAM,CAAA,CAAA,2BAGa,CAAf,EAAA,aAAA,EAAA,EAAA,YAAe,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,qBAJnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}