@whitesev/pops 1.5.9 → 1.6.1

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 (62) hide show
  1. package/dist/index.amd.js +3666 -3088
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +3666 -3088
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +3666 -3088
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +3666 -3088
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +3666 -3088
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +3666 -3088
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +56 -7
  14. package/dist/types/src/components/alert/config.d.ts +2 -0
  15. package/dist/types/src/components/confirm/config.d.ts +2 -0
  16. package/dist/types/src/components/drawer/config.d.ts +2 -0
  17. package/dist/types/src/components/folder/config.d.ts +2 -0
  18. package/dist/types/src/components/iframe/config.d.ts +2 -0
  19. package/dist/types/src/components/loading/config.d.ts +2 -0
  20. package/dist/types/src/components/panel/PanelHandleContentDetails.d.ts +149 -0
  21. package/dist/types/src/components/panel/config.d.ts +2 -0
  22. package/dist/types/src/components/panel/selectMultipleType.d.ts +49 -24
  23. package/dist/types/src/components/prompt/config.d.ts +2 -0
  24. package/dist/types/src/components/rightClickMenu/config.d.ts +2 -0
  25. package/dist/types/src/components/searchSuggestion/config.d.ts +2 -0
  26. package/dist/types/src/components/searchSuggestion/indexType.d.ts +56 -32
  27. package/dist/types/src/components/tooltip/config.d.ts +2 -0
  28. package/dist/types/src/utils/PopsDOMUtils.d.ts +42 -13
  29. package/dist/types/src/utils/PopsInstanceUtils.d.ts +22 -0
  30. package/package.json +4 -1
  31. package/src/Pops.ts +8 -2
  32. package/src/components/alert/config.ts +59 -0
  33. package/src/components/alert/index.ts +2 -57
  34. package/src/components/confirm/config.ts +94 -0
  35. package/src/components/confirm/index.ts +4 -94
  36. package/src/components/drawer/config.ts +90 -0
  37. package/src/components/drawer/index.ts +2 -88
  38. package/src/components/folder/config.ts +130 -0
  39. package/src/components/folder/index.ts +3 -129
  40. package/src/components/iframe/config.ts +58 -0
  41. package/src/components/iframe/index.ts +2 -56
  42. package/src/components/loading/config.ts +27 -0
  43. package/src/components/loading/index.ts +2 -25
  44. package/src/components/panel/PanelHandleContentDetails.ts +2612 -0
  45. package/src/components/panel/config.ts +348 -0
  46. package/src/components/panel/index.css +191 -5
  47. package/src/components/panel/index.ts +10 -2475
  48. package/src/components/panel/selectMultipleType.ts +52 -25
  49. package/src/components/prompt/config.ts +102 -0
  50. package/src/components/prompt/index.ts +2 -100
  51. package/src/components/rightClickMenu/config.ts +122 -0
  52. package/src/components/rightClickMenu/index.css +78 -0
  53. package/src/components/rightClickMenu/index.ts +26 -202
  54. package/src/components/searchSuggestion/config.ts +55 -0
  55. package/src/components/searchSuggestion/index.ts +228 -205
  56. package/src/components/searchSuggestion/indexType.ts +56 -32
  57. package/src/components/tooltip/config.ts +29 -0
  58. package/src/components/tooltip/index.ts +2 -27
  59. package/src/css/animation.css +22 -0
  60. package/src/utils/PopsDOMUtils.ts +108 -29
  61. package/src/utils/PopsInstanceUtils.ts +80 -0
  62. package/src/components/searchSuggestion/index.css +0 -0
@@ -49,6 +49,8 @@ declare class Pops {
49
49
  folderCSS: string;
50
50
  /** pops.folder */
51
51
  panelCSS: string;
52
+ /** pops.rightClickMenu */
53
+ rightClickMenu: string;
52
54
  };
53
55
  /** icon图标的svg代码 */
54
56
  iconSVG: { [key in PopsIcon]: string; };
