Slideover feature

composer.json

@@ -1,5 +1,5 @@
 {
-    "name": "lara-zeus/accordion",
+    "name": "bobimicroweber/accordion",
     "description": "Zeus Accordion is filamentphp layout component to group components",
     "keywords": [
         "laravel",

resources/views/components/accordion-slideover/index.blade.php

@@ -0,0 +1,43 @@
+@props([
+    'activeAccordion' => 1,
+    'slideOverDirection' => 'right',
+])
+<div x-data="{
+        activeAccordion: 'accordion-{{ $activeAccordion }}',
+        setActiveAccordion(id) {
+            this.activeAccordion = (this.activeAccordion == id) ? '' : id;
+            this.onlyOne = true;
+        },
+        onlyOne: false,
+        backToOther() {
+            this.activeAccordion = 0;
+            this.onlyOne = false;
+        }
+    }"
+
+    class="fi-accordion w-full flex flex-col gap-y-4"
+>
+    @if($slideOverDirection == 'right')
+        <style>
+            .fi-accordion-item-slide {
+                animation: fi-accordion-item-slide-right 0.3s ease-out;
+            }
+            @keyframes fi-accordion-item-slide-right {
+                0% { opacity: 0; transform: translateX(100%); }
+                100% { opacity: 1; transform: translateX(0); }
+            }
+        </style>
+    @else
+        <style>
+            .fi-accordion-item-slide {
+                animation: fi-accordion-item-slide-left 0.3s ease-out;
+            }
+            @keyframes fi-accordion-item-slide-left {
+                0% { opacity: 0; transform: translateX(-100%); }
+                100% { opacity: 1; transform: translateX(0); }
+            }
+        </style>
+    @endif
+
+    {{ $slot }}
+</div>

resources/views/components/accordion-slideover/item-header.blade.php

@@ -0,0 +1,44 @@
+<div
+
+    class="flex gap-4 items-center justify-between w-full p-4 text-start select-none">
+
+    <button type="button" x-show="onlyOne"
+            class="group relative inline-block overflow-hidden rounded-full border border-gray-100 bg-gray-200 text-sm font-medium text-slate-800 hover:text-violet-600 focus:outline-none focus:ring active:bg-indigo-600 active:text-white"
+            x-on:click="backToOther()"
+    >
+        <span class="ease absolute left-0 top-0 h-0 w-0 border-t-2 border-violet-600 transition-all duration-200 group-hover:w-full"></span>
+        <span class="ease absolute right-0 top-0 h-0 w-0 border-r-2 border-violet-600 transition-all duration-200 group-hover:h-full"></span>
+        <span class="ease absolute bottom-0 right-0 h-0 w-0 border-b-2 border-violet-600 transition-all duration-200 group-hover:w-full"></span>
+        <span class="ease absolute bottom-0 left-0 h-0 w-0 border-l-2 border-violet-600 transition-all duration-200 group-hover:h-full"></span>
+
+        @svg('heroicon-m-chevron-left','w-6 h-6 duration-200 ease-out')
+    </button>
+
+    <button type="button"
+            class="flex items-center justify-between w-full text-start select-none"
+
+            @click="()=> {
+                    if (!onlyOne) {
+                        setActiveAccordion(id);
+                    }
+                }">
+                <span class="flex gap-2 font-medium items-center justify-center">
+                    @if ($icon !== null)
+                        <x-filament::icon
+                            :icon="$icon"
+                            class="fi-accordion-item-icon h-6 w-6 shrink-0 transition duration-75"
+                        />
+                    @endif
+                    {{ $label }}
+
+                    @if (filled($badge))
+                        <x-filament::badge :color="$badgeColor" size="sm" class="w-max">
+                            {{ $badge }}
+                        </x-filament::badge>
+                    @endif
+                </span>
+        <span x-show="activeAccordion !== id">
+             @svg('heroicon-m-chevron-right','w-4 h-4 duration-200 ease-out')
+        </span>
+    </button>
+</div>

resources/views/components/accordion-slideover/item.blade.php

