@@ -16,7 +16,7 @@ import {
16 16
requestAF,
17 17
select
18 18
} from '../../utils/dom'
19 -
import { isEvent, isFunction, isString } from '../../utils/inspect'
19 +
import { isEvent, isFunction, isNumber, isString } from '../../utils/inspect'
20 20
import { escapeRegExp, toString, trim, trimLeft } from '../../utils/string'
21 21
import idMixin from '../../mixins/id'
22 22
import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -160,6 +160,14 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
160 160
type: String,
161 161
default: () => getComponentConfig(NAME, 'invalidTagText')
162 162
},
163 +
limitTagsText: {
164 +
type: String,
165 +
default: () => getComponentConfig(NAME, 'limitTagsText')
166 +
},
167 +
limit: {
168 +
type: Number
169 +
// default: null
170 +
},
163 171
separator: {
164 172
// Character (or characters) that trigger adding tags
165 173
type: [String, Array]
@@ -288,6 +296,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
288 296
},
289 297
hasInvalidTags() {
290 298
return this.invalidTags.length > 0
299 +
},
300 +
isLimitReached() {
301 +
const { limit } = this
302 +
return isNumber(limit) && limit >= 0 && this.tags.length >= limit
291 303
}
292 304
},
293 305
watch: {
@@ -328,7 +340,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
328 340
addTag(newTag) {
329 341
newTag = isString(newTag) ? newTag : this.newTag
330 342
/* istanbul ignore next */
331 -
if (this.disabled || trim(newTag) === '') {
343 +
if (this.disabled || trim(newTag) === '' || this.isLimitReached) {
332 344
// Early exit
333 345
return
334 346
}
@@ -530,25 +542,27 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
530 542
// Default User Interface render
531 543
defaultRender({
532 544
tags,
533 -
addTag,
534 -
removeTag,
535 -
inputType,
536 545
inputAttrs,
546 +
inputType,
537 547
inputHandlers,
538 -
inputClass,
539 -
tagClass,
540 -
tagVariant,
541 -
tagPills,
542 -
tagRemoveLabel,
543 -
invalidTagText,
544 -
duplicateTagText,
548 +
removeTag,
549 +
addTag,
545 550
isInvalid,
546 551
isDuplicate,
552 +
isLimitReached,
553 +
disableAddButton,
547 554
disabled,
548 555
placeholder,
556 +
inputClass,
557 +
tagRemoveLabel,
558 +
tagVariant,
559 +
tagPills,
560 +
tagClass,
549 561
addButtonText,
550 562
addButtonVariant,
551 -
disableAddButton
563 +
invalidTagText,
564 +
duplicateTagText,
565 +
limitTagsText
552 566
}) {
553 567
const h = this.$createElement
554 568
@@ -581,12 +595,15 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
581 595
invalidTagText && isInvalid ? this.safeId('__invalid_feedback__') : null
582 596
const duplicateFeedbackId =
583 597
duplicateTagText && isDuplicate ? this.safeId('__duplicate_feedback__') : null
598 +
const limitFeedbackId =
599 +
limitTagsText && isLimitReached ? this.safeId('__limit_feedback__') : null
584 600 585 601
// Compute the `aria-describedby` attribute value
586 602
const ariaDescribedby = [
587 603
inputAttrs['aria-describedby'],
588 604
invalidFeedbackId,
589 -
duplicateFeedbackId
605 +
duplicateFeedbackId,
606 +
limitFeedbackId
590 607
]
591 608
.filter(identity)
592 609
.join(' ')
@@ -623,7 +640,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
623 640
invisible: disableAddButton
624 641
},
625 642
style: { fontSize: '90%' },
626 -
props: { variant: addButtonVariant, disabled: disableAddButton },
643 +
props: { variant: addButtonVariant, disabled: disableAddButton || isLimitReached },
627 644
on: { click: () => addTag() }
628 645
},
629 646
[this.normalizeSlot('add-button-text') || addButtonText]
@@ -663,7 +680,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
663 680 664 681
// Assemble the feedback
665 682
let $feedback = h()
666 -
if (invalidTagText || duplicateTagText) {
683 +
if (invalidTagText || duplicateTagText || limitTagsText) {
667 684
// Add an aria live region for the invalid/duplicate tag
668 685
// messages if the user has not disabled the messages
669 686
const joiner = this.computedJoiner
@@ -694,13 +711,26 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
694 711
)
695 712
}
696 713 714 +
// Limit tags feedback if needed (warning, not error)
715 +
let $limit = h()
716 +
if (limitFeedbackId) {
717 +
$limit = h(
718 +
BFormText,
719 +
{
720 +
key: '_tags_limit_feedback_',
721 +
props: { id: limitFeedbackId }
722 +
},
723 +
[limitTagsText]
724 +
)
725 +
}
726 + 697 727
$feedback = h(
698 728
'div',
699 729
{
700 730
key: '_tags_feedback_',
701 731
attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' }
702 732
},
703 -
[$invalid, $duplicate]
733 +
[$invalid, $duplicate, $limit]
704 734
)
705 735
}
706 736
// Return the content
@@ -712,29 +742,31 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
712 742
const scope = {
713 743
// Array of tags (shallow copy to prevent mutations)
714 744
tags: this.tags.slice(),
715 -
// Methods
716 -
removeTag: this.removeTag,
717 -
addTag: this.addTag,
718 -
// We don't include this in the attrs, as users may want to override this
719 -
inputType: this.computedInputType,
720 745
// <input> v-bind:inputAttrs
721 746
inputAttrs: this.computedInputAttrs,
747 +
// We don't include this in the attrs, as users may want to override this
748 +
inputType: this.computedInputType,
722 749
// <input> v-on:inputHandlers
723 750
inputHandlers: this.computedInputHandlers,
751 +
// Methods
752 +
removeTag: this.removeTag,
753 +
addTag: this.addTag,
724 754
// <input> :id="inputId"
725 755
inputId: this.computedInputId,
726 756
// Invalid/Duplicate state information
727 -
invalidTags: this.invalidTags.slice(),
728 757
isInvalid: this.hasInvalidTags,
729 -
duplicateTags: this.duplicateTags.slice(),
758 +
invalidTags: this.invalidTags.slice(),
730 759
isDuplicate: this.hasDuplicateTags,
760 +
duplicateTags: this.duplicateTags.slice(),
761 +
isLimitReached: this.isLimitReached,
731 762
// If the 'Add' button should be disabled
732 763
disableAddButton: this.disableAddButton,
733 764
// Pass-though values
734 -
state: this.state,
735 -
separator: this.separator,
736 765
disabled: this.disabled,
766 +
state: this.state,
737 767
size: this.size,
768 +
limit: this.limit,
769 +
separator: this.separator,
738 770
placeholder: this.placeholder,
739 771
inputClass: this.inputClass,
740 772
tagRemoveLabel: this.tagRemoveLabel,
@@ -744,7 +776,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
744 776
addButtonText: this.addButtonText,
745 777
addButtonVariant: this.addButtonVariant,
746 778
invalidTagText: this.invalidTagText,
747 -
duplicateTagText: this.duplicateTagText
779 +
duplicateTagText: this.duplicateTagText,
780 +
limitTagsText: this.limitTagsText
748 781
}
749 782 750 783
// Generate the user interface
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