From 4e68f64219f81e875d594002f25398ce89f0a033 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 01:18:21 -0400 Subject: [PATCH 01/10] feat(form-tags): new option to specify input type --- src/components/form-tags/form-tags.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 60b26ddd7a3..125881be044 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -18,6 +18,10 @@ import { BButton } from '../button/button' const NAME = 'BFormTags' +// Supported input types (for built in input) + +const TYPES = ['input', 'email', 'tel', 'url', 'number'] + // --- Pre-compiled regular expressions for performance reasons --- const RX_SPACES = /[\s\uFEFF\xA0]+/g @@ -90,6 +94,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ type: String, default: null }, + inputType: { + type: String, + default: 'text', + validator: type => arrayIncludes(TYPES, type) + }, inputClass: { type: [String, Array, Object], default: null @@ -181,6 +190,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ computedInputId() { return this.inputId || this.safeId('__input__') }, + localType() { + // We only allow certain types + return arrayIncludes(TYPES, this.type) ? this.type : 'text' + }, computedInputAttrs() { return { // Merge in user supplied attributes @@ -469,6 +482,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ tags, addTag, removeTag, + inputType, inputAttrs, inputHandlers, inputClass, @@ -541,7 +555,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ attrs: { ...inputAttrs, 'aria-describedby': ariaDescribedby || null, - type: 'text', + type: inputType, placeholder: placeholder || null }, domProps: { value: inputAttrs.value }, @@ -660,6 +674,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ // Methods removeTag: this.removeTag, addTag: this.addTag, + // We don't inncude this in the attrs, as users may want to override this + inputType: this.localType, // v-bind:inputAttrs inputAttrs: this.computedInputAttrs, // v-on:inputHandlers From 43e0fddb717202f40a1249335b1a54377687c4fd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 01:26:01 -0400 Subject: [PATCH 02/10] Update package.json --- src/components/form-tags/package.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/form-tags/package.json b/src/components/form-tags/package.json index f253cd0dad5..fbde645ed2b 100644 --- a/src/components/form-tags/package.json +++ b/src/components/form-tags/package.json @@ -34,6 +34,11 @@ "prop": "inputAttrs", "description": "Additional attributes to apply to the new tag input element" }, + { + "prop": "inputType", + "version": "2.3.0", + "description": "Specifies the type of input to use: 'input', 'email', 'tel', 'url', or 'number'. Default is 'text'" + }, { "prop": "addButtonText", "description": "Text for the built in 'Add' button. Slot `add-button-text' takes precedence" @@ -115,6 +120,11 @@ "type": "Object", "description": "Object of event handlers to apply to native input elements via 'v-on=\"inputHandlers\"'" }, + { + "prop": "inputType", + "version": "2.3.0", + "description": "The type of input to use: 'input', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop" + } { "prop": "inputId", "type": "String", From 1b53b166782079b4368bf90642f837791cc4d859 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 02:25:48 -0400 Subject: [PATCH 03/10] Update package.json --- src/components/form-tags/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-tags/package.json b/src/components/form-tags/package.json index fbde645ed2b..88afc5df6be 100644 --- a/src/components/form-tags/package.json +++ b/src/components/form-tags/package.json @@ -124,7 +124,7 @@ "prop": "inputType", "version": "2.3.0", "description": "The type of input to use: 'input', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop" - } + }, { "prop": "inputId", "type": "String", From b484960621a4e5ceea155a85945be4d0f83b8740 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 02:29:18 -0400 Subject: [PATCH 04/10] Update README.md --- src/components/form-tags/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md index 54009c679f4..6b6d74c4bca 100644 --- a/src/components/form-tags/README.md +++ b/src/components/form-tags/README.md @@ -320,6 +320,7 @@ The default slot scope properties are as follows: | ------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `tags` | Array | Array of current tag strings | | `inputAttrs` | Object | Object of attributes to apply to the new tag input element via `v-bind="inputAttrs"`. See below for details | +| `inputType` | String | v2.3.0+ Type of input to render (normalized version of prop `input-type`) | | `inputHandlers` | Object | Object of event handlers to apply to the new tag input element via `v-on="inputHandlers"`. See below for details | | `removeTag` | Function | Method to remove a tag. Accepts one argument which is the tag value to remove | | `addTag` | Function | Method to add a new tag. Assumes the tag is the value of the input, but optionally accepts one argument which is the tag value to be added | From 0847fd87cc25b782e61c5b82690a3cbcc1a4ef4a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 02:34:47 -0400 Subject: [PATCH 05/10] Update form-tags.js --- src/components/form-tags/form-tags.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 125881be044..4989bbc210e 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -20,7 +20,7 @@ const NAME = 'BFormTags' // Supported input types (for built in input) -const TYPES = ['input', 'email', 'tel', 'url', 'number'] +const TYPES = ['text', 'email', 'tel', 'url', 'number'] // --- Pre-compiled regular expressions for performance reasons --- @@ -190,7 +190,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ computedInputId() { return this.inputId || this.safeId('__input__') }, - localType() { + computedInputType() { // We only allow certain types return arrayIncludes(TYPES, this.type) ? this.type : 'text' }, @@ -675,7 +675,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ removeTag: this.removeTag, addTag: this.addTag, // We don't inncude this in the attrs, as users may want to override this - inputType: this.localType, + inputType: this.computedInputType, // v-bind:inputAttrs inputAttrs: this.computedInputAttrs, // v-on:inputHandlers From 09dd8bd748c387ff313cd2922042dd4200026ec2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 02:35:32 -0400 Subject: [PATCH 06/10] Update package.json --- src/components/form-tags/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form-tags/package.json b/src/components/form-tags/package.json index 88afc5df6be..55907cdcf44 100644 --- a/src/components/form-tags/package.json +++ b/src/components/form-tags/package.json @@ -37,7 +37,7 @@ { "prop": "inputType", "version": "2.3.0", - "description": "Specifies the type of input to use: 'input', 'email', 'tel', 'url', or 'number'. Default is 'text'" + "description": "Specifies the type of input to use: 'text', 'email', 'tel', 'url', or 'number'. Default is 'text'" }, { "prop": "addButtonText", @@ -123,7 +123,7 @@ { "prop": "inputType", "version": "2.3.0", - "description": "The type of input to use: 'input', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop" + "description": "The type of input to use: 'type', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop" }, { "prop": "inputId", From 908d0f78bdd10752cb7af9d08e47437e7a23e710 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 17 Jan 2020 02:37:42 -0400 Subject: [PATCH 07/10] Update form-tags.js --- src/components/form-tags/form-tags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 4989bbc210e..2bf6e188d9f 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -192,7 +192,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ }, computedInputType() { // We only allow certain types - return arrayIncludes(TYPES, this.type) ? this.type : 'text' + return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text' }, computedInputAttrs() { return { From 8dc501543a98174827433db7fef111a9c1de3cfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 22 Jan 2020 08:14:25 +0100 Subject: [PATCH 08/10] Update form-tags.js --- src/components/form-tags/form-tags.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 2bf6e188d9f..9af157aeb29 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -16,14 +16,14 @@ import { BFormInvalidFeedback } from '../form/form-invalid-feedback' import { BFormText } from '../form/form-text' import { BButton } from '../button/button' +// --- Constants --- + const NAME = 'BFormTags' // Supported input types (for built in input) - const TYPES = ['text', 'email', 'tel', 'url', 'number'] -// --- Pre-compiled regular expressions for performance reasons --- - +// Pre-compiled regular expressions for performance reasons const RX_SPACES = /[\s\uFEFF\xA0]+/g // --- Utility methods --- From 783067753d7f0a860424efb36a5582a770229617 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 22 Jan 2020 08:40:02 +0100 Subject: [PATCH 09/10] Update form-tags.js --- src/components/form-tags/form-tags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 9af157aeb29..cdecbc6e176 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -674,7 +674,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ // Methods removeTag: this.removeTag, addTag: this.addTag, - // We don't inncude this in the attrs, as users may want to override this + // We don't include this in the attrs, as users may want to override this inputType: this.computedInputType, // v-bind:inputAttrs inputAttrs: this.computedInputAttrs, From e84ab263d09e84240489b856857b21087de520b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 22 Jan 2020 08:40:08 +0100 Subject: [PATCH 10/10] Update form-tags.spec.js --- src/components/form-tags/form-tags.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js index 90311cf326a..0c3f7d3ba68 100644 --- a/src/components/form-tags/form-tags.spec.js +++ b/src/components/form-tags/form-tags.spec.js @@ -132,6 +132,7 @@ describe('form-tags', () => { expect($input.exists()).toBe(true) expect($input.element.value).toBe('') + expect($input.element.type).toBe('text') $input.element.value = 'pear' $input.trigger('input')