ph-utils 0.20.0 → 1.0.0

package/lib/storage.js

@@ -1,73 +0,0 @@
-function getStorage(storage = "session") {
-    return storage === "session" ? sessionStorage : localStorage;
-}
-/**
- * 存储值到 Storage 中
- * @param key 设置的 key
- * @param value 设置的值
- * @param [option.storage] session 或 local, 默认: session
- * @param [option.expire] 数据有效期, 单位秒, 默认: -1 - 永久存储
- *
- * @example <caption>1. 存储到 SessionStorage</caption>
- * set("key", "value");
- *
- * @example <caption>2. 存储到 LocalStorage</caption>
- * set("key", "value", { storage: "local" });
- */
-export function set(key, value, option) {
-    const opts = {
-        expire: -1,
-        storage: "session",
-        ...option,
-    };
-    const saveData = JSON.stringify({
-        value,
-        time: Date.now(),
-        expire: opts.expire === -1 ? -1 : Math.floor(Date.now() / 1000) + opts.expire,
-    });
-    getStorage(opts.storage).setItem(key, saveData);
-}
-/**
- * 清空所有的缓存内容
- * @param storage 待清空的缓存对象
- */
-export function clear(storage) {
-    getStorage(storage).clear();
-}
-/**
- * 删除存储到 Storage 中的数据
- * @param key
- * @param storage
- */
-export function remove(key, storage) {
-    getStorage(storage).removeItem(key);
-}
-/**
- * 从 Storage 中取出数据
- * @param key 保存时的 key
- * @param defaultValue 没有数据时的默认值
- * @param [option.delete] 是否在取出后，删除数据，默认：false - 取出后删除数据
- * @param [option.storage] 使用的 Storage ，可以是 localStorage、sessionStorage, 默认: localStorage、sessionStorage
- * @returns Storage 中 key 对应的数据
- */
-export function get(key, defaultValue, option) {
-    const opts = (option || { delete: false });
-    const storage = getStorage(opts.storage);
-    let data = storage.getItem(key);
-    if (data == null) {
-        return defaultValue || null;
-    }
-    data = JSON.parse(data);
-    let d = data.value;
-    if (data.expire !== -1) {
-        // 数据过期
-        if (Math.floor(Date.now() / 1000) > data.expire) {
-            d = null;
-            storage.removeItem(key);
-        }
-    }
-    if (opts.delete) {
-        storage.removeItem(key);
-    }
-    return d || defaultValue;
-}

package/lib/theme.d.ts

@@ -1,44 +0,0 @@
-/** 获取当前系统的主题 */
-export declare function getSystemTheme(): "light" | "dark" | "auto";
-/**
- * 初始化主题, 让网页能够适应系统主题, 同时根据缓存的主题切换主题
- * @returns 当前应用的主题
- */
-export declare function initTheme(): Promise<"light" | "dark" | "auto">;
-/**
- * 切换主题, 通常用于预览
- * @param theme 切换的主题
- * @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
- * @returns 切换后的主题
- */
-export declare function toggleTheme(theme?: "light" | "dark" | "auto", transition?: boolean): Promise<"light" | "dark" | "auto">;
-/** 获取当前主题 */
-export declare function getTheme(): string;
-/**
- * 应用主题
- * @param theme 待应用的主题
- * @param cache 是否缓存应用的主题, 让应用下一次启动的时候, 可以应用主题, 默认: true
- * @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
- * @returns 应用的主题
- */
-export declare function applyTheme(theme?: "light" | "dark" | "auto", cache?: boolean, transition?: boolean): Promise<"light" | "dark" | "auto">;
-/** 获取当前主题色 */
-export declare function getColorTheme(defaultValue?: string): string | undefined;
-/**
- * 初始化主题色, 让网页能够适应系统主题色, 同时根据缓存的主题色切换主题色
- * @returns 当前应用的主题色
- */
-export declare function initColorTheme(): Promise<string> | null;
-/**
- * 切换主题色, 通常用于预览
- * @param color 待切换的主题色
- * @returns 切换后的主题色
- */
-export declare function toggleColorTheme(color: string): Promise<string>;
-/**
- * 应用主题色
- * @param color 主题色
- * @param cache 是否缓存主题色, 让应用下一次启动的时候, 可以应用主题色, 默认: true
- * @returns 切换后的主题色
- */
-export declare function applyColorTheme(color: string, cache?: boolean): Promise<string>;

