fix(root-listeners): apply listen-on-root mixin to other components (bootstrap-vue#684)

alexsasharegan · tmorehouse · commit f2b7b44a08d6 · 2017-07-12T03:27:40.000-03:00
* fix(root-listeners): apply listen-on-root mixin to other components
diff --git a/docs/components/table/README.md b/docs/components/table/README.md
@@ -46,7 +46,7 @@ custom rendering, events, and asynchronous data.
     <pre>{{ modalDetails.data }}</pre>
   </b-modal>
 
-</div> 
+</div>
 </template>
 
 <script>
@@ -130,7 +130,7 @@ export default {
 ```
 
 ### `fields` prop
-The `fields` prop is used to display table columns. 
+The `fields` prop is used to display table columns.
 Keys are used to extract real value from each row.
 Example format:
 ```js
@@ -175,7 +175,7 @@ in the Vue.js guide.
         name: 'Havij'
     },
     {
-        _cellVariants: { 
+        _cellVariants: {
             age: 'danger',  // Displayes cell for field 'age' red
             name: 'success' // Displayes cell for field 'name' green
         },
@@ -198,7 +198,7 @@ the record, will be prefered.
 
 `items` can also be a reference to a *provider* function, which returns an `Array` of items data.
 Provider functions can also be asynchronous:
-- By returning `null` (or `undefined`) and calling a callback, when the data is 
+- By returning `null` (or `undefined`) and calling a callback, when the data is
 ready, with the data array as the only argument to the callback,
 - By returning a `Promise` that resolves to an array.
 
@@ -297,7 +297,7 @@ The slot's scope variable (`data` in the above sample) will have the following p
 | `item` | Object | The entire record (i.e. `items[index]`) for this row
 | `index` | Number | The row number (zero based)
 
-**Note** that `index` will not always be the actual row's index number, as it is 
+**Note** that `index` will not always be the actual row's index number, as it is
 computed after pagination and filtering have been applied to the original
 table data. The `index` value will refer to the **displayed row number**. This
 number will align with the indexes from the optional `v-model` bound variable.
@@ -344,8 +344,8 @@ If you bind a variable to the `v-model` prop, the contents of this variable will
 be the currently disaplyed item records (zero based index, up to `page-size` - 1).
 This variable (the `value` prop) should usually be treated as readonly.
 
-The records within the v-model are a filtered/paginated shallow copy of `items`, and 
-hence any changes to a record's properties in the v-model will be reflected in 
+The records within the v-model are a filtered/paginated shallow copy of `items`, and
+hence any changes to a record's properties in the v-model will be reflected in
 the original `items` array (except when `items` is set to a provider function).
 Deleteing a record from the v-model will **not** remove the record from the
 original items array.
@@ -372,7 +372,7 @@ The built-in default `sort-compare` function sorts the specified field `key` bas
 on the data in the underlying record object. The field value is first stringified
 if it is an object, and then sorted.
 
-The default `sort-compare` routine **cannot** sort neither virtual columns, nor 
+The default `sort-compare` routine **cannot** sort neither virtual columns, nor
 based on the custom rendering of the field data (which is used only for presentation).
 For this reason, you can provide your own custom sort compare routine by passing a
 function reference to the prop `sort-compare`.
@@ -402,7 +402,7 @@ if (typeof a[key] === 'number' && typeof b[key] === 'number') {
 ```
 
 ### Using Items Provider Functions
-As mentioned under the `items` prop section, it is possible to use a function to provide 
+As mentioned under the `items` prop section, it is possible to use a function to provide
 the row data (items), by specifying a function reference via the `items` prop.
 
 **Note:** The `items-provider` prop has been deprecated in favour of providing a function
@@ -433,7 +433,7 @@ function myProvider(ctx) {
     let items = [];
 
     // perform any items processing needed
-    
+
     // Must return an array
     return items || [];
 }
@@ -471,7 +471,7 @@ function myProvider(ctx) {
 }
 ```
 
-`<b-table>` provides a `busy` prop that will flag the table as busy, which you can 
+`<b-table>` provides a `busy` prop that will flag the table as busy, which you can
 set to `true` just before your async fetch, and then set it to `false` once you have
 your data, and just before you send it to the table for display. Example:
 
@@ -499,7 +499,7 @@ methods: {
  }
 ```
 
-By default, the items provider function is responsible for **all paging, filtering, and sorting** 
+By default, the items provider function is responsible for **all paging, filtering, and sorting**
 of the data, before passing it to `b-table` for display.
 
 You can disable provider paging, filtering, and sorting (individually) by setting the
@@ -520,7 +520,7 @@ trigger the calling of the provider function.  So be sure to bind to the `per-pa
 (unless you have the respective `no-provider-*` prop set to `true`).
 
 #### Event based refreshing of data:
-You may also trigger the refresh of the provider function by emitting the 
+You may also trigger the refresh of the provider function by emitting the
 event `table::refresh` on `$root` with the single argument being the `id` of your `b-table`.
 You must have a unique ID on your table for this to work.
 
diff --git a/lib/components/table.vue b/lib/components/table.vue
@@ -75,7 +75,8 @@
 
 <script>
     import { warn } from '../utils';
-    import { keys } from '../utils/object.js'
+    import { keys } from '../utils/object.js';
+    import { listenOnRootMixin } from '../mixins'
 
     const toString = v => {
         if (!v) {
@@ -117,6 +118,7 @@
     };
 
     export default {
+        mixins: [listenOnRootMixin],
         data() {
             return {
                 sortBy: null,
@@ -278,7 +280,7 @@
             if (this.hasProvider) {
                 this._providerUpdate();
             }
-            this.$root.$on('table::refresh', (id) => {
+            this.listenOnRoot('table::refresh', (id) => {
                 if (id === this.id) {
                     this._providerUpdate();
                 }
@@ -478,7 +480,7 @@
             _providerSetLocal(items) {
                 this.localItems = (items && items.length > 0) ? items.slice() : [];
                 this.$emit('refreshed');
-                this.$root.$emit('table::refreshed', this.id);
+                this.emitOnRoot('table::refreshed', this.id);
             },
             _providerUpdate() {
                 // Refresh the provider items
diff --git a/lib/mixins/dropdown.js b/lib/mixins/dropdown.js
@@ -1,4 +1,5 @@
 import clickOut from './clickout';
+import listenOnRootMixin from './listen-on-root'
 import { from as arrayFrom } from '../utils/array'
 
 // Determine if an HTML element is visible - Faster than CSS check
@@ -17,6 +18,7 @@ const HEADER_SELECTOR = '.dropdown-header';
 const ALL_SELECTOR = [ITEM_SELECTOR, HEADER_SELECTOR].join(',');
 
 export default {
+    mixins: [listenOnRootMixin],
     props: {
         id: {
             type: String
@@ -51,10 +53,10 @@ export default {
         };
 
         // To keep one dropdown opened on page
-        this.$root.$on('shown::dropdown', listener);
+        this.listenOnRoot('shown::dropdown', listener);
 
         // Hide when clicked on links
-        this.$root.$on('clicked::link', listener);
+        this.listenOnRoot('clicked::link', listener);
     },
     mounted: clickOut.mounted,
     destroyed: clickOut.destroyed,
@@ -65,7 +67,7 @@ export default {
             }
 
             if (state) {
-                this.$root.$emit('shown::dropdown', this);
+                this.emitOnRoot('shown::dropdown', this);
                 /*
                  If this is a touch-enabled device we add extra
                  empty mouseover listeners to the body's immediate children;
@@ -79,7 +81,7 @@ export default {
                     });
                 }
             } else {
-                this.$root.$emit('hidden::dropdown', this);
+                this.emitOnRoot('hidden::dropdown', this);
                 /*
                  If this is a touch-enabled device we remove the extra
                  empty mouseover listeners we added for iOS support
@@ -108,7 +110,7 @@ export default {
             }
             if (this.split) {
                 this.$emit('click', e);
-                this.$root.$emit('shown::dropdown', this);
+                this.emitOnRoot('shown::dropdown', this);
             } else {
                 this.toggle();
             }
diff --git a/lib/mixins/popover.js b/lib/mixins/popover.js
@@ -1,4 +1,5 @@
 import Tether from 'tether';
+import listenOnRootMixin from './listen-on-root'
 import { isArray, arrayIncludes } from '../utils/array';
 import { keys } from '../utils/object';
 
@@ -22,6 +23,7 @@ const TETHER_CLASSES = {
 const TRANSITION_DURATION = 150;
 
 export default {
+    mixins: [listenOnRootMixin],
     props: {
         constraints: {
             type: Array,
@@ -315,10 +317,10 @@ export default {
             this.$emit('showChange', newShowState);
             if (newShowState) {
                 this.showPopover();
-                this.$root.$emit('shown::popover');
+                this.emitOnRoot('shown::popover');
             } else {
                 this.hidePopover();
-                this.$root.$emit('hidden::popover');
+                this.emitOnRoot('hidden::popover');
             }
         },
         /**
@@ -347,7 +349,7 @@ export default {
         }
     },
     created() {
-        this.$root.$on('hide::popover', () => {
+        this.listenOnRoot('hide::popover', () => {
             this.triggerState = false;
         });
     },
