fix: target prop to Avatar and Badge

Author: shinokada

.changeset/thick-clocks-listen.md

@@ -0,0 +1,5 @@
+---
+"svelte-5-ui-lib": patch
+---
+
+fix: target prop to Avatar and Badge

src/lib/avatar/Avatar.svelte

@@ -2,7 +2,7 @@
   import { Indicator } from "$lib";
   import { type AvatarProps as Props, avatar } from ".";
 
-  let { children, src, href, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: Props = $props();
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: Props = $props();
 
   dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
 
@@ -18,7 +18,7 @@
 </script>
 
 {#if !src || !!href || children || dot}
-  <svelte:element this={href ? "a" : "div"} role={href ? "link" : "img"} {onclick} {href} {...restProps} class={avatarClass}>
+  <svelte:element this={href ? "a" : "div"} role={href ? "link" : "img"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
       <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded"} />
     {:else if children}

src/lib/avatar/index.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
 import Avatar from "./Avatar.svelte";
 import { avatar } from "./theme";
 
 interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
   children?: Snippet;
-  href?: string;
+  href?: HTMLAnchorAttributes["href"];
+  target?: HTMLAnchorAttributes["target"];
   src?: string;
   cornerStyle?: "rounded" | "circular";
   stacked?: boolean;

src/lib/badge/Badge.svelte

@@ -4,7 +4,7 @@
   import { fade } from "svelte/transition";
   import type { ParamsType } from "$lib/types";
 
-  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, rounded, transition = fade, params, aClass, onclick, ...restProps }: Props = $props();
+  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, target, rounded, transition = fade, params, aClass, onclick, ...restProps }: Props = $props();
 
   const { base, hrefClass } = $derived(badge({ color, size: large ? "large" : "small", border, rounded }));
   // $inspect('badgeStatus: ', badgeStatus);
@@ -13,7 +13,7 @@
 {#if badgeStatus}
   <div {...restProps} transition:transition={params as ParamsType} class={base({ className })}>
     {#if href}
-      <a {href} class={hrefClass({ class: aClass })}>
+      <a {href} {target} class={hrefClass({ class: aClass })}>
         {@render children()}
       </a>
     {:else}

src/lib/badge/index.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import type { ParamsType, TransitionFunc } from "../types";
-import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
 import Badge from "./Badge.svelte";
 import { badge } from "./theme";
 
@@ -14,7 +14,8 @@ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   large?: boolean;
   dismissable?: boolean;
   border?: boolean;
-  href?: string;
+  href?: HTMLAnchorAttributes["href"];
+  target?: HTMLAnchorAttributes["target"];
   rounded?: boolean;
   transition?: TransitionFunc;
   params?: ParamsType;