@whitesev/pops 3.0.1 → 3.1.0

package/dist/types/src/components/panel/types/components-select.d.ts

@@ -2,7 +2,37 @@ import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsPanelContainerConfig } from "./components-container";
 import type { PopsPanelViewConfig } from ".";
 import type { PopsAlertConfig } from "../../alert/types";
-export interface PopsPanelSelectDataOption<T> {
+export type PopsPanelSelectMode = "native" | "dialog" | "horizontal";
+/**
+ * 分组配置
+ *
+ * 用在mode="dialog"里
+ */
+export type PopsPanelSelectDialogGroupOption<T> = {
+    /**
+     * 是否是分组
+     * @default false
+     *
+     * + true 这时候text的值是显示的分组名，value是可以忽略的
+     */
+    isGroup?: boolean;
+    /**
+     * 分组内部选择是否是单选
+     * @default false
+     */
+    isSingleSelect?: boolean;
+    /**
+     * 分组数据列表
+     *
+     * 该数据仅在mode === "dialog"下生效
+     * @default []
+     */
+    groupDataOptions?: IFunction<Omit<PopsPanelSelectDataOption<T>, keyof PopsPanelSelectDialogGroupOption<T>>[]>;
+};
+/**
+ * 选择项的配置数据
+ */
+export type PopsPanelSelectDataOption<T> = {
     /**
      * 真正的值
      */
@@ -59,7 +89,7 @@ export interface PopsPanelSelectDataOption<T> {
         valid: boolean;
         message?: string;
     };
-}
+};
 /**
  * pops.panel的 select
  */
@@ -106,6 +136,8 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
      * 点击select元素触发该回调
      * @param event 点击事件
      * @param selectElement 当前的select元素
