@whitesev/pops 2.2.5 → 2.2.6

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 (30) hide show
  1. package/dist/index.amd.js +119 -114
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +119 -114
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +119 -114
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +119 -114
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +119 -114
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +119 -114
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/handler/PopsElementHandler.d.ts +11 -11
  14. package/package.json +1 -1
  15. package/src/Pops.ts +1 -1
  16. package/src/components/alert/index.ts +6 -6
  17. package/src/components/confirm/index.ts +6 -6
  18. package/src/components/drawer/index.ts +6 -6
  19. package/src/components/folder/index.ts +5 -5
  20. package/src/components/iframe/index.css +1 -1
  21. package/src/components/iframe/index.ts +4 -4
  22. package/src/components/loading/index.ts +3 -3
  23. package/src/components/panel/handlerComponents.ts +5 -5
  24. package/src/components/panel/index.ts +4 -4
  25. package/src/components/prompt/index.ts +6 -6
  26. package/src/css/animation.css +5 -22
  27. package/src/css/button.css +35 -39
  28. package/src/css/index.css +3 -3
  29. package/src/handler/PopsElementHandler.ts +72 -67
  30. package/src/handler/PopsHandler.ts +4 -4
package/dist/types/src/handler/PopsElementHandler.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const PopsElementHandler: {
6
6
  * @param zIndex z-index
7
7
  * @param style
8
8
  */
9
- getMaskHTML(guid: string, zIndex?: number, style?: string): string;
9
+ createMask(guid: string, zIndex?: number, style?: string): string;
10
10
  /**
11
11
  * 获取动画层HTML
12
12
  * @param guid
@@ -16,34 +16,34 @@ export declare const PopsElementHandler: {
16
16
  * @param bottomBtnHTML
17
17
  * @param zIndex
18
18
  */
19
- getAnimHTML(guid: string, type: PopsSupportAnimDetailsType, config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
19
+ createAnim(guid: string, type: PopsSupportAnimDetailsType, config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
20
20
  /**
21
21
  * 获取顶部按钮层HTML
22
22
  * @param type
23
23
  * @param config
24
24
  */
25
- getHeaderBtnHTML(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): string;
26
- /**
27
- * 获取底部按钮层HTML
28
- * @param type
29
- * @param config
30
- */
31
- getBottomBtnHTML(type: PopsSupportBottomBtnDetailsType, config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">): string;
25
+ createHeader(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): string;
32
26
  /**
33
27
  * 获取标题style
34
28
  * @param type 弹窗类型
35
29
  * @param config 弹窗配置
36
30
  */
37
- getHeaderStyle(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): {
31
+ createHeaderStyle(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): {
38
32
  headerStyle: string;
39
33
  headerPStyle: string;
40
34
  };
35
+ /**
36
+ * 获取底部按钮层HTML
37
+ * @param type
38
+ * @param config
39
+ */
40
+ createBottom(type: PopsSupportBottomBtnDetailsType, config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">): string;
41
41
  /**
42
42
  * 获取内容style
43
43
  * @param type 弹窗类型
44
44
  * @param config 弹窗配置
45
45
  */
46
- getContentStyle(type: PopsSupportContentDetailsType, config: PopsSupportContentDetails[keyof PopsSupportContentDetails]): {
46
+ createContentStyle(type: PopsSupportContentDetailsType, config: PopsSupportContentDetails[keyof PopsSupportContentDetails]): {
47
47
  contentStyle: string;
48
48
  contentPStyle: string;
49
49
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whitesev/pops",
3
- "version": "2.2.5",
3
+ "version": "2.2.6",
4
4
  "type": "module",
5
5
  "description": "弹窗库",
6
6
  "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.16",
39
+ version: "2025.7.18",
40
40
  cssText: PopsCSS,
41
41
  /** icon图标的svg代码 */
42
42
  iconSVG: PopsIcon.$data,
package/src/components/alert/index.ts CHANGED
@@ -53,18 +53,18 @@ export const PopsAlert = {
53
53
 
54
54
  // 先把z-index提取出来
55
55
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
56
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
57
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
58
- let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
59
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
56
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
57
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
58
+ let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
59
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
60
60
  popsType,
61
61
  config
62
62
  );
63
- let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
63
+ let { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(
64
64
  popsType,
65
65
  config
66
66
  );
67
- let animHTML = PopsElementHandler.getAnimHTML(
67
+ let animHTML = PopsElementHandler.createAnim(
68
68
  guid,
69
69
  popsType,
70
70
  config,
package/src/components/confirm/index.ts CHANGED
@@ -53,19 +53,19 @@ export const PopsConfirm = {
53
53
 
54
54
  // 先把z-index提取出来
55
55
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
56
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
56
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
57
57
 
58
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
59
- let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
60
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
58
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
59
+ let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
60
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
61
61
  popsType,
62
62
  config
63
63
  );
64
- let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
64
+ let { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(
65
65
  popsType,
66
66
  config
67
67
  );
68
- let animHTML = PopsElementHandler.getAnimHTML(
68
+ let animHTML = PopsElementHandler.createAnim(
69
69
  guid,
70
70
  popsType,
71
71
  config,
package/src/components/drawer/index.ts CHANGED
@@ -52,19 +52,19 @@ export const PopsDrawer = {
52
52
 
53
53
  // 先把z-index提取出来
54
54
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
55
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
55
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
56
56
 
57
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
58
- let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
59
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
57
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
58
+ let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
59
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
60
60
  popsType,
61
61
  config
62
62
  );
63
- let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
63
+ let { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(
64
64
  popsType,
65
65
  config
66
66
  );
67
- let animHTML = PopsElementHandler.getAnimHTML(
67
+ let animHTML = PopsElementHandler.createAnim(
68
68
  guid,
69
69
  popsType,
70
70
  config,
package/src/components/folder/index.ts CHANGED
@@ -127,15 +127,15 @@ export const PopsFolder = {
127
127
 
128
128
  // 先把z-index提取出来
129
129
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
130
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
130
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
131
131
 
132
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
133
- let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
134
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
132
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
133
+ let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
134
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
135
135
  popsType,
136
136
  config
137
137
  );
138
- let animHTML = PopsElementHandler.getAnimHTML(
138
+ let animHTML = PopsElementHandler.createAnim(
139
139
  guid,
140
140
  popsType,
141
141
  config,
package/src/components/iframe/index.css CHANGED
@@ -35,7 +35,7 @@
35
35
  position: unset;
36
36
  }
37
37
  .pops[type-value="iframe"].pops[type-module="min"]
38
- .pops-header-control[type="min"] {
38
+ .pops-header-control[data-type="min"] {
39
39
  display: none;
40
40
  }
41
41
  .pops[type-value="iframe"].pops-iframe-unset-top {
package/src/components/iframe/index.ts CHANGED
@@ -62,17 +62,17 @@ export const PopsIframe = {
62
62
 
63
63
  // 先把z-index提取出来
64
64
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
65
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
65
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
66
66
 
67
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
67
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
68
68
  let iframeLoadingHTML = '<div class="pops-loading"></div>';
69
69
  let titleText =
70
70
  config.title!.text!.trim() !== "" ? config.title.text : config.url;
71
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
71
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
72
72
  popsType,
73
73
  config
74
74
  );
75
- let animHTML = PopsElementHandler.getAnimHTML(
75
+ let animHTML = PopsElementHandler.createAnim(
76
76
  guid,
77
77
  popsType,
78
78
  config,
package/src/components/loading/index.ts CHANGED
@@ -19,13 +19,13 @@ export const PopsLoading = {
19
19
 
20
20
  // 先把z-index提取出来
21
21
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
22
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
22
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
23
23
 
24
- let { contentPStyle } = PopsElementHandler.getContentStyle(
24
+ let { contentPStyle } = PopsElementHandler.createContentStyle(
25
25
  "loading",
26
26
  config
27
27
  );
28
- let animHTML = PopsElementHandler.getAnimHTML(
28
+ let animHTML = PopsElementHandler.createAnim(
29
29
  guid,
30
30
  PopsType,
31
31
  config,
package/src/components/panel/handlerComponents.ts CHANGED
@@ -2573,7 +2573,7 @@ export const PanelHandlerComponents = () => {
2573
2573
  <div class="pops-panel-item-left-text">
2574
2574
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
2575
2575
  <div class="pops-panel-button">
2576
- <button class="pops-panel-button_inner">
2576
+ <button class="pops-panel-button_inner" type="button">
2577
2577
  <i class="pops-bottom-icon"></i>
2578
2578
  <span class="pops-panel-button-text"></span>
2579
2579
  </button>
@@ -2675,7 +2675,7 @@ export const PanelHandlerComponents = () => {
2675
2675
  * @param typeValue
2676
2676
  */
2677
2677
  setButtonType(typeValue: string) {
2678
- this.$ele.button.setAttribute("type", typeValue);
2678
+ this.$ele.button.setAttribute("data-type", typeValue);
2679
2679
  },
2680
2680
  /**
2681
2681
  * 添加按钮的图标在右边
@@ -2773,7 +2773,7 @@ export const PanelHandlerComponents = () => {
2773
2773
  formItemConfig: PopsPanelFormsTotalDetails | PopsPanelFormsDetails
2774
2774
  ) {
2775
2775
  let formConfig_forms = formItemConfig as PopsPanelFormsDetails;
2776
- if (formConfig_forms["type"] === "forms") {
2776
+ if (formConfig_forms.type === "forms") {
2777
2777
  let childForms = formConfig_forms["forms"];
2778
2778
  /* 每一项<li>元素 */
2779
2779
  let formContainerListElement = document.createElement("li");
@@ -2996,7 +2996,7 @@ export const PanelHandlerComponents = () => {
2996
2996
  */
2997
2997
  createSectionContainerItem(formConfig: PopsPanelFormsTotalDetails) {
2998
2998
  /** 配置项的类型 */
2999
- let formType = formConfig["type"];
2999
+ let formType = formConfig.type;
3000
3000
 
3001
3001
  if (formType === "switch") {
3002
3002
  return this.createSectionContainerItem_switch(
@@ -3048,7 +3048,7 @@ export const PanelHandlerComponents = () => {
3048
3048
  ) {
3049
3049
  let that = this;
3050
3050
  let formConfig_forms = formConfig as PopsPanelFormsDetails;
3051
- if (formConfig_forms["type"] === "forms") {
3051
+ if (formConfig_forms.type === "forms") {
3052
3052
  let childForms = formConfig["forms"];
3053
3053
  /* 每一项<li>元素 */
3054
3054
  let formContainerListElement = document.createElement("li");
package/src/components/panel/index.ts CHANGED
@@ -58,15 +58,15 @@ export const PopsPanel = {
58
58
 
59
59
  // 先把z-index提取出来
60
60
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
61
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
61
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
62
62
 
63
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
64
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
63
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
64
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
65
65
  popsType,
66
66
  config
67
67
  );
68
68
 
69
- let animHTML = PopsElementHandler.getAnimHTML(
69
+ let animHTML = PopsElementHandler.createAnim(
70
70
  guid,
71
71
  popsType,
72
72
  config,
package/src/components/prompt/index.ts CHANGED
@@ -54,19 +54,19 @@ export const PopsPrompt = {
54
54
 
55
55
  // 先把z-index提取出来
56
56
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
57
- let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
57
+ let maskHTML = PopsElementHandler.createMask(guid, zIndex);
58
58
 
59
- let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
60
- let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
61
- let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
59
+ let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
60
+ let bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
61
+ let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
62
62
  popsType,
63
63
  config
64
64
  );
65
- let { contentPStyle } = PopsElementHandler.getContentStyle(
65
+ let { contentPStyle } = PopsElementHandler.createContentStyle(
66
66
  popsType,
67
67
  config
68
68
  );
69
- let animHTML = PopsElementHandler.getAnimHTML(
69
+ let animHTML = PopsElementHandler.createAnim(
70
70
  guid,
71
71
  popsType,
72
72
  config,
package/src/css/animation.css CHANGED
@@ -62,21 +62,21 @@
62
62
  @keyframes searchSelectFalIn {
63
63
  from {
64
64
  opacity: 0;
65
- display:none;
65
+ display: none;
66
66
  }
67
67
  to {
68
- display:block;
68
+ display: block;
69
69
  opacity: 1;
70
70
  }
71
71
  }
72
72
  @keyframes searchSelectFalOut {
73
73
  from {
74
- display:block;
74
+ display: block;
75
75
  opacity: 1;
76
76
  }
77
77
  to {
78
78
  opacity: 0;
79
- display:none;
79
+ display: none;
80
80
  }
81
81
  }
82
82
 
@@ -1915,24 +1915,7 @@
1915
1915
  }
1916
1916
  0% {
1917
1917
  opacity: 1;
1918
- transform: matrix3d(
1919
- 1,
1920
- 0,
1921
- 0,
1922
- 0,
1923
- 0,
1924
- 1,
1925
- 0,
1926
- 0,
1927
- 0,
1928
- 0,
1929
- 1,
1930
- 0,
1931
- 0,
1932
- 0,
1933
- 0type=close,
1934
- 1
1935
- );
1918
+ transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
1936
1919
  }
1937
1920
  }
1938
1921
  @keyframes pops-anim-roll-reverse {
package/src/css/button.css CHANGED
@@ -358,188 +358,184 @@
358
358
  .pops-panel-button-no-icon .pops-panel-button_inner i {
359
359
  display: none;
360
360
  }
361
- .pops-panel-button-right-icon {
362
- }
363
361
  .pops-panel-button-right-icon .pops-panel-button_inner {
364
362
  flex-direction: row-reverse;
365
363
  }
366
- .pops-panel-button-right-icon .pops-panel-button_inner i {
367
- }
368
364
  .pops-panel-button .pops-panel-button_inner i:has(svg),
369
365
  .pops-panel-button-right-icon .pops-panel-button-text {
370
366
  margin-right: 6px;
371
367
  }
372
368
 
373
- .pops button[type="default"] {
369
+ .pops button[data-type="default"] {
374
370
  --button-color: var(--button-default-color);
375
371
  --button-bd-color: var(--button-default-bd-color);
376
372
  --button-bg-color: var(--button-default-bg-color);
377
373
  }
378
- .pops button[type="default"]:active {
374
+ .pops button[data-type="default"]:active {
379
375
  --button-color: var(--button-default-active-color);
380
376
  --button-bd-color: var(--button-default-active-bd-color);
381
377
  --button-bg-color: var(--button-default-active-bg-color);
382
378
  }
383
- .pops button[type="default"]:hover {
379
+ .pops button[data-type="default"]:hover {
384
380
  --button-color: var(--button-default-hover-color);
385
381
  --button-bd-color: var(--button-default-hover-bd-color);
386
382
  --button-bg-color: var(--button-default-hover-bg-color);
387
383
  }
388
- .pops button[type="default"]:focus-visible {
384
+ .pops button[data-type="default"]:focus-visible {
389
385
  outline: var(--button-default-focus-visible-outline);
390
386
  outline-offset: var(--button-default-focus-visible-outline-offset);
391
387
  }
392
- .pops button[type="default"]:disabled {
388
+ .pops button[data-type="default"]:disabled {
393
389
  --button-color: var(--button-default-disabled-color);
394
390
  --button-bd-color: var(--button-default-disabled-bd-color);
395
391
  --button-bg-color: var(--button-default-disabled-bg-color);
396
392
  }
397
393
 
398
- .pops button[type="primary"] {
394
+ .pops button[data-type="primary"] {
399
395
  --button-color: var(--button-primary-color);
400
396
  --button-bd-color: var(--button-primary-bd-color);
401
397
  --button-bg-color: var(--button-primary-bg-color);
402
398
  }
403
- .pops button[type="primary"]:active {
399
+ .pops button[data-type="primary"]:active {
404
400
  --button-color: var(--button-primary-active-color);
405
401
  --button-bd-color: var(--button-primary-active-bd-color);
406
402
  --button-bg-color: var(--button-primary-active-bg-color);
407
403
  }
408
- .pops button[type="primary"]:hover {
404
+ .pops button[data-type="primary"]:hover {
409
405
  --button-color: var(--button-primary-hover-color);
410
406
  --button-bd-color: var(--button-primary-hover-bd-color);
411
407
  --button-bg-color: var(--button-primary-hover-bg-color);
412
408
  }
413
- .pops button[type="primary"]:focus-visible {
409
+ .pops button[data-type="primary"]:focus-visible {
414
410
  outline: var(--button-primary-focus-visible-outline);
415
411
  outline-offset: var(--button-primary-focus-visible-outline-offset);
416
412
  }
417
- .pops button[type="primary"]:disabled {
413
+ .pops button[data-type="primary"]:disabled {
418
414
  --button-color: var(--button-primary-disabled-color);
419
415
  --button-bd-color: var(--button-primary-disabled-bd-color);
420
416
  --button-bg-color: var(--button-primary-disabled-bg-color);
421
417
  }
422
418
 
423
- .pops button[type="success"] {
419
+ .pops button[data-type="success"] {
424
420
  --button-color: var(--button-success-color);
425
421
  --button-bd-color: var(--button-success-bd-color);
426
422
  --button-bg-color: var(--button-success-bg-color);
427
423
  }
428
- .pops button[type="success"]:active {
424
+ .pops button[data-type="success"]:active {
429
425
  --button-color: var(--button-success-active-color);
430
426
  --button-bd-color: var(--button-success-active-bd-color);
431
427
  --button-bg-color: var(--button-success-active-bg-color);
432
428
  }
433
- .pops button[type="success"]:hover {
429
+ .pops button[data-type="success"]:hover {
434
430
  --button-color: var(--button-success-hover-color);
435
431
  --button-bd-color: var(--button-success-hover-bd-color);
436
432
  --button-bg-color: var(--button-success-hover-bg-color);
437
433
  }
438
- .pops button[type="success"]:focus-visible {
434
+ .pops button[data-type="success"]:focus-visible {
439
435
  outline: var(--button-success-focus-visible-outline);
440
436
  outline-offset: var(--button-success-focus-visible-outline-offset);
441
437
  }
442
- .pops button[type="success"]:disabled {
438
+ .pops button[data-type="success"]:disabled {
443
439
  --button-color: var(--button-success-disabled-color);
444
440
  --button-bd-color: var(--button-success-disabled-bd-color);
445
441
  --button-bg-color: var(--button-success-disabled-bg-color);
446
442
  }
447
443
 
448
- .pops button[type="info"] {
444
+ .pops button[data-type="info"] {
449
445
  --button-color: var(--button-info-color);
450
446
  --button-bd-color: var(--button-info-bd-color);
451
447
  --button-bg-color: var(--button-info-bg-color);
452
448
  }
453
- .pops button[type="info"]:active {
449
+ .pops button[data-type="info"]:active {
454
450
  --button-color: var(--button-info-active-color);
455
451
  --button-bd-color: var(--button-info-active-bd-color);
456
452
  --button-bg-color: var(--button-info-active-bg-color);
457
453
  }
458
- .pops button[type="info"]:hover {
454
+ .pops button[data-type="info"]:hover {
459
455
  --button-color: var(--button-info-hover-color);
460
456
  --button-bd-color: var(--button-info-hover-bd-color);
461
457
  --button-bg-color: var(--button-info-hover-bg-color);
462
458
  }
463
- .pops button[type="info"]:focus-visible {
459
+ .pops button[data-type="info"]:focus-visible {
464
460
  outline: var(--button-info-focus-visible-outline);
465
461
  outline-offset: var(--button-info-focus-visible-outline-offset);
466
462
  }
467
- .pops button[type="info"]:disabled {
463
+ .pops button[data-type="info"]:disabled {
468
464
  --button-color: var(--button-success-disabled-color);
469
465
  --button-bd-color: var(--button-success-disabled-bd-color);
470
466
  --button-bg-color: var(--button-success-disabled-bg-color);
471
467
  }
472
468
 
473
- .pops button[type="warning"] {
469
+ .pops button[data-type="warning"] {
474
470
  --button-color: var(--button-warning-color);
475
471
  --button-bd-color: var(--button-warning-bd-color);
476
472
  --button-bg-color: var(--button-warning-bg-color);
477
473
  }
478
- .pops button[type="warning"]:active {
474
+ .pops button[data-type="warning"]:active {
479
475
  --button-color: var(--button-warning-active-color);
480
476
  --button-bd-color: var(--button-warning-active-bd-color);
481
477
  --button-bg-color: var(--button-warning-active-bg-color);
482
478
  }
483
- .pops button[type="warning"]:hover {
479
+ .pops button[data-type="warning"]:hover {
484
480
  --button-color: var(--button-warning-hover-color);
485
481
  --button-bd-color: var(--button-warning-hover-bd-color);
486
482
  --button-bg-color: var(--button-warning-hover-bg-color);
487
483
  }
488
- .pops button[type="warning"]:focus-visible {
484
+ .pops button[data-type="warning"]:focus-visible {
489
485
  outline: var(--button-warning-focus-visible-outline);
490
486
  outline-offset: var(--button-warning-focus-visible-outline-offset);
491
487
  }
492
- .pops button[type="warning"]:disabled {
488
+ .pops button[data-type="warning"]:disabled {
493
489
  --button-color: var(--button-success-disabled-color);
494
490
  --button-bd-color: var(--button-success-disabled-bd-color);
495
491
  --button-bg-color: var(--button-success-disabled-bg-color);
496
492
  }
497
493
 
498
- .pops button[type="danger"] {
494
+ .pops button[data-type="danger"] {
499
495
  --button-color: var(--button-danger-color);
500
496
  --button-bd-color: var(--button-danger-bd-color);
501
497
  --button-bg-color: var(--button-danger-bg-color);
502
498
  }
503
- .pops button[type="danger"]:active {
499
+ .pops button[data-type="danger"]:active {
504
500
  --button-color: var(--button-danger-active-color);
505
501
  --button-bd-color: var(--button-danger-active-bd-color);
506
502
  --button-bg-color: var(--button-danger-active-bg-color);
507
503
  }
508
- .pops button[type="danger"]:hover {
504
+ .pops button[data-type="danger"]:hover {
509
505
  --button-color: var(--button-danger-hover-color);
510
506
  --button-bd-color: var(--button-danger-hover-bd-color);
511
507
  --button-bg-color: var(--button-danger-hover-bg-color);
512
508
  }
513
- .pops button[type="danger"]:focus-visible {
509
+ .pops button[data-type="danger"]:focus-visible {
514
510
  outline: var(--button-danger-focus-visible-outline);
515
511
  outline-offset: var(--button-danger-focus-visible-outline-offset);
516
512
  }
517
- .pops button[type="danger"]:disabled {
513
+ .pops button[data-type="danger"]:disabled {
518
514
  --button-color: var(--button-success-disabled-color);
519
515
  --button-bd-color: var(--button-success-disabled-bd-color);
520
516
  --button-bg-color: var(--button-success-disabled-bg-color);
521
517
  }
522
518
 
523
- .pops button[type="xiaomi-primary"] {
519
+ .pops button[data-type="xiaomi-primary"] {
524
520
  --button-color: var(--button-xiaomi-primary-color);
525
521
  --button-bd-color: var(--button-xiaomi-primary-bd-color);
526
522
  --button-bg-color: var(--button-xiaomi-primary-bg-color);
527
523
  }
528
- .pops button[type="xiaomi-primary"]:active {
524
+ .pops button[data-type="xiaomi-primary"]:active {
529
525
  --button-color: var(--button-xiaomi-primary-active-color);
530
526
  --button-bd-color: var(--button-xiaomi-primary-active-bd-color);
531
527
  --button-bg-color: var(--button-xiaomi-primary-active-bg-color);
532
528
  }
533
- .pops button[type="xiaomi-primary"]:hover {
529
+ .pops button[data-type="xiaomi-primary"]:hover {
534
530
  --button-color: var(--button-xiaomi-primary-hover-color);
535
531
  --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);
536
532
  --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);
537
533
  }
538
- .pops button[type="xiaomi-primary"]:focus-visible {
534
+ .pops button[data-type="xiaomi-primary"]:focus-visible {
539
535
  outline: var(--button-xiaomi-primary-focus-visible-outline);
540
536
  outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);
541
537
  }
542
- .pops button[type="xiaomi-primary"]:disabled {
538
+ .pops button[data-type="xiaomi-primary"]:disabled {
543
539
  --button-color: var(--button-success-disabled-color);
544
540
  --button-bd-color: var(--button-success-disabled-bd-color);
545
541
  --button-bg-color: var(--button-success-disabled-bg-color);
package/src/css/index.css CHANGED
@@ -117,9 +117,9 @@
117
117
  color: #888;
118
118
  cursor: pointer;
119
119
  }
120
- .pops-header-controls button.pops-header-control[type="max"],
121
- .pops-header-controls button.pops-header-control[type="mise"],
122
- .pops-header-controls button.pops-header-control[type="min"] {
120
+ .pops-header-controls button.pops-header-control[data-type="max"],
121
+ .pops-header-controls button.pops-header-control[data-type="mise"],
122
+ .pops-header-controls button.pops-header-control[data-type="min"] {
123
123
  outline: 0 !important;
124
124
  border: 0;
125
125
  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));