hamzus-ui 0.0.12 → 0.0.14

package/index.d.ts

@@ -15,13 +15,21 @@ export { default as Kbd } from "./src/components/hamzus-ui/Kbd/Kbd.svelte"
 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"
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
 export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/DatePicker.svelte"
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Swicth/Swicth.svelte"
 
+// data
+export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
+
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu";
 export * as Popover from "./src/components/hamzus-ui/Popover";
 export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip";
+
+// utils
+export { getCookie as getCookie } from "./src/utils/clientCookie.js"
+export { sendRequest as sendRequest } from "./src/utils/request.js"

package/index.js

@@ -11,13 +11,19 @@ export { default as Kbd } from "./src/components/hamzus-ui/KBD/KBD.svelte"
 // dialog
 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"
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
 export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/DatePicker.svelte"
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Swicth/Swicth.svelte"
-
+// data
+export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu"
 export * as Popover from "./src/components/hamzus-ui/Popover"
-export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip"
+export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip"
+
+// utils
+export { getCookie as getCookie } from "./src/utils/clientCookie.js"
+export { sendRequest as sendRequest } from "./src/utils/request.js"

package/package.json

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

package/src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte

@@ -4,6 +4,7 @@
 	export let label = '';
 	export let disabled = false;
 	export let fullWidth = false;
+	export let spaceBetween = false;
 	export let checked = false;
 	export let direction = 'ltr';
 	export let onChange = null;
@@ -22,7 +23,7 @@
 	}
 </script>
 
