fix(nc-gui): Add detached expanded form

packages/nc-gui/components/smartsheet/expanded-form/Detached.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useExpandedFormDetached } from '#imports'
+
+const { isOpen, state, row, rowId, loadRow: shouldLoadRow, meta, useMetaFields, view, close } = useExpandedFormDetached()
+</script>
+
+<template>
+  <LazySmartsheetExpandedForm
+    v-if="!!row && !!meta"
+    v-model="isOpen"
+    :row="row"
+    :load-row="shouldLoadRow"
+    :meta="meta"
+    :row-id="rowId"
+    :state="state"
+    :use-meta-fields="useMetaFields"
+    :view="view"
+    @cancel="close"
+  />
+</template>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -9,7 +9,10 @@ import {
   MetaInj,
   ReloadRowDataHookInj,
   computedInject,
+  createEventHook,
+  inject,
   message,
+  onBeforeMount,
   provide,
   ref,
   toRef,
@@ -57,11 +60,12 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
-if (props.loadRow) {
+onBeforeMount(async () => {
+  if (props.loadRow) {
     await loadRow()
-}
+  }
 
-if (props.rowId) {
+  if (props.rowId) {
     try {
       await loadRow(props.rowId)
     } catch (e: any) {
@@ -71,7 +75,8 @@ if (props.rowId) {
         router.replace({ query: {} })
       } else throw e
     }
-}
+  }
+})
 
 useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
@@ -134,6 +139,7 @@ export default {
     width="min(90vw,1000px)"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
+    destroy-on-close
     class="nc-drawer-expanded-form"
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -7,6 +7,7 @@ import {
   IsLockedInj,
   MetaInj,
   OpenNewRecordFormHookInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   TabMetaInj,
@@ -55,6 +56,7 @@ provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
 provide(TabMetaInj, activeTab)
+provide(ReadonlyInj, false)
 </script>
 
 <template>
@@ -79,6 +81,8 @@ provide(TabMetaInj, activeTab)
       </Transition>
     </div>
 
+    <LazySmartsheetExpandedFormDetached />
+
     <!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
     <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
   </div>

packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-import { ActiveCellInj, IsFormInj, IsLockedInj, ReadonlyInj, inject, ref, useLTARStoreOrThrow, useUIPermission } from '#imports'
+import {
+  ActiveCellInj,
+  IsFormInj,
+  IsLockedInj,
+  ReadonlyInj,
+  inject,
+  ref,
+  useExpandedFormDetached,
+  useLTARStoreOrThrow,
+  useUIPermission,
+} from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -22,7 +32,19 @@ const isForm = inject(IsFormInj)!
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const expandedFormDlg = ref(false)
+const { open } = useExpandedFormDetached()
+
+function openExpandedForm() {
+  if (!readOnly && !isLocked.value) {
+    open({
+      isOpen: true,
+      row: { row: item, rowMeta: {}, oldRow: { ...item } },
+      meta: relatedTableMeta.value,
+      loadRow: true,
+      useMetaFields: true,
+    })
+  }
+}
 </script>
 
 <script lang="ts">
@@ -35,24 +57,13 @@ export default {
   <div
     class="chip group py-1 px-2 mr-1 my-1 flex items-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
-    @click="expandedFormDlg = true"
+    @click="openExpandedForm"
   >
     <span class="name">{{ value }}</span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
-
-    <Suspense>
-      <SmartsheetExpandedForm
-        v-if="!readOnly && !isLocked && expandedFormDlg"
-        v-model="expandedFormDlg"
-        :row="{ row: item, rowMeta: {}, oldRow: { ...item } }"
-        :meta="relatedTableMeta"
-        load-row
-        use-meta-fields
-      />
-    </Suspense>
   </div>
 </template>
 

packages/nc-gui/composables/useExpandedFormDetached/index.ts

@@ -0,0 +1,58 @@
+import type { TableType, ViewType } from 'nocodb-sdk'
+import { reactive, toRefs, useInjectionState } from '#imports'
+import type { Row } from '~/lib'
+
+interface UseExpandedFormDetachedProps {
+  isOpen?: boolean
+  row: Row | null
+  state?: Record<string, any> | null
+  meta: TableType
+  loadRow?: boolean
+  useMetaFields?: boolean
+  rowId?: string
+  view?: ViewType
+}
+
+const [setup, use] = useInjectionState(() => {
+  const state = reactive<UseExpandedFormDetachedProps>({
+    isOpen: false,
+    state: null,
+    loadRow: false,
+    useMetaFields: false,
+    row: null,
+    meta: null as any,
+  })
+
+  const open = (props: UseExpandedFormDetachedProps) => {
+    state.state = props.state
+    state.loadRow = props.loadRow
+    state.useMetaFields = props.useMetaFields
+    state.rowId = props.rowId
+    state.row = props.row
+    state.loadRow = props.loadRow
+    state.meta = props.meta
+    state.isOpen = props.isOpen
+
+    state.isOpen = true
+  }
+
+  const close = () => {
+    state.isOpen = false
+  }
+
+  return {
+    ...toRefs(state),
+    open,
+    close,
+  }
+})
+
+export function useExpandedFormDetached() {
+  const state = use()
+
+  if (!state) {
+    return setup()
+  }
+
+  return state
+}