@whitesev/pops 2.2.8 → 2.3.0

package/src/components/prompt/index.ts

@@ -1,222 +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 { PopsPromptConfig } from "./config";
-import type { PopsPromptDetails } from "./types/index";
-
-export const PopsPrompt = {
-	init(details: PopsPromptDetails) {
-		const guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const popsType: PopsType = "prompt";
-
-		let config = PopsPromptConfig();
-		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: "promptCSS",
-				css: PopsCSS.promptCSS,
-			},
-		]);
-
-		// 先把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 { 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="${contentPStyle}">${
-				config.content.row
-					? '<textarea name="pops-input-text" pops="" placeholder="' +
-					  config.content.placeholder +
-					  '"></textarea>'
-					: '<input name="pops-input-text" pops="" placeholder="' +
-					  config.content.placeholder +
-					  '" type="' +
-					  (config.content.password ? "password" : "text") +
-					  '">'
-			}</div>${bottomBtnHTML}`,
-			bottomBtnHTML,
-			zIndex
-		);
-		/**
-		 * 弹窗的主元素，包括动画层
-		 */
-
-		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-		let {
-			popsElement: $pops,
-			inputElement: $input,
-			headerCloseBtnElement: $btnClose,
-			btnOkElement: $btnOk,
-			btnCancelElement: $btnCancel,
-			btnOtherElement: $btnOther,
-			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
-		);
-		/* 输入框赋值初始值 */
-
-		$input!.value = config.content.text;
-		PopsHandler.handlePromptClickEvent(
-			"close",
-			$input!,
-			$btnClose!,
-			eventDetails,
-
-			config.btn.close!.callback!
-		);
-
-		PopsHandler.handlePromptClickEvent(
-			"ok",
-			$input!,
-			$btnOk!,
-			eventDetails,
-
-			config.btn.ok!.callback!
-		);
-		PopsHandler.handlePromptClickEvent(
-			"cancel",
-			$input!,
-			$btnCancel!,
-			eventDetails,
-
-			config.btn.cancel!.callback!
-		);
-
-		PopsHandler.handlePromptClickEvent(
-			"other",
-			$input!,
-			$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,
-			});
-		}
-		/* 设置自动获取焦点 */
-		if (config.content.focus) {
-			$input.focus();
-		}
-		/* 设置自动选中所有文字 */
-		if (config.content.select) {
-			$input.select();
-		}
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};

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

@@ -1,55 +0,0 @@
-import type {
-	PopsTitleConfig,
-	PopsDragConfig,
-	PopsCommonConfig,
-	PopsMoreButtonConfig,
-} from "../../../types/components";
-
-/**
- * pops.prompt
- */
-export interface PopsPromptDetails
-	extends PopsTitleConfig,
-		PopsDragConfig,
-		PopsMoreButtonConfig<{
-			text: string;
-		}>,
-		PopsCommonConfig {
-	/**
-	 * 内容配置
-	 */
-	content: {
-		/**
-		 * 内容文字
-		 */
-		text: string;
-		/**
-		 * 是否是密码
-		 */
-		password?: boolean;
-		/**
-		 * 是否支持多行输入
-		 * @default false
-		 */
-		row?: boolean;
-		/**
-		 * 是否自动获取焦点
-		 * @default true
-		 */
-		focus?: boolean;
-		/**
-		 * 是否自动选择输入框的所有文字
-		 * @default false
-		 */
-		select?: boolean;
-		/**
-		 * 输入框内的提示文字
-		 * @default ""
-		 */
-		placeholder?: string;
-		/**
-		 * （可选）文字的自定义CSS
-		 */
-		style?: string;
-	};
-}

package/src/components/rightClickMenu/config.ts

@@ -1,130 +0,0 @@
-import { PopsIcon } from "../../PopsIcon";
-import type { PopsRightClickMenuDetails } from "./types";
-
-export const rightClickMenuConfig =
-	(): DeepRequired<PopsRightClickMenuDetails> => {
-		return {
-			target: document.documentElement,
-			targetSelector: null,
-			data: [
-				{
-					icon: PopsIcon.getIcon("search")!,
-					iconIsLoading: false,
-					text: "搜索",
-					item: [],
-					callback(clickEvent, contextMenuEvent, liElement) {
-						console.log("点击：" + this.text, [
-							clickEvent,
-							contextMenuEvent,
-							liElement,
-						]);
-					},
-				},
-				{
-					icon: PopsIcon.getIcon("documentCopy")!,
-					iconIsLoading: false,
-					text: "复制",
-					item: [],
-					callback(clickEvent, contextMenuEvent, liElement) {
-						console.log("点击：" + this.text, [
-							clickEvent,
-							contextMenuEvent,
-							liElement,
-						]);
-					},
-				},
-				{
-					icon: PopsIcon.getIcon("delete")!,
-					text: "删除",
-					iconIsLoading: false,
-					item: [],
-					callback(clickEvent, contextMenuEvent, liElement) {
-						console.log("点击：" + this.text, [
-							clickEvent,
-							contextMenuEvent,
-							liElement,
-						]);
-					},
-				},
-				{
-					icon: PopsIcon.getIcon("loading")!,
-					iconIsLoading: true,
-					text: "加载",
-					item: [],
-					callback(clickEvent, contextMenuEvent, liElement) {
-						console.log("点击：" + this.text, [
-							clickEvent,
-							contextMenuEvent,
-							liElement,
-						]);
-						return false;
-					},
-				},
-				{
-					icon: PopsIcon.getIcon("elemePlus")!,
-					iconIsLoading: true,
-					text: "饿了么",
-					callback(clickEvent, contextMenuEvent, liElement) {
-						console.log("点击：" + this.text, [
-							clickEvent,
-							contextMenuEvent,
-							liElement,
-						]);
-						return false;
-					},
-					item: [
-						{
-							icon: "",
-							iconIsLoading: false,
-							text: "处理文件",
-							item: [],
-							callback(clickEvent, contextMenuEvent, liElement) {
-								console.log("点击：" + this.text, [
-									clickEvent,
-									contextMenuEvent,
-									liElement,
-								]);
-							},
-						},
-						{
-							icon: "",
-							iconIsLoading: false,
-							text: "其它处理",
-							callback(clickEvent, contextMenuEvent, liElement) {
-								console.log("点击：" + this.text, [
-									clickEvent,
-									contextMenuEvent,
-									liElement,
-								]);
-							},
-							item: [
-								{
-									icon: PopsIcon.getIcon("view")!,
-									iconIsLoading: false,
-									text: "查看",
-									item: [],
-									callback(clickEvent, contextMenuEvent, liElement) {
-										console.log("点击：" + this.text, [
-											clickEvent,
-											contextMenuEvent,
-											liElement,
-										]);
-									},
-								},
-							],
-						},
-					],
-				},
-			],
-			chileMenuLeftOrRightDistance: 0,
-			childMenuTopOrBottomDistance: 0,
-			useShadowRoot: true,
-			className: "",
-			isAnimation: true,
-			only: false,
-			zIndex: 10000,
-			preventDefault: true,
-			style: null,
-			beforeAppendToPageCallBack() {},
-		};
-	};

package/src/components/rightClickMenu/index.css

@@ -1,88 +0,0 @@
-.pops-rightClickMenu {
-	--pops-right-context-color: #000000;
-	--pops-right-context-bg-color: #ffffff;
-	--pops-right-context-z-index: 10000;
-	--pops-right-context-menu-shadow-color: #cacaca;
-	--pops-right-context-menu-row-visited-color: #dfdfdf;
-	--pops-right-context-menu-row-hover-color: #dfdfdf;
-}
-.pops-rightClickMenu * {
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	-webkit-tap-highlight-color: transparent;
-	scrollbar-width: thin;
-}
-.pops-rightClickMenu {
-	position: fixed;
-	z-index: var(--pops-right-context-z-index);
-	text-align: center;
-	border-radius: 3px;
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--pops-right-context-color);
-	background-color: var(--pops-right-context-bg-color);
-	box-shadow: 0px 1px 6px 1px var(--pops-right-context-menu-shadow-color);
-}
-.pops-rightClickMenu-anim-grid {
-	display: grid;
-	transition: 0.3s;
-	grid-template-rows: 0fr;
-}
-.pops-rightClickMenu-anim-show {
-	grid-template-rows: 1fr;
-}
-.pops-rightClickMenu-is-visited {
-	background: var(--pops-right-context-menu-row-visited-color);
-}
-i.pops-rightClickMenu-icon {
-	height: 1em;
-	width: 1em;
-	line-height: normal;
-	align-content: center;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	fill: currentColor;
-	color: inherit;
-	font-size: inherit;
-	margin-right: 6px;
-}
-i.pops-rightClickMenu-icon[is-loading="true"] {
-	animation: rotating 2s linear infinite;
-}
-.pops-rightClickMenu li:hover {
-	background: var(--pops-right-context-menu-row-hover-color);
-	cursor: pointer;
-}
-.pops-rightClickMenu ul {
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: center;
-	overflow: hidden;
-}
-.pops-rightClickMenu ul li {
-	padding: 5px 10px;
-	margin: 5px 5px;
-	border-radius: 3px;
-	display: flex;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	text-align: left;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	align-items: center;
-}
-
-@media (prefers-color-scheme: dark) {
-	.pops-rightClickMenu {
-		--pops-right-context-menu-shadow-color: #3c3c3c;
-	}
-}