mountain-ui 1.0.109 → 1.0.111

package/src/lib/registry/widgetGroupRegistry/components/NewWidgetGroup.svelte

@@ -0,0 +1,122 @@
+<script>
+	import { IconButton } from 'hamzus-ui';
+
+    let {onCreate = (numberColumn) =>{}} = $props()
+</script>
+
+<div class="group">
+    <h4>Nouvelle rangée</h4>
+	<div class="btn">
+		<IconButton onClick={()=>{onCreate(1)}} size="48px" style="border-radius:var(--radius-l);" variant="outline">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M19.9 7.75H4.1C2.6 7.75 2 8.39 2 9.98V14.02C2 15.61 2.6 16.25 4.1 16.25H19.9C21.4 16.25 22 15.61 22 14.02V9.98C22 8.39 21.4 7.75 19.9 7.75Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(2)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					opacity="0.4"
+					d="M13.5 4.1V19.9C13.5 21.4 14.14 22 15.73 22H19.77C21.36 22 22 21.4 22 19.9V4.1C22 2.6 21.36 2 19.77 2H15.73C14.14 2 13.5 2.6 13.5 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M2 4.1V19.9C2 21.4 2.64 22 4.23 22H8.27C9.86 22 10.5 21.4 10.5 19.9V4.1C10.5 2.6 9.86 2 8.27 2H4.23C2.64 2 2 2.6 2 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(3)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M2 4.1V19.9C2 21.4 2.45147 22 3.57309 22H6.423C7.54462 22 7.99609 21.4 7.99609 19.9V4.1C7.99609 2.6 7.54462 2 6.423 2H3.57309C2.45147 2 2 2.6 2 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M9.00195 4.1V19.9C9.00195 21.4 9.45342 22 10.575 22H13.425C14.5466 22 14.998 21.4 14.998 19.9V4.1C14.998 2.6 14.5466 2 13.425 2H10.575C9.45342 2 9.00195 2.6 9.00195 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M16.0039 4.1V19.9C16.0039 21.4 16.4554 22 17.577 22H20.4269C21.5485 22 22 21.4 22 19.9V4.1C22 2.6 21.5485 2 20.4269 2H17.577C16.4554 2 16.0039 2.6 16.0039 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(4)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M2.21875 4.1V19.9C2.21875 21.4 2.51366 22 3.24633 22H5.10795C5.84062 22 6.13553 21.4 6.13553 19.9V4.1C6.13553 2.6 5.84062 2 5.10795 2H3.24633C2.51366 2 2.21875 2.6 2.21875 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M7.43359 4.1V19.9C7.43359 21.4 7.7285 22 8.46117 22H10.3228C11.0555 22 11.3504 21.4 11.3504 19.9V4.1C11.3504 2.6 11.0555 2 10.3228 2H8.46117C7.7285 2 7.43359 2.6 7.43359 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M12.6484 4.1V19.9C12.6484 21.4 12.9433 22 13.676 22H15.5376C16.2703 22 16.5652 21.4 16.5652 19.9V4.1C16.5652 2.6 16.2703 2 15.5376 2H13.676C12.9433 2 12.6484 2.6 12.6484 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M17.8652 4.1V19.9C17.8652 21.4 18.1601 22 18.8928 22H20.7544C21.4871 22 21.782 21.4 21.782 19.9V4.1C21.782 2.6 21.4871 2 20.7544 2H18.8928C18.1601 2 17.8652 2.6 17.8652 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	</div>
+</div>
+
+<style>
+	.group {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: var(--pad-m);
+		padding: 50px var(--pad-xl);
+		border-radius: var(--radius-xl);
+        background-color: var(--bg-blur);
+        border: 5px solid var(--bg-1);
+		outline: 1px solid var(--bg-2);
+		transition: outline 0.2s ease-out;
+		width: 100%;
+	}
+
+	.group:hover {
+		outline: 1px solid var(--stroke);
+	}
+
+    .btn {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+</style>

package/src/lib/registry/widgetGroupRegistry/components/WidgetGroup.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { handlers } from 'svelte/legacy';
+	import EmptySlot from './EmptySlot.svelte';
+	import CreateWidgetDialog from '$lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte';
+	import { sendRequest, toast } from 'hamzus-ui';
+	import { registerWidgetGroups } from '../registerWidgetGroups';
+	import { widgetGroupRegistry } from '../registry.svelte';
+	import Widget from '$lib/registry/widgetTypeRegistry/components/Widget.svelte';
+
+	let { id = null, numberOfColumn = 1, children = [] } = $props();
+
+    const group = $derived(widgetGroupRegistry.get(id))
+</script>
+
+{#if group && group.children && group.children.length > 0}    
+    <div class="group-container" style="grid-template-columns:repeat({numberOfColumn}, minmax(0, 1fr));">
+        {#each Array.from({ length: numberOfColumn }) as column, index}
+            {const child = group.getChild(index + 1)}
+            {#if child}
+                <Widget type={child.type} {...child.props}></Widget>
+            {:else}
+                <div class="empty">
+
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}
+
+<style>
+	.group-container {
+		width: 100%;
+		display: grid;
+		padding: var(--pad-xl);
+		column-gap: var(--pad-m);
+		min-height: 150px;
+		transition: border 0.2s ease-out;
+	}
+</style>

package/src/lib/registry/widgetGroupRegistry/createWidget.js

@@ -0,0 +1,17 @@
+
+
+export function createWidget(config = {}) {
+    const widget = {
+        id: null,
+        group_id:null,
+        position:1,
+        type:null,
+        title:"",
+        props:{},
+    };
+
+    Object.assign(widget, config);
+
+
+    return widget;
+}

package/src/lib/registry/widgetGroupRegistry/createWidgetGroup.js

@@ -0,0 +1,19 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetGroupRegistry } from "./registry.svelte";
+
+export function createWidgetGroup(config = {}) {
+    const widgetGroup = {
+        id: null,
+        column_number:1,
+        position:1,
+        children:[],
+    };
+
+    Object.assign(widgetGroup, config);
+
+    widgetGroup.getChild = (position) =>{
+        return widgetGroup.children.find(c=>c.position === position)
+    }
+
+    return widgetGroup;
+}

package/src/lib/registry/widgetGroupRegistry/registerWidgetGroups.js

@@ -0,0 +1,37 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetGroupRegistry } from "./registry.svelte";
+import { createWidgetGroup } from "./createWidgetGroup";
+import { createWidget } from "./createWidget";
+
+
+export async function registerWidgetGroups() {
+
+    widgetGroupRegistry.unregisterAll()
+
+    const request = await sendRequest({
+        path:"/get-all-widget-groups",
+    })
+    
+    for (const group of request.data) {
+        let config = {
+            id: group.id,
+            column_number:group.column_number,
+            position:group.position,
+            children:[]
+        }
+
+        for (const child of group.children) {
+            config.children.push(createWidget({
+                id:child.id,
+                group_id:child.group_id,
+                position:child.position,
+                type:child.type,
+                title:child.title,
+                props:child.props,
+            }))
+            
+        }
+        widgetGroupRegistry.register(createWidgetGroup(config))
+
+    }
+}

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

@@ -0,0 +1,47 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createWidgetGroupRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($widgetGroups) => Object.values($widgetGroups));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(widgetGroup) {
+			store.update((widgetGroups) => ({
+				...widgetGroups,
+				[widgetGroup.id]: widgetGroup
+			}));
+		},
+
+		unregisterAll() {
+			store.update((widgetGroups) => {
+				return {};
+			});
+		},
+		unregister(id) {
+			store.update((widgetGroups) => {
+				const copy = { ...widgetGroups };
+
+				delete copy[id];
+
+				return copy;
+			});
+		},
+
+		get(id) {
+			return get(store)[id];
+		},
+
+		select(id) {
+			return derived(store, ($widgetGroups) => $widgetGroups[id]);
+		},
+
+		getAll() {
+			return all;
+		},
+	};
+}
+
+export const widgetGroupRegistry = createWidgetGroupRegistry();

