@whitesev/pops 2.0.1 → 2.0.3

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

@@ -31,8 +31,8 @@ export declare const PopsElementHandler: {
     getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">): string;
     /**
      * 获取标题style
-     * @param type
-     * @param config
+     * @param type 弹窗类型
+     * @param config 弹窗配置
      */
     getHeaderStyle(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): {
         headerStyle: string;
@@ -40,8 +40,8 @@ export declare const PopsElementHandler: {
     };
     /**
      * 获取内容style
-     * @param type
-     * @param config
+     * @param type 弹窗类型
+     * @param config 弹窗配置
      */
     getContentStyle(type: PopsTypeSupportContent, config: PopsSupportContent[keyof PopsSupportContent]): {
         contentStyle: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/Pops.ts

@@ -84,7 +84,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.3.2",
+		version: "2025.5.1",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,

package/src/components/alert/index.ts

@@ -2,11 +2,11 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
-import type { PopsMode } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertConfig } from "./config";
+import type { PopsMode } from "../../types/main";
 import type { PopsAlertDetails } from "./indexType";
 
 export class PopsAlert {
@@ -48,25 +48,18 @@ export class PopsAlert {
 			PopsType,
 			config,
 			/*html*/ `
-			<div 
-				class="pops-alert-title"
-				style="text-align: ${config.title.position};
-				${headerStyle}">
-				${
-					config.title.html
-						? config.title.text
-						: `<p pops style="${headerPStyle}">${config.title.text}</p>`
-				}
-				${headerBtnHTML}
-			</div>
-			<div class="pops-alert-content" style="${contentStyle}">
-				${
-					config.content.html
-						? config.content.text
-						: `<p pops style="${contentPStyle}">${config.content.text}</p>`
-				}
-			</div>
-			${bottomBtnHTML}`,
+			<div class="pops-alert-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
+				config.title.html
+					? config.title.text
+					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+			}${headerBtnHTML}</div>
+			<div class="pops-alert-content" style="${contentStyle}">${
+				config.content.html
+					? config.content.text
+					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
 		);

package/src/components/confirm/index.ts

@@ -50,26 +50,16 @@ export class PopsConfirm {
 			/*html*/ `
             <div class="pops-confirm-title" style="text-align: ${
 							config.title.position
-						};${headerStyle}">
-                            ${
-															config.title.html
-																? config.title.text
-																: `<p pops style="${headerPStyle}">${config.title.text}</p>`
-														}
-                ${headerBtnHTML}
-                        </div>
-                        <div class="pops-confirm-content" style="${contentStyle}">
-                ${
-									config.content.html
-										? config.content.text
-										: `<p pops style="${contentPStyle}">${config.content.text}</p>`
-								}
-                
-                        </div>
-
-						
-                        ${bottomBtnHTML}
-            `,
+						};${headerStyle}">${
+				config.title.html
+					? config.title.text
+					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+			}${headerBtnHTML}</div>
+                        <div class="pops-confirm-content" style="${contentStyle}">${
+				config.content.html
+					? config.content.text
+					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
 		);

package/src/components/drawer/index.ts

@@ -49,34 +49,19 @@ export class PopsDrawer {
 			/*html*/ `
             ${
 							config.title.enable
-								? `
-            <div class="pops-${PopsType}-title" style="${headerStyle}">
-                ${
-									config.title.html
-										? config.title.text
-										: `<p 
-                            pops
-                            style="
-                                width: 100%;
-                                text-align: ${config.title.position};
-                                ${headerPStyle}">${config.title.text}</p>`
-								}
-                ${headerBtnHTML}
-            </div>
-            `
+								? /*html*/ `
+            <div class="pops-${PopsType}-title" style="${headerStyle}">${
+										config.title.html
+											? config.title.text
+											: /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
+								  }${headerBtnHTML}</div>`
 								: ""
 						}
-            
-            <div class="pops-${PopsType}-content" style="${contentStyle}">
-                ${
-									config.content.html
-										? config.content.text
-										: `<p pops style="${contentPStyle}">${config.content.text}</p>`
-								}
-            </div>
-
-            ${bottomBtnHTML}
-            `,
+            <div class="pops-${PopsType}-content" style="${contentStyle}">${
+				config.content.html
+					? config.content.text
+					: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
 		);

package/src/components/folder/index.ts

@@ -120,20 +120,17 @@ export class PopsFolder {
 			guid,
 			PopsType,
 			config,
-			`
+			/*html*/ `
             <div class="pops-folder-title" style="text-align: ${
 							config.title.position
-						};${headerStyle}">
-                            ${
-															config.title.html
-																? config.title.text
-																: `<p pops style="${headerPStyle}">${config.title.text}</p>`
-														}
-                ${headerBtnHTML}
-                        </div>
-                        <div class="pops-folder-content ${
-													pops.isPhone() ? "pops-mobile-folder-content" : ""
-												}">
+						};${headerStyle}">${
+				config.title.html
+					? config.title.text
+					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+			}${headerBtnHTML}</div>
+			<div class="pops-folder-content ${
+				pops.isPhone() ? "pops-mobile-folder-content" : ""
+			}">
                 <div class="pops-folder-list">
                     <div class="pops-folder-file-list-breadcrumb">
                     <div class="pops-folder-file-list-breadcrumb-primary">
