Content-Length: 597532 | pFad | http://github.com/bootstrap-vue/bootstrap-vue/commit/92de1f9f7772c595afcd16d25d8f71b54a2e077b

FE feat(b-form-tags): add `no-tags-remove` prop (closes #6162) (#6163) · bootstrap-vue/bootstrap-vue@92de1f9 · GitHub
Skip to content

Commit 92de1f9

Browse files
jacobmllr95jacobmllr95
authored
feat(b-form-tags): add no-tags-remove prop (closes #6162) (#6163)
* feat(b-form-tags): add `no-tags-remove` prop * Update package.json
1 parent b0f5f63 commit 92de1f9

File tree

6 files changed

+198
-96
lines changed

6 files changed

+198
-96
lines changed

‎src/components/form-tags/README.md

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -365,47 +365,48 @@ The default slot scope properties are as follows:
365365

366366
| Property | Type | Description |
367367
| ------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
368-
| `tags` | Array | Array of current tag strings |
368+
| `addButtonText` | String | The value of the `add-button-text` prop |
369+
| `addButtonVariant` | String | The value of the `add-button-variant` prop |
370+
| `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 |
371+
| `disableAddButton` | Boolean | Will be `true` if the tag(s) in the input cannot be added (all invalid and/or duplicates) |
372+
| `disabled` | Boolean | `true` if the component is in the disabled state. Value of the `disabled` prop |
373+
| `duplicateTagText` | String | The value of the `duplicate-tag-text` prop |
374+
| `duplicateTags` | Array | Array of the duplicate tag(s) the user has entered |
375+
| `form` | String | <span class="badge badge-secondary">v2.20.0+</span> The value of the `form` prop |
369376
| `inputAttrs` | Object | Object of attributes to apply to the new tag input element via `v-bind="inputAttrs"`. See below for details |
370-
| `inputType` | String | <span class="badge badge-secondary">v2.3.0+</span> Type of input to render (normalized version of prop `input-type`) |
371377
| `inputHandlers` | Object | Object of event handlers to apply to the new tag input element via `v-on="inputHandlers"`. See below for details |
372-
| `removeTag` | Function | Method to remove a tag. Accepts one argument which is the tag value to remove |
373-
| `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 |
374378
| `inputId` | String | ID to add to the new tag input element. Defaults to prop `input-id`. If not provided a unique ID is auto-generated. Also available via 'inputAttrs.id' |
375-
| `isInvalid` | Boolean | `true` if the user input contains invalid tag(s) |
379+
| `inputType` | String | <span class="badge badge-secondary">v2.3.0+</span> Type of input to render (normalized version of prop `input-type`) |
380+
| `invalidTagText` | String | The value of the `invalid-tag-text` prop |
376381
| `invalidTags` | Array | Array of the invalid tag(s) the user has entered |
377382
| `isDuplicate` | Boolean | `true` if the user input contains duplicate tag(s) |
378-
| `duplicateTags` | Array | Array of the duplicate tag(s) the user has entered |
383+
| `isInvalid` | Boolean | `true` if the user input contains invalid tag(s) |
379384
| `isLimitReached` | Boolean | <span class="badge badge-secondary">v2.17.0+</span> `true` if a `limit` is configured and the amount of tags has reached the limit |
380-
| `disableAddButton` | Boolean | Will be `true` if the tag(s) in the input cannot be added (all invalid and/or duplicates) |
381-
| `disabled` | Boolean | `true` if the component is in the disabled state. Value of the `disabled` prop |
382-
| `required` | Boolean | <span class="badge badge-secondary">v2.20.0+</span> The value of the `required` prop |
383-
| `form` | String | <span class="badge badge-secondary">v2.20.0+</span> The value of the `form` prop |
384-
| `state` | Boolean | The contextual state of the component. Value of the `state` prop. Possible values are `true`, `false` or `null` |
385-
| `size` | String | The value of the `size` prop |
385+
| `limitTagsText` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit-tags-text` prop |
386386
| `limit` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit` prop |
387-
| `separator` | String | The value of the `separator` prop |
387+
| `noTagRemove` | Boolean | <span class="badge badge-secondary">v2.21.0+</span> The value of the `no-tag-remove` prop |
388388
| `placeholder` | String | The value of the `placeholder` prop |
389+
| `removeTag` | Function | Method to remove a tag. Accepts one argument which is the tag value to remove |
390+
| `required` | Boolean | <span class="badge badge-secondary">v2.20.0+</span> The value of the `required` prop |
391+
| `separator` | String | The value of the `separator` prop |
392+
| `size` | String | The value of the `size` prop |
393+
| `state` | Boolean | The contextual state of the component. Value of the `state` prop. Possible values are `true`, `false` or `null` |
394+
| `tagClass` | String, Array, or Object | The value of the `tag-variant` prop. Class (or classes) to apply to the tag elements |
395+
| `tagPills` | Boolean | The value of the `tag-pills` prop |
389396
| `tagRemoveLabel` | String | Value of the `tag-remove-label` prop. Used as the `aria-label` attribute on the remove button of tags |
390397
| `tagVariant` | String | The value of the `tag-variant` prop |
391-
| `tagPills` | Boolean | The value of the `tag-pills` prop |
392-
| `tagClass` | String, Array, or Object | The value of the `tag-variant` prop. Class (or classes) to apply to the tag elements |
393-
| `addButtonText` | String | The value of the `add-button-text` prop |
394-
| `addButtonVariant` | String | The value of the `add-button-variant` prop |
395-
| `invalidTagText` | String | The value of the `invalid-tag-text` prop |
396-
| `duplicateTagText` | String | The value of the `duplicate-tag-text` prop |
397-
| `limitTagsText` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit-tags-text` prop |
398+
| `tags` | Array | Array of current tag strings |
398399

399400
#### `inputAttrs` object properties
400401

401402
The `inputAttrs` object contains attributes to bind (`v-bind`) to the new tag input element.
402403

403404
| Property | Type | Description |
404405
| ---------- | ------- | ---------------------------------------------------------------------------- |
405-
| `id` | String | the `id` attribute for the new tag input |
406-
| `value` | String | The `value` attribute for the new tag input |
407406
| `disabled` | Boolean | The `disabled` attribute for the new tag input. Value of the `disabled` prop |
408407
| `form` | String | The `form` attribute for the new tag input. Value of the `form` prop |
408+
| `id` | String | the `id` attribute for the new tag input |
409+
| `value` | String | The `value` attribute for the new tag input |
409410

410411
The `inputAttrs` object will also include any attributes set via the `input-attrs` prop. Note that
411412
the above attributes take precedence over any of the same attributes specified in the `input-attrs`
@@ -417,8 +418,8 @@ The `inputHandlers` object contains event handlers to bind (`v-on`) to the new t
417418

418419
| Property | Type | Description |
419420
| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
420-
| `input` | Function | Event handler for the input element `input` event. Accepts a single argument of either an event object or a string. Updates the internal v-model for the new tag input element |
421421
| `change` | Function | Event handler for the input element `change` event. Accepts a single argument of either an event object or a string. Change will trigger adding the tag. |
422+
| `input` | Function | Event handler for the input element `input` event. Accepts a single argument of either an event object or a string. Updates the internal v-model for the new tag input element |
422423
| `keydown` | Function | Event handler for the input element `keydown` <kbd>Enter</kbd> and <kbd>Del</kbd> events. Accepts a single argument which is the native keydown event object |
423424

424425
The `change` handler, when needed, must be enabled via the `add-on-change` prop, otherwise it is a

‎src/components/form-tags/form-tag.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const props = makePropsConfigurable(
1616
sortKeys({
1717
...idProps,
1818
disabled: makeProp(PROP_TYPE_BOOLEAN, false),
19+
noRemove: makeProp(PROP_TYPE_BOOLEAN, false),
1920
pill: makeProp(PROP_TYPE_BOOLEAN, false),
2021
removeLabel: makeProp(PROP_TYPE_STRING, 'Remove tag'),
2122
tag: makeProp(PROP_TYPE_STRING, 'span'),
@@ -33,7 +34,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
3334
mixins: [idMixin, normalizeSlotMixin],
3435
props,
3536
methods: {
36-
onDelete(event) {
37+
onRemove(event) {
3738
const { type, keyCode } = event
3839
if (!this.disabled && (type === 'click' || (type === 'keydown' && keyCode === CODE_DELETE))) {
3940
this.$emit(EVENT_NAME_REMOVE)
@@ -46,7 +47,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
4647
const tagLabelId = this.safeId('_taglabel_')
4748

4849
let $remove = h()
49-
if (!disabled) {
50+
if (!this.noRemove && !disabled) {
5051
$remove = h(BButtonClose, {
5152
staticClass: 'b-form-tag-remove',
5253
props: { ariaLabel: this.removeLabel },
@@ -56,8 +57,8 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
5657
'aria-keyshortcuts': 'Delete'
5758
},
5859
on: {
59-
click: this.onDelete,
60-
keydown: this.onDelete
60+
click: this.onRemove,
61+
keydown: this.onRemove
6162
}
6263
})
6364
}

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/bootstrap-vue/bootstrap-vue/commit/92de1f9f7772c595afcd16d25d8f71b54a2e077b

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy