@whitesev/pops 2.2.8 → 2.2.9

package/src/components/iframe/types/index.ts

@@ -1,146 +0,0 @@
-import type {
-	PopsTitleConfig,
-	PopsDragConfig,
-	PopsCommonConfig,
-} from "../../../types/components";
-
-import type { PopsEventDetails } from "../../../types/event";
-
-/**
- * pops.iframe的按钮的点击回调参数event
- */
-export interface PopsBtnIframeCallBackEvent {
-	/**
-	 * 动画元素（包裹着弹窗元素）
-	 */
-	animElement: HTMLElement;
-	/**
-	 * 弹窗元素
-	 */
-	popsElement: HTMLElement;
-	/**
-	 * 遮罩层元素，如果未设置，那么不存在
-	 */
-	maskElement?: HTMLElement;
-	/**
-	 * iframe元素
-	 */
-	iframePopsElement: HTMLIFrameElement;
-	/**
-	 * 使用的方法名
-	 */
-	function: "iframe";
-	/**
-	 * 唯一id
-	 */
-	guid: string;
-}
-
-/**
- * pops.iframe
- */
-export interface PopsIframeDetails
-	extends PopsTitleConfig,
-		PopsDragConfig,
-		PopsCommonConfig {
-	/**
-	 * 加载配置
-	 */
-	loading: {
-		/**
-		 * 是否启用加载中的loading
-		 */
-		enable: boolean;
-		/**
-		 * 是否启用loading图标
-		 */
-		icon: boolean;
-		/**
-		 * 文字
-		 */
-		text: string;
-	};
-	/**
-	 * 按钮配置
-	 */
-	btn: {
-		/**
-		 * 最小化
-		 */
-		min: {
-			/**
-			 * 点击的回调函数
-			 */
-			callback: (
-				eventDetails: PopsEventDetails & {
-					iframeElement: HTMLIFrameElement;
-				},
-				event: MouseEvent | PointerEvent
-			) => void;
-		};
-		/**
-		 * 最大化
-		 */
-		max: {
-			/**
-			 * 点击的回调函数
-			 */
-			callback: (
-				eventDetails: PopsEventDetails & {
-					iframeElement: HTMLIFrameElement;
-				},
-				event: MouseEvent | PointerEvent
-			) => void;
-		};
-		/**
-		 * 窗口化
-		 */
-		mise: {
-			/**
-			 * 点击的回调函数
-			 */
-			callback: (
-				eventDetails: PopsEventDetails & {
-					iframeElement: HTMLIFrameElement;
-				},
-				event: MouseEvent | PointerEvent
-			) => void;
-		};
-		/**
-		 * 关闭
-		 */
-		close: {
-			/**
-			 * 点击的回调函数
-			 */
-			callback: (
-				eventDetails: PopsEventDetails & {
-					iframeElement: HTMLIFrameElement;
-				},
-				event: MouseEvent | PointerEvent
-			) => void;
-		};
-	};
-	/**
-	 * 加载的地址，默认为window.location.href
-	 * @default window.location.href
-	 */
-	url?: string;
-	/**
-	 * 右上角按钮顺序：最小化、最大化、窗口化、关闭
-	 */
-	topRightButton: "min|max|mise|close";
-	/**
-	 * 是否启用沙箱，默认false
-	 * @default false
-	 */
-	sandbox?: boolean;
-	/**
-	 * 加载完毕的回调
-	 */
-	loadEndCallBack?: (
-		details: PopsEventDetails & {
-			iframeElement: HTMLIFrameElement;
-		}
-	) => void;
-}

package/src/components/loading/config.ts

@@ -1,29 +0,0 @@
-import type { PopsLoadingDetails } from "./types";
-
-export const PopsLoadingConfig = (): DeepRequired<PopsLoadingDetails> => {
-	return {
-		parent: document.body,
-		content: {
-			text: "加载中...",
-			icon: "loading",
-			style: "",
-		},
-		useShadowRoot: true,
-		class: "",
-		only: false,
-		zIndex: 10000,
-		mask: {
-			enable: false,
-			clickEvent: {
-				toClose: false,
-				toHide: false,
-			},
-			clickCallBack: null,
-		},
-		animation: "pops-anim-fadein-zoom",
-		forbiddenScroll: false,
-		isAbsolute: false,
-		style: null,
-		addIndexCSS: true,
-	};
-};

package/src/components/loading/index.css

