@whitesev/pops 2.2.8 → 2.3.0

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

@@ -1,147 +0,0 @@
-import type { PopsCommonConfig } from "../../../types/components";
-
-/**
- * 搜索建议悬浮窗
- * pops.searchSuggestion
- */
-export interface PopsSearchSuggestionDetails<T = any>
-	extends Pick<PopsCommonConfig, "useShadowRoot" | "zIndex" | "style"> {
-	/**
-	 * 当前的环境，可以是document，可以是shadowroot，默认是document
-	 * @default document
-	 */
-	selfDocument?: Document | ShadowRoot | (Document | ShadowRoot)[];
-	/**
-	 * 目标元素，一般是跟随它的位置变化，监听它的focus/click
-	 */
-	target: HTMLElement;
-	/**
-	 * 目标input元素，监听它的focus/click/input事件
-	 */
-	inputTarget?: HTMLInputElement | HTMLTextAreaElement;
-	/**
-	 * 数据
-	 */
-	data: T[] | (() => T[]);
-	/**
-	 * 右边的删除按钮图标
-	 */
-	deleteIcon?: {
-		/**
-		 * 是否启用
-		 * @default true
-		 */
-		enable?: boolean;
-		/**
-		 * 点击回调
-		 */
-		callback?: (
-			event: MouseEvent | PointerEvent,
-			liElement: HTMLLIElement,
-			data: T
-		) => void;
-	};
-	/**
-	 * 自定义的className
-	 */
-	className?: string;
-	/**
-	 * position是否使用absolut，否则是relative
-	 * @default true
-	 */
-	isAbsolute?: boolean;
-	/**
-	 * 是否启用动画
-	 * @default true
-	 */
-	isAnimation?: boolean;
-	/**
-	 * 建议框的宽度
-	 * @default "250px"
-	 */
-	width?: string;
-	/**
-	 * 是否和config.target的宽度同步
-	 * @default true
-	 */
-	followTargetWidth?: true;
-	/**
-	 * 建议框的最大高度
-	 * @default "300px"
-	 */
-	maxHeight?: string;
-	/**
-	 * 建议框距离元素的距离
-	 * @default 0
-	 */
-	topDistance?: number;
-	/**
-	 * 建议框显示的位置，默认是auto(自动判断位置)
-	 * @default "auto"
-	 */
-	position?: "top" | "bottom" | "auto";
-	/**
-	 * 当位置在上面时（包括auto自动判断在上面时），是否对搜索项进行反转
-	 * @default true
-	 */
-	positionTopToReverse?: boolean;
-	/**
-	 * 搜索中的提示
-	 *
-	 * 前提：inputTarget是input/textarea
-	 *
-	 * 触发change事件，且没有搜索到数据，则显示此提示
-	 */
-	searchingTip?: string;
-	/**
-	 * 没有搜索结果的提示的html
-	 *
-	 * 前提：inputTarget是input/textarea
-	 *
-	 * 触发change事件，且没有搜索到数据，则显示此结果项
-	 */
-	toSearhNotResultHTML?: string;
-	/**
-	 * 没有搜索结果是否隐藏提示框
-	 * @default false
-	 */
-	toHideWithNotResult?: boolean;
-	/**
-	 * 跟随目标的位置
-	 * @default "target"
-	 */
-	followPosition?: "target" | "input" | "inputCursor";
-	/**
-	 * 获取每一项的html，在显示的时候会调用该函数
-	 *
-	 * 它的父元素是一个<li>标签
-	 */
-	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;
-}

package/src/components/tooltip/config.ts

@@ -1,34 +0,0 @@
-import type { PopsToolTipDetails } from "./types/index";
-
-export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
-	// @ts-ignore
-	return {
-		useShadowRoot: true,
-		target: null as any,
-		content: "默认文字",
-		isDiffContent: false,
-		position: "top",
-		className: "",
-		isFixed: false,
-		alwaysShow: false,
-		triggerShowEventName: "mouseenter touchstart",
-		triggerCloseEventName: "mouseleave touchend",
-		zIndex: 10000,
-		only: false,
-		eventOption: {
-			passive: false,
-			capture: true,
-			once: false,
-		},
-		showBeforeCallBack() {},
-		showAfterCallBack() {},
-		closeBeforeCallBack() {},
-		closeAfterCallBack() {},
-		delayCloseTime: 100,
-		showArrow: true,
-		arrowDistance: 12.5,
-		otherDistance: 0,
-		style: "",
-		beforeAppendToPageCallBack() {},
-	} as Required<PopsToolTipDetails>;
-};

package/src/components/tooltip/index.css

@@ -1,196 +0,0 @@
-.pops-tip {
-	--pops-bg-opacity: 1;
-	--tooltip-color: #4e4e4e;
-	--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-	--tooltip-bd-radius: 2px;
-	--tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);
-	--tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);
-	--tooltip-font-size: 14px;
-	--tooltip-padding-top: 13px;
-	--tooltip-padding-right: 13px;
-	--tooltip-padding-bottom: 13px;
-	--tooltip-padding-left: 13px;
-
-	--tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
-	--tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
-	--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;
-}
-.pops-tip {
-	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 var(--tooltip-box-shadow-left-color),
-		0 1.5px 6px var(--tooltip-box-shadow-right-color);
-	color: var(--tooltip-color);
-	font-size: var(--tooltip-font-size);
-}
-.pops-tip[data-position="absolute"] {
-	position: absolute;
-}
-.pops-tip[data-position="fixed"] {
-	position: fixed;
-}
-
-.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 var(--tooltip-arrow-box-shadow-left-color),
-		0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
-	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 var(--tooltip-arrow-box-shadow-left-color),
-		0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
-	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;
-}
-
-/* github的样式 */
-.pops-tip.github-tooltip {
-	--tooltip-bg-opacity: 1;
-	--tooltip-color: #ffffff;
-	--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;
-}
-
-@media (prefers-color-scheme: dark) {
-	.pops-tip {
-		--tooltip-color: #ffffff;
-		--tooltip-bg-color: #fafafa;
-		--tooltip-arrow--after-color: #fafafa;
-		--tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));
-	}
-}