refactor: update

This commit is contained in:
Sadegh Barati 2024-01-19 22:54:11 +03:30
parent 3889d63cf2
commit d2bd2ce3c6
80 changed files with 250 additions and 222 deletions

View File

@ -15,14 +15,9 @@ const delegatedProps = computed(() => {
<template> <template>
<AccordionContent <AccordionContent
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
cn(
'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
props.class,
)
"
> >
<div class="pb-4 pt-0"> <div :class="cn('pb-4 pt-0', props.class)">
<slot /> <slot />
</div> </div>
</AccordionContent> </AccordionContent>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -5,7 +5,7 @@ import {
AccordionTrigger, AccordionTrigger,
type AccordionTriggerProps, type AccordionTriggerProps,
} from 'radix-vue' } from 'radix-vue'
import { ChevronDownIcon } from '@radix-icons/vue' import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
</script> </script>
<template> <template>
<AccordionHeader class="flex" as="div"> <AccordionHeader class="flex">
<AccordionTrigger <AccordionTrigger
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" :class="
@ -29,9 +29,11 @@ const delegatedProps = computed(() => {
" "
> >
<slot /> <slot />
<ChevronDownIcon <slot name="icon">
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" <ChevronDown
/> class="h-4 w-4 shrink-0 transition-transform duration-200"
/>
</slot>
</AccordionTrigger> </AccordionTrigger>
</AccordionHeader> </AccordionHeader>
</template> </template>

View File

@ -19,13 +19,13 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<AlertDialogPortal> <AlertDialogPortal>
<AlertDialogOverlay <AlertDialogOverlay
class="fixed inset-0 z-50 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" class="fixed inset-0 z-50 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"
/> />
<AlertDialogContent <AlertDialogContent
v-bind="forwarded" v-bind="forwarded"

View File

@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
<template> <template>
<AlertDialogTitle <AlertDialogTitle
v-bind="delegatedProps" v-bind="delegatedProps"
:class="cn('text-lg text-foreground font-semibold', props.class)" :class="cn('text-lg font-semibold', props.class)"
> >
<slot /> <slot />
</AlertDialogTitle> </AlertDialogTitle>

View File

@ -10,7 +10,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div :class="cn(alertVariants({ variant }), props.class)"> <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
<slot /> <slot />
</div> </div>
</template> </template>

View File

@ -3,7 +3,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
export { default as Button } from './Button.vue' export { default as Button } from './Button.vue'
export const buttonVariants = cva( export const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{ {
variants: { variants: {
variant: { variant: {

View File

@ -2,9 +2,9 @@
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import type { Calendar } from 'v-calendar' import type { Calendar } from 'v-calendar'
import { DatePicker } from 'v-calendar' import { DatePicker } from 'v-calendar'
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue' import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { computed, nextTick, onMounted, ref } from 'vue' import { computed, nextTick, onMounted, ref } from 'vue'
import { buttonVariants } from '@/lib/registry/new-york/ui/button' import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
/* Extracted from v-calendar */ /* Extracted from v-calendar */
@ -69,10 +69,10 @@ onMounted(async () => {
<div class="relative"> <div class="relative">
<div class="absolute flex justify-between w-full px-4 top-3 z-[1]"> <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')"> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
<ChevronLeftIcon class="w-4 h-4" /> <ChevronLeft class="w-4 h-4" />
</button> </button>
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')"> <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
<ChevronRightIcon class="w-4 h-4" /> <ChevronRight class="w-4 h-4" />
</button> </button>
</div> </div>

View File

@ -11,7 +11,7 @@ const props = defineProps<{
<div <div
:class=" :class="
cn( cn(
'rounded-xl border bg-card text-card-foreground shadow', 'rounded-lg border bg-card text-card-foreground shadow-sm',
props.class, props.class,
) )
" "

View File

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChevronRightIcon } from '@radix-icons/vue' import { ArrowRight } from 'lucide-vue-next'
import { useCarousel } from './useCarousel' import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface' import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/default/ui/button'
const props = defineProps<WithClassAsProps>() const props = defineProps<WithClassAsProps>()
@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
@click="scrollNext" @click="scrollNext"
> >
<slot> <slot>
<ChevronRightIcon class="h-4 w-4 text-current" /> <ArrowRight class="h-4 w-4 text-current" />
</slot> </slot>
</Button> </Button>
</template> </template>

View File

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChevronLeftIcon } from '@radix-icons/vue' import { ArrowLeft } from 'lucide-vue-next'
import { useCarousel } from './useCarousel' import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface' import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button' import { Button } from '@/lib/registry/default/ui/button'
const props = defineProps<WithClassAsProps>() const props = defineProps<WithClassAsProps>()
@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
@click="scrollPrev" @click="scrollPrev"
> >
<slot> <slot>
<ChevronLeftIcon class="h-4 w-4 text-current" /> <ArrowLeft class="h-4 w-4 text-current" />
</slot> </slot>
</Button> </Button>
</template> </template>

View File

@ -2,7 +2,7 @@
import { type HTMLAttributes, computed } from 'vue' import { type HTMLAttributes, computed } from 'vue'
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue' import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue' import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
@ -14,18 +14,20 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<CheckboxRoot <CheckboxRoot
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
props.class)" props.class)"
> >
<CheckboxIndicator class="flex h-full w-full items-center justify-center text-current"> <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
<CheckIcon class="h-4 w-4" /> <slot>
<Check class="h-4 w-4" />
</slot>
</CheckboxIndicator> </CheckboxIndicator>
</CheckboxRoot> </CheckboxRoot>
</template> </template>

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits)
<template> <template>
<Dialog v-bind="forwarded"> <Dialog v-bind="forwarded">
<DialogContent class="overflow-hidden p-0"> <DialogContent class="overflow-hidden p-0 shadow-lg">
<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<slot /> <slot />
</Command> </Command>

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue' import { type HTMLAttributes, computed } from 'vue'
import { MagnifyingGlassIcon } from '@radix-icons/vue' import { Search } from 'lucide-vue-next'
import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue' import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@ -18,16 +18,16 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper> <div class="flex items-center border-b px-3" cmdk-input-wrapper>
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" /> <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<ComboboxInput <ComboboxInput
v-bind="{ ...forwardedProps, ...$attrs }" v-bind="{ ...forwardedProps, ...$attrs }"
auto-focus auto-focus
:class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)" :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
/> />
</div> </div>
</template> </template>

View File

@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -7,7 +7,7 @@ import {
ContextMenuItemIndicator, ContextMenuItemIndicator,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
@ -19,24 +19,20 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<ContextMenuCheckboxItem <ContextMenuCheckboxItem
v-bind="forwarded" v-bind="forwarded"
:class="[ :class="cn(
cn( 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class,
props.class, )"
),
]"
> >
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator <ContextMenuItemIndicator>
class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center" <Check class="h-4 w-4" />
>
<CheckIcon class="h-4 w-4" />
</ContextMenuItemIndicator> </ContextMenuItemIndicator>
</span> </span>
<slot /> <slot />

View File

@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
v-bind="forwarded" v-bind="forwarded"
:class="[ :class="[
cn( 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', 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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, props.class,
), ),
]" ]"

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -7,7 +7,7 @@ import {
type ContextMenuRadioItemProps, type ContextMenuRadioItemProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue' import { Circle } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
> >
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator> <ContextMenuItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" /> <Circle class="h-2 w-2 fill-current" />
</ContextMenuItemIndicator> </ContextMenuItemIndicator>
</span> </span>
<slot /> <slot />

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -5,7 +5,7 @@ import {
type ContextMenuSubTriggerProps, type ContextMenuSubTriggerProps,
useForwardProps, useForwardProps,
} from 'radix-vue' } from 'radix-vue'
import { ChevronRightIcon } from '@radix-icons/vue' import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -31,6 +31,6 @@ const forwardedProps = useForwardProps(delegatedProps.value)
]" ]"
> >
<slot /> <slot />
<ChevronRightIcon class="ml-auto h-4 w-4" /> <ChevronRight class="ml-auto h-4 w-4" />
</ContextMenuSubTrigger> </ContextMenuSubTrigger>
</template> </template>

View File

@ -9,7 +9,7 @@ import {
DialogPortal, DialogPortal,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue' import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
<DialogClose <DialogClose
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
> >
<Cross2Icon class="w-4 h-4" /> <X class="w-4 h-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</DialogClose> </DialogClose>
</DialogContent> </DialogContent>

View File

@ -11,13 +11,13 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<DialogDescription <DialogDescription
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn('text-muted-foreground text-sm', props.class)" :class="cn('text-sm text-muted-foreground', props.class)"
> >
<slot /> <slot />
</DialogDescription> </DialogDescription>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -7,7 +7,7 @@ import {
DropdownMenuItemIndicator, DropdownMenuItemIndicator,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue' import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
> >
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator> <DropdownMenuItemIndicator>
<CheckIcon class="w-4 h-4" /> <Check class="w-4 h-4" />
</DropdownMenuItemIndicator> </DropdownMenuItemIndicator>
</span> </span>
<slot /> <slot />

View File

@ -23,20 +23,14 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuContent <DropdownMenuContent
v-bind="forwarded" v-bind="forwarded"
:class="[ :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)"
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,
),
]"
> >
<slot /> <slot />
</DropdownMenuContent> </DropdownMenuContent>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -7,7 +7,7 @@ import {
type DropdownMenuRadioItemProps, type DropdownMenuRadioItemProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue' import { Circle } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -32,9 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
)" )"
> >
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator> <DropdownMenuItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" /> <Circle class="h-2 w-2 fill-current" />
</DropdownMenuItemIndicator> </DropdownMenuItemIndicator>
</span> </span>
<slot /> <slot />

View File

@ -1,12 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { import {
DropdownMenuSeparator, DropdownMenuSeparator,
type DropdownMenuSeparatorProps, type DropdownMenuSeparatorProps,
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSeparatorProps>() const props = defineProps<DropdownMenuSeparatorProps & {
class?: HTMLAttributes['class']
}>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script> </script>
<template> <template>
<DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" /> <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
</template> </template>

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -5,7 +5,7 @@ import {
type DropdownMenuSubTriggerProps, type DropdownMenuSubTriggerProps,
useForwardProps, useForwardProps,
} from 'radix-vue' } from 'radix-vue'
import { ChevronRightIcon } from '@radix-icons/vue' import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -30,6 +30,6 @@ const forwardedProps = useForwardProps(delegatedProps.value)
]" ]"
> >
<slot /> <slot />
<ChevronRightIcon class="ml-auto h-4 w-4" /> <ChevronRight class="ml-auto h-4 w-4" />
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
</template> </template>

View File

@ -13,7 +13,7 @@ const { formDescriptionId } = useFormField()
<template> <template>
<p <p
:id="formDescriptionId" :id="formDescriptionId"
:class="cn('text-[0.8rem] text-muted-foreground', props.class)" :class="cn('text-sm text-muted-foreground', props.class)"
> >
<slot /> <slot />
</p> </p>

View File

@ -1,8 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { Label, type LabelProps } from 'radix-vue' import type { LabelProps } from 'radix-vue'
import { useFormField } from './useFormField' import { useFormField } from './useFormField'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Label } from '@/lib/registry/default/ui/label'
const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
@ -12,7 +13,6 @@ const { error, formItemId } = useFormField()
<template> <template>
<Label <Label
:class="cn( :class="cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
error && 'text-destructive', error && 'text-destructive',
props.class, props.class,
)" )"

View File

@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -30,7 +30,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( 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', 'z-50 w-64 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',
props.class, props.class,
) )
" "

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" :class="
cn( cn(
'block text-sm tracking-tight font-medium text-foreground text-left', 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
props.class, props.class,
) )
" "

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'flex h-10 items-center space-x-1 rounded-md border border-border p-1', 'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',
props.class, props.class,
) )
" "

View File

@ -19,24 +19,22 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<MenubarCheckboxItem <MenubarCheckboxItem
v-bind="forwarded" v-bind="forwarded"
:class="[ :class="cn(
cn( 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class,
props.class, )"
),
]"
> >
<MenubarItemIndicator <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center" <MenubarItemIndicator>
> <Check class="w-4 h-4" />
<Check class="w-4 h-4" /> </MenubarItemIndicator>
</MenubarItemIndicator> </span>
<slot /> <slot />
</MenubarCheckboxItem> </MenubarCheckboxItem>
</template> </template>

