+30
-2
lines changedFilter options
+30
-2
lines changed Original file line number Diff line number Diff line change
@@ -320,6 +320,7 @@ The default slot scope properties are as follows:
320 320
| ------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
321 321
| `tags` | Array | Array of current tag strings |
322 322
| `inputAttrs` | Object | Object of attributes to apply to the new tag input element via `v-bind="inputAttrs"`. See below for details |
323 +
| `inputType` | String | <span class="badge badge-secondary">v2.3.0+</span> Type of input to render (normalized version of prop `input-type`) |
323 324
| `inputHandlers` | Object | Object of event handlers to apply to the new tag input element via `v-on="inputHandlers"`. See below for details |
324 325
| `removeTag` | Function | Method to remove a tag. Accepts one argument which is the tag value to remove |
325 326
| `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'
16 16
import { BFormText } from '../form/form-text'
17 17
import { BButton } from '../button/button'
18 18 19 +
// --- Constants ---
20 + 19 21
const NAME = 'BFormTags'
20 22 21 -
// --- Pre-compiled regular expressions for performance reasons ---
23 +
// Supported input types (for built in input)
24 +
const TYPES = ['text', 'email', 'tel', 'url', 'number']
22 25 26 +
// Pre-compiled regular expressions for performance reasons
23 27
const RX_SPACES = /[\s\uFEFF\xA0]+/g
24 28 25 29
// --- Utility methods ---
@@ -90,6 +94,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
90 94
type: String,
91 95
default: null
92 96
},
97 +
inputType: {
98 +
type: String,
99 +
default: 'text',
100 +
validator: type => arrayIncludes(TYPES, type)
101 +
},
93 102
inputClass: {
94 103
type: [String, Array, Object],
95 104
default: null
@@ -181,6 +190,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
181 190
computedInputId() {
182 191
return this.inputId || this.safeId('__input__')
183 192
},
193 +
computedInputType() {
194 +
// We only allow certain types
195 +
return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
196 +
},
184 197
computedInputAttrs() {
185 198
return {
186 199
// Merge in user supplied attributes
@@ -469,6 +482,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
469 482
tags,
470 483
addTag,
471 484
removeTag,
485 +
inputType,
472 486
inputAttrs,
473 487
inputHandlers,
474 488
inputClass,
@@ -541,7 +555,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
541 555
attrs: {
542 556
...inputAttrs,
543 557
'aria-describedby': ariaDescribedby || null,
544 -
type: 'text',
558 +
type: inputType,
545 559
placeholder: placeholder || null
546 560
},
547 561
domProps: { value: inputAttrs.value },
@@ -660,6 +674,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
660 674
// Methods
661 675
removeTag: this.removeTag,
662 676
addTag: this.addTag,
677 +
// We don't include this in the attrs, as users may want to override this
678 +
inputType: this.computedInputType,
663 679
// <input> v-bind:inputAttrs
664 680
inputAttrs: this.computedInputAttrs,
665 681
// <input> v-on:inputHandlers
@@ -132,6 +132,7 @@ describe('form-tags', () => {
132 132 133 133
expect($input.exists()).toBe(true)
134 134
expect($input.element.value).toBe('')
135 +
expect($input.element.type).toBe('text')
135 136 136 137
$input.element.value = 'pear'
137 138
$input.trigger('input')
@@ -34,6 +34,11 @@
34 34
"prop": "inputAttrs",
35 35
"description": "Additional attributes to apply to the new tag input element"
36 36
},
37 +
{
38 +
"prop": "inputType",
39 +
"version": "2.3.0",
40 +
"description": "Specifies the type of input to use: 'text', 'email', 'tel', 'url', or 'number'. Default is 'text'"
41 +
},
37 42
{
38 43
"prop": "addButtonText",
39 44
"description": "Text for the built in 'Add' button. Slot `add-button-text' takes precedence"
@@ -115,6 +120,11 @@
115 120
"type": "Object",
116 121
"description": "Object of event handlers to apply to native input elements via 'v-on=\"inputHandlers\"'"
117 122
},
123 +
{
124 +
"prop": "inputType",
125 +
"version": "2.3.0",
126 +
"description": "The type of input to use: 'type', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop"
127 +
},
118 128
{
119 129
"prop": "inputId",
120 130
"type": "String",
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4