@gitlab/ui 99.1.0 → 101.0.0

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

@@ -1,5 +1,4 @@
 // Component names
-const NAME_BADGE = 'BBadge';
 const NAME_BREADCRUMB = 'BBreadcrumb';
 const NAME_BREADCRUMB_ITEM = 'BBreadcrumbItem';
 const NAME_BREADCRUMB_LINK = 'BBreadcrumbLink';
@@ -72,4 +71,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, 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_INPUT, 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_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, 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_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, 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_INPUT, 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_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, 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 };

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

@@ -2,7 +2,6 @@ import { installFactory } from './utils/plugins';
 import { componentsPlugin } from './components';
 export { BVConfigPlugin as BVConfig, BVConfigPlugin } from './bv-config';
 export { BVToastPlugin } from './components/toast/helpers/bv-toast';
-export { BBadge } from './components/badge/badge';
 export { BBreadcrumb } from './components/breadcrumb/breadcrumb';
 export { BBreadcrumbItem } from './components/breadcrumb/breadcrumb-item';
 export { BButton } from './components/button/button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "99.1.0",
+  "version": "101.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,6 @@
   },
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
-    "bootstrap": ">=4.5.3 <=4.6.2",
     "dompurify": ">=2.5.2 <3.0.0 || >=3.1.2",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
@@ -145,8 +144,7 @@
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "bootstrap": "4.6.2",
-    "cypress": "13.15.0",
+    "cypress": "13.15.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",

package/src/components/base/badge/badge.md

@@ -23,16 +23,8 @@ badge for best accessibility.
 <gl-badge icon="eye" aria-label="Mark as confidential" />
 ```
 
-## Edge cases
-
-While this component is based on
-[`BBadge`](https://bootstrap-vue.org/docs/components/badge) from
-`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component:
-
-- Has a different set of valid `variant`s. See the examples or props
-   documentation for those values.
-- Always sets the `pill` prop of the underlying
-[`BBadge`](https://bootstrap-vue.org/docs/components/badge) to `true`. Any passed
-   in `pill` prop value is ignored.
-- Does _not_ scale itself to match the size of its immediate parent, like
-   [`BBadge`](https://bootstrap-vue.org/docs/components/badge) does.
+## Link badges
+
+Badges can be made actionable and turn into links by providing the `href` prop,
+which can be used in combination with the props `rel`, `target`, `active`, and `disabled`.
+The prop `tag` will be ignored and the `BLink` component will be used instead.

package/src/components/base/badge/badge.scss

@@ -27,7 +27,7 @@ $badge-min-width: $gl-spacing-scale-3;
     }
   }
 
-  a.gl-badge.badge-#{$variant} {
+  a.gl-badge.badge-#{$variant}:not(.disabled) {
     &:hover {
       color: $hover-color;
       // Needed to override bootstrap's badge variant background
@@ -117,6 +117,11 @@ $badge-min-width: $gl-spacing-scale-3;
   }
 }
 
+a.gl-badge.disabled {
+  cursor: not-allowed;
+}
+  
+
 /* Variants */
 
 @include gl-badge-variant(

package/src/components/base/badge/badge.vue

@@ -1,16 +1,25 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BBadge } from '../../../vendor/bootstrap-vue/src/components/badge/badge';
+import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
 import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
