feat(field-switch): add simple switch field

Author: kevinkosterr

src/fields/index.js

@@ -9,11 +9,12 @@ import FieldNumber from '@/fields/input/FieldNumber.vue'
 import FieldSubmit from '@/fields/buttons/FieldSubmit.vue'
 import FieldReset from '@/fields/buttons/FieldReset.vue'
 import FieldButton from '@/fields/buttons/FieldButton.vue'
+import FieldSwitch from '@/fields/input/FieldSwitch.vue'
 
 
 const fieldComponents = [
   FieldText, FieldCheckBox, FieldPassword, FieldSelect, FieldRadio, FieldColor, FieldNumber,
-  FieldSubmit, FieldReset, FieldButton
+  FieldSubmit, FieldReset, FieldButton, FieldSwitch
 ]
 
 export default {

src/fields/input/FieldSwitch.vue

@@ -0,0 +1,75 @@
+<template>
+  <label class="field-switch" :for="formFieldId">
+    <input :id="formFieldId" type="checkbox" :disabled="isDisabled" @change="onFieldValueChanged">
+    <span class="slider" />
+  </label>
+</template>
+
+<script>
+import { abstractField } from '@/mixins/'
+
+export default {
+  name: 'FieldSwitch',
+  mixins: [ abstractField ],
+  methods: {
+    formatFieldValue(target) {
+      return target.checked
+    }
+  }
+}
+</script>
+
+<style>
+.vue-form-generator .field-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.vue-form-generator .field-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.vue-form-generator .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.vue-form-generator .slider:before {
+  position: absolute;
+  content: '';
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+.vue-form-generator input:checked + .slider {
+  background-color: #2196F3;
+}
+
+.vue-form-generator input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+.vue-form-generator input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+</style>

src/mixins/abstractField.js

@@ -88,8 +88,7 @@ export default {
 
       if (isFunction(this.field.onValidated)) {
         this.field.onValidated.call(this, this.model, results, this.field)
-      }
-      else if (this.field.onValidated !== undefined) {
+      } else if (this.field.onValidated !== undefined) {
         throw new Error('onValidated property must be of type `function`, on ' + this.field.name)
       }
 
@@ -148,6 +147,26 @@ export default {
 
   computed: {
 
+    /**
+     * Compute the id for the current form field
+     * @returns {string}
+     */
+    formFieldId () {
+      /** From: vue-form-generator **/
+      return (this.field.inputName || this.field.label || this.field.model || '')
+        .toString()
+        .trim()
+        .toLowerCase()
+        // Spaces & underscores to dashes
+        .replace(/ |_/g, '-')
+        // Multiple dashes to one
+        .replace(/-{2,}/g, '-')
+        // Remove leading & trailing dashes
+        .replace(/^-+|-+$/g, '')
+        // Remove anything that isn't a (English/ASCII) letter, number or dash.
+        .replace(/([^a-zA-Z0-9-]+)/g, '')
+    },
+
     /**
      * Compute all validators that should be present by default.
      *