{"version":3,"file":"index.mjs","sources":["../../../../src/components/Modal/index.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <Transition\n      v-bind=\"$attrs\"\n      :name=\"animationName\"\n      @after-leave=\"emit('close')\"\n      @leave-cancelled=\"emit('close')\"\n      @after-enter=\"emit('open')\"\n      @enter-cancelled=\"emit('open')\"\n    >\n      <div\n        v-show=\"opened\"\n        ref=\"root\"\n        class=\"fixed top-0 bottom-0 left-0 right-0 z-[100] p-4 lg:p-12\"\n        role=\"dialog\"\n      >\n        <div\n          class=\"robust-ui-modal__backdrop absolute top-0 left-0 right-0 bottom-0 bg-gray-100/70 dark:bg-black/40\"\n          @click.self=\"close\"\n        ></div>\n        <div\n          class=\"robust-ui-modal__box\"\n          :class=\"[modalBoxClass]\"\n          @keydown.esc=\"close\"\n        >\n          <div\n            class=\"relative flex max-h-full min-h-0 w-full flex-col border border-gray-200 bg-white/70 backdrop-blur-3xl dark:border-gray-800 dark:bg-gray-800/70\"\n            :class=\"[\n              modalClass,\n              modalBoxInnerClass,\n              !isSlideOut ? 'rounded-2xl' : 'h-full',\n            ]\"\n          >\n            <div\n              v-if=\"$slots.title\"\n              class=\"flex flex-shrink-0 items-center p-6 text-lg\"\n            >\n              <div class=\"flex-1 truncate\">\n                <slot name=\"title\" :close=\"manualClose\"></slot>\n              </div>\n              <button\n                v-if=\"props.dismissable\"\n                type=\"button\"\n                class=\"-m-4 p-4 text-gray-400 transition-colors duration-150 hover:text-gray-900 dark:hover:text-gray-100\"\n                @click=\"close\"\n              >\n                <PhX size=\"20\" class=\"block\" />\n              </button>\n            </div>\n            <div v-if=\"$slots.header\" class=\"w-full flex-shrink-0\">\n              <slot name=\"header\" :close=\"manualClose\"></slot>\n            </div>\n            <section\n              :class=\"[\n                autoOverflow\n                  ? 'overflow-y-auto supports-[overflow:overlay]:[overflow-y:overlay]'\n                  : undefined,\n              ]\"\n              class=\"flex-1\"\n            >\n              <slot :close=\"manualClose\"></slot>\n            </section>\n            <div v-if=\"$slots.footer\" class=\"w-full flex-shrink-0\">\n              <slot name=\"footer\" :close=\"manualClose\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, toRefs, watch } from 'vue';\nimport { PhX } from '@phosphor-icons/vue';\nimport { useScrollLock } from '@vueuse/core';\n\nconst props = defineProps({\n  modalClass: {\n    type: String,\n    default: undefined,\n  },\n  opened: {\n    type: Boolean,\n    default: false,\n  },\n  size: {\n    type: String,\n    default: 'md',\n  },\n  dismissable: {\n    type: Boolean,\n    default: true,\n  },\n  autoOverflow: {\n    type: Boolean,\n    default: true,\n  },\n  slideOutLeft: {\n    type: Boolean,\n    default: false,\n  },\n  slideOutRight: {\n    type: Boolean,\n    default: false,\n  },\n  center: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst emit = defineEmits(['open', 'close', 'update:opened']);\n\nconst { opened } = toRefs(props);\nlet scrollLocked;\n\nconst animationName = computed(() => {\n  if (props.slideOutLeft) {\n    return 'robust-ui-modal__slide-left';\n  }\n  if (props.slideOutRight) {\n    return 'robust-ui-modal__slide-right';\n  }\n\n  return 'robust-ui-modal__fade';\n});\n\nconst modalBoxClass = computed(() => {\n  let classString = '';\n\n  if (props.slideOutLeft) {\n    classString += 'absolute left-0 top-0 bottom-0 h-full min-h-0 w-full';\n  } else if (props.slideOutRight) {\n    classString += 'absolute right-0 top-0 bottom-0 h-full min-h-0 w-full';\n  } else if (props.center) {\n    classString += 'mx-auto h-full min-h-0 flex items-center';\n  } else {\n    classString += 'mx-auto h-full min-h-0';\n  }\n\n  switch (props.size) {\n    case 'full': {\n      classString += ' w-full';\n      break;\n    }\n    case '3xl': {\n      classString += ' max-w-7xl';\n      break;\n    }\n    case '2xl': {\n      classString += ' max-w-6xl';\n      break;\n    }\n    case 'xl': {\n      classString += ' max-w-5xl';\n      break;\n    }\n    case 'lg': {\n      classString += ' max-w-4xl';\n      break;\n    }\n    case 'sm': {\n      classString += ' max-w-md';\n      break;\n    }\n    default: {\n      classString += ' max-w-lg';\n      break;\n    }\n  }\n\n  return classString;\n});\nconst modalBoxInnerClass = computed(() => {\n  let classString = '';\n\n  switch (props.size) {\n    case 'full': {\n      classString += ' h-full';\n      break;\n    }\n  }\n\n  return classString;\n});\n\nconst isSlideOut = computed(() => {\n  return props.slideOutLeft || props.slideOutRight;\n});\n\nwatch(opened, stateChange);\n\nfunction stateChange(value) {\n  if (value) {\n    window.addEventListener('keydown', keyPress);\n    scrollLocked.value = true;\n  } else {\n    window.removeEventListener('keydown', keyPress);\n    scrollLocked.value = false;\n  }\n}\n\nfunction keyPress(e: KeyboardEvent) {\n  if (e.key === 'Escape' && opened.value === true) {\n    e.stopPropagation();\n    e.preventDefault();\n    close();\n  }\n}\n\nonMounted(() => {\n  scrollLocked = useScrollLock(document.documentElement);\n  stateChange(opened.value);\n});\n\nasync function open() {\n  opened.value = true;\n  emit('update:opened', true);\n}\n\nasync function close() {\n  if (props.dismissable) {\n    opened.value = false;\n    emit('update:opened', false);\n  }\n}\n\nasync function manualClose() {\n  opened.value = false;\n  emit('update:opened', false);\n}\n\ndefineExpose({\n  open,\n  close,\n});\n</script>\n<style lang=\"postcss\">\n.robust-ui-modal__fade-enter-active {\n  transition: all 150ms ease-in-out;\n\n  .robust-ui-modal__backdrop {\n    transition: all 150ms ease-in-out;\n  }\n\n  .robust-ui-modal__box {\n    transition: all 150ms ease-in-out;\n  }\n}\n\n.robust-ui-modal__fade-leave-active {\n  transition: all 100ms ease-in-out;\n\n  .robust-ui-modal__backdrop {\n    transition: all 100ms ease-in-out;\n  }\n\n  .robust-ui-modal__box {\n    transition: all 100ms ease-in-out;\n  }\n}\n\n.robust-ui-modal__fade-enter-from {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n}\n\n.robust-ui-modal__fade-leave-to {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateY(10px);\n    opacity: 0;\n  }\n}\n\n.robust-ui-modal__slide-right-enter-active,\n.robust-ui-modal__slide-left-enter-active {\n  transition: all 150ms ease-in-out;\n\n  .robust-ui-modal__backdrop {\n    transition: all 150ms ease-in-out;\n  }\n\n  .robust-ui-modal__box {\n    transition: all 150ms ease-in-out;\n  }\n}\n\n.robust-ui-modal__slide-right-leave-active,\n.robust-ui-modal__slide-left-leave-active {\n  transition: all 150ms ease-in-out;\n\n  .robust-ui-modal__backdrop {\n    transition: all 150ms ease-in-out;\n  }\n\n  .robust-ui-modal__box {\n    transition: all 150ms ease-in-out;\n  }\n}\n\n.robust-ui-modal__slide-right-enter-from {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n}\n\n.robust-ui-modal__slide-right-leave-to {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n}\n\n.robust-ui-modal__slide-left-enter-from {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n}\n\n.robust-ui-modal__slide-left-leave-to {\n  .robust-ui-modal__backdrop {\n    opacity: 0;\n  }\n\n  .robust-ui-modal__box {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","opened","toRefs","scrollLocked","animationName","computed","modalBoxClass","classString","modalBoxInnerClass","isSlideOut","watch","stateChange","value","keyPress","close","onMounted","useScrollLock","open","manualClose","__expose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,UAAMA,IAAQC,GAmCRC,IAAOC,GAEP,EAAE,QAAAC,EAAA,IAAWC,EAAOL,CAAK;AAC3B,QAAAM;AAEE,UAAAC,IAAgBC,EAAS,MACzBR,EAAM,eACD,gCAELA,EAAM,gBACD,iCAGF,uBACR,GAEKS,IAAgBD,EAAS,MAAM;AACnC,UAAIE,IAAc;AAYlB,cAVIV,EAAM,eACOU,KAAA,yDACNV,EAAM,gBACAU,KAAA,0DACNV,EAAM,SACAU,KAAA,6CAEAA,KAAA,0BAGTV,EAAM,MAAM;AAAA,QAClB,KAAK,QAAQ;AACI,UAAAU,KAAA;AACf;AAAA,QACF;AAAA,QACA,KAAK,OAAO;AACK,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,QACA,KAAK,OAAO;AACK,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,QACA,KAAK,MAAM;AACM,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,QACA,KAAK,MAAM;AACM,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,QACA,KAAK,MAAM;AACM,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,QACA,SAAS;AACQ,UAAAA,KAAA;AACf;AAAA,QACF;AAAA,MACF;AAEO,aAAAA;AAAA,IAAA,CACR,GACKC,IAAqBH,EAAS,MAAM;AACxC,UAAIE,IAAc;AAElB,cAAQV,EAAM,MAAM;AAAA,QAClB,KAAK,QAAQ;AACI,UAAAU,KAAA;AACf;AAAA,QACF;AAAA,MACF;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKE,IAAaJ,EAAS,MACnBR,EAAM,gBAAgBA,EAAM,aACpC;AAED,IAAAa,EAAMT,GAAQU,CAAW;AAEzB,aAASA,EAAYC,GAAO;AAC1B,MAAIA,KACK,OAAA,iBAAiB,WAAWC,CAAQ,GAC3CV,EAAa,QAAQ,OAEd,OAAA,oBAAoB,WAAWU,CAAQ,GAC9CV,EAAa,QAAQ;AAAA,IAEzB;AAEA,aAASU,EAAS,GAAkB;AAClC,MAAI,EAAE,QAAQ,YAAYZ,EAAO,UAAU,OACzC,EAAE,gBAAgB,GAClB,EAAE,eAAe,GACXa;IAEV;AAEA,IAAAC,EAAU,MAAM;AACC,MAAAZ,IAAAa,EAAc,SAAS,eAAe,GACrDL,EAAYV,EAAO,KAAK;AAAA,IAAA,CACzB;AAED,mBAAegB,IAAO;AACpB,MAAAhB,EAAO,QAAQ,IACfF,EAAK,iBAAiB,EAAI;AAAA,IAC5B;AAEA,mBAAee,IAAQ;AACrB,MAAIjB,EAAM,gBACRI,EAAO,QAAQ,IACfF,EAAK,iBAAiB,EAAK;AAAA,IAE/B;AAEA,mBAAemB,IAAc;AAC3B,MAAAjB,EAAO,QAAQ,IACfF,EAAK,iBAAiB,EAAK;AAAA,IAC7B;AAEa,WAAAoB,EAAA;AAAA,MACX,MAAAF;AAAA,MACA,OAAAH;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}