@whitesev/pops 3.3.4 → 4.0.0

package/src/event/EventEmiter.ts

@@ -0,0 +1,95 @@
+import type { EventMap, CustomEventMap } from "../types/EventEmitter";
+import type { PopsType } from "../types/main";
+
+class EventEmiter<T extends CustomEventMap = CustomEventMap> {
+  #type: PopsType;
+  #data = new Map<
+    string,
+    {
+      type: PopsType;
+      time: number;
+      callback: (...args: any[]) => IPromise<void>;
+    }[]
+  >();
+  constructor(type: PopsType) {
+    this.#type = type;
+    document.addEventListener;
+  }
+  on<P extends keyof EventMap>(
+    eventName: P,
+    callback: EventMap[P]
+  ): {
+    off: () => IPromise<void>;
+    emit: (...args: Parameters<T[P]>) => IPromise<void>;
+  };
+  on<P extends keyof T>(
+    eventName: P,
+    callback: T[P]
+  ): {
+    off: () => IPromise<void>;
+    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);
+    return {
+      off: () => {
+        this.off(eventName as keyof EventMap, callback);
+      },
+      emit: (...args: Parameters<T[P]>) => {
+        this.emit(eventName, ...args);
+      },
+    };
+  }
+  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) ?? [];
+    let isOffSuccess = false;
+    for (let index = eventList.length - 1; index >= 0; index--) {
+      if (eventList[index].callback === callback) {
+        isOffSuccess = true;
+        eventList.splice(index, 1);
+      }
+    }
+    if (eventList.length === 0) {
+      // empty
+      this.#data.delete(eventName);
+    } else {
+      if (isOffSuccess) {
+        // update
+        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) ?? [];
+    for (const item of eventList) {
+      await item.callback(...args);
+    }
+  }
+  offAll<P extends keyof EventMap>(eventName?: P): IPromise<void>;
+  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);
+    } else {
+      this.#data.clear();
+    }
+  }
+  /**
+   * 获取所有添加的事件
+   */
+  getAllEvents(eventName?: string) {
+    if (typeof eventName === "string") {
+      return this.#data.get(eventName);
+    } else {
+      return Array.from(this.#data.values());
+    }
+  }
+}
+
+export { EventEmiter };

package/src/handler/PopsElementHandler.ts

