@whitesev/pops 4.0.2 → 4.2.0

package/src/event/EventEmiter.ts

@@ -2,8 +2,9 @@ import type { EventMap, CustomEventMap } from "../types/EventEmitter";
 import type { PopsType } from "../types/main";
 
 class EventEmiter<T extends CustomEventMap = CustomEventMap> {
-  #type: PopsType;
-  #data = new Map<
+  [Symbol.toStringTag] = "EventEmiter";
+  type: PopsType;
+  data = new Map<
     string,
     {
       type: PopsType;
@@ -12,7 +13,7 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
     }[]
   >();
   constructor(type: PopsType) {
-    this.#type = type;
+    this.type = type;
     document.addEventListener;
   }
   on<P extends keyof EventMap>(
@@ -30,9 +31,9 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
     emit: (...args: Parameters<T[P]>) => IPromise<void>;
   };
   on<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, callback: (EventMap & CustomEventMap)[P]) {
-    const eventList = this.#data.get(eventName) ?? [];
-    eventList.push({ type: this.#type, time: Date.now(), callback: callback });
-    this.#data.set(eventName, eventList);
+    const eventList = this.data.get(eventName) ?? [];
+    eventList.push({ type: this.type, time: Date.now(), callback: callback });
+    this.data.set(eventName, eventList);
     return {
       off: () => {
         this.off(eventName as keyof EventMap, callback);
@@ -45,7 +46,7 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
   off<P extends keyof EventMap>(eventName: P, callback: EventMap[P]): IPromise<void>;
   off<P extends keyof T>(eventName: P, callback: T[P]): IPromise<void>;
   off<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, callback: (EventMap & CustomEventMap)[P]) {
-    const eventList = this.#data.get(eventName) ?? [];
+    const eventList = this.data.get(eventName) ?? [];
     let isOffSuccess = false;
     for (let index = eventList.length - 1; index >= 0; index--) {
       if (eventList[index].callback === callback) {
@@ -55,18 +56,18 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
     }
     if (eventList.length === 0) {
       // empty
-      this.#data.delete(eventName);
+      this.data.delete(eventName);
     } else {
       if (isOffSuccess) {
         // update
-        this.#data.set(eventName, eventList);
+        this.data.set(eventName, eventList);
       }
     }
   }
   emit<P extends keyof T>(eventName: P, ...args: Parameters<T[P]>): IPromise<void>;
   emit<P extends keyof EventMap>(eventName: P, ...args: Parameters<EventMap[P]>): IPromise<void>;
   async emit<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, ...args: Parameters<T[P]>) {
-    const eventList = this.#data.get(eventName) ?? [];
+    const eventList = this.data.get(eventName) ?? [];
     for (const item of eventList) {
       await item.callback(...args);
     }
@@ -75,9 +76,9 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
   offAll<P extends keyof T>(eventName?: P): IPromise<void>;
   offAll<P extends keyof EventMap | keyof CustomEventMap>(eventName?: P) {
     if (typeof eventName === "string") {
-      this.#data.delete(eventName);
+      this.data.delete(eventName);
     } else {
-      this.#data.clear();
+      this.data.clear();
     }
   }
   /**
@@ -85,9 +86,9 @@ class EventEmiter<T extends CustomEventMap = CustomEventMap> {
    */
   getAllEvents(eventName?: string) {
     if (typeof eventName === "string") {
-      return this.#data.get(eventName);
+      return this.data.get(eventName);
     } else {
-      return Array.from(this.#data.values());
+      return Array.from(this.data.values());
     }
   }
 }

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 = {
@@ -83,7 +84,7 @@ export const PopsInstHandler = {
     return totalInstConfigList;
   },
   /**
-   * 隐藏
+   * 显示
    * @param popsType
    * @param instConfigList
    * @param guid
@@ -91,7 +92,7 @@ export const PopsInstHandler = {
    * @param $anim
    * @param $mask
    */
-  hide(
+  show(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -110,48 +111,54 @@ export const PopsInstHandler = {
     // oxlint-disable-next-line no-async-promise-executor
     return new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
+
       const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
       if (fintInst) {
-        // 存在实例
+        // 由于是隐蔽状态
+        // 先设置好动画状态
+        // 再显示，会自执行动画
+        const checkVisible = () => {
+          if (!PopsInstanceUtils.isHide($anim)) {
+            return true;
+          } else {
+            return false;
+          }
+        };
         const startAnim = async () => {
           if (popsType === "drawer") {
             // drawer是抽屉
             // 单独处理动画
             const drawerConfig = config as Required<PopsDrawerConfig>;
-            await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+            await popsUtils.sleep(drawerConfig.openDelay ?? 0);
             if ($mask) {
-              popsDOMUtils.css($mask, "display", "none");
+              popsDOMUtils.css($mask, "display", "");
             }
             const direction = drawerConfig.direction!;
-            const size = "0";
+            const size = drawerConfig.size!.toString();
             if (["top", "bottom"].includes(direction)) {
               $pops.style.setProperty("height", size);
             } else if (["left", "right"].includes(direction)) {
               $pops.style.setProperty("width", size);
             } else {
-              console.error("未知direction: ", direction);
+              console.error("未知direction：", direction);
             }
           } else {
-            instConfigItem.$anim.style.width = "100%";
-            instConfigItem.$anim.style.height = "100%";
-            Reflect.set(
-              instConfigItem.$anim.style,
-              "animation-name",
-              instConfigItem.$anim.getAttribute("anim") + "-reverse"
-            );
+            instConfigItem.$anim.style.width = "";
+            instConfigItem.$anim.style.height = "";
+            Reflect.set(instConfigItem.$anim.style, "animation-name", animName);
           }
-        };
-        const endCallback = () => {
-          instConfigItem.$anim.style.display = "none";
+          instConfigItem.$anim.style.display = "";
           if (instConfigItem.$mask) {
-            instConfigItem.$mask.style.display = "none";
+            instConfigItem.$mask.style.display = "";
           }
-          fintInst.emitter.emit("pops:hide", instConfigItem);
+        };
+        const endCallback = () => {
+          fintInst.emitter.emit("pops:show", instConfigItem);
         };
         const instConfigItem = fintInst;
-        fintInst.emitter.emit("pops:before-hide", instConfigItem);
-        await startAnim();
-        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+        const animName = instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "");
+        fintInst.emitter.emit("pops:before-show", instConfigItem);
+        if (checkVisible() && PopsAnimation.hasAnim(animName)) {
           /**
            * 动画结束的回调
            */
@@ -166,21 +173,22 @@ export const PopsInstHandler = {
             animationendCallBack,
             {
               capture: true,
-              once: true,
             }
           );
+          await startAnim();
         } else {
+          await startAnim();
           endCallback();
           resolve();
         }
       } else {
-        console.error("hide-error: 该实例未存储");
+        console.error("show-error: 该实例未存储");
         resolve();
       }
     });
   },
   /**
-   * 显示
+   * 隐藏
    * @param popsType
    * @param instConfigList
    * @param guid
@@ -188,7 +196,7 @@ export const PopsInstHandler = {
    * @param $anim
    * @param $mask
    */
-  show(
+  hide(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -207,48 +215,55 @@ export const PopsInstHandler = {
     // oxlint-disable-next-line no-async-promise-executor
     return new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
-
       const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
       if (fintInst) {
+        // 由于是已显示状态
+        // 先执行动画
+        // 再隐藏
+        // 存在实例
+        const checkVisible = () => {
+          if (!PopsInstanceUtils.isHide($anim)) {
+            return true;
+          } else {
+            return false;
+          }
+        };
         const startAnim = async () => {
           if (popsType === "drawer") {
             // drawer是抽屉
             // 单独处理动画
             const drawerConfig = config as Required<PopsDrawerConfig>;
-            await popsUtils.sleep(drawerConfig.openDelay ?? 0);
+            await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
             if ($mask) {
-              popsDOMUtils.css($mask, "display", "");
+              popsDOMUtils.css($mask, "display", "none");
             }
             const direction = drawerConfig.direction!;
-            const size = drawerConfig.size!.toString();
+            const size = "0";
             if (["top", "bottom"].includes(direction)) {
               $pops.style.setProperty("height", size);
             } else if (["left", "right"].includes(direction)) {
               $pops.style.setProperty("width", size);
             } else {
-              console.error("未知direction：", direction);
+              console.error("未知direction: ", direction);
             }
           } else {
-            instConfigItem.$anim.style.width = "";
-            instConfigItem.$anim.style.height = "";
-            Reflect.set(
-              instConfigItem.$anim.style,
-              "animation-name",
-              instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "")
-            );
+            instConfigItem.$anim.style.width = "100%";
+            instConfigItem.$anim.style.height = "100%";
+            Reflect.set(instConfigItem.$anim.style, "animation-name", reverseAnimName);
           }
         };
         const endCallback = () => {
-          instConfigItem.$anim.style.display = "";
+          instConfigItem.$anim.style.display = "none";
           if (instConfigItem.$mask) {
-            instConfigItem.$mask.style.display = "";
+            instConfigItem.$mask.style.display = "none";
           }
-          fintInst.emitter.emit("pops:show", instConfigItem);
+          fintInst.emitter.emit("pops:hide", instConfigItem);
         };
         const instConfigItem = fintInst;
-        fintInst.emitter.emit("pops:before-show", instConfigItem);
-        await startAnim();
-        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+        const animName = instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "");
+        const reverseAnimName = animName + "-reverse";
+        fintInst.emitter.emit("pops:before-hide", instConfigItem);
+        if (!checkVisible() && PopsAnimation.hasAnim(reverseAnimName)) {
           /**
            * 动画结束的回调
            */
@@ -263,14 +278,17 @@ export const PopsInstHandler = {
             animationendCallBack,
             {
               capture: true,
+              once: true,
             }
           );
+          await startAnim();
         } else {
+          await startAnim();
           endCallback();
           resolve();
         }
       } else {
-        console.error("show-error: 该实例未存储");
+        console.error("hide-error: 该实例未存储");
         resolve();
       }
     });
@@ -324,7 +342,7 @@ export const PopsInstHandler = {
     await new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
       const drawerConfig = config as Required<PopsDrawerConfig>;
-      const start = () => {
+      const startAnim = () => {
         /**
          * 弹窗已关闭的回调
          */
@@ -361,7 +379,7 @@ export const PopsInstHandler = {
       };
       if (popsType === "drawer") {
         await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
-        start();
+        startAnim();
       } else {
         await PopsInstHandler.removeInstance([instConfigList], guid);
         resolve();

package/src/types/EventEmitter.d.ts

@@ -1,12 +1,33 @@
 import type { PopsInstGeneralConfig } from "./inst";
 
 export type EventMap = {
+  /**
+   * 调用`.show`时触发
+   */
   "pops:before-show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.show`时触发
+   */
   "pops:show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.hide`时触发
+   */
   "pops:before-hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.hide`时触发
+   */
   "pops:hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.close`时触发
+   */
   "pops:before-destory": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.close`时触发
+   */
   "pops:destory": () => IPromise<void>;
+  /**
+   * 插入到页面中时触发，但是需要传入`EventEmitter`来监听该事件，否则不触发
+   */
   "pops:before-append-to-page": (
     $shadowRoot: ShadowRoot | HTMLElement,
     $shadowContainer: HTMLDivElement

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -277,7 +277,7 @@ export declare type PopsDOMUtilsEventListenerOption = AddEventListenerOptions &
   isComposedPath?: boolean;
 };
 
-export type PopsDOMUtilsTargetElementType = HTMLElement | string | NodeList | HTMLElement[];
+export type PopsDOMUtilsTargetElementType = IArray<HTMLElement> | string | NodeList;
 
 /**
  * 属性转驼峰

package/src/types/components.d.ts

@@ -2,6 +2,8 @@ import type { PopsAnimation } from "./animation";
 import type { PopsPosition, PopsTextAlign, PopsJustifyContent } from "./position";
 import type { PopsGlobalButtonConfig, PopsButtonConfigAnyType, PopsHeaderCloseButtonConfig } from "./button";
 import type { PopsMaskConfig } from "./mask";
+import type { EventEmiter } from "../event/EventEmiter";
+import type { EventMap } from "./EventEmitter";
 
 /**
  * 标题配置
@@ -139,49 +141,41 @@ export interface PopsDragConfig {
 export interface PopsGeneralConfig {
   /**
    * 是否使用shadowRoot
-   *
    * @default true
    */
   useShadowRoot?: boolean;
   /**
    * 自定义的className
-   *
    * @default ""
    */
   class?: string;
   /**
    * 是否是唯一的
-   *
    * @default false
    */
   only?: boolean;
   /**
    *  宽度
-   *
    * @default "350px"
    */
   width: string;
   /**
    *  高度
-   *
    * @default "200px"
    */
   height: string;
   /**
    * 位置
-   *
    * @default "center"
    */
   position?: PopsPosition;
   /**
    * 动画
-   *
    * @default "pops-anim-fadein-zoom"
    */
-  animation?: PopsAnimation;
+  animation?: PopsAnimation | false;
   /**
    * z-index显示层级
-   *
    * @default 10000
    */
   zIndex?: IFunction<number>;
@@ -193,38 +187,41 @@ export interface PopsGeneralConfig {
    * 是否禁用页面滚动
    *
    * 暂时不会生效
-   *
    * @default false
    */
   forbiddenScroll?: boolean;
   /**
    * （可选）自定义style
-   * @default ""
+   * @default null
    */
   style?: string | null;
   /**
    * （可选）自定义浅色模式的style
    *
-   * 传入的css都在dark内
+   * css都在`@media (prefers-color-scheme: light)`内
+   * @default null
    */
   lightStyle?: string | null;
   /**
    * （可选）自定义深色模式的style
    *
-   * 传入的css都在dark内
+   * css都在`@media (prefers-color-scheme: dark)`内
+   * @default null
    */
   darkStyle?: string | null;
   /**
    * （可选）是否阻止`keydown`事件传播
    *
    * 主要是阻止当`keydown`触发来源为输入框时，即在输入框内按下按键不会触发页面的快捷键
-   * @default true
+   * @default true 阻止
    */
   stopKeyDownEventPropagation?: boolean;
   /**
-   * 在元素添加到页面前的事件
-   * @param $shadowRoot 根元素
-   * @param $shadowContainer 容器
+   * 可传入自定义事件监听器代替内部的eventEmitter
+   *
+   * 一般用于监听内部处理的事件
+   *
+   * 某些事件如：`pops:before-append-to-page`会提前触发，那么就需要自定义的监听器来监听
    */
-  beforeAppendToPageCallBack?: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
+  emitter?: EventEmiter | null | undefined;
 }

package/src/types/global.d.ts

@@ -29,3 +29,5 @@ declare type DeepRequired<T> = T extends any[]
 declare type IPromise<T> = T | Promise<T>;
 
 declare type IFunction<T> = T | (() => T);
+
+declare type IArray<T> = T | T[];

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 {
   /**
@@ -1695,7 +1698,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * @param className className属性
    */
   addClassName(
-    $el: Element | undefined | null | undefined,
+    $el: Element | undefined | null,
     className: string | string[] | (() => string | string[]) | undefined | null
   ) {
     if ($el == null) return;
@@ -1743,7 +1746,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * @param $el 目标元素
    * @param className className属性
    */
-  containsClassName($el: HTMLElement | undefined | null, className: string): boolean {
+  containsClassName($el: Element | undefined | null, className: string): boolean {
     if ($el == null) {
       return false;
     }