@whitesev/pops 1.4.0 → 1.5.0

package/src/components/searchSuggestion/indexType.ts

@@ -0,0 +1,238 @@
+/**
+ * 搜索建议悬浮窗
+ * pops.searchSuggestion
+ */
+export interface PopsSearchSuggestionDetails<T = any> {
+	/**
+	 * 当前的环境，可以是document，可以是shadowroot，默认是document
+	 */
+	selfDocument?: Document;
+	/**
+	 * 目标元素，一般是跟随它的位置变化，监听它的focus/click
+	 */
+	target: HTMLElement;
+	/**
+	 * 目标input元素，监听它的focus/click/input事件
+	 */
+	inputTarget?: HTMLInputElement;
+	/**
+	 * 数据
+	 */
+	data: T[];
+	/**
+	 * 右边的删除按钮图标
+	 */
+	deleteIcon?: {
+		/**
+		 * 是否启用，默认true
+		 */
+		enable?: boolean;
+		/**
+		 * 点击回调
+		 */
+		callback?: (
+			event: MouseEvent | PointerEvent,
+			liElement: HTMLLIElement,
+			data: T
+		) => void;
+	};
+	/**
+	 * 自定义的className
+	 */
+	className?: string;
+	/**
+	 * position是否使用absolut，默认true
+	 */
+	isAbsolute?: boolean;
+	/**
+	 * 是否启用动画，默认true
+	 */
+	isAnimation?: true;
+	/**
+	 * 建议框的宽度，默认250px
+	 */
+	width?: string;
+	/**
+	 * 是否和config.target的宽度同步，默认true
+	 */
+	followTargetWidth?: true;
+	/**
+	 * 建议框的最大高度，默认300px
+	 */
+	maxHeight?: string;
+	/**
+	 * 建议框距离元素的距离，默认0
+	 */
+	topDistance?: number;
+	/**
+	 * 建议框显示的位置，默认是auto(自动判断位置)
+	 */
+	position?: "top" | "bottom" | "auto";
+	/**
+	 * 当位置在上面时（包括auto自动判断在上面时），是否对搜索项进行反转，默认true
+	 */
+	positionTopToReverse?: boolean;
+	/**
+	 * 层级，默认10000
+	 */
+	zIndex?: 10000;
+	/**
+	 * 搜索中的提示
+	 */
+	searchingTip?: string;
+	/**
+	 * 没有搜索结果的提示的html
+	 */
+	toSearhNotResultHTML?: string;
+	/**
+	 * 没有搜索结果是否隐藏提示框，默认false
+	 */
+	toHideWithNotResult?: boolean;
+	/**
+	 * 跟随目标的位置，默认为target的位置
+	 */
+	followPosition?: "target" | "input" | "inputCursor";
+	/**
+	 * 获取每一项的html
+	 */
+	getItemHTML: (item: T) => string;
+	/**
+	 * 当config.target触发input时自动调用该函数来获取数据
+	 * @param inputValue 当前输入框的值
+	 */
+	getData: (inputValue: string) => Promise<T[]> | T[];
+	/**
+	 * 每一项的点击回调
+	 * @param event 触发的事件
+	 * @param liElement 每一项的元素
+	 * @param data config.data的数据
+	 */
+	itemClickCallBack?: (
+		event: MouseEvent | PointerEvent,
+		liElement: HTMLLIElement,
+		data: T
+	) => void;
+	/**
+	 * 键盘的上下键选择的回调
+	 * @param event 触发的事件
+	 * @param liElement 每一项的元素
+	 * @param data config.data的数据
+	 */
+	selectCallBack?: (
+		event: MouseEvent,
+		liElement: HTMLLIElement,
+		data: T
+	) => void;
+	/**
+	 * （可选）自定义style
+	 */
+	style?: string;
+}
+
+/**
+ * pops.searchSuggestion的函数返回值
+ */
+export interface PopsSearchSuggestionResult<T = any> {
+	/**
+	 * 根元素
+	 */
+	root: HTMLElement;
+	/**
+	 * ul元素
+	 */
+	hintULElement: HTMLUListElement;
+	/**
+	 * 初始化
+	 */
+	init: () => void;
+	/**
+	 * 获取显示出搜索建议框的html
+	 */
+	getSearchSelectElement: () => HTMLElement;
+	/**
+	 * 获取显示出搜索建议框的每一项的html
+	 */
+	getSearchItemLiElement: (data: T, index: number) => HTMLElement;
+	/**
+	 * 获取data-value值
+	 */
+	getItemDataValue: (data: T) => T;
+	/**
+	 * 设置搜索建议框每一项的点击事件
+	 */
+	setSearchItemClickEvent: (liElement: HTMLLIElement) => void;
+	/**
+	 * 监听输入框内容改变
+	 */
+	setInputChangeEvent: () => void;
+	/**
+	 * 移除输入框内容改变的监听
+	 */
+	removeInputChangeEvent: () => void;
+	/**
+	 * 设置显示搜索建议框的事件
+	 */
+	setShowEvent: () => void;
+	/**
+	 * 移除显示搜索建议框的事件
+	 */
+	removeShowEvent: () => void;
+	/**
+	 * 设置隐藏搜索建议框的事件
+	 */
+	setHideEvent: () => void;
+	/**
+	 * 移除隐藏搜索建议框的事件
+	 */
+	removeHideEvent: () => void;
+	/**
+	 * 设置所有监听
+	 */
+	setAllEvent: () => void;
+	/**
+	 * 移除所有监听
+	 */
+	removeAllEvent: () => void;
+	/**
+	 * 获取删除按钮的html
+	 */
+	getDeleteIconHTML: (size: number, fill: string) => void;
+	/**
+	 * 设置当前正在搜索中的提示
+	 */
+	setPromptsInSearch: () => void;
+	/**
+	 * 移除正在搜索中的提示
+	 */
+	removePromptsInSearch: () => void;
+	/**
+	 * 清空所有的搜索结果
+	 */
+	clearAllSearchItemLi: () => void;
+	/**
+	 * 修改搜索建议框的位置(top、left)
+	 * 因为目标元素可能是动态隐藏的
+	 */
+	changeHintULElementPosition: () => void;
+	/**
+	 * 修改搜索建议框的width
+	 * 因为目标元素可能是动态隐藏的
+	 */
+	changeHintULElementWidth: () => void;
+	/**
+	 * 更新页面显示的搜索结果
+	 */
+	update: (data: T[]) => void;
+	/**
+	 * 清空当前的搜索结果并显示无结果
+	 */
+	clear: () => void;
+	/**
+	 * 隐藏搜索建议框
+	 */
+	hide: () => void;
+	/**
+	 * 显示搜索建议框
+	 */
+	show: () => void;
+}

