@whitesev/pops 2.2.7 → 2.2.9

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

@@ -1,133 +0,0 @@
-import type { PopsAlertDetails } from "../../alert/types";
-import type { PopsPanelCommonDetails } from "./components-common";
-
-export interface PopsPanelSelectMultipleDataOption<T> {
-	/**
-	 * 真正的值
-	 */
-	value: T;
-	/**
-	 * 显示的文字
-	 */
-	text:
-		| string
-		| ((
-				/** 当前的值 */
-				value: T,
-				/** 所有选中的配置信息 */
-				allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
-		  ) => string);
-	/**
-	 * 显示的文字是否是html
-	 * @default false
-	 */
-	isHTML?: boolean;
-	/**
-	 * （可选）是否禁用项
-	 * 触发条件：
-	 * + 点击select元素
-	 * + select元素触发change事件
-	 * @param value 当前的值
-	 * @param allSelectedInfo 所有选中的配置信息
-	 */
-	disable?(
-		value: T,
-		allSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
-	): boolean;
-}
-/**
- * pops.panel的 select
- */
-export interface PopsPanelSelectMultipleDetails<T = any>
-	extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
-	/**
-	 * （可选）className属性
-	 */
-	className?: string;
-	/**
-	 * （可选）自定义元素属性
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 */
-	description?: string;
-	/**
-	 * 类型
-	 */
-	type: "select-multiple";
-	/**
-	 * （可选）是否禁用
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 提示文字
-	 */
-	placeholder?: string | (() => string);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): T[];
-	/**
-	 * 弹出的下拉列表弹窗的配置
-	 */
-	selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
-	/**
-	 * 选择器的值改变触发的回调函数
-	 * @param event 事件
-	 * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-	 * @param isSelectedText 当前选中的文本
-	 */
-	callback?(
-		/** 当前已选中的信息 */
-		isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
-	): void;
-	/**
-	 * 点击某个项的元素触发该回调
-	 * @param event 点击事件
-	 * @param selectElement 当前的选中的元素
-	 * @returns 如果返回boolean为false，则不会触发默认的点击事件
-	 */
-	clickCallBack?(
-		event: PointerEvent | MouseEvent,
-		/** 当前已选中的信息 */
-		isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
-	): void | boolean;
-	/**
-	 * 点击标签tag的关闭图标触发该回调
-	 * 如果返回boolean类型且为false，则阻止默认的事件
-	 */
-	closeIconClickCallBack?: (
-		event: PointerEvent | MouseEvent,
-		data: {
-			/** 标签元素 */
-			$tag: HTMLElement;
-			/** 关闭图标元素 */
-			$closeIcon: HTMLElement;
-			/** 值 */
-			value: T;
-			/** 显示的文字 */
-			text: PopsPanelSelectMultipleDataOption<T>["text"];
-		}
-	) => void | boolean;
-	/**
-	 * 选择器内的数据组
-	 */
-	data: PopsPanelSelectMultipleDataOption<T>[];
-}

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

@@ -1,78 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/**
- * pops.panel的 slider
- */
-export interface PopsPanelSliderDetails
-	extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
-	/**
-	 * className属性
-	 * @default ""
-	 */
-	className?: string;
-	/**
-	 * 自定义元素属性
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * 自定义属性
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 显示在左边的文字
-	 */
-	text: string;
-	/**
-	 * （可选）左边的文字下面的描述
-	 * @default ""
-	 */
-	description?: string;
-	/**
-	 * 类型
-	 * @default "slider"
-	 */
-	type: "slider";
-	/**
-	 * （可选）是否禁用
-	 * @default false
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 是否显示滑块的hover提示
-	 * @default true
-	 */
-	isShowHoverTip?: boolean | (() => boolean);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): number;
-	/**
-	 * 滑块的值改变触发的回调函数
-	 */
-	callback(event: InputEvent, value: number): void;
-	/**
-	 * 获取tooltip的提示内容，可自定义，默认为slider的值
-	 */
-	getToolTipContent?: (value: number) => string;
-	/**
-	 * 滑块的最小值
-	 */
-	min: number;
-	/**
-	 * 滑块的最大值
-	 */
-	max: number;
-	/**
-	 * （可选）每次滑动的间隔值
-	 * @default 1
-	 */
-	step?: number;
-}

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

@@ -1,57 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/**
- * pops.panel的 switch
- */
-export interface PopsPanelSwitchDetails
-	extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
-	/**
-	 * （可选）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: "switch";
-	/**
-	 * （可选）是否禁用
-	 * @default false
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): boolean;
-	/**
-	 * switch开启/关闭触发的回调函数
-	 */
-	callback(event: MouseEvent | PointerEvent, value: boolean): void;
-}

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

