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

refactor: change all popper related element to use useForwardPropsEmits

Browse Source
This commit is contained in:
zernonia 2023-09-28 15:42:04 +08:00
parent bd1953d35f
commit b60f22de90
18 changed files with 91 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

7
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
View File

@ -4,11 +4,14 @@ import {
type ContextMenuContentEmits,
type ContextMenuContentProps,
ContextMenuPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuContentProps & { class?: string }>()
const emits = defineEmits<ContextMenuContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
@ -21,7 +24,7 @@ const emits = defineEmits<ContextMenuContentEmits>()
props.class,
),
]"
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
>
<slot />
</ContextMenuContent>

7
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
View File

@ -3,16 +3,19 @@ import {
ContextMenuSubContent,
type DropdownMenuSubContentEmits,
type DropdownMenuSubContentProps,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<ContextMenuSubContent
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
:class="
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

12
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -1,8 +1,10 @@
<script setup lang="ts">
import {
DropdownMenuContent,
type DropdownMenuContentEmits,
type DropdownMenuContentProps,
DropdownMenuPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn } from '@/lib/utils'
@ -12,23 +14,21 @@ const props = withDefaults(
sideOffset: 4,
},
)
const emits = defineEmits<DropdownMenuContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<DropdownMenuPortal>
<DropdownMenuContent
:loop="props.loop"
:as-child="props.asChild"
:side-offset="props.sideOffset"
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
),
]"
v-bind="forwarded"
>
<slot />
</DropdownMenuContent>

7
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@ -3,16 +3,19 @@ import {
DropdownMenuSubContent,
type DropdownMenuSubContentEmits,
type DropdownMenuSubContentProps,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubContentProps>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<DropdownMenuSubContent
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
>
<slot />

5
apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
View File

@ -3,6 +3,7 @@ import {
HoverCardContent,
type HoverCardContentProps,
HoverCardPortal,
useForwardProps,
} from 'radix-vue'
import { cn } from '@/lib/utils'
@ -12,12 +13,14 @@ const props = withDefaults(
sideOffset: 4,
},
)
const forwarded = useForwardProps(props)
</script>
<template>
<HoverCardPortal>
<HoverCardContent
v-bind="props"
v-bind="forwarded"
:class="
cn(
'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

8
apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
View File

@ -4,8 +4,9 @@ import {
type PopoverContentEmits,
type PopoverContentProps,
PopoverPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<PopoverContentProps & { class?: string }>(),
@ -14,13 +15,14 @@ const props = withDefaults(
},
)
const emits = defineEmits<PopoverContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<PopoverPortal>
<PopoverContent
v-bind="{ ...props, ...emitsAsProps, $attrs }"
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

8
apps/www/src/lib/registry/default/ui/select/SelectContent.vue
View File

@ -5,8 +5,9 @@ import {
type SelectContentProps,
SelectPortal,
SelectViewport,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<SelectContentProps & { class?: string }>(), {
@ -15,13 +16,14 @@ const props = withDefaults(
},
)
const emits = defineEmits<SelectContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<SelectPortal>
<SelectContent
v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

8
apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
View File

@ -1,18 +1,18 @@
<script setup lang="ts">
import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<TooltipContentProps>(), {
sideOffset: 4,
})
const emits = defineEmits<TooltipContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<TooltipPortal>
<TooltipContent v-bind="{ ...props, ...emitsAsProps, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<slot />
</TooltipContent>
</TooltipPortal>

8
apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
View File

@ -1,16 +1,16 @@
<script setup lang="ts">
import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
import { ComboboxContent } 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 ?? '')">
<slot />
</ComboboxContent>
</template>

7
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
View File

@ -4,11 +4,14 @@ import {
type ContextMenuContentEmits,
type ContextMenuContentProps,
ContextMenuPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuContentProps & { class?: string }>()
const emits = defineEmits<ContextMenuContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
@ -21,7 +24,7 @@ const emits = defineEmits<ContextMenuContentEmits>()
props.class,
),
]"
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
>
<slot />
</ContextMenuContent>

7
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
View File

@ -3,16 +3,19 @@ import {
ContextMenuSubContent,
type DropdownMenuSubContentEmits,
type DropdownMenuSubContentProps,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<ContextMenuSubContent
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
:class="
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

12
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -1,8 +1,10 @@
<script setup lang="ts">
import {
DropdownMenuContent,
type DropdownMenuContentEmits,
type DropdownMenuContentProps,
DropdownMenuPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn } from '@/lib/utils'
@ -12,23 +14,21 @@ const props = withDefaults(
sideOffset: 4,
},
)
const emits = defineEmits<DropdownMenuContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<DropdownMenuPortal>
<DropdownMenuContent
:loop="props.loop"
:as-child="props.asChild"
:side-offset="props.sideOffset"
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
),
]"
v-bind="forwarded"
>
<slot />
</DropdownMenuContent>

7
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@ -3,16 +3,19 @@ import {
DropdownMenuSubContent,
type DropdownMenuSubContentEmits,
type DropdownMenuSubContentProps,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubContentProps>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<DropdownMenuSubContent
v-bind="{ ...props, ...useEmitAsProps(emits) }"
v-bind="forwarded"
:class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
>
<slot />

5
apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
View File

@ -3,6 +3,7 @@ import {
HoverCardContent,
type HoverCardContentProps,
HoverCardPortal,
useForwardProps,
} from 'radix-vue'
import { cn } from '@/lib/utils'
@ -12,12 +13,14 @@ const props = withDefaults(
sideOffset: 4,
},
)
const forwarded = useForwardProps(props)
</script>
<template>
<HoverCardPortal>
<HoverCardContent
v-bind="props"
v-bind="forwarded"
:class="
cn(
'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

8
apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
View File

@ -4,8 +4,9 @@ import {
type PopoverContentEmits,
type PopoverContentProps,
PopoverPortal,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<PopoverContentProps & { class?: string }>(),
@ -14,13 +15,14 @@ const props = withDefaults(
},
)
const emits = defineEmits<PopoverContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<PopoverPortal>
<PopoverContent
v-bind="{ ...props, ...emitsAsProps, $attrs }"
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

8
apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
View File

@ -5,8 +5,9 @@ import {
type SelectContentProps,
SelectPortal,
SelectViewport,
useForwardPropsEmits,
} from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<SelectContentProps & { class?: string }>(), {
@ -15,13 +16,14 @@ const props = withDefaults(
},
)
const emits = defineEmits<SelectContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<SelectPortal>
<SelectContent
v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

10
apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
View File

@ -1,15 +1,19 @@
<script setup lang="ts">
import { TooltipContent, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/lib/utils'
import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<TooltipContentProps>(), {
sideOffset: 4,
})
const emits = defineEmits<TooltipContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)
</script>
<template>
<TooltipContent v-bind="{ ...props, ...useEmitAsProps(emits) }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<TooltipPortal>
<TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<slot />
</TooltipContent>
</TooltipPortal>
</template>