@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.iife.js CHANGED
@@ -330,8 +330,7 @@ var pops = (function () {
330
330
  if (target === PopsCore.self) {
331
331
  return true;
332
332
  }
333
- if (typeof unsafeWindow !== "undefined" &&
334
- target === unsafeWindow) {
333
+ if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
335
334
  return true;
336
335
  }
337
336
  if (target?.Math?.toString() !== "[object Math]") {
@@ -2268,7 +2267,7 @@ var pops = (function () {
2268
2267
 
2269
2268
  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";
2270
2269
 
2271
- 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";
2270
+ 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";
2272
2271
 
2273
2272
  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";
2274
2273
 
@@ -7078,6 +7077,8 @@ var pops = (function () {
7078
7077
  * 元素
7079
7078
  */
7080
7079
  $el: {
7080
+ /** pops主元素 */
7081
+ $pops: null,
7081
7082
  /** 内容 */
7082
7083
  $content: null,
7083
7084
  /** 左侧容器 */
@@ -7090,8 +7091,6 @@ var pops = (function () {
7090
7091
  * @param details
7091
7092
  */
7092
7093
  init(details) {
7093
- // @ts-ignore
7094
- this.$el = null;
7095
7094
  this.$el = {
7096
7095
  ...details.$el,
7097
7096
  };
@@ -7154,11 +7153,12 @@ var pops = (function () {
7154
7153
  * 清空container容器的元素
7155
7154
  */
7156
7155
  clearContainer() {
7156
+ Reflect.deleteProperty(this.$el.$contentSectionContainer, "__formConfig__");
7157
7157
  PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
7158
7158
  PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
7159
7159
  this.$el.$content
7160
7160
  ?.querySelectorAll("section.pops-panel-deepMenu-container")
7161
- .forEach((ele) => ele.remove());
7161
+ .forEach(($el) => $el.remove());
7162
7162
  },
7163
7163
  /**
7164
7164
  * 清空左侧容器已访问记录
@@ -7166,8 +7166,8 @@ var pops = (function () {
7166
7166
  clearAsideItemIsVisited() {
7167
7167
  this.$el.$contentAside
7168
7168
  .querySelectorAll(".pops-is-visited")
7169
- .forEach((element) => {
7170
- popsDOMUtils.removeClassName(element, "pops-is-visited");
7169
+ .forEach(($el) => {
7170
+ popsDOMUtils.removeClassName($el, "pops-is-visited");
7171
7171
  });
7172
7172
  },
7173
7173
  /**
@@ -7244,34 +7244,33 @@ var pops = (function () {
7244
7244
  * @param asideConfig
7245
7245
  */
7246
7246
  createAsideItem(asideConfig) {
7247
- let liElement = document.createElement("li");
7248
- liElement.id = asideConfig.id;
7249
- // @ts-ignore
7250
- liElement["__forms__"] = asideConfig.forms;
7251
- PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
7247
+ let $li = document.createElement("li");
7248
+ $li.id = asideConfig.id;
7249
+ Reflect.set($li, "__forms__", asideConfig.forms);
7250
+ PopsSafeUtils.setSafeHTML($li, asideConfig.title);
7252
7251
  /* 处理className */
7253
- this.setElementClassName(liElement, asideConfig.className);
7254
- this.setElementAttributes(liElement, asideConfig.attributes);
7255
- this.setElementProps(liElement, asideConfig.props);
7256
- return liElement;
7252
+ this.setElementClassName($li, asideConfig.className);
7253
+ this.setElementAttributes($li, asideConfig.attributes);
7254
+ this.setElementProps($li, asideConfig.props);
7255
+ return $li;
7257
7256
  },
7258
7257
  /**
7259
- * 创建中间容器的元素<li>
7260
7258
  * type ==> switch
7259
+ * 创建中间容器的元素<li>
7261
7260
  * @param formConfig
7262
7261
  */
7263
7262
  createSectionContainerItem_switch(formConfig) {
7264
- let liElement = document.createElement("li");
7265
- liElement["__formConfig__"] = formConfig;
7266
- this.setElementClassName(liElement, formConfig.className);
7267
- this.setElementAttributes(liElement, formConfig.attributes);
7268
- this.setElementProps(liElement, formConfig.props);
7263
+ let $li = document.createElement("li");
7264
+ Reflect.set($li, "__formConfig__", formConfig);
7265
+ this.setElementClassName($li, formConfig.className);
7266
+ this.setElementAttributes($li, formConfig.attributes);
7267
+ this.setElementProps($li, formConfig.props);
7269
7268
  /* 左边底部的描述的文字 */
7270
7269
  let leftDescriptionText = "";
7271
7270
  if (Boolean(formConfig.description)) {
7272
7271
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7273
7272
  }
7274
- PopsSafeUtils.setSafeHTML(liElement,
7273
+ PopsSafeUtils.setSafeHTML($li,
7275
7274
  /*html*/ `
7276
7275
  <div class="pops-panel-item-left-text">
7277
7276
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7288,9 +7287,9 @@ var pops = (function () {
7288
7287
  value: Boolean(formConfig.getValue()),
7289
7288
  },
7290
7289
  $ele: {
7291
- switch: liElement.querySelector(".pops-panel-switch"),
7292
- input: liElement.querySelector(".pops-panel-switch__input"),
7293
- core: liElement.querySelector(".pops-panel-switch__core"),
7290
+ switch: $li.querySelector(".pops-panel-switch"),
7291
+ input: $li.querySelector(".pops-panel-switch__input"),
7292
+ core: $li.querySelector(".pops-panel-switch__core"),
7294
7293
  },
7295
7294
  init() {
7296
7295
  this.setStatus(this.$data.value);
@@ -7352,26 +7351,26 @@ var pops = (function () {
7352
7351
  },
7353
7352
  };
7354
7353
  PopsPanelSwitch.init();
7355
- liElement["data-switch"] = PopsPanelSwitch;
7356
- return liElement;
7354
+ Reflect.set($li, "data-switch", PopsPanelSwitch);
7355
+ return $li;
7357
7356
  },
7358
7357
  /**
7359
- * 获取中间容器的元素<li>
7360
7358
  * type ==> slider
7359
+ * 获取中间容器的元素<li>
7361
7360
  * @param formConfig
7362
7361
  */
7363
7362
  createSectionContainerItem_slider(formConfig) {
7364
- let liElement = document.createElement("li");
7365
- liElement["__formConfig__"] = formConfig;
7366
- this.setElementClassName(liElement, formConfig.className);
7367
- this.setElementAttributes(liElement, formConfig.attributes);
7368
- this.setElementProps(liElement, formConfig.props);
7363
+ let $li = document.createElement("li");
7364
+ Reflect.set($li, "__formConfig__", formConfig);
7365
+ this.setElementClassName($li, formConfig.className);
7366
+ this.setElementAttributes($li, formConfig.attributes);
7367
+ this.setElementProps($li, formConfig.props);
7369
7368
  /* 左边底部的描述的文字 */
7370
7369
  let leftDescriptionText = "";
7371
7370
  if (Boolean(formConfig.description)) {
7372
7371
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7373
7372
  }
7374
- PopsSafeUtils.setSafeHTML(liElement,
7373
+ PopsSafeUtils.setSafeHTML($li,
7375
7374
  /*html*/ `
7376
7375
  <div class="pops-panel-item-left-text">
7377
7376
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7379,11 +7378,11 @@ var pops = (function () {
7379
7378
  <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7380
7379
  </div>
7381
7380
  `);
7382
- let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
7381
+ let $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7383
7382
  if (formConfig.step) {
7384
- rangeInputElement.setAttribute("step", formConfig.step.toString());
7383
+ $rangeInput.setAttribute("step", formConfig.step.toString());
7385
7384
  }
7386
- rangeInputElement.value = formConfig.getValue().toString();
7385
+ $rangeInput.value = formConfig.getValue().toString();
7387
7386
  /**
7388
7387
  * 获取提示的内容
7389
7388
  * @param value
@@ -7397,9 +7396,9 @@ var pops = (function () {
7397
7396
  }
7398
7397
  };
7399
7398
  let tooltip = PopsTooltip.init({
7400
- target: rangeInputElement.parentElement,
7399
+ target: $rangeInput.parentElement,
7401
7400
  content: () => {
7402
- return getToolTipContent(rangeInputElement.value);
7401
+ return getToolTipContent($rangeInput.value);
7403
7402
  },
7404
7403
  zIndex: () => {
7405
7404
  return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
@@ -7410,32 +7409,31 @@ var pops = (function () {
7410
7409
  position: "top",
7411
7410
  arrowDistance: 10,
7412
7411
  });
7413
- popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
7414
- tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
7412
+ popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7413
+ tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7415
7414
  if (typeof formConfig.callback === "function") {
7416
- formConfig.callback(event, event.target.value);
7415
+ formConfig.callback(event, $rangeInput.valueAsNumber);
7417
7416
  }
7418
7417
  });
7419
- return liElement;
7418
+ return $li;
7420
7419
  },
7421
7420
  /**
7422
- * 获取中间容器的元素<li>
7423
7421
  * type ==> slider
7422
+ * 获取中间容器的元素<li>
7424
7423
  * @param formConfig
7425
7424
  */
7426
7425
  createSectionContainerItem_slider_new(formConfig) {
7427
- let liElement = document.createElement("li");
7428
- // @ts-ignore
7429
- liElement["__formConfig__"] = formConfig;
7430
- this.setElementClassName(liElement, formConfig.className);
7431
- this.setElementAttributes(liElement, formConfig.attributes);
7432
- this.setElementProps(liElement, formConfig.props);
7426
+ let $li = document.createElement("li");
7427
+ Reflect.set($li, "__formConfig__", formConfig);
7428
+ this.setElementClassName($li, formConfig.className);
7429
+ this.setElementAttributes($li, formConfig.attributes);
7430
+ this.setElementProps($li, formConfig.props);
7433
7431
  /* 左边底部的描述的文字 */
7434
7432
  let leftDescriptionText = "";
7435
7433
  if (Boolean(formConfig.description)) {
7436
7434
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7437
7435
  }
7438
- PopsSafeUtils.setSafeHTML(liElement,
7436
+ PopsSafeUtils.setSafeHTML($li,
7439
7437
  /*html*/ `
7440
7438
  <div class="pops-panel-item-left-text" style="flex: 1;">
7441
7439
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7510,11 +7508,11 @@ var pops = (function () {
7510
7508
  tooltip: null,
7511
7509
  },
7512
7510
  $ele: {
7513
- slider: liElement.querySelector(".pops-slider"),
7514
- runAway: liElement.querySelector(".pops-slider__runway"),
7515
- bar: liElement.querySelector(".pops-slider__bar"),
7516
- buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
7517
- button: liElement.querySelector(".pops-slider__button"),
7511
+ slider: $li.querySelector(".pops-slider"),
7512
+ runAway: $li.querySelector(".pops-slider__runway"),
7513
+ bar: $li.querySelector(".pops-slider__bar"),
7514
+ buttonWrapper: $li.querySelector(".pops-slider__button-wrapper"),
7515
+ button: $li.querySelector(".pops-slider__button"),
7518
7516
  },
7519
7517
  $interval: {
7520
7518
  isCheck: false,
@@ -7580,14 +7578,10 @@ var pops = (function () {
7580
7578
  this.$ele.slider.setAttribute("data-max", this.max.toString());
7581
7579
  this.$ele.slider.setAttribute("data-value", this.value.toString());
7582
7580
  this.$ele.slider.setAttribute("data-step", this.step.toString());
7583
- // @ts-ignore
7584
- this.$ele.slider["data-min"] = this.min;
7585
- // @ts-ignore
7586
- this.$ele.slider["data-max"] = this.max;
7587
- // @ts-ignore
7588
- this.$ele.slider["data-value"] = this.value;
7589
- // @ts-ignore
7590
- this.$ele.slider["data-step"] = this.step;
7581
+ Reflect.set(this.$ele.slider, "data-min", this.min);
7582
+ Reflect.set(this.$ele.slider, "data-max", this.max);
7583
+ Reflect.set(this.$ele.slider, "data-value", this.value);
7584
+ Reflect.set(this.$ele.slider, "data-step", this.step);
7591
7585
  },
7592
7586
  /**
7593
7587
  * 初始化滑块的总长度的数据(px)
@@ -7607,7 +7601,7 @@ var pops = (function () {
7607
7601
  let widthPx = 0;
7608
7602
  for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
7609
7603
  let value = this.formatValue(stepValue);
7610
- let info = {};
7604
+ let info;
7611
7605
  if (value === this.min) {
7612
7606
  /* 起始 */
7613
7607
  info = {
@@ -7650,7 +7644,7 @@ var pops = (function () {
7650
7644
  let widthPx = 0;
7651
7645
  for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
7652
7646
  let value = this.formatValue(stepValue);
7653
- let info = {};
7647
+ let info;
7654
7648
  if (value === this.min) {
7655
7649
  /* 起始 */
7656
7650
  info = {
@@ -7808,7 +7802,7 @@ var pops = (function () {
7808
7802
  event.target !== this.$ele.bar) {
7809
7803
  return;
7810
7804
  }
7811
- let clickX = parseFloat(event.offsetX);
7805
+ let clickX = parseFloat(event.offsetX.toString());
7812
7806
  this.dragStartCallBack();
7813
7807
  this.dragMoveCallBack(event, clickX, this.value);
7814
7808
  this.dragEndCallBack(clickX);
@@ -7961,7 +7955,7 @@ var pops = (function () {
7961
7955
  return formConfig.getToolTipContent(PopsPanelSlider.value);
7962
7956
  }
7963
7957
  else {
7964
- return PopsPanelSlider.value;
7958
+ return PopsPanelSlider.value.toString();
7965
7959
  }
7966
7960
  }
7967
7961
  let tooltip = PopsTooltip.init({
@@ -8005,20 +7999,20 @@ var pops = (function () {
8005
7999
  },
8006
8000
  };
8007
8001
  PopsPanelSlider.init();
8008
- liElement["data-slider"] = PopsPanelSlider;
8009
- return liElement;
8002
+ Reflect.set($li, "data-slider", PopsPanelSlider);
8003
+ return $li;
8010
8004
  },
8011
8005
  /**
8012
- * 获取中间容器的元素<li>
8013
8006
  * type ==> input
8007
+ * 获取中间容器的元素<li>
8014
8008
  * @param formConfig
8015
8009
  */
8016
8010
  createSectionContainerItem_input(formConfig) {
8017
- let liElement = document.createElement("li");
8018
- liElement["__formConfig__"] = formConfig;
8019
- this.setElementClassName(liElement, formConfig.className);
8020
- this.setElementAttributes(liElement, formConfig.attributes);
8021
- this.setElementProps(liElement, formConfig.props);
8011
+ let $li = document.createElement("li");
8012
+ Reflect.set($li, "__formConfig__", formConfig);
8013
+ this.setElementClassName($li, formConfig.className);
8014
+ this.setElementAttributes($li, formConfig.attributes);
8015
+ this.setElementProps($li, formConfig.props);
8022
8016
  let inputType = "text";
8023
8017
  if (formConfig.isPassword) {
8024
8018
  inputType = "password";
@@ -8031,7 +8025,7 @@ var pops = (function () {
8031
8025
  if (Boolean(formConfig.description)) {
8032
8026
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8033
8027
  }
8034
- PopsSafeUtils.setSafeHTML(liElement,
8028
+ PopsSafeUtils.setSafeHTML($li,
8035
8029
  /*html*/ `
8036
8030
  <div class="pops-panel-item-left-text">
8037
8031
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8042,8 +8036,8 @@ var pops = (function () {
8042
8036
  const PopsPanelInput = {
8043
8037
  [Symbol.toStringTag]: "PopsPanelInput",
8044
8038
  $ele: {
8045
- panelInput: liElement.querySelector(".pops-panel-input"),
8046
- input: liElement.querySelector("input"),
8039
+ panelInput: $li.querySelector(".pops-panel-input"),
8040
+ input: $li.querySelector("input"),
8047
8041
  inputSpanIcon: document.createElement("span"),
8048
8042
  inputSpanIconInner: null,
8049
8043
  icon: null,
@@ -8072,7 +8066,7 @@ var pops = (function () {
8072
8066
  this.disable();
8073
8067
  }
8074
8068
  if (typeof formConfig.handlerCallBack === "function") {
8075
- formConfig.handlerCallBack(liElement, this.$ele.input);
8069
+ formConfig.handlerCallBack($li, this.$ele.input);
8076
8070
  }
8077
8071
  },
8078
8072
  /**
@@ -8207,26 +8201,26 @@ var pops = (function () {
8207
8201
  },
8208
8202
  };
8209
8203
  PopsPanelInput.init();
8210
- liElement["data-input"] = PopsPanelInput;
8211
- return liElement;
8204
+ Reflect.set($li, "data-input", PopsPanelInput);
8205
+ return $li;
8212
8206
  },
8213
8207
  /**
8214
- * 获取中间容器的元素<li>
8215
8208
  * type ==> textarea
8209
+ * 获取中间容器的元素<li>
8216
8210
  * @param formConfig
8217
8211
  */
8218
8212
  createSectionContainerItem_textarea(formConfig) {
8219
- let liElement = document.createElement("li");
8220
- liElement["__formConfig__"] = formConfig;
8221
- this.setElementClassName(liElement, formConfig.className);
8222
- this.setElementAttributes(liElement, formConfig.attributes);
8223
- this.setElementProps(liElement, formConfig.props);
8213
+ let $li = document.createElement("li");
8214
+ Reflect.set($li, "__formConfig__", formConfig);
8215
+ this.setElementClassName($li, formConfig.className);
8216
+ this.setElementAttributes($li, formConfig.attributes);
8217
+ this.setElementProps($li, formConfig.props);
8224
8218
  /* 左边底部的描述的文字 */
8225
8219
  let leftDescriptionText = "";
8226
8220
  if (Boolean(formConfig.description)) {
8227
8221
  leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8228
8222
  }
8229
- PopsSafeUtils.setSafeHTML(liElement,
8223
+ PopsSafeUtils.setSafeHTML($li,
8230
8224
  /*html*/ `
8231
8225
  <div class="pops-panel-item-left-text">
8232
8226
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8237,8 +8231,8 @@ var pops = (function () {
8237
8231
  const PopsPanelTextArea = {
8238
8232
  [Symbol.toStringTag]: "PopsPanelTextArea",
8239
8233
  $ele: {
8240
- panelTextarea: liElement.querySelector(".pops-panel-textarea"),
8241
- textarea: liElement.querySelector(".pops-panel-textarea textarea"),
8234
+ panelTextarea: $li.querySelector(".pops-panel-textarea"),
8235
+ textarea: $li.querySelector(".pops-panel-textarea textarea"),
8242
8236
  },
8243
8237
  $data: {
8244
8238
  value: formConfig.getValue(),
@@ -8270,35 +8264,36 @@ var pops = (function () {
8270
8264
  */
8271
8265
  setChangeEvent() {
8272
8266
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
8273
- this.$data.value = event.target.value;
8267
+ let value = this.$ele.textarea.value;
8268
+ this.$data.value = value;
8274
8269
  if (typeof formConfig.callback === "function") {
8275
- formConfig.callback(event, event.target.value);
8270
+ formConfig.callback(event, value);
8276
8271
  }
8277
8272
  });
8278
8273
  },
8279
8274
  };
8280
8275
  PopsPanelTextArea.init();
8281
- liElement["data-textarea"] = PopsPanelTextArea;
8282
- return liElement;
8276
+ Reflect.set($li, "data-textarea", PopsPanelTextArea);
8277
+ return $li;
8283
8278
  },
8284
8279
  /**
8285
- * 获取中间容器的元素<li>
8286
8280
  * type ==> select
8281
+ * 获取中间容器的元素<li>
8287
8282
  * @param formConfig
8288
8283
  */
8289
8284
  createSectionContainerItem_select(formConfig) {
8290
8285
  const that = this;
8291
- let liElement = document.createElement("li");
8292
- liElement["__formConfig__"] = formConfig;
8293
- this.setElementClassName(liElement, formConfig.className);
8294
- this.setElementAttributes(liElement, formConfig.attributes);
8295
- this.setElementProps(liElement, formConfig.props);
8286
+ let $li = document.createElement("li");
8287
+ Reflect.set($li, "__formConfig__", formConfig);
8288
+ this.setElementClassName($li, formConfig.className);
8289
+ this.setElementAttributes($li, formConfig.attributes);
8290
+ this.setElementProps($li, formConfig.props);
8296
8291
  /* 左边底部的描述的文字 */
8297
8292
  let leftDescriptionText = "";
8298
8293
  if (Boolean(formConfig.description)) {
8299
8294
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8300
8295
  }
8301
- PopsSafeUtils.setSafeHTML(liElement,
8296
+ PopsSafeUtils.setSafeHTML($li,
8302
8297
  /*html*/ `
8303
8298
  <div class="pops-panel-item-left-text">
8304
8299
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8309,8 +8304,8 @@ var pops = (function () {
8309
8304
  const PopsPanelSelect = {
8310
8305
  [Symbol.toStringTag]: "PopsPanelSelect",
8311
8306
  $ele: {
8312
- panelSelect: liElement.querySelector(".pops-panel-select"),
8313
- select: liElement.querySelector(".pops-panel-select select"),
8307
+ panelSelect: $li.querySelector(".pops-panel-select"),
8308
+ select: $li.querySelector(".pops-panel-select select"),
8314
8309
  },
8315
8310
  $eleKey: {
8316
8311
  disable: "__disable__",
@@ -8430,7 +8425,7 @@ var pops = (function () {
8430
8425
  */
8431
8426
  setChangeEvent() {
8432
8427
  popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8433
- let $isSelectedElement = event.target[event.target.selectedIndex];
8428
+ let $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8434
8429
  let selectInfo = this.getSelectOptionInfo($isSelectedElement);
8435
8430
  this.setSelectOptionsDisableStatus();
8436
8431
  if (typeof formConfig.callback === "function") {
@@ -8443,9 +8438,9 @@ var pops = (function () {
8443
8438
  /* 如果成功创建，加入到中间容器中 */
8444
8439
  let childUListClassName = "pops-panel-select-child-forms";
8445
8440
  // 移除旧的元素
8446
- while (liElement.nextElementSibling) {
8447
- if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
8448
- liElement.nextElementSibling.remove();
8441
+ while ($li.nextElementSibling) {
8442
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8443
+ $li.nextElementSibling.remove();
8449
8444
  }
8450
8445
  else {
8451
8446
  break;
@@ -8453,7 +8448,7 @@ var pops = (function () {
8453
8448
  }
8454
8449
  let $childUList = document.createElement("ul");
8455
8450
  $childUList.className = childUListClassName;
8456
- popsDOMUtils.after(liElement, $childUList);
8451
+ popsDOMUtils.after($li, $childUList);
8457
8452
  that.uListContainerAddItem(formConfig, {
8458
8453
  ulElement: $childUList,
8459
8454
  });
@@ -8473,26 +8468,26 @@ var pops = (function () {
8473
8468
  },
8474
8469
  };
8475
8470
  PopsPanelSelect.init();
8476
- Reflect.set(liElement, "data-select", PopsPanelSelect);
8477
- return liElement;
8471
+ Reflect.set($li, "data-select", PopsPanelSelect);
8472
+ return $li;
8478
8473
  },
8479
8474
  /**
8480
- * 获取中间容器的元素<li>
8481
8475
  * type ==> select-multiple
8476
+ * 获取中间容器的元素<li>
8482
8477
  * @param formConfig
8483
8478
  */
8484
8479
  createSectionContainerItem_select_multiple_new(formConfig) {
8485
- let liElement = document.createElement("li");
8486
- Reflect.set(liElement, "__formConfig__", formConfig);
8487
- this.setElementClassName(liElement, formConfig.className);
8488
- this.setElementAttributes(liElement, formConfig.attributes);
8489
- this.setElementProps(liElement, formConfig.props);
8480
+ let $li = document.createElement("li");
8481
+ Reflect.set($li, "__formConfig__", formConfig);
8482
+ this.setElementClassName($li, formConfig.className);
8483
+ this.setElementAttributes($li, formConfig.attributes);
8484
+ this.setElementProps($li, formConfig.props);
8490
8485
  /* 左边底部的描述的文字 */
8491
8486
  let leftDescriptionText = "";
8492
8487
  if (Boolean(formConfig.description)) {
8493
8488
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
8494
8489
  }
8495
- PopsSafeUtils.setSafeHTML(liElement,
8490
+ PopsSafeUtils.setSafeHTML($li,
8496
8491
  /*html*/ `
8497
8492
  <div class="pops-panel-item-left-text">
8498
8493
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8567,15 +8562,14 @@ var pops = (function () {
8567
8562
  },
8568
8563
  /** 初始化$el变量 */
8569
8564
  inintEl() {
8570
- this.$el.$container = liElement.querySelector(".pops-panel-select-multiple");
8571
- this.$el.$wrapper = liElement.querySelector(".el-select__wrapper");
8572
- this.$el.$section = liElement.querySelector(".el-select__selection");
8573
- this.$el.$selectedInputWrapper = liElement.querySelector(".el-select__selected-item.el-select__input-wrapper");
8574
- this.$el.$selectedPlaceHolderWrapper =
8575
- liElement.querySelector(".el-select__selected-item.el-select__placeholder");
8565
+ this.$el.$container = $li.querySelector(".pops-panel-select-multiple");
8566
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
8567
+ this.$el.$section = $li.querySelector(".el-select__selection");
8568
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
8569
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
8576
8570
  this.$el.$suffix =
8577
- liElement.querySelector(".el-select__suffix");
8578
- this.$el.$suffixIcon = liElement.querySelector(".el-select__suffix .el-icon");
8571
+ $li.querySelector(".el-select__suffix");
8572
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
8579
8573
  // 先把手动输入框隐藏
8580
8574
  this.hideInputWrapper();
8581
8575
  },
@@ -9133,26 +9127,26 @@ var pops = (function () {
9133
9127
  },
9134
9128
  };
9135
9129
  PopsPanelSelectMultiple.init();
9136
- Reflect.set(liElement, "data-select-multiple", PopsPanelSelectMultiple);
9137
- return liElement;
9130
+ Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9131
+ return $li;
9138
9132
  },
9139
9133
  /**
9140
- * 获取中间容器的元素<li>
9141
9134
  * type ==> button
9135
+ * 获取中间容器的元素<li>
9142
9136
  * @param formConfig
9143
9137
  */
9144
9138
  createSectionContainerItem_button(formConfig) {
9145
- let liElement = document.createElement("li");
9146
- liElement["__formConfig__"] = formConfig;
9147
- this.setElementClassName(liElement, formConfig.className);
9148
- this.setElementAttributes(liElement, formConfig.attributes);
9149
- this.setElementProps(liElement, formConfig.props);
9139
+ let $li = document.createElement("li");
9140
+ Reflect.set($li, "__formConfig__", formConfig);
9141
+ this.setElementClassName($li, formConfig.className);
9142
+ this.setElementAttributes($li, formConfig.attributes);
9143
+ this.setElementProps($li, formConfig.props);
9150
9144
  /* 左边底部的描述的文字 */
9151
9145
  let leftDescriptionText = "";
9152
9146
  if (Boolean(formConfig.description)) {
9153
9147
  leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
9154
9148
  }
9155
- PopsSafeUtils.setSafeHTML(liElement,
9149
+ PopsSafeUtils.setSafeHTML($li,
9156
9150
  /*html*/ `
9157
9151
  <div class="pops-panel-item-left-text">
9158
9152
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -9166,10 +9160,10 @@ var pops = (function () {
9166
9160
  const PopsPanelButton = {
9167
9161
  [Symbol.toStringTag]: "PopsPanelButton",
9168
9162
  $ele: {
9169
- panelButton: liElement.querySelector(".pops-panel-button"),
9170
- button: liElement.querySelector(".pops-panel-button .pops-panel-button_inner"),
9171
- icon: liElement.querySelector(".pops-panel-button .pops-bottom-icon"),
9172
- spanText: liElement.querySelector(".pops-panel-button .pops-panel-button-text"),
9163
+ panelButton: $li.querySelector(".pops-panel-button"),
9164
+ button: $li.querySelector(".pops-panel-button .pops-panel-button_inner"),
9165
+ icon: $li.querySelector(".pops-panel-button .pops-bottom-icon"),
9166
+ spanText: $li.querySelector(".pops-panel-button .pops-panel-button-text"),
9173
9167
  },
9174
9168
  $data: {},
9175
9169
  init() {
@@ -9282,10 +9276,11 @@ var pops = (function () {
9282
9276
  },
9283
9277
  };
9284
9278
  PopsPanelButton.init();
9285
- liElement["data-button"] = PopsPanelButton;
9286
- return liElement;
9279
+ Reflect.set($li, "data-button", PopsPanelButton);
9280
+ return $li;
9287
9281
  },
9288
9282
  /**
9283
+ * type ==> deepMenu
9289
9284
  * 获取深层容器的元素<li>
9290
9285
  * @param formConfig
9291
9286
  */
@@ -9293,7 +9288,7 @@ var pops = (function () {
9293
9288
  let that = this;
9294
9289
  let $li = document.createElement("li");
9295
9290
  $li.classList.add("pops-panel-deepMenu-nav-item");
9296
- $li["__formConfig__"] = formConfig;
9291
+ Reflect.set($li, "__formConfig__", formConfig);
9297
9292
  this.setElementClassName($li, formConfig.className);
9298
9293
  // 设置属性
9299
9294
  this.setElementAttributes($li, formConfig.attributes);
@@ -9429,6 +9424,7 @@ var pops = (function () {
9429
9424
  let $deepMenuContainer = popsDOMUtils.createElement("section", {
9430
9425
  className: "pops-panel-container pops-panel-deepMenu-container",
9431
9426
  });
9427
+ Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
9432
9428
  let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
9433
9429
  className: "pops-panel-deepMenu-container-header-ul",
9434
9430
  });
@@ -9443,13 +9439,13 @@ var pops = (function () {
9443
9439
  className: "pops-panel-deepMenu-container-left-arrow-icon",
9444
9440
  innerHTML: PopsIcon.getIcon("arrowLeft"),
9445
9441
  });
9446
- popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
9447
- event?.preventDefault();
9448
- event?.stopPropagation();
9442
+ popsDOMUtils.on($headerLeftArrow, "click", (event) => {
9443
+ popsDOMUtils.preventEvent(event);
9449
9444
  // 返回上一层菜单
9450
- let $prev = $deepMenuContainer.previousElementSibling;
9445
+ let $prev = ($deepMenuContainer.previousElementSibling);
9451
9446
  popsDOMUtils.cssShow($prev);
9452
9447
  $deepMenuContainer.remove();
9448
+ that.triggerRenderRightContainer($prev);
9453
9449
  }, {
9454
9450
  once: true,
9455
9451
  });
@@ -9472,6 +9468,7 @@ var pops = (function () {
9472
9468
  sectionBodyContainer: $deepMenuBodyUL,
9473
9469
  });
9474
9470
  }
9471
+ that.triggerRenderRightContainer($deepMenuContainer);
9475
9472
  },
9476
9473
  /** 设置项的点击事件 */
9477
9474
  setLiClickEvent() {
@@ -9487,22 +9484,22 @@ var pops = (function () {
9487
9484
  },
9488
9485
  };
9489
9486
  PopsPanelDeepMenu.init();
9490
- $li["data-deepMenu"] = PopsPanelDeepMenu;
9487
+ Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9491
9488
  return $li;
9492
9489
  },
9493
9490
  /**
9494
- * 获取中间容器的元素<li>
9495
9491
  * type ===> own
9492
+ * 获取中间容器的元素<li>
9496
9493
  * @param formConfig
9497
9494
  */
9498
9495
  createSectionContainerItem_own(formConfig) {
9499
- let liElement = document.createElement("li");
9500
- liElement["__formConfig__"] = formConfig;
9496
+ let $li = document.createElement("li");
9497
+ Reflect.set($li, "__formConfig__", formConfig);
9501
9498
  if (formConfig.className) {
9502
- liElement.className = formConfig.className;
9499
+ $li.className = formConfig.className;
9503
9500
  }
9504
- liElement = formConfig.getLiElementCallBack(liElement);
9505
- return liElement;
9501
+ $li = formConfig.getLiElementCallBack($li);
9502
+ return $li;
9506
9503
  },
9507
9504
  /**
9508
9505
  * 获取中间容器的元素<li>
@@ -9623,6 +9620,17 @@ var pops = (function () {
9623
9620
  });
9624
9621
  }
9625
9622
  },
9623
+ /**
9624
+ * 触发触发渲染右侧容器的事件
9625
+ */
9626
+ triggerRenderRightContainer($container) {
9627
+ let __formConfig__ = Reflect.get($container, "__formConfig__");
9628
+ this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
9629
+ detail: {
9630
+ formConfig: __formConfig__,
9631
+ },
9632
+ }));
9633
+ },
9626
9634
  /**
9627
9635
  *
9628
9636
  * @param formConfig
@@ -9649,6 +9657,8 @@ var pops = (function () {
9649
9657
  const that = this;
9650
9658
  popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
9651
9659
  this.clearContainer();
9660
+ let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
9661
+ Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
9652
9662
  popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
9653
9663
  this.clearAsideItemIsVisited();
9654
9664
  this.setAsideItemIsVisited(asideLiElement);
@@ -9656,20 +9666,19 @@ var pops = (function () {
9656
9666
  let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
9657
9667
  if (typeof headerTitleText === "string" &&
9658
9668
  headerTitleText.trim() !== "") {
9659
- let containerHeaderTitleLIElement = document.createElement("li");
9660
- containerHeaderTitleLIElement["__asideConfig__"] =
9661
- asideConfig;
9662
- PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
9663
- this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
9664
- }
9665
- let __forms__ = asideLiElement["__forms__"];
9666
- __forms__.forEach((formConfig) => {
9669
+ let $containerHeaderTitle = document.createElement("li");
9670
+ Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
9671
+ PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
9672
+ this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
9673
+ }
9674
+ rightContainerFormConfig.forEach((formConfig) => {
9667
9675
  this.createSectionContainerItem_forms(formConfig);
9668
9676
  });
9669
9677
  if (typeof asideConfig.callback === "function") {
9670
9678
  /* 执行回调 */
9671
9679
  asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
9672
9680
  }
9681
+ that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
9673
9682
  });
9674
9683
  },
9675
9684
  };
@@ -9766,6 +9775,7 @@ var pops = (function () {
9766
9775
  panelHandleContentDetails.init({
9767
9776
  config: config,
9768
9777
  $el: {
9778
+ $pops: $pops,
9769
9779
  $content: $content,
9770
9780
  $contentAside: $contentAside,
9771
9781
  $contentSectionContainer: $contentSectionContainer,
@@ -9790,7 +9800,15 @@ var pops = (function () {
9790
9800
  });
9791
9801
  }
9792
9802
  let result = PopsHandler.handleResultDetails(eventDetails);
9793
- return result;
9803
+ return {
9804
+ ...result,
9805
+ addEventListener: (event, listener, options) => {
9806
+ $pops.addEventListener(event, listener, options);
9807
+ },
9808
+ removeEventListener: (event, listener, options) => {
9809
+ $pops.removeEventListener(event, listener, options);
9810
+ },
9811
+ };
9794
9812
  },
9795
9813
  };
9796
9814
 
@@ -11034,7 +11052,7 @@ var pops = (function () {
11034
11052
  /** 配置 */
11035
11053
  config = {
11036
11054
  /** 版本号 */
11037
- version: "2025.6.12",
11055
+ version: "2025.6.25",
11038
11056
  cssText: PopsCSS,
11039
11057
  /** icon图标的svg代码 */
11040
11058
  iconSVG: PopsIcon.$data,