@gluhar/app 2.5.2 → 2.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0](https://github.com/gluharry/gluhar/compare/@gluhar/app@2.5.2...@gluhar/app@2.6.0) (2025-02-07)
+
+
+### 🚀 Enhancements
+
+- SanityImg component ([04d86e2](https://github.com/gluharry/gluhar/commit/04d86e2d55ff03195a92efb1df7bc35c92e3394c))
+
+
+
+
+
 ## [2.5.2](https://github.com/gluharry/gluhar/compare/@gluhar/app@2.5.1...@gluhar/app@2.5.2) (2025-01-28)
 
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluhar/app",
   "configKey": "gluhar",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, installModule, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import defu from 'defu';
 
 const module = defineNuxtModule({
@@ -23,6 +23,7 @@ const module = defineNuxtModule({
       await installModule("@gluhar/sanity", sanity);
     }
     addImportsDir(resolve("runtime/composables"));
+    addComponentsDir({ path: resolve("runtime/components") });
     addImportsDir(resolve("runtime/utils"));
     addImportsDir(resolve("runtime/stores"));
     nuxt.options.vite = defu(nuxt.options.vite, {

package/dist/runtime/components/SanityImg.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from "#imports";
+import type { SanityImage } from "@gluhar/sanity/types";
+import imageUrlBuilder from "@sanity/image-url";
+import type { ImageFormat } from "@sanity/image-url/lib/types/types";
+import sanityConfig from "~/config/sanity.config";
+
+const props = withDefaults(
+  defineProps<{
+    image?: SanityImage;
+    by?: "w" | "h";
+    width?: number;
+    height?: number;
+    format?: ImageFormat | null;
+  }>(),
+  { by: "w" },
+);
+
+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 || (!width && !height)) return undefined;
+
+  let url = urlFor(props.image);
+
+  if (props.width) url = url.width(props.width);
+  else if (width && props.by === "w") url = url.width(Math.ceil(width));
+
+  if (props.height) url = url.height(props.height);
+  else if (height && props.by === "h") url = url.height(Math.ceil(height));
+
+  url = url.format(props.format ?? "webp");
+  url = url.quality(100);
+
+  // const dpr = window.devicePixelRatio;
+  url = url.dpr(1.2);
+
+  return url.url();
+});
+</script>
+
+<template>
+  <img
+    class="object-cover"
+    :src
+    :alt="l(image.caption) || l(image.alt)"
+    ref="imgRef"
+    v-if="image"
+  />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluhar/app",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "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",
@@ -43,6 +43,7 @@
     "@gluhar/theme": "^2.0.2",
     "@nuxt/kit": "^3.13.1",
     "@pinia/nuxt": "^0.5.4",
+    "@sanity/image-url": "^1.1.0",
     "defu": "^6.1.4",
     "pinia": "^2.2.2"
   },
@@ -58,5 +59,5 @@
     "nuxt": "^3.13.1",
     "vitest": "^2.0.5"
   },
-  "gitHead": "f19d2e2a0f29905d9258938bd9239ab1c7e4e782"
+  "gitHead": "48de7c15bdc9a8186cfb49833ff588c2347a2c18"
 }