@teamnovu/nuxt-image 0.5.4 → 1.0.0-beta.1

package/README.md

@@ -1,35 +1,240 @@
-[![@nuxt/image](./docs/static/social.svg "Nuxt Image")](https://image.nuxtjs.org)
+# @teamnovu/nuxt-image
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![Checks][checks-src]][checks-href]
-[![Codecov][codecov-src]][codecov-href]
+Responsive images for Nuxt 4. Builds on [`@nuxt/image`](https://image.nuxt.com) for provider-agnostic URL generation, ships a JS-driven `sizes` strategy for accurate per-element widths, and includes a Statamic adapter so `<NovuStatamicImage :src="asset" />` handles the common case end-to-end.
 
-- [📖 &nbsp;Read Documentation](https://image.nuxtjs.org)
-- [▶️ &nbsp;Play online](https://githubbox.com/nuxt/image/tree/main/example)
+## Highlights
 
+- Single-image element with provider-agnostic responsive `srcset`.
+- `sizes` starts at `1px` (so SSR ships a tiny blurred placeholder candidate) and is upgraded client-side to the actual rendered element width in `px`, recomputed via `ResizeObserver`. For `object-fit: cover` images that are wider than their container, the value reflects the cropped image's true width (`containerHeight * imageAspect`) so the browser picks a candidate big enough to fill the visible area without upscaling.
+- Five components, layered:
+  - `<NovuImage>` - provider-agnostic base
+  - `<NovuCloudinaryImage>` - Cloudinary-flavoured (`focal: 'face'`, `zoom`, `crop`, raw `transforms`)
+  - `<NovuBunnyImage>` - Bunny-flavoured (`faceCrop`, `cropGravity`, `sharpen`, `blur`)
+  - `<NovuImgproxyImage>` - imgproxy-flavoured (`preset`, `gravity`, `resizingType`, `extend`)
+  - `<NovuStatamicImage>` - Statamic adapter that auto-resolves to the matching wrapper (or `<NovuImage>` when no wrapper matches)
+- Built-in imgproxy provider (vendored from [nuxt/image#2117](https://github.com/nuxt/image/pull/2117) until it merges) with HMAC URL signing.
+- Performance defaults: `loading="lazy"`, `decoding="async"`, inline `aspect-ratio` CSS for CLS prevention. Opt-in `priority` flips to `loading="eager"` + `fetchpriority="high"`.
 
-### Contributing
+## Install
 
-1. Clone this repository
-2. Install dependencies using `yarn install`
-3. Start development server using `yarn dev`
+```bash
+pnpm add @teamnovu/nuxt-image
+```
 
+```ts
+export default defineNuxtConfig({
+  modules: ['@teamnovu/nuxt-image'],
 
-## 📑 License
+  novuImage: {
+    provider: 'cloudinary',
+  },
 
-Copyright (c) Nuxt Team
+  image: {
+    cloudinary: {
+      baseURL: 'https://res.cloudinary.com/your-cloud/image/upload/',
+    },
+    // bunny: { baseURL: 'https://your-zone.b-cdn.net' },
+    // imgproxy: { baseURL: 'https://imgproxy.example.com', key: '...', salt: '...' },
+  },
+})
+```
 
+The module installs `@nuxt/image` for you and auto-registers the imgproxy provider. Configure `image.<provider>` exactly as documented in the [`@nuxt/image` docs](https://image.nuxt.com/get-started/configuration).
 
+## Module options (`novuImage`)
 
-<!-- Badges -->
-[npm-version-src]: https://flat.badgen.net/npm/v/@nuxt/image
-[npm-version-href]: https://npmjs.com/package/@nuxt/image
-[npm-downloads-src]: https://flat.badgen.net/npm/dm/@nuxt/image
-[npm-downloads-href]: https://npmjs.com/package/@nuxt/image
-[checks-src]: https://flat.badgen.net/github/checks/nuxt/image/master
-[checks-href]: https://github.com/nuxt/image/actions
-[codecov-src]: https://flat.badgen.net/codecov/c/github/nuxt/image
-[codecov-href]: https://codecov.io/gh/nuxt/image
-[license-src]: https://img.shields.io/npm/l/@nuxt/image.svg
-[license-href]: https://github.com/nuxt/image/blob/main/LICENSE
+| Option               | Type                            | Default                                                                  | Notes                                                              |
+| -------------------- | ------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| `screens`            | `Record<string, number\|string>` | `{ xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1600, '3xl': 2000 }` | Each entry generates one `srcset` candidate at that pixel width.   |
+| `fallbackWidth`      | `number`                        | `2000`                                                                   | Width used for the legacy `src` URL.                               |
+| `usePlaceholder`     | `boolean`                       | `true`                                                                   | Inlines a low-quality candidate (descriptor `32w`) into `srcset`.  |
+| `placeholderQuality` | `number`                        | `30`                                                                     | Quality of the inlined placeholder.                                |
+| `placeholderWidth`   | `number`                        | `300`                                                                    | Width of the inlined placeholder.                                  |
+| `defaultQuality`     | `number\|string?`               | -                                                                        | Optional global `quality` modifier. Leave unset to defer to the provider's own default (Cloudinary auto-applies `q_auto`, etc.). |
+| `defaultFormat`      | `string?`                       | -                                                                        | Optional global `format` modifier. Leave unset to defer to the provider's own default (Cloudinary auto-applies `f_auto`, imgproxy uses `webp`, etc.). |
+| `provider`           | `string?`                       | -                                                                        | Default `@nuxt/image` provider; also drives `<NovuStatamicImage>` wrapper resolution. |
+| `statamicPlaceholderFields` | `string[]`              | `['placeholder', 'lqip', 'thumbhash']`                                   | Statamic asset field handles checked for `daun/statamic-placeholders` data. |
+
+## Components
+
+### `<NovuImage>` - provider-agnostic base
+
+```vue
+<NovuImage
+  src="path/to/image.jpg"
+  alt="A cat"
+  :width="1600"
+  :height="900"
+  :focal="[1200, 660]"
+  provider="cloudinary"
+/>
+```
+
+Common props (all optional unless noted):
+
+| Prop          | Type                          | Notes                                                                |
+| ------------- | ----------------------------- | -------------------------------------------------------------------- |
+| `src`         | `string` (required)           | Asset key/path passed to the configured provider.                    |
+| `alt`         | `string`                      | Alt text.                                                            |
+| `width/height`| `number\|string`              | Rendered image dimensions. Used for the `aspect-ratio` CSS hint and candidate height derivation. |
+| `sourceWidth/sourceHeight` | `number\|string`    | Original source dimensions. Used to map source-pixel focal points for providers such as imgproxy when rendered dimensions differ from the source. |
+| `aspectRatio` | `number`                      | Explicit aspect ratio (overrides `width/height`).                    |
+| `focal`       | `'auto' \| [number, number]`  | Source-pixel focal point, translated per provider. Providers with native auto focal support default to `'auto'`. |
+| `provider`    | `string`                      | Override the default provider for this element.                      |
+| `quality`     | `number\|string`              | Forwarded to `useImage`.                                             |
+| `format`      | `string`                      | Forwarded to `useImage`.                                             |
+| `fit`         | `string`                      | Forwarded to `useImage`.                                             |
+| `modifiers`   | `Record<string, unknown>`     | Raw modifiers escape hatch.                                          |
+| `sizes`       | `string`                      | Hard override for the dynamic `sizes` calculation.                   |
+| `priority`    | `boolean`                     | Sets `loading="eager"` + `fetchpriority="high"`.                     |
+| `loading`     | `'lazy' \| 'eager'`           | Defaults to `'lazy'` (or `'eager'` when `priority`).                 |
+| `decoding`    | `'async' \| 'sync' \| 'auto'` | Defaults to `'async'`.                                               |
+
+`focal` tuples are source image pixel coordinates, for example `[1200, 660]` on a `4000x2667` source. When the rendered `width/height` differ from the source dimensions, pass `sourceWidth/sourceHeight` as well so providers that need normalized coordinates, such as imgproxy, can map the focal point correctly. `<NovuStatamicImage>` fills these source dimensions from the asset automatically. Cloudinary and imgproxy default to their native auto focal modes; Bunny does not, because its `face_crop` API is a separate explicit behavior.
+
+### `<NovuCloudinaryImage>`
+
+Pins `provider="cloudinary"` and adds Cloudinary-only conveniences. Most importantly, `focal="face"` triggers Cloudinary's face-detection gravity.
+
+| Prop             | Type                            | Notes                                                                                                       |
+| ---------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `crop`           | `string`                        | Cloudinary crop mode (URL parameter `c_`). Accepts both Cloudinary-native names (`'lfill'`, `'thumb'`) and `@nuxt/image`'s aliases (`'cover'`, `'thumbnail'`). |
+| `focal`          | `'auto' \| 'face' \| [x, y]`    | Adds `'face'` on top of the agnostic `focal` values.                                                        |
+| `zoom`           | `number \| string`              | Cloudinary zoom factor (`z_<value>`).                                                                       |
+| `transformation` | `string \| Record<string, any>` | Named Cloudinary transformation preset (`t_<name>`), or a raw modifiers object spread into `useImage`'s modifiers. |
+
+```vue
+<NovuCloudinaryImage
+  src="profile.jpg"
+  alt="Profile photo"
+  :width="800"
+  :height="800"
+  focal="face"
+  crop="thumb"
+  zoom="0.7"
+/>
+```
+
+### `<NovuBunnyImage>`
+
+Pins `provider="bunny"`. `faceCrop` maps to Bunny's face-detection `face_crop` parameter, while `cropGravity` maps directly to Bunny's documented `crop_gravity` anchors (`center`, `north`, `south`, `east`, `west`, `northeast`, `northwest`, `southeast`, `southwest`). Pixel-coordinate focal points are ignored because Bunny's manual focal crop is not wired yet.
+
+```vue
+<NovuBunnyImage
+  src="hero.jpg"
+  :width="1600"
+  :height="900"
+  face-crop
+  :sharpen="true"
+/>
+```
+
+### `<NovuImgproxyImage>`
+
+Pins `provider="imgproxy"`. Use `gravity` to pass an imgproxy-native gravity string (e.g. `'fp:0.3:0.25'`); when `gravity` is set the agnostic `focal` mapping is bypassed for that element.
+
+```vue
+<NovuImgproxyImage
+  src="https://origin.example.com/photo.jpg"
+  :width="1600"
+  :height="900"
+  preset="hero"
+  resizing-type="fill"
+/>
+```
+
+### `<NovuStatamicImage>` - the 90% case
+
+Renders any Statamic image asset. Auto-resolves to the matching provider wrapper (`provider="cloudinary"` -> `<NovuCloudinaryImage>`, etc.) and falls back to `<NovuImage>` when no wrapper matches.
+
+```vue
+<NovuStatamicImage :src="entry.hero_image" />
+<NovuStatamicImage :src="entry.hero_image" provider="bunny" />
+<NovuStatamicImage :src="user.avatar" :fallback-alt="user.name" />
+<NovuStatamicImage :src="entry.hero_image" placeholder-field="hero_lqip" />
+```
+
+#### Alt-text resolution order
+
+1. `props.alt` (hard override).
+2. `asset.alt_${locale}` if a locale is detected from `useNuxtApp().$i18n.locale` or set via the `locale` prop.
+3. `asset.alt`.
+4. `props.fallbackAlt` (use this for things like `user.name`).
+5. `undefined`.
+
+#### Focal-point resolution order
+
+1. `props.focal` (hard override).
+2. `asset.focus` (Statamic's `"x-y"` percent format).
+3. `asset.focus_css` (Statamic's `"x% y%"` format - some sites add this via augmentation).
+4. `undefined` (provider falls back to its own default - usually centre).
+
+The dead-centre default (`focus: '50-50'`) is treated as "no focal point" so providers can pick their own smarter centre/strategy.
+
+#### Statamic placeholders
+
+`<NovuStatamicImage>` can consume placeholder data generated by [`daun/statamic-placeholders`](https://github.com/daun/statamic-placeholders). By default it checks the `placeholder`, `lqip`, and `thumbhash` asset fields; override the checked handles globally with `novuImage.statamicPlaceholderFields` or per component with `placeholderField`.
+
+Query the ready-to-use data URI when payload size is not a concern:
+
+```graphql
+... on Asset_Assets {
+  alt
+  lqip {
+    uri
+  }
+}
+```
+
+Or query only the ThumbHash hash and let the Nuxt component decode it:
+
+```graphql
+... on Asset_Assets {
+  alt
+  lqip {
+    type
+    hash
+  }
+}
+```
+
+When both `uri` and `hash` are present, `uri` wins. Hash decoding is supported for ThumbHash placeholders only; BlurHash or average-color placeholders need to provide `uri`. If a Statamic site does not have the addon or the queried asset object has no placeholder field, rendering falls back to the existing generated low-quality `srcset` placeholder. Only include placeholder subfields in GraphQL queries for Statamic schemas where the addon field exists, because GraphQL itself rejects unknown fields before this component can handle the missing data.
+
+#### Statamic blueprint requirements
+
+The `<NovuStatamicImage>` component reads the following fields from a Statamic asset object:
+
+- `permalink` (required) - absolute URL; the host is stripped so the configured provider's `baseURL` applies.
+- `width` / `height` - required to convert `focus` percentages to pixel coordinates (and to compute `aspect-ratio`).
+- `alt` - default alt text.
+- `alt_<locale>` (e.g. `alt_de`, `alt_fr`) - localised alt text. Required only if you want per-locale alts.
+- `focus` - Statamic's native `"x-y"` percent string. Optional.
+- `placeholder` / `lqip` / `thumbhash` - optional placeholder fields from `daun/statamic-placeholders`, either as `{ uri }` or `{ type, hash }`.
+
+## Composable
+
+`resolveStatamicAsset(src, props?, options?)` is a pure helper exposed for cases where you want to compute the resolved `{ src, placeholderSrc, alt, focal, width, height, aspectRatio }` outside of the component (for SEO heads, OG images, etc.).
+
+```ts
+import { resolveStatamicAsset } from '#imports'
+
+const resolved = resolveStatamicAsset(asset, { fallbackAlt: 'Article hero' }, { locale: 'de' })
+```
+
+## A note on the imgproxy provider
+
+The imgproxy provider used here is vendored from [nuxt/image#2117](https://github.com/nuxt/image/pull/2117). When that PR merges into `@nuxt/image`, the vendored version (and the `@noble/hashes` runtime dependency) will be removed.
+
+## Development
+
+```bash
+pnpm dev:prepare   # build types + prepare playground
+pnpm dev           # run the playground
+pnpm test          # run vitest
+pnpm lint          # run eslint
+pnpm test:types    # vue-tsc on src/ and playground/
+```
+
+## License
+
+MIT

package/dist/module.d.mts

@@ -0,0 +1,70 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Breakpoint widths used to build the `srcset`. Each entry generates one
+     * candidate at that pixel width. Plain numbers or strings with `px` suffix.
+     *
+     * @default { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1600, '3xl': 2000 }
+     */
+    screens: Record<string, number | string>;
+    /**
+     * Width used for the legacy `src` URL (browsers that ignore `srcset`/`sizes`).
+     * @default 2000
+     */
+    fallbackWidth: number;
+    /**
+     * Whether to inline a low-quality blurred placeholder into the `srcset`
+     * (descriptor `32w`) so the smallest candidate is shown until the real image loads.
+     * @default true
+     */
+    usePlaceholder: boolean;
+    /** Quality of the inlined placeholder. @default 30 */
+    placeholderQuality: number;
+    /** Width of the inlined placeholder in px. @default 300 */
+    placeholderWidth: number;
+    /**
+     * Optional global `quality` modifier forwarded to `useImage`. Leave unset
+     * to defer to the provider's own default (Cloudinary auto-applies `q_auto`,
+     * imgproxy uses its own configured quality, etc.).
+     */
+    defaultQuality?: number | string;
+    /**
+     * Optional global `format` modifier forwarded to `useImage`. Leave unset
+     * to defer to the provider's own default (Cloudinary auto-applies `f_auto`,
+     * imgproxy defaults to `webp`, etc.).
+     */
+    defaultFormat?: string;
+    /**
+     * Default provider name forwarded to `useImage`. Also used by
+     * `<NovuStatamicImage>` to auto-resolve the matching wrapper component.
+     */
+    provider?: string;
+    /**
+     * Statamic asset field handles checked for daun/statamic-placeholders data.
+     * Each field may be a data URI string or a GraphQL object with `uri`, `type`,
+     * and `hash` subfields.
+     *
+     * @default ['placeholder', 'lqip', 'thumbhash']
+     */
+    statamicPlaceholderFields: string[];
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        novuImage: ModuleOptions;
+    }
+}
+declare module '@nuxt/image' {
+    interface ImageProviders {
+        imgproxy: {
+            baseURL: string;
+            key: string;
+            salt: string;
+        };
+    }
+}
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@teamnovu/nuxt-image",
+  "configKey": "novuImage",
+  "compatibility": {
+    "nuxt": ">=3.13.0"
+  },
+  "version": "1.0.0-beta.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,67 @@
+import { defineNuxtModule, createResolver, installModule, addComponent, addImports, addImportsDir } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const DEFAULT_SCREENS = {
+  "xs": 320,
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1600,
+  "3xl": 2e3
+};
+const DEFAULTS = {
+  screens: DEFAULT_SCREENS,
+  fallbackWidth: 2e3,
+  usePlaceholder: true,
+  placeholderQuality: 30,
+  placeholderWidth: 300,
+  statamicPlaceholderFields: ["placeholder", "lqip", "thumbhash"]
+};
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@teamnovu/nuxt-image",
+    configKey: "novuImage",
+    compatibility: {
+      nuxt: ">=3.13.0"
+    }
+  },
+  defaults: DEFAULTS,
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const imageOptions = nuxt.options.image && typeof nuxt.options.image === "object" ? nuxt.options.image : {};
+    nuxt.options.image = imageOptions;
+    const providers = imageOptions.providers ??= {};
+    if (!providers.imgproxy) {
+      const imgproxyOptions = imageOptions.imgproxy;
+      providers.imgproxy = {
+        provider: resolver.resolve("./runtime/providers/imgproxy"),
+        ...imgproxyOptions ? { options: imgproxyOptions } : {}
+      };
+    }
+    await installModule("@nuxt/image", imageOptions);
+    const publicConfig = nuxt.options.runtimeConfig.public;
+    publicConfig.novuImage = defu(publicConfig.novuImage, options);
+    for (const name of [
+      "NovuImage",
+      "NovuCloudinaryImage",
+      "NovuBunnyImage",
+      "NovuImgproxyImage",
+      "NovuStatamicImage"
+    ]) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/${name}.vue`),
+        global: true
+      });
+    }
+    addImports({
+      name: "resolveStatamicAsset",
+      from: resolver.resolve("./runtime/utils/statamic")
+    });
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    nuxt.options.alias["#novu-image"] = resolver.resolve("./runtime");
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/NovuBunnyImage.d.vue.ts

@@ -0,0 +1,11 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+export type BunnyCropGravity = 'center' | 'north' | 'south' | 'east' | 'west' | 'northeast' | 'northwest' | 'southeast' | 'southwest';
+export interface NovuBunnyImageProps extends Omit<NovuImageProps, 'provider'> {
+    cropGravity?: BunnyCropGravity;
+    faceCrop?: boolean | string;
+    sharpen?: boolean | number;
+    blur?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuBunnyImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuBunnyImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuBunnyImage.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from "vue";
+import NovuImage from "./NovuImage.vue";
+const props = defineProps({
+  cropGravity: { type: String, required: false, default: void 0 },
+  faceCrop: { type: [Boolean, String], required: false, default: void 0 },
+  sharpen: { type: [Boolean, Number], required: false, default: void 0 },
+  blur: { type: Number, required: false, default: void 0 },
+  src: { type: String, required: true },
+  alt: { type: String, required: false },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  sourceWidth: { type: [Number, String], required: false },
+  sourceHeight: { type: [Number, String], required: false },
+  aspectRatio: { type: Number, required: false },
+  quality: { type: [Number, String], required: false },
+  format: { type: String, required: false },
+  fit: { type: String, required: false },
+  focal: { type: [String, Array], required: false },
+  modifiers: { type: Object, required: false },
+  sizes: { type: String, required: false },
+  loading: { type: String, required: false },
+  decoding: { type: String, required: false },
+  priority: { type: Boolean, required: false },
+  fallbackWidth: { type: Number, required: false },
+  usePlaceholder: { type: Boolean, required: false },
+  placeholderQuality: { type: Number, required: false },
+  placeholderWidth: { type: Number, required: false },
+  placeholderSrc: { type: String, required: false }
+});
+const bunnyModifiers = computed(() => {
+  const out = { ...props.modifiers ?? {} };
+  if (props.cropGravity !== void 0) out.cropGravity = props.cropGravity;
+  if (props.faceCrop !== void 0 && props.faceCrop !== false) out.faceCrop = props.faceCrop;
+  if (props.sharpen !== void 0) out.sharpen = props.sharpen;
+  if (props.blur !== void 0) out.blur = props.blur;
+  return out;
+});
+</script>
+
+<template>
+  <NovuImage
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :source-width="sourceWidth"
+    :source-height="sourceHeight"
+    :aspect-ratio="aspectRatio"
+    :quality="quality"
+    :format="format"
+    :fit="fit"
+    :focal="focal"
+    :modifiers="bunnyModifiers"
+    :sizes="sizes"
+    :loading="loading"
+    :decoding="decoding"
+    :priority="priority"
+    :fallback-width="fallbackWidth"
+    :use-placeholder="usePlaceholder"
+    :placeholder-quality="placeholderQuality"
+    :placeholder-width="placeholderWidth"
+    :placeholder-src="placeholderSrc"
+    provider="bunny"
+  />
+</template>

package/dist/runtime/components/NovuBunnyImage.vue.d.ts

@@ -0,0 +1,11 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+export type BunnyCropGravity = 'center' | 'north' | 'south' | 'east' | 'west' | 'northeast' | 'northwest' | 'southeast' | 'southwest';
+export interface NovuBunnyImageProps extends Omit<NovuImageProps, 'provider'> {
+    cropGravity?: BunnyCropGravity;
+    faceCrop?: boolean | string;
+    sharpen?: boolean | number;
+    blur?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuBunnyImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuBunnyImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuCloudinaryImage.d.vue.ts

@@ -0,0 +1,19 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+import type { FocalPoint } from '../utils/focal.js';
+export type CloudinaryFocal = 'auto' | 'face' | FocalPoint;
+export interface NovuCloudinaryImageProps extends Omit<NovuImageProps, 'focal' | 'provider'> {
+    focal?: CloudinaryFocal;
+    zoom?: number | string;
+    /**
+     * Cloudinary crop mode (URL parameter `c_`). Accepts both Cloudinary-native
+     * values (`'lfill'`, `'thumb'`, `'fill'`, `'pad'`, ...) and `@nuxt/image`'s
+     * normalised aliases (`'cover'`, `'contain'`, `'thumbnail'`, ...). Maps to
+     * the `fit` modifier under the hood.
+     */
+    crop?: string;
+    /** Named Cloudinary transformation preset (URL parameter `t_<name>`), or a raw modifiers object spread into `useImage`'s modifiers. */
+    transformation?: string | Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuCloudinaryImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuCloudinaryImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuCloudinaryImage.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "vue";
+import NovuImage from "./NovuImage.vue";
+const props = defineProps({
+  focal: { type: [String, Array], required: false, default: void 0 },
+  zoom: { type: [Number, String], required: false, default: void 0 },
+  crop: { type: String, required: false, default: void 0 },
+  transformation: { type: [String, Object], required: false, default: void 0 },
+  src: { type: String, required: true },
+  alt: { type: String, required: false },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  sourceWidth: { type: [Number, String], required: false },
+  sourceHeight: { type: [Number, String], required: false },
+  aspectRatio: { type: Number, required: false },
+  quality: { type: [Number, String], required: false },
+  format: { type: String, required: false },
+  fit: { type: String, required: false },
+  modifiers: { type: Object, required: false },
+  sizes: { type: String, required: false },
+  loading: { type: String, required: false },
+  decoding: { type: String, required: false },
+  priority: { type: Boolean, required: false },
+  fallbackWidth: { type: Number, required: false },
+  usePlaceholder: { type: Boolean, required: false },
+  placeholderQuality: { type: Number, required: false },
+  placeholderWidth: { type: Number, required: false },
+  placeholderSrc: { type: String, required: false }
+});
+const cloudinaryFocal = computed(() => {
+  if (props.focal === "face") return void 0;
+  return props.focal;
+});
+const effectiveFit = computed(() => props.crop ?? props.fit);
+const cloudinaryModifiers = computed(() => {
+  const out = { ...props.modifiers ?? {} };
+  if (props.zoom !== void 0) out.zoom = props.zoom;
+  if (props.focal === "face") {
+    out.gravity = "face";
+    if (props.crop === void 0 && out.fit === void 0) out.fit = "fill";
+  }
+  if (props.transformation) {
+    if (typeof props.transformation === "string") {
+      out.transformation = props.transformation;
+    } else {
+      Object.assign(out, props.transformation);
+    }
+  }
+  return out;
+});
+</script>
+
+<template>
+  <NovuImage
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :source-width="sourceWidth"
+    :source-height="sourceHeight"
+    :aspect-ratio="aspectRatio"
+    :quality="quality"
+    :format="format"
+    :fit="effectiveFit"
+    :focal="cloudinaryFocal"
+    :modifiers="cloudinaryModifiers"
+    :sizes="sizes"
+    :loading="loading"
+    :decoding="decoding"
+    :priority="priority"
+    :fallback-width="fallbackWidth"
+    :use-placeholder="usePlaceholder"
+    :placeholder-quality="placeholderQuality"
+    :placeholder-width="placeholderWidth"
+    :placeholder-src="placeholderSrc"
+    provider="cloudinary"
+  />
+</template>

package/dist/runtime/components/NovuCloudinaryImage.vue.d.ts

@@ -0,0 +1,19 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+import type { FocalPoint } from '../utils/focal.js';
+export type CloudinaryFocal = 'auto' | 'face' | FocalPoint;
+export interface NovuCloudinaryImageProps extends Omit<NovuImageProps, 'focal' | 'provider'> {
+    focal?: CloudinaryFocal;
+    zoom?: number | string;
+    /**
+     * Cloudinary crop mode (URL parameter `c_`). Accepts both Cloudinary-native
+     * values (`'lfill'`, `'thumb'`, `'fill'`, `'pad'`, ...) and `@nuxt/image`'s
+     * normalised aliases (`'cover'`, `'contain'`, `'thumbnail'`, ...). Maps to
+     * the `fit` modifier under the hood.
+     */
+    crop?: string;
+    /** Named Cloudinary transformation preset (URL parameter `t_<name>`), or a raw modifiers object spread into `useImage`'s modifiers. */
+    transformation?: string | Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuCloudinaryImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuCloudinaryImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuImage.d.vue.ts

@@ -0,0 +1,28 @@
+import type { FocalPoint } from '../utils/focal.js';
+export interface NovuImageProps {
+    src: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    sourceWidth?: number | string;
+    sourceHeight?: number | string;
+    aspectRatio?: number;
+    quality?: number | string;
+    format?: string;
+    fit?: string;
+    focal?: FocalPoint;
+    modifiers?: Record<string, unknown>;
+    provider?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'async' | 'sync' | 'auto';
+    priority?: boolean;
+    fallbackWidth?: number;
+    usePlaceholder?: boolean;
+    placeholderQuality?: number;
+    placeholderWidth?: number;
+    placeholderSrc?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;