fluid-ui-svelte 0.1.5 → 0.1.7

package/dist/components/Dropdown.svelte

@@ -2,38 +2,55 @@
 	import Container from "../primitives/Container.svelte";
 	import Button from "../primitives/Button.svelte";
 	import type { Snippet } from "svelte";
-	const {
+	import type { DropdownOptions } from "../types.js";
+	let {
 		class: className,
 		triggerClass,
 		contentClass,
 		overrideDefaultStyling = false,
+		isOpen = $bindable(false),
+		shouldCloseOnClickOutside = true,
 		dropdownTrigger,
-		children,
+		dropdownContent,
+		triggerRawElement,
+		contentRawElement,
 	}: {
 		class?: string;
 		triggerClass?: string;
 		contentClass?: string;
 		overrideDefaultStyling?: boolean;
-		dropdownTrigger: Snippet<[isOpen: boolean]>;
-		children: Snippet;
+		isOpen?: boolean;
+		shouldCloseOnClickOutside: boolean;
+		dropdownTrigger: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
+		dropdownContent: Snippet<[options: { isOpen: boolean; toggleDropdown: Function }]>;
+		triggerRawElement: HTMLElement;
+		contentRawElement: HTMLElement;
 	} = $props();
 
-	let isOpen = $state(false);
+	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}>
-	<Button
-		class={(overrideDefaultStyling ? "" : "fluid-dropdown-trigger") + (triggerClass ? ` ${triggerClass}` : "")}
-		overrideDefaultStyling
-		onclick={(e: Event) => {
-			isOpen = !isOpen;
-		}}
-	>
-		{@render dropdownTrigger(isOpen)}
-	</Button>
-	<Container overrideDefaultStyling class={(overrideDefaultStyling ? "" : "fluid-dropdown-content") + (contentClass ? ` ${contentClass}` : "")}>
+<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 bind:rawElement={contentRawElement} overrideDefaultStyling class={(overrideDefaultStyling ? "" : "fluid-dropdown-content") + (contentClass ? ` ${contentClass}` : "")}>
 		{#if isOpen}
-			{@render children()}
+			{@render dropdownContent(componentOptions)}
 		{/if}
 	</Container>
 </Container>

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

@@ -4,7 +4,17 @@ declare const Dropdown: import("svelte").Component<{
     triggerClass?: string;
     contentClass?: string;
     overrideDefaultStyling?: boolean;
-    dropdownTrigger: Snippet<[isOpen: boolean]>;
-    children: Snippet;
-}, {}, "">;
+    isOpen?: boolean;
+    shouldCloseOnClickOutside: boolean;
+    dropdownTrigger: Snippet<[options: {
+        isOpen: boolean;
+        toggleDropdown: Function;
+    }]>;
+    dropdownContent: Snippet<[options: {
+        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/Button.svelte

@@ -2,12 +2,14 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	const {
+	let {
 		class: className = "",
 		buttonType = "solid",
 		buttonStyle = "primary",
 		onclick,
 		overrideDefaultStyling = false,
+		isActive = $bindable(false),
+		activeChildren,
 		children,
 		...restProps
 	}: {
@@ -16,9 +18,10 @@
 		buttonStyle?: "primary" | "secondary" | "tetriary" | "neutral";
 		onclick: (e: Event) => any;
 		overrideDefaultStyling?: boolean;
+		isActive?: boolean;
+		activeChildren?: Snippet;
 		children: Snippet;
 	} & Omit<HTMLButtonAttributes, "onclick"> = $props();
-	let isActive = $state(false);
 </script>
 
 <button
@@ -38,5 +41,13 @@
 		(overrideDefaultStyling ? "" : " fluid-" + buttonStyle + "-button")}
 	{...restProps}
 >
-	{@render children()}
+	{#if activeChildren}
+		{#if isActive}
+			{@render activeChildren()}
+		{:else}
+			{@render children()}
+		{/if}
+	{:else}
+		{@render children()}
+	{/if}
 </button>

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

@@ -6,6 +6,8 @@ declare const Button: import("svelte").Component<{
     buttonStyle?: "primary" | "secondary" | "tetriary" | "neutral";
     onclick: (e: Event) => any;
     overrideDefaultStyling?: boolean;
+    isActive?: boolean;
+    activeChildren?: Snippet;
     children: Snippet;
-} & Omit<HTMLButtonAttributes, "onclick">, {}, "">;
+} & Omit<HTMLButtonAttributes, "onclick">, {}, "isActive">;
 export default Button;

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.5",
+	"version": "0.1.7",
 	"author": {
 		"name": "Emre Ayaz",
 		"email": "emreayaz@frostium.io",