package/lib/theme.js

@@ -1,156 +0,0 @@
-import { adjust } from "./color.js";
-/** 获取当前系统的主题 */
-export function getSystemTheme() {
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        return "dark";
-    }
-    else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
-        return "light";
-    }
-    return "auto";
-}
-/**
- * 初始化主题, 让网页能够适应系统主题, 同时根据缓存的主题切换主题
- * @returns 当前应用的主题
- */
-export async function initTheme() {
-    // 让网页能够适应系统主题
-    let $themeStyle = document.getElementById("theme-style");
-    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;}";
-        document.head.appendChild($themeStyle);
-    }
-    // 获取已经应用的主题设置
-    const cacheTheme = localStorage.getItem("web-theme-appearance");
-    return toggleTheme(cacheTheme);
-}
-/**
- * 切换主题, 通常用于预览
- * @param theme 切换的主题
- * @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
- * @returns 切换后的主题
- */
-export async function toggleTheme(theme, transition = true) {
-    return new Promise((resolve) => {
-        const classList = document.documentElement.classList;
-        if (theme == null) {
-            theme = getSystemTheme();
-        }
-        function updateThemeClass() {
-            if (theme === "light") {
-                classList.add("light");
-                classList.remove("dark");
-            }
-            else if (theme === "dark") {
-                classList.add("dark");
-                classList.remove("light");
-            }
-            else {
-                classList.remove("light", "dark");
-            }
-        }
-        // @ts-ignore
-        if (transition && document.startViewTransition) {
-            // @ts-ignore
-            document.startViewTransition(() => {
-                updateThemeClass();
-                resolve(theme);
-            });
-        }
-        else {
-            updateThemeClass();
-            resolve(theme);
-        }
-    });
-}
-/** 获取当前主题 */
-export function getTheme() {
-    // 1. 从根节点获取
-    let theme = document.documentElement.className.match(/light|dark/);
-    if (theme != null) {
-        theme = theme[0];
-    }
-    if (theme == null) {
-        theme = localStorage.getItem("web-theme-appearance");
-    }
-    if (theme == null) {
-        theme = getSystemTheme();
-    }
-    return theme;
-}
-/**
- * 应用主题
- * @param theme 待应用的主题
- * @param cache 是否缓存应用的主题, 让应用下一次启动的时候, 可以应用主题, 默认: true
- * @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
- * @returns 应用的主题
- */
-export async function applyTheme(theme, cache = true, transition = true) {
-    if (cache === true) {
-        localStorage.setItem("web-theme-appearance", theme == null ? "auto" : theme);
-    }
-    return toggleTheme(theme, transition);
-}
-/** 获取当前主题色 */
-export function getColorTheme(defaultValue) {
-    const root = document.documentElement;
-    const match = root.className.match(/color-([0-9a-fA-F]{6})/);
-    if (match == null) {
-        // 获取 --nt-primary-color 的值
-        let color = getComputedStyle(root).getPropertyValue("--l-primary-color");
-        if (color === "") {
-            color = localStorage.getItem("web-theme-color");
-        }
-        return color ? color : defaultValue;
-    }
-    return `#${match[1]}`;
-}
-/**
- * 初始化主题色, 让网页能够适应系统主题色, 同时根据缓存的主题色切换主题色
- * @returns 当前应用的主题色
- */
-export function initColorTheme() {
-    // 获取缓存主题色
-    const color = localStorage.getItem("web-theme-color");
-    if (color != null) {
-        return toggleColorTheme(color);
-    }
-    return color;
-}
-/**
- * 切换主题色, 通常用于预览
- * @param color 待切换的主题色
- * @returns 切换后的主题色
- */
-export async function toggleColorTheme(color) {
-    const vars = [
-        `--l-primary-color: ${color};`,
-        `--l-primary-color-dark1: ${adjust(color, 1, false)};`,
-    ];
-    for (let i = 1; i <= 5; i++) {
-        vars.push(`--l-primary-color-light${i}: ${adjust(color, i)};`);
-    }
-    let $style = document.getElementById("color-theme-style");
-    if ($style == null) {
-        $style = document.createElement("style");
-        $style.id = "color-theme-style";
-        document.head.appendChild($style);
-    }
-    $style.innerHTML = `:root{${vars.join("")}}`;
-    return color;
-}
-/**
- * 应用主题色
- * @param color 主题色
- * @param cache 是否缓存主题色, 让应用下一次启动的时候, 可以应用主题色, 默认: true
- * @returns 切换后的主题色
- */
-export function applyColorTheme(color, cache = true) {
-    if (cache === true) {
-        localStorage.setItem("web-theme-color", color);
-    }
-    return toggleColorTheme(color);
-}

