@whitesev/pops 1.4.0 → 1.5.0

package/src/components/iframe/indexType.ts

@@ -0,0 +1,144 @@
+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
+	 */
+	url?: string;
+	/**
+	 * 右上角按钮顺序：最小化、最大化、窗口化、关闭
+	 */
+	topRightButton: "min|max|mise|close";
+	/**
+	 * 是否启用沙箱，默认false
+	 */
+	sandbox?: boolean;
+	/**
+	 * 加载完毕的回调
+	 */
+	loadEndCallBack?: (
+		details: PopsEventDetails & {
+			iframeElement: HTMLIFrameElement;
+		}
+	) => void;
+}

package/src/components/loading/index.css

@@ -0,0 +1,60 @@
+.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 rgba(0, 0, 0, 0.2);
+	border-radius: 5px;
+	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+	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 rgba(100, 149, 237, 0.1);
+	border-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));
+	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: 2em;
+}
+.pops[type-value="loading"] .pops-loading-content p[pops] {
+	display: inline-block;
+	padding: 5px 0px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+	font-size: inherit;
+	text-align: center;
+}

package/src/components/loading/index.ts

@@ -0,0 +1,123 @@
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { pops } from "../../Pops";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import type { PopsLoadingDetails } from "./indexType";
+
+export class PopsLoading {
+	constructor(details: PopsLoadingDetails) {
+		let config: Required<PopsLoadingDetails> = {
+			parent: document.body,
+			content: {
+				text: "加载中...",
+				icon: "loading",
+				style: "",
+			},
+			class: "",
+			only: false,
+			zIndex: 10000,
+			mask: {
+				enable: false,
+				clickEvent: {
+					toClose: false,
+					toHide: false,
+				},
+
+				clickCallBack: void 0,
+			},
+			animation: "pops-anim-fadein-zoom",
+			forbiddenScroll: false,
+
+			style: null,
+			addIndexCSS: true,
+		};
+		config = popsUtils.assign(config, details);
+		let guid = popsUtils.getRandomGUID();
+		const PopsType = "loading";
+
+		config = PopsHandler.handleOnly(PopsType, config);
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		let { contentPStyle } = PopsElementHandler.getContentStyle(
+			"loading",
+			config
+		);
+		let animHTML = PopsElementHandler.getAnimHTML(
+			guid,
+			PopsType,
+			config,
+			`
+            <div class="pops-loading-content">
+                ${
+									config.addIndexCSS
+										? `
+                <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>
+            `,
+			""
+		);
+
+		/**
+		 * 弹窗的主元素，包括动画层
+		 */
+
+		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);
+
+		return PopsHandler.handleResultDetails(eventDetails);
+	}
+}

package/src/components/loading/indexType.ts

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

package/src/components/panel/buttonType.ts

@@ -0,0 +1,60 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsButtonStyleType } from "../../types/button";
+import type { PopsIcon } from "../../types/icon";
+/**
+ * pops.panel的 button
+ */
+export interface PopsPanelButtonDetails extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * 类型
+	 */
+	type: "button";
+	/**
+	 * （可选）是否禁用
+	 */
+	disable?: boolean;
+	/**
+	 * 按钮的类型
+	 */
+	buttonType: PopsButtonStyleType;
+	/**
+	 * 按钮的文字
+	 */
+	buttonText: string | (() => string);
+	/**
+	 * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
+	 */
+	buttonIcon?: PopsIcon;
+	/**
+	 * 按钮的图标在右边
+	 */
+	buttonIsRightIcon?: boolean;
+	/**
+	 * 按钮的图标旋转
+	 */
+	buttonIconIsLoading?: boolean;
+	/**
+	 * 点击button触发的事件
+	 */
+	callback: (event: MouseEvent | PointerEvent) => void;
+}

package/src/components/panel/commonType.ts

@@ -0,0 +1,50 @@
+import { PopsPanelFormsTotalDetails } from "./indexType";
+
+/**
+ * 右侧容器的配置
+ */
+export interface PopsPanelRightAsideContainerOptions {
+	/** 把获取的项<li>元素添加到这个<ul>元素内 */
+	ulElement: HTMLUListElement;
+	/**  */
+	sectionContainerULElement?: HTMLUListElement;
+	/**  */
+	formContainerListElement?: HTMLLIElement;
+	/**  */
+	formHeaderDivElement?: HTMLElement | HTMLDivElement;
+}
+/**
+ * 通用配置
+ */
+export interface PopsPanelCommonDetails {
+	/**
+     * 在添加到<ul>元素后触发该回调
+     * @param formConfig 配置
+     * @param container 右侧容器的元素
+     * @example
+     * // 例如在type为own时
+     * afterAddToUListCallBack(formConfig, container) {
+     * DOMUtils.on(
+        container.formHeaderDivElement.querySelector(
+        "a"
+        ),
+        "click",
+        void 0,
+        () => {
+        PopsPanel.deleteValue("xxxx");
+        container.ulElement.querySelector(
+            "textarea"
+        ).value = xxxxx.defaultValue;
+        Qmsg.success("已重置");
+        }
+    );
+     * }
+     * 
+     * // 例如在type为forms时
+     * container内只有container.ulElement这个属性
+     */
+	afterAddToUListCallBack?: (
+		formConfig: PopsPanelFormsTotalDetails,
+		container: PopsPanelRightAsideContainerOptions
+	) => void;
+}

package/src/components/panel/deepMenuType.ts

@@ -0,0 +1,59 @@
+import type { PopsPanelFormsTotalDetails } from "./indexType";
+import type { PopsPanelFormsDetails } from "./formsType";
+import type { PopsPanelCommonDetails } from "./commonType";
+/**
+ * pops.panel的 深层菜单
+ */
+export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
+	/**
+	 * 类型
+	 */
+	type: "deepMenu";
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * （可选）右侧的文字
+	 */
+	rightText?: string;
+	/**
+	 * （可选）右侧的箭头图标，默认启用
+	 */
+	arrowRightIcon?: boolean;
+	/**
+	 * 点击整行触发的事件，可为异步函数
+	 * @param event click事件
+	 * @returns
+	 * + true 表示阻止进入深层菜单
+	 * + false （默认）表示允许进入深层菜单
+	 */
+	clickCallBack?: (
+		event: MouseEvent | PointerEvent,
+		formConfig: PopsPanelDeepMenuDetails
+	) => boolean | void;
+	/**
+	 * 菜单配置
+	 */
+	forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+	/**
+	 * （可选）头部的标题文字，没有的话默认是text
+	 */
+	headerTitle?: string;
+}

package/src/components/panel/formsType.ts

@@ -0,0 +1,32 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+import type { PopsPanelFormsTotalDetails } from "./indexType";
+
+/**
+ * pops.panel的 forms
+ */
+export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * 类型
+	 */
+	type: "forms";
+	/**
+	 * 子配置
+	 */
+	forms: PopsPanelFormsTotalDetails[];
+}