Vuejs-Vue form json v3.6.0: vue-form-json - Generate a vue form with validation and bulma style, from json

icon
Latest Release: v3.6.0

3.6.0 (2021-10-12)

Features

  • add hasAsteriskJustAfterLabel props (093e819)
  • add hasAsteriskJustAfterLabel props (c46ed8c)
Source code(tar.gz)
Source code(zip)
vue-form-json.common.js(119.69 KB)
vue-form-json.css(873 bytes)
vue-form-json.umd.min.js(60.32 KB)

NPM Version Build Status Test Coverage Maintainability semantic-release

vue-form-json

Edit vue-form-json-demo

Generate a responsive vue form with validation and bulma style, from json

All fields are required and input text by default. Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.

Key Features

  • Generate a form from json / array (formFields props)
  • Bulma style
  • Responsive
  • Fields on multiples columns
    const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]
  • Pre filled values
    const formFields = [{ label: 'the label', value: 'the value' }]
  • Validation & VeeValidate simple rules validation
    const formFields = [{ label: 'the label', validation: { is_not: 'label' } }]
  • Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)
    const formFields = [{
      label: 'the label',
      attr: { class: 'classOnInput' },
      field: { attr: { class: 'classOnFieldClassName' } }
    }]
  • Named slot everywhere inside form
    const formFields = [{ slot: 'nameOfTheSlot' }]
  • Html directly inside json (formFields props)
    const formFields = [{ html: '<p>Your html content</p>' }]

Install

yarn add vue-form-json vee-validate bulma @fortawesome/fontawesome-free
#fontawesome is not needed if hasIcon props is false

Usage

// main.js
import VeeValidate from 'vee-validate'
// ...
Vue.use(VeeValidate)
// ...
<template lang="pug">
  #app.section
    form-json(:formFields="jsonFields",
              :formName="'userProfil'")
      div(slot="slotNameAddedInJsonFields")
        p Your slot content
</template>

<script>
  import formJson from 'vue-form-json'
  import jsonFields from './../assets/fields'

  export default {
    name: 'app',
    components: {
      formJson
    },
    data: () => ({
      jsonFields
    }),
    mounted () {
      this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
    }
  }
</script>

<style lang="stylus">
  @require '../node_modules/bulma/css/bulma.min.css'
  @require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
  @require '../node_modules/vue-form-json/dist/vue-form-json.css'
</style>

Props available on formJson component

props: {
  formFields: {
    type: Array,
    required: true
  },
  formName: {
    type: String,
    required: true
  },
  mandatoryAsteriskLegend: {
    type: String,
    default: '* field required'
  },
  btnSubmitText: {
    type: String,
    default: 'Submit'
  },
  btnResetText: {
    type: String,
    default: 'Reset'
  },
  resetFormAfterSubmit: {
    type: Boolean,
    default: false
  },
  defaultMinLength: {
    type: [Boolean, Number],
    default: false
  },
  defaultMaxLength: {
    type: [Boolean, Number],
    default: false
  },
  defaultMin: {
    type: [Boolean, Number],
    default: 0
  },
  defaultMax: {
    type: [Boolean, Number],
    default: false
  },
  hasIcon: {
    type: Boolean,
    default: true
  }
}

