Skip to content

Commit de3ff06

Browse files
devajmeirelesdevajmeireles
committed
Document v3 list component, button group/unfocus variants, and bump Laravel to 13
1 parent 631df79 commit de3ff06

12 files changed

Lines changed: 729 additions & 302 deletions

File tree

‎app/Enums/Example.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ enum Example: string
100100
case Icon = 'Ui\\Icon';
101101
case Layout = 'Ui\\Layout';
102102
case Link = 'Ui\\Link';
103+
case List = 'Ui\\ListComponent';
103104
case Loading = 'Ui\\Loading';
104105
case Kbd = 'Ui\\Kbd';
105106
case KeyValue = 'Ui\\KeyValue';

‎app/Enums/Examples/V3/Ui/Button.php‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,32 @@ class Button
377377
<x-button.circle icon="bookmark" color="black" flat />
378378
HTML;
379379

380+
public const string UNFOCUS = <<<'HTML'
381+
<x-button text="With Focus" />
382+
<x-button text="Without Focus" unfocus />
383+
HTML;
384+
385+
public const string CIRCLE_UNFOCUS = <<<'HTML'
386+
<x-button.circle icon="x-mark" color="secondary" sm />
387+
<x-button.circle icon="x-mark" color="secondary" sm unfocus />
388+
HTML;
389+
390+
public const string GROUP_BASIC = <<<'HTML'
391+
<x-button.group>
392+
<x-button text="Years" color="secondary" />
393+
<x-button text="Months" color="secondary" />
394+
<x-button text="Days" color="secondary" />
395+
</x-button.group>
396+
HTML;
397+
398+
public const string GROUP_VERTICAL = <<<'HTML'
399+
<x-button.group vertical>
400+
<x-button text="List" icon="bars-4" color="secondary" />
401+
<x-button text="Grid" icon="squares-2x2" color="secondary" />
402+
<x-button text="Map" icon="map" color="secondary" />
403+
</x-button.group>
404+
HTML;
405+
380406
public const string CUSTOMIZATION = <<<'HTML'
381407
TallStackUi::customize()
382408
->button()
@@ -388,4 +414,10 @@ class Button
388414
->button('circle')
389415
->block('block', 'classes');
390416
HTML;
417+
418+
public const string CUSTOMIZATION_GROUP = <<<'HTML'
419+
TallStackUi::customize()
420+
->button('group')
421+
->block('wrapper.base', 'isolate inline-flex shadow-sm rounded-lg');
422+
HTML;
391423
}

