@whitesev/pops 1.4.0 → 1.5.0

package/src/components/alert/index.ts

@@ -0,0 +1,216 @@
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { pops } from "../../Pops";
+import type { PopsMode } from "../../types/main";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import type { PopsAlertDetails } from "./indexType";
+
+export class PopsAlert {
+	constructor(details: PopsAlertDetails) {
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.ninePalaceGridPosition,
+			pops.config.cssText.scrollbar,
+			pops.config.cssText.button,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+			pops.config.cssText.alertCSS,
+		]);
+
+		let config: Required<PopsAlertDetails> = {
+			title: {
+				text: "默认标题",
+				position: "left",
+				html: false,
+				style: "",
+			},
+			content: {
+				text: "默认内容",
+				html: false,
+				style: "",
+			},
+			btn: {
+				position: "flex-end",
+				ok: {
+					size: void 0,
+					enable: true,
+					icon: void 0,
+					rightIcon: false,
+					iconIsLoading: false,
+					text: "确定",
+					type: "primary",
+					callback: function (event) {
+						event.close();
+					},
+				},
+				close: {
+					enable: true,
+					callback: function (event) {
+						event.close();
+					},
+				},
+			},
+			class: "",
+			only: false,
+			width: "350px",
+			height: "200px",
+			position: "center",
+			animation: "pops-anim-fadein-zoom",
+			zIndex: 10000,
+			mask: {
+				enable: false,
+				clickEvent: {
+					toClose: false,
+					toHide: false,
+				},
+				clickCallBack: void 0,
+			},
+			drag: false,
+			dragLimit: true,
+			dragExtraDistance: 3,
+			dragMoveCallBack() {},
+			dragEndCallBack() {},
+			forbiddenScroll: false,
+			style: null,
+			beforeAppendToPageCallBack() {},
+		};
+		config = popsUtils.assign(config, details);
+		let guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType: PopsMode = "alert";
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
+			PopsType,
+			config
+		);
+		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
+			PopsType,
+			config
+		);
+		let animHTML = PopsElementHandler.getAnimHTML(
+			guid,
+			PopsType,
+			config,
+			`
+			<div 
+				class="pops-alert-title"
+				style="text-align: ${config.title.position};
+				${headerStyle}">
+				${
+					config.title.html
+						? config.title.text
+						: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+				}
+				${headerBtnHTML}
+			</div>
+			<div class="pops-alert-content" style="${contentStyle}">
+				${
+					config.content.html
+						? config.content.text
+						: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+				}
+			</div>
+			${bottomBtnHTML}`,
+			bottomBtnHTML
+		);
+		/**
+		 * 弹窗的主元素，包括动画层
+		 */
+		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!,
+			});
+		}
+
+		return PopsHandler.handleResultDetails(eventDetails);
+	}
+}

package/src/components/alert/indexType.ts

@@ -0,0 +1,30 @@
+import type {
+	PopsTitleConfig,
+	PopsContentConfig,
+	PopsDragConfig,
+	PopsCommonConfig,
+	PopsButtonConfig,
+} from "../../types/components";
+import type {
+	PopsButtonDetails,
+	PopsButtonDetailsAnyType,
+} from "../../types/button";
+
+/**
+ * pops.alert
+ */
+export interface PopsAlertDetails
+	extends PopsTitleConfig,
+		PopsContentConfig,
+		PopsDragConfig,
+		PopsCommonConfig {
+	/**
+	 * 按钮配置
+	 */
+	btn?: Partial<PopsButtonConfig["btn"]> & {
+		/**
+		 * 确定按钮
+		 */
+		ok?: Partial<PopsButtonDetails | PopsButtonDetailsAnyType>;
+	};
+}

package/src/components/confirm/index.css

@@ -0,0 +1,45 @@
+.pops[type-value] .pops-confirm-title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.pops[type-value="confirm"] .pops-confirm-title {
+	width: 100%;
+	height: var(--container-title-height);
+	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+}
+.pops[type-value="confirm"] .pops-confirm-title p[pops] {
+	width: 100%;
+	overflow: hidden;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	line-height: var(--container-title-height);
+}
+.pops[type-value="confirm"] .pops-confirm-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
+.pops[type-value="confirm"] .pops-confirm-content {
+	width: 100%;
+	height: calc(
+		100% - var(--container-title-height) - var(--container-bottom-btn-height)
+	);
+	overflow: auto;
+	word-break: break-word;
+}
+.pops[type-value="confirm"] .pops-confirm-btn {
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	padding: 10px 10px 10px 10px;
+	width: 100%;
+	height: var(--container-bottom-btn-height);
+	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	text-align: right;
+	line-height: var(--container-bottom-btn-height);
+	align-items: center;
+}

package/src/components/confirm/index.ts