package/lib/validator.d.ts

@@ -1,71 +0,0 @@
-/**
- * 数据验证器
- */
-interface RuleItem {
-    rule: RegExp | ((v: any) => boolean) | "required";
-    message: string;
-    sameKey?: string;
-}
-export type RuleType = string | RegExp | ((v: any) => boolean) | (RegExp | string | ((v: any) => boolean) | {
-    rule: string | RegExp | ((v: any) => boolean);
-    message?: string;
-});
-export interface SchemaType {
-    /** 数据字段 */
-    key: string;
-    /** 是否必须 */
-    required?: boolean;
-    /** 验证规则列表 */
-    rules?: RuleType[];
-    /** 错误信息 */
-    message?: string;
-}
-/**
- * 数据验证器
- */
-declare class Validator {
-    rules: Record<string, RuleItem[]>;
-    /**
-     * 构造数据验证转换器
-     *
-     * See {@link https://gitee.com/towardly/ph/wikis/utils/validator|Validator文档}.
-     *
-     * @param schemas 配置验证转换规则
-     *
-     * @example
-     *
-     * const validator = new Validator([
-     *  { key: 'mobile', rules: ['required', 'mobile'] },
-     *  { key: 'code': rules: /^\d{6}$/, message: '请输入正确的验证码' },
-     *  { key: 'confirmPassword', rules: ['required', 'same:password'] }
-     * ])
-     * // 验证某一个字段
-     * validator.validateKey().then(res => {})
-     */
-    constructor(schemas: SchemaType[]);
-    addSchemas(schemas: SchemaType[]): void;
-    addSchema(schema: SchemaType): void;
-    setSchema(schema: SchemaType): void;
-    setSchemas(schemas: SchemaType[]): void;
-    /**
-     * 进行数据验证
-     * @param data 待验证的数据
-     * @param all 是否全部验证, false - 只要验证错误一个则停止验证
-     * @returns
-     */
-    validate(data: any, all?: boolean): Promise<boolean>;
-    /**
-     * 只验证指定 key 的数据格式
-     * @param key   指定待验证的 key
-     * @param value 待验证的数据
-     * @param data 原始数据，当验证确认密码时需要使用
-     */
-    validateKey(key: string, value: any, data?: any): Promise<{
-        key: string;
-        value: any;
-    }>;
-    private _validateRule;
-    private _parseSchemaRules;
-    private _parseStringRule;
-}
-export default Validator;

package/lib/validator.js

