selective-ui 1.2.0 → 1.2.2

package/src/ts/components/searchbox.ts

@@ -15,21 +15,21 @@ export class SearchBox {
         if (options) this.init(options);
     }
 
-    nodeMounted: MountViewResult<SearchBoxTags> | null = null;
+    private nodeMounted: MountViewResult<SearchBoxTags> | null = null;
 
-    node: HTMLDivElement | null = null;
+    public node: HTMLDivElement | null = null;
 
-    SearchInput: HTMLInputElement | null = null;
+    private SearchInput: HTMLInputElement | null = null;
 
-    onSearch: SearchHandler | null = null;
+    public onSearch: SearchHandler | null = null;
 
-    options: SelectiveOptions | null = null;
+    private options: SelectiveOptions | null = null;
 
-    onNavigate: NavigateHandler | null = null;
+    public onNavigate: NavigateHandler | null = null;
 
-    onEnter: (() => void) | null = null;
+    public onEnter: (() => void) | null = null;
     
-    onEsc: (() => void) | null = null;
+    public onEsc: (() => void) | null = null;
 
     /**
      * Initializes the search box DOM, sets ARIA attributes, and wires keyboard/mouse/input events.
@@ -37,7 +37,7 @@ export class SearchBox {
      *
      * @param {object} options - Configuration including placeholder and SEID_LIST for aria-controls.
      */
