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