@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 |