@whitesev/pops 2.2.8 → 2.3.0

package/src/css/index.css

@@ -1,254 +0,0 @@
-@charset "utf-8";
-.pops * {
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	-webkit-tap-highlight-color: transparent;
-	/* 代替::-webkit-scrollbar */
-	scrollbar-width: thin;
-}
-.pops {
-	--pops-bg-opacity: 1;
-	--pops-bd-opacity: 1;
-	--pops-font-size: 16px;
-	interpolate-size: allow-keywords;
-	--pops-color: #000000;
-	--pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-	--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));
-	--pops-box-shadow-color: rgba(0, 0, 0, 0.12);
-	--pops-title-color: #000000;
-	--pops-title-border-color: var(--pops-bd-color);
-	--pops-content-color: #000000;
-	--pops-bottom-btn-controls-border-color: var(--pops-bd-color);
-	--pops-components-is-disabled-text-color: #a8abb2;
-	--pops-components-is-disabled-bg-color: #f5f7fa;
-}
-@media (prefers-color-scheme: dark) {
-	.pops {
-		--pops-mask-bg-opacity: 0.8;
-		--pops-color: #ffffff;
-		--pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));
-		--pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
-		--pops-box-shadow-color: rgba(81, 81, 81, 0.12);
-		--pops-title-color: #e8e8e8;
-		--pops-title-border-color: var(--pops-bd-color);
-		--pops-content-color: #e5e5e5;
-		--pops-components-is-disabled-text-color: #a8abb2;
-		--pops-components-is-disabled-bg-color: #262727;
-	}
-}
-.pops {
-	color: var(--pops-color);
-	background-color: var(--pops-bg-color);
-	border: 1px solid var(--pops-bd-color);
-	border-radius: 4px;
-	font-size: var(--pops-font-size);
-	line-height: normal;
-	box-shadow: 0 0 12px var(--pops-box-shadow-color);
-	box-sizing: border-box;
-	overflow: hidden;
-	transition: all 0.35s;
-	display: flex;
-	flex-direction: column;
-}
-.pops-anim {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.pops-anim[anim=""] {
-	top: unset;
-	right: unset;
-	bottom: unset;
-	left: unset;
-	width: unset;
-	height: unset;
-	transition: none;
-}
-/* 底部图标动画和样式 */
-.pops i.pops-bottom-icon[is-loading="true"] {
-	animation: rotating 2s linear infinite;
-}
-.pops i.pops-bottom-icon {
-	height: 1em;
-	width: 1em;
-	line-height: normal;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	fill: currentColor;
-	color: inherit;
-	font-size: inherit;
-}
-
-/* 遮罩层样式 */
-.pops-mask {
-	--pops-mask-bg-opacity: 0.4;
-	--pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));
-}
-.pops-mask {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border: 0;
-	border-radius: 0;
-	background-color: var(--pops-mask-bg-color);
-	box-shadow: none;
-	transition: none;
-}
-
-.pops-header-controls button.pops-header-control[type][data-header] {
-	float: right;
-	margin: 0 0;
-	outline: 0;
-	border: 0;
-	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
-	background-color: transparent;
-	color: #888;
-	cursor: pointer;
-}
-.pops-header-controls button.pops-header-control[data-type="max"],
-.pops-header-controls button.pops-header-control[data-type="mise"],
-.pops-header-controls button.pops-header-control[data-type="min"] {
-	outline: 0 !important;
-	border: 0;
-	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
-	background-color: transparent;
-	color: rgb(136, 136, 136);
-	cursor: pointer;
-	transition: all 0.3s ease-in-out;
-}
-button.pops-header-control i {
-	color: rgb(144, 147, 153);
-	font-size: inherit;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	fill: currentColor;
-}
-button.pops-header-control svg {
-	height: 1.25em;
-	width: 1.25em;
-}
-button.pops-header-control {
-	right: 15px;
-	padding: 0;
-	border: none;
-	outline: 0;
-	background: 0 0;
-	cursor: pointer;
-	position: unset;
-	line-height: normal;
-}
-button.pops-header-control i:hover {
-	color: rgb(64, 158, 255);
-}
-.pops-header-controls[data-margin] button.pops-header-control {
-	margin: 0 6px;
-	display: flex;
-	align-items: center;
-}
-.pops[type-value] .pops-header-controls {
-	display: flex;
-	gap: 6px;
-}
-
-/* 代码块 <code> */
-.pops code {
-	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-	font-size: 0.85em;
-	color: #000;
-	background-color: #f0f0f0;
-	border-radius: 3px;
-	border: 0;
-	padding: 0.2em 0;
-	white-space: normal;
-	background: #f5f5f5;
-	text-wrap: wrap;
-	text-align: left;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.4;
-	-moz-tab-size: 8;
-	-o-tab-size: 8;
-	tab-size: 8;
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-	direction: ltr;
-}
-
-.pops code::before,
-.pops code::after {
-	letter-spacing: -0.2em;
-	content: "\00a0";
-}
-
-/* 标题 */
-.pops .pops-title {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: 1px solid var(--pops-title-border-color);
-	width: 100%;
-	height: var(--container-title-height);
-}
-/* 标题-普通文本 */
-.pops .pops-title p[pops] {
-	color: var(--pops-title-color);
-	width: 100%;
-	overflow: hidden;
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-}
-
-/* 内容 */
-.pops .pops-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-/* 内容-普通文本 */
-.pops .pops-content p[pops] {
-	color: var(--pops-content-color);
-	padding: 5px 10px;
-	text-indent: 15px;
-}
-
-/* 底部-按钮组 */
-.pops .pops-botttom-btn-controls {
-	display: flex;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	border-top: 1px solid var(--pops-bottom-btn-controls-border-color);
-	text-align: right;
-	align-items: center;
-}

