Norwegian Peat Moss

    gateschema-form-vue

    0.2.4 • Public • Published

    gateschema-form-vue Build Status Coverage Status

    A Vue component for generating forms from gateschema-js.

    Features

    • GateSchema driven
    • Auto validation
    • Auto updating form data when user inputs value
    • Conditional fields
    • Able to change schema dynamically
    • Extendible, custom form component

    How it works

    It transforms a gateschema-js instance and the input value into a StateForm state, and use a StateForm implemetation to display the form.

    Quick Start

    In this example we use stateform-iview as StateForm layer.

    // file: GateSchemaForm.js
    
    import Vue from 'vue'
    // stateform implementation
    import createStateForm from '@stateform/iview'
    import "@stateform/iview/dist/stateform-iview.css"
    
    import { createForm } from 'gateschema-form-vue'
    
    // 1. creae StateForm component
    const StateForm = createStateForm()
    // 2. create GateSchemaForm component
    const GateSchemaForm = createForm({
      StateForm
    })
    // register
    Vue.component('GateSchemaForm', GateSchemaForm)
    // file: App.vue
    <template>
      <GateSchemaForm 
        :schema="schema" 
        v-model="value" 
        @submit="handleSubmit" 
      />
    </template>
    <script>
      import _ from 'gateschema'
      // your schema
      const schema = _
        .required
        .map({
          name: _
            .required
            .string
            .notEmpty,
          gender: _
            .required
            .enum({
              MALE: 0,
              FEMALE: 1
            }),
          age: _
            .optional
            .number,
          intro: _
            .optional
            .string
            .other('form', {
              component: 'Textarea'
              // StateForm options
              // see https://github.com/stateform/StateForm-Specification
            })
        })
      export default {
        data() {
          return {
            schema: schema,
            value: {}
          }
        },
        methods() {
          handleSubmit() {
            console.log(this.value)
          }
        }
      }
    </script>

    Using with vuex

    // file: store.js  
    
    import Vuex from 'vuex'  
    import {formStore} from 'gateschema-form-vue'
    
    export const store = Vuex.Store({
      // ...
      modules: {
        form: formStore
      }
    })
    // file: App.vue
    <template>
      <GateSchemaForm 
        // now the form is binding to store.form.myForm
        name="myForm"
        :schema="schema" 
        :value="value" 
        @submit="handleSubmit" 
      />
    </template>
    <script>
      import _ from 'gateschema'
      // your schema
      const schema = _.map({
        //....
      })
      export default {
        data() {
          return {
            schema: schema
          }
        },
        computed: {
          ...mapState({
            form: 'form/myForm'
          })
        },
        methods() {
          handleSubmit() {
            console.log(this.form)
          }
        }
      }
    </script>
    

    Live Expamples on CodeSandbox

    Install

    npm install gateschema-form-vue --save  
    

    Usage

    Handling upload

    Pass your handleUpload and handleRemove method when creating StateForm

    import createStateForm from '@stateform/iview'
    import "@stateform/iview/dist/stateform-iview.css"
    const StateForm = createStateForm{
      upload: {
        handleUpload(file, cb) {
          // custom implementation
          setTimeout(() => {
            cb({
              status: 'done', // 'done' | 'error',
              url: 'http://....'
            })
          }, 1000)
        },
        handleRemove(file) {
    
        }
      },
      components: {
        // custom components
      }
    }
    

    Component properties

    Use the other keyword to pass your StateForm component properties.

    Example

    const schema = _
      .require
      .map({
        name: _
          .require
          .map({
            firstName: _
              .required
              .string
              .notEmpty
              // StateForm options
              .other('form', {
                placeholder: 'First Name',
                help: 'Your first name',
                cols: {
                  item: 6,
                  label: 0,
                  wrapper: 18
                }
              }),
            lastName: _
              .required
              .string
              .notEmpty
              // StateForm options
              .other('form', {
                placeholder: 'Last Name',
                cols: {
                  item: 8,
                  label: 0,
                  wrapper: 24
                }
              })
          })
        languages: _
          .enumList({
            c: 0,
            java: 1,
            python: 2,
            go: 3,
            js: 4
          })
          // StateForm options
          .other({
            component: 'Select', 
            cols: {
              label: 6,
              wrapper: 18
            }
          })
      })

    Q&A

    Custom validation ?

    This form component is driven by gateschema. You should define your GateSchema keyword for custom validations

    Conditional fields ?

    Use switch keyword, see gateschema-js for more details

    const schema = _
      .map({
        type: _
          .enum({
            TYPE1: 1,
            TYPE2: 2
          }),
        field0: _
          .optional
          .string
          .switch('/type', [
            {
              case: _.value(1),
              // hidden when type = 1
              schema: _
                .other('form', {
                  hidden: true
                })
            },
            {
              case: _.any,
              schema: _.any
            }
          ])
      })
      .switch('/type', [
        {
          case: _.value(1),
          // have field1 when type = 1
          schema: _
            .map({
              field1: _
                .required
                .number
            })
        },
        {
          case: _.value(2),
          schema: _
            .map({
              field2: _
                .required
                .string
                .notEmpty
            })
        }
      ])

    Custom component ?

    Extend the StateForm implementation

    Changelog

    See CHANGELOG

    License

    MIT

    Install

    npm i gateschema-form-vue

    DownloadsWeekly Downloads

    6

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    83.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • william17