Merge pull request #13 from OrangeJuiced/main

Allow customization of the card element

README.md

@@ -82,6 +82,9 @@ public static function form(Form $form): Form
                 ->gap('gap-5') // Gap between Icon and Description (Any TailwindCSS gap-* utility)
                 ->padding('px-4 px-6') // Padding around the deck (Any TailwindCSS padding utility)
                 ->direction('column') // Column | Row (Allows to place the Icon on top)
+                ->extraCardsAttributes([ // Extra Attributes to add to the card HTML element
+                    'class' => 'rounded-xl'
+                ])
                 ->extraOptionsAttributes([ // Extra Attributes to add to the option HTML element
                     'class' => 'text-3xl leading-none w-full flex flex-col items-center justify-center p-4'
                 ])

resources/views/forms/components/radio-deck.blade.php

@@ -38,7 +38,7 @@
                     $descriptionExists = $hasDescription($value);
                     $description = $getDescription($value);
                 @endphp
-                <div @class([
+                <div {{ $getExtraCardsAttributeBag()->class([
                     'flex w-full text-sm leading-6 rounded-lg bg-white dark:bg-gray-900',
                     $padding ?: 'px-4 py-2',
                     $gap ?: 'gap-5',
@@ -66,7 +66,7 @@
                         default
                             => 'fi-color-custom peer-checked:ring-custom-600 dark:peer-checked:ring-custom-500',
                     },
-                ]) @style([
+                ]) }} @style([
                     \Filament\Support\get_color_css_variables($color, shades: [600, 500]) => $color !== 'gray',
                 ])>
                     @if ($iconExists)

src/Forms/Components/RadioDeck.php

@@ -11,6 +11,7 @@
 use JaOcero\RadioDeck\Contracts\HasIcons;
 use JaOcero\RadioDeck\Intermediary\IntermediaryRadio;
 use JaOcero\RadioDeck\Traits\HasDirection;
+use JaOcero\RadioDeck\Traits\HasExtraCardsAttributes;
 use JaOcero\RadioDeck\Traits\HasExtraDescriptionsAttributes;
 use JaOcero\RadioDeck\Traits\HasExtraOptionsAttributes;
 use JaOcero\RadioDeck\Traits\HasGap;
@@ -22,6 +23,7 @@ class RadioDeck extends IntermediaryRadio
     use HasAlignment;
     use HasColor;
     use HasDirection;
+    use HasExtraCardsAttributes;
     use HasExtraDescriptionsAttributes;
     use HasExtraOptionsAttributes;
     use HasGap;

src/Traits/HasExtraCardsAttributes.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace JaOcero\RadioDeck\Traits;
+
+use Illuminate\View\ComponentAttributeBag;
+
+trait HasExtraCardsAttributes
+{
+    /**
+     * @var array<array<mixed> | Closure>
+     */
+    protected array $extraCardsAttributes = [];
+
+    /**
+     * @param  array<mixed> | Closure  $attributes
+     */
+    public function extraCardsAttributes(array|Closure $attributes, bool $merge = false): static
+    {
+        if ($merge) {
+            $this->extraCardsAttributes[] = $attributes;
+        } else {
+            $this->extraCardsAttributes = [$attributes];
+        }
+
+        return $this;
+    }
+
+    /**
+     * @return array<mixed>
+     */
+    public function getExtraCardsAttributes(): array
+    {
+        $temporaryAttributeBag = new ComponentAttributeBag();
+
+        foreach ($this->extraCardsAttributes as $extraCardsAttributes) {
+            $temporaryAttributeBag = $temporaryAttributeBag->merge($this->evaluate($extraCardsAttributes));
+        }
+
+        return $temporaryAttributeBag->getAttributes();
+    }
+
+    public function getExtraCardsAttributeBag(): ComponentAttributeBag
+    {
+        return new ComponentAttributeBag($this->getExtraCardsAttributes());
+    }
+}