Right to left mode (#611)

* Right to left mode

* Fix label

---------

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

api/app/Http/Requests/UserFormRequest.php

@@ -33,6 +33,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'theme' => ['required', Rule::in(Form::THEMES)],
             'width' => ['required', Rule::in(Form::WIDTHS)],
             'size' => ['required', Rule::in(Form::SIZES)],
+            'layout_rtl' => 'boolean',
             'border_radius' => ['required', Rule::in(Form::BORDER_RADIUS)],
             'cover_picture' => 'url|nullable',
             'logo_picture' => 'url|nullable',

api/app/Http/Resources/FormResource.php

@@ -74,6 +74,7 @@ class FormResource extends JsonResource
             'is_password_protected' => true,
             'has_password' => $this->has_password,
             'width' => 'centered',
+            'layout_rtl' => $this->layout_rtl,
             'no_branding' => $this->no_branding,
             'properties' => [],
             'logo_picture' => $this->logo_picture,

api/app/Models/Forms/Form.php

@@ -58,6 +58,7 @@ class Form extends Model implements CachableAttributes
         'border_radius',
         'theme',
         'width',
+        'layout_rtl',
         'cover_picture',
         'logo_picture',
         'dark_mode',

api/database/migrations/2024_11_08_091638_add_layout_rtl_to_forms_table.php

@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->boolean('layout_rtl')->default(false);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('layout_rtl');
+        });
+    }
+};

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>