hamzus-ui 0.0.48 → 0.0.50

package/index.d.ts

@@ -12,6 +12,7 @@ export { default as Link } from "./src/components/hamzus-ui/Link/Link.svelte"
 export { default as Kbd } from "./src/components/hamzus-ui/Kbd/Kbd.svelte"
 
 // dialog
+export { toast as toast } from "./src/components/hamzus-ui/Toast/toast.js"
 export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svelte"
 
 // form

package/index.js

@@ -9,6 +9,7 @@ export { default as AlertCard } from "./src/components/hamzus-ui/AlertCard/Alert
 export { default as Link } from "./src/components/hamzus-ui/Link/Link.svelte"
 export { default as Kbd } from "./src/components/hamzus-ui/KBD/KBD.svelte"
 // dialog
+export { toast as toast } from "./src/components/hamzus-ui/Toast/toast.js"
 export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svelte"
 // form
 export { default as Form } from "./src/components/hamzus-ui/Form/Form.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.48",
+	"version": "0.0.50",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/Toast/ParentToast.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { allNotification } from "./toast";
+	import Toast from "./Toast.svelte";
+</script>
+
+<div class="toast-container">
+    {#each $allNotification as toast}
+        <Toast
+            title={toast.title}
+            description={toast.description ?? ""}
+            variant={toast.variant ?? "default"}
+            onClick={toast.onClick ?? undefined}
+            href={toast.href ?? undefined}
+            buttonLabel={toast.buttonLabel ?? ""}
+            isExiting={toast.isExiting ?? false}
+        ></Toast>
+    {/each}
+</div>
+
+<style>
+    .toast-container {
+        width: min(100%, 350px);
+        position: fixed;
+        bottom: var(--pad-s);
+        right: var(--pad-s);
+        padding: var(--pad-m);
+        row-gap: var(--pad-s);
+        display: flex;
+        flex-direction: column-reverse;
+    }
+</style>

package/src/components/hamzus-ui/Toast/Toast.svelte

@@ -0,0 +1,152 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { tick } from 'svelte';
+
+	export let variant = 'default'; // "default" | "success" | "error"
+	export let title = '';
+	export let description = '';
+	export let buttonLabel = 'buttonLabel';
+	export let onClick = undefined; // function
+	export let href = undefined; // link
+	export let isExiting = false;
+
+    let entry = "entry"
+    let toast;
+    let toastSize = 0
+
+    onMount(()=>{
+        if (!toast) return;
+
+		const resizeObserver = new ResizeObserver(entries => {
+			for (const entry of entries) {
+                console.log(entry);
+                
+				toastSize = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+			}
+		});
+
+		resizeObserver.observe(toast);
+
+
+        setTimeout(()=>{
+            entry = ""
+        }, 200)
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+        
+    })
+</script>
+
+<div class="parent-container {entry}" style="--toast-height:{toastSize}px;">
+    <div class="toast {variant} {isExiting ? "exiting" : ""} {entry}" bind:this={toast}>
+        <div class="description">
+            <h4>{title}</h4>
+            {#if description}
+                <p>{description}</p>
+            {/if}
+        </div>
+        {#if onClick !== undefined || href !== undefined}
+            <Button style="flex-shrink:0;" {href} {onClick} label={buttonLabel} variant="secondary"></Button>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .parent-container {
+        width: 100%;
+        overflow: hidden;
+        height: calc(var(--toast-height) + 4px);
+        padding: 2px;
+    }
+    .parent-container.entry {
+        animation: entry-parent .2s ease-out ;
+    }
+
+    @keyframes entry-parent {
+        from {
+            height: 0px;
+        }
+        to {
+            height: calc(var(--toast-height) + 4px);
+        }
+    }
+    .parent-container:has( .exiting) {
+        height: 0px;
+        animation: exit-parent .2s ease-out;
+
+    }
+    @keyframes exit-parent {
+        from {
+            height: calc(var(--toast-height) + 4px);
+        }
+        to {
+            height: 0px;
+        }
+    }
+
+	.toast {
+        width: 100%;
+		display: flex;
+        flex-shrink: 0;
+		align-items: center;
+		column-gap: var(--pad-m);
+		padding: var(--pad-m) var(--pad-xxl);
+		border-radius: var(--radius-m);
+		border: 1px solid var(--stroke);
+		background-color: var(--bg-1);
+		outline: 2px solid var(--bg-blur);
+        overflow: hidden;
+	}
+    .toast.entry {
+
+        animation: entry .2s ease-out ;
+    }
+    .toast h4 {
+        color: var(--font-1);
+    }
+
+    .exiting {
+        animation: exiting .2s ease-out ;
+    }
+
+    @keyframes entry {
+        from {
+            opacity: 0;
+            transform: scale(0);
+        }
+        to {
+            opacity: 100;
+        }
+    }
+    @keyframes exiting {
+        from {
+            opacity: 100;
+        }
+        to {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+
+
+    .description {
+        display: flex;
+        flex-direction: column;
+        align-items: baseline;
+        text-align: left;
+    }
+
+
+
+
+	.success h4{
+        color: var(--green);
+	}
+	.error h4{
+        color: var(--red);
+	}
+</style>

package/src/components/hamzus-ui/Toast/toast.js

@@ -0,0 +1,87 @@
+import { mount, unmount } from 'svelte';
+import ParentToast from "./ParentToast.svelte"
+import { writable } from 'svelte/store';
+
+export const allNotification = writable([])
+
+const target = "body"
+
+let numberOfNotification = 0
+let app;
+let id = 0
+
+allNotification.subscribe((value)=>{
+    numberOfNotification = value.length
+})
+
+export const toast = {
+    success : (options) => {
+        addNotification(options, "success")
+    },
+    error : (options) => {
+        addNotification(options, "error")
+    },
+    default : (options) => {
+        addNotification(options, "default")
+    },
+}
+
+
+function addNotification(options, variant) {
+    let element;
+    
+        if (!target) {
+            console.warn(`[svelte-portal] Invalid Portal target: ${target}`);
+            return;
+        }
+    
+        if (typeof target === 'string') {
+            element = document.querySelector(target);
+        } else {
+            element = target;
+        }
+    
+        if (element && numberOfNotification === 0) {
+            
+            app = mount(ParentToast, {
+                target: element,
+            });
+
+        }
+
+
+        allNotification.update(((actualValue)=>{
+            return [
+                ...actualValue, 
+                {
+                    ...options,
+                    variant:variant
+                }
+            ]
+        }))
+        
+
+        setTimeout(()=>{
+            // retirer le dernier toast
+            allNotification.update(actualValue=>{
+                // mettre le toast en mode disparition
+                actualValue[0].isExiting = true
+
+                return actualValue
+            })
+
+            setTimeout(() => {
+                allNotification.update(actualValue=>{
+                    // retirer le composant parent si il n ya plus de toast
+                    
+                    if (actualValue.length === 1 && app) {
+                        unmount(app);
+                    }
+    
+                    return actualValue.slice(1)
+                })
+            }, 200);
+
+            
+        }, 5000)
+}