Right to left (RTL) direction support

app/frontend/src/assets/scss/style.scss

@@ -592,3 +592,26 @@ a,
   justify-content: center;
   min-height: 300px;
 }
+
+.label .v-label {
+  right: 0 !important;
+  left: auto !important;
+}
+
+.flex-xs-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-xs-column {
+  flex-direction: column;
+}
+
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
+
+.dir-ltl {
+  direction: ltr !important;
+  text-align: left;
+}

app/frontend/src/components/admin/AdminFormsTable.vue

@@ -1,24 +1,35 @@
 <template>
-  <div>
+  <div :class="{ 'dir-rtl': isRTL }">
     <v-row no-gutters>
       <v-col cols="12" sm="8">
         <v-checkbox
           class="pl-3"
+          :class="isRTL ? 'float-right' : 'float-left'"
           v-model="activeOnly"
-          :label="$t('trans.adminFormsTable.showDeletedForms')"
           @click="refeshForms"
-        />
+        >
+          <template #label>
+            <span :class="{ 'mr-2': isRTL }">
+              {{ $t('trans.adminFormsTable.showDeletedForms') }}
+            </span>
+          </template>
+        </v-checkbox>
       </v-col>
+
       <v-col cols="12" sm="4">
         <!-- search input -->
-        <div class="submissions-search">
+        <div
+          class="submissions-search"
+          :class="isRTL ? 'float-left' : 'float-right'"
+        >
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             :label="$t('trans.adminFormsTable.search')"
             single-line
             hide-details
             class="pb-5"
+            :class="{ 'dir-rtl': isRTL, label: isRTL }"
           />
         </div>
       </v-col>
