Rework of formGenerator to use a component

Allow HTML for label & hint

Author: Lionel Bijaoui

src/formGenerator.vue

@@ -2,67 +2,24 @@
 div.vue-form-generator(v-if='schema != null')
 fieldset(v-if="schema.fields", :is='tag')
 template(v-for='field in fields')
-.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
-label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)", :class="field.labelClasses")
-| {{ field.label }}
-span.help(v-if='field.help')
-i.icon
-.helpText(v-html='field.help')
-.field-wrap
-component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")
-.buttons(v-if='buttonVisibility(field)')
-button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field, $event)', :class='btn.classes') {{ btn.label }}
-.hint(v-if='field.hint') {{ fieldHint(field) }}
-.errors.help-block(v-if='fieldErrors(field).length > 0')
-span(v-for='(error, index) in fieldErrors(field)', v-html='error', track-by='index')
+form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated")
 
 template(v-for='group in groups')
 fieldset(:is='tag', :class='getFieldRowClasses(group)')
 legend(v-if='group.legend') {{ group.legend }}
 template(v-for='field in group.fields')
-.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
-label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)", :class="field.labelClasses")
-| {{ field.label }}
-span.help(v-if='field.help')
-i.icon
-.helpText(v-html='field.help')
-.field-wrap
-component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options',@model-updated='modelUpdated', @validated="onFieldValidated")
-.buttons(v-if='buttonVisibility(field)')
-button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field, $event)', :class='btn.classes') {{ btn.label }}
-.hint(v-if='field.hint') {{ field.hint }}
-.errors.help-block(v-if='fieldErrors(field).length > 0')
-span(v-for='(error, index) in fieldErrors(field)', v-html='error', track-by='index')
+form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated")
 </template>
 
 <script>
