Skip to content

Commit b064622

Browse files
ph7jackph7jack
committed
feat: update the select documentation
1 parent a2cca33 commit b064622

File tree

2 files changed

+146
-80
lines changed

2 files changed

+146
-80
lines changed

‎app/Http/Livewire/Documentation/Select.php

+17-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@
77

88
class Select extends Component
99
{
10+
public string $asyncSearch = <<<HTML
11+
<x-select
12+
label="Search a User"
13+
wire:model="model"
14+
placeholder="Select some user"
15+
:async-data="route('users.index')"
16+
option-label="name"
17+
option-value="id"
18+
/>
19+
HTML;
20+
1021
public string $simpleOptions = <<<HTML
1122
<x-select
1223
label="Select Status"
@@ -61,10 +72,10 @@ class Select extends Component
6172
placeholder="Select relator"
6273
wire:model.defer="model"
6374
>
64-
<x-select.user-option img="https://via.placeholder.com/500" label="People 1" value="1" />
65-
<x-select.user-option img="https://via.placeholder.com/500" label="People 2" value="2" />
66-
<x-select.user-option img="https://via.placeholder.com/500" label="People 3" value="3" />
67-
<x-select.user-option img="https://via.placeholder.com/500" label="People 4" value="4" />
75+
<x-select.user-option src="https://via.placeholder.com/500" label="People 1" value="1" />
76+
<x-select.user-option src="https://via.placeholder.com/500" label="People 2" value="2" />
77+
<x-select.user-option src="https://via.placeholder.com/500" label="People 3" value="3" />
78+
<x-select.user-option src="https://via.placeholder.com/500" label="People 4" value="4" />
6879
</x-select>
6980
HTML;
7081

@@ -80,6 +91,8 @@ class Select extends Component
8091
</x-select>
8192
HTML;
8293

94+
public $asyncSearchUser = null;
95+
8396
public $model = null;
8497

8598
public $modelMultiple = [];

‎resources/views/livewire/documentation/select.blade.php

+129-76
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<x-slot name="summary">
33
<x-summary>
44
<x-summary.header href="#select" label="Select">
5+
<x-summary.item href="#async-search" label="Async Search" />
56
<x-summary.item href="#simple-options" label="Simple Options" />
67
<x-summary.item href="#multiselect" label="Multi Select" />
78
<x-summary.item href="#custom-options" label="Custom Options" />
@@ -28,20 +29,73 @@
2829
</div>
2930
</div>
3031

32+
<x-code-preview
33+
title="Async Search"
34+
href="#async-search"
35+
id="async-search"
36+
language="html"
37+
:code="$asyncSearch">
38+
<x-select
39+
class="sm:max-w-xs"
40+
label="Search a User"
41+
wire:model.defer="asyncSearchUser"
42+
placeholder="Select some user"
43+
:async-data="route('api.users.index')"
44+
option-label="name"
45+
option-value="id"
46+
/>
47+
</x-code-preview>
48+
49+
<div class="mt-3 prose text-gray-500 max-w-none">
50+
<b>How to Implement the async-search?</b>
51+
52+
<p>
53+
The wireui will makes a request with the <x-mark>search</x-mark> <b>parameter(string)</b> when the user type in the input.
54+
<br /> When the component is initialized and have any selected value,
55+
the select will send a request with the <x-mark>selected</x-mark> <b>parameter(array)</b> to find the selected option
56+
<br /> You are free to create your api as you want, just apply these two scopes: search and selected
57+
</p>
58+
59+
<ul>
60+
<li>Create an api that returns an array in the response</li>
61+
<li>Set the <x-mark>option-label</x-mark> and <x-mark>option-value</x-mark> attributes</li>
62+
<li>
63+
Implement
64+
<a target="_Blank" href="https://github.com/wireui/docs/tree/main/app/Http/Controllers/Api/Users/Index.php#L17">search</a> scope
65+
</li>
66+
<li>
67+
Implement
68+
<a target="_Blank" href="https://github.com/wireui/docs/tree/main/app/Http/Controllers/Api/Users/Index.php#L23">selected</a> scope
69+
</li>
70+
</ul>
71+
</div>
72+
73+
<x-alerts.info>
74+
Tip: See these files to read more about the <b>api</b> implementation.
75+
<br>
76+
<b>
77+
<a class="underline" target="_Blank" href="https://github.com/wireui/docs/tree/main/app/Http/Controllers/Api/Users/Index.php">
78+
Controller
79+
</a>,
80+
<a class="underline" target="_Blank" href="https://github.com/wireui/docs/tree/main/tests/Feature/Controllers/Api/Users/IndexTest.php">
81+
Test
82+
</a>
83+
</b>
84+
</x-alerts.info>
85+
3186
<x-code-preview
3287
title="Simple Options"
3388
href="#simple-options"
3489
id="simple-options"
3590
language="html"
3691
:code="$simpleOptions">
37-
<div class="flex flex-wrap gap-4">
38-
<x-select
39-
label="Select Status"
40-
placeholder="Select one status"
41-
:options="['Active', 'Pending', 'Stuck', 'Done']"
42-
wire:model.defer="model"
43-
/>
44-
</div>
92+
<x-select
93+
class="sm:max-w-xs"
94+
label="Select Status"
95+
placeholder="Select one status"
96+
:options="['Active', 'Pending', 'Stuck', 'Done']"
97+
wire:model.defer="model"
98+
/>
4599
</x-code-preview>
46100

47101
<x-code-preview
@@ -50,15 +104,14 @@
50104
id="multiselect"
51105
language="html"
52106
:code="$multiselect">
53-
<div class="flex flex-wrap gap-4">
54-
<x-select
55-
label="Select Statuses"
56-
placeholder="Select many statuses"
57-
multiselect
58-
:options="['Active', 'Pending', 'Stuck', 'Done']"
59-
wire:model.defer="modelMultiple"
60-
/>
61-
</div>
107+
<x-select
108+
class="sm:max-w-xs"
109+
label="Select Statuses"
110+
placeholder="Select many statuses"
111+
multiselect
112+
:options="['Active', 'Pending', 'Stuck', 'Done']"
113+
wire:model.defer="modelMultiple"
114+
/>
62115
</x-code-preview>
63116

64117
<x-code-preview
@@ -67,21 +120,20 @@
67120
id="custom-options"
68121
language="html"
69122
:code="$customOptions">
70-
<div class="flex flex-wrap gap-4">
71-
<x-select
72-
label="Select Status"
73-
placeholder="Select one status"
74-
:options="[
75-
['name' => 'Active', 'id' => 1],
76-
['name' => 'Pending', 'id' => 2],
77-
['name' => 'Stuck', 'id' => 3],
78-
['name' => 'Done', 'id' => 4],
79-
]"
80-
option-label="name"
81-
option-value="id"
82-
wire:model.defer="model"
83-
/>
84-
</div>
123+
<x-select
124+
class="sm:max-w-xs"
125+
label="Select Status"
126+
placeholder="Select one status"
127+
:options="[
128+
['name' => 'Active', 'id' => 1],
129+
['name' => 'Pending', 'id' => 2],
130+
['name' => 'Stuck', 'id' => 3],
131+
['name' => 'Done', 'id' => 4],
132+
]"
133+
option-label="name"
134+
option-value="id"
135+
wire:model.defer="model"
136+
/>
85137
</x-code-preview>
86138

