Right to left mode (#611)

* Right to left mode

* Fix label

---------

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

client/components/open/forms/OpenCompleteForm.vue

@@ -2,7 +2,7 @@
   <div
     v-if="form"
     class="open-complete-form"
-    :style="{ '--font-family': form.font_family }"
+    :style="{ '--font-family': form.font_family, 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
   >
     <link
       v-if="adminPreview && form.font_family"
@@ -147,7 +147,7 @@
         key="submitted"
         class="px-2"
       >
-      <TextBlock
+        <TextBlock
           v-if="form.submitted_text"
           class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
           :content="form.submitted_text"

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

@@ -113,6 +113,14 @@
       label="Form Width"
       help="Useful when embedding your form"
     />
+    
+    <ToggleSwitchInput
+      name="layout_rtl"
+      :form="form"
+      class="mt-4"
+      label="Right-to-Left Layout"
+      help="Adjusts form layout for right-to-left languages."
+    />
 
     <EditorSectionHeader
       icon="heroicons:tag-16-solid"
@@ -128,7 +136,8 @@
     <image-input
       name="cover_picture"
       :form="form"
-      label="Color (for buttons & inputs border)"
+      label="Color image"
+      help="Not visible when form is embedded"
     />
     <toggle-switch-input
       name="hide_title"

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

@@ -71,12 +71,13 @@
               v-if="form.logo_picture"
               class="w-full mx-auto py-5 relative"
               :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded}"
+              :style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
             >
               <img
                 alt="Logo Picture"
                 :src="coverPictureSrc(form.logo_picture)"
                 :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-                class="max-w-60 h-20 object-contain absolute left-5 transition-all"
+                class="max-w-60 h-20 object-contain absolute transition-all"
               >
             </div>
           </div>

client/composables/forms/initForm.js

@@ -13,6 +13,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     font_family: null,
     theme: "default",
     width: "centered",
+    layout_rtl: false,
     dark_mode: "auto",
     color: DEFAULT_COLOR,
     hide_title: false,

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

@@ -20,12 +20,13 @@
         v-if="form.logo_picture"
         class="w-full p-5 relative mx-auto"
         :class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
+        :style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
       >
         <img
           alt="Logo Picture"
           :src="form.logo_picture"
           :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-          class="w-20 h-20 object-contain absolute left-5 transition-all"
+          class="w-20 h-20 object-contain absolute transition-all"
         >
       </div>
     </div>