Vue-Input

Vue Input with multiple functionality

Install

npm i @simpli/vue-input moment class-transformer vue-multiselect

Import

import Vue from 'vue'
import VueInput from '@simpli/vue-input'

Vue.use(VueInput)

On your Scss:

@import "~@simpli/vue-input/scss/input";

Basic InputText

Type can be 'text', 'mask', 'currency', 'textarea' or any other HTML's input type

<input-text
  v-model="myValue"
  type="text"
/>

Other InputText properties

<input-text
  v-model="myValue"
  type="text"
  label="Input Label"
  name="input-name"
  :required="ifTrueWillShowAnAsterisk"
  :selectall="ifTrueWillSelectTheTextOnFocus"
  inputClass="aClassToDecorateTheInput"
  mask="###/###.###-###"
  validation="required|email"
  @focus="focusEvent"
  @blur="BlurEvent"
/>

You can define the label as a Slot aswell

Using a MaskPreset with InputText

Use one of the following on the property maskPreset:

• cnpj
• cpf
• date
• datetime
• phone
• phoneAlt
• rg
• zipcode
• zipcodeAlt

<input-text
  v-model="myValue"
  type="text"
  maskPreset="phone"
/>

Basic InputCheckbox

<input-checkbox
  v-model="myValue"
/>

Other InputCheckbox properties

<input-checkbox
  v-model="myValue"
  label="Checkbox Label"
  labelClass="aClassForTheLabel"
  inputClass="aClassForTheInput"
  radio="ifTrueTheInputWillBeARadioButton"
  @focus="focusEvent"
  @blur="BlurEvent"
/>

You can define the label as a Slot aswell

InputDate

TODO documentation

InputSelect

TODO documentation