+const variantClass = {
+  [badgeVariantOptions.muted]: 'badge-muted',
+  [badgeVariantOptions.neutral]: 'badge-neutral',
+  [badgeVariantOptions.info]: 'badge-info',
+  [badgeVariantOptions.success]: 'badge-success',
+  [badgeVariantOptions.warning]: 'badge-warning',
+  [badgeVariantOptions.danger]: 'badge-danger',
+  [badgeVariantOptions.tier]: 'badge-tier',
+};
+
 export default {
   name: 'GlBadge',
   components: {
-    BBadge,
+    BLink,
     GlIcon,
   },
-  inheritAttrs: false,
   props: {
     /**
      * The variant of the badge.
@@ -48,6 +57,54 @@ export default {
       default: false,
       required: false,
     },
+    /**
+     * Custom tag to use (unless `href` is defined)
+     */
+    tag: {
+      type: String,
+      required: false,
+      default: 'span',
+    },
+    /**
+     * Creates the badge as link (ignores `tag` property)
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Sets the `rel` attributes, when `href` is defined
+     */
+    rel: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Sets the `target`, when `href` is defined
+     */
+    target: {
+      type: String,
+      required: false,
+      default: '_self',
+    },
+    /**
+     * Adds the `active` class, when `href` is defined
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Disables the link, when `href` is defined
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     hasIconOnly() {
@@ -70,19 +127,38 @@ export default {
     iconSizeComputed() {
       return badgeIconSizeOptions[this.iconSize];
     },
+    isLink() {
+      return Boolean(this.href);
+    },
+    computedTag() {
+      return this.isLink ? BLink : this.tag;
+    },
+    computedProps() {
+      if (!this.isLink) return {};
+
+      const { href, rel, target, active, disabled } = this;
+      return { href, rel, target, active, disabled };
+    },
+    classes() {
+      return [
+        'gl-badge',
+        'badge',
+        'badge-pill',
+        variantClass[this.variant],
+        { '!gl-px-2': !this.$scopedSlots.default },
+      ];
+    },
   },
 };
 </script>
 
 <template>
-  <b-badge
-    v-bind="$attrs"
-    :variant="variant"
-    class="gl-badge"
-    :class="{ '!gl-px-2': !$scopedSlots.default }"
+  <component
+    :is="computedTag"
+    v-bind="computedProps"
+    :class="classes"
     :role="role"
     :aria-label="ariaLabel"
-    pill
   >
     <gl-icon
       v-if="icon"
@@ -95,5 +171,5 @@ export default {
     <span v-if="$slots.default" class="gl-badge-content">
       <slot></slot>
     </span>
-  </b-badge>
+  </component>
 </template>

package/src/scss/bootstrap.scss

@@ -1,34 +1,34 @@
 @import 'variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/code';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/input-group';
-@import 'bootstrap/scss/custom-forms';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/breadcrumb';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/media';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/print';
+@import '../vendor/bootstrap/scss/functions';
+@import '../vendor/bootstrap/scss/variables';
+@import '../vendor/bootstrap/scss/mixins';
+@import '../vendor/bootstrap/scss/root';
+@import '../vendor/bootstrap/scss/reboot';
+@import '../vendor/bootstrap/scss/type';
+@import '../vendor/bootstrap/scss/images';
+@import '../vendor/bootstrap/scss/code';
+@import '../vendor/bootstrap/scss/grid';
+@import '../vendor/bootstrap/scss/tables';
+@import '../vendor/bootstrap/scss/forms';
+@import '../vendor/bootstrap/scss/buttons';
+@import '../vendor/bootstrap/scss/transitions';
+@import '../vendor/bootstrap/scss/dropdown';
+@import '../vendor/bootstrap/scss/button-group';
+@import '../vendor/bootstrap/scss/input-group';
+@import '../vendor/bootstrap/scss/custom-forms';
+@import '../vendor/bootstrap/scss/nav';
+@import '../vendor/bootstrap/scss/navbar';
+@import '../vendor/bootstrap/scss/card';
+@import '../vendor/bootstrap/scss/breadcrumb';
+@import '../vendor/bootstrap/scss/pagination';
+@import '../vendor/bootstrap/scss/badge';
+@import '../vendor/bootstrap/scss/alert';
+@import '../vendor/bootstrap/scss/progress';
+@import '../vendor/bootstrap/scss/media';
+@import '../vendor/bootstrap/scss/list-group';
+@import '../vendor/bootstrap/scss/close';
+@import '../vendor/bootstrap/scss/modal';
+@import '../vendor/bootstrap/scss/tooltip';
+@import '../vendor/bootstrap/scss/popover';
+@import '../vendor/bootstrap/scss/utilities';
+@import '../vendor/bootstrap/scss/print';

package/src/scss/bootstrap_vue.scss

@@ -1,7 +1,4 @@
 // stylelint-disable scss/at-import-partial-extension-blacklist
-
-// imports from https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/index.scss
-
 @import '../vendor/bootstrap-vue/src/variables.scss';
 // Disabe Tooltip and Popover colored variants which we do not use / support.
 $bv-enable-tooltip-variants: false;
@@ -21,4 +18,3 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/components/toast/index.scss';
 @import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
 
-// @import '../vendor/bootstrap-vue/src/icons/icons.scss';

package/src/scss/storybook.scss

@@ -7,9 +7,9 @@ $feature-button-border: true;
 @import 'functions';
 @import 'variables';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+@import '../vendor/bootstrap/scss/functions';
+@import '../vendor/bootstrap/scss/variables';
+@import '../vendor/bootstrap/scss/mixins';
 
 @import 'bootstrap_vue';
 

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

@@ -64,7 +64,6 @@
     "test:meta": "scripts/check-meta.sh"
   },
   "dependencies": {
-    "bootstrap": "^4.6.1",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "vue-functional-data-merge": "^3.1.0"

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

@@ -1,5 +1,4 @@
 // Component names
-export const NAME_BADGE = 'BBadge'
 export const NAME_BREADCRUMB = 'BBreadcrumb'
 export const NAME_BREADCRUMB_ITEM = 'BBreadcrumbItem'
 export const NAME_BREADCRUMB_LINK = 'BBreadcrumbLink'

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

@@ -51,9 +51,6 @@ export { BVToastPlugin } from './components/toast/helpers/bv-toast'
 
 // --- Export all individual components and component group plugins as named exports ---
 
-// export * from './components/badge'
-export { BBadge } from './components/badge/badge'
-
 // export * from './components/breadcrumb'
 export { BBreadcrumb } from './components/breadcrumb/breadcrumb'
 export { BBreadcrumbItem } from './components/breadcrumb/breadcrumb-item'

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

@@ -1,53 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_BADGE } from '../../constants/components';
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
-import { omit, sortKeys } from '../../utils/object';
-import { makePropsConfigurable, makeProp, pluckProps } from '../../utils/props';
-import { isLink } from '../../utils/router';
-import { props as props$1, BLink } from '../link/link';
-
-// --- Props ---
-
-const linkProps = omit(props$1, ['event', 'routerTag']);
-delete linkProps.href.default;
-delete linkProps.to.default;
-const props = makePropsConfigurable(sortKeys({
-  ...linkProps,
-  pill: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'span'),
-  variant: makeProp(PROP_TYPE_STRING, 'secondary')
-}), NAME_BADGE);
-
-// --- Main component ---
-
-// @vue/component
-const BBadge = /*#__PURE__*/extend({
-  name: NAME_BADGE,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      children
-    } = _ref;
-    const {
-      active,
-      disabled
-    } = props;
-    const link = isLink(props);
-    const tag = link ? BLink : props.tag;
-    const variant = props.variant || 'secondary';
-    return h(tag, mergeData(data, {
-      staticClass: 'badge',
-      class: [`badge-${variant}`, {
-        'badge-pill': props.pill,
-        active,
-        disabled
-      }],
-      props: link ? pluckProps(linkProps, props) : {}
-    }), children);
-  }
-});
-
-export { BBadge, props };

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

