V3 plans

[icebob]

Plans:

• Better grouping Group are not flexible enough #259
• Customizable element classes Issue with styling because of "wrapper" #274
• Customizable layout
• Better validation
• Webpack 3 Update to Webpack 3 #349 (in progress)
• Official site with better documentation & examples (Docsify)
• Better modularization
• Better field options
• Support I18N Inject I18N #352
• Dynamic fields How to add dynamic fields #226
• ...etc

Any new idea?

Ping @lionel-bijaoui @cristijora @dflock @zoul0813

Branch: https://github.com/icebob/vue-form-generator/tree/v3

[murilolopes]

I'm having a bit of trouble getting the generator to run, I can, but I'm having to dig a little to figure things out. I think one point would be a documentation with more practical examples mainly in regards to changing layouts / style.

I do not know if it already exists, but another point would also be valid for laravel or something. I think that through an eloquent model with some extra attributes we can generate form through api requests

[lionel-bijaoui]

1. I really wish to make a stripped down "engine" version, along with "core" and "full".
   I realized that in my project, I have to redo most of the basic fields, since I need to add thing to fit my project's specific needs.
   I don't have an exact solution, but anything that allow to pick and choose exactly what I need and nothing more would be nice

2. Change the syntax to be more strict. I mean, only these options are available in the top level of all fields, and any other field specific option must be in fieldOptions. That mean rewriting a lot of stuff, but we can be more clever with abstract field.

// from this
{
    type: "checklist",
    label: "Ingredient",
    model: "ingredient",
    values: [
        { uuid: "a11e3f4b-d4f1-45ed-87fc-4eabda4e667e", name: "Cherimoya"},
        { uuid: "5ceb59c6-efe6-4c8a-a4bd-0ef621cd1e5d", name: "Pummelo"},
        { uuid: "39f05038-39ba-4cb9-8508-720806dcb20b", name: "Jabuticaba"},
        { uuid: "94adbe8d-f9db-481c-97c0-7198d5f3d810", name: "Kiwano melon"}
    ],
    listBox: true,
    checklistOptions: {
        value: "uuid" 
    }
}
// to this
{
    type: "checklist",
    label: "Ingredient",
    model: "ingredient",
    values: [
        { uuid: "a11e3f4b-d4f1-45ed-87fc-4eabda4e667e", name: "Cherimoya"},
        { uuid: "5ceb59c6-efe6-4c8a-a4bd-0ef621cd1e5d", name: "Pummelo"},
        { uuid: "39f05038-39ba-4cb9-8508-720806dcb20b", name: "Jabuticaba"},
        { uuid: "94adbe8d-f9db-481c-97c0-7198d5f3d810", name: "Kiwano melon"}
    ],
    fieldOptions: {
        listBox: true,
        value: "uuid" 
    }
}

[cristijora]

Agree with @murilolopes Usually docs with many examples are beneficial both for users and for maintainers because when you write examples and use it yourself you might find that something is needed missing.
I have been digging around different ways to build good docs lately.
There are a couple of alternatives:

• Storybook (Good overall but has some limitations regarding UI look and feel and custom organization)
• Docsify + some plugins (Good and easy. Markdown based. The UI looks ok and can be customized a bit)
• Custom solution with markdown loaders (Most flexible but requires more effort)

Here are some examples for:

• Docsify - You basically write the code in markdown and it gets rendered both as code sample and html + you can add the option to render it in a jsfiddle
• Storybook The setup here is kind of heavy and there is much boilerplate.

I could build up something based on docsify quickly.

[icebob]

Docsify +1

[lionel-bijaoui]

@cristijora @icebob I like the control (knobs) you can add in storybook. Storybook seem more popular too. I would vouch for it.
Edit: Docsify is nice though...

[cristijora]

Yes @lionel-bijaoui but from experience I found it harder to maintain mainly due to a lot of abstractions and boilerplate code. Markdown is easier to write usually and personally I would go for a custom solution with markdown loaders or docsify

There are also other options like Vue styleguidist but never tried it

[lionel-bijaoui]

@cristijora Yeah, I don't have hard feeling for that. Plus, you have experience with it so you can teach us and help make it better :)

[cristijora]

Regarding other issues, struggles I personally had when using vfg I can say that, I found myself as @lionel-bijaoui stated writing many "custom fields" which were basically wrappers around the original fields.
I feel like there should be some sort of a wrapper field in the layout just like element-ui has
http://element.eleme.io/#/en-US/component/form

Generically speaking it could be something like

 <div>
   <label>
   {{label from props}}
   </label>
   <slot></slot>
</div>

Just like form-group class wrapper from bootstrap and it will contain the abstractMixin.
According to some rules like it should work with v-model we would simply chose what goes into that slot without writing a new custom component

 type: "input",
 component: "el-input"
 component-props: {
  min-length: 3,
  size: "lg"
 },
 label: "ID",
 model: "id",
 readonly: true,
 featured: false,
 disabled: true

And these component-props can be bound with inheritAttrs for example.

That's a very distant idea I guess. Maybe a small example first would be nice

[lionel-bijaoui]

@cristijora the 2.4.0 brought a lot of new interesting possibilities to Vue. Maybe we can tap into inheritAttrs and $attrs ? I have a hard time wrapping my head around that, but it seem promising.

[zoul0813]

I can probably work on the "Better Grouping" and "Customizable layout" as I'd like to have support for this in my current project and was planning to introduce some changes in my personal fork this week and next.

I was planning to introduce a "formGroup" component and move some of the logic out of "formGenerator" into "formGroup". The new formGroup would work similar to how existing control components work, but would allow for nested groups. This would help with building wizard/tabbed UI's for example, and open up possibilities for some fairly advanced form structures.

I did something similar to this in another project, where I built a form generator like VFG for AngularJS. Each group was capable of tracking it's own validation status, triggering validation within the group, etc ... almost as if each group was a separate VFG instance, but all contained within a single VFG instance with a single schema.

[cristijora]

@icebob How can I access the files from the gitbook docs?
Are they written in markdown?

[lionel-bijaoui]

@cristijora I just saw this pop up in the Vue newsletter. Look promising, what are your thoughts?

[icebob]

@cristijora I added you to gitbook repo. Yes, the docs is written in markdown