Checkbox value display

[DelfsEngineering]

The checkbox example does not have a value, just a label. Since the label appears above the checkbox, the check has no context to meaning. Is it possible to add styling to the box as well as a text defining its purpose vs a label?

[icebob]

What do you want exactly? Please explain.

[DelfsEngineering]

The initial post has a screen of the how the checkbox sits below the label. This is bad UI, what do you recommend?

I think the checkbox should be to the left of the label.

[zoul0813]

I agree with DelfsEngineering, I think the checkbox should be rendered something like

<label><input type="checkbox" /> Label Text</label>

Due to how formGenerator.vue is controlling the layout, instead of the field component, this doesn't seem possible at the moment.

I'd recommend changing formGenerator.vue and just having it load the field component, allowing the field component the ability to manage it's own layout. This would allow for more advanced custom component as well.

Replacing the below

.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
    label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
        | {{ 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)', track-by='index') {{ error }}

With

.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
    component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")

Then updating the field component templates ..

<template lang="pug">
    label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
        | {{ field.label }}
        span.help(v-if='field.help')
            i.icon
            .helpText(v-html='field.help')
    .field-wrap
        input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses")
        .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)', track-by='index') {{ error }}
</template>

This would then allow the checkbox, radios, and other custom component the ability to control their layout within the form-group.

Due to the amount of repeated template logic using this new structure, it may make more sense to switch over to a component render function that can build out the "standard" layout while allowing the individual field components to override it and change the layout.

[icebob]

Yes, but it is a very breaking change. So for this we need to rewrite the whole component and implement also a lot of other features from issues. It is a big work and currently I'm busy so I can't do it.

[DelfsEngineering]

Very breaking indeed, it will break all the custom components. Perhaps an alternate solution that is reverse compatible or what I have done, make custom components that are similar to ones that need reworking.

[jaywilburn]

Does anyone have a good workaround for it in the meantime? I'm interested in seeing what can be done.

[zoul0813]

@jaywilburn - implement your own component, that’s what I did. Extend AbstractField and unset the label so it doesn’t appear above the check, then use a custom template to wrap the input and put your label in the right place. V3 should have a good solution for this, FYI.

[jaywilburn]

@zoul0813 Can you please share a gist with me of your extension of AbstractField and/or custom template you used? I want to make sure it won't break anything we've already built.

[zoul0813]

@jaywilburn here's my custom checkbox.vue component. I'm using Vue's "render" method here, instead of a but the concept is the same. Here, I'm just using "labelText" property in the field schema instead of "label".

The rendered output looks something like this:

<div class="form-group">
  <div class="field-wrap">
    <div class="wrapper">
      <label>
        <input ... />
        {{ labelText }}
      </label>
    </div>
  </div>
</div>

<script>
    import { get as objGet, isFunction } from 'lodash';
    import { abstractField } from 'vue-form-generator';
    
    export default {
        mixins: [ abstractField ],

        render(createElement) {
            return createElement('div', 
                {
                    'class': ['wrapper']
                },
                [
                    createElement('label', [
                        createElement('input', {
                            'class': this.schema.fieldClasses,
                            'attrs': {
                                'id': this.getFieldID(this.schema),
                                'type': 'checkbox',
                                'autocomplete': false,
                                'disabled': false,
                                'checked': objGet(this.model, this.schema.model, false),
                            },
                            on: {
                                change: this.onChange
                            }
                        }),
                        ' ',
                        this.schema.labelText
                    ])
                ]
            );
        },
        methods: {
            onChange($event) {
                this.value = $event.target.checked;
            },

            validate(calledParent) {
                let isValid = false;

                this.clearValidationErrors();

                if(this.schema.required && !this.value) {
                    isValid = false;
                    this.errors.push(this.schema.errorText || 'Input is required');
                }

                if (isFunction(this.schema.onValidated)) {
                    this.schema.onValidated.call(this, this.model, this.errors, this.schema);
                }

                if (!calledParent)
                    this.$emit("validated", isValid, this.errors, this);

                return this.errors;
            }
        }
    };
</script>

<style>
.vue-form-generator .field-checkbox input {
    margin-left: 12px;
}
</style>```

[jaywilburn]

@zoul0813 Thanks so much! I will present this to my team to make these same changes.

[lionel-bijaoui]

You could also use CSS and flex with order property

.form-group.field-checkbox {
    display: flex;
    flex-wrap: wrap;
    label {
        order: 1;
        padding-left: 10px;
    }
}