@whitesev/pops 2.2.8 → 2.2.9

package/src/components/panel/index.ts

@@ -1,213 +0,0 @@
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelDetails, PopsPanelEventType } from "./types";
-import { PopsPanelConfig } from "./config";
-import { PanelHandlerComponents } from "./handlerComponents";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-
-export const PopsPanel = {
-	init(details: PopsPanelDetails) {
-		const guid = popsUtils.getRandomGUID();
-		// 设置当前类型
-		const popsType: PopsType = "panel";
-
-		let config: Required<PopsPanelDetails> = PopsPanelConfig();
-		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-		config = popsUtils.assign(config, details);
-		if (details && Array.isArray(details.content)) {
-			config.content = details.content;
-		}
-		config = PopsHandler.handleOnly(popsType, config);
-
-		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
-		PopsHandler.handleInit($shadowRoot, [
-			{
-				name: "index",
-				css: PopsCSS.index,
-			},
-			{
-				name: "ninePalaceGridPosition",
-				css: PopsCSS.ninePalaceGridPosition,
-			},
-			{
-				name: "scrollbar",
-				css: PopsCSS.scrollbar,
-			},
-			{
-				name: "button",
-				css: PopsCSS.button,
-			},
-			{
-				name: "anim",
-				css: PopsCSS.anim,
-			},
-			{
-				name: "common",
-				css: PopsCSS.common,
-			},
-			{
-				name: "panelCSS",
-				css: PopsCSS.panelCSS,
-			},
-		]);
-
-		// 先把z-index提取出来
-		let zIndex = PopsHandler.handleZIndex(config.zIndex);
-		let maskHTML = PopsElementHandler.createMask(guid, zIndex);
-
-		let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-		let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
-			popsType,
-			config
-		);
-
-		let animHTML = PopsElementHandler.createAnim(
-			guid,
-			popsType,
-			config,
-			/*html*/ `
-			<div class="pops-title pops-${popsType}-title" style="text-align: ${
-				config.title.position
-			};${headerStyle}">${
-				config.title.html
-					? config.title.text
-					: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
-			}${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content">
-				<aside class="pops-${popsType}-aside">
-					<ul class="pops-${popsType}-aside-top-container"></ul>
-					<ul class="pops-${popsType}-aside-bottom-container"></ul>
-				</aside>
-				<section class="pops-${popsType}-container">
-					<ul class="pops-${popsType}-container-header-ul"></ul>
-					<ul class="pops-${popsType}-container-main-ul"></ul>
-				</section>
-			</div>`,
-			"",
-			zIndex
-		);
-		/**
-		 * 弹窗的主元素，包括动画层
-		 */
-		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-		/* 结构元素 */
-		let {
-			popsElement: $pops,
-			headerCloseBtnElement: $headerCloseBtn,
-			titleElement: $title,
-			contentElement: $content,
-			contentAsideElement: $contentAside,
-			contentSectionContainerElement: $contentSectionContainer,
-		} = PopsHandler.handleQueryElement($anim, popsType);
-		if (config.isMobile || popsUtils.isPhone()) {
-			popsDOMUtils.addClassName($pops, config.mobileClassName);
-		}
-		/**
-		 * 遮罩层元素
-		 */
-		let $mask: HTMLDivElement | null = null;
-		/**
-		 * 已创建的元素列表
-		 */
-		let isCreatedElementList: HTMLElement[] = [$anim];
-
-		/* 遮罩层元素 */
-		if (config.mask.enable) {
-			let { maskElement } = PopsHandler.handleMask({
-				type: popsType,
-				guid: guid,
-				config: config,
-				animElement: $anim,
-				maskHTML: maskHTML,
-			});
-			$mask = maskElement;
-			isCreatedElementList.push($mask);
-		}
-
-		/* 处理返回的配置 */
-		let eventDetails = PopsHandler.handleEventDetails(
-			guid,
-			$shadowContainer,
-			$shadowRoot,
-			popsType,
-			$anim,
-			$pops,
-			$mask!,
-			config
-		);
-		/* 为顶部右边的关闭按钮添加点击事件 */
-		PopsHandler.handleClickEvent(
-			"close",
-			$headerCloseBtn,
-			eventDetails,
-			config.btn.close!.callback!
-		);
-
-		/* 创建到页面中 */
-		popsDOMUtils.append($shadowRoot, isCreatedElementList);
-		if (typeof config.beforeAppendToPageCallBack === "function") {
-			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-		}
-		popsDOMUtils.appendBody($shadowContainer);
-		/* 追加遮罩层元素 */
-		if ($mask != null) {
-			$anim.after($mask);
-		}
-		let panelHandlerComponents = PanelHandlerComponents();
-		/**
-		 * 处理内部配置
-		 */
-		panelHandlerComponents.init({
-			config: config,
-			$el: {
-				$pops: $pops,
-				$content: $content,
-				$contentAside: $contentAside,
-				$contentSectionContainer: $contentSectionContainer,
-			},
-		});
-
-		PopsHandler.handlePush(popsType, {
-			guid: guid,
-			animElement: $anim,
-			popsElement: $pops,
-			maskElement: $mask!,
-			$shadowContainer: $shadowContainer,
-			$shadowRoot: $shadowRoot,
-		});
-		/* 拖拽 */
-		if (config.drag) {
-			PopsInstanceUtils.drag($pops, {
-				dragElement: $title,
-				limit: config.dragLimit,
-				extraDistance: config.dragExtraDistance,
-				moveCallBack: config.dragMoveCallBack,
-				endCallBack: config.dragEndCallBack,
-			});
-		}
-		let result = PopsHandler.handleResultDetails(eventDetails);
-
-		return {
-			...result,
-			addEventListener: <K extends keyof PopsPanelEventType>(
-				event: K,
-				listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-				options?: boolean | EventListenerOptions
-			) => {
-				$pops.addEventListener(event, listener as any, options);
-			},
-			removeEventListener: <K extends keyof PopsPanelEventType>(
-				event: K,
-				listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-				options?: boolean | EventListenerOptions
-			) => {
-				$pops.removeEventListener(event, listener as any, options);
-			},
-		};
-	},
-};

