Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/ListInput.vue
| Show All 22 Lines | |||||
| <script> | <script> | ||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| list: { type: Array, default: () => [] }, | list: { type: Array, default: () => [] }, | ||||
| id: { type: String, default: '' } | id: { type: String, default: '' } | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| addItem() { | addItem(focus) { | ||||
| let input = $(this.$el).find('.main-input') | let value = this.input.value | ||||
| let value = input.val() | |||||
| if (value) { | if (value) { | ||||
| this.list.push(value) | this.list.push(value) | ||||
| input.val('').focus() | this.input.value = '' | ||||
| if (focus !== false) { | |||||
| this.input.focus() | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| deleteItem(index) { | deleteItem(index) { | ||||
| this.$delete(this.list, index) | this.$delete(this.list, index) | ||||
| if (this.list.length == 1) { | if (this.list.length == 1) { | ||||
| $(this.$el).removeClass('is-invalid') | $(this.$el).removeClass('is-invalid') | ||||
| } | } | ||||
| }, | }, | ||||
| keyDown(e) { | keyDown(e) { | ||||
| if (e.which == 13 && e.target.value) { | if (e.which == 13 && e.target.value) { | ||||
| this.addItem() | this.addItem() | ||||
| e.preventDefault() | e.preventDefault() | ||||
| } | } | ||||
| } | } | ||||
| }, | |||||
| mounted() { | |||||
| this.input = $(this.$el).find('.main-input')[0] | |||||
| // On form submit add the text from main input to the list | |||||
| // Users tend to forget about pressing the "plus" button | |||||
| // Note: We can't use form.onsubmit (too late) | |||||
| // Note: Use of input.onblur has been proven to be problematic | |||||
| // TODO: What with forms that have no submit button? | |||||
| $(this.$el).closest('form').find('button[type=submit]').on('click', () => { | |||||
| this.addItem(false) | |||||
| }) | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||