WpmSelectBox Component

A customizable multiselect dropdown component with search functionality, grouped options, recent searches, and tag display. It supports custom slots for rendering selected items, list items, and recent searches.

Props

| Prop Name | Type | Default | Description | |-----------------------|-----------------|--------------------|----------------------------------------------------------------------------------------------| | modelValue | String/Array | Required | The selected value(s) for the multiselect. | | options | Array | Required | The list of groups and their children to display in the dropdown. | | groups | Boolean | false | Enables grouping of options in the dropdown. | | closeAfterSelection | Boolean | false | Automatically closes the dropdown after selecting an item. | | multiple | Boolean | false | Enables selecting multiple options. | | placeholder | String | false | Placeholder text to display in the input field when no value is selected. | | includedPlaceholder | String | Already included | Text displayed for the section containing already selected items. | | themeColor | String | #1890ff | The primary theme color used for styling the component. |

Slots

selected-tag

Customizes the appearance of selected tags. Slot props:

• item: The currently selected item.

list-search-item

Customizes the appearance of items in the dropdown search results. Slot props:

• item: The item being displayed in the search results.

list-selected-item

Customizes the appearance of selected items displayed in the dropdown. Slot props:

• item: The currently selected item.

list-recent-item

Customizes the appearance of recent search items. Slot props:

• item: The recent item being displayed.

list-group-item

Customizes the appearance of grouped dropdown items. Slot props:

• item: The grouped item being displayed.

Methods

toggleDropdown(show: Boolean)

Toggles the visibility of the dropdown.

toggleSelection(item: Object)

Adds or removes an item from the selection and updates the modelValue.

filteredGroups(children: Array)

Filters items in a group that are not already selected or present in recent searches.

Computed Properties

filteredResults

Filters all available options based on the current search query.

dynamicStyles

Generates dynamic CSS variables for theming based on the themeColor.

Events

update:modelValue

Emitted whenever the selected items are updated.

Example Usage

<WpmSelectBox
  v-model="selectedItems"
  :options="options"
  :groups="true"
  :multiple="true"
  :placeholder="'Search for destinations...'"
  :includedPlaceholder="'Selected Items'"
  :themeColor="'#00aaff'"
>
  <template #selected-tag="{ item }">
    <div class="custom-selected-tag">
      <span>{{ item.name }}</span>
      <i @click="removeItem(item)" class="fa fa-times"></i>
    </div>
  </template>

  <template #list-search-item="{ item }">
    <div class="custom-list-item">
      <span>{{ item.name }}</span>
      <i class="fas fa-check"></i>
    </div>
  </template>
</WpmSelectBox>