hamzus-ui 0.0.100 → 0.0.102

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as InfoCard } from "./src/components/hamzus-ui/InfoCard/InfoCar
 export { default as AlertCard } from "./src/components/hamzus-ui/AlertCard/AlertCard.svelte"
 export { default as Link } from "./src/components/hamzus-ui/Link/Link.svelte"
 export { default as Kbd } from "./src/components/hamzus-ui/Kbd/Kbd.svelte"
+export * as Accordion from "./src/components/hamzus-ui/Accordion"
 
 // dialog
 export { toast as toast } from "./src/components/hamzus-ui/Toast/toast.js"

package/index.js

@@ -9,12 +9,14 @@ export { default as InfoCard } from "./src/components/hamzus-ui/InfoCard/InfoCar
 export { default as AlertCard } from "./src/components/hamzus-ui/AlertCard/AlertCard.svelte"
 export { default as Link } from "./src/components/hamzus-ui/Link/Link.svelte"
 export { default as Kbd } from "./src/components/hamzus-ui/KBD/KBD.svelte"
+export * as Accordion from "./src/components/hamzus-ui/Accordion"
 // dialog
 export { toast as toast } from "./src/components/hamzus-ui/Toast/toast.js"
 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 InputSelector } from "./src/components/hamzus-ui/InputSelector/InputSelector.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"

package/package.json

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

package/src/components/hamzus-ui/Accordion/Button.svelte

@@ -0,0 +1,33 @@
+
+<script>
+	import IconButton from "@hamzus-ui/IconButton/IconButton.svelte";
+
+    export let isOpen
+</script>
+
+<div class="accordion-btn {$isOpen ? "open" : ""}">
+    <slot/>
+    <IconButton variant="ghost">
+        <svg 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>
+
+<style>
+    .accordion-btn{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: var(--pad-m) 0;
+        cursor: pointer;
+    }
+    .accordion-btn svg { 
+        transition: transform .1s ease-in-out;
+        transform: rotate(90deg);
+    }
+    .accordion-btn.open svg {
+        transform: rotate(0deg);
+    }
+</style>

package/src/components/hamzus-ui/Accordion/Content.svelte

@@ -0,0 +1,23 @@
+
+<script>
+	import { onMount } from "svelte";
+
+    export let isOpen
+
+    let element
+</script>
+
+<div bind:this={element} style="--height:{element?.scrollHeight ?? "0"}px;" class="content {$isOpen ? "open" : ""}">
+    <slot/>
+</div>
+
+<style>
+    .content {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .2s ease-in;
+    }
+    .content.open {
+        max-height: var(--height);
+    }
+</style>

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

@@ -0,0 +1,21 @@
+<script>
+    import Trigger from "./Trigger.svelte";
+	import { writable } from "svelte/store";
+
+    export let isOpen = false
+
+    const isOpenStore = writable(isOpen)
+</script>
+
+<div class="root">
+    <slot isOpen={isOpenStore}></slot>
+</div>
+
+
+<style>
+    .root {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+<script>
+	import { getContext } from "svelte";
+
+    export let isOpen // store
+
+    function handleClick() {
+        isOpen.update((value)=>!value)
+    }
+</script>
+
+<div class="trigger" onclick={handleClick}>
+    <slot/>
+</div>
+
+<style>
+    .trigger {
+        display: inline-block;
+    }
+</style>

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

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

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

@@ -2,9 +2,10 @@
 
     export let width = "max-content"
     export let style;
+    export let onScroll = ()=>{};
 </script>
 
-<div class="content" style="--width:{width};{style}" {...$$restProps}>
+<div class="content" style="--width:{width};{style}" onscroll={onScroll} {...$$restProps}>
     <slot/>
 </div>
 
@@ -19,7 +20,7 @@
         border: 1px solid var(--bg-3);
         width: min(100vw, var(--width));
         max-width: var(--hamzus-max-content-width);
+        max-height: var(--hamzus-max-content-height);
         overflow-x: auto;
-        max-height: 100vh;
     }
 </style>

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

@@ -54,7 +54,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding:var(--pad-s);
+        /* padding:2.122%; */
         border-radius: var(--radius-m);
         background-color: var(--button-default-bg);
         color: var(--button-default-color);
