@gluhar/app 5.0.10 → 5.1.5

package/README.md

@@ -1,64 +1,64 @@
-# `@gluhar/app`
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.
-
-[✨  Release Notes](/CHANGELOG.md)
-
-## Installation
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add @gluhar/app
-```
-
-## Usage
-
-## Config
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  npm install
-  
-  # Generate type stubs
-  npm run dev:prepare
-  
-  # Develop with the playground
-  npm run dev
-  
-  # Build the playground
-  npm run dev:build
-  
-  # Run ESLint
-  npm run lint
-  
-  # Run Vitest
-  npm run test
-  npm run test:watch
-  
-  # Release new version
-  npm run release
-  ```
-
-</details>
-
-<!-- Badges -->
-
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/my-module
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
-[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+# `@gluhar/app`
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.
+
+[✨ &nbsp;Release Notes](/CHANGELOG.md)
+
+## Installation
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @gluhar/app
+```
+
+## Usage
+
+## Config
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/my-module
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/package.json

@@ -1,68 +1,68 @@
-{
-    "name":  "@gluhar/app",
-    "version":  "5.0.10",
-    "description":  "Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.",
-    "license":  "MIT",
-    "type":  "module",
-    "exports":  {
-                    ".":  {
-                              "types":  "./dist/types.d.ts",
-                              "import":  "./dist/module.mjs",
-                              "require":  "./dist/module.cjs"
-                          },
-                    "./utils/*":  {
-                                      "types":  "./dist/runtime/utils/*.d.ts",
-                                      "import":  "./dist/runtime/utils/*.js"
-                                  },
-                    "./types":  {
-                                    "types":  "./dist/runtime/types/index.d.ts",
-                                    "import":  "./dist/runtime/types/index.js"
-                                }
-                },
-    "main":  "./dist/module.cjs",
-    "types":  "./dist/types.d.ts",
-    "files":  [
-                  "dist",
-                  "CHANGELOG.md"
-              ],
-    "scripts":  {
-                    "gluhar":  "npm run gluhar --prefix ../.. -- --cwd=$PWD",
-                    "build":  "npm run gluhar build -- -t module",
-                    "prepack":  "npm run build",
-                    "dev":  "nuxi dev playground",
-                    "dev:build":  "nuxi build playground",
-                    "dev:prepare":  "nuxt-module-build build --stub \u0026\u0026 nuxt-module-build prepare \u0026\u0026 nuxi prepare playground",
-                    "lint":  "eslint .",
-                    "test":  "vitest run",
-                    "test:watch":  "vitest watch"
-                },
-    "dependencies":  {
-                         "@gluhar/core":  "^4.0.0",
-                         "@gluhar/i18n":  "^4.0.3",
-                         "@gluhar/sanity":  "^5.0.3",
-                         "@gluhar/theme":  "^4.0.4",
-                         "@gluhar/v-gsap-nuxt":  "^1.5.1",
-                         "@nuxt/image":  "^1.10.0",
-                         "@nuxt/kit":  "^3.13.1",
-                         "@pinia/nuxt":  "^0.5.4",
-                         "@sanity/image-url":  "^1.1.0",
-                         "dayjs-nuxt":  "^2.1.11",
-                         "defu":  "^6.1.4",
-                         "lenis":  "^1.3.11",
-                         "pinia":  "^2.2.2",
-                         "v-gsap-nuxt":  "^1.4.2"
-                     },
-    "devDependencies":  {
-                            "@nuxt/devtools":  "latest",
-                            "@nuxt/eslint-config":  "^0.5.6",
-                            "@nuxt/module-builder":  "^0.8.3",
-                            "@nuxt/schema":  "^3.13.1",
-                            "@nuxt/test-utils":  "^3.14.1",
-                            "@types/node":  "^20.16.5",
-                            "changelogen":  "^0.5.5",
-                            "eslint":  "^9.10.0",
-                            "nuxt":  "^3.13.1",
-                            "vitest":  "^2.0.5"
-                        },
-    "gitHead":  "37c79c38049ee2d91e649523539808c2fdbffd88"
-}
+{
+  "name": "@gluhar/app",
+  "version": "5.1.5",
+  "description": "Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    },
+    "./utils/*": {
+      "types": "./dist/runtime/utils/*.d.ts",
+      "import": "./dist/runtime/utils/*.js"
+    },
+    "./types": {
+      "types": "./dist/runtime/types/index.d.ts",
+      "import": "./dist/runtime/types/index.js"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "gluhar": "npm run gluhar --prefix ../.. -- --cwd=$PWD",
+    "build": "npm run gluhar build -- -t module",
+    "prepack": "npm run build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@gluhar/core": "^4.1.5",
+    "@gluhar/i18n": "^4.1.5",
+    "@gluhar/sanity": "^5.1.5",
+    "@gluhar/theme": "^4.0.4",
+    "@gluhar/v-gsap-nuxt": "^1.5.1",
+    "@nuxt/image": "^1.10.0",
+    "@nuxt/kit": "^3.13.1",
+    "@pinia/nuxt": "^0.5.4",
+    "@sanity/image-url": "^1.1.0",
+    "dayjs-nuxt": "^2.1.11",
+    "defu": "^6.1.4",
+    "lenis": "^1.3.11",
+    "pinia": "^2.2.2",
+    "v-gsap-nuxt": "^1.4.2"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxt/eslint-config": "^0.5.6",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/schema": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^20.16.5",
+    "changelogen": "^0.5.5",
+    "eslint": "^9.10.0",
+    "nuxt": "^3.13.1",
+    "vitest": "^2.0.5"
+  },
+  "gitHead": "a60bf29f338bc3af3212a3a8ed647f75c69a2c4a"
+}

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -1,21 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { GluharI18nOptions } from '@gluhar/i18n';
-import { GluharThemeOptions } from '@gluhar/theme';
-import { GluharSanityOptions } from '@gluhar/sanity';
-import { ModuleOptions } from 'v-gsap-nuxt';
-import { ModuleOptions as ModuleOptions$1 } from '@nuxt/image';
-import { ModuleOptions as ModuleOptions$2 } from 'dayjs-nuxt';
-
-interface GluharAppOptions {
-    theme?: GluharThemeOptions | false;
-    i18n?: GluharI18nOptions | false;
-    sanity?: GluharSanityOptions | false;
-    vgsap?: (ModuleOptions & {
-        dev?: boolean;
-    }) | false;
-    image?: ModuleOptions$1 | false;
-    dayjs?: ModuleOptions$2 | false;
-}
-declare const _default: _nuxt_schema.NuxtModule<GluharAppOptions, GluharAppOptions, false>;
-
-export { type GluharAppOptions, _default as default };

package/dist/module.d.ts

@@ -1,21 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { GluharI18nOptions } from '@gluhar/i18n';
-import { GluharThemeOptions } from '@gluhar/theme';
-import { GluharSanityOptions } from '@gluhar/sanity';
-import { ModuleOptions } from 'v-gsap-nuxt';
-import { ModuleOptions as ModuleOptions$1 } from '@nuxt/image';
-import { ModuleOptions as ModuleOptions$2 } from 'dayjs-nuxt';
-
-interface GluharAppOptions {
-    theme?: GluharThemeOptions | false;
-    i18n?: GluharI18nOptions | false;
-    sanity?: GluharSanityOptions | false;
-    vgsap?: (ModuleOptions & {
-        dev?: boolean;
-    }) | false;
-    image?: ModuleOptions$1 | false;
-    dayjs?: ModuleOptions$2 | false;
-}
-declare const _default: _nuxt_schema.NuxtModule<GluharAppOptions, GluharAppOptions, false>;
-
-export { type GluharAppOptions, _default as default };

package/dist/module.json

@@ -1,9 +0,0 @@
-{
-  "name": "@gluhar/app",
-  "configKey": "gluhar",
-  "version": "5.0.8",
-  "builder": {
-    "@nuxt/module-builder": "0.8.3",
-    "unbuild": "2.0.0"
-  }
-}

package/dist/module.mjs

@@ -1,59 +0,0 @@
-import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir } from '@nuxt/kit';
-import defu from 'defu';
-
-const module = defineNuxtModule({
-  meta: {
-    name: "@gluhar/app",
-    configKey: "gluhar"
-  },
-  // Default configuration options of the Nuxt module
-  defaults: {},
-  async setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url);
-    const { theme, i18n, sanity, vgsap, image, dayjs } = options;
-    await installModule("@gluhar/core");
-    await installModule("@pinia/nuxt");
-    if (theme !== false) {
-      await installModule("@gluhar/theme", theme);
-    }
-    if (i18n !== false) {
-      await installModule("@gluhar/i18n", i18n);
-    }
-    if (sanity !== false && i18n !== false) {
-      await installModule("@gluhar/sanity", sanity);
-    }
-    if (vgsap !== false) {
-      if (vgsap?.dev) {
-        await installModule("@gluhar/v-gsap-nuxt", vgsap);
-      } else {
-        await installModule("v-gsap-nuxt", vgsap);
-      }
-    }
-    if (image !== false) {
-      await installModule("@nuxt/image", image);
-    }
-    if (dayjs !== false) {
-      await installModule("dayjs-nuxt", dayjs);
-    }
-    addImportsDir(resolve("runtime/composables"));
-    addComponentsDir({ path: resolve("runtime/components") });
-    addImportsDir(resolve("runtime/stores"));
-    addImportsDir(resolve("runtime/utils"));
-    nuxt.options.vite = defu(nuxt.options.vite, {
-      esbuild: {
-        legalComments: "none"
-      },
-      build: {
-        terserOptions: {
-          format: {
-            comments: false
-          }
-        }
-      }
-    });
-    nuxt.options.experimental.watcher = "parcel";
-    nuxt.options.devtools.enabled = false;
-  }
-});
-
-export { module as default };

package/dist/runtime/components/GContactLink.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { useResponsive, computed, ref } from "#imports";
-
-const props = defineProps<{
-  phone?: string;
-  email?: string;
-  onCopy?: () => void;
-}>();
-
-const defaultCursorText = "Copy to clipboard";
-const cursorText = ref(defaultCursorText);
-
-const { isMobile } = useResponsive();
-
-const href = computed(() => {
-  if (!isMobile.value) return undefined;
-  return props.phone ? `tel:${props.phone}` : `mailto:${props.email}`;
-});
-
-const handleClick = async (isPhone: boolean) => {
-  const value = isPhone ? props.phone : props.email;
-
-  if (isMobile.value) return;
-  cursorText.value = "Copied!";
-
-  await navigator.clipboard.writeText(value!);
-
-  props.onCopy?.();
-};
-
-const onMouseLeave = () => {
-  cursorText.value = defaultCursorText;
-};
-</script>
-
-<template>
-  <a :href v-bind="$attrs" v-if="isMobile">
-    <slot> {{ phone || email }} </slot>
-  </a>
-  <div
-    :data-cursor-text="cursorText"
-    @mousedown="handleClick(!!phone)"
-    @mouseleave="onMouseLeave"
-    v-bind="$attrs"
-    v-else
-  >
-    <slot> {{ phone || email }} </slot>
-  </div>
-</template>

package/dist/runtime/components/GLenisScroller.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core";
-import { ref, type CSSProperties } from "vue";
-import { useLenis } from "#imports";
-
-defineProps<{
-  contentClass?: string;
-  contentStyle?: CSSProperties;
-}>();
-
-const scrollerRef = ref<HTMLDivElement>();
-const contentRef = ref<HTMLDivElement>();
-
-const { lenis } = useLenis(scrollerRef);
-
-const prevHeight = ref(0);
-
-useResizeObserver(contentRef, (entries) => {
-  const entry = entries[0];
-  const { height } = entry.contentRect;
-
-  if (height === prevHeight.value) return;
-
-  prevHeight.value = height;
-  lenis.value?.resize();
-});
-
-defineExpose({
-  lenis,
-  scrollerRef,
-});
-</script>
-
-<template>
-  <div class="lenis-scroller overflow-y-auto" ref="scrollerRef">
-    <div :class="contentClass" :style="contentStyle" ref="contentRef">
-      <slot />
-    </div>
-  </div>
-</template>

package/dist/runtime/components/GluharLogo.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <svg viewBox="0 0 262.1 89" class="fill-secondary-base">
-    <path
-      d="M229.5,28l-15.8-14.6l4.7-4.7l12.2,13.2L229.8,0h6.6l-0.9,21.9L249,6.8l4.7,4.7l-17,16.5l13.9,12.8l-4.7,4.7
-	l-12.8-13.9c-6.4,6.6-10.6,12.6-13.3,18.1c-2.9,6-4.2,12.8-4.2,23.3H209c0-11.1,1.3-19,4.9-26.2C217,40.3,222.9,34.7,229.5,28z
-	 M262.1,31.3l-14.9-0.9v-4.8l14.9-0.9V31.3z"
-    />
-    <path
-      d="M181.4,72.6V38.4h6.2l0.6,5c0.9-1.9,2.4-3.3,4.4-4.2c2-1,4.1-1.4,6.2-1.4c3.7,0,6.9,1.1,9.6,3.2l-2.9,5.6
-	c-1.9-1.6-4.1-2.4-6.7-2.4c-1.7,0-3.4,0.4-4.9,1.2s-2.7,1.9-3.7,3.4s-1.5,3.2-1.5,5.2v18.7L181.4,72.6L181.4,72.6z"
-    />
-    <path
-      d="M153.5,73.5c-4,0-7.4-0.9-10.3-2.7c-2.8-1.9-4.2-4.7-4.2-8.4s1.3-6.4,4-8c2.7-1.7,6.1-2.5,10.1-2.5h13.5
-	c-0.2-2.3-1.3-4.2-3.3-5.7c-2-1.4-4.4-2.2-7.2-2.2c-2.1,0-4,0.4-6,1.2c-1.9,0.8-3.4,2-4.4,3.4l-5.3-2.9c1.6-2.7,3.8-4.7,6.5-6.1
-	c2.8-1.4,5.9-2.2,9.1-2.2c3.1,0,6,0.6,8.7,1.7c2.8,1.1,5,2.8,6.7,5s2.6,4.8,2.6,7.8v14l0.3,6.5h-6.9l-0.6-5.2
-	c-1.1,2-2.9,3.5-5.2,4.6C159.4,73,156.7,73.5,153.5,73.5z M154.2,67c3.3,0,6.3-0.6,8.8-1.8c2.5-1.2,3.8-3.4,3.8-6.5v-1.1h-13.5
-	c-1.9,0-3.5,0.4-4.9,1.1c-1.3,0.8-2,1.9-2,3.5c0,1.7,0.8,2.9,2.4,3.7C150.4,66.7,152.2,67,154.2,67z"
-    />
-    <path
-      d="M98.8,72.6V22.3h7.4v21.1c1-1.9,2.5-3.3,4.4-4.2c1.9-1,4.1-1.4,6.5-1.4c4.7,0,8.8,1.4,12.1,4.2s5,7.2,5,13.2v17.4h-7.5V55
-	c0-3.8-0.9-6.7-2.7-8.5c-1.9-1.8-4.2-2.8-7-2.8c-1.8,0-3.5,0.4-5.2,1.3c-1.6,0.9-3,2.2-4,3.9s-1.5,3.9-1.5,6.4v17.2L98.8,72.6
-	L98.8,72.6z"
-    />
-    <path
-      d="M73.1,73.2c-4.7,0-8.8-1.4-12.1-4.2c-3.3-2.8-5-7.2-5-13.2V38.4h7.5v17.5c0,3.8,0.9,6.7,2.7,8.5c1.9,1.8,4.2,2.8,7,2.8
-	c1.8,0,3.5-0.4,5.2-1.3c1.6-0.9,2.9-2.2,3.9-3.9c1.1-1.8,1.6-3.9,1.6-6.5V38.4h7.4v34.2h-6.6l-0.6-5c-1,1.9-2.5,3.3-4.5,4.2
-	S75.5,73.2,73.1,73.2z"
-    />
-    <path d="M50,72.6h-7.4V22.3H50V72.6z" />
-    <path
-      d="M19.8,89c-4.1,0-7.7-0.4-10.6-1.3c-3-0.9-5.3-2.6-6.9-5.2c-1-1.6-1.5-3.4-1.5-5.3c0-1.5,0.3-2.8,0.9-4.1
-	c0.6-1.2,1.5-2.2,2.7-2.9c-1.4-0.5-2.5-1.3-3.3-2.4C0.4,66.7,0,65.4,0,63.9c0-1.6,0.5-3,1.4-4.2c1-1.2,2.3-2,3.9-2.4
-	c-1-0.9-1.7-1.9-2.2-3.2c-0.5-1.2-0.8-2.5-0.8-3.7c0-2.8,0.8-5.2,2.5-7.2c1.6-1.9,3.8-3.3,6.5-4.1c2.7-0.9,5.6-1.2,8.5-1.1L37,38.3
-	v0.8v3.7v0.9l-3.4-0.1l-1.9-0.1c1.3,0.8,2.3,1.8,3.1,3S36,49,36,50.4c0,2.8-0.8,5.1-2.4,7c-1.6,1.9-3.7,3.3-6.2,4.3
-	c-2.5,0.9-5.2,1.4-8,1.4c-2.4,0-4.8-0.3-7.2-1C11,61.8,9.9,61.6,9,61.6c-0.5,0-1,0.1-1.4,0.2c-0.5,0.2-0.8,0.5-1.1,0.9
-	c-0.2,0.3-0.4,0.7-0.4,1.1c0,0.6,0.3,1.2,0.9,1.7c0.7,0.5,1.6,0.7,2.8,0.7H19c5.5,0,10,0.7,13.6,2.1c3.7,1.3,5.5,4.1,5.5,8.3
-	c0,3-0.9,5.4-2.8,7.2c-1.9,1.9-4.2,3.2-7,4C25.6,88.6,22.7,89,19.8,89z M19.3,57.2c2.3,0,4.5-0.6,6.5-1.7c2-1.1,2.9-2.8,2.9-5
-	c0-2.1-0.9-3.7-2.8-4.9c-1.9-1.1-4.1-1.7-6.7-1.7s-4.9,0.6-6.7,1.7c-1.9,1.1-2.8,2.8-2.8,4.9c0,2.3,1,4,2.9,5.1
-	C14.6,56.6,16.9,57.2,19.3,57.2z M19.7,82.7c3.1,0,5.7-0.6,7.8-1.7c2.2-1.1,3.2-2.7,3.2-4.8c0-1.3-0.5-2.3-1.6-2.8s-2.4-0.9-4.1-1.1
-	c-0.8-0.1-2-0.1-3.5-0.1h-2.4h-9c-0.9,0.4-1.5,1-2,1.7s-0.7,1.5-0.7,2.3c0,1.1,0.4,2.1,1.1,3c0.9,1.1,2.4,2,4.5,2.6
-	C15.1,82.4,17.3,82.7,19.7,82.7z"
-    />
-  </svg>
-</template>

package/dist/runtime/components/SanityImg.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useMessages } from "#imports";
-import type { LocaleString } from "@gluhar/i18n/types";
-import type { SanityImage } from "@gluhar/sanity/types";
-// @ts-ignore
-import imageUrlBuilder from "@sanity/image-url/lib/browser/image-url.esm"; // INFO this is a strange fix
-// import imageUrlBuilder from "@sanity/image-url";
-import type { CropMode, ImageFormat } from "@sanity/image-url/lib/types/types";
-import sanityConfig from "~/config/sanity.config";
-
-const props = defineProps<{
-  image?: SanityImage;
-  by?: "width" | "height" | "both";
-  alt?: LocaleString;
-  width?: number;
-  height?: number;
-  format?: ImageFormat | null;
-  crop?: CropMode;
-  dpr?: number;
-}>();
-
-const { l } = useMessages();
-
-const builder = imageUrlBuilder(sanityConfig);
-const urlFor = (source: SanityImage) => builder.image(source);
-
-const imgRef = ref<HTMLImageElement | null>(null);
-const src = computed(() => {
-  const { width, height } = imgRef.value?.getBoundingClientRect() || {
-    width: undefined,
-    height: undefined,
-  };
-
-  if (!props.image?.asset || (!width && !height)) return undefined;
-
-  let url = urlFor(props.image);
-
-  if (props.width) url = url.width(props.width);
-  else if (width && (props.by === "width" || !props.by))
-    url = url.width(Math.ceil(width));
-
-  if (props.height) url = url.height(props.height);
-  else if (height && (props.by === "height" || !props.by))
-    url = url.height(Math.ceil(height));
-
-  if (props.crop) url = url.fit("crop").crop(props.crop);
-
-  url = url.format(props.format ?? "webp");
-  url = url.quality(100);
-
-  url = url.dpr(
-    props.dpr || typeof window !== "undefined" ? window.devicePixelRatio : 1,
-  );
-
-  return url.url();
-});
-</script>
-
-<template>
-  <img
-    class="object-cover"
-    :style="{ aspectRatio: image?.asset?.metadata?.dimensions?.aspectRatio }"
-    :src
-    :alt="l(alt) || l(image.caption) || l(image.alt)"
-    ref="imgRef"
-    v-if="image"
-  />
-</template>