README

f92vue-formelements

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

Installation

Using npm:

npm i f92vue-formelements

Usage/Example

Vue file

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

<script>
import { Input } from 'vue-formelementsf92'

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 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | |

Usage no npm install needed!