@docutap-api/inputs

DocuTAP Inputs

DocuTAP Inputs is a validation library built for Vue.js that builds upon DocuTAP UI

Features

• Implements the Vee Validate validation library for Vue.js into DocuTAP UI componenets
• Validations made easy! Just pass a validator object as show in the usage section below
• Can be consumed via DocuTAP Form to avoid common boilerplate

Installation

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

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

Usage

main.js

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(VeeValidate);

App.vue

<template>
  <form novalidate @submit.prevent="validateBeforeSubmit">
    <docutap-select :model="model" :schema="schema"></docutap-select>
  </form>
</template>

<script>
export default {
  name: 'my-app',
  inject: ['$validator'],
  data () {
    return {
      model: {
        'my-select-input': ''
      },
      schema: {
        label: 'State',
        name: 'my-select-input',
        validator: 'required',
        values: ['South Dakota', 'North Dakota', 'Alaska']
      }
    }
  },
  methods: {
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        if (result) {
          console.log('Submitted')
          return
        }
        console.log('Form not valid')
      })
    }
  }
}
</script>