@gitlab/ui 112.1.1 → 112.2.0

package/dist/utils/charts/constants.js

@@ -1,3 +1,5 @@
+import { translate } from '../i18n';
+
 /**
  * As of %12.10 all annotations are added as a decorations
  * by piggybacking a scatter series. The series should
@@ -39,10 +41,10 @@ const LEGEND_LAYOUT_TABLE = 'table';
 /**
  * Default values for the chart legend field labels
  */
-const LEGEND_AVERAGE_TEXT = 'Avg';
-const LEGEND_CURRENT_TEXT = 'Current';
-const LEGEND_MIN_TEXT = 'Min';
-const LEGEND_MAX_TEXT = 'Max';
+const LEGEND_AVERAGE_TEXT = () => translate('GlChartLegend.average', 'Avg');
+const LEGEND_CURRENT_TEXT = () => translate('GlChartLegend.current', 'Current');
+const LEGEND_MIN_TEXT = () => translate('GlChartLegend.min', 'Min');
+const LEGEND_MAX_TEXT = () => translate('GlChartLegend.max', 'Max');
 
 /**
  * These arrow symbols are used as markPoints under the annotations lines

package/dist/vendor/bootstrap-vue/src/components/nav/index.js

@@ -1,3 +1,2 @@
 export { BNav } from './nav';
 export { BNavItem } from './nav-item';
-export { BNavItemDropdown } from './nav-item-dropdown';

package/dist/vendor/bootstrap-vue/src/constants/components.js

@@ -29,7 +29,6 @@ const NAME_LINK = 'BLink';
 const NAME_MODAL = 'BModal';
 const NAME_NAV = 'BNav';
 const NAME_NAV_ITEM = 'BNavItem';
-const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown';
 const NAME_POPOVER = 'BPopover';
 const NAME_TAB = 'BTab';
 const NAME_TABLE = 'BTable';
@@ -61,4 +60,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "112.1.1",
+  "version": "112.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/label/label.scss

@@ -151,6 +151,6 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label-tooltip-title {
   @apply gl-block;
-  @apply gl-text-strong;
+  @apply gl-text-feedback-strong;
   @apply gl-font-bold;
 }

package/src/scss/bootstrap_vue.scss

@@ -12,9 +12,7 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
 @import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';
-@import '../vendor/bootstrap-vue/src/components/nav/index.scss';
 @import '../vendor/bootstrap-vue/src/components/popover/index.scss';
 @import '../vendor/bootstrap-vue/src/components/table/index.scss';
 @import '../vendor/bootstrap-vue/src/components/toast/index.scss';
 @import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
-

package/src/utils/charts/constants.js

@@ -1,3 +1,5 @@
+import { translate } from '../i18n';
+
 /**
  * As of %12.10 all annotations are added as a decorations
  * by piggybacking a scatter series. The series should
@@ -39,10 +41,10 @@ export const LEGEND_LAYOUT_TABLE = 'table';
 /**
  * Default values for the chart legend field labels
  */