package/src/css/ninePalaceGridPosition.css

@@ -1,50 +0,0 @@
-.pops[position="top_left"] {
-	position: fixed;
-	top: 0;
-	left: 0;
-}
-.pops[position="top"] {
-	position: fixed;
-	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
-}
-.pops[position="top_right"] {
-	position: fixed;
-	top: 0;
-	right: 0;
-}
-.pops[position="center_left"] {
-	position: fixed;
-	top: 50%;
-	left: 0;
-	transform: translateY(-50%);
-}
-.pops[position="center"] {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-.pops[position="center_right"] {
-	position: fixed;
-	top: 50%;
-	right: 0;
-	transform: translateY(-50%);
-}
-.pops[position="bottom_left"] {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-}
-.pops[position="bottom"] {
-	position: fixed;
-	bottom: 0;
-	left: 50%;
-	transform: translate(-50%, 0);
-}
-.pops[position="bottom_right"] {
-	position: fixed;
-	right: 0;
-	bottom: 0;
-}

package/src/css/scrollbar.css

@@ -1,22 +0,0 @@
-/* ::-webkit-scrollbar 是非标准的css */
-/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */
-.pops ::-webkit-scrollbar {
-	width: 6px;
-	height: 0;
-}
-
-/* 滚动条轨道 */
-.pops ::-webkit-scrollbar-track {
-	width: 0;
-}
-/* 滚动条滑块 */
-.pops ::-webkit-scrollbar-thumb {
-	min-height: 28px;
-	border-radius: 2em;
-	background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));
-	background-clip: padding-box;
-}
-/* 滚动条滑块 */
-.pops ::-webkit-scrollbar-thumb:hover {
-	background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));
-}

package/src/handler/PopsElementHandler.ts

