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