@whitesev/pops 2.2.8 → 2.2.9

package/src/Pops.ts

@@ -1,209 +0,0 @@
-import { popsDOMUtils } from "./utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
-import { popsUtils } from "./utils/PopsUtils";
-import { PopsCore } from "./PopsCore";
-import { PopsAlert } from "./components/alert";
-import type { PopsAlertDetails } from "./components/alert/types";
-import { PopsConfirm } from "./components/confirm";
-import type { PopsConfirmDetails } from "./components/confirm/types";
-import type { PopsPromptDetails } from "./components/prompt/types/index";
-import { PopsPrompt } from "./components/prompt";
-import type { PopsLoadingDetails } from "./components/loading/types";
-import { PopsLoading } from "./components/loading";
-import type { PopsIframeDetails } from "./components/iframe/types";
-import { PopsIframe } from "./components/iframe";
-import type { PopsToolTipDetails } from "./components/tooltip/types/index";
-import { PopsDrawer } from "./components/drawer";
-import type { PopsDrawerDetails } from "./components/drawer/types";
-import type { PopsFolderDetails } from "./components/folder/types";
-import { PopsFolder } from "./components/folder";
-import type { PopsPanelDetails } from "./components/panel/types";
-import { PopsPanel } from "./components/panel";
-import { PopsRightClickMenu } from "./components/rightClickMenu";
-import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/types";
-import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/types/index";
-import { PopsSearchSuggestion } from "./components/searchSuggestion";
-import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
-import { PanelHandlerComponents } from "./components/panel/handlerComponents";
-import { GlobalConfig } from "./config/GlobalConfig";
-import { PopsTooltip } from "./components/tooltip";
-import { PopsCSS } from "./PopsCSS";
-import { PopsIcon } from "./PopsIcon";
-import { PopsInstData } from "./PopsInst";
-import { PopsAnimation } from "./PopsAnimation";
-
-class Pops {
-	/** 配置 */
-	config = {
-		/** 版本号 */
-		version: "2025.7.29",
-		cssText: PopsCSS,
-		/** icon图标的svg代码 */
-		iconSVG: PopsIcon.$data,
-		/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
-		animation: PopsAnimation.$data,
-		/** 存储已创建的元素 */
-		instData: PopsInstData,
-		/** 禁止滚动 */
-		forbiddenScroll: {
-			event(event: Event) {
-				return popsDOMUtils.preventEvent(event);
-			},
-		},
-		/** pops使用的工具类 */
-		Utils: popsUtils,
-		/** pops使用的DOM工具类 */
-		DOMUtils: popsDOMUtils,
-		/** pops创建的实例使用的工具类 */
-		InstanceUtils: PopsInstanceUtils,
-		/** pops处理float类型使用的工具类 */
-		MathFloatUtils: PopsMathFloatUtils,
-		/** pops.panel中用于处理各个类型的工具 */
-		PanelHandlerComponents: PanelHandlerComponents,
-	};
-	init() {}
-	/**
-	 * 释放原有的pops控制权
-	 * @example
-	 * let pops = window.pops.noConflict()
-	 */
-	noConflict() {
-		if (typeof (PopsCore.globalThis as any).pops === "object") {
-			popsUtils.delete(PopsCore.globalThis, "pops");
-		}
-		if (
-			typeof unsafeWindow === "object" &&
-			unsafeWindow != null &&
-			typeof (unsafeWindow as any).pops === "object"
-		) {
-			popsUtils.delete(unsafeWindow, "pops");
-		}
-		return new Pops();
-	}
-	/**
-	 * 通过navigator.userAgent判断是否是手机访问
-	 * @param userAgent
-	 */
-	isPhone(userAgent?: string) {
-		return popsUtils.isPhone(userAgent);
-	}
-	/**
-	 * 为所有弹窗设置全局属性
-	 */
-	GlobalConfig = GlobalConfig;
-	/**
-	 * 普通信息框
-	 * @param details 配置
-	 */
-	alert = (details: PopsAlertDetails) => {
-		let dialog = PopsAlert.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 询问框
-	 * @param details 配置
-	 */
-	confirm = (details: PopsConfirmDetails) => {
-		let dialog = PopsConfirm.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 输入框
-	 * @param details 配置
-	 */
-	prompt = (details: PopsPromptDetails) => {
-		let dialog = PopsPrompt.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 加载层
-	 * @param details 配置
-	 */
-	loading = (details: PopsLoadingDetails) => {
-		let popsLoading = PopsLoading.init(details);
-		return popsLoading;
-	};
-
-	/**
-	 * iframe层
-	 * @param details 配置
-	 */
-	iframe = (details: PopsIframeDetails) => {
-		let dialog = PopsIframe.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 提示框
-	 * @param details 配置
-	 */
-	tooltip = (details: PopsToolTipDetails) => {
-		let popsTooltip = PopsTooltip.init(details);
-		return popsTooltip;
-	};
-
-	/**
-	 * 抽屉
-	 * @param details 配置
-	 */
-	drawer = (details: PopsDrawerDetails) => {
-		let dialog = PopsDrawer.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 文件夹
-	 * @param details 配置
-	 */
-	folder = (details: PopsFolderDetails) => {
-		let dialog = PopsFolder.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 配置面板
-	 * @param details 配置
-	 */
-	panel = (details: PopsPanelDetails) => {
-		let dialog = PopsPanel.init(details);
-		return dialog;
-	};
-
-	/**
-	 * 右键菜单
-	 * @param details 配置
-	 */
-	rightClickMenu = (details: PopsRightClickMenuDetails) => {
-		let popsRightClickMenu = PopsRightClickMenu.init(details);
-		return popsRightClickMenu;
-	};
-
-	/**
-	 * 搜索建议
-	 *
-	 * 注意：调用后需要主动调用.init()和.setAllEvent()进行初始化
-	 * @param details 配置
-	 * @example
-	 * let $input = document.querySelector("#input");
-	 * let searchSuggestion = pops.searchSuggestion({
-	 *     target: $input,
-	 *     inputTarget: $input,
-	 *     getItemHTML: function (item) {
-	 *         return item.value;
-	 *     }
-	 * });
-	 * searchSuggestion.init();
-	 * searchSuggestion.setAllEvent();
-	 */
-	searchSuggestion = <T = any>(details: PopsSearchSuggestionDetails<T>) => {
-		let popsSearchSuggestion = PopsSearchSuggestion.init(details);
-		return popsSearchSuggestion;
-	};
-}
-
-const pops = new Pops();
-
-export { pops };

package/src/PopsAnimation.ts

@@ -1,32 +0,0 @@
-import { PopsCSS } from "./PopsCSS";
-import { popsDOMUtils } from "./utils/PopsDOMUtils";
-import { PopsSafeUtils } from "./utils/PopsSafeUtils";
-import { popsUtils } from "./utils/PopsUtils";
-
-export const PopsAnimation = {
-	$data: {} as { [key: string]: CSSKeyframesRule },
-	$flag: {
-		/** 是否初始化 */
-		isInit: false,
-	},
-	init() {
-		if (!this.$flag.isInit) {
-			this.$flag.isInit = true;
-			/* 处理获取当前所有的动画名 */
-			let animationStyle = document.createElement("style");
-			PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
-			popsDOMUtils.appendHead(animationStyle);
-			this.$data = null as any;
-			this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet!);
-			popsUtils.setTimeout(() => {
-				animationStyle.remove();
-			}, 50);
-		}
-	},
-	/**
-	 * 判断是否存在某个动画名
-	 */
-	hasAnim(name: string) {
-		return this.$data.hasOwnProperty(name);
-	},
-};

package/src/PopsCSS.ts

@@ -1,51 +0,0 @@
-import indexCSS from "./css/index.css";
-import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
-import scrollbarCSS from "./css/scrollbar.css";
-import buttonCSS from "./css/button.css";
-import commonCSS from "./css/common.css";
-import animCSS from "./css/animation.css";
-import alertCSS from "./components/alert/index.css";
-import confirmCSS from "./components/confirm/index.css";
-import promptCSS from "./components/prompt/index.css";
-import loadingCSS from "./components/loading/index.css";
-import iframeCSS from "./components/iframe/index.css";
-import tooltipCSS from "./components/tooltip/index.css";
-import drawerCSS from "./components/drawer/index.css";
-import folderCSS from "./components/folder/index.css";
-import panelCSS from "./components/panel/index.css";
-import rightClickMenuCSS from "./components/rightClickMenu/index.css";
-
-export const PopsCSS = {
-	/** 主CSS */
-	index: indexCSS,
-	/** 九宫格位置CSS */
-	ninePalaceGridPosition: ninePalaceGridPositionCSS,
-	/** 滚动条CSS */
-	scrollbar: scrollbarCSS,
-	/** 按钮CSS */
-	button: buttonCSS,
-	/** 通用的CSS */
-	common: commonCSS,
-	/** 动画 */
-	anim: animCSS,
-	/** pops.alert */
-	alertCSS: alertCSS,
-	/** pops.cponfirm */
-	confirmCSS: confirmCSS,
-	/** pops.prompt */
-	promptCSS: promptCSS,
-	/** pops.loading */
-	loadingCSS: loadingCSS,
-	/** pops.iframe */
-	iframeCSS: iframeCSS,
-	/** pops.tooltip */
-	tooltipCSS: tooltipCSS,
-	/** pops.drawer */
-	drawerCSS: drawerCSS,
-	/** pops.folder */
-	folderCSS: folderCSS,
-	/** pops.folder */
-	panelCSS: panelCSS,
-	/** pops.rightClickMenu */
-	rightClickMenu: rightClickMenuCSS,
-};

package/src/PopsCore.ts

@@ -1,44 +0,0 @@
-interface PopsCoreOption {
-	document: Document;
-	window: Window;
-	globalThis: typeof globalThis;
-	self: typeof globalThis;
-}
-
-const PopsCoreDefaultEnv: PopsCoreOption = {
-	document: document,
-	window: window,
-	globalThis: globalThis,
-	self: self,
-};
-
-const PopsCoreEnv: PopsCoreOption = Object.assign({}, PopsCoreDefaultEnv);
-
-const PopsCore = {
-	init(option?: PopsCoreOption) {
-		if (!option) {
-			option = Object.assign({}, PopsCoreDefaultEnv);
-		}
-		Object.assign(PopsCoreEnv, option);
-	},
-	get document() {
-		return PopsCoreEnv.document;
-	},
-	get window() {
-		return PopsCoreEnv.window;
-	},
-	get globalThis() {
-		return PopsCoreEnv.globalThis;
-	},
-	get self() {
-		return PopsCoreEnv.self;
-	},
-};
-
-const OriginPrototype = {
-	Object: {
-		defineProperty: Object.defineProperty,
-	},
-};
-
-export { PopsCoreOption, PopsCore, OriginPrototype };

package/src/PopsIcon.ts

@@ -1,95 +0,0 @@
-import type { PopsIconType } from "./types/icon";
-import SVG_min from "./svg/min.svg";
-import SVG_mise from "./svg/mise.svg";
-import SVG_max from "./svg/max.svg";
-import SVG_close from "./svg/close.svg";
-import SVG_edit from "./svg/edit.svg";
-import SVG_share from "./svg/share.svg";
-import SVG_delete from "./svg/delete.svg";
-import SVG_search from "./svg/search.svg";
-import SVG_upload from "./svg/upload.svg";
-import SVG_loading from "./svg/loading.svg";
-import SVG_next from "./svg/next.svg";
-import SVG_prev from "./svg/prev.svg";
-import SVG_eleme from "./svg/eleme.svg";
-import SVG_elemePlus from "./svg/elemePlus.svg";
-import SVG_chromeFilled from "./svg/chromeFilled.svg";
-import SVG_cpu from "./svg/cpu.svg";
-import SVG_videoPlay from "./svg/videoPlay.svg";
-import SVG_videoPause from "./svg/videoPause.svg";
-import SVG_headset from "./svg/headset.svg";
-import SVG_monitor from "./svg/monitor.svg";
-import SVG_documentCopy from "./svg/documentCopy.svg";
-import SVG_picture from "./svg/picture.svg";
-import SVG_circleClose from "./svg/circleClose.svg";
-import SVG_view from "./svg/view.svg";
-import SVG_hide from "./svg/hide.svg";
-import SVG_keyboard from "./svg/keyboard.svg";
-import SVG_arrowRight from "./svg/arrowRight.svg";
-import SVG_arrowLeft from "./svg/arrowLeft.svg";
-
-const PopsIconData: {
-	[key in PopsIconType]: string;
-} = {
-	min: SVG_min,
-	mise: SVG_mise,
-	max: SVG_max,
-	close: SVG_close,
-	edit: SVG_edit,
-	share: SVG_share,
-	delete: SVG_delete,
-	search: SVG_search,
-	upload: SVG_upload,
-	loading: SVG_loading,
-	next: SVG_next,
-	prev: SVG_prev,
-	eleme: SVG_eleme,
-	elemePlus: SVG_elemePlus,
-	chromeFilled: SVG_chromeFilled,
-	cpu: SVG_cpu,
-	videoPlay: SVG_videoPlay,
-	videoPause: SVG_videoPause,
-	headset: SVG_headset,
-	monitor: SVG_monitor,
-	documentCopy: SVG_documentCopy,
-	picture: SVG_picture,
-	circleClose: SVG_circleClose,
-	view: SVG_view,
-	hide: SVG_hide,
-	keyboard: SVG_keyboard,
-	arrowRight: SVG_arrowRight,
-	arrowLeft: SVG_arrowLeft,
-};
-
-export const PopsIcon = {
-	$data: PopsIconData,
-	/**
-	 * 判断是否存在某个icon
-	 * @param iconName 图标名
-	 */
-	hasIcon(iconName: string) {
-		return Object.keys(PopsIcon.$data).includes(iconName);
-	},
-	/**
-	 * 获取icon
-	 * @param iconName 图标名
-	 */
-	getIcon(iconName: string): string | null {
-		return PopsIcon.$data[iconName as keyof typeof this.$data];
-	},
-	/**
-	 * 删除图标
-	 * @param iconName 图标名
-	 */
-	deleteIcon(iconName: string) {
-		return Reflect.deleteProperty(PopsIcon.$data, iconName);
-	},
-	/**
-	 * 设置图标
-	 * @param iconName 图标名
-	 * @param iconHTML 图标html
-	 */
-	setIcon(iconName: string, iconHTML: string) {
-		Reflect.set(PopsIcon.$data, iconName, iconHTML);
-	},
-};

package/src/PopsInst.ts

@@ -1,21 +0,0 @@
-import type { PopsInstCommonConfig } from "./types/inst";
-import type { PopsInstStoreType } from "./types/main";
-
-/**
- * 弹窗实例数据
- */
-export const PopsInstData: {
-	[key in PopsInstStoreType]: PopsInstCommonConfig[];
-} = {
-	alert: [],
-	confirm: [],
-	drawer: [],
-	folder: [],
-	iframe: [],
-	loading: [],
-	panel: [],
-	prompt: [],
-	rightClickMenu: [],
-	// 没有 searchSuggestion
-	tooltip: [],
-};

package/src/components/alert/config.ts

@@ -1,62 +0,0 @@
-import type { PopsAlertDetails } from "./types";
-
-export const PopsAlertConfig = (): DeepRequired<PopsAlertDetails> => {
-	return {
-		title: {
-			text: "默认标题",
-			position: "left",
-			html: false,
-			style: "",
-		},
-		content: {
-			text: "默认内容",
-			html: false,
-			style: "",
-		},
-		btn: {
-			position: "flex-end",
-			ok: {
-				size: void 0 as any,
-				enable: true,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "确定",
-				type: "primary",
-				callback: function (details: any) {
-					details.close();
-				},
-			},
-			close: {
-				enable: true,
-				callback: function (details: any) {
-					details.close();
-				},
-			},
-		},
-		useShadowRoot: true,
-		class: "",
-		only: false,
-		width: window.innerWidth < 550 ? "88vw" : "350px",
-		height: window.innerHeight < 450 ? "70vh" : "200px",
-		position: "center",
-		animation: "pops-anim-fadein-zoom",
-		zIndex: 10000,
-		mask: {
-			enable: false,
-			clickEvent: {
-				toClose: false,
-				toHide: false,
-			},
-			clickCallBack: null,
-		},
-		drag: false,
-		dragLimit: true,
-		dragExtraDistance: 3,
-		dragMoveCallBack() {},
-		dragEndCallBack() {},
-		forbiddenScroll: false,
-		style: null,
-		beforeAppendToPageCallBack() {},
-	} as DeepRequired<PopsAlertDetails>;
-};

package/src/components/alert/index.ts

@@ -1,181 +0,0 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsAlertConfig } from "./config";
-import type { PopsType } from "../../types/main";
-import type { PopsAlertDetails } from "./types";
-import { PopsCSS } from "../../PopsCSS";
-
-export const PopsAlert = {
-	init(details: PopsAlertDetails) {
-		const guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const popsType: PopsType = "alert";
-		let config = PopsAlertConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(popsType, config);
-
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
-		PopsHandler.handleInit($shadowRoot, [
-			{
-				name: "index",
-				css: PopsCSS.index,
-			},
-			{
-				name: "ninePalaceGridPosition",
-				css: PopsCSS.ninePalaceGridPosition,
-			},
-			{
-				name: "scrollbar",
-				css: PopsCSS.scrollbar,
-			},
-			{
-				name: "button",
-				css: PopsCSS.button,
-			},
-			{
-				name: "anim",
-				css: PopsCSS.anim,
-			},
-			{
-				name: "common",
-				css: PopsCSS.common,
-			},
-			{
-				name: "alertCSS",
-				css: PopsCSS.alertCSS,
-			},
-		]);
-
-		// 先把z-index提取出来
-		let zIndex = PopsHandler.handleZIndex(config.zIndex);
-		let maskHTML = PopsElementHandler.createMask(guid, zIndex);
-		let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-		let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
-		let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
-			popsType,
-			config
-		);
-		let { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(
-			popsType,
-			config
-		);
-		let animHTML = PopsElementHandler.createAnim(
-			guid,
-			popsType,
-			config,
-			/*html*/ `
-			<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>`
-			}${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
-				config.content.html
-					? config.content.text
-					: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
-			}</div>${bottomBtnHTML}`,
-			bottomBtnHTML,
-			zIndex
-		);
-		/**
-		 * 弹窗的主元素，包括动画层
-		 */
-		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-		let {
-			popsElement: $pops,
-			headerCloseBtnElement: $headerCloseBtn,
-			btnOkElement,
-			titleElement: $title,
-		} = PopsHandler.handleQueryElement($anim, popsType);
-
-		/** 遮罩层元素 */
-		let $mask: HTMLDivElement | null = null;
-		/** 已创建的元素列表 */
-		let elementList: HTMLElement[] = [$anim];
-
-		/* 遮罩层元素 */
-
-		if (config.mask.enable) {
-			let _handleMask_ = PopsHandler.handleMask({
-				type: popsType,
-				guid: guid,
-				config: config,
-				animElement: $anim,
-				maskHTML: maskHTML,
-			});
-			$mask = _handleMask_.maskElement;
-			elementList.push($mask);
-		}
-		/* 处理返回的配置 */
-		let eventDetails = PopsHandler.handleEventDetails(
-			guid,
-			$shadowContainer,
-			$shadowRoot,
-			popsType,
-			$anim,
-			$pops!,
-			$mask!,
-			config
-		);
-		/* 为顶部右边的关闭按钮添加点击事件 */
-		PopsHandler.handleClickEvent(
-			"close",
-			$headerCloseBtn!,
-			eventDetails,
-			config.btn.close!.callback!
-		);
-		/* 为底部ok按钮添加点击事件 */
-		PopsHandler.handleClickEvent(
-			"ok",
-			btnOkElement!,
-			eventDetails!,
-			config.btn.ok!.callback!
-		);
-
-		/* 创建到页面中 */
-
-		popsDOMUtils.append($shadowRoot, elementList);
-		if (typeof config.beforeAppendToPageCallBack === "function") {
-			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-		}
-
-		popsDOMUtils.appendBody($shadowContainer);
-		if ($mask != null) {
-			// 添加遮罩层
-			$anim.after($mask);
-		}
-		/* 保存 */
-		PopsHandler.handlePush(popsType, {
-			guid: guid,
-
-			animElement: $anim,
-
-			popsElement: $pops!,
-
-			maskElement: $mask!,
-			$shadowContainer: $shadowContainer,
-			$shadowRoot: $shadowRoot,
-		});
-		/* 拖拽 */
-		if (config.drag) {
-			PopsInstanceUtils.drag($pops!, {
-				dragElement: $title!,
-				limit: config.dragLimit,
-				extraDistance: config.dragExtraDistance!,
-				moveCallBack: config.dragMoveCallBack!,
-				endCallBack: config.dragEndCallBack!,
-			});
-		}
-
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};