Merge pull request #76 from wearebraid/feature/name-prop

adds name prop as pass-through attribute on certain input types

src/FormulateInputGroup.vue

@@ -54,7 +54,9 @@ export default {
   methods: {
     groupItemContext (context, option, groupAttributes) {
       const optionAttributes = {}
-      const ctx = Object.assign({}, context, option, groupAttributes, optionAttributes)
+      const ctx = Object.assign({}, context, option, groupAttributes, optionAttributes, !context.hasGivenName ? {
+        name: true
+      } : {})
       return ctx
     }
   }

src/libs/context.js

@@ -1,4 +1,3 @@
-import nanoid from 'nanoid/non-secure'
 import { map, arrayify, shallowEqualObjects } from './utils'
 
 /**
@@ -12,6 +11,7 @@ export default {
       type: this.type,
       value: this.value,
       name: this.nameOrFallback,
+      hasGivenName: this.hasGivenName,
       classification: this.classification,
       component: this.component,
       id: this.id || this.defaultId,
@@ -32,6 +32,7 @@ export default {
   },
   // Used in sub-context
   nameOrFallback,
+  hasGivenName,
   typeContext,
   elementAttributes,
   logicalLabelPosition,
@@ -78,11 +79,17 @@ function typeContext () {
  */
 function elementAttributes () {
   const attrs = Object.assign({}, this.localAttributes)
+  // pass the ID prop through to the root element
   if (this.id) {
     attrs.id = this.id
   } else {
     attrs.id = this.defaultId
   }
+  // pass an explicitly given name prop through to the root element
+  if (this.hasGivenName) {
+    attrs.name = this.name
+  }
+
   return attrs
 }
 
@@ -153,6 +160,13 @@ function nameOrFallback () {
   return this.name
 }
 
+/**
+ * determine if an input has a user-defined name
+ */
+function hasGivenName () {
+  return typeof this.name !== 'boolean'
+}
+
 /**
  * Determines if this formulate element is v-modeled or not.
  */

test/unit/FormulateInputBox.test.js

@@ -19,6 +19,16 @@ describe('FormulateInputBox', () => {
     expect(wrapper.contains(FormulateInputBox)).toBe(true)
   })
 
+  it('passes an explicitly given name prop through to the root radio elements', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'radio', name: 'foo', options: {a: '1', b: '2'} } })
+    expect(wrapper.findAll('input[name="foo"]')).toHaveLength(2)
+  })
+
+  it('passes an explicitly given name prop through to the root checkbox elements', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', name: 'foo', options: {a: '1', b: '2'} } })
+    expect(wrapper.findAll('input[name="foo"]')).toHaveLength(2)
+  })
+
   it('box inputs properly process options object in context library', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', options: {a: '1', b: '2'} } })
     expect(Array.isArray(wrapper.vm.context.options)).toBe(true)

test/unit/FormulateInputButton.test.js

@@ -78,3 +78,13 @@ test('type "button" renders slot inside button', () => {
   })
   expect(wrapper.find('button > span').html()).toBe('<span>My custom slot</span>')
 })
+
+it('passes an explicitly given name prop through to the root element', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'button', name: 'foo' } })
+  expect(wrapper.find('button[name="foo"]').exists()).toBe(true)
+})
+
+it('additional context does not bleed through to button input attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'button' } } )
+    expect(Object.keys(wrapper.find('button').attributes())).toEqual(["type", "id"])
+  })

test/unit/FormulateInputFile.test.js

@@ -37,6 +37,16 @@ describe('FormulateInputFile', () => {
     expect(file.attributes('data-has-preview')).toBe('true')
   })
 
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'image', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
+
+  it('additional context does not bleed through to file input attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'image' } } )
+    expect(Object.keys(wrapper.find('input[type="file"]').attributes())).toEqual(["type", "id"])
+  })
+
   /**
    * ===========================================================================
    * Currently there appears to be no way to properly mock upload data in

test/unit/FormulateInputSelect.test.js

@@ -42,4 +42,14 @@ describe('FormulateInputSelect', () => {
     expect(options.length).toBe(1)
     expect(options.at(0).attributes('disabled')).toBeTruthy()
   })
+
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: [],  name: 'foo' } })
+    expect(wrapper.find('select[name="foo"]').exists()).toBe(true)
+  })
+
+  it('additional context does not bleed through to text select attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select' } } )
+    expect(Object.keys(wrapper.find('select').attributes())).toEqual(["id"])
+  })
 })

test/unit/FormulateInputSlider.test.js

@@ -25,4 +25,14 @@ describe('FormulateInputSlider', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'range', showValue: 'true', value: '15', min: '0', max: '100' } })
     expect(wrapper.find('.formulate-input-element-range-value').text()).toBe('15')
   })
+
+  it('passes an explicitly given name prop through to the root element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'range', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
+
+  it('additional context does not bleed through to range input attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'range' } } )
+    expect(Object.keys(wrapper.find('input[type="range"]').attributes())).toEqual(["type", "id"])
+  })
 })

test/unit/FormulateInputText.test.js

@@ -83,6 +83,26 @@ describe('FormulateInputText', () => {
     expect(wrapper.find(`input[id="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
   })
 
+  it('passes an explicitly given name prop through to the root text element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'text', name: 'foo' } })
+    expect(wrapper.find('input[name="foo"]').exists()).toBe(true)
+  })
+
+  it('passes an explicitly given name prop through to the root textarea element', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'textarea', name: 'foo' } })
+    expect(wrapper.find('textarea[name="foo"]').exists()).toBe(true)
+  })
+
+  it('additional context does not bleed through to text input attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'text' } } )
+    expect(Object.keys(wrapper.find('input[type="text"]').attributes())).toEqual(["type", "id"])
+  })
+
+  it('additional context does not bleed through to textarea input attributes', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'textarea' } } )
+    expect(Object.keys(wrapper.find('textarea').attributes())).toEqual(["id"])
+  })
+
   it('doesn’t automatically add a label', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
     expect(wrapper.find('label').exists()).toBe(false)