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

fix: change to css logical props

Browse Source
This commit is contained in:
Raed Bahri 2024-03-05 08:56:43 +01:00
parent edd713fd08
commit 2b6dfd1fbb
131 changed files with 296 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/default/ui/button'
<template> <template>
<Button disabled> <Button disabled>
<Loader2 class="w-4 h-4 mr-2 animate-spin" /> <Loader2 class="w-4 h-4 me-2 animate-spin" />
Please wait Please wait
</Button> </Button>
</template> </template>

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

@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'
<template> <template>
<Button> <Button>
<Mail class="w-4 h-4 mr-2" /> Login with Email <Mail class="w-4 h-4 me-2" /> Login with Email
</Button> </Button>
</template> </template>

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

@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([])
:key="index" :key="index"
:class="cn( :class="cn(
'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm', 'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted', message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted',
)" )"
> >
{{ message.content }} {{ message.content }}
@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([])
<AvatarImage :src="user.avatar" alt="Image" /> <AvatarImage :src="user.avatar" alt="Image" />
<AvatarFallback>{{ user.name[0] }}</AvatarFallback> <AvatarFallback>{{ user.name[0] }}</AvatarFallback>
</Avatar> </Avatar>
<div class="ml-2"> <div class="ms-2">
<p class="text-sm font-medium leading-none"> <p class="text-sm font-medium leading-none">
{{ user.name }} {{ user.name }}
</p> </p>
@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([])
{{ user.email }} {{ user.email }}
</p> </p>
</div> </div>
<Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" /> <Check v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>

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

