From d82d799e9ed716fabf499b17f1dab8377bbf306e Mon Sep 17 00:00:00 2001 From: Khaled Waleed Date: Thu, 23 Jul 2026 15:15:10 +0300 Subject: [PATCH 1/2] fix(Pagination): mirror default control icons in RTL via CSS The first/prev/next/last icons were swapped in JS based on useLocale().dir, while the list layout follows the DOM direction. When RTL comes from htmlAttrs.dir or UApp's dir prop without a locale, the layout flips but the icons don't, leaving the controls pointing inward. Keep the LTR default icons and mirror them with rtl:-scale-x-100 so icons and layout react to the same source of truth. Co-Authored-By: Claude Fable 5 --- src/runtime/components/Pagination.vue | 46 +- .../__snapshots__/Pagination-vue.spec.ts.snap | 392 +++++++++--------- .../__snapshots__/Pagination.spec.ts.snap | 392 +++++++++--------- 3 files changed, 428 insertions(+), 402 deletions(-) diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue index fc3a336961..7a6c2c4abf 100644 --- a/src/runtime/components/Pagination.vue +++ b/src/runtime/components/Pagination.vue @@ -109,7 +109,6 @@ import { useForwardProps } from '../composables/useForwardProps' import { reactivePick } from '@vueuse/core' import { useAppConfig } from '#imports' import { useComponentProps } from '../composables/useComponentProps' -import { useLocale } from '../composables/useLocale' import { tv } from '../utils/tv' import UButton from './Button.vue' @@ -129,19 +128,18 @@ const slots = defineSlots() const props = useComponentProps('pagination', _props) -const { dir } = useLocale() const appConfig = useAppConfig() as Pagination['AppConfig'] const rootProps = useForwardProps(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits) // eslint-disable-next-line vue/no-dupe-keys -const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft)) +const firstIcon = computed(() => props.firstIcon || appConfig.ui.icons.chevronDoubleLeft) // eslint-disable-next-line vue/no-dupe-keys -const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft)) +const prevIcon = computed(() => props.prevIcon || appConfig.ui.icons.chevronLeft) // eslint-disable-next-line vue/no-dupe-keys -const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight)) +const nextIcon = computed(() => props.nextIcon || appConfig.ui.icons.chevronRight) // eslint-disable-next-line vue/no-dupe-keys -const lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight)) +const lastIcon = computed(() => props.lastIcon || appConfig.ui.icons.chevronDoubleRight) // eslint-disable-next-line vue/no-dupe-keys const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.pagination || {}) })()) @@ -152,12 +150,26 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.pagination || {} - + - + @@ -185,12 +197,26 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.pagination || {} - + - + diff --git a/test/components/__snapshots__/Pagination-vue.spec.ts.snap b/test/components/__snapshots__/Pagination-vue.spec.ts.snap index d226b682a6..d0ea890211 100644 --- a/test/components/__snapshots__/Pagination-vue.spec.ts.snap +++ b/test/components/__snapshots__/Pagination-vue.spec.ts.snap @@ -2,10 +2,10 @@ exports[`Pagination > renders with as correctly 1`] = ` "
-
@@ -35,10 +35,10 @@ exports[`Pagination > renders with as correctly 1`] = ` exports[`Pagination > renders with class correctly 1`] = ` "