@gitlab/ui 84.1.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/_variables.scss

@@ -0,0 +1,177 @@
+// --- BootstrapVue custom SCSS variables ---
+//
+// Users can override these variables in their custom SCSS
+//
+// Variables beginning with `$bv-` are used to enable/disable specific section CSS generation
+// Variables beginning with `$b-` are used to control values within the CSS generation
+
+// --- Custom inputs (adds sizing support) ---
+
+// Indicator height (and sometimes width)
+$b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
+$b-custom-control-indicator-size-sm: $custom-control-indicator-size * 0.875 !default;
+
+// Indicator background
+$b-custom-control-indicator-bg-size-lg: $custom-control-indicator-bg-size !default;
+$b-custom-control-indicator-bg-size-sm: $custom-control-indicator-bg-size !default;
+
+// Gutter widths
+$b-custom-control-gutter-lg: $custom-control-gutter * 1.25 !default;
+$b-custom-control-gutter-sm: $custom-control-gutter * 0.875 !default;
+
+// Custom radio sizes (uses defaults of 50%, since radios are round)
+$b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default;
+$b-custom-radio-indicator-border-radius-sm: $custom-radio-indicator-border-radius !default;
+
+// Custom checkbox sizes
+$b-custom-checkbox-indicator-border-radius-lg: $border-radius-lg !default;
+$b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
+
+// Custom switch sizes
+$b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
+$b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
+$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg * 0.5 !default;
+$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm * 0.5 !default;
+$b-custom-switch-indicator-size-lg: calc(
+  #{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
+) !default;
+$b-custom-switch-indicator-size-sm: calc(
+  #{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
+) !default;
+
+// Custom file sizes
+$b-custom-file-font-size-lg: $input-font-size-lg !default;
+$b-custom-file-font-size-sm: $input-font-size-sm !default;
+$b-custom-file-line-height-lg: $input-line-height-lg !default;
+$b-custom-file-line-height-sm: $input-line-height-sm !default;
+$b-custom-file-height-lg: $input-height-lg !default;
+$b-custom-file-height-sm: $input-height-sm !default;
+$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
+$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
+$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
+$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
+$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
+$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
+$b-custom-file-height-inner-lg: calc(
+  #{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
+) !default;
+$b-custom-file-height-inner-sm: calc(
+  #{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
+) !default;
+
+// --- Icons ---
+
+$b-icon-vertical-offset: -0.15em;
+
+// Animations
+$b-icon-animation-cylon-duration: 0.75s !default;
+$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
+$b-icon-animation-fade-duration: 0.75s !default;
+$b-icon-animation-spin-duration: 2s !default;
+$b-icon-animation-spin-reverse-duration: $b-icon-animation-spin-duration !default;
+$b-icon-animation-spin-pulse-duration: 1s !default;
+$b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
+$b-icon-animation-throb-duration: 0.75s !default;
+
+// --- Sidebar ---
+
+$b-sidebar-width: 320px !default;
+$b-sidebar-transition-duration: 0.3s !default;
+$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
+$b-sidebar-header-font-size: 1.5rem !default;
+$b-sidebar-header-padding-y: $navbar-padding-y !default;
+$b-sidebar-header-padding-x: $navbar-padding-x !default;
+
+// --- Tables ---
+
+// Table busy state
+$b-table-busy-opacity: 0.55 !default;
+
+// Table sorting
+$b-table-sort-icon-bg-width: 0.65em !default;
+$b-table-sort-icon-bg-height: 1em !default;
+// Sort icons are square, but "squished" horizontally by the above variables
+$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+// Icons to use on dark table or dark header/footer (lighter color icons)
+// We simply just replace the fill color 'black' white 'white'
+$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
+
+// Flag to enable sticky table header and column CSS generation
+$bv-enable-table-sticky: true !default;
+// Default max-height for tables with sticky headers
+$b-table-sticky-header-max-height: 300px !default;
+
+// Flag to enable table stacked CSS generation
+$bv-enable-table-stacked: true !default;
+// Table stacked defaults
+$b-table-stacked-heading-width: 40% !default;
+$b-table-stacked-gap: 1rem !default;
+
+// Bootstrap v4.3 is missing the "active" variant for dark tables
+// Which translates to `bg-active`, but only for tables
+$table-dark-active-bg: $table-dark-hover-bg !default;
+
+// --- Toasts ---
+
+// Toaster defaults
+$b-toaster-zindex: 1100 !default;
+$b-toaster-offset-top: 0.5rem !default;
+$b-toaster-offset-bottom: $b-toaster-offset-top !default;
+$b-toaster-offset-left: $b-toaster-offset-top !default;
+$b-toaster-offset-right: $b-toaster-offset-top !default;
+
+// Default toast opacity
+// Value from 0 to 1, or 0% to 100%
+// Bootstrap default is 0.85 (extracted from the `$toast-background-color` value)
+// Bootstrap does not have this as a variable, so we add it in.
+$b-toast-background-opacity: alpha($toast-background-color) !default;
+
+// Toast variant levels wrt theme color value
+$b-toast-bg-level: $alert-bg-level !default;
+$b-toast-border-level: $alert-border-level !default;
+$b-toast-color-level: $alert-color-level !default;
+
+// --- Tooltips ---
+
+// Flag to enable tooltip variant CSS generation
+$bv-enable-tooltip-variants: true !default;
+
+// Tooltip background variant level wrt theme color value
+$b-tooltip-bg-level: 0 !default;
+
+// --- Popovers ---
+
+// Flag to enable popover variant CSS generation
+$bv-enable-popover-variants: true !default;
+
+// Popover variant levels wrt theme color value
+$b-popover-bg-level: $alert-bg-level !default;
+$b-popover-border-level: $alert-border-level !default;
+$b-popover-color-level: $alert-color-level !default;
+
+// --- Avatar ---
+
+$b-avatar-size: 2.5rem !default;
+$b-avatar-size-sm: 1.5rem !default;
+$b-avatar-size-lg: 3.5rem !default;
+$b-avatar-font-size-scale: 0.4 !default;
+$b-avatar-badge-font-size-scale: $b-avatar-font-size-scale * 0.7 !default;
+
+// --- Skeleton ---
+
+$b-skeleton-background-color: rgba(0, 0, 0, 0.12) !default;
+$b-skeleton-loading-cursor: wait !default;
+$b-skeleton-animation-duration: 1.75s !default;
+$b-skeleton-text-spacing: map-get($spacers, 1) !default;
+$b-skeleton-btn-width: 75px !default;
+$b-skeleton-animate-wave-color: hsla(0, 0%, 100%, 0.4) !default;
+$b-skeleton-animate-wave-background: linear-gradient(
+  90deg,
+  transparent,
+  $b-skeleton-animate-wave-color,
+  transparent
+) !default;