package/src/components/panel/types/components-button.ts

@@ -1,69 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-import type { PopsButtonStyleType } from "../../../types/button";
-import type { PopsIconType } from "../../../types/icon";
-/**
- * pops.panel的 button
- */
-export interface PopsPanelButtonDetails
-	extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
-	/**
-	 * （可选）className属性
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 */
-	description?: string;
-	/**
-	 * 类型
-	 */
-	type: "button";
-	/**
-	 * （可选）是否禁用
-	 */
-	disable?: boolean;
-	/**
-	 * 按钮的类型
-	 */
-	buttonType: PopsButtonStyleType;
-	/**
-	 * 按钮的文字
-	 */
-	buttonText: string | (() => string);
-	/**
-	 * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
-	 */
-	buttonIcon?: PopsIconType;
-	/**
-	 * 按钮的图标在右边
-	 */
-	buttonIsRightIcon?: boolean;
-	/**
-	 * 按钮的图标旋转
-	 */
-	buttonIconIsLoading?: boolean;
-	/**
-	 * 点击button触发的事件
-	 */
-	callback: (event: MouseEvent | PointerEvent) => void;
-}

package/src/components/panel/types/components-common.ts

@@ -1,55 +0,0 @@
-import type { PopsPanelFormsDetails } from "./components-forms";
-import { PopsPanelFormsTotalDetails } from ".";
-
-/**
- * 右侧容器的配置
- */
-export interface PopsPanelRightAsideContainerOptions {
-	/** 当前的<li>元素 */
-	target: HTMLLIElement | undefined;
-	/** 当前的<li>元素的父<ul>元素 */
-	ulElement: HTMLUListElement;
-	/** 当前的<li>元素所在的统一的<ul>元素 */
-	sectionContainerULElement?: HTMLUListElement;
-	/**  */
-	formContainerListElement?: HTMLLIElement;
-	/**  */
-	formHeaderDivElement?: HTMLElement | HTMLDivElement;
-}
-/**
- * 通用配置
- */
-export interface PopsPanelCommonDetails<
-	T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails
-> {
-	/**
-     * 在添加到<ul>元素后触发该回调
-     * @param formConfig 配置
-     * @param container 右侧容器的元素
-     * @example
-     * // 例如在type为own时
-     * afterAddToUListCallBack(formConfig, container) {
-     * DOMUtils.on(
-        container.formHeaderDivElement.querySelector(
-        "a"
-        ),
-        "click",
-        void 0,
-        () => {
-        PopsPanel.deleteValue("xxxx");
-        container.ulElement.querySelector(
-            "textarea"
-        ).value = xxxxx.defaultValue;
-        Qmsg.success("已重置");
-        }
-    );
-     * }
-     * 
-     * // 例如在type为forms时
-     * container内只有container.ulElement这个属性
-     */
-	afterAddToUListCallBack?: (
-		formConfig: T,
-		container: PopsPanelRightAsideContainerOptions
-	) => void;
-}

package/src/components/panel/types/components-deepMenu.ts

@@ -1,85 +0,0 @@
-import type { PopsPanelFormsTotalDetails } from ".";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelCommonDetails } from "./components-common";
-/**
- * pops.panel的 深层菜单
- */
-export interface PopsPanelDeepMenuDetails
-	extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
-	/**
-	 * 类型
-	 */
-	type: "deepMenu";
-	/**
-	 * （可选）className属性
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 */
-	description?: string;
-	/**
-	 * （可选）右侧的文字
-	 */
-	rightText?: string;
-	/**
-	 * （可选）右侧的箭头图标，默认启用
-	 */
-	arrowRightIcon?: boolean;
-	/**
-	 * 点击整行触发的事件，可为异步函数
-	 * @param event click事件
-	 * @returns
-	 * + true 表示阻止进入深层菜单
-	 * + false （默认）表示允许进入深层菜单
-	 */
-	clickCallBack?: (
-		event: MouseEvent | PointerEvent,
-		formConfig: PopsPanelDeepMenuDetails
-	) => boolean | void | Promise<boolean | void>;
-	/**
-	 * 进入深层菜单后触发的回调
-	 * @param formConfig
-	 */
-	afterEnterDeepMenuCallBack?: (
-		formConfig: PopsPanelDeepMenuDetails,
-		container: {
-			/** 右侧的总容器 */
-			sectionContainer: HTMLElement;
-			/** 右侧的总容器的标题头容器 */
-			sectionContainerHeaderContainer: HTMLUListElement;
-			/** 右侧的总容器的标题头 */
-			sectionContainerHeader: HTMLLIElement;
-			/** 右侧的内容容器 */
-			sectionBodyContainer: HTMLUListElement;
-		}
-	) => void;
-	/**
-	 * 菜单配置
-	 */
-	forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
-	/**
-	 * （可选）头部的标题文字，没有的话默认是text
-	 */
-	headerTitle?: string;
-}

