From 721e5168e752a1412d2373f4d51eb8ad15a36de2 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Tue, 14 Nov 2023 11:24:13 +0100
Subject: [PATCH 1/6] feat: add Product Gallery component

---
 docs/components/content/ProductGallery.vue    |  11 ++
 .../content/2.components/CldProductGallery.md |  71 +++++++++++
 docs/content/2.components/CldUploadButton.md  |   2 +-
 playground/app.vue                            |   7 ++
 src/runtime/components/CldProductGallery.vue  | 110 ++++++++++++++++++
 5 files changed, 200 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/content/ProductGallery.vue
 create mode 100644 docs/content/2.components/CldProductGallery.md
 create mode 100644 src/runtime/components/CldProductGallery.vue

diff --git a/docs/components/content/ProductGallery.vue b/docs/components/content/ProductGallery.vue
new file mode 100644
index 0000000..ea82420
--- /dev/null
+++ b/docs/components/content/ProductGallery.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const mediaAssets = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
+</script>
+
+<template>
+  <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" />
+</template>
diff --git a/docs/content/2.components/CldProductGallery.md b/docs/content/2.components/CldProductGallery.md
new file mode 100644
index 0000000..0076066
--- /dev/null
+++ b/docs/content/2.components/CldProductGallery.md
@@ -0,0 +1,71 @@
+# CldProductGallery.vue
+
+---
+
+The CldProductGallery creates a product gallery element that uses an instance of the [Cloudinary Product Gallery Widget](https://cloudinary.com/documentation/product_gallery_reference) to give you an easy way to add product gallery component to your Nuxt app.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+const mediaAssets = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
+</script>
+
+<template>
+  <CldProductGallery :media-assets="mediaAssets" />
+</template>
+```
+
+:product-gallery
+
+## Props
+
+CldProductGallery accepts several customization props listed below:
+
+| Prop Name        | Type    | Example                                                              |
+| ---------------- | ------- | -------------------------------------------------------------------- |
+| cloudName        | string  | `"demo"`                                                             |
+| mediaAssets      | array   | `[{ tag: 'electric_car_product_gallery_demo', mediaType: 'video' }]` |
+| displayProps     | object  | `{ mode: "expanded", columns: 2 }`                                   |
+| aspectRatio      | string  | `"4:3"`                                                              |
+| imageBreakpoint  | number  | `200`                                                                |
+| carouselStyle    | string  | `"indicators"`                                                       |
+| indicatorProps   | object  | `{ color: "red" }`                                                   |
+| carouselLocation | string  | `"right"`                                                            |
+| borderColor      | string  | `"red"`                                                              |
+| borderWidth      | number  | `5`                                                                  |
+| transition       | string  | `"fade"`                                                             |
+| zoom             | boolean | `false`                                                              |
+| params           | object  | `{}`                                                                 |
+
+For all other available props checkout [Cloudinary Product Gallery Docs](https://cloudinary.com/documentation/product_gallery_reference#widget_parameters) and make sure to pass them to the component as `params` like following:
+
+```vue
+<script setup lang="ts">
+const mediaAssets = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
+
+const params = {
+  sortProps: {
+    source: "public_id",
+    direction: "asc",
+    videoBreakpoint: 200,
+    carouselOffset: 6
+  }
+}
+</script>
+
+<template>
+  <CldProductGallery
+    :media-assets="mediaAssets"
+    :params="params"
+  />
+</template>
+```
diff --git a/docs/content/2.components/CldUploadButton.md b/docs/content/2.components/CldUploadButton.md
index df5dff0..33b24ba 100644
--- a/docs/content/2.components/CldUploadButton.md
+++ b/docs/content/2.components/CldUploadButton.md
@@ -2,7 +2,7 @@
 
 ---
 
-The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Next.js app.
+The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Nuxt app.
 
 The CldUploadButton component wraps the [CldUploadWidget](/components/clduploadwidget) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
 
diff --git a/playground/app.vue b/playground/app.vue
index c20312f..c2d3873 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -2,9 +2,16 @@
 // Usage of `useCldImageUrl` composable
 const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
 console.log(url);
+
+const mediaAssets = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
 </script>
 
 <template>
+  <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" />
   <!-- Usage of `CldOgImage.vue` component -->
   <CldOgImage src="cld-sample-2" twitter-title="test" />
   <!-- Usage of `CldVideoPlayer.vue` component -->
diff --git a/src/runtime/components/CldProductGallery.vue b/src/runtime/components/CldProductGallery.vue
new file mode 100644
index 0000000..752a249
--- /dev/null
+++ b/src/runtime/components/CldProductGallery.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { useRuntimeConfig } from "#imports";
+import { PropType } from "vue";
+import { Prop } from "nuxt/dist/app/compat/capi";
+
+const cloudinaryRef = ref();
+
+type MediaType = "image" | "video" | "spin";
+
+const props = defineProps({
+  cloudName: {
+    type: String,
+    default: "",
+  },
+  mediaAssets: {
+    type: Array as PropType<{ tag: string; mediaType?: MediaType }[]>,
+    required: true,
+  },
+  displayProps: {
+    type: Object as PropType<{ mode: string; columns: number }>,
+    default: () => ({}),
+  },
+  aspectRatio: {
+    type: String,
+    default: "",
+  },
+  imageBreakpoint: {
+    type: Number,
+    default: 0,
+  },
+  carouselStyle: {
+    type: String,
+    default: "",
+  },
+  indicatorProps: {
+    type: Object as PropType<{ color: string }>,
+    default: () => ({}),
+  },
+  carouselLocation: {
+    type: String,
+    default: "",
+  },
+  borderColor: {
+    type: String,
+    default: "",
+  },
+  borderWidth: {
+    type: Number,
+    default: 0,
+  },
+  transition: {
+    type: String,
+    default: "",
+  },
+  zoom: {
+    type: Boolean,
+    default: false,
+  },
+  // Other params listed https://cloudinary.com/documentation/product_gallery_reference#widget_parameters
+  params: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
+});
+
+const handleOnLoad = () => {
+  if ("cloudinary" in window) {
+    cloudinaryRef.value = window.cloudinary;
+
+    const options = Object.fromEntries(
+      Object.entries(props).filter((elem) => {
+        if (typeof elem[1] === "object") {
+          return Object.keys(elem[1]).length ? elem : false;
+        }
+
+        return Boolean(elem[1]);
+      })
+    );
+
+    const myGallery = cloudinaryRef.value.galleryWidget({
+      container: "#product-gallery",
+      cloudName:
+        props.cloudName || useRuntimeConfig().public.cloudinary.cloudName,
+      ...options,
+      ...props.params,
+    });
+
+    myGallery.render();
+  }
+};
+
+useHead({
+  script: [
+    {
+      id: `cloudinary-product-gallery-${Math.floor(Math.random() * 100)}`,
+      src: `https://product-gallery.cloudinary.com/all.js`,
+      onload: handleOnLoad,
+      onerror: (e) =>
+        console.error(
+          `Failed to load Cloudinary Product Gallery: ${(e as any).message}`
+        ),
+    },
+  ],
+});
+</script>
+
+<template>
+  <div id="product-gallery" />
+</template>

