@whitesev/pops 2.2.1 → 2.2.3

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/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,
-	PopsSupportAnimType,
-	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: PopsSupportAnimType,
-		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

package/src/handler/PopsHandler.ts

@@ -13,10 +13,10 @@ import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsInstCommonConfig } from "../types/inst";
 import type {
-	PopsDetails,
 	PopsInstStoreType,
 	PopsType,
-	PopsSupportAnimType,
+	PopsSupportAnimDetailsType,
+	PopsSupportOnlyDetails,
 } from "../types/main";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
@@ -234,7 +234,10 @@ export const PopsHandler = {
 	 * @param animElement
 	 * @param type
 	 */
-	handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimType) {
+	handleQueryElement(
+		animElement: HTMLDivElement,
+		type: PopsSupportAnimDetailsType
+	) {
 		return {
 			/**
 			 * 主元素
@@ -660,11 +663,14 @@ export const PopsHandler = {
 	 * @param type 当前弹窗类型
 	 * @param config 配置
 	 */
-	handleOnly<T extends Required<PopsDetails[keyof PopsDetails]>>(
-		type: PopsType,
-		config: T
-	): T {
+	handleOnly<
+		T extends Required<PopsSupportOnlyDetails[keyof PopsSupportOnlyDetails]>
+	>(type: PopsType, config: T): T {
 		if (config.only) {
+			// .loading
+			// .tooltip
+			// .rightClickMenu
+			// 单独处理
 			if (
 				type === "loading" ||
 				type === "tooltip" ||

package/src/types/components.d.ts

@@ -21,17 +21,17 @@ export interface PopsTitleConfig {
 		 */
 		text?: string;
 		/**
-		 * 文字的位置
+		 * 标题文字的位置
 		 * @default "left"
 		 */
 		position?: PopsTextAlign;
 		/**
-		 * 文字是否是html
+		 * 标题文字是否是html
 		 * @default false
 		 */
 		html?: boolean;
 		/**
-		 * 文字的自定义CSS
+		 * 自定义CSS
 		 */
 		style?: string;
 	};
@@ -47,12 +47,12 @@ export interface PopsContentConfig {
 		 */
 		text?: string;
 		/**
-		 * 文字是否是html
+		 * 内容文字是否是html
 		 * @default false
 		 */
 		html?: boolean;
 		/**
-		 * 文字的自定义CSS
+		 * 自定义CSS
 		 */
 		style?: string;
 	};

package/src/types/main.d.ts

@@ -16,12 +16,13 @@ import type { PopsPanelTextAreaDetails } from "../components/panel/types/compone
 import type { PopsPromptDetails } from "../components/prompt/types/index";
 import { PopsRightClickMenuDetails } from "../components/rightClickMenu/types";
 import { PopsToolTipDetails } from "../components/tooltip/types/index";
+import type { PopsSearchSuggestionDetails } from "../components/searchSuggestion/types";
 
 export interface PopsUtilsOwnObject<V extends any> {
 	[key: string]: V | PopsUtilsOwnObject<V>;
 }
 
-/** pops的所有类型配置 10个 */
+/** pops所有的类型配置 11个*/
 export interface PopsDetails {
 	alert: PopsAlertDetails;
 	confirm: PopsConfirmDetails;
@@ -33,53 +34,55 @@ export interface PopsDetails {
 	folder: PopsFolderDetails;
 	panel: PopsPanelDetails;
 	rightClickMenu: PopsRightClickMenuDetails;
+	searchSuggestion: PopsSearchSuggestionDetails;
 }
 
-/** pops所有的类型 10个 */
+/** pops的类型 */
 export type PopsType = keyof PopsDetails;
 
-/** 存储实例的类型 10个 */
-export type PopsInstStoreType = PopsType;
+/** pops中支持only的配置 */
+export type PopsSupportOnlyDetails = Omit<PopsDetails, "searchSuggestion">;
+
+/** 存储实例的类型 */
+export type PopsInstStoreType = keyof Omit<PopsDetails, "searchSuggestion">;
 
 /** pops弹窗支持动画元素的配置 8个 */
-export type PopsSupportAnim = Omit<PopsDetails, "tooltip" | "rightClickMenu">;
+export type PopsSupportAnimDetails = Omit<
+	PopsDetails,
+	"tooltip" | "rightClickMenu" | "searchSuggestion"
+>;
 
 /** pops弹窗支持动画元素的类型 */
-export type PopsSupportAnimType = keyof PopsSupportAnim;
+export type PopsSupportAnimDetailsType = keyof PopsSupportAnimDetails;
 
 /** pops弹窗支持标题栏的配置 */
-export interface PopsSupportHeaderTitle {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	iframe: PopsIframeDetails;
-	drawer: PopsDrawerDetails;
-	folder: PopsFolderDetails;
-	panel: PopsPanelDetails;
-}
+export type PopsSupportHeaderTitleDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "iframe" | "drawer" | "folder" | "panel"
+>;
+
 /** pops弹窗支持标题栏的类型 */
-export type PopsTypeSupportHeaderTitle = keyof PopsSupportHeaderTitle;
+export type PopsSupportHeaderTitleDetailsType =
+	keyof PopsSupportHeaderTitleDetails;
 
 /** pops支持底部按钮的配置 */
-export interface PopsSupportBottomBtn {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	drawer: PopsDrawerDetails;
-}
+export type PopsSupportBottomBtnDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "drawer"
+>;
+
 /** pops支持底部按钮的类型 */
-export type PopsTypeSupportBottomBtn = keyof PopsSupportHeaderTitle;
+export type PopsSupportBottomBtnDetailsType =
+	keyof PopsSupportHeaderTitleDetails;
 
 /** pops支持中间内容的配置 */
-export interface PopsSupportContent {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	drawer: PopsDrawerDetails;
-	loading: PopsLoadingDetails;
-}
+export type PopsSupportContentDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "drawer" | "loading"
+>;
+
 /** pops支持中间内容的类型 */
-export type PopsTypeSupportContent = keyof PopsSupportContent;
+export type PopsSupportContentDetailsType = keyof PopsSupportContentDetails;
 
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails =