@whitesev/domutils 1.8.5 → 1.8.7

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

@@ -12,7 +12,7 @@ declare class ElementWait extends ElementSelector {
      * @param timeout 超时时间，默认0
      * @param parent （可选）父元素，默认document
      * @example
-     * Utils.wait(()=> {
+     * DOMUtils.wait(()=> {
      *   let $test = document.querySelector("#test");
      *   return {
      *     success: $test !== null,
@@ -40,26 +40,48 @@ declare class ElementWait extends ElementSelector {
          */
         data: T;
     }, timeout?: number, parent?: Node | Element | Document | HTMLElement): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorFn 获取元素的函数
+     * @example
+     * DOMUtils.waitNode(()=>document.querySelector("div")).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement
+     * })
+     */
+    waitNode<K>(selectorFn: () => K | null | undefined): Promise<K>;
     /**
      * 等待元素出现
      * @param selectorFn 获取元素的函数
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNode(()=>document.querySelector("div"), 1000).then( $div =>{
+     * DOMUtils.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 selectorFn 获取元素的函数
+     * @param parent 父元素
+     * @param timeout 超时时间，默认0
+     * @example
+     * DOMUtils.waitNode(()=>document.querySelector("div"), document).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement
+     * })
+     * DOMUtils.waitNode(()=>document.querySelector("div"), document, 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K>(selectorFn: () => K | null | undefined, parent: Node | Element | Document | HTMLElement, timeout?: number): Promise<K | null | undefined>;
     /**
      * 等待元素出现
      * @param selector CSS选择器
      * @param parent （可选）父元素，默认document
      * @example
-     * Utils.waitNode("div").then( $div =>{
+     * DOMUtils.waitNode("div").then( $div =>{
      *  console.log($div); // div => HTMLDivELement
      * })
-     * Utils.waitNode("div", document).then( $div =>{
+     * DOMUtils.waitNode("div", document).then( $div =>{
      *  console.log($div); // div => HTMLDivELement
      * })
      */
@@ -70,10 +92,10 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param parent （可选）父元素，默认document
      * @example
-     * Utils.waitNode(["div"]).then( ([$div]) =>{
+     * DOMUtils.waitNode(["div"]).then( ([$div]) =>{
      *  console.log($div); // div => HTMLDivELement[]
      * })
-     * Utils.waitNode(["div"], document).then( ([$div]) =>{
+     * DOMUtils.waitNode(["div"], document).then( ([$div]) =>{
      *  console.log($div); // div => HTMLDivELement[]
      * })
      */
@@ -85,7 +107,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 父元素，默认document
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNode("div", document, 1000).then( $div =>{
+     * DOMUtils.waitNode("div", document, 1000).then( $div =>{
      *  console.log($div); // $div => HTMLDivELement | null
      * })
      */
@@ -97,7 +119,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 父元素，默认document
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNode(["div"], document, 1000).then( ([$div]) =>{
+     * DOMUtils.waitNode(["div"], document, 1000).then( ([$div]) =>{
      *  console.log($div); // $div => HTMLDivELement[] | null
      * })
      */
@@ -108,7 +130,7 @@ declare class ElementWait extends ElementSelector {
      * @param selector CSS选择器
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNode("div", 1000).then( $div =>{
+     * DOMUtils.waitNode("div", 1000).then( $div =>{
      *  console.log($div); // $div => HTMLDivELement | null
      * })
      */
@@ -119,7 +141,7 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNode(["div"], 1000).then( [$div] =>{
+     * DOMUtils.waitNode(["div"], 1000).then( [$div] =>{
      *  console.log($div); // $div => HTMLDivELement[] | null
      * })
      */
@@ -130,10 +152,10 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param parent （可选）监听的父元素
      * @example
-     * Utils.waitAnyNode(["div","div"]).then( $div =>{
+     * DOMUtils.waitAnyNode(["div","div"]).then( $div =>{
      *  console.log($div); // $div => HTMLDivELement 这里是第一个
      * })
-     * Utils.waitAnyNode(["a","div"], document).then( $a =>{
+     * DOMUtils.waitAnyNode(["a","div"], document).then( $a =>{
      *  console.log($a); // $a => HTMLAnchorElement 这里是第一个
      * })
      */
@@ -145,7 +167,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 父元素，默认document
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitAnyNode(["div","div"], document, 10000).then( $div =>{
+     * DOMUtils.waitAnyNode(["div","div"], document, 10000).then( $div =>{
      *  console.log($div); // $div => HTMLDivELement | null
      * })
      */
@@ -156,7 +178,7 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitAnyNode(["div","div"], 10000).then( $div =>{
+     * DOMUtils.waitAnyNode(["div","div"], 10000).then( $div =>{
      *  console.log($div); // $div => HTMLDivELement | null
      * })
      */
@@ -167,10 +189,10 @@ declare class ElementWait extends ElementSelector {
      * @param selector CSS选择器
      * @param parent （可选）监听的父元素
      * @example
-     * Utils.waitNodeList("div").then( $result =>{
+     * DOMUtils.waitNodeList("div").then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>
      * })
-     * Utils.waitNodeList("div", document).then( $result =>{
+     * DOMUtils.waitNodeList("div", document).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>
      * })
      */
@@ -181,10 +203,10 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param parent （可选）监听的父元素
      * @example
-     * Utils.waitNodeList(["div"]).then( $result =>{
+     * DOMUtils.waitNodeList(["div"]).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
      * })
-     * Utils.waitNodeList(["div"], document).then( $result =>{
+     * DOMUtils.waitNodeList(["div"], document).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
      * })
      */
@@ -196,7 +218,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 监听的父元素
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNodeList("div", document, 10000).then( $result =>{
+     * DOMUtils.waitNodeList("div", document, 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
      * })
      */
@@ -208,7 +230,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 监听的父元素
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNodeList(["div"], document, 10000).then( $result =>{
+     * DOMUtils.waitNodeList(["div"], document, 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
      * })
      */
@@ -219,7 +241,7 @@ declare class ElementWait extends ElementSelector {
      * @param selector CSS选择器数组
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNodeList("div", 10000).then( $result =>{
+     * DOMUtils.waitNodeList("div", 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
      * })
      */
@@ -230,7 +252,7 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitNodeList(["div"], 10000).then( $result =>{
+     * DOMUtils.waitNodeList(["div"], 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
      * })
      */
@@ -241,10 +263,10 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param parent （可选）监听的父元素
      * @example
-     * Utils.waitAnyNodeList(["div","a"]).then( $result =>{
+     * DOMUtils.waitAnyNodeList(["div","a"]).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>
      * })
-     * Utils.waitAnyNodeList(["div","a"], document).then( $result =>{
+     * DOMUtils.waitAnyNodeList(["div","a"], document).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement>
      * })
      */
@@ -256,7 +278,7 @@ declare class ElementWait extends ElementSelector {
      * @param parent 父元素，默认document
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitAnyNodeList(["div","a"], document, 10000).then( $result =>{
+     * DOMUtils.waitAnyNodeList(["div","a"], document, 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
      * })
      */
@@ -267,7 +289,7 @@ declare class ElementWait extends ElementSelector {
      * @param selectorList CSS选择器数组
      * @param timeout 超时时间，默认0
      * @example
-     * Utils.waitAnyNodeList(["div","div"], 10000).then( $result =>{
+     * DOMUtils.waitAnyNodeList(["div","div"], 10000).then( $result =>{
      *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
      * })
      */

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

@@ -1,7 +1,8 @@
 import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
-import { type DOMUtilsTargetElementType } from "./types/global";
+import { type DOMUtilsCSSProperty, type DOMUtilsCSSPropertyType } from "./types/DOMUtilsCSSProperty";
 import type { WindowApiOption } from "./types/WindowApi";
 import { ElementHandler } from "./ElementHandler";
+import type { DOMUtilsTargetElementType } from "./types/global";
 declare class DOMUtils extends ElementHandler {
     constructor(option?: WindowApiOption);
     /** 版本号 */
@@ -102,7 +103,7 @@ declare class DOMUtils extends ElementHandler {
      * DOMUtils.css("a.xx","display");
      * > "none"
      * */
-    css($el: DOMUtilsTargetElementType, property: keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index"): string;
+    css($el: DOMUtilsTargetElementType, property: DOMUtilsCSSPropertyType): string;
     /**
      * 获取元素的样式属性值
      * @param $el 目标元素
@@ -130,7 +131,7 @@ declare class DOMUtils extends ElementHandler {
      * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
      * DOMUtils.css(document.querySelector("a.xx"),"top",10);
      * */
-    css($el: DOMUtilsTargetElementType, property: (keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index") & string, value: string | number): string;
+    css($el: DOMUtilsTargetElementType, property: DOMUtilsCSSPropertyType & string, value: string | number): string;
     /**
      * 设置元素的样式属性
      * @param $el 目标元素
@@ -145,13 +146,9 @@ declare class DOMUtils extends ElementHandler {
      * DOMUtils.css(document.querySelector("a.xx"),{ top: "10px" });
      * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
      * */
-    css($el: DOMUtilsTargetElementType, property: {
-        [P in keyof Omit<CSSStyleDeclaration, "zIndex">]?: CSSStyleDeclaration[P];
-    } | {
-        "z-index": string | number;
-    } | {
+    css($el: DOMUtilsTargetElementType, property: DOMUtilsCSSProperty | {
         [key: string]: string | number;
-    }): string;
+    } | string): string;
     /**
      * 获取元素的文本内容，优先返回textContent
      * @param $el 目标元素

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

@@ -0,0 +1,36 @@
+/**
+ * 属性转驼峰
+ */
+export type DOMUtilsCamelToKebabCSSProperty<S extends string> = S extends `webkit${infer U}`
+  ? `-${Lowercase<"webkit">}${U extends `${infer First}${infer Rest}`
+      ? First extends Uppercase<First>
+        ? `-${Uncapitalize<First>}${DOMUtilsCamelToKebabCSSProperty<Rest>}`
+        : `${First}${DOMUtilsCamelToKebabCSSProperty<Rest>}`
+      : U}`
+  : S extends `${infer T}${infer U}`
+    ? U extends Uncapitalize<U>
+      ? `${Uncapitalize<T>}${DOMUtilsCamelToKebabCSSProperty<U>}`
+      : `${Uncapitalize<T>}-${DOMUtilsCamelToKebabCSSProperty<U>}`
+    : S;
+
+export type DOMUtilsCSSPropertyType = DOMUtilsCamelToKebabCSSProperty<
+  Extract<
+    keyof Omit<
+      CSSStyleDeclaration,
+      | "cssFloat"
+      | "cssText"
+      | "length"
+      | "parentRule"
+      | "getPropertyPriority"
+      | "getPropertyValue"
+      | "item"
+      | "removeProperty"
+      | "setProperty"
+    >,
+    string
+  >
+>;
+
+export type DOMUtilsCSSProperty = {
+  [P in DOMUtilsCSSPropertyType]: string | number;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "type": "module",
   "description": "适合在浏览器中操作DOM的常用工具类",
   "main": "dist/index.cjs.js",
@@ -52,7 +52,7 @@
     "rollup-plugin-clear": "^2.0.7",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0"
+    "typescript-eslint": "^8.50.1"
   },
   "scripts": {
     "lint": "eslint .",