From fc769a16095334c200ddcd0b131a4313c065dbe7 Mon Sep 17 00:00:00 2001 From: j0ber Date: Thu, 13 May 2021 22:44:52 -0400 Subject: [PATCH 1/3] Fix events repeatableAdded/Removed not working when used in DOM templates --- src/FormulateGrouping.vue | 4 ++-- src/inputs/FormulateInputGroup.vue | 2 +- test/unit/FormulateInputGroup.test.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/FormulateGrouping.vue b/src/FormulateGrouping.vue index 3c2a1cf8..6dfcd5bb 100644 --- a/src/FormulateGrouping.vue +++ b/src/FormulateGrouping.vue @@ -120,11 +120,11 @@ export default { if (Array.isArray(this.context.model) && this.context.model.length > this.context.minimum) { // In this context we actually have data this.context.model = this.context.model.filter((item, i) => i === index ? false : item) - this.context.rootEmit('repeatableRemoved', this.context.model) + this.context.rootEmit('repeatable-removed', this.context.model) } else if (!Array.isArray(this.context.model) && this.items.length > this.context.minimum) { // In this context the fields have never been touched (not "dirty") this.context.model = (new Array(this.items.length - 1)).fill('').map((_i, idx) => this.setId({}, idx)) - this.context.rootEmit('repeatableRemoved', this.context.model) + this.context.rootEmit('repeatable-removed', this.context.model) } // Otherwise, do nothing, we're at our minimum }, diff --git a/src/inputs/FormulateInputGroup.vue b/src/inputs/FormulateInputGroup.vue index afaa6925..91aefd95 100644 --- a/src/inputs/FormulateInputGroup.vue +++ b/src/inputs/FormulateInputGroup.vue @@ -141,7 +141,7 @@ export default { } else { this.context.model = (new Array(this.totalItems + 1)).fill('').map(() => setId({})) } - this.context.rootEmit('repeatableAdded', this.context.model) + this.context.rootEmit('repeatable-added', this.context.model) }, groupItemContext (context, option, groupAttributes) { const optionAttributes = { isGrouped: true } diff --git a/test/unit/FormulateInputGroup.test.js b/test/unit/FormulateInputGroup.test.js index 274a07bd..472bda23 100644 --- a/test/unit/FormulateInputGroup.test.js +++ b/test/unit/FormulateInputGroup.test.js @@ -859,7 +859,7 @@ describe('FormulateInputGroup', () => { value: [{ username: 'mermaid', email: 'mermaid@wearebraid.com' }, { username: 'blah', email: 'blah@wearebraid.com' }], }, listeners: { - 'repeatableRemoved': removeListener + 'repeatable-removed': removeListener }, slots: { default: ` @@ -884,7 +884,7 @@ describe('FormulateInputGroup', () => { value: [{}], }, listeners: { - 'repeatableAdded': addListener + 'repeatable-added': addListener }, slots: { default: ` From 6d67541d7f5c14bb70b8b927deb146bb39d9bd79 Mon Sep 17 00:00:00 2001 From: j0ber Date: Tue, 22 Jun 2021 11:05:40 -0400 Subject: [PATCH 2/3] Fix events repeatableAdded/Removed in DOM template --- src/FormulateGrouping.vue | 2 ++ src/inputs/FormulateInputGroup.vue | 1 + test/unit/FormulateInputGroup.test.js | 2 ++ 3 files changed, 5 insertions(+) diff --git a/src/FormulateGrouping.vue b/src/FormulateGrouping.vue index 6dfcd5bb..9ce58a26 100644 --- a/src/FormulateGrouping.vue +++ b/src/FormulateGrouping.vue @@ -120,10 +120,12 @@ export default { if (Array.isArray(this.context.model) && this.context.model.length > this.context.minimum) { // In this context we actually have data this.context.model = this.context.model.filter((item, i) => i === index ? false : item) + this.context.rootEmit('repeatableRemoved', this.context.model) this.context.rootEmit('repeatable-removed', this.context.model) } else if (!Array.isArray(this.context.model) && this.items.length > this.context.minimum) { // In this context the fields have never been touched (not "dirty") this.context.model = (new Array(this.items.length - 1)).fill('').map((_i, idx) => this.setId({}, idx)) + this.context.rootEmit('repeatableRemoved', this.context.model) this.context.rootEmit('repeatable-removed', this.context.model) } // Otherwise, do nothing, we're at our minimum diff --git a/src/inputs/FormulateInputGroup.vue b/src/inputs/FormulateInputGroup.vue index 91aefd95..ba9c3021 100644 --- a/src/inputs/FormulateInputGroup.vue +++ b/src/inputs/FormulateInputGroup.vue @@ -141,6 +141,7 @@ export default { } else { this.context.model = (new Array(this.totalItems + 1)).fill('').map(() => setId({})) } + this.context.rootEmit('repeatableAdded', this.context.model) this.context.rootEmit('repeatable-added', this.context.model) }, groupItemContext (context, option, groupAttributes) { diff --git a/test/unit/FormulateInputGroup.test.js b/test/unit/FormulateInputGroup.test.js index 472bda23..0e96ec97 100644 --- a/test/unit/FormulateInputGroup.test.js +++ b/test/unit/FormulateInputGroup.test.js @@ -859,6 +859,7 @@ describe('FormulateInputGroup', () => { value: [{ username: 'mermaid', email: 'mermaid@wearebraid.com' }, { username: 'blah', email: 'blah@wearebraid.com' }], }, listeners: { + 'repeatableRemoved': removeListener, 'repeatable-removed': removeListener }, slots: { @@ -884,6 +885,7 @@ describe('FormulateInputGroup', () => { value: [{}], }, listeners: { + 'repeatableAdded': addListener, 'repeatable-added': addListener }, slots: { From f8600a31a46943f40f27fa69d97d21c42b342c38 Mon Sep 17 00:00:00 2001 From: j0ber Date: Tue, 22 Jun 2021 11:11:14 -0400 Subject: [PATCH 3/3] Update unit tests --- test/unit/FormulateInputGroup.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/FormulateInputGroup.test.js b/test/unit/FormulateInputGroup.test.js index 0e96ec97..edd517fc 100644 --- a/test/unit/FormulateInputGroup.test.js +++ b/test/unit/FormulateInputGroup.test.js @@ -872,7 +872,7 @@ describe('FormulateInputGroup', () => { await flushPromises() wrapper.find('.formulate-input-group-repeatable-remove').trigger('click') await flushPromises() - expect(removeListener.mock.calls.length).toBe(1) + expect(removeListener.mock.calls.length).toBe(2) }) it('allows passing errors down into groups', async () => { @@ -898,7 +898,7 @@ describe('FormulateInputGroup', () => { await flushPromises() wrapper.find('.formulate-input-group-add-more button').trigger('click') await flushPromises() - expect(addListener.mock.calls.length).toBe(1) + expect(addListener.mock.calls.length).toBe(2) }) it('ensures there are always a minimum number of items even if the model has fewer', async () => {