Form Translation (#616)

* Form Translation

* Support for other languages

* Support locale for datepicker

* Apply translation on select input

* Apply translation on select input

* Improve translation

---------

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

client/components/forms/DateInput.vue

@@ -71,6 +71,7 @@
           :max-date="maxDate"
           :is-dark="props.isDark"
           color="form-color"
+          :locale="props.locale"
           @update:model-value="updateModelValue"
         />
         <DatePicker
@@ -84,6 +85,7 @@
           :max-date="maxDate"
           :is-dark="props.isDark"
           color="form-color"
+          :locale="props.locale"
           @update:model-value="updateModelValue"
         />
       </template>

client/components/forms/FileInput.vue

@@ -50,7 +50,7 @@
         >
           <Loader class="mx-auto h-6 w-6" />
           <p class="mt-2 text-center text-sm text-gray-500">
-            Uploading your file...
+            {{ $t('forms.fileInput.uploadingFile') }}
           </p>
         </div>
         <template v-else>
@@ -95,10 +95,10 @@
               </div>
 
               <p class="mt-2 text-sm text-gray-500 font-medium select-none">
-                Click to choose {{ multiple ? 'file(s)' : 'a file' }} or drag here
+                {{ $t('forms.fileInput.chooseFiles', { n: multiple ? 1 : 0 }) }}
               </p>
               <p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
-                Size limit: {{ mbLimit }}MB per file
+                {{ $t('forms.fileInput.sizeLimit', mbLimit) }}
               </p>
             </template>
           </div>

client/components/forms/FlatSelectInput.vue

@@ -74,7 +74,7 @@
           '!text-gray-500 !cursor-not-allowed'
         ]"
       >
-        No options available.
+        {{ $t('forms.select.noOptionAvailable') }}
       </div>
     </div>
 

client/components/forms/SignatureInput.vue

@@ -25,7 +25,7 @@
       >
         <Loader class="mx-auto h-6 w-6" />
         <p class="mt-2 text-center text-sm text-gray-500">
-          Uploading your file...
+          {{ $t('forms.fileInput.uploadingFile') }}
         </p>
       </div>
     
@@ -76,7 +76,7 @@
           :class="theme.default.help"
           href="#"
           @click.prevent="openFileUpload"
-        >Upload file instead</a>
+        >{{ $t('forms.signatureInput.uploadFileInstead') }}</a>
       </small>
 
       <small :class="theme.default.help">
@@ -84,7 +84,7 @@
           :class="theme.default.help"
           href="#"
           @click.prevent="clear"
-        >Clear</a>
+        >{{ $t('forms.signatureInput.clear') }}</a>
       </small>
     </template>
 

client/components/forms/components/CameraUpload.vue

@@ -49,17 +49,16 @@
         class="w-6 h-6"
       />
       <p class="text-center font-bold">
-        Allow Camera Permission
+        {{ $t('forms.cameraUpload.allowCameraPermission') }}
       </p>
       <p class="text-xs">
-        You need to allow camera permission before you can take pictures. Go to
-        browser settings to enable camera permission on this page.
+        {{ $t('forms.cameraUpload.allowCameraPermissionDescription') }}
       </p>
       <UButton
         color="white"
         @click.stop="cancelCamera"
       >
-        Got it!
+        {{ $t('forms.cameraUpload.gotIt') }}
       </UButton>
     </div>
 
@@ -81,16 +80,16 @@
         class="w-6 h-6"
       />
       <p class="text-center font-bold">
-        Camera Device Error
+        {{ $t('forms.cameraUpload.cameraDeviceError') }}
       </p>
       <p class="text-xs">
-        An unknown error occurred when trying to start Webcam device.
+        {{ $t('forms.cameraUpload.cameraDeviceErrorDescription') }}
       </p>
       <UButton
         color="white"
         @click.stop="cancelCamera"
       >
-        Go back
+        {{ $t('forms.cameraUpload.goBack') }}
       </UButton>
     </div>
   </div>

client/components/forms/components/VSelect.vue

@@ -120,7 +120,7 @@
             v-model="searchTerm"
             type="text"
             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"
+            :placeholder="allowCreation ? $t('forms.select.searchOrTypeToCreateNew') : $t('forms.select.search')"
           >
           <div
             v-if="!searchTerm"
@@ -179,7 +179,7 @@
           v-else-if="!loading && !(allowCreation && searchTerm)"
           class="w-full text-gray-500 text-center py-2"
         >
-          {{ (allowCreation ? 'Type something to add an option' : 'No option available') }}.
+          {{ (allowCreation ? $t('forms.select.typeSomethingToAddAnOption') : $t('forms.select.noOptionAvailable')) }}.
         </p>
         <div
           v-if="allowCreation && searchTerm"
@@ -192,7 +192,7 @@
             class="text-gray-900 select-none relative py-2 cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-900 rounded focus:outline-none"
             @click="createOption(searchTerm)"
           >
-            Create <span class="px-2 bg-gray-100 border border-gray-300 rounded group-hover-text-black">{{
+            {{ $t('forms.select.create') }} <span class="px-2 bg-gray-100 border border-gray-300 rounded group-hover-text-black">{{
               searchTerm
             }}</span>
           </li>

client/components/forms/useFormInput.js

@@ -28,7 +28,8 @@ export const inputProps = {
   help: {type: String, default: null},
   helpPosition: {type: String, default: "below_input"},
   color: {type: String, default: "#3B82F6"},
-  wrapperClass: {type: String, default: ""},
+  wrapperClass: { type: String, default: "" },
+  locale: { type: String, default: "en" },
 }
 
 export function useFormInput(props, context, options = {}) {