@whitesev/pops 1.0.0 → 1.0.1

package/dist/types/src/components/searchSuggestion/indexType.d.ts

@@ -0,0 +1,238 @@
+/**
+ * config.data
+ */
+export interface PopsSearchSuggestionData<T = any> {
+    /**
+     * 存储的值
+     */
+    value: T;
+    /**
+     * li元素的html
+     */
+    text: string;
+}
+/**
+ * 搜索建议悬浮窗
+ * pops.searchSuggestion
+ */
+export interface PopsSearchSuggestionDetails<T = any> {
+    /**
+     * 当前的环境，可以是document，可以是shadowroot，默认是document
+     */
+    selfDocument?: Document;
+    /**
+     * 目标元素，一般是跟随它的位置变化，监听它的focus/click
+     */
+    target: HTMLElement;
+    /**
+     * 目标input元素，监听它的focus/click/input事件
+     */
+    inputTarget?: HTMLInputElement;
+    /**
+     * 数据
+     */
+    data: PopsSearchSuggestionData<T>[];
+    /**
+     * 右边的删除按钮图标
+     */
+    deleteIcon?: {
+        /**
+         * 是否启用，默认true
+         */
+        enable?: boolean;
+        /**
+         * 点击回调
+         */
+        callback?: (event: MouseEvent | PointerEvent, liElement: HTMLLIElement, data: PopsSearchSuggestionData<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: PopsSearchSuggestionData<T>) => string;
+    /**
+     * 当config.target触发input时自动调用该函数来获取数据
+     * @param value 当前输入框的值
+     */
+    getData: (value: string) => Promise<any[]>;
+    /**
+     * 每一项的点击回调
+     * @param event 触发的事件
+     * @param liElement 每一项的元素
+     * @param data config.data的数据
+     */
+    itemClickCallBack?: (event: MouseEvent | PointerEvent, liElement: HTMLLIElement, data: PopsSearchSuggestionData<T>) => void;
+    /**
+     * 键盘的上下键选择的回调
+     * @param event 触发的事件
+     * @param liElement 每一项的元素
+     * @param data config.data的数据
+     */
+    selectCallBack?: (event: MouseEvent, liElement: HTMLLIElement, data: PopsSearchSuggestionData<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: PopsSearchSuggestionData<T>, index: number) => HTMLElement;
+    /**
+     * 获取data-value值
+     */
+    getItemDataValue: (data: PopsSearchSuggestionData<T>) => PopsSearchSuggestionData<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: PopsSearchSuggestionData<T>) => void;
+    /**
+     * 清空当前的搜索结果并显示无结果
+     */
+    clear: () => void;
+    /**
+     * 隐藏搜索建议框
+     */
+    hide: () => void;
+    /**
+     * 显示搜索建议框
+     */
+    show: () => void;
+}

package/dist/types/src/components/tooltip/index.d.ts

@@ -1,2 +1,4 @@
+import type { PopsToolTipDetails } from "./indexType";
 export declare class PopsTooltip {
+    constructor(details: PopsToolTipDetails);
 }

package/dist/types/src/components/tooltip/indexType.d.ts

@@ -0,0 +1,91 @@
+/** tooltip的出现位置 */
+export type PopsTooltipPosition = "top" | "right" | "bottom" | "left";
+/**
+ * pops.tooltip
+ */
+export interface PopsToolTipDetails {
+    /**
+     * 目标元素
+     */
+    target: HTMLElement;
+    /**
+     * 显示的文字
+     */
+    content: string | (() => string);
+    /**
+     * 位置，默认top
+     */
+    position?: PopsTooltipPosition;
+    /**
+     * 自定义className，默认为空
+     * + github-tooltip
+     */
+    className?: string;
+    /**
+     * 是否总是显示，默认为false
+     * + true 设置的triggerShowEventName、triggerCloseEventName将无效
+     *        返回提供show和close函数，取消on和off
+     * + false 返回提供on和off，取消close函数
+     */
+    alwaysShow?: boolean;
+    /**
+     * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
+     */
+    triggerShowEventName?: string;
+    /**
+     * 触发关闭事件的名称，默认mouseleave touchend，如果是多个事件，按空格分割
+     */
+    triggerCloseEventName?: string;
+    /**
+     * z-index，默认10000
+     */
+    zIndex?: number;
+    /**
+     * 是否唯一，默认false
+     */
+    only?: boolean;
+    /**
+     * 监听的事件配置
+     */
+    eventOption?: AddEventListenerOptions;
+    /**
+     * 触发显示前的回调
+     * 返回值为false可阻止显示
+     */
+    showBeforeCallBack?: () => boolean | void;
+    /**
+     * 触发显示后的回调
+     */
+    showAfterCallBack?: (toolTipElement: HTMLElement) => void;
+    /**
+     * 触发关闭前的回调
+     * 返回值为false可阻止关闭
+     */
+    closeBeforeCallBack?: (toolTipElement: HTMLElement) => boolean | void;
+    /**
+     * 触发关闭后的回调
+     */
+    closeAfterCallBack?: (toolTipElement: HTMLElement) => void;
+    /**
+     * 箭头与目标的的距离，默认12.5(px)
+     */
+    arrowDistance?: number;
+    /**
+     * 其它的距离，默认0(px)
+     * + 当position为left或者right，这个距离是上、下距离
+     * + 当position为top或者bottom，这个距离是左、右距离
+     */
+    otherDistance?: number;
+    /**
+     * （可选）自定义style
+     */
+    style?: string;
+    /**
+     * 在元素添加到页面前的事件
+     *
+     * 当tooltip添加到ShadowRoot内时也会触发
+     * @param $shadowRoot 根元素
+     * @param $shadowContainer 容器
+     */
+    beforeAppendToPageCallBack?: ($shadowRoot: ShadowRoot, $shadowContainer: HTMLDivElement) => void;
+}

