@medyll/idae-be/dist/modules/data.js

A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attri

import { BeUtils } from '../utils.js';
import { Be } from '../be.js';
var dataMethods;
(function (dataMethods) {
    dataMethods["set"] = "set";
    dataMethods["get"] = "get";
    dataMethods["delete"] = "delete";
    dataMethods["getKey"] = "getKey";
})(dataMethods || (dataMethods = {}));
/**
 * Handles operations on `data-*` attributes for Be elements.
 */
export class DataHandler {
    beElement;
    static methods = Object.values(dataMethods);
    /**
     * Initializes the DataHandler with a Be element.
     * @param element - The Be element to operate on.
     */
    constructor(element) {
        this.beElement = element;
    }
    methods = DataHandler.methods;
    /**
     * Handles dynamic method calls for data operations.
     * @param actions - The action to perform (e.g., set, get, delete).
     * @returns The Be element for chaining.
     */
    handle(actions) {
        const { method, props } = BeUtils.resolveIndirection(this, actions);
        switch (method) {
            case 'set':
            case 'delete':
                this[method](props.keyOrObject, props.value);
                break;
        }
        return this.beElement;
    }
    /**
     * Retrieves the value of a `data-*` attribute.
     * @param key - The key of the `data-*` attribute to retrieve.
     * @returns The value of the attribute, or `null` if not found.
     * @example
     * // HTML: <div id="test" data-role="admin"></div>
     * const beInstance = be('#test');
     * const role = beInstance.getData('role');
     * console.log(role); // Output: "admin"
     */
    get(key) {
        if (this.beElement.isWhat !== 'element')
            return null;
        return this.beElement.inputNode.dataset[key] || null;
    }
    /**
     * Sets one or more `data-*` attributes.
     * @param keyOrObject - A key-value pair or an object containing multiple key-value pairs.
     * @param value - The value to set if a single key is provided.
     * @returns The Be element for chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * beInstance.setData('role', 'admin'); // Sets a single `data-role` attribute
     * beInstance.setData({ role: 'admin', type: 'user' }); // Sets multiple `data-*` attributes
     */
    set(keyOrObject, value) {
        this.beElement.eachNode((el) => {
            if (typeof keyOrObject === 'string' && value !== undefined) {
                el.dataset[keyOrObject] = value;
            }
            else if (typeof keyOrObject === 'object') {
                Object.entries(keyOrObject).forEach(([key, val]) => {
                    el.dataset[key] = val;
                });
            }
        });
        return this.beElement;
    }
    /**
     * Deletes one or more `data-*` attributes.
     * @param keyOrObject - A key or an object containing multiple keys to delete.
     * @returns The Be element for chaining.
     * @example
     * // HTML: <div id="test" data-role="admin" data-type="user"></div>
     * const beInstance = be('#test');
     * beInstance.deleteData('role'); // Deletes the `data-role` attribute
     * beInstance.deleteData({ type: '' }); // Deletes the `data-type` attribute
     */
    delete(keyOrObject) {
        this.beElement.eachNode((el) => {
            if (typeof keyOrObject === 'string') {
                // Deletes a single attribute
                delete el.dataset[keyOrObject];
            }
            else if (typeof keyOrObject === 'object') {
                // Deletes multiple attributes
                Object.keys(keyOrObject).forEach((key) => {
                    delete el.dataset[key];
                });
            }
        });
        return this.beElement;
    }
    /**
     * Retrieves the value of a specific `data-*` attribute.
     * @param key - The key of the `data-*` attribute to retrieve.
     * @returns The value of the attribute, or `null` if not found.
     * @example
     * // HTML: <div id="test" data-role="admin"></div>
     * const beInstance = be('#test');
     * const role = beInstance.getKey('role');
     * console.log(role); // Output: "admin"
     */
    getKey(key) {
        if (this.beElement.isWhat !== 'element')
            return null;
        return this.beElement.inputNode.dataset[key] || null;
    }
    /**
     * Retrieves all `data-*` attributes as a DOMStringMap.
     * @returns A DOMStringMap containing all `data-*` attributes, or `null` if not applicable.
     * @example
     * // HTML: <div id="test" data-role="admin" data-type="user"></div>
     * const beInstance = be('#test');
     * const dataAttributes = beInstance.data.valueOf();
     * console.log(dataAttributes); // Output: { role: "admin", type: "user" }
     */
    valueOf() {
        if (this.beElement.isWhat !== 'element')
            return null;
        return this.beElement.inputNode.dataset;
    }
}