package/src/lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { AlertCard, Button, Dialog } from "hamzus-ui";
+	import WidgetTypeSelector from "./WidgetTypeSelector.svelte";
+	import WidgetConfig from "./WidgetConfig.svelte";
+
+    let {isOpen = $bindable(false), save = ()=>{}, ...props} = $props()
+
+    let type = $state(null)
+
+    async function handleSave(data) {
+        await save(data)
+
+        isOpen = false
+    }
+</script>
+
+<Dialog bind:isOpen>
+    <div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+        <h3>Créer un nouveau widget</h3>
+        <WidgetTypeSelector onChange={(newType)=>{type = newType}}></WidgetTypeSelector>
+        {#if type}
+            <WidgetConfig save={handleSave} {type}></WidgetConfig>
+        {/if}
+    </div>
+</Dialog>

package/src/lib/registry/widgetTypeRegistry/components/Widget.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {type, ...props} = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+</script>
+
+<div class="widget-case">
+    <svelte:component this={widgetType.components.component} {...props}></svelte:component>
+</div>
+
+<style>
+    .widget-case {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/src/lib/registry/widgetTypeRegistry/components/WidgetConfig.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {type, save = (data)=>{}, ...props} = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+
+    function handleSave(data) {
+        save({
+            ...data,
+            type:widgetType.type
+        })
+    }
+</script>
+
+<svelte:component this={widgetType.components.config} save={handleSave}  {...props}></svelte:component>

package/src/lib/registry/widgetTypeRegistry/components/WidgetPreview.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { IconButton } from 'hamzus-ui';
+	import { widgetTypeRegistry } from '../registry.svelte';
+
+	let { type, onDelete = () => {}, ...props } = $props();
+
+	const widgetType = $derived(widgetTypeRegistry.get(type));
+</script>
+
+<div class="widget-case">
+	<svelte:component this={widgetType.components.component} {...props}></svelte:component>
+	<div class="btn">
+		<IconButton variant="secondary" onClick={onDelete}>
+			<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>
+</div>
+
+<style>
+	.widget-case {
+		width: 100%;
+		height: 100%;
+        position: relative;
+	}
+
+    .btn {
+        position: absolute;
+        top: var(--pad-s);
+        right: var(--pad-s);
+        z-index: 3;
+    }
+</style>

package/src/lib/registry/widgetTypeRegistry/components/WidgetTypeButton.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { Button } from "hamzus-ui";
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {
+        type="",
+        style="",
+        variant="ghost",
+        ...props
+    } = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+</script>
+
+
+<Button {variant} style="width:100%;{style}" {...props}>
+    <h5>{widgetType.name}</h5>
+</Button>
+
+

package/src/lib/registry/widgetTypeRegistry/components/WidgetTypeSelector.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { Button, DropdownMenu } from 'hamzus-ui';
+	import { widgetTypeRegistry } from '../registry.svelte';
+	import WidgetTypeButton from './WidgetTypeButton.svelte';
+
+	let { value = $bindable(null), onChange = (type) => {} } = $props();
+
+	const widgetTypes = widgetTypeRegistry.getAll();
+
+	function handleClick(type) {
+		value = type;
+		onChange(type);
+	}
+</script>
+
+<DropdownMenu.Root direction="bottom">
+	<DropdownMenu.Trigger slot="trigger">
+		<Button variant="secondary">
+			{#if value}
+				{@const widgetType = widgetTypeRegistry.get(value)}
+				<h5>{widgetType.name}</h5>
+			{:else}
+				<h5>séléctionner</h5>
+			{/if}
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content slot="content" width="250px">
+		{#each $widgetTypes as widgetType}
+			<WidgetTypeButton type={widgetType.type} onClick={() => {handleClick(widgetType.type)}}></WidgetTypeButton>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/lib/registry/widgetTypeRegistry/createWidgetType.js

@@ -0,0 +1,20 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetTypeRegistry } from "./registry.svelte";
+
+export function createWidgetType(config = {}) {
+    const widgetType = {
+        type: null,
+        name: null,
+        default_props:{},
+        components:{
+            config:null,
+            preview:null,
+            component:null,
+        }
+    };
+
+    Object.assign(widgetType, config);
+
+
+    return widgetType;
+}

package/src/lib/registry/widgetTypeRegistry/registerWidgetTypes.js

@@ -0,0 +1,14 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetTypeRegistry } from "./registry.svelte";
+import Bar from "./widgetTypes/Bar";
+import Evolution from "./widgetTypes/Evolution";
+import KPI from "./widgetTypes/KPI";
+import List from "./widgetTypes/List";
+
+
+export async function registerWidgetTypes() {
+    widgetTypeRegistry.register(Bar)
+    widgetTypeRegistry.register(Evolution)
+    widgetTypeRegistry.register(KPI)
+    widgetTypeRegistry.register(List)
+}

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

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

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/Bar.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { ChartBar, ChartLine, sendRequest, Skeleton } from 'hamzus-ui';
+	import { frequencyText, operationText } from './text';
+	import { onMount } from 'svelte';
+
+    let {id = '', title = '', entityId = '', frequency = '', valueFieldId = '', dateFieldId = '', operation = ''} = $props()
+
+	let data = $state(null);
+	let previousTotal = $state(null);
+
+	onMount(async () => {
+		const request = await sendRequest({
+			path: '/get-widget-data',
+			data: {
+				widgetLinkId: id
+			}
+		});
+
+
+        data = request.data
+	});
+
+	function getRandomSizes() {
+		const sizes = [60, 120, 80];
+
+		return sizes[Math.floor(Math.random() * sizes.length)];
+	}
+
+	function getPercent() {
+		if (previousTotal === 0) {
+			if (total === 0) return 0;
+			return null; // augmentation non calculable
+		}
+		return ((total - previousTotal) / previousTotal) * 100;
+	}
+</script>
+
+<div class="kpi-container">
+	<div class="kpi">
+		<h4>{title}</h4>
+		{#if data === null}
+			<Skeleton style="width:{getRandomSizes()}px;height:32px;"></Skeleton>
+		{:else}
+            <ChartBar {data}
+            ></ChartBar>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.kpi-container {
+		width: 100%;
+		height: 100%;
+		padding: var(--pad-m);
+	}
+
+	.kpi {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-xxl);
+		width: 100%;
+		height: 100%;
+		background-color: var(--bg-blur);
+		border-radius: var(--radius-m);
+	}
+
+	.bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
+</style>