gateschema-form-vue

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