fix(nc-gui): add image cropper min height & width restriction

packages/nc-gui/components/general/ImageCropper.vue

@@ -12,7 +12,11 @@ interface Props {
     name: string
   }
   cropperConfig: {
-    aspectRatio?: number
+    stencilProps?: {
+      aspectRatio?: number
+    }
+    minHeight?: number
+    minWidth?: number
   }
   uploadConfig?: {
     path?: string
@@ -20,7 +24,6 @@ interface Props {
   showCropper: boolean
 }
 const { imageConfig, cropperConfig, uploadConfig, ...props } = defineProps<Props>()
-
 const emit = defineEmits(['update:showCropper', 'submit'])
 
 const showCropper = useVModel(props, 'showCropper', emit)
@@ -103,7 +106,9 @@ watch(showCropper, () => {
         class="nc-cropper relative"
         :src="imageConfig.src"
         :auto-zoom="true"
-        :stencil-props="cropperConfig?.aspectRatio ? { aspectRatio: cropperConfig.aspectRatio } : {}"
+        :stencil-props="cropperConfig?.stencilProps || {}"
+        :min-height="cropperConfig?.minHeight"
+        :min-width="cropperConfig?.minWidth"
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />

packages/nc-gui/components/smartsheet/Form.vue

@@ -140,7 +140,11 @@ const imageCropperData = ref<{
     name: string
   }
   cropperConfig: {
-    aspectRatio?: number
+    stencilProps: {
+      aspectRatio?: number
+    }
+    minHeight: number
+    minWidth: number
   }
   uploadConfig?: {
     path?: string
@@ -152,7 +156,11 @@ const imageCropperData = ref<{
     type: '',
     name: '',
   },
-  cropperConfig: {},
+  cropperConfig: {
+    stencilProps: {},
+    minHeight: 0,
+    minWidth: 0,
+  },
   uploadConfig: {
     path: '',
   },
@@ -470,12 +478,22 @@ const openUploadImage = (isUploadBanner: boolean) => {
   }
   if (isUploadBanner) {
     imageCropperData.value.cropperConfig = {
-      aspectRatio: 4 / 1,
+      ...imageCropperData.value.cropperConfig,
+      stencilProps: {
+        aspectRatio: 4 / 1,
+      },
+      minHeight: 0,
+      minWidth: 0,
     }
     imageCropperData.value.cropFor = 'banner'
   } else {
     imageCropperData.value.cropperConfig = {
-      aspectRatio: undefined,
+      ...imageCropperData.value.cropperConfig,
+      stencilProps: {
+        aspectRatio: undefined,
+      },
+      minHeight: 150,
+      minWidth: 150,
     }
     imageCropperData.value.cropFor = 'logo'
   }