# All files / js/components/ui/dialog DialogScrollContent.vue

0% Statements 0/15
0% Branches 0/8
0% Functions 0/6
0% Lines 0/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60

     <script setup lang="ts">
    import { cn } from '@/lib/utils'
    import { X } from 'lucide-vue-next'
    import {
      DialogClose,
      DialogContent,
      type DialogContentEmits,
      type DialogContentProps,
      DialogOverlay,
      DialogPortal,
      useForwardPropsEmits,
    } from 'reka-ui'
    import { computed, type HTMLAttributes } from 'vue'

    const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
    const emits = defineEmits<DialogContentEmits>()

    const delegatedProps = computed(() => {
      const { class: _, ...delegated } = props

      return delegated
    })

    const forwarded = useForwardPropsEmits(delegatedProps, emits)
    </script>

    <template>
      <DialogPortal>
        <DialogOverlay
          class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
        >
          <DialogContent
            :class="
              cn(
                'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
                props.class,
              )
            "
            v-bind="forwarded"
            @pointer-down-outside="(event) => {
              const originalEvent = event.detail.originalEvent;
              const target = originalEvent.target as HTMLElement;
              if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
                event.preventDefault();
              }
            }"
          >
            <slot />

            <DialogClose
              class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
            >
              <X class="w-4 h-4" />
              <span class="sr-only">Close</span>
            </DialogClose>
          </DialogContent>
        </DialogOverlay>
      </DialogPortal>
    </template>