mountain-ui 1.0.156 → 1.0.158

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.156",
+	"version": "1.0.158",
 	"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.268"
+		"hamzus-ui": "^0.0.270"
 	},
 	"engines": {
 		"node": ">=18.0.0"

package/src/lib/registry/entityRegistry/components/FieldView.svelte

@@ -2,7 +2,7 @@
 	import FieldTypeView from '../../fieldTypeRegistry/components/FieldTypeView.svelte';
 	import { entityRegistry } from '../registry.svelte';
 
-	let { id, value, entityId = null, onChange = () => {}, onChangeDetails = () => {}, ...props } = $props();
+	let { id, value, entityId = null, onChange = () => {}, onChangeDetails = () => {}, hideLabel =false, ...props } = $props();
 
 	const field = $derived(entityRegistry.selectField(id, entityId));
 
@@ -14,7 +14,8 @@
 		id={$field.id}
         value={value}
 		entity_id={$field.entity_id}
-		label={$field.name}
+		label={hideLabel ? null : $field.name}
+        {...(hideLabel ? {placeholder:$field.name} : {})}
 		{...$field.props}
 		type={$field.type}
 		required={$field.is_required}

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

@@ -344,91 +344,6 @@
 				{/each}
 			{/if}
 		</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>
 
@@ -460,7 +375,7 @@
 		width: 100%;
 	}
     .table:has( .hidden) .title {
-		border-bottom: 1px solid var(--bg-blur);
+		border-bottom: 0;
     }
 
     .table-container:global( .title) {
@@ -504,7 +419,7 @@
 		display: grid;
 		grid-template-columns: repeat(var(--column-number), minmax(0, 1fr));
 		border-bottom: 1px solid var(--stroke);
-		padding-top: var(--pad-xs);
+		padding: var(--pad-xs);
 		border-radius: var(--radius-m);
 		overflow: clip;
 		border: 1px solid var(--stroke);
@@ -515,8 +430,13 @@
 		background-color: var(--red-b);
 	}
 
