scoped personalization with classes

tallstackui · Jun 14, 2024 · b574196 · b574196
1 parent c7559ff
commit b574196
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/app/Enums/Examples/Personalization/SoftPersonalization.php b/app/Enums/Examples/Personalization/SoftPersonalization.php
@@ -251,6 +251,28 @@ public function boot(): void
     </x-alert>
     HTML;
 
+    public const SCOPED_PERSONALIZATION_WITH_CLASS_BLADE_EXAMPLE = <<<'HTML'
+    <x-alert :personalize="\App\ScopedPersonalization\Alert::class" />
+    HTML;
+
+    public const SCOPED_PERSONALIZATION_WITH_CLASS_PHP_EXAMPLE = <<<'HTML'
+    namespace App\ScopedPersonalization;
+    
+    class Alert
+    {
+        public function __invoke(array $classes): array
+        {
+            return [
+                'wrapper' => [
+                    'replace' => [
+                        'rounded-lg' => 'rounded-full',
+                    ],
+                ],
+            ];
+        }    
+    }
+    HTML;
+
     public const DATA = <<<'HTML'
     [
       "id" => null

diff --git a/resources/views/documentation/personalization/soft.blade.php b/resources/views/documentation/personalization/soft.blade.php
@@ -147,6 +147,20 @@ classes in an easy way in order to make modifications while maintaining the rest
             in the block name or wrong block name, the application will not generate a visual
             error for the end user, the personalization will just not be applied.
         </x-warning>
+        <p class="mt-2">
+            <u>Starting from version 1.30.0</u> you can pass a class name that contains a <x-block>__invoke</x-block> public method
+            to the <x-block>personalize</x-block> attribute to make the personalization more organized and reusable.
+            Let's take a look at an example:
+        </p>
+        <p class="mt-2">Blade:</p>
+        <x-code language="blade" :contents="$scopedPersonalizationWithClassBladeExample" disable-copy/>
+        <p>PHP:</p>
+        <x-code :contents="$scopedPersonalizationWithClassPhpExample" disable-copy/>
+        <p>
+            You may have noticed that in the example above we have an array called <x-block>$classes</x-block> as
+            the parameter of the <x-block>__invoke</x-block> method, this array is an array with all classes that
+            came from the original personalization defined to the component.
+        </p>
     </x-section>
     <x-section title="Tracing TailwindCSS Classes" disable-copy>
         <p class="mb-4">