@whitesev/pops 3.2.0 → 3.2.2
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/README.md +249 -249
- package/dist/index.amd.js +702 -667
- 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 +702 -667
- 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 +702 -667
- 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 +702 -667
- 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 +702 -667
- 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 +702 -667
- 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/src/components/folder/types/index.d.ts +43 -13
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +313 -313
- package/dist/types/src/types/animation.d.ts +19 -19
- package/dist/types/src/types/button.d.ts +94 -94
- package/dist/types/src/types/components.d.ts +211 -211
- package/dist/types/src/types/event.d.ts +43 -43
- package/dist/types/src/types/global.d.ts +31 -31
- package/dist/types/src/types/icon.d.ts +32 -32
- package/dist/types/src/types/inst.d.ts +28 -28
- package/dist/types/src/types/main.d.ts +66 -66
- package/dist/types/src/types/mask.d.ts +52 -52
- package/dist/types/src/types/position.d.ts +60 -60
- package/package.json +27 -25
- package/src/Pops.ts +206 -206
- package/src/PopsAnimation.ts +32 -32
- package/src/PopsCSS.ts +54 -54
- package/src/PopsCore.ts +37 -37
- package/src/PopsIcon.ts +95 -95
- package/src/PopsInst.ts +21 -21
- package/src/components/alert/defaultConfig.ts +62 -62
- package/src/components/alert/index.ts +163 -163
- package/src/components/alert/types/index.ts +23 -23
- package/src/components/confirm/defaultConfig.ts +90 -90
- package/src/components/confirm/index.ts +165 -165
- package/src/components/confirm/types/index.ts +13 -17
- package/src/components/drawer/defaultConfig.ts +89 -89
- package/src/components/drawer/index.css +37 -37
- package/src/components/drawer/index.ts +245 -245
- package/src/components/drawer/types/index.ts +62 -61
- package/src/components/folder/defaultConfig.ts +151 -151
- package/src/components/folder/folderIcon.ts +28 -28
- package/src/components/folder/index.css +303 -303
- package/src/components/folder/index.ts +953 -932
- package/src/components/folder/types/index.ts +143 -110
- package/src/components/iframe/defaultConfig.ts +60 -60
- package/src/components/iframe/index.css +76 -76
- package/src/components/iframe/index.ts +331 -331
- package/src/components/iframe/types/index.ts +96 -96
- package/src/components/loading/defaultConfig.ts +29 -29
- package/src/components/loading/index.css +66 -66
- package/src/components/loading/index.ts +101 -101
- package/src/components/loading/types/index.ts +36 -34
- package/src/components/panel/css/components-select.css +84 -84
- package/src/components/panel/defaultConfig.ts +868 -868
- package/src/components/panel/handlerComponents.ts +3993 -3993
- package/src/components/panel/index.css +1403 -1401
- package/src/components/panel/index.ts +221 -221
- package/src/components/panel/types/components-button.ts +56 -56
- package/src/components/panel/types/components-common.ts +73 -73
- package/src/components/panel/types/components-container.ts +25 -25
- package/src/components/panel/types/components-deepMenu.ts +64 -64
- package/src/components/panel/types/components-input.ts +90 -90
- package/src/components/panel/types/components-own.ts +16 -16
- package/src/components/panel/types/components-select.ts +169 -169
- package/src/components/panel/types/components-selectMultiple.ts +105 -104
- package/src/components/panel/types/components-slider.ts +55 -55
- package/src/components/panel/types/components-switch.ts +33 -33
- package/src/components/panel/types/components-textarea.ts +45 -45
- package/src/components/panel/types/index.ts +244 -244
- package/src/components/prompt/defaultConfig.ts +94 -94
- package/src/components/prompt/index.css +34 -34
- package/src/components/prompt/index.ts +187 -215
- package/src/components/prompt/types/index.ts +57 -56
- package/src/components/rightClickMenu/defaultConfig.ts +103 -103
- package/src/components/rightClickMenu/index.css +115 -115
- package/src/components/rightClickMenu/index.ts +662 -662
- package/src/components/rightClickMenu/types/index.ts +145 -143
- package/src/components/searchSuggestion/defaultConfig.ts +63 -63
- package/src/components/searchSuggestion/index.ts +813 -813
- package/src/components/searchSuggestion/types/index.ts +244 -242
- package/src/components/tooltip/defaultConfig.ts +33 -33
- package/src/components/tooltip/index.css +199 -199
- package/src/components/tooltip/index.ts +617 -617
- package/src/components/tooltip/types/index.ts +123 -121
- package/src/config/CommonCSSClassName.ts +17 -17
- package/src/config/GlobalConfig.ts +63 -63
- package/src/css/animation.css +987 -987
- package/src/css/button.css +551 -551
- package/src/css/common.css +54 -54
- package/src/css/index.css +253 -253
- package/src/css/ninePalaceGridPosition.css +50 -50
- package/src/css/scrollbar.css +22 -22
- package/src/handler/PopsElementHandler.ts +303 -303
- package/src/handler/PopsHandler.ts +611 -611
- package/src/types/PopsDOMUtilsEventType.d.ts +313 -313
- package/src/types/animation.d.ts +19 -19
- package/src/types/button.d.ts +94 -94
- package/src/types/components.d.ts +211 -211
- package/src/types/event.d.ts +43 -43
- package/src/types/global.d.ts +31 -31
- package/src/types/icon.d.ts +32 -32
- package/src/types/inst.d.ts +28 -28
- package/src/types/main.d.ts +66 -66
- package/src/types/mask.d.ts +52 -52
- package/src/types/position.d.ts +60 -60
- package/src/utils/PopsDOMUtils.ts +2483 -2483
- package/src/utils/PopsDOMUtilsEventsConfig.ts +4 -4
- package/src/utils/PopsInstanceUtils.ts +714 -714
- package/src/utils/PopsMathUtils.ts +71 -71
- package/src/utils/PopsSafeUtils.ts +22 -22
- package/src/utils/PopsUtils.ts +421 -421
package/package.json
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@whitesev/pops",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2",
|
|
4
4
|
"description": "弹窗库,包含了alert、confirm、prompt、drawer、loading、iframe、rightClickMenu等组件",
|
|
5
|
-
"
|
|
5
|
+
"keywords": [
|
|
6
|
+
"ScriptCat",
|
|
7
|
+
"TamperMonkey",
|
|
8
|
+
"VioletMonkey",
|
|
9
|
+
"dialog",
|
|
10
|
+
"pops",
|
|
11
|
+
"typescript",
|
|
12
|
+
"弹窗"
|
|
13
|
+
],
|
|
6
14
|
"homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
|
|
7
15
|
"bugs": {
|
|
8
16
|
"url": "https://github.com/WhiteSevs/TamperMonkeyScript/issues"
|
|
9
17
|
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"author": "WhiteSev",
|
|
20
|
+
"files": [
|
|
21
|
+
"dist",
|
|
22
|
+
"src",
|
|
23
|
+
"./index.ts"
|
|
24
|
+
],
|
|
25
|
+
"type": "module",
|
|
10
26
|
"main": "dist/index.cjs.js",
|
|
11
27
|
"module": "dist/index.esm.js",
|
|
12
28
|
"types": "dist/types/index.d.ts",
|
|
@@ -15,33 +31,17 @@
|
|
|
15
31
|
"./dist/*": "./dist/*",
|
|
16
32
|
"./package.json": "./package.json",
|
|
17
33
|
".": {
|
|
34
|
+
"types": "./dist/types/index.d.ts",
|
|
18
35
|
"import": "./dist/index.esm.js",
|
|
19
|
-
"require": "./dist/index.cjs.js"
|
|
20
|
-
"types": "./dist/types/index.d.ts"
|
|
36
|
+
"require": "./dist/index.cjs.js"
|
|
21
37
|
}
|
|
22
38
|
},
|
|
23
|
-
"files": [
|
|
24
|
-
"dist",
|
|
25
|
-
"src",
|
|
26
|
-
"./index.ts"
|
|
27
|
-
],
|
|
28
39
|
"publishConfig": {
|
|
29
40
|
"registry": "https://registry.npmjs.org/"
|
|
30
41
|
},
|
|
31
|
-
"keywords": [
|
|
32
|
-
"typescript",
|
|
33
|
-
"pops",
|
|
34
|
-
"dialog",
|
|
35
|
-
"弹窗",
|
|
36
|
-
"TamperMonkey",
|
|
37
|
-
"VioletMonkey",
|
|
38
|
-
"ScriptCat"
|
|
39
|
-
],
|
|
40
|
-
"author": "WhiteSev",
|
|
41
|
-
"license": "MIT",
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"any-touch": "^2.2.0",
|
|
44
|
-
"worker-timers": "8.0.
|
|
44
|
+
"worker-timers": "8.0.30"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@eslint/js": "^9.39.2",
|
|
@@ -51,12 +51,14 @@
|
|
|
51
51
|
"@rollup/plugin-terser": "^0.4.4",
|
|
52
52
|
"@rollup/plugin-typescript": "12.3.0",
|
|
53
53
|
"browserslist": "^4.28.1",
|
|
54
|
-
"caniuse-lite": "^1.0.
|
|
54
|
+
"caniuse-lite": "^1.0.30001770",
|
|
55
55
|
"eslint": "^9.39.2",
|
|
56
56
|
"eslint-config-prettier": "^10.1.8",
|
|
57
57
|
"eslint-plugin-compat": "^6.0.2",
|
|
58
58
|
"eslint-plugin-prettier": "^5.5.4",
|
|
59
59
|
"globals": "^16.5.0",
|
|
60
|
+
"oxfmt": "^0.32.0",
|
|
61
|
+
"oxlint": "1.46.0",
|
|
60
62
|
"rollup": "^4.54.0",
|
|
61
63
|
"rollup-plugin-clear": "^2.0.7",
|
|
62
64
|
"rollup-plugin-import-css": "^4.1.2",
|
|
@@ -65,9 +67,9 @@
|
|
|
65
67
|
"typescript-eslint": "^8.50.1"
|
|
66
68
|
},
|
|
67
69
|
"scripts": {
|
|
68
|
-
"lint": "
|
|
69
|
-
"lint:fix": "
|
|
70
|
-
"format": "
|
|
70
|
+
"lint": "oxlint .",
|
|
71
|
+
"lint:fix": "oxlint . --fix",
|
|
72
|
+
"format": "oxfmt . --write",
|
|
71
73
|
"dev": "vue-tsc --noEmit && vite --force",
|
|
72
74
|
"build": "pnpm run format && pnpm run lint && rollup -c"
|
|
73
75
|
}
|
package/src/Pops.ts
CHANGED
|
@@ -1,206 +1,206 @@
|
|
|
1
|
-
import { PopsAlert } from "./components/alert";
|
|
2
|
-
import type { PopsAlertConfig } from "./components/alert/types";
|
|
3
|
-
import { PopsConfirm } from "./components/confirm";
|
|
4
|
-
import type { PopsConfirmConfig } from "./components/confirm/types";
|
|
5
|
-
import { PopsDrawer } from "./components/drawer";
|
|
6
|
-
import type { PopsDrawerConfig } from "./components/drawer/types";
|
|
7
|
-
import { PopsFolder } from "./components/folder";
|
|
8
|
-
import type { PopsFolderConfig } from "./components/folder/types";
|
|
9
|
-
import { PopsIframe } from "./components/iframe";
|
|
10
|
-
import type { PopsIframeConfig } from "./components/iframe/types";
|
|
11
|
-
import { PopsLoading } from "./components/loading";
|
|
12
|
-
import type { PopsLoadingConfig } from "./components/loading/types";
|
|
13
|
-
import { PopsPanel } from "./components/panel";
|
|
14
|
-
import { PanelHandlerComponents } from "./components/panel/handlerComponents";
|
|
15
|
-
import type { PopsPanelConfig } from "./components/panel/types";
|
|
16
|
-
import { PopsPrompt } from "./components/prompt";
|
|
17
|
-
import type { PopsPromptConfig } from "./components/prompt/types/index";
|
|
18
|
-
import { PopsRightClickMenu } from "./components/rightClickMenu";
|
|
19
|
-
import type { PopsRightClickMenuConfig } from "./components/rightClickMenu/types";
|
|
20
|
-
import { PopsSearchSuggestion } from "./components/searchSuggestion";
|
|
21
|
-
import type { PopsSearchSuggestionConfig } from "./components/searchSuggestion/types/index";
|
|
22
|
-
import { PopsTooltip } from "./components/tooltip";
|
|
23
|
-
import type { PopsToolTipConfig } from "./components/tooltip/types/index";
|
|
24
|
-
import { GlobalConfig } from "./config/GlobalConfig";
|
|
25
|
-
import { PopsAnimation } from "./PopsAnimation";
|
|
26
|
-
import { PopsCore } from "./PopsCore";
|
|
27
|
-
import { PopsCSS } from "./PopsCSS";
|
|
28
|
-
import { PopsIcon } from "./PopsIcon";
|
|
29
|
-
import { PopsInstData } from "./PopsInst";
|
|
30
|
-
import { popsDOMUtils } from "./utils/PopsDOMUtils";
|
|
31
|
-
import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
|
|
32
|
-
import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
|
|
33
|
-
import { popsUtils } from "./utils/PopsUtils";
|
|
34
|
-
import { version } from "../package.json";
|
|
35
|
-
|
|
36
|
-
class Pops {
|
|
37
|
-
/** 配置 */
|
|
38
|
-
config = {
|
|
39
|
-
/** 版本号 */
|
|
40
|
-
version: version,
|
|
41
|
-
cssText: PopsCSS,
|
|
42
|
-
/** icon图标的svg代码 */
|
|
43
|
-
iconSVG: PopsIcon.$data,
|
|
44
|
-
/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
|
|
45
|
-
animation: PopsAnimation.$data,
|
|
46
|
-
/** 存储已创建的元素 */
|
|
47
|
-
instData: PopsInstData,
|
|
48
|
-
/** 禁止滚动 */
|
|
49
|
-
forbiddenScroll: {
|
|
50
|
-
event(event: Event) {
|
|
51
|
-
return popsDOMUtils.preventEvent(event);
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
/** pops使用的工具类 */
|
|
55
|
-
Utils: popsUtils,
|
|
56
|
-
/** pops使用的DOM工具类 */
|
|
57
|
-
DOMUtils: popsDOMUtils,
|
|
58
|
-
/** pops创建的实例使用的工具类 */
|
|
59
|
-
InstanceUtils: PopsInstanceUtils,
|
|
60
|
-
/** pops处理float类型使用的工具类 */
|
|
61
|
-
MathFloatUtils: PopsMathFloatUtils,
|
|
62
|
-
/** pops.panel中用于处理各个类型的工具 */
|
|
63
|
-
PanelHandlerComponents: PanelHandlerComponents,
|
|
64
|
-
};
|
|
65
|
-
init() {}
|
|
66
|
-
/**
|
|
67
|
-
* 释放原有的pops控制权
|
|
68
|
-
* @example
|
|
69
|
-
* let pops = window.pops.noConflict()
|
|
70
|
-
*/
|
|
71
|
-
noConflict() {
|
|
72
|
-
if (typeof (PopsCore.globalThis as any).pops === "object") {
|
|
73
|
-
popsUtils.delete(PopsCore.globalThis, "pops");
|
|
74
|
-
}
|
|
75
|
-
if (typeof unsafeWindow === "object" && unsafeWindow != null && typeof (unsafeWindow as any).pops === "object") {
|
|
76
|
-
popsUtils.delete(unsafeWindow, "pops");
|
|
77
|
-
}
|
|
78
|
-
return new Pops();
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* 通过navigator.userAgent判断是否是手机访问
|
|
82
|
-
* @param userAgent
|
|
83
|
-
*/
|
|
84
|
-
isPhone(userAgent?: string) {
|
|
85
|
-
return popsUtils.isPhone(userAgent);
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* 为所有弹窗设置全局属性
|
|
89
|
-
*/
|
|
90
|
-
GlobalConfig = GlobalConfig;
|
|
91
|
-
/**
|
|
92
|
-
* 普通信息框
|
|
93
|
-
* @param config 配置
|
|
94
|
-
*/
|
|
95
|
-
alert = (config: PopsAlertConfig) => {
|
|
96
|
-
const dialog = PopsAlert.init(config);
|
|
97
|
-
return dialog;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* 询问框
|
|
102
|
-
* @param config 配置
|
|
103
|
-
*/
|
|
104
|
-
confirm = (config: PopsConfirmConfig) => {
|
|
105
|
-
const dialog = PopsConfirm.init(config);
|
|
106
|
-
return dialog;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* 输入框
|
|
111
|
-
* @param config 配置
|
|
112
|
-
*/
|
|
113
|
-
prompt = (config: PopsPromptConfig) => {
|
|
114
|
-
const dialog = PopsPrompt.init(config);
|
|
115
|
-
return dialog;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* 加载层
|
|
120
|
-
* @param config 配置
|
|
121
|
-
*/
|
|
122
|
-
loading = (config: PopsLoadingConfig) => {
|
|
123
|
-
const popsLoading = PopsLoading.init(config);
|
|
124
|
-
return popsLoading;
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* iframe层
|
|
129
|
-
* @param config 配置
|
|
130
|
-
*/
|
|
131
|
-
iframe = (config: PopsIframeConfig) => {
|
|
132
|
-
const dialog = PopsIframe.init(config);
|
|
133
|
-
return dialog;
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* 提示框
|
|
138
|
-
* @param config 配置
|
|
139
|
-
*/
|
|
140
|
-
tooltip = (config: PopsToolTipConfig) => {
|
|
141
|
-
const popsTooltip = PopsTooltip.init(config);
|
|
142
|
-
return popsTooltip;
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* 抽屉
|
|
147
|
-
* @param config 配置
|
|
148
|
-
*/
|
|
149
|
-
drawer = (config: PopsDrawerConfig) => {
|
|
150
|
-
const dialog = PopsDrawer.init(config);
|
|
151
|
-
return dialog;
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* 文件夹
|
|
156
|
-
* @param config 配置
|
|
157
|
-
*/
|
|
158
|
-
folder = (config: PopsFolderConfig) => {
|
|
159
|
-
const dialog = PopsFolder.init(config);
|
|
160
|
-
return dialog;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
/**
|
|
164
|
-
* 配置面板
|
|
165
|
-
* @param config 配置
|
|
166
|
-
*/
|
|
167
|
-
panel = (config: PopsPanelConfig) => {
|
|
168
|
-
const dialog = PopsPanel.init(config);
|
|
169
|
-
return dialog;
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* 右键菜单
|
|
174
|
-
* @param config 配置
|
|
175
|
-
*/
|
|
176
|
-
rightClickMenu = (config: PopsRightClickMenuConfig) => {
|
|
177
|
-
const popsRightClickMenu = PopsRightClickMenu.init(config);
|
|
178
|
-
return popsRightClickMenu;
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* 搜索建议
|
|
183
|
-
*
|
|
184
|
-
* 注意:调用后需要主动调用.init()和.setAllEvent()进行初始化
|
|
185
|
-
* @param config 配置
|
|
186
|
-
* @example
|
|
187
|
-
* let $input = document.querySelector("#input");
|
|
188
|
-
* let searchSuggestion = pops.searchSuggestion({
|
|
189
|
-
* target: $input,
|
|
190
|
-
* inputTarget: $input,
|
|
191
|
-
* getItemHTML: function (item) {
|
|
192
|
-
* return item.value;
|
|
193
|
-
* }
|
|
194
|
-
* });
|
|
195
|
-
* searchSuggestion.init();
|
|
196
|
-
* searchSuggestion.setAllEvent();
|
|
197
|
-
*/
|
|
198
|
-
searchSuggestion = <T = any>(config: PopsSearchSuggestionConfig<T>) => {
|
|
199
|
-
const popsSearchSuggestion = PopsSearchSuggestion.init<T>(config);
|
|
200
|
-
return popsSearchSuggestion;
|
|
201
|
-
};
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
const pops = new Pops();
|
|
205
|
-
|
|
206
|
-
export { pops };
|
|
1
|
+
import { PopsAlert } from "./components/alert";
|
|
2
|
+
import type { PopsAlertConfig } from "./components/alert/types";
|
|
3
|
+
import { PopsConfirm } from "./components/confirm";
|
|
4
|
+
import type { PopsConfirmConfig } from "./components/confirm/types";
|
|
5
|
+
import { PopsDrawer } from "./components/drawer";
|
|
6
|
+
import type { PopsDrawerConfig } from "./components/drawer/types";
|
|
7
|
+
import { PopsFolder } from "./components/folder";
|
|
8
|
+
import type { PopsFolderConfig } from "./components/folder/types";
|
|
9
|
+
import { PopsIframe } from "./components/iframe";
|
|
10
|
+
import type { PopsIframeConfig } from "./components/iframe/types";
|
|
11
|
+
import { PopsLoading } from "./components/loading";
|
|
12
|
+
import type { PopsLoadingConfig } from "./components/loading/types";
|
|
13
|
+
import { PopsPanel } from "./components/panel";
|
|
14
|
+
import { PanelHandlerComponents } from "./components/panel/handlerComponents";
|
|
15
|
+
import type { PopsPanelConfig } from "./components/panel/types";
|
|
16
|
+
import { PopsPrompt } from "./components/prompt";
|
|
17
|
+
import type { PopsPromptConfig } from "./components/prompt/types/index";
|
|
18
|
+
import { PopsRightClickMenu } from "./components/rightClickMenu";
|
|
19
|
+
import type { PopsRightClickMenuConfig } from "./components/rightClickMenu/types";
|
|
20
|
+
import { PopsSearchSuggestion } from "./components/searchSuggestion";
|
|
21
|
+
import type { PopsSearchSuggestionConfig } from "./components/searchSuggestion/types/index";
|
|
22
|
+
import { PopsTooltip } from "./components/tooltip";
|
|
23
|
+
import type { PopsToolTipConfig } from "./components/tooltip/types/index";
|
|
24
|
+
import { GlobalConfig } from "./config/GlobalConfig";
|
|
25
|
+
import { PopsAnimation } from "./PopsAnimation";
|
|
26
|
+
import { PopsCore } from "./PopsCore";
|
|
27
|
+
import { PopsCSS } from "./PopsCSS";
|
|
28
|
+
import { PopsIcon } from "./PopsIcon";
|
|
29
|
+
import { PopsInstData } from "./PopsInst";
|
|
30
|
+
import { popsDOMUtils } from "./utils/PopsDOMUtils";
|
|
31
|
+
import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
|
|
32
|
+
import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
|
|
33
|
+
import { popsUtils } from "./utils/PopsUtils";
|
|
34
|
+
import { version } from "../package.json";
|
|
35
|
+
|
|
36
|
+
class Pops {
|
|
37
|
+
/** 配置 */
|
|
38
|
+
config = {
|
|
39
|
+
/** 版本号 */
|
|
40
|
+
version: version,
|
|
41
|
+
cssText: PopsCSS,
|
|
42
|
+
/** icon图标的svg代码 */
|
|
43
|
+
iconSVG: PopsIcon.$data,
|
|
44
|
+
/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
|
|
45
|
+
animation: PopsAnimation.$data,
|
|
46
|
+
/** 存储已创建的元素 */
|
|
47
|
+
instData: PopsInstData,
|
|
48
|
+
/** 禁止滚动 */
|
|
49
|
+
forbiddenScroll: {
|
|
50
|
+
event(event: Event) {
|
|
51
|
+
return popsDOMUtils.preventEvent(event);
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
/** pops使用的工具类 */
|
|
55
|
+
Utils: popsUtils,
|
|
56
|
+
/** pops使用的DOM工具类 */
|
|
57
|
+
DOMUtils: popsDOMUtils,
|
|
58
|
+
/** pops创建的实例使用的工具类 */
|
|
59
|
+
InstanceUtils: PopsInstanceUtils,
|
|
60
|
+
/** pops处理float类型使用的工具类 */
|
|
61
|
+
MathFloatUtils: PopsMathFloatUtils,
|
|
62
|
+
/** pops.panel中用于处理各个类型的工具 */
|
|
63
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
64
|
+
};
|
|
65
|
+
init() {}
|
|
66
|
+
/**
|
|
67
|
+
* 释放原有的pops控制权
|
|
68
|
+
* @example
|
|
69
|
+
* let pops = window.pops.noConflict()
|
|
70
|
+
*/
|
|
71
|
+
noConflict() {
|
|
72
|
+
if (typeof (PopsCore.globalThis as any).pops === "object") {
|
|
73
|
+
popsUtils.delete(PopsCore.globalThis, "pops");
|
|
74
|
+
}
|
|
75
|
+
if (typeof unsafeWindow === "object" && unsafeWindow != null && typeof (unsafeWindow as any).pops === "object") {
|
|
76
|
+
popsUtils.delete(unsafeWindow, "pops");
|
|
77
|
+
}
|
|
78
|
+
return new Pops();
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* 通过navigator.userAgent判断是否是手机访问
|
|
82
|
+
* @param userAgent
|
|
83
|
+
*/
|
|
84
|
+
isPhone(userAgent?: string) {
|
|
85
|
+
return popsUtils.isPhone(userAgent);
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* 为所有弹窗设置全局属性
|
|
89
|
+
*/
|
|
90
|
+
GlobalConfig = GlobalConfig;
|
|
91
|
+
/**
|
|
92
|
+
* 普通信息框
|
|
93
|
+
* @param config 配置
|
|
94
|
+
*/
|
|
95
|
+
alert = (config: PopsAlertConfig) => {
|
|
96
|
+
const dialog = PopsAlert.init(config);
|
|
97
|
+
return dialog;
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* 询问框
|
|
102
|
+
* @param config 配置
|
|
103
|
+
*/
|
|
104
|
+
confirm = (config: PopsConfirmConfig) => {
|
|
105
|
+
const dialog = PopsConfirm.init(config);
|
|
106
|
+
return dialog;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* 输入框
|
|
111
|
+
* @param config 配置
|
|
112
|
+
*/
|
|
113
|
+
prompt = (config: PopsPromptConfig) => {
|
|
114
|
+
const dialog = PopsPrompt.init(config);
|
|
115
|
+
return dialog;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* 加载层
|
|
120
|
+
* @param config 配置
|
|
121
|
+
*/
|
|
122
|
+
loading = (config: PopsLoadingConfig) => {
|
|
123
|
+
const popsLoading = PopsLoading.init(config);
|
|
124
|
+
return popsLoading;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* iframe层
|
|
129
|
+
* @param config 配置
|
|
130
|
+
*/
|
|
131
|
+
iframe = (config: PopsIframeConfig) => {
|
|
132
|
+
const dialog = PopsIframe.init(config);
|
|
133
|
+
return dialog;
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* 提示框
|
|
138
|
+
* @param config 配置
|
|
139
|
+
*/
|
|
140
|
+
tooltip = (config: PopsToolTipConfig) => {
|
|
141
|
+
const popsTooltip = PopsTooltip.init(config);
|
|
142
|
+
return popsTooltip;
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* 抽屉
|
|
147
|
+
* @param config 配置
|
|
148
|
+
*/
|
|
149
|
+
drawer = (config: PopsDrawerConfig) => {
|
|
150
|
+
const dialog = PopsDrawer.init(config);
|
|
151
|
+
return dialog;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* 文件夹
|
|
156
|
+
* @param config 配置
|
|
157
|
+
*/
|
|
158
|
+
folder = (config: PopsFolderConfig) => {
|
|
159
|
+
const dialog = PopsFolder.init(config);
|
|
160
|
+
return dialog;
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* 配置面板
|
|
165
|
+
* @param config 配置
|
|
166
|
+
*/
|
|
167
|
+
panel = (config: PopsPanelConfig) => {
|
|
168
|
+
const dialog = PopsPanel.init(config);
|
|
169
|
+
return dialog;
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* 右键菜单
|
|
174
|
+
* @param config 配置
|
|
175
|
+
*/
|
|
176
|
+
rightClickMenu = (config: PopsRightClickMenuConfig) => {
|
|
177
|
+
const popsRightClickMenu = PopsRightClickMenu.init(config);
|
|
178
|
+
return popsRightClickMenu;
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* 搜索建议
|
|
183
|
+
*
|
|
184
|
+
* 注意:调用后需要主动调用.init()和.setAllEvent()进行初始化
|
|
185
|
+
* @param config 配置
|
|
186
|
+
* @example
|
|
187
|
+
* let $input = document.querySelector("#input");
|
|
188
|
+
* let searchSuggestion = pops.searchSuggestion({
|
|
189
|
+
* target: $input,
|
|
190
|
+
* inputTarget: $input,
|
|
191
|
+
* getItemHTML: function (item) {
|
|
192
|
+
* return item.value;
|
|
193
|
+
* }
|
|
194
|
+
* });
|
|
195
|
+
* searchSuggestion.init();
|
|
196
|
+
* searchSuggestion.setAllEvent();
|
|
197
|
+
*/
|
|
198
|
+
searchSuggestion = <T = any>(config: PopsSearchSuggestionConfig<T>) => {
|
|
199
|
+
const popsSearchSuggestion = PopsSearchSuggestion.init<T>(config);
|
|
200
|
+
return popsSearchSuggestion;
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
const pops = new Pops();
|
|
205
|
+
|
|
206
|
+
export { pops };
|
package/src/PopsAnimation.ts
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { PopsCSS } from "./PopsCSS";
|
|
2
|
-
import { popsDOMUtils } from "./utils/PopsDOMUtils";
|
|
3
|
-
import { popsUtils } from "./utils/PopsUtils";
|
|
4
|
-
|
|
5
|
-
export const PopsAnimation = {
|
|
6
|
-
$data: {} as { [key: string]: CSSKeyframesRule },
|
|
7
|
-
$flag: {
|
|
8
|
-
/** 是否初始化 */
|
|
9
|
-
isInit: false,
|
|
10
|
-
},
|
|
11
|
-
init() {
|
|
12
|
-
if (!this.$flag.isInit) {
|
|
13
|
-
this.$flag.isInit = true;
|
|
14
|
-
// 处理获取当前所有的动画名
|
|
15
|
-
const $style = popsDOMUtils.createElement("style", {
|
|
16
|
-
innerHTML: PopsCSS.anim,
|
|
17
|
-
});
|
|
18
|
-
popsDOMUtils.appendHead($style);
|
|
19
|
-
this.$data = null as any;
|
|
20
|
-
this.$data = popsDOMUtils.getKeyFrames($style.sheet!);
|
|
21
|
-
popsUtils.setTimeout(() => {
|
|
22
|
-
$style.remove();
|
|
23
|
-
}, 50);
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
/**
|
|
27
|
-
* 判断是否存在某个动画名
|
|
28
|
-
*/
|
|
29
|
-
hasAnim(name: string) {
|
|
30
|
-
return Object.prototype.hasOwnProperty.call(this.$data, name);
|
|
31
|
-
},
|
|
32
|
-
};
|
|
1
|
+
import { PopsCSS } from "./PopsCSS";
|
|
2
|
+
import { popsDOMUtils } from "./utils/PopsDOMUtils";
|
|
3
|
+
import { popsUtils } from "./utils/PopsUtils";
|
|
4
|
+
|
|
5
|
+
export const PopsAnimation = {
|
|
6
|
+
$data: {} as { [key: string]: CSSKeyframesRule },
|
|
7
|
+
$flag: {
|
|
8
|
+
/** 是否初始化 */
|
|
9
|
+
isInit: false,
|
|
10
|
+
},
|
|
11
|
+
init() {
|
|
12
|
+
if (!this.$flag.isInit) {
|
|
13
|
+
this.$flag.isInit = true;
|
|
14
|
+
// 处理获取当前所有的动画名
|
|
15
|
+
const $style = popsDOMUtils.createElement("style", {
|
|
16
|
+
innerHTML: PopsCSS.anim,
|
|
17
|
+
});
|
|
18
|
+
popsDOMUtils.appendHead($style);
|
|
19
|
+
this.$data = null as any;
|
|
20
|
+
this.$data = popsDOMUtils.getKeyFrames($style.sheet!);
|
|
21
|
+
popsUtils.setTimeout(() => {
|
|
22
|
+
$style.remove();
|
|
23
|
+
}, 50);
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
/**
|
|
27
|
+
* 判断是否存在某个动画名
|
|
28
|
+
*/
|
|
29
|
+
hasAnim(name: string) {
|
|
30
|
+
return Object.prototype.hasOwnProperty.call(this.$data, name);
|
|
31
|
+
},
|
|
32
|
+
};
|