Merge pull request #1 from DiogoRCP/main

Add support for multiple selections in Picker component
icetalker · Oct 11, 2024 · d25bf6e · d25bf6e
2 parents 5e6a80f + b538fc1
commit d25bf6e
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 36 deletions.
diff --git a/resources/views/picker.blade.php b/resources/views/picker.blade.php
@@ -7,6 +7,7 @@
     $imageOnly = $getImageOnly();
     $imageSize = $getImageSize() ?: 50;
     $checkedColor = Color::Green[500];
+    $multiple = $getMultiple();
 @endphp
 
 <x-dynamic-component
@@ -17,65 +18,81 @@
     <div
         {{ $attributes->merge($getExtraAttributes())->class(['ic-fo-picker']) }}
     >
-        <div 
-            x-data="{ 
-                state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
-                setState: function(value) {
-                    if(this.state == value){
-                        this.state = ''
-                        return
+        <div
+            @if($multiple)
+                x-data="{
+                    state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
+                    init() {
+                        if (!Array.isArray(this.state)) {
+                            this.state = this.state ? [this.state] : [];
+                        }
+                    },
+                    setState: function(value) {
+                        if (this.state.includes(value)) {
+                            this.state = this.state.filter(item => item !== value);
+                        } else {
+                            this.state.push(value);
+                        }
                     }
-                    this.state = value;
-
-                    {{-- this.$refs.input.value = value --}}
-                }
-            }"
+                    }"
+            @else
+                x-data="{
+                    state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
+                        setState: function(value) {
+                            if(this.state == value){
+                                this.state = ''
+                                return
+                            }
+                            this.state = value;
+
+                            {{-- this.$refs.input.value = value --}}
+                        }
+                    }"
+            @endif
             class="flex flex-wrap gap-2 justify-around"
         >
             <input
                 type="hidden"
                 id="{{ $getId() }}"
-                x-model = "state"
+                x-model="state"
+                @if($multiple) x-init="init" @endif
             >
             <!-- Interact with the `state` property in Alpine.js -->
             @foreach($options as $value => $label)
-                <button 
+                <button
                     type="button"
-                    x-bind:class="
-                        state == '{{ $value }}'
+                    x-bind:class="@if($multiple) state.includes('{{ $value }}') @else state == '{{ $value }}' @endif
                             ? 'px-2 py-1 rounded shadow bg-primary-500 text-white relative'
-                            : 'px-2 py-1 rounded text-gray-900 shadow relative dark:bg-gray-700'
-                        "
+                            : 'px-2 py-1 rounded text-gray-900 shadow relative dark:bg-gray-700'"
                     x-on:click="setState('{{ $value }}')"
-                > 
+                >
                     @if(filled($images))
-                        <img src="{{ $images[$value] }}" alt="{{ $label }}" style="width:{{ $imageSize }}px; height:{{ $imageSize }}px;">
+                        <img src="{{ $images[$value] }}" alt="{{ $label }}"
+                             style="width:{{ $imageSize }}px; height:{{ $imageSize }}px;" draggable="false">
                     @endif
 
                     <div class="flex items-center text-center">
                         @if(@isset($icons[$value]))
-                        <x-filament::icon
-                            icon="{{ $icons[$value] }}"
-                            class="h-4 w-4 mr-2"
-                        />
+                            <x-filament::icon
+                                icon="{{ $icons[$value] }}"
+                                class="h-4 w-4 mr-2"
+                            />
                         @endif
-                        @if(!$imageOnly||!filled($images))
-                        {{ $label }}
+                        @if(!$imageOnly || !filled($images))
+                            {{ $label }}
                         @endif
                     </div>
-                    <div class="absolute -right-2 -top-2" style="right:-.5rem;top:-.5rem;" x-show="state == '{{ $value }}'">
-                        <span style="color:rgb({{ $checkedColor }})">
-                            <x-filament::icon
-                                icon="heroicon-s-check-circle"
-                                class="h-4 w-4"
-                            />
-                        </span>
+                    <div class="absolute -right-2 -top-2" style="right:-.5rem;top:-.5rem;"
+                         x-show="state.includes('{{ $value }}')">
+                            <span style="color:rgb({{ $checkedColor }})">
+                                <x-filament::icon
+                                    icon="heroicon-s-check-circle"
+                                    class="h-4 w-4"
+                                />
+                            </span>
                     </div>
-
                 </button>
             @endforeach
-
         </div>
-
     </div>
 </x-dynamic-component>
diff --git a/src/Forms/Components/Picker.php b/src/Forms/Components/Picker.php
@@ -22,6 +22,8 @@ class Picker extends Field
 
     protected bool | Closure $imageOnly = false;
 
+    protected bool|Closure $multiple = false;
+
     protected function setUp(): void
     {
         parent::setUp();
@@ -73,4 +75,14 @@ public function getImageOnly(){
         return $this->evaluate($this->imageOnly);
     }
 
+    public function multiple(bool|Closure $multiple = true)
+    {
+        $this->multiple = $multiple;
+
+        return $this;
+    }
+
+    public function getMultiple(){
+        return $this->evaluate($this->multiple);
+    }
 }