feat: loaderOptions width resize

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 });