-    init(options: SelectiveOptions): void {
+    private init(options: SelectiveOptions): void {
         this.nodeMounted = Libs.mountNode({
             SearchBox: {
                 tag: { node: "div", classList: ["selective-ui-searchbox", "hide"] },
@@ -110,7 +110,7 @@ export class SearchBox {
      * Shows the search box, toggles read-only based on `options.searchable`,
      * and focuses the input when searchable.
      */
-    show(): void {
+    public show(): void {
         if (!this.node || !this.SearchInput || !this.options) return;
 
         this.node.classList.remove("hide");
@@ -126,7 +126,7 @@ export class SearchBox {
     /**
      * Hides the search box by adding the "hide" class.
      */
-    hide(): void {
+    public hide(): void {
         if (!this.node) return;
         this.node.classList.add("hide");
     }
@@ -136,7 +136,7 @@ export class SearchBox {
      *
      * @param {boolean} [isTrigger=true] - Whether to invoke onSearch with an empty string.
      */
-    clear(isTrigger: boolean = true): void {
+    public clear(isTrigger: boolean = true): void {
         if (!this.nodeMounted) return;
         this.nodeMounted.tags.SearchInput.value = "";
         this.onSearch?.("", isTrigger);
@@ -147,7 +147,7 @@ export class SearchBox {
      *
      * @param {string} value - The new placeholder text.
      */
-    setPlaceHolder(value: string): void {
+    public setPlaceHolder(value: string): void {
         if (!this.SearchInput) return;
         this.SearchInput.placeholder = Libs.stripHtml(value);
     }
@@ -157,7 +157,7 @@ export class SearchBox {
      *
      * @param {string} id - The DOM id of the active option element.
      */
-    setActiveDescendant(id: string): void {
+    public setActiveDescendant(id: string): void {
         if (!this.SearchInput) return;
         this.SearchInput.setAttribute("aria-activedescendant", id);
     }

package/src/ts/components/selectbox.ts

@@ -37,35 +37,37 @@ export class SelectBox {
      * @param {HTMLSelectElement|null} [select=null] - The native select element to enhance.
      * @param {any|null} [Selective=null] - The Selective framework/context used for configuration and services.
      */
-    constructor(select: HTMLSelectElement | null = null, Selective: any | null = null) {
+    public constructor(select: HTMLSelectElement | null = null, Selective: any | null = null) {
         if (select) this.init(select, Selective);
     }
 
-    container: Partial<ContainerRuntime> = {};
+    public container: Partial<ContainerRuntime> = {};
 
-    oldValue: unknown = null;
+    private oldValue: unknown = null;
 
-    node: HTMLDivElement | null = null;
+    private node: HTMLDivElement | null = null;
 
-    options: SelectiveOptions | null = null;
+    private options: SelectiveOptions | null = null;
 
-    optionModelManager: ModelManager<MixedItem, MixedAdapter> | null = null;
+    private optionModelManager: ModelManager<MixedItem, MixedAdapter> | null = null;
 
-    isOpen = false;
-    hasLoadedOnce = false;
-    isBeforeSearch = false;
+    private isOpen = false;
+
+    private hasLoadedOnce = false;
+
+    private isBeforeSearch = false;
 
     /** Selective context (global helper) */
-    Selective: Selective | null = null;
+    public Selective: Selective | null = null;
 
     /**
      * Gets or sets the disabled state of the SelectBox.
      * When set, updates CSS class and ARIA attributes to reflect the disabled state.
      */
-    get isDisabled(): boolean {
+    public get isDisabled(): boolean {
         return !!this.options?.disabled;
     }
-    set isDisabled(value: boolean) {
+    public set isDisabled(value: boolean) {
         if (!this.options || !this.node) return;
         this.options.disabled = value;
         this.node.classList.toggle("disabled", value);
@@ -77,10 +79,10 @@ export class SelectBox {
      * Gets or sets the read-only state of the SelectBox.
      * When set, toggles the "readonly" CSS class to prevent user interaction.
      */
-    get isReadOnly(): boolean {
+    public get isReadOnly(): boolean {
         return !!this.options?.readonly;
     }
-    set isReadOnly(value: boolean) {
+    public set isReadOnly(value: boolean) {
         if (!this.options || !this.node) return;
         this.options.readonly = value;
         this.node.classList.toggle("readonly", value);
@@ -90,10 +92,10 @@ export class SelectBox {
      * Gets or sets the visibility state of the SelectBox.
      * When set, toggles the "invisible" CSS class to show or hide the component.
      */
-    get isVisible(): boolean {
+    public get isVisible(): boolean {
         return !!this.options?.visible;
     }
-    set isVisible(value: boolean) {
+    public set isVisible(value: boolean) {
         if (!this.options || !this.node) return;
         this.options.visible = value;
         this.node.classList.toggle("invisible", !value);
@@ -105,7 +107,7 @@ export class SelectBox {
      * @param {HTMLSelectElement} select - The native <select> element to enhance.
      * @param {any} Selective - The Selective framework/context for services and configuration.
      */
-    init(select: HTMLSelectElement, Selective: any): void {
+    private init(select: HTMLSelectElement, Selective: any): void {
         const bindedMap = Libs.getBinderMap(select) as BinderMap;
         const options = bindedMap.options as SelectiveOptions;
 
@@ -251,6 +253,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 === "") {
@@ -261,13 +264,18 @@ export class SelectBox {
                 searchController
                     .search(keyword)
                     .then((result: any) => {
-                        container.popup?.triggerResize?.();
-                        if (result?.hasResults) {
-                            setTimeout(() => {
-                                container.popup?.triggerResize?.();
-                                optionAdapter.resetHighlight();
-                            }, options.animationtime ? options.animationtime + 10 : 0);
-                        }
+                        clearTimeout(hightlightTimer!);
+                        Libs.callbackScheduler.clear(`sche_vis_proxy_${optionAdapter.adapterKey}`);
+                        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);
@@ -279,15 +287,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);
             }
         };
 
@@ -320,7 +330,7 @@ export class SelectBox {
     /**
      * Disconnects observers associated with the SelectBox instance.
      */
-    deInit(): void {
+    public deInit(): void {
         const c: any = this.container ?? {};
         const { selectObserver, datasetObserver } = c;
 
@@ -331,7 +341,7 @@ export class SelectBox {
     /**
      * Returns an action API for controlling the SelectBox instance.
      */
-    getAction(): SelectBoxAction | null {
+    public getAction(): SelectBoxAction | null {
         const container = this.container;
         const superThis = this;
         const getInstance = () => {
@@ -717,7 +727,7 @@ export class SelectBox {
     /**
      * Creates a property on the given object with custom getter and setter behavior.
      */
-    createSymProp(
+    private createSymProp(
         obj: Record<string, any>,
         prop: "disabled" | "readonly" | "visible",
         privateProp: "isDisabled" | "isReadOnly" | "isVisible"
@@ -742,7 +752,7 @@ export class SelectBox {
     /**
      * Flattens and returns all option models from the current resources.
      */
-    getModelOption(isSelected: boolean | null = null): OptionModel[] {
+    private getModelOption(isSelected: boolean | null = null): OptionModel[] {
         if (!this.optionModelManager) return [];
 
         const { modelList } = this.optionModelManager.getResources();
@@ -764,7 +774,7 @@ export class SelectBox {
         return flatOptions;
     }
 
-    detroy() {
+    public detroy() {
         this.container.popup!.detroy();
     }
 }

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

@@ -35,7 +35,7 @@ export class Adapter<
      * Lifecycle hook called once after construction. Override in subclasses to
      * perform setup tasks (e.g., event wiring, cache building).
      */
-    onInit(): void { }
+    public onInit(): void { }
 
     /**
      * Binds an item model to its viewer at a given position. If the item has not
@@ -45,7 +45,7 @@ export class Adapter<
      * @param {TViewer|null} viewer - The view instance responsible for rendering the model.
      * @param {number} position - The index of the item within the adapter.
      */
-    onViewHolder(item: TItem, viewer: TViewer | null, position: number): void {
+    public onViewHolder(item: TItem, viewer: TViewer | null, position: number): void {
         void position;
 
         const v = viewer;
@@ -63,7 +63,7 @@ export class Adapter<
      * @param {string} propName - The property name to observe (e.g., "items").
      * @param {Function} callback - Function to execute before the property changes.
      */
-    onPropChanging(propName: string, callback: (...args: unknown[]) => void): void {
+    public onPropChanging(propName: string, callback: (...args: unknown[]) => void): void {
         Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 1 });
     }
 
@@ -74,7 +74,7 @@ export class Adapter<
      * @param {string} propName - The property name to observe (e.g., "items").
      * @param {Function} callback - Function to execute after the property changes.
      */
-    onPropChanged(propName: string, callback: (...args: unknown[]) => void): void {
+    public onPropChanged(propName: string, callback: (...args: unknown[]) => void): void {
         Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback);
     }
 
@@ -85,7 +85,7 @@ export class Adapter<
      * @param {string} propName - The property name to emit (e.g., "items").
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
-    changeProp(propName: string, ...params: unknown[]): void {
+    public changeProp(propName: string, ...params: unknown[]): void {
         Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
     }
 
@@ -96,7 +96,7 @@ export class Adapter<
      * @param {string} propName - The property name to emit (e.g., "items").
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
-    changingProp(propName: string, ...params: unknown[]): void {
+    public changingProp(propName: string, ...params: unknown[]): void {
         Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
     }
 
@@ -108,7 +108,7 @@ export class Adapter<
      * @param {TItem} item - The model instance for which the viewer is created.
      * @returns {TViewer|null} - The created viewer instance; null by default.
      */
-    viewHolder(parent: HTMLElement, item: TItem): TViewer | null {
+    public viewHolder(parent: HTMLElement, item: TItem): TViewer | null {
         void parent;
         void item;
         return null;
@@ -119,7 +119,7 @@ export class Adapter<
      *
      * @returns {number} - The item count.
      */
-    itemCount(): number {
+    public itemCount(): number {
         return this.items.length;
     }
 
@@ -129,7 +129,7 @@ export class Adapter<
      *
      * @param {TItem[]} items - The new list of items to set.
      */
-    setItems(items: TItem[]): void {
+    public setItems(items: TItem[]): void {
         this.changingProp("items", items);
         this.items = items;
         this.changeProp("items", items);
@@ -141,7 +141,7 @@ export class Adapter<
      *
      * @param {TItem[]} items - The source list of items to synchronize.
      */
-    syncFromSource(items: TItem[]): void {
+    public syncFromSource(items: TItem[]): void {
         this.setItems(items);
     }
 
@@ -151,7 +151,7 @@ export class Adapter<
      *
      * @param {HTMLElement} parent - The container element in which item viewers are rendered.
      */
-    updateRecyclerView(parent: HTMLElement): void {
+    public updateRecyclerView(parent: HTMLElement): void {
         for (let index = 0; index < this.itemCount(); index++) {
             const item = this.items[index];
 
@@ -172,7 +172,7 @@ export class Adapter<
      *
      * @param {TItem[]} items - The incoming data to apply to the adapter.
      */
-    updateData(items: TItem[]): void {
+    public updateData(items: TItem[]): void {
         void items;
     }
 }

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

@@ -13,23 +13,22 @@ export class Model<
     TView extends ViewContract<TTags>,
     TOptions = unknown
 > implements ModelContract<TTarget, TView> {
-    targetElement: TTarget | null = null;
+    public targetElement: TTarget | null = null;
 
-    options: TOptions;
+    public options: TOptions;
 
-    view: TView | null = null;
+    public view: TView | null = null;
 
-    position = -1;
+    public position = -1;
 
-    isInit = false;
-
-    isRemoved = false;
+    public isInit = false;
 
+    public 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.
      */
-    get value(): string | null | string[] {
+    public get value(): string | null | string[] {
         return this.targetElement?.getAttribute("value") ?? null;
     }
 
@@ -41,7 +40,7 @@ export class Model<
      * @param {TTarget|null} [targetElement=null] - The underlying element (e.g., <option> or group node).
      * @param {TView|null} [view=null] - The associated view responsible for rendering the model.
      */
-    constructor(options: TOptions, targetElement: TTarget | null = null, view: TView | null = null) {
+    public constructor(options: TOptions, targetElement: TTarget | null = null, view: TView | null = null) {
         this.options = options;
         this.targetElement = targetElement;
         this.view = view;
@@ -52,7 +51,7 @@ export class Model<
      *
      * @param {TTarget|null} targetElement - The new target element to bind to the model.
      */
-    update(targetElement: TTarget | null): void {
+    public update(targetElement: TTarget | null): void {
         this.targetElement = targetElement;
         this.onTargetChanged();
     }
@@ -60,7 +59,7 @@ export class Model<
     /**
      * Cleans up references and invokes the removal hook when the model is no longer needed.
      */
-    remove() {
+    public remove() {
         this.targetElement = null;
         this.view?.getView()?.remove?.();
         this.view = null;
@@ -72,11 +71,11 @@ export class Model<
      * Hook invoked whenever the target element changes.
      * Override in subclasses to react to attribute/content updates (e.g., text, disabled state).
      */
-    onTargetChanged(): void { }
+    public onTargetChanged(): void { }
 
     /**
      * Hook invoked whenever the target element is removed.
      * Override in subclasses to react to removal of the element.
      */
-    onRemove(): void {}
+    public onRemove(): void {}
 }

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

@@ -11,9 +11,9 @@ export class RecyclerView<
     TItem extends ModelContract<any, any>,
     TAdapter extends AdapterContract<TItem>
 > implements RecyclerViewContract<TAdapter> {
-    viewElement: HTMLDivElement | null = null;
+    public viewElement: HTMLDivElement | null = null;
 
-    adapter: TAdapter | null = null;
+    public adapter: TAdapter | null = null;
 
     /**
      * Constructs a RecyclerView with an optional container element that will host rendered item views.
@@ -29,7 +29,7 @@ export class RecyclerView<
      *
      * @param {HTMLDivElement} viewElement - The root element for rendering.
      */
-    setView(viewElement: HTMLDivElement): void {
+    public setView(viewElement: HTMLDivElement): void {
         this.viewElement = viewElement;
     }
 
@@ -41,7 +41,7 @@ export class RecyclerView<
      *
      * @param {TAdapter} adapter - The adapter managing models and their views.
      */
-    setAdapter(adapter: TAdapter): void {
+    public setAdapter(adapter: TAdapter): void {
         this.adapter = adapter;
 
         adapter.onPropChanging("items", () => {
@@ -59,7 +59,7 @@ export class RecyclerView<
      * Removes all child nodes from the rendering container, if present.
      * Used prior to re-rendering or when items are changing.
      */
-    clear(): void {
+    public clear(): void {
         if (!this.viewElement) return;
         this.viewElement.replaceChildren();
     }
@@ -68,7 +68,7 @@ export class RecyclerView<
      * Renders the current adapter contents into the container.
      * No-ops if either the adapter or the container is not set.
      */
-    render(): void {
+    public render(): void {
         if (!this.adapter || !this.viewElement) return;
         this.adapter.updateRecyclerView(this.viewElement);
     }
@@ -79,7 +79,7 @@ export class RecyclerView<
      * 
      * @param isUpdate - Indicates if this refresh is due to an update operation.
      */
-    refresh(isUpdate: boolean): void {
+    public refresh(isUpdate: boolean): void {
         this.render();
     }
 }

package/src/ts/core/base/view.ts

@@ -6,16 +6,16 @@ import type { ViewContract } from "../../types/core/base/view.type";
  * @implements {ViewContract<TTags>}
  */
 export class View<TTags extends Record<string, HTMLElement>> implements ViewContract<TTags> {
-    parent: HTMLElement | null = null;
+    public parent: HTMLElement | null = null;
 
-    view: MountViewResult<TTags> | null = null;
+    public view: MountViewResult<TTags> | null = null;
 
     /**
      * Initializes the view with a parent container element that will host its rendered content.
      *
      * @param {HTMLElement} parent - The parent element into which this view will render.
      */
-    constructor(parent: HTMLElement) {
+    public constructor(parent: HTMLElement) {
         this.parent = parent;
     }
 
@@ -23,20 +23,20 @@ export class View<TTags extends Record<string, HTMLElement>> implements ViewCont
      * Renders the view into the parent container.
      * Override in subclasses to create DOM structure and mount tags.
      */
-    render(): void { }
+    public render(): void { }
 
     /**
      * Updates the view to reflect model or state changes.
      * Override in subclasses to patch DOM nodes without full re-render.
      */
-    update(): void { }
+    public update(): void { }
 
     /**
      * Returns the root HTMLElement of the mounted view.
      *
      * @returns {HTMLElement} - The root view element.
      */
-    getView(): HTMLElement {
+    public getView(): HTMLElement {
         if (!this.view?.view) throw new Error("View is not mounted. Did you forget to set this.view?");
         return this.view.view;
     }