selective-ui 1.1.6 → 1.2.1

package/package.json

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

package/src/css/components/popup.css

@@ -28,7 +28,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    gap: 2px;
 
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
@@ -36,4 +35,11 @@
 
 .selective-ui-options-container.hide {
     display: none;
+}
+
+.selective-ui-options-container .selective-ui-virtual-items {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 2px;
 }

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

@@ -5,6 +5,8 @@ import { GroupView } from "../views/group-view";
 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>}
@@ -24,6 +26,21 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
     constructor(items: MixedItem[] = []) {
         super(items);
         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});
     }
 
     /**
@@ -84,7 +101,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @param {number} position - The position (index) of the group within a list.
      */
     private _handleGroupView(groupModel: GroupModel, groupView: GroupView, position: number): void {
-        super.onViewHolder(groupModel as any, groupView as any, position);
+        super.onViewHolder(groupModel, groupView, position);
         groupModel.view = groupView;
 
         const header = groupView.view.tags.GroupHeader;
@@ -141,13 +158,13 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
             imageWidth: optionModel.options.imageWidth as string,
             imageHeight: optionModel.options.imageHeight as string,
             imageBorderRadius: optionModel.options.imageBorderRadius as string,
-            imagePosition: optionModel.options.imagePosition as any,
-            labelValign: optionModel.options.labelValign as any,
-            labelHalign: optionModel.options.labelHalign as any,
+            imagePosition: optionModel.options.imagePosition as ImagePosition,
+            labelValign: optionModel.options.labelValign as LabelValign,
+            labelHalign: optionModel.options.labelHalign as LabelHalign,
         };
 
         if (!optionModel.isInit) {
-            super.onViewHolder(optionModel as any, optionViewer as any, position);
+            super.onViewHolder(optionModel, optionViewer, position);
         }
 
         optionModel.view = optionViewer;
@@ -288,17 +305,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * 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,
-            });
-        });
+        Libs.callbackScheduler.run(`sche_vis_${this.adapterKey}`);
     }
 
     /**
@@ -387,14 +394,18 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
 
         for (let i = index; i < this.flatOptions.length; i++) {
             const item = this.flatOptions[i];
-            if (!item.visible) continue;
+            if (!item?.visible) continue;
 
             item.highlighted = true;
             this._currentHighlightIndex = i;
 
             if (isScrollToView) {
                 const el = item.view?.getView?.();
-                if (el) el.scrollIntoView({ block: "center", behavior: "smooth" });
+                if (el) {
+                    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                } else {
+                    this.recyclerView?.ensureRendered?.(i, { scrollIntoView: true });
+                }
             }
 
             this.onHighlightChange(i, item.view?.getView?.()?.id);

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

@@ -1,4 +1,5 @@
-import { EmptyStateOptions, EmptyStateType } from "../types/components/state.box.type";
+import { EmptyStateType } from "../types/components/state.box.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 import { Libs } from "../utils/libs";
 
 /**
@@ -7,13 +8,13 @@ import { Libs } from "../utils/libs";
 export class EmptyState {
     node: HTMLDivElement | null = null;
 
-    options: EmptyStateOptions | null = null;
+    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: EmptyStateOptions | null = null) {
+    constructor(options: SelectiveOptions | null = null) {
         if (options) this.init(options);
     }
 
@@ -22,7 +23,7 @@ export class EmptyState {
      *
      * @param {object} options - Configuration object containing text for "no data" and "not found" states.
      */
