@whitesev/pops 4.0.0 → 4.0.2

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

@@ -223,7 +223,7 @@ declare class Pops {
         InstanceUtils: {
             getPopsMaxZIndex(deviation?: number): {
                 zIndex: number;
-                animElement: HTMLDivElement | null;
+                animElement: HTMLElement | null;
                 isOverMaxZIndex: boolean;
             };
             sortElementListByProperty<T, R>(getBeforeValueFun: (value: T) => R, getAfterValueFun: (value: T) => R, sortByDesc?: boolean): (after_obj: T, before_obj: T) => 1 | 0 | -1;
@@ -235,6 +235,24 @@ declare class Pops {
             sub(number1: number, number2: number): string;
             division(number1: number, number2: number): number;
         };
+        /** 实例处理函数 */
+        PopsInstHandler: {
+            removeInstance(totalInstConfigList: import("./types/inst").PopsInstGeneralConfig[][], guid?: string, isAll?: boolean): Promise<import("./types/inst").PopsInstGeneralConfig[][]>;
+            hide(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+            show(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstGeneralConfig[], guid: string, $anim: HTMLElement, $mask?: HTMLElement): Promise<void>;
+            close(config: PopsAlertConfig | PopsDrawerConfig | PopsPromptConfig | PopsConfirmConfig | PopsIframeConfig | PopsLoadingConfig | PopsPanelConfig | PopsFolderConfig, popsType: string, instConfigList: import("./types/inst").PopsInstGeneralConfig[], guid: string, $anim: HTMLElement): Promise<void>;
+            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;
+        };
         /** pops.panel中用于处理各个类型的工具 */
         PanelHandlerComponents: () => {
             asideULElement: HTMLUListElement;
@@ -727,34 +745,74 @@ declare class Pops {
      */
     GlobalConfig: {
         config: {
-            style?: string | (() => string) | null;
-            zIndex?: (number | (() => number) | null) | (string | (() => string) | null);
+            style?: IFunction<string> | null | undefined;
+            zIndex?: IFunction<string | number> | null | undefined;
         } & Partial<import("./types/components").PopsGeneralConfig> & Partial<import("./types/components").PopsDragConfig>;
         setGlobalConfig(config: {
-            style?: string | (() => string) | null;
-            zIndex?: (number | (() => number) | null) | (string | (() => string) | null);
+            style?: IFunction<string> | null | undefined;
+            zIndex?: IFunction<string | number> | null | undefined;
         } & Partial<import("./types/components").PopsGeneralConfig> & Partial<import("./types/components").PopsDragConfig>): void;
         getGlobalConfig(): {
-            style?: string | undefined;
-            zIndex?: string | number | undefined;
-            useShadowRoot?: boolean | undefined;
-            class?: string | undefined;
-            only?: boolean | undefined;
-            width?: string | undefined;
-            height?: string | undefined;
-            position?: import("./types/position").PopsPosition | undefined;
-            animation?: import("./types/animation").PopsAnimation | undefined;
-            mask?: import("./types/mask").PopsMaskConfig | undefined;
-            forbiddenScroll?: boolean | undefined;
-            lightStyle?: string | undefined;
-            darkStyle?: string | undefined;
-            stopKeyDownEventPropagation?: boolean | undefined;
-            beforeAppendToPageCallBack?: void;
-            drag?: boolean | undefined;
-            dragLimit?: boolean | undefined;
-            dragExtraDistance?: number | undefined;
-            dragMoveCallBack?: void;
-            dragEndCallBack?: void;
+            style?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<(IFunction<string> & string) | null | undefined, "zIndex"> | undefined;
+            zIndex?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<((IFunction<string | number> | null) & IFunction<number>) | undefined, "zIndex"> | undefined;
+            useShadowRoot?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            class?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<string | undefined, "zIndex"> | undefined;
+            only?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            width?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<string | undefined, "zIndex"> | undefined;
+            height?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<string | undefined, "zIndex"> | undefined;
+            position?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<import("./types/position").PopsPosition | undefined, "zIndex"> | undefined;
+            animation?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<import("./types/animation").PopsAnimation | undefined, "zIndex"> | undefined;
+            mask?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<import("./types/mask").PopsMaskConfig | undefined, "zIndex"> | undefined;
+            forbiddenScroll?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            lightStyle?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<string | null | undefined, "zIndex"> | undefined;
+            darkStyle?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<string | null | undefined, "zIndex"> | undefined;
+            stopKeyDownEventPropagation?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            beforeAppendToPageCallBack?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<(($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void) | undefined, "zIndex"> | undefined;
+            drag?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            dragLimit?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<boolean | undefined, "zIndex"> | undefined;
+            dragExtraDistance?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<number | undefined, "zIndex"> | undefined;
+            dragMoveCallBack?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<((moveElement: HTMLElement, left: number, top: number) => void) | undefined, "zIndex"> | undefined;
+            dragEndCallBack?: {
+                zIndex: ((IFunction<string | number> | null) & IFunction<number>) | undefined;
+            } | Omit<((moveElement: HTMLElement, left: number, top: number) => void) | undefined, "zIndex"> | undefined;
         };
     };
     /**

package/dist/types/src/config/GlobalConfig.d.ts

@@ -1,8 +1,8 @@
 import type { PopsGeneralConfig, PopsDragConfig } from "../types/components";
-type EnterReturnType<T> = null | T | (() => T);
+type NullOrFunctionReturnType<T> = null | undefined | IFunction<T>;
 type GlobalConfigOption = {
-    style?: EnterReturnType<string>;
-    zIndex?: EnterReturnType<number> | EnterReturnType<string>;
+    style?: NullOrFunctionReturnType<string>;
+    zIndex?: NullOrFunctionReturnType<number | string>;
 } & Partial<PopsGeneralConfig> & Partial<PopsDragConfig>;
 export declare const GlobalConfig: {
     config: GlobalConfigOption;
@@ -14,26 +14,66 @@ export declare const GlobalConfig: {
      * 获取全局配置
      */
     getGlobalConfig(): {
-        style?: string | undefined;
-        zIndex?: string | number | undefined;
-        useShadowRoot?: boolean | undefined;
-        class?: string | undefined;
-        only?: boolean | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        position?: import("../types/position").PopsPosition | undefined;
-        animation?: import("../types/animation").PopsAnimation | undefined;
-        mask?: import("../types/mask").PopsMaskConfig | undefined;
-        forbiddenScroll?: boolean | undefined;
-        lightStyle?: string | undefined;
-        darkStyle?: string | undefined;
-        stopKeyDownEventPropagation?: boolean | undefined;
-        beforeAppendToPageCallBack?: void;
-        drag?: boolean | undefined;
-        dragLimit?: boolean | undefined;
-        dragExtraDistance?: number | undefined;
-        dragMoveCallBack?: void;
-        dragEndCallBack?: void;
+        style?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<(IFunction<string> & string) | null | undefined, "zIndex"> | undefined;
+        zIndex?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<((IFunction<string | number> | null) & IFunction<number>) | undefined, "zIndex"> | undefined;
+        useShadowRoot?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        class?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<string | undefined, "zIndex"> | undefined;
+        only?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        width?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<string | undefined, "zIndex"> | undefined;
+        height?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<string | undefined, "zIndex"> | undefined;
+        position?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<import("../types/position").PopsPosition | undefined, "zIndex"> | undefined;
+        animation?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<import("../types/animation").PopsAnimation | undefined, "zIndex"> | undefined;
+        mask?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<import("../types/mask").PopsMaskConfig | undefined, "zIndex"> | undefined;
+        forbiddenScroll?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        lightStyle?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<string | null | undefined, "zIndex"> | undefined;
+        darkStyle?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<string | null | undefined, "zIndex"> | undefined;
+        stopKeyDownEventPropagation?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        beforeAppendToPageCallBack?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<(($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void) | undefined, "zIndex"> | undefined;
+        drag?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        dragLimit?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<boolean | undefined, "zIndex"> | undefined;
+        dragExtraDistance?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<number | undefined, "zIndex"> | undefined;
+        dragMoveCallBack?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<((moveElement: HTMLElement, left: number, top: number) => void) | undefined, "zIndex"> | undefined;
+        dragEndCallBack?: {
+            zIndex: GlobalConfigOption["zIndex"];
+        } | Omit<((moveElement: HTMLElement, left: number, top: number) => void) | undefined, "zIndex"> | undefined;
     };
 };
 export {};

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

@@ -5,7 +5,7 @@ export declare const PopsInstanceUtils: {
      */
     getPopsMaxZIndex(deviation?: number): {
         zIndex: number;
-        animElement: HTMLDivElement | null;
+        animElement: HTMLElement | null;
         isOverMaxZIndex: boolean;
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",

package/src/Pops.ts

@@ -24,6 +24,7 @@ import { PopsTooltip } from "./components/tooltip";
 import type { PopsToolTipConfig } from "./components/tooltip/types/index";
 import { GlobalConfig } from "./config/GlobalConfig";
 import { EventEmiter } from "./event/EventEmiter";
+import { PopsInstHandler } from "./handler/PopsInstHandler";
 import { PopsAnimation } from "./PopsAnimation";
 import { PopsCore } from "./PopsCore";
 import { PopsCSS } from "./PopsCSS";
@@ -60,6 +61,8 @@ class Pops {
     InstanceUtils: PopsInstanceUtils,
     /** pops处理float类型使用的工具类 */
     MathFloatUtils: PopsMathFloatUtils,
+    /** 实例处理函数 */
+    PopsInstHandler,
     /** pops.panel中用于处理各个类型的工具 */
     PanelHandlerComponents,
     /** pops.panel中的动画 */

package/src/config/GlobalConfig.ts

@@ -1,10 +1,10 @@
 import type { PopsGeneralConfig, PopsDragConfig } from "../types/components";
 
-type EnterReturnType<T> = null | T | (() => T);
+type NullOrFunctionReturnType<T> = null | undefined | IFunction<T>;
 
 type GlobalConfigOption = {
-  style?: EnterReturnType<string>;
-  zIndex?: EnterReturnType<number> | EnterReturnType<string>;
+  style?: NullOrFunctionReturnType<string>;
+  zIndex?: NullOrFunctionReturnType<number | string>;
 } & Partial<PopsGeneralConfig> &
   Partial<PopsDragConfig>;
 
@@ -25,7 +25,11 @@ export const GlobalConfig = {
    */
   getGlobalConfig() {
     const result: {
-      [P in keyof GlobalConfigOption]: ResultGlobalConfigOption<GlobalConfigOption[P]>;
+      [P in keyof GlobalConfigOption]:
+        | ResultGlobalConfigOption<Omit<GlobalConfigOption[P], "zIndex">>
+        | {
+            zIndex: GlobalConfigOption["zIndex"];
+          };
     } = {};
     Object.keys(GlobalConfig.config).forEach((keyName) => {
       const configValue = Reflect.get(GlobalConfig.config, keyName);
@@ -38,17 +42,20 @@ export const GlobalConfig = {
         }
       } else if (keyName === "zIndex") {
         // 设置zIndex属性
-        let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
-        if (typeof zIndex === "string") {
-          const newIndex = (zIndex = Number(zIndex));
-          if (!isNaN(newIndex)) {
-            result.zIndex = newIndex;
+        result.zIndex = () => {
+          let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
+          if (typeof zIndex === "string") {
+            const newIndex = (zIndex = Number(zIndex));
+            if (!Number.isNaN(newIndex)) {
+              return newIndex;
+            }
+          } else {
+            if (!Number.isNaN(zIndex)) {
+              return zIndex as number;
+            }
           }
-        } else {
-          if (!isNaN(zIndex)) {
-            result.zIndex = zIndex;
-          }
-        }
+          return 0;
+        };
       } else if (keyName === "mask") {
         const mask = GlobalConfig.config.mask == null ? {} : GlobalConfig.config.mask;
         if (typeof mask === "object" && mask != null) {

package/src/css/index.css

@@ -215,6 +215,8 @@ button.pops-header-control i:hover {
 .pops .pops-title p[pops] {
   color: var(--pops-title-color);
   width: 100%;
+  height: 100%;
+  align-content: center;
   overflow: hidden;
   text-indent: 15px;
   text-overflow: ellipsis;

package/src/handler/PopsElementHandler.ts

@@ -328,7 +328,7 @@ export const PopsElementHandler = {
   addLightStyle($parent: HTMLElement | ShadowRoot, style?: string | null) {
     const darkCSS = /*css*/ `
       @media (prefers-color-scheme: light) {
-        ${style}
+        ${style ?? ""}
       }
     `;
     const $css = this.addStyle($parent, darkCSS);
@@ -344,7 +344,7 @@ export const PopsElementHandler = {
   addDarkStyle($parent: HTMLElement | ShadowRoot, style?: string | null) {
     const darkCSS = /*css*/ `
       @media (prefers-color-scheme: dark) {
-        ${style}
+        ${style ?? ""}
       }
     `;
     const $css = this.addStyle($parent, darkCSS);

package/src/handler/PopsHandler.ts

@@ -615,7 +615,10 @@ export const PopsHandler = {
         );
       }
     }
-    config = this.handleZIndex(config);
+    if (type !== "rightClickMenu") {
+      // rightClickMenu在配置处理时就处理了一次，这里不需要重复处理
+      config = this.handleZIndex(config);
+    }
 
     return config;
   },
@@ -629,15 +632,11 @@ export const PopsHandler = {
     const originZIndex = config.zIndex;
     const handler = () => {
       let deviation = 100;
-      if (originZIndex.toString() !== handler.toString()) {
-        // 避免叠加覆盖
-        deviation += PopsHandler.getTargerOrFunctionValue(originZIndex) ?? 0;
-      }
+      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;
+      const pointZIndex = popsUtils.getMaxZIndexNodeInfoFromPoint(deviation)[0]?.zIndex ?? 0;
+      maxZIndex = Math.max(maxZIndex, pointZIndex);
+      return maxZIndex === deviation ? maxZIndex : maxZIndex + deviation;
     };
     config.zIndex = handler;
     return config;

package/src/utils/PopsInstanceUtils.ts

@@ -1,5 +1,6 @@
 import { PopsInstData } from "../PopsInst";
 import type { PopsInstStoreType } from "../types/main";
+import { popsUtils } from "./PopsUtils";
 
 export const PopsInstanceUtils = {
   /**
@@ -15,43 +16,21 @@ export const PopsInstanceUtils = {
     // 当前页面最大的z-index
     let zIndex = 0;
     // 当前的最大z-index的元素，调试使用
-    let maxZIndexNode = null as HTMLDivElement | null;
+    let maxZIndexNode = null as HTMLElement | null;
 
-    /**
-     * 元素是否可见
-     * @param $el
-     * @param $css
-     */
-    function isVisibleNode($el: Element, $css: CSSStyleDeclaration): boolean {
-      let flag = true;
-      if (typeof $el.checkVisibility === "function") {
-        flag = $el.checkVisibility();
-      } else {
-        flag =
-          $css.position !== "static" && $css.display !== "none" && $css.visibility !== "hidden" && $css.opacity !== "0";
-      }
-      if (flag) {
-        // css样式上可见
-        // 再判断宽高
-        const rect = $el.getBoundingClientRect();
-        // 确保该元素的中心点在屏幕内
-        flag = rect.width > 0 && rect.height > 0 && rect.x > 0 && rect.y > 0;
-      }
-      return flag;
-    }
     Object.keys(PopsInstData).forEach((instKeyName) => {
       const instData = PopsInstData[instKeyName as PopsInstStoreType];
       for (let index = 0; index < instData.length; index++) {
         const inst = instData[index];
-        const nodeStyle = window.getComputedStyle(inst.$anim);
         // 不对position为static和display为none的元素进行获取它们的z-index
-        if (isVisibleNode(inst.$anim, nodeStyle)) {
-          const nodeZIndex = parseInt(nodeStyle.zIndex);
-          if (!isNaN(nodeZIndex)) {
-            if (nodeZIndex > zIndex) {
-              zIndex = nodeZIndex;
-              maxZIndexNode = inst.$anim;
-            }
+        const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
+        const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
+        const maxNodeZIndexInfo = nodeZIndexInfoList[0];
+        if (maxNodeZIndexInfo) {
+          const nodeZIndex = maxNodeZIndexInfo.zIndex;
+          if (nodeZIndex > zIndex) {
+            zIndex = nodeZIndex;
+            maxZIndexNode = maxNodeZIndexInfo.node! || maxNodeZIndexInfo.positionNode!;
           }
         }
       }