mountain-ui 1.0.170 → 1.0.172

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

@@ -0,0 +1,64 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createWebComponentRegistry() {
+    const store = writable({});
+
+    const targetWebComponentId = writable(null);
+
+    const all = derived(store, ($webComponents) => Object.values($webComponents));
+
+    return {
+        subscribe: store.subscribe,
+
+        register(webComponent) {
+            store.update((webComponents) => ({
+                ...webComponents,
+                [webComponent.id]: webComponent
+            }));
+        },
+
+        unregister(id) {
+            store.update((webComponents) => {
+                const copy = { ...webComponents };
+
+                delete copy[id];
+
+                return copy;
+            });
+        },
+
+        get(id) {
+            return get(store)[id];
+        },
+
+        select(id) {
+            return derived(store, ($webComponents) => $webComponents[id]);
+        },
+
+        getAll() {
+            return all;
+        },
+
+        setActive(webComponentId) {
+            console.log(webComponentId);
+
+            targetWebComponentId.set(webComponentId)
+        },
+        unsetActive() {
+            targetWebComponentId.set(null)
+        },
+        getActive() {
+            return derived(
+                [targetWebComponentId, store],
+                ([$targetWebComponentId, $webComponents]) =>
+                    $targetWebComponentId ? $webComponents[$targetWebComponentId] : null
+            );
+        },
+
+        update(){
+            store.update(s=>s)
+        }
+    };
+}
+
+export const webComponentRegistry = createWebComponentRegistry();

