Merge remote-tracking branch 'upstream/main' into fix-show-hide-events

* upstream/main: (23 commits) feat(BInput): Alias BFormInput to BInput fix(nuxt): dont teleport everything to #teleports -- selectively teleport based on body fixes bootstrap-vue-next#1898 chore: release main feat(nuxt): allow passthrough options to createBootstrap plugin chore: release main (bootstrap-vue-next#1894) feat: implmenet a use defaults system WIP fixes bootstrap-vue-next#1607 (bootstrap-vue-next#1889) docs(BCheckBox*): Small changes to get documentation to parity (bootstrap-vue-next#1873) docs: Add component reference link in the page table of contents sidebar fixed BTableLite item _showDetails BTable delete selection when primary-key chore: release main feat(BTable): add change event -- replaces bv `modelValue` see bootstrap-vue-next#1775 (comment) chore: release main fix(BTable): selectedItems not clearing values properly fixes bootstrap-vue-next#1878 (bootstrap-vue-next#1879) chore: release main (bootstrap-vue-next#1874) fix(BTable): Pass through original records to slots in most circumstances (bootstrap-vue-next#1869) chore: release main (bootstrap-vue-next#1867) feat(BTable): Allow dot in sortby key fix: update dependencies to fix a bug in vue compiler (bootstrap-vue-next#1866) chore: release main (bootstrap-vue-next#1859) ...
xvaara · May 22, 2024 · c1ec174 · c1ec174
2 parents 34b769a + 6ceeac5
commit c1ec174
Show file tree

Hide file tree

Showing 207 changed files with 4,626 additions and 4,002 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.17.0",
-  "packages/nuxt": "0.17.0"
+  "packages/bootstrap-vue-next": "0.18.1",
+  "packages/nuxt": "0.18.1"
 }
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,10 +13,10 @@
   },
   "devDependencies": {
     "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/simple-icons": "^1.1.99",
-    "@rushstack/eslint-patch": "^1.10.2",
+    "@iconify-json/simple-icons": "^1.1.101",
+    "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.12",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
@@ -26,12 +26,12 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-define-config": "^2.1.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "eslint-plugin-vue": "^9.26.0",
     "prettier": "^3.2.5",
     "typescript": "^5.4.5",
-    "unplugin-icons": "^0.18.5",
-    "vitepress": "1.1.0",
-    "vue": "^3.4.23"
+    "unplugin-icons": "^0.19.0",
+    "vitepress": "1.1.4",
+    "vue": "^3.4.27"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --cache --fix",

diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue
@@ -2,7 +2,7 @@
   <BContainer fluid class="p-0 component-reference">
     <BRow>
       <BCol>
-        <h2>Component Reference</h2>
+        <h2 id="component-reference">Component Reference</h2>
       </BCol>
     </BRow>
     <BRow>

diff --git a/apps/docs/src/components/ComponentSidebar.vue b/apps/docs/src/components/ComponentSidebar.vue
@@ -0,0 +1,20 @@
+<template>
+  <ContentsSidebar>
+    <template #default>
+      <slot />
+    </template>
+    <template #after>
+      <nav class="table-of-contents">
+        <ul>
+          <li>
+            <a href="#component-reference">Component Reference</a>
+          </li>
+        </ul>
+      </nav>
+    </template>
+  </ContentsSidebar>
+</template>
+
+<script setup lang="ts">
+import ContentsSidebar from './ContentsSidebar.vue'
+</script>
diff --git a/apps/docs/src/components/ContentsSidebar.vue b/apps/docs/src/components/ContentsSidebar.vue
@@ -0,0 +1,5 @@
+<template>
+  <ClientOnly>
+    <Teleport to=".bd-toc"><slot /><slot name="after" /></Teleport>
+  </ClientOnly>
+</template>
diff --git a/apps/docs/src/components/TableOfContentsNav.vue b/apps/docs/src/components/TableOfContentsNav.vue
@@ -204,6 +204,21 @@ const groupComputedList = computed(() => [
     icon: () => CodeSlashIcon,
     children: directivesComputedList.value,
   },
+  {
+    label: 'Configurations',
+    uri: '/docs/configurations',
+    icon: () => GearIcon,
+    children: [
+      {
+        name: 'Global Options',
+        route: withBase('/docs/configurations/global-options'),
+      },
+      {
+        name: 'Component Aliasing',
+        route: withBase('/docs/configurations/component-aliasing'),
+      },
+    ],
+  },
 ])
 </script>
 

diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -40,7 +40,7 @@ export default {
         {
           prop: 'buttonVariant',
           type: 'ButtonVariant | null',
-          default: null,
+          default: 'secondary',
           description: "Applies one of Bootstrap's theme colors when in `button` mode",
         },
         {
@@ -83,7 +83,7 @@ export default {
           type: 'CheckboxValue | readonly CheckboxValue[]',
           default: undefined,
           description:
-            'The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model',
+            'The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model. Looking for `value` - use `modelValue` instead.',
         },
         {
           prop: 'name',
@@ -150,7 +150,7 @@ export default {
             {
               arg: 'checked',
               description:
-                'Value of the checkbox.  Value will be an array for grouped checkboxes or a single value for standalone checkboxes.',
+                'Value of the checkbox. Value will be an array for grouped checkboxes or a single value for standalone checkboxes. Looking for the `input` or `change` event - use `update:modelValue` instead.',
               type: 'CheckboxValue | readonly CheckboxValue[]',
             },
           ],
@@ -245,7 +245,7 @@ export default {
           type: 'readonly CheckboxValue[]',
           default: '() => []',
           description:
-            'The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes',
+            'The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes. . Looking for `value` - use `modelValue` instead.',
         },
         {
           prop: 'name',
@@ -324,7 +324,8 @@ export default {
       emits: [
         {
           event: 'update:modelValue',
-          description: 'Emitted when the selected value(s) are changed',
+          description:
+            'Emitted when the selected value(s) are changed. . Looking for the `input` or `change` event - use `update:modelValue` instead.',
           args: [
             {
               arg: 'update:modelValue',

diff --git a/apps/docs/src/docs.md b/apps/docs/src/docs.md
@@ -14,21 +14,13 @@ Get started with BootstrapVueNext and Bootstrap `v5`, the world’s most popular
 
 </div>
 
-<BAlert variant="danger" :model-value="true" class="my-5">
-
-NOT PRODUCTION READY
-
-This project is still in **alpha version**. There is a lot of work to do and the documentation may be out of date, if you want to contribute you can use it and submit an [issue](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues) or even better, a [pull request](https://github.com/bootstrap-vue-next/bootstrap-vue-next/pulls) 😄
-
-</BAlert>
-
 ## Why BootstrapVueNext?
 
 BootstrapVueNext is an attempt to have the [BootstrapVue](https://bootstrap-vue.org/) components in Vue3, Bootstrap 5, and typescript. Another goal is to have the components written in a simple and readable way for a better developer experience.
 
 ## Contribute and Support 🙌
 
-This project is still in **alpha version** so there is a lot of work to do. If you want to contribute you can:
+This project is in the **late stages of alpha version**. While most features are functioning as expected, you may still encounter some issues. Your contributions at this stage can be particularly impactful in shaping the final product. If you're interested in contributing, here's how you can help:
 
 - submit an [issue](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues)
 - or better, a [pull request](https://github.com/bootstrap-vue-next/bootstrap-vue-next/pulls)

diff --git a/apps/docs/src/docs/components/accordion.md b/apps/docs/src/docs/components/accordion.md
@@ -1,12 +1,10 @@
 # Accordion
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -171,5 +169,6 @@ Add `free` property to make accordion items stay open when another item is opene
 import {data} from '../../data/components/accordion.data'
 import {BAccordion, BAccordionItem, BAlert} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 </script>
diff --git a/apps/docs/src/docs/components/alert.md b/apps/docs/src/docs/components/alert.md
@@ -1,12 +1,10 @@
 # Alert
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -345,6 +343,7 @@ const stop = () => myAlert.value?.stop()
 import {data} from '../../data/components/alert.data'
 import {BAlert, BProgress, BButton, BButtonGroup} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 import {ref, computed} from 'vue'
 

diff --git a/apps/docs/src/docs/components/avatar.md b/apps/docs/src/docs/components/avatar.md
@@ -1,12 +1,10 @@
 # Avatar
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -763,6 +761,7 @@ Avatars are based upon `BBadge` and `BButton` components, and as such, rely upon
 import {data} from '../../data/components/avatar.data'
 import {BAvatar, BAvatarGroup, BListGroup, BBadge, BListGroupItem} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 
 const alertEvent = (event: PointerEvent) => {

diff --git a/apps/docs/src/docs/components/badge.md b/apps/docs/src/docs/components/badge.md
@@ -1,12 +1,10 @@
 # Badge
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -215,5 +213,6 @@ Quickly provide actionable badges with ~~hover~~ and ~~focus~~ states by specify
 import {data} from '../../data/components/badge.data'
 import {BButton, BBadge} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 </script>
diff --git a/apps/docs/src/docs/components/breadcrumb.md b/apps/docs/src/docs/components/breadcrumb.md
@@ -1,12 +1,10 @@
 # Breadcrumb
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -138,6 +136,7 @@ import {data} from '../../data/components/breadcrumb.data'
 import {ref} from 'vue';
 import {BBreadcrumbItem, BBreadcrumb} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 import type {BreadcrumbItem} from 'bootstrap-vue-next'
 

diff --git a/apps/docs/src/docs/components/button-group.md b/apps/docs/src/docs/components/button-group.md
@@ -1,12 +1,10 @@
 # Button Group
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -188,5 +186,6 @@ toolbars containing button groups and input groups.
 import {data} from '../../data/components/buttonGroup.data'
 import {BDropdownItem, BDropdownDivider, BButton, BButtonGroup, BDropdown} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 </script>
diff --git a/apps/docs/src/docs/components/button-toolbar.md b/apps/docs/src/docs/components/button-toolbar.md
@@ -1,12 +1,10 @@
 # Button Toolbar
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -265,5 +263,6 @@ input groups and dropdowns, by setting the prop `justify`.
 import {data} from '../../data/components/buttonToolbar.data'
 import {BButtonGroup, BDropdown, BInputGroup, BDropdownItem, BButton, BButtonToolbar, BFormInput} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 </script>
diff --git a/apps/docs/src/docs/components/button.md b/apps/docs/src/docs/components/button.md
@@ -1,12 +1,10 @@
 # Button
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -380,6 +378,7 @@ import {data} from '../../data/components/button.data'
 import {ref, computed} from 'vue'
 import {BButtonGroup, BButton} from 'bootstrap-vue-next'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 
 const buttonToggle = ref(false);

diff --git a/apps/docs/src/docs/components/card.md b/apps/docs/src/docs/components/card.md
@@ -1,12 +1,10 @@
 # Card
 
-<ClientOnly>
-  <Teleport to=".bd-toc">
+<ComponentSidebar>
 
 [[toc]]
 
-  </Teleport>
-</ClientOnly>
+</ComponentSidebar>
 
 <div class="lead mb-5">
 
@@ -1146,6 +1144,7 @@ set them to display: inline-block as column-break-inside: avoid is not a bulletp
 <script setup lang="ts">
 import {data} from '../../data/components/card.data'
 import ComponentReference from '../../components/ComponentReference.vue'
+import ComponentSidebar from '../../components/ComponentSidebar.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
 import {
   BCard,