package/src/components/tooltip/index.css

@@ -0,0 +1,171 @@
+.pops-tip {
+	--tooltip-color: #4e4e4e;
+	--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--tooltip-bd-radius: 2px;
+	--tooltip-font-size: 14px;
+	--tooltip-padding-top: 13px;
+	--tooltip-padding-right: 13px;
+	--tooltip-padding-bottom: 13px;
+	--tooltip-padding-left: 13px;
+
+	--tooltip-arrow--after-color: rgb(78, 78, 78);
+	--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--tooltip-arrow--after-width: 12px;
+	--tooltip-arrow--after-height: 12px;
+
+	position: absolute;
+	padding: var(--tooltip-padding-top) var(--tooltip-padding-right)
+		var(--tooltip-padding-bottom) var(--tooltip-padding-left);
+	max-width: 400px;
+	max-height: 300px;
+	border-radius: var(--tooltip-bd-radius);
+	background-color: var(--tooltip-bg-color);
+	box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
+	color: var(--tooltip-color);
+	font-size: var(--tooltip-font-size);
+}
+/* github的样式 */
+.pops-tip.github-tooltip {
+	--tooltip-bg-opacity: 1;
+	--tooltip-color: rgb(255, 255, 255);
+	--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
+	--tooltip-bd-radius: 6px;
+	--tooltip-padding-top: 6px;
+	--tooltip-padding-right: 8px;
+	--tooltip-padding-bottom: 6px;
+	--tooltip-padding-left: 8px;
+
+	--tooltip-arrow--after-color: rgb(255, 255, 255);
+	--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
+	--tooltip-arrow--after-width: 8px;
+	--tooltip-arrow--after-height: 8px;
+}
+.pops-tip .pops-tip-arrow {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	overflow: hidden;
+	width: 100%;
+	height: 12.5px;
+	transform: translateX(-50%);
+}
+
+.pops-tip .pops-tip-arrow::after {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	width: var(--tooltip-arrow--after-width);
+	height: var(--tooltip-arrow--after-height);
+	background: var(--tooltip-arrow--after-bg-color);
+	color: var(--tooltip-arrow--after-color);
+	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
+	content: "";
+	transform: translateX(-50%) translateY(-50%) rotate(45deg);
+}
+
+.pops-tip .pops-tip-arrow[data-position="bottom"] {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	overflow: hidden;
+	width: 100%;
+	height: 12.5px;
+	transform: translateX(-50%);
+}
+
+.pops-tip .pops-tip-arrow[data-position="bottom"]:after {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	width: var(--tooltip-arrow--after-width);
+	height: var(--tooltip-arrow--after-height);
+	background: var(--tooltip-arrow--after-bg-color);
+	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
+	content: "";
+	transform: translateX(-50%) translateY(-50%) rotate(45deg);
+}
+
+.pops-tip .pops-tip-arrow[data-position="left"] {
+	top: 50%;
+	left: -12.5px;
+	width: 12.5px;
+	height: 50px;
+	transform: translateY(-50%);
+}
+
+.pops-tip .pops-tip-arrow[data-position="left"]:after {
+	position: absolute;
+	top: 50%;
+	left: 100%;
+	content: "";
+}
+
+.pops-tip .pops-tip-arrow[data-position="right"] {
+	top: 50%;
+	right: -12.5px;
+	left: auto;
+	width: 12.5px;
+	height: 50px;
+	transform: translateY(-50%);
+}
+
+.pops-tip .pops-tip-arrow[data-position="right"]:after {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	content: "";
+}
+
+.pops-tip .pops-tip-arrow[data-position="top"] {
+	top: -12.5px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.pops-tip .pops-tip-arrow[data-position="top"]:after {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	content: "";
+}
+
+.pops-tip[data-motion] {
+	-webkit-animation-duration: 0.25s;
+	animation-duration: 0.25s;
+	-webkit-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
+}
+.pops-tip[data-motion="fadeOutRight"] {
+	-webkit-animation-name: pops-motion-fadeOutRight;
+	animation-name: pops-motion-fadeOutRight;
+}
+.pops-tip[data-motion="fadeInTop"] {
+	-webkit-animation-name: pops-motion-fadeInTop;
+	animation-name: pops-motion-fadeInTop;
+	animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);
+}
+.pops-tip[data-motion="fadeOutTop"] {
+	-webkit-animation-name: pops-motion-fadeOutTop;
+	animation-name: pops-motion-fadeOutTop;
+	animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);
+}
+.pops-tip[data-motion="fadeInBottom"] {
+	-webkit-animation-name: pops-motion-fadeInBottom;
+	animation-name: pops-motion-fadeInBottom;
+}
+.pops-tip[data-motion="fadeOutBottom"] {
+	-webkit-animation-name: pops-motion-fadeOutBottom;
+	animation-name: pops-motion-fadeOutBottom;
+}
+.pops-tip[data-motion="fadeInLeft"] {
+	-webkit-animation-name: pops-motion-fadeInLeft;
+	animation-name: pops-motion-fadeInLeft;
+}
+.pops-tip[data-motion="fadeOutLeft"] {
+	-webkit-animation-name: pops-motion-fadeOutLeft;
+	animation-name: pops-motion-fadeOutLeft;
+}
+.pops-tip[data-motion="fadeInRight"] {
+	-webkit-animation-name: pops-motion-fadeInRight;
+	animation-name: pops-motion-fadeInRight;
+}