Spaces:
Running
Running
File size: 1,854 Bytes
6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<script lang="ts">
import { Container } from "threlte-uikit";
interface Props {
minWidth?: number;
minHeight?: number;
color?: string;
opacity?: number;
borderOpacity?: number;
backgroundOpacity?: number;
disabled?: boolean;
clickable?: boolean;
children: import("svelte").Snippet;
onclick?: () => void;
}
let {
minWidth = 120,
minHeight = 100,
color = "rgb(139, 69, 219)",
opacity = 1,
borderOpacity = 0.6,
backgroundOpacity = 0.2,
disabled = false,
clickable = true,
onclick,
children
}: Props = $props();
let isHovered = $state(false);
let hoverTimeout: ReturnType<typeof setTimeout>;
function handlePointerEnter() {
if (disabled) return;
clearTimeout(hoverTimeout);
hoverTimeout = setTimeout(() => {
isHovered = true;
}, 20);
}
function handlePointerLeave() {
clearTimeout(hoverTimeout);
hoverTimeout = setTimeout(() => {
isHovered = false;
}, 20);
}
function handleClick() {
if (disabled || !clickable) return;
onclick?.();
}
let currentBorderOpacity = $derived(isHovered ? Math.min(borderOpacity * 1.5, 1) : borderOpacity);
let currentBackgroundOpacity = $derived(
isHovered ? Math.min(backgroundOpacity * 2, 0.5) : backgroundOpacity
);
</script>
<Container
{minWidth}
{minHeight}
borderRadius={12}
borderWidth={2}
borderColor={color}
borderOpacity={currentBorderOpacity}
backgroundColor={color}
backgroundOpacity={currentBackgroundOpacity}
padding={16}
pointerEvents="auto"
cursor={clickable && !disabled ? "pointer" : "default"}
{opacity}
onclick={handleClick}
onmousedown={handleClick}
onpointerenter={handlePointerEnter}
onpointerleave={handlePointerLeave}
>
<Container
flexDirection="column"
alignItems="center"
justifyContent="center"
gap={8}
width="100%"
height="100%"
>
{@render children()}
</Container>
</Container>
|