selective-ui 1.0.2 → 1.0.4

package/src/js/views/group-view.js

@@ -1,103 +1,103 @@
-import { View } from "../core/base/view";
-import { Libs } from "../utils/libs";
-
-/**
- * @extends {View<GroupViewTags>}
- */
-export class GroupView extends View {
-    /** @type {GroupViewResult} */
-    view;
-
-    /**
-     * Renders the group view structure (header + items container), sets ARIA attributes,
-     * and appends the root element to the parent container.
-     */
-    render() {
-        const group_id = Libs.randomString(7);
-        
-        this.view = Libs.mountView({
-            GroupView: {
-                tag: {
-                    node: "div", 
-                    classList: ["selective-ui-group"],
-                    role: "group",
-                    ariaLabelledby: `seui-${group_id}-header`,
-                    id: `seui-${group_id}-group`
-                },
-                child: {
-                    GroupHeader: {
-                        tag: {
-                            node: "div", 
-                            classList: ["selective-ui-group-header"],
-                            role: "presentation",
-                            id: `seui-${group_id}-header`
-                        }
-                    },
-                    GroupItems: {
-                        tag: {
-                            node: "div",
-                            classList: ["selective-ui-group-items"],
-                            role: "group"
-                        }
-                    }
-                }
-            }
-        });
-
-        this.parent.appendChild(this.view.view);
-    }
-
-    /**
-     * Performs a lightweight refresh of the view (currently updates the header label).
-     */
-    update() {
-        this.updateLabel();
-    }
-
-    /**
-     * Updates the group header text content if a label is provided.
-     *
-     * @param {string|null} [label=null] - The new label to display; if null, keeps current.
-     */
-    updateLabel(label = null) {
-        const headerEl = this.view.tags.GroupHeader;
-        if (label !== null) {
-            headerEl.textContent = label;
-        }
-    }
-
-    /**
-     * Returns the container element that holds all option/item views in this group.
-     *
-     * @returns {HTMLDivElement} - The items container element.
-     */
-    getItemsContainer() {
-        return this.view.tags.GroupItems;
-    }
-
-    /**
-     * Toggles the group's visibility based on whether any child item is visible.
-     * Hides the entire group when all children are hidden.
-     */
-    updateVisibility() {
-        const items = this.view.tags.GroupItems;
-        const visibleItems = Array.from(items.children)
-            .filter(child => !child.classList.contains("hide"));
-        
-        const isVisible = visibleItems.length > 0;
-        this.view.view.classList.toggle("hide", !isVisible);
-    }
-
-    /**
-     * Sets the collapsed state on the group and updates ARIA attributes accordingly.
-     *
-     * @param {boolean} collapsed - True to collapse; false to expand.
-     */
-    setCollapsed(collapsed) {
-        this.view.view.classList.toggle("collapsed", collapsed);
-        this.view.tags.GroupHeader.setAttribute(
-            "aria-expanded", 
-            collapsed ? "false" : "true"
-        );
-    }
+import { View } from "../core/base/view";
+import { Libs } from "../utils/libs";
+
+/**
+ * @extends {View<GroupViewTags>}
+ */
+export class GroupView extends View {
+    /** @type {GroupViewResult} */
+    view;
+
+    /**
+     * Renders the group view structure (header + items container), sets ARIA attributes,
+     * and appends the root element to the parent container.
+     */
+    render() {
+        const group_id = Libs.randomString(7);
+        
+        this.view = Libs.mountView({
+            GroupView: {
+                tag: {
+                    node: "div", 
+                    classList: ["selective-ui-group"],
+                    role: "group",
+                    ariaLabelledby: `seui-${group_id}-header`,
+                    id: `seui-${group_id}-group`
+                },
+                child: {
+                    GroupHeader: {
+                        tag: {
+                            node: "div", 
+                            classList: ["selective-ui-group-header"],
+                            role: "presentation",
+                            id: `seui-${group_id}-header`
+                        }
+                    },
+                    GroupItems: {
+                        tag: {
+                            node: "div",
+                            classList: ["selective-ui-group-items"],
+                            role: "group"
+                        }
+                    }
+                }
+            }
+        });
+
+        this.parent.appendChild(this.view.view);
+    }
+
+    /**
+     * Performs a lightweight refresh of the view (currently updates the header label).
+     */
+    update() {
+        this.updateLabel();
+    }
+
+    /**
+     * Updates the group header text content if a label is provided.
+     *
+     * @param {string|null} [label=null] - The new label to display; if null, keeps current.
+     */
+    updateLabel(label = null) {
+        const headerEl = this.view.tags.GroupHeader;
+        if (label !== null) {
+            headerEl.textContent = label;
+        }
+    }
+
+    /**
+     * Returns the container element that holds all option/item views in this group.
+     *
+     * @returns {HTMLDivElement} - The items container element.
+     */
+    getItemsContainer() {
+        return this.view.tags.GroupItems;
+    }
+
+    /**
+     * Toggles the group's visibility based on whether any child item is visible.
+     * Hides the entire group when all children are hidden.
+     */
+    updateVisibility() {
+        const items = this.view.tags.GroupItems;
+        const visibleItems = Array.from(items.children)
+            .filter(child => !child.classList.contains("hide"));
+        
+        const isVisible = visibleItems.length > 0;
+        this.view.view.classList.toggle("hide", !isVisible);
+    }
+
+    /**
+     * Sets the collapsed state on the group and updates ARIA attributes accordingly.
+     *
+     * @param {boolean} collapsed - True to collapse; false to expand.
+     */
+    setCollapsed(collapsed) {
+        this.view.view.classList.toggle("collapsed", collapsed);
+        this.view.tags.GroupHeader.setAttribute(
+            "aria-expanded", 
+            collapsed ? "false" : "true"
+        );
+    }
 }

package/src/js/views/option-view.js

@@ -1,153 +1,153 @@
-
-import { View } from "../core/base/view";
-import { Libs } from "../utils/libs";
-
-/**
- * @extends {View<OptionViewTags>}
- */
-export class OptionView extends View {
-    /** @type {OptionViewResult} */
-    view;
-
-    isMultiple = false;
-    hasImage = false;
-    optionConfig = null;
-
-    /**
-     * Renders the option view DOM structure (input, optional image, label),
-     * sets ARIA attributes/IDs, mounts into parent, and applies initial config.
-     */
-    render() {
-        const viewClass = ["selective-ui-option-view"];
-        const opt_id = Libs.randomString(7);
-        const inputID = `option_${opt_id}`;
-
-        if (this.isMultiple) {
-            viewClass.push("multiple");
-        }
-
-        if (this.hasImage) {
-            viewClass.push("has-image");
-            viewClass.push(`image-${this.optionConfig?.imagePosition}`);
-        }
-
-        const childStructure = {
-            OptionInput: {
-                tag: {
-                    node: "input",
-                    type: this.isMultiple ? "checkbox" : "radio",
-                    classList: "allow-choice",
-                    id: inputID
-                }
-            },
-            ...(this.hasImage && {
-                OptionImage: {
-                tag: {
-                    node: "img",
-                    classList: "option-image",
-                    style: {
-                        width: this.optionConfig?.imageWidth || "60px",
-                        height: this.optionConfig?.imageHeight || "60px",
-                        borderRadius: this.optionConfig?.imageBorderRadius || "4px"
-                    }
-                }
-                }
-            }),
-            OptionLabel: {
-                tag: {
-                node: "label",
-                htmlFor: inputID,
-                classList: [
-                    `align-vertical-${this.optionConfig?.labelValign}`,
-                    `align-horizontal-${this.optionConfig?.labelHalign}`
-                ]
-                },
-                child: {
-                    LabelContent: { tag: { node: "div" } }
-                }
-            }
-        };
-
-        this.view = Libs.mountView({
-            OptionView: {
-                tag: {
-                    node: "div",
-                    id: `seui-${opt_id}-option`,
-                    classList: viewClass,
-                    role: "option",
-                    ariaSelected: "false",
-                    tabIndex: "-1"
-                },
-                child: childStructure
-            }
-        });
-
-        this.parent.appendChild(this.view.view);
-
-        this.applyConfigToDOM();
-    }
-
-    /**
-     * Refreshes the option view by reapplying configuration (classes, alignments, image styles).
-     */
-    update() {
-        this.applyConfigToDOM();
-    }
-
-    /**
-     * Applies current configuration to the DOM in a minimal, fast way:
-     * - Set root/label classes in a single assignment (less DOM churn),
-     * - Ensure input type matches selection mode,
-     * - Create/remove image element only when needed, update its styles.
-     */
-    applyConfigToDOM() {
-        const v = this.view;
-        if (!v || !v.view) return;
-
-        const root  = v.view;
-        const input = v.tags?.OptionInput;
-        const label = v.tags?.OptionLabel;
-        const isMultiple   = !!this.isMultiple;
-        const hasImage     = !!this.hasImage;
-        const imagePos     = this.optionConfig?.imagePosition || 'right';
-        const imageWidth   = this.optionConfig?.imageWidth      || '60px';
-        const imageHeight  = this.optionConfig?.imageHeight     || '60px';
-        const imageRadius  = this.optionConfig?.imageBorderRadius || '4px';
-        const vAlign       = this.optionConfig?.labelValign     || 'center';
-        const hAlign       = this.optionConfig?.labelHalign     || 'left';
-
-        const rootClasses = ['selective-ui-option-view'];
-        if (isMultiple) rootClasses.push('multiple');
-        if (hasImage) {
-            rootClasses.push('has-image', `image-${imagePos}`);
-        }
-        root.className = rootClasses.join(' ');
-
-        if (input) {
-            const desiredType = isMultiple ? 'checkbox' : 'radio';
-            if (input.type !== desiredType) input.type = desiredType;
-        }
-
-        if (label) {
-            label.className = `align-vertical-${vAlign} align-horizontal-${hAlign}`;
-        }
-
-        let image = v.tags?.OptionImage;
-        if (hasImage) {
-            if (!image) {
-                image = document.createElement('img');
-                image.className = 'option-image';
-                if (label && label.parentElement) root.insertBefore(image, label);
-                else root.appendChild(image);
-                v.tags.OptionImage = image;
-            }
-            const style = image.style;
-            style.width        = imageWidth;
-            style.height       = imageHeight;
-            style.borderRadius = imageRadius;
-        } else if (image) {
-            image.remove();
-            v.tags.OptionImage = null;
-        }
-    }
+
+import { View } from "../core/base/view";
+import { Libs } from "../utils/libs";
+
+/**
+ * @extends {View<OptionViewTags>}
+ */
+export class OptionView extends View {
+    /** @type {OptionViewResult} */
+    view;
+
+    isMultiple = false;
+    hasImage = false;
+    optionConfig = null;
+
+    /**
+     * Renders the option view DOM structure (input, optional image, label),
+     * sets ARIA attributes/IDs, mounts into parent, and applies initial config.
+     */
+    render() {
+        const viewClass = ["selective-ui-option-view"];
+        const opt_id = Libs.randomString(7);
+        const inputID = `option_${opt_id}`;
+
+        if (this.isMultiple) {
+            viewClass.push("multiple");
+        }
+
+        if (this.hasImage) {
+            viewClass.push("has-image");
+            viewClass.push(`image-${this.optionConfig?.imagePosition}`);
+        }
+
+        const childStructure = {
+            OptionInput: {
+                tag: {
+                    node: "input",
+                    type: this.isMultiple ? "checkbox" : "radio",
+                    classList: "allow-choice",
+                    id: inputID
+                }
+            },
+            ...(this.hasImage && {
+                OptionImage: {
+                tag: {
+                    node: "img",
+                    classList: "option-image",
+                    style: {
+                        width: this.optionConfig?.imageWidth || "60px",
+                        height: this.optionConfig?.imageHeight || "60px",
+                        borderRadius: this.optionConfig?.imageBorderRadius || "4px"
+                    }
+                }
+                }
+            }),
+            OptionLabel: {
+                tag: {
+                node: "label",
+                htmlFor: inputID,
+                classList: [
+                    `align-vertical-${this.optionConfig?.labelValign}`,
+                    `align-horizontal-${this.optionConfig?.labelHalign}`
+                ]
+                },
+                child: {
+                    LabelContent: { tag: { node: "div" } }
+                }
+            }
+        };
+
+        this.view = Libs.mountView({
+            OptionView: {
+                tag: {
+                    node: "div",
+                    id: `seui-${opt_id}-option`,
+                    classList: viewClass,
+                    role: "option",
+                    ariaSelected: "false",
+                    tabIndex: "-1"
+                },
+                child: childStructure
+            }
+        });
+
+        this.parent.appendChild(this.view.view);
+
+        this.applyConfigToDOM();
+    }
+
+    /**
+     * Refreshes the option view by reapplying configuration (classes, alignments, image styles).
+     */
+    update() {
+        this.applyConfigToDOM();
+    }
+
+    /**
+     * Applies current configuration to the DOM in a minimal, fast way:
+     * - Set root/label classes in a single assignment (less DOM churn),
+     * - Ensure input type matches selection mode,
+     * - Create/remove image element only when needed, update its styles.
+     */
+    applyConfigToDOM() {
+        const v = this.view;
+        if (!v || !v.view) return;
+
+        const root  = v.view;
+        const input = v.tags?.OptionInput;
+        const label = v.tags?.OptionLabel;
+        const isMultiple   = !!this.isMultiple;
+        const hasImage     = !!this.hasImage;
+        const imagePos     = this.optionConfig?.imagePosition || 'right';
+        const imageWidth   = this.optionConfig?.imageWidth      || '60px';
+        const imageHeight  = this.optionConfig?.imageHeight     || '60px';
+        const imageRadius  = this.optionConfig?.imageBorderRadius || '4px';
+        const vAlign       = this.optionConfig?.labelValign     || 'center';
+        const hAlign       = this.optionConfig?.labelHalign     || 'left';
+
+        const rootClasses = ['selective-ui-option-view'];
+        if (isMultiple) rootClasses.push('multiple');
+        if (hasImage) {
+            rootClasses.push('has-image', `image-${imagePos}`);
+        }
+        root.className = rootClasses.join(' ');
+
+        if (input) {
+            const desiredType = isMultiple ? 'checkbox' : 'radio';
+            if (input.type !== desiredType) input.type = desiredType;
+        }
+
+        if (label) {
+            label.className = `align-vertical-${vAlign} align-horizontal-${hAlign}`;
+        }
+
+        let image = v.tags?.OptionImage;
+        if (hasImage) {
+            if (!image) {
+                image = document.createElement('img');
+                image.className = 'option-image';
+                if (label && label.parentElement) root.insertBefore(image, label);
+                else root.appendChild(image);
+                v.tags.OptionImage = image;
+            }
+            const style = image.style;
+            style.width        = imageWidth;
+            style.height       = imageHeight;
+            style.borderRadius = imageRadius;
+        } else if (image) {
+            image.remove();
+            v.tags.OptionImage = null;
+        }
+    }
 }