BaseAutocomplete

Legacy search-as-you-type form field (BaseInput look) replaced by ClearableAutocomplete; wikicasa-nuxt no longer uses it.

import BaseAutocomplete from "@wikicasa-dev/components/UIKit/BaseAutocomplete";

Legacy: don't use it in new work. ClearableAutocomplete replaces it everywhere, including inside forms (style its trigger to match the other fields), and wikicasa-nuxt no longer uses it. This page is for reading existing code.

It wraps BaseInput, so it has a floating label, validation colors and icon slots. For a short fixed list use AccessibleSelect.

onInputChangeCb is called 300 ms after the user stops typing and must resolve to { id, label }[] (extra fields are kept). v-model holds the chosen option; with nothing chosen it is { id: "", label: "" }.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import BaseAutocomplete from "@wikicasa-dev/components/UIKit/BaseAutocomplete";
import type { AccessibleSelectOptions } from "@wikicasa-dev/components";

type Address = AccessibleSelectOptions<{ city: string }, string>;

const ADDRESSES: Address[] = [
  { id: "a1", label: "Via Roma 12, Milano", city: "Milano" },
  { id: "a2", label: "Via Roma 3, Torino", city: "Torino" },
  { id: "a3", label: "Viale Monza 140, Milano", city: "Milano" },
];
// Mock search: replace with your data source
const searchAddress = async (q: string | null) =>
  q ? ADDRESSES.filter((a) => a.label.toLowerCase().includes(q.toLowerCase())) : [];

const address = ref<Address>();
const onSelected = (opt: Address) => console.log("selected", opt.id, opt.city);
</script>

<template>
  <BaseAutocomplete
    id="valuation-address"
    v-model="address"
    label="Indirizzo dell'immobile"
    :on-input-change-cb="searchAddress"
    :on-option-selected-cb="onSelected"
  />
</template>

#Do / Don't

• Do pass an id: it derives the inner input's id (ac_input_<id>) and a default data-cy.
• Do set label, or at least placeholder (forwarded to the input along with disabled).
• Do return [] for no results: the dropdown only opens when there is at least one option. The callback also receives null when the field is cleared.
• Do use disableCb to pause searching while it is true (e.g. a prefilled address; set it back to false on click).
• Do choose a theme: "" (default, rounded bordered list), "bordered", "all-bordered" / "all-bordered-thick" (field and list merge into one card) or "empty" (no extra list styling).
• Do use the option-content slot ({ option, idx }) for richer rows, lefticon for a leading icon, righticon ({ handleClean }) for a clear icon.
• Don't call a real API in mockups; use a mock function like the one above.

#Styling hooks

• .uikit-autocomplete { --autocomplete-dropdown-max-height } (default 210px).
• root-classes (attribute) on the wrapper, inputClasses / fieldsetClasses on the inner field, dropdownClasses on the list.
• Icons in lefticon / righticon use BaseInput's text-input-icon left|right sm|md|lg classes.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
isValid	Nullable<boolean>	null
theme	BaseAutocompleteThemes	""
label	string	""
disableCb	boolean	false
onInputChangeCb	(v: string | null) => Promise<AccessibleSelectOptions<TPayload, TID>[]>		yes
onOptionSelectedCb	Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>	null
keepState	Nullable<"open" | "closed">	null
cleanupOnClose	boolean	true
dropdownClasses	string	""
closeDropdownOnBodyPressed	boolean	true		If true, we will close the dropdown when the user clicks or touches the body of the document
inputClasses	ClassTypeProp
fieldsetClasses	ClassTypeProp
dataCy	string	""
modelValue	AccessibleSelectOptions<TPayload, TID>			The modelValue holds the value of one of the selectItems. If empty, it means that no selectItem has been selected

Events

Name	Payload
click
update:dropdownState	[boolean]
changedValue	[string]
keydown	[KeyboardEvent]
keydownEnterPressed
update:modelValue	[value: AccessibleSelectOptions<TPayload, TID> | undefined]

v-model

• v-model binds modelValue (AccessibleSelectOptions<TPayload, TID>)

Slots

Name	Slot props
lefticon
righticon	{ handleClean: () => void; }
option-content	{ option: AccessibleSelectOptions<TPayload, TID>; idx: number; }

Exposed (template ref)

None.