@@ -84,10 +86,10 @@ declare class Pops {
84
86
  getAnimationEndNameList(): string[];
85
87
  getTransitionEndNameList(): string[];
86
88
  offset(element: HTMLElement): DOMRect;
87
- width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean): number;
88
- height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean): number;
89
- outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean): number;
90
- outerHeight(element: HTMLElement | string | Window, isShow?: boolean): number;
89
+ width(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
90
+ height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
91
+ outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
92
+ outerHeight(element: HTMLElement | string | Window, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
91
93
  addClassName(element: HTMLElement, className: string): void;
92
94
  removeClassName(element: HTMLElement, className: string): void;
93
95
  containsClassName(element: HTMLElement, className: string): boolean;
@@ -97,10 +99,10 @@ declare class Pops {
97
99
  css(element: HTMLElement | string, property: { [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P]; } | {
98
100
  [key: string]: string | number;
99
101
  }): string;
100
- createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, property?: ({ [P in keyof HTMLElementTagNameMap[K]]?: HTMLElementTagNameMap[K][P]; } & {
102
+ createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, property?: ({ [P in keyof HTMLElementTagNameMap[K]]?: HTMLElementTagNameMap[K][P] extends string | boolean | number ? HTMLElementTagNameMap[K][P] : never; } & {
101
103
  [key: string]: any;
102
104
  }) | string, attributes?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsCreateElementAttributesMap): HTMLElementTagNameMap[K];
103
- getTextBoundingRect(input: HTMLInputElement, selectionStart: number | string, selectionEnd: number | string, debug: boolean): DOMRect;
105
+ getTextBoundingRect(input: HTMLInputElement | HTMLTextAreaElement, selectionStart: number | string, selectionEnd: number | string, debug: boolean): DOMRect;
104
106
  cssHide(ele: Element | null, isImportant?: boolean): void;
105
107
  cssShow(ele: Element | null): void;
106
108
  parseHTML<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1 | undefined, isComplete?: T2 | undefined): import("./types/PopsDOMUtilsEventType").ParseHTMLReturnType<T1, T2>;
@@ -108,10 +110,13 @@ declare class Pops {
108
110
  appendHead($ele: HTMLElement): void;
109
111
  appendBody($ele: HTMLElement): void;
110
112
  isShow(element: HTMLElement): boolean;
111
- showElement(element: HTMLElement): {
113
+ showElement(element: HTMLElement, parent?: HTMLElement | ShadowRoot): {
114
+ cloneNode: HTMLElement;
112
115
  recovery(): void;
113
116
  };
114
117
  getStyleValue(element: HTMLElement | CSSStyleDeclaration, styleName: string): number;
118
+ before(element: HTMLElement | Element | string, content: HTMLElement | string): void;
119
+ after(element: HTMLElement | Element | string, content: HTMLElement | string): void;
115
120
  on(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (event: Event) => void, option?: boolean | AddEventListenerOptions): void;
116
121
  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;
117
122
  on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
@@ -140,6 +145,11 @@ declare class Pops {
140
145
  };
141
146
  /** pops创建的实例使用的工具类 */
142
147
  InstanceUtils: {
148
+ getMaxZIndexNodeInfo(deviation?: number): {
149
+ node: Element;
150
+ zIndex: number;
151
+ };
152
+ getMaxZIndex(deviation?: number): number;
143
153
  getPopsMaxZIndex(deviation?: number): {
144
154
  zIndex: number;
145
155
  animElement: HTMLDivElement | null;
@@ -167,6 +177,45 @@ declare class Pops {
167
177
  sub(number1: number, number2: number): string;
168
178
  division(number1: number, number2: number): number;
169
179
  };
180
+ /** pops.panel中用于处理各个类型的工具 */
181
+ panelHandleContentUtils: {
182
+ asideULElement: HTMLUListElement;
183
+ sectionContainerHeaderULElement: HTMLUListElement;
184
+ sectionContainerULElement: HTMLUListElement;
185
+ $el: {
186
+ $content: HTMLDivElement;
187
+ $contentAside: HTMLDivElement;
188
+ $contentSectionContainer: HTMLDivElement;
189
+ };
190
+ init(details: {
191
+ config: Required<PopsPanelDetails>;
192
+ $el: {
193
+ $content: HTMLDivElement;
194
+ $contentAside: HTMLDivElement;
195
+ $contentSectionContainer: HTMLDivElement;
196
+ };
197
+ }): void;
198
+ clearContainer(): void;
199
+ clearAsideItemIsVisited(): void;
200
+ setAsideItemIsVisited(element: HTMLElement): void;
201
+ addElementAttributes(element: HTMLElement, attributes?: any): void;
202
+ setElementProps(element: HTMLElement, props?: any): void;
203
+ getAsideItem(asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): HTMLLIElement;
204
+ getSectionContainerItem_switch(formConfig: import("./components/panel/switchType").PopsPanelSwitchDetails): HTMLLIElement;
205
+ getSectionContainerItem_slider(formConfig: import("./components/panel/sliderType").PopsPanelSliderDetails): HTMLLIElement;
206
+ getSectionContainerItem_slider_new(formConfig: import("./components/panel/sliderType").PopsPanelSliderDetails): HTMLLIElement;
207
+ getSectionContainerItem_input(formConfig: import("./components/panel/inputType").PopsPanelInputDetails): HTMLLIElement;
208
+ getSectionContainerItem_textarea(formConfig: import("./components/panel/textareaType").PopsPanelTextAreaDetails): HTMLLIElement;
209
+ getSectionContainerItem_select(formConfig: import("./components/panel/selectType").PopsPanelSelectDetails<any>): HTMLLIElement;
210
+ getSectionContainerItem_select_multiple_new(formConfig: import("./components/panel/selectMultipleType").PopsPanelSelectMultipleDetails<any>): HTMLLIElement;
211
+ getSectionContainerItem_button(formConfig: import("./components/panel/buttonType").PopsPanelButtonDetails): HTMLLIElement;
212
+ getSectionContainerItem_deepMenu(formConfig: import("./components/panel/deepMenuType").PopsPanelDeepMenuDetails): HTMLLIElement;
213
+ getSectionContainerItem_own(formConfig: import("./components/panel/ownType").PopsPanelOwnDetails): HTMLLIElement;
214
+ getSectionContainerItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails): HTMLLIElement | undefined;
215
+ initFormItem(formConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
216
+ uListContainerAddItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails, containerOptions: import("./components/panel/commonType").PopsPanelRightAsideContainerOptions): void;
217
+ setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
218
+ };
170
219
  };
171
220
  constructor();
172
221
  init(): void;
@@ -0,0 +1,2 @@
1
+ import type { PopsAlertDetails } from "./indexType";
2
+ export declare const PopsAlertConfig: Required<PopsAlertDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsConfirmDetails } from "./indexType";
2
+ export declare const PopsConfirmConfig: Required<PopsConfirmDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsDrawerDetails } from "./indexType";
2
+ export declare const PopsDrawerConfig: Required<PopsDrawerDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsFolderDetails } from "./indexType";
2
+ export declare const PopsFolderConfig: Required<PopsFolderDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsIframeDetails } from "./indexType";
2
+ export declare const PopsIframeConfig: Required<PopsIframeDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsLoadingDetails } from "./indexType";
2
+ export declare const PopsLoadingConfig: Required<PopsLoadingDetails>;
@@ -0,0 +1,149 @@
1
+ import type { PopsPanelButtonDetails } from "./buttonType";
2
+ import type { PopsPanelRightAsideContainerOptions } from "./commonType";
3
+ import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
4
+ import type { PopsPanelContentConfig, PopsPanelDetails, PopsPanelFormsTotalDetails } from "./indexType";
5
+ import type { PopsPanelInputDetails } from "./inputType";
6
+ import type { PopsPanelOwnDetails } from "./ownType";
7
+ import type { PopsPanelSelectMultipleDetails } from "./selectMultipleType";
8
+ import type { PopsPanelSelectDetails } from "./selectType";
9
+ import type { PopsPanelSliderDetails } from "./sliderType";
10
+ import type { PopsPanelSwitchDetails } from "./switchType";
11
+ import type { PopsPanelTextAreaDetails } from "./textareaType";
12
+ export declare const PanelHandleContentDetails: {
13
+ /**
14
+ * 左侧的ul容器
15
+ */
16
+ asideULElement: HTMLUListElement;
17
+ /**
18
+ * 右侧主内容的顶部文字ul容器
19
+ */
20
+ sectionContainerHeaderULElement: HTMLUListElement;
21
+ /**
22
+ * 右侧主内容的ul容器
23
+ */
24
+ sectionContainerULElement: HTMLUListElement;
25
+ $el: {
26
+ $content: HTMLDivElement;
27
+ $contentAside: HTMLDivElement;
28
+ $contentSectionContainer: HTMLDivElement;
29
+ };
30
+ init(details: {
31
+ config: Required<PopsPanelDetails>;
32
+ $el: {
33
+ $content: HTMLDivElement;
34
+ $contentAside: HTMLDivElement;
35
+ $contentSectionContainer: HTMLDivElement;
36
+ };
37
+ }): void;
38
+ /**
39
+ * 清空container容器的元素
40
+ */
41
+ clearContainer(): void;
42
+ /**
43
+ * 清空左侧容器已访问记录
44
+ */
45
+ clearAsideItemIsVisited(): void;
46
+ /**
47
+ * 设置左侧容器已访问记录
48
+ * @param element
49
+ */
50
+ setAsideItemIsVisited(element: HTMLElement): void;
51
+ /**
52
+ * 为元素添加自定义属性
53
+ * @param element
54
+ * @param attributes
55
+ */
56
+ addElementAttributes(element: HTMLElement, attributes?: any): void;
57
+ /**
58
+ * 为元素设置(自定义)属性
59
+ * @param element
60
+ * @param props
61
+ */
62
+ setElementProps(element: HTMLElement, props?: any): void;
63
+ /**
64
+ * 获取左侧容器元素<li>
65
+ * @param asideConfig
66
+ */
67
+ getAsideItem(asideConfig: PopsPanelContentConfig): HTMLLIElement;
68
+ /**
69
+ * 获取中间容器的元素<li>
70
+ * type ==> switch
71
+ * @param formConfig
72
+ */
73
+ getSectionContainerItem_switch(formConfig: PopsPanelSwitchDetails): HTMLLIElement;
74
+ /**
75
+ * 获取中间容器的元素<li>
76
+ * type ==> slider
77
+ * @param formConfig
78
+ */
79
+ getSectionContainerItem_slider(formConfig: PopsPanelSliderDetails): HTMLLIElement;
80
+ /**
81
+ * 获取中间容器的元素<li>
82
+ * type ==> slider
83
+ * @param formConfig
84
+ */
85
+ getSectionContainerItem_slider_new(formConfig: PopsPanelSliderDetails): HTMLLIElement;
86
+ /**
87
+ * 获取中间容器的元素<li>
88
+ * type ==> input
89
+ * @param formConfig
90
+ */
91
+ getSectionContainerItem_input(formConfig: PopsPanelInputDetails): HTMLLIElement;
92
+ /**
93
+ * 获取中间容器的元素<li>
94
+ * type ==> textarea
95
+ * @param formConfig
96
+ */
97
+ getSectionContainerItem_textarea(formConfig: PopsPanelTextAreaDetails): HTMLLIElement;
98
+ /**
99
+ * 获取中间容器的元素<li>
100
+ * type ==> select
101
+ * @param formConfig
102
+ */
103
+ getSectionContainerItem_select(formConfig: PopsPanelSelectDetails<any>): HTMLLIElement;
104
+ /**
105
+ * 获取中间容器的元素<li>
106
+ * type ==> select-multiple
107
+ * @param formConfig
108
+ */
109
+ getSectionContainerItem_select_multiple_new(formConfig: PopsPanelSelectMultipleDetails<any>): HTMLLIElement;
110
+ /**
111
+ * 获取中间容器的元素<li>
112
+ * type ==> button
113
+ * @param formConfig
114
+ */
115
+ getSectionContainerItem_button(formConfig: PopsPanelButtonDetails): HTMLLIElement;
116
+ /**
117
+ * 获取深层容器的元素<li>
118
+ * @param formConfig
119
+ */
120
+ getSectionContainerItem_deepMenu(formConfig: PopsPanelDeepMenuDetails): HTMLLIElement;
121
+ /**
122
+ * 获取中间容器的元素<li>
123
+ * type ===> own
124
+ * @param formConfig
125
+ */
126
+ getSectionContainerItem_own(formConfig: PopsPanelOwnDetails): HTMLLIElement;
127
+ /**
128
+ * 获取中间容器的元素<li>
129
+ * @param formConfig
130
+ */
131
+ getSectionContainerItem(formConfig: PopsPanelFormsTotalDetails): HTMLLIElement | undefined;
132
+ /**
133
+ * 生成配置每一项的元素
134
+ * @param formConfig
135
+ */
136
+ initFormItem(formConfig: PopsPanelContentConfig): void;
137
+ /**
138
+ *
139
+ * @param formConfig
140
+ * @param containerOptions
141
+ */
142
+ uListContainerAddItem(formConfig: PopsPanelFormsTotalDetails, containerOptions: PopsPanelRightAsideContainerOptions): void;
143
+ /**
144
+ * 为左侧容器元素添加点击事件
145
+ * @param asideLiElement 左侧的容器<li>元素
146
+ * @param asideConfig 配置
147
+ */
148
+ setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: PopsPanelContentConfig): void;
149
+ };
@@ -0,0 +1,2 @@
1
+ import type { PopsPanelDetails } from "./indexType";
2
+ export declare const PopsPanelConfig: Required<PopsPanelDetails>;
@@ -1,4 +1,26 @@
1
+ import type { PopsAlertDetails } from "../alert/indexType";
1
2
  import type { PopsPanelCommonDetails } from "./commonType";
