[ADD] demo to docs

docs/components/Demo.vue

@@ -0,0 +1,96 @@
+<template>
+  <form @submit.prevent="checkForm">
+    <label class="input" for="username" :class="{error: !!errors.username}">
+      Username:
+      <span>{{ errors.username }}</span>
+      <input
+        id="username" v-model="fields.username"
+        autocomplete="username" type="text"
+        @input.capture="onInput"
+      >
+    </label>
+
+    <label class="input" for="password" :class="{error: !!errors.password}">
+      Password:
+      <span>{{ errors.password }}</span>
+      <input
+        id="password" v-model="fields.password"
+        autocomplete="new-password" type="password"
+        @input.capture="onInput"
+      >
+    </label>
+
+    <input type="submit" value="Validate">
+  </form>
+</template>
+
+<script>
+import { signIn } from '../validations/auth.js';
+import Vuito from '@vuito/vue';
+
+export default {
+  mixins: [Vuito(signIn)],
+  methods: {
+    checkForm() {
+      signIn.check(this.fields)
+        .then(() => alert('OK!'))
+        .catch(alert)
+    }
+  }
+}
+</script>
+
+<style>
+form {
+  width: 100%;
+  margin: auto;
+  padding: 30px;
+  display: flex;
+  max-width: 500px;
+  flex-direction: column;
+  justify-content: center;
+}
+
+label {
+  display: flex;
+  padding: 30px 0;
+  font-weight: 600;
+  flex-direction: column;
+}
+
+label > span {
+  font-size: .7em;
+  font-weight: normal;
+  color: crimson;
+}
+
+input {
+  color: white;
+  outline: none;
+  padding: 10px;
+  font-size: 1em;
+  margin: 10px 0;
+  border-radius: 5px;
+  transition: border .2s;
+  background: rgba(0, 0, 0, 0.125);
+  border: 2px solid rgba(161, 161, 161, 0.259);
+}
+
+input:focus {
+  border: 2px solid #9a67ea;
+}
+
+label.error > input {
+  border: 2px solid #dc143c;
+}
+
+input[type="submit"] {
+  cursor: pointer;
+  width: 120px;
+  margin: auto;
+}
+
+input[type="submit"]:hover {
+  border: 2px solid #9a67ea;
+}
+</style>

docs/content/en/demo.md

@@ -0,0 +1,76 @@
+---
+title: Demo
+position: 11
+---
+
+## Form Validation
+
+<Demo></Demo>
+
+
+## Code of the form
+
+```vue[~/components/Demo.vue]
+<template>
+  <form @submit.prevent="checkForm">
+    <h2>Vuito Form Validation</h2>
+
+    <label class="input" for="username" :class="{error: !!errors.username}">
+      Username:
+      <span>{{ errors.username }}</span>
+      <input
+        id="username" v-model="fields.username"
+        autocomplete="username" type="text"
+        @input.capture="onInput"
+      >
+    </label>
+
+    <label class="input" for="password" :class="{error: !!errors.password}">
+      Password:
+      <span>{{ errors.password }}</span>
+      <input
+        id="password" v-model="fields.password"
+        autocomplete="new-password" type="password"
+        @input.capture="onInput"
+      >
+    </label>
+
+    <input type="submit" value="Validate">
+  </form>
+</template>
+
+<script>
+import { signIn } from '../validations/auth.js';
+import Vuito from '@vuito/vue';
+
+export default {
+  mixins: [Vuito(signIn)],
+  methods: {
+    checkForm() {
+      signIn.check(this.fields)
+        .then(() => alert('OK!'))
+        .catch(alert)
+    }
+  }
+}
+</script>
+```
+
+
+## Validation template
+
+```javascript[~/validations/auth.js]
+import { Template, required, minLength, maxLength } from 'vuito';
+
+export const signIn = new Template({
+  username: [
+    { test: required, message: 'Please enter a username.' },
+    { test: minLength(3), message: 'Username is too short.' },
+    { test: maxLength(20), message: 'Username is too big.' },
+  ],
+  password: [
+    { test: required, message: 'Please enter a password.' },
+    { test: minLength(12), message: 'Password is too short.' },
+  ],
+});
+```

docs/content/en/index.md

@@ -14,7 +14,9 @@ features:
 
 Simple, lightweight, isomorphic, template-based validation library.
 
-If you want to play with the library, you can do so [right here](https://runkit.com/mathix420/vuito-example).
+If you want to see a demo of this library, go to [the demo section](/demo).
+
+And if you want to play with the library, you can do so [right here](https://runkit.com/mathix420/vuito-example).
 
 ## Installation
 

docs/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.10.1",
-    "nuxt": "^2.15.8"
+    "@vuito/vue": "^1.2.0",
+    "nuxt": "^2.15.8",
+    "vuito": "^1.2.1"
   }
 }

docs/validations/auth.js

@@ -0,0 +1,13 @@
+import { Template, required, minLength, maxLength } from 'vuito';
+
+export const signIn = new Template({
+  username: [
+    { test: required, message: 'Please enter a username.' },
+    { test: minLength(3), message: 'Username is too short.' },
+    { test: maxLength(20), message: 'Username is too big.' },
+  ],
+  password: [
+    { test: required, message: 'Please enter a password.' },
+    { test: minLength(12), message: 'Password is too short.' },
+  ],
+});