@whitesev/pops 3.3.4 → 4.0.0

package/dist/types/src/handler/PopsHandler.d.ts

@@ -6,20 +6,19 @@ 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 type { EventEmiter } from "../event/EventEmiter";
 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";
 export declare const PopsHandler: {
     /**
      * 创建shadow
      */
-    handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">): {
+    handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot" | "stopKeyDownEventPropagation">): {
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot;
-    } | {
-        $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement;
+        $shadowRoot: HTMLElement | ShadowRoot;
     };
     /**
      * 处理初始化
@@ -183,7 +182,7 @@ export declare const PopsHandler: {
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleEventConfig(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, type: PopsInstStoreType, $anim: HTMLDivElement, $pops: HTMLDivElement, $mask?: HTMLDivElement): PopsEventConfig;
+    handleEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, type: PopsInstStoreType, $anim: HTMLDivElement, $pops: HTMLDivElement, emitter: E, $mask?: HTMLDivElement): PopsEventConfig<E>;
     /**
      * 获取loading的事件配置
      * @param guid
@@ -193,7 +192,7 @@ export declare const PopsHandler: {
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleLoadingEventConfig(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, guid: string, type: "loading", $anim: HTMLDivElement, $pops: HTMLDivElement, $mask?: HTMLDivElement): Omit<PopsEventConfig, "$shadowContainer" | "$shadowRoot">;
+    handleLoadingEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, guid: string, type: "loading", $anim: HTMLDivElement, $pops: HTMLDivElement, emitter: E, $mask?: HTMLDivElement): Omit<PopsEventConfig<E>, "$shadowContainer" | "$shadowRoot">;
     /**
      * 处理返回的配置，针对popsHandler.handleEventConfig
      * @param config 配置
@@ -206,16 +205,14 @@ export declare const PopsHandler: {
      * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
      * @param callback 点击回调
      */
