@whitesev/pops 2.1.7 → 2.1.9

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 (52) hide show
  1. package/dist/index.amd.js +398 -111
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +398 -111
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +398 -111
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +398 -111
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +397 -110
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +398 -111
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +1 -0
  14. package/dist/types/src/components/panel/handlerComponents.d.ts +5 -1
  15. package/dist/types/src/components/panel/types/components-button.d.ts +3 -1
  16. package/dist/types/src/components/panel/types/components-deepMenu.d.ts +3 -1
  17. package/dist/types/src/components/panel/types/components-forms.d.ts +3 -1
  18. package/dist/types/src/components/panel/types/components-input.d.ts +3 -1
  19. package/dist/types/src/components/panel/types/components-select.d.ts +3 -1
  20. package/dist/types/src/components/panel/types/components-selectMultiple.d.ts +3 -1
  21. package/dist/types/src/components/panel/types/components-slider.d.ts +3 -1
  22. package/dist/types/src/components/panel/types/components-switch.d.ts +3 -1
  23. package/dist/types/src/components/panel/types/components-textarea.d.ts +3 -1
  24. package/dist/types/src/components/panel/types/index.d.ts +44 -19
  25. package/dist/types/src/handler/PopsHandler.d.ts +6 -3
  26. package/package.json +5 -5
  27. package/src/Pops.ts +1 -1
  28. package/src/components/alert/index.ts +30 -9
  29. package/src/components/confirm/index.ts +30 -9
  30. package/src/components/drawer/index.ts +30 -9
  31. package/src/components/folder/index.ts +29 -8
  32. package/src/components/iframe/index.ts +25 -7
  33. package/src/components/loading/index.ts +3 -1
  34. package/src/components/panel/config.ts +46 -0
  35. package/src/components/panel/handlerComponents.ts +92 -33
  36. package/src/components/panel/index.css +132 -73
  37. package/src/components/panel/index.ts +33 -11
  38. package/src/components/panel/types/components-button.ts +7 -3
  39. package/src/components/panel/types/components-deepMenu.ts +7 -3
  40. package/src/components/panel/types/components-forms.ts +7 -3
  41. package/src/components/panel/types/components-input.ts +7 -3
  42. package/src/components/panel/types/components-select.ts +7 -3
  43. package/src/components/panel/types/components-selectMultiple.ts +7 -3
  44. package/src/components/panel/types/components-slider.ts +7 -3
  45. package/src/components/panel/types/components-switch.ts +7 -3
  46. package/src/components/panel/types/components-textarea.ts +7 -3
  47. package/src/components/panel/types/index.ts +59 -27
  48. package/src/components/prompt/index.ts +29 -8
  49. package/src/components/rightClickMenu/index.ts +16 -4
  50. package/src/components/searchSuggestion/index.ts +12 -3
  51. package/src/components/tooltip/index.ts +16 -4
  52. package/src/handler/PopsHandler.ts +42 -11
