@dpa-id-components/ui-input NPM

@dpa-id-components/ui-input

UiInput Vue 2.x input component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-input

Usage

<!-- SomeComponent.vue using UiInput -->
<template>
  <ui-input
    v-model="value"
    :label="label"
    :type="type"
    :placeholder="placeholder"
    :error-message="errorMessage"
    :is-invalid="errorMessage"
    @input="handleEvent"
    @focus="handleEvent"
    @blue="handleEvent"
    @keyup="handleEvent"
  />
</template>

<script>
  import UiInput from "@dpa-id-components/ui-input";

  export default {
    components: {
      UiInput,
    },
    data() {
      return {
        value: "",
        type:"text",
        label: "Input Label",
        placeholder: "Type something...",
      };
    },
    computed: {
      errorMessage() {
        if (this.value === "error") {
          return "Oops, an error occured...";
        }
        return "";
      },
    },
    methods: {
      handleEvent: console.log,
    },
  };
</script>

Demo

View a demo of <ui-input> on Storybook

API

Props

Name	Type	Default	Description
`autocomplete`	`String`	`"on"`	Sets the `autocomplete` attribute
`autofocus`	`Boolean`	`false`	Focuses the `input` on mount if `true`
`chevron`	`Boolean`	`false`	Whether to append a chevron icon
`errorMessage`	`String`	`""`	Text to display as an error message
`isInvalid`	`Boolean`	`false`	To flag if the `value` is invalid
`label`	`String`	`""`	Text for the `input`'s `label`
`placeholder`	`String`	`""`	Text for the `input`'s placeholder
`readonly`	`Boolean`	`false`	Sets the `readonly` attribute
`value`	`String`	`""`	The `input`'s value
`type`	`String`	`"text"`	The `input`'s type can either be `text` or `datetime-local`
`min`	`String`	`""`	If the `type` is set to `datetime-local`, `min` represents the minimum date time e.g. `2018-06-07T00:00`
`max`	`String`	`""`	If the `type` is set to `datetime-local`, `max` represents the maximum date time e.g. `2018-06-14T00:00`
`isDateTimePicker`	`Boolean`	`"false"`	To be set to true if input is of type `datetime-local` to keep picked date and time value selected.

Events

Name	Type	Description
`blur`	`BlurEvent`	Emitted when the `input` loses focus
`focus`	`FocusEvent`	Emitted when the `input` is focused
`keyup`	`KeyboardEvent`	Emitted when a key is lifted
`input`	`String`	Emitted when the internal `value` of the `input` changes