chore(nc-gui): cleanup

packages/nc-gui/components/dashboard/settings/AppStore.vue

@@ -77,6 +77,7 @@ onMounted(async () => {
     min-height="300"
     :footer="null"
     wrap-class-name="nc-modal-plugin-install"
+    v-bind="$attrs"
   >
     <LazyDashboardSettingsAppInstall
       v-if="pluginApp && showPluginInstallModal"

packages/nc-gui/components/erd/Flow.vue

@@ -83,12 +83,12 @@ onScopeDispose($destroy)
       position="bottom-right"
     >
       <div class="flex flex-col divide-y-1">
-        <div class="flex items-center gap-1 px-2 py-1">
+        <div class="flex items-center gap-1 p-2">
           <MdiTableLarge class="text-primary" />
           <div>{{ $t('objects.table') }}</div>
         </div>
 
-        <div class="flex items-center gap-1 px-2 py-1">
+        <div class="flex items-center gap-1 p-2">
           <MdiEyeCircleOutline class="text-primary" />
           <div>{{ $t('objects.sqlVIew') }}</div>
         </div>

packages/nc-gui/components/erd/RelationEdge.vue

@@ -95,7 +95,7 @@ export default {
       v-if="data.label?.length > 0 && (selected || isHovering)"
       :key="`edge-text-${id}.${showSkeleton}`"
       :class="[
-        showSkeleton ? '!text-5xl' : '!text-xs',
+        showSkeleton ? '!text-6xl' : '!text-xs',
         `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
       ]"
       :x="edgePath[1]"

packages/nc-gui/components/erd/View.vue

@@ -3,7 +3,7 @@ import { Panel } from '@vue-flow/additional-components'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { ErdFlowConfig } from './utils'
-import { ref, useGlobal, useMetas, useProject, watch } from '#imports'
+import { reactive, ref, useGlobal, useMetas, useProject, watch } from '#imports'
 
 const { table } = defineProps<{ table?: TableType }>()
 
@@ -19,7 +19,7 @@ let isLoading = $ref(true)
 
 const showAdvancedOptions = ref(false)
 
-const config = ref<ErdFlowConfig>({
+const config = reactive<ErdFlowConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
@@ -61,12 +61,12 @@ const populateTables = async () => {
   tables.value = localTables
     .filter(
       (t) =>
-        config.value.showMMTables ||
+        config.showMMTables ||
-        (!config.value.showMMTables && !t.mm) ||
+        (!config.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
         t.id === table?.id,
     )
-    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)
+    .filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews)
 
   isLoading = false
 }
@@ -82,9 +82,9 @@ watch(config, populateTables, {
 })
 
 watch(
-  () => config.value.showAllColumns,
+  () => config.showAllColumns,
   () => {
-    config.value.showPkAndFk = config.value.showAllColumns
+    config.showPkAndFk = config.showAllColumns
   },
 )
 </script>