bootstrap-vue-next · xvaara · Apr 30, 2025 · Dec 3, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -28,5 +28,19 @@
       ],
       "type": "node"
     },
+    {
+      "name": "Launch app unit test",
+      "request": "launch",
+      "runtimeArgs": [
+        "test:unit",
+        "--filter",
+        "bootstrap-vue-next"
+      ],
+      "runtimeExecutable": "pnpm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node"
+    },
   ]
 }
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
@@ -3,6 +3,7 @@
   <BNavbar v-b-color-mode="'dark'" variant="primary" sticky="top" toggleable="lg" :container="true">
     <BToastOrchestrator />
     <BModalOrchestrator />
+    <BPopoverOrchestrator />
     <div class="d-flex gap-2 align-items-center">
       <BNavbarToggle v-b-toggle.sidebar-menu />
       <BNavbarBrand :to="withBase('/')" class="p-0 me-0 me-lg-2">
@@ -163,6 +164,7 @@ import {
   BNavItem,
   BNavItemDropdown,
   BOffcanvas,
+  BPopoverOrchestrator,
   BRow,
   BToastOrchestrator,
   useColorMode,

diff --git a/apps/docs/src/components/TableOfContentsNav.vue b/apps/docs/src/components/TableOfContentsNav.vue
@@ -140,6 +140,7 @@ const componentsList: {name: string}[] = [
   {name: 'Table'},
   {name: 'Tabs'},
   {name: 'Toast'},
+  {name: 'Tooltip'},
 ]
 
 const composablesList: {name: string}[] = [
@@ -148,6 +149,7 @@ const composablesList: {name: string}[] = [
   {name: 'useModal'},
   {name: 'useModalController'},
   {name: 'useToastController'},
+  {name: 'useToggle'},
   {name: 'usePopoverController'},
 ]
 

diff --git a/apps/docs/src/data/components/alert.data.ts b/apps/docs/src/data/components/alert.data.ts
@@ -1,6 +1,7 @@
 import type {BvnComponentProps} from 'bootstrap-vue-next'
 import type {ComponentReference, PropertyReference} from '../../types'
-import {buildCommonProps, pick} from '../../utils'
+import {buildCommonProps, omit, pick, showHideProps} from '../../utils'
+import {linkProps, linkTo} from '../../utils/link-props'
 
 export default {
   load: (): ComponentReference[] => [
@@ -9,61 +10,116 @@ export default {
       sourcePath: '/BAlert/BAlert.vue',
       props: {
         '': {
-          closeVariant: {
-            type: 'ButtonVariant | null',
-            default: 'secondary',
-            description: 'Applies one of the Bootstrap button variants to the close button',
+          alertClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: 'CSS class (or classes) to add to the alert wrapper element',
+          },
+          bgVariant: {
+            type: 'ColorVariant | null',
+            default: null,
+          },
+          body: {
+            type: 'string',
+            default: undefined,
+            description: 'The text content of the body',
+          },
+          bodyClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: 'CSS class (or classes) to add to the alert body element',
           },
           closeClass: {
             type: 'ClassValue',
             default: undefined,
             description: 'Applies one or more custom classes to the close button',
           },
+          closeContent: {
+            type: 'string',
+            default: undefined,
+            description: 'Sets the text of the close button. The `close` slot takes precedence',
+          },
           closeLabel: {
             type: 'string',
             default: 'Close',
             description: 'Sets the aria-label attribute on the close button',
           },
-          closeContent: {
-            type: 'string',
-            default: undefined,
-            description: 'Sets the text of the close button. The `close` slot takes precedence',
+          closeVariant: {
+            type: 'string | null',
+            default: null,
+            description: 'Color variant for the close button',
           },
           dismissible: {
             type: 'boolean',
             default: false,
             description: 'When set, enables the close button',
           },
-          fade: {
+          headerClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: 'CSS class (or classes) to add to the alert header element',
+          },
+          headerTag: {
+            type: 'string',
+            default: 'div',
+            description: 'Specify the HTML tag to render instead of the default tag for the footer',
+          },
+          id: {
+            type: 'string',
+            default: undefined,
+            description:
+              'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
+          },
+          interval: {
+            type: 'number | requestAnimationFrame',
+            default: 'requestAnimationFrame',
+            description: 'The interval in milliseconds to update the countdown timer',
+          },
+          isStatus: {
             type: 'boolean',
             default: false,
-            description: 'When set to true, enables the fade animation/transition on the component',
+            description:
+              "When set to 'true', makes the alert have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'",
           },
           modelValue: {
             type: 'boolean | number',
             default: false,
             description:
               'Controls the visibility of the alert. A `boolean` value directly controls the visibility. A number starts the countdown timer',
           },
-          immediate: {
-            type: 'boolean',
-            default: true,
+          progressProps: {
+            type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
+            default: undefined,
             description:
-              'Setting this property to `false` will cause a timer to not start immediately upon render. A timer that is not started is not rendered. It must manually be started with `resume()` or `restart()`',
-          },
-          interval: {
-            type: 'number | requestAnimationFrame',
-            default: 'requestAnimationFrame',
-            description: 'The interval in milliseconds to update the countdown timer',
+              'The properties to define the progress bar in the alert. No progress will be shown if left undefined',
           },
           showOnPause: {
             type: 'boolean',
             default: true,
             description:
               'Setting this property to `false` will override the behavior of showing the Alert when the timer is paused',
           },
+          textVariant: {
+            type: 'TextColorVariant | null',
+            default: null,
+          },
+          title: {
+            type: 'string',
+            default: undefined,
+            description: "The alert's title text",
+          },
+          ...omit(showHideProps, ['modelValue']),
           ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']),
-        } satisfies Record<keyof BvnComponentProps['BAlert'], PropertyReference>,
+        } satisfies Record<
+          Exclude<keyof BvnComponentProps['BAlert'], keyof typeof linkProps>,
+          PropertyReference
+        >,
+        'BLink props': {
+          _linkTo: {
+            type: linkTo,
+          },
+          ...linkProps,
+        },
       },
       slots: [
         {

diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts
@@ -98,6 +98,11 @@ export default {
             type: 'Size',
             default: 'md',
           },
+          cancelClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: "CSS class (or classes) to apply to the '.modal-cancel' button",
+          },
           cancelDisabled: {
             type: 'boolean',
             default: false,
@@ -234,6 +239,11 @@ export default {
             default: false,
             description: 'Disables the focus trap feature',
           },
+          okClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: "CSS class (or classes) to apply to the '.modal-ok' button",
+          },
           okDisabled: {
             type: 'boolean',
             default: false,

diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts
@@ -22,7 +22,7 @@ export default {
             type: 'boolean',
             default: false,
           },
-          content: {
+          body: {
             type: 'string',
             default: undefined,
           },

diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
@@ -24,6 +24,26 @@ export default {
             default: undefined,
             description: 'CSS class (or classes) to add to the toast body element',
           },
+          closeClass: {
+            type: 'ClassValue',
+            default: undefined,
+            description: 'Applies one or more custom classes to the close button',
+          },
+          closeContent: {
+            type: 'string',
+            default: undefined,
+            description: 'Sets the text of the close button. The `close` slot takes precedence',
+          },
+          closeLabel: {
+            type: 'string',
+            default: 'Close',
+            description: 'Sets the aria-label attribute on the close button',
+          },
+          closeVariant: {
+            type: 'string | null',
+            default: null,
+            description: 'Color variant for the close button',
+          },
           headerClass: {
             type: 'ClassValue',
             default: undefined,
@@ -94,7 +114,7 @@ export default {
             description: 'CSS class (or classes) to add to the toast wrapper element',
           },
           ...omit(showHideProps, ['modelValue']),
-          ...pick(buildCommonProps(), ['noHoverPause', 'noResumeOnHoverLeave']),
+          ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']),
         } satisfies Record<
           Exclude<keyof BvnComponentProps['BToast'], keyof typeof linkProps>,
           PropertyReference

diff --git a/apps/docs/src/docs/components.md b/apps/docs/src/docs/components.md
@@ -193,7 +193,11 @@ const componentList: {name: string; description: string}[] = [
   {
     name: 'Form Spinbutton',
     description: ''
-  }
+  },
+    {
+      name: 'Tooltip',
+      description: 'Tooltip provides a tooltip behavior over another component',
+    },
 ]
 
 const computedComponentsList = computed(() =>

diff --git a/apps/docs/src/docs/components/tooltip.md b/apps/docs/src/docs/components/tooltip.md
@@ -0,0 +1,83 @@
+# Tooltip
+
+## Tooltip is a wrapper for Popover
+
+Tooltip is a wrapper for Popover, providing a simple way to create tooltips in your application. It uses the same API as Popover, but with some default properties set for tooltips.
+
+## Usage
+
+To use the tooltip, simply wrap your target element with the `<BTooltip>` component and provide the necessary props.
+
+<HighlightCard>
+  <BTooltip>
+    <template #target>
+      <BButton>Hover me</BButton>
+    </template>
+    Hello World!
+  </BTooltip>
+
+<template #html>
+
+```vue
+<template>
+  <BTooltip>
+    <template #target>
+      <BButton>Hover me</BButton>
+    </template>
+    Hello World!
+  </BTooltip>
+</template>
+```
+
+  </template>
+</HighlightCard>
+
+## Differences with Popover
+
+The delay is zero, hideMargin is 0, and it is noninteractive by default. You can override these properties if needed.
+`BTooltip` has an interactive prop, which allows you to set the tooltip to be interactive. This means that the tooltip will remain open when the mouse is over it or focus is in it, allowing users to interact with its content.
+
+<HighlightCard>
+<BTooltip interactive>
+  <template #target>
+    <BButton>Hover me</BButton>
+  </template>
+  <span>{{ count }}</span>
+  <BButton @click="count++">+</BButton>
+</BTooltip>
+
+<template #html>
+
+```vue
+<template>
+  <BTooltip interactive>
+    <template #target>
+      <BButton>Hover me</BButton>
+    </template>
+    <span>{{ count }}</span>
+    <BButton @click="count++">+</BButton>
+  </BTooltip>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue'
+const count = ref(0)
+</script>
+```
+
+</template>
+
+</HighlightCard>
+
+## Additional Notes
+
+Make sure to check the Popover documentation for more details on customization options.
+
+see [Popover](/docs/components/popover)
+
+<script setup lang="ts">
+import {BButton, BTooltip} from 'bootstrap-vue-next'
+import HighlightCard from '../../components/HighlightCard.vue'
+import {ref, onMounted} from 'vue'
+
+const count = ref(0)
+</script>
diff --git a/apps/docs/src/docs/composables.md b/apps/docs/src/docs/composables.md
@@ -36,6 +36,10 @@ const composablesList: {name: string; description: string}[] = [
     name: 'useToastController',
     description: 'Conveniently orchestrate a push notification system by showing or hiding Toasts with our useToastController composable system',
   },
+    {
+      name: 'useToggle',
+      description: 'Conveniently show, hide or toggle components programmatically from anywhere in the app',
+    },
   {
     name: 'usePopoverController',
     description: 'Control popovers and tooltips in your application, enabling the display popover elements with ease',