package/dist/types/src/handler/PopsHandler.d.ts

@@ -1,11 +1,13 @@
-import type { PopsAlertDetails } from "../components/alert/types";
-import type { PopsConfirmDetails } from "../components/confirm/types";
-import type { PopsDrawerDetails } from "../components/drawer/types";
-import type { PopsFolderDetails } from "../components/folder/types";
-import type { PopsIframeDetails } from "../components/iframe/types";
-import type { PopsLoadingDetails } from "../components/loading/types";
-import type { PopsPanelDetails } from "../components/panel/types";
-import type { PopsPromptDetails } from "../components/prompt/types";
+import type { PopsAlertDetails } from "../components/alert/indexType";
+import type { PopsConfirmDetails } from "../components/confirm/indexType";
+import type { PopsDrawerDetails } from "../components/drawer/indexType";
+import type { PopsFolderDetails } from "../components/folder/indexType";
+import type { PopsIframeDetails } from "../components/iframe/indexType";
+import type { PopsLoadingDetails } from "../components/loading/indexType";
+import type { PopsPanelDetails } from "../components/panel/indexType";
+import type { PopsPromptDetails } from "../components/prompt/indexType";
+import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
+import { PopsLayerCommonConfig } from "../types/layer";
 import type { PopsLayerMode, PopsMode, PopsType } from "../types/main";
 export declare const PopsHandler: {
     /**
@@ -20,7 +22,7 @@ export declare const PopsHandler: {
      * @param $shadowRoot 所在的shadowRoot
      * @param cssText 添加进ShadowRoot的CSS
      */
-    handleInit($shadowRoot: ShadowRoot, cssText: string | string[]): void;
+    handleInit($shadowRoot?: ShadowRoot, cssText?: string | string[]): void;
     /**
      * 处理遮罩层
      * @param details 传递的配置
@@ -28,7 +30,7 @@ export declare const PopsHandler: {
     handleMask(details?: {
         type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
         guid: string;
-        config: Required<PopsAlertDetails>;
+        config: Required<PopsAlertDetails> | Required<PopsLoadingDetails> | Required<PopsIframeDetails> | Required<PopsDrawerDetails> | Required<PopsPanelDetails> | Required<PopsFolderDetails>;
         animElement: HTMLElement;
         maskHTML: string;
     }): {
@@ -43,103 +45,103 @@ export declare const PopsHandler: {
         /**
          * 主元素
          */
-        popsElement: HTMLDivElement | null;
+        popsElement: HTMLDivElement;
         /**
          * 确认按钮
          */
-        btnOkElement: HTMLDivElement | null;
+        btnOkElement: HTMLDivElement;
         /**
          * 取消按钮
          */
-        btnCancelElement: HTMLDivElement | null;
+        btnCancelElement: HTMLDivElement;
         /**
          * 其它按钮
          */
-        btnOtherElement: HTMLDivElement | null;
+        btnOtherElement: HTMLDivElement;
         /**
          * 标题元素
          */
-        titleElement: HTMLDivElement | null;
+        titleElement: HTMLDivElement;
         /**
          * 输入框元素
          */
-        inputElement: HTMLInputElement | HTMLTextAreaElement | null;
+        inputElement: HTMLInputElement | HTMLTextAreaElement;
         /**
          * 顶部按钮控制层元素
          */
-        headerControlsElement: HTMLDivElement | null;
+        headerControlsElement: HTMLDivElement;
         /**
          * iframe元素
          */
-        iframeElement: HTMLIFrameElement | null;
+        iframeElement: HTMLIFrameElement;
         /**
          * 加载中元素
          */
-        loadingElement: HTMLDivElement | null;
+        loadingElement: HTMLDivElement;
         /**
          * 内容元素
          */
-        contentElement: HTMLDivElement | null;
+        contentElement: HTMLDivElement;
         /**
          * 内容侧边栏容器元素
          */
-        contentAsideElement: HTMLDivElement | null;
+        contentAsideElement: HTMLDivElement;
         /**
          * 内容主要区域容器元素
          */
-        contentSectionContainerElement: HTMLDivElement | null;
+        contentSectionContainerElement: HTMLDivElement;
         /**
          * 内容加载中元素
          */
-        contentLoadingElement: HTMLDivElement | null;
+        contentLoadingElement: HTMLDivElement;
         /**
          * 顶部缩小按钮
          */
-        headerMinBtnElement: HTMLDivElement | null;
+        headerMinBtnElement: HTMLDivElement;
         /**
          * 顶部放大按钮
          */
-        headerMaxBtnElement: HTMLDivElement | null;
+        headerMaxBtnElement: HTMLDivElement;
         /**
          * 顶部恢复原样按钮
          */
-        headerMiseBtnElement: HTMLDivElement | null;
+        headerMiseBtnElement: HTMLDivElement;
         /**
          * 顶部关闭按钮
          */
-        headerCloseBtnElement: HTMLDivElement | null;
+        headerCloseBtnElement: HTMLDivElement;
         /**
          * 文件夹列表元素
          */
-        folderListElement: HTMLDivElement | null;
+        folderListElement: HTMLDivElement;
         /**
          * 文件夹列表顶部元素
          */
-        folderListHeaderElement: HTMLDivElement | null;
+        folderListHeaderElement: HTMLDivElement;
         /**
          * 文件夹列表行元素
          */
-        folderListHeaderRowElement: HTMLTableRowElement | null;
+        folderListHeaderRowElement: HTMLTableRowElement;
         /**
          * 文件夹列表tbody元素
          */
-        folderListBodyElement: HTMLTableElement | null;
+        folderListBodyElement: HTMLTableElement;
         /**
          * 文件夹列表primary元素
          */
-        folderFileListBreadcrumbPrimaryElement: HTMLDivElement | null;
+        folderFileListBreadcrumbPrimaryElement: HTMLDivElement;
         /**
          * 文件夹排序按钮-文件名
          */
-        folderListSortFileNameElement: HTMLDivElement | null;
+        folderListSortFileNameElement: HTMLDivElement;
         /**
          * 文件夹排序按钮-修改时间
          */
-        folderListSortLatestTimeElement: HTMLDivElement | null;
+        folderListSortLatestTimeElement: HTMLDivElement;
         /**
          * 文件夹排序按钮-文件大小
          */
-        folderListSortFileSizeElement: HTMLDivElement | null;
+        folderListSortFileSizeElement: HTMLDivElement;
     };
     /**
      * 获取事件配置
@@ -153,6 +155,16 @@ export declare const PopsHandler: {
      * @param config 当前配置
      */
     handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