87139
<x-code-preview
@@ -90,18 +142,17 @@
90142
id="slot-options"
91143
language="html"
92144
:code="$slotOptions">
93-
<div class="flex flex-wrap gap-4">
94-
<x-select
95-
label="Select Status"
96-
placeholder="Select one status"
97-
wire:model.defer="model"
98-
>
99-
<x-select.option label="Pending" value="1" />
100-
<x-select.option label="In Progress" value="2" />
101-
<x-select.option label="Stuck" value="3" />
102-
<x-select.option label="Done" value="4" />
103-
</x-select>
104-
</div>
145+
<x-select
146+
class="sm:max-w-xs"
147+
label="Select Status"
148+
placeholder="Select one status"
149+
wire:model.defer="model"
150+
>
151+
<x-select.option label="Pending" value="1" />
152+
<x-select.option label="In Progress" value="2" />
153+
<x-select.option label="Stuck" value="3" />
154+
<x-select.option label="Done" value="4" />
155+
</x-select>
105156
</x-code-preview>
106157

107158
<x-code-preview
@@ -110,63 +161,65 @@
110161
id="customizable-options"
111162
language="html"
112163
:code="$customizableOptions">
113-
<div class="flex flex-wrap gap-4">
114-
<x-select
115-
label="Select Relator"
116-
placeholder="Select relator"
117-
wire:model.defer="model"
118-
>
119-
<x-select.user-option :img="asset('assets/images/andre.jpeg')" label="André Luiz" value="1" />
120-
<x-select.user-option :img="asset('assets/images/fernando.jpeg')" label="Fernando Gunther" value="2" />
121-
<x-select.user-option :img="asset('assets/images/keithyellen.jpg')" label="Keithyellen Huhn" value="3" />
122-
<x-select.user-option :img="asset('assets/images/pedro.jpg')" label="Pedro Henrique" value="4" />
123-
</x-select>
124-
</div>
164+
<x-select
165+
class="sm:max-w-xs"
166+
label="Select Relator"
167+
placeholder="Select relator"
168+
wire:model.defer="model"
169+
>
170+
<x-select.user-option :src="asset('assets/images/andre.jpeg')" label="André Luiz" value="1" />
171+
<x-select.user-option :src="asset('assets/images/fernando.jpeg')" label="Fernando Gunther" value="2" />
172+
<x-select.user-option :src="asset('assets/images/keithyellen.jpg')" label="Keithyellen Huhn" value="3" />
173+
<x-select.user-option :src="asset('assets/images/pedro.jpg')" label="Pedro Henrique" value="4" />
174+
</x-select>
125175
</x-code-preview>
126176

