fix bug for Select when allow multiple value

resources/js/mixins/fields.js

@@ -9,7 +9,7 @@ export default {
         },
 
         formattedId() {
-            return this.id ? this.id : this.name + '-field'
+            return (this.id ? this.id : this.name + '-field-') + this._uid
         },
 
         computedValue: {

resources/js/ui/Select/Select.vue

@@ -20,7 +20,7 @@
                         <ui-tag
                             :value="option.label || option"
                             :label="'Unselect' + option.label || option"
-                            @click="removeSelection(index)">
+                            @click="removeSelection(option)">
                         </ui-tag>
                     </li>
                 </ul>
@@ -95,6 +95,8 @@
             <p v-else class="field-dropdown__empty">
                 No results found for "{{ search }}"
             </p>
+
+            <slot name="footer"></slot>
         </div>
     </div>
 </template>
@@ -115,7 +117,7 @@
                 search: '',
                 highlighted: 0,
                 // assuming selection is a string or a number only
-                selection: _.isString(this.value) ? this.value.split(',') : [ _.toString(this.value) ],
+                selection: _.isString(this.value) && this.multiple ? this.value.split(',') : this.value,
             }
         },
 
@@ -237,16 +239,16 @@
 
         watch: {
             value(value) {
-                if (_.isString(this.value)) {
-                    this.selection = this.value.split(',')
-                } else if (_.isNumber(this.value)) {
-                    this.selection = [ _.toString(this.value) ]
-                }
+                this.selection = _.isString(value) ? value.split(',') : value
                 this.resetHighlighted();
             },
 
             selection(value) {
-                this.$emit('input', _.isArray(value) ? _.join(value, ',') : value)
+                if (!this.multiple) {
+                    this.$emit('input', _.isArray(value) && value.length ? value[0] : value)
+                } else {
+                    this.$emit('input', value)
+                }
             },
 
             search(value) {
@@ -302,20 +304,28 @@
                 }
             },
 
-            removeSelection(index) {
+            removeSelection(option) {
+                let index = _.findIndex(this.selection, (item) => {
+                    return option.value == item
+                })
+                console.log('remove', index, this.selection, option)
                 this.selection.splice(index, 1)
             },
 
             toggleSelection(option) {
                 if (this.inSelection(option)) {
-                    this.removeSelection(_.indexOf(this.selection, option))
+                    this.removeSelection(option)
                 } else {
                     this.addSelection(option)
                 }
             },
 
             inSelection(option) {
-                return _.includes(this.selection, option.value)
+                if (this.multiple) {
+                    return _.includes(this.selection, option.value)
+                } else {
+                    return this.selection == option.value
+                }
             },
 
             resetSearch() {

resources/js/ui/Select/SelectGroup.vue

@@ -26,6 +26,8 @@
             :message="hasMessage"
             :value="value"
             @input="onInput($event)">
+
+            <template v-slot:footer><slot name="footer"></slot></template>
         </ui-select>
 	</ui-field-group>
 </template>

resources/scss/ui/forms/_fields.scss

@@ -97,7 +97,7 @@
 }
 
 .field-select {
-    @apply flex justify-between items-center w-full px-3 py-2;
+    @apply flex justify-between items-center px-3 py-2;
 
     &--sm {
         @apply p-1;