navbar.js
1.96 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
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
import { extend } from '../../vue'
import { NAME_NAVBAR } from '../../constants/components'
import {
PROP_TYPE_BOOLEAN,
PROP_TYPE_BOOLEAN_STRING,
PROP_TYPE_STRING
} from '../../constants/props'
import { getBreakpoints } from '../../utils/config'
import { isTag } from '../../utils/dom'
import { isString } from '../../utils/inspect'
import { makeProp, makePropsConfigurable } from '../../utils/props'
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
// --- Props ---
export const props = makePropsConfigurable(
{
fixed: makeProp(PROP_TYPE_STRING),
print: makeProp(PROP_TYPE_BOOLEAN, false),
sticky: makeProp(PROP_TYPE_BOOLEAN, false),
tag: makeProp(PROP_TYPE_STRING, 'nav'),
toggleable: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
type: makeProp(PROP_TYPE_STRING, 'light'),
variant: makeProp(PROP_TYPE_STRING)
},
NAME_NAVBAR
)
// --- Main component ---
// @vue/component
export const BNavbar = /*#__PURE__*/ extend({
name: NAME_NAVBAR,
mixins: [normalizeSlotMixin],
provide() {
return { getBvNavbar: () => this }
},
props,
computed: {
breakpointClass() {
const { toggleable } = this
const xs = getBreakpoints()[0]
let breakpoint = null
if (toggleable && isString(toggleable) && toggleable !== xs) {
breakpoint = `navbar-expand-${toggleable}`
} else if (toggleable === false) {
breakpoint = 'navbar-expand'
}
return breakpoint
}
},
render(h) {
const { tag, type, variant, fixed } = this
return h(
tag,
{
staticClass: 'navbar',
class: [
{
'd-print': this.print,
'sticky-top': this.sticky,
[`navbar-${type}`]: type,
[`bg-${variant}`]: variant,
[`fixed-${fixed}`]: fixed
},
this.breakpointClass
],
attrs: {
role: isTag(tag, 'nav') ? null : 'navigation'
}
},
[this.normalizeSlot()]
)
}
})