@whitesev/pops 2.2.8 → 2.3.0

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

@@ -1,30 +0,0 @@
-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/config.ts

@@ -1,90 +0,0 @@
-import type { PopsConfirmDetails } from "./types";
-
-export const PopsConfirmConfig = (): DeepRequired<PopsConfirmDetails> => {
-	return {
-		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 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "确定",
-				type: "primary",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			cancel: {
-				enable: true,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "关闭",
-				type: "default",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			other: {
-				enable: false,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "其它按钮",
-				type: "default",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			close: {
-				enable: true,
-				callback(detail: any) {
-					detail.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<PopsConfirmDetails>;
-};

package/src/components/confirm/index.ts

@@ -1,192 +0,0 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsConfirmConfig } from "./config";
-import type { PopsConfirmDetails } from "./types";
-
-export const PopsConfirm = {
-	init(details: PopsConfirmDetails) {
-		const guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const popsType: PopsType = "confirm";
-		let config = PopsConfirmConfig();
-		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: "confirmCSS",
-				css: PopsCSS.confirmCSS,
-			},
-		]);
-
-		// 先把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,
-			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) {
-			PopsInstanceUtils.drag($pops!, {
-				dragElement: $title!,
-				limit: config.dragLimit,
-				extraDistance: config.dragExtraDistance,
-				moveCallBack: config.dragMoveCallBack,
-				endCallBack: config.dragEndCallBack,
-			});
-		}
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};

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

@@ -1,17 +0,0 @@
-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/config.ts

@@ -1,89 +0,0 @@
-import type { PopsDrawerDetails } from "./types";
-
-export const PopsDrawerConfig = (): DeepRequired<PopsDrawerDetails> => {
-	return {
-		title: {
-			enable: true,
-			position: "center",
-			text: "默认标题",
-			html: false,
-			style: "",
-		},
-		content: {
-			text: "默认内容",
-			html: false,
-			style: "",
-		},
-		btn: {
-			merge: false,
-			mergeReverse: false,
-			reverse: false,
-			position: "flex-end",
-			ok: {
-				enable: true,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "确定",
-				type: "primary",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			cancel: {
-				enable: true,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "关闭",
-				type: "default",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			other: {
-				enable: false,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "其它按钮",
-				type: "default",
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-			close: {
-				enable: true,
-				callback(detail: any) {
-					detail.close();
-				},
-			},
-		},
-		mask: {
-			enable: true,
-			clickEvent: {
-				toClose: true,
-				toHide: false,
-			},
-			clickCallBack: null,
-		},
-		useShadowRoot: true,
-		class: "",
-		zIndex: 10000,
-		only: false,
-		direction: "right",
-		size: "30%",
-		lockScroll: false,
-		closeOnPressEscape: true,
-		openDelay: 0,
-		closeDelay: 0,
-		borderRadius: 0,
-
-		style: null,
-		beforeAppendToPageCallBack() {},
-		forbiddenScroll: false,
-	};
-};

package/src/components/drawer/index.css

@@ -1,35 +0,0 @@
-.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="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;
-}

package/src/components/drawer/index.ts

@@ -1,260 +0,0 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsDrawerConfig } from "./config";
-import type { PopsDrawerDetails } from "./types";
-
-export const PopsDrawer = {
-	init(details: PopsDrawerDetails) {
-		const guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const popsType: PopsType = "drawer";
-		let config = PopsDrawerConfig();
-		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: "drawerCSS",
-				css: PopsCSS.drawerCSS,
-			},
-		]);
-
-		// 先把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*/ `
-            ${
-							config.title.enable
-								? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${
-										config.title.html
-											? config.title.text
-											: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${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,
-			headerCloseBtnElement,
-			btnCancelElement,
-			btnOkElement,
-			btnOtherElement,
-		} = PopsHandler.handleQueryElement($anim, popsType);
-		let $pops = popsElement!;
-		let $headerCloseBtn = headerCloseBtnElement!;
-		let $btnCancel = btnCancelElement!;
-		let $btnOk = btnOkElement!;
-		let $btnOther = btnOtherElement!;
-		/**
-		 * 遮罩层元素
-		 */
-		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
-		);
-		/* 处理方向 */
-
-		$pops.setAttribute("direction", config.direction);
-
-		/* 处理border-radius */
-		/* 处理动画前的宽高 */
-		if (config.direction === "top") {
-			$pops.style.setProperty("height", "0");
-
-			$pops.style.setProperty(
-				"border-radius",
-				`0px 0px ${config.borderRadius}px ${config.borderRadius}px`
-			);
-		} else if (config.direction === "bottom") {
-			$pops.style.setProperty("height", "0");
-
-			$pops.style.setProperty(
-				"border-radius",
-				`${config.borderRadius}px ${config.borderRadius}px 0px 0px`
-			);
-		} else if (config.direction === "left") {
-			$pops.style.setProperty("width", "0");
-
-			$pops.style.setProperty(
-				"border-radius",
-				`0px ${config.borderRadius}px 0px ${config.borderRadius}px`
-			);
-		} else if (config.direction === "right") {
-			$pops.style.setProperty("width", "0");
-
-			$pops.style.setProperty(
-				"border-radius",
-				`${config.borderRadius}px 0px ${config.borderRadius}px 0px`
-			);
-		}
-
-		/* 按下Esc键触发关闭 */
-		if (config.closeOnPressEscape) {
-			PopsHandler.handleKeyboardEvent("Escape", [], function () {
-				eventDetails.close();
-			});
-		}
-		/* 待处理的点击事件列表 */
-		let needHandleClickEventList = [
-			{
-				type: "close",
-				ele: $headerCloseBtn,
-			},
-			{
-				type: "cancel",
-				ele: $btnCancel,
-			},
-			{
-				type: "ok",
-				ele: $btnOk,
-			},
-			{
-				type: "other",
-				ele: $btnOther,
-			},
-		];
-		needHandleClickEventList.forEach((item) => {
-			PopsHandler.handleClickEvent(
-				item.type as "close" | "cancel" | "ok" | "other",
-				item.ele,
-				eventDetails,
-				(_eventDetails_) => {
-					if (typeof (config.btn as any)[item.type].callback === "function") {
-						(config.btn as any)[item.type].callback(_eventDetails_);
-					}
-				}
-			);
-		});
-
-		/* 先隐藏，然后根据config.openDelay来显示 */
-		elementList.forEach((element) => {
-			element.style.setProperty("display", "none");
-			if (["top"].includes(config.direction)) {
-				$pops.style.setProperty("height", config.size.toString());
-
-				$pops.style.setProperty("transform", "translateY(-100%)");
-			} else if (["bottom"].includes(config.direction)) {
-				$pops.style.setProperty("height", config.size.toString());
-
-				$pops.style.setProperty("transform", "translateY(100%)");
-			} else if (["left"].includes(config.direction)) {
-				$pops.style.setProperty("width", config.size.toString());
-
-				$pops.style.setProperty("transform", "translateX(-100%)");
-			} else if (["right"].includes(config.direction)) {
-				$pops.style.setProperty("width", config.size.toString());
-
-				$pops.style.setProperty("transform", "translateX(100%)");
-			}
-			element.style.setProperty("display", "");
-		});
-		/* 创建到页面中 */
-
-		popsDOMUtils.append($shadowRoot, elementList);
-		if (typeof config.beforeAppendToPageCallBack === "function") {
-			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-		}
-
-		popsDOMUtils.appendBody($shadowContainer);
-		popsUtils.setTimeout(() => {
-			popsUtils.setTimeout(() => {
-				$pops.style.setProperty("transform", "");
-			}, config.openDelay);
-		}, 50);
-
-		if ($mask != null) {
-			$anim.after($mask);
-		}
-
-		PopsHandler.handlePush(popsType, {
-			guid: guid,
-			animElement: $anim,
-			popsElement: $pops,
-			maskElement: $mask!,
-			$shadowContainer: $shadowContainer,
-			$shadowRoot: $shadowRoot,
-		});
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};