hamzus-ui 0.0.1

package/src/components/hamzus-ui/DropdownMenu/Root.svelte

@@ -0,0 +1,340 @@
+<script>
+	import Portal from '@hamzus-ui/Portal/Portal.svelte';
+import { onDestroy, onMount } from 'svelte';
+
+	// import
+
+	// props
+	export let triggerFullWidth = false;
+	export let direction = 'bottom';
+	export let onOpen = undefined;
+	// locale var
+	let display = false;
+	let exit = false;
+
+	let originalParent;
+	let trigger;
+	let content;
+	let contentContainer;
+
+	let top = 0;
+	let left = 0;
+
+	const padding = 7;
+
+	const entryPosition = {
+		bottom: ['-12px', '0px'],
+		top: ['12px', '0px'],
+		left: ['0px', '12px'],
+		right: ['0px', '-12px']
+	};
+	// function
+	function handleDisplay(e) {
+		if (!calc[direction]) {
+			console.error('Error : direction props not found !');
+		}
+
+		if (!display) {
+			[top, left] = calc[direction]();
+		}
+
+		toggleDisplay();
+
+        if (onOpen !== undefined && typeof onOpen === 'function') {
+            onOpen(e)
+        }
+	}
+
+	function toggleDisplay() {
+		if (display) {
+			// appliquer une animation
+			exit = true;
+			setTimeout(() => {
+				exit = false;
+			}, 200);
+
+			disableExitEvent();
+			enableScroll();
+		} else {
+			enableExitEvent();
+			disableScroll();
+		}
+
+		display = !display;
+	}
+
+	const calc = {
+		bottom: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerLeft = triggerRect.left;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop + triggerHeight + padding;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < contentHeight) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < (contentWidth - triggerWidth) / 2) {
+				leftCalc = window.innerWidth - contentWidth - padding;
+			}
+			// verifier si il y a assez de place a gauche
+
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		top: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop - contentHeight - padding;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < contentHeight) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom + triggerHeight < contentHeight) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < (contentWidth - triggerWidth) / 2) {
+				leftCalc = window.innerWidth - contentWidth - padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		left: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop;
+			let leftCalc = triggerLeft - contentWidth - padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < 0) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight)) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < contentWidth + padding) {
+				leftCalc = padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		right: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop;
+			let leftCalc = triggerLeft + triggerWidth + padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < 0) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight)) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < contentWidth + padding) {
+				leftCalc = window.innerWidth - contentWidth - padding - triggerWidth;
+			}
+
+			return [topCalc, leftCalc];
+		}
+	};
+
+	// Bloquer le scroll
+	function disableScroll() {
+		document.addEventListener('userScroll', updatePos);
+		window.addEventListener('scroll', updatePos);
+	}
+
+	// Réactiver le scroll
+	function enableScroll() {
+		document.removeEventListener('userScroll', updatePos);
+		window.removeEventListener('scroll', updatePos);
+	}
+	function updatePos(e) {
+		// recalculer la position
+        if (!display) {
+            return
+        }
+		[top, left] = calc[direction]();
+	}
+
+	function enableExitEvent() {
+		document.addEventListener('click', checkClick);
+	}
+	function disableExitEvent() {
+		document.removeEventListener('click', checkClick);
+	}
+
+	function checkClick(event) {
+        
+		if (event.target.closest('.parent-popover-hamzus') && event.target.closest('.parent-popover-hamzus') === originalParent) {
+			return 
+		}
+        if (event.target.closest('.content-popover-hamzus') && event.target.closest('.content-popover-hamzus') === content) {
+            return
+        }
+
+        handleDisplay();
+	}
+
+	onMount(() => {
+		return () => {
+			document.removeEventListener('userScroll', updatePos);
+			window.removeEventListener('scroll', updatePos);
+			document.removeEventListener('click', checkClick);
+		};
+	});
+</script>
+
+<dropdown bind:this={originalParent} style="{triggerFullWidth ? "width:100%;" : ""}" class="parent-popover-hamzus">
+	<div bind:this={trigger} class="trigger" style="{triggerFullWidth ? "width:100%;" : ""}" on:click={handleDisplay}>
+		<slot name="trigger" />
+	</div>
+	<Portal disabled={!display} target="body">
+        <content-container bind:this={contentContainer}>
+            <content
+                bind:this={content}
+                class="content content-popover-hamzus"
+                class:display
+                class:exit
+                style="--left:{left}px;--top:{top}px;--transform-x:{entryPosition[
+                    direction
+                ][1]};--transform-y:{entryPosition[direction][0]};"
+            >
+                <slot name="content" />
+            </content>
+        </content-container>
+    </Portal>
+</dropdown>
+
+<style>
+	.trigger {
+		all: unset;
+        width: max-content;
+        display: inline-block;
+	}
+
+	.content {
+		position: fixed;
+		top: var(--top);
+		left: var(--left);
+		display: block;
+		user-select: none;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 2;
+	}
+
+	.content.exit {
+		display: block;
+		animation-name: exit;
+		animation-duration: 0.2s;
+		animation-timing-function: ease-out;
+	}
+	.content.display {
+		display: block;
+		animation-name: entry;
+		animation-duration: 0.2s;
+		animation-timing-function: ease-out;
+		user-select: initial;
+		pointer-events: initial;
+		opacity: 1;
+	}
+
+	@keyframes entry {
+		from {
+			display: block;
+			opacity: 0;
+			user-select: none;
+			pointer-events: none;
+			transform: translate(var(--transform-x), var(--transform-y)) scale(0.86);
+		}
+		to {
+			display: block;
+			opacity: 1;
+			user-select: initial;
+			pointer-events: initial;
+			transform: translate(0px, 0px) scale(1);
+		}
+	}
+	@keyframes exit {
+		from {
+			display: block;
+			opacity: 1;
+			user-select: initial;
+			pointer-events: initial;
+			transform: translate(0px, 0px) scale(1);
+		}
+		to {
+			display: block;
+			opacity: 0;
+			user-select: none;
+			pointer-events: none;
+			transform: translate(var(--transform-x), var(--transform-y)) scale(0.86);
+		}
+	}
+</style>

