{"version":3,"file":"BaseModal-P2QjBS19.js","sources":["../../src/base/BaseModal.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"alwaysActive || isActive\" to=\"body\">\n    <div\n      ref=\"elModal\"\n      :class=\"[\n        $style.BaseModal,\n        hasEntered && $style.hasEntered,\n        { '!bg-black': !goBack },\n        { 'hidden w-0 h-0': alwaysActive && !isActive },\n      ]\"\n      @click.self=\"onClickOutsideDodo\"\n    >\n      <div v-if=\"onDashboard\" class=\"max-xl:h-11\"></div>\n      <div\n        class=\"h-full dark:bg-zinc-900 dark:text-gray-200\"\n        :class=\"[\n          !goBack || width === 'full' ? '!w-full' : width && $style[width],\n          !goBack || width === 'full' ? '' : $style.width,\n        ]\"\n      >\n        <div :class=\"$style.sheet\" :style=\"sheetStyles\">\n          <span v-if=\"yDebounced >= 70\" class=\"h-12 translate-x-full w-1 opacity-0\"></span>\n          <!-- todo fix me -->\n          <Row\n            v-if=\"!slimHeader || yDebounced < 70\"\n            :class=\"[$style.header, { '!bg-zinc-200': black }, slimHeader ? 'h-12' : 'h-16 sticky']\"\n            align=\"center\"\n          >\n            <Row grow align=\"center\">\n              <Button\n                v-if=\"goBack\"\n                data-testid=\"close-modal\"\n                aria-label=\"Back\"\n                square\n                variant=\"text\"\n                @click=\"triggerClick\"\n              >\n                <Icon name=\"arrow_back\" />\n              </Button>\n\n              <div v-if=\"title\" class=\"w-full\">\n                <h3 class=\"truncate\">{{ title }}</h3>\n              </div>\n\n              <template v-if=\"$slots.subheader\">\n                <slot name=\"subheader\"></slot>\n              </template>\n            </Row>\n            <slot name=\"controls\"></slot>\n          </Row>\n          <ScrollContainer ref=\"elContent\">\n            <div\n              class=\"dark:bg-zinc-900 flex flex-col\"\n              :class=\"[screen.isLarge.value ? 'p-8 gap-8' : 'p-4 gap-4', { 'dark:p-0': isNotLastModal && false }]\"\n            >\n              <slot></slot>\n            </div>\n          </ScrollContainer>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Icon, Button, ScrollContainer, Row } from '@madxnl/dodo-ui'\nimport { computed, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue'\nimport { onClickOutside, useDebounce, useScroll, useTitle } from '@vueuse/core'\nimport { modalService } from '../app/modalService'\nimport { useScreenSize } from '../utils'\n\n/* eslint-disable @typescript-eslint/no-floating-promises */\n/* eslint-disable @typescript-eslint/no-misused-promises */\n\ntype BaseModalWidth = 'small' | 'large' | 'full'\n\nconst props = withDefaults(\n  defineProps<{\n    title: string\n    shown?: boolean\n    warnUnsaved?: boolean\n    width?: BaseModalWidth\n    goBack?: boolean\n    skipPageTitle?: boolean\n    slimHeader?: boolean\n    alwaysActive?: boolean\n    black?: boolean\n  }>(),\n  {\n    warnUnsaved: false,\n    shown: true,\n    width: undefined,\n    goBack: true,\n    skipPageTitle: false,\n    slimHeader: false,\n    alwaysActive: false,\n    black: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:shown', shown: boolean): void\n  (e: 'exit'): void\n}>()\n\nconst elModal = ref<HTMLElement>()\nconst elContent = ref<HTMLElement>()\nconst { y } = useScroll(elContent)\nconst yDebounced = useDebounce(y, 50)\n\nconst previousTitle = document.title\nconst isActive = ref(false)\nconst hasEntered = ref(false)\nconst self = getCurrentInstance()!.uid\nconst modals = computed(() => modalService.state.modals)\nconst screen = useScreenSize()\n\nwatch(\n  () => props.shown,\n  (shown) => {\n    if (!props.skipPageTitle) {\n      if (shown) {\n        useTitle(props.title, { restoreOnUnmount: (originalTitle: string, _: string) => originalTitle })\n      } else {\n        useTitle(previousTitle)\n      }\n    }\n    toggle(shown)\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  toggle(false)\n})\n\nonClickOutside(elModal, onClickOutsideDodo)\n\nfunction triggerClick() {\n  if (!props.goBack) return\n\n  if (props.warnUnsaved) onClickOutsideDodo()\n  else toggle(false)\n}\n\nasync function toggle(toggle: boolean) {\n  if (modals.value.includes(self) === toggle) return\n  if (toggle) {\n    modalService.push(self)\n\n    isActive.value = true\n\n    window.addEventListener('keyup', onKeyup)\n    window.addEventListener('popstate', onPopstate)\n\n    if (props.width !== 'full') {\n      await new Promise((resolve) => setTimeout(resolve, 0))\n    }\n    hasEntered.value = true\n    emit('update:shown', true)\n  } else {\n    if (!props.goBack) return\n    modalService.remove(self)\n\n    window.removeEventListener('keyup', onKeyup)\n    window.removeEventListener('popstate', onPopstate)\n\n    hasEntered.value = false\n    if (props.width !== 'full') {\n      await new Promise((resolve) => setTimeout(resolve, 10))\n    }\n    emit('update:shown', false)\n    emit('exit')\n    isActive.value = false\n  }\n}\n\nfunction onKeyup(e: KeyboardEvent) {\n  if (!props.goBack) return\n\n  if (e.key === 'Escape' && modals.value.slice(-1)[0] === self) {\n    e.stopImmediatePropagation()\n    onClickOutsideDodo()\n  }\n}\n\nasync function onPopstate(e: PopStateEvent) {\n  if (modals.value.slice(-1)[0] === self) {\n    await toggle(false)\n  }\n}\n\nfunction onClickOutsideDodo() {\n  const msg = 'The form has not been saved, are you sure you want to leave?'\n  if (modals.value.slice(-1)[0] === self) {\n    if (!props.warnUnsaved || window.confirm(msg)) {\n      toggle(false)\n    }\n  }\n}\n\nconst sheetStyles = computed(() => {\n  if (!hasEntered.value) return 'right: -110%'\n  const idx = modals.value.indexOf(self)\n  const shift = (100 * (modals.value.length - idx - 1)) / modals.value.length\n  return `right: calc(${shift}vw - ${shift}%)`\n})\n\nconst isNotLastModal = computed(() => modals.value.slice(-1)[0] !== self) // todo it needs to filter full screen modals\n\nconst onDashboard = computed(() => window.location.href.includes('socialdatabase.com'))\n</script>\n\n<style lang=\"scss\" module>\n.BaseModal {\n  margin: 0 !important;\n  position: fixed;\n  z-index: 30;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  transition: background var(--dodo-transition-duration);\n  background: transparent;\n  &.hasEntered {\n    background: rgba(0, 0, 0, 0.5);\n  }\n}\n.sidebar {\n  flex-shrink: 0;\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  width: 25vw;\n  @media (min-width: 1000px) {\n    width: 250px;\n  }\n  @media (min-width: 1400px) {\n    width: 350px;\n  }\n  @media (min-width: 1800px) {\n    width: 450px;\n  }\n}\n.header {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  left: 0;\n  right: 0;\n  top: 0;\n  z-index: 1;\n  transition-duration: var(--dodo-transition-duration);\n  border-radius: 4px 4px 0 0;\n  box-shadow: var(--dodo-shadow-1);\n  background: white;\n  padding: 0 calc(var(--dodo-spacing) * 4);\n}\n.width {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  // background: var(--dodo-color-background);\n  @media (min-width: 1000px) {\n    max-width: 1000px;\n  }\n  @media (min-width: 1400px) {\n    max-width: 1200px;\n  }\n  @media (min-width: 1800px) {\n    max-width: 1400px;\n  }\n}\n\n.small {\n  max-width: 640px;\n  @media (min-width: 1800px) {\n    max-width: 640px;\n  }\n  @media (min-width: 2000px) {\n    max-width: 640px;\n  }\n  @media (min-width: 2200px) {\n    max-width: 640px;\n  }\n}\n\n.large {\n  max-width: 1400px;\n  @media (min-width: 1800px) {\n    max-width: 1600px;\n  }\n  @media (min-width: 2000px) {\n    max-width: 1800px;\n  }\n  @media (min-width: 2200px) {\n    max-width: 2000px;\n  }\n}\n\n.full {\n  max-width: 100%;\n  @media (min-width: 1800px) {\n    max-width: 100%;\n  }\n  @media (min-width: 2000px) {\n    max-width: 100%;\n  }\n  @media (min-width: 2200px) {\n    max-width: 100%;\n  }\n}\n\n.sheet {\n  background: var(--lightgray);\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-flow: column;\n  box-shadow: 32px 0 32px 32px rgba(0, 0, 0, 0.5);\n  transition: right var(--dodo-transition-duration);\n}\n.sheet::after {\n  display: block;\n  content: '';\n  width: 100%;\n  height: 100%;\n  background: var(--dodo-color-background);\n  position: absolute;\n  z-index: -1;\n}\n</style>\n"],"names":["props","__props","emit","__emit","elModal","ref","elContent","y","useScroll","yDebounced","useDebounce","previousTitle","isActive","hasEntered","self","getCurrentInstance","modals","computed","modalService","screen","useScreenSize","watch","shown","useTitle","originalTitle","_","toggle","onBeforeUnmount","onClickOutside","onClickOutsideDodo","triggerClick","onKeyup","onPopstate","resolve","sheetStyles","idx","shift","isNotLastModal","onDashboard"],"mappings":"gqCA4EA,MAAMA,EAAQC,EAwBRC,EAAOC,EAKPC,EAAUC,IACVC,EAAYD,IACZ,CAAE,EAAAE,CAAA,EAAMC,EAAUF,CAAS,EAC3BG,EAAaC,EAAYH,EAAG,EAAE,EAE9BI,EAAgB,SAAS,MACzBC,EAAWP,EAAI,EAAK,EACpBQ,EAAaR,EAAI,EAAK,EACtBS,EAAOC,EAAsB,EAAA,IAC7BC,EAASC,EAAS,IAAMC,EAAa,MAAM,MAAM,EACjDC,EAASC,KAEfC,EACE,IAAMrB,EAAM,MACXsB,GAAU,CACJtB,EAAM,gBACLsB,EACOC,EAAAvB,EAAM,MAAO,CAAE,iBAAkB,CAACwB,EAAuBC,KAAcD,EAAe,EAE/FD,EAASZ,CAAa,GAG1Be,EAAOJ,CAAK,CACd,EACA,CAAE,UAAW,EAAK,CAAA,EAGpBK,EAAgB,IAAM,CACpBD,EAAO,EAAK,CAAA,CACb,EAEDE,EAAexB,EAASyB,CAAkB,EAE1C,SAASC,GAAe,CACjB9B,EAAM,SAEPA,EAAM,YAAgC6B,MAC9B,EAAK,EACnB,CAEA,eAAeH,EAAOA,EAAiB,CACrC,GAAIV,EAAO,MAAM,SAASF,CAAI,IAAMY,EACpC,GAAIA,EACFR,EAAa,KAAKJ,CAAI,EAEtBF,EAAS,MAAQ,GAEV,OAAA,iBAAiB,QAASmB,CAAO,EACjC,OAAA,iBAAiB,WAAYC,CAAU,EAE1ChC,EAAM,QAAU,QAClB,MAAM,IAAI,QAASiC,GAAY,WAAWA,EAAS,CAAC,CAAC,EAEvDpB,EAAW,MAAQ,GACnBX,EAAK,eAAgB,EAAI,MACpB,CACD,GAAA,CAACF,EAAM,OAAQ,OACnBkB,EAAa,OAAOJ,CAAI,EAEjB,OAAA,oBAAoB,QAASiB,CAAO,EACpC,OAAA,oBAAoB,WAAYC,CAAU,EAEjDnB,EAAW,MAAQ,GACfb,EAAM,QAAU,QAClB,MAAM,IAAI,QAASiC,GAAY,WAAWA,EAAS,EAAE,CAAC,EAExD/B,EAAK,eAAgB,EAAK,EAC1BA,EAAK,MAAM,EACXU,EAAS,MAAQ,EACnB,CACF,CAEA,SAASmB,EAAQ,EAAkB,CAC5B/B,EAAM,QAEP,EAAE,MAAQ,UAAYgB,EAAO,MAAM,MAAM,EAAE,EAAE,CAAC,IAAMF,IACtD,EAAE,yBAAyB,EACRe,IAEvB,CAEA,eAAeG,EAAW,EAAkB,CACtChB,EAAO,MAAM,MAAM,EAAE,EAAE,CAAC,IAAMF,GAChC,MAAMY,EAAO,EAAK,CAEtB,CAEA,SAASG,GAAqB,CAExBb,EAAO,MAAM,MAAM,EAAE,EAAE,CAAC,IAAMF,IAC5B,CAACd,EAAM,aAAe,OAAO,QAFvB,8DAEkC,IAC1C0B,EAAO,EAAK,CAGlB,CAEM,MAAAQ,EAAcjB,EAAS,IAAM,CAC7B,GAAA,CAACJ,EAAW,MAAc,MAAA,eAC9B,MAAMsB,EAAMnB,EAAO,MAAM,QAAQF,CAAI,EAC/BsB,EAAS,KAAOpB,EAAO,MAAM,OAASmB,EAAM,GAAMnB,EAAO,MAAM,OAC9D,MAAA,eAAeoB,CAAK,QAAQA,CAAK,IAAA,CACzC,EAEKC,EAAiBpB,EAAS,IAAMD,EAAO,MAAM,MAAM,EAAE,EAAE,CAAC,IAAMF,CAAI,EAElEwB,EAAcrB,EAAS,IAAM,OAAO,SAAS,KAAK,SAAS,oBAAoB,CAAC"}