form-valid-feedback.js
1.4 KB
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
import { extend, mergeData } from '../../vue'
import { NAME_FORM_VALID_FEEDBACK } from '../../constants/components'
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
import { makeProp, makePropsConfigurable } from '../../utils/props'
// --- Props ---
export const props = makePropsConfigurable(
{
ariaLive: makeProp(PROP_TYPE_STRING),
forceShow: makeProp(PROP_TYPE_BOOLEAN, false),
id: makeProp(PROP_TYPE_STRING),
role: makeProp(PROP_TYPE_STRING),
// Tri-state prop: `true`, `false`, or `null`
state: makeProp(PROP_TYPE_BOOLEAN, null),
tag: makeProp(PROP_TYPE_STRING, 'div'),
tooltip: makeProp(PROP_TYPE_BOOLEAN, false)
},
NAME_FORM_VALID_FEEDBACK
)
// --- Main component ---
// @vue/component
export const BFormValidFeedback = /*#__PURE__*/ extend({
name: NAME_FORM_VALID_FEEDBACK,
functional: true,
props,
render(h, { props, data, children }) {
const { tooltip, ariaLive } = props
const show = props.forceShow === true || props.state === true
return h(
props.tag,
mergeData(data, {
class: {
'd-block': show,
'valid-feedback': !tooltip,
'valid-tooltip': tooltip
},
attrs: {
id: props.id || null,
role: props.role || null,
'aria-live': ariaLive || null,
'aria-atomic': ariaLive ? 'true' : null
}
}),
children
)
}
})