From 217fa961915718b05480e0d3ac353cb3263de13b Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 15 Feb 2024 22:35:09 +0330
Subject: [PATCH] chore: update `DialogScrollContent.vue`

---
 .../default/ui/dialog/DialogScrollContent.vue | 17 ++++++++----
 .../ui/dialog/DialogScrollContent.vue         | 26 +++++++++----------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
index 275020bb..1c4085fa 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
@@ -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 />
 
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
index 507b35ff..5d837f89 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
@@ -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 />