@whitesev/pops 1.4.0 → 1.5.0

package/src/components/panel/indexType.ts

@@ -0,0 +1,107 @@
+import type {
+	PopsTitleConfig,
+	PopsDragConfig,
+	PopsCommonConfig,
+} from "../../types/components";
+import type { PopsPanelFormsDetails } from "./formsType";
+import type { PopsPanelSwitchDetails } from "./switchType";
+import type { PopsPanelSliderDetails } from "./sliderType";
+import type { PopsPanelInputDetails } from "./inputType";
+import type { PopsPanelTextAreaDetails } from "./textareaType";
+import type { PopsPanelSelectDetails } from "./selectType";
+import type { PopsPanelButtonDetails } from "./buttonType";
+import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
+import type { PopsPanelOwnDetails } from "./ownType";
+import type { PopsHeaderCloseButtonDetails } from "../../types/button";
+
+/** panel的各种类型的配置项 */
+export type PopsPanelFormsTotalDetails =
+	| PopsPanelSwitchDetails
+	| PopsPanelSliderDetails
+	| PopsPanelInputDetails
+	| PopsPanelTextAreaDetails
+	| PopsPanelSelectDetails<any>
+	| PopsPanelButtonDetails
+	| PopsPanelDeepMenuDetails
+	| PopsPanelOwnDetails;
+/**
+ * pops.panel的content配置信息
+ */
+export interface PopsPanelContentConfig {
+	/**
+	 * 元素属性id
+	 */
+	id: string;
+	/**
+	 * 左侧的标题
+	 */
+	title: string;
+	/**
+	 * （可选）中间顶部的标题
+	 */
+	headerTitle?: string;
+	/**
+	 * （可选）内容高度是否自动适应（与headerTitle的高度有关）
+	 */
+	autoAdaptionContentHeight?: string;
+	/**
+	 * （可选）是否是默认的，指打开弹窗的先显示出来的内容
+	 */
+	isDefault?: boolean | (() => boolean);
+	/**
+	 * （可选）是否自动滚动到默认的项
+	 */
+	scrollToDefaultView?: boolean;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 子配置
+	 */
+	forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+	/**
+	 * 左侧容器的点击回调
+	 */
+	callback?: (
+		event: MouseEvent | PointerEvent,
+		rightHeaderElement: HTMLUListElement,
+		rightContainerElement: HTMLUListElement
+	) => void;
+}
+
+/**
+ * pops.panel
+ */
+export interface PopsPanelDetails
+	extends PopsTitleConfig,
+		PopsDragConfig,
+		PopsCommonConfig {
+	/**
+	 * 内容配置
+	 */
+	content: PopsPanelContentConfig[];
+	/**
+	 * 按钮配置
+	 */
+	btn?: {
+		/**
+		 * 右上角的关闭按钮
+		 */
+		close?: PopsHeaderCloseButtonDetails;
+	};
+	/**
+	 * 移动端适配的的className，默认为pops-panel-is-mobile
+	 */
+	mobileClassName?: string;
+	/**
+	 * 是否强制是移动端，默认false
+	 * + true 强制为移动端
+	 * + false 自动根据UA判断是否是移动端
+	 */
+	isMobile?: boolean;
+}

package/src/components/panel/inputType.ts

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

package/src/components/panel/ownType.ts

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

package/src/components/panel/selectType.ts

@@ -0,0 +1,80 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectDetails<T = any>
+	extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * 类型
+	 */
+	type: "select";
+	/**
+	 * （可选）是否禁用
+	 */
+	disabled?: 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;
+	}[];
+}

package/src/components/panel/sliderType.ts

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

package/src/components/panel/switchType.ts

@@ -0,0 +1,43 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+
+/**
+ * pops.panel的 switch
+ */
+export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * 类型
+	 */
+	type: "switch";
+	/**
+	 * （可选）是否禁用
+	 */
+	disabled?: false;
+	/**
+	 * 获取该项的值的回调函数
+	 */
+	getValue(): boolean;
+	/**
+	 * switch开启/关闭触发的回调函数
+	 */
+	callback(event: MouseEvent | PointerEvent, value: boolean): void;
+}

package/src/components/panel/textareaType.ts

@@ -0,0 +1,54 @@
+import type { PopsPanelCommonDetails } from "./commonType";
+
+/**
+ * pops.panel的 textarea
+ */
+export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails {
+	/**
+	 * （可选）className属性
+	 */
+	className?: string;
+	/**
+	 * （可选）自定义元素属性
+	 */
+	attributes?: any;
+	/**
+	 * （可选）自定义属性
+	 */
+	props?: HTMLElement;
+	/**
+	 * 显示在左边的文字
+	 */
+	text: string;
+	/**
+	 * （可选）左边的文字下面的描述
+	 */
+	description?: string;
+	/**
+	 * 类型
+	 */
+	type: "textarea";
+	/**
+	 * （可选）是否禁用
+	 */
+	disabled?: boolean;
+	/**
+	 * 获取该项的值的回调函数
+	 */
+	getValue(): string;
+	/**
+	 * textarea输入框的值改变触发的回调函数
+	 * @param event 事件
+	 * @param value 当前的textarea内的值
+	 */
+	callback(
+		event: InputEvent & {
+			target: HTMLTextAreaElement;
+		},
+		value: string
+	): void;
+	/**
+	 * 输入框内的提示
+	 */
+	placeholder: string;
+}

package/src/components/prompt/index.css

@@ -0,0 +1,60 @@
+.pops[type-value] .pops-prompt-title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.pops[type-value="prompt"] .pops-prompt-title {
+	width: 100%;
+	height: var(--container-title-height);
+	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+}
+.pops[type-value="prompt"] .pops-prompt-title p[pops] {
+	width: 100%;
+	overflow: hidden;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	line-height: var(--container-title-height);
+}
+.pops[type-value="prompt"] .pops-prompt-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
+.pops[type-value="prompt"] .pops-prompt-content {
+	width: 100%;
+	height: calc(
+		100% - var(--container-title-height) - var(--container-bottom-btn-height)
+	);
+	overflow: auto;
+	word-break: break-word;
+}
+.pops[type-value="prompt"] .pops-prompt-btn {
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	padding: 10px 10px 10px 10px;
+	width: 100%;
+	height: var(--container-bottom-btn-height);
+	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	text-align: right;
+	line-height: var(--container-bottom-btn-height);
+	align-items: center;
+}
+.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],
+.pops[type-value="prompt"] textarea[pops] {
+	width: 100%;
+	height: 100%;
+	outline: 0;
+	border: 0;
+	color: rgb(51, 51, 51);
+}