@whitesev/pops 2.1.2 → 2.1.4

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 (35) hide show
  1. package/dist/index.amd.js +183 -165
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +183 -165
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +183 -165
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +183 -165
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +183 -165
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +183 -165
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +24 -7
  14. package/dist/types/src/components/panel/PanelHandleContentDetails.d.ts +23 -15
  15. package/dist/types/src/components/panel/index.d.ts +16 -2
  16. package/dist/types/src/components/panel/indexType.d.ts +14 -0
  17. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +1 -1
  18. package/dist/types/src/types/button.d.ts +3 -2
  19. package/dist/types/src/types/event.d.ts +3 -2
  20. package/dist/types/src/types/global.d.ts +4 -4
  21. package/dist/types/src/types/main.d.ts +8 -0
  22. package/dist/types/src/types/mask.d.ts +8 -0
  23. package/package.json +9 -10
  24. package/src/Pops.ts +1 -1
  25. package/src/components/folder/index.css +1 -1
  26. package/src/components/panel/PanelHandleContentDetails.ts +270 -244
  27. package/src/components/panel/index.ts +20 -2
  28. package/src/components/panel/indexType.ts +16 -0
  29. package/src/types/PopsDOMUtilsEventType.d.ts +1 -1
  30. package/src/types/button.d.ts +3 -2
  31. package/src/types/event.d.ts +3 -2
  32. package/src/types/global.d.ts +4 -4
  33. package/src/types/main.d.ts +8 -0
  34. package/src/types/mask.d.ts +8 -0
  35. package/src/utils/PopsUtils.ts +1 -4
package/dist/index.umd.js CHANGED
@@ -333,8 +333,7 @@
333
333
  if (target === PopsCore.self) {
334
334
  return true;
335
335
  }
336
- if (typeof unsafeWindow !== "undefined" &&
337
- target === unsafeWindow) {
336
+ if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
338
337
  return true;
339
338
  }
