@vx-components/input v0.1.6

vx-input

A VxInput Component

Install

npm install --save @vx-components/input

Usage

<template>
  <vx-input v-model="value"
    :label="label" :attrs="attrs" @input="onInput" />
</template>

<script>
  import VxInput from '@vx-components/input'
  
  export default {
    data: () => ({
      value: 'Paris, France',
      label: 'Your location',
      attrs: {
        title: 'Please enter your location',
        data: {
          lng: 48.8566, // => data-lng="48.8566"
          lat: 2.3522   // => data-lat="2.3522"
        }
      }
    }),
    methods: {
      onInput () {
        // this.value contains the new value
      }
    },
    components: { VxInput }
  }
</script>

VxInput API

The custom HTML <input> component. It represents a multi-line plain-text editing control.

props

• v-model String (optional) Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.

• id String (optional) Defines a unique identifier (ID) which must be unique in the whole document.

• label String (optional) The label associated with a control.

• attrs Object (optional) default: null Use this property to define the set of attributes of the control.

• disabled Boolean (optional) default: false This Boolean property indicates that the user cannot interact with the control.

• maxlength Number (optional) The maximum number of characters (Unicode code points) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

• minlength Number (optional) The minimum number of characters (Unicode code points) required that the user should enter.

• pattern String (optional) A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title property to describe the pattern to help the user.

• placeholder String (optional) A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

• readonly Boolean (optional) This Boolean property indicates that the user cannot modify the value of the control. Unlike the disabled property, the readonly property does not prevent the user from clicking or selecting in the control.

• required Boolean (optional) default: false This property specifies that the user must fill in a value before submitting a form.

• data-class-error String (optional) default: 'uk-form-danger'

events

• invalid Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form.

• input Fired when the value is changed.

• change Fired when a change to the initial element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

• keyup Fired when a key is released.

methods

• isEmpty() Define if the control value is empty of not.

• setError() Set a message error

• clearError() clear the message error

License

Under the MIT license. See LICENSE file for more details.