@whitesev/pops 3.3.4 → 4.0.0

package/src/components/alert/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertDefaultConfig } from "./defaultConfig";
 import type { PopsAlertConfig } from "./types";
@@ -14,6 +16,7 @@ export const PopsAlert = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "alert";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsAlertDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsAlert = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
     const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -116,6 +119,7 @@ export const PopsAlert = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -125,12 +129,8 @@ export const PopsAlert = {
     PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
 
     // 创建到页面中
-
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       // 添加遮罩层
@@ -145,11 +145,11 @@ export const PopsAlert = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance!,

package/src/components/confirm/defaultConfig.ts

@@ -88,5 +88,6 @@ export const PopsConfirmDefaultConfig = (): DeepRequired<PopsConfirmConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   } as DeepRequired<PopsConfirmConfig>;
 };

package/src/components/confirm/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsConfirmDefaultConfig } from "./defaultConfig";
 import type { PopsConfirmConfig } from "./types";
@@ -14,6 +16,7 @@ export const PopsConfirm = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "confirm";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsConfirmDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsConfirm = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -121,6 +124,7 @@ export const PopsConfirm = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -130,12 +134,8 @@ export const PopsConfirm = {
     PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.callback);
 
     // 创建到页面中
-
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
@@ -148,11 +148,11 @@ export const PopsConfirm = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,

package/src/components/drawer/defaultConfig.ts

@@ -87,5 +87,6 @@ export const PopsDrawerDefaultConfig = (): DeepRequired<PopsDrawerConfig> => {
     darkStyle: null,
     beforeAppendToPageCallBack() {},
     forbiddenScroll: false,
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/drawer/index.ts

@@ -1,8 +1,10 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsHandlerEventConfig } from "../../types/event";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -14,12 +16,12 @@ export const PopsDrawer = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "drawer";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsDrawerDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
     config = PopsHandler.handleOnly(popsType, config);