-<label class="checkbox-label {disabled ? 'disabled' : ''} {fullWidth ? 'full-width' : ''}">
+<label class="checkbox-label {disabled ? 'disabled' : ''} {fullWidth ? 'full-width' : ''} {spaceBetween ? 'space-between' : ''}">
 	{#if label && direction === 'ltr'}
 		<h4>{label}</h4>
 	{/if}
@@ -54,6 +55,8 @@
 	}
 	.checkbox-label.full-width {
 		width: 100%;
+	}
+	.checkbox-label.space-between {
 		justify-content: space-between;
 	}
 	.checkbox-box {

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

@@ -13,8 +13,8 @@
 
 	function lintCode(text) {
 		// text = text.replace(/ /g, '\t');
-		text = text.replace(/"([^"]*)":/g, '<span>"$1"</span> <span class="syntax">:</span>');
-		text = text.replace(/(,)\n/g, '<span class="syntax">$1</span>\n');
+		// text = text.replace(/"([^"]*)":/g, '<span>"$1"</span> <span class="syntax">:</span>');
+		// text = text.replace(/(,)\n/g, '<span class="syntax">$1</span>\n');
 
 		let tempText = text.split('\n');
 		lines = tempText;

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

@@ -32,7 +32,7 @@
             </svg>            
         {/if}            
     </IconButton>
-    <TinyScrollArea>
+    <TinyScrollArea style="justify-content:center;">
         <h4 class="code" style="text-align: left;">{displayedText}</h4>
     </TinyScrollArea>
 </div>

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

@@ -0,0 +1,217 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let afterSubmit = () => {};
+	export let url = undefined;
+	export let path = '/';
+	export let sending = false;
+	export let style = '';
+	export let avoidAutoMessage = false;
+	export let successMessage = null;
+	export let errorMessage = null;
+	export let includeToken = true;
+    export let appendData = undefined
+    export let alterData = undefined
+    export let preventQuit = true
+
+	import { getCookie } from './clientCookie';
+	import { beforeNavigate } from '$app/navigation';
+    import { config } from '../../../hamzus.config';
+
+	let form;
+	let isFormDirty = false;
+
+	onMount(() => {
+		window.addEventListener('beforeunload', handlePreventExit);
+
+		return () => {
+			window.removeEventListener('beforeunload', handlePreventExit);
+		};
+	});
+	function handleLinkClick(event) {
+		if (isFormDirty && preventQuit) {
+			const confirmLeave = confirm(
+				'Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?'
+			);
+			if (!confirmLeave) {
+			}
+		}
+	}
+
+	function handleSetFormDirty() {
+		isFormDirty = true;
+	}
+
+	function handlePreventExit(event) {
+		if (isFormDirty && preventQuit) {
+			event.preventDefault();
+			// Certains navigateurs exigent que la propriété returnValue soit définie
+			event.returnValue =
+				'Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?';
+			return 'Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?';
+		}
+	}
+
+	beforeNavigate(({ cancel }) => {
+		if (isFormDirty && preventQuit) {
+			let confiramtion = confirm("Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?")
+            if (!confiramtion) {
+                cancel();
+            }
+		}
+	});
+
+	function handleSubmit(event) {
+        if (sending) {
+            return 
+        }
+
+		sending = true;
+
+		let formData = new FormData(event.target);
+
+        // inclure le token
+		if (includeToken) {
+			const token = getCookie(config['sessionTokenName']);
+			formData.append(config['sessionTokenName'], token);
+		}
+
+        // inclure les données
+        if (appendData !== undefined) {
+            let moreData = appendData();
+            
+            for (const key in moreData) {
+                formData.append(key, moreData[key])
+            }
+        }
+
+        // alterer si possible les donné
+        if (alterData !== undefined) {
+            const alteredData = alterData(Object.fromEntries(formData.entries())) // passer les données du formulaire acutelle en parametre
+
+            formData = new FormData();
+            
+            for (const key in alteredData) {
+                formData.append(key, alteredData[key])
+            }
+        }
+
+
+		// Création de la requête XHR
+		var scriptPath = (url || config['url']) + path;
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', scriptPath, true);
+
+		xhr.onload = function () {
+			sending = false;
+
+			if (form.querySelectorAll(`input.invalid`).length > 0) {
+				const inputs = form.querySelectorAll(`input.invalid`);
+				for (const input of inputs) {
+					input.classList.remove('invalid');
+				}
+			}
+
+			try {
+				const response = JSON.parse(xhr.responseText);
+				if (response.statusType == 'success') {
+					// desaactiver le invcalid
+                    isFormDirty = false
+					errorMessage = null;
+                    if (!avoidAutoMessage) {
+                        successMessage = response.message;
+                        setInterval(() => {
+                            successMessage = null;
+                        }, 5000);
+                    }
+				} else {
+					successMessage = null;
+					if (!avoidAutoMessage) {
+                        errorMessage = response.message;
+                    }
+                    
+					// verifier si il y a des input manquant
+					if (response.requiredField && response.requiredField.length > 0) {
+						for (const inputName of response.requiredField) {
+							if (form.querySelector(`input[name="${inputName}"]`)) {
+								const input = form.querySelector(`input[name="${inputName}"]`);
+								input.classList.add('invalid');
+							}
+						}
+					}
+					if (response.invalidField && response.invalidField.length > 0) {
+						for (const inputName of response.invalidField) {
+							if (form.querySelector(`input[name="${inputName}"]`)) {
+								const input = form.querySelector(`input[name="${inputName}"]`);
+								input.classList.add('invalid');
+							}
+						}
+					}
+				}
+			} catch (error) {
+				console.error(error);
+				return;
+			}
+
+			if (afterSubmit) {
+				afterSubmit(JSON.parse(xhr.responseText));
+			}
+		};
+
+		xhr.onerror = function () {
+			sending = false
+		};
+
+		// Envoi des données sous forme JSON
+		xhr.send(formData);
+	}
+</script>
+
+<form
+	{style}
+	on:input={handleSetFormDirty}
+	bind:this={form}
+	method="POST"
+	on:submit|preventDefault={handleSubmit}
+>
+	<slot></slot>
+	<div class="buttons">
+		<slot name="button" />
+	</div>
+	<slot name="down-form" />
+	{#if successMessage}
+		<div class="success p">{successMessage}</div>
+	{/if}
+	{#if errorMessage}
+		<div class="error p">{errorMessage}</div>
+	{/if}
+</form>
+
+<style>
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	.success {
+		width: 100%;
+		padding: 12px;
+		background-color: var(--green-b);
+		color: var(--green);
+		border-radius: 12px;
+		white-space: pre-wrap;
+	}
+	.error {
+		width: 100%;
+		padding: 12px;
+		background-color: var(--red-b);
+		color: var(--red);
+		border-radius: 12px;
+		white-space: pre-wrap;
+	}
+	.buttons {
+		display: flex;
+		width: 100%;
+		justify-content: end;
+	}
+</style>

package/src/components/hamzus-ui/Form/clientCookie.js

@@ -0,0 +1,18 @@
+
+export function getCookie(cookieName) {
+    
+    var cookies = document.cookie.split(';');
+
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i].trim();
+
+        // Vérifie si le nom du cookie correspond à celui recherché
+        if (cookie.indexOf(cookieName + '=') === 0) {
+            // Retourne la valeur du cookie
+            return cookie.substring(cookieName.length + 1);
+        }
+    }
+    
+    // Retourne null si le cookie n'est pas trouvé
+    return '';
+}

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

@@ -6,6 +6,7 @@
     export let desabled = false
     export let onClick = undefined
 	export let avoidRipple = false;
+    export let type = "button"
     // local var
     let button
     // functions
@@ -40,7 +41,7 @@
 	}
 </script>
 