@@ -76,8 +76,8 @@
         color: var(--button-default-color);
     }
         .button :global(svg){
-            height: 100%;
-            width: 100%;
+            height: 66.666%;
+            width: 66.666%;
             flex-shrink: 0;
         } 
         .button :global(svg > path)  {

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

@@ -0,0 +1,428 @@
+<script>
+	// import
+
+	import IconButton from '../IconButton/IconButton.svelte';
+	import Loader from '../LoaderCircle/Loader.svelte';
+	import * as DropdownMenu from '@hamzus-ui/DropdownMenu';
+	import Button from '@hamzus-ui/Button/Button.svelte';
+	// props
+	export let getMultipleElement = (search, offset) => {};
+	export let getElement = (data) => {};
+	export let component = null;
+	export let selectionComponent = null;
+
+	export let limit = 20;
+	export let offset = 0;
+	export let totalOfRows = 0;
+	export let variant = 'default';
+	export let className = '';
+	export let iconSize = '24px';
+	export let label = '';
+	export let labelType = 'h5';
+	export let name = '';
+	export let selection = null;
+	export let value = null;
+	export let multiple = false;
+	export let search = '';
+	export let results = [];
+	export let onChange = () => {};
+	export let disabled = false;
+	export let required = false;
+	export let style = '';
+	export let placeholder = '';
+	export let errorMessage = '';
+	export let isLoading = false;
+	export let isVisible = false;
+	export let padding = '3px 10px';
+	export let borderRadius = 'var(--radius-m)';
+	export let defaultBg = '--bg-2';
+	import { onMount } from 'svelte';
+
+	// local var
+	let input;
+	let isMounted = false;
+
+	let openDropdownMenu = false;
+	let closeDropdownMenu = false;
+
+	$: handleChange(search);
+
+	// fnctions
+	function formatInput(inputValue) {
+		// verifier que c est un nombre
+
+		return inputValue;
+	}
+	async function handleChange(val) {
+		if (!isMounted) {
+			return;
+		}
+		console.log(val);
+
+		// suprimmer les result
+		results = [];
+		// set l offset a 0
+		offset = 0;
+
+		// faire une nouvelle requete avec la recherche
+		const request = await getMultipleElement(val, offset);
+		results = request.rows;
+		totalOfRows = request.totalOfRows;
+		offset += limit;
+	}
+
+	onMount(async () => {
+		isMounted = false;
+
+		// recuperer les resultat
+		const request = await getMultipleElement(search, offset);
+		results = request.rows;
+		totalOfRows = request.totalOfRows;
+		offset += limit;
+
+		// si la valeur est pas set on fais rien
+		if (value === null) {
+			isMounted = true;
+			return;
+		}
+
+		// si l'input est pas multiple on recupere
+		if (!multiple) {
+			// recuperer les données et set
+			const element = await getElement({ id: value });
+
+			if (!element) {
+				isMounted = true;
+				return;
+			}
+			selection = element;
+			isMounted = true;
+			return;
+		}
+
+		for (const id of value) {
+			const element = await getElement({ id: id });
+
+			selection = [...(selection ?? []), element];
+		}
+
+		isMounted = true;
+	});
+
+	function handleDisplay() {
+		isVisible = !isVisible;
+	}
+
+	async function handleSelect(data) {
+		// recuperer les details
+		const element = await getElement(data);
+
+		search = '';
+		input.focus();
+
+		if (multiple) {
+			// verifier si il existe deja
+			let exist = false;
+			if (selection !== null) {
+				for (const element of selection) {
+					if (element.id == data.id) {
+						exist = true;
+						break;
+					}
+				}
+			}
+
+			if (exist) {
+				return;
+			}
+
+			selection = [...(selection ?? []), element];
+			return;
+		}
+
+		selection = element;
+	}
+	function handleDelete(data) {
+		if (!multiple) {
+			selection = null;
+			return;
+		}
+
+		let newSelection = [];
+
+		for (const element of selection) {
+			if (element.id === data.id) {
+				continue;
+			}
+
+			newSelection.push(element);
+		}
+
+		if (newSelection.length === 0) {
+			selection = null;
+			return;
+		}
+
+		selection = [...newSelection];
+	}
+
+	async function handleLoadMore() {
+		const request = await getMultipleElement(search, offset);
+		results = [...results, ...request.rows];
+		totalOfRows = request.totalOfRows;
+		offset += limit;
+	}
+</script>
+
+<DropdownMenu.Root
+	direction="bottom"
+	avoidOpening
+	bind:forceOpen={openDropdownMenu}
+	bind:forceClose={closeDropdownMenu}
+>
+	<DropdownMenu.Trigger slot="trigger">
+		<div
+			class="input-container {variant == 'default' ? variant : ''} {className}"
+			{style}
+			{...$$restProps}
+		>
+			<div
+				class="input {errorMessage ? ' error' : ''}"
+				style="{variant == 'collapse'
+					? `padding:${padding};`
+					: ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
+			>
+				<div class="top-line">
+					{#if label}
+						<h5 class={labelType}>
+							{label}
+							{#if required}
+								<span class="required">*</span>
+							{/if}
+						</h5>
+					{/if}
+					{#if isLoading}
+						<Loader isLoading className="input-loader" color="--accent" size="16px" />
+					{/if}
+				</div>
+				<div
+					class="input-line"
+					style="{variant == 'default' ? `padding:${padding};` : ''}--icon-size:{iconSize};"
+				>
+					<slot name="startContent" />
+					<div class="list">
+						{#if selection}
+							{#if multiple}
+								{#each selection as selectionElement}
+									<input type="hidden" name="{name}[]" value={selectionElement.id} />
+									<svelte:component
+										this={selectionComponent}
+										{...selectionElement}
+										onClick={handleDelete}
+									></svelte:component>
+								{/each}
+							{:else}
+								<input type="hidden" {name} value={selection.id} />
+								<svelte:component this={selectionComponent} {...selection} onClick={handleDelete}
+								></svelte:component>
+							{/if}
+						{/if}
+						<input
+							onfocus={() => {
+								openDropdownMenu = true;
+							}}
+							label=""
+							onblur={(e) => {
+								try {
+									if (e.relatedTarget.closest('.content-popover-hamzus')) {
+										return;
+									}
+									closeDropdownMenu = true;
+								} catch (error) {}
+							}}
+							class="h4 search"
+							{placeholder}
+							bind:value={search}
+							bind:this={input}
+							{required}
+							disabled={isLoading ? true : disabled}
+						/>
+					</div>
+					<slot name="endContent" />
+				</div>
+			</div>
+			{#if errorMessage}
+				<h5 class="error-message">{errorMessage}</h5>
+			{/if}
+		</div>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content slot="content" width="var(--hamzus-tigger-width)">
+		{#each results as result}
+			{@const isSelected = () => {
+				if (selection === null) {
+					return false;
+				}
+
+				if (!multiple) {
+					return selection.id == result.id;
+				}
+
+				// parcourir pour verifier si il correspond a un rersultat
+				for (const element of selection) {
+					if (element.id == result.id) {
+						return true;
+					}
+				}
+
+				return false;
+			}}
+			<svelte:component this={component} selected={isSelected()} {...result} onClick={handleSelect}
+			></svelte:component>
+		{/each}
+		{#if results.length < totalOfRows}
+			<Button
+				label="charger plus"
+				style="width:100%;text-align:center"
+				variant="secondary"
+				onClick={handleLoadMore}
+			></Button>
+		{/if}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<style>
+	.input-container {
+		display: flex;
+		flex-direction: column;
+		transition-property: transform opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+		user-select: none;
+		cursor: text;
+	}
+	.input-container :global(svg) {
+		padding: 2px;
+	}
+	.input-container :global(svg path) {
+		fill: var(--font-2);
+	}
+	.input-container input {
+		text-align: left;
+	}
+	.input-container.default .input {
+		display: flex;
+		flex-direction: column;
+		row-gap: 0px;
+	}
+	.input-container:not(.default) .input {
+		display: flex;
+		flex-direction: column;
+		border-radius: var(--radius);
+		background-color: var(--default-bg);
+		border: 2px solid var(--default-bg);
+		transition-property: background, border;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+
+	.input-container:not(.default):has(input:user-invalid) .input {
+		border: 2px solid var(--red);
+	}
+	.input-container:not(.default) .input:hover {
+		background-color: var(--bg-3);
+	}
+	.input-container:not(.default) .input:has(input:focus) {
+		background-color: var(--bg-1);
+		/* border: 2px solid var(--accent); */
+	}
+	.input svg path {
+		fill: var(--font-2);
+	}
+
+	.input h6 {
+		color: var(--font-2);
+	}
+	.input .required {
+		color: var(--red);
+	}
+	.input .top-line {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		column-gap: var(--pad-m);
+	}
+	.input .top-line .input-loader {
+		position: static;
+	}
+	.input-container.default .input .input-line {
+		border-radius: var(--radius);
+		background-color: var(--default-bg);
+		border: 2px solid var(--default-bg);
+		transition-property: background, border;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+	.input-container.default .input:hover .input-line {
+		background-color: var(--bg-3);
+	}
+	.input-container.default .input:has(input:focus) .input-line {
+		background-color: var(--bg-1);
+		/* border: 2px solid var(--accent); */
+	}
+	.input-container.default:has(input:user-invalid) .input-line {
+		border: 2px solid var(--red);
+	}
+	.input .input-line {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-s);
+	}
+	.input-container.default:has(.selection) .input-line {
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
+	}
+	/* .selection {
+		display: flex;
+		gap: var(--pad-s);
+		flex-direction: column;
+		background-color: var(--bg-2);
+		border-bottom-left-radius: var(--radius-m);
+		border-bottom-right-radius: var(--radius-m);
+		padding: var(--pad-m);
+		border-top: 1px solid var(--stroke);
+	} */
+	.list {
+		display: flex;
+		width: 100%;
+		gap: var(--pad-s);
+		flex-wrap: wrap;
+	}
+	.input input {
+		color: var(--font-1);
+		width: 100%;
+		min-width: 150px;
+		flex: 1;
+		font-weight: 300;
+	}
+	.input input::placeholder {
+		color: var(--font-3);
+	}
+	.input .input-line svg {
+		height: var(--icon-size);
+		width: auto;
+	}
+
+	.input.error {
+		border: 2px solid var(--red) !important;
+		border-radius: var(--radius);
+	}
+	.input-container .error-message {
+		color: var(--red);
+		margin-left: 4px;
+	}
+
+	.input-container:has(input:disabled) .input {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>

package/src/layout/Sidebar/SideBarMenu/SideBarMenuChildBtn.svelte

@@ -31,6 +31,7 @@
         <span class="line"></span>
     </icon>
     <h5>{label}</h5>
+    <slot/>
 </a>
     
 <style>