improve RTL mode (#625)

Co-authored-by: Julien Nahum <julien@nahum.net>

client/app.vue

@@ -96,7 +96,10 @@ export default {
           type: 'image/png',
           href: '/favicon.ico'
         }
-      ]
+      ],
+      htmlAttrs: () => ({
+        dir: 'ltr'
+      })
     })
 
     const appStore = useAppStore()

client/components/forms/DateInput.vue

@@ -46,7 +46,7 @@
           </div>
           <button
             v-if="fromDate && !props.disabled"
-            class="hover:bg-gray-50 dark:hover:bg-gray-900 border-l px-2 flex items-center"
+            class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:border-r px-2 flex items-center"
             @click.prevent="clear()"
           >
             <Icon

client/components/forms/MatrixInput.vue

@@ -15,11 +15,11 @@
       <table class="w-full table-auto">
         <thead class="">
           <tr>
-            <th class="text-left p-2 w-auto max-w-xs" />
+            <th class="ltr:text-left rtl:text-right p-2 w-auto max-w-xs" />
             <td
               v-for="column in columns"
               :key="column"
-              class="border-l border-gray-300 max-w-24 overflow-hidden"
+              class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 max-w-24 overflow-hidden"
             >
               <div class="p-2 w-full flex items-center justify-center text-sm">
                 {{ column }}
@@ -33,7 +33,7 @@
             :key="rowIndex"
             class="border-t border-gray-300"
           >
-            <td class="text-left w-auto max-w-24 overflow-hidden">
+            <td class="ltr:text-left rtl:text-right w-auto max-w-24 overflow-hidden">
               <div class="w-full p-2 text-sm">
                 {{ row }}
               </div>
@@ -41,7 +41,7 @@
             <td
               v-for="column in columns"
               :key="row + column"
-              class="border-l border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
+              class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
               :class="{
                 '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
               }"

client/components/forms/PhoneInput.vue

@@ -14,7 +14,7 @@
         v-model="selectedCountryCode"
         :class="theme.PhoneInput.countrySelectWidth"
         dropdown-class="max-w-[300px]"
-        input-class="rounded-r-none"
+        input-class="ltr-only:rounded-r-none rtl:!rounded-l-none"
         :data="countries"
         :disabled="disabled || countries.length === 1 ? true : null"
         :searchable="true"
@@ -55,7 +55,7 @@
       <input
         v-model="inputVal"
         type="text"
-        class="inline-flex-grow !border-l-0 !rounded-l-none"
+        class="inline-flex-grow ltr-only:border-l-0 ltr-only:!rounded-l-none rtl:border-r-0 rtl:rounded-r-none"
         :disabled="disabled ? true : null"
         :class="[
           theme.PhoneInput.input,

client/components/forms/components/VSelect.vue

@@ -64,7 +64,7 @@
             >
               <slot name="placeholder">
                 <div
-                  class="text-gray-400 dark:text-gray-500 w-full text-left truncate pr-3"
+                  class="text-gray-400 dark:text-gray-500 w-full ltr:text-left rtl:!text-right truncate ltr:pr-3 rtl:pl-3 rtl:!pr-0"
                   :class="[
                     { 'py-1': multiple && !loading },
                     theme.SelectInput.fontSize
@@ -76,7 +76,7 @@
             </div>
           </transition>
         </div>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none">
           <Icon
             name="heroicons:chevron-up-down-16-solid"
             class="h-5 w-5 text-gray-500"
@@ -85,7 +85,7 @@
       </button>
       <button
         v-if="clearable && showClearButton && !isEmpty"
-        class="hover:bg-gray-50 dark:hover:bg-gray-900 border-l px-2"
+        class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:!border-l-0 rtl:border-r px-2 flex items-center"
         :class="[theme.SelectInput.spacing.vertical]"
         @click.prevent="clear()"
       >
@@ -119,12 +119,12 @@
           <input
             v-model="searchTerm"
             type="text"
-            class="flex-grow pl-3 pr-7 py-2 w-full focus:outline-none dark:text-white"
+            class="flex-grow ltr:pl-3 ltr:pr-7 rtl:!pr-3 rtl:pl-7 py-2 w-full focus:outline-none dark:text-white"
             placeholder="Search"
           >
           <div
             v-if="!searchTerm"
-            class="flex absolute right-0 inset-y-0 items-center px-2 justify-center pointer-events-none"
+            class="flex absolute ltr:right-0 rtl:left-0 rtl:!right-auto inset-y-0 items-center px-2 justify-center pointer-events-none"
           >
             <Icon
               name="heroicons:magnifying-glass-solid"
@@ -134,12 +134,12 @@
           <div
             v-else
             role="button"
-            class="flex absolute right-0 inset-y-0 items-center px-2 justify-center"
+            class="flex absolute ltr:right-0 rtl:!right-auto rtl:left-0 inset-y-0 items-center px-2 justify-center"
             @click="searchTerm = ''"
           >
             <Icon
               name="heroicons:backspace"
-              class="h-5 w-5 text-gray-500 dark:text-gray-400"
+              class="h-5 w-5 rtl:rotate-180 text-gray-500 dark:text-gray-400"
             />
           </div>
         </div>

client/components/open/forms/OpenCompleteForm.vue

@@ -2,6 +2,7 @@
   <div
     v-if="form"
     class="open-complete-form"
+    :dir="form?.layout_rtl ? 'rtl' : 'ltr'"
     :style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
   >
     <link

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -119,7 +119,7 @@
       :form="form"
       class="mt-4"
       label="Right-to-Left Layout"
-      help="Adjusts form layout for right-to-left languages."
+      help="Adjusts layout for RTL languages"
     />
 
     <EditorSectionHeader

client/pages/forms/[slug]/index.vue

@@ -254,6 +254,9 @@ useHead({
       content: 'black-translucent'
     },
   ] : {},
-  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' } ]
+  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' }],
+  htmlAttrs: () => ({
+    dir: form.value?.layout_rtl ? 'rtl' : 'ltr'
+  })
 })
 </script>

client/tailwind.config.js

@@ -94,6 +94,8 @@ module.exports = {
     plugin(function ({ addVariant }) {
       addVariant("between", "&:not(:first-child):not(:last-child)")
       addVariant("hocus", ["&:hover", "&:focus"])
+      // Add a new variant that only applies when there's no RTL parent
+      addVariant('ltr-only', '&:where(:not([dir="rtl"] *))')
     }),
   ],
 }