@docutap-api/inputs

A Vue.js Plugin

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Jul 18, 2018Mar 23, 2018Minified + gzip package size for @docutap-api/inputs in KB

Readme

DocuTAP Inputs npm version

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.