@whitesev/pops 2.0.11 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/index.amd.js +336 -103
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +336 -103
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +336 -103
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +336 -103
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +336 -103
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +336 -103
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +16 -12
  14. package/dist/types/src/components/rightClickMenu/index.d.ts +1 -1
  15. package/dist/types/src/components/rightClickMenu/indexType.d.ts +2 -1
  16. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +19 -6
  17. package/dist/types/src/utils/PopsDOMUtils.d.ts +108 -26
  18. package/package.json +2 -1
  19. package/src/Pops.ts +1 -1
  20. package/src/components/rightClickMenu/index.ts +39 -24
  21. package/src/components/rightClickMenu/indexType.ts +3 -1
  22. package/src/types/PopsDOMUtilsEventType.d.ts +19 -6
  23. package/src/utils/PopsDOMUtils.ts +534 -169
package/dist/types/src/Pops.d.ts CHANGED
@@ -141,17 +141,14 @@ declare class Pops {
141
141
  before(element: HTMLElement | Element | string, content: HTMLElement | string): void;
142
142
  after(element: HTMLElement | Element | string, content: HTMLElement | string): void;
143
143
  getKeyFrames(sheet: CSSStyleSheet): {};
144
- on(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (event: Event) => void, option?: boolean | AddEventListenerOptions): void;
145
- on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
146
- on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
147
- on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | undefined | null, callback: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
148
- on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
149
- on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
150
- off(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (event: Event) => void, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
151
- off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback?: ((event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
152
- off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, callback?: ((event: T) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
153
- off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | undefined, callback?: ((event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
154
- off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | undefined, callback?: ((event: T) => void) | undefined, option?: boolean | AddEventListenerOptions, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
144
+ on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
145
+ on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
146
+ on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
147
+ on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
148
+ off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback?: ((this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void) | undefined, option?: EventListenerOptions | boolean, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
149
+ off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback?: ((this: HTMLElement, event: T) => void) | undefined, option?: EventListenerOptions | boolean, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
150
+ off<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | string[] | undefined | null, callback?: ((this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void) | undefined, option?: EventListenerOptions | boolean, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
151
+ off<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | string[] | undefined | null, callback?: ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void) | undefined, option?: EventListenerOptions | boolean, filter?: (value: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
155
152
  offAll(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType?: string): void;
156
153
  offAll(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType?: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType | import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType[]): void;
157
154
  ready<T extends Function>(callback: T): void;
@@ -166,6 +163,13 @@ declare class Pops {
166
163
  keypress(target: HTMLElement | Window | typeof globalThis | string, handler: (event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event["keypress"]) => void, option?: boolean | AddEventListenerOptions): void;
167
164
  preventEvent(event: Event): boolean;
168
165
  preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean;
166
+ selector<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | undefined;
167
+ selector<E extends Element = Element>(selector: string): E | undefined;
168
+ selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];
169
+ selectorAll<E extends Element = Element>(selector: string): E[];
170
+ matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
171
+ closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
172
+ closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
169
173
  };
170
174
  /** pops创建的实例使用的工具类 */
171
175
  InstanceUtils: {
@@ -21023,7 +21027,7 @@ declare class Pops {
21023
21027
  icon: import("./types/icon").PopsIconType | string;
21024
21028
  iconIsLoading: boolean;
21025
21029
  text: string | (() => string);
21026
- callback: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement) => boolean | void | Promise<boolean | void>;
21030
+ callback: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
21027
21031
  item: /*elided*/ any[] | null;
21028
21032
  }[];
21029
21033
  className: string;
package/dist/types/src/components/rightClickMenu/index.d.ts CHANGED
@@ -20641,7 +20641,7 @@ export declare const PopsRightClickMenu: {
20641
20641
  icon: import("../../types/icon").PopsIconType | string;
20642
20642
  iconIsLoading: boolean;
20643
20643
  text: string | (() => string);
20644
- callback: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement) => boolean | void | Promise<boolean | void>;
20644
+ callback: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
20645
20645
  item: /*elided*/ any[] | null;
20646
20646
  }[];
20647
20647
  className: string;
package/dist/types/src/components/rightClickMenu/indexType.d.ts CHANGED
@@ -21,12 +21,13 @@ export interface PopsRightClickMenuDataDetails {
21
21
  * @param clickEvent 点击菜单的click事件
22
22
  * @param contextMenuEvent 触发的contextmenu事件
23
23
  * @param liElement <li>元素
24
+ * @param menuListenerRootNode 右键菜单监听的元素
24
25
  * @returns
25
26
  * + true(默认) 关闭菜单
26
27
  * + false 不关闭菜单
27
28
  *
28
29
  */
29
- callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement) => boolean | void | Promise<boolean | void>;
30
+ callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
30
31
  /**
31
32
  * 子项配置
32
33
  */
package/dist/types/src/types/PopsDOMUtilsEventType.d.ts CHANGED
@@ -205,23 +205,23 @@ export type PopsDOMUtils_EventType = keyof PopsDOMUtils_Event;
205
205
  /**
206
206
  * 元素上的events属性
207
207
  */
208
- export interface PopsDOMUtilsEventListenerOptionsAttribute {
208
+ export declare interface PopsDOMUtilsEventListenerOptionsAttribute {
209
209
  /**
210
- * 自定义的ownCallBack
210
+ * DOMUtils的ownCallBack，元素上的监听事件就是它，移除事件时也需要传入这个函数
211
211
  */
212
- callback: () => void;
212
+ callback: (event: Event) => void;
213
213
  /**
214
214
  * 属性配置
215
215
  */
216
- option: AddEventListenerOptions;
216
+ option: DOMUtilsEventListenerOption;
217
217
  /**
218
218
  * 用户添加的事件
219
219
  */
220
- originCallBack: () => void;
220
+ originCallBack: (event: Event, selectorTarget?: HTMLElement) => void;
221
221
  /**
222
222
  * 子元素选择器
223
223
  */
224
- selector?: string;
224
+ selector?: string[];
225
225
  }
226
226
 
227
227
  export type PopsDOMUtilsElementEventType =
@@ -244,3 +244,16 @@ export type ParseHTMLReturnType<T1, T2> = T1 extends true
244
244
  ? Document
245
245
  : HTMLElement
246
246
  : HTMLElement;
247
+
248
+ /**
249
+ * 事件的额外配置
250
+ */
251
+ export declare type PopsDOMUtilsEventListenerOption =
252
+ AddEventListenerOptions & {
253
+ /**
254
+ * 是否使用 event.composedPath() 来代替 event.target
255
+ *
256
+ * 一般用于设置了selector参数
257
+ */
258
+ isComposedPath?: boolean;
259
+ };
package/dist/types/src/utils/PopsDOMUtils.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import type { ParseHTMLReturnType, PopsDOMUtilsCreateElementAttributesMap } from "../types/PopsDOMUtilsEventType";
2
- import type { PopsDOMUtils_Event, PopsDOMUtils_EventType, PopsDOMUtilsElementEventType, PopsDOMUtilsEventListenerOptionsAttribute } from "../types/PopsDOMUtilsEventType";
1
+ import type { ParseHTMLReturnType, PopsDOMUtils_EventType, PopsDOMUtilsCreateElementAttributesMap, PopsDOMUtilsEventListenerOption, PopsDOMUtilsEventListenerOptionsAttribute, PopsDOMUtils_Event, PopsDOMUtilsElementEventType } from "../types/PopsDOMUtilsEventType";
3
2
  declare class PopsDOMUtilsEvent {
4
3
  /**
5
4
  * 绑定事件
@@ -19,8 +18,7 @@ declare class PopsDOMUtilsEvent {
19
18
  * console.log("事件触发",event)
20
19
  * })
21
20
  */
22
- on(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (event: Event) => void, option?: boolean | AddEventListenerOptions): void;
23
- on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
21
+ on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
24
22
  /**
25
23
  * 绑定事件
26
24
  * @param element 需要绑定的元素|元素数组|window
@@ -39,7 +37,7 @@ declare class PopsDOMUtilsEvent {
39
37
  * console.log("事件触发",event)
40
38
  * })
41
39
  */
42
- on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
40
+ on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
43
41
  /**
44
42
  * 绑定事件
45
43
  * @param element 需要绑定的元素|元素数组|window
@@ -52,20 +50,19 @@ declare class PopsDOMUtilsEvent {
52
50
  * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
53
51
  * @example
54
52
  * // 监听元素a.xx的click、tap、hover事件
55
- * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
56
- * console.log("事件触发",event)
53
+ * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
54
+ * console.log("事件触发", event, selectorTarget)
57
55
  * })
58
- * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
59
- * console.log("事件触发",event)
56
+ * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
57
+ * console.log("事件触发", event, selectorTarget)
60
58
  * })
61
59
  * @example
62
60
  * // 监听全局document下的子元素a.xx的click事件
63
- * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
64
- * console.log("事件触发",event)
61
+ * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
62
+ * console.log("事件触发", event, selectorTarget)
65
63
  * })
66
64
  */
67
- on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | undefined | null, callback: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
68
- on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
65
+ 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;
69
66
  /**
70
67
  * 绑定事件
71
68
  * @param element 需要绑定的元素|元素数组|window
@@ -78,19 +75,19 @@ declare class PopsDOMUtilsEvent {
78
75
  * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
79
76
  * @example
80
77
  * // 监听元素a.xx的click、tap、hover事件
81
- * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
82
- * console.log("事件触发",event)
78
+ * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
79
+ * console.log("事件触发", event, selectorTarget)
83
80
  * })
84
- * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
85
- * console.log("事件触发",event)
81
+ * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
82
+ * console.log("事件触发", event, selectorTarget)
86
83
  * })
87
84
  * @example
88
85
  * // 监听全局document下的子元素a.xx的click事件
89
- * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
90
- * console.log("事件触发",event)
86
+ * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
87
+ * console.log("事件触发", event, selectorTarget)
91
88
  * })
92
89
  */
93
- on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
90
+ 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;
94
91
  /**
95
92
  * 取消绑定事件
96
93
  * @param element 需要取消绑定的元素|元素数组
@@ -100,12 +97,11 @@ declare class PopsDOMUtilsEvent {
100
97
  * + capture 如果在添加事件监听器时指定了useCapture为true，则在移除事件监听器时也必须指定为true
101
98
  * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
102
99
  * @example
103
- * // 取消监听元素a.xx的click事件
100
+ * // 取消监听元素a.xx所有的click事件
104
101
  * DOMUtils.off(document.querySelector("a.xx"),"click")
105
102
  * DOMUtils.off("a.xx","click")
106
103
  */
107
- off(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (event: Event) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
108
- off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback?: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
104
+ off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
109
105
  /**
110
106
  * 取消绑定事件
111
107
  * @param element 需要取消绑定的元素|元素数组
@@ -119,7 +115,7 @@ declare class PopsDOMUtilsEvent {
119
115
  * DOMUtils.off(document.querySelector("a.xx"),"click")
120
116
  * DOMUtils.off("a.xx","click")
121
117
  */
122
- off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, callback?: (event: T) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
118
+ off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (this: HTMLElement, event: T) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
123
119
  /**
124
120
  * 取消绑定事件
125
121
  * @param element 需要取消绑定的元素|元素数组
@@ -134,7 +130,7 @@ declare class PopsDOMUtilsEvent {
134
130
  * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
135
131
  * DOMUtils.off("a.xx",["click","tap","hover"])
136
132
  */
137
- off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | undefined, callback?: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
133
+ off<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?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
138
134
  /**
139
135
  * 取消绑定事件
140
136
  * @param element 需要取消绑定的元素|元素数组
@@ -149,7 +145,7 @@ declare class PopsDOMUtilsEvent {
149
145
  * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
150
146
  * DOMUtils.off("a.xx",["click","tap","hover"])
151
147
  */
152
- off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | undefined, callback?: (event: T) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
148
+ off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | string[] | undefined | null, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
153
149
  /**
154
150
  * 取消绑定所有的事件
155
151
  * @param element 需要取消绑定的元素|元素数组
@@ -331,6 +327,92 @@ declare class PopsDOMUtilsEvent {
331
327
  * Utils.preventEvent(event);
332
328
  */
333
329
  preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean;
330
+ /**
331
+ * 选择器，可使用以下的额外语法
332
+ *
333
+ * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
334
+ * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
335
+ * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
336
+ * @param selector 选择器
337
+ * @example
338
+ * DOMUtils.selector("div:contains('测试')")
339
+ * > div.xxx
340
+ * @example
341
+ * DOMUtils.selector("div:empty")
342
+ * > div.xxx
343
+ * @example
344
+ * DOMUtils.selector("div:regexp('^xxxx$')")
345
+ * > div.xxx
346
+ */
347
+ selector<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | undefined;
348
+ selector<E extends Element = Element>(selector: string): E | undefined;
349
+ /**
350
+ * 选择器，可使用以下的额外语法
351
+ *
352
+ * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
353
+ * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
354
+ * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
355
+ * @param selector 选择器
356
+ * @example
357
+ * DOMUtils.selectorAll("div:contains('测试')")
358
+ * > [div.xxx]
359
+ * @example
360
+ * DOMUtils.selectorAll("div:empty")
361
+ * > [div.xxx]
362
+ * @example
363
+ * DOMUtils.selectorAll("div:regexp('^xxxx$')")
364
+ * > [div.xxx]
365
+ * @example
366
+ * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
367
+ * > [div.xxx]
368
+ */
369
+ selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];
370
+ selectorAll<E extends Element = Element>(selector: string): E[];
371
+ /**
372
+ * 匹配元素，可使用以下的额外语法
373
+ *
374
+ * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
375
+ * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
376
+ * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
377
+ * @param $el 元素
378
+ * @param selector 选择器
379
+ * @example
380
+ * DOMUtils.matches("div:contains('测试')")
381
+ * > true
382
+ * @example
383
+ * DOMUtils.matches("div:empty")
384
+ * > true
385
+ * @example
386
+ * DOMUtils.matches("div:regexp('^xxxx$')")
387
+ * > true
388
+ * @example
389
+ * DOMUtils.matches("div:regexp(/^xxx/ig)")
390
+ * > false
391
+ */
392
+ matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
393
+ /**
394
+ * 根据选择器获取上层元素，可使用以下的额外语法
395
+ *
396
+ * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
397
+ * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
398
+ * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
399
+ * @param $el 元素
400
+ * @param selector 选择器
401
+ * @example
402
+ * DOMUtils.closest("div:contains('测试')")
403
+ * > div.xxx
404
+ * @example
405
+ * DOMUtils.closest("div:empty")
406
+ * > div.xxx
407
+ * @example
408
+ * DOMUtils.closest("div:regexp('^xxxx$')")
409
+ * > div.xxxx
410
+ * @example
411
+ * DOMUtils.closest("div:regexp(/^xxx/ig)")
412
+ * > null
413
+ */
414
+ closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
415
+ closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
334
416
  }
335
417
  declare class PopsDOMUtils extends PopsDOMUtilsEvent {
336
418
  /** 获取 animationend 在各个浏览器的兼容名 */
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@whitesev/pops",
3
- "version": "2.0.11",
3
+ "version": "2.0.13",
4
4
  "description": "弹窗库",
5
+ "$schema": "https://json.schemastore.org/package.json",
5
6
  "main": "dist/index.cjs.js",
6
7
  "module": "dist/index.esm.js",
7
8
  "types": "dist/types/index.d.ts",
package/src/Pops.ts CHANGED
@@ -36,7 +36,7 @@ class Pops {
36
36
  /** 配置 */
37
37
  config = {
38
38
  /** 版本号 */
39
- version: "2025.6.4",
39
+ version: "2025.6.6",
40
40
  cssText: PopsCSS,
41
41
  /** icon图标的svg代码 */
42
42
  iconSVG: PopsIcon.$data,
package/src/components/rightClickMenu/index.ts CHANGED
@@ -149,8 +149,9 @@ export const PopsRightClickMenu = {
149
149
  /**
150
150
  * contextmenu事件
151
151
  * @param event
152
+ * @param selectorTarget
152
153
  */
153
- contextMenuEvent(event: PointerEvent) {
154
+ contextMenuEvent(event: PointerEvent, selectorTarget: HTMLElement) {
154
155
  if (config.preventDefault) {
155
156
  popsDOMUtils.preventEvent(event);
156
157
  }
@@ -158,15 +159,19 @@ export const PopsRightClickMenu = {
158
159
  if (PopsContextMenu.rootElement) {
159
160
  PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
160
161
  }
161
- let rootElement = PopsContextMenu.showMenu(event, config.data);
162
+ let rootElement = PopsContextMenu.showMenu(
163
+ event,
164
+ config.data,
165
+ selectorTarget
166
+ );
162
167
  PopsContextMenu.rootElement = rootElement;
163
168
  if (config.only) {
164
169
  PopsHandler.handlePush(PopsType, {
165
170
  $shadowRoot: $shadowRoot,
166
171
  $shadowContainer: $shadowContainer,
167
172
  guid: guid,
168
- animElement: rootElement as HTMLDivElement,
169
- popsElement: rootElement as HTMLDivElement,
173
+ animElement: rootElement,
174
+ popsElement: rootElement,
170
175
  beforeRemoveCallBack(layerCommonConfig) {
171
176
  PopsContextMenu.closeAllMenu(layerCommonConfig.popsElement);
172
177
  },
@@ -217,7 +222,6 @@ export const PopsRightClickMenu = {
217
222
  popsDOMUtils.off(
218
223
  element,
219
224
  popsDOMUtils.getTransitionEndNameList(),
220
- void 0,
221
225
  transitionEndEvent,
222
226
  {
223
227
  capture: true,
@@ -230,7 +234,6 @@ export const PopsRightClickMenu = {
230
234
  popsDOMUtils.on(
231
235
  element,
232
236
  popsDOMUtils.getTransitionEndNameList(),
233
- void 0,
234
237
  transitionEndEvent,
235
238
  {
236
239
  capture: true,
@@ -327,10 +330,12 @@ export const PopsRightClickMenu = {
327
330
  * 显示菜单
328
331
  * @param menuEvent 触发的事件
329
332
  * @param _config_
333
+ * @param menuListenerRootNode 右键菜单监听的元素
330
334
  */
331
335
  showMenu(
332
336
  menuEvent: PointerEvent,
333
- _config_: PopsRightClickMenuDataDetails[]
337
+ _config_: PopsRightClickMenuDataDetails[],
338
+ menuListenerRootNode: HTMLElement
334
339
  ) {
335
340
  let menuElement = this.getMenuContainerElement(false);
336
341
  Reflect.set(menuElement, "__menuData__", {
@@ -338,9 +343,10 @@ export const PopsRightClickMenu = {
338
343
  });
339
344
  PopsContextMenu.addMenuLiELement(
340
345
  menuEvent,
341
- menuElement as HTMLDivElement,
342
- menuElement as HTMLDivElement,
343
- _config_
346
+ menuElement,
347
+ menuElement,
348
+ _config_,
349
+ menuListenerRootNode
344
350
  );
345
351
  /* 先隐藏 */
346
352
  popsDOMUtils.css(menuElement, {
@@ -377,6 +383,7 @@ export const PopsRightClickMenu = {
377
383
  * @param _config_
378
384
  * @param rootElement 根菜单元素
379
385
  * @param targetLiElement 父li项元素
386
+ * @param menuListenerRootNode 右键菜单监听的元素
380
387
  */
381
388
  showClildMenu(
382
389
  menuEvent: PointerEvent,
@@ -386,7 +393,8 @@ export const PopsRightClickMenu = {
386
393
  },
387
394
  _config_: PopsRightClickMenuDataDetails[],
388
395
  rootElement: HTMLDivElement,
389
- targetLiElement: HTMLLIElement
396
+ targetLiElement: HTMLLIElement,
397
+ menuListenerRootNode: HTMLElement
390
398
  ) {
391
399
  let menuElement = this.getMenuContainerElement(true);
392
400
  Reflect.set(menuElement, "__menuData__", {
@@ -397,10 +405,11 @@ export const PopsRightClickMenu = {
397
405
  let rootElementMenuData = Reflect.get(rootElement, "__menuData__");
398
406
  rootElementMenuData.child.push(menuElement);
399
407
  PopsContextMenu.addMenuLiELement(
400
- menuEvent as PointerEvent,
401
- rootElement as HTMLDivElement,
402
- menuElement as HTMLDivElement,
403
- _config_
408
+ menuEvent,
409
+ rootElement,
410
+ menuElement,
411
+ _config_,
412
+ menuListenerRootNode
404
413
  );
405
414
  /* 先隐藏 */
406
415
  popsDOMUtils.css(menuElement, {
@@ -430,12 +439,14 @@ export const PopsRightClickMenu = {
430
439
  * @param rootElement 根元素
431
440
  * @param menuElement 菜单元素
432
441
  * @param _config_ 配置
442
+ * @param menuListenerRootNode 右键菜单监听的元素
433
443
  */
434
444
  addMenuLiELement(
435
445
  menuEvent: PointerEvent,
436
446
  rootElement: HTMLDivElement,
437
447
  menuElement: HTMLDivElement,
438
- _config_: PopsRightClickMenuDataDetails[]
448
+ _config_: PopsRightClickMenuDataDetails[],
449
+ menuListenerRootNode: HTMLElement
439
450
  ) {
440
451
  let menuEventTarget = menuEvent.target;
441
452
  let menuULElement = menuElement.querySelector<HTMLUListElement>("ul")!;
@@ -511,8 +522,9 @@ export const PopsRightClickMenu = {
511
522
  clientY: rect.top,
512
523
  },
513
524
  item.item,
514
- rootElement as HTMLDivElement,
515
- menuLiElement
525
+ rootElement,
526
+ menuLiElement,
527
+ menuListenerRootNode
516
528
  );
517
529
  (menuLiElement as any).__menuData__ = {
518
530
  child: childMenu,
@@ -527,15 +539,18 @@ export const PopsRightClickMenu = {
527
539
  clickEvent: MouseEvent | PointerEvent
528
540
  ) {
529
541
  if (typeof item.callback === "function") {
530
- OriginPrototype.Object.defineProperty(menuEvent, "target", {
531
- get() {
532
- return menuEventTarget;
533
- },
534
- });
542
+ try {
543
+ OriginPrototype.Object.defineProperty(menuEvent, "target", {
544
+ get() {
545
+ return menuEventTarget;
546
+ },
547
+ });
548
+ } catch (error) {}
535
549
  let callbackResult = await item.callback(
536
550
  clickEvent as PointerEvent,
537
551
  menuEvent,
538
- menuLiElement
552
+ menuLiElement,
553
+ menuListenerRootNode
539
554
  );
540
555
  if (
541
556
  typeof callbackResult === "boolean" &&
package/src/components/rightClickMenu/indexType.ts CHANGED
@@ -22,6 +22,7 @@ export interface PopsRightClickMenuDataDetails {
22
22
  * @param clickEvent 点击菜单的click事件
23
23
  * @param contextMenuEvent 触发的contextmenu事件
24
24
  * @param liElement <li>元素
25
+ * @param menuListenerRootNode 右键菜单监听的元素
25
26
  * @returns
26
27
  * + true(默认) 关闭菜单
27
28
  * + false 不关闭菜单
@@ -30,7 +31,8 @@ export interface PopsRightClickMenuDataDetails {
30
31
  callback?: (
31
32
  clickEvent: PointerEvent,
32
33
  contextMenuEvent: PointerEvent,
33
- liElement: HTMLLIElement
34
+ liElement: HTMLLIElement,
35
+ menuListenerRootNode: HTMLElement
34
36
  ) => boolean | void | Promise<boolean | void>;
35
37
  /**
36
38
  * 子项配置
package/src/types/PopsDOMUtilsEventType.d.ts CHANGED
@@ -205,23 +205,23 @@ export type PopsDOMUtils_EventType = keyof PopsDOMUtils_Event;
205
205
  /**
206
206
  * 元素上的events属性
207
207
  */
208
- export interface PopsDOMUtilsEventListenerOptionsAttribute {
208
+ export declare interface PopsDOMUtilsEventListenerOptionsAttribute {
209
209
  /**
210
- * 自定义的ownCallBack
210
+ * DOMUtils的ownCallBack，元素上的监听事件就是它，移除事件时也需要传入这个函数
211
211
  */
212
- callback: () => void;
212
+ callback: (event: Event) => void;
213
213
  /**
214
214
  * 属性配置
215
215
  */
216
- option: AddEventListenerOptions;
216
+ option: DOMUtilsEventListenerOption;
217
217
  /**
218
218
  * 用户添加的事件
219
219
  */
220
- originCallBack: () => void;
220
+ originCallBack: (event: Event, selectorTarget?: HTMLElement) => void;
221
221
  /**
222
222
  * 子元素选择器
223
223
  */
224
- selector?: string;
224
+ selector?: string[];
225
225
  }
226
226
 
227
227
  export type PopsDOMUtilsElementEventType =
@@ -244,3 +244,16 @@ export type ParseHTMLReturnType<T1, T2> = T1 extends true
244
244
  ? Document
245
245
  : HTMLElement
246
246
  : HTMLElement;
247
+
248
+ /**
249
+ * 事件的额外配置
250
+ */
251
+ export declare type PopsDOMUtilsEventListenerOption =
252
+ AddEventListenerOptions & {
253
+ /**
254
+ * 是否使用 event.composedPath() 来代替 event.target
255
+ *
256
+ * 一般用于设置了selector参数
257
+ */
258
+ isComposedPath?: boolean;
259
+ };