@whitesev/pops 2.1.8 → 2.1.10

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 (32) hide show
  1. package/dist/index.amd.js +384 -73
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +384 -73
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +384 -73
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +384 -73
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +384 -73
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +384 -73
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +6 -0
  14. package/dist/types/src/handler/PopsHandler.d.ts +6 -3
  15. package/dist/types/src/utils/PopsDOMUtils.d.ts +13 -0
  16. package/package.json +1 -1
  17. package/src/Pops.ts +1 -1
  18. package/src/components/alert/index.ts +28 -7
  19. package/src/components/confirm/index.ts +28 -7
  20. package/src/components/drawer/index.ts +28 -7
  21. package/src/components/folder/index.ts +28 -7
  22. package/src/components/iframe/index.ts +24 -6
  23. package/src/components/panel/index.css +76 -66
  24. package/src/components/panel/index.ts +28 -7
  25. package/src/components/prompt/index.ts +28 -7
  26. package/src/components/rightClickMenu/index.css +13 -9
  27. package/src/components/rightClickMenu/index.ts +16 -4
  28. package/src/components/searchSuggestion/index.ts +12 -3
  29. package/src/components/tooltip/index.ts +16 -4
  30. package/src/css/index.css +3 -0
  31. package/src/handler/PopsHandler.ts +42 -11
  32. package/src/utils/PopsDOMUtils.ts +113 -0
package/dist/types/src/Pops.d.ts CHANGED
@@ -141,6 +141,12 @@ declare class Pops {
141
141
  before(element: HTMLElement | Element | string, content: HTMLElement | string): void;
142
142
  after(element: HTMLElement | Element | string, content: HTMLElement | string): void;
143
143
  getKeyFrames(sheet: CSSStyleSheet): {};
144
+ calcColor(): {
145
+ hexToRgb: (str: string) => any;
146
+ rgbToHex: (r: any, g: any, b: any) => string;
147
+ getDarkColor: (color: string, level: number) => string;
148
+ getLightColor: (color: string, level: number) => string;
149
+ };
144
150
  on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T]) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
145
151
  on<T extends Event>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
146
152
  on<T extends import("./types/PopsDOMUtilsEventType").PopsDOMUtils_EventType>(element: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: import("./types/PopsDOMUtilsEventType").PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: import("./types/PopsDOMUtilsEventType").PopsDOMUtilsEventListenerOption | boolean): void;
package/dist/types/src/handler/PopsHandler.d.ts CHANGED
@@ -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/dist/types/src/utils/PopsDOMUtils.d.ts CHANGED
@@ -729,6 +729,19 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
729
729
  * @returns
730
730
  */
731
731
  getKeyFrames(sheet: CSSStyleSheet): {};
732
+ /**
733
+ * 颜色转换函数
734
+ * @method hexToRgb hex 颜色转 rgb 颜色
735
+ * @method rgbToHex rgb 颜色转 Hex 颜色
736
+ * @method getDarkColor 加深颜色值
737
+ * @method getLightColor 变浅颜色值
738
+ */
739
+ calcColor(): {
740
+ hexToRgb: (str: string) => any;
741
+ rgbToHex: (r: any, g: any, b: any) => string;
742
+ getDarkColor: (color: string, level: number) => string;
743
+ getLightColor: (color: string, level: number) => string;
744
+ };
732
745
  }
733
746
  declare const popsDOMUtils: PopsDOMUtils;
734
747
  export { popsDOMUtils };
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.10",
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,
package/src/components/alert/index.ts CHANGED
@@ -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提取出来
package/src/components/confirm/index.ts CHANGED
@@ -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提取出来
package/src/components/drawer/index.ts CHANGED
@@ -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提取出来
package/src/components/folder/index.ts CHANGED
@@ -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
  /* 办公几件套 */
package/src/components/iframe/index.ts CHANGED
@@ -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 =
package/src/components/panel/index.css CHANGED
@@ -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
  }
package/src/components/panel/index.ts CHANGED
@@ -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提取出来
package/src/components/prompt/index.ts CHANGED
@@ -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提取出来
package/src/components/rightClickMenu/index.css CHANGED
@@ -1,7 +1,10 @@
1
1
  .pops-rightClickMenu {
2
- --right-context-menu-shadow-color: #cacaca;
3
- --right-context-menu-row-visited-color: #dfdfdf;
4
- --right-context-menu-row-hover-color: #dfdfdf;
2
+ --pops-right-context-color: #000000;
3
+ --pops-right-context-bg-color: #ffffff;
4
+ --pops-right-context-z-index: 10000;
5
+ --pops-right-context-menu-shadow-color: #cacaca;
6
+ --pops-right-context-menu-row-visited-color: #dfdfdf;
7
+ --pops-right-context-menu-row-hover-color: #dfdfdf;
5
8
  }
6
9
  .pops-rightClickMenu * {
7
10
  -webkit-box-sizing: border-box;
@@ -13,13 +16,14 @@
13
16
  }
14
17
  .pops-rightClickMenu {
15
18
  position: fixed;
16
- z-index: 10000;
19
+ z-index: var(--pops-right-context-z-index);
17
20
  text-align: center;
18
21
  border-radius: 3px;
19
22
  font-size: 16px;
20
23
  font-weight: 500;
21
- background: #fff;
22
- box-shadow: 0px 1px 6px 1px var(--right-context-menu-shadow-color);
24
+ color: var(--pops-right-context-color);
25
+ background-color: var(--pops-right-context-bg-color);
26
+ box-shadow: 0px 1px 6px 1px var(--pops-right-context-menu-shadow-color);
23
27
  }
24
28
  .pops-rightClickMenu-anim-grid {
25
29
  display: grid;
@@ -30,7 +34,7 @@
30
34
  grid-template-rows: 1fr;
31
35
  }
32
36
  .pops-rightClickMenu-is-visited {
33
- background: var(--right-context-menu-row-visited-color);
37
+ background: var(--pops-right-context-menu-row-visited-color);
34
38
  }
35
39
  i.pops-rightClickMenu-icon {
36
40
  height: 1em;
@@ -50,7 +54,7 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
50
54
  animation: rotating 2s linear infinite;
51
55
  }
52
56
  .pops-rightClickMenu li:hover {
53
- background: var(--right-context-menu-row-hover-color);
57
+ background: var(--pops-right-context-menu-row-hover-color);
54
58
  cursor: pointer;
55
59
  }
56
60
  .pops-rightClickMenu ul {
@@ -79,6 +83,6 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
79
83
 
80
84
  @media (prefers-color-scheme: dark) {
81
85
  .pops-rightClickMenu {
82
- --right-context-menu-shadow-color: #3c3c3c;
86
+ --pops-right-context-menu-shadow-color: #3c3c3c;
83
87
  }
84
88
  }
package/src/components/rightClickMenu/index.ts CHANGED
@@ -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) {