0.2.1 • Published 1 year ago
@dpa-id-components/ui-autocomplete v0.2.1
@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 |