+    /**
+     * 获取loading的事件配置
+     * @param guid
+     * @param mode 当前弹窗类型
+     * @param animElement 动画层
+     * @param popsElement 主元素
+     * @param maskElement 遮罩层
+     * @param config 当前配置
+     */
+    handleLoadingEventDetails(guid: string, mode: "loading", animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): Omit<PopsEventDetails, "$shadowContainer" | "$shadowRoot">;
     /**
      * 处理返回的配置，针对popsHandler.handleEventDetails
      */
@@ -185,16 +197,16 @@ export declare const PopsHandler: {
     };
     /**
      * 处理prompt的点击事件
+     * @param type 触发事件类型
      * @param inputElement 输入框
      * @param  $btn 按钮元素
-     * @param type 触发事件类型
-     * @param event 事件配置，由popsHandler.handleEventDetails创建的
+     * @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
      * @param callback 点击回调
      */
-    handlePromptClickEvent(inputElement: HTMLInputElement, $btn: HTMLElement, type: "ok" | "close", event: MouseEvent | PointerEvent, callback: (event: (MouseEvent | PointerEvent) & {
+    handlePromptClickEvent(type: "ok" | "close" | "cancel" | "other", inputElement: HTMLInputElement | HTMLTextAreaElement, $btn: HTMLElement, eventDetails: PopsEventDetails, callback: (details: PopsEventDetails & {
         type: any;
         text: string;
-    }) => void): void;
+    }, event: MouseEvent | PointerEvent) => void): void;
     /**
      * 处理config.only
      * @param type 当前弹窗类型