From 5aa21a2bce9dcce7872c94dc1537f853a75c460a Mon Sep 17 00:00:00 2001 From: SergeyAlexeev Date: Thu, 23 Aug 2018 15:29:24 +0300 Subject: [PATCH] fix(vue-grid): fix functional components (#1350) Fixes #1345 --- packages/dx-vue-grid-bootstrap4/src/grid.js | 2 +- .../src/plugins/column-chooser.js | 2 +- .../src/plugins/grouping-panel.js | 2 +- .../src/plugins/paging-panel.js | 2 +- .../src/plugins/search-panel.js | 2 +- .../src/plugins/table-band-header.js | 2 +- .../src/plugins/table-column-visibility.js | 2 +- .../src/plugins/table-edit-column.js | 2 +- .../src/plugins/table-edit-row.js | 2 +- .../src/plugins/table-filter-row.js | 2 +- .../src/plugins/table-group-row.js | 2 +- .../src/plugins/table-header-row.js | 2 +- .../src/plugins/table-row-detail.js | 2 +- .../src/plugins/table-selection.js | 2 +- .../src/plugins/table.js | 2 +- .../src/templates/table.js | 23 ++----------------- packages/dx-vue-grid/src/grid.js | 2 +- 17 files changed, 18 insertions(+), 37 deletions(-) diff --git a/packages/dx-vue-grid-bootstrap4/src/grid.js b/packages/dx-vue-grid-bootstrap4/src/grid.js index e2e5420a8a..504be784e6 100644 --- a/packages/dx-vue-grid-bootstrap4/src/grid.js +++ b/packages/dx-vue-grid-bootstrap4/src/grid.js @@ -9,7 +9,7 @@ export const DxGrid = { return ( {context.children} diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js b/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js index 1223ea86bd..565cd5abc7 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js @@ -14,7 +14,7 @@ export const DxColumnChooser = { containerComponent={Container} itemComponent={Item} toggleButtonComponent={ToggleButton} - {...{ attrs: context.props, on: context.listeners }} + {...context.data} /> ); }, 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 73a5ca908c..f7f4014233 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js @@ -23,7 +23,7 @@ export const DxGroupingPanel = { itemComponent={GroupPanelItem} emptyMessageComponent={GroupPanelEmptyMessage} messages={{ ...defaultMessages, ...context.props.messages }} - {...{ attrs: context.data.attrs, on: context.listeners }} + {...context.data} /> ); }, 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 73901f150a..f5677259c2 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js @@ -19,7 +19,7 @@ export const DxPagingPanel = { ); }, 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 40943cbfc7..47e2eb686e 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js @@ -18,7 +18,7 @@ export const DxSearchPanel = { ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js index 910a6a3b19..c14ee3b557 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js @@ -14,7 +14,7 @@ export const DxTableBandHeader = { rowComponent={TableRow} bandedHeaderCellComponent={BandedHeaderCell} invisibleCellComponent={InvisibleCell} - {...{ attrs: context.props, on: context.listeners }} + {...context.data} /> ); }, 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 356cdcd2aa..ea133f6025 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 @@ -18,7 +18,7 @@ export const DxTableColumnVisibility = { ); }, 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 cca4ff3420..9ba3218baf 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 @@ -28,7 +28,7 @@ export const DxTableEditColumn = { headerCellComponent={EditCommandHeadingCell} commandComponent={CommandButton} messages={{ ...defaultMessages, ...context.props.messages }} - {...{ attrs: context.data.attrs, on: context.listeners }} + {...context.data} /> ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js index 38677b7523..e09e13eb2e 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js @@ -10,7 +10,7 @@ export const DxTableEditRow = { ); }, 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 b630d65641..4aed8c9af5 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 @@ -36,7 +36,7 @@ export const DxTableFilterRow = { iconComponent={Icon} editorComponent={Editor} messages={{ ...defaultMessages, ...context.props.messages }} - {...{ attrs: context.data.attrs, on: context.listeners }} + {...context.data} /> ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js index ab08ca43c6..0d83b9d134 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js @@ -11,7 +11,7 @@ export const DxTableGroupRow = { cellComponent={TableGroupCell} rowComponent={TableRow} indentColumnWidth={33} - {...{ attrs: context.props, on: context.listeners }} + {...context.data} /> ); }, 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 8a87979e84..bee9d33ef6 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 @@ -10,7 +10,7 @@ export const DxTableHeaderRow = { ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js index 754bb345d8..bf937ff968 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js @@ -13,7 +13,7 @@ export const DxTableRowDetail = { cellComponent={TableDetailCell} rowComponent={TableRow} toggleColumnWidth={48} - {...{ attrs: context.props, on: context.listeners }} + {...context.data} /> ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js index bdad8f83b0..68238afbe4 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js @@ -13,7 +13,7 @@ export const DxTableSelection = { cellComponent={TableSelectCell} headerCellComponent={TableSelectAllCell} selectionColumnWidth={40} - {...{ attrs: context.props, on: context.listeners }} + {...context.data} /> ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js index 08510f9bd6..61ee8bebef 100644 --- a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js +++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js @@ -40,7 +40,7 @@ export const DxTable = { stubCellComponent={TableStubCell} stubHeaderCellComponent={TableHeaderStubCell} messages={{ ...defaultMessages, ...context.props.messages }} - {...{ attrs: context.data.attrs, on: context.listeners }} + {...context.data} /> ); }, diff --git a/packages/dx-vue-grid-bootstrap4/src/templates/table.js b/packages/dx-vue-grid-bootstrap4/src/templates/table.js index 2ab19d2aaf..bb5a5628a9 100644 --- a/packages/dx-vue-grid-bootstrap4/src/templates/table.js +++ b/packages/dx-vue-grid-bootstrap4/src/templates/table.js @@ -1,17 +1,3 @@ -let globalStickyProp; -const testCSSProp = (property, value, noPrefixes) => { - const prop = `${property}:`; - const el = document.createElement('test'); - const mStyle = el.style; - - if (!noPrefixes) { - mStyle.cssText = `${prop + ['-webkit-', '-moz-', '-ms-', '-o-', ''].join(`${value};${prop}`) + value};`; - } else { - mStyle.cssText = prop + value; - } - return mStyle[property]; -}; - export const Table = { name: 'Table', props: { @@ -25,7 +11,6 @@ export const Table = { data() { return ({ backgroundColor: 'white', - stickyProp: globalStickyProp, }); }, mounted() { @@ -33,14 +18,10 @@ export const Table = { }, methods: { checkStyles() { - globalStickyProp = testCSSProp('position', 'sticky'); - const body = document.getElementsByTagName('body')[0]; const { backgroundColor } = window.getComputedStyle(body); - if (this.backgroundColor !== backgroundColor - || this.stickyProp !== globalStickyProp) { - this.stickyProp = globalStickyProp; + if (this.backgroundColor !== backgroundColor) { this.backgroundColor = backgroundColor; } }, @@ -51,11 +32,11 @@ export const Table = { class={{ 'table mb-0 dx-g-bs4-overflow-hidden dx-g-bs4-table': true, 'dx-g-bs4-table-head': this.use === 'head', + 'dx-g-bs4-table-sticky': !!this.use, }} style={{ minWidth: this.minWidth, ...this.use === 'head' ? { - position: this.stickyProp, backgroundColor: this.backgroundColor, } : null, }} diff --git a/packages/dx-vue-grid/src/grid.js b/packages/dx-vue-grid/src/grid.js index eda6c4daf5..467f280fed 100644 --- a/packages/dx-vue-grid/src/grid.js +++ b/packages/dx-vue-grid/src/grid.js @@ -8,7 +8,7 @@ export const DxGrid = { return ( {context.children}