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

chore: improve RTL support (#334)

Browse Source 
Co-authored-by: Hassan Kadhim <hassan57905@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-06-24 00:19:28 +03:00
committed by GitHub
parent 3f27c0ccae
commit 278a1ea93c
8 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/content/examples/PaginationExamplePrevNextSlots.vue
View File

@@ -4,16 +4,16 @@ const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #prev="{ onClick }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
</UTooltip>
</template>
<template #next="{ onClick }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>

6
docs/components/content/themes/VerticalNavigationThemeTailwind.vue
View File

@@ -24,9 +24,9 @@ const links = [{
<UVerticalNavigation
:links="links"
:ui="{
wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
base: 'group block border-l -ml-px lg:leading-6',
padding: 'pl-4',
wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
base: 'group block border-s -ms-px lg:leading-6',
padding: 'ps-4',
rounded: '',
font: '',
ring: '',

6
docs/content/1.getting-started/5.examples.md
View File

@@ -205,9 +205,9 @@ const links = [{
<UVerticalNavigation
:links="links"
:ui="{
wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
base: 'group block border-l -ml-px lg:leading-6',
padding: 'pl-4',
wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
base: 'group block border-s -ms-px lg:leading-6',
padding: 'ps-4',
rounded: '',
font: '',
ring: '',

6
docs/content/5.navigation/3.pagination.md
View File

@@ -129,16 +129,16 @@ const items = ref(Array(55));
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #prev="{ onClick }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
</UTooltip>
</template>
<template #next="{ onClick }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>

32
src/runtime/app.config.ts
View File

@@ -105,7 +105,7 @@ const avatar = {
const avatarGroup = {
wrapper: 'flex flex-row-reverse',
ring: 'ring-2 ring-white dark:ring-gray-900',
margin: '-mr-1.5 first:mr-0'
margin: '-me-1.5 first:me-0'
}
const badge = {
@@ -241,7 +241,7 @@ const dropdown = {
base: 'flex-shrink-0',
size: '3xs'
},
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ml-auto'
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
},
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
transition: {
@@ -350,7 +350,7 @@ const input = {
xl: 'h-6 w-6'
},
leading: {
wrapper: 'absolute inset-y-0 left-0 flex items-center',
wrapper: 'absolute inset-y-0 start-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'ps-2',
@@ -362,7 +362,7 @@ const input = {
}
},
trailing: {
wrapper: 'absolute inset-y-0 right-0 flex items-center',
wrapper: 'absolute inset-y-0 end-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'pe-2',
@@ -387,7 +387,7 @@ const formGroup = {
label: {
wrapper: 'flex content-center justify-between',
base: 'block text-sm font-medium text-gray-700 dark:text-gray-200',
required: `after:content-['*'] after:ml-0.5 after:text-red-500 dark:after:text-red-400`
required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
},
description: 'text-sm text-gray-500 dark:text-gray-400',
container: 'mt-1 relative',
@@ -447,7 +447,7 @@ const selectMenu = {
inactive: 'text-gray-400 dark:text-gray-500'
},
selectedIcon: {
wrapper: 'absolute inset-y-0 right-0 flex items-center',
wrapper: 'absolute inset-y-0 end-0 flex items-center',
padding: 'pe-2',
base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
},
@@ -512,8 +512,8 @@ const toggle = {
inactive: 'bg-gray-200 dark:bg-gray-700',
container: {
base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
active: 'translate-x-4',
inactive: 'translate-x-0'
active: 'translate-x-4 rtl:-translate-x-4',
inactive: 'translate-x-0 rtl:-translate-x-0'
},
icon: {
base: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
@@ -537,7 +537,7 @@ const range = {
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
progress: {
base: 'absolute inset-0 h-full pointer-events-none',
rounded: 'rounded-l-lg',
rounded: 'rounded-s-lg',
background: 'bg-{color}-500 dark:bg-{color}-400'
},
thumb: {
@@ -624,7 +624,7 @@ const verticalNavigation = {
size: '3xs'
},
badge: {
base: 'relative ml-auto inline-block py-0.5 px-2 text-xs rounded-md -mr-1 -my-0.5',
base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
active: 'bg-white dark:bg-gray-900',
inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
}
@@ -640,11 +640,11 @@ const commandPalette = {
height: 'h-12',
size: 'sm:text-sm',
icon: {
base: 'pointer-events-none absolute left-4 text-gray-400 dark:text-gray-500',
base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
size: 'h-4 w-4',
padding: 'ps-10'
},
closeButton: 'absolute right-4'
closeButton: 'absolute end-4'
},
emptyState: {
wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
@@ -712,11 +712,13 @@ const pagination = {
},
prevButton: {
color: 'white',
class: 'rtl:[&_span:first-child]:rotate-180',
icon: 'i-heroicons-chevron-left-20-solid'
},
nextButton: {
color: 'white',
icon: 'i-heroicons-chevron-right-20-solid'
class: 'rtl:[&_span:last-child]:rotate-180',
icon: 'i-heroicons-chevron-right-20-solid '
}
}
}
@@ -879,7 +881,7 @@ const notification = {
size: 'md'
},
progress: {
base: 'absolute bottom-0 left-0 right-0 h-1',
base: 'absolute bottom-0 end-0 start-0 h-1',
background: 'bg-{color}-500 dark:bg-{color}-400'
},
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
@@ -909,7 +911,7 @@ const notification = {
const notifications = {
wrapper: 'fixed flex flex-col justify-end z-[55]',
position: 'bottom-0 right-0',
position: 'bottom-0 end-0',
width: 'w-full sm:w-96',
container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
}

4
src/runtime/components/data/Table.vue
View File

@@ -3,7 +3,7 @@
<table :class="[ui.base, ui.divide]">
<thead :class="ui.thead">
<tr :class="ui.tr.base">
<th v-if="modelValue" scope="col" class="pl-4">
<th v-if="modelValue" scope="col" class="ps-4">
<UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" />
</th>
@@ -23,7 +23,7 @@
</thead>
<tbody :class="ui.tbody">
<tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected]">
<td v-if="modelValue" class="pl-4">
<td v-if="modelValue" class="ps-4">
<UCheckbox v-model="selected" :value="row" />
</td>

2
src/runtime/components/forms/Checkbox.vue
View File

@@ -16,7 +16,7 @@
v-bind="$attrs"
>
</div>
<div v-if="label || $slots.label" class="ml-3 text-sm">
<div v-if="label || $slots.label" class="ms-3 text-sm">
<label :for="name" :class="ui.label">
<slot name="label">{{ label }}</slot>
<span v-if="required" :class="ui.required">*</span>

2
src/runtime/components/forms/Radio.vue
View File

@@ -14,7 +14,7 @@
v-bind="$attrs"
>
</div>
<div v-if="label || $slots.label" class="ml-3 text-sm">
<div v-if="label || $slots.label" class="ms-3 text-sm">
<label :for="`${name}-${value}`" :class="ui.label">
<slot name="label">{{ label }}</slot>
<span v-if="required" :class="ui.required">*</span>