Skip to content

Commit

Permalink
feat(b-form-tags): add no-tags-remove prop (closes #6162) (#6163)
Browse files Browse the repository at this point in the history
* feat(b-form-tags): add `no-tags-remove` prop

* Update package.json
  • Loading branch information
jacobmllr95 committed Dec 10, 2020
1 parent b0f5f63 commit 92de1f9
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 96 deletions.
47 changes: 24 additions & 23 deletions src/components/form-tags/README.md
Expand Up @@ -365,47 +365,48 @@ The default slot scope properties are as follows:

| Property | Type | Description |
| ------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `tags` | Array | Array of current tag strings |
| `addButtonText` | String | The value of the `add-button-text` prop |
| `addButtonVariant` | String | The value of the `add-button-variant` prop |
| `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 |
| `disableAddButton` | Boolean | Will be `true` if the tag(s) in the input cannot be added (all invalid and/or duplicates) |
| `disabled` | Boolean | `true` if the component is in the disabled state. Value of the `disabled` prop |
| `duplicateTagText` | String | The value of the `duplicate-tag-text` prop |
| `duplicateTags` | Array | Array of the duplicate tag(s) the user has entered |
| `form` | String | <span class="badge badge-secondary">v2.20.0+</span> The value of the `form` prop |
| `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 |
| `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' |
| `isInvalid` | Boolean | `true` if the user input contains invalid tag(s) |
| `inputType` | String | <span class="badge badge-secondary">v2.3.0+</span> Type of input to render (normalized version of prop `input-type`) |
| `invalidTagText` | String | The value of the `invalid-tag-text` prop |
| `invalidTags` | Array | Array of the invalid tag(s) the user has entered |
| `isDuplicate` | Boolean | `true` if the user input contains duplicate tag(s) |
| `duplicateTags` | Array | Array of the duplicate tag(s) the user has entered |
| `isInvalid` | Boolean | `true` if the user input contains invalid tag(s) |
| `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 |
| `disableAddButton` | Boolean | Will be `true` if the tag(s) in the input cannot be added (all invalid and/or duplicates) |
| `disabled` | Boolean | `true` if the component is in the disabled state. Value of the `disabled` prop |
| `required` | Boolean | <span class="badge badge-secondary">v2.20.0+</span> The value of the `required` prop |
| `form` | String | <span class="badge badge-secondary">v2.20.0+</span> The value of the `form` prop |
| `state` | Boolean | The contextual state of the component. Value of the `state` prop. Possible values are `true`, `false` or `null` |
| `size` | String | The value of the `size` prop |
| `limitTagsText` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit-tags-text` prop |
| `limit` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit` prop |
| `separator` | String | The value of the `separator` prop |
| `noTagRemove` | Boolean | <span class="badge badge-secondary">v2.21.0+</span> The value of the `no-tag-remove` prop |
| `placeholder` | String | The value of the `placeholder` prop |
| `removeTag` | Function | Method to remove a tag. Accepts one argument which is the tag value to remove |
| `required` | Boolean | <span class="badge badge-secondary">v2.20.0+</span> The value of the `required` prop |
| `separator` | String | The value of the `separator` prop |
| `size` | String | The value of the `size` prop |
| `state` | Boolean | The contextual state of the component. Value of the `state` prop. Possible values are `true`, `false` or `null` |
| `tagClass` | String, Array, or Object | The value of the `tag-variant` prop. Class (or classes) to apply to the tag elements |
| `tagPills` | Boolean | The value of the `tag-pills` prop |
| `tagRemoveLabel` | String | Value of the `tag-remove-label` prop. Used as the `aria-label` attribute on the remove button of tags |
| `tagVariant` | String | The value of the `tag-variant` prop |
| `tagPills` | Boolean | The value of the `tag-pills` prop |
| `tagClass` | String, Array, or Object | The value of the `tag-variant` prop. Class (or classes) to apply to the tag elements |
| `addButtonText` | String | The value of the `add-button-text` prop |
| `addButtonVariant` | String | The value of the `add-button-variant` prop |
| `invalidTagText` | String | The value of the `invalid-tag-text` prop |
| `duplicateTagText` | String | The value of the `duplicate-tag-text` prop |
| `limitTagsText` | String | <span class="badge badge-secondary">v2.17.0+</span> The value of the `limit-tags-text` prop |
| `tags` | Array | Array of current tag strings |

#### `inputAttrs` object properties

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

| Property | Type | Description |
| ---------- | ------- | ---------------------------------------------------------------------------- |
| `id` | String | the `id` attribute for the new tag input |
| `value` | String | The `value` attribute for the new tag input |
| `disabled` | Boolean | The `disabled` attribute for the new tag input. Value of the `disabled` prop |
| `form` | String | The `form` attribute for the new tag input. Value of the `form` prop |
| `id` | String | the `id` attribute for the new tag input |
| `value` | String | The `value` attribute for the new tag input |

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

| Property | Type | Description |
| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `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 |
| `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. |
| `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 |
| `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 |

The `change` handler, when needed, must be enabled via the `add-on-change` prop, otherwise it is a
Expand Down
9 changes: 5 additions & 4 deletions src/components/form-tags/form-tag.js
Expand Up @@ -16,6 +16,7 @@ export const props = makePropsConfigurable(
sortKeys({
...idProps,
disabled: makeProp(PROP_TYPE_BOOLEAN, false),
noRemove: makeProp(PROP_TYPE_BOOLEAN, false),
pill: makeProp(PROP_TYPE_BOOLEAN, false),
removeLabel: makeProp(PROP_TYPE_STRING, 'Remove tag'),
tag: makeProp(PROP_TYPE_STRING, 'span'),
Expand All @@ -33,7 +34,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
mixins: [idMixin, normalizeSlotMixin],
props,
methods: {
onDelete(event) {
onRemove(event) {
const { type, keyCode } = event
if (!this.disabled && (type === 'click' || (type === 'keydown' && keyCode === CODE_DELETE))) {
this.$emit(EVENT_NAME_REMOVE)
Expand All @@ -46,7 +47,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
const tagLabelId = this.safeId('_taglabel_')

let $remove = h()
if (!disabled) {
if (!this.noRemove && !disabled) {
$remove = h(BButtonClose, {
staticClass: 'b-form-tag-remove',
props: { ariaLabel: this.removeLabel },
Expand All @@ -56,8 +57,8 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
'aria-keyshortcuts': 'Delete'
},
on: {
click: this.onDelete,
keydown: this.onDelete
click: this.onRemove,
keydown: this.onRemove
}
})
}
Expand Down

0 comments on commit 92de1f9

Please sign in to comment.