From fb3394a0672d1c79b933a0d7b489da14acefde69 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Wed, 20 Dec 2023 17:12:54 +0100
Subject: [PATCH] feat: loaderOptions width resize

---
 src/runtime/components/CldImage.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/CldImage.vue b/src/runtime/components/CldImage.vue
index 48d84a2..e96177e 100644
--- a/src/runtime/components/CldImage.vue
+++ b/src/runtime/components/CldImage.vue
@@ -76,16 +76,19 @@ export interface CldImageProps extends ImageOptions {
   opacity?: string | number;
   shear?: string;
   border?: string;
+  loaderOptions?: {
+    width: number | string;
+  };
 }
 
 const props = defineProps<CldImageProps>();
 
 // eslint-disable-next-line vue/no-setup-props-destructure
-const { config, ...options } = props;
+const { config, loaderOptions, ...options } = props;
 
 const { url } = useCldImageUrl({ options, config });
 
-const transformUrl = ({ width }: { width: string | number }) => {
+const transformUrl = () => {
   const options = {
     ...props,
   };
@@ -97,12 +100,28 @@ const transformUrl = ({ width }: { width: string | number }) => {
       ? parseInt(options.height)
       : options.height;
 
+  let widthResize;
+
   if (
-    typeof width === "number" &&
+    typeof loaderOptions?.width === "number" &&
     typeof options.width === "number" &&
-    width !== options.width
+    loaderOptions.width !== options.width
+  ) {
+    widthResize = loaderOptions.width;
+  } else if (
+    typeof loaderOptions?.width === "number" &&
+    typeof options?.width !== "number"
   ) {
-    options.widthResize = width;
+    widthResize = loaderOptions.width;
+    options.width = widthResize;
+  }
+
+  // If we have a resize width that's smaller than the user-defined width, we want to give the
+  // ability to perform a final resize on the image without impacting any of the effects like text
+  // overlays that may depend on the size to work properly
+
+  if (options.width && widthResize && widthResize < options.width) {
+    options.widthResize = loaderOptions.width;
   }
 
   const { url } = useCldImageUrl({ options, config });