@adminforth/upload 1.2.0 → 1.4.0

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 37,887 bytes  received 134 bytes  76,042.00 bytes/sec
-total size is 37,398  speedup is 0.98
+sent 38,419 bytes  received 134 bytes  77,106.00 bytes/sec
+total size is 37,930  speedup is 0.98

package/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,16 +51,17 @@
 </style>
 
 <style scoped>
-  img {
+  /* img {
     min-width: 150px;
   }
   video {
     min-width: 200px;
-  }
+  } */
 </style>
 <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,13 +72,28 @@ 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 } : {};
+});
 
+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(() => {

package/dist/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,16 +51,17 @@
 </style>
 
 <style scoped>
-  img {
+  /* img {
     min-width: 150px;
   }
   video {
     min-width: 200px;
-  }
+  } */
 </style>
 <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,13 +72,28 @@ 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 } : {};
+});
 
+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(() => {

package/dist/index.js

@@ -99,7 +99,7 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
             // after column to store the path of the uploaded file, add new VirtualColumn,
             // show only in edit and create views
@@ -127,6 +127,11 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
                 pathColumnLabel: resourceConfig.columns[pathColumnIndex].label,
                 fieldsForContext: (_c = this.options.generation) === null || _c === void 0 ? void 0 : _c.fieldsForContext,
                 maxWidth: (_d = this.options.preview) === null || _d === void 0 ? void 0 : _d.maxWidth,
+                maxListWidth: (_e = this.options.preview) === null || _e === void 0 ? void 0 : _e.maxListWidth,
+                maxShowWidth: (_f = this.options.preview) === null || _f === void 0 ? void 0 : _f.maxShowWidth,
+                minWidth: (_g = this.options.preview) === null || _g === void 0 ? void 0 : _g.minWidth,
+                minListWidth: (_h = this.options.preview) === null || _h === void 0 ? void 0 : _h.minListWidth,
+                minShowWidth: (_j = this.options.preview) === null || _j === void 0 ? void 0 : _j.minShowWidth,
             };
             // define components which will be imported from other components
             this.componentPath('imageGenerator.vue');

package/index.ts

@@ -127,6 +127,11 @@ 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,
+      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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/upload",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Plugin for uploading files for adminforth",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/types.ts

@@ -69,6 +69,32 @@ 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,
+    
+
+    /**
+     * 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.
      * Defaulted to the AWS S3 presigned URL if resource is private or public URL if resource is public.