Merge pull request #36 from tallstackui/1.34.0

1.34.0
tallstackui · Aug 5, 2024 · 9056cfe · 9056cfe
2 parents bdc8838 + 2eb34c1
commit 9056cfe
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 20 deletions.
diff --git a/app/Enums/Examples/Ui/Avatar.php b/app/Enums/Examples/Ui/Avatar.php
@@ -103,6 +103,21 @@ class Avatar
     <x-avatar color="white" />
     HTML;
 
+    public const BORDERLESS = <<<'HTML'
+    <x-avatar color="primary" borderless />
+    HTML;
+
+    public const IMAGE = <<<'HTML'
+    <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" xs />
+    <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" sm />
+    <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" md />
+    <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" lg />
+    HTML;
+
+    public const IMAGE_ALT = <<<'HTML'
+    <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" text="alt-text-goes-here" />
+    HTML;
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->avatar()

diff --git a/app/Enums/Examples/Ui/Link.php b/app/Enums/Examples/Ui/Link.php
@@ -91,10 +91,8 @@ class Link
     HTML;
 
     public const NAVIGATE = <<<'HTML'
-    <!-- For `wire:navigate` -->
     <x-link :href="route('route-name-goes-here')" text="Navigate" navigate />
 
-    <!-- For `wire:navigate.hover` -->
     <x-link :href="route('route-name-goes-here')" text="Navigate Hover" navigate-hover />
     HTML;
 

diff --git a/app/Enums/Examples/Ui/Table.php b/app/Enums/Examples/Ui/Table.php
@@ -61,6 +61,8 @@ public function with(): array
                 'headers' => [
                     ['index' => 'id', 'label' => '#'],
                     ['index' => 'name', 'label' => 'Member'],
+                    // You can use `unescaped` to render raw HTML  // [tl! highlight:1]
+                    ['index' => 'role', 'label' => '<b>Role</b>', 'unescaped' => true],
                 ],
                 'rows' => User::all(),
             ];
@@ -308,6 +310,30 @@ public function with(): array
     </x-table>
     HTML;
 
+    public const SELECTABLE = <<<'HTML'
+    <!-- This is a resumed example without the full explanation -->
+    
+    <!-- You need to create a public array property in the component to store 
+    the selected rows. In this example we are using the `selected` property, 
+    but you can choose any name, as long as it is an array. -->
+
+    <x-table ... selectable wire:model="selected" />
+    HTML;
+
+    public const CLICKABLE = <<<'HTML'
+    <!-- This is a resumed example without the full explanation -->
+
+    <x-table ... link="https://google.com.br/?user={id}" />
+    
+    <x-table ... link="https://google.com.br/?user={name}" />
+    
+    <!-- Using dot notation to use relationship data: -->
+    <x-table ... link="https://google.com.br/?postcode={address.postcode}" />
+
+    <!-- You can use blank to open the link in a new tab -->
+    <x-table ... link="https://google.com.br/?user={id}" blank />
+    HTML;
+
     public const COLUMNS = <<<'HTML'
     <?php
 

diff --git a/composer.json b/composer.json
@@ -59,6 +59,7 @@
         "ci": [
             "./vendor/bin/pint --test",
             "./vendor/bin/pest --type-coverage",
+            "@php artisan route:list",
             "./vendor/bin/pest"
         ]
     },

diff --git a/composer.lock b/composer.lock
diff --git a/contents/on-this-page.json b/contents/on-this-page.json
@@ -173,10 +173,9 @@
         "2": "Size Variations",
         "3": "Square Variations",
         "4": "Placeholder",
