@whitesev/pops 2.2.0 → 2.2.2

package/src/components/panel/index.ts

@@ -8,12 +8,13 @@ import { PopsPanelConfig } from "./config";
 import { PanelHandlerComponents } from "./handlerComponents";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 
 export const PopsPanel = {
 	init(details: PopsPanelDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "panel";
+		const popsType: PopsType = "panel";
 
 		let config: Required<PopsPanelDetails> = PopsPanelConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -21,7 +22,7 @@ export const PopsPanel = {
 		if (details && Array.isArray(details.content)) {
 			config.content = details.content;
 		}
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -59,32 +60,32 @@ export const PopsPanel = {
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-content pops-${PopsType}-content">
-				<aside class="pops-${PopsType}-aside">
-					<ul class="pops-${PopsType}-aside-top-container"></ul>
-					<ul class="pops-${PopsType}-aside-bottom-container"></ul>
+			<div class="pops-content pops-${popsType}-content">
+				<aside class="pops-${popsType}-aside">
+					<ul class="pops-${popsType}-aside-top-container"></ul>
+					<ul class="pops-${popsType}-aside-bottom-container"></ul>
 				</aside>
-				<section class="pops-${PopsType}-container">
-					<ul class="pops-${PopsType}-container-header-ul"></ul>
-					<ul class="pops-${PopsType}-container-main-ul"></ul>
+				<section class="pops-${popsType}-container">
+					<ul class="pops-${popsType}-container-header-ul"></ul>
+					<ul class="pops-${popsType}-container-main-ul"></ul>
 				</section>
 			</div>`,
 			"",
@@ -102,7 +103,7 @@ export const PopsPanel = {
 			contentElement: $content,
 			contentAsideElement: $contentAside,
 			contentSectionContainerElement: $contentSectionContainer,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		if (config.isMobile || popsUtils.isPhone()) {
 			popsDOMUtils.addClassName($pops, config.mobileClassName);
 		}
@@ -118,7 +119,7 @@ export const PopsPanel = {
 		/* 遮罩层元素 */
 		if (config.mask.enable) {
 			let { maskElement } = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -133,7 +134,7 @@ export const PopsPanel = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 			$pops,
 			$mask!,
@@ -171,7 +172,7 @@ export const PopsPanel = {
 			},
 		});
 
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 			animElement: $anim,
 			popsElement: $pops,

package/src/components/prompt/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -12,12 +13,12 @@ export const PopsPrompt = {
 	init(details: PopsPromptDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "prompt";
+		const popsType: PopsType = "prompt";
 
 		let config = PopsPromptConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -55,29 +56,29 @@ export const PopsPrompt = {
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
-		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let { contentPStyle } = PopsElementHandler.getContentStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+            <div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-            <div class="pops-content pops-${PopsType}-content" style="${contentPStyle}">${
+            <div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${
 				config.content.row
 					? '<textarea name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
@@ -105,7 +106,7 @@ export const PopsPrompt = {
 			btnCancelElement: $btnCancel,
 			btnOtherElement: $btnOther,
 			titleElement: $title,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		/**
 		 * 遮罩层元素
 		 */
@@ -119,7 +120,7 @@ export const PopsPrompt = {
 		if (config.mask.enable) {
 			// 启用遮罩层
 			let _handleMask_ = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -132,7 +133,7 @@ export const PopsPrompt = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 
 			$pops!,
@@ -187,7 +188,7 @@ export const PopsPrompt = {
 		if ($mask != null) {
 			$anim.after($mask);
 		}
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 			animElement: $anim,
 

package/src/components/rightClickMenu/index.ts

@@ -11,17 +11,18 @@ import type {
 } from "./types";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
+import type { PopsType } from "../../types/main";
 
 export const PopsRightClickMenu = {
 	init(details: PopsRightClickMenuDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "rightClickMenu";
+		const popsType: PopsType = "rightClickMenu";
 
 		let config = PopsRightClickMenuConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 		if (config.target == null) {
 			throw new Error("config.target 不能为空");
 		}
@@ -76,7 +77,7 @@ export const PopsRightClickMenu = {
 					return;
 				}
 				let $click = event.target as HTMLElement;
-				if ($click.closest(`.pops-${PopsType}`)) {
+				if ($click.closest(`.pops-${popsType}`)) {
 					return;
 				}
 				if (
@@ -97,7 +98,7 @@ export const PopsRightClickMenu = {
 					return;
 				}
 				let $click = event.target as HTMLElement;
-				if ($click.closest(`.pops-${PopsType}`)) {
+				if ($click.closest(`.pops-${popsType}`)) {
 					return;
 				}
 				PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
@@ -167,7 +168,7 @@ export const PopsRightClickMenu = {
 				if (config.preventDefault) {
 					popsDOMUtils.preventEvent(event);
 				}
-				PopsHandler.handleOnly(PopsType, config);
+				PopsHandler.handleOnly(popsType, config);
 				if (PopsContextMenu.rootElement) {
 					PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
 				}
@@ -178,14 +179,14 @@ export const PopsRightClickMenu = {
 				);
 				PopsContextMenu.rootElement = rootElement;
 				if (config.only) {
-					PopsHandler.handlePush(PopsType, {
+					PopsHandler.handlePush(popsType, {
 						$shadowRoot: $shadowRoot,
 						$shadowContainer: $shadowContainer,
 						guid: guid,
 						animElement: rootElement,
 						popsElement: rootElement,
-						beforeRemoveCallBack(layerCommonConfig) {
-							PopsContextMenu.closeAllMenu(layerCommonConfig.popsElement);
+						beforeRemoveCallBack(instCommonConfig) {
+							PopsContextMenu.closeAllMenu(instCommonConfig.popsElement);
 						},
 					});
 				}
@@ -241,7 +242,7 @@ export const PopsRightClickMenu = {
 					);
 					element.remove();
 				}
-				if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
+				if (element.classList.contains(`pops-${popsType}-anim-show`)) {
 					/* 有动画 */
 					popsDOMUtils.on(
 						element,
@@ -251,7 +252,7 @@ export const PopsRightClickMenu = {
 							capture: true,
 						}
 					);
-					element.classList.remove(`pops-${PopsType}-anim-show`);
+					element.classList.remove(`pops-${popsType}-anim-show`);
 				} else {
 					/* 无动画 */
 					element.remove();
@@ -283,7 +284,7 @@ export const PopsRightClickMenu = {
 			 */
 			getMenuContainerElement(isChildren: boolean) {
 				let $menu = popsDOMUtils.createElement("div", {
-					className: `pops-${PopsType}`,
+					className: `pops-${popsType}`,
 					innerHTML: /*html*/ `
 					<ul></ul>
 					`,
@@ -297,7 +298,7 @@ export const PopsRightClickMenu = {
 				}
 				/* 添加动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName($menu, `pops-${PopsType}-anim-grid`);
+					popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
 				}
 				return $menu;
 			},
@@ -456,7 +457,7 @@ export const PopsRightClickMenu = {
 				});
 				/* 过渡动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
+					popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
 				}
 				return menuElement;
 			},
@@ -518,7 +519,7 @@ export const PopsRightClickMenu = {
 				popsDOMUtils.css(menuElement, { ...offset, display: "" });
 				/* 过渡动画 */
 				if (config.isAnimation) {
-					popsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
+					popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
 				}
 				return menuElement;
 			},
@@ -546,7 +547,7 @@ export const PopsRightClickMenu = {
 					if (typeof item.icon === "string" && item.icon.trim() !== "") {
 						let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
 						let iconElement = popsDOMUtils.parseTextToDOM(
-							/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${
+							/*html*/ `<i class="pops-${popsType}-icon" is-loading="${
 								item.iconIsLoading ?? false
 							}">${iconSVGHTML}</i>`
 						);
@@ -559,7 +560,7 @@ export const PopsRightClickMenu = {
 					);
 					/* 如果存在子数据，显示 */
 					if (item.item && Array.isArray(item.item)) {
-						popsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
+						popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
 					}
 					/* 鼠标|触摸 移入事件 */
 					function liElementHoverEvent() {
@@ -568,7 +569,7 @@ export const PopsRightClickMenu = {
 						).forEach((liElement) => {
 							popsDOMUtils.removeClassName(
 								liElement,
-								`pops-${PopsType}-is-visited`
+								`pops-${popsType}-is-visited`
 							);
 							if (!(liElement as any).__menuData__) {
 								return;
@@ -600,7 +601,7 @@ export const PopsRightClickMenu = {
 						}
 						popsDOMUtils.addClassName(
 							menuLiElement,
-							`pops-${PopsType}-is-visited`
+							`pops-${popsType}-is-visited`
 						);
 						if (!item.item) {
 							return;

package/src/components/searchSuggestion/index.ts

@@ -6,12 +6,13 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./types/index";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 
 export const PopsSearchSuggestion = {
 	init(details: PopsSearchSuggestionDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "searchSuggestion";
+		const popsType: PopsType = "searchSuggestion";
 
 		let config = PopsSearchSuggestionConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -88,7 +89,7 @@ export const PopsSearchSuggestion = {
 
 				SearchSuggestion.hide();
 				if (config.isAnimation) {
-					SearchSuggestion.$el.root.classList.add(`pops-${PopsType}-animation`);
+					SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
 				}
 				$shadowRoot.appendChild(SearchSuggestion.$el.root);
 				parentElement.appendChild($shadowContainer);
@@ -109,19 +110,19 @@ export const PopsSearchSuggestion = {
 				let element = popsDOMUtils.createElement(
 					"div",
 					{
-						className: `pops pops-${PopsType}-search-suggestion`,
+						className: `pops pops-${popsType}-search-suggestion`,
 						innerHTML: /*html*/ `
 						<style data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
-						<ul class="pops-${PopsType}-search-suggestion-hint">${
+						<ul class="pops-${popsType}-search-suggestion-hint">${
 							config.toSearhNotResultHTML
 						}</ul>
          				 `,
 					},
 					{
 						"data-guid": guid,
-						"type-value": PopsType,
+						"type-value": popsType,
 					}
 				);
 				if (config.className !== "" && config.className != null) {
@@ -132,24 +133,24 @@ export const PopsSearchSuggestion = {
 			/** 动态获取CSS */
 			getDynamicCSS() {
 				return /*css*/ `
-				.pops-${PopsType}-animation{
+				.pops-${popsType}-animation{
 					-moz-animation: searchSelectFalIn 0.5s 1 linear;
 					-webkit-animation: searchSelectFalIn 0.5s 1 linear;
 					-o-animation: searchSelectFalIn 0.5s 1 linear;
 					-ms-animation: searchSelectFalIn 0.5s 1 linear;
 				}
-				.pops-${PopsType}-search-suggestion{
+				.pops-${popsType}-search-suggestion{
 					--search-suggestion-bg-color: #ffffff;
 					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
 					--search-suggestion-item-color: #515a6e;
 					--search-suggestion-item-none-color: #8e8e8e;
 					--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
 				}
-				.pops-${PopsType}-search-suggestion{
+				.pops-${popsType}-search-suggestion{
 					border: initial;
 					overflow: initial;
 				}
-				ul.pops-${PopsType}-search-suggestion-hint{
+				ul.pops-${popsType}-search-suggestion-hint{
 					position: ${config.isAbsolute ? "absolute" : "fixed"};
 					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
 					width: 0;
@@ -164,14 +165,14 @@ export const PopsSearchSuggestion = {
 					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
 				}
 				/* 建议框在上面时 */
-				ul.pops-${PopsType}-search-suggestion-hint[data-top-reverse]{
+				ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
 					display: flex;
 					flex-direction: column-reverse;
 				}
-				ul.pops-${PopsType}-search-suggestion-hint[data-top-reverse] li{
+				ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
 					flex-shrink: 0;
 				}
-				ul.pops-${PopsType}-search-suggestion-hint li{
+				ul.pops-${popsType}-search-suggestion-hint li{
 					padding: 7px;
 					margin: 0;
 					clear: both;
@@ -184,17 +185,17 @@ export const PopsSearchSuggestion = {
 					text-overflow: ellipsis;
 					width: 100%;
 				}
-				ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
+				ul.pops-${popsType}-search-suggestion-hint li[data-none]{
 					text-align: center;
 					font-size: 12px;
 					color: var(--search-suggestion-item-none-color);
 				}
-				ul.pops-${PopsType}-search-suggestion-hint li:hover{
+				ul.pops-${popsType}-search-suggestion-hint li:hover{
 					background-color: var(--search-suggestion-item-hover-bg-color);
 				}
 
 				@media (prefers-color-scheme: dark){
-					.pops-${PopsType}-search-suggestion{
+					.pops-${popsType}-search-suggestion{
 						--search-suggestion-bg-color: #1d1e1f;
 						--search-suggestion-item-color: #cfd3d4;
 						--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
@@ -209,7 +210,7 @@ export const PopsSearchSuggestion = {
 			 */
 			getSearchItemLiElement(data: any, index: number) {
 				return popsDOMUtils.createElement("li", {
-					className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
+					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)}${
@@ -236,7 +237,7 @@ export const PopsSearchSuggestion = {
 					(event) => {
 						popsDOMUtils.preventEvent(event);
 						let $click = event.target as HTMLLIElement;
-						if ($click.closest(`.pops-${PopsType}-delete-icon`)) {
+						if ($click.closest(`.pops-${popsType}-delete-icon`)) {
 							/* 点击的是删除按钮 */
 							if (typeof config.deleteIcon.callback === "function") {
 								config.deleteIcon.callback(
@@ -512,7 +513,7 @@ export const PopsSearchSuggestion = {
 			 */
 			getDeleteIconHTML(size = 16, fill = "#bababa") {
 				return /*html*/ `
-				<svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+				<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
 					<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
 					<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
 				</svg>
@@ -523,7 +524,7 @@ export const PopsSearchSuggestion = {
 			 */
 			setPromptsInSearch() {
 				let isSearchingElement = popsDOMUtils.createElement("li", {
-					className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
+					className: `pops-${popsType}-search-suggestion-hint-searching-item`,
 					innerHTML: config.searchingTip,
 				});
 				SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
@@ -534,7 +535,7 @@ export const PopsSearchSuggestion = {
 			removePromptsInSearch() {
 				SearchSuggestion.$el.$hintULContainer
 					.querySelector<HTMLLIElement>(
-						`li.pops-${PopsType}-search-suggestion-hint-searching-item`
+						`li.pops-${popsType}-search-suggestion-hint-searching-item`
 					)
 					?.remove();
 			},

package/src/components/tooltip/index.ts

@@ -1,6 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -601,7 +602,7 @@ export const PopsTooltip = {
 	init(details: PopsToolTipDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "tooltip";
+		const popsType: PopsType = "tooltip";
 
 		let config = PopsTooltipConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -609,7 +610,7 @@ export const PopsTooltip = {
 		if (!(config.target instanceof HTMLElement)) {
 			throw new TypeError("config.target 必须是HTMLElement类型");
 		}
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [

package/src/css/scrollbar.css

@@ -1,18 +1,22 @@
-/* firefox上暂不支持::-webkit-scrollbar */
+/* ::-webkit-scrollbar 是非标准的css */
+/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */
 .pops ::-webkit-scrollbar {
 	width: 6px;
 	height: 0;
 }
 
+/* 滚动条轨道 */
 .pops ::-webkit-scrollbar-track {
 	width: 0;
 }
-.pops ::-webkit-scrollbar-thumb:hover {
-	background: rgb(178, 178, 178, var(--pops-bg-opacity));
-}
+/* 滚动条滑块 */
 .pops ::-webkit-scrollbar-thumb {
 	min-height: 28px;
 	border-radius: 2em;
-	background: rgb(204, 204, 204, var(--pops-bg-opacity));
+	background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));
 	background-clip: padding-box;
 }
+/* 滚动条滑块 */
+.pops ::-webkit-scrollbar-thumb:hover {
+	background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));
+}

package/src/handler/PopsElementHandler.ts

@@ -3,14 +3,14 @@ import type { PopsConfirmDetails } from "../components/confirm/types";
 import type { PopsIframeDetails } from "../components/iframe/types";
 import type { PopsIconType } from "../types/icon";
 import type {
-	PopsSupportAnim,
-	PopsSupportBottomBtn,
-	PopsSupportContent,
-	PopsSupportHeaderTitle,
-	PopsTypeSupportAnim,
-	PopsTypeSupportBottomBtn,
-	PopsTypeSupportContent,
-	PopsTypeSupportHeaderTitle,
+	PopsSupportAnimDetails,
+	PopsSupportBottomBtnDetails,
+	PopsSupportContentDetails,
+	PopsSupportHeaderTitleDetails,
+	PopsSupportAnimDetailsType,
+	PopsSupportBottomBtnDetailsType,
+	PopsSupportContentDetailsType,
+	PopsSupportHeaderTitleDetailsType,
 } from "../types/main";
 import { PopsIcon } from "../PopsIcon";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
@@ -40,8 +40,8 @@ export const PopsElementHandler = {
 	 */
 	getAnimHTML(
 		guid: string,
-		type: PopsTypeSupportAnim,
-		config: PopsSupportAnim[keyof PopsSupportAnim],
+		type: PopsSupportAnimDetailsType,
+		config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails],
 		html = "",
 		bottomBtnHTML = "",
 		zIndex: number
@@ -80,8 +80,8 @@ export const PopsElementHandler = {
 	 * @param config
 	 */
 	getHeaderBtnHTML(
-		type: PopsTypeSupportHeaderTitle,
-		config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]
+		type: PopsSupportHeaderTitleDetailsType,
+		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
 	): string {
 		if (!config.btn) {
 			return "";
@@ -126,8 +126,8 @@ export const PopsElementHandler = {
 	 * @param config
 	 */
 	getBottomBtnHTML(
-		type: PopsTypeSupportBottomBtn,
-		config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">
+		type: PopsSupportBottomBtnDetailsType,
+		config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">
 	): string {
 		if (!config.btn) {
 			// 未设置btn参数
@@ -282,8 +282,8 @@ export const PopsElementHandler = {
 	 * @param config 弹窗配置
 	 */
 	getHeaderStyle(
-		type: PopsTypeSupportHeaderTitle,
-		config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]
+		type: PopsSupportHeaderTitleDetailsType,
+		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
 	) {
 		return {
 			headerStyle: config?.title?.html ? config?.title?.style || "" : "",
@@ -297,8 +297,8 @@ export const PopsElementHandler = {
 	 * @param config 弹窗配置
 	 */
 	getContentStyle(
-		type: PopsTypeSupportContent,
-		config: PopsSupportContent[keyof PopsSupportContent]
+		type: PopsSupportContentDetailsType,
+		config: PopsSupportContentDetails[keyof PopsSupportContentDetails]
 	) {
 		return {
 			contentStyle: (config?.content as any)?.html