@whitesev/pops 3.0.0 → 3.0.2

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 (61) hide show
  1. package/dist/index.amd.js +1964 -719
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.amd.min.js +1 -1
  4. package/dist/index.amd.min.js.map +1 -1
  5. package/dist/index.cjs.js +1964 -719
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.cjs.min.js +1 -1
  8. package/dist/index.cjs.min.js.map +1 -1
  9. package/dist/index.esm.js +1964 -719
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.esm.min.js +1 -1
  12. package/dist/index.esm.min.js.map +1 -1
  13. package/dist/index.iife.js +1964 -719
  14. package/dist/index.iife.js.map +1 -1
  15. package/dist/index.iife.min.js +1 -1
  16. package/dist/index.iife.min.js.map +1 -1
  17. package/dist/index.system.js +1964 -719
  18. package/dist/index.system.js.map +1 -1
  19. package/dist/index.system.min.js +1 -1
  20. package/dist/index.system.min.js.map +1 -1
  21. package/dist/index.umd.js +1964 -719
  22. package/dist/index.umd.js.map +1 -1
  23. package/dist/index.umd.min.js +1 -1
  24. package/dist/index.umd.min.js.map +1 -1
  25. package/dist/types/src/Pops.d.ts +413 -22
  26. package/dist/types/src/PopsCSS.d.ts +3 -1
  27. package/dist/types/src/PopsIcon.d.ts +1 -1
  28. package/dist/types/src/components/panel/handlerComponents.d.ts +1103 -21
  29. package/dist/types/src/components/panel/index.d.ts +2 -2
  30. package/dist/types/src/components/panel/types/components-button.d.ts +1 -1
  31. package/dist/types/src/components/panel/types/components-container.d.ts +1 -1
  32. package/dist/types/src/components/panel/types/components-deepMenu.d.ts +1 -1
  33. package/dist/types/src/components/panel/types/components-input.d.ts +41 -16
  34. package/dist/types/src/components/panel/types/components-own.d.ts +3 -3
  35. package/dist/types/src/components/panel/types/components-select.d.ts +126 -30
  36. package/dist/types/src/components/panel/types/components-selectMultiple.d.ts +10 -15
  37. package/dist/types/src/components/panel/types/components-slider.d.ts +2 -3
  38. package/dist/types/src/components/panel/types/components-switch.d.ts +1 -1
  39. package/dist/types/src/components/panel/types/components-textarea.d.ts +1 -1
  40. package/dist/types/src/components/searchSuggestion/index.d.ts +3 -3
  41. package/dist/types/src/types/global.d.ts +3 -1
  42. package/package.json +8 -8
  43. package/src/PopsCSS.ts +4 -1
  44. package/src/components/panel/css/components-select.css +84 -0
  45. package/src/components/panel/defaultConfig.ts +473 -213
  46. package/src/components/panel/handlerComponents.ts +1504 -499
  47. package/src/components/panel/index.css +149 -14
  48. package/src/components/panel/types/components-button.ts +1 -1
  49. package/src/components/panel/types/components-container.ts +1 -1
  50. package/src/components/panel/types/components-deepMenu.ts +1 -1
  51. package/src/components/panel/types/components-input.ts +51 -16
  52. package/src/components/panel/types/components-own.ts +3 -3
  53. package/src/components/panel/types/components-select.ts +131 -32
  54. package/src/components/panel/types/components-selectMultiple.ts +11 -16
  55. package/src/components/panel/types/components-slider.ts +2 -3
  56. package/src/components/panel/types/components-switch.ts +1 -1
  57. package/src/components/panel/types/components-textarea.ts +1 -1
  58. package/src/components/rightClickMenu/index.css +1 -1
  59. package/src/components/searchSuggestion/index.ts +20 -65
  60. package/src/css/common.css +4 -4
  61. package/src/types/global.d.ts +3 -1
