fix: Invalid button code in dropdown component (bootstrap-vue-next#1309)

* fix: Invalid button code in dropdown component
resolves bootstrap-vue-next#1304

feat(BButton): replace loading mode with loadingFill - update to use loading fill as a boolean value

---------

Co-authored-by: John <[email protected]>

Author: StackSurfer

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

@@ -71,9 +71,10 @@ export default {
           type: 'Booleanish',
         },
         {
-          prop: 'loadingMode',
+          prop: 'loadingFill',
           description: '',
-          type: "'fill' | 'inline'",
+          type: 'Booleanish',
+          default: 'false',
         },
       ],
       emits: [

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

@@ -21,21 +21,19 @@
     :router-tag="isBLink ? routerTag : null"
     @click="clicked"
   >
-    <div
-      v-if="loadingBoolean"
-      class="btn-loading"
-      :class="{'mode-fill': loadingMode === 'fill', 'mode-inline': loadingMode === 'inline'}"
-    >
+    <template v-if="loadingBoolean">
       <slot name="loading">
-        <BSpinner class="btn-spinner" :small="size !== 'lg'" />
+        <template v-if="!loadingFillBoolean">
+          {{ loadingText }}
+        </template>
+        <slot name="loading-spinner">
+          <BSpinner :small="size !== 'lg'" :label="loadingFillBoolean ? loadingText : undefined" />
+        </slot>
       </slot>
-    </div>
-    <div
-      class="btn-content"
-      :class="{'btn-loading-fill': loadingBoolean && loadingMode === 'fill'}"
-    >
+    </template>
+    <template v-else>
       <slot />
-    </div>
+    </template>
   </component>
 </template>
 
@@ -50,9 +48,11 @@ import {useVModel} from '@vueuse/core'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default?: (props: Record<string, never>) => any
+  'default'?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  loading?: (props: Record<string, never>) => any
+  'loading'?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  'loading-spinner'?: (props: Record<string, never>) => any
 }>()
 
 const props = withDefaults(
@@ -66,8 +66,9 @@ const props = withDefaults(
       type?: ButtonType
       variant?: ButtonVariant | null
       loading?: Booleanish
-      loadingMode?: 'fill' | 'inline'
+      loadingFill?: Booleanish
       block?: Booleanish
+      loadingText?: string
     } & Omit<BLinkProps, 'variant'>
   >(),
   {
@@ -80,8 +81,9 @@ const props = withDefaults(
     type: 'button',
     variant: 'secondary',
     loading: false,
-    loadingMode: 'inline',
+    loadingFill: false,
     block: false,
+    loadingText: 'Loading...',
     // Link props
     activeClass: 'router-link-active',
     append: false,
@@ -122,6 +124,7 @@ const pillBoolean = useBooleanish(() => props.pill)
 const pressedBoolean = useBooleanish(() => props.pressed)
 const squaredBoolean = useBooleanish(() => props.squared)
 const loadingBoolean = useBooleanish(() => props.loading)
+const loadingFillBoolean = useBooleanish(() => props.loadingFill)
 
 const isToggle = computed<boolean>(() => typeof pressedBoolean.value === 'boolean')
 const isButton = computed<boolean>(

packages/bootstrap-vue-next/src/components/BButton/_button.scss

@@ -1,47 +1,3 @@
 .btn {
   position: relative;
-
-  .btn-loading {
-    &.mode-inline {
-      display: inline-block;
-    }
-
-    &.mode-fill {
-      display: flex;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .btn-spinner {
-      margin-inline-end: 0.4rem;
-      --bs-spinner-width: 1.5rem;
-      --bs-spinner-height: 1.5rem;
-      --bs-spinner-border-width: 0.15em;
-
-      &.spinner-border-sm {
-        margin-inline-end: 0.25rem;
-        --bs-spinner-width: 1rem;
-        --bs-spinner-height: 1rem;
-      }
-    }
-
-    &.fw-bold {
-      .btn-spinner {
-        --bs-spinner-border-width: 0.2em;
-      }
-    }
-  }
-
-  .btn-content {
-    display: inline-block;
-
-    &.btn-loading-fill {
-      color: transparent;
-    }
-  }
 }