@medyll/idae-be 0.79.0 → 0.81.0

package/dist/be.d.ts

@@ -11,7 +11,7 @@ import { WalkHandler } from './modules/walk.js';
 import { TextHandler, type TextHandlerHandle } from './modules/text.js';
 import { TimersHandler } from './modules/timers.js';
 export declare class Be {
-    node: HTMLElement | HTMLElement[] | string;
+    inputNode: HTMLElement | HTMLElement[] | string;
     isWhat: IsWhat;
     BeTimer: NodeJS.Timeout | null;
     BeInterval: NodeJS.Timeout | null;
@@ -88,6 +88,12 @@ export declare class Be {
     clearTimeout: TimersHandler['clearTimeout'];
     clearInterval: TimersHandler['clearInterval'];
     private constructor();
+    /**
+     * Normalizes the input to ensure `node` is always an HTMLElement or an array of HTMLElements.
+     * @param input - The input to normalize (string, HTMLElement, or array of HTMLElements).
+     * @returns A valid HTMLElement or an array of HTMLElements.
+     */
+    private static getNode;
     static elem(node: HTMLElement | HTMLElement[] | string): Be;
     static createBe(tagOrHtml: CreateFragment, options?: {
         is?: string;
@@ -114,6 +120,7 @@ export declare class Be {
         data?: T;
         headers?: Record<string, string>;
     }): Promise<any>;
+    get node(): HTMLElement | HTMLElement[];
     eachNode(callback: (el: HTMLElement) => void, firstChild?: boolean): void;
     /** DOM
      * Handles various DOM operations on the element(s).

package/dist/be.js

@@ -11,7 +11,7 @@ import { WalkHandler } from './modules/walk.js';
 import { TextHandler } from './modules/text.js';
 import { TimersHandler } from './modules/timers.js';
 export class Be {
-    node;
+    inputNode;
     isWhat;
     //
     BeTimer = null;
@@ -103,8 +103,13 @@ export class Be {
         if (input instanceof Be) {
             return input;
         }
-        this.node = input;
-        this.isWhat = typeof input === 'string' ? 'qy' : Array.isArray(input) ? 'array' : 'element';
+        this.inputNode = Be.getNode(input);
+        this.isWhat =
+            typeof this.inputNode === 'string'
+                ? 'qy'
+                : Array.isArray(this.inputNode)
+                    ? 'array'
+                    : 'element';
         // styles
         this.styleHandler = new StylesHandler(this);
         this.styles = this.handle(this.styleHandler);
@@ -150,6 +155,27 @@ export class Be {
         this.timers = this.handle(this.timerHandler);
         this.attach(TimersHandler);
     }
+    /**
+     * Normalizes the input to ensure `node` is always an HTMLElement or an array of HTMLElements.
+     * @param input - The input to normalize (string, HTMLElement, or array of HTMLElements).
+     * @returns A valid HTMLElement or an array of HTMLElements.
+     */
+    static getNode(input) {
+        if (typeof input === 'string') {
+            // Si `input` est une chaîne, sélectionnez les éléments correspondants
+            const elements = Array.from(document.querySelectorAll(input));
+            return elements.length === 1 ? elements[0] : elements;
+        }
+        else if (input instanceof HTMLElement) {
+            // Si `input` est un seul élément DOM, retournez-le
+            return input;
+        }
+        else if (Array.isArray(input)) {
+            // Si `input` est un tableau, filtrez pour ne garder que les éléments DOM valides
+            return input.filter((n) => n instanceof HTMLElement);
+        }
+        throw new Error('Invalid input: must be a string, HTMLElement, or an array of HTMLElements.');
+    }
     static elem(node) {
         return new Be(node);
     }
@@ -239,20 +265,30 @@ export class Be {
             headers: options.headers || {}
         }).then((response) => response.json());
     }
+    get node() {
+        switch (this.isWhat) {
+            case 'element':
+                return this.inputNode;
+            case 'array':
+                return Array.from(this.inputNode);
+            case 'qy':
+                return Array.from(document.querySelectorAll(this.inputNode));
+        }
+    }
     eachNode(callback, firstChild) {
         switch (this.isWhat) {
             case 'element':
-                BeUtils.applyCallback(this.node, callback);
+                BeUtils.applyCallback(this.inputNode, callback);
                 break;
             case 'array':
-                this.node.forEach((lo) => {
+                this.inputNode.forEach((lo) => {
                     BeUtils.applyCallback(lo, callback);
                     if (firstChild)
                         return;
                 });
                 break;
             case 'qy':
-                document.querySelectorAll(this.node).forEach((el) => {
+                document.querySelectorAll(this.inputNode).forEach((el) => {
                     callback(el);
                     if (firstChild)
                         return;
@@ -266,7 +302,7 @@ export class Be {
      * @returns The Be instance for method chaining.
      */
     get html() {
-        return this.isWhat === 'element' ? this.node.innerHTML : null;
+        return this.isWhat === 'element' ? this.inputNode.innerHTML : null;
     }
     attach(Handler, suffix = '') {
         const fromMethods = Handler.methods || [];

package/dist/modules/attrs.js

@@ -21,11 +21,11 @@ export class AttrHandler {
         return this.beElement;
     }
     get(name) {
-        if (typeof this.beElement.node === 'string')
-            return document.querySelector(this.beElement.node || '')?.getAttribute(name || '') || null;
+        if (typeof this.beElement.inputNode === 'string')
+            return (document.querySelector(this.beElement.inputNode || '')?.getAttribute(name || '') || null);
         if (this.beElement.isWhat !== 'element')
             return null;
-        const el = this.beElement.node;
+        const el = this.beElement.inputNode;
         return name ? el.getAttribute(name) : null;
     }
     set(nameOrObject, value) {
@@ -57,7 +57,7 @@ export class AttrHandler {
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        const el = this.beElement.node;
+        const el = this.beElement.inputNode;
         const attrs = {};
         for (let i = 0; i < el.attributes.length; i++) {
             const attr = el.attributes[i];

package/dist/modules/data.js

@@ -27,7 +27,7 @@ export class DataHandler {
         // if space in string
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.dataset[key] || null;
+        return this.beElement.inputNode.dataset[key] || null;
     }
     set(keyOrObject, value) {
         this.beElement.eachNode((el) => {
@@ -59,11 +59,11 @@ export class DataHandler {
         // if spaces in string
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.dataset[key] || null;
+        return this.beElement.inputNode.dataset[key] || null;
     }
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.dataset;
+        return this.beElement.inputNode.dataset;
     }
 }

package/dist/modules/dom.d.ts

@@ -17,6 +17,11 @@ declare enum domMethods {
 }
 type Content = string | HTMLElement | Be;
 export interface DomHandlerHandle {
+    insert?: {
+        content: string | HTMLElement | Be;
+        mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend';
+        callback?: (element: HandlerCallbackProps) => void;
+    };
     update?: {
         content: Content;
         callback?: (element: HandlerCallbackProps) => void;
@@ -80,8 +85,8 @@ export declare class DomHandler implements DomHandlerInterface, CommonHandler<Do
     update(content: string, callback?: HandlerCallBackFn): Be;
     append(content: Content, callback?: HandlerCallBackFn): Be;
     prepend(content: Content, callback?: HandlerCallBackFn): Be;
-    insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be, callback?: HandlerCallBackFn): Be;
-    afterBegin(content: HTMLElement, callback?: HandlerCallBackFn): Be;
+    insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be | string, callback?: HandlerCallBackFn): Be;
+    afterBegin(content: Content, callback?: HandlerCallBackFn): Be;
     afterEnd(content: Content, callback?: HandlerCallBackFn): Be;
     beforeBegin(content: Content, callback?: HandlerCallBackFn): Be;
     beforeEnd(content: Content, callback?: HandlerCallBackFn): Be;
@@ -91,6 +96,8 @@ export declare class DomHandler implements DomHandlerInterface, CommonHandler<Do
     normalize(callback?: HandlerCallBackFn): Be;
     wrap(tag?: string, callback?: HandlerCallBackFn): Be;
     private adjacentElement;
+    private normalizeContent;
+    private insertContent;
     valueOf(): string | null;
 }
 export {};

package/dist/modules/dom.js

@@ -79,15 +79,13 @@ export class DomHandler {
     append(content, callback) {
         const ret = [];
         this.beElement.eachNode((el) => {
-            if (content instanceof Be) {
-                content.eachNode((child) => {
-                    ret.push(child);
-                    el.appendChild(child);
-                });
+            const normalizedContent = this.normalizeContent(content);
+            if (normalizedContent instanceof DocumentFragment) {
+                el.appendChild(normalizedContent);
             }
             else {
-                ret.push(content);
-                el.appendChild(content);
+                ret.push(normalizedContent);
+                el.appendChild(normalizedContent);
             }
         });
         callback?.({
@@ -100,15 +98,13 @@ export class DomHandler {
     prepend(content, callback) {
         const ret = [];
         this.beElement.eachNode((el) => {
-            if (content instanceof Be) {
-                content.eachNode((child) => {
-                    ret.push(child);
-                    el.insertBefore(child, el.firstChild);
-                });
+            const normalizedContent = this.normalizeContent(content);
+            if (normalizedContent instanceof DocumentFragment) {
+                el.insertBefore(normalizedContent, el.firstChild);
             }
             else {
-                ret.push(content);
-                el.insertBefore(content, el.firstChild);
+                ret.push(normalizedContent);
+                el.insertBefore(normalizedContent, el.firstChild);
             }
         });
         callback?.({
@@ -128,6 +124,8 @@ export class DomHandler {
                 return this.beforeBegin(element, callback);
             case 'beforeend':
                 return this.beforeEnd(element, callback);
+            default:
+                throw new Error(`Invalid mode: ${mode}`);
         }
     }
     afterBegin(content, callback) {
@@ -142,29 +140,51 @@ export class DomHandler {
         return this.beElement;
     }
     afterEnd(content, callback) {
-        this.append(content, callback);
+        this.beElement.eachNode((el) => {
+            // Insérer après l'élément cible
+            el.parentNode?.insertBefore(this.normalizeContent(content), el.nextSibling);
+            callback?.({
+                fragment: content,
+                be: be(el),
+                root: this.beElement
+            });
+        });
         return this.beElement;
     }
     beforeBegin(content, callback) {
-        this.prepend(content, callback);
+        this.beElement.eachNode((el) => {
+            // Insérer avant l'élément cible
+            el.parentNode?.insertBefore(this.normalizeContent(content), el);
+            callback?.({
+                fragment: content,
+                be: be(el),
+                root: this.beElement
+            });
+        });
         return this.beElement;
     }
     beforeEnd(content, callback) {
-        this.append(content, callback);
+        this.beElement.eachNode((el) => {
+            // Insérer à la fin de l'élément cible
+            el.appendChild(this.normalizeContent(content));
+            callback?.({
+                fragment: content,
+                be: be(el),
+                root: this.beElement
+            });
+        });
         return this.beElement;
     }
     replace(content, callback) {
         const ret = [];
         this.beElement.eachNode((el) => {
-            if (content instanceof Be) {
-                content.eachNode((child) => {
-                    ret.push(child);
-                    el.replaceWith(child);
-                });
+            const normalizedContent = this.normalizeContent(content);
+            if (normalizedContent instanceof DocumentFragment) {
+                el.replaceWith(...normalizedContent.childNodes);
             }
             else {
-                ret.push(content);
-                el.replaceWith(content);
+                ret.push(normalizedContent);
+                el.replaceWith(normalizedContent);
             }
         });
         callback?.({
@@ -223,12 +243,78 @@ export class DomHandler {
         return this.beElement;
     }
     adjacentElement(element, content, mode) {
-        element.insertAdjacentElement(mode, content);
-        return this.beElement;
+        const normalizedContent = this.normalizeContent(content);
+        if (typeof content === 'string') {
+            // Si le contenu est une chaîne HTML, utilisez insertAdjacentHTML
+            element.insertAdjacentHTML(mode, content);
+        }
+        else if (normalizedContent instanceof HTMLElement) {
+            // Si le contenu est un élément DOM, utilisez insertAdjacentElement
+            if (mode === 'afterend') {
+                element.parentNode?.insertBefore(normalizedContent, element.nextSibling);
+            }
+            else if (mode === 'beforebegin') {
+                element.parentNode?.insertBefore(normalizedContent, element);
+            }
+            else {
+                element.insertAdjacentElement(mode, normalizedContent);
+            }
+        }
+        else if (normalizedContent instanceof DocumentFragment) {
+            // Si le contenu est un fragment, insérez chaque nœud
+            Array.from(normalizedContent.childNodes).forEach((node) => {
+                if (mode === 'afterbegin' || mode === 'beforeend') {
+                    element.appendChild(node);
+                }
+                else if (mode === 'afterend') {
+                    element.parentNode?.insertBefore(node, element.nextSibling);
+                }
+                else if (mode === 'beforebegin') {
+                    element.parentNode?.insertBefore(node, element);
+                }
+            });
+        }
+    }
+    normalizeContent(content) {
+        if (typeof content === 'string') {
+            // Si le contenu est une chaîne HTML, créez un fragment DOM
+            const template = document.createElement('template');
+            template.innerHTML = content.trim();
+            return template.content;
+        }
+        else if (content instanceof Be) {
+            // Si le contenu est une instance de Be, utilisez son premier nœud
+            if (Array.isArray(content.node)) {
+                const fragment = document.createDocumentFragment();
+                content.node.forEach((node) => {
+                    if (node instanceof HTMLElement) {
+                        fragment.appendChild(node);
+                    }
+                });
+                return fragment;
+            }
+            else if (content.node instanceof HTMLElement) {
+                return content.node;
+            }
+            throw new Error('Invalid Be instance: no valid node found.');
+        }
+        else {
+            // Sinon, le contenu est déjà un HTMLElement
+            return content;
+        }
+    }
+    insertContent(el, content, mode) {
+        const normalizedContent = this.normalizeContent(content);
+        if (mode === 'afterEnd') {
+            el.parentNode?.insertBefore(normalizedContent, el.nextSibling);
+        }
+        else if (mode === 'beforeEnd') {
+            el.appendChild(normalizedContent);
+        }
     }
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.innerHTML;
+        return this.beElement.inputNode.innerHTML;
     }
 }

package/dist/modules/position.js

@@ -44,7 +44,7 @@ export class PositionHandler {
         if (!sourceEl)
             return this.beElement;
         const sourceRect = sourceEl.getBoundingClientRect();
-        const targetRect = this.beElement.node.getBoundingClientRect();
+        const targetRect = this.beElement.inputNode.getBoundingClientRect();
         const { offsetX = 0, offsetY = 0, useTransform = false } = options;
         this.beElement.eachNode((el) => {
             if (useTransform) {
@@ -82,7 +82,7 @@ export class PositionHandler {
             return this.beElement;
         const { alignment = 'center', offset = 0, useTransform = false } = options;
         const targetRect = targetEl.getBoundingClientRect();
-        const selfRect = this.beElement.node.getBoundingClientRect();
+        const selfRect = this.beElement.inputNode.getBoundingClientRect();
         let x = 0, y = 0;
         switch (alignment) {
             case 'center':
@@ -138,7 +138,7 @@ export class PositionHandler {
         const targetEl = typeof targetElement === 'string' ? document.querySelector(targetElement) : targetElement;
         if (!targetEl)
             return this.beElement;
-        const sourceRect = this.beElement.node.getBoundingClientRect();
+        const sourceRect = this.beElement.inputNode.getBoundingClientRect();
         const targetRect = targetEl.getBoundingClientRect();
         const { sourceAnchor, targetAnchor, offset = { x: 0, y: 0 } } = options;
         let sourceX, sourceY, targetX, targetY;
@@ -169,6 +169,6 @@ export class PositionHandler {
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.getBoundingClientRect();
+        return this.beElement.inputNode.getBoundingClientRect();
     }
 }

package/dist/modules/props.js

@@ -33,7 +33,7 @@ export class PropsHandler {
     get(name, callback) {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node[name];
+        return this.beElement.inputNode[name];
     }
     set(nameOrObject, value, callback) {
         this.beElement.eachNode((el) => {
@@ -55,7 +55,7 @@ export class PropsHandler {
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        const el = this.beElement.node;
+        const el = this.beElement.inputNode;
         const props = {};
         for (let prop in el) {
             if (el.hasOwnProperty(prop)) {

package/dist/modules/text.js

@@ -20,7 +20,7 @@ export class TextHandler {
     get text() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.textContent;
+        return this.beElement.inputNode.textContent;
     }
     handle(actions) {
         this.beElement.eachNode((el) => {
@@ -86,6 +86,6 @@ export class TextHandler {
     valueOf() {
         if (this.beElement.isWhat !== 'element')
             return null;
-        return this.beElement.node.innerText;
+        return this.beElement.inputNode.innerText;
     }
 }

package/dist/modules/walk.js

@@ -114,6 +114,7 @@ export class WalkHandler {
         this.beElement.eachNode((el) => {
             if (el.parentNode) {
                 const siblings = Array.from(el.parentNode.children).filter((child) => child !== el);
+                console.log('siblings found:', siblings); // Debug
                 ret.push(...siblings.filter((sibling) => !qy || sibling.matches(qy)));
             }
         });
@@ -186,15 +187,19 @@ export class WalkHandler {
     find(qy, callback) {
         const ret = [];
         this.beElement.eachNode((el) => {
-            ret.push(el.querySelector(qy));
+            const found = el.querySelector(qy);
+            console.log('find result:', found); // Debug
+            if (found)
+                ret.push(found);
         });
+        const resultBe = Be.elem(ret); // Encapsule les résultats dans une instance de Be
         callback?.({
             root: this.beElement,
-            be: Be.elem(ret),
+            be: resultBe,
             fragment: 'result',
-            requested: Be.elem(ret)
+            requested: resultBe
         });
-        return this.beElement;
+        return resultBe;
     }
     /**
      * Finds all descendants that match the selector.
@@ -225,18 +230,22 @@ export class WalkHandler {
             try {
                 const ret = [];
                 this.beElement.eachNode((el) => {
-                    const results = this.selectWhile(el, method, qy);
-                    ret.push(...results);
+                    const result = this.selectWhile(el, method, qy);
+                    console.log(`methodize result for ${method}:`, typeof result, result); // Debug
+                    if (result)
+                        ret.push(...(Array.isArray(result) ? result : [result]));
                 });
+                const resultBe = Be.elem(ret);
                 callback?.({
                     root: this.beElement,
-                    be: Be.elem(ret),
+                    be: resultBe,
                     fragment: 'result',
-                    requested: Be.elem(ret)
+                    requested: resultBe
                 });
+                return resultBe;
             }
             catch (e) {
-                console.log(e);
+                console.error(`Error in methodize for ${method}:`, e); // Debug
             }
             return this.beElement;
         };
@@ -250,31 +259,47 @@ export class WalkHandler {
      */
     selectWhile(element, direction, selector) {
         const dict = {
-            up: 'parentNode',
-            parent: 'parentNode',
+            up: 'parentElement',
             next: 'nextElementSibling',
             previous: 'previousElementSibling',
-            siblings: 'nextElementSibling',
+            siblings: 'parentElement',
             children: 'children',
             firstChild: 'firstElementChild',
             lastChild: 'lastElementChild',
             closest: 'closest'
         };
-        const property = dict[direction] ?? direction;
-        if (property === 'children') {
+        const property = dict[direction];
+        // Handle recursive traversal for `up`
+        if (direction === 'up') {
+            let current = element;
+            while (current) {
+                current = current[property];
+                if (!selector || (current && current.matches(selector))) {
+                    return current;
+                }
+            }
+            return null;
+        }
+        // Handle `siblings`
+        if (direction === 'siblings') {
+            const parent = element.parentElement;
+            if (!parent)
+                return [];
+            const siblings = Array.from(parent.children).filter((child) => child !== element);
+            return selector ? siblings.filter((sibling) => sibling.matches(selector)) : siblings;
+        }
+        // Handle `children`
+        if (direction === 'children') {
             const children = Array.from(element.children);
             return selector ? children.filter((child) => child.matches(selector)) : children;
         }
-        if (property === 'closest') {
-            return element.closest(selector ?? '*');
-        }
-        let sibling = element[property];
-        while (sibling) {
-            if (!selector || sibling.matches(selector)) {
-                return sibling;
-            }
-            sibling = sibling[property];
+        // Handle `closest`
+        if (direction === 'closest') {
+            const closest = element.closest(selector ?? '*');
+            return closest;
         }
-        return null;
+        // Handle single-step traversal (e.g., `next`, `previous`, `firstChild`, `lastChild`)
+        const target = element[property];
+        return target && (!selector || target.matches(selector)) ? target : null;
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@medyll/idae-be",
 	"scope": "@medyll",
-	"version": "0.79.0",
+	"version": "0.81.0",
 	"description": "A powerful DOM manipulation library with a callback-based approach for precise element targeting. Provides consistent chaining, comprehensive DOM traversal, event handling, style management, and more. Written in TypeScript for modern browsers.",
 	"scripts": {
 		"dev": "vite dev",