From f7afcddd3a6fe5a2cab3295e8a0e80c4cee3e907 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Thu, 13 Mar 2025 15:28:00 +0200
Subject: [PATCH] feat: add minWidth, minListWidth, and minShowWidth options
 for preview image dimensions

---
 custom/preview.vue | 14 +++++++++++---
 index.ts           |  3 +++
 types.ts           | 16 ++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/custom/preview.vue b/custom/preview.vue
index d20c756..7f0be1c 100644
--- a/custom/preview.vue
+++ b/custom/preview.vue
@@ -5,7 +5,7 @@
         v-if="contentType && contentType.startsWith('image')"
         :src="url" 
         class="rounded-md" 
-        :style="maxWidth"
+        :style="[maxWidth, minWidth]"
         ref="img"
         data-zoomable
         @click.stop="zoom.open()" 
@@ -51,12 +51,12 @@
 </style>
 
 <style scoped>
-  img {
+  /* img {
     min-width: 150px;
   }
   video {
     min-width: 200px;
-  }
+  } */
 </style>
 <script setup>
 import { ref, computed , onMounted, watch} from 'vue'
@@ -86,6 +86,14 @@ const maxWidth = computed(() => {
   return width ? { maxWidth: width } : {};
 });
 
+const minWidth = computed(() => {
+  const isShowPage = route.path.includes('/show/');
+  const width = isShowPage 
+    ? (props.meta.minShowWidth || props.meta.minWidth)
+    : (props.meta.minListWidth || props.meta.minWidth);
+
+  return width ? { minWidth: width } : {};
+});
 // since we have no way to know the content type of the file, we will try to guess it from extension
 // for better experience probably we should check whether user saves content type in the database and use it here
 const contentType = computed(() => {
diff --git a/index.ts b/index.ts
index cd8e834..209da64 100644
--- a/index.ts
+++ b/index.ts
@@ -129,6 +129,9 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
       maxWidth: this.options.preview?.maxWidth,
       maxListWidth: this.options.preview?.maxListWidth,
       maxShowWidth: this.options.preview?.maxShowWidth,
+      minWidth: this.options.preview?.minWidth,
+      minListWidth: this.options.preview?.minListWidth,
+      minShowWidth: this.options.preview?.minShowWidth,
     };
     // define components which will be imported from other components
     this.componentPath('imageGenerator.vue');
diff --git a/types.ts b/types.ts
index d1395e7..87dd227 100644
--- a/types.ts
+++ b/types.ts
@@ -78,6 +78,22 @@ export type PluginOptions = {
      * Maximum width of the preview image in show view
      */
     maxShowWidth?: string,
+    
+
+    /**
+     * Minimum width of the preview image
+     */
+    minWidth?: string,
+
+    /**
+     * Minimum width of the preview image in list view
+     */
+    minListWidth?: string,
+
+    /**
+     * Minimum width of the preview image in show view
+     */
+    minShowWidth?: string,
 
     /**
      * Used to display preview (if it is image) in list and show views.