Feat: add validation

[pikax]

Heavily inspired by https://github.com/vuelidate/vuelidate

Simple validation composable, with full types

Example:

<template>
  <div class="about">
    <h1>Form validation</h1>
    <form @submit="onSubmit">
      <input v-model="form.firstName.$value.value" placeholder="firstName" />
      <input v-model="form.lastName.$value.value" placeholder="lastName" />
      <input v-model="form.password.$value.value" placeholder="password" />
      <input v-model="form.samePassword.$value.value" placeholder="password2" />
      <p
        v-if="form.samePassword.$dirty.value && form.samePassword.match.$invalid.value "
      >{{form.samePassword.match.$message.value}}</p>
    </form>
    {{form}}
  </div>
</template>

<script>
import { createComponent, ref, reactive } from "@vue/composition-api";
import { useValidation } from "vue-composable";

const required = x => !!x;

export default createComponent({
  setup() {
    const name = ref("pikax");
    const surname = ref("stuff");
    const password = ref("123456");

    const form = useValidation({
      firstName: {
        $value: name,
        required
      },
      lastName: {
        $value: surname,
        required
      },
      password: {
        $value: password,
        required: {
          $validator: required,
          $message: ref("password is required")
        }
      },
      samePassword: {
        $value: ref(""),

        match: {
          $validator(x) {
            return x === password.value;
          },
          $message: "Password don't match"
        }
      }
    });

    const onSubmit = () => {
      alert("submit form");
    };

    return {
      onSubmit,
      form
    };
  }
});
</script>

form object without ref.value

{
  "firstName": {
    "$value": "pikax",
    "$dirty": false,
    "required": {
      "$pending": false,
      "$error": {},
      "$promise": {
      },
      "$invalid": false,
      "$message": "",
      "$value": "pikax"
    },
    "$errors": [],
    "$anyInvalid": false
  },
  "lastName": {
    "$value": "stuff",
    "$dirty": false,
    "required": {
      "$pending": false,
      "$error": {},
      "$promise": {},
      "$invalid": false,
      "$message": "",
      "$value": "stuff"
    },
    "$errors": [],
    "$anyInvalid": false
  },
  "password": {
    "$value": "123456",
    "$dirty": false,
    "required": {
      "$pending": false,
      "$error": {},
      "$promise": {},
      "$invalid": false,
      "$message": "password is required",
      "$value": "123456"
    },
    "$errors": [],
    "$anyInvalid": false
  },
  "samePassword": {
    "$value": "",
    "$dirty": false,
    "match": {
      "$pending": false,
      "$error": {},
      "$promise": {},
      "$invalid": true,
      "$message": "Password don't match",
      "$value": ""
    },
    "$errors": [],
    "$anyInvalid": true
  },
  "$errors": {
    "value": [
      [],
      [],
      [],
      []
    ]
  },
  "$anyInvalid": {
    "value": true
  },
  "$anyDirty": {
    "value": false
  }
}