hamzus-ui 0.0.13 → 0.0.14

package/index.d.ts

@@ -15,6 +15,7 @@ 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"
@@ -28,3 +29,7 @@ export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCi
 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,6 +11,7 @@ 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"
@@ -21,4 +22,8 @@ export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCi
 
 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.13",
+	"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/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/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);