diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue index 236b5d01121..7797609951f 100644 --- a/docs/components/componentdoc.vue +++ b/docs/components/componentdoc.vue @@ -207,8 +207,12 @@ export default { let options = {} if (!component.options && typeof component === 'function') { // Async component that hans't been resolved yet - component(opts => { - options = opts ? { ...opts } : {} + component(cmp => { + if (Object.prototype.toString.call(cmp) === '[object Object]') { + options = { ...cmp } + } else if (cmp && cmp.options) { + options = cmp.options + } }) } else { // Regular component diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js index 85afcd922bd..71589c7bde7 100644 --- a/scripts/rollup.config.js +++ b/scripts/rollup.config.js @@ -10,6 +10,8 @@ const base = path.resolve(__dirname, '..') const src = path.resolve(base, 'src') const dist = path.resolve(base, 'dist') +const externals = ['vue', ...Object.keys(dependencies)] + // Libs in `external` will not be bundled to dist, // since they are expected to be provided later. // We want to include some of them in the build, so we exclude it here. @@ -31,19 +33,22 @@ export default [ // UMD { ...baseConfig, - external: Object.keys(dependencies).filter(dep => !externalExcludes.includes(dep)), + external: externals.filter(dep => !externalExcludes.includes(dep)), output: { format: 'umd', name: camelCase(name), file: path.resolve(dist, `${name}.js`), - sourcemap: true + sourcemap: true, + globals: { + vue: 'Vue' + } } }, // COMMON { ...baseConfig, - external: Object.keys(dependencies).filter(dep => !externalExcludes.includes(dep)), + external: externals.filter(dep => !externalExcludes.includes(dep)), output: { format: 'cjs', name: camelCase(name), diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js index ebea30397ab..c760748ae6d 100644 --- a/src/components/alert/alert.js +++ b/src/components/alert/alert.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import BButtonClose from '../button/button-close' import { getComponentConfig } from '../../utils/config' import { requestAF } from '../../utils/dom' @@ -29,7 +30,7 @@ const parseShow = show => { const isNumericLike = value => !isNaN(parseInt(value, 10)) // @vue/component -export default { +export default Vue.extend({ name: NAME, model: { prop: 'show', @@ -38,7 +39,7 @@ export default { props: { variant: { type: String, - default: () => getComponentConfig(NAME, 'variant') + default: () => String(getComponentConfig(NAME, 'variant')) }, dismissible: { type: Boolean, @@ -46,7 +47,7 @@ export default { }, dismissLabel: { type: String, - default: () => getComponentConfig(NAME, 'dismissLabel') + default: () => String(getComponentConfig(NAME, 'dismissLabel')) }, show: { type: [Boolean, Number, String], @@ -185,4 +186,4 @@ export default { $alert ) } -} +}) diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index d677269c72c..0bceba33a6a 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' import pluckProps from '../../utils/pluck-props' @@ -17,7 +18,7 @@ export const props = { }, variant: { type: String, - default: () => getComponentConfig(NAME, 'variant') + default: () => String(getComponentConfig(NAME, 'variant')) }, pill: { type: Boolean, @@ -26,7 +27,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: NAME, functional: true, props, @@ -48,4 +49,4 @@ export default { return h(tag, mergeData(data, componentData), children) } -} +}) diff --git a/src/components/breadcrumb/breadcrumb-item.js b/src/components/breadcrumb/breadcrumb-item.js index 59c4abd4b88..7096cd8579e 100644 --- a/src/components/breadcrumb/breadcrumb-item.js +++ b/src/components/breadcrumb/breadcrumb-item.js @@ -1,8 +1,9 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import BBreadcrumbLink, { props } from './breadcrumb-link' // @vue/component -export default { +export default Vue.extend({ name: 'BBreadcrumbItem', functional: true, props, @@ -16,4 +17,4 @@ export default { [h(BBreadcrumbLink, { props }, children)] ) } -} +}) diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js index 111ba33b901..9c78975b08f 100644 --- a/src/components/breadcrumb/breadcrumb-link.js +++ b/src/components/breadcrumb/breadcrumb-link.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import pluckProps from '../../utils/pluck-props' import BLink, { propsFactory as linkPropsFactory } from '../link/link' @@ -20,7 +21,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BBreadcrumbLink', functional: true, props, @@ -38,4 +39,4 @@ export default { return h(tag, mergeData(data, componentData), children) } -} +}) diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js index 1be1d010f57..d11dc770382 100644 --- a/src/components/breadcrumb/breadcrumb.js +++ b/src/components/breadcrumb/breadcrumb.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { isArray } from '../../utils/array' import toString from '../../utils/to-string' @@ -11,7 +12,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BBreadcrumb', functional: true, props, @@ -40,4 +41,4 @@ export default { return h('ol', mergeData(data, { staticClass: 'breadcrumb' }), childNodes) } -} +}) diff --git a/src/components/button-group/button-group.js b/src/components/button-group/button-group.js index 183dbf81846..98c02ed5665 100644 --- a/src/components/button-group/button-group.js +++ b/src/components/button-group/button-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -20,7 +21,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BButtonGroup', functional: true, props, @@ -38,4 +39,4 @@ export default { children ) } -} +}) diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js index aa5f06276b1..dc7448c780a 100644 --- a/src/components/button-toolbar/button-toolbar.js +++ b/src/components/button-toolbar/button-toolbar.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { isVisible, selectAll } from '../../utils/dom' import KeyCodes from '../../utils/key-codes' @@ -10,7 +11,7 @@ const ITEM_SELECTOR = [ ].join(',') // @vue/component -export default { +export default Vue.extend({ name: 'BButtonToolbar', props: { justify: { @@ -111,4 +112,4 @@ export default { [this.$slots.default] ) } -} +}) diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js index 5794fda6f84..f3cc5d69ad6 100644 --- a/src/components/button/button-close.js +++ b/src/components/button/button-close.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' @@ -10,16 +11,16 @@ const props = { }, ariaLabel: { type: String, - default: () => getComponentConfig(NAME, 'ariaLabel') + default: () => String(getComponentConfig(NAME, 'ariaLabel')) }, textVariant: { type: String, - default: () => getComponentConfig(NAME, 'textVariant') + default: () => String(getComponentConfig(NAME, 'textVariant') || '') || null } } // @vue/component -export default { +export default Vue.extend({ name: NAME, functional: true, props, @@ -51,4 +52,4 @@ export default { } return h('button', mergeData(data, componentData), slots().default) } -} +}) diff --git a/src/components/button/button.js b/src/components/button/button.js index 248ebbd7da7..6fb7c484172 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' import pluckProps from '../../utils/pluck-props' @@ -23,7 +24,7 @@ const btnProps = { }, variant: { type: String, - default: () => getComponentConfig(NAME, 'variant') + default: () => String(getComponentConfig(NAME, 'variant')) }, type: { type: String, @@ -138,7 +139,7 @@ function computeAttrs(props, data) { } // @vue/component -export default { +export default Vue.extend({ name: NAME, functional: true, props, @@ -179,4 +180,4 @@ export default { return h(link ? BLink : props.tag, mergeData(data, componentData), children) } -} +}) diff --git a/src/components/card/card-body.js b/src/components/card/card-body.js index b4f12c5e720..c0cfb43457a 100644 --- a/src/components/card/card-body.js +++ b/src/components/card/card-body.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import prefixPropName from '../../utils/prefix-prop-name' import copyProps from '../../utils/copy-props' @@ -22,7 +23,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardBody', functional: true, props, @@ -59,4 +60,4 @@ export default { [cardTitle, cardSubTitle, ...cardContent] ) } -} +}) diff --git a/src/components/card/card-footer.js b/src/components/card/card-footer.js index 21e7f9eb080..e01209c583a 100644 --- a/src/components/card/card-footer.js +++ b/src/components/card/card-footer.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import prefixPropName from '../../utils/prefix-prop-name' @@ -22,7 +23,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardFooter', functional: true, props, @@ -43,4 +44,4 @@ export default { children || [h('div', { domProps: htmlOrText(props.footerHtml, props.footer) })] ) } -} +}) diff --git a/src/components/card/card-group.js b/src/components/card/card-group.js index 28102c53115..a353193775c 100644 --- a/src/components/card/card-group.js +++ b/src/components/card/card-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -16,7 +17,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardGroup', functional: true, props, @@ -30,4 +31,4 @@ export default { return h(props.tag, mergeData(data, { class: baseClass }), children) } -} +}) diff --git a/src/components/card/card-header.js b/src/components/card/card-header.js index 8eab701416a..35468a503fc 100644 --- a/src/components/card/card-header.js +++ b/src/components/card/card-header.js @@ -1,5 +1,5 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' - import prefixPropName from '../../utils/prefix-prop-name' import copyProps from '../../utils/copy-props' import { htmlOrText } from '../../utils/html' @@ -22,7 +22,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardHeader', functional: true, props, @@ -43,4 +43,4 @@ export default { children || [h('div', { domProps: htmlOrText(props.headerHtml, props.header) })] ) } -} +}) diff --git a/src/components/card/card-img-lazy.js b/src/components/card/card-img-lazy.js index 0d0f36ae8ce..3a33fa7d7d4 100644 --- a/src/components/card/card-img-lazy.js +++ b/src/components/card/card-img-lazy.js @@ -1,10 +1,11 @@ -import BImgLazy from '../image/img-lazy' +import Vue from 'vue' +import BImgLazy, { props as imgLazyProps } from '../image/img-lazy' import { omit } from '../../utils/object' import { mergeData } from 'vue-functional-data-merge' // Copy of `` props, and remove conflicting/non-applicable props // The `omit()` util creates a new object, so we can just pass the original props -const lazyProps = omit(BImgLazy.props, [ +const lazyProps = omit(imgLazyProps, [ 'left', 'right', 'center', @@ -46,7 +47,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardImgLazy', functional: true, props, @@ -72,4 +73,4 @@ export default { }) ) } -} +}) diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js index 7555714926a..233f44f31f7 100644 --- a/src/components/card/card-img.js +++ b/src/components/card/card-img.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -47,7 +48,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardImg', functional: true, props, @@ -76,4 +77,4 @@ export default { }) ) } -} +}) diff --git a/src/components/card/card-sub-title.js b/src/components/card/card-sub-title.js index 5bccc55d912..7b71840e242 100644 --- a/src/components/card/card-sub-title.js +++ b/src/components/card/card-sub-title.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' @@ -14,12 +15,12 @@ export const props = { }, subTitleTextVariant: { type: String, - default: () => getComponentConfig(NAME, 'subTitleTextVariant') + default: () => String(getComponentConfig(NAME, 'subTitleTextVariant') || '') || null } } // @vue/component -export default { +export default Vue.extend({ name: NAME, functional: true, props, @@ -33,4 +34,4 @@ export default { children || props.subTitle ) } -} +}) diff --git a/src/components/card/card-text.js b/src/components/card/card-text.js index 37ab5a34733..32242bb8637 100644 --- a/src/components/card/card-text.js +++ b/src/components/card/card-text.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -8,11 +9,11 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardText', functional: true, props, render(h, { props, data, children }) { return h(props.textTag, mergeData(data, { staticClass: 'card-text' }), children) } -} +}) diff --git a/src/components/card/card-title.js b/src/components/card/card-title.js index 3d336e87163..56f5421b13a 100644 --- a/src/components/card/card-title.js +++ b/src/components/card/card-title.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -12,7 +13,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCardTitle', functional: true, props, @@ -25,4 +26,4 @@ export default { children || props.title ) } -} +}) diff --git a/src/components/card/card.js b/src/components/card/card.js index eeb921d0743..80ce86e7f2a 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -1,5 +1,5 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' - import prefixPropName from '../../utils/prefix-prop-name' import unPrefixPropName from '../../utils/unprefix-prop-name' import copyProps from '../../utils/copy-props' @@ -30,7 +30,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BCard', functional: true, props, @@ -93,4 +93,4 @@ export default { [imgFirst, header, ...content, footer, imgLast] ) } -} +}) diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js index 6576d1ceb4c..49e5765fc39 100644 --- a/src/components/carousel/carousel-slide.js +++ b/src/components/carousel/carousel-slide.js @@ -1,12 +1,69 @@ +import Vue from 'vue' import BImg from '../image/img' import idMixin from '../../mixins/id' import { hasTouchSupport } from '../../utils/env' import { htmlOrText } from '../../utils/html' +export const props = { + imgSrc: { + type: String + // default: undefined + }, + imgAlt: { + type: String + // default: undefined + }, + imgWidth: { + type: [Number, String] + // default: undefined + }, + imgHeight: { + type: [Number, String] + // default: undefined + }, + imgBlank: { + type: Boolean, + default: false + }, + imgBlankColor: { + type: String, + default: 'transparent' + }, + contentVisibleUp: { + type: String + }, + contentTag: { + type: String, + default: 'div' + }, + caption: { + type: String + }, + captionHtml: { + type: String + }, + captionTag: { + type: String, + default: 'h3' + }, + text: { + type: String + }, + textHtml: { + type: String + }, + textTag: { + type: String, + default: 'p' + }, + background: { + type: String + } +} + // @vue/component -export default { +export default Vue.extend({ name: 'BCarouselSlide', - components: { BImg }, mixins: [idMixin], inject: { bvCarousel: { @@ -18,62 +75,7 @@ export default { } } }, - props: { - imgSrc: { - type: String - // default: undefined - }, - imgAlt: { - type: String - // default: undefined - }, - imgWidth: { - type: [Number, String] - // default: undefined - }, - imgHeight: { - type: [Number, String] - // default: undefined - }, - imgBlank: { - type: Boolean, - default: false - }, - imgBlankColor: { - type: String, - default: 'transparent' - }, - contentVisibleUp: { - type: String - }, - contentTag: { - type: String, - default: 'div' - }, - caption: { - type: String - }, - captionHtml: { - type: String - }, - captionTag: { - type: String, - default: 'h3' - }, - text: { - type: String - }, - textHtml: { - type: String - }, - textTag: { - type: String, - default: 'p' - }, - background: { - type: String - } - }, + props, data() { return {} }, @@ -99,7 +101,7 @@ export default { let img = $slots.img if (!img && (this.imgSrc || this.imgBlank)) { - img = h('b-img', { + img = h(BImg, { props: { fluidGrow: true, block: true, @@ -151,4 +153,4 @@ export default { [img, content] ) } -} +}) diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js index 66867ddb5c8..6485cdf26df 100644 --- a/src/components/carousel/carousel.js +++ b/src/components/carousel/carousel.js @@ -1,6 +1,8 @@ +import Vue from 'vue' import observeDom from '../../utils/observe-dom' import KeyCodes from '../../utils/key-codes' import noop from '../../utils/noop' +import { getComponentConfig } from '../../utils/config' import { selectAll, reflow, @@ -13,6 +15,8 @@ import { import { inBrowser, hasTouchSupport, hasPointerEvent } from '../../utils/env' import idMixin from '../../mixins/id' +const NAME = 'BCarousel' + // Slide directional classes const DIRECTION = { next: { @@ -63,7 +67,7 @@ function getTransitionEndEvent(el) { } // @vue/component -export default { +export default Vue.extend({ name: 'BCarousel', mixins: [idMixin], provide() { @@ -76,19 +80,19 @@ export default { props: { labelPrev: { type: String, - default: 'Previous Slide' + default: () => String(getComponentConfig(NAME, 'labelPrev')) }, labelNext: { type: String, - default: 'Next Slide' + default: () => String(getComponentConfig(NAME, 'labelNext')) }, labelGotoSlide: { type: String, - default: 'Goto Slide' + default: () => String(getComponentConfig(NAME, 'labelGotoSlide')) }, labelIndicators: { type: String, - default: 'Select a slide to display' + default: () => String(getComponentConfig(NAME, 'labelIndicators')) }, interval: { type: Number, @@ -602,4 +606,4 @@ export default { [inner, controls, indicators] ) } -} +}) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 556a51cd6ba..8b8b366bb16 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import listenOnRootMixin from '../../mixins/listen-on-root' import { inBrowser } from '../../utils/env' import { closest, matches, reflow, getCS, getBCR, eventOn, eventOff } from '../../utils/dom' @@ -16,7 +17,7 @@ const EVENT_TOGGLE = 'bv::toggle::collapse' const EventOptions = { passive: true, capture: false } // @vue/component -export default { +export default Vue.extend({ name: 'BCollapse', mixins: [listenOnRootMixin], model: { @@ -230,4 +231,4 @@ export default { [content] ) } -} +}) diff --git a/src/components/dropdown/dropdown-divider.js b/src/components/dropdown/dropdown-divider.js index 30361cbf001..c31f65a7943 100644 --- a/src/components/dropdown/dropdown-divider.js +++ b/src/components/dropdown/dropdown-divider.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -8,7 +9,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BDropdownDivider', functional: true, props, @@ -21,4 +22,4 @@ export default { }) ) } -} +}) diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js index a9b1dbf0fe5..8969bdd2def 100644 --- a/src/components/dropdown/dropdown-form.js +++ b/src/components/dropdown/dropdown-form.js @@ -1,11 +1,12 @@ +import Vue from 'vue' import BForm, { props as formProps } from '../form/form' import { mergeData } from 'vue-functional-data-merge' -export default { +export default Vue.extend({ name: 'BDropdownForm', functional: true, props: { ...formProps }, render(h, { props, data, children }) { return h(BForm, mergeData(data, { props, staticClass: 'b-dropdown-form' }), children) } -} +}) diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js index 2064d204738..1a222b51ea9 100644 --- a/src/components/dropdown/dropdown-header.js +++ b/src/components/dropdown/dropdown-header.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -12,7 +13,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BDropdownHeader', functional: true, props, @@ -26,4 +27,4 @@ export default { children ) } -} +}) diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js index 72d69f53407..b582c0916dd 100644 --- a/src/components/dropdown/dropdown-item-button.js +++ b/src/components/dropdown/dropdown-item-button.js @@ -1,3 +1,5 @@ +import Vue from 'vue' + export const props = { active: { type: Boolean, @@ -14,7 +16,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BDropdownItemButton', inject: { bvDropdown: { @@ -45,4 +47,4 @@ export default { this.$slots.default ) } -} +}) diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js index 1f3e09dc710..ce54cd19170 100644 --- a/src/components/dropdown/dropdown-item.js +++ b/src/components/dropdown/dropdown-item.js @@ -1,9 +1,10 @@ +import Vue from 'vue' import BLink, { propsFactory as linkPropsFactory } from '../link/link' export const props = linkPropsFactory() // @vue/component -export default { +export default Vue.extend({ name: 'BDropdownItem', inject: { bvDropdown: { @@ -34,4 +35,4 @@ export default { this.$slots.default ) } -} +}) diff --git a/src/components/dropdown/dropdown-text.js b/src/components/dropdown/dropdown-text.js index af14a225c65..b5e1a8620f7 100644 --- a/src/components/dropdown/dropdown-text.js +++ b/src/components/dropdown/dropdown-text.js @@ -1,6 +1,7 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' -export default { +export default Vue.extend({ name: 'BDropdownText', functional: true, props: { @@ -12,4 +13,4 @@ export default { render(h, { props, data, children }) { return h(props.tag, mergeData(data, { props, staticClass: 'b-dropdown-text' }), children) } -} +}) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 3871a911394..cb30bedf799 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { stripTags } from '../../utils/html' import { getComponentConfig } from '../../utils/config' import idMixin from '../../mixins/id' @@ -6,68 +7,69 @@ import BButton from '../button/button' const NAME = 'BDropdown' +export const props = { + toggleText: { + // This really should be toggleLabel + type: String, + default: () => String(getComponentConfig(NAME, 'toggleText')) + }, + size: { + type: String, + default: null + }, + variant: { + type: String, + default: () => String(getComponentConfig(NAME, 'variant') || '') || null + }, + menuClass: { + type: [String, Array], + default: null + }, + toggleTag: { + type: String, + default: 'button' + }, + toggleClass: { + type: [String, Array], + default: null + }, + noCaret: { + type: Boolean, + default: false + }, + split: { + type: Boolean, + default: false + }, + splitHref: { + type: String + // default: undefined + }, + splitTo: { + type: [String, Object] + // default: undefined + }, + splitVariant: { + type: String, + default: null + }, + role: { + type: String, + default: 'menu' + }, + boundary: { + // String: `scrollParent`, `window` or `viewport` + // Object: HTML Element reference + type: [String, Object], + default: 'scrollParent' + } +} + // @vue/component -export default { +export default Vue.extend({ name: NAME, - components: { BButton }, mixins: [idMixin, dropdownMixin], - props: { - toggleText: { - // This really should be toggleLabel - type: String, - default: () => getComponentConfig(NAME, 'toggleText') - }, - size: { - type: String, - default: null - }, - variant: { - type: String, - default: () => getComponentConfig(NAME, 'variant') - }, - menuClass: { - type: [String, Array], - default: null - }, - toggleTag: { - type: String, - default: 'button' - }, - toggleClass: { - type: [String, Array], - default: null - }, - noCaret: { - type: Boolean, - default: false - }, - split: { - type: Boolean, - default: false - }, - splitHref: { - type: String - // default: undefined - }, - splitTo: { - type: [String, Object] - // default: undefined - }, - splitVariant: { - type: String, - default: null - }, - role: { - type: String, - default: 'menu' - }, - boundary: { - // String: `scrollParent`, `window` or `viewport` - // Object: HTML Element reference - type: [String, Object], - default: 'scrollParent' - } - }, + props, computed: { dropdownClasses() { // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries @@ -132,7 +134,7 @@ export default { btnProps.href = this.splitHref } split = h( - 'b-button', + BButton, { ref: 'button', props: btnProps, @@ -147,7 +149,7 @@ export default { ) } const toggle = h( - 'b-button', + BButton, { ref: 'toggle', class: this.toggleClasses, @@ -196,4 +198,4 @@ export default { menu ]) } -} +}) diff --git a/src/components/embed/embed.js b/src/components/embed/embed.js index 0ff7cccf808..154c6be33fa 100644 --- a/src/components/embed/embed.js +++ b/src/components/embed/embed.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { arrayIncludes } from '../../utils/array' @@ -19,7 +20,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BEmbed', functional: true, props, @@ -36,4 +37,4 @@ export default { [h(props.type, mergeData(data, { ref: '', staticClass: 'embed-responsive-item' }), children)] ) } -} +}) diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js index 13b6038f6a0..45660353926 100644 --- a/src/components/form-checkbox/form-checkbox-group.js +++ b/src/components/form-checkbox/form-checkbox-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formOptionsMixin from '../../mixins/form-options' @@ -5,12 +6,21 @@ import formRadioCheckGroupMixin from '../../mixins/form-radio-check-group' import formSizeMixin from '../../mixins/form-size' import formStateMixin from '../../mixins/form-state' -import BFormCheckbox from './form-checkbox' +export const props = { + switches: { + // Custom switch styling + type: Boolean, + default: false + }, + checked: { + type: [String, Number, Object, Array, Boolean], + default: null + } +} // @vue/component -export default { +export default Vue.extend({ name: 'BFormCheckboxGroup', - components: { BFormCheckbox }, mixins: [ idMixin, formMixin, @@ -24,17 +34,7 @@ export default { bvCheckGroup: this } }, - props: { - switches: { - // Custom switch styling - type: Boolean, - default: false - }, - checked: { - type: [String, Number, Object, Array, Boolean], - default: null - } - }, + props, data() { return { localChecked: this.checked || [] @@ -45,4 +45,4 @@ export default { return false } } -} +}) diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js index 3b3c30002b4..01c4ac62fc1 100644 --- a/src/components/form-checkbox/form-checkbox.js +++ b/src/components/form-checkbox/form-checkbox.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formRadioCheckMixin from '../../mixins/form-radio-check' import formMixin from '../../mixins/form' @@ -8,7 +9,7 @@ import looseEqual from '../../utils/loose-equal' import looseIndexOf from '../../utils/loose-index-of' // @vue/component -export default { +export default Vue.extend({ name: 'BFormCheckbox', mixins: [ formRadioCheckMixin, // Includes shared render function @@ -121,4 +122,4 @@ export default { } } } -} +}) diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js index d14517858a9..b93f6473153 100644 --- a/src/components/form-file/form-file.js +++ b/src/components/form-file/form-file.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formStateMixin from '../../mixins/form-state' @@ -9,7 +10,7 @@ import { getComponentConfig } from '../../utils/config' const NAME = 'BFormFile' // @vue/component -export default { +export default Vue.extend({ name: NAME, mixins: [idMixin, formMixin, formStateMixin, formCustomMixin, normalizeSlotMixin], model: { @@ -32,15 +33,15 @@ export default { }, placeholder: { type: String, - default: () => getComponentConfig(NAME, 'placeholder') + default: () => String(getComponentConfig(NAME, 'placeholder') || '') }, browseText: { type: String, - default: () => getComponentConfig(NAME, 'browseText') + default: () => String(getComponentConfig(NAME, 'browseText') || '') }, dropPlaceholder: { type: String, - default: () => getComponentConfig(NAME, 'dropPlaceholder') + default: () => String(getComponentConfig(NAME, 'dropPlaceholder') || '') }, multiple: { type: Boolean, @@ -313,4 +314,4 @@ export default { [input, label] ) } -} +}) diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js index c09facb5635..92d9643982f 100644 --- a/src/components/form-group/form-group.js +++ b/src/components/form-group/form-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' // Mixins import idMixin from '../../mixins/id' import formStateMixin from '../../mixins/form-state' @@ -188,7 +189,7 @@ export default (resolve, reject) => { }, create(null)) // @vue/component - const BFormGroup = { + const BFormGroup = Vue.extend({ name: NAME, mixins: [idMixin, formStateMixin], props: { @@ -456,7 +457,7 @@ export default (resolve, reject) => { isHorizontal && isFieldset ? [h(BFormRow, {}, [label, content])] : [label, content] ) } - } + }) // Return the component options reference resolve(BFormGroup) diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js index 5c5d6d7793e..912cb17c74b 100644 --- a/src/components/form-input/form-input.js +++ b/src/components/form-input/form-input.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formSizeMixin from '../../mixins/form-size' @@ -28,7 +29,7 @@ const TYPES = [ ] // @vue/component -export default { +export default Vue.extend({ name: 'BFormInput', mixins: [ idMixin, @@ -162,4 +163,4 @@ export default { } }) } -} +}) diff --git a/src/components/form-radio/form-radio-group.js b/src/components/form-radio/form-radio-group.js index bb88949f017..e97c7933dad 100644 --- a/src/components/form-radio/form-radio-group.js +++ b/src/components/form-radio/form-radio-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formOptionsMixin from '../../mixins/form-options' @@ -5,12 +6,16 @@ import formRadioCheckGroupMixin from '../../mixins/form-radio-check-group' import formSizeMixin from '../../mixins/form-size' import formStateMixin from '../../mixins/form-state' -import BFormRadio from './form-radio' +export const props = { + checked: { + type: [String, Object, Number, Boolean], + default: null + } +} // @vue/component -export default { +export default Vue.extend({ name: 'BFormRadioGroup', - components: { BFormRadio }, mixins: [ idMixin, formMixin, @@ -24,12 +29,7 @@ export default { bvRadioGroup: this } }, - props: { - checked: { - type: [String, Object, Number, Boolean], - default: null - } - }, + props, data() { return { localChecked: this.checked @@ -40,4 +40,4 @@ export default { return true } } -} +}) diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js index 0fe8eba8ec0..c42dfc66581 100644 --- a/src/components/form-radio/form-radio.js +++ b/src/components/form-radio/form-radio.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formStateMixin from '../../mixins/form-state' @@ -6,7 +7,7 @@ import formRadioCheckMixin from '../../mixins/form-radio-check' import looseEqual from '../../utils/loose-equal' // @vue/component -export default { +export default Vue.extend({ name: 'BFormRadio', mixins: [ idMixin, @@ -59,4 +60,4 @@ export default { } } } -} +}) diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js index f775a7bf625..197bdfe11fa 100644 --- a/src/components/form-select/form-select.js +++ b/src/components/form-select/form-select.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formOptionsMixin from '../../mixins/form-options' import formMixin from '../../mixins/form' @@ -8,7 +9,7 @@ import { from as arrayFrom } from '../../utils/array' import { htmlOrText } from '../../utils/html' // @vue/component -export default { +export default Vue.extend({ name: 'BFormSelect', mixins: [idMixin, formMixin, formSizeMixin, formStateMixin, formCustomMixin, formOptionsMixin], model: { @@ -126,4 +127,4 @@ export default { [$slots.first, options, $slots.default] ) } -} +}) diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js index 6b43eafe1c8..2fc041bb0ad 100644 --- a/src/components/form-textarea/form-textarea.js +++ b/src/components/form-textarea/form-textarea.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formSizeMixin from '../../mixins/form-size' @@ -8,7 +9,7 @@ import formValidityMixin from '../../mixins/form-validity' import { getCS, isVisible } from '../../utils/dom' // @vue/component -export default { +export default Vue.extend({ name: 'BFormTextarea', mixins: [ idMixin, @@ -202,4 +203,4 @@ export default { } }) } -} +}) diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js index c8f4e871ff1..2ecf2de5a20 100644 --- a/src/components/form/form-datalist.js +++ b/src/components/form/form-datalist.js @@ -1,8 +1,9 @@ +import Vue from 'vue' import formOptionsMixin from '../../mixins/form-options' import { htmlOrText } from '../../utils/html' // @vue/component -export default { +export default Vue.extend({ name: 'BFormDatalist', mixins: [formOptionsMixin], props: { @@ -22,4 +23,4 @@ export default { }) return h('datalist', { attrs: { id: this.id } }, [options, this.$slots.default]) } -} +}) diff --git a/src/components/form/form-invalid-feedback.js b/src/components/form/form-invalid-feedback.js index 91c6a417586..ef1fd8a11ad 100644 --- a/src/components/form/form-invalid-feedback.js +++ b/src/components/form/form-invalid-feedback.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -24,7 +25,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BFormInvalidFeedback', functional: true, props, @@ -43,4 +44,4 @@ export default { children ) } -} +}) diff --git a/src/components/form/form-text.js b/src/components/form/form-text.js index b778c65a6bd..50142ebad1b 100644 --- a/src/components/form/form-text.js +++ b/src/components/form/form-text.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' @@ -14,7 +15,7 @@ export const props = { }, textVariant: { type: String, - default: () => getComponentConfig(NAME, 'textVariant') + default: () => String(getComponentConfig(NAME, 'textVariant') || '') }, inline: { type: Boolean, @@ -23,7 +24,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: NAME, functional: true, props, @@ -42,4 +43,4 @@ export default { children ) } -} +}) diff --git a/src/components/form/form-valid-feedback.js b/src/components/form/form-valid-feedback.js index 588371013ea..d715329ee84 100644 --- a/src/components/form/form-valid-feedback.js +++ b/src/components/form/form-valid-feedback.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -24,7 +25,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BFormValidFeedback', functional: true, props, @@ -43,4 +44,4 @@ export default { children ) } -} +}) diff --git a/src/components/form/form.js b/src/components/form/form.js index 53ccc1b96a9..fef6b66f3d6 100644 --- a/src/components/form/form.js +++ b/src/components/form/form.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -20,7 +21,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BForm', functional: true, props, @@ -40,4 +41,4 @@ export default { children ) } -} +}) diff --git a/src/components/image/img-lazy.js b/src/components/image/img-lazy.js index 8647905ea85..37971d2e099 100644 --- a/src/components/image/img-lazy.js +++ b/src/components/image/img-lazy.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import BImg from './img' import { getBCR, eventOn, eventOff } from '../../utils/dom' import { getComponentConfig } from '../../utils/config' @@ -7,90 +8,91 @@ const NAME = 'BImgLazy' const THROTTLE = 100 const EventOptions = { passive: true, capture: false } +export const props = { + src: { + type: String, + default: null, + required: true + }, + alt: { + type: String, + default: null + }, + width: { + type: [Number, String], + default: null + }, + height: { + type: [Number, String], + default: null + }, + blankSrc: { + // If null, a blank image is generated + type: String, + default: null + }, + blankColor: { + type: String, + default: () => String(getComponentConfig(NAME, 'blankColor')) + }, + blankWidth: { + type: [Number, String], + default: null + }, + blankHeight: { + type: [Number, String], + default: null + }, + show: { + type: Boolean, + default: false + }, + fluid: { + type: Boolean, + default: false + }, + fluidGrow: { + type: Boolean, + default: false + }, + block: { + type: Boolean, + default: false + }, + thumbnail: { + type: Boolean, + default: false + }, + rounded: { + type: [Boolean, String], + default: false + }, + left: { + type: Boolean, + default: false + }, + right: { + type: Boolean, + default: false + }, + center: { + type: Boolean, + default: false + }, + offset: { + type: [Number, String], + default: 360 + }, + throttle: { + type: [Number, String], + default: THROTTLE + } +} + // @vue/component -export default { +export default Vue.extend({ name: NAME, - components: { BImg }, - props: { - src: { - type: String, - default: null, - required: true - }, - alt: { - type: String, - default: null - }, - width: { - type: [Number, String], - default: null - }, - height: { - type: [Number, String], - default: null - }, - blankSrc: { - // If null, a blank image is generated - type: String, - default: null - }, - blankColor: { - type: String, - default: () => getComponentConfig(NAME, 'blankColor') - }, - blankWidth: { - type: [Number, String], - default: null - }, - blankHeight: { - type: [Number, String], - default: null - }, - show: { - type: Boolean, - default: false - }, - fluid: { - type: Boolean, - default: false - }, - fluidGrow: { - type: Boolean, - default: false - }, - block: { - type: Boolean, - default: false - }, - thumbnail: { - type: Boolean, - default: false - }, - rounded: { - type: [Boolean, String], - default: false - }, - left: { - type: Boolean, - default: false - }, - right: { - type: Boolean, - default: false - }, - center: { - type: Boolean, - default: false - }, - offset: { - type: [Number, String], - default: 360 - }, - throttle: { - type: [Number, String], - default: THROTTLE - } - }, + props, data() { return { isShown: false, @@ -205,7 +207,7 @@ export default { } }, render(h) { - return h('b-img', { + return h(BImg, { props: { src: this.computedSrc, alt: this.alt, @@ -224,4 +226,4 @@ export default { } }) } -} +}) diff --git a/src/components/image/img.js b/src/components/image/img.js index ef896969acd..b0cde056ba8 100644 --- a/src/components/image/img.js +++ b/src/components/image/img.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getComponentConfig } from '../../utils/config' @@ -85,12 +86,12 @@ export const props = { }, blankColor: { type: String, - default: () => getComponentConfig(NAME, 'blankColor') + default: () => String(getComponentConfig(NAME, 'blankColor')) } } // @vue/component -export default { +export default Vue.extend({ name: 'BImg', functional: true, props, @@ -142,4 +143,4 @@ export default { }) ) } -} +}) diff --git a/src/components/input-group/input-group-addon.js b/src/components/input-group/input-group-addon.js index c4f26c9e6f8..213a734407d 100644 --- a/src/components/input-group/input-group-addon.js +++ b/src/components/input-group/input-group-addon.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import InputGroupText from './input-group-text' @@ -17,7 +18,7 @@ export const commonProps = { } // @vue/component -export default { +export default Vue.extend({ name: 'BInputGroupAddon', functional: true, props: { @@ -42,4 +43,4 @@ export default { props.isText ? [h(InputGroupText, children)] : children ) } -} +}) diff --git a/src/components/input-group/input-group-append.js b/src/components/input-group/input-group-append.js index 800691bfb6e..47363016d26 100644 --- a/src/components/input-group/input-group-append.js +++ b/src/components/input-group/input-group-append.js @@ -1,8 +1,9 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import InputGroupAddon, { commonProps } from './input-group-addon' // @vue/component -export default { +export default Vue.extend({ name: 'BInputGroupAppend', functional: true, props: commonProps, @@ -16,4 +17,4 @@ export default { children ) } -} +}) diff --git a/src/components/input-group/input-group-prepend.js b/src/components/input-group/input-group-prepend.js index 20775cc6327..d8be21e4a01 100644 --- a/src/components/input-group/input-group-prepend.js +++ b/src/components/input-group/input-group-prepend.js @@ -1,8 +1,9 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import InputGroupAddon, { commonProps } from './input-group-addon' // @vue/component -export default { +export default Vue.extend({ name: 'BInputGroupPrepend', functional: true, props: commonProps, @@ -16,4 +17,4 @@ export default { children ) } -} +}) diff --git a/src/components/input-group/input-group-text.js b/src/components/input-group/input-group-text.js index 5b37a78029b..b8e42225195 100644 --- a/src/components/input-group/input-group-text.js +++ b/src/components/input-group/input-group-text.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -8,7 +9,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BInputGroupText', functional: true, props, @@ -21,4 +22,4 @@ export default { children ) } -} +}) diff --git a/src/components/input-group/input-group.js b/src/components/input-group/input-group.js index dfb8294a738..fa8ea09fdf0 100644 --- a/src/components/input-group/input-group.js +++ b/src/components/input-group/input-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import InputGroupPrepend from './input-group-prepend' import InputGroupAppend from './input-group-append' @@ -30,7 +31,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BInputGroup', functional: true, props: props, @@ -101,4 +102,4 @@ export default { childNodes ) } -} +}) diff --git a/src/components/jumbotron/jumbotron.js b/src/components/jumbotron/jumbotron.js index 0c9ac58b4e3..341e21def23 100644 --- a/src/components/jumbotron/jumbotron.js +++ b/src/components/jumbotron/jumbotron.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { stripTags } from '../../utils/html' import Container from '../layout/container' @@ -58,7 +59,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BJumbotron', functional: true, props, @@ -120,4 +121,4 @@ export default { childNodes ) } -} +}) diff --git a/src/components/layout/col.js b/src/components/layout/col.js index 4e4e403898c..e2c88ce80f3 100644 --- a/src/components/layout/col.js +++ b/src/components/layout/col.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import memoize from '../../utils/memoize' import suffixPropName from '../../utils/suffix-prop-name' @@ -91,7 +92,7 @@ export default (resolve, reject) => { * but always render when col=true. */ // @vue/component - const BCol = { + const BCol = Vue.extend({ name: 'BCol', functional: true, props: { @@ -149,7 +150,7 @@ export default (resolve, reject) => { return h(props.tag, mergeData(data, { class: classList }), children) } - } + }) // Return the config on demand resolve(BCol) diff --git a/src/components/layout/container.js b/src/components/layout/container.js index 0c977593515..ea85faa20c8 100644 --- a/src/components/layout/container.js +++ b/src/components/layout/container.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -12,7 +13,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BContainer', functional: true, props, @@ -28,4 +29,4 @@ export default { children ) } -} +}) diff --git a/src/components/layout/form-row.js b/src/components/layout/form-row.js index 781a6a81303..2848e3a3a67 100644 --- a/src/components/layout/form-row.js +++ b/src/components/layout/form-row.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -8,7 +9,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BFormRow', functional: true, props, @@ -21,4 +22,4 @@ export default { children ) } -} +}) diff --git a/src/components/layout/row.js b/src/components/layout/row.js index 1772831c4a8..2cd27625242 100644 --- a/src/components/layout/row.js +++ b/src/components/layout/row.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { arrayIncludes } from '../../utils/array' @@ -30,7 +31,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BRow', functional: true, props, @@ -49,4 +50,4 @@ export default { children ) } -} +}) diff --git a/src/components/link/link.js b/src/components/link/link.js index c07d5cce65e..614597c17ac 100644 --- a/src/components/link/link.js +++ b/src/components/link/link.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { keys } from '../../utils/object' import { arrayIncludes, concat } from '../../utils/array' import { isRouterLink, computeTag, computeRel, computeHref } from '../../utils/router' @@ -141,7 +142,7 @@ function clickHandlerFactory({ disabled, tag, href, suppliedHandler, parent }) { } // @vue/component -export default { +export default Vue.extend({ name: 'BLink', functional: true, props: propsFactory(), @@ -178,4 +179,4 @@ export default { return h(tag, componentData, children) } -} +}) diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index 2554be0a825..2e13b571ddf 100644 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import pluckProps from '../../utils/pluck-props' import { arrayIncludes } from '../../utils/array' @@ -28,7 +29,7 @@ export const props = { ...linkProps } // @vue/component -export default { +export default Vue.extend({ name: 'BListGroupItem', functional: true, props, @@ -65,4 +66,4 @@ export default { return h(tag, mergeData(data, componentData), children) } -} +}) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 9f24cc5634b..9d2c6e950a0 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -16,7 +17,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BListGroup', functional: true, props, @@ -33,4 +34,4 @@ export default { } return h(props.tag, mergeData(data, componentData), children) } -} +}) diff --git a/src/components/media/media-aside.js b/src/components/media/media-aside.js index 091e8ac8c2a..89d72f64eac 100644 --- a/src/components/media/media-aside.js +++ b/src/components/media/media-aside.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -12,7 +13,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BMediaAside', functional: true, props, @@ -28,4 +29,4 @@ export default { children ) } -} +}) diff --git a/src/components/media/media-body.js b/src/components/media/media-body.js index b3334bb99b5..fe653dfe2b7 100644 --- a/src/components/media/media-body.js +++ b/src/components/media/media-body.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -7,7 +8,7 @@ export const props = { } } -export default { +export default Vue.extend({ name: 'BMediaBody', functional: true, props, @@ -20,4 +21,4 @@ export default { children ) } -} +}) diff --git a/src/components/media/media.js b/src/components/media/media.js index f07b0cbdf6c..be6078bcb51 100644 --- a/src/components/media/media.js +++ b/src/components/media/media.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import BMediaBody from './media-body' import BMediaAside from './media-aside' @@ -22,7 +23,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BMedia', functional: true, props, @@ -56,4 +57,4 @@ export default { return h(props.tag, mergeData(data, { staticClass: 'media' }), childNodes) } -} +}) diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js index a8d740526fa..b0492a5b175 100644 --- a/src/components/modal/modal.js +++ b/src/components/modal/modal.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import BButton from '../button/button' import BButtonClose from '../button/button-close' import idMixin from '../../mixins/id' @@ -82,194 +83,195 @@ function getModalNextZIndex() { return getModalMaxZIndex() + ZINDEX_OFFSET } +export const props = { + title: { + type: String, + default: '' + }, + titleHtml: { + type: String + }, + titleTag: { + type: String, + default: 'h5' + }, + size: { + type: String, + default: 'md' + }, + centered: { + type: Boolean, + default: false + }, + scrollable: { + type: Boolean, + default: false + }, + buttonSize: { + type: String, + default: '' + }, + noStacking: { + type: Boolean, + default: false + }, + noFade: { + type: Boolean, + default: false + }, + noCloseOnBackdrop: { + type: Boolean, + default: false + }, + noCloseOnEsc: { + type: Boolean, + default: false + }, + noEnforceFocus: { + type: Boolean, + default: false + }, + headerBgVariant: { + type: String, + default: null + }, + headerBorderVariant: { + type: String, + default: null + }, + headerTextVariant: { + type: String, + default: null + }, + headerCloseVariant: { + type: String, + default: null + }, + headerClass: { + type: [String, Array], + default: null + }, + bodyBgVariant: { + type: String, + default: null + }, + bodyTextVariant: { + type: String, + default: null + }, + modalClass: { + type: [String, Array], + default: null + }, + dialogClass: { + type: [String, Array], + default: null + }, + contentClass: { + type: [String, Array], + default: null + }, + bodyClass: { + type: [String, Array], + default: null + }, + footerBgVariant: { + type: String, + default: null + }, + footerBorderVariant: { + type: String, + default: null + }, + footerTextVariant: { + type: String, + default: null + }, + footerClass: { + type: [String, Array], + default: null + }, + hideHeader: { + type: Boolean, + default: false + }, + hideFooter: { + type: Boolean, + default: false + }, + hideHeaderClose: { + type: Boolean, + default: false + }, + hideBackdrop: { + type: Boolean, + default: false + }, + okOnly: { + type: Boolean, + default: false + }, + okDisabled: { + type: Boolean, + default: false + }, + cancelDisabled: { + type: Boolean, + default: false + }, + visible: { + type: Boolean, + default: false + }, + returnFocus: { + // type: Object, + default: null + }, + headerCloseLabel: { + type: String, + default: () => String(getComponentConfig(NAME, 'headerCloseLabel') || '') + }, + cancelTitle: { + type: String, + default: () => String(getComponentConfig(NAME, 'cancelTitle') || '') + }, + cancelTitleHtml: { + type: String + }, + okTitle: { + type: String, + default: () => String(getComponentConfig(NAME, 'okTitle') || '') + }, + okTitleHtml: { + type: String + }, + cancelVariant: { + type: String, + default: () => String(getComponentConfig(NAME, 'cancelVariant') || '') + }, + okVariant: { + type: String, + default: () => String(getComponentConfig(NAME, 'okVariant') || '') + }, + lazy: { + type: Boolean, + default: false + }, + busy: { + type: Boolean, + default: false + } +} + // @vue/component -export default { +export default Vue.extend({ name: NAME, - components: { BButton, BButtonClose }, mixins: [idMixin, listenOnRootMixin], model: { prop: 'visible', event: 'change' }, - props: { - title: { - type: String, - default: '' - }, - titleHtml: { - type: String - }, - titleTag: { - type: String, - default: 'h5' - }, - size: { - type: String, - default: 'md' - }, - centered: { - type: Boolean, - default: false - }, - scrollable: { - type: Boolean, - default: false - }, - buttonSize: { - type: String, - default: '' - }, - noStacking: { - type: Boolean, - default: false - }, - noFade: { - type: Boolean, - default: false - }, - noCloseOnBackdrop: { - type: Boolean, - default: false - }, - noCloseOnEsc: { - type: Boolean, - default: false - }, - noEnforceFocus: { - type: Boolean, - default: false - }, - headerBgVariant: { - type: String, - default: null - }, - headerBorderVariant: { - type: String, - default: null - }, - headerTextVariant: { - type: String, - default: null - }, - headerCloseVariant: { - type: String, - default: null - }, - headerClass: { - type: [String, Array], - default: null - }, - bodyBgVariant: { - type: String, - default: null - }, - bodyTextVariant: { - type: String, - default: null - }, - modalClass: { - type: [String, Array], - default: null - }, - dialogClass: { - type: [String, Array], - default: null - }, - contentClass: { - type: [String, Array], - default: null - }, - bodyClass: { - type: [String, Array], - default: null - }, - footerBgVariant: { - type: String, - default: null - }, - footerBorderVariant: { - type: String, - default: null - }, - footerTextVariant: { - type: String, - default: null - }, - footerClass: { - type: [String, Array], - default: null - }, - hideHeader: { - type: Boolean, - default: false - }, - hideFooter: { - type: Boolean, - default: false - }, - hideHeaderClose: { - type: Boolean, - default: false - }, - hideBackdrop: { - type: Boolean, - default: false - }, - okOnly: { - type: Boolean, - default: false - }, - okDisabled: { - type: Boolean, - default: false - }, - cancelDisabled: { - type: Boolean, - default: false - }, - visible: { - type: Boolean, - default: false - }, - returnFocus: { - // type: Object, - default: null - }, - headerCloseLabel: { - type: String, - default: () => getComponentConfig(NAME, 'headerCloseLabel') - }, - cancelTitle: { - type: String, - default: () => getComponentConfig(NAME, 'cancelTitle') - }, - cancelTitleHtml: { - type: String - }, - okTitle: { - type: String, - default: () => getComponentConfig(NAME, 'okTitle') - }, - okTitleHtml: { - type: String - }, - cancelVariant: { - type: String, - default: () => getComponentConfig(NAME, 'cancelVariant') - }, - okVariant: { - type: String, - default: () => getComponentConfig(NAME, 'okVariant') - }, - lazy: { - type: Boolean, - default: false - }, - busy: { - type: Boolean, - default: false - } - }, + props, data() { return { is_hidden: this.lazy || false, // for lazy modals @@ -819,7 +821,7 @@ export default { let closeButton = h(false) if (!this.hideHeaderClose) { closeButton = h( - 'b-button-close', + BButtonClose, { props: { disabled: this.is_transitioning, @@ -872,7 +874,7 @@ export default { let cancelButton = h(false) if (!this.okOnly) { cancelButton = h( - 'b-button', + BButton, { props: { variant: this.cancelVariant, @@ -889,7 +891,7 @@ export default { ) } const okButton = h( - 'b-button', + BButton, { props: { variant: this.okVariant, @@ -1024,4 +1026,4 @@ export default { // Wrap in DIV to maintain thi.$el reference for hide/show method aceess return h('div', {}, [outer]) } -} +}) diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js index 8e04e8f9c61..1df245d8e1e 100644 --- a/src/components/nav/nav-form.js +++ b/src/components/nav/nav-form.js @@ -1,17 +1,21 @@ -import BForm from '../form/form' +import Vue from 'vue' +import BForm, { props as BFormProps } from '../form/form' import { mergeData } from 'vue-functional-data-merge' +import copyProps from '../../utils/copy-props' + +const formProps = copyProps(BFormProps) +delete formProps.inline + +export const props = { + ...formProps +} // @vue/component -export default { +export default Vue.extend({ name: 'BNavForm', functional: true, - props: { - id: { - type: String, - default: null - } - }, + props, render(h, { props, data, children }) { - return h(BForm, mergeData(data, { attrs: { id: props.id }, props: { inline: true } }), children) + return h(BForm, mergeData(data, { props: { ...props, inline: true } }), children) } -} +}) diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js index 7fbdbf0ded0..bb0300f2e8b 100644 --- a/src/components/nav/nav-item-dropdown.js +++ b/src/components/nav/nav-item-dropdown.js @@ -1,9 +1,10 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import dropdownMixin from '../../mixins/dropdown' import { htmlOrText } from '../../utils/html' // @vue/component -export default { +export default Vue.extend({ name: 'BNavItemDropdown', mixins: [idMixin, dropdownMixin], props: { @@ -99,4 +100,4 @@ export default { ) return h('li', { attrs: { id: this.safeId() }, class: this.dropdownClasses }, [button, menu]) } -} +}) diff --git a/src/components/nav/nav-item.js b/src/components/nav/nav-item.js index 28949cec660..7f6a5c3734a 100644 --- a/src/components/nav/nav-item.js +++ b/src/components/nav/nav-item.js @@ -1,10 +1,11 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import BLink, { propsFactory as linkPropsFactory } from '../link/link' export const props = linkPropsFactory() // @vue/component -export default { +export default Vue.extend({ name: 'BNavItem', functional: true, props: { @@ -43,4 +44,4 @@ export default { ] ) } -} +}) diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js index de3cf0bd922..b39005b01b7 100644 --- a/src/components/nav/nav-text.js +++ b/src/components/nav/nav-text.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -8,11 +9,11 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BNavText', functional: true, props, render(h, { props, data, children }) { return h(props.tag, mergeData(data, { staticClass: 'navbar-text' }), children) } -} +}) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 05e3bf5e72b..e79859b2126 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import warn from '../../utils/warn' @@ -33,7 +34,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BNav', functional: true, props, @@ -58,4 +59,4 @@ export default { children ) } -} +}) diff --git a/src/components/navbar/navbar-brand.js b/src/components/navbar/navbar-brand.js index 5a53f18de45..286fe138146 100644 --- a/src/components/navbar/navbar-brand.js +++ b/src/components/navbar/navbar-brand.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import BLink, { propsFactory } from '../link/link' import { mergeData } from 'vue-functional-data-merge' import pluckProps from '../../utils/pluck-props' @@ -15,7 +16,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BNavbarBrand', functional: true, props, @@ -32,4 +33,4 @@ export default { children ) } -} +}) diff --git a/src/components/navbar/navbar-nav.js b/src/components/navbar/navbar-nav.js index 30344317865..a0777eabae2 100644 --- a/src/components/navbar/navbar-nav.js +++ b/src/components/navbar/navbar-nav.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' export const props = { @@ -16,7 +17,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BNavbarNav', functional: true, props, @@ -33,4 +34,4 @@ export default { children ) } -} +}) diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index f8e121ad1ac..e15847100d8 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import listenOnRootMixin from '../../mixins/listen-on-root' import { getComponentConfig } from '../../utils/config' @@ -12,7 +13,7 @@ const EVENT_STATE = 'bv::collapse::state' const EVENT_STATE_SYNC = 'bv::collapse::sync::state' // @vue/component -export default { +export default Vue.extend({ name: NAME, mixins: [listenOnRootMixin], props: { @@ -63,4 +64,4 @@ export default { [this.$slots.default || h('span', { class: ['navbar-toggler-icon'] })] ) } -} +}) diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js index 912a29b6f0c..fa467bef210 100644 --- a/src/components/navbar/navbar.js +++ b/src/components/navbar/navbar.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' import { getBreakpoints } from '../../utils/config' @@ -31,7 +32,7 @@ export const props = { } // @vue/component -export default { +export default Vue.extend({ name: 'BNavbar', functional: true, props, @@ -62,4 +63,4 @@ export default { children ) } -} +}) diff --git a/src/components/pagination-nav/pagination-nav.js b/src/components/pagination-nav/pagination-nav.js index a948abecee9..ca0238eea33 100644 --- a/src/components/pagination-nav/pagination-nav.js +++ b/src/components/pagination-nav/pagination-nav.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import warn from '../../utils/warn' import looseEqual from '../../utils/loose-equal' import toString from '../../utils/to-string' @@ -78,7 +79,7 @@ const props = { // Our render function is brought in via the pagination mixin // @vue/component -export default { +export default Vue.extend({ name: 'BPaginationNav', mixins: [paginationMixin], props, @@ -291,4 +292,4 @@ export default { this.currentPage = guess > 0 ? guess : 0 } } -} +}) diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js index 62c4f00e746..a9e67de2e3e 100644 --- a/src/components/pagination/pagination.js +++ b/src/components/pagination/pagination.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import paginationMixin from '../../mixins/pagination' import { isVisible } from '../../utils/dom' @@ -31,7 +32,7 @@ const props = { // Our render function is brought in from the pagination mixin // @vue/component -export default { +export default Vue.extend({ name: 'BPagination', mixins: [paginationMixin], props, @@ -104,4 +105,4 @@ export default { return { href: '#' } } } -} +}) diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 6bcac4a2845..16861ea0f1c 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -1,29 +1,32 @@ +import Vue from 'vue' import PopOver from '../../utils/popover.class' import warn from '../../utils/warn' import toolpopMixin from '../../mixins/toolpop' +export const props = { + title: { + type: String, + default: '' + }, + content: { + type: String, + default: '' + }, + triggers: { + type: [String, Array], + default: 'click' + }, + placement: { + type: String, + default: 'right' + } +} + // @vue/component -export default { +export default Vue.extend({ name: 'BPopover', mixins: [toolpopMixin], - props: { - title: { - type: String, - default: '' - }, - content: { - type: String, - default: '' - }, - triggers: { - type: [String, Array], - default: 'click' - }, - placement: { - type: String, - default: 'right' - } - }, + props, data() { return {} }, @@ -55,4 +58,4 @@ export default { ] ) } -} +}) diff --git a/src/components/progress/progress-bar.js b/src/components/progress/progress-bar.js index a4ef6fccb63..f986d836972 100644 --- a/src/components/progress/progress-bar.js +++ b/src/components/progress/progress-bar.js @@ -1,7 +1,8 @@ +import Vue from 'vue' import { htmlOrText } from '../../utils/html' // @vue/component -export default { +export default Vue.extend({ name: 'BProgressBar', inject: { bvProgress: { @@ -130,4 +131,4 @@ export default { [childNodes] ) } -} +}) diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js index 57dfeaa15ef..06dcd279acb 100644 --- a/src/components/progress/progress.js +++ b/src/components/progress/progress.js @@ -1,9 +1,9 @@ +import Vue from 'vue' import BProgressBar from './progress-bar' // @vue/component -export default { +export default Vue.extend({ name: 'BProgress', - components: { BProgressBar }, provide() { return { bvProgress: this } }, @@ -55,7 +55,7 @@ export default { render(h) { let childNodes = this.$slots.default if (!childNodes) { - childNodes = h('b-progress-bar', { + childNodes = h(BProgressBar, { props: { value: this.value, max: this.max, @@ -70,4 +70,4 @@ export default { } return h('div', { class: ['progress'], style: this.progressHeight }, [childNodes]) } -} +}) diff --git a/src/components/spinner/spinner.js b/src/components/spinner/spinner.js index 14a58ed0372..a9d1b90e5e5 100644 --- a/src/components/spinner/spinner.js +++ b/src/components/spinner/spinner.js @@ -1,7 +1,8 @@ +import Vue from 'vue' import { mergeData } from 'vue-functional-data-merge' // @vue/component -export default { +export default Vue.extend({ name: 'BSpinner', functional: true, props: { @@ -52,4 +53,4 @@ export default { [label] ) } -} +}) diff --git a/src/components/table/table.js b/src/components/table/table.js index e4918054d48..e9051039070 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -1,3 +1,5 @@ +import Vue from 'vue' + // Utilities import looseEqual from '../../utils/loose-equal' @@ -21,7 +23,7 @@ import providerMixin from './helpers/mixin-provider' // b-table component definition // @vue/component -export default { +export default Vue.extend({ name: 'BTable', // Order of mixins is important. // They are merged from left to fight, followed by this component. @@ -216,4 +218,4 @@ export default { ? h('div', { key: 'b-table-responsive', class: this.responsiveClass }, [$table]) : $table } -} +}) diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js index 24fa89d81f8..4b5494d074a 100644 --- a/src/components/tabs/tab.js +++ b/src/components/tabs/tab.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import idMixin from '../../mixins/id' import warn from '../../utils/warn' import { requestAF } from '../../utils/dom' @@ -5,7 +6,7 @@ import { requestAF } from '../../utils/dom' const DEPRECATED_MSG = 'Setting prop "href" is deprecated. Use the component instead' // @vue/component -export default { +export default Vue.extend({ name: 'BTab', mixins: [idMixin], inject: { @@ -227,4 +228,4 @@ export default { [content] ) } -} +}) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 0cfca0c5075..89dc0f4ec1f 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,3 +1,4 @@ +import Vue from 'vue' import BLink from '../link/link' import KeyCodes from '../../utils/key-codes' import observeDom from '../../utils/observe-dom' @@ -5,7 +6,7 @@ import idMixin from '../../mixins/id' // Private Helper component // @vue/component -const BTabButtonHelper = { +const BTabButtonHelper = Vue.extend({ name: 'BTabButtonHelper', inject: { bvTabs: { @@ -119,7 +120,7 @@ const BTabButtonHelper = { [link] ) } -} +}) // Filter function to filter out disabled tabs function notDisabled(tab) { @@ -127,7 +128,7 @@ function notDisabled(tab) { } // @vue/component -export default { +export default Vue.extend({ name: 'BTabs', mixins: [idMixin], provide() { @@ -603,4 +604,4 @@ export default { ] ) } -} +}) diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js index d62f0a76a5c..08d908f73f1 100644 --- a/src/components/tooltip/tooltip.js +++ b/src/components/tooltip/tooltip.js @@ -1,9 +1,10 @@ +import Vue from 'vue' import ToolTip from '../../utils/tooltip.class' import warn from '../../utils/warn' import toolpopMixin from '../../mixins/toolpop' // @vue/component -export default { +export default Vue.extend({ name: 'BTooltip', mixins: [toolpopMixin], props: { @@ -44,4 +45,4 @@ export default { [h('div', { ref: 'title' }, this.$slots.default)] ) } -} +}) diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js index 1d91ab16cdf..cf8eb2f2d09 100644 --- a/src/mixins/form-radio-check-group.js +++ b/src/mixins/form-radio-check-group.js @@ -1,4 +1,6 @@ import { htmlOrText } from '../utils/html' +import BFormCheckbox from '../components/form-checkbox/form-checkbox' +import BFormRadio from '../components/form-radio/form-radio' // @vue/component export default { @@ -76,7 +78,7 @@ export default { const inputs = this.formOptions.map((option, idx) => { const uid = `_BV_option_${idx}_` return h( - this.is_RadioGroup ? 'b-form-radio' : 'b-form-checkbox', + this.is_RadioGroup ? BFormRadio : BFormCheckbox, { key: uid, props: { diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js index 822664fb47c..dbabe9022a5 100644 --- a/src/mixins/pagination.js +++ b/src/mixins/pagination.js @@ -143,7 +143,6 @@ const props = { // @vue/component export default { - components: { BLink }, mixins: [normalizeSlotMixin], model: { prop: 'value', @@ -373,7 +372,7 @@ export default { const scope = { disabled: isDisabled, page: pageNum, index: pageNum - 1 } const btnContent = this.normalizeSlot(btnSlot, scope) || toString(btnText) || h(false) const inner = h( - isDisabled ? 'span' : 'b-link', + isDisabled ? 'span' : BLink, { staticClass: 'page-link', props: isDisabled ? {} : this.linkProps(linkTo), @@ -478,7 +477,7 @@ export default { disabled } const inner = h( - disabled ? 'span' : 'b-link', + disabled ? 'span' : BLink, { props: disabled ? {} : this.linkProps(page.number), staticClass: 'page-link', diff --git a/src/utils/config.js b/src/utils/config.js index ea8bf2fa164..8e32a45d3de 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -56,6 +56,12 @@ const DEFAULTS = { // BCard and BCardBody also inherit this prop subTitleTextVariant: 'muted' }, + BCarousel: { + labelPrev: 'Previous Slide', + labelNext: 'Next Slide', + labelGotoSlide: 'Goto Slide', + labelIndicators: 'Select a slide to display' + }, BDropdown: { toggleText: 'Toggle Dropdown', variant: 'secondary'