@whitesev/pops 1.0.0

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -0,0 +1,248 @@
+declare type PopsDOMUtilsEventObject<T extends Node> = Event & {
+	target: T;
+};
+
+declare type PopsDOMUtilsCreateElementAttributesMap = {
+	style?: string;
+	id?: string;
+	class?: string;
+	"data-"?: string;
+	type?: string;
+	[key: string]: any;
+};
+/**
+ * 鼠标事件
+ * + https://blog.csdn.net/weixin_68658847/article/details/126939879
+ */
+
+declare interface PopsDOMUtils_MouseEvent {
+	click: MouseEvent | PointerEvent;
+	contextmenu: MouseEvent | PointerEvent;
+	dblclick: MouseEvent | PointerEvent;
+	mousedown: MouseEvent | PointerEvent;
+	mouseenter: MouseEvent | PointerEvent;
+	mouseleave: MouseEvent | PointerEvent;
+	mousemove: MouseEvent | PointerEvent;
+	mouseover: MouseEvent | PointerEvent;
+	mouseout: MouseEvent | PointerEvent;
+	mouseup: MouseEvent | PointerEvent;
+	hover: MouseEvent;
+}
+declare type PopsDOMUtils_MouseEventType = keyof PopsDOMUtils_MouseEvent;
+/**
+ * 鼠标事件
+ */
+declare interface PopsDOMUtils_KeyboardEvent {
+	keydown: KeyboardEvent;
+	keypress: KeyboardEvent;
+	keyup: KeyboardEvent;
+}
+declare type PopsDOMUtils_KeyboardEventType = keyof PopsDOMUtils_KeyboardEvent;
+/**
+ * 框架/对象事件
+ */
+declare interface PopsDOMUtils_Frame_Object_Event {
+	abort: Event;
+	beforeunload: Event;
+	error: Event;
+	hashchange: Event;
+	load: Event;
+	pageshow: Event;
+	pagehide: Event;
+	resize: Event;
+	scroll: Event;
+	unload: Event;
+}
+declare type PopsDOMUtils_Frame_Object_EventType =
+	keyof PopsDOMUtils_Frame_Object_Event;
+/**
+ * 表单事件
+ */
+declare interface PopsDOMUtils_FormEvent {
+	blur: Event;
+	change: Event;
+	focus: Event;
+	focusin: Event;
+	focusout: Event;
+	input: Event;
+	reset: Event;
+	search: Event;
+}
+declare type PopsDOMUtils_FormEventType = keyof PopsDOMUtils_FormEvent;
+
+/**
+ * 剪贴板事件
+ */
+declare interface PopsDOMUtils_ClipboardEvent {
+	copy: ClipboardEvent;
+	cut: ClipboardEvent;
+	paste: ClipboardEvent;
+}
+declare type PopsDOMUtils_ClipboardEventType =
+	keyof PopsDOMUtils_ClipboardEvent;
+
+/**
+ * 打印事件
+ */
+declare interface PopsDOMUtils_PrintEvent {
+	afterprint: Event;
+	beforeprint: Event;
+}
+declare type PopsDOMUtils_PrintEventType = keyof PopsDOMUtils_PrintEvent;
+
+/**
+ * 拖动事件
+ */
+declare interface PopsDOMUtils_DragEvent {
+	drag: DragEvent;
+	dragend: DragEvent;
+	dragenter: DragEvent;
+	dragleave: DragEvent;
+	dragover: DragEvent;
+	dragstart: DragEvent;
+	drop: DragEvent;
+}
+declare type PopsDOMUtils_DragEventType = keyof PopsDOMUtils_DragEvent;
+
+/**
+ * 多媒体（Media）事件
+ */
+declare interface PopsDOMUtils_MediaEvent {
+	abort: Event;
+	canplay: Event;
+	canplaythrough: Event;
+	durationchange: Event;
+	emptied: Event;
+	ended: Event;
+	error: Event;
+	loadeddata: Event;
+	loadedmetadata: Event;
+	loadstart: Event;
+	pause: Event;
+	play: Event;
+	playing: Event;
+	progress: Event;
+	ratechange: Event;
+	seeked: Event;
+	seeking: Event;
+	stalled: Event;
+	suspend: Event;
+	timeupdate: Event;
+	volumechange: Event;
+	waiting: Event;
+}
+declare type PopsDOMUtils_MediaEventType = keyof PopsDOMUtils_MediaEvent;
+
+/**
+ * 动画事件
+ */
+declare interface PopsDOMUtils_AnimationEvent {
+	animationend: AnimationEvent;
+	animationiteration: AnimationEvent;
+	animationstart: AnimationEvent;
+}
+declare type PopsDOMUtils_AnimationEventType =
+	keyof PopsDOMUtils_AnimationEvent;
+
+/**
+ * 过渡事件
+ */
+declare interface PopsDOMUtils_TransitionEvent {
+	transitionend: TransitionEvent;
+}
+declare type PopsDOMUtils_TransitionEventType =
+	keyof PopsDOMUtils_TransitionEvent;
+
+/**
+ * 触摸事件
+ */
+declare interface PopsDOMUtils_TouchEvent {
+	touchstart: TouchEvent;
+	touchmove: TouchEvent;
+	touchend: TouchEvent;
+	touchcancel: TouchEvent;
+	touchenter: TouchEvent;
+	touchleave: TouchEvent;
+}
+declare type PopsDOMUtils_TouchEventType = keyof PopsDOMUtils_TouchEvent;
+/**
+ * 其它事件
+ */
+declare interface PopsDOMUtils_OtherEvent {
+	message: Event;
+	online: Event;
+	offline: Event;
+	popstate: Event;
+	show: Event;
+	storage: Event;
+	toggle: Event;
+	wheel: Event;
+	propertychange: Event;
+	fullscreenchange: Event;
+	DOMContentLoaded: Event;
+}
+declare type PopsDOMUtils_OtherEventType = keyof PopsDOMUtils_OtherEvent;
+
+/**
+ * 全部事件
+ */
+declare type PopsDOMUtils_Event = PopsDOMUtils_MouseEvent &
+	PopsDOMUtils_KeyboardEvent &
+	PopsDOMUtils_Frame_Object_Event &
+	PopsDOMUtils_FormEvent &
+	PopsDOMUtils_ClipboardEvent &
+	PopsDOMUtils_PrintEvent &
+	PopsDOMUtils_DragEvent &
+	PopsDOMUtils_MediaEvent &
+	PopsDOMUtils_AnimationEvent &
+	PopsDOMUtils_TransitionEvent &
+	PopsDOMUtils_TouchEvent &
+	PopsDOMUtils_OtherEvent;
+
+/**
+ * 事件类型
+ */
+declare type PopsDOMUtils_EventType = keyof PopsDOMUtils_Event;
+
+/**
+ * 元素上的events属性
+ */
+declare interface PopsDOMUtilsEventListenerOptionsAttribute {
+	/**
+	 * 自定义的ownCallBack
+	 */
+	callback: () => void;
+	/**
+	 * 属性配置
+	 */
+	option: AddEventListenerOptions;
+	/**
+	 * 用户添加的事件
+	 */
+	originCallBack: () => void;
+	/**
+	 * 子元素选择器
+	 */
+	selector?: string;
+}
+
+declare type PopsDOMUtilsElementEventType =
+	| HTMLElement
+	| string
+	| NodeList
+	| (HTMLElement | Window | Document | Element | typeof globalThis)[]
+	| Window
+	| Document
+	| Element
+	| null
+	| typeof globalThis
+	| ShadowRoot
+	| EventTarget
+	| ChildNode
+	| Node;
+
+declare type ParseHTMLReturnType<T1, T2> = T1 extends true
+	? T2 extends true
+		? Document
+		: HTMLElement
+	: HTMLElement;

