feat: vuelidate

package.json

@@ -75,6 +75,8 @@
     "@vue/compiler-sfc": "^3.0.11",
     "@vuedx/typecheck": "^0.6.3",
     "@vuedx/typescript-plugin-vue": "^0.6.3",
+    "@vuelidate/core": "^2.0.0-alpha.18",
+    "@vuelidate/validators": "^2.0.0-alpha.15",
     "@vueuse/integrations": "^4.11.0",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",

src/components/molecules/VFormItem/vformItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <ElFormItem
+    class="v-form-item"
+    :class="{'-error': error}"
+  >
+    <slot />
+
+    <transition name="el-zoom-in-top">
+      <div
+        v-if="error"
+        class="el-form-item__error"
+      >
+        <slot name="error" />
+      </div>
+    </transition>
+  </ElFormItem>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VFormItem',
+
+  props: {
+    error: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.v-form-item {
+  &.-error {
+    /* stylelint-disable-next-line */
+    .el-input__inner,
+    .el-textarea__inner {
+      border: 1px solid theme('colors.red.500');
+    }
+  }
+
+  /* stylelint-disable-next-line */
+  &__error {
+    color: theme('colors.red.500');
+  }
+}
+</style>

src/components/molecules/index.ts

@@ -0,0 +1,3 @@
+import VFormItem from './VFormItem/vformItem.vue'
+
+export { VFormItem }

src/modules/Home/views/home.vue

@@ -7,24 +7,50 @@
     <ElButton @click="toggleLocales">
       👋
     </ElButton>
+
+    <ElForm>
+      {{ v$.name.$error }}
+      <VFormItem :error="v$.name.$invalid">
+        <ElInput
+          v-model="form.name"
+          placeholder="Name"
+        />
+
+        <template #error>
+          <div v-if="v$.name.required.$invalid">
+            Name field is required
+          </div>
+        </template>
+      </VFormItem>
+    </ElForm>
   </div>
 </template>
 
 <script lang="ts">
 import {
   defineComponent,
+  reactive,
+  computed,
   onMounted
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
 
 import { SET_TITLE } from '@/stores/Common/commonTypes'
 
+import { VFormItem } from 'molecules'
+
 export default defineComponent({
   name: 'Home',
-
+  components: { VFormItem },
   setup () {
-    const { t, availableLocales, locale } = useI18n()
+    const {
+      t,
+      availableLocales,
+      locale
+    } = useI18n()
 
     const store = useStore()
     const common = store.getters.common
@@ -41,9 +67,21 @@ export default defineComponent({
       console.log(import.meta.env.VITE_APP_ENV)
     })
 
+    const form = reactive({
+      name: ''
+    })
+
+    const formRules = computed(() => ({
+      name: { required }
+    }))
+
+    const v$ = useVuelidate(formRules, form)
+
     return {
       t,
-      toggleLocales
+      toggleLocales,
+      v$,
+      form
     }
   }
 })