Styling forms

[pimhooghiemstra]

I was wondering if it is possible to use VFG for forms that need more HTML, like question icons with tooltips, headings and paragraphs in between the form fields. Is this supported out of the box?

I was thinking in this direction: Create multiple instances of VFG for each part and wrap those in the HTML needed. Any thought on this would be appreciated. Also, let me know if I am not clearly describing what I would like to achieve

[icebob]

Sorry, but currently it is not supported. because the previous version of Vue didn't support the slot access the child props. But after v2.1.0 it is available with scoped slot. So in the future we will able to make the HTML layout of vfg would be customizable. But it is a bigger modification and currently I have not enough time to develop it.

[lionel-bijaoui]

An "easy" solution would be to create custom fields (an header field, a paragraph field, etc.) and add them into you schema.
This is more of a hack than anything else.

[cristijora]

After looking more in depth at scoped slots I don't think this is very hard to do. The issue that will arise here is the nesting of components. Since VFG has a v-for internally which generates the defined inputs you have to do something like a slot and inside it a template. I will play around with it a bit when I have the time. Maybe next week.

[pimhooghiemstra]

It would be nice! But only when there is time to do it ;-) 2017-03-02 12:46 GMT+01:00 cristijora <notifications@github.com>:

…

After looking more in depth at scoped slots I don't think this is very hard to do. The issue that will arise here is the nesting of components. Since VFG has a v-for internally which generates the defined inputs you have to do something like a slot and inside it a template. I will play around with it a bit when I have the time. Maybe next week. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AG5Kz0o37MZUkLiynUDn0esad9WG6cUGks5rhqwXgaJpZM4MOp4i> .

[cristijora]

@icebob @lionel-bijaoui please see my commit referencing this. It's a bit messy but the idea is the following:

component(...irrelevant props)
   template(scope="props", slot="before")
 	slot(:name='`${field.model}-before`')
   template(scope="props", slot="after")
 	slot(:name='`${field.model}-after`')

Here we have the dynamic slots which can be nested with templates

wrapper.input-group
	slot(name="before")
        input.form-control(....irrelevant props)
        slot(name="after")

Usage:

<vue-form-generator>
<span slot="firstName-before" class="input-group-addon">
     <i class="fa fa-search"></i>
</span>
 <span slot="lastName-after" class="input-group-addon">
    <i class="fa fa-search"></i>
</span>
</vue-form-generator> 

The usage would be to specify the name of the model field + before or `after which would use the slot inside the field which is either before or after the field.
Sample output for this case:

[icebob]

Good idea!

[cristijora]

We have to think about slot naming and some conventions. Dobyou think it's a good way of specyfing custom stuff? I can't think of another option where you could specify html like this.

[icebob]

I think your field-specific slot name is a good idea and solve a problem. But I'm thinking on an other common slot too (e.g. if you want to add a common div to wrap every field).

[cristijora]

I dont quite get it. Can you show a badic example?

[icebob]

I try to create an example

[icebob]

I would like to create slots which can change the whole generator behavior.
I can't create sample because it is not working with current vfg layout.

Let us assume that I want to put the label & the field to a table.
And I add my custom layout as a slot.

<vue-form-generator :schema="schema" :model="model" :options="formOptions">
	<template slot="field" scope="props">
		<tr>
			<td>{{ props.field.label }}<td>
			<td>
				<!-- but in this place I dont want to override the original <component....> template-->
			</td>
		</tr>
	</template>
	
</vue-form-generator>

But I can't reuse some parts of the original template if I add a slot.