package/src/lib/registry/webComponentTypeRegistry/components/WebComponentType.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { webComponentTypeRegistry } from "../registry.svelte";
+
+    let {
+        type,
+        ...props
+    } = $props()
+
+    const webComponentType = $derived(webComponentTypeRegistry.get(type))
+</script>
+
+{#if webComponentType}
+    <svelte:component this={webComponentType.component} {...props}>
+        <slot/>
+    </svelte:component>
+{/if}
+
+

package/src/lib/registry/webComponentTypeRegistry/createWebComponentType.js

@@ -0,0 +1,59 @@
+import { sendRequest } from "hamzus-ui";
+import { webComponentTypeRegistry } from "./registry.svelte";
+import { get } from "svelte/store";
+
+export function createWebComponentType(config = {}) {
+    const webComponentType = {
+        type: "",
+        component: null,
+        allowChild: false,
+        allowDelete: false,
+        allowBreakpoint: false,
+        allowScrollSection: false,
+        allowLayout: { // {} | false
+            // type
+            allowGrid: true,
+            allowStack: true,
+            // distribute
+            allowedDistribution: ["start", "center", "end", "space-between", "space-around", "space-evenly"], // [] | false
+            // align
+            allowedAlignement: ["start", "center", "end"], // [] | false
+            // wrap
+            allowWrap: true,
+            // gap
+            allowGap: true,
+            // padding
+            allowPadding: true,
+        },
+        // typography
+        allowTypography: true,
+        // overlay
+        allowedOverlay: ["fixed", "relative"], // [] | false
+        // styles
+        allowStyle: { // {} | false
+            allowOpacity: false,
+            allowVisibility: false,
+            allowFill: false,
+            allowOverflow: false,
+            allowRadius: false,
+            allowBorder: false,
+            allowZIndex: false,
+        },
+        // link
+        allowLink: false,
+        // position
+        allowedPosition: ["absolute", "relative", "fixed", "sticky"], // [] | false
+        // size
+        allowSize: { // {} | false
+            allowedWidth: ["relative", "fill", "fixed", "fit-content", "viewport"],
+            allowedHeight: ["relative", "fill", "fixed", "fit-content", "viewport"],
+            allowMinMaxWidth: false,
+            allowMinMaxHeight: false,
+        }
+    };
+
+    Object.assign(webComponentType, config);
+    
+
+    return webComponentType;
+}

package/src/lib/registry/webComponentTypeRegistry/registerWebComponentTypes.js

@@ -0,0 +1,12 @@
+import { sendRequest } from "hamzus-ui";
+import { webComponentTypeRegistry } from "./registry.svelte";
+import { createWebComponentType } from "./createWebComponentType.js";
+
+import Page from "./webComponentTypes/Page/index.js";
+import Frame from "./webComponentTypes/Frame/index.js";
+
+
+export async function registerWebComponentTypes() {
+    webComponentTypeRegistry.register(Page)
+    webComponentTypeRegistry.register(Frame)
+}

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

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

package/src/lib/registry/webComponentTypeRegistry/webComponentTypes/Frame/Frame.svelte

@@ -0,0 +1,7 @@
+<script>
+    let {
+        children
+    } = $props()
+</script>
+
+<h3>frame</h3>

package/src/lib/registry/webComponentTypeRegistry/webComponentTypes/Frame/index.js

@@ -0,0 +1,52 @@
+import { createWebComponentType } from "../../createWebComponentType.js";
+
+import Frame from "./Frame.svelte"
+
+export default createWebComponentType({
+    type: "frame",
+    component: Frame,
+    allowChild: true,
+    allowDelete: true,
+    allowBreakpoint: false,
+    allowScrollSection: true,
+    allowLayout: { // {} | false
+        // type
+        allowGrid: true,
+        allowStack: true,
+        // distribute
+        allowedDistribution: ["start", "center", "end", "space-between", "space-around", "space-evenly"], // [] | false
+        // align
+        allowedAlignement: ["start", "center", "end"], // [] | false
+        // wrap
+        allowWrap: true,
+        // gap
+        allowGap: true,
+        // padding
+        allowPadding: true,
+    },
+    // typography
+    allowTypography: false,
+    // overlay
+    allowedOverlay: ["fixed", "relative"], // [] | false
+    // styles
+    allowStyle: { // {} | false
+        allowOpacity: true,
+        allowVisibility: true,
+        allowFill: true,
+        allowOverflow: true,
+        allowRadius: true,
+        allowBorder: true,
+        allowZIndex: true,
+    },
+    // link
+    allowLink: true,
+    // position
+    allowedPosition: ["absolute", "relative", "fixed", "sticky"], // [] | false
+    // size
+    allowSize: { // {} | false
+        allowedWidth: ["relative", "fill", "fixed", "fit-content", "viewport"],
+        allowedHeight: ["relative", "fill", "fixed", "fit-content", "viewport"],
+        allowMinMaxWidth: true,
+        allowMinMaxHeight: true,
+    }
+})

package/src/lib/registry/webComponentTypeRegistry/webComponentTypes/Page/Page.svelte

@@ -0,0 +1,259 @@
+<script>
+	import { createWebComponent } from '$lib/registry/webComponentRegistry/createWebComponent';
+	import { webComponentRegistry } from '$lib/registry/webComponentRegistry/registry.svelte';
+	import { webPageRegistry } from '$lib/registry/webPageRegistry/registry.svelte';
+	import { Button, DropdownMenu, IconButton, Input } from 'hamzus-ui';
+
+	let { webComponentId, webPagePath, children } = $props();
+
+	const webComponent = $derived(webComponentRegistry.select(webComponentId));
+	const webPage = $derived(webPageRegistry.select(webPagePath));
+    const css = $derived($webComponent?.getCSS())
+
+
+	function handleAdd() {
+		webPageRegistry.addChildTo(
+			$webPage.path,
+			webComponentId,
+			createWebComponent({
+				id: null,
+				type: 'frame',
+				path: [],
+				children: [],
+				breakPoints: [],
+				scrollSection: {
+					enable: false,
+					name: '',
+					offsetY: 0
+				},
+				layout: {
+					type: 'stack', // stack | grid | null
+					stack: {
+						direction: 'row', // row | column
+						distribution: 'start',
+						alignement: 'start',
+						wrap: false
+					},
+					grid: {
+						type: 'fixed', // fixed | auto
+						col: 2,
+						rows: 2
+					},
+					gap: {
+						x: 0,
+						y: 0
+					},
+					padding: {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0
+					}
+				},
+				typography: {
+					content: 'exemple',
+					weigth: 'Regular', // thin | thin-italic | extra-light | extra-light-italic | light | light-italic | regular | italic | medium | medium-italic | semi-bold | semi-bold-italic | bold | bold-italic | extra-bold | extra-bold-italic | black | black-italic
+					fontSize: 16,
+					fontSizeType: 'px', // px | rem
+					letterSpacing: 0,
+					lineHeight: 16,
+					alignement: 'left', // left | center | right | justify
+					tag: 'p' // left | center | right | justify
+				},
+				// overlay
+				overlay: [],
+				// styles
+				style: {
+					opacity: 1,
+					visibilty: true,
+					fill: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 1
+					},
+					overflow: 'visible', // visible | clip | hidden | scroll
+					borderRadius: {
+						tl: 0,
+						tr: 0,
+						br: 0,
+						bl: 0
+					},
+					border: {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 1
+					},
+					ZIndex: 1
+				},
+				// link
+				link: {
+					enable: false,
+					href: '',
+					newTab: true
+				},
+				// position
+				position: {
+					type: 'relative', // absolute | relative | fixed | sticky
+					absolute: {
+						top: null,
+						left: null,
+						right: null,
+						bottom: null
+					},
+					fixed: {
+						top: null,
+						left: null,
+						right: null,
+						bottom: null
+					},
+					sticky: {
+						top: 0
+					}
+				},
+				// size
+				size: {
+					widthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					width: 100,
+					heightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					height: 100,
+					minWidthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					minWidth: null,
+					maxWidthType: 'relative', // relative | fill | fixed | fit-content | viewport
+					maxWidth: null,
+					minHeightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					minHeight: null,
+					maxHeightType: 'relative', // relative | fill | fixed | fit-content | viewport
+					maxHeight: null
+				}
+			})
+		);
+	}
+
+	let newBreakPointName = $state('');
+	let newBreakPointWidth = $state('');
+
+	function handleAddBreakPoint() {
+		$webComponent.addBreakpoint(newBreakPointName, parseInt(newBreakPointWidth));
+		$webPage.update();
+	}
+
+	function handleDeleteBreakPoint(name) {
+		$webComponent.deleteBreakpoint(name);
+		$webPage.update();
+
+	}
+
+    function handleClick(e) {
+        e.stopPropagation()
+console.log(webComponentId);
+
+        webComponentRegistry.setActive(webComponentId)
+		$webPage.update();
+    }
+</script>
+
+{#if $webComponent}
+	{#each $webComponent.breakPoints as breakPoint}
+		<div class="page-container" onclick={handleClick}>
+			<div class="breakpoint">
+				<h4 style="color: color:var(--font-1); font-size:calc(var(--text-4) * var(--zoom)); line-height:calc(var(--text-4) * var(--zoom));">
+					{breakPoint.name}
+					<span style="color:var(--font-2);">{breakPoint.width}px</span>
+				</h4>
+
+				<div class="right">
+					<DropdownMenu.Root
+						onOpen={() => {
+							newBreakPointName = '';
+							newBreakPointWidth = '';
+						}}
+						direction="bottom"
+					>
+						<DropdownMenu.Trigger slot="trigger">
+							<IconButton variant="secondary" size="calc(24px * var(--zoom))">
+								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" fill="#292D32"/>
+<path d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z" fill="#292D32"/>
+</svg>
+
+							</IconButton>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content slot="content" width="250px">
+							<Input bind:value={newBreakPointName} label="nom" placeholder="nom" />
+							<Input
+								bind:value={newBreakPointWidth}
+								type="number"
+								step="1"
+								label="taille"
+								placeholder="1000"
+							>
+								<h6 slot="endContent">px</h6>
+							</Input>
+							<Button onClick={handleAddBreakPoint} style="width:100%" variant="secondary">
+								<h5>Ajouter</h5>
+							</Button>
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+					<IconButton
+						variant="destructive"
+						onClick={() => {
+							handleDeleteBreakPoint(breakPoint.name);
+						}}
+						size="calc(24px * var(--zoom))"
+					>
+						<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>
+			<div
+				class="page"
+				style="
+                    --width:{breakPoint.width}px;
+                    {$css}
+                "
+			>
+				<slot />
+			</div>
+		</div>
+	{/each}
+{/if}
+
+<style>
+	.page-container {
+		display: flex;
+		flex-direction: column;
+		row-gap: calc(var(--pad-m) * var(--zoom));
+	}
+
+	.breakpoint {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: calc(var(--pad-s) * var(--zoom));
+		border-radius: var(--radius-m);
+		background-color: var(--bg-2);
+	}
+
+    .right {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-s);
+    }
+
+	.page {
+		width: calc(var(--width) * var(--zoom));
+		height: calc(100px * var(--zoom));
+        border: 2px solid var(--bg-2);
+        background-color: var(--bg-1);
+	}
+</style>

package/src/lib/registry/webComponentTypeRegistry/webComponentTypes/Page/index.js

@@ -0,0 +1,52 @@
+import { createWebComponentType } from "../../createWebComponentType.js";
+
+import Page from "./Page.svelte";
+
+export default createWebComponentType({
+    type: "page",
+    component: Page,
+    allowChild: true,
+    allowDelete: false,
+    allowBreakpoint: true,
+    allowScrollSection:false,
+    allowLayout: { // {} | false
+        // type
+        allowGrid: true,
+        allowStack: true,
+        // distribute
+        allowedDistribution: ["start", "center", "end", "space-between", "space-around", "space-evenly"], // [] | false
+        // align
+        allowedAlignement: ["start", "center", "end"], // [] | false
+        // wrap
+        allowWrap: true,
+        // gap
+        allowGap: true,
+        // padding
+        allowPadding: true,
+    },
+    // typography
+    allowTypography: false,
+    // overlay
+    allowedOverlay: ["fixed"], // [] | false
+    // styles
+    allowStyle: { // {} | false
+        allowOpacity: false,
+        allowVisibility: false,
+        allowFill: true,
+        allowOverflow: true,
+        allowRadius: false,
+        allowBorder: false,
+        allowZIndex: false,
+    },
+    // link
+    allowLink: false,
+    // position
+    allowedPosition: false, // [] | false
+    // size
+    allowSize: { // {} | false
+        allowedWidth: ["fixed"],
+        allowedHeight: ["fixed"],
+        allowMinMaxWidth: false,
+        allowMinMaxHeight: false,
+    }
+})

package/src/lib/registry/webPageRegistry/components/WebPage.svelte

@@ -0,0 +1,14 @@
+<script>
+	import WebComponent from '$lib/registry/webComponentRegistry/components/WebComponent.svelte';
+	import { webPageRegistry } from '../registry.svelte';
+
+	let { path } = $props();
+
+	const webPage = $derived(webPageRegistry.select(path));
+</script>
+
+{#if $webPage}
+    <WebComponent id={$webPage.children.id} pagePath={$webPage.path}></WebComponent>
+{/if}
+
+

package/src/lib/registry/webPageRegistry/createWebPage.js

@@ -0,0 +1,22 @@
+import { sendRequest } from "hamzus-ui";
+import { get } from "svelte/store";
+import { createWebComponent } from "../webComponentRegistry/createWebComponent";
+import { webComponentRegistry } from "../webComponentRegistry/registry.svelte";
+import { webPageRegistry } from "./registry.svelte";
+
+export function createWebPage(config = {}) {
+    const webPage = {
+        AI: 1,
+        path: "/",
+        children: {},
+        children_index: {}
+    };
+
+    Object.assign(webPage, config);
+
+    webPage.update = ()=>{
+        webPageRegistry.update(webPage.path)
+    }
+
+    return webPage;
+}

package/src/lib/registry/webPageRegistry/registerWebPage.js

@@ -0,0 +1,9 @@
+import { sendRequest } from "hamzus-ui";
+import { webPageRegistry } from "./registry.svelte";
+import { createWebPage } from "./createWebPage.js";
+
+
+
+export async function registerWebPages() {
+    
+}