@dpa-id-components/ui-autocomplete

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

Installation

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

Usage

<!-- SomeComponent.vue using UiAutocomplete -->
<template>
  <ui-autocomplete
    v-model="value"
    label="Name"
    placeholder="Example: James"
    @input="handleEvent"
    @select="handleEvent"
  />
</template>

<script>
  import UiAutocomplete from "@dpa-id-components/ui-autocomplete";

  export default {
    components: {
      UiAutocomplete,
    },
    data() {
      return {
        value: "",
        options: ["James Bond", "James Cameron"],
      };
    },
    computed: {
      errorMessage() {
        if (this.value === "error") {
          return "Oops, an error occured...";
        }
        return "";
      },
    },
    methods: {
      handleEvent: console.log,
    },
  };
</script>

Demo

View a demo of <ui-autocomplete> on Storybook

API

Props

Name	Type	Default	Description
label	String	""	Text for the input's label
placeholder	String	""	Text for the input's placeholder
value	String	""	The input's value
options	String[]	[]	An array of possible values

Events

Name	Type	Description
input	String	Emitted when the internal value of the input changes
select	String	Emitted when an option is selected