diff --git a/src/Formulate.js b/src/Formulate.js index 3cb016d..dbed1a8 100644 --- a/src/Formulate.js +++ b/src/Formulate.js @@ -55,7 +55,7 @@ class Formulate { FormulateInputTextArea, FormulateRepeatableProvider }, - slotDefaults: { + slotComponents: { label: 'FormulateLabel', help: 'FormulateHelp', errors: 'FormulateErrors', @@ -169,7 +169,7 @@ class Formulate { if (def.slotComponents && def.slotComponents[slot]) { return def.slotComponents[slot] } - return this.options.slotDefaults[slot] + return this.options.slotComponents[slot] } /** diff --git a/test/unit/FormulateInput.test.js b/test/unit/FormulateInput.test.js index 2478817..d091cc4 100644 --- a/test/unit/FormulateInput.test.js +++ b/test/unit/FormulateInput.test.js @@ -1,6 +1,6 @@ import Vue from 'vue' import flushPromises from 'flush-promises' -import { mount } from '@vue/test-utils' +import { mount, createLocalVue } from '@vue/test-utils' import Formulate from '@/Formulate.js' import FormulateInput from '@/FormulateInput.vue' import FormulateInputBox from '@/inputs/FormulateInputBox.vue' @@ -177,4 +177,48 @@ describe('FormulateInput', () => { expect(wrapper.emitted('error-visibility').length).toBe(1) }) + it('allows overriding the label default slot component', async () => { + const localVue = createLocalVue() + localVue.component('CustomLabel', { + render: function (h) { + return h('div', { class: 'custom-label' }, [`custom: ${this.context.label}`]) + }, + props: ['context'] + }) + localVue.use(Formulate, { slotComponents: { label: 'CustomLabel' } }) + const wrapper = mount(FormulateInput, { localVue, propsData: { label: 'My label here' } }) + expect(wrapper.find('.custom-label').html()).toBe('