-    init(options: EmptyStateOptions): void {
+    init(options: SelectiveOptions): void {
         this.options = options;
 
         this.node = Libs.nodeCreator({

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

@@ -1,4 +1,4 @@
-import { LoadingStateOptions } from "../types/components/state.box.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 import { Libs } from "../utils/libs";
 
 /**
@@ -7,13 +7,13 @@ import { Libs } from "../utils/libs";
 export class LoadingState {
     node: HTMLDivElement | null = null;
 
-    options: LoadingStateOptions | null = null;
+    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: LoadingStateOptions | null = null) {
+    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: LoadingStateOptions): void {
+    init(options: SelectiveOptions): void {
         this.options = options;
 
         this.node = Libs.nodeCreator({

package/src/ts/components/option-handle.ts

@@ -1,5 +1,5 @@
-import { DefaultConfig } from "../types/utils/istorage.type";
 import { MountViewResult } from "../types/utils/libs.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 import { iEvents } from "../utils/ievents";
 import { Libs } from "../utils/libs";
 
@@ -11,7 +11,7 @@ export class OptionHandle {
 
     node: HTMLDivElement | null = null;
 
-    options: DefaultConfig | null = null;
+    options: SelectiveOptions | null = null;
 
     private _ActionOnSelectAll: Array<(...args: unknown[]) => unknown> = [];
 
@@ -22,7 +22,7 @@ export class OptionHandle {
      * for multiple-selection lists. Includes methods to show/hide the handle, refresh its visibility,
      * and register callbacks for select/deselect events.
      */
-    constructor(options: DefaultConfig | null = null) {
+    constructor(options: SelectiveOptions | null = null) {
         if (options) this.init(options);
     }
 
@@ -32,7 +32,7 @@ export class OptionHandle {
      *
      * @param {object} options - Configuration object containing text labels and feature flags.
      */
-    init(options: DefaultConfig): void {
+    init(options: SelectiveOptions): void {
         this.nodeMounted = Libs.mountNode({
             OptionHandle: {
                 tag: { node: "div", classList: ["selective-ui-option-handle", "hide"] },

package/src/ts/components/popup.ts

@@ -20,6 +20,13 @@ type ParentBinderMapLike = {
     [key: string]: unknown;
 };
 
+interface VirtualRecyclerOptions {
+  scrollEl?: HTMLElement;
+  estimateItemHeight?: number;
+  overscan?: number;
+  dynamicHeights?: boolean;
+}
+
 /**
  * @class
  */
@@ -54,6 +61,12 @@ export class Popup {
 
     private _hideLoadHandle: ReturnType<typeof setTimeout> | null = null;
 
+    private virtualScrollConfig = {
+        estimateItemHeight: 36,
+        overscan: 8,
+        dynamicHeights: true
+    };
+
     /**
      * Represents a popup component that manages rendering and interaction for a dropdown panel.
      * Stores a reference to the ModelManager for handling option models and adapter logic.
@@ -84,9 +97,9 @@ export class Popup {
     init(select: HTMLSelectElement, options: SelectiveOptions): void {
         if (!this._modelManager) throw new Error("Popup requires a ModelManager instance.");
 
-        this.optionHandle = new OptionHandle(options as any);
-        this.emptyState = new EmptyState(options as any);
-        this.loadingState = new LoadingState(options as any);
+        this.optionHandle = new OptionHandle(options);
+        this.emptyState = new EmptyState(options);
+        this.loadingState = new LoadingState(options);
 
         const nodeMounted = Libs.mountNode(
             {
@@ -112,7 +125,7 @@ export class Popup {
                 },
             },
             null
-        ) as any;
+        );
 
         this.node = nodeMounted.view as HTMLDivElement;
         this._optionsContainer = nodeMounted.tags.OptionsContainer as HTMLDivElement;
@@ -120,8 +133,19 @@ export class Popup {
         this._parent = Libs.getBinderMap(select) as ParentBinderMapLike | null;
         this.options = options;
 
+        
+        const recyclerViewOpt = options.virtualScroll
+            ? { 
+                scrollEl: this.node, 
+                estimateItemHeight: this.virtualScrollConfig.estimateItemHeight, 
+                overscan: this.virtualScrollConfig.overscan, 
+                dynamicHeights: this.virtualScrollConfig.dynamicHeights }
+            : {}
+        ;
+
+
         // Load ModelManager resources into container
-        this._modelManager.load(this._optionsContainer, { isMultiple: options.multiple });
+        this._modelManager.load<VirtualRecyclerOptions>(this._optionsContainer, { isMultiple: options.multiple }, recyclerViewOpt);
 
         const MMResources = this._modelManager.getResources() as {
             adapter: MixedAdapter;
@@ -294,6 +318,9 @@ export class Popup {
 
                 this._resizeObser.connect(this._parent.container.tags.ViewPanel);
                 callback?.();
+                
+                const rv: any = this.recyclerView;
+                rv?.resume?.();
             },
         });
     }
@@ -304,6 +331,8 @@ export class Popup {
      */
     close(callback: (() => void) | null = null): void {
         if (!this.isCreated || !this.options || !this._resizeObser || !this._effSvc) return;
+        const rv: any = this.recyclerView;
+        rv?.suspend?.();
 
         this._resizeObser.disconnect();
         this._effSvc.collapse({
@@ -388,7 +417,7 @@ export class Popup {
         this._resizeObser = null;
 
         try {
-            this._effSvc?.setElement?.(null as any);
+            this._effSvc?.setElement?.(null);
         } catch (_) {}
         this._effSvc = null;
 

package/src/ts/components/searchbox.ts

@@ -96,6 +96,8 @@ export class SearchBox {
                 isControlKey = true;
                 this.onEsc?.();
             }
+            
+            e.stopPropagation();
         });
 
         inputEl.addEventListener("input", () => {

package/src/ts/components/selectbox.ts

@@ -24,6 +24,7 @@ import { BinderMap } from "../types/utils/istorage.type";
 import { ContainerRuntime, SelectBoxAction } from "../types/components/searchbox.type";
 import { AjaxConfig } from "../types/core/search-controller.type";
 import { Selective } from "../utils/selective";
+import { VirtualRecyclerView } from "../core/base/virtual-recyclerview";
 
 /**
  * @class
@@ -174,7 +175,12 @@ export class SelectBox {
 
         // ModelManager setup
         optionModelManager.setupAdapter(MixedAdapter);
-        optionModelManager.setupRecyclerView(RecyclerView);
+        if (options.virtualScroll) {
+            optionModelManager.setupRecyclerView(VirtualRecyclerView);
+        }
+        else {
+            optionModelManager.setupRecyclerView(RecyclerView);
+        }
         optionModelManager.createModelResources(Libs.parseSelectToArray(select));
 
         optionModelManager.onUpdated = () => {
@@ -245,6 +251,7 @@ export class SelectBox {
         }
 
         const optionAdapter = container.popup!.optionAdapter as MixedAdapter;
+        let hightlightTimer : ReturnType<typeof setTimeout> | null = null;
 
         const searchHandle = (keyword: string, isTrigger: boolean) => {
             if (!isTrigger && keyword === "") {
@@ -255,12 +262,17 @@ export class SelectBox {
                 searchController
                     .search(keyword)
                     .then((result: any) => {
-                        container.popup?.triggerResize?.();
-                        if (result?.hasResults) {
-                            setTimeout(() => {
-                                optionAdapter.resetHighlight();
-                            }, options.animationtime ? options.animationtime + 10 : 0);
-                        }
+                        clearTimeout(hightlightTimer!);
+                        Libs.callbackScheduler.on(`sche_vis_proxy_${optionAdapter.adapterKey}`, () => {
+                            container.popup?.triggerResize?.();
+
+                            if (result?.hasResults) {
+                                hightlightTimer = setTimeout(() => {
+                                    optionAdapter.resetHighlight();
+                                    container.popup?.triggerResize?.();
+                                }, options.animationtime ?? 0);
+                            }
+                        }, { debounce: 10 });
                     })
                     .catch((error: unknown) => {
                         console.error("Search error:", error);
@@ -272,15 +284,17 @@ export class SelectBox {
 
         searchbox.onSearch = (keyword: string, isTrigger: boolean) => {
             if (!searchController.compareSearchTrigger(keyword)) return;
+            if (searchHandleTimer) clearTimeout(searchHandleTimer);
 
             if (searchController.isAjax()) {
-                if (searchHandleTimer) clearTimeout(searchHandleTimer);
                 container.popup?.showLoading?.();
                 searchHandleTimer = setTimeout(() => {
                     searchHandle(keyword, isTrigger);
                 }, options.delaysearchtime ?? 0);
             } else {
-                searchHandle(keyword, isTrigger);
+                searchHandleTimer = setTimeout(() => {
+                    searchHandle(keyword, isTrigger);
+                }, 10);
             }
         };
 

package/src/ts/core/base/adapter.ts

@@ -1,6 +1,7 @@
 import { Libs } from "../../utils/libs";
 import type { ModelContract } from "../../types/core/base/model.type";
 import type { AdapterContract } from "../../types/core/base/adapter.type";
+import { ViewContract } from "src/ts/types/core/base/view.type";
 
 /**
  * @template TItem
@@ -9,13 +10,15 @@ import type { AdapterContract } from "../../types/core/base/adapter.type";
  */
 export class Adapter<
     TItem extends ModelContract<any, any> & { view: TViewer | null; isInit: boolean },
-    TViewer = unknown
+    TViewer extends ViewContract<any>
 > implements AdapterContract<TItem> {
     items: TItem[] = [];
 
     adapterKey = Libs.randomString(12);
 
     isSkipEvent = false;
+    
+    recyclerView: any;
 
     /**
      * Initializes the adapter with an optional array of items and invokes onInit()
@@ -45,11 +48,11 @@ export class Adapter<
     onViewHolder(item: TItem, viewer: TViewer | null, position: number): void {
         void position;
 
-        const v = viewer as any;
-        if (!item.isInit) {
-            v?.render?.();
-        } else {
+        const v = viewer;
+        if (item.isInit) {
             v?.update?.();
+        } else {
+            v?.render?.();
         }
     }
 

package/src/ts/core/base/model.ts

@@ -13,7 +13,6 @@ export class Model<
     TView extends ViewContract<TTags>,
     TOptions = unknown
 > implements ModelContract<TTarget, TView> {
-    /** @type {TTarget | null} */
     targetElement: TTarget | null = null;
 
     options: TOptions;
@@ -24,6 +23,8 @@ export class Model<
 
     isInit = false;
 
+    isRemoved = false;
+
     /**
      * Returns the current value from the underlying target element's "value" attribute.
      * For single-select, this is typically a string; for multi-select, may be an array depending on usage.
@@ -56,9 +57,26 @@ export class Model<
         this.onTargetChanged();
     }
 
+    /**
+     * Cleans up references and invokes the removal hook when the model is no longer needed.
+     */
+    remove() {
+        this.targetElement = null;
+        this.view?.getView()?.remove?.();
+        this.view = null;
+        this.isRemoved = true;
+        this.onRemove();
+    }
+
     /**
      * Hook invoked whenever the target element changes.
      * Override in subclasses to react to attribute/content updates (e.g., text, disabled state).
      */
     onTargetChanged(): void { }
+
+    /**
+     * Hook invoked whenever the target element is removed.
+     * Override in subclasses to react to removal of the element.
+     */
+    onRemove(): void {}
 }

package/src/ts/core/base/recyclerview.ts

@@ -76,8 +76,10 @@ export class RecyclerView<
     /**
      * Forces a re-render of the current adapter state into the container.
      * Useful when visual updates are required without changing the data.
+     * 
+     * @param isUpdate - Indicates if this refresh is due to an update operation.
      */
-    refresh(): void {
+    refresh(isUpdate: boolean): void {
         this.render();
     }
 }