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