Commerce · Components

CustomerSelect

Searchable customer picker for a relation field. Presentation only: the caller owns `search` and `resolve` (returning the customer DTO, whose `profile.name` is the label) and the "New customer" action. Registered as the selector for `@happyvertical/smrt-commerce:Customer`.

Public export

typescript

import { CustomerSelect } from '@happyvertical/smrt-commerce/svelte';

Import path: @happyvertical/smrt-commerce/svelte
Props: 15
Props described: 15 of 15
Bindable state: 0
Callback events: 2
Verified release: 0.57.40

Props

NameTypeRequiredDescription

namestringYesField name; the selected customer id posts under it.

valuestringNoSelected customer id (bindable). Empty string means no selection.

labelstringNoVisible label. Defaults to the localized "Customer".

requiredbooleanNoRequired field: hides the clear button.

disabledbooleanNoDisabled state.

errorstringNoValidation error shown below the field.

placeholderstringNoPlaceholder shown while nothing is selected.

descriptionstringNoHint announced with the field.

search(query: string) => Promise<CustomerDisplayData[]>YesCaller-owned lookup; called with '' when the list opens.

resolve(id: string) => Promise<CustomerDisplayData | null>NoCaller-owned lookup of the current value when it has not been listed yet.

onCreate(query: string) => void | CustomerDisplayData | Promise<void | CustomerDisplayData>No"New customer" action, offered only when supplied. Receives the text most recently searched for; a returned customer is selected.

createLabelstringNoText for the "New customer" button.

debounceMsnumberNoMilliseconds to wait after typing before searching.

interactionControlInteractionOptions | falseNoCombobox interaction options for agents, or false to opt out.

onchange(id: string) => voidNoCalled when the selected id changes ('' when cleared).

Bindable state

This component has no bindable public state.

Callback events

onCreate(query: string) => void | CustomerDisplayData | Promise<void | CustomerDisplayData>
onchange(id: string) => void

Public export

Props

Bindable state

Callback events

Examples and explanation