@whitesev/pops 2.1.2 → 2.1.4
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.
- package/dist/index.amd.js +183 -165
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +183 -165
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +183 -165
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +183 -165
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +183 -165
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +183 -165
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +24 -7
- package/dist/types/src/components/panel/PanelHandleContentDetails.d.ts +23 -15
- package/dist/types/src/components/panel/index.d.ts +16 -2
- package/dist/types/src/components/panel/indexType.d.ts +14 -0
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/dist/types/src/types/button.d.ts +3 -2
- package/dist/types/src/types/event.d.ts +3 -2
- package/dist/types/src/types/global.d.ts +4 -4
- package/dist/types/src/types/main.d.ts +8 -0
- package/dist/types/src/types/mask.d.ts +8 -0
- package/package.json +9 -10
- package/src/Pops.ts +1 -1
- package/src/components/folder/index.css +1 -1
- package/src/components/panel/PanelHandleContentDetails.ts +270 -244
- package/src/components/panel/index.ts +20 -2
- package/src/components/panel/indexType.ts +16 -0
- package/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/src/types/button.d.ts +3 -2
- package/src/types/event.d.ts +3 -2
- package/src/types/global.d.ts +4 -4
- package/src/types/main.d.ts +8 -0
- package/src/types/mask.d.ts +8 -0
- package/src/utils/PopsUtils.ts +1 -4
package/dist/index.amd.js
CHANGED
|
@@ -329,8 +329,7 @@ define((function () { 'use strict';
|
|
|
329
329
|
if (target === PopsCore.self) {
|
|
330
330
|
return true;
|
|
331
331
|
}
|
|
332
|
-
if (typeof unsafeWindow !== "undefined" &&
|
|
333
|
-
target === unsafeWindow) {
|
|
332
|
+
if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
|
|
334
333
|
return true;
|
|
335
334
|
}
|
|
336
335
|
if (target?.Math?.toString() !== "[object Math]") {
|
|
@@ -2267,7 +2266,7 @@ define((function () { 'use strict';
|
|
|
2267
2266
|
|
|
2268
2267
|
var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
|
|
2269
2268
|
|
|
2270
|
-
var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: #05082c;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n\tflex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: rgb(129, 137, 153);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tflex:
|
|
2269
|
+
var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: #05082c;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n\tflex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: rgb(129, 137, 153);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tflex: 1;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\tmin-height: 17px;\r\n\tflex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n\tdisplay: inline-flex;\r\n\tmargin-left: 4px;\r\n\tflex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tfill: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n\tpadding: 4px 20px;\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-box-pack: start;\r\n\t-webkit-justify-content: start;\r\n\t-ms-flex-pack: start;\r\n\tjustify-content: flex-start;\r\n\tmin-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tfont-weight: 700;\r\n\tdisplay: inline-block;\r\n\tmax-width: 140px;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tword-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n\tcolor: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: rgb(18, 22, 26);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n\tbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n\t\t55% 50%/6px 9px no-repeat;\r\n}\r\n";
|
|
2271
2270
|
|
|
2272
2271
|
var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333;\r\n\t--title-bg-color: #ffffff;\r\n\t--aside-bg-color: #ffffff;\r\n\t--aside-hover-color: rgb(64, 158, 255);\r\n\t--aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: 20px;\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\r\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tbackground: var(--title-bg-color);\r\n}\r\n\r\n.pops[type-value=\"panel\"] .pops-panel-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\toverflow: auto;\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--aside-bg-color);\r\n\tborder-right: 1px solid var(--aside-bg-color);\r\n\tfont-size: 0.9em;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-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\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n\ttext-align: left;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n\toverflow: auto;\r\n\tflex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:hover {\r\n\tcolor: var(--aside-hover-color);\r\n\tbackground: var(--aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\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 rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: left;\r\n}\r\nsection.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)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n\tborder: 0;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\nsection.pops-panel-container .pops-panel-item-left-main-text {\r\n\t/*line-height: 2;*/\r\n}\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 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\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tcolor: rgb(220, 223, 230);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: rgb(64, 158, 255);\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\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-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\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-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\tcursor: 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\ttransform: 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\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-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\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid #dcdfe6;\r\n\tborder-radius: 4px;\r\n\tbackground-color: #ffffff;\r\n\tposition: relative;\r\n}\r\n.pops-panel-input:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid #409eff;\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbackground-color: transparent;\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: #a8abb2;\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: 0 0 0 1px #dcdfe6 inset;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: none;\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tbox-shadow: 0 0 0 1px #409eff inset;\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tbackground: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n\t/* 左侧内容*/\r\n\t/* 左侧内容*/\r\n\t/* 右侧箭头图标*/\r\n\t/* 右侧箭头图标*/\r\n\t/* tag*/\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: 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\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: 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\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n\tdisplay: flex;\r\n\talign-items: baseline;\r\n}\r\n";
|
|
2273
2272
|
|
|
@@ -7077,6 +7076,8 @@ define((function () { 'use strict';
|
|
|
7077
7076
|
* 元素
|
|
7078
7077
|
*/
|
|
7079
7078
|
$el: {
|
|
7079
|
+
/** pops主元素 */
|
|
7080
|
+
$pops: null,
|
|
7080
7081
|
/** 内容 */
|
|
7081
7082
|
$content: null,
|
|
7082
7083
|
/** 左侧容器 */
|
|
@@ -7089,8 +7090,6 @@ define((function () { 'use strict';
|
|
|
7089
7090
|
* @param details
|
|
7090
7091
|
*/
|
|
7091
7092
|
init(details) {
|
|
7092
|
-
// @ts-ignore
|
|
7093
|
-
this.$el = null;
|
|
7094
7093
|
this.$el = {
|
|
7095
7094
|
...details.$el,
|
|
7096
7095
|
};
|
|
@@ -7153,11 +7152,12 @@ define((function () { 'use strict';
|
|
|
7153
7152
|
* 清空container容器的元素
|
|
7154
7153
|
*/
|
|
7155
7154
|
clearContainer() {
|
|
7155
|
+
Reflect.deleteProperty(this.$el.$contentSectionContainer, "__formConfig__");
|
|
7156
7156
|
PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
|
|
7157
7157
|
PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
|
|
7158
7158
|
this.$el.$content
|
|
7159
7159
|
?.querySelectorAll("section.pops-panel-deepMenu-container")
|
|
7160
|
-
.forEach((
|
|
7160
|
+
.forEach(($el) => $el.remove());
|
|
7161
7161
|
},
|
|
7162
7162
|
/**
|
|
7163
7163
|
* 清空左侧容器已访问记录
|
|
@@ -7165,8 +7165,8 @@ define((function () { 'use strict';
|
|
|
7165
7165
|
clearAsideItemIsVisited() {
|
|
7166
7166
|
this.$el.$contentAside
|
|
7167
7167
|
.querySelectorAll(".pops-is-visited")
|
|
7168
|
-
.forEach((
|
|
7169
|
-
popsDOMUtils.removeClassName(
|
|
7168
|
+
.forEach(($el) => {
|
|
7169
|
+
popsDOMUtils.removeClassName($el, "pops-is-visited");
|
|
7170
7170
|
});
|
|
7171
7171
|
},
|
|
7172
7172
|
/**
|
|
@@ -7243,34 +7243,33 @@ define((function () { 'use strict';
|
|
|
7243
7243
|
* @param asideConfig
|
|
7244
7244
|
*/
|
|
7245
7245
|
createAsideItem(asideConfig) {
|
|
7246
|
-
let
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7250
|
-
PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
|
|
7246
|
+
let $li = document.createElement("li");
|
|
7247
|
+
$li.id = asideConfig.id;
|
|
7248
|
+
Reflect.set($li, "__forms__", asideConfig.forms);
|
|
7249
|
+
PopsSafeUtils.setSafeHTML($li, asideConfig.title);
|
|
7251
7250
|
/* 处理className */
|
|
7252
|
-
this.setElementClassName(
|
|
7253
|
-
this.setElementAttributes(
|
|
7254
|
-
this.setElementProps(
|
|
7255
|
-
return
|
|
7251
|
+
this.setElementClassName($li, asideConfig.className);
|
|
7252
|
+
this.setElementAttributes($li, asideConfig.attributes);
|
|
7253
|
+
this.setElementProps($li, asideConfig.props);
|
|
7254
|
+
return $li;
|
|
7256
7255
|
},
|
|
7257
7256
|
/**
|
|
7258
|
-
* 创建中间容器的元素<li>
|
|
7259
7257
|
* type ==> switch
|
|
7258
|
+
* 创建中间容器的元素<li>
|
|
7260
7259
|
* @param formConfig
|
|
7261
7260
|
*/
|
|
7262
7261
|
createSectionContainerItem_switch(formConfig) {
|
|
7263
|
-
let
|
|
7264
|
-
|
|
7265
|
-
this.setElementClassName(
|
|
7266
|
-
this.setElementAttributes(
|
|
7267
|
-
this.setElementProps(
|
|
7262
|
+
let $li = document.createElement("li");
|
|
7263
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7264
|
+
this.setElementClassName($li, formConfig.className);
|
|
7265
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7266
|
+
this.setElementProps($li, formConfig.props);
|
|
7268
7267
|
/* 左边底部的描述的文字 */
|
|
7269
7268
|
let leftDescriptionText = "";
|
|
7270
7269
|
if (Boolean(formConfig.description)) {
|
|
7271
7270
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7272
7271
|
}
|
|
7273
|
-
PopsSafeUtils.setSafeHTML(
|
|
7272
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7274
7273
|
/*html*/ `
|
|
7275
7274
|
<div class="pops-panel-item-left-text">
|
|
7276
7275
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7287,9 +7286,9 @@ define((function () { 'use strict';
|
|
|
7287
7286
|
value: Boolean(formConfig.getValue()),
|
|
7288
7287
|
},
|
|
7289
7288
|
$ele: {
|
|
7290
|
-
switch:
|
|
7291
|
-
input:
|
|
7292
|
-
core:
|
|
7289
|
+
switch: $li.querySelector(".pops-panel-switch"),
|
|
7290
|
+
input: $li.querySelector(".pops-panel-switch__input"),
|
|
7291
|
+
core: $li.querySelector(".pops-panel-switch__core"),
|
|
7293
7292
|
},
|
|
7294
7293
|
init() {
|
|
7295
7294
|
this.setStatus(this.$data.value);
|
|
@@ -7351,26 +7350,26 @@ define((function () { 'use strict';
|
|
|
7351
7350
|
},
|
|
7352
7351
|
};
|
|
7353
7352
|
PopsPanelSwitch.init();
|
|
7354
|
-
|
|
7355
|
-
return
|
|
7353
|
+
Reflect.set($li, "data-switch", PopsPanelSwitch);
|
|
7354
|
+
return $li;
|
|
7356
7355
|
},
|
|
7357
7356
|
/**
|
|
7358
|
-
* 获取中间容器的元素<li>
|
|
7359
7357
|
* type ==> slider
|
|
7358
|
+
* 获取中间容器的元素<li>
|
|
7360
7359
|
* @param formConfig
|
|
7361
7360
|
*/
|
|
7362
7361
|
createSectionContainerItem_slider(formConfig) {
|
|
7363
|
-
let
|
|
7364
|
-
|
|
7365
|
-
this.setElementClassName(
|
|
7366
|
-
this.setElementAttributes(
|
|
7367
|
-
this.setElementProps(
|
|
7362
|
+
let $li = document.createElement("li");
|
|
7363
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7364
|
+
this.setElementClassName($li, formConfig.className);
|
|
7365
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7366
|
+
this.setElementProps($li, formConfig.props);
|
|
7368
7367
|
/* 左边底部的描述的文字 */
|
|
7369
7368
|
let leftDescriptionText = "";
|
|
7370
7369
|
if (Boolean(formConfig.description)) {
|
|
7371
7370
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7372
7371
|
}
|
|
7373
|
-
PopsSafeUtils.setSafeHTML(
|
|
7372
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7374
7373
|
/*html*/ `
|
|
7375
7374
|
<div class="pops-panel-item-left-text">
|
|
7376
7375
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7378,11 +7377,11 @@ define((function () { 'use strict';
|
|
|
7378
7377
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
7379
7378
|
</div>
|
|
7380
7379
|
`);
|
|
7381
|
-
let
|
|
7380
|
+
let $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
|
|
7382
7381
|
if (formConfig.step) {
|
|
7383
|
-
|
|
7382
|
+
$rangeInput.setAttribute("step", formConfig.step.toString());
|
|
7384
7383
|
}
|
|
7385
|
-
|
|
7384
|
+
$rangeInput.value = formConfig.getValue().toString();
|
|
7386
7385
|
/**
|
|
7387
7386
|
* 获取提示的内容
|
|
7388
7387
|
* @param value
|
|
@@ -7396,9 +7395,9 @@ define((function () { 'use strict';
|
|
|
7396
7395
|
}
|
|
7397
7396
|
};
|
|
7398
7397
|
let tooltip = PopsTooltip.init({
|
|
7399
|
-
target:
|
|
7398
|
+
target: $rangeInput.parentElement,
|
|
7400
7399
|
content: () => {
|
|
7401
|
-
return getToolTipContent(
|
|
7400
|
+
return getToolTipContent($rangeInput.value);
|
|
7402
7401
|
},
|
|
7403
7402
|
zIndex: () => {
|
|
7404
7403
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
@@ -7409,32 +7408,31 @@ define((function () { 'use strict';
|
|
|
7409
7408
|
position: "top",
|
|
7410
7409
|
arrowDistance: 10,
|
|
7411
7410
|
});
|
|
7412
|
-
popsDOMUtils.on(
|
|
7413
|
-
tooltip.toolTip.changeContent(getToolTipContent(
|
|
7411
|
+
popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
|
|
7412
|
+
tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
|
|
7414
7413
|
if (typeof formConfig.callback === "function") {
|
|
7415
|
-
formConfig.callback(event,
|
|
7414
|
+
formConfig.callback(event, $rangeInput.valueAsNumber);
|
|
7416
7415
|
}
|
|
7417
7416
|
});
|
|
7418
|
-
return
|
|
7417
|
+
return $li;
|
|
7419
7418
|
},
|
|
7420
7419
|
/**
|
|
7421
|
-
* 获取中间容器的元素<li>
|
|
7422
7420
|
* type ==> slider
|
|
7421
|
+
* 获取中间容器的元素<li>
|
|
7423
7422
|
* @param formConfig
|
|
7424
7423
|
*/
|
|
7425
7424
|
createSectionContainerItem_slider_new(formConfig) {
|
|
7426
|
-
let
|
|
7427
|
-
|
|
7428
|
-
|
|
7429
|
-
this.
|
|
7430
|
-
this.
|
|
7431
|
-
this.setElementProps(liElement, formConfig.props);
|
|
7425
|
+
let $li = document.createElement("li");
|
|
7426
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7427
|
+
this.setElementClassName($li, formConfig.className);
|
|
7428
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7429
|
+
this.setElementProps($li, formConfig.props);
|
|
7432
7430
|
/* 左边底部的描述的文字 */
|
|
7433
7431
|
let leftDescriptionText = "";
|
|
7434
7432
|
if (Boolean(formConfig.description)) {
|
|
7435
7433
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7436
7434
|
}
|
|
7437
|
-
PopsSafeUtils.setSafeHTML(
|
|
7435
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7438
7436
|
/*html*/ `
|
|
7439
7437
|
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
7440
7438
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7509,11 +7507,11 @@ define((function () { 'use strict';
|
|
|
7509
7507
|
tooltip: null,
|
|
7510
7508
|
},
|
|
7511
7509
|
$ele: {
|
|
7512
|
-
slider:
|
|
7513
|
-
runAway:
|
|
7514
|
-
bar:
|
|
7515
|
-
buttonWrapper:
|
|
7516
|
-
button:
|
|
7510
|
+
slider: $li.querySelector(".pops-slider"),
|
|
7511
|
+
runAway: $li.querySelector(".pops-slider__runway"),
|
|
7512
|
+
bar: $li.querySelector(".pops-slider__bar"),
|
|
7513
|
+
buttonWrapper: $li.querySelector(".pops-slider__button-wrapper"),
|
|
7514
|
+
button: $li.querySelector(".pops-slider__button"),
|
|
7517
7515
|
},
|
|
7518
7516
|
$interval: {
|
|
7519
7517
|
isCheck: false,
|
|
@@ -7579,14 +7577,10 @@ define((function () { 'use strict';
|
|
|
7579
7577
|
this.$ele.slider.setAttribute("data-max", this.max.toString());
|
|
7580
7578
|
this.$ele.slider.setAttribute("data-value", this.value.toString());
|
|
7581
7579
|
this.$ele.slider.setAttribute("data-step", this.step.toString());
|
|
7582
|
-
|
|
7583
|
-
this.$ele.slider
|
|
7584
|
-
|
|
7585
|
-
this.$ele.slider
|
|
7586
|
-
// @ts-ignore
|
|
7587
|
-
this.$ele.slider["data-value"] = this.value;
|
|
7588
|
-
// @ts-ignore
|
|
7589
|
-
this.$ele.slider["data-step"] = this.step;
|
|
7580
|
+
Reflect.set(this.$ele.slider, "data-min", this.min);
|
|
7581
|
+
Reflect.set(this.$ele.slider, "data-max", this.max);
|
|
7582
|
+
Reflect.set(this.$ele.slider, "data-value", this.value);
|
|
7583
|
+
Reflect.set(this.$ele.slider, "data-step", this.step);
|
|
7590
7584
|
},
|
|
7591
7585
|
/**
|
|
7592
7586
|
* 初始化滑块的总长度的数据(px)
|
|
@@ -7606,7 +7600,7 @@ define((function () { 'use strict';
|
|
|
7606
7600
|
let widthPx = 0;
|
|
7607
7601
|
for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
|
|
7608
7602
|
let value = this.formatValue(stepValue);
|
|
7609
|
-
let info
|
|
7603
|
+
let info;
|
|
7610
7604
|
if (value === this.min) {
|
|
7611
7605
|
/* 起始 */
|
|
7612
7606
|
info = {
|
|
@@ -7649,7 +7643,7 @@ define((function () { 'use strict';
|
|
|
7649
7643
|
let widthPx = 0;
|
|
7650
7644
|
for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
|
|
7651
7645
|
let value = this.formatValue(stepValue);
|
|
7652
|
-
let info
|
|
7646
|
+
let info;
|
|
7653
7647
|
if (value === this.min) {
|
|
7654
7648
|
/* 起始 */
|
|
7655
7649
|
info = {
|
|
@@ -7807,7 +7801,7 @@ define((function () { 'use strict';
|
|
|
7807
7801
|
event.target !== this.$ele.bar) {
|
|
7808
7802
|
return;
|
|
7809
7803
|
}
|
|
7810
|
-
let clickX = parseFloat(event.offsetX);
|
|
7804
|
+
let clickX = parseFloat(event.offsetX.toString());
|
|
7811
7805
|
this.dragStartCallBack();
|
|
7812
7806
|
this.dragMoveCallBack(event, clickX, this.value);
|
|
7813
7807
|
this.dragEndCallBack(clickX);
|
|
@@ -7960,7 +7954,7 @@ define((function () { 'use strict';
|
|
|
7960
7954
|
return formConfig.getToolTipContent(PopsPanelSlider.value);
|
|
7961
7955
|
}
|
|
7962
7956
|
else {
|
|
7963
|
-
return PopsPanelSlider.value;
|
|
7957
|
+
return PopsPanelSlider.value.toString();
|
|
7964
7958
|
}
|
|
7965
7959
|
}
|
|
7966
7960
|
let tooltip = PopsTooltip.init({
|
|
@@ -8004,20 +7998,20 @@ define((function () { 'use strict';
|
|
|
8004
7998
|
},
|
|
8005
7999
|
};
|
|
8006
8000
|
PopsPanelSlider.init();
|
|
8007
|
-
|
|
8008
|
-
return
|
|
8001
|
+
Reflect.set($li, "data-slider", PopsPanelSlider);
|
|
8002
|
+
return $li;
|
|
8009
8003
|
},
|
|
8010
8004
|
/**
|
|
8011
|
-
* 获取中间容器的元素<li>
|
|
8012
8005
|
* type ==> input
|
|
8006
|
+
* 获取中间容器的元素<li>
|
|
8013
8007
|
* @param formConfig
|
|
8014
8008
|
*/
|
|
8015
8009
|
createSectionContainerItem_input(formConfig) {
|
|
8016
|
-
let
|
|
8017
|
-
|
|
8018
|
-
this.setElementClassName(
|
|
8019
|
-
this.setElementAttributes(
|
|
8020
|
-
this.setElementProps(
|
|
8010
|
+
let $li = document.createElement("li");
|
|
8011
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8012
|
+
this.setElementClassName($li, formConfig.className);
|
|
8013
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8014
|
+
this.setElementProps($li, formConfig.props);
|
|
8021
8015
|
let inputType = "text";
|
|
8022
8016
|
if (formConfig.isPassword) {
|
|
8023
8017
|
inputType = "password";
|
|
@@ -8030,7 +8024,7 @@ define((function () { 'use strict';
|
|
|
8030
8024
|
if (Boolean(formConfig.description)) {
|
|
8031
8025
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8032
8026
|
}
|
|
8033
|
-
PopsSafeUtils.setSafeHTML(
|
|
8027
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8034
8028
|
/*html*/ `
|
|
8035
8029
|
<div class="pops-panel-item-left-text">
|
|
8036
8030
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8041,8 +8035,8 @@ define((function () { 'use strict';
|
|
|
8041
8035
|
const PopsPanelInput = {
|
|
8042
8036
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
8043
8037
|
$ele: {
|
|
8044
|
-
panelInput:
|
|
8045
|
-
input:
|
|
8038
|
+
panelInput: $li.querySelector(".pops-panel-input"),
|
|
8039
|
+
input: $li.querySelector("input"),
|
|
8046
8040
|
inputSpanIcon: document.createElement("span"),
|
|
8047
8041
|
inputSpanIconInner: null,
|
|
8048
8042
|
icon: null,
|
|
@@ -8071,7 +8065,7 @@ define((function () { 'use strict';
|
|
|
8071
8065
|
this.disable();
|
|
8072
8066
|
}
|
|
8073
8067
|
if (typeof formConfig.handlerCallBack === "function") {
|
|
8074
|
-
formConfig.handlerCallBack(
|
|
8068
|
+
formConfig.handlerCallBack($li, this.$ele.input);
|
|
8075
8069
|
}
|
|
8076
8070
|
},
|
|
8077
8071
|
/**
|
|
@@ -8206,26 +8200,26 @@ define((function () { 'use strict';
|
|
|
8206
8200
|
},
|
|
8207
8201
|
};
|
|
8208
8202
|
PopsPanelInput.init();
|
|
8209
|
-
|
|
8210
|
-
return
|
|
8203
|
+
Reflect.set($li, "data-input", PopsPanelInput);
|
|
8204
|
+
return $li;
|
|
8211
8205
|
},
|
|
8212
8206
|
/**
|
|
8213
|
-
* 获取中间容器的元素<li>
|
|
8214
8207
|
* type ==> textarea
|
|
8208
|
+
* 获取中间容器的元素<li>
|
|
8215
8209
|
* @param formConfig
|
|
8216
8210
|
*/
|
|
8217
8211
|
createSectionContainerItem_textarea(formConfig) {
|
|
8218
|
-
let
|
|
8219
|
-
|
|
8220
|
-
this.setElementClassName(
|
|
8221
|
-
this.setElementAttributes(
|
|
8222
|
-
this.setElementProps(
|
|
8212
|
+
let $li = document.createElement("li");
|
|
8213
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8214
|
+
this.setElementClassName($li, formConfig.className);
|
|
8215
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8216
|
+
this.setElementProps($li, formConfig.props);
|
|
8223
8217
|
/* 左边底部的描述的文字 */
|
|
8224
8218
|
let leftDescriptionText = "";
|
|
8225
8219
|
if (Boolean(formConfig.description)) {
|
|
8226
8220
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8227
8221
|
}
|
|
8228
|
-
PopsSafeUtils.setSafeHTML(
|
|
8222
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8229
8223
|
/*html*/ `
|
|
8230
8224
|
<div class="pops-panel-item-left-text">
|
|
8231
8225
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8236,8 +8230,8 @@ define((function () { 'use strict';
|
|
|
8236
8230
|
const PopsPanelTextArea = {
|
|
8237
8231
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
8238
8232
|
$ele: {
|
|
8239
|
-
panelTextarea:
|
|
8240
|
-
textarea:
|
|
8233
|
+
panelTextarea: $li.querySelector(".pops-panel-textarea"),
|
|
8234
|
+
textarea: $li.querySelector(".pops-panel-textarea textarea"),
|
|
8241
8235
|
},
|
|
8242
8236
|
$data: {
|
|
8243
8237
|
value: formConfig.getValue(),
|
|
@@ -8269,35 +8263,36 @@ define((function () { 'use strict';
|
|
|
8269
8263
|
*/
|
|
8270
8264
|
setChangeEvent() {
|
|
8271
8265
|
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
|
|
8272
|
-
|
|
8266
|
+
let value = this.$ele.textarea.value;
|
|
8267
|
+
this.$data.value = value;
|
|
8273
8268
|
if (typeof formConfig.callback === "function") {
|
|
8274
|
-
formConfig.callback(event,
|
|
8269
|
+
formConfig.callback(event, value);
|
|
8275
8270
|
}
|
|
8276
8271
|
});
|
|
8277
8272
|
},
|
|
8278
8273
|
};
|
|
8279
8274
|
PopsPanelTextArea.init();
|
|
8280
|
-
|
|
8281
|
-
return
|
|
8275
|
+
Reflect.set($li, "data-textarea", PopsPanelTextArea);
|
|
8276
|
+
return $li;
|
|
8282
8277
|
},
|
|
8283
8278
|
/**
|
|
8284
|
-
* 获取中间容器的元素<li>
|
|
8285
8279
|
* type ==> select
|
|
8280
|
+
* 获取中间容器的元素<li>
|
|
8286
8281
|
* @param formConfig
|
|
8287
8282
|
*/
|
|
8288
8283
|
createSectionContainerItem_select(formConfig) {
|
|
8289
8284
|
const that = this;
|
|
8290
|
-
let
|
|
8291
|
-
|
|
8292
|
-
this.setElementClassName(
|
|
8293
|
-
this.setElementAttributes(
|
|
8294
|
-
this.setElementProps(
|
|
8285
|
+
let $li = document.createElement("li");
|
|
8286
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8287
|
+
this.setElementClassName($li, formConfig.className);
|
|
8288
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8289
|
+
this.setElementProps($li, formConfig.props);
|
|
8295
8290
|
/* 左边底部的描述的文字 */
|
|
8296
8291
|
let leftDescriptionText = "";
|
|
8297
8292
|
if (Boolean(formConfig.description)) {
|
|
8298
8293
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8299
8294
|
}
|
|
8300
|
-
PopsSafeUtils.setSafeHTML(
|
|
8295
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8301
8296
|
/*html*/ `
|
|
8302
8297
|
<div class="pops-panel-item-left-text">
|
|
8303
8298
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8308,8 +8303,8 @@ define((function () { 'use strict';
|
|
|
8308
8303
|
const PopsPanelSelect = {
|
|
8309
8304
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
8310
8305
|
$ele: {
|
|
8311
|
-
panelSelect:
|
|
8312
|
-
select:
|
|
8306
|
+
panelSelect: $li.querySelector(".pops-panel-select"),
|
|
8307
|
+
select: $li.querySelector(".pops-panel-select select"),
|
|
8313
8308
|
},
|
|
8314
8309
|
$eleKey: {
|
|
8315
8310
|
disable: "__disable__",
|
|
@@ -8429,7 +8424,7 @@ define((function () { 'use strict';
|
|
|
8429
8424
|
*/
|
|
8430
8425
|
setChangeEvent() {
|
|
8431
8426
|
popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
|
|
8432
|
-
let $isSelectedElement =
|
|
8427
|
+
let $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
|
|
8433
8428
|
let selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
8434
8429
|
this.setSelectOptionsDisableStatus();
|
|
8435
8430
|
if (typeof formConfig.callback === "function") {
|
|
@@ -8442,9 +8437,9 @@ define((function () { 'use strict';
|
|
|
8442
8437
|
/* 如果成功创建,加入到中间容器中 */
|
|
8443
8438
|
let childUListClassName = "pops-panel-select-child-forms";
|
|
8444
8439
|
// 移除旧的元素
|
|
8445
|
-
while (
|
|
8446
|
-
if (
|
|
8447
|
-
|
|
8440
|
+
while ($li.nextElementSibling) {
|
|
8441
|
+
if ($li.nextElementSibling.classList.contains(childUListClassName)) {
|
|
8442
|
+
$li.nextElementSibling.remove();
|
|
8448
8443
|
}
|
|
8449
8444
|
else {
|
|
8450
8445
|
break;
|
|
@@ -8452,7 +8447,7 @@ define((function () { 'use strict';
|
|
|
8452
8447
|
}
|
|
8453
8448
|
let $childUList = document.createElement("ul");
|
|
8454
8449
|
$childUList.className = childUListClassName;
|
|
8455
|
-
popsDOMUtils.after(
|
|
8450
|
+
popsDOMUtils.after($li, $childUList);
|
|
8456
8451
|
that.uListContainerAddItem(formConfig, {
|
|
8457
8452
|
ulElement: $childUList,
|
|
8458
8453
|
});
|
|
@@ -8472,26 +8467,26 @@ define((function () { 'use strict';
|
|
|
8472
8467
|
},
|
|
8473
8468
|
};
|
|
8474
8469
|
PopsPanelSelect.init();
|
|
8475
|
-
Reflect.set(
|
|
8476
|
-
return
|
|
8470
|
+
Reflect.set($li, "data-select", PopsPanelSelect);
|
|
8471
|
+
return $li;
|
|
8477
8472
|
},
|
|
8478
8473
|
/**
|
|
8479
|
-
* 获取中间容器的元素<li>
|
|
8480
8474
|
* type ==> select-multiple
|
|
8475
|
+
* 获取中间容器的元素<li>
|
|
8481
8476
|
* @param formConfig
|
|
8482
8477
|
*/
|
|
8483
8478
|
createSectionContainerItem_select_multiple_new(formConfig) {
|
|
8484
|
-
let
|
|
8485
|
-
Reflect.set(
|
|
8486
|
-
this.setElementClassName(
|
|
8487
|
-
this.setElementAttributes(
|
|
8488
|
-
this.setElementProps(
|
|
8479
|
+
let $li = document.createElement("li");
|
|
8480
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8481
|
+
this.setElementClassName($li, formConfig.className);
|
|
8482
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8483
|
+
this.setElementProps($li, formConfig.props);
|
|
8489
8484
|
/* 左边底部的描述的文字 */
|
|
8490
8485
|
let leftDescriptionText = "";
|
|
8491
8486
|
if (Boolean(formConfig.description)) {
|
|
8492
8487
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8493
8488
|
}
|
|
8494
|
-
PopsSafeUtils.setSafeHTML(
|
|
8489
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8495
8490
|
/*html*/ `
|
|
8496
8491
|
<div class="pops-panel-item-left-text">
|
|
8497
8492
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8566,15 +8561,14 @@ define((function () { 'use strict';
|
|
|
8566
8561
|
},
|
|
8567
8562
|
/** 初始化$el变量 */
|
|
8568
8563
|
inintEl() {
|
|
8569
|
-
this.$el.$container =
|
|
8570
|
-
this.$el.$wrapper =
|
|
8571
|
-
this.$el.$section =
|
|
8572
|
-
this.$el.$selectedInputWrapper =
|
|
8573
|
-
this.$el.$selectedPlaceHolderWrapper =
|
|
8574
|
-
liElement.querySelector(".el-select__selected-item.el-select__placeholder");
|
|
8564
|
+
this.$el.$container = $li.querySelector(".pops-panel-select-multiple");
|
|
8565
|
+
this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
|
|
8566
|
+
this.$el.$section = $li.querySelector(".el-select__selection");
|
|
8567
|
+
this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
|
|
8568
|
+
this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
|
|
8575
8569
|
this.$el.$suffix =
|
|
8576
|
-
|
|
8577
|
-
this.$el.$suffixIcon =
|
|
8570
|
+
$li.querySelector(".el-select__suffix");
|
|
8571
|
+
this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
|
|
8578
8572
|
// 先把手动输入框隐藏
|
|
8579
8573
|
this.hideInputWrapper();
|
|
8580
8574
|
},
|
|
@@ -9132,26 +9126,26 @@ define((function () { 'use strict';
|
|
|
9132
9126
|
},
|
|
9133
9127
|
};
|
|
9134
9128
|
PopsPanelSelectMultiple.init();
|
|
9135
|
-
Reflect.set(
|
|
9136
|
-
return
|
|
9129
|
+
Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
|
|
9130
|
+
return $li;
|
|
9137
9131
|
},
|
|
9138
9132
|
/**
|
|
9139
|
-
* 获取中间容器的元素<li>
|
|
9140
9133
|
* type ==> button
|
|
9134
|
+
* 获取中间容器的元素<li>
|
|
9141
9135
|
* @param formConfig
|
|
9142
9136
|
*/
|
|
9143
9137
|
createSectionContainerItem_button(formConfig) {
|
|
9144
|
-
let
|
|
9145
|
-
|
|
9146
|
-
this.setElementClassName(
|
|
9147
|
-
this.setElementAttributes(
|
|
9148
|
-
this.setElementProps(
|
|
9138
|
+
let $li = document.createElement("li");
|
|
9139
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9140
|
+
this.setElementClassName($li, formConfig.className);
|
|
9141
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
9142
|
+
this.setElementProps($li, formConfig.props);
|
|
9149
9143
|
/* 左边底部的描述的文字 */
|
|
9150
9144
|
let leftDescriptionText = "";
|
|
9151
9145
|
if (Boolean(formConfig.description)) {
|
|
9152
9146
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9153
9147
|
}
|
|
9154
|
-
PopsSafeUtils.setSafeHTML(
|
|
9148
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
9155
9149
|
/*html*/ `
|
|
9156
9150
|
<div class="pops-panel-item-left-text">
|
|
9157
9151
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -9165,10 +9159,10 @@ define((function () { 'use strict';
|
|
|
9165
9159
|
const PopsPanelButton = {
|
|
9166
9160
|
[Symbol.toStringTag]: "PopsPanelButton",
|
|
9167
9161
|
$ele: {
|
|
9168
|
-
panelButton:
|
|
9169
|
-
button:
|
|
9170
|
-
icon:
|
|
9171
|
-
spanText:
|
|
9162
|
+
panelButton: $li.querySelector(".pops-panel-button"),
|
|
9163
|
+
button: $li.querySelector(".pops-panel-button .pops-panel-button_inner"),
|
|
9164
|
+
icon: $li.querySelector(".pops-panel-button .pops-bottom-icon"),
|
|
9165
|
+
spanText: $li.querySelector(".pops-panel-button .pops-panel-button-text"),
|
|
9172
9166
|
},
|
|
9173
9167
|
$data: {},
|
|
9174
9168
|
init() {
|
|
@@ -9281,10 +9275,11 @@ define((function () { 'use strict';
|
|
|
9281
9275
|
},
|
|
9282
9276
|
};
|
|
9283
9277
|
PopsPanelButton.init();
|
|
9284
|
-
|
|
9285
|
-
return
|
|
9278
|
+
Reflect.set($li, "data-button", PopsPanelButton);
|
|
9279
|
+
return $li;
|
|
9286
9280
|
},
|
|
9287
9281
|
/**
|
|
9282
|
+
* type ==> deepMenu
|
|
9288
9283
|
* 获取深层容器的元素<li>
|
|
9289
9284
|
* @param formConfig
|
|
9290
9285
|
*/
|
|
@@ -9292,7 +9287,7 @@ define((function () { 'use strict';
|
|
|
9292
9287
|
let that = this;
|
|
9293
9288
|
let $li = document.createElement("li");
|
|
9294
9289
|
$li.classList.add("pops-panel-deepMenu-nav-item");
|
|
9295
|
-
$li
|
|
9290
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9296
9291
|
this.setElementClassName($li, formConfig.className);
|
|
9297
9292
|
// 设置属性
|
|
9298
9293
|
this.setElementAttributes($li, formConfig.attributes);
|
|
@@ -9428,6 +9423,7 @@ define((function () { 'use strict';
|
|
|
9428
9423
|
let $deepMenuContainer = popsDOMUtils.createElement("section", {
|
|
9429
9424
|
className: "pops-panel-container pops-panel-deepMenu-container",
|
|
9430
9425
|
});
|
|
9426
|
+
Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
|
|
9431
9427
|
let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
|
|
9432
9428
|
className: "pops-panel-deepMenu-container-header-ul",
|
|
9433
9429
|
});
|
|
@@ -9442,13 +9438,13 @@ define((function () { 'use strict';
|
|
|
9442
9438
|
className: "pops-panel-deepMenu-container-left-arrow-icon",
|
|
9443
9439
|
innerHTML: PopsIcon.getIcon("arrowLeft"),
|
|
9444
9440
|
});
|
|
9445
|
-
popsDOMUtils.on($headerLeftArrow, "click",
|
|
9446
|
-
event
|
|
9447
|
-
event?.stopPropagation();
|
|
9441
|
+
popsDOMUtils.on($headerLeftArrow, "click", (event) => {
|
|
9442
|
+
popsDOMUtils.preventEvent(event);
|
|
9448
9443
|
// 返回上一层菜单
|
|
9449
|
-
let $prev = $deepMenuContainer.previousElementSibling;
|
|
9444
|
+
let $prev = ($deepMenuContainer.previousElementSibling);
|
|
9450
9445
|
popsDOMUtils.cssShow($prev);
|
|
9451
9446
|
$deepMenuContainer.remove();
|
|
9447
|
+
that.triggerRenderRightContainer($prev);
|
|
9452
9448
|
}, {
|
|
9453
9449
|
once: true,
|
|
9454
9450
|
});
|
|
@@ -9471,6 +9467,7 @@ define((function () { 'use strict';
|
|
|
9471
9467
|
sectionBodyContainer: $deepMenuBodyUL,
|
|
9472
9468
|
});
|
|
9473
9469
|
}
|
|
9470
|
+
that.triggerRenderRightContainer($deepMenuContainer);
|
|
9474
9471
|
},
|
|
9475
9472
|
/** 设置项的点击事件 */
|
|
9476
9473
|
setLiClickEvent() {
|
|
@@ -9486,22 +9483,22 @@ define((function () { 'use strict';
|
|
|
9486
9483
|
},
|
|
9487
9484
|
};
|
|
9488
9485
|
PopsPanelDeepMenu.init();
|
|
9489
|
-
$li
|
|
9486
|
+
Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
|
|
9490
9487
|
return $li;
|
|
9491
9488
|
},
|
|
9492
9489
|
/**
|
|
9493
|
-
* 获取中间容器的元素<li>
|
|
9494
9490
|
* type ===> own
|
|
9491
|
+
* 获取中间容器的元素<li>
|
|
9495
9492
|
* @param formConfig
|
|
9496
9493
|
*/
|
|
9497
9494
|
createSectionContainerItem_own(formConfig) {
|
|
9498
|
-
let
|
|
9499
|
-
|
|
9495
|
+
let $li = document.createElement("li");
|
|
9496
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9500
9497
|
if (formConfig.className) {
|
|
9501
|
-
|
|
9498
|
+
$li.className = formConfig.className;
|
|
9502
9499
|
}
|
|
9503
|
-
|
|
9504
|
-
return
|
|
9500
|
+
$li = formConfig.getLiElementCallBack($li);
|
|
9501
|
+
return $li;
|
|
9505
9502
|
},
|
|
9506
9503
|
/**
|
|
9507
9504
|
* 获取中间容器的元素<li>
|
|
@@ -9622,6 +9619,17 @@ define((function () { 'use strict';
|
|
|
9622
9619
|
});
|
|
9623
9620
|
}
|
|
9624
9621
|
},
|
|
9622
|
+
/**
|
|
9623
|
+
* 触发触发渲染右侧容器的事件
|
|
9624
|
+
*/
|
|
9625
|
+
triggerRenderRightContainer($container) {
|
|
9626
|
+
let __formConfig__ = Reflect.get($container, "__formConfig__");
|
|
9627
|
+
this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
|
|
9628
|
+
detail: {
|
|
9629
|
+
formConfig: __formConfig__,
|
|
9630
|
+
},
|
|
9631
|
+
}));
|
|
9632
|
+
},
|
|
9625
9633
|
/**
|
|
9626
9634
|
*
|
|
9627
9635
|
* @param formConfig
|
|
@@ -9648,6 +9656,8 @@ define((function () { 'use strict';
|
|
|
9648
9656
|
const that = this;
|
|
9649
9657
|
popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
|
|
9650
9658
|
this.clearContainer();
|
|
9659
|
+
let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
|
|
9660
|
+
Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
|
|
9651
9661
|
popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
|
|
9652
9662
|
this.clearAsideItemIsVisited();
|
|
9653
9663
|
this.setAsideItemIsVisited(asideLiElement);
|
|
@@ -9655,20 +9665,19 @@ define((function () { 'use strict';
|
|
|
9655
9665
|
let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
|
|
9656
9666
|
if (typeof headerTitleText === "string" &&
|
|
9657
9667
|
headerTitleText.trim() !== "") {
|
|
9658
|
-
let
|
|
9659
|
-
|
|
9660
|
-
|
|
9661
|
-
|
|
9662
|
-
|
|
9663
|
-
|
|
9664
|
-
let __forms__ = asideLiElement["__forms__"];
|
|
9665
|
-
__forms__.forEach((formConfig) => {
|
|
9668
|
+
let $containerHeaderTitle = document.createElement("li");
|
|
9669
|
+
Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
|
|
9670
|
+
PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
|
|
9671
|
+
this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
|
|
9672
|
+
}
|
|
9673
|
+
rightContainerFormConfig.forEach((formConfig) => {
|
|
9666
9674
|
this.createSectionContainerItem_forms(formConfig);
|
|
9667
9675
|
});
|
|
9668
9676
|
if (typeof asideConfig.callback === "function") {
|
|
9669
9677
|
/* 执行回调 */
|
|
9670
9678
|
asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9671
9679
|
}
|
|
9680
|
+
that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
|
|
9672
9681
|
});
|
|
9673
9682
|
},
|
|
9674
9683
|
};
|
|
@@ -9765,6 +9774,7 @@ define((function () { 'use strict';
|
|
|
9765
9774
|
panelHandleContentDetails.init({
|
|
9766
9775
|
config: config,
|
|
9767
9776
|
$el: {
|
|
9777
|
+
$pops: $pops,
|
|
9768
9778
|
$content: $content,
|
|
9769
9779
|
$contentAside: $contentAside,
|
|
9770
9780
|
$contentSectionContainer: $contentSectionContainer,
|
|
@@ -9789,7 +9799,15 @@ define((function () { 'use strict';
|
|
|
9789
9799
|
});
|
|
9790
9800
|
}
|
|
9791
9801
|
let result = PopsHandler.handleResultDetails(eventDetails);
|
|
9792
|
-
return
|
|
9802
|
+
return {
|
|
9803
|
+
...result,
|
|
9804
|
+
addEventListener: (event, listener, options) => {
|
|
9805
|
+
$pops.addEventListener(event, listener, options);
|
|
9806
|
+
},
|
|
9807
|
+
removeEventListener: (event, listener, options) => {
|
|
9808
|
+
$pops.removeEventListener(event, listener, options);
|
|
9809
|
+
},
|
|
9810
|
+
};
|
|
9793
9811
|
},
|
|
9794
9812
|
};
|
|
9795
9813
|
|
|
@@ -11033,7 +11051,7 @@ define((function () { 'use strict';
|
|
|
11033
11051
|
/** 配置 */
|
|
11034
11052
|
config = {
|
|
11035
11053
|
/** 版本号 */
|
|
11036
|
-
version: "2025.6.
|
|
11054
|
+
version: "2025.6.25",
|
|
11037
11055
|
cssText: PopsCSS,
|
|
11038
11056
|
/** icon图标的svg代码 */
|
|
11039
11057
|
iconSVG: PopsIcon.$data,
|