bootstrap-vue-next · VividLemon · Nov 15, 2024 · Oct 28, 2024 · Oct 28, 2024 · Oct 31, 2024
diff --git a/apps/docs/src/data/components/card.data.ts b/apps/docs/src/data/components/card.data.ts
@@ -70,15 +70,13 @@ export default {
               'footerBgVariant',
               'footerBorderVariant',
               'footerClass',
-              'footerHtml',
               'footerTag',
               'footerTextVariant',
               'footerVariant',
               'header',
               'headerBgVariant',
               'headerBorderVariant',
               'headerClass',
-              'headerHtml',
               'headerTag',
               'headerTextVariant',
               'headerVariant',
@@ -163,12 +161,6 @@ export default {
       emits: [],
       props: {
         '': {
-          html: {
-            type: 'string',
-            default: undefined,
-            description:
-              'HTML content to place in the card footer, takes precednce over text prop and default slot',
-          },
           text: {
             type: 'string',
             default: undefined,
@@ -222,12 +214,6 @@ export default {
       emits: [],
       props: {
         '': {
-          html: {
-            type: 'string',
-            default: undefined,
-            description:
-              'HTML content to place in the card header, takes precednce over text prop and default slot',
-          },
           text: {
             type: 'string',
             default: undefined,

diff --git a/apps/docs/src/data/components/carousel.data.ts b/apps/docs/src/data/components/carousel.data.ts
@@ -186,11 +186,6 @@ export default {
             default: undefined,
             description: 'Text content to place in the caption',
           },
-          captionHtml: {
-            type: 'string',
-            default: undefined,
-            description: 'HTML string content to place in the caption',
-          },
           captionTag: {
             type: 'string',
             default: 'h3',
@@ -253,11 +248,6 @@ export default {
             default: undefined,
             description: 'Text content to place in the text of the slide',
           },
-          textHtml: {
-            type: 'string',
-            default: undefined,
-            description: 'HTML string content to place in the text of the slide',
-          },
           textTag: {
             type: 'string',
             default: 'p',

diff --git a/apps/docs/src/data/components/form.data.ts b/apps/docs/src/data/components/form.data.ts
@@ -45,7 +45,7 @@ export default {
                   'Array of items to render in the component. Note that BFormDatalist only supports Options, not OptionsGroups',
               },
             }),
-            ['disabledField', 'htmlField', 'id', 'options', 'textField', 'valueField']
+            ['disabledField', 'id', 'options', 'textField', 'valueField']
           ),
         } satisfies Record<keyof BvnComponentProps['BFormDatalist'], PropertyReference>,
       },

diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -18,7 +18,7 @@ export default {
             type: 'boolean',
             default: false,
             description:
-              "When set, renders the checkbox as part of a button group (it doesn't enclose the checkbox and label with a div). It is not necessary to set this to true if this is part of a RadioGroup as it is handled internally",
+              "When set, renders the checkbox as part of a button group (it doesn't enclose the checkbox and label with a div). It is not necessary to set this to true if this is part of a CheckboxGroup as it is handled internally",
           },
           buttonVariant: {
             type: 'ButtonVariant | null',
@@ -170,7 +170,6 @@ export default {
             'disabled',
             'disabledField',
             'form',
-            'htmlField',
             'id',
             'name',
             'plain',
@@ -208,6 +207,28 @@ export default {
             'Slot to place for checkboxes so that they appear before checks generated from options prop',
           scope: [],
         },
+        {
+          name: 'option',
+          description:
+            'Use this slot to have finer control over the content render inside each checkbox button.',
+          scope: [
+            {
+              prop: 'value',
+              type: 'string | number | undefined',
+              description: 'The value of the checkbox button',
+            },
+            {
+              prop: 'disabled',
+              type: 'boolean | undefined',
+              description: 'Whether the checkbox button is disabled',
+            },
+            {
+              prop: 'text',
+              type: 'string | undefined',
+              description: 'The text to display for the checkbox button',
+            },
+          ],
+        },
       ],
     },
   ],

diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
@@ -126,7 +126,6 @@ export default {
             'disabled',
             'disabledField',
             'form',
-            'htmlField',
             'id',
             'name',
             'options',
@@ -165,6 +164,28 @@ export default {
             'Slot to place for radio buttons so that they appear before radios generated from options prop',
           scope: [],
         },
+        {
+          name: 'option',
+          description:
+            'Use this slot to have finer control over the content render inside each radio button',
+          scope: [
+            {
+              prop: 'value',
+              type: 'string | number | undefined',
+              description: 'The value of the radio button',
+            },
+            {
+              prop: 'disabled',
+              type: 'boolean | undefined',
+              description: 'Whether the radio button is disabled',
+            },
+            {
+              prop: 'text',
+              type: 'string | undefined',
+              description: 'The text to display for the radio button',
+            },
+          ],
+        },
       ],
     },
   ],

diff --git a/apps/docs/src/data/components/formSelect.data.ts b/apps/docs/src/data/components/formSelect.data.ts
@@ -45,7 +45,6 @@ export default {
               'disabled',
               'disabledField',
               'form',
-              'htmlField',
               'id',
               'name',
               'options',
@@ -124,7 +123,7 @@ export default {
             buildCommonProps({
               options: {type: 'readonly (unknown | Record<string, unknown>)[]'},
             }),
-            ['disabledField', 'htmlField', 'options', 'textField', 'valueField']
+            ['disabledField', 'options', 'textField', 'valueField']
           ),
         } satisfies Record<keyof BvnComponentProps['BFormSelectOptionGroup'], PropertyReference>,
       },

diff --git a/apps/docs/src/data/components/inputGroup.data.ts b/apps/docs/src/data/components/inputGroup.data.ts
@@ -14,23 +14,11 @@ export default {
             default: undefined,
             description: 'Text to append to the input group',
           },
-          appendHtml: {
-            type: 'string',
-            default: undefined,
-            description:
-              "HTML string to append to the input group. Has precedence over 'append' prop",
-          },
           prepend: {
             type: 'string',
             default: undefined,
             description: 'Text to prepend to the input group',
           },
-          prependHtml: {
-            type: 'string',
-            default: undefined,
-            description:
-              "HTML string to prepend to the input group. Has precedence over 'prepend' prop",
-          },
           ...pick(buildCommonProps(buildCommonProps()), ['id', 'size', 'tag']),
         } satisfies Record<keyof BvnComponentProps['BInputGroup'], PropertyReference>,
       },

diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts
@@ -36,10 +36,6 @@ export default {
             type: 'Middleware[]',
             default: undefined,
           },
-          html: {
-            type: 'boolean',
-            default: false,
-          },
           id: {
             type: 'string',
             default: undefined,

diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts
@@ -80,10 +80,6 @@ export default {
             type: 'string',
             default: undefined,
           },
-          labelHtml: {
-            type: 'string',
-            default: undefined,
-          },
           max: {
             type: 'Numberish',
             default: undefined,

diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
@@ -93,10 +93,6 @@ export default {
         type: 'string',
         default: undefined,
       },
-      captionHtml: {
-        type: 'string',
-        default: undefined,
-      },
       d
10000
etailsTdClass: {
         type: 'ClassValue',
         default: undefined,

diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
@@ -100,7 +100,7 @@ export default {
             default: undefined,
           },
           progressProps: {
-            type: "Omit<BProgressBarProps, 'label' | 'labelHtml' | 'max' | 'value'>",
+            type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
             default: undefined,
             description:
               'The properties to define the progress bar in the toast. No progress will be shown if left undefined',

diff --git a/apps/docs/src/docs/components/demo/CarouselCaptions.vue b/apps/docs/src/docs/components/demo/CarouselCaptions.vue
@@ -2,12 +2,8 @@
   <!-- #region template -->
   <BCarousel controls indicators>
     <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=7" caption="First Caption" />
-    <BCarouselSlide
-      img-src="https://picsum.photos/1024/480/?image=8"
-      caption-html="<h1>Second Caption</h1>"
-    />
     <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=9">
-      <template #caption> Third Caption </template>
+      <template #caption> Second Caption </template>
     </BCarouselSlide>
   </BCarousel>
   <!-- #endregion template -->

diff --git a/apps/docs/src/docs/components/form-group.md b/apps/docs/src/docs/components/form-group.md
@@ -78,6 +78,30 @@ You can also apply additional classes to the label via the `label-class` prop, s
 padding and text alignment utility classes. The `label-class` prop accepts either a string or array
 of strings.
 
+### Automatic Inheriting of id
+
+The `BFormGroup` component automatically inherits the id of its child input components, such as BFormInput and BFormTextarea. This functionality ensures that the label element's for attribute is correctly set to match the id of the input component, providing proper association between the label and the input field.
+
+<HighlightCard>
+  <BFormGroup
+    label="Enter your name"
+  >
+    <BFormInput id="this-id-will-be-automatically-applied-to-the-label" />
+  </BFormGroup>
+
+<template #html>
+
+```vue-html
+<BFormGroup
+  label="Enter your name"
+  >
+  <BFormInput id="this-id-will-be-automatically-applied-to-the-label" />
+</BFormGroup>
+```
+
+  </template>
+</HighlightCard>
+
 ### Horizontal layout
 
 By default, the label appears above the input element(s), but you may optionally render horizontal

diff --git a/apps/docs/src/docs/components/progress.md b/apps/docs/src/docs/components/progress.md
@@ -94,7 +94,9 @@ Need more control over the label? Provide your own label by using the default sl
     </BProgress>
     <h5 class="mt-3">Custom label via property (HTML support)</h5>
     <BProgress :max="50">
-      <BProgressBar :value="33.333333" :label-html="`<del>${33.333333}</del>`" />
+      <BProgressBar :value="33.333333">
+        <del>{{33.333333}}</del>
+      </BProgressBar>
     </BProgress>
   </BCard>
   <template #html>
@@ -117,7 +119,9 @@ Need more control over the label? Provide your own label by using the default sl
 
 <h5 class="mt-3">Custom label via property (HTML support)</h5>
 <BProgress :max="50">
-  <BProgressBar :value="33.333333" :label-html="`<del>${33.333333}</del>`" />
+  <BProgressBar :value="33.333333">
+    <del>{{33.333333}}</del>
+  </BProgressBar>
 </BProgress>
 ```
 

diff --git a/apps/playground/src/components/Comps/TFormCheckbox.vue b/apps/playground/src/components/Comps/TFormCheckbox.vue
@@ -167,7 +167,6 @@ const checkboxes = reactive({
     {text: 'Apple', value: 'apple'},
     {text: 'Pineapple', value: 'pineapple'},
     {text: 'Object', value: {foo: 1}},
-    {html: '<b>Grape</b> (html content)', value: 'grape'},
   ],
 })
 

diff --git a/apps/playground/src/components/Comps/TFormCheckboxGroup.vue b/apps/playground/src/components/Comps/TFormCheckboxGroup.vue
@@ -60,7 +60,6 @@ const checkboxes = reactive({
     {text: 'Apple', value: 'apple'},
     {text: 'Pineapple', value: 'pineapple'},
     {text: 'Object', value: {foo: 1}},
-    {html: '<b>Grape</b> (html content)', value: 'grape'},
   ],
 })
 </script>
diff --git a/apps/playground/src/components/Comps/TFormSelect.vue b/apps/playground/src/components/Comps/TFormSelect.vue
@@ -63,7 +63,6 @@ const formSelectOptions = [
   {value: null, text: 'Please select an option'},
   {text: 'Item 1', value: 'first'},
   {text: 'Item 2', value: 'second'},
-  {html: '<b>Item</b> 3', value: 'third', disabled: true},
   {text: 'Item 4'},
   {text: 'Item 5', value: {foo: 'item 5', baz: true}},
   {text: 'Item 6', value: {foo: 'item 6', baz: false}},

diff --git a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
@@ -27,7 +27,7 @@ import BTransition from '../BTransition.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BButton from '../BButton/BButton.vue'
 import type {BAlertProps} from '../../types/ComponentProps'
-import {computed, ref, watchEffect} from 'vue'
+import {computed, useTemplateRef, watchEffect} from 'vue'
 import {useCountdown} from '../../composables/useCountdown'
 import {useDefaults} from '../../composables/useDefaults'
 import {isEmptySlot} from '../../utils/dom'
@@ -63,7 +63,7 @@ const slots = defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
 
 const modelValue = defineModel<Exclude<BAlertProps['modelValue'], undefined>>({default: false})
 

diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import BSpinner from '../BSpinner/BSpinner.vue'
 import {useBLinkHelper} from '../../composables/useBLinkHelper'
 import BLink from '../BLink/BLink.vue'
@@ -97,7 +97,7 @@ const emit = defineEmits<{
   click: [value: MouseEvent]
 }>()
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef<HTMLElement | null>('element')
 
 const pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})