@whitesev/pops 3.3.5 → 4.0.1

package/src/PopsAnimation.ts

@@ -29,4 +29,130 @@ export const PopsAnimation = {
   hasAnim(name: string) {
     return Object.prototype.hasOwnProperty.call(this.$data, name);
   },
+  /**
+   * 带动画的进入元素
+   * @param $el 当前元素
+   * @param $next 切换的元素
+   * @param option 配置
+   */
+  createSwitchElementWithAnimation(
+    $el: HTMLElement,
+    $next: HTMLElement,
+    option: {
+      /**
+       * 是否使用动画
+       * @default true
+       */
+      useAnimation?: boolean;
+      /**
+       * 动画配置
+       *
+       * + `duration`: 默认`220`
+       * + `easing`: 默认`"ease-in-out"`
+       */
+      animOptions?: KeyframeAnimationOptions;
+      /** 为$next内部添加元素 */
+      enterToAddElementCallback: () => IPromise<void>;
+      /** 退出时移除$next元素 */
+      exitToRemoveElementCallback?: () => IPromise<void>;
+    }
+  ) {
+    const animOptions: KeyframeAnimationOptions = {
+      // 150 220 300
+      duration: 220,
+      easing: "ease-in-out",
+      ...(option.animOptions ?? {}),
+    };
+    if (option.useAnimation == null) {
+      option.useAnimation = true;
+    }
+    return {
+      /**
+       * 进入
+       */
+      async enter() {
+        const transitionEndCallback = async () => {
+          // 先直接隐藏旧的容器
+          popsDOMUtils.cssHide($el, true);
+          // 添加元素
+          await option.enterToAddElementCallback();
+        };
+        // 进入下一层
+        if (option.useAnimation && typeof document.startViewTransition == "function") {
+          // 处理添加的元素的动画
+          const transition = document.startViewTransition(transitionEndCallback);
+          await transition.ready;
+          await $next.animate(
+            // 从右向左移入（进入动画）
+            [
+              {
+                // from
+                transform: "translateX(100%)",
+              },
+              {
+                // to
+                transform: "translateX(0)",
+              },
+            ],
+            animOptions
+          ).finished;
+          await transition.finished;
+        } else {
+          await transitionEndCallback();
+        }
+      },
+      /**
+       * 退出
+       */
+      async exit() {
+        // 返回上一层菜单
+        const transitionEndCallback = async () => {
+          // 显示上层菜单
+          popsDOMUtils.cssShow($el);
+          // 移除下一层的菜单
+          $next.remove();
+          if (typeof option.exitToRemoveElementCallback === "function") {
+            await option.exitToRemoveElementCallback();
+          }
+        };
+        if (option.useAnimation && typeof document.startViewTransition == "function") {
+          const leaveTransition = document.startViewTransition(transitionEndCallback);
+          await leaveTransition.ready;
+          await Promise.all([
+            // 从原位置向右移出
+            $next.animate(
+              [
+                {
+                  // from
+                  transform: "translateX(0)",
+                },
+                {
+                  // to
+                  transform: "translateX(100%)",
+                },
+              ],
+              animOptions
+            ).finished,
+            // 从最左边向右移入
+            $el.animate(
+              [
+                {
+                  // from
+                  transform: "translateX(-100%)",
+                },
+                {
+                  // to
+                  transform: "translateX(0)",
+                },
+              ],
+              animOptions
+            ).finished,
+          ]);
+          await leaveTransition.finished;
+        } else {
+          await transitionEndCallback();
+        }
+      },
+    };
+  },
 };

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/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/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/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/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/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

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