{"version":3,"file":"Dialog-2V3hn726.js","sources":["../../../app/javascript/src/components/Theme/Dialog.vue"],"sourcesContent":["<template>\n  <div class=\"theme-dialog modal micromodal-slide\" id=\"modal-share\" @click.stop>\n    <div class=\"modal__overlay\" tabindex=\"-1\" data-micromodal-close>\n      <div ref=\"modalRef\" class=\"modal__container\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-1-title\">\n        <header class=\"modal__header\">\n          <slot name=\"header\"></slot>\n          <button v-if=\"showClose\" class=\"modal__close\" aria-label=\"Close modal\" data-micromodal-close=\"\" @click=\"$emit('close')\"></button>\n        </header>\n        <main class=\"modal__content\">\n          <slot></slot>\n        </main>\n        <footer class=\"modal__footer\" v-if=\"$slots.footer\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\n\nconst modalRef = ref();\nconst emit = defineEmits(['close']);\n\nconst props = defineProps({\n  showClose: {\n    type: Boolean,\n    default: false\n  },\n  clickOutside: {\n    type: Boolean,\n    default: false\n  }\n});\n\nonClickOutside(modalRef, () => {\n  if (props.clickOutside) {\n    emit('close');\n  }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.theme-dialog {\n  @include micromodal;\n  .modal__content {\n    margin-top: unset;\n    margin-bottom: unset;\n  }\n}\n.theme-dialog .modal__container {\n  min-width: unset;\n  width: calc(100% - #{$spacing-12});\n  display: grid;\n  row-gap: $spacing-6;\n\n  @media (min-width: $breakpoint-m) {\n    min-width: $breakpoint-sm;\n    width: auto;\n  }\n}\n</style>\n"],"names":["modalRef","ref","emit","__emit","props","__props","onClickOutside"],"mappings":"+hBAuBA,MAAMA,EAAWC,EAAG,EACdC,EAAOC,EAEPC,EAAQC,EAWd,OAAAC,EAAeN,EAAU,IAAM,CACzBI,EAAM,cACRF,EAAK,OAAO,CAEhB,CAAC"}