From 7590a1d2bbe5204806ec275cd2956a7d7e4f45b4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 09:11:56 +0200
Subject: [PATCH] chore(gui-v2): add comments to `useDialog`

---
 .../nc-gui-v2/composables/useDialog/index.ts  | 41 +++++++++++++++++--
 .../[projectType]/[projectId]/index/index.vue |  5 +--
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useDialog/index.ts b/packages/nc-gui-v2/composables/useDialog/index.ts
index af4a05ca5c..79bb2e69ef 100644
--- a/packages/nc-gui-v2/composables/useDialog/index.ts
+++ b/packages/nc-gui-v2/composables/useDialog/index.ts
@@ -1,16 +1,49 @@
-import type { VNode } from '@vue/runtime-dom'
-import { render } from '@vue/runtime-dom'
+import type { DefineComponent, VNode } from '@vue/runtime-dom'
+import { isVNode, render } from '@vue/runtime-dom'
 import type { ComponentPublicInstance } from '@vue/runtime-core'
+import { isClient } from '@vueuse/core'
 import { createEventHook, h, ref, toReactive, tryOnScopeDispose, useNuxtApp, watch } from '#imports'
 
 /**
  * Programmatically create a component and attach it to the body (or a specific mount target), like a dialog or modal.
+ * This composable is not SSR friendly - it should be used only on the client.
+ *
+ * @param componentOrVNode The component to create and attach. Can be a VNode or a component definition.
+ * @param props The props to pass to the component.
+ * @param mountTarget The target to attach the component to. Defaults to the document body
+ *
+ * @example
+ * import { useDialog } from '#imports'
+ * import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+ *
+ * function openQuickImportDialog(type: string) {
+ *   // create a ref for showing/hiding the modal
+ *   const isOpen = ref(true)
+ *
+ *   const { close, vNode } = useDialog(DlgQuickImport, {
+ *     'modelValue': isOpen,
+ *     'importType': type,
+ *     'onUpdate:modelValue': closeDialog,
+ *   })
+ *
+ *   function closeDialog() {
+ *     // hide the modal
+ *     isOpen.value = false
+ *
+ *     // debounce destroying the component, so the modal transition can finish
+ *     close(1000)
+ *   }
+ * }
  */
 export function useDialog(
-  component: any,
+  componentOrVNode: DefineComponent<any, any, any> | VNode,
   props: NonNullable<Parameters<typeof h>[1]> = {},
   mountTarget?: Element | ComponentPublicInstance,
 ) {
+  if (typeof document === 'undefined' || !isClient) {
+    console.warn('[useDialog]: Cannot use outside of browser!')
+  }
+
   const closeHook = createEventHook<void>()
   const mountedHook = createEventHook<void>()
 
@@ -29,7 +62,7 @@ export function useDialog(
   const stop = watch(
     toReactive(props),
     (reactiveProps) => {
-      const vNode = h(component, reactiveProps)
+      const vNode = isVNode(componentOrVNode) ? componentOrVNode : h(componentOrVNode, reactiveProps)
 
       vNode.appContext = useNuxtApp().vueApp._context
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 7639df7928..8bf842f554 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -15,8 +15,6 @@ const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
-const currentMenu = ref<string[]>(['addORImport'])
-
 provide(TabMetaInj, activeTab)
 
 const icon = (tab: TabItem) => {
@@ -91,7 +89,8 @@ function openAirtableImportDialog() {
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
-                <component :is="icon(tab)" class="text-sm"></component>
+                <component :is="icon(tab)" class="text-sm" />
+
                 {{ tab.title }}
               </div>
             </template>