hamzus-ui 0.0.1

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

@@ -0,0 +1,360 @@
+<script>
+	import { onDestroy, onMount  } from 'svelte';
+
+	export let style = '';
+	export let additionalStyle = '';
+	export let className = '';
+	export let proximity = 20;
+    export let isReverse = false
+
+	let isVisible = false;
+	let lastMove = 0;
+
+	let focusVerticalTrack = false;
+	let focusHorizontalTrack = false;
+
+	let overflowX = true;
+	let overflowY = true;
+
+	let overflowXY = true;
+
+	let topTrack = 0;
+	let leftTrack = 0;
+
+	let heightTrack = 0;
+	let widthTrack = 0;
+
+	let scrollContainer;
+	let offsetHeight;
+	let offsetWidth;
+
+	let scrollArea;
+	let scrollHeight;
+	let scrollWidth;
+	let startscrollTop;
+	let startscrollLeft;
+
+	let startDragX;
+	let startDragY;
+
+	let mousemoveEvent = null;
+	let mouseupEvent = null;
+
+	onMount(mount);
+
+    let scrollEvent = null
+
+    function scrollEventEmmiter() {
+        const monEvenement = new CustomEvent("userScroll",{});
+        document.dispatchEvent(monEvenement);
+    }
+
+    export function mount() {
+        scrollEvent = scrollArea.addEventListener('scroll', scrollEventEmmiter)
+
+		// calculer la height de la track
+		scrollHeight = scrollArea.scrollHeight;
+		offsetHeight = scrollContainer.offsetHeight;
+
+		scrollWidth = scrollArea.scrollWidth;
+		offsetWidth = scrollContainer.offsetWidth;
+
+		const verticalTrackSize = (offsetHeight / scrollHeight) * 100;
+		const horizontalTrackSize = (offsetWidth / scrollWidth) * 100;
+
+		overflowX = scrollWidth != offsetWidth;
+		overflowY = scrollHeight != offsetHeight;
+
+		overflowXY = overflowX && overflowY;
+
+		heightTrack = verticalTrackSize;
+		widthTrack = horizontalTrackSize;
+	}
+
+    onDestroy(()=>{
+        if (scrollEvent) {
+            scrollArea.removeEventListener('scroll', scrollEventEmmiter)
+            scrollEvent = null
+        }
+    })
+
+	function handleStartScrollVertical(event) {
+		startDragX = null;
+		startDragY = event.clientY;
+
+		// verifier sa position relativement a la scroll bar
+		let scrollAreaTop = scrollContainer.getBoundingClientRect()[isReverse ? "bottom" : "top"];
+		let relativePosFromTop = startDragY - scrollAreaTop;
+		let topRatio = relativePosFromTop / scrollContainer.getBoundingClientRect().height;
+
+		// recuperer en ratio la taille de la demi de la scrolltrack
+		let scrollTrackHeightRatio = heightTrack / 100;
+        if (isReverse) {
+            scrollTrackHeightRatio = - scrollTrackHeightRatio
+        }
+		scrollArea.scrollTo(
+			scrollArea.scrollLeft,
+			scrollArea.scrollHeight * (topRatio - scrollTrackHeightRatio / 2)
+		);
+
+		// let percentTop = relativePosFromTop / scrollContainer.offsetHeight
+
+		// let initialProgress = scrollArea.scrollHeight * percentTop
+		// console.log(scrollArea.scrollHeight);
+		// console.log(initialProgress);
+		// scrollArea.scrollTo(scrollArea.scrollLeft, initialProgress)
+
+		focusVerticalTrack = true;
+
+		startscrollTop = scrollArea.scrollTop;
+
+		// calculer le deplacement
+		mousemoveEvent = document.addEventListener('mousemove', handleMouseMove);
+
+		mouseupEvent = document.addEventListener('mouseup', handleStopScroll);
+	}
+	function handleStartScrollHorizontal(event) {
+		startDragX = event.clientX;
+		startDragY = null;
+
+		// verifier sa position relativement a la scroll bar
+		let scrollAreaLeft = scrollContainer.getBoundingClientRect().left;
+		let relativePosFromLeft = startDragX - scrollAreaLeft;
+		let leftRatio = relativePosFromLeft / scrollContainer.getBoundingClientRect().width;
+
+		// recuperer en ratio la taille de la demi de la scrolltrack
+		let scrollTrackWidthRatio = widthTrack / 100;
+
+		scrollArea.scrollTo(
+			scrollArea.scrollWidth * (leftRatio - scrollTrackWidthRatio / 2),
+			scrollArea.scrollTop
+		);
+
+		focusHorizontalTrack = true;
+
+		startscrollLeft = scrollArea.scrollLeft;
+		// calculer le deplacement
+		mousemoveEvent = document.addEventListener('mousemove', handleMouseMove);
+
+		mouseupEvent = document.addEventListener('mouseup', handleStopScroll);
+	}
+	function handleMouseMove(event) {
+		// calculer la pose et scroll
+		if (startDragX) {
+			// scroll horizontal
+			const deltaX = event.clientX - startDragX;
+			const cursorToScroll = (deltaX / offsetWidth) * scrollWidth;
+			scrollArea.scrollTo(startscrollLeft + cursorToScroll, scrollArea.scrollTop);
+		} else {
+			// scroll vertical
+			const deltaY = event.clientY - startDragY;
+			const cursorToScroll = (deltaY / offsetHeight) * scrollHeight;
+			scrollArea.scrollTo(scrollArea.scrollLeft, startscrollTop + cursorToScroll);
+		}
+	}
+
+	function handleStopScroll(event) {
+		document.removeEventListener('mousemove', handleMouseMove);
+		mousemoveEvent = null;
+
+		document.removeEventListener('mouseup', handleStopScroll);
+		mouseupEvent = null;
+
+		// calculer la pose et scroll
+		if (startDragX) {
+			// scroll horizontal
+			const deltaX = event.clientX - startDragX;
+			const cursorToScroll = (deltaX / offsetWidth) * scrollWidth;
+			scrollArea.scrollTo(startscrollLeft + cursorToScroll, scrollArea.scrollTop);
+			focusHorizontalTrack = false;
+		} else {
+			// scroll vertical
+			const deltaY = event.clientY - startDragY;
+			const cursorToScroll = (deltaY / offsetHeight) * scrollHeight;
+			scrollArea.scrollTo(scrollArea.scrollLeft, startscrollTop + cursorToScroll);
+			focusVerticalTrack = false;
+		}
+        startDragX = null
+        startDragY = null
+	}
+
+	function handleScroll() {
+		let calcTop = (scrollArea.scrollTop / scrollHeight) * 100;
+		leftTrack = (scrollArea.scrollLeft / scrollWidth) * 100;
+        
+        topTrack = isReverse ? -calcTop : calcTop
+        
+	}
+	function handleDisplayScrollBar() {
+        
+		if (lastMove + 800 < Date.now()) {
+			mount();
+		}
+		isVisible = true;
+		lastMove = Date.now();
+		setTimeout(() => {
+			if (lastMove + 750 < Date.now()) {
+				isVisible = false;
+			}
+		}, 800);
+	}
+</script>
+
+<scrollarea-container
+    role="scrollbar"
+    tabindex="-1"
+	bind:this={scrollContainer}
+	on:resize={mount}
+	class="scrollarea-container"
+	{style}
+	on:mousemove={handleDisplayScrollBar}
+>
+	<scrollarea
+		on:scroll={handleScroll}
+		bind:this={scrollArea}
+        style="{style + additionalStyle}"
+		class="scrollarea {className} {startDragY ? "is-scrolling" : ""}"
+	>
+		<slot />
+	</scrollarea>
+	{#if overflowY && (isVisible || startDragY)}
+		<div
+            role="button"
+            tabindex="-1"
+			class="vertical-sb {overflowXY ? 'global-overflow' : ''}"
+			on:mousedown|preventDefault={handleStartScrollVertical}
+		>
+			<span
+				class="vertical-track {proximity ? 'proxy' : ''} {focusVerticalTrack ? 'focus' : ''}"
+				style="--proximity:{proximity}px;height:{heightTrack}%;{isReverse ? "bottom" : "top"}:{topTrack}%;"
+			></span>
+		</div>
+	{/if}
+	{#if overflowX && (isVisible || startDragY)}
+		<div
+            role="button"
+            tabindex="-1"
+			class="horizontal-sb {overflowXY ? 'global-overflow' : ''}"
+			on:mousedown|preventDefault={handleStartScrollHorizontal}
+		>
+			<span
+				class="horizontal-track {proximity ? 'proxy' : ''} {focusHorizontalTrack ? 'focus' : ''}"
+				style="--proximity:{proximity}px;width:{widthTrack}%;left:{leftTrack}%;"
+			></span>
+		</div>
+	{/if}
+	{#if overflowXY}
+		<div class="overflow-xy-corner"></div>
+	{/if}
+</scrollarea-container>
+
+<style>
+	.scrollarea-container {
+		position: relative;
+		display: flex;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		flex: 1;
+	}
+	.scrollarea {
+		overflow: scroll;
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		/* Pour Firefox plus ancien */
+		overflow: -moz-scrollbars-none;
+		/* Pour Internet Explorer et Edge */
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+		/* display: contents; */
+	}
+    .scrollarea:not(.is-scrolling){
+        /* scroll-behavior: smooth; */
+    }
+	.scrollarea::-webkit-scrollbar {
+		display: none;
+		/* Chrome, Safari, Edge */
+	}
+
+	.vertical-sb {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 100%;
+		width: 12px;
+		background-color: rgba(143, 143, 143, 0.082);
+        z-index: 10;
+	}
+	.vertical-sb.global-overflow {
+		height: calc(100% - 12px);
+	}
+	.vertical-track {
+		--size: 7px;
+		position: absolute;
+		right: 0px;
+		width: var(--size);
+		background-color: rgba(122, 122, 122, 0.336);
+		border-radius: calc(var(--size) / 2);
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		transition: width 0.2s ease-out;
+	}
+	.vertical-track.proxy::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: calc(12px + var(--proximity));
+		height: 100%;
+	}
+	.vertical-track.proxy:hover,
+	.vertical-track.proxy.focus {
+		width: calc(100% + var(--proximity));
+	}
+	.horizontal-sb {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 12px;
+		width: 100%;
+		background-color: rgba(143, 143, 143, 0.082);
+        z-index: 10;
+	}
+	.horizontal-sb.global-overflow {
+		width: calc(100% - 12px);
+	}
+	.horizontal-track {
+		--size: 7px;
+		position: absolute;
+		bottom: 0;
+		height: var(--size);
+		background-color: rgba(122, 122, 122, 0.336);
+		border-radius: calc(var(--size) / 2);
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
+		transition: height 0.2s ease-out;
+	}
+	.horizontal-track.proxy::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		height: calc(12px + var(--proximity));
+		width: 100%;
+	}
+	.horizontal-track.proxy:hover,
+	.horizontal-track.proxy.focus {
+		height: calc(100% + var(--proximity));
+	}
+	.overflow-xy-corner {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 12px;
+		height: 12px;
+		background-color: rgba(143, 143, 143, 0.082);
+	}
+</style>

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

@@ -0,0 +1,84 @@
+<script>
+	export let style;
+	export let size = 24;
+	export let checked = false;
+	export let disabled = false;
+	export let disabledIcon = false;
+	export let onChange  = undefined;
+	export let label;
+
+	import './index.css';
+
+	function handleChange() {
+        
+		if (disabled) {
+			return;
+		}
+
+        checked = !checked;
+        if (onChange && typeof onChange === 'function') {
+            onChange(checked)
+        }
+	}
+</script>
+
+<label class="label-switch">
+	{#if label}
+		<h4>{label}</h4>
+	{/if}
+	<div
+		style="width:{size * 2 + 4}px;height:{size + 4}px;--size:{size + 4}px; {style ? style : ''}"
+		class="switch {checked ? 'active' : ''} {disabled ? 'disabled' : ''}"
+	>
+		<input type="checkbox" {checked} style="display:none;" on:change={handleChange}/>
+		<div
+			style="width:{size}px;height:{size}px;transform:{checked
+				? `translateX(${size + 2}px) translateY(2px)`
+				: 'translateX(2px) translateY(2px)'};"
+			class="head"
+		>
+            {#if disabledIcon}
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18 10.75C17.59 10.75 17.25 10.41 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.75 10.41 6.41 10.75 6 10.75C5.59 10.75 5.25 10.41 5.25 10V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8V10C18.75 10.41 18.41 10.75 18 10.75Z" fill="#292D32"/>
+                <path d="M12 19.25C10.21 19.25 8.75 17.79 8.75 16C8.75 14.21 10.21 12.75 12 12.75C13.79 12.75 15.25 14.21 15.25 16C15.25 17.79 13.79 19.25 12 19.25ZM12 14.25C11.04 14.25 10.25 15.04 10.25 16C10.25 16.96 11.04 17.75 12 17.75C12.96 17.75 13.75 16.96 13.75 16C13.75 15.04 12.96 14.25 12 14.25Z" fill="#292D32"/>
+                <path d="M17 22.75H7C2.59 22.75 1.25 21.41 1.25 17V15C1.25 10.59 2.59 9.25 7 9.25H17C21.41 9.25 22.75 10.59 22.75 15V17C22.75 21.41 21.41 22.75 17 22.75ZM7 10.75C3.42 10.75 2.75 11.43 2.75 15V17C2.75 20.57 3.42 21.25 7 21.25H17C20.58 21.25 21.25 20.57 21.25 17V15C21.25 11.43 20.58 10.75 17 10.75H7Z" fill="#292D32"/>
+                </svg>
+            {/if}
+            
+        </div>
+		<div class="state">
+			<div class="active">
+				<svg
+					width="31"
+					height="31"
+					viewBox="0 0 31 31"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M15.5 5.97668C16.0523 5.97668 16.5 6.4244 16.5 6.97668L16.5 24.0233C16.5 24.5756 16.0523 25.0233 15.5 25.0233C14.9477 25.0233 14.5 24.5756 14.5 24.0233L14.5 6.97668C14.5 6.4244 14.9477 5.97668 15.5 5.97668Z"
+						fill="black"
+					/>
+				</svg>
+			</div>
+			<div class="not-active">
+				<svg
+					width="31"
+					height="31"
+					viewBox="0 0 31 31"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M15.5 5.58868C10.0261 5.58868 5.58868 10.0261 5.58868 15.5C5.58868 20.9739 10.0261 25.4113 15.5 25.4113C20.9739 25.4113 25.4113 20.9739 25.4113 15.5C25.4113 10.0261 20.9739 5.58868 15.5 5.58868ZM3.58868 15.5C3.58868 8.92156 8.92156 3.58868 15.5 3.58868C22.0784 3.58868 27.4113 8.92156 27.4113 15.5C27.4113 22.0784 22.0784 27.4113 15.5 27.4113C8.92156 27.4113 3.58868 22.0784 3.58868 15.5Z"
+						fill="black"
+					/>
+				</svg>
+			</div>
+		</div>
+	</div>
+</label>

package/src/components/hamzus-ui/Swicth/index.css

@@ -0,0 +1,120 @@
+.label-switch{
+    display: flex;
+    align-items: center;
+    column-gap: 7px;
+    cursor: pointer;
+}
+.switch{
+    position: relative;
+    border-radius: var(--radius-xxl);
+    background-color: var(--bg-2);
+    transition: background-color .2s ease-out;
+    cursor: pointer;
+    transition-property:transform, opacity, background-color ;
+    transition-duration: .2s;
+    transition-timing-function: ease-out;
+}
+
+.switch:active{
+    transform: scale(.95);
+    opacity: .8;
+}
+
+.switch:hover:not(.disabled){
+    background-color: var(--bg-3);
+}
+    .switch .head{
+        border-radius: var(--radius-xl);
+        background-color: var(--white);
+        transform: translateX(2px) translateY(2px);
+        transition: transform .2s ease-out;
+        z-index: 2;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5px;
+
+    }
+        .switch .head svg{
+            width: 100%;
+            height: 100%;
+            flex-shrink: 0;
+        }
+            .switch .head svg path{
+                fill: var(--red);
+            }
+    .switch.active{
+        background-color: var(--accent) !important;
+    }
+    .switch .state{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        user-select: none;
+        pointer-events: none;
+        z-index: 1;
+    }
+        .switch .state .active{
+            width: var(--size);
+            height: var(--size);
+            padding: 4px;
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            color: var(--font-t);
+            transform: scale(.6) translateX(5px);
+            opacity: 0;
+            transition-property:transform, opacity ;
+            transition-duration: .2s;
+            transition-timing-function: ease-out;
+        }
+            .switch .state .active svg {
+                width: 100%;
+                height: 100%;
+                flex-shrink: 0;
+            }
+        .switch.active .state .active{
+            transform: scale(1);
+            opacity: 1;
+        }
+            .switch.active .state .active *{
+                color: var(--white);
+                fill: var(--white);
+            }
+        .switch .state .not-active{
+            width: var(--size);
+            height: var(--size);
+            padding: 4px;
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            color: var(--font-t);
+            transform: scale(.6)  translateX(-5px);
+            opacity: 0;
+            transition-property:transform, opacity ;
+            transition-duration: .2s;
+            transition-timing-function: ease-out;
+            
+        }
+            .switch .state .not-active svg {
+                width: 100%;
+                height: 100%;
+                flex-shrink: 0;
+            }
+        .switch:not(.active) .state .not-active{
+            transform: scale(1);
+            opacity: 1;
+        }
+            .switch:not(.active) .state .not-active *{
+                color: var(--font-u);
+                fill: var(--font-u);
+            }
+.label-switch:has(.switch.disabled), .switch.disabled{
+    opacity: .9;
+    cursor: not-allowed;
+}