mountain-ui 1.0.152 → 1.0.154

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.152",
+	"version": "1.0.154",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",
@@ -76,7 +76,7 @@
 		"vitest-browser-svelte": "^2.1.1"
 	},
 	"dependencies": {
-		"hamzus-ui": "^0.0.267"
+		"hamzus-ui": "^0.0.268"
 	},
 	"engines": {
 		"node": ">=18.0.0"

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Input.svelte

@@ -21,11 +21,13 @@
 
 	let table = $state([createLine()]);
 
+	let isHidden = $state(false);
+
 	onMount(() => {
 		if (value === null) return;
 
 		const decodedValue = JSON.parse(value);
-console.log(decodedValue);
+		console.log(decodedValue);
 
 		let newLines = [];
 
@@ -152,29 +154,52 @@ console.log(decodedValue);
 			calc.calculate(table[lineIndex].ctx);
 		}
 	}
+
+	function handleToggleVisibility() {
+		isHidden = !isHidden;
+	}
 </script>
 
 <div class="table">
 	<div class="title">
 		<Label {label} {required} {secret} {unique}></Label>
+
+		<div class="right">
+			<Button onClick={handleAddLine}>
+				<h5>ajouter une rangée</h5>
+			</Button>
+			<IconButton size="24px" variant="ghost" onClick={handleToggleVisibility}>
+				<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>
 	</div>
-	<ResponsiveTable.Root let:ctx>
-		<ResponsiveTable.Header>
-			{#if columns.length > 0}
+	<div class="table-container" style="--column-number:{columns.length};" class:hidden={isHidden}>
+		{#if columns.length > 0 && columns.find(c=>(c.name??false) !== false)}
+			<div class="header">
 				{#each columns as column, columnIndex}
-					<ResponsiveTable.HeaderCell align="left" label={column.name ?? '-'} {ctx}>
+					<div class="header-cell">
 						<h6>{columns[columnIndex].name ?? ''}</h6>
-						<!-- {column.columnIndex} -->
-					</ResponsiveTable.HeaderCell>
+					</div>
 				{/each}
-			{/if}
-		</ResponsiveTable.Header>
-		<ResponsiveTable.Body>
+			</div>
+		{/if}
+		<div class="body">
 			{#if $entity}
 				{#each table as line, lineIndex (line.id)}
-					<ResponsiveTable.Line>
+					<div class="line">
 						{#each columns as column, columnIndex}
-							<ResponsiveTable.Cell {ctx}>
+							<div class="cell">
 								{#each column.rows as row, rowIndex}
 									<FieldInput
 										compact
@@ -199,7 +224,7 @@ console.log(decodedValue);
 								{#if columnIndex + 1 === columns.length}
 									<div class="delete">
 										<IconButton
-                                            avoidRipple
+											avoidRipple
 											variant="destructive"
 											onClick={() => {
 												handleDeleteLine(lineIndex);
@@ -236,33 +261,131 @@ console.log(decodedValue);
 										</IconButton>
 									</div>
 								{/if}
-							</ResponsiveTable.Cell>
+							</div>
 						{/each}
-					</ResponsiveTable.Line>
+					</div>
 				{/each}
 			{/if}
-		</ResponsiveTable.Body>
-	</ResponsiveTable.Root>
-	<div class="title">
-		<Button onClick={handleAddLine}>
-			<h5>ajouter une rangée</h5>
-		</Button>
-		<Label label="/{label}" {required} {secret} {unique}></Label>
+		</div>
+		<!-- <ResponsiveTable.Root let:ctx>
+			{#if columns.length > 0}
+				<ResponsiveTable.Header>
+					{#each columns as column, columnIndex}
+						<ResponsiveTable.HeaderCell align="left" label={column.name ?? '-'} {ctx}>
+							<h6>{columns[columnIndex].name ?? ''}</h6>
+							
+						</ResponsiveTable.HeaderCell>
+					{/each}
+				</ResponsiveTable.Header>
+			{/if}
+			<ResponsiveTable.Body>
+				{#if $entity}
+					{#each table as line, lineIndex (line.id)}
+						<ResponsiveTable.Line>
+							{#each columns as column, columnIndex}
+								<ResponsiveTable.Cell {ctx}>
+									{#each column.rows as row, rowIndex}
+										<FieldInput
+											compact
+											detailsCtx={table[lineIndex].detailsCtx}
+											ctx={table[lineIndex].ctx}
+											onChangeDetails={(value) => {
+												handleChangeDetails(lineIndex, row.fieldId, value);
+											}}
+											onChange={(value) => {
+												handleChange(lineIndex, row.fieldId, value);
+											}}
+											changeCtx={(fieldId, value) => {
+												handleChange(lineIndex, fieldId, value);
+											}}
+											id={row.fieldId}
+											value={table[lineIndex].ctx?.[row.fieldId] ?? null}
+											registerCalculation={(config) => {
+												handleRegisterCalculation(lineIndex, config);
+											}}
+										></FieldInput>
+									{/each}
+									{#if columnIndex + 1 === columns.length}
+										<div class="delete">
+											<IconButton
+												avoidRipple
+												variant="destructive"
+												onClick={() => {
+													handleDeleteLine(lineIndex);
+												}}
+											>
+												<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>
+										</div>
+									{/if}
+								</ResponsiveTable.Cell>
+							{/each}
+						</ResponsiveTable.Line>
+					{/each}
+				{/if}
+			</ResponsiveTable.Body>
+		</ResponsiveTable.Root> -->
 	</div>
 </div>
 
 <style>
+	.table {
+		width: 100%;
+		height: fit-content;
+		border-radius: 0 var(--radius-m) var(--radius-m) 0;
+		overflow: clip;
+		border: 1px solid var(--stroke);
+		border-left: 3px solid var(--accent);
+	}
+
 	.title {
 		display: flex;
 		align-items: center;
-        justify-content: space-between;
-        padding: var(--pad-m);
+		justify-content: space-between;
+		padding: var(--pad-m);
 		width: 100%;
 	}
-    .title:last-child {
-        border-top: 1px solid var(--bg-blur);
-    }
-	:global(.table-container .line:has( > .cell > .delete .button:hover)) {
+	.title {
+		border-bottom: 1px solid var(--bg-blur);
+        position: sticky;
+        top: 45px;
+        background-color: var(--bg-1);
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
+
+	:global(.table-container .line:has(> .cell > .delete .button:hover)) {
 		background-color: var(--red-b);
 	}
 
@@ -276,12 +399,32 @@ console.log(decodedValue);
 		padding: var(--pad-s);
 	}
 
-    .table {
-        width: 100%;
-        height: fit-content;
-        border-radius: var(--radius-m);
-        overflow: clip;
-        border: 1px solid var(--stroke);
-        padding: var(--pad-s);
+	.table-container.hidden {
+		display: none;
+        overflow: hidden;
+	}
+
+	.header {
+		display: grid;
+		grid-template-columns: repeat(var(--column-number), 1fr);
+        background-color: var(--bg-blur);
+        padding: var(--pad-m);
+	}
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        padding: var(--pad-xs);
     }
+
+    .line {
+        display: grid;
+		grid-template-columns: repeat(var(--column-number), 1fr);
+        border-bottom: 1px solid var(--stroke);
+        padding-top: var(--pad-xs);
+    }
+    .line:last-child {
+        border-bottom: initial;
+    }
+
 </style>