From d906ae5d64cf3a044178606293085a27d7dd5c03 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 9 Dec 2022 13:04:20 +0100
Subject: [PATCH] wip #5637 @0.25

---
 src/resources/views/fields/color.blade.php | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/resources/views/fields/color.blade.php b/src/resources/views/fields/color.blade.php
index ee63c3f..27744f3 100644
--- a/src/resources/views/fields/color.blade.php
+++ b/src/resources/views/fields/color.blade.php
@@ -4,7 +4,7 @@
 @include('crud::fields.inc.translatable_icon')
 <input
     type="text"
-    class="spectrum"
+    class="colorpicker"
     data-show-alpha="{{$field['allows_alpha']?'true':'false'}}"
     data-allow-empty="{{$field['allows_empty']?'true':'false'}}"
     name="{{ $field['name'] }}"
@@ -58,16 +58,27 @@
                 makeSpectrumColorPickers();
 
                 function makeSpectrumColorPickers() {
-                    $("input.spectrum:not(.spectrum-ok)").each(function () {
+                    $("input.colorpicker:not(.spectrum-ok)").each(function () {
                         if ($(this).closest('.sample').length > 0) {
                             return;
                         }
-                        $(this).spectrum({
+                        var e=$(this);
+                        var options={
                             preferredFormat: "hex3",
-                            showInput: true,
                             showInitial: true,
+                            showInput: true,
+                            allowEmpty: true,
                             showAlpha: $(this).attr('data-show-alpha') === 'true',
-                        }).addClass('spectrum-ok');
+                            move:function(color){
+                                e.val(color.toString());
+                                e.trigger('change');
+                            },
+                            dragend:function(color){
+                                e.val(color.toString());
+                                e.trigger('change');
+                            }
+                        };
+                        $(this).spectrum(options).addClass('spectrum-ok');
                     });
                 }
 
-- 
2.39.5