3
+ export interface PopsPanelSelectMultipleDataOption<T> {
4
+ /**
5
+ * 真正的值
6
+ */
7
+ value: T;
8
+ /**
9
+ * 显示的文字
10
+ */
11
+ text: string;
12
+ /**
13
+ * 显示的文字是否是html
14
+ */
15
+ isHTML?: boolean;
16
+ /**
17
+ * (可选)是否禁用项
18
+ * 触发条件:
19
+ * + 点击select元素
20
+ * + select元素触发change事件
21
+ */
22
+ disable?(value: T): boolean;
23
+ }
2
24
  /**
3
25
  * pops.panel的 select
4
26
  */
@@ -31,30 +53,37 @@ export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommon
31
53
  * (可选)是否禁用
32
54
  */
33
55
  disabled?: boolean | ((value: T) => boolean);
56
+ /**
57
+ * 提示文字
58
+ */
59
+ placeholder?: string | (() => string);
34
60
  /**
35
61
  * 获取该项的值的回调函数
36
62
  */
37
63
  getValue(): T[];
64
+ /**
65
+ * 弹出的下拉列表弹窗的配置
66
+ */
67
+ selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
38
68
  /**
39
69
  * 选择器的值改变触发的回调函数
40
70
  * @param event 事件
41
71
  * @param isSelectedValue 当前选中的值,也就是元素属性上的__value__
42
72
  * @param isSelectedText 当前选中的文本
43
73
  */
44
- callback?(event: PointerEvent | TouchEvent,
74
+ callback?(
45
75
  /** 当前已选中的信息 */
46
76
  isSelectedInfo: {
47
77
  /** 值 */
48
78
  value: T;
49
79
  /** 显示的文字 */
50
80
  text: string;
51
- /** 选中的元素 */
52
- $option: HTMLOptionElement;
53
81
  }[]): void;
54
82
  /**
55
- * 点击select元素触发该回调
83
+ * 点击某个项的元素触发该回调
56
84
  * @param event 点击事件
57
- * @param selectElement 当前的select元素
85
+ * @param selectElement 当前的选中的元素
86
+ * @returns 如果返回boolean为false,则不会触发默认的点击事件
58
87
  */
59
88
  clickCallBack?(event: PointerEvent | MouseEvent,
60
89
  /** 当前已选中的信息 */
@@ -63,27 +92,23 @@ export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommon
63
92
  value: T;
64
93
  /** 显示的文字 */
65
94
  text: string;
66
- /** 选中的元素 */
67
- $option: HTMLOptionElement;
68
- }[]): void;
95
+ }[]): void | boolean;
69
96
  /**
70
- * 选择器内的数据组
97
+ * 点击标签tag的关闭图标触发该回调
98
+ * 如果返回boolean类型且为false,则阻止默认的事件
71
99
  */
72
- data: {
73
- /**
74
- * 真正的值
75
- */
100
+ closeIconClickCallBack?: (event: PointerEvent | MouseEvent, data: {
101
+ /** 标签元素 */
102
+ $tag: HTMLElement;
103
+ /** 关闭图标元素 */
104
+ $closeIcon: HTMLElement;
105
+ /** 值 */
76
106
  value: T;
77
- /**
78
- * 显示的文字
79
- */
107
+ /** 显示的文字 */
80
108
  text: string;
81
- /**
82
- * (可选)是否禁用项
83
- * 触发条件:
84
- * + 点击select元素
85
- * + select元素触发change事件
86
- */
87
- disable?(value: T): boolean;
88
- }[];
109
+ }) => void | boolean;
110
+ /**
111
+ * 选择器内的数据组
112
+ */
113
+ data: PopsPanelSelectMultipleDataOption<T>[];
89
114
  }
@@ -0,0 +1,2 @@
1
+ import type { PopsPromptDetails } from "./indexType";
2
+ export declare const PopsPromptConfig: Required<PopsPromptDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsRightClickMenuDetails } from "./indexType";
2
+ export declare const rightClickMenuConfig: () => Required<PopsRightClickMenuDetails>;
@@ -0,0 +1,2 @@
1
+ import type { PopsSearchSuggestionDetails } from "./indexType";
2
+ export declare const searchSuggestionConfig: Required<PopsSearchSuggestionDetails>;
@@ -5,8 +5,9 @@
5
5
  export interface PopsSearchSuggestionDetails<T = any> {
6
6
  /**
7
7
  * 当前的环境,可以是document,可以是shadowroot,默认是document
8
+ * @default document
8
9
  */
9
- selfDocument?: Document;
10
+ selfDocument?: Document | ShadowRoot | (Document | ShadowRoot)[];
10
11
  /**
11
12
  * 目标元素,一般是跟随它的位置变化,监听它的focus/click
12
13
  */
@@ -14,17 +15,18 @@ export interface PopsSearchSuggestionDetails<T = any> {
14
15
  /**
15
16
  * 目标input元素,监听它的focus/click/input事件
16
17
  */
17
- inputTarget?: HTMLInputElement;
18
+ inputTarget?: HTMLInputElement | HTMLTextAreaElement;
18
19
  /**
19
20
  * 数据
20
21
  */
21
- data: T[];
22
+ data: T[] | (() => T[]);
22
23
  /**
23
24
  * 右边的删除按钮图标
24
25
  */
25
26
  deleteIcon?: {
26
27
  /**
27
- * 是否启用,默认true
28
+ * 是否启用
29
+ * @default true
28
30
  */
29
31
  enable?: boolean;
30
32
  /**
@@ -37,66 +39,87 @@ export interface PopsSearchSuggestionDetails<T = any> {
37
39
  */
38
40
  className?: string;
39
41
  /**
40
- * position是否使用absolut,默认true
42
+ * position是否使用absolut
43
+ * @default true
41
44
  */
42
45
  isAbsolute?: boolean;
43
46
  /**
44
- * 是否启用动画,默认true
47
+ * 是否启用动画
48
+ * @default true
45
49
  */
46
- isAnimation?: true;
50
+ isAnimation?: boolean;
47
51
  /**
48
- * 建议框的宽度,默认250px
52
+ * 建议框的宽度
53
+ * @default "250px"
49
54
  */
50
55
  width?: string;
51
56
  /**
52
- * 是否和config.target的宽度同步,默认true
57
+ * 是否和config.target的宽度同步
58
+ * @default true
53
59
  */
54
60
  followTargetWidth?: true;
55
61
  /**
56
- * 建议框的最大高度,默认300px
62
+ * 建议框的最大高度
63
+ * @default "300px"
57
64
  */
58
65
  maxHeight?: string;
59
66
  /**
60
- * 建议框距离元素的距离,默认0
67
+ * 建议框距离元素的距离
68
+ * @default 0
61
69
  */
62
70
  topDistance?: number;
63
71
  /**
64
72
  * 建议框显示的位置,默认是auto(自动判断位置)
73
+ * @default "auto"
65
74
  */
66
75
  position?: "top" | "bottom" | "auto";
67
76
  /**
68
- * 当位置在上面时(包括auto自动判断在上面时),是否对搜索项进行反转,默认true
77
+ * 当位置在上面时(包括auto自动判断在上面时),是否对搜索项进行反转
78
+ * @default true
69
79
  */
70
80
  positionTopToReverse?: boolean;
71
81
  /**
72
82
  * 层级,默认10000
83
+ * @default 10000
73
84
  */
74
85
  zIndex?: number | (() => number);
75
86
  /**
76
87
  * 搜索中的提示
88
+ *
89
+ * 前提:inputTarget是input/textarea
90
+ *
91
+ * 触发change事件,且没有搜索到数据,则显示此提示
77
92
  */
78
93
  searchingTip?: string;
79
94
  /**
80
95
  * 没有搜索结果的提示的html
96
+ *
97
+ * 前提:inputTarget是input/textarea
98
+ *
99
+ * 触发change事件,且没有搜索到数据,则显示此结果项
81
100
  */
82
101
  toSearhNotResultHTML?: string;
83
102
  /**
84
- * 没有搜索结果是否隐藏提示框,默认false
103
+ * 没有搜索结果是否隐藏提示框
104
+ * @default false
85
105
  */
86
106
  toHideWithNotResult?: boolean;
87
107
  /**
88
- * 跟随目标的位置,默认为target的位置
108
+ * 跟随目标的位置
109
+ * @default "target"
89
110
  */
90
111
  followPosition?: "target" | "input" | "inputCursor";
91
112
  /**
92
- * 获取每一项的html
113
+ * 获取每一项的html,在显示的时候会调用该函数
114
+ *
115
+ * 它的父元素是一个<li>标签
93
116
  */
94
117
  getItemHTML: (item: T) => string;
95
118
  /**
96
119
  * 当config.target触发input时自动调用该函数来获取数据
97
120
  * @param inputValue 当前输入框的值
98
121
  */
99
- getData: (inputValue: string) => Promise<T[]> | T[];
122
+ getData?: (inputValue: string) => Promise<T[]> | T[];
100
123
  /**
101
124
  * 每一项的点击回调
102
125
  * @param event 触发的事件
@@ -120,14 +143,14 @@ export interface PopsSearchSuggestionDetails<T = any> {
120
143
  * pops.searchSuggestion的函数返回值
121
144
  */
122
145
  export interface PopsSearchSuggestionResult<T = any> {
123
- /**
124
- * 根元素
125
- */
126
- root: HTMLElement;
127
- /**
128
- * ul元素
129
- */
130
- hintULElement: HTMLUListElement;
146
+ $el: {
147
+ /** 根元素 */
148
+ root: HTMLElement;
149
+ /** ul元素 */
150
+ $hintULContainer: HTMLUListElement;
151
+ /** 动态更新CSS */
152
+ $dynamicCSS: HTMLStyleElement;
153
+ };
131
154
  /**
132
155
  * 初始化
133
156
  */
@@ -151,35 +174,35 @@ export interface PopsSearchSuggestionResult<T = any> {
151
174
  /**
152
175
  * 监听输入框内容改变
153
176
  */
154
- setInputChangeEvent: () => void;
177
+ setInputChangeEvent: (option?: AddEventListenerOptions) => void;
155
178
  /**
156
179
  * 移除输入框内容改变的监听
157
180
  */
158
- removeInputChangeEvent: () => void;
181
+ removeInputChangeEvent: (option?: AddEventListenerOptions) => void;
159
182
  /**
160
183
  * 设置显示搜索建议框的事件
161
184
  */
162
- setShowEvent: () => void;
185
+ setShowEvent: (option?: AddEventListenerOptions) => void;
163
186
  /**
164
187
  * 移除显示搜索建议框的事件
165
188
  */
166
- removeShowEvent: () => void;
189
+ removeShowEvent: (option?: AddEventListenerOptions) => void;
167
190
  /**
168
191
  * 设置隐藏搜索建议框的事件
169
192
  */
170
- setHideEvent: () => void;
193
+ setHideEvent: (option?: AddEventListenerOptions) => void;
171
194
  /**
172
195
  * 移除隐藏搜索建议框的事件
173
196
  */
174
- removeHideEvent: () => void;
197
+ removeHideEvent: (option?: AddEventListenerOptions) => void;
175
198
  /**
176
199
  * 设置所有监听
177
200
  */
178
- setAllEvent: () => void;
201
+ setAllEvent: (option?: AddEventListenerOptions) => void;
179
202
  /**
180
203
  * 移除所有监听
181
204
  */
182
- removeAllEvent: () => void;
205
+ removeAllEvent: (option?: AddEventListenerOptions) => void;
183
206
  /**
184
207
  * 获取删除按钮的html
185
208
  */
@@ -206,6 +229,7 @@ export interface PopsSearchSuggestionResult<T = any> {
206
229
  * 因为目标元素可能是动态隐藏的
207
230
  */
208
231
  changeHintULElementWidth: () => void;
232
+ updateDynamicCSS: () => void;
209
233
  /**
210
234
  * 更新页面显示的搜索结果
211
235
  */
@@ -0,0 +1,2 @@
1
+ import type { PopsToolTipDetails } from "./indexType";
2
+ export declare const PopsTooltipConfig: Required<PopsToolTipDetails>;