optional template slot for labels

[gwenaelp]

Hi,

Would it be a good idea to let users implement (optionnally) a template for form fields ?

<vue-form-generator>
    <template slot="empty" slot-scope="props">
        {{props.label}}
    </template>
</vue-form-generator>

By default, without writing the template slot, the behaviour would be the actual one.
It is also conceivable to implement the same logic for fields wrappers.

Like that, it would be possible to implement collapsible fields for instance.

Thoughts?

If you think it is a good idea I can have a look at it.

[gwenaelp]

This is related to #373 but my approach is slightly different to what was proposed I think

[zoul0813]

I think the best approach is to use mixins, and just expose all fields publically so they can be used as a mixin. The user would then just create a template and use their own layout while inheriting all of the fields functionality (optionally able to override/extend functionality).

In addition, things like the label and error text layout should be managed by a generic component and not the main VFG component, which would allow users the ability to override or replace this as well.

The end result is that we don’t have to add anything or increase the overall code size to account for user contributes templates, and just harness the power of mixins out of the box.

[gwenaelp]

I don't get it entirely. You are talking about adding a mixin to the vue-form-generator main component that changes the template to put a custom component instead of {{label}}, am i right?

The template slot logic I propose does not put some more code into this repo, apart of calling the slot. The code sample I wrote is a template that is outside of the vue-form-generator repo. It's the end user that writes that. And by default if he does write the template and use the current way of calling the component, the behaviour would be the same.

Like that it would be possible to put some condition to display the field in another way according to a condition (if field.featured, if field.myCustomProperty ...)

If I can get how you prefer it implemented, I can still take that in charge :D

[gwenaelp]

And I realized I made errors in the sample...

<vue-form-generator>
    <template slot="field" slot-scope="fieldProps">
        <p v-if="fieldProps.featured">
            FEATURED!
        </p>
        {{fieldProps.label}}
    </template>
</vue-form-generator>

If you want a real world example, have a look at buefy. Here is an example of customizing headers of the table component : https://codepen.io/pen?&editors=101

[zoul0813]

@lionel-bijaoui can this be closed?

[lionel-bijaoui]

Yes