selective-ui 1.0.2 → 1.0.3

package/src/js/index.js

@@ -1,137 +1,137 @@
-import "../css/index.css";
-import "../css/components/selectbox.css";
-import "../css/components/placeholder.css";
-import "../css/components/directive.css";
-import "../css/components/empty-state.css";
-import "../css/components/loading-state.css";
-import "../css/components/optgroup.css";
-import "../css/components/popup.css";
-import "../css/components/searchbox.css";
-import "../css/components/option-handle.css";
-import "../css/components/option.css";
-import "../css/components/accessorybox.css";
-
-import "./types/adapter.type";
-import "./types/effector.type";
-import "./types/ievents.type";
-import "./types/libs.type";
-import "./types/model.type";
-import "./types/recyclerview.type";
-import "./types/resize-observer.type";
-import "./types/view.option.type";
-import "./types/view.type";
-
-import { Selective } from "./utils/selective";
-import { checkDuplicate, markLoaded } from "./utils/guard";
-import { Libs } from "./utils/libs";
-import { Effector } from "./services/effector";
-
-export const version = "1.0.2";
-export const name = "SelectiveUI";
-
-const alreadyLoaded = checkDuplicate(name);
-
-/**
- * Enhances all <select> elements matching the query with Selective UI.
- * If a prior global instance is already loaded, proxies the call to it; otherwise uses local Selective.bind.
- *
- * @param {string} query - CSS selector for target <select> elements.
- * @param {object} [options={}] - Configuration overrides merged with defaults.
- */
-export function bind(query, options = {}) {
-    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
-        return window[name].bind(query, options);
-    }
-
-    Selective.bind(query, options);
-}
-
-/**
- * Retrieves the dynamic action API for bound instances matching the query.
- * Proxies to an already-loaded global instance if present; otherwise uses local Selective.find.
- *
- * @param {string} query - CSS selector identifying bound instances.
- * @returns {{isEmpty:boolean} & Record<string, unknown>} - Action API; {isEmpty:true} if none found.
- */
-export function find(query) {
-    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
-        return window[name].find(query);
-    }
-
-    return Selective.find(query);
-}
-
-/**
- * Destroys Selective instances associated with the given query.
- * Proxies to a global loaded instance if available; otherwise uses local Selective.destroy.
- *
- * @param {string} query - CSS selector identifying instances to tear down.
- * @returns {void}
- */
-export function destroy(query) {
-    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
-        return window[name].destroy(query);
-    }
-
-    return Selective.destroy(query);
-}
-
-/**
- * Rebinds Selective for the given query by destroying existing instances and binding anew.
- * Proxies to a global loaded instance if available; otherwise uses local Selective.rebind.
- *
- * @param {string} query - CSS selector for target <select> elements.
- * @param {object} [options={}] - Configuration overrides for the new binding.
- * @returns {void}
- */
-export function rebind(query, options = {}) {
-    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
-        return window[name].rebind(query, options);
-    }
-
-    return Selective.rebind(query, options);
-}
-
-/**
- * Returns an effector instance for a given element, enabling expand/collapse/resize animations.
- * Proxies to a global loaded instance if available; otherwise constructs a local Effector.
- *
- * @param {string|HTMLElement} element - CSS selector or element to control.
- * @returns {EffectorInterface} - The effector utility bound to the element.
- */
-export function effector(element) {
-    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
-        return window[name].effector(element);
-    }
-
-    return Effector(element);
-}
-
-if (!alreadyLoaded) {
-    let initialized = false;
-
-    function init() {
-        if (initialized) return;
-        initialized = true;
-        
-        document.addEventListener("mousedown", () => {
-            const sels = Libs.getBindedCommand();
-            if (sels.length > 0) {
-                const optanObj = Selective.find(sels.join(", "));
-                if (!optanObj.isEmpty) {
-                    optanObj.close();
-                }
-            }
-        });
-
-        Selective.Observer();
-        
-        markLoaded(name, version, { bind, find, destroy, rebind, effector, version });
-    }
-
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", init);
-    } else {
-        init();
-    }
+import "../css/index.css";
+import "../css/components/selectbox.css";
+import "../css/components/placeholder.css";
+import "../css/components/directive.css";
+import "../css/components/empty-state.css";
+import "../css/components/loading-state.css";
+import "../css/components/optgroup.css";
+import "../css/components/popup.css";
+import "../css/components/searchbox.css";
+import "../css/components/option-handle.css";
+import "../css/components/option.css";
+import "../css/components/accessorybox.css";
+
+import "./types/adapter.type";
+import "./types/effector.type";
+import "./types/ievents.type";
+import "./types/libs.type";
+import "./types/model.type";
+import "./types/recyclerview.type";
+import "./types/resize-observer.type";
+import "./types/view.option.type";
+import "./types/view.type";
+
+import { Selective } from "./utils/selective";
+import { checkDuplicate, markLoaded } from "./utils/guard";
+import { Libs } from "./utils/libs";
+import { Effector } from "./services/effector";
+
+export const version = "1.0.3";
+export const name = "SelectiveUI";
+
+const alreadyLoaded = checkDuplicate(name);
+
+/**
+ * Enhances all <select> elements matching the query with Selective UI.
+ * If a prior global instance is already loaded, proxies the call to it; otherwise uses local Selective.bind.
+ *
+ * @param {string} query - CSS selector for target <select> elements.
+ * @param {object} [options={}] - Configuration overrides merged with defaults.
+ */
+export function bind(query, options = {}) {
+    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
+        return window[name].bind(query, options);
+    }
+
+    Selective.bind(query, options);
+}
+
+/**
+ * Retrieves the dynamic action API for bound instances matching the query.
+ * Proxies to an already-loaded global instance if present; otherwise uses local Selective.find.
+ *
+ * @param {string} query - CSS selector identifying bound instances.
+ * @returns {{isEmpty:boolean} & Record<string, unknown>} - Action API; {isEmpty:true} if none found.
+ */
+export function find(query) {
+    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
+        return window[name].find(query);
+    }
+
+    return Selective.find(query);
+}
+
+/**
+ * Destroys Selective instances associated with the given query.
+ * Proxies to a global loaded instance if available; otherwise uses local Selective.destroy.
+ *
+ * @param {string} query - CSS selector identifying instances to tear down.
+ * @returns {void}
+ */
+export function destroy(query) {
+    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
+        return window[name].destroy(query);
+    }
+
+    return Selective.destroy(query);
+}
+
+/**
+ * Rebinds Selective for the given query by destroying existing instances and binding anew.
+ * Proxies to a global loaded instance if available; otherwise uses local Selective.rebind.
+ *
+ * @param {string} query - CSS selector for target <select> elements.
+ * @param {object} [options={}] - Configuration overrides for the new binding.
+ * @returns {void}
+ */
+export function rebind(query, options = {}) {
+    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
+        return window[name].rebind(query, options);
+    }
+
+    return Selective.rebind(query, options);
+}
+
+/**
+ * Returns an effector instance for a given element, enabling expand/collapse/resize animations.
+ * Proxies to a global loaded instance if available; otherwise constructs a local Effector.
+ *
+ * @param {string|HTMLElement} element - CSS selector or element to control.
+ * @returns {EffectorInterface} - The effector utility bound to the element.
+ */
+export function effector(element) {
+    if (alreadyLoaded && typeof window !== "undefined" && window[name]) {
+        return window[name].effector(element);
+    }
+
+    return Effector(element);
+}
+
+if (!alreadyLoaded) {
+    let initialized = false;
+
+    function init() {
+        if (initialized) return;
+        initialized = true;
+        
+        document.addEventListener("mousedown", () => {
+            const sels = Libs.getBindedCommand();
+            if (sels.length > 0) {
+                const optanObj = Selective.find(sels.join(", "));
+                if (!optanObj.isEmpty) {
+                    optanObj.close();
+                }
+            }
+        });
+
+        Selective.Observer();
+        
+        markLoaded(name, version, { bind, find, destroy, rebind, effector, version });
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
 }

package/src/js/models/group-model.js

@@ -1,143 +1,143 @@
-import { Model } from "../core/base/model";
-import { iEvents } from "../utils/ievents";
-import { Libs } from "../utils/libs";
-import { GroupView } from "../views/group-view";
-import { OptionModel } from "./option-model";
-
-/**
- * @extends {Model<HTMLOptGroupElement, GroupViewTags, GroupView>}
- */
-export class GroupModel extends Model {
-    label = "";
-    /** @type {OptionModel[]} */
-    items = [];
-    collapsed = false;
-    #privOnCollapsedChanged = [];
-
-    /**
-     * Initializes a group model with options and an optional <optgroup> target.
-     * Reads the label and collapsed state from the target element's attributes/dataset.
-     *
-     * @param {object} options - Configuration for the model.
-     * @param {HTMLOptGroupElement} [targetElement] - The source <optgroup> element.
-     */
-    constructor(options, targetElement) {
-        super(options, targetElement);
-        if (targetElement) {
-            this.label = targetElement.label;
-            this.collapsed = Libs.string2Boolean(targetElement.dataset?.collapsed);
-        }
-    }
-
-    /**
-     * Returns the array of values from all option items within the group.
-     *
-     * @type {String[]}
-     */
-    get value() {
-        return this.items.map(item => item.value);
-    }
-
-    /**
-     * Returns the list of option items currently selected within the group.
-     *
-     * @type {OptionModel[]}
-     */
-    get selectedItems() {
-        return this.items.filter(item => item.selected);
-    }
-
-    /**
-     * Returns the list of option items currently visible within the group.
-     *
-     * @type {OptionModel[]}
-     */
-    get visibleItems() {
-        return this.items.filter(item => item.visible);
-    }
-
-    /**
-     * Indicates whether the group has at least one visible option item.
-     *
-     * @type {boolean}
-     */
-    get hasVisibleItems() {
-        return this.visibleItems.length > 0;
-    }
-
-    /**
-     * Updates the group's label from the new target element and propagates the change to the view.
-     *
-     * @param {HTMLOptGroupElement} targetElement - The updated <optgroup> element.
-     */
-    update(targetElement) {
-        this.label = targetElement.label;
-        if (this.view) {
-            this.view.updateLabel(this.label);
-        }
-    }
-
-    /**
-     * Hook invoked when the target element reference changes.
-     * Updates the view's label and collapsed state to keep UI in sync.
-     */
-    onTargetChanged() {
-        if (this.view) {
-            this.view.updateLabel(this.label);
-            this.view.setCollapsed(this.collapsed);
-        }
-    }
-
-    /**
-     * Registers a callback to be invoked when the group's collapsed state changes.
-     *
-     * @param {(evtToken: any, model: GroupModel, collapsed: boolean) => void} callback - Listener for collapse changes.
-     */
-    onCollapsedChanged(callback) {
-        this.#privOnCollapsedChanged.push(callback);
-    }
-
-    /**
-     * Toggles the group's collapsed state, updates the view, and notifies registered listeners.
-     */
-    toggleCollapse() {
-        this.collapsed = !this.collapsed;
-        if (this.view) {
-            this.view.setCollapsed(this.collapsed);
-        }
-        iEvents.callEvent([this, this.collapsed], ...this.#privOnCollapsedChanged);
-    }
-
-    /**
-     * Adds an option item to this group and sets its back-reference to the group.
-     *
-     * @param {OptionModel} optionModel - The option to add.
-     */
-    addItem(optionModel) {
-        this.items.push(optionModel);
-        optionModel.group = this;
-    }
-
-    /**
-     * Removes an option item from this group and clears its group reference.
-     *
-     * @param {OptionModel} optionModel - The option to remove.
-     */
-    removeItem(optionModel) {
-        const index = this.items.indexOf(optionModel);
-        if (index > -1) {
-            this.items.splice(index, 1);
-            optionModel.group = null;
-        }
-    }
-
-    /**
-     * Updates the group's visibility in the view, typically based on children visibility.
-     * No-ops if the view is not initialized.
-     */
-    updateVisibility() {
-        if (this.view) {
-            this.view.updateVisibility();
-        }
-    }
+import { Model } from "../core/base/model";
+import { iEvents } from "../utils/ievents";
+import { Libs } from "../utils/libs";
+import { GroupView } from "../views/group-view";
+import { OptionModel } from "./option-model";
+
+/**
+ * @extends {Model<HTMLOptGroupElement, GroupViewTags, GroupView>}
+ */
+export class GroupModel extends Model {
+    label = "";
+    /** @type {OptionModel[]} */
+    items = [];
+    collapsed = false;
+    #privOnCollapsedChanged = [];
+
+    /**
+     * Initializes a group model with options and an optional <optgroup> target.
+     * Reads the label and collapsed state from the target element's attributes/dataset.
+     *
+     * @param {object} options - Configuration for the model.
+     * @param {HTMLOptGroupElement} [targetElement] - The source <optgroup> element.
+     */
+    constructor(options, targetElement) {
+        super(options, targetElement);
+        if (targetElement) {
+            this.label = targetElement.label;
+            this.collapsed = Libs.string2Boolean(targetElement.dataset?.collapsed);
+        }
+    }
+
+    /**
+     * Returns the array of values from all option items within the group.
+     *
+     * @type {String[]}
+     */
+    get value() {
+        return this.items.map(item => item.value);
+    }
+
+    /**
+     * Returns the list of option items currently selected within the group.
+     *
+     * @type {OptionModel[]}
+     */
+    get selectedItems() {
+        return this.items.filter(item => item.selected);
+    }
+
+    /**
+     * Returns the list of option items currently visible within the group.
+     *
+     * @type {OptionModel[]}
+     */
+    get visibleItems() {
+        return this.items.filter(item => item.visible);
+    }
+
+    /**
+     * Indicates whether the group has at least one visible option item.
+     *
+     * @type {boolean}
+     */
+    get hasVisibleItems() {
+        return this.visibleItems.length > 0;
+    }
+
+    /**
+     * Updates the group's label from the new target element and propagates the change to the view.
+     *
+     * @param {HTMLOptGroupElement} targetElement - The updated <optgroup> element.
+     */
+    update(targetElement) {
+        this.label = targetElement.label;
+        if (this.view) {
+            this.view.updateLabel(this.label);
+        }
+    }
+
+    /**
+     * Hook invoked when the target element reference changes.
+     * Updates the view's label and collapsed state to keep UI in sync.
+     */
+    onTargetChanged() {
+        if (this.view) {
+            this.view.updateLabel(this.label);
+            this.view.setCollapsed(this.collapsed);
+        }
+    }
+
+    /**
+     * Registers a callback to be invoked when the group's collapsed state changes.
+     *
+     * @param {(evtToken: any, model: GroupModel, collapsed: boolean) => void} callback - Listener for collapse changes.
+     */
+    onCollapsedChanged(callback) {
+        this.#privOnCollapsedChanged.push(callback);
+    }
+
+    /**
+     * Toggles the group's collapsed state, updates the view, and notifies registered listeners.
+     */
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        if (this.view) {
+            this.view.setCollapsed(this.collapsed);
+        }
+        iEvents.callEvent([this, this.collapsed], ...this.#privOnCollapsedChanged);
+    }
+
+    /**
+     * Adds an option item to this group and sets its back-reference to the group.
+     *
+     * @param {OptionModel} optionModel - The option to add.
+     */
+    addItem(optionModel) {
+        this.items.push(optionModel);
+        optionModel.group = this;
+    }
+
+    /**
+     * Removes an option item from this group and clears its group reference.
+     *
+     * @param {OptionModel} optionModel - The option to remove.
+     */
+    removeItem(optionModel) {
+        const index = this.items.indexOf(optionModel);
+        if (index > -1) {
+            this.items.splice(index, 1);
+            optionModel.group = null;
+        }
+    }
+
+    /**
+     * Updates the group's visibility in the view, typically based on children visibility.
+     * No-ops if the view is not initialized.
+     */
+    updateVisibility() {
+        if (this.view) {
+            this.view.updateVisibility();
+        }
+    }
 }