selective-ui 1.0.2

package/src/js/types/effector.type.js

@@ -0,0 +1,24 @@
+/**
+ * @typedef {Object} SizeObject
+ * @property {number} width
+ * @property {number} height
+ */
+
+/**
+ * @typedef {Object} DimensionObject
+ * @property {number} width
+ * @property {number} height
+ * @property {number} scrollHeight
+ */
+
+/**
+ * @typedef {Object} EffectorInterface
+ * @property {(query: string | HTMLElement) => void} setElement
+ * @property {HTMLElement} element
+ * @property {(object: {}) => EffectorInterface} expand
+ * @property {() => EffectorInterface} cancel
+ * @property {(object: {}) => EffectorInterface} collapse
+ * @property {(object: {}) => EffectorInterface} resize
+ * @property {boolean} isAnimating
+ * @property {(string: "flex") => DimensionObject} getHiddenDimensions
+ */

package/src/js/types/ievents.type.js

@@ -0,0 +1,11 @@
+/**
+ * @typedef {Object} IEventCallback
+ * @property {() => void} stopPropagation
+ * @property {() => void} cancel
+ */
+
+/**
+ * @typedef {Object} IEventToken
+ * @property {boolean} isContinue
+ * @property {boolean} isCancel
+ */

package/src/js/types/libs.type.js

@@ -0,0 +1,28 @@
+/**
+ * @template TTags
+ * @typedef {{
+ *   id: string
+ *   view: HTMLElement
+ *   tags: TTags
+ * }} MountViewResult
+ */
+
+/**
+ * @typedef {Object} NodeSpec
+ * @property {string} [node]
+ * @property {string|string[]} [classList]
+ * @property {Object} [style]
+ * @property {Object} [dataset]
+ * @property {string} [innerHTML]
+ * @property {string} [textContent]
+ * @property {string} [role]
+ * @property {string} [ariaLive]
+ * @property {string} [ariaLabel]
+ * @property {string} [ariaLabelledby]
+ * @property {string} [ariaControls]
+ * @property {string} [ariaHaspopup]
+ * @property {string} [ariaMultiselectable]
+ * @property {string} [ariaAutocomplete]
+ * @property {string} [tabIndex]
+ * @property {Record<string, EventListenerOrEventListenerObject>} [event]
+ */

package/src/js/types/model.type.js

@@ -0,0 +1,11 @@
+/**
+ * @template TTarget
+ * @template {ViewContract<any>} TView
+ * @typedef {Object} ModelContract
+ *
+ * @property {TTarget | null} targetElement
+ * @property {TView | null} view
+ * @property {any} value
+ * @property {number} position
+ * @property {boolean} isInit
+ */

package/src/js/types/recyclerview.type.js

@@ -0,0 +1,12 @@
+/**
+ * @template TAdapter extends AdapterContract
+ * @typedef {Object} RecyclerViewContract
+ *
+ * @property {HTMLElement | null} viewElement - The container element for the recycler view
+ * @property {TAdapter | null} adapter - The adapter instance controlling the items
+ * @property {(viewElement: HTMLElement) => void} setView - Set or change the container element
+ * @property {(adapter: TAdapter) => void} setAdapter - Attach an adapter and refresh the view
+ * @property {() => void} render - Render all item views inside the container
+ * @property {() => void} clear - Clear all item views from the container
+ * @property {() => void} refresh - Refresh item views from the container
+ */

package/src/js/types/resize-observer.type.js

@@ -0,0 +1,19 @@
+/**
+ * @typedef {Object} BoxEdges
+ * @property {number} top
+ * @property {number} right
+ * @property {number} bottom
+ * @property {number} left
+ */
+
+/**
+ * @typedef {Object} ElementMetrics
+ * @property {number} width
+ * @property {number} height
+ * @property {number} top
+ * @property {number} left
+ *
+ * @property {BoxEdges} padding
+ * @property {BoxEdges} border
+ * @property {BoxEdges} margin
+ */

