update validate-directive

Author: latiosthinh

pnpm-lock.yaml

@@ -1,27 +1,30 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue';
 import HelloWorld2 from './components/HelloWorld2.vue'
 import HelloWorld3 from './components/HelloWorld3.vue'
+import { useErrors } from "@/plugins/store";
+
+import { ref } from 'vue';
+
+const { errors } = useErrors()
+const test = ref("")
+
+const checkError = () => {
+  console.log(errors.value)
+}
 </script>
 
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <!-- <HelloWorld msg="Form 1" /> -->
-      <!-- <HelloWorld2 msg="Form 2" /> -->
+      <HelloWorld msg="Form 1" />
+      <HelloWorld2 msg="Form 2" />
       <HelloWorld3 msg="Form 3" />
-
-      <nav ref="nav">
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
+      
     </div>
   </header>
-
-  <RouterView />
 </template>
 
 <style scoped>

src/App.vue

@@ -15,7 +15,7 @@ export default {
     const email = ref("")
 
     const checkError = () => {
-      console.log(errors.value)
+      
     }
 
     return {

src/components/HelloWorld.vue

@@ -1,29 +1,29 @@
-<script>
+<script setup lang="ts">
 import { useErrors } from "@/plugins/store";
-import { ref } from 'vue';
+import { ref, getCurrentInstance, getCurrentScope } from 'vue';
 
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: {
-      type: String,
-      required: true
-    }
-  },
-  setup() {
-    const { errors } = useErrors()
-    const userEmail = ref("")
+const props = defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
 
-    const checkError = () => {
-      console.log(errors.value)
-    }
+const self = getCurrentInstance()?.appContext.config.globalProperties
+const { errors } = useErrors()
+const userEmail = ref("")
 
-    return {
-      userEmail,
-      errors,
-      checkError
+const checkError = () => {
+  self?.$validator.validateAll().then(({isValid}: any) => {
+    if (isValid) {
+      console.log('submitted')
+      return;
     }
-  }
+
+    console.log('error - cannot submit')
+  }).catch((err: any) => {
+    console.log(err)
+  })
 }
 </script>
 

src/components/HelloWorld3.vue

@@ -1,22 +1,41 @@
-import { ref } from 'vue'
+import { ref, type VNode } from 'vue'
+
+type ErrorObject = {
+  scopeID: string
+  fields: string[]
+} 
 
 const errors = ref<Set<string>>(new Set())
+const currentErrorsScope = ref<ErrorObject | null>(null)
 const ConditionSplitChar = ':'
 
 export const useErrors = () => {
-  const addError = (el: HTMLInputElement, rule: string = '') => {
-    const errorValue = rule ? `${el.name}${ConditionSplitChar}${rule}` : `${el.name}`
+  const addError = (vnode: VNode, rule: string = '') => {
+    const errorValue = rule ? `${vnode.props?.name}${ConditionSplitChar}${rule}` : `${vnode.props?.name}`
     errors.value.add(errorValue)
+    currentErrorsScope.value = {
+      scopeID: vnode.scopeId || '',
+      fields: [...currentErrorsScope.value?.fields || [], vnode.props?.name || '']
+    }
   }
 
-  const delError = (el: HTMLInputElement, rule: string = '') => {
-    const errorValue = rule ? `${el.name}${ConditionSplitChar}${rule}` : `${el.name}`
+  const delError = (vnode: VNode, rule: string = '') => {
+    const errorValue = rule ? `${vnode.props?.name}${ConditionSplitChar}${rule}` : `${vnode.props?.name}`
     errors.value.delete(errorValue)
+    if (!currentErrorsScope.value?.fields.length) {
+      currentErrorsScope.value = null
+      return;
+    }
+
+    currentErrorsScope.value?.fields.splice(currentErrorsScope.value.fields.indexOf(vnode.props?.name || ''), 1)
   }
 
-  const cleanupErrors = () => {
-    errors.value.clear()
+  const cleanupErrors = (vnode: VNode) => {
+    currentErrorsScope.value = null
+    errors.value.forEach(() => {
+      delError(vnode)
+    })
   }
 
-  return { errors, addError, delError, cleanupErrors }
+  return { errors, currentErrorsScope, addError, delError, cleanupErrors }
 }

src/plugins/store.ts

@@ -22,7 +22,7 @@ export const validRegex = (rules: string[], el: HTMLInputElement, regex: RegExp)
 export const validLength = (rules: string[], el: HTMLInputElement, value: unknown) => {
   if (!rules.includes(ValidateTypes.length)) return true
   if (rules.includes(ValidateTypes.length) && !value) return true
-  return rules.includes(ValidateTypes.length) && el.value.length === value
+  return rules.includes(ValidateTypes.length) && el.value.length === parseInt(value as string)
 }
 
 export const validMinLength = (rules: string[], el: HTMLInputElement, value: unknown) => {

src/plugins/utils.ts

@@ -1,5 +1,5 @@
 const ValidateTypes = {
-  firstMountedRequired: 'firstMountedRequired',
+  onMountedRequired: 'onMountedRequired',
   required: 'required',
   email: 'email',
   regex: 'regex',

src/plugins/validate-type.ts

@@ -1,4 +1,4 @@
-import { type App } from 'vue'
+import { getCurrentInstance, type App, type VNode } from 'vue'
 import { useErrors } from './store'
 import { validEmail, validLength, validRegex, validRequired } from './utils'
 import ValidateTypes from './validate-type'
@@ -19,7 +19,7 @@ declare global {
 
 export default {
   install: (app: App) => {
-    const { addError, delError, cleanupErrors } = useErrors()
+    const { errors, currentErrorsScope, addError, delError, cleanupErrors } = useErrors()
 
     app.config.globalProperties.$formMaxLength = {
       email: 64,
@@ -35,87 +35,86 @@ export default {
       password: 128
     }
 
+    app.config.globalProperties.$validator = {
+      validateAll: () => {
+        return new Promise((resolve, reject) => {
+          const result = !!currentErrorsScope.value
+          resolve({
+            isValid: !result
+          })
+        })
+      },
+    }
+
     app.directive('validate', {
       deep: true,
-      mounted: (el: HTMLInputElement, binding) => {
-        const isStringSchema = binding.value instanceof String
+      mounted: (el: HTMLInputElement, binding, vnode: VNode) => {
+        const isStringSchema = typeof binding.value === 'string'
+        const stringRules = isStringSchema ? binding.value.split(SplitChar) : []
         const schema = isStringSchema
-          ? binding.value.split(SplitChar).map((rule: string) => {
+          ? stringRules.map((rule: string) =>
               rule.includes(':') ? rule.split(':') : [rule, true]
-            })
+            )
           : Object.entries(binding.value)
 
-        binding.value.split(SplitChar).map((rule: string) => {
-          rule.includes(':') ? console.log(rule.split(':')) : console.log([rule, true])
-        })
-
-        console.log(schema)
-
-        const actions = el.dataset.vvValidateOn?.split(SplitChar)
-        const bubble = binding.modifiers?.bubble
-
         // prevent immediate submission
         schema.map(([rule, value]: [string, unknown]) => {
           if (rule !== ValidateTypes.required) return
-          value && addError(el, ValidateTypes.firstMountedRequired)
+          value && addError(vnode, ValidateTypes.onMountedRequired)
         })
 
-        const handler = (el: HTMLInputElement) => {
-          delError(el, ValidateTypes.firstMountedRequired)
+        const handler = () => {
+          delError(vnode, ValidateTypes.onMountedRequired)
           const rules = schema.map((rule: [string, unknown]) => rule[0])
 
-          bubble && binding.value(el)
-
           schema.map(([, value]: [string, unknown]) => {
             const satisfyRequired = validRequired(rules, el, !!value)
-            satisfyRequired && delError(el, ValidateTypes.required)
-            !satisfyRequired && addError(el, ValidateTypes.required)
+            satisfyRequired && delError(vnode, ValidateTypes.required)
+            !satisfyRequired && addError(vnode, ValidateTypes.required)
 
             const satisfyEmail = validEmail(rules, el, value as boolean)
-            satisfyEmail && delError(el, ValidateTypes.email)
-            !satisfyEmail && addError(el, ValidateTypes.email)
+            satisfyEmail && delError(vnode, ValidateTypes.email)
+            !satisfyEmail && addError(vnode, ValidateTypes.email)
 
             const satisfyRegex = validRegex(rules, el, value as RegExp)
-            satisfyRegex && delError(el, ValidateTypes.regex)
-            !satisfyRegex && addError(el, ValidateTypes.regex)
+            satisfyRegex && delError(vnode, ValidateTypes.regex)
+            !satisfyRegex && addError(vnode, ValidateTypes.regex)
 
             const satisfyLength = validLength(rules, el, value)
-            console.log(value)
-            satisfyLength && delError(el, ValidateTypes.length)
-            !satisfyLength && addError(el, ValidateTypes.length)
+            satisfyLength && delError(vnode, ValidateTypes.length)
+            !satisfyLength && addError(vnode, ValidateTypes.length)
 
             if (!satisfyRequired || !satisfyEmail || !satisfyRegex || !satisfyLength) {
-              addError(el)
+              addError(vnode)
             } else {
-              delError(el)
+              delError(vnode)
             }
           })
         }
 
         el[UniquePropertyID] = handler
 
+        const actions = el.dataset.vvValidateOn?.split(SplitChar)
         actions?.forEach((action) => {
-          el.addEventListener(action, () => handler(el))
+          el.addEventListener(action, () => handler())
         })
 
-        const form = el.closest('form') as HTMLFormElement
-        if (![...form.elements].includes(el)) return
-
+        const form = el.closest(`form[${vnode.scopeId}]`) as HTMLFormElement
         form?.addEventListener('submit', (e) => {
           e.preventDefault()
-          handler(el)
+          handler()
         })
       },
-      unmounted: (el: HTMLInputElement) => {
+      unmounted: (el: HTMLInputElement, _binding, vnode: VNode) => {
         const actions = el.dataset.vvValidateOn?.split(SplitChar)
         actions?.forEach((action) => {
           el.removeEventListener(action, () => el[UniquePropertyID])
         })
 
         // clear cache handler
         el[UniquePropertyID] = () => {}
-        cleanupErrors()
-      }
+        cleanupErrors(vnode)
+      },
     })
   }
 }