@@ -0,0 +1,52 @@
+@props([
+    'activeAccordion' => 1,
+    'onlyOne' => false,
+    'icon' => null,
+    'label' => '',
+    'badge' => null,
+    'badgeColor' => null,
+])
+
+<div
+    x-data="{
+        id: $id('accordion')
+    }"
+
+    :x-on:form-validation-error.window="
+        $nextTick(() => {
+            let error = $el.querySelector('[data-validation-error]');
+
+            if (! error) {
+                return
+            }
+
+            setActiveAccordion($id('accordion'));
+        })
+    "
+
+    x-show="()=> {
+        if (onlyOne) {
+            return activeAccordion == id;
+        }
+        return true;
+    }"
+
+    class="rounded-xl ring-1 ring-gray-950/10 dark:ring-white/20 fi-accordion-item group">
+
+    <div x-show="activeAccordion !== id">
+        @include('zeus-accordion::components.accordion-slideover.item-header')
+    </div>
+
+    <div
+        x-show="activeAccordion == id"
+        x-transition:enter="fi-accordion-item-slide">
+
+        @include('zeus-accordion::components.accordion-slideover.item-header')
+
+        <div class="p-4" x-show="activeAccordion == id">
+            {{ $slot }}
+        </div>
+
+    </div>
+
+</div>

resources/views/forms/accordions.blade.php

@@ -1,3 +1,10 @@
+@php
+    $isIsolated = $isIsolated();
+    $isSlideOver = $isSlideOver();
+    $getActiveAccordion = $getActiveAccordion();
+    $getSlideOverDirection = $getSlideOverDirection();
+@endphp
+
 <div
     wire:ignore.self
     x-cloak
@@ -10,15 +17,27 @@
             ->merge($getExtraAttributes(), escape: false)
             ->merge($getExtraAlpineAttributes(), escape: false)
             ->class([
-                'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
+               $isSlideOver ? '' : 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
             ])
     }}
 >
 
-    @php
-        $isIsolated = $isIsolated();
-        $getActiveAccordion = $getActiveAccordion();
-    @endphp
+    @if ($isSlideOver)
+
+        <x-zeus-accordion::accordion-slideover :slideOverDirection="$getSlideOverDirection" :activeAccordion="$getActiveAccordion">
+            @foreach ($getChildComponentContainer()->getComponents() as $accordion)
+                <x-zeus-accordion::accordion-slideover.item
+                    :label="$accordion->getLabel()"
+                    :icon="$accordion->getIcon()"
+                    :badge="$accordion->getBadge()"
+                    :badge-color="$accordion->getBadgeColor()"
+                    :activeAccordion="$getActiveAccordion">
+                    {{ $accordion }}
+                </x-zeus-accordion::accordion-slideover.item>
+            @endforeach
+        </x-zeus-accordion::accordion-slideover>
+
+    @else
 
     <x-zeus-accordion::accordion :activeAccordion="$getActiveAccordion">
         @foreach ($getChildComponentContainer()->getComponents() as $accordion)
@@ -33,4 +52,7 @@
             </x-zeus-accordion::accordion.item>
         @endforeach
     </x-zeus-accordion::accordion>
+
+    @endif
+
 </div>

src/Concerns/CanBeSlided.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace LaraZeus\Accordion\Concerns;
+
+use Closure;
+
+trait CanBeSlided
+{
+    protected bool | Closure $isSlideOver = false;
+    protected string | Closure $slideOverDirection = 'right';
+
+    public function slideOver(string | null $slideOverDirection = null): static
+    {
+        $this->isSlideOver = true;
+
+        if ($slideOverDirection) {
+            $this->slideOverDirection = $slideOverDirection;
+        }
+
+        return $this;
+    }
+
+    public function slideOverRight()
+    {
+        return $this->slideOver('right');
+    }
+
+    public function slideOverLeft()
+    {
+        return $this->slideOver('left');
+    }
+
+    public function isSlideOver(): bool
+    {
+        return $this->evaluate($this->isSlideOver);
+    }
+
+    public function getSlideOverDirection()
+    {
+        return $this->evaluate($this->slideOverDirection);
+
+    }
+}

src/Forms/Accordions.php

@@ -6,10 +6,12 @@
 use Filament\Forms\Components\Component;
 use Filament\Support\Concerns;
 use LaraZeus\Accordion\Concerns\CanBeIsolated;
+use LaraZeus\Accordion\Concerns\CanBeSlided;
 
 class Accordions extends Component
 {
     use CanBeIsolated;
+    use CanBeSlided;
     use Concerns\HasExtraAlpineAttributes;
 
     protected string $view = 'zeus-accordion::forms.accordions';