From e29b9c401fbc5d437bd4bda8d78227435d257fa5 Mon Sep 17 00:00:00 2001
From: Roy Duineveld <royduineveld@gmail.com>
Date: Wed, 27 Nov 2024 16:11:42 +0100
Subject: [PATCH] Tag component prefix (#9)

---
 README.md                                     |  8 +++----
 demo/components.html                          | 21 +++++++------------
 .../views/components/button/base.blade.php    |  4 ++--
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index faf20ea..ac42c47 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ We don't provide a input + label combination component as you'll end up with att
 
 <a name="buttons"></a>
 
-The base button doesn't have any styling; here, we only use the `x-tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.
+The base button doesn't have any styling; here, we only use the `x-rapidez::tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.
 
 ![](.github/media/buttons.png)
 
@@ -128,16 +128,16 @@ Just like any other Blade component, check out the [Laravel Blade docs](https://
 </x-rapidez::accordion>
 ```
 
-#### x-tag
+#### Tag
 
 It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
 
 ##### Usage
 
 ```blade
-<x-tag is="span" class="font-bold">
+<x-rapidez::tag is="span" class="font-bold">
     Something
-</x-tag>
+</x-rapidez::tag>
 ```
 
 which will result in
diff --git a/demo/components.html b/demo/components.html
index bc53f84..508535d 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -193,29 +193,22 @@ <h2 class="font-bold text-lg">Button components</h2>
             <div class="grid grid-cols-5 gap-5">
                 <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed">
     Button
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
     Primary
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
     Secondary
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
     Outline
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
     Conversion
-</button>
-                <div class="flex flex-col gap-2">
+</button>                <div class="flex flex-col gap-2">
                     <strong>Slider:</strong>
                     <div class="flex items-center gap-2">
                         <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
     &lt;
-</button>
-                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
+</button>                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
     &gt;
-</button>
-                    </div>
+</button>                    </div>
                 </div>
             </div>
 
diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
index 402d83f..096815c 100644
--- a/resources/views/components/button/base.blade.php
+++ b/resources/views/components/button/base.blade.php
@@ -25,6 +25,6 @@
     $tag = $attributes->has('for') ? 'label' : $tag;
 @endphp
 
-<x-tag is="{{ $tag }}" {{ $attributes }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
     {{ $slot }}
-</x-tag>
+</x-rapidez::tag>