package/src/js/types/view.group.type.js

@@ -0,0 +1,13 @@
+/**
+ * @typedef {{
+ *   GroupView: HTMLDivElement
+ *   GroupHeader: HTMLDivElement
+ *   GroupItems: HTMLDivElement
+ * }} GroupViewTags
+ */
+
+/**
+ * @typedef {MountViewResult<GroupViewTags> & {
+ *   view: Element
+ * }} GroupViewResult
+ */

package/src/js/types/view.option.type.js

@@ -0,0 +1,15 @@
+/**
+ * @typedef {{
+ *   OptionView: HTMLDivElement,
+ *   OptionInput: HTMLInputElement,
+ *   OptionLabel: HTMLLabelElement,
+ *   LabelContent: HTMLDivElement
+ *   OptionImage: HTMLImageElement
+ * }} OptionViewTags
+ */
+
+/**
+ * @typedef {MountViewResult<OptionViewTags> & {
+ *   view: Element
+ * }} OptionViewResult
+ */

package/src/js/types/view.type.js

@@ -0,0 +1,11 @@
+/**
+ * @template {Record<string, Element>} TTags
+ * @typedef {Object} ViewContract
+ *
+ * @property {Element | null} parent
+ * @property {MountViewResult<TTags> | null} view
+ * @property {() => void} render
+ * @property {<K extends keyof TTags>(tag: K) => TTags[K]} getTag
+ * @property {() => TTags} getTags
+ * @property {() => Element} getView
+ */

package/src/js/utils/guard.js

@@ -0,0 +1,47 @@
+/**
+ * Checks for a previously loaded global library instance by name.
+ * If found (with `__loaded` flag), logs a warning and returns true; otherwise
+ * initializes a loading placeholder on `window[name]` and returns false.
+ *
+ * @param {string} LIB_NAME - The global namespace key to check on `window`.
+ * @returns {boolean} - True if a loaded instance already exists; false otherwise.
+ */
+export function checkDuplicate(LIB_NAME) {
+    if (typeof window === "undefined") return false;
+    
+    if (window[LIB_NAME] && window[LIB_NAME].__loaded) {
+        console.warn(
+            `[${LIB_NAME}] Already loaded (v${window[LIB_NAME].__version}). ` +
+            `Using existing instance. Please remove duplicate <script> tags.`
+        );
+        return true;
+    }
+    
+    window[LIB_NAME] = window[LIB_NAME] || {};
+    window[LIB_NAME].__loading = true;
+    return false;
+}
+
+/**
+ * Marks a global library namespace as fully loaded, sets version metadata,
+ * merges its public API into `window[name]`, freezes the object to prevent
+ * further mutation, and logs a success message.
+ *
+ * @param {string} name - The global namespace key on `window`.
+ * @param {string} version - Semantic version string of the library.
+ * @param {Object} api - Public API surface to expose under `window[name]`.
+ * @returns {void}
+ */
+export function markLoaded(name, version, api) {
+    if (typeof window === "undefined") return;
+    
+    window[name].__loaded = true;
+    window[name].__loading = false;
+    window[name].__version = version;
+    
+    Object.assign(window[name], api);
+    
+    Object.freeze(window[name]);
+    
+    console.log(`[${name}] v${version} loaded successfully`);
+}

package/src/js/utils/ievents.js

