feat: improve partner contact (nuxt#1952)

* feat(Partner): improve contact form

* chore(env): add missing prop in env example

* feat(TextArea): update

.env.example

@@ -1 +1,2 @@
 RECAPTCHA_SITE_KEY="6LdSIyAcAAAAABoVED_NebKHYWIMFJjVNVH2Jbl3"
+API_URL=https://api.nuxtjs.org

components/atoms/AppInput.vue

@@ -1,12 +1,12 @@
 <template>
-  <Component
-    :is="inputType"
+  <input
     :value="value"
     :class="[
       baseClass,
       appearanceClass,
       { 'pointer-events-none opacity-50': disabled, 'ring-2 ring-primary': focusVisible }
     ]"
+    :required="required"
     @input="$emit('input', $event.target.value)"
     @focus="handleFocus(true)"
     @blur="handleFocus(false)"
@@ -23,6 +23,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    required: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -37,13 +41,6 @@ export default defineComponent({
     baseClass: {
       type: String,
       default: 'p-2 w-full rounded-md appearance-none'
-    },
-    inputType: {
-      type: String,
-      default: 'input',
-      validator(value) {
-        return ['input', 'textarea'].includes(value)
-      }
     }
   },
   setup(props) {

components/atoms/AppTextarea.vue

@@ -0,0 +1,135 @@
+<template>
+  <textarea
+    ref="textarea"
+    :value="value"
+    :rows="rows"
+    :required="required"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    :class="textareaClass"
+    @input="updateValue($event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    rows: {
+      type: [String, Number],
+      default: 3
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return ['default', 'transparent'].includes(value)
+      }
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    baseClass: {
+      type: String,
+      default: 'p-2 w-full rounded-md appearance-none'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    noResize: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    sizeClass() {
+      return {
+        xxs: 'text-xs',
+        xs: 'text-xs',
+        sm: 'text-sm leading-4',
+        md: 'text-sm',
+        lg: 'text-base',
+        xl: 'text-base'
+      }[this.size]
+    },
+    paddingClass() {
+      return {
+        xxs: 'px-1 py-0.5',
+        xs: 'px-2.5 py-1.5',
+        sm: 'px-3 py-2',
+        md: 'px-4 py-2',
+        lg: 'px-4 py-2',
+        xl: 'px-6 py-3'
+      }[this.size]
+    },
+    appearanceClass() {
+      return {
+        default:
+          'light:text-gray-500 dark:text-white dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark focus:outline-none light:focus:border-gray-400 dark:focus:border-secondary-light',
+        transparent: 'bg-transparent border-none outline-none'
+      }[this.appearance]
+    },
+    resizeClass() {
+      return {
+        true: 'resize-none',
+        false: ''
+      }[this.noResize]
+    },
+    textareaClass() {
+      return [
+        this.baseClass,
+        this.customClass,
+        this.sizeClass,
+        this.paddingClass,
+        this.resizeClass,
+        this.appearanceClass
+      ].join(' ')
+    }
+  },
+  watch: {
+    value() {
+      this.resizeTextarea()
+    }
+  },
+  mounted() {
+    this.resizeTextarea()
+  },
+  methods: {
+    resizeTextarea() {
+      this.$nextTick(() => {
+        const textarea = this.$refs.textarea
+        textarea.style.height = 'auto'
+        textarea.style.height = `${textarea.scrollHeight}px`
+      })
+    },
+    updateValue(value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>

components/templates/Partner.vue

@@ -94,23 +94,23 @@
             >
               <div>
                 <label for="firstName" class="block">{{ $t('sustainability.mvp_detail.first_name') }}</label>
-                <AppInput id="firstName" v-model="form.first_name" type="text" />
+                <AppInput id="firstName" v-model="form.first_name" type="text" required />
               </div>
               <div>
                 <label for="lastName" class="block">{{ $t('sustainability.mvp_detail.last_name') }}</label>
-                <AppInput id="lastName" v-model="form.last_name" type="text" />
+                <AppInput id="lastName" v-model="form.last_name" type="text" required />
               </div>
               <div>
                 <label for="companyName" class="block">{{ $t('sustainability.mvp_detail.company_name') }}</label>
-                <AppInput id="companyName" v-model="form.company_name" type="text" />
+                <AppInput id="companyName" v-model="form.company_name" type="text" required />
               </div>
               <div>
                 <label for="email" class="block">{{ $t('sustainability.mvp_detail.email') }}</label>
-                <AppInput id="email" v-model="form.email" type="text" />
+                <AppInput id="email" v-model="form.email" type="text" required />
               </div>
               <div class="lg:col-span-full">
                 <label for="message" class="block">{{ $t('sustainability.mvp_detail.message') }}</label>
-                <AppInput id="message" v-model="form.message" input-type="textarea" rows="3" />
+                <AppTextarea id="message" v-model="form.message" rows="5" required no-resize />
               </div>
               <div class="lg:col-span-full flex justify-end">
                 <AppButton submit>{{ $t('sustainability.mvp_detail.submit') }}</AppButton>
@@ -262,7 +262,7 @@ export default defineComponent({
     @apply bg-cloud-lightest dark:bg-sky-dark px-3;
   }
   & textarea {
-    @apply resize-none bg-cloud-lightest dark:bg-sky-dark px-3 py-2;
+    @apply bg-cloud-lightest dark:bg-sky-dark text-base px-3;
   }
   & button {
     @apply border-2 border-transparent focus:border-black;

plugins/partner.js

@@ -48,6 +48,12 @@ export function usePartnerContact(partnersEmail) {
         setTimeout(() => {
           result.value = null
         }, 4000)
+
+        form.first_name = ''
+        form.last_name = ''
+        form.company_name = ''
+        form.email = ''
+        form.message = ''
       })
       .catch(() => {
         result.value = 'failure'