Merge pull request #30701 from janesser/master

@types/vuelidate Fixing dynamic validation schema and  typing.

types/vuelidate/vue.d.ts

@@ -5,20 +5,18 @@ import { ValidationRule } from './lib/validators'
 import { Validation } from './vuelidate'
 
 declare module 'vue/types/vue' {
-    type ValidationProperties<V extends Vue> = {
-        [P in keyof V]?: Validation
+    type ValidationProperties<V> = {
+        [P in keyof V]?: Validation & ValidationProperties<V[P]>
     }
 
-    interface ValidationGroups<V extends Vue> {
-        [groupName: string]: ValidationProperties<V>
+    interface ValidationGroups {
+        [groupName: string]: Validation & ValidationProperties<any>
     }
 
     interface Vue {
-        $v: ValidationProperties<this> & ValidationGroups<this> & Validation
+        $v: ValidationProperties<this> & ValidationGroups & Validation
 
         delayTouch(v: Validation): void
-
-        validations(): any // unknown
     }
 }
 
@@ -35,11 +33,12 @@ declare module 'vue/types/options' {
     type GroupDecl = string[]
     type AsyncDecl = (...args: any[]) => boolean | Promise<boolean>
     type NestedDecl = RuleDecl
+    type DynamicDecl = () => RuleDecl
     interface RuleDecl {
         [rule: string]: ValidationDecl | GroupDecl | AsyncDecl | NestedDecl
     }
 
     interface ComponentOptions<V extends Vue> {
-        validations?: RuleDecl
+        validations?: RuleDecl | DynamicDecl
     }
 }

types/vuelidate/vuelidate-tests.ts

@@ -117,19 +117,23 @@ export class ValidComponent extends Vue {
     myField = ''
 
     touchMap = new WeakMap()
-    delayTouch($v: Validation) {
-        $v.$reset()
-        if (this.touchMap.has($v)) {
-            clearTimeout(this.touchMap.get($v))
+    delayTouch(v: Validation) {
+        v.$reset()
+        if (this.touchMap.has(v)) {
+            clearTimeout(this.touchMap.get(v))
         }
-        this.touchMap.set($v, setTimeout($v.$touch, 1000))
+        this.touchMap.set(v, setTimeout(v.$touch, 1000))
     }
 
     accessValidatorParams() {
-        console.log(this.$v.$params.username)
-        if (this.$v.username) {
-            console.log(this.$v.username.$params)
+        console.log(this.$v.$params.form)
+
+        if (this.$v.form) {
+            console.log(this.$v.form.$params)
+            console.log(this.$v.form.$params.nestedA)
+            console.log(this.$v.form.nestedA)
         }
+        console.log(this.$v.validationGroup.$params)
     }
 
     accessGroups() {
@@ -141,25 +145,22 @@ export class ValidComponent extends Vue {
     }
 
     hasDescription = false
-    validations() {
-        if (!this.hasDescription) {
-            return {
-                name: {
-                    required
-                }
-            }
-        } else {
-            return {
-                name: {
-                    required
-                },
-                description: {
-                    required
-                }
-            }
-        }
-    }
+
     get isRepoValid() {
         return !this.$v.$invalid
     }
 }
+
+@Component({
+    validations() {
+        const self = this as Valid2Component // assert
+        return self.myToggle
+            ? { myField1: required, myField2: contains('maybe') }
+            : { myField1: contains('maybe'), myField2: required }
+    }
+})
+export class Valid2Component extends Vue {
+    myToggle = false
+    myField1 = ''
+    myField2 = ''
+}