@@ -0,0 +1,83 @@
+
+/**
+ * Provides a lightweight event utility with cancel/continue control:
+ * - buildEventToken(): creates a token/callback pair to control flow (stopPropagation/cancel).
+ * - callEvent(): invokes handlers in order, passing params; stops when canceled or propagation stopped.
+ * - trigger(): dispatches a native DOM Event on the given element.
+ * - callFunctions(): executes an array of functions with optional parameters.
+ */
+export class iEvents {
+    /**
+     * Creates an event token and its controller callbacks.
+     * @returns {{ token: IEventToken, callback: IEventCallback }}
+     */
+    static buildEventToken() {
+        const privToken = { isContinue: true, isCancel: false };
+
+        const token = {
+            get isContinue() { return privToken.isContinue; },
+            get isCancel() { return privToken.isCancel; }
+        };
+
+        const callback = {
+            stopPropagation() { privToken.isContinue = false; },
+            cancel() { privToken.isCancel = true; privToken.isContinue = false; }
+        };
+
+        return { token, callback };
+    }
+
+    /**
+     * Calls event handlers sequentially with optional parameters and a control callback.
+     * Stops invoking further handlers if canceled or propagation is stopped.
+     *
+     * @template T
+     * @param {T[]|null} params
+     * @param {...Function} handles
+     * @returns {IEventToken}
+     */
+    static callEvent(params, ...handles) {
+        const { token, callback } = this.buildEventToken();
+
+        for (let i = 0; i < handles.length; i++) {
+            const handle = handles[i];
+
+            if (typeof handle !== 'function') continue;
+
+            if (params && Array.isArray(params)) {
+                handle(callback, ...params);
+            } else {
+                handle(callback);
+            }
+
+            if (token.isCancel || !token.isContinue) break;
+        }
+
+        return token;
+    }
+
+    /**
+     * Dispatches a native DOM event on the specified element.
+     * @param {HTMLElement|Window|Document} element
+     * @param {string} eventSTR
+     * @param {{bubbles?: boolean, cancelable?: boolean}} [opts]
+     */
+    static trigger(element, eventSTR, opts = { bubbles: true, cancelable: true }) {
+        const evt = new Event(eventSTR, opts);
+        element.dispatchEvent(evt);
+        return evt;
+    }
+
+    /**
+     * Invokes an array of functions with optional parameters.
+     * @param {Function[]} funcs
+     * @param {...any} params
+     */
+    static callFunctions(funcs, ...params) {
+        if (!Array.isArray(funcs)) return;
+        for (const fn of funcs) {
+            if (typeof fn !== 'function') continue;
+            fn(...params);
+        }
+    }
+}

package/src/js/utils/istorage.js

@@ -0,0 +1,61 @@
+/**
+ * @class
+ */
+export class iStorage {
+    defaultConfig = {
+        showPanel: true,
+        accessoryStyle: "top",
+        multiple: false,
+        minWidth: "50px",
+        width: "0px",
+        offsetWidth: null,
+        minHeight: "30px",
+        height: "30px",
+        panelHeight: "220px",
+        panelMinHeight: "100px",
+        disabled: false,
+        readonly: false,
+        selectall: true,
+        keepSelected: true,
+        placeholder: "Chọn giá trị",
+        altMask: "",
+        autoclose: false,
+        autoscroll: true,
+        autofocus: true,
+        searchable: true,
+        loadingfield: true,
+        visible: true,
+        skipError: false,
+        customDelimiter: ",",
+        textLoading: "Đang xử lý...",
+        textNoData: "Không có dữ liệu",
+        textNotFound: "Không tìm thấy",
+        textSelectAll: "Chọn tất cả",
+        textDeselectAll: "Bỏ chọn",
+        textAccessoryDeselect: "Bỏ chọn: ",
+        animationtime: 200, // milisecond
+        delaysearchtime: 200, // milisecond
+        allowHtml: true,
+        maxSelected: 0,
+        labelHalign: "left",
+        labelValign: "center",
+        imageMode: false,
+        imageWidth: "60px",
+        imageHeight: "60px",
+        imageBorderRadius: "4px",
+        imagePosition: "right",
+        ajax: null,
+        on: {
+            load: [],
+            beforeShow: [],
+            show: [],
+            beforeChange: [],
+            change: [],
+            beforeClose: [],
+            close: []
+        }
+    };
+    bindedMap = new Map;
+    unbindedMap = new Map;
+    bindedCommand = [];
+}