perf: use composable

src/components/VnTable/VnTable.vue

@@ -19,6 +19,7 @@ import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
 import { dashIfEmpty, toDate } from 'src/filters';
+import { useTableHeight } from './filters/useTableHeight';
 
 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -118,7 +119,7 @@ const $props = defineProps({
     },
     tableHeight: {
         type: String,
-        default: calcTableHeight,
+        default: undefined,
     },
     footer: {
         type: Boolean,
@@ -167,6 +168,7 @@ const tableRef = ref();
 const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
+const tableHeight = useTableHeight();
 
 const editingRow = ref(null);
 const editingField = ref(null);
@@ -679,7 +681,7 @@ const rowCtrlClickFunction = computed(() => {
                 table-header-class="bg-header"
                 card-container-class="grid-three"
                 flat
-                :style="isTableMode && `max-height: ${tableHeight}`"
+                :style="isTableMode && `max-height: ${$props.tableHeight || tableHeight}`"
                 :virtual-scroll="isTableMode"
                 @virtual-scroll="handleScroll"
                 @row-click="(event, row) => handleRowClick(event, row)"

src/components/VnTable/filters/useTableHeight.js

@@ -0,0 +1,18 @@
+import { onMounted, nextTick, ref } from 'vue';
+
+export function useTableHeight() {
+    const tableHeight = ref('100vh');
+
+    onMounted(async () => {
+        await nextTick();
+        let height = 100;
+        Array.from(document.querySelectorAll('[role="toolbar"]'))
+            .filter((element) => window.getComputedStyle(element).display !== 'none')
+            .forEach(() => {
+                height -= 10;
+            });
+        tableHeight.value = `${height}vh`;
+    });
+
+    return tableHeight;
+}