1.109.0 • Published 2 years ago

@verified/veform v1.109.0

Weekly downloads
49
License
ISC
Repository
bitbucket
Last release
2 years ago

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>

Image of input from code above

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

Image of stepper from code above

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:

ValueFormat
#Number (0-9)
ALetter in any case (a-z, A-Z)
NNumber or letter
XAny 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.

1.109.0

2 years ago

1.108.0

2 years ago

1.107.0

2 years ago

1.106.0

2 years ago

1.105.0

2 years ago

1.103.0

3 years ago

1.104.0

3 years ago

1.102.0

3 years ago

1.101.0

3 years ago

1.98.0

3 years ago

1.97.0

3 years ago

1.96.0

3 years ago

1.99.0

3 years ago

1.95.0

4 years ago

1.100.0

3 years ago

1.94.0

4 years ago

1.93.0

4 years ago

1.92.0

4 years ago

1.90.0

4 years ago

1.91.0

4 years ago

1.89.0

4 years ago

1.86.0

4 years ago

1.88.0

4 years ago

1.87.0

4 years ago

1.85.0

4 years ago

1.84.0

4 years ago

1.82.0

4 years ago

1.83.0

4 years ago

1.81.0

4 years ago

1.80.0

4 years ago

1.79.0

5 years ago

1.78.0

5 years ago

1.77.0

5 years ago

1.76.0

5 years ago

1.75.0

5 years ago

1.74.0

5 years ago

1.72.0

5 years ago

1.71.0

5 years ago

1.73.0

5 years ago

1.70.0

5 years ago

1.69.0

5 years ago

1.67.0

5 years ago

1.68.0

5 years ago

1.66.0

5 years ago

1.65.0

5 years ago

1.63.0

5 years ago

1.64.0

5 years ago

1.62.0

5 years ago

1.61.0

5 years ago

1.60.0

5 years ago

1.59.0

5 years ago

1.58.0

5 years ago

1.57.0

5 years ago

1.56.0

5 years ago

1.55.0

5 years ago

1.54.0

5 years ago

1.53.0

5 years ago

1.52.0

5 years ago

1.51.0

5 years ago

1.50.0

5 years ago

1.48.0

5 years ago

1.49.0

5 years ago

1.47.0

6 years ago

1.44.0

6 years ago

1.46.0

6 years ago

1.45.0

6 years ago

1.42.0

6 years ago

1.41.0

6 years ago

1.43.0

6 years ago

1.40.0

6 years ago

1.39.0

6 years ago

1.38.0

6 years ago

1.37.0

6 years ago

1.36.0

6 years ago

1.35.0

6 years ago

1.34.0

6 years ago

1.33.0

6 years ago

1.32.0

6 years ago

1.31.0

6 years ago

1.30.0

6 years ago

1.29.0

6 years ago

1.28.0

6 years ago

1.27.0

6 years ago

1.26.0

6 years ago

1.25.0

6 years ago

1.24.0

6 years ago

1.23.0

6 years ago

1.22.0

6 years ago

1.21.0

6 years ago

1.20.0

6 years ago

1.16.0

6 years ago

1.15.0

6 years ago

1.14.0

6 years ago

1.13.0

6 years ago

1.12.0

6 years ago

1.11.0

6 years ago

1.10.0

6 years ago

1.9.0

6 years ago

1.8.0

6 years ago

1.7.0

6 years ago

1.6.0

6 years ago

1.5.0

6 years ago

1.3.0

6 years ago

1.2.6

6 years ago