diff --git a/composer.json b/composer.json
index 397b647..7097ac2 100644
--- a/composer.json
+++ b/composer.json
@@ -2,7 +2,7 @@
   "name": "ion2s/laratomics-workshop",
   "type": "library",
   "description": "Package to add laratomics powers to your Laravel application",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "authors": [
     {
diff --git a/public/css/app.css b/public/css/app.css
index 9244b87..5fb8e72 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -351,43 +351,47 @@ template {
 [hidden] {
   display: none;
 }
-/*
-Here we do define the variables that we are using across all pages of our project.
-We use the CSS variables to keep theming a possibility in the future.
-We also declare basically the same stuff as a SASS variable to be able to declare fallback
-solutions for the browsers that can't use CSS vars.
-
-this would then look like this
-
-.el {
-	background: var(--var, $varFallback);
-}
-
+/*
+Here we do define the variables that we are using across all pages of our project.
+We use the CSS variables to keep theming a possibility in the future.
+We also declare basically the same stuff as a SASS variable to be able to declare fallback
+solutions for the browsers that can't use CSS vars.
+
+this would then look like this
+
+.el {
+	background: var(--var, $varFallback);
+}
+
 */
 
 /* for layout*/
 
 /* for colors*/
 
-html {
+/* for animation timings*/
+
+:root {
   /* for colors*/
   --brandMain: #03314B;
-  --brandDark: #02273c;
+  --brandDark: #02273C;
   --brandCon: #FFF621;
   --positive: #10E2AB;
-  --alert: #FF7878;
+  --alert: #FF4F4F;
+  --warning: #FFB421;
+  --inactive: #B9C5C5;
   /* for layout*/
   --headerheight: 66px;
   --gap: 1rem;
 }
 
-/* 
-These are all our helpers that we might take from project to project. 
+/* 
+These are all our helpers that we might take from project to project. 
 */
 
-/* 
-These are the styles that we want to acces globally throughout the whoel project.
-Here you can find the Grid-Definitions for the whole layout for example.  
+/* 
+These are the styles that we want to acces globally throughout the whoel project.
+Here you can find the Grid-Definitions for the whole layout for example.  
 */
 
 *,
@@ -409,6 +413,12 @@ body {
   background: var(--brandMain, #03314B);
 }
 
+:focus {
+  outline-color: var(--positive, #10E2AB);
+  outline-style: dashed;
+  outline-width: 1px;
+}
+
 *::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -424,9 +434,9 @@ body {
   background-color: #001B22;
 }
 
-/* 
-This builds the basic structure of the viewport, 
-containing the header and the so called view, containing most of the UI. 
+/* 
+This builds the basic structure of the viewport, 
+containing the header and the so called view, containing most of the UI. 
 */
 
 .window {
@@ -434,7 +444,7 @@ containing the header and the so called view, containing most of the UI.
   height: 100vh;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: var(--headerheight) auto;
-  grid-template-areas: "header header header header"
 "main main main main";
+  grid-template-areas: "header header header header" "main main main main";
   overflow: hidden;
 }
 
@@ -450,21 +460,21 @@ containing the header and the so called view, containing most of the UI.
 @media (max-width: 599px) {
   .view,
   .view--inner {
-    grid-template-areas: "code code code code"
 "view view view view"
 "view view view view"
 "footer footer footer footer";
+    grid-template-areas: "code code code code" "view view view view" "view view view view" "footer footer footer footer";
   }
 }
 
 @media (min-width: 600px) {
   .view,
   .view--inner {
-    grid-template-areas: "code code code code"
 "view view view view"
 "view view view view"
 "footer footer footer footer";
+    grid-template-areas: "code code code code" "view view view view" "view view view view" "footer footer footer footer";
   }
 }
 
 @media (min-width: 1200px) {
   .view,
   .view--inner {
-    grid-template-areas: "code view view view"
 "code view view view"
 "code view view view"
 ".... footer footer footer";
+    grid-template-areas: "code view view view" "code view view view" "code view view view" ".... footer footer footer";
   }
 }
 
@@ -472,28 +482,21 @@ containing the header and the so called view, containing most of the UI.
   grid-area: code / code/ footer / footer;
 }
 
-.preview {
-  grid-area: view;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: auto;
-}
-
-.preview iframe {
-  width: 100%;
-}
-
 .footer {
   grid-area: footer;
 }
 
-/* 
-These are the styles that we want to acces globally throughout the whole project.
-Here you can find the definition & mixins for our transitions and animations. 
-These are the only ones that are allowed. 
+.u-hide {
+  display: none !important;
+}
+
+/* 
+These are the styles that we want to acces globally throughout the whole project.
+Here you can find the definition & mixins for our transitions and animations. 
+These are the only ones that are allowed. 
 */
 
-@-webkit-keyframes fadeIn {
+@-webkit-keyframes slideIn {
   0% {
     opacity: 0;
     -webkit-transform: scaleX(0.5) translateX(-1000px);
@@ -510,7 +513,7 @@ These are the only ones that are allowed.
   }
 }
 
-@keyframes fadeIn {
+@keyframes slideIn {
   0% {
     opacity: 0;
     -webkit-transform: scaleX(0.5) translateX(-1000px);
@@ -527,8 +530,64 @@ These are the only ones that are allowed.
   }
 }
 
-/* 
-These are the styles for all interactive elements that aren't buttons.
+@-webkit-keyframes dropIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.5) translateY(-1000px);
+            transform: scaleY(0.5) translateY(-1000px);
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1) translateY(0px);
+            transform: scaleY(1) translateY(0px);
+  }
+}
+
+@keyframes dropIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.5) translateY(-1000px);
+            transform: scaleY(0.5) translateY(-1000px);
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1) translateY(0px);
+            transform: scaleY(1) translateY(0px);
+  }
+}
+
+.a-slideIn {
+  -webkit-animation-name: slideIn;
+          animation-name: slideIn;
+  -webkit-animation-duration: 300ms;
+          animation-duration: 300ms;
+  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  -webkit-animation-iteration-count: 1;
+          animation-iteration-count: 1;
+}
+
+.a-dropIn {
+  -webkit-animation-name: dropIn;
+          animation-name: dropIn;
+  -webkit-animation-duration: 300ms;
+          animation-duration: 300ms;
+  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  -webkit-animation-iteration-count: 1;
+          animation-iteration-count: 1;
+}
+
+/* 
+These are the styles for all interactive elements that aren't buttons.
 */
 
 a {
@@ -540,8 +599,8 @@ a {
   padding: 0.5rem 1rem;
 }
 
-/* 
-These are the styles for every interactive element that is clickable but no link.
+/* 
+These are the styles for every interactive element that is clickable but no link.
 */
 
 .btn--primary,
@@ -626,9 +685,70 @@ These are the styles for every interactive element that is clickable but no link
   color: var(--brandMain, #03314B);
 }
 
-/* 
-These are the styles for the form elements like inputs, fieldsets & labels etc.
-More special Forms might be a component. 
+.toggle-wrap {
+  width: 1rem;
+  height: 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: 2px solid white;
+  border-radius: 1rem;
+  -webkit-box-shadow: 0 0 0px 0px var(--positive, #10E2AB);
+          box-shadow: 0 0 0px 0px var(--positive, #10E2AB);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 0.5rem;
+  position: relative;
+  -webkit-transition: 150ms ease-in box-shadow;
+  transition: 150ms ease-in box-shadow;
+  width: 2rem;
+}
+
+.toggle-wrap:focus-within {
+  -webkit-box-shadow: 0 0 20px 2px var(--positive, #10E2AB);
+          box-shadow: 0 0 20px 2px var(--positive, #10E2AB);
+}
+
+.toggle-wrap .toggle {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  position: relative;
+  z-index: auto;
+}
+
+.toggle-wrap .toggle + div {
+  width: 13px;
+  height: 13px;
+  background: white;
+  border: 1px solid var(--brandMain);
+  border-radius: 100%;
+  content: '';
+  display: block;
+  left: 1px;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+          transform: translate(0, -50%);
+  -webkit-transition: 150ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
+  transition: 150ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
+  transition: 150ms cubic-bezier(0.19, 1, 0.22, 1) transform;
+  transition: 150ms cubic-bezier(0.19, 1, 0.22, 1) transform, 150ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
+  position: absolute;
+}
+
+.toggle-wrap .toggle:checked + div {
+  -webkit-transform: translate(14px, -50%);
+          transform: translate(14px, -50%);
+}
+
+.toggle-wrap span {
+  display: none;
+}
+
+/* 
+These are the styles for the form elements like inputs, fieldsets & labels etc.
+More special Forms might be a component. 
 */
 
 .form {
@@ -681,7 +801,7 @@ label > span {
   font-size: 0.8rem;
 }
 
-input,
+input:not([type="checkbox"]),
 textarea {
   background: transparent;
   border: 1px solid white;
@@ -696,20 +816,12 @@ textarea {
 }
 
 .error {
-  -webkit-animation-name: fadeIn;
-          animation-name: fadeIn;
-  -webkit-animation-duration: 900ms;
-          animation-duration: 900ms;
-  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-  -webkit-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-  color: var(--alert, #FF7878);
+  color: var(--alert, #FF4F4F);
   display: inline-block;
 }
 
-/* 
-This is the rule set for all headings in our project.
+/* 
+This is the rule set for all headings in our project.
 */
 
 h1,
@@ -732,8 +844,8 @@ h2,
   font-weight: 400;
 }
 
-/* 
-These are the styles for lists. 
+/* 
+These are the styles for lists. 
 */
 
 ul {
@@ -758,8 +870,8 @@ ul {
   font-size: 0.75rem;
 }
 
-/* 
-These are the styles that are needed to render our welcome dashboard. 
+/* 
+These are the styles that are needed to render our welcome dashboard. 
 */
 
 .dashboard {
@@ -814,6 +926,23 @@ These are the styles that are needed to render our welcome dashboard.
           flex-direction: column;
 }
 
+.code-lang {
+  margin: 0;
+}
+
+.code-header {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.code-type {
+  display: inline-block;
+}
+
 .code-tabs {
   height: 100%;
   position: relative;
@@ -827,8 +956,111 @@ These are the styles that are needed to render our welcome dashboard.
   top: 0;
 }
 
-/* 
-These are the styles for the project pattern navigation.
+/* 
+These are the styles that are needed to render the pattern preview. 
+*/
+
+.status-current,
+.status-option:before {
+  width: 1rem;
+  height: 1rem;
+  background: var(--inactive, #B9C5C5);
+  border-radius: 100%;
+  margin: 0 0.5rem 0 0;
+}
+
+.accepted.status-current,
+.accepted.status-option:before {
+  background: var(--positive, #10E2AB);
+}
+
+.rejected.status-current,
+.rejected.status-option:before {
+  background: var(--alert, #FF4F4F);
+}
+
+.toCheck.status-current,
+.toCheck.status-option:before {
+  background: var(--warning, #FFB421);
+}
+
+.wip.status-current,
+.wip.status-option:before {
+  background: white;
+}
+
+.preview {
+  grid-area: view;
+  max-height: 100%;
+  max-width: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+.preview iframe {
+  width: 100%;
+}
+
+.preview-infos {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: var(--brandMain, #03314B);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Arial, sans-serif;
+  font-size: 0.75rem;
+  left: 0;
+  padding: var(--gap, 1rem);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: auto;
+}
+
+.statusbar {
+  padding: 0 0.5rem;
+  position: relative;
+}
+
+.status-current {
+  cursor: pointer;
+}
+
+.status-menue {
+  background: var(--brandDark, #02273C);
+  left: -0.5rem;
+  padding: calc(var(--gap, $l-gap) / 2) 0;
+  position: absolute;
+  top: 1.2rem;
+  z-index: 500;
+}
+
+.status-option {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: transparent;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: calc(var(--gap, $l-gap) / 2) var(--gap, 1rem);
+}
+
+.status-option:before {
+  display: inline-block;
+  content: '';
+}
+
+.status-option:hover {
+  background: var(--brandMain, #03314B);
+}
+
+/* 
+These are the styles for the project pattern navigation.
 */
 
 .project-navigation {
@@ -858,7 +1090,7 @@ These are the styles for the project pattern navigation.
 }
 
 .patterns--sub {
-  background: var(--brandDark);
+  background: var(--brandDark, #02273C);
   left: 0;
   position: absolute;
   top: 2rem;
@@ -931,8 +1163,59 @@ These are the styles for the project pattern navigation.
           transform: rotate(180deg);
 }
 
-/* 
-These are the styles for the inline footer underneath the preview window - carrying the actions for each pattern.
+/* 
+These are the styles for the confirmation modal.
+*/
+
+.popUp {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.popUp .popUp-inner {
+  background: var(--brandMain, #03314B);
+  padding: var(--gap, 1rem);
+}
+
+.darken {
+  background: var(--brandMain, #03314B);
+  height: 100%;
+  left: 0;
+  opacity: 0.95;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.popUp-controls {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+/* 
+These are the styles for the inline footer underneath the preview window - carrying the actions for each pattern.
 */
 
 .footer {
diff --git a/public/js/app.js b/public/js/app.js
index 7ff7640..45c86fc 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -515,9 +515,9 @@ var API = __WEBPACK_IMPORTED_MODULE_0_axios___default.a.create({
 
 /* harmony default export */ __webpack_exports__["a"] = ({
 
-  /**
-   * Dubug logging if devMode is enabled.
-   * @param params
+  /**
+   * Dubug logging if devMode is enabled.
+   * @param params
    */
   debug: function debug() {
     if (__WEBPACK_IMPORTED_MODULE_0__config__["a" /* default */].devMode) {
@@ -527,9 +527,9 @@ var API = __WEBPACK_IMPORTED_MODULE_0_axios___default.a.create({
     }
   },
 
-  /**
-   * Error logging if devMode is enabled.
-   * @param params
+  /**
+   * Error logging if devMode is enabled.
+   * @param params
    */
   error: function error() {
     if (__WEBPACK_IMPORTED_MODULE_0__config__["a" /* default */].devMode) {
@@ -11639,19 +11639,19 @@ module.exports = defaults;
 
 "use strict";
 /* harmony default export */ __webpack_exports__["a"] = ({
-  /*
-  |--------------------------------------------------------------------------
-  | API URI
-  |--------------------------------------------------------------------------
-  | Here you can configure the URI to the backend API.
+  /*
+  |--------------------------------------------------------------------------
+  | API URI
+  |--------------------------------------------------------------------------
+  | Here you can configure the URI to the backend API.
   */
   apiUri: "workshop/api/v1",
 
-  /*
-  |--------------------------------------------------------------------------
-  | Development mode
-  |--------------------------------------------------------------------------
-  | Enable/disable development mode.
+  /*
+  |--------------------------------------------------------------------------
+  | Development mode
+  |--------------------------------------------------------------------------
+  | Enable/disable development mode.
   */
   devMode: true
 });
@@ -12229,8 +12229,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__store__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_WorkshopGui__ = __webpack_require__(65);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_WorkshopGui___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__components_WorkshopGui__);
-/**
- * Import of Vue and Vue-Plugins
+/**
+ * Import of Vue and Vue-Plugins
  */
 
 
@@ -12239,8 +12239,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 __WEBPACK_IMPORTED_MODULE_0_vue___default.a.use(__WEBPACK_IMPORTED_MODULE_1_vee_validate__["a" /* default */]);
 
-/**
- * Import of main components
+/**
+ * Import of main components
  */
 
 
@@ -12533,7 +12533,7 @@ exports.clearImmediate = (typeof self !== "undefined" && self.clearImmediate) ||
 /* unused harmony export ValidationObserver */
 /* unused harmony export withValidation */
 /**
-  * vee-validate v2.1.2
+  * vee-validate v2.1.3
   * (c) 2018 Abdelrahman Awad
   * @license MIT
   */
@@ -13723,130 +13723,148 @@ ErrorBag.prototype._match = function _match (selector) {
   }, {});
 };
 
-// VNode Utils
-
-// Gets the model object on the vnode.
-function findModel (vnode) {
-  if (!vnode.data) {
-    return null;
-  }
-
-  // Component Model
-  if (vnode.data.model) {
-    return vnode.data.model;
-  }
-
-  return !!(vnode.data.directives) && find(vnode.data.directives, function (d) { return d.name === 'model'; });
-}
-
-function extractVNodes (vnode) {
-  if (findModel(vnode)) {
-    return [vnode];
-  }
-
-  var children = Array.isArray(vnode) ? vnode : vnode.children;
-  if (!Array.isArray(children)) {
-    return [];
-  }
-
-  return children.reduce(function (nodes, node) {
-    var candidates = extractVNodes(node);
-    if (candidates.length) {
-      nodes.push.apply(nodes, candidates);
-    }
-
-    return nodes;
-  }, []);
-}
-
-// Resolves v-model config if exists.
-function findModelConfig (vnode) {
-  if (!vnode.componentOptions) { return null; }
-
-  return vnode.componentOptions.Ctor.options.model;
-}
-// Adds a listener to vnode listener object.
-function mergeVNodeListeners (obj, eventName, handler) {
-  // Has a single listener.
-  if (isCallable(obj[eventName])) {
-    var prevHandler = obj[eventName];
-    obj[eventName] = [prevHandler];
-  }
-
-  // has other listeners.
-  if (Array.isArray(obj[eventName])) {
-    obj[eventName].push(handler);
-    return;
-  }
-
-  // no listener at all.
-  if (isNullOrUndefined(obj[eventName])) {
-    obj[eventName] = [handler];
-  }
-}
-
-// Adds a listener to a native HTML vnode.
-function addNativeNodeListener (node, eventName, handler) {
-  if (isNullOrUndefined(node.data.on)) {
-    node.data.on = {};
-  }
-
-  mergeVNodeListeners(node.data.on, eventName, handler);
-}
-
-// Adds a listener to a Vue component vnode.
-function addComponentNodeListener (node, eventName, handler) {
-  /* istanbul ignore next */
-  if (!node.componentOptions.listeners) {
-    node.componentOptions.listeners = {};
-  }
-
-  mergeVNodeListeners(node.componentOptions.listeners, eventName, handler);
-}
-function addVNodeListener (vnode, eventName, handler) {
-  if (vnode.componentOptions) {
-    addComponentNodeListener(vnode, eventName, handler);
-  }
-
-  addNativeNodeListener(vnode, eventName, handler);
-}
-// Determines if `change` should be used over `input` for listeners.
-function getInputEventName (vnode, model) {
-  // Is a component.
-  if (vnode.componentOptions) {
+// VNode Utils
+
+// Gets the model object on the vnode.
+function findModel (vnode) {
+  if (!vnode.data) {
+    return null;
+  }
+
+  // Component Model
+  if (vnode.data.model) {
+    return vnode.data.model;
+  }
+
+  return !!(vnode.data.directives) && find(vnode.data.directives, function (d) { return d.name === 'model'; });
+}
+
+function extractVNodes (vnode) {
+  if (findModel(vnode)) {
+    return [vnode];
+  }
+
+  var children = Array.isArray(vnode) ? vnode : vnode.children;
+  if (!Array.isArray(children)) {
+    return [];
+  }
+
+  return children.reduce(function (nodes, node) {
+    var candidates = extractVNodes(node);
+    if (candidates.length) {
+      nodes.push.apply(nodes, candidates);
+    }
+
+    return nodes;
+  }, []);
+}
+
+// Resolves v-model config if exists.
+function findModelConfig (vnode) {
+  if (!vnode.componentOptions) { return null; }
+
+  return vnode.componentOptions.Ctor.options.model;
+}
+// Adds a listener to vnode listener object.
+function mergeVNodeListeners (obj, eventName, handler) {
+  // Has a single listener.
+  if (isCallable(obj[eventName])) {
+    var prevHandler = obj[eventName];
+    obj[eventName] = [prevHandler];
+  }
+
+  // has other listeners.
+  if (Array.isArray(obj[eventName])) {
+    obj[eventName].push(handler);
+    return;
+  }
+
+  // no listener at all.
+  if (isNullOrUndefined(obj[eventName])) {
+    obj[eventName] = [handler];
+  }
+}
+
+// Adds a listener to a native HTML vnode.
+function addNativeNodeListener (node, eventName, handler) {
+  if (isNullOrUndefined(node.data.on)) {
+    node.data.on = {};
+  }
+
+  mergeVNodeListeners(node.data.on, eventName, handler);
+}
+
+// Adds a listener to a Vue component vnode.
+function addComponentNodeListener (node, eventName, handler) {
+  /* istanbul ignore next */
+  if (!node.componentOptions.listeners) {
+    node.componentOptions.listeners = {};
+  }
+
+  mergeVNodeListeners(node.componentOptions.listeners, eventName, handler);
+}
+function addVNodeListener (vnode, eventName, handler) {
+  if (vnode.componentOptions) {
+    addComponentNodeListener(vnode, eventName, handler);
+  }
+
+  addNativeNodeListener(vnode, eventName, handler);
+}
+// Determines if `change` should be used over `input` for listeners.
+function getInputEventName (vnode, model) {
+  // Is a component.
+  if (vnode.componentOptions) {
     var ref = findModelConfig(vnode) || { event: 'input' };
-    var event = ref.event;
-
-    return event;
-  }
-
-  // Lazy Models typically use change event
-  if (model && model.modifiers && model.modifiers.lazy) {
-    return 'change';
-  }
-
-  // is a textual-type input.
-  if (vnode.data.attrs && isTextInput({ type: vnode.data.attrs.type || 'text' })) {
-    return 'input';
-  }
-
-  return 'change';
-}
-
-function normalizeSlots (slots, ctx) {
-  return Object.keys(slots).reduce(function (arr, key) {
-    slots[key].forEach(function (vnode) {
-      if (!vnode.context) {
-        slots[key].context = ctx;
-        if (!vnode.data) {
-          vnode.data = {};
-        }
-        vnode.data.slot = key;
-      }
-    });
-
-    return arr.concat(slots[key]);
-  }, []);
+    var event = ref.event;
+
+    return event;
+  }
+
+  // Lazy Models typically use change event
+  if (model && model.modifiers && model.modifiers.lazy) {
+    return 'change';
+  }
+
+  // is a textual-type input.
+  if (vnode.data.attrs && isTextInput({ type: vnode.data.attrs.type || 'text' })) {
+    return 'input';
+  }
+
+  return 'change';
+}
+
+function normalizeSlots (slots, ctx) {
+  return Object.keys(slots).reduce(function (arr, key) {
+    slots[key].forEach(function (vnode) {
+      if (!vnode.context) {
+        slots[key].context = ctx;
+        if (!vnode.data) {
+          vnode.data = {};
+        }
+        vnode.data.slot = key;
+      }
+    });
+
+    return arr.concat(slots[key]);
+  }, []);
+}
+
+function createRenderless (h, vnode) {
+  // a single-root slot yay!
+  if (!Array.isArray(vnode)) {
+    return vnode;
+  }
+
+  if (vnode.length === 1) {
+    return vnode[0];
+  }
+
+  if (true) {
+    warn('Your slot should have one root element. Rendering a span as the root.');
+  }
+
+  // Renders a multi-root node, should throw a Vue error.
+  return vnode;
 }
 
 /**
@@ -14194,7 +14212,7 @@ Object.defineProperties( RuleContainer, staticAccessors );
 // 
 
 var isEvent = function (evt) {
-  return (isCallable(Event) && evt instanceof Event) || (evt && evt.srcElement);
+  return (typeof Event !== 'undefined' && isCallable(Event) && evt instanceof Event) || (evt && evt.srcElement);
 };
 
 var normalizeEvents = function (evts) {
@@ -15460,7 +15478,9 @@ Validator.localize = function localize (lang, dictionary) {
 /**
  * Registers a field to be validated.
  */
-Validator.prototype.attach = function attach (fieldOpts) {
+Validator.prototype.attach = function attach (fieldOpts) {
+    var this$1 = this;
+
   // fixes initial value detection with v-model and select elements.
   var value = fieldOpts.initialValue;
   var field = new Field(fieldOpts);
@@ -15468,7 +15488,7 @@ Validator.prototype.attach = function attach (fieldOpts) {
 
   // validate the field initially
   if (field.immediate) {
-    this.validate(("#" + (field.id)), value || field.value, { vmId: fieldOpts.vmId });
+    VeeValidate$1.instance._vm.$nextTick(function () { return this$1.validate(("#" + (field.id)), value || field.value, { vmId: fieldOpts.vmId }); });
   } else {
     this._validate(field, value || field.value, { initial: true }).then(function (result) {
       field.flags.valid = result.valid;
@@ -16249,7 +16269,7 @@ function onRenderUpdate (model) {
       });
     };
 
-    this.syncValue(model.value);
+    this.value = model.value;
     this.validate().then(this.immediate || shouldRevalidate ? this.applyResult : silentHandler);
   }
 
@@ -16313,11 +16333,16 @@ function createValuesLookup (ctx) {
   var providers = ctx.$_veeObserver.refs;
 
   return ctx.fieldDeps.reduce(function (acc, depName) {
-    if (providers[depName]) {
-      acc[depName] = providers[depName].value;
-      var unwatch = providers[depName].$watch('value', function () {
+    if (!providers[depName]) {
+      return acc;
+    }
+
+    acc[depName] = providers[depName].value;
+    var watcherName = "$__" + depName;
+    if (!isCallable(ctx[watcherName])) {
+      ctx[watcherName] = providers[depName].$watch('value', function () {
         ctx.validate(ctx.value).then(ctx.applyResult);
-        unwatch();
+        ctx[watcherName]();
       });
     }
 
@@ -16395,10 +16420,6 @@ var ValidationProvider = {
       type: Boolean,
       default: false
     },
-    tag: {
-      type: String,
-      default: 'span'
-    },
     bails: {
       type: Boolean,
       default: function () { return VeeValidate$1.config.fastExit; }
@@ -16537,22 +16558,19 @@ var ValidationProvider = {
     var slot = this.$scopedSlots.default;
     if (!isCallable(slot)) {
       if (true) {
-        warn('Did you forget to add a scoped slot to the ValidationProvider?');
+        warn('ValidationProvider expects a scoped slot. Did you forget to add "slot-scope" to your slot?');
       }
 
-      slot = function () { return normalizeSlots(this$1.$slots, this$1.$vnode.context); };
+      return createRenderless(h, this.$slots.default);
     }
 
     var nodes = slot(ctx);
     // Handle single-root slot.
-    nodes = Array.isArray(nodes) ? nodes : [nodes];
-    extractVNodes({ children: nodes }).forEach(function (input) {
+    extractVNodes(nodes).forEach(function (input) {
       addListeners.call(this$1, input);
     });
 
-    return h(this.tag, {
-      attrs: this.$attrs
-    }, nodes);
+    return createRenderless(h, nodes);
   },
   beforeDestroy: function beforeDestroy () {
     // cleanup reference.
@@ -16560,99 +16578,90 @@ var ValidationProvider = {
   }
 };
 
-var flagMergingStrategy = {
-  pristine: 'every',
-  dirty: 'some',
-  touched: 'some',
-  untouched: 'every',
-  valid: 'every',
-  invalid: 'some',
-  pending: 'some',
-  validated: 'every'
-};
-
-function mergeFlags (lhs, rhs, strategy) {
-  var stratName = flagMergingStrategy[strategy];
-
-  return [lhs, rhs][stratName](function (f) { return f; });
-}
-
-var ValidationObserver = {
-  name: 'ValidationObserver',
-  provide: function provide () {
-    return {
-      $_veeObserver: this
-    };
-  },
-  props: {
-    tag: {
-      type: String,
-      default: 'span'
-    }
-  },
-  data: function () { return ({
-    refs: {}
-  }); },
-  methods: {
+var flagMergingStrategy = {
+  pristine: 'every',
+  dirty: 'some',
+  touched: 'some',
+  untouched: 'every',
+  valid: 'every',
+  invalid: 'some',
+  pending: 'some',
+  validated: 'every'
+};
+
+function mergeFlags (lhs, rhs, strategy) {
+  var stratName = flagMergingStrategy[strategy];
+
+  return [lhs, rhs][stratName](function (f) { return f; });
+}
+
+var ValidationObserver = {
+  name: 'ValidationObserver',
+  provide: function provide () {
+    return {
+      $_veeObserver: this
+    };
+  },
+  data: function () { return ({
+    refs: {}
+  }); },
+  methods: {
     $subscribe: function $subscribe (provider) {
       var obj;
-
-      this.refs = Object.assign({}, this.refs, ( obj = {}, obj[provider.vid] = provider, obj ));
-    },
+
+      this.refs = Object.assign({}, this.refs, ( obj = {}, obj[provider.vid] = provider, obj ));
+    },
     $unsubscribe: function $unsubscribe (ref) {
       var vid = ref.vid;
-
-      delete this.refs[vid];
-      this.refs = Object.assign({}, this.refs);
-    },
-    validate: function validate () {
-      return Promise.all(values(this.refs).map(function (ref) {
-        return ref.validate().then(function (result) {
-          ref.applyResult(result);
-
-          return result;
-        });
-      })).then(function (results) { return results.every(function (r) { return r.valid; }); });
-    },
-    reset: function reset () {
-      return values(this.refs).forEach(function (ref) {
-        ref.reset();
-      });
-    }
-  },
-  computed: {
-    ctx: function ctx () {
-      return values(this.refs).reduce(function (acc, provider) {
-        Object.keys(flagMergingStrategy).forEach(function (flag) {
-          if (!(flag in acc)) {
-            acc[flag] = provider.flags[flag];
-            return;
-          }
-
-          acc[flag] = mergeFlags(acc[flag], provider.flags[flag], flag);
-        });
-
-        acc.errors[provider.vid] = provider.messages;
-
-        return acc;
-      }, { errors: {} });
-    }
-  },
-  render: function render (h) {
-    var this$1 = this;
-
-    var slots = this.$scopedSlots.default;
-    if (!isCallable(slots)) {
-      slots = function () { return normalizeSlots(this$1.$slots, this$1.$vnode.context); };
-    }
-
-    var nodes = slots(this.ctx);
-
-    return h(this.tag, {
-      attrs: this.$attrs,
-      on: this.$listeners
-    }, Array.isArray(nodes) ? nodes : [nodes]);
-  }
+
+      delete this.refs[vid];
+      this.refs = Object.assign({}, this.refs);
+    },
+    validate: function validate () {
+      return Promise.all(values(this.refs).map(function (ref) {
+        return ref.validate().then(function (result) {
+          ref.applyResult(result);
+
+          return result;
+        });
+      })).then(function (results) { return results.every(function (r) { return r.valid; }); });
+    },
+    reset: function reset () {
+      return values(this.refs).forEach(function (ref) {
+        ref.reset();
+      });
+    }
+  },
+  computed: {
+    ctx: function ctx () {
+      return values(this.refs).reduce(function (acc, provider) {
+        Object.keys(flagMergingStrategy).forEach(function (flag) {
+          if (!(flag in acc)) {
+            acc[flag] = provider.flags[flag];
+            return;
+          }
+
+          acc[flag] = mergeFlags(acc[flag], provider.flags[flag], flag);
+        });
+
+        acc.errors[provider.vid] = provider.messages;
+
+        return acc;
+      }, { errors: {} });
+    }
+  },
+  render: function render (h) {
+    var slots = this.$scopedSlots.default;
+    if (!isCallable(slots)) {
+      if (true) {
+        warn('ValidationObserver expects a scoped slot. Did you forget to add "slot-scope" to your slot?');
+      }
+
+      return createRenderless(h, this.$slots.default);
+    }
+
+    return createRenderless(h, slots(this.ctx));
+  }
 };
 
 function withValidation (component, ctxToProps) {
@@ -17009,7 +17018,7 @@ VeeValidate$1.prototype.resolveConfig = function resolveConfig (ctx) {
 Object.defineProperties( VeeValidate$1.prototype, prototypeAccessors$6 );
 Object.defineProperties( VeeValidate$1, staticAccessors$2 );
 
-VeeValidate$1.version = '2.1.2';
+VeeValidate$1.version = '2.1.3';
 VeeValidate$1.mixin = mixin;
 VeeValidate$1.directive = directive;
 VeeValidate$1.Validator = Validator;
@@ -21198,7 +21207,7 @@ var Rules = /*#__PURE__*/Object.freeze({
   url: url
 });
 
-var version = '2.1.2';
+var version = '2.1.3';
 
 Object.keys(Rules).forEach(function (rule) {
   Validator.extend(rule, Rules[rule].validate, assign({}, Rules[rule].options, { paramNames: Rules[rule].paramNames }));
@@ -21251,9 +21260,9 @@ var router = new __WEBPACK_IMPORTED_MODULE_1_vue_router__["a" /* default */]({
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/**
-  * vue-router v3.0.1
-  * (c) 2017 Evan You
+/*!
+  * vue-router v3.0.2
+  * (c) 2018 Evan You
   * @license MIT
   */
 /*  */
@@ -21274,8 +21283,15 @@ function isError (err) {
   return Object.prototype.toString.call(err).indexOf('Error') > -1
 }
 
+function extend (a, b) {
+  for (var key in b) {
+    a[key] = b[key];
+  }
+  return a
+}
+
 var View = {
-  name: 'router-view',
+  name: 'RouterView',
   functional: true,
   props: {
     name: {
@@ -21289,6 +21305,7 @@ var View = {
     var parent = ref.parent;
     var data = ref.data;
 
+    // used by devtools to display a router-view badge
     data.routerView = true;
 
     // directly use parent context's createElement() function
@@ -21363,7 +21380,7 @@ var View = {
 
     return h(component, data, children)
   }
-};
+}
 
 function resolveProps (route, config) {
   switch (typeof config) {
@@ -21386,13 +21403,6 @@ function resolveProps (route, config) {
   }
 }
 
-function extend (to, from) {
-  for (var key in from) {
-    to[key] = from[key];
-  }
-  return to
-}
-
 /*  */
 
 var encodeReserveRE = /[!'()*]/g;
@@ -21491,7 +21501,6 @@ function stringifyQuery (obj) {
 
 /*  */
 
-
 var trailingSlashRE = /\/?$/;
 
 function createRoute (
@@ -21634,7 +21643,7 @@ var toTypes = [String, Object];
 var eventTypes = [String, Array];
 
 var Link = {
-  name: 'router-link',
+  name: 'RouterLink',
   props: {
     to: {
       type: toTypes,
@@ -21669,17 +21678,17 @@ var Link = {
     var globalExactActiveClass = router.options.linkExactActiveClass;
     // Support global empty active class
     var activeClassFallback = globalActiveClass == null
-            ? 'router-link-active'
-            : globalActiveClass;
+      ? 'router-link-active'
+      : globalActiveClass;
     var exactActiveClassFallback = globalExactActiveClass == null
-            ? 'router-link-exact-active'
-            : globalExactActiveClass;
+      ? 'router-link-exact-active'
+      : globalExactActiveClass;
     var activeClass = this.activeClass == null
-            ? activeClassFallback
-            : this.activeClass;
+      ? activeClassFallback
+      : this.activeClass;
     var exactActiveClass = this.exactActiveClass == null
-            ? exactActiveClassFallback
-            : this.exactActiveClass;
+      ? exactActiveClassFallback
+      : this.exactActiveClass;
     var compareTarget = location.path
       ? createRoute(null, location, null, router)
       : route;
@@ -21719,7 +21728,6 @@ var Link = {
       if (a) {
         // in case the <a> is a static node
         a.isStatic = false;
-        var extend = _Vue.util.extend;
         var aData = a.data = extend({}, a.data);
         aData.on = on;
         var aAttrs = a.data.attrs = extend({}, a.data.attrs);
@@ -21732,7 +21740,7 @@ var Link = {
 
     return h(this.tag, data, this.$slots.default)
   }
-};
+}
 
 function guardEvent (e) {
   // don't redirect with control keys
@@ -21810,8 +21818,8 @@ function install (Vue) {
     get: function get () { return this._routerRoot._route }
   });
 
-  Vue.component('router-view', View);
-  Vue.component('router-link', Link);
+  Vue.component('RouterView', View);
+  Vue.component('RouterLink', Link);
 
   var strats = Vue.config.optionMergeStrategies;
   // use the same hook merging strategy for route hooks
@@ -22321,7 +22329,6 @@ function pathToRegexp (path, keys, options) {
 
   return stringToRegexp(/** @type {string} */ (path), /** @type {!Array} */ (keys), options)
 }
-
 pathToRegexp_1.parse = parse_1;
 pathToRegexp_1.compile = compile_1;
 pathToRegexp_1.tokensToFunction = tokensToFunction_1;
@@ -22517,7 +22524,6 @@ function normalizePath (path, parent, strict) {
 
 /*  */
 
-
 function normalizeLocation (
   raw,
   current,
@@ -22532,9 +22538,9 @@ function normalizeLocation (
 
   // relative params
   if (!next.path && next.params && current) {
-    next = assign({}, next);
+    next = extend({}, next);
     next._normalized = true;
-    var params = assign(assign({}, current.params), next.params);
+    var params = extend(extend({}, current.params), next.params);
     if (current.name) {
       next.name = current.name;
       next.params = params;
@@ -22572,16 +22578,10 @@ function normalizeLocation (
   }
 }
 
-function assign (a, b) {
-  for (var key in b) {
-    a[key] = b[key];
-  }
-  return a
-}
-
 /*  */
 
 
+
 function createMatcher (
   routes,
   router
@@ -22649,8 +22649,8 @@ function createMatcher (
   ) {
     var originalRedirect = record.redirect;
     var redirect = typeof originalRedirect === 'function'
-        ? originalRedirect(createRoute(record, location, null, router))
-        : originalRedirect;
+      ? originalRedirect(createRoute(record, location, null, router))
+      : originalRedirect;
 
     if (typeof redirect === 'string') {
       redirect = { path: redirect };
@@ -22764,7 +22764,8 @@ function matchRoute (
     var key = regex.keys[i - 1];
     var val = typeof m[i] === 'string' ? decodeURIComponent(m[i]) : m[i];
     if (key) {
-      params[key.name] = val;
+      // Fix #1994: using * with props: true generates a param named 0
+      params[key.name || 'pathMatch'] = val;
     }
   }
 
@@ -22777,12 +22778,12 @@ function resolveRecordPath (path, record) {
 
 /*  */
 
-
 var positionStore = Object.create(null);
 
 function setupScroll () {
   // Fix for #1585 for Firefox
-  window.history.replaceState({ key: getStateKey() }, '');
+  // Fix for #2195 Add optional third attribute to workaround a bug in safari https://bugs.webkit.org/show_bug.cgi?id=182678
+  window.history.replaceState({ key: getStateKey() }, '', window.location.href.replace(window.location.origin, ''));
   window.addEventListener('popstate', function (e) {
     saveScrollPosition();
     if (e.state && e.state.key) {
@@ -22813,7 +22814,7 @@ function handleScroll (
   // wait until re-render finishes before scrolling
   router.app.$nextTick(function () {
     var position = getScrollPosition();
-    var shouldScroll = behavior(to, from, isPop ? position : null);
+    var shouldScroll = behavior.call(router, to, from, isPop ? position : null);
 
     if (!shouldScroll) {
       return
@@ -23375,7 +23376,10 @@ function poll (
   key,
   isValid
 ) {
-  if (instances[key]) {
+  if (
+    instances[key] &&
+    !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
+  ) {
     cb(instances[key]);
   } else if (isValid()) {
     setTimeout(function () {
@@ -23386,7 +23390,6 @@ function poll (
 
 /*  */
 
-
 var HTML5History = (function (History$$1) {
   function HTML5History (router, base) {
     var this$1 = this;
@@ -23394,8 +23397,9 @@ var HTML5History = (function (History$$1) {
     History$$1.call(this, router, base);
 
     var expectScroll = router.options.scrollBehavior;
+    var supportsScroll = supportsPushState && expectScroll;
 
-    if (expectScroll) {
+    if (supportsScroll) {
       setupScroll();
     }
 
@@ -23411,7 +23415,7 @@ var HTML5History = (function (History$$1) {
       }
 
       this$1.transitionTo(location, function (route) {
-        if (expectScroll) {
+        if (supportsScroll) {
           handleScroll(router, route, current, true);
         }
       });
@@ -23465,7 +23469,7 @@ var HTML5History = (function (History$$1) {
 }(History));
 
 function getLocation (base) {
-  var path = window.location.pathname;
+  var path = decodeURI(window.location.pathname);
   if (base && path.indexOf(base) === 0) {
     path = path.slice(base.length);
   }
@@ -23474,7 +23478,6 @@ function getLocation (base) {
 
 /*  */
 
-
 var HashHistory = (function (History$$1) {
   function HashHistory (router, base, fallback) {
     History$$1.call(this, router, base);
@@ -23584,7 +23587,7 @@ function getHash () {
   // consistent across browsers - Firefox will pre-decode it!
   var href = window.location.href;
   var index = href.indexOf('#');
-  return index === -1 ? '' : href.slice(index + 1)
+  return index === -1 ? '' : decodeURI(href.slice(index + 1))
 }
 
 function getUrl (path) {
@@ -23612,7 +23615,6 @@ function replaceHash (path) {
 
 /*  */
 
-
 var AbstractHistory = (function (History$$1) {
   function AbstractHistory (router, base) {
     History$$1.call(this, router, base);
@@ -23671,6 +23673,8 @@ var AbstractHistory = (function (History$$1) {
 
 /*  */
 
+
+
 var VueRouter = function VueRouter (options) {
   if ( options === void 0 ) options = {};
 
@@ -23867,7 +23871,7 @@ function createHref (base, fullPath, mode) {
 }
 
 VueRouter.install = install;
-VueRouter.version = '3.0.1';
+VueRouter.version = '3.0.2';
 
 if (inBrowser && window.Vue) {
   window.Vue.use(VueRouter);
@@ -26752,19 +26756,23 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
   computed: {
     isTodo: function isTodo() {
-      return this.status === 'TODO';
+      return this.status === 'todo';
     },
 
     isToCheck: function isToCheck() {
-      return this.status === 'REVIEW';
+      return this.status === 'review';
     },
 
     isAccepted: function isAccepted() {
-      return this.status === 'DONE';
+      return this.status === 'done';
     },
 
     isRejected: function isRejected() {
-      return this.status === 'REJECTED';
+      return this.status === 'rejected';
+    },
+
+    title: function title() {
+      return 'status: ' + this.status;
     }
   }
 });
@@ -26786,7 +26794,7 @@ var render = function() {
         rejected: _vm.isRejected,
         wip: _vm.isTodo
       },
-      attrs: { title: "status: status" },
+      attrs: { title: _vm.title },
       on: {
         click: function($event) {
           _vm.isActive = !_vm.isActive
@@ -26803,7 +26811,7 @@ var render = function() {
                 staticClass: "status-option toCheck",
                 on: {
                   click: function($event) {
-                    _vm.changeStatus("REVIEW")
+                    _vm.changeStatus("review")
                   }
                 }
               },
@@ -26816,7 +26824,7 @@ var render = function() {
                 staticClass: "status-option rejected",
                 on: {
                   click: function($event) {
-                    _vm.changeStatus("REJECTED")
+                    _vm.changeStatus("rejected")
                   }
                 }
               },
@@ -26829,7 +26837,7 @@ var render = function() {
                 staticClass: "status-option accepted",
                 on: {
                   click: function($event) {
-                    _vm.changeStatus("DONE")
+                    _vm.changeStatus("done")
                   }
                 }
               },
@@ -26934,7 +26942,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   name: "ConfirmationWindow",
-  props: ['context'],
 
   methods: {
     confirmYes: function confirmYes() {
@@ -26957,11 +26964,7 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "popUp popUp--confirmation" }, [
     _c("div", { staticClass: "popUp-inner a-dropIn" }, [
-      _c("p", [
-        _vm._v(
-          "Do you realy want to delete '" + _vm._s(_vm.context.name) + "'?"
-        )
-      ]),
+      _c("p", [_vm._t("default")], 2),
       _vm._v(" "),
       _c("div", { staticClass: "popUp-controls" }, [
         _c(
@@ -27192,17 +27195,26 @@ var render = function() {
       ),
       _vm._v(" "),
       _vm.showDeleteConfirm
-        ? _c("confirmation-window", {
-            attrs: { context: _vm.pattern },
-            on: {
-              "confirm-yes": function($event) {
-                _vm.deletePattern(_vm.pattern.name)
-              },
-              "confirm-no": function($event) {
-                _vm.showDeleteConfirm = false
+        ? _c(
+            "confirmation-window",
+            {
+              on: {
+                "confirm-yes": function($event) {
+                  _vm.deletePattern(_vm.pattern.name)
+                },
+                "confirm-no": function($event) {
+                  _vm.showDeleteConfirm = false
+                }
               }
-            }
-          })
+            },
+            [
+              _vm._v(
+                "\n    Do you really want to delete '" +
+                  _vm._s(_vm.pattern.name) +
+                  "'?\n  "
+              )
+            ]
+          )
         : _vm._e()
     ],
     1
@@ -27265,20 +27277,20 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.use(__WEBPACK_IMPORTED_MODULE_1_vuex
 
   mutations: {
 
-    /**
-     * Set basic application information retrieved from Laravel.
-     * @param state
-     * @param info
+    /**
+     * Set basic application information retrieved from Laravel.
+     * @param state
+     * @param info
      */
     appInfo: function appInfo(state, info) {
       state.appInfo = info.data;
     },
 
 
-    /**
-     * Set the active main menu item.
-     * @param state
-     * @param menu
+    /**
+     * Set the active main menu item.
+     * @param state
+     * @param menu
      */
     toggleMainMenu: function toggleMainMenu(state, menu) {
       state.navi.activeMain = menu;
@@ -27286,38 +27298,38 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.use(__WEBPACK_IMPORTED_MODULE_1_vuex
     },
 
 
-    /**
-     * Set the active sub menu item.
-     * @param state
-     * @param subMenu
+    /**
+     * Set the active sub menu item.
+     * @param state
+     * @param subMenu
      */
     toggleSubMenu: function toggleSubMenu(state, subMenu) {
       state.navi.activeSub = subMenu;
     },
 
 
-    /**
-     * Reset the active main menu item.
-     * @param state
+    /**
+     * Reset the active main menu item.
+     * @param state
      */
     resetMainMenu: function resetMainMenu(state) {
       state.navi.activeMain = '';
     },
 
 
-    /**
-     * Reset the active sub menu item.
-     * @param state
+    /**
+     * Reset the active sub menu item.
+     * @param state
      */
     resetSubMenu: function resetSubMenu(state) {
       state.navi.activeSub = '';
     },
 
 
-    /**
-     * Start/stop a reload of the navi.
-     * @param state
-     * @param reload
+    /**
+     * Start/stop a reload of the navi.
+     * @param state
+     * @param reload
      */
     reloadNavi: function reloadNavi(state, reload) {
       state.navi.reload = reload;