@@ -1,325 +0,0 @@
-import type { PopsAlertDetails } from "../components/alert/types";
-import type { PopsConfirmDetails } from "../components/confirm/types";
-import type { PopsIframeDetails } from "../components/iframe/types";
-import type { PopsIconType } from "../types/icon";
-import type {
-	PopsSupportAnimDetails,
-	PopsSupportBottomBtnDetails,
-	PopsSupportContentDetails,
-	PopsSupportHeaderTitleDetails,
-	PopsSupportAnimDetailsType,
-	PopsSupportBottomBtnDetailsType,
-	PopsSupportContentDetailsType,
-	PopsSupportHeaderTitleDetailsType,
-} from "../types/main";
-import { PopsIcon } from "../PopsIcon";
-import { popsDOMUtils } from "../utils/PopsDOMUtils";
-
-export const PopsElementHandler = {
-	/**
-	 * 获取遮罩层HTML
-	 * @param guid
-	 * @param zIndex z-index
-	 * @param style
-	 */
-	createMask(guid: string, zIndex: number = 101, style = ""): string {
-		zIndex = zIndex - 100;
-		if (style.startsWith(";")) {
-			style = style.replace(";", "");
-		}
-		return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
-	},
-	/**
-	 * 获取动画层HTML
-	 * @param guid
-	 * @param type
-	 * @param config
-	 * @param html
-	 * @param bottomBtnHTML
-	 * @param zIndex
-	 */
-	createAnim(
-		guid: string,
-		type: PopsSupportAnimDetailsType,
-		config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails],
-		html = "",
-		bottomBtnHTML = "",
-		zIndex: number
-	) {
-		let __config = config as PopsAlertDetails;
-		let popsAnimStyle = "";
-		let popsStyle = "";
-		let popsPosition = __config.position || "";
-		if (config.zIndex != null) {
-			popsAnimStyle += `z-index: ${zIndex};`;
-			popsStyle += `z-index: ${zIndex};`;
-		}
-		if (__config.width != null) {
-			popsStyle += `width: ${__config.width};`;
-		}
-		if (__config.height != null) {
-			popsStyle += `height: ${__config.height};`;
-		}
-		let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
-		return /*html*/ `
-		<div class="pops-anim" anim="${
-			__config.animation || ""
-		}" style="${popsAnimStyle}" data-guid="${guid}">${
-			config.style != null
-				? `<style tyle="text/css">${config.style}</style>`
-				: ""
-		}
-			<div class="pops ${
-				config.class || ""
-			}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
-		</div>`;
-	},
-	/**
-	 * 获取顶部按钮层HTML
-	 * @param type
-	 * @param config
-	 */
-	createHeader(
-		type: PopsSupportHeaderTitleDetailsType,
-		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
-	): string {
-		if (!config.btn) {
-			return "";
-		}
-		let confirm_config = config as PopsConfirmDetails;
-		if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
-			return "";
-		}
-		let resultHTML = "";
-		// let btnStyle = "";
-		let closeHTML = "";
-		let iframe_config = config as PopsIframeDetails;
-		if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
-			/* iframe的 */
-			let topRightButtonHTML = "";
-			iframe_config.topRightButton.split("|").forEach((item: string) => {
-				// 最小化、最大化、窗口化、关闭按钮
-				item = item.toLowerCase();
-				topRightButtonHTML += /*html*/ `
-                <button class="pops-header-control" type="button" data-type="${item}">
-                    <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
-                </button>`;
-			});
-			resultHTML = /*html*/ `
-            <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
-		} else {
-			if (confirm_config.btn?.close?.enable) {
-				// 关闭按钮
-				closeHTML = /*html*/ `
-                <div class="pops-header-controls">
-                    <button class="pops-header-control" type="button" data-type="close" data-header>
-                    	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
-                    </button>
-                </div>`;
-			}
-			resultHTML = closeHTML;
-		}
-
-		return resultHTML;
-	},
-	/**
-	 * 获取标题style
-	 * @param type 弹窗类型
-	 * @param config 弹窗配置
-	 */
-	createHeaderStyle(
-		type: PopsSupportHeaderTitleDetailsType,
-		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
-	) {
-		return {
-			headerStyle: config?.title?.html ? config?.title?.style || "" : "",
-			headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
-		};
-	},
-	/**
-	 * 获取底部按钮层HTML
-	 * @param type
-	 * @param config
-	 */
-	createBottom(
-		type: PopsSupportBottomBtnDetailsType,
-		config: Omit<
-			PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails],
-			"content"
-		>
-	): string {
-		if (config.btn == null) {
-			// 未设置btn参数
-			return "";
-		}
-		let confirm_config = config as Required<PopsConfirmDetails>;
-		if (
-			!(
-				config.btn?.ok?.enable ||
-				confirm_config.btn?.cancel?.enable ||
-				confirm_config.btn?.other?.enable
-			)
-		) {
-			// 确定、取消、其它按钮都未启用直接返回
-			return "";
-		}
-		let btnStyle = "";
-		let resultHTML = "";
-		let okHTML = "";
-		let cancelHTML = "";
-		let ohterHTML = "";
-
-		if (config.btn.position) {
-			btnStyle += `justify-content: ${config.btn.position};`;
-		}
-
-		if (confirm_config.btn.reverse) {
-			btnStyle += "flex-direction: row-reverse;";
-		}
-		if (config.btn?.ok?.enable) {
-			/* 处理确定按钮的尺寸问题 */
-			let okButtonSizeClassName = "";
-			if (config.btn.ok.size === "large") {
-				okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
-			} else if (config.btn.ok.size === "small") {
-				okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
-			}
-			let okIconHTML = "";
-			let okIcon = confirm_config.btn.ok!.icon! as PopsIconType | string;
-			if (okIcon !== "") {
-				// 判断图标是否是svg库内的
-				let iconHTML = "";
-				if (PopsIcon.hasIcon(okIcon)) {
-					iconHTML = PopsIcon.getIcon(okIcon)!;
-				} else {
-					iconHTML = okIcon;
-				}
-				iconHTML = iconHTML || "";
-				okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
-			}
-			okHTML = /*html*/ `
-            <button 
-				class="pops-${type}-btn-ok ${okButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.ok?.type}"
-				data-has-icon="${(confirm_config.btn.ok!.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
-            >${okIconHTML}<span>${config.btn.ok.text}</span>
-            </button>`;
-		}
-
-		if (confirm_config.btn?.cancel?.enable) {
-			/* 处理取消按钮的尺寸问题 */
-			let cancelButtonSizeClassName = "";
-
-			if (confirm_config.btn.cancel.size === "large") {
-				cancelButtonSizeClassName =
-					"pops-button-" + confirm_config.btn.cancel.size;
-			} else if (confirm_config.btn.cancel.size === "small") {
-				cancelButtonSizeClassName =
-					"pops-button-" + confirm_config.btn.cancel.size;
-			}
-			let cancelIconHTML = "";
-			let cancelIcon = confirm_config.btn.cancel!.icon as PopsIconType | string;
-			if (cancelIcon !== "") {
-				let iconHTML = "";
-				// 判断图标是否是svg库内的
-				if (PopsIcon.hasIcon(cancelIcon)) {
-					iconHTML = PopsIcon.getIcon(cancelIcon)!;
-				} else {
-					iconHTML = cancelIcon;
-				}
-				iconHTML = iconHTML || "";
-				cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
-			}
-			cancelHTML = /*html*/ `
-            <button
-				class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.cancel.type}"
-				data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
-            >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
-            </button>`;
-		}
-
-		if (confirm_config.btn?.other?.enable) {
-			/* 处理其它按钮的尺寸问题 */
-			let otherButtonSizeClassName = "";
-
-			if (confirm_config.btn.other.size === "large") {
-				otherButtonSizeClassName =
-					"pops-button-" + confirm_config.btn.other.size;
-			} else if (confirm_config.btn.other.size === "small") {
-				otherButtonSizeClassName =
-					"pops-button-" + confirm_config.btn.other.size;
-			}
-			let otherIconHTML = "";
-			let otherIcon = confirm_config.btn.other!.icon as PopsIconType | string;
-			if (otherIcon !== "") {
-				let iconHTML = "";
-				// 判断图标是否是svg库内的
-				if (PopsIcon.hasIcon(otherIcon)) {
-					iconHTML = PopsIcon.getIcon(otherIcon)!;
-				} else {
-					otherIcon;
-				}
-				iconHTML = iconHTML || "";
-				otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
-			}
-			ohterHTML = /*html*/ `
-            <button
-				class="pops-${type}-btn-other ${otherButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.other.type}"
-				data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.other.rightIcon}"
-            >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
-            </button>`;
-		}
-
-		if (confirm_config.btn.merge) {
-			let flexStyle = "display: flex;";
-			if (confirm_config.btn.mergeReverse) {
-				flexStyle += "flex-direction: row-reverse;";
-			} else {
-				flexStyle += "flex-direction: row;";
-			}
-			resultHTML = /*html*/ `
-            <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div 
-                    class="pops-${type}-btn-merge"
-                    style="${flexStyle}">${okHTML}${cancelHTML}</div>
-            </div>
-            `;
-		} else {
-			resultHTML = /*html*/ `<div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${okHTML}${cancelHTML}${ohterHTML}</div>`;
-		}
-		return resultHTML;
-	},
-	/**
-	 * 获取内容style
-	 * @param type 弹窗类型
-	 * @param config 弹窗配置
-	 */
-	createContentStyle(
-		type: PopsSupportContentDetailsType,
-		config: PopsSupportContentDetails[keyof PopsSupportContentDetails]
-	) {
-		return {
-			contentStyle: (config?.content as any)?.html
-				? config?.content?.style || ""
-				: "",
-
-			contentPStyle: (config?.content as any)?.html
-				? ""
-				: config?.content?.style || "",
-		};
-	},
-	/**
-	 * 将html转换成元素
-	 * @param html
-	 */
-	parseElement<T extends HTMLElement>(html: string): T {
-		return popsDOMUtils.parseTextToDOM(html);
-	},
-};