{"version":3,"file":"Modal.cjs","sources":["../../common/Modal/Modal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, VNode, watch } from \"vue\";\n\nimport { ModalClassesKey, ModalProps } from \"./types\";\n\nconst {\n  open = false,\n  placement = \"center\",\n  width = \"default\",\n  clearIcon = true,\n  headerDivider = false,\n  footerDivider = false,\n  borderRadius = true,\n  shadow = true,\n  border = true,\n  id = \"\",\n  classes = {} as Partial<Record<ModalClassesKey, string>>,\n  backdropClose = true,\n  backdropBlur = false,\n  escapeClose = true,\n} = defineProps<ModalProps>();\n\nconst modalContentOpen = ref(open);\n\nconst emits = defineEmits<{\n  (e: \"onClose\", value: boolean): void;\n}>();\n\nconst closeModal = (): void => {\n  modalContentOpen.value = false;\n  setTimeout(() => {\n    emits(\"onClose\", false);\n  }, 300);\n};\n\ndefineSlots<{\n  header(): VNode;\n  body(): VNode;\n  footer(): VNode;\n}>();\n\nconst escapeHandler = (e: KeyboardEvent) => {\n  if (open && e?.key?.toLowerCase() === \"escape\") {\n    closeModal();\n  }\n};\n\nwatch(\n  () => open,\n  (value) => {\n    if (value) {\n      setTimeout(() => {\n        modalContentOpen.value = true;\n      }, 50);\n    }\n    if (escapeClose) {\n      if (value) {\n        document.addEventListener(\"keydown\", escapeHandler);\n      } else {\n        document.removeEventListener(\"keydown\", escapeHandler);\n      }\n    }\n  }\n);\n\nconst handleBackdropClose = () => {\n  if (backdropClose) closeModal();\n};\n</script>\n\n<template>\n  <div\n    v-show=\"modalContentOpen\"\n    :id=\"id\"\n    tabindex=\"-1\"\n    role=\"alertdialog\"\n    :aria-modal=\"open\"\n    :data-modal-placement=\"`modal-${placement}`\"\n    :class=\"[\n      'h-modal modal-container modal visible fixed !z-40 w-full overflow-x-hidden overflow-y-auto p-4 !opacity-100',\n      `modal-${placement}`,\n      { '!hidden': !open },\n      { 'backdrop-blur': backdropBlur },\n      classes?.overlayContainer,\n    ]\"\n    aria-hidden\n    @click.self.exact=\"handleBackdropClose\"\n  >\n    <!-- Modal content -->\n    <Transition name=\"modal-fade\">\n      <div\n        v-show=\"modalContentOpen\"\n        data-testid=\"modal\"\n        :class=\"[\n          'bg-app-white dark:bg-app-gray-800 pointer-events-auto relative h-full md:h-auto',\n          'origin-center transition duration-300 ease-in-out',\n          `modal-size-${width}`,\n          { 'rounded-lg': borderRadius, 'shadow-sm': shadow, 'dark:border-app-gray-800 border': border },\n          classes?.modalContent,\n        ]\"\n      >\n        <button\n          v-if=\"clearIcon\"\n          type=\"button\"\n          :class=\"[\n            'text-app-gray-400 hover:text-app-gray-900 dark:hover:text-app-white absolute top-1 right-1 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm',\n            classes?.clearIcon,\n          ]\"\n          data-modal-hide=\"staticModal\"\n          @click=\"closeModal\"\n        >\n          <svg class=\"size-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        <!-- Modal header -->\n        <div\n          v-if=\"$slots?.header\"\n          :class=\"[\n            'border-app-gray-200 dark:border-app-gray-600 flex items-start justify-between px-6 py-4',\n            { 'border-b': headerDivider },\n            classes?.header,\n          ]\"\n          data-testid=\"modal-header\"\n        >\n          <slot name=\"header\" />\n        </div>\n        <!-- Modal body -->\n        <div v-if=\"$slots?.body\" :class=\"['space-y-6 px-6 py-4', classes?.body]\" data-testid=\"modal-body\">\n          <slot name=\"body\" />\n        </div>\n        <!-- Modal footer -->\n        <div\n          v-if=\"$slots?.footer\"\n          :class=\"[\n            'border-app-gray-200 dark:border-app-gray-600 flex items-center space-x-2 px-6 py-4',\n            { 'border-t': footerDivider },\n            classes?.footer,\n          ]\"\n          data-testid=\"modal-footer\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n@reference \"../../styles/main.css\";\n\n.modal {\n  @apply top-0 right-0 bottom-0 left-0 m-0 h-full w-full bg-[#0006];\n}\n\n.modal.backdrop-blur:not(dialog:not(.modal-open)),\n.modal.backdrop-blur::backdrop {\n  @apply backdrop-blur-[4px];\n}\n\n.modal-container {\n  pointer-events: fill !important;\n}\n\n.modal-top-left {\n  @apply top-0 left-0 flex justify-start items-start;\n}\n\n.modal-top-right {\n  @apply top-0 right-0 flex justify-end items-start;\n}\n\n.modal-bottom-left {\n  @apply bottom-0 left-0 flex justify-start items-end;\n}\n\n.modal-bottom-right {\n  @apply bottom-0 right-0 flex justify-end items-end;\n}\n\n.modal-top-center {\n  @apply top-0 right-0 flex justify-center items-start;\n}\n\n.modal-bottom-center {\n  @apply bottom-0 right-0 flex justify-center items-end;\n}\n\n.modal-center {\n  @apply flex justify-center items-center;\n}\n\n.modal-size-small {\n  @apply max-w-md;\n}\n\n.modal-size-default {\n  @apply max-w-lg;\n}\n\n.modal-size-large {\n  @apply max-w-4xl;\n}\n\n.modal-size-extra-large {\n  @apply max-w-7xl;\n}\n\n.modal-size-full {\n  @apply max-w-full h-full;\n}\n\n.modal-fade-enter-from,\n.modal-fade-leave-to {\n  transform: scale(0.5);\n  opacity: 0;\n}\n</style>\n"],"names":["modalContentOpen","ref","__props","emits","__emit","closeModal","escapeHandler","e","watch","value","handleBackdropClose","_createElementBlock","_normalizeClass","_createVNode","_Transition","_createElementVNode","$slots","_renderSlot","_ctx"],"mappings":"2qBAsBA,MAAMA,EAAmBC,EAAAA,IAAIC,MAAI,EAE3BC,EAAQC,EAIRC,EAAa,IAAY,CAC7BL,EAAiB,MAAQ,GACzB,WAAW,IAAM,CACfG,EAAM,UAAW,EAAK,CACxB,EAAG,GAAG,CACR,EAQMG,EAAiBC,GAAqB,CACtCL,EAAA,MAAQK,GAAG,KAAK,YAAA,IAAkB,UACpCF,EAAA,CAEJ,EAEAG,EAAAA,MACE,IAAMN,EAAA,KACLO,GAAU,CACLA,GACF,WAAW,IAAM,CACfT,EAAiB,MAAQ,EAC3B,EAAG,EAAE,EAEHE,EAAA,cACEO,EACF,SAAS,iBAAiB,UAAWH,CAAa,EAElD,SAAS,oBAAoB,UAAWA,CAAa,EAG3D,CAAA,EAGF,MAAMI,EAAsB,IAAM,CAC5BR,EAAA,eAAeG,EAAA,CACrB,+CAIEM,EAAAA,mBA8EM,MAAA,CA5EH,GAAIT,EAAA,GACL,SAAS,KACT,KAAK,cACJ,aAAYA,EAAA,KACZ,gCAA+BA,EAAA,SAAS,GACxC,MAAKU,EAAAA,eAAA,wHAAwIV,EAAA,SAAS,eAAwBA,EAAA,IAAA,mBAAiCA,EAAA,YAAA,EAAsBA,EAAA,SAAS,gBAAA,GAO/O,cAAA,GACC,wBAAkBQ,EAAmB,CAAA,OAAA,OAAA,CAAA,CAAA,GAGtCG,EAAAA,YA2DaC,EAAAA,WAAA,CA3DD,KAAK,cAAY,mBAC3B,IAyDM,kBAzDNC,EAAAA,mBAyDM,MAAA,CAvDJ,cAAY,QACX,MAAKH,EAAAA,eAAA,qJAAwLV,EAAA,KAAK,iBAA8BA,EAAA,aAAY,YAAeA,EAAA,OAAM,kCAAqCA,EAAA,MAAA,EAAoBA,EAAA,SAAS,YAAA,KAS5TA,EAAA,yBADRS,EAAAA,mBAiBS,SAAA,OAfP,KAAK,SACJ,MAAKC,EAAAA,eAAA,uKAAmMV,EAAA,SAAS,SAAA,GAIlN,kBAAgB,cACf,QAAOG,CAAA,mBAERU,EAAAA,mBAMM,MAAA,CAND,MAAM,SAAS,KAAK,eAAe,QAAQ,YAAY,MAAM,4BAAA,GAChEA,EAAAA,mBAIE,OAAA,CAHA,YAAU,UACV,EAAE,qMACF,YAAU,SAAA,2CAMRC,EAAAA,QAAQ,sBADhBL,EAAAA,mBAUM,MAAA,OARH,MAAKC,EAAAA,eAAA,uGAAqIV,EAAA,aAAA,EAA6BA,EAAA,SAAS,MAAA,GAKjL,cAAY,cAAA,GAEZe,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kCAGbF,EAAAA,QAAQ,oBAAnBL,EAAAA,mBAEM,MAAA,OAFoB,MAAKC,EAAAA,eAAA,CAAA,sBAA0BV,EAAA,SAAS,IAAI,CAAA,EAAG,cAAY,YAAA,GACnFe,EAAAA,WAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kCAIdF,EAAAA,QAAQ,sBADhBL,EAAAA,mBAUM,MAAA,OARH,MAAKC,EAAAA,eAAA,kGAAgIV,EAAA,aAAA,EAA6BA,EAAA,SAAS,MAAA,GAK5K,cAAY,cAAA,GAEZe,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gDAtDhBlB,EAAA,KAAgB,CAAA,6BAnBpBA,EAAA,KAAgB,CAAA"}