refactor: update new-york classes
This commit is contained in:
parent
2a7c91140b
commit
d9cbf36839
|
|
@ -95,7 +95,7 @@ async function onSubmit(values: any) {
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField v-slot="{ componentField, value }" name="dob">
|
<FormField v-slot="{ componentField, value }" name="dob">
|
||||||
<FormItem>
|
<FormItem class="flex flex-col">
|
||||||
<FormLabel>Date of birth</FormLabel>
|
<FormLabel>Date of birth</FormLabel>
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger as-child>
|
<PopoverTrigger as-child>
|
||||||
|
|
@ -123,7 +123,7 @@ async function onSubmit(values: any) {
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField v-slot="{ value }" name="language">
|
<FormField v-slot="{ value }" name="language">
|
||||||
<FormItem>
|
<FormItem class="flex flex-col">
|
||||||
<FormLabel>Language</FormLabel>
|
<FormLabel>Language</FormLabel>
|
||||||
|
|
||||||
<Popover v-model:open="open">
|
<Popover v-model:open="open">
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<ContextMenuPortal>
|
<ContextMenuPortal>
|
||||||
<ContextMenuContent
|
<ContextMenuContent
|
||||||
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 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',
|
||||||
'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,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ContextMenuContent>
|
</ContextMenuContent>
|
||||||
|
|
|
||||||
|
|
@ -23,13 +23,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 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 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuRadioItem
|
<ContextMenuRadioItem
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -22,13 +22,11 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuSubTrigger
|
<ContextMenuSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRight class="ml-auto h-4 w-4" />
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,11 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors 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 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -22,12 +22,10 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<DropdownMenuSubTrigger
|
<DropdownMenuSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRight class="ml-auto h-4 w-4" />
|
||||||
|
|
|
||||||
|
|
@ -24,13 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<MenubarItem
|
<MenubarItem
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 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 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</MenubarItem>
|
</MenubarItem>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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">
|
||||||
<MenubarItemIndicator>
|
<MenubarItemIndicator>
|
||||||
<Circle class="h-2 w-2 fill-curren" />
|
<Circle class="h-2 w-2 fill-current" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,11 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<MenubarSubTrigger
|
<MenubarSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRight class="ml-auto h-4 w-4" />
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,6 @@ const delegatedProps = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<Separator
|
<Separator
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
:class="[
|
:class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
|
||||||
cn('shrink-0 bg-border', props.class),
|
|
||||||
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
|
|
||||||
]"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export const sheetVariants = cva(
|
||||||
'inset-x-0 bottom-0 border-t 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 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 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: {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
|
||||||
return delegated
|
return delegated
|
||||||
})
|
})
|
||||||
|
|
||||||
const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
|
||||||
return delegated
|
return delegated
|
||||||
})
|
})
|
||||||
|
|
||||||
const forwardedProps = useForwardProps(delegatedProps.value)
|
const forwardedProps = useForwardProps(delegatedProps)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<AccordionContent
|
<AccordionContent
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||||
>
|
>
|
||||||
<div :class="cn('pb-4 pt-0', props.class)">
|
<div :class="cn('pb-4 pt-0', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
type AccordionTriggerProps,
|
type AccordionTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronDown } from 'lucide-vue-next'
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -30,8 +30,8 @@ const delegatedProps = computed(() => {
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<ChevronDown
|
<ChevronDownIcon
|
||||||
class="h-4 w-4 shrink-0 transition-transform duration-200"
|
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
||||||
/>
|
/>
|
||||||
</slot>
|
</slot>
|
||||||
</AccordionTrigger>
|
</AccordionTrigger>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
|
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { buttonVariants } from '@/lib/registry/default/ui/button'
|
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
|
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { buttonVariants } from '@/lib/registry/default/ui/button'
|
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<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"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue'
|
||||||
export { default as AlertDescription } from './AlertDescription.vue'
|
export { default as AlertDescription } from './AlertDescription.vue'
|
||||||
|
|
||||||
export const alertVariants = cva(
|
export const alertVariants = cva(
|
||||||
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
export { default as Badge } from './Badge.vue'
|
export { default as Badge } from './Badge.vue'
|
||||||
|
|
||||||
export const badgeVariants = cva(
|
export const badgeVariants = cva(
|
||||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -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 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',
|
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ const props = defineProps<{
|
||||||
<div
|
<div
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'rounded-lg border bg-card text-card-foreground shadow-sm',
|
'rounded-xl border bg-card text-card-foreground shadow',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { ArrowRightIcon } from '@radix-icons/vue'
|
||||||
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/default/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
const props = defineProps<WithClassAsProps>()
|
const props = defineProps<WithClassAsProps>()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { ArrowLeftIcon } from '@radix-icons/vue'
|
||||||
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/default/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
const props = defineProps<WithClassAsProps>()
|
const props = defineProps<WithClassAsProps>()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 { Check } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -21,12 +21,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<CheckboxRoot
|
<CheckboxRoot
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="
|
:class="
|
||||||
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',
|
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',
|
||||||
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">
|
||||||
<slot>
|
<slot>
|
||||||
<Check class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</slot>
|
</slot>
|
||||||
</CheckboxIndicator>
|
</CheckboxIndicator>
|
||||||
</CheckboxRoot>
|
</CheckboxRoot>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { useForwardPropsEmits } from 'radix-vue'
|
import { useForwardPropsEmits } 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/new-york/ui/dialog'
|
||||||
|
|
||||||
const props = defineProps<DialogRootProps>()
|
const props = defineProps<DialogRootProps>()
|
||||||
const emits = defineEmits<DialogRootEmits>()
|
const emits = defineEmits<DialogRootEmits>()
|
||||||
|
|
|
||||||
|
|
@ -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 { Search } from 'lucide-vue-next'
|
import { MagnifyingGlassIcon } from '@radix-icons/vue'
|
||||||
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'
|
||||||
|
|
||||||
|
|
@ -23,11 +23,11 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
|
|
||||||
<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>
|
||||||
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
<MagnifyingGlassIcon 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-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)"
|
: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)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
ContextMenuItemIndicator,
|
ContextMenuItemIndicator,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Check } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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>
|
||||||
<Check class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</ContextMenuItemIndicator>
|
</ContextMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<ContextMenuPortal>
|
<ContextMenuPortal>
|
||||||
<ContextMenuContent
|
<ContextMenuContent
|
||||||
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,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ContextMenuContent>
|
</ContextMenuContent>
|
||||||
|
|
|
||||||
|
|
@ -23,13 +23,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 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 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
type ContextMenuRadioItemProps,
|
type ContextMenuRadioItemProps,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Circle } from 'lucide-vue-next'
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -25,16 +25,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuRadioItem
|
<ContextMenuRadioItem
|
||||||
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>
|
||||||
<Circle class="h-2 w-2 fill-current" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</ContextMenuItemIndicator>
|
</ContextMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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-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',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type ContextMenuSubTriggerProps,
|
type ContextMenuSubTriggerProps,
|
||||||
useForwardProps,
|
useForwardProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
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 }>()
|
||||||
|
|
@ -22,15 +22,13 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<ContextMenuSubTrigger
|
<ContextMenuSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||||
</ContextMenuSubTrigger>
|
</ContextMenuSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import {
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { X } from 'lucide-vue-next'
|
import { Cross2Icon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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"
|
||||||
>
|
>
|
||||||
<X class="w-4 h-4" />
|
<Cross2Icon class="w-4 h-4" />
|
||||||
<span class="sr-only">Close</span>
|
<span class="sr-only">Close</span>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
DropdownMenuItemIndicator,
|
DropdownMenuItemIndicator,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Check } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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>
|
||||||
<Check class="w-4 h-4" />
|
<CheckIcon class="w-4 h-4" />
|
||||||
</DropdownMenuItemIndicator>
|
</DropdownMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,11 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors 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 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
type DropdownMenuRadioItemProps,
|
type DropdownMenuRadioItemProps,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Circle } from 'lucide-vue-next'
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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>
|
||||||
<Circle class="h-2 w-2 fill-current" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</DropdownMenuItemIndicator>
|
</DropdownMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type DropdownMenuSubTriggerProps,
|
type DropdownMenuSubTriggerProps,
|
||||||
useForwardProps,
|
useForwardProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -22,14 +22,12 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<DropdownMenuSubTrigger
|
<DropdownMenuSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||||
</DropdownMenuSubTrigger>
|
</DropdownMenuSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
|
||||||
import 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'
|
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||||
|
|
||||||
const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,6 @@ const { name, formMessageId } = useFormField()
|
||||||
:id="formMessageId"
|
:id="formMessageId"
|
||||||
as="p"
|
as="p"
|
||||||
:name="toValue(name)"
|
:name="toValue(name)"
|
||||||
class="text-sm font-medium text-destructive"
|
class="text-[0.8rem] font-medium text-destructive"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
|
<input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',
|
'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
MenubarItemIndicator,
|
MenubarItemIndicator,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Check } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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">
|
||||||
<MenubarItemIndicator>
|
<MenubarItemIndicator>
|
||||||
<Check class="w-4 h-4" />
|
<CheckIcon class="w-4 h-4" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -24,13 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<template>
|
<template>
|
||||||
<MenubarItem
|
<MenubarItem
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 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 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</MenubarItem>
|
</MenubarItem>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
type MenubarRadioItemProps,
|
type MenubarRadioItemProps,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Circle } from 'lucide-vue-next'
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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">
|
||||||
<MenubarItemIndicator>
|
<MenubarItemIndicator>
|
||||||
<Circle class="h-2 w-2 fill-curren" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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 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-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',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -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 { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
|
import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
|
const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
|
||||||
|
|
@ -18,15 +18,13 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<MenubarSubTrigger
|
<MenubarSubTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="[
|
:class="cn(
|
||||||
cn(
|
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
inset && 'pl-8',
|
||||||
inset && 'pl-8',
|
props.class,
|
||||||
props.class,
|
)"
|
||||||
),
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||||
</MenubarSubTrigger>
|
</MenubarSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type NavigationMenuTriggerProps,
|
type NavigationMenuTriggerProps,
|
||||||
useForwardProps,
|
useForwardProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { ChevronDown } from 'lucide-vue-next'
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { navigationMenuTriggerStyle } from '.'
|
import { navigationMenuTriggerStyle } from '.'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
|
@ -26,8 +26,8 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
:class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
|
:class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronDown
|
<ChevronDownIcon
|
||||||
class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
class="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</NavigationMenuTrigger>
|
</NavigationMenuTrigger>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
|
'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -8,5 +8,5 @@ export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
|
||||||
export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
|
export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
|
||||||
|
|
||||||
export const navigationMenuTriggerStyle = cva(
|
export const navigationMenuTriggerStyle = cva(
|
||||||
'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
|
'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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 { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
|
import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
|
||||||
import { MoreHorizontal } from 'lucide-vue-next'
|
import { DotsHorizontalIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
|
<PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
|
||||||
<slot>
|
<slot>
|
||||||
<MoreHorizontal />
|
<DotsHorizontalIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</PaginationEllipsis>
|
</PaginationEllipsis>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
|
import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
|
||||||
import { ChevronsLeft } from 'lucide-vue-next'
|
import { DoubleArrowLeftIcon } from '@radix-icons/vue'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
} from '@/lib/registry/default/ui/button'
|
} from '@/lib/registry/new-york/ui/button'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
|
const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
|
@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PaginationFirst v-bind="delegatedProps">
|
<PaginationFirst v-bind="delegatedProps">
|
||||||
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
|
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronsLeft class="h-4 w-4" />
|
<DoubleArrowLeftIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</PaginationFirst>
|
</PaginationFirst>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { PaginationLast, type PaginationLastProps } from 'radix-vue'
|
import { PaginationLast, type PaginationLastProps } from 'radix-vue'
|
||||||
import { ChevronsRight } from 'lucide-vue-next'
|
import { DoubleArrowRightIcon } from '@radix-icons/vue'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
} from '@/lib/registry/default/ui/button'
|
} from '@/lib/registry/new-york/ui/button'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
|
const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
|
@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PaginationLast v-bind="delegatedProps">
|
<PaginationLast v-bind="delegatedProps">
|
||||||
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
|
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronsRight class="h-4 w-4" />
|
<DoubleArrowRightIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</PaginationLast>
|
</PaginationLast>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { PaginationNext, type PaginationNextProps } from 'radix-vue'
|
import { PaginationNext, type PaginationNextProps } from 'radix-vue'
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
} from '@/lib/registry/default/ui/button'
|
} from '@/lib/registry/new-york/ui/button'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
|
const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
|
@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PaginationNext v-bind="delegatedProps">
|
<PaginationNext v-bind="delegatedProps">
|
||||||
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
|
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronRight class="h-4 w-4" />
|
<ChevronRightIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</PaginationNext>
|
</PaginationNext>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from 'vue'
|
||||||
import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
|
import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
|
||||||
import { ChevronLeft } from 'lucide-vue-next'
|
import { ChevronLeftIcon } from '@radix-icons/vue'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
} from '@/lib/registry/default/ui/button'
|
} from '@/lib/registry/new-york/ui/button'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
|
const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
|
@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PaginationPrev v-bind="delegatedProps">
|
<PaginationPrev v-bind="delegatedProps">
|
||||||
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
|
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronLeft class="h-4 w-4" />
|
<ChevronLeftIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</Button>
|
</Button>
|
||||||
</PaginationPrev>
|
</PaginationPrev>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
export { default as PopoverAnchor } from 'radix-vue'
|
||||||
export { default as Popover } from './Popover.vue'
|
export { default as Popover } from './Popover.vue'
|
||||||
export { default as PopoverTrigger } from './PopoverTrigger.vue'
|
export { default as PopoverTrigger } from './PopoverTrigger.vue'
|
||||||
export { default as PopoverContent } from './PopoverContent.vue'
|
export { default as PopoverContent } from './PopoverContent.vue'
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ const delegatedProps = computed(() => {
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
|
'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import {
|
||||||
type RadioGroupItemProps,
|
type RadioGroupItemProps,
|
||||||
useForwardProps,
|
useForwardProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Circle } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -25,15 +25,13 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'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',
|
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<RadioGroupIndicator
|
<RadioGroupIndicator class="flex items-center justify-center">
|
||||||
class="flex items-center justify-center"
|
<CheckIcon class="h-3.5 w-3.5 fill-primary" />
|
||||||
>
|
|
||||||
<Circle class="h-2.5 w-2.5 fill-current text-current" />
|
|
||||||
</RadioGroupIndicator>
|
</RadioGroupIndicator>
|
||||||
</RadioGroupItem>
|
</RadioGroupItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
SelectItemText,
|
SelectItemText,
|
||||||
useForwardProps,
|
useForwardProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { Check } from 'lucide-vue-next'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -26,14 +26,14 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'relative flex w-full 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 w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 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">
|
||||||
<SelectItemIndicator>
|
<SelectItemIndicator>
|
||||||
<Check class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</SelectItemIndicator>
|
</SelectItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
|
import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
|
||||||
import { ChevronDown } from 'lucide-vue-next'
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
|
<SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronDown class="h-4 w-4" />
|
<ChevronDownIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</SelectScrollDownButton>
|
</SelectScrollDownButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -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 { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
|
import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
|
||||||
import { ChevronUp } from 'lucide-vue-next'
|
import { ChevronUpIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<template>
|
<template>
|
||||||
<SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
|
<SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronUp class="h-4 w-4" />
|
<ChevronUpIcon />
|
||||||
</slot>
|
</slot>
|
||||||
</SelectScrollUpButton>
|
</SelectScrollUpButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -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 { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
|
import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
|
||||||
import { ChevronDown } from 'lucide-vue-next'
|
import { CaretSortIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
|
||||||
|
|
@ -19,13 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<SelectTrigger
|
<SelectTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="cn(
|
:class="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-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
||||||
props.class,
|
props.class,
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<SelectIcon as-child>
|
<SelectIcon as-child>
|
||||||
<ChevronDown class="w-4 h-4 opacity-50" />
|
<CaretSortIcon class="w-4 h-4 opacity-50" />
|
||||||
</SelectIcon>
|
</SelectIcon>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,6 @@ const delegatedProps = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<Separator
|
<Separator
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
:class="[
|
:class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
|
||||||
cn('shrink-0 bg-border', props.class),
|
|
||||||
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
|
|
||||||
]"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import {
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { X } from 'lucide-vue-next'
|
import { Cross2Icon } from '@radix-icons/vue'
|
||||||
import { type SheetVariants, sheetVariants } from '.'
|
import { type SheetVariants, sheetVariants } from '.'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
|
@ -49,7 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, 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-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" />
|
<Cross2Icon class="w-4 h-4" />
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export const sheetVariants = cva(
|
||||||
'inset-x-0 bottom-0 border-t 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 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 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: {
|
||||||
|
|
|
||||||
|
|
@ -10,5 +10,5 @@ const props = defineProps<SkeletonProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
|
<div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
)"
|
)"
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
>
|
>
|
||||||
<SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
<SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||||
<SliderRange class="absolute h-full bg-primary" />
|
<SliderRange class="absolute h-full bg-primary" />
|
||||||
</SliderTrack>
|
</SliderTrack>
|
||||||
<SliderThumb class="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
|
<SliderThumb class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||||
</SliderRoot>
|
</SliderRoot>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -26,12 +26,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
<SwitchRoot
|
<SwitchRoot
|
||||||
v-bind="forwarded"
|
v-bind="forwarded"
|
||||||
:class="cn(
|
:class="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-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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="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')"
|
:class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')"
|
||||||
/>
|
/>
|
||||||
</SwitchRoot>
|
</SwitchRoot>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ const props = defineProps<{
|
||||||
<td
|
<td
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'p-4 align-middle [&:has([role=checkbox])]:pr-0',
|
'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ const props = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
|
<th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</th>
|
</th>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
|
||||||
<TabsList
|
<TabsList
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
|
'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
|
||||||
props.class,
|
props.class,
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
v-bind="forwardedProps"
|
v-bind="forwardedProps"
|
||||||
:class="cn(
|
:class="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-md px-3 py-1 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',
|
||||||
props.class,
|
props.class,
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
|
<textarea v-model="modelValue" :class="cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
|
<ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</ToastAction>
|
</ToastAction>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -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 { X } from 'lucide-vue-next'
|
import { Cross2Icon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ToastCloseProps & {
|
const props = defineProps<ToastCloseProps & {
|
||||||
|
|
@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 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)">
|
||||||
<X class="h-4 w-4" />
|
<Cross2Icon class="h-4 w-4" />
|
||||||
</ToastClose>
|
</ToastClose>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
|
<ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</ToastTitle>
|
</ToastTitle>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
|
||||||
import { type VariantProps, cva } from 'class-variance-authority'
|
import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
|
|
||||||
export const toastVariants = cva(
|
export const toastVariants = cva(
|
||||||
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
|
'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
|
||||||
return delegated
|
return delegated
|
||||||
})
|
})
|
||||||
|
|
||||||
const forwarded = useForwardPropsEmits(delegatedProps.value, emits)
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
|
||||||
return delegated
|
return delegated
|
||||||
})
|
})
|
||||||
|
|
||||||
const forwardedProps = useForwardProps(delegatedProps.value)
|
const forwardedProps = useForwardProps(delegatedProps)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -3,18 +3,18 @@ import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
export { default as Toggle } from './Toggle.vue'
|
export { default as Toggle } from './Toggle.vue'
|
||||||
|
|
||||||
export const toggleVariants = cva(
|
export const toggleVariants = cva(
|
||||||
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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=on]:bg-accent data-[state=on]:text-accent-foreground',
|
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-transparent',
|
default: 'bg-transparent',
|
||||||
outline:
|
outline:
|
||||||
'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
|
'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-10 px-3',
|
default: 'h-9 px-3',
|
||||||
sm: 'h-9 px-2.5',
|
sm: 'h-8 px-2',
|
||||||
lg: 'h-11 px-5',
|
lg: 'h-10 px-3',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TooltipPortal>
|
<TooltipPortal>
|
||||||
<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', props.class)">
|
<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', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</TooltipPortal>
|
</TooltipPortal>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user