@whitesev/pops 2.3.7 → 2.4.0

package/dist/types/src/Pops.d.ts

@@ -151,6 +151,9 @@ declare class Pops {
                 transformLeft: number;
                 transformTop: number;
             };
+            onInput($el: HTMLInputElement | HTMLTextAreaElement, callback: (evt: InputEvent) => void | Promise<void>, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): {
+                off: () => void;
+            };
             on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
             on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
             on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
@@ -21409,16 +21412,20 @@ declare class Pops {
             $hintULContainer: HTMLUListElement;
             $dynamicCSS: HTMLStyleElement;
         };
+        $evt: {
+            offInputChangeEvtHandler: Function[];
+        };
         $data: {
             isEmpty: boolean;
         };
-        initEl(): void;
         init(parentElement?: HTMLElement): void;
-        getData(): any[];
+        initEl(): void;
+        getData(): import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>[];
+        setData(data: import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>[]): void;
         createSearchSelectElement(): HTMLDivElement;
         getDynamicCSS(): string;
-        createSearchItemLiElement(data: any, index: number): HTMLLIElement;
-        getItemDataValue(data: any): any;
+        getItemDataValue(data: import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>): import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>;
+        createSearchItemLiElement(dataItem: import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>, dateItemIndex: number): HTMLLIElement;
         setSearchItemClickEvent($searchItem: HTMLLIElement): void;
         setSearchItemSelectEvent(liElement: HTMLLIElement): void;
         setInputChangeEvent(option?: AddEventListenerOptions): void;
@@ -21431,16 +21438,16 @@ declare class Pops {
         removeHideEvent(option?: AddEventListenerOptions): void;
         setAllEvent(option?: AddEventListenerOptions): void;
         removeAllEvent(option?: AddEventListenerOptions): void;
-        getDeleteIconHTML(size?: number, fill?: string): string;
+        createItemDeleteIcon(size?: number, fill?: string): HTMLElement;
         setPromptsInSearch(): void;
         removePromptsInSearch(): void;
-        clearAllSearchItemLi(): void;
-        changeHintULElementPosition(target?: HTMLElement): void;
+        changeHintULElementPosition(target?: HTMLElement, checkPositonAgain?: Boolean): void;
         changeHintULElementWidth(target?: HTMLElement): void;
         updateDynamicCSS(): void;
         updateStyleSheet(): void;
-        update(data?: any[]): void;
-        clear(): void;
+        addItem($item: HTMLElement | DocumentFragment): void;
+        update(updateData?: import("./components/searchSuggestion/types/index").PopsSearchSuggestionData<T>[]): void;
+        clear(onlyClearView?: boolean): void;
         hide(useAnimationToHide?: boolean): void;
         show(): void;
     };

package/dist/types/src/components/searchSuggestion/config.d.ts

@@ -1,2 +1,2 @@
 import type { PopsSearchSuggestionDetails } from "./types/index";
-export declare const searchSuggestionConfig: () => DeepRequired<PopsSearchSuggestionDetails>;
+export declare const searchSuggestionConfig: () => DeepRequired<PopsSearchSuggestionDetails<any>>;

package/dist/types/src/components/searchSuggestion/index.d.ts

