selective-ui 1.0.2 → 1.0.3

package/src/js/services/refresher.js

@@ -1,40 +1,40 @@
-import {Libs} from "../utils/libs.js";
-
-/**
- * @class
- */
-export class Refresher {
-    /**
-     * Provides a utility to resize the Select UI view panel based on the bound <select> element
-     * and configuration options. Applies explicit width/height if configured; otherwise uses the
-     * select's current offset size. Ensures minimum width/height constraints are respected.
-     *
-     * @param {HTMLSelectElement} select - The native select element used to derive dimensions.
-     * @param {HTMLElement} view - The view panel element whose styles will be updated.
-     */
-    static resizeBox(select, view) {
-        const 
-            bindedMap = Libs.getBinderMap(select),
-            options = bindedMap.options
-        ;
-        
-        const 
-            minWidth = options.minWidth,
-            minHeight = options.minHeight,
-            cfgWidth = parseInt(options.width, 10),
-            cfgHeight = parseInt(options.height, 10)
-        ;
-        
-        let width = `${select.offsetWidth}px`,
-            height = `${select.offsetHeight}px`;
-        
-        if (cfgWidth > 0) {
-            width = options.width;
-        }
-        if (cfgHeight > 0) {
-            height = options.height;
-        }
-
-        Libs.setStyle(view, {width, height, minWidth, minHeight});
-    }
+import {Libs} from "../utils/libs.js";
+
+/**
+ * @class
+ */
+export class Refresher {
+    /**
+     * Provides a utility to resize the Select UI view panel based on the bound <select> element
+     * and configuration options. Applies explicit width/height if configured; otherwise uses the
+     * select's current offset size. Ensures minimum width/height constraints are respected.
+     *
+     * @param {HTMLSelectElement} select - The native select element used to derive dimensions.
+     * @param {HTMLElement} view - The view panel element whose styles will be updated.
+     */
+    static resizeBox(select, view) {
+        const 
+            bindedMap = Libs.getBinderMap(select),
+            options = bindedMap.options
+        ;
+        
+        const 
+            minWidth = options.minWidth,
+            minHeight = options.minHeight,
+            cfgWidth = parseInt(options.width, 10),
+            cfgHeight = parseInt(options.height, 10)
+        ;
+        
+        let width = `${select.offsetWidth}px`,
+            height = `${select.offsetHeight}px`;
+        
+        if (cfgWidth > 0) {
+            width = options.width;
+        }
+        if (cfgHeight > 0) {
+            height = options.height;
+        }
+
+        Libs.setStyle(view, {width, height, minWidth, minHeight});
+    }
 }

package/src/js/services/resize-observer.js

@@ -1,152 +1,152 @@
-
-/**
- * @class
- */
-export class ResizeObserverService {
-    isInit = false;
-    element = null;
-    /** @type {ResizeObserver} */
-    #resizeObserver = null;
-    #mutationObserver = null;
-    #boundUpdateChanged;
-    
-    /**
-     * Initializes the service and binds the internal update handler to `this`.
-     * Sets the service to an initialized state.
-     */
-    constructor() {
-        this.isInit = true
-        this.#boundUpdateChanged = this.#updateChanged.bind(this);
-    }
-
-    /**
-     * Callback invoked when the observed element's metrics change.
-     * Override to react to size/position/style updates.
-     *
-     * @param {ElementMetrics} metrics - Calculated box metrics (size, position, padding, border, margin).
-     */
-    onChanged(metrics) {}
-
-    /**
-     * Computes the current metrics of the bound element (bounding rect + computed styles)
-     * and forwards them to `onChanged(metrics)`.
-     *
-     * @returns {void}
-     */
-    #updateChanged() {
-        // Guard: nếu element chưa sẵn sàng hoặc không đo được, trả về metrics mặc định
-        const el = this.element;
-        if (!el || typeof el.getBoundingClientRect !== 'function') {
-            /** @type {ElementMetrics} */
-            const defaultMetrics = {
-                width: 0,
-                height: 0,
-                top: 0,
-                left: 0,
-                padding: { top: 0, right: 0, bottom: 0, left: 0 },
-                border:  { top: 0, right: 0, bottom: 0, left: 0 },
-                margin:  { top: 0, right: 0, bottom: 0, left: 0 },
-            };
-            this.onChanged(defaultMetrics);
-            return;
-        }
-
-        const rect = el.getBoundingClientRect();
-        const style = (typeof window?.getComputedStyle === 'function')
-            ? window.getComputedStyle(el)
-            : null;
-
-        /** @type {ElementMetrics} */
-        const metrics = {
-            width: rect?.width ?? 0,
-            height: rect?.height ?? 0,
-            top: rect?.top ?? 0,
-            left: rect?.left ?? 0,
-
-            padding: {
-                top: parseFloat(style?.paddingTop ?? '0'),
-                right: parseFloat(style?.paddingRight ?? '0'),
-                bottom: parseFloat(style?.paddingBottom ?? '0'),
-                left: parseFloat(style?.paddingLeft ?? '0'),
-            },
-
-            border: {
-                top: parseFloat(style?.borderTopWidth ?? '0'),
-                right: parseFloat(style?.borderRightWidth ?? '0'),
-                bottom: parseFloat(style?.borderBottomWidth ?? '0'),
-                left: parseFloat(style?.borderLeftWidth ?? '0'),
-            },
-
-            margin: {
-                top: parseFloat(style?.marginTop ?? '0'),
-                right: parseFloat(style?.marginRight ?? '0'),
-                bottom: parseFloat(style?.marginBottom ?? '0'),
-                left: parseFloat(style?.marginLeft ?? '0'),
-            }
-        };
-        
-        this.onChanged(metrics);
-    }
-    
-    /**
-     * Manually triggers a metrics computation and notification via `onChanged`.
-     */
-    trigger() {
-        this.#updateChanged();
-    }
-    
-    /**
-     * Starts observing the provided element for resize and style/class mutations,
-     * and listens to window/visualViewport scroll/resize to detect layout changes.
-     *
-     * @param {Element} element - The element to observe; must be a valid DOM Element.
-     * @throws {Error} If `element` is not an instance of Element.
-     */
-    connect(element) {
-        if (!(element instanceof Element)) {
-            throw new Error("Element không hợp lệ");
-        }
-
-        this.element = element;
-
-        this.#resizeObserver = new ResizeObserver(this.#boundUpdateChanged);
-        this.#resizeObserver.observe(element);
-
-        this.#mutationObserver = new MutationObserver(this.#boundUpdateChanged);
-        this.#mutationObserver.observe(element, {
-            attributes: true,
-            attributeFilter: ["style", "class"]
-        });
-
-        window.addEventListener("scroll", this.#boundUpdateChanged, true);
-        window.addEventListener("resize", this.#boundUpdateChanged);
-
-        if (window.visualViewport) {
-            window.visualViewport.addEventListener("resize", this.#boundUpdateChanged);
-            window.visualViewport.addEventListener("scroll", this.#boundUpdateChanged);
-        }
-    }
-    
-    /**
-     * Stops all observations and event listeners, resets the change handler,
-     * and releases internal observer resources.
-     */
-    disconnect() {
-        // Optional chaining để an toàn với mocks trong môi trường test
-        this.#resizeObserver?.disconnect?.();
-        this.#mutationObserver?.disconnect?.();
-
-        this.onChanged = (metrics) => {};
-        window.removeEventListener("scroll", this.#boundUpdateChanged, true);
-        window.removeEventListener("resize", this.#boundUpdateChanged);
-
-        if (window.visualViewport) {
-            window.visualViewport.removeEventListener("resize", this.#boundUpdateChanged);
-            window.visualViewport.removeEventListener("scroll", this.#boundUpdateChanged);
-        }
-
-        this.#resizeObserver = null;
-        this.#mutationObserver = null;
-        this.element = null;
-    }
+
+/**
+ * @class
+ */
+export class ResizeObserverService {
+    isInit = false;
+    element = null;
+    /** @type {ResizeObserver} */
+    #resizeObserver = null;
+    #mutationObserver = null;
+    #boundUpdateChanged;
+    
+    /**
+     * Initializes the service and binds the internal update handler to `this`.
+     * Sets the service to an initialized state.
+     */
+    constructor() {
+        this.isInit = true
+        this.#boundUpdateChanged = this.#updateChanged.bind(this);
+    }
+
+    /**
+     * Callback invoked when the observed element's metrics change.
+     * Override to react to size/position/style updates.
+     *
+     * @param {ElementMetrics} metrics - Calculated box metrics (size, position, padding, border, margin).
+     */
+    onChanged(metrics) {}
+
+    /**
+     * Computes the current metrics of the bound element (bounding rect + computed styles)
+     * and forwards them to `onChanged(metrics)`.
+     *
+     * @returns {void}
+     */
+    #updateChanged() {
+        // Guard: nếu element chưa sẵn sàng hoặc không đo được, trả về metrics mặc định
+        const el = this.element;
+        if (!el || typeof el.getBoundingClientRect !== 'function') {
+            /** @type {ElementMetrics} */
+            const defaultMetrics = {
+                width: 0,
+                height: 0,
+                top: 0,
+                left: 0,
+                padding: { top: 0, right: 0, bottom: 0, left: 0 },
+                border:  { top: 0, right: 0, bottom: 0, left: 0 },
+                margin:  { top: 0, right: 0, bottom: 0, left: 0 },
+            };
+            this.onChanged(defaultMetrics);
+            return;
+        }
+
+        const rect = el.getBoundingClientRect();
+        const style = (typeof window?.getComputedStyle === 'function')
+            ? window.getComputedStyle(el)
+            : null;
+
+        /** @type {ElementMetrics} */
+        const metrics = {
+            width: rect?.width ?? 0,
+            height: rect?.height ?? 0,
+            top: rect?.top ?? 0,
+            left: rect?.left ?? 0,
+
+            padding: {
+                top: parseFloat(style?.paddingTop ?? '0'),
+                right: parseFloat(style?.paddingRight ?? '0'),
+                bottom: parseFloat(style?.paddingBottom ?? '0'),
+                left: parseFloat(style?.paddingLeft ?? '0'),
+            },
+
+            border: {
+                top: parseFloat(style?.borderTopWidth ?? '0'),
+                right: parseFloat(style?.borderRightWidth ?? '0'),
+                bottom: parseFloat(style?.borderBottomWidth ?? '0'),
+                left: parseFloat(style?.borderLeftWidth ?? '0'),
+            },
+
+            margin: {
+                top: parseFloat(style?.marginTop ?? '0'),
+                right: parseFloat(style?.marginRight ?? '0'),
+                bottom: parseFloat(style?.marginBottom ?? '0'),
+                left: parseFloat(style?.marginLeft ?? '0'),
+            }
+        };
+        
+        this.onChanged(metrics);
+    }
+    
+    /**
+     * Manually triggers a metrics computation and notification via `onChanged`.
+     */
+    trigger() {
+        this.#updateChanged();
+    }
+    
+    /**
+     * Starts observing the provided element for resize and style/class mutations,
+     * and listens to window/visualViewport scroll/resize to detect layout changes.
+     *
+     * @param {Element} element - The element to observe; must be a valid DOM Element.
+     * @throws {Error} If `element` is not an instance of Element.
+     */
+    connect(element) {
+        if (!(element instanceof Element)) {
+            throw new Error("Element không hợp lệ");
+        }
+
+        this.element = element;
+
+        this.#resizeObserver = new ResizeObserver(this.#boundUpdateChanged);
+        this.#resizeObserver.observe(element);
+
+        this.#mutationObserver = new MutationObserver(this.#boundUpdateChanged);
+        this.#mutationObserver.observe(element, {
+            attributes: true,
+            attributeFilter: ["style", "class"]
+        });
+
+        window.addEventListener("scroll", this.#boundUpdateChanged, true);
+        window.addEventListener("resize", this.#boundUpdateChanged);
+
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener("resize", this.#boundUpdateChanged);
+            window.visualViewport.addEventListener("scroll", this.#boundUpdateChanged);
+        }
+    }
+    
+    /**
+     * Stops all observations and event listeners, resets the change handler,
+     * and releases internal observer resources.
+     */
+    disconnect() {
+        // Optional chaining để an toàn với mocks trong môi trường test
+        this.#resizeObserver?.disconnect?.();
+        this.#mutationObserver?.disconnect?.();
+
+        this.onChanged = (metrics) => {};
+        window.removeEventListener("scroll", this.#boundUpdateChanged, true);
+        window.removeEventListener("resize", this.#boundUpdateChanged);
+
+        if (window.visualViewport) {
+            window.visualViewport.removeEventListener("resize", this.#boundUpdateChanged);
+            window.visualViewport.removeEventListener("scroll", this.#boundUpdateChanged);
+        }
+
+        this.#resizeObserver = null;
+        this.#mutationObserver = null;
+        this.element = null;
+    }
 }

package/src/js/services/select-observer.js

@@ -1,61 +1,61 @@
-export class SelectObserver {
-    /** @type {MutationObserver} */
-    #observer;
-
-    /** @type {HTMLSelectElement} */
-    #select;
-
-    #debounceTimer = null;
-
-    /**
-     * Observes a <select> element for option list and attribute changes, with debouncing.
-     * Detects modifications to children (options added/removed) and relevant attributes
-     * ("selected", "value", "disabled"). Emits updates via the overridable onChanged() hook.
-     *
-     * @param {HTMLSelectElement} select - The <select> element to monitor.
-     */
-    constructor(select) {
-        this.#observer = new MutationObserver(() => {
-            clearTimeout(this.#debounceTimer);
-            this.#debounceTimer = setTimeout(() => {
-                this.onChanged(select);
-            }, 50);
-        });
-
-        this.#select = select;
-
-        select.addEventListener("options:changed", () => {
-            this.onChanged(select);
-        });
-    }
-
-    /**
-     * Starts observing the select element for child list mutations and attribute changes.
-     * Uses a MutationObserver with a debounce to batch rapid updates.
-     */
-    connect() {
-        this.#observer.observe(this.#select, {
-            childList: true,
-            subtree: false,
-
-            attributes: true,
-            attributeFilter: ["selected", "value", "disabled"]
-        });
-    }
-
-    /**
-     * Hook invoked when the select's options or attributes change.
-     * Override to handle updates; receives the current HTMLCollection of options.
-     *
-     * @param {HTMLSelectElement} options - The Select element.
-     */
-    onChanged(options) { }
-
-    /**
-     * Stops observing the select element and clears any pending debounce timers.
-     */
-    disconnect() {
-        clearTimeout(this.#debounceTimer);
-        this.#observer.disconnect();
-    }
+export class SelectObserver {
+    /** @type {MutationObserver} */
+    #observer;
+
+    /** @type {HTMLSelectElement} */
+    #select;
+
+    #debounceTimer = null;
+
+    /**
+     * Observes a <select> element for option list and attribute changes, with debouncing.
+     * Detects modifications to children (options added/removed) and relevant attributes
+     * ("selected", "value", "disabled"). Emits updates via the overridable onChanged() hook.
+     *
+     * @param {HTMLSelectElement} select - The <select> element to monitor.
+     */
+    constructor(select) {
+        this.#observer = new MutationObserver(() => {
+            clearTimeout(this.#debounceTimer);
+            this.#debounceTimer = setTimeout(() => {
+                this.onChanged(select);
+            }, 50);
+        });
+
+        this.#select = select;
+
+        select.addEventListener("options:changed", () => {
+            this.onChanged(select);
+        });
+    }
+
+    /**
+     * Starts observing the select element for child list mutations and attribute changes.
+     * Uses a MutationObserver with a debounce to batch rapid updates.
+     */
+    connect() {
+        this.#observer.observe(this.#select, {
+            childList: true,
+            subtree: false,
+
+            attributes: true,
+            attributeFilter: ["selected", "value", "disabled"]
+        });
+    }
+
+    /**
+     * Hook invoked when the select's options or attributes change.
+     * Override to handle updates; receives the current HTMLCollection of options.
+     *
+     * @param {HTMLSelectElement} options - The Select element.
+     */
+    onChanged(options) { }
+
+    /**
+     * Stops observing the select element and clears any pending debounce timers.
+     */
+    disconnect() {
+        clearTimeout(this.#debounceTimer);
+        this.#observer.disconnect();
+    }
 }

package/src/js/types/adapter.type.js

@@ -1,33 +1,33 @@
-
-/**
- * @template {ModelContract<any, any>} TItem
- * @typedef {Object} AdapterContract
- *
- * @property {TItem[]} items - List of items managed by the adapter.
- * @property {string} adapterKey - Unique key identifier for the adapter.
- *
- * @property {(items: TItem[]) => void} setItems - Replace or update the list of items.
- * @property {(items: TItem[]) => void} syncFromSource - Synchronize items from an external source.
- * @property {() => number} itemCount - Get the number of items.
- *
- * @property {(parent: HTMLElement, item: TItem) => any} viewHolder
- *           - Create a viewer for the given item inside the parent container.
- *
- * @property {(item: TItem, viewer: any, position: number) => void} onViewHolder
- *           - Bind an item to its viewer at the specified position (render if not initialized, otherwise update).
- *
- * @property {(propName: string, callback: Function) => void} onPropChanging
- *           - Register a pre-change callback for a property.
- * @property {(propName: string, callback: Function) => void} onPropChanged
- *           - Register a post-change callback for a property.
- * @property {(propName: string, ...params: any[]) => void} changeProp
- *           - Trigger the post-change pipeline for a property.
- * @property {(propName: string, ...params: any[]) => void} changingProp
- *           - Trigger the pre-change pipeline for a property.
- *
- * @property {(parent: HTMLElement) => void} updateRecyclerView
- *           - Ensure all items have viewers and bind them into the recycler container.
- *
- * @property {(items: TItem[]) => void} updateData
- *           - Update adapter data (override in subclasses for custom behavior).
+
+/**
+ * @template {ModelContract<any, any>} TItem
+ * @typedef {Object} AdapterContract
+ *
+ * @property {TItem[]} items - List of items managed by the adapter.
+ * @property {string} adapterKey - Unique key identifier for the adapter.
+ *
+ * @property {(items: TItem[]) => void} setItems - Replace or update the list of items.
+ * @property {(items: TItem[]) => void} syncFromSource - Synchronize items from an external source.
+ * @property {() => number} itemCount - Get the number of items.
+ *
+ * @property {(parent: HTMLElement, item: TItem) => any} viewHolder
+ *           - Create a viewer for the given item inside the parent container.
+ *
+ * @property {(item: TItem, viewer: any, position: number) => void} onViewHolder
+ *           - Bind an item to its viewer at the specified position (render if not initialized, otherwise update).
+ *
+ * @property {(propName: string, callback: Function) => void} onPropChanging
+ *           - Register a pre-change callback for a property.
+ * @property {(propName: string, callback: Function) => void} onPropChanged
+ *           - Register a post-change callback for a property.
+ * @property {(propName: string, ...params: any[]) => void} changeProp
+ *           - Trigger the post-change pipeline for a property.
+ * @property {(propName: string, ...params: any[]) => void} changingProp
+ *           - Trigger the pre-change pipeline for a property.
+ *
+ * @property {(parent: HTMLElement) => void} updateRecyclerView
+ *           - Ensure all items have viewers and bind them into the recycler container.
+ *
+ * @property {(items: TItem[]) => void} updateData
+ *           - Update adapter data (override in subclasses for custom behavior).
  */

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

@@ -1,24 +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
+/**
+ * @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

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