@whitesev/pops 2.2.1 → 2.2.3
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 +275 -263
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +275 -263
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +275 -263
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +275 -263
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +275 -263
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +275 -263
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +1 -1
- package/dist/types/src/components/panel/index.d.ts +2 -1
- package/dist/types/src/components/panel/types/components-input.d.ts +9 -1
- package/dist/types/src/components/panel/types/components-select.d.ts +6 -1
- package/dist/types/src/components/panel/types/components-switch.d.ts +6 -1
- package/dist/types/src/components/panel/types/components-textarea.d.ts +8 -2
- package/dist/types/src/components/searchSuggestion/index.d.ts +1 -1
- package/dist/types/src/handler/PopsElementHandler.d.ts +6 -6
- package/dist/types/src/handler/PopsHandler.d.ts +3 -3
- package/dist/types/src/types/components.d.ts +5 -5
- package/dist/types/src/types/main.d.ts +34 -31
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/alert/index.ts +15 -15
- package/src/components/confirm/index.ts +16 -15
- package/src/components/drawer/index.ts +16 -15
- package/src/components/folder/index.ts +141 -152
- package/src/components/iframe/index.ts +14 -13
- package/src/components/panel/handlerComponents.ts +25 -6
- package/src/components/panel/index.ts +19 -18
- package/src/components/panel/types/components-input.ts +9 -1
- package/src/components/panel/types/components-select.ts +6 -1
- package/src/components/panel/types/components-switch.ts +6 -1
- package/src/components/panel/types/components-textarea.ts +8 -2
- package/src/components/prompt/index.ts +15 -14
- package/src/components/rightClickMenu/index.ts +17 -16
- package/src/components/searchSuggestion/index.ts +21 -20
- package/src/components/tooltip/index.ts +3 -2
- package/src/handler/PopsElementHandler.ts +18 -18
- package/src/handler/PopsHandler.ts +13 -7
- package/src/types/components.d.ts +5 -5
- package/src/types/main.d.ts +34 -31
package/dist/types/src/Pops.d.ts
CHANGED
|
@@ -21093,7 +21093,7 @@ declare class Pops {
|
|
|
21093
21093
|
* searchSuggestion.setAllEvent();
|
|
21094
21094
|
*/
|
|
21095
21095
|
searchSuggestion: <T = any>(details: PopsSearchSuggestionDetails<T>) => {
|
|
21096
|
-
selfDocument:
|
|
21096
|
+
selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
|
|
21097
21097
|
$el: {
|
|
21098
21098
|
root: HTMLElement;
|
|
21099
21099
|
$hintULContainer: HTMLUListElement;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { PopsPanelDetails, PopsPanelEventType } from "./types";
|
|
2
|
+
import type { PopsType } from "../../types/main";
|
|
2
3
|
export declare const PopsPanel: {
|
|
3
4
|
init(details: PopsPanelDetails): {
|
|
4
5
|
addEventListener: <K extends keyof PopsPanelEventType>(event: K, listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
|
|
@@ -13,6 +14,6 @@ export declare const PopsPanel: {
|
|
|
13
14
|
animElement: HTMLDivElement;
|
|
14
15
|
popsElement: HTMLDivElement;
|
|
15
16
|
maskElement?: HTMLDivElement | undefined;
|
|
16
|
-
mode:
|
|
17
|
+
mode: PopsType;
|
|
17
18
|
};
|
|
18
19
|
};
|
|
@@ -5,10 +5,12 @@ import type { PopsPanelCommonDetails } from "./components-common";
|
|
|
5
5
|
export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelInputDetails> {
|
|
6
6
|
/**
|
|
7
7
|
* (可选)className属性
|
|
8
|
+
* @default ""
|
|
8
9
|
*/
|
|
9
10
|
className?: string;
|
|
10
11
|
/**
|
|
11
12
|
* (可选)自定义元素属性
|
|
13
|
+
* @default {}
|
|
12
14
|
*/
|
|
13
15
|
attributes?: {
|
|
14
16
|
[key: string]: any;
|
|
@@ -17,6 +19,7 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
|
|
|
17
19
|
}[];
|
|
18
20
|
/**
|
|
19
21
|
* (可选)自定义属性
|
|
22
|
+
* @default {}
|
|
20
23
|
*/
|
|
21
24
|
props?: {
|
|
22
25
|
[K in keyof HTMLElement]?: HTMLElement[K];
|
|
@@ -27,6 +30,7 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
|
|
|
27
30
|
text: string;
|
|
28
31
|
/**
|
|
29
32
|
* (可选)左边的文字下面的描述
|
|
33
|
+
* @default ""
|
|
30
34
|
*/
|
|
31
35
|
description?: string;
|
|
32
36
|
/**
|
|
@@ -35,8 +39,9 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
|
|
|
35
39
|
type: "input";
|
|
36
40
|
/**
|
|
37
41
|
* (可选)是否禁用
|
|
42
|
+
* @default false
|
|
38
43
|
*/
|
|
39
|
-
disabled?: boolean;
|
|
44
|
+
disabled?: boolean | (() => boolean);
|
|
40
45
|
/**
|
|
41
46
|
* 获取该项的值的回调函数
|
|
42
47
|
*/
|
|
@@ -50,14 +55,17 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
|
|
|
50
55
|
callback(event: InputEvent, value: string, valueAsNumber?: number): void;
|
|
51
56
|
/**
|
|
52
57
|
* (可选)输入框内的提示
|
|
58
|
+
* @default ""
|
|
53
59
|
*/
|
|
54
60
|
placeholder?: string;
|
|
55
61
|
/**
|
|
56
62
|
* (可选)是否是密码框
|
|
63
|
+
* @default false
|
|
57
64
|
*/
|
|
58
65
|
isPassword?: boolean;
|
|
59
66
|
/**
|
|
60
67
|
* (可选)是否是数字框
|
|
68
|
+
* @default false
|
|
61
69
|
*/
|
|
62
70
|
isNumber?: boolean;
|
|
63
71
|
/**
|
|
@@ -7,10 +7,12 @@ import type { PopsPanelFormsTotalDetails } from ".";
|
|
|
7
7
|
export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
|
|
8
8
|
/**
|
|
9
9
|
* (可选)className属性
|
|
10
|
+
* @default ""
|
|
10
11
|
*/
|
|
11
12
|
className?: string;
|
|
12
13
|
/**
|
|
13
14
|
* (可选)自定义元素属性
|
|
15
|
+
* @default {}
|
|
14
16
|
*/
|
|
15
17
|
attributes?: {
|
|
16
18
|
[key: string]: any;
|
|
@@ -19,6 +21,7 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
|
|
|
19
21
|
}[];
|
|
20
22
|
/**
|
|
21
23
|
* (可选)自定义属性
|
|
24
|
+
* @default {}
|
|
22
25
|
*/
|
|
23
26
|
props?: {
|
|
24
27
|
[K in keyof HTMLElement]?: HTMLElement[K];
|
|
@@ -29,6 +32,7 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
|
|
|
29
32
|
text: string;
|
|
30
33
|
/**
|
|
31
34
|
* (可选)左边的文字下面的描述
|
|
35
|
+
* @default ""
|
|
32
36
|
*/
|
|
33
37
|
description?: string;
|
|
34
38
|
/**
|
|
@@ -37,8 +41,9 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
|
|
|
37
41
|
type: "select";
|
|
38
42
|
/**
|
|
39
43
|
* (可选)是否禁用
|
|
44
|
+
* @default false
|
|
40
45
|
*/
|
|
41
|
-
disabled?: boolean;
|
|
46
|
+
disabled?: boolean | (() => boolean);
|
|
42
47
|
/**
|
|
43
48
|
* 获取该项的值的回调函数
|
|
44
49
|
*/
|
|
@@ -5,10 +5,12 @@ import type { PopsPanelCommonDetails } from "./components-common";
|
|
|
5
5
|
export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
|
|
6
6
|
/**
|
|
7
7
|
* (可选)className属性
|
|
8
|
+
* @default ""
|
|
8
9
|
*/
|
|
9
10
|
className?: string;
|
|
10
11
|
/**
|
|
11
12
|
* (可选)自定义元素属性
|
|
13
|
+
* @default {}
|
|
12
14
|
*/
|
|
13
15
|
attributes?: {
|
|
14
16
|
[key: string]: any;
|
|
@@ -17,6 +19,7 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
|
|
|
17
19
|
}[];
|
|
18
20
|
/**
|
|
19
21
|
* (可选)自定义属性
|
|
22
|
+
* @default {}
|
|
20
23
|
*/
|
|
21
24
|
props?: {
|
|
22
25
|
[K in keyof HTMLElement]?: HTMLElement[K];
|
|
@@ -27,6 +30,7 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
|
|
|
27
30
|
text: string;
|
|
28
31
|
/**
|
|
29
32
|
* (可选)左边的文字下面的描述
|
|
33
|
+
* @default ""
|
|
30
34
|
*/
|
|
31
35
|
description?: string;
|
|
32
36
|
/**
|
|
@@ -35,8 +39,9 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
|
|
|
35
39
|
type: "switch";
|
|
36
40
|
/**
|
|
37
41
|
* (可选)是否禁用
|
|
42
|
+
* @default false
|
|
38
43
|
*/
|
|
39
|
-
disabled?:
|
|
44
|
+
disabled?: boolean | (() => boolean);
|
|
40
45
|
/**
|
|
41
46
|
* 获取该项的值的回调函数
|
|
42
47
|
*/
|
|
@@ -5,10 +5,12 @@ import type { PopsPanelCommonDetails } from "./components-common";
|
|
|
5
5
|
export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
|
|
6
6
|
/**
|
|
7
7
|
* (可选)className属性
|
|
8
|
+
* @default ""
|
|
8
9
|
*/
|
|
9
10
|
className?: string;
|
|
10
11
|
/**
|
|
11
12
|
* (可选)自定义元素属性
|
|
13
|
+
* @default {}
|
|
12
14
|
*/
|
|
13
15
|
attributes?: {
|
|
14
16
|
[key: string]: any;
|
|
@@ -17,6 +19,7 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
|
|
|
17
19
|
}[];
|
|
18
20
|
/**
|
|
19
21
|
* (可选)自定义属性
|
|
22
|
+
* @default {}
|
|
20
23
|
*/
|
|
21
24
|
props?: {
|
|
22
25
|
[K in keyof HTMLElement]?: HTMLElement[K];
|
|
@@ -27,6 +30,7 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
|
|
|
27
30
|
text: string;
|
|
28
31
|
/**
|
|
29
32
|
* (可选)左边的文字下面的描述
|
|
33
|
+
* @default ""
|
|
30
34
|
*/
|
|
31
35
|
description?: string;
|
|
32
36
|
/**
|
|
@@ -35,8 +39,9 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
|
|
|
35
39
|
type: "textarea";
|
|
36
40
|
/**
|
|
37
41
|
* (可选)是否禁用
|
|
42
|
+
* @default false
|
|
38
43
|
*/
|
|
39
|
-
disabled?: boolean;
|
|
44
|
+
disabled?: boolean | (() => boolean);
|
|
40
45
|
/**
|
|
41
46
|
* 获取该项的值的回调函数
|
|
42
47
|
*/
|
|
@@ -51,6 +56,7 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
|
|
|
51
56
|
}, value: string): void;
|
|
52
57
|
/**
|
|
53
58
|
* 输入框内的提示
|
|
59
|
+
* @default ""
|
|
54
60
|
*/
|
|
55
|
-
placeholder
|
|
61
|
+
placeholder?: string;
|
|
56
62
|
}
|
|
@@ -4,7 +4,7 @@ export declare const PopsSearchSuggestion: {
|
|
|
4
4
|
/**
|
|
5
5
|
* 当前的环境,可以是document,可以是shadowroot,默认是document
|
|
6
6
|
*/
|
|
7
|
-
selfDocument:
|
|
7
|
+
selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
|
|
8
8
|
$el: {
|
|
9
9
|
/** 根元素 */
|
|
10
10
|
root: HTMLElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PopsSupportAnimDetails, PopsSupportBottomBtnDetails, PopsSupportContentDetails, PopsSupportHeaderTitleDetails, PopsSupportAnimDetailsType, PopsSupportBottomBtnDetailsType, PopsSupportContentDetailsType, PopsSupportHeaderTitleDetailsType } from "../types/main";
|
|
2
2
|
export declare const PopsElementHandler: {
|
|
3
3
|
/**
|
|
4
4
|
* 获取遮罩层HTML
|
|
@@ -16,25 +16,25 @@ export declare const PopsElementHandler: {
|
|
|
16
16
|
* @param bottomBtnHTML
|
|
17
17
|
* @param zIndex
|
|
18
18
|
*/
|
|
19
|
-
getAnimHTML(guid: string, type:
|
|
19
|
+
getAnimHTML(guid: string, type: PopsSupportAnimDetailsType, config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
|
|
20
20
|
/**
|
|
21
21
|
* 获取顶部按钮层HTML
|
|
22
22
|
* @param type
|
|
23
23
|
* @param config
|
|
24
24
|
*/
|
|
25
|
-
getHeaderBtnHTML(type:
|
|
25
|
+
getHeaderBtnHTML(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): string;
|
|
26
26
|
/**
|
|
27
27
|
* 获取底部按钮层HTML
|
|
28
28
|
* @param type
|
|
29
29
|
* @param config
|
|
30
30
|
*/
|
|
31
|
-
getBottomBtnHTML(type:
|
|
31
|
+
getBottomBtnHTML(type: PopsSupportBottomBtnDetailsType, config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">): string;
|
|
32
32
|
/**
|
|
33
33
|
* 获取标题style
|
|
34
34
|
* @param type 弹窗类型
|
|
35
35
|
* @param config 弹窗配置
|
|
36
36
|
*/
|
|
37
|
-
getHeaderStyle(type:
|
|
37
|
+
getHeaderStyle(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): {
|
|
38
38
|
headerStyle: string;
|
|
39
39
|
headerPStyle: string;
|
|
40
40
|
};
|
|
@@ -43,7 +43,7 @@ export declare const PopsElementHandler: {
|
|
|
43
43
|
* @param type 弹窗类型
|
|
44
44
|
* @param config 弹窗配置
|
|
45
45
|
*/
|
|
46
|
-
getContentStyle(type:
|
|
46
|
+
getContentStyle(type: PopsSupportContentDetailsType, config: PopsSupportContentDetails[keyof PopsSupportContentDetails]): {
|
|
47
47
|
contentStyle: string;
|
|
48
48
|
contentPStyle: string;
|
|
49
49
|
};
|
|
@@ -9,7 +9,7 @@ import type { PopsPromptDetails } from "../components/prompt/types/index";
|
|
|
9
9
|
import type { PopsCommonConfig } from "../types/components";
|
|
10
10
|
import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
|
|
11
11
|
import { PopsInstCommonConfig } from "../types/inst";
|
|
12
|
-
import type {
|
|
12
|
+
import type { PopsInstStoreType, PopsType, PopsSupportAnimDetailsType, PopsSupportOnlyDetails } from "../types/main";
|
|
13
13
|
export declare const PopsHandler: {
|
|
14
14
|
/**
|
|
15
15
|
* 创建shadow
|
|
@@ -50,7 +50,7 @@ export declare const PopsHandler: {
|
|
|
50
50
|
* @param animElement
|
|
51
51
|
* @param type
|
|
52
52
|
*/
|
|
53
|
-
handleQueryElement(animElement: HTMLDivElement, type:
|
|
53
|
+
handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimDetailsType): {
|
|
54
54
|
/**
|
|
55
55
|
* 主元素
|
|
56
56
|
*/
|
|
@@ -217,7 +217,7 @@ export declare const PopsHandler: {
|
|
|
217
217
|
* @param type 当前弹窗类型
|
|
218
218
|
* @param config 配置
|
|
219
219
|
*/
|
|
220
|
-
handleOnly<T extends Required<
|
|
220
|
+
handleOnly<T extends Required<PopsSupportOnlyDetails[keyof PopsSupportOnlyDetails]>>(type: PopsType, config: T): T;
|
|
221
221
|
/**
|
|
222
222
|
* 处理把已创建的元素保存到内部环境中
|
|
223
223
|
* @param type 当前弹窗类型
|
|
@@ -21,17 +21,17 @@ export interface PopsTitleConfig {
|
|
|
21
21
|
*/
|
|
22
22
|
text?: string;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* 标题文字的位置
|
|
25
25
|
* @default "left"
|
|
26
26
|
*/
|
|
27
27
|
position?: PopsTextAlign;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* 标题文字是否是html
|
|
30
30
|
* @default false
|
|
31
31
|
*/
|
|
32
32
|
html?: boolean;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* 自定义CSS
|
|
35
35
|
*/
|
|
36
36
|
style?: string;
|
|
37
37
|
};
|
|
@@ -47,12 +47,12 @@ export interface PopsContentConfig {
|
|
|
47
47
|
*/
|
|
48
48
|
text?: string;
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* 内容文字是否是html
|
|
51
51
|
* @default false
|
|
52
52
|
*/
|
|
53
53
|
html?: boolean;
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
55
|
+
* 自定义CSS
|
|
56
56
|
*/
|
|
57
57
|
style?: string;
|
|
58
58
|
};
|
|
@@ -16,12 +16,13 @@ import type { PopsPanelTextAreaDetails } from "../components/panel/types/compone
|
|
|
16
16
|
import type { PopsPromptDetails } from "../components/prompt/types/index";
|
|
17
17
|
import { PopsRightClickMenuDetails } from "../components/rightClickMenu/types";
|
|
18
18
|
import { PopsToolTipDetails } from "../components/tooltip/types/index";
|
|
19
|
+
import type { PopsSearchSuggestionDetails } from "../components/searchSuggestion/types";
|
|
19
20
|
|
|
20
21
|
export interface PopsUtilsOwnObject<V extends any> {
|
|
21
22
|
[key: string]: V | PopsUtilsOwnObject<V>;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
|
-
/** pops
|
|
25
|
+
/** pops所有的类型配置 11个*/
|
|
25
26
|
export interface PopsDetails {
|
|
26
27
|
alert: PopsAlertDetails;
|
|
27
28
|
confirm: PopsConfirmDetails;
|
|
@@ -33,53 +34,55 @@ export interface PopsDetails {
|
|
|
33
34
|
folder: PopsFolderDetails;
|
|
34
35
|
panel: PopsPanelDetails;
|
|
35
36
|
rightClickMenu: PopsRightClickMenuDetails;
|
|
37
|
+
searchSuggestion: PopsSearchSuggestionDetails;
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
/** pops
|
|
40
|
+
/** pops的类型 */
|
|
39
41
|
export type PopsType = keyof PopsDetails;
|
|
40
42
|
|
|
41
|
-
/**
|
|
42
|
-
export type
|
|
43
|
+
/** pops中支持only的配置 */
|
|
44
|
+
export type PopsSupportOnlyDetails = Omit<PopsDetails, "searchSuggestion">;
|
|
45
|
+
|
|
46
|
+
/** 存储实例的类型 */
|
|
47
|
+
export type PopsInstStoreType = keyof Omit<PopsDetails, "searchSuggestion">;
|
|
43
48
|
|
|
44
49
|
/** pops弹窗支持动画元素的配置 8个 */
|
|
45
|
-
export type
|
|
50
|
+
export type PopsSupportAnimDetails = Omit<
|
|
51
|
+
PopsDetails,
|
|
52
|
+
"tooltip" | "rightClickMenu" | "searchSuggestion"
|
|
53
|
+
>;
|
|
46
54
|
|
|
47
55
|
/** pops弹窗支持动画元素的类型 */
|
|
48
|
-
export type
|
|
56
|
+
export type PopsSupportAnimDetailsType = keyof PopsSupportAnimDetails;
|
|
49
57
|
|
|
50
58
|
/** pops弹窗支持标题栏的配置 */
|
|
51
|
-
export
|
|
52
|
-
|
|
53
|
-
confirm
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
drawer: PopsDrawerDetails;
|
|
57
|
-
folder: PopsFolderDetails;
|
|
58
|
-
panel: PopsPanelDetails;
|
|
59
|
-
}
|
|
59
|
+
export type PopsSupportHeaderTitleDetails = Pick<
|
|
60
|
+
PopsDetails,
|
|
61
|
+
"alert" | "confirm" | "prompt" | "iframe" | "drawer" | "folder" | "panel"
|
|
62
|
+
>;
|
|
63
|
+
|
|
60
64
|
/** pops弹窗支持标题栏的类型 */
|
|
61
|
-
export type
|
|
65
|
+
export type PopsSupportHeaderTitleDetailsType =
|
|
66
|
+
keyof PopsSupportHeaderTitleDetails;
|
|
62
67
|
|
|
63
68
|
/** pops支持底部按钮的配置 */
|
|
64
|
-
export
|
|
65
|
-
|
|
66
|
-
confirm
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
69
|
+
export type PopsSupportBottomBtnDetails = Pick<
|
|
70
|
+
PopsDetails,
|
|
71
|
+
"alert" | "confirm" | "prompt" | "drawer"
|
|
72
|
+
>;
|
|
73
|
+
|
|
70
74
|
/** pops支持底部按钮的类型 */
|
|
71
|
-
export type
|
|
75
|
+
export type PopsSupportBottomBtnDetailsType =
|
|
76
|
+
keyof PopsSupportHeaderTitleDetails;
|
|
72
77
|
|
|
73
78
|
/** pops支持中间内容的配置 */
|
|
74
|
-
export
|
|
75
|
-
|
|
76
|
-
confirm
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
loading: PopsLoadingDetails;
|
|
80
|
-
}
|
|
79
|
+
export type PopsSupportContentDetails = Pick<
|
|
80
|
+
PopsDetails,
|
|
81
|
+
"alert" | "confirm" | "prompt" | "drawer" | "loading"
|
|
82
|
+
>;
|
|
83
|
+
|
|
81
84
|
/** pops支持中间内容的类型 */
|
|
82
|
-
export type
|
|
85
|
+
export type PopsSupportContentDetailsType = keyof PopsSupportContentDetails;
|
|
83
86
|
|
|
84
87
|
/** panel的各种类型的配置项 */
|
|
85
88
|
export type PopsPanelFormsTotalDetails =
|
package/package.json
CHANGED
package/src/Pops.ts
CHANGED
|
@@ -13,11 +13,11 @@ export const PopsAlert = {
|
|
|
13
13
|
init(details: PopsAlertDetails) {
|
|
14
14
|
const guid = popsUtils.getRandomGUID();
|
|
15
15
|
// 设置当前类型
|
|
16
|
-
const
|
|
16
|
+
const popsType: PopsType = "alert";
|
|
17
17
|
let config = PopsAlertConfig();
|
|
18
18
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
19
19
|
config = popsUtils.assign(config, details);
|
|
20
|
-
config = PopsHandler.handleOnly(
|
|
20
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
21
21
|
|
|
22
22
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
23
23
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -54,32 +54,32 @@ export const PopsAlert = {
|
|
|
54
54
|
// 先把z-index提取出来
|
|
55
55
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
56
56
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
57
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
58
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
57
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
58
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
59
59
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
60
|
-
|
|
60
|
+
popsType,
|
|
61
61
|
config
|
|
62
62
|
);
|
|
63
63
|
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
64
|
-
|
|
64
|
+
popsType,
|
|
65
65
|
config
|
|
66
66
|
);
|
|
67
67
|
let animHTML = PopsElementHandler.getAnimHTML(
|
|
68
68
|
guid,
|
|
69
|
-
|
|
69
|
+
popsType,
|
|
70
70
|
config,
|
|
71
71
|
/*html*/ `
|
|
72
|
-
<div class="pops-title pops-${
|
|
72
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${
|
|
73
73
|
config.title.position
|
|
74
74
|
};${headerStyle}">${
|
|
75
75
|
config.title.html
|
|
76
76
|
? config.title.text
|
|
77
|
-
: `<p pops class="pops-${
|
|
77
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
|
|
78
78
|
}${headerBtnHTML}</div>
|
|
79
|
-
<div class="pops-content pops-${
|
|
79
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
|
|
80
80
|
config.content.html
|
|
81
81
|
? config.content.text
|
|
82
|
-
: `<p pops class="pops-${
|
|
82
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
|
|
83
83
|
}</div>${bottomBtnHTML}`,
|
|
84
84
|
bottomBtnHTML,
|
|
85
85
|
zIndex
|
|
@@ -94,7 +94,7 @@ export const PopsAlert = {
|
|
|
94
94
|
headerCloseBtnElement: $headerCloseBtn,
|
|
95
95
|
btnOkElement,
|
|
96
96
|
titleElement: $title,
|
|
97
|
-
} = PopsHandler.handleQueryElement($anim,
|
|
97
|
+
} = PopsHandler.handleQueryElement($anim, popsType);
|
|
98
98
|
|
|
99
99
|
/** 遮罩层元素 */
|
|
100
100
|
let $mask: HTMLDivElement | null = null;
|
|
@@ -105,7 +105,7 @@ export const PopsAlert = {
|
|
|
105
105
|
|
|
106
106
|
if (config.mask.enable) {
|
|
107
107
|
let _handleMask_ = PopsHandler.handleMask({
|
|
108
|
-
type:
|
|
108
|
+
type: popsType,
|
|
109
109
|
guid: guid,
|
|
110
110
|
config: config,
|
|
111
111
|
animElement: $anim,
|
|
@@ -119,7 +119,7 @@ export const PopsAlert = {
|
|
|
119
119
|
guid,
|
|
120
120
|
$shadowContainer,
|
|
121
121
|
$shadowRoot,
|
|
122
|
-
|
|
122
|
+
popsType,
|
|
123
123
|
$anim,
|
|
124
124
|
$pops!,
|
|
125
125
|
$mask!,
|
|
@@ -153,7 +153,7 @@ export const PopsAlert = {
|
|
|
153
153
|
$anim.after($mask);
|
|
154
154
|
}
|
|
155
155
|
/* 保存 */
|
|
156
|
-
PopsHandler.handlePush(
|
|
156
|
+
PopsHandler.handlePush(popsType, {
|
|
157
157
|
guid: guid,
|
|
158
158
|
|
|
159
159
|
animElement: $anim,
|
|
@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
|
|
|
2
2
|
import { PopsElementHandler } from "../../handler/PopsElementHandler";
|
|
3
3
|
import { PopsHandler } from "../../handler/PopsHandler";
|
|
4
4
|
import { PopsCSS } from "../../PopsCSS";
|
|
5
|
+
import type { PopsType } from "../../types/main";
|
|
5
6
|
import { popsDOMUtils } from "../../utils/PopsDOMUtils";
|
|
6
7
|
import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
|
|
7
8
|
import { popsUtils } from "../../utils/PopsUtils";
|
|
@@ -12,11 +13,11 @@ export const PopsConfirm = {
|
|
|
12
13
|
init(details: PopsConfirmDetails) {
|
|
13
14
|
const guid = popsUtils.getRandomGUID();
|
|
14
15
|
// 设置当前类型
|
|
15
|
-
const PopsType = "confirm";
|
|
16
|
+
const popsType: PopsType = "confirm";
|
|
16
17
|
let config = PopsConfirmConfig();
|
|
17
18
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
18
19
|
config = popsUtils.assign(config, details);
|
|
19
|
-
config = PopsHandler.handleOnly(
|
|
20
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
20
21
|
|
|
21
22
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
22
23
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -54,32 +55,32 @@ export const PopsConfirm = {
|
|
|
54
55
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
55
56
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
56
57
|
|
|
57
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
58
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
58
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
59
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
59
60
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
60
|
-
|
|
61
|
+
popsType,
|
|
61
62
|
config
|
|
62
63
|
);
|
|
63
64
|
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
64
|
-
|
|
65
|
+
popsType,
|
|
65
66
|
config
|
|
66
67
|
);
|
|
67
68
|
let animHTML = PopsElementHandler.getAnimHTML(
|
|
68
69
|
guid,
|
|
69
|
-
|
|
70
|
+
popsType,
|
|
70
71
|
config,
|
|
71
72
|
/*html*/ `
|
|
72
|
-
<div class="pops-title pops-${
|
|
73
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${
|
|
73
74
|
config.title.position
|
|
74
75
|
};${headerStyle}">${
|
|
75
76
|
config.title.html
|
|
76
77
|
? config.title.text
|
|
77
|
-
: `<p pops class="pops-${
|
|
78
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
|
|
78
79
|
}${headerBtnHTML}</div>
|
|
79
|
-
<div class="pops-content pops-${
|
|
80
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
|
|
80
81
|
config.content.html
|
|
81
82
|
? config.content.text
|
|
82
|
-
: `<p pops class="pops-${
|
|
83
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
|
|
83
84
|
}</div>${bottomBtnHTML}`,
|
|
84
85
|
bottomBtnHTML,
|
|
85
86
|
zIndex
|
|
@@ -95,7 +96,7 @@ export const PopsConfirm = {
|
|
|
95
96
|
btnOkElement: $btnOk,
|
|
96
97
|
btnCancelElement: $btnCancel,
|
|
97
98
|
btnOtherElement: $btnOther,
|
|
98
|
-
} = PopsHandler.handleQueryElement($anim,
|
|
99
|
+
} = PopsHandler.handleQueryElement($anim, popsType);
|
|
99
100
|
/**
|
|
100
101
|
* 遮罩层元素
|
|
101
102
|
*/
|
|
@@ -108,7 +109,7 @@ export const PopsConfirm = {
|
|
|
108
109
|
if (config.mask.enable) {
|
|
109
110
|
// 启用遮罩层
|
|
110
111
|
let _handleMask_ = PopsHandler.handleMask({
|
|
111
|
-
type:
|
|
112
|
+
type: popsType,
|
|
112
113
|
guid: guid,
|
|
113
114
|
config: config,
|
|
114
115
|
animElement: $anim,
|
|
@@ -121,7 +122,7 @@ export const PopsConfirm = {
|
|
|
121
122
|
guid,
|
|
122
123
|
$shadowContainer,
|
|
123
124
|
$shadowRoot,
|
|
124
|
-
|
|
125
|
+
popsType,
|
|
125
126
|
|
|
126
127
|
$anim,
|
|
127
128
|
$pops!,
|
|
@@ -164,7 +165,7 @@ export const PopsConfirm = {
|
|
|
164
165
|
if ($mask != null) {
|
|
165
166
|
$anim.after($mask);
|
|
166
167
|
}
|
|
167
|
-
PopsHandler.handlePush(
|
|
168
|
+
PopsHandler.handlePush(popsType, {
|
|
168
169
|
guid: guid,
|
|
169
170
|
|
|
170
171
|
animElement: $anim,
|