@whitesev/pops 2.0.2 → 2.0.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.
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whitesev/pops",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
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.1",
88
88
  cssText: {
89
89
  /** 主CSS */
90
90
  index: indexCSS,
@@ -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
  );
@@ -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
  );
@@ -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
  );
@@ -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>
@@ -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
  );
@@ -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
  );
@@ -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 = {
@@ -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>
@@ -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
  );
@@ -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,判断 */
@@ -2,10 +2,10 @@ import { PopsHandler } from "../../handler/PopsHandler";
2
2
  import { pops } from "../../Pops";
3
3
  import { popsDOMUtils } from "../../utils/PopsDOMUtils";
4
4
  import { popsUtils } from "../../utils/PopsUtils";
5
- import type { PopsSearchSuggestionDetails } from "./indexType";
6
5
  import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
7
6
  import { GlobalConfig } from "../../GlobalConfig";
8
7
  import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
8
+ import type { PopsSearchSuggestionDetails } from "./indexType";
9
9
 
10
10
  export class PopsSearchSuggestion {
11
11
  constructor(details: PopsSearchSuggestionDetails) {
@@ -105,9 +105,9 @@ export class PopsSearchSuggestion {
105
105
  <style data-dynamic="true">
106
106
  ${this.getDynamicCSS()}
107
107
  </style>
108
- <ul class="pops-${PopsType}-search-suggestion-hint">
109
- ${config.toSearhNotResultHTML}
110
- </ul>
108
+ <ul class="pops-${PopsType}-search-suggestion-hint">${
109
+ config.toSearhNotResultHTML
110
+ }</ul>
111
111
  `,
112
112
  },
113
113
  {
@@ -188,14 +188,9 @@ export class PopsSearchSuggestion {
188
188
  className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
189
189
  "data-index": index,
190
190
  "data-value": SearchSuggestion.getItemDataValue(data),
191
- innerHTML: `
192
- ${config.getItemHTML(data)}
193
- ${
194
- config.deleteIcon.enable
195
- ? SearchSuggestion.getDeleteIconHTML()
196
- : ""
197
- }
198
- `,
191
+ innerHTML: `${config.getItemHTML(data)}${
192
+ config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""
193
+ }`,
199
194
  });
200
195
  },
201
196
  /**
@@ -514,7 +509,7 @@ export class PopsSearchSuggestion {
514
509
  */
515
510
  removePromptsInSearch() {
516
511
  SearchSuggestion.$el.$hintULContainer
517
- .querySelector(
512
+ .querySelector<HTMLLIElement>(
518
513
  `li.pops-${PopsType}-search-suggestion-hint-searching-item`
519
514
  )
520
515
  ?.remove();