feat(QBtnDropdown): (backport from Qv2) Support transition props (#14585

)
quasarframework · Oct 13, 2022 · 32e3335 · 32e3335
1 parent d106198
commit 32e3335
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/ui/dev/src/pages/components/button-dropdown.vue b/ui/dev/src/pages/components/button-dropdown.vue
@@ -239,6 +239,43 @@
       </q-list>
     </q-btn-dropdown>
 
+    <q-btn-dropdown transition-show="jump-down" transition-hide="jump-up" color="primary" split glossy label="transition" @click="log('click')" style="margin: 15px">
+      <q-list>
+        <q-item clickable v-for="n in 2" :key="`2.${n}`" v-close-popup @click="showNotification">
+          <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-separator inset="item" spaced />
+        <q-item-label header inset>
+          Files
+        </q-item-label>
+        <q-item clickable v-close-popup @click="showNotification">
+          <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>
+
     <q-btn-dropdown :disable-main-btn="disableMainBtn" :disable-dropdown="disableDropdown" color="primary" split glossy label="btn" @click="log('click')" style="margin: 15px">
       <q-list>
         <q-item clickable v-for="n in 2" :key="`2.${n}`" v-close-popup @click="showNotification">

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import BtnMixin from '../../mixins/btn.js'
 import AttrsMixin from '../../mixins/attrs.js'
+import TransitionMixin from '../../mixins/transition.js'
 
 import QIcon from '../icon/QIcon.js'
 import QBtn from '../btn/QBtn.js'
@@ -13,6 +14,13 @@ import { stop } from '../../utils/event.js'
 import cache from '../../utils/private/cache.js'
 import uid from '../../utils/uid.js'
 
+// let's not duplicate type checking and prop validations
+// so just specify the props here with no type description
+const menuTransitionProps = Object.keys(TransitionMixin.props).reduce(
+  (acc, key) => (acc[ key ] = {}) && acc,
+  {}
+)
+
 export default Vue.extend({
   name: 'QBtnDropdown',
 
@@ -42,6 +50,7 @@ export default Vue.extend({
       default: 'top end'
     },
     menuOffset: Array,
+    ...menuTransitionProps,
 
     disableMainBtn: Boolean,
     disableDropdown: Boolean,
@@ -113,7 +122,9 @@ export default Vue.extend({
           offset: this.menuOffset,
           contentClass: this.contentClass,
           contentStyle: this.contentStyle,
-          separateClosePopup: true
+          separateClosePopup: true,
+          transitionShow: this.transitionShow,
+          transitionHide: this.transitionHide
         },
         on: cache(this, 'menu', {
           'before-show': e => {

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.json b/ui/src/components/btn-dropdown/QBtnDropdown.json
@@ -121,6 +121,20 @@
       "addedIn": "v1.9.2"
     },
 
+    "transition-show": {
+      "extends": "transition",
+      "default": "fade",
+      "category": "behavior",
+      "addedIn": "v1.22"
+    },
+
+    "transition-hide": {
+      "extends": "transition",
+      "default": "fade",
+      "category": "behavior",
+      "addedIn": "v1.22"
+    },
+
     "toggle-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the dropdown toggle element",