antonreshetov/vue-form-components

Clean & minimal vue form elements and form builder with validation

Vue Form Components

Documentation

https://antonreshetov.github.io/vue-form-components

Install

NPM

Installing with npm is recommended and it works seamlessly with webpack.

npm i vfc

Download

You can download latest version from the Github: Download

Quick start

Global

To use in your project, just import vfc and install into Vue.

import Vue from 'vue'
import App from './App.vue'
import VFC from 'vfc'
import 'vfc/dist/vfc.css'

Vue.use(VFC)

new Vue({
  render: h => h(App)
}).$mount('#app')

On demand

<template>
  <vue-input></vue-input>
</template>

<script>
  import 'vfc/dist/vfc.css'
  import { Input } from 'vfc'

  export default {
    components: {
      [Input.name]: Input
    }
  }
</script>

Full component list:

import {
  Input,
  Button,
  Checkbox,
  CheckboxGroup,
  Radio,
  Select,
  Option,
  Form,
  FormItem,
  FormBuilder
} from 'vfc'

License

MIT © 2018-present Anton Reshetov

vue-form-components's Issues

The Select component isn't keyboard accessible

I've tried this a few times and I can't seem to figure out how to get the select component to be keyboard accessible. If the select component is selected and you hit enter it just toggles the first item in the list. This happens with both the regular and multi-select feature.

Vee-validate instead async-validation

Add docs for form builder

Form component

Update for veevalidate

VeeValidate api is changed and simplified. And you don't have to write validate ( $_veeValidate: {} ) logic inside components anymore.

Radio component

Develop

• Core
• Disabled
• Bordered

Testing

• Core
• Disabled
• Bordered

Select is not updating the label when the v-model attribute is cleared

Hi,

I have this following code

<div
  v-for="(selected, index) in data"
  :key="index"
>
  <vue-select
    v-model="data[index]"
    :data="dataOptions"
    placeholder="Select"
  >
    <vue-option
      v-for="option in dataOptions"
      :key="option.value"
      :value="option.value"
      :label="option.label"
    />
  </vue-select>
</div>

However, when I clear the data[index] for the corresponding index, the data is updated correctly but the label displayed stays the same and gives the illusion that the data wasn't cleared. Is there a way to update the label when the data in the v-model object is changed?

Docs

Base

• Site

Components

• Input
• Select
• Checkbox
• Radio
• Button
• Form

Support customMessages in vvalidate

Can't find a way to set custom validation messages using the FormBuilder component.

can not set default value

Hi
I tried to set default selected option
But both of v-model="desirable" and :value="desirable" didnt work.
Any way to set default selected option in ?
Thank you

Add Travis CI to build gh page

Select search

hi, are you planning to do a search in select?

Select component doesn't work properly

Hey

I'm trying to utilize Select component, but had no luck so far.
An element shows up, but no dropdown is displayed after clicking it.

I have a jsfiddle example:
https://jsfiddle.net/b265fqz9/2/

Could you give me a hint on what could be a problem with my code?

Thanks.

Update docs for validation

can't use "name" attribute

hi, I added
<vue-input v-model="formCarrier.email" name="mail" style="width: 100%" placeholder="[email protected]"></vue-input>

but it doesn't work after rendering.

other attributes like a "readonly, type, placeholder" still work

Form validation

Input component

Develop

• Core (Input, Textarea)
• Suffix
• Prefix
• Append
• Prepend
• Disabled

Testing

• Core (Input, Textarea)
• Suffix
• Prefix
• Append
• Prepend
• Disabled

Button component

Develop

• Core
• Type

Testing

• Core
• Type

Examples & Docs

Checkbox component

Develop

• Core (Single, Group)
• Disabled
• Bordered

Testing

• Core (Single, Group)
• Disabled
• Bordered

Select component

Develop

• Core (Select, Option)
• Popper
• Disabled select
• Disabled option
• Multiple

Testing

• Core (Select, Option)
• Popper
• Disabled select
• Disabled option
• Multiple

Form builder

A schema-based form generator

• Component
• Testing