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