-// import Vue from "vue";
-import { get as objGet, forEach, isFunction, isNil, isArray, isString } from "lodash";
-import { slugifyFormID } from "./utils/schema";
-
-// Load all fields from '../fields' folder
-let fieldComponents = {};
-
-let coreFields = require.context("./fields/core", false, /^\.\/field([\w-_]+)\.vue$/);
-
-forEach(coreFields.keys(), key => {
-let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
-fieldComponents[compName] = coreFields(key).default;
-});
-
-if (process.env.FULL_BUNDLE) {
-// eslint-disable-line
-let Fields = require.context("./fields/optional", false, /^\.\/field([\w-_]+)\.vue$/);
-
-forEach(Fields.keys(), key => {
-let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
-fieldComponents[compName] = Fields(key).default;
-});
-}
+import { get as objGet, forEach, isFunction, isNil, isArray } from "lodash";
+import formMixin from "./formMixin.js";
+import formGroup from "./formGroup.vue";
 
 export default {
-components: fieldComponents,
-
+name: "formGenerator",
+components: { formGroup },
+mixins: [formMixin],
 props: {
 schema: Object,
 
@@ -163,75 +120,6 @@ export default {
 },
 
 methods: {
-// Get style classes of field
-getFieldRowClasses(field) {
-const hasErrors = this.fieldErrors(field).length > 0;
-let baseClasses = {
-[objGet(this.options, "validationErrorClass", "error")]: hasErrors,
-[objGet(this.options, "validationSuccessClass", "valid")]: !hasErrors,
-disabled: this.fieldDisabled(field),
-readonly: this.fieldReadonly(field),
-featured: this.fieldFeatured(field),
-required: this.fieldRequired(field)
-};
-
-if (isArray(field.styleClasses)) {
-forEach(field.styleClasses, c => (baseClasses[c] = true));
-} else if (isString(field.styleClasses)) {
-baseClasses[field.styleClasses] = true;
-}
-
-if (!isNil(field.type)) {
-baseClasses["field-" + field.type] = true;
-}
-
-return baseClasses;
-},
-
-// Get type of field 'field-xxx'. It'll be the name of HTML element
-getFieldType(fieldSchema) {
-return "field-" + fieldSchema.type;
-},
-
-// Should field type have a label?
-fieldTypeHasLabel(field) {
-if (isNil(field.label)) return false;
-
-let relevantType = "";
-if (field.type === "input") {
-relevantType = field.inputType;
-} else {
-relevantType = field.type;
-}
-
-switch (relevantType) {
-case "button":
-case "submit":
-case "reset":
-return false;
-default:
-return true;
-}
-},
-
-// Get disabled attr of field
-fieldDisabled(field) {
-if (isFunction(field.disabled)) return field.disabled.call(this, this.model, field, this);
-
-if (isNil(field.disabled)) return false;
-
-return field.disabled;
-},
-
-// Get required prop of field
-fieldRequired(field) {
-if (isFunction(field.required)) return field.required.call(this, this.model, field, this);
-
-if (isNil(field.required)) return false;
-
-return field.required;
-},
-
 // Get visible prop of field
 fieldVisible(field) {
 if (isFunction(field.visible)) return field.visible.call(this, this.model, field, this);
@@ -241,35 +129,6 @@ export default {
 return field.visible;
 },
 
-// Get readonly prop of field
-fieldReadonly(field) {
-if (isFunction(field.readonly)) return field.readonly.call(this, this.model, field, this);
-
-if (isNil(field.readonly)) return false;
-
-return field.readonly;
-},
-
-// Get featured prop of field
-fieldFeatured(field) {
-if (isFunction(field.featured)) return field.featured.call(this, this.model, field, this);
-
-if (isNil(field.featured)) return false;
-
-return field.featured;
-},
-
-// Get current hint.
-fieldHint(field) {
-if (isFunction(field.hint)) return field.hint.call(this, this.model, field, this);
-
-return field.hint;
-},
-
-buttonClickHandler(btn, field, event) {
-return btn.onclick.call(this, this.model, field, event, this);
-},
-
 // Child field executed validation
 onFieldValidated(res, errors, field) {
 // Remove old errors for this field
@@ -301,7 +160,7 @@ export default {
 
 forEach(this.$children, child => {
 if (isFunction(child.validate)) {
-fields.push(child); // keep track of validated children
+fields.push(child.$refs.child); // keep track of validated children
 results.push(child.validate(true));
 }
 });
@@ -338,32 +197,12 @@ export default {
 forEach(this.$children, child => {
 child.clearValidationErrors();
 });
-},
-
-modelUpdated(newVal, schema) {
-this.$emit("model-updated", newVal, schema);
-},
-
-buttonVisibility(field) {
-return field.buttons && field.buttons.length > 0;
-},
-
-fieldErrors(field) {
-let res = this.errors.filter(e => e.field === field);
-return res.map(item => item.error);
-},
-
-getFieldID(schema) {
-const idPrefix = this.options && this.options.fieldIdPrefix ? this.options.fieldIdPrefix : "";
-return slugifyFormID(schema, idPrefix);
 }
 }
 };
 </script>
 
 <style lang="scss">
-$errorColor: #f00;
-
 .vue-form-generator {
 * {
 box-sizing: border-box;
@@ -499,64 +338,5 @@ $errorColor: #f00;
 font-style: italic;
 font-size: 0.8em;
 } // .hint
-
-.form-group {
-display: inline-block;
-vertical-align: top;
-width: 100%;
-// margin: 0.5rem 0.26rem;
-margin-bottom: 1rem;
-
-label {
-font-weight: 400;
-}
-
-&.featured {
-> label {
-font-weight: bold;
-}
-}
-
-&.required {
-> label:after {
-content: "*";
-font-weight: normal;
-color: Red;
-// position: absolute;
-padding-left: 0.2em;
-font-size: 1em;
-}
-}
-
-&.disabled {
-> label {
-color: #666;
-font-style: italic;
-}
-}
-
-&.error {
-input:not([type="checkbox"]),
-textarea,
-select {
-border: 1px solid $errorColor;
-background-color: rgba($errorColor, 0.15);
-}
-
-.errors {
-color: $errorColor;
-font-size: 0.8em;
-span {
-display: block;
-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC");
-background-repeat: no-repeat;
-padding-left: 17px;
-padding-top: 0px;
-margin-top: 0.2em;
-font-weight: 600;
-}
-} // .errors
-} // .error
-} // .form-group
 } // fieldset
 </style>