@whitesev/pops 1.0.0

package/src/types/event.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 事件配置
+ */
+declare interface PopsIframeEventDetails {
+	/**
+	 * 唯一id
+	 */
+	guid: string;
+	/**
+	 * 当前弹窗类型
+	 */
+	mode: PopsMode;
+	/**
+	 * 动画层
+	 */
+	animElement: HTMLElement;
+	/**
+	 * 主元素
+	 */
+	popsElement: HTMLElement;
+	/**
+	 * 遮罩层
+	 */
+	maskElement: HTMLElement;
+	/**
+	 * 当前配置
+	 */
+	config: any;
+}
+/**
+ * 事件配置
+ */
+declare 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;
+}
+
+/**
+ * 处理过的事件配置
+ */
+declare 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,30 @@
+/**
+ * 按钮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";

package/src/types/layer.d.ts

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

package/src/types/main.d.ts

@@ -0,0 +1,89 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types";
+
+declare interface PopsUtilsOwnObject<V extends any> {
+	[key: string]: V | PopsUtilsOwnObject<V>;
+}
+
+/** pops的类型 8个 */
+declare type PopsType =
+	| "alert"
+	| "confirm"
+	| "prompt"
+	| "loading"
+	| "iframe"
+	// | "tooltip"
+	| "drawer"
+	| "folder"
+	| "panel";
+// | "rightClickMenu";
+
+/** pops所有的类型 10个 */
+declare type PopsMode = PopsType | "tooltip" | "rightClickMenu";
+
+/** 存储实例的类型 9个 */
+declare type PopsLayerMode = PopsType | "tooltip";
+
+/** pops弹窗支持动画元素的配置 */
+declare interface PopsSupportAnim {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	loading: PopsLoadingDetails;
+	iframe: PopsIframeDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+}
+/** pops弹窗支持动画元素的类型 */
+declare type PopsTypeSupportAnim = keyof PopsSupportAnim;
+
+/** pops弹窗支持标题栏的配置 */
+declare interface PopsSupportHeaderTitle {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	iframe: PopsIframeDetails;
+	drawer: PopsDrawerDetails;
+	folder: PopsFolderDetails;
+	panel: PopsPanelDetails;
+}
+/** pops弹窗支持标题栏的类型 */
+declare type PopsTypeSupportHeaderTitle = keyof PopsSupportHeaderTitle;
+
+/** pops支持底部按钮的配置 */
+declare interface PopsSupportBottomBtn {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	drawer: PopsDrawerDetails;
+}
+/** pops支持底部按钮的类型 */
+declare type PopsTypeSupportBottomBtn = keyof PopsSupportHeaderTitle;
+
+/** pops支持中间内容的配置 */
+declare interface PopsSupportContent {
+	alert: PopsAlertDetails;
+	confirm: PopsConfirmDetails;
+	prompt: PopsPromptDetails;
+	drawer: PopsDrawerDetails;
+}
+/** pops支持中间内容的类型 */
+declare type PopsTypeSupportContent = keyof PopsSupportHeaderTitle;
+
+/** panel的各种类型的配置项 */
+declare type PopsPanelFormsTotalDetails =
+	| PopsPanelSwitchDetails
+	| PopsPanelSliderDetails
+	| PopsPanelInputDetails
+	| PopsPanelTextAreaDetails
+	| PopsPanelSelectDetails<any>
+	| PopsPanelButtonDetails
+	| PopsPanelDeepMenuDetails
+	| PopsPanelOwnDetails;

package/src/types/mask.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 遮罩层配置
+ */
+declare 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 @@
+/**
+ * 弹窗位置
+ */
+declare type PopsPosition =
+	| "top_left"
+	| "top"
+	| "top_right"
+	| "center_left"
+	| "center"
+	| "center_right"
+	| "bottom_left"
+	| "bottom"
+	| "bottom_right";
+
+/**
+ * 按钮位置
+ */
+declare 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
+ */
+declare 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";