View File

@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -19,25 +19,22 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<MenubarRadioItem <MenubarRadioItem
v-bind="forwarded" v-bind="forwarded"
:class="[ :class="cn(
cn( 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class,
props.class, )"
),
]"
> >
<MenubarItemIndicator <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center" <MenubarItemIndicator>
> <Circle class="h-2 w-2 fill-curren" />
<Circle class="h-2 w-2 fill-curren" /> </MenubarItemIndicator>
</MenubarItemIndicator> </span>
<slot /> <slot />
</MenubarRadioItem> </MenubarRadioItem>
</template> </template>

View File

@ -11,9 +11,9 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', props.class)" v-bind="forwardedProps" /> <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
</template> </template>

View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<span :class="cn('text-xxs ml-auto tracking-widest opacity-50', props.class)"> <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
<slot /> <slot />
</span> </span>
</template> </template>

View File

@ -25,7 +25,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -12,7 +12,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -18,18 +18,16 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<NavigationMenuContent <NavigationMenuContent
v-bind="forwarded" v-bind="forwarded"
:class=" :class="cn(
cn( 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ', props.class,
props.class, )"
)
"
> >
<slot /> <slot />
</NavigationMenuContent> </NavigationMenuContent>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -11,7 +11,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'group flex flex-1 list-none items-center justify-center space-x-1', 'group flex flex-1 list-none items-center justify-center gap-x-1',
props.class, props.class,
) )
" "

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
> >
<slot /> <slot />
<ChevronDown <ChevronDown
class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
aria-hidden="true" aria-hidden="true"
/> />
</NavigationMenuTrigger> </NavigationMenuTrigger>

