⭐ new: manually touch with API [ci skip]

src/components/validity/lifecycles.js

@@ -90,14 +90,18 @@ export default function (Vue: GlobalAPI): Object {
     this._unwatchValidationRawResults()
 
     this._elementable.unlistenInputableEvent()
-    this._elementable.unlistenToucheableEvent()
+    if (this.autotouch === 'on') {
+      this._elementable.unlistenToucheableEvent()
+    }
     this._elementable = null
   }
 
   function mounted (): void {
     this._elementable = createValidityElement(this, this._vnode)
     if (this._elementable) {
-      this._elementable.listenToucheableEvent()
+      if (this.autotouch === 'on') {
+        this._elementable.listenToucheableEvent()
+      }
       this._elementable.listenInputableEvent()
     } else {
       // TODO: should be warn

src/components/validity/methods-state.js

@@ -128,6 +128,10 @@ export default function (Vue: GlobalAPI): Object {
     delete this._unwatchResults
   }
 
+  function touch (): void {
+    this.willUpdateTouched()
+  }
+
   return {
     getValue,
     checkModified,
@@ -139,6 +143,7 @@ export default function (Vue: GlobalAPI): Object {
     reset,
     _walkValid,
     _watchValidationRawResults,
-    _unwatchValidationRawResults
+    _unwatchValidationRawResults,
+    touch
   }
 }

src/components/validity/props.js

@@ -15,6 +15,12 @@ export default {
   multiple: {
     type: Boolean
   },
+  autotouch: {
+    type: String,
+    default: () => {
+      return 'on'
+    }
+  },
   classes: {
     type: Object,
     default: () => {

test/unit/components/validity-functional.test.js

@@ -1063,4 +1063,41 @@ describe('validity functional component', () => {
       }).then(done)
     })
   })
+
+  describe('manually touch', () => {
+    it('should be work', done => {
+      const vm = new Vue({
+        components,
+        render (h) {
+          return h('div', [
+            h('validity', {
+              ref: 'validity',
+              props: {
+                field: 'field1',
+                autotouch: 'off',
+                validators: { required: true }
+              }
+            }, [
+              h('input', { ref: 'textbox', attrs: { type: 'text' }})
+            ])
+          ])
+        }
+      }).$mount(el)
+      const { validity, textbox } = vm.$refs
+      let result
+      waitForUpdate(() => {
+        triggerEvent(textbox, 'focusout')
+      }).thenWaitFor(1).then(() => {
+        result = validity.result
+        assert(result.touched === false)
+        assert(result.untouched === true)
+        // manually touch with API
+        validity.touch()
+      }).thenWaitFor(1).then(() => {
+        result = validity.result
+        assert(result.touched === true)
+        assert(result.untouched === false)
+      }).then(done)
+    })
+  })
 })