@@ -1 +0,0 @@
-export { BBadge } from './badge';

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

@@ -1,126 +0,0 @@
-# Badge
-
-> Small and adaptive tag for adding context to just about any content.
-
-## Overview
-
-Badges scale to match the size of the immediate parent element by using relative font sizing and
-`em` units.
-
-```html
-<div>
-  <h2>Example heading <b-badge>New</b-badge></h2>
-  <h3>Example heading <b-badge>New</b-badge></h3>
-  <h4>Example heading <b-badge>New</b-badge></h4>
-  <h5>Example heading <b-badge>New</b-badge></h5>
-  <h6>Example heading <b-badge>New</b-badge></h6>
-</div>
-
-<!-- b-badges.vue -->
-```
-
-Badges can be used as part of links or buttons to provide a counter (or similar flag).
-
-```html
-<div class="text-center">
-  <b-button variant="primary">
-    Notifications <b-badge variant="light">4</b-badge>
-  </b-button>
-</div>
-
-<!-- b-badge-button.vue -->
-```
-
-Note that depending on how they are used, badges may be confusing for users of screen readers and
-similar assistive technologies. While the styling of badges provides a visual cue as to their
-purpose, these users will simply be presented with the content of the badge. Depending on the
-specific situation, these badges may seem like random additional words or numbers at the end of a
-sentence, link, or button.
-
-Unless the context is clear (as with the "Notifications" example, where it is understood that the
-"4" is the number of notifications), consider including additional context with a visually hidden
-piece of additional text.
-
-```html
-<div class="text-center">
-  <b-button variant="primary">
-    Profile
-    <b-badge variant="light">9 <span class="sr-only">unread messages</span></b-badge>
-  </b-button>
-</div>
-
-<!-- b-badge-button-aria.vue -->
-```
-
-## Contextual variations
-
-Add any of the following variants via the `variant` prop to change the appearance of a `<b-badge>`:
-`default`, `primary`, `success`, `warning`, `info`, and `danger`. If no variant is specified
-`default` will be used.
-
-```html
-<div>
-  <b-badge variant="primary">Primary</b-badge>
-  <b-badge variant="secondary">Secondary</b-badge>
-  <b-badge variant="success">Success</b-badge>
-  <b-badge variant="danger">Danger</b-badge>
-  <b-badge variant="warning">Warning</b-badge>
-  <b-badge variant="info">Info</b-badge>
-  <b-badge variant="light">Light</b-badge>
-  <b-badge variant="dark">Dark</b-badge>
-</div>
-
-<!-- b-badge-variants.vue -->
-```
-
-### Conveying meaning to assistive technologies
-
-Using color to add meaning only provides a visual indication, which will not be conveyed to users of
-assistive technologies – such as screen readers. Ensure that information denoted by the color is
-either obvious from the content itself (e.g. the visible text), or is included through alternative
-means, such as additional text hidden with the `.sr-only` class.
-
-## Pill badges
-
-Use the `pill` prop to make badges more rounded (with a larger border-radius and additional
-horizontal padding). Useful if you miss the badges from Bootstrap v3.
-
-```html
-<div>
-  <b-badge pill variant="primary">Primary</b-badge>
-  <b-badge pill variant="secondary">Secondary</b-badge>
-  <b-badge pill variant="success">Success</b-badge>
-  <b-badge pill variant="danger">Danger</b-badge>
-  <b-badge pill variant="warning">Warning</b-badge>
-  <b-badge pill variant="info">Info</b-badge>
-  <b-badge pill variant="light">Light</b-badge>
-  <b-badge pill variant="dark">Dark</b-badge>
-</div>
-
-<!-- b-badge-pill.vue -->
-```
-
-## Actionable badges
-
-Quickly provide actionable badges with hover and focus states by specifying either the `href` prop
-(links) or `to` prop (router-links):
-
-```html
-<div>
-  <b-badge href="#" variant="primary">Primary</b-badge>
-  <b-badge href="#" variant="secondary">Secondary</b-badge>
-  <b-badge href="#" variant="success">Success</b-badge>
-  <b-badge href="#" variant="danger">Danger</b-badge>
-  <b-badge href="#" variant="warning">Warning</b-badge>
-  <b-badge href="#" variant="info">Info</b-badge>
-  <b-badge href="#" variant="light">Light</b-badge>
-  <b-badge href="#" variant="dark">Dark</b-badge>
-</div>
-
-<!-- b-badge-action.vue -->
-```
-
-Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
-router-link specific props.
-
-<!-- Component reference added automatically from component package.json -->

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

