mountain-ui 1.0.80 → 1.0.82

package/src/lib/registry/navigationRegistry/components/NavbarGroup.svelte

@@ -0,0 +1,190 @@
+<script>
+	import { Portal } from 'hamzus-ui';
+	import { navigationRegistry } from '../registry.svelte';
+
+	let { text, href } = $props();
+
+	const navigation = navigationRegistry.selectNavbarState();
+
+	let btn = $state(null);
+	let isOpen = $state(false);
+	let isHovered = $state(false);
+
+	let x = $state(0);
+	let y = $state(0);
+
+	function handleOpen() {
+		isOpen = !isOpen;
+	}
+
+	function updatePosition() {
+		if (!btn) return;
+
+		const rect = btn.getBoundingClientRect();
+
+		x = rect.x;
+		y = rect.y;
+	}
+
+	$effect(() => {
+		if (!btn) return;
+
+		let frame;
+
+		const update = () => {
+			cancelAnimationFrame(frame);
+
+			frame = requestAnimationFrame(updatePosition);
+		};
+
+		const resizeObserver = new ResizeObserver(update);
+
+		resizeObserver.observe(btn);
+		resizeObserver.observe(btn.parentNode);
+
+		const mutationObserver = new MutationObserver(update);
+
+		mutationObserver.observe(btn.parentNode, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true
+		});
+
+		window.addEventListener('resize', update);
+		window.addEventListener('scroll', update, true);
+
+		update();
+
+		return () => {
+			cancelAnimationFrame(frame);
+
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+
+			window.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update, true);
+		};
+	});
+</script>
+
+<div class="group" class:open={isOpen}>
+	<button
+		bind:this={btn}
+		onclick={handleOpen}
+		onmouseenter={() => (isHovered = true)}
+		onmouseleave={() => (isHovered = false)}
+		class="btn"
+	>
+		<slot name="endContent" />
+
+		{#if $navigation.isOpen}
+			<h5>{text}</h5>
+		{/if}
+	</button>
+
+	{#if !$navigation.isOpen}
+		<Portal target="body" disabled={!isHovered}>
+			{#if isHovered}
+				<div class="full" style="--x: {x}px; --y: {y}px;">
+					<slot name="endContent" />
+					<h5>
+						{text}
+					</h5>
+				</div>
+			{/if}
+		</Portal>
+	{/if}
+
+	{#if isOpen}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	.group.open {
+		background-color: var(--bg-2);
+		border-radius: var(--radius-m);
+		overflow: clip;
+	}
+
+	.btn {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		padding: var(--pad-s) var(--pad-m);
+		border-radius: var(--radius-m);
+		z-index: 1000;
+		position: relative;
+		cursor: pointer;
+		width: 100%;
+	}
+
+	.btn:hover {
+		background-color: var(--bg-blur);
+	}
+
+	.btn h5 {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.btn h5:not(.full) {
+		min-height: max-content;
+	}
+
+	.full {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-s);
+		margin: 0;
+		padding: var(--pad-s) var(--pad-m);
+		border-radius: var(--radius-m);
+
+		position: fixed;
+		top: var(--y);
+		left: var(--x);
+
+		width: max-content;
+		max-width: none;
+
+		background-color: var(--bg-1);
+		outline: 1px solid var(--bg-blur);
+
+		z-index: 999999;
+
+		pointer-events: none;
+		user-select: none;
+		animation: apear 0.2s ease-out;
+	}
+
+    .full :global(svg) {
+		width: 20px;
+		height: auto;
+		flex-shrink: 0;
+    }
+
+	.btn > :global(svg) {
+		width: 20px;
+		height: auto;
+		flex-shrink: 0;
+	}
+
+
+	@keyframes apear {
+		from {
+			filter: blur(5px);
+			-webkit-filter: blur(5px);
+			opacity: 0;
+			transform: translateX(-5px);
+		}
+
+		to {
+			filter: blur(0px);
+			-webkit-filter: blur(0px);
+			opacity: 1;
+			transform: translateX(0px);
+		}
+	}
+</style>

package/src/lib/registry/navigationRegistry/components/NavbarIcon.svelte

@@ -0,0 +1,26 @@
+<script>
+	import Icon from "../../../components/Icons/Icon.svelte";
+
+    let {icon, color} = $props()
+</script>
+
+<div class="color" style="--icon-color:{color};">
+    <Icon value={icon}></Icon>
+</div>
+
+<style>
+    .color {
+		width: 20px;
+		height: 20px;
+    }
+    .color :global(svg path) {
+        fill: var(--icon-color);
+    }
+
+    .color :global(svg) {
+
+		width: 20px;
+		height: auto;
+		flex-shrink: 0;
+    }
+</style>

package/src/lib/registry/navigationRegistry/components/NavigationGroupRow.svelte

@@ -0,0 +1,250 @@
+<script>
+	import { AlertCard, Button, Dialog, IconButton, Input } from 'hamzus-ui';
+	import { navigationRegistry } from '../registry.svelte';
+	import { onMount } from 'svelte';
+	import NavbarIcon from './NavbarIcon.svelte';
+
+	let { id, onOpen = (val)=>{}, isOpen = false, activeDrag = null, onRename, onDelete = null, onDrop } = $props();
+
+	const navigationGroup = $derived(navigationRegistry.select(id));
+	const navigationChildren = $derived(navigationRegistry.getAllFromGroup(id));
+
+	let renameIsOpen = $state(false);
+	let newName = $state('');
+	let isRenaming = $state(false);
+
+	let deleteIsOpen = $state(false);
+	let isDeleting = $state(false);
+
+	let isHovered = $state(false);
+
+	async function handleRename() {
+		if (!onRename) return;
+
+		isRenaming = true;
+		await onRename(id, newName);
+		isRenaming = false;
+
+		newName = '';
+		renameIsOpen = false;
+	}
+	async function handleDelete() {
+		if (!onDelete) return;
+
+		isDeleting = true;
+		await onDelete(id);
+		isDeleting = false;
+
+		deleteIsOpen = false;
+	}
+
+	function handleDragEnter(event) {
+		event.preventDefault();
+        if (navigationChildren.find(c=>c.entity_id === activeDrag)) {
+            return
+        }
+        
+
+		isHovered = true;
+
+		
+	}
+
+    function handleDragEnd(e) {
+        isHovered = false
+	}
+
+	function handleDragLeave(event) {
+		isHovered = false;
+	}
+
+	function handleDrop(event) {
+		isHovered = false;
+        if (navigationChildren.find(c=>c.entity_id === activeDrag)) {
+            return
+        }
+        onDrop(id)
+	}
+</script>
+
+<Dialog bind:isOpen={deleteIsOpen}>
+	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+		<h3>Suprimmer ce groupe ?</h3>
+		<p>Etes vous sure de vouloir suprimmer ce groupe de navigation ?</p>
+		<AlertCard>Cette action est irreversible !</AlertCard>
+		<Button onClick={handleDelete} loading={isDeleting} variant="destructive">
+			<h5>confirmer</h5>
+		</Button>
+	</div>
+</Dialog>
+<Dialog bind:isOpen={deleteIsOpen}>
+	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+		<h3>Renommer ce groupe ?</h3>
+		<Input bind:value={newName} label="nouveau nom" placeholder="mon groupe"></Input>
+		<Button onClick={handleRename} loading={isRenaming}>
+			<h5>confirmer</h5>
+		</Button>
+	</div>
+</Dialog>
+{#if $navigationGroup}
+	<div
+		class="group"
+		class:is-hovered={isHovered}
+		ondragenter={handleDragEnter}
+		ondragleave={handleDragLeave}
+		ondragend={handleDragEnd}
+        ondragover={(event) => event.preventDefault()}
+    ondrop={handleDrop}
+		data-id={id}
+	>
+		<div class="left">
+			<NavbarIcon icon={$navigationGroup.icon} color={$navigationGroup.color}></NavbarIcon>
+			<h4>{$navigationGroup.name}</h4>
+		</div>
+		<div class="right">
+			{#if onRename}
+				<IconButton
+					onClick={() => {
+						renameIsOpen = true;
+					}}
+					size="26px"
+					variant="ghost"
+					><svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.02 20.25H7.5C6.75 20.25 6.2 20.22 5.73 20.15C2.4 19.78 1.75 17.8 1.75 14.5V9.5C1.75 6.2 2.41 4.21 5.76 3.84C6.2 3.78 6.75 3.75 7.5 3.75H10.96C11.37 3.75 11.71 4.09 11.71 4.5C11.71 4.91 11.37 5.25 10.96 5.25H7.5C6.82 5.25 6.34 5.28 5.95 5.33C3.92 5.55 3.25 6.19 3.25 9.5V14.5C3.25 17.81 3.92 18.44 5.92 18.67C6.34 18.73 6.82 18.75 7.5 18.75H11.02C11.43 18.75 11.77 19.09 11.77 19.5C11.77 19.91 11.43 20.25 11.02 20.25Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M16.4995 20.25H15.0195C14.6095 20.25 14.2695 19.91 14.2695 19.5C14.2695 19.09 14.6095 18.75 15.0195 18.75H16.4995C17.1795 18.75 17.6595 18.72 18.0495 18.67C20.0795 18.45 20.7495 17.81 20.7495 14.5V9.5C20.7495 6.19 20.0795 5.56 18.0795 5.33C17.6595 5.27 17.1795 5.25 16.4995 5.25H15.0195C14.6095 5.25 14.2695 4.91 14.2695 4.5C14.2695 4.09 14.6095 3.75 15.0195 3.75H16.4995C17.2495 3.75 17.7995 3.78 18.2695 3.85C21.5995 4.22 22.2495 6.2 22.2495 9.5V14.5C22.2495 17.8 21.5895 19.79 18.2395 20.16C17.7995 20.22 17.2495 20.25 16.4995 20.25Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M15 22.75C14.59 22.75 14.25 22.41 14.25 22V2C14.25 1.59 14.59 1.25 15 1.25C15.41 1.25 15.75 1.59 15.75 2V22C15.75 22.41 15.41 22.75 15 22.75Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M8 16.25C7.59 16.25 7.25 15.91 7.25 15.5V8.5C7.25 8.09 7.59 7.75 8 7.75C8.41 7.75 8.75 8.09 8.75 8.5V15.5C8.75 15.91 8.41 16.25 8 16.25Z"
+							fill="#292D32"
+						/>
+					</svg>
+				</IconButton>
+			{/if}
+			{#if onDelete}
+				<IconButton
+					onClick={() => {
+						deleteIsOpen = true;
+					}}
+					size="26px"
+					variant="ghost"
+					><svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"
+							fill="#292D32"
+						/>
+						<path
+							d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"
+							fill="#292D32"
+						/>
+					</svg>
+				</IconButton>
+			{/if}
+			<IconButton
+				onClick={() => {
+					isOpen = !isOpen;
+                    onOpen(isOpen)
+				}}
+				size="26px"
+				variant="ghost"
+				><svg
+                    class:is-open={isOpen}
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+	</div>
+	<div class="children">
+		{#if isOpen}
+			<slot />
+		{/if}
+	</div>
+{/if}
+
+<style>
+    .is-open {
+        transform: rotate(180deg);
+    }
+
+	.group {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		column-gap: var(--pad-m);
+		padding: var(--pad-l);
+		border-radius: var(--radius-xl);
+	}
+
+	.group:hover {
+		background-color: var(--bg-blur);
+	}
+
+	.left {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-s);
+        pointer-events: none;
+        user-select: none;
+	}
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-s);
+	}
+
+	.children {
+		width: calc(100% - var(--pad-m));
+		padding-left: var(--pad-m);
+		margin-left: var(--pad-m);
+		border-left: 1px solid var(--bg-blur);
+	}
+
+	.is-hovered h4 {
+		color: var(--accent);
+	}
+	.is-hovered :global( svg path) {
+		fill: var(--accent);
+	}
+</style>

package/src/lib/registry/navigationRegistry/components/NavigationRow.svelte

@@ -0,0 +1,213 @@
+<script>
+	import Icon from '../../../components/Icons/Icon.svelte';
+	import { AlertCard, Button, Dialog, IconButton, Input } from 'hamzus-ui';
+	import { navigationRegistry } from '../registry.svelte';
+
+	let { id, activeDrag = null, hasGroup = true, name, onDragStart, onDrop } = $props();
+
+	let isOpen = $state(false);
+	let isDragable = $state(false);
+
+	let onBottom = $state(false);
+	let onTop = $state(false);
+
+	function setAsDragable() {
+		isDragable = true;
+	}
+
+	function handleDragStart(event) {
+		// Vérifie que le drag commence bien depuis le bouton
+		if (!isDragable) {
+			event.preventDefault();
+			return;
+		}
+
+		onDragStart(id);
+	}
+
+	function handleDragEnd(e) {
+		isDragable = false;
+        onTop = false
+        onBottom = false
+	}
+
+	// Indispensable : sans preventDefault ici, ondrop ne se déclenche jamais
+	function handleDragEnter(event) {
+		event.preventDefault();
+
+        if (activeDrag == id) {
+            return
+        }
+	}
+
+	function handleDragOver(e) {
+        if (!hasGroup) return
+        e.preventDefault()
+        if (activeDrag == id) {
+            return
+        }
+
+        const el = e.target.closest('.group');
+
+		if (!el) return;
+
+		const elRect = el.getBoundingClientRect();
+
+		const clientY = e.clientY;
+        
+
+		if (clientY > elRect.y && clientY < elRect.y + elRect.height / 2) {
+			onBottom = false;
+			onTop = true;
+            return
+		}
+		onBottom = true;
+		onTop = false;
+    }
+	function handleDragLeave() {
+        onTop = false
+        onBottom = false
+    }
+
+	function handleDrop(e) {
+        console.log(e.target);
+        
+        if (activeDrag == id) {
+            return
+        }
+
+		const el = e.target.closest('.group');
+
+		if (!el) return;
+
+		const elRect = el.getBoundingClientRect();
+
+		const clientY = e.clientY;
+        
+
+        onBottom = false;
+        onTop = false;
+
+		if (clientY > elRect.y && clientY < elRect.y + elRect.height / 2) {
+            onDrop(id, "top")
+            return
+		}
+        onDrop(id, "bottom")
+	}
+</script>
+{#if onTop}
+    <span class="insert"></span>
+{/if}
+<div
+	class="group"
+	class:dragging={isDragable}
+	draggable={isDragable}
+	ondragend={handleDragEnd}
+	ondragenter={handleDragEnter}
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondragstart={handleDragStart}
+	ondrop={handleDrop}
+	data-id={id}
+>
+	<div class="left">
+		<div onmousedown={setAsDragable}>
+			<IconButton
+				onClick={() => {
+					isOpen = !isOpen;
+				}}
+				size="26px"
+				variant="ghost"
+				style="
+                     cursor: grab !important;"
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M8 12C8 11.3 8.5625 10.75 9.25 10.75C9.9375 10.75 10.5 11.3125 10.5 12C10.5 12.6875 9.9375 13.25 9.25 13.25C8.5625 13.25 8 12.7 8 12Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M13.5 12C13.5 11.3 14.0625 10.75 14.75 10.75C15.4375 10.75 16 11.3125 16 12C16 12.6875 15.4375 13.25 14.75 13.25C14.0625 13.25 13.5 12.7 13.5 12Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M8 17.5C8 16.8 8.5625 16.25 9.25 16.25C9.9375 16.25 10.5 16.8125 10.5 17.5C10.5 18.1875 9.9375 18.75 9.25 18.75C8.5625 18.75 8 18.2 8 17.5Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M13.5 17.5C13.5 16.8 14.0625 16.25 14.75 16.25C15.4375 16.25 16 16.8125 16 17.5C16 18.1875 15.4375 18.75 14.75 18.75C14.0625 18.75 13.5 18.2 13.5 17.5Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M8 6.5C8 5.8 8.5625 5.25 9.25 5.25C9.9375 5.25 10.5 5.8125 10.5 6.5C10.5 7.1875 9.9375 7.75 9.25 7.75C8.5625 7.75 8 7.2 8 6.5Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M13.5 6.5C13.5 5.8 14.0625 5.25 14.75 5.25C15.4375 5.25 16 5.8125 16 6.5C16 7.1875 15.4375 7.75 14.75 7.75C14.0625 7.75 13.5 7.2 13.5 6.5Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+		<h4>{name}</h4>
+	</div>
+	<div class="right"></div>
+</div>
+{#if onBottom}
+    <span class="insert"></span>
+{/if}
+<style>
+	.group {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		column-gap: var(--pad-m);
+		padding: var(--pad-l);
+		border-radius: var(--radius-xl);
+	}
+
+	.group:hover {
+		background-color: var(--bg-blur);
+	}
+
+	.dragging {
+		opacity: 0.5;
+	}
+
+	.drag-over {
+		outline: 2px dashed var(--accent, #4a90d9);
+		outline-offset: -2px;
+	}
+
+	.dragging .drag-handle {
+		cursor: grabbing !important;
+	}
+
+	.left {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-s);
+	}
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-s);
+		width: fit-content;
+		cursor: grab !important;
+	}
+
+    .insert {
+        display: flex;
+        width: 100%;
+        height: 0px;
+        border-radius: 60px;
+        outline: 1px solid var(--accent);
+    }
+</style>