fix(ui): add slot for dropdown button in split mode #16955

docs/src/examples/QBtnDropdown/ArrowContainerSlot.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn-dropdown
+      split
+      label="Dropdown Button"
+      color="cyan"
+      push
+      no-caps
+      @click="onMainClick"
+    >
+      <template v-slot:arrow-container>
+        <q-icon name="change_history" />
+      </template>
+
+      <q-list>
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section avatar>
+            <q-avatar icon="folder" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Photos</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup @click="onItemClick">
+          <q-item-section avatar>
+            <q-avatar icon="assignment" color="secondary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vacation</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  setup () {
+    return {
+      onMainClick () {
+        // console.log('Clicked on main button')
+      },
+
+      onItemClick () {
+        // console.log('Clicked on an Item')
+      }
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/button-dropdown.md

@@ -27,6 +27,8 @@ In case you are looking for a dropdown "input" instead of "button" use [Select](
 
 <DocExample title="Label slot" file="LabelSlot" />
 
+<DocExample title="Arrow container slot" file="ArrowContainerSlot" />
+
 <DocExample title="Using v-model" file="Model" />
 
 <DocExample title="Disable" file="Disable" />

ui/src/components/btn-dropdown/QBtnDropdown.js

@@ -152,6 +152,10 @@ export default createComponent({
       menuRef.value?.hide(evt)
     }
 
+    function getSplitButtonMenu (menuContent) {
+      return props.disable !== true && props.disableDropdown !== true ? [ menuContent ] : []
+    }
+
     // expose public methods
     Object.assign(proxy, {
       show, hide, toggle
@@ -162,39 +166,43 @@ export default createComponent({
     })
 
     return () => {
+      const icon = h(QIcon, {
+        class: iconClass.value,
+        name: props.dropdownIcon || proxy.$q.iconSet.arrow.dropdown
+      })
+
+      const dropdownMenu = h(QMenu, {
+        ref: menuRef,
+        id: targetUid.value,
+        class: props.contentClass,
+        style: props.contentStyle,
+        cover: props.cover,
+        fit: true,
+        persistent: props.persistent,
+        noEscDismiss: props.noEscDismiss,
+        noRouteDismiss: props.noRouteDismiss,
+        autoClose: props.autoClose,
+        noFocus: props.noFocus,
+        noRefocus: props.noRefocus,
+        anchor: props.menuAnchor,
+        self: props.menuSelf,
+        offset: props.menuOffset,
+        separateClosePopup: true,
+        transitionShow: props.transitionShow,
+        transitionHide: props.transitionHide,
+        transitionDuration: props.transitionDuration,
+        onBeforeShow,
+        onShow,
+        onBeforeHide,
+        onHide
+      }, slots.default)
+
       const Arrow = [
-        h(QIcon, {
-          class: iconClass.value,
-          name: props.dropdownIcon || proxy.$q.iconSet.arrow.dropdown
-        })
+        icon
       ]
 
       props.disableDropdown !== true && Arrow.push(
-        h(QMenu, {
-          ref: menuRef,
-          id: targetUid.value,
-          class: props.contentClass,
-          style: props.contentStyle,
-          cover: props.cover,
-          fit: true,
-          persistent: props.persistent,
-          noEscDismiss: props.noEscDismiss,
-          noRouteDismiss: props.noRouteDismiss,
-          autoClose: props.autoClose,
-          noFocus: props.noFocus,
-          noRefocus: props.noRefocus,
-          anchor: props.menuAnchor,
-          self: props.menuSelf,
-          offset: props.menuOffset,
-          separateClosePopup: true,
-          transitionShow: props.transitionShow,
-          transitionHide: props.transitionHide,
-          transitionDuration: props.transitionDuration,
-          onBeforeShow,
-          onShow,
-          onBeforeHide,
-          onHide
-        }, slots.default)
+        dropdownMenu
       )
 
       if (props.split === false) {
@@ -244,7 +252,10 @@ export default createComponent({
           size: props.size,
           padding: props.padding,
           ripple: props.ripple
-        }, () => Arrow)
+        }, {
+          default: () => hSlot(slots[ 'arrow-container' ], [
+            icon ]).concat(getSplitButtonMenu(dropdownMenu))
+        })
       ])
     }
   }

ui/src/components/btn-dropdown/QBtnDropdown.json

@@ -158,6 +158,10 @@
     "loading": {
       "desc": "Override the default QSpinner when in 'loading' state",
       "addedIn": "v2.8"
+    },
+
+    "arrow-container": {
+      "desc": "Customize arrow container button's content when using 'split' prop"
     }
   },