Update event documentation for Dropdown.md.

Add some testing code to be sure that the event is emitted

Author: sfe-efficy

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>`
 

src/App.vue

@@ -966,6 +966,8 @@
             class="m-2"
             variant="outline-primary"
             split-variant="primary"
+            @click="(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)