fluid-ui-svelte 0.1.6 → 0.1.7

package/dist/components/Dropdown.svelte

@@ -2,37 +2,53 @@
 	import Container from "../primitives/Container.svelte";
 	import Button from "../primitives/Button.svelte";
 	import type { Snippet } from "svelte";
+	import type { DropdownOptions } from "../types.js";
 	let {
 		class: className,
 		triggerClass,
 		contentClass,
 		overrideDefaultStyling = false,
 		isOpen = $bindable(false),
+		shouldCloseOnClickOutside = true,
 		dropdownTrigger,
 		dropdownContent,
+		triggerRawElement,
+		contentRawElement,
 	}: {
 		class?: string;
 		triggerClass?: string;
 		contentClass?: string;
 		overrideDefaultStyling?: boolean;
 		isOpen?: boolean;
+		shouldCloseOnClickOutside: boolean;
 		dropdownTrigger: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
 		dropdownContent: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
+		triggerRawElement: HTMLElement;
+		contentRawElement: HTMLElement;
 	} = $props();
 
-	const componentOptions = {
+	const componentOptions: DropdownOptions = {
 		isOpen,
 		toggleDropdown: () => {
 			isOpen = !isOpen;
 		},
 	};
+	if (shouldCloseOnClickOutside) {
+		document.addEventListener("click", (e) => {
+			if (isOpen && e.target) {
+				if (!triggerRawElement.contains(e.target as HTMLElement) && !contentRawElement.contains(e.target as HTMLElement)) {
+					isOpen = false;
+				}
+			}
+		});
+	}
 </script>
 
-<Container class={(overrideDefaultStyling ? "" : "fluid-dropdown") + (className ? ` ${className}` : "")} overrideDefaultStyling={true}>
+<Container bind:rawElement={triggerRawElement} class={(overrideDefaultStyling ? "" : "fluid-dropdown") + (className ? ` ${className}` : "")} overrideDefaultStyling={true}>
 	<Container class={(overrideDefaultStyling ? "" : "fluid-dropdown-trigger") + (triggerClass ? ` ${triggerClass}` : "")} overrideDefaultStyling>
 		{@render dropdownTrigger(componentOptions)}
 	</Container>
-	<Container overrideDefaultStyling class={(overrideDefaultStyling ? "" : "fluid-dropdown-content") + (contentClass ? ` ${contentClass}` : "")}>
+	<Container bind:rawElement={contentRawElement} overrideDefaultStyling class={(overrideDefaultStyling ? "" : "fluid-dropdown-content") + (contentClass ? ` ${contentClass}` : "")}>
 		{#if isOpen}
 			{@render dropdownContent(componentOptions)}
 		{/if}

package/dist/components/Dropdown.svelte.d.ts

@@ -5,6 +5,7 @@ declare const Dropdown: import("svelte").Component<{
     contentClass?: string;
     overrideDefaultStyling?: boolean;
     isOpen?: boolean;
+    shouldCloseOnClickOutside: boolean;
     dropdownTrigger: Snippet<[options: {
         isOpen: boolean;
         toggleDropdown: Function;
@@ -13,5 +14,7 @@ declare const Dropdown: import("svelte").Component<{
         isOpen: boolean;
         toggleDropdown: Function;
     }]>;
+    triggerRawElement: HTMLElement;
+    contentRawElement: HTMLElement;
 }, {}, "isOpen">;
 export default Dropdown;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { DropdownOptions as DropdownOptions } from "./types.ts";
 export { default as Link } from "./primitives/Link.svelte";
 export { default as Button } from "./primitives/Button.svelte";
 export { default as Container } from "./primitives/Container.svelte";

package/dist/index.js

@@ -1,3 +1,4 @@
+//Types
 // Primitives 
 export { default as Link } from "./primitives/Link.svelte";
 export { default as Button } from "./primitives/Button.svelte";

package/dist/primitives/Container.svelte

@@ -2,46 +2,48 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	const {
+	let {
 		containerType = "div",
 		class: className = "",
 		overrideDefaultStyling = false,
 		children,
+		rawElement = $bindable(),
 		...restProps
 	}: {
 		containerType?: "div" | "section" | "aside" | "nav" | "footer";
 		class?: string;
 		overrideDefaultStyling?: boolean;
 		children?: Snippet;
+		rawElement?: HTMLElement;
 	} & HTMLAttributes<HTMLElement> = $props();
 </script>
 
 {#if containerType == "div"}
-	<div {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	<div bind:this={rawElement} {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
 		{#if children}
 			{@render children()}
 		{/if}
 	</div>
 {:else if containerType == "section"}
-	<section {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	<section bind:this={rawElement} {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
 		{#if children}
 			{@render children()}
 		{/if}
 	</section>
 {:else if containerType == "aside"}
-	<aside {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	<aside bind:this={rawElement} {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
 		{#if children}
 			{@render children()}
 		{/if}
 	</aside>
 {:else if containerType == "nav"}
-	<nav {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	<nav bind:this={rawElement} {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
 		{#if children}
 			{@render children()}
 		{/if}
 	</nav>
 {:else if containerType == "footer"}
-	<footer {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	<footer bind:this={rawElement} {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/primitives/Container.svelte.d.ts

@@ -5,5 +5,6 @@ declare const Container: import("svelte").Component<{
     class?: string;
     overrideDefaultStyling?: boolean;
     children?: Snippet;
-} & HTMLAttributes<HTMLElement>, {}, "">;
+    rawElement?: HTMLElement;
+} & HTMLAttributes<HTMLElement>, {}, "rawElement">;
 export default Container;

package/dist/primitives/Image.svelte

@@ -1,47 +1,43 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLImgAttributes } from "svelte/elements";
-	const {
+	let {
 		class: className,
 		loadingSnippet,
-		errorSnippet,
-		noPlaceholders = false,
+		placeholderSnippet,
 		overrideDefaultStyling = false,
+		rawElement,
 		...restProps
 	}: {
 		class?: string;
 		loadingSnippet?: Snippet;
-		errorSnippet?: Snippet;
+		placeholderSnippet?: Snippet;
 		noPlaceholders?: boolean;
 		overrideDefaultStyling?: boolean;
+		rawElement?: HTMLElement;
 	} & Omit<HTMLImgAttributes, "onerror" | "onload"> = $props();
 
-	let status = $state("loading");
+	let status: "loading" | "done" | "failed" = $state("loading");
 </script>
 
-{#if noPlaceholders}
-	<img
-		{...restProps}
-		onerror={() => {
-			status = "failed";
-			console.log(status);
-		}}
-		onload={() => {
-			status = "done";
-			console.log(status);
-		}}
-		class={(overrideDefaultStyling ? "" : "fluid-image") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "") + (status == "loading" ? " invisible" : "")}
-	/>
-{:else if status == "loading" || status == "done"}
-	<div class={"fluid-image-loading" + (status === "done" ? " hidden" : "")}>
+{#if status == "failed"}
+	{#if placeholderSnippet}
+		<div class="fluid-image-error">
+			{@render placeholderSnippet()}
+		</div>
+	{:else}
+		<p>Image not loaded, provide placeholder.</p>
+	{/if}
+{:else if status == "loading" || "done"}
+	<div class={"fluid-image-loading" + status !== "loading" ? " hidden" : ""}>
 		{#if loadingSnippet}
 			{@render loadingSnippet()}
 		{:else}
-			<p>No loading snippet provided.</p>
+			<p>Image loading, provide placeholder.</p>
 		{/if}
 	</div>
-
 	<img
+		bind:this={rawElement}
 		{...restProps}
 		onerror={() => {
 			status = "failed";
@@ -53,12 +49,4 @@
 		}}
 		class={(overrideDefaultStyling ? "" : "fluid-image") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "") + (status == "loading" ? " invisible" : "")}
 	/>
-{:else if status == "failed"}
-	<div class="fluid-image-error">
-		{#if errorSnippet}
-			{@render errorSnippet()}
-		{:else}
-			<p>No error snippet provided.</p>
-		{/if}
-	</div>
 {/if}

package/dist/primitives/Image.svelte.d.ts

@@ -3,8 +3,9 @@ import type { HTMLImgAttributes } from "svelte/elements";
 declare const Image: import("svelte").Component<{
     class?: string;
     loadingSnippet?: Snippet;
-    errorSnippet?: Snippet;
+    placeholderSnippet?: Snippet;
     noPlaceholders?: boolean;
     overrideDefaultStyling?: boolean;
+    rawElement?: HTMLElement;
 } & Omit<HTMLImgAttributes, "onload" | "onerror">, {}, "">;
 export default Image;

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export type DropdownOptions = {
+    isOpen: boolean;
+    toggleDropdown: Function;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"author": {
 		"name": "Emre Ayaz",
 		"email": "emreayaz@frostium.io",