mountain-ui 1.0.171 → 1.0.172

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.171",
+	"version": "1.0.172",
 	"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/navigationRegistry/components/Navbar.svelte

@@ -10,12 +10,10 @@
 	import NavbarIcon from './NavbarIcon.svelte';
 	import { onMount } from 'svelte';
 
-	let {} = $props();
+	let { settingsIsOpen = $bindable(false)} = $props();
 
 	let content = $state(null);
 
-	let settingsIsOpen = $state(false);
-
 	const allEntities = entityRegistry.getAll();
 
 	const navigation = navigationRegistry.selectNavbarState();

package/src/lib/registry/webComponentRegistry/components/WebComponent.svelte

@@ -0,0 +1,27 @@
+<script>
+	import WebComponentType from '$lib/registry/webComponentTypeRegistry/components/WebComponentType.svelte';
+	import { webPageRegistry } from '$lib/registry/webPageRegistry/registry.svelte';
+	import { webComponentRegistry } from '../registry.svelte';
+	import WebComponent from './WebComponent.svelte';
+
+	let { id, pagePath = '/' } = $props();
+
+	const webComponent = $derived(webComponentRegistry.select(id));
+	const webPage = $derived(webPageRegistry.select(pagePath));
+	const webComponentChildren = $derived(webPageRegistry.getChildrenIds(pagePath, id));
+    
+</script>
+
+{#if $webComponent}
+	<WebComponentType
+		type={$webComponent.type}
+		webComponentId={$webComponent.id}
+		webPagePath={pagePath}
+	>
+		{#if $webComponentChildren && $webComponentChildren.length > 0}
+			{#each $webComponentChildren as webComponentChild}
+				<WebComponent id={webComponentChild} {pagePath}></WebComponent>
+			{/each}
+		{/if}
+	</WebComponentType>
+{/if}

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

@@ -0,0 +1,619 @@
+import { webComponentTypeRegistry } from "../webComponentTypeRegistry/registry.svelte";
+import { webComponentRegistry } from "./registry.svelte";
+import { derived, get } from "svelte/store";
+
+export function createWebComponent(config = {}) {
+    const webComponent = {
+        id: null,
+        type: null,
+        path: [],
+        children: [],
+        breakPoints: [
+            {
+                name: "Default",
+                width: 1200
+            }
+        ],
+        scrollSection: {
+            enable: false,
+            name: "",
+            offsetY: 0,
+        },
+        layout: {
+            type: "stack", // stack | grid | null
+            stack: {
+                direction: "row", // row | column
+                distribution: "start", // start | center | end | space-evenly | space-around | space-between 
+                alignement: "start", //  start | center | end 
+                wrap: false,
+            },
+            grid: {
+                type: "fixed", // fixed | auto
+                cols: 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: [
+            {
+                type: "fixed", // fixed | relative
+                preset: "instant", // instant | fade-in | fade-in-out | fade-out
+                fill: {
+                    r: 0,
+                    g: 0,
+                    b: 0,
+                    a: 1,
+                },
+                clickToExit: false,
+                // overlay/relative
+                relative: {
+                    position: "bottom",
+                    align: "left",
+                    hoverToPreserve: false,
+                    clickOnTriggerToToggle: false,
+                },
+            }
+        ],
+        // 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: "absolute", // 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,
+        }
+    };
+
+    Object.assign(webComponent, config);
+
+    // breakpoint
+    webComponent.addBreakpoint = (name, width) => {
+        // verifier si un breakpoint existe avec le meme nom
+        for (const breakPoint of webComponent.breakPoints) {
+            if (breakPoint.name === name) {
+                return false
+            }
+        }
+
+        webComponent.breakPoints.push({
+            name,
+            width,
+        })
+    }
+    webComponent.deleteBreakpoint = (name) => {
+        if (webComponent.breakPoints.length <= 1) {
+            return false
+        }
+        // verifier si un breakpoint existe avec le meme nom
+        webComponent.breakPoints = webComponent.breakPoints.filter(bp => bp.name !== name)
+    }
+
+    // scrollsection
+    webComponent.addScrollSection = () => {
+        webComponent.scrollSection.enable = true
+    }
+    webComponent.removeScrollSection = () => {
+        webComponent.scrollSection.enable = false
+    }
+    webComponent.setScrollSectionName = (name) => {
+        webComponent.scrollSection.name = name
+    }
+    webComponent.setScrollSectionOffsetY = (offsetY) => {
+        webComponent.scrollSection.offsetY = offsetY
+    }
+
+    // layout
+    webComponent.setLayout = (type) => {
+        // verifier si le type est valide
+
+        webComponent.layout.type = type
+        webComponentRegistry.update()
+    }
+
+    webComponent.setLayoutDistribution = (distribution) => {
+        if (webComponent.layout.type !== "stack") {
+            return false
+        }
+
+        webComponent.layout.stack.distribution = distribution
+    }
+
+    webComponent.setLayoutAlignement = (alignement) => {
+        if (webComponent.layout.type !== "stack") {
+            return false
+        }
+
+        webComponent.layout.stack.alignement = alignement
+    }
+
+    webComponent.setLayoutWrap = (wrap) => {
+        if (webComponent.layout.type !== "stack") {
+            return false
+        }
+
+        webComponent.layout.stack.wrap = wrap
+    }
+
+    webComponent.setLayoutGap = (x, y) => {
+        webComponent.layout.gap.x = x
+        webComponent.layout.gap.y = y
+
+    }
+
+    webComponent.setLayoutPadding = (top, right, bottom, left) => {
+        webComponent.layout.padding.top = top
+        webComponent.layout.padding.right = right
+        webComponent.layout.padding.bottom = bottom
+        webComponent.layout.padding.left = left
+    }
+
+    webComponent.getCSS = () => {
+        const activeWebComponent = webComponentRegistry.getActive()
+
+        return derived(activeWebComponent, ($activeWebComponent) => {
+            const type = webComponentTypeRegistry.get(webComponent.type)
+
+            let CSS = ""
+            // layout
+            if (type.allowLayout) {
+
+                switch (webComponent.layout.type) {
+                    case "stack":
+                        if (type.allowLayout.allowStack) {
+                            CSS += "display:flex;"
+                            CSS += `flex-direction:${webComponent.layout.stack.direction};`
+                            CSS += `align-items:${webComponent.layout.stack.alignement};`
+                            CSS += `justify-content:${webComponent.layout.stack.distribution};`
+                            if (type.allowLayout.allowWrap) {
+                                CSS += `flex-wrap:${webComponent.layout.stack.wrap ? "wrap" : "nowrap"};`
+                            }
+                        }
+
+                        break;
+                    case "grid":
+                        if (type.allowLayout.allowGrid) {
+                            CSS += "display:grid;"
+                            CSS += `grid-template-columns:`
+                            for (const el of Array.from({ length: webComponent.layout.grid.cols })) {
+                                CSS += webComponent.layout.grid.type === "fixed" ? ` 1fr ` : " auto "
+                            }
+                            CSS += `;`
+                            CSS += `grid-template-rows:`
+                            for (const el of Array.from({ length: webComponent.layout.grid.rows })) {
+                                CSS += ` auto `
+                            }
+                            CSS += `;`
+                        }
+
+                        break;
+                    default:
+                        break;
+                }
+                if (type.allowLayout.allowGap) {
+                    CSS += `column-gap:calc(var(--zoom) * ${webComponent.layout.gap.x}px);`
+                    CSS += `row-gap:calc(var(--zoom) * ${webComponent.layout.gap.y}px);`
+                }
+                if (type.allowLayout.allowPadding) {
+                    CSS += `padding-top:calc(var(--zoom) * ${webComponent.layout.padding.top}px);`
+                    CSS += `padding-right:calc(var(--zoom) * ${webComponent.layout.padding.right}px);`
+                    CSS += `padding-bottom:calc(var(--zoom) * ${webComponent.layout.padding.bottom}px);`
+                    CSS += `padding-left:calc(var(--zoom) * ${webComponent.layout.padding.left}px);`
+                }
+            }
+            // typographie
+            // overlay
+            // style
+            if (type.allowStyle) {
+                if (type.allowStyle.allowOpacity) {
+                    CSS += `opacity:${webComponent.style.opacity};`
+                }
+                if (type.allowStyle.allowVisibility && !webComponent.style.visibilty) {
+                    CSS += `display:none;`
+                }
+                if (type.allowStyle.allowOverflow) {
+                    CSS += `overflow:${webComponent.style.overflow};`
+                }
+                if (type.allowStyle.allowRadius) {
+                    CSS += `border-radius:${webComponent.style.borderRadius.tl}px ${webComponent.style.borderRadius.tr}px ${webComponent.style.borderRadius.br}px ${webComponent.style.borderRadius.bl}px;`
+                }
+                if (type.allowStyle.allowZIndex) {
+                    CSS += `z-index:${webComponent.style.ZIndex};`
+                }
+                if (type.allowStyle.allowedPosition) {
+                    switch (webComponent.position.type) {
+                        case "fixed":
+                            CSS += `position:sticky;`
+                            if (webComponent.position.absolute.top === null && webComponent.position.absolute.right === null && webComponent.position.absolute.bottom === null && webComponent.position.absolute.left === null) {
+                                CSS += `top:50%;`
+                                CSS += `left:50%;`
+                                CSS += `transform:translate(-50%, -50%);`
+                            } else {
+                                if (webComponent.position.absolute.top) {
+                                    CSS += `top:${webComponent.position.absolute.top}px;`
+                                }
+                                if (webComponent.position.absolute.right) {
+                                    CSS += `right:${webComponent.position.absolute.right}px;`
+                                }
+                                if (webComponent.position.absolute.bottom) {
+                                    CSS += `bottom:${webComponent.position.absolute.bottom}px;`
+                                }
+                                if (webComponent.position.absolute.left) {
+                                    CSS += `left:${webComponent.position.absolute.left}px;`
+                                }
+                            }
+                            break;
+                        case "fixed":
+                            CSS += `position:fixed;`
+                            if (webComponent.position.fixed.top === null && webComponent.position.fixed.right === null && webComponent.position.fixed.bottom === null && webComponent.position.fixed.left === null) {
+                                CSS += `top:50%;`
+                                CSS += `left:50%;`
+                                CSS += `transform:translate(-50%, -50%);`
+                            } else {
+                                if (webComponent.position.fixed.top) {
+                                    CSS += `top:${webComponent.position.fixed.top}px;`
+                                }
+                                if (webComponent.position.fixed.right) {
+                                    CSS += `right:${webComponent.position.fixed.right}px;`
+                                }
+                                if (webComponent.position.fixed.bottom) {
+                                    CSS += `bottom:${webComponent.position.fixed.bottom}px;`
+                                }
+                                if (webComponent.position.fixed.left) {
+                                    CSS += `left:${webComponent.position.fixed.left}px;`
+                                }
+                            }
+                            break;
+                        case "sticky":
+                            CSS += `position:sticky;`
+                            CSS += `top:${webComponent.position.sticky.top}px;`
+                            break;
+
+                        default:
+                            CSS += `position:relative;`
+                            break;
+                    }
+                }
+            }
+
+            // size
+            if (type.allowSize) {
+                const getSize = (type, size) => {
+                    switch (type) {
+                        case "relative":
+                            return `${size}%`
+                            break;
+                        case "fill":
+                            return `width:1fr;`
+                            break;
+                        case "fixed":
+                            return `${webComponent.size.width}px`
+                            break;
+                        case "fit-content":
+                            CSS += `width:fit-content;`
+                            break;
+                        case "viewport":
+                            return `${webComponent.size.width}dvw`
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                CSS += `width:${getSize(webComponent.size.widthType, webComponent.size.width)}%;`
+                CSS += `height:${getSize(webComponent.size.heightType, webComponent.size.height)}%;`
+                if (type.allowSize.allowMinMaxWidth) {
+                    if (webComponent.size.minWidth) {
+                        CSS += `min-width:${getSize(webComponent.size.minWidthType, webComponent.size.minWidth)}%;`
+                    }
+                    if (webComponent.size.maxWidth) {
+                        CSS += `max-width:${getSize(webComponent.size.maxWidthType, webComponent.size.maxWidth)}%;`
+                    }
+                }
+                if (type.allowSize.allowMinMaxHeight) {
+                    if (webComponent.size.minHeight) {
+                        CSS += `min-height:${getSize(webComponent.size.minHeightType, webComponent.size.minHeight)}%;`
+                    }
+                    if (webComponent.size.maxHeight) {
+                        CSS += `max-height:${getSize(webComponent.size.maxHeightType, webComponent.size.maxHeight)}%;`
+                    }
+                }
+            }
+
+            if ($activeWebComponent?.id === webComponent.id) {
+                CSS += "outline:1px solid var(--accent);"
+            }
+            return CSS
+        })
+    }
+
+    webComponent.setTypographyContent = (content) => {
+        webComponent.typography.content = content
+    }
+
+    webComponent.setTypographyFontWeight = (weightType) => {
+        // verifier que c est valide
+
+
+        webComponent.typography.weigth = weightType
+    }
+
+    webComponent.setTypographyFontSize = (size) => {
+        webComponent.typography.fontSize = size
+    }
+    webComponent.setTypographyFontSizeType = (fontSizeType) => {
+        webComponent.typography.fontSizeType = fontSizeType
+    }
+
+    webComponent.setTypographyLetterSpacing = (letterSpacing) => {
+        webComponent.typography.letterSpacing = letterSpacing
+    }
+    webComponent.setTypographyAlignement = (alignement) => {
+        webComponent.typography.alignement = alignement
+
+    }
+
+    webComponent.setTypographyTag = (tag) => {
+        webComponent.typography.tag = tag
+    }
+
+    // overlay
+    webComponent.addOverlay = (type) => {
+        webComponent.overlay.push({
+            type: type, // fixed | relative
+            preset: "instant", // instant | fade-in | fade-in-out | fade-out
+            fill: {
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 1,
+            },
+            clickToExit: false,
+            // overlay/relative
+            relative: {
+                position: "bottom",
+                align: "left",
+                hoverToPreserve: false,
+                clickOnTriggerToToggle: false,
+            },
+        })
+    }
+
+    webComponent.setOverlayPreset = (index, preset) => {
+        webComponent.overlay[index].preset = preset
+
+    }
+    webComponent.setOverlayFill = (index, r, g, b, a) => {
+        webComponent.overlay[index].fill = { r, g, b, a }
+    }
+    webComponent.setOverlayClickToExit = (index, bool) => {
+        webComponent.overlay[index].clickToExit = bool
+    }
+
+    // overlay/fixed
+    // overlay/relative
+    webComponent.setOverlayPosition = (index, position) => {
+        // verifier si la position est bonne 
+
+        webComponent.overlay[index].position = position
+    }
+    webComponent.setOverlayAlign = (index, align) => {
+        // verifier si align est bon
+
+        webComponent.overlay[index].align = align
+    }
+    webComponent.setOverlayHoverToPreserve = (index, bool) => {
+        webComponent.overlay[index].hoverToPreserve = bool
+    }
+    webComponent.setOverlayClickOnTriggerToToggle = (index, bool) => {
+        webComponent.overlay[index].clickOnTriggerToToggle = bool
+    }
+
+    // styles
+    webComponent.setStyleOpacity = (percentOpacity) => {
+        webComponent.style.opacity = percentOpacity
+    }
+    webComponent.setStyleVisibility = (boolVisibility) => {
+        webComponent.style.visibilty = boolVisibility
+    }
+    webComponent.setStyleFill = (r, g, b, a) => {
+        webComponent.style.fill = { r, g, b, a }
+    }
+    webComponent.setStyleOverflow = (type) => {
+        // verifier si le type d overflow est bon
+        webComponent.style.overflow = type
+    }
+    webComponent.setStyleBorderRadius = (tl, tr, br, bl) => {
+        webComponent.style.borderRadius = { tl, tr, br, bl }
+    }
+    webComponent.setStyleBorderColor = (r, g, b, a) => {
+        webComponent.style.border = { r, g, b, a }
+    }
+    webComponent.setStyleZIndex = (ZIndex) => {
+        webComponent.style.ZIndex = ZIndex
+    }
+
+    // link
+    webComponent.addLink = () => {
+        webComponent.link.enable = true
+    }
+    webComponent.setLink = (link) => {
+        webComponent.link.href = link
+    }
+    webComponent.setLinkNewTab = (bool) => {
+        webComponent.link.newTab = bool
+    }
+
+    // position
+    webComponent.setPosition = (position) => {
+        webComponent.position.type = position
+    }
+    // position/absolute
+    webComponent.togglePositionCenter = () => {
+        webComponent.position.absolute = {
+            top: null,
+            left: null,
+            right: null,
+            bottom: null,
+        }
+    }
+    webComponent.setPositionValue = (dir, value) => {
+        switch (webComponent.position.type) {
+            case "absolute":
+                webComponent.absolute[dir] = value
+                break;
+            case "fixed":
+                webComponent.fixed[dir] = value
+                break;
+            case "sticky":
+                webComponent.sticky.top = value
+                break;
+            default:
+                break;
+        }
+    }
+
+    // size
+    webComponent.setSizeWidthType = (widthType) => {
+        webComponent.size.widthType = widthType
+    }
+    webComponent.setSizeWidth = (value) => {
+        webComponent.size.width = value
+    }
+    webComponent.setSizeHeightType = (heightType) => {
+        webComponent.size.heightType = heightType
+    }
+
+    webComponent.setSizeHeight = (value) => {
+        webComponent.size.height = value
+    }
+
+    webComponent.addSizeMinHeight = () => {
+        webComponent.size.minHeight = 100
+    }
+    webComponent.addSizeMaxHeight = () => {
+        webComponent.size.maxHeight = 100
+    }
+    webComponent.addSizeMinWidth = () => {
+        webComponent.size.minWidth = 100
+    }
+    webComponent.addSizeMaxWidth = () => {
+        webComponent.size.maxWidth = 100
+    }
+
+    webComponent.setSizeMinHeight = (value) => {
+        webComponent.size.minHeight = value
+    }
+    webComponent.setSizeMinHeightType = (type) => {
+        webComponent.size.minHeightType = type
+    }
+    webComponent.setSizeMaxHeight = (value) => {
+        webComponent.size.maxHeight = value
+    }
+    webComponent.setSizeMaxHeightType = (type) => {
+        webComponent.size.maxHeightType = type
+    }
+    webComponent.setSizeMinWidth = (value) => {
+        webComponent.size.minWidth = value
+    }
+    webComponent.setSizeMinWidthType = (type) => {
+        webComponent.size.minWidthType = type
+    }
+    webComponent.setSizeMaxWidth = (value) => {
+        webComponent.size.maxWidth = value
+    }
+    webComponent.setSizeMaxWidthType = (type) => {
+        webComponent.size.maxWidthType = type
+    }
+
+    webComponent.deleteSizeMinHeight = () => {
+        webComponent.size.minHeight = null
+    }
+    webComponent.deleteSizeMaxHeight = () => {
+        webComponent.size.maxHeight = null
+    }
+    webComponent.deleteSizeMinWidth = () => {
+        webComponent.size.minWidth = null
+    }
+    webComponent.deleteSizeMaxWidth = () => {
+        webComponent.size.maxWidth = null
+    }
+
+
+    return webComponent;
+}

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

@@ -0,0 +1,12 @@
+import { sendRequest } from "hamzus-ui";
+import { webComponentRegistry } from "./registry.svelte";
+import { createWebComponent } from "./createWebComponent";
+
+import Page from "./webComponents/Page";
+import Frame from "./webComponents/Frame";
+
+
+export async function registerWebComponents() {
+    webComponentRegistry.register(Page)
+    webComponentRegistry.register(Frame)
+}