@@ -1,66 +0,0 @@
-.pops[type-value="loading"] {
-	--loading-bd-color: rgba(0, 0, 0, 0.2);
-	--loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-	--loading-box-shadow-color: rgb(0 0 0 / 50%);
-	--loading-icon-color: rgba(100, 149, 237, 0.1);
-	--loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));
-}
-.pops[type-value="loading"] {
-	position: absolute;
-	top: 272.5px;
-	top: 50%;
-	left: 26px;
-	left: 50%;
-	display: flex;
-	overflow: hidden;
-	padding: 10px 15px;
-	max-width: 100%;
-	max-height: 100%;
-	min-width: 0;
-	min-height: 0;
-	border: 1px solid var(--loading-bd-color);
-	border-radius: 5px;
-	background-color: var(--loading-bg-color);
-	box-shadow: 0 0 5px var(--loading-box-shadow-color);
-	vertical-align: middle;
-	transition: all 0.35s;
-	transform: translate(-50%, -50%);
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-}
-.pops[type-value="loading"]:before {
-	float: left;
-	display: inline-block;
-	width: 2em;
-	height: 2em;
-	border: 0.3em solid var(--loading-icon-color);
-	border-top: 0.3em solid var(--loading-icon-bd-top-color);
-	border-radius: 50%;
-	content: " ";
-	vertical-align: middle;
-	font-size: inherit;
-	animation: pops-anim-wait-rotate 1.2s linear infinite;
-}
-.pops[type-value="loading"] .pops-loading-content {
-	position: static;
-	top: 0;
-	bottom: 0;
-	float: left;
-	overflow: hidden;
-	width: auto;
-	font-size: inherit;
-	line-height: normal;
-	align-content: center;
-}
-
-@media (prefers-color-scheme: dark) {
-	.pops[type-value="loading"] {
-		--loading-bg-color: #222222;
-	}
-}

package/src/components/loading/index.ts

@@ -1,114 +0,0 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { PopsCSS } from "../../PopsCSS";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsLoadingConfig } from "./config";
-import type { PopsLoadingDetails } from "./types";
-
-export const PopsLoading = {
-	init(details: PopsLoadingDetails) {
-		let config = PopsLoadingConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		let guid = popsUtils.getRandomGUID();
-		const PopsType = "loading";
-
-		config = PopsHandler.handleOnly(PopsType, config);
-
-		// 先把z-index提取出来
-		let zIndex = PopsHandler.handleZIndex(config.zIndex);
-		let maskHTML = PopsElementHandler.createMask(guid, zIndex);
-
-		let { contentPStyle } = PopsElementHandler.createContentStyle(
-			"loading",
-			config
-		);
-		let animHTML = PopsElementHandler.createAnim(
-			guid,
-			PopsType,
-			config,
-			/*html*/ `
-            <div class="pops-content pops-${PopsType}-content">${
-				config.addIndexCSS
-					? /*html*/ `
-                <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="loadingCSS">
-                    ${PopsCSS.loadingCSS}
-                </style>
-            ${config.style != null ? `<style>${config.style}</style>` : ""}
-            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${
-				config.content.text
-			}</p>
-            </div>`,
-			"",
-			zIndex
-		);
-
-		/**
-		 * 弹窗的主元素，包括动画层
-		 */
-
-		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-		let { popsElement: $pops } = 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.handleLoadingEventDetails(
-			guid,
-			PopsType,
-			$anim,
-			$pops!,
-			$mask!,
-			config
-		);
-		popsDOMUtils.append(config.parent, elementList);
-		if ($mask != null) {
-			$anim.after($mask);
-		}
-		PopsHandler.handlePush(PopsType, {
-			guid: guid,
-			animElement: $anim,
-			popsElement: $pops!,
-			maskElement: $mask!,
-		} as any);
-
-		if (config.isAbsolute) {
-			// 遮罩层必须是跟随主内容
-			// 即设置主内容position: relative，mask：position: absolute
-			popsDOMUtils.css($anim, "position", "absolute !important");
-			$mask && popsDOMUtils.css($mask, "position", "absolute !important");
-		}
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};

package/src/components/loading/types/index.ts

@@ -1,40 +0,0 @@
-import type {
-	PopsCommonConfig,
-	PopsContentConfig,
-} from "../../../types/components";
-
-/**
- * pops.loading
- */
-export interface PopsLoadingDetails
-	extends Omit<
-		PopsCommonConfig,
-		"width" | "height" | "position" | "beforeAppendToPageCallBack"
-	> {
-	/**
-	 * 父元素，默认为document.body
-	 * @default document.body
-	 */
-	parent?: HTMLElement;
-	/**
-	 * 内容配置
-	 */
-	content: Omit<PopsContentConfig["content"], "html"> & {
-		/**
-		 * 图标
-		 */
-		icon?: string;
-	};
-	/**
-	 * （可选）添加主CSS，默认为true，当页面中存在anim覆盖时，可能会有一些样式问题，取消添加该CSS即可解决
-	 * @default true
-	 */
-	addIndexCSS?: boolean;
-	/**
-	 * 为pops-anim和pops-mask设置position: absolute（需要自行设置parent的position为relative）
-	 *
-	 * 它们默认的position为fixed
-	 * @default false
-	 */
-	isAbsolute?: boolean;
-}