@whitesev/domutils 1.6.8 → 1.7.0

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

@@ -0,0 +1,96 @@
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
+declare class ElementSelector {
+    windowApi: typeof WindowApi.prototype;
+    constructor(windowApiOption?: WindowApiOption);
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @param parent 指定父元素
+     * @example
+     * DOMUtils.selector("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:regexp('^xxxx$')")
+     * > div.xxx
+     */
+    selector<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K] | undefined;
+    selector<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E | undefined;
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @param parent 指定父元素
+     * @example
+     * DOMUtils.selectorAll("div:contains('测试')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:empty")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp('^xxxx$')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
+     * > [div.xxx]
+     */
+    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K][];
+    selectorAll<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E[];
+    /**
+     * 匹配元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.matches("div:contains('测试')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:empty")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp('^xxxx$')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp(/^xxx/ig)")
+     * > false
+     */
+    matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
+    /**
+     * 根据选择器获取上层元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.closest("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:regexp('^xxxx$')")
+     * > div.xxxx
+     * @example
+     * DOMUtils.closest("div:regexp(/^xxx/ig)")
+     * > null
+     */
+    closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
+}
+declare const elementSelector: ElementSelector;
+export { elementSelector, ElementSelector };

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

@@ -0,0 +1,278 @@
+import { ElementSelector } from "./ElementSelector";
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
+declare class ElementWait extends ElementSelector {
+    windowApi: typeof WindowApi.prototype;
+    constructor(windowApiOption?: WindowApiOption);
+    /**
+     * 等待任意事件成立
+     *
+     * 运行方式为根据页面元素的改变而触发回调
+     * @param checkFn 检测的函数
+     * @param timeout 超时时间，默认0
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.wait(()=> {
+     *   let $test = document.querySelector("#test");
+     *   return {
+     *     success: $test !== null,
+     *     data:  $test
+     *   }
+     * })
+     */
+    wait<T>(checkFn: (...args: any[]) => {
+        /**
+         * 是否检测成功
+         */
+        success: boolean;
+        /**
+         * 返回的值
+         */
+        data: T;
+    }, timeout?: null | undefined, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    wait<T>(checkFn: (...args: any[]) => {
+        /**
+         * 是否检测成功
+         */
+        success: boolean;
+        /**
+         * 返回的值
+         */
+        data: T;
+    }, timeout?: number, parent?: Node | Element | Document | HTMLElement): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorFn 获取元素的函数
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(()=>document.querySelector("div"), 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K>(selectorFn: () => K | null | undefined): Promise<K>;
+    waitNode<K>(selectorFn: () => K | null | undefined, timeout: number): Promise<K | null | undefined>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.waitNode("div").then( $div =>{
+     *  console.log($div); // div => HTMLDivELement
+     * })
+     * Utils.waitNode("div", document).then( $div =>{
+     *  console.log($div); // div => HTMLDivELement
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K]>;
+    waitNode<T extends Element>(selector: string, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.waitNode(["div"]).then( ([$div]) =>{
+     *  console.log($div); // div => HTMLDivELement[]
+     * })
+     * Utils.waitNode(["div"], document).then( ([$div]) =>{
+     *  console.log($div); // div => HTMLDivELement[]
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K][]>;
+    waitNode<T extends Element[]>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode("div", document, 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element>(selector: string, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(["div"], document, 1000).then( ([$div]) =>{
+     *  console.log($div); // $div => HTMLDivELement[] | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element[]>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode("div", 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element>(selector: string, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(["div"], 1000).then( [$div] =>{
+     *  console.log($div); // $div => HTMLDivELement[] | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element[]>(selectorList: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitAnyNode(["div","div"]).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement 这里是第一个
+     * })
+     * Utils.waitAnyNode(["a","div"], document).then( $a =>{
+     *  console.log($a); // $a => HTMLAnchorElement 这里是第一个
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K]>;
+    waitAnyNode<T extends Element>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNode(["div","div"], document, 10000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitAnyNode<T extends Element>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNode(["div","div"], 10000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitAnyNode<T extends Element>(selectorList: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitNodeList("div").then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     * Utils.waitNodeList("div", document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     */
+    waitNodeList<T extends keyof HTMLElementTagNameMap>(selector: T, parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[T]>>;
+    waitNodeList<T extends NodeListOf<Element>>(selector: string, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitNodeList(["div"]).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
+     * })
+     * Utils.waitNodeList(["div"], document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[K]>[]>;
+    waitNodeList<T extends NodeListOf<Element>[]>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器
+     * @param parent 监听的父元素
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList("div", document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitNodeList<T extends NodeListOf<Element>>(selector: string, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selector: K, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent 监听的父元素
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList(["div"], document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]>[] | null>;
+    waitNodeList<T extends NodeListOf<Element>[]>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList("div", 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selector: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitNodeList<T extends NodeListOf<Element>>(selector: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList(["div"], 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]>[] | null>;
+    waitNodeList<T extends NodeListOf<Element>>(selectorList: string[], timeout: number): Promise<T[] | null>;
+    /**
+     * 等待任意元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitAnyNodeList(["div","a"]).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     * Utils.waitAnyNodeList(["div","a"], document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[K]>>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<T>>;
+    /**
+     * 等待任意元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNodeList(["div","a"], document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<T> | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNodeList(["div","div"], 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], timeout: number): Promise<NodeListOf<T> | null>;
+}
+declare const elementWait: ElementWait;
+export { elementWait, ElementWait };

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

@@ -0,0 +1,4 @@
+export declare const GlobalData: {
+    /** .on添加在元素存储的事件 */
+    domEventSymbol: symbol;
+};

package/dist/types/src/{DOMUtilsOriginPrototype.d.ts → OriginPrototype.d.ts}

@@ -1,6 +1,5 @@
-declare const OriginPrototype: {
+export declare const OriginPrototype: {
     Object: {
         defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;
     };
 };
-export { OriginPrototype };

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

@@ -0,0 +1,68 @@
+import type { WindowApiOption } from "./types/WindowApi";
+declare class Utils {
+    private windowApi;
+    constructor(option?: WindowApiOption);
+    /**
+     * 判断对象是否是jQuery对象
+     * @param target
+     * @returns
+     * + true 是jQuery对象
+     * + false 不是jQuery对象
+     * @example
+     * Utils.isJQuery($("a"))
+     * > true
+     */
+    isJQuery(target: any): boolean;
+    /**
+       * JSON数据从源端替换到目标端中，如果目标端存在该数据则替换，不添加，返回结果为目标端替换完毕的结果
+       * @param target 目标数据
+       * @param source 源数据
+       * @param isAdd 是否可以追加键，默认false
+       * @example
+       * Utils.assign({"1":1,"2":{"3":3}}, {"2":{"3":4}});
+       * >
+       * {
+              "1": 1,
+              "2": {
+                  "3": 4
+              }
+          }
+       */
+    assign<T1, T2 extends object, T3 extends boolean>(target: T1, source: T2, isAdd?: T3): T3 extends true ? T1 & T2 : T1;
+    /**
+     * 监听页面元素改变并处理
+     * @param target 需要监听的元素，如果不存在，可以等待它出现
+     * @param observer_config MutationObserver的配置
+     * @example
+      Utils.mutationObserver(document.querySelector("div.xxxx"),{
+        "callback":(mutations, observer)=>{},
+        "config":{childList:true,attributes:true}
+      });
+      * @example
+      Utils.mutationObserver(document.querySelectorAll("div.xxxx"),{
+        "callback":(mutations, observer)=>{},
+        "config":{childList:true,attributes:true}}
+      );
+      * @example
+      Utils.mutationObserver($("div.xxxx"),{
+      "callback":(mutations, observer)=>{},
+      "config":{childList:true,attributes:true}}
+      );
+      **/
+    mutationObserver(target: HTMLElement | Node | NodeList | Document, observer_config: {
+        /**
+         * observer的配置
+         */
+        config?: MutationObserverInit;
+        /**
+         * 是否主动触发一次
+         */
+        immediate?: boolean;
+        /**
+         * 触发的回调函数
+         */
+        callback: MutationCallback;
+    }): MutationObserver;
+}
+declare const utils: Utils;
+export { utils, Utils };