selective-ui 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",

package/src/css/components/popup.css

@@ -10,7 +10,7 @@
     display: none;
     position: fixed;
     z-index: 9999;
-    overflow: none;
+    overflow: hidden;
     flex-direction: column;
     
     height: 0px;
@@ -22,6 +22,8 @@
     border-style: var(--seui-popup-border-style);
     border-width: var(--seui-popup-border-width);
     border-radius: var(--seui-popup-border-radius);
+
+    transition: none;
 }
 
 .selective-ui-options-container {

package/src/ts/adapter/mixed-adapter.ts

@@ -6,31 +6,47 @@ import { OptionView } from "../views/option-view";
 import { MixedItem, VisibilityStats } from "../types/core/base/mixed-adapter.type";
 import { IEventCallback } from "../types/utils/ievents.type";
 import { ImagePosition, LabelHalign, LabelValign } from "../types/views/view.option.type";
+import { Libs } from "../utils/libs";
 
 /**
  * @extends {Adapter<GroupModel|OptionModel>}
  */
 export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
-    isMultiple = false;
+    public isMultiple = false;
 
-    private _visibilityChangedCallbacks: Array<(stats: VisibilityStats) => void> = [];
-    private _currentHighlightIndex = -1;
+    private visibilityChangedCallbacks: Array<(stats: VisibilityStats) => void> = [];
+    private currentHighlightIndex = -1;
 
-    private _selectedItemSingle: OptionModel | null = null;
+    private selectedItemSingle: OptionModel | null = null;
 
-    groups: GroupModel[] = [];
+    public groups: GroupModel[] = [];
 
-    flatOptions: OptionModel[] = [];
+    public flatOptions: OptionModel[] = [];
 
-    constructor(items: MixedItem[] = []) {
+    public constructor(items: MixedItem[] = []) {
         super(items);
-        this._buildFlatStructure();
+        this.buildFlatStructure();
+        
+        Libs.callbackScheduler.on(`sche_vis_${this.adapterKey}`, () => {
+            const visibleCount = this.flatOptions.filter((item) => item.visible).length;
+            const totalCount = this.flatOptions.length;
+
+            this.visibilityChangedCallbacks.forEach((callback) => {
+                callback({
+                    visibleCount,
+                    totalCount,
+                    hasVisible: visibleCount > 0,
+                    isEmpty: totalCount === 0,
+                });
+            });
+            Libs.callbackScheduler.run(`sche_vis_proxy_${this.adapterKey}`);
+        }, {debounce: 10});
     }
 
     /**
      * Build flat list of all options for navigation
      */
-    private _buildFlatStructure(): void {
+    private buildFlatStructure(): void {
         this.flatOptions = [];
         this.groups = [];
 
@@ -68,9 +84,9 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         item.position = position;
 
         if (item instanceof GroupModel) {
-            this._handleGroupView(item, viewer as GroupView, position);
+            this.handleGroupView(item, viewer as GroupView, position);
         } else if (item instanceof OptionModel) {
-            this._handleOptionView(item, viewer as OptionView, position);
+            this.handleOptionView(item, viewer as OptionView, position);
         }
 
         item.isInit = true;
@@ -84,7 +100,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {GroupView} groupView - The view instance that renders the group in the UI.
      * @param {number} position - The position (index) of the group within a list.
      */
-    private _handleGroupView(groupModel: GroupModel, groupView: GroupView, position: number): void {
+    private handleGroupView(groupModel: GroupModel, groupView: GroupView, position: number): void {
         super.onViewHolder(groupModel, groupView, position);
         groupModel.view = groupView;
 
@@ -118,7 +134,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
                 optionViewer = new OptionView(itemsContainer);
             }
 
-            this._handleOptionView(optionModel, optionViewer, idx);
+            this.handleOptionView(optionModel, optionViewer, idx);
             optionModel.isInit = true;
         });
 
@@ -134,7 +150,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {OptionView} optionViewer - The view instance that renders the option in the UI.
      * @param {number} position - The index of this option within its group's item list.
      */
-    private _handleOptionView(optionModel: OptionModel, optionViewer: OptionView, position: number): void {
+    private handleOptionView(optionModel: OptionModel, optionViewer: OptionView, position: number): void {
         optionViewer.isMultiple = this.isMultiple;
         optionViewer.hasImage = optionModel.hasImage;
 
@@ -178,7 +194,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
                 } else if (optionModel.selected !== true) {
                     this.changingProp("select");
                     setTimeout(() => {
-                        if (this._selectedItemSingle) this._selectedItemSingle.selected = false;
+                        if (this.selectedItemSingle) this.selectedItemSingle.selected = false;
                         optionModel.selected = true;
                     }, 5);
                 }
@@ -196,18 +212,18 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             });
 
             optionModel.onInternalSelected((_evtToken: IEventCallback, _el: OptionModel, selected: boolean) => {
-                if (selected) this._selectedItemSingle = optionModel;
+                if (selected) this.selectedItemSingle = optionModel;
                 this.changeProp("selected_internal");
             });
 
             optionModel.onVisibilityChanged((_evtToken: IEventCallback, model: OptionModel, _visible: boolean) => {
                 model.group?.updateVisibility();
-                this._notifyVisibilityChanged();
+                this.notifyVisibilityChanged();
             });
         }
 
         if (optionModel.selected) {
-            this._selectedItemSingle = optionModel;
+            this.selectedItemSingle = optionModel;
             optionModel.selectedNonTrigger = true;
         }
     }
