Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update DialogScrollContent.vue

Browse Source
This commit is contained in:
Sadegh Barati 2024-02-15 22:35:09 +03:30
parent 60c0189392
commit 217fa96191
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DialogClose,
DialogContent,
@ -6,21 +7,27 @@ import {
type DialogContentProps,
DialogOverlay,
DialogPortal,
useEmitAsProps,
useForwardPropsEmits,
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>()
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DialogContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
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-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
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="
@ -29,7 +36,7 @@ const emitsAsProps = useEmitAsProps(emits)
props.class,
)
"
v-bind="{ ...props, ...emitsAsProps }"
v-bind="forwarded"
>
<slot />

26
apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DialogClose,
DialogContent,
@ -6,29 +7,27 @@ import {
type DialogContentProps,
DialogOverlay,
DialogPortal,
useEmitAsProps,
useForwardPropsEmits,
} from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue'
import type { PointerDownOutsideEvent } from 'radix-vue/dist/DismissableLayer'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>()
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DialogContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
function handlePointerDown(event: PointerDownOutsideEvent) {
const originalEvent = event.detail.originalEvent
// Ignore click events on the scrollbar.
if (originalEvent.offsetX > originalEvent.target?.clientWidth || originalEvent.offsetY > originalEvent.target?.clientHeight)
event.preventDefault()
}
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-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
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="
@ -37,8 +36,7 @@ function handlePointerDown(event: PointerDownOutsideEvent) {
props.class,
)
"
v-bind="{ ...props, ...emitsAsProps }"
@pointer-down-outside="handlePointerDown"
v-bind="forwarded"
>
<slot />