@whitesev/pops 4.2.2 → 4.2.4

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

@@ -36,6 +36,7 @@ declare class Pops {
             panelCSS: string;
             rightClickMenu: string;
             panelComponents_Select: string;
+            skeletonCSS: string;
         };
         /** icon图标的svg代码 */
         iconSVG: {
@@ -940,6 +941,24 @@ declare class Pops {
                         time: number;
                         callback: (...args: any[]) => IPromise<void>;
                     }[]>;
+                    getOrInsert: (key: string, defaultValue: {
+                        type: import("./types/main").PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[]) => {
+                        type: import("./types/main").PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[];
+                    getOrInsertComputed: (key: string, callback: (key: string) => {
+                        type: import("./types/main").PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[]) => {
+                        type: import("./types/main").PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[];
                     [Symbol.iterator]: () => MapIterator<[string, {
                         type: import("./types/main").PopsType;
                         time: number;

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

@@ -33,4 +33,16 @@ export declare const PopsCSS: {
     rightClickMenu: string;
     /** pops.panel的select组件 */
     panelComponents_Select: string;
+    /**
+     * pops.skeleton
+     *
+     * 需要设置元素className为`pops-skeleton-item`
+     *
+     * 支持以下属性
+     *
+     * + `data-animated`: 加载中的动画
+     * + `data-circle`: 圆形
+     * + `data-img`: 头像图片，需要在它内部添加图片的svg `PopsIcon.getIcon("picture")`
+     */
+    skeletonCSS: string;
 };

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

@@ -255,6 +255,24 @@ export declare const PopsTooltip: {
                         time: number;
                         callback: (...args: any[]) => IPromise<void>;
                     }[]>;
+                    getOrInsert: (key: string, defaultValue: {
+                        type: PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[]) => {
+                        type: PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[];
+                    getOrInsertComputed: (key: string, callback: (key: string) => {
+                        type: PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[]) => {
+                        type: PopsType;
+                        time: number;
+                        callback: (...args: any[]) => IPromise<void>;
+                    }[];
                     [Symbol.iterator]: () => MapIterator<[string, {
                         type: PopsType;
                         time: number;

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

@@ -178,7 +178,7 @@ declare class PopsUtils {
         x: number;
         y: number;
     }>>, deviation?: number): {
-        /** 处理了偏移量后的z-index值 */
+        /** 处理了偏移量和阈值比较后的z-index值 */
         zIndex: number;
         /** 原始z-index值 */
         originZIndex: number;
@@ -200,7 +200,7 @@ declare class PopsUtils {
      * Utils.getMaxZIndexNodeInfoFromPoint(20);
      */
     getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
-        /** 处理了偏移量后的z-index值 */
+        /** 处理了偏移量和阈值比较后的z-index值 */
         zIndex: number;
         /** 原始z-index值 */
         originZIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "4.2.2",
+  "version": "4.2.4",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",
@@ -44,27 +44,27 @@
     "any-touch": "^2.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "12.3.0",
     "browserslist": "^4.28.1",
-    "caniuse-lite": "^1.0.30001770",
-    "eslint": "^9.39.2",
+    "caniuse-lite": "^1.0.30001781",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-compat": "^6.0.2",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-compat": "^7.0.1",
+    "eslint-plugin-prettier": "^5.5.5",
     "globals": "^16.5.0",
-    "oxfmt": "^0.36.0",
-    "oxlint": "1.51.0",
-    "rollup": "^4.54.0",
+    "oxfmt": "^0.42.0",
+    "oxlint": "1.57.0",
+    "rollup": "^4.60.0",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-import-css": "^4.1.2",
+    "rollup-plugin-import-css": "^4.2.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.57.2"
   },
   "scripts": {
     "lint": "oxlint .",

package/src/PopsCSS.ts

@@ -15,6 +15,7 @@ import folderCSS from "./components/folder/index.css";
 import panelCSS from "./components/panel/index.css";
 import rightClickMenuCSS from "./components/rightClickMenu/index.css";
 import panelComponents_Select_CSS from "./components/panel/css/components-select.css";
+import skeletonCSS from "./css/skeleton.css";
 
 export const PopsCSS = {
   /** 主CSS */
@@ -51,4 +52,16 @@ export const PopsCSS = {
   rightClickMenu: rightClickMenuCSS,
   /** pops.panel的select组件 */
   panelComponents_Select: panelComponents_Select_CSS,
+  /**
+   * pops.skeleton
+   *
+   * 需要设置元素className为`pops-skeleton-item`
+   *
+   * 支持以下属性
+   *
+   * + `data-animated`: 加载中的动画
+   * + `data-circle`: 圆形
+   * + `data-img`: 头像图片，需要在它内部添加图片的svg `PopsIcon.getIcon("picture")`
+   */
+  skeletonCSS: skeletonCSS,
 };

package/src/components/alert/index.ts

@@ -49,6 +49,10 @@ export const PopsAlert = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "alertCSS",
         css: PopsCSS.alertCSS,

package/src/components/confirm/index.ts

@@ -49,6 +49,10 @@ export const PopsConfirm = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "confirmCSS",
         css: PopsCSS.confirmCSS,

package/src/components/drawer/index.ts

@@ -49,6 +49,10 @@ export const PopsDrawer = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "drawerCSS",
         css: PopsCSS.drawerCSS,

package/src/components/folder/index.ts

@@ -52,6 +52,10 @@ export const PopsFolder = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "folderCSS",
         css: PopsCSS.folderCSS,

package/src/components/iframe/index.ts

@@ -54,6 +54,10 @@ export const PopsIframe = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "iframeCSS",
         css: PopsCSS.iframeCSS,

package/src/components/loading/index.ts

@@ -37,6 +37,7 @@ export const PopsLoading = {
                 <style data-model-name="index">${PopsCSS.index}</style>
                 <style data-model-name="anim">${PopsCSS.anim}</style>
                 <style data-model-name="common">${PopsCSS.common}</style>
+                <style data-model-name="skeleton">${PopsCSS.skeletonCSS}</style>
                 `
                 : ""
             }

package/src/components/panel/index.ts

@@ -50,6 +50,10 @@ export const PopsPanel = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "panelCSS",
         css: PopsCSS.panelCSS,

package/src/components/prompt/index.ts

@@ -49,6 +49,10 @@ export const PopsPrompt = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "promptCSS",
         css: PopsCSS.promptCSS,

package/src/components/rightClickMenu/index.ts

@@ -45,6 +45,10 @@ export const PopsRightClickMenu = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "rightClickMenu",
         css: PopsCSS.rightClickMenu,

package/src/components/searchSuggestion/index.ts

@@ -41,6 +41,10 @@ export const PopsSearchSuggestion = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
     ]);
 
     // 添加自定义style

package/src/components/tooltip/index.ts

@@ -591,6 +591,10 @@ export const PopsTooltip = {
         name: "common",
         css: PopsCSS.common,
       },
+      {
+        name: "skeleton",
+        css: PopsCSS.skeletonCSS,
+      },
       {
         name: "tooltipCSS",
         css: PopsCSS.tooltipCSS,

package/src/css/skeleton.css

@@ -0,0 +1,43 @@
+.pops-skeleton-item {
+  --el-skeleton-color: #f0f2f5;
+  --el-skeleton-to-color: #e6e8eb;
+  width: 100%;
+  height: 18px;
+  border-radius: 4px;
+  background: var(--el-skeleton-color);
+  display: inline-block;
+}
+.pops-skeleton-item[data-circle] {
+  border-radius: 50%;
+}
+.pops-skeleton-item[data-img] {
+  width: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px;
+}
+.pops-skeleton-item[data-img] svg {
+  color: #dcdfe6;
+  fill: currentcolor;
+  width: 22%;
+  height: 22%;
+}
+.pops-skeleton-item[data-animated] {
+  background: linear-gradient(
+    90deg,
+    var(--el-skeleton-color) 25%,
+    var(--el-skeleton-to-color) 37%,
+    var(--el-skeleton-color) 63%
+  );
+  background-size: 400% 100%;
+  animation: pops-el-skeleton-loading 1.4s ease infinite;
+}
+@keyframes pops-el-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}

package/src/utils/PopsInstanceUtils.ts

@@ -8,8 +8,8 @@ export const PopsInstanceUtils = {
    * 获取pops所有弹窗中的最大的z-index
    * @param deviation
    */
-  getPopsMaxZIndex(deviation: number = 1) {
-    deviation = Number.isNaN(deviation) ? 1 : deviation;
+  getPopsMaxZIndex(deviation: number = 10) {
+    deviation = Number.isNaN(deviation) ? 10 : deviation;
     // 最大值 2147483647
     // const browserMaxZIndex = Math.pow(2, 31) - 1;
     // 比较值 2000000000
@@ -25,8 +25,7 @@ export const PopsInstanceUtils = {
         const inst = instData[index];
         // 不对position为static和display为none的元素进行获取它们的z-index
         const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
-        const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
-        const maxNodeZIndexInfo = nodeZIndexInfoList[0];
+        const maxNodeZIndexInfo = popsUtils.getMaxZIndexNodeInfoFromPoint($elList)[0];
         if (maxNodeZIndexInfo) {
           const nodeZIndex = maxNodeZIndexInfo.zIndex;
           if (nodeZIndex > zIndex) {

package/src/utils/PopsUtils.ts

@@ -436,7 +436,7 @@ class PopsUtils {
     $el?: IFunction<IArray<HTMLElement> | IArray<{ x: number; y: number }>>,
     deviation?: number
   ): {
-    /** 处理了偏移量后的z-index值 */
+    /** 处理了偏移量和阈值比较后的z-index值 */
     zIndex: number;
     /** 原始z-index值 */
     originZIndex: number;
@@ -458,7 +458,7 @@ class PopsUtils {
    * Utils.getMaxZIndexNodeInfoFromPoint(20);
    */
   getMaxZIndexNodeInfoFromPoint(deviation: IFunction<number>): {
-    /** 处理了偏移量后的z-index值 */
+    /** 处理了偏移量和阈值比较后的z-index值 */
     zIndex: number;
     /** 原始z-index值 */
     originZIndex: number;
@@ -475,7 +475,7 @@ class PopsUtils {
     $el?: IFunction<IArray<HTMLElement> | number | IArray<{ x: number; y: number }>>,
     deviation?: number
   ): {
-    /** 处理了偏移量后的z-index值 */
+    /** 处理了偏移量和阈值比较后的z-index值 */
     zIndex: number;
     /** 原始z-index值 */
     originZIndex: number;
@@ -498,6 +498,10 @@ class PopsUtils {
     if (typeof deviation !== "number" || Number.isNaN(deviation)) {
       deviation = 10;
     }
+    // 最大值 2147483647
+    // const maxZIndex = Math.pow(2, 31) - 1;
+    // 比较值 2000000000
+    const maxZIndexCompare = 2 * Math.pow(10, 9);
     /** 坐标偏移 */
     const positionDistance = 10;
     const defaultCalcPostion: {
@@ -592,9 +596,14 @@ class PopsUtils {
             left: maxRect.left,
           };
         }
+        const calcZIndex = zIndex + deviation;
+        if (calcZIndex >= maxZIndexCompare) {
+          // 不要超过最大值
+          return;
+        }
         return {
           /** 计算偏移量后的z-index值 */
-          zIndex: zIndex + deviation,
+          zIndex: calcZIndex,
           /** 获取到的最大的z-index值 */
           originZIndex: zIndex,
           /** 拥有最大z-index的元素 */