package/src/types/animation.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 动画
+ */
+declare type PopsAnimation =
+	| "pops-anim-spread"
+	| "pops-anim-shake"
+	| "pops-anim-rolling-left"
+	| "pops-anim-rolling-right"
+	| "pops-anim-slide-top"
+	| "pops-anim-slide-bottom"
+	| "pops-anim-slide-left"
+	| "pops-anim-slide-right"
+	| "pops-anim-fadein"
+	| "pops-anim-fadein-zoom"
+	| "pops-anim-fadein-alert"
+	| "pops-anim-don"
+	| "pops-anim-roll"
+	| "pops-anim-sandra"
+	| "pops-anim-gather";

package/src/types/button.d.ts

@@ -0,0 +1,216 @@
+import { PopsEventDetails, PopsHandlerEventDetails } from "./event";
+import type { PopsIcon } from "./icon";
+
+/**
+ * 按钮类型
+ */
+declare type PopsButtonType = "close" | "ok" | "cancel" | "other";
+/**
+ * 按钮样式类型
+ */
+declare type PopsButtonStyleType =
+	| "default"
+	| "primary"
+	| "xiaomi-primary"
+	| "success"
+	| "info"
+	| "warning"
+	| "danger";
+
+/**
+ * 按钮大小
+ */
+declare type PopsButtonSize = "large" | "small";
+
+/**
+ * 按钮的点击回调参数event
+ */
+declare interface PopsBtnCallBackEvent {
+	/**
+	 * 元素
+	 */
+	element: HTMLElement;
+	/**
+	 * 动画元素（包裹着弹窗元素）
+	 */
+	animElement: HTMLElement;
+	/**
+	 * 弹窗元素
+	 */
+	popsElement: HTMLElement;
+	/**
+	 * 遮罩层元素
+	 */
+	maskElement: HTMLElement | undefined;
+	/**
+	 * 按钮调用类型
+	 */
+	type: PopsButtonType;
+	/**
+	 * 调用的方法
+	 */
+	mode: PopsMode;
+	/**
+	 * 唯一id
+	 */
+	guid: string;
+	/**
+	 * 关闭弹窗
+	 */
+	close(): void;
+	/**
+	 * 隐藏弹窗
+	 */
+	hide(): void;
+	/**
+	 * 显示弹窗
+	 */
+	show(): void;
+}
+
+/**
+ * 按钮配置
+ */
+declare interface PopsButtonDetails {
+	/**
+	 * 是否启用按钮
+	 */
+	enable: boolean;
+	/**
+	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
+	 */
+	icon: PopsIcon;
+	/**
+	 * 图标按钮是否放在右边
+	 */
+	rightIcon: boolean;
+	/**
+	 * 图标按钮是否是旋转360°，默认false
+	 */
+	iconIsLoading: boolean;
+	/**
+	 * 按钮尺寸大小，默认为空
+	 */
+	size: PopsButtonSize;
+	/**
+	 * 按钮样式类型，默认为default
+	 */
+	type: PopsButtonStyleType;
+	/**
+	 * 按钮文字，默认为空
+	 */
+	text: string;
+	/**
+	 * 按钮点击的回调
+	 */
+	callback(
+		eventDetails: PopsHandlerEventDetails,
+		event: PointerEvent | MouseEvent
+	): void;
+}
+
+/**
+ * 按钮配置（匹配任意类型）
+ */
+declare interface PopsButtonDetailsAnyType {
+	/**
+	 * 是否启用按钮
+	 */
+	enable: boolean;
+	/**
+	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
+	 */
+	icon: PopsIcon;
+	/**
+	 * 图标按钮是否放在右边
+	 */
+	rightIcon: boolean;
+	/**
+	 * 图标按钮是否是旋转360°，默认false
+	 */
+	iconIsLoading: boolean;
+	/**
+	 * 按钮尺寸大小，默认为空
+	 */
+	size: PopsButtonSize;
+	/**
+	 * 按钮样式类型
+	 */
+	type: string;
+	/**
+	 * 按钮文字，默认为空
+	 */
+	text: string;
+	/**
+	 * 按钮点击的回调
+	 */
+	callback(
+		eventDetails: PopsHandlerEventDetails,
+		event: PointerEvent | MouseEvent
+	): void;
+}
+/**
+ * 右上角关闭按钮点击回调的配置
+ */
+declare interface PopsHeaderCloseButtonClickCallBackEvent {
+	/**
+	 * 动画元素（包裹着弹窗元素）
+	 */
+	animElement: HTMLElement;
+	/**
+	 * 遮罩层元素，如果未设置，那么不存在
+	 */
+	maskElement?: HTMLElement;
+	/**
+	 * 按钮调用类型
+	 */
+	type: PopsButtonType;
+	/**
+	 * 唯一id
+	 */
+	guid: string;
+	/**
+	 * 关闭弹窗
+	 */
+	close(): void;
+	/**
+	 * 隐藏弹窗
+	 */
+	hide(): void;
+	/**
+	 * 显示弹窗
+	 */
+	show(): void;
+	/**
+	 * 输入的内容
+	 */
+	text: string;
+}
+/**
+ * 顶部关闭按钮配置
+ */
+declare interface PopsHeaderCloseButtonDetails {
+	/**
+	 * 是否启用按钮
+	 */
+	enable?: boolean;
+	/**
+	 * 按钮尺寸大小，默认为空
+	 */
+	size?: PopsButtonSize;
+	/**
+	 * 按钮样式类型，默认为default
+	 */
+	type?: PopsButtonStyleType;
+	/**
+	 * 按钮文字，默认为空
+	 */
+	text?: string;
+	/**
+	 * 按钮点击的回调
+	 */
+	callback?: (
+		details: PopsEventDetails,
+		event: PointerEvent | MouseEvent
+	) => void;
+}

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";
+
+/**
+ * 标题配置
+ */
+declare interface PopsTitleConfig {
+	title: {
+		/**
+		 * 标题文字
+		 */
+		text?: string;
+		/**
+		 * 文字的位置
+		 */
+		position?: PopsTextAlign;
+		/**
+		 * 文字是否是html
+		 */
+		html?: boolean;
+		/**
+		 * 文字的自定义CSS
+		 */
+		style?: string;
+	};
+}
+
+/**
+ * 内容配置
+ */
+declare interface PopsContentConfig {
+	content: {
+		/**
+		 * 内容文字
+		 */
+		text?: string;
+		/**
+		 * 文字是否是html
+		 */
+		html?: boolean;
+		/**
+		 * 文字的自定义CSS
+		 */
+		style?: string;
+	};
+}
+/**
+ * 按钮配置
+ */
+declare interface PopsButtonConfig {
+	btn?: {
+		/**
+		 * 按钮的位置，默认left
+		 */
+		position?: PopsJustifyContent;
+		/**
+		 * 右上角的关闭按钮
+		 */
+		close?: PopsHeaderCloseButtonDetails;
+	};
+}
+/**
+ * 按钮的其它配置
+ */
+declare interface PopsMoreButtonConfig {
+	btn?: PopsButtonConfig["btn"] & {
+		/**
+		 * 是否合并按钮
+		 */
+		merge?: boolean;
+		/**
+		 * 是否对合并的按钮逆反
+		 */
+		mergeReverse?: boolean;
+		/**
+		 * 是否逆反
+		 */
+		reverse?: boolean;
+		/**
+		 * 确定按钮
+		 */
+		ok?: Partial<PopsButtonDetails | PopsButtonDetailsAnyType>;
+		/**
+		 * 取消按钮
+		 */
+		cancel?: Partial<PopsButtonDetails | PopsButtonDetailsAnyType>;
+		/**
+		 * 其他按钮
+		 */
+		other?: Partial<PopsButtonDetails | PopsButtonDetailsAnyType>;
+	};
+}
+/**
+ * 拖拽(标题栏)的配置
+ */
+declare 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;
+}
+/**
+ * 通用配置
+ */
+declare 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;
+}