Skip to content

v2.0.0-beta7
Compare
Choose a tag to compare
@icebob icebob released this 31 May 12:11
· 319 commits to master since this release
v2.0.0-beta7
71e9eb4

New

Accessibility #201

Now every field has an id property which is the id of input .If not set, will be auto-generated from the slugified version of either: schema.inputName, schema.label or schema.model, in that order. If the fieldIdPrefix option is set, it's value will be prepended to both manual & auto-generated ids.

Grouping fields #209

This PR add two new features to vfg by @dflock & @jmverges.

  1. add ID prefix for fields
  2. support to grouping fields of schema
    Syntax:
schema: {
    groups:[{
        legend: "Contact Details",
        fields: [
            {
                type: "input",
                inputType: "text",
                label: "Name",
                model: "name"
            },
            {
                type: "input",
                inputType: "email",
                label: "Email",
                model: "email"
            }
        ]
    },{
        legend: "Other Details",
        fields: [
            {
                type: "input",
                inputType: "text",
                label: "More",
                model: "others.more"
            },
            {
                type: "input",
                inputType: "text",
                label: "Things",
                model: "others.things"
            }
        ]
    }],
    fields: [
        {
            type: "input",
            inputType: "text",
            label: "Single field (without group)",
            model: "single"
        }
    ]
}

Dev example: http://localhost:8080/grouping/

Support bootstrap columns on fields #180

This would allow styleClasses:'col-xs-6' for example if you want to have multiple fields in one row.

Support custom validation classes #183

Usage:

formOptions: {
  validationErrorClass: "has-error",
  validationSuccessClass: "has-success"
}

Add a props to change the main tag #198

I have a first solution to make it a little more flexible with the is attribute.

// vfg.vue
<template>
    <div :is="tag">VFG</div>
</template>

<script>
export default {
    props: {
        tag: {
            type: String,
            default: 'fieldset'
        }
    }
};
</script>
basic usage
<vfg></vfg>
config usage
<vfg tag="section"></vfg>
basic usage rendered
<fieldset>VFG</fieldset>
config usage rendered
<section>VFG</section>

Commits

  • 📦 build (71e9eb4)
  • 📦 build (908100e)
  • 📦 build (5105f39)
  • [BUGFIX] Fieldset in proper place un puq template (79c0852)
  • [BUGFIX] vue-form-gerenator class in wrapper div (b5d58ac)
  • [FEATURE] Groups (613e831)
  • Add a props to change the main tag (90b0767)
  • Add support for schema.legend & field id prefixes (a6165c8)
  • Add unit test for vueFormGenerator.fieldTypeHasLabel (c61b941)
  • Added props validation for "tag" and unit test for it. (c728597)
  • Added tests for abstractField.getFieldID() (492514d)
  • bump version (5a30f87)
  • fix checklist validation bug #194 (bea085f), closes #194
  • fix lints (890ed44)
  • fix schema.fields error (d2b67e0)
  • fix tests & layout for fields (ee5ed30)
  • fixed indentation (425faa2)
  • Implement #199 (547ea2e)
  • Make fieldTypeHasLabel test actually work & test default path (d618958)
  • remove .sync (d008869)
  • remove tag from groups (b4dc972)
  • rename options to formOptions because conflicted with vueMultiSelect property (2f29943)
  • rename example & improve code (caa4124)
  • Support bootstrap columns on fields (fc2d47a)
  • Support custom validation classes (378a2a7)
Assets 2
Loading