Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: change to css logical props #379

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

fix: change to css logical props #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2b6dfd1
fix: change to css logical props
lord007tn Mar 5, 2024
71fea4f
fix: change space-x-* with gap and add flex
lord007tn Mar 5, 2024
71d97fa
fix: add rotation on rtl for chevrons and arrows
lord007tn Mar 5, 2024
7dfd0d4
fix: change text-left to text-start to support rtl written text
lord007tn Mar 5, 2024
9def0db
fix: change text-left to text-start to support rtl written text
lord007tn Mar 5, 2024
523270e
chore: update
sadeghbarati Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'

<template>
<Button variant="outline" size="icon">
<ChevronRight class="w-4 h-4" />
<ChevronRight class="w-4 h-4 rtl:rotate-180" />
</Button>
</template>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/default/ui/button'

<template>
<Button disabled>
<Loader2 class="w-4 h-4 mr-2 animate-spin" />
<Loader2 class="w-4 h-4 me-2 animate-spin" />
Please wait
</Button>
</template>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'

<template>
<Button>
<Mail class="w-4 h-4 mr-2" /> Login with Email
<Mail class="w-4 h-4 me-2" /> Login with Email
</Button>
</template>
12 changes: 6 additions & 6 deletions apps/www/src/lib/registry/default/example/CardChat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([])
<template>
<Card>
<CardHeader class="flex flex-row items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<Avatar>
<AvatarImage src="/avatars/01.png" alt="Image" />
<AvatarFallback>OM</AvatarFallback>
Expand Down Expand Up @@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([])
:key="index"
:class="cn(
'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 }}
Expand All @@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([])
</CardContent>
<CardFooter>
<form
class="flex w-full items-center space-x-2"
class="flex w-full items-center gap-2"
@submit.prevent="() => {
if (inputLength === 0) return
messages.push({
Expand Down Expand Up @@ -168,21 +168,21 @@ const selectedUsers = ref<User[]>([])
<AvatarImage :src="user.avatar" alt="Image" />
<AvatarFallback>{{ user.name[0] }}</AvatarFallback>
</Avatar>
<div class="ml-2">
<div class="ms-2">
<p class="text-sm font-medium leading-none">
{{ user.name }}
</p>
<p class="text-sm text-muted-foreground">
{{ user.email }}
</p>
</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>
</CommandGroup>
</CommandList>
</Command>
<DialogFooter class="flex items-center border-t p-4 sm:justify-between">
<div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden">
<div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden">
<Avatar
v-for="user in selectedUsers"
:key="user.email"
Expand Down
4 changes: 2 additions & 2 deletions apps/www/src/lib/registry/default/example/CardDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const notifications = [
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<div class=" flex items-center gap-4 rounded-md border p-4">
<BellRing />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">
Expand Down Expand Up @@ -67,7 +67,7 @@ const notifications = [
</CardContent>
<CardFooter>
<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>
</CardFooter>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const data = [
<CardDescription>Set your daily activity goal.</CardDescription>
</CardHeader>
<CardContent class="pb-2">
<div class="flex items-center justify-center space-x-2">
<div class="flex items-center justify-center gap-2">
<Button
variant="outline"
size="icon"
Expand Down
14 changes: 7 additions & 7 deletions apps/www/src/lib/registry/default/example/Cards/DataTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, {
variant: 'ghost',
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')),
},
Expand Down Expand Up @@ -178,8 +178,8 @@ const table = useVueTable({
/>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto">
Columns <ChevronDown class="ml-2 h-4 w-4" />
<Button variant="outline" class="ms-auto">
Columns <ChevronDown class="ms-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
Expand All @@ -201,7 +201,7 @@ const table = useVueTable({
<Table>
<TableHeader>
<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()" />
</TableHead>
</TableRow>
Expand All @@ -213,7 +213,7 @@ const table = useVueTable({
:key="row.id"
: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()" />
</TableCell>
</TableRow>
Expand All @@ -231,12 +231,12 @@ const table = useVueTable({
</Table>
</div>

<div class="flex items-center justify-end space-x-2 py-4">
<div class="flex items-center justify-end gap-2 py-4">
<div class="flex-1 text-sm text-muted-foreground">
{{ table.getFilteredSelectedRowModel().rows.length }} of
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
</div>
<div class="space-x-2">
<div class="flex gap-2">
<Button
variant="outline"
size="sm"
Expand Down
4 changes: 2 additions & 2 deletions apps/www/src/lib/registry/default/example/CarouselSpacing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
align: 'start',
}"
>
<CarouselContent class="-ml-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
<CarouselContent class="-ms-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/CheckboxDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>

<template>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<Checkbox id="terms" />
<label
for="terms"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
</script>

<template>
<div class="items-top flex space-x-2">
<div class="items-top flex gap-2">
<Checkbox id="terms1" disabled />
<label
for="terms2"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => {
</div>

<FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
<FormItem class="flex flex-row items-start space-x-3 space-y-0">
<FormItem class="flex flex-row items-start gap-3 space-y-0">
<FormControl>
<Checkbox
:checked="value.includes(item.id)"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const isOpen = ref(false)
v-model:open="isOpen"
class="w-[350px] space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<div class="flex items-center justify-between gap-4 px-4">
<h4 class="text-sm font-semibold">
@peduarte starred 3 repositories
</h4>
Expand Down
4 changes: 2 additions & 2 deletions apps/www/src/lib/registry/default/example/ComboboxDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const value = ref<string>('')
{{ value
? frameworks.find((framework) => framework.value === value)?.label
: "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>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0">
Expand All @@ -67,7 +67,7 @@ const value = ref<string>('')
{{ framework.label }}
<Check
:class="cn(
'ml-auto h-4 w-4',
'ms-auto h-4 w-4',
value === framework.value ? 'opacity-100' : 'opacity-0',
)"
/>
Expand Down
10 changes: 5 additions & 5 deletions apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const open = ref(false)
<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">
<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 }}
</span>
<span class="text-muted-foreground">Create a new project</span>
Expand All @@ -57,17 +57,17 @@ const open = ref(false)
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem>
<User class="mr-2 h-4 w-4" />
<User class="me-2 h-4 w-4" />
Assign to...
</DropdownMenuItem>
<DropdownMenuItem>
<Calendar class="mr-2 h-4 w-4" />
<Calendar class="me-2 h-4 w-4" />
Set due date...
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Tags class="mr-2 h-4 w-4" />
<Tags class="me-2 h-4 w-4" />
Apply label
</DropdownMenuSubTrigger>
<DropdownMenuSubContent class="p-0">
Expand Down Expand Up @@ -97,7 +97,7 @@ const open = ref(false)
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem class="text-red-600">
<Trash class="mr-2 h-4 w-4" />
<Trash class="me-2 h-4 w-4" />
Delete
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
</DropdownMenuItem>
Expand Down
4 changes: 2 additions & 2 deletions apps/www/src/lib/registry/default/example/ComboboxForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const onSubmit = handleSubmit((values) => {
{{ values.language ? languages.find(
(language) => language.value === values.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>
</FormControl>
</PopoverTrigger>
Expand All @@ -97,7 +97,7 @@ const onSubmit = handleSubmit((values) => {
}"
>
<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 }}
</CommandItem>
Expand Down
8 changes: 4 additions & 4 deletions apps/www/src/lib/registry/default/example/ComboboxPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ const statuses: Status[] = [
]

const open = ref(false)
const value = ref<typeof statuses[number]>()
// const value = ref<typeof statuses[number]>()

const selectedStatus = ref<Status>()
</script>

<template>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<p class="text-sm text-muted-foreground">
Status
</p>
Expand All @@ -78,7 +78,7 @@ const selectedStatus = ref<Status>()
class="w-[150px] justify-start"
>
<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 }}
</template>
<template v-else>
Expand All @@ -104,7 +104,7 @@ const selectedStatus = ref<Status>()
<component
:is="status.icon"
: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>
Expand Down
12 changes: 6 additions & 6 deletions apps/www/src/lib/registry/default/example/CommandDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,32 @@ import {
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem value="Calendar">
<Calendar class="mr-2 h-4 w-4" />
<Calendar class="me-2 h-4 w-4" />
<span>Calendar</span>
</CommandItem>
<CommandItem value="Search Emoji">
<Smile class="mr-2 h-4 w-4" />
<Smile class="me-2 h-4 w-4" />
<span>Search Emoji</span>
</CommandItem>
<CommandItem value="Calculator">
<Calculator class="mr-2 h-4 w-4" />
<Calculator class="me-2 h-4 w-4" />
<span>Calculator</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem value="Profile">
<User class="mr-2 h-4 w-4" />
<User class="me-2 h-4 w-4" />
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem value="Billing">
<CreditCard class="mr-2 h-4 w-4" />
<CreditCard class="me-2 h-4 w-4" />
<span>Billing</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem value="Settings">
<Settings class="mr-2 h-4 w-4" />
<Settings class="me-2 h-4 w-4" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
Expand Down
Loading