@@ -1,69 +0,0 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/**
- * pops.panel的 textarea
- */
-export interface PopsPanelTextAreaDetails
-	extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
-	/**
-	 * （可选）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: "textarea";
-	/**
-	 * （可选）是否禁用
-	 * @default false
-	 */
-	disabled?: boolean | (() => boolean);
-	/**
-	 * 获取该项的值的回调函数
-	 */
-	getValue(): string;
-	/**
-	 * textarea输入框的值改变触发的回调函数
-	 * @param event 事件
-	 * @param value 当前的textarea内的值
-	 */
-	callback(
-		event: InputEvent & {
-			target: HTMLTextAreaElement;
-		},
-		value: string
-	): void;
-	/**
-	 * 输入框内的提示
-	 * @default ""
-	 */
-	placeholder?: string;
-}

package/src/components/panel/types/index.ts

@@ -1,177 +0,0 @@
-import type {
-	PopsTitleConfig,
-	PopsDragConfig,
-	PopsCommonConfig,
-} from "../../../types/components";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelSwitchDetails } from "./components-switch";
-import type { PopsPanelSliderDetails } from "./components-slider";
-import type { PopsPanelInputDetails } from "./components-input";
-import type { PopsPanelTextAreaDetails } from "./components-textarea";
-import type { PopsPanelSelectDetails } from "./components-select";
-import type { PopsPanelButtonDetails } from "./components-button";
-import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
-import type { PopsPanelOwnDetails } from "./components-own";
-import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
-import { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
-
-/** panel的各种类型的配置项 */
-export type PopsPanelFormsTotalDetails =
-	| PopsPanelSwitchDetails
-	| PopsPanelSliderDetails
-	| PopsPanelInputDetails
-	| PopsPanelTextAreaDetails
-	| PopsPanelSelectDetails<any>
-	| PopsPanelSelectMultipleDetails<any>
-	| PopsPanelButtonDetails
-	| PopsPanelDeepMenuDetails
-	| PopsPanelOwnDetails;
-
-/**
- * panel的内部事件
- */
-export type PopsPanelEventType = {
-	/**
-	 * 该事件在右侧容器内的元素改变时触发
-	 */
-	"pops:renderRightContainer": {
-		/**
-		 * 菜单配置
-		 */
-		formConfig: PopsPanelContentConfig[] | PopsPanelDeepMenuDetails;
-	};
-};
-
-/**
- * pops.panel的content配置信息
- */
-export interface PopsPanelContentConfig {
-	/**
-	 * 元素属性id
-	 */
-	id: string;
-	/**
-	 * （可选）元素的className，值为空的话就不设置
-	 * @default ""
-	 */
-	className?: string | string[];
-	/**
-	 * 左侧的标题，可以是html格式
-	 */
-	title: string | (() => string);
-	/**
-	 * （可选）中间顶部的标题，如果为空，则使用title的值代替
-	 * @default title
-	 */
-	headerTitle?: string | (() => string);
-	/**
-	 * （可选）是否是默认的，指打开弹窗的先显示出来的内容，默认为首位第一个项，如果多个配置都设置了isDefault的值为true，那么只有第一个值生效
-	 * @default false
-	 */
-	isDefault?: boolean | (() => boolean);
-	/**
-	 * （可选）是否是位于底部的
-	 *
-	 * 自上而下排序
-	 * @default false
-	 */
-	isBottom?: boolean | (() => boolean);
-	/**
-	 * （可选）是否禁用左侧项的hover的CSS样式
-	 */
-	disableAsideItemHoverCSS?: boolean | (() => boolean);
-	/**
-	 * （可选）是否自动滚动到默认的项
-	 * @default false
-	 */
-	scrollToDefaultView?: boolean;
-	/**
-	 * （可选）自定义元素属性.setAttribute、.getAttribute
-	 */
-	attributes?:
-		| {
-				[key: string]: any;
-		  }
-		| {
-				[key: string]: any;
-		  }[];
-	/**
-	 * （可选）自定义元素内部的属性值
-	 */
-	props?: {
-		[K in keyof HTMLElement]?: HTMLElement[K];
-	};
-	/**
-	 * 子配置
-	 */
-	forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
-	/**
-	 * 左侧容器的点击回调（点击后第一个触发该回调）
-	 * @returns
-	 * + false 阻止默认行为
-	 */
-	clickFirstCallback?: (
-		event: MouseEvent | PointerEvent,
-		rightHeaderElement: HTMLUListElement,
-		rightContainerElement: HTMLUListElement
-	) => void | boolean | Promise<void | boolean>;
-	/**
-	 * 左侧容器的点击回调
-	 * @returns
-	 * + false 阻止默认进入菜单详情
-	 */
-	clickCallback?: (
-		event: MouseEvent | PointerEvent,
-		rightHeaderElement: HTMLUListElement,
-		rightContainerElement: HTMLUListElement
-	) => void | boolean | Promise<void | boolean>;
-	/**
-	 * 左侧项添加到panel后的回调
-	 */
-	afterRender?: (
-		/**
-		 * 配置
-		 */
-		data: {
-			/** 容器配置 */
-			asideConfig: PopsPanelContentConfig;
-			/** 左侧容器的元素 */
-			$asideLiElement: HTMLLIElement;
-		}
-	) => void;
-}
-
-/**
- * pops.panel
- */
-export interface PopsPanelDetails
-	extends PopsTitleConfig,
-		PopsDragConfig,
-		PopsCommonConfig {
-	/**
-	 * 内容配置
-	 */
-	content: PopsPanelContentConfig[];
-	/**
-	 * 右上角的按钮配置
-	 */
-	btn?: {
-		/**
-		 * 关闭按钮
-		 */
-		close?: PopsHeaderCloseButtonDetails;
-	};
-	/**
-	 * 移动端适配的的className
-	 *
-	 * @default "pops-panel-is-mobile"
-	 */
-	mobileClassName?: string;
-	/**
-	 * 是否强制是移动端，默认false
-	 * + true 强制为移动端
-	 * + false 自动根据UA判断是否是移动端
-	 * @default false
-	 */
-	isMobile?: boolean;
-}

package/src/components/prompt/config.ts

@@ -1,94 +0,0 @@
-import type { PopsPromptDetails } from "./types/index";
-
-export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
-	return {
-		title: {
-			text: "默认标题",
-			position: "left",
-			html: false,
-			style: "",
-		},
-		content: {
-			text: "",
-			select: false,
-			password: false,
-			row: false,
-			focus: true,
-			placeholder: "默认提示",
-			style: "",
-		},
-		btn: {
-			merge: false,
-			mergeReverse: false,
-			reverse: false,
-			position: "flex-end",
-			ok: {
-				enable: true,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "确定",
-				type: "success",
-				callback(detail) {
-					detail.close();
-				},
-			},
-			cancel: {
-				enable: true,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "关闭",
-				type: "default",
-				callback(detail) {
-					detail.close();
-				},
-			},
-			other: {
-				enable: false,
-				size: void 0 as any,
-				icon: void 0 as any,
-				rightIcon: false,
-				iconIsLoading: false,
-				text: "其它按钮",
-				type: "default",
-				callback(detail) {
-					detail.close();
-				},
-			},
-			close: {
-				enable: true,
-				callback(detail) {
-					detail.close();
-				},
-			},
-		},
-		useShadowRoot: true,
-		class: "",
-		only: false,
-		width: "350px",
-		height: "200px",
-		position: "center",
-		animation: "pops-anim-fadein-zoom",
-		zIndex: 10000,
-		mask: {
-			enable: false,
-			clickEvent: {
-				toClose: false,
-				toHide: false,
-			},
-			clickCallBack: null,
-		},
-		drag: false,
-		dragLimit: true,
-		dragExtraDistance: 3,
-		dragMoveCallBack() {},
-		dragEndCallBack() {},
-		forbiddenScroll: false,
-
-		style: null,
-		beforeAppendToPageCallBack() {},
-	};
-};

package/src/components/prompt/index.css

@@ -1,34 +0,0 @@
-.pops[type-value="prompt"] {
-	--input-color: #000000;
-	--input-bg-color: none;
-	--input-placeholder-color: #a1a4ac;
-}
-.pops[type-value="prompt"] input[pops],
-.pops[type-value="prompt"] textarea[pops] {
-	width: 100%;
-	height: 100%;
-	outline: 0;
-	border: 0;
-	color: var(--input-color);
-	background-color: var(--input-bg-color);
-}
-
-.pops[type-value="prompt"] input[pops] {
-	padding: 5px 10px;
-}
-.pops[type-value="prompt"] textarea[pops] {
-	padding: 5px 10px;
-	resize: none;
-}
-
-.pops[type-value="prompt"] input[pops]::placeholder,
-.pops[type-value="prompt"] textarea[pops]::placeholder {
-	color: var(--input-placeholder-color);
-}
-@media (prefers-color-scheme: dark) {
-	.pops[type-value="prompt"] {
-		--input-color: #ffffff;
-		--input-bg-color: #333333;
-		--input-placeholder-color: #8d9095;
-	}
-}