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;