@simpli/vue-input

Vue Input with multiple functionality

Usage no npm install needed!

<script type="module">
  import simpliVueInput from 'https://cdn.skypack.dev/@simpli/vue-input';
</script>

README

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