fix(nc-gui): add screenshots & dynamic modal size support per extension

packages/nc-gui/components/extensions/Details.vue

@@ -67,8 +67,7 @@ const detailsBody = computed(() => {
     v-model:visible="vModel"
     :class="{ active: vModel }"
     :footer="null"
-    :width="1154"
+    size="lg"
-    size="medium"
     wrap-class-name="nc-modal-extension-details"
   >
     <div v-if="activeExtension" class="flex flex-col w-full h-full">
@@ -172,7 +171,7 @@ const detailsBody = computed(() => {
 
 <style lang="scss" scoped>
 .extension-details {
-  @apply flex w-full h-[calc(100%_-_65px)];
+  @apply flex w-full h-[calc(100%_-_83px)];
 
   .extension-details-left {
     @apply p-6 flex-1 flex flex-col gap-6 nc-scrollbar-thin;
@@ -202,8 +201,8 @@ const detailsBody = computed(() => {
   }
   .nc-modal {
     @apply !p-0;
-    height: min(calc(100vh - 100px), 1024px);
+    height: min(calc(100vh - 100px), 864px);
-    max-height: min(calc(100vh - 100px), 1024px) !important;
+    max-height: min(calc(100vh - 100px), 864px) !important;
 
     .nc-edit-or-add-integration-left-panel {
       @apply w-full p-6 flex-1 flex justify-center;

packages/nc-gui/components/extensions/Extension.vue

@@ -30,7 +30,11 @@ const extensionManifest = computed<ExtensionManifest | undefined>(() => {
   return availableExtensions.value.find((ext) => ext.id === extension.value?.extensionId)
 })
 
-const { fullscreen, collapsed } = useProvideExtensionHelper(extension, extensionManifest, activeError)
+const {
+  fullscreen,
+  fullscreenModalSize: currenExtensionModalSize,
+  collapsed,
+} = useProvideExtensionHelper(extension, extensionManifest, activeError)
 
 const { height } = useElementSize(extensionRef)
 
@@ -44,17 +48,8 @@ const extensionHeight = computed(() => {
   return extensionManifest.value?.config?.contentMinHeight
 })
 
-const fullscreenModalMaxWidth = computed(() => {
+const fullscreenModalSize = computed(() => {
-  const modalMaxWidth = {
+  return currenExtensionModalSize.value ? modalSizes[currenExtensionModalSize.value] || modalSizes.lg : modalSizes.lg
-    xs: 'min(calc(100vw - 32px), 448px)',
-    sm: 'min(calc(100vw - 32px), 640px)',
-    md: 'min(calc(100vw - 48px), 900px)',
-    lg: 'min(calc(100vw - 48px), 1280px)',
-  }
-
-  return extensionManifest.value?.config?.modalMaxWith
-    ? modalMaxWidth[extensionManifest.value?.config?.modalMaxWith] || modalMaxWidth.lg
-    : modalMaxWidth.lg
 })
 
 // close fullscreen on clicking extensionModalRef directly
@@ -174,7 +169,8 @@ eventBus.on((event, payload) => {
               :style="
                 fullscreen
                   ? {
-                      maxWidth: fullscreenModalMaxWidth,
+                      maxWidth: fullscreenModalSize.width,
+                      maxHeight: fullscreenModalSize.height,
                     }
                   : {}
               "
@@ -223,10 +219,10 @@ eventBus.on((event, payload) => {
 }
 
 .extension-modal {
-  @apply absolute top-0 left-0 z-1000 w-full h-full bg-black bg-opacity-50;
+  @apply absolute top-0 left-0 z-1000 w-full h-full bg-black bg-opacity-50 flex items-center justify-center;
 
   .extension-modal-content {
-    @apply bg-white rounded-2xl w-[90%] h-[90vh] mt-[5vh] mx-auto flex flex-col;
+    @apply bg-white rounded-2xl w-[90%] h-[90vh]  mx-auto flex flex-col;
   }
 }
 

packages/nc-gui/components/extensions/Market.vue

@@ -75,8 +75,7 @@ const handleSetActiveTab = (tab: TabItem) => {
     v-model:visible="vModel"
     :class="{ active: vModel }"
     :footer="null"
-    :width="1280"
+    size="lg"
-    size="medium"
     wrap-class-name="nc-modal-extension-market"
   >
     <div class="h-full">
@@ -228,8 +227,8 @@ const handleSetActiveTab = (tab: TabItem) => {
 .nc-modal-extension-market {
   .nc-modal {
     @apply !p-0;
-    height: min(calc(100vh - 100px), 1024px);
+    height: min(calc(100vh - 100px), 864px);
-    max-height: min(calc(100vh - 100px), 1024px) !important;
+    max-height: min(calc(100vh - 100px), 864px) !important;
 
     .nc-edit-or-add-integration-left-panel {
       @apply w-full p-6 flex-1 flex justify-center;

packages/nc-gui/components/nc/Modal.vue

@@ -3,7 +3,8 @@ const props = withDefaults(
   defineProps<{
     visible: boolean
     width?: string | number
-    size?: 'small' | 'medium' | 'large'
+    height?: string | number
+    size?: 'small' | 'medium' | 'large' | keyof typeof modalSizes
     destroyOnClose?: boolean
     maskClosable?: boolean
     showSeparator?: boolean
@@ -22,7 +23,7 @@ const props = withDefaults(
 
 const emits = defineEmits(['update:visible'])
 
-const { width: propWidth, destroyOnClose, wrapClassName: _wrapClassName, showSeparator } = props
+const { width: propWidth, height: propHeight, destroyOnClose, wrapClassName: _wrapClassName, showSeparator } = props
 
 const { maskClosable } = toRefs(props)
 
@@ -49,6 +50,10 @@ const width = computed(() => {
     return '80rem'
   }
 
+  if (modalSizes[props.size]) {
+    return modalSizes[props.size].width
+  }
+
   return 'max(30vw, 600px)'
 })
 
@@ -57,6 +62,10 @@ const height = computed(() => {
     return '95vh'
   }
 
+  if (propHeight) {
+    return propHeight
+  }
+
   if (props.size === 'small') {
     return 'auto'
   }
@@ -69,6 +78,10 @@ const height = computed(() => {
     return '80vh'
   }
 
+  if (modalSizes[props.size]) {
+    return modalSizes[props.size].height
+  }
+
   return 'auto'
 })
 

packages/nc-gui/composables/useExtensionHelper.ts

@@ -25,6 +25,8 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
 
     const showExpandBtn = ref(true)
 
+    const fullscreenModalSize = ref<keyof typeof modalSizes>(extensionManifest.value?.config?.modalSize || 'lg')
+
     const collapsed = computed({
       get: () => extension.value?.meta?.collapsed ?? false,
       set: (value) => {
@@ -218,6 +220,7 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
       activeError,
       tables,
       showExpandBtn,
+      fullscreenModalSize,
       getViewsForTable,
       getData,
       getTableMeta,

packages/nc-gui/composables/useExtensions.ts

@@ -34,8 +34,8 @@ export interface ExtensionManifest {
     title: string
     href: string
   }[]
-  config?: {
+  config: {
-    modalMaxWith?: 'xs' | 'sm' | 'md' | 'lg'
+    modalSize?: 'xs' | 'sm' | 'md' | 'lg'
     contentMinHeight?: string
   }
 }
@@ -390,6 +390,13 @@ export const useExtensions = createSharedComposable(() => {
             manifest.links = []
           }
 
+          if (!manifest?.config || !manifest?.config?.modalSize) {
+            manifest.config = {
+              ...(manifest.config || {}),
+              modalSize: 'lg',
+            }
+          }
+
           if (manifest?.disabled !== true) {
             availableExtensions.value.push(manifest)
 

packages/nc-gui/extensions/data-exporter/description.md

@@ -25,3 +25,12 @@ Elevate your data handling capabilities with the NocoDB Data Exporter extension!
         </svg>
     </div>
 </a>
+
+</br></br>
+
+<div class="flex">
+    <img src="data-exporter/assets/recent-exports.png" width="50%" class="object-contain"/>
+</div>
+<div>
+ <img src="data-exporter/assets/recent-exports-modal.png" width="100%" class="object-contain"/>
+</div>

packages/nc-gui/extensions/data-exporter/manifest.json

@@ -18,7 +18,7 @@
   },
   "links": [],
   "config": {
-    "modalMaxWith": "sm",
+    "modalSize": "sm",
     "contentMinHeight": "310px"
   }
 }

packages/nc-gui/utils/commonUtils.ts

@@ -0,0 +1,18 @@
+export const modalSizes = {
+  xs: {
+    width: 'min(calc(100vw - 32px), 448px)',
+    height: 'min(90vh, 448px)',
+  },
+  sm: {
+    width: 'min(calc(100vw - 32px), 640px)',
+    height: 'min(90vh, 424px)',
+  },
+  md: {
+    width: 'min(calc(100vw - 48px), 900px)',
+    height: 'min(90vh, 540px)',
+  },
+  lg: {
+    width: 'min(calc(100vw - 48px), 1280px)',
+    height: 'min(90vh, 864px)',
+  },
+}