feat(QExpansionItem): small improvements to toggle icon & perf

Author: rstoenescu

ui/dev/src/pages/components/list-expansion-item.vue

@@ -299,29 +299,29 @@
         Switch toggle side
       </p>
       <q-list bordered padding inset-separator>
-        <q-expansion-item switch-toggle-side icon="mail" label="Inbox" caption="5 unread emails">
+        <q-expansion-item expand-icon-toggle switch-toggle-side icon="mail" label="Inbox" caption="5 unread emails">
           <q-card>
             <q-card-section>
               {{ lorem }}
             </q-card-section>
           </q-card>
         </q-expansion-item>
-        <q-expansion-item switch-toggle-side icon="send" label="Outbox" caption="Empty">
+        <q-expansion-item expand-icon-toggle switch-toggle-side icon="send" label="Outbox" caption="Empty">
           <q-card>
             <q-card-section>
               {{ lorem }}
             </q-card-section>
           </q-card>
         </q-expansion-item>
         <q-separator />
-        <q-expansion-item switch-toggle-side dense-toggle icon="mail" label="Inbox" caption="5 unread emails">
+        <q-expansion-item expand-icon-toggle switch-toggle-side dense-toggle icon="mail" label="Inbox" caption="5 unread emails">
           <q-card>
             <q-card-section>
               {{ lorem }}
             </q-card-section>
           </q-card>
         </q-expansion-item>
-        <q-expansion-item switch-toggle-side dense-toggle icon="mail" label="Inbox" caption="5 unread emails">
+        <q-expansion-item expand-icon-toggle switch-toggle-side dense-toggle icon="mail" label="Inbox" caption="5 unread emails">
           <q-card>
             <q-card-section>
               {{ lorem }}

ui/src/components/expansion-item/QExpansionItem.js

@@ -126,33 +126,42 @@ export default Vue.extend({
     },
 
     __getToggleIcon (h) {
-      return h(QItemSection, {
+      const data = {
         staticClass: `q-focusable relative-position cursor-pointer${this.denseToggle === true && this.switchToggleSide === true ? ' items-end' : ''}`,
         class: this.expandIconClass,
         props: {
           side: this.switchToggleSide !== true,
           avatar: this.switchToggleSide
-        },
-        attrs: this.activeToggleIcon === true
-          ? { tabindex: 0 }
-          : void 0,
-        on: this.activeToggleIcon === true ? cache(this, 'inpExt', {
-          click: this.__toggleIcon,
-          keyup: this.__toggleIconKeyboard
-        }) : null
-      }, [
-        h('div', {
-          ref: 'blurTarget',
-          staticClass: 'q-expansion-item__toggle-focus q-icon q-focus-helper q-focus-helper--rounded',
-          attrs: { tabindex: -1 }
-        }),
+        }
+      }
 
+      const child = [
         h(QIcon, {
           staticClass: 'q-expansion-item__toggle-icon',
-          class: this.showing === true ? 'rotate-180' : void 0,
+          class: this.showing === true ? 'q-expansion-item__toggle-icon--rotated' : void 0,
           props: { name: this.expansionIcon }
         })
-      ])
+      ]
+
+      if (this.activeToggleIcon === true) {
+        Object.assign(data, {
+          attrs: { tabindex: 0 },
+          on: cache(this, 'inpExt', {
+            click: this.__toggleIcon,
+            keyup: this.__toggleIconKeyboard
+          })
+        })
+
+        child.unshift(
+          h('div', {
+            ref: 'blurTarget',
+            staticClass: 'q-expansion-item__toggle-focus q-icon q-focus-helper q-focus-helper--rounded',
+            attrs: { tabindex: -1 }
+          })
+        )
+      }
+
+      return h(QItemSection, data, child)
     },
 
     __getHeader (h) {

ui/src/components/expansion-item/QExpansionItem.sass

@@ -8,6 +8,9 @@
     position: relative
     transition: transform .3s
 
+    &--rotated
+      transform: rotate(180deg)
+
   &__toggle-focus
     top: auto !important
     left: auto !important

ui/src/components/expansion-item/QExpansionItem.styl

@@ -8,6 +8,9 @@
     position: relative
     transition: transform .3s
 
+    &--rotated
+      transform: rotate(180deg)
+
   &__toggle-focus
     top: auto !important
     left: auto !important