refactor: use useEmitAsProps from radix-vue

This commit is contained in:
zernonia 2023-09-28 15:52:20 +08:00
parent b60f22de90
commit 3b8ccab7ef
53 changed files with 81 additions and 149 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,9 +4,10 @@ import {
type ContextMenuCheckboxItemEmits, type ContextMenuCheckboxItemEmits,
type ContextMenuCheckboxItemProps, type ContextMenuCheckboxItemProps,
ContextMenuItemIndicator, ContextMenuItemIndicator,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { Check } from 'lucide-vue-next' import { Check } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>() const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuCheckboxItemEmits>() const emits = defineEmits<ContextMenuCheckboxItemEmits>()

View File

@ -3,8 +3,9 @@ import {
ContextMenuItem, ContextMenuItem,
type ContextMenuItemEmits, type ContextMenuItemEmits,
type ContextMenuItemProps, type ContextMenuItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>() const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>() const emits = defineEmits<ContextMenuItemEmits>()

View File

@ -4,9 +4,10 @@ import {
ContextMenuRadioItem, ContextMenuRadioItem,
type ContextMenuRadioItemEmits, type ContextMenuRadioItemEmits,
type ContextMenuRadioItemProps, type ContextMenuRadioItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { Circle } from 'lucide-vue-next' import { Circle } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>() const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuRadioItemEmits>() const emits = defineEmits<ContextMenuRadioItemEmits>()

View File

@ -6,9 +6,10 @@ import {
type DialogContentProps, type DialogContentProps,
DialogOverlay, DialogOverlay,
DialogPortal, DialogPortal,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { X } from 'lucide-vue-next' import { X } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>() const props = defineProps<DialogContentProps & { class?: string }>()
const emits = defineEmits<DialogContentEmits>() const emits = defineEmits<DialogContentEmits>()

View File

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

View File

@ -4,9 +4,10 @@ import {
type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemEmits,
type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator, DropdownMenuItemIndicator,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { Check } from 'lucide-vue-next' import { Check } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>() const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>() const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

View File

@ -4,9 +4,10 @@ import {
DropdownMenuRadioItem, DropdownMenuRadioItem,
type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemEmits,
type DropdownMenuRadioItemProps, type DropdownMenuRadioItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { Circle } from 'lucide-vue-next' import { Circle } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>() const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()

View File

@ -3,8 +3,9 @@ import {
NavigationMenuContent, NavigationMenuContent,
type NavigationMenuContentEmits, type NavigationMenuContentEmits,
type NavigationMenuContentProps, type NavigationMenuContentProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<NavigationMenuContentProps & { class?: string }>() const props = defineProps<NavigationMenuContentProps & { class?: string }>()

View File

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

View File

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

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue' import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<RadioGroupRootProps & { class?: string }>() const props = defineProps<RadioGroupRootProps & { class?: string }>()

View File

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

View File

@ -6,10 +6,11 @@ import {
type DialogContentProps, type DialogContentProps,
DialogOverlay, DialogOverlay,
DialogPortal, DialogPortal,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { X } from 'lucide-vue-next' import { X } from 'lucide-vue-next'
import { cva } from 'class-variance-authority' import { cva } from 'class-variance-authority'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
interface SheetContentProps extends DialogContentProps { interface SheetContentProps extends DialogContentProps {
side?: 'left' | 'right' | 'top' | 'bottom' side?: 'left' | 'right' | 'top' | 'bottom'

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootEmits, SliderRootProps } from 'radix-vue' import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue' import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SliderRootProps>() const props = defineProps<SliderRootProps>()
const emits = defineEmits<SliderRootEmits>() const emits = defineEmits<SliderRootEmits>()

View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ToggleEmits, ToggleProps } from 'radix-vue' import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle } from 'radix-vue' import { Toggle, useEmitAsProps } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue' import { computed } from 'vue'
import { toggleVariants } from '.' import { toggleVariants } from '.'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {} interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,9 +4,10 @@ import {
type ContextMenuCheckboxItemEmits, type ContextMenuCheckboxItemEmits,
type ContextMenuCheckboxItemProps, type ContextMenuCheckboxItemProps,
ContextMenuItemIndicator, ContextMenuItemIndicator,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { CheckIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>() const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuCheckboxItemEmits>() const emits = defineEmits<ContextMenuCheckboxItemEmits>()

View File

@ -3,8 +3,9 @@ import {
ContextMenuItem, ContextMenuItem,
type ContextMenuItemEmits, type ContextMenuItemEmits,
type ContextMenuItemProps, type ContextMenuItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>() const props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>() const emits = defineEmits<ContextMenuItemEmits>()

View File

@ -4,9 +4,10 @@ import {
ContextMenuRadioItem, ContextMenuRadioItem,
type ContextMenuRadioItemEmits, type ContextMenuRadioItemEmits,
type ContextMenuRadioItemProps, type ContextMenuRadioItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue' import { DotFilledIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>() const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
const emits = defineEmits<ContextMenuRadioItemEmits>() const emits = defineEmits<ContextMenuRadioItemEmits>()

View File

@ -6,9 +6,10 @@ import {
type DialogContentProps, type DialogContentProps,
DialogOverlay, DialogOverlay,
DialogPortal, DialogPortal,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue' import { Cross2Icon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: string }>() const props = defineProps<DialogContentProps & { class?: string }>()
const emits = defineEmits<DialogContentEmits>() const emits = defineEmits<DialogContentEmits>()

View File

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

View File

@ -4,9 +4,10 @@ import {
type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemEmits,
type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator, DropdownMenuItemIndicator,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { CheckIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>() const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>() const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

View File

@ -4,9 +4,10 @@ import {
DropdownMenuRadioItem, DropdownMenuRadioItem,
type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemEmits,
type DropdownMenuRadioItemProps, type DropdownMenuRadioItemProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue' import { DotFilledIcon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>() const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()

View File

@ -3,8 +3,9 @@ import {
NavigationMenuContent, NavigationMenuContent,
type NavigationMenuContentEmits, type NavigationMenuContentEmits,
type NavigationMenuContentProps, type NavigationMenuContentProps,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<NavigationMenuContentProps & { class?: string }>() const props = defineProps<NavigationMenuContentProps & { class?: string }>()

View File

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

View File

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

View File

@ -1,9 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue' import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<RadioGroupRootProps & { class?: string }>() const props = defineProps<RadioGroupRootProps & { class?: string }>()
const emits = defineEmits<RadioGroupRootEmits>() const emits = defineEmits<RadioGroupRootEmits>()
const emitsAsProps = useEmitAsProps(emits) const emitsAsProps = useEmitAsProps(emits)

View File

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

View File

@ -6,10 +6,11 @@ import {
type DialogContentProps, type DialogContentProps,
DialogOverlay, DialogOverlay,
DialogPortal, DialogPortal,
useEmitAsProps,
} from 'radix-vue' } from 'radix-vue'
import { cva } from 'class-variance-authority' import { cva } from 'class-variance-authority'
import { Cross2Icon } from '@radix-icons/vue' import { Cross2Icon } from '@radix-icons/vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
interface SheetContentProps extends DialogContentProps { interface SheetContentProps extends DialogContentProps {
side?: 'left' | 'right' | 'top' | 'bottom' side?: 'left' | 'right' | 'top' | 'bottom'

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootEmits, SliderRootProps } from 'radix-vue' import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue' import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SliderRootProps>() const props = defineProps<SliderRootProps>()
const emits = defineEmits<SliderRootEmits>() const emits = defineEmits<SliderRootEmits>()

View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ToggleEmits, ToggleProps } from 'radix-vue' import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle } from 'radix-vue' import { Toggle, useEmitAsProps } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue' import { computed } from 'vue'
import { toggleVariants } from '.' import { toggleVariants } from '.'
import { cn, useEmitAsProps } from '@/lib/utils' import { cn } from '@/lib/utils'
interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {} interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}

View File

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

View File

@ -7,40 +7,9 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
// Vue doesn't have emits forwarding, in order to bind the emits we have to convert events into `onXXX` handlers
// issue: https://github.com/vuejs/core/issues/5917
export function useEmitAsProps<Name extends string>(
emit: (name: Name, ...args: any[]) => void,
) {
const vm = getCurrentInstance()
const events = vm?.type.emits as Name[]
const result: Record<string, any> = {}
if (!events?.length) {
console.warn(
`No emitted event found. Please check component: ${vm?.type.__name}`,
)
}
events?.forEach((ev) => {
result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
})
return result
}
export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
ref.value ref.value
= typeof updaterOrValue === 'function' = typeof updaterOrValue === 'function'
? updaterOrValue(ref.value) ? updaterOrValue(ref.value)
: updaterOrValue : updaterOrValue
} }
// export type ParseEmits<T extends Record<string, any>> = {
// [K in keyof T]: (...args: T[K]) => void;
// }
// export function convertToComponent(component: FunctionalComponent) {
// return defineComponent({
// setup() { return () => h(component) },
// })
// }

View File

@ -5,25 +5,7 @@ import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
`
export function useEmitAsProps<Name extends string>(
emit: (name: Name, ...args: any[]) => void,
) {
const vm = getCurrentInstance()
const events = vm?.type.emits as Name[]
const result: Record<string, any> = {}
if (!events?.length) {
console.warn(
\`No emitted event found. Please check component: \${vm?.type.__name}\`,
)
}
events?.forEach((ev) => {
result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
})
return result
}`
export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {

View File

@ -5,22 +5,3 @@ import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
export function useEmitAsProps<Name extends string>(
emit: (name: Name, ...args: any[]) => void,
) {
const vm = getCurrentInstance()
const events = vm?.type.emits as Name[]
const result: Record<string, any> = {}
if (!events?.length) {
console.warn(
`No emitted event found. Please check component: ${vm?.type.__name}`,
)
}
events?.forEach((ev) => {
result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
})
return result
}