@whitesev/pops 3.0.0 → 3.0.1

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 (59) hide show
  1. package/dist/index.amd.js +1417 -579
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.amd.min.js +1 -1
  4. package/dist/index.amd.min.js.map +1 -1
  5. package/dist/index.cjs.js +1417 -579
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.cjs.min.js +1 -1
  8. package/dist/index.cjs.min.js.map +1 -1
  9. package/dist/index.esm.js +1417 -579
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.esm.min.js +1 -1
  12. package/dist/index.esm.min.js.map +1 -1
  13. package/dist/index.iife.js +1417 -579
  14. package/dist/index.iife.js.map +1 -1
  15. package/dist/index.iife.min.js +1 -1
  16. package/dist/index.iife.min.js.map +1 -1
  17. package/dist/index.system.js +1417 -579
  18. package/dist/index.system.js.map +1 -1
  19. package/dist/index.system.min.js +1 -1
  20. package/dist/index.system.min.js.map +1 -1
  21. package/dist/index.umd.js +1417 -579
  22. package/dist/index.umd.js.map +1 -1
  23. package/dist/index.umd.min.js +1 -1
  24. package/dist/index.umd.min.js.map +1 -1
  25. package/dist/types/src/Pops.d.ts +372 -21
  26. package/dist/types/src/PopsCSS.d.ts +3 -1
  27. package/dist/types/src/PopsIcon.d.ts +1 -1
  28. package/dist/types/src/components/panel/handlerComponents.d.ts +956 -21
  29. package/dist/types/src/components/panel/index.d.ts +1 -1
  30. package/dist/types/src/components/panel/types/components-button.d.ts +1 -1
  31. package/dist/types/src/components/panel/types/components-container.d.ts +1 -1
  32. package/dist/types/src/components/panel/types/components-deepMenu.d.ts +1 -1
  33. package/dist/types/src/components/panel/types/components-input.d.ts +41 -16
  34. package/dist/types/src/components/panel/types/components-own.d.ts +3 -3
  35. package/dist/types/src/components/panel/types/components-select.d.ts +89 -30
  36. package/dist/types/src/components/panel/types/components-selectMultiple.d.ts +10 -15
  37. package/dist/types/src/components/panel/types/components-slider.d.ts +2 -3
  38. package/dist/types/src/components/panel/types/components-switch.d.ts +1 -1
  39. package/dist/types/src/components/panel/types/components-textarea.d.ts +1 -1
  40. package/dist/types/src/components/searchSuggestion/index.d.ts +3 -3
  41. package/dist/types/src/types/global.d.ts +3 -1
  42. package/package.json +8 -8
  43. package/src/PopsCSS.ts +4 -1
  44. package/src/components/panel/css/components-select.css +84 -0
  45. package/src/components/panel/defaultConfig.ts +290 -80
  46. package/src/components/panel/handlerComponents.ts +1112 -461
  47. package/src/components/panel/index.css +85 -5
  48. package/src/components/panel/types/components-button.ts +1 -1
  49. package/src/components/panel/types/components-container.ts +1 -1
  50. package/src/components/panel/types/components-deepMenu.ts +1 -1
  51. package/src/components/panel/types/components-input.ts +51 -16
  52. package/src/components/panel/types/components-own.ts +3 -3
  53. package/src/components/panel/types/components-select.ts +94 -32
  54. package/src/components/panel/types/components-selectMultiple.ts +11 -16
  55. package/src/components/panel/types/components-slider.ts +2 -3
  56. package/src/components/panel/types/components-switch.ts +1 -1
  57. package/src/components/panel/types/components-textarea.ts +1 -1
  58. package/src/components/searchSuggestion/index.ts +20 -65
  59. package/src/types/global.d.ts +3 -1
