feat: implement utilities from radix vue (#89)

* refactor: change all popper related element to use useForwardPropsEmits

* refactor: use useEmitAsProps from radix-vue

Author: zernonia

apps/www/src/lib/registry/default/ui/accordion/Accordion.vue

@@ -3,8 +3,8 @@ import {
   AccordionRoot,
   type AccordionRootEmits,
   type AccordionRootProps,
+  useEmitAsProps,
 } from 'radix-vue'
-import { useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
-import { useEmitAsProps } from '@/lib/utils'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'
 
 const props = defineProps<AlertDialogProps>()
-
 const emits = defineEmits<AlertDialogEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue

@@ -5,11 +5,11 @@ import {
   type AlertDialogContentProps,
   AlertDialogOverlay,
   AlertDialogPortal,
+  useEmitAsProps,
 } from 'radix-vue'
-import { cn, useEmitAsProps } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogContentProps & { class?: string }>()
-
 const emits = defineEmits<AlertDialogContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)

apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
 import { Check } from 'lucide-vue-next'
-import { cn, useEmitAsProps } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps>()
 const emits = defineEmits<CheckboxRootEmits>()

apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { CollapsibleRoot } from 'radix-vue'
+import { CollapsibleRoot, useEmitAsProps } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
-import { useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()

apps/www/src/lib/registry/default/ui/command/Command.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot } from 'radix-vue'
-import { cn, useEmitAsProps } from '@/lib/utils'
+import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxRootProps>()
 const emits = defineEmits<ComboboxRootEmits>()

apps/www/src/lib/registry/default/ui/command/CommandDialog.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
-import { useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()

apps/www/src/lib/registry/default/ui/command/CommandItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem } from 'radix-vue'
-import { cn, useEmitAsProps } from '@/lib/utils'
+import { ComboboxItem, useEmitAsProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxItemProps>()
 const emits = defineEmits<ComboboxItemEmits>()

apps/www/src/lib/registry/default/ui/command/CommandList.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, ComboboxViewport } from 'radix-vue'
-import { cn, useEmitAsProps } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxContentProps>()
 const emits = defineEmits<ComboboxContentEmits>()
 
-const emitsAsProps = useEmitAsProps(emits)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="{ ...props, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
     <div role="presentation">
       <slot />
     </div>

apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ContextMenuRoot } from 'radix-vue'
+import { ContextMenuRoot, useEmitAsProps } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()