{"version":3,"file":"SlideTransition-CVuSAOXV.js","sources":["../../../app/javascript/components/transitions/SlideTransition.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"slide\"\n    v-bind=\"$attrs\"\n    @after-enter=\"afterEnter\"\n    @enter=\"enter\"\n    @leave=\"leave\">\n    <slot></slot>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: \"SlideTransition\",\n  props: {\n    duration: {\n      type: Number,\n      default: 350,\n      required: false\n    }\n  },\n  emits: [\"after-enter\"],\n  methods: {\n    enter(element) {\n      const { width } = getComputedStyle(element);\n\n      element.style.width = width;\n      element.style.position = \"absolute\";\n      element.style.visibility = \"hidden\";\n      element.style.height = \"auto\";\n      element.style.transitionDuration = `${this.duration / 1000}s`;\n\n      const { height } = getComputedStyle(element);\n\n      element.style.width = null;\n      element.style.position = null;\n      element.style.visibility = null;\n      element.style.height = 0;\n\n      // Force repaint to make sure the\n      // animation is triggered correctly.\n      // eslint-disable-next-line no-unused-expressions\n      getComputedStyle(element).height;\n\n      // Trigger the animation.\n      // We use `requestAnimationFrame` because we need\n      // to make sure the browser has finished\n      // painting after setting the `height`\n      // to `0` in the line above.\n      requestAnimationFrame(() => {\n        element.style.height = height;\n      });\n    },\n\n    afterEnter(element) {\n      this.$emit(\"after-enter\");\n\n      element.style.height = \"auto\";\n    },\n\n    leave(element) {\n      const { height } = getComputedStyle(element);\n\n      element.style.height = height;\n      element.style.transitionDuration = `${this.duration / 1000}s`;\n\n      // Force repaint to make sure the\n      // animation is triggered correctly.\n      // eslint-disable-next-line no-unused-expressions\n      getComputedStyle(element).height;\n\n      requestAnimationFrame(() => {\n        element.style.height = 0;\n      });\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  will-change: height;\n  backface-visibility: hidden;\n}\n\n.slide-enter-active,\n.slide-leave-active {\n  transition-duration: 0.5s;\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, height;\n  overflow: hidden;\n}\n\n.slide-enter-from,\n.slide-leave-to {\n  height: 0;\n  opacity: 0;\n}\n</style>\n"],"names":["_sfc_main","element","width","height","_openBlock","_createBlock","_Transition","_mergeProps","_ctx","$options","_withCtx","_renderSlot"],"mappings":"sGAYA,MAAKA,EAAU,CACb,KAAM,kBACN,MAAO,CACL,SAAU,CACR,KAAM,OACN,QAAS,IACT,SAAU,EACZ,CACD,EACD,MAAO,CAAC,aAAa,EACrB,QAAS,CACP,MAAMC,EAAS,CACb,KAAM,CAAE,MAAAC,CAAI,EAAM,iBAAiBD,CAAO,EAE1CA,EAAQ,MAAM,MAAQC,EACtBD,EAAQ,MAAM,SAAW,WACzBA,EAAQ,MAAM,WAAa,SAC3BA,EAAQ,MAAM,OAAS,OACvBA,EAAQ,MAAM,mBAAqB,GAAG,KAAK,SAAW,GAAI,IAE1D,KAAM,CAAE,OAAAE,GAAW,iBAAiBF,CAAO,EAE3CA,EAAQ,MAAM,MAAQ,KACtBA,EAAQ,MAAM,SAAW,KACzBA,EAAQ,MAAM,WAAa,KAC3BA,EAAQ,MAAM,OAAS,EAKvB,iBAAiBA,CAAO,EAAE,OAO1B,sBAAsB,IAAM,CAC1BA,EAAQ,MAAM,OAASE,CACzB,CAAC,CACF,EAED,WAAWF,EAAS,CAClB,KAAK,MAAM,aAAa,EAExBA,EAAQ,MAAM,OAAS,MACxB,EAED,MAAMA,EAAS,CACb,KAAM,CAAE,OAAAE,GAAW,iBAAiBF,CAAO,EAE3CA,EAAQ,MAAM,OAASE,EACvBF,EAAQ,MAAM,mBAAqB,GAAG,KAAK,SAAW,GAAI,IAK1D,iBAAiBA,CAAO,EAAE,OAE1B,sBAAsB,IAAM,CAC1BA,EAAQ,MAAM,OAAS,CACzB,CAAC,CACH,CACF,CACF,0BA3EE,OAAAG,EAAA,EAAAC,EAOaC,EAPbC,EAOa,CANX,KAAK,OAAO,EACJC,EAAM,OAAA,CACb,aAAaC,EAAU,WACvB,QAAOA,EAAK,MACZ,QAAOA,EAAK,SANjB,QAAAC,EAOI,IAAa,CAAbC,EAAaH,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,IAPjB,EAAA"}