package/dist/index.system.js CHANGED
@@ -2873,10 +2873,12 @@ System.register('pops', [], (function (exports) {
2873
2873
 
2874
2874
  var folderCSS = ".pops-folder-list {\r\n --folder-arrow-fill-color: #d4d7de;\r\n --folder-arrow-active-fill-color: #06a7ff;\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #999999;\r\n --table-header-row-text-color: #818999;\r\n --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n --table-body-row-text-color: #05082c;\r\n --table-body-row-file-name-text-color: #05082c;\r\n --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n --table-body-row-file-name-hover-text-color: #06a7ff;\r\n --table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n background: 0 0;\r\n text-decoration: none;\r\n -webkit-tap-highlight-color: transparent;\r\n color: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n width: 100%;\r\n table-layout: fixed;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n height: 100%;\r\n background: 0 0;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n -ms-flex-direction: column;\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n height: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-header-row-text-color);\r\n text-align: left;\r\n font-size: 12px;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: var(--table-body-row-text-color);\r\n font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n background-color: var(--table-body-row-hover-bg-color);\r\n border-color: var(--table-body-row-hover-bd-color);\r\n border: 0;\r\n outline: none;\r\n}\r\n.pops-folder-list table th {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n border: 0;\r\n border-bottom: 1px solid var(--table-body-td-text-color);\r\n position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n display: inline-block;\r\n padding-left: 12px;\r\n line-height: normal;\r\n align-content: center;\r\n max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n padding: 6px 0px;\r\n flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n width: 45px;\r\n height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n padding-left: unset;\r\n max-width: 250px;\r\n overflow-x: hidden;\r\n font-weight: 400;\r\n line-height: unset;\r\n margin-bottom: 4px;\r\n white-space: normal;\r\n text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n flex: 1 auto;\r\n overflow: auto;\r\n padding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n overflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n flex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n display: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n color: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n text-decoration: none;\r\n color: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n color: var(--table-body-row-content-text-color);\r\n position: relative;\r\n width: 100%;\r\n text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n line-height: normal;\r\n align-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n flex: 1;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n min-height: 17px;\r\n flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n display: inline-flex;\r\n margin-left: 4px;\r\n flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n width: 10px;\r\n height: 10px;\r\n fill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n fill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n padding: 4px 20px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n -webkit-box-pack: start;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: flex-start;\r\n min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n font-size: 12px;\r\n color: var(--header-breadcrumb-all-files-text-color);\r\n line-height: normal;\r\n align-content: center;\r\n font-weight: 700;\r\n display: inline-block;\r\n max-width: 140px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n color: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n font-size: 14px;\r\n color: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n 55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"folder\"] {\r\n --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n }\r\n .pops-folder-list {\r\n --header-breadcrumb-text-color: #06a7ff;\r\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n --header-breadcrumb-all-files-last-text-color: #818999;\r\n --table-body-row-text-color: #f7f8fa;\r\n --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n --table-body-td-text-color: #495366;\r\n --table-body-row-hover-bd-color: #1f2022;\r\n --table-body-row-hover-bg-color: #1f2022;\r\n --table-body-row-file-name-text-color: #f7f8fa;\r\n }\r\n}\r\n";
2875
2875
 
2876
- var panelCSS = ".pops[type-value=\"panel\"] {\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333333;\r\n --panel-title-bg-color: #ffffff;\r\n\r\n --panel-aside-bg-color: #ffffff;\r\n --panel-aside-hover-color: rgb(64, 158, 255);\r\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-left-text-gap: 6px;\r\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--panel-aside-bg-color);\r\n border-right: 1px solid var(--panel-aside-bg-color);\r\n font-size: 0.9em;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n background: var(--panel-aside-bg-color);\r\n border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n list-style-type: none;\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n overflow: auto;\r\n /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n /* 去除<li>左侧的圆点 */\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px 0px;\r\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul.pops-panel-forms-container-item-formlist\r\n li:last-child {\r\n border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value=\"panel\"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value=\"panel\"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n padding: 0 4px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n min-width: 88px !important;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid var(--panel-switch-core-bd-color);\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: var(--panel-switch-core-bg-color);\r\n cursor: pointer;\r\n transition:\r\n border-color 0.3s,\r\n background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: var(--panel-switch-circle-bg-color);\r\n color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: var(--panel-switch-checked-core-bd-color);\r\n background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: \"\";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n\r\n --pops-panel-components-input-text-color: #000000;\r\n --pops-panel-components-input-text-bg-color: transparent;\r\n --pops-panel-components-input-text-default-padding: 8px;\r\n --pops-panel-components-input-bd-color: #dcdfe6;\r\n --pops-panel-components-input-bg-color: #ffffff;\r\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid var(--pops-panel-components-input-bd-color);\r\n border-radius: 4px;\r\n background-color: var(--pops-panel-components-input-bg-color);\r\n position: relative;\r\n box-shadow: none;\r\n width: 200px;\r\n}\r\n.pops-panel-input:hover {\r\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n color: var(--pops-panel-components-input-text-color);\r\n background-color: var(--pops-panel-components-input-text-bg-color);\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n /*margin-right: calc(1em + 8px);*/\r\n margin: 0px;\r\n padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n height: -webkit-fill-available;\r\n height: -moz-available;\r\n text-align: center;\r\n color: var(--pops-panel-components-input-suffix-color);\r\n background: var(--pops-panel-components-input-suffix-bg-color);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n padding: 0 8px;\r\n position: relative;\r\n right: 0px;\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #000000;\r\n --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n color: var(--pops-panel-components-textarea-text-color);\r\n background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n --pops-panel-components-select-text-color: #000000;\r\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n border: 0;\r\n}\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid var(--pops-panel-components-select-bd-color);\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n color: var(--pops-panel-components-select-text-color);\r\n background-color: var(--pops-panel-components-select-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n box-shadow: none;\r\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #cbcbcb;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: transform var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.pops-panel-select-multiple-disable {\r\n --el-fill-color-blank: #f5f7fa;\r\n --color: #a8abb2;\r\n --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #e7e7e7;\r\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"panel\"] {\r\n --pops-bg-color: #000000;\r\n --pops-color: #f2f2f2;\r\n --panel-title-bg-color: #000000;\r\n --panel-aside-bg-color: #262626;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #262626;\r\n --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n fill: #f2f2f2;\r\n }\r\n\r\n /* switch的CSS */\r\n .pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n }\r\n /* select的CSS */\r\n .pops-panel-select {\r\n --pops-panel-components-select-text-color: #f2f2f2;\r\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: #141414;\r\n }\r\n /* select-multiple的CSS*/\r\n .pops-panel-select-multiple {\r\n --el-fill-color-blank: #141414;\r\n --el-border-color: #4c4d4f;\r\n --el-text-color-placeholder: #a8abb2;\r\n --el-select-input-color: #a8abb2;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n }\r\n .pops-panel-select-multiple .el-tag {\r\n --el-color-info-light-9: #202121;\r\n }\r\n .pops-panel-select-multiple-disable {\r\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n }\r\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #2f2f2f;\r\n }\r\n /* select-multiple的CSS*/\r\n /* slider的CSS */\r\n .pops-slider {\r\n --pops-slider-border-color-light: #414243;\r\n }\r\n /* input的CSS */\r\n .pops-panel-input {\r\n --pops-panel-components-input-text-color: #f2f2f2;\r\n --pops-panel-components-input-bd-color: #4f5052;\r\n --pops-panel-components-input-bg-color: #141414;\r\n --pops-panel-components-input-hover-bd-color: #6f7175;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n }\r\n /* textarea的CSS */\r\n .pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #f2f2f2;\r\n --pops-panel-components-textarea-text-bg-color: #141414;\r\n --pops-panel-components-textarea-bd-color: #4f5052;\r\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n }\r\n .pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n }\r\n /* slider */\r\n .pops-slider {\r\n --pops-slider-text-color-placeholder: #8d9095;\r\n }\r\n}\r\n";
2876
+ var panelCSS = ".pops[type-value=\"panel\"] {\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333333;\r\n --panel-title-bg-color: #ffffff;\r\n\r\n --panel-aside-bg-color: #ffffff;\r\n --panel-aside-hover-color: rgb(64, 158, 255);\r\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-left-text-gap: 6px;\r\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--panel-aside-bg-color);\r\n border-right: 1px solid var(--panel-aside-bg-color);\r\n font-size: 0.9em;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n background: var(--panel-aside-bg-color);\r\n border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n list-style-type: none;\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n color: var(--panel-aside-hover-color);\r\n background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n overflow: auto;\r\n /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n /* 去除<li>左侧的圆点 */\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px 0px;\r\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul.pops-panel-forms-container-item-formlist\r\n li:last-child {\r\n border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value=\"panel\"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value=\"panel\"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n padding: 0 4px;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n min-width: 88px !important;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n }\r\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid var(--panel-switch-core-bd-color);\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: var(--panel-switch-core-bg-color);\r\n cursor: pointer;\r\n transition:\r\n border-color 0.3s,\r\n background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: var(--panel-switch-circle-bg-color);\r\n color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: var(--panel-switch-checked-core-bd-color);\r\n background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow:\r\n 0 0 2px rgba(0, 0, 0, 0.3),\r\n 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: \"\";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n --el-color-danger: #f56c6c;\r\n\r\n --pops-panel-components-input-text-color: #000000;\r\n --pops-panel-components-input-text-bg-color: transparent;\r\n --pops-panel-components-input-text-default-padding: 8px;\r\n --pops-panel-components-input-bd-color: #dcdfe6;\r\n --pops-panel-components-input-bg-color: #ffffff;\r\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n position: relative;\r\n box-shadow: none;\r\n width: 200px;\r\n border: 0px;\r\n}\r\n.pops-panel-input_inner {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n border: 1px solid var(--pops-panel-components-input-bd-color);\r\n border-radius: 4px;\r\n background-color: var(--pops-panel-components-input-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-input_inner:hover {\r\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input_inner:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n color: var(--pops-panel-components-input-text-color);\r\n background-color: var(--pops-panel-components-input-text-bg-color);\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n /*margin-right: calc(1em + 8px);*/\r\n margin: 0px;\r\n padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\r\n -webkit-appearance: none;\r\n display: none;\r\n}\r\n/* 颜色选择器不需要那么宽 */\r\n.pops-panel-input:has(input[type=\"color\"]) {\r\n width: 50px;\r\n}\r\n.pops-panel-input input[type=\"color\"] {\r\n padding: 0px;\r\n}\r\n.pops-panel-input_inner:has(input[type=\"file\"]) {\r\n border: 0px;\r\n background: transparent;\r\n}\r\n.pops-panel-input input[type=\"file\"] {\r\n padding: 0px;\r\n line-height: 32px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n height: -webkit-fill-available;\r\n height: -moz-available;\r\n text-align: center;\r\n color: var(--pops-panel-components-input-suffix-color);\r\n background: var(--pops-panel-components-input-suffix-bg-color);\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n padding: 0 8px;\r\n position: relative;\r\n right: 0px;\r\n border-top-right-radius: 4px;\r\n border-bottom-right-radius: 4px;\r\n border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* 校验样式 */\r\n.pops-panel-input:has(.pops-panel-input-valid-error) {\r\n --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\r\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input .pops-panel-input-valid-error {\r\n width: 100%;\r\n color: var(--el-color-danger);\r\n font-weight: 500;\r\n font-size: 0.8em;\r\n box-sizing: border-box;\r\n vertical-align: middle;\r\n display: inline-flex;\r\n position: relative;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #000000;\r\n --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n color: var(--pops-panel-components-textarea-text-color);\r\n background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: none;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n --pops-panel-components-select-text-color: #000000;\r\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n border: 0;\r\n}\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid var(--pops-panel-components-select-bd-color);\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n color: var(--pops-panel-components-select-text-color);\r\n background-color: var(--pops-panel-components-select-bg-color);\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n box-shadow: none;\r\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select useDialog的CSS */\r\n.pops-panel-select {\r\n}\r\n/* select useDialog的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple,\r\n.pops-panel-select {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #cbcbcb;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n}\r\n.pops-panel-select .el-select__wrapper,\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select .el-select__wrapper.is-focused,\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select .el-select__selection,\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\r\n justify-content: left;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\r\n justify-content: center;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\r\n justify-content: right;\r\n}\r\n.pops-panel-select .el-select__selected-item,\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select .el-select__selected-item span {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select .el-select__input-wrapper,\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select .el-select__selection.is-near,\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select .el-select__placeholder,\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select .el-select__placeholder.is-transparent,\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select .el-select__prefix,\r\n.pops-panel-select .el-select__suffix,\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select .el-icon,\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select .el-icon svg,\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select .el-select__caret,\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: transform var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select[data-show-option] .el-select__caret,\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n/* 禁用样式 */\r\n.pops-panel-select-multiple-disable {\r\n --el-fill-color-blank: #f5f7fa;\r\n --color: #a8abb2;\r\n --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #e7e7e7;\r\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .pops[type-value=\"panel\"] {\r\n --pops-bg-color: #000000;\r\n --pops-color: #f2f2f2;\r\n --panel-title-bg-color: #000000;\r\n --panel-aside-bg-color: #262626;\r\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n --pops-panel-forms-container-item-bg-color: #262626;\r\n --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n }\r\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n fill: #f2f2f2;\r\n }\r\n\r\n /* switch的CSS */\r\n .pops-panel-switch {\r\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --panel-switch-circle-color: #dcdfe6;\r\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --panel-switch-checked-circle-color: #409eff;\r\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n }\r\n /* select的CSS */\r\n .pops-panel-select {\r\n --pops-panel-components-select-text-color: #f2f2f2;\r\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n --pops-panel-components-select-bg-color: #141414;\r\n }\r\n /* select-multiple的CSS*/\r\n .pops-panel-select-multiple {\r\n --el-fill-color-blank: #141414;\r\n --el-border-color: #4c4d4f;\r\n --el-text-color-placeholder: #a8abb2;\r\n --el-select-input-color: #a8abb2;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n }\r\n .pops-panel-select-multiple .el-tag {\r\n --el-color-info-light-9: #202121;\r\n }\r\n .pops-panel-select-multiple-disable {\r\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n }\r\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n --el-tag-bg-color: #2f2f2f;\r\n }\r\n /* select-multiple的CSS*/\r\n /* slider的CSS */\r\n .pops-slider {\r\n --pops-slider-border-color-light: #414243;\r\n }\r\n /* input的CSS */\r\n .pops-panel-input {\r\n --pops-panel-components-input-text-color: #f2f2f2;\r\n --pops-panel-components-input-bd-color: #4f5052;\r\n --pops-panel-components-input-bg-color: #141414;\r\n --pops-panel-components-input-hover-bd-color: #6f7175;\r\n --pops-panel-components-input-focus-bd-color: #409eff;\r\n --pops-panel-components-input-suffix-color: #a8abb2;\r\n }\r\n /* textarea的CSS */\r\n .pops-panel-textarea {\r\n --pops-panel-components-textarea-text-color: #f2f2f2;\r\n --pops-panel-components-textarea-text-bg-color: #141414;\r\n --pops-panel-components-textarea-bd-color: #4f5052;\r\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n }\r\n .pops-panel-textarea-disable {\r\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n }\r\n /* slider */\r\n .pops-slider {\r\n --pops-slider-text-color-placeholder: #8d9095;\r\n }\r\n}\r\n";
2877
2877
 
2878
2878
  var rightClickMenuCSS = ".pops-rightClickMenu {\r\n --pops-right-context-color: #000000;\r\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n --pops-right-context-backdrop-filter: blur(10px);\r\n --pops-right-context-z-index: 10000;\r\n --pops-right-context-bd-radius: 6px;\r\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n --pops-right-context-menu-row-bd-radius: 6px;\r\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n position: fixed;\r\n z-index: var(--pops-right-context-z-index);\r\n text-align: center;\r\n border-radius: var(--pops-right-context-bd-radius);\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--pops-right-context-color);\r\n background: var(--pops-right-context-bg-color);\r\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n transition:\r\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n display: grid;\r\n transition: 0.3s;\r\n grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n background: var(--pops-right-context-menu-row-hover-color);\r\n cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n padding: 5px 10px;\r\n margin: 5px 5px;\r\n border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n display: flex;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n text-align: left;\r\n align-items: center;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n .pops-rightClickMenu ul li:active {\r\n transform: scale(0.98);\r\n }\r\n}\r\n";
2879
2879
 
2880
+ var panelComponents_Select_CSS = ".pops {\r\n max-height: 300px;\r\n}\r\n.select-container {\r\n --el-font-size-base: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-primary: #409eff;\r\n --el-fill-color-light: #f5f7fa;\r\n --el-disable-color: #a8abb2;\r\n}\r\n.select-item {\r\n cursor: pointer;\r\n font-size: var(--el-font-size-base);\r\n padding: 0 20px 0 20px;\r\n position: relative;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n color: var(--el-text-color-regular);\r\n min-height: 34px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n}\r\n.select-item[aria-disabled],\r\n.select-item[disabled] {\r\n cursor: not-allowed;\r\n color: var(--el-disable-color);\r\n background: unset;\r\n}\r\n.select-item:hover {\r\n background-color: var(--el-fill-color-light);\r\n}\r\n.select-item.select-item-is-selected:has(.pops-panel-input input) {\r\n background-color: #e7e7e7;\r\n}\r\n.select-item.select-item-is-selected {\r\n color: var(--el-color-primary);\r\n font-weight: 700;\r\n}\r\n.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: 12px;\r\n border-top: none;\r\n border-right: none;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-color: var(--el-color-primary);\r\n mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n no-repeat;\r\n mask-size: 100% 100%;\r\n -webkit-mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n no-repeat;\r\n -webkit-mask-size: 100% 100%;\r\n transform: translateY(-50%);\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.select-item .pops-panel-input {\r\n width: 100%;\r\n margin: 5px 0px;\r\n}\r\n.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {\r\n margin-bottom: 0px;\r\n}\r\n\r\n.select-item .select-item-text {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .select-container {\r\n --el-text-color-regular: #f2f2f2;\r\n --el-disable-color: #8d9095;\r\n --el-fill-color-light: #262727;\r\n }\r\n}\r\n";
2881
+
2880
2882
  const PopsCSS = {
2881
2883
  /** 主CSS */
2882
2884
  index: indexCSS,
@@ -2906,10 +2908,12 @@ System.register('pops', [], (function (exports) {
2906
2908
  drawerCSS: drawerCSS,
2907
2909
  /** pops.folder */
2908
2910
  folderCSS: folderCSS,
2909
- /** pops.folder */
2911
+ /** pops.panel */
2910
2912
  panelCSS: panelCSS,
2911
2913
  /** pops.rightClickMenu */
2912
2914
  rightClickMenu: rightClickMenuCSS,
2915
+ /** pops.panel的select组件 */
2916
+ panelComponents_Select: panelComponents_Select_CSS,
2913
2917
  };
2914
2918
 
2915
2919
  const PopsAnimation = {
@@ -6112,7 +6116,6 @@ System.register('pops', [], (function (exports) {
6112
6116
  className: "forms-1",
6113
6117
  text: "区域设置",
6114
6118
  type: "container",
6115
- attributes: {},
6116
6119
  views: [
6117
6120
  {
6118
6121
  className: "panel-switch",
@@ -6120,11 +6123,6 @@ System.register('pops', [], (function (exports) {
6120
6123
  type: "switch",
6121
6124
  disabled: false,
6122
6125
  description: "",
6123
- afterAddToUListCallBack() {
6124
- // TODO
6125
- },
6126
- props: {},
6127
- attributes: {},
6128
6126
  getValue() {
6129
6127
  return true;
6130
6128
  },
@@ -6137,17 +6135,12 @@ System.register('pops', [], (function (exports) {
6137
6135
  text: "slider",
6138
6136
  type: "slider",
6139
6137
  description: "",
6140
- afterAddToUListCallBack() {
6141
- // TODO
6142
- },
6143
6138
  disabled: false,
6144
6139
  getToolTipContent(value) {
6145
6140
  return String(value);
6146
6141
  },
6147
6142
  isShowHoverTip: true,
6148
6143
  step: 1,
6149
- props: {},
6150
- attributes: {},
6151
6144
  getValue() {
6152
6145
  return 50;
6153
6146
  },
@@ -6164,11 +6157,6 @@ System.register('pops', [], (function (exports) {
6164
6157
  description: "",
6165
6158
  disable: false,
6166
6159
  buttonIsRightIcon: false,
6167
- props: {},
6168
- afterAddToUListCallBack() {
6169
- // TODO
6170
- },
6171
- attributes: {},
6172
6160
  buttonIcon: "view",
6173
6161
  buttonIconIsLoading: true,
6174
6162
  buttonType: "default",
@@ -6181,8 +6169,6 @@ System.register('pops', [], (function (exports) {
6181
6169
  className: "panel-button",
6182
6170
  text: "button",
6183
6171
  type: "button",
6184
- props: {},
6185
- attributes: {},
6186
6172
  buttonIcon: "eleme",
6187
6173
  buttonIconIsLoading: true,
6188
6174
  buttonType: "warning",
@@ -6194,10 +6180,7 @@ System.register('pops', [], (function (exports) {
6194
6180
  {
6195
6181
  className: "panel-button",
6196
6182
  text: "button",
6197
- // @ts-ignore
6198
- props: {},
6199
6183
  type: "button",
6200
- attributes: {},
6201
6184
  buttonIcon: "chromeFilled",
6202
6185
  buttonIconIsLoading: true,
6203
6186
  buttonType: "danger",
@@ -6210,9 +6193,6 @@ System.register('pops', [], (function (exports) {
6210
6193
  className: "panel-button",
6211
6194
  text: "button",
6212
6195
  type: "button",
6213
- attributes: {},
6214
- // @ts-ignore
6215
- props: {},
6216
6196
  buttonIcon: "upload",
6217
6197
  buttonIconIsLoading: false,
6218
6198
  buttonType: "info",
@@ -6239,9 +6219,6 @@ System.register('pops', [], (function (exports) {
6239
6219
  className: "panel-input",
6240
6220
  text: "input",
6241
6221
  type: "input",
6242
- isNumber: false,
6243
- props: {},
6244
- attributes: {},
6245
6222
  getValue() {
6246
6223
  return "50";
6247
6224
  },
@@ -6251,12 +6228,32 @@ System.register('pops', [], (function (exports) {
6251
6228
  },
6252
6229
  placeholder: "请输入内容",
6253
6230
  },
6231
+ {
6232
+ className: "panel-input-number",
6233
+ text: "input-number",
6234
+ type: "input",
6235
+ inputType: "number",
6236
+ getValue() {
6237
+ return "50";
6238
+ },
6239
+ callback(event, value, valueAsNumber) {
6240
+ popsDOMUtils.preventEvent(event);
6241
+ console.log("输入框内容改变：", valueAsNumber);
6242
+ if (valueAsNumber > 60) {
6243
+ return {
6244
+ valid: false,
6245
+ message: "输入值不能大于60，当前：" + value,
6246
+ };
6247
+ }
6248
+ },
6249
+ placeholder: "请输入内容",
6250
+ },
6254
6251
  {
6255
6252
  className: "panel-input-password",
6256
6253
  text: "input-password",
6257
6254
  type: "input",
6258
- props: {},
6259
- attributes: {},
6255
+ inputType: "password",
6256
+ placeholder: "请输入密码",
6260
6257
  getValue() {
6261
6258
  return "123456";
6262
6259
  },
@@ -6264,15 +6261,188 @@ System.register('pops', [], (function (exports) {
6264
6261
  popsDOMUtils.preventEvent(event);
6265
6262
  console.log("密码输入框内容改变：", value);
6266
6263
  },
6267
- isPassword: true,
6264
+ },
6265
+ {
6266
+ className: "panel-input-file",
6267
+ text: "input-file",
6268
+ type: "input",
6269
+ inputType: "file",
6270
+ getValue() {
6271
+ return "";
6272
+ },
6273
+ callback(event, value) {
6274
+ popsDOMUtils.preventEvent(event);
6275
+ console.log("内容改变：", value);
6276
+ },
6268
6277
  placeholder: "请输入密码",
6269
6278
  },
6279
+ {
6280
+ className: "panel-input-date",
6281
+ text: "input-date",
6282
+ type: "input",
6283
+ inputType: "date",
6284
+ placeholder: "请输入内容",
6285
+ getValue() {
6286
+ const date = new Date();
6287
+ let hour = date.getHours().toString();
6288
+ let minutes = date.getMinutes().toString();
6289
+ if (hour.length === 1) {
6290
+ hour = `0${hour}`;
6291
+ }
6292
+ if (minutes.length === 1) {
6293
+ minutes = `0${minutes}`;
6294
+ }
6295
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
6296
+ },
6297
+ callback(event, value, valueAsNumber, valueAsDate) {
6298
+ popsDOMUtils.preventEvent(event);
6299
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6300
+ },
6301
+ },
6302
+ {
6303
+ className: "panel-input-datetime-local",
6304
+ text: "input-datetime-local",
6305
+ type: "input",
6306
+ inputType: "datetime-local",
6307
+ getValue() {
6308
+ const date = new Date();
6309
+ let hour = date.getHours().toString();
6310
+ let minutes = date.getMinutes().toString();
6311
+ if (hour.length === 1) {
6312
+ hour = `0${hour}`;
6313
+ }
6314
+ if (minutes.length === 1) {
6315
+ minutes = `0${minutes}`;
6316
+ }
6317
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}T${hour}:${minutes}`;
6318
+ },
6319
+ callback(event, value, valueAsNumber, valueAsDate) {
6320
+ popsDOMUtils.preventEvent(event);
6321
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6322
+ },
6323
+ placeholder: "请输入内容",
6324
+ },
6325
+ {
6326
+ className: "panel-input-time",
6327
+ text: "input-time",
6328
+ type: "input",
6329
+ inputType: "time",
6330
+ getValue() {
6331
+ return "11:30";
6332
+ },
6333
+ callback(event, value, valueAsNumber, valueAsDate) {
6334
+ popsDOMUtils.preventEvent(event);
6335
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6336
+ },
6337
+ placeholder: "请输入内容",
6338
+ },
6339
+ {
6340
+ className: "panel-input-month",
6341
+ text: "input-month",
6342
+ type: "input",
6343
+ inputType: "month",
6344
+ getValue() {
6345
+ const date = new Date();
6346
+ return `${date.getFullYear()}-${date.getMonth() + 1}`;
6347
+ },
6348
+ callback(event, value, valueAsNumber, valueAsDate) {
6349
+ popsDOMUtils.preventEvent(event);
6350
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6351
+ },
6352
+ placeholder: "请输入内容",
6353
+ },
6354
+ {
6355
+ className: "panel-input-week",
6356
+ text: "input-week",
6357
+ type: "input",
6358
+ inputType: "week",
6359
+ getValue() {
6360
+ const date = new Date();
6361
+ return `${date.getFullYear()}-W01`;
6362
+ },
6363
+ callback(event, value, valueAsNumber, valueAsDate) {
6364
+ popsDOMUtils.preventEvent(event);
6365
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6366
+ },
6367
+ placeholder: "请输入内容",
6368
+ },
6369
+ {
6370
+ className: "panel-input-search",
6371
+ text: "input-search",
6372
+ type: "input",
6373
+ inputType: "search",
6374
+ getValue() {
6375
+ return "search test";
6376
+ },
6377
+ callback(event, value) {
6378
+ popsDOMUtils.preventEvent(event);
6379
+ console.log("输入框内容改变：", value);
6380
+ },
6381
+ placeholder: "请输入内容",
6382
+ },
6383
+ {
6384
+ className: "panel-input-color",
6385
+ text: "input-color",
6386
+ type: "input",
6387
+ inputType: "color",
6388
+ getValue() {
6389
+ return "#ff0000";
6390
+ },
6391
+ callback(event, value) {
6392
+ popsDOMUtils.preventEvent(event);
6393
+ console.log("输入框内容改变：", value);
6394
+ },
6395
+ placeholder: "请输入内容",
6396
+ },
6397
+ {
6398
+ className: "panel-input-email",
6399
+ text: "input-email",
6400
+ type: "input",
6401
+ inputType: "email",
6402
+ getValue() {
6403
+ return "test@gmail.com";
6404
+ },
6405
+ callback(event, value) {
6406
+ popsDOMUtils.preventEvent(event);
6407
+ const $input = event.target;
6408
+ console.log("输入框内容改变：", value, $input.validity);
6409
+ },
6410
+ placeholder: "请输入内容",
6411
+ },
6412
+ {
6413
+ className: "panel-input-tel",
6414
+ text: "input-tel",
6415
+ type: "input",
6416
+ inputType: "tel",
6417
+ getValue() {
6418
+ return "11111111111";
6419
+ },
6420
+ callback(event, value) {
6421
+ popsDOMUtils.preventEvent(event);
6422
+ const $input = event.target;
6423
+ console.log("输入框内容改变：", value, $input.validity);
6424
+ },
6425
+ placeholder: "请输入内容",
6426
+ },
6427
+ {
6428
+ className: "panel-input-url",
6429
+ text: "input-url",
6430
+ type: "input",
6431
+ inputType: "url",
6432
+ getValue() {
6433
+ return "https://github.com/";
6434
+ },
6435
+ callback(event, value) {
6436
+ popsDOMUtils.preventEvent(event);
6437
+ const $input = event.target;
6438
+ console.log("输入框内容改变：", value, $input.validity);
6439
+ },
6440
+ placeholder: "请输入内容",
6441
+ },
6270
6442
  {
6271
6443
  className: "panel-textarea",
6272
6444
  text: "textarea",
6273
6445
  type: "textarea",
6274
- props: {},
6275
- attributes: {},
6276
6446
  getValue() {
6277
6447
  return "50";
6278
6448
  },
@@ -6287,13 +6457,13 @@ System.register('pops', [], (function (exports) {
6287
6457
  text: "select-disabled",
6288
6458
  type: "select",
6289
6459
  disabled: true,
6290
- props: {},
6291
- attributes: {},
6292
6460
  getValue() {
6293
- return 50;
6461
+ return "text";
6294
6462
  },
6295
- callback(event, isSelectedValue, isSelectedText) {
6296
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6463
+ callback(isSelectedInfo) {
6464
+ if (isSelectedInfo == null)
6465
+ return;
6466
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6297
6467
  },
6298
6468
  data: [
6299
6469
  {
@@ -6302,7 +6472,6 @@ System.register('pops', [], (function (exports) {
6302
6472
  disable() {
6303
6473
  return false;
6304
6474
  },
6305
- views: [],
6306
6475
  },
6307
6476
  {
6308
6477
  value: "text",
@@ -6310,7 +6479,6 @@ System.register('pops', [], (function (exports) {
6310
6479
  disable() {
6311
6480
  return false;
6312
6481
  },
6313
- views: [],
6314
6482
  },
6315
6483
  {
6316
6484
  value: "html",
@@ -6318,7 +6486,6 @@ System.register('pops', [], (function (exports) {
6318
6486
  disable() {
6319
6487
  return false;
6320
6488
  },
6321
- views: [],
6322
6489
  },
6323
6490
  ],
6324
6491
  },
@@ -6327,8 +6494,6 @@ System.register('pops', [], (function (exports) {
6327
6494
  type: "select-multiple",
6328
6495
  text: "select-multiple-disabled",
6329
6496
  disabled: true,
6330
- props: {},
6331
- attributes: {},
6332
6497
  placeholder: "请至少选择一个选项",
6333
6498
  getValue() {
6334
6499
  return ["select-1", "select-2"];
@@ -6369,13 +6534,13 @@ System.register('pops', [], (function (exports) {
6369
6534
  className: "panel-select",
6370
6535
  text: "select",
6371
6536
  type: "select",
6372
- props: {},
6373
- attributes: {},
6374
6537
  getValue() {
6375
- return 50;
6538
+ return "all";
6376
6539
  },
6377
- callback(event, isSelectedValue, isSelectedText) {
6378
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6540
+ callback(isSelectedInfo) {
6541
+ if (isSelectedInfo == null)
6542
+ return;
6543
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6379
6544
  },
6380
6545
  data: [
6381
6546
  {
@@ -6384,7 +6549,6 @@ System.register('pops', [], (function (exports) {
6384
6549
  disable() {
6385
6550
  return false;
6386
6551
  },
6387
- views: [],
6388
6552
  },
6389
6553
  {
6390
6554
  value: "text",
@@ -6392,7 +6556,6 @@ System.register('pops', [], (function (exports) {
6392
6556
  disable() {
6393
6557
  return false;
6394
6558
  },
6395
- views: [],
6396
6559
  },
6397
6560
  {
6398
6561
  value: "html",
@@ -6400,16 +6563,100 @@ System.register('pops', [], (function (exports) {
6400
6563
  disable() {
6401
6564
  return false;
6402
6565
  },
6403
- views: [],
6404
6566
  },
6405
6567
  ],
6406
6568
  },
6569
+ {
6570
+ className: "panel-select-dialog",
6571
+ text: "select-dialog",
6572
+ type: "select",
6573
+ getValue() {
6574
+ return window.localStorage.getItem("select-dialog-customInput") || "";
6575
+ },
6576
+ callback(isSelectedInfo) {
6577
+ if (isSelectedInfo == null) {
6578
+ console.warn(`select当前选项为空`);
6579
+ return;
6580
+ }
6581
+ if (isSelectedInfo.addCustomInput) {
6582
+ if (isSelectedInfo.value === "") {
6583
+ // 空值，不存储
6584
+ if (isSelectedInfo.customInputStoreKey) {
6585
+ console.log(`select删除自定义输入的值`);
6586
+ window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
6587
+ }
6588
+ }
6589
+ else {
6590
+ console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6591
+ if (isSelectedInfo.customInputStoreKey) {
6592
+ window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
6593
+ }
6594
+ }
6595
+ }
6596
+ else {
6597
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6598
+ }
6599
+ },
6600
+ data: [
6601
+ {
6602
+ value: "all",
6603
+ text: "所有",
6604
+ disable() {
6605
+ return false;
6606
+ },
6607
+ },
6608
+ {
6609
+ value: "text",
6610
+ text: "文本",
6611
+ disable(value, selectInfo) {
6612
+ if (selectInfo?.value === "all")
6613
+ return true;
6614
+ return false;
6615
+ },
6616
+ },
6617
+ {
6618
+ value: "html",
6619
+ text: "超文本",
6620
+ disable(value, selectInfo) {
6621
+ if (selectInfo?.value === "all")
6622
+ return true;
6623
+ return false;
6624
+ },
6625
+ },
6626
+ {
6627
+ value: "own",
6628
+ text: "自定义",
6629
+ disable(value, selectInfo) {
6630
+ if (selectInfo?.value === "all")
6631
+ return true;
6632
+ return false;
6633
+ },
6634
+ },
6635
+ {
6636
+ value: window.localStorage.getItem("select-dialog-customInput") || "",
6637
+ text: window.localStorage.getItem("select-dialog-customInput") || "",
6638
+ addCustomInput: true,
6639
+ customInputStoreKey: "select-dialog-customInput",
6640
+ onValid(dataOption) {
6641
+ if (dataOption.value === "123") {
6642
+ console.error("非规范值");
6643
+ return {
6644
+ valid: false,
6645
+ message: "非规范值",
6646
+ };
6647
+ }
6648
+ return {
6649
+ valid: true,
6650
+ };
6651
+ },
6652
+ },
6653
+ ],
6654
+ useDialog: true,
6655
+ },
6407
6656
  {
6408
6657
  className: "panel-select-multiple",
6409
6658
  type: "select-multiple",
6410
6659
  text: "select-multiple",
6411
- props: {},
6412
- attributes: {},
6413
6660
  placeholder: "请至少选择一个选项",
6414
6661
  getValue() {
6415
6662
  return ["select-1", "select-2"];
@@ -6492,16 +6739,11 @@ System.register('pops', [], (function (exports) {
6492
6739
  className: "forms-1",
6493
6740
  text: "区域设置",
6494
6741
  type: "container",
6495
- attributes: {},
6496
- props: {},
6497
6742
  views: [
6498
6743
  {
6499
6744
  className: "panel-switch",
6500
6745
  text: "switch",
6501
6746
  type: "switch",
6502
- // @ts-ignore
6503
- props: {},
6504
- attributes: {},
6505
6747
  getValue() {
6506
6748
  return true;
6507
6749
  },
@@ -6512,10 +6754,7 @@ System.register('pops', [], (function (exports) {
6512
6754
  {
6513
6755
  className: "panel-slider",
6514
6756
  text: "slider",
6515
- // @ts-ignore
6516
- props: {},
6517
6757
  type: "slider",
6518
- attributes: {},
6519
6758
  getValue() {
6520
6759
  return 50;
6521
6760
  },
@@ -6528,10 +6767,7 @@ System.register('pops', [], (function (exports) {
6528
6767
  {
6529
6768
  className: "panel-button",
6530
6769
  text: "button",
6531
- // @ts-ignore
6532
- props: {},
6533
6770
  type: "button",
6534
- attributes: {},
6535
6771
  buttonIcon: "eleme",
6536
6772
  buttonIconIsLoading: true,
6537
6773
  buttonType: "warning",
@@ -6544,9 +6780,6 @@ System.register('pops', [], (function (exports) {
6544
6780
  className: "panel-button",
6545
6781
  text: "button",
6546
6782
  type: "button",
6547
- // @ts-ignore
6548
- props: {},
6549
- attributes: {},
6550
6783
  buttonIcon: "chromeFilled",
6551
6784
  buttonIconIsLoading: true,
6552
6785
  buttonType: "danger",
@@ -6558,10 +6791,7 @@ System.register('pops', [], (function (exports) {
6558
6791
  {
6559
6792
  className: "panel-button",
6560
6793
  text: "button",
6561
- // @ts-ignore
6562
- props: {},
6563
6794
  type: "button",
6564
- attributes: {},
6565
6795
  buttonIcon: "upload",
6566
6796
  buttonIconIsLoading: false,
6567
6797
  buttonType: "info",
@@ -6577,9 +6807,7 @@ System.register('pops', [], (function (exports) {
6577
6807
  {
6578
6808
  type: "deepMenu",
6579
6809
  className: "panel-deepMenu2",
6580
- attributes: {},
6581
6810
  //@ts-ignore
6582
- props: {},
6583
6811
  text: "deepMenu2",
6584
6812
  description: "二级菜单",
6585
6813
  rightText: "自定义配置",
@@ -6605,10 +6833,7 @@ System.register('pops', [], (function (exports) {
6605
6833
  {
6606
6834
  className: "panel-switch",
6607
6835
  text: "switch",
6608
- // @ts-ignore
6609
- props: {},
6610
6836
  type: "switch",
6611
- attributes: {},
6612
6837
  getValue() {
6613
6838
  return true;
6614
6839
  },
@@ -6631,8 +6856,6 @@ System.register('pops', [], (function (exports) {
6631
6856
  "data-value": "value",
6632
6857
  "data-value-2": "value2",
6633
6858
  },
6634
- // @ts-ignore
6635
- props: {},
6636
6859
  views: [],
6637
6860
  clickFirstCallback: function () {
6638
6861
  return false;
@@ -6646,8 +6869,6 @@ System.register('pops', [], (function (exports) {
6646
6869
  "data-value": "value",
6647
6870
  "data-value-2": "value2",
6648
6871
  },
6649
- // @ts-ignore
6650
- props: {},
6651
6872
  views: [],
6652
6873
  clickFirstCallback: function () {
6653
6874
  return false;
@@ -7385,7 +7606,7 @@ System.register('pops', [], (function (exports) {
7385
7606
  // 初始化内容配置
7386
7607
  data.config.content.forEach((asideItemConfig) => {
7387
7608
  const $asideLiElement = this.createAsideItem(asideItemConfig);
7388
- this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
7609
+ this.onAsideItemClick($asideLiElement, asideItemConfig);
7389
7610
  // 是否处于底部
7390
7611
  const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
7391
7612
  if (isBottom) {
@@ -7418,7 +7639,7 @@ System.register('pops', [], (function (exports) {
7418
7639
  // 初始化底部内容配置
7419
7640
  (data.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
7420
7641
  const $bottomLiElement = this.createBottomItem(bottomItemConfig);
7421
- this.setBottomItemClickEvent($bottomLiElement, bottomItemConfig);
7642
+ this.onBottomItemClick($bottomLiElement, bottomItemConfig);
7422
7643
  if (bottomItemConfig.position === "left" || bottomItemConfig.position == null) {
7423
7644
  this.$el.$panelBottomLeftContainer.appendChild($bottomLiElement);
7424
7645
  }
@@ -7571,7 +7792,7 @@ System.register('pops', [], (function (exports) {
7571
7792
  * @param $bottomItem 底部<li>元素
7572
7793
  * @param bottomItemConfig 配置
7573
7794
  */
7574
- setBottomItemClickEvent($bottomItem, bottomItemConfig) {
7795
+ onBottomItemClick($bottomItem, bottomItemConfig) {
7575
7796
  popsDOMUtils.on($bottomItem, "click", async (event) => {
7576
7797
  if (typeof bottomItemConfig.clickCallback === "function") {
7577
7798
  // 执行回调
@@ -7659,12 +7880,12 @@ System.register('pops', [], (function (exports) {
7659
7880
  if (disabled) {
7660
7881
  this.disable();
7661
7882
  }
7662
- this.setClickEvent();
7883
+ this.onClick();
7663
7884
  },
7664
7885
  /**
7665
7886
  * 设置点击事件
7666
7887
  */
7667
- setClickEvent() {
7888
+ onClick() {
7668
7889
  const that = this;
7669
7890
  popsDOMUtils.on(this.$ele.core, "click", function (event) {
7670
7891
  if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
@@ -7719,70 +7940,10 @@ System.register('pops', [], (function (exports) {
7719
7940
  };
7720
7941
  PopsPanelSwitch.init();
7721
7942
  Reflect.set($li, "data-switch", PopsPanelSwitch);
7722
- return $li;
7723
- },
7724
- /**
7725
- * type ==> slider
7726
- * 获取中间容器的元素<li>
7727
- * @param viewConfig
7728
- */
7729
- createSectionContainerItem_slider(viewConfig) {
7730
- const $li = popsDOMUtils.createElement("li");
7731
- Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
7732
- this.setElementClassName($li, viewConfig.className);
7733
- this.setElementAttributes($li, viewConfig.attributes);
7734
- this.setElementProps($li, viewConfig.props);
7735
- // 左边底部的描述的文字
7736
- let leftDescriptionText = "";
7737
- if (viewConfig.description) {
7738
- leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7739
- }
7740
- PopsSafeUtils.setSafeHTML($li,
7741
- /*html*/ `
7742
- <div class="pops-panel-item-left-text">
7743
- <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7744
- <div class="pops-panel-slider">
7745
- <input type="range" min="${viewConfig.min}" max="${viewConfig.max}">
7746
- </div>
7747
- `);
7748
- const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7749
- if (viewConfig.step) {
7750
- $rangeInput.setAttribute("step", viewConfig.step.toString());
7751
- }
7752
- $rangeInput.value = viewConfig.getValue().toString();
7753
- /**
7754
- * 获取提示的内容
7755
- * @param value
7756
- */
7757
- const getToolTipContent = function (value) {
7758
- if (typeof viewConfig.getToolTipContent === "function") {
7759
- return viewConfig.getToolTipContent(value);
7760
- }
7761
- else {
7762
- return value;
7763
- }
7943
+ return {
7944
+ $el: $li,
7945
+ handler: PopsPanelSwitch,
7764
7946
  };
7765
- const tooltip = PopsTooltip.init({
7766
- $target: $rangeInput.parentElement,
7767
- content: () => {
7768
- return getToolTipContent($rangeInput.value);
7769
- },
7770
- zIndex: () => {
7771
- return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
7772
- },
7773
- className: "github-tooltip",
7774
- alwaysShow: false,
7775
- only: false,
7776
- position: "top",
7777
- arrowDistance: 10,
7778
- });
7779
- popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7780
- tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7781
- if (typeof viewConfig.callback === "function") {
7782
- viewConfig.callback(event, $rangeInput.valueAsNumber);
7783
- }
7784
- });
7785
- return $li;
7786
7947
  },
7787
7948
  /**
7788
7949
  * type ==> slider
@@ -7890,7 +8051,7 @@ System.register('pops', [], (function (exports) {
7890
8051
  this.initEleData();
7891
8052
  this.setToolTipEvent();
7892
8053
  this.setPanEvent();
7893
- this.setRunAwayClickEvent();
8054
+ this.onRunAwayClick();
7894
8055
  this.intervalInit();
7895
8056
  if (this.isDisabledDragWithConfig()) {
7896
8057
  this.disableDrag();
@@ -8162,7 +8323,7 @@ System.register('pops', [], (function (exports) {
8162
8323
  /**
8163
8324
  * 设置进度条点击定位的事件
8164
8325
  */
8165
- setRunAwayClickEvent() {
8326
+ onRunAwayClick() {
8166
8327
  popsDOMUtils.on(this.$ele.runAway, "click", (event) => {
8167
8328
  if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
8168
8329
  return;
@@ -8367,7 +8528,10 @@ System.register('pops', [], (function (exports) {
8367
8528
  };
8368
8529
  PopsPanelSlider.init();
8369
8530
  Reflect.set($li, "data-slider", PopsPanelSlider);
8370
- return $li;
8531
+ return {
8532
+ $el: $li,
8533
+ handler: PopsPanelSlider,
8534
+ };
8371
8535
  },
8372
8536
  /**
8373
8537
  * type ==> input
@@ -8380,13 +8544,8 @@ System.register('pops', [], (function (exports) {
8380
8544
  this.setElementClassName($li, viewConfig.className);
8381
8545
  this.setElementAttributes($li, viewConfig.attributes);
8382
8546
  this.setElementProps($li, viewConfig.props);
8383
- let inputType = "text";
8384
- if (viewConfig.isPassword) {
8385
- inputType = "password";
8386
- }
8387
- else if (viewConfig.isNumber) {
8388
- inputType = "number";
8389
- }
8547
+ const defaultInputType = "text";
8548
+ const inputType = viewConfig.inputType || defaultInputType;
8390
8549
  // 左边底部的描述的文字
8391
8550
  let leftDescriptionText = "";
8392
8551
  if (viewConfig.description) {
@@ -8397,135 +8556,195 @@ System.register('pops', [], (function (exports) {
8397
8556
  <div class="pops-panel-item-left-text">
8398
8557
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
8399
8558
  <div class="pops-panel-input">
8400
- <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8559
+ <div class="pops-panel-input_inner">
8560
+ <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8561
+ </div>
8401
8562
  </div>
8402
8563
  `);
8403
8564
  const PopsPanelInput = {
8404
8565
  [Symbol.toStringTag]: "PopsPanelInput",
8405
- $ele: {
8566
+ $el: {
8406
8567
  itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8407
8568
  panelInput: $li.querySelector(".pops-panel-input"),
8569
+ panelInputInner: $li.querySelector(".pops-panel-input_inner"),
8408
8570
  input: $li.querySelector("input"),
8409
- inputSpanIcon: popsDOMUtils.createElement("span"),
8410
- inputSpanIconInner: null,
8571
+ /** span.pops-panel-input__suffix */
8572
+ suffix: popsDOMUtils.createElement("span"),
8573
+ /** span.pops-panel-input__suffix-inner */
8574
+ suffixInner: null,
8575
+ /** i.pops-panel-icon */
8411
8576
  icon: null,
8412
8577
  },
8413
8578
  $data: {
8414
8579
  value: viewConfig.getValue(),
8415
- isView: false,
8580
+ /**
8581
+ * inputType 为 password时使用该值
8582
+ *
8583
+ * 当前内容的可见性
8584
+ */
8585
+ isVisible: false,
8416
8586
  },
8417
8587
  init() {
8418
8588
  this.initEle();
8419
8589
  this.setInputValue(this.$data.value);
8420
8590
  // 如果是密码框，放进图标
8421
- if (viewConfig.isPassword) {
8591
+ if (viewConfig.inputType === "password") {
8592
+ // 显示密码
8422
8593
  this.setCircleIcon(PopsIcon.getIcon("view"));
8423
- this.setCircleIconClickEvent();
8594
+ this.onIconClick();
8424
8595
  }
8425
8596
  else {
8426
8597
  // 先判断预设值是否为空，不为空添加清空图标按钮
8427
- if (this.$ele.input.value != "") {
8598
+ // 且为普通的输入框
8599
+ if (this.$el.input.value != "" && this.isTextInputType()) {
8600
+ // 清除内容的图标
8428
8601
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8429
- this.setCircleIconClickEvent();
8602
+ this.onIconClick();
8603
+ }
8604
+ else {
8605
+ // 隐藏图标
8606
+ this.hideCircleIconWrapper();
8430
8607
  }
8431
8608
  }
8432
- this.setInputChangeEvent();
8609
+ this.onValueChange();
8433
8610
  // 是否禁用复选框
8434
8611
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8435
8612
  if (disabled) {
8436
8613
  this.disable();
8437
8614
  }
8438
8615
  if (typeof viewConfig.handlerCallBack === "function") {
8439
- viewConfig.handlerCallBack($li, this.$ele.input);
8616
+ viewConfig.handlerCallBack($li, this.$el.input);
8440
8617
  }
8441
8618
  },
8442
8619
  /**
8443
8620
  * 初始化$ele的配置
8444
8621
  */
8445
8622
  initEle() {
8446
- this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8447
- popsDOMUtils.addClassName(this.$ele.inputSpanIcon, "pops-panel-input__suffix");
8448
- PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8623
+ this.$el.input.parentElement.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
8624
+ popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
8625
+ PopsSafeUtils.setSafeHTML(this.$el.suffix,
8449
8626
  /*html*/ `
8450
8627
  <span class="pops-panel-input__suffix-inner">
8451
8628
  <i class="pops-panel-icon"></i>
8452
8629
  </span>
8453
8630
  `);
8454
- this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8455
- this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
8456
- popsDOMUtils.addClassName(this.$ele.panelInput, PopsCommonCSSClassName.userSelectNone);
8631
+ this.$el.suffixInner = this.$el.suffix.querySelector(".pops-panel-input__suffix-inner");
8632
+ this.$el.icon = this.$el.suffix.querySelector(".pops-panel-icon");
8633
+ popsDOMUtils.addClassName(this.$el.panelInput, PopsCommonCSSClassName.userSelectNone);
8634
+ },
8635
+ /**
8636
+ * 校验输入框类型是否是字符串输入框类型
8637
+ */
8638
+ isTextInputType() {
8639
+ const typeList = ["text", "search", "email", "tel", "url"];
8640
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8641
+ },
8642
+ /**
8643
+ * 是否是时间输入框类型
8644
+ */
8645
+ isDateInputType() {
8646
+ const typeList = ["date", "datetime-local", "month", "time", "week"];
8647
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8648
+ },
8649
+ /**
8650
+ * 是否是数字输入框类型
8651
+ */
8652
+ isNumberInputType() {
8653
+ const typeList = ["number"];
8654
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8457
8655
  },
8458
8656
  /**
8459
8657
  * 禁用
8460
8658
  */
8461
8659
  disable() {
8462
- this.$ele.input.disabled = true;
8463
- popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
8464
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8660
+ this.$el.input.disabled = true;
8661
+ popsDOMUtils.addClassName(this.$el.panelInput, "pops-input-disabled");
8662
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8465
8663
  },
8466
8664
  /**
8467
8665
  * 取消禁用
8468
8666
  */
8469
8667
  notDisable() {
8470
- this.$ele.input.disabled = false;
8471
- popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
8472
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8668
+ this.$el.input.disabled = false;
8669
+ popsDOMUtils.removeClassName(this.$el.panelInput, "pops-input-disabled");
8670
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8473
8671
  },
8474
8672
  /**
8475
8673
  * 判断是否已被禁用
8476
8674
  */
8477
8675
  isDisabled() {
8478
- return this.$ele.input.disabled;
8676
+ return this.$el.input.disabled;
8479
8677
  },
8480
8678
  /**
8481
8679
  * 设置输入框内容
8482
- * @param {string} [value=""] 值
8680
+ * @param value 值
8483
8681
  */
8484
8682
  setInputValue(value = "") {
8485
- this.$ele.input.value = value;
8683
+ if (typeof value === "number" && this.isNumberInputType()) {
8684
+ this.$el.input.valueAsNumber = value;
8685
+ }
8686
+ else if (typeof value === "object" && value instanceof Date && this.isDateInputType()) {
8687
+ this.$el.input.valueAsDate = value;
8688
+ }
8689
+ else {
8690
+ this.$el.input.value = value.toString();
8691
+ }
8486
8692
  },
8487
8693
  /**
8488
8694
  * 设置input元素的type
8489
- * @param [typeValue="text"] type值
8695
+ * @param typeValue type值
8490
8696
  */
8491
8697
  setInputType(typeValue = "text") {
8492
- this.$ele.input.setAttribute("type", typeValue);
8698
+ this.$el.input.setAttribute("type", typeValue);
8493
8699
  },
8494
8700
  /**
8495
8701
  * 删除图标按钮
8496
8702
  */
8497
8703
  removeCircleIcon() {
8498
- PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
8704
+ PopsSafeUtils.setSafeHTML(this.$el.icon, "");
8499
8705
  },
8500
8706
  /**
8501
8707
  * 添加清空图标按钮
8502
- * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
8708
+ * @param svgHTML svg图标，默认为清空的图标
8503
8709
  */
8504
8710
  setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")) {
8505
- PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
8711
+ PopsSafeUtils.setSafeHTML(this.$el.icon, svgHTML);
8712
+ },
8713
+ /**
8714
+ * 隐藏图标容器
8715
+ */
8716
+ hideCircleIconWrapper() {
8717
+ popsDOMUtils.cssHide(this.$el.suffix, true);
8718
+ },
8719
+ /**
8720
+ * 显示图标容器
8721
+ */
8722
+ showCircleIconWrapper() {
8723
+ popsDOMUtils.cssShow(this.$el.suffix);
8506
8724
  },
8507
8725
  /**
8508
8726
  * 添加图标按钮的点击事件
8509
8727
  */
8510
- setCircleIconClickEvent() {
8511
- popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
8728
+ onIconClick() {
8729
+ popsDOMUtils.on(this.$el.icon, "click", (evt) => {
8730
+ popsDOMUtils.preventEvent(evt);
8512
8731
  if (this.isDisabled()) {
8513
8732
  return;
8514
8733
  }
8515
8734
  // 删除图标
8516
8735
  this.removeCircleIcon();
8517
- if (viewConfig.isPassword) {
8518
- // 密码输入框
8519
- if (this.$data.isView) {
8736
+ if (inputType === "password") {
8737
+ // 配置类型为密码输入框
8738
+ if (this.$data.isVisible) {
8520
8739
  // 当前可见 => 点击改变为隐藏
8521
- this.$data.isView = false;
8740
+ this.$data.isVisible = false;
8522
8741
  // 显示输入框内容，且更换图标为隐藏图标
8523
8742
  this.setInputType("text");
8524
8743
  this.setCircleIcon(PopsIcon.getIcon("hide"));
8525
8744
  }
8526
8745
  else {
8527
8746
  // 当前不可见 => 点击改变为显示
8528
- this.$data.isView = true;
8747
+ this.$data.isVisible = true;
8529
8748
  // 隐藏输入框内容，且更换图标为显示图标
8530
8749
  this.setInputType("password");
8531
8750
  this.setCircleIcon(PopsIcon.getIcon("view"));
@@ -8536,48 +8755,103 @@ System.register('pops', [], (function (exports) {
8536
8755
  // 清空内容
8537
8756
  this.setInputValue("");
8538
8757
  // 获取焦点
8539
- this.$ele.input.focus();
8758
+ this.$el.input.focus();
8540
8759
  // 触发内容改变事件
8541
- this.$ele.input.dispatchEvent(new Event("input"));
8760
+ this.$el.input.dispatchEvent(new Event("input"));
8542
8761
  }
8543
8762
  });
8544
8763
  },
8545
8764
  /**
8546
8765
  * 监听输入框内容改变
8547
8766
  */
8548
- setInputChangeEvent() {
8549
- popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
8550
- this.$data.value = this.$ele.input.value;
8551
- if (!viewConfig.isPassword) {
8767
+ onValueChange() {
8768
+ popsDOMUtils.on(this.$el.input, ["input", "propertychange"], void 0, (event) => {
8769
+ this.$data.value = this.$el.input.value;
8770
+ if (inputType !== "password") {
8552
8771
  // 不是密码框
8553
- if (this.$ele.input.value !== "" && this.$ele.icon.innerHTML === "") {
8772
+ if (this.$el.input.value !== "" && this.$el.icon.innerHTML === "" && this.isTextInputType()) {
8554
8773
  // 不为空，显示清空图标
8555
8774
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8556
- this.setCircleIconClickEvent();
8775
+ this.onIconClick();
8776
+ this.showCircleIconWrapper();
8557
8777
  }
8558
- else if (this.$ele.input.value === "") {
8778
+ else if (this.$el.input.value === "") {
8559
8779
  this.removeCircleIcon();
8560
8780
  }
8561
8781
  }
8562
8782
  if (typeof viewConfig.callback === "function") {
8563
- if (viewConfig.isNumber) {
8564
- viewConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
8783
+ let ret;
8784
+ if (viewConfig.inputType === "number") {
8785
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber);
8786
+ }
8787
+ else if (this.isDateInputType()) {
8788
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber, this.$el.input.valueAsDate);
8789
+ }
8790
+ else {
8791
+ ret = viewConfig.callback(event, this.$el.input.value);
8792
+ }
8793
+ if (ret) {
8794
+ if (ret.valid) {
8795
+ // 校验通过
8796
+ this.removeValidErrorMsg();
8797
+ }
8798
+ else {
8799
+ // 校验失败
8800
+ // 显示失败提示
8801
+ this.addValidErrorMsg(ret.message);
8802
+ }
8565
8803
  }
8566
8804
  else {
8567
- viewConfig.callback(event, this.$ele.input.value);
8805
+ this.removeValidErrorMsg();
8568
8806
  }
8569
8807
  }
8570
8808
  });
8571
8809
  },
8572
- };
8573
- PopsPanelInput.init();
8574
- Reflect.set($li, "data-input", PopsPanelInput);
8575
- return $li;
8576
- },
8577
- /**
8578
- * type ==> textarea
8579
- * 获取中间容器的元素<li>
8580
- * @param viewConfig
8810
+ /**
8811
+ * 主动触发输入框改变事件
8812
+ */
8813
+ triggerValueChange() {
8814
+ this.$el.input.dispatchEvent(new Event("input"));
8815
+ },
8816
+ /**
8817
+ * 添加校验失败的提示信息
8818
+ * @param msg 提示信息
8819
+ */
8820
+ addValidErrorMsg(msg) {
8821
+ if (msg == null)
8822
+ return;
8823
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error") ||
8824
+ popsDOMUtils.createElement("div", {
8825
+ className: "pops-panel-input-valid-error",
8826
+ innerHTML: /*html*/ `<span></span>`,
8827
+ });
8828
+ const $validErrorMsgSpan = $validErrorMsg.querySelector("span");
8829
+ if ($validErrorMsgSpan.innerHTML !== msg) {
8830
+ PopsSafeUtils.setSafeHTML($validErrorMsgSpan, msg);
8831
+ }
8832
+ if (!$validErrorMsg.parentElement) {
8833
+ popsDOMUtils.after(this.$el.panelInputInner, $validErrorMsg);
8834
+ }
8835
+ },
8836
+ /**
8837
+ * 移除校验失败的提示信息
8838
+ */
8839
+ removeValidErrorMsg() {
8840
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error");
8841
+ $validErrorMsg?.remove();
8842
+ },
8843
+ };
8844
+ PopsPanelInput.init();
8845
+ Reflect.set($li, "data-input", PopsPanelInput);
8846
+ return {
8847
+ $el: $li,
8848
+ handler: PopsPanelInput,
8849
+ };
8850
+ },
8851
+ /**
8852
+ * type ==> textarea
8853
+ * 获取中间容器的元素<li>
8854
+ * @param viewConfig
8581
8855
  */
8582
8856
  createSectionContainerItem_textarea(viewConfig) {
8583
8857
  const $li = popsDOMUtils.createElement("li");
@@ -8610,7 +8884,7 @@ System.register('pops', [], (function (exports) {
8610
8884
  },
8611
8885
  init() {
8612
8886
  this.setValue(this.$data.value);
8613
- this.setChangeEvent();
8887
+ this.onValueChange();
8614
8888
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8615
8889
  if (disabled) {
8616
8890
  this.disable();
@@ -8636,7 +8910,7 @@ System.register('pops', [], (function (exports) {
8636
8910
  /**
8637
8911
  * 监听选择内容改变
8638
8912
  */
8639
- setChangeEvent() {
8913
+ onValueChange() {
8640
8914
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
8641
8915
  const value = this.$ele.textarea.value;
8642
8916
  this.$data.value = value;
@@ -8648,7 +8922,10 @@ System.register('pops', [], (function (exports) {
8648
8922
  };
8649
8923
  PopsPanelTextArea.init();
8650
8924
  Reflect.set($li, "data-textarea", PopsPanelTextArea);
8651
- return $li;
8925
+ return {
8926
+ $el: $li,
8927
+ handler: PopsPanelTextArea,
8928
+ };
8652
8929
  },
8653
8930
  /**
8654
8931
  * type ==> select
@@ -8675,178 +8952,820 @@ System.register('pops', [], (function (exports) {
8675
8952
  <select></select>
8676
8953
  </div>
8677
8954
  `);
8678
- const PopsPanelSelect = {
8679
- [Symbol.toStringTag]: "PopsPanelSelect",
8680
- $ele: {
8681
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8682
- panelSelect: $li.querySelector(".pops-panel-select"),
8683
- select: $li.querySelector(".pops-panel-select select"),
8684
- },
8685
- $eleKey: {
8686
- disable: "__disable__",
8687
- value: "__value__",
8688
- viewConfig: "data-view-config",
8689
- },
8690
- $data: {
8691
- defaultValue: viewConfig.getValue(),
8692
- },
8693
- init() {
8694
- popsDOMUtils.addClassName(this.$ele.panelSelect, PopsCommonCSSClassName.userSelectNone);
8695
- this.initOption();
8696
- this.setChangeEvent();
8697
- this.setClickEvent();
8698
- const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8699
- if (disabled) {
8700
- this.disable();
8701
- }
8702
- },
8703
- /**
8704
- * 给option元素设置属性
8705
- * @param $ele
8706
- * @param key
8707
- * @param value
8708
- */
8709
- setNodeValue($ele, key, value) {
8710
- Reflect.set($ele, key, value);
8711
- },
8712
- /**
8713
- * 获取option元素上设置的属性
8714
- * @param $ele
8715
- * @param value
8716
- * @param key
8717
- */
8718
- getNodeValue($ele, key) {
8719
- return Reflect.get($ele, key);
8720
- },
8721
- /**
8722
- * 禁用选项
8723
- */
8724
- disable() {
8725
- this.$ele.select.setAttribute("disabled", "true");
8726
- popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8727
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8728
- },
8729
- /**
8730
- * 取消禁用
8731
- */
8732
- notDisable() {
8733
- this.$ele.select.removeAttribute("disabled");
8734
- popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8735
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8736
- },
8737
- /**
8738
- * 判断是否禁用
8739
- */
8740
- isDisabled() {
8741
- return (this.$ele.select.hasAttribute("disabled") ||
8742
- popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable"));
8743
- },
8744
- /**
8745
- * 初始化选项
8746
- */
8747
- initOption() {
8748
- viewConfig.data.forEach((dataItem) => {
8749
- // 初始化默认选中
8750
- const optionElement = popsDOMUtils.createElement("option");
8751
- this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
8752
- this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
8753
- this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
8754
- if (dataItem.value === this.$data.defaultValue) {
8755
- this.setOptionSelected(optionElement);
8955
+ let handler;
8956
+ if (viewConfig.useDialog) {
8957
+ const PopsPanelSelect = {
8958
+ [Symbol.toStringTag]: "PopsPanelSelect",
8959
+ $el: {
8960
+ itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8961
+ /** 选择框容器 */
8962
+ $container: void 0,
8963
+ /** 选择框包裹的容器 */
8964
+ $wrapper: void 0,
8965
+ /** 内容区域 */
8966
+ $section: void 0,
8967
+ /** 手动输入 */
8968
+ $selectedInputWrapper: void 0,
8969
+ /** 灰色提示语 */
8970
+ $selectedPlaceHolderWrapper: void 0,
8971
+ /** 下拉箭头区域 */
8972
+ $suffix: void 0,
8973
+ /** 下拉箭头图标 */
8974
+ $suffixIcon: void 0,
8975
+ /** 下拉列表弹窗的下拉列表容器 */
8976
+ $selectDialogContainer: void 0,
8977
+ },
8978
+ $data: {
8979
+ /**
8980
+ * 数据
8981
+ */
8982
+ data: [],
8983
+ /**
8984
+ * 默认值
8985
+ */
8986
+ defaultValue: viewConfig.getValue(),
8987
+ /**
8988
+ * 选择的信息
8989
+ */
8990
+ selectedData: void 0,
8991
+ /**
8992
+ * 是否验证通过
8993
+ */
8994
+ isValidSuccess: true,
8995
+ /**
8996
+ * 箭头旋转的属性
8997
+ */
8998
+ rotateKey: "data-show-option",
8999
+ },
9000
+ /** 初始化 */
9001
+ init() {
9002
+ this.initDefault();
9003
+ this.initEl();
9004
+ this.initPlaceHolder();
9005
+ this.renderSelectText();
9006
+ this.onShowSelectDialogClick();
9007
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9008
+ if (disabled) {
9009
+ this.disable();
8756
9010
  }
8757
- optionElement.innerText = dataItem.text;
8758
- this.$ele.select.appendChild(optionElement);
8759
- });
8760
- },
8761
- /**
8762
- * 设置选项选中
8763
- */
8764
- setOptionSelected($option) {
8765
- $option.setAttribute("selected", "true");
8766
- },
8767
- /** 检测所有option并设置禁用状态 */
8768
- setSelectOptionsDisableStatus() {
8769
- if (this.$ele.select.options && this.$ele.select.options.length) {
8770
- Array.from(this.$ele.select.options).forEach((optionItem) => {
8771
- this.setOptionDisableStatus(optionItem);
9011
+ },
9012
+ /** 初始化默认值 */
9013
+ initDefault() {
9014
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9015
+ this.$data.data.forEach((dataItem) => {
9016
+ if (this.$data.defaultValue.includes(dataItem.value)) {
9017
+ // 初始化选中的配置
9018
+ this.resetCurrentSelectedInfo();
9019
+ this.updateSelectedInfo(dataItem);
9020
+ }
8772
9021
  });
8773
- }
8774
- },
8775
- /** 设置禁用状态 */
8776
- setOptionDisableStatus(optionElement) {
8777
- let disable = false;
8778
- const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
8779
- if (optionDisableAttr === "function") {
8780
- const value = this.getNodeValue(optionElement, this.$eleKey.value);
8781
- disable = Boolean(optionDisableAttr(value));
8782
- }
8783
- if (disable) {
8784
- optionElement.setAttribute("disabled", "true");
8785
- }
8786
- else {
8787
- optionElement.removeAttribute("disabled");
8788
- }
8789
- },
8790
- /** 获取option上的信息 */
8791
- getSelectOptionInfo($option) {
8792
- const optionValue = this.getNodeValue($option, this.$eleKey.value);
8793
- const optionText = $option.innerText || $option.textContent;
8794
- const views = this.getNodeValue($option, this.$eleKey.viewConfig);
8795
- return {
8796
- value: optionValue,
8797
- text: optionText,
8798
- views: views,
8799
- $option: $option,
8800
- };
8801
- },
8802
- /**
8803
- * 监听选择内容改变
8804
- */
8805
- setChangeEvent() {
8806
- popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8807
- const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8808
- const selectInfo = this.getSelectOptionInfo($isSelectedElement);
8809
- this.setSelectOptionsDisableStatus();
9022
+ },
9023
+ /** 初始化$ele变量 */
9024
+ initEl() {
9025
+ this.$el.$container = $li.querySelector(".pops-panel-select");
9026
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9027
+ /*html*/ `
9028
+ <div class="el-select__wrapper">
9029
+ <div class="el-select__selection">
9030
+ <!-- 这个是用于手动输入的，这里暂不适配 -->
9031
+ <div class="el-select__selected-item el-select__input-wrapper"></div>
9032
+ <!-- 这个是placeholder -->
9033
+ <div class="el-select__selected-item el-select__placeholder"></div>
9034
+ </div>
9035
+ <!-- 下拉箭头 -->
9036
+ <div class="el-select__suffix">
9037
+ <i class="el-icon el-select__caret el-select__icon">
9038
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9039
+ <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
9040
+ </svg>
9041
+ </i>
9042
+ </div>
9043
+ </div>`);
9044
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9045
+ this.$el.$section = $li.querySelector(".el-select__selection");
9046
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
9047
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
9048
+ this.$el.$suffix = $li.querySelector(".el-select__suffix");
9049
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
9050
+ // 先把手动输入框隐藏
9051
+ this.hideInputWrapper();
9052
+ },
9053
+ /**
9054
+ * 初始化提示文字
9055
+ */
9056
+ initPlaceHolder() {
9057
+ let placeholder = "--请选择--";
9058
+ if (typeof viewConfig.placeholder === "string") {
9059
+ placeholder = viewConfig.placeholder;
9060
+ }
9061
+ else if (typeof viewConfig.placeholder === "function") {
9062
+ const placeholderResult = viewConfig.placeholder();
9063
+ if (typeof placeholderResult === "string") {
9064
+ placeholder = placeholderResult;
9065
+ }
9066
+ }
9067
+ /**
9068
+ * 默认提示文字的位置
9069
+ */
9070
+ const defaultSelectedTextAlign = "left";
9071
+ this.$el.$section.setAttribute("data-selected-text-align", viewConfig.selectedTextAlign || defaultSelectedTextAlign);
9072
+ const $placeholder = popsDOMUtils.createElement("span", {
9073
+ innerText: placeholder,
9074
+ });
9075
+ this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
9076
+ },
9077
+ /**
9078
+ * 重新渲染外面的已选择项的文本
9079
+ *
9080
+ * 如果未选择，显示提示文字
9081
+ */
9082
+ renderSelectText() {
9083
+ let item = this.$data.data.find((dataItem) => {
9084
+ return dataItem.value === this.$data.selectedData?.value;
9085
+ });
9086
+ if (item == null) {
9087
+ // 未找到但是有选中信息，且是自定义输入的
9088
+ if (this.$data.selectedData && this.$data.selectedData.addCustomInput) {
9089
+ item = this.$data.selectedData;
9090
+ }
9091
+ }
9092
+ if (item != null) {
9093
+ // 默认值在数据中
9094
+ // 显示该数据项的文本
9095
+ // 隐藏placeholder
9096
+ const text = typeof item.text === "function" ? item.text(item.value, item) : item.text;
9097
+ if (item.isHTML) {
9098
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, text);
9099
+ }
9100
+ else {
9101
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper,
9102
+ /*html*/ `
9103
+ <span>${text}</span>
9104
+ `);
9105
+ }
9106
+ // 显示选中的内容
9107
+ this.showInputWrapper();
9108
+ // 隐藏placeholder
9109
+ this.hidePlaceHolderWrapper();
9110
+ }
9111
+ else {
9112
+ // 仅显示placeholder
9113
+ this.hideInputWrapper();
9114
+ this.showPlaceHolderWrapper();
9115
+ }
9116
+ },
9117
+ /**
9118
+ * 禁用选项容器
9119
+ */
9120
+ disable() {
9121
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
9122
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9123
+ },
9124
+ /**
9125
+ * 取消禁用选项容器
9126
+ */
9127
+ cancleDisable() {
9128
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
9129
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9130
+ },
9131
+ /**
9132
+ * 判断当前是否已禁用选项容器
9133
+ */
9134
+ isDisabled() {
9135
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable") ||
9136
+ popsDOMUtils.containsClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled));
9137
+ },
9138
+ /**
9139
+ * 设置选择列表的点击事件
9140
+ *
9141
+ * 点击显示选择列表的弹窗
9142
+ */
9143
+ onShowSelectDialogClick() {
9144
+ const defaultCSS = PopsCSS.panelComponents_Select;
9145
+ popsDOMUtils.on(this.$el.$container, "click", () => {
9146
+ if (this.isDisabled()) {
9147
+ return;
9148
+ }
9149
+ /** 当前已选中的值 */
9150
+ const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9151
+ /**
9152
+ * 弹窗关闭的回调
9153
+ */
9154
+ const dialogCloseCallback = () => {
9155
+ if (this.$data.selectedData?.addCustomInput && !this.$data.isValidSuccess) {
9156
+ // 当前是自定义输入的且未通过校验
9157
+ return false;
9158
+ }
9159
+ else {
9160
+ // 清除自定义输入的值
9161
+ this.getAllSelectItems(false).forEach((it) => {
9162
+ if (!it.data.addCustomInput)
9163
+ return;
9164
+ it.data.value = "";
9165
+ it.data.text = "";
9166
+ this.onValueChangeCallback(it.data);
9167
+ });
9168
+ }
9169
+ this.renderSelectText();
9170
+ this.$el.$selectDialogContainer = null;
9171
+ this.$el.$container.removeAttribute(this.$data.rotateKey);
9172
+ };
9173
+ this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
9174
+ const confirmConfig = popsUtils.assign({
9175
+ title: {
9176
+ text: "请勾选需要选择的选项",
9177
+ position: "center",
9178
+ },
9179
+ content: {
9180
+ text: /*html*/ `<ul class="select-container"></ul>`,
9181
+ html: true,
9182
+ },
9183
+ btn: {
9184
+ ok: {
9185
+ enable: false,
9186
+ },
9187
+ close: {
9188
+ enable: true,
9189
+ callback(evtConfig) {
9190
+ const ret = dialogCloseCallback();
9191
+ if (typeof ret === "boolean" && !ret) {
9192
+ return;
9193
+ }
9194
+ evtConfig.close();
9195
+ },
9196
+ },
9197
+ },
9198
+ mask: {
9199
+ enable: true,
9200
+ clickCallBack(originalRun) {
9201
+ const ret = dialogCloseCallback();
9202
+ if (typeof ret === "boolean" && !ret) {
9203
+ return;
9204
+ }
9205
+ originalRun();
9206
+ },
9207
+ clickEvent: {
9208
+ toClose: true,
9209
+ },
9210
+ },
9211
+ drag: true,
9212
+ dragLimit: true,
9213
+ width: "300px",
9214
+ height: "auto",
9215
+ style: /*css*/ `
9216
+ ${defaultCSS}
9217
+
9218
+ ${PopsCSS.panelCSS}
9219
+
9220
+ ${style || ""}
9221
+ `,
9222
+ }, userConfirmConfig);
9223
+ const $dialog = PopsAlert.init(confirmConfig);
9224
+ const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
9225
+ // 初始化选项元素
9226
+ this.$data.data.forEach((item) => {
9227
+ if (item.addCustomInput) {
9228
+ // 添加自定义输入的
9229
+ const customInputDataOption = item;
9230
+ const $customInputSelecItem = this.createSelectItemElement(customInputDataOption);
9231
+ const context = this;
9232
+ const PanelInput = that.createSectionContainerItem_input({
9233
+ type: "input",
9234
+ text: "",
9235
+ getValue() {
9236
+ return customInputDataOption.value;
9237
+ },
9238
+ callback(evt, value) {
9239
+ customInputDataOption.text = value;
9240
+ customInputDataOption.value = value;
9241
+ if (typeof customInputDataOption.onValid === "function") {
9242
+ const ret = customInputDataOption.onValid(customInputDataOption);
9243
+ context.$data.isValidSuccess = ret.valid;
9244
+ if (ret.valid) {
9245
+ PanelInputHandler.removeValidErrorMsg();
9246
+ }
9247
+ else {
9248
+ PanelInputHandler.addValidErrorMsg(ret.message);
9249
+ return ret;
9250
+ }
9251
+ }
9252
+ context.updateSelectedInfo(customInputDataOption);
9253
+ context.onValueChangeCallback(customInputDataOption);
9254
+ },
9255
+ });
9256
+ // 获取输入框处理函数
9257
+ const PanelInputHandler = PanelInput.handler;
9258
+ const $inputContainer = PanelInput.$el.querySelector(".pops-panel-input");
9259
+ PopsSafeUtils.setSafeHTML($customInputSelecItem, "");
9260
+ $customInputSelecItem.appendChild($inputContainer);
9261
+ // 添加到confirm中
9262
+ $selectContainer.appendChild($customInputSelecItem);
9263
+ // 设置项的点击事件
9264
+ this.onSelectItemClick(customInputDataOption, $customInputSelecItem);
9265
+ }
9266
+ else {
9267
+ const $select = this.createSelectItemElement(item);
9268
+ // 添加到confirm中
9269
+ $selectContainer.appendChild($select);
9270
+ // 设置项的点击事件
9271
+ this.onSelectItemClick(item, $select);
9272
+ }
9273
+ });
9274
+ this.$el.$selectDialogContainer = $selectContainer;
9275
+ // 初始化状态
9276
+ this.updateAllSelectItemStatus();
9277
+ });
9278
+ },
9279
+ /**
9280
+ * 选中的值改变的回调
9281
+ * @param data 当前的选中信息
9282
+ */
9283
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9284
+ // 动态更新禁用状态、选中状态
9285
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9286
+ // 触发回调
8810
9287
  if (typeof viewConfig.callback === "function") {
8811
- viewConfig.callback(event, selectInfo.value, selectInfo.text);
9288
+ viewConfig.callback(data || this.$data.selectedData);
9289
+ }
9290
+ },
9291
+ /**
9292
+ * 更新选项弹窗内的所有选项元素的状态
9293
+ *
9294
+ * + 更新禁用状态
9295
+ * + 更新选中状态
9296
+ */
9297
+ updateAllSelectItemStatus() {
9298
+ const allSelectItems = this.getAllSelectItems(false);
9299
+ allSelectItems.forEach(($selectInfo) => {
9300
+ const { data, $select } = $selectInfo;
9301
+ // 更新文字
9302
+ this.setSelectItemText(data, $selectInfo.$select);
9303
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9304
+ // 移除选中状态
9305
+ this.removeItemSelected($select);
9306
+ // 禁用
9307
+ this.setSelectItemDisabled($select);
9308
+ }
9309
+ else {
9310
+ // 移除禁用状态
9311
+ this.removeSelectItemDisabled($select);
9312
+ }
9313
+ // 根据当前已选择的信息，判断并更新选中状态
9314
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
9315
+ // 就是这个项
9316
+ // 设置选中
9317
+ this.setItemSelected($select);
9318
+ }
9319
+ else {
9320
+ // 不是这个项
9321
+ // 移除选中状态
9322
+ this.removeItemSelected($select);
9323
+ }
9324
+ });
9325
+ },
9326
+ /**
9327
+ * 重置所有已选中的项以下状态
9328
+ *
9329
+ * + 更新选项显示的文字
9330
+ * + 移除禁用状态
9331
+ * + 移除选中状态
9332
+ */
9333
+ resetAllSelectedItemStatus() {
9334
+ const allSelectedItems = this.getAllSelectItems(true);
9335
+ if (allSelectedItems.length) {
9336
+ // 移除选中信息
9337
+ this.resetCurrentSelectedInfo();
9338
+ }
9339
+ allSelectedItems.forEach(($selectInfo) => {
9340
+ const { data, $select } = $selectInfo;
9341
+ // 更新文字
9342
+ this.setSelectItemText(data, $selectInfo.$select);
9343
+ // 移除选中状态
9344
+ this.removeItemSelected($select);
9345
+ // 取消禁用
9346
+ this.removeSelectItemDisabled($select);
9347
+ });
9348
+ },
9349
+ /**
9350
+ * 设置选项元素选中
9351
+ * @param $el 选项元素
9352
+ */
9353
+ setItemSelected($el) {
9354
+ if (this.isItemSelected($el))
9355
+ return;
9356
+ $el.classList.add("select-item-is-selected");
9357
+ },
9358
+ /**
9359
+ * 移除选项元素选中
9360
+ * @param $el 选项元素
9361
+ */
9362
+ removeItemSelected($el) {
9363
+ $el.classList.remove("select-item-is-selected");
9364
+ },
9365
+ /**
9366
+ * 判断选项元素是否选中
9367
+ * @param $el
9368
+ */
9369
+ isItemSelected($el) {
9370
+ return $el.classList.contains("select-item-is-selected");
9371
+ },
9372
+ /**
9373
+ * 添加选中信息
9374
+ * @param data 选择项的数据
9375
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
9376
+ */
9377
+ addSelectedItemInfo(data) {
9378
+ this.resetCurrentSelectedInfo();
9379
+ this.updateSelectedInfo(data);
9380
+ this.onValueChangeCallback(data);
9381
+ },
9382
+ /**
9383
+ * 获取项上存储的信息
9384
+ * @param $el 选项元素
9385
+ */
9386
+ getItemDataOption($el) {
9387
+ return Reflect.get($el, "data-info");
9388
+ },
9389
+ /**
9390
+ * 移除选中信息
9391
+ * @param data 选择项的数据
9392
+ */
9393
+ removeSelectedItemInfo() {
9394
+ // 删除
9395
+ this.updateSelectedInfo();
9396
+ this.onValueChangeCallback();
9397
+ },
9398
+ /**
9399
+ * 更新选中信息
9400
+ * @param data 数据
9401
+ */
9402
+ updateSelectedInfo(data) {
9403
+ // 先删除再赋值
9404
+ this.$data.selectedData = void 0;
9405
+ if (data) {
9406
+ if (data.addCustomInput && data.value.toString() === "") {
9407
+ // 自定义输入框，但是内容是空字符串
9408
+ // 不更新选中信息
9409
+ return;
9410
+ }
9411
+ this.$data.selectedData = data;
8812
9412
  }
8813
- const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
8814
- if (Array.isArray(views)) {
8815
- // 如果成功创建，加入到中间容器中
8816
- const childUListClassName = "pops-panel-select-child-forms";
8817
- // 移除旧的元素
8818
- while ($li.nextElementSibling) {
8819
- if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8820
- $li.nextElementSibling.remove();
9413
+ },
9414
+ /**
9415
+ * 从保存的已选中的信息列表中移除目标信息
9416
+ */
9417
+ resetCurrentSelectedInfo() {
9418
+ this.updateSelectedInfo();
9419
+ },
9420
+ /**
9421
+ * 获取所有选项的信息
9422
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
9423
+ * + true （默认）仅获取选中项的信息
9424
+ * + false 获取所有选择项的信息
9425
+ */
9426
+ getAllSelectItems(onlySelected = true) {
9427
+ return Array.from(this.$el.$selectDialogContainer?.querySelectorAll(".select-item") ?? [])
9428
+ .map(($select) => {
9429
+ const data = this.getItemDataOption($select);
9430
+ const result = {
9431
+ /** 选项信息数据 */
9432
+ data: data,
9433
+ /** 选项元素 */
9434
+ $select: $select,
9435
+ };
9436
+ if (onlySelected) {
9437
+ // 仅选中
9438
+ const isSelected = this.isItemSelected($select);
9439
+ if (isSelected) {
9440
+ return result;
9441
+ }
9442
+ return;
9443
+ }
9444
+ else {
9445
+ return result;
9446
+ }
9447
+ })
9448
+ .filter((item) => {
9449
+ return item != null;
9450
+ });
9451
+ },
9452
+ /**
9453
+ * 创建一个选择项元素
9454
+ * @param data 选择项的数据
9455
+ */
9456
+ createSelectItemElement(data) {
9457
+ const $select = popsDOMUtils.createElement("li", {
9458
+ className: "select-item",
9459
+ innerHTML: /*html*/ `<span class="select-item-text"></span>`,
9460
+ });
9461
+ this.setSelectItemText(data, $select);
9462
+ Reflect.set($select, "data-info", data);
9463
+ return $select;
9464
+ },
9465
+ /**
9466
+ * 设置选择项的文字
9467
+ * @param data 选择项的数据
9468
+ * @param $select 选择项元素
9469
+ */
9470
+ setSelectItemText(data, $select) {
9471
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9472
+ const $selectSpan = $select.querySelector(".select-item-text");
9473
+ if (!$selectSpan)
9474
+ return;
9475
+ if (data.isHTML) {
9476
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9477
+ }
9478
+ else {
9479
+ $selectSpan.innerText = text;
9480
+ }
9481
+ },
9482
+ /**
9483
+ * 设置选择项禁用
9484
+ * @param $select 选择项元素
9485
+ */
9486
+ setSelectItemDisabled($select) {
9487
+ $select.setAttribute("aria-disabled", "true");
9488
+ $select.setAttribute("disabled", "true");
9489
+ },
9490
+ /**
9491
+ * 移除选择项的禁用状态
9492
+ * @param $select 选择项元素
9493
+ */
9494
+ removeSelectItemDisabled($select) {
9495
+ $select.removeAttribute("aria-disabled");
9496
+ $select.removeAttribute("disabled");
9497
+ },
9498
+ /**
9499
+ * 判断选择项是否禁用
9500
+ * @param $select 选择项元素
9501
+ */
9502
+ isSelectItemDisabled($select) {
9503
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
9504
+ },
9505
+ /**
9506
+ * 设置选择项的点击事件
9507
+ * @param data 该选择项的信息
9508
+ * @param $select 该选择项元素
9509
+ */
9510
+ onSelectItemClick(data, $select) {
9511
+ const updateCustomInputStatus = () => {
9512
+ this.setItemSelected($select);
9513
+ this.addSelectedItemInfo(data);
9514
+ };
9515
+ popsDOMUtils.on($select, "click", (event) => {
9516
+ popsDOMUtils.preventEvent(event);
9517
+ const $click = event.target;
9518
+ if (data?.addCustomInput && $click instanceof HTMLInputElement) {
9519
+ // 自定义输入框 单独处理值更新，选中
9520
+ updateCustomInputStatus();
9521
+ return;
9522
+ }
9523
+ if (this.isSelectItemDisabled($select)) {
9524
+ // 被禁用了
9525
+ return;
9526
+ }
9527
+ if (typeof viewConfig.clickCallBack === "function") {
9528
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9529
+ if (typeof clickResult === "boolean" && !clickResult) {
9530
+ return;
9531
+ }
9532
+ }
9533
+ if (data?.addCustomInput) {
9534
+ // 自定义输入框 添加选中
9535
+ updateCustomInputStatus();
9536
+ }
9537
+ else {
9538
+ // 修改选中状态
9539
+ if (this.isItemSelected($select)) {
9540
+ // 移除选中
9541
+ this.removeItemSelected($select);
9542
+ this.removeSelectedItemInfo();
8821
9543
  }
8822
9544
  else {
8823
- break;
9545
+ // 添加选中
9546
+ this.setItemSelected($select);
9547
+ this.addSelectedItemInfo(data);
8824
9548
  }
8825
9549
  }
8826
- const $childUList = popsDOMUtils.createElement("ul");
8827
- $childUList.className = childUListClassName;
8828
- popsDOMUtils.after($li, $childUList);
8829
- that.uListContainerAddItem(viewConfig, {
8830
- ulElement: $childUList,
9550
+ });
9551
+ },
9552
+ /** 显示输入框 */
9553
+ showInputWrapper() {
9554
+ popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
9555
+ },
9556
+ /** 隐藏输入框 */
9557
+ hideInputWrapper() {
9558
+ popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
9559
+ },
9560
+ /** 显示palceholder */
9561
+ showPlaceHolderWrapper() {
9562
+ popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
9563
+ },
9564
+ /** 隐藏palceholder */
9565
+ hidePlaceHolderWrapper() {
9566
+ popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
9567
+ },
9568
+ };
9569
+ PopsPanelSelect.init();
9570
+ Reflect.set($li, "data-select", PopsPanelSelect);
9571
+ handler = PopsPanelSelect;
9572
+ }
9573
+ else {
9574
+ const PopsPanelSelectNative = {
9575
+ [Symbol.toStringTag]: "PopsPanelSelectNative",
9576
+ $el: {
9577
+ itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
9578
+ panelSelect: $li.querySelector(".pops-panel-select"),
9579
+ select: $li.querySelector(".pops-panel-select select"),
9580
+ },
9581
+ $eleKey: {
9582
+ disable: "__disable__",
9583
+ value: "__value__",
9584
+ viewConfig: "data-view-config",
9585
+ },
9586
+ $data: {
9587
+ data: [],
9588
+ defaultValue: viewConfig.getValue(),
9589
+ },
9590
+ init() {
9591
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9592
+ popsDOMUtils.addClassName(this.$el.panelSelect, PopsCommonCSSClassName.userSelectNone);
9593
+ this.initOption();
9594
+ this.onValueChange();
9595
+ this.onClick();
9596
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9597
+ if (disabled) {
9598
+ this.disable();
9599
+ }
9600
+ },
9601
+ /**
9602
+ * 给option元素设置属性
9603
+ * @param $ele
9604
+ * @param key
9605
+ * @param value
9606
+ */
9607
+ setNodeValue($ele, key, value) {
9608
+ Reflect.set($ele, key, value);
9609
+ },
9610
+ /**
9611
+ * 获取option元素上设置的属性
9612
+ * @param $ele
9613
+ * @param value
9614
+ * @param key
9615
+ */
9616
+ getNodeValue($ele, key) {
9617
+ return Reflect.get($ele, key);
9618
+ },
9619
+ /**
9620
+ * 禁用选项
9621
+ */
9622
+ disable() {
9623
+ this.$el.select.setAttribute("disabled", "true");
9624
+ popsDOMUtils.addClassName(this.$el.panelSelect, "pops-panel-select-disable");
9625
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9626
+ },
9627
+ /**
9628
+ * 取消禁用
9629
+ */
9630
+ notDisable() {
9631
+ this.$el.select.removeAttribute("disabled");
9632
+ popsDOMUtils.removeClassName(this.$el.panelSelect, "pops-panel-select-disable");
9633
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9634
+ },
9635
+ /**
9636
+ * 判断是否禁用
9637
+ */
9638
+ isDisabled() {
9639
+ return (this.$el.select.hasAttribute("disabled") ||
9640
+ popsDOMUtils.containsClassName(this.$el.panelSelect, "pops-panel-select-disable"));
9641
+ },
9642
+ /**
9643
+ * 初始化选项
9644
+ */
9645
+ initOption() {
9646
+ this.$data.data.forEach((dataItem) => {
9647
+ // 初始化默认选中
9648
+ const optionElement = popsDOMUtils.createElement("option");
9649
+ this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
9650
+ this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
9651
+ this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
9652
+ if (dataItem.value === this.$data.defaultValue) {
9653
+ this.setOptionSelected(optionElement);
9654
+ }
9655
+ if (typeof dataItem.text === "function") {
9656
+ optionElement.innerText = dataItem.text(dataItem.value, dataItem);
9657
+ }
9658
+ else {
9659
+ optionElement.innerText = dataItem.text;
9660
+ }
9661
+ this.$el.select.appendChild(optionElement);
9662
+ });
9663
+ },
9664
+ /**
9665
+ * 设置选项选中
9666
+ * @param $option
9667
+ */
9668
+ setOptionSelected($option) {
9669
+ $option.setAttribute("selected", "true");
9670
+ },
9671
+ /**
9672
+ * 检测所有option并设置禁用状态
9673
+ */
9674
+ setSelectOptionsDisableStatus() {
9675
+ if (this.$el.select.options && this.$el.select.options.length) {
9676
+ Array.from(this.$el.select.options).forEach((optionItem) => {
9677
+ this.setOptionDisableStatus(optionItem);
8831
9678
  });
8832
9679
  }
8833
- });
8834
- },
8835
- /**
8836
- * 监听点击事件
8837
- */
8838
- setClickEvent() {
8839
- popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
8840
- this.setSelectOptionsDisableStatus();
8841
- if (typeof viewConfig.clickCallBack === "function") {
8842
- viewConfig.clickCallBack(event, this.$ele.select);
9680
+ },
9681
+ /**
9682
+ * 设置禁用状态
9683
+ * @param $option
9684
+ */
9685
+ setOptionDisableStatus($option) {
9686
+ let disable = false;
9687
+ const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
9688
+ if (optionDisableAttr === "function") {
9689
+ const value = this.getNodeValue($option, this.$eleKey.value);
9690
+ disable = Boolean(optionDisableAttr(value));
8843
9691
  }
8844
- });
8845
- },
9692
+ if (disable) {
9693
+ $option.setAttribute("disabled", "true");
9694
+ }
9695
+ else {
9696
+ $option.removeAttribute("disabled");
9697
+ }
9698
+ },
9699
+ /**
9700
+ * 获取option上的信息
9701
+ * @param $option
9702
+ */
9703
+ getSelectOptionInfo($option) {
9704
+ const optionValue = this.getNodeValue($option, this.$eleKey.value);
9705
+ const optionText = $option.innerText || $option.textContent;
9706
+ const views = this.getNodeValue($option, this.$eleKey.viewConfig);
9707
+ return {
9708
+ value: optionValue,
9709
+ text: optionText,
9710
+ views: views,
9711
+ $option: $option,
9712
+ };
9713
+ },
9714
+ /**
9715
+ * 监听选择内容改变
9716
+ */
9717
+ onValueChange() {
9718
+ popsDOMUtils.on(this.$el.select, "change", () => {
9719
+ const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
9720
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9721
+ this.setSelectOptionsDisableStatus();
9722
+ if (typeof viewConfig.callback === "function") {
9723
+ viewConfig.callback(selectInfo);
9724
+ }
9725
+ const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
9726
+ if (Array.isArray(views)) {
9727
+ // 如果成功创建，加入到中间容器中
9728
+ const childUListClassName = "pops-panel-select-child-forms";
9729
+ // 移除旧的元素
9730
+ while ($li.nextElementSibling) {
9731
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
9732
+ $li.nextElementSibling.remove();
9733
+ }
9734
+ else {
9735
+ break;
9736
+ }
9737
+ }
9738
+ const $childUList = popsDOMUtils.createElement("ul");
9739
+ $childUList.className = childUListClassName;
9740
+ popsDOMUtils.after($li, $childUList);
9741
+ that.uListContainerAddItem(viewConfig, {
9742
+ ulElement: $childUList,
9743
+ });
9744
+ }
9745
+ });
9746
+ },
9747
+ /**
9748
+ * 监听点击事件
9749
+ */
9750
+ onClick() {
9751
+ popsDOMUtils.on(this.$el.select, "click", void 0, (event) => {
9752
+ this.setSelectOptionsDisableStatus();
9753
+ if (typeof viewConfig.clickCallBack === "function") {
9754
+ const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
9755
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9756
+ viewConfig.clickCallBack(event, selectInfo);
9757
+ }
9758
+ });
9759
+ },
9760
+ };
9761
+ PopsPanelSelectNative.init();
9762
+ Reflect.set($li, "data-select", PopsPanelSelectNative);
9763
+ handler = PopsPanelSelectNative;
9764
+ }
9765
+ return {
9766
+ $el: $li,
9767
+ handler: handler,
8846
9768
  };
8847
- PopsPanelSelect.init();
8848
- Reflect.set($li, "data-select", PopsPanelSelect);
8849
- return $li;
8850
9769
  },
8851
9770
  /**
8852
9771
  * type ==> select-multiple
@@ -8916,9 +9835,9 @@ System.register('pops', [], (function (exports) {
8916
9835
  /** 默认值 */
8917
9836
  defaultValue: viewConfig.getValue(),
8918
9837
  /**
8919
- * 选择的信息
9838
+ * 已选择的信息
8920
9839
  */
8921
- selectInfo: [],
9840
+ selectedDataList: [],
8922
9841
  /**
8923
9842
  * 箭头旋转的属性
8924
9843
  */
@@ -8930,7 +9849,7 @@ System.register('pops', [], (function (exports) {
8930
9849
  this.inintEl();
8931
9850
  this.initPlaceHolder();
8932
9851
  this.initTagElement();
8933
- this.setSelectContainerClickEvent();
9852
+ this.onShowSelectDialogClick();
8934
9853
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8935
9854
  if (disabled) {
8936
9855
  this.disable();
@@ -8941,12 +9860,7 @@ System.register('pops', [], (function (exports) {
8941
9860
  viewConfig.data.forEach((dataItem) => {
8942
9861
  if (this.$data.defaultValue.includes(dataItem.value)) {
8943
9862
  // 初始化选中的配置
8944
- this.$data.selectInfo.push({
8945
- text: dataItem.text,
8946
- value: dataItem.value,
8947
- isHTML: Boolean(dataItem.isHTML),
8948
- disable: dataItem.disable?.bind(dataItem),
8949
- });
9863
+ this.$data.selectedDataList.push(dataItem);
8950
9864
  }
8951
9865
  });
8952
9866
  },
@@ -8962,7 +9876,9 @@ System.register('pops', [], (function (exports) {
8962
9876
  // 先把手动输入框隐藏
8963
9877
  this.hideInputWrapper();
8964
9878
  },
8965
- /** 初始化提示文字 */
9879
+ /**
9880
+ * 初始化提示文字
9881
+ */
8966
9882
  initPlaceHolder() {
8967
9883
  let placeholder = "";
8968
9884
  if (typeof viewConfig.placeholder === "string") {
@@ -8979,16 +9895,18 @@ System.register('pops', [], (function (exports) {
8979
9895
  });
8980
9896
  this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
8981
9897
  },
8982
- /** 初始化tag元素 */
9898
+ /**
9899
+ * 初始化tag元素
9900
+ */
8983
9901
  initTagElement() {
8984
9902
  // 遍历数据，寻找对应的值
8985
9903
  viewConfig.data.forEach((dataItem) => {
8986
- const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
9904
+ const findValue = this.$data.selectedDataList.find((item) => item.value === dataItem.value);
8987
9905
  if (findValue) {
8988
9906
  // 存在对应的值
8989
- const selectedInfo = this.createSelectedTagItem(dataItem);
8990
- this.addSelectedTagItem(selectedInfo.$tag);
8991
- this.setSelectedItemCloseIconClickEvent({
9907
+ const selectedInfo = this.createTagItem(dataItem);
9908
+ this.addTagItem(selectedInfo.$tag);
9909
+ this.onSelectItemCloseIconClick({
8992
9910
  $tag: selectedInfo.$tag,
8993
9911
  $closeIcon: selectedInfo.$closeIcon,
8994
9912
  value: dataItem.value,
@@ -9002,8 +9920,8 @@ System.register('pops', [], (function (exports) {
9002
9920
  * 生成一个tag项
9003
9921
  * @param data 配置
9004
9922
  */
9005
- createSelectedTagItem(data) {
9006
- const $selectedItem = popsDOMUtils.createElement("div", {
9923
+ createTagItem(data) {
9924
+ const $tag = popsDOMUtils.createElement("div", {
9007
9925
  className: "el-select__selected-item el-select__choose_tag",
9008
9926
  innerHTML: /*html*/ `
9009
9927
  <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
@@ -9020,10 +9938,10 @@ System.register('pops', [], (function (exports) {
9020
9938
  `,
9021
9939
  });
9022
9940
  /** 标签 */
9023
- const $tagText = $selectedItem.querySelector(".el-select__tags-text");
9941
+ const $tagText = $tag.querySelector(".el-select__tags-text");
9024
9942
  /** 关闭图标 */
9025
- const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
9026
- const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
9943
+ const $closeIcon = $tag.querySelector(".el-icon.el-tag__close");
9944
+ const text = typeof data.text === "function" ? data.text(data, this.$data.selectedDataList) : data.text;
9027
9945
  if (data.isHTML) {
9028
9946
  PopsSafeUtils.setSafeHTML($tagText, text);
9029
9947
  }
@@ -9031,7 +9949,7 @@ System.register('pops', [], (function (exports) {
9031
9949
  $tagText.innerText = text;
9032
9950
  }
9033
9951
  return {
9034
- $tag: $selectedItem,
9952
+ $tag: $tag,
9035
9953
  $tagText: $tagText,
9036
9954
  $closeIcon: $closeIcon,
9037
9955
  };
@@ -9040,7 +9958,7 @@ System.register('pops', [], (function (exports) {
9040
9958
  * 添加选中项的tag元素
9041
9959
  * @param $tag 添加的元素
9042
9960
  */
9043
- addSelectedTagItem($tag) {
9961
+ addTagItem($tag) {
9044
9962
  // 往前添加
9045
9963
  // 去除前面的空白
9046
9964
  this.setSectionIsNear();
@@ -9073,8 +9991,10 @@ System.register('pops', [], (function (exports) {
9073
9991
  this.hideInputWrapper();
9074
9992
  this.hidePlaceHolderWrapper();
9075
9993
  },
9076
- /** 更新tag信息 */
9077
- updateSelectTagItem() {
9994
+ /**
9995
+ * 更新tag信息
9996
+ */
9997
+ updateTagItem() {
9078
9998
  this.$el.$section.querySelectorAll(".el-select__choose_tag").forEach(($ele) => {
9079
9999
  $ele.remove();
9080
10000
  });
@@ -9084,11 +10004,11 @@ System.register('pops', [], (function (exports) {
9084
10004
  * 选中的值改变的回调
9085
10005
  * @param selectedDataList 当前的选中信息
9086
10006
  */
9087
- selectValueChangeCallBack(selectedDataList) {
10007
+ onValueChange(selectedDataList) {
9088
10008
  // 动态更新禁用状态
9089
- this.updateSelectItem();
10009
+ this.updateAllSelectItems();
9090
10010
  if (typeof viewConfig.callback === "function") {
9091
- viewConfig.callback(selectedDataList || this.$data.selectInfo);
10011
+ viewConfig.callback(selectedDataList || this.$data.selectedDataList);
9092
10012
  }
9093
10013
  },
9094
10014
  /**
@@ -9097,31 +10017,31 @@ System.register('pops', [], (function (exports) {
9097
10017
  * + 更新禁用状态
9098
10018
  * + 更新选中状态
9099
10019
  */
9100
- updateSelectItem() {
10020
+ updateAllSelectItems() {
9101
10021
  this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
9102
10022
  const { data, $select } = $selectInfo;
9103
10023
  // 更新文字
9104
10024
  this.setSelectItemText(data, $selectInfo.$select);
9105
10025
  // 更新禁用状态
9106
- if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectInfo)) {
10026
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedDataList)) {
9107
10027
  // 禁用
9108
- this.setSelectItemDisabled($select);
10028
+ this.disableSelectItem($select);
9109
10029
  // 移除选中信息
9110
10030
  this.removeSelectedInfo(data, false);
9111
10031
  // 移除选中状态
9112
- this.removeSelectItemSelected($select);
10032
+ this.removeItemSelected($select);
9113
10033
  }
9114
10034
  else {
9115
10035
  // 取消禁用
9116
- this.removeSelectItemDisabled($select);
10036
+ this.cancleDisableSelectItem($select);
9117
10037
  }
9118
10038
  // 更新选中状态
9119
- const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
10039
+ const findValue = this.$data.selectedDataList.find((it) => it.value === data.value);
9120
10040
  if (findValue) {
9121
- this.setSelectItemSelected($select);
10041
+ this.setItemSelected($select);
9122
10042
  }
9123
10043
  else {
9124
- this.removeSelectItemSelected($select);
10044
+ this.removeItemSelected($select);
9125
10045
  }
9126
10046
  });
9127
10047
  },
@@ -9129,8 +10049,8 @@ System.register('pops', [], (function (exports) {
9129
10049
  * 设置选项元素选中
9130
10050
  * @param $select 选项元素
9131
10051
  */
9132
- setSelectItemSelected($select) {
9133
- if (this.isSelectItemSelected($select))
10052
+ setItemSelected($select) {
10053
+ if (this.isItemSelected($select))
9134
10054
  return;
9135
10055
  $select.classList.add("select-item-is-selected");
9136
10056
  },
@@ -9138,14 +10058,14 @@ System.register('pops', [], (function (exports) {
9138
10058
  * 移除选项元素选中
9139
10059
  * @param $select 选项元素
9140
10060
  */
9141
- removeSelectItemSelected($select) {
10061
+ removeItemSelected($select) {
9142
10062
  $select.classList.remove("select-item-is-selected");
9143
10063
  },
9144
10064
  /**
9145
10065
  * 判断选项元素是否选中
9146
10066
  * @param $select
9147
10067
  */
9148
- isSelectItemSelected($select) {
10068
+ isItemSelected($select) {
9149
10069
  return $select.classList.contains("select-item-is-selected");
9150
10070
  },
9151
10071
  /**
@@ -9153,18 +10073,13 @@ System.register('pops', [], (function (exports) {
9153
10073
  * @param dataList 选择项列表的数据
9154
10074
  * @param $select 选项元素
9155
10075
  */
9156
- addSelectedItemInfo(dataList, $select) {
10076
+ addItemSelected(dataList, $select) {
9157
10077
  const info = this.getSelectedItemInfo($select);
9158
10078
  const findValue = dataList.find((item) => item.value === info.value);
9159
10079
  if (!findValue) {
9160
- dataList.push({
9161
- value: info.value,
9162
- text: info.text,
9163
- isHTML: Boolean(info.isHTML),
9164
- disable: info.disable?.bind(info),
9165
- });
10080
+ dataList.push(info);
9166
10081
  }
9167
- this.selectValueChangeCallBack(dataList);
10082
+ this.onValueChange(dataList);
9168
10083
  },
9169
10084
  /**
9170
10085
  * 获取选中的项的信息
@@ -9184,7 +10099,7 @@ System.register('pops', [], (function (exports) {
9184
10099
  if (findIndex !== -1) {
9185
10100
  dataList.splice(findIndex, 1);
9186
10101
  }
9187
- this.selectValueChangeCallBack(dataList);
10102
+ this.onValueChange(dataList);
9188
10103
  },
9189
10104
  /**
9190
10105
  * 获取所有选项的信息
@@ -9204,7 +10119,7 @@ System.register('pops', [], (function (exports) {
9204
10119
  };
9205
10120
  if (onlySelected) {
9206
10121
  // 仅选中
9207
- const isSelected = this.isSelectItemSelected($select);
10122
+ const isSelected = this.isItemSelected($select);
9208
10123
  if (isSelected) {
9209
10124
  return result;
9210
10125
  }
@@ -9239,7 +10154,7 @@ System.register('pops', [], (function (exports) {
9239
10154
  * @param $select 选择项元素
9240
10155
  */
9241
10156
  setSelectItemText(data, $select) {
9242
- const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
10157
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedDataList) : data.text;
9243
10158
  const $selectSpan = $select.querySelector(".select-item-text");
9244
10159
  if (data.isHTML) {
9245
10160
  PopsSafeUtils.setSafeHTML($selectSpan, text);
@@ -9252,7 +10167,7 @@ System.register('pops', [], (function (exports) {
9252
10167
  * 设置选择项的禁用状态
9253
10168
  * @param $select 选择项元素
9254
10169
  */
9255
- setSelectItemDisabled($select) {
10170
+ disableSelectItem($select) {
9256
10171
  $select.setAttribute("aria-disabled", "true");
9257
10172
  $select.setAttribute("disabled", "true");
9258
10173
  },
@@ -9260,7 +10175,7 @@ System.register('pops', [], (function (exports) {
9260
10175
  * 移除选择项的禁用状态
9261
10176
  * @param $select 选择项元素
9262
10177
  */
9263
- removeSelectItemDisabled($select) {
10178
+ cancleDisableSelectItem($select) {
9264
10179
  $select.removeAttribute("aria-disabled");
9265
10180
  $select.removeAttribute("disabled");
9266
10181
  },
@@ -9276,7 +10191,7 @@ System.register('pops', [], (function (exports) {
9276
10191
  * @param dataList 选中的信息列表
9277
10192
  * @param $select 选择项元素
9278
10193
  */
9279
- setSelectElementClickEvent(dataList, $select) {
10194
+ onSelectItemClick(dataList, $select) {
9280
10195
  popsDOMUtils.on($select, "click", (event) => {
9281
10196
  popsDOMUtils.preventEvent(event);
9282
10197
  if (this.isSelectItemDisabled($select)) {
@@ -9290,13 +10205,13 @@ System.register('pops', [], (function (exports) {
9290
10205
  }
9291
10206
  }
9292
10207
  // 修改选中状态
9293
- if (this.isSelectItemSelected($select)) {
9294
- this.removeSelectItemSelected($select);
10208
+ if (this.isItemSelected($select)) {
10209
+ this.removeItemSelected($select);
9295
10210
  this.removeSelectedItemInfo(dataList, $select);
9296
10211
  }
9297
10212
  else {
9298
- this.setSelectItemSelected($select);
9299
- this.addSelectedItemInfo(dataList, $select);
10213
+ this.setItemSelected($select);
10214
+ this.addItemSelected(dataList, $select);
9300
10215
  }
9301
10216
  });
9302
10217
  },
@@ -9305,79 +10220,18 @@ System.register('pops', [], (function (exports) {
9305
10220
  *
9306
10221
  * 点击显示下拉列表弹窗
9307
10222
  */
9308
- setSelectContainerClickEvent() {
9309
- const defaultCSS = /*css*/ `
9310
- .select-container{
9311
- --el-font-size-base: 14px;
9312
- --el-text-color-regular: #606266;
9313
- --el-color-primary: #409eff;
9314
- --el-fill-color-light: #f5f7fa;
9315
- --el-disable-color: #a8abb2;
9316
- }
9317
- .select-item{
9318
- cursor: pointer;
9319
- font-size: var(--el-font-size-base);
9320
- padding: 0 32px 0 20px;
9321
- position: relative;
9322
- white-space: nowrap;
9323
- overflow: hidden;
9324
- text-overflow: ellipsis;
9325
- color: var(--el-text-color-regular);
9326
- height: 34px;
9327
- line-height: 34px;
9328
- box-sizing: border-box;
9329
- }
9330
- .select-item[aria-disabled],
9331
- .select-item[disabled]{
9332
- cursor: not-allowed;
9333
- color: var(--el-disable-color);
9334
- background: unset;
9335
- }
9336
- .select-item:hover{
9337
- background-color: var(--el-fill-color-light);
9338
- }
9339
- .select-item.select-item-is-selected{
9340
- color: var(--el-color-primary);
9341
- font-weight: 700;
9342
- }
9343
- .select-item.select-item-is-selected::after{
9344
- content: "";
9345
- position: absolute;
9346
- top: 50%;
9347
- right: 20px;
9348
- border-top: none;
9349
- border-right: none;
9350
- background-repeat: no-repeat;
9351
- background-position: center;
9352
- background-color: var(--el-color-primary);
9353
- mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9354
- mask-size: 100% 100%;
9355
- -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
9356
- -webkit-mask-size: 100% 100%;
9357
- transform: translateY(-50%);
9358
- width: 12px;
9359
- height: 12px;
9360
- }
9361
-
9362
-
9363
- @media (prefers-color-scheme: dark) {
9364
- .select-container{
9365
- --el-text-color-regular: #f2f2f2;
9366
- --el-disable-color: #8D9095;
9367
- --el-fill-color-light: #262727;
9368
- }
9369
- }
9370
- `;
10223
+ onShowSelectDialogClick() {
10224
+ const defaultCSS = PopsCSS.panelComponents_Select;
9371
10225
  popsDOMUtils.on(this.$el.$container, "click", () => {
9372
10226
  if (this.isDisabled()) {
9373
10227
  return;
9374
10228
  }
9375
10229
  /** 当前已选中的值 */
9376
- const selectInfo = this.$data.selectInfo;
10230
+ const selectInfo = this.$data.selectedDataList;
9377
10231
  const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9378
10232
  const dialogCloseCallback = () => {
9379
- this.$data.selectInfo = [...selectInfo];
9380
- this.updateSelectTagItem();
10233
+ this.$data.selectedDataList = [...selectInfo];
10234
+ this.updateTagItem();
9381
10235
  this.$el.$selectContainer = null;
9382
10236
  this.$el.$container.removeAttribute(this.$data.rotateKey);
9383
10237
  };
@@ -9388,9 +10242,7 @@ System.register('pops', [], (function (exports) {
9388
10242
  position: "center",
9389
10243
  },
9390
10244
  content: {
9391
- text: /*html*/ `
9392
- <ul class="select-container"></ul>
9393
- `,
10245
+ text: /*html*/ `<ul class="select-container"></ul>`,
9394
10246
  html: true,
9395
10247
  },
9396
10248
  btn: {
@@ -9418,7 +10270,7 @@ System.register('pops', [], (function (exports) {
9418
10270
  drag: true,
9419
10271
  dragLimit: true,
9420
10272
  width: "300px",
9421
- height: "300px",
10273
+ height: "auto",
9422
10274
  style: /*css*/ `
9423
10275
  ${defaultCSS}
9424
10276
 
@@ -9433,18 +10285,18 @@ System.register('pops', [], (function (exports) {
9433
10285
  // 添加到confirm中
9434
10286
  $selectContainer.appendChild($select);
9435
10287
  // 设置每一项的点击事件
9436
- this.setSelectElementClickEvent(selectInfo, $select);
10288
+ this.onSelectItemClick(selectInfo, $select);
9437
10289
  });
9438
10290
  this.$el.$selectContainer = $selectContainer;
9439
10291
  // 动态更新禁用状态
9440
- this.updateSelectItem();
10292
+ this.updateAllSelectItems();
9441
10293
  });
9442
10294
  },
9443
10295
  /**
9444
10296
  * 设置关闭图标的点击事件
9445
10297
  * @param data 选中的信息
9446
10298
  */
9447
- setSelectedItemCloseIconClickEvent(data) {
10299
+ onSelectItemCloseIconClick(data) {
9448
10300
  popsDOMUtils.on(data.$closeIcon, "click", (event) => {
9449
10301
  popsDOMUtils.preventEvent(event);
9450
10302
  if (this.isDisabled()) {
@@ -9471,7 +10323,9 @@ System.register('pops', [], (function (exports) {
9471
10323
  });
9472
10324
  },
9473
10325
  /**
9474
- * 检测tag是否为空，为空显示placeholder
10326
+ * 检测tag是否为空
10327
+ *
10328
+ * 如果为空则显示placeholder
9475
10329
  */
9476
10330
  checkTagEmpty() {
9477
10331
  if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
@@ -9496,14 +10350,14 @@ System.register('pops', [], (function (exports) {
9496
10350
  * + false 不触发值改变的回调
9497
10351
  */
9498
10352
  removeSelectedInfo(data, triggerValueChangeCallBack = true) {
9499
- for (let index = 0; index < this.$data.selectInfo.length; index++) {
9500
- const selectInfo = this.$data.selectInfo[index];
10353
+ for (let index = 0; index < this.$data.selectedDataList.length; index++) {
10354
+ const selectInfo = this.$data.selectedDataList[index];
9501
10355
  if (selectInfo.value === data.value) {
9502
- this.$data.selectInfo.splice(index, 1);
10356
+ this.$data.selectedDataList.splice(index, 1);
9503
10357
  break;
9504
10358
  }
9505
10359
  }
9506
- triggerValueChangeCallBack && this.selectValueChangeCallBack();
10360
+ triggerValueChangeCallBack && this.onValueChange();
9507
10361
  },
9508
10362
  /** 显示输入框 */
9509
10363
  showInputWrapper() {
@@ -9552,7 +10406,10 @@ System.register('pops', [], (function (exports) {
9552
10406
  };
9553
10407
  PopsPanelSelectMultiple.init();
9554
10408
  Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9555
- return $li;
10409
+ return {
10410
+ $el: $li,
10411
+ handler: PopsPanelSelectMultiple,
10412
+ };
9556
10413
  },
9557
10414
  /**
9558
10415
  * type ==> button
@@ -9593,7 +10450,7 @@ System.register('pops', [], (function (exports) {
9593
10450
  init() {
9594
10451
  this.$ele.panelButton.appendChild(this.$ele.button);
9595
10452
  this.initButton();
9596
- this.setClickEvent();
10453
+ this.onButtonClick();
9597
10454
  },
9598
10455
  initButton() {
9599
10456
  if (typeof viewConfig.buttonIcon === "string" && viewConfig.buttonIcon.trim() !== "") {
@@ -9690,7 +10547,10 @@ System.register('pops', [], (function (exports) {
9690
10547
  setButtonText(text) {
9691
10548
  PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
9692
10549
  },
9693
- setClickEvent() {
10550
+ /**
10551
+ * 设置按钮的点击事件
10552
+ */
10553
+ onButtonClick() {
9694
10554
  popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
9695
10555
  if (typeof viewConfig.callback === "function") {
9696
10556
  viewConfig.callback(event);
@@ -9700,7 +10560,10 @@ System.register('pops', [], (function (exports) {
9700
10560
  };
9701
10561
  PopsPanelButton.init();
9702
10562
  Reflect.set($li, "data-button", PopsPanelButton);
9703
- return $li;
10563
+ return {
10564
+ $el: $li,
10565
+ handler: PopsPanelButton,
10566
+ };
9704
10567
  },
9705
10568
  /**
9706
10569
  * type ==> deepMenu
@@ -9747,7 +10610,7 @@ System.register('pops', [], (function (exports) {
9747
10610
  },
9748
10611
  },
9749
10612
  init() {
9750
- this.setLiClickEvent();
10613
+ this.onLiClick();
9751
10614
  },
9752
10615
  /**
9753
10616
  * 生成配置每一项的元素
@@ -9956,7 +10819,7 @@ System.register('pops', [], (function (exports) {
9956
10819
  that.triggerRenderRightContainer($deepMenuSection);
9957
10820
  },
9958
10821
  /** 设置项的点击事件 */
9959
- setLiClickEvent() {
10822
+ onLiClick() {
9960
10823
  popsDOMUtils.on($li, "click", void 0, async (event) => {
9961
10824
  if (typeof viewConfig.clickCallBack === "function") {
9962
10825
  const result = await viewConfig.clickCallBack(event, viewConfig);
@@ -9970,7 +10833,10 @@ System.register('pops', [], (function (exports) {
9970
10833
  };
9971
10834
  PopsPanelDeepMenu.init();
9972
10835
  Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9973
- return $li;
10836
+ return {
10837
+ $el: $li,
10838
+ handler: PopsPanelDeepMenu,
10839
+ };
9974
10840
  },
9975
10841
  /**
9976
10842
  * type ===> own
@@ -9983,8 +10849,10 @@ System.register('pops', [], (function (exports) {
9983
10849
  this.setElementClassName($li, viewConfig.className);
9984
10850
  this.setElementAttributes($li, viewConfig.attributes);
9985
10851
  this.setElementProps($li, viewConfig.props);
9986
- $li = viewConfig.getLiElementCallBack($li);
9987
- return $li;
10852
+ $li = viewConfig.createLIElement($li);
10853
+ return {
10854
+ $el: $li,
10855
+ };
9988
10856
  },
9989
10857
  /**
9990
10858
  * 获取中间容器的元素<li>
@@ -10123,14 +10991,14 @@ System.register('pops', [], (function (exports) {
10123
10991
  * @param containerOptions
10124
10992
  */
10125
10993
  uListContainerAddItem(viewConfig, containerOptions) {
10126
- const itemLiElement = this.createSectionContainerItem(viewConfig);
10127
- if (itemLiElement) {
10128
- containerOptions["ulElement"].appendChild(itemLiElement);
10994
+ const itemInfo = this.createSectionContainerItem(viewConfig);
10995
+ if (itemInfo) {
10996
+ containerOptions["ulElement"].appendChild(itemInfo.$el);
10129
10997
  }
10130
10998
  if (typeof viewConfig.afterAddToUListCallBack === "function") {
10131
10999
  viewConfig.afterAddToUListCallBack(viewConfig, {
10132
11000
  ...containerOptions,
10133
- target: itemLiElement,
11001
+ target: itemInfo?.$el,
10134
11002
  });
10135
11003
  }
10136
11004
  },
@@ -10139,7 +11007,7 @@ System.register('pops', [], (function (exports) {
10139
11007
  * @param $asideItem 左侧的容器<li>元素
10140
11008
  * @param asideConfig 配置
10141
11009
  */
10142
- setAsideItemClickEvent($asideItem, asideConfig) {
11010
+ onAsideItemClick($asideItem, asideConfig) {
10143
11011
  popsDOMUtils.on($asideItem, "click", async (event) => {
10144
11012
  if (typeof asideConfig.clickFirstCallback === "function") {
10145
11013
  const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
@@ -11322,6 +12190,13 @@ System.register('pops', [], (function (exports) {
11322
12190
  });
11323
12191
  $shadowRoot.appendChild($css);
11324
12192
  }
12193
+ /**
12194
+ * 监听器的默认配置
12195
+ */
12196
+ const defaultListenerOption = {
12197
+ capture: true,
12198
+ passive: true,
12199
+ };
11325
12200
  const SearchSuggestion = {
11326
12201
  /**
11327
12202
  * 当前的环境，可以是document，可以是shadowroot，默认是document
@@ -11673,29 +12548,16 @@ System.register('pops', [], (function (exports) {
11673
12548
  },
11674
12549
  /**
11675
12550
  * 设置搜索建议框每一项的选中事件
11676
- * @param liElement
12551
+ * @param $li 每一项元素
11677
12552
  */
11678
12553
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
11679
- setSearchItemSelectEvent(liElement) {
11680
- // popsDOMUtils.on(
11681
- // liElement,
11682
- // "keyup",
11683
- // void 0,
11684
- // (event) => {
11685
- // let value = liElement["data-value"];
11686
- // config.selectCallBack(event, liElement, value);
11687
- // },
11688
- // {
11689
- // capture: true,
11690
- // }
11691
- // );
12554
+ setSearchItemSelectEvent($li) {
12555
+ // TODO
11692
12556
  },
11693
12557
  /**
11694
12558
  * 监听输入框内容改变
11695
12559
  */
11696
- setInputChangeEvent(option = {
11697
- capture: true,
11698
- }) {
12560
+ setInputChangeEvent(option = defaultListenerOption) {
11699
12561
  // 必须是input或者textarea才有input事件
11700
12562
  if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
11701
12563
  return;
@@ -11704,9 +12566,7 @@ System.register('pops', [], (function (exports) {
11704
12566
  // 禁用输入框自动提示
11705
12567
  config.$inputTarget.setAttribute("autocomplete", "off");
11706
12568
  // 内容改变事件
11707
- const listenerHandler = popsDOMUtils.onInput(config.$inputTarget,
11708
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11709
- async (_event) => {
12569
+ const listenerHandler = popsDOMUtils.onInput(config.$inputTarget, async () => {
11710
12570
  const data = SearchSuggestion.getData();
11711
12571
  const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.$inputTarget.value, data, config);
11712
12572
  SearchSuggestion.update(queryDataResult);
@@ -11717,11 +12577,7 @@ System.register('pops', [], (function (exports) {
11717
12577
  /**
11718
12578
  * 移除输入框内容改变的监听
11719
12579
  */
11720
- removeInputChangeEvent(
11721
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11722
- option = {
11723
- capture: true,
11724
- }) {
12580
+ removeInputChangeEvent() {
11725
12581
  for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
11726
12582
  const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
11727
12583
  handler();
@@ -11749,10 +12605,7 @@ System.register('pops', [], (function (exports) {
11749
12605
  /**
11750
12606
  * 设置显示搜索建议框的事件
11751
12607
  */
11752
- setShowEvent(option = {
11753
- capture: true,
11754
- passive: true,
11755
- }) {
12608
+ setShowEvent(option = defaultListenerOption) {
11756
12609
  /* 焦点|点击事件*/
11757
12610
  if (config.followPosition === "target") {
11758
12611
  popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
@@ -11770,10 +12623,7 @@ System.register('pops', [], (function (exports) {
11770
12623
  /**
11771
12624
  * 移除显示搜索建议框的事件
11772
12625
  */
11773
- removeShowEvent(option = {
11774
- capture: true,
11775
- passive: true,
11776
- }) {
12626
+ removeShowEvent(option = defaultListenerOption) {
11777
12627
  /* 焦点|点击事件*/
11778
12628
  popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
11779
12629
  // 内容改变事件
@@ -11803,10 +12653,7 @@ System.register('pops', [], (function (exports) {
11803
12653
  /**
11804
12654
  * 设置隐藏搜索建议框的事件
11805
12655
  */
11806
- setHideEvent(option = {
11807
- capture: true,
11808
- passive: true,
11809
- }) {
12656
+ setHideEvent(option = defaultListenerOption) {
11810
12657
  // 全局点击事件
11811
12658
  // 全局触摸屏点击事件
11812
12659
  if (Array.isArray(SearchSuggestion.selfDocument)) {
@@ -11821,10 +12668,7 @@ System.register('pops', [], (function (exports) {
11821
12668
  /**
11822
12669
  * 移除隐藏搜索建议框的事件
11823
12670
  */
11824
- removeHideEvent(option = {
11825
- capture: true,
11826
- passive: true,
11827
- }) {
12671
+ removeHideEvent(option = defaultListenerOption) {
11828
12672
  if (Array.isArray(SearchSuggestion.selfDocument)) {
11829
12673
  SearchSuggestion.selfDocument.forEach(($checkParent) => {
11830
12674
  popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
@@ -11837,10 +12681,7 @@ System.register('pops', [], (function (exports) {
11837
12681
  /**
11838
12682
  * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
11839
12683
  */
11840
- setAllEvent(option = {
11841
- capture: true,
11842
- passive: true,
11843
- }) {
12684
+ setAllEvent(option = defaultListenerOption) {
11844
12685
  SearchSuggestion.setInputChangeEvent(option);
11845
12686
  SearchSuggestion.setHideEvent(option);
11846
12687
  SearchSuggestion.setShowEvent(option);
@@ -11848,11 +12689,8 @@ System.register('pops', [], (function (exports) {
11848
12689
  /**
11849
12690
  * 移除所有监听
11850
12691
  */
11851
- removeAllEvent(option = {
11852
- capture: true,
11853
- passive: true,
11854
- }) {
11855
- SearchSuggestion.removeInputChangeEvent(option);
12692
+ removeAllEvent(option = defaultListenerOption) {
12693
+ SearchSuggestion.removeInputChangeEvent();
11856
12694
  SearchSuggestion.removeHideEvent(option);
11857
12695
  SearchSuggestion.removeShowEvent(option);
11858
12696
  },