@@ -1,248 +0,0 @@
-/**
- * 数据验证器
- */
-// 默认的错误提示信息
-const defaultMsgs = {
-    mobile: "请输入正确的手机号",
-    same: "两次输入不一致",
-    required: "%s为必填字段",
-};
-const defaultMsg = "请输入正确的数据";
-// 一些常用的验证正则
-const ruleRegexs = {
-    /** 验证跟其余数据相等的正则，一般用于验证再次输入密码 */
-    same: /^same:(.+)$/i,
-    /** 验证手机号的正则表达式 */
-    mobile: /^1[3456789]\d{9}$/,
-    /** 非空验证的正则表达式 */
-    required: /^\S{1}.*/,
-};
-// 规则比对函数
-const ruleFns = {
-    /** 验证相等 */
-    same(val1, val2) {
-        return val2 === val1;
-    },
-    /** 正则匹配 */
-    pattern(regex, val) {
-        if (val == null) {
-            return false;
-        }
-        return regex.test(String(val));
-    },
-};
-class ValidateError extends Error {
-    constructor(detail, key, message) {
-        super(message);
-        this.name = "ValidateError";
-        this.key = key;
-        this.detail = detail;
-    }
-}
-/**
- * 数据验证器
- */
-class Validator {
-    /**
-     * 构造数据验证转换器
-     *
-     * See {@link https://gitee.com/towardly/ph/wikis/utils/validator|Validator文档}.
-     *
-     * @param schemas 配置验证转换规则
-     *
-     * @example
-     *
-     * const validator = new Validator([
-     *  { key: 'mobile', rules: ['required', 'mobile'] },
-     *  { key: 'code': rules: /^\d{6}$/, message: '请输入正确的验证码' },
-     *  { key: 'confirmPassword', rules: ['required', 'same:password'] }
-     * ])
-     * // 验证某一个字段
-     * validator.validateKey().then(res => {})
-     */
-    constructor(schemas) {
-        this.setSchemas(schemas);
-    }
-    addSchemas(schemas) {
-        for (let schema of schemas) {
-            this.addSchema(schema);
-        }
-    }
-    addSchema(schema) {
-        if (schema.key in this.rules) {
-            this.rules[schema.key] = [...this.rules[schema.key], ...this._parseSchemaRules(schema)];
-        }
-        else {
-            this.rules[schema.key] = this._parseSchemaRules(schema);
-        }
-    }
-    setSchema(schema) {
-        this.rules[schema.key] = this._parseSchemaRules(schema);
-    }
-    setSchemas(schemas) {
-        this.rules = {};
-        this.addSchemas(schemas);
-    }
-    /**
-     * 进行数据验证
-     * @param data 待验证的数据
-     * @param all 是否全部验证, false - 只要验证错误一个则停止验证
-     * @returns
-     */
-    async validate(data, all = false) {
-        return new Promise((resolve, reject) => {
-            const detail = {};
-            let currentKey = undefined;
-            let currentMessage = undefined;
-            for (let key in this.rules) {
-                let errMsg = this._validateRule(this.rules[key], data[key], data);
-                if (errMsg !== "") {
-                    errMsg = errMsg.replace("%s", key);
-                    detail[key] = errMsg;
-                    currentKey = key;
-                    currentMessage = errMsg;
-                    if (all)
-                        break;
-                }
-            }
-            if (currentKey == null) {
-                resolve(true);
-            }
-            else {
-                reject(new ValidateError(detail, currentKey, currentMessage));
-            }
-        });
-    }
-    /**
-     * 只验证指定 key 的数据格式
-     * @param key   指定待验证的 key
-     * @param value 待验证的数据
-     * @param data 原始数据，当验证确认密码时需要使用
-     */
-    async validateKey(key, value, data) {
-        return new Promise((resolve, reject) => {
-            let keyRules = this.rules[key];
-            if (keyRules == null) {
-                resolve({ key, value });
-                return;
-            }
-            let errMsg = this._validateRule(keyRules, value, data);
-            if (errMsg !== "") {
-                errMsg = errMsg.replace("%s", key);
-                reject(new ValidateError({ [key]: errMsg }, key, errMsg));
-            }
-            else {
-                resolve({ key, value });
-            }
-        });
-    }
-    _validateRule(rules, value, data) {
-        let errMsg = "";
-        for (let rule of rules) {
-            if (!rule)
-                continue;
-            // 如果数据为空，则判断是否是必填
-            if (rule.rule === "required") {
-                if (value == null || !ruleFns.pattern(ruleRegexs.required, value)) {
-                    errMsg = rule.message;
-                }
-            }
-            else if (typeof rule.rule === "function") {
-                if (!rule.rule(value)) {
-                    errMsg = rule.message;
-                }
-            }
-            else if (rule.sameKey != null) {
-                if (data != null) {
-                    if (!ruleFns.same(value, data[rule.sameKey])) {
-                        errMsg = rule.message;
-                    }
-                }
-            }
-            else {
-                if (rule && !ruleFns.pattern(rule.rule, value)) {
-                    errMsg = rule.message;
-                }
-            }
-            if (errMsg !== "") {
-                break;
-            }
-        }
-        return errMsg;
-    }
-    _parseSchemaRules(schema) {
-        // 解析规则
-        let rules = [];
-        let rule = schema.rules;
-        if (schema.required === true) {
-            rules.push(...this._parseStringRule("required", schema.message));
-        }
-        if (rule != null) {
-            if (typeof rule === "string") {
-                rules.push(...this._parseStringRule(rule, schema.message));
-            }
-            else if (rule instanceof Array) {
-                for (let ruleItem of rule) {
-                    if (typeof ruleItem === "string") {
-                        rules.push(...this._parseStringRule(ruleItem, schema.message));
-                    }
-                    else if (ruleItem instanceof RegExp || typeof ruleItem === "function") {
-                        rules.push({
-                            rule: ruleItem,
-                            message: schema.message || defaultMsg,
-                        });
-                    }
-                    else {
-                        const emessage = ruleItem.message || schema.message || defaultMsg;
-                        if (typeof ruleItem.rule === "string") {
-                            rules.push(...this._parseStringRule(ruleItem.rule, emessage));
-                        }
-                        else {
-                            rules.push({
-                                rule: ruleItem.rule,
-                                message: emessage,
-                            });
-                        }
-                    }
-                }
-            }
-            else {
-                rules.push({ rule, message: defaultMsg });
-            }
-        }
-        return rules;
-    }
-    _parseStringRule(rule, ruleErrMsg) {
-        let rules = [];
-        let trule = rule.split("|");
-        for (let r of trule) {
-            let message = ruleErrMsg;
-            let rrule = null;
-            let sameKey;
-            if (rule === "required") {
-                rrule = "required";
-                message = message || ruleErrMsg || defaultMsgs.required;
-            }
-            else if (ruleRegexs.same.test(r)) {
-                let m = r.match(ruleRegexs.same);
-                if (m != null) {
-                    rrule = ruleRegexs.same;
-                    let m = r.match(ruleRegexs.same);
-                    if (m != null) {
-                        sameKey = m[1];
-                    }
-                    message = message || defaultMsgs["same"];
-                }
-            }
-            else if (Object.hasOwn(ruleRegexs, r)) {
-                rrule = ruleRegexs[r];
-                message = message || defaultMsgs[r];
-            }
-            if (rrule) {
-                rules.push({ rule: rrule, message: message, sameKey });
-            }
-        }
-        return rules;
-    }
-}
-export default Validator;

package/lib/web.d.ts

@@ -1,30 +0,0 @@
-/**
- * 解析 Form 表单中的 input 元素的数据为 JSON 格式，key: input-name；value: input-value
- * @param form {object} Form 节点对象
- */
-export declare const formJson: <T>(form: HTMLFormElement) => T;
-/**
- * 获取 url query 参数 (get 请求的参数)
- * @param search 如果是 React 应用就需要传递 useLocation().search
- * @returns
- */
-export declare function query(search?: string): {
-    [index: string]: string;
-};
-/**
- * 函数节流 - 每隔单位时间，只执行一次
- * @param cb    待节流的函数
- * @param wait  间隔时间
- * @returns
- */
-export declare function throttle<R extends any[], T>(fn: (...args: R) => T, wait?: number): (...args: R) => void;
-/**
- * 函数防抖 - 当重复触发某一个行为（事件时），只执行最后一次触发
- * @param fn        防抖函数
- * @param interval  间隔时间段
- * @returns
- */
-export declare function debounce<R extends any[], T>(fn: (...args: R) => T, interval?: number): {
-    (...args: R): void;
-    cancel(): void;
-};