Wondering what’s next for npm?Check out our public roadmap! »

    vue-form-json

    3.5.2 • Public • Published

    NPM Version Build Status Test Coverage Maintainability semantic-release

    vue-form-json

    Edit vue-form-json-demo

    Generate a vue form with validation from an array

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

    Features

    • Generate a form from an array (formFields prop)
    • Bulma classes by default (that can be overwritten)
    • Responsive
    • Fields on multiples columns
      const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]
    • Pre filled values
      const formFields = [{ label: 'the label', value: 'the value' }]
    • Simple rules validation
      const formFields = [{ label: 'the label', rules: { is_not: 'label' } }]
    • Cross field validation (see password confirmation example in the CodeSandbox link)
    • Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)
      const formFields = [{
        attr: { class: 'classOnInput' },
        alternativeLabel: 'an alternative label text that will be displayed',
        field: { attr: { class: 'classOnFieldClassName' } },
        label: 'the label'
      }]
    • Scoped slot support everywhere inside the form
      const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
    • Custom fields support
    • Html support
      const formFields = [{ html: '<p>Your html content</p>' }]

    Install

    yarn add vue-form-json
    # Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon prop is false)

    Usage

    // main.js
    import { extend, ValidationProvider } from 'vee-validate'
    import * as rules from 'vee-validate/dist/rules'
    import { messages } from 'vee-validate/dist/locale/en.json'
    // ...
    Vue.component('ValidationProvider', ValidationProvider)
    
    Object.keys(rules).forEach(rule => {
      extend(rule, {
        ...rules[rule],
        message: messages[rule]
      })
    })
    // ...
    <template lang="pug">
      #app.section
        form-json(:btnReset="{value: 'Reset'}",
                  :btnSubmit="{value: 'Submit'}",
                  :formFields="jsonFields",
                  formName="userProfil")
          template(#slotNameAddedInJsonFields="{ prop }")
            p Your slot content and {{ prop }}
    </template>
    
    <script>
      // import 'bulma/css/bulma.min.css'
      // import '@fortawesome/fontawesome-free/css/all.min.css'
      // import 'vue-form-json/dist/vue-form-json.css'
    
      import formJson from 'vue-form-json'
      import jsonFields from './../assets/fields'
    
      export default {
        name: 'app',
        components: {
          formJson
        },
        mounted () {
          this.$root.$on('formSubmitted', values => console.log(values))
        },
        computed: {
          jsonFields: () => jsonFields
        }
      }
    </script>

    Props available on formJson component

    props: {
      formFields: {
        type: Array,
        required: true
      },
      formName: {
        type: String,
        required: true
      },
      mandatoryAsteriskLegend: {
        type: String,
        default: '* field required'
      },
      btnSubmit: {
        type: Object,
        default: () => ({})
      },
      btnReset: {
        type: Object,
        default: () => ({})
      },
      resetFormAfterSubmit: {
        type: Boolean,
        default: false
      },
      defaultMin: {
        type: [Boolean, Number],
        default: false
      },
      defaultMax: {
        type: [Boolean, Number],
        default: false
      },
      defaultMinValue: {
        type: [Boolean, Number],
        default: 0
      },
      defaultMaxValue: {
        type: [Boolean, Number],
        default: false
      },
      hasIcon: {
        type: Boolean,
        default: true
      },
      camelizePayloadKeys: {
        type: Boolean,
        default: false
      },
      components: {
        type: Object,
        default: () => ({})
      },
    }

    Install

    npm i vue-form-json

    DownloadsWeekly Downloads

    43

    Version

    3.5.2

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar