@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.
- package/dist/index.amd.js +3666 -3088
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +3666 -3088
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +3666 -3088
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +3666 -3088
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +3666 -3088
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +3666 -3088
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +56 -7
- package/dist/types/src/components/alert/config.d.ts +2 -0
- package/dist/types/src/components/confirm/config.d.ts +2 -0
- package/dist/types/src/components/drawer/config.d.ts +2 -0
- package/dist/types/src/components/folder/config.d.ts +2 -0
- package/dist/types/src/components/iframe/config.d.ts +2 -0
- package/dist/types/src/components/loading/config.d.ts +2 -0
- package/dist/types/src/components/panel/PanelHandleContentDetails.d.ts +149 -0
- package/dist/types/src/components/panel/config.d.ts +2 -0
- package/dist/types/src/components/panel/selectMultipleType.d.ts +49 -24
- package/dist/types/src/components/prompt/config.d.ts +2 -0
- package/dist/types/src/components/rightClickMenu/config.d.ts +2 -0
- package/dist/types/src/components/searchSuggestion/config.d.ts +2 -0
- package/dist/types/src/components/searchSuggestion/indexType.d.ts +56 -32
- package/dist/types/src/components/tooltip/config.d.ts +2 -0
- package/dist/types/src/utils/PopsDOMUtils.d.ts +42 -13
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +22 -0
- package/package.json +4 -1
- package/src/Pops.ts +8 -2
- package/src/components/alert/config.ts +59 -0
- package/src/components/alert/index.ts +2 -57
- package/src/components/confirm/config.ts +94 -0
- package/src/components/confirm/index.ts +4 -94
- package/src/components/drawer/config.ts +90 -0
- package/src/components/drawer/index.ts +2 -88
- package/src/components/folder/config.ts +130 -0
- package/src/components/folder/index.ts +3 -129
- package/src/components/iframe/config.ts +58 -0
- package/src/components/iframe/index.ts +2 -56
- package/src/components/loading/config.ts +27 -0
- package/src/components/loading/index.ts +2 -25
- package/src/components/panel/PanelHandleContentDetails.ts +2612 -0
- package/src/components/panel/config.ts +348 -0
- package/src/components/panel/index.css +191 -5
- package/src/components/panel/index.ts +10 -2475
- package/src/components/panel/selectMultipleType.ts +52 -25
- package/src/components/prompt/config.ts +102 -0
- package/src/components/prompt/index.ts +2 -100
- package/src/components/rightClickMenu/config.ts +122 -0
- package/src/components/rightClickMenu/index.css +78 -0
- package/src/components/rightClickMenu/index.ts +26 -202
- package/src/components/searchSuggestion/config.ts +55 -0
- package/src/components/searchSuggestion/index.ts +228 -205
- package/src/components/searchSuggestion/indexType.ts +56 -32
- package/src/components/tooltip/config.ts +29 -0
- package/src/components/tooltip/index.ts +2 -27
- package/src/css/animation.css +22 -0
- package/src/utils/PopsDOMUtils.ts +108 -29
- package/src/utils/PopsInstanceUtils.ts +80 -0
- package/src/components/searchSuggestion/index.css +0 -0
package/dist/types/src/Pops.d.ts
CHANGED
|
@@ -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,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
|
+
};
|
|
@@ -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?(
|
|
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
|
-
*
|
|
83
|
+
* 点击某个项的元素触发该回调
|
|
56
84
|
* @param event 点击事件
|
|
57
|
-
* @param selectElement
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
*/
|
|
87
|
-
disable?(value: T): boolean;
|
|
88
|
-
}[];
|
|
109
|
+
}) => void | boolean;
|
|
110
|
+
/**
|
|
111
|
+
* 选择器内的数据组
|
|
112
|
+
*/
|
|
113
|
+
data: PopsPanelSelectMultipleDataOption<T>[];
|
|
89
114
|
}
|
|
@@ -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
|
-
*
|
|
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
|
|
42
|
+
* position是否使用absolut
|
|
43
|
+
* @default true
|
|
41
44
|
*/
|
|
42
45
|
isAbsolute?: boolean;
|
|
43
46
|
/**
|
|
44
|
-
*
|
|
47
|
+
* 是否启用动画
|
|
48
|
+
* @default true
|
|
45
49
|
*/
|
|
46
|
-
isAnimation?:
|
|
50
|
+
isAnimation?: boolean;
|
|
47
51
|
/**
|
|
48
|
-
*
|
|
52
|
+
* 建议框的宽度
|
|
53
|
+
* @default "250px"
|
|
49
54
|
*/
|
|
50
55
|
width?: string;
|
|
51
56
|
/**
|
|
52
|
-
* 是否和config.target
|
|
57
|
+
* 是否和config.target的宽度同步
|
|
58
|
+
* @default true
|
|
53
59
|
*/
|
|
54
60
|
followTargetWidth?: true;
|
|
55
61
|
/**
|
|
56
|
-
*
|
|
62
|
+
* 建议框的最大高度
|
|
63
|
+
* @default "300px"
|
|
57
64
|
*/
|
|
58
65
|
maxHeight?: string;
|
|
59
66
|
/**
|
|
60
|
-
*
|
|
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
|
|
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
|
-
*
|
|
103
|
+
* 没有搜索结果是否隐藏提示框
|
|
104
|
+
* @default false
|
|
85
105
|
*/
|
|
86
106
|
toHideWithNotResult?: boolean;
|
|
87
107
|
/**
|
|
88
|
-
*
|
|
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
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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
|
*/
|