Implemented two-way syncing of view, filters and picked-columns on pf-toolbar

Author: mtorromeo

CHANGELOG.md

@@ -4,15 +4,16 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 ### Added
 - Implemented `v-model` on the page property `pf-paginate-control` components.
-- Implemented two-way syncing of `sort-by` and `sort-direction` properties in `pf-table`.
+- Implemented two-way syncing of `sort-by` and `sort-direction` properties in `pf-table` and `pf-toolbar`.
 - Implemented `pf-application-launcher` and `pf-launcher-item`.
 - Implemented `pf-notification-bell` as a toggler for the `pf-drawer`.
 - Added `navbar-brand-name` CSS class to correctly style text-only brand titles.
 - Documented `v-tooltip` directive
 - Implemented `data-placement` attribute as an alternative way to specify the tooltip positions.
 
 ### Changed
-- **BACKWARD INCOMPATIBLE CHANGE**: The page property of `pf-table` components can now be synced with `:page.sync="mypagenr"`. As a result of this change the `change-page` event has now been renamed to `update:page`.
+- **BACKWARD INCOMPATIBLE CHANGE**: The `page` property of `pf-table` components can now be synced with `:page.sync="mypagenr"`. As a result of this change the `change-page` event has now been renamed to `update:page`.
+- **BACKWARD INCOMPATIBLE CHANGE**: The `view`, `filters` and `picked-columns` properties of `pf-toolbar` components can now be synced with the `.sync` `v-bind` modifier. As a result of this change the `view` event has now been renamed to `update:view`; the `filters` event has been renamed to `update:filters` and the `columns` event to `update:pickedColumns`.
 
 ## [0.0.12] - 2017-05-07
 ### Added

docs/src/pages/toolbar.vue

@@ -13,21 +13,17 @@
     </ol>
 
     <pf-toolbar ref="toolbar"
-                :view="toolbar.view"
+                :view.sync="toolbar.view"
                 :views="toolbar.views"
-                @view="toolbar.view = arguments[0]"
-                @columns="toolbar.pickedColumns = arguments[0]"
-                @filters="toolbar.filters = arguments[0]"
-                :filters="toolbar.filters"
+                :filters.sync="toolbar.filters"
                 :filter-fields="toolbar.filterFields"
-                @sort-by="setSort"
-                :sort-by="toolbar.sortBy"
-                :sort-direction="toolbar.sortDirection"
+                :sort-by.sync="toolbar.sortBy"
+                :sort-direction.sync="toolbar.sortDirection"
                 :sort-fields="toolbar.sortFields"
                 :result-count="toolbar.resultCount"
                 :attached="toolbar.attached"
                 :columns="toolbar.columns"
-                :picked-columns="toolbar.pickedColumns">
+                :picked-columns.sync="toolbar.pickedColumns">
 
       <div v-if="toolbar.slotDefault" v-html="toolbar.slotDefault" style="float:left"></div>
 
@@ -125,10 +121,6 @@ export default {
   },
 
   methods: {
-    setSort(field, direction) {
-      this.toolbar.sortBy = field;
-      this.toolbar.sortDirection = direction;
-    },
     addFilter(filter, value) {
       const f = {};
       f[filter.title] = value;

src/components/Toolbar.vue

@@ -112,6 +112,8 @@ export default {
   methods: {
     setSortBy(field, direction) {
       this.$emit('sort-by', field, direction);
+      this.$emit('update:sortBy', field);
+      this.$emit('update:sortDirection', direction);
     },
     clearFilter(i) {
       this.activeFilters.splice(i, 1);
@@ -123,7 +125,7 @@ export default {
       this.activeFilters.push(filter);
     },
     setPickedColumns(columns) {
-      this.$emit('columns', columns);
+      this.$emit('update:pickedColumns', columns);
     },
   },
 
@@ -194,10 +196,10 @@ export default {
       immediate: true,
     },
     activeView() {
-      this.$emit('view', this.activeView);
+      this.$emit('update:view', this.activeView);
     },
     activeFilters() {
-      this.$emit('filters', this.activeFilters);
+      this.$emit('update:filters', this.activeFilters);
     },
   },
 };