-<button bind:this={button} on:click={handleClick} class="button h4" class:desabled class:loading {...$$restProps}>
+<button {type} bind:this={button} on:click={handleClick} class="button h4" class:desabled class:loading {...$$restProps}>
     <slot/>
     {#if loading}
         <div class="loader">

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

@@ -16,6 +16,7 @@
 	export let hasChanged = false;
 	export let disabled = false;
 	export let required = false;
+	export let fullWidth = false;
 	export let type = '';
 	export let style = '';
 	export let placeholder = '';
@@ -88,7 +89,7 @@
 
 <div
 	class="input-container {variant == 'default' ? variant : ''} {className}"
-	{style}
+	style={(fullWidth ? "width:100%;" : "") + style}
 	{...$$restProps}
 >
 	<label

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

@@ -0,0 +1,167 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let size = 100;
+	export let thickness = 10;
+	export let progress = 100; // 0–100
+	export let gapPixels = 4; // Écart visuel minimal
+	export let color = null;
+	export let colorPercentBased = {
+		0: 'var(--red)',
+		40: 'var(--orange)',
+		60: 'var(--green)'
+	};
+	export let bgColor = 'var(--bg-2)';
+	export let showLabel = false;
+	export let animated = true;
+	export let linecap = 'round';
+
+	const r = (size - thickness) / 2;
+	const cx = size / 2;
+	const cy = size / 2;
+	const circumference = 2 * Math.PI * r;
+
+	let dynamicColor = color === null;
+	let copyColor = dynamicColor
+		? animated
+			? colorPercentBased[0]
+			: getCorrectColor(progress)
+		: color;
+	let copyProgress = animated ? 0 : progress === 100 ? 99.99 : progress;
+
+	// Fonction ease-out (courbe cubic)
+	function easeOutCubic(t) {
+		return 1 - Math.pow(1 - t, 3);
+	}
+
+	onMount(() => {
+		if (!animated) return;
+
+		const duration = 800; // en ms
+		const start = performance.now();
+
+		function animate(now) {
+			const elapsed = now - start;
+			const t = Math.min(elapsed / duration, 1); // clamp entre 0 et 1
+
+			const eased = easeOutCubic(t);
+
+			let newValue = Math.round(progress * eased);
+
+			copyProgress = newValue === 100 ? 99.99 : newValue;
+
+			// determiner la couleur si il y a dynamic color
+			if (dynamicColor) {
+				let finalColor = colorPercentBased[0];
+				for (const step in colorPercentBased) {
+					const color = colorPercentBased[step];
+
+					if (copyProgress > step) {
+						finalColor = color;
+						continue;
+					}
+
+					break;
+				}
+
+				copyColor = finalColor;
+			}
+
+			if (t < 1) {
+				requestAnimationFrame(animate);
+			}
+		}
+
+		requestAnimationFrame(animate);
+	});
+
+	function getCorrectColor(progress) {
+		let finalColor = colorPercentBased[0];
+		for (const step in colorPercentBased) {
+			const color = colorPercentBased[step];
+
+			if (progress > step) {
+				finalColor = color;
+				continue;
+			}
+
+			break;
+		}
+
+		return finalColor;
+	}
+
+	// Progrès en angle
+	$: progressAngle = (copyProgress / 100) * 360;
+
+	// ➕ Compensation du stroke-linecap (ajoute une demi-thickness de chaque côté de l'arc)
+	const capVisualOverlap = thickness; // total débordement = thickness (2 * thickness/2)
+
+	$: totalGapPx = gapPixels + capVisualOverlap;
+	$: gapAngle = (totalGapPx / circumference) * 360;
+
+	$: startAngleProgress = -90;
+	$: endAngleProgress = startAngleProgress + progressAngle;
+
+	$: startAngleBg = endAngleProgress + gapAngle;
+	$: endAngleBg = 270 - gapAngle;
+
+	function polarToCartesian(cx, cy, r, angleDeg) {
+		const angleRad = (angleDeg * Math.PI) / 180;
+		return {
+			x: cx + r * Math.cos(angleRad),
+			y: cy + r * Math.sin(angleRad)
+		};
+	}
+
+	function describeArc(cx, cy, r, startAngle, endAngle) {
+		const start = polarToCartesian(cx, cy, r, endAngle);
+		const end = polarToCartesian(cx, cy, r, startAngle);
+		const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+
+		return ['M', start.x, start.y, 'A', r, r, 0, largeArcFlag, 0, end.x, end.y].join(' ');
+	}
+</script>
+
+<svg class="progress-circle" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+	<!-- Arc de progression -->
+	<path
+		d={describeArc(cx, cy, r, startAngleProgress, endAngleProgress)}
+		stroke={copyColor}
+		stroke-width={thickness}
+		fill="none"
+		stroke-linecap={linecap}
+	/>
+
+	{#if showLabel}
+		<text
+			x="50%"
+			y="50%"
+			text-anchor="middle"
+			dominant-baseline="central"
+			fill={copyColor}
+			style="font-size: {size / 3.5}px;"
+			class="h4">{Math.round(copyProgress)}%</text
+		>
+	{/if}
+
+	<!-- Arc de fond, après le progress + gap -->
+	{#if copyProgress < 96}
+		<path
+			d={describeArc(cx, cy, r, startAngleBg, endAngleBg)}
+			stroke={bgColor}
+			stroke-width={thickness}
+			fill="none"
+			stroke-linecap={linecap}
+		/>
+	{/if}
+</svg>
+
+<style>
+	.progress-circle path {
+		transition: stroke 0.3s ease-out;
+	}
+	.progress-circle text {
+		transition: color 0.3s ease-out;
+	}
+</style>

package/src/styles/global.css

@@ -101,8 +101,8 @@
 }
 
 html {
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
   overflow: hidden;
   scroll-behavior: smooth;
   background: var(--bg-1);