veform

Veform is a Vue component & theme library for creating modern web forms based on Bootstrap 4

Getting started

Install veform using npm

npm install veform

Using veform in your Vue project

// main.js
import Vue from 'vue'
import App from './App.vue'
import veform from 'veform'

import "./style.scss"

Vue.use(veform)

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

// style.scss
@import "./node_modules/veform/themes/default/style.scss";

You can use style.scss to override any of the available Bootstrap 4 sass variables.

Example components

<!-- Input with some validations -->
<ve-col xs12 sm6>
  <ve-form-group>
    <label>Organization number:</label>
    <ve-input v-model="ud.company_name" rules="required|min:9|max:9"></ve-input>
  </ve-form-group>
</ve-col>

<!-- Stepper component -->
<ve-stepper :steps="3" :step="step" @step-click="previousStep" @btn-next-click="nextStep"></ve-stepper>

Custom validations

Adding custom validation rules is as easy as:

veform.addCustomValidation('uppercase', (value, constraint) => {

    if(value.toUpperCase() === value) return { status: true }

    return { status: false, key: "validation.uppercase" }

})

Input masking

Input fields can be masked by including the mask prop with a combination of the following placeholders:

| Value | Format | |-------|------------------------------| | # | Number (0-9) | | A | Letter in any case (a-z, A-Z)| | N | Number or letter | | X | Any symbol | | ? | Optional (next character) |

<ve-input v-model="orgNr" mask="### ### ###" rules="required|min:11"></ve-input>

Custom locales

Veform implements a global mixin with the following 3 methods for handling locales:

setIso('en_EN') // Page language is set to English
setIso('nb_NO') // Page language is set to Norwegian

// mergeLocale let's you expand on and overwrite the default translation strings of veform.
mergeLocale({
  "validation.uppercase": {
    "en_EN": "Must be uppercase",
    "nb_NO": "Kan kun inneholde store bokstaver"
  }
})

// Returns the translation string for a specified key based on current language
__('validation.uppercase')
__('email')

// Sometimes you want to add a variable to a translation string.
// All extra parameters will replace %s in the string
// let's say we have a greeting translation: "Hello, %s"
__('greeting', 'Bob') // outputs: Hello, Bob

Note that when using these methods outside of template literals, this. should be prepended

Versioning

"version": "1.1.2" (x.y.z)

x: New major release
y: Breaking change
z: Added functionality & patches

Contributing

Feel free to contribute by creating a new branch/fork and submit a pull request.