@whitesev/pops 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/index.amd.js +217 -328
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +217 -328
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +217 -328
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +217 -328
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +217 -328
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +217 -328
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +3 -3
  14. package/dist/types/src/components/searchSuggestion/indexType.d.ts +1 -1
  15. package/dist/types/src/handler/PopsElementHandler.d.ts +4 -4
  16. package/dist/types/src/types/event.d.ts +3 -3
  17. package/dist/types/src/types/mask.d.ts +1 -1
  18. package/dist/types/src/utils/PopsInstanceUtils.d.ts +3 -3
  19. package/package.json +1 -1
  20. package/src/Pops.ts +1 -1
  21. package/src/components/alert/index.ts +13 -20
  22. package/src/components/confirm/index.ts +10 -20
  23. package/src/components/drawer/index.ts +11 -26
  24. package/src/components/folder/index.ts +11 -20
  25. package/src/components/iframe/index.ts +14 -23
  26. package/src/components/loading/index.ts +10 -9
  27. package/src/components/panel/PanelHandleContentDetails.ts +14 -36
  28. package/src/components/panel/index.ts +7 -11
  29. package/src/components/prompt/index.ts +16 -23
  30. package/src/components/rightClickMenu/index.ts +9 -7
  31. package/src/components/searchSuggestion/index.ts +8 -13
  32. package/src/components/searchSuggestion/indexType.ts +1 -1
  33. package/src/handler/PopsElementHandler.ts +33 -72
  34. package/src/handler/PopsHandler.ts +9 -11
  35. package/src/types/event.d.ts +3 -3
  36. package/src/types/mask.d.ts +1 -1
  37. package/src/utils/PopsDOMUtils.ts +21 -19
  38. package/src/utils/PopsInstanceUtils.ts +120 -96