@@ -52,7 +52,7 @@ export const PopsElementHandler = {
     const popsPosition = __config__.position || "";
     if (config.zIndex != null) {
       popsAnimStyle += `z-index: ${zIndex};`;
-      popsStyle += `z-index: ${zIndex};`;
+      // popsStyle += `z-index: ${zIndex};`;
     }
     if (__config__.width != null) {
       popsStyle += `width: ${__config__.width};`;
@@ -61,15 +61,17 @@ export const PopsElementHandler = {
       popsStyle += `height: ${__config__.height};`;
     }
     const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
+    const popsClassNameList = ["pops"];
+    if (config.class) {
+      popsClassNameList.push(...config.class.split(" "));
+    }
     return /*html*/ `
 		<div class="pops-anim" anim="${__config__.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${
       config.style != null ? /*html*/ `<style tyle="text/css" data-name="style">${config.style}</style>` : ""
     }
     ${config.lightStyle != null ? /*html*/ `<style tyle="text/css" data-name="lightStyle">@media (prefers-color-scheme: light) {${config.lightStyle}}</style>` : ""}
     ${config.darkStyle != null ? /*html*/ `<style tyle="text/css" data-name="darkStyle">@media (prefers-color-scheme: dark) {${config.darkStyle}}</style>` : ""}
-			<div class="pops ${
-        config.class || ""
-      }" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
+			<div class="${popsClassNameList.join(" ")}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
 		</div>`;
   },
   /**

package/src/handler/PopsHandler.ts

@@ -6,37 +6,63 @@ import type { PopsIframeConfig } from "../components/iframe/types";
 import type { PopsLoadingConfig } from "../components/loading/types";
 import type { PopsPanelConfig } from "../components/panel/types";
 import type { PopsPromptConfig } from "../components/prompt/types/index";
-import { PopsCore } from "../PopsCore";
+import type { EventEmiter } from "../event/EventEmiter";
 import { PopsAnimation } from "../PopsAnimation";
+import { PopsCore } from "../PopsCore";
 import { PopsInstData } from "../PopsInst";
 import type { PopsGeneralConfig } from "../types/components";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "../types/event";
+import type { CustomEventMap } from "../types/EventEmitter";
 import type { PopsInstGeneralConfig } from "../types/inst";
-import type { PopsInstStoreType, PopsType, PopsSupportAnimConfigType, PopsSupportOnlyConfig } from "../types/main";
+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";
 
 export const PopsHandler = {
   /**
    * 创建shadow
    */
-  handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">) {
+  handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot" | "stopKeyDownEventPropagation">) {
     const $shadowContainer = popsDOMUtils.createElement("div", {
       className: "pops-shadow-container",
     });
+    let $shadowRoot: ShadowRoot | HTMLElement;
     if (config.useShadowRoot) {
-      const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
-      return {
-        $shadowContainer,
-        $shadowRoot,
-      };
+      $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
     } else {
-      return {
-        $shadowContainer,
-        $shadowRoot: $shadowContainer,
-      };
+      $shadowRoot = $shadowContainer;
     }
+    // 添加键盘监听
+    // rightClickMenu
+    // searchSuggestion
+    // tooltip
+    // 以上都不需要添加该事件监听
+    if (config.stopKeyDownEventPropagation) {
+      popsDOMUtils.on(
+        $shadowRoot,
+        "keydown",
+        [
+          'input[type="text"]',
+          'input[type="password"]',
+          'input[type="number"]',
+          'input[type="email"]',
+          'input[type="url"]',
+          'input[type="search"]',
+          "input:not([type])",
+          "textarea",
+        ],
+        (evt) => {
+          evt.stopImmediatePropagation();
+          evt.stopPropagation();
+        },
+        { capture: true }
+      );
+    }
+    return {
+      $shadowContainer,
+      $shadowRoot,
+    };
   },
   /**
    * 处理初始化
@@ -135,10 +161,10 @@ export const PopsHandler = {
       function originalRun() {
         if (config.config.mask!.clickEvent!.toClose) {
           // 关闭
-          return PopsInstanceUtils.close(config.config, config.type, targetInst, config.guid, config.animElement);
+          return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
         } else if (config.config.mask!.clickEvent!.toHide) {
           // 隐藏
-          return PopsInstanceUtils.hide(
+          return PopsInstHandler.hide(
             config.config,
             config.type,
             targetInst,
@@ -349,7 +375,7 @@ export const PopsHandler = {
    * @param $mask 遮罩层
    * @param config 当前配置
    */
