Travel Preferences Selector

Build a compact travel preferences widget using the dependency's selection and suggestion controls.

Capabilities

Destination choice

• Shows destinations with one disabled option; default summary text is "Select a destination". @test
• Selecting a destination updates the summary to "Destination: <label>" and emits the new model value. @test
• Disabled destinations cannot be selected; attempting selection leaves summary unchanged. @test

Interest tags

• Allows picking multiple interests; each selection appears as a removable tag in display order. @test
• Removing a tag updates the summary to reflect remaining interests, preserving the order of earlier selections. @test

Hotel suggestions

• Typing at least 2 characters filters hotel suggestions case-insensitively using the provided list; selecting a suggestion fills the input and emits "select-hotel". @test
• When no hotel matches, the suggestion panel shows "No matches" without altering the current hotel selection. @test

Reset behavior

• Clicking "Clear selections" resets destination, interests, and hotel input to their initial empty state and emits the cleared model. @test

Implementation

@generates

API

export interface DestinationOption { label: string; value: string; disabled?: boolean; }
export interface InterestOption { label: string; value: string; }
export interface HotelOption { label: string; value: string; }

export interface SelectionSummary {
  destination?: string;
  interests: string[];
  hotel?: string;
}

export interface TravelSelectorProps {
  destinations: DestinationOption[];
  interests: InterestOption[];
  hotels: HotelOption[];
  modelValue: SelectionSummary;
}

export interface TravelSelectorEmits {
  (e: "update:modelValue", value: SelectionSummary): void;
  (e: "select-hotel", value: HotelOption): void;
  (e: "reset"): void;
}

declare const TravelSelector: DefineComponent<TravelSelectorProps, {}, {}, {}, {}, {}, {}, TravelSelectorEmits>;
export default TravelSelector;

Dependencies { .dependencies }

primevue { .dependency }

Provides selection and suggestion UI controls.