feat: allow custom attr on btn reset & submit

README.md

@@ -64,7 +64,9 @@ Vue.use(VeeValidate)
 <template lang="pug">
   #app.section
     form-json(:formFields="jsonFields",
-              :formName="'userProfil'")
+              :formName="'userProfil'"
+              :btnSubmit="{value: 'Submit'}",
+              :btnReset="{value: 'Reset'}")
       div(slot="slotNameAddedInJsonFields")
         p Your slot content
 </template>
@@ -109,13 +111,13 @@ props: {
     type: String,
     default: '* field required'
   },
-  btnSubmitText: {
-    type: String,
-    default: 'Submit'
+  btnSubmit: {
+    type: Object,
+    default: () => ({})
   },
-  btnResetText: {
-    type: String,
-    default: 'Reset'
+  btnReset: {
+    type: Object,
+    default: () => ({})
   },
   resetFormAfterSubmit: {
     type: Boolean,

src/App.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
   #app.section
     app-form(:formFields="jsonFields",
-             :formName="'userProfil'")
+             formName="userProfil",
+             :btnSubmit="{value: 'Submit'}",
+             :btnReset="{value: 'Reset'}")
       div(slot="boxSlot")
         .box
           article

src/components/Form/Form.spec.js

@@ -106,7 +106,7 @@ describe('Form', () => {
     expect(wrapper.isVueInstance()).toBeTruthy()
   })
 
-  it('have some props', () => {
+  it('has some props', () => {
     expect(wrapper.props().formFields).toBeTruthy()
     expect(wrapper.props().formName).toBeTruthy()
   })
@@ -132,22 +132,22 @@ describe('Form', () => {
     b.domHas(`input#${label}[aria-required=false]`)
   })
 
-  it('hide label', () => {
+  it('hides label', () => {
     wrapper.setProps({ formFields: [{ label: 'plop', showLabel: false }] })
     b.domHasNot('.label')
   })
 
-  it('show fields', () => {
+  it('shows fields', () => {
     b.domHas('.field-body .field .input')
     b.domHas('form > div > .field .input')
     b.domHas($inputSubmit)
   })
 
-  it('have a help field', () => {
+  it('has a help field', () => {
     b.domHas('.helpLabel')
   })
 
-  it('hide error icon', () => {
+  it('hides error icon', () => {
     b.domHas($errorIcon)
     wrapper.setProps({ hasIcon: false })
 
@@ -201,14 +201,14 @@ describe('Form', () => {
   describe('slot', () => {
     const slotContainer = '[data-test=slot]'
 
-    it('have no slot by default', async () => {
+    it('has no slot by default', async () => {
       wrapper.setProps({ formFields: [{ label: 'superLabel' }] })
       await wrapper.vm.$nextTick()
 
       b.domHasNot(slotContainer)
     })
 
-    it('have a slot', () => {
+    it('has a slot', () => {
       b.domHas(slotContainer)
 
       const allSlots = wrapper.findAll(slotContainer)
@@ -235,7 +235,7 @@ describe('Form', () => {
       expect(inputSubmit.attributes().disabled).toBe(undefined)
     })
 
-    it('have default value', () => {
+    it('has default value', () => {
       b.inputValueIs('fir', $inputFirstName)
       b.inputValueIs('ZB', 'select[name=country]')
     })
@@ -247,15 +247,15 @@ describe('Form', () => {
   })
 
   describe('submit', () => {
-    it('have submit btn disabled', () => {
+    it('has submit btn disabled', () => {
       const inputSubmit = b.find($inputSubmit)
       b.click('.checkbox')
       b.type(RADIO_VALUE, 'input[name=radio]', 'change')
       b.type(COUNTRY_VALUE, 'select[name=country]', 'change')
       expect(inputSubmit.attributes().disabled).toBe('disabled')
     })
 
-    it('enable submit input if all fields are valid', () => {
+    it('enables submit input if all fields are valid', () => {
       const inputSubmit = b.find($inputSubmit)
       expect(inputSubmit.attributes().disabled).toBe('disabled')
 
@@ -265,7 +265,12 @@ describe('Form', () => {
       expect(inputSubmit.attributes().disabled).toBe(undefined)
     })
 
-    it('send an event formSubmitted with all values when submit', async () => {
+    it('has default class', () => {
+      const inputSubmit = b.find($inputSubmit)
+      expect(inputSubmit.attributes().class).toBe('button is-primary')
+    })
+
+    it('sends an event formSubmitted with all values when submit', async () => {
       fillForm()
       await wrapper.vm.beforeSubmit()
 
@@ -299,11 +304,16 @@ describe('Form', () => {
       expect(resetFormStub).not.toHaveBeenCalled()
     })
 
-    it('have a btn to reset values', () => {
+    it('has a btn to reset values', () => {
       b.domHas($reset)
       b.click($reset)
     })
 
+    it('has default class', () => {
+      const inputReset = b.find($reset)
+      expect(inputReset.attributes().class).toBe('button')
+    })
+
     it('can reset value', () => {
       const resetFormStub = jest.fn()
       wrapper.setMethods({ resetForm: resetFormStub })

src/components/Form/Form.vue

@@ -25,12 +25,14 @@
         app-control(:item="item", ref="control")
 
     .field.form-footer.is-grouped.is-opposed
-      input.button(type="reset",
-                  :value="btnResetText",
-                  @click="resetForm")
-      input.button.is-primary(type="submit",
-                              :value="btnSubmitText",
-                              :disabled="!isFormValid")
+      input(type="reset",
+            v-bind="btnReset"
+            :class="btnReset.class || 'button'"
+            @click="resetForm")
+      input(type="submit",
+            v-bind="btnSubmit",
+            :class="btnSubmit.class || 'button is-primary'"
+            :disabled="!isFormValid")
 
     p.is-size-7.fieldRequiredLegend {{ mandatoryAsteriskLegend }}
 </template>
@@ -67,13 +69,13 @@ export default {
       type: String,
       default: '* field required'
     },
-    btnSubmitText: {
-      type: String,
-      default: 'Submit'
+    btnSubmit: {
+      type: Object,
+      default: () => ({})
     },
-    btnResetText: {
-      type: String,
-      default: 'Reset'
+    btnReset: {
+      type: Object,
+      default: () => ({})
     },
     resetFormAfterSubmit: {
       type: Boolean,