ph-utils 0.6.2 → 0.8.0

package/lib/dom.d.ts

@@ -90,3 +90,12 @@ export declare function queryHideNodeSize(hideNode: string | HTMLElement, parent
     width: number;
     height: number;
 };
+/**
+ * 判断元素是否在父元素的可视区域内。
+ *
+ * @param el 要检查的元素
+ * @param parent 元素的父元素，默认为document.body
+ * @param direction 检查的方向，默认为"horizontal"
+ * @returns 如果元素在父元素的可视区域内，则返回true；否则返回false。
+ */
+export declare function isVisible(el: HTMLElement, parent?: HTMLElement, direction?: string): boolean;

package/lib/dom.js

@@ -3,13 +3,13 @@
  * 现今不推荐在使用这种方式，现在开发前端的时候，推荐使用一些成熟的框架例如：React、Preact、Vue、Angular、Svelte、Ember、Knockout等
  * 在使用这些框架的时候额外的一些不可避免的 dom 操作时才使用这个工具；如果确实需要使用原生开发推荐使用 jquery 或者想要更精简的话可以使用 https://github.com/finom/bala 封装
  */
-const vendorPrefix = ['', '-webkit', '-moz-'];
+const vendorPrefix = ["", "-webkit", "-moz-"];
 /**
  * 根据选择器获取节点
  * @param {string} selector 选择器
  */
 export function elem(selector, dom) {
-    if (typeof selector === 'string') {
+    if (typeof selector === "string") {
         return (dom || document).querySelectorAll(selector);
     }
     else {
@@ -48,7 +48,7 @@ export function hasClass(elem, clazz) {
  */
 export function transition(element, value) {
     vendorPrefix.forEach((prefix) => {
-        let t = prefix === '' ? 'transition' : prefix + 'Transition';
+        let t = prefix === "" ? "transition" : prefix + "Transition";
         element.style[t] = value;
     });
 }
@@ -59,7 +59,7 @@ export function transition(element, value) {
  */
 export function transform(element, value) {
     vendorPrefix.forEach((prefix) => {
-        let t = prefix === '' ? 'transform' : prefix + 'Transform';
+        let t = prefix === "" ? "transform" : prefix + "Transform";
         element.style[t] = value;
     });
 }
@@ -72,24 +72,24 @@ export function transform(element, value) {
  */
 export function on(element, listener, fn, once = false) {
     let eventExtra = { eventStop: false };
-    if (typeof once === 'boolean') {
+    if (typeof once === "boolean") {
         eventExtra.once = once;
     }
     else {
         eventExtra = once;
     }
     if (eventExtra.eventFlag != null) {
-        element.setAttribute(eventExtra.eventFlag, '__stop__');
+        element.setAttribute(eventExtra.eventFlag, "__stop__");
         element.addEventListener(listener, (e) => {
             let target = e.target;
-            let flag = '';
+            let flag = "";
             do {
-                flag = target.getAttribute(eventExtra.eventFlag) || '';
-                if (flag === '') {
+                flag = target.getAttribute(eventExtra.eventFlag) || "";
+                if (flag === "") {
                     target = target.parentNode;
                 }
-            } while (flag === '');
-            if (flag !== '__stop__' || eventExtra.eventStop) {
+            } while (flag === "");
+            if (flag !== "__stop__" || eventExtra.eventStop) {
                 fn(e, target, flag);
             }
         }, eventExtra);
@@ -150,10 +150,10 @@ export function iterate(elems, fn) {
  */
 export function attr(elem, key, value) {
     if (value != null) {
-        elem.setAttribute('data-' + key, value);
+        elem.setAttribute("data-" + key, value);
     }
     else {
-        return elem.getAttribute('data-' + key);
+        return elem.getAttribute("data-" + key);
     }
 }
 /**
@@ -172,11 +172,11 @@ export function parent(el) {
  */
 export function queryHideNodeSize(hideNode, parent = document.body) {
     // 计算折叠菜单的高度
-    let $tmp = document.createElement('div');
-    $tmp.style.cssText = 'position:fixed;left:-1000px;top:-1000px;opacity:0;';
-    let $tmpInner = document.createElement('div');
-    $tmpInner.style.cssText = 'position:relative;';
-    if (typeof hideNode === 'string') {
+    let $tmp = document.createElement("div");
+    $tmp.style.cssText = "position:fixed;left:-1000px;top:-1000px;opacity:0;";
+    let $tmpInner = document.createElement("div");
+    $tmpInner.style.cssText = "position:relative;";
+    if (typeof hideNode === "string") {
         $tmpInner.innerHTML = hideNode;
     }
     else {
@@ -188,3 +188,28 @@ export function queryHideNodeSize(hideNode, parent = document.body) {
     parent.removeChild($tmp);
     return { width: rect.width, height: rect.height };
 }
+/**
+ * 判断元素是否在父元素的可视区域内。
+ *
+ * @param el 要检查的元素
+ * @param parent 元素的父元素，默认为document.body
+ * @param direction 检查的方向，默认为"horizontal"
+ * @returns 如果元素在父元素的可视区域内，则返回true；否则返回false。
+ */
+export function isVisible(el, parent = document.body, direction = "horizontal") {
+    // 获取父元素的边界信息
+    const containerRect = parent.getBoundingClientRect();
+    // 获取元素的边界信息
+    const elementRect = el.getBoundingClientRect();
+    // 根据检查方向，确定元素的起始和结束位置
+    // 元素的上、下边界
+    let elStart = direction === "horizontal" ? elementRect.left : elementRect.top;
+    let elEnd = direction === "horizontal" ? elementRect.right : elementRect.bottom;
+    // 根据检查方向，确定父元素的起始和结束位置
+    // 容器的可视区域的上、下边界
+    let containerStart = direction === "horizontal" ? containerRect.left : containerRect.top;
+    let containerEnd = direction === "horizontal" ? containerRect.right : containerRect.bottom;
+    // 判断元素是否在父元素的可视区域内
+    // 判断元素是否完全在容器的可视区域内
+    return elStart >= containerStart && elEnd <= containerEnd;
+}

package/lib/file.js

@@ -12,19 +12,20 @@ import fs from "node:fs/promises";
  * @returns 文件内容
  */
 export async function read(filepath, defaultValue) {
-  let content;
-  try {
-    content = await fs.readFile(filepath, "utf8");
-    if (defaultValue != null && typeof defaultValue === "object") {
-      return JSON.parse(content);
+    let content;
+    try {
+        content = await fs.readFile(filepath, "utf8");
+        if (defaultValue != null && typeof defaultValue === "object") {
+            return JSON.parse(content);
+        }
+        return content;
     }
-    return content;
-  } catch (error) {
-    if (defaultValue === undefined) {
-      throw error;
+    catch (error) {
+        if (defaultValue === undefined) {
+            throw error;
+        }
+        return defaultValue;
     }
-    return defaultValue;
-  }
 }
 /**
  * 写入 JSON 格式的数据到文件
@@ -35,12 +36,12 @@ export async function read(filepath, defaultValue) {
  * @property opts.format 是否在写入 json 数据时，将 JSON 数据格式化2个空格写入, 默认为 true
  */
 export async function write(file, data, opts) {
-  let writeData = data.toString();
-  opts = { json: true, format: true, ...opts };
-  if (opts.json === true && typeof data === "object") {
-    writeData = JSON.stringify(data, null, opts.format === true ? 2 : 0);
-  }
-  return await fs.writeFile(path.resolve(file), writeData);
+    let writeData = data.toString();
+    opts = { json: true, format: true, ...opts };
+    if (opts.json === true && typeof data === "object") {
+        writeData = JSON.stringify(data, null, opts.format === true ? 2 : 0);
+    }
+    return await fs.writeFile(path.resolve(file), writeData);
 }
 /**
  * 根据文件的 stat 获取文件的 etag
@@ -48,6 +49,6 @@ export async function write(file, data, opts) {
  * @returns file stat etag
  */
 export async function statTag(filePath) {
-  let stat = await fs.stat(filePath);
-  return `${stat.size.toString(16)}-${stat.mtimeMs.toString(16)}`;
+    let stat = await fs.stat(filePath);
+    return `${stat.size.toString(16)}-${stat.mtimeMs.toString(16)}`;
 }

package/lib/logger.d.ts

@@ -0,0 +1,62 @@
+type LoggerLevel = "debug" | "info" | "warn" | "error" | "fatal";
+/** 日志消息类型 */
+type MessageIntf = number | string | boolean | object | any[] | Error;
+/** 日志消息选项 */
+type MessageOption = {
+    /** 日志名称 */
+    name?: string;
+    /** 日志级别 */
+    level?: LoggerLevel;
+    /** 日志消息 */
+    message: MessageIntf;
+    /** 当前消息是否美化输出 */
+    pretty?: boolean;
+    /** 如果消息是 JSON 格式, 转换为字符串时, 是否格式化 JSON */
+    jsonSpace?: number;
+};
+type LoggerOption = {
+    /** 记录的日志名称, 通常用于表明哪个页面 */
+    name?: string;
+    /** 记录日志级别, 通常上线时 error 或者禁用日志, 默认: debug */
+    level?: LoggerLevel;
+    /** 是否需要美化输出, 默认: true */
+    pretty?: boolean;
+};
+/**
+ * 日志记录器
+ */
+export declare class Logger {
+    /** 日志级别 */
+    levels: string[];
+    colors: {
+        debug: string;
+        info: string;
+        warn: string;
+        error: string;
+    };
+    option: LoggerOption & {
+        levelNum: number;
+    };
+    /** 构造日志记录器 */
+    constructor(option?: LoggerOption);
+    setOption(option: LoggerOption): void;
+    log(message: MessageIntf | MessageOption): void;
+    info(message: MessageIntf | MessageOption): void;
+    debug(message: MessageIntf | MessageOption): void;
+    warn(message: MessageIntf | MessageOption): void;
+    error(message: MessageIntf | MessageOption): void;
+    fatal(message: MessageIntf | MessageOption): void;
+    getLevel(): string;
+    getName(): string | undefined;
+    getOption(): LoggerOption & {
+        levelNum: number;
+    };
+    private generateLog;
+    /** 格式化显示 */
+    private formatShow;
+}
+/** 默认日志记录器 */
+export declare const logger: Logger;
+/** 获取新的日志记录器, 属性采用之前的 */
+export declare const getLogger: (option?: LoggerOption) => Logger;
+export {};

package/lib/logger.js

@@ -0,0 +1,123 @@
+import { format } from "./date";
+/**
+ * 日志记录器
+ */
+export class Logger {
+    /** 日志级别 */
+    levels = ["debug", "info", "warn", "error", "fatal"];
+    colors = {
+        debug: "#909399",
+        info: "#1677ff",
+        warn: "#fadb14",
+        error: "#eb2f96",
+    };
+    option;
+    /** 构造日志记录器 */
+    constructor(option) {
+        this.setOption(option || {});
+    }
+    setOption(option) {
+        let opts = { level: "debug", levelNum: 0, pretty: true, ...option };
+        opts.levelNum = this.levels.indexOf(opts.level);
+        this.option = opts;
+    }
+    log(message) {
+        let msgInfo = {
+            name: this.option.name,
+            level: "info",
+            time: format(null, "yyyy-mm-dd HH:MM:ss.S"),
+            pretty: this.option.pretty,
+            jsonSpace: 0,
+        };
+        let msgContent = message;
+        if (typeof message === "object") {
+            if (message instanceof Error) {
+                msgInfo.level = "error";
+                msgContent = msgContent.stack;
+            }
+            else if (message.message != null) {
+                msgContent = message.message;
+                msgInfo = { ...msgInfo, ...message };
+            }
+        }
+        if (typeof msgContent === "object") {
+            try {
+                msgInfo.message = JSON.stringify(msgContent, null, msgInfo.jsonSpace);
+            }
+            catch (error) {
+                msgInfo.message = msgContent.toString();
+            }
+        }
+        else {
+            msgInfo.message = msgContent;
+        }
+        if (msgInfo.pretty == null) {
+            msgInfo.pretty = this.option.pretty;
+        }
+        let levelIndex = this.levels.indexOf(msgInfo.level);
+        if (levelIndex >= this.option.levelNum) {
+            this.formatShow(msgInfo);
+        }
+    }
+    info(message) {
+        this.log(this.generateLog(message, "info"));
+    }
+    debug(message) {
+        this.log(this.generateLog(message, "debug"));
+    }
+    warn(message) {
+        this.log(this.generateLog(message, "warn"));
+    }
+    error(message) {
+        this.log(this.generateLog(message, "error"));
+    }
+    fatal(message) {
+        this.log(this.generateLog(message, "fatal"));
+    }
+    getLevel() {
+        return this.levels[this.option.levelNum];
+    }
+    getName() {
+        return this.option.name;
+    }
+    getOption() {
+        return this.option;
+    }
+    generateLog(message, level = "info") {
+        let msgInfo = {
+            message: message,
+        };
+        if (typeof message === "object") {
+            if (message.message != null) {
+                msgInfo = message;
+            }
+        }
+        msgInfo["level"] = level;
+        return msgInfo;
+    }
+    /** 格式化显示 */
+    formatShow(msg) {
+        if (msg.level === "fatal") {
+            msg.level = "error";
+        }
+        const res = [`[${msg.time}]`];
+        if (msg.name != null) {
+            res.push(`[${msg.name}]`);
+        }
+        res.push(`- ${msg.message}`);
+        if (!msg.pretty) {
+            res.splice(1, 0, `${msg.level.toUpperCase()}`);
+            console[msg.level](res.join(" "));
+        }
+        else {
+            const color = this.colors[msg.level];
+            console.log(`%c ${`${msg.level.toUpperCase()}`} %c ${res.join(" ")} %c`, `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`, `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`, "background:transparent");
+        }
+    }
+}
+/** 默认日志记录器 */
+export const logger = new Logger({ name: "APP" });
+/** 获取新的日志记录器, 属性采用之前的 */
+export const getLogger = (option) => {
+    return new Logger({ ...logger.getOption(), ...option });
+};

package/package.json

@@ -52,7 +52,7 @@
     },
     "./*": "./lib/*"
   },
-  "version": "0.6.2",
+  "version": "0.8.0",
   "type": "module",
   "repository": {
     "type": "git",