@@ -0,0 +1,264 @@
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { pops } from "../../Pops";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import type { PopsConfirmDetails } from "./indexType";
+
+export class PopsConfirm {
+	constructor(details: PopsConfirmDetails) {
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.ninePalaceGridPosition,
+			pops.config.cssText.scrollbar,
+			pops.config.cssText.button,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+			pops.config.cssText.confirmCSS,
+		]);
+		let config: Required<PopsConfirmDetails> = {
+			title: {
+				text: "默认标题",
+				position: "left",
+				html: false,
+				style: "",
+			},
+			content: {
+				text: "默认内容",
+				html: false,
+				style: "",
+			},
+			btn: {
+				merge: false,
+				mergeReverse: false,
+				reverse: false,
+				position: "flex-end",
+				ok: {
+					enable: true,
+
+					size: void 0,
+
+					icon: void 0,
+					rightIcon: false,
+					iconIsLoading: false,
+					text: "确定",
+					type: "primary",
+					callback(event) {
+						event.close();
+					},
+				},
+				cancel: {
+					enable: true,
+
+					size: void 0,
+
+					icon: void 0,
+					rightIcon: false,
+					iconIsLoading: false,
+					text: "关闭",
+					type: "default",
+					callback(event) {
+						event.close();
+					},
+				},
+				other: {
+					enable: false,
+
+					size: void 0,
+
+					icon: void 0,
+					rightIcon: false,
+					iconIsLoading: false,
+					text: "其它按钮",
+					type: "default",
+					callback(event) {
+						event.close();
+					},
+				},
+				close: {
+					enable: true,
+					callback(event) {
+						event.close();
+					},
+				},
+			},
+			class: "",
+			only: false,
+			width: "350px",
+			height: "200px",
+			position: "center",
+			animation: "pops-anim-fadein-zoom",
+			zIndex: 10000,
+			mask: {
+				enable: false,
+				clickEvent: {
+					toClose: false,
+					toHide: false,
+				},
+
+				clickCallBack: void 0,
+			},
+			drag: false,
+			dragLimit: true,
+			dragExtraDistance: 3,
+			dragMoveCallBack() {},
+			dragEndCallBack() {},
+			forbiddenScroll: false,
+
+			style: null,
+			beforeAppendToPageCallBack() {},
+		};
+		config = popsUtils.assign(config, details);
+		let guid = popsUtils.getRandomGUID();
+		// 设置当前类型
+		const PopsType = "confirm";
+
+		config = PopsHandler.handleOnly(PopsType, config);
+
+		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
+
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
+			PopsType,
+			config
+		);
+		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
+			PopsType,
+			config
+		);
+		let animHTML = PopsElementHandler.getAnimHTML(
+			guid,
+			PopsType,
+			config,
+			`
+            <div class="pops-confirm-title" style="text-align: ${
+							config.title.position
+						};${headerStyle}">
+                            ${
+															config.title.html
+																? config.title.text
+																: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+														}
+                ${headerBtnHTML}
+                        </div>
+                        <div class="pops-confirm-content" style="${contentStyle}">
+                ${
+									config.content.html
+										? config.content.text
+										: `<p pops style="${contentPStyle}">${config.content.text}</p>`
+								}
+                
+                        </div>
+                        ${bottomBtnHTML}
+            `,
+			bottomBtnHTML
+		);
+		/**
+		 * 弹窗的主元素，包括动画层
+		 */
+		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+		let {
+			popsElement: $pops,
+			titleElement: $title,
+			headerCloseBtnElement: $btnClose,
+			btnOkElement: $btnOk,
+			btnCancelElement: $btnCancel,
+			btnOtherElement: $btnOther,
+		} = 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",
+			$btnClose!,
+			eventDetails,
+			config.btn.close!.callback!
+		);
+		PopsHandler.handleClickEvent(
+			"ok",
+			$btnOk!,
+			eventDetails!,
+			config.btn.ok!.callback!
+		);
+		PopsHandler.handleClickEvent(
+			"cancel",
+			$btnCancel!,
+			eventDetails,
+			config.btn.cancel!.callback!
+		);
+		PopsHandler.handleClickEvent(
+			"other",
+			$btnOther!,
+			eventDetails,
+			config.btn.other!.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) {
+			0;
+
+			PopsInstanceUtils.drag($pops!, {
+				dragElement: $title!,
+				limit: config.dragLimit,
+				extraDistance: config.dragExtraDistance,
+				moveCallBack: config.dragMoveCallBack,
+				endCallBack: config.dragEndCallBack,
+			});
+		}
+		return PopsHandler.handleResultDetails(eventDetails);
+	}
+}

package/src/components/confirm/indexType.ts

@@ -0,0 +1,17 @@
+import type {
+	PopsTitleConfig,
+	PopsContentConfig,
+	PopsDragConfig,
+	PopsCommonConfig,
+	PopsMoreButtonConfig,
+} from "../../types/components";
+
+/**
+ * pops.confirm
+ */
+export interface PopsConfirmDetails
+	extends PopsTitleConfig,
+		PopsContentConfig,
+		PopsMoreButtonConfig,
+		PopsDragConfig,
+		PopsCommonConfig {}

package/src/components/drawer/index.css

@@ -0,0 +1,47 @@
+.pops[type-value="drawer"] {
+	position: fixed;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+		0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+	overflow: hidden;
+	transition: all 0.3s;
+}
+.pops[type-value] .pops-drawer-title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pops[type-value="drawer"][direction="top"] {
+	width: 100%;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+.pops[type-value="drawer"][direction="bottom"] {
+	width: 100%;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+.pops[type-value="drawer"][direction="left"] {
+	height: 100%;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+.pops[type-value="drawer"][direction="right"] {
+	height: 100%;
+	top: 0;
+	bottom: 0;
+	right: 0;
+}
+.pops-drawer-content {
+	height: 100%;
+}
+.pops[type-value="drawer"] .pops-drawer-btn {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}