+     * @returns
+     * + false 阻止更新状态
      */
     clickCallBack?(event: PointerEvent | MouseEvent, 
     /** 当前已选中的信息 */
@@ -115,10 +147,15 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
      */
     data: IFunction<PopsPanelSelectDataOption<T>[]>;
     /**
-     * 是否使用弹窗代替
-     * @default false
+     * 显示模式
+     * @default "native"
+     */
+    mode?: PopsPanelSelectMode;
+    /**
+     * 宽度
+     * @default "200px"
      */
-    useDialog?: boolean;
+    width?: number | string;
     /**
      * 弹出的下拉列表弹窗的配置
      */

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

@@ -190,8 +190,8 @@ export declare const PopsTooltip: {
             isFixed: boolean;
             alwaysShow: boolean;
             delayCloseTime: number;
-            triggerShowEventName: string;
-            triggerCloseEventName: string;
+            onShowEventName: string;
+            onCloseEventName: string;
             eventOption: {
                 once: boolean;
                 passive: boolean;

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

@@ -42,7 +42,7 @@ export interface PopsToolTipConfig extends Pick<PopsGeneralConfig, "useShadowRoo
     isFixed?: boolean;
     /**
      * 是否总是显示，默认为false
-     * + true 设置的triggerShowEventName、triggerCloseEventName将无效
+     * + true 设置的onShowEventName、onCloseEventName将无效
      *        返回提供show和close函数，取消on和off
      * + false 事件触发才显示
      */
@@ -56,12 +56,12 @@ export interface PopsToolTipConfig extends Pick<PopsGeneralConfig, "useShadowRoo
      * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
      * @default  "mouseenter touchstart"
      */
-    triggerShowEventName?: string;
+    onShowEventName?: string;
     /**
      * 触发关闭事件的名称，默认mouseleave touchend，如果是多个事件，按空格分割
      * @default  "mouseleave touchend"
      */
-    triggerCloseEventName?: string;
+    onCloseEventName?: string;
     /**
      * 监听的事件配置
      */

package/dist/types/src/types/PopsDOMUtilsEventType.d.ts

@@ -237,6 +237,28 @@ export type PopsDOMUtilsElementEventType =
   | ChildNode
   | Node;
 
+/**
+ * 通过.on执行后的返回值
+ */
+export declare interface PopsDOMUtilsAddEventListenerResult {
+  /**
+   * 取消绑定的监听事件
+   * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
+   */
+  off(
+    filter?: (
+      value: PopsDOMUtilsEventListenerOptionsAttribute,
+      index: number,
+      array: PopsDOMUtilsEventListenerOptionsAttribute[]
+    ) => boolean
+  ): void;
+  /**
+   * 主动触发事件
+   * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+   * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+   */
+  emit(details?: object, useDispatchToEmit?: boolean): void;
+}
 export type ParseHTMLReturnType<T1, T2> = T1 extends true ? (T2 extends true ? Document : HTMLElement) : HTMLElement;
 
 /**

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -1,4 +1,4 @@
-import type { ParseHTMLReturnType, PopsDOMUtils_EventType, PopsDOMUtilsCreateElementAttributesMap, PopsDOMUtilsEventListenerOption, PopsDOMUtilsEventListenerOptionsAttribute, PopsDOMUtils_Event, PopsDOMUtilsElementEventType } from "../types/PopsDOMUtilsEventType";
+import type { ParseHTMLReturnType, PopsDOMUtils_EventType, PopsDOMUtilsCreateElementAttributesMap, PopsDOMUtilsEventListenerOption, PopsDOMUtilsEventListenerOptionsAttribute, PopsDOMUtils_Event, PopsDOMUtilsElementEventType, PopsDOMUtilsAddEventListenerResult } from "../types/PopsDOMUtilsEventType";
 declare class PopsDOMUtilsEvent {
     /**
      * 绑定事件
@@ -18,7 +18,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
+    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: PopsDOMUtilsEventListenerOption | boolean): PopsDOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -37,7 +37,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: PopsDOMUtilsEventListenerOption | boolean): PopsDOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -62,7 +62,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
+    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): PopsDOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -87,7 +87,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): PopsDOMUtilsAddEventListenerResult;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -162,47 +162,47 @@ declare class PopsDOMUtilsEvent {
      * 等待文档加载完成后执行指定的函数
      * @param callback 需要执行的函数
      * @example
-     * DOMUtils.ready(function(){
+     * DOMUtils.onReady(function(){
      *   console.log("文档加载完毕")
      * })
      */
-    ready<T extends (...args: any[]) => any>(callback: T): void;
+    onReady<T extends (...args: any[]) => any>(callback: T): void;
     /**
      * 主动触发事件
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent 是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click")
-     * DOMUtils.trigger("a.xx","click")
+     * DOMUtils.emit(document.querySelector("a.xx"),"click")
+     * DOMUtils.emit("a.xx","click")
      * // 触发元素a.xx的click、tap、hover事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
-     * DOMUtils.trigger("a.xx",["click","tap","hover"])
+     * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
+     * DOMUtils.emit("a.xx",["click","tap","hover"])
      */
-    trigger(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: string | string[], details?: object, useDispatchToTriggerEvent?: boolean): void;
+    emit(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: string | string[], details?: object, useDispatchToEmitEvent?: boolean): void;
     /**
      * 主动触发事件
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent 是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click")
-     * DOMUtils.trigger("a.xx","click")
+     * DOMUtils.emit(document.querySelector("a.xx"),"click")
+     * DOMUtils.emit("a.xx","click")
      * // 触发元素a.xx的click、tap、hover事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
-     * DOMUtils.trigger("a.xx",["click","tap","hover"])
+     * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
+     * DOMUtils.emit("a.xx",["click","tap","hover"])
      */
-    trigger(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: PopsDOMUtils_EventType | PopsDOMUtils_EventType[], details?: object, useDispatchToTriggerEvent?: boolean): void;
+    emit(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: PopsDOMUtils_EventType | PopsDOMUtils_EventType[], details?: object, useDispatchToEmitEvent?: boolean): void;
     /**
      * 绑定或触发元素的click事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
      * DOMUtils.click(document.querySelector("a.xx"))
@@ -211,13 +211,13 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发click事件成功")
      * })
      * */
-    click(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToTriggerEvent?: boolean): void;
+    click(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["click"]) => void, details?: any, useDispatchToEmitEvent?: boolean): void;
     /**
      * 绑定或触发元素的blur事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的blur事件
      * DOMUtils.blur(document.querySelector("a.xx"))
@@ -226,13 +226,13 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发blur事件成功")
      * })
      * */
-    blur(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    blur(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["blur"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
     /**
      * 绑定或触发元素的focus事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的focus事件
      * DOMUtils.focus(document.querySelector("a.xx"))
@@ -241,7 +241,7 @@ declare class PopsDOMUtilsEvent {
      *  console.log("触发focus事件成功")
      * })
      * */
-    focus(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    focus(element: HTMLElement | string | Window, handler?: (event: PopsDOMUtils_Event["focus"]) => void, details?: object, useDispatchToEmitEvent?: boolean): void;
     /**
      * 当鼠标移入或移出元素时触发事件
      * @param element 当前元素
@@ -256,7 +256,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("移入/移除");
      * })
      */
-    hover(element: HTMLElement | string, handler: (event: PopsDOMUtils_Event["hover"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onHover(element: HTMLElement | string, handler: (event: PopsDOMUtils_Event["hover"]) => void, option?: boolean | AddEventListenerOptions): void;
     /**
      * 当按键松开时触发事件
      * keydown - > keypress - > keyup
@@ -272,7 +272,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键松开");
      * })
      */
-    keyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeyup(target: HTMLElement | string | Window | typeof globalThis, handler: (event: PopsDOMUtils_Event["keyup"]) => void, option?: boolean | AddEventListenerOptions): void;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -288,7 +288,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeydown(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keydown"]) => void, option?: boolean | AddEventListenerOptions): void;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -304,7 +304,7 @@ declare class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void;
+    onKeypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void;
     /**
      * 阻止事件传递
      * @param element 要进行处理的元素

package/dist/types/src/utils/PopsInstanceUtils.d.ts

@@ -89,7 +89,7 @@ export declare const PopsInstanceUtils: {
     drag($move: HTMLElement, options: {
         dragElement: HTMLElement;
         limit: boolean;
-        triggerClick?: boolean;
+        emitClick?: boolean;
         extraDistance: number;
         container?: Window | typeof globalThis | HTMLElement;
         moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、loading、iframe、rightClickMenu等组件",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
@@ -51,18 +51,18 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.3.0",
     "browserslist": "^4.28.0",
-    "caniuse-lite": "^1.0.30001755",
+    "caniuse-lite": "^1.0.30001757",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.5.0",
-    "rollup": "^4.53.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.1.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.47.0"
+    "typescript-eslint": "^8.48.0"
   },
   "scripts": {
     "lint": "eslint .",

package/src/components/folder/index.ts

@@ -345,15 +345,15 @@ export const PopsFolder = {
         );
         // 设置默认触发的arrow
         if (config.sort.name === "fileName") {
-          popsDOMUtils.trigger(folderListSortFileNameElement, "click", {
+          popsDOMUtils.emit(folderListSortFileNameElement, "click", {
             notChangeSortRule: true,
           });
         } else if (config.sort.name === "latestTime") {
-          popsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
+          popsDOMUtils.emit(folderListSortLatestTimeElement, "click", {
             notChangeSortRule: true,
           });
         } else if (config.sort.name === "fileSize") {
-          popsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
+          popsDOMUtils.emit(folderListSortFileSizeElement, "click", {
             notChangeSortRule: true,
           });
         }