@whitesev/pops 2.6.1 → 3.0.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 +2513 -1534
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +2513 -1534
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +2513 -1534
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +2513 -1534
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +2513 -1534
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +2513 -1534
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/eslint.config.d.mts +2 -0
- package/dist/types/src/Pops.d.ts +449 -103
- package/dist/types/src/PopsCSS.d.ts +3 -1
- package/dist/types/src/PopsIcon.d.ts +1 -1
- package/dist/types/src/PopsInst.d.ts +2 -2
- package/dist/types/src/components/alert/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/alert/index.d.ts +2 -2
- package/dist/types/src/components/alert/types/index.d.ts +4 -4
- package/dist/types/src/components/confirm/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/confirm/index.d.ts +2 -2
- package/dist/types/src/components/confirm/types/index.d.ts +2 -2
- package/dist/types/src/components/drawer/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/drawer/index.d.ts +2 -2
- package/dist/types/src/components/drawer/types/index.d.ts +2 -2
- package/dist/types/src/components/folder/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/folder/index.d.ts +2 -2
- package/dist/types/src/components/folder/types/index.d.ts +31 -7
- package/dist/types/src/components/iframe/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/iframe/index.d.ts +2 -5
- package/dist/types/src/components/iframe/types/index.d.ts +13 -42
- package/dist/types/src/components/loading/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/loading/index.d.ts +2 -2
- package/dist/types/src/components/loading/types/index.d.ts +4 -4
- package/dist/types/src/components/panel/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/panel/handlerComponents.d.ts +988 -49
- package/dist/types/src/components/panel/index.d.ts +2 -2
- package/dist/types/src/components/panel/types/components-button.d.ts +7 -6
- package/dist/types/src/components/panel/types/components-common.d.ts +7 -7
- package/dist/types/src/components/panel/types/components-container.d.ts +24 -0
- package/dist/types/src/components/panel/types/components-deepMenu.d.ts +14 -14
- package/dist/types/src/components/panel/types/components-input.d.ts +46 -21
- package/dist/types/src/components/panel/types/components-own.d.ts +5 -5
- package/dist/types/src/components/panel/types/components-select.d.ts +95 -36
- package/dist/types/src/components/panel/types/components-selectMultiple.d.ts +15 -20
- package/dist/types/src/components/panel/types/components-slider.d.ts +7 -8
- package/dist/types/src/components/panel/types/components-switch.d.ts +6 -6
- package/dist/types/src/components/panel/types/components-textarea.d.ts +6 -6
- package/dist/types/src/components/panel/types/index.d.ts +36 -28
- package/dist/types/src/components/prompt/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/prompt/index.d.ts +2 -2
- package/dist/types/src/components/prompt/types/index.d.ts +4 -3
- package/dist/types/src/components/rightClickMenu/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/rightClickMenu/index.d.ts +29 -27
- package/dist/types/src/components/rightClickMenu/types/index.d.ts +32 -11
- package/dist/types/src/components/searchSuggestion/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/searchSuggestion/index.d.ts +24 -9
- package/dist/types/src/components/searchSuggestion/types/index.d.ts +15 -13
- package/dist/types/src/components/tooltip/defaultConfig.d.ts +2 -0
- package/dist/types/src/components/tooltip/index.d.ts +6 -21
- package/dist/types/src/components/tooltip/types/index.d.ts +8 -6
- package/dist/types/src/config/GlobalConfig.d.ts +3 -3
- package/dist/types/src/handler/PopsElementHandler.d.ts +6 -6
- package/dist/types/src/handler/PopsHandler.d.ts +18 -18
- package/dist/types/src/types/button.d.ts +4 -97
- package/dist/types/src/types/components.d.ts +8 -8
- package/dist/types/src/types/event.d.ts +0 -30
- package/dist/types/src/types/global.d.ts +4 -0
- package/dist/types/src/types/inst.d.ts +5 -5
- package/dist/types/src/types/main.d.ts +35 -80
- package/dist/types/src/types/mask.d.ts +18 -15
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +15 -15
- package/dist/types/src/utils/PopsUtils.d.ts +4 -0
- package/package.json +12 -12
- package/src/Pops.ts +44 -44
- package/src/PopsAnimation.ts +1 -1
- package/src/PopsCSS.ts +4 -1
- package/src/PopsInst.ts +2 -2
- package/src/components/alert/{config.ts → defaultConfig.ts} +7 -7
- package/src/components/alert/index.ts +16 -18
- package/src/components/alert/types/index.ts +4 -4
- package/src/components/confirm/{config.ts → defaultConfig.ts} +11 -11
- package/src/components/confirm/index.ts +11 -13
- package/src/components/confirm/types/index.ts +3 -3
- package/src/components/drawer/{config.ts → defaultConfig.ts} +10 -10
- package/src/components/drawer/index.ts +18 -17
- package/src/components/drawer/types/index.ts +3 -3
- package/src/components/folder/{config.ts → defaultConfig.ts} +22 -18
- package/src/components/folder/index.ts +61 -60
- package/src/components/folder/types/index.ts +31 -18
- package/src/components/iframe/{config.ts → defaultConfig.ts} +2 -2
- package/src/components/iframe/index.ts +24 -29
- package/src/components/iframe/types/index.ts +13 -56
- package/src/components/loading/{config.ts → defaultConfig.ts} +3 -3
- package/src/components/loading/index.ts +13 -11
- package/src/components/loading/types/index.ts +5 -5
- package/src/components/panel/css/components-select.css +84 -0
- package/src/components/panel/defaultConfig.ts +818 -0
- package/src/components/panel/handlerComponents.ts +1431 -762
- package/src/components/panel/index.css +90 -6
- package/src/components/panel/index.ts +15 -28
- package/src/components/panel/types/components-button.ts +7 -6
- package/src/components/panel/types/components-common.ts +7 -7
- package/src/components/panel/types/components-container.ts +25 -0
- package/src/components/panel/types/components-deepMenu.ts +14 -14
- package/src/components/panel/types/components-input.ts +56 -21
- package/src/components/panel/types/components-own.ts +5 -5
- package/src/components/panel/types/components-select.ts +100 -38
- package/src/components/panel/types/components-selectMultiple.ts +16 -22
- package/src/components/panel/types/components-slider.ts +7 -8
- package/src/components/panel/types/components-switch.ts +6 -6
- package/src/components/panel/types/components-textarea.ts +6 -6
- package/src/components/panel/types/index.ts +45 -38
- package/src/components/prompt/{config.ts → defaultConfig.ts} +10 -10
- package/src/components/prompt/index.ts +13 -15
- package/src/components/prompt/types/index.ts +4 -3
- package/src/components/rightClickMenu/{config.ts → defaultConfig.ts} +20 -19
- package/src/components/rightClickMenu/index.ts +125 -108
- package/src/components/rightClickMenu/types/index.ts +36 -14
- package/src/components/searchSuggestion/{config.ts → defaultConfig.ts} +18 -11
- package/src/components/searchSuggestion/index.ts +130 -155
- package/src/components/searchSuggestion/types/index.ts +17 -15
- package/src/components/tooltip/{config.ts → defaultConfig.ts} +5 -6
- package/src/components/tooltip/index.ts +21 -21
- package/src/components/tooltip/types/index.ts +9 -7
- package/src/config/GlobalConfig.ts +2 -2
- package/src/handler/PopsElementHandler.ts +29 -30
- package/src/handler/PopsHandler.ts +43 -43
- package/src/types/button.d.ts +4 -97
- package/src/types/components.d.ts +8 -8
- package/src/types/event.d.ts +0 -30
- package/src/types/global.d.ts +4 -0
- package/src/types/inst.d.ts +5 -5
- package/src/types/main.d.ts +35 -80
- package/src/types/mask.d.ts +18 -15
- package/src/utils/PopsDOMUtils.ts +34 -34
- package/src/utils/PopsInstanceUtils.ts +129 -139
- package/src/utils/PopsUtils.ts +60 -45
- package/dist/types/src/components/alert/config.d.ts +0 -2
- package/dist/types/src/components/confirm/config.d.ts +0 -2
- package/dist/types/src/components/drawer/config.d.ts +0 -2
- package/dist/types/src/components/folder/config.d.ts +0 -2
- package/dist/types/src/components/iframe/config.d.ts +0 -2
- package/dist/types/src/components/loading/config.d.ts +0 -2
- package/dist/types/src/components/panel/config.d.ts +0 -2
- package/dist/types/src/components/panel/types/components-forms.d.ts +0 -23
- package/dist/types/src/components/prompt/config.d.ts +0 -2
- package/dist/types/src/components/rightClickMenu/config.d.ts +0 -2
- package/dist/types/src/components/searchSuggestion/config.d.ts +0 -2
- package/dist/types/src/components/tooltip/config.d.ts +0 -2
- package/src/components/panel/config.ts +0 -530
- package/src/components/panel/types/components-forms.ts +0 -24
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { PopsGeneralConfig } from "../../../types/components";
|
|
2
|
+
import type { PopsPanelGeneralConfig } from "../../panel/types/components-common";
|
|
3
3
|
|
|
4
|
-
export type PopsSearchSuggestionData<T
|
|
4
|
+
export type PopsSearchSuggestionData<T> = {
|
|
5
5
|
/**
|
|
6
6
|
* 值
|
|
7
7
|
*/
|
|
@@ -33,7 +33,7 @@ export type PopsSearchSuggestionData<T = any> = {
|
|
|
33
33
|
/**
|
|
34
34
|
* 当前配置
|
|
35
35
|
*/
|
|
36
|
-
config:
|
|
36
|
+
config: PopsSearchSuggestionConfig<T>
|
|
37
37
|
) => void | boolean | Promise<void | boolean>;
|
|
38
38
|
/**
|
|
39
39
|
* 获取每一项的html,在显示的时候会调用该函数
|
|
@@ -52,7 +52,7 @@ export type PopsSearchSuggestionData<T = any> = {
|
|
|
52
52
|
/**
|
|
53
53
|
* 当前配置
|
|
54
54
|
*/
|
|
55
|
-
config:
|
|
55
|
+
config: PopsSearchSuggestionConfig<T>
|
|
56
56
|
) => HTMLElement | string;
|
|
57
57
|
/**
|
|
58
58
|
* 每一项的点击回调
|
|
@@ -76,8 +76,8 @@ export type PopsSearchSuggestionData<T = any> = {
|
|
|
76
76
|
/**
|
|
77
77
|
* 当前配置
|
|
78
78
|
*/
|
|
79
|
-
config:
|
|
80
|
-
) =>
|
|
79
|
+
config: PopsSearchSuggestionConfig<T>
|
|
80
|
+
) => IPromise<void | boolean>;
|
|
81
81
|
/**
|
|
82
82
|
* 键盘的上下键选择的回调
|
|
83
83
|
*/
|
|
@@ -97,31 +97,33 @@ export type PopsSearchSuggestionData<T = any> = {
|
|
|
97
97
|
/**
|
|
98
98
|
* 当前配置
|
|
99
99
|
*/
|
|
100
|
-
config:
|
|
100
|
+
config: PopsSearchSuggestionConfig<T>
|
|
101
101
|
) => void;
|
|
102
102
|
};
|
|
103
103
|
/**
|
|
104
104
|
* 搜索建议悬浮窗
|
|
105
105
|
* pops.searchSuggestion
|
|
106
106
|
*/
|
|
107
|
-
export interface
|
|
108
|
-
extends Pick<
|
|
107
|
+
export interface PopsSearchSuggestionConfig<T = any>
|
|
108
|
+
extends Pick<PopsGeneralConfig, "useShadowRoot" | "zIndex" | "style"> {
|
|
109
109
|
/**
|
|
110
110
|
* 当前的环境,可以是document,可以是shadowroot,默认是document
|
|
111
|
+
*
|
|
112
|
+
* 用于检测监听全局点击事件
|
|
111
113
|
* @default document
|
|
112
114
|
*/
|
|
113
|
-
selfDocument?: Document | ShadowRoot | (Document | ShadowRoot)[];
|
|
115
|
+
$selfDocument?: Document | ShadowRoot | (Document | ShadowRoot)[];
|
|
114
116
|
/**
|
|
115
117
|
* 目标元素,一般是跟随它的位置变化,监听它的focus/click
|
|
116
118
|
*/
|
|
117
|
-
target: HTMLElement;
|
|
119
|
+
$target: HTMLElement;
|
|
118
120
|
/**
|
|
119
121
|
* 目标input元素,监听它的focus/click/input事件
|
|
120
122
|
*
|
|
121
123
|
* 如果未填,那么自动使用target的值
|
|
122
124
|
* @default config.target
|
|
123
125
|
*/
|
|
124
|
-
inputTarget?: HTMLInputElement | HTMLTextAreaElement;
|
|
126
|
+
$inputTarget?: HTMLInputElement | HTMLTextAreaElement;
|
|
125
127
|
/**
|
|
126
128
|
* 数据
|
|
127
129
|
*/
|
|
@@ -130,7 +132,7 @@ export interface PopsSearchSuggestionDetails<T = any>
|
|
|
130
132
|
* (可选)元素的className,值为空的话就不设置
|
|
131
133
|
* @default ""
|
|
132
134
|
*/
|
|
133
|
-
className?:
|
|
135
|
+
className?: PopsPanelGeneralConfig<any>["className"];
|
|
134
136
|
/**
|
|
135
137
|
* 建议框的position位置
|
|
136
138
|
*
|
|
@@ -235,6 +237,6 @@ export interface PopsSearchSuggestionDetails<T = any>
|
|
|
235
237
|
/**
|
|
236
238
|
* 当前配置
|
|
237
239
|
*/
|
|
238
|
-
config:
|
|
240
|
+
config: PopsSearchSuggestionConfig<T>
|
|
239
241
|
) => Promise<PopsSearchSuggestionData<T>[]> | PopsSearchSuggestionData<T>[];
|
|
240
242
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PopsToolTipConfig } from "./types/index";
|
|
2
2
|
|
|
3
|
-
export const
|
|
4
|
-
// @ts-ignore
|
|
3
|
+
export const PopsTooltipDefaultConfig = (): DeepRequired<PopsToolTipConfig> => {
|
|
5
4
|
return {
|
|
6
5
|
useShadowRoot: true,
|
|
7
|
-
target: null as any,
|
|
6
|
+
$target: null as any,
|
|
8
7
|
content: "默认文字",
|
|
9
8
|
isDiffContent: false,
|
|
10
9
|
position: "top",
|
|
@@ -16,9 +15,9 @@ export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
|
|
|
16
15
|
zIndex: 10000,
|
|
17
16
|
only: false,
|
|
18
17
|
eventOption: {
|
|
18
|
+
once: false,
|
|
19
19
|
passive: false,
|
|
20
20
|
capture: true,
|
|
21
|
-
once: false,
|
|
22
21
|
},
|
|
23
22
|
showBeforeCallBack() {},
|
|
24
23
|
showAfterCallBack() {},
|
|
@@ -30,5 +29,5 @@ export const PopsTooltipConfig = (): DeepRequired<PopsToolTipDetails> => {
|
|
|
30
29
|
otherDistance: 0,
|
|
31
30
|
style: "",
|
|
32
31
|
beforeAppendToPageCallBack() {},
|
|
33
|
-
}
|
|
32
|
+
};
|
|
34
33
|
};
|
|
@@ -5,8 +5,8 @@ import type { PopsType } from "../../types/main";
|
|
|
5
5
|
import { popsDOMUtils } from "../../utils/PopsDOMUtils";
|
|
6
6
|
import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
|
|
7
7
|
import { popsUtils } from "../../utils/PopsUtils";
|
|
8
|
-
import {
|
|
9
|
-
import type {
|
|
8
|
+
import { PopsTooltipDefaultConfig } from "./defaultConfig";
|
|
9
|
+
import type { PopsToolTipConfig } from "./types/index";
|
|
10
10
|
|
|
11
11
|
type ToolTipEventTypeName = "MouseEvent" | "TouchEvent";
|
|
12
12
|
|
|
@@ -19,13 +19,13 @@ export class ToolTip {
|
|
|
19
19
|
$arrow: null as unknown as HTMLElement,
|
|
20
20
|
};
|
|
21
21
|
$data = {
|
|
22
|
-
config: null as any as Required<
|
|
22
|
+
config: null as any as Required<PopsToolTipConfig>,
|
|
23
23
|
guid: null as any as string,
|
|
24
24
|
timeId_close_TouchEvent: <number[]>[],
|
|
25
25
|
timeId_close_MouseEvent: <number[]>[],
|
|
26
26
|
};
|
|
27
27
|
constructor(
|
|
28
|
-
config: Required<
|
|
28
|
+
config: Required<PopsToolTipConfig>,
|
|
29
29
|
guid: string,
|
|
30
30
|
ShadowInfo: {
|
|
31
31
|
$shadowContainer: HTMLDivElement;
|
|
@@ -86,7 +86,7 @@ export class ToolTip {
|
|
|
86
86
|
// 添加z-index
|
|
87
87
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
88
88
|
if (this.$data.config.style != null) {
|
|
89
|
-
|
|
89
|
+
// 添加自定义style
|
|
90
90
|
const cssNode = popsDOMUtils.createElement("style", {
|
|
91
91
|
type: "text/css",
|
|
92
92
|
innerHTML: this.$data.config.style,
|
|
@@ -173,9 +173,9 @@ export class ToolTip {
|
|
|
173
173
|
|
|
174
174
|
const toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
175
175
|
const toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
176
|
-
|
|
176
|
+
// 目标元素的x轴的中间位置
|
|
177
177
|
const targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
|
|
178
|
-
|
|
178
|
+
// 目标元素的Y轴的中间位置
|
|
179
179
|
const targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
|
|
180
180
|
|
|
181
181
|
let mouseX = 0;
|
|
@@ -235,7 +235,7 @@ export class ToolTip {
|
|
|
235
235
|
*/
|
|
236
236
|
changePosition(event?: MouseEvent | TouchEvent | PointerEvent) {
|
|
237
237
|
const positionInfo = this.calcToolTipPosition(
|
|
238
|
-
this.$data.config
|
|
238
|
+
this.$data.config.$target,
|
|
239
239
|
this.$data.config.arrowDistance,
|
|
240
240
|
this.$data.config.otherDistance,
|
|
241
241
|
event
|
|
@@ -348,7 +348,7 @@ export class ToolTip {
|
|
|
348
348
|
*/
|
|
349
349
|
onShowEvent() {
|
|
350
350
|
popsDOMUtils.on(
|
|
351
|
-
this.$data.config
|
|
351
|
+
this.$data.config.$target,
|
|
352
352
|
this.$data.config.triggerShowEventName,
|
|
353
353
|
this.show,
|
|
354
354
|
this.$data.config.eventOption
|
|
@@ -358,7 +358,7 @@ export class ToolTip {
|
|
|
358
358
|
* 取消绑定 显示事件
|
|
359
359
|
*/
|
|
360
360
|
offShowEvent() {
|
|
361
|
-
popsDOMUtils.off(this.$data.config
|
|
361
|
+
popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, {
|
|
362
362
|
capture: true,
|
|
363
363
|
});
|
|
364
364
|
}
|
|
@@ -373,7 +373,7 @@ export class ToolTip {
|
|
|
373
373
|
if (event && event instanceof MouseEvent) {
|
|
374
374
|
const $target = event.composedPath()[0];
|
|
375
375
|
// 如果是目标元素的子元素/tooltip元素的子元素触发的话,那就不管
|
|
376
|
-
if ($target != this.$data.config
|
|
376
|
+
if ($target != this.$data.config.$target && $target != this.$el.$toolTip) {
|
|
377
377
|
return;
|
|
378
378
|
}
|
|
379
379
|
}
|
|
@@ -418,7 +418,7 @@ export class ToolTip {
|
|
|
418
418
|
*/
|
|
419
419
|
onCloseEvent() {
|
|
420
420
|
popsDOMUtils.on(
|
|
421
|
-
this.$data.config
|
|
421
|
+
this.$data.config.$target,
|
|
422
422
|
this.$data.config.triggerCloseEventName,
|
|
423
423
|
this.close,
|
|
424
424
|
this.$data.config.eventOption
|
|
@@ -428,7 +428,7 @@ export class ToolTip {
|
|
|
428
428
|
* 取消绑定 关闭事件
|
|
429
429
|
*/
|
|
430
430
|
offCloseEvent() {
|
|
431
|
-
popsDOMUtils.off(this.$data.config
|
|
431
|
+
popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, {
|
|
432
432
|
capture: true,
|
|
433
433
|
});
|
|
434
434
|
}
|
|
@@ -537,7 +537,7 @@ export class ToolTip {
|
|
|
537
537
|
}
|
|
538
538
|
}
|
|
539
539
|
|
|
540
|
-
export type PopsTooltipResult<T extends
|
|
540
|
+
export type PopsTooltipResult<T extends PopsToolTipConfig> = {
|
|
541
541
|
guid: string;
|
|
542
542
|
config: T;
|
|
543
543
|
$shadowContainer: HTMLDivElement;
|
|
@@ -546,15 +546,15 @@ export type PopsTooltipResult<T extends PopsToolTipDetails> = {
|
|
|
546
546
|
};
|
|
547
547
|
|
|
548
548
|
export const PopsTooltip = {
|
|
549
|
-
init(
|
|
549
|
+
init(__config__: PopsToolTipConfig) {
|
|
550
550
|
const guid = popsUtils.getRandomGUID();
|
|
551
551
|
// 设置当前类型
|
|
552
552
|
const popsType: PopsType = "tooltip";
|
|
553
553
|
|
|
554
|
-
let config =
|
|
554
|
+
let config = PopsTooltipDefaultConfig();
|
|
555
555
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
556
|
-
config = popsUtils.assign(config,
|
|
557
|
-
if (!(config
|
|
556
|
+
config = popsUtils.assign(config, __config__);
|
|
557
|
+
if (!(config.$target instanceof HTMLElement)) {
|
|
558
558
|
throw new TypeError("config.target 必须是HTMLElement类型");
|
|
559
559
|
}
|
|
560
560
|
config = PopsHandler.handleOnly(popsType, config);
|
|
@@ -584,11 +584,11 @@ export const PopsTooltip = {
|
|
|
584
584
|
$shadowRoot,
|
|
585
585
|
});
|
|
586
586
|
if (config.alwaysShow) {
|
|
587
|
-
|
|
588
|
-
|
|
587
|
+
// 总是显示
|
|
588
|
+
// 直接显示
|
|
589
589
|
toolTip.show();
|
|
590
590
|
} else {
|
|
591
|
-
|
|
591
|
+
// 事件触发才显示
|
|
592
592
|
}
|
|
593
593
|
|
|
594
594
|
return {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { PopsGeneralConfig } from "../../../types/components";
|
|
2
|
+
import type { PopsPanelGeneralConfig } from "../../panel/types/components-common";
|
|
3
3
|
|
|
4
4
|
/** tooltip的出现位置 */
|
|
5
5
|
export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow";
|
|
@@ -7,12 +7,12 @@ export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow"
|
|
|
7
7
|
/**
|
|
8
8
|
* pops.tooltip
|
|
9
9
|
*/
|
|
10
|
-
export interface
|
|
11
|
-
extends Pick<
|
|
10
|
+
export interface PopsToolTipConfig
|
|
11
|
+
extends Pick<PopsGeneralConfig, "useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"> {
|
|
12
12
|
/**
|
|
13
13
|
* 目标元素
|
|
14
14
|
*/
|
|
15
|
-
target: HTMLElement;
|
|
15
|
+
$target: HTMLElement;
|
|
16
16
|
/**
|
|
17
17
|
* 显示的文字
|
|
18
18
|
*/
|
|
@@ -36,7 +36,7 @@ export interface PopsToolTipDetails
|
|
|
36
36
|
* + `github-tooltip` github的样式
|
|
37
37
|
* @default ""
|
|
38
38
|
*/
|
|
39
|
-
className?:
|
|
39
|
+
className?: PopsPanelGeneralConfig<any>["className"];
|
|
40
40
|
/**
|
|
41
41
|
* 是否使用fixed定位,false则是absolute定位
|
|
42
42
|
*
|
|
@@ -69,7 +69,9 @@ export interface PopsToolTipDetails
|
|
|
69
69
|
* 监听的事件配置
|
|
70
70
|
*/
|
|
71
71
|
eventOption?: {
|
|
72
|
-
|
|
72
|
+
once?: boolean;
|
|
73
|
+
passive?: boolean;
|
|
74
|
+
capture?: boolean;
|
|
73
75
|
};
|
|
74
76
|
/**
|
|
75
77
|
* 触发显示前的回调
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PopsGeneralConfig, PopsDragConfig } from "../types/components";
|
|
2
2
|
|
|
3
3
|
type EnterReturnType<T> = null | T | (() => T);
|
|
4
4
|
|
|
5
5
|
type GlobalConfigOption = {
|
|
6
6
|
style?: EnterReturnType<string>;
|
|
7
7
|
zIndex?: EnterReturnType<number> | EnterReturnType<string>;
|
|
8
|
-
} & Partial<
|
|
8
|
+
} & Partial<PopsGeneralConfig> &
|
|
9
9
|
Partial<PopsDragConfig>;
|
|
10
10
|
|
|
11
11
|
type ResultGlobalConfigOption<T> = T extends null | undefined ? never : T extends (...args: any) => infer R ? R : T;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
1
|
+
import type { PopsAlertConfig } from "../components/alert/types";
|
|
2
|
+
import type { PopsConfirmConfig } from "../components/confirm/types";
|
|
3
|
+
import type { PopsIframeConfig } from "../components/iframe/types";
|
|
4
4
|
import type { PopsIconType } from "../types/icon";
|
|
5
5
|
import type {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
PopsSupportAnimConfig,
|
|
7
|
+
PopsSupportBottomButtonConfig,
|
|
8
|
+
PopsSupportContentConfig,
|
|
9
|
+
PopsSupportHeaderTitleConfig,
|
|
10
|
+
PopsSupportAnimConfigType,
|
|
11
|
+
PopsSupportBottomButtonConfigType,
|
|
12
|
+
PopsSupportContentConfigType,
|
|
13
|
+
PopsSupportHeaderTitleConfigType,
|
|
14
14
|
} from "../types/main";
|
|
15
15
|
import { PopsIcon } from "../PopsIcon";
|
|
16
16
|
import { popsDOMUtils } from "../utils/PopsDOMUtils";
|
|
@@ -40,13 +40,13 @@ export const PopsElementHandler = {
|
|
|
40
40
|
*/
|
|
41
41
|
createAnim(
|
|
42
42
|
guid: string,
|
|
43
|
-
type:
|
|
44
|
-
config:
|
|
43
|
+
type: PopsSupportAnimConfigType,
|
|
44
|
+
config: PopsSupportAnimConfig[keyof PopsSupportAnimConfig],
|
|
45
45
|
html = "",
|
|
46
46
|
bottomBtnHTML = "",
|
|
47
47
|
zIndex: number
|
|
48
48
|
) {
|
|
49
|
-
const __config = config as
|
|
49
|
+
const __config = config as PopsAlertConfig;
|
|
50
50
|
let popsAnimStyle = "";
|
|
51
51
|
let popsStyle = "";
|
|
52
52
|
const popsPosition = __config.position || "";
|
|
@@ -76,22 +76,22 @@ export const PopsElementHandler = {
|
|
|
76
76
|
* @param config
|
|
77
77
|
*/
|
|
78
78
|
createHeader(
|
|
79
|
-
type:
|
|
80
|
-
config:
|
|
79
|
+
type: PopsSupportHeaderTitleConfigType,
|
|
80
|
+
config: PopsSupportHeaderTitleConfig[keyof PopsSupportHeaderTitleConfig]
|
|
81
81
|
): string {
|
|
82
82
|
if (!config.btn) {
|
|
83
83
|
return "";
|
|
84
84
|
}
|
|
85
|
-
const confirm_config = config as
|
|
85
|
+
const confirm_config = config as PopsConfirmConfig;
|
|
86
86
|
if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
|
|
87
87
|
return "";
|
|
88
88
|
}
|
|
89
89
|
let resultHTML = "";
|
|
90
90
|
// let btnStyle = "";
|
|
91
91
|
let closeHTML = "";
|
|
92
|
-
const iframe_config = config as
|
|
92
|
+
const iframe_config = config as PopsIframeConfig;
|
|
93
93
|
if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
|
|
94
|
-
|
|
94
|
+
// iframe的
|
|
95
95
|
let topRightButtonHTML = "";
|
|
96
96
|
iframe_config.topRightButton.split("|").forEach((item: string) => {
|
|
97
97
|
// 最小化、最大化、窗口化、关闭按钮
|
|
@@ -124,8 +124,8 @@ export const PopsElementHandler = {
|
|
|
124
124
|
* @param config 弹窗配置
|
|
125
125
|
*/
|
|
126
126
|
createHeaderStyle(
|
|
127
|
-
type:
|
|
128
|
-
config:
|
|
127
|
+
type: PopsSupportHeaderTitleConfigType,
|
|
128
|
+
config: PopsSupportHeaderTitleConfig[keyof PopsSupportHeaderTitleConfig]
|
|
129
129
|
) {
|
|
130
130
|
return {
|
|
131
131
|
headerStyle: config?.title?.html ? config?.title?.style || "" : "",
|
|
@@ -138,14 +138,14 @@ export const PopsElementHandler = {
|
|
|
138
138
|
* @param config
|
|
139
139
|
*/
|
|
140
140
|
createBottom(
|
|
141
|
-
type:
|
|
142
|
-
config: Omit<
|
|
141
|
+
type: PopsSupportBottomButtonConfigType,
|
|
142
|
+
config: Omit<PopsSupportBottomButtonConfig[keyof PopsSupportBottomButtonConfig], "content">
|
|
143
143
|
): string {
|
|
144
144
|
if (config.btn == null) {
|
|
145
145
|
// 未设置btn参数
|
|
146
146
|
return "";
|
|
147
147
|
}
|
|
148
|
-
const confirm_config = config as Required<
|
|
148
|
+
const confirm_config = config as Required<PopsConfirmConfig>;
|
|
149
149
|
if (!(config.btn?.ok?.enable || confirm_config.btn?.cancel?.enable || confirm_config.btn?.other?.enable)) {
|
|
150
150
|
// 确定、取消、其它按钮都未启用直接返回
|
|
151
151
|
return "";
|
|
@@ -164,7 +164,7 @@ export const PopsElementHandler = {
|
|
|
164
164
|
btnStyle += "flex-direction: row-reverse;";
|
|
165
165
|
}
|
|
166
166
|
if (config.btn?.ok?.enable) {
|
|
167
|
-
|
|
167
|
+
// 处理确定按钮的尺寸问题
|
|
168
168
|
let okButtonSizeClassName = "";
|
|
169
169
|
if (config.btn.ok.size === "large") {
|
|
170
170
|
okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
|
|
@@ -196,7 +196,7 @@ export const PopsElementHandler = {
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
if (confirm_config.btn?.cancel?.enable) {
|
|
199
|
-
|
|
199
|
+
// 处理取消按钮的尺寸问题
|
|
200
200
|
let cancelButtonSizeClassName = "";
|
|
201
201
|
|
|
202
202
|
if (confirm_config.btn.cancel.size === "large") {
|
|
@@ -229,7 +229,7 @@ export const PopsElementHandler = {
|
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
if (confirm_config.btn?.other?.enable) {
|
|
232
|
-
|
|
232
|
+
// 处理其它按钮的尺寸问题
|
|
233
233
|
let otherButtonSizeClassName = "";
|
|
234
234
|
|
|
235
235
|
if (confirm_config.btn.other.size === "large") {
|
|
@@ -285,12 +285,11 @@ export const PopsElementHandler = {
|
|
|
285
285
|
* @param config 弹窗配置
|
|
286
286
|
*/
|
|
287
287
|
createContentStyle(
|
|
288
|
-
type:
|
|
289
|
-
config:
|
|
288
|
+
type: PopsSupportContentConfigType,
|
|
289
|
+
config: PopsSupportContentConfig[keyof PopsSupportContentConfig]
|
|
290
290
|
) {
|
|
291
291
|
return {
|
|
292
292
|
contentStyle: (config?.content as any)?.html ? config?.content?.style || "" : "",
|
|
293
|
-
|
|
294
293
|
contentPStyle: (config?.content as any)?.html ? "" : config?.content?.style || "",
|
|
295
294
|
};
|
|
296
295
|
},
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import type {
|
|
5
|
-
import type {
|
|
6
|
-
import type {
|
|
7
|
-
import type {
|
|
8
|
-
import type {
|
|
1
|
+
import type { PopsAlertConfig } from "../components/alert/types";
|
|
2
|
+
import type { PopsConfirmConfig } from "../components/confirm/types";
|
|
3
|
+
import type { PopsDrawerConfig } from "../components/drawer/types";
|
|
4
|
+
import type { PopsFolderConfig } from "../components/folder/types";
|
|
5
|
+
import type { PopsIframeConfig } from "../components/iframe/types";
|
|
6
|
+
import type { PopsLoadingConfig } from "../components/loading/types";
|
|
7
|
+
import type { PopsPanelConfig } from "../components/panel/types";
|
|
8
|
+
import type { PopsPromptConfig } from "../components/prompt/types/index";
|
|
9
9
|
import { PopsCore } from "../PopsCore";
|
|
10
10
|
import { PopsAnimation } from "../PopsAnimation";
|
|
11
11
|
import { PopsInstData } from "../PopsInst";
|
|
12
|
-
import type {
|
|
12
|
+
import type { PopsGeneralConfig } from "../types/components";
|
|
13
13
|
import type { PopsEventConfig, PopsHandlerEventConfig } from "../types/event";
|
|
14
|
-
import type {
|
|
15
|
-
import type { PopsInstStoreType, PopsType,
|
|
14
|
+
import type { PopsInstGeneralConfig } from "../types/inst";
|
|
15
|
+
import type { PopsInstStoreType, PopsType, PopsSupportAnimConfigType, PopsSupportOnlyConfig } from "../types/main";
|
|
16
16
|
import { popsDOMUtils } from "../utils/PopsDOMUtils";
|
|
17
17
|
import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
|
|
18
18
|
import { popsUtils } from "../utils/PopsUtils";
|
|
@@ -21,7 +21,7 @@ export const PopsHandler = {
|
|
|
21
21
|
/**
|
|
22
22
|
* 创建shadow
|
|
23
23
|
*/
|
|
24
|
-
handlerShadow(config: Pick<
|
|
24
|
+
handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">) {
|
|
25
25
|
const $shadowContainer = popsDOMUtils.createElement("div", {
|
|
26
26
|
className: "pops-shadow-container",
|
|
27
27
|
});
|
|
@@ -110,12 +110,12 @@ export const PopsHandler = {
|
|
|
110
110
|
type: "alert" | "confirm" | "prompt" | "loading" | "iframe" | "drawer" | "folder" | "panel";
|
|
111
111
|
guid: string;
|
|
112
112
|
config:
|
|
113
|
-
| Required<
|
|
114
|
-
| Required<
|
|
115
|
-
| Required<
|
|
116
|
-
| Required<
|
|
117
|
-
| Required<
|
|
118
|
-
| Required<
|
|
113
|
+
| Required<PopsAlertConfig>
|
|
114
|
+
| Required<PopsLoadingConfig>
|
|
115
|
+
| Required<PopsIframeConfig>
|
|
116
|
+
| Required<PopsDrawerConfig>
|
|
117
|
+
| Required<PopsPanelConfig>
|
|
118
|
+
| Required<PopsFolderConfig>;
|
|
119
119
|
animElement: HTMLElement;
|
|
120
120
|
maskHTML: string;
|
|
121
121
|
}
|
|
@@ -134,10 +134,10 @@ export const PopsHandler = {
|
|
|
134
134
|
const targetInst = PopsInstData[config.type];
|
|
135
135
|
function originalRun() {
|
|
136
136
|
if (config.config.mask!.clickEvent!.toClose) {
|
|
137
|
-
|
|
137
|
+
// 关闭
|
|
138
138
|
return PopsInstanceUtils.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
139
139
|
} else if (config.config.mask!.clickEvent!.toHide) {
|
|
140
|
-
|
|
140
|
+
// 隐藏
|
|
141
141
|
return PopsInstanceUtils.hide(
|
|
142
142
|
config.config,
|
|
143
143
|
config.type,
|
|
@@ -170,20 +170,20 @@ export const PopsHandler = {
|
|
|
170
170
|
element.hasAttribute("anim")
|
|
171
171
|
);
|
|
172
172
|
}
|
|
173
|
-
|
|
173
|
+
// 判断按下的元素是否是pops-anim
|
|
174
174
|
popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], void 0, (event) => {
|
|
175
175
|
const $click = event.composedPath()[0] as HTMLElement;
|
|
176
176
|
isMaskClick = isAnimElement($click);
|
|
177
177
|
});
|
|
178
|
-
|
|
178
|
+
// 如果有动画层,在动画层上监听点击事件
|
|
179
179
|
popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", void 0, (event) => {
|
|
180
180
|
const $click = event.composedPath()[0] as HTMLElement;
|
|
181
181
|
if (isAnimElement($click) && isMaskClick) {
|
|
182
182
|
return clickEvent(event);
|
|
183
183
|
}
|
|
184
184
|
});
|
|
185
|
-
|
|
186
|
-
|
|
185
|
+
// 在遮罩层监听点击事件
|
|
186
|
+
// 如果有动画层,那么该点击事件触发不了
|
|
187
187
|
popsDOMUtils.on<MouseEvent | PointerEvent>(result.maskElement, "click", void 0, (event) => {
|
|
188
188
|
isMaskClick = true;
|
|
189
189
|
clickEvent(event);
|
|
@@ -196,7 +196,7 @@ export const PopsHandler = {
|
|
|
196
196
|
* @param animElement
|
|
197
197
|
* @param type
|
|
198
198
|
*/
|
|
199
|
-
handleQueryElement(animElement: HTMLDivElement, type:
|
|
199
|
+
handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimConfigType) {
|
|
200
200
|
return {
|
|
201
201
|
/**
|
|
202
202
|
* 主元素
|
|
@@ -351,14 +351,14 @@ export const PopsHandler = {
|
|
|
351
351
|
*/
|
|
352
352
|
handleEventConfig(
|
|
353
353
|
config:
|
|
354
|
-
|
|
|
355
|
-
|
|
|
356
|
-
|
|
|
357
|
-
|
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
|
|
|
361
|
-
|
|
|
354
|
+
| PopsAlertConfig
|
|
355
|
+
| PopsDrawerConfig
|
|
356
|
+
| PopsPromptConfig
|
|
357
|
+
| PopsConfirmConfig
|
|
358
|
+
| PopsIframeConfig
|
|
359
|
+
| PopsLoadingConfig
|
|
360
|
+
| PopsPanelConfig
|
|
361
|
+
| PopsFolderConfig,
|
|
362
362
|
guid: string,
|
|
363
363
|
$shadowContainer: HTMLDivElement,
|
|
364
364
|
$shadowRoot: ShadowRoot | HTMLElement,
|
|
@@ -398,14 +398,14 @@ export const PopsHandler = {
|
|
|
398
398
|
*/
|
|
399
399
|
handleLoadingEventConfig(
|
|
400
400
|
config:
|
|
401
|
-
|
|
|
402
|
-
|
|
|
403
|
-
|
|
|
404
|
-
|
|
|
405
|
-
|
|
|
406
|
-
|
|
|
407
|
-
|
|
|
408
|
-
|
|
|
401
|
+
| PopsAlertConfig
|
|
402
|
+
| PopsDrawerConfig
|
|
403
|
+
| PopsPromptConfig
|
|
404
|
+
| PopsConfirmConfig
|
|
405
|
+
| PopsIframeConfig
|
|
406
|
+
| PopsLoadingConfig
|
|
407
|
+
| PopsPanelConfig
|
|
408
|
+
| PopsFolderConfig,
|
|
409
409
|
guid: string,
|
|
410
410
|
mode: "loading",
|
|
411
411
|
$anim: HTMLDivElement,
|
|
@@ -560,7 +560,7 @@ export const PopsHandler = {
|
|
|
560
560
|
* @param type 当前弹窗类型
|
|
561
561
|
* @param config 配置
|
|
562
562
|
*/
|
|
563
|
-
handleOnly<T extends Required<
|
|
563
|
+
handleOnly<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(type: PopsType, config: T): T {
|
|
564
564
|
if (config.only) {
|
|
565
565
|
// .loading
|
|
566
566
|
// .tooltip
|
|
@@ -602,7 +602,7 @@ export const PopsHandler = {
|
|
|
602
602
|
* @param type 当前弹窗类型
|
|
603
603
|
* @param value
|
|
604
604
|
*/
|
|
605
|
-
handlePush(type: PopsInstStoreType, value:
|
|
605
|
+
handlePush(type: PopsInstStoreType, value: PopsInstGeneralConfig) {
|
|
606
606
|
PopsInstData[type].push(value);
|
|
607
607
|
},
|
|
608
608
|
};
|