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

fix(BForm): expose the form so you can programatically submit fixes b…

Author: VividLemon

packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue

@@ -159,7 +159,12 @@ watch(isHovering, (newValue) => {
 
 onBeforeUnmount(stop)
 
-defineExpose({pause, resume, restart, stop})
+defineExpose({
+  pause,
+  resume,
+  restart,
+  stop,
+})
 </script>
 
 <style lang="scss" scoped>

packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue

@@ -315,7 +315,12 @@ watch(isHovering, (newValue) => {
   onMouseLeave()
 })
 
-defineExpose({pause, resume, prev, next})
+defineExpose({
+  pause,
+  resume,
+  prev,
+  next,
+})
 
 provide(carouselInjectionKey, {
   background: toRef(() => props.background),

packages/bootstrap-vue-next/src/components/BForm/BForm.vue

@@ -1,6 +1,7 @@
 <template>
   <form
     :id="id"
+    ref="element"
     :novalidate="novalidateBoolean"
     :class="computedClasses"
     @submit.prevent="submitted"
@@ -12,7 +13,7 @@
 <script setup lang="ts">
 import type {BFormProps} from '../../types'
 import {useBooleanish} from '../../composables'
-import {computed} from 'vue'
+import {computed, ref} from 'vue'
 
 const props = withDefaults(defineProps<BFormProps>(), {
   floating: false,
@@ -25,6 +26,8 @@ const emit = defineEmits<{
   submit: [value: Event]
 }>()
 
+const element = ref<HTMLFormElement | null>(null)
+
 const floatingBoolean = useBooleanish(() => props.floating)
 const novalidateBoolean = useBooleanish(() => props.novalidate)
 const validatedBoolean = useBooleanish(() => props.validated)
@@ -42,4 +45,8 @@ const computedClasses = computed(() => ({
 const submitted = (e: Event) => {
   emit('submit', e)
 }
+
+defineExpose({
+  element,
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue

@@ -256,12 +256,12 @@ const inputClasses = getInputClasses(classesObject)
 const labelClasses = getLabelClasses(classesObject)
 
 defineExpose({
+  element: input,
   focus: () => {
     focused.value = true
   },
   blur: () => {
     focused.value = false
   },
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue

@@ -154,13 +154,13 @@ watch(modelValue, (newValue) => {
 })
 
 defineExpose({
+  element: input,
   focus: () => {
     focused.value = true
   },
   blur: () => {
     focused.value = false
   },
   reset,
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue

@@ -112,9 +112,9 @@ const computedClasses = computed(() => {
 })
 
 defineExpose({
+  element: input,
   focus,
   blur,
-  input,
 })
 
 // const highlight = () => {

packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue

@@ -168,12 +168,12 @@ const inputClasses = getInputClasses(classesObject)
 const labelClasses = getLabelClasses(classesObject)
 
 defineExpose({
+  element: input,
   focus: () => {
     focused.value = true
   },
   blur: () => {
     focused.value = false
   },
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue

@@ -159,12 +159,12 @@ const localValue = computed({
 })
 
 defineExpose({
+  element: input,
   focus: () => {
     focused.value = true
   },
   blur: () => {
     focused.value = false
   },
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue

@@ -455,12 +455,12 @@ const removeTag = (tag?: string): void => {
 
 // TODO these focus/blur events aren't quite in line with use useFormInput implementation. Perhaps we should bring them together?
 defineExpose({
+  element: input,
   focus: () => {
     focused.value = true
   },
   blur: () => {
     focused.value = false
   },
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue

@@ -101,8 +101,8 @@ const computedStyles = computed<CSSProperties>(() => ({
 }))
 
 defineExpose({
+  element: input,
   focus,
   blur,
-  input,
 })
 </script>

packages/bootstrap-vue-next/src/components/BToast/BToast.vue

@@ -204,5 +204,10 @@ watch(isHovering, (newValue) => {
 
 onBeforeUnmount(stop)
 
-defineExpose({pause, resume, restart, stop})
+defineExpose({
+  pause,
+  resume,
+  restart,
+  stop,
+})
 </script>