image bindable update

ayazemre · Dec 20, 2024 · a21e0ae · a21e0ae
1 parent 93f6646
commit a21e0ae
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/fluid-ui-svelte/src/app.css b/fluid-ui-svelte/src/app.css
@@ -109,7 +109,7 @@
 
 /* Buttons ----------------------------*/
 .fluid-button {
-    @apply w-full h-full p-1
+    @apply size-full p-1
 }
 
 .fluid-button.fluid-solid-button.fluid-primary-button {
@@ -163,7 +163,7 @@
 
 /* Tables ----------------------------*/
 .fluid-table {
-    @apply w-full h-full border-1 border-primary-500 group-[.dark]:border-white text-center
+    @apply size-full border-1 border-primary-500 group-[.dark]:border-white text-center
 }
 
 .fluid-table-header {

diff --git a/fluid-ui-svelte/src/lib/primitives/Image.svelte b/fluid-ui-svelte/src/lib/primitives/Image.svelte
@@ -6,24 +6,26 @@
 		loadingSnippet,
 		placeholderSnippet,
 		overrideDefaultStyling = false,
-		rawElement,
+		rawElement = $bindable(),
+		src = $bindable(),
 		...restProps
 	}: {
 		class?: string;
 		loadingSnippet?: Snippet;
 		placeholderSnippet?: Snippet;
 		noPlaceholders?: boolean;
+		src: string;
 		overrideDefaultStyling?: boolean;
 		rawElement?: HTMLElement;
-	} & Omit<HTMLImgAttributes, "onerror" | "onload"> = $props();
+	} & Omit<HTMLImgAttributes, "onerror" | "onload" | "src"> = $props();
 
 	let status: "loading" | "done" | "failed" = $state("loading");
 	$effect(() => {
-		restProps.src ? (status = "loading") : "";
+		src ? (status = "loading") : "";
 	});
 </script>
 
-{#if status == "failed" || !restProps.src}
+{#if status == "failed" || !src}
 	{#if placeholderSnippet}
 		<div class="fluid-image-error">
 			{@render placeholderSnippet()}

diff --git a/fluid-ui-svelte/src/routes/containers/+page.svelte b/fluid-ui-svelte/src/routes/containers/+page.svelte
@@ -5,7 +5,7 @@
 <Container class="flex flex-col gap-4">
 	<Text textType={"h2"} textValue="Containers"></Text>
 	<Container class="flex gap-2">
-		<Container class="bg-success-500 rounded-md" containerType="div"><Text textType={"p"} textValue="Test Div"></Text></Container>
+		<Container class="bg-success-500 rounded-md"><Text textType={"p"} textValue="Test Div"></Text></Container>
 		<Container class="bg-success-500 rounded-md" containerType="aside"><Text textType={"p"} textValue="Test Aside"></Text></Container>
 		<Container class="bg-success-500 rounded-md" containerType="section"><Text textType={"p"} textValue="Test Section"></Text></Container>
 		<Container class="bg-success-500 rounded-md" containerType="nav"><Text textType={"p"} textValue="Test Nav"></Text></Container>