@whitesev/pops 4.2.3 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "4.2.3",
+  "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.37.0",
-    "oxlint": "1.52.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%;
+  }
+}