@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