arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): improve RTL support (#2433)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Malik-Jouda
2024-10-28 22:37:01 +02:00
committed by GitHub
parent e82a82d812
commit 94c49186e1
50 changed files with 2375 additions and 2375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/app/app.vue
View File

@@ -68,7 +68,7 @@ defineShortcuts({
<template>
<UApp :toaster="appConfig.toaster">
<div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">

2
playground/app/pages/components/badge.vue
View File

@@ -19,7 +19,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="neutral" />
</div>
<div class="flex items-center gap-2 ml-[-56px]">
<div class="flex items-center gap-2 ms-[-56px]">
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
</div>
</div>

2
playground/app/pages/components/button-group.vue
View File

@@ -6,7 +6,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<template>
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 -ml-[110px]">
<div class="flex flex-col gap-4 -ms-[110px]">
<UButtonGroup>
<UButton>Button</UButton>
</UButtonGroup>

14
playground/app/pages/components/button.vue
View File

@@ -69,16 +69,16 @@ function onClick() {
:variant="variant"
/>
</div>
<div class="flex items-center gap-2 ml-[-129px]">
<div class="flex items-center gap-2 ms-[-129px]">
<UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-171px]">
<div class="flex items-center gap-2 ms-[-171px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-171px]">
<div class="flex items-center gap-2 ms-[-171px]">
<UButton v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-159px]">
<div class="flex items-center gap-2 ms-[-159px]">
<UButton
v-for="size in sizes"
:key="size"
@@ -88,7 +88,7 @@ function onClick() {
:size="size"
/>
</div>
<div class="flex items-center gap-2 ml-[-159px]">
<div class="flex items-center gap-2 ms-[-159px]">
<UButton
v-for="size in sizes"
:key="size"
@@ -98,10 +98,10 @@ function onClick() {
:size="size"
/>
</div>
<div class="flex items-center gap-2 ml-[-68px]">
<div class="flex items-center gap-2 ms-[-68px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-68px]">
<div class="flex items-center gap-2 ms-[-68px]">
<UButton
v-for="size in sizes"
:key="size"

4
playground/app/pages/components/checkbox.vue
View File

@@ -18,10 +18,10 @@ const checked = ref(true)
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
</div>
<div class="flex items-center gap-4 mr-[-11px]">
<div class="flex items-center gap-4 me-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />
</div>
<div class="flex items-center gap-4 mr-[-96px]">
<div class="flex items-center gap-4 me-[-96px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="size" />
</div>
</div>

2
playground/app/pages/components/form-field.vue
View File

@@ -14,7 +14,7 @@ const feedbacks = [
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-38px]">
<div class="flex flex-col gap-4 ms-[-38px]">
<div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
<UFormField v-bind="feedback" label="Email" name="email">
<UInput placeholder="john@lennon.com" />

4
playground/app/pages/components/kbd.vue
View File

@@ -18,10 +18,10 @@ const kbdKeys = Object.keys(kbdKeysMap)
<div class="flex items-center gap-1">
<UKbd value="meta" variant="solid" />
</div>
<div class="flex items-center gap-1 ml-[-216px]">
<div class="flex items-center gap-1 ms-[-216px]">
<UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
</div>
<div class="flex items-center gap-1 ml-[-22px]">
<div class="flex items-center gap-1 ms-[-22px]">
<UKbd v-for="size in sizes" :key="size" value="meta" :size="size" />
</div>
</div>

2
playground/app/pages/components/navigation-menu.vue
View File

@@ -99,7 +99,7 @@ const items = [
:orientation="orientation"
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-s border-[var(--ui-border)]'"
/>
</div>
</template>

8
playground/app/pages/components/radio-group.vue
View File

@@ -23,20 +23,20 @@ const itemsWithDescription = [
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[100px]">
<div class="flex flex-col gap-4 ms-[100px]">
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="items" color="neutral" default-value="1" />
<URadioGroup :items="items" color="error" default-value="2" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
<URadioGroup :items="items" orientation="horizontal" class="ms-[-91px]" />
</div>
<div class="flex items-center gap-4 ml-[34px]">
<div class="flex items-center gap-4 ms-[34px]">
<URadioGroup v-for="size in sizes" :key="size" :size="size" :items="items" />
</div>
<div class="flex items-center gap-4 ml-[74px]">
<div class="flex items-center gap-4 ms-[74px]">
<URadioGroup v-for="size in sizes" :key="size" :size="size" :items="itemsWithDescription" />
</div>

8
playground/app/pages/components/switch.vue
View File

@@ -8,7 +8,7 @@ const checked = ref(true)
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-114px]">
<div class="flex flex-col gap-4 ms-[-114px]">
<USwitch v-model="checked" label="Primary" />
<USwitch color="neutral" label="Neutral" :default-value="true" />
<USwitch color="error" label="Error" :default-value="true" />
@@ -16,10 +16,10 @@ const checked = ref(true)
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<div class="flex items-center gap-4 ms-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<div class="flex items-center gap-4 ms-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"
@@ -29,7 +29,7 @@ const checked = ref(true)
checked-icon="i-heroicons-check-20-solid"
/>
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<div class="flex items-center gap-4 ms-[-82px]">
<USwitch
v-for="size in sizes"
:key="size"

4
playground/app/pages/components/table.vue
View File

@@ -253,7 +253,7 @@ const columns: TableColumn<Payment>[] = [{
icon: 'i-heroicons-ellipsis-vertical-20-solid',
color: 'neutral',
variant: 'ghost',
class: 'ml-auto'
class: 'ms-auto'
})))
}
}]
@@ -306,7 +306,7 @@ onMounted(() => {
color="neutral"
variant="outline"
trailing-icon="i-heroicons-chevron-down-20-solid"
class="ml-auto"
class="ms-auto"
/>
</UDropdownMenu>
</div>

2
playground/app/pages/components/tooltip.vue
View File

@@ -4,7 +4,7 @@
<UAvatar text="T" />
</UTooltip>
<div class="flex items-center gap-2 ml-[-20px]">
<div class="flex items-center gap-2 ms-[-20px]">
<UTooltip text="Left" :kbds="['meta', 'L']" :content="{ side: 'left' }" arrow>
<UAvatar text="L" />
</UTooltip>