-export const LEGEND_AVERAGE_TEXT = 'Avg';
-export const LEGEND_CURRENT_TEXT = 'Current';
-export const LEGEND_MIN_TEXT = 'Min';
-export const LEGEND_MAX_TEXT = 'Max';
+export const LEGEND_AVERAGE_TEXT = () => translate('GlChartLegend.average', 'Avg');
+export const LEGEND_CURRENT_TEXT = () => translate('GlChartLegend.current', 'Current');
+export const LEGEND_MIN_TEXT = () => translate('GlChartLegend.min', 'Min');
+export const LEGEND_MAX_TEXT = () => translate('GlChartLegend.max', 'Max');
 
 /**
  * These arrow symbols are used as markPoints under the annotations lines

package/src/vendor/bootstrap-vue/src/components/index.scss

@@ -4,7 +4,6 @@
 @import "form-radio/index";
 @import "input-group/index";
 @import "modal/index";
-@import "nav/index";
 @import "popover/index";
 @import "table/index";
 @import "toast/index";

package/src/vendor/bootstrap-vue/src/components/nav/README.md

@@ -26,7 +26,6 @@ nav.
 `<b-nav>` supports the following child components:
 
 - `<b-nav-item>` for actionable links (or router-links)
-- `<b-nav-item-dropdown>` for dropdowns
 - `<b-nav-text>` for plain text content
 - `<b-nav-form>` for inline forms
 
@@ -144,86 +143,6 @@ and `right`.
 <!-- b-nav-alignment.vue -->
 ```
 
-## Dropdown support
-
-Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
-
-```html
-<div>
-  <b-nav pills>
-    <b-nav-item active>Active</b-nav-item>
-    <b-nav-item>Link</b-nav-item>
-    <b-nav-item-dropdown
-      id="my-nav-dropdown"
-      text="Dropdown"
-      toggle-class="nav-link-custom"
-      right
-    >
-      <b-dropdown-item>One</b-dropdown-item>
-      <b-dropdown-item>Two</b-dropdown-item>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item>Three</b-dropdown-item>
-    </b-nav-item-dropdown>
-  </b-nav>
-</div>
-
-<!-- b-nav-item-dropdown.vue -->
-```
-
-Sometimes you want to add your own class names to the generated dropdown toggle button, that by
-default have the classes `nav-link` and `dropdown-toggle`. Use the `toggle-class` prop to add them
-(like above) which will render HTML similar to:
-
-```html
-<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
-  <a
-    role="button"
-    href="#my-nav-dropdown"
-    id="my-nav-dropdown__BV_button_"
-    aria-haspopup="true"
-    aria-expanded="false"
-    class="nav-link dropdown-toggle nav-link-custom"
-  ></a>
-  ...
-</li>
-```
-
-Refer to [`<b-dropdown>`](/docs/components/dropdown) for a list of supported sub-components.
-
-### Optionally scoped default slot
-
-The dropdown default slot is optionally scoped with the following scope available:
-
-| Property or Method | Description                                                                                                                      |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
-| `hide()`           | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button |
-
-### Lazy dropdown
-
-By default, `<b-nav-item-dropdown>` renders the menu contents in the DOM even when the menu is not
-shown. When there are a large number of dropdowns rendered on the same page, performance could be
-impacted due to larger overall memory utilization. You can instruct `<b-nav-item-dropdown>` to
-render the menu contents only when it is shown by setting the `lazy` prop to true.
-
-### Dropdown placement
-
-Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to
-control the positioning of `<b-nav-item-dropdown>`.
-
-Refer to the [`<b-dropdown>` positioning section](/docs/components/dropdown#positioning) for details
-on the effects and usage of these props.
-
-### Dropdown implementation note
-
-Note that the toggle button is actually rendered as a link `<a>` tag with `role="button"` for
-styling purposes, and typically has the `href` set to `#` unless an ID is provided via the `id`
-prop.
-
-The toggle will prevent scroll-top-top behaviour (via JavaScript) when clicking the toggle link. In
-some cases when using SSR, and the user clicks the toggle button _before_ Vue has had a chance to
-hydrate the component, the page will scroll to top. In these cases, simply providing a unique ID via
-the `id` prop will prevent the unwanted scroll-to-top behaviour.
-
 ## Nav text content
 
 Use the `<b-nav-text>` child component to place plain text content into the nav:
@@ -425,10 +344,6 @@ most logical parent container of `<b-nav>`, or wrap a `<nav>` element around `<b
 add the role to the `<b-nav>` itself, as this would prevent it from being announced as an actual
 list by assistive technologies.
 
-When using a `<b-nav-item-dropdown>` in your `<b-nav>`, be sure to assign a unique `id` prop value
-to the `<b-nav-item-dropdown>` so that the appropriate `aria-*` attributes can be automatically
-generated.
-
 ### Tabbed interface accessibility
 
 Note that navigation bars, even if visually styled as tabs, should **not** be given
@@ -438,21 +353,9 @@ described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-p
 See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
 WAI ARIA.
 
-Tabbed interfaces should avoid using dropdown menus, as this causes both usability and accessibility
-issues:
-
-- From a usability perspective, the fact that the currently displayed tab’s trigger element is not
-  immediately visible (as it’s inside the closed dropdown menu) can cause confusion.
-- From an accessibility point of view, there is currently no sensible way to map this sort of
-  construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to
-  users of assistive technologies.
-
 ## See also
 
-- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
-  menus.
-- [`<b-dropdown>`](/docs/components/dropdown) for sub-components that you can place inside
-  `<b-nav-item-dropdown>`
+- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content.
 - [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
   about router-link specific props available on `<b-nav-item>`
 

package/src/vendor/bootstrap-vue/src/components/nav/index.js

@@ -1,5 +1,4 @@
 import { BNav } from './nav'
 import { BNavItem } from './nav-item'
-import { BNavItemDropdown } from './nav-item-dropdown'
 
-export { BNav, BNavItem, BNavItemDropdown }
+export { BNav, BNavItem }

package/src/vendor/bootstrap-vue/src/components/nav/package.json

@@ -67,123 +67,6 @@
             "description": "Content to place in the nav item"
           }
         ]
-      },
-      {
-        "component": "BNavItemDropdown",
-        "aliases": [
-          "BNavItemDd",
-          "BNavDropdown",
-          "BNavDd"
-        ],
-        "props": [
-          {
-            "prop": "boundary",
-            "version": "2.4.0",
-            "description": "The boundary constraint of the menu: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement."
-          },
-          {
-            "prop": "dropleft",
-            "description": "When set, positions the menu to the left of the button"
-          },
-          {
-            "prop": "dropright",
-            "description": "When set, positions the menu to the right of the button"
-          },
-          {
-            "prop": "dropup",
-            "description": "When set, positions the menu on the top of the button"
-          },
-          {
-            "prop": "html",
-            "description": "HTML string to place in the toggle element (link)",
-            "xss": true
-          },
-          {
-            "prop": "lazy",
-            "description": "When set, will only mount the menu content into the DOM when the menu is open"
-          },
-          {
-            "prop": "menuClass",
-            "description": "CSS class (or classes) to add to the menu container"
-          },
-          {
-            "prop": "noCaret",
-            "description": "Hide the caret indicator on the toggle element (link)"
-          },
-          {
-            "prop": "noFlip",
-            "description": "Prevent the menu from auto flipping positions"
-          },
-          {
-            "prop": "popperOpts",
-            "description": "Additional configuration to pass to Popper.js"
-          },
-          {
-            "prop": "right",
-            "description": "Align the right edge of the menu with the right of the button"
-          },
-          {
-            "prop": "text",
-            "description": "Text to place in the toggle element (link)"
-          },
-          {
-            "prop": "toggleClass",
-            "description": "CSS class (or classes) to add to the toggle element (link)"
-          }
-        ],
-        "events": [
-          {
-            "event": "hidden",
-            "description": "Emitted when dropdown is hidden"
-          },
-          {
-            "event": "hide",
-            "description": "Emitted just before dropdown is hidden. Cancelable",
-            "args": [
-              {
-                "arg": "bvEvent",
-                "type": "BvEvent",
-                "description": "BvEvent object. Call bvEvent.preventDefault() to cancel hide"
-              }
-            ]
-          },
-          {
-            "event": "show",
-            "description": "Emitted just before dropdown is shown. Cancelable",
-            "args": [
-              {
-                "arg": "bvEvent",
-                "type": "BvEvent",
-                "description": "BvEvent object. Call bvEvent.preventDefault() to cancel show"
-              }
-            ]
-          },
-          {
-            "event": "shown",
-            "description": "Emitted when dropdown is shown"
-          },
-          {
-            "event": "toggle",
-            "description": "Emitted when toggle button is clicked"
-          }
-        ],
-        "slots": [
-          {
-            "name": "button-content",
-            "description": "Can be used to implement custom text with icons and more styling"
-          },
-          {
-            "name": "default",
-            "description": "Optionally scoped default slot for dropdown menu content",
-            "scope": [
-              {
-                "prop": "hide",
-                "type": "Function",
-                "description": "Can be used to close the dropdown menu. Accepts an optional boolean argument, which if true returns focus to the toggle button"
-              }
-            ]
-          }
-        ]
       }
     ]
   }

package/src/vendor/bootstrap-vue/src/constants/components.js

@@ -29,7 +29,6 @@ export const NAME_LINK = 'BLink'
 export const NAME_MODAL = 'BModal'
 export const NAME_NAV = 'BNav'
 export const NAME_NAV_ITEM = 'BNavItem'
-export const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown'
 export const NAME_POPOVER = 'BPopover'
 export const NAME_TAB = 'BTab'
 export const NAME_TABLE = 'BTable'

package/translations.js

@@ -6,6 +6,10 @@ export default {
   'GlBanner.closeButtonTitle': 'Dismiss',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
+  'GlChartLegend.average': 'Avg',
+  'GlChartLegend.current': 'Current',
+  'GlChartLegend.max': 'Max',
+  'GlChartLegend.min': 'Min',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
   'GlDatepicker.monthLabel': 'Month',
   'GlDatepicker.yearLabel': 'Year',

package/dist/vendor/bootstrap-vue/src/components/nav/nav-item-dropdown.js

@@ -1,108 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_NAV_ITEM_DROPDOWN } from '../../constants/components';
-import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_TEXT, SLOT_NAME_DEFAULT } from '../../constants/slots';
-import { htmlOrText } from '../../utils/html';
-import { sortKeys, pick, keys } from '../../utils/object';
-import { makePropsConfigurable } from '../../utils/props';
-import { props as props$3, dropdownMixin } from '../../mixins/dropdown';
-import { props as props$1, idMixin } from '../../mixins/id';
-import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-import { props as props$2 } from '../dropdown/dropdown';
-import { BLink } from '../link/link';
-
-// --- Props ---
-
-const props = makePropsConfigurable(sortKeys({
-  ...props$1,
-  ...pick(props$2, [...keys(props$3), 'html', 'lazy', 'menuClass', 'noCaret', 'role', 'text', 'toggleClass'])
-}), NAME_NAV_ITEM_DROPDOWN);
-
-// --- Main component ---
-
-// @vue/component
-const BNavItemDropdown = /*#__PURE__*/extend({
-  name: NAME_NAV_ITEM_DROPDOWN,
-  mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
-  props,
-  computed: {
-    toggleId() {
-      return this.safeId('_BV_toggle_');
-    },
-    menuId() {
-      return this.safeId('_BV_toggle_menu_');
-    },
-    dropdownClasses() {
-      return [this.directionClass, this.boundaryClass, {
-        show: this.visible
-      }];
-    },
-    menuClasses() {
-      return [this.menuClass, {
-        'dropdown-menu-right': this.right,
-        show: this.visible
-      }];
-    },
-    toggleClasses() {
-      return [this.toggleClass, {
-        'dropdown-toggle-no-caret': this.noCaret
-      }];
-    }
-  },
-  render(h) {
-    const {
-      toggleId,
-      menuId,
-      visible,
-      hide
-    } = this;
-    const $toggle = h(BLink, {
-      staticClass: 'nav-link dropdown-toggle',
-      class: this.toggleClasses,
-      props: {
-        href: `#${this.id || ''}`,
-        disabled: this.disabled
-      },
-      attrs: {
-        id: toggleId,
-        role: 'button',
-        'aria-haspopup': 'true',
-        'aria-expanded': visible ? 'true' : 'false',
-        'aria-controls': menuId
-      },
-      on: {
-        mousedown: this.onMousedown,
-        click: this.toggle,
-        keydown: this.toggle // Handle ENTER, SPACE and DOWN
-      },
-      ref: 'toggle'
-    }, [
-    // TODO: The `text` slot is deprecated in favor of the `button-content` slot
-    this.normalizeSlot([SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_TEXT]) || h('span', {
-      domProps: htmlOrText(this.html, this.text)
-    })]);
-    const $menu = h('ul', {
-      staticClass: 'dropdown-menu',
-      class: this.menuClasses,
-      attrs: {
-        tabindex: '-1',
-        'aria-labelledby': toggleId,
-        id: menuId
-      },
-      on: {
-        keydown: this.onKeydown // Handle UP, DOWN and ESC
-      },
-      ref: 'menu'
-    }, !this.lazy || visible ? this.normalizeSlot(SLOT_NAME_DEFAULT, {
-      hide
-    }) : [h()]);
-    return h('li', {
-      staticClass: 'nav-item b-nav-dropdown dropdown',
-      class: this.dropdownClasses,
-      attrs: {
-        id: this.safeId()
-      }
-    }, [$toggle, $menu]);
-  }
-});
-
-export { BNavItemDropdown, props };

