Skip to content
Permalink
Browse files
feat(b-form-tags): new option to specify input type (closes #4644) (#…
…4645)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
tmorehouse and jacobmllr95 committed Jan 22, 2020
1 parent 950f6b9 commit b899faceb4c1fd8562454fa93432e70d7113401b
Showing with 30 additions and 2 deletions.
  1. +1 −0 src/components/form-tags/README.md
  2. +18 −2 src/components/form-tags/form-tags.js
  3. +1 −0 src/components/form-tags/form-tags.spec.js
  4. +10 −0 src/components/form-tags/package.json
@@ -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 | <span class="badge badge-secondary">v2.3.0+</span> 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 |
@@ -16,10 +16,14 @@ import { BFormInvalidFeedback } from '../form/form-invalid-feedback'
import { BFormText } from '../form/form-text'
import { BButton } from '../button/button'

// --- Constants ---

const NAME = 'BFormTags'

// --- Pre-compiled regular expressions for performance reasons ---
// Supported input types (for built in input)
const TYPES = ['text', 'email', 'tel', 'url', 'number']

// Pre-compiled regular expressions for performance reasons
const RX_SPACES = /[\s\uFEFF\xA0]+/g

// --- Utility methods ---
@@ -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__')
},
computedInputType() {
// We only allow certain types
return arrayIncludes(TYPES, this.inputType) ? this.inputType : '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 include this in the attrs, as users may want to override this
inputType: this.computedInputType,
// <input> v-bind:inputAttrs
inputAttrs: this.computedInputAttrs,
// <input> v-on:inputHandlers
@@ -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')
@@ -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: 'text', '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: 'type', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop"
},
{
"prop": "inputId",
"type": "String",

0 comments on commit b899fac

Please sign in to comment.