5htp-core 0.4.9-99 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-99",
+	"version": "0.5.0",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/text/icons.less

@@ -15,6 +15,11 @@ i {
     text-align: center;
     font-style: normal;
 
+    // Avoid the flexbox to crush the icon
+    .row > & {
+        flex: 0 0 1em;
+    }
+
     &.spin {
         animation-name: spin;
         animation-iteration-count: infinite;

package/src/client/assets/css/text/text.less

@@ -26,6 +26,10 @@ a {
             position: relative;
         }
     }
+
+    &.discrete:not(:hover) {
+        text-decoration: none;
+    }
 }
 
 [contenteditable]:focus {

package/src/client/assets/css/utils/borders.less

@@ -6,5 +6,10 @@
 .bb-1, .bv-1 { border-bottom: solid 1px var(--cLine); }
 .bl-1, .bh-1 { border-left: solid 1px var(--cLine); }
 
+.bt-2, .bv-2 { border-top: solid 2px var(--cLine); }
+.br-2, .bh-2 { border-right: solid 2px var(--cLine); }
+.bb-2, .bv-2 { border-bottom: solid 2px var(--cLine); }
+.bl-2, .bh-2 { border-left: solid 1px var(--cLine); }
+
 .b-0 { border: none; }
 .b-1 { border-top: solid 1px var(--cLine); }

package/src/client/components/containers/Popover/getPosition.ts

@@ -1,138 +1,129 @@
-export type TSide = "left"|"top"|"right"|"bottom";
+export type TSide = "left" | "top" | "right" | "bottom";
 
 const debug = false;
 
-export type TPosition = ReturnType<typeof corrigerPosition>
+export type TPosition = ReturnType<typeof corrigerPosition>;
 
 export default function corrigerPosition(
-    conteneur: HTMLElement,
-    popover: HTMLElement,
-    absolu: boolean | undefined,
-    cote: TSide = "bottom",
-    frame?: HTMLElement
+    container: HTMLElement, // button
+    popover: HTMLElement, // popover
+    preferredSide: TSide = "bottom",
+    frame?: HTMLElement // body
 ) {
-    // RAPPEL: L'élement sera positionnée relativement à son conteneur
-    //      Tous les calculs ici donnent donc des valeurs relatives au conteneur
-
-    const margeX = 5;
-    const margeY = 5;
+    // Dimensions and bounding rectangles
+    const popoverDims = { width: popover.offsetWidth, height: popover.offsetHeight };
+    const containerRect = container.getBoundingClientRect();
+
+    // Find the frame if not provided
+    if (!frame) {
+        // Find the closest relative-positioned parent
+        frame = container.parentElement;
+        while (frame && !["relative", "sticky"].includes(getComputedStyle(frame).position)) {
+            frame = frame.parentElement;
+        }
 
-    const dimsPop = {
-        width: popover.offsetWidth,
-        height: popover.offsetHeight
+        if (!frame) frame = document.body;
     }
 
-    debug && console.log(`[popover] Conteneur =`, conteneur, `Popover =`, popover, `Coté =`, cote);
+    if (debug) console.log("frame", frame);
 
-    if (dimsPop.width === undefined || dimsPop.height === undefined)
-        console.error("Unable to get the dimensions of the popover element. Did you pass a react element as content of popover ?");
+    const frameRect = frame.getBoundingClientRect();
+    const frameOffsetTop = frame.scrollTop;
+    const frameOffsetLeft = frame.scrollLeft;
 
-    /*----------------------------------
-    - POSITIONNEMENT INITIAL
-    ----------------------------------*/
-    let posInit = {
-        top: 0,
-        left: 0
+    // Calculate available space in each direction relative to the frame
+    const space = {
+        top: containerRect.top - frameRect.top,
+        bottom: frameRect.bottom - containerRect.bottom,
+        left: containerRect.left - frameRect.left,
+        right: frameRect.right - containerRect.right,
     };
 
-    // Position & dimensions des élements
-    const posCont = conteneur.getBoundingClientRect();
-
-    // Placement
-    debug && console.log(`[popover] Placement = ${cote}`, posCont.height, margeY);
-    switch (cote) {
-        case 'top':
-            posInit.top = -dimsPop.height - margeY;
-            break;
-        case 'bottom':
-            posInit.top = posCont.height + margeY;
-            break;
-        case 'left':
-            posInit.left = -dimsPop.width - margeX;
-            break;
-        case 'right':
-            posInit.left = posCont.width + margeX;
-            break;
-    }
-
-    // Centrage Horizontal
-    if (cote === 'top' || cote === 'bottom') {
-        debug && console.log(`[popover] Centrage horizontal`);
-        posInit.left = posCont.width / 2 - dimsPop.width / 2;
-    }
-    // Centrage Vertical
-    if (cote === 'left' || cote === 'right') {
-        debug && console.log(`[popover] Centrage vertical`);
-        posInit.top = posCont.height / 2 - dimsPop.height / 2;
-    }
-    
-    /*----------------------------------
-    - CORRECTION
-    ----------------------------------*/
-    let frontieres;
-    if (frame) { // Via conteneur spécifique
-        const posFrame = frame.getBoundingClientRect();
-        frontieres = {
-            top: Math.max(posFrame.top , 0) + margeY,
-            left: Math.max(posFrame.left, 0) + margeX,
-            right: Math.min(posFrame.right, window.innerWidth) - margeX,
-            bottom: Math.min(posFrame.bottom, window.innerHeight) - margeY
-        }
-    } else // Via fenêtre
-        frontieres = {
-            top: margeY,
-            left: margeX,
-            right: window.innerWidth - margeX,
-            bottom: window.innerHeight - margeY
+    // Helper function to check if there's enough space
+    const canFit = (side: TSide) => {
+        switch (side) {
+            case "top":
+                return space.top >= popoverDims.height;
+            case "bottom":
+                return space.bottom >= popoverDims.height;
+            case "left":
+                return space.left >= popoverDims.width;
+            case "right":
+                return space.right >= popoverDims.width;
         }
-
-    // Position finale de la popover
-    let posFinale: {
-        top: string,
-        left: string,
-        bottom: string,
-        right: string
-    } = {
-        top: 'auto',
-        left: 'auto',
-        right: 'auto',
-        bottom: 'auto'
     };
 
-    debug && console.log(`[popover] Position initiale =`, posInit, `Frontières =`, frame, '=', frontieres);
-
-    // Extrémité Haut
-    if (posCont.top + posInit.top < frontieres.top) {
-        posFinale.top = (frontieres.top - posCont.top) + 'px';
-        debug && console.log(`[popover] Top: Extremité haut`, posFinale.top);
-    // Extrémité Bas
-    } else if (posCont.top + posInit.top + dimsPop.height >= frontieres.bottom) {
-        posFinale.top = 'auto';
-        posFinale.bottom = (posCont.bottom - frontieres.bottom) + 'px';
-        debug && console.log(`[popover] Top: Extremité bas`, posFinale.bottom);
-    } else {
-        posFinale.top = posInit.top + 'px';
-        debug && console.log(`[popover] Top: Conservation`, posFinale.top);
+    // Try preferred side first, then fallback
+    let side: TSide = preferredSide;
+    if (!canFit(preferredSide)) {
+        if (canFit("top")) side = "top";
+        else if (canFit("bottom")) side = "bottom";
+        else if (canFit("left")) side = "left";
+        else if (canFit("right")) side = "right";
     }
 
-    // Extrémité Gauche
-    if (posCont.left + posInit.left < frontieres.left) {
-        posFinale.left = (frontieres.left - posCont.left) + 'px';
-        debug && console.log(`[popover] Left: Extremité gauche`, posFinale.left);
-    // Extrémité Droite
-    } else if (posCont.left + posInit.left + dimsPop.width >= frontieres.right) {
-        posFinale.left = 'auto';
-        posFinale.right = (posCont.right - frontieres.right) + 'px';
-        debug && console.log(`[popover] Left: Extremité droite`, posFinale.right);
-    } else {
-        posFinale.left = posInit.left + 'px';
-        debug && console.log(`[popover] Left: Conservation`, posFinale.left);
+    // Calculate position based on side
+    const position = { top: 0, left: 0 };
+    if (side === "top") {
+        position.top =
+            containerRect.top -
+            frameRect.top -
+            popoverDims.height +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left +
+            (containerRect.width - popoverDims.width) / 2 +
+            frameOffsetLeft;
+    } else if (side === "bottom") {
+        position.top =
+            containerRect.bottom -
+            frameRect.top +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left +
+            (containerRect.width - popoverDims.width) / 2 +
+            frameOffsetLeft;
+    } else if (side === "left") {
+        position.top =
+            containerRect.top -
+            frameRect.top +
+            (containerRect.height - popoverDims.height) / 2 +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left -
+            popoverDims.width +
+            frameOffsetLeft;
+    } else if (side === "right") {
+        position.top =
+            containerRect.top -
+            frameRect.top +
+            (containerRect.height - popoverDims.height) / 2 +
+            frameOffsetTop;
+        position.left =
+            containerRect.right -
+            frameRect.left +
+            frameOffsetLeft;
     }
 
-    debug && console.log({ posInit, dimsPop, frontieres }, { posFinale });
-
+    // Adjust for overflow
+    position.top = Math.max(
+        frameOffsetTop,
+        Math.min(frameRect.height - popoverDims.height + frameOffsetTop, position.top)
+    );
+    position.left = Math.max(
+        frameOffsetLeft,
+        Math.min(frameRect.width - popoverDims.width + frameOffsetLeft, position.left)
+    );
+
+    // Return result
     return {
-        css: posFinale,
-        cote: cote
+        side,
+        css: {
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+        },
     };
 }

package/src/client/components/containers/Popover/index.tsx

@@ -47,7 +47,7 @@ export default (props: Props) => {
 
         content, state, width, disable,
 
-        frame, side,
+        frame, side = 'bottom',
 
         children, tag,
 
@@ -72,7 +72,6 @@ export default (props: Props) => {
                 getPosition(
                     refCont.current, 
                     refContent.current, 
-                    false, 
                     side, 
                     /*frame || document.getElementById('page') || */undefined
                 )
@@ -137,7 +136,7 @@ export default (props: Props) => {
     return (
         <Tag
             style={{
-                position: 'relative',
+                //position: 'relative',
                 ...(shown ? {
                     zIndex: 11
                 } : {})

package/src/client/components/containers/Popover/popover.less

@@ -4,6 +4,7 @@
 // contPopover doit envelopper le bouton sans aucun espace
 .contPopover {
     display: inline-block;
+    position: static !important; // Allow popvers to go outside of the container which cna be potentially scrollable
 
     > .btn {
         width: 100%;
@@ -32,16 +33,10 @@
 
     overflow: auto;
 
-    &.pos_bottom { transform: translateY(-1.65rem); }
-    &.pos_top { transform: translateY(1.65rem); }
-    &.pos_left { transform: translateX(1.65rem); }
-    &.pos_right { transform: translateX(-1.65rem); }
-
     top: 100%;
     max-height: 40rem;
 
     min-width: 15rem;
-    width: 100%;
     max-width: 90vw;
 
     & {

package/src/client/components/inputv3/base.less

@@ -16,6 +16,7 @@
     flex-direction: column;
     gap: 0.5em;
     align-items: stretch;
+    position: relative;
 
     > label {
         font-weight: 700;