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