mountain-ui 1.0.29 → 1.0.30

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeDatetime/index.js

@@ -4,6 +4,8 @@ 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: 'time-datetime',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeDay/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

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

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeDay/index.js

@@ -4,6 +4,8 @@ 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: 'time-day',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeHour/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

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

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeHour/index.js

@@ -4,6 +4,8 @@ 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: 'time-hour',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeMonth/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

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

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeMonth/index.js

@@ -4,6 +4,8 @@ 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: 'time-month',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeMonthOfYear/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

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

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeMonthOfYear/index.js

@@ -4,6 +4,8 @@ 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: 'time-month_of_year',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeUpdatedAt/TableView.svelte

@@ -0,0 +1,9 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+	import { formatDateTime } from "../formatDate";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : formatDateTime(value.flat)}</ViewText>

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

@@ -0,0 +1,13 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+	import { formatDateTime } from '../formatDate';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : formatDateTime(value.flat)}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeUpdatedAt/index.js

@@ -3,6 +3,8 @@ import { createFieldType } from '../../../createFieldType.js';
 import Icon from './Icon.svelte';
 import Button from './Button.svelte';
 import Card from './Card.svelte';
+import TableView from './TableView.svelte';
+import View from './View.svelte';
 
 export default createFieldType({
 	type: 'time-updated_at',
@@ -24,7 +26,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: null,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeYear/TableView.svelte

@@ -0,0 +1,8 @@
+<script>
+	import ViewText from "../../../components/ViewText.svelte";
+
+	let { value } = $props();
+</script>
+
+
+<ViewText>{value === null ? '-' : value.flat}</ViewText>

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

@@ -0,0 +1,12 @@
+<script>
+	import Label from '../../../components/Label.svelte';
+	import LineView from '../../../components/LineView.svelte';
+	import ViewText from '../../../components/ViewText.svelte';
+
+	let { value, compact, unique, secret, label, required } = $props();
+</script>
+
+<LineView {compact}>
+	<Label {unique} {secret} {label} {required}></Label>
+	<ViewText>{value === null ? '-' : value.flat}</ViewText>
+</LineView>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/TimeYear/index.js

@@ -4,6 +4,8 @@ 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: 'time-year',
@@ -25,7 +27,8 @@ export default createFieldType({
 		button: Button,
 		card: Card,
 		input: Input,
-		cell: null,
+		tableView: TableView,
+		view: View,
 		filter: null,
 		properties: null
 	},

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/formatDate.js

@@ -0,0 +1,155 @@
+
+export function formatDateFromTimestamp(timestamp) {
+    // Créer une instance Date à partir du timestamp
+    const date = new Date(timestamp);
+
+    // Utiliser Intl.DateTimeFormat pour formater la date
+    const formatter = new Intl.DateTimeFormat('fr-FR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false // Utiliser l'heure au format 24 heures
+    });
+
+    // Formatage de la date avec Intl.DateTimeFormat
+    const parts = formatter.formatToParts(date);
+    
+    // Extraire les différentes parties de la date
+    const year = parts.find(part => part.type === 'year').value;
+    const month = parts.find(part => part.type === 'month').value;
+    const day = parts.find(part => part.type === 'day').value;
+    const hour = parts.find(part => part.type === 'hour').value;
+    const minute = parts.find(part => part.type === 'minute').value;
+    const second = parts.find(part => part.type === 'second').value;
+
+    // Formater la date selon le format souhaité
+    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
+export function formatDate(dateOrigine) {
+    dateOrigine = new Date(dateOrigine);
+
+    // Extraction des composants de la date
+    let annee = dateOrigine.getFullYear();
+    let mois = dateOrigine.getMonth() + 1; // Les mois commencent à 0, donc ajoutez 1
+    let jour = dateOrigine.getDate();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (jour < 10 ? '0' : '') + jour + '/' +
+                       (mois < 10 ? '0' : '') + mois + '/' +
+                       annee 
+    return dateFormatee;
+}
+
+export function formatDateTime(dateOrigine) {
+    dateOrigine = new Date(convertToLocalDateTime(dateOrigine));
+
+    // Extraction des composants de la date
+    let annee = dateOrigine.getFullYear();
+    let mois = dateOrigine.getMonth() + 1; // Les mois commencent à 0, donc ajoutez 1
+    let jour = dateOrigine.getDate();
+    let heures = dateOrigine.getHours();
+    let minutes = dateOrigine.getMinutes();
+    let secondes = dateOrigine.getSeconds();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (jour < 10 ? '0' : '') + jour + '/' +
+                       (mois < 10 ? '0' : '') + mois + '/' +
+                       annee + ' à ' +
+                       (heures < 10 ? '0' : '') + heures + ':' +
+                       (minutes < 10 ? '0' : '') + minutes + ":" +
+                       (secondes < 10 ? '0' : '') + secondes;
+    return dateFormatee;
+}
+export function formatTime(dateOrigine) {
+    dateOrigine = new Date(convertToLocalDateTime(dateOrigine));
+
+    let heures = dateOrigine.getHours();
+    let minutes = dateOrigine.getMinutes();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (heures < 10 ? '0' : '') + heures + 'h' +
+                       (minutes < 10 ? '0' : '') + minutes;
+    return dateFormatee;
+}
+export function convertirSec(secondes) {
+    const heures = Math.floor(secondes / 3600);
+    let minutes = Math.floor((secondes % 3600) / 60);
+    if (heures !== 0) {
+        minutes = minutes.toString().length == 1 ? '0' + minutes : minutes
+
+        return `${heures}h${minutes}`;
+    }else{
+        return `${minutes}min`;
+    }
+}
+
+export function formatMonth(dateString) {
+    const date = new Date(dateString);
+
+    // Formatage en "mois année" (par exemple, "octobre 2024" en français)
+    const options = { year: 'numeric', month: 'long' };
+    return new Intl.DateTimeFormat('fr-FR', options).format(date);
+}
+export function timeSince(date) {
+    const now = new Date();
+    const past = new Date(convertToLocalDateTime(date));
+    const diffMs = now - past; // en millisecondes
+
+    const seconds = Math.floor(diffMs / 1000);
+    const minutes = Math.floor(diffMs / (1000 * 60));
+    const hours = Math.floor(diffMs / (1000 * 60 * 60));
+    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (seconds < 60) {
+        return `il y a ${seconds} sec`;
+    } else if (minutes < 60) {
+        return `il y a ${minutes} min`;
+    } else if (hours < 24) {
+        return `il y a ${hours} h`;
+    } else {
+        return `il y a ${days} j`;
+    }
+}
+
+export function convertToLocalDateTime(Datetime) {
+    // Convertir la chaîne en objet Date UTC
+    const utcDate = new Date(Datetime.replace(' ', 'T') + 'Z');
+    
+    // Extraire les composants de la date locale
+    const year = utcDate.getFullYear();
+    const month = String(utcDate.getMonth() + 1).padStart(2, '0'); // Mois de 0 à 11, on ajoute donc 1
+    const day = String(utcDate.getDate()).padStart(2, '0');
+    
+    // Extraire les composants de l'heure locale
+    const hours = String(utcDate.getHours()).padStart(2, '0');
+    const minutes = String(utcDate.getMinutes()).padStart(2, '0');
+    const seconds = String(utcDate.getSeconds()).padStart(2, '0');
+    
+    // Formater la date et l'heure en YYYY-MM-DD HH:mm:SS
+    const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    
+    return localDateTime;
+}
+export function convertToLocalDateTimeForDateTime(Datetime) {
+    // Convertir la chaîne en objet Date UTC
+    const utcDate = new Date(Datetime.replace(' ', 'T') + 'Z');
+    
+    // Extraire les composants de la date locale
+    const year = utcDate.getFullYear();
+    const month = String(utcDate.getMonth() + 1).padStart(2, '0'); // Mois de 0 à 11, on ajoute donc 1
+    const day = String(utcDate.getDate()).padStart(2, '0');
+    
+    // Extraire les composants de l'heure locale
+    const hours = String(utcDate.getHours()).padStart(2, '0');
+    const minutes = String(utcDate.getMinutes()).padStart(2, '0');
+    
+    // Formater la date et l'heure en YYYY-MM-DD HH:mm:SS
+    const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;
+    
+    return localDateTime;
+}
+

package/src/lib/registry/viewTypeRegistry/components/ViewTypeButton.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Button } from 'hamzus-ui';
+	import { viewTypeRegistry } from '../registry.svelte';
+
+	let { type, variant = 'ghost', ...props } = $props();
+
+	const viewType = viewTypeRegistry.get(type);
+</script>
+
+{#if viewType}
+	<Button {...props} {variant} style="padding:var(--pad-s) var(--pad-l) var(--pad-s) var(--pad-s);width:100%;">
+        <div class="ico">
+            <svelte:component this={viewType.components.icon}></svelte:component>
+        </div>
+		<h5>{viewType.name}</h5>
+	</Button>
+{/if}
+
+<style>
+    .ico {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/src/lib/registry/viewTypeRegistry/components/ViewTypeComponent.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Button, RotativeLoader } from 'hamzus-ui';
+	import { viewTypeRegistry } from '../registry.svelte';
+
+	let { type, ...props } = $props();
+
+	const viewType = viewTypeRegistry.get(type);
+
+    console.log(viewType);
+    
+</script>
+
+{#if viewType}
+	<svelte:component this={viewType.components.component} {...props}></svelte:component>
+{:else}
+<div class="loader">
+    <RotativeLoader></RotativeLoader>
+</div>
+{/if}
+
+<style>
+
+    .loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 60px var(--pad-m);
+    }
+</style>
+

package/src/lib/registry/viewTypeRegistry/createViewType.js

@@ -0,0 +1,17 @@
+export function createViewType(config = {}) {
+	const viewType = {
+		type:"",
+		name:"",
+		description:"",
+        components : {
+            component:null,
+            icon:null,
+        }
+	};
+
+	Object.assign(viewType, config);
+
+	// viewType.get = () => "test";
+
+	return viewType;
+}

package/src/lib/registry/viewTypeRegistry/registerDefaultViewTypes.js

@@ -0,0 +1,7 @@
+import { viewTypeRegistry } from './registry.svelte';
+import Table from './viewTypes/Table';
+
+
+export function registerDefaultViewTypes() {
+	viewTypeRegistry.register(Table)
+}

package/src/lib/registry/viewTypeRegistry/registry.svelte.js

@@ -0,0 +1,44 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createViewTypeRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($viewTypes) => Object.values($viewTypes));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(viewType) {
+			store.update((viewTypes) => ({
+				...viewTypes,
+				[viewType.type]: viewType
+			}));
+		},
+
+		unregister(type) {
+			store.update((viewTypes) => {
+				const copy = { ...viewTypes };
+
+				delete copy[type];
+
+				return copy;
+			});
+		},
+
+		get(type) {
+			return get(store)[type];
+		},
+
+		select(type) {
+			return derived(store, ($viewTypes) => $viewTypes[type]);
+		},
+
+		
+
+		getAll() {
+			return all;
+		}
+	};
+}
+
+export const viewTypeRegistry = createViewTypeRegistry();

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/Icon.svelte

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4.1 11L19.9 11C21.4 11 22 10.36 22 8.77L22 4.73C22 3.14 21.4 2.5 19.9 2.5L4.1 2.5C2.6 2.5 2 3.14 2 4.73L2 8.77C2 10.36 2.6 11 4.1 11Z"
+		fill="#00C0E8"
+	/>
+	<path
+		opacity="0.4"
+		d="M13.1 21.5L19.9 21.5C21.4 21.5 22 20.86 22 19.27L22 15.23C22 13.64 21.4 13 19.9 13L13.1 13C11.6 13 11 13.64 11 15.23L11 19.27C11 20.86 11.6 21.5 13.1 21.5Z"
+		fill="#00C0E8"
+	/>
+	<path
+		opacity="0.4"
+		d="M4.1 21.5L6.9 21.5C8.4 21.5 9 20.86 9 19.27L9 15.23C9 13.64 8.4 13 6.9 13L4.1 13C2.6 13 2 13.64 2 15.23L2 19.27C2 20.86 2.6 21.5 4.1 21.5Z"
+		fill="#00C0E8"
+	/>
+</svg>

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/component/Component copy.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { page } from '$app/stores';
+	import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
+	import StructureTable from './StructureTable.svelte';
+
+	let { structureId = 0, columns = [], defaultProps = null, ...props } = $props();
+</script>
+
+<StructureTable bind:defaultProps structureColumns={columns} {structureId} {...props}>
+	<slot slot="actions" name="actions"></slot>
+</StructureTable>

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/component/Component.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { page } from '$app/stores';
+	import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
+	import StructureTable from './StructureTable.svelte';
+
+	let { entityId, ...props } = $props();
+
+</script>
+
+<StructureTable {entityId} {...props}>
+	<slot slot="actions" name="actions"></slot>
+</StructureTable>