{"version":3,"file":"DropdownAlign-87d21326.js","sources":["../../../app/javascript/components/dropdown/DropdownAlign.vue"],"sourcesContent":["<template>\n  <div :class=\"widthClass\">\n    <div :id=\"popperId\">\n      <slot name=\"trigger\" />\n    </div>\n    <div :id=\"dropdownId\" class=\"z-20\">\n      <slot name=\"dropdown\" />\n    </div>\n  </div>\n</template>\n<script setup>\nimport { createPopper } from '@popperjs/core';\nimport { onMounted, watch, ref } from 'vue';\n\nconst props = defineProps({\n  on: Boolean,\n  placement: String,\n  widthClass: String\n});\n\nconst popperInstance = ref(null);\nconst popperId = `popper_${Math.random()}`;\nconst dropdownId = `dropdown_${Math.random()}`;\nconst popper = ref(null);\nconst dropdown = ref(null);\n\nonMounted(() => {\n  popper.value = document.getElementById(popperId);\n  dropdown.value = document.getElementById(dropdownId);\n});\n\nwatch(\n  () => props.on,\n  newVal => {\n    if (newVal == true) {\n      popperInstance.value = createPopper(popper.value, dropdown.value, {\n        placement: props.placement || 'bottom'\n      });\n    } else if (popperInstance.value) {\n      popperInstance.value.destroy();\n    }\n  }\n);\n</script>\n"],"names":["popperInstance","ref","popperId","dropdownId","popper","dropdown","onMounted","watch","props","newVal","createPopper"],"mappings":"uPAoBMA,EAAiBC,EAAI,IAAI,EACzBC,EAAW,UAAU,KAAK,OAAM,CAAE,GAClCC,EAAa,YAAY,KAAK,OAAM,CAAE,GACtCC,EAASH,EAAI,IAAI,EACjBI,EAAWJ,EAAI,IAAI,EAEzB,OAAAK,EAAU,IAAM,CACdF,EAAO,MAAQ,SAAS,eAAeF,CAAQ,EAC/CG,EAAS,MAAQ,SAAS,eAAeF,CAAU,CACrD,CAAC,EAEDI,EACE,IAAMC,EAAM,GACZC,GAAU,CACJA,GAAU,GACZT,EAAe,MAAQU,EAAaN,EAAO,MAAOC,EAAS,MAAO,CAChE,UAAWG,EAAM,WAAa,QACtC,CAAO,EACQR,EAAe,OACxBA,EAAe,MAAM,SAExB,CACH"}