127177
<div id="select-options">
128178
<x-section.title href="#select-options" title="Select Options" />
129179
<x-options-table class="mt-2 mb-6 w-full">
130-
<x-option-table-row prop="label" required="false" default="none" type="string" available="*" />
131-
<x-option-table-row prop="placeholder" required="false" default="none" type="string" available="*" />
132-
<x-option-table-row prop="option-value" required="false" default="none" type="string" available="*" />
133-
<x-option-table-row prop="option-label" required="false" default="none" type="string" available="*" />
134-
<x-option-table-row prop="option-key-label" required="false" default="false" type="boolean" />
135-
<x-option-table-row prop="option-key-value" required="false" default="false" type="boolean" />
136-
<x-option-table-row prop="options" required="false" default="none" type="Collection|array" available="*" />
137-
<x-option-table-row prop="optionComponent" required="false" default="select.option" type="string" available="select.option|select.user-option" />
138-
<x-option-table-row prop="clearable" required="false" default="true" type="boolean" available="boolean" />
139-
<x-option-table-row prop="searchable" required="false" default="true" type="boolean" available="boolean" />
140-
<x-option-table-row prop="multiselect" required="false" default="false" type="boolean" available="boolean" />
141-
<x-option-table-row prop="icon" required="false" default="none" type="string" available="all heroicons" />
142-
<x-option-table-row prop="rightIcon" required="false" default="selector" type="string" available="all heroicons" />
180+
<x-option-table-row prop="label" required="false" default="none" type="string" available="*" />
181+
<x-option-table-row prop="placeholder" required="false" default="none" type="string" available="*" />
182+
<x-option-table-row prop="option-value" required="false" default="none" type="string" available="*" />
183+
<x-option-table-row prop="option-label" required="false" default="none" type="string" available="*" />
184+
<x-option-table-row prop="options" required="false" default="none" type="Collection|array" available="*" />
185+
<x-option-table-row prop="flip-options" required="false" default="false" type="boolean" />
186+
<x-option-table-row prop="option-key-value" required="false" default="false" type="boolean" />
187+
<x-option-table-row prop="clearable" required="false" default="true" type="boolean" available="boolean" />
188+
<x-option-table-row prop="searchable" required="false" default="true" type="boolean" available="boolean" />
189+
<x-option-table-row prop="multiselect" required="false" default="false" type="boolean" available="boolean" />
190+
<x-option-table-row prop="icon" required="false" default="none" type="string" available="all heroicons" />
191+
<x-option-table-row prop="rightIcon" required="false" default="selector" type="string" available="all heroicons" />
192+
<x-option-table-row prop="async-data required="false" default="none" type="string" available="all endpoints" />
193+
<x-option-table-row prop="empty-message required="false" default="__('wireui::messages.empty_options')" type="string" available="*" />
194+
<x-option-table-row prop="template" required="false" default="select.option" type="string" available="select.option|select.user-option" />
143195
</x-options-table>
144196

145197
<div id="default-option">
146198
<x-section.title href="#default-option" title="Default Option" />
147199
<x-options-table class="mt-2 mb-6 w-full" :available="false">
148-
<x-option-table-row prop="label" required="false" default="none" type="string" />
149-
<x-option-table-row prop="value" required="false" default="none" type="string" />
200+
<x-option-table-row prop="label" required="false" default="none" type="string|null" />
201+
<x-option-table-row prop="value" required="true" default="none" type="ayn" />
150202
<x-option-table-row prop="readonly" required="false" default="false" type="boolean" />
151203
<x-option-table-row prop="disabled" required="false" default="false" type="boolean" />
152-
<x-option-table-row prop="option" required="false" default="none" type="array" />
204+
<x-option-table-row prop="option" required="false" default="none" type="Model|stdClass|array|null" />
153205
</x-options-table>
154206
</div>
155207

156208
<div id="user-option">
157209
<x-section.title href="#user-option" title="User Option" />
158210
<x-options-table class="mt-2 mb-6 w-full" :available="false">
159-
<x-option-table-row prop="label" required="false" default="none" type="string" />
160-
<x-option-table-row prop="value" required="false" default="none" type="string" />
211+
<x-option-table-row prop="label" required="true" default="none" type="string|null" />
212+
<x-option-table-row prop="value" required="true" default="none" type="any" />
161213
<x-option-table-row prop="readonly" required="false" default="false" type="boolean" />
162214
<x-option-table-row prop="disabled" required="false" default="false" type="boolean" />
163-
<x-option-table-row prop="img" required="false" default="none" type="string" />
164-
<x-option-table-row prop="option" required="false" default="none" type="array" />
215+
<x-option-table-row prop="src" required="true" default="none" type="string|null" />
216+
<x-option-table-row prop="option" required="true" default="none" type="Model|stdClass|array|null" />
165217
</x-options-table>
166218
</div>
167219

168220
<div id="select-events">
169221
<x-section.title href="#select-events" title="Select Events" />
170222
<x-code language="html" :contents="$selectEvents" />
171223
</div>
224+
</div>
172225
</div>

0 commit comments

Comments
 (0)