package/dist/types/src/Pops.d.ts CHANGED
@@ -158,9 +158,9 @@ declare class Pops {
158
158
  getMaxZIndex(deviation?: number): number;
159
159
  getKeyFrames(sheet: CSSStyleSheet): {};
160
160
  removeInstance(moreLayerConfigList: PopsLayerCommonConfig[][], guid: string, isAll?: boolean): PopsLayerCommonConfig[][];
161
- hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
162
- show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
163
- close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): void;
161
+ hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
162
+ show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
163
+ close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
164
164
  drag(moveElement: HTMLElement, options: {
165
165
  dragElement: HTMLElement;
166
166
  limit: boolean;
package/dist/types/src/components/searchSuggestion/indexType.d.ts CHANGED
@@ -40,7 +40,7 @@ export interface PopsSearchSuggestionDetails<T = any> extends Pick<PopsCommonCon
40
40
  */
41
41
  className?: string;
42
42
  /**
43
- * position是否使用absolut
43
+ * position是否使用absolut，否则是relative
44
44
  * @default true
45
45
  */
46
46
  isAbsolute?: boolean;
package/dist/types/src/handler/PopsElementHandler.d.ts CHANGED
@@ -31,8 +31,8 @@ export declare const PopsElementHandler: {
31
31
  getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">): string;
32
32
  /**
33
33
  * 获取标题style
34
- * @param type
35
- * @param config
34
+ * @param type 弹窗类型
35
+ * @param config 弹窗配置
36
36
  */
37
37
  getHeaderStyle(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): {
38
38
  headerStyle: string;
@@ -40,8 +40,8 @@ export declare const PopsElementHandler: {
40
40
  };
41
41
  /**
42
42
  * 获取内容style
43
- * @param type
44
- * @param config
43
+ * @param type 弹窗类型
44
+ * @param config 弹窗配置
45
45
  */
46
46
  getContentStyle(type: PopsTypeSupportContent, config: PopsSupportContent[keyof PopsSupportContent]): {
47
47
  contentStyle: string;
package/dist/types/src/types/event.d.ts CHANGED
@@ -48,9 +48,9 @@ export interface PopsEventDetails {
48
48
  /** 当前弹窗类型 */
49
49
  mode: mode;
50
50
  guid: guid;
51
- close: () => void;
52
- hide: () => void;
53
- show: () => void;
51
+ close: () => Promise<void>;
52
+ hide: () => Promise<void>;
53
+ show: () => Promise<void>;
54
54
  }
55
55
 
56
56
  /**
package/dist/types/src/types/mask.d.ts CHANGED
@@ -26,7 +26,7 @@ export interface PopsMaskDetails {
26
26
  */
27
27
  clickCallBack?:
28
28
  | ((
29
- originalRun: () => void,
29
+ originalRun: () => void | Promise<void>,
30
30
  config:
31
31
  | PopsAlertDetails
32
32
  | PopsDrawerDetails
package/dist/types/src/utils/PopsInstanceUtils.d.ts CHANGED
@@ -64,7 +64,7 @@ export declare const PopsInstanceUtils: {
64
64
  * @param animElement
65
65
  * @param maskElement
66
66
  */
67
- hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
67
+ hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
68
68
  /**
69
69
  * 显示
70
70
  * @param popsType
@@ -74,7 +74,7 @@ export declare const PopsInstanceUtils: {
74
74
  * @param animElement
75
75
  * @param maskElement
76
76
  */
77
- show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;
77
+ show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
78
78
  /**
79
79
  * 关闭
80
80
  * @param popsType
@@ -83,7 +83,7 @@ export declare const PopsInstanceUtils: {
83
83
  * @param config
84
84
  * @param animElement
85
85
  */
86
- close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): void;
86
+ close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
87
87
  /**
88
88
  * 拖拽元素
89
89
  * 说明：
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whitesev/pops",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "弹窗库",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/Pops.ts CHANGED
@@ -84,7 +84,7 @@ class Pops {
84
84
  /** 配置 */
85
85
  config = {
86
86
  /** 版本号 */
87
- version: "2025.3.2",
87
+ version: "2025.5.12",
88
88
  cssText: {
89
89
  /** 主CSS */
90
90
  index: indexCSS,
package/src/components/alert/index.ts CHANGED
@@ -2,11 +2,11 @@ import { GlobalConfig } from "../../GlobalConfig";
2
2
  import { PopsElementHandler } from "../../handler/PopsElementHandler";
3
3
  import { PopsHandler } from "../../handler/PopsHandler";
4
4
  import { pops } from "../../Pops";
5
- import type { PopsMode } from "../../types/main";
6
5
  import { popsDOMUtils } from "../../utils/PopsDOMUtils";
7
6
  import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
8
7
  import { popsUtils } from "../../utils/PopsUtils";
9
8
  import { PopsAlertConfig } from "./config";
9
+ import type { PopsMode } from "../../types/main";
10
10
  import type { PopsAlertDetails } from "./indexType";
11
11
 
12
12
  export class PopsAlert {
@@ -48,25 +48,18 @@ export class PopsAlert {
48
48
  PopsType,
49
49
  config,
50
50
  /*html*/ `
51
- <div
52
- class="pops-alert-title"
53
- style="text-align: ${config.title.position};
54
- ${headerStyle}">
55
- ${
56
- config.title.html
57
- ? config.title.text
58
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`
59
- }
60
- ${headerBtnHTML}
61
- </div>
62
- <div class="pops-alert-content" style="${contentStyle}">
63
- ${
64
- config.content.html
65
- ? config.content.text
66
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`
67
- }
68
- </div>
69
- ${bottomBtnHTML}`,
51
+ <div class="pops-alert-title" style="text-align: ${
52
+ config.title.position
53
+ };${headerStyle}">${
54
+ config.title.html
55
+ ? config.title.text
56
+ : `<p pops style="${headerPStyle}">${config.title.text}</p>`
57
+ }${headerBtnHTML}</div>
58
+ <div class="pops-alert-content" style="${contentStyle}">${
59
+ config.content.html
60
+ ? config.content.text
61
+ : `<p pops style="${contentPStyle}">${config.content.text}</p>`
62
+ }</div>${bottomBtnHTML}`,
70
63
  bottomBtnHTML,
71
64
  zIndex
72
65
  );
package/src/components/confirm/index.ts CHANGED
@@ -50,26 +50,16 @@ export class PopsConfirm {
50
50
  /*html*/ `
51
51
  <div class="pops-confirm-title" style="text-align: ${
52
52
  config.title.position
53
- };${headerStyle}">
54
- ${
55
- config.title.html
56
- ? config.title.text
57
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`
58
- }
59
- ${headerBtnHTML}
60
- </div>
61
- <div class="pops-confirm-content" style="${contentStyle}">
62
- ${
63
- config.content.html
64
- ? config.content.text
65
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`
66
- }
67
-
68
- </div>
69
-
70
-
71
- ${bottomBtnHTML}
72
- `,
53
+ };${headerStyle}">${
54
+ config.title.html
55
+ ? config.title.text
56
+ : `<p pops style="${headerPStyle}">${config.title.text}</p>`
57
+ }${headerBtnHTML}</div>
58
+ <div class="pops-confirm-content" style="${contentStyle}">${
59
+ config.content.html
60
+ ? config.content.text
61
+ : `<p pops style="${contentPStyle}">${config.content.text}</p>`
62
+ }</div>${bottomBtnHTML}`,
73
63
  bottomBtnHTML,
74
64
  zIndex
75
65
  );
package/src/components/drawer/index.ts CHANGED
@@ -49,34 +49,19 @@ export class PopsDrawer {
49
49
  /*html*/ `
50
50
  ${
51
51
  config.title.enable
52
- ? `
53
- <div class="pops-${PopsType}-title" style="${headerStyle}">
54
- ${
55
- config.title.html
56
- ? config.title.text
57
- : `<p
58
- pops
59
- style="
60
- width: 100%;
61
- text-align: ${config.title.position};
62
- ${headerPStyle}">${config.title.text}</p>`
63
- }
64
- ${headerBtnHTML}
65
- </div>
66
- `
52
+ ? /*html*/ `
53
+ <div class="pops-${PopsType}-title" style="${headerStyle}">${
54
+ config.title.html
55
+ ? config.title.text
56
+ : /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
57
+ }${headerBtnHTML}</div>`
67
58
  : ""
68
59
  }
69
-
70
- <div class="pops-${PopsType}-content" style="${contentStyle}">
71
- ${
72
- config.content.html
73
- ? config.content.text
74
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`
75
- }
76
- </div>
77
-
78
- ${bottomBtnHTML}
79
- `,
60
+ <div class="pops-${PopsType}-content" style="${contentStyle}">${
61
+ config.content.html
62
+ ? config.content.text
63
+ : `<p pops style="${contentPStyle}">${config.content.text}</p>`
64
+ }</div>${bottomBtnHTML}`,
80
65
  bottomBtnHTML,
81
66
  zIndex
82
67
  );
package/src/components/folder/index.ts CHANGED
@@ -120,20 +120,17 @@ export class PopsFolder {
120
120
  guid,
121
121
  PopsType,
122
122
  config,
123
- `
123
+ /*html*/ `
124
124
  <div class="pops-folder-title" style="text-align: ${
125
125
  config.title.position
126
- };${headerStyle}">
127
- ${
128
- config.title.html
129
- ? config.title.text
130
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`
131
- }
132
- ${headerBtnHTML}
133
- </div>
134
- <div class="pops-folder-content ${
135
- pops.isPhone() ? "pops-mobile-folder-content" : ""
136
- }">
126
+ };${headerStyle}">${
127
+ config.title.html
128
+ ? config.title.text
129
+ : `<p pops style="${headerPStyle}">${config.title.text}</p>`
130
+ }${headerBtnHTML}</div>
131
+ <div class="pops-folder-content ${
132
+ pops.isPhone() ? "pops-mobile-folder-content" : ""
133
+ }">
137
134
  <div class="pops-folder-list">
138
135
  <div class="pops-folder-file-list-breadcrumb">
139
136
  <div class="pops-folder-file-list-breadcrumb-primary">
@@ -145,7 +142,6 @@ export class PopsFolder {
145
142
  <div class="pops-folder-list-table__header-div">
146
143
  <table class="pops-folder-list-table__header">
147
144
  <colgroup>
148
- <!-- <col width="8%"> --!>
149
145
  <col width="52%">
150
146
  <col width="24%">
151
147
  <col width="16%">
@@ -216,7 +212,6 @@ export class PopsFolder {
216
212
  <div class="pops-folder-list-table__body-div">
217
213
  <table class="pops-folder-list-table__body">
218
214
  <colgroup>
219
- <!-- <col width="8%"> --!>
220
215
  ${
221
216
  pops.isPhone()
222
217
  ? `<col width="100%">`
@@ -233,9 +228,7 @@ export class PopsFolder {
233
228
  </table>
234
229
  </div>
235
230
  </div>
236
- </div>
237
- ${bottomBtnHTML}
238
- `,
231
+ </div>${bottomBtnHTML}`,
239
232
  bottomBtnHTML,
240
233
  zIndex
241
234
  );
@@ -495,9 +488,7 @@ export class PopsFolder {
495
488
  <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
496
489
  <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
497
490
  <div>
498
- <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
499
- ${fileName}
500
- </a>
491
+ <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
501
492
  <span>${latestTime} ${fileSize}</span>
502
493
  </div>
503
494
  </div>
package/src/components/iframe/index.ts CHANGED
@@ -57,31 +57,22 @@ export class PopsIframe {
57
57
  PopsType,
58
58
  config,
59
59
  /*html*/ `
60
- <div
61
- class="pops-iframe-title"
62
- style="text-align: ${config.title.position};${headerStyle}"
63
- >
64
- ${
65
- config.title.html
66
- ? titleText
67
- : `<p pops style="${headerPStyle}">${titleText}</p>`
68
- }
69
- ${headerBtnHTML}
70
- </div>
71
- <div class="pops-iframe-content">
60
+ <div class="pops-iframe-title" style="text-align: ${
61
+ config.title.position
62
+ };${headerStyle}">${
63
+ config.title.html
64
+ ? titleText
65
+ : `<p pops style="${headerPStyle}">${titleText}</p>`
66
+ }${headerBtnHTML}</div>
67
+ <div class="pops-iframe-content">
72
68
  <div class="pops-iframe-content-global-loading"></div>
73
- <iframe
74
- src="${config.url}"
75
- pops
76
- ${
77
- config.sandbox
78
- ? "sandbox='allow-forms allow-same-origin allow-scripts'"
79
- : ""
80
- }>
69
+ <iframe src="${config.url}" pops ${
70
+ config.sandbox
71
+ ? "sandbox='allow-forms allow-same-origin allow-scripts'"
72
+ : ""
73
+ }>
81
74
  </iframe>
82
- </div>
83
- ${config.loading.enable ? iframeLoadingHTML : ""}
84
- `,
75
+ </div>${config.loading.enable ? iframeLoadingHTML : ""}`,
85
76
  "",
86
77
  zIndex
87
78
  );
package/src/components/loading/index.ts CHANGED
@@ -30,23 +30,21 @@ export class PopsLoading {
30
30
  PopsType,
31
31
  config,
32
32
  /*html*/ `
33
- <div class="pops-loading-content">
34
- ${
35
- config.addIndexCSS
36
- ? `
33
+ <div class="pops-loading-content">${
34
+ config.addIndexCSS
35
+ ? /*html*/ `
37
36
  <style data-model-name="index">${pops.config.cssText.index}</style>
38
37
  <style data-model-name="anim">${pops.config.cssText.anim}</style>
39
38
  <style data-model-name="common">${pops.config.cssText.common}</style>
40
39
  `
41
- : ""
42
- }
40
+ : ""
41
+ }
43
42
  <style data-model-name="loadingCSS">
44
43
  ${pops.config.cssText.loadingCSS}
45
44
  </style>
46
45
  ${config.style != null ? `<style>${config.style}</style>` : ""}
47
- <p pops style="${contentPStyle}">${config.content.text}</p>
48
- </div>
49
- `,
46
+ <p pops style="${contentPStyle}">${config.content.text}</p>
47
+ </div>`,
50
48
  "",
51
49
  zIndex
52
50
  );
@@ -81,6 +79,9 @@ export class PopsLoading {
81
79
  maskHTML: maskHTML,
82
80
  });
83
81
  $mask = _handleMask_.maskElement;
82
+ // 遮罩层必须是跟随主内容
83
+ // 即设置主内容position: relative，mask：position: absolute
84
+ popsDOMUtils.css($mask, "position", "absolute !important");
84
85
  elementList.push($mask);
85
86
  }
86
87
  let eventDetails = PopsHandler.handleLoadingEventDetails(
package/src/components/panel/PanelHandleContentDetails.ts CHANGED
@@ -258,9 +258,7 @@ export const PanelHandleContentDetails = () => {
258
258
  liElement,
259
259
  /*html*/ `
260
260
  <div class="pops-panel-item-left-text">
261
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
262
- ${leftDescriptionText}
263
- </div>
261
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
264
262
  <div class="pops-panel-switch">
265
263
  <input class="pops-panel-switch__input" type="checkbox">
266
264
  <span class="pops-panel-switch__core">
@@ -380,9 +378,7 @@ export const PanelHandleContentDetails = () => {
380
378
  liElement,
381
379
  /*html*/ `
382
380
  <div class="pops-panel-item-left-text">
383
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
384
- ${leftDescriptionText}
385
- </div>
381
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
386
382
  <div class="pops-panel-slider">
387
383
  <input type="range" min="${formConfig.min}" max="${formConfig.max}">
388
384
  </div>
@@ -458,9 +454,7 @@ export const PanelHandleContentDetails = () => {
458
454
  liElement,
459
455
  /*html*/ `
460
456
  <div class="pops-panel-item-left-text" style="flex: 1;">
461
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
462
- ${leftDescriptionText}
463
- </div>
457
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
464
458
  <div class="pops-slider pops-slider-width">
465
459
  <div class="pops-slider__runway">
466
460
  <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
@@ -1053,9 +1047,7 @@ export const PanelHandleContentDetails = () => {
1053
1047
  liElement,
1054
1048
  /*html*/ `
1055
1049
  <div class="pops-panel-item-left-text">
1056
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
1057
- ${leftDescriptionText}
1058
- </div>
1050
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
1059
1051
  <div class="pops-panel-input pops-user-select-none">
1060
1052
  <input type="${inputType}" placeholder="${formConfig.placeholder}">
1061
1053
  </div>
@@ -1270,12 +1262,11 @@ export const PanelHandleContentDetails = () => {
1270
1262
  liElement,
1271
1263
  /*html*/ `
1272
1264
  <div class="pops-panel-item-left-text">
1273
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
1274
- ${leftDescriptionText}
1275
- </div>
1265
+ <p class="pops-panel-item-left-main-text">${
1266
+ formConfig.text
1267
+ }</p>${leftDescriptionText}</div>
1276
1268
  <div class="pops-panel-textarea">
1277
- <textarea placeholder="${formConfig.placeholder ?? ""}">
1278
- </textarea>
1269
+ <textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
1279
1270
  </div>
1280
1271
  `
1281
1272
  );
@@ -1365,9 +1356,7 @@ export const PanelHandleContentDetails = () => {
1365
1356
  liElement,
1366
1357
  /*html*/ `
1367
1358
  <div class="pops-panel-item-left-text">
1368
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
1369
- ${leftDescriptionText}
1370
- </div>
1359
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
1371
1360
  <div class="pops-panel-select pops-user-select-none">
1372
1361
  <select></select>
1373
1362
  </div>
@@ -1601,9 +1590,7 @@ export const PanelHandleContentDetails = () => {
1601
1590
  liElement,
1602
1591
  /*html*/ `
1603
1592
  <div class="pops-panel-item-left-text">
1604
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
1605
- ${leftDescriptionText}
1606
- </div>
1593
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
1607
1594
  <div class="pops-panel-select-multiple">
1608
1595
  <div class="el-select__wrapper">
1609
1596
  <div class="el-select__selection">
@@ -1931,9 +1918,7 @@ export const PanelHandleContentDetails = () => {
1931
1918
  function createSelectItemElement(dataInfo: { text: string }) {
1932
1919
  let $item = popsDOMUtils.createElement("li", {
1933
1920
  className: "select-item",
1934
- innerHTML: /*html*/ `
1935
- <span>${dataInfo.text}</span>
1936
- `,
1921
+ innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
1937
1922
  });
1938
1923
  Reflect.set($item, "data-info", dataInfo);
1939
1924
  return $item;
@@ -2231,9 +2216,7 @@ export const PanelHandleContentDetails = () => {
2231
2216
  liElement,
2232
2217
  /*html*/ `
2233
2218
  <div class="pops-panel-item-left-text">
2234
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
2235
- ${leftDescriptionText}
2236
- </div>
2219
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
2237
2220
  <div class="pops-panel-button">
2238
2221
  <button class="pops-panel-button_inner">
2239
2222
  <i class="pops-bottom-icon"></i>
@@ -2409,13 +2392,8 @@ export const PanelHandleContentDetails = () => {
2409
2392
  $li,
2410
2393
  /*html*/ `
2411
2394
  <div class="pops-panel-item-left-text">
2412
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
2413
- ${leftDescriptionText}
2414
- </div>
2415
- <div class="pops-panel-deepMenu">
2416
- ${rightText}
2417
- ${arrowRightIconHTML}
2418
- </div>
2395
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
2396
+ <div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
2419
2397
  `
2420
2398
  );
2421
2399
  const PopsPanelDeepMenu = {
package/src/components/panel/index.ts CHANGED
@@ -49,17 +49,13 @@ export class PopsPanel {
49
49
  PopsType,
50
50
  config,
51
51
  /*html*/ `
52
- <div
53
- class="pops-${PopsType}-title"
54
- style="text-align: ${config.title.position};
55
- ${headerStyle}">
56
- ${
57
- config.title.html
58
- ? config.title.text
59
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`
60
- }
61
- ${headerBtnHTML}
62
- </div>
52
+ <div class="pops-${PopsType}-title" style="text-align: ${
53
+ config.title.position
54
+ };${headerStyle}">${
55
+ config.title.html
56
+ ? config.title.text
57
+ : `<p pops style="${headerPStyle}">${config.title.text}</p>`
58
+ }${headerBtnHTML}</div>
63
59
  <div class="pops-${PopsType}-content">
64
60
  <aside class="pops-${PopsType}-aside">
65
61
  <ul></ul>
package/src/components/prompt/index.ts CHANGED
@@ -51,29 +51,22 @@ export class PopsPrompt {
51
51
  /*html*/ `
52
52
  <div class="pops-prompt-title" style="text-align: ${
53
53
  config.title.position
54
- };${headerStyle}">
55
- ${
56
- config.title.html
57
- ? config.title.text
58
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`
59
- }
60
- ${headerBtnHTML}
61
- </div>
62
- <div class="pops-prompt-content" style="${contentPStyle}">
63
- ${
64
- config.content.row
65
- ? '<textarea pops="" placeholder="' +
66
- config.content.placeholder +
67
- '"></textarea>'
68
- : '<input pops="" placeholder="' +
69
- config.content.placeholder +
70
- '" type="' +
71
- (config.content.password ? "password" : "text") +
72
- '">'
73
- }
74
- </div>
75
- ${bottomBtnHTML}
76
- `,
54
+ };${headerStyle}">${
55
+ config.title.html
56
+ ? config.title.text
57
+ : `<p pops style="${headerPStyle}">${config.title.text}</p>`
58
+ }${headerBtnHTML}</div>
59
+ <div class="pops-prompt-content" style="${contentPStyle}">${
60
+ config.content.row
61
+ ? '<textarea pops="" placeholder="' +
62
+ config.content.placeholder +
63
+ '"></textarea>'
64
+ : '<input pops="" placeholder="' +
65
+ config.content.placeholder +
66
+ '" type="' +
67
+ (config.content.password ? "password" : "text") +
68
+ '">'
69
+ }</div>${bottomBtnHTML}`,
77
70
  bottomBtnHTML,
78
71
  zIndex
79
72
  );
package/src/components/rightClickMenu/index.ts CHANGED
@@ -2,11 +2,11 @@ import { OriginPrototype } from "../../Core";
2
2
  import { GlobalConfig } from "../../GlobalConfig";
3
3
  import { PopsHandler } from "../../handler/PopsHandler";
4
4
  import { pops } from "../../Pops";
5
- import type { PopsIcon } from "../../types/icon";
6
5
  import { popsDOMUtils } from "../../utils/PopsDOMUtils";
7
6
  import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
8
7
  import { popsUtils } from "../../utils/PopsUtils";
9
8
  import { rightClickMenuConfig as PopsRightClickMenuConfig } from "./config";
9
+ import type { PopsIcon } from "../../types/icon";
10
10
  import type {
11
11
  PopsRightClickMenuDataDetails,
12
12
  PopsRightClickMenuDetails,
@@ -447,7 +447,7 @@ export class PopsRightClickMenu {
447
447
  let iconSVGHTML =
448
448
  pops.config.iconSVG[item.icon as PopsIcon] ?? item.icon;
449
449
  let iconElement = popsUtils.parseTextToDOM(
450
- `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
450
+ /*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
451
451
  );
452
452
  menuLiElement.appendChild(iconElement);
453
453
  }
@@ -473,11 +473,13 @@ export class PopsRightClickMenu {
473
473
  return;
474
474
  }
475
475
  function removeElement(element: HTMLElement) {
476
- element.querySelectorAll("ul li").forEach((ele) => {
477
- if ((ele as any)?.__menuData__?.child) {
478
- removeElement((ele as any).__menuData__.child);
479
- }
480
- });
476
+ element
477
+ .querySelectorAll<HTMLLIElement>("ul li")
478
+ .forEach((ele) => {
479
+ if ((ele as any)?.__menuData__?.child) {
480
+ removeElement((ele as any).__menuData__.child);
481
+ }
482
+ });
481
483
  element.remove();
482
484
  }
483
485
  /* 遍历根元素的上的__menuData__.child，判断 */