selective-ui 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "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

@@ -12,26 +12,26 @@ 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) => {
+            this.visibilityChangedCallbacks.forEach((callback) => {
                 callback({
                     visibleCount,
                     totalCount,
@@ -46,7 +46,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
     /**
      * Build flat list of all options for navigation
      */
-    private _buildFlatStructure(): void {
+    private buildFlatStructure(): void {
         this.flatOptions = [];
         this.groups = [];
 
@@ -84,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;
@@ -100,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;
 
@@ -134,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;
         });
 
@@ -150,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;
 
@@ -180,23 +180,19 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
         optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
 
         if (!optionModel.isInit) {
-            optionViewer.view.tags.OptionView.addEventListener("click", (ev: MouseEvent) => {
+            optionViewer.view.tags.OptionView.addEventListener("click", async (ev: MouseEvent) => {
                 ev.stopPropagation();
                 ev.preventDefault();
 
                 if (this.isSkipEvent) return;
 
                 if (this.isMultiple) {
-                    this.changingProp("select");
-                    setTimeout(() => {
-                        optionModel.selected = !optionModel.selected;
-                    }, 5);
+                    await this.changingProp("select");
+                    optionModel.selected = !optionModel.selected;
                 } else if (optionModel.selected !== true) {
-                    this.changingProp("select");
-                    setTimeout(() => {
-                        if (this._selectedItemSingle) this._selectedItemSingle.selected = false;
-                        optionModel.selected = true;
-                    }, 5);
+                    await this.changingProp("select");
+                    if (this.selectedItemSingle) this.selectedItemSingle.selected = false;
+                    optionModel.selected = true;
                 }
             });
 
@@ -212,18 +208,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;
         }
     }
@@ -233,11 +229,11 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @param {Array<GroupModel|OptionModel>} items - The new collection of items to be displayed.
      */
-    override setItems(items: MixedItem[]): void {
-        this.changingProp("items", items);
+    override async setItems(items: MixedItem[]): Promise<void> {
+        await this.changingProp("items", items);
         this.items = items;
-        this._buildFlatStructure();
-        this.changeProp("items", items);
+        this.buildFlatStructure();
+        await this.changeProp("items", items);
     }
 
     /**
@@ -245,8 +241,8 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      *
      * @param {Array<GroupModel|OptionModel>} items - The new collection of items to sync.
      */
-    override syncFromSource(items: MixedItem[]): void {
-        this.setItems(items);
+    override async syncFromSource(items: MixedItem[]): Promise<void> {
+        await this.setItems(items);
     }
 
     /**
@@ -257,7 +253,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      */
     override updateData(items: MixedItem[]): void {
         this.items = items;
-        this._buildFlatStructure();
+        this.buildFlatStructure();
     }
 
     /**
@@ -265,7 +261,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);
     }
 
@@ -274,7 +270,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);
     }
 
@@ -283,7 +279,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;
@@ -296,22 +292,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 {
+    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;
 
@@ -326,7 +322,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);
     }
 
@@ -336,12 +332,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;
 
@@ -359,9 +355,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();
@@ -376,7 +372,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") {
@@ -388,8 +384,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++) {
@@ -397,7 +393,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?.();
@@ -417,11 +413,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(
                     {
@@ -118,12 +125,12 @@ export class AccessoryBox {
                                         role: "button",
                                         ariaLabel: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
                                         title: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
-                                        onclick: (evt: MouseEvent) => {
+                                        onclick: async (evt: MouseEvent) => {
                                             evt.preventDefault();
-                                            this.modelManager?.triggerChanging?.("select");
-                                            setTimeout(() => {
-                                                modelData.selected = false;
-                                            }, 10);
+                                            await this.modelManager?.triggerChanging?.(
+                                                "select",
+                                            );
+                                            modelData.selected = false;
                                         },
                                     },
                                 },
@@ -137,13 +144,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");
     }
 }