package/src/components/hamzus-ui/DropdownMenu/Separator.svelte

@@ -0,0 +1,12 @@
+
+<span class="separator"></span>
+
+<style>
+    .separator{
+        width: 100%;
+        height: 1px;
+        background-color: var(--stroke);
+        width: calc(100% + var(--pad-m) * 2);
+        transform: translateX(calc(-1 * var(--pad-m))) ;
+    }
+</style>

package/src/components/hamzus-ui/DropdownMenu/Trigger.svelte

@@ -0,0 +1 @@
+<slot/>

package/src/components/hamzus-ui/DropdownMenu/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './Root.svelte';
+export { default as Trigger } from './Trigger.svelte';
+export { default as Content } from './Content.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Button } from './Button.svelte';

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

@@ -0,0 +1,80 @@
+<script>
+	// import
+	import ButtonDefault from "./IconButton_default.svelte";
+    import ButtonLink from "./IconButton_link.svelte";
+
+
+	// props
+	export let variant = 'primary';
+	export let loading = false;
+	export let desabled = false;
+	export let href = "";
+	export let onClick = undefined;
+	export let avoidRipple = false;
+	// local var
+	const colorConfig = {
+		primary: {
+			defaultBg: '--accent',
+            defaultBorder:'',
+			defaultColor: '--white',
+			hoverBg: '--accent-b',
+            hoverBorder:'',
+			hoverColor: '--white-d'
+		},
+		secondary: {
+			defaultBg: '--bg-2',
+            defaultBorder:'',
+			defaultColor: '--font-u',
+			hoverBg: '--bg-3',
+            hoverBorder:'',
+			hoverColor: '--font-d'
+		},
+		ghost: {
+			defaultBg: '',
+            defaultBorder:'',
+			defaultColor: '--font-d',
+			hoverBg: '--bg-3',
+            hoverBorder:'',
+			hoverColor: '--font-u'
+		},
+		outline: {
+			defaultBg: '',
+            defaultBorder:'--stroke',
+			defaultColor: '--font-d',
+			hoverBg: '--bg-2',
+            hoverBorder:'--stroke',
+			hoverColor: '--font-u'
+		},
+		destructive: {
+			defaultBg: '--red-b',
+            defaultBorder:'--red',
+			defaultColor: '--red',
+			hoverBg: '--red',
+            hoverBorder:'--red-b',
+			hoverColor: '--white'
+		},
+	};
+	// functions
+
+</script>
+
+<div
+	style="
+        --button-default-bg:var({colorConfig[variant].defaultBg});
+        --button-default-border:var({colorConfig[variant].defaultBorder});
+        --button-default-color:var({colorConfig[variant].defaultColor});
+        --button-hover-bg:var({colorConfig[variant].hoverBg});
+        --button-hover-border:var({colorConfig[variant].hoverBorder});
+        --button-hover-color:var({colorConfig[variant].hoverColor});
+        "
+>
+{#if href}
+    <ButtonLink {href} {onClick} {...$$restProps} {loading} {desabled} {avoidRipple}>
+        <slot/>
+    </ButtonLink>
+{:else}
+    <ButtonDefault {onClick} {...$$restProps} {loading} {desabled} {avoidRipple}>
+        <slot/>
+    </ButtonDefault>
+{/if}
+</div>

package/src/components/hamzus-ui/IconButton/IconButton_default.svelte

@@ -0,0 +1,140 @@
+<script>
+    // import
+	import Loader from '@hamzus-ui/LoaderCircle/Loader.svelte';
+    // props
+    export let loading = false
+    export let desabled = false
+    export let onClick = undefined
+	export let avoidRipple = false;
+    // local var
+    let button
+    // functions
+    function handleClick(event) {
+        if (!desabled && !loading) {
+            createRipple(event)
+            if (onClick && typeof onClick === "function") {       
+                onClick()
+            }
+        }
+    }
+    function createRipple(event) {
+		if (avoidRipple) {
+			return;
+		}
+
+		const ripple = document.createElement('span');
+
+		const rect = button.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+
+		ripple.style.left = `${x}px`;
+		ripple.style.top = `${y}px`;
+		ripple.classList.add('ripple');
+
+		button.appendChild(ripple);
+
+		setTimeout(() => {
+			ripple.remove();
+		}, 1000);
+	}
+</script>
+
+<button bind:this={button} on:click={handleClick} class="button h4" class:desabled class:loading {...$$restProps}>
+    <slot/>
+    {#if loading}
+        <div class="loader">
+            <Loader size="16px" color="var(--button-default-color)"></Loader>
+        </div>
+    {/if}
+</button>
+<style>
+    .button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding:var(--pad-s);
+        border-radius: var(--radius-m);
+        background-color: var(--button-default-bg);
+        color: var(--button-default-color);
+        transition-property: background-color, transform, color;
+        transition-duration: .2s;
+        transition-timing-function: ease-out;
+        cursor: pointer;
+        border: 1px solid var(--button-default-border);
+        width: max-content;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 30px;
+        height: 30px;
+        flex-shrink: 0;
+        position: relative;
+    }
+    .button :global(*) {
+        color: var(--button-default-color);
+    }
+        .button :global(svg){
+            height: 100%;
+            width: 100%;
+            flex-shrink: 0;
+        } 
+        .button :global(svg > path)  {
+            fill: var(--button-default-color);
+        }
+    /* states */
+    .button:not(.desabled):not(.loading):hover{
+        background-color: var(--button-hover-bg);
+        border: 1px solid var(--button-hover-border);
+        color: var(--button-hover-color);
+    }
+    .button:not(.desabled):not(.loading):hover :global(*) {
+        color: var(--button-hover-color);
+    }
+        .button:not(.desabled):not(.loading):hover :global(svg > path)  {
+            fill: var(--button-hover-color);
+        }
+    .button:active{
+        transform: scale(.95);
+    }
+    .button.loading {
+        cursor: not-allowed;
+    }
+    .button.desabled {
+        opacity: .8;
+        cursor: not-allowed;
+        transform: scale(.9);
+
+    }
+    .button.loading :global(> *:not(.loader)){
+        opacity: 0;
+        user-select: none;
+        pointer-events: none;
+    }
+    .loader{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    	/* ripple */
+	.button :global(.ripple) {
+		width: 0px;
+		aspect-ratio: 1/1;
+		background: var(--ripple-gradient);
+		position: absolute;
+		transform: translate(-50%, -50%);
+		border-radius: 100%;
+		animation: grow 1s ease-out;
+	}
+	@keyframes grow {
+		from {
+			width: 0px;
+			opacity: 1;
+		}
+		to {
+			width: 500%;
+			opacity: 0;
+		}
+	}
+</style>