Upgrade to vue alpha.6

Author: jods4

package-lock.json

@@ -2,13 +2,13 @@
   "name": "vue-datagrid",
   "version": "0.1.0",
   "dependencies": {
-    "vue": "^3.0.0-alpha.5"
+    "vue": "^3.0.0-alpha.6"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0-alpha.5",
+    "@vue/compiler-sfc": "^3.0.0-alpha.6",
     "css-loader": "^3.4.2",
     "ts-loader": "^6.2.1",
-    "typescript": "^3.8.1-rc",
+    "typescript": "^3.8.2",
     "vue-loader": "^16.0.0-alpha.3",
     "vue-style-loader": "^4.1.2",
     "webpack": "^4.41.6",

package.json

@@ -6,8 +6,7 @@
       <thead>
         <tr>
           <th v-if='selected' class='dg-header'>
-            <!-- FIXME: v-model='allSelected' when alpha.6 is published -->
-            <input type='checkbox' :checked='allSelected' @change='allSelected = $event.target.checked' :indeterminate='allSelected === 1' />
+            <input type='checkbox' v-model='allSelected' :indeterminate='allSelected == null' />
           </th>
           <th v-for='(c, i) of columns' 
               :key='i'
@@ -40,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { ref, watch } from 'vue';
+import { shallowRef as sref, watch } from 'vue';
 import { Column } from "./column";
 import { useSelection } from "./selection";
 import SortIndicator from './sort-indicator';
@@ -63,8 +62,8 @@ export default {
   },
 
   setup(props: { columns?: Column[], data?: object[] | Promise<object[]>, selected?: Set<object> }) {
-    const loading = ref(true);
-    const data = ref([] as object[]);
+    const loading = sref(true);
+    const data = sref([] as object[]);
     const selection = useSelection(data, props.selected);
     const sorting = useSorting(data);
     const virtual = useVirtual(sorting.data);

src/datagrid.vue

@@ -17,9 +17,9 @@ export function useSelection(data: Ref<object[]>, selected?: Set<object>) {
     allSelected: computed({ 
       get() {
         return selected.size === 0 ? false :
-          selected.size === data.value.length ? true : 1; // 1 is purposefully truthy (null or undefined is not)
+          selected.size === data.value.length ? true : null;
       }, 
-      set(value: boolean | 1) {
+      set(value: boolean | null) {
         if (value)
           data.value.forEach(selected.add, selected);
         else

src/selection.ts

@@ -38,7 +38,7 @@ export function useVirtual(data: Ref<object[]>) {
     const length = data.value.length;
     const { buffer, height, rowHeight, scrollTop } = state;
     const index = state.index = Math.max((scrollTop / rowHeight | 0) - buffer, 0);
-    const count = state.count = Math.min((height / rowHeight | 0) + 1 + buffer + buffer, data.value.length - index);
+    const count = state.count = Math.min((height / rowHeight | 0) + 1 + buffer + buffer, length - index);
     state.topGap = index * rowHeight;
     state.bottomGap = (length - count - index) * rowHeight;
   });