-  handleEventConfig(
+  handleEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -365,8 +391,9 @@ export const PopsHandler = {
     type: PopsInstStoreType,
     $anim: HTMLDivElement,
     $pops: HTMLDivElement,
+    emitter: E,
     $mask?: HTMLDivElement
-  ): PopsEventConfig {
+  ): PopsEventConfig<E> {
     return {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
@@ -376,17 +403,18 @@ export const PopsHandler = {
       $mask: $mask,
       mode: type,
       guid: guid,
+      emitter: emitter,
       close() {
-        return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
+        return PopsInstHandler.close(config, type, PopsInstData[type], guid, $anim);
       },
       hide() {
-        return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.hide(config, type, PopsInstData[type], guid, $anim, $mask);
       },
       show($parent?: HTMLElement | Document | ShadowRoot) {
         if ($parent) {
           $parent.appendChild(PopsInstData[type][0].$shadowRoot);
         }
-        return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.show(config, type, PopsInstData[type], guid, $anim, $mask);
       },
     };
   },
@@ -399,7 +427,7 @@ export const PopsHandler = {
    * @param $mask 遮罩层
    * @param config 当前配置
    */
-  handleLoadingEventConfig(
+  handleLoadingEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -413,8 +441,9 @@ export const PopsHandler = {
     type: "loading",
     $anim: HTMLDivElement,
     $pops: HTMLDivElement,
+    emitter: E,
     $mask?: HTMLDivElement
-  ): Omit<PopsEventConfig, "$shadowContainer" | "$shadowRoot"> {
+  ): Omit<PopsEventConfig<E>, "$shadowContainer" | "$shadowRoot"> {
     return {
       $el: $anim,
       $anim: $anim,
@@ -422,14 +451,15 @@ export const PopsHandler = {
       $mask: $mask,
       mode: type,
       guid: guid,
+      emitter,
       close() {
-        return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
+        return PopsInstHandler.close(config, type, PopsInstData[type], guid, $anim);
       },
       hide() {
-        return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.hide(config, type, PopsInstData[type], guid, $anim, $mask);
       },
       show() {
-        return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.show(config, type, PopsInstData[type], guid, $anim, $mask);
       },
     };
   },
@@ -450,14 +480,14 @@ export const PopsHandler = {
    * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
    * @param callback 点击回调
    */
-  handleClickEvent(
-    type: PopsHandlerEventConfig["type"],
+  handleClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
+    type: PopsHandlerEventConfig<E>["type"],
     $btn: HTMLElement,
-    eventConfig: PopsEventConfig,
-    callback?: (details: PopsHandlerEventConfig, event: PointerEvent | MouseEvent) => void
+    eventConfig: PopsEventConfig<E>,
+    callback?: (details: PopsHandlerEventConfig<E>, event: PointerEvent | MouseEvent) => void
   ) {
     if (typeof callback !== "function") return;
-    popsDOMUtils.on<PointerEvent | MouseEvent>(
+    return popsDOMUtils.on<PointerEvent | MouseEvent>(
       $btn,
       "click",
       (event) => {
@@ -499,16 +529,10 @@ export const PopsHandler = {
         callback && callback(event);
       }
     };
-    popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
+    const listener = popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
       capture: true,
     });
-    return {
-      removeKeyboardEvent() {
-        popsDOMUtils.off(globalThis, "keydown", keyboardEvent, {
-          capture: true,
-        });
-      },
-    };
+    return listener;
   },
   /**
    * 处理prompt的点击事件
@@ -518,13 +542,13 @@ export const PopsHandler = {
    * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
    * @param callback 点击回调
    */
-  handlePromptClickEvent(
-    type: PopsHandlerEventConfig["type"],
+  handlePromptClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
+    type: PopsHandlerEventConfig<E>["type"],
     inputElement: HTMLInputElement | HTMLTextAreaElement,
     $btn: HTMLElement,
-    eventConfig: PopsEventConfig,
+    eventConfig: PopsEventConfig<E>,
     callback: (
-      details: PopsEventConfig & {
+      details: PopsEventConfig<E> & {
         type: any;
         text: string;
       },
@@ -548,14 +572,15 @@ export const PopsHandler = {
     );
   },
   /**
-   * 把配置的z-index配置转为数字
-   * @param zIndex
+   * 获取数值
+   * @param target
    */
-  handleZIndex(zIndex: number | (() => number)): number {
-    if (typeof zIndex === "function") {
-      return zIndex();
+  getTargerOrFunctionValue<T>(target: T | (() => T)): T {
+    if (typeof target === "function") {
+      const result = (target as () => T)();
+      return result;
     } else {
-      return zIndex;
+      return target;
     }
   },
   /**
@@ -572,10 +597,10 @@ export const PopsHandler = {
       if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
         const inst = PopsInstData[type as keyof typeof PopsInstData];
         if (inst) {
-          PopsInstanceUtils.removeInstance([inst], "", true);
+          PopsInstHandler.removeInstance([inst], "", true);
         }
       } else {
-        PopsInstanceUtils.removeInstance(
+        PopsInstHandler.removeInstance(
           [
             PopsInstData.alert,
             PopsInstData.confirm,
@@ -589,15 +614,32 @@ export const PopsHandler = {
           true
         );
       }
-    } else {
-      // 对配置进行处理
-      // 选择配置的z-index和已有的pops实例的最大z-index值
-      const originZIndex = config.zIndex;
-      config.zIndex = () => {
-        const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
-        return maxZIndex;
-      };
     }
+    config = this.handleZIndex(config);
+
+    return config;
+  },
+  /**
+   * 处理z-index
+   * @param config 配置
+   */
+  handleZIndex<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(config: T): T {
+    // 对配置进行处理
+    // 选择配置的z-index和已有的pops实例的最大z-index值
+    const originZIndex = config.zIndex;
+    const handler = () => {
+      let deviation = 100;
+      if (originZIndex.toString() !== handler.toString()) {
+        // 避免叠加覆盖
+        deviation += PopsHandler.getTargerOrFunctionValue(originZIndex) ?? 0;
+      }
+      let maxZIndex = deviation;
+      const pointZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint(deviation);
+      const pointZIndexInfo = pointZIndexInfoList[0];
+      maxZIndex = Math.max(maxZIndex, pointZIndexInfo?.zIndex ?? deviation);
+      return maxZIndex;
+    };
+    config.zIndex = handler;
     return config;
   },
   /**