adding wire:navigate

config/livewire.php

@@ -0,0 +1,160 @@
+<?php
+
+return [
+
+    /*
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
+    |
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'components.layouts.app',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
+        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
+    |
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
+    |
+    */
+
+    'render_on_redirect' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#ff267d',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];

resources/views/components/available-configuration.blade.php

@@ -1,5 +1,5 @@
 <x-section title="Configurations" disable-copy>
     <div class="mt-2 rounded-lg bg-white p-6 text-gray-500 shadow-md dark:bg-slate-800/50 dark:text-gray-400">
-        This component contains settings available in the configuration file. <a href="{{ route('documentation.configuration') }}" class="underline">Click here to learn more.</a>
+        This component contains settings available in the configuration file. <a href="{{ route('documentation.configuration') }}" wire:navigate class="underline">Click here to learn more.</a>
     </div>
 </x-section>

resources/views/components/layout/navigation/link.blade.php

@@ -1,4 +1,9 @@
-@props(['text' => null, 'href' => null, 'activated' => null, 'new' => false])
+@props([
+    'text' => null,
+    'href' => null,
+    'activated' => null,
+    'new' => false
+])
 
 @php
     use Illuminate\Support\Facades\Route;
@@ -10,7 +15,7 @@
         'transition inline-flex items-center gap-x-2',
         'text-gray-500 dark:text-gray-400' => ! $activated,
         'text-pink-700 dark:text-pink-500' => $activated,
-    ]) }}>
+    ]) }} wire:navigate>
     @if ($activated)
         <x-icon name="arrow-small-right"
                 class="h-4 w-3" />

resources/views/components/top-bar.blade.php

@@ -1,5 +1,5 @@
 <x-banner :color="['background' => 'bg-pink-900', 'text' => 'text-white']"
           :until="now()->addWeek()">
     <b>New version 1.30.0 is now available</b> 🎉
-    <a class="underline" href="{{ route('documentation.command').'#find-component' }}">Introducing a useful command to search for component usage.</a>
+    <a class="underline" href="{{ route('documentation.command').'#find-component' }}" wire:navigate>Introducing a useful command to search for component usage.</a>
 </x-banner>

resources/views/documentation/command.blade.php

@@ -14,14 +14,14 @@
     </x-section>
     <x-section title="Setup Icons" disable-copy>
         <p>
-            Command to setup icons. <a class="underline" href="{{ route('documentation.ui.icon') }}">
+            Command to setup icons. <a class="underline" href="{{ route('documentation.ui.icon') }}" wire:navigate>
                 See the details of the command and how to use it by clicking here.
             </a>
         </p>
     </x-section>
     <x-section title="Setup Prefix" disable-copy>
         <p>
-            Command to setup prefix. <a class="underline" href="{{ route('documentation.installation').'#component-prefix' }}">
+            Command to setup prefix. <a class="underline" href="{{ route('documentation.installation').'#component-prefix' }}" wire:navigate>
                 See the details of the command and how to use it by clicking here.
             </a>
         </p>

resources/views/documentation/contribution.blade.php

@@ -49,7 +49,7 @@
         <p>11. In the same <x-block>composer.json</x-block> file, change the <x-block>minimum-stability</x-block> to <x-block>dev</x-block></p>
         <p>12. After that, run the following command in the terminal:</p>
         <x-code language="shell" :contents="$command" />
-        <p>13. <a href="{{ route('documentation.installation') }}" class="underline">Install the TallStackUI</a> in the Laravel project following the guide <i class="font-bold">(skip the step 1 of the tutorial)</i></p>
+        <p>13. <a href="{{ route('documentation.installation') }}" wire:navigate class="underline">Install the TallStackUI</a> in the Laravel project following the guide <i class="font-bold">(skip the step 1 of the tutorial)</i></p>
         <p>14. You are ready to start the work!</p>
     </x-section>
     <x-section title="Dusk Tests" disable-copy>

resources/views/documentation/faq.blade.php

@@ -33,7 +33,7 @@
     </x-section>
     <x-section title="Can I use TallStackUI at the same time as using other UI libraries?" disable-copy>
         <p>
