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

0% Statements 0/10
0% Branches 0/2
0% Functions 0/4
0% Lines 0/10

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

     <script setup lang="ts">
    import { cn } from '@/lib/utils'
    import { X } from 'lucide-vue-next'
    import {
      DialogClose,
      DialogContent,
      type DialogContentEmits,
      type DialogContentProps,
      DialogPortal,
      useForwardPropsEmits,
    } from 'reka-ui'
    import { computed, type HTMLAttributes } from 'vue'
    import DialogOverlay from './DialogOverlay.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 />
        <DialogContent
          data-slot="dialog-content"
          v-bind="forwarded"
          :class="
            cn(
              'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
              props.class,
            )"
        >
          <slot />

          <DialogClose
            class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <X />
            <span class="sr-only">Close</span>
          </DialogClose>
        </DialogContent>
      </DialogPortal>
    </template>