Comments

  • Form values are empty after getting 'cannot set property of undefined error'
    Form values are empty after getting 'cannot set property of undefined error'

    Jan 26, 2021

    Hi thanks for your nice work on the library. I am having some trouble in using it whin my app, specifically, I am using the same code as you provide in the example, the form shows on the interface, but when clicking submit, the values returned is empty ({}).

    This is the preview page of the app: https://deploy-preview-48--kaibu.netlify.app/#/app which you can fill in the form and click submit to see the empty values. Here is the source code: https://github.com/imjoy-team/kaibu/pull/48/files

    In the console, I can see the following warning and errors:

    vue.runtime.esm.js?0bb2:619 [Vue warn]: $attrs is readonly.
    
    found in
    
    ---> <ValidationObserver>
           <Form>
             <FormWidget> at src/components/widgets/FormWidget.vue
               <BTabItem>
                 <BTabs>
                   <BSidebar>
                     <ImageViewer> at src/components/ImageViewer.vue
                       <App> at src/App.vue
                         <Root>
    warn @ vue.runtime.esm.js?0bb2:619
    ...
    vue.runtime.esm.js?0bb2:619 [Vue warn]: $listeners is readonly.
    
    found in
    
    ---> <ValidationObserver>
           <Form>
             <FormWidget> at src/components/widgets/FormWidget.vue
               <BTabItem>
                 <BTabs>
                   <BSidebar>
                     <ImageViewer> at src/components/ImageViewer.vue
                       <App> at src/App.vue
                         <Root>
    warn @ vue.runtime.esm.js?0bb2:619
    ...
    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "value": "TypeError: Cannot set property 'First Name' of undefined"
    
    found in
    
    ---> <Control>
           <Form>
             <FormWidget> at src/components/widgets/FormWidget.vue
               <BTabItem>
                 <BTabs>
                   <BSidebar>
                     <ImageViewer> at src/components/ImageViewer.vue
                       <App> at src/App.vue
                         <Root>
    warn @ vue.runtime.esm.js?2b0e:619
    ...
    vue.runtime.esm.js?2b0e:1888 TypeError: Cannot set property 'First Name' of undefined
        at VueComponent.value (vue-form-json.common.js?0df0:9967)
        at Watcher.run (vue.runtime.esm.js?2b0e:4568)
        at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
        at Array.eval (vue.runtime.esm.js?2b0e:1980)
        at flushCallbacks (vue.runtime.esm.js?2b0e:1906)
    
    Reply
  • Get file objects in form values
    Get file objects in form values

    Feb 25, 2021

    Hi, I am using the slot to extend field types to a drop zone to get files, however, it doesn't pass through eventually due the the JSON serialisation step: https://github.com/14nrv/vue-form-json/blob/8d94a5aba911c0d167be3065305f35f5d642fc85/src/components/Form/Form.vue#L131

    Would be great if we can implement it in a different way so we can let the files and other non-json serialisable object to go through.

    UPDATE: just tested by removing the json seriallization part, and I noticed that humps will still destroy the file object during camelizeKeys, we need to also fix that.

    bug released 
    Reply
  • Please remove Bulma dependency
    Please remove Bulma dependency

    Feb 19, 2019

    Bulma has bad IE11 support, so that would make this beautiful module useless for a lot of applications.

    Reply
  • Support slot props
    Support slot props

    Feb 7, 2021

    Current vue-form-json doesn't allow passing custom properties to the named scope, this PR enables passing arbitrary properties to the slot. A callback function updateValue will be injected after initialisation, so you can call it to update the value of the field.

    The following example shows how one can support tagInput in buefy:

    <form-json
          :btnReset="{value: 'Reset'}"
          :btnSubmit="{value: 'Submit'}"
          :formFields="jsonFields"
          formName="tagInputDemo">
            <template slot="tagInput" slot-scope="slotProps">
              <b-taginput
                    v-model="slotProps.tags"
                    :data="slotProps.options"
                    autocomplete
                    @input="slotProps.updateValue(slotProps.tags)"
                    icon="label"
                    placeholder="Add a tag">
                    <template #empty>
                        There are no items
                    </template>
                </b-taginput>
            </template>
    </form-json>
    
    const formFields = [
      {
        "slot": "tagInput",
        "props": {
          "label": "book tags", "options": ["drama", "sci-fi"]
        }
      }
    ]
    
    Reply
  • Add support `ref` attribute
    Add support `ref` attribute

    Jul 1, 2019

    I've been working around the registration form using the codes and baianat/vee-validate. I found some Validation Rules (VeeValidate doc) which the field must have ref attribute and value set.

    I tried using below json generate the form, but not reflected to the DOM correctly which means the field value couldn't validate.

    {
      "label": "Label",
      "type": "text",
      "attr" : {
        "ref" : "label"
      }
    }
    
    enhancement 
    Reply
  • Support specifying name or id for field
    Support specifying name or id for field

    Jul 1, 2019

    Support specifying name or id in ascii characters in the field definition would be nice.

    Because I am using Japanese in label, using slugify the label string for name and id causes JS errors / warnings.

    enhancement released 
    Reply
  • Tooltip for each field
    Tooltip for each field

    May 31, 2021

    Hi, I am wondering is there a way to add more detailed description about each field? Maybe something like a tooltip?

    released 
    Reply
  • Move the asterisks to the end of the field name
    Move the asterisks to the end of the field name

    Jul 8, 2021

    Hi, I got some feedback from some users, suggesting that the asterisks is a bit confusing. Screen Shot 2021-07-08 at 8 25 14 PM

    And I think it would be indeed nicer if we move the asterisks to the end of the field name (instead of the end of the explanatory sentence).

    released 
    Reply
  • Supporting custom types with slots
    Supporting custom types with slots

    Mar 2, 2021

    With the new scoped slots interface, we can easily extend the supported form fields. I was thinking whether we can also improve the interface a bit by supporting custom json field types.

    For example allowing adding new types, e.g. tags with this:

     {
        "type": "tags",
        "options": ["drama", "sci-fi"],
        "label": "Tag(s)",
        "placeholder": "Add a tag"
      },
    

    Instead of the currently supported definition with slot:

     {
        "slot": "tags",
        "props": {
          "options": ["drama", "sci-fi"],
          "label": "Tag(s)",
          "placeholder": "Add a tag"
        }
      },
    

    A very ad-hoc approach is to simply check if the field type is supported internally, if not, we convert it into a slot. But you may have a better way of supporting it directly.

    enhancement 
    Reply
  • Support tags
    Support tags

    Jan 28, 2021

    It would be nice to support editing an array of tags by using: https://bulma.io/documentation/elements/tag/

    enhancement released 
    Reply