-        "5": "Modelable",
-        "6": "Modelable Custom Property",
-        "7": "Customizing Colors",
-        "8": "Other Options"
+        "5": "Borderless",
+        "6": "Modelable",
+        "7": "Image"
     },
     "docs.ui.badge": {
         "0": "Basic Usage",
@@ -461,7 +460,9 @@
         "7": "Sorting",
         "8": "Pagination",
         "9": "Slots",
-        "10": "Interacting With Data"
+        "10": "Selection",
+        "11": "Clickable",
+        "12": "Interacting With Data"
     },
     "docs.ui.theme-switch": {
         "0": "Concept",

diff --git a/resources/views/components/top-bar.blade.php b/resources/views/components/top-bar.blade.php
@@ -1,6 +1,6 @@
-<x-banner :color="['background' => 'bg-pink-900', 'text' => 'text-white']" :until="now()->subDay()">
-    <b>Version 1.33.0 released</b> 🎉
-    <a href="https://github.com/tailwindlabs/heroicons/releases/tag/v2.1.5" target="_blank">
-        <u class="font-semibold">We've updated Heroicons to version 2.1.5</u>, which adds some new icons.
+<x-banner :color="['background' => 'bg-pink-900', 'text' => 'text-white']" :until="now()->addWeek()">
+    <b>Version 1.34.0 is here!</b> 🎉
+    <a href="https://github.com/tallstackui/tallstackui/releases/tag/v1.34.0" target="_blank">
+        <u class="font-semibold">Lots of new features and some fixes</u>
     </a>
 </x-banner>
diff --git a/resources/views/documentation/internal/floating.blade.php b/resources/views/documentation/internal/floating.blade.php
@@ -10,4 +10,20 @@
         <livewire:documentation.personalization :$personalization component="floating" />
     </x-slot:personalization>
     <x-internals-warning />
+    <x-section class="mt-4">
+        <p>
+            <u>Starting from version 1.34.0</u> you can individually personalize the floating of each component.
+            Each component that uses floating has a special <x-block>floating</x-block> that allows individual
+            soft personalization of that component's floating. Here is the list of components that use floating:
+        </p>
+        <ul class="mt-2 list-decimal list-inside">
+            <li><a href="{{ route('documentation.form.input') }}" wire:navigate>Form Date</a></li>
+            <li><a href="{{ route('documentation.form.time') }}" wire:navigate>Form Time</a></li>
+            <li><a href="{{ route('documentation.form.password') }}" wire:navigate>Form Password</a></li>
+            <li><a href="{{ route('documentation.form.upload') }}" wire:navigate>Form Upload</a></li>
+            <li><a href="{{ route('documentation.form.color') }}" wire:navigate>Form Color</a></li>
+            <li><a href="{{ route('documentation.ui.dropdown') }}" wire:navigate>Dropdown</a></li>
+            <li><a href="{{ route('documentation.form.select') }}" wire:navigate>Select</a></li>
+        </ul>
+    </x-section>
 </x-layout>
diff --git a/resources/views/documentation/ui/avatar.blade.php b/resources/views/documentation/ui/avatar.blade.php
@@ -94,6 +94,11 @@
             </div>
         </x-preview>
     </x-section>
+    <x-section title="Borderless" description="An option to remove the default border." new>
+        <x-preview language="blade" :contents="$borderless">
+            <x-avatar color="primary" borderless />
+        </x-preview>
+    </x-section>
     <x-separator text="Modelable" />
     <x-section title="Modelable">
         <x-slot:description>
@@ -135,4 +140,19 @@
             />
         </x-preview>
     </x-section>
+    <x-separator text="Image" />
+    <x-section title="Image" description="An option to use an image as avatar." new>
+        <x-preview language="blade" :contents="$image">
+            <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" xs />
+            <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" sm />
+            <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" md />
+            <x-avatar image="https://aj.dev.br/assets/images/aj.jpg" lg />
+        </x-preview>
+    </x-section>
+    <x-section title="Default Alt Text" new>
+        <x-preview language="blade" :contents="$imageAlt">
+            <x-avatar image="https://aj.dev.br/assets/images/aj.jpg"
+                      text="Taylor Otwell, Creator of Laravel" />
+        </x-preview>
+    </x-section>
 </x-layout>
diff --git a/resources/views/documentation/ui/table.blade.php b/resources/views/documentation/ui/table.blade.php
@@ -23,7 +23,7 @@
     <x-section title="Concept" disable-copy>
         <p>
             Although many packages can add table features to your project, <u>starting from
-                version 1.6.0</u> of TallStackUI you can take advantage of the simple table component,
+            version 1.6.0</u> of TallStackUI you can take advantage of the simple table component,
             but with all the basic features necessary for a table to work through Livewire components.
         </p>
     </x-section>
@@ -83,6 +83,16 @@
             <livewire:documentation.ui.table :mode="8" />
         </x-preview>
     </x-section>
+    <x-section title="Selection" new>
+        <x-preview language="blade" :contents="$selectable" :background="false">
+            <livewire:documentation.ui.table :mode="9" />
+        </x-preview>
+    </x-section>
+    <x-section title="Clickable" new>
+        <x-preview language="blade" :contents="$clickable" :background="false">
+            <livewire:documentation.ui.table :mode="10" />
+        </x-preview>
+    </x-section>
     <x-section title="Interacting With Data" disable-copy>
         <p>
             The table component provides a custom Blade directive <x-block>@verbatim @interact @endverbatim</x-block>

diff --git a/resources/views/livewire/documentation/ui/table.blade.php b/resources/views/livewire/documentation/ui/table.blade.php
@@ -14,14 +14,16 @@
 
     public ?string $search = null;
 
+    public array $selected = [1,2,3,4,5];
+
     public array $sort = [
         'column' => 'id',
         'direction' => 'desc',
     ];
 
     public function boot(): void
     {
-        $this->quantity = in_array($this->mode, [4, 5, 7, 8]) ? 2 : 10;
+        $this->quantity = in_array($this->mode, [4, 5, 7, 8]) ? 2 : 11;
     }
 
     public function updatingQuantity(): void
@@ -67,5 +69,9 @@ public function with(): array
         <x-table :$headers :$rows paginate persistent id="demo"/>
     @elseif ($mode === 8)
         <x-table :$headers :$rows paginate header="Header Slot" footer="Footer Slot" />
+    @elseif ($mode === 9)
+        <x-table :$headers :$rows :$sort selectable wire:model="selected" />
+    @elseif ($mode === 10)
+        <x-table :$headers :$rows link="https://google.com.br/?users={id}" blank />
     @endif
 </div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -89,10 +89,10 @@ class="h-full antialiased"
                                                     <x-button :href="route('documentation.get-started')"
                                                               color="pink"
                                                               position="right"
+                                                              wire:navigate
                                                               lg>
                                                         Get Started
                                                     </x-button>
-                                                    {{-- workaround... --}}
                                                     <div class="block dark:hidden">
                                                         <x-button href="https://github.com/tallstackui/tallstackui"
                                                                   target="_blank"