Fix component prefix (#146)

* Fix component prefix No matter if components has custom prefix or not, we also register as these alias to avoid naming collision, because they are used inside some Mary's components itself. * WIP * WIP
robsontenorio · Nov 14, 2023 · 39d59b0 · 39d59b0
1 parent 29df3e4
commit 39d59b0
Show file tree

Hide file tree

Showing 18 changed files with 56 additions and 55 deletions.
diff --git a/src/MaryServiceProvider.php b/src/MaryServiceProvider.php
@@ -66,8 +66,14 @@ public function registerComponents()
         // Just rename <x-icon> provided by BladeUI Icons to <x-svg> to not collide with ours
         Blade::component('BladeUI\Icons\Components\Icon', 'svg');
 
-        // Also register as <x-icon> even if there is a prefix for Mary components
-        Blade::component('icon', Icon::class);
+        // No matter if components has custom prefix or not,
+        // we also register bellow alias to avoid naming collision,
+        // because they are used inside some Mary's components itself.
+        Blade::component('mary-icon', Icon::class);
+        Blade::component('mary-list-item', ListItem::class);
+        Blade::component('mary-menu', Menu::class);
+        Blade::component('mary-menu-item', MenuItem::class);
+        Blade::component('mary-header', Header::class);
 
         $prefix = config('mary.prefix');
 

diff --git a/src/View/Components/Alert.php b/src/View/Components/Alert.php
@@ -25,13 +25,13 @@ public function __construct(
     public function render(): View|Closure|string
     {
         return <<<'HTML'
-                <div 
-                    wire:key="{{ $uuid }}" 
-                    {{ $attributes->whereDoesntStartWith('class') }} 
+                <div
+                    wire:key="{{ $uuid }}"
+                    {{ $attributes->whereDoesntStartWith('class') }}
                     {{ $attributes->class(['alert rounded-md', 'shadow-md' => $shadow])}}
                 >
-                    @if($icon) 
-                        <x-icon :name="$icon" /> 
+                    @if($icon)
+                        <x-mary-icon :name="$icon" />
                     @endif
 
                     @if($title)

diff --git a/src/View/Components/Button.php b/src/View/Components/Button.php
@@ -78,7 +78,7 @@ public function render(): View|Closure|string
                     <!-- ICON -->
                     @if($icon)
                         <span @if($spinner) wire:loading.remove wire:target="{{ $spinnerTarget() }}" @endif>
-                            <x-icon :name="$icon" />
+                            <x-mary-icon :name="$icon" />
                         </span>
                     @endif
 
@@ -87,7 +87,7 @@ public function render(): View|Closure|string
                     <!-- ICON RIGHT -->
                     @if($iconRight)
                         <span @if($spinner) wire:loading.remove wire:target="{{ $spinnerTarget() }}" @endif>
-                            <x-icon :name="$iconRight" />
+                            <x-mary-icon :name="$iconRight" />
                         </span>
                     @endif
 

diff --git a/src/View/Components/Choices.php b/src/View/Components/Choices.php
@@ -177,12 +177,12 @@ public function render(): View|Closure|string
                         >
                             <!-- ICON  -->
                             @if($icon)
-                                <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
+                                <x-mary-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
                             @endif
 
                             <!-- CLEAR ICON  -->
                             @if(! $isReadonly())
-                                <x-icon @click="reset()"  name="o-x-mark" class="absolute top-1/2 right-8 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600" />
+                                <x-mary-icon @click="reset()"  name="o-x-mark" class="absolute top-1/2 right-8 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600" />
                             @endif
 
                             <!-- SELECTED OPTIONS -->
@@ -195,7 +195,7 @@ public function render(): View|Closure|string
                                     <template x-for="(option, index) in selectedOptions" :key="index">
                                         <div class="bg-primary/5 text-primary hover:bg-primary/10 dark:bg-primary/20 dark:hover:bg-primary/40 dark:text-inherit px-2 mr-2 mt-0.5 mb-1.5 last:mr-0 inline-block rounded cursor-pointer">
                                             <span x-text="option.{{ $optionLabel }}"></span>
-                                            <x-icon @click="toggle(option.{{ $optionValue }})" x-show="!isReadonly && !isSingle" name="o-x-mark" class="text-gray-500 hover:text-red-500" />
+                                            <x-mary-icon @click="toggle(option.{{ $optionValue }})" x-show="!isReadonly && !isSingle" name="o-x-mark" class="text-gray-500 hover:text-red-500" />
                                         </div>
                                     </template>
                                 @endif
@@ -256,7 +256,7 @@ class="border-l-4"
                                         @if($item)
                                             {{ $item($option) }}
                                         @else
-                                            <x-list-item :item="$option" :value="$optionLabel" :sub-value="$optionSubLabel" :avatar="$optionAvatar"  />
+                                            <x-mary-list-item :item="$option" :value="$optionLabel" :sub-value="$optionSubLabel" :avatar="$optionAvatar"  />
                                         @endif
                                     </div>
                                 @endforeach

diff --git a/src/View/Components/DatePicker.php b/src/View/Components/DatePicker.php
@@ -71,12 +71,12 @@ public function render(): View|Closure|string
 
                     <!-- ICON  -->
                     @if($icon)
-                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- RIGHT ICON  -->
                     @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- INLINE LABEL -->

diff --git a/src/View/Components/DateTime.php b/src/View/Components/DateTime.php
@@ -53,12 +53,12 @@ public function render(): View|Closure|string
 
                     <!-- ICON  -->
                     @if($icon)
-                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- RIGHT ICON  -->
                     @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- INLINE LABEL -->

diff --git a/src/View/Components/Dropdown.php b/src/View/Components/Dropdown.php
@@ -36,7 +36,7 @@ class="dropdown @if($right) dropdown-end @endif"
                     <!-- DEFAULT TRIGGER -->
                     <summary @click.prevent="open = !open" {{ $attributes->class(["btn normal-case"]) }}>
                         {{ $label }}
-                        <x-icon :name="$icon" />
+                        <x-mary-icon :name="$icon" />
                     </summary>
                 @endif
                 <ul @click="open = false" class="dropdown-content p-2 shadow menu z-[1] bg-base-100 dark:bg-base-200 rounded-box whitespace-nowrap">

diff --git a/src/View/Components/Input.php b/src/View/Components/Input.php
@@ -104,12 +104,12 @@ public function render(): View|Closure|string
 
                     <!-- ICON  -->
                     @if($icon)
-                        <x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- RIGHT ICON  -->
                     @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
+                        <x-mary-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 pointer-events-none" />
                     @endif
 
                     <!-- INLINE LABEL -->

diff --git a/src/View/Components/Main.php b/src/View/Components/Main.php
@@ -67,12 +67,12 @@ public function render(): View|Closure|string
 
                                      <!-- SIDEBAR COLLAPSE -->
                                     @if($sidebar->attributes['collapsible'])
-                                        <x-menu class="fixed bottom-0 hidden bg-inherit lg:block">
-                                            <x-menu-item
+                                        <x-mary-menu class="fixed bottom-0 hidden bg-inherit lg:block">
+                                            <x-mary-menu-item
                                                 @click="toggle"
                                                 icon="o-bars-3-bottom-right"
                                                 title="{{ $sidebar->attributes['collapse-text'] ?? $collapseText }}" />
-                                        </x-menu>
+                                        </x-mary-menu>
                                     @endif
                                 </div>
                             </div>

diff --git a/src/View/Components/Menu.php b/src/View/Components/Menu.php
@@ -29,7 +29,7 @@ public function render(): View|Closure|string
                             <div class="flex items-center gap-2">
 
                                 @if($icon)
-                                    <x-icon :name="$icon" class="w-4 h-4 inline-flex"  />
+                                    <x-mary-icon :name="$icon" class="w-4 h-4 inline-flex"  />
                                 @endif
 
                                 {{ $title }}

diff --git a/src/View/Components/MenuItem.php b/src/View/Components/MenuItem.php
@@ -66,7 +66,7 @@ public function render(): View|Closure|string
                         @endif
                     >
                         @if($icon)
-                            <x-icon :name="$icon" />
+                            <x-mary-icon :name="$icon" />
                         @endif
 
                         <span class="mary-hideable whitespace-nowrap">

diff --git a/src/View/Components/MenuSeparator.php b/src/View/Components/MenuSeparator.php
@@ -20,20 +20,20 @@ public function __construct(
     public function render(): View|Closure|string
     {
         return <<<'HTML'
-                <hr class="my-3"/>     
-                     
+                <hr class="my-3"/>
+
                 @if($title)
                     <li {{ $attributes->class(["menu-title text-inherit uppercase"]) }}>
                         <div class="flex items-center gap-2">
-                            
+
                             @if($icon)
-                                <x-icon :name="$icon"  />
+                                <x-mary-icon :name="$icon"  />
                             @endif
 
                             {{ $title }}
                         </div>
-                    </li>        
-                @endif                      
+                    </li>
+                @endif
             HTML;
     }
 }
diff --git a/src/View/Components/MenuSub.php b/src/View/Components/MenuSub.php
@@ -22,38 +22,38 @@ public function render(): View|Closure|string
         return <<<'HTML'
                 @aware(['activeBgColor' => 'bg-base-300'])
 
-                @php 
-                    $submenuActive = Str::contains($slot, 'mary-active-menu');                    
+                @php
+                    $submenuActive = Str::contains($slot, 'mary-active-menu');
                 @endphp
 
-                <li 
+                <li
                     x-data="
-                    { 
+                    {
                         show: @if($submenuActive) true @else false @endif,
-                        toggle(){                            
+                        toggle(){
                             // From parent Sidebar
                             if (this.collapsed) {
                                 this.show = true
                                 $dispatch('menu-sub-clicked');
                                 return
-                            }   
-                            
+                            }
+
                             this.show = !this.show
-                        }                        
+                        }
                     }"
                 >
                     <details :open="show" @if($submenuActive) open @endif>
                         <summary @click.prevent="toggle()" @class(["hover:text-inherit text-inherit", $activeBgColor => $submenuActive])>
                             @if($icon)
-                                <x-icon :name="$icon" class="inline-flex"  />
-                            @endif    
-                            <span class="mary-hideable">{{ $title }}</span>                            
+                                <x-mary-icon :name="$icon" class="inline-flex"  />
+                            @endif
+                            <span class="mary-hideable">{{ $title }}</span>
                         </summary>
                         <ul class="mary-hideable">
                             {{ $slot }}
-                        </ul>                        
+                        </ul>
                     </details>
-                </li>                
+                </li>
             HTML;
     }
 }
diff --git a/src/View/Components/Modal.php b/src/View/Components/Modal.php
@@ -40,7 +40,7 @@ public function render(): View|Closure|string
                 >
                     <div class="modal-box">
                         @if($title)
-                            <x-header :title="$title" :subtitle="$subtitle" size="text-2xl" :separator="$separator" class="mb-5" />
+                            <x-mary-header :title="$title" :subtitle="$subtitle" size="text-2xl" :separator="$separator" class="mb-5" />
                         @endif
 
                         <p class="">

diff --git a/src/View/Components/Select.php b/src/View/Components/Select.php
@@ -65,12 +65,12 @@ public function render(): View|Closure|string
 
                     <!-- ICON -->
                     @if($icon)
-                        <x-icon :name="$icon" class="absolute pointer-events-none top-1/2 -translate-y-1/2 left-3 text-gray-400" />
+                        <x-mary-icon :name="$icon" class="absolute pointer-events-none top-1/2 -translate-y-1/2 left-3 text-gray-400" />
                     @endif
 
                     <!-- RIGHT ICON  -->
                     @if($iconRight)
-                        <x-icon :name="$iconRight" class="absolute pointer-events-none top-1/2 right-8 -translate-y-1/2 text-gray-400 " />
+                        <x-mary-icon :name="$iconRight" class="absolute pointer-events-none top-1/2 right-8 -translate-y-1/2 text-gray-400 " />
                     @endif
 
                     <!-- INLINE LABEL -->

diff --git a/src/View/Components/Stat.php b/src/View/Components/Stat.php
@@ -42,7 +42,7 @@ public function render(): View|Closure|string
                     <div class="flex items-center gap-3">
                         @if($icon)
                             <div class="  {{ $color }}">
-                                <x-icon :name="$icon" class="w-9 h-9" />
+                                <x-mary-icon :name="$icon" class="w-9 h-9" />
                             </div>
                         @endif
 

diff --git a/src/View/Components/Tab.php b/src/View/Components/Tab.php
@@ -31,7 +31,7 @@ class="tab tab-bordered flex-none font-semibold"
                       >
 
                         @if($icon)
-                            <x-icon :name="$icon" class="mr-2" />
+                            <x-mary-icon :name="$icon" class="mr-2" />
                         @endif
 
                         {{ $label }}

diff --git a/src/View/Components/Table.php b/src/View/Components/Table.php
@@ -158,7 +158,7 @@ class="checkbox checkbox-sm checkbox-primary"
                                     <!-- EXPAND ICON -->
                                     @if($expandable)
                                         <td class="w-1 pr-0">
-                                            <x-icon
+                                            <x-mary-icon
                                                 name="o-chevron-down"
                                                 ::class="isExpanded({{ data_get($row, $expandableKey) }}) || '-rotate-90 !text-current !bg-base-200'"
                                                 class="cursor-pointer p-2 w-8 h-8 bg-base-300 rounded-lg"
@@ -220,11 +220,6 @@ class="cursor-pointer p-2 w-8 h-8 bg-base-300 rounded-lg"
                             @endforeach
                         </tbody>
                     </table>
-                    @php
-                        # TODO: workaround for bug when using slot with @scope on tables.
-                        # It seems it loses start/end context with @scope/@endscope. So I am just placing any hidden component here.
-                    @endphp
-                    <x-alert style="display:none" />
                 </div>
             HTML;
     }