From 89f174600334ad91d3679419657b8521acff2460 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:28:29 -0300 Subject: [PATCH 01/10] feat(forms): new b-form-datalist component New helper component for creating `` using an `options` array. --- src/components/form/form-datalist.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/form/form-datalist.js diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js new file mode 100644 index 00000000000..6f5795ab5b4 --- /dev/null +++ b/src/components/form/form-datalist.js @@ -0,0 +1,26 @@ +import formOptionsMixin from '../../mixins/form-options' +import { htmlOrText } from '../../utils/html' + +// @vue/component +export default { + name: 'BFormDatalist', + mixins: [formOptionsMixin], + props: { + id: { + type: String, + default: null, + required: true + } + }, + render(h) { + const options = this.formOptions.map((option, index) => { + return h('option', { + key: `option_${index}_opt`, + on: this.$listeners + attrs: { disabled: option.disabled }, + domProps: { ...htmlOrText(option.html, option.text), value: option.value } + }) + }) + return h('datalist', { attrs: { id: this.id } }, [options, this.$slots.default]) + } +} From 994f1e549243151983dadf57e5eb93c5214899da Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:31:05 -0300 Subject: [PATCH 02/10] Update form-datalist.js --- src/components/form/form-datalist.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js index 6f5795ab5b4..c8f4e871ff1 100644 --- a/src/components/form/form-datalist.js +++ b/src/components/form/form-datalist.js @@ -16,7 +16,6 @@ export default { const options = this.formOptions.map((option, index) => { return h('option', { key: `option_${index}_opt`, - on: this.$listeners attrs: { disabled: option.disabled }, domProps: { ...htmlOrText(option.html, option.text), value: option.value } }) From ae11bd1dc800698616f65f0fd602ac8c5694c4fc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:33:02 -0300 Subject: [PATCH 03/10] Update package.json --- src/components/form/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form/package.json b/src/components/form/package.json index c278e03d404..8ed61b078ca 100644 --- a/src/components/form/package.json +++ b/src/components/form/package.json @@ -23,7 +23,8 @@ "BFormText", "BFormInvalidFeedback", "BFormValidFeedback", - "BFormRow" + "BFormRow", + "BFormDatalist" ] } } From 956ce20f11c61652b64c95a2556276abbadff6e7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:35:07 -0300 Subject: [PATCH 04/10] Update index.js --- src/components/form/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/form/index.js b/src/components/form/index.js index 06c28fcecfa..307afdb0661 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -1,4 +1,5 @@ import BForm from './form' +import BFormDatalist from './form-datalist' import BFormRow from './form-row' import BFormText from './form-text' import BFormInvalidFeedback from './form-invalid-feedback' @@ -7,6 +8,8 @@ import { registerComponents } from '../../utils/plugins' const components = { BForm, + BFormDatalist, + BDatalist: BFormDatalist, BFormRow, BFormText, BFormInvalidFeedback, From 8c250f28ba187a0adc5d67d3951fc21c302ed739 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:43:47 -0300 Subject: [PATCH 05/10] Create form-datalist.spec.js --- src/components/form/form-datalist.spec.js | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/components/form/form-datalist.spec.js diff --git a/src/components/form/form-datalist.spec.js b/src/components/form/form-datalist.spec.js new file mode 100644 index 00000000000..1f47d284d8f --- /dev/null +++ b/src/components/form/form-datalist.spec.js @@ -0,0 +1,57 @@ +import Datalist from './form-datalist' +import { mount } from '@vue/test-utils' + +describe('form-datalist', () => { + it('has root element datalist', async () => { + const wrapper = mount(Datalist, { + propsData: { + id: 'testlist' + } + }) + expect(wrapper.is('datalist')).toBe(true) + + wrapper.destroy() + }) + + it('has user supplied ID', async () => { + const wrapper = mount(Datalist, { + propsData: { + id: 'testlist' + } + }) + expect(wrapper.attributes('id')).toBe('testlist') + + wrapper.destroy() + }) + + it('has no oprion elements by default', async () => { + const wrapper = mount(Datalist, { + propsData: { + id: 'testlist' + } + }) + expect(wrapper.findAll('option').length).toBe(0) + + wrapper.destroy() + }) + + it('has options when options set', async () => { + const wrapper = mount(Datalist, { + propsData: { + id: 'testlist', + options: ['one', 'two'] + } + }) + const $options = wrapper.findAll('option') + + expect($options.length).toBe(2) + + expect($options.at(0).text()).toBe('one') + expect($options.at(1).text()).toBe('two') + + expect($options.at(0).attributes('value')).toBe('one') + expect($options.at(1).attributes('value')).toBe('two') + + wrapper.destroy() + }) +}) From 35f96d9fe976c573a720f62a8c0c79f3c77c9b1b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 13:52:34 -0300 Subject: [PATCH 06/10] Update package.json --- src/components/form/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/form/package.json b/src/components/form/package.json index 8ed61b078ca..3b8e902c306 100644 --- a/src/components/form/package.json +++ b/src/components/form/package.json @@ -24,7 +24,10 @@ "BFormInvalidFeedback", "BFormValidFeedback", "BFormRow", - "BFormDatalist" + { + "component": "BFormDatalist", + "aliases": ["BDatalist"] + } ] } } From c92ffc07f8331d9cb3bd9eee6038a0e9db80e40f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 22 Mar 2019 14:13:45 -0300 Subject: [PATCH 07/10] Update README.md --- src/components/form/README.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/components/form/README.md b/src/components/form/README.md index f8b6c15f8ce..a3f8b17556a 100644 --- a/src/components/form/README.md +++ b/src/components/form/README.md @@ -177,6 +177,7 @@ See also: - `` Help text blocks for inputs - `` Invalid feedback text blocks for input `invalid` states - `` Valid feedback text blocks for input `valid` states +- `` Create `` for use with `` or plain `` See also: [``](/docs/components/form-group) Form input wrapper to generate form-groups that support labels, help text and feedback @@ -262,6 +263,39 @@ or the `force-show` prop to display the feedback. ``` +### Form control datalist + +For broswers that support +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) elements, +the `` helper component will allow you to quickly create a `` and +child `