chore(nc-gui): lint

packages/nc-gui/assets/style.scss

@@ -249,9 +249,3 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
-
-.nc-modal-erd {
-  .ant-modal {
-    transform: none !important;
-  }
-}

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

@@ -24,6 +24,8 @@ const { metasWithIdAsKey } = useMetas()
 
 const { $destroy, fitView } = useVueFlow()
 
+const isTransitioning = ref(true)
+
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
@@ -193,10 +195,15 @@ init()
 onScopeDispose($destroy)
 
 watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre' })
+
+useEventListener('transitionend', () => {
+  isTransitioning.value = false
+})
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
+  <Transition name="layout" mode="out-in">
+    <VueFlow v-if="!isTransitioning" :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
       <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
 
       <template #node-custom="props">
@@ -211,7 +218,7 @@ watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre'
 
       <div
         v-if="!config.singleTableMode"
-      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+        class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
         style="font-size: 0.6rem"
       >
         <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
@@ -224,4 +231,5 @@ watch([() => tables, () => config], () => init(true), { deep: true, flush: 'pre'
         </div>
       </div>
     </VueFlow>
+  </Transition>
 </template>

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -245,7 +245,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.ant-dropdown-menu-submenu-title) {
   @apply py-0;
 }