-	.table .body .line:global(:has(.table) .table .body .line) {
+	.table .body .line:global(:has(.table) .table .body > .line) {
 		border: 0px;
+        border-radius: 0;
+        border-bottom: 1px solid var(--bg-blur);
+	}
+	.table .body .line:global(:has(.table) .table .body > .line:last-child) {
+        border-bottom: 0;
 	}
 
 	.cell-delete {

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

@@ -6,55 +6,199 @@
 	import FieldView from '../../../entityRegistry/components/FieldView.svelte';
 	import Label from '../../components/Label.svelte';
 
-	let { value, unique, secret, label, required, columns = [] } = $props();
+	let { value, unique, secret, 
+		placeholder = '', label, required, columns = [], headerIsHidden =false, number = false, labelIsHidden= false, depth = 0 } = $props();
 
 	let entries = $state([]);
+	let isHidden = $state(false);
 
 	$effect(() => {
+		entries = value?.formated?.entries ?? {};
+
+        console.log(entries);
         
-        entries = value?.formated?.entries ?? {};
 	});
+
+    function handleToggleVisibility() {
+		isHidden = !isHidden;
+	}
 </script>
 
-<div class="title">
-	<Label {label} {required} {secret} {unique}></Label>
-</div>
-<ResponsiveTable.Root let:ctx>
-	<ResponsiveTable.Header>
-		{#if columns.length > 0}
-			{#each columns as column, columnIndex}
-				<ResponsiveTable.HeaderCell align="left" label={column.name ?? '-'} {ctx}>
-					<h6>{columns[columnIndex].name ?? ''}</h6>
-					<!-- {column.columnIndex} -->
-				</ResponsiveTable.HeaderCell>
-			{/each}
-		{/if}
-	</ResponsiveTable.Header>
-	<ResponsiveTable.Body>
-		{#each entries as line, lineIndex}
-			<ResponsiveTable.Line>
+<div class="table">
+	<div class="title">
+		<div class="right">
+			<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>
+			<Label label={label ?? placeholder} {required} {secret} {unique}></Label>
+		</div>
+	</div>
+	<div class="table-container" style="--column-number:{columns.length};" class:hidden={isHidden}>
+		{#if !headerIsHidden && columns.length > 0 && columns.find((c) => (c.name ?? false) !== false)}
+			<div class="header">
 				{#each columns as column, columnIndex}
-					<ResponsiveTable.Cell {ctx}>
-						{#each column.rows as row, rowIndex}
-                            {@const field = entityRegistry.getField(row.fieldId)}
-							<FieldView
-								compact
-								id={row.fieldId}
-                                entityId={field.entity_id}
-								value={line[field.normalized_name] ?? "null"}
-							></FieldView>
-						{/each}
-					</ResponsiveTable.Cell>
+					<div class="header-cell">
+						<h6>{columns[columnIndex].name ?? ''}</h6>
+					</div>
 				{/each}
-			</ResponsiveTable.Line>
-		{/each}
-	</ResponsiveTable.Body>
-</ResponsiveTable.Root>
+			</div>
+		{/if}
+		<div class="body">
+			{#each entries as line, lineIndex (line.id)}
+				<div class="line">
+					{#each columns as column, columnIndex}
+						<div class="cell" style="--depth:{depth};">
+							{#each column.rows as row, rowIndex}
+								{#if row.fieldId}
+                                    {@const field = entityRegistry.getField(row.fieldId)}
+									{#if number && rowIndex === 0 && columnIndex === 0}
+										<div class="cell-start">
+											<div class="number">
+												<h4>{lineIndex + 1}</h4>
+											</div>
+											<FieldView
+												hideLabel={labelIsHidden}
+												compact
+												id={row.fieldId}
+												entityId={field.entity_id}
+												value={line[field.normalized_name] ?? 'null'}
+                                                depth={depth + 1}
+											></FieldView>
+										</div>
+									{:else}
+										<FieldView
+												compact
+												hideLabel={labelIsHidden}
+												id={row.fieldId}
+												entityId={field.entity_id}
+												value={line[field.normalized_name] ?? 'null'}
+                                                depth={depth + 1}
+											></FieldView>
+									{/if}
+								{/if}
+							{/each}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
 
 <style>
-    .title {
+	.table {
+		width: 100%;
+		height: fit-content;
+	}
+
+	.table:global(:has(.table) .table) {
+		border-left: 0px;
+		border-radius: 0px;
+		border: 0px;
+		border-top: 1px solid var(--stroke);
+	}
+
+	.table:global(:has(.table) .table) .title {
+		padding-left: var(--pad-xxl);
+	}
+	.table:global(:has(.table) .table) .body {
+		padding-left: var(--pad-xxl);
+	}
+
+	.title {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		padding: var(--pad-s);
 		width: 100%;
 	}
+	.table:has(.hidden) .title {
+		border-bottom: 0;
+	}
+
+	.table-container:global( .title) {
+		background-color: var(--bg-1);
+		position: sticky;
+		top: 45px;
+		z-index: 3;
+		border-bottom: 1px solid var(--bg-blur);
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
+
+
+	.table-container.hidden {
+		display: none;
+		overflow: hidden;
+	}
+
+	.header {
+		display: grid;
+		grid-template-columns: repeat(var(--column-number), 1fr);
+		padding: var(--pad-m);
+	}
+
+	.body {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-s);
+	}
+
+	.line {
+		display: grid;
+		grid-template-columns: repeat(var(--column-number), minmax(0, 1fr));
+		border-bottom: 1px solid var(--stroke);
+		padding: var(--pad-xs);
+		border-radius: var(--radius-m);
+		overflow: clip;
+		border: 1px solid var(--stroke);
+		border-left: 3px solid var(--accent);
+	}
+
+	:global(.line:has(> .cell > .cell-delete .delete .button:hover)) {
+		background-color: var(--red-b);
+	}
+
+	.table .body .line:global(:has(.table) .table .body > .line) {
+		border: 0px;
+        border-radius: 0;
+        border-bottom: 1px solid var(--bg-blur);
+	}
+	.table .body .line:global(:has(.table) .table .body > .line:last-child) {
+        border-bottom: 0;
+	}
+
+	.cell-delete {
+		display: grid;
+		grid-template-columns: 1fr 45px;
+	}
+
+	.cell-start {
+		display: grid;
+		grid-template-columns: 24px 1fr;
+	}
+
+	.number {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.number h4 {
+		color: hsl(calc(var(--depth) * 45), 70%, 60%);
+	}
 </style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/NumberInt/Input.svelte

@@ -3,12 +3,12 @@
 	import Line from '../../../components/Line.svelte';
 	import { Input } from 'hamzus-ui';
 
-	let { label, unique = false, secret = false, compact = false, required, ...props } = $props();
+	let { label, unique = false, secret = false, compact = false, required, placeholder="un nombre entier", ...props } = $props();
 </script>
 
 <Line {compact}>
     {#if label}
 	    <Label {unique} {secret} {label} {required}></Label>
     {/if}
-	<Input {...props} type="number" step="1" placeholder="un nombre entier" {required} />
+	<Input {...props} type="number" step="1" {placeholder} {required} />
 </Line>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatDefault/View.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+        <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatPercent/View.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+        <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/number/float/NumberFloatPrice/View.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+        <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/TextTextarea/Input.svelte

@@ -17,6 +17,8 @@
 </script>
 
 <Line {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<TextArea {...props} {placeholder} bind:value {required}></TextArea>
 </Line>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharDefault/View.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+        <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharEmail/View.svelte

@@ -8,6 +8,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
     <Link href="mailto:{value?.flat ?? ""}" label={value?.flat ?? ""}/>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharPassword/View.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharPhone/View.svelte

@@ -8,6 +8,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
     <Link href="mailto:{value?.flat ?? ""}" label={value?.flat ?? ""}/>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/text/varchar/TextVarcharUrl/View.svelte

@@ -19,6 +19,8 @@
 	</div>
 </Dialog>
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null ? '-' : value.flat}</ViewText>
 </LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeFrequency/Input.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <Line {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
     <FrequencyPicker {...props} {required}></FrequencyPicker>
 </Line>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeFrequency/View.svelte

@@ -68,6 +68,8 @@
 </script>
 
 <LineView {compact}>
-	<Label {unique} {secret} {label} {required}></Label>
+	{#if label}
+	    <Label {unique} {secret} {label} {required}></Label>
+    {/if}
 	<ViewText>{value === null || !value.flat ? '-' : getText(value.flat)}</ViewText>
 </LineView>