@@ -85,6 +96,7 @@ export default {
   },
   computed: {
     ...mapGetters('admin', ['formList']),
+    ...mapGetters('form', ['isRTL']),
     calcHeaders() {
       return this.headers.filter(
         (x) => x.value !== 'updatedAt' || this.activeOnly

app/frontend/src/components/admin/AdminPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tabs>
+  <v-tabs :class="{ 'dir-rtl': isRTL }" v-model="tab">
     <v-tab>{{ $t('trans.adminPage.forms') }}</v-tab>
     <v-tab>{{ $t('trans.adminPage.users') }}</v-tab>
     <v-tab>{{ $t('trans.adminPage.developer') }}</v-tab>
@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   name: 'AdminPage',
   components: {
@@ -27,8 +28,17 @@ export default {
   },
   data() {
     return {
+      tab: null,
       adminDashboardUrl: this.$config.adminDashboardUrl,
     };
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
+  watch: {
+    isRTL() {
+      this.tab = null;
+    },
+  },
 };
 </script>

app/frontend/src/components/admin/AdminUsersTable.vue

@@ -2,16 +2,20 @@
   <div>
     <v-row no-gutters>
       <v-spacer />
-      <v-col cols="12" sm="4">
+      <v-col cols="12">
         <!-- search input -->
-        <div class="submissions-search">
+        <div
+          class="submissions-search"
+          :class="isRTL ? 'float-left' : 'float-right'"
+        >
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             :label="$t('trans.adminUsersTable.search')"
             single-line
             hide-details
             class="pb-5"
+            :class="{ 'dir-rtl': isRTL, label: isRTL }"
           />
         </div>
       </v-col>
@@ -58,6 +62,7 @@ export default {
   },
   computed: {
     ...mapGetters('admin', ['userList']),
+    ...mapGetters('form', ['isRTL']),
     headers() {
       return [
         {

app/frontend/src/components/base/BaseDialog.vue

@@ -7,7 +7,7 @@
     @keydown.esc="closeDialog"
   >
     <v-card>
-      <div class="dialog-body">
+      <div class="dialog-body" :class="{ 'dir-rtl': isRTL }">
         <div v-if="showCloseButton">
           <v-spacer />
           <v-icon color="primary" class="float-right m-3" @click="closeDialog"
@@ -47,7 +47,12 @@
               <span>{{ $t('trans.baseDialog.continue') }}</span>
             </slot>
           </v-btn>
-          <v-btn class="mb-5" outlined @click="closeDialog">
+          <v-btn
+            :class="{ 'dir-rtl': isRTL }"
+            class="mb-5"
+            outlined
+            @click="closeDialog"
+          >
             <slot name="button-text-cancel">
               <span>{{ $t('trans.baseDialog.cancel') }}</span>
             </slot>
@@ -58,6 +63,7 @@
             class="mb-5 mr-5"
             color="primary"
             depressed
+            :class="{ 'dir-rtl': isRTL }"
             @click="continueDialog"
           >
             <slot name="button-text-continue">
@@ -104,6 +110,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'BaseDialog',
   methods: {
@@ -120,6 +128,9 @@ export default {
       this.$emit('custom-dialog');
     },
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   props: {
     value: {
       default: false,

app/frontend/src/components/base/BaseFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card :class="{ 'dir-rtl': isRTL }">
     <v-card-title class="text-h5 pb-0 titleWrapper">
       <slot name="filter-title"></slot>
     </v-card-title>
@@ -18,8 +18,8 @@
           filled
           dense
           class="mt-3"
-        >
-        </v-text-field>
+          :class="{ label: isRTL }"
+        />
         <v-tooltip bottom>
           <template #activator="{ on, attrs }">
             <v-btn
@@ -62,7 +62,8 @@
       }}</v-btn>
       <v-btn
         @click="cancelFilterData"
-        class="mt-3 ml-3 primary--text"
+        class="mt-3 primary--text"
+        :class="isRTL ? 'mr-3' : 'ml-3'"
         outlined
         >{{ $t('trans.baseFilter.cancel') }}</v-btn
       >
@@ -71,6 +72,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import i18n from '@/internationalization';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faRepeat } from '@fortawesome/free-solid-svg-icons';
@@ -130,6 +132,9 @@ export default {
       default: i18n.t('trans.baseFilter.filter'),
     },
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   data() {
     return {
       selectedData: this.preselectedData,
@@ -186,7 +191,6 @@ export default {
   font-family: BCSans !important;
   color: #000000 !important;
 }
-
 .hr {
   height: 1px;
   border: none;

app/frontend/src/components/base/BaseInternationalization.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center">
+  <div class="text-center" style="z-index: 100">
     <v-menu offset-y>
       <template v-slot:activator="{ on, attrs }">
         <v-btn dark outlined v-bind="attrs" v-on="on" class="ml-3">
@@ -8,7 +8,7 @@
           <font-awesome-icon icon="fa-solid fa-caret-down" class="ml-3" />
         </v-btn>
       </template>
-      <v-list>
+      <v-list style="height: 90vh; overflow-y: scroll">
         <v-list-item-group color="primary" v-model="languageIndex">
           <v-list-item
             v-for="(item, i) in items"
@@ -54,7 +54,7 @@ export default {
         { title: 'Italian (Italy)', keyword: 'it' },
         { title: '日本語 (Japanese)', keyword: 'ja' },
         { title: '한국어 (Korean)', keyword: 'ko' },
-        { title: 'ਪੰਜਾਬੀ (Punjabi)', keyword: 'pa' },
+        { title: 'ਪੰਜਾਬੀ (Punjabi - Gurmukhi)', keyword: 'pa' },
         { title: 'Portuguese (Portugal)', keyword: 'pt' },
         { title: 'Русский (Russian)', keyword: 'ru' },
         { title: 'Tagalog (Filipino)', keyword: 'tl' },

app/frontend/src/components/base/BaseNotificationBar.vue

@@ -1,6 +1,6 @@
 <template>
   <v-alert
-    :class="'target-notification ' + notification.class"
+    :class="['target-notification ' + notification.class, { 'dir-rtl': isRTL }]"
     :icon="notification.icon"
     prominent
     dismissible
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 export default {
   name: 'BaseNotificationBar',
   props: {
@@ -30,6 +30,9 @@ export default {
       timeout: null,
     };
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   methods: {
     ...mapActions('notifications', ['deleteNotification']),
     alertClosed() {

app/frontend/src/components/base/BaseNotificationContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="notification-container">
+  <div class="notification-container" :class="{ 'dir-rtl': isRTL }">
     <BaseNotificationBar
       v-for="notification in notifications"
       :key="notification.id"
@@ -9,10 +9,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 export default {
   name: 'BaseNotificationContainer',
-  computed: mapState('notifications', ['notifications']),
+  computed: {
+    ...mapState('notifications', ['notifications']),
+    ...mapGetters('form', ['isRTL']),
+  },
 };
 </script>
 

app/frontend/src/components/designer/FloatButton.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :class="{ 'dir-rtl': isRTL }"
     :style="[
       {
         display: 'flex',
@@ -206,7 +207,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('form', ['multiLanguage']),
+    ...mapGetters('form', ['multiLanguage', 'isRTL']),
   },
   props: {
     formId: String,