-            Yes, totally! TallStackUI components support a <a href="{{ route('documentation.installation').'#component-prefix' }}" class="underline">prefix key</a>,
+            Yes, totally! TallStackUI components support a <a href="{{ route('documentation.installation').'#component-prefix' }}" wire:navigate class="underline">prefix key</a>,
             which consists of prefixing TallStackUI components avoiding conflicts in component names of other libraries.
         </p>
     </x-section>
@@ -47,7 +47,7 @@
             <li>
                 <span class="font-semibold">Soft Personalization:</span>
                 <p class="mt-2">
-                    <a href="{{ route('documentation.personalization.soft') }}" class="underline">Soft Personalization is an innovative and unique method, created exclusively by TallStackUI,</a>
+                    <a href="{{ route('documentation.personalization.soft') }}" wire:navigate class="underline">Soft Personalization is an innovative and unique method, created exclusively by TallStackUI,</a>
                     which allows components to be personalized at runtime, through a service provider.
                     <span class="font-semibold">The idea behind soft personalization is to tap into personalizable blocks of each
                     component and change your content.</span> Although it may seem limited, soft personalization
@@ -60,11 +60,11 @@
                 <span class="font-semibold">Deep Personalization:</span>
                 <p class="mt-2">
                     While soft personalization is, let's say, superficial, but still powerful for tasks of changing
-                    the original content, <a href="{{ route('documentation.personalization.deep') }}" class="underline">
+                    the original content, <a href="{{ route('documentation.personalization.deep') }}" wire:navigate class="underline">
                     deep personalization consists of extending the original PHP component classes
                     and changing their content as you want, as well as directly changing the related Blade files to the
                     component.</a> This method of personalization will undoubtedly require more technical knowledge, which is
-                    why <a href="{{ route('documentation.personalization.soft') }}" class="underline">Soft Personalization</a>
+                    why <a href="{{ route('documentation.personalization.soft') }}" wire:navigate class="underline">Soft Personalization</a>
                     was created so that even if the developer is a beginner, he can personalize the components with ease.
                 </p>
             </li>
@@ -107,7 +107,7 @@
         <p>
             There are several ways to contribute to TallStackUI, from the sponsorship program, as mentioned above,
             to share the library or offering help with code by sending pull requests.
-            <a href="{{ route('documentation.contribution') }}" class="underline">Read the guide on how to prepare a development environment to submit a pull request to TallStackUI.</a>
+            <a href="{{ route('documentation.contribution') }}" wire:navigate class="underline">Read the guide on how to prepare a development environment to submit a pull request to TallStackUI.</a>
         </p>
     </x-section>
     <x-section title="How to follow news from TallStackUI?" disable-copy>

resources/views/documentation/helpers/dark-theme.blade.php

@@ -36,7 +36,7 @@
         <x-warning>
             <ul class="list-decimal list-inside text-sm marker:font-bold">
                 <li>This button must be covered by the layout that received the <b>tallstackui_darkTheme</b> helper.</li>
-                <li>If you prefer, <a href="{{ route('documentation.ui.theme-switch') }}" class="underline" >TallStackUI offer the Theme Switch component</a> to easily manage the dark theme.</li>
+                <li>If you prefer, <a href="{{ route('documentation.ui.theme-switch') }}" wire:navigate class="underline">TallStackUI offer the Theme Switch component</a> to easily manage the dark theme.</li>
             </ul>
         </x-warning>
         <p class="mt-2">4. Rebuild your assets:</p>

resources/views/documentation/helpers/debug.blade.php

@@ -56,7 +56,7 @@
         <p>
             Debug mode has a settings section in the TallStackUI configuration file.
             Through this configuration, you can configure several things, such as ignore debug
-            mode for specific components. <a href="{{ route('documentation.configuration') }}" class="underline" target="_blank">
+            mode for specific components. <a href="{{ route('documentation.configuration') }}" wire:navigate class="underline" target="_blank">
             Click here to know how to publish the configuration file.</a>
         </p>
         <x-code :contents="$configuration" disable-copy />

resources/views/documentation/interactions/toast.blade.php

@@ -42,7 +42,7 @@
             <livewire:documentation.interactions.toast.timeout/>
         </x-preview>
         <p class="mt-2">
