versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: 🎨 Format code with Biome

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-12-09 22:32:22 +01:00
parent 7ff9d2302a
commit 3627ac0ef8
No known key found for this signature in database
296 changed files with 3257 additions and 2808 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/components/ui/alert-dialog/AlertDialog.vue
View file

@ -13,7 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<AlertDialogRoot data-slot="alert-dialog" v-bind="forwarded">
<slot />
</AlertDialogRoot>
<AlertDialogRoot data-slot="alert-dialog" v-bind="forwarded">
<slot/>
</AlertDialogRoot>
</template>

9
app/components/ui/alert-dialog/AlertDialogAction.vue
View file

@ -16,7 +16,10 @@ const delegatedProps = computed(() => {
</script>
<template>
<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
<slot />
</AlertDialogAction>
<AlertDialogAction
v-bind="delegatedProps"
:class="cn(buttonVariants(), props.class)"
>
<slot/>
</AlertDialogAction>
</template>

12
app/components/ui/alert-dialog/AlertDialogCancel.vue
View file

@ -16,14 +16,14 @@ const delegatedProps = computed(() => {
</script>
<template>
<AlertDialogCancel
v-bind="delegatedProps"
:class="cn(
<AlertDialogCancel
v-bind="delegatedProps"
:class="cn(
buttonVariants({ variant: 'outline' }),
'mt-2 sm:mt-0',
props.class,
)"
>
<slot />
</AlertDialogCancel>
>
<slot/>
</AlertDialogCancel>
</template>

26
app/components/ui/alert-dialog/AlertDialogContent.vue
View file

@ -25,22 +25,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<AlertDialogPortal>
<AlertDialogOverlay
data-slot="alert-dialog-overlay"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
/>
<AlertDialogContent
data-slot="alert-dialog-content"
v-bind="forwarded"
:class="
<AlertDialogPortal>
<AlertDialogOverlay
data-slot="alert-dialog-overlay"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
/>
<AlertDialogContent
data-slot="alert-dialog-content"
v-bind="forwarded"
:class="
cn(
'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class,
)
"
>
<slot />
</AlertDialogContent>
</AlertDialogPortal>
>
<slot/>
</AlertDialogContent>
</AlertDialogPortal>
</template>

14
app/components/ui/alert-dialog/AlertDialogDescription.vue
View file

@ -18,11 +18,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<AlertDialogDescription
data-slot="alert-dialog-description"
v-bind="delegatedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</AlertDialogDescription>
<AlertDialogDescription
data-slot="alert-dialog-description"
v-bind="delegatedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot/>
</AlertDialogDescription>
</template>

12
app/components/ui/alert-dialog/AlertDialogFooter.vue
View file

@ -8,15 +8,15 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="alert-dialog-footer"
:class="
<div
data-slot="alert-dialog-footer"
:class="
cn(
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
props.class,
)
"
>
<slot />
</div>
>
<slot/>
</div>
</template>

12
app/components/ui/alert-dialog/AlertDialogHeader.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="alert-dialog-header"
:class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
>
<slot />
</div>
<div
data-slot="alert-dialog-header"
:class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
>
<slot/>
</div>
</template>

14
app/components/ui/alert-dialog/AlertDialogTitle.vue
View file

@ -15,11 +15,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<AlertDialogTitle
data-slot="alert-dialog-title"
v-bind="delegatedProps"
:class="cn('text-lg font-semibold', props.class)"
>
<slot />
</AlertDialogTitle>
<AlertDialogTitle
data-slot="alert-dialog-title"
v-bind="delegatedProps"
:class="cn('text-lg font-semibold', props.class)"
>
<slot/>
</AlertDialogTitle>
</template>

6
app/components/ui/alert-dialog/AlertDialogTrigger.vue
View file

@ -5,7 +5,7 @@ const props = defineProps<AlertDialogTriggerProps>();
</script>
<template>
<AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
<slot />
</AlertDialogTrigger>
<AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
<slot/>
</AlertDialogTrigger>
</template>

14
app/components/ui/alert/Alert.vue
View file

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

12
app/components/ui/alert/AlertDescription.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="alert-description"
:class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
>
<slot />
</div>
<div
data-slot="alert-description"
:class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/alert/AlertTitle.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="alert-title"
:class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
>
<slot />
</div>
<div
data-slot="alert-title"
:class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/avatar/Avatar.vue
View file

@ -9,10 +9,10 @@ const props = defineProps<{
</script>
<template>
<AvatarRoot
data-slot="avatar"
:class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
>
<slot />
</AvatarRoot>
<AvatarRoot
data-slot="avatar"
:class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
>
<slot/>
</AvatarRoot>
</template>

14
app/components/ui/avatar/AvatarFallback.vue
View file

@ -15,11 +15,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<AvatarFallback
data-slot="avatar-fallback"
v-bind="delegatedProps"
:class="cn('bg-muted flex size-full items-center justify-center', props.class)"
>
<slot />
</AvatarFallback>
<AvatarFallback
data-slot="avatar-fallback"
v-bind="delegatedProps"
:class="cn('bg-muted flex size-full items-center justify-center', props.class)"
>
<slot/>
</AvatarFallback>
</template>

14
app/components/ui/avatar/AvatarImage.vue
View file

@ -6,11 +6,11 @@ const props = defineProps<AvatarImageProps>();
</script>
<template>
<AvatarImage
data-slot="avatar-image"
v-bind="props"
class="aspect-square size-full"
>
<slot />
</AvatarImage>
<AvatarImage
data-slot="avatar-image"
v-bind="props"
class="aspect-square size-full"
>
<slot/>
</AvatarImage>
</template>

14
app/components/ui/badge/Badge.vue
View file

@ -20,11 +20,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<Primitive
data-slot="badge"
:class="cn(badgeVariants({ variant }), props.class)"
v-bind="delegatedProps"
>
<slot />
</Primitive>
<Primitive
data-slot="badge"
:class="cn(badgeVariants({ variant }), props.class)"
v-bind="delegatedProps"
>
<slot/>
</Primitive>
</template>

16
app/components/ui/button/Button.vue
View file

@ -16,12 +16,12 @@ const props = withDefaults(defineProps<Props>(), {
</script>
<template>
<Primitive
data-slot="button"
:as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), props.class)"
>
<slot />
</Primitive>
<Primitive
data-slot="button"
:as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), props.class)"
>
<slot/>
</Primitive>
</template>

9
app/components/ui/card/Card.vue
View file

@ -8,11 +8,14 @@ const props = defineProps<{
</script>
<template>
<div data-slot="card" :class="cn(
<div
data-slot="card"
:class="cn(
'bg-card text-card-foreground flex flex-col gap-6 rounded-md border p-4 shadow-sm',
props.class,
)
">
<slot />
"
>
<slot/>
</div>
</template>

12
app/components/ui/card/CardAction.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="card-action"
:class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
>
<slot />
</div>
<div
data-slot="card-action"
:class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
>
<slot/>
</div>
</template>

9
app/components/ui/card/CardContent.vue
View file

@ -8,10 +8,7 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="card-content"
:class="cn('flex flex-col', props.class)"
>
<slot />
</div>
<div data-slot="card-content" :class="cn('flex flex-col', props.class)">
<slot/>
</div>
</template>

12
app/components/ui/card/CardDescription.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<p
data-slot="card-description"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</p>
<p
data-slot="card-description"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot/>
</p>
</template>

12
app/components/ui/card/CardFooter.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="card-footer"
:class="cn('flex items-center [.border-t]:pt-6', props.class)"
>
<slot />
</div>
<div
data-slot="card-footer"
:class="cn('flex items-center [.border-t]:pt-6', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/card/CardHeader.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="card-header"
:class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
>
<slot />
</div>
<div
data-slot="card-header"
:class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/card/CardTitle.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<h3
data-slot="card-title"
:class="cn('leading-none font-semibold', props.class)"
>
<slot />
</h3>
<h3
data-slot="card-title"
:class="cn('leading-none font-semibold', props.class)"
>
<slot/>
</h3>
</template>

30
app/components/ui/checkbox/Checkbox.vue
View file

@ -20,22 +20,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<CheckboxRoot
data-slot="checkbox"
v-bind="forwarded"
:class="
<CheckboxRoot
data-slot="checkbox"
v-bind="forwarded"
:class="
cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
props.class)"
>
<CheckboxIndicator
data-slot="checkbox-indicator"
class="flex items-center justify-center text-current transition-none"
>
<slot>
<Check class="size-3.5" />
</slot>
</CheckboxIndicator>
<!-- Fixes an issue where empty buttons behave weirdly in tanstack table layouts -->
<Check class="size-3.5 opacity-0" />
</CheckboxRoot>
<CheckboxIndicator
data-slot="checkbox-indicator"
class="flex items-center justify-center text-current transition-none"
>
<slot>
<Check class="size-3.5"/>
</slot>
</CheckboxIndicator>
<!-- Fixes an issue where empty buttons behave weirdly in tanstack table layouts -->
<Check class="size-3.5 opacity-0"/>
</CheckboxRoot>
</template>

14
app/components/ui/collapsible/Collapsible.vue
View file

@ -9,11 +9,11 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<CollapsibleRoot
v-slot="{ open }"
data-slot="collapsible"
v-bind="forwarded"
>
<slot :open="open" />
</CollapsibleRoot>
<CollapsibleRoot
v-slot="{ open }"
data-slot="collapsible"
v-bind="forwarded"
>
<slot :open="open"/>
</CollapsibleRoot>
</template>

9
app/components/ui/collapsible/CollapsibleContent.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<CollapsibleContentProps>();
</script>
<template>
<CollapsibleContent
data-slot="collapsible-content"
v-bind="props"
>
<slot />
</CollapsibleContent>
<CollapsibleContent data-slot="collapsible-content" v-bind="props">
<slot/>
</CollapsibleContent>
</template>

9
app/components/ui/collapsible/CollapsibleTrigger.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<CollapsibleTriggerProps>();
</script>
<template>
<CollapsibleTrigger
data-slot="collapsible-trigger"
v-bind="props"
>
<slot />
</CollapsibleTrigger>
<CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
<slot/>
</CollapsibleTrigger>
</template>

14
app/components/ui/command/Command.vue
View file

@ -90,11 +90,11 @@ provideCommandContext({
</script>
<template>
<ListboxRoot
data-slot="command"
v-bind="forwarded"
:class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
>
<slot />
</ListboxRoot>
<ListboxRoot
data-slot="command"
v-bind="forwarded"
:class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
>
<slot/>
</ListboxRoot>
</template>

22
app/components/ui/command/CommandDialog.vue
View file

@ -28,15 +28,15 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<Dialog v-bind="forwarded">
<DialogHeader class="sr-only">
<DialogTitle>{{ title }}</DialogTitle>
<DialogDescription>{{ description }}</DialogDescription>
</DialogHeader>
<DialogContent class="overflow-hidden p-0 ">
<Command>
<slot />
</Command>
</DialogContent>
</Dialog>
<Dialog v-bind="forwarded">
<DialogHeader class="sr-only">
<DialogTitle>{{ title }}</DialogTitle>
<DialogDescription>{{ description }}</DialogDescription>
</DialogHeader>
<DialogContent class="overflow-hidden p-0 ">
<Command>
<slot/>
</Command>
</DialogContent>
</Dialog>
</template>

15
app/components/ui/command/CommandEmpty.vue
View file

@ -22,11 +22,12 @@ const isRender = computed(
</script>
<template>
<Primitive
v-if="isRender"
data-slot="command-empty"
v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
>
<slot />
</Primitive>
<Primitive
v-if="isRender"
data-slot="command-empty"
v-bind="delegatedProps"
:class="cn('py-6 text-center text-sm', props.class)"
>
<slot/>
</Primitive>
</template>

27
app/components/ui/command/CommandGroup.vue
View file

@ -37,16 +37,19 @@ onUnmounted(() => {
</script>
<template>
<ListboxGroup
v-bind="delegatedProps"
:id="id"
data-slot="command-group"
:class="cn('text-foreground overflow-hidden p-1', props.class)"
:hidden="isRender ? undefined : true"
>
<ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
{{ heading }}
</ListboxGroupLabel>
<slot />
</ListboxGroup>
<ListboxGroup
v-bind="delegatedProps"
:id="id"
data-slot="command-group"
:class="cn('text-foreground overflow-hidden p-1', props.class)"
:hidden="isRender ? undefined : true"
>
<ListboxGroupLabel
v-if="heading"
class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
>
{{ heading }}
</ListboxGroupLabel>
<slot/>
</ListboxGroup>
</template>

26
app/components/ui/command/CommandInput.vue
View file

@ -31,17 +31,17 @@ const { filterState } = useCommand();
</script>
<template>
<div
data-slot="command-input-wrapper"
class="flex h-12 items-center gap-2 border-b px-3"
>
<Search class="size-4 shrink-0 opacity-50" />
<ListboxFilter
v-bind="{ ...forwardedProps, ...$attrs }"
v-model="filterState.search"
data-slot="command-input"
auto-focus
:class="cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
/>
</div>
<div
data-slot="command-input-wrapper"
class="flex h-12 items-center gap-2 border-b px-3"
>
<Search class="size-4 shrink-0 opacity-50"/>
<ListboxFilter
v-bind="{ ...forwardedProps, ...$attrs }"
v-model="filterState.search"
data-slot="command-input"
auto-focus
:class="cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
/>
</div>
</template>

22
app/components/ui/command/CommandItem.vue
View file

@ -73,17 +73,17 @@ onUnmounted(() => {
</script>
<template>
<ListboxItem
v-if="isRender"
v-bind="forwarded"
:id="id"
ref="itemRef"
data-slot="command-item"
:class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
@select="() => {
<ListboxItem
v-if="isRender"
v-bind="forwarded"
:id="id"
ref="itemRef"
data-slot="command-item"
:class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
@select="() => {
filterState.search = ''
}"
>
<slot />
</ListboxItem>
>
<slot/>
</ListboxItem>
</template>

18
app/components/ui/command/CommandList.vue
View file

@ -18,13 +18,13 @@ const forwarded = useForwardProps(delegatedProps);
</script>
<template>
<ListboxContent
data-slot="command-list"
v-bind="forwarded"
:class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
>
<div role="presentation">
<slot />
</div>
</ListboxContent>
<ListboxContent
data-slot="command-list"
v-bind="forwarded"
:class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
>
<div role="presentation">
<slot/>
</div>
</ListboxContent>
</template>

14
app/components/ui/command/CommandSeparator.vue
View file

@ -16,11 +16,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<Separator
data-slot="command-separator"
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 h-px', props.class)"
>
<slot />
</Separator>
<Separator
data-slot="command-separator"
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 h-px', props.class)"
>
<slot/>
</Separator>
</template>

12
app/components/ui/command/CommandShortcut.vue
View file

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

9
app/components/ui/dialog/Dialog.vue
View file

@ -13,10 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DialogRoot
data-slot="dialog"
v-bind="forwarded"
>
<slot />
</DialogRoot>
<DialogRoot data-slot="dialog" v-bind="forwarded">
<slot/>
</DialogRoot>
</template>

9
app/components/ui/dialog/DialogClose.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<DialogCloseProps>();
</script>
<template>
<DialogClose
data-slot="dialog-close"
v-bind="props"
>
<slot />
</DialogClose>
<DialogClose data-slot="dialog-close" v-bind="props">
<slot/>
</DialogClose>
</template>

34
app/components/ui/dialog/DialogContent.vue
View file

@ -30,26 +30,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DialogPortal>
<DialogOverlay />
<DialogContent
data-slot="dialog-content"
v-bind="forwarded"
:class="
<DialogPortal>
<DialogOverlay/>
<DialogContent
data-slot="dialog-content"
v-bind="forwarded"
:class="
cn(
'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class,
)"
>
<slot />
>
<slot/>
<DialogClose
v-if="!hideClose"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<X />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogPortal>
<DialogClose
v-if="!hideClose"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<X/>
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogPortal>
</template>

14
app/components/ui/dialog/DialogDescription.vue
View file

@ -21,11 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DialogDescription
data-slot="dialog-description"
v-bind="forwardedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</DialogDescription>
<DialogDescription
data-slot="dialog-description"
v-bind="forwardedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot/>
</DialogDescription>
</template>

12
app/components/ui/dialog/DialogFooter.vue
View file

@ -6,10 +6,10 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>();
</script>
<template>
<div
data-slot="dialog-footer"
:class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
>
<slot />
</div>
<div
data-slot="dialog-footer"
:class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/dialog/DialogHeader.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="dialog-header"
:class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
>
<slot />
</div>
<div
data-slot="dialog-header"
:class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
>
<slot/>
</div>
</template>

14
app/components/ui/dialog/DialogOverlay.vue
View file

@ -15,11 +15,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<DialogOverlay
data-slot="dialog-overlay"
v-bind="delegatedProps"
:class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 backdrop-blur-md', props.class)"
>
<slot />
</DialogOverlay>
<DialogOverlay
data-slot="dialog-overlay"
v-bind="delegatedProps"
:class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 backdrop-blur-md', props.class)"
>
<slot/>
</DialogOverlay>
</template>

38
app/components/ui/dialog/DialogScrollContent.vue
View file

@ -27,35 +27,35 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto 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
:class="
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto 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
:class="
cn(
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class,
)
"
v-bind="forwarded"
@pointer-down-outside="(event) => {
v-bind="forwarded"
@pointer-down-outside="(event) => {
const originalEvent = event.detail.originalEvent;
const target = originalEvent.target as HTMLElement;
if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
event.preventDefault();
}
}"
>
<slot />
>
<slot/>
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<X class="w-4 h-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogOverlay>
</DialogPortal>
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
>
<X class="w-4 h-4"/>
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>
</DialogOverlay>
</DialogPortal>
</template>

14
app/components/ui/dialog/DialogTitle.vue
View file

@ -17,11 +17,11 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DialogTitle
data-slot="dialog-title"
v-bind="forwardedProps"
:class="cn('text-lg leading-none font-semibold', props.class)"
>
<slot />
</DialogTitle>
<DialogTitle
data-slot="dialog-title"
v-bind="forwardedProps"
:class="cn('text-lg leading-none font-semibold', props.class)"
>
<slot/>
</DialogTitle>
</template>

9
app/components/ui/dialog/DialogTrigger.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<DialogTriggerProps>();
</script>
<template>
<DialogTrigger
data-slot="dialog-trigger"
v-bind="props"
>
<slot />
</DialogTrigger>
<DialogTrigger data-slot="dialog-trigger" v-bind="props">
<slot/>
</DialogTrigger>
</template>

9
app/components/ui/drawer/Drawer.vue
View file

@ -13,10 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DrawerRoot
data-slot="drawer"
v-bind="forwarded"
>
<slot />
</DrawerRoot>
<DrawerRoot data-slot="drawer" v-bind="forwarded">
<slot/>
</DrawerRoot>
</template>

9
app/components/ui/drawer/DrawerClose.vue
View file

@ -6,10 +6,7 @@ const props = defineProps<DrawerCloseProps>();
</script>
<template>
<DrawerClose
data-slot="drawer-close"
v-bind="props"
>
<slot />
</DrawerClose>
<DrawerClose data-slot="drawer-close" v-bind="props">
<slot/>
</DrawerClose>
</template>

24
app/components/ui/drawer/DrawerContent.vue
View file

@ -15,12 +15,12 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DrawerPortal>
<DrawerOverlay />
<DrawerContent
data-slot="drawer-content"
v-bind="forwarded"
:class="cn(
<DrawerPortal>
<DrawerOverlay/>
<DrawerContent
data-slot="drawer-content"
v-bind="forwarded"
:class="cn(
`group/drawer-content bg-background fixed z-50 flex h-auto flex-col`,
`data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg`,
`data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg`,
@ -28,9 +28,11 @@ const forwarded = useForwardPropsEmits(props, emits);
`data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm`,
props.class,
)"
>
<div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
<slot />
</DrawerContent>
</DrawerPortal>
>
<div
class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
/>
<slot/>
</DrawerContent>
</DrawerPortal>
</template>

14
app/components/ui/drawer/DrawerDescription.vue
View file

@ -16,11 +16,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<DrawerDescription
data-slot="drawer-description"
v-bind="delegatedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</DrawerDescription>
<DrawerDescription
data-slot="drawer-description"
v-bind="delegatedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot/>
</DrawerDescription>
</template>

12
app/components/ui/drawer/DrawerFooter.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="drawer-footer"
:class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
>
<slot />
</div>
<div
data-slot="drawer-footer"
:class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
>
<slot/>
</div>
</template>

12
app/components/ui/drawer/DrawerHeader.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="drawer-header"
:class="cn('flex flex-col gap-1.5 p-4', props.class)"
>
<slot />
</div>
<div
data-slot="drawer-header"
:class="cn('flex flex-col gap-1.5 p-4', props.class)"
>
<slot/>
</div>
</template>

10
app/components/ui/drawer/DrawerOverlay.vue
View file

@ -16,9 +16,9 @@ const delegatedProps = computed(() => {
</script>
<template>
<DrawerOverlay
data-slot="drawer-overlay"
v-bind="delegatedProps"
:class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
/>
<DrawerOverlay
data-slot="drawer-overlay"
v-bind="delegatedProps"
:class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
/>
</template>

14
app/components/ui/drawer/DrawerTitle.vue
View file

@ -16,11 +16,11 @@ const delegatedProps = computed(() => {
</script>
<template>
<DrawerTitle
data-slot="drawer-title"
v-bind="delegatedProps"
:class="cn('text-foreground font-semibold', props.class)"
>
<slot />
</DrawerTitle>
<DrawerTitle
data-slot="drawer-title"
v-bind="delegatedProps"
:class="cn('text-foreground font-semibold', props.class)"
>
<slot/>
</DrawerTitle>
</template>

9
app/components/ui/drawer/DrawerTrigger.vue
View file

@ -6,10 +6,7 @@ const props = defineProps<DrawerTriggerProps>();
</script>
<template>
<DrawerTrigger
data-slot="drawer-trigger"
v-bind="props"
>
<slot />
</DrawerTrigger>
<DrawerTrigger data-slot="drawer-trigger" v-bind="props">
<slot/>
</DrawerTrigger>
</template>

9
app/components/ui/dropdown-menu/DropdownMenu.vue
View file

@ -13,10 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuRoot
data-slot="dropdown-menu"
v-bind="forwarded"
>
<slot />
</DropdownMenuRoot>
<DropdownMenuRoot data-slot="dropdown-menu" v-bind="forwarded">
<slot/>
</DropdownMenuRoot>
</template>

26
app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View file

@ -25,19 +25,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuCheckboxItem
data-slot="dropdown-menu-checkbox-item"
v-bind="forwarded"
:class=" cn(
<DropdownMenuCheckboxItem
data-slot="dropdown-menu-checkbox-item"
v-bind="forwarded"
:class=" cn(
`focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
props.class,
)"
>
<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Check class="size-4" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuCheckboxItem>
>
<span
class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
>
<DropdownMenuItemIndicator>
<Check class="size-4"/>
</DropdownMenuItemIndicator>
</span>
<slot/>
</DropdownMenuCheckboxItem>
</template>

18
app/components/ui/dropdown-menu/DropdownMenuContent.vue
View file

@ -29,13 +29,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuPortal>
<DropdownMenuContent
data-slot="dropdown-menu-content"
v-bind="forwarded"
:class="cn('bg-popover 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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
>
<slot />
</DropdownMenuContent>
</DropdownMenuPortal>
<DropdownMenuPortal>
<DropdownMenuContent
data-slot="dropdown-menu-content"
v-bind="forwarded"
:class="cn('bg-popover 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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
>
<slot/>
</DropdownMenuContent>
</DropdownMenuPortal>
</template>

9
app/components/ui/dropdown-menu/DropdownMenuGroup.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<DropdownMenuGroupProps>();
</script>
<template>
<DropdownMenuGroup
data-slot="dropdown-menu-group"
v-bind="props"
>
<slot />
</DropdownMenuGroup>
<DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
<slot/>
</DropdownMenuGroup>
</template>

18
app/components/ui/dropdown-menu/DropdownMenuItem.vue
View file

@ -27,13 +27,13 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DropdownMenuItem
data-slot="dropdown-menu-item"
:data-inset="inset ? '' : undefined"
:data-variant="variant"
v-bind="forwardedProps"
:class="cn(`focus:bg-accent w-full focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
>
<slot />
</DropdownMenuItem>
<DropdownMenuItem
data-slot="dropdown-menu-item"
:data-inset="inset ? '' : undefined"
:data-variant="variant"
v-bind="forwardedProps"
:class="cn(`focus:bg-accent w-full focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
>
<slot/>
</DropdownMenuItem>
</template>

16
app/components/ui/dropdown-menu/DropdownMenuLabel.vue
View file

@ -20,12 +20,12 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DropdownMenuLabel
data-slot="dropdown-menu-label"
:data-inset="inset ? '' : undefined"
v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
>
<slot />
</DropdownMenuLabel>
<DropdownMenuLabel
data-slot="dropdown-menu-label"
:data-inset="inset ? '' : undefined"
v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
>
<slot/>
</DropdownMenuLabel>
</template>

12
app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
View file

@ -13,10 +13,10 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuRadioGroup
data-slot="dropdown-menu-radio-group"
v-bind="forwarded"
>
<slot />
</DropdownMenuRadioGroup>
<DropdownMenuRadioGroup
data-slot="dropdown-menu-radio-group"
v-bind="forwarded"
>
<slot/>
</DropdownMenuRadioGroup>
</template>

26
app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
View file

@ -26,19 +26,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuRadioItem
data-slot="dropdown-menu-radio-item"
v-bind="forwarded"
:class="cn(
<DropdownMenuRadioItem
data-slot="dropdown-menu-radio-item"
v-bind="forwarded"
:class="cn(
`focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
props.class,
)"
>
<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Circle class="size-2 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuRadioItem>
>
<span
class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
>
<DropdownMenuItemIndicator>
<Circle class="size-2 fill-current"/>
</DropdownMenuItemIndicator>
</span>
<slot/>
</DropdownMenuRadioItem>
</template>

10
app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
View file

@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
</script>
<template>
<DropdownMenuSeparator
data-slot="dropdown-menu-separator"
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 my-1 h-px', props.class)"
/>
<DropdownMenuSeparator
data-slot="dropdown-menu-separator"
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 my-1 h-px', props.class)"
/>
</template>

12
app/components/ui/dropdown-menu/DropdownMenuShortcut.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<span
data-slot="dropdown-menu-shortcut"
:class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
>
<slot />
</span>
<span
data-slot="dropdown-menu-shortcut"
:class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
>
<slot/>
</span>
</template>

6
app/components/ui/dropdown-menu/DropdownMenuSub.vue
View file

@ -13,7 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
<slot />
</DropdownMenuSub>
<DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
<slot/>
</DropdownMenuSub>
</template>

14
app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
View file

@ -23,11 +23,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuSubContent
data-slot="dropdown-menu-sub-content"
v-bind="forwarded"
:class="cn('bg-popover 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] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
>
<slot />
</DropdownMenuSubContent>
<DropdownMenuSubContent
data-slot="dropdown-menu-sub-content"
v-bind="forwarded"
:class="cn('bg-popover 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] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
>
<slot/>
</DropdownMenuSubContent>
</template>

16
app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View file

@ -21,15 +21,15 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DropdownMenuSubTrigger
data-slot="dropdown-menu-sub-trigger"
v-bind="forwardedProps"
:class="cn(
<DropdownMenuSubTrigger
data-slot="dropdown-menu-sub-trigger"
v-bind="forwardedProps"
:class="cn(
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
props.class,
)"
>
<slot />
<ChevronRight class="ml-auto size-4" />
</DropdownMenuSubTrigger>
>
<slot/>
<ChevronRight class="ml-auto size-4"/>
</DropdownMenuSubTrigger>
</template>

12
app/components/ui/dropdown-menu/DropdownMenuTrigger.vue
View file

@ -11,10 +11,10 @@ const forwardedProps = useForwardProps(props);
</script>
<template>
<DropdownMenuTrigger
data-slot="dropdown-menu-trigger"
v-bind="forwardedProps"
>
<slot />
</DropdownMenuTrigger>
<DropdownMenuTrigger
data-slot="dropdown-menu-trigger"
v-bind="forwardedProps"
>
<slot/>
</DropdownMenuTrigger>
</template>

16
app/components/ui/form/FormControl.vue
View file

@ -6,12 +6,12 @@ const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
</script>
<template>
<Slot
:id="formItemId"
data-slot="form-control"
:aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
:aria-invalid="!!error"
>
<slot />
</Slot>
<Slot
:id="formItemId"
data-slot="form-control"
:aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
:aria-invalid="!!error"
>
<slot/>
</Slot>
</template>

14
app/components/ui/form/FormDescription.vue
View file

@ -11,11 +11,11 @@ const { formDescriptionId } = useFormField();
</script>
<template>
<p
:id="formDescriptionId"
data-slot="form-description"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</p>
<p
:id="formDescriptionId"
data-slot="form-description"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot/>
</p>
</template>

9
app/components/ui/form/FormItem.vue
View file

@ -13,10 +13,7 @@ provide(FORM_ITEM_INJECTION_KEY, id);
</script>
<template>
<div
data-slot="form-item"
:class="cn('grid gap-2', props.class)"
>
<slot />
</div>
<div data-slot="form-item" :class="cn('grid gap-2', props.class)">
<slot/>
</div>
</template>

16
app/components/ui/form/FormLabel.vue
View file

@ -11,15 +11,15 @@ const { error, formItemId } = useFormField();
</script>
<template>
<Label
data-slot="form-label"
:data-error="!!error"
:class="cn(
<Label
data-slot="form-label"
:data-error="!!error"
:class="cn(
'data-[error=true]:text-destructive-foreground',
props.class,
)"
:for="formItemId"
>
<slot />
</Label>
:for="formItemId"
>
<slot/>
</Label>
</template>

14
app/components/ui/form/FormMessage.vue
View file

@ -12,11 +12,11 @@ const { name, formMessageId } = useFormField();
</script>
<template>
<ErrorMessage
:id="formMessageId"
data-slot="form-message"
as="p"
:name="toValue(name)"
:class="cn('text-destructive-foreground text-sm', props.class)"
/>
<ErrorMessage
:id="formMessageId"
data-slot="form-message"
as="p"
:name="toValue(name)"
:class="cn('text-destructive-foreground text-sm', props.class)"
/>
</template>

9
app/components/ui/hover-card/HoverCard.vue
View file

@ -13,10 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<HoverCardRoot
data-slot="hover-card"
v-bind="forwarded"
>
<slot />
</HoverCardRoot>
<HoverCardRoot data-slot="hover-card" v-bind="forwarded">
<slot/>
</HoverCardRoot>
</template>

18
app/components/ui/hover-card/HoverCardContent.vue
View file

@ -25,18 +25,18 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<HoverCardPortal>
<HoverCardContent
data-slot="hover-card-content"
v-bind="forwardedProps"
:class="
<HoverCardPortal>
<HoverCardContent
data-slot="hover-card-content"
v-bind="forwardedProps"
:class="
cn(
'bg-popover 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 w-64 rounded-md border p-4 shadow-md outline-hidden',
props.class,
)
"
>
<slot />
</HoverCardContent>
</HoverCardPortal>
>
<slot/>
</HoverCardContent>
</HoverCardPortal>
</template>

9
app/components/ui/hover-card/HoverCardTrigger.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<HoverCardTriggerProps>();
</script>
<template>
<HoverCardTrigger
data-slot="hover-card-trigger"
v-bind="props"
>
<slot />
</HoverCardTrigger>
<HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
<slot/>
</HoverCardTrigger>
</template>

14
app/components/ui/input-group/InputGroup.vue
View file

@ -8,10 +8,10 @@ const props = defineProps<{
</script>
<template>
<div
data-slot="input-group"
role="group"
:class="cn(
<div
data-slot="input-group"
role="group"
:class="cn(
'group/input-group border-input bg-background relative flex w-full items-center rounded-md border outline-none',
'h-9 min-w-0 has-[>textarea]:h-auto',
@ -26,7 +26,7 @@ const props = defineProps<{
props.class,
)"
>
<slot />
</div>
>
<slot/>
</div>
</template>

18
app/components/ui/input-group/InputGroupAddon.vue
View file

@ -27,13 +27,13 @@ function handleInputGroupAddonClick(e: MouseEvent) {
</script>
<template>
<div
role="group"
data-slot="input-group-addon"
:data-align="props.align"
:class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
@click="handleInputGroupAddonClick"
>
<slot />
</div>
<div
role="group"
data-slot="input-group-addon"
:data-align="props.align"
:class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
@click="handleInputGroupAddonClick"
>
<slot/>
</div>
</template>

14
app/components/ui/input-group/InputGroupButton.vue
View file

@ -11,11 +11,11 @@ const props = withDefaults(defineProps<InputGroupButtonProps>(), {
</script>
<template>
<Button
:data-size="props.size"
:variant="props.variant"
:class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
>
<slot />
</Button>
<Button
:data-size="props.size"
:variant="props.variant"
:class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
>
<slot/>
</Button>
</template>

8
app/components/ui/input-group/InputGroupInput.vue
View file

@ -9,11 +9,11 @@ const props = defineProps<{
</script>
<template>
<Input
data-slot="input-group-control"
:class="cn(
<Input
data-slot="input-group-control"
:class="cn(
'flex-1 rounded-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',
props.class,
)"
/>
/>
</template>

10
app/components/ui/input-group/InputGroupText.vue
View file

@ -8,12 +8,12 @@ const props = defineProps<{
</script>
<template>
<span
:class="cn(
<span
:class="cn(
'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
props.class,
)"
>
<slot />
</span>
>
<slot/>
</span>
</template>

8
app/components/ui/input-group/InputGroupTextarea.vue
View file

@ -9,11 +9,11 @@ const props = defineProps<{
</script>
<template>
<Textarea
data-slot="input-group-control"
:class="cn(
<Textarea
data-slot="input-group-control"
:class="cn(
'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',
props.class,
)"
/>
/>
</template>

10
app/components/ui/input/Input.vue
View file

@ -19,14 +19,14 @@ const modelValue = useVModel(props, "modelValue", emits, {
</script>
<template>
<input
v-model="modelValue"
data-slot="input"
:class="cn(
<input
v-model="modelValue"
data-slot="input"
:class="cn(
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
props.class,
)"
>
>
</template>

7
app/components/ui/input/url.vue
View file

@ -46,11 +46,14 @@ watch(isValidUrl, (value) => {
<template>
<div class="space-y-2">
<Input v-model="modelValue" v-bind="$attrs" />
<Input v-model="modelValue" v-bind="$attrs"/>
<p v-if="isValidUrl" class="text-green-600 text-xs">
{{ m.sunny_small_warbler_express() }}
</p>
<p v-else-if="(modelValue?.toString().length ?? 0) > 0" class="text-destructive text-xs">
<p
v-else-if="(modelValue?.toString().length ?? 0) > 0"
class="text-destructive text-xs"
>
{{ m.teal_late_grebe_blend() }}
</p>
</div>

14
app/components/ui/label/Label.vue
View file

@ -13,16 +13,16 @@ const delegatedProps = computed(() => {
</script>
<template>
<Label
data-slot="label"
v-bind="delegatedProps"
:class="
<Label
data-slot="label"
v-bind="delegatedProps"
:class="
cn(
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
props.class,
)
"
>
<slot />
</Label>
>
<slot/>
</Label>
</template>

9
app/components/ui/number-field/NumberField.vue
View file

@ -19,7 +19,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
<slot />
</NumberFieldRoot>
<NumberFieldRoot
v-bind="forwarded"
:class="cn('grid gap-1.5', props.class)"
>
<slot/>
</NumberFieldRoot>
</template>

8
app/components/ui/number-field/NumberFieldContent.vue
View file

@ -8,7 +8,9 @@ const props = defineProps<{
</script>
<template>
<div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
<slot />
</div>
<div
:class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)"
>
<slot/>
</div>
</template>

14
app/components/ui/number-field/NumberFieldDecrement.vue
View file

@ -19,9 +19,13 @@ const forwarded = useForwardProps(delegatedProps);
</script>
<template>
<NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
<slot>
<Minus class="h-4 w-4" />
</slot>
</NumberFieldDecrement>
<NumberFieldDecrement
data-slot="decrement"
v-bind="forwarded"
:class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)"
>
<slot>
<Minus class="h-4 w-4"/>
</slot>
</NumberFieldDecrement>
</template>

14
app/components/ui/number-field/NumberFieldIncrement.vue
View file

@ -19,9 +19,13 @@ const forwarded = useForwardProps(delegatedProps);
</script>
<template>
<NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
<slot>
<Plus class="h-4 w-4" />
</slot>
</NumberFieldIncrement>
<NumberFieldIncrement
data-slot="increment"
v-bind="forwarded"
:class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)"
>
<slot>
<Plus class="h-4 w-4"/>
</slot>
</NumberFieldIncrement>
</template>

8
app/components/ui/number-field/NumberFieldInput.vue
View file

@ -9,8 +9,8 @@ const props = defineProps<{
</script>
<template>
<NumberFieldInput
data-slot="input"
:class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors 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)"
/>
<NumberFieldInput
data-slot="input"
:class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors 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>

9
app/components/ui/popover/Popover.vue
View file

@ -9,10 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<PopoverRoot
data-slot="popover"
v-bind="forwarded"
>
<slot />
</PopoverRoot>
<PopoverRoot data-slot="popover" v-bind="forwarded">
<slot/>
</PopoverRoot>
</template>

9
app/components/ui/popover/PopoverAnchor.vue
View file

@ -6,10 +6,7 @@ const props = defineProps<PopoverAnchorProps>();
</script>
<template>
<PopoverAnchor
data-slot="popover-anchor"
v-bind="props"
>
<slot />
</PopoverAnchor>
<PopoverAnchor data-slot="popover-anchor" v-bind="props">
<slot/>
</PopoverAnchor>
</template>

18
app/components/ui/popover/PopoverContent.vue
View file

@ -32,18 +32,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<PopoverPortal>
<PopoverContent
data-slot="popover-content"
v-bind="{ ...forwarded, ...$attrs }"
:class="
<PopoverPortal>
<PopoverContent
data-slot="popover-content"
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'bg-popover 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 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
props.class,
)
"
>
<slot />
</PopoverContent>
</PopoverPortal>
>
<slot/>
</PopoverContent>
</PopoverPortal>
</template>

9
app/components/ui/popover/PopoverTrigger.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<PopoverTriggerProps>();
</script>
<template>
<PopoverTrigger
data-slot="popover-trigger"
v-bind="props"
>
<slot />
</PopoverTrigger>
<PopoverTrigger data-slot="popover-trigger" v-bind="props">
<slot/>
</PopoverTrigger>
</template>

9
app/components/ui/select/Select.vue
View file

@ -9,10 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<SelectRoot
data-slot="select"
v-bind="forwarded"
>
<slot />
</SelectRoot>
<SelectRoot data-slot="select" v-bind="forwarded">
<slot/>
</SelectRoot>
</template>

28
app/components/ui/select/SelectContent.vue
View file

@ -33,23 +33,25 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<SelectPortal>
<SelectContent
data-slot="select-content"
v-bind="{ ...forwarded, ...$attrs }"
:class="cn(
<SelectPortal>
<SelectContent
data-slot="select-content"
v-bind="{ ...forwarded, ...$attrs }"
:class="cn(
'bg-popover 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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
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',
props.class,
)
"
>
<SelectScrollUpButton />
<SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
<slot />
</SelectViewport>
<SelectScrollDownButton />
</SelectContent>
</SelectPortal>
>
<SelectScrollUpButton/>
<SelectViewport
:class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')"
>
<slot/>
</SelectViewport>
<SelectScrollDownButton/>
</SelectContent>
</SelectPortal>
</template>

9
app/components/ui/select/SelectGroup.vue
View file

@ -5,10 +5,7 @@ const props = defineProps<SelectGroupProps>();
</script>
<template>
<SelectGroup
data-slot="select-group"
v-bind="props"
>
<slot />
</SelectGroup>
<SelectGroup data-slot="select-group" v-bind="props">
<slot/>
</SelectGroup>
</template>

30
app/components/ui/select/SelectItem.vue
View file

@ -24,24 +24,26 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<SelectItem
data-slot="select-item"
v-bind="forwardedProps"
:class="
<SelectItem
data-slot="select-item"
v-bind="forwardedProps"
:class="
cn(
`focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
props.class,
)
"
>
<span class="absolute right-2 flex size-3.5 items-center justify-center">
<SelectItemIndicator>
<Check class="size-4" />
</SelectItemIndicator>
</span>
>
<span
class="absolute right-2 flex size-3.5 items-center justify-center"
>
<SelectItemIndicator>
<Check class="size-4"/>
</SelectItemIndicator>
</span>
<SelectItemText>
<slot />
</SelectItemText>
</SelectItem>
<SelectItemText>
<slot/>
</SelectItemText>
</SelectItem>
</template>

Some files were not shown because too many files have changed in this diff Show more