@absolutejs/absolute 0.19.0-beta.179 → 0.19.0-beta.180

package/dist/vue/components/Image.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { ImageProps } from '../../../types/image';
+import {
+	DEFAULT_QUALITY,
+	buildOptimizedUrl,
+	generateBlurSvg,
+	generateSrcSet
+} from '../../utils/imageProcessing';
+
+const props = withDefaults(defineProps<ImageProps>(), {
+	quality: DEFAULT_QUALITY,
+	loading: 'lazy'
+});
+
+const blurRemoved = ref(false);
+
+const resolvedSrc = computed(() => {
+	if (props.overrideSrc) return props.overrideSrc;
+	if (props.unoptimized) return props.src;
+	if (props.loader) return props.loader({ src: props.src, width: props.width ?? 0, quality: props.quality });
+	if (!props.width) return buildOptimizedUrl(props.src, 0, props.quality);
+	return buildOptimizedUrl(props.src, props.width, props.quality);
+});
+
+const srcSet = computed(() =>
+	props.unoptimized
+		? undefined
+		: generateSrcSet(props.src, props.width, props.sizes, undefined, props.loader ?? undefined)
+);
+
+const resolvedSizes = computed(() => props.sizes ?? (props.fill ? '100vw' : undefined));
+
+const resolvedLoading = computed(() => (props.priority ? 'eager' : props.loading));
+
+const resolvedFetchPriority = computed(() => (props.priority ? 'high' : props.fetchPriority));
+
+const hasBlur = computed(() =>
+	props.placeholder === 'blur' ||
+	(typeof props.placeholder === 'string' &&
+		props.placeholder !== 'empty' &&
+		props.placeholder.startsWith('data:'))
+);
+
+const blurBackground = computed(() => {
+	if (!hasBlur.value || blurRemoved.value) return undefined;
+	if (
+		typeof props.placeholder === 'string' &&
+		props.placeholder !== 'blur' &&
+		props.placeholder.startsWith('data:')
+	) {
+		return generateBlurSvg(props.placeholder);
+	}
+	if (props.blurDataURL) return generateBlurSvg(props.blurDataURL);
+	return undefined;
+});
+
+const imgStyle = computed(() => {
+	const base: Record<string, string | number> = {
+		...(props.style ?? {}),
+		color: 'transparent'
+	};
+	if (blurBackground.value) {
+		base.backgroundImage = blurBackground.value;
+		base.backgroundSize = 'cover';
+		base.backgroundPosition = 'center';
+		base.backgroundRepeat = 'no-repeat';
+	}
+	if (props.fill) {
+		base.position = 'absolute';
+		base.height = '100%';
+		base.width = '100%';
+		base.inset = '0';
+		base.objectFit = 'cover';
+	}
+	return base;
+});
+
+const handleLoad = (e: Event) => {
+	blurRemoved.value = true;
+	if (props.onLoad) (props.onLoad as (event: Event) => void)(e);
+};
+
+const handleError = (e: Event) => {
+	if (props.onError) (props.onError as (event: Event) => void)(e);
+};
+</script>
+
+<template>
+	<Teleport to="head" v-if="priority">
+		<link
+			rel="preload"
+			as="image"
+			:href="resolvedSrc"
+			:imagesrcset="srcSet"
+			:imagesizes="resolvedSizes"
+			:crossorigin="crossOrigin"
+		/>
+	</Teleport>
+
+	<span
+		v-if="fill"
+		style="position: relative; overflow: hidden; display: block; width: 100%; height: 100%"
+	>
+		<img
+			:alt="alt"
+			:src="resolvedSrc"
+			:srcset="srcSet"
+			:sizes="resolvedSizes"
+			:loading="resolvedLoading"
+			:class="className"
+			:style="imgStyle"
+			:crossorigin="crossOrigin"
+			:referrerpolicy="referrerPolicy"
+			:fetchpriority="resolvedFetchPriority"
+			decoding="async"
+			@load="handleLoad"
+			@error="handleError"
+		/>
+	</span>
+
+	<img
+		v-else
+		:alt="alt"
+		:src="resolvedSrc"
+		:srcset="srcSet"
+		:sizes="resolvedSizes"
+		:width="width"
+		:height="height"
+		:loading="resolvedLoading"
+		:class="className"
+		:style="imgStyle"
+		:crossorigin="crossOrigin"
+		:referrerpolicy="referrerPolicy"
+		:fetchpriority="resolvedFetchPriority"
+		decoding="async"
+		@load="handleLoad"
+		@error="handleError"
+	/>
+</template>

package/package.json

@@ -103,6 +103,12 @@
 			"import": "./dist/vue/components/index.js",
 			"types": "./dist/src/vue/components/index.d.ts"
 		},
+		"./vue/components/Image.vue": {
+			"import": "./dist/vue/components/Image.vue"
+		},
+		"./vue/components/Image.js": {
+			"import": "./dist/vue/components/Image.vue"
+		},
 		"./angular/components": {
 			"import": "./dist/angular/components/index.js",
 			"types": "./dist/src/angular/components/index.d.ts"
@@ -184,7 +190,7 @@
 		"url": "git+https://github.com/absolutejs/absolutejs.git"
 	},
 	"scripts": {
-		"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/angular/components/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts src/vue/components/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external sharp --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client && mkdir -p dist/svelte/components && cp src/svelte/components/*.svelte dist/svelte/components/",
+		"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/angular/components/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts src/vue/components/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external sharp --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client && mkdir -p dist/svelte/components && cp src/svelte/components/*.svelte dist/svelte/components/ && mkdir -p dist/vue/components && cp src/vue/components/*.vue dist/vue/components/",
 		"build:native": "./native/build.sh",
 		"db:push": "drizzle-kit push",
 		"db:studio": "drizzle-kit studio",
@@ -198,5 +204,5 @@
 		"typecheck": "bun run vue-tsc --noEmit"
 	},
 	"types": "./dist/src/index.d.ts",
-	"version": "0.19.0-beta.179"
+	"version": "0.19.0-beta.180"
 }