Adds support for element-classes attribute allowing classes to be added to the interior elements. Closes #5

example/package-lock.json

@@ -1,5 +1,4 @@
 {
-  "name": "vuex-examples",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1537,17 +1536,6 @@
       "integrity": "sha1-KY1+IjFmD0DAA8LtMUDezz9TCF8=",
       "dev": true
     },
-    "clone-deep": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-3.0.1.tgz",
-      "integrity": "sha512-kWn5hGUnIA4algk62xJIp9jxQZ8DxSPg9ktkkK1WxRGhU/0GKZBekYJHXAXaZKMpxoq/7R4eygeIl9Cf7si+bA==",
-      "requires": {
-        "for-own": "1.0.0",
-        "is-plain-object": "2.0.4",
-        "kind-of": "6.0.2",
-        "shallow-clone": "2.0.2"
-      }
-    },
     "coa": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
@@ -2777,15 +2765,8 @@
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-    },
+      "dev": true
-    "for-own": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-      "requires": {
-        "for-in": "1.0.2"
-      }
     },
     "foreach": {
       "version": "2.0.5",
@@ -4399,6 +4380,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
       "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dev": true,
       "requires": {
         "is-plain-object": "2.0.4"
       }
@@ -4507,6 +4489,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "requires": {
         "isobject": "3.0.1"
       }
@@ -4580,7 +4563,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
     },
     "js-base64": {
       "version": "2.4.3",
@@ -4643,7 +4627,8 @@
     "kind-of": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "dev": true
     },
     "lazy-cache": {
       "version": "1.0.4",
@@ -5033,15 +5018,6 @@
         "is-extendable": "1.0.1"
       }
     },
-    "mixin-object": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-3.0.0.tgz",
-      "integrity": "sha512-RsUqTd3DyF9+UPqhLzJIWwGm4ZGIPYOu6WcQhQuBqqVBGhc6LOC8LrFk9KD7PvVwmqri45IJT88WLrNNrMWjxg==",
-      "requires": {
-        "for-in": "1.0.2",
-        "is-extendable": "1.0.1"
-      }
-    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -6935,16 +6911,6 @@
         "safe-buffer": "5.1.1"
       }
     },
-    "shallow-clone": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-2.0.2.tgz",
-      "integrity": "sha512-2o81AG/RpLTAG/ZXQekPtH/6yTffzKlJ+i6UhtVTtnP6zWQaNo9vt6LI28bhZLSesB12VQSfJYtXopTogVBveg==",
-      "requires": {
-        "is-extendable": "1.0.1",
-        "kind-of": "6.0.2",
-        "mixin-object": "3.0.0"
-      }
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -6960,11 +6926,6 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
-    "shortid": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.8.tgz",
-      "integrity": "sha1-AzsRfWoul1gE9vCWnb59PQs1UTE="
-    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -7946,15 +7907,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.14.tgz",
       "integrity": "sha512-mVgzSfYvL6WXJhBkZNbJ/hZCJae6gjnnooa7K/HXfBPWKtqpBWHKfZVWV66a7x4JtE5vnQ4P1RW+OeqbWq2pOQ=="
     },
-    "vue-formulate": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/vue-formulate/-/vue-formulate-0.7.0.tgz",
-      "integrity": "sha512-JyxFNN2IKYA4jN/cqS/JWaTRsU3mpn2FrputqaIm0bJNlsy0gTVapM4l01AQEBE20FI1s/1WAIgBIS2bXdUQFw==",
-      "requires": {
-        "clone-deep": "3.0.1",
-        "shortid": "2.2.8"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",

example/package.json

@@ -7,7 +7,6 @@
   },
   "dependencies": {
     "vue": "^2.3.3",
-    "vue-formulate": "^0.7.0",
     "vuex": "^2.4.0"
   },
   "devDependencies": {

src/components/FormulateElement.vue

@@ -13,6 +13,7 @@
       />
       <input
         ref="input"
+        :class="elementClasses"
         :type="type"
         :name="name"
         v-model="val"
@@ -23,6 +24,7 @@
       <!-- BUTTON INPUTS -->
       <button
         :type="type"
+        :class="elementClasses"
         v-text="label || name"
         v-if="isButtonInput"
         :disabled="type === 'submit' && (form.hasErrors && form.behavior === 'live')"
@@ -31,6 +33,7 @@
       <select
         v-bind="attributes"
         v-if="isSelectInput"
+        :class="elementClasses"
         :name="name"
         v-model="val"
         @blur="errorBlurState = true"
@@ -51,6 +54,7 @@
         <template v-for="option in optionList">
           <input
             type="radio"
+            :class="elementClasses"
             :name="name"
             :id="option.id"
             :value="option.value"
@@ -62,6 +66,7 @@
           >
           <input
             type="checkbox"
+            :class="elementClasses"
             :name="name"
             :id="option.id"
             :value="option.value"
@@ -168,6 +173,10 @@ export default {
     validationLabel: {
       type: [String, Boolean],
       default: false
+    },
+    elementClasses: {
+      type: [String, Array, Object],
+      default: () => {}
     }
   },
   data () {