@lumen-design/avatar 0.0.2

package/dist/Avatar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface AvatarProps {
+        src?: string
+        alt?: string
+        size?: 'small' | 'medium' | 'large' | number
+        shape?: 'circle' | 'square'
+        fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+        children?: Snippet
+        onerror?: (e: Event) => void
+        class?: string
+    }
+
+    let { src, alt = '', size = 'medium', shape = 'circle', fit = 'cover', children, onerror, class: cls = '', ...attrs }: AvatarProps = $props()
+
+    let hasError = $state(false)
+
+    const sizeClass = $derived(typeof size === 'number' ? 'lm-avatar--custom' : `lm-avatar--${size}`)
+    const classes = $derived(`lm-avatar ${sizeClass} lm-avatar--${shape}${cls ? ` ${cls}` : ''}`)
+
+    const styleAttr = $derived.by(() => {
+        if (typeof size !== 'number') return undefined
+        const px = `${size}px`
+        return `width:${px};height:${px};font-size:${Math.max(12, Math.round(size / 2.8))}px;`
+    })
+
+    const handleError = (e: Event): void => {
+        hasError = true
+        onerror?.(e)
+    }
+
+    $effect(() => {
+        if (hasError && src) hasError = false
+    })
+</script>
+
+<span {...attrs} class={classes} style={styleAttr} aria-label={alt} role="img">
+    {#if src && !hasError}
+        <img class="lm-avatar__img" {src} {alt} style={`object-fit:${fit};`} onerror={handleError} />
+    {:else}
+        <span class="lm-avatar__placeholder">
+            {#if children}
+                {@render children()}
+            {:else}
+                {alt?.slice(0, 1).toUpperCase()}
+            {/if}
+        </span>
+    {/if}
+</span>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: 'small' | 'medium' | 'large' | number;
+    shape?: 'circle' | 'square';
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    children?: Snippet;
+    onerror?: (e: Event) => void;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Avatar from './Avatar.svelte';
+export { Avatar };
+export type { AvatarProps, AvatarSize, AvatarShape, AvatarFit } from './types';
+export default Avatar;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar.svelte';
+export { Avatar };
+export default Avatar;

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Avatar 尺寸 */
+export type AvatarSize = 'small' | 'medium' | 'large' | number;
+/** Avatar 形状 */
+export type AvatarShape = 'circle' | 'square';
+/** Avatar 图片适应方式 */
+export type AvatarFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+/** Avatar 属性 */
+export interface AvatarProps {
+    /** 图片地址 */
+    src?: string;
+    /** 替代文本 */
+    alt?: string;
+    /** 尺寸 */
+    size?: AvatarSize;
+    /** 形状 */
+    shape?: AvatarShape;
+    /** 图片适应方式 */
+    fit?: AvatarFit;
+    /** 子内容 */
+    children?: Snippet;
+    /** 图片加载失败回调 */
+    onerror?: (e: Event) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/avatar",
+  "version": "0.0.2",
+  "description": "Avatar component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}