@whitesev/pops 1.4.0 → 1.5.0

package/src/types/components.d.ts

@@ -0,0 +1,197 @@
+import type { PopsAnimation } from "./animation";
+import type {
+	PopsPosition,
+	PopsTextAlign,
+	PopsJustifyContent,
+} from "./position";
+import type {
+	PopsButtonDetails,
+	PopsButtonDetailsAnyType,
+	PopsHeaderCloseButtonDetails,
+} from "./button";
+import type { PopsMaskDetails } from "./mask";
+
+/**
+ * 标题配置
+ */
+export interface PopsTitleConfig {
+	title: {
+		/**
+		 * 标题文字
+		 */
+		text?: string;
+		/**
+		 * 文字的位置
+		 */
+		position?: PopsTextAlign;
+		/**
+		 * 文字是否是html
+		 */
+		html?: boolean;
+		/**
+		 * 文字的自定义CSS
+		 */
+		style?: string;
+	};
+}
+
+/**
+ * 内容配置
+ */
+export interface PopsContentConfig {
+	content: {
+		/**
+		 * 内容文字
+		 */
+		text?: string;
+		/**
+		 * 文字是否是html
+		 */
+		html?: boolean;
+		/**
+		 * 文字的自定义CSS
+		 */
+		style?: string;
+	};
+}
+/**
+ * 按钮配置
+ */
+export interface PopsButtonConfig {
+	btn?: {
+		/**
+		 * 按钮的位置，默认left
+		 */
+		position?: PopsJustifyContent;
+		/**
+		 * 右上角的关闭按钮
+		 */
+		close?: PopsHeaderCloseButtonDetails;
+	};
+}
+/**
+ * 按钮的其它配置
+ */
+export interface PopsMoreButtonConfig<T = {}> {
+	btn?: PopsButtonConfig["btn"] & {
+		/**
+		 * 是否合并按钮
+		 */
+		merge?: boolean;
+		/**
+		 * 是否对合并的按钮逆反
+		 */
+		mergeReverse?: boolean;
+		/**
+		 * 是否逆反
+		 */
+		reverse?: boolean;
+		/**
+		 * 确定按钮
+		 */
+		ok?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+		/**
+		 * 取消按钮
+		 */
+		cancel?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+		/**
+		 * 其他按钮
+		 */
+		other?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+	};
+}
+/**
+ * 拖拽(标题栏)的配置
+ */
+export interface PopsDragConfig {
+	/**
+	 *  是否可以按钮标题栏进行拖拽，默认false
+	 */
+	drag?: boolean;
+	/**
+	 * 是否限制拖拽在浏览器窗口内移动，默认true
+	 */
+	dragLimit?: boolean;
+	/**
+	 * 当启用dragLimit时，该参数为弹窗在窗口中的距离边际的距离，默认为3(px)
+	 */
+	dragExtraDistance?: number;
+	/**
+	 * （可选）拖动中的回调
+	 * @param moveElement 当前拖动的元素
+	 * @param left 当前left值
+	 * @param top 当前的top值
+	 */
+	dragMoveCallBack?: (
+		moveElement: HTMLElement,
+		left: number,
+		top: number
+	) => void;
+	/**
+	 * （可选）拖动结束的回调
+	 * @param moveElement 当前拖动的元素
+	 * @param left 当前left值
+	 * @param top 当前的top值
+	 */
+	dragEndCallBack?: (
+		moveElement: HTMLElement,
+		left: number,
+		top: number
+	) => void;
+}
+/**
+ * 通用配置
+ */
+export interface PopsCommonConfig {
+	/**
+	 * 自定义的className，默认为空
+	 */
+	class?: string;
+	/**
+	 * 是否是唯一的，默认false
+	 */
+	only?: boolean;
+	/**
+	 *  宽度，默认350px
+	 */
+	width: string;
+	/**
+	 *  高度，默认200px
+	 */
+	height: string;
+	/**
+	 * 位置，默认center
+	 */
+	position?: PopsPosition;
+	/**
+	 * 动画，默认pops-anim-fadein-zoom
+	 */
+	animation?: PopsAnimation;
+	/**
+	 * z-index显示层级，默认10000
+	 */
+	zIndex?: number;
+	/**
+	 * 遮罩层
+	 */
+	mask?: PopsMaskDetails;
+	/**
+	 * 是否禁用页面滚动，默认false
+	 *
+	 * 暂时不会生效
+	 */
+	forbiddenScroll?: boolean;
+	/**
+	 * （可选）自定义style
+	 */
+	style?: string | null;
+	/**
+	 * 在元素添加到页面前的事件
+	 * @param $shadowRoot 根元素
+	 * @param $shadowContainer 容器
+	 */
+	beforeAppendToPageCallBack?: (
+		$shadowRoot: ShadowRoot,
+		$shadowContainer: HTMLDivElement
+	) => void;
+}

package/src/types/event.d.ts

