Merge branch 'main' of https://github.com/cdmoro/bootstrap-vue-3

Author: issayah

docs/components/Dropdown.md

@@ -1099,12 +1099,14 @@ the dropdown menu, ensure they are wrapped with a plain `<li>`.
 
 #### Events
 
-| Name     | Argument | Description                                        |
-| -------- | -------- | -------------------------------------------------- |
-| `hidden` |          | Emitted when dropdown is hidden                    |
-| `hide`   |          | Emitted just before dropdown is hidden. Cancelable |
-| `show`   |          | Emitted just before dropdown is shown. Cancelable  |
-| `shown`  |          | Emitted when dropdown is shown                     |
+| Name     | Argument                          | Description                                        |
+| -------- | --------------------------------- | -------------------------------------------------- |
+| `hidden` |                                   | Emitted when dropdown is hidden                    |
+| `hide`   |                                   | Emitted just before dropdown is hidden. Cancelable |
+| `show`   |                                   | Emitted just before dropdown is shown. Cancelable  |
+| `shown`  |                                   | Emitted when dropdown is shown                     |
+| `click`  | event - Native click event object | Emitted when split button is clicked in split mode |
+| `toggle` |                                   | Emitted when toggle button is clicked              |
 
 ### `<b-dropdown-item>`
 

docs/components/InputGroup.md

@@ -557,7 +557,7 @@ input groups. However, the inputs inside the input group do support contextual s
 | --------- | ------ | ------------------------------------------- |
 | `default` | No     | Content to place in the input group prepend |
 
-### `<b-input-group-Apppend>`
+### `<b-input-group-append>`
 
 **Note** Bootstrap 5 dropped `.input-group-append`. You can now just add buttons and `.input-group-text` as direct children of the input groups. `<b-input-group-append>` is added for compatibility reasons.
 

src/App.vue

@@ -966,6 +966,8 @@
             class="m-2"
             variant="outline-primary"
             split-variant="primary"
+            @click="(event: Event) => consoleLog('main split button clicked', event)"
+            @toggle="consoleLog('toggle button clicked')"
           >
             <b-dropdown-item href="#">Action</b-dropdown-item>
           </b-dropdown>
@@ -1716,8 +1718,8 @@
             <em>Title</em>
             - {{ popoverInput }}
           </template>
-          <b-button @click="consoleLog">456</b-button>I am popover <b>component</b> content!
-          <b-form-input v-model="popoverInput" type="text" />Name:
+          <b-button @click="consoleLog('Button Click!')">456</b-button>I am popover
+          <b>component</b> content! <b-form-input v-model="popoverInput" type="text" />Name:
           <strong>{{ popoverInput }}</strong>
         </b-popover>
         <button
@@ -1744,8 +1746,8 @@
             <em>Title</em>
             - {{ popoverInput }}
           </template>
-          <b-button @click="consoleLog">456</b-button>I am popover <b>component</b> content!
-          <b-form-input v-model="popoverInput" type="text" />Name:
+          <b-button @click="consoleLog('Button Click!')">456</b-button>I am popover
+          <b>component</b> content! <b-form-input v-model="popoverInput" type="text" />Name:
           <strong>{{ popoverInput }}</strong>
         </b-popover>
       </div>
@@ -1890,7 +1892,7 @@
     <b-button class="mt-3" @click="createToast()">Show Toast</b-button>
     <b-button class="mt-3" @click="createToast2()">Show Toast 2</b-button>
     <b-button class="mt-3" @click="createToastError()">Show a danger Toast</b-button>
-    <b-button class="mt-3" @click="consoleLog">Hide Toast</b-button>
+    <b-button class="mt-3" @click="consoleLog('Button Click!')">Hide Toast</b-button>
     <div id="demo"></div>
   </b-container>
 </template>
@@ -1956,7 +1958,7 @@ export default defineComponent({
     const popoverRef = ref<ComponentPublicInstance<HTMLButtonElement>>()
     const popoverContainerRef = ref<HTMLButtonElement>()
 
-    const consoleLog = () => console.log('Button Click!')
+    const consoleLog = (...args: unknown[]) => console.log(...args)
     const checkedDefault = ref(false)
     const checkedButton = ref(false)
     const checkedRequired = ref(false)

src/components/BDropdown/BDropdown.vue

@@ -8,6 +8,7 @@
       :disabled="disabled"
       :type="splitButtonType"
       v-bind="buttonAttr"
+      @click="onSplitClick"
     >
       {{ text }}
       <slot name="button-content" />
@@ -22,6 +23,7 @@
       class="dropdown-toggle-split dropdown-toggle"
       data-bs-toggle="dropdown"
       aria-expanded="false"
+      @click="emit('toggle')"
     >
       <span class="visually-hidden">
         {{ toggleText }}
@@ -107,6 +109,8 @@ interface BDropdownEmits {
   (e: 'shown'): void
   (e: 'hide'): void
   (e: 'hidden'): void
+  (e: 'click', event: Event): void
+  (e: 'toggle'): void
 }
 
 const emit = defineEmits<BDropdownEmits>()
@@ -121,6 +125,12 @@ useEventListener(parent, 'shown.bs.dropdown', () => emit('shown'))
 useEventListener(parent, 'hide.bs.dropdown', () => emit('hide'))
 useEventListener(parent, 'hidden.bs.dropdown', () => emit('hidden'))
 
+const onSplitClick = (event: Event) => {
+  if (props.split) {
+    emit('click', event)
+  }
+}
+
 const classes = computed(() => ({
   'd-grid': props.block,
   'd-flex': props.block && props.split,

src/types/components/BFormTags/BFormTags.d.ts

@@ -30,7 +30,7 @@ export interface Props {
   tagPills?: boolean
   tagRemoveLabel?: string
   tagRemovedLabel?: string
-  tagValidator?: <T>(t: T) => boolean
+  tagValidator?: (t: unknown) => boolean
   tagVariant?: ColorVariant
 }
 // Emits