-
-
-
-
-
-
+ 
-
-
-
-
-
-
+ 
+ Properties
-{{field.value}}
-
- 
-
-
Profile
-
- 9 unread messages
-
+ 9 unread messages
-
+
```
-
## Contextual variations
-Add any of the following variants via the `variant` prop to change the
-appearance of a ``: `default`, `primary`, `success`, `warning`, `info`,
-and `danger`. If no variant is specified `default` will be used.
+
+Add any of the following variants via the `variant` prop to change the appearance of a ``:
+`default`, `primary`, `success`, `warning`, `info`, and `danger`. If no variant is specified
+`default` will be used.
```html
` child components in the default slot of
+the `` component, as an alternative to using the `items` prop, for greater control
+over the content of each item:
+
+```html
+
+
+
+
+ Home
+
+ Foo
+ Bar
+ Baz
+
+
+
+
+```
+
+Remember to set the `active` prop on the last item.
+
+`` also supports the various `` props such as `to`, etc.
+
+
diff --git a/src/components/breadcrumb/breadcrumb-item.js b/src/components/breadcrumb/breadcrumb-item.js
index f2456f8d705..073fa4f577f 100644
--- a/src/components/breadcrumb/breadcrumb-item.js
+++ b/src/components/breadcrumb/breadcrumb-item.js
@@ -1,30 +1,27 @@
-import { mergeData } from '../../utils'
-import { assign } from '../../utils/object'
-import BreadcrumbLink, { props as crumbLinks } from './breadcrumb-link'
+import { extend, mergeData } from '../../vue'
+import { NAME_BREADCRUMB_ITEM } from '../../constants/components'
+import { makePropsConfigurable } from '../../utils/props'
+import { BBreadcrumbLink, props as BBreadcrumbLinkProps } from './breadcrumb-link'
-export const props = assign({}, crumbLinks, {
- text: {
- type: String,
- default: null
- },
- href: {
- type: String,
- default: null
- }
-})
+// --- Props ---
+
+export const props = makePropsConfigurable(BBreadcrumbLinkProps, NAME_BREADCRUMB_ITEM)
-export default {
+// --- Main component ---
+
+// @vue/component
+export const BBreadcrumbItem = /*#__PURE__*/ extend({
+ name: NAME_BREADCRUMB_ITEM,
functional: true,
props,
- render (h, { props, data, children }) {
+ render(h, { props, data, children }) {
return h(
'li',
mergeData(data, {
staticClass: 'breadcrumb-item',
- class: { active: props.active },
- attrs: { role: 'presentation' }
+ class: { active: props.active }
}),
- [h(BreadcrumbLink, { props }, children)]
+ [h(BBreadcrumbLink, { props }, children)]
)
}
-}
+})
diff --git a/src/components/breadcrumb/breadcrumb-item.spec.js b/src/components/breadcrumb/breadcrumb-item.spec.js
new file mode 100644
index 00000000000..e7307439614
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-item.spec.js
@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils'
+import { BBreadcrumbItem } from './breadcrumb-item'
+
+describe('breadcrumb-item', () => {
+ it('has default classes and structure', async () => {
+ const wrapper = mount(BBreadcrumbItem)
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes().length).toBe(1)
+
+ wrapper.destroy()
+ })
+
+ it('has class active when prop active is set', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ active: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes().length).toBe(2)
+
+ wrapper.destroy()
+ })
+
+ it('has link as child', async () => {
+ const wrapper = mount(BBreadcrumbItem)
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.find('a').exists()).toBe(true)
+ expect(wrapper.find('a').attributes('href')).toBe('#')
+
+ wrapper.destroy()
+ })
+
+ it('has link as child and href', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ href: '/foo/bar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.find('a').exists()).toBe(true)
+ expect(wrapper.find('a').attributes('href')).toBe('/foo/bar')
+
+ wrapper.destroy()
+ })
+
+ it('has child span and class active when prop active is set', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ active: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes().length).toBe(2)
+ expect(wrapper.find('span').exists()).toBe(true)
+
+ wrapper.destroy()
+ })
+
+ it('has child text content from prop text', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ active: true,
+ text: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes().length).toBe(2)
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('has child text content from prop html', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ active: true,
+ html: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes().length).toBe(2)
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('has child text content from default slot', async () => {
+ const wrapper = mount(BBreadcrumbItem, {
+ propsData: {
+ active: true
+ },
+ slots: {
+ default: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('LI')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('breadcrumb-item')
+ expect(wrapper.classes().length).toBe(2)
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+})
diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index a681c2d13ee..da7338c7e1f 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -1,43 +1,43 @@
-import { mergeData, pluckProps } from '../../utils'
-import { assign } from '../../utils/object'
-import Link, { propsFactory as linkPropsFactory } from '../link/link'
+import { extend, mergeData } from '../../vue'
+import { NAME_BREADCRUMB_LINK } from '../../constants/components'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { htmlOrText } from '../../utils/html'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { BLink, props as BLinkProps } from '../link/link'
-export const props = assign(linkPropsFactory(), {
- text: {
- type: String,
- default: null
- },
- active: {
- type: Boolean,
- default: false
- },
- href: {
- type: String,
- default: '#'
- },
- ariaCurrent: {
- type: String,
- default: 'location'
- }
-})
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ sortKeys({
+ ...omit(BLinkProps, ['event', 'routerTag']),
+ ariaCurrent: makeProp(PROP_TYPE_STRING, 'location'),
+ html: makeProp(PROP_TYPE_STRING),
+ text: makeProp(PROP_TYPE_STRING)
+ }),
+ NAME_BREADCRUMB_LINK
+)
-export default {
+// --- Main component ---
+
+// @vue/component
+export const BBreadcrumbLink = /*#__PURE__*/ extend({
+ name: NAME_BREADCRUMB_LINK,
functional: true,
props,
- render (h, { props: suppliedProps, data, children }) {
- const tag = suppliedProps.active ? 'span' : Link
+ render(h, { props: suppliedProps, data, children }) {
+ const { active } = suppliedProps
+ const tag = active ? 'span' : BLink
- let componentData = {
- props: pluckProps(props, suppliedProps),
- domProps: { innerHTML: suppliedProps.text }
+ const componentData = {
+ attrs: { 'aria-current': active ? suppliedProps.ariaCurrent : null },
+ props: pluckProps(props, suppliedProps)
}
- if (suppliedProps.active) {
- componentData.attrs = { 'aria-current': suppliedProps.ariaCurrent }
- } else {
- componentData.attrs = { href: suppliedProps.href }
+ if (!children) {
+ componentData.domProps = htmlOrText(suppliedProps.html, suppliedProps.text)
}
return h(tag, mergeData(data, componentData), children)
}
-}
+})
diff --git a/src/components/breadcrumb/breadcrumb-link.spec.js b/src/components/breadcrumb/breadcrumb-link.spec.js
new file mode 100644
index 00000000000..23ddabddb06
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-link.spec.js
@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils'
+import { BBreadcrumbLink } from './breadcrumb-link'
+
+describe('breadcrumb-link', () => {
+ it('has default classes and structure', async () => {
+ const wrapper = mount(BBreadcrumbLink)
+
+ expect(wrapper.element.tagName).toBe('A')
+ expect(wrapper.attributes('href')).toBeDefined()
+ expect(wrapper.attributes('href')).toBe('#')
+ expect(wrapper.classes().length).toBe(0)
+ expect(wrapper.attributes('aria-current')).toBeUndefined()
+ expect(wrapper.text()).toBe('')
+
+ wrapper.destroy()
+ })
+
+ it('has content from default slot', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ slots: {
+ default: 'foobar'
+ }
+ })
+
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('has content from text prop', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ text: 'foobar'
+ }
+ })
+
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('has content from html prop', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ html: 'foobar'
+ }
+ })
+
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('has attribute aria-current when active', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ active: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.attributes('href')).toBeUndefined()
+ expect(wrapper.attributes('aria-current')).toBe('location')
+ expect(wrapper.classes().length).toBe(0)
+
+ wrapper.destroy()
+ })
+
+ it('has attribute aria-current with custom value when active', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ active: true,
+ ariaCurrent: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.attributes('aria-current')).toBe('foobar')
+ expect(wrapper.attributes('href')).toBeUndefined()
+ expect(wrapper.classes().length).toBe(0)
+
+ wrapper.destroy()
+ })
+
+ it('renders link when href is set', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ href: '/foo/bar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('A')
+ expect(wrapper.attributes('href')).toBeDefined()
+ expect(wrapper.attributes('href')).toBe('/foo/bar')
+ expect(wrapper.attributes('aria-current')).toBeUndefined()
+ expect(wrapper.classes().length).toBe(0)
+
+ wrapper.destroy()
+ })
+
+ it('does not render a link when href is set and active', async () => {
+ const wrapper = mount(BBreadcrumbLink, {
+ propsData: {
+ active: true,
+ href: '/foo/bar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.attributes('href')).toBeUndefined()
+ expect(wrapper.attributes('aria-current')).toBeDefined()
+ expect(wrapper.attributes('aria-current')).toBe('location')
+ expect(wrapper.classes().length).toBe(0)
+
+ wrapper.destroy()
+ })
+})
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index b98d03d8625..90c3235ec04 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -1,41 +1,52 @@
-import { mergeData } from '../../utils'
-import { isArray } from '../../utils/array'
-import { assign } from '../../utils/object'
-import BreadcrumbItem from './breadcrumb-item'
+import { extend, mergeData } from '../../vue'
+import { NAME_BREADCRUMB } from '../../constants/components'
+import { PROP_TYPE_ARRAY } from '../../constants/props'
+import { isArray, isObject } from '../../utils/inspect'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { toString } from '../../utils/string'
+import { BBreadcrumbItem } from './breadcrumb-item'
-export const props = {
- items: {
- type: Array,
- default: null
- }
-}
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ {
+ items: makeProp(PROP_TYPE_ARRAY)
+ },
+ NAME_BREADCRUMB
+)
-export default {
+// --- Main component ---
+
+// @vue/component
+export const BBreadcrumb = /*#__PURE__*/ extend({
+ name: NAME_BREADCRUMB,
functional: true,
props,
- render (h, { props, data, children }) {
+ render(h, { props, data, children }) {
+ const { items } = props
+
+ // Build child nodes from items, if given
let childNodes = children
- // Build child nodes from items if given.
- if (isArray(props.items)) {
+ if (isArray(items)) {
let activeDefined = false
- childNodes = props.items.map((item, idx) => {
- if (typeof item !== 'object') {
- item = { text: item }
+ childNodes = items.map((item, idx) => {
+ if (!isObject(item)) {
+ item = { text: toString(item) }
}
- // Copy the value here so we can normalize it.
- let active = item.active
+ // Copy the value here so we can normalize it
+ let { active } = item
if (active) {
activeDefined = true
}
+ // Auto-detect active by position in list
if (!active && !activeDefined) {
- // Auto-detect active by position in list.
- active = idx + 1 === props.items.length
+ active = idx + 1 === items.length
}
- return h(BreadcrumbItem, { props: assign({}, item, { active }) })
+ return h(BBreadcrumbItem, { props: { ...item, active } })
})
}
return h('ol', mergeData(data, { staticClass: 'breadcrumb' }), childNodes)
}
-}
+})
diff --git a/src/components/breadcrumb/breadcrumb.spec.js b/src/components/breadcrumb/breadcrumb.spec.js
old mode 100755
new mode 100644
index 570c73a0608..08fa4eca036
--- a/src/components/breadcrumb/breadcrumb.spec.js
+++ b/src/components/breadcrumb/breadcrumb.spec.js
@@ -1,84 +1,183 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import { mount } from '@vue/test-utils'
+import { BBreadcrumb } from './breadcrumb'
-describe('breadcrumb', async () => {
- beforeEach(loadFixture(__dirname, 'breadcrumb'))
- testVM()
+describe('breadcrumb', () => {
+ it('should have expected default structure', async () => {
+ const wrapper = mount(BBreadcrumb)
- it('should apply bootstrap breadcrumb classes', async () => {
- const { app: { $refs } } = window
- const $ol = $refs.breadcrumb1
+ expect(wrapper.element.tagName).toBe('OL')
+ expect(wrapper.classes()).toContain('breadcrumb')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.text()).toBe('')
- expect($ol.classList.contains('breadcrumb')).toBe(true)
-
- Array.from($ol.children).forEach($li => {
- if ($li.tagName === 'LI') {
- expect($li.classList.contains('breadcrumb-item')).toBe(true)
- }
- })
+ wrapper.destroy()
})
- it('should apply ARIA roles', async () => {
- const { app: { $refs } } = window
- const $ol = $refs.breadcrumb1
-
- Array.from($ol.children).forEach($li => {
- if ($li.tagName === 'LI') {
- expect($li.getAttribute('role')).toBe('presentation')
+ it('should render default slot when no items provided', async () => {
+ const wrapper = mount(BBreadcrumb, {
+ slots: {
+ default: 'foobar'
}
})
- })
- it('should apply active class to active item', async () => {
- const { app: { $refs: { breadcrumb2: crumb2 }, items2 } } = window
+ expect(wrapper.element.tagName).toBe('OL')
+ expect(wrapper.classes()).toContain('breadcrumb')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.text()).toBe('foobar')
- items2.forEach((item, i) => {
- if (item.active) {
- expect(crumb2.children[i].classList.contains('active')).toBe(true)
- }
- })
+ wrapper.destroy()
})
- it('should apply aria-current to active class element', async () => {
- const { app: { $refs: { breadcrumb2: crumb2 }, items2 } } = window
- const $listItems = Array.from(crumb2.children)
-
- items2.forEach((item, i) => {
- if (item.active) {
- expect($listItems[i].firstElementChild.hasAttribute('aria-current')).toBe(true)
- } else {
- expect($listItems[i].firstElementChild.hasAttribute('aria-current')).toBe(false)
+ it('should accept items', () => {
+ const wrapper = mount(BBreadcrumb, {
+ propsData: {
+ items: [
+ { text: 'Home', href: '/' },
+ { text: 'Admin', to: '/admin', active: false },
+ { html: 'Manage', href: '/admin/manage' },
+ // Test with non object
+ 'Library'
+ ]
}
})
- })
-
- it('should default active class to last item only when no true active prop provided', async () => {
- const { app: { $refs: { breadcrumb1: crumb }, items } } = window
- const $listItems = Array.from(crumb.children)
- const itemsLength = items.length
- items.forEach((item, i) => {
- const isLast = i === itemsLength - 1
+ expect(wrapper.element.tagName).toBe('OL')
+ expect(wrapper.classes()).toContain('breadcrumb')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.findAll('li').length).toBe(4)
+ expect(wrapper.findAll('li.breadcrumb-item').length).toBe(4)
+ const $lis = wrapper.findAll('li')
+
+ // HREF testing
+ expect(
+ $lis
+ .at(0)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(0)
+ .find('a')
+ .attributes('href')
+ ).toBe('/')
+ expect($lis.at(0).text()).toBe('Home')
+
+ expect(
+ $lis
+ .at(1)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(1)
+ .find('a')
+ .attributes('href')
+ ).toBe('/admin')
+ expect($lis.at(1).text()).toBe('Admin')
+
+ expect(
+ $lis
+ .at(2)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(2)
+ .find('a')
+ .attributes('href')
+ ).toBe('/admin/manage')
+ expect($lis.at(2).text()).toBe('Manage')
+
+ // Last item should have active state
+ expect($lis.at(3).classes()).toContain('active')
+ expect(
+ $lis
+ .at(3)
+ .find('span')
+ .exists()
+ ).toBe(true)
+ expect($lis.at(3).text()).toBe('Library')
+
+ wrapper.destroy()
+ })
- if (isLast) {
- expect($listItems[i].classList.contains('active')).toBe(true)
- } else {
- expect($listItems[i].classList.contains('active')).toBe(false)
+ it('should apply active class to active item', async () => {
+ const wrapper = mount(BBreadcrumb, {
+ propsData: {
+ items: [
+ { text: 'Home', href: '/' },
+ { text: 'Admin', to: '/admin', active: true },
+ { html: 'Manage', href: '/admin/manage' },
+ { text: 'Library', href: '/admin/manage/library' }
+ ]
}
})
- })
-
- // TODO: FC's can't emit events, so what to do here?
- // it("should emit a click event with the item when clicked", async () => {
- // const { app: { $refs, $el } } = window
- // const vm = $refs.breadcrumb2
- // const spy = jest.fn()
- // vm.$on("click", spy)
- // const $listItems = Array.from(vm.$el.children)
-
- // app.items2.forEach((item, index) => {
- // $listItems[index].click()
- // expect(spy).toHaveBeenCalledWith(item)
- // })
- // })
+ expect(wrapper.element.tagName).toBe('OL')
+ expect(wrapper.classes()).toContain('breadcrumb')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.findAll('li').length).toBe(4)
+ expect(wrapper.findAll('li.breadcrumb-item').length).toBe(4)
+ const $lis = wrapper.findAll('li')
+
+ // HREF testing
+ expect(
+ $lis
+ .at(0)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(0)
+ .find('a')
+ .attributes('href')
+ ).toBe('/')
+ expect($lis.at(0).text()).toBe('Home')
+
+ // This one should be a span/active
+ expect(
+ $lis
+ .at(1)
+ .find('span')
+ .exists()
+ ).toBe(true)
+ expect($lis.at(1).classes()).toContain('active')
+ expect($lis.at(1).text()).toBe('Admin')
+
+ expect(
+ $lis
+ .at(2)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(2)
+ .find('a')
+ .attributes('href')
+ ).toBe('/admin/manage')
+ expect($lis.at(2).text()).toBe('Manage')
+
+ // Last item should have active state
+ expect($lis.at(3).classes()).not.toContain('active')
+ expect(
+ $lis
+ .at(3)
+ .find('a')
+ .exists()
+ ).toBe(true)
+ expect(
+ $lis
+ .at(3)
+ .find('a')
+ .attributes('href')
+ ).toBe('/admin/manage/library')
+ expect($lis.at(3).text()).toBe('Library')
+
+ wrapper.destroy()
+ })
})
diff --git a/src/components/breadcrumb/fixtures/breadcrumb.html b/src/components/breadcrumb/fixtures/breadcrumb.html
deleted file mode 100755
index 25fab26a029..00000000000
--- a/src/components/breadcrumb/fixtures/breadcrumb.html
+++ /dev/null
@@ -1,9 +0,0 @@
-`.
+> Group a series of buttons together on a single line with ``.
+
+## Overview
+
+Button Groups are an easy way to group a series of buttons together.
-**Example 1:** Default button group and button group using contextual variants
```html
@@ -69,26 +74,24 @@ the `vertical` prop. Split button dropdowns are not supported here.
-
+
```
## Dropdown menu support
-Add [``](./dropdown) menus directly inside your ``. Note
+
+Add [``](/docs/components/dropdown) menus directly inside your ``. Note
that split dropdown menus are not supported when prop `vertical` is set.
-**Example 4:** button group with dropdown menus
```html
- Button 1
- Button 2
+ Button
Item 1
Item 2
Item 3
- Button 3
Item 1
Item 2
@@ -98,15 +101,12 @@ that split dropdown menus are not supported when prop `vertical` is set.
-
+
```
-## Component alias
-`` can also be used by its shorter alias ``.
-
## See also
-Also check out the [``](./button-toolbar) component for generating
-toolbars containing button groups and input groups.
+Also check out the [``](/docs/components/button-toolbar) component for generating
+toolbars containing button groups and input groups.
-## Component Reference
+
diff --git a/src/components/button-group/button-group.js b/src/components/button-group/button-group.js
old mode 100755
new mode 100644
index 7a7c8e6f56e..ea4e2d453da
--- a/src/components/button-group/button-group.js
+++ b/src/components/button-group/button-group.js
@@ -1,41 +1,42 @@
-import { mergeData } from '../../utils'
-import { arrayIncludes } from '../../utils/array'
+import { extend, mergeData } from '../../vue'
+import { NAME_BUTTON_GROUP } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { pick, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { props as buttonProps } from '../button/button'
-export const props = {
- vertical: {
- type: Boolean,
- default: false
- },
- size: {
- type: String,
- default: null,
- validator: size => arrayIncludes(['sm', '', 'lg'], size)
- },
- tag: {
- type: String,
- default: 'div'
- },
- ariaRole: {
- type: String,
- default: 'group'
- }
-}
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ sortKeys({
+ ...pick(buttonProps, ['size']),
+ ariaRole: makeProp(PROP_TYPE_STRING, 'group'),
+ size: makeProp(PROP_TYPE_STRING),
+ tag: makeProp(PROP_TYPE_STRING, 'div'),
+ vertical: makeProp(PROP_TYPE_BOOLEAN, false)
+ }),
+ NAME_BUTTON_GROUP
+)
+
+// --- Main component ---
-export default {
+// @vue/component
+export const BButtonGroup = /*#__PURE__*/ extend({
+ name: NAME_BUTTON_GROUP,
functional: true,
props,
- render (h, { props, data, children }) {
+ render(h, { props, data, children }) {
return h(
props.tag,
mergeData(data, {
class: {
'btn-group': !props.vertical,
'btn-group-vertical': props.vertical,
- [`btn-group-${props.size}`]: Boolean(props.size)
+ [`btn-group-${props.size}`]: props.size
},
- attrs: { 'role': props.ariaRole }
+ attrs: { role: props.ariaRole }
}),
children
)
}
-}
+})
diff --git a/src/components/button-group/button-group.spec.js b/src/components/button-group/button-group.spec.js
old mode 100755
new mode 100644
index a4ed70ada72..9406313bbfc
--- a/src/components/button-group/button-group.spec.js
+++ b/src/components/button-group/button-group.spec.js
@@ -1,24 +1,98 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import { mount } from '@vue/test-utils'
+import { BButtonGroup } from './button-group'
-describe('button-group', async () => {
- beforeEach(loadFixture(__dirname, 'button-group'))
- testVM()
+describe('button-group', () => {
+ it('has expected default structure', async () => {
+ const wrapper = mount(BButtonGroup)
- it('basic should contain base class', async () => {
- const { app: { $refs } } = window
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.attributes('role')).toBeDefined()
+ expect(wrapper.attributes('role')).toBe('group')
+ expect(wrapper.text()).toBe('')
- expect($refs.basic).toHaveClass('btn-group')
+ wrapper.destroy()
+ })
+
+ it('should render default slot', async () => {
+ const wrapper = mount(BButtonGroup, {
+ slots: {
+ default: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.attributes('role')).toBeDefined()
+ expect(wrapper.attributes('role')).toBe('group')
+ expect(wrapper.find('span').exists()).toBe(true)
+ expect(wrapper.text()).toBe('foobar')
+
+ wrapper.destroy()
})
it('should apply vertical class', async () => {
- const { app: { $refs } } = window
+ const wrapper = mount(BButtonGroup, {
+ propsData: {
+ vertical: true
+ }
+ })
- expect($refs.vertical).toHaveClass('btn-group-vertical')
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group-vertical')
+ expect(wrapper.classes()).not.toContain('btn-group')
+ expect(wrapper.classes().length).toBe(1)
+
+ wrapper.destroy()
})
it('should apply size class', async () => {
- const { app: { $refs } } = window
+ const wrapper = mount(BButtonGroup, {
+ propsData: {
+ size: 'sm'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group')
+ expect(wrapper.classes()).toContain('btn-group-sm')
+ expect(wrapper.classes().length).toBe(2)
+
+ wrapper.destroy()
+ })
+
+ it('should apply size class when vertical', async () => {
+ const wrapper = mount(BButtonGroup, {
+ propsData: {
+ size: 'sm',
+ vertical: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group-sm')
+ expect(wrapper.classes()).toContain('btn-group-vertical')
+ expect(wrapper.classes()).not.toContain('btn-group')
+ expect(wrapper.classes().length).toBe(2)
+
+ wrapper.destroy()
+ })
+
+ it('has custom role when aria-role prop set', async () => {
+ const wrapper = mount(BButtonGroup, {
+ propsData: {
+ ariaRole: 'foobar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('btn-group')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.attributes('role')).toBeDefined()
+ expect(wrapper.attributes('role')).toBe('foobar')
- expect($refs.size).toHaveClass('btn-group-sm')
+ wrapper.destroy()
})
})
diff --git a/src/components/button-group/fixtures/button-group.html b/src/components/button-group/fixtures/button-group.html
deleted file mode 100755
index 87e5159c641..00000000000
--- a/src/components/button-group/fixtures/button-group.html
+++ /dev/null
@@ -1,27 +0,0 @@
-.",
+ "components": [
+ {
+ "component": "BButtonGroup",
+ "description": "Group a series of buttons together on a single line",
+ "aliases": [
+ "BBtnGroup"
+ ],
+ "props": [
+ {
+ "prop": "vertical",
+ "description": "When set, rendered the button group in vertical mode"
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content (buttons) to place in the button group"
+ }
+ ]
+ }
+ ]
+ }
}
diff --git a/src/components/button-toolbar/README.md b/src/components/button-toolbar/README.md
index ee52a696a57..aa0ba29bc41 100644
--- a/src/components/button-toolbar/README.md
+++ b/src/components/button-toolbar/README.md
@@ -1,54 +1,48 @@
-# Button toolbar
+# Button Toolbar
-> Group a series of button-groups and/or input-groups together on a single line, with optional keyboard navigation
+> Group a series of button-groups and/or input-groups together on a single line, with optional
+> keyboard navigation
**Example 1:** with button groups & Keyboard navigation
```html
-
- New
- Edit
+
+ Save
+ Cancel
-
+
-
-
-
- Save
- Cancel
-
-
+
```
**Example 3:** with button groups and dropdown menu
@@ -57,9 +51,9 @@
- New
- Edit
- Undo
+ New
+ Edit
+ Undo
Item 1
@@ -67,48 +61,49 @@
Item 3
- Save
- Cancel
+ Save
+ Cancel
-
+
```
## Usage
-Feel free to mix input groups and dropdowns with button groups in your toolbars.
-Similar to the example above, you’ll likely need some utility classes
-though to space things properly.
+
+Feel free to mix input groups and dropdowns with button groups in your toolbars. Similar to the
+example above, you'll likely need some utility classes though to space things properly.
## Sizing
-Note, if you want smaller or larger buttons or controls, set the `size`
-prop directly on the ``, ``, and `` components.
+
+Note, if you want smaller or larger buttons or controls, set the `size` prop directly on the
+``, ``, and `` components.
## Justify
-Make the toolbar span the maximum available width, by increasing spacing between the
-button groups, input groups and dropdowns, by setting the prop `justify`.
-## Keyboard Navigation
+Make the toolbar span the maximum available width, by increasing spacing between the button groups,
+input groups and dropdowns, by setting the prop `justify`.
+
+## Keyboard navigation
+
Enable optional keyboard navigation by setting the prop `key-nav`.
-| Keypress | Action
-| -------- | ------
-| LEFT or UP | Move to the previous non-disabled item in the toolbar
-| RIGHT or DOWN | Move to the next non-disabled item in the toolbar
-| SHIFT+LEFT or SHIFT+UP | Move to the first non-disabled item in the toolbar
-| SHIFT+RIGHT or SHIFT+DOWN | Move to the last non-disabled item in the toolbar
-| TAB | Move to the next control on the page
-| SHIFT+TAB | Move to the previous control on the page
+| Keypress | Action |
+| --------------------------------------------------------------------- | ----------------------------------------------------- |
+| Left or Up | Move to the previous non-disabled item in the toolbar |
+| Right or Down | Move to the next non-disabled item in the toolbar |
+| Shift+Left or Shift+Up | Move to the first non-disabled item in the toolbar |
+| Shift+Right or Shift+Down | Move to the last non-disabled item in the toolbar |
+| Tab | Move to the next control on the page |
+| Shift+Tab | Move to the previous control on the page |
-**Caution:** If you have text or text-like inputs in your toolbar, leave keyboard navigation off,
-as it is not possble to use key presses to jump out of a text (or test-like) inputs.
+**Caution:** If you have text or text-like inputs in your toolbar, leave keyboard navigation off, as
+it is not possible to use key presses to jump out of a text (or test-like) inputs.
-## Component alias
-`` can also be used via the shorthand alias ``
+## See also
-## See Also
-- [``](./button-group)
-- [``](./dropdown)
+- [``](/docs/components/button-group)
+- [``](/docs/components/dropdown)
-## Component Reference
+
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index da21fd7e00f..092ed02ad33 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -1,5 +1,13 @@
-import { isVisible, selectAll } from '../../utils/dom'
-import { KeyCodes } from '../../utils'
+import { extend } from '../../vue'
+import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN } from '../../constants/props'
+import { CODE_DOWN, CODE_LEFT, CODE_RIGHT, CODE_UP } from '../../constants/key-codes'
+import { attemptFocus, contains, isVisible, selectAll } from '../../utils/dom'
+import { stopEvent } from '../../utils/events'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+
+// --- Constants ---
const ITEM_SELECTOR = [
'.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
@@ -9,121 +17,101 @@ const ITEM_SELECTOR = [
'input[type="radio"]:not(.disabled)'
].join(',')
-export default {
- render (h) {
- const t = this
- return h(
- 'div',
- {
- class: t.classObject,
- attrs: {
- role: 'toolbar',
- tabindex: t.keyNav ? '0' : null
- },
- on: {
- focusin: t.onFocusin,
- keydown: t.onKeydown
- }
- },
- [ t.$slots.default ]
- )
- },
- computed: {
- classObject () {
- return [
- 'btn-toolbar',
- (this.justify && !this.vertical) ? 'justify-content-between' : ''
- ]
- }
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ {
+ justify: makeProp(PROP_TYPE_BOOLEAN, false),
+ keyNav: makeProp(PROP_TYPE_BOOLEAN, false)
},
- props: {
- justify: {
- type: Boolean,
- default: false
- },
- keyNav: {
- type: Boolean,
- default: false
+ NAME_BUTTON_TOOLBAR
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BButtonToolbar = /*#__PURE__*/ extend({
+ name: NAME_BUTTON_TOOLBAR,
+ mixins: [normalizeSlotMixin],
+ props,
+ mounted() {
+ // Pre-set the tabindexes if the markup does not include
+ // `tabindex="-1"` on the toolbar items
+ if (this.keyNav) {
+ this.getItems()
}
},
methods: {
- onFocusin (evt) {
- if (evt.target === this.$el) {
- evt.preventDefault()
- evt.stopPropagation()
- this.focusFirst(evt)
- }
- },
- onKeydown (evt) {
- if (!this.keyNav) {
- return
- }
- const key = evt.keyCode
- const shift = evt.shiftKey
- if (key === KeyCodes.UP || key === KeyCodes.LEFT) {
- evt.preventDefault()
- evt.stopPropagation()
- if (shift) {
- this.focusFirst(evt)
- } else {
- this.focusNext(evt, true)
- }
- } else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT) {
- evt.preventDefault()
- evt.stopPropagation()
- if (shift) {
- this.focusLast(evt)
- } else {
- this.focusNext(evt, false)
- }
- }
- },
- setItemFocus (item) {
- this.$nextTick(() => {
- item.focus()
+ getItems() {
+ const items = selectAll(ITEM_SELECTOR, this.$el)
+ // Ensure `tabindex="-1"` is set on every item
+ items.forEach(item => {
+ item.tabIndex = -1
})
+ return items.filter(el => isVisible(el))
},
- focusNext (evt, prev) {
+ focusFirst() {
const items = this.getItems()
- if (items.length < 1) {
- return
- }
- let index = items.indexOf(evt.target)
- if (prev && index > 0) {
- index--
- } else if (!prev && index < items.length - 1) {
- index++
- }
- if (index < 0) {
- index = 0
+ attemptFocus(items[0])
+ },
+ focusPrev(event) {
+ let items = this.getItems()
+ const index = items.indexOf(event.target)
+ if (index > -1) {
+ items = items.slice(0, index).reverse()
+ attemptFocus(items[0])
}
- this.setItemFocus(items[index])
},
- focusFirst (evt) {
- const items = this.getItems()
- if (items.length > 0) {
- this.setItemFocus(items[0])
+ focusNext(event) {
+ let items = this.getItems()
+ const index = items.indexOf(event.target)
+ if (index > -1) {
+ items = items.slice(index + 1)
+ attemptFocus(items[0])
}
},
- focusLast (evt) {
- const items = this.getItems()
- if (items.length > 0) {
- this.setItemFocus([items.length - 1])
+ focusLast() {
+ const items = this.getItems().reverse()
+ attemptFocus(items[0])
+ },
+ onFocusin(event) {
+ const { $el } = this
+ if (event.target === $el && !contains($el, event.relatedTarget)) {
+ stopEvent(event)
+ this.focusFirst(event)
}
},
- getItems () {
- let items = selectAll(ITEM_SELECTOR, this.$el)
- items.forEach(item => {
- // Ensure tabfocus is -1 on any new elements
- item.tabIndex = -1
- })
- return items.filter(el => isVisible(el))
+ onKeydown(event) {
+ const { keyCode, shiftKey } = event
+ if (keyCode === CODE_UP || keyCode === CODE_LEFT) {
+ stopEvent(event)
+ shiftKey ? this.focusFirst(event) : this.focusPrev(event)
+ } else if (keyCode === CODE_DOWN || keyCode === CODE_RIGHT) {
+ stopEvent(event)
+ shiftKey ? this.focusLast(event) : this.focusNext(event)
+ }
}
},
- mounted () {
- if (this.keyNav) {
- // Pre-set the tabindexes if the markup does not include tabindex="-1" on the toolbar items
- this.getItems()
- }
+ render(h) {
+ const { keyNav } = this
+
+ return h(
+ 'div',
+ {
+ staticClass: 'btn-toolbar',
+ class: { 'justify-content-between': this.justify },
+ attrs: {
+ role: 'toolbar',
+ tabindex: keyNav ? '0' : null
+ },
+ on: keyNav
+ ? {
+ focusin: this.onFocusin,
+ keydown: this.onKeydown
+ }
+ : {}
+ },
+ [this.normalizeSlot()]
+ )
}
-}
+})
diff --git a/src/components/button-toolbar/button-toolbar.spec.js b/src/components/button-toolbar/button-toolbar.spec.js
index 23f045b41b3..dcb0ec5003c 100644
--- a/src/components/button-toolbar/button-toolbar.spec.js
+++ b/src/components/button-toolbar/button-toolbar.spec.js
@@ -1,18 +1,185 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import { mount } from '@vue/test-utils'
+import { waitNT } from '../../../tests/utils'
+import { BButton } from '../button/button'
+import { BButtonGroup } from '../button-group/button-group'
+import { BButtonToolbar } from './button-toolbar'
-describe('button-toolbar', async () => {
- beforeEach(loadFixture(__dirname, 'button-toolbar'))
- testVM()
+describe('button-toolbar', () => {
+ it('toolbar root should be "div"', async () => {
+ const wrapper = mount(BButtonToolbar)
+ expect(wrapper.element.tagName).toBe('DIV')
+ wrapper.destroy()
+ })
it('toolbar should contain base class', async () => {
- const { app: { $refs } } = window
+ const wrapper = mount(BButtonToolbar)
+ expect(wrapper.classes()).toContain('btn-toolbar')
+ wrapper.destroy()
+ })
- expect($refs.toolbar).toHaveClass('btn-toolbar')
+ it('toolbar should not have class "justify-content-between"', async () => {
+ const wrapper = mount(BButtonToolbar)
+ expect(wrapper.classes()).not.toContain('justify-content-between')
+ wrapper.destroy()
})
it('toolbar should have role', async () => {
- const { app: { $refs } } = window
+ const wrapper = mount(BButtonToolbar)
+ expect(wrapper.attributes('role')).toBe('toolbar')
+ wrapper.destroy()
+ })
+
+ it('toolbar should not have tabindex by default', async () => {
+ const wrapper = mount(BButtonToolbar)
+ expect(wrapper.attributes('tabindex')).toBeUndefined()
+ wrapper.destroy()
+ })
+
+ it('toolbar should have class "justify-content-between" when justify set', async () => {
+ const wrapper = mount(BButtonToolbar, {
+ propsData: {
+ justify: true
+ }
+ })
+ expect(wrapper.classes()).toContain('justify-content-between')
+ expect(wrapper.classes()).toContain('btn-toolbar')
+ wrapper.destroy()
+ })
+
+ it('toolbar should have tabindex when key-nav set', async () => {
+ const wrapper = mount(BButtonToolbar, {
+ propsData: {
+ keyNav: true
+ }
+ })
+ expect(wrapper.attributes('tabindex')).toBeDefined()
+ expect(wrapper.attributes('tabindex')).toBe('0')
+ expect(wrapper.element.tabIndex).toBe(0)
+ wrapper.destroy()
+ })
+
+ // These tests are wrapped in a new describe to limit the scope of the getBCR Mock
+ describe('keyboard navigation', () => {
+ const origGetBCR = Element.prototype.getBoundingClientRect
+
+ beforeEach(() => {
+ // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
+ // In our test below, all pagination buttons would normally be visible
+ Element.prototype.getBoundingClientRect = jest.fn(() => ({
+ width: 24,
+ height: 24,
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0
+ }))
+ })
+
+ afterEach(() => {
+ // Restore prototype
+ Element.prototype.getBoundingClientRect = origGetBCR
+ })
+
+ // Test App for keynav
+ const App = {
+ render(h) {
+ return h(BButtonToolbar, { props: { keyNav: true } }, [
+ h(BButtonGroup, [h(BButton, 'a'), h(BButton, 'b')]),
+ h(BButtonGroup, [h(BButton, { props: { disabled: true } }, 'c'), h(BButton, 'd')]),
+ h(BButtonGroup, [h(BButton, 'e'), h(BButton, 'f')])
+ ])
+ }
+ }
+
+ it('has correct structure', async () => {
+ const wrapper = mount(App, {
+ attachTo: document.body
+ })
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
+ expect(wrapper.attributes('tabindex')).toBe('0')
+
+ const $groups = wrapper.findAllComponents(BButtonGroup)
+ expect($groups).toBeDefined()
+ expect($groups.length).toBe(3)
+
+ const $btns = wrapper.findAll('button')
+ expect($btns).toBeDefined()
+ expect($btns.length).toBe(6)
+ expect($btns.at(0).element.matches('button[tabindex="-1"')).toBe(true)
+ expect($btns.at(1).element.matches('button[tabindex="-1"')).toBe(true)
+ expect($btns.at(2).element.matches('button[tabindex="-1"')).toBe(false) // Disabled button
+ expect($btns.at(3).element.matches('button[tabindex="-1"')).toBe(true)
+ expect($btns.at(4).element.matches('button[tabindex="-1"')).toBe(true)
+ expect($btns.at(5).element.matches('button[tabindex="-1"')).toBe(true)
+
+ wrapper.destroy()
+ })
+
+ it('focuses first button when tabbed into', async () => {
+ const wrapper = mount(App, {
+ attachTo: document.body
+ })
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
+ expect(wrapper.attributes('tabindex')).toBe('0')
+
+ const $btns = wrapper.findAll('button')
+ expect($btns).toBeDefined()
+ expect($btns.length).toBe(6)
+
+ expect(document.activeElement).not.toBe(wrapper.element)
+ expect(document.activeElement).not.toBe($btns.at(0).element)
+
+ await wrapper.trigger('focusin')
+ expect(document.activeElement).toBe($btns.at(0).element)
+
+ wrapper.destroy()
+ })
+
+ it('keyboard navigation works', async () => {
+ const wrapper = mount(App, {
+ attachTo: document.body
+ })
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
+ expect(wrapper.attributes('tabindex')).toBe('0')
+
+ const $btns = wrapper.findAll('button')
+ expect($btns).toBeDefined()
+ expect($btns.length).toBe(6)
+
+ // Focus first button
+ $btns.at(0).element.focus()
+ expect(document.activeElement).toBe($btns.at(0).element)
+
+ // Cursor right
+ await $btns.at(0).trigger('keydown.right')
+ expect(document.activeElement).toBe($btns.at(1).element)
+
+ // Cursor right (skips disabled button)
+ await $btns.at(1).trigger('keydown.right')
+ expect(document.activeElement).toBe($btns.at(3).element)
+
+ // Cursor shift-right (focuses last button)
+ await $btns.at(1).trigger('keydown.right', { shiftKey: true })
+ expect(document.activeElement).toBe($btns.at(5).element)
+
+ // Cursor left
+ await $btns.at(5).trigger('keydown.left')
+ expect(document.activeElement).toBe($btns.at(4).element)
+
+ // Cursor shift left (focuses first button)
+ await $btns.at(5).trigger('keydown.left', { shiftKey: true })
+ expect(document.activeElement).toBe($btns.at(0).element)
- expect($refs.toolbar.$el.getAttribute('role')).toBe('toolbar')
+ wrapper.destroy()
+ })
})
})
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.html b/src/components/button-toolbar/fixtures/button-toolbar.html
deleted file mode 100644
index ef208d89bf1..00000000000
--- a/src/components/button-toolbar/fixtures/button-toolbar.html
+++ /dev/null
@@ -1,17 +0,0 @@
- and/or together on a single line, with optional keyboard navigation.",
+ "components": [
+ {
+ "component": "BButtonToolbar",
+ "aliases": [
+ "BBtnToolbar"
+ ],
+ "props": [
+ {
+ "prop": "justify",
+ "description": "Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns"
+ },
+ {
+ "prop": "keyNav",
+ "description": "When set, enabled keyboard navigation mode for the toolbar. Do not set this prop when the toolbar has inputs"
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content to place in the button toolbar"
+ }
+ ]
+ }
+ ]
+ }
}
diff --git a/src/components/button/README.md b/src/components/button/README.md
old mode 100755
new mode 100644
index 79d004124ec..c541153bce9
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@@ -1,28 +1,29 @@
-# Buttons
+# Button
-> Use Bootstrap’s custom `b-button` component for actions in forms, dialogs, and more.
-Includes support for a handful of contextual variations, sizes, states, and more.
+> Use Bootstrap's custom `b-button` component for actions in forms, dialogs, and more. Includes
+> support for a handful of contextual variations, sizes, states, and more.
+
+## Overview
+
+BootstrapVue's `` component generates either a `
-
+
-
-
+
+ &.bv-gray-color {
+ background-size: 100% 12rem;
+ background-position-y: top;
+ padding-top: 16rem;
+ }
+
+ &.bv-p-reset {
+ padding-top: $bv-angle-depth-md;
+ padding-bottom: 0;
+ }
+ }
+}
+
+// Main masthead logo
+.bv-logo-animated {
+ width: 240px;
+ height: 240px;
+
+ @at-root .logo-aside {
+ min-height: 240px;
+ }
+
+ @media (min-width: map-get($grid-breakpoints, 'md')) {
+ width: 230px;
+ height: 230px;
+
+ @at-root .logo-aside {
+ min-height: 230px;
+ }
+ }
+
+ @media (min-width: map-get($grid-breakpoints, 'lg')) {
+ width: 309px;
+ height: 309px;
+
+ @at-root .logo-aside {
+ min-height: 309px;
+ }
+ }
+
+ @media (min-width: map-get($grid-breakpoints, 'xl')) {
+ width: 370px;
+ height: 370px;
+
+ @at-root .logo-aside {
+ min-height: 370px;
+ }
+ }
+}
+
diff --git a/docs/pages/play.vue b/docs/pages/play.vue
old mode 100755
new mode 100644
index 370e8b43a15..9e3960673b5
--- a/docs/pages/play.vue
+++ b/docs/pages/play.vue
@@ -1,283 +1,956 @@
-
- 
-
-
-
-
-
-Bootstrap + Vue
-- Build responsive, mobile-first projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap V4. -
-- Bootstrap-Vue provides one of the most comprehensive implementations - of Bootstrap V4 components and grid system available for Vue.js 2.4+, - complete with extensive and automated WAI-ARIA accessibility markup. -
-- Bootstrap 4 is the world's most popular framework for building responsive, mobile-first sites. -
-
- Vue.js (pronounced /vjuË, like view) is a progressive framework for building user interfaces.
+
+ With BootstrapVue you can build responsive,
+ mobile-first, and ARIA accessible projects on the web using
+ Vue.js and the world's most popular
+ front-end CSS library —
+ Bootstrap v4.
+
+ Current Version
+ With more than 85 components, over 45 available plugins, several directives, and {{ bootstrapIconsCount }}+ icons,
+ BootstrapVue provides one of the most
+ comprehensive implementations of the
+ Bootstrap v{{ bootstrapVersionMajor }} component and grid system
+ available for Vue.js v{{ vueVersionMinor }}, complete with
+ extensive and automated
+
+ Easily integrate BootstrapVue into your Nuxt.js projects using our included Nuxt.js module.
+ You can optionally specify only the components, directives and/or plugins you require.
+
+ BootstrapVue's documentation is created using
+ BootstrapVue and
+ generated with Nuxt.js
+
+ BootstrapVue
+
+
+
+
-
+
+
+
+
+ Overview
+ Reasons to choose BootstrapVue
+ Integrate with Nuxt.js
+
+
-
+
+
-
-
- `, use one of the four required contextual variants by setting the
-`variant` prop to one of the following: `info`, `success`, `warning` or `danger`.
-The default is `info`.
+`variant` prop to one of the following: `info`, `success`, `warning` or `danger`. The default is
+`info`.
```html
` can also contain additional HTML elements like headings and paragraphs,
-which will be styled with the appropriate color matching the variant.
+
+`` can also contain additional HTML elements like headings and paragraphs, which will be
+styled with the appropriate color matching the variant.
```html
-
-
-
-
-
+`.
+
+Use the `.alert-link` utility CSS class to quickly provide matching colored links within any alert.
+Use on `` or ``.
```html
` inline. This will add
-a close `X` button. Use the `dismiss-label` prop to change the hidden label text associated
-with the dismiss button.
+
+Using the `dismissible` prop it's possible to dismiss any `` inline. This will add a close
+`X` button. Use the `dismiss-label` prop to change the hidden label text associated with the dismiss
+button.
```html
- Dismissible Alert! Click the close button over there ⇒
+ Dismissible Alert! Click the close button over there ⇒
-
+
```
-### Auto dismissing alerts:
-To create a `` that dismisses automatically after a period of time, set
-the `show` prop to the number of seconds you would like the `` to remain visible for.
+### Auto dismissing alerts
+
+To create a `` that dismisses automatically after a period of time, set the `show` prop (or
+the `v-model`) to the number of seconds you would like the `` to remain visible for. Only
+integer number of seconds are supported.
```html
foobar '
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+
+ expect(wrapper.find('article').exists()).toBe(true)
+ expect(wrapper.find('article').text()).toBe('foobar')
+
+ wrapper.destroy()
+ })
+
+ it('hidden alert shows when show prop set', async () => {
+ const wrapper = mount(BAlert)
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ await wrapper.setProps({ show: true })
+
+ expect(wrapper.html()).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-info')
+
+ wrapper.destroy()
+ })
+
+ it('dismissible alert should have class alert-dismissible', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true,
+ dismissible: true
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-info')
+ expect(wrapper.classes()).toContain('alert-dismissible')
+
+ wrapper.destroy()
+ })
+
+ it('dismissible alert should have close button', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true,
+ dismissible: true
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.find('button').exists()).toBe(true)
+ expect(wrapper.find('button').classes()).toContain('close')
+ expect(wrapper.find('button').attributes('aria-label')).toBe('Close')
+
+ wrapper.destroy()
+ })
+
+ it('dismissible alert should have close button with custom aria-label', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true,
+ dismissible: true,
+ dismissLabel: 'foobar'
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.find('button').exists()).toBe(true)
+ expect(wrapper.find('button').classes()).toContain('close')
+ expect(wrapper.find('button').attributes('aria-label')).toBe('foobar')
+
+ wrapper.destroy()
})
it('dismiss button click should close alert', async () => {
- const { app } = window
- const alert = app.$refs.success_alert
- // const closeBtn = alert.$el.querySelector('.close')
- // This line causes Jest to puke for some reason????
- // closeBtn.click()
- // But this line works instead (which i what click calls)
- alert.dismiss()
- await nextTick()
- expect(app.$el.textContent).not.toContain('Success Alert')
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true,
+ dismissible: true
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert-dismissible')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.find('button').exists()).toBe(true)
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+ expect(wrapper.emitted('input')).toBeUndefined()
+
+ await wrapper.find('button').trigger('click')
+
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+ expect(wrapper.emitted('dismissed')).toBeDefined()
+ expect(wrapper.emitted('dismissed').length).toBe(1)
+ expect(wrapper.emitted('input')).toBeDefined()
+ expect(wrapper.emitted('input').length).toBe(1)
+ expect(wrapper.emitted('input')[0][0]).toBe(false)
+
+ wrapper.destroy()
+ })
+
+ it('fade transition works', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: false,
+ fade: true
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ await wrapper.setProps({ show: true })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-info')
+ expect(wrapper.classes()).toContain('fade')
+ await waitRAF()
+ await waitRAF()
+ await waitRAF()
+
+ await wrapper.setProps({ show: false })
+ await waitRAF()
+
+ // Dismissed won't be emitted unless dismissible=true or show is a number
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
})
it('dismiss countdown emits dismiss-count-down event', async () => {
- const { app } = window
- const alert = app.$refs.counter_alert
- const spy = jest.fn()
-
- // Default is hidden
- expect(app.$el.textContent).not.toContain('This alert will dismiss after')
-
- // Make visible by changing visible state
- const dismissTime = 5
- alert.$on('dismiss-count-down', spy)
- await setData(app, 'dismissCountDown', dismissTime)
- // await nextTick();
- expect(spy).not.toBeCalled()
+ jest.useFakeTimers()
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: 3
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.html()).toBeDefined()
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+ expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
+ expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(3) // 3 - 0
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(2)
+ expect(wrapper.emitted('dismiss-count-down')[1][0]).toBe(2) // 3 - 1
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(3)
+ expect(wrapper.emitted('dismiss-count-down')[2][0]).toBe(1) // 3 - 2
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(4)
+ expect(wrapper.emitted('dismiss-count-down')[3][0]).toBe(0) // 3 - 3
+
+ await waitNT(wrapper.vm)
+ await waitRAF()
+ expect(wrapper.emitted('dismissed')).toBeDefined()
+ expect(wrapper.emitted('dismissed').length).toBe(1)
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
+ })
+
+ it('dismiss countdown emits dismiss-count-down event when show is number as string', async () => {
+ jest.useFakeTimers()
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: '3'
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.html()).toBeDefined()
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+ expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
+ expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(3) // 3 - 0
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(2)
+ expect(wrapper.emitted('dismiss-count-down')[1][0]).toBe(2) // 3 - 1
+
jest.runTimersToTime(1000)
- // Emits a dismiss-count-down` event
- expect(spy).toHaveBeenCalledWith(dismissTime - 1)
- // await nextTick();
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(3)
+ expect(wrapper.emitted('dismiss-count-down')[2][0]).toBe(1) // 3 - 2
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(4)
+ expect(wrapper.emitted('dismiss-count-down')[3][0]).toBe(0) // 3 - 3
+
+ await waitNT(wrapper.vm)
+ await waitRAF()
+ expect(wrapper.emitted('dismissed')).toBeDefined()
+ expect(wrapper.emitted('dismissed').length).toBe(1)
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
+ })
+
+ it('dismiss countdown handles when show value is changed', async () => {
+ jest.useFakeTimers()
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: 2
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.html()).toBeDefined()
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+ expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
+ expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(2) // 2 - 0
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(2)
+ expect(wrapper.emitted('dismiss-count-down')[1][0]).toBe(1) // 2 - 1
+
+ // Reset countdown
+ await wrapper.setProps({ show: 3 })
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(3)
+ expect(wrapper.emitted('dismiss-count-down')[2][0]).toBe(3) // 3 - 0
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(4)
+ expect(wrapper.emitted('dismiss-count-down')[3][0]).toBe(2) // 3 - 1
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(5)
+ expect(wrapper.emitted('dismiss-count-down')[4][0]).toBe(1) // 3 - 2
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(6)
+ expect(wrapper.emitted('dismiss-count-down')[5][0]).toBe(0) // 3 - 3
+
+ // Just to make sure there aren't any more timers pending
+ jest.runAllTimers()
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(6)
+
+ await waitNT(wrapper.vm)
+ await waitRAF()
+ expect(wrapper.emitted('dismissed')).toBeDefined()
+ expect(wrapper.emitted('dismissed').length).toBe(1)
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
+ })
+
+ it('dismiss countdown handles when alert dismissed early', async () => {
+ jest.useFakeTimers()
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: 2,
+ dismissible: true
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.html()).toBeDefined()
+
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismissed')).toBeUndefined()
+ expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
+ expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(2) // 2 - 0
+
+ jest.runTimersToTime(1000)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(2)
+ expect(wrapper.emitted('dismiss-count-down')[1][0]).toBe(1) // 2 - 1
+
+ await wrapper.find('button').trigger('click')
+ await waitRAF()
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(3)
+ expect(wrapper.emitted('dismiss-count-down')[2][0]).toBe(0)
+
+ // Should not emit any new countdown values
jest.runAllTimers()
- expect(app.$el.textContent).toContain('This alert will dismiss after')
- expect(spy.mock.calls.length).toBe(dismissTime + 1)
+ await waitNT(wrapper.vm)
+
+ expect(wrapper.emitted('dismiss-count-down').length).toBe(3)
+
+ await waitNT(wrapper.vm)
+ await waitRAF()
+ expect(wrapper.emitted('dismissed')).toBeDefined()
+ expect(wrapper.emitted('dismissed').length).toBe(1)
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
})
})
diff --git a/src/components/alert/fixtures/alert.html b/src/components/alert/fixtures/alert.html
deleted file mode 100755
index 6e915ddb629..00000000000
--- a/src/components/alert/fixtures/alert.html
+++ /dev/null
@@ -1,39 +0,0 @@
-` component can be used to maintain a minimum responsive aspect ratio for content.
+> When the content is longer than the available height, then the component will expand vertically to
+> fit all content. If the content is shorter than the computed aspect height, the component will
+> ensure a minimum height is maintained.
+
+## Overview
+
+The default [aspect]() ratio is `1:1` (ratio of
+`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
+to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
+`'4:3'`.
+
+The width will always be 100% of the available width in the parent element/component.
+
+```html
+
+ ` component](/docs/components/embed) for responsive embeds (videos, iframes, etc.)
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
new file mode 100644
index 00000000000..772cf59087f
--- /dev/null
+++ b/src/components/aspect/aspect.js
@@ -0,0 +1,65 @@
+import { extend } from '../../vue'
+import { NAME_ASPECT } from '../../constants/components'
+import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
+import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
+import { mathAbs } from '../../utils/math'
+import { toFloat } from '../../utils/number'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+
+// --- Constants ---
+
+const CLASS_NAME = 'b-aspect'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ {
+ // Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
+ // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
+ aspect: makeProp(PROP_TYPE_NUMBER_STRING, '1:1'),
+ tag: makeProp(PROP_TYPE_STRING, 'div')
+ },
+ NAME_ASPECT
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BAspect = /*#__PURE__*/ extend({
+ name: NAME_ASPECT,
+ mixins: [normalizeSlotMixin],
+ props,
+ computed: {
+ padding() {
+ const { aspect } = this
+ let ratio = 1
+ if (RX_ASPECT.test(aspect)) {
+ // Width and/or Height can be a decimal value below `1`, so
+ // we only fallback to `1` if the value is `0` or `NaN`
+ const [width, height] = aspect.split(RX_ASPECT_SEPARATOR).map(v => toFloat(v) || 1)
+ ratio = width / height
+ } else {
+ ratio = toFloat(aspect) || 1
+ }
+ return `${100 / mathAbs(ratio)}%`
+ }
+ },
+ render(h) {
+ const $sizer = h('div', {
+ staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
+ style: { paddingBottom: this.padding, height: 0 }
+ })
+
+ const $content = h(
+ 'div',
+ {
+ staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
+ style: { marginLeft: '-100%' }
+ },
+ this.normalizeSlot()
+ )
+
+ return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
+ }
+})
diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
new file mode 100644
index 00000000000..6813631451e
--- /dev/null
+++ b/src/components/aspect/aspect.spec.js
@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils'
+import { BAspect } from './aspect'
+
+describe('aspect', () => {
+ it('should have expected default structure', async () => {
+ const wrapper = mount(BAspect)
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('b-aspect')
+ expect(wrapper.classes()).toContain('d-flex')
+ expect(wrapper.classes().length).toBe(2)
+
+ const $sizer = wrapper.find('.b-aspect-sizer')
+ expect($sizer.exists()).toBe(true)
+ expect($sizer.element.tagName).toBe('DIV')
+ expect($sizer.classes()).toContain('flex-grow-1')
+ // Default aspect ratio is 1:1
+ expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
+
+ const $content = wrapper.find('.b-aspect-content')
+ expect($content.exists()).toBe(true)
+ expect($content.element.tagName).toBe('DIV')
+ expect($content.classes()).toContain('flex-grow-1')
+ expect($content.classes()).toContain('w-100')
+ expect($content.classes()).toContain('mw-100')
+ expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+ wrapper.destroy()
+ })
+
+ it('should have expected structure when prop `tag` is set', async () => {
+ const wrapper = mount(BAspect, {
+ propsData: {
+ tag: 'section'
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('SECTION')
+ expect(wrapper.classes()).toContain('b-aspect')
+ expect(wrapper.classes()).toContain('d-flex')
+ expect(wrapper.classes().length).toBe(2)
+
+ const $sizer = wrapper.find('.b-aspect-sizer')
+ expect($sizer.exists()).toBe(true)
+ expect($sizer.element.tagName).toBe('DIV')
+ expect($sizer.classes()).toContain('flex-grow-1')
+ // Default aspect ratio is 1:1
+ expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
+
+ const $content = wrapper.find('.b-aspect-content')
+ expect($content.exists()).toBe(true)
+ expect($content.element.tagName).toBe('DIV')
+ expect($content.classes()).toContain('flex-grow-1')
+ expect($content.classes()).toContain('w-100')
+ expect($content.classes()).toContain('mw-100')
+ expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+ wrapper.destroy()
+ })
+
+ it('should have expected structure when aspect is set to "4:3"', async () => {
+ const wrapper = mount(BAspect, {
+ propsData: {
+ aspect: '4:3'
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('b-aspect')
+ expect(wrapper.classes()).toContain('d-flex')
+ expect(wrapper.classes().length).toBe(2)
+
+ const $sizer = wrapper.find('.b-aspect-sizer')
+ expect($sizer.exists()).toBe(true)
+ expect($sizer.element.tagName).toBe('DIV')
+ expect($sizer.classes()).toContain('flex-grow-1')
+ expect($sizer.attributes('style')).toContain('padding-bottom: 75%;')
+
+ const $content = wrapper.find('.b-aspect-content')
+ expect($content.exists()).toBe(true)
+ expect($content.element.tagName).toBe('DIV')
+ expect($content.classes()).toContain('flex-grow-1')
+ expect($content.classes()).toContain('w-100')
+ expect($content.classes()).toContain('mw-100')
+ expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+ wrapper.destroy()
+ })
+ it('should have expected structure when aspect is set to `16/9`', async () => {
+ const wrapper = mount(BAspect, {
+ propsData: {
+ aspect: 16 / 9
+ }
+ })
+
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('b-aspect')
+ expect(wrapper.classes()).toContain('d-flex')
+ expect(wrapper.classes().length).toBe(2)
+
+ const $sizer = wrapper.find('.b-aspect-sizer')
+ expect($sizer.exists()).toBe(true)
+ expect($sizer.element.tagName).toBe('DIV')
+ expect($sizer.classes()).toContain('flex-grow-1')
+ expect($sizer.attributes('style')).toContain('padding-bottom: 56.25%;')
+
+ const $content = wrapper.find('.b-aspect-content')
+ expect($content.exists()).toBe(true)
+ expect($content.element.tagName).toBe('DIV')
+ expect($content.classes()).toContain('flex-grow-1')
+ expect($content.classes()).toContain('w-100')
+ expect($content.classes()).toContain('mw-100')
+ expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+ wrapper.destroy()
+ })
+})
diff --git a/src/components/aspect/index.d.ts b/src/components/aspect/index.d.ts
new file mode 100644
index 00000000000..c084f67bdc0
--- /dev/null
+++ b/src/components/aspect/index.d.ts
@@ -0,0 +1,11 @@
+//
+// Aspect
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const AspectPlugin: BvPlugin
+
+// Component: b-aspect
+export declare class BAspect extends BvComponent {}
diff --git a/src/components/aspect/index.js b/src/components/aspect/index.js
new file mode 100644
index 00000000000..40b22eed368
--- /dev/null
+++ b/src/components/aspect/index.js
@@ -0,0 +1,8 @@
+import { BAspect } from './aspect'
+import { pluginFactory } from '../../utils/plugins'
+
+const AspectPlugin = /*#__PURE__*/ pluginFactory({
+ components: { BAspect }
+})
+
+export { AspectPlugin, BAspect }
diff --git a/src/components/aspect/package.json b/src/components/aspect/package.json
new file mode 100644
index 00000000000..38131fb3e8c
--- /dev/null
+++ b/src/components/aspect/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "@bootstrap-vue/aspect",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Aspect",
+ "version": "2.9.0",
+ "description": "The `` component can be used to maintain a minimum responsive aspect ratio for content.",
+ "components": [
+ {
+ "component": "BAspect",
+ "props": [
+ {
+ "prop": "aspect",
+ "description": "Aspect as a width to height numeric ratio (such as `1.5`) or `width:height` string (such as '16:9')"
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content to place in the aspect"
+ }
+ ]
+ }
+ ]
+ }
+}
diff --git a/src/components/avatar/README.md b/src/components/avatar/README.md
new file mode 100644
index 00000000000..1cb36052333
--- /dev/null
+++ b/src/components/avatar/README.md
@@ -0,0 +1,567 @@
+# Avatar
+
+> Avatars are a BootstrapVue custom component, and are typically used to display a user profile as a
+> picture, an icon, or short text. `` provides several props for customizing its
+> appearance such as color variant and roundness, and optionally supports acting as a button, link
+> or [router link](/docs/reference/router-links).
+
+## Overview
+
+Avatars are lightweight components, which render inline by default, so that they are vertically
+centered beside any adjoining plain text. They also can be used as children of other components.
+
+```html
+
+ ` renders with a circular border radius. You can change the rounding by setting the prop
+`rounded` to one of the values `true`, `'sm'`, `'lg'`, `'top'`, `'left'`, `'right'`, or `'bottom'`.
+When set to `true` (or the empty string `''`), it uses the Bootstrap default of medium rounding.
+
+```html
+
+ ` will be vertically centered with its adjoining content. In some cases you
+may want to alter the alignment, such as ensuring that a text-only avatar aligns its text with the
+adjoining text. Simply set a [vertical alignment utility](/docs/reference/utility-classes) class on
+the component, such as `` or
+``, etc.
+
+## Actionable avatars
+
+Easily create avatars that respond to clicks, or avatars that change the URL/route when clicked.
+Actionable avatars will appear in the document tab sequence, and are accessible for both screen
+reader and keyboard-only users.
+
+Image avatars, when actionalble, employ a basic scale transform on the image when hovered.
+
+### Button
+
+Want to trigger the opening of a modal or trigger an action? Set the `button` prop to instruct
+`` to render as a `
-
+
```
-Note that depending on how they are used, badges may be confusing for users
-of screen readers and similar assistive technologies. While the styling of badges
-provides a visual cue as to their purpose, these users will simply be presented with
-the content of the badge. Depending on the specific situation, these badges may seem
-like random additional words or numbers at the end of a sentence, link, or button.
+Note that depending on how they are used, badges may be confusing for users of screen readers and
+similar assistive technologies. While the styling of badges provides a visual cue as to their
+purpose, these users will simply be presented with the content of the badge. Depending on the
+specific situation, these badges may seem like random additional words or numbers at the end of a
+sentence, link, or button.
-Unless the context is clear (as with the “Notifications” example, where it is
-understood that the “4” is the number of notifications), consider including additional
-context with a visually hidden piece of additional text.
+Unless the context is clear (as with the "Notifications" example, where it is understood that the
+"4" is the number of notifications), consider including additional context with a visually hidden
+piece of additional text.
```html
-
-
-
- Here you can interactively play and test components with a fresh vue instance.
-
- TIP: - You can clone docs repo, to hack and develop components. - changes will be reflected and hot-reloaded instantly. -
- Please refer to - Docs
- for more info about available tags and usage.
-
- - TIP: - You can clone docs repo, to hack and develop components. - changes will be reflected and hot-reloaded instantly. -
- Please refer to -
-
-
-
-
-
-
-
-
-
-
-
-
-
- Template
-
- {{full ? 'Split' : 'Full'}}
-
-
-
-
-
-
-
-
- JS
-
- {{full ? 'Split' : 'Full'}}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ msg[0] === 'danger' ? 'error' : msg[0] === 'warning' ? 'warn' : 'log' }}
+
+ {{ msg[1] }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pages/vue3.vue b/docs/pages/vue3.vue
new file mode 100644
index 00000000000..1894910a042
--- /dev/null
+++ b/docs/pages/vue3.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+ With the release of v2.23.0, you can begin using BootstrapVue with the migration build of Vue.js 3.
+
+
+ While
+
+
+
+
+
+
diff --git a/docs/plugins/bootstrap-vue.js b/docs/plugins/bootstrap-vue.js
index 4b3ae0e1349..eccf73126ff 100644
--- a/docs/plugins/bootstrap-vue.js
+++ b/docs/plugins/bootstrap-vue.js
@@ -1,4 +1,5 @@
import Vue from 'vue'
-import BootstrapVue from '../../src'
+import { BootstrapVue, BootstrapVueIcons } from '../../src'
Vue.use(BootstrapVue)
+Vue.use(BootstrapVueIcons)
diff --git a/docs/plugins/codemirror.js b/docs/plugins/codemirror.js
deleted file mode 100755
index a9b2770eba7..00000000000
--- a/docs/plugins/codemirror.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import CodeMirror from '../components/codemirror.vue'
-
-Vue.component('codemirror', CodeMirror)
diff --git a/docs/plugins/docs-mixin.js b/docs/plugins/docs-mixin.js
index 371fc0810b8..e0e4de68fbf 100644
--- a/docs/plugins/docs-mixin.js
+++ b/docs/plugins/docs-mixin.js
@@ -1,52 +1,104 @@
/*
* docs-mixin: used by any page under /docs path
*/
-import { scrollTo, offsetTop } from '~/utils'
+import { updateMetaTOC, scrollTo, offsetTop } from '~/utils'
+import { bvDescription, nav } from '~/content'
+const TOC_CACHE = {}
+
+// @vue/component
export default {
- data () {
+ head() {
return {
- scrollTimout: null
+ title: this.headTitle,
+ meta: this.headMeta
}
},
-
computed: {
- content () {
- return (this.$route.params.slug && this._content[this.$route.params.slug]) || {}
+ headTitle() {
+ const routeName = this.$route.name
+ let title = ''
+ let section = ''
+ if (this.meta && this.meta.title) {
+ title = this.meta.title
+ }
+ if (/^docs-components/.test(routeName)) {
+ section = 'Components'
+ } else if (/^docs-directives/.test(routeName)) {
+ section = 'Directives'
+ } else if (/^docs-reference/.test(routeName)) {
+ section = 'Reference'
+ }
+ return [title, section, 'BootstrapVue'].filter(Boolean).join(' | ')
+ },
+ headMeta() {
+ const section = this.$route.name.split('-')[1]
+ const sectionMeta = section ? nav.find(n => n.base === `${section}/`) : null
+ const description =
+ this.meta && this.meta.description
+ ? this.meta.description
+ : sectionMeta && sectionMeta.description
+ ? sectionMeta.description
+ : bvDescription
+ const meta = [
+ {
+ hid: 'og:title',
+ name: 'og:title',
+ property: 'og:title',
+ content: this.headTitle
+ }
+ ]
+ if (description) {
+ meta.push({
+ hid: 'description',
+ name: 'description',
+ content: description
+ })
+ meta.push({
+ hid: 'og:description',
+ name: 'og:description',
+ property: 'og:description',
+ content: description
+ })
+ }
+ return meta
}
},
+ created() {
+ // Create private non-reactive props
+ this.$_filterTimer = null
- head () {
- return {
- title: `${(this.meta && this.meta.title) || 'Docs'} - BootstrapVue`
- }
+ // In a `$nextTick()` to ensure `toc.vue` is created first
+ this.$nextTick(() => {
+ const key = `${this.$route.name}_${this.$route.params.slug || ''}`
+ const toc =
+ TOC_CACHE[key] || (TOC_CACHE[key] = updateMetaTOC(this.baseTOC || {}, this.meta || null))
+ this.$root.$emit('docs-set-toc', toc)
+ })
},
-
- mounted () {
- clearTimeout(this.scrollTimeout)
- this.scrollTimeout = null
+ mounted() {
+ this.clearScrollTimeout()
this.focusScroll()
- this.$root.$emit('setTOC', this.readme)
},
-
- updated () {
- clearTimeout(this.scrollTimeout)
- this.scrollTimeout = null
+ updated() {
+ this.clearScrollTimeout()
this.focusScroll()
},
-
- beforeDestroy () {
- this.$root.$emit('setTOC', '')
+ beforeDestroy() {
+ this.clearScrollTimeout()
},
-
methods: {
- focusScroll () {
- let hash = this.$route.hash
+ clearScrollTimeout() {
+ clearTimeout(this.$_scrollTimeout)
+ this.$_scrollTimeout = null
+ },
+ focusScroll() {
+ const hash = this.$route.hash
this.$nextTick(() => {
let el
if (hash) {
- // We use an attribute querySelector rather than getElementByID, as some auto
- // generated ID's are invalid, and some may appear more than once
+ // We use an attribute `querySelector()` rather than `getElementByID()`,
+ // as some auto-generated ID's are invalid or not unique
el = this.$el.querySelector(`[id="${hash.replace('#', '')}"]`)
this.scrollIntoView(el)
}
@@ -59,15 +111,15 @@ export default {
}
})
},
- scrollIntoView (el) {
+ scrollIntoView(el) {
if (el) {
// Get the document scrolling element
const scroller = document.scrollingElement || document.documentElement || document.body
+ this.clearScrollTimeout()
// Allow time for v-play to finish rendering
- this.scrollTimeout = setTimeout(() => {
- // scroll heading into view (minus offset to account for nav top height
+ this.$_scrollTimeout = setTimeout(() => {
+ // Scroll heading into view (minus offset to account for nav top height)
scrollTo(scroller, offsetTop(el) - 70, 100)
- this.scrollTimeout = null
}, 100)
}
}
diff --git a/docs/plugins/docs.js b/docs/plugins/docs.js
index 3f2ace3c732..8bf74c80863 100644
--- a/docs/plugins/docs.js
+++ b/docs/plugins/docs.js
@@ -1,13 +1,6 @@
-// Extract docs into main chunk
-// import '../../components'
-// import '../../directives'
-// import '../../reference'
-// import '../../layout'
-// import '../../misc'
-
// Disable vue global error handler
import Vue from 'vue'
-export default function () {
+export default function() {
Vue.config.errorHandler = console.error
}
diff --git a/docs/plugins/play.js b/docs/plugins/play.js
index 9d179214781..08416a5f1fe 100644
--- a/docs/plugins/play.js
+++ b/docs/plugins/play.js
@@ -1,108 +1,185 @@
import Vue from 'vue'
+import debounce from 'lodash/debounce'
+import needsTranspiler from '../utils/needs-transpiler'
+import hljs from '../utils/hljs'
-const VUE_REGEX = //
-const TEMPLATE_REGEX = /([\s\S]*)<\/template>/
-const SCRIPT_REGEX = /
diff --git a/src/components-extra/dropdown-select/package.json b/src/components-extra/dropdown-select/package.json
deleted file mode 100644
index 66412f0fda8..00000000000
--- a/src/components-extra/dropdown-select/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "name": "@bootstrap-vue/dropdown-select",
- "version": "0.0.0",
- "meta": {
-
- }
-}
diff --git a/src/components-extra/index.js b/src/components-extra/index.js
deleted file mode 100644
index 49efab9903a..00000000000
--- a/src/components-extra/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import dropdownSelect from './dropdown-select/dropdown-select'
-
-export {
- dropdownSelect
-}
diff --git a/src/components/alert/README.md b/src/components/alert/README.md
old mode 100755
new mode 100644
index 3a5674b98b0..c7ab43b1ca0
--- a/src/components/alert/README.md
+++ b/src/components/alert/README.md
@@ -1,10 +1,12 @@
-# Alerts
+# Alert
-> Provide contextual feedback messages for typical user actions with the handful of
-available and flexible alert messages.
+> Provide contextual feedback messages for typical user actions with the handful of available and
+> flexible alert messages.
-Alerts are available for any length of text, as well as an optional dismiss button
-(and optional auto-dismissing).
+## Overview
+
+Alerts are available for any length of text, as well as an optional dismiss button (and optional
+auto-dismissing).
```html
@@ -13,67 +15,78 @@ Alerts are available for any length of text, as well as an optional dismiss butt
Success Alert
-
+
Dismissible Alert!
-
-
-
+
+
-
+
Show alert with count-down timer
-
-
- Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
-
+
+
+ Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
+
-
+
```
## Visible state
-Use the `show` prop to control the visibility state of the alert. By
-default alerts are **not** shown. Set the prop `show` to explicity display them.
+Use the `show` prop to control the visibility state of the alert. By default alerts are **not**
+shown. Set the prop `show` to explicitly display them.
+
+The `show` prop accepts boolean `true` or `false` to show and hide the alert respectively. It can
+also be set to a positive integer (representing seconds) to create a self dismissing alert. See the
+[Auto Dismissing Alerts](#auto-dismissing-alerts) section below for details.
+
+### `v-model` support
+
+You can use the `v-model` directive to create two-way data bindings on the `show` prop as in
+`v-model="showDismissibleAlert"` above. Useful when you use dismissible because when user closes the
+alert, your variable will be updated. Do not use the `show` prop when using `v-model`.
+
+## Contextual variants
-## Alert contextual variants
For proper styling of `
-
+
+
+
+
+
+ Loading JavaScript compiler...
+
+
+
+
+
+
+
+
+
+ Your browser does not support modern ES6 JavaScript syntax. However, the code in the
+ JavaScipt editor will be transpiled to work with your browser, except for any ES6 code
+ that is in the Template editor (i.e. destructuring, arrow functions, etc.)
+
+
+
+
+
+
+
+
+
+
+ Reset to default
+
+
+
+
+
+ Export to
+
+
+
+
+ CodePen
+
+
+
+
+
+ CodeSandbox
+
+
+
+
+
+
+
+
+
+ JSFiddle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
+
+
- Result
-
- {{vertical ? 'Horizontal' : 'Vertical'}}
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ title }}
+
+ Here you can interactively play and test components with a fresh Vue.js instance. Please
+ refer to the
+
+ {{ full ? 'Split' : 'Full' }}
+
+
+
+ + Template +
+
-
+
+
+
+
+
+
+
-
+
+
- Console
-
- Clear
-
-
-
-
-
- {{message[0]}}
- {{message[1]}}
-
-
- -
+
+ {{ full ? 'Split' : 'Full' }}
+
- + JavaScript + compiling +
+
+
+ {{ vertical ? 'Horizontal' : 'Vertical' }}
+
+
+
-
+ + Result + building +
+
+
+ Clear
+
+
+
+
+ + Console log +
+Transitioning to Vue.js 3.x
+
+ BootstrapVue evolves with @vue-compat!
+
@vue/compat can assist with simple migrations, it is not intended for long-term use. We highly recommend migrating to BootstrapVueNext, a complete rewrite that supports Bootstrap v5 and fully utilizes Vue.js 3's capabilities.
+ + Important Limitations +
+@vue-compat support is currently limited to the { MODE: 2 } configuration for both the compiler and Vue.js. For more details, refer to the compat configuration section of the migration guide.
This means that while you can configure individual components with { compatConfig: { MODE: 3 }}, you should maintain global configuration in legacy mode to ensure all BootstrapVue functions operate correctly.
{{ cmpCode }}
+
+ + Getting Started +
+ +-
+
- Follow the upgrade workflow to configure your application. +
- Upgrade to bootstrap-vue v2.23.0 or higher. +
- Ensure you are using Bootstrap v4. +
For a reference implementation or to report issues with @vue/compat, you can use this sandbox.
This alert will dismiss after {{dismissCountDown}} seconds...
-This alert will dismiss after {{ dismissCountDown }} seconds...
+
@@ -87,127 +100,181 @@ The default is `info`.
Dark Alert
-
+
```
-### Conveying meaning to assistive technologies:
-Using color variants to add meaning only provides a visual indication, which will not
-be conveyed to users of assistive technologies – such as screen readers. Ensure that
-information denoted by the color is either obvious from the content itself (e.g. the
-visible text), or is included through alternative means, such as additional text hidden
-with the `.sr-only` class.
+### Conveying meaning to assistive technologies
+
+Using color variants to add meaning only provides a visual indication, which will not be conveyed to
+users of assistive technologies – such as screen readers. Ensure that information denoted by the
+color is either obvious from the content itself (e.g. the visible text), or is included through
+alternative means, such as additional text hidden with the `.sr-only` class.
## Additional content inside alerts
-`Well done!
-- Aww yeah, you successfully read this important alert message. - This example text is going to run a bit longer so that you can see - how spacing within an alert works with this kind of content. -
--
- Whenever you need to, be sure to use margin utilities to keep things nice and tidy. -
-
+
+
+
+
+
+
```
### Color of links within alerts
-Use the `.alert-link` utility CSS class to quickly provide matching colored links
-within any alert. Use on `` or `Well done!
++ Aww yeah, you successfully read this important alert message. This example text is going to + run a bit longer so that you can see how spacing within an alert works with this kind of + content. +
++
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy. +
+
-
- Primary Alert with an example link.
-
-
- Secondary Alert with an example link.
-
-
- Success Alert with an example link.
-
-
- Danger Alert with an example link.
-
-
- Warning Alert with an example link.
-
-
- Info Alert with an example link.
-
-
- Light Alert with an example link.
-
-
- Dark Alert with an example link .
-
+ Primary Alert
+ Secondary Alert
+ Success Alert
+ Danger Alert
+ Warning Alert
+ Info Alert
+ Light Alert
+ Dark Alert
-
+
```
## Dismissible alerts
-Using the `dismissible` prop it’s possible to dismiss any `
-
- This alert will dismiss after {{dismissCountDown}} seconds...
+
+ This alert will dismiss after {{ dismissCountDown }} seconds...
-
+
Show alert with count-down timer
-
+
+
+
+```
+
+## Fading alerts
+
+Use the `fade` prop to enable animation. By default alerts are not animated.
+
+```html
+
+
+ Dismissible Alert!
+
+
+ Dismissible Alert!
+
+
+
+ This alert will dismiss after {{ dismissCountDown }} seconds...
+
+
+
+ Show alert with count-down timer
+
+
+ Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
+
+
+
+
+
-
+
```
-## Component Reference
+
diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 49bfc4ac237..e618006c35d 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,117 +1,185 @@
-import bBtnClose from '../button/button-close'
+import { NAME_ALERT } from '../../constants/components'
+import { EVENT_NAME_DISMISSED, EVENT_NAME_DISMISS_COUNT_DOWN } from '../../constants/events'
+import {
+ PROP_TYPE_BOOLEAN,
+ PROP_TYPE_BOOLEAN_NUMBER_STRING,
+ PROP_TYPE_STRING
+} from '../../constants/props'
+import { SLOT_NAME_DISMISS } from '../../constants/slots'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { requestAF } from '../../utils/dom'
+import { isBoolean, isNumeric } from '../../utils/inspect'
+import { makeModelMixin } from '../../utils/model'
+import { toInteger } from '../../utils/number'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { COMPONENT_UID_KEY, extend } from '../../vue'
+import { BButtonClose } from '../button/button-close'
+import { BVTransition } from '../transition/bv-transition'
-export default {
- components: {bBtnClose},
- render (h) {
- if (!this.localShow) {
- // If not showing, render placeholder
- return h(false)
- }
- let dismissBtn = h(false)
- if (this.dismissible) {
- // Add dismiss button
- dismissBtn = h(
- 'b-button-close',
- { attrs: { 'aria-label': this.dismissLabel }, on: { click: this.dismiss } },
- [ this.$slots.dismiss ]
- )
- }
- return h(
- 'div',
- { class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true } },
- [ dismissBtn, this.$slots.default ]
- )
- },
- model: {
- prop: 'show',
- event: 'input'
- },
- data () {
+// --- Constants ---
+
+const {
+ mixin: modelMixin,
+ props: modelProps,
+ prop: MODEL_PROP_NAME,
+ event: MODEL_EVENT_NAME
+} = makeModelMixin('show', {
+ type: PROP_TYPE_BOOLEAN_NUMBER_STRING,
+ defaultValue: false
+})
+
+// --- Helper methods ---
+
+// Convert `show` value to a number
+const parseCountDown = show => {
+ if (show === '' || isBoolean(show)) {
+ return 0
+ }
+ show = toInteger(show, 0)
+ return show > 0 ? show : 0
+}
+
+// Convert `show` value to a boolean
+const parseShow = show => {
+ if (show === '' || show === true) {
+ return true
+ }
+ if (toInteger(show, 0) < 1) {
+ // Boolean will always return false for the above comparison
+ return false
+ }
+ return !!show
+}
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+ sortKeys({
+ ...modelProps,
+ dismissLabel: makeProp(PROP_TYPE_STRING, 'Close'),
+ dismissible: makeProp(PROP_TYPE_BOOLEAN, false),
+ fade: makeProp(PROP_TYPE_BOOLEAN, false),
+ variant: makeProp(PROP_TYPE_STRING, 'info')
+ }),
+ NAME_ALERT
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BAlert = /*#__PURE__*/ extend({
+ name: NAME_ALERT,
+ mixins: [modelMixin, normalizeSlotMixin],
+ props,
+ data() {
return {
- countDownTimerId: null,
- dismissed: false
- }
- },
- computed: {
- classObject () {
- return ['alert', this.alertVariant, this.dismissible ? 'alert-dismissible' : '']
- },
- alertVariant () {
- const variant = this.variant
- return `alert-${variant}`
- },
- localShow () {
- return !this.dismissed && (this.countDownTimerId || this.show)
+ countDown: 0,
+ // If initially shown, we need to set these for SSR
+ localShow: parseShow(this[MODEL_PROP_NAME])
}
},
- props: {
- variant: {
- type: String,
- default: 'info'
- },
- dismissible: {
- type: Boolean,
- default: false
+ watch: {
+ [MODEL_PROP_NAME](newValue) {
+ this.countDown = parseCountDown(newValue)
+ this.localShow = parseShow(newValue)
},
- dismissLabel: {
- type: String,
- default: 'Close'
+ countDown(newValue) {
+ this.clearCountDownInterval()
+ const show = this[MODEL_PROP_NAME]
+ // Ignore if `show` transitions to a boolean value
+ if (isNumeric(show)) {
+ this.$emit(EVENT_NAME_DISMISS_COUNT_DOWN, newValue)
+ // Update the v-model if needed
+ if (show !== newValue) {
+ this.$emit(MODEL_EVENT_NAME, newValue)
+ }
+ if (newValue > 0) {
+ this.localShow = true
+ this.$_countDownTimeout = setTimeout(() => {
+ this.countDown--
+ }, 1000)
+ } else {
+ // Slightly delay the hide to allow any UI updates
+ this.$nextTick(() => {
+ requestAF(() => {
+ this.localShow = false
+ })
+ })
+ }
+ }
},
- show: {
- type: [Boolean, Number],
- default: false
- }
- },
- watch: {
- show () {
- this.showChanged()
+ localShow(newValue) {
+ const show = this[MODEL_PROP_NAME]
+ // Only emit dismissed events for dismissible or auto-dismissing alerts
+ if (!newValue && (this.dismissible || isNumeric(show))) {
+ this.$emit(EVENT_NAME_DISMISSED)
+ }
+ // Only emit booleans if we weren't passed a number via v-model
+ if (!isNumeric(show) && show !== newValue) {
+ this.$emit(MODEL_EVENT_NAME, newValue)
+ }
}
},
- mounted () {
- this.showChanged()
+ created() {
+ // Create private non-reactive props
+ this.$_filterTimer = null
+
+ const show = this[MODEL_PROP_NAME]
+ this.countDown = parseCountDown(show)
+ this.localShow = parseShow(show)
},
- destroyed /* istanbul ignore next */ () {
- this.clearCounter()
+ beforeDestroy() {
+ this.clearCountDownInterval()
},
methods: {
- dismiss () {
- this.clearCounter()
- this.dismissed = true
- this.$emit('dismissed')
- this.$emit('input', false)
- if (typeof this.show === 'number') {
- this.$emit('dismiss-count-down', 0)
- this.$emit('input', 0)
- } else {
- this.$emit('input', false)
- }
- },
- clearCounter () {
- if (this.countDownTimerId) {
- clearInterval(this.countDownTimerId)
- this.countDownTimerId = null
- }
+ dismiss() {
+ this.clearCountDownInterval()
+ this.countDown = 0
+ this.localShow = false
},
- showChanged () {
- // Reset counter status
- this.clearCounter()
- // Reset dismiss status
- this.dismissed = false
- // No timer for boolean values
- if (this.show === true || this.show === false || this.show === null || this.show === 0) {
- return
+ clearCountDownInterval() {
+ clearTimeout(this.$_countDownTimeout)
+ this.$_countDownTimeout = null
+ }
+ },
+ render(h) {
+ let $alert = h()
+ if (this.localShow) {
+ const { dismissible, variant } = this
+
+ let $dismissButton = h()
+ if (dismissible) {
+ // Add dismiss button
+ $dismissButton = h(
+ BButtonClose,
+ {
+ attrs: { 'aria-label': this.dismissLabel },
+ on: { click: this.dismiss }
+ },
+ [this.normalizeSlot(SLOT_NAME_DISMISS)]
+ )
}
- // Start counter
- let dismissCountDown = this.show
- this.countDownTimerId = setInterval(() => {
- if (dismissCountDown < 1) {
- this.dismiss()
- return
- }
- dismissCountDown--
- this.$emit('dismiss-count-down', dismissCountDown)
- this.$emit('input', dismissCountDown)
- }, 1000)
+
+ $alert = h(
+ 'div',
+ {
+ staticClass: 'alert',
+ class: {
+ 'alert-dismissible': dismissible,
+ [`alert-${variant}`]: variant
+ },
+ attrs: {
+ role: 'alert',
+ 'aria-live': 'polite',
+ 'aria-atomic': true
+ },
+ key: this[COMPONENT_UID_KEY]
+ },
+ [$dismissButton, this.normalizeSlot()]
+ )
}
+
+ return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
}
-}
+})
diff --git a/src/components/alert/alert.spec.js b/src/components/alert/alert.spec.js
old mode 100755
new mode 100644
index 0bb5e349f91..ab0c4a8a634
--- a/src/components/alert/alert.spec.js
+++ b/src/components/alert/alert.spec.js
@@ -1,75 +1,442 @@
-import { loadFixture, testVM, nextTick, setData } from '../../../tests/utils'
+import { mount } from '@vue/test-utils'
+import { waitNT, waitRAF } from '../../../tests/utils'
+import { BAlert } from './alert'
-describe('alert', async () => {
- jest.useFakeTimers()
+describe('alert', () => {
+ it('hidden alert renders comment node', async () => {
+ const wrapper = mount(BAlert)
- beforeEach(loadFixture(__dirname, 'alert'))
- testVM()
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
- it('visible alerts have class names', async () => {
- const { app } = window
+ wrapper.destroy()
+ })
+
+ it('hidden alert (show = "0") renders comment node', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: '0'
+ }
+ })
- expect(app.$refs.default_alert).toHaveClass('alert alert-info')
- expect(app.$refs.success_alert).toHaveClass('alert alert-success')
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+ wrapper.destroy()
})
- it('show prop set to true displays hidden alert', async () => {
- const { app } = window
+ it('hidden alert (show = 0) renders comment node', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: 0
+ }
+ })
- // Default is hidden
- expect(app.$el.textContent).not.toContain('Dismissible Alert!')
+ expect(wrapper.vm).toBeDefined()
+ expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
- // Make visible by changing visible state
- await setData(app, 'showDismissibleAlert', true)
- expect(app.$el.textContent).toContain('Dismissible Alert!')
+ wrapper.destroy()
})
- it('dismiss should have class alert-dismissible', async () => {
- const { app } = window
- const alert = app.$refs.success_alert
- expect(alert).toHaveClass('alert-dismissible')
+ it('visible alert has default class names and attributes', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-info')
+ expect(wrapper.classes()).not.toContain('fade')
+ expect(wrapper.classes()).not.toContain('show')
+
+ expect(wrapper.attributes('role')).toBe('alert')
+ expect(wrapper.attributes('aria-live')).toBe('polite')
+ expect(wrapper.attributes('aria-atomic')).toBe('true')
+
+ wrapper.destroy()
})
- it('dismiss should have close button', async () => {
- const { app } = window
- const alert = app.$refs.success_alert
- const closeBtn = alert.$el.querySelector('.close')
- expect(closeBtn).not.toBeNull()
- expect(closeBtn.tagName).toBe('BUTTON')
+ it('visible alert (show = "") has default class names and attributes', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: ''
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-info')
+ expect(wrapper.classes()).not.toContain('fade')
+ expect(wrapper.classes()).not.toContain('show')
+
+ expect(wrapper.attributes('role')).toBe('alert')
+ expect(wrapper.attributes('aria-live')).toBe('polite')
+ expect(wrapper.attributes('aria-atomic')).toBe('true')
+
+ wrapper.destroy()
+ })
+
+ it('visible alert has variant when prop variant is set', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true,
+ variant: 'success'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('DIV')
+ expect(wrapper.classes()).toContain('alert')
+ expect(wrapper.classes()).toContain('alert-success')
+ expect(wrapper.attributes('role')).toBe('alert')
+ expect(wrapper.attributes('aria-live')).toBe('polite')
+ expect(wrapper.attributes('aria-atomic')).toBe('true')
+
+ wrapper.destroy()
+ })
+
+ it('renders content from default slot', async () => {
+ const wrapper = mount(BAlert, {
+ propsData: {
+ show: true
+ },
+ slots: {
+ default: '
-
- Default Alert
-
-
-
- Success Alert
-
-
-
- Dismissible Alert!
-
-
-
- This alert will dismiss after {{dismissCountDown}} seconds...
-
-
- Show alert with count-down timer
-
-
- Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
-
-
diff --git a/src/components/alert/fixtures/alert.js b/src/components/alert/fixtures/alert.js
deleted file mode 100755
index db21594b414..00000000000
--- a/src/components/alert/fixtures/alert.js
+++ /dev/null
@@ -1,15 +0,0 @@
-window.app = new Vue({
- el: '#app',
- data: {
- dismissCountDown: null,
- showDismissibleAlert: false
- },
- methods: {
- countDownChanged (dismissCountDown) {
- this.dismissCountDown = dismissCountDown
- },
- showAlert () {
- this.dismissCountDown = 5
- }
- }
-})
diff --git a/src/components/alert/index.d.ts b/src/components/alert/index.d.ts
new file mode 100644
index 00000000000..9c0c0e0ac69
--- /dev/null
+++ b/src/components/alert/index.d.ts
@@ -0,0 +1,13 @@
+//
+// Alert
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const AlertPlugin: BvPlugin
+
+// Component: b-alert
+export declare class BAlert extends BvComponent {
+ dismiss: () => void
+}
diff --git a/src/components/alert/index.js b/src/components/alert/index.js
index b47b95b1c2c..4d1298a253c 100644
--- a/src/components/alert/index.js
+++ b/src/components/alert/index.js
@@ -1,18 +1,8 @@
-import bAlert from './alert'
-import { registerComponents, vueUse } from '../../utils'
+import { BAlert } from './alert'
+import { pluginFactory } from '../../utils/plugins'
-/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
+const AlertPlugin = /*#__PURE__*/ pluginFactory({
+ components: { BAlert }
+})
-const components = {
- bAlert
-}
-
-const VuePlugin = {
- install (Vue) {
- registerComponents(Vue, components)
- }
-}
-
-vueUse(VuePlugin)
-
-export default VuePlugin
+export { AlertPlugin, BAlert }
diff --git a/src/components/alert/package.json b/src/components/alert/package.json
old mode 100755
new mode 100644
index 3d5cef4e9b3..57da4a5df36
--- a/src/components/alert/package.json
+++ b/src/components/alert/package.json
@@ -1,30 +1,72 @@
{
- "name": "@bootstrap-vue/alert",
- "version": "1.0.0",
- "meta": {
- "title": "Alert",
- "component": "bAlert",
+ "name": "@bootstrap-vue/alert",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Alert",
+ "description": "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.",
+ "components": [
+ {
+ "component": "BAlert",
+ "props": [
+ {
+ "prop": "dismissLabel",
+ "description": "Value for the 'aria-label' attribute on the dismiss button"
+ },
+ {
+ "prop": "dismissible",
+ "description": "When set, enables the dismiss close button"
+ },
+ {
+ "prop": "show",
+ "description": "When set, shows the alert. Set to a number (seconds) to show and automatically dismiss the alert after the number of seconds has elapsed"
+ },
+ {
+ "prop": "variant",
+ "description": "Applies one of the Bootstrap theme color variants to the component"
+ }
+ ],
"events": [
- {
- "event": "dismissed",
- "description": "Alert dismissed"
- },
- {
- "event": "dismiss-count-down",
- "description": "When dismissAfterSeconds enabled, this event emits every second on countdown.",
- "args": [
- {
- "arg": "dismissCountDown",
- "description": "Time remaining to dismissed"
- }
- ]
- }
+ {
+ "event": "dismiss-count-down",
+ "description": "When prop show is a number, this event emits every second on countdown",
+ "args": [
+ {
+ "arg": "dismissCountDown",
+ "type": "Number",
+ "description": "Time remaining to dismissed"
+ }
+ ]
+ },
+ {
+ "event": "dismissed",
+ "description": "Alert dismissed either via the dismiss close button or when the dismiss countdown has expired"
+ },
+ {
+ "event": "input",
+ "description": "Used to update the v-model show value",
+ "args": [
+ {
+ "arg": "show",
+ "type": [
+ "Boolean",
+ "Number"
+ ],
+ "description": "Boolean state of alert, or Number for current countdown value"
+ }
+ ]
+ }
],
"slots": [
- {
- "name": "dismiss",
- "description": "Content for the dismiss button."
- }
+ {
+ "name": "dismiss",
+ "description": "Content for the dismiss button"
+ },
+ {
+ "name": "default",
+ "description": "Content to place in the alert"
+ }
]
- }
+ }
+ ]
+ }
}
diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
new file mode 100644
index 00000000000..15c19f81137
--- /dev/null
+++ b/src/components/aspect/README.md
@@ -0,0 +1,65 @@
+# Aspect
+
+> The `
+
+
+
+
+ This will always be an aspect of "{{ aspect }}",
+ except when the content is too tall.
+
+
+
+
+
+
+
+
+```
+
+## See also
+
+- [`
+
+
+ 5
+
+
+ 12
+
+
+ 9
+
+
+ 7
+
+
+
+
+
+
+```
+
+## Avatar types
+
+The avatar content can be either a an image, an icon, or short text string. Avatar content defaults
+to the [`'person-fill'` icon](/docs/icons) when no other content is specified.
+
+You can also supply custom content via the default slot, although you may need to apply additional
+styling on the content.
+
+### Image content
+
+Use the `src` prop to specify a URL of an image to use as the avatar content. The image should have
+an aspect ratio of `1:1` (meaning the width and height should be equal), otherwise image aspect
+distortion will occur. The image will be scaled up or down to fit within the avatar's bounding box.
+
+```html
+
+ Using stand-alone:
+
+
+ Using in components (list group) example:
+
+
+
+
+
+```
+
+**Notes:**
+
+- When using a module bundler and project relative image URLs, please refer to the
+ [Component img src resolving](/docs/reference/images) reference section for additional details.
+- The `src` prop takes precedence over the `icon` and `text` props.
+- 2.11.0+ If the image fails to load, the avatar will
+ fallback to the value of the `icon` or `text` props. If neither the `icon` or `text` props are
+ provided, then the default avatar icon will be shown. Also, when the image fails to load, the
+ `img-error` event will be emitted.
+- [Variant colors](#variants) when using images not normally visible, unless the image fails load.
+ The variant will affect the focus styling when the image avatar is also an
+ [actionalble avatar](#actionalble-avatars).
+
+### Icon content
+
+Easily use one of [BootstrapVue's icons](/docs/icons) as the avatar content via the `icon` prop. The
+prop should be set to a valid icon name. Icons will scale respective to the [`size` prop](#sizing).
+
+```html
+
+
+
+
+
+
+```
+
+**Notes:**
+
+- When providing a BootstrapVue icon name, you _must_ ensure that you have registered the
+ corresponding icon component (either locally to your component/page, or globally), if not using
+ the full [`BootstrapVueIcons` plugin](/docs/icons).
+- The `icon` prop takes precedence over the `text` prop.
+- If the `text`, `src`, or `icon` props are not provided _and_ the [default slot](#custom-content)
+ has no content, then the `person-fill` icon will be used.
+
+### Text content
+
+You can specify a short string as the content of an avatar via the `text` prop. The string should be
+short (1 to 3 characters), and will be transformed via CSS to be all uppercase. The font size will
+be scaled relative to the [`size` prop setting](#sizing).
+
+```html
+
+
+
+
+
+
+```
+
+### Custom content
+
+Use the `default` slot to render custom content in the avatar, for finer grained control of its
+appearance, or if using custom icons or SVGs e.g.:
+
+```html
+
+ Hello
World
+ 你好
世界
+
+
+
+
+```
+
+**Notes:**
+
+- The default slot takes precedence over the `text`, `src` and `icon` props.
+- The default slot content will be wrapped in a `` element to ensure proper centering.
+- You may need additional styling applied to the custom content to compensate for the
+ [shape of avatar component](#rounding).
+
+## Styling
+
+### Variants
+
+Use the `variant` prop to specify one of Bootstrap theme variant colors. The default variant is
+`secondary`.
+
+```html
+
+ World
世界
+
+
+
+
+```
+
+If you have defined additional custom variants via
+[SASS theming variables](/docs/reference/theming), the custom variants will also be available to
+use.
+
+### Sizing
+
+By default, avatars are sized to `2.5em` (which is relative to the current font size). You can
+change the size of the avatar by changing the current font size, or use the prop `size` to specify
+an explicit size. The sizes `sm`, `md` and `lg` default to `1.5em`, `2.5em` and `3.5em`. Numbers get
+converted to pixel values. Any other value _must_ include the units (such as `px`, `em`, or `rem`).
+
+```html
+
+
+
+
+
+
+```
+
+**Note:** Avatars are _always_ rendered with an aspect ratio of `1:1`.
+
+### Square
+
+Prefer a square avatar? simply set the `square` prop to `true`.
+
+```html
+
+
+
+
+
+
+```
+
+### Rounding
+
+`
+
+
+
+
+```
+
+**Notes:**
+
+- The `square` prop takes precedence over the `rounded` prop.
+- Alternatively to to the `square` prop, you can set the `rounded` prop to the string `'0'` to
+ achieve a square avatar.
+
+### Alignment
+
+By default `
@@ -70,20 +70,20 @@ and `danger`. If no variant is specified `default` will be used.
Dark
-
+
```
+### Conveying meaning to assistive technologies
-### Conveying meaning to assistive technologies:
-Using color to add meaning only provides a visual indication, which will not
-be conveyed to users of assistive technologies – such as screen readers. Ensure
-that information denoted by the color is either obvious from the content itself
-(e.g. the visible text), or is included through alternative means, such as
-additional text hidden with the `.sr-only` class.
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of
+assistive technologies – such as screen readers. Ensure that information denoted by the color is
+either obvious from the content itself (e.g. the visible text), or is included through alternative
+means, such as additional text hidden with the `.sr-only` class.
## Pill badges
-Use the `pill` prop to make badges more rounded (with a larger border-radius
-and additional horizontal padding). Useful if you miss the badges from Bootstrap v3.
+
+Use the `pill` prop to make badges more rounded (with a larger border-radius and additional
+horizontal padding). Useful if you miss the badges from Bootstrap v3.
```html
@@ -97,13 +97,13 @@ and additional horizontal padding). Useful if you miss the badges from Bootstrap
Dark
-
+
```
-
## Actionable badges
-Quickly provide actionable badges with hover and focus states by specifying either the
-`href` prop (links) or `to` prop (router-links):
+
+Quickly provide actionable badges with hover and focus states by specifying either the `href` prop
+(links) or `to` prop (router-links):
```html
@@ -117,11 +117,10 @@ Quickly provide actionable badges with hover and focus states by specifying eith
Dark
-
+
```
-Refer to the [Router support](/docs/reference/router-links) reference page for
-router-link specific props.
-
+Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
+props.
-## Component Reference
+
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
old mode 100755
new mode 100644
index 8fa2f0eb33a..37c6ffc12e8
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.js
@@ -1,45 +1,55 @@
-import { mergeData, pluckProps } from '../../utils'
-import { assign } from '../../utils/object'
-import Link, { propsFactory as linkPropsFactory } from '../link/link'
+import { extend, mergeData } from '../../vue'
+import { NAME_BADGE } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { isLink } from '../../utils/router'
+import { BLink, props as BLinkProps } from '../link/link'
-let linkProps = linkPropsFactory()
+// --- Props ---
+
+const linkProps = omit(BLinkProps, ['event', 'routerTag'])
delete linkProps.href.default
delete linkProps.to.default
-export const props = assign(linkProps, {
- tag: {
- type: String,
- default: 'span'
- },
- variant: {
- type: String,
- default: 'secondary'
- },
- pill: {
- type: Boolean,
- default: false
- }
-})
+export const props = makePropsConfigurable(
+ sortKeys({
+ ...linkProps,
+ pill: makeProp(PROP_TYPE_BOOLEAN, false),
+ tag: makeProp(PROP_TYPE_STRING, 'span'),
+ variant: makeProp(PROP_TYPE_STRING, 'secondary')
+ }),
+ NAME_BADGE
+)
-export default {
+// --- Main component ---
+
+// @vue/component
+export const BBadge = /*#__PURE__*/ extend({
+ name: NAME_BADGE,
functional: true,
props,
- render (h, { props, data, children }) {
- const tag = !props.href && !props.to ? props.tag : Link
-
- const componentData = {
- staticClass: 'badge',
- class: [
- !props.variant ? 'badge-secondary' : `badge-${props.variant}`,
- {
- 'badge-pill': Boolean(props.pill),
- active: props.active,
- disabled: props.disabled
- }
- ],
- props: pluckProps(linkProps, props)
- }
+ render(h, { props, data, children }) {
+ const { active, disabled } = props
+ const link = isLink(props)
+ const tag = link ? BLink : props.tag
+ const variant = props.variant || 'secondary'
- return h(tag, mergeData(data, componentData), children)
+ return h(
+ tag,
+ mergeData(data, {
+ staticClass: 'badge',
+ class: [
+ `badge-${variant}`,
+ {
+ 'badge-pill': props.pill,
+ active,
+ disabled
+ }
+ ],
+ props: link ? pluckProps(linkProps, props) : {}
+ }),
+ children
+ )
}
-}
+})
diff --git a/src/components/badge/badge.spec.js b/src/components/badge/badge.spec.js
old mode 100755
new mode 100644
index e55dfa11e4d..701422b5504
--- a/src/components/badge/badge.spec.js
+++ b/src/components/badge/badge.spec.js
@@ -1,35 +1,141 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import { mount } from '@vue/test-utils'
+import { BBadge } from './badge'
-const variantList = ['secondary', 'primary', 'success', 'info', 'warning', 'danger', 'dark', 'light'].map(variant => {
- return { ref: `badge_${variant}`, variant }
-})
+describe('badge', () => {
+ it('should have base classes', async () => {
+ const wrapper = mount(BBadge)
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
+ expect(wrapper.attributes('href')).toBeUndefined()
-describe('badge', async () => {
- beforeEach(loadFixture(__dirname, 'badge'))
- testVM()
+ wrapper.destroy()
+ })
- it('should apply variant classes', async () => {
- const { app: { $refs } } = window
+ it('should have default slot content', async () => {
+ const wrapper = mount(BBadge, {
+ slots: {
+ default: 'foobar'
+ }
+ })
- expect($refs.badge_pill).toHaveAllClasses(['badge', 'badge-pill'])
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.text()).toBe('foobar')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
+ expect(wrapper.attributes('href')).toBeUndefined()
- variantList.forEach(({ ref, variant }) => {
- const vm = $refs[ref][0]
- expect(vm).toHaveAllClasses(['badge', `badge-${variant}`])
+ wrapper.destroy()
+ })
+
+ it('should apply variant class', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ variant: 'danger'
+ }
})
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.classes()).toContain('badge-danger')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
+
+ wrapper.destroy()
})
- it('should apply secondary class when not passed variant', async () => {
- const { app: { $refs } } = window
+ it('should apply pill class', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ pill: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.classes()).toContain('badge-pill')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
- const vm = $refs.no_props
- expect(vm).toHaveClass('badge-secondary')
+ wrapper.destroy()
})
- it('should not apply pill class when not passed pill boolean prop', async () => {
- const { app: { $refs } } = window
+ it('should have active class when prop active set', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ active: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.classes()).toContain('active')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('disabled')
+
+ wrapper.destroy()
+ })
+
+ it('should have disabled class when prop disabled set', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ disabled: true
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SPAN')
+ expect(wrapper.classes()).toContain('disabled')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+
+ wrapper.destroy()
+ })
+
+ it('renders custom root element', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ tag: 'small'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('SMALL')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
+
+ wrapper.destroy()
+ })
+
+ it('renders link when href provided', async () => {
+ const wrapper = mount(BBadge, {
+ propsData: {
+ href: '/foo/bar'
+ }
+ })
+
+ expect(wrapper.element.tagName).toBe('A')
+ expect(wrapper.attributes('href')).toBeDefined()
+ expect(wrapper.attributes('href')).toBe('/foo/bar')
+ expect(wrapper.classes()).toContain('badge')
+ expect(wrapper.classes()).toContain('badge-secondary')
+ expect(wrapper.classes()).not.toContain('badge-pill')
+ expect(wrapper.classes()).not.toContain('active')
+ expect(wrapper.classes()).not.toContain('disabled')
- const vm = $refs.no_props
- expect(vm).not.toHaveClass('badge-pill')
+ wrapper.destroy()
})
})
diff --git a/src/components/badge/fixtures/badge.html b/src/components/badge/fixtures/badge.html
deleted file mode 100755
index a0790c54606..00000000000
--- a/src/components/badge/fixtures/badge.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
- Example heading
-
- Example heading
-
- Example heading
-
-
diff --git a/src/components/badge/fixtures/badge.js b/src/components/badge/fixtures/badge.js
deleted file mode 100755
index d1fd51aea4b..00000000000
--- a/src/components/badge/fixtures/badge.js
+++ /dev/null
@@ -1,17 +0,0 @@
-window.app = new Vue({
- el: '#app',
- data () {
- return {
- variants: [
- 'secondary',
- 'primary',
- 'success',
- 'info',
- 'warning',
- 'danger',
- 'dark',
- 'light'
- ]
- }
- }
-})
diff --git a/src/components/badge/index.d.ts b/src/components/badge/index.d.ts
new file mode 100644
index 00000000000..a27dd02a656
--- /dev/null
+++ b/src/components/badge/index.d.ts
@@ -0,0 +1,11 @@
+//
+// Badge
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const BadgePlugin: BvPlugin
+
+// Component: b-badge
+export declare class BBadge extends BvComponent {}
diff --git a/src/components/badge/index.js b/src/components/badge/index.js
index 5cef8e55109..439ebe161b3 100644
--- a/src/components/badge/index.js
+++ b/src/components/badge/index.js
@@ -1,18 +1,8 @@
-import bBadge from './badge'
-import { registerComponents, vueUse } from '../../utils'
+import { BBadge } from './badge'
+import { pluginFactory } from '../../utils/plugins'
-/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
+const BadgePlugin = /*#__PURE__*/ pluginFactory({
+ components: { BBadge }
+})
-const components = {
- bBadge
-}
-
-const VuePlugin = {
- install (Vue) {
- registerComponents(Vue, components)
- }
-}
-
-vueUse(VuePlugin)
-
-export default VuePlugin
+export { BadgePlugin, BBadge }
diff --git a/src/components/badge/package.json b/src/components/badge/package.json
old mode 100755
new mode 100644
index 8b46a90f72d..40a21b58f3a
--- a/src/components/badge/package.json
+++ b/src/components/badge/package.json
@@ -1,8 +1,29 @@
{
- "name": "@bootstrap-vue/badge",
- "version": "1.0.0",
- "meta": {
- "title": "Badge",
- "component": "bBadge"
- }
+ "name": "@bootstrap-vue/badge",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Badge",
+ "description": "Small and adaptive tag for adding context to just about any content.",
+ "components": [
+ {
+ "component": "BBadge",
+ "props": [
+ {
+ "prop": "pill",
+ "description": "When set to 'true', renders the badge in pill style"
+ },
+ {
+ "prop": "variant",
+ "description": "Applies one of the Bootstrap theme color variants to the component"
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content to place in the badge"
+ }
+ ]
+ }
+ ]
+ }
}
diff --git a/src/components/breadcrumb/README.md b/src/components/breadcrumb/README.md
old mode 100755
new mode 100644
index b957f409273..63330fb2b63
--- a/src/components/breadcrumb/README.md
+++ b/src/components/breadcrumb/README.md
@@ -1,54 +1,94 @@
# Breadcrumb
-> Indicate the current page’s location within a navigational hierarchy.
- Separators are automatically added in CSS through Example heading
- New
-
- Example heading
- New
-
- Example heading
- New
-
-
-
::before and content.
+> Indicate the current page's location within a navigational hierarchy. Separators are automatically
+> added in CSS through ::before and content.
+
+## Overview
```html
-
-
-
-
-
diff --git a/src/components/breadcrumb/fixtures/breadcrumb.js b/src/components/breadcrumb/fixtures/breadcrumb.js
deleted file mode 100755
index 0bf074dcf76..00000000000
--- a/src/components/breadcrumb/fixtures/breadcrumb.js
+++ /dev/null
@@ -1,41 +0,0 @@
-window.app = new Vue({
- el: '#app',
- data: {
- items: [
- {
- text: 'Home',
- href: 'https://bootstrap-vue.github.io'
- },
- {
- text: 'Admin',
- href: '#',
- active: false
- },
- {
- text: 'Manage',
- href: '#'
- },
- {
- text: 'Library'
- }
- ],
- items2: [
- {
- text: 'Home',
- href: 'https://bootstrap-vue.github.io'
- },
- {
- text: 'Admin',
- href: '#',
- active: true
- },
- {
- text: 'Manage',
- href: '#'
- },
- {
- text: 'Library'
- }
- ]
- }
-})
diff --git a/src/components/breadcrumb/index.d.ts b/src/components/breadcrumb/index.d.ts
new file mode 100644
index 00000000000..7030b86026c
--- /dev/null
+++ b/src/components/breadcrumb/index.d.ts
@@ -0,0 +1,17 @@
+//
+// Breadcrumb
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const BreadcrumbPlugin: BvPlugin
+
+// Component: b-breadcrumb
+export declare class BBreadcrumb extends BvComponent {}
+
+// Component: b-breadcrumb-item
+export declare class BBreadcrumbItem extends BvComponent {}
+
+// Component: b-breadcrumb-link
+export declare class BBreadcrumbLink extends BvComponent {}
diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
index dc448e388d1..8fe2b8ad04c 100644
--- a/src/components/breadcrumb/index.js
+++ b/src/components/breadcrumb/index.js
@@ -1,22 +1,10 @@
-import bBreadcrumb from './breadcrumb'
-import bBreadcrumbItem from './breadcrumb-item'
-import bBreadcrumbLink from './breadcrumb-link'
-import { registerComponents, vueUse } from '../../utils'
+import { BBreadcrumb } from './breadcrumb'
+import { BBreadcrumbItem } from './breadcrumb-item'
+import { BBreadcrumbLink } from './breadcrumb-link'
+import { pluginFactory } from '../../utils/plugins'
-/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
+const BreadcrumbPlugin = /*#__PURE__*/ pluginFactory({
+ components: { BBreadcrumb, BBreadcrumbItem, BBreadcrumbLink }
+})
-const components = {
- bBreadcrumb,
- bBreadcrumbItem,
- bBreadcrumbLink
-}
-
-const VuePlugin = {
- install (Vue) {
- registerComponents(Vue, components)
- }
-}
-
-vueUse(VuePlugin)
-
-export default VuePlugin
+export { BreadcrumbPlugin, BBreadcrumb, BBreadcrumbItem, BBreadcrumbLink }
diff --git a/src/components/breadcrumb/package.json b/src/components/breadcrumb/package.json
old mode 100755
new mode 100644
index c217da3fdd4..9959ab46267
--- a/src/components/breadcrumb/package.json
+++ b/src/components/breadcrumb/package.json
@@ -1,13 +1,62 @@
{
- "name": "@bootstrap-vue/breadcrumb",
- "version": "1.0.0",
- "meta": {
- "title": "Breadcrumb",
- "component": "bBreadcrumb",
- "components": [
- "bBreadcrumbItem",
- "bBreadcrumbLink"
+ "name": "@bootstrap-vue/breadcrumb",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Breadcrumb",
+ "description": "Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.",
+ "components": [
+ {
+ "component": "BBreadcrumb",
+ "props": [
+ {
+ "prop": "items",
+ "description": "Array of breadcrumb items to render"
+ }
],
- "events": []
- }
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content (breadcrumb items) to place in the breadcrumb"
+ }
+ ]
+ },
+ {
+ "component": "BBreadcrumbItem",
+ "props": [
+ {
+ "prop": "ariaCurrent",
+ "description": "Sets the value of the 'aria-current' attribute (when the item is the active item). Supported string values are 'location', 'page', or 'true'"
+ },
+ {
+ "prop": "html",
+ "description": "HTML string to render in the breadcrumb item",
+ "xss": true
+ },
+ {
+ "prop": "text",
+ "description": "Text to render in the breadcrumb item"
+ }
+ ],
+ "events": [
+ {
+ "event": "click",
+ "description": "Emitted when clicked",
+ "args": [
+ {
+ "arg": "event",
+ "type": "MouseEvent",
+ "description": "Native click event object"
+ }
+ ]
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "description": "Content to place in the breadcrumb item"
+ }
+ ]
+ }
+ ]
+ }
}
diff --git a/src/components/button-group/README.md b/src/components/button-group/README.md
old mode 100755
new mode 100644
index d4933ee762e..23159efd81c
--- a/src/components/button-group/README.md
+++ b/src/components/button-group/README.md
@@ -1,65 +1,70 @@
-# Button group
+# Button Group
-> Group a series of buttons together on a single line with `
-
- Button 1
- Button 2
- Button 3
- Button 4
- Button 5
-
-
-
- Success
- Info
- Warning
- Primary
- Danger
- Link
-
+
-
+
```
## Sizing
-Set the size prop to `lg` or `sm` to render larger or smaller, respectively, buttons.
-There is no need to specify the size on the individual buttons.
-**Example 2:** Default, Small, and Large button groups
+Set the `size` prop to `lg` or `sm` to render larger or smaller, respectively, buttons. There is no
+need to specify the size on the individual buttons.
+
```html
-
+
+ Button 1
+ Button 2
+ Button 3
+
+
+
+
+ Success
+ Info
+ Warning
+
+
-
- Button 1
- Button 2
- Button 3
-
-
-
- Left
- Middle
- Right
-
-
-
- Left
- Middle
- Right
-
+
-
+
```
## Vertical variation
-Make a set of buttons appear vertically stacked rather than horizontally by setting
-the `vertical` prop. Split button dropdowns are not supported here.
-**Example 3:** Vertical button group
+Make a set of buttons appear vertically stacked rather than horizontally by setting the `vertical`
+prop. Split button dropdowns are not supported here.
+
```html
-
-
+
+ Button 1
+ Button 2
+ Button 3
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+
+ Left
+ Middle
+ Right
+
+
-
diff --git a/src/components/button-group/fixtures/button-group.js b/src/components/button-group/fixtures/button-group.js
deleted file mode 100755
index 0bae7b95202..00000000000
--- a/src/components/button-group/fixtures/button-group.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
- el: '#app'
-})
diff --git a/src/components/button-group/index.d.ts b/src/components/button-group/index.d.ts
new file mode 100644
index 00000000000..ccc8de191f3
--- /dev/null
+++ b/src/components/button-group/index.d.ts
@@ -0,0 +1,11 @@
+//
+// Button Group
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const ButtonGroupPlugin: BvPlugin
+
+// Component: b-button-group
+export declare class BButtonGroup extends BvComponent {}
diff --git a/src/components/button-group/index.js b/src/components/button-group/index.js
index b6d4544fd2f..594345af08d 100644
--- a/src/components/button-group/index.js
+++ b/src/components/button-group/index.js
@@ -1,19 +1,11 @@
-import bButtonGroup from './button-group'
-import { registerComponents, vueUse } from '../../utils'
+import { BButtonGroup } from './button-group'
+import { pluginFactory } from '../../utils/plugins'
-/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
-
-const components = {
- bButtonGroup,
- bBtnGroup: bButtonGroup
-}
-
-const VuePlugin = {
- install (Vue) {
- registerComponents(Vue, components)
+const ButtonGroupPlugin = /*#__PURE__*/ pluginFactory({
+ components: {
+ BButtonGroup,
+ BBtnGroup: BButtonGroup
}
-}
-
-vueUse(VuePlugin)
+})
-export default VuePlugin
+export { ButtonGroupPlugin, BButtonGroup }
diff --git a/src/components/button-group/package.json b/src/components/button-group/package.json
old mode 100755
new mode 100644
index 0ba8066de8a..838a20e997d
--- a/src/components/button-group/package.json
+++ b/src/components/button-group/package.json
@@ -1,8 +1,29 @@
{
- "name": "@bootstrap-vue/button-group",
- "version": "1.0.0",
- "meta": {
- "title": "Button group",
- "component": "bButtonGroup"
- }
+ "name": "@bootstrap-vue/button-group",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Button Group",
+ "description": "Group a series of buttons together on a single line with
-
-
-
-
- Top
- Middle
- Bottom
-
-
-
-
-
- Left
- Middle
- Right
-
-
-
-
- Left
- Middle
- Right
-
-
-
-
+
- «
- ‹
+ «
+ ‹
- Edit
- Undo
- Redo
+ Edit
+ Undo
+ Redo
- ›
- »
+ ›
+ »
-
+
```
-**Example 2:** with mixture of small button groups and small input groups
+**Example 2:** with mixture of small button group and small input group
```html
-
-
- «
- ‹
-
-
- Edit
- Undo
- Redo
-
-
- ›
- »
-
-
-
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.js b/src/components/button-toolbar/fixtures/button-toolbar.js
deleted file mode 100644
index 0bae7b95202..00000000000
--- a/src/components/button-toolbar/fixtures/button-toolbar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
- el: '#app'
-})
diff --git a/src/components/button-toolbar/index.d.ts b/src/components/button-toolbar/index.d.ts
new file mode 100644
index 00000000000..c04eeb7edc4
--- /dev/null
+++ b/src/components/button-toolbar/index.d.ts
@@ -0,0 +1,11 @@
+//
+// Button Toolbar
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const ButtonToolbarPlugin: BvPlugin
+
+// Component: b-button-toolbar
+export declare class BButtonToolbar extends BvComponent {}
diff --git a/src/components/button-toolbar/index.js b/src/components/button-toolbar/index.js
index 3dd1e575f47..741fd1d064f 100644
--- a/src/components/button-toolbar/index.js
+++ b/src/components/button-toolbar/index.js
@@ -1,19 +1,11 @@
-import bButtonToolbar from './button-toolbar'
-import { registerComponents, vueUse } from '../../utils'
+import { BButtonToolbar } from './button-toolbar'
+import { pluginFactory } from '../../utils/plugins'
-/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
-
-const components = {
- bButtonToolbar,
- bBtnToolbar: bButtonToolbar
-}
-
-const VuePlugin = {
- install (Vue) {
- registerComponents(Vue, components)
+const ButtonToolbarPlugin = /*#__PURE__*/ pluginFactory({
+ components: {
+ BButtonToolbar,
+ BBtnToolbar: BButtonToolbar
}
-}
-
-vueUse(VuePlugin)
+})
-export default VuePlugin
+export { ButtonToolbarPlugin, BButtonToolbar }
diff --git a/src/components/button-toolbar/package.json b/src/components/button-toolbar/package.json
index 32621cc613a..765dad6c6d3 100644
--- a/src/components/button-toolbar/package.json
+++ b/src/components/button-toolbar/package.json
@@ -1,8 +1,32 @@
{
- "name": "@bootstrap-vue/button-toolbar",
- "version": "1.0.0",
- "meta": {
- "title": "Button toolbar",
- "component": "bButtonToolbar"
- }
+ "name": "@bootstrap-vue/button-toolbar",
+ "version": "1.0.0",
+ "meta": {
+ "title": "Button Toolbar",
+ "description": "Group a series of