feat: added clearable method to select form field (#2581)

---------

Co-authored-by: Quentin Renard <quentin@area17.com>

Author: zeezo887

frontend/js/components/VSelect.vue

@@ -13,6 +13,7 @@
               :searchable="searchable"
               :selectable="selectable"
               :clearSearchOnSelect="clearSearchOnSelect"
+              :clearable="clearable"
               :label="optionsLabel"
               :taggable="taggable"
               :pushTags="pushTags"
@@ -81,6 +82,10 @@
         type: Boolean,
         default: false
       },
+      clearable: {
+        type: Boolean,
+        default: false
+      },
       selectable: {
         type: Function,
         default: option => option.selectable ?? true,

frontend/js/components/VSelect/ExtendedVSelect.vue

@@ -38,11 +38,6 @@
         mutableValue: this.value
       }
     },
-    computed: {
-      showClearButton () {
-        return false
-      }
-    },
     methods: {
       /**
        * Delete the value on Delete keypress when there is no

frontend/scss/vendor/_vselect.scss

@@ -132,6 +132,11 @@ $multiSelectHeight: 45px;
       padding-left: 0;
     }
 
+    .vs__clear {
+      margin-right: 35px;
+      margin-top: 2px;
+    }
+
     .vs__selected-options {
       padding: 0 30px 0 15px;
     }
@@ -414,11 +419,11 @@ $multiSelectHeight: 45px;
           transform: none;
           background-color:transparent;
           background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNhNmE2YTYiIGQ9Ik0yIDJsNiA2TTggMkwyIDgiLz48L3N2Zz4=);
-          color:$color__fborder--hover;
+          color: $color__fborder--hover;
 
           span,
           svg {
-            display:none
+            display: none
           }
         }
       }

src/Services/Forms/Fields/Select.php

@@ -6,6 +6,8 @@
 use A17\Twill\Services\Forms\Fields\Traits\HasPlaceholder;
 use A17\Twill\Services\Forms\Fields\Traits\IsTranslatable;
 use A17\Twill\Services\Forms\Fields\Traits\Unpackable;
+use A17\Twill\Services\Forms\Option;
+use A17\Twill\Services\Forms\Options;
 
 class Select extends BaseFormField
 {
@@ -15,6 +17,7 @@ class Select extends BaseFormField
     use Unpackable;
 
     protected bool $searchable = false;
+    protected bool $clearable = false;
 
     public static function make(): static
     {
@@ -33,4 +36,14 @@ public function searchable(bool $searchable = true): static
 
         return $this;
     }
+
+    /**
+     * If the field should be clearable.
+     */
+    public function clearable(bool $clearable = true): static
+    {
+        $this->clearable = $clearable;
+
+        return $this;
+    }
 }

src/View/Components/Fields/FieldWithOptions.php

@@ -30,6 +30,7 @@ public function __construct(
         public bool $unpack = false,
         public int $columns = 0,
         public bool $searchable = false,
+        public bool $clearable = false,
         public ?string $placeholder = null,
         public bool $addNew = false,
         public ?string $moduleName = null,

src/View/Components/Fields/Select.php

@@ -26,6 +26,7 @@ public function __construct(
         bool $unpack = false,
         int $columns = 0,
         bool $searchable = false,
+        bool $clearable = false,
         ?string $placeholder = '',
         bool $addNew = false,
         ?string $moduleName = null,
@@ -51,6 +52,7 @@ public function __construct(
             $unpack,
             $columns,
             $searchable,
+            $clearable,
             $placeholder,
             $addNew,
             $moduleName,

views/partials/form/_select.blade.php

@@ -63,6 +63,7 @@
         @if ($addNew) add-new='{{ $storeUrl }}' @elseif ($note) note='{{ $note }}' @endif
         :has-default-store="true"
         @if ($searchable) :searchable="true" @endif
+        @if ($clearable) :clearable="true" @endif
         size="large"
         in-store="inputValue"
     >