Skip to content

feat(b-form-tags): add no-tags-remove prop (closes #6162) #6163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 10, 2020
Merged

feat(b-form-tags): add no-tags-remove prop (closes #6162) #6163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8bc99bd
feat(b-form-tags): add `no-tags-remove` prop
jacobmllr95 Dec 10, 2020
2b2559b
Update package.json
jacobmllr95 Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 24 additions & 23 deletions src/components/form-tags/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Loading