package/src/vendor/bootstrap-vue/src/browser-icons.js

@@ -0,0 +1,9 @@
+// Main entry point for the browser icons-only build
+import { vueUse } from './utils/plugins'
+
+import { BootstrapVueIcons } from './icons-only'
+
+// Auto installation only occurs if window.Vue exists
+vueUse(BootstrapVueIcons)
+
+export default BootstrapVueIcons

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

@@ -0,0 +1,9 @@
+// Main entry point for the browser build
+import { vueUse } from './utils/plugins'
+
+import { BootstrapVue } from './index'
+
+// Auto installation only occurs if window.Vue exists
+vueUse(BootstrapVue)
+
+export default BootstrapVue

package/src/vendor/bootstrap-vue/src/bv-config.d.ts

@@ -0,0 +1,4 @@
+import Vue, { PluginFunction, PluginObject } from 'vue'
+import { BvPlugin } from './'
+
+export declare const BVConfigPlugin: BvPlugin

package/src/vendor/bootstrap-vue/src/bv-config.js

@@ -0,0 +1,6 @@
+//
+// Utility Plugin for setting the configuration
+//
+import { pluginFactory } from './utils/plugins'
+
+export const BVConfigPlugin = /*#__PURE__*/ pluginFactory()

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

@@ -0,0 +1,280 @@
+# Alert
+
+> Provide contextual feedback messages for typical user actions with the handful of available and
+> flexible alert messages.
+
+## Overview
+
+Alerts are available for any length of text, as well as an optional dismiss button (and optional
+auto-dismissing).
+
+```html
+<template>
+  <div>
+    <b-alert show>Default Alert</b-alert>
+
+    <b-alert variant="success" show>Success Alert</b-alert>
+
+    <b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
+      Dismissible Alert!
+    </b-alert>
+
+    <b-alert
+      :show="dismissCountDown"
+      dismissible
+      variant="warning"
+      @dismissed="dismissCountDown=0"
+      @dismiss-count-down="countDownChanged"
+    >
+      <p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
+      <b-progress
+        variant="warning"
+        :max="dismissSecs"
+        :value="dismissCountDown"
+        height="4px"
+      ></b-progress>
+    </b-alert>
+
+    <b-button @click="showAlert" variant="info" class="m-1">
+      Show alert with count-down timer
+    </b-button>
+    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
+      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
+    </b-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dismissSecs: 10,
+        dismissCountDown: 0,
+        showDismissibleAlert: false
+      }
+    },
+    methods: {
+      countDownChanged(dismissCountDown) {
+        this.dismissCountDown = dismissCountDown
+      },
+      showAlert() {
+        this.dismissCountDown = this.dismissSecs
+      }
+    }
+  }
+</script>
+
+<!-- b-alert.vue -->
+```
+
+## Visible state
+
+Use the `show` prop to control the visibility state of the alert. By default alerts are **not**
+shown. Set the prop `show` to explicitly display them.
+
+The `show` prop accepts boolean `true` or `false` to show and hide the alert respectively. It can
+also be set to a positive integer (representing seconds) to create a self dismissing alert. See the
+[Auto Dismissing Alerts](#auto-dismissing-alerts) section below for details.
+
+### `v-model` support
+
+You can use the `v-model` directive to create two-way data bindings on the `show` prop as in
+`v-model="showDismissibleAlert"` above. Useful when you use dismissible because when user closes the
+alert, your variable will be updated. Do not use the `show` prop when using `v-model`.
+
+## Contextual variants
+
+For proper styling of `<b-alert>`, use one of the four required contextual variants by setting the
+`variant` prop to one of the following: `info`, `success`, `warning` or `danger`. The default is
+`info`.
+
+```html
+<div>
+  <b-alert show variant="primary">Primary Alert</b-alert>
+  <b-alert show variant="secondary">Secondary Alert</b-alert>
+  <b-alert show variant="success">Success Alert</b-alert>
+  <b-alert show variant="danger">Danger Alert</b-alert>
+  <b-alert show variant="warning">Warning Alert</b-alert>
+  <b-alert show variant="info">Info Alert</b-alert>
+  <b-alert show variant="light">Light Alert</b-alert>
+  <b-alert show variant="dark">Dark Alert</b-alert>
+</div>
+
+<!-- b-alert-variants.vue -->
+```
+
+### Conveying meaning to assistive technologies
+
+Using color variants to add meaning only provides a visual indication, which will not be conveyed to
+users of assistive technologies – such as screen readers. Ensure that information denoted by the
+color is either obvious from the content itself (e.g. the visible text), or is included through
+alternative means, such as additional text hidden with the `.sr-only` class.
+
+## Additional content inside alerts
+
+`<b-alerts>` can also contain additional HTML elements like headings and paragraphs, which will be
+styled with the appropriate color matching the variant.
+
+```html
+<div>
+  <b-alert show variant="success">
+    <h4 class="alert-heading">Well done!</h4>
+    <p>
+      Aww yeah, you successfully read this important alert message. This example text is going to
+      run a bit longer so that you can see how spacing within an alert works with this kind of
+      content.
+    </p>
+    <hr>
+    <p class="mb-0">
+      Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+    </p>
+  </b-alert>
+</div>
+
+<!-- b-alert-content.vue -->
+```
+
+### Color of links within alerts
+
+Use the `.alert-link` utility CSS class to quickly provide matching colored links within any alert.
+Use on `<a>` or `<b-link>`.
+
+```html
+<div>
+  <b-alert show variant="primary"><a href="#" class="alert-link">Primary Alert</a></b-alert>
+  <b-alert show variant="secondary"><a href="#" class="alert-link">Secondary Alert</a></b-alert>
+  <b-alert show variant="success"><a href="#" class="alert-link">Success Alert</a></b-alert>
+  <b-alert show variant="danger"><a href="#" class="alert-link">Danger Alert</a></b-alert>
+  <b-alert show variant="warning"><a href="#" class="alert-link">Warning Alert</a></b-alert>
+  <b-alert show variant="info"><a href="#" class="alert-link">Info Alert</a></b-alert>
+  <b-alert show variant="light"><a href="#" class="alert-link">Light Alert</a></b-alert>
+  <b-alert show variant="dark"><a href="#" class="alert-link">Dark Alert</a></b-alert>
+</div>
+
+<!-- b-alert-links.vue -->
+```
+
+## Dismissible alerts
+
+Using the `dismissible` prop it's possible to dismiss any `<b-alert>` inline. This will add a close
+`X` button. Use the `dismiss-label` prop to change the hidden label text associated with the dismiss
+button.
+
+```html
+<div>
+  <b-alert show dismissible>
+    Dismissible Alert! Click the close button over there <b>&rArr;</b>
+  </b-alert>
+</div>
+
+<!-- b-alert-dismiss.vue -->
+```
+
+### Auto dismissing alerts
+
+To create a `<b-alert>` that dismisses automatically after a period of time, set the `show` prop (or
+the `v-model`) to the number of seconds you would like the `<b-alert>` to remain visible for. Only
+integer number of seconds are supported.
+
+```html
+<template>
+  <div>
+    <b-alert
+      :show="dismissCountDown"
+      dismissible
+      variant="warning"
+      @dismissed="dismissCountDown=0"
+      @dismiss-count-down="countDownChanged"
+    >
+      This alert will dismiss after {{ dismissCountDown }} seconds...
+    </b-alert>
+    <b-button @click="showAlert" variant="info" class="m-1">
+      Show alert with count-down timer
+    </b-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dismissSecs: 5,
+        dismissCountDown: 0
+      }
+    },
+    methods: {
+      countDownChanged(dismissCountDown) {
+        this.dismissCountDown = dismissCountDown
+      },
+      showAlert() {
+        this.dismissCountDown = this.dismissSecs
+      }
+    }
+  }
+</script>
+
+<!-- b-alert-auto-dismissing.vue -->
+```
+
+## Fading alerts
+
+Use the `fade` prop to enable animation. By default alerts are not animated.
+
+```html
+<template>
+  <div>
+    <b-alert show dismissible fade>Dismissible Alert!</b-alert>
+
+    <b-alert
+      variant="danger"
+      dismissible
+      fade
+      :show="showDismissibleAlert"
+      @dismissed="showDismissibleAlert=false"
+    >
+      Dismissible Alert!
+    </b-alert>
+
+    <b-alert
+      :show="dismissCountDown"
+      dismissible
+      fade
+      variant="warning"
+      @dismiss-count-down="countDownChanged"
+    >
+      This alert will dismiss after {{ dismissCountDown }} seconds...
+    </b-alert>
+
+    <b-button @click="showAlert" variant="info" class="m-1">
+      Show alert with count-down timer
+    </b-button>
+    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
+      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
+    </b-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dismissSecs: 5,
+        dismissCountDown: 0,
+        showDismissibleAlert: false
+      }
+    },
+    methods: {
+      countDownChanged(dismissCountDown) {
+        this.dismissCountDown = dismissCountDown
+      },
+      showAlert() {
+        this.dismissCountDown = this.dismissSecs
+      }
+    }
+  }
+</script>
+
+<!-- b-alert-fade.vue -->
+```
+
+<!-- Component reference added automatically from component package.json -->

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

@@ -0,0 +1,185 @@
+import { NAME_ALERT } from '../../constants/components'
+import { EVENT_NAME_DISMISSED, EVENT_NAME_DISMISS_COUNT_DOWN } from '../../constants/events'
+import {
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_BOOLEAN_NUMBER_STRING,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { SLOT_NAME_DISMISS } from '../../constants/slots'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { requestAF } from '../../utils/dom'
+import { isBoolean, isNumeric } from '../../utils/inspect'
+import { makeModelMixin } from '../../utils/model'
+import { toInteger } from '../../utils/number'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { COMPONENT_UID_KEY, extend } from '../../vue'
+import { BButtonClose } from '../button/button-close'
+import { BVTransition } from '../transition/bv-transition'
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('show', {
+  type: PROP_TYPE_BOOLEAN_NUMBER_STRING,
+  defaultValue: false
+})
+
+// --- Helper methods ---
+
+// Convert `show` value to a number
+const parseCountDown = show => {
+  if (show === '' || isBoolean(show)) {
+    return 0
+  }
+  show = toInteger(show, 0)
+  return show > 0 ? show : 0
+}
+
+// Convert `show` value to a boolean
+const parseShow = show => {
+  if (show === '' || show === true) {
+    return true
+  }
+  if (toInteger(show, 0) < 1) {
+    // Boolean will always return false for the above comparison
+    return false
+  }
+  return !!show
+}
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...modelProps,
+    dismissLabel: makeProp(PROP_TYPE_STRING, 'Close'),
+    dismissible: makeProp(PROP_TYPE_BOOLEAN, false),
+    fade: makeProp(PROP_TYPE_BOOLEAN, false),
+    variant: makeProp(PROP_TYPE_STRING, 'info')
+  }),
+  NAME_ALERT
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BAlert = /*#__PURE__*/ extend({
+  name: NAME_ALERT,
+  mixins: [modelMixin, normalizeSlotMixin],
+  props,
+  data() {
+    return {
+      countDown: 0,
+      // If initially shown, we need to set these for SSR
+      localShow: parseShow(this[MODEL_PROP_NAME])
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      this.countDown = parseCountDown(newValue)
+      this.localShow = parseShow(newValue)
+    },
+    countDown(newValue) {
+      this.clearCountDownInterval()
+      const show = this[MODEL_PROP_NAME]
+      // Ignore if `show` transitions to a boolean value
+      if (isNumeric(show)) {
+        this.$emit(EVENT_NAME_DISMISS_COUNT_DOWN, newValue)
+        // Update the v-model if needed
+        if (show !== newValue) {
+          this.$emit(MODEL_EVENT_NAME, newValue)
+        }
+        if (newValue > 0) {
+          this.localShow = true
+          this.$_countDownTimeout = setTimeout(() => {
+            this.countDown--
+          }, 1000)
+        } else {
+          // Slightly delay the hide to allow any UI updates
+          this.$nextTick(() => {
+            requestAF(() => {
+              this.localShow = false
+            })
+          })
+        }
+      }
+    },
+    localShow(newValue) {
+      const show = this[MODEL_PROP_NAME]
+      // Only emit dismissed events for dismissible or auto-dismissing alerts
+      if (!newValue && (this.dismissible || isNumeric(show))) {
+        this.$emit(EVENT_NAME_DISMISSED)
+      }
+      // Only emit booleans if we weren't passed a number via v-model
+      if (!isNumeric(show) && show !== newValue) {
+        this.$emit(MODEL_EVENT_NAME, newValue)
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_filterTimer = null
+
+    const show = this[MODEL_PROP_NAME]
+    this.countDown = parseCountDown(show)
+    this.localShow = parseShow(show)
+  },
+  beforeDestroy() {
+    this.clearCountDownInterval()
+  },
+  methods: {
+    dismiss() {
+      this.clearCountDownInterval()
+      this.countDown = 0
+      this.localShow = false
+    },
+    clearCountDownInterval() {
+      clearTimeout(this.$_countDownTimeout)
+      this.$_countDownTimeout = null
+    }
+  },
+  render(h) {
+    let $alert = h()
+    if (this.localShow) {
+      const { dismissible, variant } = this
+
+      let $dismissButton = h()
+      if (dismissible) {
+        // Add dismiss button
+        $dismissButton = h(
+          BButtonClose,
+          {
+            attrs: { 'aria-label': this.dismissLabel },
+            on: { click: this.dismiss }
+          },
+          [this.normalizeSlot(SLOT_NAME_DISMISS)]
+        )
+      }
+
+      $alert = h(
+        'div',
+        {
+          staticClass: 'alert',
+          class: {
+            'alert-dismissible': dismissible,
+            [`alert-${variant}`]: variant
+          },
+          attrs: {
+            role: 'alert',
+            'aria-live': 'polite',
+            'aria-atomic': true
+          },
+          key: this[COMPONENT_UID_KEY]
+        },
+        [$dismissButton, this.normalizeSlot()]
+      )
+    }
+
+    return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
+  }
+})