@ -67,7 +67,7 @@ const notifications = [
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button class="w-full"> <Button class="w-full">
<Check class="mr-2 h-4 w-4" /> Mark all as read <Check class="me-2 h-4 w-4" /> Mark all as read
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>

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

@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })]) }, ['Email', h(ChevronsUpDown, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, },
@ -178,8 +178,8 @@ const table = useVueTable({
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDown class="ml-2 h-4 w-4" /> Columns <ChevronDown class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@ -201,7 +201,7 @@ const table = useVueTable({
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"> <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3"> <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" /> <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -213,7 +213,7 @@ const table = useVueTable({
:key="row.id" :key="row.id"
:data-state="row.getIsSelected() && 'selected'" :data-state="row.getIsSelected() && 'selected'"
> >
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3"> <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" /> <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell> </TableCell>
</TableRow> </TableRow>

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

@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
align: 'start', align: 'start',
}" }"
> >
<CarouselContent class="-ml-1"> <CarouselContent class="-ms-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3"> <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1"> <div class="p-1">
<Card> <Card>
<CardContent class="flex aspect-square items-center justify-center p-6"> <CardContent class="flex aspect-square items-center justify-center p-6">

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

@ -44,7 +44,7 @@ const value = ref<string>('')
{{ value {{ value
? frameworks.find((framework) => framework.value === value)?.label ? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..." }} : "Select framework..." }}
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
@ -67,7 +67,7 @@ const value = ref<string>('')
{{ framework.label }} {{ framework.label }}
<Check <Check
:class="cn( :class="cn(
'ml-auto h-4 w-4', 'ms-auto h-4 w-4',
value === framework.value ? 'opacity-100' : 'opacity-0', value === framework.value ? 'opacity-100' : 'opacity-0',
)" )"
/> />

10
apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
View File

@ -42,7 +42,7 @@ const open = ref(false)
<template> <template>
<div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"> <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
<p class="text-sm font-medium leading-none"> <p class="text-sm font-medium leading-none">
<span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
{{ labelRef }} {{ labelRef }}
</span> </span>
<span class="text-muted-foreground">Create a new project</span> <span class="text-muted-foreground">Create a new project</span>
@ -57,17 +57,17 @@ const open = ref(false)
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem> <DropdownMenuItem>
<User class="mr-2 h-4 w-4" /> <User class="me-2 h-4 w-4" />
Assign to... Assign to...
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Calendar class="mr-2 h-4 w-4" /> <Calendar class="me-2 h-4 w-4" />
Set due date... Set due date...
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger> <DropdownMenuSubTrigger>
<Tags class="mr-2 h-4 w-4" /> <Tags class="me-2 h-4 w-4" />
Apply label Apply label
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuSubContent class="p-0"> <DropdownMenuSubContent class="p-0">
@ -97,7 +97,7 @@ const open = ref(false)
</DropdownMenuSub> </DropdownMenuSub>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem class="text-red-600"> <DropdownMenuItem class="text-red-600">
<Trash class="mr-2 h-4 w-4" /> <Trash class="me-2 h-4 w-4" />
Delete Delete
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>

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

@ -76,7 +76,7 @@ const onSubmit = handleSubmit((values) => {
{{ values.language ? languages.find( {{ values.language ? languages.find(
(language) => language.value === values.language, (language) => language.value === values.language,
)?.label : 'Select language...' }} )?.label : 'Select language...' }}
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
@ -97,7 +97,7 @@ const onSubmit = handleSubmit((values) => {
}" }"
> >
<Check <Check
:class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" :class="cn('me-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
/> />
{{ language.label }} {{ language.label }}
</CommandItem> </CommandItem>

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

@ -60,7 +60,7 @@ const statuses: Status[] = [
] ]
const open = ref(false) const open = ref(false)
const value = ref<typeof statuses[number]>() // const value = ref<typeof statuses[number]>()
const selectedStatus = ref<Status>() const selectedStatus = ref<Status>()
</script> </script>
@ -78,7 +78,7 @@ const selectedStatus = ref<Status>()
class="w-[150px] justify-start" class="w-[150px] justify-start"
> >
<template v-if="selectedStatus"> <template v-if="selectedStatus">
<component :is="selectedStatus?.icon" class="mr-2 h-4 w-4 shrink-0" /> <component :is="selectedStatus?.icon" class="me-2 h-4 w-4 shrink-0" />
{{ selectedStatus?.label }} {{ selectedStatus?.label }}
</template> </template>
<template v-else> <template v-else>
@ -104,7 +104,7 @@ const selectedStatus = ref<Status>()
<component <component
:is="status.icon" :is="status.icon"
:key="status.value" :key="status.value"
:class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40', :class="cn('me-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',
)" )"
/> />
<span>{{ status.label }}</span> <span>{{ status.label }}</span>

12
apps/www/src/lib/registry/default/example/CommandDemo.vue
View File

@ -27,32 +27,32 @@ import {
<CommandEmpty>No results found.</CommandEmpty> <CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions"> <CommandGroup heading="Suggestions">
<CommandItem value="Calendar"> <CommandItem value="Calendar">
<Calendar class="mr-2 h-4 w-4" /> <Calendar class="me-2 h-4 w-4" />
<span>Calendar</span> <span>Calendar</span>
</CommandItem> </CommandItem>
<CommandItem value="Search Emoji"> <CommandItem value="Search Emoji">
<Smile class="mr-2 h-4 w-4" /> <Smile class="me-2 h-4 w-4" />
<span>Search Emoji</span> <span>Search Emoji</span>
</CommandItem> </CommandItem>
<CommandItem value="Calculator"> <CommandItem value="Calculator">
<Calculator class="mr-2 h-4 w-4" /> <Calculator class="me-2 h-4 w-4" />
<span>Calculator</span> <span>Calculator</span>
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading="Settings"> <CommandGroup heading="Settings">
<CommandItem value="Profile"> <CommandItem value="Profile">
<User class="mr-2 h-4 w-4" /> <User class="me-2 h-4 w-4" />
<span>Profile</span> <span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut> <CommandShortcut>⌘P</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Billing"> <CommandItem value="Billing">
<CreditCard class="mr-2 h-4 w-4" /> <CreditCard class="me-2 h-4 w-4" />
<span>Billing</span> <span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut> <CommandShortcut>⌘B</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Settings"> <CommandItem value="Settings">
<Settings class="mr-2 h-4 w-4" /> <Settings class="me-2 h-4 w-4" />
<span>Settings</span> <span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut> <CommandShortcut>⌘S</CommandShortcut>
</CommandItem> </CommandItem>

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

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { import type {
ColumnDef,
ColumnFiltersState, ColumnFiltersState,
SortingState, SortingState,
VisibilityState, VisibilityState,
@ -88,7 +87,7 @@ const columns = [
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row, column }) => { cell: ({ row }) => {
return h(Checkbox, { return h(Checkbox, {
'checked': row.getIsSelected(), 'checked': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:checked': value => row.toggleSelected(!!value),
@ -108,7 +107,7 @@ const columns = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]) }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}), }),
@ -165,8 +164,6 @@ const table = useVueTable({
}, },
}, },
}) })
const getState = table.getState()
</script> </script>
<template> <template>
@ -180,8 +177,8 @@ const getState = table.getState()
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDown class="ml-2 h-4 w-4" /> Columns <ChevronDown class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

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

@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]) }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, },
@ -171,8 +171,8 @@ const table = useVueTable({
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDown class="ml-2 h-4 w-4" /> Columns <ChevronDown class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

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

@ -25,7 +25,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span> <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>

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

@ -32,7 +32,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<template v-if="date"> <template v-if="date">
{{ format(date, "PPP") }} {{ format(date, "PPP") }}
</template> </template>

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

@ -30,7 +30,7 @@ const date = ref({
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span> <span>
{{ date.start ? ( {{ date.start ? (

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

@ -25,7 +25,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span> <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>

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

@ -34,11 +34,11 @@ const isOpen = ref(false)
<UseTemplate> <UseTemplate>
<form class="grid items-start gap-4 px-4"> <form class="grid items-start gap-4 px-4">
<div class="grid gap-2"> <div class="grid gap-2">
<Label html-for="email">Email</Label> <Label htms-for="email">Email</Label>
<Input id="email" type="email" default-value="shadcn@example.com" /> <Input id="email" type="email" default-value="shadcn@example.com" />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label html-for="username">Username</Label> <Label htms-for="username">Username</Label>
<Input id="username" default-value="@shadcn" /> <Input id="username" default-value="@shadcn" />
</div> </div>
<Button type="submit"> <Button type="submit">

28
apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
View File

@ -45,22 +45,22 @@ import {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem> <DropdownMenuItem>
<User class="mr-2 h-4 w-4" /> <User class="me-2 h-4 w-4" />
<span>Profile</span> <span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<CreditCard class="mr-2 h-4 w-4" /> <CreditCard class="me-2 h-4 w-4" />
<span>Billing</span> <span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut> <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Settings class="mr-2 h-4 w-4" /> <Settings class="me-2 h-4 w-4" />
<span>Settings</span> <span>Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut> <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Keyboard class="mr-2 h-4 w-4" /> <Keyboard class="me-2 h-4 w-4" />
<span>Keyboard shortcuts</span> <span>Keyboard shortcuts</span>
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut> <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
@ -68,54 +68,54 @@ import {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem> <DropdownMenuItem>
<Users class="mr-2 h-4 w-4" /> <Users class="me-2 h-4 w-4" />
<span>Team</span> <span>Team</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger> <DropdownMenuSubTrigger>
<UserPlus class="mr-2 h-4 w-4" /> <UserPlus class="me-2 h-4 w-4" />
<span>Invite users</span> <span>Invite users</span>
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent> <DropdownMenuSubContent>
<DropdownMenuItem> <DropdownMenuItem>
<Mail class="mr-2 h-4 w-4" /> <Mail class="me-2 h-4 w-4" />
<span>Email</span> <span>Email</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<MessageSquare class="mr-2 h-4 w-4" /> <MessageSquare class="me-2 h-4 w-4" />
<span>Message</span> <span>Message</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<PlusCircle class="mr-2 h-4 w-4" /> <PlusCircle class="me-2 h-4 w-4" />
<span>More...</span> <span>More...</span>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuPortal> </DropdownMenuPortal>
</DropdownMenuSub> </DropdownMenuSub>
<DropdownMenuItem> <DropdownMenuItem>
<Plus class="mr-2 h-4 w-4" /> <Plus class="me-2 h-4 w-4" />
<span>New Team</span> <span>New Team</span>
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut> <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<Github class="mr-2 h-4 w-4" /> <Github class="me-2 h-4 w-4" />
<span>GitHub</span> <span>GitHub</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<LifeBuoy class="mr-2 h-4 w-4" /> <LifeBuoy class="me-2 h-4 w-4" />
<span>Support</span> <span>Support</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem disabled> <DropdownMenuItem disabled>
<Cloud class="mr-2 h-4 w-4" /> <Cloud class="me-2 h-4 w-4" />
<span>API</span> <span>API</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<LogOut class="mr-2 h-4 w-4" /> <LogOut class="me-2 h-4 w-4" />
<span>Log out</span> <span>Log out</span>
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>

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

@ -35,7 +35,7 @@ import {
Progressive JavaScript framework for building modern web interfaces. Progressive JavaScript framework for building modern web interfaces.
</p> </p>
<div class="flex items-center pt-2"> <div class="flex items-center pt-2">
<CalendarDays class="mr-2 h-4 w-4 opacity-70" /> <CalendarDays class="me-2 h-4 w-4 opacity-70" />
<span class="text-xs text-muted-foreground"> <span class="text-xs text-muted-foreground">
Joined January 2014 Joined January 2014
</span> </span>

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

@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/default/ui/input'
<template> <template>
<div class="relative w-full max-w-sm items-center"> <div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" /> <Input id="search" type="text" placeholder="Search..." class="ps-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2"> <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" /> <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span> </span>

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

@ -30,7 +30,7 @@ const date = ref({
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span> <span>
{{ date.start ? ( {{ date.start ? (

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

@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/default/ui/toggle'
<template> <template>
<Toggle aria-label="Toggle italic"> <Toggle aria-label="Toggle italic">
<Italic class="w-4 h-4 mr-2" /> <Italic class="w-4 h-4 me-2" />
Italic Italic
</Toggle> </Toggle>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <template>
<blockquote class="mt-6 border-l-2 pl-6 italic"> <blockquote class="mt-6 border-l-2 ps-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair that "After all," he said, "everyone enjoys a good joke, so it's only fair that
they should pay for the privilege." they should pay for the privilege."
</blockquote> </blockquote>

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

@ -23,7 +23,7 @@
</a> </a>
: he would tax the jokes in the kingdom. : he would tax the jokes in the kingdom.
</p> </p>
<blockquote class="mt-6 border-l-2 pl-6 italic"> <blockquote class="mt-6 border-l-2 ps-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair "After all," he said, "everyone enjoys a good joke, so it's only fair
that they should pay for the privilege." that they should pay for the privilege."
</blockquote> </blockquote>
@ -34,7 +34,7 @@
The king's subjects were not amused. They grumbled and complained, but The king's subjects were not amused. They grumbled and complained, but
the king was firm: the king was firm:
</p> </p>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2"> <ul class="my-6 ms-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li> <li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li> <li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li>

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

@ -1,5 +1,5 @@
<template> <template>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2"> <ul class="my-6 ms-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li> <li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li> <li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li>

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
View File

@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', 'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class, props.class,
) )
" "

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

@ -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 p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground',
{ {
variants: { variants: {
variant: { variant: {

64
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -193,9 +193,9 @@ const vCalendarSlots = computed(() => {
@apply w-full relative; @apply w-full relative;
} }
:root { :root {
--vc-slide-translate: 22px; --vc-slide-translate: 22px;
--vc-slide-duration: 0.15s; --vc-slide-duration: 0.15s;
--vc-slide-timing: ease; --vc-slide-timing: ease;
} }
.calendar .vc-fade-enter-active, .calendar .vc-fade-enter-active,
@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-down-leave-active, .calendar .vc-slide-down-leave-active,
.calendar .vc-slide-fade-enter-active, .calendar .vc-slide-fade-enter-active,
.calendar .vc-slide-fade-leave-active { .calendar .vc-slide-fade-leave-active {
transition: transition:
opacity var(--vc-slide-duration) var(--vc-slide-timing), opacity var(--vc-slide-duration) var(--vc-slide-timing),
-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
transition: transition:
transform var(--vc-slide-duration) var(--vc-slide-timing), transform var(--vc-slide-duration) var(--vc-slide-timing),
opacity var(--vc-slide-duration) var(--vc-slide-timing); opacity var(--vc-slide-duration) var(--vc-slide-timing);
transition: transition:
transform var(--vc-slide-duration) var(--vc-slide-timing), transform var(--vc-slide-duration) var(--vc-slide-timing),
opacity var(--vc-slide-duration) var(--vc-slide-timing), opacity var(--vc-slide-duration) var(--vc-slide-timing),
-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
pointer-events: none; pointer-events: none;
} }
.calendar .vc-none-leave-active, .calendar .vc-none-leave-active,
@ -231,8 +231,8 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-right-leave-active, .calendar .vc-slide-right-leave-active,
.calendar .vc-slide-up-leave-active, .calendar .vc-slide-up-leave-active,
.calendar .vc-slide-down-leave-active { .calendar .vc-slide-down-leave-active {
position: absolute !important; position: absolute !important;
width: 100%; width: 100%;
} }
.calendar .vc-none-enter-from, .calendar .vc-none-enter-from,
@ -249,39 +249,39 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-down-leave-to, .calendar .vc-slide-down-leave-to,
.calendar .vc-slide-fade-enter-from, .calendar .vc-slide-fade-enter-from,
.calendar .vc-slide-fade-leave-to { .calendar .vc-slide-fade-leave-to {
opacity: 0; opacity: 0;
} }
.calendar .vc-slide-left-enter-from, .calendar .vc-slide-left-enter-from,
.calendar .vc-slide-right-leave-to, .calendar .vc-slide-right-leave-to,
.calendar .vc-slide-fade-enter-from.direction-left, .calendar .vc-slide-fade-enter-from.direction-left,
.calendar .vc-slide-fade-leave-to.direction-left { .calendar .vc-slide-fade-leave-to.direction-left {
-webkit-transform: translateX(var(--vc-slide-translate)); -webkit-transform: translateX(var(--vc-slide-translate));
transform: translateX(var(--vc-slide-translate)); transform: translateX(var(--vc-slide-translate));
} }
.calendar .vc-slide-right-enter-from, .calendar .vc-slide-right-enter-from,
.calendar .vc-slide-left-leave-to, .calendar .vc-slide-left-leave-to,
.calendar .vc-slide-fade-enter-from.direction-right, .calendar .vc-slide-fade-enter-from.direction-right,
.calendar .vc-slide-fade-leave-to.direction-right { .calendar .vc-slide-fade-leave-to.direction-right {
-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
transform: translateX(calc(-1 * var(--vc-slide-translate))); transform: translateX(calc(-1 * var(--vc-slide-translate)));
} }
.calendar .vc-slide-up-enter-from, .calendar .vc-slide-up-enter-from,
.calendar .vc-slide-down-leave-to, .calendar .vc-slide-down-leave-to,
.calendar .vc-slide-fade-enter-from.direction-top, .calendar .vc-slide-fade-enter-from.direction-top,
.calendar .vc-slide-fade-leave-to.direction-top { .calendar .vc-slide-fade-leave-to.direction-top {
-webkit-transform: translateY(var(--vc-slide-translate)); -webkit-transform: translateY(var(--vc-slide-translate));
transform: translateY(var(--vc-slide-translate)); transform: translateY(var(--vc-slide-translate));
} }
.calendar .vc-slide-down-enter-from, .calendar .vc-slide-down-enter-from,
.calendar .vc-slide-up-leave-to, .calendar .vc-slide-up-leave-to,
.calendar .vc-slide-fade-enter-from.direction-bottom, .calendar .vc-slide-fade-enter-from.direction-bottom,
.calendar .vc-slide-fade-leave-to.direction-bottom { .calendar .vc-slide-fade-leave-to.direction-bottom {
-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
transform: translateY(calc(-1 * var(--vc-slide-translate))); transform: translateY(calc(-1 * var(--vc-slide-translate)));
} }
/** /**
* Timepicker styles * Timepicker styles
@ -305,7 +305,7 @@ const vCalendarSlots = computed(() => {
@apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary; @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
} }
.vc-time-select-group .vc-base-icon { .vc-time-select-group .vc-base-icon {
@apply mr-1 text-primary stroke-primary; @apply me-1 text-primary stroke-primary;
} }
.vc-time-select-group select { .vc-time-select-group select {
@apply bg-primary-foreground p-1 appearance-none outline-none text-center; @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
@ -314,18 +314,18 @@ const vCalendarSlots = computed(() => {
@apply text-muted-foreground tracking-wide; @apply text-muted-foreground tracking-wide;
} }
.vc-time-month { .vc-time-month {
@apply text-primary ml-2; @apply text-primary ms-2;
} }
.vc-time-day { .vc-time-day {
@apply text-primary ml-1; @apply text-primary ms-1;
} }
.vc-time-year { .vc-time-year {
@apply text-muted-foreground ml-2; @apply text-muted-foreground ms-2;
} }
.vc-time-colon { .vc-time-colon {
@apply mb-0.5; @apply mb-0.5;
} }
.vc-time-decimal { .vc-time-decimal {
@apply ml-0.5; @apply ms-0.5;
} }
</style> </style>

2
apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
View File

@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel()
:class=" :class="
cn( cn(
'flex', 'flex',
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
props.class, props.class,
)" )"
v-bind="$attrs" v-bind="$attrs"

2
apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
View File

@ -14,7 +14,7 @@ const { orientation } = useCarousel()
aria-roledescription="slide" aria-roledescription="slide"
:class="cn( :class="cn(
'min-w-0 shrink-0 grow-0 basis-full', 'min-w-0 shrink-0 grow-0 basis-full',
orientation === 'horizontal' ? 'pl-4' : 'pt-4', orientation === 'horizontal' ? 'ps-4' : 'pt-4',
props.class, props.class,
)" )"
> >

2
apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
View File

@ -17,7 +17,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
'touch-manipulation absolute h-8 w-8 rounded-full p-0', 'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal' orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2' ? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90',
props.class, props.class,
)" )"
variant="outline" variant="outline"

2
apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
View File

@ -17,7 +17,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
'touch-manipulation absolute h-8 w-8 rounded-full p-0', 'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal' orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2' ? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90', : '-top-12 start-1/2 -translate-x-1/2 rotate-90',
props.class, props.class,
)" )"
variant="outline" variant="outline"

2
apps/www/src/lib/registry/default/ui/command/CommandInput.vue
View File

@ -23,7 +23,7 @@ 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" /> <Search class="me-2 h-4 w-4 shrink-0 opacity-50" />
<ComboboxInput <ComboboxInput
v-bind="{ ...forwardedProps, ...$attrs }" v-bind="{ ...forwardedProps, ...$attrs }"
auto-focus auto-focus

2
apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
View File

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

4
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
View File

@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<ContextMenuCheckboxItem <ContextMenuCheckboxItem
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 ps-8 pe-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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator> <ContextMenuItemIndicator>
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</ContextMenuItemIndicator> </ContextMenuItemIndicator>

4
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<ContextMenuItemEmits>() const emits = defineEmits<ContextMenuItemEmits>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 && 'ps-8',
props.class, props.class,
)" )"
> >

4
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue' import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" :class="
cn('px-2 py-1.5 text-sm font-semibold text-foreground', cn('px-2 py-1.5 text-sm font-semibold text-foreground',
inset && 'pl-8', props.class, inset && 'ps-8', props.class,
)" )"
> >
<slot /> <slot />

4
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
View File

@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<ContextMenuRadioItem <ContextMenuRadioItem
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 ps-8 pe-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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator> <ContextMenuItemIndicator>
<Circle class="h-2 w-2 fill-current" /> <Circle class="h-2 w-2 fill-current" />
</ContextMenuItemIndicator> </ContextMenuItemIndicator>

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
View File

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

6
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -8,7 +8,7 @@ import {
import { ChevronRight } from 'lucide-vue-next' import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -24,11 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn( :class="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 && 'ps-8',
props.class, props.class,
)" )"
> >
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" /> <ChevronRight class="ms-auto h-4 w-4" />
</ContextMenuSubTrigger> </ContextMenuSubTrigger>
</template> </template>

4
apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
View File

@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', 'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class, props.class,
)" )"
> >
<slot /> <slot />
<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 end-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" /> <X class="w-4 h-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

2
apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
View File

@ -48,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<slot /> <slot />
<DialogClose <DialogClose
class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary" class="absolute top-3 end-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
> >
<X class="w-4 h-4" /> <X class="w-4 h-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

4
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View File

@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<DropdownMenuCheckboxItem <DropdownMenuCheckboxItem
v-bind="forwarded" v-bind="forwarded"
:class=" cn( :class=" cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 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 py-1.5 ps-8 pe-2 text-sm outline-none transition-colors 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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator> <DropdownMenuItemIndicator>
<Check class="w-4 h-4" /> <Check class="w-4 h-4" />
</DropdownMenuItemIndicator> </DropdownMenuItemIndicator>

4
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue' import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn( :class="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 && 'ps-8',
props.class, props.class,
)" )"
> >

4
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue' import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<template> <template>
<DropdownMenuLabel <DropdownMenuLabel
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)" :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)"
> >
<slot /> <slot />
</DropdownMenuLabel> </DropdownMenuLabel>

4
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
View File

@ -27,11 +27,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<DropdownMenuRadioItem <DropdownMenuRadioItem
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 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 py-1.5 ps-8 pe-2 text-sm outline-none transition-colors 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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator> <DropdownMenuItemIndicator>
<Circle class="h-2 w-2 fill-current" /> <Circle class="h-2 w-2 fill-current" />
</DropdownMenuItemIndicator> </DropdownMenuItemIndicator>

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
View File

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

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)" )"
> >
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" /> <ChevronRight class="ms-auto h-4 w-4" />
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
</template> </template>

4
apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
View File

@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<MenubarCheckboxItem <MenubarCheckboxItem
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 ps-8 pe-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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarItemIndicator> <MenubarItemIndicator>
<Check class="w-4 h-4" /> <Check class="w-4 h-4" />
</MenubarItemIndicator> </MenubarItemIndicator>

4
apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
View File

@ -8,7 +8,7 @@ import {
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
const emits = defineEmits<MenubarItemEmits>() const emits = defineEmits<MenubarItemEmits>()
@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 && 'ps-8',
props.class, props.class,
)" )"
> >

4
apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
View File

@ -3,11 +3,11 @@ import type { HTMLAttributes } from 'vue'
import { MenubarLabel, type MenubarLabelProps } from 'radix-vue' import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>() const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
</script> </script>
<template> <template>
<MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"> <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)">
<slot /> <slot />
</MenubarLabel> </MenubarLabel>
</template> </template>

4
apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
View File

@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<MenubarRadioItem <MenubarRadioItem
v-bind="forwarded" v-bind="forwarded"
:class="cn( :class="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 ps-8 pe-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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarItemIndicator> <MenubarItemIndicator>
<Circle class="h-2 w-2 fill-current" /> <Circle class="h-2 w-2 fill-current" />
</MenubarItemIndicator> </MenubarItemIndicator>

2
apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
View File

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

6
apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
View File

@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
import { ChevronRight } from 'lucide-vue-next' import { ChevronRight } from 'lucide-vue-next'
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 }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -20,11 +20,11 @@ const forwardedProps = useForwardProps(delegatedProps)
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn( :class="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 && 'ps-8',
props.class, props.class,
)" )"
> >
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" /> <ChevronRight class="ms-auto h-4 w-4" />
</MenubarSubTrigger> </MenubarSubTrigger>
</template> </template>

2
apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
View File

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

2
apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
View File

@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<div class="absolute left-0 top-full flex justify-center"> <div class="absolute start-0 top-full flex justify-center">
<NavigationMenuViewport <NavigationMenuViewport
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="

4
apps/www/src/lib/registry/default/ui/select/SelectItem.vue
View File

@ -26,12 +26,12 @@ 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 ps-8 pe-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 start-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectItemIndicator> <SelectItemIndicator>
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</SelectItemIndicator> </SelectItemIndicator>

2
apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
View File

@ -7,7 +7,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
</script> </script>
<template> <template>
<SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)"> <SelectLabel :class="cn('py-1.5 ps-8 pe-2 text-sm font-semibold', props.class)">
<slot /> <slot />
</SelectLabel> </SelectLabel>
</template> </template>

4
apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
View File

@ -27,7 +27,7 @@ const props = defineProps<SheetContentProps>()
const emits = defineEmits<DialogContentEmits>() const emits = defineEmits<DialogContentEmits>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, side, ...delegated } = props const { class: _, ...delegated } = props
return delegated return delegated
}) })
@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<slot /> <slot />
<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 end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
> >
<X class="w-4 h-4 text-muted-foreground" /> <X class="w-4 h-4 text-muted-foreground" />
</DialogClose> </DialogClose>

4
apps/www/src/lib/registry/default/ui/sheet/index.ts
View File

@ -17,9 +17,9 @@ export const sheetVariants = cva(
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom: bottom:
'inset-x-0 bottom-0 border-t 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 start-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 end-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: {

2
apps/www/src/lib/registry/default/ui/table/TableCell.vue
View File

@ -11,7 +11,7 @@ const props = defineProps<{
<td <td
:class=" :class="
cn( cn(
'p-4 align-middle [&:has([role=checkbox])]:pr-0', 'p-4 align-middle [&:has([role=checkbox])]:pe-0',
props.class, props.class,
) )
" "

2
apps/www/src/lib/registry/default/ui/table/TableHead.vue
View File

@ -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-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0', props.class)">
<slot /> <slot />
</th> </th>
</template> </template>

2
apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
View File

@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
</script> </script>
<template> <template>
<TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)"> <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent me-1', props.class)">
<slot> <slot>
<X class="w-4 h-4" /> <X class="w-4 h-4" />
</slot> </slot>

2
apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
View File

@ -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 end-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)">
<X class="h-4 w-4" /> <X class="h-4 w-4" />
</ToastClose> </ToastClose>
</template> </template>

2
apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
View File

@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
</script> </script>
<template> <template>
<ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" /> <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
</template> </template>

4
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' 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-[--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 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',
{ {
variants: { variants: {
variant: { variant: {
@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
export interface ToastProps extends ToastRootProps { export interface ToastProps extends ToastRootProps {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class']
variant?: ToastVariants['variant'] variant?: ToastVariants['variant']
'onOpenChange'?: ((value: boolean) => void) | undefined onOpenChange?: ((value: boolean) => void) | undefined
} }

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

@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/new-york/ui/button'
<template> <template>
<Button disabled> <Button disabled>
<ReloadIcon class="w-4 h-4 mr-2 animate-spin" /> <ReloadIcon class="w-4 h-4 me-2 animate-spin" />
Please wait Please wait
</Button> </Button>
</template> </template>

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

@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
<template> <template>
<Button> <Button>
<EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email <EnvelopeOpenIcon class="w-4 h-4 me-2" /> Login with Email
</Button> </Button>
</template> </template>

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

@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([])
:key="index" :key="index"
:class="cn( :class="cn(
'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm', 'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted', message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted',
)" )"
> >
{{ message.content }} {{ message.content }}
@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([])
<AvatarImage :src="user.avatar" alt="Image" /> <AvatarImage :src="user.avatar" alt="Image" />
<AvatarFallback>{{ user.name[0] }}</AvatarFallback> <AvatarFallback>{{ user.name[0] }}</AvatarFallback>
</Avatar> </Avatar>
<div class="ml-2"> <div class="ms-2">
<p class="text-sm font-medium leading-none"> <p class="text-sm font-medium leading-none">
{{ user.name }} {{ user.name }}
</p> </p>
@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([])
{{ user.email }} {{ user.email }}
</p> </p>
</div> </div>
<CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" /> <CheckIcon v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>

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

@ -66,7 +66,7 @@ const notifications = [
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button class="w-full"> <Button class="w-full">
<CheckIcon class="mr-2 h-4 w-4" /> Mark all as read <CheckIcon class="me-2 h-4 w-4" /> Mark all as read
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>

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

@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) }, ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, },
@ -178,8 +178,8 @@ const table = useVueTable({
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@ -201,7 +201,7 @@ const table = useVueTable({
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"> <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3"> <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" /> <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -213,7 +213,7 @@ const table = useVueTable({
:key="row.id" :key="row.id"
:data-state="row.getIsSelected() && 'selected'" :data-state="row.getIsSelected() && 'selected'"
> >
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3"> <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" /> <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell> </TableCell>
</TableRow> </TableRow>

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

@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
align: 'start', align: 'start',
}" }"
> >
<CarouselContent class="-ml-1"> <CarouselContent class="-ms-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3"> <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1"> <div class="p-1">
<Card> <Card>
<CardContent class="flex aspect-square items-center justify-center p-6"> <CardContent class="flex aspect-square items-center justify-center p-6">

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

@ -44,7 +44,7 @@ const value = ref<string>('')
{{ value {{ value
? frameworks.find((framework) => framework.value === value)?.label ? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..." }} : "Select framework..." }}
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-[200px] p-0"> <PopoverContent class="w-[200px] p-0">
@ -67,7 +67,7 @@ const value = ref<string>('')
{{ framework.label }} {{ framework.label }}
<CheckIcon <CheckIcon
:class="cn( :class="cn(
'ml-auto h-4 w-4', 'ms-auto h-4 w-4',
value === framework.value ? 'opacity-100' : 'opacity-0', value === framework.value ? 'opacity-100' : 'opacity-0',
)" )"
/> />

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

@ -42,7 +42,7 @@ const open = ref(false)
<template> <template>
<div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"> <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
<p class="text-sm font-medium leading-none"> <p class="text-sm font-medium leading-none">
<span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"> <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
{{ labelRef }} {{ labelRef }}
</span> </span>
<span class="text-muted-foreground">Create a new project</span> <span class="text-muted-foreground">Create a new project</span>

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

@ -79,7 +79,7 @@ const onSubmit = handleSubmit((values) => {
{{ values.language ? languages.find( {{ values.language ? languages.find(
(language) => language.value === values.language, (language) => language.value === values.language,
)?.label : 'Select language...' }} )?.label : 'Select language...' }}
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
> >
{{ language.label }} {{ language.label }}
<CheckIcon <CheckIcon
:class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')" :class="cn('ms-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
/> />
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>

12
apps/www/src/lib/registry/new-york/example/CommandDemo.vue
View File

@ -27,32 +27,32 @@ import {
<CommandEmpty>No results found.</CommandEmpty> <CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions"> <CommandGroup heading="Suggestions">
<CommandItem value="Calendar"> <CommandItem value="Calendar">
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span>Calendar</span> <span>Calendar</span>
</CommandItem> </CommandItem>
<CommandItem value="Search Emoji"> <CommandItem value="Search Emoji">
<FaceIcon class="mr-2 h-4 w-4" /> <FaceIcon class="me-2 h-4 w-4" />
<span>Search Emoji</span> <span>Search Emoji</span>
</CommandItem> </CommandItem>
<CommandItem value="Launch"> <CommandItem value="Launch">
<RocketIcon class="mr-2 h-4 w-4" /> <RocketIcon class="me-2 h-4 w-4" />
<span>Launch</span> <span>Launch</span>
</CommandItem> </CommandItem>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading="Settings"> <CommandGroup heading="Settings">
<CommandItem value="Profile"> <CommandItem value="Profile">
<PersonIcon class="mr-2 h-4 w-4" /> <PersonIcon class="me-2 h-4 w-4" />
<span>Profile</span> <span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut> <CommandShortcut>⌘P</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Mail"> <CommandItem value="Mail">
<EnvelopeClosedIcon class="mr-2 h-4 w-4" /> <EnvelopeClosedIcon class="me-2 h-4 w-4" />
<span>Mail</span> <span>Mail</span>
<CommandShortcut>⌘B</CommandShortcut> <CommandShortcut>⌘B</CommandShortcut>
</CommandItem> </CommandItem>
<CommandItem value="Settings"> <CommandItem value="Settings">
<GearIcon class="mr-2 h-4 w-4" /> <GearIcon class="me-2 h-4 w-4" />
<span>Settings</span> <span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut> <CommandShortcut>⌘S</CommandShortcut>
</CommandItem> </CommandItem>

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

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { import type {
ColumnDef,
ColumnFiltersState, ColumnFiltersState,
SortingState, SortingState,
VisibilityState, VisibilityState,
@ -88,7 +87,7 @@ const columns = [
'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all', 'ariaLabel': 'Select all',
}), }),
cell: ({ row, column }) => { cell: ({ row }) => {
return h(Checkbox, { return h(Checkbox, {
'checked': row.getIsSelected(), 'checked': row.getIsSelected(),
'onUpdate:checked': value => row.toggleSelected(!!value), 'onUpdate:checked': value => row.toggleSelected(!!value),
@ -108,7 +107,7 @@ const columns = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) }, () => ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}), }),
@ -165,8 +164,6 @@ const table = useVueTable({
}, },
}, },
}) })
const getState = table.getState()
</script> </script>
<template> <template>
@ -180,8 +177,8 @@ const getState = table.getState()
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

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

@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })]) }, ['Email', h(CaretSortIcon, { class: 'ms-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, },
@ -171,8 +171,8 @@ const table = useVueTable({
/> />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto"> <Button variant="outline" class="ms-auto">
Columns <ChevronDownIcon class="ml-2 h-4 w-4" /> Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

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

@ -25,7 +25,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span> <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>

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

@ -32,7 +32,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<template v-if="date"> <template v-if="date">
{{ format(date, "PPP") }} {{ format(date, "PPP") }}
</template> </template>

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

@ -30,7 +30,7 @@ const date = ref({
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span> <span>
{{ date.start ? ( {{ date.start ? (

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

@ -25,7 +25,7 @@ const date = ref<Date>()
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span> <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>

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

@ -34,11 +34,11 @@ const isOpen = ref(false)
<UseTemplate> <UseTemplate>
<form class="grid items-start gap-4 px-4"> <form class="grid items-start gap-4 px-4">
<div class="grid gap-2"> <div class="grid gap-2">
<Label html-for="email">Email</Label> <Label htms-for="email">Email</Label>
<Input id="email" type="email" default-value="shadcn@example.com" /> <Input id="email" type="email" default-value="shadcn@example.com" />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label html-for="username">Username</Label> <Label htms-for="username">Username</Label>
<Input id="username" default-value="@shadcn" /> <Input id="username" default-value="@shadcn" />
</div> </div>
<Button type="submit"> <Button type="submit">

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

@ -35,7 +35,7 @@ import {
Progressive JavaScript framework for building modern web interfaces. Progressive JavaScript framework for building modern web interfaces.
</p> </p>
<div class="flex items-center pt-2"> <div class="flex items-center pt-2">
<CalendarIcon class="mr-2 h-4 w-4 opacity-70" /> <CalendarIcon class="me-2 h-4 w-4 opacity-70" />
<span class="text-xs text-muted-foreground"> <span class="text-xs text-muted-foreground">
Joined January 2014 Joined January 2014
</span> </span>

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

@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/new-york/ui/input'
<template> <template>
<div class="relative w-full max-w-sm items-center"> <div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" /> <Input id="search" type="text" placeholder="Search..." class="ps-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2"> <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" /> <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span> </span>

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

@ -30,7 +30,7 @@ const date = ref({
!date && 'text-muted-foreground', !date && 'text-muted-foreground',
)" )"
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="me-2 h-4 w-4" />
<span> <span>
{{ date.start ? ( {{ date.start ? (

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

@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/new-york/ui/toggle'
<template> <template>
<Toggle aria-label="Toggle italic"> <Toggle aria-label="Toggle italic">
<FontItalicIcon class="w-4 h-4 mr-2" /> <FontItalicIcon class="w-4 h-4 me-2" />
Italic Italic
</Toggle> </Toggle>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <template>
<blockquote class="mt-6 border-l-2 pl-6 italic"> <blockquote class="mt-6 border-l-2 ps-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair that "After all," he said, "everyone enjoys a good joke, so it's only fair that
they should pay for the privilege." they should pay for the privilege."
</blockquote> </blockquote>

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

@ -23,7 +23,7 @@
</a> </a>
: he would tax the jokes in the kingdom. : he would tax the jokes in the kingdom.
</p> </p>
<blockquote class="mt-6 border-l-2 pl-6 italic"> <blockquote class="mt-6 border-l-2 ps-6 italic">
"After all," he said, "everyone enjoys a good joke, so it's only fair "After all," he said, "everyone enjoys a good joke, so it's only fair
that they should pay for the privilege." that they should pay for the privilege."
</blockquote> </blockquote>
@ -34,7 +34,7 @@
The king's subjects were not amused. They grumbled and complained, but The king's subjects were not amused. They grumbled and complained, but
the king was firm: the king was firm:
</p> </p>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2"> <ul class="my-6 ms-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li> <li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li> <li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li>

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

@ -1,5 +1,5 @@
<template> <template>
<ul class="my-6 ml-6 list-disc [&>li]:mt-2"> <ul class="my-6 ms-6 list-disc [&>li]:mt-2">
<li>1st level of puns: 5 gold coins</li> <li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li> <li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners : 20 gold coins</li> <li>3rd level of one-liners : 20 gold coins</li>

2
apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
View File

@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', 'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class, props.class,
) )
" "

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

@ -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 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', 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7',
{ {
variants: { variants: {
variant: { variant: {

64
apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
View File

@ -194,9 +194,9 @@ const vCalendarSlots = computed(() => {
@apply w-full relative; @apply w-full relative;
} }
:root { :root {
--vc-slide-translate: 22px; --vc-slide-translate: 22px;
--vc-slide-duration: 0.15s; --vc-slide-duration: 0.15s;
--vc-slide-timing: ease; --vc-slide-timing: ease;
} }
.calendar .vc-fade-enter-active, .calendar .vc-fade-enter-active,
.calendar .vc-fade-leave-active, .calendar .vc-fade-leave-active,
@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-down-leave-active, .calendar .vc-slide-down-leave-active,
.calendar .vc-slide-fade-enter-active, .calendar .vc-slide-fade-enter-active,
.calendar .vc-slide-fade-leave-active { .calendar .vc-slide-fade-leave-active {
transition: transition:
opacity var(--vc-slide-duration) var(--vc-slide-timing), opacity var(--vc-slide-duration) var(--vc-slide-timing),
-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
transition: transition:
transform var(--vc-slide-duration) var(--vc-slide-timing), transform var(--vc-slide-duration) var(--vc-slide-timing),
opacity var(--vc-slide-duration) var(--vc-slide-timing); opacity var(--vc-slide-duration) var(--vc-slide-timing);
transition: transition:
transform var(--vc-slide-duration) var(--vc-slide-timing), transform var(--vc-slide-duration) var(--vc-slide-timing),
opacity var(--vc-slide-duration) var(--vc-slide-timing), opacity var(--vc-slide-duration) var(--vc-slide-timing),
-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing); -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
pointer-events: none; pointer-events: none;
} }
.calendar .vc-none-leave-active, .calendar .vc-none-leave-active,
.calendar .vc-fade-leave-active, .calendar .vc-fade-leave-active,
@ -230,8 +230,8 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-right-leave-active, .calendar .vc-slide-right-leave-active,
.calendar .vc-slide-up-leave-active, .calendar .vc-slide-up-leave-active,
.calendar .vc-slide-down-leave-active { .calendar .vc-slide-down-leave-active {
position: absolute !important; position: absolute !important;
width: 100%; width: 100%;
} }
.calendar .vc-none-enter-from, .calendar .vc-none-enter-from,
.calendar .vc-none-leave-to, .calendar .vc-none-leave-to,
@ -247,35 +247,35 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-down-leave-to, .calendar .vc-slide-down-leave-to,
.calendar .vc-slide-fade-enter-from, .calendar .vc-slide-fade-enter-from,
.calendar .vc-slide-fade-leave-to { .calendar .vc-slide-fade-leave-to {
opacity: 0; opacity: 0;
} }
.calendar .vc-slide-left-enter-from, .calendar .vc-slide-left-enter-from,
.calendar .vc-slide-right-leave-to, .calendar .vc-slide-right-leave-to,
.calendar .vc-slide-fade-enter-from.direction-left, .calendar .vc-slide-fade-enter-from.direction-left,
.calendar .vc-slide-fade-leave-to.direction-left { .calendar .vc-slide-fade-leave-to.direction-left {
-webkit-transform: translateX(var(--vc-slide-translate)); -webkit-transform: translateX(var(--vc-slide-translate));
transform: translateX(var(--vc-slide-translate)); transform: translateX(var(--vc-slide-translate));
} }
.calendar .vc-slide-right-enter-from, .calendar .vc-slide-right-enter-from,
.calendar .vc-slide-left-leave-to, .calendar .vc-slide-left-leave-to,
.calendar .vc-slide-fade-enter-from.direction-right, .calendar .vc-slide-fade-enter-from.direction-right,
.calendar .vc-slide-fade-leave-to.direction-right { .calendar .vc-slide-fade-leave-to.direction-right {
-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate))); -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
transform: translateX(calc(-1 * var(--vc-slide-translate))); transform: translateX(calc(-1 * var(--vc-slide-translate)));
} }
.calendar .vc-slide-up-enter-from, .calendar .vc-slide-up-enter-from,
.calendar .vc-slide-down-leave-to, .calendar .vc-slide-down-leave-to,
.calendar .vc-slide-fade-enter-from.direction-top, .calendar .vc-slide-fade-enter-from.direction-top,
.calendar .vc-slide-fade-leave-to.direction-top { .calendar .vc-slide-fade-leave-to.direction-top {
-webkit-transform: translateY(var(--vc-slide-translate)); -webkit-transform: translateY(var(--vc-slide-translate));
transform: translateY(var(--vc-slide-translate)); transform: translateY(var(--vc-slide-translate));
} }
.calendar .vc-slide-down-enter-from, .calendar .vc-slide-down-enter-from,
.calendar .vc-slide-up-leave-to, .calendar .vc-slide-up-leave-to,
.calendar .vc-slide-fade-enter-from.direction-bottom, .calendar .vc-slide-fade-enter-from.direction-bottom,
.calendar .vc-slide-fade-leave-to.direction-bottom { .calendar .vc-slide-fade-leave-to.direction-bottom {
-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate))); -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
transform: translateY(calc(-1 * var(--vc-slide-translate))); transform: translateY(calc(-1 * var(--vc-slide-translate)));
} }
/** /**
* Timepicker styles * Timepicker styles
@ -299,7 +299,7 @@ const vCalendarSlots = computed(() => {
@apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary; @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
} }
.vc-time-select-group .vc-base-icon { .vc-time-select-group .vc-base-icon {
@apply mr-1 text-primary stroke-primary; @apply me-1 text-primary stroke-primary;
} }
.vc-time-select-group select { .vc-time-select-group select {
@apply bg-primary-foreground p-1 appearance-none outline-none text-center; @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
@ -308,18 +308,18 @@ const vCalendarSlots = computed(() => {
@apply text-muted-foreground tracking-wide; @apply text-muted-foreground tracking-wide;
} }
.vc-time-month { .vc-time-month {
@apply text-primary ml-2; @apply text-primary ms-2;
} }
.vc-time-day { .vc-time-day {
@apply text-primary ml-1; @apply text-primary ms-1;
} }
.vc-time-year { .vc-time-year {
@apply text-muted-foreground ml-2; @apply text-muted-foreground ms-2;
} }
.vc-time-colon { .vc-time-colon {
@apply mb-0.5; @apply mb-0.5;
} }
.vc-time-decimal { .vc-time-decimal {
@apply ml-0.5; @apply ms-0.5;
} }
</style> </style>

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
View File

@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel()
:class=" :class="
cn( cn(
'flex', 'flex',
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
props.class, props.class,
)" )"
v-bind="$attrs" v-bind="$attrs"

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
View File

@ -14,7 +14,7 @@ const { orientation } = useCarousel()
aria-roledescription="slide" aria-roledescription="slide"
:class="cn( :class="cn(
'min-w-0 shrink-0 grow-0 basis-full', 'min-w-0 shrink-0 grow-0 basis-full',
orientation === 'horizontal' ? 'pl-4' : 'pt-4', orientation === 'horizontal' ? 'ps-4' : 'pt-4',
props.class, props.class,
)" )"
> >

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
View File

@ -17,7 +17,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
'touch-manipulation absolute h-8 w-8 rounded-full p-0', 'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal' orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2' ? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90',
props.class, props.class,
)" )"
variant="outline" variant="outline"

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
View File

@ -17,7 +17,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
'touch-manipulation absolute h-8 w-8 rounded-full p-0', 'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal' orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2' ? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90', : '-top-12 start-1/2 -translate-x-1/2 rotate-90',
props.class, props.class,
)" )"
variant="outline" variant="outline"

2
apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
View File

@ -23,7 +23,7 @@ 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>
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" /> <MagnifyingGlassIcon class="me-2 h-4 w-4 shrink-0 opacity-50" />
<ComboboxInput <ComboboxInput
v-bind="{ ...forwardedProps, ...$attrs }" v-bind="{ ...forwardedProps, ...$attrs }"
auto-focus auto-focus

2
apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
View File

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

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