Merge pull request #6039 from gitstart/NCDBOSS-57

NCDBOSS-57 - 🐛 Bug: the position of "next" and "previous" buttons in forms is confusing for RTL languages

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
+import { ChangePageInj, PaginationDataInj, computed, iconMap, inject, isRtlLang, useI18n } from '#imports'
+import type { Language } from '~/lib'
 
 const props = defineProps<{
   alignCountOnRight?: boolean
 }>()
 
+const { locale } = useI18n()
+
 const paginatedData = inject(PaginationDataInj)!
 
 const changePage = inject(ChangePageInj)!
@@ -19,6 +22,8 @@ const page = computed({
     changePage?.(p)
   },
 })
+
+const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Language))
 </script>
 
 <template>
@@ -39,6 +44,7 @@ const page = computed({
       v-model:page-size="size"
       size="small"
       class="!text-xs !m-1 nc-pagination"
+      :class="{ 'rtl-pagination': isRTLLanguage }"
       :total="count"
       show-less-items
       :show-size-changer="false"
@@ -77,4 +83,9 @@ const page = computed({
 :deep(.ant-pagination-item-link) {
   @apply text-gray-500 flex items-center justify-center;
 }
+
+:deep(.rtl-pagination .ant-pagination-prev .ant-pagination-item-link),
+:deep(.rtl-pagination .ant-pagination-next .ant-pagination-item-link) {
+  @apply transform rotate-180;
+}
 </style>