Improve logic of selection inside table

.eslintrc

@@ -26,7 +26,8 @@
   },
   "globals": {
     "arguments": true,
-    "window": true
+    "window": true,
+    "Promise": true
   },
   "root": true,
   "parserOptions": {

docs/src/pages/components/Table.vue

@@ -25,7 +25,7 @@
             </thead>
 
             <tbody>
-              <md-table-row v-for="test in 10">
+              <md-table-row v-for="test in 100">
                 <td>Cell 1</td>
                 <td>Cell 2</td>
                 <td>Cell 3</td>

package.json

@@ -42,7 +42,9 @@
   },
   "dependencies": {
     "autosize": "^3.0.17",
+    "chokidar": "^1.6.1",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
+    "node-sass": "3.10.1",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
     "vue": "^2.0.2"
   },

src/components/mdCheckbox/mdCheckbox.scss

@@ -8,7 +8,6 @@ $checkbox-ripple-size: 48px;
   margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
-  transform: translate3D(0, 0, 0);
 
   .md-checkbox-container {
     width: $checkbox-size;
@@ -17,6 +16,7 @@ $checkbox-ripple-size: 48px;
     border-radius: 2px;
     border: 2px solid rgba(#000, .54);
     transition: $swift-ease-out;
+    transform: translate3D(0, 0, 0);
 
     &:after {
       width: 6px;

src/components/mdTable/mdTable.scss

@@ -4,6 +4,14 @@
   display: flex;
   flex-flow: column wrap;
 
+  &.md-transition-off {
+    tr,
+    .md-checkbox .md-checkbox-container,
+    .md-checkbox .md-checkbox-container:after {
+      transition: none !important;
+    }
+  }
+
   table {
     width: 100%;
     border-spacing: 0;
@@ -40,7 +48,6 @@
     height: 56px;
     position: relative;
     overflow: hidden;
-    transition: $swift-ease-out;
     color: rgba(#000, .54);
     font-size: 12px;
     line-height: 16px;

src/components/mdTable/mdTable.vue

@@ -16,7 +16,8 @@
     data() {
       return {
         numberOfRows: 0,
-        selectedRows: []
+        numberOfSelected: 0,
+        selectedRows: {}
       };
     },
     computed: {

src/components/mdTable/mdTableRow.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+  const transitionClass = 'md-transition-off';
+
   export default {
     data() {
       return {
@@ -25,25 +27,34 @@
     },
     methods: {
       setSelectedRow(value, index) {
-        let arrayIndex = this.$parent.selectedRows.indexOf(index);
-
-        if (arrayIndex >= 0) {
-          this.$parent.selectedRows.splice(arrayIndex, 1);
-        }
-
         if (value) {
-          this.$parent.selectedRows.push(index);
+          this.$parent.selectedRows[index] = value;
+          ++this.$parent.numberOfSelected;
+        } else {
+          delete this.$parent.selectedRows[index];
+          --this.$parent.numberOfSelected;
         }
       },
       handleSingleSelection(value) {
         this.setSelectedRow(value, this.index);
-        this.$parent.$children[0].checkbox = this.$parent.selectedRows.length >= this.$parent.numberOfRows;
+        this.$parent.$children[0].checkbox = this.$parent.numberOfSelected >= this.$parent.numberOfRows;
       },
       handleMultipleSelection(value) {
-        this.$parent.$children.forEach((row, index) => {
+        this.$parent.$el.classList.add(transitionClass);
+
+        this.$parent.$children.forEach((row) => {
           row.checkbox = value;
-          this.setSelectedRow(value, index + 1);
         });
+
+        if (value) {
+          /*this.$parent.selectedRows = {}; //and so on, this can be lazly created the first time or on component boot*/
+          this.$parent.numberOfSelected = this.$parent.numberOfRows;
+        } else {
+          /*this.$parent.selectedRows = {};*/
+          this.$parent.numberOfSelected = 0;
+        }
+
+        window.setTimeout(() => this.$parent.$el.classList.remove(transitionClass));
       },
       select(value) {
         if (this.$parent.mdRowSelection) {

yarn.lock

@@ -1123,6 +1123,21 @@ change-case@3.0.x:
     upper-case "^1.1.1"
     upper-case-first "^1.1.0"
 
+chokidar:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
 chokidar@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.0.tgz#90c32ad4802901d7713de532dc284e96a63ad058"
@@ -3221,7 +3236,7 @@ node-pre-gyp@^0.6.29:
     tar "~2.2.0"
     tar-pack "~3.1.0"
 
-node-sass@^3.10.1:
+node-sass@3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.10.1.tgz#c535b2e1a5439240591e06d7308cb663820d616c"
   dependencies: