@docutap-api/form

    1.0.3 • Public • Published

    DocuTAP Form npm version

    DocuTAP Form is a form builder library built for Vue.js that builds upon DocuTAP UI and DocuTAP Inputs

    Features

    • Creates a form from a simple object
    • Implements the Vee Validate validation library for Vue.js

    Installation

    Dependencies

    DocuTAP Form requires the following dependencies: Vee Validate, DocuTAP UI, and DocuTAP Inputs.

    # Peer dependency 
    npm install --save vee-validate
    # @docutap dependencies 
    npm install --save @docutap-api/ui @docutap-api/inputs @docutap-api/form

    Usage

    main.js

    import DocutapForm from '@docutap/form';
    import DocutapInputs from '@docutap/inputs';
    import DocutapUi from '@docutap/ui';
    import Vue from 'vue';
    import VeeValidate from 'vee-validate';
     
    Vue.use(DocutapUi);
    Vue.use(DocutapInputs);
    Vue.use(DocutapForm);
    Vue.use(VeeValidate);

    App.vue

    <template>
      <docutap-form @submit="onSubmit" :schema="schema" :model="formData"></docutap-form>
    </template>
     
    <script>
    export default {
      name: 'my-app',
      data () {
        return {
          formData: {},
          schema: {
            fields: [
              {
                type: 'info',
                text: 'Welcome to Your Vue.js App',
                image: '/static/logo.png'
              },
              {
                label: 'First name',
                validator: 'required'
              },
              {
                label: 'Last name'
              },
              {
                label: 'Email',
                type: 'email',
                validator: 'required|email'
              },
              {
                label: 'Birthdate',
                type: 'date',
                validator: { required: true, date_format: 'MM/DD/YYYY' }
              },
              {
                label: 'Phone',
                type: 'tel',
                validator: 'required'
              },
              {
                label: 'State',
                type: 'radio',
                validator: 'required',
                values: ['South Dakota', 'North Dakota', 'Alaska']
              },
              {
                label: 'Country',
                type: 'select',
                validator: 'required',
                values: ['Australia', 'Brazil']
              },
              {
                label: 'Hobbies',
                type: 'checkboxes',
                validator: 'required',
                values: ['Kickboxing', 'FarmVille', 'Taking surveys']
              },
              {
                label: 'Water',
                type: 'checkboxes',
                validator: 'required',
                hideLabel: true,
                values: ['20 gallons of water']
              },
              {
                type: 'submit',
                text: 'Send',
                validator: 'required'
              }
            ]
          }
        }
      },
      methods: {
        onSubmit () {
          console.log('Form submitted!', this.formData)
        }
      }
    }
    </script> 

    Keywords

    none

    Install

    npm i @docutap-api/form

    DownloadsWeekly Downloads

    14

    Version

    1.0.3

    License

    GPL-3.0

    Unpacked Size

    67.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • adriancarriger
    • docutap-api2