perf(QFab/QFabAction): simplify communication between components quasarframework#7389 quasarframework#7393

Author: rstoenescu

ui/dev/src/pages/components/fab-extended.vue

@@ -20,20 +20,6 @@
           Row {{ i }}
         </div>
 
-        <q-page-sticky position="bottom-left" :offset="[16, 16]">
-          <q-fab-action
-            class="white shadow-8"
-            color="red"
-            icon="center_focus_weak"
-            label="Anchor start"
-            :label-position="fabLabelPosition"
-            :square="fabSquare"
-            :hide-label="hideLabel"
-            :label-class="labelClass"
-            aria-label="Does nothing"
-          />
-        </q-page-sticky>
-
         <q-page-sticky :position="stickyConfig.position" :offset="stickyConfig.offset">
           <q-fab
             class="shadow-4"

ui/src/components/fab/QFab.js

@@ -22,27 +22,7 @@ export default Vue.extend({
 
   provide () {
     return {
-      __qFabClose: evt => {
-        this.hide(evt)
-
-        if (this.$refs.trigger && this.$refs.trigger.$el) {
-          this.$refs.trigger.$el.focus()
-        }
-      },
-
-      __qFabRegister: fabAction => {
-        if (this.fabActions.indexOf(fabAction) === -1) {
-          this.fabActions.push(fabAction)
-          fabAction.showing = this.showing
-        }
-      },
-
-      __qFabUnregister: fabAction => {
-        const index = this.fabActions.indexOf(fabAction)
-        if (index > -1) {
-          this.fabActions.splice(index, 1)
-        }
-      }
+      __qFab: this
     }
   },
 
@@ -95,16 +75,14 @@ export default Vue.extend({
     }
   },
 
-  watch: {
-    showing (val) {
-      this.fabActions.forEach(fabAction => {
-        fabAction.showing !== val && (fabAction.showing = val)
-      })
-    }
-  },
+  methods: {
+    __onChildClick (evt) {
+      this.hide(evt)
 
-  created () {
-    this.fabActions = []
+      if (this.$refs.trigger && this.$refs.trigger.$el) {
+        this.$refs.trigger.$el.focus()
+      }
+    }
   },
 
   render (h) {

ui/src/components/fab/QFabAction.js

@@ -15,9 +15,6 @@ const anchorMap = {
 
 const anchorValues = Object.keys(anchorMap)
 
-const defaultInjectRet = () => { }
-const defaultInject = () => defaultInjectRet
-
 export default Vue.extend({
   name: 'QFabAction',
 
@@ -34,21 +31,15 @@ export default Vue.extend({
       validator: v => anchorValues.includes(v)
     },
 
-    to: [String, Object],
+    to: [ String, Object ],
     replace: Boolean
   },
 
   inject: {
-    __qFabClose: { default: defaultInject },
-
-    __qFabRegister: { default: defaultInject },
-
-    __qFabUnregister: { default: defaultInject }
-  },
-
-  data () {
-    return {
-      showing: true
+    __qFab: {
+      default () {
+        console.error('QFabAction needs to be child of QFab')
+      }
     }
   },
 
@@ -63,24 +54,20 @@ export default Vue.extend({
         ...this.qListeners,
         click: this.click
       }
+    },
+
+    isDisabled () {
+      return this.__qFab.showing !== true || this.disable === true
     }
   },
 
   methods: {
     click (e) {
-      this.__qFabClose()
+      this.__qFab.__onChildClick(e)
       this.$emit('click', e)
     }
   },
 
-  beforeMount () {
-    this.__qFabRegister(this)
-  },
-
-  beforeDestroy () {
-    this.__qFabUnregister(this)
-  },
-
   render (h) {
     const child = []
 
@@ -104,7 +91,7 @@ export default Vue.extend({
         label: void 0,
         noCaps: true,
         fabMini: true,
-        disable: this.showing !== true || this.disable === true
+        disable: this.isDisabled
       },
       on: this.onEvents
     }, mergeSlot(child, this, 'default'))