From 9c163bfac182d06a67e61d28bcbe34bb9e92f250 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Tue, 14 Nov 2023 11:55:40 +0100
Subject: [PATCH 2/6] feat: add UploadWidget events

---
 src/runtime/components/CldUploadButton.vue |  12 +++
 src/runtime/components/CldUploadWidget.vue | 113 +++++++++++++++++++--
 2 files changed, 117 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/CldUploadButton.vue b/src/runtime/components/CldUploadButton.vue
index 903c322..82ed9ae 100644
--- a/src/runtime/components/CldUploadButton.vue
+++ b/src/runtime/components/CldUploadButton.vue
@@ -108,6 +108,18 @@ export interface CldUploadWidgetProps {
   onOpen?: Function;
   onUpload?: Function;
   onClick?: Function;
+  onAbort?: Function;
+  onBatchCancelled?: Function;
+  onDisplayChanged?: Function;
+  onPublicId?: Function;
+  onQueuesEnd?: Function;
+  onQueuesStart?: Function;
+  onRetry?: Function;
+  onShowCompleted?: Function;
+  onSourceChanged?: Function;
+  onSuccess?: Function;
+  onTags?: Function;
+  onUploadAdded?: Function;
   options?: CldUploadWidgetPropsOptions;
   signatureEndpoint?: URL | RequestInfo;
   uploadPreset?: string;
diff --git a/src/runtime/components/CldUploadWidget.vue b/src/runtime/components/CldUploadWidget.vue
index 8d9c665..38f80fa 100644
--- a/src/runtime/components/CldUploadWidget.vue
+++ b/src/runtime/components/CldUploadWidget.vue
@@ -8,6 +8,18 @@ export interface CldUploadWidgetProps {
   onError?: Function;
   onOpen?: Function;
   onUpload?: Function;
+  onAbort?: Function;
+  onBatchCancelled?: Function;
+  onDisplayChanged?: Function;
+  onPublicId?: Function;
+  onQueuesEnd?: Function;
+  onQueuesStart?: Function;
+  onRetry?: Function;
+  onShowCompleted?: Function;
+  onSourceChanged?: Function;
+  onSuccess?: Function;
+  onTags?: Function;
+  onUploadAdded?: Function;
   options?: CldUploadWidgetPropsOptions;
   signatureEndpoint?: URL | RequestInfo;
   uploadPreset?: string;
@@ -144,6 +156,18 @@ const {
   options,
   signatureEndpoint,
   uploadPreset,
+  onAbort,
+  onBatchCancelled,
+  onDisplayChanged,
+  onPublicId,
+  onQueuesEnd,
+  onQueuesStart,
+  onRetry,
+  onShowCompleted,
+  onSourceChanged,
+  onSuccess,
+  onTags,
+  onUploadAdded,
 } = props;
 
 const cloudinary = ref();
@@ -160,12 +184,39 @@ const isScriptLoading = ref(true);
 // either on page load or during the upload process. Read more about signed uploads at:
 // https://cloudinary.com/documentation/upload_widget#signed_uploads
 
+
+const instanceMethods = {
+    close,
+    destroy,
+    hide,
+    isDestroyed,
+    isMinimized,
+    isShowing,
+    minimize,
+    open,
+    show,
+    update,
+    'abort': onAbort,
+    'batch-cancelled': onBatchCancelled,
+    'display-changed': onDisplayChanged,
+    'publicid': onPublicId,
+    'queues-end': onQueuesEnd,
+    'queues-start': onQueuesStart,
+    'retry': onRetry,
+    'show-completed': onShowCompleted,
+    'source-changed': onSourceChanged,
+    'success': onSuccess,
+    'tags': onTags,
+    'upload-added': onUploadAdded,
+  }
+
 const uploadOptions = {
   cloudName: useRuntimeConfig().public.cloudinary.cloudName,
   uploadPreset:
     uploadPreset || useRuntimeConfig().public.cloudinary.uploadPreset,
   apiKey: useRuntimeConfig().public.cloudinary.apiKey,
   ...options,
+  ...instanceMethods
 };
 
 if (signed) {
@@ -264,21 +315,58 @@ function createWidget() {
       if (WIDGET_WATCHED_EVENTS.includes(uploadResult?.event)) {
         results.value = uploadResult;
       }
+
     }
   );
 }
 
-/**
- * open
- * @description When triggered, uses the current widget instance to open the upload modal
- */
+function invokeInstanceMethod(method: string) {
+    if (!widget.value) {
+      widget.value = createWidget();
+    }
 
-function open() {
-  if (!widget.value) {
-    widget.value = createWidget();
+    if ( typeof widget?.value[method] === 'function' ) {
+      widget.value[method](widget.value);
+    }
+  }
+
+  function close() {
+    invokeInstanceMethod('close');
+  }
+
+  function destroy() {
+    invokeInstanceMethod('destroy');
   }
 
-  widget?.value.open();
+  function hide() {
+    invokeInstanceMethod('hide');
+  }
+
+  function isDestroyed() {
+    invokeInstanceMethod('isDestroyed');
+  }
+
+  function isMinimized() {
+    invokeInstanceMethod('isMinimized');
+  }
+
+  function isShowing() {
+    invokeInstanceMethod('isShowing');
+  }
+
+  function minimize() {
+    invokeInstanceMethod('minimize');
+  }
+
+  function show() {
+    invokeInstanceMethod('show');
+  }
+
+  function update() {
+    invokeInstanceMethod('update');
+  }
+function open() {
+  invokeInstanceMethod('open');
 
   if (typeof onOpen === "function") {
     onOpen(widget.value);
@@ -305,6 +393,15 @@ useHead({
     :cloudinary="cloudinary"
     :widget="widget"
     :open="open"
+    :update="update"
+    :show="show"
+    :is-showing="isShowing"
+    :is-minimized="isMinimized"
+    :is-destroyed="isDestroyed"
+    :destroy="destroy"
+    :close="close"
+    :hide="hide"
+    :minimize="minimize"
     :results="results"
     :error="error"
     :is-loading="isScriptLoading"

From 077ce2076e14dc0c93cf18ac6623c66f1a88df4c Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Wed, 15 Nov 2023 10:23:00 +0100
Subject: [PATCH 3/6] feat: MediaGallery

---
 docs/components/content/MediaGallery.vue     | 11 +++
 docs/content/2.components/CldMediaLibrary.md | 94 ++++++++++++++++++++
 playground/app.vue                           |  6 +-
 src/runtime/components/CldMediaGallery.vue   | 83 +++++++++++++++++
 4 files changed, 193 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/content/MediaGallery.vue
 create mode 100644 docs/content/2.components/CldMediaLibrary.md
 create mode 100644 src/runtime/components/CldMediaGallery.vue

diff --git a/docs/components/content/MediaGallery.vue b/docs/components/content/MediaGallery.vue
new file mode 100644
index 0000000..cb7eb10
--- /dev/null
+++ b/docs/components/content/MediaGallery.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const buttonId = "open-btn";
+const apiKey = "12345";
+</script>
+
+<template>
+  <div>
+    <button :id="buttonId">Select Image or Video</button>
+    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" />
+  </div>
+</template>
diff --git a/docs/content/2.components/CldMediaLibrary.md b/docs/content/2.components/CldMediaLibrary.md
new file mode 100644
index 0000000..0b80776
--- /dev/null
+++ b/docs/content/2.components/CldMediaLibrary.md
@@ -0,0 +1,94 @@
+# CldMediaGallery.vue
+
+---
+
+The CldMediaGallery creates a media gallery element that uses an instance of the [Cloudinary Product Gallery Widget](https://cloudinary.com/documentation/media_library_widget) to give you an easy way to add product gallery component to your Nuxt app.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+const buttonId = "open-btn";
+const apiKey = useRuntimeConfig().public.cloudinary.apiKey;
+</script>
+
+<template>
+  <div>
+    <button :id="buttonId">Select Image or Video</button>
+    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" />
+  </div>
+</template>
+```
+
+:media-gallery
+
+## Props
+
+CldMediaGallery accepts several customization props listed below:
+
+| Prop Name | Type    | Example    |
+| --------- | ------- | ---------- |
+| cloudName | string  | `"demo"`   |
+| apiKey    | string  | `"12345"`  |
+| buttonId  | string  | `"my-btn"` |
+| username  | string  | `"user"`   |
+| useSaml   | boolean | `false`    |
+| params    | object  | `{}`       |
+
+For all other available props checkout [Cloudinary Product Gallery Docs](https://cloudinary.com/documentation/media_library_widget#2_set_the_configuration_options) and make sure to pass them to the component as `params` like following:
+
+```vue
+<script setup lang="ts">
+const buttonId = "open-btn";
+const apiKey = useRuntimeConfig().public.cloudinary.apiKey;
+
+const params = {
+  sortProps: {
+    button_caption: "Open Media Library",
+    insert_caption: "Insert",
+    remove_header: false,
+    max_files: 6,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <button :id="buttonId">Select Image or Video</button>
+    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" :params="params" />
+  </div>
+</template>
+```
+
+## Events
+
+ClsMediaGallery emits following events:
+
+| Event Name | Type     | Example         |
+| ---------- | -------- | --------------- |
+| onInsert   | function | `(data) => { }` |
+
+You can use this event like following:
+
+```vue
+<script setup lang="ts">
+const buttonId = "open-btn";
+const apiKey = useRuntimeConfig().public.cloudinary.apiKey;
+
+function handleInsert(data: unknown) {
+  console.log(data)
+}
+</script>
+
+<template>
+  <div>
+    <button :id="buttonId">Select Image or Video</button>
+    <CldMediaGallery
+      :api-key="apiKey"
+      :button-id="buttonId"
+      :params="params"
+      @on-insert="handleInsert"
+    />
+  </div>
+</template>
+```
diff --git a/playground/app.vue b/playground/app.vue
index c2d3873..b5fcc96 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -8,10 +8,14 @@ const mediaAssets = [
   { tag: "electric_car_product_gallery_demo", mediaType: "video" },
   { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
 ];
+
+const buttonId = 'open-btn'
 </script>
 
 <template>
-  <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" />
+  <button :id="buttonId">Select Image or Video</button>
+  <CldMediaGallery api-key="12345" :button-id="buttonId"/>
+  <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" :button-id="buttonId" />
   <!-- Usage of `CldOgImage.vue` component -->
   <CldOgImage src="cld-sample-2" twitter-title="test" />
   <!-- Usage of `CldVideoPlayer.vue` component -->
diff --git a/src/runtime/components/CldMediaGallery.vue b/src/runtime/components/CldMediaGallery.vue
new file mode 100644
index 0000000..7c54f21
--- /dev/null
+++ b/src/runtime/components/CldMediaGallery.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { useRuntimeConfig } from "#imports";
+import { PropType } from "vue";
+
+const cloudinaryRef = ref();
+
+const props = defineProps({
+  cloudName: {
+    type: String,
+    default: "",
+  },
+  apiKey: {
+    type: String,
+    required: true
+  },
+  username: {
+    type: String,
+    default: "",
+  },
+  useSaml: {
+    type: Boolean,
+    default: false,
+  },
+  buttonId: {
+    type: String,
+    required: true,
+  },
+  // Other params listed https://cloudinary.com/documentation/media_library_widget#2_set_the_configuration_options
+  params: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['onInsert'])
+
+const handleOnLoad = () => {
+  if ("cloudinary" in window) {
+    cloudinaryRef.value = window.cloudinary;
+
+    const options = Object.fromEntries(
+      Object.entries(props).filter((elem) => Boolean(elem[1]))
+    );
+
+    cloudinaryRef.value.createMediaLibrary({
+      inline_container: '#widget_container',
+      cloud_name:
+        props.cloudName || useRuntimeConfig().public.cloudinary.cloudName,
+      api_key: props.apiKey || useRuntimeConfig().public.cloudinary.apiKey,
+      ...options,
+      ...props.params,
+    },
+    {
+    insertHandler: function (data: unknown) {
+      emit('onInsert', data)
+    }
+  },
+  document.getElementById(props.buttonId)
+  );
+  }
+};
+
+useHead({
+  script: [
+    {
+      id: `cloudinary-product-gallery-${Math.floor(Math.random() * 100)}`,
+      src: `https://media-library.cloudinary.com/global/all.js`,
+      onload: handleOnLoad,
+      onerror: (e) =>
+        console.error(
+          `Failed to load Cloudinary Product Gallery: ${(e as any).message}`
+        ),
+    },
+  ],
+});
+</script>
+
+<template>
+  <div>
+    <div id="widget_container"></div>
+  </div>
+</template>

From 243c1cc3bdaca08140d01e71c9eb1cc1878a7fd7 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Wed, 15 Nov 2023 11:44:52 +0100
Subject: [PATCH 4/6] feat: lazy loading by default

---
 docs/content/2.components/CldImage.md | 2 ++
 playground/app.vue                    | 2 +-
 src/runtime/components/CldImage.vue   | 3 +--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/content/2.components/CldImage.md b/docs/content/2.components/CldImage.md
index a6fdabd..0a90235 100644
--- a/docs/content/2.components/CldImage.md
+++ b/docs/content/2.components/CldImage.md
@@ -6,6 +6,8 @@
 
 Using `CldImage.vue` component is really straight forward. It accepts the same attributes as native img tag (such us sizes, width, loading, etc) and bunch of Cloudinary specific props used to optimize the image (such as removeBackground, overlays, gravity, etc). Thanks to the auto import feature of Nuxt, you do not need to import anything. Just add `<CldImage />` to your template and optimize your images!
 
+Under the hood, this CldImage uses [Unpic](https://unpic.pics/) for delivering optimized images. Check out the documentation of Unpic for all available props and options like priority, loading, sizes, and more!
+
 :image-with-overlays{style="text-align: center; margin: 0 auto"}
 
 ```html
diff --git a/playground/app.vue b/playground/app.vue
index b5fcc96..3f67d3f 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -35,7 +35,7 @@ const buttonId = 'open-btn'
     height="987"
     alt="Sample Product"
     crop="fill"
-    loading="lazy"
+    priority
     sizes="(max-width: 600px) 480px,
          800px"
   />
diff --git a/src/runtime/components/CldImage.vue b/src/runtime/components/CldImage.vue
index 14fd7e8..48d84a2 100644
--- a/src/runtime/components/CldImage.vue
+++ b/src/runtime/components/CldImage.vue
@@ -148,8 +148,7 @@ const pollForProcessingImage = async (options: Event): Promise<boolean> => {
     :width="width"
     :height="height"
     v-bind="$attrs"
-    :loading="loading"
-    :fetch-priority="fetchPriority"
+    :priority="priority"
     cdn="cloudinary"
     :transformer="transformUrl"
     @error="handleError"

From 4f8e25a52a0437cd49152c9c7cb2ace692349a9e Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 16 Nov 2023 09:49:26 +0100
Subject: [PATCH 5/6] chore: fix typos

---
 .../{MediaGallery.vue => MediaLibrary.vue}     |  2 +-
 docs/content/2.components/CldMediaLibrary.md   | 18 +++++++++---------
 playground/app.vue                             |  2 +-
 ...CldMediaGallery.vue => CldMediaLibrary.vue} |  6 +++---
 src/runtime/components/CldProductGallery.vue   |  1 -
 5 files changed, 14 insertions(+), 15 deletions(-)
 rename docs/components/content/{MediaGallery.vue => MediaLibrary.vue} (74%)
 rename src/runtime/components/{CldMediaGallery.vue => CldMediaLibrary.vue} (89%)

diff --git a/docs/components/content/MediaGallery.vue b/docs/components/content/MediaLibrary.vue
similarity index 74%
rename from docs/components/content/MediaGallery.vue
rename to docs/components/content/MediaLibrary.vue
index cb7eb10..d116337 100644
--- a/docs/components/content/MediaGallery.vue
+++ b/docs/components/content/MediaLibrary.vue
@@ -6,6 +6,6 @@ const apiKey = "12345";
 <template>
   <div>
     <button :id="buttonId">Select Image or Video</button>
-    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" />
+    <CldMediaLibrary :api-key="apiKey" :button-id="buttonId" />
   </div>
 </template>
diff --git a/docs/content/2.components/CldMediaLibrary.md b/docs/content/2.components/CldMediaLibrary.md
index 0b80776..3958c3e 100644
--- a/docs/content/2.components/CldMediaLibrary.md
+++ b/docs/content/2.components/CldMediaLibrary.md
@@ -1,8 +1,8 @@
-# CldMediaGallery.vue
+# CldMediaLibrary.vue
 
 ---
 
-The CldMediaGallery creates a media gallery element that uses an instance of the [Cloudinary Product Gallery Widget](https://cloudinary.com/documentation/media_library_widget) to give you an easy way to add product gallery component to your Nuxt app.
+The CldMediaLibrary creates a media gallery element that uses an instance of the [Cloudinary Media Library Widget](https://cloudinary.com/documentation/media_library_widget) to give you an easy way to add media librarry component to your Nuxt app.
 
 ## Basic Usage
 
@@ -15,16 +15,16 @@ const apiKey = useRuntimeConfig().public.cloudinary.apiKey;
 <template>
   <div>
     <button :id="buttonId">Select Image or Video</button>
-    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" />
+    <CldMediaLibrary :api-key="apiKey" :button-id="buttonId" />
   </div>
 </template>
 ```
 
-:media-gallery
+:media-library
 
 ## Props
 
-CldMediaGallery accepts several customization props listed below:
+CldMediaLibrary accepts several customization props listed below:
 
 | Prop Name | Type    | Example    |
 | --------- | ------- | ---------- |
@@ -35,7 +35,7 @@ CldMediaGallery accepts several customization props listed below:
 | useSaml   | boolean | `false`    |
 | params    | object  | `{}`       |
 
-For all other available props checkout [Cloudinary Product Gallery Docs](https://cloudinary.com/documentation/media_library_widget#2_set_the_configuration_options) and make sure to pass them to the component as `params` like following:
+For all other available props checkout [Cloudinary Media Gallery Docs](https://cloudinary.com/documentation/media_library_widget#2_set_the_configuration_options) and make sure to pass them to the component as `params` like following:
 
 ```vue
 <script setup lang="ts">
@@ -55,14 +55,14 @@ const params = {
 <template>
   <div>
     <button :id="buttonId">Select Image or Video</button>
-    <CldMediaGallery :api-key="apiKey" :button-id="buttonId" :params="params" />
+    <ClsMediaLibrary :api-key="apiKey" :button-id="buttonId" :params="params" />
   </div>
 </template>
 ```
 
 ## Events
 
-ClsMediaGallery emits following events:
+ClsMediaLibrary emits following events:
 
 | Event Name | Type     | Example         |
 | ---------- | -------- | --------------- |
@@ -83,7 +83,7 @@ function handleInsert(data: unknown) {
 <template>
   <div>
     <button :id="buttonId">Select Image or Video</button>
-    <CldMediaGallery
+    <ClsMediaLibrary
       :api-key="apiKey"
       :button-id="buttonId"
       :params="params"
diff --git a/playground/app.vue b/playground/app.vue
index 3f67d3f..8ccfecb 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -14,7 +14,7 @@ const buttonId = 'open-btn'
 
 <template>
   <button :id="buttonId">Select Image or Video</button>
-  <CldMediaGallery api-key="12345" :button-id="buttonId"/>
+  <CldMediaLibrary api-key="12345" :button-id="buttonId"/>
   <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" :button-id="buttonId" />
   <!-- Usage of `CldOgImage.vue` component -->
   <CldOgImage src="cld-sample-2" twitter-title="test" />
diff --git a/src/runtime/components/CldMediaGallery.vue b/src/runtime/components/CldMediaLibrary.vue
similarity index 89%
rename from src/runtime/components/CldMediaGallery.vue
rename to src/runtime/components/CldMediaLibrary.vue
index 7c54f21..df09d2d 100644
--- a/src/runtime/components/CldMediaGallery.vue
+++ b/src/runtime/components/CldMediaLibrary.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useHead } from "@unhead/vue";
 import { useRuntimeConfig } from "#imports";
-import { PropType } from "vue";
+import { PropType, ref } from "vue";
 
 const cloudinaryRef = ref();
 
@@ -64,12 +64,12 @@ const handleOnLoad = () => {
 useHead({
   script: [
     {
-      id: `cloudinary-product-gallery-${Math.floor(Math.random() * 100)}`,
+      id: `cloudinary-media-library-${Math.floor(Math.random() * 100)}`,
       src: `https://media-library.cloudinary.com/global/all.js`,
       onload: handleOnLoad,
       onerror: (e) =>
         console.error(
-          `Failed to load Cloudinary Product Gallery: ${(e as any).message}`
+          `Failed to load Cloudinary Media Library: ${(e as any).message}`
         ),
     },
   ],
diff --git a/src/runtime/components/CldProductGallery.vue b/src/runtime/components/CldProductGallery.vue
index 752a249..83ecb4b 100644
--- a/src/runtime/components/CldProductGallery.vue
+++ b/src/runtime/components/CldProductGallery.vue
@@ -2,7 +2,6 @@
 import { useHead } from "@unhead/vue";
 import { useRuntimeConfig } from "#imports";
 import { PropType } from "vue";
-import { Prop } from "nuxt/dist/app/compat/capi";
 
 const cloudinaryRef = ref();
 

From eeb66eb9690bd4404bc9d4f29977cb9c5c97a5f2 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 16 Nov 2023 13:17:20 +0100
Subject: [PATCH 6/6] chore: 2.4.0 & 2.4.1

---
 .stackblitz/package.json                     | 2 +-
 .stackblitz/yarn.lock                        | 8 ++++----
 docs/package.json                            | 2 +-
 docs/yarn.lock                               | 8 ++++----
 package.json                                 | 2 +-
 src/runtime/components/CldProductGallery.vue | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.stackblitz/package.json b/.stackblitz/package.json
index c08b28f..b0045df 100644
--- a/.stackblitz/package.json
+++ b/.stackblitz/package.json
@@ -11,6 +11,6 @@
     "nuxt": "^3.6.2"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.3.4"
+    "@nuxtjs/cloudinary": "^2.4.1"
   }
 }
diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock
index ad9cf7f..118afa1 100644
--- a/.stackblitz/yarn.lock
+++ b/.stackblitz/yarn.lock
@@ -760,10 +760,10 @@
     vite-plugin-checker "^0.6.1"
     vue-bundle-renderer "^1.0.3"
 
-"@nuxtjs/cloudinary@^2.3.4":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.3.4.tgz#81ccefcbe803b20ab37bd5fb2618a2574ed6fe42"
-  integrity sha512-603PVOkmVzHzlwww9WYkdJRL7Z+FP7qfyL4bylUSlwVav6I8fEBi8embMOHo0XL2jbMkNLkM1WBGBNhen5hd3Q==
+"@nuxtjs/cloudinary@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.4.1.tgz#2708439813e36a07b2096d95ac7ff76d27daf662"
+  integrity sha512-nrC9uNjEdsvMJuLNIjYXGk48UZaHkI6L29gMfBq/b0zJejvTuZk/Qa2/9kKR0VvyKLKxgpRP7HLnma5R2TnebA==
   dependencies:
     "@cloudinary-util/url-loader" "^3.10.0"
     "@nuxt/kit" "^3.5.0"
diff --git a/docs/package.json b/docs/package.json
index b363174..ad4f5df 100755
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,6 +18,6 @@
     "nuxt": "^3.5.3"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.3.4"
+    "@nuxtjs/cloudinary": "^2.4.1"
   }
 }
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 7ac4c63..f66739b 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -859,10 +859,10 @@
     socket.io-client "^4.6.1"
     ufo "^1.1.2"
 
-"@nuxtjs/cloudinary@^2.3.4":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.3.4.tgz#81ccefcbe803b20ab37bd5fb2618a2574ed6fe42"
-  integrity sha512-603PVOkmVzHzlwww9WYkdJRL7Z+FP7qfyL4bylUSlwVav6I8fEBi8embMOHo0XL2jbMkNLkM1WBGBNhen5hd3Q==
+"@nuxtjs/cloudinary@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.4.1.tgz#2708439813e36a07b2096d95ac7ff76d27daf662"
+  integrity sha512-nrC9uNjEdsvMJuLNIjYXGk48UZaHkI6L29gMfBq/b0zJejvTuZk/Qa2/9kKR0VvyKLKxgpRP7HLnma5R2TnebA==
   dependencies:
     "@cloudinary-util/url-loader" "^3.10.0"
     "@nuxt/kit" "^3.5.0"
diff --git a/package.json b/package.json
index bcd754a..ff3077a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/cloudinary",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "description": "Cloudinary module for Nuxt",
   "license": "MIT",
   "type": "module",
diff --git a/src/runtime/components/CldProductGallery.vue b/src/runtime/components/CldProductGallery.vue
index 83ecb4b..6c729dd 100644
--- a/src/runtime/components/CldProductGallery.vue
+++ b/src/runtime/components/CldProductGallery.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useHead } from "@unhead/vue";
 import { useRuntimeConfig } from "#imports";
-import { PropType } from "vue";
+import { PropType, ref } from "vue";
 
 const cloudinaryRef = ref();