[3.x] Add selectable prop on VueSelect component

docs/src/form-fields/select.md

@@ -40,6 +40,7 @@ Select::make()
     ->options(
         Options::make([
             Option::make('key', 'value'),
+            Option::make('key', 'value', selectable: false),
             ...
         ])
     );
@@ -83,6 +84,40 @@ Select::make()
 | default     |	Sets a default value if empty	      	                       | string          |               |
 | disabled            | Disables the field                                      | boolean         | false         | 
 
+
+Select item option
+| Option      | Description                                                  | Type/values     | Default value |
+| :---------- | :----------------------------------------------------------- | :-------------- | :------------ |
+| selectable  | Defines if select item should be selectable in the select or not | boolean     | true          |
+
+Example of `selectable` prop usage:
+```php
+@php
+    $selectOptions = [
+        [
+            'value' => 1,
+            'label' => 'New York'
+        ],
+        [
+            'value' => 2,
+            'label' => 'London'
+        ],
+        [
+            'value' => 3,
+            'label' => 'Berlin'
+            'selectable' => false // This item will be non-selectable in the select form component
+        ]
+    ];
+@endphp
+
+<x-twill::select 
+    name="office"
+    label="office"
+    placeholder="Select an office"
+    :options="$selectOptions"
+/>
+```
+
 A migration to save a `select` field would be:
 
 ```php

frontend/js/components/VSelect.vue

@@ -11,6 +11,7 @@
               :value="value"
               :options="currentOptions"
               :searchable="searchable"
+              :selectable="selectable"
               :clearSearchOnSelect="clearSearchOnSelect"
               :label="optionsLabel"
               :taggable="taggable"
@@ -44,7 +45,6 @@
   import extendedVSelect from '@/components/VSelect/ExtendedVSelect.vue'
   // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
   // import vSelect from 'vue-select' // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
-
   export default {
     name: 'A17VueSelect',
     mixins: [randKeyMixin, InputframeMixin, FormStoreMixin, AttributesMixin],
@@ -81,6 +81,10 @@
         type: Boolean,
         default: false
       },
+      selectable: {
+        type: Function,
+        default: option => option.selectable ?? true,
+      },
       clearSearchOnSelect: {
         type: Boolean,
         default: true
@@ -150,7 +154,6 @@
                 if (typeof this.value[0] === 'object') {
                   return this.value.map(e => e.value)
                 }
-
                 return this.value.join(',')
               }
             }
@@ -199,12 +202,10 @@
         // see formStore mixin
         this.value = value
         this.saveIntoStore()
-
         this.$emit('change', value)
       },
       getOptions: debounce(function (search, loading) {
         if (!this.isAjax()) return true
-
         loading(true)
         this.$http.get(this.ajaxUrl, { params: { q: search } }).then((resp) => {
           if (resp.data.items && resp.data.items.length) {
@@ -226,4 +227,4 @@
       }, 500)
     }
   }
-</script>
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area17/twill",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "inspect": "vue-cli-service inspect --mode production",

src/Services/Forms/Option.php

@@ -9,19 +9,21 @@ class Option implements Arrayable
     public function __construct(
         protected string|int $value,
         protected string $label,
+        protected bool $selectable = true,
     ) {
     }
 
-    public static function make(string|int $value, string $label): self
+    public static function make(string|int $value, string $label, bool $selectable = true): self
     {
-        return new self($value, $label);
+        return new self($value, $label, $selectable);
     }
 
     public function toArray(): array
     {
         return [
             'value' => $this->value,
             'label' => $this->label,
+            'selectable' => $this->selectable,
         ];
     }
 }