@@ -1,55 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_BADGE } from '../../constants/components'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { omit, sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
-import { isLink } from '../../utils/router'
-import { BLink, props as BLinkProps } from '../link/link'
-
-// --- Props ---
-
-const linkProps = omit(BLinkProps, ['event', 'routerTag'])
-delete linkProps.href.default
-delete linkProps.to.default
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...linkProps,
-    pill: makeProp(PROP_TYPE_BOOLEAN, false),
-    tag: makeProp(PROP_TYPE_STRING, 'span'),
-    variant: makeProp(PROP_TYPE_STRING, 'secondary')
-  }),
-  NAME_BADGE
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BBadge = /*#__PURE__*/ extend({
-  name: NAME_BADGE,
-  functional: true,
-  props,
-  render(h, { props, data, children }) {
-    const { active, disabled } = props
-    const link = isLink(props)
-    const tag = link ? BLink : props.tag
-    const variant = props.variant || 'secondary'
-
-    return h(
-      tag,
-      mergeData(data, {
-        staticClass: 'badge',
-        class: [
-          `badge-${variant}`,
-          {
-            'badge-pill': props.pill,
-            active,
-            disabled
-          }
-        ],
-        props: link ? pluckProps(linkProps, props) : {}
-      }),
-      children
-    )
-  }
-})