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