340
339
  if (target?.Math?.toString() !== "[object Math]") {
@@ -2271,7 +2270,7 @@
2271
2270
 
2272
2271
  var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
2273
2272
 
2274
- var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\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: #05082c;\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: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\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: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\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-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\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: rgb(129, 137, 153);\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: 0;\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: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: rgb(6, 167, 255);\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: #333;\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: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: rgb(18, 22, 26);\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";
2273
+ var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\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: #05082c;\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: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\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: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\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-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\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: rgb(129, 137, 153);\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: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: rgb(6, 167, 255);\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: #333;\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: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: rgb(18, 22, 26);\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";
2275
2274
 
2276
2275
  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: #333;\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-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\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tbackground: var(--title-bg-color);\r\n}\r\n\r\n.pops[type-value=\"panel\"] .pops-panel-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-content: center;\r\n\talign-items: center;\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 rgb(229, 229, 229, var(--pops-bd-opacity));\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 #dcdfe6;\r\n\tborder-radius: 4px;\r\n\tbackground-color: #ffffff;\r\n\tposition: relative;\r\n}\r\n.pops-panel-input:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid #409eff;\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\tbackground-color: transparent;\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: #a8abb2;\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\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\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\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\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\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: 0 0 0 1px #dcdfe6 inset;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: none;\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\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\tbox-shadow: 0 0 0 1px #409eff inset;\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\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 rgb(184, 184, 184, var(--pops-bd-opacity));\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tbackground: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\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\t/* 左侧内容*/\r\n\t/* 左侧内容*/\r\n\t/* 右侧箭头图标*/\r\n\t/* 右侧箭头图标*/\r\n\t/* tag*/\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";
2277
2276
 
@@ -7081,6 +7080,8 @@
7081
7080
  * 元素
7082
7081
  */
7083
7082
  $el: {
7083
+ /** pops主元素 */
7084
+ $pops: null,
7084
7085
  /** 内容 */
7085
7086
  $content: null,
7086
7087
  /** 左侧容器 */
@@ -7093,8 +7094,6 @@
7093
7094
  * @param details
7094
7095
  */
7095
7096
  init(details) {
7096
- // @ts-ignore
7097
- this.$el = null;
7098
7097
  this.$el = {
7099
7098
  ...details.$el,
7100
7099
  };
@@ -7157,11 +7156,12 @@
7157
7156
  * 清空container容器的元素
7158
7157
  */
7159
7158
  clearContainer() {
7159
+ Reflect.deleteProperty(this.$el.$contentSectionContainer, "__formConfig__");
7160
7160
  PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
7161
7161
  PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
7162
7162
  this.$el.$content
7163
7163
  ?.querySelectorAll("section.pops-panel-deepMenu-container")
7164
- .forEach((ele) => ele.remove());
7164
+ .forEach(($el) => $el.remove());
7165
7165
  },
7166
7166
  /**
7167
7167
  * 清空左侧容器已访问记录
@@ -7169,8 +7169,8 @@
7169
7169
  clearAsideItemIsVisited() {
7170
7170
  this.$el.$contentAside
7171
7171
  .querySelectorAll(".pops-is-visited")
7172
- .forEach((element) => {
7173
- popsDOMUtils.removeClassName(element, "pops-is-visited");
7172
+ .forEach(($el) => {
7173
+ popsDOMUtils.removeClassName($el, "pops-is-visited");
7174
7174
  });
7175
7175
  },
7176
7176
  /**
@@ -7247,34 +7247,33 @@
7247
7247
  * @param asideConfig
7248
7248
  */
7249
7249
  createAsideItem(asideConfig) {
7250
- let liElement = document.createElement("li");
7251
- liElement.id = asideConfig.id;
7252
- // @ts-ignore
7253
- liElement["__forms__"] = asideConfig.forms;
7254
- PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
7250
+ let $li = document.createElement("li");
7251
+ $li.id = asideConfig.id;
7252
+ Reflect.set($li, "__forms__", asideConfig.forms);
7253
+ PopsSafeUtils.setSafeHTML($li, asideConfig.title);
7255
7254
  /* 处理className */
7256
- this.setElementClassName(liElement, asideConfig.className);
7257
- this.setElementAttributes(liElement, asideConfig.attributes);
7258
- this.setElementProps(liElement, asideConfig.props);
7259
- return liElement;
7255
+ this.setElementClassName($li, asideConfig.className);
7256
+ this.setElementAttributes($li, asideConfig.attributes);
7257
+ this.setElementProps($li, asideConfig.props);
7258
+ return $li;
7260
7259
  },
7261
7260
  /**
7262
- * 创建中间容器的元素<li>
7263
7261
  * type ==> switch
7262
+ * 创建中间容器的元素<li>
7264
7263
  * @param formConfig
7265
7264
  */
7266
7265
  createSectionContainerItem_switch(formConfig) {
7267
- let liElement = document.createElement("li");
7268
- liElement["__formConfig__"] = formConfig;
7269
- this.setElementClassName(liElement, formConfig.className);
7270
- this.setElementAttributes(liElement, formConfig.attributes);
7271
- this.setElementProps(liElement, formConfig.props);
7266
+ let $li = document.createElement("li");
7267
+ Reflect.set($li, "__formConfig__", formConfig);
7268
+ this.setElementClassName($li, formConfig.className);
7269
+ this.setElementAttributes($li, formConfig.attributes);
7270
+ this.setElementProps($li, formConfig.props);
7272
7271
  /* 左边底部的描述的文字 */
7273
7272
  let leftDescriptionText = "";
7274
7273
  if (Boolean(formConfig.description)) {
7275
7274
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7276
7275
  }
7277
- PopsSafeUtils.setSafeHTML(liElement,
7276
+ PopsSafeUtils.setSafeHTML($li,
7278
7277
  /*html*/ `
7279
7278
  <div class="pops-panel-item-left-text">
7280
7279
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7291,9 +7290,9 @@
7291
7290
  value: Boolean(formConfig.getValue()),
7292
7291
  },
7293
7292
  $ele: {
7294
- switch: liElement.querySelector(".pops-panel-switch"),
7295
- input: liElement.querySelector(".pops-panel-switch__input"),
7296
- core: liElement.querySelector(".pops-panel-switch__core"),
7293
+ switch: $li.querySelector(".pops-panel-switch"),
7294
+ input: $li.querySelector(".pops-panel-switch__input"),
7295
+ core: $li.querySelector(".pops-panel-switch__core"),
7297
7296
  },
7298
7297
  init() {
7299
7298
  this.setStatus(this.$data.value);
@@ -7355,26 +7354,26 @@
7355
7354
  },
7356
7355
  };
7357
7356
  PopsPanelSwitch.init();
7358
- liElement["data-switch"] = PopsPanelSwitch;
7359
- return liElement;
7357
+ Reflect.set($li, "data-switch", PopsPanelSwitch);
7358
+ return $li;
7360
7359
  },
7361
7360
  /**
7362
- * 获取中间容器的元素<li>
7363
7361
  * type ==> slider
7362
+ * 获取中间容器的元素<li>
7364
7363
  * @param formConfig
7365
7364
  */
7366
7365
  createSectionContainerItem_slider(formConfig) {
7367
- let liElement = document.createElement("li");
7368
- liElement["__formConfig__"] = formConfig;
7369
- this.setElementClassName(liElement, formConfig.className);
7370
- this.setElementAttributes(liElement, formConfig.attributes);
7371
- this.setElementProps(liElement, formConfig.props);
7366
+ let $li = document.createElement("li");
7367
+ Reflect.set($li, "__formConfig__", formConfig);
7368
+ this.setElementClassName($li, formConfig.className);
7369
+ this.setElementAttributes($li, formConfig.attributes);
7370
+ this.setElementProps($li, formConfig.props);
7372
7371
  /* 左边底部的描述的文字 */
7373
7372
  let leftDescriptionText = "";
7374
7373
  if (Boolean(formConfig.description)) {
7375
7374
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7376
7375
  }
7377
- PopsSafeUtils.setSafeHTML(liElement,
7376
+ PopsSafeUtils.setSafeHTML($li,
7378
7377
  /*html*/ `
7379
7378
  <div class="pops-panel-item-left-text">
7380
7379
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7382,11 +7381,11 @@
7382
7381
  <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7383
7382
  </div>
7384
7383
  `);
7385
- let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
7384
+ let $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7386
7385
  if (formConfig.step) {
7387
- rangeInputElement.setAttribute("step", formConfig.step.toString());
7386
+ $rangeInput.setAttribute("step", formConfig.step.toString());
7388
7387
  }
7389
- rangeInputElement.value = formConfig.getValue().toString();
7388
+ $rangeInput.value = formConfig.getValue().toString();
7390
7389
  /**
7391
7390
  * 获取提示的内容
7392
7391
  * @param value
@@ -7400,9 +7399,9 @@
7400
7399
  }
7401
7400
  };
7402
7401
  let tooltip = PopsTooltip.init({
7403
- target: rangeInputElement.parentElement,
7402
+ target: $rangeInput.parentElement,
7404
7403
  content: () => {
7405
- return getToolTipContent(rangeInputElement.value);
7404
+ return getToolTipContent($rangeInput.value);
7406
7405
  },
7407
7406
  zIndex: () => {
7408
7407
  return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
@@ -7413,32 +7412,31 @@
7413
7412
  position: "top",
7414
7413
  arrowDistance: 10,
7415
7414
  });
7416
- popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
7417
- tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
7415
+ popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7416
+ tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7418
7417
  if (typeof formConfig.callback === "function") {
7419
- formConfig.callback(event, event.target.value);
7418
+ formConfig.callback(event, $rangeInput.valueAsNumber);
7420
7419
  }
7421
7420
  });
7422
- return liElement;
7421
+ return $li;
7423
7422
  },
7424
7423
  /**
7425
- * 获取中间容器的元素<li>
7426
7424
  * type ==> slider
7425
+ * 获取中间容器的元素<li>
7427
7426
  * @param formConfig
7428
7427
  */
7429
7428
  createSectionContainerItem_slider_new(formConfig) {
7430
- let liElement = document.createElement("li");
7431
- // @ts-ignore
7432
- liElement["__formConfig__"] = formConfig;
7433
- this.setElementClassName(liElement, formConfig.className);
7434
- this.setElementAttributes(liElement, formConfig.attributes);
7435
- this.setElementProps(liElement, formConfig.props);
7429
+ let $li = document.createElement("li");
7430
+ Reflect.set($li, "__formConfig__", formConfig);
7431
+ this.setElementClassName($li, formConfig.className);
7432
+ this.setElementAttributes($li, formConfig.attributes);
7433
+ this.setElementProps($li, formConfig.props);
7436
7434
  /* 左边底部的描述的文字 */
7437
7435
  let leftDescriptionText = "";
7438
7436
  if (Boolean(formConfig.description)) {
7439
7437
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7440
7438
  }
7441
- PopsSafeUtils.setSafeHTML(liElement,
7439
+ PopsSafeUtils.setSafeHTML($li,
7442
7440
  /*html*/ `
7443
7441
  <div class="pops-panel-item-left-text" style="flex: 1;">
7444
7442
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7513,11 +7511,11 @@
7513
7511
  tooltip: null,
7514
7512
  },
7515
7513
  $ele: {
7516
- slider: liElement.querySelector(".pops-slider"),
7517
- runAway: liElement.querySelector(".pops-slider__runway"),
7518
- bar: liElement.querySelector(".pops-slider__bar"),
7519
- buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
7520
- button: liElement.querySelector(".pops-slider__button"),
7514
+ slider: $li.querySelector(".pops-slider"),
7515
+ runAway: $li.querySelector(".pops-slider__runway"),
7516
+ bar: $li.querySelector(".pops-slider__bar"),
7517
+ buttonWrapper: $li.querySelector(".pops-slider__button-wrapper"),
7518
+ button: $li.querySelector(".pops-slider__button"),
7521
7519
  },
7522
7520
  $interval: {
7523
7521
  isCheck: false,
@@ -7583,14 +7581,10 @@
7583
7581
  this.$ele.slider.setAttribute("data-max", this.max.toString());
7584
7582
  this.$ele.slider.setAttribute("data-value", this.value.toString());
7585
7583
  this.$ele.slider.setAttribute("data-step", this.step.toString());
7586
- // @ts-ignore
7587
- this.$ele.slider["data-min"] = this.min;
7588
- // @ts-ignore
7589
- this.$ele.slider["data-max"] = this.max;
7590
- // @ts-ignore
7591
- this.$ele.slider["data-value"] = this.value;
7592
- // @ts-ignore
7593
- this.$ele.slider["data-step"] = this.step;
7584
+ Reflect.set(this.$ele.slider, "data-min", this.min);
7585
+ Reflect.set(this.$ele.slider, "data-max", this.max);
7586
+ Reflect.set(this.$ele.slider, "data-value", this.value);
7587
+ Reflect.set(this.$ele.slider, "data-step", this.step);
7594
7588
  },
7595
7589
  /**
7596
7590
  * 初始化滑块的总长度的数据(px)
@@ -7610,7 +7604,7 @@
7610
7604
  let widthPx = 0;
7611
7605
  for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
7612
7606
  let value = this.formatValue(stepValue);
7613
- let info = {};
7607
+ let info;
7614
7608
  if (value === this.min) {
7615
7609
  /* 起始 */
7616
7610
  info = {
@@ -7653,7 +7647,7 @@
7653
7647
  let widthPx = 0;
7654
7648
  for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
7655
7649
  let value = this.formatValue(stepValue);
7656
- let info = {};
7650
+ let info;
7657
7651
  if (value === this.min) {
7658
7652
  /* 起始 */
7659
7653
  info = {
@@ -7811,7 +7805,7 @@
7811
7805
  event.target !== this.$ele.bar) {
7812
7806
  return;
7813
7807
  }
7814
- let clickX = parseFloat(event.offsetX);
7808
+ let clickX = parseFloat(event.offsetX.toString());
7815
7809
  this.dragStartCallBack();
7816
7810
  this.dragMoveCallBack(event, clickX, this.value);
7817
7811
  this.dragEndCallBack(clickX);
@@ -7964,7 +7958,7 @@
7964
7958
  return formConfig.getToolTipContent(PopsPanelSlider.value);
7965
7959
  }
7966
7960
  else {
7967
- return PopsPanelSlider.value;
7961
+ return PopsPanelSlider.value.toString();
7968
7962
  }
7969
7963
  }
7970
7964
  let tooltip = PopsTooltip.init({
@@ -8008,20 +8002,20 @@
8008
8002
  },
8009
8003
  };
8010
8004
  PopsPanelSlider.init();
8011
- liElement["data-slider"] = PopsPanelSlider;
8012
- return liElement;
8005
+ Reflect.set($li, "data-slider", PopsPanelSlider);
8006
+ return $li;
8013
8007
  },
8014
8008
  /**
8015
- * 获取中间容器的元素<li>
8016
8009
  * type ==> input
8010
+ * 获取中间容器的元素<li>
8017
8011
  * @param formConfig
8018
8012
  */
8019
8013
  createSectionContainerItem_input(formConfig) {
8020
- let liElement = document.createElement("li");
8021
- liElement["__formConfig__"] = formConfig;
8022
- this.setElementClassName(liElement, formConfig.className);
8023
- this.setElementAttributes(liElement, formConfig.attributes);
8024
- this.setElementProps(liElement, formConfig.props);
8014
+ let $li = document.createElement("li");
8015
+ Reflect.set($li, "__formConfig__", formConfig);
8016
+ this.setElementClassName($li, formConfig.className);
8017
+ this.setElementAttributes($li, formConfig.attributes);
8018
+ this.setElementProps($li, formConfig.props);
8025
8019
  let inputType = "text";
8026
8020
  if (formConfig.isPassword) {
8027
8021
  inputType = "password";
@@ -8034,7 +8028,7 @@
8034
8028
  if (Boolean(formConfig.description)) {
8035
8029
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8036
8030
  }
8037
- PopsSafeUtils.setSafeHTML(liElement,
8031
+ PopsSafeUtils.setSafeHTML($li,
8038
8032
  /*html*/ `
8039
8033
  <div class="pops-panel-item-left-text">
8040
8034
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8045,8 +8039,8 @@
8045
8039
  const PopsPanelInput = {
8046
8040
  [Symbol.toStringTag]: "PopsPanelInput",
8047
8041
  $ele: {
8048
- panelInput: liElement.querySelector(".pops-panel-input"),
8049
- input: liElement.querySelector("input"),
8042
+ panelInput: $li.querySelector(".pops-panel-input"),
8043
+ input: $li.querySelector("input"),
8050
8044
  inputSpanIcon: document.createElement("span"),
8051
8045
  inputSpanIconInner: null,
8052
8046
  icon: null,
@@ -8075,7 +8069,7 @@
8075
8069
  this.disable();
8076
8070
  }
8077
8071
  if (typeof formConfig.handlerCallBack === "function") {
8078
- formConfig.handlerCallBack(liElement, this.$ele.input);
8072
+ formConfig.handlerCallBack($li, this.$ele.input);
8079
8073
  }
8080
8074
  },
8081
8075
  /**
@@ -8210,26 +8204,26 @@
8210
8204
  },
8211
8205
  };
8212
8206
  PopsPanelInput.init();
8213
- liElement["data-input"] = PopsPanelInput;
8214
- return liElement;
8207
+ Reflect.set($li, "data-input", PopsPanelInput);
8208
+ return $li;
8215
8209
  },
8216
8210
  /**
8217
- * 获取中间容器的元素<li>
8218
8211
  * type ==> textarea
8212
+ * 获取中间容器的元素<li>
8219
8213
  * @param formConfig
8220
8214
  */
8221
8215
  createSectionContainerItem_textarea(formConfig) {
8222
- let liElement = document.createElement("li");
8223
- liElement["__formConfig__"] = formConfig;
8224
- this.setElementClassName(liElement, formConfig.className);
8225
- this.setElementAttributes(liElement, formConfig.attributes);
8226
- this.setElementProps(liElement, formConfig.props);
8216
+ let $li = document.createElement("li");
8217
+ Reflect.set($li, "__formConfig__", formConfig);
8218
+ this.setElementClassName($li, formConfig.className);
8219
+ this.setElementAttributes($li, formConfig.attributes);
8220
+ this.setElementProps($li, formConfig.props);
8227
8221
  /* 左边底部的描述的文字 */
8228
8222
  let leftDescriptionText = "";
8229
8223
  if (Boolean(formConfig.description)) {
8230
8224
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8231
8225
  }
8232
- PopsSafeUtils.setSafeHTML(liElement,
8226
+ PopsSafeUtils.setSafeHTML($li,
8233
8227
  /*html*/ `
8234
8228
  <div class="pops-panel-item-left-text">
8235
8229
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8240,8 +8234,8 @@
8240
8234
  const PopsPanelTextArea = {
8241
8235
  [Symbol.toStringTag]: "PopsPanelTextArea",
8242
8236
  $ele: {
8243
- panelTextarea: liElement.querySelector(".pops-panel-textarea"),
8244
- textarea: liElement.querySelector(".pops-panel-textarea textarea"),
8237
+ panelTextarea: $li.querySelector(".pops-panel-textarea"),
8238
+ textarea: $li.querySelector(".pops-panel-textarea textarea"),
8245
8239
  },
8246
8240
  $data: {
8247
8241
  value: formConfig.getValue(),
@@ -8273,35 +8267,36 @@
8273
8267
  */
8274
8268
  setChangeEvent() {
8275
8269
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
8276
- this.$data.value = event.target.value;
8270
+ let value = this.$ele.textarea.value;
8271
+ this.$data.value = value;
8277
8272
  if (typeof formConfig.callback === "function") {
8278
- formConfig.callback(event, event.target.value);
8273
+ formConfig.callback(event, value);
8279
8274
  }
8280
8275
  });
8281
8276
  },
8282
8277
  };
8283
8278
  PopsPanelTextArea.init();
8284
- liElement["data-textarea"] = PopsPanelTextArea;
8285
- return liElement;
8279
+ Reflect.set($li, "data-textarea", PopsPanelTextArea);
8280
+ return $li;
8286
8281
  },
8287
8282
  /**
8288
- * 获取中间容器的元素<li>
8289
8283
  * type ==> select
8284
+ * 获取中间容器的元素<li>
8290
8285
  * @param formConfig
8291
8286
  */
8292
8287
  createSectionContainerItem_select(formConfig) {
8293
8288
  const that = this;
8294
- let liElement = document.createElement("li");
8295
- liElement["__formConfig__"] = formConfig;
8296
- this.setElementClassName(liElement, formConfig.className);
8297
- this.setElementAttributes(liElement, formConfig.attributes);
8298
- this.setElementProps(liElement, formConfig.props);
8289
+ let $li = document.createElement("li");
8290
+ Reflect.set($li, "__formConfig__", formConfig);
8291
+ this.setElementClassName($li, formConfig.className);
8292
+ this.setElementAttributes($li, formConfig.attributes);
8293
+ this.setElementProps($li, formConfig.props);
8299
8294
  /* 左边底部的描述的文字 */
8300
8295
  let leftDescriptionText = "";
8301
8296
  if (Boolean(formConfig.description)) {
8302
8297
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8303
8298
  }
8304
- PopsSafeUtils.setSafeHTML(liElement,
8299
+ PopsSafeUtils.setSafeHTML($li,
8305
8300
  /*html*/ `
8306
8301
  <div class="pops-panel-item-left-text">
8307
8302
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8312,8 +8307,8 @@
8312
8307
  const PopsPanelSelect = {
8313
8308
  [Symbol.toStringTag]: "PopsPanelSelect",
8314
8309
  $ele: {
8315
- panelSelect: liElement.querySelector(".pops-panel-select"),
8316
- select: liElement.querySelector(".pops-panel-select select"),
8310
+ panelSelect: $li.querySelector(".pops-panel-select"),
8311
+ select: $li.querySelector(".pops-panel-select select"),
8317
8312
  },
8318
8313
  $eleKey: {
8319
8314
  disable: "__disable__",
@@ -8433,7 +8428,7 @@
8433
8428
  */
8434
8429
  setChangeEvent() {
8435
8430
  popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8436
- let $isSelectedElement = event.target[event.target.selectedIndex];
8431
+ let $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8437
8432
  let selectInfo = this.getSelectOptionInfo($isSelectedElement);
8438
8433
  this.setSelectOptionsDisableStatus();
8439
8434
  if (typeof formConfig.callback === "function") {
@@ -8446,9 +8441,9 @@
8446
8441
  /* 如果成功创建,加入到中间容器中 */
8447
8442
  let childUListClassName = "pops-panel-select-child-forms";
8448
8443
  // 移除旧的元素
8449
- while (liElement.nextElementSibling) {
8450
- if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
8451
- liElement.nextElementSibling.remove();
8444
+ while ($li.nextElementSibling) {
8445
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8446
+ $li.nextElementSibling.remove();
8452
8447
  }
8453
8448
  else {
8454
8449
  break;
@@ -8456,7 +8451,7 @@
8456
8451
  }
8457
8452
  let $childUList = document.createElement("ul");
8458
8453
  $childUList.className = childUListClassName;
8459
- popsDOMUtils.after(liElement, $childUList);
8454
+ popsDOMUtils.after($li, $childUList);
8460
8455
  that.uListContainerAddItem(formConfig, {
8461
8456
  ulElement: $childUList,
8462
8457
  });
@@ -8476,26 +8471,26 @@
8476
8471
  },
8477
8472
  };
8478
8473
  PopsPanelSelect.init();
8479
- Reflect.set(liElement, "data-select", PopsPanelSelect);
8480
- return liElement;
8474
+ Reflect.set($li, "data-select", PopsPanelSelect);
8475
+ return $li;
8481
8476
  },
8482
8477
  /**
8483
- * 获取中间容器的元素<li>
8484
8478
  * type ==> select-multiple
8479
+ * 获取中间容器的元素<li>
8485
8480
  * @param formConfig
8486
8481
  */
8487
8482
  createSectionContainerItem_select_multiple_new(formConfig) {
8488
- let liElement = document.createElement("li");
8489
- Reflect.set(liElement, "__formConfig__", formConfig);
8490
- this.setElementClassName(liElement, formConfig.className);
8491
- this.setElementAttributes(liElement, formConfig.attributes);
8492
- this.setElementProps(liElement, formConfig.props);
8483
+ let $li = document.createElement("li");
8484
+ Reflect.set($li, "__formConfig__", formConfig);
8485
+ this.setElementClassName($li, formConfig.className);
8486
+ this.setElementAttributes($li, formConfig.attributes);
8487
+ this.setElementProps($li, formConfig.props);
8493
8488
  /* 左边底部的描述的文字 */
8494
8489
  let leftDescriptionText = "";
8495
8490
  if (Boolean(formConfig.description)) {
8496
8491
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8497
8492
  }
8498
- PopsSafeUtils.setSafeHTML(liElement,
8493
+ PopsSafeUtils.setSafeHTML($li,
8499
8494
  /*html*/ `
8500
8495
  <div class="pops-panel-item-left-text">
8501
8496
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8570,15 +8565,14 @@
8570
8565
  },
8571
8566
  /** 初始化$el变量 */
8572
8567
  inintEl() {
8573
- this.$el.$container = liElement.querySelector(".pops-panel-select-multiple");
8574
- this.$el.$wrapper = liElement.querySelector(".el-select__wrapper");
8575
- this.$el.$section = liElement.querySelector(".el-select__selection");
8576
- this.$el.$selectedInputWrapper = liElement.querySelector(".el-select__selected-item.el-select__input-wrapper");
8577
- this.$el.$selectedPlaceHolderWrapper =
8578
- liElement.querySelector(".el-select__selected-item.el-select__placeholder");
8568
+ this.$el.$container = $li.querySelector(".pops-panel-select-multiple");
8569
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
8570
+ this.$el.$section = $li.querySelector(".el-select__selection");
8571
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
8572
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
8579
8573
  this.$el.$suffix =
8580
- liElement.querySelector(".el-select__suffix");
8581
- this.$el.$suffixIcon = liElement.querySelector(".el-select__suffix .el-icon");
8574
+ $li.querySelector(".el-select__suffix");
8575
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
8582
8576
  // 先把手动输入框隐藏
8583
8577
  this.hideInputWrapper();
8584
8578
  },
@@ -9136,26 +9130,26 @@
9136
9130
  },
9137
9131
  };
9138
9132
  PopsPanelSelectMultiple.init();
9139
- Reflect.set(liElement, "data-select-multiple", PopsPanelSelectMultiple);
9140
- return liElement;
9133
+ Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9134
+ return $li;
9141
9135
  },
9142
9136
  /**
9143
- * 获取中间容器的元素<li>
9144
9137
  * type ==> button
9138
+ * 获取中间容器的元素<li>
9145
9139
  * @param formConfig
9146
9140
  */
9147
9141
  createSectionContainerItem_button(formConfig) {
9148
- let liElement = document.createElement("li");
9149
- liElement["__formConfig__"] = formConfig;
9150
- this.setElementClassName(liElement, formConfig.className);
9151
- this.setElementAttributes(liElement, formConfig.attributes);
9152
- this.setElementProps(liElement, formConfig.props);
9142
+ let $li = document.createElement("li");
9143
+ Reflect.set($li, "__formConfig__", formConfig);
9144
+ this.setElementClassName($li, formConfig.className);
9145
+ this.setElementAttributes($li, formConfig.attributes);
9146
+ this.setElementProps($li, formConfig.props);
9153
9147
  /* 左边底部的描述的文字 */
9154
9148
  let leftDescriptionText = "";
9155
9149
  if (Boolean(formConfig.description)) {
9156
9150
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
9157
9151
  }
9158
- PopsSafeUtils.setSafeHTML(liElement,
9152
+ PopsSafeUtils.setSafeHTML($li,
9159
9153
  /*html*/ `
9160
9154
  <div class="pops-panel-item-left-text">
9161
9155
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -9169,10 +9163,10 @@
9169
9163
  const PopsPanelButton = {
9170
9164
  [Symbol.toStringTag]: "PopsPanelButton",
9171
9165
  $ele: {
9172
- panelButton: liElement.querySelector(".pops-panel-button"),
9173
- button: liElement.querySelector(".pops-panel-button .pops-panel-button_inner"),
9174
- icon: liElement.querySelector(".pops-panel-button .pops-bottom-icon"),
9175
- spanText: liElement.querySelector(".pops-panel-button .pops-panel-button-text"),
9166
+ panelButton: $li.querySelector(".pops-panel-button"),
9167
+ button: $li.querySelector(".pops-panel-button .pops-panel-button_inner"),
9168
+ icon: $li.querySelector(".pops-panel-button .pops-bottom-icon"),
9169
+ spanText: $li.querySelector(".pops-panel-button .pops-panel-button-text"),
9176
9170
  },
9177
9171
  $data: {},
9178
9172
  init() {
@@ -9285,10 +9279,11 @@
9285
9279
  },
9286
9280
  };
9287
9281
  PopsPanelButton.init();
9288
- liElement["data-button"] = PopsPanelButton;
9289
- return liElement;
9282
+ Reflect.set($li, "data-button", PopsPanelButton);
9283
+ return $li;
9290
9284
  },
9291
9285
  /**
9286
+ * type ==> deepMenu
9292
9287
  * 获取深层容器的元素<li>
9293
9288
  * @param formConfig
9294
9289
  */
@@ -9296,7 +9291,7 @@
9296
9291
  let that = this;
9297
9292
  let $li = document.createElement("li");
9298
9293
  $li.classList.add("pops-panel-deepMenu-nav-item");
9299
- $li["__formConfig__"] = formConfig;
9294
+ Reflect.set($li, "__formConfig__", formConfig);
9300
9295
  this.setElementClassName($li, formConfig.className);
9301
9296
  // 设置属性
9302
9297
  this.setElementAttributes($li, formConfig.attributes);
@@ -9432,6 +9427,7 @@
9432
9427
  let $deepMenuContainer = popsDOMUtils.createElement("section", {
9433
9428
  className: "pops-panel-container pops-panel-deepMenu-container",
9434
9429
  });
9430
+ Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
9435
9431
  let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
9436
9432
  className: "pops-panel-deepMenu-container-header-ul",
9437
9433
  });
@@ -9446,13 +9442,13 @@
9446
9442
  className: "pops-panel-deepMenu-container-left-arrow-icon",
9447
9443
  innerHTML: PopsIcon.getIcon("arrowLeft"),
9448
9444
  });
9449
- popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
9450
- event?.preventDefault();
9451
- event?.stopPropagation();
9445
+ popsDOMUtils.on($headerLeftArrow, "click", (event) => {
9446
+ popsDOMUtils.preventEvent(event);
9452
9447
  // 返回上一层菜单
9453
- let $prev = $deepMenuContainer.previousElementSibling;
9448
+ let $prev = ($deepMenuContainer.previousElementSibling);
9454
9449
  popsDOMUtils.cssShow($prev);
9455
9450
  $deepMenuContainer.remove();
9451
+ that.triggerRenderRightContainer($prev);
9456
9452
  }, {
9457
9453
  once: true,
9458
9454
  });
@@ -9475,6 +9471,7 @@
9475
9471
  sectionBodyContainer: $deepMenuBodyUL,
9476
9472
  });
9477
9473
  }
9474
+ that.triggerRenderRightContainer($deepMenuContainer);
9478
9475
  },
9479
9476
  /** 设置项的点击事件 */
9480
9477
  setLiClickEvent() {
@@ -9490,22 +9487,22 @@
9490
9487
  },
9491
9488
  };
9492
9489
  PopsPanelDeepMenu.init();
9493
- $li["data-deepMenu"] = PopsPanelDeepMenu;
9490
+ Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9494
9491
  return $li;
9495
9492
  },
9496
9493
  /**
9497
- * 获取中间容器的元素<li>
9498
9494
  * type ===> own
9495
+ * 获取中间容器的元素<li>
9499
9496
  * @param formConfig
9500
9497
  */
9501
9498
  createSectionContainerItem_own(formConfig) {
9502
- let liElement = document.createElement("li");
9503
- liElement["__formConfig__"] = formConfig;
9499
+ let $li = document.createElement("li");
9500
+ Reflect.set($li, "__formConfig__", formConfig);
9504
9501
  if (formConfig.className) {
9505
- liElement.className = formConfig.className;
9502
+ $li.className = formConfig.className;
9506
9503
  }
9507
- liElement = formConfig.getLiElementCallBack(liElement);
9508
- return liElement;
9504
+ $li = formConfig.getLiElementCallBack($li);
9505
+ return $li;
9509
9506
  },
9510
9507
  /**
9511
9508
  * 获取中间容器的元素<li>
@@ -9626,6 +9623,17 @@
9626
9623
  });
9627
9624
  }
9628
9625
  },
9626
+ /**
9627
+ * 触发触发渲染右侧容器的事件
9628
+ */
9629
+ triggerRenderRightContainer($container) {
9630
+ let __formConfig__ = Reflect.get($container, "__formConfig__");
9631
+ this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
9632
+ detail: {
9633
+ formConfig: __formConfig__,
9634
+ },
9635
+ }));
9636
+ },
9629
9637
  /**
9630
9638
  *
9631
9639
  * @param formConfig
@@ -9652,6 +9660,8 @@
9652
9660
  const that = this;
9653
9661
  popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
9654
9662
  this.clearContainer();
9663
+ let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
9664
+ Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
9655
9665
  popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
9656
9666
  this.clearAsideItemIsVisited();
9657
9667
  this.setAsideItemIsVisited(asideLiElement);
@@ -9659,20 +9669,19 @@
9659
9669
  let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
9660
9670
  if (typeof headerTitleText === "string" &&
9661
9671
  headerTitleText.trim() !== "") {
9662
- let containerHeaderTitleLIElement = document.createElement("li");
9663
- containerHeaderTitleLIElement["__asideConfig__"] =
9664
- asideConfig;
9665
- PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
9666
- this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
9667
- }
9668
- let __forms__ = asideLiElement["__forms__"];
9669
- __forms__.forEach((formConfig) => {
9672
+ let $containerHeaderTitle = document.createElement("li");
9673
+ Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
9674
+ PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
9675
+ this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
9676
+ }
9677
+ rightContainerFormConfig.forEach((formConfig) => {
9670
9678
  this.createSectionContainerItem_forms(formConfig);
9671
9679
  });
9672
9680
  if (typeof asideConfig.callback === "function") {
9673
9681
  /* 执行回调 */
9674
9682
  asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
9675
9683
  }
9684
+ that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
9676
9685
  });
9677
9686
  },
9678
9687
  };
@@ -9769,6 +9778,7 @@
9769
9778
  panelHandleContentDetails.init({
9770
9779
  config: config,
9771
9780
  $el: {
9781
+ $pops: $pops,
9772
9782
  $content: $content,
9773
9783
  $contentAside: $contentAside,
9774
9784
  $contentSectionContainer: $contentSectionContainer,
@@ -9793,7 +9803,15 @@
9793
9803
  });
9794
9804
  }
9795
9805
  let result = PopsHandler.handleResultDetails(eventDetails);
9796
- return result;
9806
+ return {
9807
+ ...result,
9808
+ addEventListener: (event, listener, options) => {
9809
+ $pops.addEventListener(event, listener, options);
9810
+ },
9811
+ removeEventListener: (event, listener, options) => {
9812
+ $pops.removeEventListener(event, listener, options);
9813
+ },
9814
+ };
9797
9815
  },
9798
9816
  };
9799
9817
 
@@ -11037,7 +11055,7 @@
11037
11055
  /** 配置 */
11038
11056
  config = {
11039
11057
  /** 版本号 */
11040
- version: "2025.6.12",
11058
+ version: "2025.6.25",
11041
11059
  cssText: PopsCSS,
11042
11060
  /** icon图标的svg代码 */
11043
11061
  iconSVG: PopsIcon.$data,