@@ -220,7 +236,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
     override setItems(items: MixedItem[]): void {
         this.changingProp("items", items);
         this.items = items;
-        this._buildFlatStructure();
+        this.buildFlatStructure();
         this.changeProp("items", items);
     }
 
@@ -241,7 +257,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      */
     override updateData(items: MixedItem[]): void {
         this.items = items;
-        this._buildFlatStructure();
+        this.buildFlatStructure();
     }
 
     /**
@@ -249,7 +265,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @returns {OptionModel[]} - An array of selected option items from the flat list.
      */
-    getSelectedItems(): OptionModel[] {
+    public getSelectedItems(): OptionModel[] {
         return this.flatOptions.filter((item) => item.selected);
     }
 
@@ -258,7 +274,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @returns {OptionModel|undefined} - The first selected option or undefined if none are selected.
      */
-    getSelectedItem(): OptionModel | undefined {
+    public getSelectedItem(): OptionModel | undefined {
         return this.flatOptions.find((item) => item.selected);
     }
 
@@ -267,7 +283,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @param {boolean} isChecked - If true, select all; if false, deselect all.
      */
-    checkAll(isChecked: boolean): void {
+    public checkAll(isChecked: boolean): void {
         if (!this.isMultiple) return;
         this.flatOptions.forEach((item) => {
             item.selected = isChecked;
@@ -280,32 +296,22 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {(stats: {visibleCount:number,totalCount:number,hasVisible:boolean,isEmpty:boolean}) => void} callback
      * - Function to invoke when visibility stats change.
      */
-    onVisibilityChanged(callback: (stats: VisibilityStats) => void): void {
-        this._visibilityChangedCallbacks.push(callback);
+    public onVisibilityChanged(callback: (stats: VisibilityStats) => void): void {
+        this.visibilityChangedCallbacks.push(callback);
     }
 
     /**
      * Notifies all registered visibility-change callbacks with up-to-date statistics.
      * Computes visible and total counts, then emits aggregated state.
      */
-    private _notifyVisibilityChanged(): void {
-        const visibleCount = this.flatOptions.filter((item) => item.visible).length;
-        const totalCount = this.flatOptions.length;
-
-        this._visibilityChangedCallbacks.forEach((callback) => {
-            callback({
-                visibleCount,
-                totalCount,
-                hasVisible: visibleCount > 0,
-                isEmpty: totalCount === 0,
-            });
-        });
+    private notifyVisibilityChanged(): void {
+        Libs.callbackScheduler.run(`sche_vis_${this.adapterKey}`);
     }
 
     /**
      * Computes and returns current visibility statistics for options.
      */
-    getVisibilityStats(): VisibilityStats {
+    public getVisibilityStats(): VisibilityStats {
         const visibleCount = this.flatOptions.filter((item) => item.visible).length;
         const totalCount = this.flatOptions.length;
 
@@ -320,7 +326,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
     /**
      * Resets the highlight to the first visible option (index 0).
      */
-    resetHighlight(): void {
+    public resetHighlight(): void {
         this.setHighlight(0);
     }
 
@@ -330,12 +336,12 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {number} direction - Increment (+1) or decrement (-1) of the current visible index.
      * @param {boolean} [isScrollToView=true] - Whether to scroll the highlighted item into view.
      */
-    navigate(direction: number, isScrollToView: boolean = true): void {
+    public navigate(direction: number, isScrollToView: boolean = true): void {
         const visibleOptions = this.flatOptions.filter((opt) => opt.visible);
         if (visibleOptions.length === 0) return;
 
         let currentVisibleIndex = visibleOptions.findIndex(
-            (opt) => opt === this.flatOptions[this._currentHighlightIndex]
+            (opt) => opt === this.flatOptions[this.currentHighlightIndex]
         );
         if (currentVisibleIndex === -1) currentVisibleIndex = -1;
 
@@ -353,9 +359,9 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * Triggers a click on the currently highlighted and visible option to select it.
      * No-op if nothing is highlighted or the highlighted item is not visible.
      */
-    selectHighlighted(): void {
-        if (this._currentHighlightIndex > -1 && this.flatOptions[this._currentHighlightIndex]) {
-            const item = this.flatOptions[this._currentHighlightIndex];
+    public selectHighlighted(): void {
+        if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+            const item = this.flatOptions[this.currentHighlightIndex];
             if (item.visible) {
                 const viewEl = item.view?.getView?.();
                 if (viewEl) viewEl.click();
@@ -370,7 +376,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {number|OptionModel} target - Flat index or the specific OptionModel to highlight.
      * @param {boolean} [isScrollToView=true] - Whether to scroll the highlighted item into view.
      */
-    setHighlight(target: number | OptionModel, isScrollToView: boolean = true): void {
+    public setHighlight(target: number | OptionModel, isScrollToView: boolean = true): void {
         let index = 0;
 
         if (typeof target === "number") {
@@ -382,8 +388,8 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             index = 0;
         }
 
-        if (this._currentHighlightIndex > -1 && this.flatOptions[this._currentHighlightIndex]) {
-            this.flatOptions[this._currentHighlightIndex].highlighted = false;
+        if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+            this.flatOptions[this.currentHighlightIndex].highlighted = false;
         }
 
         for (let i = index; i < this.flatOptions.length; i++) {
@@ -391,7 +397,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             if (!item?.visible) continue;
 
             item.highlighted = true;
-            this._currentHighlightIndex = i;
+            this.currentHighlightIndex = i;
 
             if (isScrollToView) {
                 const el = item.view?.getView?.();
@@ -411,11 +417,11 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * Hook invoked whenever the highlight changes.
      * Override to handle UI side effects (e.g., ARIA announcement, focus sync).
      */
-    onHighlightChange(index: number, id?: string): void { }
+    public onHighlightChange(index: number, id?: string): void { }
 
     /**
      * Hook invoked when a group's collapsed state changes.
      * Override to handle side effects like analytics or layout adjustments.
      */
-    onCollapsedChange(model: GroupModel, collapsed: boolean): void { }
+    public onCollapsedChange(model: GroupModel, collapsed: boolean): void { }
 }

package/src/ts/components/accessorybox.ts

@@ -11,24 +11,26 @@ import { Libs } from "../utils/libs";
  * @class
  */
 export class AccessoryBox {
-    nodeMounted: MountViewResult<any> | null = null;
+    private nodeMounted: MountViewResult<any> | null = null;
 
-    node: HTMLDivElement | null = null;
+    private node: HTMLDivElement | null = null;
 
-    options: SelectiveOptions | null = null;
+    private options: SelectiveOptions | null = null;
 
-    selectUIMask: HTMLDivElement | null = null;
+    private selectUIMask: HTMLDivElement | null = null;
 
-    parentMask: HTMLDivElement | null = null;
+    private parentMask: HTMLDivElement | null = null;
 
-    modelManager: ModelManager<MixedItem, MixedAdapter> | null = null;
+    private modelManager: ModelManager<MixedItem, MixedAdapter> | null = null;
+
+    private modelDatas: OptionModel[] = [];
 
     /**
      * Initializes the accessory box with optional configuration and immediately calls init() if provided.
      *
      * @param {object|null} options - Configuration options for the accessory box (e.g., layout and behavior).
      */
-    constructor(options: SelectiveOptions | null = null) {
+    public constructor(options: SelectiveOptions | null = null) {
         if (options) this.init(options);
     }
 
@@ -38,7 +40,7 @@ export class AccessoryBox {
      *
      * @param {SelectiveOptions} options - Configuration object for the accessory box.
      */
-    init(options: SelectiveOptions): void {
+    private init(options: SelectiveOptions): void {
         this.nodeMounted = Libs.mountNode({
             AccessoryBox: {
                 tag: {
@@ -60,7 +62,7 @@ export class AccessoryBox {
      *
      * @param {HTMLDivElement} selectUIMask - The overlay/mask element of the main Select UI.
      */
-    setRoot(selectUIMask: HTMLDivElement): void {
+    public setRoot(selectUIMask: HTMLDivElement): void {
         this.selectUIMask = selectUIMask;
         this.parentMask = selectUIMask.parentElement as HTMLDivElement | null;
 
@@ -71,8 +73,14 @@ export class AccessoryBox {
      * Inserts the accessory box before or after the Select UI mask depending on the configured accessoryStyle.
      * Keeps the accessory box aligned relative to the parent mask.
      */
-    refreshLocation(): void {
-        if (!this.parentMask || !this.node || !this.selectUIMask || !this.options) return;
+    public refreshLocation(): void {
+        if (
+            !this.parentMask ||
+            !this.node ||
+            !this.selectUIMask ||
+            !this.options
+        )
+            return;
 
         const ref =
             this.options.accessoryStyle === "top"
@@ -87,7 +95,9 @@ export class AccessoryBox {
      *
      * @param {ModelManager} modelManager - The model manager controlling option state.
      */
-    setModelManager(modelManager: ModelManager<MixedItem, MixedAdapter> | null): void {
+    public setModelManager(
+        modelManager: ModelManager<MixedItem, MixedAdapter> | null,
+    ): void {
         this.modelManager = modelManager;
     }
 
@@ -97,14 +107,11 @@ export class AccessoryBox {
      *
      * @param {OptionModel[]} modelDatas - List of option models to render as accessory items.
      */
-    setModelData(modelDatas: OptionModel[]): void {
+    public setModelData(modelDatas: OptionModel[]): void {
         if (!this.node || !this.options) return;
-
         this.node.replaceChildren();
 
         if (modelDatas.length > 0 && this.options.multiple) {
-            this.node.classList.remove("hide");
-
             modelDatas.forEach((modelData) => {
                 Libs.mountNode(
                     {
@@ -120,7 +127,9 @@ export class AccessoryBox {
                                         title: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
                                         onclick: (evt: MouseEvent) => {
                                             evt.preventDefault();
-                                            this.modelManager?.triggerChanging?.("select");
+                                            this.modelManager?.triggerChanging?.(
+                                                "select",
+                                            );
                                             setTimeout(() => {
                                                 modelData.selected = false;
                                             }, 10);
@@ -137,13 +146,32 @@ export class AccessoryBox {
                             },
                         },
                     },
-                    this.node
+                    this.node,
                 );
             });
-        } else {
-            this.node.classList.add("hide");
+        }
+        else {
+            modelDatas = [];
         }
 
+        this.modelDatas = modelDatas;
+        this.refreshDisplay();
         iEvents.trigger(window, "resize");
     }
-}
+
+    private refreshDisplay(): void {
+        if (this.options?.accessoryVisible && this.modelDatas.length > 0 && this.options.multiple) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    private show(): void {
+        this.node.classList.remove("hide");
+    }
+
+    private hide(): void {
+        this.node.classList.add("hide");
+    }
+}

package/src/ts/components/directive.ts

@@ -8,14 +8,14 @@ export class Directive {
     node: HTMLElement;
 
     constructor() {
-        this.node = this._init();
+        this.node = this.init();
     }
 
     /**
      * Represents a directive button element used to toggle dropdown state.
      * Initializes a clickable node with appropriate ARIA attributes for accessibility.
      */
-    private _init(): HTMLElement {
+    private init(): HTMLElement {
         // Libs.nodeCreator returns Element, but this node is always an HTMLElement in practice.
         return Libs.nodeCreator({
             node: "div",
@@ -30,7 +30,7 @@ export class Directive {
      *
      * @param {boolean} value - If true, adds the "drop-down" class; otherwise removes it.
      */
-    setDropdown(value: boolean): void {
+    public setDropdown(value: boolean): void {
         this.node.classList.toggle("drop-down", !!value);
     }
 }

package/src/ts/components/empty-state.ts

@@ -6,15 +6,15 @@ import { Libs } from "../utils/libs";
  * @class
  */
 export class EmptyState {
-    node: HTMLDivElement | null = null;
+    public node: HTMLDivElement | null = null;
 
-    options: SelectiveOptions | null = null;
+    public options: SelectiveOptions | null = null;
 
     /**
      * Represents an empty state component that displays a message when no data or search results are available.
      * Provides methods to show/hide the state and check its visibility.
      */
-    constructor(options: SelectiveOptions | null = null) {
+    public constructor(options: SelectiveOptions | null = null) {
         if (options) this.init(options);
     }
 
@@ -23,7 +23,7 @@ export class EmptyState {
      *
      * @param {object} options - Configuration object containing text for "no data" and "not found" states.
      */
-    init(options: SelectiveOptions): void {
+    private init(options: SelectiveOptions): void {
         this.options = options;
 
         this.node = Libs.nodeCreator({
@@ -40,7 +40,7 @@ export class EmptyState {
      * @param {"notfound" | "nodata"} [type="nodata"] - Determines which message to show:
      *        "notfound" for search results not found, "nodata" for no available data.
      */
-    show(type: EmptyStateType = "nodata"): void {
+    public show(type: EmptyStateType = "nodata"): void {
         if (!this.node || !this.options) return;
 
         const text = type === "notfound" ? this.options.textNotFound : this.options.textNoData;
@@ -52,7 +52,7 @@ export class EmptyState {
     /**
      * Hides the empty state element by adding the "hide" class.
      */
-    hide(): void {
+    public hide(): void {
         if (!this.node) return;
         this.node.classList.add("hide");
     }
@@ -62,7 +62,7 @@ export class EmptyState {
      *
      * @returns {boolean} - True if visible, false otherwise.
      */
-    get isVisible(): boolean {
+    public get isVisible(): boolean {
         return !!this.node && !this.node.classList.contains("hide");
     }
 }

package/src/ts/components/loading-state.ts

@@ -5,15 +5,15 @@ import { Libs } from "../utils/libs";
  * @class
  */
 export class LoadingState {
-    node: HTMLDivElement | null = null;
+    public node: HTMLDivElement | null = null;
 
-    options: SelectiveOptions | null = null;
+    public options: SelectiveOptions | null = null;
 
     /**
      * Represents a loading state component that displays a loading message during data fetch or processing.
      * Provides methods to show/hide the state and check its visibility.
      */
-    constructor(options: SelectiveOptions | null = null) {
+    public constructor(options: SelectiveOptions | null = null) {
         if (options) this.init(options);
     }
 
@@ -22,7 +22,7 @@ export class LoadingState {
      *
      * @param {object} options - Configuration object containing text for the loading message.
      */
-    init(options: SelectiveOptions): void {
+    private init(options: SelectiveOptions): void {
         this.options = options;
 
         this.node = Libs.nodeCreator({
@@ -39,7 +39,7 @@ export class LoadingState {
      *
      * @param {boolean} hasItems - If true, applies a "small" style for compact display.
      */
-    show(hasItems: boolean): void {
+    public show(hasItems: boolean): void {
         if (!this.node || !this.options) return;
 
         this.node.textContent = this.options.textLoading;
@@ -50,7 +50,7 @@ export class LoadingState {
     /**
      * Hides the loading state element by adding the "hide" class.
      */
-    hide(): void {
+    public hide(): void {
         if (!this.node) return;
         this.node.classList.add("hide");
     }
@@ -60,7 +60,7 @@ export class LoadingState {
      *
      * @returns {boolean} - True if visible, false otherwise.
      */
-    get isVisible(): boolean {
+    public get isVisible(): boolean {
         return !!this.node && !this.node.classList.contains("hide");
     }
 }