Adds support for focus class on formulate wrapper

example/package.json

@@ -6,21 +6,21 @@
     "build": "cross-env NODE_ENV=production webpack -p"
   },
   "dependencies": {
-    "vue": "^2.3.3",
-    "vue-formulate": "^0.7.4",
+    "vue": "^2.6.9",
+    "vue-formulate": "^0.10.0",
     "vuex": "^2.4.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
-    "vue-loader": "^13.7.0",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.4.5"
+    "vue-loader": "^13.7.3",
+    "vue-template-compiler": "^2.6.9",
+    "webpack": "^3.12.0",
+    "webpack-dev-server": "^2.11.3"
   }
 }

example/webpack.config.js

@@ -35,7 +35,8 @@ module.exports = {
   resolve: {
     alias: {
       'vue$': 'vue/dist/vue.esm.js'
-    }
+    },
+    symlinks: false
   },
   devServer: {
     historyApiFallback: true,

src/components/FormulateElement.vue

@@ -21,7 +21,8 @@
         v-model="val"
         v-bind="attributes"
         v-if="isTextInput"
-        @blur="errorBlurState = true"
+        @blur="setBlurState"
+        @focus="setFocusState"
         :disabled="disabled"
         :step="step"
       >
@@ -33,7 +34,8 @@
         v-model="val"
         v-bind="attributes"
         v-if="isTextareaInput"
-        @blur="errorBlurState = true"
+        @blur="setBlurState"
+        @focus="setFocusState"
         :disabled="disabled"
       />
       <!-- BUTTON INPUTS -->
@@ -59,7 +61,8 @@
         :class="elementClasses"
         :name="name"
         v-model="val"
-        @blur="errorBlurState = true"
+        @blur="setBlurState"
+        @focus="setFocusState"
         :disabled="disabled"
       >
         <option
@@ -90,7 +93,8 @@
             v-bind="attributes"
             v-model="val"
             v-if="type === 'radio'"
-            @blur="errorBlurState = true"
+            @blur="setBlurState"
+            @focus="setFocusState"
             :disabled="disabled"
           >
           <input
@@ -103,7 +107,8 @@
             v-bind="attributes"
             v-model="val"
             v-if="type === 'checkbox'"
-            @blur="errorBlurState = true"
+            @blur="setBlurState"
+            @focus="setFocusState"
             :disabled="disabled"
           >
           <label
@@ -116,7 +121,7 @@
       <!-- CUSTOM SLOT INPUTS -->
       <slot v-if="hasCustomInput" />
 
-      <!-- UNSUPORTED INPUT -->
+      <!-- UNSUPPORTED INPUT -->
       <div
         style="background-color: red; color: white"
         v-if="isUnsupportedInput"
@@ -241,7 +246,8 @@ export default {
   },
   data () {
     return {
-      errorBlurState: false
+      errorBlurState: false,
+      focusState: false
     }
   },
   computed: {
@@ -314,8 +320,9 @@ export default {
         [`formulate-element--type--${this.type}`]: true,
         'formulate-element--has-value': !!this.value,
         'formulate-element--has-errors': this.localAndValidationErrors.length && this.shouldShowErrors,
-        'formulate-element--has-prefix': !!this.slots.prefix,
-        'formulate-element--has-suffix': !!this.slots.suffix
+        'formulate-element--has-prefix': !!this.$slots.prefix,
+        'formulate-element--has-suffix': !!this.$slots.suffix,
+        'formulate-element--has-focus': !!this.focusState
       }
     },
     validationErrors () {
@@ -401,6 +408,13 @@ export default {
       if (this.initial !== false) {
         this.form.setInitial(this.name, this.initial)
       }
+    },
+    setBlurState () {
+      this.errorBlurState = true
+      this.focusState = false
+    },
+    setFocusState () {
+      this.focusState = true
     }
   }
 }