package/dist/index.amd.js CHANGED
@@ -2850,7 +2850,7 @@ define((function () { 'use strict';
2850
2850
 
2851
2851
  var buttonCSS = ".pops {\r\n --button-font-size: 14px;\r\n --button-height: 32px;\r\n --button-color: rgb(51, 51, 51);\r\n --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --button-margin-top: 0px;\r\n --button-margin-bottom: 0px;\r\n --button-margin-left: 5px;\r\n --button-margin-right: 5px;\r\n --button-padding-top: 6px;\r\n --button-padding-bottom: 6px;\r\n --button-padding-left: 12px;\r\n --button-padding-right: 12px;\r\n --button-radius: 4px;\r\n\r\n --container-title-height: 55px;\r\n --container-bottom-btn-height: 55px;\r\n\r\n /* default按钮 */\r\n --button-default-color: #333333;\r\n --button-default-bd-color: #dcdfe6;\r\n --button-default-bg-color: #ffffff;\r\n --button-default-active-color: #409eff;\r\n --button-default-active-bd-color: #409eff;\r\n --button-default-active-bg-color: #ecf5ff;\r\n --button-default-hover-color: #409eff;\r\n --button-default-hover-bd-color: #c6e2ff;\r\n --button-default-hover-bg-color: #ecf5ff;\r\n --button-default-focus-visible-outline-color: #a0cfff;\r\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n --button-default-focus-visible-outline-offset: 1px;\r\n --button-default-disabled-color: #a8abb2;\r\n --button-default-disabled-bd-color: #ffffff;\r\n --button-default-disabled-bg-color: #e4e7ed;\r\n\r\n /* primary按钮 */\r\n --button-primary-color: #ffffff;\r\n --button-primary-bd-color: #409eff;\r\n --button-primary-bg-color: #409eff;\r\n --button-primary-active-color: #ffffff;\r\n --button-primary-active-bd-color: #337ecc;\r\n --button-primary-active-bg-color: #337ecc;\r\n --button-primary-hover-color: #ffffff;\r\n --button-primary-hover-bd-color: #79bbff;\r\n --button-primary-hover-bg-color: #79bbff;\r\n --button-primary-focus-visible-outline-color: #a0cfff;\r\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n --button-primary-focus-visible-outline-offset: 1px;\r\n --button-primary-disabled-color: #ffffff80;\r\n --button-primary-disabled-bd-color: #a0cfff;\r\n --button-primary-disabled-bg-color: #a0cfff;\r\n\r\n /* success按钮 */\r\n --button-success-color: #ffffff;\r\n --button-success-bd-color: #4cae4c;\r\n --button-success-bg-color: #5cb85c;\r\n --button-success-active-color: #ffffff;\r\n --button-success-active-bd-color: #529b2e;\r\n --button-success-active-bg-color: #529b2e;\r\n --button-success-hover-color: #ffffff;\r\n --button-success-hover-bd-color: #95d475;\r\n --button-success-hover-bg-color: #95d475;\r\n --button-success-focus-visible-outline-color: #b3e19d;\r\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n --button-success-focus-visible-outline-offset: 1px;\r\n --button-success-disabled-color: #ffffff80;\r\n --button-success-disabled-bd-color: #b3e19d;\r\n --button-success-disabled-bg-color: #b3e19d;\r\n\r\n /* info按钮 */\r\n --button-info-color: #ffffff;\r\n --button-info-bd-color: #909399;\r\n --button-info-bg-color: #909399;\r\n --button-info-active-color: #ffffff;\r\n --button-info-active-bd-color: #73767a;\r\n --button-info-active-bg-color: #73767a;\r\n --button-info-hover-color: #ffffff;\r\n --button-info-hover-bd-color: #b1b3b8;\r\n --button-info-hover-bg-color: #b1b3b8;\r\n --button-info-focus-visible-outline-color: #c8c9cc;\r\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n --button-info-focus-visible-outline-offset: 1px;\r\n --button-info-disabled-color: #ffffff80;\r\n --button-info-disabled-bd-color: #c8c9cc;\r\n --button-info-disabled-bg-color: #c8c9cc;\r\n\r\n /* warning按钮 */\r\n --button-warning-color: #ffffff;\r\n --button-warning-bd-color: #e6a23c;\r\n --button-warning-bg-color: #e6a23c;\r\n --button-warning-active-color: #ffffff;\r\n --button-warning-active-bd-color: #b88230;\r\n --button-warning-active-bg-color: #b88230;\r\n --button-warning-hover-color: #ffffff80;\r\n --button-warning-hover-bd-color: #eebe77;\r\n --button-warning-hover-bg-color: #eebe77;\r\n --button-warning-focus-visible-outline-color: #f3d19e;\r\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n --button-warning-focus-visible-outline-offset: 1px;\r\n --button-warning-disabled-color: #ffffff80;\r\n --button-warning-disabled-bd-color: #f3d19e;\r\n --button-warning-disabled-bg-color: #f3d19e;\r\n\r\n /* danger按钮 */\r\n --button-danger-color: #ffffff;\r\n --button-danger-bd-color: #f56c6c;\r\n --button-danger-bg-color: #f56c6c;\r\n --button-danger-active-color: #ffffff;\r\n --button-danger-active-bd-color: #c45656;\r\n --button-danger-active-bg-color: #c45656;\r\n --button-danger-hover-color: #ffffff;\r\n --button-danger-hover-bd-color: #f89898;\r\n --button-danger-hover-bg-color: #f89898;\r\n --button-danger-focus-visible-outline-color: #fab6b6;\r\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n --button-danger-focus-visible-outline-offset: 1px;\r\n --button-danger-disabled-color: #ffffff80;\r\n --button-danger-disabled-bd-color: #fab6b6;\r\n --button-danger-disabled-bg-color: #fab6b6;\r\n\r\n /* xiaomi-primary按钮 */\r\n --button-xiaomi-primary-color: #ffffff;\r\n --button-xiaomi-primary-bd-color: #ff5c00;\r\n --button-xiaomi-primary-bg-color: #ff5c00;\r\n --button-xiaomi-primary-active-color: #ffffff;\r\n --button-xiaomi-primary-active-bd-color: #da4f00;\r\n --button-xiaomi-primary-active-bg-color: #da4f00;\r\n --button-xiaomi-primary-hover-color: #ffffff;\r\n --button-xiaomi-primary-hover-bd-color: #ff7e29;\r\n --button-xiaomi-primary-hover-bg-color: #ff7e29;\r\n --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\r\n --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\r\n --button-xiaomi-primary-focus-visible-outline-offset: 1px;\r\n --button-xiaomi-primary-disabled-color: #ffffff80;\r\n --button-xiaomi-primary-disabled-bd-color: #fad5b6;\r\n --button-xiaomi-primary-disabled-bg-color: #fad5b6;\r\n\r\n /* violet按钮 */\r\n --button-violet-color: #ffffff;\r\n --button-violet-bd-color: #626aef;\r\n --button-violet-bg-color: #626aef;\r\n --button-violet-active-color: #ffffff;\r\n --button-violet-active-bd-color: #8188f2;\r\n --button-violet-active-bg-color: #8188f2;\r\n --button-violet-hover-color: #ffffff;\r\n --button-violet-hover-bd-color: #4b50ad;\r\n --button-violet-hover-bg-color: #4b50ad;\r\n --button-violet-focus-visible-outline-color: #2a598a;\r\n --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\r\n --button-violet-focus-visible-outline-offset: 1px;\r\n --button-violet-disabled-color: #ffffff80;\r\n --button-violet-disabled-bd-color: #3b3f82;\r\n --button-violet-disabled-bg-color: #3b3f82;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops {\r\n /* default按钮 */\r\n --button-default-color: #cfd3dc;\r\n --button-default-bd-color: #4c4d4f;\r\n --button-default-bg-color: transparent;\r\n --button-default-active-color: #409eff;\r\n --button-default-active-bd-color: #409eff;\r\n --button-default-active-bg-color: #18222c;\r\n --button-default-hover-color: #409eff;\r\n --button-default-hover-bd-color: #213d5b;\r\n --button-default-hover-bg-color: #18222c;\r\n --button-default-focus-visible-outline-color: #2a598a;\r\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n --button-default-focus-visible-outline-offset: 1px;\r\n --button-default-disabled-color: #ffffff80;\r\n --button-default-disabled-bd-color: #414243;\r\n --button-default-disabled-bg-color: transparent;\r\n\r\n /* primary按钮 */\r\n --button-primary-color: #ffffff;\r\n --button-primary-bd-color: #409eff;\r\n --button-primary-bg-color: #409eff;\r\n --button-primary-active-color: #ffffff;\r\n --button-primary-active-bd-color: #66b1ff;\r\n --button-primary-active-bg-color: #66b1ff;\r\n --button-primary-hover-color: #ffffff;\r\n --button-primary-hover-bd-color: #3375b9;\r\n --button-primary-hover-bg-color: #3375b9;\r\n --button-primary-focus-visible-outline-color: #2a598a;\r\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n --button-primary-focus-visible-outline-offset: 1px;\r\n --button-primary-disabled-color: #ffffff80;\r\n --button-primary-disabled-bd-color: #2a598a;\r\n --button-primary-disabled-bg-color: #2a598a;\r\n\r\n /* success按钮 */\r\n --button-success-color: #ffffff;\r\n --button-success-bd-color: #67c23a;\r\n --button-success-bg-color: #67c23a;\r\n --button-success-active-color: #ffffff;\r\n --button-success-active-bd-color: #85ce61;\r\n --button-success-active-bg-color: #85ce61;\r\n --button-success-hover-color: #ffffff;\r\n --button-success-hover-bd-color: #4e8e2f;\r\n --button-success-hover-bg-color: #4e8e2f;\r\n --button-success-focus-visible-outline-color: #3e6b27;\r\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n --button-success-focus-visible-outline-offset: 1px;\r\n --button-success-disabled-color: #ffffff80;\r\n --button-success-disabled-bd-color: #3e6b27;\r\n --button-success-disabled-bg-color: #3e6b27;\r\n\r\n /* info按钮 */\r\n --button-info-color: #ffffff;\r\n --button-info-bd-color: #909399;\r\n --button-info-bg-color: #909399;\r\n --button-info-active-color: #ffffff;\r\n --button-info-active-bd-color: #a6a9ad;\r\n --button-info-active-bg-color: #a6a9ad;\r\n --button-info-hover-color: #ffffff;\r\n --button-info-hover-bd-color: #6b6d71;\r\n --button-info-hover-bg-color: #6b6d71;\r\n --button-info-focus-visible-outline-color: #525457;\r\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n --button-info-focus-visible-outline-offset: 1px;\r\n --button-info-disabled-color: #ffffff80;\r\n --button-info-disabled-bd-color: #525457;\r\n --button-info-disabled-bg-color: #525457;\r\n\r\n /* warning按钮 */\r\n --button-warning-color: #ffffff;\r\n --button-warning-bd-color: #e6a23c;\r\n --button-warning-bg-color: #e6a23c;\r\n --button-warning-active-color: #ffffff;\r\n --button-warning-active-bd-color: #ebb563;\r\n --button-warning-active-bg-color: #ebb563;\r\n --button-warning-hover-color: #ffffff80;\r\n --button-warning-hover-bd-color: #a77730;\r\n --button-warning-hover-bg-color: #a77730;\r\n --button-warning-focus-visible-outline-color: #7d5b28;\r\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n --button-warning-focus-visible-outline-offset: 1px;\r\n --button-warning-disabled-color: #ffffff80;\r\n --button-warning-disabled-bd-color: #7d5b28;\r\n --button-warning-disabled-bg-color: #7d5b28;\r\n\r\n /* danger按钮 */\r\n --button-danger-color: #ffffff;\r\n --button-danger-bd-color: #f56c6c;\r\n --button-danger-bg-color: #f56c6c;\r\n --button-danger-active-color: #ffffff;\r\n --button-danger-active-bd-color: #f78989;\r\n --button-danger-active-bg-color: #f78989;\r\n --button-danger-hover-color: #ffffff;\r\n --button-danger-hover-bd-color: #b25252;\r\n --button-danger-hover-bg-color: #b25252;\r\n --button-danger-focus-visible-outline-color: #854040;\r\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n --button-danger-focus-visible-outline-offset: 1px;\r\n --button-danger-disabled-color: #ffffff80;\r\n --button-danger-disabled-bd-color: #854040;\r\n --button-danger-disabled-bg-color: #854040;\r\n }\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n --container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n white-space: nowrap;\r\n float: right;\r\n display: inline-block;\r\n margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\r\n padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\r\n outline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n display: none;\r\n}\r\n.pops button {\r\n border-radius: var(--button-radius);\r\n box-shadow: none;\r\n font-weight: 400;\r\n font-size: var(--button-font-size);\r\n cursor: pointer;\r\n transition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n display: flex;\r\n align-items: center;\r\n height: var(--button-height);\r\n line-height: normal;\r\n box-sizing: border-box;\r\n border: 1px solid var(--button-bd-color);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops button {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n outline: 0;\r\n}\r\n.pops button:hover {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n cursor: not-allowed;\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n --button-height: 32px;\r\n --button-padding-top: 12px;\r\n --button-padding-bottom: 12px;\r\n --button-padding-left: 19px;\r\n --button-padding-right: 19px;\r\n --button-font-size: 14px;\r\n --button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n --button-height: 24px;\r\n --button-padding-top: 5px;\r\n --button-padding-bottom: 5px;\r\n --button-padding-left: 11px;\r\n --button-padding-right: 11px;\r\n --button-font-size: 12px;\r\n --button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n display: none;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n flex-direction: row-reverse;\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n margin-right: 6px;\r\n}\r\n\r\n.pops button[data-type=\"default\"] {\r\n --button-color: var(--button-default-color);\r\n --button-bd-color: var(--button-default-bd-color);\r\n --button-bg-color: var(--button-default-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:active {\r\n --button-color: var(--button-default-active-color);\r\n --button-bd-color: var(--button-default-active-bd-color);\r\n --button-bg-color: var(--button-default-active-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:hover {\r\n --button-color: var(--button-default-hover-color);\r\n --button-bd-color: var(--button-default-hover-bd-color);\r\n --button-bg-color: var(--button-default-hover-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:focus-visible {\r\n outline: var(--button-default-focus-visible-outline);\r\n outline-offset: var(--button-default-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"default\"]:disabled {\r\n --button-color: var(--button-default-disabled-color);\r\n --button-bd-color: var(--button-default-disabled-bd-color);\r\n --button-bg-color: var(--button-default-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"primary\"] {\r\n --button-color: var(--button-primary-color);\r\n --button-bd-color: var(--button-primary-bd-color);\r\n --button-bg-color: var(--button-primary-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:active {\r\n --button-color: var(--button-primary-active-color);\r\n --button-bd-color: var(--button-primary-active-bd-color);\r\n --button-bg-color: var(--button-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:hover {\r\n --button-color: var(--button-primary-hover-color);\r\n --button-bd-color: var(--button-primary-hover-bd-color);\r\n --button-bg-color: var(--button-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:focus-visible {\r\n outline: var(--button-primary-focus-visible-outline);\r\n outline-offset: var(--button-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"primary\"]:disabled {\r\n --button-color: var(--button-primary-disabled-color);\r\n --button-bd-color: var(--button-primary-disabled-bd-color);\r\n --button-bg-color: var(--button-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"success\"] {\r\n --button-color: var(--button-success-color);\r\n --button-bd-color: var(--button-success-bd-color);\r\n --button-bg-color: var(--button-success-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:active {\r\n --button-color: var(--button-success-active-color);\r\n --button-bd-color: var(--button-success-active-bd-color);\r\n --button-bg-color: var(--button-success-active-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:hover {\r\n --button-color: var(--button-success-hover-color);\r\n --button-bd-color: var(--button-success-hover-bd-color);\r\n --button-bg-color: var(--button-success-hover-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:focus-visible {\r\n outline: var(--button-success-focus-visible-outline);\r\n outline-offset: var(--button-success-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"success\"]:disabled {\r\n --button-color: var(--button-success-disabled-color);\r\n --button-bd-color: var(--button-success-disabled-bd-color);\r\n --button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"info\"] {\r\n --button-color: var(--button-info-color);\r\n --button-bd-color: var(--button-info-bd-color);\r\n --button-bg-color: var(--button-info-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:active {\r\n --button-color: var(--button-info-active-color);\r\n --button-bd-color: var(--button-info-active-bd-color);\r\n --button-bg-color: var(--button-info-active-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:hover {\r\n --button-color: var(--button-info-hover-color);\r\n --button-bd-color: var(--button-info-hover-bd-color);\r\n --button-bg-color: var(--button-info-hover-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:focus-visible {\r\n outline: var(--button-info-focus-visible-outline);\r\n outline-offset: var(--button-info-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"info\"]:disabled {\r\n --button-color: var(--button-info-disabled-color);\r\n --button-bd-color: var(--button-info-disabled-bd-color);\r\n --button-bg-color: var(--button-info-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"warning\"] {\r\n --button-color: var(--button-warning-color);\r\n --button-bd-color: var(--button-warning-bd-color);\r\n --button-bg-color: var(--button-warning-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:active {\r\n --button-color: var(--button-warning-active-color);\r\n --button-bd-color: var(--button-warning-active-bd-color);\r\n --button-bg-color: var(--button-warning-active-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:hover {\r\n --button-color: var(--button-warning-hover-color);\r\n --button-bd-color: var(--button-warning-hover-bd-color);\r\n --button-bg-color: var(--button-warning-hover-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:focus-visible {\r\n outline: var(--button-warning-focus-visible-outline);\r\n outline-offset: var(--button-warning-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"warning\"]:disabled {\r\n --button-color: var(--button-warning-disabled-color);\r\n --button-bd-color: var(--button-warning-disabled-bd-color);\r\n --button-bg-color: var(--button-warning-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"danger\"] {\r\n --button-color: var(--button-danger-color);\r\n --button-bd-color: var(--button-danger-bd-color);\r\n --button-bg-color: var(--button-danger-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:active {\r\n --button-color: var(--button-danger-active-color);\r\n --button-bd-color: var(--button-danger-active-bd-color);\r\n --button-bg-color: var(--button-danger-active-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:hover {\r\n --button-color: var(--button-danger-hover-color);\r\n --button-bd-color: var(--button-danger-hover-bd-color);\r\n --button-bg-color: var(--button-danger-hover-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:focus-visible {\r\n outline: var(--button-danger-focus-visible-outline);\r\n outline-offset: var(--button-danger-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"danger\"]:disabled {\r\n --button-color: var(--button-danger-disabled-color);\r\n --button-bd-color: var(--button-danger-disabled-bd-color);\r\n --button-bg-color: var(--button-danger-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"xiaomi-primary\"] {\r\n --button-color: var(--button-xiaomi-primary-color);\r\n --button-bd-color: var(--button-xiaomi-primary-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:active {\r\n --button-color: var(--button-xiaomi-primary-active-color);\r\n --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:hover {\r\n --button-color: var(--button-xiaomi-primary-hover-color);\r\n --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\r\n outline: var(--button-xiaomi-primary-focus-visible-outline);\r\n outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\r\n --button-color: var(--button-xiaomi-primary-disabled-color);\r\n --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\r\n --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"violet\"] {\r\n --button-color: var(--button-violet-color);\r\n --button-bd-color: var(--button-violet-bd-color);\r\n --button-bg-color: var(--button-violet-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:active {\r\n --button-color: var(--button-violet-active-color);\r\n --button-bd-color: var(--button-violet-active-bd-color);\r\n --button-bg-color: var(--button-violet-active-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:hover {\r\n --button-color: var(--button-violet-hover-color);\r\n --button-bd-color: var(--button-violet-hover-bd-color);\r\n --button-bg-color: var(--button-violet-hover-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:focus-visible {\r\n outline: var(--button-violet-focus-visible-outline);\r\n outline-offset: var(--button-violet-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"violet\"]:disabled {\r\n --button-color: var(--button-violet-disabled-color);\r\n --button-bd-color: var(--button-violet-disabled-bd-color);\r\n --button-bg-color: var(--button-violet-disabled-bg-color);\r\n}\r\n";
2852
2852
 
2853
- var commonCSS = ".pops-flex-items-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n display: flex;\r\n align-content: center;\r\n}\r\n.pops-hide {\r\n display: none;\r\n}\r\n.pops-hide-important {\r\n display: none !important;\r\n}\r\n.pops-no-border {\r\n border: 0;\r\n}\r\n.pops-no-border-important {\r\n border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-line-height-center {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-width-fill {\r\n width: 100%;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n}\r\n.pops-height-fill {\r\n height: 100%;\r\n height: -webkit-fill-available;\r\n height: -moz-available;\r\n}\r\n.pops-text-is-disabled {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n color: var(--pops-text-is-disabled-color);\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n color: var(--pops-text-is-disabled-color) !important;\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
2853
+ var commonCSS = ".pops-flex-items-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n display: flex;\r\n align-content: center;\r\n}\r\n.pops-hide {\r\n display: none;\r\n}\r\n.pops-hide-important {\r\n display: none !important;\r\n}\r\n.pops-no-border {\r\n border: 0;\r\n}\r\n.pops-no-border-important {\r\n border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-line-height-center {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-width-fill {\r\n width: 100%;\r\n width: -moz-available;\r\n width: -webkit-fill-available;\r\n}\r\n.pops-height-fill {\r\n height: 100%;\r\n height: -moz-available;\r\n height: -webkit-fill-available;\r\n}\r\n.pops-text-is-disabled {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n --pops-text-is-disabled-color: #a8abb2;\r\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
2854
2854
 
2855
2855
  var animCSS = "@keyframes rotating {\r\n 0% {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 75%;\r\n }\r\n to {\r\n width: 100%;\r\n }\r\n}\r\n@keyframes iframeLoadingChange {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 0;\r\n }\r\n to {\r\n width: 75%;\r\n }\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n from {\r\n opacity: 0;\r\n display: none;\r\n }\r\n to {\r\n display: block;\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes searchSelectFalOut {\r\n from {\r\n display: block;\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n display: none;\r\n }\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n form {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes pops-anim-spread {\r\n 0% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n}\r\n@keyframes pops-anim-shake {\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(10px);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right {\r\n 0% {\r\n transform: translateX(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-fadein {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n 0% {\r\n transform: scale(0.5);\r\n }\r\n 45% {\r\n transform: scale(1.05);\r\n }\r\n 80% {\r\n transform: scale(0.95);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-don {\r\n 0% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 2.08333% {\r\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 4.16667% {\r\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 6.25% {\r\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 14.5833% {\r\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 16.6667% {\r\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 18.75% {\r\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 20.8333% {\r\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 22.9167% {\r\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 25% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 27.0833% {\r\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 29.1667% {\r\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 31.25% {\r\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 33.3333% {\r\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 35.4167% {\r\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 43.75% {\r\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 45.8333% {\r\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 47.9167% {\r\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 52.0833% {\r\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 54.1667% {\r\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 56.25% {\r\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 64.5833% {\r\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 66.6667% {\r\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 68.75% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 70.8333% {\r\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 72.9167% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 75% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 77.0833% {\r\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 79.1667% {\r\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 81.25% {\r\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 83.3333% {\r\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 85.4167% {\r\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 93.75% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 95.8333% {\r\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 97.9167% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n}\r\n@keyframes pops-anim-roll {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra {\r\n 0% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n 0%,\r\n 100% {\r\n transform: translateX(10px);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(200%);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 45% {\r\n transform: scale(0.95);\r\n }\r\n 80% {\r\n transform: scale(1.05);\r\n }\r\n 100% {\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n 100% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 97.9167% {\r\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 95.8333% {\r\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 93.75% {\r\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 85.4167% {\r\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 83.3333% {\r\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 81.25% {\r\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 79.1667% {\r\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 77.0833% {\r\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 75% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 72.9167% {\r\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 70.8333% {\r\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 68.75% {\r\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 66.6667% {\r\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 64.5833% {\r\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 56.25% {\r\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 54.1667% {\r\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 52.0833% {\r\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 47.9167% {\r\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 45.8333% {\r\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 43.75% {\r\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 35.4167% {\r\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 33.3333% {\r\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 31.25% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 29.1667% {\r\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 27.0833% {\r\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 25% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 22.9167% {\r\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 20.8333% {\r\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 18.75% {\r\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 16.6667% {\r\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 14.5833% {\r\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 6.25% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 4.16667% {\r\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 2.08333% {\r\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 0% {\r\n opacity: 1;\r\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 10;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n -ms-transform: translateX(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n -ms-transform: translateX(-20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n animation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n animation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n animation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n animation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n animation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n animation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n animation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n animation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n animation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n animation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n animation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n animation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n animation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n animation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n animation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n animation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n animation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n animation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n animation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n animation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n animation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n animation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n animation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n animation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n animation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n animation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n animation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n animation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n animation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n animation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
2856
2856
 
@@ -2870,9 +2870,11 @@ define((function () { 'use strict';
2870
2870
 
2871
2871
  var folderCSS = ".pops-folder-list {\r\n --folder-arrow-fill-color: #d4d7de;\r\n --folder-arrow-active-fill-color: #06a7ff;\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #999999;\r\n --table-header-row-text-color: #818999;\r\n --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-row-text-color: #05082c;\r\n --table-body-row-file-name-text-color: #05082c;\r\n --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-file-name-hover-text-color: #06a7ff;\r\n --table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n background: 0 0;\r\n text-decoration: none;\r\n -webkit-tap-highlight-color: transparent;\r\n color: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n width: 100%;\r\n table-layout: fixed;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n height: 100%;\r\n background: 0 0;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n -ms-flex-direction: column;\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n height: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-header-row-text-color);\r\n text-align: left;\r\n font-size: 12px;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-body-row-text-color);\r\n font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n background-color: var(--table-body-row-hover-bg-color);\r\n border-color: var(--table-body-row-hover-bd-color);\r\n border: 0;\r\n outline: none;\r\n}\r\n.pops-folder-list table th {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-td-text-color);\r\n position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n display: inline-block;\r\n padding-left: 12px;\r\n line-height: normal;\r\n align-content: center;\r\n max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n padding: 6px 0px;\r\n flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n width: 45px;\r\n height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n padding-left: unset;\r\n max-width: 250px;\r\n overflow-x: hidden;\r\n font-weight: 400;\r\n line-height: unset;\r\n margin-bottom: 4px;\r\n white-space: normal;\r\n text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n overflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n flex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n display: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n color: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n text-decoration: none;\r\n color: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n color: var(--table-body-row-content-text-color);\r\n position: relative;\r\n width: 100%;\r\n text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n line-height: normal;\r\n align-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n flex: 1;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n min-height: 17px;\r\n flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n display: inline-flex;\r\n margin-left: 4px;\r\n flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n width: 10px;\r\n height: 10px;\r\n fill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n fill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n padding: 4px 20px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n -webkit-box-pack: start;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: flex-start;\r\n min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n font-size: 12px;\r\n color: var(--header-breadcrumb-all-files-text-color);\r\n line-height: normal;\r\n align-content: center;\r\n font-weight: 700;\r\n display: inline-block;\r\n max-width: 140px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n color: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n font-size: 14px;\r\n color: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n 55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"folder\"] {\r\n --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n }\r\n .pops-folder-list {\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #818999;\r\n --table-body-row-text-color: #f7f8fa;\r\n --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-td-text-color: #495366;\r\n --table-body-row-hover-bd-color: #1f2022;\r\n --table-body-row-hover-bg-color: #1f2022;\r\n --table-body-row-file-name-text-color: #f7f8fa;\r\n }\r\n}\r\n";
2872
2872
 
2873
- var panelCSS = ".pops[type-value=\"panel\"] {\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333333;\r\n --panel-title-bg-color: #ffffff;\r\n\r\n --panel-aside-bg-color: #ffffff;\r\n --panel-aside-hover-color: rgb(64, 158, 255);\r\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-left-text-gap: 6px;\r\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--panel-aside-bg-color);\r\n border-right: 1px solid var(--panel-aside-bg-color);\r\n font-size: 0.9em;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n background: var(--panel-aside-bg-color);\r\n border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n list-style-type: none;\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n overflow: auto;\r\n /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n /* 去除<li>左侧的圆点 */\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px 0px;\r\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul.pops-panel-forms-container-item-formlist\r\n li:last-child {\r\n border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value=\"panel\"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value=\"panel\"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n padding: 0 4px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n min-width: 88px !important;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid var(--panel-switch-core-bd-color);\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: var(--panel-switch-core-bg-color);\r\n cursor: pointer;\r\n transition:\r\n border-color 0.3s,\r\n background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: var(--panel-switch-circle-bg-color);\r\n color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: var(--panel-switch-checked-core-bd-color);\r\n background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: \"\";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n\r\n --pops-panel-components-input-text-color: #000000;\r\n --pops-panel-components-input-text-bg-color: transparent;\r\n --pops-panel-components-input-text-default-padding: 8px;\r\n --pops-panel-components-input-bd-color: #dcdfe6;\r\n --pops-panel-components-input-bg-color: #ffffff;\r\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid var(--pops-panel-components-input-bd-color);\r\n border-radius: 4px;\r\n background-color: var(--pops-panel-components-input-bg-color);\r\n position: relative;\r\n box-shadow: none;\r\n width: 200px;\r\n}\r\n.pops-panel-input:hover {\r\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n color: var(--pops-panel-components-input-text-color);\r\n background-color: var(--pops-panel-components-input-text-bg-color);\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n /*margin-right: calc(1em + 8px);*/\r\n margin: 0px;\r\n padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n height: -webkit-fill-available;\r\n height: -moz-available;\r\n text-align: center;\r\n color: var(--pops-panel-components-input-suffix-color);\r\n background: var(--pops-panel-components-input-suffix-bg-color);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n padding: 0 8px;\r\n position: relative;\r\n right: 0px;\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #000000;\r\n --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n color: var(--pops-panel-components-textarea-text-color);\r\n background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n --pops-panel-components-select-text-color: #000000;\r\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n border: 0;\r\n}\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid var(--pops-panel-components-select-bd-color);\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n color: var(--pops-panel-components-select-text-color);\r\n background-color: var(--pops-panel-components-select-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n box-shadow: none;\r\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #cbcbcb;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: transform var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.pops-panel-select-multiple-disable {\r\n --el-fill-color-blank: #f5f7fa;\r\n --color: #a8abb2;\r\n --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #e7e7e7;\r\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"panel\"] {\r\n --pops-bg-color: #000000;\r\n --pops-color: #f2f2f2;\r\n --panel-title-bg-color: #000000;\r\n --panel-aside-bg-color: #262626;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #262626;\r\n --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n fill: #f2f2f2;\r\n }\r\n\r\n /* switch的CSS */\r\n .pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n }\r\n /* select的CSS */\r\n .pops-panel-select {\r\n --pops-panel-components-select-text-color: #f2f2f2;\r\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: #141414;\r\n }\r\n /* select-multiple的CSS*/\r\n .pops-panel-select-multiple {\r\n --el-fill-color-blank: #141414;\r\n --el-border-color: #4c4d4f;\r\n --el-text-color-placeholder: #a8abb2;\r\n --el-select-input-color: #a8abb2;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n }\r\n .pops-panel-select-multiple .el-tag {\r\n --el-color-info-light-9: #202121;\r\n }\r\n .pops-panel-select-multiple-disable {\r\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n }\r\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #2f2f2f;\r\n }\r\n /* select-multiple的CSS*/\r\n /* slider的CSS */\r\n .pops-slider {\r\n --pops-slider-border-color-light: #414243;\r\n }\r\n /* input的CSS */\r\n .pops-panel-input {\r\n --pops-panel-components-input-text-color: #f2f2f2;\r\n --pops-panel-components-input-bd-color: #4f5052;\r\n --pops-panel-components-input-bg-color: #141414;\r\n --pops-panel-components-input-hover-bd-color: #6f7175;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n }\r\n /* textarea的CSS */\r\n .pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #f2f2f2;\r\n --pops-panel-components-textarea-text-bg-color: #141414;\r\n --pops-panel-components-textarea-bd-color: #4f5052;\r\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n }\r\n .pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n }\r\n /* slider */\r\n .pops-slider {\r\n --pops-slider-text-color-placeholder: #8d9095;\r\n }\r\n}\r\n";
2873
+ var panelCSS = ".pops[type-value=\"panel\"] {\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333333;\r\n --panel-title-bg-color: #ffffff;\r\n\r\n --panel-aside-bg-color: #ffffff;\r\n --panel-aside-hover-color: rgb(64, 158, 255);\r\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-left-text-gap: 6px;\r\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--panel-aside-bg-color);\r\n border-right: 1px solid var(--panel-aside-bg-color);\r\n font-size: 0.9em;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n background: var(--panel-aside-bg-color);\r\n border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n list-style-type: none;\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n overflow: auto;\r\n /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n /* 去除<li>左侧的圆点 */\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px 0px;\r\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul.pops-panel-forms-container-item-formlist\r\n li:last-child {\r\n border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value=\"panel\"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value=\"panel\"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\r\n max-width: -moz-available;\r\n max-width: -webkit-fill-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n padding: 0 4px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n min-width: 88px !important;\r\n width: -moz-available;\r\n width: -webkit-fill-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid var(--panel-switch-core-bd-color);\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: var(--panel-switch-core-bg-color);\r\n cursor: pointer;\r\n transition:\r\n border-color 0.3s,\r\n background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: var(--panel-switch-circle-bg-color);\r\n color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: var(--panel-switch-checked-core-bd-color);\r\n background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: \"\";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n --el-color-danger: #f56c6c;\r\n\r\n --pops-panel-components-input-text-color: #000000;\r\n --pops-panel-components-input-text-bg-color: transparent;\r\n --pops-panel-components-input-text-default-padding: 8px;\r\n --pops-panel-components-input-bd-color: #dcdfe6;\r\n --pops-panel-components-input-bg-color: #ffffff;\r\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n position: relative;\r\n box-shadow: none;\r\n width: 200px;\r\n border: 0px;\r\n}\r\n.pops-panel-input_inner {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n border: 1px solid var(--pops-panel-components-input-bd-color);\r\n border-radius: 4px;\r\n background-color: var(--pops-panel-components-input-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-input_inner:hover {\r\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input_inner:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n color: var(--pops-panel-components-input-text-color);\r\n background-color: var(--pops-panel-components-input-text-bg-color);\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n /*margin-right: calc(1em + 8px);*/\r\n margin: 0px;\r\n padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\r\n -webkit-appearance: none;\r\n display: none;\r\n}\r\n/* 颜色选择器不需要那么宽 */\r\n.pops-panel-input:has(input[type=\"color\"]) {\r\n width: 50px;\r\n}\r\n.pops-panel-input input[type=\"color\"] {\r\n padding: 0px;\r\n}\r\n.pops-panel-input_inner:has(input[type=\"file\"]) {\r\n border: 0px;\r\n background: transparent;\r\n}\r\n.pops-panel-input input[type=\"file\"] {\r\n padding: 0px;\r\n line-height: 32px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n height: -moz-available;\r\n height: -webkit-fill-available;\r\n text-align: center;\r\n color: var(--pops-panel-components-input-suffix-color);\r\n background: var(--pops-panel-components-input-suffix-bg-color);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n padding: 0 8px;\r\n position: relative;\r\n right: 0px;\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* 校验样式 */\r\n.pops-panel-input:has(.pops-panel-input-valid-error) {\r\n --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input .pops-panel-input-valid-error {\r\n width: 100%;\r\n color: var(--el-color-danger);\r\n font-weight: 500;\r\n font-size: 0.8em;\r\n box-sizing: border-box;\r\n vertical-align: middle;\r\n display: inline-flex;\r\n position: relative;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #000000;\r\n --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n color: var(--pops-panel-components-textarea-text-color);\r\n background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n --pops-panel-components-select-disabled-text-color: #a8abb2;\r\n --pops-panel-components-select-text-color: #000000;\r\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n border: 0;\r\n}\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid var(--pops-panel-components-select-bd-color);\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n color: var(--pops-panel-components-select-text-color);\r\n background-color: var(--pops-panel-components-select-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n box-shadow: none;\r\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select dialog 的CSS */\r\n.pops-panel-select[data-mode=\"dialog\"] {\r\n}\r\n/* select dialog 的CSS */\r\n\r\n/* select horizontal 的CSS */\r\n.pops-panel-select[data-mode=\"horizontal\"] {\r\n --pops-panel-components-select-horizontal-selected-text-color: #626aef;\r\n --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\r\n padding: 0;\r\n gap: 0;\r\n border: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 1px solid var(--el-border-color);\r\n height: -moz-available;\r\n height: -webkit-fill-available;\r\n border-left: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\r\n color: var(--el-color-primary);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\r\n border-left: 1px solid var(--el-border-color);\r\n border-top-left-radius: var(--el-border-radius-base);\r\n border-bottom-left-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\r\n border-top-right-radius: var(--el-border-radius-base);\r\n border-bottom-right-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\r\n color: var(--pops-panel-components-select-horizontal-selected-text-color);\r\n background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\r\n border-right: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\r\n color: var(--pops-panel-components-select-disabled-text-color);\r\n --pops-panel-components-select-horizontal-selected-text-color: var(\r\n --pops-panel-components-select-disabled-text-color\r\n );\r\n cursor: not-allowed;\r\n background: unset;\r\n}\r\n/* select horizontal 的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple,\r\n.pops-panel-select {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #cbcbcb;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n}\r\n.pops-panel-select .el-select__wrapper,\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select .el-select__wrapper.is-focused,\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select .el-select__selection,\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\r\n justify-content: left;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\r\n justify-content: center;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\r\n justify-content: right;\r\n}\r\n.pops-panel-select .el-select__selected-item,\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select .el-select__selected-item span {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select .el-select__input-wrapper,\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select .el-select__selection.is-near,\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select .el-select__placeholder,\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select .el-select__placeholder.is-transparent,\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select .el-select__prefix,\r\n.pops-panel-select .el-select__suffix,\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select .el-icon,\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select .el-icon svg,\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select .el-select__caret,\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: transform var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select[data-show-option] .el-select__caret,\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n/* 禁用样式 */\r\n.pops-panel-select-disable {\r\n --el-fill-color-blank: #f5f7fa;\r\n --color: #a8abb2;\r\n --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #e7e7e7;\r\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-disable .el-select__selection .el-tag,\r\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-disable .el-select__wrapper,\r\n.pops-panel-select-disable .el-select__caret {\r\n cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -moz-available;\r\n width: -webkit-fill-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"panel\"] {\r\n --pops-bg-color: #000000;\r\n --pops-color: #f2f2f2;\r\n --panel-title-bg-color: #000000;\r\n --panel-aside-bg-color: #262626;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #262626;\r\n --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n fill: #f2f2f2;\r\n }\r\n\r\n /* switch的CSS */\r\n .pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n }\r\n /* select的CSS */\r\n .pops-panel-select {\r\n --pops-panel-components-select-text-color: #f2f2f2;\r\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: #141414;\r\n }\r\n /* select-multiple的CSS*/\r\n .pops-panel-select-multiple {\r\n --el-fill-color-blank: #141414;\r\n --el-border-color: #4c4d4f;\r\n --el-text-color-placeholder: #a8abb2;\r\n --el-select-input-color: #a8abb2;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n }\r\n .pops-panel-select-multiple .el-tag {\r\n --el-color-info-light-9: #202121;\r\n }\r\n .pops-panel-select-multiple-disable {\r\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n }\r\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #2f2f2f;\r\n }\r\n /* select-multiple的CSS*/\r\n /* slider的CSS */\r\n .pops-slider {\r\n --pops-slider-border-color-light: #414243;\r\n }\r\n /* input的CSS */\r\n .pops-panel-input {\r\n --pops-panel-components-input-text-color: #f2f2f2;\r\n --pops-panel-components-input-bd-color: #4f5052;\r\n --pops-panel-components-input-bg-color: #141414;\r\n --pops-panel-components-input-hover-bd-color: #6f7175;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n }\r\n /* textarea的CSS */\r\n .pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #f2f2f2;\r\n --pops-panel-components-textarea-text-bg-color: #141414;\r\n --pops-panel-components-textarea-bd-color: #4f5052;\r\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n }\r\n .pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n }\r\n /* slider */\r\n .pops-slider {\r\n --pops-slider-text-color-placeholder: #8d9095;\r\n }\r\n}\r\n";
2874
2874
 
2875
- var rightClickMenuCSS = ".pops-rightClickMenu {\r\n --pops-right-context-color: #000000;\r\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n --pops-right-context-backdrop-filter: blur(10px);\r\n --pops-right-context-z-index: 10000;\r\n --pops-right-context-bd-radius: 6px;\r\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n --pops-right-context-menu-row-bd-radius: 6px;\r\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n position: fixed;\r\n z-index: var(--pops-right-context-z-index);\r\n text-align: center;\r\n border-radius: var(--pops-right-context-bd-radius);\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--pops-right-context-color);\r\n background: var(--pops-right-context-bg-color);\r\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n transition:\r\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n display: grid;\r\n transition: 0.3s;\r\n grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n background: var(--pops-right-context-menu-row-hover-color);\r\n cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n padding: 5px 10px;\r\n margin: 5px 5px;\r\n border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n display: flex;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n text-align: left;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n .pops-rightClickMenu ul li:active {\r\n transform: scale(0.98);\r\n }\r\n}\r\n";
2875
+ var rightClickMenuCSS = ".pops-rightClickMenu {\r\n --pops-right-context-color: #000000;\r\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n --pops-right-context-backdrop-filter: blur(10px);\r\n --pops-right-context-z-index: 10000;\r\n --pops-right-context-bd-radius: 6px;\r\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n --pops-right-context-menu-row-bd-radius: 6px;\r\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n position: fixed;\r\n z-index: var(--pops-right-context-z-index);\r\n text-align: center;\r\n border-radius: var(--pops-right-context-bd-radius);\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--pops-right-context-color);\r\n background: var(--pops-right-context-bg-color);\r\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n transition:\r\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n display: grid;\r\n transition: 0.3s;\r\n grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n background: var(--pops-right-context-menu-row-hover-color);\r\n cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n padding: 5px 10px;\r\n margin: 5px 5px;\r\n border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n display: flex;\r\n width: -moz-available;\r\n width: -webkit-fill-available;\r\n text-align: left;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n .pops-rightClickMenu ul li:active {\r\n transform: scale(0.98);\r\n }\r\n}\r\n";
2876
+
2877
+ var panelComponents_Select_CSS = ".pops {\r\n max-height: 300px;\r\n}\r\n.select-container {\r\n --el-font-size-base: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-primary: #409eff;\r\n --el-fill-color-light: #f5f7fa;\r\n --el-disable-color: #a8abb2;\r\n}\r\n.select-item {\r\n cursor: pointer;\r\n font-size: var(--el-font-size-base);\r\n padding: 0 20px 0 20px;\r\n position: relative;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n color: var(--el-text-color-regular);\r\n min-height: 34px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n}\r\n.select-item[aria-disabled],\r\n.select-item[disabled] {\r\n cursor: not-allowed;\r\n color: var(--el-disable-color);\r\n background: unset;\r\n}\r\n.select-item:hover {\r\n background-color: var(--el-fill-color-light);\r\n}\r\n.select-item.select-item-is-selected:has(.pops-panel-input input) {\r\n background-color: #e7e7e7;\r\n}\r\n.select-item.select-item-is-selected {\r\n color: var(--el-color-primary);\r\n font-weight: 700;\r\n}\r\n.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: 12px;\r\n border-top: none;\r\n border-right: none;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-color: var(--el-color-primary);\r\n mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n no-repeat;\r\n mask-size: 100% 100%;\r\n -webkit-mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n no-repeat;\r\n -webkit-mask-size: 100% 100%;\r\n transform: translateY(-50%);\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.select-item .pops-panel-input {\r\n width: 100%;\r\n margin: 5px 0px;\r\n}\r\n.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {\r\n margin-bottom: 0px;\r\n}\r\n\r\n.select-item .select-item-text {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .select-container {\r\n --el-text-color-regular: #f2f2f2;\r\n --el-disable-color: #8d9095;\r\n --el-fill-color-light: #262727;\r\n }\r\n}\r\n";
2876
2878
 
2877
2879
  const PopsCSS = {
2878
2880
  /** 主CSS */
@@ -2903,10 +2905,12 @@ define((function () { 'use strict';
2903
2905
  drawerCSS: drawerCSS,
2904
2906
  /** pops.folder */
2905
2907
  folderCSS: folderCSS,
2906
- /** pops.folder */
2908
+ /** pops.panel */
2907
2909
  panelCSS: panelCSS,
2908
2910
  /** pops.rightClickMenu */
2909
2911
  rightClickMenu: rightClickMenuCSS,
2912
+ /** pops.panel的select组件 */
2913
+ panelComponents_Select: panelComponents_Select_CSS,
2910
2914
  };
2911
2915
 
2912
2916
  const PopsAnimation = {
@@ -6109,7 +6113,6 @@ define((function () { 'use strict';
6109
6113
  className: "forms-1",
6110
6114
  text: "区域设置",
6111
6115
  type: "container",
6112
- attributes: {},
6113
6116
  views: [
6114
6117
  {
6115
6118
  className: "panel-switch",
@@ -6117,11 +6120,6 @@ define((function () { 'use strict';
6117
6120
  type: "switch",
6118
6121
  disabled: false,
6119
6122
  description: "",
6120
- afterAddToUListCallBack() {
6121
- // TODO
6122
- },
6123
- props: {},
6124
- attributes: {},
6125
6123
  getValue() {
6126
6124
  return true;
6127
6125
  },
@@ -6134,17 +6132,12 @@ define((function () { 'use strict';
6134
6132
  text: "slider",
6135
6133
  type: "slider",
6136
6134
  description: "",
6137
- afterAddToUListCallBack() {
6138
- // TODO
6139
- },
6140
6135
  disabled: false,
6141
6136
  getToolTipContent(value) {
6142
6137
  return String(value);
6143
6138
  },
6144
6139
  isShowHoverTip: true,
6145
6140
  step: 1,
6146
- props: {},
6147
- attributes: {},
6148
6141
  getValue() {
6149
6142
  return 50;
6150
6143
  },
@@ -6161,11 +6154,6 @@ define((function () { 'use strict';
6161
6154
  description: "",
6162
6155
  disable: false,
6163
6156
  buttonIsRightIcon: false,
6164
- props: {},
6165
- afterAddToUListCallBack() {
6166
- // TODO
6167
- },
6168
- attributes: {},
6169
6157
  buttonIcon: "view",
6170
6158
  buttonIconIsLoading: true,
6171
6159
  buttonType: "default",
@@ -6178,8 +6166,6 @@ define((function () { 'use strict';
6178
6166
  className: "panel-button",
6179
6167
  text: "button",
6180
6168
  type: "button",
6181
- props: {},
6182
- attributes: {},
6183
6169
  buttonIcon: "eleme",
6184
6170
  buttonIconIsLoading: true,
6185
6171
  buttonType: "warning",
@@ -6191,10 +6177,7 @@ define((function () { 'use strict';
6191
6177
  {
6192
6178
  className: "panel-button",
6193
6179
  text: "button",
6194
- // @ts-ignore
6195
- props: {},
6196
6180
  type: "button",
6197
- attributes: {},
6198
6181
  buttonIcon: "chromeFilled",
6199
6182
  buttonIconIsLoading: true,
6200
6183
  buttonType: "danger",
@@ -6207,9 +6190,6 @@ define((function () { 'use strict';
6207
6190
  className: "panel-button",
6208
6191
  text: "button",
6209
6192
  type: "button",
6210
- attributes: {},
6211
- // @ts-ignore
6212
- props: {},
6213
6193
  buttonIcon: "upload",
6214
6194
  buttonIconIsLoading: false,
6215
6195
  buttonType: "info",
@@ -6236,9 +6216,6 @@ define((function () { 'use strict';
6236
6216
  className: "panel-input",
6237
6217
  text: "input",
6238
6218
  type: "input",
6239
- isNumber: false,
6240
- props: {},
6241
- attributes: {},
6242
6219
  getValue() {
6243
6220
  return "50";
6244
6221
  },
@@ -6248,12 +6225,32 @@ define((function () { 'use strict';
6248
6225
  },
6249
6226
  placeholder: "请输入内容",
6250
6227
  },
6228
+ {
6229
+ className: "panel-input-number",
6230
+ text: "input-number",
6231
+ type: "input",
6232
+ inputType: "number",
6233
+ getValue() {
6234
+ return "50";
6235
+ },
6236
+ callback(event, value, valueAsNumber) {
6237
+ popsDOMUtils.preventEvent(event);
6238
+ console.log("输入框内容改变：", valueAsNumber);
6239
+ if (valueAsNumber > 60) {
6240
+ return {
6241
+ valid: false,
6242
+ message: "输入值不能大于60，当前：" + value,
6243
+ };
6244
+ }
6245
+ },
6246
+ placeholder: "请输入内容",
6247
+ },
6251
6248
  {
6252
6249
  className: "panel-input-password",
6253
6250
  text: "input-password",
6254
6251
  type: "input",
6255
- props: {},
6256
- attributes: {},
6252
+ inputType: "password",
6253
+ placeholder: "请输入密码",
6257
6254
  getValue() {
6258
6255
  return "123456";
6259
6256
  },
@@ -6261,209 +6258,510 @@ define((function () { 'use strict';
6261
6258
  popsDOMUtils.preventEvent(event);
6262
6259
  console.log("密码输入框内容改变：", value);
6263
6260
  },
6264
- isPassword: true,
6265
- placeholder: "请输入密码",
6266
6261
  },
6267
6262
  {
6268
- className: "panel-textarea",
6269
- text: "textarea",
6270
- type: "textarea",
6271
- props: {},
6272
- attributes: {},
6263
+ className: "panel-input-file",
6264
+ text: "input-file",
6265
+ type: "input",
6266
+ inputType: "file",
6273
6267
  getValue() {
6274
- return "50";
6268
+ return "";
6275
6269
  },
6276
6270
  callback(event, value) {
6277
6271
  popsDOMUtils.preventEvent(event);
6278
- console.log("textarea输入框内容改变：", value);
6272
+ console.log("内容改变：", value);
6279
6273
  },
6274
+ placeholder: "请输入密码",
6275
+ },
6276
+ {
6277
+ className: "panel-input-date",
6278
+ text: "input-date",
6279
+ type: "input",
6280
+ inputType: "date",
6280
6281
  placeholder: "请输入内容",
6282
+ getValue() {
6283
+ const date = new Date();
6284
+ let hour = date.getHours().toString();
6285
+ let minutes = date.getMinutes().toString();
6286
+ if (hour.length === 1) {
6287
+ hour = `0${hour}`;
6288
+ }
6289
+ if (minutes.length === 1) {
6290
+ minutes = `0${minutes}`;
6291
+ }
6292
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
6293
+ },
6294
+ callback(event, value, valueAsNumber, valueAsDate) {
6295
+ popsDOMUtils.preventEvent(event);
6296
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6297
+ },
6281
6298
  },
6282
6299
  {
6283
- className: "panel-select-disabled",
6284
- text: "select-disabled",
6285
- type: "select",
6286
- disabled: true,
6287
- props: {},
6288
- attributes: {},
6300
+ className: "panel-input-datetime-local",
6301
+ text: "input-datetime-local",
6302
+ type: "input",
6303
+ inputType: "datetime-local",
6289
6304
  getValue() {
6290
- return 50;
6305
+ const date = new Date();
6306
+ let hour = date.getHours().toString();
6307
+ let minutes = date.getMinutes().toString();
6308
+ if (hour.length === 1) {
6309
+ hour = `0${hour}`;
6310
+ }
6311
+ if (minutes.length === 1) {
6312
+ minutes = `0${minutes}`;
6313
+ }
6314
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}T${hour}:${minutes}`;
6291
6315
  },
6292
- callback(event, isSelectedValue, isSelectedText) {
6293
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6316
+ callback(event, value, valueAsNumber, valueAsDate) {
6317
+ popsDOMUtils.preventEvent(event);
6318
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6294
6319
  },
6295
- data: [
6296
- {
6297
- value: "all",
6298
- text: "所有",
6299
- disable() {
6300
- return false;
6301
- },
6302
- views: [],
6303
- },
6304
- {
6305
- value: "text",
6306
- text: "文本",
6307
- disable() {
6308
- return false;
6309
- },
6310
- views: [],
6311
- },
6312
- {
6313
- value: "html",
6314
- text: "超文本",
6315
- disable() {
6316
- return false;
6317
- },
6318
- views: [],
6319
- },
6320
- ],
6320
+ placeholder: "请输入内容",
6321
6321
  },
6322
6322
  {
6323
- className: "panel-select-multiple-disabled",
6324
- type: "select-multiple",
6325
- text: "select-multiple-disabled",
6326
- disabled: true,
6327
- props: {},
6328
- attributes: {},
6329
- placeholder: "请至少选择一个选项",
6323
+ className: "panel-input-time",
6324
+ text: "input-time",
6325
+ type: "input",
6326
+ inputType: "time",
6330
6327
  getValue() {
6331
- return ["select-1", "select-2"];
6328
+ return "11:30";
6332
6329
  },
6333
- callback(selectInfo) {
6334
- console.log(`select值改变，多选信息`, selectInfo);
6330
+ callback(event, value, valueAsNumber, valueAsDate) {
6331
+ popsDOMUtils.preventEvent(event);
6332
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6335
6333
  },
6336
- clickCallBack(event, isSelectedInfo) {
6337
- console.log("点击", event, isSelectedInfo);
6334
+ placeholder: "请输入内容",
6335
+ },
6336
+ {
6337
+ className: "panel-input-month",
6338
+ text: "input-month",
6339
+ type: "input",
6340
+ inputType: "month",
6341
+ getValue() {
6342
+ const date = new Date();
6343
+ return `${date.getFullYear()}-${date.getMonth() + 1}`;
6338
6344
  },
6339
- closeIconClickCallBack(event, data) {
6340
- console.log("点击关闭图标的事件", data);
6345
+ callback(event, value, valueAsNumber, valueAsDate) {
6346
+ popsDOMUtils.preventEvent(event);
6347
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6341
6348
  },
6342
- data: [
6343
- {
6344
- value: "select-1",
6345
- text: "单选1",
6346
- isHTML: false,
6347
- },
6348
- {
6349
- value: "select-2",
6350
- text: "单选2",
6351
- isHTML: false,
6352
- },
6353
- {
6354
- value: "select-3",
6355
- text: "单选3",
6356
- isHTML: false,
6357
- },
6358
- {
6359
- value: "select-4",
6360
- text: "单选4",
6361
- isHTML: false,
6362
- },
6363
- ],
6349
+ placeholder: "请输入内容",
6364
6350
  },
6365
6351
  {
6366
- className: "panel-select",
6367
- text: "select",
6368
- type: "select",
6369
- props: {},
6370
- attributes: {},
6352
+ className: "panel-input-week",
6353
+ text: "input-week",
6354
+ type: "input",
6355
+ inputType: "week",
6371
6356
  getValue() {
6372
- return 50;
6357
+ const date = new Date();
6358
+ return `${date.getFullYear()}-W01`;
6373
6359
  },
6374
- callback(event, isSelectedValue, isSelectedText) {
6375
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6360
+ callback(event, value, valueAsNumber, valueAsDate) {
6361
+ popsDOMUtils.preventEvent(event);
6362
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6376
6363
  },
6377
- data: [
6378
- {
6379
- value: "all",
6380
- text: "所有",
6381
- disable() {
6382
- return false;
6383
- },
6384
- views: [],
6385
- },
6386
- {
6387
- value: "text",
6388
- text: "文本",
6389
- disable() {
6390
- return false;
6391
- },
6392
- views: [],
6393
- },
6394
- {
6395
- value: "html",
6396
- text: "超文本",
6397
- disable() {
6398
- return false;
6399
- },
6400
- views: [],
6401
- },
6402
- ],
6364
+ placeholder: "请输入内容",
6365
+ },
6366
+ {
6367
+ className: "panel-input-search",
6368
+ text: "input-search",
6369
+ type: "input",
6370
+ inputType: "search",
6371
+ getValue() {
6372
+ return "search test";
6373
+ },
6374
+ callback(event, value) {
6375
+ popsDOMUtils.preventEvent(event);
6376
+ console.log("输入框内容改变：", value);
6377
+ },
6378
+ placeholder: "请输入内容",
6379
+ },
6380
+ {
6381
+ className: "panel-input-color",
6382
+ text: "input-color",
6383
+ type: "input",
6384
+ inputType: "color",
6385
+ getValue() {
6386
+ return "#ff0000";
6387
+ },
6388
+ callback(event, value) {
6389
+ popsDOMUtils.preventEvent(event);
6390
+ console.log("输入框内容改变：", value);
6391
+ },
6392
+ placeholder: "请输入内容",
6393
+ },
6394
+ {
6395
+ className: "panel-input-email",
6396
+ text: "input-email",
6397
+ type: "input",
6398
+ inputType: "email",
6399
+ getValue() {
6400
+ return "test@gmail.com";
6401
+ },
6402
+ callback(event, value) {
6403
+ popsDOMUtils.preventEvent(event);
6404
+ const $input = event.target;
6405
+ console.log("输入框内容改变：", value, $input.validity);
6406
+ },
6407
+ placeholder: "请输入内容",
6408
+ },
6409
+ {
6410
+ className: "panel-input-tel",
6411
+ text: "input-tel",
6412
+ type: "input",
6413
+ inputType: "tel",
6414
+ getValue() {
6415
+ return "11111111111";
6416
+ },
6417
+ callback(event, value) {
6418
+ popsDOMUtils.preventEvent(event);
6419
+ const $input = event.target;
6420
+ console.log("输入框内容改变：", value, $input.validity);
6421
+ },
6422
+ placeholder: "请输入内容",
6403
6423
  },
6404
6424
  {
6405
- className: "panel-select-multiple",
6406
- type: "select-multiple",
6407
- text: "select-multiple",
6408
- props: {},
6409
- attributes: {},
6410
- placeholder: "请至少选择一个选项",
6425
+ className: "panel-input-url",
6426
+ text: "input-url",
6427
+ type: "input",
6428
+ inputType: "url",
6411
6429
  getValue() {
6412
- return ["select-1", "select-2"];
6430
+ return "https://github.com/";
6413
6431
  },
6414
- callback(selectInfo) {
6415
- console.log(`select值改变，多选信息`, selectInfo);
6432
+ callback(event, value) {
6433
+ popsDOMUtils.preventEvent(event);
6434
+ const $input = event.target;
6435
+ console.log("输入框内容改变：", value, $input.validity);
6416
6436
  },
6417
- clickCallBack(event, isSelectedInfo) {
6418
- console.log("点击", event, isSelectedInfo);
6437
+ placeholder: "请输入内容",
6438
+ },
6439
+ {
6440
+ className: "panel-textarea",
6441
+ text: "textarea",
6442
+ type: "textarea",
6443
+ getValue() {
6444
+ return "50";
6419
6445
  },
6420
- closeIconClickCallBack(event, data) {
6421
- console.log("点击关闭图标的事件", data);
6446
+ callback(event, value) {
6447
+ popsDOMUtils.preventEvent(event);
6448
+ console.log("textarea输入框内容改变：", value);
6422
6449
  },
6423
- data: [
6450
+ placeholder: "请输入内容",
6451
+ },
6452
+ {
6453
+ type: "container",
6454
+ text: "",
6455
+ views: [
6456
+ {
6457
+ className: "panel-select-disabled",
6458
+ text: "select-disabled",
6459
+ type: "select",
6460
+ disabled: true,
6461
+ getValue() {
6462
+ return "text";
6463
+ },
6464
+ callback(isSelectedInfo) {
6465
+ if (isSelectedInfo == null)
6466
+ return;
6467
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6468
+ },
6469
+ data: [
6470
+ {
6471
+ value: "all",
6472
+ text: "所有",
6473
+ disable() {
6474
+ return false;
6475
+ },
6476
+ },
6477
+ {
6478
+ value: "text",
6479
+ text: "文本",
6480
+ disable() {
6481
+ return false;
6482
+ },
6483
+ },
6484
+ {
6485
+ value: "html",
6486
+ text: "超文本",
6487
+ disable() {
6488
+ return false;
6489
+ },
6490
+ },
6491
+ ],
6492
+ },
6424
6493
  {
6425
- value: "select-1",
6426
- text: "单选1",
6427
- isHTML: false,
6428
- disable(value, allSelectedInfo) {
6429
- return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6494
+ className: "panel-select-multiple-disabled",
6495
+ type: "select-multiple",
6496
+ text: "select-multiple-disabled",
6497
+ disabled: true,
6498
+ placeholder: "请至少选择一个选项",
6499
+ getValue() {
6500
+ return ["select-1", "select-2"];
6501
+ },
6502
+ callback(selectInfo) {
6503
+ console.log(`select值改变，多选信息`, selectInfo);
6504
+ },
6505
+ clickCallBack(event, isSelectedInfo) {
6506
+ console.log("点击", event, isSelectedInfo);
6507
+ },
6508
+ closeIconClickCallBack(event, data) {
6509
+ console.log("点击关闭图标的事件", data);
6430
6510
  },
6511
+ data: [
6512
+ {
6513
+ value: "select-1",
6514
+ text: "单选1",
6515
+ isHTML: false,
6516
+ },
6517
+ {
6518
+ value: "select-2",
6519
+ text: "单选2",
6520
+ isHTML: false,
6521
+ },
6522
+ {
6523
+ value: "select-3",
6524
+ text: "单选3",
6525
+ isHTML: false,
6526
+ },
6527
+ {
6528
+ value: "select-4",
6529
+ text: "单选4",
6530
+ isHTML: false,
6531
+ },
6532
+ ],
6431
6533
  },
6432
6534
  {
6433
- value: "select-2",
6434
- text: "单选2",
6435
- isHTML: false,
6436
- disable(value, allSelectedInfo) {
6437
- return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6535
+ className: "panel-select-native",
6536
+ text: "select-native",
6537
+ type: "select",
6538
+ mode: "native",
6539
+ getValue() {
6540
+ return "all";
6438
6541
  },
6542
+ callback(isSelectedInfo) {
6543
+ if (isSelectedInfo == null)
6544
+ return;
6545
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6546
+ },
6547
+ data: [
6548
+ {
6549
+ value: "all",
6550
+ text: "所有",
6551
+ disable() {
6552
+ return false;
6553
+ },
6554
+ },
6555
+ {
6556
+ value: "text",
6557
+ text: "文本",
6558
+ disable() {
6559
+ return false;
6560
+ },
6561
+ },
6562
+ {
6563
+ value: "html",
6564
+ text: "超文本",
6565
+ disable() {
6566
+ return false;
6567
+ },
6568
+ },
6569
+ ],
6439
6570
  },
6440
6571
  {
6441
- value: "select-3",
6442
- text: "单选3",
6443
- isHTML: false,
6444
- disable(value, allSelectedInfo) {
6445
- return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
6572
+ className: "panel-select-dialog",
6573
+ text: "select-dialog",
6574
+ type: "select",
6575
+ mode: "dialog",
6576
+ getValue() {
6577
+ return window.localStorage.getItem("select-dialog-customInput") || "";
6578
+ },
6579
+ callback(isSelectedInfo) {
6580
+ if (isSelectedInfo == null) {
6581
+ console.warn(`select当前选项为空`);
6582
+ return;
6583
+ }
6584
+ if (isSelectedInfo.addCustomInput) {
6585
+ if (isSelectedInfo.value === "") {
6586
+ // 空值，不存储
6587
+ if (isSelectedInfo.customInputStoreKey) {
6588
+ console.log(`select删除自定义输入的值`);
6589
+ window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
6590
+ }
6591
+ }
6592
+ else {
6593
+ console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6594
+ if (isSelectedInfo.customInputStoreKey) {
6595
+ window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
6596
+ }
6597
+ }
6598
+ }
6599
+ else {
6600
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6601
+ }
6446
6602
  },
6603
+ data: [
6604
+ {
6605
+ value: "all",
6606
+ text: "所有",
6607
+ disable() {
6608
+ return false;
6609
+ },
6610
+ },
6611
+ {
6612
+ value: "text",
6613
+ text: "文本",
6614
+ disable(value, selectInfo) {
6615
+ if (selectInfo?.value === "all")
6616
+ return true;
6617
+ return false;
6618
+ },
6619
+ },
6620
+ {
6621
+ value: "html",
6622
+ text: "超文本",
6623
+ disable(value, selectInfo) {
6624
+ if (selectInfo?.value === "all")
6625
+ return true;
6626
+ return false;
6627
+ },
6628
+ },
6629
+ {
6630
+ value: "own",
6631
+ text: "自定义",
6632
+ disable(value, selectInfo) {
6633
+ if (selectInfo?.value === "all")
6634
+ return true;
6635
+ return false;
6636
+ },
6637
+ },
6638
+ {
6639
+ value: window.localStorage.getItem("select-dialog-customInput") || "",
6640
+ text: window.localStorage.getItem("select-dialog-customInput") || "",
6641
+ addCustomInput: true,
6642
+ customInputStoreKey: "select-dialog-customInput",
6643
+ onValid(dataOption) {
6644
+ if (dataOption.value === "123") {
6645
+ console.error("非规范值");
6646
+ return {
6647
+ valid: false,
6648
+ message: "非规范值",
6649
+ };
6650
+ }
6651
+ return {
6652
+ valid: true,
6653
+ };
6654
+ },
6655
+ },
6656
+ ],
6447
6657
  },
6448
6658
  {
6449
- value: "select-4",
6450
- text: "单选4",
6451
- isHTML: false,
6452
- disable(value, allSelectedInfo) {
6453
- return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
6659
+ className: "panel-select-horizontal",
6660
+ text: "select-horizontal",
6661
+ type: "select",
6662
+ mode: "horizontal",
6663
+ getValue() {
6664
+ return "text";
6454
6665
  },
6666
+ callback(isSelectedInfo) {
6667
+ if (isSelectedInfo == null)
6668
+ return;
6669
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6670
+ },
6671
+ data: [
6672
+ {
6673
+ value: "all",
6674
+ text: "所有",
6675
+ disable() {
6676
+ return false;
6677
+ },
6678
+ },
6679
+ {
6680
+ value: "text",
6681
+ text: "文本",
6682
+ disable() {
6683
+ return false;
6684
+ },
6685
+ },
6686
+ {
6687
+ value: "html",
6688
+ text: "超文本",
6689
+ disable() {
6690
+ return false;
6691
+ },
6692
+ },
6693
+ {
6694
+ value: "own",
6695
+ text: "自定义",
6696
+ disable() {
6697
+ return true;
6698
+ },
6699
+ },
6700
+ ],
6455
6701
  },
6456
6702
  {
6457
- value: "select-5",
6458
- text(value, allSelectedInfo) {
6459
- return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
6460
- ? "单选5-禁用"
6461
- : "单选5";
6703
+ className: "panel-select-multiple",
6704
+ type: "select-multiple",
6705
+ text: "select-multiple",
6706
+ placeholder: "请至少选择一个选项",
6707
+ getValue() {
6708
+ return ["select-1", "select-2"];
6709
+ },
6710
+ callback(selectInfo) {
6711
+ console.log(`select值改变，多选信息`, selectInfo);
6462
6712
  },
6463
- isHTML: false,
6464
- disable(value, allSelectedInfo) {
6465
- return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
6713
+ clickCallBack(event, isSelectedInfo) {
6714
+ console.log("点击", event, isSelectedInfo);
6466
6715
  },
6716
+ closeIconClickCallBack(event, data) {
6717
+ console.log("点击关闭图标的事件", data);
6718
+ },
6719
+ data: [
6720
+ {
6721
+ value: "select-1",
6722
+ text: "单选1",
6723
+ isHTML: false,
6724
+ disable(value, allSelectedInfo) {
6725
+ return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6726
+ },
6727
+ },
6728
+ {
6729
+ value: "select-2",
6730
+ text: "单选2",
6731
+ isHTML: false,
6732
+ disable(value, allSelectedInfo) {
6733
+ return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6734
+ },
6735
+ },
6736
+ {
6737
+ value: "select-3",
6738
+ text: "单选3",
6739
+ isHTML: false,
6740
+ disable(value, allSelectedInfo) {
6741
+ return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
6742
+ },
6743
+ },
6744
+ {
6745
+ value: "select-4",
6746
+ text: "单选4",
6747
+ isHTML: false,
6748
+ disable(value, allSelectedInfo) {
6749
+ return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
6750
+ },
6751
+ },
6752
+ {
6753
+ value: "select-5",
6754
+ text(value, allSelectedInfo) {
6755
+ return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
6756
+ ? "单选5-禁用"
6757
+ : "单选5";
6758
+ },
6759
+ isHTML: false,
6760
+ disable(value, allSelectedInfo) {
6761
+ return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
6762
+ },
6763
+ },
6764
+ ],
6467
6765
  },
6468
6766
  ],
6469
6767
  },
@@ -6489,16 +6787,11 @@ define((function () { 'use strict';
6489
6787
  className: "forms-1",
6490
6788
  text: "区域设置",
6491
6789
  type: "container",
6492
- attributes: {},
6493
- props: {},
6494
6790
  views: [
6495
6791
  {
6496
6792
  className: "panel-switch",
6497
6793
  text: "switch",
6498
6794
  type: "switch",
6499
- // @ts-ignore
6500
- props: {},
6501
- attributes: {},
6502
6795
  getValue() {
6503
6796
  return true;
6504
6797
  },
@@ -6509,10 +6802,7 @@ define((function () { 'use strict';
6509
6802
  {
6510
6803
  className: "panel-slider",
6511
6804
  text: "slider",
6512
- // @ts-ignore
6513
- props: {},
6514
6805
  type: "slider",
6515
- attributes: {},
6516
6806
  getValue() {
6517
6807
  return 50;
6518
6808
  },
@@ -6525,10 +6815,7 @@ define((function () { 'use strict';
6525
6815
  {
6526
6816
  className: "panel-button",
6527
6817
  text: "button",
6528
- // @ts-ignore
6529
- props: {},
6530
6818
  type: "button",
6531
- attributes: {},
6532
6819
  buttonIcon: "eleme",
6533
6820
  buttonIconIsLoading: true,
6534
6821
  buttonType: "warning",
@@ -6541,9 +6828,6 @@ define((function () { 'use strict';
6541
6828
  className: "panel-button",
6542
6829
  text: "button",
6543
6830
  type: "button",
6544
- // @ts-ignore
6545
- props: {},
6546
- attributes: {},
6547
6831
  buttonIcon: "chromeFilled",
6548
6832
  buttonIconIsLoading: true,
6549
6833
  buttonType: "danger",
@@ -6555,10 +6839,7 @@ define((function () { 'use strict';
6555
6839
  {
6556
6840
  className: "panel-button",
6557
6841
  text: "button",
6558
- // @ts-ignore
6559
- props: {},
6560
6842
  type: "button",
6561
- attributes: {},
6562
6843
  buttonIcon: "upload",
6563
6844
  buttonIconIsLoading: false,
6564
6845
  buttonType: "info",
@@ -6574,9 +6855,7 @@ define((function () { 'use strict';
6574
6855
  {
6575
6856
  type: "deepMenu",
6576
6857
  className: "panel-deepMenu2",
6577
- attributes: {},
6578
6858
  //@ts-ignore
6579
- props: {},
6580
6859
  text: "deepMenu2",
6581
6860
  description: "二级菜单",
6582
6861
  rightText: "自定义配置",
@@ -6602,10 +6881,7 @@ define((function () { 'use strict';
6602
6881
  {
6603
6882
  className: "panel-switch",
6604
6883
  text: "switch",
6605
- // @ts-ignore
6606
- props: {},
6607
6884
  type: "switch",
6608
- attributes: {},
6609
6885
  getValue() {
6610
6886
  return true;
6611
6887
  },
@@ -6628,8 +6904,6 @@ define((function () { 'use strict';
6628
6904
  "data-value": "value",
6629
6905
  "data-value-2": "value2",
6630
6906
  },
6631
- // @ts-ignore
6632
- props: {},
6633
6907
  views: [],
6634
6908
  clickFirstCallback: function () {
6635
6909
  return false;
@@ -6643,8 +6917,6 @@ define((function () { 'use strict';
6643
6917
  "data-value": "value",
6644
6918
  "data-value-2": "value2",
6645
6919
  },
6646
- // @ts-ignore
6647
- props: {},
6648
6920
  views: [],
6649
6921
  clickFirstCallback: function () {
6650
6922
  return false;
@@ -7382,7 +7654,7 @@ define((function () { 'use strict';
7382
7654
  // 初始化内容配置
7383
7655
  data.config.content.forEach((asideItemConfig) => {
7384
7656
  const $asideLiElement = this.createAsideItem(asideItemConfig);
7385
- this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
7657
+ this.onAsideItemClick($asideLiElement, asideItemConfig);
7386
7658
  // 是否处于底部
7387
7659
  const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
7388
7660
  if (isBottom) {
@@ -7415,7 +7687,7 @@ define((function () { 'use strict';
7415
7687
  // 初始化底部内容配置
7416
7688
  (data.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
7417
7689
  const $bottomLiElement = this.createBottomItem(bottomItemConfig);
7418
- this.setBottomItemClickEvent($bottomLiElement, bottomItemConfig);
7690
+ this.onBottomItemClick($bottomLiElement, bottomItemConfig);
7419
7691
  if (bottomItemConfig.position === "left" || bottomItemConfig.position == null) {
7420
7692
  this.$el.$panelBottomLeftContainer.appendChild($bottomLiElement);
7421
7693
  }
@@ -7568,7 +7840,7 @@ define((function () { 'use strict';
7568
7840
  * @param $bottomItem 底部<li>元素
7569
7841
  * @param bottomItemConfig 配置
7570
7842
  */
7571
- setBottomItemClickEvent($bottomItem, bottomItemConfig) {
7843
+ onBottomItemClick($bottomItem, bottomItemConfig) {
7572
7844
  popsDOMUtils.on($bottomItem, "click", async (event) => {
7573
7845
  if (typeof bottomItemConfig.clickCallback === "function") {
7574
7846
  // 执行回调
@@ -7656,12 +7928,12 @@ define((function () { 'use strict';
7656
7928
  if (disabled) {
7657
7929
  this.disable();
7658
7930
  }
7659
- this.setClickEvent();
7931
+ this.onClick();
7660
7932
  },
7661
7933
  /**
7662
7934
  * 设置点击事件
7663
7935
  */
7664
- setClickEvent() {
7936
+ onClick() {
7665
7937
  const that = this;
7666
7938
  popsDOMUtils.on(this.$ele.core, "click", function (event) {
7667
7939
  if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
@@ -7716,7 +7988,10 @@ define((function () { 'use strict';
7716
7988
  };
7717
7989
  PopsPanelSwitch.init();
7718
7990
  Reflect.set($li, "data-switch", PopsPanelSwitch);
7719
- return $li;
7991
+ return {
7992
+ $el: $li,
7993
+ handler: PopsPanelSwitch,
7994
+ };
7720
7995
  },
7721
7996
  /**
7722
7997
  * type ==> slider
@@ -7732,74 +8007,11 @@ define((function () { 'use strict';
7732
8007
  // 左边底部的描述的文字
7733
8008
  let leftDescriptionText = "";
7734
8009
  if (viewConfig.description) {
7735
- leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
8010
+ leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7736
8011
  }
7737
8012
  PopsSafeUtils.setSafeHTML($li,
7738
8013
  /*html*/ `
7739
- <div class="pops-panel-item-left-text">
7740
- <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7741
- <div class="pops-panel-slider">
7742
- <input type="range" min="${viewConfig.min}" max="${viewConfig.max}">
7743
- </div>
7744
- `);
7745
- const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7746
- if (viewConfig.step) {
7747
- $rangeInput.setAttribute("step", viewConfig.step.toString());
7748
- }
7749
- $rangeInput.value = viewConfig.getValue().toString();
7750
- /**
7751
- * 获取提示的内容
7752
- * @param value
7753
- */
7754
- const getToolTipContent = function (value) {
7755
- if (typeof viewConfig.getToolTipContent === "function") {
7756
- return viewConfig.getToolTipContent(value);
7757
- }
7758
- else {
7759
- return value;
7760
- }
7761
- };
7762
- const tooltip = PopsTooltip.init({
7763
- $target: $rangeInput.parentElement,
7764
- content: () => {
7765
- return getToolTipContent($rangeInput.value);
7766
- },
7767
- zIndex: () => {
7768
- return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
7769
- },
7770
- className: "github-tooltip",
7771
- alwaysShow: false,
7772
- only: false,
7773
- position: "top",
7774
- arrowDistance: 10,
7775
- });
7776
- popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7777
- tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7778
- if (typeof viewConfig.callback === "function") {
7779
- viewConfig.callback(event, $rangeInput.valueAsNumber);
7780
- }
7781
- });
7782
- return $li;
7783
- },
7784
- /**
7785
- * type ==> slider
7786
- * 获取中间容器的元素<li>
7787
- * @param viewConfig
7788
- */
7789
- createSectionContainerItem_slider_new(viewConfig) {
7790
- const $li = popsDOMUtils.createElement("li");
7791
- Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
7792
- this.setElementClassName($li, viewConfig.className);
7793
- this.setElementAttributes($li, viewConfig.attributes);
7794
- this.setElementProps($li, viewConfig.props);
7795
- // 左边底部的描述的文字
7796
- let leftDescriptionText = "";
7797
- if (viewConfig.description) {
7798
- leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7799
- }
7800
- PopsSafeUtils.setSafeHTML($li,
7801
- /*html*/ `
7802
- <div class="pops-panel-item-left-text" style="flex: 1;">
8014
+ <div class="pops-panel-item-left-text" style="flex: 1;">
7803
8015
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7804
8016
  <div class="pops-slider pops-slider-width">
7805
8017
  <div class="pops-slider__runway">
@@ -7887,7 +8099,7 @@ define((function () { 'use strict';
7887
8099
  this.initEleData();
7888
8100
  this.setToolTipEvent();
7889
8101
  this.setPanEvent();
7890
- this.setRunAwayClickEvent();
8102
+ this.onRunAwayClick();
7891
8103
  this.intervalInit();
7892
8104
  if (this.isDisabledDragWithConfig()) {
7893
8105
  this.disableDrag();
@@ -8159,7 +8371,7 @@ define((function () { 'use strict';
8159
8371
  /**
8160
8372
  * 设置进度条点击定位的事件
8161
8373
  */
8162
- setRunAwayClickEvent() {
8374
+ onRunAwayClick() {
8163
8375
  popsDOMUtils.on(this.$ele.runAway, "click", (event) => {
8164
8376
  if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
8165
8377
  return;
@@ -8364,7 +8576,10 @@ define((function () { 'use strict';
8364
8576
  };
8365
8577
  PopsPanelSlider.init();
8366
8578
  Reflect.set($li, "data-slider", PopsPanelSlider);
8367
- return $li;
8579
+ return {
8580
+ $el: $li,
8581
+ handler: PopsPanelSlider,
8582
+ };
8368
8583
  },
8369
8584
  /**
8370
8585
  * type ==> input
@@ -8377,13 +8592,8 @@ define((function () { 'use strict';
8377
8592
  this.setElementClassName($li, viewConfig.className);
8378
8593
  this.setElementAttributes($li, viewConfig.attributes);
8379
8594
  this.setElementProps($li, viewConfig.props);
8380
- let inputType = "text";
8381
- if (viewConfig.isPassword) {
8382
- inputType = "password";
8383
- }
8384
- else if (viewConfig.isNumber) {
8385
- inputType = "number";
8386
- }
8595
+ const defaultInputType = "text";
8596
+ const inputType = viewConfig.inputType || defaultInputType;
8387
8597
  // 左边底部的描述的文字
8388
8598
  let leftDescriptionText = "";
8389
8599
  if (viewConfig.description) {
@@ -8394,135 +8604,195 @@ define((function () { 'use strict';
8394
8604
  <div class="pops-panel-item-left-text">
8395
8605
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
8396
8606
  <div class="pops-panel-input">
8397
- <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8607
+ <div class="pops-panel-input_inner">
8608
+ <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8609
+ </div>
8398
8610
  </div>
8399
8611
  `);
8400
8612
  const PopsPanelInput = {
8401
8613
  [Symbol.toStringTag]: "PopsPanelInput",
8402
- $ele: {
8614
+ $el: {
8403
8615
  itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8404
8616
  panelInput: $li.querySelector(".pops-panel-input"),
8617
+ panelInputInner: $li.querySelector(".pops-panel-input_inner"),
8405
8618
  input: $li.querySelector("input"),
8406
- inputSpanIcon: popsDOMUtils.createElement("span"),
8407
- inputSpanIconInner: null,
8619
+ /** span.pops-panel-input__suffix */
8620
+ suffix: popsDOMUtils.createElement("span"),
8621
+ /** span.pops-panel-input__suffix-inner */
8622
+ suffixInner: null,
8623
+ /** i.pops-panel-icon */
8408
8624
  icon: null,
8409
8625
  },
8410
8626
  $data: {
8411
8627
  value: viewConfig.getValue(),
8412
- isView: false,
8628
+ /**
8629
+ * inputType 为 password时使用该值
8630
+ *
8631
+ * 当前内容的可见性
8632
+ */
8633
+ isVisible: false,
8413
8634
  },
8414
8635
  init() {
8415
8636
  this.initEle();
8416
8637
  this.setInputValue(this.$data.value);
8417
8638
  // 如果是密码框，放进图标
8418
- if (viewConfig.isPassword) {
8639
+ if (viewConfig.inputType === "password") {
8640
+ // 显示密码
8419
8641
  this.setCircleIcon(PopsIcon.getIcon("view"));
8420
- this.setCircleIconClickEvent();
8642
+ this.onIconClick();
8421
8643
  }
8422
8644
  else {
8423
8645
  // 先判断预设值是否为空，不为空添加清空图标按钮
8424
- if (this.$ele.input.value != "") {
8646
+ // 且为普通的输入框
8647
+ if (this.$el.input.value != "" && this.isTextInputType()) {
8648
+ // 清除内容的图标
8425
8649
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8426
- this.setCircleIconClickEvent();
8650
+ this.onIconClick();
8651
+ }
8652
+ else {
8653
+ // 隐藏图标
8654
+ this.hideCircleIconWrapper();
8427
8655
  }
8428
8656
  }
8429
- this.setInputChangeEvent();
8657
+ this.onValueChange();
8430
8658
  // 是否禁用复选框
8431
8659
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8432
8660
  if (disabled) {
8433
8661
  this.disable();
8434
8662
  }
8435
8663
  if (typeof viewConfig.handlerCallBack === "function") {
8436
- viewConfig.handlerCallBack($li, this.$ele.input);
8664
+ viewConfig.handlerCallBack($li, this.$el.input);
8437
8665
  }
8438
8666
  },
8439
8667
  /**
8440
8668
  * 初始化$ele的配置
8441
8669
  */
8442
8670
  initEle() {
8443
- this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8444
- popsDOMUtils.addClassName(this.$ele.inputSpanIcon, "pops-panel-input__suffix");
8445
- PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8671
+ this.$el.input.parentElement.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
8672
+ popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
8673
+ PopsSafeUtils.setSafeHTML(this.$el.suffix,
8446
8674
  /*html*/ `
8447
8675
  <span class="pops-panel-input__suffix-inner">
8448
8676
  <i class="pops-panel-icon"></i>
8449
8677
  </span>
8450
8678
  `);
8451
- this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8452
- this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
8453
- popsDOMUtils.addClassName(this.$ele.panelInput, PopsCommonCSSClassName.userSelectNone);
8679
+ this.$el.suffixInner = this.$el.suffix.querySelector(".pops-panel-input__suffix-inner");
8680
+ this.$el.icon = this.$el.suffix.querySelector(".pops-panel-icon");
8681
+ popsDOMUtils.addClassName(this.$el.panelInput, PopsCommonCSSClassName.userSelectNone);
8682
+ },
8683
+ /**
8684
+ * 校验输入框类型是否是字符串输入框类型
8685
+ */
8686
+ isTextInputType() {
8687
+ const typeList = ["text", "search", "email", "tel", "url"];
8688
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8689
+ },
8690
+ /**
8691
+ * 是否是时间输入框类型
8692
+ */
8693
+ isDateInputType() {
8694
+ const typeList = ["date", "datetime-local", "month", "time", "week"];
8695
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8696
+ },
8697
+ /**
8698
+ * 是否是数字输入框类型
8699
+ */
8700
+ isNumberInputType() {
8701
+ const typeList = ["number"];
8702
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8454
8703
  },
8455
8704
  /**
8456
8705
  * 禁用
8457
8706
  */
8458
8707
  disable() {
8459
- this.$ele.input.disabled = true;
8460
- popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
8461
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8708
+ this.$el.input.disabled = true;
8709
+ popsDOMUtils.addClassName(this.$el.panelInput, "pops-input-disabled");
8710
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8462
8711
  },
8463
8712
  /**
8464
8713
  * 取消禁用
8465
8714
  */
8466
8715
  notDisable() {
8467
- this.$ele.input.disabled = false;
8468
- popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
8469
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8716
+ this.$el.input.disabled = false;
8717
+ popsDOMUtils.removeClassName(this.$el.panelInput, "pops-input-disabled");
8718
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8470
8719
  },
8471
8720
  /**
8472
8721
  * 判断是否已被禁用
8473
8722
  */
8474
8723
  isDisabled() {
8475
- return this.$ele.input.disabled;
8724
+ return this.$el.input.disabled;
8476
8725
  },
8477
8726
  /**
8478
8727
  * 设置输入框内容
8479
- * @param {string} [value=""] 值
8728
+ * @param value 值
8480
8729
  */
8481
8730
  setInputValue(value = "") {
8482
- this.$ele.input.value = value;
8731
+ if (typeof value === "number" && this.isNumberInputType()) {
8732
+ this.$el.input.valueAsNumber = value;
8733
+ }
8734
+ else if (typeof value === "object" && value instanceof Date && this.isDateInputType()) {
8735
+ this.$el.input.valueAsDate = value;
8736
+ }
8737
+ else {
8738
+ this.$el.input.value = value.toString();
8739
+ }
8483
8740
  },
8484
8741
  /**
8485
8742
  * 设置input元素的type
8486
- * @param [typeValue="text"] type值
8743
+ * @param typeValue type值
8487
8744
  */
8488
8745
  setInputType(typeValue = "text") {
8489
- this.$ele.input.setAttribute("type", typeValue);
8746
+ this.$el.input.setAttribute("type", typeValue);
8490
8747
  },
8491
8748
  /**
8492
8749
  * 删除图标按钮
8493
8750
  */
8494
8751
  removeCircleIcon() {
8495
- PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
8752
+ PopsSafeUtils.setSafeHTML(this.$el.icon, "");
8496
8753
  },
8497
8754
  /**
8498
8755
  * 添加清空图标按钮
8499
- * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
8756
+ * @param svgHTML svg图标，默认为清空的图标
8500
8757
  */
8501
8758
  setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")) {
8502
- PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
8759
+ PopsSafeUtils.setSafeHTML(this.$el.icon, svgHTML);
8760
+ },
8761
+ /**
8762
+ * 隐藏图标容器
8763
+ */
8764
+ hideCircleIconWrapper() {
8765
+ popsDOMUtils.cssHide(this.$el.suffix, true);
8766
+ },
8767
+ /**
8768
+ * 显示图标容器
8769
+ */
8770
+ showCircleIconWrapper() {
8771
+ popsDOMUtils.cssShow(this.$el.suffix);
8503
8772
  },
8504
8773
  /**
8505
8774
  * 添加图标按钮的点击事件
8506
8775
  */
8507
- setCircleIconClickEvent() {
8508
- popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
8776
+ onIconClick() {
8777
+ popsDOMUtils.on(this.$el.icon, "click", (evt) => {
8778
+ popsDOMUtils.preventEvent(evt);
8509
8779
  if (this.isDisabled()) {
8510
8780
  return;
8511
8781
  }
8512
8782
  // 删除图标
8513
8783
  this.removeCircleIcon();
8514
- if (viewConfig.isPassword) {
8515
- // 密码输入框
8516
- if (this.$data.isView) {
8784
+ if (inputType === "password") {
8785
+ // 配置类型为密码输入框
8786
+ if (this.$data.isVisible) {
8517
8787
  // 当前可见 => 点击改变为隐藏
8518
- this.$data.isView = false;
8788
+ this.$data.isVisible = false;
8519
8789
  // 显示输入框内容，且更换图标为隐藏图标
8520
8790
  this.setInputType("text");
8521
8791
  this.setCircleIcon(PopsIcon.getIcon("hide"));
8522
8792
  }
8523
8793
  else {
8524
8794
  // 当前不可见 => 点击改变为显示
8525
- this.$data.isView = true;
8795
+ this.$data.isVisible = true;
8526
8796
  // 隐藏输入框内容，且更换图标为显示图标
8527
8797
  this.setInputType("password");
8528
8798
  this.setCircleIcon(PopsIcon.getIcon("view"));
@@ -8533,43 +8803,98 @@ define((function () { 'use strict';
8533
8803
  // 清空内容
8534
8804
  this.setInputValue("");
8535
8805
  // 获取焦点
8536
- this.$ele.input.focus();
8806
+ this.$el.input.focus();
8537
8807
  // 触发内容改变事件
8538
- this.$ele.input.dispatchEvent(new Event("input"));
8808
+ this.$el.input.dispatchEvent(new Event("input"));
8539
8809
  }
8540
8810
  });
8541
8811
  },
8542
8812
  /**
8543
8813
  * 监听输入框内容改变
8544
8814
  */
8545
- setInputChangeEvent() {
8546
- popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
8547
- this.$data.value = this.$ele.input.value;
8548
- if (!viewConfig.isPassword) {
8815
+ onValueChange() {
8816
+ popsDOMUtils.on(this.$el.input, ["input", "propertychange"], void 0, (event) => {
8817
+ this.$data.value = this.$el.input.value;
8818
+ if (inputType !== "password") {
8549
8819
  // 不是密码框
8550
- if (this.$ele.input.value !== "" && this.$ele.icon.innerHTML === "") {
8820
+ if (this.$el.input.value !== "" && this.$el.icon.innerHTML === "" && this.isTextInputType()) {
8551
8821
  // 不为空，显示清空图标
8552
8822
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8553
- this.setCircleIconClickEvent();
8823
+ this.onIconClick();
8824
+ this.showCircleIconWrapper();
8554
8825
  }
8555
- else if (this.$ele.input.value === "") {
8826
+ else if (this.$el.input.value === "") {
8556
8827
  this.removeCircleIcon();
8557
8828
  }
8558
8829
  }
8559
8830
  if (typeof viewConfig.callback === "function") {
8560
- if (viewConfig.isNumber) {
8561
- viewConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
8831
+ let ret;
8832
+ if (viewConfig.inputType === "number") {
8833
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber);
8834
+ }
8835
+ else if (this.isDateInputType()) {
8836
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber, this.$el.input.valueAsDate);
8562
8837
  }
8563
8838
  else {
8564
- viewConfig.callback(event, this.$ele.input.value);
8839
+ ret = viewConfig.callback(event, this.$el.input.value);
8840
+ }
8841
+ if (ret) {
8842
+ if (ret.valid) {
8843
+ // 校验通过
8844
+ this.removeValidErrorMsg();
8845
+ }
8846
+ else {
8847
+ // 校验失败
8848
+ // 显示失败提示
8849
+ this.addValidErrorMsg(ret.message);
8850
+ }
8851
+ }
8852
+ else {
8853
+ this.removeValidErrorMsg();
8565
8854
  }
8566
8855
  }
8567
8856
  });
8568
8857
  },
8858
+ /**
8859
+ * 主动触发输入框改变事件
8860
+ */
8861
+ triggerValueChange() {
8862
+ this.$el.input.dispatchEvent(new Event("input"));
8863
+ },
8864
+ /**
8865
+ * 添加校验失败的提示信息
8866
+ * @param msg 提示信息
8867
+ */
8868
+ addValidErrorMsg(msg) {
8869
+ if (msg == null)
8870
+ return;
8871
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error") ||
8872
+ popsDOMUtils.createElement("div", {
8873
+ className: "pops-panel-input-valid-error",
8874
+ innerHTML: /*html*/ `<span></span>`,
8875
+ });
8876
+ const $validErrorMsgSpan = $validErrorMsg.querySelector("span");
8877
+ if ($validErrorMsgSpan.innerHTML !== msg) {
8878
+ PopsSafeUtils.setSafeHTML($validErrorMsgSpan, msg);
8879
+ }
8880
+ if (!$validErrorMsg.parentElement) {
8881
+ popsDOMUtils.after(this.$el.panelInputInner, $validErrorMsg);
8882
+ }
8883
+ },
8884
+ /**
8885
+ * 移除校验失败的提示信息
8886
+ */
8887
+ removeValidErrorMsg() {
8888
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error");
8889
+ $validErrorMsg?.remove();
8890
+ },
8569
8891
  };
8570
8892
  PopsPanelInput.init();
8571
8893
  Reflect.set($li, "data-input", PopsPanelInput);
8572
- return $li;
8894
+ return {
8895
+ $el: $li,
8896
+ handler: PopsPanelInput,
8897
+ };
8573
8898
  },
8574
8899
  /**
8575
8900
  * type ==> textarea
@@ -8607,7 +8932,7 @@ define((function () { 'use strict';
8607
8932
  },
8608
8933
  init() {
8609
8934
  this.setValue(this.$data.value);
8610
- this.setChangeEvent();
8935
+ this.onValueChange();
8611
8936
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8612
8937
  if (disabled) {
8613
8938
  this.disable();
@@ -8633,7 +8958,7 @@ define((function () { 'use strict';
8633
8958
  /**
8634
8959
  * 监听选择内容改变
8635
8960
  */
8636
- setChangeEvent() {
8961
+ onValueChange() {
8637
8962
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
8638
8963
  const value = this.$ele.textarea.value;
8639
8964
  this.$data.value = value;
@@ -8645,7 +8970,10 @@ define((function () { 'use strict';
8645
8970
  };
8646
8971
  PopsPanelTextArea.init();
8647
8972
  Reflect.set($li, "data-textarea", PopsPanelTextArea);
8648
- return $li;
8973
+ return {
8974
+ $el: $li,
8975
+ handler: PopsPanelTextArea,
8976
+ };
8649
8977
  },
8650
8978
  /**
8651
8979
  * type ==> select
@@ -8672,178 +9000,1176 @@ define((function () { 'use strict';
8672
9000
  <select></select>
8673
9001
  </div>
8674
9002
  `);
8675
- const PopsPanelSelect = {
8676
- [Symbol.toStringTag]: "PopsPanelSelect",
8677
- $ele: {
8678
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8679
- panelSelect: $li.querySelector(".pops-panel-select"),
8680
- select: $li.querySelector(".pops-panel-select select"),
8681
- },
8682
- $eleKey: {
8683
- disable: "__disable__",
8684
- value: "__value__",
8685
- viewConfig: "data-view-config",
8686
- },
8687
- $data: {
8688
- defaultValue: viewConfig.getValue(),
8689
- },
8690
- init() {
8691
- popsDOMUtils.addClassName(this.$ele.panelSelect, PopsCommonCSSClassName.userSelectNone);
8692
- this.initOption();
8693
- this.setChangeEvent();
8694
- this.setClickEvent();
8695
- const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8696
- if (disabled) {
8697
- this.disable();
8698
- }
8699
- },
8700
- /**
8701
- * 给option元素设置属性
8702
- * @param $ele
8703
- * @param key
8704
- * @param value
8705
- */
8706
- setNodeValue($ele, key, value) {
8707
- Reflect.set($ele, key, value);
8708
- },
8709
- /**
8710
- * 获取option元素上设置的属性
8711
- * @param $ele
8712
- * @param value
8713
- * @param key
8714
- */
8715
- getNodeValue($ele, key) {
8716
- return Reflect.get($ele, key);
8717
- },
8718
- /**
8719
- * 禁用选项
8720
- */
8721
- disable() {
8722
- this.$ele.select.setAttribute("disabled", "true");
8723
- popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8724
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8725
- },
8726
- /**
8727
- * 取消禁用
8728
- */
8729
- notDisable() {
8730
- this.$ele.select.removeAttribute("disabled");
8731
- popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8732
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8733
- },
8734
- /**
8735
- * 判断是否禁用
8736
- */
8737
- isDisabled() {
8738
- return (this.$ele.select.hasAttribute("disabled") ||
8739
- popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable"));
8740
- },
8741
- /**
8742
- * 初始化选项
8743
- */
8744
- initOption() {
8745
- viewConfig.data.forEach((dataItem) => {
8746
- // 初始化默认选中
8747
- const optionElement = popsDOMUtils.createElement("option");
8748
- this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
8749
- this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
8750
- this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
8751
- if (dataItem.value === this.$data.defaultValue) {
8752
- this.setOptionSelected(optionElement);
9003
+ const $itemLeftContainer = $li.querySelector(".pops-panel-item-left-text");
9004
+ const $container = $li.querySelector(".pops-panel-select");
9005
+ const $select = $li.querySelector(".pops-panel-select select");
9006
+ const width = (typeof viewConfig.width === "number" ? `${viewConfig.width}px` : viewConfig.width) ?? "200px";
9007
+ popsDOMUtils.css($container, "width", width);
9008
+ const mode = viewConfig.mode ?? "native";
9009
+ let handler;
9010
+ if (mode === "native") {
9011
+ const PopsPanelSelectNative = {
9012
+ [Symbol.toStringTag]: "PopsPanelSelectNative",
9013
+ $el: {
9014
+ itemLeftTextContainer: $itemLeftContainer,
9015
+ $container: $container,
9016
+ $select: $select,
9017
+ },
9018
+ $eleKey: {
9019
+ disable: "__disable__",
9020
+ value: "__value__",
9021
+ viewConfig: "data-view-config",
9022
+ },
9023
+ $data: {
9024
+ data: [],
9025
+ defaultValue: viewConfig.getValue(),
9026
+ },
9027
+ init() {
9028
+ this.$el.$container.setAttribute("data-mode", mode);
9029
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9030
+ popsDOMUtils.addClassName(this.$el.$container, PopsCommonCSSClassName.userSelectNone);
9031
+ this.initOption();
9032
+ this.onValueChange();
9033
+ this.onClick();
9034
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9035
+ if (disabled) {
9036
+ this.disable();
9037
+ }
9038
+ },
9039
+ /**
9040
+ * 给option元素设置属性
9041
+ * @param $ele
9042
+ * @param key
9043
+ * @param value
9044
+ */
9045
+ setNodeValue($ele, key, value) {
9046
+ Reflect.set($ele, key, value);
9047
+ },
9048
+ /**
9049
+ * 获取option元素上设置的属性
9050
+ * @param $ele
9051
+ * @param value
9052
+ * @param key
9053
+ */
9054
+ getNodeValue($ele, key) {
9055
+ return Reflect.get($ele, key);
9056
+ },
9057
+ /**
9058
+ * 禁用选项
9059
+ */
9060
+ disable() {
9061
+ this.$el.$select.setAttribute("disabled", "true");
9062
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9063
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9064
+ },
9065
+ /**
9066
+ * 取消禁用
9067
+ */
9068
+ notDisable() {
9069
+ this.$el.$select.removeAttribute("disabled");
9070
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9071
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9072
+ },
9073
+ /**
9074
+ * 判断是否禁用
9075
+ */
9076
+ isDisabled() {
9077
+ return (this.$el.$select.hasAttribute("disabled") ||
9078
+ popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable"));
9079
+ },
9080
+ /**
9081
+ * 初始化选项
9082
+ */
9083
+ initOption() {
9084
+ this.$data.data.forEach((dataItem) => {
9085
+ // 初始化默认选中
9086
+ const optionElement = popsDOMUtils.createElement("option");
9087
+ this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
9088
+ this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
9089
+ this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
9090
+ if (dataItem.value === this.$data.defaultValue) {
9091
+ this.setOptionSelected(optionElement);
9092
+ }
9093
+ if (typeof dataItem.text === "function") {
9094
+ optionElement.innerText = dataItem.text(dataItem.value, dataItem);
9095
+ }
9096
+ else {
9097
+ optionElement.innerText = dataItem.text;
9098
+ }
9099
+ this.$el.$select.appendChild(optionElement);
9100
+ });
9101
+ },
9102
+ /**
9103
+ * 设置选项选中
9104
+ * @param $option
9105
+ */
9106
+ setOptionSelected($option) {
9107
+ $option.setAttribute("selected", "true");
9108
+ },
9109
+ /**
9110
+ * 检测所有option并设置禁用状态
9111
+ */
9112
+ setSelectOptionsDisableStatus() {
9113
+ if (this.$el.$select.options && this.$el.$select.options.length) {
9114
+ Array.from(this.$el.$select.options).forEach((optionItem) => {
9115
+ this.setOptionDisableStatus(optionItem);
9116
+ });
9117
+ }
9118
+ },
9119
+ /**
9120
+ * 设置禁用状态
9121
+ * @param $option
9122
+ */
9123
+ setOptionDisableStatus($option) {
9124
+ let disable = false;
9125
+ const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
9126
+ if (optionDisableAttr === "function") {
9127
+ const value = this.getNodeValue($option, this.$eleKey.value);
9128
+ disable = Boolean(optionDisableAttr(value));
9129
+ }
9130
+ if (disable) {
9131
+ $option.setAttribute("disabled", "true");
9132
+ }
9133
+ else {
9134
+ $option.removeAttribute("disabled");
9135
+ }
9136
+ },
9137
+ /**
9138
+ * 获取option上的信息
9139
+ * @param $option
9140
+ */
9141
+ getSelectOptionInfo($option) {
9142
+ const optionValue = this.getNodeValue($option, this.$eleKey.value);
9143
+ const optionText = $option.innerText || $option.textContent;
9144
+ const views = this.getNodeValue($option, this.$eleKey.viewConfig);
9145
+ return {
9146
+ value: optionValue,
9147
+ text: optionText,
9148
+ views: views,
9149
+ $option: $option,
9150
+ };
9151
+ },
9152
+ /**
9153
+ * 监听选择内容改变
9154
+ */
9155
+ onValueChange() {
9156
+ popsDOMUtils.on(this.$el.$select, "change", () => {
9157
+ const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
9158
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9159
+ this.setSelectOptionsDisableStatus();
9160
+ if (typeof viewConfig.callback === "function") {
9161
+ viewConfig.callback(selectInfo);
9162
+ }
9163
+ const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
9164
+ if (Array.isArray(views)) {
9165
+ // 如果成功创建，加入到中间容器中
9166
+ const childUListClassName = "pops-panel-select-child-forms";
9167
+ // 移除旧的元素
9168
+ while ($li.nextElementSibling) {
9169
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
9170
+ $li.nextElementSibling.remove();
9171
+ }
9172
+ else {
9173
+ break;
9174
+ }
9175
+ }
9176
+ const $childUList = popsDOMUtils.createElement("ul");
9177
+ $childUList.className = childUListClassName;
9178
+ popsDOMUtils.after($li, $childUList);
9179
+ that.uListContainerAddItem(viewConfig, {
9180
+ ulElement: $childUList,
9181
+ });
9182
+ }
9183
+ });
9184
+ },
9185
+ /**
9186
+ * 监听点击事件
9187
+ */
9188
+ onClick() {
9189
+ popsDOMUtils.on(this.$el.$select, "click", void 0, (event) => {
9190
+ this.setSelectOptionsDisableStatus();
9191
+ if (typeof viewConfig.clickCallBack === "function") {
9192
+ const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
9193
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9194
+ viewConfig.clickCallBack(event, selectInfo);
9195
+ }
9196
+ });
9197
+ },
9198
+ };
9199
+ PopsPanelSelectNative.init();
9200
+ Reflect.set($li, "data-select", PopsPanelSelectNative);
9201
+ handler = PopsPanelSelectNative;
9202
+ }
9203
+ else if (mode === "dialog") {
9204
+ const PopsPanelSelect = {
9205
+ [Symbol.toStringTag]: "PopsPanelSelect",
9206
+ $el: {
9207
+ $itemLeftContainer: $itemLeftContainer,
9208
+ /** 选择框容器 */
9209
+ $container: void 0,
9210
+ /** 选择框包裹的容器 */
9211
+ $wrapper: void 0,
9212
+ /** 内容区域 */
9213
+ $section: void 0,
9214
+ /** 手动输入 */
9215
+ $selectedInputWrapper: void 0,
9216
+ /** 灰色提示语 */
9217
+ $selectedPlaceHolderWrapper: void 0,
9218
+ /** 下拉箭头区域 */
9219
+ $suffix: void 0,
9220
+ /** 下拉箭头图标 */
9221
+ $suffixIcon: void 0,
9222
+ /** 下拉列表弹窗的下拉列表容器 */
9223
+ $selectDialogContainer: void 0,
9224
+ },
9225
+ $data: {
9226
+ /**
9227
+ * 数据
9228
+ */
9229
+ data: [],
9230
+ /**
9231
+ * 默认值
9232
+ */
9233
+ defaultValue: viewConfig.getValue(),
9234
+ /**
9235
+ * 选择的信息
9236
+ */
9237
+ selectedData: void 0,
9238
+ /**
9239
+ * 是否验证通过
9240
+ */
9241
+ isValidSuccess: true,
9242
+ /**
9243
+ * 箭头旋转的属性
9244
+ */
9245
+ rotateKey: "data-show-option",
9246
+ },
9247
+ /** 初始化 */
9248
+ init() {
9249
+ this.initDefault();
9250
+ this.initEl();
9251
+ this.initPlaceHolder();
9252
+ this.renderSelectText();
9253
+ this.onShowSelectDialogClick();
9254
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9255
+ if (disabled) {
9256
+ this.disable();
9257
+ }
9258
+ },
9259
+ /** 初始化默认值 */
9260
+ initDefault() {
9261
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9262
+ this.$data.data.forEach((dataItem) => {
9263
+ const flag = this.$data.defaultValue.includes(dataItem.value);
9264
+ if (flag) {
9265
+ // 初始化选中的配置
9266
+ this.resetCurrentSelectedInfo();
9267
+ this.updateSelectedInfo(dataItem);
9268
+ }
9269
+ });
9270
+ },
9271
+ /** 初始化$ele变量 */
9272
+ initEl() {
9273
+ this.$el.$container = $container;
9274
+ this.$el.$container.setAttribute("data-mode", mode);
9275
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9276
+ /*html*/ `
9277
+ <div class="el-select__wrapper">
9278
+ <div class="el-select__selection">
9279
+ <!-- 这个是用于手动输入的，这里暂不适配 -->
9280
+ <div class="el-select__selected-item el-select__input-wrapper"></div>
9281
+ <!-- 这个是placeholder -->
9282
+ <div class="el-select__selected-item el-select__placeholder"></div>
9283
+ </div>
9284
+ <!-- 下拉箭头 -->
9285
+ <div class="el-select__suffix">
9286
+ <i class="el-icon el-select__caret el-select__icon">
9287
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9288
+ <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
9289
+ </svg>
9290
+ </i>
9291
+ </div>
9292
+ </div>`);
9293
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9294
+ this.$el.$section = $li.querySelector(".el-select__selection");
9295
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
9296
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
9297
+ this.$el.$suffix = $li.querySelector(".el-select__suffix");
9298
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
9299
+ // 先把手动输入框隐藏
9300
+ this.hideInputWrapper();
9301
+ },
9302
+ /**
9303
+ * 初始化提示文字
9304
+ */
9305
+ initPlaceHolder() {
9306
+ let placeholder = "--请选择--";
9307
+ if (typeof viewConfig.placeholder === "string") {
9308
+ placeholder = viewConfig.placeholder;
9309
+ }
9310
+ else if (typeof viewConfig.placeholder === "function") {
9311
+ const placeholderResult = viewConfig.placeholder();
9312
+ if (typeof placeholderResult === "string") {
9313
+ placeholder = placeholderResult;
9314
+ }
9315
+ }
9316
+ /**
9317
+ * 默认提示文字的位置
9318
+ */
9319
+ const defaultSelectedTextAlign = "left";
9320
+ this.$el.$section.setAttribute("data-selected-text-align", viewConfig.selectedTextAlign || defaultSelectedTextAlign);
9321
+ const $placeholder = popsDOMUtils.createElement("span", {
9322
+ innerText: placeholder,
9323
+ });
9324
+ this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
9325
+ },
9326
+ /**
9327
+ * 重新渲染外面的已选择项的文本
9328
+ *
9329
+ * 如果未选择，显示提示文字
9330
+ */
9331
+ renderSelectText() {
9332
+ let item = this.$data.data.find((dataItem) => {
9333
+ return dataItem.value === this.$data.selectedData?.value;
9334
+ });
9335
+ if (item == null) {
9336
+ // 未找到但是有选中信息，且是自定义输入的
9337
+ if (this.$data.selectedData && this.$data.selectedData.addCustomInput) {
9338
+ item = this.$data.selectedData;
9339
+ }
9340
+ }
9341
+ if (item != null) {
9342
+ // 默认值在数据中
9343
+ // 显示该数据项的文本
9344
+ // 隐藏placeholder
9345
+ const text = typeof item.text === "function" ? item.text(item.value, item) : item.text;
9346
+ if (item.isHTML) {
9347
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, text);
9348
+ }
9349
+ else {
9350
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper,
9351
+ /*html*/ `
9352
+ <span>${text}</span>
9353
+ `);
9354
+ }
9355
+ // 显示选中的内容
9356
+ this.showInputWrapper();
9357
+ // 隐藏placeholder
9358
+ this.hidePlaceHolderWrapper();
9359
+ }
9360
+ else {
9361
+ // 仅显示placeholder
9362
+ this.hideInputWrapper();
9363
+ this.showPlaceHolderWrapper();
9364
+ }
9365
+ },
9366
+ /**
9367
+ * 禁用选项容器
9368
+ */
9369
+ disable() {
9370
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9371
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9372
+ },
9373
+ /**
9374
+ * 取消禁用选项容器
9375
+ */
9376
+ cancleDisable() {
9377
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9378
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9379
+ },
9380
+ /**
9381
+ * 判断当前是否已禁用选项容器
9382
+ */
9383
+ isDisabled() {
9384
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
9385
+ popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
9386
+ },
9387
+ /**
9388
+ * 设置选择列表的点击事件
9389
+ *
9390
+ * 点击显示选择列表的弹窗
9391
+ */
9392
+ onShowSelectDialogClick() {
9393
+ const defaultCSS = PopsCSS.panelComponents_Select;
9394
+ popsDOMUtils.on(this.$el.$container, "click", () => {
9395
+ if (this.isDisabled()) {
9396
+ return;
9397
+ }
9398
+ /** 当前已选中的值 */
9399
+ const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9400
+ /**
9401
+ * 弹窗关闭的回调
9402
+ */
9403
+ const dialogCloseCallback = () => {
9404
+ if (this.$data.selectedData?.addCustomInput && !this.$data.isValidSuccess) {
9405
+ // 当前是自定义输入的且未通过校验
9406
+ return false;
9407
+ }
9408
+ else {
9409
+ // 清除自定义输入的值
9410
+ this.getAllSelectItems(false).forEach((it) => {
9411
+ if (!it.data.addCustomInput)
9412
+ return;
9413
+ it.data.value = "";
9414
+ it.data.text = "";
9415
+ this.onValueChangeCallback(it.data);
9416
+ });
9417
+ }
9418
+ this.renderSelectText();
9419
+ this.$el.$selectDialogContainer = null;
9420
+ this.$el.$container.removeAttribute(this.$data.rotateKey);
9421
+ };
9422
+ this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
9423
+ const confirmConfig = popsUtils.assign({
9424
+ title: {
9425
+ text: "请勾选需要选择的选项",
9426
+ position: "center",
9427
+ },
9428
+ content: {
9429
+ text: /*html*/ `<ul class="select-container"></ul>`,
9430
+ html: true,
9431
+ },
9432
+ btn: {
9433
+ ok: {
9434
+ enable: false,
9435
+ },
9436
+ close: {
9437
+ enable: true,
9438
+ callback(evtConfig) {
9439
+ const ret = dialogCloseCallback();
9440
+ if (typeof ret === "boolean" && !ret) {
9441
+ return;
9442
+ }
9443
+ evtConfig.close();
9444
+ },
9445
+ },
9446
+ },
9447
+ mask: {
9448
+ enable: true,
9449
+ clickCallBack(originalRun) {
9450
+ const ret = dialogCloseCallback();
9451
+ if (typeof ret === "boolean" && !ret) {
9452
+ return;
9453
+ }
9454
+ originalRun();
9455
+ },
9456
+ clickEvent: {
9457
+ toClose: true,
9458
+ },
9459
+ },
9460
+ drag: true,
9461
+ dragLimit: true,
9462
+ width: "300px",
9463
+ height: "auto",
9464
+ style: /*css*/ `
9465
+ ${defaultCSS}
9466
+
9467
+ ${PopsCSS.panelCSS}
9468
+
9469
+ ${style || ""}
9470
+ `,
9471
+ }, userConfirmConfig);
9472
+ const $dialog = PopsAlert.init(confirmConfig);
9473
+ const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
9474
+ // 初始化选项元素
9475
+ this.$data.data.forEach((item) => {
9476
+ if (item.addCustomInput) {
9477
+ // 添加自定义输入的
9478
+ const customInputDataOption = item;
9479
+ const $customInputSelecItem = this.createSelectItemElement(customInputDataOption);
9480
+ const context = this;
9481
+ const PanelInput = that.createSectionContainerItem_input({
9482
+ type: "input",
9483
+ text: "",
9484
+ getValue() {
9485
+ return customInputDataOption.value;
9486
+ },
9487
+ callback(evt, value) {
9488
+ customInputDataOption.text = value;
9489
+ customInputDataOption.value = value;
9490
+ if (typeof customInputDataOption.onValid === "function") {
9491
+ const ret = customInputDataOption.onValid(customInputDataOption);
9492
+ context.$data.isValidSuccess = ret.valid;
9493
+ if (ret.valid) {
9494
+ PanelInputHandler.removeValidErrorMsg();
9495
+ }
9496
+ else {
9497
+ PanelInputHandler.addValidErrorMsg(ret.message);
9498
+ return ret;
9499
+ }
9500
+ }
9501
+ context.updateSelectedInfo(customInputDataOption);
9502
+ context.onValueChangeCallback(customInputDataOption);
9503
+ },
9504
+ });
9505
+ // 获取输入框处理函数
9506
+ const PanelInputHandler = PanelInput.handler;
9507
+ const $inputContainer = PanelInput.$el.querySelector(".pops-panel-input");
9508
+ PopsSafeUtils.setSafeHTML($customInputSelecItem, "");
9509
+ $customInputSelecItem.appendChild($inputContainer);
9510
+ // 添加到confirm中
9511
+ $selectContainer.appendChild($customInputSelecItem);
9512
+ // 设置项的点击事件
9513
+ this.onSelectItemClick(customInputDataOption, $customInputSelecItem);
9514
+ }
9515
+ else {
9516
+ const $select = this.createSelectItemElement(item);
9517
+ // 添加到confirm中
9518
+ $selectContainer.appendChild($select);
9519
+ // 设置项的点击事件
9520
+ this.onSelectItemClick(item, $select);
9521
+ }
9522
+ });
9523
+ this.$el.$selectDialogContainer = $selectContainer;
9524
+ // 初始化状态
9525
+ this.updateAllSelectItemStatus();
9526
+ });
9527
+ },
9528
+ /**
9529
+ * 选中的值改变的回调
9530
+ * @param data 当前的选中信息
9531
+ */
9532
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9533
+ // 动态更新禁用状态、选中状态
9534
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9535
+ // 触发回调
9536
+ if (typeof viewConfig.callback === "function") {
9537
+ viewConfig.callback(data || this.$data.selectedData);
9538
+ }
9539
+ },
9540
+ /**
9541
+ * 更新选项弹窗内的所有选项元素的状态
9542
+ *
9543
+ * + 更新禁用状态
9544
+ * + 更新选中状态
9545
+ */
9546
+ updateAllSelectItemStatus() {
9547
+ const allSelectItems = this.getAllSelectItems(false);
9548
+ allSelectItems.forEach(($selectInfo) => {
9549
+ const { data, $select } = $selectInfo;
9550
+ // 更新文字
9551
+ this.setSelectItemText(data, $selectInfo.$select);
9552
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9553
+ // 移除选中状态
9554
+ this.removeItemSelected($select);
9555
+ // 禁用
9556
+ this.setSelectItemDisabled($select);
9557
+ }
9558
+ else {
9559
+ // 移除禁用状态
9560
+ this.removeSelectItemDisabled($select);
9561
+ }
9562
+ // 根据当前已选择的信息，判断并更新选中状态
9563
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
9564
+ // 就是这个项
9565
+ // 设置选中
9566
+ this.setItemSelected($select);
9567
+ }
9568
+ else {
9569
+ // 不是这个项
9570
+ // 移除选中状态
9571
+ this.removeItemSelected($select);
9572
+ }
9573
+ });
9574
+ },
9575
+ /**
9576
+ * 重置所有已选中的项以下状态
9577
+ *
9578
+ * + 更新选项显示的文字
9579
+ * + 移除禁用状态
9580
+ * + 移除选中状态
9581
+ */
9582
+ resetAllSelectedItemStatus() {
9583
+ const allSelectedItems = this.getAllSelectItems(true);
9584
+ if (allSelectedItems.length) {
9585
+ // 移除选中信息
9586
+ this.resetCurrentSelectedInfo();
9587
+ }
9588
+ allSelectedItems.forEach(($selectInfo) => {
9589
+ const { data, $select } = $selectInfo;
9590
+ // 更新文字
9591
+ this.setSelectItemText(data, $selectInfo.$select);
9592
+ // 移除选中状态
9593
+ this.removeItemSelected($select);
9594
+ // 取消禁用
9595
+ this.removeSelectItemDisabled($select);
9596
+ });
9597
+ },
9598
+ /**
9599
+ * 设置选项元素选中
9600
+ * @param $el 选项元素
9601
+ */
9602
+ setItemSelected($el) {
9603
+ if (this.isItemSelected($el))
9604
+ return;
9605
+ $el.classList.add("select-item-is-selected");
9606
+ },
9607
+ /**
9608
+ * 移除选项元素选中
9609
+ * @param $el 选项元素
9610
+ */
9611
+ removeItemSelected($el) {
9612
+ $el.classList.remove("select-item-is-selected");
9613
+ },
9614
+ /**
9615
+ * 判断选项元素是否选中
9616
+ * @param $el
9617
+ */
9618
+ isItemSelected($el) {
9619
+ return $el.classList.contains("select-item-is-selected");
9620
+ },
9621
+ /**
9622
+ * 获取项上存储的信息
9623
+ * @param $el 选项元素
9624
+ */
9625
+ getItemDataOption($el) {
9626
+ return Reflect.get($el, "data-info");
9627
+ },
9628
+ /**
9629
+ * 添加选中信息
9630
+ * @param data 选择项的数据
9631
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
9632
+ */
9633
+ addSelectedItemInfo(data) {
9634
+ this.resetCurrentSelectedInfo();
9635
+ this.updateSelectedInfo(data);
9636
+ this.onValueChangeCallback(data);
9637
+ },
9638
+ /**
9639
+ * 移除选中信息
9640
+ * @param data 选择项的数据
9641
+ */
9642
+ removeSelectedItemInfo() {
9643
+ // 删除
9644
+ this.updateSelectedInfo();
9645
+ this.onValueChangeCallback();
9646
+ },
9647
+ /**
9648
+ * 更新选中信息
9649
+ * @param data 数据
9650
+ */
9651
+ updateSelectedInfo(data) {
9652
+ // 先删除再赋值
9653
+ this.$data.selectedData = void 0;
9654
+ if (data) {
9655
+ if (data.addCustomInput && data.value.toString() === "") {
9656
+ // 自定义输入框，但是内容是空字符串
9657
+ // 不更新选中信息
9658
+ return;
9659
+ }
9660
+ this.$data.selectedData = data;
8753
9661
  }
8754
- optionElement.innerText = dataItem.text;
8755
- this.$ele.select.appendChild(optionElement);
8756
- });
8757
- },
8758
- /**
8759
- * 设置选项选中
8760
- */
8761
- setOptionSelected($option) {
8762
- $option.setAttribute("selected", "true");
8763
- },
8764
- /** 检测所有option并设置禁用状态 */
8765
- setSelectOptionsDisableStatus() {
8766
- if (this.$ele.select.options && this.$ele.select.options.length) {
8767
- Array.from(this.$ele.select.options).forEach((optionItem) => {
8768
- this.setOptionDisableStatus(optionItem);
9662
+ },
9663
+ /**
9664
+ * 从保存的已选中的信息列表中移除目标信息
9665
+ */
9666
+ resetCurrentSelectedInfo() {
9667
+ this.updateSelectedInfo();
9668
+ },
9669
+ /**
9670
+ * 获取所有选项的信息
9671
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
9672
+ * + true （默认）仅获取选中项的信息
9673
+ * + false 获取所有选择项的信息
9674
+ */
9675
+ getAllSelectItems(onlySelected = true) {
9676
+ return Array.from(this.$el.$selectDialogContainer?.querySelectorAll(".select-item") ?? [])
9677
+ .map(($select) => {
9678
+ const data = this.getItemDataOption($select);
9679
+ const result = {
9680
+ /** 选项信息数据 */
9681
+ data: data,
9682
+ /** 选项元素 */
9683
+ $select: $select,
9684
+ };
9685
+ if (onlySelected) {
9686
+ // 仅选中
9687
+ const isSelected = this.isItemSelected($select);
9688
+ if (isSelected) {
9689
+ return result;
9690
+ }
9691
+ return;
9692
+ }
9693
+ else {
9694
+ return result;
9695
+ }
9696
+ })
9697
+ .filter((item) => {
9698
+ return item != null;
8769
9699
  });
8770
- }
8771
- },
8772
- /** 设置禁用状态 */
8773
- setOptionDisableStatus(optionElement) {
8774
- let disable = false;
8775
- const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
8776
- if (optionDisableAttr === "function") {
8777
- const value = this.getNodeValue(optionElement, this.$eleKey.value);
8778
- disable = Boolean(optionDisableAttr(value));
8779
- }
8780
- if (disable) {
8781
- optionElement.setAttribute("disabled", "true");
8782
- }
8783
- else {
8784
- optionElement.removeAttribute("disabled");
8785
- }
8786
- },
8787
- /** 获取option上的信息 */
8788
- getSelectOptionInfo($option) {
8789
- const optionValue = this.getNodeValue($option, this.$eleKey.value);
8790
- const optionText = $option.innerText || $option.textContent;
8791
- const views = this.getNodeValue($option, this.$eleKey.viewConfig);
8792
- return {
8793
- value: optionValue,
8794
- text: optionText,
8795
- views: views,
8796
- $option: $option,
8797
- };
8798
- },
8799
- /**
8800
- * 监听选择内容改变
8801
- */
8802
- setChangeEvent() {
8803
- popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8804
- const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8805
- const selectInfo = this.getSelectOptionInfo($isSelectedElement);
8806
- this.setSelectOptionsDisableStatus();
8807
- if (typeof viewConfig.callback === "function") {
8808
- viewConfig.callback(event, selectInfo.value, selectInfo.text);
9700
+ },
9701
+ /**
9702
+ * 创建一个选择项元素
9703
+ * @param data 选择项的数据
9704
+ */
9705
+ createSelectItemElement(data) {
9706
+ const $select = popsDOMUtils.createElement("li", {
9707
+ className: "select-item",
9708
+ innerHTML: /*html*/ `<span class="select-item-text"></span>`,
9709
+ });
9710
+ this.setSelectItemText(data, $select);
9711
+ Reflect.set($select, "data-info", data);
9712
+ return $select;
9713
+ },
9714
+ /**
9715
+ * 设置选择项的文字
9716
+ * @param data 选择项的数据
9717
+ * @param $select 选择项元素
9718
+ */
9719
+ setSelectItemText(data, $select) {
9720
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9721
+ const $selectSpan = $select.querySelector(".select-item-text");
9722
+ if (!$selectSpan)
9723
+ return;
9724
+ if (data.isHTML) {
9725
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9726
+ }
9727
+ else {
9728
+ $selectSpan.innerText = text;
8809
9729
  }
8810
- const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
8811
- if (Array.isArray(views)) {
8812
- // 如果成功创建，加入到中间容器中
8813
- const childUListClassName = "pops-panel-select-child-forms";
8814
- // 移除旧的元素
8815
- while ($li.nextElementSibling) {
8816
- if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8817
- $li.nextElementSibling.remove();
9730
+ },
9731
+ /**
9732
+ * 设置选择项禁用
9733
+ * @param $select 选择项元素
9734
+ */
9735
+ setSelectItemDisabled($select) {
9736
+ $select.setAttribute("aria-disabled", "true");
9737
+ $select.setAttribute("disabled", "true");
9738
+ },
9739
+ /**
9740
+ * 移除选择项的禁用状态
9741
+ * @param $select 选择项元素
9742
+ */
9743
+ removeSelectItemDisabled($select) {
9744
+ $select.removeAttribute("aria-disabled");
9745
+ $select.removeAttribute("disabled");
9746
+ },
9747
+ /**
9748
+ * 判断选择项是否禁用
9749
+ * @param $select 选择项元素
9750
+ */
9751
+ isSelectItemDisabled($select) {
9752
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
9753
+ },
9754
+ /**
9755
+ * 设置选择项的点击事件
9756
+ * @param data 该选择项的信息
9757
+ * @param $select 该选择项元素
9758
+ */
9759
+ onSelectItemClick(data, $select) {
9760
+ const updateCustomInputStatus = () => {
9761
+ this.setItemSelected($select);
9762
+ this.addSelectedItemInfo(data);
9763
+ };
9764
+ popsDOMUtils.on($select, "click", (event) => {
9765
+ popsDOMUtils.preventEvent(event);
9766
+ const $click = event.target;
9767
+ if (data?.addCustomInput && $click instanceof HTMLInputElement) {
9768
+ // 自定义输入框 单独处理值更新，选中
9769
+ updateCustomInputStatus();
9770
+ return;
9771
+ }
9772
+ if (this.isSelectItemDisabled($select)) {
9773
+ // 被禁用了
9774
+ return;
9775
+ }
9776
+ if (typeof viewConfig.clickCallBack === "function") {
9777
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9778
+ if (typeof clickResult === "boolean" && !clickResult) {
9779
+ return;
9780
+ }
9781
+ }
9782
+ if (data?.addCustomInput) {
9783
+ // 自定义输入框 添加选中
9784
+ updateCustomInputStatus();
9785
+ }
9786
+ else {
9787
+ // 修改选中状态
9788
+ if (this.isItemSelected($select)) {
9789
+ // 移除选中
9790
+ this.removeItemSelected($select);
9791
+ this.removeSelectedItemInfo();
8818
9792
  }
8819
9793
  else {
8820
- break;
9794
+ // 添加选中
9795
+ this.setItemSelected($select);
9796
+ this.addSelectedItemInfo(data);
8821
9797
  }
8822
9798
  }
8823
- const $childUList = popsDOMUtils.createElement("ul");
8824
- $childUList.className = childUListClassName;
8825
- popsDOMUtils.after($li, $childUList);
8826
- that.uListContainerAddItem(viewConfig, {
8827
- ulElement: $childUList,
8828
- });
9799
+ });
9800
+ },
9801
+ /** 显示输入框 */
9802
+ showInputWrapper() {
9803
+ popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
9804
+ },
9805
+ /** 隐藏输入框 */
9806
+ hideInputWrapper() {
9807
+ popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
9808
+ },
9809
+ /** 显示palceholder */
9810
+ showPlaceHolderWrapper() {
9811
+ popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
9812
+ },
9813
+ /** 隐藏palceholder */
9814
+ hidePlaceHolderWrapper() {
9815
+ popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
9816
+ },
9817
+ };
9818
+ PopsPanelSelect.init();
9819
+ Reflect.set($li, "data-select", PopsPanelSelect);
9820
+ handler = PopsPanelSelect;
9821
+ }
9822
+ else if (mode === "horizontal") {
9823
+ const PopsPanelSelectHorizontal = {
9824
+ [Symbol.toStringTag]: "PopsPanelSelectHorizontal",
9825
+ $el: {
9826
+ $itemLeftContainer: $itemLeftContainer,
9827
+ /** 选择框容器 */
9828
+ $container: $container,
9829
+ /** 选择框包裹的容器 */
9830
+ $wrapper: void 0,
9831
+ },
9832
+ $data: {
9833
+ /**
9834
+ * 数据
9835
+ */
9836
+ data: [],
9837
+ /**
9838
+ * 默认值
9839
+ */
9840
+ defaultValue: viewConfig.getValue(),
9841
+ /**
9842
+ * 选择的信息
9843
+ */
9844
+ selectedData: void 0,
9845
+ /**
9846
+ * 箭头旋转的属性
9847
+ */
9848
+ rotateKey: "data-show-option",
9849
+ },
9850
+ /** 初始化 */
9851
+ init() {
9852
+ this.initDefault();
9853
+ this.initEl();
9854
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9855
+ if (disabled) {
9856
+ this.disable();
8829
9857
  }
8830
- });
8831
- },
8832
- /**
8833
- * 监听点击事件
8834
- */
8835
- setClickEvent() {
8836
- popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
8837
- this.setSelectOptionsDisableStatus();
8838
- if (typeof viewConfig.clickCallBack === "function") {
8839
- viewConfig.clickCallBack(event, this.$ele.select);
9858
+ },
9859
+ /** 初始化默认值 */
9860
+ initDefault() {
9861
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9862
+ if (!this.$data.data.length) {
9863
+ throw new Error("PopsPanelSelect: data is empty");
8840
9864
  }
8841
- });
8842
- },
9865
+ },
9866
+ /** 初始化$ele变量 */
9867
+ initEl() {
9868
+ this.$el.$container.setAttribute("data-mode", mode);
9869
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9870
+ /*html*/ `
9871
+ <div class="el-select__wrapper">
9872
+ </div>`);
9873
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9874
+ this.$data.data.forEach((dataItem) => {
9875
+ const $item = this.createSelectItemElement(dataItem);
9876
+ this.onSelectItemClick(dataItem, $item);
9877
+ if (this.$data.defaultValue === dataItem.value) {
9878
+ this.addSelectedItemInfo(dataItem);
9879
+ }
9880
+ this.$el.$wrapper.appendChild($item);
9881
+ });
9882
+ this.updateAllSelectItemStatus();
9883
+ },
9884
+ /**
9885
+ * 禁用选项容器
9886
+ */
9887
+ disable() {
9888
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9889
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9890
+ },
9891
+ /**
9892
+ * 取消禁用选项容器
9893
+ */
9894
+ cancleDisable() {
9895
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9896
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9897
+ },
9898
+ /**
9899
+ * 判断当前是否已禁用选项容器
9900
+ */
9901
+ isDisabled() {
9902
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
9903
+ popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
9904
+ },
9905
+ /**
9906
+ * 创建选择项
9907
+ * @param data 数据
9908
+ */
9909
+ createSelectItemElement(data) {
9910
+ const $select = popsDOMUtils.createElement("div", {
9911
+ className: "select-item",
9912
+ innerHTML: /*html*/ `
9913
+ <span class="select-item-text"></span>
9914
+ `,
9915
+ });
9916
+ this.setSelectItemText(data, $select);
9917
+ Reflect.set($select, "data-info", data);
9918
+ return $select;
9919
+ },
9920
+ /**
9921
+ * 设置选择项的文字
9922
+ * @param data 选择项的数据
9923
+ * @param $select 选择项元素
9924
+ */
9925
+ setSelectItemText(data, $select) {
9926
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9927
+ const $selectSpan = $select.querySelector(".select-item-text");
9928
+ if (!$selectSpan)
9929
+ return;
9930
+ if (data.isHTML) {
9931
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9932
+ }
9933
+ else {
9934
+ $selectSpan.innerText = text;
9935
+ }
9936
+ },
9937
+ /**
9938
+ * 设置选择项点击事件
9939
+ */
9940
+ onSelectItemClick(data, $el) {
9941
+ popsDOMUtils.on($el, "click", (event) => {
9942
+ popsDOMUtils.preventEvent(event);
9943
+ if (this.isDisabled()) {
9944
+ return;
9945
+ }
9946
+ if (this.isSelectItemDisabled($el)) {
9947
+ // 被禁用了
9948
+ return;
9949
+ }
9950
+ if (typeof viewConfig.clickCallBack === "function") {
9951
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9952
+ if (typeof clickResult === "boolean" && !clickResult) {
9953
+ return;
9954
+ }
9955
+ } // 修改选中状态
9956
+ if (this.isItemSelected($el)) {
9957
+ // 移除选中
9958
+ this.removeItemSelected($el);
9959
+ this.removeSelectedItemInfo();
9960
+ }
9961
+ else {
9962
+ // 添加选中
9963
+ this.setItemSelected($el);
9964
+ this.addSelectedItemInfo(data);
9965
+ }
9966
+ });
9967
+ },
9968
+ /**
9969
+ * 选中的值改变的回调
9970
+ * @param data 当前的选中信息
9971
+ */
9972
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9973
+ // 动态更新禁用状态、选中状态
9974
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9975
+ // 触发回调
9976
+ if (typeof viewConfig.callback === "function") {
9977
+ viewConfig.callback(data || this.$data.selectedData);
9978
+ }
9979
+ },
9980
+ /**
9981
+ * 更新选项弹窗内的所有选项元素的状态
9982
+ *
9983
+ * + 更新禁用状态
9984
+ * + 更新选中状态
9985
+ */
9986
+ updateAllSelectItemStatus() {
9987
+ const allSelectItems = this.getAllSelectItems(false);
9988
+ allSelectItems.forEach(($selectInfo) => {
9989
+ const { data, $select } = $selectInfo;
9990
+ // 更新文字
9991
+ this.setSelectItemText(data, $selectInfo.$select);
9992
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9993
+ // 移除选中状态
9994
+ this.removeItemSelected($select);
9995
+ // 禁用
9996
+ this.setSelectItemDisabled($select);
9997
+ }
9998
+ else {
9999
+ // 移除禁用状态
10000
+ this.removeSelectItemDisabled($select);
10001
+ }
10002
+ // 根据当前已选择的信息，判断并更新选中状态
10003
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
10004
+ // 就是这个项
10005
+ // 设置选中
10006
+ this.setItemSelected($select);
10007
+ }
10008
+ else {
10009
+ // 不是这个项
10010
+ // 移除选中状态
10011
+ this.removeItemSelected($select);
10012
+ }
10013
+ });
10014
+ },
10015
+ /**
10016
+ * 重置所有已选中的项以下状态
10017
+ *
10018
+ * + 更新选项显示的文字
10019
+ * + 移除禁用状态
10020
+ * + 移除选中状态
10021
+ */
10022
+ resetAllSelectedItemStatus() {
10023
+ const allSelectedItems = this.getAllSelectItems(true);
10024
+ if (allSelectedItems.length) {
10025
+ // 移除选中信息
10026
+ this.resetCurrentSelectedInfo();
10027
+ }
10028
+ allSelectedItems.forEach(($selectInfo) => {
10029
+ const { data, $select } = $selectInfo;
10030
+ // 更新文字
10031
+ this.setSelectItemText(data, $selectInfo.$select);
10032
+ // 移除选中状态
10033
+ this.removeItemSelected($select);
10034
+ // 取消禁用
10035
+ this.removeSelectItemDisabled($select);
10036
+ });
10037
+ },
10038
+ /**
10039
+ * 添加选中信息
10040
+ * @param data 选择项的数据
10041
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
10042
+ */
10043
+ addSelectedItemInfo(data) {
10044
+ this.resetCurrentSelectedInfo();
10045
+ this.updateSelectedInfo(data);
10046
+ this.onValueChangeCallback(data);
10047
+ },
10048
+ /**
10049
+ * 移除选中信息
10050
+ * @param data 选择项的数据
10051
+ */
10052
+ removeSelectedItemInfo() {
10053
+ // 删除
10054
+ this.updateSelectedInfo();
10055
+ this.onValueChangeCallback();
10056
+ },
10057
+ /**
10058
+ * 更新选中信息
10059
+ * @param data 数据
10060
+ */
10061
+ updateSelectedInfo(data) {
10062
+ // 先删除再赋值
10063
+ this.$data.selectedData = void 0;
10064
+ if (data) {
10065
+ if (data.addCustomInput && data.value.toString() === "") {
10066
+ // 自定义输入框，但是内容是空字符串
10067
+ // 不更新选中信息
10068
+ return;
10069
+ }
10070
+ this.$data.selectedData = data;
10071
+ }
10072
+ },
10073
+ /**
10074
+ * 从保存的已选中的信息列表中移除目标信息
10075
+ */
10076
+ resetCurrentSelectedInfo() {
10077
+ this.updateSelectedInfo();
10078
+ },
10079
+ /**
10080
+ * 设置选择项禁用
10081
+ * @param $select 选择项元素
10082
+ */
10083
+ setSelectItemDisabled($select) {
10084
+ $select.setAttribute("aria-disabled", "true");
10085
+ $select.setAttribute("disabled", "true");
10086
+ },
10087
+ /**
10088
+ * 移除选择项的禁用状态
10089
+ * @param $select 选择项元素
10090
+ */
10091
+ removeSelectItemDisabled($select) {
10092
+ $select.removeAttribute("aria-disabled");
10093
+ $select.removeAttribute("disabled");
10094
+ },
10095
+ /**
10096
+ * 判断选择项是否禁用
10097
+ * @param $select 选择项元素
10098
+ */
10099
+ isSelectItemDisabled($select) {
10100
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
10101
+ },
10102
+ /**
10103
+ * 设置选择项选中
10104
+ * @param $select 选择项元素（.select-item）
10105
+ */
10106
+ setItemSelected($select) {
10107
+ if (this.isItemSelected($select))
10108
+ return;
10109
+ $select.classList.add("select__selected-item");
10110
+ },
10111
+ /**
10112
+ * 移除选择项选中
10113
+ * @param $select 选择项元素（.select-item）
10114
+ */
10115
+ removeItemSelected($select) {
10116
+ $select.classList.remove("select__selected-item");
10117
+ },
10118
+ /**
10119
+ * 判断选择项是否选中
10120
+ * @param $select 选择项元素（.select-item）
10121
+ */
10122
+ isItemSelected($select) {
10123
+ return $select.classList.contains("select__selected-item");
10124
+ },
10125
+ /**
10126
+ * 获取所有选项的信息
10127
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
10128
+ * + true （默认）仅获取选中项的信息
10129
+ * + false 获取所有选择项的信息
10130
+ */
10131
+ getAllSelectItems(onlySelected = true) {
10132
+ return Array.from(this.$el.$wrapper?.querySelectorAll(".select-item") ?? [])
10133
+ .map(($select) => {
10134
+ const data = this.getItemDataOption($select);
10135
+ const result = {
10136
+ /** 选项信息数据 */
10137
+ data: data,
10138
+ /** 选项元素 */
10139
+ $select: $select,
10140
+ };
10141
+ if (onlySelected) {
10142
+ // 仅选中
10143
+ const isSelected = this.isItemSelected($select);
10144
+ if (isSelected) {
10145
+ return result;
10146
+ }
10147
+ return;
10148
+ }
10149
+ else {
10150
+ return result;
10151
+ }
10152
+ })
10153
+ .filter((item) => {
10154
+ return item != null;
10155
+ });
10156
+ },
10157
+ /**
10158
+ * 获取项上存储的信息
10159
+ * @param $el 选项元素
10160
+ */
10161
+ getItemDataOption($el) {
10162
+ return Reflect.get($el, "data-info");
10163
+ },
10164
+ };
10165
+ PopsPanelSelectHorizontal.init();
10166
+ Reflect.set($li, "data-select", PopsPanelSelectHorizontal);
10167
+ handler = PopsPanelSelectHorizontal;
10168
+ }
10169
+ return {
10170
+ $el: $li,
10171
+ handler: handler,
8843
10172
  };
8844
- PopsPanelSelect.init();
8845
- Reflect.set($li, "data-select", PopsPanelSelect);
8846
- return $li;
8847
10173
  },
8848
10174
  /**
8849
10175
  * type ==> select-multiple
@@ -8891,7 +10217,7 @@ define((function () { 'use strict';
8891
10217
  [Symbol.toStringTag]: "PopsPanelSelectMultiple",
8892
10218
  $el: {
8893
10219
  /** 左侧文本容器 */
8894
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
10220
+ $itemLeftContainer: $li.querySelector(".pops-panel-item-left-text"),
8895
10221
  /** 选择框容器 */
8896
10222
  $container: void 0,
8897
10223
  /** 选择框包裹的容器 */
@@ -8913,9 +10239,9 @@ define((function () { 'use strict';
8913
10239
  /** 默认值 */
8914
10240
  defaultValue: viewConfig.getValue(),
8915
10241
  /**
8916
- * 选择的信息
10242
+ * 已选择的信息
8917
10243
  */
8918
- selectInfo: [],
10244
+ selectedDataList: [],
8919
10245
  /**
8920
10246
  * 箭头旋转的属性
8921
10247
  */
@@ -8927,7 +10253,7 @@ define((function () { 'use strict';
8927
10253
  this.inintEl();
8928
10254
  this.initPlaceHolder();
8929
10255
  this.initTagElement();
8930
- this.setSelectContainerClickEvent();
10256
+ this.onShowSelectDialogClick();
8931
10257
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8932
10258
  if (disabled) {
8933
10259
  this.disable();
@@ -8938,12 +10264,7 @@ define((function () { 'use strict';
8938
10264
  viewConfig.data.forEach((dataItem) => {
8939
10265
  if (this.$data.defaultValue.includes(dataItem.value)) {
8940
10266
  // 初始化选中的配置
8941
- this.$data.selectInfo.push({
8942
- text: dataItem.text,
8943
- value: dataItem.value,
8944
- isHTML: Boolean(dataItem.isHTML),
8945
- disable: dataItem.disable?.bind(dataItem),
8946
- });
10267
+ this.$data.selectedDataList.push(dataItem);
8947
10268
  }
8948
10269
  });
8949
10270
  },
@@ -8959,7 +10280,9 @@ define((function () { 'use strict';
8959
10280
  // 先把手动输入框隐藏
8960
10281
  this.hideInputWrapper();
8961
10282
  },
8962
- /** 初始化提示文字 */
10283
+ /**
10284
+ * 初始化提示文字
10285
+ */
8963
10286
  initPlaceHolder() {
8964
10287
  let placeholder = "";
8965
10288
  if (typeof viewConfig.placeholder === "string") {
@@ -8976,16 +10299,18 @@ define((function () { 'use strict';
8976
10299
  });
8977
10300
  this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
8978
10301
  },
8979
- /** 初始化tag元素 */
10302
+ /**
10303
+ * 初始化tag元素
10304
+ */
8980
10305
  initTagElement() {
8981
10306
  // 遍历数据，寻找对应的值
8982
10307
  viewConfig.data.forEach((dataItem) => {
8983
- const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
10308
+ const findValue = this.$data.selectedDataList.find((item) => item.value === dataItem.value);
8984
10309
  if (findValue) {
8985
10310
  // 存在对应的值
8986
- const selectedInfo = this.createSelectedTagItem(dataItem);
8987
- this.addSelectedTagItem(selectedInfo.$tag);
8988
- this.setSelectedItemCloseIconClickEvent({
10311
+ const selectedInfo = this.createTagItem(dataItem);
10312
+ this.addTagItem(selectedInfo.$tag);
10313
+ this.onSelectItemCloseIconClick({
8989
10314
  $tag: selectedInfo.$tag,
8990
10315
  $closeIcon: selectedInfo.$closeIcon,
8991
10316
  value: dataItem.value,
@@ -8999,8 +10324,8 @@ define((function () { 'use strict';
8999
10324
  * 生成一个tag项
9000
10325
  * @param data 配置
9001
10326
  */
9002
- createSelectedTagItem(data) {
9003
- const $selectedItem = popsDOMUtils.createElement("div", {
10327
+ createTagItem(data) {
10328
+ const $tag = popsDOMUtils.createElement("div", {
9004
10329
  className: "el-select__selected-item el-select__choose_tag",
9005
10330
  innerHTML: /*html*/ `
9006
10331
  <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
@@ -9017,10 +10342,10 @@ define((function () { 'use strict';
9017
10342
  `,
9018
10343
  });
9019
10344
  /** 标签 */
9020
- const $tagText = $selectedItem.querySelector(".el-select__tags-text");
10345
+ const $tagText = $tag.querySelector(".el-select__tags-text");
9021
10346
  /** 关闭图标 */
9022
- const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
9023
- const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
10347
+ const $closeIcon = $tag.querySelector(".el-icon.el-tag__close");
10348
+ const text = typeof data.text === "function" ? data.text(data, this.$data.selectedDataList) : data.text;
9024
10349
  if (data.isHTML) {
9025
10350
  PopsSafeUtils.setSafeHTML($tagText, text);
9026
10351
  }
@@ -9028,7 +10353,7 @@ define((function () { 'use strict';
9028
10353
  $tagText.innerText = text;
9029
10354
  }
9030
10355
  return {
9031
- $tag: $selectedItem,
10356
+ $tag: $tag,
9032
10357
  $tagText: $tagText,
9033
10358
  $closeIcon: $closeIcon,
9034
10359
  };
@@ -9037,7 +10362,7 @@ define((function () { 'use strict';
9037
10362
  * 添加选中项的tag元素
9038
10363
  * @param $tag 添加的元素
9039
10364
  */
9040
- addSelectedTagItem($tag) {
10365
+ addTagItem($tag) {
9041
10366
  // 往前添加
9042
10367
  // 去除前面的空白
9043
10368
  this.setSectionIsNear();
@@ -9070,8 +10395,10 @@ define((function () { 'use strict';
9070
10395
  this.hideInputWrapper();
9071
10396
  this.hidePlaceHolderWrapper();
9072
10397
  },
9073
- /** 更新tag信息 */
9074
- updateSelectTagItem() {
10398
+ /**
10399
+ * 更新tag信息
10400
+ */
10401
+ updateTagItem() {
9075
10402
  this.$el.$section.querySelectorAll(".el-select__choose_tag").forEach(($ele) => {
9076
10403
  $ele.remove();
9077
10404
  });
@@ -9081,11 +10408,11 @@ define((function () { 'use strict';
9081
10408
  * 选中的值改变的回调
9082
10409
  * @param selectedDataList 当前的选中信息
9083
10410
  */
9084
- selectValueChangeCallBack(selectedDataList) {
10411
+ onValueChange(selectedDataList) {
9085
10412
  // 动态更新禁用状态
9086
- this.updateSelectItem();
10413
+ this.updateAllSelectItems();
9087
10414
  if (typeof viewConfig.callback === "function") {
9088
- viewConfig.callback(selectedDataList || this.$data.selectInfo);
10415
+ viewConfig.callback(selectedDataList || this.$data.selectedDataList);
9089
10416
  }
9090
10417
  },
9091
10418
  /**
@@ -9094,31 +10421,31 @@ define((function () { 'use strict';
9094
10421
  * + 更新禁用状态
9095
10422
  * + 更新选中状态
9096
10423
  */
9097
- updateSelectItem() {
10424
+ updateAllSelectItems() {
9098
10425
  this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
9099
10426
  const { data, $select } = $selectInfo;
9100
10427
  // 更新文字
9101
10428
  this.setSelectItemText(data, $selectInfo.$select);
9102
10429
  // 更新禁用状态
9103
- if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectInfo)) {
10430
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedDataList)) {
9104
10431
  // 禁用
9105
- this.setSelectItemDisabled($select);
10432
+ this.disableSelectItem($select);
9106
10433
  // 移除选中信息
9107
10434
  this.removeSelectedInfo(data, false);
9108
10435
  // 移除选中状态
9109
- this.removeSelectItemSelected($select);
10436
+ this.removeItemSelected($select);
9110
10437
  }
9111
10438
  else {
9112
10439
  // 取消禁用
9113
- this.removeSelectItemDisabled($select);
10440
+ this.cancleDisableSelectItem($select);
9114
10441
  }
9115
10442
  // 更新选中状态
9116
- const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
10443
+ const findValue = this.$data.selectedDataList.find((it) => it.value === data.value);
9117
10444
  if (findValue) {
9118
- this.setSelectItemSelected($select);
10445
+ this.setItemSelected($select);
9119
10446
  }
9120
10447
  else {
9121
- this.removeSelectItemSelected($select);
10448
+ this.removeItemSelected($select);
9122
10449
  }
9123
10450
  });
9124
10451
  },
@@ -9126,8 +10453,8 @@ define((function () { 'use strict';
9126
10453
  * 设置选项元素选中
9127
10454
  * @param $select 选项元素
9128
10455
  */
9129
- setSelectItemSelected($select) {
9130
- if (this.isSelectItemSelected($select))
10456
+ setItemSelected($select) {
10457
+ if (this.isItemSelected($select))
9131
10458
  return;
9132
10459
  $select.classList.add("select-item-is-selected");
9133
10460
  },
@@ -9135,14 +10462,14 @@ define((function () { 'use strict';
9135
10462
  * 移除选项元素选中
9136
10463
  * @param $select 选项元素
9137
10464
  */
9138
- removeSelectItemSelected($select) {
10465
+ removeItemSelected($select) {
9139
10466
  $select.classList.remove("select-item-is-selected");
9140
10467
  },
9141
10468
  /**
9142
10469
  * 判断选项元素是否选中
9143
10470
  * @param $select
9144
10471
  */
9145
- isSelectItemSelected($select) {
10472
+ isItemSelected($select) {
9146
10473
  return $select.classList.contains("select-item-is-selected");
9147
10474
  },
9148
10475
  /**
@@ -9150,18 +10477,13 @@ define((function () { 'use strict';
9150
10477
  * @param dataList 选择项列表的数据
9151
10478
  * @param $select 选项元素
9152
10479
  */
9153
- addSelectedItemInfo(dataList, $select) {
10480
+ addItemSelected(dataList, $select) {
9154
10481
  const info = this.getSelectedItemInfo($select);
9155
10482
  const findValue = dataList.find((item) => item.value === info.value);
9156
10483
  if (!findValue) {
9157
- dataList.push({
9158
- value: info.value,
9159
- text: info.text,
9160
- isHTML: Boolean(info.isHTML),
9161
- disable: info.disable?.bind(info),
9162
- });
10484
+ dataList.push(info);
9163
10485
  }
9164
- this.selectValueChangeCallBack(dataList);
10486
+ this.onValueChange(dataList);
9165
10487
  },
9166
10488
  /**
9167
10489
  * 获取选中的项的信息
@@ -9181,7 +10503,7 @@ define((function () { 'use strict';
9181
10503
  if (findIndex !== -1) {
9182
10504
  dataList.splice(findIndex, 1);
9183
10505
  }
9184
- this.selectValueChangeCallBack(dataList);
10506
+ this.onValueChange(dataList);
9185
10507
  },
9186
10508
  /**
9187
10509
  * 获取所有选项的信息
@@ -9201,7 +10523,7 @@ define((function () { 'use strict';
9201
10523
  };
9202
10524
  if (onlySelected) {
9203
10525
  // 仅选中
9204
- const isSelected = this.isSelectItemSelected($select);
10526
+ const isSelected = this.isItemSelected($select);
9205
10527
  if (isSelected) {
9206
10528
  return result;
9207
10529
  }
@@ -9236,7 +10558,7 @@ define((function () { 'use strict';
9236
10558
  * @param $select 选择项元素
9237
10559
  */
9238
10560
  setSelectItemText(data, $select) {
9239
- const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
10561
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedDataList) : data.text;
9240
10562
  const $selectSpan = $select.querySelector(".select-item-text");
9241
10563
  if (data.isHTML) {
9242
10564
  PopsSafeUtils.setSafeHTML($selectSpan, text);
@@ -9249,7 +10571,7 @@ define((function () { 'use strict';
9249
10571
  * 设置选择项的禁用状态
9250
10572
  * @param $select 选择项元素
9251
10573
  */
9252
- setSelectItemDisabled($select) {
10574
+ disableSelectItem($select) {
9253
10575
  $select.setAttribute("aria-disabled", "true");
9254
10576
  $select.setAttribute("disabled", "true");
9255
10577
  },
@@ -9257,7 +10579,7 @@ define((function () { 'use strict';
9257
10579
  * 移除选择项的禁用状态
9258
10580
  * @param $select 选择项元素
9259
10581
  */
9260
- removeSelectItemDisabled($select) {
10582
+ cancleDisableSelectItem($select) {
9261
10583
  $select.removeAttribute("aria-disabled");
9262
10584
  $select.removeAttribute("disabled");
9263
10585
  },
@@ -9273,7 +10595,7 @@ define((function () { 'use strict';
9273
10595
  * @param dataList 选中的信息列表
9274
10596
  * @param $select 选择项元素
9275
10597
  */
9276
- setSelectElementClickEvent(dataList, $select) {
10598
+ onSelectItemClick(dataList, $select) {
9277
10599
  popsDOMUtils.on($select, "click", (event) => {
9278
10600
  popsDOMUtils.preventEvent(event);
9279
10601
  if (this.isSelectItemDisabled($select)) {
@@ -9287,13 +10609,13 @@ define((function () { 'use strict';
9287
10609
  }
9288
10610
  }
9289
10611
  // 修改选中状态
9290
- if (this.isSelectItemSelected($select)) {
9291
- this.removeSelectItemSelected($select);
10612
+ if (this.isItemSelected($select)) {
10613
+ this.removeItemSelected($select);
9292
10614
  this.removeSelectedItemInfo(dataList, $select);
9293
10615
  }
9294
10616
  else {
9295
- this.setSelectItemSelected($select);
9296
- this.addSelectedItemInfo(dataList, $select);
10617
+ this.setItemSelected($select);
10618
+ this.addItemSelected(dataList, $select);
9297
10619
  }
9298
10620
  });
9299
10621
  },
@@ -9302,79 +10624,18 @@ define((function () { 'use strict';
9302
10624
  *
9303
10625
  * 点击显示下拉列表弹窗
9304
10626
  */
9305
- setSelectContainerClickEvent() {
9306
- const defaultCSS = /*css*/ `
9307
- .select-container{
9308
- --el-font-size-base: 14px;
9309
- --el-text-color-regular: #606266;
9310
- --el-color-primary: #409eff;
9311
- --el-fill-color-light: #f5f7fa;
9312
- --el-disable-color: #a8abb2;
9313
- }
9314
- .select-item{
9315
- cursor: pointer;
9316
- font-size: var(--el-font-size-base);
9317
- padding: 0 32px 0 20px;
9318
- position: relative;
9319
- white-space: nowrap;
9320
- overflow: hidden;
9321
- text-overflow: ellipsis;
9322
- color: var(--el-text-color-regular);
9323
- height: 34px;
9324
- line-height: 34px;
9325
- box-sizing: border-box;
9326
- }
9327
- .select-item[aria-disabled],
9328
- .select-item[disabled]{
9329
- cursor: not-allowed;
9330
- color: var(--el-disable-color);
9331
- background: unset;
9332
- }
9333
- .select-item:hover{
9334
- background-color: var(--el-fill-color-light);
9335
- }
9336
- .select-item.select-item-is-selected{
9337
- color: var(--el-color-primary);
9338
- font-weight: 700;
9339
- }
9340
- .select-item.select-item-is-selected::after{
9341
- content: "";
9342
- position: absolute;
9343
- top: 50%;
9344
- right: 20px;
9345
- border-top: none;
9346
- border-right: none;
9347
- background-repeat: no-repeat;
9348
- background-position: center;
9349
- background-color: var(--el-color-primary);
9350
- mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9351
- mask-size: 100% 100%;
9352
- -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9353
- -webkit-mask-size: 100% 100%;
9354
- transform: translateY(-50%);
9355
- width: 12px;
9356
- height: 12px;
9357
- }
9358
-
9359
-
9360
- @media (prefers-color-scheme: dark) {
9361
- .select-container{
9362
- --el-text-color-regular: #f2f2f2;
9363
- --el-disable-color: #8D9095;
9364
- --el-fill-color-light: #262727;
9365
- }
9366
- }
9367
- `;
10627
+ onShowSelectDialogClick() {
10628
+ const defaultCSS = PopsCSS.panelComponents_Select;
9368
10629
  popsDOMUtils.on(this.$el.$container, "click", () => {
9369
10630
  if (this.isDisabled()) {
9370
10631
  return;
9371
10632
  }
9372
10633
  /** 当前已选中的值 */
9373
- const selectInfo = this.$data.selectInfo;
10634
+ const selectInfo = this.$data.selectedDataList;
9374
10635
  const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9375
10636
  const dialogCloseCallback = () => {
9376
- this.$data.selectInfo = [...selectInfo];
9377
- this.updateSelectTagItem();
10637
+ this.$data.selectedDataList = [...selectInfo];
10638
+ this.updateTagItem();
9378
10639
  this.$el.$selectContainer = null;
9379
10640
  this.$el.$container.removeAttribute(this.$data.rotateKey);
9380
10641
  };
@@ -9385,9 +10646,7 @@ define((function () { 'use strict';
9385
10646
  position: "center",
9386
10647
  },
9387
10648
  content: {
9388
- text: /*html*/ `
9389
- <ul class="select-container"></ul>
9390
- `,
10649
+ text: /*html*/ `<ul class="select-container"></ul>`,
9391
10650
  html: true,
9392
10651
  },
9393
10652
  btn: {
@@ -9415,7 +10674,7 @@ define((function () { 'use strict';
9415
10674
  drag: true,
9416
10675
  dragLimit: true,
9417
10676
  width: "300px",
9418
- height: "300px",
10677
+ height: "auto",
9419
10678
  style: /*css*/ `
9420
10679
  ${defaultCSS}
9421
10680
 
@@ -9430,18 +10689,18 @@ define((function () { 'use strict';
9430
10689
  // 添加到confirm中
9431
10690
  $selectContainer.appendChild($select);
9432
10691
  // 设置每一项的点击事件
9433
- this.setSelectElementClickEvent(selectInfo, $select);
10692
+ this.onSelectItemClick(selectInfo, $select);
9434
10693
  });
9435
10694
  this.$el.$selectContainer = $selectContainer;
9436
10695
  // 动态更新禁用状态
9437
- this.updateSelectItem();
10696
+ this.updateAllSelectItems();
9438
10697
  });
9439
10698
  },
9440
10699
  /**
9441
10700
  * 设置关闭图标的点击事件
9442
10701
  * @param data 选中的信息
9443
10702
  */
9444
- setSelectedItemCloseIconClickEvent(data) {
10703
+ onSelectItemCloseIconClick(data) {
9445
10704
  popsDOMUtils.on(data.$closeIcon, "click", (event) => {
9446
10705
  popsDOMUtils.preventEvent(event);
9447
10706
  if (this.isDisabled()) {
@@ -9468,7 +10727,9 @@ define((function () { 'use strict';
9468
10727
  });
9469
10728
  },
9470
10729
  /**
9471
- * 检测tag是否为空，为空显示placeholder
10730
+ * 检测tag是否为空
10731
+ *
10732
+ * 如果为空则显示placeholder
9472
10733
  */
9473
10734
  checkTagEmpty() {
9474
10735
  if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
@@ -9493,14 +10754,14 @@ define((function () { 'use strict';
9493
10754
  * + false 不触发值改变的回调
9494
10755
  */
9495
10756
  removeSelectedInfo(data, triggerValueChangeCallBack = true) {
9496
- for (let index = 0; index < this.$data.selectInfo.length; index++) {
9497
- const selectInfo = this.$data.selectInfo[index];
10757
+ for (let index = 0; index < this.$data.selectedDataList.length; index++) {
10758
+ const selectInfo = this.$data.selectedDataList[index];
9498
10759
  if (selectInfo.value === data.value) {
9499
- this.$data.selectInfo.splice(index, 1);
10760
+ this.$data.selectedDataList.splice(index, 1);
9500
10761
  break;
9501
10762
  }
9502
10763
  }
9503
- triggerValueChangeCallBack && this.selectValueChangeCallBack();
10764
+ triggerValueChangeCallBack && this.onValueChange();
9504
10765
  },
9505
10766
  /** 显示输入框 */
9506
10767
  showInputWrapper() {
@@ -9530,26 +10791,29 @@ define((function () { 'use strict';
9530
10791
  * 禁用标签
9531
10792
  */
9532
10793
  disable() {
9533
- popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9534
- popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10794
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
10795
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9535
10796
  },
9536
10797
  /**
9537
10798
  * 判断是否被禁用
9538
10799
  */
9539
10800
  isDisabled() {
9540
- return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10801
+ return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable");
9541
10802
  },
9542
10803
  /**
9543
10804
  * 取消禁用标签
9544
10805
  */
9545
10806
  cancleDisable() {
9546
- popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9547
- popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10807
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
10808
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9548
10809
  },
9549
10810
  };
9550
10811
  PopsPanelSelectMultiple.init();
9551
10812
  Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9552
- return $li;
10813
+ return {
10814
+ $el: $li,
10815
+ handler: PopsPanelSelectMultiple,
10816
+ };
9553
10817
  },
9554
10818
  /**
9555
10819
  * type ==> button
@@ -9590,7 +10854,7 @@ define((function () { 'use strict';
9590
10854
  init() {
9591
10855
  this.$ele.panelButton.appendChild(this.$ele.button);
9592
10856
  this.initButton();
9593
- this.setClickEvent();
10857
+ this.onButtonClick();
9594
10858
  },
9595
10859
  initButton() {
9596
10860
  if (typeof viewConfig.buttonIcon === "string" && viewConfig.buttonIcon.trim() !== "") {
@@ -9687,7 +10951,10 @@ define((function () { 'use strict';
9687
10951
  setButtonText(text) {
9688
10952
  PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
9689
10953
  },
9690
- setClickEvent() {
10954
+ /**
10955
+ * 设置按钮的点击事件
10956
+ */
10957
+ onButtonClick() {
9691
10958
  popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
9692
10959
  if (typeof viewConfig.callback === "function") {
9693
10960
  viewConfig.callback(event);
@@ -9697,7 +10964,10 @@ define((function () { 'use strict';
9697
10964
  };
9698
10965
  PopsPanelButton.init();
9699
10966
  Reflect.set($li, "data-button", PopsPanelButton);
9700
- return $li;
10967
+ return {
10968
+ $el: $li,
10969
+ handler: PopsPanelButton,
10970
+ };
9701
10971
  },
9702
10972
  /**
9703
10973
  * type ==> deepMenu
@@ -9744,7 +11014,7 @@ define((function () { 'use strict';
9744
11014
  },
9745
11015
  },
9746
11016
  init() {
9747
- this.setLiClickEvent();
11017
+ this.onLiClick();
9748
11018
  },
9749
11019
  /**
9750
11020
  * 生成配置每一项的元素
@@ -9953,7 +11223,7 @@ define((function () { 'use strict';
9953
11223
  that.triggerRenderRightContainer($deepMenuSection);
9954
11224
  },
9955
11225
  /** 设置项的点击事件 */
9956
- setLiClickEvent() {
11226
+ onLiClick() {
9957
11227
  popsDOMUtils.on($li, "click", void 0, async (event) => {
9958
11228
  if (typeof viewConfig.clickCallBack === "function") {
9959
11229
  const result = await viewConfig.clickCallBack(event, viewConfig);
@@ -9967,7 +11237,10 @@ define((function () { 'use strict';
9967
11237
  };
9968
11238
  PopsPanelDeepMenu.init();
9969
11239
  Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9970
- return $li;
11240
+ return {
11241
+ $el: $li,
11242
+ handler: PopsPanelDeepMenu,
11243
+ };
9971
11244
  },
9972
11245
  /**
9973
11246
  * type ===> own
@@ -9980,8 +11253,10 @@ define((function () { 'use strict';
9980
11253
  this.setElementClassName($li, viewConfig.className);
9981
11254
  this.setElementAttributes($li, viewConfig.attributes);
9982
11255
  this.setElementProps($li, viewConfig.props);
9983
- $li = viewConfig.getLiElementCallBack($li);
9984
- return $li;
11256
+ $li = viewConfig.createLIElement($li);
11257
+ return {
11258
+ $el: $li,
11259
+ };
9985
11260
  },
9986
11261
  /**
9987
11262
  * 获取中间容器的元素<li>
@@ -9994,7 +11269,7 @@ define((function () { 'use strict';
9994
11269
  return this.createSectionContainerItem_switch(viewConfig);
9995
11270
  }
9996
11271
  else if (componentType === "slider") {
9997
- return this.createSectionContainerItem_slider_new(viewConfig);
11272
+ return this.createSectionContainerItem_slider(viewConfig);
9998
11273
  }
9999
11274
  else if (componentType === "input") {
10000
11275
  return this.createSectionContainerItem_input(viewConfig);
@@ -10120,14 +11395,14 @@ define((function () { 'use strict';
10120
11395
  * @param containerOptions
10121
11396
  */
10122
11397
  uListContainerAddItem(viewConfig, containerOptions) {
10123
- const itemLiElement = this.createSectionContainerItem(viewConfig);
10124
- if (itemLiElement) {
10125
- containerOptions["ulElement"].appendChild(itemLiElement);
11398
+ const itemInfo = this.createSectionContainerItem(viewConfig);
11399
+ if (itemInfo) {
11400
+ containerOptions["ulElement"].appendChild(itemInfo.$el);
10126
11401
  }
10127
11402
  if (typeof viewConfig.afterAddToUListCallBack === "function") {
10128
11403
  viewConfig.afterAddToUListCallBack(viewConfig, {
10129
11404
  ...containerOptions,
10130
- target: itemLiElement,
11405
+ target: itemInfo?.$el,
10131
11406
  });
10132
11407
  }
10133
11408
  },
@@ -10136,7 +11411,7 @@ define((function () { 'use strict';
10136
11411
  * @param $asideItem 左侧的容器<li>元素
10137
11412
  * @param asideConfig 配置
10138
11413
  */
10139
- setAsideItemClickEvent($asideItem, asideConfig) {
11414
+ onAsideItemClick($asideItem, asideConfig) {
10140
11415
  popsDOMUtils.on($asideItem, "click", async (event) => {
10141
11416
  if (typeof asideConfig.clickFirstCallback === "function") {
10142
11417
  const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
@@ -11319,6 +12594,13 @@ define((function () { 'use strict';
11319
12594
  });
11320
12595
  $shadowRoot.appendChild($css);
11321
12596
  }
12597
+ /**
12598
+ * 监听器的默认配置
12599
+ */
12600
+ const defaultListenerOption = {
12601
+ capture: true,
12602
+ passive: true,
12603
+ };
11322
12604
  const SearchSuggestion = {
11323
12605
  /**
11324
12606
  * 当前的环境，可以是document，可以是shadowroot，默认是document
@@ -11670,29 +12952,16 @@ define((function () { 'use strict';
11670
12952
  },
11671
12953
  /**
11672
12954
  * 设置搜索建议框每一项的选中事件
11673
- * @param liElement
12955
+ * @param $li 每一项元素
11674
12956
  */
11675
12957
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
11676
- setSearchItemSelectEvent(liElement) {
11677
- // popsDOMUtils.on(
11678
- // liElement,
11679
- // "keyup",
11680
- // void 0,
11681
- // (event) => {
11682
- // let value = liElement["data-value"];
11683
- // config.selectCallBack(event, liElement, value);
11684
- // },
11685
- // {
11686
- // capture: true,
11687
- // }
11688
- // );
12958
+ setSearchItemSelectEvent($li) {
12959
+ // TODO
11689
12960
  },
11690
12961
  /**
11691
12962
  * 监听输入框内容改变
11692
12963
  */
11693
- setInputChangeEvent(option = {
11694
- capture: true,
11695
- }) {
12964
+ setInputChangeEvent(option = defaultListenerOption) {
11696
12965
  // 必须是input或者textarea才有input事件
11697
12966
  if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
11698
12967
  return;
@@ -11701,9 +12970,7 @@ define((function () { 'use strict';
11701
12970
  // 禁用输入框自动提示
11702
12971
  config.$inputTarget.setAttribute("autocomplete", "off");
11703
12972
  // 内容改变事件
11704
- const listenerHandler = popsDOMUtils.onInput(config.$inputTarget,
11705
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11706
- async (_event) => {
12973
+ const listenerHandler = popsDOMUtils.onInput(config.$inputTarget, async () => {
11707
12974
  const data = SearchSuggestion.getData();
11708
12975
  const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.$inputTarget.value, data, config);
11709
12976
  SearchSuggestion.update(queryDataResult);
@@ -11714,11 +12981,7 @@ define((function () { 'use strict';
11714
12981
  /**
11715
12982
  * 移除输入框内容改变的监听
11716
12983
  */
11717
- removeInputChangeEvent(
11718
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11719
- option = {
11720
- capture: true,
11721
- }) {
12984
+ removeInputChangeEvent() {
11722
12985
  for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
11723
12986
  const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
11724
12987
  handler();
@@ -11746,10 +13009,7 @@ define((function () { 'use strict';
11746
13009
  /**
11747
13010
  * 设置显示搜索建议框的事件
11748
13011
  */
11749
- setShowEvent(option = {
11750
- capture: true,
11751
- passive: true,
11752
- }) {
13012
+ setShowEvent(option = defaultListenerOption) {
11753
13013
  /* 焦点|点击事件*/
11754
13014
  if (config.followPosition === "target") {
11755
13015
  popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
@@ -11767,10 +13027,7 @@ define((function () { 'use strict';
11767
13027
  /**
11768
13028
  * 移除显示搜索建议框的事件
11769
13029
  */
11770
- removeShowEvent(option = {
11771
- capture: true,
11772
- passive: true,
11773
- }) {
13030
+ removeShowEvent(option = defaultListenerOption) {
11774
13031
  /* 焦点|点击事件*/
11775
13032
  popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
11776
13033
  // 内容改变事件
@@ -11800,10 +13057,7 @@ define((function () { 'use strict';
11800
13057
  /**
11801
13058
  * 设置隐藏搜索建议框的事件
11802
13059
  */
11803
- setHideEvent(option = {
11804
- capture: true,
11805
- passive: true,
11806
- }) {
13060
+ setHideEvent(option = defaultListenerOption) {
11807
13061
  // 全局点击事件
11808
13062
  // 全局触摸屏点击事件
11809
13063
  if (Array.isArray(SearchSuggestion.selfDocument)) {
@@ -11818,10 +13072,7 @@ define((function () { 'use strict';
11818
13072
  /**
11819
13073
  * 移除隐藏搜索建议框的事件
11820
13074
  */
11821
- removeHideEvent(option = {
11822
- capture: true,
11823
- passive: true,
11824
- }) {
13075
+ removeHideEvent(option = defaultListenerOption) {
11825
13076
  if (Array.isArray(SearchSuggestion.selfDocument)) {
11826
13077
  SearchSuggestion.selfDocument.forEach(($checkParent) => {
11827
13078
  popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
@@ -11834,10 +13085,7 @@ define((function () { 'use strict';
11834
13085
  /**
11835
13086
  * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
11836
13087
  */
11837
- setAllEvent(option = {
11838
- capture: true,
11839
- passive: true,
11840
- }) {
13088
+ setAllEvent(option = defaultListenerOption) {
11841
13089
  SearchSuggestion.setInputChangeEvent(option);
11842
13090
  SearchSuggestion.setHideEvent(option);
11843
13091
  SearchSuggestion.setShowEvent(option);
@@ -11845,11 +13093,8 @@ define((function () { 'use strict';
11845
13093
  /**
11846
13094
  * 移除所有监听
11847
13095
  */
11848
- removeAllEvent(option = {
11849
- capture: true,
11850
- passive: true,
11851
- }) {
11852
- SearchSuggestion.removeInputChangeEvent(option);
13096
+ removeAllEvent(option = defaultListenerOption) {
13097
+ SearchSuggestion.removeInputChangeEvent();
11853
13098
  SearchSuggestion.removeHideEvent(option);
11854
13099
  SearchSuggestion.removeShowEvent(option);
11855
13100
  },
@@ -12095,7 +13340,7 @@ define((function () { 'use strict';
12095
13340
  },
12096
13341
  };
12097
13342
 
12098
- const version = "3.0.1";
13343
+ const version = "3.0.2";
12099
13344
 
12100
13345
  class Pops {
12101
13346
  /** 配置 */