View File

@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -16,6 +16,7 @@ defineOptions({
const props = withDefaults( const props = withDefaults(
defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
{ {
align: 'center',
sideOffset: 4, sideOffset: 4,
}, },
) )
@ -27,7 +28,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -32,7 +32,7 @@ const delegatedProps = computed(() => {
" "
> >
<ProgressIndicator <ProgressIndicator
class="h-full w-full flex-1 duration-300 bg-foreground transition-all" class="h-full w-full flex-1 bg-primary transition-all"
:style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
/> />
</ProgressRoot> </ProgressRoot>

View File

@ -12,7 +12,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50', 'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
props.class, props.class,
) )
" "
@ -33,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps.value)
<RadioGroupIndicator <RadioGroupIndicator
class="flex items-center justify-center" class="flex items-center justify-center"
> >
<Circle class="w-2.5 h-2.5 text-foreground" /> <Circle class="h-2.5 w-2.5 fill-current text-current" />
</RadioGroupIndicator> </RadioGroupIndicator>
</RadioGroupItem> </RadioGroupItem>
</template> </template>

View File

@ -8,6 +8,7 @@ import {
SelectViewport, SelectViewport,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { SelectScrollDownButton, SelectScrollUpButton } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
defineOptions({ defineOptions({
@ -28,27 +29,25 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<SelectPortal> <SelectPortal>
<SelectContent <SelectContent
v-bind="{ ...forwarded, ...$attrs }" :class="cn( 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', 'relative z-50 max-h-96 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',
position === 'popper' position === 'popper'
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class, props.class,
) )
" "
> >
<SelectViewport <SelectScrollUpButton />
:class="cn('p-1', <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
position === 'popper'
&& 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
>
<slot /> <slot />
</SelectViewport> </SelectViewport>
<SelectScrollDownButton />
</SelectContent> </SelectContent>
</SelectPortal> </SelectPortal>
</template> </template>

View File

@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>

View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
<slot>
<ChevronDown class="h-4 w-4" />
</slot>
</SelectScrollDownButton>
</template>

View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
import { ChevronUp } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
<slot>
<ChevronUp class="h-4 w-4" />
</slot>
</SelectScrollUpButton>
</template>

View File

@ -4,34 +4,24 @@ import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } f
import { ChevronDown } from 'lucide-vue-next' import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = withDefaults( const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
defineProps<SelectTriggerProps & { class?: HTMLAttributes['class']; invalid?: boolean }>(),
{
invalid: false,
},
)
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, invalid, ...delegated } = props const { class: _, ...delegated } = props
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<SelectTrigger <SelectTrigger
v-bind="forwardedProps" v-bind="forwardedProps"
:class="[ :class="cn(
cn( 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class,
props.class, )"
),
props.invalid
? '!ring-destructive ring-2 placeholder:!text-destructive'
: '',
]"
> >
<slot /> <slot />
<SelectIcon as-child> <SelectIcon as-child>

View File

@ -7,3 +7,5 @@ export { default as SelectItem } from './SelectItem.vue'
export { default as SelectItemText } from './SelectItemText.vue' export { default as SelectItemText } from './SelectItemText.vue'
export { default as SelectLabel } from './SelectLabel.vue' export { default as SelectLabel } from './SelectLabel.vue'
export { default as SelectSeparator } from './SelectSeparator.vue' export { default as SelectSeparator } from './SelectSeparator.vue'
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'

View File

@ -1,13 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import { type HTMLAttributes, computed } from 'vue'
import { Separator, type SeparatorProps } from 'radix-vue' import { Separator, type SeparatorProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script> </script>
<template> <template>
<Separator <Separator
v-bind="delegatedProps"
:class="[ :class="[
cn('shrink-0 bg-secondary', props.class), cn('shrink-0 bg-secondary', props.class),
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',

View File

@ -32,13 +32,13 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<DialogPortal> <DialogPortal>
<DialogOverlay <DialogOverlay
class="fixed inset-0 z-50 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 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 <DialogContent
:class="cn(sheetVariants({ side }), props.class)" :class="cn(sheetVariants({ side }), props.class)"
@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
<slot /> <slot />
<DialogClose <DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
> >
<X class="w-4 h-4 text-muted-foreground" /> <X class="w-4 h-4 text-muted-foreground" />
</DialogClose> </DialogClose>

View File

@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
<div <div
:class=" :class="
cn( cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
props.class, props.class,
) )
" "

View File

@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
<template> <template>
<div <div
:class=" :class="
cn('flex flex-col space-y-2 text-center sm:text-left', props.class) cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
" "
> >
<slot /> <slot />

View File

@ -14,12 +14,12 @@ export const sheetVariants = cva(
{ {
variants: { variants: {
side: { side: {
top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom: bottom:
'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right: right:
'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
}, },
}, },
defaultVariants: { defaultVariants: {

View File

@ -10,5 +10,5 @@ const props = defineProps<SkeletonProps>()
</script> </script>
<template> <template>
<div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" /> <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
</template> </template>

View File

@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -19,25 +19,19 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<SwitchRoot <SwitchRoot
v-bind="forwarded" v-bind="forwarded"
:class=" :class="cn(
cn( 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', props.class,
props.class, )"
)
"
> >
<SwitchThumb <SwitchThumb
:class=" :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
cn(
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
)
"
/> />
</SwitchRoot> </SwitchRoot>
</template> </template>

View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div class="w-full overflow-auto"> <div class="relative w-full overflow-auto">
<table :class="cn('w-full caption-bottom text-sm', props.class)"> <table :class="cn('w-full caption-bottom text-sm', props.class)">
<slot /> <slot />
</table> </table>

View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<tfoot :class="cn('bg-primary font-medium text-primary-foreground', props.class)"> <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
<slot /> <slot />
</tfoot> </tfoot>
</template> </template>

View File

@ -15,12 +15,10 @@ const delegatedProps = computed(() => {
<template> <template>
<TabsList <TabsList
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" :class="cn(
cn( 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', props.class,
props.class, )"
)
"
> >
<slot /> <slot />
</TabsList> </TabsList>

View File

@ -11,18 +11,16 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwardedProps = useForwardProps(delegatedProps.value) const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<TabsTrigger <TabsTrigger
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="cn(
cn( 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', props.class,
props.class, )"
)
"
> >
<slot /> <slot />
</TabsTrigger> </TabsTrigger>

View File

@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue' import { type HTMLAttributes, computed } from 'vue'
import { ToastClose, type ToastCloseProps } from 'radix-vue' import { ToastClose, type ToastCloseProps } from 'radix-vue'
import { XIcon } from 'lucide-vue-next' import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ToastCloseProps & { const props = defineProps<ToastCloseProps & {
@ -17,6 +17,6 @@ const delegatedProps = computed(() => {
<template> <template>
<ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)"> <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
<XIcon class="h-4 w-4" /> <X class="h-4 w-4" />
</ToastClose> </ToastClose>
</template> </template>

View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>

View File

@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps.value, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>