Merge pull request bootstrap-vue-next#1230 from VividLemon/main

docs: PascalCase

Author: VividLemon

README.md

@@ -14,7 +14,7 @@
   <a href="https://www.npmjs.com/package/bootstrap-vue-next">
     <img src="https://flat.badgen.net/npm/v/bootstrap-vue-next" alt="Current version">
   </a>
-  <a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/">
+  <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">
     <img src="https://flat.badgen.net/badge/bootstrap/5.3.x/563d7c" alt="Bootstrap version">
   </a>
   <a href="https://v3.vuejs.org/">

apps/docs/README.md

@@ -9,7 +9,7 @@ The documentation requires a specific style guide for consistency purposes. You
 5. Code examples should always contain a `<template>` if they require a `<script>` tag.
 6. `<script>` tags should always be `<script setup lang="ts">` in that exact format
 7. Rendered Vue code must be directly _before_ the code example from above. This code example must always be wrapped in a `<BCard>`
-8. Use kebab-case for components. In Vue code or example code
+8. Use PascalCase for components. In Vue code or example code
 9. Headers should be APA Title Case <https://capitalizemytitle.com/style/APA/>
 10. Props should always be kebab case, ex modelValue => model-value
 11. Unordered lists should always use `-`, not any alternative (ie never `*`, `+`)

apps/docs/src/data/components/accordion.data.ts

@@ -20,7 +20,7 @@ export default {
           prop: 'id',
           type: 'string',
           description:
-            'The Id to be injected to accordian items and used to in b-collaspe for state managment',
+            'The Id to be injected to accordian items and used to in BCollapse for state managment',
         },
       ],
       emits: [],

apps/docs/src/docs/components/accordion.md

@@ -20,7 +20,7 @@ The `<BAccordionItem>` uses the `<BCollapse>` component internally to make it co
 
 <BAlert variant="info" :model-value="true" class="my-5">
 
