Merge pull request #162 from nuxt-modules/chore/2.4.0

Chore/2.4.0

.stackblitz/package.json

@@ -11,6 +11,6 @@
     "nuxt": "^3.6.2"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.3.4"
+    "@nuxtjs/cloudinary": "^2.4.1"
   }
 }

.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"

docs/components/content/MediaLibrary.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>
+    <CldMediaLibrary :api-key="apiKey" :button-id="buttonId" />
+  </div>
+</template>

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>

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

docs/content/2.components/CldMediaLibrary.md

@@ -0,0 +1,94 @@
+# CldMediaLibrary.vue
+
+---
+
+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
+
+```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>
+    <CldMediaLibrary :api-key="apiKey" :button-id="buttonId" />
+  </div>
+</template>
+```
+
+:media-library
+
+## Props
+
+CldMediaLibrary 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 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">
+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>
+    <ClsMediaLibrary :api-key="apiKey" :button-id="buttonId" :params="params" />
+  </div>
+</template>
+```
+
+## Events
+
+ClsMediaLibrary 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>
+    <ClsMediaLibrary
+      :api-key="apiKey"
+      :button-id="buttonId"
+      :params="params"
+      @on-insert="handleInsert"
+    />
+  </div>
+</template>
+```

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>
+```

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.
 

docs/package.json

@@ -18,6 +18,6 @@
     "nuxt": "^3.5.3"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.3.4"
+    "@nuxtjs/cloudinary": "^2.4.1"
   }
 }

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"

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",

playground/app.vue

@@ -2,9 +2,20 @@
 // 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" },
+];
+
+const buttonId = 'open-btn'
 </script>
 
 <template>
+  <button :id="buttonId">Select Image or Video</button>
+  <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" />
   <!-- Usage of `CldVideoPlayer.vue` component -->
@@ -24,7 +35,7 @@ console.log(url);
     height="987"
     alt="Sample Product"
     crop="fill"
-    loading="lazy"
+    priority
     sizes="(max-width: 600px) 480px,
          800px"
   />

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"

src/runtime/components/CldMediaLibrary.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { useRuntimeConfig } from "#imports";
+import { PropType, ref } 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-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 Media Library: ${(e as any).message}`
+        ),
+    },
+  ],
+});
+</script>
+
+<template>
+  <div>
+    <div id="widget_container"></div>
+  </div>
+</template>