Merge pull request #2 from devforth/preview-width

feat: add maxListWidth and maxShowWidth options for preview image dim…

Author: ivictbor

Diff for: custom/preview.vue

@@ -61,6 +61,7 @@
 <script setup>
 import { ref, computed , onMounted, watch} from 'vue'
 import mediumZoom from 'medium-zoom'
+import { useRoute } from 'vue-router'
 
 const img = ref(null);
 const zoom = ref(null);
@@ -71,12 +72,19 @@ const props = defineProps({
   meta: Object,
 })
 
+const route = useRoute();
 const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
 });
 
-const maxWidth = computed(() => props.meta.maxWidth ? { maxWidth: props.meta.maxWidth } : {});
+const maxWidth = computed(() => {
+  const isShowPage = route.path.includes('/show/');
+  const width = isShowPage 
+    ? (props.meta.maxShowWidth || props.meta.maxWidth)
+    : (props.meta.maxListWidth || props.meta.maxWidth);
 
+  return width ? { maxWidth: 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

Diff for: index.ts

@@ -127,6 +127,8 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
       pathColumnLabel: resourceConfig.columns[pathColumnIndex].label,
       fieldsForContext: this.options.generation?.fieldsForContext,
       maxWidth: this.options.preview?.maxWidth,
+      maxListWidth: this.options.preview?.maxListWidth,
+      maxShowWidth: this.options.preview?.maxShowWidth,
     };
     // define components which will be imported from other components
     this.componentPath('imageGenerator.vue');

Diff for: types.ts

@@ -69,6 +69,16 @@ export type PluginOptions = {
      */
     maxWidth?: string,
 
+    /**
+     * Maximum width of the preview image in list view
+     */
+    maxListWidth?: string,
+
+    /**
+     * Maximum width of the preview image in show view
+     */
+    maxShowWidth?: string,
+
     /**
      * Used to display preview (if it is image) in list and show views.
      * Defaulted to the AWS S3 presigned URL if resource is private or public URL if resource is public.