‎app/Enums/Examples/V3/Ui/ListComponent.php‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<?php
2+
3+
namespace App\Enums\Examples\V3\Ui;
4+
5+
class ListComponent
6+
{
7+
public const string BASIC = <<<'HTML'
8+
<x-list>
9+
<x-list.items name="general" caption="1 server" />
10+
<x-list.items name="production" caption="12 servers" />
11+
<x-list.items name="staging" caption="3 servers" />
12+
</x-list>
13+
14+
<!-- or -->
15+
16+
@php
17+
// `$items` may be an array, a Collection, or any object that implements
18+
// `Illuminate\Contracts\Support\Arrayable`. Each entry is read with
19+
// `data_get`, so accessors and array keys both work. The only required
20+
// key is `name` — every other key is optional and accessible inside
21+
// `@interact('item_menu', $item)` as `$item['extra_key']`.
22+
$items = [
23+
['name' => 'general', 'caption' => '1 server'],
24+
['name' => 'production', 'caption' => '12 servers'],
25+
['name' => 'staging', 'caption' => '3 servers'],
26+
];
27+
@endphp
28+
29+
<x-list :items="$items" />
30+
HTML;
31+
32+
public const string LABEL_HINT = <<<'HTML'
33+
<x-list label="Tags" hint="Manage your tags here.">
34+
<x-list.items name="general" caption="1 server" />
35+
<x-list.items name="production" caption="12 servers" />
36+
</x-list>
37+
HTML;
38+
39+
public const string SEARCHABLE = <<<'HTML'
40+
<x-list label="Tags" searchable>
41+
<x-list.items name="general" caption="1 server" />
42+
<x-list.items name="production" caption="12 servers" />
43+
<x-list.items name="staging" caption="3 servers" />
44+
</x-list>
45+
HTML;
46+
47+
public const string SEARCH_PLACEHOLDER = <<<'HTML'
48+
<x-list label="Tags" searchable search-placeholder="Filter tags by name or caption">
49+
<x-list.items name="general" caption="1 server" />
50+
<x-list.items name="production" caption="12 servers" />
51+
</x-list>
52+
HTML;
53+
54+
public const string PER_ITEM_MENU = <<<'HTML'
55+
<x-list label="Tags" hint="Click an ellipsis to act on a tag.">
56+
<x-list.items name="general" caption="1 server">
57+
<x-slot:menu>
58+
<x-dropdown.items text="Edit" wire:click="edit('general')" />
59+
<x-dropdown.items text="Delete" wire:click="delete('general')" />
60+
</x-slot:menu>
61+
</x-list.items>
62+
<x-list.items name="production" caption="12 servers">
63+
<x-slot:menu>
64+
<x-dropdown.items text="Edit" wire:click="edit('production')" />
65+
<x-dropdown.items text="Delete" wire:click="delete('production')" />
66+
</x-slot:menu>
67+
</x-list.items>
68+
</x-list>
69+
HTML;
70+
71+
public const string LOOP_ITEMS = <<<'HTML'
72+
<x-list label="Tags" searchable>
73+
@foreach ($tags as $tag)
74+
<x-list.items :name="$tag->name" :caption="$tag->servers_count.' server(s)'">
75+
<x-slot:menu>
76+
<x-dropdown.items text="Edit" wire:click="edit({{ $tag->id }})" />
77+
<x-dropdown.items text="Delete" wire:click="delete({{ $tag->id }})" />
78+
</x-slot:menu>
79+
</x-list.items>
80+
@endforeach
81+
</x-list>
82+
HTML;
83+
84+
public const string DATA_DRIVEN = <<<'HTML'
85+
@php
86+
$tags = [
87+
['name' => 'general', 'caption' => '1 server'],
88+
['name' => 'production', 'caption' => '12 servers'],
89+
['name' => 'staging', 'caption' => '3 servers'],
90+
];
91+
@endphp
92+
93+
<x-list label="Tags" :items="$tags" searchable />
94+
HTML;
95+
96+
public const string DATA_DRIVEN_MENU = <<<'HTML'
97+
@php
98+
$tags = [
99+
['id' => 1, 'name' => 'general', 'caption' => '1 server'],
100+
['id' => 2, 'name' => 'production', 'caption' => '12 servers'],
101+
['id' => 3, 'name' => 'staging', 'caption' => '3 servers'],
102+
];
103+
@endphp
104+
105+
<x-list label="Tags" :items="$tags" searchable>
106+
@interact('item_menu', $item)
107+
<x-dropdown.items text="Edit" wire:click="edit('{{ $item['id'] }}')" />
108+
<x-dropdown.items text="Delete" wire:click="delete('{{ $item['id'] }}')" />
109+
@endinteract
110+
</x-list>
111+
HTML;
112+
113+
public const string HEIGHT = <<<'HTML'
114+
<!--
115+
The `height` attribute accepts one of `'40'`, `'60'`, `'80'` or `'96'`,
116+
which translate to `max-h-{n}` plus a custom-styled scrollbar.
117+
-->
118+
<x-list label="Tags" :items="$tags" searchable height="60" />
119+
HTML;
120+
121+
public const string EMPTY_SLOT = <<<'HTML'
122+
<!--
123+
The empty slot is shown when the list has zero items AND when
124+
the search filter matches none. The default falls back to the
125+
`ts-ui::messages.list.empty` translation key.
126+
-->
127+
<x-list label="Tags" searchable>
128+
<x-slot:empty>
129+
<div class="flex flex-col items-center gap-2 py-4">
130+
<p class="text-sm text-secondary-700 dark:text-dark-100">No tags configured yet.</p>
131+
<x-button text="Create tag" wire:click="create" />
132+
</div>
133+
</x-slot:empty>
134+
<x-list.items name="general" caption="1 server" />
135+
</x-list>
136+
HTML;
137+
138+
public const string RICH_INLINE = <<<'HTML'
139+
<x-list label="Features">
140+
<x-list.items name="signup-flow">
141+
<x-badge color="green" round xs>active</x-badge>
142+
</x-list.items>
143+
<x-list.items name="checkout-v2">
144+
<x-badge color="amber" round xs>rolling out</x-badge>
145+
</x-list.items>
146+
<x-list.items name="legacy-onboarding">
147+
<x-badge color="red" round xs>retired</x-badge>
148+
</x-list.items>
149+
</x-list>
150+
HTML;
151+
152+
public const string CUSTOMIZATION = <<<'HTML'
153+
TallStackUi::customize()
154+
->list()
155+
->block('block', 'classes');
156+
HTML;
157+
158+
public const string CUSTOMIZATION_ITEMS = <<<'HTML'
159+
TallStackUi::customize()
160+
->list('items')
161+
->block('block', 'classes');
162+
HTML;
163+
}

‎app/Http/Controllers/PageController.php‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,11 @@ class PageController
1414
{
1515
use VersionDiscovery;
1616

17-
/**
18-
* Bypass to the examples.
19-
*/
17+
/** Bypass to the examples */
2018
protected const array EXAMPLES = [
2119
'Integrations\Alpine' => 'Alpine',
2220
'StarterKit' => 'StarterKit',
21+
'Ui\List' => 'Ui\ListComponent',
2322
];
2423

2524
public function __invoke(Request $request, string $version, ?string $main = null, ?string $children = null): ViewContract|RedirectResponse

‎bootstrap/providers.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<?php
22

3+
use App\Providers\AppServiceProvider;
4+
35
return [
4-
App\Providers\AppServiceProvider::class,
6+
AppServiceProvider::class,
57
];

‎composer.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
"require": {
88
"php": "^8.4",
99
"guzzlehttp/guzzle": "^7.2",
10-
"laravel/framework": "^12.0",
10+
"laravel/framework": "^13.0",
1111
"laravel/mcp": "^0.6.0",
12-
"laravel/tinker": "^2.8",
12+
"laravel/tinker": "^3.0",
1313
"livewire/livewire": "^4.0",
1414
"symfony/yaml": "^7.2",
1515
"tallstackui/tallstackui": "^3.0",

0 commit comments

Comments
 (0)