ph-utils 0.15.0 → 0.15.3

package/README.md

@@ -1,7 +1,7 @@
-## ph-utils
-
-整理了 js 前后端开发(web + nodejs)时常用的一些工具；[详细文档](https://gitee.com/towardly/ph/wikis/Home?sort_id=4035190)
-
-### 包含如下工具文件
-
-`index` 基础工具类、`date` 跟日期相关的工具类、`file` 文件操作相关工具类[**服务端**]、`server` 服务端工具类、`validator` 数据验证、`dom` 浏览器节点操作相关[**前端**]、`web` 一些只适用于前端相关的工具、`color` 颜色相关工具
+## ph-utils
+
+整理了 js 前后端开发(web + nodejs)时常用的一些工具；[详细文档](https://gitee.com/towardly/ph/wikis/Home?sort_id=4035190)
+
+### 包含如下工具文件
+
+`index` 基础工具类、`date` 跟日期相关的工具类、`file` 文件操作相关工具类[**服务端**]、`server` 服务端工具类、`validator` 数据验证、`dom` 浏览器节点操作相关[**前端**]、`web` 一些只适用于前端相关的工具、`color` 颜色相关工具

package/lib/array.d.ts

@@ -59,14 +59,14 @@ export declare function symmetricDifference<T>(...arrs: T[][]): T[];
  * @param a2
  * @returns
  */
-export declare function isSubsetOf<T>(a1: T[] | Set<T>, a2: T[] | Set<T>): boolean;
+export declare function isSubsetOf<T>(a1: T[] | Set<T>, a2: T[] | Set<T>): any;
 /**
  * 返回一个布尔值，指示给定集合中的所有元素是否都在此集合中。
  * @param arr1
  * @param arr2
  * @returns
  */
-export declare function isSupersetOf<T>(arr1: T[] | Set<T>, arr2: T[] | Set<T>): boolean;
+export declare function isSupersetOf<T>(arr1: T[] | Set<T>, arr2: T[] | Set<T>): any;
 /**
  * 返回一个布尔值，指示此集合是否与给定集合没有公共元素。
  *
@@ -76,4 +76,4 @@ export declare function isSupersetOf<T>(arr1: T[] | Set<T>, arr2: T[] | Set<T>):
  * @param arr2
  * @returns
  */
-export declare function isDisjointFrom<T>(arr1: T[] | Set<T>, arr2: T[] | Set<T>): boolean;
+export declare function isDisjointFrom<T>(arr1: T[] | Set<T>, arr2: T[] | Set<T>): any;

package/lib/dom.d.ts

@@ -82,7 +82,7 @@ export declare function toggleClass(el: HTMLElement, clazz: string): void;
  * @param {function}    event     事件处理函数
  * @param {boolean}     onceOrConfig  是否是只运行一次的处理函数或者配置，其中 eventFlag 为 string，如果配置该项，则表明为委托事件
  */
-export declare function on(element: HTMLElement | ShadowRoot | Document, listener: string, fn: EventListener, option?: boolean | (AddEventListenerOptions & {
+export declare function on(element: HTMLElement | ShadowRoot | Document | HTMLCollection | NodeListOf<HTMLElement> | HTMLElement[], listener: string, fn: EventListener, option?: boolean | (AddEventListenerOptions & {
     eventFlag?: string;
 })): void;
 /**
@@ -91,7 +91,7 @@ export declare function on(element: HTMLElement | ShadowRoot | Document, listene
  * @param listener - 事件名称。
  * @param fn - 要移除的事件监听器函数。
  */
-export declare function off(el: HTMLElement | ShadowRoot | Document, listener: string, fn: EventListener, option?: boolean | EventListenerOptions): void;
+export declare function off(el: HTMLElement | ShadowRoot | Document | HTMLCollection | NodeListOf<HTMLElement> | HTMLElement[], listener: string, fn: EventListener, option?: boolean | EventListenerOptions): void;
 /**
  * 判断事件是否应该继续传递。
  * 从事件目标开始向上遍历DOM树，检查每个节点上是否存在指定的属性。
@@ -119,12 +119,8 @@ export declare function html(element: HTMLElement, htmlstr?: string): string | u
  * @returns
  */
 export declare function text(element: HTMLElement, textstr?: string): string | null | undefined;
-/**
- * 节点列表遍历
- * @param elems
- * @param fn 遍历到节点时的回调，回调第一个参数为遍历到的节点，第2个参数为 index；如果回调函数返回 true，则会终止遍历(break)
- */
-export declare function iterate(elems: NodeList | HTMLElement[], fn: (el: HTMLElement, index: number) => any): void;
+export declare function iterate<T>(elems: T[], fn: (el: T, index: number) => any): void;
+export declare function iterate(elems: NodeList | HTMLCollection, fn: (el: HTMLElement, index: number) => any): void;
 /**
  * 设置或获取节点 data-* 属性
  * @param elem

package/lib/dom.js

@@ -128,12 +128,20 @@ export function toggleClass(el, clazz) {
  * @param {boolean}     onceOrConfig  是否是只运行一次的处理函数或者配置，其中 eventFlag 为 string，如果配置该项，则表明为委托事件
  */
 export function on(element, listener, fn, option) {
-    if (typeof option === "object" && option.eventFlag) {
-        if (element.setAttribute) {
+    if (element.length != null) {
+        iterate(element, (elem) => {
+            if (typeof option === "object" && option.eventFlag) {
+                elem.setAttribute(option.eventFlag, "__stop__");
+            }
+            elem.addEventListener(listener, fn, option);
+        });
+    }
+    else if (element) {
+        if (typeof option === "object" && option.eventFlag) {
             element.setAttribute(option.eventFlag, "__stop__");
         }
+        element.addEventListener(listener, fn, option);
     }
-    element.addEventListener(listener, fn, option);
 }
 /**
  * 移除指定元素的事件监听器。
@@ -142,7 +150,14 @@ export function on(element, listener, fn, option) {
  * @param fn - 要移除的事件监听器函数。
  */
 export function off(el, listener, fn, option) {
-    el.removeEventListener(listener, fn, option);
+    if (el.length != null) {
+        iterate(el, (elem) => {
+            elem.removeEventListener(listener, fn, option);
+        });
+    }
+    else if (el) {
+        el.removeEventListener(listener, fn, option);
+    }
 }
 /**
  * 判断事件是否应该继续传递。
@@ -439,6 +454,8 @@ function toggleCssProperty(el, properties, method = "set") {
 export function transition(el, nameOrProperties, dir = "enter", finish) {
     const p = dir === "enter" ? "from" : "to";
     let nameClass = "", activeClass = "";
+    /** 动画状态, -1 - 准备, 0 - 进行中, 1 - 完成 */
+    let status = -1;
     const trans = [];
     if (typeof nameOrProperties === "string") {
         nameClass = `${nameOrProperties}-${dir}-${p}`;
@@ -452,6 +469,7 @@ export function transition(el, nameOrProperties, dir = "enter", finish) {
             }
         }
     }
+    status = 0;
     if (dir === "enter") {
         if (nameClass) {
             el.classList.add(nameClass);
@@ -490,25 +508,26 @@ export function transition(el, nameOrProperties, dir = "enter", finish) {
             });
         }
     }
-    el.addEventListener("transitionend", () => {
-        if (nameClass) {
-            el.classList.remove(activeClass);
-            requestAnimationFrame(() => {
-                el.classList.remove(nameClass);
-            });
-        }
-        else {
-            if (trans) {
-                el.style.removeProperty("transition");
+    el.addEventListener("transitionend", (_e) => {
+        if (status === 0) {
+            status = 1;
+            if (nameClass) {
+                el.classList.remove(activeClass);
+                requestAnimationFrame(() => {
+                    el.classList.remove(nameClass);
+                });
             }
-            requestAnimationFrame(() => {
+            else {
+                if (trans) {
+                    el.style.removeProperty("transition");
+                }
                 requestAnimationFrame(() => {
                     toggleCssProperty(el, nameOrProperties, "remove");
                 });
-            });
-        }
-        if (finish) {
-            finish();
+            }
+            if (finish) {
+                finish();
+            }
         }
     }, { once: true });
 }

package/lib/server.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import type { SpawnOptions } from "node:child_process";
 /**
  * 执行命令

package/lib/theme.js

@@ -19,10 +19,10 @@ export async function initTheme() {
     if ($themeStyle == null) {
         $themeStyle = document.createElement("style");
         $themeStyle.id = "theme-style";
-        $themeStyle.innerHTML = `
-      :root{color-scheme:light dark;}
-      html.light{color-scheme: light;}
-      html.dark {color-scheme: dark;}
+        $themeStyle.innerHTML = `
+      :root{color-scheme:light dark;}
+      html.light{color-scheme: light;}
+      html.dark {color-scheme: dark;}
     `;
         document.head.appendChild($themeStyle);
     }

package/package.json

@@ -68,7 +68,7 @@
     },
     "./*": "./lib/*"
   },
-  "version": "0.15.0",
+  "version": "0.15.3",
   "type": "module",
   "repository": {
     "type": "git",

package/lib/clipboard.d.ts

@@ -1,11 +0,0 @@
-/**
- * 复制数据, 可以从多种类型的数据
- *    1. 直接复制文本: await copy("待复制的文本")
- *    2. 复制节点上的 data-copy-text:
- *      <button data-copy-text="这是待复制的文本">复制</button>
- *      await copy(e.target) // or await copy("#a") or await copy(document.querySelector('#a'))
- *    3. 直接复制节点本身数据: await copy('#a')
- * @param {string | HTMLElement} source 复制源, 从中解析待复制的数据
- * @returns {Promise<boolean>} 是否复制成功
- */
-export declare function copy(source: string | HTMLElement): Promise<boolean>;

package/lib/clipboard.js

@@ -1,101 +0,0 @@
-/**
- * 创建一个临时节点缓存待复制数据
- * @param {String} value - 待复制文本
- * @return {HTMLElement}
- */
-function createFakeElement(value) {
-    const fakeElement = document.createElement("textarea");
-    fakeElement.style.border = "0";
-    fakeElement.style.padding = "0";
-    fakeElement.style.margin = "0";
-    fakeElement.style.position = "absolute";
-    fakeElement.style.left = "-9999px";
-    fakeElement.style.top = "-9999";
-    fakeElement.setAttribute("readonly", "");
-    fakeElement.value = value;
-    return fakeElement;
-}
-/** 通过执行 execCommand 来执行复制 */
-function copyFromCommand(text) {
-    // 添加节点
-    const fakeEl = createFakeElement(text);
-    document.body.append(fakeEl);
-    fakeEl.focus();
-    fakeEl.select();
-    // 执行复制
-    const res = document.execCommand("copy");
-    fakeEl.remove(); // 删除节点
-    return Promise.resolve(res);
-}
-/** 使用 navigator.clipboard 复制 */
-function copyFromClipboard(text) {
-    const theClipboard = navigator.clipboard;
-    if (theClipboard != null) {
-        return theClipboard
-            .writeText(text)
-            .then(() => {
-            Promise.resolve(true);
-        })
-            .catch(() => Promise.resolve(false));
-    }
-    return Promise.resolve(false);
-}
-/** 解析待复制的文本 */
-function parseCopyText(source) {
-    let copyText = null; // 待复制文本
-    let sourceEl = null;
-    // 获取待复制数据
-    if (typeof source === "string") {
-        // 从节点拿数据
-        if (source.startsWith("#") || source.startsWith(".")) {
-            sourceEl = document.querySelector(source);
-            if (sourceEl == null) {
-                copyText = source;
-            }
-        }
-        else {
-            copyText = source;
-        }
-    }
-    if (source instanceof HTMLElement) {
-        sourceEl = source;
-    }
-    // 从节点获取待复制数据
-    if (sourceEl != null) {
-        if (sourceEl.hasAttribute("data-copy-text")) {
-            copyText = sourceEl.getAttribute("data-copy-text");
-        }
-        else {
-            const tagName = sourceEl.tagName;
-            if (tagName === "INPUT" || tagName === "TEXTAREA") {
-                copyText = sourceEl.value;
-            }
-            else {
-                copyText = sourceEl.textContent;
-            }
-        }
-    }
-    return copyText;
-}
-/**
- * 复制数据, 可以从多种类型的数据
- *    1. 直接复制文本: await copy("待复制的文本")
- *    2. 复制节点上的 data-copy-text:
- *      <button data-copy-text="这是待复制的文本">复制</button>
- *      await copy(e.target) // or await copy("#a") or await copy(document.querySelector('#a'))
- *    3. 直接复制节点本身数据: await copy('#a')
- * @param {string | HTMLElement} source 复制源, 从中解析待复制的数据
- * @returns {Promise<boolean>} 是否复制成功
- */
-export async function copy(source) {
-    // 待复制文本
-    const copyText = parseCopyText(source);
-    if (copyText == null) {
-        return Promise.resolve(false);
-    }
-    const v = await copyFromClipboard(copyText);
-    if (v === false) {
-        return copyFromCommand(copyText);
-    }
-    return Promise.resolve(true);
-}