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