@whitesev/pops 2.1.8 → 2.1.9

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.
@@ -23,10 +23,13 @@ export declare const PopsHandler: {
23
23
  };
24
24
  /**
25
25
  * 处理初始化
26
- * @param $shadowRoot 所在的shadowRoot
27
- * @param cssText 添加进ShadowRoot的CSS
26
+ * @param $styleParent style元素的父元素
27
+ * @param css 添加进ShadowRoot的CSS
28
28
  */
29
- handleInit($shadowRoot?: ShadowRoot | HTMLElement, cssText?: string | string[]): void;
29
+ handleInit($styleParent?: ShadowRoot | HTMLElement, css?: string | string[] | {
30
+ name?: string;
31
+ css: string;
32
+ }[]): void;
30
33
  /**
31
34
  * 处理遮罩层
32
35
  *
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "@whitesev/pops",
4
- "version": "2.1.8",
4
+ "version": "2.1.9",
5
5
  "type": "module",
6
6
  "description": "弹窗库",
7
7
  "main": "dist/index.cjs.js",
package/src/Pops.ts CHANGED
@@ -36,7 +36,7 @@ class Pops {
36
36
  /** 配置 */
37
37
  config = {
38
38
  /** 版本号 */
39
- version: "2025.7.9",
39
+ version: "2025.7.10",
40
40
  cssText: PopsCSS,
41
41
  /** icon图标的svg代码 */
42
42
  iconSVG: PopsIcon.$data,
@@ -21,13 +21,34 @@ export const PopsAlert = {
21
21
 
22
22
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
23
23
  PopsHandler.handleInit($shadowRoot, [
24
- PopsCSS.index,
25
- PopsCSS.ninePalaceGridPosition,
26
- PopsCSS.scrollbar,
27
- PopsCSS.button,
28
- PopsCSS.anim,
29
- PopsCSS.common,
30
- PopsCSS.alertCSS,
24
+ {
25
+ name: "index",
26
+ css: PopsCSS.index,
27
+ },
28
+ {
29
+ name: "ninePalaceGridPosition",
30
+ css: PopsCSS.ninePalaceGridPosition,
31
+ },
32
+ {
33
+ name: "scrollbar",
34
+ css: PopsCSS.scrollbar,
35
+ },
36
+ {
37
+ name: "button",
38
+ css: PopsCSS.button,
39
+ },
40
+ {
41
+ name: "anim",
42
+ css: PopsCSS.anim,
43
+ },
44
+ {
45
+ name: "common",
46
+ css: PopsCSS.common,
47
+ },
48
+ {
49
+ name: "alertCSS",
50
+ css: PopsCSS.alertCSS,
51
+ },
31
52
  ]);
32
53
 
33
54
  // 先把z-index提取出来
@@ -20,13 +20,34 @@ export const PopsConfirm = {
20
20
 
21
21
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
22
22
  PopsHandler.handleInit($shadowRoot, [
23
- PopsCSS.index,
24
- PopsCSS.ninePalaceGridPosition,
25
- PopsCSS.scrollbar,
26
- PopsCSS.button,
27
- PopsCSS.anim,
28
- PopsCSS.common,
29
- PopsCSS.confirmCSS,
23
+ {
24
+ name: "index",
25
+ css: PopsCSS.index,
26
+ },
27
+ {
28
+ name: "ninePalaceGridPosition",
29
+ css: PopsCSS.ninePalaceGridPosition,
30
+ },
31
+ {
32
+ name: "scrollbar",
33
+ css: PopsCSS.scrollbar,
34
+ },
35
+ {
36
+ name: "button",
37
+ css: PopsCSS.button,
38
+ },
39
+ {
40
+ name: "anim",
41
+ css: PopsCSS.anim,
42
+ },
43
+ {
44
+ name: "common",
45
+ css: PopsCSS.common,
46
+ },
47
+ {
48
+ name: "confirmCSS",
49
+ css: PopsCSS.confirmCSS,
50
+ },
30
51
  ]);
31
52
 
32
53
  // 先把z-index提取出来
@@ -19,13 +19,34 @@ export const PopsDrawer = {
19
19
 
20
20
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
21
21
  PopsHandler.handleInit($shadowRoot, [
22
- PopsCSS.index,
23
- PopsCSS.ninePalaceGridPosition,
24
- PopsCSS.scrollbar,
25
- PopsCSS.button,
26
- PopsCSS.anim,
27
- PopsCSS.common,
28
- PopsCSS.drawerCSS,
22
+ {
23
+ name: "index",
24
+ css: PopsCSS.index,
25
+ },
26
+ {
27
+ name: "ninePalaceGridPosition",
28
+ css: PopsCSS.ninePalaceGridPosition,
29
+ },
30
+ {
31
+ name: "scrollbar",
32
+ css: PopsCSS.scrollbar,
33
+ },
34
+ {
35
+ name: "button",
36
+ css: PopsCSS.button,
37
+ },
38
+ {
39
+ name: "anim",
40
+ css: PopsCSS.anim,
41
+ },
42
+ {
43
+ name: "common",
44
+ css: PopsCSS.common,
45
+ },
46
+ {
47
+ name: "drawerCSS",
48
+ css: PopsCSS.drawerCSS,
49
+ },
29
50
  ]);
30
51
 
31
52
  // 先把z-index提取出来
@@ -24,13 +24,34 @@ export const PopsFolder = {
24
24
 
25
25
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
26
26
  PopsHandler.handleInit($shadowRoot, [
27
- PopsCSS.index,
28
- PopsCSS.ninePalaceGridPosition,
29
- PopsCSS.scrollbar,
30
- PopsCSS.button,
31
- PopsCSS.anim,
32
- PopsCSS.common,
33
- PopsCSS.folderCSS,
27
+ {
28
+ name: "index",
29
+ css: PopsCSS.index,
30
+ },
31
+ {
32
+ name: "ninePalaceGridPosition",
33
+ css: PopsCSS.ninePalaceGridPosition,
34
+ },
35
+ {
36
+ name: "scrollbar",
37
+ css: PopsCSS.scrollbar,
38
+ },
39
+ {
40
+ name: "button",
41
+ css: PopsCSS.button,
42
+ },
43
+ {
44
+ name: "anim",
45
+ css: PopsCSS.anim,
46
+ },
47
+ {
48
+ name: "common",
49
+ css: PopsCSS.common,
50
+ },
51
+ {
52
+ name: "folderCSS",
53
+ css: PopsCSS.folderCSS,
54
+ },
34
55
  ]);
35
56
 
36
57
  /* 办公几件套 */
@@ -27,12 +27,30 @@ export const PopsIframe = {
27
27
 
28
28
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
29
29
  PopsHandler.handleInit($shadowRoot, [
30
- PopsCSS.index,
31
- PopsCSS.ninePalaceGridPosition,
32
- PopsCSS.scrollbar,
33
- PopsCSS.anim,
34
- PopsCSS.common,
35
- PopsCSS.iframeCSS,
30
+ {
31
+ name: "index",
32
+ css: PopsCSS.index,
33
+ },
34
+ {
35
+ name: "ninePalaceGridPosition",
36
+ css: PopsCSS.ninePalaceGridPosition,
37
+ },
38
+ {
39
+ name: "scrollbar",
40
+ css: PopsCSS.scrollbar,
41
+ },
42
+ {
43
+ name: "anim",
44
+ css: PopsCSS.anim,
45
+ },
46
+ {
47
+ name: "common",
48
+ css: PopsCSS.common,
49
+ },
50
+ {
51
+ name: "iframeCSS",
52
+ css: PopsCSS.iframeCSS,
53
+ },
36
54
  ]);
37
55
 
38
56
  let maskExtraStyle =
@@ -1,13 +1,11 @@
1
1
  .pops[type-value="panel"] {
2
- --el-disabled-text-color: #a8abb2;
3
- --el-disabled-bg-color: #f5f7fa;
4
- --el-disabled-border-color: #e4e7ed;
5
2
  --pops-bg-color: #f2f2f2;
6
3
  --pops-color: #333333;
7
- --title-bg-color: #ffffff;
8
- --aside-bg-color: #ffffff;
9
- --aside-hover-color: rgb(64, 158, 255);
10
- --aside-hover-bg-color: rgba(64, 158, 255, 0.1);
4
+ --panel-title-bg-color: #ffffff;
5
+
6
+ --panel-aside-bg-color: #ffffff;
7
+ --panel-aside-hover-color: rgb(64, 158, 255);
8
+ --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);
11
9
 
12
10
  --pops-panel-forms-margin-top-bottom: 10px;
13
11
  --pops-panel-forms-margin-left-right: 20px;
@@ -32,42 +30,13 @@
32
30
  );
33
31
  --pops-panel-forms-container-li-padding-top-bottom: 12px;
34
32
  --pops-panel-forms-container-li-padding-left-right: 16px;
35
-
36
- --pops-panel-components-input-text-color: #000000;
37
- --pops-panel-components-input-text-bg-color: transparent;
38
- --pops-panel-components-input-bd-color: #dcdfe6;
39
- --pops-panel-components-input-bg-color: #ffffff;
40
- --pops-panel-components-input-hover-bd-color: #c0c4cc;
41
- --pops-panel-components-input-focus-bd-color: #409eff;
42
- --pops-panel-components-input-suffix-color: #a8abb2;
43
-
44
- --pops-panel-components-textarea-text-color: #000000;
45
- --pops-panel-components-textarea-text-bg-color: #ffffff;
46
- --pops-panel-components-textarea-bd-color: #dcdfe6;
47
- --pops-panel-components-textarea-hover-bd-color: #c0c4cc;
48
- --pops-panel-components-textarea-focus-bd-color: #409eff;
49
-
50
- --pops-panel-components-select-text-color: #000000;
51
- --pops-panel-components-select-bd-color: rgb(
52
- 184,
53
- 184,
54
- 184,
55
- var(--pops-bd-opacity)
56
- );
57
- --pops-panel-components-select-bg-color: rgb(
58
- 255,
59
- 255,
60
- 255,
61
- var(--pops-bg-opacity)
62
- );
63
- --pops-panel-components-select-hover-bd-color: #c0c4cc;
64
33
  }
65
34
  .pops[type-value="panel"] {
66
35
  color: var(--pops-color);
67
36
  background: var(--pops-bg-color);
68
37
  }
69
38
  .pops[type-value] .pops-panel-title {
70
- background: var(--title-bg-color);
39
+ background: var(--panel-title-bg-color);
71
40
  }
72
41
 
73
42
  /* ↓panel的CSS↓ */
@@ -78,8 +47,8 @@ aside.pops-panel-aside {
78
47
  max-width: 200px;
79
48
  min-width: 100px;
80
49
  height: 100%;
81
- background: var(--aside-bg-color);
82
- border-right: 1px solid var(--aside-bg-color);
50
+ background: var(--panel-aside-bg-color);
51
+ border-right: 1px solid var(--panel-aside-bg-color);
83
52
  font-size: 0.9em;
84
53
  display: flex;
85
54
  flex-direction: column;
@@ -138,8 +107,8 @@ aside.pops-panel-aside ul li {
138
107
  }
139
108
  aside.pops-panel-aside .pops-is-visited,
140
109
  aside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {
141
- color: var(--aside-hover-color);
142
- background: var(--aside-hover-bg-color);
110
+ color: var(--panel-aside-hover-color);
111
+ background: var(--panel-aside-hover-bg-color);
143
112
  }
144
113
  section.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {
145
114
  display: flex;
@@ -683,6 +652,19 @@ section.pops-panel-container
683
652
  /* slider的CSS */
684
653
 
685
654
  /* input的CSS */
655
+ .pops-panel-input {
656
+ --el-disabled-text-color: #a8abb2;
657
+ --el-disabled-bg-color: #f5f7fa;
658
+ --el-disabled-border-color: #e4e7ed;
659
+
660
+ --pops-panel-components-input-text-color: #000000;
661
+ --pops-panel-components-input-text-bg-color: transparent;
662
+ --pops-panel-components-input-bd-color: #dcdfe6;
663
+ --pops-panel-components-input-bg-color: #ffffff;
664
+ --pops-panel-components-input-hover-bd-color: #c0c4cc;
665
+ --pops-panel-components-input-focus-bd-color: #409eff;
666
+ --pops-panel-components-input-suffix-color: #a8abb2;
667
+ }
686
668
  .pops-panel-input {
687
669
  display: flex;
688
670
  align-items: center;
@@ -800,6 +782,13 @@ section.pops-panel-container
800
782
  /* input的CSS */
801
783
 
802
784
  /* textarea的CSS */
785
+ .pops-panel-textarea {
786
+ --pops-panel-components-textarea-text-color: #000000;
787
+ --pops-panel-components-textarea-text-bg-color: #ffffff;
788
+ --pops-panel-components-textarea-bd-color: #dcdfe6;
789
+ --pops-panel-components-textarea-hover-bd-color: #c0c4cc;
790
+ --pops-panel-components-textarea-focus-bd-color: #409eff;
791
+ }
803
792
  .pops-panel-textarea textarea {
804
793
  width: 100%;
805
794
  /*vertical-align: bottom;*/
@@ -839,6 +828,22 @@ section.pops-panel-container
839
828
  /* textarea的CSS */
840
829
 
841
830
  /* select的CSS */
831
+ .pops-panel-select {
832
+ --pops-panel-components-select-text-color: #000000;
833
+ --pops-panel-components-select-bd-color: rgb(
834
+ 184,
835
+ 184,
836
+ 184,
837
+ var(--pops-bd-opacity)
838
+ );
839
+ --pops-panel-components-select-bg-color: rgb(
840
+ 255,
841
+ 255,
842
+ 255,
843
+ var(--pops-bg-opacity)
844
+ );
845
+ --pops-panel-components-select-hover-bd-color: #c0c4cc;
846
+ }
842
847
  .pops-panel-select {
843
848
  border: 0;
844
849
  }
@@ -1121,8 +1126,8 @@ section.pops-panel-container
1121
1126
  .pops[type-value="panel"] {
1122
1127
  --pops-bg-color: #000000;
1123
1128
  --pops-color: #f2f2f2;
1124
- --title-bg-color: #000000;
1125
- --aside-bg-color: #262626;
1129
+ --panel-title-bg-color: #000000;
1130
+ --panel-aside-bg-color: #262626;
1126
1131
  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;
1127
1132
  --pops-panel-forms-container-item-bg-color: #262626;
1128
1133
  --pops-panel-forms-container-item-title-color: #c1c1c1;
@@ -1133,28 +1138,6 @@ section.pops-panel-container
1133
1138
  51,
1134
1139
  var(--pops-bd-opacity)
1135
1140
  );
1136
-
1137
- --pops-panel-components-input-text-color: #f2f2f2;
1138
- --pops-panel-components-input-bd-color: #4f5052;
1139
- --pops-panel-components-input-bg-color: #141414;
1140
- --pops-panel-components-input-hover-bd-color: #6f7175;
1141
- --pops-panel-components-input-focus-bd-color: #409eff;
1142
- --pops-panel-components-input-suffix-color: #a8abb2;
1143
-
1144
- --pops-panel-components-textarea-text-color: #f2f2f2;
1145
- --pops-panel-components-textarea-text-bg-color: #141414;
1146
- --pops-panel-components-textarea-bd-color: #4f5052;
1147
- --pops-panel-components-textarea-hover-bd-color: #6f7175;
1148
- --pops-panel-components-textarea-focus-bd-color: #409eff;
1149
-
1150
- --pops-panel-components-select-text-color: #f2f2f2;
1151
- --pops-panel-components-select-bd-color: rgb(
1152
- 51,
1153
- 51,
1154
- 51,
1155
- var(--pops-bd-opacity)
1156
- );
1157
- --pops-panel-components-select-bg-color: #141414;
1158
1141
  }
1159
1142
  .pops[type-value="panel"]
1160
1143
  .pops-panel-deepMenu-container
@@ -1182,7 +1165,17 @@ section.pops-panel-container
1182
1165
  var(--pops-bg-opacity)
1183
1166
  );
1184
1167
  }
1185
-
1168
+ /* select的CSS */
1169
+ .pops-panel-select {
1170
+ --pops-panel-components-select-text-color: #f2f2f2;
1171
+ --pops-panel-components-select-bd-color: rgb(
1172
+ 51,
1173
+ 51,
1174
+ 51,
1175
+ var(--pops-bd-opacity)
1176
+ );
1177
+ --pops-panel-components-select-bg-color: #141414;
1178
+ }
1186
1179
  /* select-multiple的CSS*/
1187
1180
  .pops-panel-select-multiple {
1188
1181
  --el-fill-color-blank: #141414;
@@ -1205,4 +1198,21 @@ section.pops-panel-container
1205
1198
  .pops-slider {
1206
1199
  --pops-slider-border-color-light: #414243;
1207
1200
  }
1201
+ /* input的CSS */
1202
+ .pops-panel-input {
1203
+ --pops-panel-components-input-text-color: #f2f2f2;
1204
+ --pops-panel-components-input-bd-color: #4f5052;
1205
+ --pops-panel-components-input-bg-color: #141414;
1206
+ --pops-panel-components-input-hover-bd-color: #6f7175;
1207
+ --pops-panel-components-input-focus-bd-color: #409eff;
1208
+ --pops-panel-components-input-suffix-color: #a8abb2;
1209
+ }
1210
+ /* textarea的CSS */
1211
+ .pops-panel-textarea {
1212
+ --pops-panel-components-textarea-text-color: #f2f2f2;
1213
+ --pops-panel-components-textarea-text-bg-color: #141414;
1214
+ --pops-panel-components-textarea-bd-color: #4f5052;
1215
+ --pops-panel-components-textarea-hover-bd-color: #6f7175;
1216
+ --pops-panel-components-textarea-focus-bd-color: #409eff;
1217
+ }
1208
1218
  }
@@ -25,13 +25,34 @@ export const PopsPanel = {
25
25
 
26
26
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
27
27
  PopsHandler.handleInit($shadowRoot, [
28
- PopsCSS.index,
29
- PopsCSS.ninePalaceGridPosition,
30
- PopsCSS.scrollbar,
31
- PopsCSS.button,
32
- PopsCSS.anim,
33
- PopsCSS.common,
34
- PopsCSS.panelCSS,
28
+ {
29
+ name: "index",
30
+ css: PopsCSS.index,
31
+ },
32
+ {
33
+ name: "ninePalaceGridPosition",
34
+ css: PopsCSS.ninePalaceGridPosition,
35
+ },
36
+ {
37
+ name: "scrollbar",
38
+ css: PopsCSS.scrollbar,
39
+ },
40
+ {
41
+ name: "button",
42
+ css: PopsCSS.button,
43
+ },
44
+ {
45
+ name: "anim",
46
+ css: PopsCSS.anim,
47
+ },
48
+ {
49
+ name: "common",
50
+ css: PopsCSS.common,
51
+ },
52
+ {
53
+ name: "panelCSS",
54
+ css: PopsCSS.panelCSS,
55
+ },
35
56
  ]);
36
57
 
37
58
  // 先把z-index提取出来
@@ -21,13 +21,34 @@ export const PopsPrompt = {
21
21
 
22
22
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
23
23
  PopsHandler.handleInit($shadowRoot, [
24
- PopsCSS.index,
25
- PopsCSS.ninePalaceGridPosition,
26
- PopsCSS.scrollbar,
27
- PopsCSS.button,
28
- PopsCSS.anim,
29
- PopsCSS.common,
30
- PopsCSS.promptCSS,
24
+ {
25
+ name: "index",
26
+ css: PopsCSS.index,
27
+ },
28
+ {
29
+ name: "ninePalaceGridPosition",
30
+ css: PopsCSS.ninePalaceGridPosition,
31
+ },
32
+ {
33
+ name: "scrollbar",
34
+ css: PopsCSS.scrollbar,
35
+ },
36
+ {
37
+ name: "button",
38
+ css: PopsCSS.button,
39
+ },
40
+ {
41
+ name: "anim",
42
+ css: PopsCSS.anim,
43
+ },
44
+ {
45
+ name: "common",
46
+ css: PopsCSS.common,
47
+ },
48
+ {
49
+ name: "promptCSS",
50
+ css: PopsCSS.promptCSS,
51
+ },
31
52
  ]);
32
53
 
33
54
  // 先把z-index提取出来
@@ -31,10 +31,22 @@ export const PopsRightClickMenu = {
31
31
  }
32
32
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
33
33
  PopsHandler.handleInit($shadowRoot, [
34
- PopsCSS.index,
35
- PopsCSS.anim,
36
- PopsCSS.common,
37
- PopsCSS.rightClickMenu,
34
+ {
35
+ name: "index",
36
+ css: PopsCSS.index,
37
+ },
38
+ {
39
+ name: "anim",
40
+ css: PopsCSS.anim,
41
+ },
42
+ {
43
+ name: "common",
44
+ css: PopsCSS.common,
45
+ },
46
+ {
47
+ name: "rightClickMenu",
48
+ css: PopsCSS.rightClickMenu,
49
+ },
38
50
  ]);
39
51
 
40
52
  if (config.style != null) {
@@ -29,9 +29,18 @@ export const PopsSearchSuggestion = {
29
29
 
30
30
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
31
31
  PopsHandler.handleInit($shadowRoot, [
32
- PopsCSS.index,
33
- PopsCSS.anim,
34
- PopsCSS.common,
32
+ {
33
+ name: "index",
34
+ css: PopsCSS.index,
35
+ },
36
+ {
37
+ name: "anim",
38
+ css: PopsCSS.anim,
39
+ },
40
+ {
41
+ name: "common",
42
+ css: PopsCSS.common,
43
+ },
35
44
  ]);
36
45
 
37
46
  if (config.style != null) {
@@ -613,10 +613,22 @@ export const PopsTooltip = {
613
613
 
614
614
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
615
615
  PopsHandler.handleInit($shadowRoot, [
616
- PopsCSS.index,
617
- PopsCSS.anim,
618
- PopsCSS.common,
619
- PopsCSS.tooltipCSS,
616
+ {
617
+ name: "index",
618
+ css: PopsCSS.index,
619
+ },
620
+ {
621
+ name: "anim",
622
+ css: PopsCSS.anim,
623
+ },
624
+ {
625
+ name: "common",
626
+ css: PopsCSS.common,
627
+ },
628
+ {
629
+ name: "tooltipCSS",
630
+ css: PopsCSS.tooltipCSS,
631
+ },
620
632
  ]);
621
633
 
622
634
  let toolTip = new ToolTip(config, guid, {