-The animation effect of this component is dependent on the prefers-reduced-motion media query. See the [reduced motion section of our accessibility documentation](https://getbootstrap.com/docs/5.0/getting-started/accessibility/#reduced-motion).
+The animation effect of this component is dependent on the prefers-reduced-motion media query. See the [reduced motion section of our accessibility documentation](https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion).
 
 </BAlert>
 

apps/docs/src/docs/components/button.md

@@ -200,7 +200,7 @@ Create responsive stacks of full-width, “block buttons” like those in Bootst
   </template>
 </HighlightCard>
 
-**Note:** Bootstrap 5 no long supports the `.btn-block` class, so it's removed. Use bootstrap 5's utility classes to get the same effect. [See](https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons).
+**Note:** Bootstrap 5 no long supports the `.btn-block` class, so it's removed. Use bootstrap 5's utility classes to get the same effect. [See](https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons).
 
 ## Pill style
 
@@ -331,12 +331,7 @@ To create a button that can be toggled between active and non-active states, use
   </p>
   <h5>In a button group</h5>
   <BButtonGroup size="sm">
-    <BButton
-      v-for="(btn, idx) in buttons"
-      :key="idx"
-      v-model:pressed="btn.state"
-      variant="primary"
-    >
+    <BButton v-for="(btn, idx) in buttons" :key="idx" v-model:pressed="btn.state" variant="primary">
       {{ btn.caption }}
     </BButton>
   </BButtonGroup>

apps/docs/src/docs/components/card.md

@@ -76,8 +76,8 @@ By default, the `<BCard>` content is automatically placed in a `<BCardBody>` sec
 <HighlightCard>
   <BCard class="text-center">
     <div class="bg-secondary text-light">
-      This is some content within the default <samp>&lt;b-card-body&gt;</samp> block of the
-      <samp>&lt;b-card&gt;</samp> component. Notice the padding between the card's border and this
+      This is some content within the default <samp>&lt;BCardBody&gt;</samp> block of the
+      <samp>&lt;BCard&gt;</samp> component. Notice the padding between the card's border and this
       gray <samp>&lt;div&gt;</samp>.
     </div>
   </BCard>
@@ -86,8 +86,8 @@ By default, the `<BCard>` content is automatically placed in a `<BCardBody>` sec
 ```vue-html
 <BCard class="text-center">
   <div class="bg-secondary text-light">
-    This is some content within the default <samp>&lt;b-card-body&gt;</samp> block of the
-    <samp>&lt;b-card&gt;</samp> component. Notice the padding between the card's border and this
+    This is some content within the default <samp>&lt;BCardBody&gt;</samp> block of the
+    <samp>&lt;BCard&gt;</samp> component. Notice the padding between the card's border and this
     gray <samp>&lt;div&gt;</samp>.
   </div>
 </BCard>
@@ -102,7 +102,7 @@ on the `<BCard>`.
 <HighlightCard>
   <BCard no-body class="text-center">
     <div class="bg-secondary text-light">
-      This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
+      This is some content without the default <samp>&lt;BCardBody&gt;</samp> section. Notice the
       lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
     </div>
   </BCard>
@@ -111,7 +111,7 @@ on the `<BCard>`.
 ```vue-html
 <BCard no-body class="text-center">
   <div class="bg-secondary text-light">
-    This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
+    This is some content without the default <samp>&lt;BCardBody&gt;</samp> section. Notice the
     lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
   </div>
 </BCard>
@@ -284,7 +284,7 @@ Place the image in the background of the card by setting the boolean prop `overl
 
 #### Lazy loaded images
 
-`<BCardImgLazy>` has been removed in favor of using a standalone prop on b-img. Use prop `lazy` on b-img and it will automatically use the browsers built in lazy-loading features that are supported natively on all major browsers.
+`<BCardImgLazy>` has been removed in favor of using a standalone prop on BImg. Use prop `lazy` on BImg and it will automatically use the browsers built in lazy-loading features that are supported natively on all major browsers.
 
 ### Header and footer
 

apps/docs/src/docs/components/form-group.md

@@ -381,7 +381,7 @@ the invalid feedback to show when using one of the above-mentioned form controls
 
 ## Floating labels
 
-BFormGroup supports the new and fancy [Floating labels](https://getbootstrap.com/docs/5.0/forms/floating-labels/) feature of Bootstrap 5.
+BFormGroup supports the new and fancy [Floating labels](https://getbootstrap.com/docs/5.3/forms/floating-labels/) feature of Bootstrap 5.
 
 You can make a floating label by setting the property `floating` to true and specify a placeholder on the `<BFormInput>`.
 

apps/docs/src/docs/components/form.md

@@ -93,12 +93,7 @@ supported components, form layout, and more.
     </BFormGroup>
 
     <BFormGroup id="input-group-2" label="Your Name:" label-for="input-2">
-      <BFormInput
-        id="input-2"
-        v-model="form.name"
-        placeholder="Enter name"
-        required
-      ></BFormInput>
+      <BFormInput id="input-2" v-model="form.name" placeholder="Enter name" required></BFormInput>
     </BFormGroup>
     <BFormGroup id="input-group-3" label="Food:" label-for="input-3">
       <BFormSelect id="input-3" v-model="form.food" :options="foods" required></BFormSelect>
@@ -156,7 +151,7 @@ const onReset = (event) => {
 
 ## Inline form
 
-Bootstrap 5 has dropped form-specific layout classes for the grid system. See [this](https://getbootstrap.com/docs/5.0/migration/#forms).
+Bootstrap 5 has dropped form-specific layout classes for the grid system. See [this](https://getbootstrap.com/docs/5.3/migration/#forms).
 
 To create horizontal forms with the grid by add the `.row` class to form groups and use the `.col-_-_` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well, so they’re vertically centered with their associated form controls.
 
@@ -439,7 +434,7 @@ of three contextual states:
 - `null` Displays no validation state (neither valid nor invalid)
 
 Refer to the
-[Bootstrap v5 Form Validation Documentation](https://getbootstrap.com/docs/5.0/forms/validation/)
+[Bootstrap v5 Form Validation Documentation](https://getbootstrap.com/docs/5.3/forms/validation/)
 for details on the Bootstrap v5 validation states.
 
 <ComponentReference :data="data" />

apps/docs/src/docs/components/link.md

@@ -29,7 +29,7 @@ By defaut links with no options will default to # location.
 External Links can be specified with the `href` prop.
 
 <HighlightCard>
-  <BLink href="https://getbootstrap.com/docs/5.0">
+  <BLink href="https://getbootstrap.com/docs/5.3">
     External Link to Bootstrap
   </BLink>
   <BLink to="sample">
@@ -41,7 +41,7 @@ External Links can be specified with the `href` prop.
   <template #html>
 
 ```vue-html
-<BLink href="https://getbootstrap.com/docs/5.0">
+<BLink href="https://getbootstrap.com/docs/5.3">
   External Link to Bootstrap
 </BLink>
 
@@ -62,20 +62,20 @@ External Links can be specified with the `href` prop.
 External Links can be specified with the `href` prop.
 
 <HighlightCard>
-  <BLink class="btn btn-primary me-2" href="https://getbootstrap.com/docs/5.0">
+  <BLink class="btn btn-primary me-2" href="https://getbootstrap.com/docs/5.3">
       External Link to Bootstrap
   </BLink>
-  <BLink class="btn btn-primary disabled" href="https://getbootstrap.com/docs/5.0">
+  <BLink class="btn btn-primary disabled" href="https://getbootstrap.com/docs/5.3">
       Disabled Link
   </BLink>
   <template #html>
 
 ```vue-html
-<BLink class="btn btn-primary m-2" href="https://getbootstrap.com/docs/5.0">
+<BLink class="btn btn-primary m-2" href="https://getbootstrap.com/docs/5.3">
   External Link to Bootstrap
 </BLink>
 
-<BLink class="btn btn-primary disabled m-2" href="https://getbootstrap.com/docs/5.0">
+<BLink class="btn btn-primary disabled m-2" href="https://getbootstrap.com/docs/5.3">
   Disabled Link
 </BLink>
 ```

apps/docs/src/docs/components/spinner.md

@@ -110,7 +110,7 @@ Spinners in Bootstrap are built with `rem`s, currentColor, and `display: inline-
 
 ### Margin
 
-Use [margin utilities](https://getbootstrap.com/docs/5.0/utilities/spacing/) like `.m-5` for easy spacing.
+Use [margin utilities](https://getbootstrap.com/docs/5.3/utilities/spacing/) like `.m-5` for easy spacing.
 
 <HighlightCard>
   <BSpinner class="m-5"></BSpinner>
@@ -125,7 +125,7 @@ Use [margin utilities](https://getbootstrap.com/docs/5.0/utilities/spacing/) lik
 
 ### Placement
 
-Use [flexbox utilities](https://getbootstrap.com/docs/5.0/utilities/flex/), [float utilities](https://getbootstrap.com/docs/5.0/utilities/float/), or [text alignment](https://getbootstrap.com/docs/5.0/utilities/text/) utilities to place spinners exactly where you need them in any situation.
+Use [flexbox utilities](https://getbootstrap.com/docs/5.3/utilities/flex/), [float utilities](https://getbootstrap.com/docs/5.3/utilities/float/), or [text alignment](https://getbootstrap.com/docs/5.3/utilities/text/) utilities to place spinners exactly where you need them in any situation.
 
 #### Flex
 

apps/docs/src/docs/composables.md

@@ -18,7 +18,7 @@ const routeLocation = (name: string): string => withBase(`/docs/composables/${na
 const composablesList: {name: string; description: string}[] = [
   {
     name: 'useBreadcrumb',
-    description: 'A global breadcrumb system to pair with the b-breadcrumb component'
+    description: 'A global breadcrumb system to pair with the BBreadcrumb component'
   },
   {
     name: 'useColorMode',

apps/docs/src/docs/composables/useBreadcrumb.md

@@ -10,7 +10,7 @@
 
 <div class="lead mb-5">
 
-'useBreadcrumb' is a helper utility for the 'b-breadcrumb' component. It provides a **globally** changable context so you can modify a breadcrumb. It should be noted that the breacrumb component will automatically use the global context by default. 'useBreadcrumb' is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over 'useBreadcrumb'.
+'useBreadcrumb' is a helper utility for the 'BBreadcrumb' component. It provides a **globally** changable context so you can modify a breadcrumb. It should be noted that the breacrumb component will automatically use the global context by default. 'useBreadcrumb' is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over 'useBreadcrumb'.
 
 </div>