@whitesev/pops 2.0.6 → 2.0.8

package/src/components/drawer/index.ts

@@ -7,8 +7,8 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsDrawerConfig } from "./config";
 import type { PopsDrawerDetails } from "./indexType";
 
-export class PopsDrawer {
-	constructor(details: PopsDrawerDetails) {
+export const PopsDrawer = {
+	init(details: PopsDrawerDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "drawer";
@@ -215,8 +215,8 @@ export class PopsDrawer {
 		}
 
 		popsDOMUtils.appendBody($shadowContainer);
-		setTimeout(() => {
-			setTimeout(() => {
+		popsUtils.setTimeout(() => {
+			popsUtils.setTimeout(() => {
 				$pops.style.setProperty("transform", "");
 			}, config.openDelay);
 		}, 50);
@@ -233,6 +233,7 @@ export class PopsDrawer {
 			$shadowContainer: $shadowContainer,
 			$shadowRoot: $shadowRoot,
 		});
-		return PopsHandler.handleResultDetails(eventDetails);
-	}
-}
+		let result = PopsHandler.handleResultDetails(eventDetails);
+		return result;
+	},
+};

package/src/components/drawer/indexType.ts

@@ -18,36 +18,44 @@ export interface PopsDrawerDetails
 	 */
 	title?: Partial<PopsTitleConfig["title"]> & {
 		/**
-		 * 是否启用，默认true
+		 * 是否启用
+		 * @default true
 		 */
 		enable: boolean;
 	};
 	/**
-	 * 打开的方向，默认为right
+	 * 打开的方向
+	 * @default "right"
 	 */
 	direction?: "top" | "bottom" | "left" | "right";
 	/**
 	 * 窗体的大小; 当使用 number 类型时; 以像素为单位，默认为30%
+	 * @default "30%"
 	 */
 	size?: string | number;
 	/**
 	 * 是否在 Drawer 出现时将 body 滚动锁定，默认为false
+	 * @default false
 	 */
 	lockScroll?: boolean;
 	/**
 	 * 是否可以通过按下 ESC 关闭 Drawer，默认为true
+	 * @default true'
 	 */
 	closeOnPressEscape?: boolean;
 	/**
 	 * 打开的延时时间，单位毫秒，默认为0
+	 * @default 0
 	 */
 	openDelay?: number;
 	/**
 	 * 关闭的延时时间，单位毫秒，默认为0
+	 * @default 0
 	 */
 	closeDelay?: number;
 	/**
 	 * border-radius，根据direction自动适应，默认为5
+	 * @default 5
 	 */
 	borderRadius?: number;
 }

package/src/components/folder/index.ts

@@ -10,8 +10,8 @@ import { PopsFolderConfig } from "./config";
 import { Folder_ICON } from "./folderIcon";
 import type { PopsFolderDataConfig, PopsFolderDetails } from "./indexType";
 
-export class PopsFolder {
-	constructor(details: PopsFolderDetails) {
+export const PopsFolder = {
+	init(details: PopsFolderDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "folder";
@@ -713,12 +713,12 @@ export class PopsFolder {
 
 									downloadIframeLinkElement.src = downloadInfo.url;
 									downloadIframeLinkElement.onload = function () {
-										setTimeout(() => {
+										popsUtils.setTimeout(() => {
 											downloadIframeLinkElement.remove();
 										}, 1000);
 									};
 									$shadowRoot.appendChild(downloadIframeLinkElement);
-									setTimeout(() => {
+									popsUtils.setTimeout(() => {
 										downloadIframeLinkElement.remove();
 									}, 3 * 60 * 1000);
 								} else {
@@ -1034,6 +1034,7 @@ export class PopsFolder {
 			$shadowContainer: $shadowContainer,
 			$shadowRoot: $shadowRoot,
 		});
-		return PopsHandler.handleResultDetails(eventDetails);
-	}
-}
+		let result = PopsHandler.handleResultDetails(eventDetails);
+		return result;
+	},
+};

package/src/components/folder/indexType.ts

@@ -79,10 +79,13 @@ export interface PopsFolderDetails
 		name: "fileName" | "fileSize" | "latestTime";
 		/**
 		 * 是否降序，默认false（升序）
+		 * @default false
 		 */
 		isDesc: boolean;
 		/**
-		 * 触发排序的回调，如果返回true，则中止内部的排序
+		 * 触发排序的回调
+		 * @returns
+		 * + true 中止内部的排序
 		 */
 		callback?: (
 			targert: HTMLElement,

package/src/components/iframe/index.ts

@@ -10,8 +10,8 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsIframeConfig } from "./config";
 import type { PopsIframeDetails } from "./indexType";
 
-export class PopsIframe {
-	constructor(details: PopsIframeDetails) {
+export const PopsIframe = {
+	init(details: PopsIframeDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "iframe";
@@ -20,7 +20,7 @@ export class PopsIframe {
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
 		if (config.url == null) {
-			throw "config.url不能为空";
+			throw new Error("config.url不能为空");
 		}
 		config = PopsHandler.handleOnly(PopsType, config);
 
@@ -331,5 +331,5 @@ export class PopsIframe {
 
 		let result = PopsHandler.handleResultDetails(eventDetails);
 		return result;
-	}
-}
+	},
+};

package/src/components/iframe/indexType.ts

@@ -123,6 +123,7 @@ export interface PopsIframeDetails
 	};
 	/**
 	 * 加载的地址，默认为window.location.href
+	 * @default window.location.href
 	 */
 	url?: string;
 	/**
@@ -131,6 +132,7 @@ export interface PopsIframeDetails
 	topRightButton: "min|max|mise|close";
 	/**
 	 * 是否启用沙箱，默认false
+	 * @default false
 	 */
 	sandbox?: boolean;
 	/**

package/src/components/loading/index.ts

@@ -7,8 +7,8 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingConfig } from "./config";
 import type { PopsLoadingDetails } from "./indexType";
 
-export class PopsLoading {
-	constructor(details: PopsLoadingDetails) {
+export const PopsLoading = {
+	init(details: PopsLoadingDetails) {
 		let config = PopsLoadingConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
@@ -106,6 +106,7 @@ export class PopsLoading {
 			popsDOMUtils.css($anim, "position", "absolute !important");
 			$mask && popsDOMUtils.css($mask, "position", "absolute !important");
 		}
-		return PopsHandler.handleResultDetails(eventDetails);
-	}
-}
+		let result = PopsHandler.handleResultDetails(eventDetails);
+		return result;
+	},
+};

package/src/components/loading/indexType.ts

@@ -13,8 +13,9 @@ export interface PopsLoadingDetails
 	> {
 	/**
 	 * 父元素，默认为document.body
+	 * @default document.body
 	 */
-	parent: HTMLElement;
+	parent?: HTMLElement;
 	/**
 	 * 内容配置
 	 */
@@ -26,6 +27,7 @@ export interface PopsLoadingDetails
 	};
 	/**
 	 * （可选）添加主CSS，默认为true，当页面中存在anim覆盖时，可能会有一些样式问题，取消添加该CSS即可解决
+	 * @default true
 	 */
 	addIndexCSS?: boolean;
 	/**

package/src/components/panel/PanelHandleContentDetails.ts

@@ -5,8 +5,7 @@ import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import type { PopsAlertDetails } from "../alert/indexType";
-import type { PopsTooltipResult } from "../tooltip";
-import type { PopsToolTipDetails } from "../tooltip/indexType";
+import type { PopsTooltip } from "../tooltip";
 import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelRightAsideContainerOptions } from "./commonType";
 import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
@@ -441,7 +440,8 @@ export const PanelHandleContentDetails = () => {
 		 */
 		createSectionContainerItem_slider_new(formConfig: PopsPanelSliderDetails) {
 			let liElement = document.createElement("li");
-			(liElement as any)["__formConfig__"] = formConfig;
+			// @ts-ignore
+			liElement["__formConfig__"] = formConfig;
 			this.setElementClassName(liElement, formConfig.className);
 			this.setElementAttributes(liElement, formConfig.attributes);
 			this.setElementProps(liElement, formConfig.props);
@@ -533,40 +533,40 @@ export const PanelHandleContentDetails = () => {
 							percent: number;
 						}
 					>(),
-					tooltip: null as any as PopsTooltipResult<PopsToolTipDetails>,
+					tooltip: null as any as ReturnType<typeof PopsTooltip.init>,
 				},
 				$ele: {
-					slider: liElement.querySelector<HTMLDivElement>(".pops-slider")!,
-					runAway: liElement.querySelector<HTMLDivElement>(
+					slider: liElement.querySelector<HTMLElement>(".pops-slider")!,
+					runAway: liElement.querySelector<HTMLElement>(
 						".pops-slider__runway"
 					)!,
-					bar: liElement.querySelector<HTMLDivElement>(".pops-slider__bar")!,
-					buttonWrapper: liElement.querySelector<HTMLDivElement>(
+					bar: liElement.querySelector<HTMLElement>(".pops-slider__bar")!,
+					buttonWrapper: liElement.querySelector<HTMLElement>(
 						".pops-slider__button-wrapper"
 					)!,
-					button: liElement.querySelector<HTMLDivElement>(
-						".pops-slider__button"
-					)!,
+					button: liElement.querySelector<HTMLElement>(".pops-slider__button")!,
 				},
 				$interval: {
 					isCheck: false,
 				},
-				$tooltip: null as any,
+				$tooltip: null as any as ReturnType<
+					typeof popsUtils.AnyTouch
+				>["prototype"],
 				init() {
 					this.initEleData();
 					this.setToolTipEvent();
 					this.setPanEvent();
 					this.setRunAwayClickEvent();
 					this.intervalInit();
-					if (formConfig.disabled) {
+					if (this.isFormConfigDisabledDrag()) {
 						this.disableDrag();
 					}
 				},
 				/**
 				 * 10s内循环获取slider的宽度等信息
 				 * 获取到了就可以初始化left的值
-				 * @param {number} [checkStepTime=200] 每次检测的间隔时间
-				 * @param {number} [maxTime=10000] 最大的检测时间
+				 * @param [checkStepTime=200] 每次检测的间隔时间
+				 * @param [maxTime=10000] 最大的检测时间
 				 */
 				intervalInit(checkStepTime = 200, maxTime = 10000) {
 					if (this.$interval.isCheck) {
@@ -576,11 +576,11 @@ export const PanelHandleContentDetails = () => {
 					let isSuccess = false;
 					let oldTotalWidth = this.$data.totalWidth;
 					let timer: number | undefined = void 0;
-					let interval = setInterval(() => {
+					let interval = popsUtils.setInterval(() => {
 						if (isSuccess) {
 							this.$interval.isCheck = false;
-							clearTimeout(timer);
-							clearInterval(interval);
+							popsUtils.clearTimeout(timer);
+							popsUtils.clearInterval(interval);
 						} else {
 							this.initTotalWidth();
 							if (this.$data.totalWidth !== 0) {
@@ -598,8 +598,8 @@ export const PanelHandleContentDetails = () => {
 						}
 					}, checkStepTime);
 					/* 最长检测时间是10s */
-					timer = setTimeout(() => {
-						clearInterval(interval);
+					timer = popsUtils.setTimeout(() => {
+						popsUtils.clearInterval(interval);
 					}, maxTime);
 				},
 				/**
@@ -610,10 +610,14 @@ export const PanelHandleContentDetails = () => {
 					this.$ele.slider.setAttribute("data-max", this.max.toString());
 					this.$ele.slider.setAttribute("data-value", this.value.toString());
 					this.$ele.slider.setAttribute("data-step", this.step.toString());
-					(this.$ele.slider as any)["data-min"] = this.min;
-					(this.$ele.slider as any)["data-max"] = this.max;
-					(this.$ele.slider as any)["data-value"] = this.value;
-					(this.$ele.slider as any)["data-step"] = this.step;
+					// @ts-ignore
+					this.$ele.slider["data-min"] = this.min;
+					// @ts-ignore
+					this.$ele.slider["data-max"] = this.max;
+					// @ts-ignore
+					this.$ele.slider["data-value"] = this.value;
+					// @ts-ignore
+					this.$ele.slider["data-step"] = this.step;
 				},
 				/**
 				 * 初始化滑块的总长度的数据(px)
@@ -733,7 +737,6 @@ export const PanelHandleContentDetails = () => {
 				/**
 				 * 判断数字是否是浮点数
 				 * @param num
-				 * @returns
 				 */
 				isFloat(num: number) {
 					return Number(num) === num && num % 1 !== 0;
@@ -750,6 +753,7 @@ export const PanelHandleContentDetails = () => {
 				},
 				/**
 				 * 根据拖拽距离获取滑块应该在的区间和值
+				 * @param dragX
 				 */
 				getDragInfo(dragX: number) {
 					let result = this.$data.stepBlockMap.get(0);
@@ -766,7 +770,7 @@ export const PanelHandleContentDetails = () => {
 				},
 				/**
 				 * 获取滑块的当前脱拖拽占据的百分比
-				 * @param {number} dragWidth
+				 * @param dragWidth
 				 */
 				getSliderPositonPercent(dragWidth: number) {
 					return dragWidth / this.$data.totalWidth;
@@ -819,6 +823,23 @@ export const PanelHandleContentDetails = () => {
 						"pops-slider-is-disabled"
 					);
 				},
+				/**
+				 * 判断当前滑块是否被禁用（配置中判断）
+				 */
+				isFormConfigDisabledDrag() {
+					if (
+						typeof formConfig.disabled === "function" ||
+						typeof formConfig.disabled === "boolean"
+					) {
+						let isDisabled =
+							typeof formConfig.disabled === "function"
+								? formConfig.disabled()
+								: formConfig.disabled;
+						return isDisabled;
+					} else {
+						return false;
+					}
+				},
 				/**
 				 * 设置进度条点击定位的事件
 				 */
@@ -849,8 +870,15 @@ export const PanelHandleContentDetails = () => {
 				 */
 				dragStartCallBack() {
 					if (!this.$data.isMove) {
-						if (this.isDisabledDrag()) {
+						if (this.isFormConfigDisabledDrag()) {
+							// 禁止
+							this.disableDrag();
 							return false;
+						} else {
+							// 允许
+							if (this.isDisabledDrag()) {
+								this.allowDrag();
+							}
 						}
 						this.$data.isMove = true;
 					}
@@ -862,11 +890,7 @@ export const PanelHandleContentDetails = () => {
 				 * @param dragX 当前拖拽的距离
 				 * @param oldValue 旧的值
 				 */
-				dragMoveCallBack(
-					event: MouseEvent | TouchEvent,
-					dragX: number,
-					oldValue: number
-				) {
+				dragMoveCallBack(event: any, dragX: number, oldValue: number) {
 					let dragPercent = 0;
 					if (dragX <= 0) {
 						dragPercent = 0;
@@ -915,7 +939,7 @@ export const PanelHandleContentDetails = () => {
 					 */
 					let currentDragX = 0;
 					/* 监听拖拽 */
-					this.$tooltip.on("at:move", (event: any) => {
+					this.$tooltip.on("at:move", (event) => {
 						if (!this.dragStartCallBack()) {
 							return;
 						}
@@ -933,7 +957,7 @@ export const PanelHandleContentDetails = () => {
 						this.dragMoveCallBack(event, currentDragX, oldValue);
 					});
 					/* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
-					this.$tooltip.on("at:end", (event: any) => {
+					this.$tooltip.on("at:end", (event) => {
 						this.dragEndCallBack(currentDragX);
 					});
 				},
@@ -957,16 +981,16 @@ export const PanelHandleContentDetails = () => {
 						return;
 					}
 					this.$data.isCheckingStopDragMove = true;
-					let interval = setInterval(() => {
+					let interval = popsUtils.setInterval(() => {
 						if (!this.$data.isMove) {
 							this.$data.isCheckingStopDragMove = false;
 							this.closeToolTip();
-							clearInterval(interval);
+							popsUtils.clearInterval(interval);
 						}
 					}, 200);
-					setTimeout(() => {
+					popsUtils.setTimeout(() => {
 						this.$data.isCheckingStopDragMove = false;
-						clearInterval(interval);
+						popsUtils.clearInterval(interval);
 					}, 2000);
 				},
 				/**
@@ -998,6 +1022,15 @@ export const PanelHandleContentDetails = () => {
 							passive: true,
 						},
 						showBeforeCallBack: () => {
+							let isShowHoverTip =
+								typeof formConfig.isShowHoverTip === "function"
+									? formConfig.isShowHoverTip()
+									: typeof formConfig.isShowHoverTip === "boolean"
+									? formConfig.isShowHoverTip
+									: true;
+							if (!isShowHoverTip) {
+								return false;
+							}
 							this.intervalInit();
 						},
 						showAfterCallBack: (toolTipNode) => {

package/src/components/panel/index.ts

@@ -9,8 +9,8 @@ import { PopsPanelConfig } from "./config";
 import { PanelHandleContentDetails } from "./PanelHandleContentDetails";
 import { GlobalConfig } from "../../GlobalConfig";
 
-export class PopsPanel {
-	constructor(details: PopsPanelDetails) {
+export const PopsPanel = {
+	init(details: PopsPanelDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "panel";
@@ -166,6 +166,7 @@ export class PopsPanel {
 				endCallBack: config.dragEndCallBack,
 			});
 		}
-		return PopsHandler.handleResultDetails(eventDetails);
-	}
-}
+		let result = PopsHandler.handleResultDetails(eventDetails);
+		return result;
+	},
+};

package/src/components/panel/indexType.ts

@@ -123,6 +123,7 @@ export interface PopsPanelDetails
 	 * 是否强制是移动端，默认false
 	 * + true 强制为移动端
 	 * + false 自动根据UA判断是否是移动端
+	 * @default false
 	 */
 	isMobile?: boolean;
 }

package/src/components/panel/sliderType.ts

@@ -6,17 +6,18 @@ import type { PopsPanelCommonDetails } from "./commonType";
 export interface PopsPanelSliderDetails
 	extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
 	/**
-	 * （可选）className属性
+	 * className属性
+	 * @default ""
 	 */
 	className?: string;
 	/**
-	 * （可选）自定义元素属性
+	 * 自定义元素属性
 	 */
 	attributes?: {
 		[key: string]: any;
 	};
 	/**
-	 * （可选）自定义属性
+	 * 自定义属性
 	 */
 	props?: {
 		[K in keyof HTMLElement]?: HTMLElement[K];
@@ -27,16 +28,24 @@ export interface PopsPanelSliderDetails
 	text: string;
 	/**
 	 * （可选）左边的文字下面的描述
+	 * @default ""
 	 */
 	description?: string;
 	/**
 	 * 类型
+	 * @default "slider"
 	 */
 	type: "slider";
 	/**
 	 * （可选）是否禁用
+	 * @default false
 	 */
-	disabled?: false;
+	disabled?: boolean | (() => boolean);
+	/**
+	 * 是否显示滑块的hover提示
+	 * @default true
+	 */
+	isShowHoverTip?: boolean | (() => boolean);
 	/**
 	 * 获取该项的值的回调函数
 	 */
@@ -59,6 +68,7 @@ export interface PopsPanelSliderDetails
 	max: number;
 	/**
 	 * （可选）每次滑动的间隔值
+	 * @default 1
 	 */
 	step?: number;
 }

package/src/components/prompt/index.ts

@@ -8,8 +8,8 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsPromptConfig } from "./config";
 import type { PopsPromptDetails } from "./indexType";
 
-export class PopsPrompt {
-	constructor(details: PopsPromptDetails) {
+export const PopsPrompt = {
+	init(details: PopsPromptDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "prompt";
@@ -194,6 +194,7 @@ export class PopsPrompt {
 		if (config.content.select) {
 			$input.select();
 		}
-		return PopsHandler.handleResultDetails(eventDetails);
-	}
-}
+		let result = PopsHandler.handleResultDetails(eventDetails);
+		return result;
+	},
+};

package/src/components/prompt/indexType.ts

@@ -44,6 +44,7 @@ export interface PopsPromptDetails
 		select?: boolean;
 		/**
 		 * 输入框内的提示文字
+		 * @default ""
 		 */
 		placeholder?: string;
 		/**

package/src/components/rightClickMenu/index.ts

@@ -12,8 +12,8 @@ import type {
 	PopsRightClickMenuDetails,
 } from "./indexType";
 
-export class PopsRightClickMenu {
-	constructor(details: PopsRightClickMenuDetails) {
+export const PopsRightClickMenu = {
+	init(details: PopsRightClickMenuDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "rightClickMenu";
@@ -23,7 +23,7 @@ export class PopsRightClickMenu {
 		config = popsUtils.assign(config, details);
 		config = PopsHandler.handleOnly(PopsType, config);
 		if (config.target == null) {
-			throw "config.target 不能为空";
+			throw new Error("config.target 不能为空");
 		}
 		if (details.data) {
 			// @ts-ignore
@@ -570,7 +570,6 @@ export class PopsRightClickMenu {
 		PopsContextMenu.addContextMenuEvent(config.target, config.targetSelector!);
 		// 添加全局点击检测
 		PopsContextMenu.addWindowCheckClickListener();
-
 		return {
 			guid: guid,
 			config: config,
@@ -580,5 +579,5 @@ export class PopsRightClickMenu {
 			removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
 			addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
 		};
-	}
-}
+	},
+};

package/src/components/rightClickMenu/indexType.ts

@@ -47,14 +47,10 @@ export interface PopsRightClickMenuDetails
 		"useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"
 	> {
 	/**
-	 * 目标，默认为document.documentElement G
+	 * 目标元素
+	 * @default document.documentElement
 	 */
-	target?:
-		| HTMLElement
-		| (typeof globalThis & Window)
-		| Window
-		| EventTarget
-		| Node;
+	target?: HTMLElement | Window | EventTarget | Node;
 	/**
 	 * 目标的子元素选择器，默认为空
 	 */
@@ -65,14 +61,17 @@ export interface PopsRightClickMenuDetails
 	data: PopsRightClickMenuDataDetails[];
 	/**
 	 * 自定义className，默认为空
+	 * @default ""
 	 */
 	className?: string;
 	/**
 	 * 是否启用动画，默认true
+	 * @default true
 	 */
 	isAnimation?: boolean;
 	/**
 	 * 是否阻止默认contextmenu事件
+	 * @default false
 	 */
 	preventDefault?: boolean;
 }