package/src/components/panel/types/components-forms.ts

@@ -1,45 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-import type { PopsPanelFormsTotalDetails } from ".";
-
-/**
- * pops.panel的 forms
- */
-export interface PopsPanelFormsDetails
-	extends PopsPanelCommonDetails<PopsPanelFormsDetails> {
-	/**
-	 * （可选）className属性
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * 是否进行折叠
-	 */
-	isFold?: boolean;
-	/**
-	 * 类型
-	 */
-	type: "forms";
-	/**
-	 * 子配置
-	 */
-	forms: PopsPanelFormsTotalDetails[];
-}

package/src/components/panel/types/components-input.ts

@@ -1,82 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/**
- * pops.panel的 input
- */
-export interface PopsPanelInputDetails
-	extends PopsPanelCommonDetails<PopsPanelInputDetails> {
-	/**
-	 * （可选）className属性
-	 * @default ""
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 * @default {}
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 * @default {}
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 * @default ""
-	 */
-	description?: string;
-	/**
-	 * 类型
-	 */
-	type: "input";
-	/**
-	 * （可选）是否禁用
-	 * @default false
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): string;
-	/**
-	 * 输入框的值改变触发的回调函数
-	 * @param event 输入事件
-	 * @param value 输入框的值
-	 * @param valueAsNumber 当isNumber为true时，有该值，它可能是NaN
-	 */
-	callback(event: InputEvent, value: string, valueAsNumber?: number): void;
-	/**
-	 * （可选）输入框内的提示
-	 * @default ""
-	 */
-	placeholder?: string;
-	/**
-	 * （可选）是否是密码框
-	 * @default false
-	 */
-	isPassword?: boolean;
-	/**
-	 * （可选）是否是数字框
-	 * @default false
-	 */
-	isNumber?: boolean;
-	/**
-	 * （可选）自己调用的处理回调函数
-	 */
-	handlerCallBack?(
-		liElement: HTMLLIElement,
-		inputElement: HTMLInputElement
-	): void;
-}

package/src/components/panel/types/components-own.ts

@@ -1,31 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/**
- * pops.panel的 own
- * 自定义的
- */
-export interface PopsPanelOwnDetails
-	extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
-	/**
-	 * （可选）className属性
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 */
-	attributes?: any;
-	/**
-	 * （可选）自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 类型
-	 */
-	type: "own";
-	/**
-	 * 获取自定义<li>标签元素
-	 */
-	getLiElementCallBack: (liElement: HTMLLIElement) => HTMLLIElement;
-}

package/src/components/panel/types/components-select.ts

@@ -1,101 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelFormsTotalDetails } from ".";
-
-/**
- * pops.panel的 select
- */
-export interface PopsPanelSelectDetails<T = any>
-	extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
-	/**
-	 * （可选）className属性
-	 * @default ""
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 * @default {}
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 * @default {}
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 * @default ""
-	 */
-	description?: string;
-	/**
-	 * 类型
-	 */
-	type: "select";
-	/**
-	 * （可选）是否禁用
-	 * @default false
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): T;
-	/**
-	 * 选择器的值改变触发的回调函数
-	 * @param event 事件
-	 * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-	 * @param isSelectedText 当前选中的文本
-	 */
-	callback?(
-		event: PointerEvent | TouchEvent,
-		isSelectedValue: T,
-		isSelectedText: string
-	): void;
-	/**
-	 * 点击select元素触发该回调
-	 * @param event 点击事件
-	 * @param selectElement 当前的select元素
-	 */
-	clickCallBack?(
-		event: PointerEvent | MouseEvent,
-		selectElement: HTMLSelectElement
-	): void;
-	/**
-	 * 选择器内的数据组
-	 */
-	data: {
-		/**
-		 * 真正的值
-		 */
-		value: T;
-		/**
-		 * 显示的文字
-		 */
-		text: string;
-		/**
-		 * （可选）是否禁用项
-		 * 触发条件：
-		 * + 点击select元素
-		 * + select元素触发change事件
-		 */
-		disable?(value: T): boolean;
-		/**
-		 * 子配置，跟随切换改变
-		 */
-		forms?:
-			| (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]
-			| (() => (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]);
-	}[];
-}