feat: added clearable method to select form field

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

@@ -130,6 +130,11 @@ $multiSelectHeight: 45px;
  padding-left: 0;
  }
 
+ .vs__clear {
+ margin-right: 35px;
+ margin-top: 2px;
+ }
+
  .vs__selected-options {
  padding: 0 30px 0 15px;
  }
@@ -406,15 +411,15 @@ $multiSelectHeight: 45px;
 
  .close,
  .vs__deselect {
- top:2px;
- right:2px;
- background-color:transparent;
+ top: 11px;
+ right: 2px;
+ 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"
  >