@whitesev/pops 2.4.6 → 2.4.7

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

@@ -0,0 +1,239 @@
+import type { PopsCommonConfig } from "../../../types/components";
+
+export type PopsSearchSuggestionData<T = any> = {
+  /**
+   * 值
+   */
+  value: T;
+  /**
+   * 是否启用右侧的删除按钮
+   * @default true
+   */
+  enableDeleteButton?: boolean;
+  /**
+   * 删除按钮的点击回调
+   * @returns
+   *
+   * + true 移除该元素并且从data中移除该数据， 如果data是函数返回数组的话，那么不会生效
+   */
+  deleteButtonClickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent,
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement,
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>,
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>
+  ) => void | boolean | Promise<void | boolean>;
+  /**
+   * 获取每一项的html，在显示的时候会调用该函数
+   *
+   * 它的父元素是一个\<li>元素
+   */
+  itemView: (
+    /**
+     * 数据项
+     */
+    dateItem: PopsSearchSuggestionData<T>,
+    /**
+     * 父元素\<li>
+     */
+    $parent: HTMLLIElement,
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>
+  ) => HTMLElement | string;
+  /**
+   * 每一项的点击回调
+   * @returns
+   *
+   * + true 如果设置了inputTarget且类型是input或textarea的话，那么将自动设置目标值为当前点击项的value值
+   */
+  clickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent,
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement,
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>,
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>
+  ) => void | boolean | Promise<void | boolean>;
+  /**
+   * 键盘的上下键选择的回调
+   */
+  selectCallback?: (
+    /**
+     * 键盘事件
+     */
+    event: KeyboardEvent,
+    /**
+     * 当前项的元素
+     */
+    $dataItem: HTMLLIElement,
+    /**
+     * 数据项
+     */
+    dataItem: PopsSearchSuggestionData<T>,
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>
+  ) => void;
+};
+/**
+ * 搜索建议悬浮窗
+ * 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事件
+   *
+   * 如果未填，那么自动使用target的值
+   * @default config.target
+   */
+  inputTarget?: HTMLInputElement | HTMLTextAreaElement;
+  /**
+   * 数据
+   */
+  data: PopsSearchSuggestionData<T>[] | (() => PopsSearchSuggestionData<T>[]);
+  /**
+   * 自定义的className
+   * @default ""
+   */
+  className?: string;
+  /**
+   * 建议框的position位置
+   *
+   * + `true`：absolute
+   * + `false`：relative
+   * @default true
+   */
+  isAbsolute?: boolean;
+  /**
+   * 是否启用动画
+   * @default false
+   */
+  isAnimation?: boolean;
+  /**
+   * 是否启用折叠动画
+   * @default true
+   */
+  useFoldAnimation?: boolean;
+  /**
+   * 是否启用箭头
+   * @default false
+   */
+  useArrow?: 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;
+  /**
+   * 搜索中的提示，可以是html
+   *
+   * 前提：inputTarget是input/textarea
+   *
+   * 触发change事件，且没有搜索到数据，则显示此提示
+   */
+  searchingTip?: string;
+  /**
+   * 没有搜索结果的提示的html
+   *
+   * 前提：inputTarget是input/textarea
+   *
+   * 触发change事件，且没有搜索到数据，则显示此结果项
+   *
+   * 如果该值是函数，需要返回的\<li>元素属性上存在data-none="true"
+   * @example
+   * <li data-none="true">暂无结果</li>
+   */
+  toSearhNotResultHTML?: string | (() => HTMLLIElement);
+  /**
+   * 当没有搜索结果时，是否隐藏建议框
+   * @default false
+   */
+  toHideWithNotResult?: boolean;
+  /**
+   * 跟随目标的位置
+   *
+   * + `target`：跟随config.target的位置
+   * + `input`：跟随config.inputTarget的位置
+   * + `inputCursor`：跟随config.inputTarget的输入框光标位置
+   *
+   * @default "target"
+   */
+  followPosition?: "target" | "input" | "inputCursor";
+  /**
+   * 当config.target触发input时自动调用该函数来获取数据
+   * @returns 返回是需要显示的数据
+   */
+  inputTargetChangeRefreshShowDataCallback?: (
+    /**
+     * 当前输入框的值
+     */
+    inputValue: string,
+    /**
+     * config.data的数据
+     */
+    data: PopsSearchSuggestionData<T>[],
+    /**
+     * 当前配置
+     */
+    config: PopsSearchSuggestionDetails<T>
+  ) => Promise<PopsSearchSuggestionData<T>[]> | PopsSearchSuggestionData<T>[];
+}

package/src/components/tooltip/config.ts

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,199 @@
+.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));
+  }
+}