100 lines
2.9 KiB
Svelte
100 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { tooltipRight } from "src/ts/gui/tooltip";
|
|
|
|
interface Props {
|
|
rounded: boolean;
|
|
src: string|Promise<string>;
|
|
name: string;
|
|
size?: string;
|
|
onClick?: any;
|
|
bordered?: boolean;
|
|
color?: string;
|
|
backgroundimg?: string;
|
|
children?: import('svelte').Snippet;
|
|
oncontextmenu?: (event: MouseEvent & {
|
|
currentTarget: EventTarget & HTMLDivElement;
|
|
}) => any
|
|
}
|
|
|
|
let {
|
|
rounded,
|
|
src,
|
|
name,
|
|
size = "22",
|
|
onClick = () => {},
|
|
bordered = false,
|
|
color = '',
|
|
backgroundimg = '',
|
|
children,
|
|
oncontextmenu
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<span class="flex shrink-0 items-center justify-center avatar"
|
|
class:border = {bordered}
|
|
class:border-selected={bordered}
|
|
class:rounded-md={bordered}
|
|
oncontextmenu={oncontextmenu}
|
|
onclick={onClick} use:tooltipRight={name}
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
{#if src}
|
|
{#if src === "slot"}
|
|
<div
|
|
class="bg-skin-border sidebar-avatar rounded-md bg-top flex items-center justify-center bg-opacity-50"
|
|
class:bg-darkbg={color === 'default' || color === ''}
|
|
class:bg-red-700={color === 'red'}
|
|
class:bg-yellow-700={color === 'yellow'}
|
|
class:bg-green-700={color === 'green'}
|
|
class:bg-blue-700={color === 'blue'}
|
|
class:bg-indigo-700={color === 'indigo'}
|
|
class:bg-purple-700={color === 'purple'}
|
|
class:bg-pink-700={color === 'pink'}
|
|
|
|
|
|
style:width={size + "px"}
|
|
style:height={size + "px"}
|
|
style:minWidth={size + "px"}
|
|
style:background-image={backgroundimg ? `url('${backgroundimg}')` : undefined}
|
|
style:background-size={backgroundimg ? "cover" : undefined}
|
|
style:background-position={backgroundimg ? "center" : undefined}
|
|
class:rounded-md={!rounded} class:rounded-full={rounded}
|
|
>
|
|
{#if !backgroundimg}
|
|
{@render children?.()}
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
{#await src}
|
|
<div
|
|
class="bg-skin-border sidebar-avatar rounded-md bg-top"
|
|
style:width={size + "px"}
|
|
style:height={size + "px"}
|
|
style:minWidth={size + "px"}
|
|
class:rounded-md={!rounded} class:rounded-full={rounded}
|
|
></div>
|
|
{:then img}
|
|
<img
|
|
src={img}
|
|
class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
|
|
style:width={size + "px"}
|
|
style:height={size + "px"}
|
|
style:minWidth={size + "px"}
|
|
class:rounded-md={!rounded} class:rounded-full={rounded}
|
|
alt="avatar"
|
|
/>
|
|
{/await}
|
|
{/if}
|
|
{:else}
|
|
<div
|
|
class="bg-skin-border sidebar-avatar rounded-md bg-top"
|
|
style:width={size + "px"}
|
|
style:height={size + "px"}
|
|
style:minWidth={size + "px"}
|
|
class:rounded-md={!rounded} class:rounded-full={rounded}
|
|
></div>
|
|
{/if}
|
|
</span>
|