diff --git a/docs/components/importdoc.vue b/docs/components/importdoc.vue index ec4484af551..a635fa55daf 100644 --- a/docs/components/importdoc.vue +++ b/docs/components/importdoc.vue @@ -144,7 +144,7 @@ export default { const firstDirective = this.directives[0] const firstDirectiveImport = this.directiveImports[0] return [ - "// Note: Vue automatically prefixes the directive name with 'v-'", + "// Note: Vue automatically prefixes the directive name with 'v-'", `import ${firstDirective} from '${firstDirectiveImport.importPath}'`, `Vue.directive('${this.directiveName(firstDirective)}', ${firstDirective})` ].join('\n') @@ -183,7 +183,7 @@ export default { return kebabCase(directive).replace(/^v-/, '') }, directiveAttr(directive) { - return this.directiveName(directive) + return kebabCase(directive) }, directivePath(directive) { const directiveName = this.directiveName(directive).replace(/^b-/, '') diff --git a/src/components/collapse/index.js b/src/components/collapse/index.js index e8df927da37..01e606f0f06 100644 --- a/src/components/collapse/index.js +++ b/src/components/collapse/index.js @@ -1,15 +1,15 @@ import BCollapse from './collapse' -import BToggleDirectivePlugin from '../../directives/toggle' +import BToggleDirective from '../../directives/toggle/toggle' import { installFactory } from '../../utils/plugins' const components = { BCollapse } -const plugins = { - BToggleDirectivePlugin +const directives = { + BToggle: BToggleDirective } export default { - install: installFactory({ components, plugins }) + install: installFactory({ components, directives }) } diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json index a7b236b7a91..6df247a9f5f 100644 --- a/src/components/collapse/package.json +++ b/src/components/collapse/package.json @@ -4,12 +4,12 @@ "meta": { "title": "Collapse", "description": "Easily toggle content visibility on your pages. Includes support for making accordions.", + "directives": [ + "vBToggle" + ], "components": [ { "component": "BCollapse", - "directives": [ - "vBToggle" - ], "events": [ { "event": "show", diff --git a/src/components/modal/index.js b/src/components/modal/index.js index 5a20ae39feb..bd612c36e0d 100644 --- a/src/components/modal/index.js +++ b/src/components/modal/index.js @@ -1,15 +1,15 @@ import BModal from './modal' -import BModalDirectivePlugin from '../../directives/modal' +import BModalDirective from '../../directives/modal/modal' import { installFactory } from '../../utils/plugins' const components = { BModal } -const plugins = { - BModalDirectivePlugin +const directives = { + BModal: BModalDirective } export default { - install: installFactory({ components, plugins }) + install: installFactory({ components, directives }) } diff --git a/src/components/modal/package.json b/src/components/modal/package.json index 92cb7d9d1e6..204bbf2a88e 100644 --- a/src/components/modal/package.json +++ b/src/components/modal/package.json @@ -4,12 +4,12 @@ "meta": { "title": "Modal", "description": "Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.", + "directives": [ + "vBModal" + ], "components": [ { "component": "BModal", - "directives": [ - "vBModal" - ], "events": [ { "event": "change", diff --git a/src/components/nav/package.json b/src/components/nav/package.json index 5095a4edaeb..8701e03b218 100644 --- a/src/components/nav/package.json +++ b/src/components/nav/package.json @@ -4,13 +4,11 @@ "meta": { "title": "Nav", "description": "Navigation components that share general markup and styles, from the base class to the active and disabled states. Swap modifier props to switch between each style.", + "plugins": [ + "Dropdown" + ], "components": [ - { - "component": "BNav", - "plugins": [ - "Dropdown" - ] - }, + "BNav", "BNavItem", "BNavText", "BNavForm", diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json index e805352dec8..b4a4c064cdb 100644 --- a/src/components/navbar/package.json +++ b/src/components/navbar/package.json @@ -4,15 +4,13 @@ "meta": { "title": "Navbar", "description": "The component is a responsive wrapper that positions branding, navigation, and other elements into a concise header. It’s easily extensible and thanks to the component.", + "plugins": [ + "Nav", + "Dropdown", + "Collapse" + ], "components": [ - { - "component": "BNavbar", - "plugins": [ - "Nav", - "Dropdown", - "Collapse" - ] - }, + "BNavbar", "BNavbarNav", "BNavbarBrand", { diff --git a/src/components/popover/index.js b/src/components/popover/index.js index 47b94a5b848..8758cf19e99 100644 --- a/src/components/popover/index.js +++ b/src/components/popover/index.js @@ -1,15 +1,15 @@ import BPopover from './popover' -import BPopoverDirectivePlugin from '../../directives/popover' +import BPopoverDirective from '../../directives/popover/popover' import { installFactory } from '../../utils/plugins' const components = { BPopover } -const plugins = { - BPopoverDirectivePlugin +const directives = { + BPopover: BPopoverDirective } export default { - install: installFactory({ components, plugins }) + install: installFactory({ components, directives }) } diff --git a/src/components/popover/package.json b/src/components/popover/package.json index 99cf3b2ecc8..9016f13a4dd 100644 --- a/src/components/popover/package.json +++ b/src/components/popover/package.json @@ -4,12 +4,12 @@ "meta": { "title": "Popover", "description": "The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the component or v-b-popover directive", + "directives": [ + "vBPopover" + ], "components": [ { "component": "BPopover", - "directives": [ - "vBPopover" - ], "events": [ { "event": "show", diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js index 480079637b9..c04ab4a13c5 100644 --- a/src/components/tooltip/index.js +++ b/src/components/tooltip/index.js @@ -1,15 +1,15 @@ import BTooltip from './tooltip' -import BTooltipDirectivePlugin from '../../directives/tooltip' +import BTooltipDirective from '../../directives/tooltip/tooltip' import { installFactory } from '../../utils/plugins' const components = { BTooltip } -const plugins = { - BTooltipDirectivePlugin +const directives = { + BTooltip: BTooltipDirective } export default { - install: installFactory({ components, plugins }) + install: installFactory({ components, directives }) } diff --git a/src/components/tooltip/package.json b/src/components/tooltip/package.json index 737f6a1f1d6..087b4a61c0a 100644 --- a/src/components/tooltip/package.json +++ b/src/components/tooltip/package.json @@ -4,12 +4,12 @@ "meta": { "title": "Tooltip", "description": "Easily add tooltips to elements or components via the component or v-b-tooltip directive.", + "directives": [ + "vBTooltip" + ], "components": [ { "component": "BTooltip", - "directives": [ - "vBTooltip" - ], "events": [ { "event": "show", diff --git a/src/index.js b/src/index.js index 14a9d6c4ce1..ebc8c8c06cc 100644 --- a/src/index.js +++ b/src/index.js @@ -3,20 +3,28 @@ import * as directivePlugins from './directives' import { registerPlugins, vueUse } from './utils/plugins' import { setConfig } from './utils/config' -const BootstrapVue = { - install(Vue, config = {}) { - // Configure BootstrapVue - setConfig(config) - - // Register component plugins - registerPlugins(Vue, componentPlugins) - - // Register directive plugins - registerPlugins(Vue, directivePlugins) - }, - setConfig(config = {}) /* istanbul ignore next */ { - setConfig(config) +const install = (Vue, config = {}) => { + if (install.installed) { + /* istanbul ignore next */ + return } + install.installed = true + + // Configure BootstrapVue + setConfig(config) + + // Register component plugins + registerPlugins(Vue, componentPlugins) + + // Register directive plugins + registerPlugins(Vue, directivePlugins) +} + +install.installed = false + +const BootstrapVue = { + install: install, + setConfig: setConfig } // Auto installation only occurs if window.Vue exists diff --git a/src/utils/plugins.js b/src/utils/plugins.js index f320ffcec7c..49d6961c356 100644 --- a/src/utils/plugins.js +++ b/src/utils/plugins.js @@ -6,12 +6,20 @@ import { setConfig } from './config' * @returns {function} plugin install function */ export const installFactory = ({ components, directives, plugins }) => { - return (Vue, config = {}) => { + const install = (Vue, config = {}) => { + if (install.installed) { + /* istanbul ignore next */ + return + } + install.installed = true setConfig(config) registerComponents(Vue, components) registerDirectives(Vue, directives) registerPlugins(Vue, plugins) } + install.installed = false + + return install } /**