@@ -0,0 +1,62 @@
+import type { PopsIframeDetails } from "../components/iframe/indexType";
+
+/**
+ * 事件配置
+ */
+export interface PopsIframeEventDetails {
+	/**
+	 * 唯一id
+	 */
+	guid: string;
+	/**
+	 * 当前弹窗类型
+	 */
+	mode: PopsMode;
+	/**
+	 * 动画层
+	 */
+	animElement: HTMLElement;
+	/**
+	 * 主元素
+	 */
+	popsElement: HTMLElement;
+	/**
+	 * 遮罩层
+	 */
+	maskElement: HTMLElement;
+	/**
+	 * 当前配置
+	 */
+	config: PopsIframeDetails;
+}
+/**
+ * 事件配置
+ */
+export interface PopsEventDetails {
+	/** 最外层包裹的元素 */
+	$shadowContainer: HTMLDivElement;
+	/** ShadowRoot */
+	$shadowRoot: ShadowRoot;
+	/** -> 动画层 */
+	element: HTMLDivElement;
+	/** 动画层 */
+	animElement: HTMLDivElement;
+	/** 主元素 */
+	popsElement: HTMLDivElement;
+	/** 遮罩层 */
+	maskElement?: HTMLDivElement;
+	/** 当前弹窗类型 */
+	mode: mode;
+	guid: guid;
+	close: () => void;
+	hide: () => void;
+	show: () => void;
+}
+
+/**
+ * 处理过的事件配置
+ */
+export interface PopsHandlerEventDetails extends PopsEventDetails {
+	/** 当前按钮类型 */
+	type: "cancel" | "close" | "ok" | "other";
+}

package/src/types/global.d.ts

@@ -0,0 +1,11 @@
+declare var unsafeWindow: Window & typeof globalThis;
+
+declare module "*.css" {
+	const content: string;
+	export default content;
+}
+
+declare module "*.svg" {
+	const content: string;
+	export default content;
+}

package/src/types/icon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 按钮svg图标
+ */
+export type PopsIcon =
+	| "min"
+	| "mise"
+	| "max"
+	| "close"
+	| "edit"
+	| "share"
+	| "delete"
+	| "search"
+	| "upload"
+	| "loading"
+	| "next"
+	| "prev"
+	| "eleme"
+	| "elemePlus"
+	| "chromeFilled"
+	| "cpu"
+	| "videoPlay"
+	| "videoPause"
+	| "headset"
+	| "monitor"
+	| "documentCopy"
+	| "picture"
+	| "circleClose"
+	| "view"
+	| "hide"
+	| "keyboard"
+	| "arrowRight"
+	| "arrowLeft";

package/src/types/layer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * config内存储饿实例配置
+ */
+export interface PopsLayerConfig {
+	/** 固定id */
+	guid: string;
+	/** 动画元素 */
+	animElement: HTMLDivElement;
+	/** 主元素 */
+	popsElement: HTMLDivElement;
+	/** 遮罩层元素 */
+	maskElement?: HTMLDivElement;
+}
+
+export interface PopsLayerCommonConfig extends PopsLayerConfig {
+	/** shadow容器 */
+	$shadowContainer: HTMLDivElement;
+	/** shadow容器的shandowRoot */
+	$shadowRoot: ShadowRoot;
+}

package/src/types/main.d.ts

