feat(nc-gui): add option to set RTL on forms

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -40,6 +40,14 @@ const passwordProtected = ref(false)
 
 const shared = ref<SharedView>({ id: '', meta: {}, password: undefined })
 
+const withRTL = computed({
+  get: () => !!shared.value.meta.locale,
+  set: (rtl) => {
+    shared.value.meta = { ...shared.value.meta, rtl }
+    updateSharedViewMeta()
+  },
+})
+
 const transitionDuration = computed({
   get: () => shared.value.meta.transitionDuration || 250,
   set: (duration) => {
@@ -105,7 +113,7 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+  return encodeURI(`${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`)
 })
 
 async function saveAllowCSVDownload() {
@@ -285,6 +293,19 @@ watch(passwordProtected, (value) => {
             </Transition>
           </div>
 
+          <div>
+            <!-- use RTL orientation in form - todo: i18n -->
+            <a-checkbox
+              v-if="shared.type === ViewTypes.FORM"
+              v-model:checked="withRTL"
+              data-testid="nc-modal-share-view__locale"
+              class="!text-sm"
+            >
+              <!-- todo i18n -->
+              RTL Orientation
+            </a-checkbox>
+          </div>
+
           <div>
             <!-- Password Protection -->
             <a-checkbox

packages/nc-gui/lib/types.ts

@@ -86,6 +86,7 @@ export interface SharedViewMeta extends Record<string, any> {
   withTheme?: boolean
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
+  rtl?: boolean
 }
 
 export interface SharedView {

packages/nc-gui/pages/[projectType]/form/[viewId].vue

@@ -4,6 +4,7 @@ import {
   IsPublicInj,
   MetaInj,
   ReloadViewDataHookInj,
+  applyLanguageDirection,
   createError,
   createEventHook,
   definePageMeta,
@@ -26,9 +27,8 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { loadSharedView, sharedView, meta, notFound, password, passwordDlg, passwordError } = useProvideSharedFormStore(
+const { loadSharedView, sharedView, sharedViewMeta, meta, notFound, password, passwordDlg, passwordError } =
-  route.params.viewId as string,
+  useProvideSharedFormStore(route.params.viewId as string)
-)
 
 await loadSharedView()
 
@@ -39,6 +39,8 @@ if (!notFound.value) {
   provide(IsFormInj, ref(true))
 
   useProvideSmartsheetStore(sharedView, meta, true)
+
+  applyLanguageDirection(sharedViewMeta.value.rtl ? 'rtl' : 'ltr')
 } else {
   navigateTo('/error/404')
   throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })

packages/nc-gui/plugins/a.i18n.ts

@@ -1,6 +1,6 @@
 import { createI18n } from 'vue-i18n'
 import { isClient } from '@vueuse/core'
-import { applyLanguageDirection, defineNuxtPlugin, nextTick } from '#imports'
+import { applyLanguageDirection, defineNuxtPlugin, isRtlLang, nextTick } from '#imports'
 import type { Language, NocoI18n } from '~/lib'
 import { LanguageAlias } from '~/lib'
 
@@ -26,7 +26,7 @@ export async function setI18nLanguage(locale: keyof typeof Language, i18n = glob
 
   i18n.global.locale.value = locale
 
-  if (isClient) applyLanguageDirection(locale)
+  if (isClient) applyLanguageDirection(isRtlLang(locale) ? 'rtl' : 'ltr')
 }
 
 export async function loadLocaleMessages(

packages/nc-gui/utils/viewUtils.ts

@@ -25,16 +25,15 @@ export const viewTypeAlias: Record<number, string> = {
   [ViewTypes.KANBAN]: 'kanban',
 }
 
-const isRtlLang = (lang: keyof typeof Language) => ['fa', 'ar'].includes(lang)
+export const isRtlLang = (lang: keyof typeof Language) => ['fa', 'ar'].includes(lang)
 
-const rtl = 'rtl'
+const rtl = 'rtl' as const
-const ltr = 'ltr'
+const ltr = 'ltr' as const
 
-export function applyLanguageDirection(lang: keyof typeof Language) {
+export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
-  const targetDirection = isRtlLang(lang) ? rtl : ltr
+  const oppositeDirection = dir === ltr ? rtl : ltr
-  const oppositeDirection = targetDirection === ltr ? rtl : ltr
 
   document.body.classList.remove(oppositeDirection)
-  document.body.classList.add(targetDirection)
+  document.body.classList.add(dir)
-  document.body.style.direction = targetDirection
+  document.body.style.direction = dir
 }