@@ -145,7 +142,6 @@ export class PopsFolder {
                     <div class="pops-folder-list-table__header-div">
                     <table class="pops-folder-list-table__header">
                         <colgroup>
-                        <!-- <col width="8%"> --!>
                         <col width="52%">
                         <col width="24%">
                         <col width="16%">
@@ -216,7 +212,6 @@ export class PopsFolder {
                     <div class="pops-folder-list-table__body-div">
                     <table class="pops-folder-list-table__body">
                         <colgroup>
-                        <!-- <col width="8%"> --!>
                         ${
 													pops.isPhone()
 														? `<col width="100%">`
@@ -233,9 +228,7 @@ export class PopsFolder {
                     </table>
                     </div>
                 </div>
-            </div>
-            ${bottomBtnHTML}
-            `,
+            </div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
 		);
@@ -495,9 +488,7 @@ export class PopsFolder {
 				<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
 					<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
 					<div>
-						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
-							${fileName}
-						</a>
+						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
 						<span>${latestTime} ${fileSize}</span>
 					</div>
 				</div>

package/src/components/iframe/index.ts

@@ -57,31 +57,22 @@ export class PopsIframe {
 			PopsType,
 			config,
 			/*html*/ `
-            <div 
-                class="pops-iframe-title"
-                style="text-align: ${config.title.position};${headerStyle}"
-            >
-                ${
-									config.title.html
-										? titleText
-										: `<p pops style="${headerPStyle}">${titleText}</p>`
-								}
-                ${headerBtnHTML}
-            </div>
-                        <div class="pops-iframe-content">
+            <div class="pops-iframe-title" style="text-align: ${
+							config.title.position
+						};${headerStyle}">${
+				config.title.html
+					? titleText
+					: `<p pops style="${headerPStyle}">${titleText}</p>`
+			}${headerBtnHTML}</div>
+			<div class="pops-iframe-content">
                 <div class="pops-iframe-content-global-loading"></div>
-                <iframe
-                        src="${config.url}"
-                        pops
-                        ${
-													config.sandbox
-														? "sandbox='allow-forms allow-same-origin allow-scripts'"
-														: ""
-												}>
+                <iframe src="${config.url}" pops ${
+				config.sandbox
+					? "sandbox='allow-forms allow-same-origin allow-scripts'"
+					: ""
+			}>
                 </iframe>
-                </div>
-                ${config.loading.enable ? iframeLoadingHTML : ""}
-            `,
+			</div>${config.loading.enable ? iframeLoadingHTML : ""}`,
 			"",
 			zIndex
 		);

package/src/components/loading/index.ts

@@ -30,23 +30,21 @@ export class PopsLoading {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-loading-content">
-                ${
-									config.addIndexCSS
-										? `
+            <div class="pops-loading-content">${
+							config.addIndexCSS
+								? /*html*/ `
                 <style data-model-name="index">${pops.config.cssText.index}</style>
                 <style data-model-name="anim">${pops.config.cssText.anim}</style>
                 <style data-model-name="common">${pops.config.cssText.common}</style>
                 `
-										: ""
-								}
+								: ""
+						}
                 <style data-model-name="loadingCSS">
                     ${pops.config.cssText.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
-            <p pops style="${contentPStyle}">${config.content.text}</p>
-            </div>
-            `,
+            	<p pops style="${contentPStyle}">${config.content.text}</p>
+            </div>`,
 			"",
 			zIndex
 		);

package/src/components/panel/PanelHandleContentDetails.ts

@@ -188,7 +188,12 @@ export const PanelHandleContentDetails = () => {
 				return;
 			}
 			Object.keys(props).forEach((propName) => {
-				Reflect.set(element, propName, props[propName]);
+				let value = props[propName];
+				if (propName === "innerHTML") {
+					PopsSafeUtils.setSafeHTML(element, value);
+					return;
+				}
+				Reflect.set(element, propName, value);
 			});
 		},
 		/**
@@ -253,9 +258,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-switch">
 					<input class="pops-panel-switch__input" type="checkbox">
 					<span class="pops-panel-switch__core">
@@ -375,9 +378,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-slider">
 					<input type="range" min="${formConfig.min}" max="${formConfig.max}">
 				</div>
@@ -453,9 +454,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text" style="flex: 1;">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-slider pops-slider-width">
 					<div class="pops-slider__runway">
 						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
@@ -1048,9 +1047,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-input pops-user-select-none">
 					<input type="${inputType}" placeholder="${formConfig.placeholder}">
 				</div>
@@ -1265,12 +1262,11 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${
+						formConfig.text
+					}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-textarea">
-					<textarea placeholder="${formConfig.placeholder ?? ""}">
-				</textarea>
+					<textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
 				</div>
 			`
 			);
@@ -1360,9 +1356,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select pops-user-select-none">
 					<select></select>
 				</div>
@@ -1596,9 +1590,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select-multiple">
 					<div class="el-select__wrapper">
 						<div class="el-select__selection">
@@ -1926,9 +1918,7 @@ export const PanelHandleContentDetails = () => {
 						function createSelectItemElement(dataInfo: { text: string }) {
 							let $item = popsDOMUtils.createElement("li", {
 								className: "select-item",
-								innerHTML: /*html*/ `
-									<span>${dataInfo.text}</span>
-								`,
+								innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
 							});
 							Reflect.set($item, "data-info", dataInfo);
 							return $item;
@@ -2226,9 +2216,7 @@ export const PanelHandleContentDetails = () => {
 				liElement,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-button">
 					<button class="pops-panel-button_inner">
 						<i class="pops-bottom-icon"></i>
@@ -2404,13 +2392,8 @@ export const PanelHandleContentDetails = () => {
 				$li,
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-					${leftDescriptionText}
-				</div>
-				<div class="pops-panel-deepMenu">
-					${rightText}
-					${arrowRightIconHTML}
-				</div>
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
 				`
 			);
 			const PopsPanelDeepMenu = {

package/src/components/panel/index.ts

@@ -49,17 +49,13 @@ export class PopsPanel {
 			PopsType,
 			config,
 			/*html*/ `
-			<div 
-				class="pops-${PopsType}-title"
-				style="text-align: ${config.title.position};
-				${headerStyle}">
-				${
-					config.title.html
-						? config.title.text
-						: `<p pops style="${headerPStyle}">${config.title.text}</p>`
-				}
-				${headerBtnHTML}
-			</div>
+			<div class="pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
+				config.title.html
+					? config.title.text
+					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+			}${headerBtnHTML}</div>
 			<div class="pops-${PopsType}-content">
 				<aside class="pops-${PopsType}-aside">
 					<ul></ul>

package/src/components/prompt/index.ts

@@ -51,29 +51,22 @@ export class PopsPrompt {
 			/*html*/ `
             <div class="pops-prompt-title" style="text-align: ${
 							config.title.position
-						};${headerStyle}">
-            ${
-							config.title.html
-								? config.title.text
-								: `<p pops style="${headerPStyle}">${config.title.text}</p>`
-						}
-            ${headerBtnHTML}
-            </div>
-            <div class="pops-prompt-content" style="${contentPStyle}">
-            ${
-							config.content.row
-								? '<textarea pops="" placeholder="' +
-								  config.content.placeholder +
-								  '"></textarea>'
-								: '<input pops="" placeholder="' +
-								  config.content.placeholder +
-								  '" type="' +
-								  (config.content.password ? "password" : "text") +
-								  '">'
-						}
-            </div>
-        	${bottomBtnHTML}
-            `,
+						};${headerStyle}">${
+				config.title.html
+					? config.title.text
+					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+			}${headerBtnHTML}</div>
+            <div class="pops-prompt-content" style="${contentPStyle}">${
+				config.content.row
+					? '<textarea pops="" placeholder="' +
+					  config.content.placeholder +
+					  '"></textarea>'
+					: '<input pops="" placeholder="' +
+					  config.content.placeholder +
+					  '" type="' +
+					  (config.content.password ? "password" : "text") +
+					  '">'
+			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
 		);

package/src/components/rightClickMenu/index.ts

@@ -2,11 +2,11 @@ import { OriginPrototype } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
-import type { PopsIcon } from "../../types/icon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { rightClickMenuConfig as PopsRightClickMenuConfig } from "./config";
+import type { PopsIcon } from "../../types/icon";
 import type {
 	PopsRightClickMenuDataDetails,
 	PopsRightClickMenuDetails,
@@ -447,7 +447,7 @@ export class PopsRightClickMenu {
 						let iconSVGHTML =
 							pops.config.iconSVG[item.icon as PopsIcon] ?? item.icon;
 						let iconElement = popsUtils.parseTextToDOM(
-							`<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
+							/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
 						);
 						menuLiElement.appendChild(iconElement);
 					}
@@ -473,11 +473,13 @@ export class PopsRightClickMenu {
 								return;
 							}
 							function removeElement(element: HTMLElement) {
-								element.querySelectorAll("ul li").forEach((ele) => {
-									if ((ele as any)?.__menuData__?.child) {
-										removeElement((ele as any).__menuData__.child);
-									}
-								});
+								element
+									.querySelectorAll<HTMLLIElement>("ul li")
+									.forEach((ele) => {
+										if ((ele as any)?.__menuData__?.child) {
+											removeElement((ele as any).__menuData__.child);
+										}
+									});
 								element.remove();
 							}
 							/* 遍历根元素的上的__menuData__.child，判断 */

package/src/components/searchSuggestion/index.ts

@@ -2,10 +2,10 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsSearchSuggestionDetails } from "./indexType";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
+import type { PopsSearchSuggestionDetails } from "./indexType";
 
 export class PopsSearchSuggestion {
 	constructor(details: PopsSearchSuggestionDetails) {
@@ -105,9 +105,9 @@ export class PopsSearchSuggestion {
 						<style data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
-						<ul class="pops-${PopsType}-search-suggestion-hint">
-							${config.toSearhNotResultHTML}
-						</ul>
+						<ul class="pops-${PopsType}-search-suggestion-hint">${
+							config.toSearhNotResultHTML
+						}</ul>
          				 `,
 					},
 					{
@@ -188,14 +188,9 @@ export class PopsSearchSuggestion {
 					className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
 					"data-index": index,
 					"data-value": SearchSuggestion.getItemDataValue(data),
-					innerHTML: `
-          			${config.getItemHTML(data)}
-          			${
-									config.deleteIcon.enable
-										? SearchSuggestion.getDeleteIconHTML()
-										: ""
-								}
-          			`,
+					innerHTML: `${config.getItemHTML(data)}${
+						config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""
+					}`,
 				});
 			},
 			/**
@@ -514,7 +509,7 @@ export class PopsSearchSuggestion {
 			 */
 			removePromptsInSearch() {
 				SearchSuggestion.$el.$hintULContainer
-					.querySelector(
+					.querySelector<HTMLLIElement>(
 						`li.pops-${PopsType}-search-suggestion-hint-searching-item`
 					)
 					?.remove();