Vue-form-generator: Update docs & readme

[icebob]

After #120 we need to update docs & readme

• Update docs on gitbook
  
  
  
  • [ ] rewrite examples
  
  
  • [ ] refresh "Install" & "Usage" section (how to use full & core bundle)
  
  
  • [ ] refresh "Features" section
  
  
  • [ ] add info about bundle sizes
  
  
  • [ ] refresh dependencies (remove momentjs)
  
  

---

• Update readme
  
  
  
  • [ ] rewrite examples
  
  
  • [ ] refresh "Install" & "Usage" section (how to use full & core bundle)
  
  
  • [ ] refresh "Features" section
  
  
  • [ ] add info about bundle sizes
  
  
  • [ ] refresh dependencies (remove momentjs)
  
  

[lionel-bijaoui]

I'm on it, but I don't think I will have the time to do everything

[icebob]

OK, I can help you!

[lionel-bijaoui]

Ok, I will inform you when I finished. Thank you !

[lionel-bijaoui]

I don't know how to handle the new hierarchy of fields.
Should we do something that show the need for dependency:

• build in (mixing core and optional field)
• optional
  
  
  
  • jquery
  
  
  • vanilla
  
  

OR

Should we show what's in core vs optional:

• core
• optional (mixing dependent and independent)

I'm for the second option, since we explicitly say which dependency have each field in its description.
What are your thought ?

[icebob]

I agree the second option.

[lionel-bijaoui]

I have added this into the custom field page

if you decide to release your custom field into the wild, please open an issue so we can add you to a list on the README

I think we should encourage people to release their own custom field. Can we agree on a naming convention for vfg custom field ?

• vue-form-generator-my-field
• vfg-my-field
• vue-form-generator-plugin-my-field
• vfg-plugin-my-field

That would allow people to find other custom field easily. What do you think about that ?

[icebob]

I prefer vfg-my-field.

vue-form-generator.... is too long.
vfg-plugin.... I think it is confuse, because it is not plugin. It is a field or component.

[icebob]

Or vfg-field-mystuff
E.g.:
vfg-field-calendar
vfg-field-awesome-dropdown

[lionel-bijaoui]

I like your proposition. It keep the current naming convention used internally.
We should mention this somewhere on the README to encourage people ! 😃

[lionel-bijaoui]

I just realized that I don't know how to use the core version.

// the normal way
import VueFormGenerator from "vue-form-generator";

I'm really confuse as to how this is going to work

// the "core" way ???
import VueFormGenerator from "vue-form-generator/dist/vue-form-generator-core.js";

[icebob]

The code is correct, but ugly :confused:

[icebob]

But this is the correct way. Like with Vue when you want to use the vue.common.js. Vue solution is you need to create an alias in webpack config

[lionel-bijaoui]

Have you tested it ?
BTW, I think we should use an alias for the "utils" folder.

[lionel-bijaoui]

Also, we never mention how to use the css file.

[cristijora]

Why not rename this to common.js or core.js without having the whole vue-form-generator...
Once you try to import from the npm directory you know that it's the form generator.

[lionel-bijaoui]

Yeah, like full.js and core.js. I fear that common.js might get mixed up with CommonJS specific usage.
As for the CSS, I did that:

<style  src="../../dist/vue-form-generator-core.css"></style>

Good news is that it work, bad news is that it look bad with all the style in the dev environment..

[cristijora]

Yeah full.js and 'core.js` sounds fine. What do you mean it looks bad ?

[lionel-bijaoui]

@cristijora maybe an in-between with vfg-core.js and vfg.js ?
I mean that some element don't look the same when you include the css extracted from vfg.
EDIT: and it look bad when you don't include boostrap, but that's to be expected.

[cristijora]

Hm, actually yeah. I think that one is the best option so far.

[icebob]

Other solution is, we drop the dist folder and place bundles js & css to root of repo.
In this case the links look as:

import vfgCore from "vue-form-generator/vfg-core.js";
import vfgFull from "vue-form-generator";

import "vue-form-generator/vfg-core.css";

[icebob]

What is the problem with extracted CSS? I didn't find any problem. Please make a screenshot.

[lionel-bijaoui]

@icebob I think I'm finished with the doc. Not everything is done, so I let you take a look.

[icebob]

Sorry for late. I was ill. Thanks. I'll check it

[icebob]

I checked, I think it's correct. I fix some examples and make some minor changes.
I will update the README.

[icebob]

Done