diff --git a/resources/js/mixins/fields.js b/resources/js/mixins/fields.js
index e862d4313..9804ca310 100644
--- a/resources/js/mixins/fields.js
+++ b/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: {
diff --git a/resources/js/ui/Select/Select.vue b/resources/js/ui/Select/Select.vue
index c2c6db81f..377ccc84c 100644
--- a/resources/js/ui/Select/Select.vue
+++ b/resources/js/ui/Select/Select.vue
@@ -20,7 +20,7 @@
+ @click="removeSelection(option)">
@@ -95,6 +95,8 @@
No results found for "{{ search }}"
+
+
@@ -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() {
diff --git a/resources/js/ui/Select/SelectGroup.vue b/resources/js/ui/Select/SelectGroup.vue
index 95919cfc2..579ce3eff 100644
--- a/resources/js/ui/Select/SelectGroup.vue
+++ b/resources/js/ui/Select/SelectGroup.vue
@@ -26,6 +26,8 @@
:message="hasMessage"
:value="value"
@input="onInput($event)">
+
+
diff --git a/resources/scss/ui/forms/_fields.scss b/resources/scss/ui/forms/_fields.scss
index 83ecd1f58..15f12be28 100644
--- a/resources/scss/ui/forms/_fields.scss
+++ b/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;