package/src/vendor/bootstrap-vue/src/components/nav/_nav-item-dropdown.scss

@@ -1 +0,0 @@
-@import "../dropdown/index";

package/src/vendor/bootstrap-vue/src/components/nav/index.scss

@@ -1 +0,0 @@
-@import "nav-item-dropdown";

package/src/vendor/bootstrap-vue/src/components/nav/nav-item-dropdown.js

@@ -1,123 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_NAV_ITEM_DROPDOWN } from '../../constants/components'
-import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT, SLOT_NAME_TEXT } from '../../constants/slots'
-import { htmlOrText } from '../../utils/html'
-import { keys, pick, sortKeys } from '../../utils/object'
-import { makePropsConfigurable } from '../../utils/props'
-import { dropdownMixin, props as dropdownProps } from '../../mixins/dropdown'
-import { idMixin, props as idProps } from '../../mixins/id'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
-import { props as BDropdownProps } from '../dropdown/dropdown'
-import { BLink } from '../link/link'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...idProps,
-    ...pick(BDropdownProps, [
-      ...keys(dropdownProps),
-      'html',
-      'lazy',
-      'menuClass',
-      'noCaret',
-      'role',
-      'text',
-      'toggleClass'
-    ])
-  }),
-  NAME_NAV_ITEM_DROPDOWN
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BNavItemDropdown = /*#__PURE__*/ extend({
-  name: NAME_NAV_ITEM_DROPDOWN,
-  mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
-  props,
-  computed: {
-    toggleId() {
-      return this.safeId('_BV_toggle_')
-    },
-    menuId() {
-      return this.safeId('_BV_toggle_menu_')
-    },
-    dropdownClasses() {
-      return [this.directionClass, this.boundaryClass, { show: this.visible }]
-    },
-    menuClasses() {
-      return [
-        this.menuClass,
-        {
-          'dropdown-menu-right': this.right,
-          show: this.visible
-        }
-      ]
-    },
-    toggleClasses() {
-      return [this.toggleClass, { 'dropdown-toggle-no-caret': this.noCaret }]
-    }
-  },
-  render(h) {
-    const { toggleId, menuId, visible, hide } = this
-
-    const $toggle = h(
-      BLink,
-      {
-        staticClass: 'nav-link dropdown-toggle',
-        class: this.toggleClasses,
-        props: {
-          href: `#${this.id || ''}`,
-          disabled: this.disabled
-        },
-        attrs: {
-          id: toggleId,
-          role: 'button',
-          'aria-haspopup': 'true',
-          'aria-expanded': visible ? 'true' : 'false',
-          'aria-controls': menuId
-        },
-        on: {
-          mousedown: this.onMousedown,
-          click: this.toggle,
-          keydown: this.toggle // Handle ENTER, SPACE and DOWN
-        },
-        ref: 'toggle'
-      },
-      [
-        // TODO: The `text` slot is deprecated in favor of the `button-content` slot
-        this.normalizeSlot([SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_TEXT]) ||
-          h('span', { domProps: htmlOrText(this.html, this.text) })
-      ]
-    )
-
-    const $menu = h(
-      'ul',
-      {
-        staticClass: 'dropdown-menu',
-        class: this.menuClasses,
-        attrs: {
-          tabindex: '-1',
-          'aria-labelledby': toggleId,
-          id: menuId
-        },
-        on: {
-          keydown: this.onKeydown // Handle UP, DOWN and ESC
-        },
-        ref: 'menu'
-      },
-      !this.lazy || visible ? this.normalizeSlot(SLOT_NAME_DEFAULT, { hide }) : [h()]
-    )
-
-    return h(
-      'li',
-      {
-        staticClass: 'nav-item b-nav-dropdown dropdown',
-        class: this.dropdownClasses,
-        attrs: { id: this.safeId() }
-      },
-      [$toggle, $menu]
-    )
-  }
-})