mountain-ui 1.0.137 → 1.0.138

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.137",
+	"version": "1.0.138",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Button.svelte

@@ -0,0 +1,8 @@
+<script>
+	import FieldTypeButton from '../../FieldTypeButton.svelte';
+	import Icon from './Icon.svelte';
+
+	let { ...props } = $props();
+</script>
+
+<FieldTypeButton {...props}></FieldTypeButton>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Card.svelte

@@ -0,0 +1,6 @@
+<script>
+	import FieldCard from '../../FieldTypeCard.svelte';
+	let { ...props } = $props();
+</script>
+
+<FieldCard {...props}></FieldCard>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Icon.svelte

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"
+		fill="#292D32"
+	/>
+	<path
+		d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z"
+		fill="#292D32"
+	/>
+</svg>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/ImageUpload.svelte

@@ -0,0 +1,120 @@
+<script>
+	import { AlertCard, Button, sendRequest, toast } from 'hamzus-ui';
+	import { projectRegistry } from 'mountain-ui';
+
+	// URL de base de ton API (à adapter)
+    let {
+        onChange = (fileId) => {},
+        fileId = null
+    } = $props()
+
+	let fileInput;
+	let imageUrl = null;
+	let isUploading = $state(false);
+	let errorMessage = $state(null);
+
+	async function handleFileChange(event) {
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		errorMessage = null;
+		fileId = null;
+		imageUrl = null;
+		isUploading = true;
+
+		const request = await sendRequest({
+			path: '/upload-image',
+			data: {
+				file
+			}
+		});
+
+		if (request.statusType === 'error') {
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+
+		fileId = request.data.id;
+
+		isUploading = false;
+
+		onChange(fileId);
+	}
+
+	function resetInput() {
+		fileId = null;
+		imageUrl = null;
+		errorMessage = null;
+		if (fileInput) fileInput.value = '';
+
+		onChange(null);
+	}
+	function openFilePicker() {
+		fileInput.click();
+	}
+</script>
+
+<div class="upload-container">
+	<input
+		type="file"
+		accept="image/*"
+		bind:this={fileInput}
+		on:change={handleFileChange}
+		disabled={isUploading}
+		style="display: none;"
+	/>
+
+	<Button onClick={openFilePicker} loading={isUploading} variant="secondary" style="width:100%;">
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0005 13.9001V16.1901C22.0005 19.8301 19.8305 22.0001 16.1905 22.0001H7.81055C5.26055 22.0001 3.42055 20.9301 2.56055 19.0301L2.67055 18.9501L7.59055 15.6501C8.39055 15.1101 9.52055 15.1701 10.2305 15.7901L10.5705 16.0701C11.3505 16.7401 12.6105 16.7401 13.3905 16.0701L17.5505 12.5001C18.3305 11.8301 19.5905 11.8301 20.3705 12.5001L22.0005 13.9001Z" fill="#292D32"/>
+<path opacity="0.4" d="M20.97 8H18.03C16.76 8 16 7.24 16 5.97V3.03C16 2.63 16.08 2.29 16.22 2C16.21 2 16.2 2 16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03L2.67 18.95L7.59 15.65C8.39 15.11 9.52 15.17 10.23 15.79L10.57 16.07C11.35 16.74 12.61 16.74 13.39 16.07L17.55 12.5C18.33 11.83 19.59 11.83 20.37 12.5L22 13.9V7.81C22 7.8 22 7.79 22 7.78C21.71 7.92 21.37 8 20.97 8Z" fill="#292D32"/>
+<path d="M8.99914 10.3801C10.3136 10.3801 11.3791 9.31456 11.3791 8.00012C11.3791 6.68568 10.3136 5.62012 8.99914 5.62012C7.6847 5.62012 6.61914 6.68568 6.61914 8.00012C6.61914 9.31456 7.6847 10.3801 8.99914 10.3801Z" fill="#292D32"/>
+<path d="M20.97 8H18.03C16.76 8 16 7.24 16 5.97V3.03C16 1.76 16.76 1 18.03 1H20.97C22.24 1 23 1.76 23 3.03V5.97C23 7.24 22.24 8 20.97 8ZM21.19 4.69C21.07 4.57 20.91 4.51 20.75 4.51C20.59 4.51 20.43 4.57 20.31 4.69L20.13 4.87V2.63C20.13 2.28 19.85 2 19.5 2C19.15 2 18.87 2.28 18.87 2.63V4.87L18.69 4.69C18.45 4.45 18.05 4.45 17.81 4.69C17.57 4.93 17.57 5.33 17.81 5.57L19.06 6.82C19.11 6.87 19.18 6.91 19.25 6.94C19.27 6.95 19.29 6.95 19.31 6.96C19.36 6.98 19.41 6.99 19.47 6.99C19.49 6.99 19.51 6.99 19.53 6.99C19.6 6.99 19.66 6.98 19.73 6.95C19.74 6.95 19.74 6.95 19.75 6.95C19.82 6.92 19.88 6.88 19.93 6.83C19.94 6.82 19.94 6.82 19.95 6.82L21.2 5.57C21.44 5.33 21.44 4.93 21.19 4.69Z" fill="#292D32"/>
+</svg>
+
+
+		<h5>attacher une image</h5>
+	</Button>
+
+	{#if errorMessage}
+		<AlertCard>{errorMessage}</AlertCard>
+	{/if}
+
+	{#if fileId}
+		<div class="preview">
+			<img src="{import.meta.env.VITE_API_URL}/get-image?__project_normalized_name={projectRegistry.getTargetProject().normalized_name}&fileId={fileId}" alt="Fichier uploadé" />
+			<Button variant="ghost" style="width:100%;" onClick={resetInput}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M20.46 3.54L3.54 20.46C2.54 19.46 2 18.01 2 16.19V7.81C2 4.17 4.17 2 7.81 2H16.19C18.01 2 19.46 2.54 20.46 3.54Z" fill="#292D32"/>
+<path opacity="0.4" d="M21.9993 7.81014V13.9001L20.3693 12.5001C19.5893 11.8301 18.3293 11.8301 17.5493 12.5001L13.3893 16.0701C12.6793 16.6801 11.5593 16.7401 10.7793 16.2201L21.6093 5.39014C21.7493 5.77014 21.8493 6.17014 21.9093 6.60014C21.9693 6.98014 21.9993 7.39014 21.9993 7.81014Z" fill="#292D32"/>
+<path d="M22.0006 13.9001V16.1901C22.0006 19.8301 19.8306 22.0001 16.1906 22.0001H7.81063C7.39062 22.0001 6.98063 21.9701 6.60063 21.9101C6.17063 21.8501 5.77062 21.7501 5.39062 21.6101L10.7806 16.2201C11.5606 16.7401 12.6806 16.6801 13.3906 16.0701L17.5506 12.5001C18.3306 11.8301 19.5906 11.8301 20.3706 12.5001L22.0006 13.9001Z" fill="#292D32"/>
+<path d="M21.7709 2.22988C21.4709 1.92988 20.9809 1.92988 20.6809 2.22988L2.23086 20.6899C1.93086 20.9899 1.93086 21.4799 2.23086 21.7799C2.38086 21.9199 2.57086 21.9999 2.77086 21.9999C2.97086 21.9999 3.16086 21.9199 3.31086 21.7699L21.7709 3.30988C22.0809 3.00988 22.0809 2.52988 21.7709 2.22988Z" fill="#292D32"/>
+<path d="M7.99914 10.3801C9.31358 10.3801 10.3791 9.31456 10.3791 8.00012C10.3791 6.68568 9.31358 5.62012 7.99914 5.62012C6.6847 5.62012 5.61914 6.68568 5.61914 8.00012C5.61914 9.31456 6.6847 10.3801 7.99914 10.3801Z" fill="#292D32"/>
+</svg>
+
+
+				<h5>déttacher</h5>
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.upload-container {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-s);
+		padding: var(--pad-s);
+		border-radius: var(--radius-l);
+		border: 1px solid var(--bg-2);
+	}
+
+	img {
+		max-width: 100%;
+		border-radius: 8px;
+		border: 1px solid var(--stroke);
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Input.svelte

@@ -0,0 +1,206 @@
+<script>
+	import { projectRegistry } from '$lib/registry/projectRegistry/registry.svelte';
+	import Label from '../../../components/Label.svelte';
+	import Line from '../../../components/Line.svelte';
+	import { Button, DropdownMenu, IconButton, Tag } from 'hamzus-ui';
+
+	let {
+		value = $bindable(''),
+		onChange = () => {},
+		name = '',
+		label = '',
+		compact = false,
+		unique = false,
+		secret = false,
+		required = false,
+		...props
+	} = $props();
+
+	const files = $derived(JSON.parse(value));
+
+	const targetProject = projectRegistry.getTargetProject();
+
+	let fileInput;
+
+	let isUploading = $state(false);
+
+	async function handleFileChange(event) {
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		isUploading = true;
+
+		const request = await sendRequest({
+			path: '/upload-image',
+			data: {
+				file
+			}
+		});
+
+		if (request.statusType === 'error') {
+			isUploading = false;
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+
+		fileId = request.data.id;
+
+		isUploading = false;
+
+        addFieldId(fileId)
+	}
+
+	function addFieldId(fieldId) {
+		let decodedValue = JSON.parse(value ?? '[]');
+
+		if (decodedValue.includes(fieldId)) {
+			return;
+		}
+
+		decodedValue.push(fieldId);
+
+		value = JSON.stringify(decodedValue);
+
+        onChange(value)
+	}
+
+	function removeFieldId(fieldId) {
+		let decodedValue = JSON.parse(value ?? '[]');
+
+		decodedValue = decodedValue.filter((fID) => fID !== fieldId);
+
+		value = JSON.stringify(decodedValue);
+
+        onChange(value)
+	}
+
+	function openFilePicker() {
+		fileInput.click();
+	}
+
+    function resetInput(params) {
+        value = "[]"
+
+        if (fileInput) fileInput.value = '';
+
+		onChange(null);
+    }
+</script>
+
+<Line {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<div class="choices">
+		<input
+			type="file"
+			accept="image/*"
+			bind:this={fileInput}
+			on:change={handleFileChange}
+			disabled={isUploading}
+			style="display: none;"
+		/>
+
+		<div class="images">
+			{#each files as fileId}
+				<div class="image">
+					<img
+						src="{import.meta.env
+							.VITE_API_URL}/get-image?__project_normalized_name={targetProject.normalized_name}&fileId={fileId}"
+					/>
+					<IconButton onClick={()=>{removeFieldId(fileId)}} loading={isUploading} variant="secondary" size="24px">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M20.46 3.54L3.54 20.46C2.54 19.46 2 18.01 2 16.19V7.81C2 4.17 4.17 2 7.81 2H16.19C18.01 2 19.46 2.54 20.46 3.54Z" fill="#292D32"/>
+<path opacity="0.4" d="M21.9993 7.81014V13.9001L20.3693 12.5001C19.5893 11.8301 18.3293 11.8301 17.5493 12.5001L13.3893 16.0701C12.6793 16.6801 11.5593 16.7401 10.7793 16.2201L21.6093 5.39014C21.7493 5.77014 21.8493 6.17014 21.9093 6.60014C21.9693 6.98014 21.9993 7.39014 21.9993 7.81014Z" fill="#292D32"/>
+<path d="M22.0006 13.9001V16.1901C22.0006 19.8301 19.8306 22.0001 16.1906 22.0001H7.81063C7.39062 22.0001 6.98063 21.9701 6.60063 21.9101C6.17063 21.8501 5.77062 21.7501 5.39062 21.6101L10.7806 16.2201C11.5606 16.7401 12.6806 16.6801 13.3906 16.0701L17.5506 12.5001C18.3306 11.8301 19.5906 11.8301 20.3706 12.5001L22.0006 13.9001Z" fill="#292D32"/>
+<path d="M21.7709 2.22988C21.4709 1.92988 20.9809 1.92988 20.6809 2.22988L2.23086 20.6899C1.93086 20.9899 1.93086 21.4799 2.23086 21.7799C2.38086 21.9199 2.57086 21.9999 2.77086 21.9999C2.97086 21.9999 3.16086 21.9199 3.31086 21.7699L21.7709 3.30988C22.0809 3.00988 22.0809 2.52988 21.7709 2.22988Z" fill="#292D32"/>
+<path d="M7.99914 10.3801C9.31358 10.3801 10.3791 9.31456 10.3791 8.00012C10.3791 6.68568 9.31358 5.62012 7.99914 5.62012C6.6847 5.62012 5.61914 6.68568 5.61914 8.00012C5.61914 9.31456 6.6847 10.3801 7.99914 10.3801Z" fill="#292D32"/>
+</svg>
+                    </IconButton>
+				</div>
+			{/each}
+			<Button
+				onClick={openFilePicker}
+				loading={isUploading}
+				variant="secondary"
+				style="width:100%;"
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M22.0005 13.9001V16.1901C22.0005 19.8301 19.8305 22.0001 16.1905 22.0001H7.81055C5.26055 22.0001 3.42055 20.9301 2.56055 19.0301L2.67055 18.9501L7.59055 15.6501C8.39055 15.1101 9.52055 15.1701 10.2305 15.7901L10.5705 16.0701C11.3505 16.7401 12.6105 16.7401 13.3905 16.0701L17.5505 12.5001C18.3305 11.8301 19.5905 11.8301 20.3705 12.5001L22.0005 13.9001Z"
+						fill="#292D32"
+					/>
+					<path
+						opacity="0.4"
+						d="M20.97 8H18.03C16.76 8 16 7.24 16 5.97V3.03C16 2.63 16.08 2.29 16.22 2C16.21 2 16.2 2 16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03L2.67 18.95L7.59 15.65C8.39 15.11 9.52 15.17 10.23 15.79L10.57 16.07C11.35 16.74 12.61 16.74 13.39 16.07L17.55 12.5C18.33 11.83 19.59 11.83 20.37 12.5L22 13.9V7.81C22 7.8 22 7.79 22 7.78C21.71 7.92 21.37 8 20.97 8Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M8.99914 10.3801C10.3136 10.3801 11.3791 9.31456 11.3791 8.00012C11.3791 6.68568 10.3136 5.62012 8.99914 5.62012C7.6847 5.62012 6.61914 6.68568 6.61914 8.00012C6.61914 9.31456 7.6847 10.3801 8.99914 10.3801Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M20.97 8H18.03C16.76 8 16 7.24 16 5.97V3.03C16 1.76 16.76 1 18.03 1H20.97C22.24 1 23 1.76 23 3.03V5.97C23 7.24 22.24 8 20.97 8ZM21.19 4.69C21.07 4.57 20.91 4.51 20.75 4.51C20.59 4.51 20.43 4.57 20.31 4.69L20.13 4.87V2.63C20.13 2.28 19.85 2 19.5 2C19.15 2 18.87 2.28 18.87 2.63V4.87L18.69 4.69C18.45 4.45 18.05 4.45 17.81 4.69C17.57 4.93 17.57 5.33 17.81 5.57L19.06 6.82C19.11 6.87 19.18 6.91 19.25 6.94C19.27 6.95 19.29 6.95 19.31 6.96C19.36 6.98 19.41 6.99 19.47 6.99C19.49 6.99 19.51 6.99 19.53 6.99C19.6 6.99 19.66 6.98 19.73 6.95C19.74 6.95 19.74 6.95 19.75 6.95C19.82 6.92 19.88 6.88 19.93 6.83C19.94 6.82 19.94 6.82 19.95 6.82L21.2 5.57C21.44 5.33 21.44 4.93 21.19 4.69Z"
+						fill="#292D32"
+					/>
+				</svg>
+
+				<h5>attacher une image</h5>
+			</Button>
+		</div>
+	</div>
+</Line>
+
+<style>
+	.choices {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-m);
+		background-color: var(--bg-2);
+		border-radius: var(--radius-m);
+	}
+
+	.choices:has(input:user-invalid) {
+		border: 1px solid var(--red);
+	}
+
+	.images {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-xs);
+		width: 100%;
+		padding: var(--pad-s);
+		border: 1px solid var(--stroke);
+		border-radius: var(--radius-m);
+	}
+
+	.image {
+		display: flex;
+		align-items: center;
+		height: 34px;
+		width: 100%;
+		column-gap: var(--pad-m);
+		padding: var(--pad-xs);
+		border-radius: var(--radius-l);
+	}
+
+	.image:hover {
+		background-color: var(--bg-blur);
+	}
+
+	.image img {
+		height: 26px;
+		width: 100%;
+		object-fit: cover;
+		border-radius: var(--radius-xl);
+		overflow: clip;
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/TableView.svelte

@@ -0,0 +1,13 @@
+<script>
+	import ViewText from '../../../components/ViewText.svelte';
+	import { Tag } from 'hamzus-ui';
+
+	let {value, choices} = $props()
+</script>
+
+{#if value && value.formated}
+	{@const data = choices.filter((el) => el.value === value.formated)[0]}
+	<Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
+{:else}
+    <ViewText>-</ViewText>
+{/if}

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/View.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+	import { Tag } from 'hamzus-ui';
+
+	let {value, choices, compact, unique, secret, label, required } = $props()
+</script>
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+{#if value && value.formated}
+	{@const data = choices.filter((el) => el.value === value.formated)[0]}
+	<Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
+{:else}
+    <ViewText>-</ViewText>
+{/if}
+
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/index.js

@@ -0,0 +1,43 @@
+import { createFieldType } from '../../../createFieldType.js';
+
+import Icon from './Icon.svelte';
+import Button from './Button.svelte';
+import Card from './Card.svelte';
+import Input from './Input.svelte';
+import TableView from './TableView.svelte';
+import View from './View.svelte';
+
+export default createFieldType({
+	type: 'files-image',
+
+	category_path: 'files',
+
+	label: 'Images',
+	description: 'Images multiple.',
+
+	is_hidden: false,
+
+	defaultProps: {},
+
+	can_be_required: false,
+	can_be_unique: false,
+
+	components: {
+		icon: Icon,
+		button: Button,
+		card: Card,
+		input: Input,
+		tableView: TableView,
+		view: View,
+		filter: null,
+		properties: null
+	},
+
+    tableAttributes: (props) => {},
+
+    allowBindings:["files-image"],
+	formatter: (value) => value,
+	parser: (value) => value,
+
+	validate: () => true
+});

package/src/lib/registry/fieldTypeRegistry/registerDefaultFieldTypes.js

@@ -28,6 +28,7 @@ import TimeCreatedAt from './fieldTypes/time/TimeCreatedAt';
 import TimeHour from './fieldTypes/time/TimeHour';
 import MoneyCurrency from './fieldTypes/money/MoneyCurrency';
 import LocalisationLand from './fieldTypes/localisation/LocalisationLand';
+import FilesImage from './fieldTypes/files/FilesImage';
 
 let isLoaded = false;
 
@@ -76,6 +77,9 @@ export function registerDefaultFieldTypes() {
     
     // localisation
 	fieldTypeRegistry.register(LocalisationLand);
+    
+    // files
+	fieldTypeRegistry.register(FilesImage);
 
     isLoaded = true
 }