package/dist/index.iife.js CHANGED
@@ -2274,7 +2274,7 @@ var pops = (function () {
2274
2274
 
2275
2275
  var folderCSS = ".pops-folder-list {\r\n\t--folder-arrow-fill-color: #d4d7de;\r\n\t--folder-arrow-active-fill-color: #06a7ff;\r\n\t--header-breadcrumb-text-color: #06a7ff;\r\n\t--header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n\t--header-breadcrumb-all-files-first-text-color: var(\r\n\t\t--header-breadcrumb-text-color\r\n\t);\r\n\t--header-breadcrumb-all-files-last-text-color: #999999;\r\n\t--table-header-row-text-color: #818999;\r\n\t--table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\t--table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\t--table-body-row-text-color: #05082c;\r\n\t--table-body-row-file-name-text-color: #05082c;\r\n\t--table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n\t--table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n\t--table-body-row-file-name-hover-text-color: #06a7ff;\r\n\t--table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: var(--table-header-row-text-color);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: var(--table-body-row-text-color);\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground-color: var(--table-body-row-hover-bg-color);\r\n\tborder-color: var(--table-body-row-hover-bd-color);\r\n\tborder: 0;\r\n\toutline: none;\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid var(--table-body-td-text-color);\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n\tflex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n\tcolor: 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\ttext-decoration: none;\r\n\tcolor: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: var(--table-body-row-content-text-color);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tflex: 1;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\tmin-height: 17px;\r\n\tflex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n\tdisplay: inline-flex;\r\n\tmargin-left: 4px;\r\n\tflex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tfill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n\tpadding: 4px 20px;\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-box-pack: start;\r\n\t-webkit-justify-content: start;\r\n\t-ms-flex-pack: start;\r\n\tjustify-content: flex-start;\r\n\tmin-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n\tfont-size: 12px;\r\n\tcolor: var(--header-breadcrumb-all-files-text-color);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tfont-weight: 700;\r\n\tdisplay: inline-block;\r\n\tmax-width: 140px;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tword-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n\tcolor: 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\tfont-size: 14px;\r\n\tcolor: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n\tbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n\t\t55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"folder\"] {\r\n\t\t--pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--pops-bottom-btn-controls-border-color: rgb(\r\n\t\t\t73,\r\n\t\t\t83,\r\n\t\t\t102,\r\n\t\t\tvar(--pops-bg-opacity)\r\n\t\t);\r\n\t}\r\n\t.pops-folder-list {\r\n\t\t--header-breadcrumb-text-color: #06a7ff;\r\n\t\t--header-breadcrumb-all-files-text-color: var(\r\n\t\t\t--header-breadcrumb-text-color\r\n\t\t);\r\n\t\t--header-breadcrumb-all-files-first-text-color: var(\r\n\t\t\t--header-breadcrumb-text-color\r\n\t\t);\r\n\t\t--header-breadcrumb-all-files-last-text-color: #818999;\r\n\t\t--table-body-row-text-color: #f7f8fa;\r\n\t\t--table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--table-body-td-text-color: #495366;\r\n\t\t--table-body-row-hover-bd-color: #1f2022;\r\n\t\t--table-body-row-hover-bg-color: #1f2022;\r\n\t\t--table-body-row-file-name-text-color: #f7f8fa;\r\n\t}\r\n}\r\n";
2276
2276
 
2277
- var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333333;\r\n\t--title-bg-color: #ffffff;\r\n\t--aside-bg-color: #ffffff;\r\n\t--aside-hover-color: rgb(64, 158, 255);\r\n\t--aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: 20px;\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\r\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t229,\r\n\t\t229,\r\n\t\t229,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n\t--pops-panel-components-input-text-color: #000000;\r\n\t--pops-panel-components-input-text-bg-color: transparent;\r\n\t--pops-panel-components-input-bd-color: #dcdfe6;\r\n\t--pops-panel-components-input-bg-color: #ffffff;\r\n\t--pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n\r\n\t--pops-panel-components-textarea-text-color: #000000;\r\n\t--pops-panel-components-textarea-text-bg-color: #ffffff;\r\n\t--pops-panel-components-textarea-bd-color: #dcdfe6;\r\n\t--pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n\r\n\t--pops-panel-components-select-text-color: #000000;\r\n\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t184,\r\n\t\t184,\r\n\t\t184,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-components-select-bg-color: rgb(\r\n\t\t255,\r\n\t\t255,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n\t--pops-panel-components-select-hover-bd-color: #c0c4cc;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tbackground: var(--title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\toverflow: auto;\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--aside-bg-color);\r\n\tborder-right: 1px solid var(--aside-bg-color);\r\n\tfont-size: 0.9em;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-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\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n\ttext-align: left;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n\toverflow: auto;\r\n\tflex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:hover {\r\n\tcolor: var(--aside-hover-color);\r\n\tbackground: var(--aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\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\ttext-align: left;\r\n}\r\nsection.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)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n\tborder: 0;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\nsection.pops-panel-container .pops-panel-item-left-main-text {\r\n\t/*line-height: 2;*/\r\n}\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 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\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tcolor: rgb(220, 223, 230);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: rgb(64, 158, 255);\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\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-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\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-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\tcursor: 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\ttransform: 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\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-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\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid var(--pops-panel-components-input-bd-color);\r\n\tborder-radius: 4px;\r\n\tbackground-color: var(--pops-panel-components-input-bg-color);\r\n\tposition: relative;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input:hover {\r\n\tborder: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tcolor: var(--pops-panel-components-input-text-color);\r\n\tbackground-color: var(--pops-panel-components-input-text-bg-color);\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: var(--pops-panel-components-input-suffix-color);\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tcolor: var(--pops-panel-components-textarea-text-color);\r\n\tbackground-color: var(--pops-panel-components-textarea-text-bg-color);\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: none;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tborder-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n\t--pops-panel-components-textarea-hover-bd-color: var(\r\n\t\t--pops-panel-components-textarea-bd-color\r\n\t);\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tborder-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\tborder: 0;\r\n}\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid var(--pops-panel-components-select-bd-color);\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tcolor: var(--pops-panel-components-select-text-color);\r\n\tbackground-color: var(--pops-panel-components-select-bg-color);\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\t--pops-panel-components-select-bd-color: var(\r\n\t\t--pops-panel-components-select-hover-bd-color\r\n\t);\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: 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\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: 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\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n\tdisplay: flex;\r\n\talign-items: baseline;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-bg-color: #000000;\r\n\t\t--pops-color: #f2f2f2;\r\n\t\t--title-bg-color: #000000;\r\n\t\t--aside-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t\t--pops-panel-forms-container-item-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n\t\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\r\n\t\t--pops-panel-components-input-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-input-bd-color: #4f5052;\r\n\t\t--pops-panel-components-input-bg-color: #141414;\r\n\t\t--pops-panel-components-input-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n\r\n\t\t--pops-panel-components-textarea-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-textarea-text-bg-color: #141414;\r\n\t\t--pops-panel-components-textarea-bd-color: #4f5052;\r\n\t\t--pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n\r\n\t\t--pops-panel-components-select-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--pops-panel-components-select-bg-color: #141414;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\t.pops-panel-deepMenu-container\r\n\t\t.pops-panel-deepMenu-container-left-arrow-icon {\r\n\t\tfill: #f2f2f2;\r\n\t}\r\n\r\n\t.pops-panel-select-multiple {\r\n\t\t--el-fill-color-blank: #141414;\r\n\t\t--el-border-color: #4c4d4f;\r\n\t\t--el-text-color-placeholder: #a8abb2;\r\n\t\t--el-select-input-color: #a8abb2;\r\n\t\t--el-text-color-regular: #606266;\r\n\t\t--el-color-info: #909399;\r\n\t\t--el-color-info-light-8: #e9e9eb;\r\n\t\t--el-color-primary-light-9: #ecf5ff;\r\n\t\t--el-color-primary-light-8: #d9ecff;\r\n\t\t--el-color-primary: #409eff;\r\n\t\t--el-color-white: #ffffff;\r\n\t}\r\n\t.pops-panel-select-multiple .el-tag {\r\n\t\t--el-color-info-light-9: #202121;\r\n\t}\r\n}\r\n";
2277
+ var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333333;\r\n\t--panel-title-bg-color: #ffffff;\r\n\r\n\t--panel-aside-bg-color: #ffffff;\r\n\t--panel-aside-hover-color: rgb(64, 158, 255);\r\n\t--panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: 20px;\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\r\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t229,\r\n\t\t229,\r\n\t\t229,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tbackground: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\toverflow: auto;\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--panel-aside-bg-color);\r\n\tborder-right: 1px solid var(--panel-aside-bg-color);\r\n\tfont-size: 0.9em;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: space-between;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-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\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n\ttext-align: left;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n\toverflow: auto;\r\n\tflex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-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\tcolor: var(--panel-aside-hover-color);\r\n\tbackground: var(--panel-aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\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\ttext-align: left;\r\n}\r\nsection.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)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n\tborder: 0;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 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\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--panel-switch-circle-color: #dcdfe6;\r\n\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--panel-switch-checked-circle-color: #409eff;\r\n\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n}\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 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\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid var(--panel-switch-core-bd-color);\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: var(--panel-switch-core-bg-color);\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tbackground-color: var(--panel-switch-circle-bg-color);\r\n\tcolor: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: var(--panel-switch-checked-core-bd-color);\r\n\tbackground-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\tleft: calc(100% - 17px);\r\n\tcolor: 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\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-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\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-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\tcursor: 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\ttransform: 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\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-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\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\r\n\t--pops-panel-components-input-text-color: #000000;\r\n\t--pops-panel-components-input-text-bg-color: transparent;\r\n\t--pops-panel-components-input-bd-color: #dcdfe6;\r\n\t--pops-panel-components-input-bg-color: #ffffff;\r\n\t--pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n}\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid var(--pops-panel-components-input-bd-color);\r\n\tborder-radius: 4px;\r\n\tbackground-color: var(--pops-panel-components-input-bg-color);\r\n\tposition: relative;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input:hover {\r\n\tborder: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tcolor: var(--pops-panel-components-input-text-color);\r\n\tbackground-color: var(--pops-panel-components-input-text-bg-color);\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: var(--pops-panel-components-input-suffix-color);\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n\t--pops-panel-components-textarea-text-color: #000000;\r\n\t--pops-panel-components-textarea-text-bg-color: #ffffff;\r\n\t--pops-panel-components-textarea-bd-color: #dcdfe6;\r\n\t--pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tcolor: var(--pops-panel-components-textarea-text-color);\r\n\tbackground-color: var(--pops-panel-components-textarea-text-bg-color);\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: none;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tborder-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n\t--pops-panel-components-textarea-hover-bd-color: var(\r\n\t\t--pops-panel-components-textarea-bd-color\r\n\t);\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tborder-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\t--pops-panel-components-select-text-color: #000000;\r\n\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t184,\r\n\t\t184,\r\n\t\t184,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-components-select-bg-color: rgb(\r\n\t\t255,\r\n\t\t255,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n\t--pops-panel-components-select-hover-bd-color: #c0c4cc;\r\n}\r\n.pops-panel-select {\r\n\tborder: 0;\r\n}\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid var(--pops-panel-components-select-bd-color);\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tcolor: var(--pops-panel-components-select-text-color);\r\n\tbackground-color: var(--pops-panel-components-select-bg-color);\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\t--pops-panel-components-select-bd-color: var(\r\n\t\t--pops-panel-components-select-hover-bd-color\r\n\t);\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: 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\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: 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\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n\tdisplay: flex;\r\n\talign-items: baseline;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-bg-color: #000000;\r\n\t\t--pops-color: #f2f2f2;\r\n\t\t--panel-title-bg-color: #000000;\r\n\t\t--panel-aside-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t\t--pops-panel-forms-container-item-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n\t\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\t.pops-panel-deepMenu-container\r\n\t\t.pops-panel-deepMenu-container-left-arrow-icon {\r\n\t\tfill: #f2f2f2;\r\n\t}\r\n\r\n\t/* switch的CSS */\r\n\t.pops-panel-switch {\r\n\t\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t\t--panel-switch-circle-color: #dcdfe6;\r\n\t\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t\t--panel-switch-checked-circle-color: #409eff;\r\n\t\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bg-opacity)\r\n\t\t);\r\n\t}\r\n\t/* select的CSS */\r\n\t.pops-panel-select {\r\n\t\t--pops-panel-components-select-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--pops-panel-components-select-bg-color: #141414;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t.pops-panel-select-multiple {\r\n\t\t--el-fill-color-blank: #141414;\r\n\t\t--el-border-color: #4c4d4f;\r\n\t\t--el-text-color-placeholder: #a8abb2;\r\n\t\t--el-select-input-color: #a8abb2;\r\n\t\t--el-text-color-regular: #606266;\r\n\t\t--el-color-info: #909399;\r\n\t\t--el-color-info-light-8: #e9e9eb;\r\n\t\t--el-color-primary-light-9: #ecf5ff;\r\n\t\t--el-color-primary-light-8: #d9ecff;\r\n\t\t--el-color-primary: #409eff;\r\n\t\t--el-color-white: #ffffff;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t.pops-panel-select-multiple .el-tag {\r\n\t\t--el-color-info-light-9: #202121;\r\n\t}\r\n\t/* slider的CSS */\r\n\t.pops-slider {\r\n\t\t--pops-slider-border-color-light: #414243;\r\n\t}\r\n\t/* input的CSS */\r\n\t.pops-panel-input {\r\n\t\t--pops-panel-components-input-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-input-bd-color: #4f5052;\r\n\t\t--pops-panel-components-input-bg-color: #141414;\r\n\t\t--pops-panel-components-input-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n\t}\r\n\t/* textarea的CSS */\r\n\t.pops-panel-textarea {\r\n\t\t--pops-panel-components-textarea-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-textarea-text-bg-color: #141414;\r\n\t\t--pops-panel-components-textarea-bd-color: #4f5052;\r\n\t\t--pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n\t}\r\n}\r\n";
2278
2278
 
2279
2279
  var rightClickMenuCSS = ".pops-rightClickMenu {\r\n\t--right-context-menu-shadow-color: #cacaca;\r\n\t--right-context-menu-row-visited-color: #dfdfdf;\r\n\t--right-context-menu-row-hover-color: #dfdfdf;\r\n}\r\n.pops-rightClickMenu * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tscrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n\tposition: fixed;\r\n\tz-index: 10000;\r\n\ttext-align: center;\r\n\tborder-radius: 3px;\r\n\tfont-size: 16px;\r\n\tfont-weight: 500;\r\n\tbackground: #fff;\r\n\tbox-shadow: 0px 1px 6px 1px var(--right-context-menu-shadow-color);\r\n}\r\n.pops-rightClickMenu-anim-grid {\r\n\tdisplay: grid;\r\n\ttransition: 0.3s;\r\n\tgrid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n\tgrid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n\tbackground: var(--right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n\tmargin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n\tbackground: var(--right-context-menu-row-hover-color);\r\n\tcursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: center;\r\n\toverflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n\tpadding: 5px 10px;\r\n\tmargin: 5px 5px;\r\n\tborder-radius: 3px;\r\n\tdisplay: flex;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\ttext-align: left;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\talign-items: center;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops-rightClickMenu {\r\n\t\t--right-context-menu-shadow-color: #3c3c3c;\r\n\t}\r\n}\r\n";
2280
2280
 
@@ -3437,26 +3437,51 @@ var pops = (function () {
3437
3437
  },
3438
3438
  /**
3439
3439
  * 处理初始化
3440
- * @param $shadowRoot 所在的shadowRoot
3441
- * @param cssText 添加进ShadowRoot的CSS
3440
+ * @param $styleParent style元素的父元素
3441
+ * @param css 添加进ShadowRoot的CSS
3442
3442
  */
3443
- handleInit($shadowRoot, cssText) {
3443
+ handleInit($styleParent, css) {
3444
3444
  PopsAnimation.init();
3445
3445
  if (!arguments.length) {
3446
3446
  return;
3447
3447
  }
3448
- if (Array.isArray(cssText)) {
3449
- for (let index = 0; index < cssText.length; index++) {
3450
- this.handleInit($shadowRoot, cssText[index]);
3448
+ if ($styleParent == null) {
3449
+ return;
3450
+ }
3451
+ if (css == null) {
3452
+ return;
3453
+ }
3454
+ if (typeof css === "string") {
3455
+ if (css.trim() === "") {
3456
+ return;
3451
3457
  }
3458
+ css = [
3459
+ {
3460
+ css: css,
3461
+ },
3462
+ ];
3452
3463
  }
3453
3464
  else {
3454
- let $css = popsDOMUtils.createElement("style", {
3455
- innerHTML: cssText,
3456
- }, {
3465
+ css = css.map((item) => {
3466
+ if (typeof item === "string") {
3467
+ return {
3468
+ css: item,
3469
+ };
3470
+ }
3471
+ else {
3472
+ return item;
3473
+ }
3474
+ });
3475
+ }
3476
+ for (const cssItem of css) {
3477
+ let $css = popsDOMUtils.createElement("style", {}, {
3457
3478
  "data-type": "PopsHandler.handleInit",
3458
3479
  });
3459
- $shadowRoot.appendChild($css);
3480
+ $css.textContent = cssItem.css;
3481
+ if (typeof cssItem.name === "string") {
3482
+ $css.setAttribute("data-name", cssItem.name);
3483
+ }
3484
+ $styleParent.appendChild($css);
3460
3485
  }
3461
3486
  },
3462
3487
  /**
@@ -3920,13 +3945,34 @@ var pops = (function () {
3920
3945
  config = PopsHandler.handleOnly(PopsType, config);
3921
3946
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
3922
3947
  PopsHandler.handleInit($shadowRoot, [
3923
- PopsCSS.index,
3924
- PopsCSS.ninePalaceGridPosition,
3925
- PopsCSS.scrollbar,
3926
- PopsCSS.button,
3927
- PopsCSS.anim,
3928
- PopsCSS.common,
3929
- PopsCSS.alertCSS,
3948
+ {
3949
+ name: "index",
3950
+ css: PopsCSS.index,
3951
+ },
3952
+ {
3953
+ name: "ninePalaceGridPosition",
3954
+ css: PopsCSS.ninePalaceGridPosition,
3955
+ },
3956
+ {
3957
+ name: "scrollbar",
3958
+ css: PopsCSS.scrollbar,
3959
+ },
3960
+ {
3961
+ name: "button",
3962
+ css: PopsCSS.button,
3963
+ },
3964
+ {
3965
+ name: "anim",
3966
+ css: PopsCSS.anim,
3967
+ },
3968
+ {
3969
+ name: "common",
3970
+ css: PopsCSS.common,
3971
+ },
3972
+ {
3973
+ name: "alertCSS",
3974
+ css: PopsCSS.alertCSS,
3975
+ },
3930
3976
  ]);
3931
3977
  // 先把z-index提取出来
3932
3978
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -3939,10 +3985,10 @@ var pops = (function () {
3939
3985
  /*html*/ `
3940
3986
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
3941
3987
  ? config.title.text
3942
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
3988
+ : `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
3943
3989
  <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${config.content.html
3944
3990
  ? config.content.text
3945
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
3991
+ : `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
3946
3992
  /**
3947
3993
  * 弹窗的主元素，包括动画层
3948
3994
  */
@@ -4103,13 +4149,34 @@ var pops = (function () {
4103
4149
  config = PopsHandler.handleOnly(PopsType, config);
4104
4150
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4105
4151
  PopsHandler.handleInit($shadowRoot, [
4106
- PopsCSS.index,
4107
- PopsCSS.ninePalaceGridPosition,
4108
- PopsCSS.scrollbar,
4109
- PopsCSS.button,
4110
- PopsCSS.anim,
4111
- PopsCSS.common,
4112
- PopsCSS.confirmCSS,
4152
+ {
4153
+ name: "index",
4154
+ css: PopsCSS.index,
4155
+ },
4156
+ {
4157
+ name: "ninePalaceGridPosition",
4158
+ css: PopsCSS.ninePalaceGridPosition,
4159
+ },
4160
+ {
4161
+ name: "scrollbar",
4162
+ css: PopsCSS.scrollbar,
4163
+ },
4164
+ {
4165
+ name: "button",
4166
+ css: PopsCSS.button,
4167
+ },
4168
+ {
4169
+ name: "anim",
4170
+ css: PopsCSS.anim,
4171
+ },
4172
+ {
4173
+ name: "common",
4174
+ css: PopsCSS.common,
4175
+ },
4176
+ {
4177
+ name: "confirmCSS",
4178
+ css: PopsCSS.confirmCSS,
4179
+ },
4113
4180
  ]);
4114
4181
  // 先把z-index提取出来
4115
4182
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -4122,10 +4189,10 @@ var pops = (function () {
4122
4189
  /*html*/ `
4123
4190
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4124
4191
  ? config.title.text
4125
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4192
+ : `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4126
4193
  <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${config.content.html
4127
4194
  ? config.content.text
4128
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
4195
+ : `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
4129
4196
  /**
4130
4197
  * 弹窗的主元素，包括动画层
4131
4198
  */
@@ -4291,13 +4358,34 @@ var pops = (function () {
4291
4358
  config = PopsHandler.handleOnly(PopsType, config);
4292
4359
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4293
4360
  PopsHandler.handleInit($shadowRoot, [
4294
- PopsCSS.index,
4295
- PopsCSS.ninePalaceGridPosition,
4296
- PopsCSS.scrollbar,
4297
- PopsCSS.button,
4298
- PopsCSS.anim,
4299
- PopsCSS.common,
4300
- PopsCSS.promptCSS,
4361
+ {
4362
+ name: "index",
4363
+ css: PopsCSS.index,
4364
+ },
4365
+ {
4366
+ name: "ninePalaceGridPosition",
4367
+ css: PopsCSS.ninePalaceGridPosition,
4368
+ },
4369
+ {
4370
+ name: "scrollbar",
4371
+ css: PopsCSS.scrollbar,
4372
+ },
4373
+ {
4374
+ name: "button",
4375
+ css: PopsCSS.button,
4376
+ },
4377
+ {
4378
+ name: "anim",
4379
+ css: PopsCSS.anim,
4380
+ },
4381
+ {
4382
+ name: "common",
4383
+ css: PopsCSS.common,
4384
+ },
4385
+ {
4386
+ name: "promptCSS",
4387
+ css: PopsCSS.promptCSS,
4388
+ },
4301
4389
  ]);
4302
4390
  // 先把z-index提取出来
4303
4391
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -4310,7 +4398,7 @@ var pops = (function () {
4310
4398
  /*html*/ `
4311
4399
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4312
4400
  ? config.title.text
4313
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4401
+ : `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4314
4402
  <div class="pops-content pops-${PopsType}-content" style="${contentPStyle}">${config.content.row
4315
4403
  ? '<textarea name="pops-input-text" pops="" placeholder="' +
4316
4404
  config.content.placeholder +
@@ -4445,7 +4533,7 @@ var pops = (function () {
4445
4533
  ${PopsCSS.loadingCSS}
4446
4534
  </style>
4447
4535
  ${config.style != null ? `<style>${config.style}</style>` : ""}
4448
- <p pops style="${contentPStyle}">${config.content.text}</p>
4536
+ <p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
4449
4537
  </div>`, "", zIndex);
4450
4538
  /**
4451
4539
  * 弹窗的主元素，包括动画层
@@ -4566,12 +4654,30 @@ var pops = (function () {
4566
4654
  config = PopsHandler.handleOnly(PopsType, config);
4567
4655
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4568
4656
  PopsHandler.handleInit($shadowRoot, [
4569
- PopsCSS.index,
4570
- PopsCSS.ninePalaceGridPosition,
4571
- PopsCSS.scrollbar,
4572
- PopsCSS.anim,
4573
- PopsCSS.common,
4574
- PopsCSS.iframeCSS,
4657
+ {
4658
+ name: "index",
4659
+ css: PopsCSS.index,
4660
+ },
4661
+ {
4662
+ name: "ninePalaceGridPosition",
4663
+ css: PopsCSS.ninePalaceGridPosition,
4664
+ },
4665
+ {
4666
+ name: "scrollbar",
4667
+ css: PopsCSS.scrollbar,
4668
+ },
4669
+ {
4670
+ name: "anim",
4671
+ css: PopsCSS.anim,
4672
+ },
4673
+ {
4674
+ name: "common",
4675
+ css: PopsCSS.common,
4676
+ },
4677
+ {
4678
+ name: "iframeCSS",
4679
+ css: PopsCSS.iframeCSS,
4680
+ },
4575
4681
  ]);
4576
4682
  let maskExtraStyle =
4577
4683
  // @ts-ignore
@@ -4589,7 +4695,7 @@ var pops = (function () {
4589
4695
  /*html*/ `
4590
4696
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4591
4697
  ? titleText
4592
- : `<p pops style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
4698
+ : `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
4593
4699
  <div class="pops-content pops-${PopsType}-content">
4594
4700
  <div class="pops-${PopsType}-content-global-loading"></div>
4595
4701
  <iframe src="${config.url}" pops ${config.sandbox
@@ -4884,13 +4990,34 @@ var pops = (function () {
4884
4990
  config = PopsHandler.handleOnly(PopsType, config);
4885
4991
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4886
4992
  PopsHandler.handleInit($shadowRoot, [
4887
- PopsCSS.index,
4888
- PopsCSS.ninePalaceGridPosition,
4889
- PopsCSS.scrollbar,
4890
- PopsCSS.button,
4891
- PopsCSS.anim,
4892
- PopsCSS.common,
4893
- PopsCSS.drawerCSS,
4993
+ {
4994
+ name: "index",
4995
+ css: PopsCSS.index,
4996
+ },
4997
+ {
4998
+ name: "ninePalaceGridPosition",
4999
+ css: PopsCSS.ninePalaceGridPosition,
5000
+ },
5001
+ {
5002
+ name: "scrollbar",
5003
+ css: PopsCSS.scrollbar,
5004
+ },
5005
+ {
5006
+ name: "button",
5007
+ css: PopsCSS.button,
5008
+ },
5009
+ {
5010
+ name: "anim",
5011
+ css: PopsCSS.anim,
5012
+ },
5013
+ {
5014
+ name: "common",
5015
+ css: PopsCSS.common,
5016
+ },
5017
+ {
5018
+ name: "drawerCSS",
5019
+ css: PopsCSS.drawerCSS,
5020
+ },
4894
5021
  ]);
4895
5022
  // 先把z-index提取出来
4896
5023
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -4904,11 +5031,11 @@ var pops = (function () {
4904
5031
  ${config.title.enable
4905
5032
  ? /*html*/ `<div class="pops-title pops-${PopsType}-title" style="${headerStyle}">${config.title.html
4906
5033
  ? config.title.text
4907
- : /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
5034
+ : /*html*/ `<p pops class="pops-${PopsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
4908
5035
  : ""}
4909
5036
  <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${config.content.html
4910
5037
  ? config.content.text
4911
- : `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
5038
+ : `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
4912
5039
  /**
4913
5040
  * 弹窗的主元素，包括动画层
4914
5041
  */
@@ -5224,13 +5351,34 @@ var pops = (function () {
5224
5351
  config = PopsHandler.handleOnly(PopsType, config);
5225
5352
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
5226
5353
  PopsHandler.handleInit($shadowRoot, [
5227
- PopsCSS.index,
5228
- PopsCSS.ninePalaceGridPosition,
5229
- PopsCSS.scrollbar,
5230
- PopsCSS.button,
5231
- PopsCSS.anim,
5232
- PopsCSS.common,
5233
- PopsCSS.folderCSS,
5354
+ {
5355
+ name: "index",
5356
+ css: PopsCSS.index,
5357
+ },
5358
+ {
5359
+ name: "ninePalaceGridPosition",
5360
+ css: PopsCSS.ninePalaceGridPosition,
5361
+ },
5362
+ {
5363
+ name: "scrollbar",
5364
+ css: PopsCSS.scrollbar,
5365
+ },
5366
+ {
5367
+ name: "button",
5368
+ css: PopsCSS.button,
5369
+ },
5370
+ {
5371
+ name: "anim",
5372
+ css: PopsCSS.anim,
5373
+ },
5374
+ {
5375
+ name: "common",
5376
+ css: PopsCSS.common,
5377
+ },
5378
+ {
5379
+ name: "folderCSS",
5380
+ css: PopsCSS.folderCSS,
5381
+ },
5234
5382
  ]);
5235
5383
  /* 办公几件套 */
5236
5384
  // @ts-ignore
@@ -5309,7 +5457,7 @@ var pops = (function () {
5309
5457
  /*html*/ `
5310
5458
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
5311
5459
  ? config.title.text
5312
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5460
+ : `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
5313
5461
  <div class="pops-content pops-${PopsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
5314
5462
  <div class="pops-folder-list">
5315
5463
  <div class="pops-folder-file-list-breadcrumb">
@@ -6407,6 +6555,44 @@ var pops = (function () {
6407
6555
  },
6408
6556
  ],
6409
6557
  },
6558
+ {
6559
+ id: "whitesev-panel-bottom-config-1",
6560
+ title: /*html*/ `
6561
+ <a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
6562
+ `,
6563
+ isBottom: true,
6564
+ disableAsideItemHoverCSS: true,
6565
+ attributes: [
6566
+ {
6567
+ "data-value": "value",
6568
+ "data-value-2": "value2",
6569
+ },
6570
+ ],
6571
+ // @ts-ignore
6572
+ props: {},
6573
+ forms: [],
6574
+ clickFirstCallback: function (event, rightHeaderElement, rightContainerElement) {
6575
+ return false;
6576
+ },
6577
+ },
6578
+ {
6579
+ id: "whitesev-panel-bottom-config-2",
6580
+ // @ts-ignore
6581
+ title: "版本：" + pops.config.version,
6582
+ isBottom: true,
6583
+ attributes: [
6584
+ {
6585
+ "data-value": "value",
6586
+ "data-value-2": "value2",
6587
+ },
6588
+ ],
6589
+ // @ts-ignore
6590
+ props: {},
6591
+ forms: [],
6592
+ clickFirstCallback: function (event, rightHeaderElement, rightContainerElement) {
6593
+ return false;
6594
+ },
6595
+ },
6410
6596
  ],
6411
6597
  btn: {
6412
6598
  close: {
@@ -7053,10 +7239,22 @@ var pops = (function () {
7053
7239
  config = PopsHandler.handleOnly(PopsType, config);
7054
7240
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
7055
7241
  PopsHandler.handleInit($shadowRoot, [
7056
- PopsCSS.index,
7057
- PopsCSS.anim,
7058
- PopsCSS.common,
7059
- PopsCSS.tooltipCSS,
7242
+ {
7243
+ name: "index",
7244
+ css: PopsCSS.index,
7245
+ },
7246
+ {
7247
+ name: "anim",
7248
+ css: PopsCSS.anim,
7249
+ },
7250
+ {
7251
+ name: "common",
7252
+ css: PopsCSS.common,
7253
+ },
7254
+ {
7255
+ name: "tooltipCSS",
7256
+ css: PopsCSS.tooltipCSS,
7257
+ },
7060
7258
  ]);
7061
7259
  let toolTip = new ToolTip(config, guid, {
7062
7260
  $shadowContainer,
@@ -7083,9 +7281,13 @@ var pops = (function () {
7083
7281
  const PanelHandlerComponents = () => {
7084
7282
  return {
7085
7283
  /**
7086
- * 左侧的ul容器
7284
+ * 左侧上方的的ul容器
7087
7285
  */
7088
7286
  asideULElement: null,
7287
+ /**
7288
+ * 左侧下方的ul容器
7289
+ */
7290
+ asideBottomULElement: null,
7089
7291
  /**
7090
7292
  * 右侧主内容的顶部文字ul容器
7091
7293
  */
@@ -7112,26 +7314,39 @@ var pops = (function () {
7112
7314
  * @param details
7113
7315
  */
7114
7316
  init(details) {
7317
+ const PopsType = "panel";
7115
7318
  this.$el = {
7116
7319
  ...details.$el,
7117
7320
  };
7118
7321
  this.asideULElement =
7119
- this.$el.$contentAside.querySelector("ul");
7322
+ this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-top-container`);
7323
+ this.asideBottomULElement =
7324
+ this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-bottom-container`);
7120
7325
  this.sectionContainerHeaderULElement =
7121
- this.$el.$contentSectionContainer.querySelectorAll("ul")[0];
7326
+ this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
7122
7327
  this.sectionContainerULElement =
7123
- this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
7328
+ this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-main-ul`);
7124
7329
  /**
7125
7330
  * 默认点击的左侧容器项
7126
7331
  */
7127
- let $asideDefaultItemElement = null;
7332
+ let $defaultAsideItem = null;
7128
7333
  /** 是否滚动到默认位置（第一个项） */
7129
7334
  let isScrollToDefaultView = false;
7335
+ // 初始化配置
7130
7336
  details.config.content.forEach((asideItemConfig) => {
7131
7337
  let $asideLiElement = this.createAsideItem(asideItemConfig);
7132
7338
  this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
7133
- this.asideULElement.appendChild($asideLiElement);
7134
- if ($asideDefaultItemElement == null) {
7339
+ // 是否处于底部
7340
+ let isBottom = typeof asideItemConfig.isBottom === "function"
7341
+ ? asideItemConfig.isBottom()
7342
+ : asideItemConfig.isBottom;
7343
+ if (isBottom) {
7344
+ this.asideBottomULElement.appendChild($asideLiElement);
7345
+ }
7346
+ else {
7347
+ this.asideULElement.appendChild($asideLiElement);
7348
+ }
7349
+ if ($defaultAsideItem == null) {
7135
7350
  let flag = false;
7136
7351
  if (typeof asideItemConfig.isDefault === "function") {
7137
7352
  flag = Boolean(asideItemConfig.isDefault());
@@ -7140,7 +7355,7 @@ var pops = (function () {
7140
7355
  flag = Boolean(asideItemConfig.isDefault);
7141
7356
  }
7142
7357
  if (flag) {
7143
- $asideDefaultItemElement = $asideLiElement;
7358
+ $defaultAsideItem = $asideLiElement;
7144
7359
  isScrollToDefaultView = Boolean(asideItemConfig.scrollToDefaultView);
7145
7360
  }
7146
7361
  }
@@ -7153,17 +7368,15 @@ var pops = (function () {
7153
7368
  }
7154
7369
  });
7155
7370
  /* 点击左侧列表 */
7156
- if ($asideDefaultItemElement == null &&
7157
- this.asideULElement.children.length) {
7371
+ if ($defaultAsideItem == null && this.asideULElement.children.length) {
7158
7372
  /* 默认第一个 */
7159
- $asideDefaultItemElement = this.asideULElement
7160
- .children[0];
7373
+ $defaultAsideItem = this.asideULElement.children[0];
7161
7374
  }
7162
- if ($asideDefaultItemElement) {
7375
+ if ($defaultAsideItem) {
7163
7376
  /* 点击选择的那一项 */
7164
- $asideDefaultItemElement.click();
7377
+ $defaultAsideItem.click();
7165
7378
  if (isScrollToDefaultView) {
7166
- $asideDefaultItemElement?.scrollIntoView();
7379
+ $defaultAsideItem?.scrollIntoView();
7167
7380
  }
7168
7381
  }
7169
7382
  else {
@@ -7268,11 +7481,26 @@ var pops = (function () {
7268
7481
  let $li = document.createElement("li");
7269
7482
  $li.id = asideConfig.id;
7270
7483
  Reflect.set($li, "__forms__", asideConfig.forms);
7271
- PopsSafeUtils.setSafeHTML($li, asideConfig.title);
7484
+ let title = typeof asideConfig.title === "function"
7485
+ ? asideConfig.title()
7486
+ : asideConfig.title;
7487
+ PopsSafeUtils.setSafeHTML($li, title);
7272
7488
  /* 处理className */
7273
7489
  this.setElementClassName($li, asideConfig.className);
7274
7490
  this.setElementAttributes($li, asideConfig.attributes);
7275
7491
  this.setElementProps($li, asideConfig.props);
7492
+ /** 禁用左侧项的hover的CSS样式的类名 */
7493
+ const disableAsideItemHoverCSSClassName = "pops-panel-disabled-aside-hover-css";
7494
+ /** 是否禁用左侧项的hover的CSS样式 */
7495
+ let disableAsideItemHoverCSS = typeof asideConfig.disableAsideItemHoverCSS === "function"
7496
+ ? asideConfig.disableAsideItemHoverCSS()
7497
+ : asideConfig.disableAsideItemHoverCSS;
7498
+ if (disableAsideItemHoverCSS) {
7499
+ $li.classList.add(disableAsideItemHoverCSSClassName);
7500
+ }
7501
+ else {
7502
+ $li.classList.remove(disableAsideItemHoverCSSClassName);
7503
+ }
7276
7504
  return $li;
7277
7505
  },
7278
7506
  /**
@@ -9686,16 +9914,28 @@ var pops = (function () {
9686
9914
  * @param asideConfig 配置
9687
9915
  */
9688
9916
  setAsideItemClickEvent(asideLiElement, asideConfig) {
9689
- const that = this;
9690
- popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
9917
+ popsDOMUtils.on(asideLiElement, "click", async (event) => {
9918
+ if (typeof asideConfig.clickFirstCallback === "function") {
9919
+ let clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
9920
+ if (typeof clickFirstCallbackResult === "boolean" &&
9921
+ !clickFirstCallbackResult) {
9922
+ return;
9923
+ }
9924
+ }
9691
9925
  this.clearContainer();
9692
9926
  let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
9693
- Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
9694
- popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
9927
+ Reflect.set(this.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
9928
+ popsDOMUtils.cssShow(this.$el.$contentSectionContainer);
9695
9929
  this.clearAsideItemIsVisited();
9696
9930
  this.setAsideItemIsVisited(asideLiElement);
9697
9931
  /* 顶部标题栏，存在就设置 */
9698
- let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
9932
+ let title = typeof asideConfig.title === "function"
9933
+ ? asideConfig.title()
9934
+ : asideConfig.title;
9935
+ let headerTitleText = typeof asideConfig.headerTitle === "function"
9936
+ ? asideConfig.headerTitle()
9937
+ : asideConfig.headerTitle;
9938
+ headerTitleText = headerTitleText ?? title;
9699
9939
  if (typeof headerTitleText === "string" &&
9700
9940
  headerTitleText.trim() !== "") {
9701
9941
  let $containerHeaderTitle = document.createElement("li");
@@ -9706,11 +9946,15 @@ var pops = (function () {
9706
9946
  rightContainerFormConfig.forEach((formConfig) => {
9707
9947
  this.createSectionContainerItem_forms(formConfig);
9708
9948
  });
9709
- if (typeof asideConfig.callback === "function") {
9949
+ if (typeof asideConfig.clickCallback === "function") {
9710
9950
  /* 执行回调 */
9711
- asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
9951
+ let asideClickCallbackResult = await asideConfig.clickCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
9952
+ if (typeof asideClickCallbackResult === "boolean" &&
9953
+ !asideClickCallbackResult) {
9954
+ return;
9955
+ }
9712
9956
  }
9713
- that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
9957
+ this.triggerRenderRightContainer(this.$el.$contentSectionContainer);
9714
9958
  });
9715
9959
  },
9716
9960
  };
@@ -9730,13 +9974,34 @@ var pops = (function () {
9730
9974
  config = PopsHandler.handleOnly(PopsType, config);
9731
9975
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
9732
9976
  PopsHandler.handleInit($shadowRoot, [
9733
- PopsCSS.index,
9734
- PopsCSS.ninePalaceGridPosition,
9735
- PopsCSS.scrollbar,
9736
- PopsCSS.button,
9737
- PopsCSS.anim,
9738
- PopsCSS.common,
9739
- PopsCSS.panelCSS,
9977
+ {
9978
+ name: "index",
9979
+ css: PopsCSS.index,
9980
+ },
9981
+ {
9982
+ name: "ninePalaceGridPosition",
9983
+ css: PopsCSS.ninePalaceGridPosition,
9984
+ },
9985
+ {
9986
+ name: "scrollbar",
9987
+ css: PopsCSS.scrollbar,
9988
+ },
9989
+ {
9990
+ name: "button",
9991
+ css: PopsCSS.button,
9992
+ },
9993
+ {
9994
+ name: "anim",
9995
+ css: PopsCSS.anim,
9996
+ },
9997
+ {
9998
+ name: "common",
9999
+ css: PopsCSS.common,
10000
+ },
10001
+ {
10002
+ name: "panelCSS",
10003
+ css: PopsCSS.panelCSS,
10004
+ },
9740
10005
  ]);
9741
10006
  // 先把z-index提取出来
9742
10007
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -9747,14 +10012,15 @@ var pops = (function () {
9747
10012
  /*html*/ `
9748
10013
  <div class="pops-title pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
9749
10014
  ? config.title.text
9750
- : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
10015
+ : `<p pops class="pops-${PopsType}-title-text" class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
9751
10016
  <div class="pops-content pops-${PopsType}-content">
9752
10017
  <aside class="pops-${PopsType}-aside">
9753
- <ul></ul>
10018
+ <ul class="pops-${PopsType}-aside-top-container"></ul>
10019
+ <ul class="pops-${PopsType}-aside-bottom-container"></ul>
9754
10020
  </aside>
9755
10021
  <section class="pops-${PopsType}-container">
9756
- <ul class="pops-panel-container-header-ul"></ul>
9757
- <ul></ul>
10022
+ <ul class="pops-${PopsType}-container-header-ul"></ul>
10023
+ <ul class="pops-${PopsType}-container-main-ul"></ul>
9758
10024
  </section>
9759
10025
  </div>`, "", zIndex);
9760
10026
  /**
@@ -9989,10 +10255,22 @@ var pops = (function () {
9989
10255
  }
9990
10256
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
9991
10257
  PopsHandler.handleInit($shadowRoot, [
9992
- PopsCSS.index,
9993
- PopsCSS.anim,
9994
- PopsCSS.common,
9995
- PopsCSS.rightClickMenu,
10258
+ {
10259
+ name: "index",
10260
+ css: PopsCSS.index,
10261
+ },
10262
+ {
10263
+ name: "anim",
10264
+ css: PopsCSS.anim,
10265
+ },
10266
+ {
10267
+ name: "common",
10268
+ css: PopsCSS.common,
10269
+ },
10270
+ {
10271
+ name: "rightClickMenu",
10272
+ css: PopsCSS.rightClickMenu,
10273
+ },
9996
10274
  ]);
9997
10275
  if (config.style != null) {
9998
10276
  let cssNode = popsDOMUtils.createElement("style", {
@@ -10558,9 +10836,18 @@ var pops = (function () {
10558
10836
  }
10559
10837
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
10560
10838
  PopsHandler.handleInit($shadowRoot, [
10561
- PopsCSS.index,
10562
- PopsCSS.anim,
10563
- PopsCSS.common,
10839
+ {
10840
+ name: "index",
10841
+ css: PopsCSS.index,
10842
+ },
10843
+ {
10844
+ name: "anim",
10845
+ css: PopsCSS.anim,
10846
+ },
10847
+ {
10848
+ name: "common",
10849
+ css: PopsCSS.common,
10850
+ },
10564
10851
  ]);
10565
10852
  if (config.style != null) {
10566
10853
  let cssNode = document.createElement("style");
@@ -11099,7 +11386,7 @@ var pops = (function () {
11099
11386
  /** 配置 */
11100
11387
  config = {
11101
11388
  /** 版本号 */
11102
- version: "2025.7.7",
11389
+ version: "2025.7.10",
11103
11390
  cssText: PopsCSS,
11104
11391
  /** icon图标的svg代码 */
11105
11392
  iconSVG: PopsIcon.$data,
@@ -11254,9 +11541,9 @@ var pops = (function () {
11254
11541
  return popsSearchSuggestion;
11255
11542
  };
11256
11543
  }
11257
- const pops = new Pops();
11544
+ const pops$1 = new Pops();
11258
11545
 
11259
- return pops;
11546
+ return pops$1;
11260
11547
 
11261
11548
  })();
11262
11549
  //# sourceMappingURL=index.iife.js.map