refactor(nc-gui): use panel for erd config options

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

@@ -65,7 +65,7 @@ onScopeDispose($destroy)
 
 <template>
   <VueFlow v-model="elements">
-    <Controls class="rounded" position="top-right" :show-fit-view="false" :show-interactive="false" />
+    <Controls class="rounded" position="bottom-left" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="{ data }">
       <ErdTableNode :data="data" :show-skeleton="showSkeleton" />
@@ -104,6 +104,8 @@ onScopeDispose($destroy)
         Zoom in to view columns
       </div>
     </Transition>
+
+    <slot />
   </VueFlow>
 </template>
 

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Panel } from '@vue-flow/additional-components'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { ErdFlowConfig } from './utils'
@@ -104,26 +105,23 @@ watch(
     </GeneralOverlay>
 
     <div class="relative h-full">
-      <LazyErdFlow :tables="tables" :config="config" />
+      <LazyErdFlow :tables="tables" :config="config">
-
+        <Panel
-      <div
+          class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu"
-        class="absolute top-3.5 right-12 flex-col bg-white shadow-sm px-3 py-0.75 border-1 border-gray-100 rounded z-50 space-y-1 nc-erd-context-menu z-50"
+          position="top-right"
         >
-        <div class="flex flex-row items-center">
+          <div class="flex items-center gap-2">
             <a-checkbox
               v-model:checked="config.showAllColumns"
               v-e="['c:erd:showAllColumns']"
               class="nc-erd-showColumns-checkbox"
             />
-          <span
+            <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
-            class="ml-2 select-none nc-erd-showColumns-label"
-            style="font-size: 0.65rem"
-            @dblclick="showAdvancedOptions = true"
-          >
               {{ $t('activity.erd.showColumns') }}
             </span>
           </div>
-        <div class="flex flex-row items-center">
+
+          <div class="flex items-center gap-2">
             <a-checkbox
               v-model:checked="config.showPkAndFk"
               v-e="['c:erd:showPkAndFk']"
@@ -136,25 +134,29 @@ watch(
               }"
               :disabled="!config.showAllColumns"
             />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
           </div>
-        <div v-if="!table" class="flex flex-row items-center">
+
+          <div v-if="!table" class="flex items-center gap-2">
             <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
           </div>
+
           <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
             <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
             <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
           </div>
-        <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+
+          <div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
             <a-checkbox
               v-model:checked="config.showJunctionTableNames"
               v-e="['c:erd:showJunctionTableNames']"
               class="nc-erd-showJunctionTableNames-checkbox"
             />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
-        </div>
           </div>
+        </Panel>
+      </LazyErdFlow>
     </div>
   </div>
 </template>