Element Bug Fixes

src/lib/components/tui/TuiCard.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import Icon from "@iconify/svelte";
-	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import {
+		getButtonStyle,
+		parseColorText,
+		getSegmentStyle,
+		parseDimension,
+	} from "./utils";
 	import type { CardLine } from "./types";
 	import TuiLine from "./TuiLine.svelte";
 	import "$lib/assets/css/tui-card.css";
@@ -8,9 +13,18 @@
 	interface Props {
 		line: CardLine;
 		inline?: boolean;
+		onButtonClick?: (idx: number, line?: any) => void;
+		onHoverButton?: (idx: number) => void;
+		onLinkClick?: (idx: number) => void;
 	}
 
-	let { line, inline = false }: Props = $props();
+	let {
+		line,
+		inline = false,
+		onButtonClick = () => {},
+		onHoverButton = () => {},
+		onLinkClick = () => {},
+	}: Props = $props();
 
 	const segments = $derived(parseColorText(line.content));
 	const titleSegments = $derived(
@@ -19,13 +33,22 @@
 	const footerSegments = $derived(
 		line.cardFooter ? parseColorText(line.cardFooter) : [],
 	);
+
+	const cardStyle = $derived(
+		[
+			`--card-color: ${getButtonStyle(line.style)}`,
+			line.cardWidth ? `width: ${parseDimension(line.cardWidth)}` : "",
+			line.cardHeight ? `height: ${parseDimension(line.cardHeight)}` : "",
+			line.cardFloat === "start" ? "margin-right: auto" : "",
+			line.cardFloat === "center" ? "margin-inline: auto" : "",
+			line.cardFloat === "end" ? "margin-left: auto" : "",
+		]
+			.filter(Boolean)
+			.join("; "),
+	);
 </script>
 
-<div
-	class="tui-card"
-	class:inline
-	style="--card-color: {getButtonStyle(line.style)}"
->
+<div class="tui-card" class:inline style={cardStyle}>
 	{#if line.cardTitle}
 		<div class="card-header">
 			{#if line.icon}
@@ -77,6 +100,9 @@
 						showImage={true}
 						selectedIndex={-1}
 						inline={false}
+						{onButtonClick}
+						{onHoverButton}
+						{onLinkClick}
 					/>
 				{/each}
 			</div>
@@ -153,7 +179,6 @@
 	}
 
 	.card-children {
-		margin-top: 0.5rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.25rem;