@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.esm.js CHANGED
@@ -2868,10 +2868,12 @@ var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n position: fixed;\r\n box-s
2868
2868
 
2869
2869
  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";
2870
2870
 
2871
- 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";
2871
+ 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";
2872
2872
 
2873
2873
  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";
2874
2874
 
2875
+ 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";
2876
+
2875
2877
  const PopsCSS = {
2876
2878
  /** 主CSS */
2877
2879
  index: indexCSS,
@@ -2901,10 +2903,12 @@ const PopsCSS = {
2901
2903
  drawerCSS: drawerCSS,
2902
2904
  /** pops.folder */
2903
2905
  folderCSS: folderCSS,
2904
- /** pops.folder */
2906
+ /** pops.panel */
2905
2907
  panelCSS: panelCSS,
2906
2908
  /** pops.rightClickMenu */
2907
2909
  rightClickMenu: rightClickMenuCSS,
2910
+ /** pops.panel的select组件 */
2911
+ panelComponents_Select: panelComponents_Select_CSS,
2908
2912
  };
2909
2913
 
2910
2914
  const PopsAnimation = {
@@ -6107,7 +6111,6 @@ const PopsPanelDefaultConfig = () => {
6107
6111
  className: "forms-1",
6108
6112
  text: "区域设置",
6109
6113
  type: "container",
6110
- attributes: {},
6111
6114
  views: [
6112
6115
  {
6113
6116
  className: "panel-switch",
@@ -6115,11 +6118,6 @@ const PopsPanelDefaultConfig = () => {
6115
6118
  type: "switch",
6116
6119
  disabled: false,
6117
6120
  description: "",
6118
- afterAddToUListCallBack() {
6119
- // TODO
6120
- },
6121
- props: {},
6122
- attributes: {},
6123
6121
  getValue() {
6124
6122
  return true;
6125
6123
  },
@@ -6132,17 +6130,12 @@ const PopsPanelDefaultConfig = () => {
6132
6130
  text: "slider",
6133
6131
  type: "slider",
6134
6132
  description: "",
6135
- afterAddToUListCallBack() {
6136
- // TODO
6137
- },
6138
6133
  disabled: false,
6139
6134
  getToolTipContent(value) {
6140
6135
  return String(value);
6141
6136
  },
6142
6137
  isShowHoverTip: true,
6143
6138
  step: 1,
6144
- props: {},
6145
- attributes: {},
6146
6139
  getValue() {
6147
6140
  return 50;
6148
6141
  },
@@ -6159,11 +6152,6 @@ const PopsPanelDefaultConfig = () => {
6159
6152
  description: "",
6160
6153
  disable: false,
6161
6154
  buttonIsRightIcon: false,
6162
- props: {},
6163
- afterAddToUListCallBack() {
6164
- // TODO
6165
- },
6166
- attributes: {},
6167
6155
  buttonIcon: "view",
6168
6156
  buttonIconIsLoading: true,
6169
6157
  buttonType: "default",
@@ -6176,8 +6164,6 @@ const PopsPanelDefaultConfig = () => {
6176
6164
  className: "panel-button",
6177
6165
  text: "button",
6178
6166
  type: "button",
6179
- props: {},
6180
- attributes: {},
6181
6167
  buttonIcon: "eleme",
6182
6168
  buttonIconIsLoading: true,
6183
6169
  buttonType: "warning",
@@ -6189,10 +6175,7 @@ const PopsPanelDefaultConfig = () => {
6189
6175
  {
6190
6176
  className: "panel-button",
6191
6177
  text: "button",
6192
- // @ts-ignore
6193
- props: {},
6194
6178
  type: "button",
6195
- attributes: {},
6196
6179
  buttonIcon: "chromeFilled",
6197
6180
  buttonIconIsLoading: true,
6198
6181
  buttonType: "danger",
@@ -6205,9 +6188,6 @@ const PopsPanelDefaultConfig = () => {
6205
6188
  className: "panel-button",
6206
6189
  text: "button",
6207
6190
  type: "button",
6208
- attributes: {},
6209
- // @ts-ignore
6210
- props: {},
6211
6191
  buttonIcon: "upload",
6212
6192
  buttonIconIsLoading: false,
6213
6193
  buttonType: "info",
@@ -6234,9 +6214,6 @@ const PopsPanelDefaultConfig = () => {
6234
6214
  className: "panel-input",
6235
6215
  text: "input",
6236
6216
  type: "input",
6237
- isNumber: false,
6238
- props: {},
6239
- attributes: {},
6240
6217
  getValue() {
6241
6218
  return "50";
6242
6219
  },
@@ -6246,12 +6223,32 @@ const PopsPanelDefaultConfig = () => {
6246
6223
  },
6247
6224
  placeholder: "请输入内容",
6248
6225
  },
6226
+ {
6227
+ className: "panel-input-number",
6228
+ text: "input-number",
6229
+ type: "input",
6230
+ inputType: "number",
6231
+ getValue() {
6232
+ return "50";
6233
+ },
6234
+ callback(event, value, valueAsNumber) {
6235
+ popsDOMUtils.preventEvent(event);
6236
+ console.log("输入框内容改变：", valueAsNumber);
6237
+ if (valueAsNumber > 60) {
6238
+ return {
6239
+ valid: false,
6240
+ message: "输入值不能大于60，当前：" + value,
6241
+ };
6242
+ }
6243
+ },
6244
+ placeholder: "请输入内容",
6245
+ },
6249
6246
  {
6250
6247
  className: "panel-input-password",
6251
6248
  text: "input-password",
6252
6249
  type: "input",
6253
- props: {},
6254
- attributes: {},
6250
+ inputType: "password",
6251
+ placeholder: "请输入密码",
6255
6252
  getValue() {
6256
6253
  return "123456";
6257
6254
  },
@@ -6259,15 +6256,188 @@ const PopsPanelDefaultConfig = () => {
6259
6256
  popsDOMUtils.preventEvent(event);
6260
6257
  console.log("密码输入框内容改变：", value);
6261
6258
  },
6262
- isPassword: true,
6259
+ },
6260
+ {
6261
+ className: "panel-input-file",
6262
+ text: "input-file",
6263
+ type: "input",
6264
+ inputType: "file",
6265
+ getValue() {
6266
+ return "";
6267
+ },
6268
+ callback(event, value) {
6269
+ popsDOMUtils.preventEvent(event);
6270
+ console.log("内容改变：", value);
6271
+ },
6263
6272
  placeholder: "请输入密码",
6264
6273
  },
6274
+ {
6275
+ className: "panel-input-date",
6276
+ text: "input-date",
6277
+ type: "input",
6278
+ inputType: "date",
6279
+ placeholder: "请输入内容",
6280
+ getValue() {
6281
+ const date = new Date();
6282
+ let hour = date.getHours().toString();
6283
+ let minutes = date.getMinutes().toString();
6284
+ if (hour.length === 1) {
6285
+ hour = `0${hour}`;
6286
+ }
6287
+ if (minutes.length === 1) {
6288
+ minutes = `0${minutes}`;
6289
+ }
6290
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
6291
+ },
6292
+ callback(event, value, valueAsNumber, valueAsDate) {
6293
+ popsDOMUtils.preventEvent(event);
6294
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6295
+ },
6296
+ },
6297
+ {
6298
+ className: "panel-input-datetime-local",
6299
+ text: "input-datetime-local",
6300
+ type: "input",
6301
+ inputType: "datetime-local",
6302
+ getValue() {
6303
+ const date = new Date();
6304
+ let hour = date.getHours().toString();
6305
+ let minutes = date.getMinutes().toString();
6306
+ if (hour.length === 1) {
6307
+ hour = `0${hour}`;
6308
+ }
6309
+ if (minutes.length === 1) {
6310
+ minutes = `0${minutes}`;
6311
+ }
6312
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}T${hour}:${minutes}`;
6313
+ },
6314
+ callback(event, value, valueAsNumber, valueAsDate) {
6315
+ popsDOMUtils.preventEvent(event);
6316
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6317
+ },
6318
+ placeholder: "请输入内容",
6319
+ },
6320
+ {
6321
+ className: "panel-input-time",
6322
+ text: "input-time",
6323
+ type: "input",
6324
+ inputType: "time",
6325
+ getValue() {
6326
+ return "11:30";
6327
+ },
6328
+ callback(event, value, valueAsNumber, valueAsDate) {
6329
+ popsDOMUtils.preventEvent(event);
6330
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6331
+ },
6332
+ placeholder: "请输入内容",
6333
+ },
6334
+ {
6335
+ className: "panel-input-month",
6336
+ text: "input-month",
6337
+ type: "input",
6338
+ inputType: "month",
6339
+ getValue() {
6340
+ const date = new Date();
6341
+ return `${date.getFullYear()}-${date.getMonth() + 1}`;
6342
+ },
6343
+ callback(event, value, valueAsNumber, valueAsDate) {
6344
+ popsDOMUtils.preventEvent(event);
6345
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6346
+ },
6347
+ placeholder: "请输入内容",
6348
+ },
6349
+ {
6350
+ className: "panel-input-week",
6351
+ text: "input-week",
6352
+ type: "input",
6353
+ inputType: "week",
6354
+ getValue() {
6355
+ const date = new Date();
6356
+ return `${date.getFullYear()}-W01`;
6357
+ },
6358
+ callback(event, value, valueAsNumber, valueAsDate) {
6359
+ popsDOMUtils.preventEvent(event);
6360
+ console.log("输入框内容改变：", value, valueAsNumber, valueAsDate);
6361
+ },
6362
+ placeholder: "请输入内容",
6363
+ },
6364
+ {
6365
+ className: "panel-input-search",
6366
+ text: "input-search",
6367
+ type: "input",
6368
+ inputType: "search",
6369
+ getValue() {
6370
+ return "search test";
6371
+ },
6372
+ callback(event, value) {
6373
+ popsDOMUtils.preventEvent(event);
6374
+ console.log("输入框内容改变：", value);
6375
+ },
6376
+ placeholder: "请输入内容",
6377
+ },
6378
+ {
6379
+ className: "panel-input-color",
6380
+ text: "input-color",
6381
+ type: "input",
6382
+ inputType: "color",
6383
+ getValue() {
6384
+ return "#ff0000";
6385
+ },
6386
+ callback(event, value) {
6387
+ popsDOMUtils.preventEvent(event);
6388
+ console.log("输入框内容改变：", value);
6389
+ },
6390
+ placeholder: "请输入内容",
6391
+ },
6392
+ {
6393
+ className: "panel-input-email",
6394
+ text: "input-email",
6395
+ type: "input",
6396
+ inputType: "email",
6397
+ getValue() {
6398
+ return "test@gmail.com";
6399
+ },
6400
+ callback(event, value) {
6401
+ popsDOMUtils.preventEvent(event);
6402
+ const $input = event.target;
6403
+ console.log("输入框内容改变：", value, $input.validity);
6404
+ },
6405
+ placeholder: "请输入内容",
6406
+ },
6407
+ {
6408
+ className: "panel-input-tel",
6409
+ text: "input-tel",
6410
+ type: "input",
6411
+ inputType: "tel",
6412
+ getValue() {
6413
+ return "11111111111";
6414
+ },
6415
+ callback(event, value) {
6416
+ popsDOMUtils.preventEvent(event);
6417
+ const $input = event.target;
6418
+ console.log("输入框内容改变：", value, $input.validity);
6419
+ },
6420
+ placeholder: "请输入内容",
6421
+ },
6422
+ {
6423
+ className: "panel-input-url",
6424
+ text: "input-url",
6425
+ type: "input",
6426
+ inputType: "url",
6427
+ getValue() {
6428
+ return "https://github.com/";
6429
+ },
6430
+ callback(event, value) {
6431
+ popsDOMUtils.preventEvent(event);
6432
+ const $input = event.target;
6433
+ console.log("输入框内容改变：", value, $input.validity);
6434
+ },
6435
+ placeholder: "请输入内容",
6436
+ },
6265
6437
  {
6266
6438
  className: "panel-textarea",
6267
6439
  text: "textarea",
6268
6440
  type: "textarea",
6269
- props: {},
6270
- attributes: {},
6271
6441
  getValue() {
6272
6442
  return "50";
6273
6443
  },
@@ -6282,13 +6452,13 @@ const PopsPanelDefaultConfig = () => {
6282
6452
  text: "select-disabled",
6283
6453
  type: "select",
6284
6454
  disabled: true,
6285
- props: {},
6286
- attributes: {},
6287
6455
  getValue() {
6288
- return 50;
6456
+ return "text";
6289
6457
  },
6290
- callback(event, isSelectedValue, isSelectedText) {
6291
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6458
+ callback(isSelectedInfo) {
6459
+ if (isSelectedInfo == null)
6460
+ return;
6461
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6292
6462
  },
6293
6463
  data: [
6294
6464
  {
@@ -6297,7 +6467,6 @@ const PopsPanelDefaultConfig = () => {
6297
6467
  disable() {
6298
6468
  return false;
6299
6469
  },
6300
- views: [],
6301
6470
  },
6302
6471
  {
6303
6472
  value: "text",
@@ -6305,7 +6474,6 @@ const PopsPanelDefaultConfig = () => {
6305
6474
  disable() {
6306
6475
  return false;
6307
6476
  },
6308
- views: [],
6309
6477
  },
6310
6478
  {
6311
6479
  value: "html",
@@ -6313,7 +6481,6 @@ const PopsPanelDefaultConfig = () => {
6313
6481
  disable() {
6314
6482
  return false;
6315
6483
  },
6316
- views: [],
6317
6484
  },
6318
6485
  ],
6319
6486
  },
@@ -6322,8 +6489,6 @@ const PopsPanelDefaultConfig = () => {
6322
6489
  type: "select-multiple",
6323
6490
  text: "select-multiple-disabled",
6324
6491
  disabled: true,
6325
- props: {},
6326
- attributes: {},
6327
6492
  placeholder: "请至少选择一个选项",
6328
6493
  getValue() {
6329
6494
  return ["select-1", "select-2"];
@@ -6364,13 +6529,13 @@ const PopsPanelDefaultConfig = () => {
6364
6529
  className: "panel-select",
6365
6530
  text: "select",
6366
6531
  type: "select",
6367
- props: {},
6368
- attributes: {},
6369
6532
  getValue() {
6370
- return 50;
6533
+ return "all";
6371
6534
  },
6372
- callback(event, isSelectedValue, isSelectedText) {
6373
- console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
6535
+ callback(isSelectedInfo) {
6536
+ if (isSelectedInfo == null)
6537
+ return;
6538
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
6374
6539
  },
6375
6540
  data: [
6376
6541
  {
@@ -6379,7 +6544,6 @@ const PopsPanelDefaultConfig = () => {
6379
6544
  disable() {
6380
6545
  return false;
6381
6546
  },
6382
- views: [],
6383
6547
  },
6384
6548
  {
6385
6549
  value: "text",
@@ -6387,7 +6551,6 @@ const PopsPanelDefaultConfig = () => {
6387
6551
  disable() {
6388
6552
  return false;
6389
6553
  },
6390
- views: [],
6391
6554
  },
6392
6555
  {
6393
6556
  value: "html",
@@ -6395,16 +6558,100 @@ const PopsPanelDefaultConfig = () => {
6395
6558
  disable() {
6396
6559
  return false;
6397
6560
  },
6398
- views: [],
6399
6561
  },
6400
6562
  ],
6401
6563
  },
6564
+ {
6565
+ className: "panel-select-dialog",
6566
+ text: "select-dialog",
6567
+ type: "select",
6568
+ getValue() {
6569
+ return window.localStorage.getItem("select-dialog-customInput") || "";
6570
+ },
6571
+ callback(isSelectedInfo) {
6572
+ if (isSelectedInfo == null) {
6573
+ console.warn(`select当前选项为空`);
6574
+ return;
6575
+ }
6576
+ if (isSelectedInfo.addCustomInput) {
6577
+ if (isSelectedInfo.value === "") {
6578
+ // 空值，不存储
6579
+ if (isSelectedInfo.customInputStoreKey) {
6580
+ console.log(`select删除自定义输入的值`);
6581
+ window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
6582
+ }
6583
+ }
6584
+ else {
6585
+ console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6586
+ if (isSelectedInfo.customInputStoreKey) {
6587
+ window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
6588
+ }
6589
+ }
6590
+ }
6591
+ else {
6592
+ console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
6593
+ }
6594
+ },
6595
+ data: [
6596
+ {
6597
+ value: "all",
6598
+ text: "所有",
6599
+ disable() {
6600
+ return false;
6601
+ },
6602
+ },
6603
+ {
6604
+ value: "text",
6605
+ text: "文本",
6606
+ disable(value, selectInfo) {
6607
+ if (selectInfo?.value === "all")
6608
+ return true;
6609
+ return false;
6610
+ },
6611
+ },
6612
+ {
6613
+ value: "html",
6614
+ text: "超文本",
6615
+ disable(value, selectInfo) {
6616
+ if (selectInfo?.value === "all")
6617
+ return true;
6618
+ return false;
6619
+ },
6620
+ },
6621
+ {
6622
+ value: "own",
6623
+ text: "自定义",
6624
+ disable(value, selectInfo) {
6625
+ if (selectInfo?.value === "all")
6626
+ return true;
6627
+ return false;
6628
+ },
6629
+ },
6630
+ {
6631
+ value: window.localStorage.getItem("select-dialog-customInput") || "",
6632
+ text: window.localStorage.getItem("select-dialog-customInput") || "",
6633
+ addCustomInput: true,
6634
+ customInputStoreKey: "select-dialog-customInput",
6635
+ onValid(dataOption) {
6636
+ if (dataOption.value === "123") {
6637
+ console.error("非规范值");
6638
+ return {
6639
+ valid: false,
6640
+ message: "非规范值",
6641
+ };
6642
+ }
6643
+ return {
6644
+ valid: true,
6645
+ };
6646
+ },
6647
+ },
6648
+ ],
6649
+ useDialog: true,
6650
+ },
6402
6651
  {
6403
6652
  className: "panel-select-multiple",
6404
6653
  type: "select-multiple",
6405
6654
  text: "select-multiple",
6406
- props: {},
6407
- attributes: {},
6408
6655
  placeholder: "请至少选择一个选项",
6409
6656
  getValue() {
6410
6657
  return ["select-1", "select-2"];
@@ -6487,16 +6734,11 @@ const PopsPanelDefaultConfig = () => {
6487
6734
  className: "forms-1",
6488
6735
  text: "区域设置",
6489
6736
  type: "container",
6490
- attributes: {},
6491
- props: {},
6492
6737
  views: [
6493
6738
  {
6494
6739
  className: "panel-switch",
6495
6740
  text: "switch",
6496
6741
  type: "switch",
6497
- // @ts-ignore
6498
- props: {},
6499
- attributes: {},
6500
6742
  getValue() {
6501
6743
  return true;
6502
6744
  },
@@ -6507,10 +6749,7 @@ const PopsPanelDefaultConfig = () => {
6507
6749
  {
6508
6750
  className: "panel-slider",
6509
6751
  text: "slider",
6510
- // @ts-ignore
6511
- props: {},
6512
6752
  type: "slider",
6513
- attributes: {},
6514
6753
  getValue() {
6515
6754
  return 50;
6516
6755
  },
@@ -6523,10 +6762,7 @@ const PopsPanelDefaultConfig = () => {
6523
6762
  {
6524
6763
  className: "panel-button",
6525
6764
  text: "button",
6526
- // @ts-ignore
6527
- props: {},
6528
6765
  type: "button",
6529
- attributes: {},
6530
6766
  buttonIcon: "eleme",
6531
6767
  buttonIconIsLoading: true,
6532
6768
  buttonType: "warning",
@@ -6539,9 +6775,6 @@ const PopsPanelDefaultConfig = () => {
6539
6775
  className: "panel-button",
6540
6776
  text: "button",
6541
6777
  type: "button",
6542
- // @ts-ignore
6543
- props: {},
6544
- attributes: {},
6545
6778
  buttonIcon: "chromeFilled",
6546
6779
  buttonIconIsLoading: true,
6547
6780
  buttonType: "danger",
@@ -6553,10 +6786,7 @@ const PopsPanelDefaultConfig = () => {
6553
6786
  {
6554
6787
  className: "panel-button",
6555
6788
  text: "button",
6556
- // @ts-ignore
6557
- props: {},
6558
6789
  type: "button",
6559
- attributes: {},
6560
6790
  buttonIcon: "upload",
6561
6791
  buttonIconIsLoading: false,
6562
6792
  buttonType: "info",
@@ -6572,9 +6802,7 @@ const PopsPanelDefaultConfig = () => {
6572
6802
  {
6573
6803
  type: "deepMenu",
6574
6804
  className: "panel-deepMenu2",
6575
- attributes: {},
6576
6805
  //@ts-ignore
6577
- props: {},
6578
6806
  text: "deepMenu2",
6579
6807
  description: "二级菜单",
6580
6808
  rightText: "自定义配置",
@@ -6600,10 +6828,7 @@ const PopsPanelDefaultConfig = () => {
6600
6828
  {
6601
6829
  className: "panel-switch",
6602
6830
  text: "switch",
6603
- // @ts-ignore
6604
- props: {},
6605
6831
  type: "switch",
6606
- attributes: {},
6607
6832
  getValue() {
6608
6833
  return true;
6609
6834
  },
@@ -6626,8 +6851,6 @@ const PopsPanelDefaultConfig = () => {
6626
6851
  "data-value": "value",
6627
6852
  "data-value-2": "value2",
6628
6853
  },
6629
- // @ts-ignore
6630
- props: {},
6631
6854
  views: [],
6632
6855
  clickFirstCallback: function () {
6633
6856
  return false;
@@ -6641,8 +6864,6 @@ const PopsPanelDefaultConfig = () => {
6641
6864
  "data-value": "value",
6642
6865
  "data-value-2": "value2",
6643
6866
  },
6644
- // @ts-ignore
6645
- props: {},
6646
6867
  views: [],
6647
6868
  clickFirstCallback: function () {
6648
6869
  return false;
@@ -7380,7 +7601,7 @@ const PanelHandlerComponents = () => {
7380
7601
  // 初始化内容配置
7381
7602
  data.config.content.forEach((asideItemConfig) => {
7382
7603
  const $asideLiElement = this.createAsideItem(asideItemConfig);
7383
- this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
7604
+ this.onAsideItemClick($asideLiElement, asideItemConfig);
7384
7605
  // 是否处于底部
7385
7606
  const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
7386
7607
  if (isBottom) {
@@ -7413,7 +7634,7 @@ const PanelHandlerComponents = () => {
7413
7634
  // 初始化底部内容配置
7414
7635
  (data.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
7415
7636
  const $bottomLiElement = this.createBottomItem(bottomItemConfig);
7416
- this.setBottomItemClickEvent($bottomLiElement, bottomItemConfig);
7637
+ this.onBottomItemClick($bottomLiElement, bottomItemConfig);
7417
7638
  if (bottomItemConfig.position === "left" || bottomItemConfig.position == null) {
7418
7639
  this.$el.$panelBottomLeftContainer.appendChild($bottomLiElement);
7419
7640
  }
@@ -7566,7 +7787,7 @@ const PanelHandlerComponents = () => {
7566
7787
  * @param $bottomItem 底部<li>元素
7567
7788
  * @param bottomItemConfig 配置
7568
7789
  */
7569
- setBottomItemClickEvent($bottomItem, bottomItemConfig) {
7790
+ onBottomItemClick($bottomItem, bottomItemConfig) {
7570
7791
  popsDOMUtils.on($bottomItem, "click", async (event) => {
7571
7792
  if (typeof bottomItemConfig.clickCallback === "function") {
7572
7793
  // 执行回调
@@ -7654,12 +7875,12 @@ const PanelHandlerComponents = () => {
7654
7875
  if (disabled) {
7655
7876
  this.disable();
7656
7877
  }
7657
- this.setClickEvent();
7878
+ this.onClick();
7658
7879
  },
7659
7880
  /**
7660
7881
  * 设置点击事件
7661
7882
  */
7662
- setClickEvent() {
7883
+ onClick() {
7663
7884
  const that = this;
7664
7885
  popsDOMUtils.on(this.$ele.core, "click", function (event) {
7665
7886
  if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
@@ -7714,70 +7935,10 @@ const PanelHandlerComponents = () => {
7714
7935
  };
7715
7936
  PopsPanelSwitch.init();
7716
7937
  Reflect.set($li, "data-switch", PopsPanelSwitch);
7717
- return $li;
7718
- },
7719
- /**
7720
- * type ==> slider
7721
- * 获取中间容器的元素<li>
7722
- * @param viewConfig
7723
- */
7724
- createSectionContainerItem_slider(viewConfig) {
7725
- const $li = popsDOMUtils.createElement("li");
7726
- Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
7727
- this.setElementClassName($li, viewConfig.className);
7728
- this.setElementAttributes($li, viewConfig.attributes);
7729
- this.setElementProps($li, viewConfig.props);
7730
- // 左边底部的描述的文字
7731
- let leftDescriptionText = "";
7732
- if (viewConfig.description) {
7733
- leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
7734
- }
7735
- PopsSafeUtils.setSafeHTML($li,
7736
- /*html*/ `
7737
- <div class="pops-panel-item-left-text">
7738
- <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
7739
- <div class="pops-panel-slider">
7740
- <input type="range" min="${viewConfig.min}" max="${viewConfig.max}">
7741
- </div>
7742
- `);
7743
- const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
7744
- if (viewConfig.step) {
7745
- $rangeInput.setAttribute("step", viewConfig.step.toString());
7746
- }
7747
- $rangeInput.value = viewConfig.getValue().toString();
7748
- /**
7749
- * 获取提示的内容
7750
- * @param value
7751
- */
7752
- const getToolTipContent = function (value) {
7753
- if (typeof viewConfig.getToolTipContent === "function") {
7754
- return viewConfig.getToolTipContent(value);
7755
- }
7756
- else {
7757
- return value;
7758
- }
7938
+ return {
7939
+ $el: $li,
7940
+ handler: PopsPanelSwitch,
7759
7941
  };
7760
- const tooltip = PopsTooltip.init({
7761
- $target: $rangeInput.parentElement,
7762
- content: () => {
7763
- return getToolTipContent($rangeInput.value);
7764
- },
7765
- zIndex: () => {
7766
- return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
7767
- },
7768
- className: "github-tooltip",
7769
- alwaysShow: false,
7770
- only: false,
7771
- position: "top",
7772
- arrowDistance: 10,
7773
- });
7774
- popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
7775
- tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
7776
- if (typeof viewConfig.callback === "function") {
7777
- viewConfig.callback(event, $rangeInput.valueAsNumber);
7778
- }
7779
- });
7780
- return $li;
7781
7942
  },
7782
7943
  /**
7783
7944
  * type ==> slider
@@ -7885,7 +8046,7 @@ const PanelHandlerComponents = () => {
7885
8046
  this.initEleData();
7886
8047
  this.setToolTipEvent();
7887
8048
  this.setPanEvent();
7888
- this.setRunAwayClickEvent();
8049
+ this.onRunAwayClick();
7889
8050
  this.intervalInit();
7890
8051
  if (this.isDisabledDragWithConfig()) {
7891
8052
  this.disableDrag();
@@ -8157,7 +8318,7 @@ const PanelHandlerComponents = () => {
8157
8318
  /**
8158
8319
  * 设置进度条点击定位的事件
8159
8320
  */
8160
- setRunAwayClickEvent() {
8321
+ onRunAwayClick() {
8161
8322
  popsDOMUtils.on(this.$ele.runAway, "click", (event) => {
8162
8323
  if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
8163
8324
  return;
@@ -8362,7 +8523,10 @@ const PanelHandlerComponents = () => {
8362
8523
  };
8363
8524
  PopsPanelSlider.init();
8364
8525
  Reflect.set($li, "data-slider", PopsPanelSlider);
8365
- return $li;
8526
+ return {
8527
+ $el: $li,
8528
+ handler: PopsPanelSlider,
8529
+ };
8366
8530
  },
8367
8531
  /**
8368
8532
  * type ==> input
@@ -8375,13 +8539,8 @@ const PanelHandlerComponents = () => {
8375
8539
  this.setElementClassName($li, viewConfig.className);
8376
8540
  this.setElementAttributes($li, viewConfig.attributes);
8377
8541
  this.setElementProps($li, viewConfig.props);
8378
- let inputType = "text";
8379
- if (viewConfig.isPassword) {
8380
- inputType = "password";
8381
- }
8382
- else if (viewConfig.isNumber) {
8383
- inputType = "number";
8384
- }
8542
+ const defaultInputType = "text";
8543
+ const inputType = viewConfig.inputType || defaultInputType;
8385
8544
  // 左边底部的描述的文字
8386
8545
  let leftDescriptionText = "";
8387
8546
  if (viewConfig.description) {
@@ -8392,135 +8551,195 @@ const PanelHandlerComponents = () => {
8392
8551
  <div class="pops-panel-item-left-text">
8393
8552
  <p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
8394
8553
  <div class="pops-panel-input">
8395
- <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8554
+ <div class="pops-panel-input_inner">
8555
+ <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
8556
+ </div>
8396
8557
  </div>
8397
8558
  `);
8398
8559
  const PopsPanelInput = {
8399
8560
  [Symbol.toStringTag]: "PopsPanelInput",
8400
- $ele: {
8561
+ $el: {
8401
8562
  itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8402
8563
  panelInput: $li.querySelector(".pops-panel-input"),
8564
+ panelInputInner: $li.querySelector(".pops-panel-input_inner"),
8403
8565
  input: $li.querySelector("input"),
8404
- inputSpanIcon: popsDOMUtils.createElement("span"),
8405
- inputSpanIconInner: null,
8566
+ /** span.pops-panel-input__suffix */
8567
+ suffix: popsDOMUtils.createElement("span"),
8568
+ /** span.pops-panel-input__suffix-inner */
8569
+ suffixInner: null,
8570
+ /** i.pops-panel-icon */
8406
8571
  icon: null,
8407
8572
  },
8408
8573
  $data: {
8409
8574
  value: viewConfig.getValue(),
8410
- isView: false,
8575
+ /**
8576
+ * inputType 为 password时使用该值
8577
+ *
8578
+ * 当前内容的可见性
8579
+ */
8580
+ isVisible: false,
8411
8581
  },
8412
8582
  init() {
8413
8583
  this.initEle();
8414
8584
  this.setInputValue(this.$data.value);
8415
8585
  // 如果是密码框，放进图标
8416
- if (viewConfig.isPassword) {
8586
+ if (viewConfig.inputType === "password") {
8587
+ // 显示密码
8417
8588
  this.setCircleIcon(PopsIcon.getIcon("view"));
8418
- this.setCircleIconClickEvent();
8589
+ this.onIconClick();
8419
8590
  }
8420
8591
  else {
8421
8592
  // 先判断预设值是否为空，不为空添加清空图标按钮
8422
- if (this.$ele.input.value != "") {
8593
+ // 且为普通的输入框
8594
+ if (this.$el.input.value != "" && this.isTextInputType()) {
8595
+ // 清除内容的图标
8423
8596
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8424
- this.setCircleIconClickEvent();
8597
+ this.onIconClick();
8598
+ }
8599
+ else {
8600
+ // 隐藏图标
8601
+ this.hideCircleIconWrapper();
8425
8602
  }
8426
8603
  }
8427
- this.setInputChangeEvent();
8604
+ this.onValueChange();
8428
8605
  // 是否禁用复选框
8429
8606
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8430
8607
  if (disabled) {
8431
8608
  this.disable();
8432
8609
  }
8433
8610
  if (typeof viewConfig.handlerCallBack === "function") {
8434
- viewConfig.handlerCallBack($li, this.$ele.input);
8611
+ viewConfig.handlerCallBack($li, this.$el.input);
8435
8612
  }
8436
8613
  },
8437
8614
  /**
8438
8615
  * 初始化$ele的配置
8439
8616
  */
8440
8617
  initEle() {
8441
- this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
8442
- popsDOMUtils.addClassName(this.$ele.inputSpanIcon, "pops-panel-input__suffix");
8443
- PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
8618
+ this.$el.input.parentElement.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
8619
+ popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
8620
+ PopsSafeUtils.setSafeHTML(this.$el.suffix,
8444
8621
  /*html*/ `
8445
8622
  <span class="pops-panel-input__suffix-inner">
8446
8623
  <i class="pops-panel-icon"></i>
8447
8624
  </span>
8448
8625
  `);
8449
- this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
8450
- this.$ele.icon = this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
8451
- popsDOMUtils.addClassName(this.$ele.panelInput, PopsCommonCSSClassName.userSelectNone);
8626
+ this.$el.suffixInner = this.$el.suffix.querySelector(".pops-panel-input__suffix-inner");
8627
+ this.$el.icon = this.$el.suffix.querySelector(".pops-panel-icon");
8628
+ popsDOMUtils.addClassName(this.$el.panelInput, PopsCommonCSSClassName.userSelectNone);
8629
+ },
8630
+ /**
8631
+ * 校验输入框类型是否是字符串输入框类型
8632
+ */
8633
+ isTextInputType() {
8634
+ const typeList = ["text", "search", "email", "tel", "url"];
8635
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8636
+ },
8637
+ /**
8638
+ * 是否是时间输入框类型
8639
+ */
8640
+ isDateInputType() {
8641
+ const typeList = ["date", "datetime-local", "month", "time", "week"];
8642
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8643
+ },
8644
+ /**
8645
+ * 是否是数字输入框类型
8646
+ */
8647
+ isNumberInputType() {
8648
+ const typeList = ["number"];
8649
+ return typeList.includes(viewConfig.inputType || defaultInputType);
8452
8650
  },
8453
8651
  /**
8454
8652
  * 禁用
8455
8653
  */
8456
8654
  disable() {
8457
- this.$ele.input.disabled = true;
8458
- popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
8459
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8655
+ this.$el.input.disabled = true;
8656
+ popsDOMUtils.addClassName(this.$el.panelInput, "pops-input-disabled");
8657
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8460
8658
  },
8461
8659
  /**
8462
8660
  * 取消禁用
8463
8661
  */
8464
8662
  notDisable() {
8465
- this.$ele.input.disabled = false;
8466
- popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
8467
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8663
+ this.$el.input.disabled = false;
8664
+ popsDOMUtils.removeClassName(this.$el.panelInput, "pops-input-disabled");
8665
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8468
8666
  },
8469
8667
  /**
8470
8668
  * 判断是否已被禁用
8471
8669
  */
8472
8670
  isDisabled() {
8473
- return this.$ele.input.disabled;
8671
+ return this.$el.input.disabled;
8474
8672
  },
8475
8673
  /**
8476
8674
  * 设置输入框内容
8477
- * @param {string} [value=""] 值
8675
+ * @param value 值
8478
8676
  */
8479
8677
  setInputValue(value = "") {
8480
- this.$ele.input.value = value;
8678
+ if (typeof value === "number" && this.isNumberInputType()) {
8679
+ this.$el.input.valueAsNumber = value;
8680
+ }
8681
+ else if (typeof value === "object" && value instanceof Date && this.isDateInputType()) {
8682
+ this.$el.input.valueAsDate = value;
8683
+ }
8684
+ else {
8685
+ this.$el.input.value = value.toString();
8686
+ }
8481
8687
  },
8482
8688
  /**
8483
8689
  * 设置input元素的type
8484
- * @param [typeValue="text"] type值
8690
+ * @param typeValue type值
8485
8691
  */
8486
8692
  setInputType(typeValue = "text") {
8487
- this.$ele.input.setAttribute("type", typeValue);
8693
+ this.$el.input.setAttribute("type", typeValue);
8488
8694
  },
8489
8695
  /**
8490
8696
  * 删除图标按钮
8491
8697
  */
8492
8698
  removeCircleIcon() {
8493
- PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
8699
+ PopsSafeUtils.setSafeHTML(this.$el.icon, "");
8494
8700
  },
8495
8701
  /**
8496
8702
  * 添加清空图标按钮
8497
- * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
8703
+ * @param svgHTML svg图标，默认为清空的图标
8498
8704
  */
8499
8705
  setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")) {
8500
- PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
8706
+ PopsSafeUtils.setSafeHTML(this.$el.icon, svgHTML);
8707
+ },
8708
+ /**
8709
+ * 隐藏图标容器
8710
+ */
8711
+ hideCircleIconWrapper() {
8712
+ popsDOMUtils.cssHide(this.$el.suffix, true);
8713
+ },
8714
+ /**
8715
+ * 显示图标容器
8716
+ */
8717
+ showCircleIconWrapper() {
8718
+ popsDOMUtils.cssShow(this.$el.suffix);
8501
8719
  },
8502
8720
  /**
8503
8721
  * 添加图标按钮的点击事件
8504
8722
  */
8505
- setCircleIconClickEvent() {
8506
- popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
8723
+ onIconClick() {
8724
+ popsDOMUtils.on(this.$el.icon, "click", (evt) => {
8725
+ popsDOMUtils.preventEvent(evt);
8507
8726
  if (this.isDisabled()) {
8508
8727
  return;
8509
8728
  }
8510
8729
  // 删除图标
8511
8730
  this.removeCircleIcon();
8512
- if (viewConfig.isPassword) {
8513
- // 密码输入框
8514
- if (this.$data.isView) {
8731
+ if (inputType === "password") {
8732
+ // 配置类型为密码输入框
8733
+ if (this.$data.isVisible) {
8515
8734
  // 当前可见 => 点击改变为隐藏
8516
- this.$data.isView = false;
8735
+ this.$data.isVisible = false;
8517
8736
  // 显示输入框内容，且更换图标为隐藏图标
8518
8737
  this.setInputType("text");
8519
8738
  this.setCircleIcon(PopsIcon.getIcon("hide"));
8520
8739
  }
8521
8740
  else {
8522
8741
  // 当前不可见 => 点击改变为显示
8523
- this.$data.isView = true;
8742
+ this.$data.isVisible = true;
8524
8743
  // 隐藏输入框内容，且更换图标为显示图标
8525
8744
  this.setInputType("password");
8526
8745
  this.setCircleIcon(PopsIcon.getIcon("view"));
@@ -8531,48 +8750,103 @@ const PanelHandlerComponents = () => {
8531
8750
  // 清空内容
8532
8751
  this.setInputValue("");
8533
8752
  // 获取焦点
8534
- this.$ele.input.focus();
8753
+ this.$el.input.focus();
8535
8754
  // 触发内容改变事件
8536
- this.$ele.input.dispatchEvent(new Event("input"));
8755
+ this.$el.input.dispatchEvent(new Event("input"));
8537
8756
  }
8538
8757
  });
8539
8758
  },
8540
8759
  /**
8541
8760
  * 监听输入框内容改变
8542
8761
  */
8543
- setInputChangeEvent() {
8544
- popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
8545
- this.$data.value = this.$ele.input.value;
8546
- if (!viewConfig.isPassword) {
8762
+ onValueChange() {
8763
+ popsDOMUtils.on(this.$el.input, ["input", "propertychange"], void 0, (event) => {
8764
+ this.$data.value = this.$el.input.value;
8765
+ if (inputType !== "password") {
8547
8766
  // 不是密码框
8548
- if (this.$ele.input.value !== "" && this.$ele.icon.innerHTML === "") {
8767
+ if (this.$el.input.value !== "" && this.$el.icon.innerHTML === "" && this.isTextInputType()) {
8549
8768
  // 不为空，显示清空图标
8550
8769
  this.setCircleIcon(PopsIcon.getIcon("circleClose"));
8551
- this.setCircleIconClickEvent();
8770
+ this.onIconClick();
8771
+ this.showCircleIconWrapper();
8552
8772
  }
8553
- else if (this.$ele.input.value === "") {
8773
+ else if (this.$el.input.value === "") {
8554
8774
  this.removeCircleIcon();
8555
8775
  }
8556
8776
  }
8557
8777
  if (typeof viewConfig.callback === "function") {
8558
- if (viewConfig.isNumber) {
8559
- viewConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
8778
+ let ret;
8779
+ if (viewConfig.inputType === "number") {
8780
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber);
8781
+ }
8782
+ else if (this.isDateInputType()) {
8783
+ ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber, this.$el.input.valueAsDate);
8784
+ }
8785
+ else {
8786
+ ret = viewConfig.callback(event, this.$el.input.value);
8787
+ }
8788
+ if (ret) {
8789
+ if (ret.valid) {
8790
+ // 校验通过
8791
+ this.removeValidErrorMsg();
8792
+ }
8793
+ else {
8794
+ // 校验失败
8795
+ // 显示失败提示
8796
+ this.addValidErrorMsg(ret.message);
8797
+ }
8560
8798
  }
8561
8799
  else {
8562
- viewConfig.callback(event, this.$ele.input.value);
8800
+ this.removeValidErrorMsg();
8563
8801
  }
8564
8802
  }
8565
8803
  });
8566
8804
  },
8567
- };
8568
- PopsPanelInput.init();
8569
- Reflect.set($li, "data-input", PopsPanelInput);
8570
- return $li;
8571
- },
8572
- /**
8573
- * type ==> textarea
8574
- * 获取中间容器的元素<li>
8575
- * @param viewConfig
8805
+ /**
8806
+ * 主动触发输入框改变事件
8807
+ */
8808
+ triggerValueChange() {
8809
+ this.$el.input.dispatchEvent(new Event("input"));
8810
+ },
8811
+ /**
8812
+ * 添加校验失败的提示信息
8813
+ * @param msg 提示信息
8814
+ */
8815
+ addValidErrorMsg(msg) {
8816
+ if (msg == null)
8817
+ return;
8818
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error") ||
8819
+ popsDOMUtils.createElement("div", {
8820
+ className: "pops-panel-input-valid-error",
8821
+ innerHTML: /*html*/ `<span></span>`,
8822
+ });
8823
+ const $validErrorMsgSpan = $validErrorMsg.querySelector("span");
8824
+ if ($validErrorMsgSpan.innerHTML !== msg) {
8825
+ PopsSafeUtils.setSafeHTML($validErrorMsgSpan, msg);
8826
+ }
8827
+ if (!$validErrorMsg.parentElement) {
8828
+ popsDOMUtils.after(this.$el.panelInputInner, $validErrorMsg);
8829
+ }
8830
+ },
8831
+ /**
8832
+ * 移除校验失败的提示信息
8833
+ */
8834
+ removeValidErrorMsg() {
8835
+ const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error");
8836
+ $validErrorMsg?.remove();
8837
+ },
8838
+ };
8839
+ PopsPanelInput.init();
8840
+ Reflect.set($li, "data-input", PopsPanelInput);
8841
+ return {
8842
+ $el: $li,
8843
+ handler: PopsPanelInput,
8844
+ };
8845
+ },
8846
+ /**
8847
+ * type ==> textarea
8848
+ * 获取中间容器的元素<li>
8849
+ * @param viewConfig
8576
8850
  */
8577
8851
  createSectionContainerItem_textarea(viewConfig) {
8578
8852
  const $li = popsDOMUtils.createElement("li");
@@ -8605,7 +8879,7 @@ const PanelHandlerComponents = () => {
8605
8879
  },
8606
8880
  init() {
8607
8881
  this.setValue(this.$data.value);
8608
- this.setChangeEvent();
8882
+ this.onValueChange();
8609
8883
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8610
8884
  if (disabled) {
8611
8885
  this.disable();
@@ -8631,7 +8905,7 @@ const PanelHandlerComponents = () => {
8631
8905
  /**
8632
8906
  * 监听选择内容改变
8633
8907
  */
8634
- setChangeEvent() {
8908
+ onValueChange() {
8635
8909
  popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
8636
8910
  const value = this.$ele.textarea.value;
8637
8911
  this.$data.value = value;
@@ -8643,7 +8917,10 @@ const PanelHandlerComponents = () => {
8643
8917
  };
8644
8918
  PopsPanelTextArea.init();
8645
8919
  Reflect.set($li, "data-textarea", PopsPanelTextArea);
8646
- return $li;
8920
+ return {
8921
+ $el: $li,
8922
+ handler: PopsPanelTextArea,
8923
+ };
8647
8924
  },
8648
8925
  /**
8649
8926
  * type ==> select
@@ -8670,178 +8947,820 @@ const PanelHandlerComponents = () => {
8670
8947
  <select></select>
8671
8948
  </div>
8672
8949
  `);
8673
- const PopsPanelSelect = {
8674
- [Symbol.toStringTag]: "PopsPanelSelect",
8675
- $ele: {
8676
- itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8677
- panelSelect: $li.querySelector(".pops-panel-select"),
8678
- select: $li.querySelector(".pops-panel-select select"),
8679
- },
8680
- $eleKey: {
8681
- disable: "__disable__",
8682
- value: "__value__",
8683
- viewConfig: "data-view-config",
8684
- },
8685
- $data: {
8686
- defaultValue: viewConfig.getValue(),
8687
- },
8688
- init() {
8689
- popsDOMUtils.addClassName(this.$ele.panelSelect, PopsCommonCSSClassName.userSelectNone);
8690
- this.initOption();
8691
- this.setChangeEvent();
8692
- this.setClickEvent();
8693
- const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8694
- if (disabled) {
8695
- this.disable();
8696
- }
8697
- },
8698
- /**
8699
- * 给option元素设置属性
8700
- * @param $ele
8701
- * @param key
8702
- * @param value
8703
- */
8704
- setNodeValue($ele, key, value) {
8705
- Reflect.set($ele, key, value);
8706
- },
8707
- /**
8708
- * 获取option元素上设置的属性
8709
- * @param $ele
8710
- * @param value
8711
- * @param key
8712
- */
8713
- getNodeValue($ele, key) {
8714
- return Reflect.get($ele, key);
8715
- },
8716
- /**
8717
- * 禁用选项
8718
- */
8719
- disable() {
8720
- this.$ele.select.setAttribute("disabled", "true");
8721
- popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8722
- popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8723
- },
8724
- /**
8725
- * 取消禁用
8726
- */
8727
- notDisable() {
8728
- this.$ele.select.removeAttribute("disabled");
8729
- popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
8730
- popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
8731
- },
8732
- /**
8733
- * 判断是否禁用
8734
- */
8735
- isDisabled() {
8736
- return (this.$ele.select.hasAttribute("disabled") ||
8737
- popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable"));
8738
- },
8739
- /**
8740
- * 初始化选项
8741
- */
8742
- initOption() {
8743
- viewConfig.data.forEach((dataItem) => {
8744
- // 初始化默认选中
8745
- const optionElement = popsDOMUtils.createElement("option");
8746
- this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
8747
- this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
8748
- this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
8749
- if (dataItem.value === this.$data.defaultValue) {
8750
- this.setOptionSelected(optionElement);
8950
+ let handler;
8951
+ if (viewConfig.useDialog) {
8952
+ const PopsPanelSelect = {
8953
+ [Symbol.toStringTag]: "PopsPanelSelect",
8954
+ $el: {
8955
+ itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
8956
+ /** 选择框容器 */
8957
+ $container: void 0,
8958
+ /** 选择框包裹的容器 */
8959
+ $wrapper: void 0,
8960
+ /** 内容区域 */
8961
+ $section: void 0,
8962
+ /** 手动输入 */
8963
+ $selectedInputWrapper: void 0,
8964
+ /** 灰色提示语 */
8965
+ $selectedPlaceHolderWrapper: void 0,
8966
+ /** 下拉箭头区域 */
8967
+ $suffix: void 0,
8968
+ /** 下拉箭头图标 */
8969
+ $suffixIcon: void 0,
8970
+ /** 下拉列表弹窗的下拉列表容器 */
8971
+ $selectDialogContainer: void 0,
8972
+ },
8973
+ $data: {
8974
+ /**
8975
+ * 数据
8976
+ */
8977
+ data: [],
8978
+ /**
8979
+ * 默认值
8980
+ */
8981
+ defaultValue: viewConfig.getValue(),
8982
+ /**
8983
+ * 选择的信息
8984
+ */
8985
+ selectedData: void 0,
8986
+ /**
8987
+ * 是否验证通过
8988
+ */
8989
+ isValidSuccess: true,
8990
+ /**
8991
+ * 箭头旋转的属性
8992
+ */
8993
+ rotateKey: "data-show-option",
8994
+ },
8995
+ /** 初始化 */
8996
+ init() {
8997
+ this.initDefault();
8998
+ this.initEl();
8999
+ this.initPlaceHolder();
9000
+ this.renderSelectText();
9001
+ this.onShowSelectDialogClick();
9002
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9003
+ if (disabled) {
9004
+ this.disable();
8751
9005
  }
8752
- optionElement.innerText = dataItem.text;
8753
- this.$ele.select.appendChild(optionElement);
8754
- });
8755
- },
8756
- /**
8757
- * 设置选项选中
8758
- */
8759
- setOptionSelected($option) {
8760
- $option.setAttribute("selected", "true");
8761
- },
8762
- /** 检测所有option并设置禁用状态 */
8763
- setSelectOptionsDisableStatus() {
8764
- if (this.$ele.select.options && this.$ele.select.options.length) {
8765
- Array.from(this.$ele.select.options).forEach((optionItem) => {
8766
- this.setOptionDisableStatus(optionItem);
9006
+ },
9007
+ /** 初始化默认值 */
9008
+ initDefault() {
9009
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9010
+ this.$data.data.forEach((dataItem) => {
9011
+ if (this.$data.defaultValue.includes(dataItem.value)) {
9012
+ // 初始化选中的配置
9013
+ this.resetCurrentSelectedInfo();
9014
+ this.updateSelectedInfo(dataItem);
9015
+ }
8767
9016
  });
8768
- }
8769
- },
8770
- /** 设置禁用状态 */
8771
- setOptionDisableStatus(optionElement) {
8772
- let disable = false;
8773
- const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
8774
- if (optionDisableAttr === "function") {
8775
- const value = this.getNodeValue(optionElement, this.$eleKey.value);
8776
- disable = Boolean(optionDisableAttr(value));
8777
- }
8778
- if (disable) {
8779
- optionElement.setAttribute("disabled", "true");
8780
- }
8781
- else {
8782
- optionElement.removeAttribute("disabled");
8783
- }
8784
- },
8785
- /** 获取option上的信息 */
8786
- getSelectOptionInfo($option) {
8787
- const optionValue = this.getNodeValue($option, this.$eleKey.value);
8788
- const optionText = $option.innerText || $option.textContent;
8789
- const views = this.getNodeValue($option, this.$eleKey.viewConfig);
8790
- return {
8791
- value: optionValue,
8792
- text: optionText,
8793
- views: views,
8794
- $option: $option,
8795
- };
8796
- },
8797
- /**
8798
- * 监听选择内容改变
8799
- */
8800
- setChangeEvent() {
8801
- popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
8802
- const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
8803
- const selectInfo = this.getSelectOptionInfo($isSelectedElement);
8804
- this.setSelectOptionsDisableStatus();
9017
+ },
9018
+ /** 初始化$ele变量 */
9019
+ initEl() {
9020
+ this.$el.$container = $li.querySelector(".pops-panel-select");
9021
+ PopsSafeUtils.setSafeHTML(this.$el.$container,
9022
+ /*html*/ `
9023
+ <div class="el-select__wrapper">
9024
+ <div class="el-select__selection">
9025
+ <!-- 这个是用于手动输入的，这里暂不适配 -->
9026
+ <div class="el-select__selected-item el-select__input-wrapper"></div>
9027
+ <!-- 这个是placeholder -->
9028
+ <div class="el-select__selected-item el-select__placeholder"></div>
9029
+ </div>
9030
+ <!-- 下拉箭头 -->
9031
+ <div class="el-select__suffix">
9032
+ <i class="el-icon el-select__caret el-select__icon">
9033
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
9034
+ <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>
9035
+ </svg>
9036
+ </i>
9037
+ </div>
9038
+ </div>`);
9039
+ this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
9040
+ this.$el.$section = $li.querySelector(".el-select__selection");
9041
+ this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
9042
+ this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
9043
+ this.$el.$suffix = $li.querySelector(".el-select__suffix");
9044
+ this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
9045
+ // 先把手动输入框隐藏
9046
+ this.hideInputWrapper();
9047
+ },
9048
+ /**
9049
+ * 初始化提示文字
9050
+ */
9051
+ initPlaceHolder() {
9052
+ let placeholder = "--请选择--";
9053
+ if (typeof viewConfig.placeholder === "string") {
9054
+ placeholder = viewConfig.placeholder;
9055
+ }
9056
+ else if (typeof viewConfig.placeholder === "function") {
9057
+ const placeholderResult = viewConfig.placeholder();
9058
+ if (typeof placeholderResult === "string") {
9059
+ placeholder = placeholderResult;
9060
+ }
9061
+ }
9062
+ /**
9063
+ * 默认提示文字的位置
9064
+ */
9065
+ const defaultSelectedTextAlign = "left";
9066
+ this.$el.$section.setAttribute("data-selected-text-align", viewConfig.selectedTextAlign || defaultSelectedTextAlign);
9067
+ const $placeholder = popsDOMUtils.createElement("span", {
9068
+ innerText: placeholder,
9069
+ });
9070
+ this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
9071
+ },
9072
+ /**
9073
+ * 重新渲染外面的已选择项的文本
9074
+ *
9075
+ * 如果未选择，显示提示文字
9076
+ */
9077
+ renderSelectText() {
9078
+ let item = this.$data.data.find((dataItem) => {
9079
+ return dataItem.value === this.$data.selectedData?.value;
9080
+ });
9081
+ if (item == null) {
9082
+ // 未找到但是有选中信息，且是自定义输入的
9083
+ if (this.$data.selectedData && this.$data.selectedData.addCustomInput) {
9084
+ item = this.$data.selectedData;
9085
+ }
9086
+ }
9087
+ if (item != null) {
9088
+ // 默认值在数据中
9089
+ // 显示该数据项的文本
9090
+ // 隐藏placeholder
9091
+ const text = typeof item.text === "function" ? item.text(item.value, item) : item.text;
9092
+ if (item.isHTML) {
9093
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, text);
9094
+ }
9095
+ else {
9096
+ PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper,
9097
+ /*html*/ `
9098
+ <span>${text}</span>
9099
+ `);
9100
+ }
9101
+ // 显示选中的内容
9102
+ this.showInputWrapper();
9103
+ // 隐藏placeholder
9104
+ this.hidePlaceHolderWrapper();
9105
+ }
9106
+ else {
9107
+ // 仅显示placeholder
9108
+ this.hideInputWrapper();
9109
+ this.showPlaceHolderWrapper();
9110
+ }
9111
+ },
9112
+ /**
9113
+ * 禁用选项容器
9114
+ */
9115
+ disable() {
9116
+ popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
9117
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9118
+ },
9119
+ /**
9120
+ * 取消禁用选项容器
9121
+ */
9122
+ cancleDisable() {
9123
+ popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
9124
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9125
+ },
9126
+ /**
9127
+ * 判断当前是否已禁用选项容器
9128
+ */
9129
+ isDisabled() {
9130
+ return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable") ||
9131
+ popsDOMUtils.containsClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled));
9132
+ },
9133
+ /**
9134
+ * 设置选择列表的点击事件
9135
+ *
9136
+ * 点击显示选择列表的弹窗
9137
+ */
9138
+ onShowSelectDialogClick() {
9139
+ const defaultCSS = PopsCSS.panelComponents_Select;
9140
+ popsDOMUtils.on(this.$el.$container, "click", () => {
9141
+ if (this.isDisabled()) {
9142
+ return;
9143
+ }
9144
+ /** 当前已选中的值 */
9145
+ const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9146
+ /**
9147
+ * 弹窗关闭的回调
9148
+ */
9149
+ const dialogCloseCallback = () => {
9150
+ if (this.$data.selectedData?.addCustomInput && !this.$data.isValidSuccess) {
9151
+ // 当前是自定义输入的且未通过校验
9152
+ return false;
9153
+ }
9154
+ else {
9155
+ // 清除自定义输入的值
9156
+ this.getAllSelectItems(false).forEach((it) => {
9157
+ if (!it.data.addCustomInput)
9158
+ return;
9159
+ it.data.value = "";
9160
+ it.data.text = "";
9161
+ this.onValueChangeCallback(it.data);
9162
+ });
9163
+ }
9164
+ this.renderSelectText();
9165
+ this.$el.$selectDialogContainer = null;
9166
+ this.$el.$container.removeAttribute(this.$data.rotateKey);
9167
+ };
9168
+ this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
9169
+ const confirmConfig = popsUtils.assign({
9170
+ title: {
9171
+ text: "请勾选需要选择的选项",
9172
+ position: "center",
9173
+ },
9174
+ content: {
9175
+ text: /*html*/ `<ul class="select-container"></ul>`,
9176
+ html: true,
9177
+ },
9178
+ btn: {
9179
+ ok: {
9180
+ enable: false,
9181
+ },
9182
+ close: {
9183
+ enable: true,
9184
+ callback(evtConfig) {
9185
+ const ret = dialogCloseCallback();
9186
+ if (typeof ret === "boolean" && !ret) {
9187
+ return;
9188
+ }
9189
+ evtConfig.close();
9190
+ },
9191
+ },
9192
+ },
9193
+ mask: {
9194
+ enable: true,
9195
+ clickCallBack(originalRun) {
9196
+ const ret = dialogCloseCallback();
9197
+ if (typeof ret === "boolean" && !ret) {
9198
+ return;
9199
+ }
9200
+ originalRun();
9201
+ },
9202
+ clickEvent: {
9203
+ toClose: true,
9204
+ },
9205
+ },
9206
+ drag: true,
9207
+ dragLimit: true,
9208
+ width: "300px",
9209
+ height: "auto",
9210
+ style: /*css*/ `
9211
+ ${defaultCSS}
9212
+
9213
+ ${PopsCSS.panelCSS}
9214
+
9215
+ ${style || ""}
9216
+ `,
9217
+ }, userConfirmConfig);
9218
+ const $dialog = PopsAlert.init(confirmConfig);
9219
+ const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
9220
+ // 初始化选项元素
9221
+ this.$data.data.forEach((item) => {
9222
+ if (item.addCustomInput) {
9223
+ // 添加自定义输入的
9224
+ const customInputDataOption = item;
9225
+ const $customInputSelecItem = this.createSelectItemElement(customInputDataOption);
9226
+ const context = this;
9227
+ const PanelInput = that.createSectionContainerItem_input({
9228
+ type: "input",
9229
+ text: "",
9230
+ getValue() {
9231
+ return customInputDataOption.value;
9232
+ },
9233
+ callback(evt, value) {
9234
+ customInputDataOption.text = value;
9235
+ customInputDataOption.value = value;
9236
+ if (typeof customInputDataOption.onValid === "function") {
9237
+ const ret = customInputDataOption.onValid(customInputDataOption);
9238
+ context.$data.isValidSuccess = ret.valid;
9239
+ if (ret.valid) {
9240
+ PanelInputHandler.removeValidErrorMsg();
9241
+ }
9242
+ else {
9243
+ PanelInputHandler.addValidErrorMsg(ret.message);
9244
+ return ret;
9245
+ }
9246
+ }
9247
+ context.updateSelectedInfo(customInputDataOption);
9248
+ context.onValueChangeCallback(customInputDataOption);
9249
+ },
9250
+ });
9251
+ // 获取输入框处理函数
9252
+ const PanelInputHandler = PanelInput.handler;
9253
+ const $inputContainer = PanelInput.$el.querySelector(".pops-panel-input");
9254
+ PopsSafeUtils.setSafeHTML($customInputSelecItem, "");
9255
+ $customInputSelecItem.appendChild($inputContainer);
9256
+ // 添加到confirm中
9257
+ $selectContainer.appendChild($customInputSelecItem);
9258
+ // 设置项的点击事件
9259
+ this.onSelectItemClick(customInputDataOption, $customInputSelecItem);
9260
+ }
9261
+ else {
9262
+ const $select = this.createSelectItemElement(item);
9263
+ // 添加到confirm中
9264
+ $selectContainer.appendChild($select);
9265
+ // 设置项的点击事件
9266
+ this.onSelectItemClick(item, $select);
9267
+ }
9268
+ });
9269
+ this.$el.$selectDialogContainer = $selectContainer;
9270
+ // 初始化状态
9271
+ this.updateAllSelectItemStatus();
9272
+ });
9273
+ },
9274
+ /**
9275
+ * 选中的值改变的回调
9276
+ * @param data 当前的选中信息
9277
+ */
9278
+ onValueChangeCallback(data, isUpdateSelectItem = true) {
9279
+ // 动态更新禁用状态、选中状态
9280
+ isUpdateSelectItem && this.updateAllSelectItemStatus();
9281
+ // 触发回调
8805
9282
  if (typeof viewConfig.callback === "function") {
8806
- viewConfig.callback(event, selectInfo.value, selectInfo.text);
9283
+ viewConfig.callback(data || this.$data.selectedData);
9284
+ }
9285
+ },
9286
+ /**
9287
+ * 更新选项弹窗内的所有选项元素的状态
9288
+ *
9289
+ * + 更新禁用状态
9290
+ * + 更新选中状态
9291
+ */
9292
+ updateAllSelectItemStatus() {
9293
+ const allSelectItems = this.getAllSelectItems(false);
9294
+ allSelectItems.forEach(($selectInfo) => {
9295
+ const { data, $select } = $selectInfo;
9296
+ // 更新文字
9297
+ this.setSelectItemText(data, $selectInfo.$select);
9298
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
9299
+ // 移除选中状态
9300
+ this.removeItemSelected($select);
9301
+ // 禁用
9302
+ this.setSelectItemDisabled($select);
9303
+ }
9304
+ else {
9305
+ // 移除禁用状态
9306
+ this.removeSelectItemDisabled($select);
9307
+ }
9308
+ // 根据当前已选择的信息，判断并更新选中状态
9309
+ if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
9310
+ // 就是这个项
9311
+ // 设置选中
9312
+ this.setItemSelected($select);
9313
+ }
9314
+ else {
9315
+ // 不是这个项
9316
+ // 移除选中状态
9317
+ this.removeItemSelected($select);
9318
+ }
9319
+ });
9320
+ },
9321
+ /**
9322
+ * 重置所有已选中的项以下状态
9323
+ *
9324
+ * + 更新选项显示的文字
9325
+ * + 移除禁用状态
9326
+ * + 移除选中状态
9327
+ */
9328
+ resetAllSelectedItemStatus() {
9329
+ const allSelectedItems = this.getAllSelectItems(true);
9330
+ if (allSelectedItems.length) {
9331
+ // 移除选中信息
9332
+ this.resetCurrentSelectedInfo();
9333
+ }
9334
+ allSelectedItems.forEach(($selectInfo) => {
9335
+ const { data, $select } = $selectInfo;
9336
+ // 更新文字
9337
+ this.setSelectItemText(data, $selectInfo.$select);
9338
+ // 移除选中状态
9339
+ this.removeItemSelected($select);
9340
+ // 取消禁用
9341
+ this.removeSelectItemDisabled($select);
9342
+ });
9343
+ },
9344
+ /**
9345
+ * 设置选项元素选中
9346
+ * @param $el 选项元素
9347
+ */
9348
+ setItemSelected($el) {
9349
+ if (this.isItemSelected($el))
9350
+ return;
9351
+ $el.classList.add("select-item-is-selected");
9352
+ },
9353
+ /**
9354
+ * 移除选项元素选中
9355
+ * @param $el 选项元素
9356
+ */
9357
+ removeItemSelected($el) {
9358
+ $el.classList.remove("select-item-is-selected");
9359
+ },
9360
+ /**
9361
+ * 判断选项元素是否选中
9362
+ * @param $el
9363
+ */
9364
+ isItemSelected($el) {
9365
+ return $el.classList.contains("select-item-is-selected");
9366
+ },
9367
+ /**
9368
+ * 添加选中信息
9369
+ * @param data 选择项的数据
9370
+ * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
9371
+ */
9372
+ addSelectedItemInfo(data) {
9373
+ this.resetCurrentSelectedInfo();
9374
+ this.updateSelectedInfo(data);
9375
+ this.onValueChangeCallback(data);
9376
+ },
9377
+ /**
9378
+ * 获取项上存储的信息
9379
+ * @param $el 选项元素
9380
+ */
9381
+ getItemDataOption($el) {
9382
+ return Reflect.get($el, "data-info");
9383
+ },
9384
+ /**
9385
+ * 移除选中信息
9386
+ * @param data 选择项的数据
9387
+ */
9388
+ removeSelectedItemInfo() {
9389
+ // 删除
9390
+ this.updateSelectedInfo();
9391
+ this.onValueChangeCallback();
9392
+ },
9393
+ /**
9394
+ * 更新选中信息
9395
+ * @param data 数据
9396
+ */
9397
+ updateSelectedInfo(data) {
9398
+ // 先删除再赋值
9399
+ this.$data.selectedData = void 0;
9400
+ if (data) {
9401
+ if (data.addCustomInput && data.value.toString() === "") {
9402
+ // 自定义输入框，但是内容是空字符串
9403
+ // 不更新选中信息
9404
+ return;
9405
+ }
9406
+ this.$data.selectedData = data;
8807
9407
  }
8808
- const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
8809
- if (Array.isArray(views)) {
8810
- // 如果成功创建，加入到中间容器中
8811
- const childUListClassName = "pops-panel-select-child-forms";
8812
- // 移除旧的元素
8813
- while ($li.nextElementSibling) {
8814
- if ($li.nextElementSibling.classList.contains(childUListClassName)) {
8815
- $li.nextElementSibling.remove();
9408
+ },
9409
+ /**
9410
+ * 从保存的已选中的信息列表中移除目标信息
9411
+ */
9412
+ resetCurrentSelectedInfo() {
9413
+ this.updateSelectedInfo();
9414
+ },
9415
+ /**
9416
+ * 获取所有选项的信息
9417
+ * @param [onlySelected=true] 是否仅获取选中的项的信息
9418
+ * + true （默认）仅获取选中项的信息
9419
+ * + false 获取所有选择项的信息
9420
+ */
9421
+ getAllSelectItems(onlySelected = true) {
9422
+ return Array.from(this.$el.$selectDialogContainer?.querySelectorAll(".select-item") ?? [])
9423
+ .map(($select) => {
9424
+ const data = this.getItemDataOption($select);
9425
+ const result = {
9426
+ /** 选项信息数据 */
9427
+ data: data,
9428
+ /** 选项元素 */
9429
+ $select: $select,
9430
+ };
9431
+ if (onlySelected) {
9432
+ // 仅选中
9433
+ const isSelected = this.isItemSelected($select);
9434
+ if (isSelected) {
9435
+ return result;
9436
+ }
9437
+ return;
9438
+ }
9439
+ else {
9440
+ return result;
9441
+ }
9442
+ })
9443
+ .filter((item) => {
9444
+ return item != null;
9445
+ });
9446
+ },
9447
+ /**
9448
+ * 创建一个选择项元素
9449
+ * @param data 选择项的数据
9450
+ */
9451
+ createSelectItemElement(data) {
9452
+ const $select = popsDOMUtils.createElement("li", {
9453
+ className: "select-item",
9454
+ innerHTML: /*html*/ `<span class="select-item-text"></span>`,
9455
+ });
9456
+ this.setSelectItemText(data, $select);
9457
+ Reflect.set($select, "data-info", data);
9458
+ return $select;
9459
+ },
9460
+ /**
9461
+ * 设置选择项的文字
9462
+ * @param data 选择项的数据
9463
+ * @param $select 选择项元素
9464
+ */
9465
+ setSelectItemText(data, $select) {
9466
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
9467
+ const $selectSpan = $select.querySelector(".select-item-text");
9468
+ if (!$selectSpan)
9469
+ return;
9470
+ if (data.isHTML) {
9471
+ PopsSafeUtils.setSafeHTML($selectSpan, text);
9472
+ }
9473
+ else {
9474
+ $selectSpan.innerText = text;
9475
+ }
9476
+ },
9477
+ /**
9478
+ * 设置选择项禁用
9479
+ * @param $select 选择项元素
9480
+ */
9481
+ setSelectItemDisabled($select) {
9482
+ $select.setAttribute("aria-disabled", "true");
9483
+ $select.setAttribute("disabled", "true");
9484
+ },
9485
+ /**
9486
+ * 移除选择项的禁用状态
9487
+ * @param $select 选择项元素
9488
+ */
9489
+ removeSelectItemDisabled($select) {
9490
+ $select.removeAttribute("aria-disabled");
9491
+ $select.removeAttribute("disabled");
9492
+ },
9493
+ /**
9494
+ * 判断选择项是否禁用
9495
+ * @param $select 选择项元素
9496
+ */
9497
+ isSelectItemDisabled($select) {
9498
+ return $select.hasAttribute("disabled") || $select.ariaDisabled;
9499
+ },
9500
+ /**
9501
+ * 设置选择项的点击事件
9502
+ * @param data 该选择项的信息
9503
+ * @param $select 该选择项元素
9504
+ */
9505
+ onSelectItemClick(data, $select) {
9506
+ const updateCustomInputStatus = () => {
9507
+ this.setItemSelected($select);
9508
+ this.addSelectedItemInfo(data);
9509
+ };
9510
+ popsDOMUtils.on($select, "click", (event) => {
9511
+ popsDOMUtils.preventEvent(event);
9512
+ const $click = event.target;
9513
+ if (data?.addCustomInput && $click instanceof HTMLInputElement) {
9514
+ // 自定义输入框 单独处理值更新，选中
9515
+ updateCustomInputStatus();
9516
+ return;
9517
+ }
9518
+ if (this.isSelectItemDisabled($select)) {
9519
+ // 被禁用了
9520
+ return;
9521
+ }
9522
+ if (typeof viewConfig.clickCallBack === "function") {
9523
+ const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
9524
+ if (typeof clickResult === "boolean" && !clickResult) {
9525
+ return;
9526
+ }
9527
+ }
9528
+ if (data?.addCustomInput) {
9529
+ // 自定义输入框 添加选中
9530
+ updateCustomInputStatus();
9531
+ }
9532
+ else {
9533
+ // 修改选中状态
9534
+ if (this.isItemSelected($select)) {
9535
+ // 移除选中
9536
+ this.removeItemSelected($select);
9537
+ this.removeSelectedItemInfo();
8816
9538
  }
8817
9539
  else {
8818
- break;
9540
+ // 添加选中
9541
+ this.setItemSelected($select);
9542
+ this.addSelectedItemInfo(data);
8819
9543
  }
8820
9544
  }
8821
- const $childUList = popsDOMUtils.createElement("ul");
8822
- $childUList.className = childUListClassName;
8823
- popsDOMUtils.after($li, $childUList);
8824
- that.uListContainerAddItem(viewConfig, {
8825
- ulElement: $childUList,
9545
+ });
9546
+ },
9547
+ /** 显示输入框 */
9548
+ showInputWrapper() {
9549
+ popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
9550
+ },
9551
+ /** 隐藏输入框 */
9552
+ hideInputWrapper() {
9553
+ popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
9554
+ },
9555
+ /** 显示palceholder */
9556
+ showPlaceHolderWrapper() {
9557
+ popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
9558
+ },
9559
+ /** 隐藏palceholder */
9560
+ hidePlaceHolderWrapper() {
9561
+ popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
9562
+ },
9563
+ };
9564
+ PopsPanelSelect.init();
9565
+ Reflect.set($li, "data-select", PopsPanelSelect);
9566
+ handler = PopsPanelSelect;
9567
+ }
9568
+ else {
9569
+ const PopsPanelSelectNative = {
9570
+ [Symbol.toStringTag]: "PopsPanelSelectNative",
9571
+ $el: {
9572
+ itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
9573
+ panelSelect: $li.querySelector(".pops-panel-select"),
9574
+ select: $li.querySelector(".pops-panel-select select"),
9575
+ },
9576
+ $eleKey: {
9577
+ disable: "__disable__",
9578
+ value: "__value__",
9579
+ viewConfig: "data-view-config",
9580
+ },
9581
+ $data: {
9582
+ data: [],
9583
+ defaultValue: viewConfig.getValue(),
9584
+ },
9585
+ init() {
9586
+ this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
9587
+ popsDOMUtils.addClassName(this.$el.panelSelect, PopsCommonCSSClassName.userSelectNone);
9588
+ this.initOption();
9589
+ this.onValueChange();
9590
+ this.onClick();
9591
+ const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
9592
+ if (disabled) {
9593
+ this.disable();
9594
+ }
9595
+ },
9596
+ /**
9597
+ * 给option元素设置属性
9598
+ * @param $ele
9599
+ * @param key
9600
+ * @param value
9601
+ */
9602
+ setNodeValue($ele, key, value) {
9603
+ Reflect.set($ele, key, value);
9604
+ },
9605
+ /**
9606
+ * 获取option元素上设置的属性
9607
+ * @param $ele
9608
+ * @param value
9609
+ * @param key
9610
+ */
9611
+ getNodeValue($ele, key) {
9612
+ return Reflect.get($ele, key);
9613
+ },
9614
+ /**
9615
+ * 禁用选项
9616
+ */
9617
+ disable() {
9618
+ this.$el.select.setAttribute("disabled", "true");
9619
+ popsDOMUtils.addClassName(this.$el.panelSelect, "pops-panel-select-disable");
9620
+ popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9621
+ },
9622
+ /**
9623
+ * 取消禁用
9624
+ */
9625
+ notDisable() {
9626
+ this.$el.select.removeAttribute("disabled");
9627
+ popsDOMUtils.removeClassName(this.$el.panelSelect, "pops-panel-select-disable");
9628
+ popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
9629
+ },
9630
+ /**
9631
+ * 判断是否禁用
9632
+ */
9633
+ isDisabled() {
9634
+ return (this.$el.select.hasAttribute("disabled") ||
9635
+ popsDOMUtils.containsClassName(this.$el.panelSelect, "pops-panel-select-disable"));
9636
+ },
9637
+ /**
9638
+ * 初始化选项
9639
+ */
9640
+ initOption() {
9641
+ this.$data.data.forEach((dataItem) => {
9642
+ // 初始化默认选中
9643
+ const optionElement = popsDOMUtils.createElement("option");
9644
+ this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
9645
+ this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
9646
+ this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
9647
+ if (dataItem.value === this.$data.defaultValue) {
9648
+ this.setOptionSelected(optionElement);
9649
+ }
9650
+ if (typeof dataItem.text === "function") {
9651
+ optionElement.innerText = dataItem.text(dataItem.value, dataItem);
9652
+ }
9653
+ else {
9654
+ optionElement.innerText = dataItem.text;
9655
+ }
9656
+ this.$el.select.appendChild(optionElement);
9657
+ });
9658
+ },
9659
+ /**
9660
+ * 设置选项选中
9661
+ * @param $option
9662
+ */
9663
+ setOptionSelected($option) {
9664
+ $option.setAttribute("selected", "true");
9665
+ },
9666
+ /**
9667
+ * 检测所有option并设置禁用状态
9668
+ */
9669
+ setSelectOptionsDisableStatus() {
9670
+ if (this.$el.select.options && this.$el.select.options.length) {
9671
+ Array.from(this.$el.select.options).forEach((optionItem) => {
9672
+ this.setOptionDisableStatus(optionItem);
8826
9673
  });
8827
9674
  }
8828
- });
8829
- },
8830
- /**
8831
- * 监听点击事件
8832
- */
8833
- setClickEvent() {
8834
- popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
8835
- this.setSelectOptionsDisableStatus();
8836
- if (typeof viewConfig.clickCallBack === "function") {
8837
- viewConfig.clickCallBack(event, this.$ele.select);
9675
+ },
9676
+ /**
9677
+ * 设置禁用状态
9678
+ * @param $option
9679
+ */
9680
+ setOptionDisableStatus($option) {
9681
+ let disable = false;
9682
+ const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
9683
+ if (optionDisableAttr === "function") {
9684
+ const value = this.getNodeValue($option, this.$eleKey.value);
9685
+ disable = Boolean(optionDisableAttr(value));
8838
9686
  }
8839
- });
8840
- },
9687
+ if (disable) {
9688
+ $option.setAttribute("disabled", "true");
9689
+ }
9690
+ else {
9691
+ $option.removeAttribute("disabled");
9692
+ }
9693
+ },
9694
+ /**
9695
+ * 获取option上的信息
9696
+ * @param $option
9697
+ */
9698
+ getSelectOptionInfo($option) {
9699
+ const optionValue = this.getNodeValue($option, this.$eleKey.value);
9700
+ const optionText = $option.innerText || $option.textContent;
9701
+ const views = this.getNodeValue($option, this.$eleKey.viewConfig);
9702
+ return {
9703
+ value: optionValue,
9704
+ text: optionText,
9705
+ views: views,
9706
+ $option: $option,
9707
+ };
9708
+ },
9709
+ /**
9710
+ * 监听选择内容改变
9711
+ */
9712
+ onValueChange() {
9713
+ popsDOMUtils.on(this.$el.select, "change", () => {
9714
+ const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
9715
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9716
+ this.setSelectOptionsDisableStatus();
9717
+ if (typeof viewConfig.callback === "function") {
9718
+ viewConfig.callback(selectInfo);
9719
+ }
9720
+ const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
9721
+ if (Array.isArray(views)) {
9722
+ // 如果成功创建，加入到中间容器中
9723
+ const childUListClassName = "pops-panel-select-child-forms";
9724
+ // 移除旧的元素
9725
+ while ($li.nextElementSibling) {
9726
+ if ($li.nextElementSibling.classList.contains(childUListClassName)) {
9727
+ $li.nextElementSibling.remove();
9728
+ }
9729
+ else {
9730
+ break;
9731
+ }
9732
+ }
9733
+ const $childUList = popsDOMUtils.createElement("ul");
9734
+ $childUList.className = childUListClassName;
9735
+ popsDOMUtils.after($li, $childUList);
9736
+ that.uListContainerAddItem(viewConfig, {
9737
+ ulElement: $childUList,
9738
+ });
9739
+ }
9740
+ });
9741
+ },
9742
+ /**
9743
+ * 监听点击事件
9744
+ */
9745
+ onClick() {
9746
+ popsDOMUtils.on(this.$el.select, "click", void 0, (event) => {
9747
+ this.setSelectOptionsDisableStatus();
9748
+ if (typeof viewConfig.clickCallBack === "function") {
9749
+ const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
9750
+ const selectInfo = this.getSelectOptionInfo($isSelectedElement);
9751
+ viewConfig.clickCallBack(event, selectInfo);
9752
+ }
9753
+ });
9754
+ },
9755
+ };
9756
+ PopsPanelSelectNative.init();
9757
+ Reflect.set($li, "data-select", PopsPanelSelectNative);
9758
+ handler = PopsPanelSelectNative;
9759
+ }
9760
+ return {
9761
+ $el: $li,
9762
+ handler: handler,
8841
9763
  };
8842
- PopsPanelSelect.init();
8843
- Reflect.set($li, "data-select", PopsPanelSelect);
8844
- return $li;
8845
9764
  },
8846
9765
  /**
8847
9766
  * type ==> select-multiple
@@ -8911,9 +9830,9 @@ const PanelHandlerComponents = () => {
8911
9830
  /** 默认值 */
8912
9831
  defaultValue: viewConfig.getValue(),
8913
9832
  /**
8914
- * 选择的信息
9833
+ * 已选择的信息
8915
9834
  */
8916
- selectInfo: [],
9835
+ selectedDataList: [],
8917
9836
  /**
8918
9837
  * 箭头旋转的属性
8919
9838
  */
@@ -8925,7 +9844,7 @@ const PanelHandlerComponents = () => {
8925
9844
  this.inintEl();
8926
9845
  this.initPlaceHolder();
8927
9846
  this.initTagElement();
8928
- this.setSelectContainerClickEvent();
9847
+ this.onShowSelectDialogClick();
8929
9848
  const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
8930
9849
  if (disabled) {
8931
9850
  this.disable();
@@ -8936,12 +9855,7 @@ const PanelHandlerComponents = () => {
8936
9855
  viewConfig.data.forEach((dataItem) => {
8937
9856
  if (this.$data.defaultValue.includes(dataItem.value)) {
8938
9857
  // 初始化选中的配置
8939
- this.$data.selectInfo.push({
8940
- text: dataItem.text,
8941
- value: dataItem.value,
8942
- isHTML: Boolean(dataItem.isHTML),
8943
- disable: dataItem.disable?.bind(dataItem),
8944
- });
9858
+ this.$data.selectedDataList.push(dataItem);
8945
9859
  }
8946
9860
  });
8947
9861
  },
@@ -8957,7 +9871,9 @@ const PanelHandlerComponents = () => {
8957
9871
  // 先把手动输入框隐藏
8958
9872
  this.hideInputWrapper();
8959
9873
  },
8960
- /** 初始化提示文字 */
9874
+ /**
9875
+ * 初始化提示文字
9876
+ */
8961
9877
  initPlaceHolder() {
8962
9878
  let placeholder = "";
8963
9879
  if (typeof viewConfig.placeholder === "string") {
@@ -8974,16 +9890,18 @@ const PanelHandlerComponents = () => {
8974
9890
  });
8975
9891
  this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
8976
9892
  },
8977
- /** 初始化tag元素 */
9893
+ /**
9894
+ * 初始化tag元素
9895
+ */
8978
9896
  initTagElement() {
8979
9897
  // 遍历数据，寻找对应的值
8980
9898
  viewConfig.data.forEach((dataItem) => {
8981
- const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
9899
+ const findValue = this.$data.selectedDataList.find((item) => item.value === dataItem.value);
8982
9900
  if (findValue) {
8983
9901
  // 存在对应的值
8984
- const selectedInfo = this.createSelectedTagItem(dataItem);
8985
- this.addSelectedTagItem(selectedInfo.$tag);
8986
- this.setSelectedItemCloseIconClickEvent({
9902
+ const selectedInfo = this.createTagItem(dataItem);
9903
+ this.addTagItem(selectedInfo.$tag);
9904
+ this.onSelectItemCloseIconClick({
8987
9905
  $tag: selectedInfo.$tag,
8988
9906
  $closeIcon: selectedInfo.$closeIcon,
8989
9907
  value: dataItem.value,
@@ -8997,8 +9915,8 @@ const PanelHandlerComponents = () => {
8997
9915
  * 生成一个tag项
8998
9916
  * @param data 配置
8999
9917
  */
9000
- createSelectedTagItem(data) {
9001
- const $selectedItem = popsDOMUtils.createElement("div", {
9918
+ createTagItem(data) {
9919
+ const $tag = popsDOMUtils.createElement("div", {
9002
9920
  className: "el-select__selected-item el-select__choose_tag",
9003
9921
  innerHTML: /*html*/ `
9004
9922
  <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
@@ -9015,10 +9933,10 @@ const PanelHandlerComponents = () => {
9015
9933
  `,
9016
9934
  });
9017
9935
  /** 标签 */
9018
- const $tagText = $selectedItem.querySelector(".el-select__tags-text");
9936
+ const $tagText = $tag.querySelector(".el-select__tags-text");
9019
9937
  /** 关闭图标 */
9020
- const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
9021
- const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
9938
+ const $closeIcon = $tag.querySelector(".el-icon.el-tag__close");
9939
+ const text = typeof data.text === "function" ? data.text(data, this.$data.selectedDataList) : data.text;
9022
9940
  if (data.isHTML) {
9023
9941
  PopsSafeUtils.setSafeHTML($tagText, text);
9024
9942
  }
@@ -9026,7 +9944,7 @@ const PanelHandlerComponents = () => {
9026
9944
  $tagText.innerText = text;
9027
9945
  }
9028
9946
  return {
9029
- $tag: $selectedItem,
9947
+ $tag: $tag,
9030
9948
  $tagText: $tagText,
9031
9949
  $closeIcon: $closeIcon,
9032
9950
  };
@@ -9035,7 +9953,7 @@ const PanelHandlerComponents = () => {
9035
9953
  * 添加选中项的tag元素
9036
9954
  * @param $tag 添加的元素
9037
9955
  */
9038
- addSelectedTagItem($tag) {
9956
+ addTagItem($tag) {
9039
9957
  // 往前添加
9040
9958
  // 去除前面的空白
9041
9959
  this.setSectionIsNear();
@@ -9068,8 +9986,10 @@ const PanelHandlerComponents = () => {
9068
9986
  this.hideInputWrapper();
9069
9987
  this.hidePlaceHolderWrapper();
9070
9988
  },
9071
- /** 更新tag信息 */
9072
- updateSelectTagItem() {
9989
+ /**
9990
+ * 更新tag信息
9991
+ */
9992
+ updateTagItem() {
9073
9993
  this.$el.$section.querySelectorAll(".el-select__choose_tag").forEach(($ele) => {
9074
9994
  $ele.remove();
9075
9995
  });
@@ -9079,11 +9999,11 @@ const PanelHandlerComponents = () => {
9079
9999
  * 选中的值改变的回调
9080
10000
  * @param selectedDataList 当前的选中信息
9081
10001
  */
9082
- selectValueChangeCallBack(selectedDataList) {
10002
+ onValueChange(selectedDataList) {
9083
10003
  // 动态更新禁用状态
9084
- this.updateSelectItem();
10004
+ this.updateAllSelectItems();
9085
10005
  if (typeof viewConfig.callback === "function") {
9086
- viewConfig.callback(selectedDataList || this.$data.selectInfo);
10006
+ viewConfig.callback(selectedDataList || this.$data.selectedDataList);
9087
10007
  }
9088
10008
  },
9089
10009
  /**
@@ -9092,31 +10012,31 @@ const PanelHandlerComponents = () => {
9092
10012
  * + 更新禁用状态
9093
10013
  * + 更新选中状态
9094
10014
  */
9095
- updateSelectItem() {
10015
+ updateAllSelectItems() {
9096
10016
  this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
9097
10017
  const { data, $select } = $selectInfo;
9098
10018
  // 更新文字
9099
10019
  this.setSelectItemText(data, $selectInfo.$select);
9100
10020
  // 更新禁用状态
9101
- if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectInfo)) {
10021
+ if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedDataList)) {
9102
10022
  // 禁用
9103
- this.setSelectItemDisabled($select);
10023
+ this.disableSelectItem($select);
9104
10024
  // 移除选中信息
9105
10025
  this.removeSelectedInfo(data, false);
9106
10026
  // 移除选中状态
9107
- this.removeSelectItemSelected($select);
10027
+ this.removeItemSelected($select);
9108
10028
  }
9109
10029
  else {
9110
10030
  // 取消禁用
9111
- this.removeSelectItemDisabled($select);
10031
+ this.cancleDisableSelectItem($select);
9112
10032
  }
9113
10033
  // 更新选中状态
9114
- const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
10034
+ const findValue = this.$data.selectedDataList.find((it) => it.value === data.value);
9115
10035
  if (findValue) {
9116
- this.setSelectItemSelected($select);
10036
+ this.setItemSelected($select);
9117
10037
  }
9118
10038
  else {
9119
- this.removeSelectItemSelected($select);
10039
+ this.removeItemSelected($select);
9120
10040
  }
9121
10041
  });
9122
10042
  },
@@ -9124,8 +10044,8 @@ const PanelHandlerComponents = () => {
9124
10044
  * 设置选项元素选中
9125
10045
  * @param $select 选项元素
9126
10046
  */
9127
- setSelectItemSelected($select) {
9128
- if (this.isSelectItemSelected($select))
10047
+ setItemSelected($select) {
10048
+ if (this.isItemSelected($select))
9129
10049
  return;
9130
10050
  $select.classList.add("select-item-is-selected");
9131
10051
  },
@@ -9133,14 +10053,14 @@ const PanelHandlerComponents = () => {
9133
10053
  * 移除选项元素选中
9134
10054
  * @param $select 选项元素
9135
10055
  */
9136
- removeSelectItemSelected($select) {
10056
+ removeItemSelected($select) {
9137
10057
  $select.classList.remove("select-item-is-selected");
9138
10058
  },
9139
10059
  /**
9140
10060
  * 判断选项元素是否选中
9141
10061
  * @param $select
9142
10062
  */
9143
- isSelectItemSelected($select) {
10063
+ isItemSelected($select) {
9144
10064
  return $select.classList.contains("select-item-is-selected");
9145
10065
  },
9146
10066
  /**
@@ -9148,18 +10068,13 @@ const PanelHandlerComponents = () => {
9148
10068
  * @param dataList 选择项列表的数据
9149
10069
  * @param $select 选项元素
9150
10070
  */
9151
- addSelectedItemInfo(dataList, $select) {
10071
+ addItemSelected(dataList, $select) {
9152
10072
  const info = this.getSelectedItemInfo($select);
9153
10073
  const findValue = dataList.find((item) => item.value === info.value);
9154
10074
  if (!findValue) {
9155
- dataList.push({
9156
- value: info.value,
9157
- text: info.text,
9158
- isHTML: Boolean(info.isHTML),
9159
- disable: info.disable?.bind(info),
9160
- });
10075
+ dataList.push(info);
9161
10076
  }
9162
- this.selectValueChangeCallBack(dataList);
10077
+ this.onValueChange(dataList);
9163
10078
  },
9164
10079
  /**
9165
10080
  * 获取选中的项的信息
@@ -9179,7 +10094,7 @@ const PanelHandlerComponents = () => {
9179
10094
  if (findIndex !== -1) {
9180
10095
  dataList.splice(findIndex, 1);
9181
10096
  }
9182
- this.selectValueChangeCallBack(dataList);
10097
+ this.onValueChange(dataList);
9183
10098
  },
9184
10099
  /**
9185
10100
  * 获取所有选项的信息
@@ -9199,7 +10114,7 @@ const PanelHandlerComponents = () => {
9199
10114
  };
9200
10115
  if (onlySelected) {
9201
10116
  // 仅选中
9202
- const isSelected = this.isSelectItemSelected($select);
10117
+ const isSelected = this.isItemSelected($select);
9203
10118
  if (isSelected) {
9204
10119
  return result;
9205
10120
  }
@@ -9234,7 +10149,7 @@ const PanelHandlerComponents = () => {
9234
10149
  * @param $select 选择项元素
9235
10150
  */
9236
10151
  setSelectItemText(data, $select) {
9237
- const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
10152
+ const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedDataList) : data.text;
9238
10153
  const $selectSpan = $select.querySelector(".select-item-text");
9239
10154
  if (data.isHTML) {
9240
10155
  PopsSafeUtils.setSafeHTML($selectSpan, text);
@@ -9247,7 +10162,7 @@ const PanelHandlerComponents = () => {
9247
10162
  * 设置选择项的禁用状态
9248
10163
  * @param $select 选择项元素
9249
10164
  */
9250
- setSelectItemDisabled($select) {
10165
+ disableSelectItem($select) {
9251
10166
  $select.setAttribute("aria-disabled", "true");
9252
10167
  $select.setAttribute("disabled", "true");
9253
10168
  },
@@ -9255,7 +10170,7 @@ const PanelHandlerComponents = () => {
9255
10170
  * 移除选择项的禁用状态
9256
10171
  * @param $select 选择项元素
9257
10172
  */
9258
- removeSelectItemDisabled($select) {
10173
+ cancleDisableSelectItem($select) {
9259
10174
  $select.removeAttribute("aria-disabled");
9260
10175
  $select.removeAttribute("disabled");
9261
10176
  },
@@ -9271,7 +10186,7 @@ const PanelHandlerComponents = () => {
9271
10186
  * @param dataList 选中的信息列表
9272
10187
  * @param $select 选择项元素
9273
10188
  */
9274
- setSelectElementClickEvent(dataList, $select) {
10189
+ onSelectItemClick(dataList, $select) {
9275
10190
  popsDOMUtils.on($select, "click", (event) => {
9276
10191
  popsDOMUtils.preventEvent(event);
9277
10192
  if (this.isSelectItemDisabled($select)) {
@@ -9285,13 +10200,13 @@ const PanelHandlerComponents = () => {
9285
10200
  }
9286
10201
  }
9287
10202
  // 修改选中状态
9288
- if (this.isSelectItemSelected($select)) {
9289
- this.removeSelectItemSelected($select);
10203
+ if (this.isItemSelected($select)) {
10204
+ this.removeItemSelected($select);
9290
10205
  this.removeSelectedItemInfo(dataList, $select);
9291
10206
  }
9292
10207
  else {
9293
- this.setSelectItemSelected($select);
9294
- this.addSelectedItemInfo(dataList, $select);
10208
+ this.setItemSelected($select);
10209
+ this.addItemSelected(dataList, $select);
9295
10210
  }
9296
10211
  });
9297
10212
  },
@@ -9300,79 +10215,18 @@ const PanelHandlerComponents = () => {
9300
10215
  *
9301
10216
  * 点击显示下拉列表弹窗
9302
10217
  */
9303
- setSelectContainerClickEvent() {
9304
- const defaultCSS = /*css*/ `
9305
- .select-container{
9306
- --el-font-size-base: 14px;
9307
- --el-text-color-regular: #606266;
9308
- --el-color-primary: #409eff;
9309
- --el-fill-color-light: #f5f7fa;
9310
- --el-disable-color: #a8abb2;
9311
- }
9312
- .select-item{
9313
- cursor: pointer;
9314
- font-size: var(--el-font-size-base);
9315
- padding: 0 32px 0 20px;
9316
- position: relative;
9317
- white-space: nowrap;
9318
- overflow: hidden;
9319
- text-overflow: ellipsis;
9320
- color: var(--el-text-color-regular);
9321
- height: 34px;
9322
- line-height: 34px;
9323
- box-sizing: border-box;
9324
- }
9325
- .select-item[aria-disabled],
9326
- .select-item[disabled]{
9327
- cursor: not-allowed;
9328
- color: var(--el-disable-color);
9329
- background: unset;
9330
- }
9331
- .select-item:hover{
9332
- background-color: var(--el-fill-color-light);
9333
- }
9334
- .select-item.select-item-is-selected{
9335
- color: var(--el-color-primary);
9336
- font-weight: 700;
9337
- }
9338
- .select-item.select-item-is-selected::after{
9339
- content: "";
9340
- position: absolute;
9341
- top: 50%;
9342
- right: 20px;
9343
- border-top: none;
9344
- border-right: none;
9345
- background-repeat: no-repeat;
9346
- background-position: center;
9347
- background-color: var(--el-color-primary);
9348
- 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;
9349
- mask-size: 100% 100%;
9350
- -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;
9351
- -webkit-mask-size: 100% 100%;
9352
- transform: translateY(-50%);
9353
- width: 12px;
9354
- height: 12px;
9355
- }
9356
-
9357
-
9358
- @media (prefers-color-scheme: dark) {
9359
- .select-container{
9360
- --el-text-color-regular: #f2f2f2;
9361
- --el-disable-color: #8D9095;
9362
- --el-fill-color-light: #262727;
9363
- }
9364
- }
9365
- `;
10218
+ onShowSelectDialogClick() {
10219
+ const defaultCSS = PopsCSS.panelComponents_Select;
9366
10220
  popsDOMUtils.on(this.$el.$container, "click", () => {
9367
10221
  if (this.isDisabled()) {
9368
10222
  return;
9369
10223
  }
9370
10224
  /** 当前已选中的值 */
9371
- const selectInfo = this.$data.selectInfo;
10225
+ const selectInfo = this.$data.selectedDataList;
9372
10226
  const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
9373
10227
  const dialogCloseCallback = () => {
9374
- this.$data.selectInfo = [...selectInfo];
9375
- this.updateSelectTagItem();
10228
+ this.$data.selectedDataList = [...selectInfo];
10229
+ this.updateTagItem();
9376
10230
  this.$el.$selectContainer = null;
9377
10231
  this.$el.$container.removeAttribute(this.$data.rotateKey);
9378
10232
  };
@@ -9383,9 +10237,7 @@ const PanelHandlerComponents = () => {
9383
10237
  position: "center",
9384
10238
  },
9385
10239
  content: {
9386
- text: /*html*/ `
9387
- <ul class="select-container"></ul>
9388
- `,
10240
+ text: /*html*/ `<ul class="select-container"></ul>`,
9389
10241
  html: true,
9390
10242
  },
9391
10243
  btn: {
@@ -9413,7 +10265,7 @@ const PanelHandlerComponents = () => {
9413
10265
  drag: true,
9414
10266
  dragLimit: true,
9415
10267
  width: "300px",
9416
- height: "300px",
10268
+ height: "auto",
9417
10269
  style: /*css*/ `
9418
10270
  ${defaultCSS}
9419
10271
 
@@ -9428,18 +10280,18 @@ const PanelHandlerComponents = () => {
9428
10280
  // 添加到confirm中
9429
10281
  $selectContainer.appendChild($select);
9430
10282
  // 设置每一项的点击事件
9431
- this.setSelectElementClickEvent(selectInfo, $select);
10283
+ this.onSelectItemClick(selectInfo, $select);
9432
10284
  });
9433
10285
  this.$el.$selectContainer = $selectContainer;
9434
10286
  // 动态更新禁用状态
9435
- this.updateSelectItem();
10287
+ this.updateAllSelectItems();
9436
10288
  });
9437
10289
  },
9438
10290
  /**
9439
10291
  * 设置关闭图标的点击事件
9440
10292
  * @param data 选中的信息
9441
10293
  */
9442
- setSelectedItemCloseIconClickEvent(data) {
10294
+ onSelectItemCloseIconClick(data) {
9443
10295
  popsDOMUtils.on(data.$closeIcon, "click", (event) => {
9444
10296
  popsDOMUtils.preventEvent(event);
9445
10297
  if (this.isDisabled()) {
@@ -9466,7 +10318,9 @@ const PanelHandlerComponents = () => {
9466
10318
  });
9467
10319
  },
9468
10320
  /**
9469
- * 检测tag是否为空，为空显示placeholder
10321
+ * 检测tag是否为空
10322
+ *
10323
+ * 如果为空则显示placeholder
9470
10324
  */
9471
10325
  checkTagEmpty() {
9472
10326
  if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
@@ -9491,14 +10345,14 @@ const PanelHandlerComponents = () => {
9491
10345
  * + false 不触发值改变的回调
9492
10346
  */
9493
10347
  removeSelectedInfo(data, triggerValueChangeCallBack = true) {
9494
- for (let index = 0; index < this.$data.selectInfo.length; index++) {
9495
- const selectInfo = this.$data.selectInfo[index];
10348
+ for (let index = 0; index < this.$data.selectedDataList.length; index++) {
10349
+ const selectInfo = this.$data.selectedDataList[index];
9496
10350
  if (selectInfo.value === data.value) {
9497
- this.$data.selectInfo.splice(index, 1);
10351
+ this.$data.selectedDataList.splice(index, 1);
9498
10352
  break;
9499
10353
  }
9500
10354
  }
9501
- triggerValueChangeCallBack && this.selectValueChangeCallBack();
10355
+ triggerValueChangeCallBack && this.onValueChange();
9502
10356
  },
9503
10357
  /** 显示输入框 */
9504
10358
  showInputWrapper() {
@@ -9547,7 +10401,10 @@ const PanelHandlerComponents = () => {
9547
10401
  };
9548
10402
  PopsPanelSelectMultiple.init();
9549
10403
  Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
9550
- return $li;
10404
+ return {
10405
+ $el: $li,
10406
+ handler: PopsPanelSelectMultiple,
10407
+ };
9551
10408
  },
9552
10409
  /**
9553
10410
  * type ==> button
@@ -9588,7 +10445,7 @@ const PanelHandlerComponents = () => {
9588
10445
  init() {
9589
10446
  this.$ele.panelButton.appendChild(this.$ele.button);
9590
10447
  this.initButton();
9591
- this.setClickEvent();
10448
+ this.onButtonClick();
9592
10449
  },
9593
10450
  initButton() {
9594
10451
  if (typeof viewConfig.buttonIcon === "string" && viewConfig.buttonIcon.trim() !== "") {
@@ -9685,7 +10542,10 @@ const PanelHandlerComponents = () => {
9685
10542
  setButtonText(text) {
9686
10543
  PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
9687
10544
  },
9688
- setClickEvent() {
10545
+ /**
10546
+ * 设置按钮的点击事件
10547
+ */
10548
+ onButtonClick() {
9689
10549
  popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
9690
10550
  if (typeof viewConfig.callback === "function") {
9691
10551
  viewConfig.callback(event);
@@ -9695,7 +10555,10 @@ const PanelHandlerComponents = () => {
9695
10555
  };
9696
10556
  PopsPanelButton.init();
9697
10557
  Reflect.set($li, "data-button", PopsPanelButton);
9698
- return $li;
10558
+ return {
10559
+ $el: $li,
10560
+ handler: PopsPanelButton,
10561
+ };
9699
10562
  },
9700
10563
  /**
9701
10564
  * type ==> deepMenu
@@ -9742,7 +10605,7 @@ const PanelHandlerComponents = () => {
9742
10605
  },
9743
10606
  },
9744
10607
  init() {
9745
- this.setLiClickEvent();
10608
+ this.onLiClick();
9746
10609
  },
9747
10610
  /**
9748
10611
  * 生成配置每一项的元素
@@ -9951,7 +10814,7 @@ const PanelHandlerComponents = () => {
9951
10814
  that.triggerRenderRightContainer($deepMenuSection);
9952
10815
  },
9953
10816
  /** 设置项的点击事件 */
9954
- setLiClickEvent() {
10817
+ onLiClick() {
9955
10818
  popsDOMUtils.on($li, "click", void 0, async (event) => {
9956
10819
  if (typeof viewConfig.clickCallBack === "function") {
9957
10820
  const result = await viewConfig.clickCallBack(event, viewConfig);
@@ -9965,7 +10828,10 @@ const PanelHandlerComponents = () => {
9965
10828
  };
9966
10829
  PopsPanelDeepMenu.init();
9967
10830
  Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
9968
- return $li;
10831
+ return {
10832
+ $el: $li,
10833
+ handler: PopsPanelDeepMenu,
10834
+ };
9969
10835
  },
9970
10836
  /**
9971
10837
  * type ===> own
@@ -9978,8 +10844,10 @@ const PanelHandlerComponents = () => {
9978
10844
  this.setElementClassName($li, viewConfig.className);
9979
10845
  this.setElementAttributes($li, viewConfig.attributes);
9980
10846
  this.setElementProps($li, viewConfig.props);
9981
- $li = viewConfig.getLiElementCallBack($li);
9982
- return $li;
10847
+ $li = viewConfig.createLIElement($li);
10848
+ return {
10849
+ $el: $li,
10850
+ };
9983
10851
  },
9984
10852
  /**
9985
10853
  * 获取中间容器的元素<li>
@@ -10118,14 +10986,14 @@ const PanelHandlerComponents = () => {
10118
10986
  * @param containerOptions
10119
10987
  */
10120
10988
  uListContainerAddItem(viewConfig, containerOptions) {
10121
- const itemLiElement = this.createSectionContainerItem(viewConfig);
10122
- if (itemLiElement) {
10123
- containerOptions["ulElement"].appendChild(itemLiElement);
10989
+ const itemInfo = this.createSectionContainerItem(viewConfig);
10990
+ if (itemInfo) {
10991
+ containerOptions["ulElement"].appendChild(itemInfo.$el);
10124
10992
  }
10125
10993
  if (typeof viewConfig.afterAddToUListCallBack === "function") {
10126
10994
  viewConfig.afterAddToUListCallBack(viewConfig, {
10127
10995
  ...containerOptions,
10128
- target: itemLiElement,
10996
+ target: itemInfo?.$el,
10129
10997
  });
10130
10998
  }
10131
10999
  },
@@ -10134,7 +11002,7 @@ const PanelHandlerComponents = () => {
10134
11002
  * @param $asideItem 左侧的容器<li>元素
10135
11003
  * @param asideConfig 配置
10136
11004
  */
10137
- setAsideItemClickEvent($asideItem, asideConfig) {
11005
+ onAsideItemClick($asideItem, asideConfig) {
10138
11006
  popsDOMUtils.on($asideItem, "click", async (event) => {
10139
11007
  if (typeof asideConfig.clickFirstCallback === "function") {
10140
11008
  const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
@@ -11317,6 +12185,13 @@ const PopsSearchSuggestion = {
11317
12185
  });
11318
12186
  $shadowRoot.appendChild($css);
11319
12187
  }
12188
+ /**
12189
+ * 监听器的默认配置
12190
+ */
12191
+ const defaultListenerOption = {
12192
+ capture: true,
12193
+ passive: true,
12194
+ };
11320
12195
  const SearchSuggestion = {
11321
12196
  /**
11322
12197
  * 当前的环境，可以是document，可以是shadowroot，默认是document
@@ -11668,29 +12543,16 @@ const PopsSearchSuggestion = {
11668
12543
  },
11669
12544
  /**
11670
12545
  * 设置搜索建议框每一项的选中事件
11671
- * @param liElement
12546
+ * @param $li 每一项元素
11672
12547
  */
11673
12548
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
11674
- setSearchItemSelectEvent(liElement) {
11675
- // popsDOMUtils.on(
11676
- // liElement,
11677
- // "keyup",
11678
- // void 0,
11679
- // (event) => {
11680
- // let value = liElement["data-value"];
11681
- // config.selectCallBack(event, liElement, value);
11682
- // },
11683
- // {
11684
- // capture: true,
11685
- // }
11686
- // );
12549
+ setSearchItemSelectEvent($li) {
12550
+ // TODO
11687
12551
  },
11688
12552
  /**
11689
12553
  * 监听输入框内容改变
11690
12554
  */
11691
- setInputChangeEvent(option = {
11692
- capture: true,
11693
- }) {
12555
+ setInputChangeEvent(option = defaultListenerOption) {
11694
12556
  // 必须是input或者textarea才有input事件
11695
12557
  if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
11696
12558
  return;
@@ -11699,9 +12561,7 @@ const PopsSearchSuggestion = {
11699
12561
  // 禁用输入框自动提示
11700
12562
  config.$inputTarget.setAttribute("autocomplete", "off");
11701
12563
  // 内容改变事件
11702
- const listenerHandler = popsDOMUtils.onInput(config.$inputTarget,
11703
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11704
- async (_event) => {
12564
+ const listenerHandler = popsDOMUtils.onInput(config.$inputTarget, async () => {
11705
12565
  const data = SearchSuggestion.getData();
11706
12566
  const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.$inputTarget.value, data, config);
11707
12567
  SearchSuggestion.update(queryDataResult);
@@ -11712,11 +12572,7 @@ const PopsSearchSuggestion = {
11712
12572
  /**
11713
12573
  * 移除输入框内容改变的监听
11714
12574
  */
11715
- removeInputChangeEvent(
11716
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11717
- option = {
11718
- capture: true,
11719
- }) {
12575
+ removeInputChangeEvent() {
11720
12576
  for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
11721
12577
  const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
11722
12578
  handler();
@@ -11744,10 +12600,7 @@ const PopsSearchSuggestion = {
11744
12600
  /**
11745
12601
  * 设置显示搜索建议框的事件
11746
12602
  */
11747
- setShowEvent(option = {
11748
- capture: true,
11749
- passive: true,
11750
- }) {
12603
+ setShowEvent(option = defaultListenerOption) {
11751
12604
  /* 焦点|点击事件*/
11752
12605
  if (config.followPosition === "target") {
11753
12606
  popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
@@ -11765,10 +12618,7 @@ const PopsSearchSuggestion = {
11765
12618
  /**
11766
12619
  * 移除显示搜索建议框的事件
11767
12620
  */
11768
- removeShowEvent(option = {
11769
- capture: true,
11770
- passive: true,
11771
- }) {
12621
+ removeShowEvent(option = defaultListenerOption) {
11772
12622
  /* 焦点|点击事件*/
11773
12623
  popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
11774
12624
  // 内容改变事件
@@ -11798,10 +12648,7 @@ const PopsSearchSuggestion = {
11798
12648
  /**
11799
12649
  * 设置隐藏搜索建议框的事件
11800
12650
  */
11801
- setHideEvent(option = {
11802
- capture: true,
11803
- passive: true,
11804
- }) {
12651
+ setHideEvent(option = defaultListenerOption) {
11805
12652
  // 全局点击事件
11806
12653
  // 全局触摸屏点击事件
11807
12654
  if (Array.isArray(SearchSuggestion.selfDocument)) {
@@ -11816,10 +12663,7 @@ const PopsSearchSuggestion = {
11816
12663
  /**
11817
12664
  * 移除隐藏搜索建议框的事件
11818
12665
  */
11819
- removeHideEvent(option = {
11820
- capture: true,
11821
- passive: true,
11822
- }) {
12666
+ removeHideEvent(option = defaultListenerOption) {
11823
12667
  if (Array.isArray(SearchSuggestion.selfDocument)) {
11824
12668
  SearchSuggestion.selfDocument.forEach(($checkParent) => {
11825
12669
  popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
@@ -11832,10 +12676,7 @@ const PopsSearchSuggestion = {
11832
12676
  /**
11833
12677
  * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
11834
12678
  */
11835
- setAllEvent(option = {
11836
- capture: true,
11837
- passive: true,
11838
- }) {
12679
+ setAllEvent(option = defaultListenerOption) {
11839
12680
  SearchSuggestion.setInputChangeEvent(option);
11840
12681
  SearchSuggestion.setHideEvent(option);
11841
12682
  SearchSuggestion.setShowEvent(option);
@@ -11843,11 +12684,8 @@ const PopsSearchSuggestion = {
11843
12684
  /**
11844
12685
  * 移除所有监听
11845
12686
  */
11846
- removeAllEvent(option = {
11847
- capture: true,
11848
- passive: true,
11849
- }) {
11850
- SearchSuggestion.removeInputChangeEvent(option);
12687
+ removeAllEvent(option = defaultListenerOption) {
12688
+ SearchSuggestion.removeInputChangeEvent();
11851
12689
  SearchSuggestion.removeHideEvent(option);
11852
12690
  SearchSuggestion.removeShowEvent(option);
11853
12691
  },