selective-ui 1.2.0 → 1.2.2

package/src/ts/core/search-controller.ts

@@ -9,19 +9,19 @@ import { Libs } from "../utils/libs";
 import { ModelManager } from "./model-manager";
 
 export class SearchController {
-    private _select: HTMLSelectElement;
+    private select: HTMLSelectElement;
 
-    private _modelManager: ModelManager<MixedItem, any>;
+    private modelManager: ModelManager<MixedItem, any>;
 
-    private _ajaxConfig: AjaxConfig | null = null;
+    private ajaxConfig: AjaxConfig | null = null;
 
-    private _abortController: AbortController | null = null;
+    private abortController: AbortController | null = null;
 
-    private _popup: Popup | null = null;
+    private popup: Popup | null = null;
 
-    private _selectBox: SelectBox = null;
+    private selectBox: SelectBox = null;
 
-    private _paginationState: PaginationState = {
+    private paginationState: PaginationState = {
         currentPage: 0,
         totalPages: 1,
         hasMore: false,
@@ -38,10 +38,10 @@ export class SearchController {
      * @param {ModelManager<MixedItem, any>} modelManager - Manager responsible for models and rendering updates.
      * @param {SelectBox} selectBox - SelectBox handle.
      */
-    constructor(selectElement: HTMLSelectElement, modelManager: ModelManager<MixedItem, any>, selectBox: SelectBox) {
-        this._select = selectElement;
-        this._modelManager = modelManager;
-        this._selectBox = selectBox;
+    public constructor(selectElement: HTMLSelectElement, modelManager: ModelManager<MixedItem, any>, selectBox: SelectBox) {
+        this.select = selectElement;
+        this.modelManager = modelManager;
+        this.selectBox = selectBox;
     }
 
     /**
@@ -49,8 +49,8 @@ export class SearchController {
      *
      * @returns {boolean} - True if AJAX config is present; false otherwise.
      */
-    isAjax(): boolean {
-        return !!this._ajaxConfig;
+    public isAjax(): boolean {
+        return !!this.ajaxConfig;
     }
 
     /**
@@ -59,7 +59,7 @@ export class SearchController {
      * @returns {Promise<{success: boolean, items: Array, message?: string}>}
      */
     async loadByValues(values: string | string[]): Promise<{ success: boolean; items: NormalizedAjaxItem[]; message?: string }> {
-        if (!this._ajaxConfig) {
+        if (!this.ajaxConfig) {
             return { success: false, items: [], message: "Ajax not configured" };
         }
 
@@ -67,7 +67,7 @@ export class SearchController {
         if (valuesArray.length === 0) return { success: true, items: [] };
 
         try {
-            const cfg = this._ajaxConfig;
+            const cfg = this.ajaxConfig;
 
             let payload: Record<string, any>;
             if (typeof cfg.dataByValues === "function") {
@@ -76,7 +76,7 @@ export class SearchController {
                 payload = {
                     values: valuesArray.join(","),
                     load_by_values: "1",
-                    ...(typeof cfg.data === "function" ? cfg.data.bind(this._selectBox.Selective.find(this._selectBox.container.targetElement))("", 0) : cfg.data ?? {}),
+                    ...(typeof cfg.data === "function" ? cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))("", 0) : cfg.data ?? {}),
                 };
             }
 
@@ -98,7 +98,7 @@ export class SearchController {
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
 
             const data = await response.json();
-            const result = this._parseResponse(data);
+            const result = this.parseResponse(data);
 
             return { success: true, items: result.items };
         } catch (error: any) {
@@ -112,8 +112,8 @@ export class SearchController {
      * @param {string[]} values - Values to check
      * @returns {{existing: string[], missing: string[]}}
      */
-    checkMissingValues(values: string[]): { existing: string[]; missing: string[] } {
-        const allOptions = Array.from(this._select.options);
+    public checkMissingValues(values: string[]): { existing: string[]; missing: string[] } {
+        const allOptions = Array.from(this.select.options);
         const existingValues = allOptions.map((opt) => opt.value);
 
         const existing = values.filter((v) => existingValues.includes(v));
@@ -127,8 +127,8 @@ export class SearchController {
      *
      * @param {object} config - AJAX configuration object (e.g., endpoint, headers, query params).
      */
-    setAjax(config: AjaxConfig | null): void {
-        this._ajaxConfig = config;
+    public setAjax(config: AjaxConfig | null): void {
+        this.ajaxConfig = config;
     }
 
     /**
@@ -136,39 +136,39 @@ export class SearchController {
      *
      * @param {Popup} popupInstance - The popup used to display search results and loading state.
      */
-    setPopup(popupInstance: Popup): void {
-        this._popup = popupInstance;
+    public setPopup(popupInstance: Popup): void {
+        this.popup = popupInstance;
     }
 
     /**
      * Returns a shallow copy of the current pagination state used for search/infinite scroll.
      */
-    getPaginationState(): PaginationState {
-        return { ...this._paginationState };
+    public getPaginationState(): PaginationState {
+        return { ...this.paginationState };
     }
 
     /**
      * Resets pagination counters while preserving whether pagination is enabled.
      * Clears page, totals, loading flags, and current keyword.
      */
-    resetPagination(): void {
-        this._paginationState = {
+    public resetPagination(): void {
+        this.paginationState = {
             currentPage: 0,
             totalPages: 1,
             hasMore: false,
             isLoading: false,
             currentKeyword: "",
-            isPaginationEnabled: this._paginationState.isPaginationEnabled,
+            isPaginationEnabled: this.paginationState.isPaginationEnabled,
         };
     }
 
     /**
      * Clears the current keyword and makes all options visible (local reset).
      */
-    clear(): void {
-        this._paginationState.currentKeyword = "";
+    public clear(): void {
+        this.paginationState.currentKeyword = "";
 
-        const { modelList } = this._modelManager.getResources();
+        const { modelList } = this.modelManager.getResources();
         const flatOptions: OptionModel[] = [];
 
         for (const m of modelList as MixedItem[]) {
@@ -184,22 +184,22 @@ export class SearchController {
     /**
      * Performs a search with either AJAX or local filtering depending on configuration.
      */
-    async search(keyword: string, append: boolean = false): Promise<any> {
-        if (this._ajaxConfig) return this._ajaxSearch(keyword, append);
+    public async search(keyword: string, append: boolean = false): Promise<any> {
+        if (this.ajaxConfig) return this._ajaxSearch(keyword, append);
         return this._localSearch(keyword);
     }
 
     /**
      * Loads the next page for AJAX pagination if enabled and not already loading.
      */
-    async loadMore(): Promise<any> {
-        if (!this._ajaxConfig) return { success: false, message: "Ajax not enabled" };
-        if (this._paginationState.isLoading) return { success: false, message: "Already loading" };
-        if (!this._paginationState.isPaginationEnabled) return { success: false, message: "Pagination not enabled" };
-        if (!this._paginationState.hasMore) return { success: false, message: "No more data" };
-
-        this._paginationState.currentPage++;
-        return this._ajaxSearch(this._paginationState.currentKeyword, true);
+    public async loadMore(): Promise<any> {
+        if (!this.ajaxConfig) return { success: false, message: "Ajax not enabled" };
+        if (this.paginationState.isLoading) return { success: false, message: "Already loading" };
+        if (!this.paginationState.isPaginationEnabled) return { success: false, message: "Pagination not enabled" };
+        if (!this.paginationState.hasMore) return { success: false, message: "No more data" };
+
+        this.paginationState.currentPage++;
+        return this._ajaxSearch(this.paginationState.currentKeyword, true);
     }
 
     /**
@@ -207,12 +207,12 @@ export class SearchController {
      * and toggling each option's visibility based on text match. Returns summary flags.
      */
     private async _localSearch(keyword: string): Promise<{ success: boolean; hasResults: boolean; isEmpty: boolean }> {
-        if (this.compareSearchTrigger(keyword)) this._paginationState.currentKeyword = keyword;
+        if (this.compareSearchTrigger(keyword)) this.paginationState.currentKeyword = keyword;
 
         const lower = String(keyword ?? "").toLowerCase();
         const lowerNA = Libs.string2normalize(lower);
 
-        const { modelList } = this._modelManager.getResources();
+        const { modelList } = this.modelManager.getResources();
 
         const flatOptions: OptionModel[] = [];
         for (const m of modelList as MixedItem[]) {
@@ -223,10 +223,7 @@ export class SearchController {
         let hasVisibleItems = false;
 
         flatOptions.forEach((opt) => {
-            const text = String(opt.textContent ?? opt.text ?? "").toLowerCase();
-            const textNA = Libs.string2normalize(text);
-
-            const isVisible = lower === "" || text.includes(lower) || textNA.includes(lowerNA);
+            const isVisible = lower === "" || opt.textToFind.includes(lowerNA);
 
             opt.visible = isVisible;
             if (isVisible) hasVisibleItems = true;
@@ -243,36 +240,36 @@ export class SearchController {
      * Checks whether the provided keyword differs from the current one,
      * to determine if a new search should be triggered.
      */
-    compareSearchTrigger(keyword: string): boolean {
-        return keyword !== this._paginationState.currentKeyword;
+    public compareSearchTrigger(keyword: string): boolean {
+        return keyword !== this.paginationState.currentKeyword;
     }
 
     /**
      * Executes an AJAX-based search with optional appending.
      */
     private async _ajaxSearch(keyword: string, append: boolean = false): Promise<any> {
-        const cfg = this._ajaxConfig!;
+        const cfg = this.ajaxConfig!;
         if (this.compareSearchTrigger(keyword)) {
             this.resetPagination();
-            this._paginationState.currentKeyword = keyword;
+            this.paginationState.currentKeyword = keyword;
             append = false;
         }
 
-        this._paginationState.isLoading = true;
-        this._popup?.showLoading();
+        this.paginationState.isLoading = true;
+        this.popup?.showLoading();
 
-        this._abortController?.abort();
-        this._abortController = new AbortController();
+        this.abortController?.abort();
+        this.abortController = new AbortController();
 
-        const page = this._paginationState.currentPage;
+        const page = this.paginationState.currentPage;
 
-        const selectedValues = Array.from(this._select.selectedOptions)
+        const selectedValues = Array.from(this.select.selectedOptions)
             .map((opt) => opt.value)
             .join(",");
 
         let payload: Record<string, any>;
         if (typeof cfg.data === "function") {
-            payload = cfg.data.bind(this._selectBox.Selective.find(this._selectBox.container.targetElement))(keyword, page);
+            payload = cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))(keyword, page);
             if (payload && typeof payload.selectedValue === "undefined") payload.selectedValue = selectedValues;
         } else {
             payload = { search: keyword, page, selectedValue: selectedValues, ...(cfg.data ?? {}) };
@@ -288,29 +285,29 @@ export class SearchController {
                     method: "POST",
                     body: formData,
                     headers: { "Content-Type": "application/x-www-form-urlencoded" },
-                    signal: this._abortController.signal,
+                    signal: this.abortController.signal,
                 });
             } else {
                 const params = new URLSearchParams(payload).toString();
-                response = await fetch(`${cfg.url}?${params}`, { signal: this._abortController.signal });
+                response = await fetch(`${cfg.url}?${params}`, { signal: this.abortController.signal });
             }
 
             const data = await response.json();
-            const result = this._parseResponse(data);
+            const result = this.parseResponse(data);
 
             if (result.hasPagination) {
-                this._paginationState.isPaginationEnabled = true;
-                this._paginationState.currentPage = result.page;
-                this._paginationState.totalPages = result.totalPages;
-                this._paginationState.hasMore = result.hasMore;
+                this.paginationState.isPaginationEnabled = true;
+                this.paginationState.currentPage = result.page;
+                this.paginationState.totalPages = result.totalPages;
+                this.paginationState.hasMore = result.hasMore;
             } else {
-                this._paginationState.isPaginationEnabled = false;
+                this.paginationState.isPaginationEnabled = false;
             }
 
             this.applyAjaxResult(result.items, !!cfg.keepSelected, append);
 
-            this._paginationState.isLoading = false;
-            this._popup?.hideLoading();
+            this.paginationState.isLoading = false;
+            this.popup?.hideLoading();
 
             return {
                 success: true,
@@ -322,8 +319,8 @@ export class SearchController {
                 totalPages: result.totalPages,
             };
         } catch (error: any) {
-            this._paginationState.isLoading = false;
-            this._popup?.hideLoading();
+            this.paginationState.isLoading = false;
+            this.popup?.hideLoading();
 
             if (error?.name === "AbortError") return { success: false, message: "Request aborted" };
 
@@ -335,7 +332,7 @@ export class SearchController {
     /**
      * Parses various server response shapes into a normalized structure for options and groups.
      */
-    private _parseResponse(data: any): ParseResponseResult {
+    private parseResponse(data: any): ParseResponseResult {
         let items: any[] = [];
         let hasPagination = false;
         let page = 0;
@@ -404,8 +401,8 @@ export class SearchController {
     /**
      * Applies normalized AJAX results to the underlying <select> element.
      */
-    applyAjaxResult(items: NormalizedAjaxItem[], keepSelected: boolean, append: boolean = false): void {
-        const select = this._select;
+    public applyAjaxResult(items: NormalizedAjaxItem[], keepSelected: boolean, append: boolean = false): void {
+        const select = this.select;
 
         let oldSelected: string[] = [];
         if (keepSelected) oldSelected = Array.from(select.selectedOptions).map((o) => o.value);

package/src/ts/models/group-model.ts

@@ -5,28 +5,28 @@ import type { GroupViewTags } from "../types/views/view.group.type";
 import { GroupView } from "../views/group-view";
 import { OptionModel } from "./option-model";
 import type { IEventCallback } from "../types/utils/ievents.type";
-import { DefaultConfig } from "../types/utils/istorage.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 
 /**
  * @extends {Model<HTMLOptGroupElement, GroupViewTags, GroupView>}
  */
-export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupView, DefaultConfig> {
-    label = "";
+export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupView, SelectiveOptions> {
+    public label = "";
 
-    items: OptionModel[] = [];
+    public items: OptionModel[] = [];
 
-    collapsed = false;
+    public collapsed = false;
 
-    private _privOnCollapsedChanged: Array<(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void> = [];
+    private privOnCollapsedChanged: Array<(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void> = [];
 
     /**
      * Initializes a group model with options and an optional <optgroup> target.
      * Reads the label and collapsed state from the target element's attributes/dataset.
      *
-     * @param {DefaultConfig} options - Configuration for the model.
+     * @param {SelectiveOptions} options - Configuration for the model.
      * @param {HTMLOptGroupElement} [targetElement] - The source <optgroup> element.
      */
-    constructor(options: DefaultConfig, targetElement?: HTMLOptGroupElement) {
+    public constructor(options: SelectiveOptions, targetElement?: HTMLOptGroupElement) {
         super(options, targetElement ?? null, null);
 
         if (targetElement) {
@@ -40,7 +40,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {string[]}
      */
-    get value(): string[] {
+    public get value(): string[] {
         return this.items.map((item) => item.value);
     }
 
@@ -49,7 +49,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {OptionModel[]}
      */
-    get selectedItems(): OptionModel[] {
+    public get selectedItems(): OptionModel[] {
         return this.items.filter((item) => item.selected);
     }
 
@@ -58,7 +58,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {OptionModel[]}
      */
-    get visibleItems(): OptionModel[] {
+    public get visibleItems(): OptionModel[] {
         return this.items.filter((item) => item.visible);
     }
 
@@ -67,7 +67,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {boolean}
      */
-    get hasVisibleItems(): boolean {
+    public get hasVisibleItems(): boolean {
         return this.visibleItems.length > 0;
     }
 
@@ -76,7 +76,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {HTMLOptGroupElement} targetElement - The updated <optgroup> element.
      */
-    update(targetElement: HTMLOptGroupElement): void {
+    public update(targetElement: HTMLOptGroupElement): void {
         this.label = targetElement.label;
         this.view?.updateLabel(this.label);
     }
@@ -85,7 +85,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Hook invoked when the target element reference changes.
      * Updates the view's label and collapsed state to keep UI in sync.
      */
-    onTargetChanged(): void {
+    public onTargetChanged(): void {
         if (this.view) {
             this.view.updateLabel(this.label);
             this.view.setCollapsed(this.collapsed);
@@ -97,18 +97,18 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void} callback - Listener for collapse changes.
      */
-    onCollapsedChanged(callback: (evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void): void {
-        this._privOnCollapsedChanged.push(callback);
+    public onCollapsedChanged(callback: (evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void): void {
+        this.privOnCollapsedChanged.push(callback);
     }
 
     /**
      * Toggles the group's collapsed state, updates the view, and notifies registered listeners.
      */
-    toggleCollapse(): void {
+    public toggleCollapse(): void {
         this.collapsed = !this.collapsed;
         this.view?.setCollapsed(this.collapsed);
 
-        iEvents.callEvent<[GroupModel, boolean]>([this, this.collapsed], ...this._privOnCollapsedChanged);
+        iEvents.callEvent<[GroupModel, boolean]>([this, this.collapsed], ...this.privOnCollapsedChanged);
     }
 
     /**
@@ -116,7 +116,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {OptionModel} optionModel - The option to add.
      */
-    addItem(optionModel: OptionModel): void {
+    public addItem(optionModel: OptionModel): void {
         this.items.push(optionModel);
         optionModel.group = this;
     }
@@ -126,7 +126,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {OptionModel} optionModel - The option to remove.
      */
-    removeItem(optionModel: OptionModel): void {
+    public removeItem(optionModel: OptionModel): void {
         const index = this.items.indexOf(optionModel);
         if (index > -1) {
             this.items.splice(index, 1);
@@ -138,7 +138,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Updates the group's visibility in the view, typically based on children visibility.
      * No-ops if the view is not initialized.
      */
-    updateVisibility(): void {
+    public updateVisibility(): void {
         this.view?.updateVisibility();
     }
 }