@whitesev/pops 2.0.6 → 2.0.7

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) {
@@ -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);
 					});
 				},
@@ -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";
@@ -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;
 }

package/src/components/searchSuggestion/index.ts

@@ -7,8 +7,8 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./indexType";
 
-export class PopsSearchSuggestion {
-	constructor(details: PopsSearchSuggestionDetails) {
+export const PopsSearchSuggestion = {
+	init(details: PopsSearchSuggestionDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "searchSuggestion";
@@ -675,5 +675,5 @@ export class PopsSearchSuggestion {
 			},
 		};
 		return SearchSuggestion;
-	}
-}
+	},
+};

package/src/components/searchSuggestion/indexType.ts

@@ -145,112 +145,3 @@ export interface PopsSearchSuggestionDetails<T = any>
 		data: T
 	) => void;
 }
-
-/**
- * pops.searchSuggestion的函数返回值
- */
-export interface PopsSearchSuggestionResult<T = any> {
-	$el: {
-		/** 根元素 */
-		root: HTMLElement;
-		/** ul元素 */
-		$hintULContainer: HTMLUListElement;
-		/** 动态更新CSS */
-		$dynamicCSS: HTMLStyleElement;
-	};
-	/**
-	 * 初始化
-	 */
-	init: () => void;
-	/**
-	 * 获取显示出搜索建议框的html
-	 */
-	getSearchSelectElement: () => HTMLElement;
-	/**
-	 * 获取显示出搜索建议框的每一项的html
-	 */
-	getSearchItemLiElement: (data: T, index: number) => HTMLElement;
-	/**
-	 * 获取data-value值
-	 */
-	getItemDataValue: (data: T) => T;
-	/**
-	 * 设置搜索建议框每一项的点击事件
-	 */
-	setSearchItemClickEvent: (liElement: HTMLLIElement) => void;
-	/**
-	 * 监听输入框内容改变
-	 */
-	setInputChangeEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除输入框内容改变的监听
-	 */
-	removeInputChangeEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置显示搜索建议框的事件
-	 */
-	setShowEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除显示搜索建议框的事件
-	 */
-	removeShowEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置隐藏搜索建议框的事件
-	 */
-	setHideEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除隐藏搜索建议框的事件
-	 */
-	removeHideEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 设置所有监听
-	 */
-	setAllEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 移除所有监听
-	 */
-	removeAllEvent: (option?: AddEventListenerOptions) => void;
-	/**
-	 * 获取删除按钮的html
-	 */
-	getDeleteIconHTML: (size: number, fill: string) => void;
-	/**
-	 * 设置当前正在搜索中的提示
-	 */
-	setPromptsInSearch: () => void;
-	/**
-	 * 移除正在搜索中的提示
-	 */
-	removePromptsInSearch: () => void;
-	/**
-	 * 清空所有的搜索结果
-	 */
-	clearAllSearchItemLi: () => void;
-	/**
-	 * 修改搜索建议框的位置(top、left)
-	 * 因为目标元素可能是动态隐藏的
-	 */
-	changeHintULElementPosition: () => void;
-	/**
-	 * 修改搜索建议框的width
-	 * 因为目标元素可能是动态隐藏的
-	 */
-	changeHintULElementWidth: () => void;
-	updateDynamicCSS: () => void;
-	/**
-	 * 更新页面显示的搜索结果
-	 */
-	update: (data: T[]) => void;
-	/**
-	 * 清空当前的搜索结果并显示无结果
-	 */
-	clear: () => void;
-	/**
-	 * 隐藏搜索建议框
-	 */
-	hide: () => void;
-	/**
-	 * 显示搜索建议框
-	 */
-	show: () => void;
-}

package/src/components/tooltip/index.ts

@@ -544,8 +544,8 @@ export type PopsTooltipResult<T extends PopsToolTipDetails> = {
 	toolTip: typeof ToolTip.prototype;
 };
 
-export class PopsTooltip {
-	constructor(details: PopsToolTipDetails) {
+export const PopsTooltip = {
+	init(details: PopsToolTipDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
 		const PopsType = "tooltip";
@@ -579,11 +579,11 @@ export class PopsTooltip {
 		}
 
 		return {
-			guid: guid,
-			config: config,
-			$shadowContainer: $shadowContainer,
-			$shadowRoot: $shadowRoot,
-			toolTip: toolTip,
+			guid,
+			config,
+			$shadowContainer,
+			$shadowRoot,
+			toolTip,
 		};
-	}
-}
+	},
+};