add ability to toggle textarea

2023-10-16 00:41:14 +03:00
parent 698031cfc0
commit 49b9064d9f
8 changed files with 142 additions and 37 deletions
@@ -47,6 +47,10 @@ select:required:invalid {
  @apply border-base-content/20;
 }

+.base-textarea {
+  @apply textarea textarea-bordered bg-white rounded-3xl;
+}
+
 .btn {
  @apply no-animation;
 }
@@ -110,9 +110,10 @@
      <span v-else-if="field.type === 'date'">
        {{ formattedDate }}
      </span>
-      <span v-else>
-        {{ modelValue }}
-      </span>
+      <span
+        v-else
+        class="whitespace-pre-wrap"
+      >{{ modelValue }}</span>
    </div>
  </div>
 </template>
@@ -58,32 +58,12 @@
        >
        <div class="md:mt-4">
          <div v-if="['cells', 'text'].includes(currentField.type)">
-            <label
-              v-if="currentField.name"
-              :for="currentField.uuid"
-              class="label text-2xl mb-2"
-            >{{ currentField.name }}
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
-            </label>
-            <div
-              v-else
-              class="py-1"
+            <TextStep
+              :key="currentField.uuid"
+              v-model="values[currentField.uuid]"
+              :field="currentField"
+              @focus="$refs.areas.scrollIntoField(currentField)"
            />
-            <div>
-              <input
-                :id="currentField.uuid"
-                v-model="values[currentField.uuid]"
-                class="base-input !text-2xl w-full"
-                :required="currentField.required"
-                :pattern="currentField.validation?.pattern"
-                :oninvalid="currentField.validation?.message ? `this.setCustomValidity(${JSON.stringify(currentField.validation.message)})` : ''"
-                :oninput="currentField.validation?.message ? `this.setCustomValidity('')` : ''"
-                :placeholder="`${t('type_here')}...${currentField.required ? '' : ` (${t('optional')})`}`"
-                type="text"
-                :name="`values[${currentField.uuid}]`"
-                @focus="$refs.areas.scrollIntoField(currentField)"
-              >
-            </div>
          </div>
          <div v-else-if="currentField.type === 'date'">
            <div class="flex justify-between items-center w-full mb-2">
@@ -363,6 +343,7 @@ import InitialsStep from './initials_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
+import TextStep from './text_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2, IconCalendarCheck } from '@tabler/icons-vue'
 import { t } from './i18n'
@@ -378,6 +359,7 @@ export default {
    MultiSelectStep,
    IconInnerShadowTop,
    IconArrowsDiagonal,
+    TextStep,
    PhoneStep,
    IconCalendarCheck,
    IconArrowsDiagonalMinimize2,
@@ -31,6 +31,7 @@ const en = {
  verification_code_has_been_resent: 'Verification code has been re-sent via SMS',
  please_fill_all_required_fields: 'Please fill all required fields',
  set_today: 'Set Today',
+  toggle_multiline_text: 'Toggle Multiline Text',
  date: 'Date',
  email_has_been_sent: 'Email has been sent'
 }
@@ -69,6 +70,7 @@ const es = {
  please_fill_all_required_fields: 'Por favor, complete todos los campos obligatorios',
  set_today: 'Establecer Hoy',
  date: 'Fecha',
+  toggle_multiline_text: 'Alternar Texto Multilínea',
  email_has_been_sent: 'El correo electrónico ha sido enviado'
 }

@@ -106,6 +108,7 @@ const it = {
  please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
  set_today: 'Imposta Oggi',
  date: 'Data',
+  toggle_multiline_text: 'Attiva Testo Multilinea',
  email_has_been_sent: "L'email è stata inviata"
 }

@@ -143,6 +146,7 @@ const de = {
  please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
  set_today: 'Heute einstellen',
  date: 'Datum',
+  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
  email_has_been_sent: 'Die E-Mail wurde gesendet'
 }

@@ -180,6 +184,7 @@ const fr = {
  please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
  set_today: "Définir Aujourd'hui",
  date: 'Date',
+  toggle_multiline_text: 'Basculer le Texte Multiligne',
  email_has_been_sent: "L'email a été envoyé"
 }

@@ -217,6 +222,7 @@ const pl = {
  please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
  set_today: 'Ustaw Dziś',
  date: 'Data',
+  toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
  email_has_been_sent: 'E-mail został wysłany'
 }

@@ -254,6 +260,7 @@ const uk = {
  please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
  set_today: 'Задати Сьогодні',
  date: 'Дата',
+  toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
  email_has_been_sent: 'Електронний лист був відправлений'
 }

@@ -291,6 +298,7 @@ const cs = {
  please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
  set_today: 'Nastavit Dnes',
  date: 'Datum',
+  toggle_multiline_text: 'Přepnout Víceřádkový Text',
  email_has_been_sent: 'E-mail byl odeslán'
 }

@@ -328,6 +336,7 @@ const pt = {
  please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
  set_today: 'Definir Hoje',
  date: 'Data',
+  toggle_multiline_text: 'Alternar Texto Multilinha',
  email_has_been_sent: 'Email enviado'
 }

@@ -0,0 +1,111 @@
+<template>
+  <label
+    v-if="field.name"
+    :for="field.uuid"
+    class="label text-2xl mb-2"
+  >{{ field.name }}
+    <template v-if="!field.required">({{ t('optional') }})</template>
+  </label>
+  <div
+    v-else
+    class="py-1"
+  />
+  <div class="items-center flex">
+    <input
+      v-if="!isTextArea"
+      :id="field.uuid"
+      v-model="text"
+      class="base-input !text-2xl w-full !pr-11 -mr-10"
+      :required="field.required"
+      :pattern="field.validation?.pattern"
+      :oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
+      :oninput="field.validation?.message ? `this.setCustomValidity('')` : ''"
+      :placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
+      type="text"
+      :name="`values[${field.uuid}]`"
+      @focus="$emit('focus')"
+    >
+    <textarea
+      v-if="isTextArea"
+      :id="field.uuid"
+      ref="textarea"
+      v-model="text"
+      class="base-textarea !text-2xl w-full"
+      :placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
+      :required="field.required"
+      :name="`values[${field.uuid}]`"
+      @input="resizeTextarea"
+      @focus="$emit('focus')"
+    />
+    <div
+      v-if="!isTextArea"
+      class="tooltip"
+      :data-tip="t('toggle_multiline_text')"
+    >
+      <a
+        href="#"
+        class="btn btn-ghost btn-circle btn-sm"
+        @click.prevent="toggleTextArea"
+      >
+        <IconAlignBoxLeftTop />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'TextStep',
+  components: {
+    IconAlignBoxLeftTop
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  data () {
+    return {
+      isTextArea: false
+    }
+  },
+  computed: {
+    text: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  },
+  methods: {
+    resizeTextarea () {
+      const textarea = this.$refs.textarea
+
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
+    },
+    toggleTextArea () {
+      this.isTextArea = true
+
+      this.$nextTick(() => {
+        this.$refs.textarea.focus()
+        this.$refs.textarea.setSelectionRange(this.$refs.textarea.value.length, this.$refs.textarea.value.length)
+
+        this.resizeTextarea()
+      })
+    }
+  }
+}
+</script>