add LTR script support

2024-01-07 14:19:21 +02:00
parent ae7865e508
commit 17de28965b
30 changed files with 95 additions and 42 deletions
@@ -32,6 +32,8 @@ export default class extends HTMLElement {
  render = (item) => {
    const div = document.createElement('div')

+    div.setAttribute('dir', 'auto')
+
    div.textContent = item.name

    return div
@@ -56,6 +56,8 @@ export default class extends HTMLElement {
  render = (item) => {
    const div = document.createElement('div')

+    div.setAttribute('dir', 'auto')
+
    div.textContent = item[this.dataset.field]

    return div
@@ -1,6 +1,7 @@
 <template>
  <div
    class="flex absolute lg:text-base"
+    dir="auto"
    :style="computedStyle"
    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed border-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
  >
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div dir="auto">
    <div class="flex justify-between items-center w-full mb-2">
      <label
        :for="field.uuid"
@@ -79,6 +79,7 @@
            <label
              v-if="currentField.name"
              :for="currentField.uuid"
+              dir="auto"
              class="label text-2xl mb-2"
            >{{ currentField.name }}
              <template v-if="!currentField.required">({{ t('optional') }})</template>
@@ -90,6 +91,7 @@
            <AppearsOn :field="currentField" />
            <select
              :id="currentField.uuid"
+              dir="auto"
              :required="currentField.required"
              class="select base-input !text-2xl w-full text-center font-normal"
              :name="`values[${currentField.uuid}]`"
@@ -116,6 +118,7 @@
            <label
              v-if="currentField.name"
              :for="currentField.uuid"
+              dir="auto"
              class="label text-2xl mb-2"
            >{{ currentField.name }}
              <template v-if="!currentField.required">({{ t('optional') }})</template>
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div dir="auto">
    <div class="flex justify-between items-center w-full mb-2">
      <label
        class="label text-2xl"
@@ -24,7 +24,7 @@
        </span>
        <span
          v-else
-          class="tooltip"
+          class="tooltip ml-2"
          :data-tip="t('draw_initials')"
        >
          <a
@@ -2,6 +2,7 @@
  <label
    v-if="field.name"
    :for="field.uuid"
+    dir="auto"
    class="label text-2xl mb-2"
  >{{ field.name }}</label>
  <div class="flex w-full">
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div dir="auto">
    <div class="flex justify-between items-center w-full mb-2">
      <label
        class="label text-2xl"
@@ -24,7 +24,7 @@
        </span>
        <span
          v-else-if="withTypedSignature"
-          class="tooltip"
+          class="tooltip ml-2"
          :data-tip="t('type_text')"
        >
          <a
@@ -2,6 +2,7 @@
  <label
    v-if="field.name"
    :for="field.uuid"
+    dir="auto"
    class="label text-2xl mb-2"
  >{{ field.name }}
    <template v-if="!field.required">({{ t('optional') }})</template>
@@ -17,6 +18,7 @@
      :id="field.uuid"
      v-model="text"
      :maxlength="cellsMaxLegth"
+      dir="auto"
      class="base-input !text-2xl w-full !pr-11 -mr-10"
      :required="field.required"
      :pattern="field.validation?.pattern"
@@ -61,6 +61,7 @@
        v-if="field.type !== 'checkbox' || field.name"
        ref="name"
        :contenteditable="editable && !defaultField"
+        dir="auto"
        class="pr-1 cursor-text outline-none block"
        style="min-width: 2px"
        @keydown.enter.prevent="onNameEnter"
@@ -83,7 +84,7 @@
          class="label text-xs"
          @click.prevent="field.required = !field.required"
          @mousedown.prevent
-        >Required</label>
+        >{{ t('required') }}</label>
      </div>
      <button
        v-else-if="editable"
@@ -5,6 +5,7 @@
  >
    <span
      ref="contenteditable"
+      dir="auto"
      :contenteditable="editable"
      style="min-width: 2px"
      :class="iconInline ? 'inline' : 'block'"
@@ -102,6 +102,7 @@
                  v-model="field.default_value"
                  type="text"
                  :placeholder="t('default_value')"
+                  dir="auto"
                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
                  @blur="save"
                >
@@ -249,6 +250,7 @@
              v-model="option.value"
              class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
              type="text"
+              dir="auto"
              required
              :placeholder="`${t('option')} ${index + 1}`"
              @blur="save"
@@ -271,6 +273,7 @@
            :placeholder="`${t('option')} ${index + 1}`"
            type="text"
            required
+            dir="auto"
            @focus="maybeFocusOnOptionArea(option)"
            @blur="save"
          >
@@ -6,7 +6,7 @@
      <%= f.fields_for current_account do |ff| %>
        <div class="form-control">
          <%= ff.label :name, 'Company Name', class: 'label' %>
-          <%= ff.text_field :name, required: true, class: 'base-input' %>
+          <%= ff.text_field :name, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="form-control">
@@ -6,7 +6,7 @@
    <style>
    </style>
  </head>
-  <body>
+  <body dir="auto">
    <%= yield %>
    <%= render partial: 'shared/mailer_attribution' %>
  </body>
@@ -11,12 +11,12 @@
      <%= f.fields_for :value, Struct.new(:subject, :body).new(*f.object.value.values_at('subject', 'body')) do |ff| %>
        <div class="form-control">
          <%= ff.label :subject, class: 'label' %>
-          <%= ff.text_field :subject, required: true, class: 'base-input' %>
+          <%= ff.text_field :subject, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= ff.label :body, class: 'label' %>
          <autoresize-textarea>
-            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2' %>
+            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2', dir: 'auto' %>
          </autoresize-textarea>
        </div>
      <% end %>
@@ -11,7 +11,7 @@
      <%= f.fields_for :value, Struct.new(:title, :url).new(*(f.object.value || {}).values_at('title', 'url')) do |ff| %>
        <div class="form-control">
          <%= ff.label :title, 'Button title', class: 'label' %>
-          <%= ff.text_field :title, class: 'base-input' %>
+          <%= ff.text_field :title, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= ff.label :url, 'Button URL', class: 'label' %>
@@ -11,12 +11,12 @@
      <%= f.fields_for :value, Struct.new(:subject, :body).new(*f.object.value.values_at('subject', 'body')) do |ff| %>
        <div class="form-control">
          <%= ff.label :subject, class: 'label' %>
-          <%= ff.text_field :subject, required: true, class: 'base-input' %>
+          <%= ff.text_field :subject, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= ff.label :body, class: 'label' %>
          <autoresize-textarea>
-            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2' %>
+            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2', dir: 'auto' %>
          </autoresize-textarea>
        </div>
      <% end %>
@@ -11,12 +11,12 @@
      <%= f.fields_for :value, Struct.new(:subject, :body).new(*f.object.value.values_at('subject', 'body')) do |ff| %>
        <div class="form-control">
          <%= ff.label :subject, class: 'label' %>
-          <%= ff.text_field :subject, required: true, class: 'base-input' %>
+          <%= ff.text_field :subject, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= ff.label :body, class: 'label' %>
          <autoresize-textarea>
-            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2' %>
+            <%= ff.text_area :body, required: true, class: 'base-input w-full py-2', dir: 'auto' %>
          </autoresize-textarea>
        </div>
      <% end %>
@@ -6,11 +6,11 @@
      <div class="grid md:grid-cols-2 gap-4">
        <div class="form-control">
          <%= f.label :first_name, class: 'label' %>
-          <%= f.text_field :first_name, required: true, class: 'base-input' %>
+          <%= f.text_field :first_name, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= f.label :last_name, class: 'label' %>
-          <%= f.text_field :last_name, required: true, class: 'base-input' %>
+          <%= f.text_field :last_name, required: true, class: 'base-input', dir: 'auto' %>
        </div>
      </div>
      <div class="form-control">
@@ -18,7 +18,7 @@
                <% end %>
                <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                <submitters-autocomplete data-field="name">
-                  <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Name', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.full_name : '' %>
+                  <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Name', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.full_name : '', dir: 'auto' %>
                </submitters-autocomplete>
                <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
                  <submitters-autocomplete data-field="email">
@@ -23,14 +23,14 @@
                  </submitters-autocomplete>
                  <% if template.submitters.size > 1 %>
                    <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>" dir="auto">
                    </submitters-autocomplete>
                  <% end %>
                </div>
                <% if template.submitters.size == 1 %>
                  <div class="form-control flex">
                    <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>" dir="auto">
                    </submitters-autocomplete>
                  </div>
                <% end %>
@@ -33,12 +33,12 @@
    <div class="form-control space-y-2">
      <div class="form-control">
        <%= f.label :subject, class: 'label' %>
-        <%= f.text_field :subject, value: config.value['subject'], required: true, class: '!text-sm base-input w-full' %>
+        <%= f.text_field :subject, value: config.value['subject'], required: true, class: '!text-sm base-input w-full', dir: 'auto' %>
      </div>
      <div class="form-control">
        <%= f.label :message, 'Body', class: 'label' %>
        <autoresize-textarea>
-          <%= f.text_area :body, value: config.value['body'], required: true, class: 'base-textarea w-full', rows: 10 %>
+          <%= f.text_area :body, value: config.value['body'], required: true, class: 'base-textarea w-full', rows: 10, dir: 'auto' %>
        </autoresize-textarea>
      </div>
      <%= render 'message_fields' %>
@@ -1,4 +1,4 @@
-<field-value class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+<field-value dir="auto" class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
  <% if field['type'].in?(['signature', 'image', 'initials', 'stamp']) %>
    <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy">
  <% elsif field['type'].in?(['file', 'payment']) %>
@@ -35,7 +35,7 @@
        <% document = @submission.template_schema_documents.find { |a| item['attachment_uuid'] == a.uuid } %>
        <a href="#<%= "page-#{document.uuid}-0" %>" onclick="[event.preventDefault(), window[event.target.closest('a').href.split('#')[1]].scrollIntoView({ behavior: 'smooth', block: 'start' })]" class="block cursor-pointer">
          <img src="<%= document.preview_images.first.url %>" width="<%= document.preview_images.first.metadata['width'] %>" height="<%= document.preview_images.first.metadata['height'] %>" class="rounded border" loading="lazy">
-          <div class="pb-2 pt-1.5 text-center">
+          <div class="pb-2 pt-1.5 text-center" dir="auto">
            <%= item['name'].presence || document.filename.base %>
          </div>
        </a>
@@ -81,7 +81,7 @@
          <div class="border border-base-300 rounded-md px-2 py-1 mb-1">
            <div class="flex items-center space-x-1">
              <span class="mx-1 w-3 h-3 rounded-full <%= colors[index] %>"></span>
-              <span class="text-lg">
+              <span class="text-lg" dir="auto">
                <%= (@submission.template_submitters || @submission.template.submitters).find { |e| e['uuid'] == submitter&.uuid }&.dig('name') || "#{(index + 1).ordinalize} Submitter" %>
              </span>
            </div>
@@ -138,10 +138,10 @@
            <% value = values[field['uuid']] %>
            <% next if value.blank? %>
            <div class="pt-2.5 border-b border-base-300">
-              <div class="text-xs font-medium uppercase mb-0.5">
+              <div class="text-xs font-medium uppercase mb-0.5" dir="auto">
                <%= field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}" %>
              </div>
-              <div>
+              <div dir="auto">
                <% if field['type'].in?(%w[signature initials]) %>
                  <div class="w-full bg-base-300 py-1">
                    <img class="object-contain mx-auto" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
@@ -1,7 +1,7 @@
 <%= render 'shared/turbo_modal', title: 'Rename Folder' do %>
  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
    <div class="form-control my-6">
-      <%= f.text_field :name, required: true, placeholder: 'Folder Name...', class: 'base-input w-full', autofocus: true %>
+      <%= f.text_field :name, required: true, placeholder: 'Folder Name...', class: 'base-input w-full', autofocus: true, dir: 'auto' %>
    </div>
    <div class="form-control">
      <%= f.button button_title(title: 'Rename', disabled_with: 'Saving'), class: 'base-button' %>
@@ -4,7 +4,7 @@
      <%= hidden_field_tag :base_template_id, @base_template.id %>
    <% end %>
    <div class="form-control mt-6">
-      <%= f.text_field :name, required: true, placeholder: 'Document Name', class: 'base-input' %>
+      <%= f.text_field :name, required: true, placeholder: 'Document Name', class: 'base-input', dir: 'auto' %>
    </div>
    <div class="mt-3 mb-4 flex items-center justify-between">
      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
@@ -2,11 +2,11 @@
  <div class="space-y-2">
    <div class="form-control">
      <%= f.label :first_name, class: 'label' %>
-      <%= f.text_field :first_name, required: true, class: 'base-input' %>
+      <%= f.text_field :first_name, required: true, class: 'base-input', dir: 'auto' %>
    </div>
    <div class="form-control">
      <%= f.label :last_name, class: 'label' %>
-      <%= f.text_field :last_name, required: true, class: 'base-input' %>
+      <%= f.text_field :last_name, required: true, class: 'base-input', dir: 'auto' %>
    </div>
    <div class="form-control">
      <%= f.label :email, class: 'label' %>