Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-28 18:44:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #787 from vuematerial/table-fix

Browse source 
mdTable - General bug fixes
This commit is contained in:
Pablo Henrique 2017-05-31 20:01:36 -03:00 committed by GitHub
commit 51289ab13e
47 changed files with 245 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/src/App.vue
View file

@ -204,7 +204,7 @@
</div>
</template>
<style lang="sass">
<style lang="scss">
@import '../../src/core/stylesheets/variables.scss';
$sizebar-size: 280px;
@ -421,6 +421,8 @@
closeSidenav() {
this.$refs['main-sidebar'].close();
}
},
mounted() {
}
};
</script>

2
docs/src/components/ApiTable.vue
View file

@ -28,7 +28,7 @@
</div>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.api-table + .api-table {
margin-top: 42px;
}

4
docs/src/components/CodeBlock.vue
View file

@ -12,7 +12,7 @@
</div>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
@import '../../../src/core/stylesheets/variables.scss';
.code-block {
@ -118,7 +118,7 @@
}
</style>
<style lang="sass">
<style lang="scss">
@import '../../../src/core/stylesheets/variables.scss';
.code-block {

2
docs/src/components/DocsComponent.vue
View file

@ -22,7 +22,7 @@
</div>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.component-docs {
position: relative;
z-index: 1;

4
docs/src/components/ExampleBox.vue
View file

@ -48,7 +48,7 @@ var App = new Vue({
</div>
</template>
<style lang="sass">
<style lang="scss">
.example-box .code-content {
.code-block {
margin: -16px;
@ -64,7 +64,7 @@ var App = new Vue({
}
</style>
<style lang="sass" scoped>
<style lang="scss" scoped>
.example-box {
margin-bottom: 16px;
}

2
docs/src/components/PageContent.vue
View file

@ -18,7 +18,7 @@
</div>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.page-content {
min-height: 100%;
max-height: 100%;

4
docs/src/components/ReleaseVersion.vue
View file

@ -3,13 +3,13 @@
<div v-if="availableDocs.length > 1">
<span>Version:</span>
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
<md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
<md-option v-for="doc in availableDocs" :key="doc" :value="doc">{{ doc }}</md-option>
</md-select>
</div>
</div>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.release-version {
font-size: 15px;

2
docs/src/pages/About.vue
View file

@ -66,7 +66,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
section {
max-width: 960px;

2
docs/src/pages/Changelog.vue
View file

@ -4,7 +4,7 @@
</page-content>
</template>
<style lang="sass">
<style lang="scss">
.changelog section {
max-width: 960px;

2
docs/src/pages/Error.vue
View file

@ -11,7 +11,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
section {
margin-top: 64px;
text-align: center;

2
docs/src/pages/GettingStarted.vue
View file

@ -112,7 +112,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.main-content {
position: relative;
}

2
docs/src/pages/Introduction.vue
View file

@ -34,7 +34,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.introduction {
max-width: 960px;
margin: 0 auto;

2
docs/src/pages/components/Avatar.vue
View file

@ -137,7 +137,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-avatar + .md-avatar {
margin-left: 8px;
}

2
docs/src/pages/components/BottomBar.vue
View file

@ -283,7 +283,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-bottom-bar {
position: absolute;
right: 0;

2
docs/src/pages/components/ButtonToggle.vue
View file

@ -460,7 +460,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-button-toggle + .md-button-toggle {
margin-top: 16px;
}

2
docs/src/pages/components/Buttons.vue
View file

@ -448,7 +448,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.disabled-button {
margin-left: 8px;
}

2
docs/src/pages/components/Card.vue
View file

@ -1098,7 +1098,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.card-holder {
.md-card {
width: 100%;

2
docs/src/pages/components/Dialog.vue
View file

@ -578,7 +578,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.dialog-fab {
height: 200px;
}

2
docs/src/pages/components/EmptyComponent.vue
View file

@ -49,6 +49,6 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
</style>

2
docs/src/pages/components/Icon.vue
View file

@ -194,7 +194,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
strong {
margin: auto 16px auto 0;
display: inline-block;

2
docs/src/pages/components/InkRipple.vue
View file

@ -156,7 +156,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.has-ripple {
margin-bottom: 16px;
padding: 20px;

2
docs/src/pages/components/Input.vue
View file

@ -629,7 +629,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
</style>

2
docs/src/pages/components/List.vue
View file

@ -1170,7 +1170,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.phone-viewport {
height: 480px;
overflow: auto;

2
docs/src/pages/components/Menu.vue
View file

@ -630,7 +630,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-menu {
margin-right: 36px;
}

2
docs/src/pages/components/Progress.vue
View file

@ -99,7 +99,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.progress-area {
height: 44px;

2
docs/src/pages/components/Select.vue
View file

@ -491,7 +491,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.field-group {
display: flex;
}

2
docs/src/pages/components/Sidenav.vue
View file

@ -220,7 +220,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.phone-viewport p {
padding: 8px 16px;
}

2
docs/src/pages/components/Snackbar.vue
View file

@ -170,7 +170,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
</style>

2
docs/src/pages/components/SpeedDial.vue
View file

@ -273,7 +273,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.speed-dial-demo {
height: 250px;
}

2
docs/src/pages/components/Spinner.vue
View file

@ -194,7 +194,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.spinner-demo {
min-height: 55px;
}

69
docs/src/pages/components/Table.vue
View file

@ -207,6 +207,34 @@
</md-table-row>
</md-table-body>
</md-table>
<md-table slot="events">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Value</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>pagination</md-table-cell>
<md-table-cell>Emits an <code>Object</code> containing the current list size and current page.</md-table-cell>
<md-table-cell>Triggered when the user selects change pages or the pagination size changes.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>size</md-table-cell>
<md-table-cell>The <code>Number</code> of current list size.</md-table-cell>
<md-table-cell>Triggered when the pagination size changes.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>page</md-table-cell>
<md-table-cell>Emits the <code>Number</code> of current pagination page.</md-table-cell>
<md-table-cell>Triggered when the pagination page changes.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
<api-table name="md-table-alternate-header">
@ -233,7 +261,7 @@
<div slot="example">
<example-box card-title="Plain">
<div slot="demo">
<md-table v-once>
<md-table>
<md-table-header>
<md-table-row>
<md-table-head>Dessert (100g serving)</md-table-head>
@ -245,7 +273,10 @@
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-row
v-for="(row, index) in 5"
:md-item="{ item: index }"
:key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 4" :key="index" md-numeric>10</md-table-cell>
</md-table-row>
@ -291,7 +322,10 @@
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-row
v-for="(row, index) in 5"
:md-item="{ item: index }"
:key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 4" :key="index" md-numeric>10</md-table-cell>
</md-table-row>
@ -337,7 +371,11 @@
</md-button>
</md-toolbar>
<md-table :md-sort="sortInput.name" :md-sort-type="sortInput.type" @select="onSelect" @sort="onSort">
<md-table
:md-sort="sortInput.name"
:md-sort-type="sortInput.type"
@select="onSelect"
@sort="onSort">
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
@ -351,7 +389,12 @@
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, rowIndex) in nutrition" :key="rowIndex" :md-item="row" md-auto-select md-selection>
<md-table-row
v-for="(row, rowIndex) in nutrition"
:md-item="row"
:key="rowIndex"
md-auto-select
md-selection>
<md-table-cell v-for="(column, columnIndex) in row" :key="columnIndex" :md-numeric="columnIndex !== 'dessert' && columnIndex !== 'comment'" v-if="columnIndex !== 'type'">
{{ column }}
</md-table-cell>
@ -538,9 +581,16 @@
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, rowIndex) in nutrition" :key="rowIndex" :md-item="row" md-selection>
<md-table-row
v-for="(row, rowIndex) in nutrition"
:key="rowIndex"
:mdItem="row"
md-selection>
<md-table-cell v-for="(column, columnIndex) in row" :key="columnIndex" :md-numeric="columnIndex !== 'dessert' && columnIndex !== 'comment' && columnIndex !== 'type'">
<span v-if="columnIndex === 'comment'">{{ column }}</span>
<template v-if="columnIndex === 'comment'">
<span>{{ column }}</span>
<md-icon>message</md-icon>
</template>
<md-button class="md-icon-button" v-if="columnIndex === 'comment'">
<md-icon>edit</md-icon>
@ -681,7 +731,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-table + .md-table-card,
.md-table-card + .md-table-card {
margin-top: 24px;
@ -755,6 +805,9 @@
onPagination(page) {
this.page = page;
}
},
mounted() {
window.nutrition = this.nutrition;
}
};
</script>

2
docs/src/pages/components/Toolbar.vue
View file

@ -867,7 +867,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-toolbar + .md-toolbar {
margin-top: 16px;
}

2
docs/src/pages/components/Tooltip.vue
View file

@ -150,7 +150,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-button,
.md-avatar {
margin: 24px;

2
docs/src/pages/components/Whiteframe.vue
View file

@ -96,7 +96,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.md-whiteframe {
width: 100px;
height: 100px;

2
docs/src/pages/themes/Configuration.vue
View file

@ -135,7 +135,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
section {
max-width: 960px;

2
docs/src/pages/themes/DynamicThemes.vue
View file

@ -460,7 +460,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
section {
max-width: 960px;

2
docs/src/pages/ui-elements/Layout.vue
View file

@ -663,7 +663,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.layout-demo {
min-height: 100px;
}

2
docs/src/pages/ui-elements/Typography.vue
View file

@ -45,7 +45,7 @@
</page-content>
</template>
<style lang="sass" scoped>
<style lang="scss" scoped>
.demo > * {
margin: .5em 0;
display: block;

18
package.json
View file

@ -40,7 +40,7 @@
"release": "bash build/release.sh"
},
"dependencies": {
"vue": "^2.1.10"
"vue": "^2.3.3"
},
"devDependencies": {
"autoprefixer": "^6.7.4",
@ -76,19 +76,19 @@
"friendly-errors-webpack-plugin": "^1.1.3",
"highlight.js": "^9.9.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"optimize-js-plugin": "^0.0.4",
"ora": "^1.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.2",
"sass-loader": "^6.0.5",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^2.0.9",
"vue-html-loader": "^1.2.3",
"vue-loader": "^11.1.0",
"vue-router": "^2.2.1",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.1.10",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^12.2.1",
"vue-router": "^2.5.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-hot-middleware": "^2.17.0",

1
src/components/mdChips/mdChips.vue
View file

@ -2,6 +2,7 @@
<md-input-container class="md-chips" :class="[themeClass, classes]" @click.native="applyInputFocus">
<md-chip
v-for="chip in selectedChips"
:key="chip"
:md-editable="!mdStatic"
:md-deletable="!mdStatic"
:disabled="disabled"

5
src/components/mdInputContainer/mdAutocomplete.vue
View file

@ -21,8 +21,9 @@
@input="debounceUpdate"/>
<md-menu-content>
<md-menu-item v-for="item in items"
v-if="items.length"
<md-menu-item v-if="items.length"
v-for="item in items"
:key="item"
@keyup.enter="hit(item)"
@click.native="hit(item)">
{{ item[printAttribute] }}

1
src/components/mdSidenav/mdSidenav.scss
View file

@ -15,6 +15,7 @@
.md-sidenav-content,
.md-sidenav-backdrop {
position: fixed;
transform: initial;
}
}

20
src/components/mdTable/mdTable.scss
View file

@ -151,8 +151,19 @@
&.md-numeric {
text-align: right;
.md-icon {
margin: 0;
}
.md-table-cell-container {
justify-content: flex-end;
display: flex;
justify-content: center;
align-items: center;
.md-icon,
.md-button .md-icon {
margin: auto;
}
}
}
@ -182,6 +193,7 @@
.md-icon {
$size: 18px;
margin: auto;
width: $size;
min-width: $size;
@ -392,3 +404,9 @@
flex: 1;
}
}
// .md-table .md-table-cell.md-has-action .md-table-cell-container {
// display: flex;
// justify-content: center;
// align-items: center;
// }

55
src/components/mdTable/mdTable.vue
View file

@ -25,11 +25,21 @@
sortBy: this.mdSort,
hasRowSelection: false,
data: [],
numberOfRows: 0,
numberOfSelected: 0,
selectedRows: {}
selectedRows: []
};
},
computed: {
numberOfRows() {
return this.data ?
this.data.length :
0;
},
numberOfSelected() {
return this.selectedRows ?
this.selectedRows.length :
0;
}
},
methods: {
emitSort(name) {
this.sortBy = name;
@ -40,15 +50,42 @@
},
emitSelection() {
this.$emit('select', this.selectedRows);
},
removeRow(row, array = null) {
const list = array || this.data;
const index = list.indexOf(row);
if (index !== -1) {
list.splice(index, 1);
}
},
setRowSelection(isSelected, row) {
if (isSelected) {
this.selectedRows.push(row);
return;
}
this.removeRow(row, this.selectedRows);
},
// setRowSelection(isSelected, uuid) {
// const row = this.mappedRows[uuid];
//
// if (isSelected) {
// this.selectedRows.push(Object.assign({}, row));
// return;
// }
// const index = this.data.indexOf(row);
//
// if (index !== -1) {
// this.selectedRows.splice(index, 1);
// }
// },
setMultipleRowSelection(isSelected) {
this.selectedRows = isSelected ?
Object.assign([], this.data) :
[];
}
},
watch: {
data() {
this.numberOfRows = this.data.length;
},
selectedRows() {
this.numberOfSelected = Object.keys(this.selectedRows).length;
},
mdSort() {
this.sortBy = this.mdSort;
this.$emit('sortInput');

9
src/components/mdTable/mdTableAlternateHeader.vue
View file

@ -2,7 +2,7 @@
<div class="md-table-alternate-header" :class="[themeClass, classes]">
<md-toolbar>
<div class="md-counter">
<span ref="counter">{{ tableInstance.numberOfSelected }}</span>
<span ref="counter">{{ numberOfSelected }}</span>
<span>{{ mdSelectedLabel }}</span>
</div>
@ -17,19 +17,24 @@
export default {
name: 'md-table-alternate-header',
mixins: [theme],
props: {
mdSelectedLabel: {
type: String,
default: 'selected'
}
},
mixins: [theme],
data() {
return {
classes: {},
tableInstance: {}
};
},
computed: {
numberOfSelected() {
return this.tableInstance.numberOfSelected || 0;
}
},
mounted() {
this.parentCard = getClosestVueParent(this.$parent, 'md-table-card');

2
src/components/mdTable/mdTablePagination.vue
View file

@ -3,7 +3,7 @@
<span class="md-table-pagination-label">{{ mdLabel }}:</span>
<md-select v-model="currentSize" md-menu-class="md-pagination-select" @change="changeSize" v-if="mdPageOptions">
<md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
<md-option v-for="amount in mdPageOptions" :key="amount" :value="amount">{{ amount }}</md-option>
</md-select>
<span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>

103
src/components/mdTable/mdTableRow.vue
View file

@ -1,15 +1,26 @@
<template>
<tr class="md-table-row" :class="classes" @click="autoSelect">
<md-table-cell class="md-table-selection" v-if="hasSelection">
<md-checkbox v-model="checkbox" :disabled="isDisabled" @change="select"></md-checkbox>
<tr
class="md-table-row"
:class="classes"
@click="autoSelect"
@click.native="autoSelect">
<md-table-cell
v-if="hasSelection"
class="md-table-selection">
<md-checkbox
v-model="checkbox"
:disabled="isDisabled"
@change="select"
@change.native="select"/>
</md-table-cell>
<slot></slot>
<slot/>
</tr>
</template>
<script>
import getClosestVueParent from '../../core/utils/getClosestVueParent';
import uniqueId from '../../core/utils/uniqueId';
const transitionClass = 'md-transition-off';
@ -25,7 +36,8 @@
parentTable: {},
headRow: false,
checkbox: false,
index: 0
index: 0,
uuid: `mdrow_uuid_${uniqueId()}`
};
},
computed: {
@ -48,50 +60,41 @@
}
},
methods: {
setSelectedRow(value, index) {
if (value) {
this.parentTable.selectedRows[index] = this.parentTable.data[index];
++this.parentTable.numberOfSelected;
} else {
delete this.parentTable.selectedRows[index];
--this.parentTable.numberOfSelected;
}
setRowSelection(value, row) {
this.parentTable.setRowSelection(value, row);
},
handleSingleSelection(value) {
this.setSelectedRow(value, this.index - 1);
this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.numberOfRows;
this.parentTable.setRowSelection(value, this.mdItem);
this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.rowsCounter;
},
handleMultipleSelection(value) {
if (this.parentTable.numberOfRows > 25) {
this.parentTable.$el.classList.add(transitionClass);
}
this.parentTable.$children.forEach((row, index) => {
this.parentTable.$children.forEach((row) => {
row.checkbox = value;
if (!row.headRow) {
this.setSelectedRow(value, index - 1);
}
});
if (value) {
this.parentTable.numberOfSelected = this.parentTable.numberOfRows;
} else {
this.parentTable.numberOfSelected = 0;
}
this.parentTable.setMultipleRowSelection(value);
window.setTimeout(() => this.parentTable.$el.classList.remove(transitionClass));
window.setTimeout(() =>
this.parentTable.$el.classList.remove(transitionClass),
100);
},
select(value) {
if (this.hasSelection) {
if (this.headRow) {
this.handleMultipleSelection(value);
} else {
this.handleSingleSelection(value);
}
this.parentTable.emitSelection();
if (!this.hasSelection) {
return;
}
if (this.headRow) {
this.handleMultipleSelection(value);
} else {
this.handleSingleSelection(value);
}
this.parentTable.emitSelection();
this.$emit(value ? 'selected' : 'deselected', value);
},
autoSelect() {
if (this.mdAutoSelect && this.hasSelection) {
@ -99,25 +102,29 @@
this.handleSingleSelection(this.checkbox);
this.parentTable.emitSelection();
}
}
},
mounted() {
this.parentTable = getClosestVueParent(this.$parent, 'md-table');
},
startTableRow() {
this.parentTable = getClosestVueParent(this.$parent, 'md-table');
if (this.$el.parentNode.tagName.toLowerCase() === 'thead') {
this.headRow = true;
} else {
this.parentTable.numberOfRows++;
this.index = this.parentTable.numberOfRows;
if (this.$el.parentNode.tagName.toLowerCase() === 'thead') {
this.headRow = true;
} else {
if (!this.mdItem && this.mdSelection) {
throw new Error('You should set the md-item property when using mdSelection. Example: <md-table-row md-selection :md-item="ITEM" ...>');
}
if (this.mdSelection) {
this.parentTable.hasRowSelection = true;
}
if (this.mdItem) {
if (this.mdSelection) {
this.parentTable.hasRowSelection = true;
}
this.parentTable.data.push(this.mdItem);
}
}
},
destroyed() {
this.parentTable.removeRow(this.mdItem);
},
mounted() {
this.startTableRow();
}
};
</script>