vuetifyformkit

vuetifyformkit is a library of Vuetify form components that allow you to easily connect to vuex store.

Installation

Using npm:

npm i vuetifyformkit

Using yarn:

yarn add vuetifyformkit

Usage/Example

Vue file

Import desired components, add to components object, and use in template.

<script>
import { Input } from 'vuetifyformkit'

export default {
  name: 'Example',
  components: {
    Input,
  }
}
</script>

<template>
  <v-container>
    <Input 
      form="storeModuleName" 
      field="stateKey" 
      placeholder="example" 
      label="example" 
    />
  </v-container>
</template>

Store Module File

In your store module file be sure to have the following action:

actions: {
  SET_FIELD: ({ commit }, data) => {
    commit('setField', data)
  },
}

and the following mutation:

mutations: {
  setField: function(state, data) {
    state[data.key] = data.value
  },
}

Current Supported Form Elements and Props

Props | form | field | id | placeholder | label | rules | dense | disabled | maxlength | items | color | icon | readonly | multiple ----|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--: AutocompleteSelect | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ Checkbox | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | | ✅ Chips | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | ✅ | ✅ FileUpload | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | ✅ | ✅ Input | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | | | ✅ Radio | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | | Select | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | | |✅ | ✅ Textarea | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | |

Rules

For rules prop, be sure to use an array of strings/array of functions. Passing a string in the array will use rule in this package. To use custom rules create a function in computed that returns an array of functions ('rules').

computed: {
  onlyNumbers() {
    return [
      v => /^[0-9]*$/.test(v) || 'Must contain only numbers',
    ]
  }
}

In the below example, 'required' is a rule included in this package and onlyNumbers is the custom rule from above.

<Input 
  form="storeModuleName" 
  field="stateKey" 
  label="example" 
  :rules="[ 'required', onlyNumbers ]"
/>

The following rules are included in the package and can be passed as a string:

• required
• codeRules
• nameRules
• addressRules
• phoneRules
• zipRules
• emailRules