-            <u>Starting from version 1.14.2</u>, you can set a default timeout through <a href="{{ route('documentation.configuration') }}" class="underline">configuration file:</a>
+            <u>Starting from version 1.14.2</u>, you can set a default timeout through <a href="{{ route('documentation.configuration') }}" wire:navigate class="underline">configuration file:</a>
         </p>
         <x-code :contents="$defaultTime" disable-copy />
     </x-section>
@@ -51,7 +51,7 @@
             <livewire:documentation.interactions.toast.expandable/>
         </x-preview>
         <p class="mt-2">
-            You can configure Toast to be extensible by default in <a href="{{ route('documentation.configuration') }}" class="underline">the configuration file.</a> When you
+            You can configure Toast to be extensible by default in <a href="{{ route('documentation.configuration') }}" wire:navigate class="underline">the configuration file.</a> When you
             do that, you can optionally ignore the expandable for specific Toast:
         </p>
         <x-code :contents="$ignoringExpandable" disable-copy />

resources/views/documentation/personalization/color.blade.php

@@ -17,7 +17,7 @@
         </p>
     </x-section>
     <x-warning class="mb-4">
-        If you are looking for how to create custom colors, <a href="{{ route('documentation.personalization.deep').'#create-custom-colors' }}" class="underline">use this guide.</a>
+        If you are looking for how to create custom colors, <a href="{{ route('documentation.personalization.deep').'#create-custom-colors' }}" wire:navigate class="underline">use this guide.</a>
     </x-warning>
     <x-section title="Personalizing Colors" disable-copy>
         <p class="mb-4">1. Open the TailwindCSS configuration file and enter the following content:</p>

resources/views/documentation/personalization/concept.blade.php

@@ -20,15 +20,15 @@
     <x-section class="grid grid-cols-2 gap-4" disable-copy>
         <div class="col-span-full md:col-span-1">
             <div class="bg-white dark:bg-slate-800 p-6 rounded-lg">
-                <a class="inline-flex items-center gap-2" href="{{ route('documentation.personalization.soft') }}">
+                <a class="inline-flex items-center gap-2" href="{{ route('documentation.personalization.soft') }}" wire:navigate>
                     <u>Soft</u> Personalization
                     <x-icon name="arrow-up-right" class="h-5 w-5 text-pink-500" />
                 </a>
             </div>
         </div>
         <div class="col-span-full md:col-span-1">
             <div class="bg-white dark:bg-slate-800 p-6 rounded-lg">
-                <a class="inline-flex items-center gap-2" href="{{ route('documentation.personalization.deep') }}">
+                <a class="inline-flex items-center gap-2" href="{{ route('documentation.personalization.deep') }}" wire:navigate>
                     <u>Deep</u> Personalization
                     <x-icon name="arrow-up-right" class="h-5 w-5 text-pink-500" />
                 </a>

resources/views/documentation/personalization/deep.blade.php

@@ -18,7 +18,7 @@
     </x-section>
     <x-section title="Publishing Configuration File" disable-copy>
         <p>
-            <a class="underline" href="{{ route('documentation.configuration') }}">To start deep personalization you must publish the TallStackUI configuration file.</a>
+            <a class="underline" href="{{ route('documentation.configuration') }}" wire:navigate>To start deep personalization you must publish the TallStackUI configuration file.</a>
         </p>
     </x-section>
     <x-section title="Override Component Class" disable-copy>
@@ -43,7 +43,7 @@ classes come from. <u>This method must return an array with the name of the pers
         </p>
         <x-warning>
             Even if you prefer to use deep personalization,
-            <a href="{{ route('documentation.personalization.soft') }}" class="underline">soft personalization</a> can still be applied to components.
+            <a href="{{ route('documentation.personalization.soft') }}" wire:navigate class="underline">soft personalization</a> can still be applied to components.
         </x-warning>
     </x-section>
     <x-section title="Override Component Colors" disable-copy>

resources/views/documentation/personalization/soft.blade.php

@@ -20,7 +20,7 @@
     <x-section title="Example of Component Structure" disable-copy>
         <div class="mb-4 inline-flex items-center gap-1">
             <p>
-                Example of the <a class="underline" href="{{ route('documentation.ui.avatar') }}">Avatar</a> component classes
+                Example of the <a href="{{ route('documentation.ui.avatar') }}" wire:navigate class="underline">Avatar</a> component classes
                 <x-outdated-contente-tooltip />
             </p>
         </div>