From c19907facff20a47a04db71b417fbb2673f8266d Mon Sep 17 00:00:00 2001
From: Maxim Kudryavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 21 Jun 2018 08:43:11 +0300
Subject: [PATCH] fix(vue-grid): fix spread messages property (#1205)

---
 .../src/plugins/grouping-panel.js                     | 11 +++++++----
 .../src/plugins/paging-panel.js                       | 10 +++++++---
 .../src/plugins/search-panel.js                       |  9 +++++++--
 .../src/plugins/table-column-visibility.js            |  9 +++++++--
 .../src/plugins/table-edit-column.js                  |  9 +++++++--
 .../src/plugins/table-filter-row.js                   |  1 -
 .../src/plugins/table-header-row.js                   |  1 -
 packages/dx-vue-grid-bootstrap4/src/plugins/table.js  |  7 ++++++-
 .../dx-vue-grid-bootstrap4/src/plugins/toolbar.js     |  1 +
 9 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
index 4013723304..24ccf54766 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
@@ -10,17 +10,20 @@ const defaultMessages = {
 export const DxGroupingPanel = {
   name: 'DxGroupingPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
-    const { messages } = context.props;
-
     return (
       <DxGroupingPanelBase
         layoutComponent={GroupPanelLayout}
         containerComponent={GroupPanelContainer}
         itemComponent={GroupPanelItem}
         emptyMessageComponent={GroupPanelEmptyMessage}
-        messages={{ ...defaultMessages, ...messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
index 2379b5482f..c37ca90000 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
@@ -10,13 +10,17 @@ const defaultMessages = {
 export const DxPagingPanel = {
   name: 'DxPagingPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
-    const { messages } = context.props;
     return (
       <DxPagingPanelBase
         containerComponent={Pager}
-        messages={{ ...defaultMessages, ...messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
index 1a2acfd75c..40943cbfc7 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
@@ -8,12 +8,17 @@ const defaultMessages = {
 export const DxSearchPanel = {
   name: 'DxSearchPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxSearchPanelBase
         inputComponent={SearchPanelInput}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
index 7efd7e54ae..356cdcd2aa 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
@@ -8,12 +8,17 @@ const defaultMessages = {
 export const DxTableColumnVisibility = {
   name: 'DxTableColumnVisibility',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableColumnVisibilityBase
         emptyMessageComponent={EmptyMessage}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
index b4bfaf7d78..cca4ff3420 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
@@ -16,14 +16,19 @@ const defaultMessages = {
 export const DxTableEditColumn = {
   name: 'DxTableEditColumn',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableEditColumnBase
         cellComponent={EditCommandCell}
         headerCellComponent={EditCommandHeadingCell}
         commandComponent={CommandButton}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
index 0eaa77eb57..d28c967cf2 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
@@ -1,5 +1,4 @@
 import { DxTableFilterRow as DxTableFilterRowBase } from '@devexpress/dx-vue-grid';
-
 import { TableFilterCell } from '../templates/table-filter-cell';
 import { TableRow } from '../templates/table-row';
 
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
index 03276a5fd3..8a87979e84 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
@@ -1,5 +1,4 @@
 import { DxTableHeaderRow as DxTableHeaderRowBase } from '@devexpress/dx-vue-grid';
-
 import { TableRow } from '../templates/table-row';
 import { TableHeaderCell } from '../templates/table-header-cell';
 
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
index 7cd33e008c..08510f9bd6 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
@@ -19,6 +19,11 @@ const defaultMessages = {
 export const DxTable = {
   name: 'DxTable',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableBase
@@ -35,7 +40,7 @@ export const DxTable = {
         stubCellComponent={TableStubCell}
         stubHeaderCellComponent={TableHeaderStubCell}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/toolbar.js b/packages/dx-vue-grid-bootstrap4/src/plugins/toolbar.js
index 7afab55fa3..29ad3938e7 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/toolbar.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/toolbar.js
@@ -3,6 +3,7 @@ import { DxToolbar as Root } from '../templates/toolbar/toolbar';
 import { FlexibleSpace } from '../templates/toolbar/flexible-space';
 
 export const DxToolbar = {
+  name: 'DxToolbar',
   render() {
     return (
       <DxToolbarBase