viggy
42b2d60e57
* use child snippets for landing and chat message elements * make ... icon visible in conversation history menu * conversation history forward tab fix * add snippet fix for fork icon in conversation history * focus/keyboard fix for attachment x icon and scroll left/right * formatting * fix scroll down issue * simply Statistics and pointer events in scrolldown * create storybook tests and move to folder * improve tests to actually assert on element
65 lines
1.4 KiB
Svelte
65 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { Button, type ButtonVariant, type ButtonSize } from '$lib/components/ui/button';
|
|
import * as Tooltip from '$lib/components/ui/tooltip';
|
|
import type { Component } from 'svelte';
|
|
import { TooltipSide } from '$lib/enums';
|
|
|
|
interface Props {
|
|
ariaLabel?: string;
|
|
class?: string;
|
|
disabled?: boolean;
|
|
icon: Component;
|
|
iconSize?: string;
|
|
onclick: (e?: MouseEvent) => void;
|
|
size?: ButtonSize;
|
|
stopPropagationOnClick?: boolean;
|
|
tooltip: string;
|
|
variant?: ButtonVariant;
|
|
tooltipSide?: TooltipSide;
|
|
}
|
|
|
|
let {
|
|
icon,
|
|
tooltip,
|
|
variant = 'ghost',
|
|
size = 'sm',
|
|
class: className = '',
|
|
disabled = false,
|
|
iconSize = 'h-3 w-3',
|
|
tooltipSide = TooltipSide.TOP,
|
|
stopPropagationOnClick = false,
|
|
onclick,
|
|
ariaLabel
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
<!-- prevent another nested button element -->
|
|
{#snippet child({ props })}
|
|
<Button
|
|
{...props}
|
|
{variant}
|
|
{size}
|
|
{disabled}
|
|
onclick={(e: MouseEvent) => {
|
|
if (stopPropagationOnClick) e.stopPropagation();
|
|
|
|
onclick?.(e);
|
|
}}
|
|
class="h-6 w-6 p-0 {className} flex hover:bg-transparent data-[state=open]:bg-transparent!"
|
|
aria-label={ariaLabel || tooltip}
|
|
>
|
|
{#if icon}
|
|
{@const IconComponent = icon}
|
|
<IconComponent class={iconSize} />
|
|
{/if}
|
|
</Button>
|
|
{/snippet}
|
|
</Tooltip.Trigger>
|
|
|
|
<Tooltip.Content side={tooltipSide}>
|
|
<p>{tooltip}</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|