@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.system.js CHANGED
@@ -2853,7 +2853,7 @@ System.register('pops', [], (function (exports) {
2853
2853
 
2854
2854
  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";
2855
2855
 
2856
- 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";
2856
+ 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";
2857
2857
 
2858
2858
  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";
2859
2859
 
@@ -2873,9 +2873,11 @@ System.register('pops', [], (function (exports) {
2873
2873
 
2874
2874
  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";
2875
2875
 
2876
- 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";
2876
+ 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";
2877
2877
 
2878
- 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";
2878
+ 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";
2879
+
2880
+ 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";
2879
2881
 
2880
2882
  const PopsCSS = {
2881
2883
  /** 主CSS */
@@ -2906,10 +2908,12 @@ System.register('pops', [], (function (exports) {
2906
2908
  drawerCSS: drawerCSS,
2907
2909
  /** pops.folder */
2908
2910
  folderCSS: folderCSS,
2909
- /** pops.folder */
2911
+ /** pops.panel */
2910
2912
  panelCSS: panelCSS,
2911
2913
  /** pops.rightClickMenu */
2912
2914
  rightClickMenu: rightClickMenuCSS,
2915
+ /** pops.panel的select组件 */
2916
+ panelComponents_Select: panelComponents_Select_CSS,
2913
2917
  };
2914
2918
 
2915
2919
  const PopsAnimation = {
@@ -6112,7 +6116,6 @@ System.register('pops', [], (function (exports) {
6112
6116
  className: "forms-1",
6113
6117
  text: "区域设置",
6114
6118
  type: "container",
6115
- attributes: {},
6116
6119
  views: [
6117
6120
  {
6118
6121
  className: "panel-switch",
@@ -6120,11 +6123,6 @@ System.register('pops', [], (function (exports) {
6120
6123
  type: "switch",
6121
6124
  disabled: false,
6122
6125
  description: "",
6123
- afterAddToUListCallBack() {
6124
- // TODO
6125
- },
6126
- props: {},
6127
- attributes: {},
6128
6126
  getValue() {
6129
6127
  return true;
6130
6128
  },
@@ -6137,17 +6135,12 @@ System.register('pops', [], (function (exports) {
6137
6135
  text: "slider",
6138
6136
  type: "slider",
6139
6137
  description: "",
6140
- afterAddToUListCallBack() {
6141
- // TODO
6142
- },
6143
6138
  disabled: false,
6144
6139
  getToolTipContent(value) {
6145
6140
  return String(value);
6146
6141
  },
6147
6142
  isShowHoverTip: true,
6148
6143
  step: 1,
6149
- props: {},
6150
- attributes: {},
6151
6144
  getValue() {
6152
6145
  return 50;
6153
6146
  },
@@ -6164,11 +6157,6 @@ System.register('pops', [], (function (exports) {
6164
6157
  description: "",
6165
6158
  disable: false,
6166
6159
  buttonIsRightIcon: false,
6167
- props: {},
6168
- afterAddToUListCallBack() {
6169
- // TODO
6170
- },
6171
- attributes: {},
6172
6160
  buttonIcon: "view",
6173
6161
  buttonIconIsLoading: true,
6174
6162
  buttonType: "default",
@@ -6181,8 +6169,6 @@ System.register('pops', [], (function (exports) {
6181
6169
  className: "panel-button",
6182
6170
  text: "button",
6183
6171
  type: "button",
6184
- props: {},
6185
- attributes: {},
6186
6172
  buttonIcon: "eleme",
6187
6173
  buttonIconIsLoading: true,
6188
6174
  buttonType: "warning",
@@ -6194,10 +6180,7 @@ System.register('pops', [], (function (exports) {
6194
6180
  {
6195
6181
  className: "panel-button",
6196
6182
  text: "button",
6197
- // @ts-ignore
6198
- props: {},
6199
6183
  type: "button",
6200
- attributes: {},
6201
6184
  buttonIcon: "chromeFilled",
6202
6185
  buttonIconIsLoading: true,
6203
6186
  buttonType: "danger",
@@ -6210,9 +6193,6 @@ System.register('pops', [], (function (exports) {
6210
6193
  className: "panel-button",
6211
6194
  text: "button",
6212
6195
  type: "button",
6213
- attributes: {},
6214
- // @ts-ignore
6215
- props: {},
6216
6196
  buttonIcon: "upload",
6217
6197
  buttonIconIsLoading: false,
6218
6198
  buttonType: "info",
@@ -6239,9 +6219,6 @@ System.register('pops', [], (function (exports) {
6239
6219
  className: "panel-input",
6240
6220
  text: "input",
6241
6221
  type: "input",
6242
- isNumber: false,
6243
- props: {},
6244
- attributes: {},
6245
6222
  getValue() {
6246
6223
  return "50";
6247
6224
  },
@@ -6251,12 +6228,32 @@ System.register('pops', [], (function (exports) {
6251
6228
  },
6252
6229
  placeholder: "请输入内容",
6253
6230
  },
6231
+ {
6232
+ className: "panel-input-number",
6233
+ text: "input-number",
6234
+ type: "input",
6235
+ inputType: "number",
6236
+ getValue() {
6237
+ return "50";
6238
+ },
6239
+ callback(event, value, valueAsNumber) {
6240
+ popsDOMUtils.preventEvent(event);
6241
+ console.log("输入框内容改变：", valueAsNumber);
6242
+ if (valueAsNumber > 60) {
6243
+ return {
6244
+ valid: false,
6245
+ message: "输入值不能大于60，当前：" + value,
6246
+ };
6247
+ }
6248
+ },
6249
+ placeholder: "请输入内容",
6250
+ },
6254
6251
  {
6255
6252
  className: "panel-input-password",
6256
6253
  text: "input-password",
6257
6254
  type: "input",
6258
- props: {},
6259
- attributes: {},
6255
+ inputType: "password",
6256
+ placeholder: "请输入密码",
6260
6257
  getValue() {
6261
6258
  return "123456";
6262
6259
  },
@@ -6264,209 +6261,510 @@ System.register('pops', [], (function (exports) {
6264
6261
  popsDOMUtils.preventEvent(event);
6265
6262
  console.log("密码输入框内容改变：", value);
6266
6263
  },
6267
- isPassword: true,
6268
- placeholder: "请输入密码",
6269
6264
  },
6270
6265
  {
6271
- className: "panel-textarea",
6272
- text: "textarea",
6273
- type: "textarea",
6274
- props: {},
6275
- attributes: {},
6266
+ className: "panel-input-file",
6267
+ text: "input-file",
6268
+ type: "input",
6269
+ inputType: "file",
6276
6270
  getValue() {
6277
- return "50";
6271
+ return "";
6278
6272
  },
6279
6273
  callback(event, value) {
6280
6274
  popsDOMUtils.preventEvent(event);
6281
- console.log("textarea输入框内容改变：", value);
6275
+ console.log("内容改变：", value);
6282
6276
  },
6277
+ placeholder: "请输入密码",
6278
+ },
6279
+ {
6280
+ className: "panel-input-date",
6281
+ text: "input-date",
6282
+ type: "input",
6283
+ inputType: "date",
6283
6284
  placeholder: "请输入内容",
6285
+ getValue() {
6286
+ const date = new Date();
6287
+ let hour = date.getHours().toString();
6288
+ let minutes = date.getMinutes().toString();
6289
+ if (hour.length === 1) {
6290
+ hour = `0${hour}`;
6291
+ }
6292
+ if (minutes.length === 1) {
6293
+ minutes = `0${minutes}`;
6294
+ }
6295
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
6296
+ },
6297
+ callback(event, value, valueAsNumber, valueAsDate) {
6298
+ popsDOMUtils.preventEvent(event);
6299
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6300
+ },
6284
6301
  },
6285
6302
  {
6286
- className: "panel-select-disabled",
6287
- text: "select-disabled",
6288
- type: "select",
6289
- disabled: true,
6290
- props: {},
6291
- attributes: {},
6303
+ className: "panel-input-datetime-local",
6304
+ text: "input-datetime-local",
6305
+ type: "input",
6306
+ inputType: "datetime-local",
6292
6307
  getValue() {
6293
- return 50;
6308
+ const date = new Date();
6309
+ let hour = date.getHours().toString();
6310
+ let minutes = date.getMinutes().toString();
6311
+ if (hour.length === 1) {
6312
+ hour = `0${hour}`;
6313
+ }
6314
+ if (minutes.length === 1) {
6315
+ minutes = `0${minutes}`;
6316
+ }
6317
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}T${hour}:${minutes}`;
6294
6318
  },
6295
- callback(event, isSelectedValue, isSelectedText) {
6296
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6319
+ callback(event, value, valueAsNumber, valueAsDate) {
6320
+ popsDOMUtils.preventEvent(event);
6321
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6297
6322
  },
6298
- data: [
6299
- {
6300
- value: "all",
6301
- text: "所有",
6302
- disable() {
6303
- return false;
6304
- },
6305
- views: [],
6306
- },
6307
- {
6308
- value: "text",
6309
- text: "文本",
6310
- disable() {
6311
- return false;
6312
- },
6313
- views: [],
6314
- },
6315
- {
6316
- value: "html",
6317
- text: "超文本",
6318
- disable() {
6319
- return false;
6320
- },
6321
- views: [],
6322
- },
6323
- ],
6323
+ placeholder: "请输入内容",
6324
6324
  },
6325
6325
  {
6326
- className: "panel-select-multiple-disabled",
6327
- type: "select-multiple",
6328
- text: "select-multiple-disabled",
6329
- disabled: true,
6330
- props: {},
6331
- attributes: {},
6332
- placeholder: "请至少选择一个选项",
6326
+ className: "panel-input-time",
6327
+ text: "input-time",
6328
+ type: "input",
6329
+ inputType: "time",
6333
6330
  getValue() {
6334
- return ["select-1", "select-2"];
6331
+ return "11:30";
6335
6332
  },
6336
- callback(selectInfo) {
6337
- console.log(`select值改变，多选信息`, selectInfo);
6333
+ callback(event, value, valueAsNumber, valueAsDate) {
6334
+ popsDOMUtils.preventEvent(event);
6335
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6338
6336
  },
6339
- clickCallBack(event, isSelectedInfo) {
6340
- console.log("点击", event, isSelectedInfo);
6337
+ placeholder: "请输入内容",
6338
+ },
6339
+ {
6340
+ className: "panel-input-month",
6341
+ text: "input-month",
6342
+ type: "input",
6343
+ inputType: "month",
6344
+ getValue() {
6345
+ const date = new Date();
6346
+ return `${date.getFullYear()}-${date.getMonth() + 1}`;
6341
6347
  },
6342
- closeIconClickCallBack(event, data) {
6343
- console.log("点击关闭图标的事件", data);
6348
+ callback(event, value, valueAsNumber, valueAsDate) {
6349
+ popsDOMUtils.preventEvent(event);
6350
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6344
6351
  },
6345
- data: [
6346
- {
6347
- value: "select-1",
6348
- text: "单选1",
6349
- isHTML: false,
6350
- },
6351
- {
6352
- value: "select-2",
6353
- text: "单选2",
6354
- isHTML: false,
6355
- },
6356
- {
6357
- value: "select-3",
6358
- text: "单选3",
6359
- isHTML: false,
6360
- },
6361
- {
6362
- value: "select-4",
6363
- text: "单选4",
6364
- isHTML: false,
6365
- },
6366
- ],
6352
+ placeholder: "请输入内容",
6367
6353
  },
6368
6354
  {
6369
- className: "panel-select",
6370
- text: "select",
6371
- type: "select",
6372
- props: {},
6373
- attributes: {},
6355
+ className: "panel-input-week",
6356
+ text: "input-week",
6357
+ type: "input",
6358
+ inputType: "week",
6374
6359
  getValue() {
6375
- return 50;
6360
+ const date = new Date();
6361
+ return `${date.getFullYear()}-W01`;
6376
6362
  },
6377
- callback(event, isSelectedValue, isSelectedText) {
6378
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6363
+ callback(event, value, valueAsNumber, valueAsDate) {
6364
+ popsDOMUtils.preventEvent(event);
6365
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6379
6366
  },
6380
- data: [
6381
- {
6382
- value: "all",
6383
- text: "所有",
6384
- disable() {
6385
- return false;
6386
- },
6387
- views: [],
6388
- },
6389
- {
6390
- value: "text",
6391
- text: "文本",
6392
- disable() {
6393
- return false;
6394
- },
6395
- views: [],
6396
- },
6397
- {
6398
- value: "html",
6399
- text: "超文本",
6400
- disable() {
6401
- return false;
6402
- },
6403
- views: [],
6404
- },
6405
- ],
6367
+ placeholder: "请输入内容",
6368
+ },
6369
+ {
6370
+ className: "panel-input-search",
6371
+ text: "input-search",
6372
+ type: "input",
6373
+ inputType: "search",
6374
+ getValue() {
6375
+ return "search test";
6376
+ },
6377
+ callback(event, value) {
6378
+ popsDOMUtils.preventEvent(event);
6379
+ console.log("输入框内容改变：", value);
6380
+ },
6381
+ placeholder: "请输入内容",
6382
+ },
6383
+ {
6384
+ className: "panel-input-color",
6385
+ text: "input-color",
6386
+ type: "input",
6387
+ inputType: "color",
6388
+ getValue() {
6389
+ return "#ff0000";
6390
+ },
6391
+ callback(event, value) {
6392
+ popsDOMUtils.preventEvent(event);
6393
+ console.log("输入框内容改变：", value);
6394
+ },
6395
+ placeholder: "请输入内容",
6396
+ },
6397
+ {
6398
+ className: "panel-input-email",
6399
+ text: "input-email",
6400
+ type: "input",
6401
+ inputType: "email",
6402
+ getValue() {
6403
+ return "test@gmail.com";
6404
+ },
6405
+ callback(event, value) {
6406
+ popsDOMUtils.preventEvent(event);
6407
+ const $input = event.target;
6408
+ console.log("输入框内容改变：", value, $input.validity);
6409
+ },
6410
+ placeholder: "请输入内容",
6411
+ },
6412
+ {
6413
+ className: "panel-input-tel",
6414
+ text: "input-tel",
6415
+ type: "input",
6416
+ inputType: "tel",
6417
+ getValue() {
6418
+ return "11111111111";
6419
+ },
6420
+ callback(event, value) {
6421
+ popsDOMUtils.preventEvent(event);
6422
+ const $input = event.target;
6423
+ console.log("输入框内容改变：", value, $input.validity);
6424
+ },
6425
+ placeholder: "请输入内容",
6406
6426
  },
6407
6427
  {
6408
- className: "panel-select-multiple",
6409
- type: "select-multiple",
6410
- text: "select-multiple",
6411
- props: {},
6412
- attributes: {},
6413
- placeholder: "请至少选择一个选项",
6428
+ className: "panel-input-url",
6429
+ text: "input-url",
6430
+ type: "input",
6431
+ inputType: "url",
6414
6432
  getValue() {
6415
- return ["select-1", "select-2"];
6433
+ return "https://github.com/";
6416
6434
  },
6417
- callback(selectInfo) {
6418
- console.log(`select值改变，多选信息`, selectInfo);
6435
+ callback(event, value) {
6436
+ popsDOMUtils.preventEvent(event);
6437
+ const $input = event.target;
6438
+ console.log("输入框内容改变：", value, $input.validity);
6419
6439
  },
6420
- clickCallBack(event, isSelectedInfo) {
6421
- console.log("点击", event, isSelectedInfo);
6440
+ placeholder: "请输入内容",
6441
+ },
6442
+ {
6443
+ className: "panel-textarea",
6444
+ text: "textarea",
6445
+ type: "textarea",
6446
+ getValue() {
6447
+ return "50";
6422
6448
  },
6423
- closeIconClickCallBack(event, data) {
6424
- console.log("点击关闭图标的事件", data);
6449
+ callback(event, value) {
6450
+ popsDOMUtils.preventEvent(event);
6451
+ console.log("textarea输入框内容改变：", value);
6425
6452
  },
6426
- data: [
6453
+ placeholder: "请输入内容",
6454
+ },
6455
+ {
6456
+ type: "container",
6457
+ text: "",
6458
+ views: [
6459
+ {
6460
+ className: "panel-select-disabled",
6461
+ text: "select-disabled",
6462
+ type: "select",
6463
+ disabled: true,
6464
+ getValue() {
6465
+ return "text";
6466
+ },
6467
+ callback(isSelectedInfo) {
6468
+ if (isSelectedInfo == null)
6469
+ return;
6470
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6471
+ },
6472
+ data: [
6473
+ {
6474
+ value: "all",
6475
+ text: "所有",
6476
+ disable() {
6477
+ return false;
6478
+ },
6479
+ },
6480
+ {
6481
+ value: "text",
6482
+ text: "文本",
6483
+ disable() {
6484
+ return false;
6485
+ },
6486
+ },
6487
+ {
6488
+ value: "html",
6489
+ text: "超文本",
6490
+ disable() {
6491
+ return false;
6492
+ },
6493
+ },
6494
+ ],
6495
+ },
6427
6496
  {
6428
- value: "select-1",
6429
- text: "单选1",
6430
- isHTML: false,
6431
- disable(value, allSelectedInfo) {
6432
- return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6497
+ className: "panel-select-multiple-disabled",
6498
+ type: "select-multiple",
6499
+ text: "select-multiple-disabled",
6500
+ disabled: true,
6501
+ placeholder: "请至少选择一个选项",
6502
+ getValue() {
6503
+ return ["select-1", "select-2"];
6504
+ },
6505
+ callback(selectInfo) {
6506
+ console.log(`select值改变，多选信息`, selectInfo);
6507
+ },
6508
+ clickCallBack(event, isSelectedInfo) {
6509
+ console.log("点击", event, isSelectedInfo);
6510
+ },
6511
+ closeIconClickCallBack(event, data) {
6512
+ console.log("点击关闭图标的事件", data);
6433
6513
  },
6514
+ data: [
6515
+ {
6516
+ value: "select-1",
6517
+ text: "单选1",
6518
+ isHTML: false,
6519
+ },
6520
+ {
6521
+ value: "select-2",
6522
+ text: "单选2",
6523
+ isHTML: false,
6524
+ },
6525
+ {
6526
+ value: "select-3",
6527
+ text: "单选3",
6528
+ isHTML: false,
6529
+ },
6530
+ {
6531
+ value: "select-4",
6532
+ text: "单选4",
6533
+ isHTML: false,
6534
+ },
6535
+ ],
6434
6536
  },
6435
6537
  {
6436
- value: "select-2",
6437
- text: "单选2",
6438
- isHTML: false,
6439
- disable(value, allSelectedInfo) {
6440
- return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6538
+ className: "panel-select-native",
6539
+ text: "select-native",
6540
+ type: "select",
6541
+ mode: "native",
6542
+ getValue() {
6543
+ return "all";
6441
6544
  },
6545
+ callback(isSelectedInfo) {
6546
+ if (isSelectedInfo == null)
6547
+ return;
6548
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6549
+ },
6550
+ data: [
6551
+ {
6552
+ value: "all",
6553
+ text: "所有",
6554
+ disable() {
6555
+ return false;
6556
+ },
6557
+ },
6558
+ {
6559
+ value: "text",
6560
+ text: "文本",
6561
+ disable() {
6562
+ return false;
6563
+ },
6564
+ },
6565
+ {
6566
+ value: "html",
6567
+ text: "超文本",
6568
+ disable() {
6569
+ return false;
6570
+ },
6571
+ },
6572
+ ],
6442
6573
  },
6443
6574
  {
6444
- value: "select-3",
6445
- text: "单选3",
6446
- isHTML: false,
6447
- disable(value, allSelectedInfo) {
6448
- return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
6575
+ className: "panel-select-dialog",
6576
+ text: "select-dialog",
6577
+ type: "select",
6578
+ mode: "dialog",
6579
+ getValue() {
6580
+ return window.localStorage.getItem("select-dialog-customInput") || "";
6581
+ },
6582
+ callback(isSelectedInfo) {
6583
+ if (isSelectedInfo == null) {
6584
+ console.warn(`select当前选项为空`);
6585
+ return;
6586
+ }
6587
+ if (isSelectedInfo.addCustomInput) {
6588
+ if (isSelectedInfo.value === "") {
6589
+ // 空值，不存储
6590
+ if (isSelectedInfo.customInputStoreKey) {
6591
+ console.log(`select删除自定义输入的值`);
6592
+ window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
6593
+ }
6594
+ }
6595
+ else {
6596
+ console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6597
+ if (isSelectedInfo.customInputStoreKey) {
6598
+ window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
6599
+ }
6600
+ }
6601
+ }
6602
+ else {
6603
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6604
+ }
6449
6605
  },
6606
+ data: [
6607
+ {
6608
+ value: "all",
6609
+ text: "所有",
6610
+ disable() {
6611
+ return false;
6612
+ },
6613
+ },
6614
+ {
6615
+ value: "text",
6616
+ text: "文本",
6617
+ disable(value, selectInfo) {
6618
+ if (selectInfo?.value === "all")
6619
+ return true;
6620
+ return false;
6621
+ },
6622
+ },
6623
+ {
6624
+ value: "html",
6625
+ text: "超文本",
6626
+ disable(value, selectInfo) {
6627
+ if (selectInfo?.value === "all")
6628
+ return true;
6629
+ return false;
6630
+ },
6631
+ },
6632
+ {
6633
+ value: "own",
6634
+ text: "自定义",
6635
+ disable(value, selectInfo) {
6636
+ if (selectInfo?.value === "all")
6637
+ return true;
6638
+ return false;
6639
+ },
6640
+ },
6641
+ {
6642
+ value: window.localStorage.getItem("select-dialog-customInput") || "",
6643
+ text: window.localStorage.getItem("select-dialog-customInput") || "",
6644
+ addCustomInput: true,
6645
+ customInputStoreKey: "select-dialog-customInput",
6646
+ onValid(dataOption) {
6647
+ if (dataOption.value === "123") {
6648
+ console.error("非规范值");
6649
+ return {
6650
+ valid: false,
6651
+ message: "非规范值",
6652
+ };
6653
+ }
6654
+ return {
6655
+ valid: true,
6656
+ };
6657
+ },
6658
+ },
6659
+ ],
6450
6660
  },
6451
6661
  {
6452
- value: "select-4",
6453
- text: "单选4",
6454
- isHTML: false,
6455
- disable(value, allSelectedInfo) {
6456
- return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
6662
+ className: "panel-select-horizontal",
6663
+ text: "select-horizontal",
6664
+ type: "select",
6665
+ mode: "horizontal",
6666
+ getValue() {
6667
+ return "text";
6457
6668
  },
6669
+ callback(isSelectedInfo) {
6670
+ if (isSelectedInfo == null)
6671
+ return;
6672
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6673
+ },
6674
+ data: [
6675
+ {
6676
+ value: "all",
6677
+ text: "所有",
6678
+ disable() {
6679
+ return false;
6680
+ },
6681
+ },
6682
+ {
6683
+ value: "text",
6684
+ text: "文本",
6685
+ disable() {
6686
+ return false;
6687
+ },
6688
+ },
6689
+ {
6690
+ value: "html",
6691
+ text: "超文本",
6692
+ disable() {
6693
+ return false;
6694
+ },
6695
+ },
6696
+ {
6697
+ value: "own",
6698
+ text: "自定义",
6699
+ disable() {
6700
+ return true;
6701
+ },
6702
+ },
6703
+ ],
6458
6704
  },
6459
6705
  {
6460
- value: "select-5",
6461
- text(value, allSelectedInfo) {
6462
- return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
6463
- ? "单选5-禁用"
6464
- : "单选5";
6706
+ className: "panel-select-multiple",
6707
+ type: "select-multiple",
6708
+ text: "select-multiple",
6709
+ placeholder: "请至少选择一个选项",
6710
+ getValue() {
6711
+ return ["select-1", "select-2"];
6712
+ },
6713
+ callback(selectInfo) {
6714
+ console.log(`select值改变，多选信息`, selectInfo);
6465
6715
  },
6466
- isHTML: false,
6467
- disable(value, allSelectedInfo) {
6468
- return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
6716
+ clickCallBack(event, isSelectedInfo) {
6717
+ console.log("点击", event, isSelectedInfo);
6469
6718
  },
6719
+ closeIconClickCallBack(event, data) {
6720
+ console.log("点击关闭图标的事件", data);
6721
+ },
6722
+ data: [
6723
+ {
6724
+ value: "select-1",
6725
+ text: "单选1",
6726
+ isHTML: false,
6727
+ disable(value, allSelectedInfo) {
6728
+ return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6729
+ },
6730
+ },
6731
+ {
6732
+ value: "select-2",
6733
+ text: "单选2",
6734
+ isHTML: false,
6735
+ disable(value, allSelectedInfo) {
6736
+ return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
6737
+ },
6738
+ },
6739
+ {
6740
+ value: "select-3",
6741
+ text: "单选3",
6742
+ isHTML: false,
6743
+ disable(value, allSelectedInfo) {
6744
+ return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
6745
+ },
6746
+ },
6747
+ {
6748
+ value: "select-4",
6749
+ text: "单选4",
6750
+ isHTML: false,
6751
+ disable(value, allSelectedInfo) {
6752
+ return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
6753
+ },
6754
+ },
6755
+ {
6756
+ value: "select-5",
6757
+ text(value, allSelectedInfo) {
6758
+ return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
6759
+ ? "单选5-禁用"
6760
+ : "单选5";
6761
+ },
6762
+ isHTML: false,
6763
+ disable(value, allSelectedInfo) {
6764
+ return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
6765
+ },
6766
+ },
6767
+ ],
6470
6768
  },
6471
6769
  ],
6472
6770
  },
@@ -6492,16 +6790,11 @@ System.register('pops', [], (function (exports) {
6492
6790
  className: "forms-1",
6493
6791
  text: "区域设置",
6494
6792
  type: "container",
6495
- attributes: {},
6496
- props: {},
6497
6793
  views: [
6498
6794
  {
6499
6795
  className: "panel-switch",
6500
6796
  text: "switch",
6501
6797
  type: "switch",
6502
- // @ts-ignore
6503
- props: {},
6504
- attributes: {},
6505
6798
  getValue() {
6506
6799
  return true;
6507
6800
  },
@@ -6512,10 +6805,7 @@ System.register('pops', [], (function (exports) {
6512
6805
  {
6513
6806
  className: "panel-slider",
6514
6807
  text: "slider",
6515
- // @ts-ignore
6516
- props: {},
6517
6808
  type: "slider",
6518
- attributes: {},
6519
6809
  getValue() {
6520
6810
  return 50;
6521
6811
  },
@@ -6528,10 +6818,7 @@ System.register('pops', [], (function (exports) {
6528
6818
  {
6529
6819
  className: "panel-button",
6530
6820
  text: "button",
6531
- // @ts-ignore
6532
- props: {},
6533
6821
  type: "button",
6534
- attributes: {},
6535
6822
  buttonIcon: "eleme",
6536
6823
  buttonIconIsLoading: true,
6537
6824
  buttonType: "warning",
@@ -6544,9 +6831,6 @@ System.register('pops', [], (function (exports) {
6544
6831
  className: "panel-button",
6545
6832
  text: "button",
6546
6833
  type: "button",
6547
- // @ts-ignore
6548
- props: {},
6549
- attributes: {},
6550
6834
  buttonIcon: "chromeFilled",
6551
6835
  buttonIconIsLoading: true,
6552
6836
  buttonType: "danger",
@@ -6558,10 +6842,7 @@ System.register('pops', [], (function (exports) {
6558
6842
  {
6559
6843
  className: "panel-button",
6560
6844
  text: "button",
6561
- // @ts-ignore
6562
- props: {},
6563
6845
  type: "button",
6564
- attributes: {},
6565
6846
  buttonIcon: "upload",
6566
6847
  buttonIconIsLoading: false,
6567
6848
  buttonType: "info",
@@ -6577,9 +6858,7 @@ System.register('pops', [], (function (exports) {
6577
6858
  {
6578
6859
  type: "deepMenu",
6579
6860
  className: "panel-deepMenu2",
6580
- attributes: {},
6581
6861
  //@ts-ignore
6582
- props: {},
6583
6862
  text: "deepMenu2",
6584
6863
  description: "二级菜单",
6585
6864
  rightText: "自定义配置",
@@ -6605,10 +6884,7 @@ System.register('pops', [], (function (exports) {
6605
6884
  {
6606
6885
  className: "panel-switch",
6607
6886
  text: "switch",
6608
- // @ts-ignore
6609
- props: {},
6610
6887
  type: "switch",
6611
- attributes: {},
6612
6888
  getValue() {
6613
6889
  return true;
6614
6890
  },
@@ -6631,8 +6907,6 @@ System.register('pops', [], (function (exports) {
6631
6907
  "data-value": "value",
6632
6908
  "data-value-2": "value2",
6633
6909
  },
6634
- // @ts-ignore
6635
- props: {},
6636
6910
  views: [],
6637
6911
  clickFirstCallback: function () {
6638
6912
  return false;
@@ -6646,8 +6920,6 @@ System.register('pops', [], (function (exports) {
6646
6920
  "data-value": "value",
6647
6921
  "data-value-2": "value2",
6648
6922
  },
6649
- // @ts-ignore
6650
- props: {},
6651
6923
  views: [],
6652
6924
  clickFirstCallback: function () {
6653
6925
  return false;
@@ -7385,7 +7657,7 @@ System.register('pops', [], (function (exports) {
7385
7657
  // 初始化内容配置
7386
7658
  data.config.content.forEach((asideItemConfig) => {
7387
7659
  const $asideLiElement = this.createAsideItem(asideItemConfig);
7388
- this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
7660
+ this.onAsideItemClick($asideLiElement, asideItemConfig);
7389
7661
  // 是否处于底部
7390
7662
  const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
7391
7663
  if (isBottom) {
@@ -7418,7 +7690,7 @@ System.register('pops', [], (function (exports) {
7418
7690
  // 初始化底部内容配置
7419
7691
  (data.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
7420
7692
  const $bottomLiElement = this.createBottomItem(bottomItemConfig);
7421
- this.setBottomItemClickEvent($bottomLiElement, bottomItemConfig);
7693
+ this.onBottomItemClick($bottomLiElement, bottomItemConfig);
7422
7694
  if (bottomItemConfig.position === "left" || bottomItemConfig.position == null) {
7423
7695
  this.$el.$panelBottomLeftContainer.appendChild($bottomLiElement);
7424
7696
  }
@@ -7571,7 +7843,7 @@ System.register('pops', [], (function (exports) {
7571
7843
  * @param $bottomItem 底部<li>元素
7572
7844
  * @param bottomItemConfig 配置
7573
7845
  */
7574
- setBottomItemClickEvent($bottomItem, bottomItemConfig) {
7846
+ onBottomItemClick($bottomItem, bottomItemConfig) {
7575
7847
  popsDOMUtils.on($bottomItem, "click", async (event) => {
7576
7848
  if (typeof bottomItemConfig.clickCallback === "function") {
7577
7849
  // 执行回调
@@ -7659,12 +7931,12 @@ System.register('pops', [], (function (exports) {
7659
7931
  if (disabled) {
7660
7932
  this.disable();
7661
7933
  }
7662
- this.setClickEvent();
7934
+ this.onClick();
7663
7935
  },
7664
7936
  /**
7665
7937
  * 设置点击事件
7666
7938
  */
7667
- setClickEvent() {
7939
+ onClick() {
7668
7940
  const that = this;
7669
7941
  popsDOMUtils.on(this.$ele.core, "click", function (event) {
7670
7942
  if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
@@ -7719,7 +7991,10 @@ System.register('pops', [], (function (exports) {
7719
7991
  };
7720
7992
  PopsPanelSwitch.init();
7721
7993
  Reflect.set($li, "data-switch", PopsPanelSwitch);
7722
- return $li;
7994
+ return {
7995
+ $el: $li,
7996
+ handler: PopsPanelSwitch,
7997
+ };
7723
7998
  },
7724
7999
  /**
7725
8000
  * type ==> slider
@@ -7735,74 +8010,11 @@ System.register('pops', [], (function (exports) {
7735
8010
  // 左边底部的描述的文字
7736
8011
  let leftDescriptionText = "";
7737
8012
  if (viewConfig.description) {
7738
- leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
8013
+ leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7739
8014
  }
7740
8015
  PopsSafeUtils.setSafeHTML($li,
7741
8016
  /*html*/ `
7742
- <div class="pops-panel-item-left-text">
7743
- <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7744
- <div class="pops-panel-slider">
7745
- <input type="range" min="${viewConfig.min}" max="${viewConfig.max}">
7746
- </div>
7747
- `);
7748
- const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7749
- if (viewConfig.step) {
7750
- $rangeInput.setAttribute("step", viewConfig.step.toString());
7751
- }
7752
- $rangeInput.value = viewConfig.getValue().toString();
7753
- /**
7754
- * 获取提示的内容
7755
- * @param value
7756
- */
7757
- const getToolTipContent = function (value) {
7758
- if (typeof viewConfig.getToolTipContent === "function") {
7759
- return viewConfig.getToolTipContent(value);
7760
- }
7761
- else {
7762
- return value;
7763
- }
7764
- };
7765
- const tooltip = PopsTooltip.init({
7766
- $target: $rangeInput.parentElement,
7767
- content: () => {
7768
- return getToolTipContent($rangeInput.value);
7769
- },
7770
- zIndex: () => {
7771
- return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
7772
- },
7773
- className: "github-tooltip",
7774
- alwaysShow: false,
7775
- only: false,
7776
- position: "top",
7777
- arrowDistance: 10,
7778
- });
7779
- popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7780
- tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7781
- if (typeof viewConfig.callback === "function") {
7782
- viewConfig.callback(event, $rangeInput.valueAsNumber);
7783
- }
7784
- });
7785
- return $li;
7786
- },
7787
- /**
7788
- * type ==> slider
7789
- * 获取中间容器的元素<li>
7790
- * @param viewConfig
7791
- */
7792
- createSectionContainerItem_slider_new(viewConfig) {
7793
- const $li = popsDOMUtils.createElement("li");
7794
- Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
7795
- this.setElementClassName($li, viewConfig.className);
7796
- this.setElementAttributes($li, viewConfig.attributes);
7797
- this.setElementProps($li, viewConfig.props);
7798
- // 左边底部的描述的文字
7799
- let leftDescriptionText = "";
7800
- if (viewConfig.description) {
7801
- leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7802
- }
7803
- PopsSafeUtils.setSafeHTML($li,
7804
- /*html*/ `
7805
- <div class="pops-panel-item-left-text" style="flex: 1;">
8017
+ <div class="pops-panel-item-left-text" style="flex: 1;">
7806
8018
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7807
8019
  <div class="pops-slider pops-slider-width">
7808
8020
  <div class="pops-slider__runway">
@@ -7890,7 +8102,7 @@ System.register('pops', [], (function (exports) {
7890
8102
  this.initEleData();
7891
8103
  this.setToolTipEvent();
7892
8104
  this.setPanEvent();
7893
- this.setRunAwayClickEvent();
8105
+ this.onRunAwayClick();
7894
8106
  this.intervalInit();
7895
8107
  if (this.isDisabledDragWithConfig()) {
7896
8108
  this.disableDrag();
@@ -8162,7 +8374,7 @@ System.register('pops', [], (function (exports) {
8162
8374
  /**
8163
8375
  * 设置进度条点击定位的事件
8164
8376
  */
8165
- setRunAwayClickEvent() {
8377
+ onRunAwayClick() {
8166
8378
  popsDOMUtils.on(this.$ele.runAway, "click", (event) => {
8167
8379
  if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
8168
8380
  return;
@@ -8367,7 +8579,10 @@ System.register('pops', [], (function (exports) {
8367
8579
  };
8368
8580
  PopsPanelSlider.init();
8369
8581
  Reflect.set($li, "data-slider", PopsPanelSlider);
8370
- return $li;
8582
+ return {
8583
+ $el: $li,
8584
+ handler: PopsPanelSlider,
8585
+ };
8371
8586
  },
8372
8587
  /**
8373
8588
  * type ==> input
@@ -8380,13 +8595,8 @@ System.register('pops', [], (function (exports) {
8380
8595
  this.setElementClassName($li, viewConfig.className);
8381
8596
  this.setElementAttributes($li, viewConfig.attributes);
8382
8597
  this.setElementProps($li, viewConfig.props);
8383
- let inputType = "text";
8384
- if (viewConfig.isPassword) {
8385
- inputType = "password";
8386
- }
8387
- else if (viewConfig.isNumber) {
8388
- inputType = "number";
8389
- }
8598
+ const defaultInputType = "text";
8599
+ const inputType = viewConfig.inputType || defaultInputType;
8390
8600
  // 左边底部的描述的文字
8391
8601
  let leftDescriptionText = "";
8392
8602
  if (viewConfig.description) {
@@ -8397,135 +8607,195 @@ System.register('pops', [], (function (exports) {
8397
8607
  <div class="pops-panel-item-left-text">
8398
8608
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
8399
8609
  <div class="pops-panel-input">
8400
- <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8610
+ <div class="pops-panel-input_inner">
8611
+ <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8612
+ </div>
8401
8613
  </div>
8402
8614
  `);
8403
8615
  const PopsPanelInput = {
8404
8616
  [Symbol.toStringTag]: "PopsPanelInput",
8405
- $ele: {
8617
+ $el: {
8406
8618
  itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8407
8619
  panelInput: $li.querySelector(".pops-panel-input"),
8620
+ panelInputInner: $li.querySelector(".pops-panel-input_inner"),
8408
8621
  input: $li.querySelector("input"),
8409
- inputSpanIcon: popsDOMUtils.createElement("span"),
8410
- inputSpanIconInner: null,
8622
+ /** span.pops-panel-input__suffix */
8623
+ suffix: popsDOMUtils.createElement("span"),
8624
+ /** span.pops-panel-input__suffix-inner */
8625
+ suffixInner: null,
8626
+ /** i.pops-panel-icon */
8411
8627
  icon: null,
8412
8628
  },
8413
8629
  $data: {
8414
8630
  value: viewConfig.getValue(),
8415
- isView: false,
8631
+ /**
8632
+ * inputType 为 password时使用该值
8633
+ *
8634
+ * 当前内容的可见性
8635
+ */
8636
+ isVisible: false,
8416
8637
  },
8417
8638
  init() {
8418
8639
  this.initEle();
8419
8640
  this.setInputValue(this.$data.value);
8420
8641
  // 如果是密码框，放进图标
8421
- if (viewConfig.isPassword) {
8642
+ if (viewConfig.inputType === "password") {
8643
+ // 显示密码
8422
8644
  this.setCircleIcon(PopsIcon.getIcon("view"));
8423
- this.setCircleIconClickEvent();
8645
+ this.onIconClick();
8424
8646
  }
8425
8647
  else {
8426
8648
  // 先判断预设值是否为空，不为空添加清空图标按钮
8427
- if (this.$ele.input.value != "") {
8649
+ // 且为普通的输入框
8650
+ if (this.$el.input.value != "" && this.isTextInputType()) {
8651
+ // 清除内容的图标
8428
8652
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8429
- this.setCircleIconClickEvent();
8653
+ this.onIconClick();
8654
+ }
8655
+ else {
8656
+ // 隐藏图标
8657
+ this.hideCircleIconWrapper();
8430
8658
  }
8431
8659
  }
8432
- this.setInputChangeEvent();
8660
+ this.onValueChange();
8433
8661
  // 是否禁用复选框
8434
8662
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8435
8663
  if (disabled) {
8436
8664
  this.disable();
8437
8665
  }
8438
8666
  if (typeof viewConfig.handlerCallBack === "function") {
8439
- viewConfig.handlerCallBack($li, this.$ele.input);
8667
+ viewConfig.handlerCallBack($li, this.$el.input);
8440
8668
  }
8441
8669
  },
8442
8670
  /**
8443
8671
  * 初始化$ele的配置
8444
8672
  */
8445
8673
  initEle() {
8446
- this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8447
- popsDOMUtils.addClassName(this.$ele.inputSpanIcon, "pops-panel-input__suffix");
8448
- PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8674
+ this.$el.input.parentElement.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
8675
+ popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
8676
+ PopsSafeUtils.setSafeHTML(this.$el.suffix,
8449
8677
  /*html*/ `
8450
8678
  <span class="pops-panel-input__suffix-inner">
8451
8679
  <i class="pops-panel-icon"></i>
8452
8680
  </span>
8453
8681
  `);
8454
- this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8455
- this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
8456
- popsDOMUtils.addClassName(this.$ele.panelInput, PopsCommonCSSClassName.userSelectNone);
8682
+ this.$el.suffixInner = this.$el.suffix.querySelector(".pops-panel-input__suffix-inner");
8683
+ this.$el.icon = this.$el.suffix.querySelector(".pops-panel-icon");
8684
+ popsDOMUtils.addClassName(this.$el.panelInput, PopsCommonCSSClassName.userSelectNone);
8685
+ },
8686
+ /**
8687
+ * 校验输入框类型是否是字符串输入框类型
8688
+ */
8689
+ isTextInputType() {
8690
+ const typeList = ["text", "search", "email", "tel", "url"];
8691
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8692
+ },
8693
+ /**
8694
+ * 是否是时间输入框类型
8695
+ */
8696
+ isDateInputType() {
8697
+ const typeList = ["date", "datetime-local", "month", "time", "week"];
8698
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8699
+ },
8700
+ /**
8701
+ * 是否是数字输入框类型
8702
+ */
8703
+ isNumberInputType() {
8704
+ const typeList = ["number"];
8705
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8457
8706
  },
8458
8707
  /**
8459
8708
  * 禁用
8460
8709
  */
8461
8710
  disable() {
8462
- this.$ele.input.disabled = true;
8463
- popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
8464
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8711
+ this.$el.input.disabled = true;
8712
+ popsDOMUtils.addClassName(this.$el.panelInput, "pops-input-disabled");
8713
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8465
8714
  },
8466
8715
  /**
8467
8716
  * 取消禁用
8468
8717
  */
8469
8718
  notDisable() {
8470
- this.$ele.input.disabled = false;
8471
- popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
8472
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8719
+ this.$el.input.disabled = false;
8720
+ popsDOMUtils.removeClassName(this.$el.panelInput, "pops-input-disabled");
8721
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8473
8722
  },
8474
8723
  /**
8475
8724
  * 判断是否已被禁用
8476
8725
  */
8477
8726
  isDisabled() {
8478
- return this.$ele.input.disabled;
8727
+ return this.$el.input.disabled;
8479
8728
  },
8480
8729
  /**
8481
8730
  * 设置输入框内容
8482
- * @param {string} [value=""] 值
8731
+ * @param value 值
8483
8732
  */
8484
8733
  setInputValue(value = "") {
8485
- this.$ele.input.value = value;
8734
+ if (typeof value === "number" && this.isNumberInputType()) {
8735
+ this.$el.input.valueAsNumber = value;
8736
+ }
8737
+ else if (typeof value === "object" && value instanceof Date && this.isDateInputType()) {
8738
+ this.$el.input.valueAsDate = value;
8739
+ }
8740
+ else {
8741
+ this.$el.input.value = value.toString();
8742
+ }
8486
8743
  },
8487
8744
  /**
8488
8745
  * 设置input元素的type
8489
- * @param [typeValue="text"] type值
8746
+ * @param typeValue type值
8490
8747
  */
8491
8748
  setInputType(typeValue = "text") {
8492
- this.$ele.input.setAttribute("type", typeValue);
8749
+ this.$el.input.setAttribute("type", typeValue);
8493
8750
  },
8494
8751
  /**
8495
8752
  * 删除图标按钮
8496
8753
  */
8497
8754
  removeCircleIcon() {
8498
- PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
8755
+ PopsSafeUtils.setSafeHTML(this.$el.icon, "");
8499
8756
  },
8500
8757
  /**
8501
8758
  * 添加清空图标按钮
8502
- * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
8759
+ * @param svgHTML svg图标，默认为清空的图标
8503
8760
  */
8504
8761
  setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")) {
8505
- PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
8762
+ PopsSafeUtils.setSafeHTML(this.$el.icon, svgHTML);
8763
+ },
8764
+ /**
8765
+ * 隐藏图标容器
8766
+ */
8767
+ hideCircleIconWrapper() {
8768
+ popsDOMUtils.cssHide(this.$el.suffix, true);
8769
+ },
8770
+ /**
8771
+ * 显示图标容器
8772
+ */
8773
+ showCircleIconWrapper() {
8774
+ popsDOMUtils.cssShow(this.$el.suffix);
8506
8775
  },
8507
8776
  /**
8508
8777
  * 添加图标按钮的点击事件
8509
8778
  */
8510
- setCircleIconClickEvent() {
8511
- popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
8779
+ onIconClick() {
8780
+ popsDOMUtils.on(this.$el.icon, "click", (evt) => {
8781
+ popsDOMUtils.preventEvent(evt);
8512
8782
  if (this.isDisabled()) {
8513
8783
  return;
8514
8784
  }
8515
8785
  // 删除图标
8516
8786
  this.removeCircleIcon();
8517
- if (viewConfig.isPassword) {
8518
- // 密码输入框
8519
- if (this.$data.isView) {
8787
+ if (inputType === "password") {
8788
+ // 配置类型为密码输入框
8789
+ if (this.$data.isVisible) {
8520
8790
  // 当前可见 => 点击改变为隐藏
8521
- this.$data.isView = false;
8791
+ this.$data.isVisible = false;
8522
8792
  // 显示输入框内容，且更换图标为隐藏图标
8523
8793
  this.setInputType("text");
8524
8794
  this.setCircleIcon(PopsIcon.getIcon("hide"));
8525
8795
  }
8526
8796
  else {
8527
8797
  // 当前不可见 => 点击改变为显示
8528
- this.$data.isView = true;
8798
+ this.$data.isVisible = true;
8529
8799
  // 隐藏输入框内容，且更换图标为显示图标
8530
8800
  this.setInputType("password");
8531
8801
  this.setCircleIcon(PopsIcon.getIcon("view"));
@@ -8536,43 +8806,98 @@ System.register('pops', [], (function (exports) {
8536
8806
  // 清空内容
8537
8807
  this.setInputValue("");
8538
8808
  // 获取焦点
8539
- this.$ele.input.focus();
8809
+ this.$el.input.focus();
8540
8810
  // 触发内容改变事件
8541
- this.$ele.input.dispatchEvent(new Event("input"));
8811
+ this.$el.input.dispatchEvent(new Event("input"));
8542
8812
  }
8543
8813
  });
8544
8814
  },
8545
8815
  /**
8546
8816
  * 监听输入框内容改变
8547
8817
  */
8548
- setInputChangeEvent() {
8549
- popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
8550
- this.$data.value = this.$ele.input.value;
8551
- if (!viewConfig.isPassword) {
8818
+ onValueChange() {
8819
+ popsDOMUtils.on(this.$el.input, ["input", "propertychange"], void 0, (event) => {
8820
+ this.$data.value = this.$el.input.value;
8821
+ if (inputType !== "password") {
8552
8822
  // 不是密码框
8553
- if (this.$ele.input.value !== "" && this.$ele.icon.innerHTML === "") {
8823
+ if (this.$el.input.value !== "" && this.$el.icon.innerHTML === "" && this.isTextInputType()) {
8554
8824
  // 不为空，显示清空图标
8555
8825
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8556
- this.setCircleIconClickEvent();
8826
+ this.onIconClick();
8827
+ this.showCircleIconWrapper();
8557
8828
  }
8558
- else if (this.$ele.input.value === "") {
8829
+ else if (this.$el.input.value === "") {
8559
8830
  this.removeCircleIcon();
8560
8831
  }
8561
8832
  }
8562
8833
  if (typeof viewConfig.callback === "function") {
8563
- if (viewConfig.isNumber) {
8564
- viewConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
8834
+ let ret;
8835
+ if (viewConfig.inputType === "number") {
8836
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber);
8837
+ }
8838
+ else if (this.isDateInputType()) {
8839
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber, this.$el.input.valueAsDate);
8565
8840
  }
8566
8841
  else {
8567
- viewConfig.callback(event, this.$ele.input.value);
8842
+ ret = viewConfig.callback(event, this.$el.input.value);
8843
+ }
8844
+ if (ret) {
8845
+ if (ret.valid) {
8846
+ // 校验通过
8847
+ this.removeValidErrorMsg();
8848
+ }
8849
+ else {
8850
+ // 校验失败
8851
+ // 显示失败提示
8852
+ this.addValidErrorMsg(ret.message);
8853
+ }
8854
+ }
8855
+ else {
8856
+ this.removeValidErrorMsg();
8568
8857
  }
8569
8858
  }
8570
8859
  });
8571
8860
  },
8861
+ /**
8862
+ * 主动触发输入框改变事件
8863
+ */
8864
+ triggerValueChange() {
8865
+ this.$el.input.dispatchEvent(new Event("input"));
8866
+ },
8867
+ /**
8868
+ * 添加校验失败的提示信息
8869
+ * @param msg 提示信息
8870
+ */
8871
+ addValidErrorMsg(msg) {
8872
+ if (msg == null)
8873
+ return;
8874
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error") ||
8875
+ popsDOMUtils.createElement("div", {
8876
+ className: "pops-panel-input-valid-error",
8877
+ innerHTML: /*html*/ `<span></span>`,
8878
+ });
8879
+ const $validErrorMsgSpan = $validErrorMsg.querySelector("span");
8880
+ if ($validErrorMsgSpan.innerHTML !== msg) {
8881
+ PopsSafeUtils.setSafeHTML($validErrorMsgSpan, msg);
8882
+ }
8883
+ if (!$validErrorMsg.parentElement) {
8884
+ popsDOMUtils.after(this.$el.panelInputInner, $validErrorMsg);
8885
+ }
8886
+ },
8887
+ /**
8888
+ * 移除校验失败的提示信息
8889
+ */
8890
+ removeValidErrorMsg() {
8891
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error");
8892
+ $validErrorMsg?.remove();
8893
+ },
8572
8894
  };
8573
8895
  PopsPanelInput.init();
8574
8896
  Reflect.set($li, "data-input", PopsPanelInput);
8575
- return $li;
8897
+ return {
8898
+ $el: $li,
8899
+ handler: PopsPanelInput,
8900
+ };
8576
8901
  },
8577
8902
  /**
8578
8903
  * type ==> textarea
@@ -8610,7 +8935,7 @@ System.register('pops', [], (function (exports) {
8610
8935
  },
8611
8936
  init() {
8612
8937
  this.setValue(this.$data.value);
8613
- this.setChangeEvent();
8938
+ this.onValueChange();
8614
8939
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8615
8940
  if (disabled) {
8616
8941
  this.disable();
@@ -8636,7 +8961,7 @@ System.register('pops', [], (function (exports) {
8636
8961
  /**
8637
8962
  * 监听选择内容改变
8638
8963
  */
8639
- setChangeEvent() {
8964
+ onValueChange() {
8640
8965
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
8641
8966
  const value = this.$ele.textarea.value;
8642
8967
  this.$data.value = value;
@@ -8648,7 +8973,10 @@ System.register('pops', [], (function (exports) {
8648
8973
  };
8649
8974
  PopsPanelTextArea.init();
8650
8975
  Reflect.set($li, "data-textarea", PopsPanelTextArea);
8651
- return $li;
8976
+ return {
8977
+ $el: $li,
8978
+ handler: PopsPanelTextArea,
8979
+ };
8652
8980
  },
8653
8981
  /**
8654
8982
  * type ==> select
@@ -8675,178 +9003,1176 @@ System.register('pops', [], (function (exports) {
8675
9003
  <select></select>
8676
9004
  </div>
8677
9005
  `);
8678
- const PopsPanelSelect = {
8679
- [Symbol.toStringTag]: "PopsPanelSelect",
8680
- $ele: {
8681
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8682
- panelSelect: $li.querySelector(".pops-panel-select"),
8683
- select: $li.querySelector(".pops-panel-select select"),
8684
- },
8685
- $eleKey: {
8686
- disable: "__disable__",
8687
- value: "__value__",
8688
- viewConfig: "data-view-config",
8689
- },
8690
- $data: {
8691
- defaultValue: viewConfig.getValue(),
8692
- },
8693
- init() {
8694
- popsDOMUtils.addClassName(this.$ele.panelSelect, PopsCommonCSSClassName.userSelectNone);
8695
- this.initOption();
8696
- this.setChangeEvent();
8697
- this.setClickEvent();
8698
- const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8699
- if (disabled) {
8700
- this.disable();
8701
- }
8702
- },
8703
- /**
8704
- * 给option元素设置属性
8705
- * @param $ele
8706
- * @param key
8707
- * @param value
8708
- */
8709
- setNodeValue($ele, key, value) {
8710
- Reflect.set($ele, key, value);
8711
- },
8712
- /**
8713
- * 获取option元素上设置的属性
8714
- * @param $ele
8715
- * @param value
8716
- * @param key
8717
- */
8718
- getNodeValue($ele, key) {
8719
- return Reflect.get($ele, key);
8720
- },
8721
- /**
8722
- * 禁用选项
8723
- */
8724
- disable() {
8725
- this.$ele.select.setAttribute("disabled", "true");
8726
- popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8727
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8728
- },
8729
- /**
8730
- * 取消禁用
8731
- */
8732
- notDisable() {
8733
- this.$ele.select.removeAttribute("disabled");
8734
- popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8735
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8736
- },
8737
- /**
8738
- * 判断是否禁用
8739
- */
8740
- isDisabled() {
8741
- return (this.$ele.select.hasAttribute("disabled") ||
8742
- popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable"));
8743
- },
8744
- /**
8745
- * 初始化选项
8746
- */
8747
- initOption() {
8748
- viewConfig.data.forEach((dataItem) => {
8749
- // 初始化默认选中
8750
- const optionElement = popsDOMUtils.createElement("option");
8751
- this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
8752
- this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
8753
- this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
8754
- if (dataItem.value === this.$data.defaultValue) {
8755
- this.setOptionSelected(optionElement);
9006
+ const $itemLeftContainer = $li.querySelector(".pops-panel-item-left-text");
9007
+ const $container = $li.querySelector(".pops-panel-select");
9008
+ const $select = $li.querySelector(".pops-panel-select select");
9009
+ const width = (typeof viewConfig.width === "number" ? `${viewConfig.width}px` : viewConfig.width) ?? "200px";
9010
+ popsDOMUtils.css($container, "width", width);
9011
+ const mode = viewConfig.mode ?? "native";
9012
+ let handler;
9013
+ if (mode === "native") {
9014
+ const PopsPanelSelectNative = {
9015
+ [Symbol.toStringTag]: "PopsPanelSelectNative",
9016
+ $el: {
9017
+ itemLeftTextContainer: $itemLeftContainer,
9018
+ $container: $container,
9019
+ $select: $select,
9020
+ },
9021
+ $eleKey: {
9022
+ disable: "__disable__",
9023
+ value: "__value__",
9024
+ viewConfig: "data-view-config",
9025
+ },
9026
+ $data: {
9027
+ data: [],
9028
+ defaultValue: viewConfig.getValue(),
9029
+ },
9030
+ init() {
9031
+ this.$el.$container.setAttribute("data-mode", mode);
9032
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9033
+ popsDOMUtils.addClassName(this.$el.$container, PopsCommonCSSClassName.userSelectNone);
9034
+ this.initOption();
9035
+ this.onValueChange();
9036
+ this.onClick();
9037
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9038
+ if (disabled) {
9039
+ this.disable();
9040
+ }
9041
+ },
9042
+ /**
9043
+ * 给option元素设置属性
9044
+ * @param $ele
9045
+ * @param key
9046
+ * @param value
9047
+ */
9048
+ setNodeValue($ele, key, value) {
9049
+ Reflect.set($ele, key, value);
9050
+ },
9051
+ /**
9052
+ * 获取option元素上设置的属性
9053
+ * @param $ele
9054
+ * @param value
9055
+ * @param key
9056
+ */
9057
+ getNodeValue($ele, key) {
9058
+ return Reflect.get($ele, key);
9059
+ },
9060
+ /**
9061
+ * 禁用选项
9062
+ */
9063
+ disable() {
9064
+ this.$el.$select.setAttribute("disabled", "true");
9065
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9066
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9067
+ },
9068
+ /**
9069
+ * 取消禁用
9070
+ */
9071
+ notDisable() {
9072
+ this.$el.$select.removeAttribute("disabled");
9073
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9074
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9075
+ },
9076
+ /**
9077
+ * 判断是否禁用
9078
+ */
9079
+ isDisabled() {
9080
+ return (this.$el.$select.hasAttribute("disabled") ||
9081
+ popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable"));
9082
+ },
9083
+ /**
9084
+ * 初始化选项
9085
+ */
9086
+ initOption() {
9087
+ this.$data.data.forEach((dataItem) => {
9088
+ // 初始化默认选中
9089
+ const optionElement = popsDOMUtils.createElement("option");
9090
+ this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
9091
+ this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
9092
+ this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
9093
+ if (dataItem.value === this.$data.defaultValue) {
9094
+ this.setOptionSelected(optionElement);
9095
+ }
9096
+ if (typeof dataItem.text === "function") {
9097
+ optionElement.innerText = dataItem.text(dataItem.value, dataItem);
9098
+ }
9099
+ else {
9100
+ optionElement.innerText = dataItem.text;
9101
+ }
9102
+ this.$el.$select.appendChild(optionElement);
9103
+ });
9104
+ },
9105
+ /**
9106
+ * 设置选项选中
9107
+ * @param $option
9108
+ */
9109
+ setOptionSelected($option) {
9110
+ $option.setAttribute("selected", "true");
9111
+ },
9112
+ /**
9113
+ * 检测所有option并设置禁用状态
9114
+ */
9115
+ setSelectOptionsDisableStatus() {
9116
+ if (this.$el.$select.options && this.$el.$select.options.length) {
9117
+ Array.from(this.$el.$select.options).forEach((optionItem) => {
9118
+ this.setOptionDisableStatus(optionItem);
9119
+ });
9120
+ }
9121
+ },
9122
+ /**
9123
+ * 设置禁用状态
9124
+ * @param $option
9125
+ */
9126
+ setOptionDisableStatus($option) {
9127
+ let disable = false;
9128
+ const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
9129
+ if (optionDisableAttr === "function") {
9130
+ const value = this.getNodeValue($option, this.$eleKey.value);
9131
+ disable = Boolean(optionDisableAttr(value));
9132
+ }
9133
+ if (disable) {
9134
+ $option.setAttribute("disabled", "true");
9135
+ }
9136
+ else {
9137
+ $option.removeAttribute("disabled");
9138
+ }
9139
+ },
9140
+ /**
9141
+ * 获取option上的信息
9142
+ * @param $option
9143
+ */
9144
+ getSelectOptionInfo($option) {
9145
+ const optionValue = this.getNodeValue($option, this.$eleKey.value);
9146
+ const optionText = $option.innerText || $option.textContent;
9147
+ const views = this.getNodeValue($option, this.$eleKey.viewConfig);
9148
+ return {
9149
+ value: optionValue,
9150
+ text: optionText,
9151
+ views: views,
9152
+ $option: $option,
9153
+ };
9154
+ },
9155
+ /**
9156
+ * 监听选择内容改变
9157
+ */
9158
+ onValueChange() {
9159
+ popsDOMUtils.on(this.$el.$select, "change", () => {
9160
+ const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
9161
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9162
+ this.setSelectOptionsDisableStatus();
9163
+ if (typeof viewConfig.callback === "function") {
9164
+ viewConfig.callback(selectInfo);
9165
+ }
9166
+ const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
9167
+ if (Array.isArray(views)) {
9168
+ // 如果成功创建，加入到中间容器中
9169
+ const childUListClassName = "pops-panel-select-child-forms";
9170
+ // 移除旧的元素
9171
+ while ($li.nextElementSibling) {
9172
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
9173
+ $li.nextElementSibling.remove();
9174
+ }
9175
+ else {
9176
+ break;
9177
+ }
9178
+ }
9179
+ const $childUList = popsDOMUtils.createElement("ul");
9180
+ $childUList.className = childUListClassName;
9181
+ popsDOMUtils.after($li, $childUList);
9182
+ that.uListContainerAddItem(viewConfig, {
9183
+ ulElement: $childUList,
9184
+ });
9185
+ }
9186
+ });
9187
+ },
9188
+ /**
9189
+ * 监听点击事件
9190
+ */
9191
+ onClick() {
9192
+ popsDOMUtils.on(this.$el.$select, "click", void 0, (event) => {
9193
+ this.setSelectOptionsDisableStatus();
9194
+ if (typeof viewConfig.clickCallBack === "function") {
9195
+ const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
9196
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9197
+ viewConfig.clickCallBack(event, selectInfo);
9198
+ }
9199
+ });
9200
+ },
9201
+ };
9202
+ PopsPanelSelectNative.init();
9203
+ Reflect.set($li, "data-select", PopsPanelSelectNative);
9204
+ handler = PopsPanelSelectNative;
9205
+ }
9206
+ else if (mode === "dialog") {
9207
+ const PopsPanelSelect = {
9208
+ [Symbol.toStringTag]: "PopsPanelSelect",
9209
+ $el: {
9210
+ $itemLeftContainer: $itemLeftContainer,
9211
+ /** 选择框容器 */
9212
+ $container: void 0,
9213
+ /** 选择框包裹的容器 */
9214
+ $wrapper: void 0,
9215
+ /** 内容区域 */
9216
+ $section: void 0,
9217
+ /** 手动输入 */
9218
+ $selectedInputWrapper: void 0,
9219
+ /** 灰色提示语 */
9220
+ $selectedPlaceHolderWrapper: void 0,
9221
+ /** 下拉箭头区域 */
9222
+ $suffix: void 0,
9223
+ /** 下拉箭头图标 */
9224
+ $suffixIcon: void 0,
9225
+ /** 下拉列表弹窗的下拉列表容器 */
9226
+ $selectDialogContainer: void 0,
9227
+ },
9228
+ $data: {
9229
+ /**
9230
+ * 数据
9231
+ */
9232
+ data: [],
9233
+ /**
9234
+ * 默认值
9235
+ */
9236
+ defaultValue: viewConfig.getValue(),
9237
+ /**
9238
+ * 选择的信息
9239
+ */
9240
+ selectedData: void 0,
9241
+ /**
9242
+ * 是否验证通过
9243
+ */
9244
+ isValidSuccess: true,
9245
+ /**
9246
+ * 箭头旋转的属性
9247
+ */
9248
+ rotateKey: "data-show-option",
9249
+ },
9250
+ /** 初始化 */
9251
+ init() {
9252
+ this.initDefault();
9253
+ this.initEl();
9254
+ this.initPlaceHolder();
9255
+ this.renderSelectText();
9256
+ this.onShowSelectDialogClick();
9257
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9258
+ if (disabled) {
9259
+ this.disable();
9260
+ }
9261
+ },
9262
+ /** 初始化默认值 */
9263
+ initDefault() {
9264
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9265
+ this.$data.data.forEach((dataItem) => {
9266
+ const flag = this.$data.defaultValue.includes(dataItem.value);
9267
+ if (flag) {
9268
+ // 初始化选中的配置
9269
+ this.resetCurrentSelectedInfo();
9270
+ this.updateSelectedInfo(dataItem);
9271
+ }
9272
+ });
9273
+ },
9274
+ /** 初始化$ele变量 */
9275
+ initEl() {
9276
+ this.$el.$container = $container;
9277
+ this.$el.$container.setAttribute("data-mode", mode);
9278
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9279
+ /*html*/ `
9280
+ <div class="el-select__wrapper">
9281
+ <div class="el-select__selection">
9282
+ <!-- 这个是用于手动输入的，这里暂不适配 -->
9283
+ <div class="el-select__selected-item el-select__input-wrapper"></div>
9284
+ <!-- 这个是placeholder -->
9285
+ <div class="el-select__selected-item el-select__placeholder"></div>
9286
+ </div>
9287
+ <!-- 下拉箭头 -->
9288
+ <div class="el-select__suffix">
9289
+ <i class="el-icon el-select__caret el-select__icon">
9290
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9291
+ <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>
9292
+ </svg>
9293
+ </i>
9294
+ </div>
9295
+ </div>`);
9296
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9297
+ this.$el.$section = $li.querySelector(".el-select__selection");
9298
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
9299
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
9300
+ this.$el.$suffix = $li.querySelector(".el-select__suffix");
9301
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
9302
+ // 先把手动输入框隐藏
9303
+ this.hideInputWrapper();
9304
+ },
9305
+ /**
9306
+ * 初始化提示文字
9307
+ */
9308
+ initPlaceHolder() {
9309
+ let placeholder = "--请选择--";
9310
+ if (typeof viewConfig.placeholder === "string") {
9311
+ placeholder = viewConfig.placeholder;
9312
+ }
9313
+ else if (typeof viewConfig.placeholder === "function") {
9314
+ const placeholderResult = viewConfig.placeholder();
9315
+ if (typeof placeholderResult === "string") {
9316
+ placeholder = placeholderResult;
9317
+ }
9318
+ }
9319
+ /**
9320
+ * 默认提示文字的位置
9321
+ */
9322
+ const defaultSelectedTextAlign = "left";
9323
+ this.$el.$section.setAttribute("data-selected-text-align", viewConfig.selectedTextAlign || defaultSelectedTextAlign);
9324
+ const $placeholder = popsDOMUtils.createElement("span", {
9325
+ innerText: placeholder,
9326
+ });
9327
+ this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
9328
+ },
9329
+ /**
9330
+ * 重新渲染外面的已选择项的文本
9331
+ *
9332
+ * 如果未选择，显示提示文字
9333
+ */
9334
+ renderSelectText() {
9335
+ let item = this.$data.data.find((dataItem) => {
9336
+ return dataItem.value === this.$data.selectedData?.value;
9337
+ });
9338
+ if (item == null) {
9339
+ // 未找到但是有选中信息，且是自定义输入的
9340
+ if (this.$data.selectedData && this.$data.selectedData.addCustomInput) {
9341
+ item = this.$data.selectedData;
9342
+ }
9343
+ }
9344
+ if (item != null) {
9345
+ // 默认值在数据中
9346
+ // 显示该数据项的文本
9347
+ // 隐藏placeholder
9348
+ const text = typeof item.text === "function" ? item.text(item.value, item) : item.text;
9349
+ if (item.isHTML) {
9350
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, text);
9351
+ }
9352
+ else {
9353
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper,
9354
+ /*html*/ `
9355
+ <span>${text}</span>
9356
+ `);
9357
+ }
9358
+ // 显示选中的内容
9359
+ this.showInputWrapper();
9360
+ // 隐藏placeholder
9361
+ this.hidePlaceHolderWrapper();
9362
+ }
9363
+ else {
9364
+ // 仅显示placeholder
9365
+ this.hideInputWrapper();
9366
+ this.showPlaceHolderWrapper();
9367
+ }
9368
+ },
9369
+ /**
9370
+ * 禁用选项容器
9371
+ */
9372
+ disable() {
9373
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9374
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9375
+ },
9376
+ /**
9377
+ * 取消禁用选项容器
9378
+ */
9379
+ cancleDisable() {
9380
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9381
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9382
+ },
9383
+ /**
9384
+ * 判断当前是否已禁用选项容器
9385
+ */
9386
+ isDisabled() {
9387
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
9388
+ popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
9389
+ },
9390
+ /**
9391
+ * 设置选择列表的点击事件
9392
+ *
9393
+ * 点击显示选择列表的弹窗
9394
+ */
9395
+ onShowSelectDialogClick() {
9396
+ const defaultCSS = PopsCSS.panelComponents_Select;
9397
+ popsDOMUtils.on(this.$el.$container, "click", () => {
9398
+ if (this.isDisabled()) {
9399
+ return;
9400
+ }
9401
+ /** 当前已选中的值 */
9402
+ const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9403
+ /**
9404
+ * 弹窗关闭的回调
9405
+ */
9406
+ const dialogCloseCallback = () => {
9407
+ if (this.$data.selectedData?.addCustomInput && !this.$data.isValidSuccess) {
9408
+ // 当前是自定义输入的且未通过校验
9409
+ return false;
9410
+ }
9411
+ else {
9412
+ // 清除自定义输入的值
9413
+ this.getAllSelectItems(false).forEach((it) => {
9414
+ if (!it.data.addCustomInput)
9415
+ return;
9416
+ it.data.value = "";
9417
+ it.data.text = "";
9418
+ this.onValueChangeCallback(it.data);
9419
+ });
9420
+ }
9421
+ this.renderSelectText();
9422
+ this.$el.$selectDialogContainer = null;
9423
+ this.$el.$container.removeAttribute(this.$data.rotateKey);
9424
+ };
9425
+ this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
9426
+ const confirmConfig = popsUtils.assign({
9427
+ title: {
9428
+ text: "请勾选需要选择的选项",
9429
+ position: "center",
9430
+ },
9431
+ content: {
9432
+ text: /*html*/ `<ul class="select-container"></ul>`,
9433
+ html: true,
9434
+ },
9435
+ btn: {
9436
+ ok: {
9437
+ enable: false,
9438
+ },
9439
+ close: {
9440
+ enable: true,
9441
+ callback(evtConfig) {
9442
+ const ret = dialogCloseCallback();
9443
+ if (typeof ret === "boolean" && !ret) {
9444
+ return;
9445
+ }
9446
+ evtConfig.close();
9447
+ },
9448
+ },
9449
+ },
9450
+ mask: {
9451
+ enable: true,
9452
+ clickCallBack(originalRun) {
9453
+ const ret = dialogCloseCallback();
9454
+ if (typeof ret === "boolean" && !ret) {
9455
+ return;
9456
+ }
9457
+ originalRun();
9458
+ },
9459
+ clickEvent: {
9460
+ toClose: true,
9461
+ },
9462
+ },
9463
+ drag: true,
9464
+ dragLimit: true,
9465
+ width: "300px",
9466
+ height: "auto",
9467
+ style: /*css*/ `
9468
+ ${defaultCSS}
9469
+
9470
+ ${PopsCSS.panelCSS}
9471
+
9472
+ ${style || ""}
9473
+ `,
9474
+ }, userConfirmConfig);
9475
+ const $dialog = PopsAlert.init(confirmConfig);
9476
+ const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
9477
+ // 初始化选项元素
9478
+ this.$data.data.forEach((item) => {
9479
+ if (item.addCustomInput) {
9480
+ // 添加自定义输入的
9481
+ const customInputDataOption = item;
9482
+ const $customInputSelecItem = this.createSelectItemElement(customInputDataOption);
9483
+ const context = this;
9484
+ const PanelInput = that.createSectionContainerItem_input({
9485
+ type: "input",
9486
+ text: "",
9487
+ getValue() {
9488
+ return customInputDataOption.value;
9489
+ },
9490
+ callback(evt, value) {
9491
+ customInputDataOption.text = value;
9492
+ customInputDataOption.value = value;
9493
+ if (typeof customInputDataOption.onValid === "function") {
9494
+ const ret = customInputDataOption.onValid(customInputDataOption);
9495
+ context.$data.isValidSuccess = ret.valid;
9496
+ if (ret.valid) {
9497
+ PanelInputHandler.removeValidErrorMsg();
9498
+ }
9499
+ else {
9500
+ PanelInputHandler.addValidErrorMsg(ret.message);
9501
+ return ret;
9502
+ }
9503
+ }
9504
+ context.updateSelectedInfo(customInputDataOption);
9505
+ context.onValueChangeCallback(customInputDataOption);
9506
+ },
9507
+ });
9508
+ // 获取输入框处理函数
9509
+ const PanelInputHandler = PanelInput.handler;
9510
+ const $inputContainer = PanelInput.$el.querySelector(".pops-panel-input");
9511
+ PopsSafeUtils.setSafeHTML($customInputSelecItem, "");
9512
+ $customInputSelecItem.appendChild($inputContainer);
9513
+ // 添加到confirm中
9514
+ $selectContainer.appendChild($customInputSelecItem);
9515
+ // 设置项的点击事件
9516
+ this.onSelectItemClick(customInputDataOption, $customInputSelecItem);
9517
+ }
9518
+ else {
9519
+ const $select = this.createSelectItemElement(item);
9520
+ // 添加到confirm中
9521
+ $selectContainer.appendChild($select);
9522
+ // 设置项的点击事件
9523
+ this.onSelectItemClick(item, $select);
9524
+ }
9525
+ });
9526
+ this.$el.$selectDialogContainer = $selectContainer;
9527
+ // 初始化状态
9528
+ this.updateAllSelectItemStatus();
9529
+ });
9530
+ },
9531
+ /**
9532
+ * 选中的值改变的回调
9533
+ * @param data 当前的选中信息
9534
+ */
9535
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9536
+ // 动态更新禁用状态、选中状态
9537
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9538
+ // 触发回调
9539
+ if (typeof viewConfig.callback === "function") {
9540
+ viewConfig.callback(data || this.$data.selectedData);
9541
+ }
9542
+ },
9543
+ /**
9544
+ * 更新选项弹窗内的所有选项元素的状态
9545
+ *
9546
+ * + 更新禁用状态
9547
+ * + 更新选中状态
9548
+ */
9549
+ updateAllSelectItemStatus() {
9550
+ const allSelectItems = this.getAllSelectItems(false);
9551
+ allSelectItems.forEach(($selectInfo) => {
9552
+ const { data, $select } = $selectInfo;
9553
+ // 更新文字
9554
+ this.setSelectItemText(data, $selectInfo.$select);
9555
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9556
+ // 移除选中状态
9557
+ this.removeItemSelected($select);
9558
+ // 禁用
9559
+ this.setSelectItemDisabled($select);
9560
+ }
9561
+ else {
9562
+ // 移除禁用状态
9563
+ this.removeSelectItemDisabled($select);
9564
+ }
9565
+ // 根据当前已选择的信息，判断并更新选中状态
9566
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
9567
+ // 就是这个项
9568
+ // 设置选中
9569
+ this.setItemSelected($select);
9570
+ }
9571
+ else {
9572
+ // 不是这个项
9573
+ // 移除选中状态
9574
+ this.removeItemSelected($select);
9575
+ }
9576
+ });
9577
+ },
9578
+ /**
9579
+ * 重置所有已选中的项以下状态
9580
+ *
9581
+ * + 更新选项显示的文字
9582
+ * + 移除禁用状态
9583
+ * + 移除选中状态
9584
+ */
9585
+ resetAllSelectedItemStatus() {
9586
+ const allSelectedItems = this.getAllSelectItems(true);
9587
+ if (allSelectedItems.length) {
9588
+ // 移除选中信息
9589
+ this.resetCurrentSelectedInfo();
9590
+ }
9591
+ allSelectedItems.forEach(($selectInfo) => {
9592
+ const { data, $select } = $selectInfo;
9593
+ // 更新文字
9594
+ this.setSelectItemText(data, $selectInfo.$select);
9595
+ // 移除选中状态
9596
+ this.removeItemSelected($select);
9597
+ // 取消禁用
9598
+ this.removeSelectItemDisabled($select);
9599
+ });
9600
+ },
9601
+ /**
9602
+ * 设置选项元素选中
9603
+ * @param $el 选项元素
9604
+ */
9605
+ setItemSelected($el) {
9606
+ if (this.isItemSelected($el))
9607
+ return;
9608
+ $el.classList.add("select-item-is-selected");
9609
+ },
9610
+ /**
9611
+ * 移除选项元素选中
9612
+ * @param $el 选项元素
9613
+ */
9614
+ removeItemSelected($el) {
9615
+ $el.classList.remove("select-item-is-selected");
9616
+ },
9617
+ /**
9618
+ * 判断选项元素是否选中
9619
+ * @param $el
9620
+ */
9621
+ isItemSelected($el) {
9622
+ return $el.classList.contains("select-item-is-selected");
9623
+ },
9624
+ /**
9625
+ * 获取项上存储的信息
9626
+ * @param $el 选项元素
9627
+ */
9628
+ getItemDataOption($el) {
9629
+ return Reflect.get($el, "data-info");
9630
+ },
9631
+ /**
9632
+ * 添加选中信息
9633
+ * @param data 选择项的数据
9634
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
9635
+ */
9636
+ addSelectedItemInfo(data) {
9637
+ this.resetCurrentSelectedInfo();
9638
+ this.updateSelectedInfo(data);
9639
+ this.onValueChangeCallback(data);
9640
+ },
9641
+ /**
9642
+ * 移除选中信息
9643
+ * @param data 选择项的数据
9644
+ */
9645
+ removeSelectedItemInfo() {
9646
+ // 删除
9647
+ this.updateSelectedInfo();
9648
+ this.onValueChangeCallback();
9649
+ },
9650
+ /**
9651
+ * 更新选中信息
9652
+ * @param data 数据
9653
+ */
9654
+ updateSelectedInfo(data) {
9655
+ // 先删除再赋值
9656
+ this.$data.selectedData = void 0;
9657
+ if (data) {
9658
+ if (data.addCustomInput && data.value.toString() === "") {
9659
+ // 自定义输入框，但是内容是空字符串
9660
+ // 不更新选中信息
9661
+ return;
9662
+ }
9663
+ this.$data.selectedData = data;
8756
9664
  }
8757
- optionElement.innerText = dataItem.text;
8758
- this.$ele.select.appendChild(optionElement);
8759
- });
8760
- },
8761
- /**
8762
- * 设置选项选中
8763
- */
8764
- setOptionSelected($option) {
8765
- $option.setAttribute("selected", "true");
8766
- },
8767
- /** 检测所有option并设置禁用状态 */
8768
- setSelectOptionsDisableStatus() {
8769
- if (this.$ele.select.options && this.$ele.select.options.length) {
8770
- Array.from(this.$ele.select.options).forEach((optionItem) => {
8771
- this.setOptionDisableStatus(optionItem);
9665
+ },
9666
+ /**
9667
+ * 从保存的已选中的信息列表中移除目标信息
9668
+ */
9669
+ resetCurrentSelectedInfo() {
9670
+ this.updateSelectedInfo();
9671
+ },
9672
+ /**
9673
+ * 获取所有选项的信息
9674
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
9675
+ * + true （默认）仅获取选中项的信息
9676
+ * + false 获取所有选择项的信息
9677
+ */
9678
+ getAllSelectItems(onlySelected = true) {
9679
+ return Array.from(this.$el.$selectDialogContainer?.querySelectorAll(".select-item") ?? [])
9680
+ .map(($select) => {
9681
+ const data = this.getItemDataOption($select);
9682
+ const result = {
9683
+ /** 选项信息数据 */
9684
+ data: data,
9685
+ /** 选项元素 */
9686
+ $select: $select,
9687
+ };
9688
+ if (onlySelected) {
9689
+ // 仅选中
9690
+ const isSelected = this.isItemSelected($select);
9691
+ if (isSelected) {
9692
+ return result;
9693
+ }
9694
+ return;
9695
+ }
9696
+ else {
9697
+ return result;
9698
+ }
9699
+ })
9700
+ .filter((item) => {
9701
+ return item != null;
8772
9702
  });
8773
- }
8774
- },
8775
- /** 设置禁用状态 */
8776
- setOptionDisableStatus(optionElement) {
8777
- let disable = false;
8778
- const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
8779
- if (optionDisableAttr === "function") {
8780
- const value = this.getNodeValue(optionElement, this.$eleKey.value);
8781
- disable = Boolean(optionDisableAttr(value));
8782
- }
8783
- if (disable) {
8784
- optionElement.setAttribute("disabled", "true");
8785
- }
8786
- else {
8787
- optionElement.removeAttribute("disabled");
8788
- }
8789
- },
8790
- /** 获取option上的信息 */
8791
- getSelectOptionInfo($option) {
8792
- const optionValue = this.getNodeValue($option, this.$eleKey.value);
8793
- const optionText = $option.innerText || $option.textContent;
8794
- const views = this.getNodeValue($option, this.$eleKey.viewConfig);
8795
- return {
8796
- value: optionValue,
8797
- text: optionText,
8798
- views: views,
8799
- $option: $option,
8800
- };
8801
- },
8802
- /**
8803
- * 监听选择内容改变
8804
- */
8805
- setChangeEvent() {
8806
- popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8807
- const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8808
- const selectInfo = this.getSelectOptionInfo($isSelectedElement);
8809
- this.setSelectOptionsDisableStatus();
8810
- if (typeof viewConfig.callback === "function") {
8811
- viewConfig.callback(event, selectInfo.value, selectInfo.text);
9703
+ },
9704
+ /**
9705
+ * 创建一个选择项元素
9706
+ * @param data 选择项的数据
9707
+ */
9708
+ createSelectItemElement(data) {
9709
+ const $select = popsDOMUtils.createElement("li", {
9710
+ className: "select-item",
9711
+ innerHTML: /*html*/ `<span class="select-item-text"></span>`,
9712
+ });
9713
+ this.setSelectItemText(data, $select);
9714
+ Reflect.set($select, "data-info", data);
9715
+ return $select;
9716
+ },
9717
+ /**
9718
+ * 设置选择项的文字
9719
+ * @param data 选择项的数据
9720
+ * @param $select 选择项元素
9721
+ */
9722
+ setSelectItemText(data, $select) {
9723
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9724
+ const $selectSpan = $select.querySelector(".select-item-text");
9725
+ if (!$selectSpan)
9726
+ return;
9727
+ if (data.isHTML) {
9728
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9729
+ }
9730
+ else {
9731
+ $selectSpan.innerText = text;
8812
9732
  }
8813
- const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
8814
- if (Array.isArray(views)) {
8815
- // 如果成功创建，加入到中间容器中
8816
- const childUListClassName = "pops-panel-select-child-forms";
8817
- // 移除旧的元素
8818
- while ($li.nextElementSibling) {
8819
- if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8820
- $li.nextElementSibling.remove();
9733
+ },
9734
+ /**
9735
+ * 设置选择项禁用
9736
+ * @param $select 选择项元素
9737
+ */
9738
+ setSelectItemDisabled($select) {
9739
+ $select.setAttribute("aria-disabled", "true");
9740
+ $select.setAttribute("disabled", "true");
9741
+ },
9742
+ /**
9743
+ * 移除选择项的禁用状态
9744
+ * @param $select 选择项元素
9745
+ */
9746
+ removeSelectItemDisabled($select) {
9747
+ $select.removeAttribute("aria-disabled");
9748
+ $select.removeAttribute("disabled");
9749
+ },
9750
+ /**
9751
+ * 判断选择项是否禁用
9752
+ * @param $select 选择项元素
9753
+ */
9754
+ isSelectItemDisabled($select) {
9755
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
9756
+ },
9757
+ /**
9758
+ * 设置选择项的点击事件
9759
+ * @param data 该选择项的信息
9760
+ * @param $select 该选择项元素
9761
+ */
9762
+ onSelectItemClick(data, $select) {
9763
+ const updateCustomInputStatus = () => {
9764
+ this.setItemSelected($select);
9765
+ this.addSelectedItemInfo(data);
9766
+ };
9767
+ popsDOMUtils.on($select, "click", (event) => {
9768
+ popsDOMUtils.preventEvent(event);
9769
+ const $click = event.target;
9770
+ if (data?.addCustomInput && $click instanceof HTMLInputElement) {
9771
+ // 自定义输入框 单独处理值更新，选中
9772
+ updateCustomInputStatus();
9773
+ return;
9774
+ }
9775
+ if (this.isSelectItemDisabled($select)) {
9776
+ // 被禁用了
9777
+ return;
9778
+ }
9779
+ if (typeof viewConfig.clickCallBack === "function") {
9780
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9781
+ if (typeof clickResult === "boolean" && !clickResult) {
9782
+ return;
9783
+ }
9784
+ }
9785
+ if (data?.addCustomInput) {
9786
+ // 自定义输入框 添加选中
9787
+ updateCustomInputStatus();
9788
+ }
9789
+ else {
9790
+ // 修改选中状态
9791
+ if (this.isItemSelected($select)) {
9792
+ // 移除选中
9793
+ this.removeItemSelected($select);
9794
+ this.removeSelectedItemInfo();
8821
9795
  }
8822
9796
  else {
8823
- break;
9797
+ // 添加选中
9798
+ this.setItemSelected($select);
9799
+ this.addSelectedItemInfo(data);
8824
9800
  }
8825
9801
  }
8826
- const $childUList = popsDOMUtils.createElement("ul");
8827
- $childUList.className = childUListClassName;
8828
- popsDOMUtils.after($li, $childUList);
8829
- that.uListContainerAddItem(viewConfig, {
8830
- ulElement: $childUList,
8831
- });
9802
+ });
9803
+ },
9804
+ /** 显示输入框 */
9805
+ showInputWrapper() {
9806
+ popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
9807
+ },
9808
+ /** 隐藏输入框 */
9809
+ hideInputWrapper() {
9810
+ popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
9811
+ },
9812
+ /** 显示palceholder */
9813
+ showPlaceHolderWrapper() {
9814
+ popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
9815
+ },
9816
+ /** 隐藏palceholder */
9817
+ hidePlaceHolderWrapper() {
9818
+ popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
9819
+ },
9820
+ };
9821
+ PopsPanelSelect.init();
9822
+ Reflect.set($li, "data-select", PopsPanelSelect);
9823
+ handler = PopsPanelSelect;
9824
+ }
9825
+ else if (mode === "horizontal") {
9826
+ const PopsPanelSelectHorizontal = {
9827
+ [Symbol.toStringTag]: "PopsPanelSelectHorizontal",
9828
+ $el: {
9829
+ $itemLeftContainer: $itemLeftContainer,
9830
+ /** 选择框容器 */
9831
+ $container: $container,
9832
+ /** 选择框包裹的容器 */
9833
+ $wrapper: void 0,
9834
+ },
9835
+ $data: {
9836
+ /**
9837
+ * 数据
9838
+ */
9839
+ data: [],
9840
+ /**
9841
+ * 默认值
9842
+ */
9843
+ defaultValue: viewConfig.getValue(),
9844
+ /**
9845
+ * 选择的信息
9846
+ */
9847
+ selectedData: void 0,
9848
+ /**
9849
+ * 箭头旋转的属性
9850
+ */
9851
+ rotateKey: "data-show-option",
9852
+ },
9853
+ /** 初始化 */
9854
+ init() {
9855
+ this.initDefault();
9856
+ this.initEl();
9857
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9858
+ if (disabled) {
9859
+ this.disable();
8832
9860
  }
8833
- });
8834
- },
8835
- /**
8836
- * 监听点击事件
8837
- */
8838
- setClickEvent() {
8839
- popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
8840
- this.setSelectOptionsDisableStatus();
8841
- if (typeof viewConfig.clickCallBack === "function") {
8842
- viewConfig.clickCallBack(event, this.$ele.select);
9861
+ },
9862
+ /** 初始化默认值 */
9863
+ initDefault() {
9864
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9865
+ if (!this.$data.data.length) {
9866
+ throw new Error("PopsPanelSelect: data is empty");
8843
9867
  }
8844
- });
8845
- },
9868
+ },
9869
+ /** 初始化$ele变量 */
9870
+ initEl() {
9871
+ this.$el.$container.setAttribute("data-mode", mode);
9872
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9873
+ /*html*/ `
9874
+ <div class="el-select__wrapper">
9875
+ </div>`);
9876
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9877
+ this.$data.data.forEach((dataItem) => {
9878
+ const $item = this.createSelectItemElement(dataItem);
9879
+ this.onSelectItemClick(dataItem, $item);
9880
+ if (this.$data.defaultValue === dataItem.value) {
9881
+ this.addSelectedItemInfo(dataItem);
9882
+ }
9883
+ this.$el.$wrapper.appendChild($item);
9884
+ });
9885
+ this.updateAllSelectItemStatus();
9886
+ },
9887
+ /**
9888
+ * 禁用选项容器
9889
+ */
9890
+ disable() {
9891
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9892
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9893
+ },
9894
+ /**
9895
+ * 取消禁用选项容器
9896
+ */
9897
+ cancleDisable() {
9898
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9899
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
9900
+ },
9901
+ /**
9902
+ * 判断当前是否已禁用选项容器
9903
+ */
9904
+ isDisabled() {
9905
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
9906
+ popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
9907
+ },
9908
+ /**
9909
+ * 创建选择项
9910
+ * @param data 数据
9911
+ */
9912
+ createSelectItemElement(data) {
9913
+ const $select = popsDOMUtils.createElement("div", {
9914
+ className: "select-item",
9915
+ innerHTML: /*html*/ `
9916
+ <span class="select-item-text"></span>
9917
+ `,
9918
+ });
9919
+ this.setSelectItemText(data, $select);
9920
+ Reflect.set($select, "data-info", data);
9921
+ return $select;
9922
+ },
9923
+ /**
9924
+ * 设置选择项的文字
9925
+ * @param data 选择项的数据
9926
+ * @param $select 选择项元素
9927
+ */
9928
+ setSelectItemText(data, $select) {
9929
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9930
+ const $selectSpan = $select.querySelector(".select-item-text");
9931
+ if (!$selectSpan)
9932
+ return;
9933
+ if (data.isHTML) {
9934
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9935
+ }
9936
+ else {
9937
+ $selectSpan.innerText = text;
9938
+ }
9939
+ },
9940
+ /**
9941
+ * 设置选择项点击事件
9942
+ */
9943
+ onSelectItemClick(data, $el) {
9944
+ popsDOMUtils.on($el, "click", (event) => {
9945
+ popsDOMUtils.preventEvent(event);
9946
+ if (this.isDisabled()) {
9947
+ return;
9948
+ }
9949
+ if (this.isSelectItemDisabled($el)) {
9950
+ // 被禁用了
9951
+ return;
9952
+ }
9953
+ if (typeof viewConfig.clickCallBack === "function") {
9954
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9955
+ if (typeof clickResult === "boolean" && !clickResult) {
9956
+ return;
9957
+ }
9958
+ } // 修改选中状态
9959
+ if (this.isItemSelected($el)) {
9960
+ // 移除选中
9961
+ this.removeItemSelected($el);
9962
+ this.removeSelectedItemInfo();
9963
+ }
9964
+ else {
9965
+ // 添加选中
9966
+ this.setItemSelected($el);
9967
+ this.addSelectedItemInfo(data);
9968
+ }
9969
+ });
9970
+ },
9971
+ /**
9972
+ * 选中的值改变的回调
9973
+ * @param data 当前的选中信息
9974
+ */
9975
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9976
+ // 动态更新禁用状态、选中状态
9977
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9978
+ // 触发回调
9979
+ if (typeof viewConfig.callback === "function") {
9980
+ viewConfig.callback(data || this.$data.selectedData);
9981
+ }
9982
+ },
9983
+ /**
9984
+ * 更新选项弹窗内的所有选项元素的状态
9985
+ *
9986
+ * + 更新禁用状态
9987
+ * + 更新选中状态
9988
+ */
9989
+ updateAllSelectItemStatus() {
9990
+ const allSelectItems = this.getAllSelectItems(false);
9991
+ allSelectItems.forEach(($selectInfo) => {
9992
+ const { data, $select } = $selectInfo;
9993
+ // 更新文字
9994
+ this.setSelectItemText(data, $selectInfo.$select);
9995
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9996
+ // 移除选中状态
9997
+ this.removeItemSelected($select);
9998
+ // 禁用
9999
+ this.setSelectItemDisabled($select);
10000
+ }
10001
+ else {
10002
+ // 移除禁用状态
10003
+ this.removeSelectItemDisabled($select);
10004
+ }
10005
+ // 根据当前已选择的信息，判断并更新选中状态
10006
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
10007
+ // 就是这个项
10008
+ // 设置选中
10009
+ this.setItemSelected($select);
10010
+ }
10011
+ else {
10012
+ // 不是这个项
10013
+ // 移除选中状态
10014
+ this.removeItemSelected($select);
10015
+ }
10016
+ });
10017
+ },
10018
+ /**
10019
+ * 重置所有已选中的项以下状态
10020
+ *
10021
+ * + 更新选项显示的文字
10022
+ * + 移除禁用状态
10023
+ * + 移除选中状态
10024
+ */
10025
+ resetAllSelectedItemStatus() {
10026
+ const allSelectedItems = this.getAllSelectItems(true);
10027
+ if (allSelectedItems.length) {
10028
+ // 移除选中信息
10029
+ this.resetCurrentSelectedInfo();
10030
+ }
10031
+ allSelectedItems.forEach(($selectInfo) => {
10032
+ const { data, $select } = $selectInfo;
10033
+ // 更新文字
10034
+ this.setSelectItemText(data, $selectInfo.$select);
10035
+ // 移除选中状态
10036
+ this.removeItemSelected($select);
10037
+ // 取消禁用
10038
+ this.removeSelectItemDisabled($select);
10039
+ });
10040
+ },
10041
+ /**
10042
+ * 添加选中信息
10043
+ * @param data 选择项的数据
10044
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
10045
+ */
10046
+ addSelectedItemInfo(data) {
10047
+ this.resetCurrentSelectedInfo();
10048
+ this.updateSelectedInfo(data);
10049
+ this.onValueChangeCallback(data);
10050
+ },
10051
+ /**
10052
+ * 移除选中信息
10053
+ * @param data 选择项的数据
10054
+ */
10055
+ removeSelectedItemInfo() {
10056
+ // 删除
10057
+ this.updateSelectedInfo();
10058
+ this.onValueChangeCallback();
10059
+ },
10060
+ /**
10061
+ * 更新选中信息
10062
+ * @param data 数据
10063
+ */
10064
+ updateSelectedInfo(data) {
10065
+ // 先删除再赋值
10066
+ this.$data.selectedData = void 0;
10067
+ if (data) {
10068
+ if (data.addCustomInput && data.value.toString() === "") {
10069
+ // 自定义输入框，但是内容是空字符串
10070
+ // 不更新选中信息
10071
+ return;
10072
+ }
10073
+ this.$data.selectedData = data;
10074
+ }
10075
+ },
10076
+ /**
10077
+ * 从保存的已选中的信息列表中移除目标信息
10078
+ */
10079
+ resetCurrentSelectedInfo() {
10080
+ this.updateSelectedInfo();
10081
+ },
10082
+ /**
10083
+ * 设置选择项禁用
10084
+ * @param $select 选择项元素
10085
+ */
10086
+ setSelectItemDisabled($select) {
10087
+ $select.setAttribute("aria-disabled", "true");
10088
+ $select.setAttribute("disabled", "true");
10089
+ },
10090
+ /**
10091
+ * 移除选择项的禁用状态
10092
+ * @param $select 选择项元素
10093
+ */
10094
+ removeSelectItemDisabled($select) {
10095
+ $select.removeAttribute("aria-disabled");
10096
+ $select.removeAttribute("disabled");
10097
+ },
10098
+ /**
10099
+ * 判断选择项是否禁用
10100
+ * @param $select 选择项元素
10101
+ */
10102
+ isSelectItemDisabled($select) {
10103
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
10104
+ },
10105
+ /**
10106
+ * 设置选择项选中
10107
+ * @param $select 选择项元素（.select-item）
10108
+ */
10109
+ setItemSelected($select) {
10110
+ if (this.isItemSelected($select))
10111
+ return;
10112
+ $select.classList.add("select__selected-item");
10113
+ },
10114
+ /**
10115
+ * 移除选择项选中
10116
+ * @param $select 选择项元素（.select-item）
10117
+ */
10118
+ removeItemSelected($select) {
10119
+ $select.classList.remove("select__selected-item");
10120
+ },
10121
+ /**
10122
+ * 判断选择项是否选中
10123
+ * @param $select 选择项元素（.select-item）
10124
+ */
10125
+ isItemSelected($select) {
10126
+ return $select.classList.contains("select__selected-item");
10127
+ },
10128
+ /**
10129
+ * 获取所有选项的信息
10130
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
10131
+ * + true （默认）仅获取选中项的信息
10132
+ * + false 获取所有选择项的信息
10133
+ */
10134
+ getAllSelectItems(onlySelected = true) {
10135
+ return Array.from(this.$el.$wrapper?.querySelectorAll(".select-item") ?? [])
10136
+ .map(($select) => {
10137
+ const data = this.getItemDataOption($select);
10138
+ const result = {
10139
+ /** 选项信息数据 */
10140
+ data: data,
10141
+ /** 选项元素 */
10142
+ $select: $select,
10143
+ };
10144
+ if (onlySelected) {
10145
+ // 仅选中
10146
+ const isSelected = this.isItemSelected($select);
10147
+ if (isSelected) {
10148
+ return result;
10149
+ }
10150
+ return;
10151
+ }
10152
+ else {
10153
+ return result;
10154
+ }
10155
+ })
10156
+ .filter((item) => {
10157
+ return item != null;
10158
+ });
10159
+ },
10160
+ /**
10161
+ * 获取项上存储的信息
10162
+ * @param $el 选项元素
10163
+ */
10164
+ getItemDataOption($el) {
10165
+ return Reflect.get($el, "data-info");
10166
+ },
10167
+ };
10168
+ PopsPanelSelectHorizontal.init();
10169
+ Reflect.set($li, "data-select", PopsPanelSelectHorizontal);
10170
+ handler = PopsPanelSelectHorizontal;
10171
+ }
10172
+ return {
10173
+ $el: $li,
10174
+ handler: handler,
8846
10175
  };
8847
- PopsPanelSelect.init();
8848
- Reflect.set($li, "data-select", PopsPanelSelect);
8849
- return $li;
8850
10176
  },
8851
10177
  /**
8852
10178
  * type ==> select-multiple
@@ -8894,7 +10220,7 @@ System.register('pops', [], (function (exports) {
8894
10220
  [Symbol.toStringTag]: "PopsPanelSelectMultiple",
8895
10221
  $el: {
8896
10222
  /** 左侧文本容器 */
8897
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
10223
+ $itemLeftContainer: $li.querySelector(".pops-panel-item-left-text"),
8898
10224
  /** 选择框容器 */
8899
10225
  $container: void 0,
8900
10226
  /** 选择框包裹的容器 */
@@ -8916,9 +10242,9 @@ System.register('pops', [], (function (exports) {
8916
10242
  /** 默认值 */
8917
10243
  defaultValue: viewConfig.getValue(),
8918
10244
  /**
8919
- * 选择的信息
10245
+ * 已选择的信息
8920
10246
  */
8921
- selectInfo: [],
10247
+ selectedDataList: [],
8922
10248
  /**
8923
10249
  * 箭头旋转的属性
8924
10250
  */
@@ -8930,7 +10256,7 @@ System.register('pops', [], (function (exports) {
8930
10256
  this.inintEl();
8931
10257
  this.initPlaceHolder();
8932
10258
  this.initTagElement();
8933
- this.setSelectContainerClickEvent();
10259
+ this.onShowSelectDialogClick();
8934
10260
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8935
10261
  if (disabled) {
8936
10262
  this.disable();
@@ -8941,12 +10267,7 @@ System.register('pops', [], (function (exports) {
8941
10267
  viewConfig.data.forEach((dataItem) => {
8942
10268
  if (this.$data.defaultValue.includes(dataItem.value)) {
8943
10269
  // 初始化选中的配置
8944
- this.$data.selectInfo.push({
8945
- text: dataItem.text,
8946
- value: dataItem.value,
8947
- isHTML: Boolean(dataItem.isHTML),
8948
- disable: dataItem.disable?.bind(dataItem),
8949
- });
10270
+ this.$data.selectedDataList.push(dataItem);
8950
10271
  }
8951
10272
  });
8952
10273
  },
@@ -8962,7 +10283,9 @@ System.register('pops', [], (function (exports) {
8962
10283
  // 先把手动输入框隐藏
8963
10284
  this.hideInputWrapper();
8964
10285
  },
8965
- /** 初始化提示文字 */
10286
+ /**
10287
+ * 初始化提示文字
10288
+ */
8966
10289
  initPlaceHolder() {
8967
10290
  let placeholder = "";
8968
10291
  if (typeof viewConfig.placeholder === "string") {
@@ -8979,16 +10302,18 @@ System.register('pops', [], (function (exports) {
8979
10302
  });
8980
10303
  this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
8981
10304
  },
8982
- /** 初始化tag元素 */
10305
+ /**
10306
+ * 初始化tag元素
10307
+ */
8983
10308
  initTagElement() {
8984
10309
  // 遍历数据，寻找对应的值
8985
10310
  viewConfig.data.forEach((dataItem) => {
8986
- const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
10311
+ const findValue = this.$data.selectedDataList.find((item) => item.value === dataItem.value);
8987
10312
  if (findValue) {
8988
10313
  // 存在对应的值
8989
- const selectedInfo = this.createSelectedTagItem(dataItem);
8990
- this.addSelectedTagItem(selectedInfo.$tag);
8991
- this.setSelectedItemCloseIconClickEvent({
10314
+ const selectedInfo = this.createTagItem(dataItem);
10315
+ this.addTagItem(selectedInfo.$tag);
10316
+ this.onSelectItemCloseIconClick({
8992
10317
  $tag: selectedInfo.$tag,
8993
10318
  $closeIcon: selectedInfo.$closeIcon,
8994
10319
  value: dataItem.value,
@@ -9002,8 +10327,8 @@ System.register('pops', [], (function (exports) {
9002
10327
  * 生成一个tag项
9003
10328
  * @param data 配置
9004
10329
  */
9005
- createSelectedTagItem(data) {
9006
- const $selectedItem = popsDOMUtils.createElement("div", {
10330
+ createTagItem(data) {
10331
+ const $tag = popsDOMUtils.createElement("div", {
9007
10332
  className: "el-select__selected-item el-select__choose_tag",
9008
10333
  innerHTML: /*html*/ `
9009
10334
  <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
@@ -9020,10 +10345,10 @@ System.register('pops', [], (function (exports) {
9020
10345
  `,
9021
10346
  });
9022
10347
  /** 标签 */
9023
- const $tagText = $selectedItem.querySelector(".el-select__tags-text");
10348
+ const $tagText = $tag.querySelector(".el-select__tags-text");
9024
10349
  /** 关闭图标 */
9025
- const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
9026
- const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
10350
+ const $closeIcon = $tag.querySelector(".el-icon.el-tag__close");
10351
+ const text = typeof data.text === "function" ? data.text(data, this.$data.selectedDataList) : data.text;
9027
10352
  if (data.isHTML) {
9028
10353
  PopsSafeUtils.setSafeHTML($tagText, text);
9029
10354
  }
@@ -9031,7 +10356,7 @@ System.register('pops', [], (function (exports) {
9031
10356
  $tagText.innerText = text;
9032
10357
  }
9033
10358
  return {
9034
- $tag: $selectedItem,
10359
+ $tag: $tag,
9035
10360
  $tagText: $tagText,
9036
10361
  $closeIcon: $closeIcon,
9037
10362
  };
@@ -9040,7 +10365,7 @@ System.register('pops', [], (function (exports) {
9040
10365
  * 添加选中项的tag元素
9041
10366
  * @param $tag 添加的元素
9042
10367
  */
9043
- addSelectedTagItem($tag) {
10368
+ addTagItem($tag) {
9044
10369
  // 往前添加
9045
10370
  // 去除前面的空白
9046
10371
  this.setSectionIsNear();
@@ -9073,8 +10398,10 @@ System.register('pops', [], (function (exports) {
9073
10398
  this.hideInputWrapper();
9074
10399
  this.hidePlaceHolderWrapper();
9075
10400
  },
9076
- /** 更新tag信息 */
9077
- updateSelectTagItem() {
10401
+ /**
10402
+ * 更新tag信息
10403
+ */
10404
+ updateTagItem() {
9078
10405
  this.$el.$section.querySelectorAll(".el-select__choose_tag").forEach(($ele) => {
9079
10406
  $ele.remove();
9080
10407
  });
@@ -9084,11 +10411,11 @@ System.register('pops', [], (function (exports) {
9084
10411
  * 选中的值改变的回调
9085
10412
  * @param selectedDataList 当前的选中信息
9086
10413
  */
9087
- selectValueChangeCallBack(selectedDataList) {
10414
+ onValueChange(selectedDataList) {
9088
10415
  // 动态更新禁用状态
9089
- this.updateSelectItem();
10416
+ this.updateAllSelectItems();
9090
10417
  if (typeof viewConfig.callback === "function") {
9091
- viewConfig.callback(selectedDataList || this.$data.selectInfo);
10418
+ viewConfig.callback(selectedDataList || this.$data.selectedDataList);
9092
10419
  }
9093
10420
  },
9094
10421
  /**
@@ -9097,31 +10424,31 @@ System.register('pops', [], (function (exports) {
9097
10424
  * + 更新禁用状态
9098
10425
  * + 更新选中状态
9099
10426
  */
9100
- updateSelectItem() {
10427
+ updateAllSelectItems() {
9101
10428
  this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
9102
10429
  const { data, $select } = $selectInfo;
9103
10430
  // 更新文字
9104
10431
  this.setSelectItemText(data, $selectInfo.$select);
9105
10432
  // 更新禁用状态
9106
- if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectInfo)) {
10433
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedDataList)) {
9107
10434
  // 禁用
9108
- this.setSelectItemDisabled($select);
10435
+ this.disableSelectItem($select);
9109
10436
  // 移除选中信息
9110
10437
  this.removeSelectedInfo(data, false);
9111
10438
  // 移除选中状态
9112
- this.removeSelectItemSelected($select);
10439
+ this.removeItemSelected($select);
9113
10440
  }
9114
10441
  else {
9115
10442
  // 取消禁用
9116
- this.removeSelectItemDisabled($select);
10443
+ this.cancleDisableSelectItem($select);
9117
10444
  }
9118
10445
  // 更新选中状态
9119
- const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
10446
+ const findValue = this.$data.selectedDataList.find((it) => it.value === data.value);
9120
10447
  if (findValue) {
9121
- this.setSelectItemSelected($select);
10448
+ this.setItemSelected($select);
9122
10449
  }
9123
10450
  else {
9124
- this.removeSelectItemSelected($select);
10451
+ this.removeItemSelected($select);
9125
10452
  }
9126
10453
  });
9127
10454
  },
@@ -9129,8 +10456,8 @@ System.register('pops', [], (function (exports) {
9129
10456
  * 设置选项元素选中
9130
10457
  * @param $select 选项元素
9131
10458
  */
9132
- setSelectItemSelected($select) {
9133
- if (this.isSelectItemSelected($select))
10459
+ setItemSelected($select) {
10460
+ if (this.isItemSelected($select))
9134
10461
  return;
9135
10462
  $select.classList.add("select-item-is-selected");
9136
10463
  },
@@ -9138,14 +10465,14 @@ System.register('pops', [], (function (exports) {
9138
10465
  * 移除选项元素选中
9139
10466
  * @param $select 选项元素
9140
10467
  */
9141
- removeSelectItemSelected($select) {
10468
+ removeItemSelected($select) {
9142
10469
  $select.classList.remove("select-item-is-selected");
9143
10470
  },
9144
10471
  /**
9145
10472
  * 判断选项元素是否选中
9146
10473
  * @param $select
9147
10474
  */
9148
- isSelectItemSelected($select) {
10475
+ isItemSelected($select) {
9149
10476
  return $select.classList.contains("select-item-is-selected");
9150
10477
  },
9151
10478
  /**
@@ -9153,18 +10480,13 @@ System.register('pops', [], (function (exports) {
9153
10480
  * @param dataList 选择项列表的数据
9154
10481
  * @param $select 选项元素
9155
10482
  */
9156
- addSelectedItemInfo(dataList, $select) {
10483
+ addItemSelected(dataList, $select) {
9157
10484
  const info = this.getSelectedItemInfo($select);
9158
10485
  const findValue = dataList.find((item) => item.value === info.value);
9159
10486
  if (!findValue) {
9160
- dataList.push({
9161
- value: info.value,
9162
- text: info.text,
9163
- isHTML: Boolean(info.isHTML),
9164
- disable: info.disable?.bind(info),
9165
- });
10487
+ dataList.push(info);
9166
10488
  }
9167
- this.selectValueChangeCallBack(dataList);
10489
+ this.onValueChange(dataList);
9168
10490
  },
9169
10491
  /**
9170
10492
  * 获取选中的项的信息
@@ -9184,7 +10506,7 @@ System.register('pops', [], (function (exports) {
9184
10506
  if (findIndex !== -1) {
9185
10507
  dataList.splice(findIndex, 1);
9186
10508
  }
9187
- this.selectValueChangeCallBack(dataList);
10509
+ this.onValueChange(dataList);
9188
10510
  },
9189
10511
  /**
9190
10512
  * 获取所有选项的信息
@@ -9204,7 +10526,7 @@ System.register('pops', [], (function (exports) {
9204
10526
  };
9205
10527
  if (onlySelected) {
9206
10528
  // 仅选中
9207
- const isSelected = this.isSelectItemSelected($select);
10529
+ const isSelected = this.isItemSelected($select);
9208
10530
  if (isSelected) {
9209
10531
  return result;
9210
10532
  }
@@ -9239,7 +10561,7 @@ System.register('pops', [], (function (exports) {
9239
10561
  * @param $select 选择项元素
9240
10562
  */
9241
10563
  setSelectItemText(data, $select) {
9242
- const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
10564
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedDataList) : data.text;
9243
10565
  const $selectSpan = $select.querySelector(".select-item-text");
9244
10566
  if (data.isHTML) {
9245
10567
  PopsSafeUtils.setSafeHTML($selectSpan, text);
@@ -9252,7 +10574,7 @@ System.register('pops', [], (function (exports) {
9252
10574
  * 设置选择项的禁用状态
9253
10575
  * @param $select 选择项元素
9254
10576
  */
9255
- setSelectItemDisabled($select) {
10577
+ disableSelectItem($select) {
9256
10578
  $select.setAttribute("aria-disabled", "true");
9257
10579
  $select.setAttribute("disabled", "true");
9258
10580
  },
@@ -9260,7 +10582,7 @@ System.register('pops', [], (function (exports) {
9260
10582
  * 移除选择项的禁用状态
9261
10583
  * @param $select 选择项元素
9262
10584
  */
9263
- removeSelectItemDisabled($select) {
10585
+ cancleDisableSelectItem($select) {
9264
10586
  $select.removeAttribute("aria-disabled");
9265
10587
  $select.removeAttribute("disabled");
9266
10588
  },
@@ -9276,7 +10598,7 @@ System.register('pops', [], (function (exports) {
9276
10598
  * @param dataList 选中的信息列表
9277
10599
  * @param $select 选择项元素
9278
10600
  */
9279
- setSelectElementClickEvent(dataList, $select) {
10601
+ onSelectItemClick(dataList, $select) {
9280
10602
  popsDOMUtils.on($select, "click", (event) => {
9281
10603
  popsDOMUtils.preventEvent(event);
9282
10604
  if (this.isSelectItemDisabled($select)) {
@@ -9290,13 +10612,13 @@ System.register('pops', [], (function (exports) {
9290
10612
  }
9291
10613
  }
9292
10614
  // 修改选中状态
9293
- if (this.isSelectItemSelected($select)) {
9294
- this.removeSelectItemSelected($select);
10615
+ if (this.isItemSelected($select)) {
10616
+ this.removeItemSelected($select);
9295
10617
  this.removeSelectedItemInfo(dataList, $select);
9296
10618
  }
9297
10619
  else {
9298
- this.setSelectItemSelected($select);
9299
- this.addSelectedItemInfo(dataList, $select);
10620
+ this.setItemSelected($select);
10621
+ this.addItemSelected(dataList, $select);
9300
10622
  }
9301
10623
  });
9302
10624
  },
@@ -9305,79 +10627,18 @@ System.register('pops', [], (function (exports) {
9305
10627
  *
9306
10628
  * 点击显示下拉列表弹窗
9307
10629
  */
9308
- setSelectContainerClickEvent() {
9309
- const defaultCSS = /*css*/ `
9310
- .select-container{
9311
- --el-font-size-base: 14px;
9312
- --el-text-color-regular: #606266;
9313
- --el-color-primary: #409eff;
9314
- --el-fill-color-light: #f5f7fa;
9315
- --el-disable-color: #a8abb2;
9316
- }
9317
- .select-item{
9318
- cursor: pointer;
9319
- font-size: var(--el-font-size-base);
9320
- padding: 0 32px 0 20px;
9321
- position: relative;
9322
- white-space: nowrap;
9323
- overflow: hidden;
9324
- text-overflow: ellipsis;
9325
- color: var(--el-text-color-regular);
9326
- height: 34px;
9327
- line-height: 34px;
9328
- box-sizing: border-box;
9329
- }
9330
- .select-item[aria-disabled],
9331
- .select-item[disabled]{
9332
- cursor: not-allowed;
9333
- color: var(--el-disable-color);
9334
- background: unset;
9335
- }
9336
- .select-item:hover{
9337
- background-color: var(--el-fill-color-light);
9338
- }
9339
- .select-item.select-item-is-selected{
9340
- color: var(--el-color-primary);
9341
- font-weight: 700;
9342
- }
9343
- .select-item.select-item-is-selected::after{
9344
- content: "";
9345
- position: absolute;
9346
- top: 50%;
9347
- right: 20px;
9348
- border-top: none;
9349
- border-right: none;
9350
- background-repeat: no-repeat;
9351
- background-position: center;
9352
- background-color: var(--el-color-primary);
9353
- 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;
9354
- mask-size: 100% 100%;
9355
- -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;
9356
- -webkit-mask-size: 100% 100%;
9357
- transform: translateY(-50%);
9358
- width: 12px;
9359
- height: 12px;
9360
- }
9361
-
9362
-
9363
- @media (prefers-color-scheme: dark) {
9364
- .select-container{
9365
- --el-text-color-regular: #f2f2f2;
9366
- --el-disable-color: #8D9095;
9367
- --el-fill-color-light: #262727;
9368
- }
9369
- }
9370
- `;
10630
+ onShowSelectDialogClick() {
10631
+ const defaultCSS = PopsCSS.panelComponents_Select;
9371
10632
  popsDOMUtils.on(this.$el.$container, "click", () => {
9372
10633
  if (this.isDisabled()) {
9373
10634
  return;
9374
10635
  }
9375
10636
  /** 当前已选中的值 */
9376
- const selectInfo = this.$data.selectInfo;
10637
+ const selectInfo = this.$data.selectedDataList;
9377
10638
  const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9378
10639
  const dialogCloseCallback = () => {
9379
- this.$data.selectInfo = [...selectInfo];
9380
- this.updateSelectTagItem();
10640
+ this.$data.selectedDataList = [...selectInfo];
10641
+ this.updateTagItem();
9381
10642
  this.$el.$selectContainer = null;
9382
10643
  this.$el.$container.removeAttribute(this.$data.rotateKey);
9383
10644
  };
@@ -9388,9 +10649,7 @@ System.register('pops', [], (function (exports) {
9388
10649
  position: "center",
9389
10650
  },
9390
10651
  content: {
9391
- text: /*html*/ `
9392
- <ul class="select-container"></ul>
9393
- `,
10652
+ text: /*html*/ `<ul class="select-container"></ul>`,
9394
10653
  html: true,
9395
10654
  },
9396
10655
  btn: {
@@ -9418,7 +10677,7 @@ System.register('pops', [], (function (exports) {
9418
10677
  drag: true,
9419
10678
  dragLimit: true,
9420
10679
  width: "300px",
9421
- height: "300px",
10680
+ height: "auto",
9422
10681
  style: /*css*/ `
9423
10682
  ${defaultCSS}
9424
10683
 
@@ -9433,18 +10692,18 @@ System.register('pops', [], (function (exports) {
9433
10692
  // 添加到confirm中
9434
10693
  $selectContainer.appendChild($select);
9435
10694
  // 设置每一项的点击事件
9436
- this.setSelectElementClickEvent(selectInfo, $select);
10695
+ this.onSelectItemClick(selectInfo, $select);
9437
10696
  });
9438
10697
  this.$el.$selectContainer = $selectContainer;
9439
10698
  // 动态更新禁用状态
9440
- this.updateSelectItem();
10699
+ this.updateAllSelectItems();
9441
10700
  });
9442
10701
  },
9443
10702
  /**
9444
10703
  * 设置关闭图标的点击事件
9445
10704
  * @param data 选中的信息
9446
10705
  */
9447
- setSelectedItemCloseIconClickEvent(data) {
10706
+ onSelectItemCloseIconClick(data) {
9448
10707
  popsDOMUtils.on(data.$closeIcon, "click", (event) => {
9449
10708
  popsDOMUtils.preventEvent(event);
9450
10709
  if (this.isDisabled()) {
@@ -9471,7 +10730,9 @@ System.register('pops', [], (function (exports) {
9471
10730
  });
9472
10731
  },
9473
10732
  /**
9474
- * 检测tag是否为空，为空显示placeholder
10733
+ * 检测tag是否为空
10734
+ *
10735
+ * 如果为空则显示placeholder
9475
10736
  */
9476
10737
  checkTagEmpty() {
9477
10738
  if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
@@ -9496,14 +10757,14 @@ System.register('pops', [], (function (exports) {
9496
10757
  * + false 不触发值改变的回调
9497
10758
  */
9498
10759
  removeSelectedInfo(data, triggerValueChangeCallBack = true) {
9499
- for (let index = 0; index < this.$data.selectInfo.length; index++) {
9500
- const selectInfo = this.$data.selectInfo[index];
10760
+ for (let index = 0; index < this.$data.selectedDataList.length; index++) {
10761
+ const selectInfo = this.$data.selectedDataList[index];
9501
10762
  if (selectInfo.value === data.value) {
9502
- this.$data.selectInfo.splice(index, 1);
10763
+ this.$data.selectedDataList.splice(index, 1);
9503
10764
  break;
9504
10765
  }
9505
10766
  }
9506
- triggerValueChangeCallBack && this.selectValueChangeCallBack();
10767
+ triggerValueChangeCallBack && this.onValueChange();
9507
10768
  },
9508
10769
  /** 显示输入框 */
9509
10770
  showInputWrapper() {
@@ -9533,26 +10794,29 @@ System.register('pops', [], (function (exports) {
9533
10794
  * 禁用标签
9534
10795
  */
9535
10796
  disable() {
9536
- popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9537
- popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10797
+ popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
10798
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
9538
10799
  },
9539
10800
  /**
9540
10801
  * 判断是否被禁用
9541
10802
  */
9542
10803
  isDisabled() {
9543
- return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10804
+ return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable");
9544
10805
  },
9545
10806
  /**
9546
10807
  * 取消禁用标签
9547
10808
  */
9548
10809
  cancleDisable() {
9549
- popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9550
- popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
10810
+ popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
10811
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
9551
10812
  },
9552
10813
  };
9553
10814
  PopsPanelSelectMultiple.init();
9554
10815
  Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9555
- return $li;
10816
+ return {
10817
+ $el: $li,
10818
+ handler: PopsPanelSelectMultiple,
10819
+ };
9556
10820
  },
9557
10821
  /**
9558
10822
  * type ==> button
@@ -9593,7 +10857,7 @@ System.register('pops', [], (function (exports) {
9593
10857
  init() {
9594
10858
  this.$ele.panelButton.appendChild(this.$ele.button);
9595
10859
  this.initButton();
9596
- this.setClickEvent();
10860
+ this.onButtonClick();
9597
10861
  },
9598
10862
  initButton() {
9599
10863
  if (typeof viewConfig.buttonIcon === "string" && viewConfig.buttonIcon.trim() !== "") {
@@ -9690,7 +10954,10 @@ System.register('pops', [], (function (exports) {
9690
10954
  setButtonText(text) {
9691
10955
  PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
9692
10956
  },
9693
- setClickEvent() {
10957
+ /**
10958
+ * 设置按钮的点击事件
10959
+ */
10960
+ onButtonClick() {
9694
10961
  popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
9695
10962
  if (typeof viewConfig.callback === "function") {
9696
10963
  viewConfig.callback(event);
@@ -9700,7 +10967,10 @@ System.register('pops', [], (function (exports) {
9700
10967
  };
9701
10968
  PopsPanelButton.init();
9702
10969
  Reflect.set($li, "data-button", PopsPanelButton);
9703
- return $li;
10970
+ return {
10971
+ $el: $li,
10972
+ handler: PopsPanelButton,
10973
+ };
9704
10974
  },
9705
10975
  /**
9706
10976
  * type ==> deepMenu
@@ -9747,7 +11017,7 @@ System.register('pops', [], (function (exports) {
9747
11017
  },
9748
11018
  },
9749
11019
  init() {
9750
- this.setLiClickEvent();
11020
+ this.onLiClick();
9751
11021
  },
9752
11022
  /**
9753
11023
  * 生成配置每一项的元素
@@ -9956,7 +11226,7 @@ System.register('pops', [], (function (exports) {
9956
11226
  that.triggerRenderRightContainer($deepMenuSection);
9957
11227
  },
9958
11228
  /** 设置项的点击事件 */
9959
- setLiClickEvent() {
11229
+ onLiClick() {
9960
11230
  popsDOMUtils.on($li, "click", void 0, async (event) => {
9961
11231
  if (typeof viewConfig.clickCallBack === "function") {
9962
11232
  const result = await viewConfig.clickCallBack(event, viewConfig);
@@ -9970,7 +11240,10 @@ System.register('pops', [], (function (exports) {
9970
11240
  };
9971
11241
  PopsPanelDeepMenu.init();
9972
11242
  Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9973
- return $li;
11243
+ return {
11244
+ $el: $li,
11245
+ handler: PopsPanelDeepMenu,
11246
+ };
9974
11247
  },
9975
11248
  /**
9976
11249
  * type ===> own
@@ -9983,8 +11256,10 @@ System.register('pops', [], (function (exports) {
9983
11256
  this.setElementClassName($li, viewConfig.className);
9984
11257
  this.setElementAttributes($li, viewConfig.attributes);
9985
11258
  this.setElementProps($li, viewConfig.props);
9986
- $li = viewConfig.getLiElementCallBack($li);
9987
- return $li;
11259
+ $li = viewConfig.createLIElement($li);
11260
+ return {
11261
+ $el: $li,
11262
+ };
9988
11263
  },
9989
11264
  /**
9990
11265
  * 获取中间容器的元素<li>
@@ -9997,7 +11272,7 @@ System.register('pops', [], (function (exports) {
9997
11272
  return this.createSectionContainerItem_switch(viewConfig);
9998
11273
  }
9999
11274
  else if (componentType === "slider") {
10000
- return this.createSectionContainerItem_slider_new(viewConfig);
11275
+ return this.createSectionContainerItem_slider(viewConfig);
10001
11276
  }
10002
11277
  else if (componentType === "input") {
10003
11278
  return this.createSectionContainerItem_input(viewConfig);
@@ -10123,14 +11398,14 @@ System.register('pops', [], (function (exports) {
10123
11398
  * @param containerOptions
10124
11399
  */
10125
11400
  uListContainerAddItem(viewConfig, containerOptions) {
10126
- const itemLiElement = this.createSectionContainerItem(viewConfig);
10127
- if (itemLiElement) {
10128
- containerOptions["ulElement"].appendChild(itemLiElement);
11401
+ const itemInfo = this.createSectionContainerItem(viewConfig);
11402
+ if (itemInfo) {
11403
+ containerOptions["ulElement"].appendChild(itemInfo.$el);
10129
11404
  }
10130
11405
  if (typeof viewConfig.afterAddToUListCallBack === "function") {
10131
11406
  viewConfig.afterAddToUListCallBack(viewConfig, {
10132
11407
  ...containerOptions,
10133
- target: itemLiElement,
11408
+ target: itemInfo?.$el,
10134
11409
  });
10135
11410
  }
10136
11411
  },
@@ -10139,7 +11414,7 @@ System.register('pops', [], (function (exports) {
10139
11414
  * @param $asideItem 左侧的容器<li>元素
10140
11415
  * @param asideConfig 配置
10141
11416
  */
10142
- setAsideItemClickEvent($asideItem, asideConfig) {
11417
+ onAsideItemClick($asideItem, asideConfig) {
10143
11418
  popsDOMUtils.on($asideItem, "click", async (event) => {
10144
11419
  if (typeof asideConfig.clickFirstCallback === "function") {
10145
11420
  const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
@@ -11322,6 +12597,13 @@ System.register('pops', [], (function (exports) {
11322
12597
  });
11323
12598
  $shadowRoot.appendChild($css);
11324
12599
  }
12600
+ /**
12601
+ * 监听器的默认配置
12602
+ */
12603
+ const defaultListenerOption = {
12604
+ capture: true,
12605
+ passive: true,
12606
+ };
11325
12607
  const SearchSuggestion = {
11326
12608
  /**
11327
12609
  * 当前的环境，可以是document，可以是shadowroot，默认是document
@@ -11673,29 +12955,16 @@ System.register('pops', [], (function (exports) {
11673
12955
  },
11674
12956
  /**
11675
12957
  * 设置搜索建议框每一项的选中事件
11676
- * @param liElement
12958
+ * @param $li 每一项元素
11677
12959
  */
11678
12960
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
11679
- setSearchItemSelectEvent(liElement) {
11680
- // popsDOMUtils.on(
11681
- // liElement,
11682
- // "keyup",
11683
- // void 0,
11684
- // (event) => {
11685
- // let value = liElement["data-value"];
11686
- // config.selectCallBack(event, liElement, value);
11687
- // },
11688
- // {
11689
- // capture: true,
11690
- // }
11691
- // );
12961
+ setSearchItemSelectEvent($li) {
12962
+ // TODO
11692
12963
  },
11693
12964
  /**
11694
12965
  * 监听输入框内容改变
11695
12966
  */
11696
- setInputChangeEvent(option = {
11697
- capture: true,
11698
- }) {
12967
+ setInputChangeEvent(option = defaultListenerOption) {
11699
12968
  // 必须是input或者textarea才有input事件
11700
12969
  if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
11701
12970
  return;
@@ -11704,9 +12973,7 @@ System.register('pops', [], (function (exports) {
11704
12973
  // 禁用输入框自动提示
11705
12974
  config.$inputTarget.setAttribute("autocomplete", "off");
11706
12975
  // 内容改变事件
11707
- const listenerHandler = popsDOMUtils.onInput(config.$inputTarget,
11708
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11709
- async (_event) => {
12976
+ const listenerHandler = popsDOMUtils.onInput(config.$inputTarget, async () => {
11710
12977
  const data = SearchSuggestion.getData();
11711
12978
  const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.$inputTarget.value, data, config);
11712
12979
  SearchSuggestion.update(queryDataResult);
@@ -11717,11 +12984,7 @@ System.register('pops', [], (function (exports) {
11717
12984
  /**
11718
12985
  * 移除输入框内容改变的监听
11719
12986
  */
11720
- removeInputChangeEvent(
11721
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11722
- option = {
11723
- capture: true,
11724
- }) {
12987
+ removeInputChangeEvent() {
11725
12988
  for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
11726
12989
  const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
11727
12990
  handler();
@@ -11749,10 +13012,7 @@ System.register('pops', [], (function (exports) {
11749
13012
  /**
11750
13013
  * 设置显示搜索建议框的事件
11751
13014
  */
11752
- setShowEvent(option = {
11753
- capture: true,
11754
- passive: true,
11755
- }) {
13015
+ setShowEvent(option = defaultListenerOption) {
11756
13016
  /* 焦点|点击事件*/
11757
13017
  if (config.followPosition === "target") {
11758
13018
  popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
@@ -11770,10 +13030,7 @@ System.register('pops', [], (function (exports) {
11770
13030
  /**
11771
13031
  * 移除显示搜索建议框的事件
11772
13032
  */
11773
- removeShowEvent(option = {
11774
- capture: true,
11775
- passive: true,
11776
- }) {
13033
+ removeShowEvent(option = defaultListenerOption) {
11777
13034
  /* 焦点|点击事件*/
11778
13035
  popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
11779
13036
  // 内容改变事件
@@ -11803,10 +13060,7 @@ System.register('pops', [], (function (exports) {
11803
13060
  /**
11804
13061
  * 设置隐藏搜索建议框的事件
11805
13062
  */
11806
- setHideEvent(option = {
11807
- capture: true,
11808
- passive: true,
11809
- }) {
13063
+ setHideEvent(option = defaultListenerOption) {
11810
13064
  // 全局点击事件
11811
13065
  // 全局触摸屏点击事件
11812
13066
  if (Array.isArray(SearchSuggestion.selfDocument)) {
@@ -11821,10 +13075,7 @@ System.register('pops', [], (function (exports) {
11821
13075
  /**
11822
13076
  * 移除隐藏搜索建议框的事件
11823
13077
  */
11824
- removeHideEvent(option = {
11825
- capture: true,
11826
- passive: true,
11827
- }) {
13078
+ removeHideEvent(option = defaultListenerOption) {
11828
13079
  if (Array.isArray(SearchSuggestion.selfDocument)) {
11829
13080
  SearchSuggestion.selfDocument.forEach(($checkParent) => {
11830
13081
  popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
@@ -11837,10 +13088,7 @@ System.register('pops', [], (function (exports) {
11837
13088
  /**
11838
13089
  * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
11839
13090
  */
11840
- setAllEvent(option = {
11841
- capture: true,
11842
- passive: true,
11843
- }) {
13091
+ setAllEvent(option = defaultListenerOption) {
11844
13092
  SearchSuggestion.setInputChangeEvent(option);
11845
13093
  SearchSuggestion.setHideEvent(option);
11846
13094
  SearchSuggestion.setShowEvent(option);
@@ -11848,11 +13096,8 @@ System.register('pops', [], (function (exports) {
11848
13096
  /**
11849
13097
  * 移除所有监听
11850
13098
  */
11851
- removeAllEvent(option = {
11852
- capture: true,
11853
- passive: true,
11854
- }) {
11855
- SearchSuggestion.removeInputChangeEvent(option);
13099
+ removeAllEvent(option = defaultListenerOption) {
13100
+ SearchSuggestion.removeInputChangeEvent();
11856
13101
  SearchSuggestion.removeHideEvent(option);
11857
13102
  SearchSuggestion.removeShowEvent(option);
11858
13103
  },
@@ -12098,7 +13343,7 @@ System.register('pops', [], (function (exports) {
12098
13343
  },
12099
13344
  };
12100
13345
 
12101
- const version = "3.0.1";
13346
+ const version = "3.0.2";
12102
13347
 
12103
13348
  class Pops {
12104
13349
  /** 配置 */