-    handleClickEvent(type: PopsHandlerEventConfig["type"], $btn: HTMLElement, eventConfig: PopsEventConfig, callback?: (details: PopsHandlerEventConfig, event: PointerEvent | MouseEvent) => void): void;
+    handleClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(type: PopsHandlerEventConfig<E>["type"], $btn: HTMLElement, eventConfig: PopsEventConfig<E>, callback?: (details: PopsHandlerEventConfig<E>, event: PointerEvent | MouseEvent) => void): import("../types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 全局监听键盘事件
      * @param keyName 键名|键值
      * @param otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
      * @param callback 回调函数
      */
-    handleKeyboardEvent(keyName: string | number, otherKeyList: string[] | undefined, callback: (event: KeyboardEvent) => void): {
-        removeKeyboardEvent(): void;
-    };
+    handleKeyboardEvent(keyName: string | number, otherKeyList: string[] | undefined, callback: (event: KeyboardEvent) => void): import("../types/PopsDOMUtilsEventType").PopsDOMUtilsAddEventListenerResult;
     /**
      * 处理prompt的点击事件
      * @param type 触发事件类型
@@ -224,21 +221,26 @@ export declare const PopsHandler: {
      * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
      * @param callback 点击回调
      */
-    handlePromptClickEvent(type: PopsHandlerEventConfig["type"], inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventConfig: PopsEventConfig, callback: (details: PopsEventConfig & {
+    handlePromptClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(type: PopsHandlerEventConfig<E>["type"], inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventConfig: PopsEventConfig<E>, callback: (details: PopsEventConfig<E> & {
         type: any;
         text: string;
     }, event: MouseEvent | PointerEvent) => void): void;
     /**
-     * 把配置的z-index配置转为数字
-     * @param zIndex
+     * 获取数值
+     * @param target
      */
-    handleZIndex(zIndex: number | (() => number)): number;
+    getTargerOrFunctionValue<T>(target: T | (() => T)): T;
     /**
      * 处理config.only
      * @param type 当前弹窗类型
      * @param config 配置
      */
     handleOnly<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(type: PopsType, config: T): T;
+    /**
+     * 处理z-index
+     * @param config 配置
+     */
+    handleZIndex<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(config: T): T;
     /**
      * 处理把已创建的元素保存到内部环境中
      * @param type 当前弹窗类型

package/dist/types/src/handler/PopsInstHandler.d.ts

@@ -0,0 +1,67 @@
+import type { PopsAlertConfig } from "../components/alert/types";
+import type { PopsConfirmConfig } from "../components/confirm/types";
+import type { PopsDrawerConfig } from "../components/drawer/types";
+import type { PopsFolderConfig } from "../components/folder/types";
+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";
+import type { PopsInstGeneralConfig } from "../types/inst";
+import type { PopsInstStoreType } from "../types/main";
+export declare const PopsInstHandler: {
+    /**
+     * 删除配置中对应的对象
+     * @param totalInstConfigList 配置实例列表
+     * @param  guid 唯一标识
+     * @param isAll 是否全部删除
+     */
+    removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<PopsInstGeneralConfig[][]>;
+    /**
+     * 隐藏
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     * @param $mask
+     */
+    hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+    /**
+     * 显示
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     * @param $mask
+     */
+    show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+    /**
+     * 关闭
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     */
+    close(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: string, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement): Promise<void>;
+    /**
+     * 拖拽元素
+     * 说明：
+     * + 元素的position为absolute或者fixed
+     * + 会为元素的
+     * @param $move 需要拖拽的元素
+     * @param options 配置
+     */
+    drag($move: HTMLElement, options: {
+        dragElement: HTMLElement;
+        limit: boolean;
+        emitClick?: boolean;
+        extraDistance: number;
+        container?: Window | typeof globalThis | HTMLElement;
+        startCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+        preventEvent?: (event: TouchEvent | PointerEvent) => boolean;
+    }): void;
+};

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

@@ -0,0 +1,18 @@
+import type { PopsInstGeneralConfig } from "./inst";
+
+export type EventMap = {
+  "pops:before-show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-destory": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:destory": () => IPromise<void>;
+  "pops:before-append-to-page": (
+    $shadowRoot: ShadowRoot | HTMLElement,
+    $shadowContainer: HTMLDivElement
+  ) => IPromise<void>;
+};
+
+export type CustomEventMap = {
+  [K in string]: (...args: any[]) => IPromise<void>;
+};

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

@@ -34,6 +34,10 @@ export type PopsDOMUtils_MouseEventType = keyof PopsDOMUtils_MouseEvent;
  */
 export interface PopsDOMUtils_KeyboardEvent {
   keydown: KeyboardEvent;
+  /**
+   * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event
+   * @deprecated
+   */
   keypress: KeyboardEvent;
   keyup: KeyboardEvent;
 }

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

@@ -1,3 +1,4 @@
+import type { EventEmiter } from "../event/EventEmiter";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "./event";
 import type { PopsIconType } from "./icon";
 
@@ -63,7 +64,7 @@ export interface PopsGlobalButtonConfig<T = object> {
    *
    * 如果传入该值，那么将不会自动关闭弹窗
    */
-  callback(eventConfig: PopsHandlerEventConfig & T, event: PointerEvent | MouseEvent): void;
+  callback(eventConfig: PopsHandlerEventConfig<EventEmiter> & T, event: PointerEvent | MouseEvent): void;
 }
 
 /**

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

@@ -214,6 +214,13 @@ export interface PopsGeneralConfig {
    * 传入的css都在dark内
    */
   darkStyle?: string | null;
+  /**
+   * （可选）是否阻止`keydown`事件传播
+   *
+   * 主要是阻止当`keydown`触发来源为输入框时，即在输入框内按下按键不会触发页面的快捷键
+   * @default true
+   */
+  stopKeyDownEventPropagation?: boolean;
   /**
    * 在元素添加到页面前的事件
    * @param $shadowRoot 根元素

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

@@ -1,9 +1,11 @@
+import type { EventEmiter } from "../event/EventEmiter";
+import type { CustomEventMap } from "./EventEmitter";
 import type { PopsType } from "./main";
 
 /**
  * 事件配置
  */
-export interface PopsEventConfig {
+export interface PopsEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>> {
   /** 最外层包裹的元素 */
   $shadowContainer: HTMLDivElement;
   /** ShadowRoot */
@@ -20,6 +22,8 @@ export interface PopsEventConfig {
   mode: PopsType;
   /** 唯一id */
   guid: string;
+  /** 事件发送器 */
+  emitter: E;
   /**
    * 关闭弹窗
    */
@@ -37,7 +41,7 @@ export interface PopsEventConfig {
 /**
  * 处理过的事件配置
  */
-export interface PopsHandlerEventConfig extends PopsEventConfig {
+export interface PopsHandlerEventConfig<E extends EventEmiter<CustomEventMap>> extends PopsEventConfig<E> {
   /** 当前按钮类型 */
   type: "cancel" | "close" | "ok" | "other";
 }

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

@@ -1,3 +1,5 @@
+import type { EventEmiter } from "../event/EventEmiter";
+
 /**
  * config实例配置
  */
@@ -19,10 +21,8 @@ export interface PopsInstGeneralConfig extends PopsInstConfig {
   $shadowContainer: HTMLDivElement;
   /** shadow容器的shandowRoot */
   $shadowRoot: ShadowRoot | HTMLElement;
-  /** 移除实例前的回调函数 */
-  beforeRemoveCallBack?: (instCommonConfig: PopsInstGeneralConfig) => void;
   /** 配置 */
   config: any;
-  /** 销毁元素 */
-  destory(): void | Promise<void>;
+  /** 事件发送器 */
+  emitter: EventEmiter;
 }

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

@@ -289,22 +289,6 @@ declare class PopsDOMUtilsEvent {
      * })
      */
     onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
-    /**
-     * 当按键按下时触发事件
-     * keydown - > keypress - > keyup
-     * @param target 目标
-     * @param handler 事件处理函数
-     * @param option 配置
-     * @example
-     * // 监听a.xx元素的按键按下
-     * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
-     *   console.log("按键按下");
-     * })
-     * DOMUtils.keypress("a.xx",()=>{
-     *   console.log("按键按下");
-     * })
-     */
-    onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): PopsDOMUtilsAddEventListenerResult | undefined;
     /**
      * 阻止事件传递
      *

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

@@ -1,30 +1,4 @@
-import type { PopsAlertConfig } from "../components/alert/types";
-import type { PopsConfirmConfig } from "../components/confirm/types";
-import type { PopsDrawerConfig } from "../components/drawer/types";
-import type { PopsFolderConfig } from "../components/folder/types";
-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 type { PopsInstGeneralConfig } from "../types/inst";
-import type { PopsInstStoreType } from "../types/main";
 export declare const PopsInstanceUtils: {
-    /**
-     * 获取页面中最大的z-index的元素信息
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @param node 进行判断的元素，默认是document
-     * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
-     * @example
-     * Utils.getMaxZIndexNodeInfo();
-     * > {
-     *   node: ...,
-     *   zIndex: 1001
-     * }
-     **/
-    getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
-        node: Element;
-        zIndex: number;
-    };
     /**
      * 获取pops所有弹窗中的最大的z-index
      * @param deviation
@@ -34,68 +8,6 @@ export declare const PopsInstanceUtils: {
         animElement: HTMLDivElement | null;
         isOverMaxZIndex: boolean;
     };
-    /**
-     * 获取页面中最大的z-index
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @example
-     * getMaxZIndex();
-     * > 1001
-     **/
-    getMaxZIndex(deviation?: number): number;
-    /**
-     * 删除配置中对应的对象
-     * @param totalInstConfigList 配置实例列表
-     * @param  guid 唯一标识
-     * @param isAll 是否全部删除
-     */
-    removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<PopsInstGeneralConfig[][]>;
-    /**
-     * 隐藏
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     * @param $mask
-     */
-    hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
-    /**
-     * 显示
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     * @param $mask
-     */
-    show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: PopsInstStoreType, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
-    /**
-     * 关闭
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     */
-    close(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: string, instConfigList: PopsInstGeneralConfig[], guid: string, $anim: HTMLElement): Promise<void>;
-    /**
-     * 拖拽元素
-     * 说明：
-     * + 元素的position为absolute或者fixed
-     * + 会为元素的
-     * @param $move 需要拖拽的元素
-     * @param options 配置
-     */
-    drag($move: HTMLElement, options: {
-        dragElement: HTMLElement;
-        limit: boolean;
-        emitClick?: boolean;
-        extraDistance: number;
-        container?: Window | typeof globalThis | HTMLElement;
-        moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
-        endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
-        preventEvent?: (event: TouchEvent | PointerEvent) => boolean;
-    }): void;
     /**
      * 排序数组
      * @param getBeforeValueFun

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

@@ -1,6 +1,10 @@
 import AnyTouch from "any-touch";
 import doubletap from "@any-touch/doubletap";
 declare class PopsUtils {
+    /**
+     * 超时时间
+     */
+    sleep(timeout: number): Promise<unknown>;
     /**
      * 判断是否是window，例如window、self、globalThis
      * @param target
@@ -151,6 +155,59 @@ declare class PopsUtils {
      * 覆盖对象中的数组新值
      */
     setArray<T>(target: T, key: keyof T, newArr: any[]): void;
+    /**
+     * 获取页面的坐标中最大的z-index的元素信息
+     *
+     * 其中坐标为
+     *
+     * + 左上角（宽: 1/8，高: 1/8）
+     * + 右上角（宽: 7/8，高: 1/8）
+     * + 左下角（宽: 1/8，高: 7/8）
+     * + 右下角（宽: 7/8，高: 7/8）
+     * + 中间（宽: 1/2，高: 1/2）
+     * @param $el 仅检测目标元素最大的z-index（自动往上层找）
+     * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少），默认为10
+     */
+    getMaxZIndexNodeInfoFromPoint($el?: IFunction<HTMLElement | HTMLElement[]>, deviation?: number): {
+        /** 处理了偏移量后的z-index值 */
+        zIndex: number;
+        /** 原始z-index值 */
+        originZIndex: number;
+        /** 拥有最大z-index的元素 */
+        node: HTMLElement | null;
+        /** 目标坐标元素 */
+        positionNode: HTMLElement;
+        /** x坐标 */
+        positionX: number;
+        /** y坐标 */
+        positionY: number;
+    }[];
+    /**
+     * 获取页面的坐标中最大的z-index的元素信息
+     *
+     * 其中坐标为
+     *
+     * + 左上角（宽: 1/8，高: 1/8）
+     * + 右上角（宽: 7/8，高: 1/8）
+     * + 左下角（宽: 1/8，高: 7/8）
+     * + 右下角（宽: 7/8，高: 7/8）
+     * + 中间（宽: 1/2，高: 1/2）
+     * @param deviation 将对所有获取到的z-index处理偏移量（增加或减少）
+     */
+    getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
+        /** 处理了偏移量后的z-index值 */
+        zIndex: number;
+        /** 原始z-index值 */
+        originZIndex: number;
+        /** 拥有最大z-index的元素 */
+        node: HTMLElement | null;
+        /** 目标坐标元素 */
+        positionNode: HTMLElement;
+        /** x坐标 */
+        positionX: number;
+        /** y坐标 */
+        positionY: number;
+    }[];
 }
 declare const popsUtils: PopsUtils;
 export { popsUtils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.3.4",
+  "version": "4.0.0",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",
@@ -57,8 +57,8 @@
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.5.0",
-    "oxfmt": "^0.35.0",
-    "oxlint": "1.50.0",
+    "oxfmt": "^0.36.0",
+    "oxlint": "1.51.0",
     "rollup": "^4.54.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.1.2",

package/src/Pops.ts

@@ -1,3 +1,4 @@
+import { version } from "../package.json";
 import { PopsAlert } from "./components/alert";
 import type { PopsAlertConfig } from "./components/alert/types";
 import { PopsConfirm } from "./components/confirm";
@@ -22,6 +23,7 @@ import type { PopsSearchSuggestionConfig } from "./components/searchSuggestion/t
 import { PopsTooltip } from "./components/tooltip";
 import type { PopsToolTipConfig } from "./components/tooltip/types/index";
 import { GlobalConfig } from "./config/GlobalConfig";
+import { EventEmiter } from "./event/EventEmiter";
 import { PopsAnimation } from "./PopsAnimation";
 import { PopsCore } from "./PopsCore";
 import { PopsCSS } from "./PopsCSS";
@@ -31,7 +33,6 @@ import { popsDOMUtils } from "./utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { popsUtils } from "./utils/PopsUtils";
-import { version } from "../package.json";
 
 class Pops {
   /** 配置 */
@@ -60,7 +61,11 @@ class Pops {
     /** pops处理float类型使用的工具类 */
     MathFloatUtils: PopsMathFloatUtils,
     /** pops.panel中用于处理各个类型的工具 */
-    PanelHandlerComponents: PanelHandlerComponents,
+    PanelHandlerComponents,
+    /** pops.panel中的动画 */
+    PopsAnimation,
+    /** 事件类 */
+    EventEmiter,
   };
   init() {}
   /**

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/defaultConfig.ts

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