-
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
     PopsHandler.handleInit($shadowRoot, [
       {
@@ -53,7 +55,7 @@ export const PopsDrawer = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -126,6 +128,7 @@ export const PopsDrawer = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -155,13 +158,16 @@ export const PopsDrawer = {
 
     // 按下Esc键触发关闭
     if (config.closeOnPressEscape) {
-      PopsHandler.handleKeyboardEvent("Escape", [], function () {
+      const listener = PopsHandler.handleKeyboardEvent("Escape", [], function () {
         evtConfig.close();
       });
+      emitter.on("pops:destory", () => {
+        listener.off();
+      });
     }
     // 待处理的点击事件列表
     const needHandleClickEventList: {
-      type: PopsHandlerEventConfig["type"];
+      type: PopsHandlerEventConfig<typeof emitter>["type"];
       ele: HTMLElement;
     }[] = [
       {
@@ -215,10 +221,7 @@ export const PopsDrawer = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     popsUtils.setTimeout(() => {
       popsUtils.setTimeout(() => {
@@ -238,7 +241,7 @@ export const PopsDrawer = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter: emitter,
     });
     return result;
   },

package/src/components/folder/defaultConfig.ts

@@ -149,5 +149,6 @@ export const PopsFolderDefaultConfig = (): DeepRequired<PopsFolderConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/folder/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoading } from "../loading";
@@ -17,6 +19,7 @@ export const PopsFolder = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "folder";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsFolderDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -110,7 +113,7 @@ export const PopsFolder = {
     }
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -278,6 +281,7 @@ export const PopsFolder = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -288,10 +292,7 @@ export const PopsFolder = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
@@ -955,7 +956,7 @@ export const PopsFolder = {
     Reflect.set($pops, "data-pops-folder", popsFolder);
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops, {
+      PopsInstHandler.drag($pops, {
         dragElement: $title,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,
@@ -971,7 +972,7 @@ export const PopsFolder = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     return result;
   },

package/src/components/folder/types/index.ts

@@ -10,8 +10,12 @@ import type {
  */
 export type PopsFolderDownloadOption = {
   /**
+   *
+   * 前置条件：url不为空
+   *
    * 下载方式，不传入就不下载（不做任何处理）
    *
+   *
    * + `a`: 使用`a标签`进行下载
    * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
    * + `iframe`: 使用`iframe`进行下载

package/src/components/iframe/defaultConfig.ts

@@ -58,5 +58,6 @@ export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/iframe/index.ts

@@ -1,11 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsIframeDefaultConfig } from "./defaultConfig";
 import type { PopsIframeClickEventConfig, PopsIframeConfig } from "./types";
@@ -15,7 +16,11 @@ export const PopsIframe = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "iframe";
-
+    const emitter = new EventEmiter<{
+      "pops:iframe-min": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+      "pops:iframe-mise": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+      "pops:iframe-max": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    }>(popsType);
     let config = PopsIframeDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
@@ -55,7 +60,7 @@ export const PopsIframe = {
     const maskExtraStyle = config.animation != null && <string>config.animation != "" ? "position:absolute;" : "";
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -140,10 +145,11 @@ export const PopsIframe = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
-    ) as PopsIframeClickEventConfig;
+    ) as PopsIframeClickEventConfig<typeof emitter>;
     // 赋值额外的$iframe参数
-    evtConfig.$iframe = $iframe!;
+    evtConfig.$iframe = $iframe;
 
     const result = PopsHandler.handleResultConfig(evtConfig);
 
@@ -172,17 +178,14 @@ export const PopsIframe = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     $iframeContainer.appendChild($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
     }
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,
@@ -217,6 +220,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.min?.callback === "function") {
           config.btn.min.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-min", evtConfig, event);
       },
       {
         capture: true,
@@ -251,6 +255,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.max?.callback === "function") {
           config.btn.max.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-max", evtConfig, event);
       },
       {
         capture: true,
@@ -293,6 +298,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.mise?.callback === "function") {
           config.btn.mise.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-mise", evtConfig, event);
       },
       {
         capture: true,
@@ -305,7 +311,7 @@ export const PopsIframe = {
       async (event) => {
         event.preventDefault();
         event.stopPropagation();
-        await PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
+        await PopsInstHandler.removeInstance([PopsInstData.iframe], guid, false);
         if (typeof config?.btn?.close?.callback === "function") {
           config.btn.close.callback(evtConfig, event);
         }
@@ -323,7 +329,7 @@ export const PopsIframe = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     return result;
   },

package/src/components/iframe/types/index.ts

@@ -1,16 +1,18 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
-
+import type { EventEmiter } from "../../../event/EventEmiter";
+import type { PopsDragConfig, PopsGeneralConfig, PopsTitleConfig } from "../../../types/components";
 import type { PopsEventConfig } from "../../../types/event";
+import type { CustomEventMap } from "../../../types/EventEmitter";
 
 /**
  * pops.iframe的按钮点击事件回调的配置参数
  */
-export type PopsIframeClickEventConfig = PopsEventConfig & {
-  /**
-   * iframe元素
-   */
-  $iframe: HTMLIFrameElement;
-};
+export type PopsIframeClickEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>> =
+  PopsEventConfig<E> & {
+    /**
+     * iframe元素
+     */
+    $iframe: HTMLIFrameElement;
+  };
 
 /**
  * pops.iframe

package/src/components/loading/defaultConfig.ts

@@ -27,5 +27,6 @@ export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
     lightStyle: null,
     darkStyle: null,
     addIndexCSS: true,
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/loading/index.ts

@@ -1,7 +1,9 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingDefaultConfig } from "./defaultConfig";
@@ -12,14 +14,15 @@ export const PopsLoading = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const PopsType = "loading";
+    const emitter = new EventEmiter<EventMap>(PopsType);
+
     let config = PopsLoadingDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
-
     config = PopsHandler.handleOnly(PopsType, config);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
@@ -76,17 +79,20 @@ export const PopsLoading = {
       $mask = handleMask.maskElement;
       $elList.push($mask);
     }
-    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
+    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, emitter, $mask);
     popsDOMUtils.append(config.$parent, $elList);
     if ($mask != null) {
       $anim.after($mask);
     }
-    // @ts-ignore
     PopsHandler.handlePush(PopsType, {
+      $shadowContainer: $pops,
+      $shadowRoot: $pops,
       guid: guid,
       $anim: $anim,
-      $pops: $pops!,
-      $mask: $mask!,
+      $pops: $pops,
+      $mask: $mask,
+      emitter: emitter,
+      config: config,
     });
 
     if (config.isAbsolute) {

package/src/components/panel/defaultConfig.ts

@@ -866,5 +866,7 @@ export const PopsPanelDefaultConfig = (): DeepRequired<PopsPanelConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
+    listenEscapeKeyUpToExitDeepMenu: true,
   };
 };