/
form-tag.js
89 lines (87 loc) · 2.22 KB
/
form-tag.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import Vue from '../../utils/vue'
import KeyCodes from '../../utils/key-codes'
import { getComponentConfig } from '../../utils/config'
import idMixin from '../../mixins/id'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { BBadge } from '../badge/badge'
import { BButtonClose } from '../button/button-close'
const NAME = 'BFormTag'
export const BFormTag = /*#__PURE__*/ Vue.extend({
name: NAME,
mixins: [idMixin, normalizeSlotMixin],
props: {
variant: {
type: String,
default: () => getComponentConfig(NAME, 'variant')
},
disabled: {
type: Boolean,
default: false
},
title: {
type: String,
default: null
},
pill: {
type: Boolean,
default: false
},
removeLabel: {
type: String,
default: () => getComponentConfig(NAME, 'removeLabel')
},
tag: {
type: String,
default: 'span'
}
},
methods: {
onDelete(evt) {
const { type, keyCode } = evt
if (
!this.disabled &&
(type === 'click' || (type === 'keydown' && keyCode === KeyCodes.DELETE))
) {
this.$emit('remove')
}
}
},
render(h) {
const tagId = this.safeId()
const tagLabelId = this.safeId('_taglabel_')
let $remove = h()
if (!this.disabled) {
$remove = h(BButtonClose, {
staticClass: 'b-form-tag-remove ml-1',
props: { ariaLabel: this.removeLabel },
attrs: {
'aria-controls': tagId,
'aria-describedby': tagLabelId,
'aria-keyshortcuts': 'Delete'
},
on: {
click: this.onDelete,
keydown: this.onDelete
}
})
}
const $tag = h(
'span',
{
staticClass: 'b-form-tag-content flex-grow-1 text-truncate',
attrs: { id: tagLabelId }
},
this.normalizeSlot('default') || this.title || [h()]
)
return h(
BBadge,
{
staticClass: 'b-form-tag d-inline-flex align-items-baseline mw-100',
class: { disabled: this.disabled },
attrs: { id: tagId, title: this.title || null, 'aria-labelledby': tagLabelId },
props: { tag: this.tag, variant: this.variant, pill: this.pill }
},
[$tag, $remove]
)
}
})