diff --git a/docs/content/1.getting-started.md b/docs/content/1.getting-started.md index 88dba08..3aed4cf 100644 --- a/docs/content/1.getting-started.md +++ b/docs/content/1.getting-started.md @@ -38,7 +38,7 @@ CLOUDINARY_CLOUD_NAME= ``` ::callout{icon="i-heroicons-check-circle"} -And that's it! You can now use Clodinary in Nuxt ✨ +And that's it! You can now use Cloudinary in Nuxt ✨ :: ```vue diff --git a/docs/content/2.components/CldImage/1.usage.md b/docs/content/2.components/CldImage/1.usage.md index 86396e7..3001689 100644 --- a/docs/content/2.components/CldImage/1.usage.md +++ b/docs/content/2.components/CldImage/1.usage.md @@ -3,7 +3,7 @@ description: --- -The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations. +The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations. It will inherit all global configuration via the `config` property. 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! diff --git a/docs/content/2.components/CldImage/2.configuration.md b/docs/content/2.components/CldImage/2.configuration.md index 5d0f901..c6d8644 100644 --- a/docs/content/2.components/CldImage/2.configuration.md +++ b/docs/content/2.components/CldImage/2.configuration.md @@ -1,5 +1,5 @@ --- -description: +description: --- The CldImage component provides a wide range of options for being able to easily optimize and transform images. @@ -27,10 +27,13 @@ The CldImage component exposes many of Cloudinary's transformations in an easy-t | Prop | Type | Default | Example | More | | --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ | +| angle | number | `-` | `45` | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle) | | crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) | | background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background) | -| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) | +| enhance | boolean | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) | +| fillBackground (Beta) | `boolean/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance) | | gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity) | +| loop | `boolean/number` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop) | | recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor) | | remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove) | | removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal) | diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md index 588e86b..a4f0eb4 100644 --- a/docs/content/2.components/CldVideoPlayer.md +++ b/docs/content/2.components/CldVideoPlayer.md @@ -4,7 +4,7 @@ description: ## The usage -The CldVideoPlayer component helps to embed Cloudinary videos using the [Cloudinary Video Player](https://cloudinary.com/documentation/cloudinary_video_player) giving you a full customizable experience for your player. +The CldVideoPlayer component helps to embed Cloudinary videos using the [Cloudinary Video Player](https://cloudinary.com/documentation/cloudinary_video_player) giving you a full customizable experience for your player. It will inherit all global configuration via the `config` property. ## Basic Usage diff --git a/src/runtime/components/CldVideoPlayer.vue b/src/runtime/components/CldVideoPlayer.vue index 112c4df..a2d429c 100644 --- a/src/runtime/components/CldVideoPlayer.vue +++ b/src/runtime/components/CldVideoPlayer.vue @@ -3,7 +3,7 @@ import { ref } from "vue"; import { useHead } from "@unhead/vue"; import { useRuntimeConfig } from "#imports"; import { parseUrl } from "@cloudinary-util/util"; -import { ConfigOptions } from "@cloudinary-util/url-loader"; +import type { ConfigOptions } from "@cloudinary-util/url-loader"; export interface CloudinaryVideoPlayer { on: Function; @@ -21,7 +21,6 @@ export interface CloudinaryVideoPlayerOptions { secure?: boolean; transformation?: Array | object; hideContextMenu?: boolean; - config?: ConfigOptions; pictureInPictureToggle?: boolean; } diff --git a/src/runtime/composables/useCldImageUrl.ts b/src/runtime/composables/useCldImageUrl.ts index fddafe4..5ab9f82 100644 --- a/src/runtime/composables/useCldImageUrl.ts +++ b/src/runtime/composables/useCldImageUrl.ts @@ -1,5 +1,6 @@ import { useRuntimeConfig } from '#imports' -import { constructCloudinaryUrl, ConstructUrlProps } from '@cloudinary-util/url-loader' +import { constructCloudinaryUrl } from '@cloudinary-util/url-loader' +import type { ConstructUrlProps } from '@cloudinary-util/url-loader' import nuxtPkg from 'nuxt/package.json'; import pkg from '../../../package.json' diff --git a/src/runtime/composables/useCldVideoUrl.ts b/src/runtime/composables/useCldVideoUrl.ts index f09d5a7..639dc1b 100644 --- a/src/runtime/composables/useCldVideoUrl.ts +++ b/src/runtime/composables/useCldVideoUrl.ts @@ -1,5 +1,6 @@ import { useRuntimeConfig } from '#imports' -import { constructCloudinaryUrl, ConstructUrlProps, ConfigOptions, AnalyticsOptions, VideoOptions } from '@cloudinary-util/url-loader' +import { constructCloudinaryUrl } from '@cloudinary-util/url-loader' +import type { ConstructUrlProps, ConfigOptions, AnalyticsOptions, VideoOptions } from '@cloudinary-util/url-loader' import nuxtPkg from 'nuxt/package.json'; import pkg from '../../../package.json'