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

fix: change space-x-* with gap and add flex

Browse Source
This commit is contained in:
Raed Bahri 2024-03-05 09:03:52 +01:00
parent 2b6dfd1fbb
commit 71fea4ff3a
43 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/default/example/CardChat.vue
View File

@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([])
<template>
<Card>
<CardHeader class="flex flex-row items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<Avatar>
<AvatarImage src="/avatars/01.png" alt="Image" />
<AvatarFallback>OM</AvatarFallback>
@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([])
</CardContent>
<CardFooter>
<form
class="flex w-full items-center space-x-2"
class="flex w-full items-center gap-2"
@submit.prevent="() => {
if (inputLength === 0) return
messages.push({
@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([])
</CommandList>
</Command>
<DialogFooter class="flex items-center border-t p-4 sm:justify-between">
<div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden">
<div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden">
<Avatar
v-for="user in selectedUsers"
:key="user.email"

2
apps/www/src/lib/registry/default/example/CardDemo.vue
View File

@ -36,7 +36,7 @@ const notifications = [
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<div class=" flex items-center gap-4 rounded-md border p-4">
<BellRing />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">

2
apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
View File

@ -49,7 +49,7 @@ const data = [
<CardDescription>Set your daily activity goal.</CardDescription>
</CardHeader>
<CardContent class="pb-2">
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-2">
<Button
variant="outline"
size="icon"

4
apps/www/src/lib/registry/default/example/Cards/DataTable.vue
View File

@ -231,12 +231,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

2
apps/www/src/lib/registry/default/example/CheckboxDemo.vue
View File

@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>
<template>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Checkbox id="terms" />
<label
for="terms"

2
apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
View File

@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>
<template>
<div class="items-top flex space-x-2">
<div class="items-top flex gap-2">
<Checkbox id="terms1" disabled />
<label
for="terms2"

2
apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
View File

@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => {
</div>
<FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
<FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormItem class="flex flex-row items-start gap-3 space-y-0">
<FormControl>
<Checkbox
:checked="value.includes(item.id)"

2
apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
View File

@ -17,7 +17,7 @@ const isOpen = ref(false)
v-model:open="isOpen"
class="w-[350px] space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<div class="flex items-center justify-between gap-4 px-4">
<h4 class="text-sm font-semibold">
@peduarte starred 3 repositories
</h4>

2
apps/www/src/lib/registry/default/example/ComboboxPopover.vue
View File

@ -66,7 +66,7 @@ const selectedStatus = ref<Status>()
</script>
<template>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<p class="text-sm text-muted-foreground">
Status
</p>

4
apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
View File

@ -242,12 +242,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

4
apps/www/src/lib/registry/default/example/DataTableDemo.vue
View File

@ -224,12 +224,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

2
apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
View File

@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/default/ui/label'
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<div class="grid flex-1 gap-2">
<Label for="link" class="sr-only">
Link

2
apps/www/src/lib/registry/default/example/DrawerDemo.vue
View File

@ -48,7 +48,7 @@ const data = [
<DrawerDescription>Set your daily activity goal.</DrawerDescription>
</DrawerHeader>
<div class="p-4 pb-0">
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-2">
<Button
variant="outline"
size="icon"

2
apps/www/src/lib/registry/default/example/HoverCardDemo.vue
View File

@ -22,7 +22,7 @@ import {
</Button>
</HoverCardTrigger>
<HoverCardContent class="w-80">
<div class="flex justify-between space-x-4">
<div class="flex justify-between gap-4">
<Avatar>
<AvatarImage src="https://github.com/vuejs.png" />
<AvatarFallback>VC</AvatarFallback>

2
apps/www/src/lib/registry/default/example/LabelDemo.vue
View File

@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/default/ui/label'
<template>
<div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Checkbox id="terms" />
<Label for="terms">Accept terms and conditions</Label>
</div>

6
apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
View File

@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-grou
<template>
<RadioGroup default-value="comfortable">
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r1" value="default" />
<Label for="r1">Default</Label>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r2" value="comfortable" />
<Label for="r2">Comfortable</Label>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r3" value="compact" />
<Label for="r3">Compact</Label>
</div>

2
apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
View File

@ -28,7 +28,7 @@ const works: Artwork[] = [
<template>
<ScrollArea class="border rounded-md w-96 whitespace-nowrap">
<div class="flex p-4 space-x-4 w-max">
<div class="flex p-4 gap-4 w-max">
<div v-for="artwork in works" :key="artwork.id">
<figure class="shrink-0">
<div class="overflow-hidden rounded-md">

2
apps/www/src/lib/registry/default/example/SeparatorDemo.vue
View File

@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/default/ui/separator'
</p>
</div>
<Separator class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div class="flex h-5 items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>

2
apps/www/src/lib/registry/default/example/SkeletonDemo.vue
View File

@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/default/ui/skeleton'
</script>
<template>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />

2
apps/www/src/lib/registry/default/example/SwitchDemo.vue
View File

@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/default/ui/switch'
</script>
<template>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">Airplane Mode</Label>
</div>

2
apps/www/src/lib/registry/default/ui/toast/index.ts
View File

@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
import { type VariantProps, cva } from 'class-variance-authority'
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 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--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 gap-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--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: {
variant: {

6
apps/www/src/lib/registry/new-york/example/CardChat.vue
View File

@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([])
<template>
<Card>
<CardHeader class="flex flex-row items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<Avatar>
<AvatarImage src="/avatars/01.png" alt="Image" />
<AvatarFallback>OM</AvatarFallback>
@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([])
</CardContent>
<CardFooter>
<form
class="flex w-full items-center space-x-2"
class="flex w-full items-center gap-2"
@submit.prevent="() => {
if (inputLength === 0) return
messages.push({
@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([])
</CommandList>
</Command>
<DialogFooter class="flex items-center border-t p-4 sm:justify-between">
<div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden">
<div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden">
<Avatar
v-for="user in selectedUsers"
:key="user.email"

2
apps/www/src/lib/registry/new-york/example/CardDemo.vue
View File

@ -35,7 +35,7 @@ const notifications = [
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<div class=" flex items-center gap-4 rounded-md border p-4">
<BellIcon />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">

2
apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
View File

@ -45,7 +45,7 @@ const data = [
<CardDescription>Set your daily activity goal.</CardDescription>
</CardHeader>
<CardContent class="pb-2">
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-2">
<Button
variant="outline"
size="icon"

4
apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
View File

@ -231,12 +231,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

2
apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
View File

@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
</script>
<template>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Checkbox id="terms" />
<label
for="terms"

2
apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue
View File

@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
</script>
<template>
<div class="items-top flex space-x-2">
<div class="items-top flex gap-2">
<Checkbox id="terms1" disabled />
<label
for="terms2"

2
apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
View File

@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => {
</div>
<FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
<FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormItem class="flex flex-row items-start gap-3 space-y-0">
<FormControl>
<Checkbox
:checked="value.includes(item.id)"

2
apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
View File

@ -17,7 +17,7 @@ const isOpen = ref(false)
v-model:open="isOpen"
class="w-[350px] space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<div class="flex items-center justify-between gap-4 px-4">
<h4 class="text-sm font-semibold">
@peduarte starred 3 repositories
</h4>

2
apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
View File

@ -49,7 +49,7 @@ const selectedStatus = ref<Status>()
</script>
<template>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<p class="text-sm text-muted-foreground">
Status
</p>

4
apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
View File

@ -242,12 +242,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

4
apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
View File

@ -224,12 +224,12 @@ const table = useVueTable({
</Table>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"

2
apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
View File

@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<div class="grid flex-1 gap-2">
<Label for="link" class="sr-only">
Link

2
apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
View File

@ -48,7 +48,7 @@ const data = [
<DrawerDescription>Set your daily activity goal.</DrawerDescription>
</DrawerHeader>
<div class="p-4 pb-0">
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-2">
<Button
variant="outline"
size="icon"

2
apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
View File

@ -22,7 +22,7 @@ import {
</Button>
</HoverCardTrigger>
<HoverCardContent class="w-80">
<div class="flex justify-between space-x-4">
<div class="flex justify-between gap-4">
<Avatar>
<AvatarImage src="https://github.com/vuejs.png" />
<AvatarFallback>VC</AvatarFallback>

2
apps/www/src/lib/registry/new-york/example/LabelDemo.vue
View File

@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
<template>
<div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Checkbox id="terms" />
<Label for="terms">Accept terms and conditions</Label>
</div>

6
apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
View File

@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-gro
<template>
<RadioGroup default-value="comfortable" :orientation="'vertical'">
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r1" value="default" />
<Label for="r1">Default</Label>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r2" value="comfortable" />
<Label for="r2">Comfortable</Label>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<RadioGroupItem id="r3" value="compact" />
<Label for="r3">Compact</Label>
</div>

2
apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
View File

@ -28,7 +28,7 @@ const works: Artwork[] = [
<template>
<ScrollArea class="border rounded-md w-96 whitespace-nowrap">
<div class="flex p-4 space-x-4 w-max">
<div class="flex p-4 gap-4 w-max">
<div v-for="artwork in works" :key="artwork.id">
<figure class="shrink-0">
<div class="overflow-hidden rounded-md">

2
apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
View File

@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
</p>
</div>
<Separator class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div class="flex h-5 items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>

2
apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
View File

@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
</script>
<template>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />

2
apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
View File

@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/new-york/ui/switch'
</script>
<template>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">Airplane Mode</Label>
</div>

2
apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
View File

@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded"
:class="
cn(
'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm',
props.class,
)
"

2
apps/www/src/lib/registry/new-york/ui/toast/index.ts
View File

@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
import { type VariantProps, cva } from 'class-variance-authority'
export const toastVariants = cva(
'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pe-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',
'group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-md border p-4 pe-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: {
variant: {