Update demo

Author: ktquez

demo/src/App.vue

@@ -17,6 +17,15 @@
       <h2>Essential Links</h2>
       <nav>
         <ul>
+          <li>
+            <router-link
+              to="login"
+              title="Go to example login page"
+              aria-label="Go to example login page"
+            >
+              Login
+            </router-link>
+          </li>
           <li>
             <router-link
               to="/posts/1"

demo/src/main.js

@@ -4,8 +4,10 @@ import VueAnnouncer from '../vue-announcer'
 import App from './App.vue'
 import router from './router.js'
 
+import spell from './plugins/announcer/spell'
+
 Vue.use(VueHead)
-Vue.use(VueAnnouncer, {}, router)
+Vue.use(VueAnnouncer, { plugins: [spell] }, router)
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

demo/src/pages/Login.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="login-container">
+    <h2>Login Page</h2>
+
+    <form
+      id="form-login"
+      name="form-login"
+    >
+      <div>
+        <label for="email">
+          <span style="display: block;text-align:left;">Email</span>
+          <input
+            id="email"
+            v-model="email"
+            name="email"
+            type="email"
+          >
+        </label>
+      </div>
+      <div>
+        <label for="password">
+          <span style="display: block;text-align:left;">Password</span>
+          <input
+            id="password"
+            v-model="password"
+            name="password"
+            type="password"
+          >
+        </label>
+        <button
+          type="button"
+          @click="$announcer.plugins.spell(password)"
+        >
+          Spell the password
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Login',
+
+  data: () => ({
+    email: null,
+    password: null,
+    spelling: false
+  }),
+
+  watch: {
+    password (val) {
+      if (this.spelling) this.$announcer.assertive(val.substr(-1, 1))
+    }
+  }
+}
+</script>
+
+<style>
+.login-container {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+#form-login > div {
+  margin-bottom: 20px;
+}
+
+#form-login label > span {
+  display: block;
+  text-align:left;
+  margin-bottom: 6px;
+}
+
+#form-login input {
+  width: 100%;
+  padding: 10px;
+}
+
+#form-login button {
+  padding: 4px;
+  margin-top: 10px;
+}
+</style>

demo/src/router.js

@@ -2,10 +2,10 @@ import About from '@/pages/About'
 import Contact from '@/pages/Contact'
 import Home from '@/pages/Home'
 import Post from '@/pages/Post'
+import Login from '@/pages/Login'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-
 Vue.use(VueRouter)
 
 const router = new VueRouter({
@@ -21,6 +21,11 @@ const router = new VueRouter({
         }
       }
     },
+    {
+      name: 'login',
+      path: '/login',
+      component: Login
+    },
     {
       name: 'about',
       path: '/about',

docs/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$contentMaxWidth = 960px