Morpheme

Appearance

Autocomplete ​

The VAutocomplete component is a customizable autocomplete input based on the Headless UI Autocomplete component.

Usage ​

Basic Usage ​

To use the VAutocomplete component, simply add it to your template:

INFO

The VAutocomplete component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Clearable ​

To make the VAutocomplete component clearable, set the clearable prop:

Validation ​

You can use the VAutocomplete component with form validation libraries like vee-validate. In this example, we'll use the useForm hook from vee-validate to handle form submission and validation:

Props ​

NameTypeDefault
itemsItem[][]
modelValueItemundefined
searchBystringtext
displayTextstringtext
placeholderstring'Search...'
labelstring''
namestring''
rulesstring''
notFoundTextstring 'No data.'
noDataTextstring'Nothing found.'
clearablebooleanfalse
errorClassstring'autocomplete-error'
wrapperClassstring''
hintString''
hideErrorBooleanfalse

Events ​

update:modelValue ​

The update:modelValue event is triggered whenever the selected value of the VAutocomplete component changes.

Here is an example of using the update:modelValue event:

vue
<script setup lang="ts">
import type {Item} from '@morpheme/autocomplete';

function onModelValueChange(value: Item) {
  console.log('Selected item:', value);
}
</script>

<template>
  <VAutocomplete @update:modelValue="onModelValueChange" />
</template>
<script setup lang="ts">
import type {Item} from '@morpheme/autocomplete';

function onModelValueChange(value: Item) {
  console.log('Selected item:', value);
}
</script>

<template>
  <VAutocomplete @update:modelValue="onModelValueChange" />
</template>

update:query ​

The update:query event is triggered whenever the search query in the VAutocomplete component changes.

Here is an example of using the update:query event:

vue
<script setup lang="ts">
function onQueryChange(query: string) {
  console.log('Searching:', query);
}
</script>

<template>
  <VAutocomplete @update:query="onQueryChange" />
</template>
<script setup lang="ts">
function onQueryChange(query: string) {
  console.log('Searching:', query);
}
</script>

<template>
  <VAutocomplete @update:query="onQueryChange" />
</template>

Slots ​

NameDescription
hintThis slot is used to add content to the hint area.

CSS Variables ​

scss
:root {
  // field
  --v-autocomplete-field-bg-color: var(--color-white);
  --v-autocomplete-field-border-color: var(--color-gray-300);

  // field hover
  --v-autocomplete-field-hover-border-color: var(--color-gray-300);

  // input
  --v-autocomplete-input-color: var(--color-gray-700);
  --v-autocomplete-input-bg-color: transparent;
  --v-autocomplete-input-height: var(--v-input-height);

  // input selected
  --v-autocomplete-input-selected-color: var(--color-gray-700);

  // clearable button
  --v-autocomplete-clearable-button-color: var(--color-gray-400);

  // clearable button hover
  --v-autocomplete-clearable-button-hover-color: var(--color-gray-500);
  --v-autocomplete-clearable-button-hover-bg-color: var(--color-gray-100);

  // icon
  --v-autocomplete-icon-color: var(--color-gray-400);

  // options
  --v-autocomplete-options-bg-color: var(--color-white);
  --v-autocomplete-options-border-color: var(--color-gray-50);

  // empty
  --v-autocomplete-empty-color: var(--color-gray-700);

  // item
  --v-autocomplete-item-color: var(--color-gray-700);

  // item selected
  --v-autocomplete-item-selected-color: var(--color-primary-500);

  // item selected item
  --v-autocomplete-item-selected-icon-color: var(--color-primary-500);

  // item inactive
  --v-autocomplete-item-inactive-color: var(--color-gray-700);

  // item active
  --v-autocomplete-item-active-bg-color: var(--color-gray-100);

  // error
  --v-autocomplete-error-color: var(--color-error-300);

  // disabled
  --v-autocomplete-input-disabled-bg-color: var(--v-input-disabled-bg-color);
  --v-autocomplete-input-disabled-border-color: var(--v-input-disabled-border-color);

  // hint
  --v-autocomplete-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-autocomplete-hint-color: var(--color-gray-600);
  --v-autocomplete-hint-margin-top: var(--size-spacing-1);

  // focus effect
  --v-input-effect-border-color: var(--color-primary-300);
  --v-input-effect-shadow-color: var(--color-primary-100);
}
:root {
  // field
  --v-autocomplete-field-bg-color: var(--color-white);
  --v-autocomplete-field-border-color: var(--color-gray-300);

  // field hover
  --v-autocomplete-field-hover-border-color: var(--color-gray-300);

  // input
  --v-autocomplete-input-color: var(--color-gray-700);
  --v-autocomplete-input-bg-color: transparent;
  --v-autocomplete-input-height: var(--v-input-height);

  // input selected
  --v-autocomplete-input-selected-color: var(--color-gray-700);

  // clearable button
  --v-autocomplete-clearable-button-color: var(--color-gray-400);

  // clearable button hover
  --v-autocomplete-clearable-button-hover-color: var(--color-gray-500);
  --v-autocomplete-clearable-button-hover-bg-color: var(--color-gray-100);

  // icon
  --v-autocomplete-icon-color: var(--color-gray-400);

  // options
  --v-autocomplete-options-bg-color: var(--color-white);
  --v-autocomplete-options-border-color: var(--color-gray-50);

  // empty
  --v-autocomplete-empty-color: var(--color-gray-700);

  // item
  --v-autocomplete-item-color: var(--color-gray-700);

  // item selected
  --v-autocomplete-item-selected-color: var(--color-primary-500);

  // item selected item
  --v-autocomplete-item-selected-icon-color: var(--color-primary-500);

  // item inactive
  --v-autocomplete-item-inactive-color: var(--color-gray-700);

  // item active
  --v-autocomplete-item-active-bg-color: var(--color-gray-100);

  // error
  --v-autocomplete-error-color: var(--color-error-300);

  // disabled
  --v-autocomplete-input-disabled-bg-color: var(--v-input-disabled-bg-color);
  --v-autocomplete-input-disabled-border-color: var(--v-input-disabled-border-color);

  // hint
  --v-autocomplete-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-autocomplete-hint-color: var(--color-gray-600);
  --v-autocomplete-hint-margin-top: var(--size-spacing-1);

  // focus effect
  --v-input-effect-border-color: var(--color-primary-300);
  --v-input-effect-shadow-color: var(--color-primary-100);
}

Standalone Installation ​

To install the VAutocomplete component individually, you can use the @morpheme/autocomplete package:

bash
npm i @morpheme/autocomplete
npm i @morpheme/autocomplete

You can then use the VAutocomplete component in your Vue templates like this:

vue
<script setup lang="ts">
import VAutocomplete from '@morpheme/autocomplete';
</script>

<template>
  <VAutocomplete />
</template>
<script setup lang="ts">
import VAutocomplete from '@morpheme/autocomplete';
</script>

<template>
  <VAutocomplete />
</template>

Storybook ​

View Storybook documentation here.