refactor: scrolling and outsideclick directive

src/components/WithScroll.vue

@@ -1,3 +1,8 @@
+<template>
+  <div class="scroll-container">
+    <slot></slot>
+  </div>
+</template>
 <script>
 export default {
   name: 'WithScroll',
@@ -14,8 +19,23 @@ export default {
       delete this.listener;
     }
   },
-  render() {
-    return this.$slots.default[0];
-  },
 };
 </script>
+<style>
+.scroll-container {
+  height: calc(100vh - 12rem);
+}
+.scroll-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scroll-container::-webkit-scrollbar-thumb {
+  background-color: theme('colors.gray.200');
+}
+.scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: theme('colors.gray.300');
+}
+.scroll-container::-webkit-scrollbar-track {
+  background-color: white;
+}
+</style>

src/pages/Report.vue

@@ -7,7 +7,6 @@
       <template #actions>
         <DropdownWithActions
           v-for="group of actionGroups"
-          @click="group.action(reportData, filters)"
           :key="group.label"
           :type="group.type"
           :actions="group.actions"
@@ -60,37 +59,39 @@
             </div>
           </Row>
         </div>
-        <WithScroll @scroll="onBodyScroll">
+        <WithScroll
-          <div class="flex-1 overflow-auto report-scroll-container">
+          @scroll="onBodyScroll"
-            <Row
+          class="flex-1 overflow-auto"
-              v-show="row.isShown"
+          style="height: calc(100vh - 12rem)"
-              v-for="(row, i) in rows"
+        >
-              :key="i"
+          <Row
-              gap="2rem"
+            v-show="row.isShown"
-              :grid-template-columns="gridTemplateColumns"
+            v-for="(row, i) in rows"
+            :key="i"
+            gap="2rem"
+            :grid-template-columns="gridTemplateColumns"
+          >
+            <div
+              class="py-4 text-base overflow-scroll no-scrollbar"
+              :class="getCellClasses(row, column)"
+              v-for="column in columns"
+              :key="column.label"
+              @click="toggleChildren(row, i)"
             >
-              <div
+              <div class="inline-flex">
-                class="py-4 text-base overflow-scroll no-scrollbar"
+                <feather-icon
-                :class="getCellClasses(row, column)"
+                  v-if="row.isBranch && !row.isLeaf && column === columns[0]"
-                v-for="column in columns"
+                  class="flex-shrink-0 w-4 h-4 mr-2"
-                :key="column.label"
+                  :name="row.expanded ? 'chevron-down' : 'chevron-right'"
-                @click="toggleChildren(row, i)"
+                />
-              >
+                <span class="truncate" :class="{ 'bg-gray-100': loading }">
-                <div class="inline-flex">
+                  <component
-                  <feather-icon
+                    :is="cellComponent(row[column.fieldname], column)"
-                    v-if="row.isBranch && !row.isLeaf && column === columns[0]"
-                    class="flex-shrink-0 w-4 h-4 mr-2"
-                    :name="row.expanded ? 'chevron-down' : 'chevron-right'"
                   />
-                  <span class="truncate" :class="{ 'bg-gray-100': loading }">
+                </span>
-                    <component
-                      :is="cellComponent(row[column.fieldname], column)"
-                    />
-                  </span>
-                </div>
               </div>
-            </Row>
+            </div>
-          </div>
+          </Row>
         </WithScroll>
       </div>
     </div>
@@ -372,22 +373,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.report-scroll-container {
-  height: calc(100vh - 12rem);
-}
-.report-scroll-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.report-scroll-container::-webkit-scrollbar-thumb {
-  background-color: theme('colors.gray.200');
-}
-.report-scroll-container::-webkit-scrollbar-thumb:hover {
-  background-color: theme('colors.gray.300');
-}
-.report-scroll-container::-webkit-scrollbar-track {
-  background-color: white;
-}
-</style>

src/ui.js

@@ -8,7 +8,7 @@ function onDocumentClick(e, el, fn) {
 }
 
 export const outsideClickDirective = {
-  bind(el, binding) {
+  beforeMount(el, binding) {
     el.dataset.outsideClickIndex = instances.length;
 
     const fn = binding.value;
@@ -19,7 +19,7 @@ export const outsideClickDirective = {
     document.addEventListener('click', click);
     instances.push(click);
   },
-  unbind(el) {
+  unmounted(el) {
     const index = el.dataset.outsideClickIndex;
     const handler = instances[index];
     document.addEventListener('click', handler);