{"version":3,"file":"Dialog-jN7tURt5.js","sources":["../assets/design_system/Dialog/Dialog.vue"],"sourcesContent":["<template>\n  <DialogRoot\n    :open=\"isOpen || isStorybook\"\n    :modal=\"!isStorybook\"\n    @update:open=\"closeDialog\"\n  >\n    <DialogPortal :disabled=\"isStorybook\">\n      <div class=\"buttondown-dialog-root\">\n        <DialogOverlay\n          class=\"dialog--overlay fixed inset-0 bg-gray-500 bg-opacity-75 backdrop-blur-sm\"\n        />\n        <DialogContent\n          ref=\"contentRef\"\n          :aria-describedby=\"undefined\"\n          class=\"dialog--content\"\n          :class=\"[\n            `fixed left-1/2 -translate-x-1/2`,\n            isMobile\n              ? `rounded-t-lg bottom-0`\n              : `rounded-lg top-1/2 -translate-y-1/2`,\n            `bg-white shadow-xl`,\n            `w-full overflow-y-auto`,\n            widthClass,\n          ]\"\n        >\n          <slot v-if=\"$slots.header\" name=\"header\"></slot>\n          <div v-else-if=\"title !== null\" class=\"p-4\">\n            <DialogTitle class=\"text-base font-bold\">{{ title }}</DialogTitle>\n          </div>\n\n          <div\n            :class=\"[\n              `px-4`,\n              !($slots.header || title !== null) && `pt-4`,\n              !slots.actions && `pb-4`,\n            ]\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            v-if=\"slots.actions\"\n            class=\"dialog--actions\"\n            :class=\"[\n              `sticky z-10 bottom-0 flex justify-between gap-4 border-t p-4`,\n              isMobile && `flex-col`,\n              showActionsBorder\n                ? `border-gray-300 bg-white`\n                : `border-transparent`,\n            ]\"\n          >\n            <slot name=\"actions\"></slot>\n          </div>\n        </DialogContent>\n      </div>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n\n<script lang=\"ts\">\n/** @deprecated */\nexport const DIALOG_CLASS = \"buttondown-dialog-root\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from \"radix-vue\";\nimport { computed, onWatcherCleanup, ref, watch } from \"vue\";\n\nimport { useMediaQuery } from \"@/lib/media_query\";\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  default(props: {}): void;\n  header?(props: {}): void;\n  actions?(props: {}): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    title: string | null;\n    variant?: \"wide\" | \"very-wide\" | \"super-wide\" | \"narrow\";\n  }>(),\n  {\n    variant: \"wide\",\n  }\n);\n\nconst contentRef = ref<any>();\n\nconst showActionsBorder = ref(false);\n\nconst isMobile = useMediaQuery(\"(width < 768px)\");\nconst isOpen = ref(true);\n\n// This is already enforced with the types\n// eslint-disable-next-line vue/return-in-computed-property\nconst widthClass = computed((): string => {\n  switch (props.variant) {\n    case \"wide\": {\n      return `max-w-xl`;\n    }\n    case \"narrow\": {\n      return `md:max-w-md`;\n    }\n    case \"very-wide\": {\n      return `max-w-3xl md:min-w-[20rem]`;\n    }\n    case \"super-wide\": {\n      return `max-w-5xl md:min-w-[20rem]`;\n    }\n  }\n});\n\nconst closeDialog = () => {\n  isOpen.value = false;\n  setTimeout(() => emit(\"close\"), 250);\n};\n\nwatch(\n  [() => contentRef.value?.$el, () => !!slots.actions],\n  ([contentEl, hasActions]: [HTMLElement | undefined, boolean]) => {\n    if (!contentEl || !hasActions) {\n      return;\n    }\n\n    const update = () => {\n      const clientHeight = contentEl.clientHeight;\n      const scrollHeight = contentEl.scrollHeight;\n      const scrollTop = contentEl.scrollTop;\n\n      const isScrollable = scrollHeight > clientHeight;\n      const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 2;\n\n      showActionsBorder.value = isScrollable && !isAtBottom;\n    };\n\n    const observer = new ResizeObserver(update);\n\n    observer.observe(contentEl);\n    contentEl.addEventListener(\"scroll\", update, { passive: true });\n\n    onWatcherCleanup(() => {\n      observer.disconnect();\n      contentEl.removeEventListener(\"scroll\", update);\n    });\n  },\n  { immediate: true }\n);\n\nconst isStorybook = computed(() => window.location.pathname.includes(\"memex\"));\n</script>\n\n<style lang=\"scss\" scoped>\n.buttondown-dialog-root {\n  z-index: 20;\n\n  :deep(.dialog--overlay) {\n    &[data-state=\"open\"] {\n      animation: overlay-fade-in 250ms cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    &[data-state=\"closed\"] {\n      animation: overlay-fade-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n    }\n  }\n\n  :deep(.dialog--content) {\n    // Max height is 820px, or screen height - 48px * 2 (top and bottom),\n    // whichever is the lowest, a little bit awkward to describe in Tailwind.\n    max-height: min(820px, calc(100% - (48px * 2)));\n\n    &[data-state=\"open\"] {\n      animation: content-scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    &[data-state=\"closed\"] {\n      animation: content-scale-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    @media (width < 768px) {\n      // We're a bit cramped for space wrt mobile, so let's bump the max-height\n      // a little bit (65px = header height + 12px)\n      max-height: min(820px, calc(100% - 65px));\n\n      &[data-state=\"open\"] {\n        animation: content-slide-in 250ms cubic-bezier(0.16, 1, 0.3, 1);\n      }\n      &[data-state=\"closed\"] {\n        animation: content-slide-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n      }\n    }\n  }\n\n  // Awkward to use Tailwind for a one-off, this is just `transition-colors` but\n  // it only applies to `border-color`. I've noticed that if `background-color`\n  // was set all the time it would cut off the outlines of inputs.\n  :deep(.dialog--actions) {\n    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n@keyframes overlay-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes overlay-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes content-scale-in {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes content-scale-out {\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.96);\n  }\n}\n\n@keyframes content-slide-in {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 16px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n\n@keyframes content-slide-out {\n  from {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, 16px);\n  }\n}\n</style>\n"],"names":["DIALOG_CLASS","emit","__emit","slots","_useSlots","props","__props","contentRef","ref","showActionsBorder","isMobile","useMediaQuery","isOpen","widthClass","computed","closeDialog","watch","_a","contentEl","hasActions","update","clientHeight","scrollHeight","scrollTop","isScrollable","isAtBottom","observer","onWatcherCleanup","isStorybook"],"mappings":"4xBA6DaA,EAAe,0HAe5B,MAAMC,EAAOC,EAIPC,EAAQC,IAMRC,EAAQC,EAURC,EAAaC,IAEbC,EAAoBD,EAAI,EAAK,EAE7BE,EAAWC,EAAc,iBAAiB,EAC1CC,EAASJ,EAAI,EAAI,EAIjBK,EAAaC,EAAS,IAAc,CACxC,OAAQT,EAAM,QAAS,CACrB,IAAK,OACI,MAAA,WAET,IAAK,SACI,MAAA,cAET,IAAK,YACI,MAAA,6BAET,IAAK,aACI,MAAA,4BAEX,CAAA,CACD,EAEKU,EAAc,IAAM,CACxBH,EAAO,MAAQ,GACf,WAAW,IAAMX,EAAK,OAAO,EAAG,GAAG,CAAA,EAGrCe,EACE,CAAC,IAAA,OAAM,OAAAC,EAAAV,EAAW,QAAX,YAAAU,EAAkB,KAAK,IAAM,CAAC,CAACd,EAAM,OAAO,EACnD,CAAC,CAACe,EAAWC,CAAU,IAA0C,CAC3D,GAAA,CAACD,GAAa,CAACC,EACjB,OAGF,MAAMC,EAAS,IAAM,CACnB,MAAMC,EAAeH,EAAU,aACzBI,EAAeJ,EAAU,aACzBK,EAAYL,EAAU,UAEtBM,EAAeF,EAAeD,EAC9BI,EAAa,KAAK,IAAIH,EAAeD,EAAeE,CAAS,EAAI,EAErDd,EAAA,MAAQe,GAAgB,CAACC,CAAA,EAGvCC,EAAW,IAAI,eAAeN,CAAM,EAE1CM,EAAS,QAAQR,CAAS,EAC1BA,EAAU,iBAAiB,SAAUE,EAAQ,CAAE,QAAS,GAAM,EAE9DO,EAAiB,IAAM,CACrBD,EAAS,WAAW,EACVR,EAAA,oBAAoB,SAAUE,CAAM,CAAA,CAC/C,CACH,EACA,CAAE,UAAW,EAAK,CAAA,EAGd,MAAAQ,EAAcd,EAAS,IAAM,OAAO,SAAS,SAAS,SAAS,OAAO,CAAC"}