@whitesev/pops 4.1.0 → 4.2.0

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

@@ -17,6 +17,7 @@ declare class Pops {
     config: {
         /** 版本号 */
         version: string;
+        /** 样式配置 */
         cssText: {
             index: string;
             ninePalaceGridPosition: string;
@@ -84,10 +85,9 @@ declare class Pops {
             panel: import("./types/inst").PopsInstGeneralConfig[];
             rightClickMenu: import("./types/inst").PopsInstGeneralConfig[];
         };
-        /** 禁止滚动 */
-        forbiddenScroll: {
-            event(event: Event): false;
-        };
+    };
+    /** 导出的函数 */
+    fn: {
         /** pops使用的工具类 */
         Utils: {
             sleep(timeout: number): Promise<unknown>;
@@ -134,7 +134,6 @@ declare class Pops {
         DOMUtils: {
             getAnimationEndNameList(): string[];
             getTransitionEndNameList(): string[];
-            isHide($el: Element): boolean;
             offset(element: HTMLElement, calcScroll?: boolean): DOMRect;
             width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
@@ -230,7 +229,10 @@ declare class Pops {
                 animElement: HTMLElement | null;
                 isOverMaxZIndex: boolean;
             };
-            sortElementListByProperty<T, R>(getBeforeValueFun: (value: T) => R, getAfterValueFun: (value: T) => R, sortByDesc?: boolean): (after_obj: T, before_obj: T /** 配置 */) => 1 | 0 | -1;
+            sortElementListByProperty<T, R>(getBeforeValueFun: (value: T) => R, getAfterValueFun: (value: T) => R, sortByDesc?: boolean): (after_obj: T, before_obj: T) => 1 | 0 | -1;
+            isHide($el: Element): boolean;
+            isNodeInPopsNode($el: Element): boolean;
+            isAnimNode($el: Element): boolean;
         };
         /** pops处理float类型使用的工具类 */
         MathFloatUtils: {
@@ -240,7 +242,7 @@ declare class Pops {
             division(number1: number, number2: number): number;
         };
         /** 实例处理函数 */
-        PopsInstHandler: {
+        InstHandler: {
             removeInstance(totalInstConfigList: import("./types/inst").PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<import("./types/inst").PopsInstGeneralConfig[][]>;
             show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
             hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
@@ -710,7 +712,7 @@ declare class Pops {
             onAsideItemClick($asideItem: HTMLElement, asideConfig: import("./components/panel/types").PopsPanelContentConfig): void;
         };
         /** pops.panel中的动画 */
-        PopsAnimation: {
+        Animation: {
             $data: {
                 [key: string]: CSSKeyframesRule;
             };
@@ -732,7 +734,7 @@ declare class Pops {
         /** 事件类 */
         EventEmiter: typeof EventEmiter;
         /** 通用的CSS类名 */
-        PopsCommonCSSClassName: {
+        CommonCSSClassName: {
             flexCenter: string;
             flexYCenter: string;
             flexXCenter: string;
@@ -747,7 +749,6 @@ declare class Pops {
             textIsDisabledImportant: string;
         };
     };
-    init(): void;
     /**
      * 释放原有的pops控制权
      * @example

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

@@ -16,28 +16,28 @@ export interface PopsMaskConfig {
    */
   enable?: boolean;
   /**
-   * 点击事件
+   * 点击事件配置
    */
   clickEvent?: {
     /**
-     * 点击遮罩层是否触发关闭事件
+     * （可选）点击遮罩层是否触发关闭事件，默认false
      * @default false
      */
     toClose?: boolean;
     /**
-     * 点击遮罩层是否触发隐藏事件
+     * （可选）点击遮罩层是否触发隐藏事件，默认false
      * @default false
      */
     toHide?: boolean;
   };
   /**
    * 遮罩层自定义的点击事件
-   * @param originalRun 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗
-   * @param config 配置信息
    */
   clickCallBack?:
     | ((
-        originalRun: () => void | Promise<void>,
+        /** 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗 */
+        continueExec: () => void | Promise<void>,
+        /** 配置信息 */
         config:
           | PopsAlertConfig
           | PopsDrawerConfig

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -453,18 +453,6 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
     getAnimationEndNameList(): string[];
     /** 获取 transitionend 在各个浏览器的兼容名 */
     getTransitionEndNameList(): string[];
-    /**
-     * 是否是隐藏状态
-     *
-     * 检测以下项：
-     *
-     * + `display`: none
-     * + `visibility`: hidden
-     * + `opacity`: 0
-     * + `使用了pops的自定义的隐藏class类`
-     * @param $el 需要检测的元素
-     */
-    isHide($el: Element): boolean;
     /**
      * 实现jQuery中的$().offset();
      * @param element

package/dist/types/src/utils/PopsInstanceUtils.d.ts

@@ -15,4 +15,26 @@ export declare const PopsInstanceUtils: {
      * @param sortByDesc 排序是否降序，默认降序
      */
     sortElementListByProperty<T, R>(getBeforeValueFun: (value: T) => R, getAfterValueFun: (value: T) => R, sortByDesc?: boolean): (after_obj: T, before_obj: T) => 1 | 0 | -1;
+    /**
+     * 是否是隐藏状态
+     *
+     * 检测以下项：
+     *
+     * + `display`: none
+     * + `visibility`: hidden
+     * + `opacity`: 0
+     * + `使用了pops的自定义的隐藏class类`
+     * @param $el 需要检测的元素
+     */
+    isHide($el: Element): boolean;
+    /**
+     * 判断元素是否是在`.pops`内
+     * @param $el 目标元素
+     */
+    isNodeInPopsNode($el: Element): boolean;
+    /**
+     * 判断是否是`.pops-anim`元素
+     * @param $el 目标元素
+     */
+    isAnimNode($el: Element): boolean;
 };

package/dist/types/src/utils/PopsUtils.d.ts

@@ -1,5 +1,5 @@
-import AnyTouch from "any-touch";
 import doubletap from "@any-touch/doubletap";
+import AnyTouch from "any-touch";
 declare class PopsUtils {
     /**
      * 超时时间

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",

package/src/Pops.ts

@@ -41,6 +41,7 @@ class Pops {
   config = {
     /** 版本号 */
     version: version,
+    /** 样式配置 */
     cssText: PopsCSS,
     /** icon图标的svg代码 */
     iconSVG: PopsIcon.$data,
@@ -48,12 +49,9 @@ class Pops {
     animation: PopsAnimation.$data,
     /** 存储已创建的元素 */
     instData: PopsInstData,
-    /** 禁止滚动 */
-    forbiddenScroll: {
-      event(event: Event) {
-        return popsDOMUtils.preventEvent(event);
-      },
-    },
+  };
+  /** 导出的函数 */
+  fn = {
     /** pops使用的工具类 */
     Utils: popsUtils,
     /** pops使用的DOM工具类 */
@@ -63,17 +61,16 @@ class Pops {
     /** pops处理float类型使用的工具类 */
     MathFloatUtils: PopsMathFloatUtils,
     /** 实例处理函数 */
-    PopsInstHandler,
+    InstHandler: PopsInstHandler,
     /** pops.panel中用于处理各个类型的工具 */
-    PanelHandlerComponents,
+    PanelHandlerComponents: PanelHandlerComponents,
     /** pops.panel中的动画 */
-    PopsAnimation,
+    Animation: PopsAnimation,
     /** 事件类 */
-    EventEmiter,
+    EventEmiter: EventEmiter,
     /** 通用的CSS类名 */
-    PopsCommonCSSClassName,
+    CommonCSSClassName: PopsCommonCSSClassName,
   };
-  init() {}
   /**
    * 释放原有的pops控制权
    * @example

package/src/components/panel/handlerComponents.ts

@@ -1963,12 +1963,12 @@ export const PanelHandlerComponents = () => {
                   },
                   mask: {
                     enable: true,
-                    clickCallBack(originalRun) {
+                    clickCallBack(continueExec) {
                       const ret = dialogCloseCallback();
                       if (typeof ret === "boolean" && !ret) {
                         return;
                       }
-                      originalRun();
+                      continueExec();
                     },
                     clickEvent: {
                       toClose: true,
@@ -3171,8 +3171,8 @@ export const PanelHandlerComponents = () => {
                 },
                 mask: {
                   enable: true,
-                  clickCallBack(originalRun) {
-                    originalRun();
+                  clickCallBack(continueExec) {
+                    continueExec();
                     dialogCloseCallback();
                   },
                   clickEvent: {

package/src/handler/PopsHandler.ts

@@ -16,6 +16,7 @@ import type { CustomEventMap } from "../types/EventEmitter";
 import type { PopsInstGeneralConfig } from "../types/inst";
 import type { PopsInstStoreType, PopsSupportAnimConfigType, PopsSupportOnlyConfig, PopsType } from "../types/main";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
 import { popsUtils } from "../utils/PopsUtils";
 import { PopsInstHandler } from "./PopsInstHandler";
 
@@ -154,11 +155,11 @@ export const PopsHandler = {
      * 点击其它区域的事件
      * @param event
      */
-    function clickEvent(event: MouseEvent | PointerEvent) {
+    const clickEvent = (event: MouseEvent | PointerEvent) => {
       popsDOMUtils.preventEvent(event);
       // 获取该类型实例存储列表
       const targetInst = PopsInstData[config.type];
-      function originalRun() {
+      const continueExec = () => {
         if (config.config.mask!.clickEvent!.toClose) {
           // 关闭
           return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
@@ -173,38 +174,25 @@ export const PopsHandler = {
             result.maskElement
           );
         }
-      }
+      };
       if (typeof config.config.mask.clickCallBack === "function") {
-        config.config.mask.clickCallBack(originalRun, config.config);
+        config.config.mask.clickCallBack(continueExec, config.config);
       } else {
-        originalRun();
+        continueExec();
       }
       return false;
-    }
+    };
     // 判断是否启用了遮罩层点击动作
     if (config.config.mask.clickEvent!.toClose || config.config.mask.clickEvent!.toHide) {
-      /**
-       * 判断点击的元素是否是动画层的元素
-       * @param element
-       * @returns
-       */
-      function isAnimElement(element: HTMLElement) {
-        return Boolean(
-          element?.localName?.toLowerCase() === "div" &&
-          element.className &&
-          element.className === "pops-anim" &&
-          element.hasAttribute("anim")
-        );
-      }
       // 判断按下的元素是否是pops-anim
       popsDOMUtils.on(config.animElement, "pointerup", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
-        isMaskClick = isAnimElement($click);
+        isMaskClick = PopsInstanceUtils.isAnimNode($click);
       });
       // 如果有动画层，在动画层上监听点击事件
       popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
-        if (isMaskClick && isAnimElement($click)) {
+        if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
           return clickEvent(event);
         }
       });

package/src/handler/PopsInstHandler.ts

@@ -14,6 +14,7 @@ import { PopsInstData } from "../PopsInst";
 import type { PopsInstGeneralConfig } from "../types/inst";
 import type { PopsInstStoreType } from "../types/main";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
 import { popsUtils } from "../utils/PopsUtils";
 
 export const PopsInstHandler = {
@@ -117,7 +118,7 @@ export const PopsInstHandler = {
         // 先设置好动画状态
         // 再显示，会自执行动画
         const checkVisible = () => {
-          if (!popsDOMUtils.isHide($anim)) {
+          if (!PopsInstanceUtils.isHide($anim)) {
             return true;
           } else {
             return false;
@@ -221,7 +222,7 @@ export const PopsInstHandler = {
         // 再隐藏
         // 存在实例
         const checkVisible = () => {
-          if (!popsDOMUtils.isHide($anim)) {
+          if (!PopsInstanceUtils.isHide($anim)) {
             return true;
           } else {
             return false;

package/src/types/mask.d.ts

@@ -16,28 +16,28 @@ export interface PopsMaskConfig {
    */
   enable?: boolean;
   /**
-   * 点击事件
+   * 点击事件配置
    */
   clickEvent?: {
     /**
-     * 点击遮罩层是否触发关闭事件
+     * （可选）点击遮罩层是否触发关闭事件，默认false
      * @default false
      */
     toClose?: boolean;
     /**
-     * 点击遮罩层是否触发隐藏事件
+     * （可选）点击遮罩层是否触发隐藏事件，默认false
      * @default false
      */
     toHide?: boolean;
   };
   /**
    * 遮罩层自定义的点击事件
-   * @param originalRun 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗
-   * @param config 配置信息
    */
   clickCallBack?:
     | ((
-        originalRun: () => void | Promise<void>,
+        /** 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗 */
+        continueExec: () => void | Promise<void>,
+        /** 配置信息 */
         config:
           | PopsAlertConfig
           | PopsDrawerConfig

package/src/utils/PopsDOMUtils.ts

@@ -11,11 +11,14 @@ import type {
   PopsDOMUtilsCSSPropertyType,
   PopsDOMUtilsTargetElementType,
 } from "../types/PopsDOMUtilsEventType";
-import { SymbolEvents } from "./PopsDOMUtilsEventsConfig";
 import { OriginPrototype, PopsCore } from "../PopsCore";
 import { popsUtils } from "./PopsUtils";
 import { PopsSafeUtils } from "./PopsSafeUtils";
 import { PopsCommonCSSClassName } from "../config/CommonCSSClassName";
+/**
+ * 存储在元素属性上的事件名
+ */
+const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
 
 class PopsDOMUtilsEvent {
   /**
@@ -1417,36 +1420,6 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
   getTransitionEndNameList() {
     return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
   }
-  /**
-   * 是否是隐藏状态
-   *
-   * 检测以下项：
-   *
-   * + `display`: none
-   * + `visibility`: hidden
-   * + `opacity`: 0
-   * + `使用了pops的自定义的隐藏class类`
-   * @param $el 需要检测的元素
-   */
-  isHide($el: Element) {
-    let flag = false;
-    if (
-      this.containsClassName($el, PopsCommonCSSClassName.hide) ||
-      this.containsClassName($el, PopsCommonCSSClassName.hideImportant)
-    ) {
-      flag = true;
-    } else {
-      if ($el instanceof HTMLElement) {
-        const style = $el.style;
-        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
-      }
-      if (!flag) {
-        const style = globalThis.getComputedStyle($el);
-        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
-      }
-    }
-    return flag;
-  }
   /**
    * 实现jQuery中的$().offset();
    * @param element

package/src/utils/PopsInstanceUtils.ts

@@ -1,3 +1,4 @@
+import { PopsCommonCSSClassName } from "../config/CommonCSSClassName";
 import { PopsInstData } from "../PopsInst";
 import type { PopsInstStoreType } from "../types/main";
 import { popsUtils } from "./PopsUtils";
@@ -82,4 +83,53 @@ export const PopsInstanceUtils = {
       }
     };
   },
+  /**
+   * 是否是隐藏状态
+   *
+   * 检测以下项：
+   *
+   * + `display`: none
+   * + `visibility`: hidden
+   * + `opacity`: 0
+   * + `使用了pops的自定义的隐藏class类`
+   * @param $el 需要检测的元素
+   */
+  isHide($el: Element) {
+    let flag = false;
+    if (
+      $el?.classList?.contains(PopsCommonCSSClassName.hide) ||
+      $el?.classList?.contains(PopsCommonCSSClassName.hideImportant)
+    ) {
+      flag = true;
+    } else {
+      if ($el instanceof HTMLElement) {
+        const style = $el.style;
+        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+      }
+      if (!flag) {
+        const style = globalThis.getComputedStyle($el);
+        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+      }
+    }
+    return flag;
+  },
+  /**
+   * 判断元素是否是在`.pops`内
+   * @param $el 目标元素
+   */
+  isNodeInPopsNode($el: Element) {
+    return !!($el.closest(".pops") || $el.matches(".pops"));
+  },
+  /**
+   * 判断是否是`.pops-anim`元素
+   * @param $el 目标元素
+   */
+  isAnimNode($el: Element) {
+    return !!(
+      $el?.localName?.toLowerCase() === "div" &&
+      $el.className &&
+      $el.className === "pops-anim" &&
+      $el.hasAttribute("anim")
+    );
+  },
 };

package/src/utils/PopsUtils.ts

@@ -1,8 +1,8 @@
-import AnyTouch from "any-touch";
 import doubletap from "@any-touch/doubletap";
+import AnyTouch from "any-touch";
+import { EventEmiter } from "../event/EventEmiter";
 import { PopsCore } from "../PopsCore";
 import type { PopsUtilsOwnObject } from "../types/main";
-import { EventEmiter } from "../event/EventEmiter";
 
 class PopsUtils {
   /**

package/dist/types/src/utils/PopsDOMUtilsEventsConfig.d.ts

@@ -1,4 +0,0 @@
-/**
- * 存储在元素属性上的事件名
- */
-export declare const SymbolEvents: unique symbol;

package/src/utils/PopsDOMUtilsEventsConfig.ts

@@ -1,4 +0,0 @@
-/**
- * 存储在元素属性上的事件名
- */
-export const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));