@@ -1,6 +1,6 @@
-import type { PopsSearchSuggestionDetails } from "./types/index";
+import type { PopsSearchSuggestionData, PopsSearchSuggestionDetails } from "./types/index";
 export declare const PopsSearchSuggestion: {
-    init(details: PopsSearchSuggestionDetails): {
+    init<T>(details: PopsSearchSuggestionDetails<T>): {
         /**
          * 当前的环境，可以是document，可以是shadowroot，默认是document
          */
@@ -13,40 +13,53 @@ export declare const PopsSearchSuggestion: {
             /** 动态更新CSS */
             $dynamicCSS: HTMLStyleElement;
         };
+        $evt: {
+            offInputChangeEvtHandler: Function[];
+        };
         $data: {
             /** 是否结果为空 */
             isEmpty: boolean;
         };
-        /** 初始化元素变量 */
-        initEl(): void;
         /**
          * 初始化
+         * @param parentElement 父元素
          */
         init(parentElement?: HTMLElement): void;
+        /**
+         * 初始化元素变量
+         */
+        initEl(): void;
         /**
          * 获取数据
          */
-        getData(): any[];
+        getData(): PopsSearchSuggestionData<T>[];
+        /**
+         * 更新数据
+         * @param data 数据
+         */
+        setData(data: PopsSearchSuggestionData<T>[]): void;
         /**
          * 获取显示出搜索建议框的html
          */
         createSearchSelectElement(): HTMLDivElement;
-        /** 动态获取CSS */
-        getDynamicCSS(): string;
         /**
-         * 获取显示出搜索建议框的每一项的html
-         * @param data 当前项的值
-         * @param index 当前项的下标
+         * 动态获取CSS
          */
-        createSearchItemLiElement(data: any, index: number): HTMLLIElement;
+        getDynamicCSS(): string;
         /**
          * 获取data-value值
-         * @param data
+         * @param data 数据项
+         */
+        getItemDataValue(data: PopsSearchSuggestionData<T>): PopsSearchSuggestionData<T>;
+        /**
+         * 获取显示出搜索建议框的每一项的html
+         * @param dataItem 当前项的值
+         * @param dateItemIndex 当前项的下标
          */
-        getItemDataValue(data: any): any;
+        createSearchItemLiElement(dataItem: PopsSearchSuggestionData<T>, dateItemIndex: number): HTMLLIElement;
         /**
          * 设置搜索建议框每一项的点击事件
-         * @param $searchItem
+         * @param $searchItem 当前项的元素
          */
         setSearchItemClickEvent($searchItem: HTMLLIElement): void;
         /**
@@ -98,7 +111,7 @@ export declare const PopsSearchSuggestion: {
         /**
          * 获取删除按钮的html
          */
-        getDeleteIconHTML(size?: number, fill?: string): string;
+        createItemDeleteIcon(size?: number, fill?: string): HTMLElement;
         /**
          * 设置当前正在搜索中的提示
          */
@@ -107,18 +120,17 @@ export declare const PopsSearchSuggestion: {
          * 移除正在搜索中的提示
          */
         removePromptsInSearch(): void;
-        /**
-         * 清空所有的搜索结果
-         */
-        clearAllSearchItemLi(): void;
         /**
          * 更新搜索建议框的位置(top、left)
          * 因为目标元素可能是动态隐藏的
+         * @param target 目标元素
+         * @param checkPositonAgain 是否在更新位置信息后检测更新位置信息，默认true
          */
-        changeHintULElementPosition(target?: HTMLElement): void;
+        changeHintULElementPosition(target?: HTMLElement, checkPositonAgain?: Boolean): void;
         /**
          * 更新搜索建议框的width
          * 因为目标元素可能是动态隐藏的
+         * @param target 目标元素
          */
         changeHintULElementWidth(target?: HTMLElement): void;
         /**
@@ -127,17 +139,27 @@ export declare const PopsSearchSuggestion: {
         updateDynamicCSS(): void;
         /**
          * 数据项的数量改变时调用
+         *
+         * - 更新css
+         * - 更新建议框的宽度
+         * - 更新建议框的位置
          */
         updateStyleSheet(): void;
+        /**
+         * 添加搜索结果元素
+         * @param $item 项元素
+         */
+        addItem($item: HTMLElement | DocumentFragment): void;
         /**
          * 更新页面显示的搜索结果
-         * @param data
+         * @param updateData
          */
-        update(data?: any[]): void;
+        update(updateData?: PopsSearchSuggestionData<T>[]): void;
         /**
          * 清空当前的搜索结果并显示无结果
+         * @param [onlyClearView=false] 是否仅清空元素，默认false
          */
-        clear(): void;
+        clear(onlyClearView?: boolean): void;
         /**
          * 隐藏搜索建议框
          * @param useAnimationToHide 是否使用动画隐藏

package/dist/types/src/components/searchSuggestion/types/index.d.ts

@@ -1,4 +1,103 @@
 import type { PopsCommonConfig } from "../../../types/components";
+export type PopsSearchSuggestionData<T = any> = {
+    /**
+     * 值
+     */
+    value: T;
+    /**
+     * 显示的文本
+     */
+    text: string;
+    /**
+     * 是否启用右侧的删除按钮
+     * @default true
+     */
+    enableDeleteButton?: boolean;
+    /**
+     * 删除按钮的点击回调
+     * @returns
+     *
+     * + true 移除该元素并且从data中移除该数据， 如果data是函数返回数组的话，那么不会生效
+     */
+    deleteButtonClickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent, 
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement, 
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>, 
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>) => void | Boolean | Promise<void | Boolean>;
+    /**
+     * 获取每一项的html，在显示的时候会调用该函数
+     *
+     * 它的父元素是一个\<li>元素
+     */
+    itemView: (
+    /**
+     * 数据项
+     */
+    dateItem: PopsSearchSuggestionData<T>, 
+    /**
+     * 父元素\<li>
+     */
+    $parent: HTMLLIElement, 
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>) => HTMLElement | string;
+    /**
+     * 每一项的点击回调
+     * @returns
+     *
+     * + true 如果设置了inputTarget且类型是input或textarea的话，那么将自动设置目标值为当前点击项的value值
+     */
+    clickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent, 
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement, 
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>, 
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>) => void | Boolean | Promise<void | Boolean>;
+    /**
+     * 键盘的上下键选择的回调
+     */
+    selectCallback?: (
+    /**
+     * 键盘事件
+     */
+    event: KeyboardEvent, 
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement, 
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>, 
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>) => void;
+};
 /**
  * 搜索建议悬浮窗
  * pops.searchSuggestion
@@ -15,32 +114,25 @@ export interface PopsSearchSuggestionDetails<T = any> extends Pick<PopsCommonCon
     target: HTMLElement;
     /**
      * 目标input元素，监听它的focus/click/input事件
+     *
+     * 如果未填，那么自动使用target的值
+     * @default config.target
      */
     inputTarget?: HTMLInputElement | HTMLTextAreaElement;
     /**
      * 数据
      */
-    data: T[] | (() => T[]);
-    /**
-     * 右边的删除按钮图标
-     */
-    deleteIcon?: {
-        /**
-         * 是否启用
-         * @default true
-         */
-        enable?: boolean;
-        /**
-         * 点击回调
-         */
-        callback?: (event: MouseEvent | PointerEvent, $dataItem: HTMLLIElement, dataItem: T) => void;
-    };
+    data: PopsSearchSuggestionData<T>[] | (() => PopsSearchSuggestionData<T>[]);
     /**
      * 自定义的className
+     * @default ""
      */
     className?: string;
     /**
-     * position是否使用absolut，否则是relative
+     * 建议框的position位置
+     *
+     * + `true`：absolute
+     * + `false`：relative
      * @default true
      */
     isAbsolute?: boolean;
@@ -90,7 +182,7 @@ export interface PopsSearchSuggestionDetails<T = any> extends Pick<PopsCommonCon
      */
     positionTopToReverse?: boolean;
     /**
-     * 搜索中的提示
+     * 搜索中的提示，可以是html
      *
      * 前提：inputTarget是input/textarea
      *
@@ -103,42 +195,42 @@ export interface PopsSearchSuggestionDetails<T = any> extends Pick<PopsCommonCon
      * 前提：inputTarget是input/textarea
      *
      * 触发change事件，且没有搜索到数据，则显示此结果项
+     *
+     * 如果该值是函数，需要返回的\<li>元素属性上存在data-none="true"
+     * @example
+     * <li data-none="true">暂无结果</li>
      */
-    toSearhNotResultHTML?: string;
+    toSearhNotResultHTML?: string | (() => HTMLLIElement);
     /**
-     * 没有搜索结果是否隐藏提示框
+     * 当没有搜索结果时，是否隐藏建议框
      * @default false
      */
     toHideWithNotResult?: boolean;
     /**
      * 跟随目标的位置
+     *
+     * + `target`：跟随config.target的位置
+     * + `input`：跟随config.inputTarget的位置
+     * + `inputCursor`：跟随config.inputTarget的输入框光标位置
+     *
      * @default "target"
      */
     followPosition?: "target" | "input" | "inputCursor";
     /**
-     * 获取每一项的html，在显示的时候会调用该函数
-     *
-     * 它的父元素是一个<li>标签
+     * 当config.target触发input时自动调用该函数来获取数据
+     * @returns 返回是需要显示的数据
      */
-    getItemHTML: (dataItem: T) => string;
+    inputTargetChangeRefreshShowDataCallback?: (
     /**
-     * 当config.target触发input时自动调用该函数来获取数据
-     * @param inputValue 当前输入框的值
-     * @param data 当前数据
+     * 当前输入框的值
      */
-    getData?: (inputValue: string, data: T[]) => Promise<T[]> | T[];
+    inputValue: string, 
     /**
-     * 每一项的点击回调
-     * @param event 触发的事件
-     * @param $dataItem 每一项的元素
-     * @param dataItem config.data的点击项的值
+     * config.data的数据
      */
-    itemClickCallBack?: (event: MouseEvent | PointerEvent, $dataItem: HTMLLIElement, dataItem: T) => void;
+    data: PopsSearchSuggestionData<T>[], 
     /**
-     * 键盘的上下键选择的回调
-     * @param event 触发的事件
-     * @param $dataItem 每一项的元素
-     * @param dataItem config.data的选中项的值
+     * 当前配置
      */
-    selectCallBack?: (event: MouseEvent, $dataItem: HTMLLIElement, dataItem: T) => void;
+    config: PopsSearchSuggestionDetails<T>) => Promise<PopsSearchSuggestionData<T>[]> | PopsSearchSuggestionData<T>[];
 }

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -750,6 +750,12 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
         transformLeft: number;
         transformTop: number;
     };
+    /**
+     * 监input、textarea的输入框值改变的事件
+     */
+    onInput($el: HTMLInputElement | HTMLTextAreaElement, callback: (evt: InputEvent) => void | Promise<void>, option?: PopsDOMUtilsEventListenerOption | boolean): {
+        off: () => void;
+    };
 }
 declare const popsDOMUtils: PopsDOMUtils;
 export { popsDOMUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",