@inlaylab/opaline-vue 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Inlaylab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# @inlaylab/opaline-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Seeded avatars for Vue 3 and Nuxt. SSR-safe.
+
+```sh
+npm i @inlaylab/opaline-vue
+```
+
+```vue
+<script setup>
+import { Avatar } from '@inlaylab/opaline-vue'
+import { clay } from '@inlaylab/opaline/clay'
+</script>
+
+<template>
+  <Avatar :seed="user.email" :look="clay" :src="user.photo" :alt="user.name" />
+</template>
+```
+
+Props: `seed`, `look`, `size`, `src`, `alt`, and every core option. If you mount several Vue apps on one page, give each `app.config.idPrefix` so their gradient IDs cannot clash.
+
+Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
+
+[Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { AuraOptions, ClayOptions, InitialsOptions, Style } from "@inlaylab/opaline";
+import { PropType } from "vue";
+type AvatarProps = {
+  seed: string | number | null | undefined;
+  /** The style object, e.g. `morph` from `@inlaylab/opaline/morph`. */
+  look: Style<any>;
+  size?: number;
+  /** Photo to show over the generated avatar once it loads. */
+  src?: string;
+  /** Accessible name. Without it the avatar is decorative and hidden from assistive tech. */
+  alt?: string;
+} & ClayOptions & AuraOptions & InitialsOptions;
+export declare const Avatar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  seed: {
+    type: PropType<AvatarProps["seed"]>;
+    default: undefined;
+  };
+  look: {
+    type: PropType<Style<any>>;
+    required: true;
+  };
+  size: {
+    type: NumberConstructor;
+    default: number;
+  };
+  src: StringConstructor;
+  alt: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  seed: {
+    type: PropType<AvatarProps["seed"]>;
+    default: undefined;
+  };
+  look: {
+    type: PropType<Style<any>>;
+    required: true;
+  };
+  size: {
+    type: NumberConstructor;
+    default: number;
+  };
+  src: StringConstructor;
+  alt: StringConstructor;
+}>> & Readonly<{}>, {
+  seed: string | number | null | undefined;
+  size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { AvatarProps };

package/dist/index.js

@@ -0,0 +1,88 @@
+import { createAvatar } from "@inlaylab/opaline";
+import { computed, defineComponent, h, onMounted, ref, useId } from "vue";
+// src/photo.ts
+const STYLE = {
+	position: "absolute",
+	inset: 0,
+	width: "100%",
+	height: "100%",
+	objectFit: "cover",
+	borderRadius: "inherit"
+};
+/** The photo stays hidden until it loads; a failed load leaves the generated avatar. */
+const Photo = defineComponent({
+	props: { src: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const state = ref("loading");
+		const img = ref();
+		onMounted(() => {
+			if (img.value?.complete) state.value = img.value.naturalWidth > 0 ? "loaded" : "error";
+		});
+		return () => state.value === "error" ? null : h("img", {
+			ref: img,
+			src: props.src,
+			alt: "",
+			style: STYLE,
+			hidden: state.value !== "loaded",
+			onLoad: () => state.value = "loaded",
+			onError: () => state.value = "error"
+		});
+	}
+});
+// src/avatar.ts
+const Avatar = defineComponent({
+	name: "OpalineAvatar",
+	inheritAttrs: false,
+	props: {
+		seed: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			default: void 0
+		},
+		look: {
+			type: Object,
+			required: true
+		},
+		size: {
+			type: Number,
+			default: 64
+		},
+		src: String,
+		alt: String
+	},
+	setup(props, { attrs }) {
+		const instance = useId();
+		const svg = computed(() => createAvatar(props.look, {
+			...attrs,
+			seed: props.seed,
+			size: props.size,
+			instance
+		}).svg);
+		return () => h("span", {
+			"data-opaline": "",
+			style: {
+				display: "inline-block",
+				width: `${props.size}px`,
+				height: `${props.size}px`,
+				position: "relative"
+			},
+			...props.alt ? {
+				role: "img",
+				"aria-label": props.alt
+			} : { "aria-hidden": "true" }
+		}, [h("span", {
+			style: { display: "contents" },
+			innerHTML: svg.value
+		}), props.src ? h(Photo, {
+			key: props.src,
+			src: props.src
+		}) : null]);
+	}
+});
+export { Avatar };

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@inlaylab/opaline-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Seeded avatars for Vue 3: an SSR-safe Avatar component.",
+  "keywords": [
+    "avatar",
+    "avatars",
+    "svg",
+    "seed",
+    "deterministic",
+    "identicon",
+    "profile-picture",
+    "placeholder",
+    "vue",
+    "vue3",
+    "nuxt",
+    "ssr"
+  ],
+  "homepage": "https://inlaylab.github.io/Opaline/",
+  "bugs": {
+    "url": "https://github.com/Inlaylab/Opaline/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Inlaylab/Opaline.git",
+    "directory": "packages/vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.5"
+  },
+  "dependencies": {
+    "@inlaylab/opaline": "1.1.0"
+  },
+  "devDependencies": {
+    "@inlaylab/opaline-contract": "0.0.0",
+    "@vitest/browser-playwright": "^5.1.0",
+    "playwright": "^1.64.1",
+    "vue": "^3.5.44"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "lint": "tsc -p tsconfig.json && prettier --check . --ignore-path ../../.prettierignore"
+  }
 }