Wire

UI
Select

The select component is a versatile and highly customizable feature offered by WireUi. It allows users to tailor their web applications to specific needs, enabling them to create dynamic and interactive interfaces. With the select component, you can implement various functionalities, such as async search, event listeners, slots for custom content placement (before and after options), and the ability to send requests with specific parameters like search and selected. This component supports a flexible API design, making it easy to retrieve and display options, and you can seamlessly merge query string parameters with asyncData parameters. In summary, the select component is a powerful tool for creating tailored and user-friendly selection interfaces in web applications.

Async Search 
1<x-select
2    label="Search a User"
3    placeholder="Select some user"
4    :async-data="route('api.users.index')"
5    option-label="name"
6    option-value="id"
7/>

Implementing Async Search with WireUi:

1. WireUi will automatically send a request with a search parameter (a string) as the user types into the input field.

2. When the select component initializes and contains a selected value, it will send a request with a selected parameter (an array) to fetch details for the selected option.

3. Design your API according to your requirements, but ensure that it supports these two key scopes: search and selected.

Additional Guidelines:

  • Your API should return data as an array in the response.
  • Make sure to set the option-label and option-value attributes to properly define how options are displayed and identified.
  • Implement the search scope to handle searches based on user input.
  • Implement the selected scope to retrieve information for the selected option.
Information!
For a deeper understanding of the API implementation, refer to the following files: Controller , Test .

You have the flexibility to customize the asyncData prop, allowing you to modify the HTTP method and incorporate additional data into the request. 

1export type AsyncDataConfig = {
2    api: string | null
3    method: string
4    params: any,
5    credentials?: RequestCredentials,
6    alwaysFetch: boolean
7}

How to Personalize the Async Data Configuration?

The query string parameters will be seamlessly merged with the parameters from the asyncData component. 

 1<x-select ... :async-data="route('api.users.index', ['foo' => 'bar'])" />
 2 
 3OR
 4 
 5<x-select ... :async-data="[
 6    'api' => route('api.users.index'),
 7    'method' => 'POST', // default is GET
 8    'params' => ['ble' => 'baz'], // default is []
 9    'credentials' => 'include', // default is undefined
10]" />
Simple Options

A straightforward method for configuring options is to utilize an array of values, ensuring that both the name and ID correspond identically. 

1<x-select
2    label="Select Status"
3    placeholder="Select one status"
4    :options="['Active', 'Pending', 'Stuck', 'Done']"
5/>
Multi Select

Another noteworthy feature of the select functionality is the ability to choose multiple options simultaneously. 

1<x-select
2    label="Select Statuses"
3    placeholder="Select many statuses"
4    multiselect
5    :options="['Active', 'Pending', 'Stuck', 'Done']"
6/>
Custom Options

Should you prefer, you have the option to provide an array where you can specify the name and ID separately. 

1<x-select label="Select Status" placeholder="Select one status"
2    :options="[
3        ['name' => 'Active', 'id' => 1],
4        ['name' => 'Pending', 'id' => 2],
5        ['name' => 'Stuck', 'id' => 3],
6        ['name' => 'Done', 'id' => 4],
7    ]" option-label="name" option-value="id"
8/>
Option With Description

Another customization option allows you to assign a description field to a key element, which will be displayed after the name. 

1<x-select label="Order Status" placeholder="Select one status"
2    :options="[
3        ['name' => 'Active', 'id' => 1, 'description' => 'The status is active'],
4        ['name' => 'Pending', 'id' => 2, 'description' => 'The status is pending'],
5        ['name' => 'Stuck', 'id' => 3, 'description' => 'The status is stuck'],
6        ['name' => 'Done', 'id' => 4, 'description' => 'The status is done'],
7    ]" option-label="name" option-value="id"
8/>
Slot Options

For even more extensive customization, you can pass the options within the default slot of the select component. 

1<x-select label="Select Status" placeholder="Select one status">
2    <x-select.option label="Pending" value="1" />
3    <x-select.option label="In Progress" value="2" />
4    <x-select.option label="Stuck" value="3" />
5    <x-select.option label="Done" value="4" />
6</x-select>
Customizable Options

Additionally, we offer customizable options, including the user-option, which can be utilized as a slot or in conjunction with the select async search using the template. 

 1<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
 2    <x-select label="Select Relator" placeholder="Select relator">
 3        <x-select.user-option :src="Vite::docs('andre.jpeg')" label="André Luiz" value="1" />
 4        <x-select.user-option :src="Vite::docs('fernando.jpeg')" label="Fernando Gunther" value="2" />
 5        <x-select.user-option :src="Vite::docs('keithyellen.jpg')" label="Keithyellen Huhn" value="3" />
 6        <x-select.user-option :src="Vite::docs('joao-pedro.jpg')" label="João Pedro" value="4" />
 7        <x-select.user-option :src="Vite::docs('pedro.jpg')" label="Pedro Henrique" value="5" />
 8    </x-select>
 9 
10    <x-select label="Search a User" placeholder="Select some user"
11        :async-data="route('api.users.index')" :template="[
12            'name' => 'user-option',
13            'config' => ['src' => 'profile_image'],
14        ]" option-label="name" option-value="id" option-description="email"
15    />
16</div>
Select Events

Within the select component, we've integrated event listeners that respond to actions occurring during its manipulation. 

1<x-select
2    ...
3    x-on:open="alert('openned select')"
4    x-on:close="alert('closed select')"
5    x-on:selected="alert('selected/unselected option')"
6    x-on:clear="alert('cleared select')"
7>
8    ...
9</x-select>
Select Slots

The select component provides two available slots for customization: beforeOptions and afterOptions. 

1<x-slot name="beforeOptions">
2    // html code
3</x-slot>
4 
5<x-slot name="afterOptions">
6    // html code
7</x-slot>
After Options Slot

Here's an example of how to utilize the afterOptions slot. 

 1<x-select
 2    label="Search a User"
 3    placeholder="Select some user"
 4    :async-data="route('api.users.index')"
 5    option-label="name"
 6    option-value="id"
 7    hide-empty-message
 8>
 9    <x-slot name="afterOptions" class="flex justify-center p-2" x-show="displayOptions.length === 0">
10        <x-button
11            x-on:click="close; $wireui.notify({ title: 'Not implemented yet', icon: 'info' })"
12            primary flat full>
13            <span x-html="`Create user <b>${search}</b>`"></span>
14        </x-button>
15    </x-slot>
16</x-select>
Select API
Prop Type Default Required
shadow string base false
options Collection|array null false
template string|array null false
clearable boolean true false
async-data string|AsyncDataConfig null false
right-icon string chevron-up-down false
searchable boolean true false
multiselect boolean false false
placeholder string null false
always-fetch boolean false false
flip-options boolean false false
option-label string null false
option-value string null false
empty-message string trans('wireui::messages.empty_options') false
option-key-value boolean false false
hide-empty-message boolean false false
option-description string null false
without-items-count boolean false false
min-items-for-search number 11 false
Select Option API
Prop Type Default Required
value any null false
label string null false
option Model|stdClass|array|null [] false
disabled boolean false false
readonly boolean false false
description string null false
Select User Option API
Prop Type Default Required
src string null true
value any null false
label string null false
option Model|stdClass|array|null [] false
disabled boolean false false
readonly boolean false false
description string null false