@@ -0,0 +1,136 @@
+import type { PopsAlertDetails } from "../components/alert/indexType";
+import type { PopsConfirmDetails } from "../components/confirm/indexType";
+import type { PopsDrawerDetails } from "../components/drawer/indexType";
+import type { PopsFolderDetails } from "../components/folder/indexType";
+import type { PopsIframeDetails } from "../components/iframe/indexType";
+import type { PopsLoadingDetails } from "../components/loading/indexType";
+import type { PopsPanelDetails } from "../components/panel/indexType";
+import type { PopsPromptDetails } from "../components/prompt/indexType";
+import { PopsRightClickMenuDetails } from "../components/rightClickMenu/indexType";
+import { PopsToolTipDetails } from "../components/tooltip/indexType";
+
+export interface PopsUtilsOwnObject<V extends any> {
+	[key: string]: V | PopsUtilsOwnObject<V>;
+}
+
+/** pops的所有类型配置 10个 */
+export interface PopsAllDetails {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	loading: PopsLoadingDetails;
+	iframe: PopsIframeDetails;
+	tooltip: PopsToolTipDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+	rightClickMenu: PopsRightClickMenuDetails;
+}
+
+/** pops的类型配置 8个 */
+export interface PopsTypeDetails {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	loading: PopsLoadingDetails;
+	iframe: PopsIframeDetails;
+	// tooltip: PopsToolTipDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+	// rightClickMenu: PopsRightClickMenuDetails;
+}
+
+/** pops的类型 8个 */
+export type PopsType = keyof PopsTypeDetails;
+
+/** pops所有的类型 10个 */
+export type PopsMode = PopsType | "tooltip" | "rightClickMenu";
+
+/** 存储实例的类型 9个 */
+export type PopsLayerMode = PopsType | "tooltip";
+
+/** pops弹窗支持动画元素的配置 */
+export interface PopsSupportAnim {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	loading: PopsLoadingDetails;
+	iframe: PopsIframeDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+}
+/** pops弹窗支持动画元素的类型 */
+export type PopsTypeSupportAnim = keyof PopsSupportAnim;
+
+/** pops弹窗支持标题栏的配置 */
+export interface PopsSupportHeaderTitle {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	iframe: PopsIframeDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+}
+/** pops弹窗支持标题栏的类型 */
+export type PopsTypeSupportHeaderTitle = keyof PopsSupportHeaderTitle;
+
+/** pops支持底部按钮的配置 */
+export interface PopsSupportBottomBtn {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	drawer: PopsDrawerDetails;
+}
+/** pops支持底部按钮的类型 */
+export type PopsTypeSupportBottomBtn = keyof PopsSupportHeaderTitle;
+
+/** pops支持中间内容的配置 */
+export interface PopsSupportContent {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	drawer: PopsDrawerDetails;
+	loading: PopsLoadingDetails;
+}
+/** pops支持中间内容的类型 */
+export type PopsTypeSupportContent = keyof PopsSupportContent;
+
+/** panel的各种类型的配置项 */
+export type PopsPanelFormsTotalDetails =
+	| PopsPanelSwitchDetails
+	| PopsPanelSliderDetails
+	| PopsPanelInputDetails
+	| PopsPanelTextAreaDetails
+	| PopsPanelSelectDetails<any>
+	| PopsPanelButtonDetails
+	| PopsPanelDeepMenuDetails
+	| PopsPanelOwnDetails;
+
+/**
+ * pops.xxx的调用返回值
+ */
+export interface PopsCallResult {
+	/** 唯一标识id */
+	guid: string;
+	/** 影子元素 */
+	$shadowContainer: HTMLDivElement;
+	/** 影子元素的根节点 */
+	$shadowRoot: ShadowRoot;
+	/** 元素 */
+	element: HTMLDivElement;
+	/** 动画层元素 */
+	animElement: HTMLDivElement;
+	/** pops元素 */
+	popsElement: HTMLDivElement;
+	/** 遮罩层元素 */
+	maskElement?: HTMLDivElement;
+	/** 关闭弹窗 */
+	close(): void;
+	/** 隐藏弹窗 */
+	hide(): void;
+	/** 显示弹窗 */
+	show(): void;
+}

package/src/types/mask.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 遮罩层配置
+ */
+export interface PopsMaskDetails {
+	/**
+	 * 是否启用遮罩层，默认false
+	 */
+	enable?: boolean;
+	clickEvent?: {
+		/**
+		 * 点击遮罩层是否触发关闭事件
+		 */
+		toClose?: boolean;
+		/**
+		 * 点击遮罩层是否触发隐藏事件
+		 */
+		toHide?: boolean;
+	};
+	/**
+	 * 遮罩层自定义的点击事件
+	 * @param originalRun 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗
+	 * @param config 配置信息
+	 */
+	clickCallBack?: (
+		originalRun: (originalRun: Function) => void,
+		config:
+			| PopsAlertDetails
+			| PopsDrawerDetails
+			| PopsIframeDetails
+			| PopsPromptDetails
+			| PopsFolderDetails
+			| PopsLoadingDetails
+			| PopsPanelDetails
+	) => void;
+}

package/src/types/position.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 弹窗位置
+ */
+export type PopsPosition =
+	| "top_left"
+	| "top"
+	| "top_right"
+	| "center_left"
+	| "center"
+	| "center_right"
+	| "bottom_left"
+	| "bottom"
+	| "bottom_right";
+
+/**
+ * 按钮位置
+ */
+export type PopsJustifyContent =
+	| "center"
+	| "end"
+	| "flex-end"
+	| "flex-start"
+	| "left"
+	| "normal"
+	| "right"
+	| "space-around"
+	| "space-between"
+	| "space-evenly"
+	| "start"
+	| "stretch"
+	| "inherit"
+	| "initial"
+	| "revert"
+	| "revert-layer"
+	| "unset";
+
+/**
+ * text-align
+ */
+export type PopsTextAlign =
+	| "center"
+	| "end"
+	| "justify"
+	| "left"
+	| "right"
+	| "start"
+	| "-webkit-auto"
+	| "-moz-center-or-inherit"
+	| "-webkit-center"
+	| "-moz-center"
+	| "-webkit-left"
+	| "-moz-left"
+	| "-webkit-match-parent"
+	| "-webkit-right"
+	| "-moz-right"
+	| "inherit"
+	| "initial"
+	| "revert"
+	| "revert-layer"
+	| "unset";