@whitesev/pops 2.4.4 → 2.4.6
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/README.md +117 -111
- package/dist/index.amd.js +687 -733
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +687 -733
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +687 -733
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +687 -733
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +687 -733
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +687 -733
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +9 -10
- package/dist/types/src/components/panel/types/components-common.d.ts +26 -26
- package/dist/types/src/components/panel/types/index.d.ts +2 -2
- package/dist/types/src/components/rightClickMenu/index.d.ts +3 -4
- package/dist/types/src/components/searchSuggestion/index.d.ts +2 -2
- package/dist/types/src/components/searchSuggestion/types/index.d.ts +2 -2
- package/dist/types/src/handler/PopsHandler.d.ts +3 -3
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +141 -145
- package/dist/types/src/types/animation.d.ts +15 -15
- package/dist/types/src/types/button.d.ts +141 -141
- package/dist/types/src/types/components.d.ts +175 -178
- package/dist/types/src/types/event.d.ts +44 -44
- package/dist/types/src/types/global.d.ts +18 -13
- package/dist/types/src/types/icon.d.ts +28 -28
- package/dist/types/src/types/inst.d.ts +14 -14
- package/dist/types/src/types/main.d.ts +46 -49
- package/dist/types/src/types/mask.d.ts +36 -36
- package/dist/types/src/types/position.d.ts +46 -46
- package/dist/types/src/utils/PopsDOMUtils.d.ts +1 -1
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +1 -1
- package/dist/types/src/utils/PopsUtils.d.ts +16 -16
- package/package.json +17 -8
package/dist/index.cjs.js
CHANGED
|
@@ -14,12 +14,12 @@ const GlobalConfig = {
|
|
|
14
14
|
* 获取全局配置
|
|
15
15
|
*/
|
|
16
16
|
getGlobalConfig() {
|
|
17
|
-
|
|
17
|
+
const result = {};
|
|
18
18
|
Object.keys(GlobalConfig.config).forEach((keyName) => {
|
|
19
|
-
|
|
19
|
+
const configValue = Reflect.get(GlobalConfig.config, keyName);
|
|
20
20
|
if (keyName === "style") {
|
|
21
21
|
// 设置style属性
|
|
22
|
-
|
|
22
|
+
const style = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
|
|
23
23
|
if (typeof style === "string") {
|
|
24
24
|
result.style = style;
|
|
25
25
|
}
|
|
@@ -28,7 +28,7 @@ const GlobalConfig = {
|
|
|
28
28
|
// 设置zIndex属性
|
|
29
29
|
let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
|
|
30
30
|
if (typeof zIndex === "string") {
|
|
31
|
-
|
|
31
|
+
const newIndex = (zIndex = Number(zIndex));
|
|
32
32
|
if (!isNaN(newIndex)) {
|
|
33
33
|
result.zIndex = newIndex;
|
|
34
34
|
}
|
|
@@ -40,7 +40,7 @@ const GlobalConfig = {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
else if (keyName === "mask") {
|
|
43
|
-
|
|
43
|
+
const mask = GlobalConfig.config.mask == null ? {} : GlobalConfig.config.mask;
|
|
44
44
|
if (typeof mask === "object" && mask != null) {
|
|
45
45
|
result.mask = mask;
|
|
46
46
|
}
|
|
@@ -552,7 +552,7 @@ class PopsUtils {
|
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
554
|
assign(target = {}, source = {}, isAdd = false) {
|
|
555
|
-
|
|
555
|
+
const UtilsContext = this;
|
|
556
556
|
if (source == null) {
|
|
557
557
|
return target;
|
|
558
558
|
}
|
|
@@ -560,7 +560,7 @@ class PopsUtils {
|
|
|
560
560
|
target = {};
|
|
561
561
|
}
|
|
562
562
|
if (Array.isArray(source)) {
|
|
563
|
-
|
|
563
|
+
const canTraverse = source.filter((item) => {
|
|
564
564
|
return typeof item === "object";
|
|
565
565
|
});
|
|
566
566
|
if (!canTraverse.length) {
|
|
@@ -570,8 +570,8 @@ class PopsUtils {
|
|
|
570
570
|
if (isAdd) {
|
|
571
571
|
for (const sourceKeyName in source) {
|
|
572
572
|
const targetKeyName = sourceKeyName;
|
|
573
|
-
|
|
574
|
-
|
|
573
|
+
const targetValue = target[targetKeyName];
|
|
574
|
+
const sourceValue = source[sourceKeyName];
|
|
575
575
|
if (typeof sourceValue === "object" &&
|
|
576
576
|
sourceValue != null &&
|
|
577
577
|
sourceKeyName in target &&
|
|
@@ -586,22 +586,19 @@ class PopsUtils {
|
|
|
586
586
|
else {
|
|
587
587
|
for (const targetKeyName in target) {
|
|
588
588
|
if (targetKeyName in source) {
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
// @ts-ignore
|
|
592
|
-
let sourceValue = source[targetKeyName];
|
|
589
|
+
const targetValue = Reflect.get(target, targetKeyName);
|
|
590
|
+
const sourceValue = Reflect.get(source, targetKeyName);
|
|
593
591
|
if (typeof sourceValue === "object" &&
|
|
594
592
|
sourceValue != null &&
|
|
595
593
|
!UtilsContext.isDOM(sourceValue) &&
|
|
596
594
|
Object.keys(sourceValue).length) {
|
|
597
595
|
/* 源端的值是object类型,且不是元素节点 */
|
|
598
|
-
|
|
599
|
-
|
|
596
|
+
const childObjectValue = UtilsContext.assign(targetValue, sourceValue, isAdd);
|
|
597
|
+
Reflect.set(target, targetKeyName, childObjectValue);
|
|
600
598
|
continue;
|
|
601
599
|
}
|
|
602
600
|
/* 直接赋值 */
|
|
603
|
-
|
|
604
|
-
target[targetKeyName] = sourceValue;
|
|
601
|
+
Reflect.set(target, targetKeyName, sourceValue);
|
|
605
602
|
}
|
|
606
603
|
}
|
|
607
604
|
}
|
|
@@ -616,15 +613,16 @@ class PopsUtils {
|
|
|
616
613
|
}
|
|
617
614
|
else {
|
|
618
615
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (charStr) {
|
|
619
|
-
|
|
616
|
+
const randomValue = (Math.random() * 16) | 0, randomCharValue = charStr === "x" ? randomValue : (randomValue & 0x3) | 0x8;
|
|
620
617
|
return randomCharValue.toString(16);
|
|
621
618
|
});
|
|
622
619
|
}
|
|
623
620
|
}
|
|
624
|
-
contains(
|
|
625
|
-
|
|
621
|
+
contains(...args) {
|
|
622
|
+
const [context, target] = args;
|
|
623
|
+
if (args.length === 1) {
|
|
626
624
|
// 只判断该页面是否存在该元素
|
|
627
|
-
return this.contains(PopsCore.document.body || PopsCore.document.documentElement,
|
|
625
|
+
return this.contains(PopsCore.document.body || PopsCore.document.documentElement, args[0]);
|
|
628
626
|
}
|
|
629
627
|
else {
|
|
630
628
|
if (target == null) {
|
|
@@ -647,7 +645,7 @@ class PopsUtils {
|
|
|
647
645
|
}
|
|
648
646
|
}
|
|
649
647
|
formatTime(text = new Date(), formatType = "yyyy-MM-dd HH:mm:ss") {
|
|
650
|
-
|
|
648
|
+
const time = text == null ? new Date() : new Date(text);
|
|
651
649
|
/**
|
|
652
650
|
* 校验时间补0
|
|
653
651
|
* @param timeNum
|
|
@@ -666,7 +664,7 @@ class PopsUtils {
|
|
|
666
664
|
function timeSystemChange(hourNum) {
|
|
667
665
|
return hourNum > 12 ? hourNum - 12 : hourNum;
|
|
668
666
|
}
|
|
669
|
-
|
|
667
|
+
const timeRegexp = {
|
|
670
668
|
yyyy: time.getFullYear(),
|
|
671
669
|
/* 年 */
|
|
672
670
|
MM: checkTime(time.getMonth() + 1),
|
|
@@ -683,7 +681,7 @@ class PopsUtils {
|
|
|
683
681
|
/* 秒 */
|
|
684
682
|
};
|
|
685
683
|
Object.keys(timeRegexp).forEach(function (key) {
|
|
686
|
-
|
|
684
|
+
const replaecRegexp = new RegExp(key, "g");
|
|
687
685
|
formatType = formatType.replace(replaecRegexp, timeRegexp[key]);
|
|
688
686
|
});
|
|
689
687
|
return formatType;
|
|
@@ -695,7 +693,7 @@ class PopsUtils {
|
|
|
695
693
|
}
|
|
696
694
|
let result = 0;
|
|
697
695
|
let resultType = "KB";
|
|
698
|
-
|
|
696
|
+
const sizeData = {};
|
|
699
697
|
sizeData.B = 1;
|
|
700
698
|
sizeData.KB = 1024;
|
|
701
699
|
sizeData.MB = sizeData.KB * sizeData.KB;
|
|
@@ -708,7 +706,7 @@ class PopsUtils {
|
|
|
708
706
|
sizeData.BB = sizeData.YB * sizeData.KB;
|
|
709
707
|
sizeData.NB = sizeData.BB * sizeData.KB;
|
|
710
708
|
sizeData.DB = sizeData.NB * sizeData.KB;
|
|
711
|
-
for (
|
|
709
|
+
for (const key in sizeData) {
|
|
712
710
|
result = byteSize / sizeData[key];
|
|
713
711
|
resultType = key;
|
|
714
712
|
if (sizeData.KB >= result) {
|
|
@@ -736,7 +734,7 @@ class PopsUtils {
|
|
|
736
734
|
try {
|
|
737
735
|
return setTimeout$1(callback, timeout);
|
|
738
736
|
}
|
|
739
|
-
catch
|
|
737
|
+
catch {
|
|
740
738
|
return PopsCore.setTimeout(callback, timeout);
|
|
741
739
|
}
|
|
742
740
|
}
|
|
@@ -749,7 +747,8 @@ class PopsUtils {
|
|
|
749
747
|
clearTimeout$1(timeId);
|
|
750
748
|
}
|
|
751
749
|
}
|
|
752
|
-
catch
|
|
750
|
+
catch {
|
|
751
|
+
// TODO
|
|
753
752
|
}
|
|
754
753
|
finally {
|
|
755
754
|
PopsCore.clearTimeout(timeId);
|
|
@@ -762,7 +761,7 @@ class PopsUtils {
|
|
|
762
761
|
try {
|
|
763
762
|
return setInterval$1(callback, timeout);
|
|
764
763
|
}
|
|
765
|
-
catch
|
|
764
|
+
catch {
|
|
766
765
|
return PopsCore.setInterval(callback, timeout);
|
|
767
766
|
}
|
|
768
767
|
}
|
|
@@ -775,7 +774,8 @@ class PopsUtils {
|
|
|
775
774
|
clearInterval$1(timeId);
|
|
776
775
|
}
|
|
777
776
|
}
|
|
778
|
-
catch
|
|
777
|
+
catch {
|
|
778
|
+
// 忽略
|
|
779
779
|
}
|
|
780
780
|
finally {
|
|
781
781
|
PopsCore.clearInterval(timeId);
|
|
@@ -789,10 +789,8 @@ const PopsSafeUtils = {
|
|
|
789
789
|
* 获取安全的html
|
|
790
790
|
*/
|
|
791
791
|
getSafeHTML(text) {
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
// @ts-ignore
|
|
795
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
792
|
+
if (window.trustedTypes) {
|
|
793
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
796
794
|
createHTML: (html) => html,
|
|
797
795
|
});
|
|
798
796
|
return policy.createHTML(text);
|
|
@@ -830,7 +828,7 @@ class PopsDOMUtilsEvent {
|
|
|
830
828
|
* @param option
|
|
831
829
|
*/
|
|
832
830
|
function getOption(args, startIndex, option) {
|
|
833
|
-
|
|
831
|
+
const currentParam = args[startIndex];
|
|
834
832
|
if (typeof currentParam === "boolean") {
|
|
835
833
|
option.capture = currentParam;
|
|
836
834
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -852,8 +850,9 @@ class PopsDOMUtilsEvent {
|
|
|
852
850
|
}
|
|
853
851
|
return option;
|
|
854
852
|
}
|
|
855
|
-
|
|
856
|
-
|
|
853
|
+
const DOMUtilsContext = this;
|
|
854
|
+
// eslint-disable-next-line prefer-rest-params
|
|
855
|
+
const args = arguments;
|
|
857
856
|
if (typeof element === "string") {
|
|
858
857
|
element = DOMUtilsContext.selectorAll(element);
|
|
859
858
|
}
|
|
@@ -929,14 +928,14 @@ class PopsDOMUtilsEvent {
|
|
|
929
928
|
totalParent = PopsCore.document.documentElement;
|
|
930
929
|
}
|
|
931
930
|
}
|
|
932
|
-
|
|
931
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
933
932
|
// 判断目标元素是否匹配选择器
|
|
934
933
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
935
934
|
/* 当前目标可以被selector所匹配到 */
|
|
936
935
|
return true;
|
|
937
936
|
}
|
|
938
937
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
939
|
-
|
|
938
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
940
939
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
941
940
|
eventTarget = $closestMatches;
|
|
942
941
|
return true;
|
|
@@ -952,7 +951,9 @@ class PopsDOMUtilsEvent {
|
|
|
952
951
|
},
|
|
953
952
|
});
|
|
954
953
|
}
|
|
955
|
-
catch
|
|
954
|
+
catch {
|
|
955
|
+
// 忽略
|
|
956
|
+
}
|
|
956
957
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
957
958
|
checkOptionOnceToRemoveEventListener();
|
|
958
959
|
}
|
|
@@ -967,7 +968,7 @@ class PopsDOMUtilsEvent {
|
|
|
967
968
|
eventTypeList.forEach((eventName) => {
|
|
968
969
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
969
970
|
/* 获取对象上的事件 */
|
|
970
|
-
|
|
971
|
+
const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
971
972
|
/* 初始化对象上的xx事件 */
|
|
972
973
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
973
974
|
elementEvents[eventName].push({
|
|
@@ -989,7 +990,7 @@ class PopsDOMUtilsEvent {
|
|
|
989
990
|
* @param option
|
|
990
991
|
*/
|
|
991
992
|
function getOption(args1, startIndex, option) {
|
|
992
|
-
|
|
993
|
+
const currentParam = args1[startIndex];
|
|
993
994
|
if (typeof currentParam === "boolean") {
|
|
994
995
|
option.capture = currentParam;
|
|
995
996
|
}
|
|
@@ -998,8 +999,9 @@ class PopsDOMUtilsEvent {
|
|
|
998
999
|
}
|
|
999
1000
|
return option;
|
|
1000
1001
|
}
|
|
1001
|
-
|
|
1002
|
-
|
|
1002
|
+
const DOMUtilsContext = this;
|
|
1003
|
+
// eslint-disable-next-line prefer-rest-params
|
|
1004
|
+
const args = arguments;
|
|
1003
1005
|
if (typeof element === "string") {
|
|
1004
1006
|
element = DOMUtilsContext.selectorAll(element);
|
|
1005
1007
|
}
|
|
@@ -1061,14 +1063,14 @@ class PopsDOMUtilsEvent {
|
|
|
1061
1063
|
}
|
|
1062
1064
|
elementList.forEach((elementItem) => {
|
|
1063
1065
|
/* 获取对象上的事件 */
|
|
1064
|
-
|
|
1066
|
+
const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
1065
1067
|
eventTypeList.forEach((eventName) => {
|
|
1066
1068
|
let handlers = elementEvents[eventName] || [];
|
|
1067
1069
|
if (typeof filter === "function") {
|
|
1068
1070
|
handlers = handlers.filter(filter);
|
|
1069
1071
|
}
|
|
1070
1072
|
for (let index = 0; index < handlers.length; index++) {
|
|
1071
|
-
|
|
1073
|
+
const handler = handlers[index];
|
|
1072
1074
|
let flag = true;
|
|
1073
1075
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
1074
1076
|
// callback不同
|
|
@@ -1128,10 +1130,10 @@ class PopsDOMUtilsEvent {
|
|
|
1128
1130
|
if (!__symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
1129
1131
|
return;
|
|
1130
1132
|
}
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
+
const elementEvents = elementItem[__symbolEvents] || {};
|
|
1134
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
1133
1135
|
iterEventNameList.forEach((eventName) => {
|
|
1134
|
-
|
|
1136
|
+
const handlers = elementEvents[eventName];
|
|
1135
1137
|
if (!handlers) {
|
|
1136
1138
|
return;
|
|
1137
1139
|
}
|
|
@@ -1171,7 +1173,7 @@ class PopsDOMUtilsEvent {
|
|
|
1171
1173
|
return false;
|
|
1172
1174
|
}
|
|
1173
1175
|
}
|
|
1174
|
-
catch
|
|
1176
|
+
catch {
|
|
1175
1177
|
return false;
|
|
1176
1178
|
}
|
|
1177
1179
|
}
|
|
@@ -1182,7 +1184,7 @@ class PopsDOMUtilsEvent {
|
|
|
1182
1184
|
removeDomReadyListener();
|
|
1183
1185
|
callback();
|
|
1184
1186
|
}
|
|
1185
|
-
|
|
1187
|
+
const targetList = [
|
|
1186
1188
|
{
|
|
1187
1189
|
target: PopsCore.document,
|
|
1188
1190
|
eventType: "DOMContentLoaded",
|
|
@@ -1199,7 +1201,7 @@ class PopsDOMUtilsEvent {
|
|
|
1199
1201
|
*/
|
|
1200
1202
|
function addDomReadyListener() {
|
|
1201
1203
|
for (let index = 0; index < targetList.length; index++) {
|
|
1202
|
-
|
|
1204
|
+
const item = targetList[index];
|
|
1203
1205
|
that.on(item.target, item.eventType, item.callback);
|
|
1204
1206
|
}
|
|
1205
1207
|
}
|
|
@@ -1208,7 +1210,7 @@ class PopsDOMUtilsEvent {
|
|
|
1208
1210
|
*/
|
|
1209
1211
|
function removeDomReadyListener() {
|
|
1210
1212
|
for (let index = 0; index < targetList.length; index++) {
|
|
1211
|
-
|
|
1213
|
+
const item = targetList[index];
|
|
1212
1214
|
that.off(item.target, item.eventType, item.callback);
|
|
1213
1215
|
}
|
|
1214
1216
|
}
|
|
@@ -1259,7 +1261,7 @@ class PopsDOMUtilsEvent {
|
|
|
1259
1261
|
}
|
|
1260
1262
|
elementList.forEach((elementItem) => {
|
|
1261
1263
|
/* 获取对象上的事件 */
|
|
1262
|
-
|
|
1264
|
+
const events = elementItem[SymbolEvents] || {};
|
|
1263
1265
|
eventTypeList.forEach((_eventType_) => {
|
|
1264
1266
|
let event = null;
|
|
1265
1267
|
if (details && details instanceof Event) {
|
|
@@ -1299,7 +1301,7 @@ class PopsDOMUtilsEvent {
|
|
|
1299
1301
|
* })
|
|
1300
1302
|
* */
|
|
1301
1303
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1302
|
-
|
|
1304
|
+
const DOMUtilsContext = this;
|
|
1303
1305
|
if (typeof element === "string") {
|
|
1304
1306
|
element = PopsCore.document.querySelector(element);
|
|
1305
1307
|
}
|
|
@@ -1328,7 +1330,7 @@ class PopsDOMUtilsEvent {
|
|
|
1328
1330
|
* })
|
|
1329
1331
|
* */
|
|
1330
1332
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1331
|
-
|
|
1333
|
+
const DOMUtilsContext = this;
|
|
1332
1334
|
if (typeof element === "string") {
|
|
1333
1335
|
element = PopsCore.document.querySelector(element);
|
|
1334
1336
|
}
|
|
@@ -1357,7 +1359,7 @@ class PopsDOMUtilsEvent {
|
|
|
1357
1359
|
* })
|
|
1358
1360
|
* */
|
|
1359
1361
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1360
|
-
|
|
1362
|
+
const DOMUtilsContext = this;
|
|
1361
1363
|
if (typeof element === "string") {
|
|
1362
1364
|
element = PopsCore.document.querySelector(element);
|
|
1363
1365
|
}
|
|
@@ -1386,7 +1388,7 @@ class PopsDOMUtilsEvent {
|
|
|
1386
1388
|
* })
|
|
1387
1389
|
*/
|
|
1388
1390
|
hover(element, handler, option) {
|
|
1389
|
-
|
|
1391
|
+
const DOMUtilsContext = this;
|
|
1390
1392
|
if (typeof element === "string") {
|
|
1391
1393
|
element = PopsCore.document.querySelector(element);
|
|
1392
1394
|
}
|
|
@@ -1412,7 +1414,7 @@ class PopsDOMUtilsEvent {
|
|
|
1412
1414
|
* })
|
|
1413
1415
|
*/
|
|
1414
1416
|
keyup(target, handler, option) {
|
|
1415
|
-
|
|
1417
|
+
const DOMUtilsContext = this;
|
|
1416
1418
|
if (target == null) {
|
|
1417
1419
|
return;
|
|
1418
1420
|
}
|
|
@@ -1437,7 +1439,7 @@ class PopsDOMUtilsEvent {
|
|
|
1437
1439
|
* })
|
|
1438
1440
|
*/
|
|
1439
1441
|
keydown(target, handler, option) {
|
|
1440
|
-
|
|
1442
|
+
const DOMUtilsContext = this;
|
|
1441
1443
|
if (target == null) {
|
|
1442
1444
|
return;
|
|
1443
1445
|
}
|
|
@@ -1462,7 +1464,7 @@ class PopsDOMUtilsEvent {
|
|
|
1462
1464
|
* })
|
|
1463
1465
|
*/
|
|
1464
1466
|
keypress(target, handler, option) {
|
|
1465
|
-
|
|
1467
|
+
const DOMUtilsContext = this;
|
|
1466
1468
|
if (target == null) {
|
|
1467
1469
|
return;
|
|
1468
1470
|
}
|
|
@@ -1483,6 +1485,7 @@ class PopsDOMUtilsEvent {
|
|
|
1483
1485
|
}
|
|
1484
1486
|
if (arguments.length === 1) {
|
|
1485
1487
|
/* 直接阻止事件 */
|
|
1488
|
+
// eslint-disable-next-line prefer-rest-params
|
|
1486
1489
|
return stopEvent(arguments[0]);
|
|
1487
1490
|
}
|
|
1488
1491
|
else {
|
|
@@ -1507,32 +1510,28 @@ class PopsDOMUtilsEvent {
|
|
|
1507
1510
|
return $ele?.innerHTML?.trim() === "";
|
|
1508
1511
|
});
|
|
1509
1512
|
}
|
|
1510
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1511
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1513
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1512
1514
|
// contains 语法
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1516
|
+
const text = textMatch[2];
|
|
1515
1517
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1516
1518
|
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1517
|
-
// @ts-ignore
|
|
1518
1519
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1519
1520
|
});
|
|
1520
1521
|
}
|
|
1521
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1522
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1522
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1523
1523
|
// regexp 语法
|
|
1524
|
-
|
|
1524
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1525
1525
|
let pattern = textMatch[2];
|
|
1526
|
-
|
|
1526
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1527
1527
|
let flags = "";
|
|
1528
1528
|
if (flagMatch) {
|
|
1529
1529
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1530
1530
|
flags = flagMatch[3];
|
|
1531
1531
|
}
|
|
1532
|
-
|
|
1532
|
+
const regexp = new RegExp(pattern, flags);
|
|
1533
1533
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1534
1534
|
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1535
|
-
// @ts-ignore
|
|
1536
1535
|
return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
|
|
1537
1536
|
});
|
|
1538
1537
|
}
|
|
@@ -1572,33 +1571,29 @@ class PopsDOMUtilsEvent {
|
|
|
1572
1571
|
selector = selector.replace(/:empty$/gi, "");
|
|
1573
1572
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1574
1573
|
}
|
|
1575
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1576
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1574
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1577
1575
|
// contains 语法
|
|
1578
|
-
|
|
1579
|
-
|
|
1576
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1577
|
+
const text = textMatch[2];
|
|
1580
1578
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1581
|
-
// @ts-ignore
|
|
1582
1579
|
let content = $el?.textContent || $el?.innerText;
|
|
1583
1580
|
if (typeof content !== "string") {
|
|
1584
1581
|
content = "";
|
|
1585
1582
|
}
|
|
1586
1583
|
return $el.matches(selector) && content?.includes(text);
|
|
1587
1584
|
}
|
|
1588
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1589
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1585
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1590
1586
|
// regexp 语法
|
|
1591
|
-
|
|
1587
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1592
1588
|
let pattern = textMatch[2];
|
|
1593
|
-
|
|
1589
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1594
1590
|
let flags = "";
|
|
1595
1591
|
if (flagMatch) {
|
|
1596
1592
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1597
1593
|
flags = flagMatch[3];
|
|
1598
1594
|
}
|
|
1599
|
-
|
|
1595
|
+
const regexp = new RegExp(pattern, flags);
|
|
1600
1596
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1601
|
-
// @ts-ignore
|
|
1602
1597
|
let content = $el?.textContent || $el?.innerText;
|
|
1603
1598
|
if (typeof content !== "string") {
|
|
1604
1599
|
content = "";
|
|
@@ -1615,45 +1610,41 @@ class PopsDOMUtilsEvent {
|
|
|
1615
1610
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1616
1611
|
// empty 语法
|
|
1617
1612
|
selector = selector.replace(/:empty$/gi, "");
|
|
1618
|
-
|
|
1613
|
+
const $closest = $el?.closest(selector);
|
|
1619
1614
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1620
1615
|
return $closest;
|
|
1621
1616
|
}
|
|
1622
1617
|
return null;
|
|
1623
1618
|
}
|
|
1624
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1625
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1619
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1626
1620
|
// contains 语法
|
|
1627
|
-
|
|
1628
|
-
|
|
1621
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1622
|
+
const text = textMatch[2];
|
|
1629
1623
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1630
|
-
|
|
1624
|
+
const $closest = $el?.closest(selector);
|
|
1631
1625
|
if ($closest) {
|
|
1632
|
-
|
|
1633
|
-
let content = $el?.textContent || $el?.innerText;
|
|
1626
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1634
1627
|
if (typeof content === "string" && content.includes(text)) {
|
|
1635
1628
|
return $closest;
|
|
1636
1629
|
}
|
|
1637
1630
|
}
|
|
1638
1631
|
return null;
|
|
1639
1632
|
}
|
|
1640
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1641
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1633
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1642
1634
|
// regexp 语法
|
|
1643
|
-
|
|
1635
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1644
1636
|
let pattern = textMatch[2];
|
|
1645
|
-
|
|
1637
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1646
1638
|
let flags = "";
|
|
1647
1639
|
if (flagMatch) {
|
|
1648
1640
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1649
1641
|
flags = flagMatch[3];
|
|
1650
1642
|
}
|
|
1651
|
-
|
|
1643
|
+
const regexp = new RegExp(pattern, flags);
|
|
1652
1644
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1653
|
-
|
|
1645
|
+
const $closest = $el?.closest(selector);
|
|
1654
1646
|
if ($closest) {
|
|
1655
|
-
|
|
1656
|
-
let content = $el?.textContent || $el?.innerText;
|
|
1647
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1657
1648
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1658
1649
|
return $closest;
|
|
1659
1650
|
}
|
|
@@ -1662,7 +1653,7 @@ class PopsDOMUtilsEvent {
|
|
|
1662
1653
|
}
|
|
1663
1654
|
else {
|
|
1664
1655
|
// 普通语法
|
|
1665
|
-
|
|
1656
|
+
const $closest = $el?.closest(selector);
|
|
1666
1657
|
return $closest;
|
|
1667
1658
|
}
|
|
1668
1659
|
}
|
|
@@ -1682,13 +1673,13 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1682
1673
|
* @param calcScroll 计算滚动距离
|
|
1683
1674
|
*/
|
|
1684
1675
|
offset(element, calcScroll = true) {
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1676
|
+
const rect = element.getBoundingClientRect();
|
|
1677
|
+
const win = element.ownerDocument.defaultView;
|
|
1678
|
+
const resultRect = new DOMRect(calcScroll ? parseFloat((rect.left + (win?.pageXOffset || 0)).toString()) : rect.left, calcScroll ? parseFloat((rect.top + (win?.pageYOffset || 0)).toString()) : rect.top, rect.width, rect.height);
|
|
1688
1679
|
return resultRect;
|
|
1689
1680
|
}
|
|
1690
1681
|
width(element, isShow = false, parent) {
|
|
1691
|
-
|
|
1682
|
+
const DOMUtilsContext = this;
|
|
1692
1683
|
if (typeof element === "string") {
|
|
1693
1684
|
element = PopsCore.document.querySelector(element);
|
|
1694
1685
|
}
|
|
@@ -1713,11 +1704,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1713
1704
|
}
|
|
1714
1705
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
1715
1706
|
if (element.offsetWidth > 0) {
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1707
|
+
const borderLeftWidth = popsDOMUtils.getStyleValue(element, "borderLeftWidth");
|
|
1708
|
+
const borderRightWidth = popsDOMUtils.getStyleValue(element, "borderRightWidth");
|
|
1709
|
+
const paddingLeft = popsDOMUtils.getStyleValue(element, "paddingLeft");
|
|
1710
|
+
const paddingRight = popsDOMUtils.getStyleValue(element, "paddingRight");
|
|
1711
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
1721
1712
|
parseFloat(borderLeftWidth.toString()) -
|
|
1722
1713
|
parseFloat(borderRightWidth.toString()) -
|
|
1723
1714
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -1729,14 +1720,14 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1729
1720
|
else {
|
|
1730
1721
|
/* 未显示 */
|
|
1731
1722
|
element = element;
|
|
1732
|
-
|
|
1733
|
-
|
|
1723
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1724
|
+
const width = DOMUtilsContext.width(cloneNode, true, parent);
|
|
1734
1725
|
recovery();
|
|
1735
1726
|
return width;
|
|
1736
1727
|
}
|
|
1737
1728
|
}
|
|
1738
1729
|
height(element, isShow = false, parent) {
|
|
1739
|
-
|
|
1730
|
+
const DOMUtilsContext = this;
|
|
1740
1731
|
if (popsUtils.isWin(element)) {
|
|
1741
1732
|
return PopsCore.window.document.documentElement.clientHeight;
|
|
1742
1733
|
}
|
|
@@ -1761,11 +1752,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1761
1752
|
}
|
|
1762
1753
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
1763
1754
|
if (element.offsetHeight > 0) {
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1755
|
+
const borderTopWidth = popsDOMUtils.getStyleValue(element, "borderTopWidth");
|
|
1756
|
+
const borderBottomWidth = popsDOMUtils.getStyleValue(element, "borderBottomWidth");
|
|
1757
|
+
const paddingTop = popsDOMUtils.getStyleValue(element, "paddingTop");
|
|
1758
|
+
const paddingBottom = popsDOMUtils.getStyleValue(element, "paddingBottom");
|
|
1759
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
1769
1760
|
parseFloat(borderTopWidth.toString()) -
|
|
1770
1761
|
parseFloat(borderBottomWidth.toString()) -
|
|
1771
1762
|
parseFloat(paddingTop.toString()) -
|
|
@@ -1777,14 +1768,14 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1777
1768
|
else {
|
|
1778
1769
|
/* 未显示 */
|
|
1779
1770
|
element = element;
|
|
1780
|
-
|
|
1781
|
-
|
|
1771
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1772
|
+
const height = DOMUtilsContext.height(cloneNode, true, parent);
|
|
1782
1773
|
recovery();
|
|
1783
1774
|
return height;
|
|
1784
1775
|
}
|
|
1785
1776
|
}
|
|
1786
1777
|
outerWidth(element, isShow = false, parent) {
|
|
1787
|
-
|
|
1778
|
+
const DOMUtilsContext = this;
|
|
1788
1779
|
if (popsUtils.isWin(element)) {
|
|
1789
1780
|
return PopsCore.window.innerWidth;
|
|
1790
1781
|
}
|
|
@@ -1796,40 +1787,36 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1796
1787
|
}
|
|
1797
1788
|
element = element;
|
|
1798
1789
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1790
|
+
const style = getComputedStyle(element, null);
|
|
1791
|
+
const marginLeft = popsDOMUtils.getStyleValue(style, "marginLeft");
|
|
1792
|
+
const marginRight = popsDOMUtils.getStyleValue(style, "marginRight");
|
|
1802
1793
|
return element.offsetWidth + marginLeft + marginRight;
|
|
1803
1794
|
}
|
|
1804
1795
|
else {
|
|
1805
|
-
|
|
1806
|
-
|
|
1796
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1797
|
+
const outerWidth = DOMUtilsContext.outerWidth(cloneNode, true, parent);
|
|
1807
1798
|
recovery();
|
|
1808
1799
|
return outerWidth;
|
|
1809
1800
|
}
|
|
1810
1801
|
}
|
|
1811
1802
|
outerHeight(element, isShow = false, parent) {
|
|
1812
|
-
|
|
1803
|
+
const DOMUtilsContext = this;
|
|
1813
1804
|
if (popsUtils.isWin(element)) {
|
|
1814
1805
|
return PopsCore.window.innerHeight;
|
|
1815
1806
|
}
|
|
1816
1807
|
if (typeof element === "string") {
|
|
1817
1808
|
element = PopsCore.document.querySelector(element);
|
|
1818
1809
|
}
|
|
1819
|
-
if (element == null) {
|
|
1820
|
-
// @ts-ignore
|
|
1821
|
-
return;
|
|
1822
|
-
}
|
|
1823
1810
|
element = element;
|
|
1824
1811
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1812
|
+
const style = getComputedStyle(element, null);
|
|
1813
|
+
const marginTop = popsDOMUtils.getStyleValue(style, "marginTop");
|
|
1814
|
+
const marginBottom = popsDOMUtils.getStyleValue(style, "marginBottom");
|
|
1828
1815
|
return element.offsetHeight + marginTop + marginBottom;
|
|
1829
1816
|
}
|
|
1830
1817
|
else {
|
|
1831
|
-
|
|
1832
|
-
|
|
1818
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1819
|
+
const outerHeight = DOMUtilsContext.outerHeight(cloneNode, true, parent);
|
|
1833
1820
|
recovery();
|
|
1834
1821
|
return outerHeight;
|
|
1835
1822
|
}
|
|
@@ -1892,13 +1879,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1892
1879
|
* 把纯数字没有px的加上
|
|
1893
1880
|
*/
|
|
1894
1881
|
function handlePixe(propertyName, propertyValue) {
|
|
1895
|
-
|
|
1882
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1896
1883
|
if (typeof propertyValue === "number") {
|
|
1897
1884
|
propertyValue = propertyValue.toString();
|
|
1898
1885
|
}
|
|
1899
|
-
if (typeof propertyValue === "string" &&
|
|
1900
|
-
allowAddPixe.includes(propertyName) &&
|
|
1901
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1886
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1902
1887
|
propertyValue = propertyValue + "px";
|
|
1903
1888
|
}
|
|
1904
1889
|
return propertyValue;
|
|
@@ -1909,7 +1894,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1909
1894
|
if (element == null) {
|
|
1910
1895
|
return;
|
|
1911
1896
|
}
|
|
1912
|
-
|
|
1897
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1913
1898
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1914
1899
|
propertyValue = propertyValue
|
|
1915
1900
|
.trim()
|
|
@@ -1931,8 +1916,8 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1931
1916
|
}
|
|
1932
1917
|
}
|
|
1933
1918
|
else if (typeof property === "object") {
|
|
1934
|
-
for (
|
|
1935
|
-
|
|
1919
|
+
for (const prop in property) {
|
|
1920
|
+
const value = property[prop];
|
|
1936
1921
|
setStyleProperty(prop, value);
|
|
1937
1922
|
}
|
|
1938
1923
|
}
|
|
@@ -1962,7 +1947,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1962
1947
|
property,
|
|
1963
1948
|
/** 自定义属性 */
|
|
1964
1949
|
attributes) {
|
|
1965
|
-
|
|
1950
|
+
const tempElement = PopsCore.document.createElement(tagName);
|
|
1966
1951
|
if (typeof property === "string") {
|
|
1967
1952
|
PopsSafeUtils.setSafeHTML(tempElement, property);
|
|
1968
1953
|
return tempElement;
|
|
@@ -1974,13 +1959,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1974
1959
|
attributes = {};
|
|
1975
1960
|
}
|
|
1976
1961
|
Object.keys(property).forEach((key) => {
|
|
1977
|
-
|
|
1962
|
+
const value = property[key];
|
|
1978
1963
|
if (key === "innerHTML") {
|
|
1979
1964
|
PopsSafeUtils.setSafeHTML(tempElement, value);
|
|
1980
1965
|
return;
|
|
1981
1966
|
}
|
|
1982
|
-
|
|
1983
|
-
tempElement[key] = value;
|
|
1967
|
+
Reflect.set(tempElement, key, value);
|
|
1984
1968
|
});
|
|
1985
1969
|
Object.keys(attributes).forEach((key) => {
|
|
1986
1970
|
let value = attributes[key];
|
|
@@ -2004,7 +1988,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2004
1988
|
parseTextToDOM(elementString) {
|
|
2005
1989
|
/* 去除前后的换行和空格 */
|
|
2006
1990
|
elementString = elementString.replace(/^[\n|\s]*/g, "").replace(/[\n|\s]*$/g, "");
|
|
2007
|
-
|
|
1991
|
+
const targetElement = this.createElement("div", {
|
|
2008
1992
|
innerHTML: elementString,
|
|
2009
1993
|
});
|
|
2010
1994
|
return targetElement.firstChild;
|
|
@@ -2042,16 +2026,21 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2042
2026
|
selectionEnd = Math.min(input.value.length, selectionEnd);
|
|
2043
2027
|
// If available (thus IE), use the createTextRange method
|
|
2044
2028
|
if (typeof input.createTextRange == "function") {
|
|
2045
|
-
|
|
2029
|
+
const range = input.createTextRange();
|
|
2046
2030
|
range.collapse(true);
|
|
2047
2031
|
range.moveStart("character", selectionStart);
|
|
2048
2032
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
2049
2033
|
return range.getBoundingClientRect();
|
|
2050
2034
|
}
|
|
2051
2035
|
// createTextRange is not supported, create a fake text range
|
|
2052
|
-
|
|
2036
|
+
const offset = getInputOffset();
|
|
2037
|
+
let topPos = offset.top;
|
|
2038
|
+
let leftPos = offset.left;
|
|
2039
|
+
const width = getInputCSS("width", true);
|
|
2040
|
+
const height = getInputCSS("height", true);
|
|
2053
2041
|
// Styles to simulate a node in an input field
|
|
2054
|
-
|
|
2042
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
2043
|
+
const listOfModifiers = [
|
|
2055
2044
|
"direction",
|
|
2056
2045
|
"font-family",
|
|
2057
2046
|
"font-size",
|
|
@@ -2067,26 +2056,21 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2067
2056
|
"word-wrap",
|
|
2068
2057
|
"word-spacing",
|
|
2069
2058
|
];
|
|
2070
|
-
// @ts-ignore
|
|
2071
2059
|
topPos += getInputCSS("padding-top", true);
|
|
2072
|
-
// @ts-ignore
|
|
2073
2060
|
topPos += getInputCSS("border-top-width", true);
|
|
2074
|
-
// @ts-ignore
|
|
2075
2061
|
leftPos += getInputCSS("padding-left", true);
|
|
2076
|
-
// @ts-ignore
|
|
2077
2062
|
leftPos += getInputCSS("border-left-width", true);
|
|
2078
2063
|
leftPos += 1; //Seems to be necessary
|
|
2079
|
-
for (
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
2064
|
+
for (let i = 0; i < listOfModifiers.length; i++) {
|
|
2065
|
+
const property = listOfModifiers[i];
|
|
2066
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
2083
2067
|
}
|
|
2084
2068
|
// End of CSS variable checks
|
|
2085
2069
|
// 不能为空,不然获取不到高度
|
|
2086
|
-
|
|
2070
|
+
const text = input.value || "G", textLen = text.length, fakeClone = document.createElement("div");
|
|
2087
2071
|
if (selectionStart > 0)
|
|
2088
2072
|
appendPart(0, selectionStart);
|
|
2089
|
-
|
|
2073
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
2090
2074
|
if (textLen > selectionEnd)
|
|
2091
2075
|
appendPart(selectionEnd, textLen);
|
|
2092
2076
|
// Styles to inherit the font styles of the element
|
|
@@ -2098,7 +2082,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2098
2082
|
fakeClone.style.width = width + "px";
|
|
2099
2083
|
fakeClone.style.height = height + "px";
|
|
2100
2084
|
PopsCore.document.body.appendChild(fakeClone);
|
|
2101
|
-
|
|
2085
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
2102
2086
|
if (!debug)
|
|
2103
2087
|
fakeClone.parentNode.removeChild(fakeClone); //Remove temp
|
|
2104
2088
|
return returnValue;
|
|
@@ -2109,7 +2093,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2109
2093
|
* @param end
|
|
2110
2094
|
*/
|
|
2111
2095
|
function appendPart(start, end) {
|
|
2112
|
-
|
|
2096
|
+
const span = document.createElement("span");
|
|
2113
2097
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
2114
2098
|
span.textContent = text.substring(start, end);
|
|
2115
2099
|
fakeClone.appendChild(span);
|
|
@@ -2117,35 +2101,31 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2117
2101
|
}
|
|
2118
2102
|
// Computing offset position
|
|
2119
2103
|
function getInputOffset() {
|
|
2120
|
-
|
|
2104
|
+
const body = document.body, win = document.defaultView, docElem = document.documentElement, box = document.createElement("div");
|
|
2121
2105
|
box.style.paddingLeft = box.style.width = "1px";
|
|
2122
2106
|
body.appendChild(box);
|
|
2123
|
-
|
|
2107
|
+
const isBoxModel = box.offsetWidth == 2;
|
|
2124
2108
|
body.removeChild(box);
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop =
|
|
2128
|
-
// @ts-ignore
|
|
2129
|
-
win.pageYOffset || (isBoxModel && docElem.scrollTop) || body.scrollTop, scrollLeft =
|
|
2130
|
-
// @ts-ignore
|
|
2131
|
-
win.pageXOffset || (isBoxModel && docElem.scrollLeft) || body.scrollLeft;
|
|
2109
|
+
const boxRect = input.getBoundingClientRect();
|
|
2110
|
+
const clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win?.pageYOffset || (isBoxModel && docElem.scrollTop) || body.scrollTop, scrollLeft = win?.pageXOffset || (isBoxModel && docElem.scrollLeft) || body.scrollLeft;
|
|
2132
2111
|
return {
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
// @ts-ignore
|
|
2136
|
-
left: box.left + scrollLeft - clientLeft,
|
|
2112
|
+
top: boxRect.top + scrollTop - clientTop,
|
|
2113
|
+
left: boxRect.left + scrollLeft - clientLeft,
|
|
2137
2114
|
};
|
|
2138
2115
|
}
|
|
2139
2116
|
/**
|
|
2140
2117
|
*
|
|
2141
2118
|
* @param prop
|
|
2142
2119
|
* @param isnumber
|
|
2143
|
-
* @returns
|
|
2144
2120
|
*/
|
|
2145
2121
|
function getInputCSS(prop, isnumber) {
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2122
|
+
const val = PopsCore.document.defaultView.getComputedStyle(input, null).getPropertyValue(prop);
|
|
2123
|
+
if (isnumber) {
|
|
2124
|
+
return parseFloat(val);
|
|
2125
|
+
}
|
|
2126
|
+
else {
|
|
2127
|
+
return val;
|
|
2128
|
+
}
|
|
2149
2129
|
}
|
|
2150
2130
|
}
|
|
2151
2131
|
/**
|
|
@@ -2177,7 +2157,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2177
2157
|
}
|
|
2178
2158
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2179
2159
|
function parseHTMLByDOMParser() {
|
|
2180
|
-
|
|
2160
|
+
const parser = new DOMParser();
|
|
2181
2161
|
if (isComplete) {
|
|
2182
2162
|
return parser.parseFromString(html, "text/html");
|
|
2183
2163
|
}
|
|
@@ -2186,7 +2166,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2186
2166
|
}
|
|
2187
2167
|
}
|
|
2188
2168
|
function parseHTMLByCreateDom() {
|
|
2189
|
-
|
|
2169
|
+
const tempDIV = PopsCore.document.createElement("div");
|
|
2190
2170
|
PopsSafeUtils.setSafeHTML(tempDIV, html);
|
|
2191
2171
|
if (isComplete) {
|
|
2192
2172
|
return tempDIV;
|
|
@@ -2228,7 +2208,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2228
2208
|
}
|
|
2229
2209
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2230
2210
|
/* 数组 */
|
|
2231
|
-
|
|
2211
|
+
const fragment = PopsCore.document.createDocumentFragment();
|
|
2232
2212
|
content.forEach((ele) => {
|
|
2233
2213
|
if (typeof ele === "string") {
|
|
2234
2214
|
ele = this.parseHTML(ele, true, false);
|
|
@@ -2278,11 +2258,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2278
2258
|
*/
|
|
2279
2259
|
showElement($ele, ownParent) {
|
|
2280
2260
|
/** 克隆元素 */
|
|
2281
|
-
|
|
2261
|
+
const $cloneNode = $ele.cloneNode(true);
|
|
2282
2262
|
$cloneNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
2283
2263
|
let $parent = PopsCore.document.documentElement;
|
|
2284
2264
|
// 这里需要的是先获取元素的父节点,把元素同样添加到父节点中
|
|
2285
|
-
|
|
2265
|
+
const $root = $ele.getRootNode();
|
|
2286
2266
|
if (ownParent == null) {
|
|
2287
2267
|
if ($root == $ele) {
|
|
2288
2268
|
// 未添加到任意节点中,那么直接添加到页面中去
|
|
@@ -2330,7 +2310,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2330
2310
|
}
|
|
2331
2311
|
styles = view.getComputedStyle(element);
|
|
2332
2312
|
}
|
|
2333
|
-
|
|
2313
|
+
const value = parseFloat(styles[styleName]);
|
|
2334
2314
|
if (isNaN(value)) {
|
|
2335
2315
|
return 0;
|
|
2336
2316
|
}
|
|
@@ -2390,10 +2370,9 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2390
2370
|
* @returns
|
|
2391
2371
|
*/
|
|
2392
2372
|
getKeyFrames(sheet) {
|
|
2393
|
-
|
|
2373
|
+
const result = {};
|
|
2394
2374
|
Object.keys(sheet.cssRules).forEach((key) => {
|
|
2395
|
-
if (sheet.cssRules[key].type === 7 &&
|
|
2396
|
-
sheet.cssRules[key].name.startsWith("pops-anim-")) {
|
|
2375
|
+
if (sheet.cssRules[key].type === 7 && sheet.cssRules[key].name.startsWith("pops-anim-")) {
|
|
2397
2376
|
result[sheet.cssRules[key].name] = sheet.cssRules[key];
|
|
2398
2377
|
}
|
|
2399
2378
|
});
|
|
@@ -2417,7 +2396,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2417
2396
|
*/
|
|
2418
2397
|
str) => {
|
|
2419
2398
|
let hexs = "";
|
|
2420
|
-
|
|
2399
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2421
2400
|
if (!reg.test(str)) {
|
|
2422
2401
|
console.warn("输入错误的hex");
|
|
2423
2402
|
return "";
|
|
@@ -2444,12 +2423,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2444
2423
|
* 蓝色
|
|
2445
2424
|
*/
|
|
2446
2425
|
b) => {
|
|
2447
|
-
|
|
2426
|
+
const reg = /^\d{1,3}$/;
|
|
2448
2427
|
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
|
|
2449
2428
|
console.warn("输入错误的rgb颜色值");
|
|
2450
2429
|
return "";
|
|
2451
2430
|
}
|
|
2452
|
-
|
|
2431
|
+
const hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
|
2453
2432
|
for (let i = 0; i < 3; i++)
|
|
2454
2433
|
if (hexs[i].length == 1)
|
|
2455
2434
|
hexs[i] = `0${hexs[i]}`;
|
|
@@ -2467,12 +2446,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2467
2446
|
* 加深的程度,限0-1之间
|
|
2468
2447
|
*/
|
|
2469
2448
|
level) => {
|
|
2470
|
-
|
|
2449
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2471
2450
|
if (!reg.test(color)) {
|
|
2472
2451
|
console.warn("输入错误的hex颜色值");
|
|
2473
2452
|
return "";
|
|
2474
2453
|
}
|
|
2475
|
-
|
|
2454
|
+
const rgb = useChangeColor().hexToRgb(color);
|
|
2476
2455
|
for (let i = 0; i < 3; i++)
|
|
2477
2456
|
rgb[i] = Math.floor(rgb[i] * (1 - level));
|
|
2478
2457
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
@@ -2489,12 +2468,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2489
2468
|
* 加深的程度,限0-1之间
|
|
2490
2469
|
*/
|
|
2491
2470
|
level) => {
|
|
2492
|
-
|
|
2471
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2493
2472
|
if (!reg.test(color)) {
|
|
2494
2473
|
console.warn("输入错误的hex颜色值");
|
|
2495
2474
|
return "";
|
|
2496
2475
|
}
|
|
2497
|
-
|
|
2476
|
+
const rgb = useChangeColor().hexToRgb(color);
|
|
2498
2477
|
for (let i = 0; i < 3; i++)
|
|
2499
2478
|
rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
|
2500
2479
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
@@ -2515,9 +2494,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2515
2494
|
getTransform(element) {
|
|
2516
2495
|
let transform_left = 0;
|
|
2517
2496
|
let transform_top = 0;
|
|
2518
|
-
|
|
2497
|
+
const elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
2519
2498
|
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
2520
|
-
|
|
2499
|
+
const elementTransformMatch = elementTransform.match(/\((.+)\)/);
|
|
2500
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
2501
|
+
const elementTransformSplit = elementTransformMatch?.[1]?.split?.(",");
|
|
2521
2502
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
2522
2503
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
2523
2504
|
}
|
|
@@ -2531,15 +2512,15 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2531
2512
|
*/
|
|
2532
2513
|
onInput($el, callback, option) {
|
|
2533
2514
|
let isComposite = false;
|
|
2534
|
-
|
|
2515
|
+
const __callback = async (event) => {
|
|
2535
2516
|
if (isComposite)
|
|
2536
2517
|
return;
|
|
2537
2518
|
await callback(event);
|
|
2538
2519
|
};
|
|
2539
|
-
|
|
2520
|
+
const __composition_start_callback = () => {
|
|
2540
2521
|
isComposite = true;
|
|
2541
2522
|
};
|
|
2542
|
-
|
|
2523
|
+
const __composition_end_callback = () => {
|
|
2543
2524
|
isComposite = false;
|
|
2544
2525
|
this.trigger($el, "input", {
|
|
2545
2526
|
isComposite,
|
|
@@ -2583,10 +2564,10 @@ const PopsElementHandler = {
|
|
|
2583
2564
|
* @param zIndex
|
|
2584
2565
|
*/
|
|
2585
2566
|
createAnim(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
|
|
2586
|
-
|
|
2567
|
+
const __config = config;
|
|
2587
2568
|
let popsAnimStyle = "";
|
|
2588
2569
|
let popsStyle = "";
|
|
2589
|
-
|
|
2570
|
+
const popsPosition = __config.position || "";
|
|
2590
2571
|
if (config.zIndex != null) {
|
|
2591
2572
|
popsAnimStyle += `z-index: ${zIndex};`;
|
|
2592
2573
|
popsStyle += `z-index: ${zIndex};`;
|
|
@@ -2597,7 +2578,7 @@ const PopsElementHandler = {
|
|
|
2597
2578
|
if (__config.height != null) {
|
|
2598
2579
|
popsStyle += `height: ${__config.height};`;
|
|
2599
2580
|
}
|
|
2600
|
-
|
|
2581
|
+
const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
|
|
2601
2582
|
return /*html*/ `
|
|
2602
2583
|
<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
|
|
2603
2584
|
<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
|
|
@@ -2612,14 +2593,14 @@ const PopsElementHandler = {
|
|
|
2612
2593
|
if (!config.btn) {
|
|
2613
2594
|
return "";
|
|
2614
2595
|
}
|
|
2615
|
-
|
|
2596
|
+
const confirm_config = config;
|
|
2616
2597
|
if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
|
|
2617
2598
|
return "";
|
|
2618
2599
|
}
|
|
2619
2600
|
let resultHTML = "";
|
|
2620
2601
|
// let btnStyle = "";
|
|
2621
2602
|
let closeHTML = "";
|
|
2622
|
-
|
|
2603
|
+
const iframe_config = config;
|
|
2623
2604
|
if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
|
|
2624
2605
|
/* iframe的 */
|
|
2625
2606
|
let topRightButtonHTML = "";
|
|
@@ -2669,7 +2650,7 @@ const PopsElementHandler = {
|
|
|
2669
2650
|
// 未设置btn参数
|
|
2670
2651
|
return "";
|
|
2671
2652
|
}
|
|
2672
|
-
|
|
2653
|
+
const confirm_config = config;
|
|
2673
2654
|
if (!(config.btn?.ok?.enable || confirm_config.btn?.cancel?.enable || confirm_config.btn?.other?.enable)) {
|
|
2674
2655
|
// 确定、取消、其它按钮都未启用直接返回
|
|
2675
2656
|
return "";
|
|
@@ -2695,7 +2676,7 @@ const PopsElementHandler = {
|
|
|
2695
2676
|
okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
|
|
2696
2677
|
}
|
|
2697
2678
|
let okIconHTML = "";
|
|
2698
|
-
|
|
2679
|
+
const okIcon = confirm_config.btn.ok.icon;
|
|
2699
2680
|
if (okIcon !== "") {
|
|
2700
2681
|
// 判断图标是否是svg库内的
|
|
2701
2682
|
let iconHTML = "";
|
|
@@ -2728,7 +2709,7 @@ const PopsElementHandler = {
|
|
|
2728
2709
|
cancelButtonSizeClassName = "pops-button-" + confirm_config.btn.cancel.size;
|
|
2729
2710
|
}
|
|
2730
2711
|
let cancelIconHTML = "";
|
|
2731
|
-
|
|
2712
|
+
const cancelIcon = confirm_config.btn.cancel.icon;
|
|
2732
2713
|
if (cancelIcon !== "") {
|
|
2733
2714
|
let iconHTML = "";
|
|
2734
2715
|
// 判断图标是否是svg库内的
|
|
@@ -2761,7 +2742,7 @@ const PopsElementHandler = {
|
|
|
2761
2742
|
otherButtonSizeClassName = "pops-button-" + confirm_config.btn.other.size;
|
|
2762
2743
|
}
|
|
2763
2744
|
let otherIconHTML = "";
|
|
2764
|
-
|
|
2745
|
+
const otherIcon = confirm_config.btn.other.icon;
|
|
2765
2746
|
if (otherIcon !== "") {
|
|
2766
2747
|
let iconHTML = "";
|
|
2767
2748
|
// 判断图标是否是svg库内的
|
|
@@ -2821,37 +2802,37 @@ const PopsElementHandler = {
|
|
|
2821
2802
|
},
|
|
2822
2803
|
};
|
|
2823
2804
|
|
|
2824
|
-
var indexCSS = "@charset \"utf-8\";\n.pops * {\n
|
|
2805
|
+
var indexCSS = "@charset \"utf-8\";\n.pops * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n /* 代替::-webkit-scrollbar */\n scrollbar-width: thin;\n}\n.pops {\n --pops-bg-opacity: 1;\n --pops-bd-opacity: 1;\n --pops-font-size: 16px;\n interpolate-size: allow-keywords;\n --pops-color: #000000;\n --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n --pops-title-color: #000000;\n --pops-title-border-color: var(--pops-bd-color);\n --pops-content-color: #000000;\n --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n --pops-components-is-disabled-text-color: #a8abb2;\n --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n .pops {\n --pops-mask-bg-opacity: 0.8;\n --pops-color: #ffffff;\n --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n --pops-title-color: #e8e8e8;\n --pops-title-border-color: var(--pops-bd-color);\n --pops-content-color: #e5e5e5;\n --pops-components-is-disabled-text-color: #a8abb2;\n --pops-components-is-disabled-bg-color: #262727;\n }\n}\n.pops {\n color: var(--pops-color);\n background-color: var(--pops-bg-color);\n border: 1px solid var(--pops-bd-color);\n border-radius: 4px;\n font-size: var(--pops-font-size);\n line-height: normal;\n box-shadow: 0 0 12px var(--pops-box-shadow-color);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.35s;\n display: flex;\n flex-direction: column;\n}\n.pops-anim {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.pops-anim[anim=\"\"] {\n top: unset;\n right: unset;\n bottom: unset;\n left: unset;\n width: unset;\n height: unset;\n transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n height: 1em;\n width: 1em;\n line-height: normal;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: inherit;\n font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n --pops-mask-bg-opacity: 0.4;\n --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n border-radius: 0;\n background-color: var(--pops-mask-bg-color);\n box-shadow: none;\n transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n float: right;\n margin: 0 0;\n outline: 0;\n border: 0;\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n background-color: transparent;\n color: #888;\n cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n outline: 0 !important;\n border: 0;\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n background-color: transparent;\n color: rgb(136, 136, 136);\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n color: rgb(144, 147, 153);\n font-size: inherit;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n}\nbutton.pops-header-control svg {\n height: 1.25em;\n width: 1.25em;\n}\nbutton.pops-header-control {\n right: 15px;\n padding: 0;\n border: none;\n outline: 0;\n background: 0 0;\n cursor: pointer;\n position: unset;\n line-height: normal;\n}\nbutton.pops-header-control i:hover {\n color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n margin: 0 6px;\n display: flex;\n align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n display: flex;\n gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n font-size: 0.85em;\n color: #000;\n background-color: #f0f0f0;\n border-radius: 3px;\n border: 0;\n padding: 0.2em 0;\n white-space: normal;\n background: #f5f5f5;\n text-wrap: wrap;\n text-align: left;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.4;\n -moz-tab-size: 8;\n -o-tab-size: 8;\n tab-size: 8;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n letter-spacing: -0.2em;\n content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--pops-title-border-color);\n width: 100%;\n height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n color: var(--pops-title-color);\n width: 100%;\n overflow: hidden;\n text-indent: 15px;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n width: 100%;\n /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n flex: 1;\n overflow: auto;\n word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n color: var(--pops-content-color);\n padding: 5px 10px;\n text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n display: flex;\n padding: 10px 10px 10px 10px;\n width: 100%;\n height: var(--container-bottom-btn-height);\n max-height: var(--container-bottom-btn-height);\n line-height: normal;\n border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n text-align: right;\n align-items: center;\n}\n";
|
|
2825
2806
|
|
|
2826
|
-
var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n
|
|
2807
|
+
var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n position: fixed;\n top: 0;\n left: 0;\n}\n.pops[position=\"top\"] {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n.pops[position=\"top_right\"] {\n position: fixed;\n top: 0;\n right: 0;\n}\n.pops[position=\"center_left\"] {\n position: fixed;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n.pops[position=\"center\"] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.pops[position=\"center_right\"] {\n position: fixed;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.pops[position=\"bottom_left\"] {\n position: fixed;\n bottom: 0;\n left: 0;\n}\n.pops[position=\"bottom\"] {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 0);\n}\n.pops[position=\"bottom_right\"] {\n position: fixed;\n right: 0;\n bottom: 0;\n}\n";
|
|
2827
2808
|
|
|
2828
|
-
var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n
|
|
2809
|
+
var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n width: 6px;\n height: 0;\n}\n\n/* 滚动条轨道 */\n.pops ::-webkit-scrollbar-track {\n width: 0;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb {\n min-height: 28px;\n border-radius: 2em;\n background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\n background-clip: padding-box;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb:hover {\n background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\n}\n";
|
|
2829
2810
|
|
|
2830
|
-
var buttonCSS = ".pops {\n\t--button-font-size: 14px;\n\t--button-height: 32px;\n\t--button-color: rgb(51, 51, 51);\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n\t--button-margin-top: 0px;\n\t--button-margin-bottom: 0px;\n\t--button-margin-left: 5px;\n\t--button-margin-right: 5px;\n\t--button-padding-top: 6px;\n\t--button-padding-bottom: 6px;\n\t--button-padding-left: 12px;\n\t--button-padding-right: 12px;\n\t--button-radius: 4px;\n\n\t--container-title-height: 55px;\n\t--container-bottom-btn-height: 55px;\n\n\t/* default按钮 */\n\t--button-default-color: #333333;\n\t--button-default-bd-color: #dcdfe6;\n\t--button-default-bg-color: #ffffff;\n\t--button-default-active-color: #409eff;\n\t--button-default-active-bd-color: #409eff;\n\t--button-default-active-bg-color: #ecf5ff;\n\t--button-default-hover-color: #409eff;\n\t--button-default-hover-bd-color: #c6e2ff;\n\t--button-default-hover-bg-color: #ecf5ff;\n\t--button-default-focus-visible-outline-color: #a0cfff;\n\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t--button-default-focus-visible-outline-offset: 1px;\n\t--button-default-disabled-color: #a8abb2;\n\t--button-default-disabled-bd-color: #ffffff;\n\t--button-default-disabled-bg-color: #e4e7ed;\n\n\t/* primary按钮 */\n\t--button-primary-color: #ffffff;\n\t--button-primary-bd-color: #409eff;\n\t--button-primary-bg-color: #409eff;\n\t--button-primary-active-color: #ffffff;\n\t--button-primary-active-bd-color: #337ecc;\n\t--button-primary-active-bg-color: #337ecc;\n\t--button-primary-hover-color: #ffffff;\n\t--button-primary-hover-bd-color: #79bbff;\n\t--button-primary-hover-bg-color: #79bbff;\n\t--button-primary-focus-visible-outline-color: #a0cfff;\n\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t--button-primary-focus-visible-outline-offset: 1px;\n\t--button-primary-disabled-color: #ffffff80;\n\t--button-primary-disabled-bd-color: #a0cfff;\n\t--button-primary-disabled-bg-color: #a0cfff;\n\n\t/* success按钮 */\n\t--button-success-color: #ffffff;\n\t--button-success-bd-color: #4cae4c;\n\t--button-success-bg-color: #5cb85c;\n\t--button-success-active-color: #ffffff;\n\t--button-success-active-bd-color: #529b2e;\n\t--button-success-active-bg-color: #529b2e;\n\t--button-success-hover-color: #ffffff;\n\t--button-success-hover-bd-color: #95d475;\n\t--button-success-hover-bg-color: #95d475;\n\t--button-success-focus-visible-outline-color: #b3e19d;\n\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t--button-success-focus-visible-outline-offset: 1px;\n\t--button-success-disabled-color: #ffffff80;\n\t--button-success-disabled-bd-color: #b3e19d;\n\t--button-success-disabled-bg-color: #b3e19d;\n\n\t/* info按钮 */\n\t--button-info-color: #ffffff;\n\t--button-info-bd-color: #909399;\n\t--button-info-bg-color: #909399;\n\t--button-info-active-color: #ffffff;\n\t--button-info-active-bd-color: #73767a;\n\t--button-info-active-bg-color: #73767a;\n\t--button-info-hover-color: #ffffff;\n\t--button-info-hover-bd-color: #b1b3b8;\n\t--button-info-hover-bg-color: #b1b3b8;\n\t--button-info-focus-visible-outline-color: #c8c9cc;\n\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t--button-info-focus-visible-outline-offset: 1px;\n\t--button-info-disabled-color: #ffffff80;\n\t--button-info-disabled-bd-color: #c8c9cc;\n\t--button-info-disabled-bg-color: #c8c9cc;\n\n\t/* warning按钮 */\n\t--button-warning-color: #ffffff;\n\t--button-warning-bd-color: #e6a23c;\n\t--button-warning-bg-color: #e6a23c;\n\t--button-warning-active-color: #ffffff;\n\t--button-warning-active-bd-color: #b88230;\n\t--button-warning-active-bg-color: #b88230;\n\t--button-warning-hover-color: #ffffff80;\n\t--button-warning-hover-bd-color: #eebe77;\n\t--button-warning-hover-bg-color: #eebe77;\n\t--button-warning-focus-visible-outline-color: #f3d19e;\n\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t--button-warning-focus-visible-outline-offset: 1px;\n\t--button-warning-disabled-color: #ffffff80;\n\t--button-warning-disabled-bd-color: #f3d19e;\n\t--button-warning-disabled-bg-color: #f3d19e;\n\n\t/* danger按钮 */\n\t--button-danger-color: #ffffff;\n\t--button-danger-bd-color: #f56c6c;\n\t--button-danger-bg-color: #f56c6c;\n\t--button-danger-active-color: #ffffff;\n\t--button-danger-active-bd-color: #c45656;\n\t--button-danger-active-bg-color: #c45656;\n\t--button-danger-hover-color: #ffffff;\n\t--button-danger-hover-bd-color: #f89898;\n\t--button-danger-hover-bg-color: #f89898;\n\t--button-danger-focus-visible-outline-color: #fab6b6;\n\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t--button-danger-focus-visible-outline-offset: 1px;\n\t--button-danger-disabled-color: #ffffff80;\n\t--button-danger-disabled-bd-color: #fab6b6;\n\t--button-danger-disabled-bg-color: #fab6b6;\n\n\t/* xiaomi-primary按钮 */\n\t--button-xiaomi-primary-color: #ffffff;\n\t--button-xiaomi-primary-bd-color: #ff5c00;\n\t--button-xiaomi-primary-bg-color: #ff5c00;\n\t--button-xiaomi-primary-active-color: #ffffff;\n\t--button-xiaomi-primary-active-bd-color: #da4f00;\n\t--button-xiaomi-primary-active-bg-color: #da4f00;\n\t--button-xiaomi-primary-hover-color: #ffffff;\n\t--button-xiaomi-primary-hover-bd-color: #ff7e29;\n\t--button-xiaomi-primary-hover-bg-color: #ff7e29;\n\t--button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n\t--button-xiaomi-primary-focus-visible-outline: 2px solid\n\t\tvar(--button-xiaomi-primary-focus-visible-outline-color);\n\t--button-xiaomi-primary-focus-visible-outline-offset: 1px;\n\t--button-xiaomi-primary-disabled-color: #ffffff80;\n\t--button-xiaomi-primary-disabled-bd-color: #fad5b6;\n\t--button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n\t/* violet按钮 */\n\t--button-violet-color: #ffffff;\n\t--button-violet-bd-color: #626aef;\n\t--button-violet-bg-color: #626aef;\n\t--button-violet-active-color: #ffffff;\n\t--button-violet-active-bd-color: #8188f2;\n\t--button-violet-active-bg-color: #8188f2;\n\t--button-violet-hover-color: #ffffff;\n\t--button-violet-hover-bd-color: #4b50ad;\n\t--button-violet-hover-bg-color: #4b50ad;\n\t--button-violet-focus-visible-outline-color: #2a598a;\n\t--button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n\t--button-violet-focus-visible-outline-offset: 1px;\n\t--button-violet-disabled-color: #ffffff80;\n\t--button-violet-disabled-bd-color: #3b3f82;\n\t--button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.pops {\n\t\t/* default按钮 */\n\t\t--button-default-color: #cfd3dc;\n\t\t--button-default-bd-color: #4c4d4f;\n\t\t--button-default-bg-color: transparent;\n\t\t--button-default-active-color: #409eff;\n\t\t--button-default-active-bd-color: #409eff;\n\t\t--button-default-active-bg-color: #18222c;\n\t\t--button-default-hover-color: #409eff;\n\t\t--button-default-hover-bd-color: #213d5b;\n\t\t--button-default-hover-bg-color: #18222c;\n\t\t--button-default-focus-visible-outline-color: #2a598a;\n\t\t--button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n\t\t--button-default-focus-visible-outline-offset: 1px;\n\t\t--button-default-disabled-color: #ffffff80;\n\t\t--button-default-disabled-bd-color: #414243;\n\t\t--button-default-disabled-bg-color: transparent;\n\n\t\t/* primary按钮 */\n\t\t--button-primary-color: #ffffff;\n\t\t--button-primary-bd-color: #409eff;\n\t\t--button-primary-bg-color: #409eff;\n\t\t--button-primary-active-color: #ffffff;\n\t\t--button-primary-active-bd-color: #66b1ff;\n\t\t--button-primary-active-bg-color: #66b1ff;\n\t\t--button-primary-hover-color: #ffffff;\n\t\t--button-primary-hover-bd-color: #3375b9;\n\t\t--button-primary-hover-bg-color: #3375b9;\n\t\t--button-primary-focus-visible-outline-color: #2a598a;\n\t\t--button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n\t\t--button-primary-focus-visible-outline-offset: 1px;\n\t\t--button-primary-disabled-color: #ffffff80;\n\t\t--button-primary-disabled-bd-color: #2a598a;\n\t\t--button-primary-disabled-bg-color: #2a598a;\n\n\t\t/* success按钮 */\n\t\t--button-success-color: #ffffff;\n\t\t--button-success-bd-color: #67c23a;\n\t\t--button-success-bg-color: #67c23a;\n\t\t--button-success-active-color: #ffffff;\n\t\t--button-success-active-bd-color: #85ce61;\n\t\t--button-success-active-bg-color: #85ce61;\n\t\t--button-success-hover-color: #ffffff;\n\t\t--button-success-hover-bd-color: #4e8e2f;\n\t\t--button-success-hover-bg-color: #4e8e2f;\n\t\t--button-success-focus-visible-outline-color: #3e6b27;\n\t\t--button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n\t\t--button-success-focus-visible-outline-offset: 1px;\n\t\t--button-success-disabled-color: #ffffff80;\n\t\t--button-success-disabled-bd-color: #3e6b27;\n\t\t--button-success-disabled-bg-color: #3e6b27;\n\n\t\t/* info按钮 */\n\t\t--button-info-color: #ffffff;\n\t\t--button-info-bd-color: #909399;\n\t\t--button-info-bg-color: #909399;\n\t\t--button-info-active-color: #ffffff;\n\t\t--button-info-active-bd-color: #a6a9ad;\n\t\t--button-info-active-bg-color: #a6a9ad;\n\t\t--button-info-hover-color: #ffffff;\n\t\t--button-info-hover-bd-color: #6b6d71;\n\t\t--button-info-hover-bg-color: #6b6d71;\n\t\t--button-info-focus-visible-outline-color: #525457;\n\t\t--button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n\t\t--button-info-focus-visible-outline-offset: 1px;\n\t\t--button-info-disabled-color: #ffffff80;\n\t\t--button-info-disabled-bd-color: #525457;\n\t\t--button-info-disabled-bg-color: #525457;\n\n\t\t/* warning按钮 */\n\t\t--button-warning-color: #ffffff;\n\t\t--button-warning-bd-color: #e6a23c;\n\t\t--button-warning-bg-color: #e6a23c;\n\t\t--button-warning-active-color: #ffffff;\n\t\t--button-warning-active-bd-color: #ebb563;\n\t\t--button-warning-active-bg-color: #ebb563;\n\t\t--button-warning-hover-color: #ffffff80;\n\t\t--button-warning-hover-bd-color: #a77730;\n\t\t--button-warning-hover-bg-color: #a77730;\n\t\t--button-warning-focus-visible-outline-color: #7d5b28;\n\t\t--button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n\t\t--button-warning-focus-visible-outline-offset: 1px;\n\t\t--button-warning-disabled-color: #ffffff80;\n\t\t--button-warning-disabled-bd-color: #7d5b28;\n\t\t--button-warning-disabled-bg-color: #7d5b28;\n\n\t\t/* danger按钮 */\n\t\t--button-danger-color: #ffffff;\n\t\t--button-danger-bd-color: #f56c6c;\n\t\t--button-danger-bg-color: #f56c6c;\n\t\t--button-danger-active-color: #ffffff;\n\t\t--button-danger-active-bd-color: #f78989;\n\t\t--button-danger-active-bg-color: #f78989;\n\t\t--button-danger-hover-color: #ffffff;\n\t\t--button-danger-hover-bd-color: #b25252;\n\t\t--button-danger-hover-bg-color: #b25252;\n\t\t--button-danger-focus-visible-outline-color: #854040;\n\t\t--button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n\t\t--button-danger-focus-visible-outline-offset: 1px;\n\t\t--button-danger-disabled-color: #ffffff80;\n\t\t--button-danger-disabled-bd-color: #854040;\n\t\t--button-danger-disabled-bg-color: #854040;\n\t}\n}\n.pops[data-bottom-btn=\"false\"] {\n\t--container-bottom-btn-height: 0px;\n}\n.pops button {\n\twhite-space: nowrap;\n\tfloat: right;\n\tdisplay: inline-block;\n\tmargin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom)\n\t\tvar(--button-margin-left);\n\tpadding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom)\n\t\tvar(--button-padding-left);\n\toutline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n\tdisplay: none;\n}\n.pops button {\n\tborder-radius: var(--button-radius);\n\tbox-shadow: none;\n\tfont-weight: 400;\n\tfont-size: var(--button-font-size);\n\tcursor: pointer;\n\ttransition: all 0.3s ease-in-out;\n}\n.pops button {\n\tdisplay: flex;\n\talign-items: center;\n\theight: var(--button-height);\n\tline-height: normal;\n\tbox-sizing: border-box;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tborder: 1px solid var(--button-bd-color);\n}\n.pops button {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:active {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n\toutline: 0;\n}\n.pops button:hover {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button:disabled {\n\tcursor: not-allowed;\n\tcolor: var(--button-color);\n\tborder-color: var(--button-bd-color);\n\tbackground-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n\t--button-height: 32px;\n\t--button-padding-top: 12px;\n\t--button-padding-bottom: 12px;\n\t--button-padding-left: 19px;\n\t--button-padding-right: 19px;\n\t--button-font-size: 14px;\n\t--button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n\t--button-height: 24px;\n\t--button-padding-top: 5px;\n\t--button-padding-bottom: 5px;\n\t--button-padding-left: 11px;\n\t--button-padding-right: 11px;\n\t--button-font-size: 12px;\n\t--button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n\tdisplay: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n\tflex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n\tmargin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n\t--button-color: var(--button-default-color);\n\t--button-bd-color: var(--button-default-bd-color);\n\t--button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n\t--button-color: var(--button-default-active-color);\n\t--button-bd-color: var(--button-default-active-bd-color);\n\t--button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n\t--button-color: var(--button-default-hover-color);\n\t--button-bd-color: var(--button-default-hover-bd-color);\n\t--button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n\toutline: var(--button-default-focus-visible-outline);\n\toutline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n\t--button-color: var(--button-default-disabled-color);\n\t--button-bd-color: var(--button-default-disabled-bd-color);\n\t--button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n\t--button-color: var(--button-primary-color);\n\t--button-bd-color: var(--button-primary-bd-color);\n\t--button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n\t--button-color: var(--button-primary-active-color);\n\t--button-bd-color: var(--button-primary-active-bd-color);\n\t--button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n\t--button-color: var(--button-primary-hover-color);\n\t--button-bd-color: var(--button-primary-hover-bd-color);\n\t--button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n\toutline: var(--button-primary-focus-visible-outline);\n\toutline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n\t--button-color: var(--button-primary-disabled-color);\n\t--button-bd-color: var(--button-primary-disabled-bd-color);\n\t--button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n\t--button-color: var(--button-success-color);\n\t--button-bd-color: var(--button-success-bd-color);\n\t--button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n\t--button-color: var(--button-success-active-color);\n\t--button-bd-color: var(--button-success-active-bd-color);\n\t--button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n\t--button-color: var(--button-success-hover-color);\n\t--button-bd-color: var(--button-success-hover-bd-color);\n\t--button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n\toutline: var(--button-success-focus-visible-outline);\n\toutline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n\t--button-color: var(--button-success-disabled-color);\n\t--button-bd-color: var(--button-success-disabled-bd-color);\n\t--button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n\t--button-color: var(--button-info-color);\n\t--button-bd-color: var(--button-info-bd-color);\n\t--button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n\t--button-color: var(--button-info-active-color);\n\t--button-bd-color: var(--button-info-active-bd-color);\n\t--button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n\t--button-color: var(--button-info-hover-color);\n\t--button-bd-color: var(--button-info-hover-bd-color);\n\t--button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n\toutline: var(--button-info-focus-visible-outline);\n\toutline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n\t--button-color: var(--button-info-disabled-color);\n\t--button-bd-color: var(--button-info-disabled-bd-color);\n\t--button-bg-color: var(--button-info-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n\t--button-color: var(--button-warning-color);\n\t--button-bd-color: var(--button-warning-bd-color);\n\t--button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n\t--button-color: var(--button-warning-active-color);\n\t--button-bd-color: var(--button-warning-active-bd-color);\n\t--button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n\t--button-color: var(--button-warning-hover-color);\n\t--button-bd-color: var(--button-warning-hover-bd-color);\n\t--button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n\toutline: var(--button-warning-focus-visible-outline);\n\toutline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n\t--button-color: var(--button-warning-disabled-color);\n\t--button-bd-color: var(--button-warning-disabled-bd-color);\n\t--button-bg-color: var(--button-warning-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n\t--button-color: var(--button-danger-color);\n\t--button-bd-color: var(--button-danger-bd-color);\n\t--button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n\t--button-color: var(--button-danger-active-color);\n\t--button-bd-color: var(--button-danger-active-bd-color);\n\t--button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n\t--button-color: var(--button-danger-hover-color);\n\t--button-bd-color: var(--button-danger-hover-bd-color);\n\t--button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n\toutline: var(--button-danger-focus-visible-outline);\n\toutline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n\t--button-color: var(--button-danger-disabled-color);\n\t--button-bd-color: var(--button-danger-disabled-bd-color);\n\t--button-bg-color: var(--button-danger-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n\t--button-color: var(--button-xiaomi-primary-color);\n\t--button-bd-color: var(--button-xiaomi-primary-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n\t--button-color: var(--button-xiaomi-primary-active-color);\n\t--button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n\t--button-color: var(--button-xiaomi-primary-hover-color);\n\t--button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n\toutline: var(--button-xiaomi-primary-focus-visible-outline);\n\toutline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n\t--button-color: var(--button-xiaomi-primary-disabled-color);\n\t--button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\n\t--button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"violet\"] {\n\t--button-color: var(--button-violet-color);\n\t--button-bd-color: var(--button-violet-bd-color);\n\t--button-bg-color: var(--button-violet-bg-color);\n}\n.pops button[data-type=\"violet\"]:active {\n\t--button-color: var(--button-violet-active-color);\n\t--button-bd-color: var(--button-violet-active-bd-color);\n\t--button-bg-color: var(--button-violet-active-bg-color);\n}\n.pops button[data-type=\"violet\"]:hover {\n\t--button-color: var(--button-violet-hover-color);\n\t--button-bd-color: var(--button-violet-hover-bd-color);\n\t--button-bg-color: var(--button-violet-hover-bg-color);\n}\n.pops button[data-type=\"violet\"]:focus-visible {\n\toutline: var(--button-violet-focus-visible-outline);\n\toutline-offset: var(--button-violet-focus-visible-outline-offset);\n}\n.pops button[data-type=\"violet\"]:disabled {\n\t--button-color: var(--button-violet-disabled-color);\n\t--button-bd-color: var(--button-violet-disabled-bd-color);\n\t--button-bg-color: var(--button-violet-disabled-bg-color);\n}\n";
|
|
2811
|
+
var buttonCSS = ".pops {\n --button-font-size: 14px;\n --button-height: 32px;\n --button-color: rgb(51, 51, 51);\n --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --button-margin-top: 0px;\n --button-margin-bottom: 0px;\n --button-margin-left: 5px;\n --button-margin-right: 5px;\n --button-padding-top: 6px;\n --button-padding-bottom: 6px;\n --button-padding-left: 12px;\n --button-padding-right: 12px;\n --button-radius: 4px;\n\n --container-title-height: 55px;\n --container-bottom-btn-height: 55px;\n\n /* default按钮 */\n --button-default-color: #333333;\n --button-default-bd-color: #dcdfe6;\n --button-default-bg-color: #ffffff;\n --button-default-active-color: #409eff;\n --button-default-active-bd-color: #409eff;\n --button-default-active-bg-color: #ecf5ff;\n --button-default-hover-color: #409eff;\n --button-default-hover-bd-color: #c6e2ff;\n --button-default-hover-bg-color: #ecf5ff;\n --button-default-focus-visible-outline-color: #a0cfff;\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n --button-default-focus-visible-outline-offset: 1px;\n --button-default-disabled-color: #a8abb2;\n --button-default-disabled-bd-color: #ffffff;\n --button-default-disabled-bg-color: #e4e7ed;\n\n /* primary按钮 */\n --button-primary-color: #ffffff;\n --button-primary-bd-color: #409eff;\n --button-primary-bg-color: #409eff;\n --button-primary-active-color: #ffffff;\n --button-primary-active-bd-color: #337ecc;\n --button-primary-active-bg-color: #337ecc;\n --button-primary-hover-color: #ffffff;\n --button-primary-hover-bd-color: #79bbff;\n --button-primary-hover-bg-color: #79bbff;\n --button-primary-focus-visible-outline-color: #a0cfff;\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n --button-primary-focus-visible-outline-offset: 1px;\n --button-primary-disabled-color: #ffffff80;\n --button-primary-disabled-bd-color: #a0cfff;\n --button-primary-disabled-bg-color: #a0cfff;\n\n /* success按钮 */\n --button-success-color: #ffffff;\n --button-success-bd-color: #4cae4c;\n --button-success-bg-color: #5cb85c;\n --button-success-active-color: #ffffff;\n --button-success-active-bd-color: #529b2e;\n --button-success-active-bg-color: #529b2e;\n --button-success-hover-color: #ffffff;\n --button-success-hover-bd-color: #95d475;\n --button-success-hover-bg-color: #95d475;\n --button-success-focus-visible-outline-color: #b3e19d;\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n --button-success-focus-visible-outline-offset: 1px;\n --button-success-disabled-color: #ffffff80;\n --button-success-disabled-bd-color: #b3e19d;\n --button-success-disabled-bg-color: #b3e19d;\n\n /* info按钮 */\n --button-info-color: #ffffff;\n --button-info-bd-color: #909399;\n --button-info-bg-color: #909399;\n --button-info-active-color: #ffffff;\n --button-info-active-bd-color: #73767a;\n --button-info-active-bg-color: #73767a;\n --button-info-hover-color: #ffffff;\n --button-info-hover-bd-color: #b1b3b8;\n --button-info-hover-bg-color: #b1b3b8;\n --button-info-focus-visible-outline-color: #c8c9cc;\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n --button-info-focus-visible-outline-offset: 1px;\n --button-info-disabled-color: #ffffff80;\n --button-info-disabled-bd-color: #c8c9cc;\n --button-info-disabled-bg-color: #c8c9cc;\n\n /* warning按钮 */\n --button-warning-color: #ffffff;\n --button-warning-bd-color: #e6a23c;\n --button-warning-bg-color: #e6a23c;\n --button-warning-active-color: #ffffff;\n --button-warning-active-bd-color: #b88230;\n --button-warning-active-bg-color: #b88230;\n --button-warning-hover-color: #ffffff80;\n --button-warning-hover-bd-color: #eebe77;\n --button-warning-hover-bg-color: #eebe77;\n --button-warning-focus-visible-outline-color: #f3d19e;\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n --button-warning-focus-visible-outline-offset: 1px;\n --button-warning-disabled-color: #ffffff80;\n --button-warning-disabled-bd-color: #f3d19e;\n --button-warning-disabled-bg-color: #f3d19e;\n\n /* danger按钮 */\n --button-danger-color: #ffffff;\n --button-danger-bd-color: #f56c6c;\n --button-danger-bg-color: #f56c6c;\n --button-danger-active-color: #ffffff;\n --button-danger-active-bd-color: #c45656;\n --button-danger-active-bg-color: #c45656;\n --button-danger-hover-color: #ffffff;\n --button-danger-hover-bd-color: #f89898;\n --button-danger-hover-bg-color: #f89898;\n --button-danger-focus-visible-outline-color: #fab6b6;\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n --button-danger-focus-visible-outline-offset: 1px;\n --button-danger-disabled-color: #ffffff80;\n --button-danger-disabled-bd-color: #fab6b6;\n --button-danger-disabled-bg-color: #fab6b6;\n\n /* xiaomi-primary按钮 */\n --button-xiaomi-primary-color: #ffffff;\n --button-xiaomi-primary-bd-color: #ff5c00;\n --button-xiaomi-primary-bg-color: #ff5c00;\n --button-xiaomi-primary-active-color: #ffffff;\n --button-xiaomi-primary-active-bd-color: #da4f00;\n --button-xiaomi-primary-active-bg-color: #da4f00;\n --button-xiaomi-primary-hover-color: #ffffff;\n --button-xiaomi-primary-hover-bd-color: #ff7e29;\n --button-xiaomi-primary-hover-bg-color: #ff7e29;\n --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\n --button-xiaomi-primary-focus-visible-outline-offset: 1px;\n --button-xiaomi-primary-disabled-color: #ffffff80;\n --button-xiaomi-primary-disabled-bd-color: #fad5b6;\n --button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n /* violet按钮 */\n --button-violet-color: #ffffff;\n --button-violet-bd-color: #626aef;\n --button-violet-bg-color: #626aef;\n --button-violet-active-color: #ffffff;\n --button-violet-active-bd-color: #8188f2;\n --button-violet-active-bg-color: #8188f2;\n --button-violet-hover-color: #ffffff;\n --button-violet-hover-bd-color: #4b50ad;\n --button-violet-hover-bg-color: #4b50ad;\n --button-violet-focus-visible-outline-color: #2a598a;\n --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n --button-violet-focus-visible-outline-offset: 1px;\n --button-violet-disabled-color: #ffffff80;\n --button-violet-disabled-bd-color: #3b3f82;\n --button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops {\n /* default按钮 */\n --button-default-color: #cfd3dc;\n --button-default-bd-color: #4c4d4f;\n --button-default-bg-color: transparent;\n --button-default-active-color: #409eff;\n --button-default-active-bd-color: #409eff;\n --button-default-active-bg-color: #18222c;\n --button-default-hover-color: #409eff;\n --button-default-hover-bd-color: #213d5b;\n --button-default-hover-bg-color: #18222c;\n --button-default-focus-visible-outline-color: #2a598a;\n --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n --button-default-focus-visible-outline-offset: 1px;\n --button-default-disabled-color: #ffffff80;\n --button-default-disabled-bd-color: #414243;\n --button-default-disabled-bg-color: transparent;\n\n /* primary按钮 */\n --button-primary-color: #ffffff;\n --button-primary-bd-color: #409eff;\n --button-primary-bg-color: #409eff;\n --button-primary-active-color: #ffffff;\n --button-primary-active-bd-color: #66b1ff;\n --button-primary-active-bg-color: #66b1ff;\n --button-primary-hover-color: #ffffff;\n --button-primary-hover-bd-color: #3375b9;\n --button-primary-hover-bg-color: #3375b9;\n --button-primary-focus-visible-outline-color: #2a598a;\n --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n --button-primary-focus-visible-outline-offset: 1px;\n --button-primary-disabled-color: #ffffff80;\n --button-primary-disabled-bd-color: #2a598a;\n --button-primary-disabled-bg-color: #2a598a;\n\n /* success按钮 */\n --button-success-color: #ffffff;\n --button-success-bd-color: #67c23a;\n --button-success-bg-color: #67c23a;\n --button-success-active-color: #ffffff;\n --button-success-active-bd-color: #85ce61;\n --button-success-active-bg-color: #85ce61;\n --button-success-hover-color: #ffffff;\n --button-success-hover-bd-color: #4e8e2f;\n --button-success-hover-bg-color: #4e8e2f;\n --button-success-focus-visible-outline-color: #3e6b27;\n --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n --button-success-focus-visible-outline-offset: 1px;\n --button-success-disabled-color: #ffffff80;\n --button-success-disabled-bd-color: #3e6b27;\n --button-success-disabled-bg-color: #3e6b27;\n\n /* info按钮 */\n --button-info-color: #ffffff;\n --button-info-bd-color: #909399;\n --button-info-bg-color: #909399;\n --button-info-active-color: #ffffff;\n --button-info-active-bd-color: #a6a9ad;\n --button-info-active-bg-color: #a6a9ad;\n --button-info-hover-color: #ffffff;\n --button-info-hover-bd-color: #6b6d71;\n --button-info-hover-bg-color: #6b6d71;\n --button-info-focus-visible-outline-color: #525457;\n --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n --button-info-focus-visible-outline-offset: 1px;\n --button-info-disabled-color: #ffffff80;\n --button-info-disabled-bd-color: #525457;\n --button-info-disabled-bg-color: #525457;\n\n /* warning按钮 */\n --button-warning-color: #ffffff;\n --button-warning-bd-color: #e6a23c;\n --button-warning-bg-color: #e6a23c;\n --button-warning-active-color: #ffffff;\n --button-warning-active-bd-color: #ebb563;\n --button-warning-active-bg-color: #ebb563;\n --button-warning-hover-color: #ffffff80;\n --button-warning-hover-bd-color: #a77730;\n --button-warning-hover-bg-color: #a77730;\n --button-warning-focus-visible-outline-color: #7d5b28;\n --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n --button-warning-focus-visible-outline-offset: 1px;\n --button-warning-disabled-color: #ffffff80;\n --button-warning-disabled-bd-color: #7d5b28;\n --button-warning-disabled-bg-color: #7d5b28;\n\n /* danger按钮 */\n --button-danger-color: #ffffff;\n --button-danger-bd-color: #f56c6c;\n --button-danger-bg-color: #f56c6c;\n --button-danger-active-color: #ffffff;\n --button-danger-active-bd-color: #f78989;\n --button-danger-active-bg-color: #f78989;\n --button-danger-hover-color: #ffffff;\n --button-danger-hover-bd-color: #b25252;\n --button-danger-hover-bg-color: #b25252;\n --button-danger-focus-visible-outline-color: #854040;\n --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n --button-danger-focus-visible-outline-offset: 1px;\n --button-danger-disabled-color: #ffffff80;\n --button-danger-disabled-bd-color: #854040;\n --button-danger-disabled-bg-color: #854040;\n }\n}\n.pops[data-bottom-btn=\"false\"] {\n --container-bottom-btn-height: 0px;\n}\n.pops button {\n white-space: nowrap;\n float: right;\n display: inline-block;\n margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\n padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\n outline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n display: none;\n}\n.pops button {\n border-radius: var(--button-radius);\n box-shadow: none;\n font-weight: 400;\n font-size: var(--button-font-size);\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\n.pops button {\n display: flex;\n align-items: center;\n height: var(--button-height);\n line-height: normal;\n box-sizing: border-box;\n border: 1px solid var(--button-bd-color);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops button {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:active {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n outline: 0;\n}\n.pops button:hover {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button:disabled {\n cursor: not-allowed;\n color: var(--button-color);\n border-color: var(--button-bd-color);\n background-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n --button-height: 32px;\n --button-padding-top: 12px;\n --button-padding-bottom: 12px;\n --button-padding-left: 19px;\n --button-padding-right: 19px;\n --button-font-size: 14px;\n --button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n --button-height: 24px;\n --button-padding-top: 5px;\n --button-padding-bottom: 5px;\n --button-padding-left: 11px;\n --button-padding-right: 11px;\n --button-font-size: 12px;\n --button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n display: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n flex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n margin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n --button-color: var(--button-default-color);\n --button-bd-color: var(--button-default-bd-color);\n --button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n --button-color: var(--button-default-active-color);\n --button-bd-color: var(--button-default-active-bd-color);\n --button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n --button-color: var(--button-default-hover-color);\n --button-bd-color: var(--button-default-hover-bd-color);\n --button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n outline: var(--button-default-focus-visible-outline);\n outline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n --button-color: var(--button-default-disabled-color);\n --button-bd-color: var(--button-default-disabled-bd-color);\n --button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n --button-color: var(--button-primary-color);\n --button-bd-color: var(--button-primary-bd-color);\n --button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n --button-color: var(--button-primary-active-color);\n --button-bd-color: var(--button-primary-active-bd-color);\n --button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n --button-color: var(--button-primary-hover-color);\n --button-bd-color: var(--button-primary-hover-bd-color);\n --button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n outline: var(--button-primary-focus-visible-outline);\n outline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n --button-color: var(--button-primary-disabled-color);\n --button-bd-color: var(--button-primary-disabled-bd-color);\n --button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n --button-color: var(--button-success-color);\n --button-bd-color: var(--button-success-bd-color);\n --button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n --button-color: var(--button-success-active-color);\n --button-bd-color: var(--button-success-active-bd-color);\n --button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n --button-color: var(--button-success-hover-color);\n --button-bd-color: var(--button-success-hover-bd-color);\n --button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n outline: var(--button-success-focus-visible-outline);\n outline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n --button-color: var(--button-success-disabled-color);\n --button-bd-color: var(--button-success-disabled-bd-color);\n --button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n --button-color: var(--button-info-color);\n --button-bd-color: var(--button-info-bd-color);\n --button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n --button-color: var(--button-info-active-color);\n --button-bd-color: var(--button-info-active-bd-color);\n --button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n --button-color: var(--button-info-hover-color);\n --button-bd-color: var(--button-info-hover-bd-color);\n --button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n outline: var(--button-info-focus-visible-outline);\n outline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n --button-color: var(--button-info-disabled-color);\n --button-bd-color: var(--button-info-disabled-bd-color);\n --button-bg-color: var(--button-info-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n --button-color: var(--button-warning-color);\n --button-bd-color: var(--button-warning-bd-color);\n --button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n --button-color: var(--button-warning-active-color);\n --button-bd-color: var(--button-warning-active-bd-color);\n --button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n --button-color: var(--button-warning-hover-color);\n --button-bd-color: var(--button-warning-hover-bd-color);\n --button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n outline: var(--button-warning-focus-visible-outline);\n outline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n --button-color: var(--button-warning-disabled-color);\n --button-bd-color: var(--button-warning-disabled-bd-color);\n --button-bg-color: var(--button-warning-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n --button-color: var(--button-danger-color);\n --button-bd-color: var(--button-danger-bd-color);\n --button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n --button-color: var(--button-danger-active-color);\n --button-bd-color: var(--button-danger-active-bd-color);\n --button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n --button-color: var(--button-danger-hover-color);\n --button-bd-color: var(--button-danger-hover-bd-color);\n --button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n outline: var(--button-danger-focus-visible-outline);\n outline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n --button-color: var(--button-danger-disabled-color);\n --button-bd-color: var(--button-danger-disabled-bd-color);\n --button-bg-color: var(--button-danger-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n --button-color: var(--button-xiaomi-primary-color);\n --button-bd-color: var(--button-xiaomi-primary-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n --button-color: var(--button-xiaomi-primary-active-color);\n --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n --button-color: var(--button-xiaomi-primary-hover-color);\n --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n outline: var(--button-xiaomi-primary-focus-visible-outline);\n outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n --button-color: var(--button-xiaomi-primary-disabled-color);\n --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\n --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"violet\"] {\n --button-color: var(--button-violet-color);\n --button-bd-color: var(--button-violet-bd-color);\n --button-bg-color: var(--button-violet-bg-color);\n}\n.pops button[data-type=\"violet\"]:active {\n --button-color: var(--button-violet-active-color);\n --button-bd-color: var(--button-violet-active-bd-color);\n --button-bg-color: var(--button-violet-active-bg-color);\n}\n.pops button[data-type=\"violet\"]:hover {\n --button-color: var(--button-violet-hover-color);\n --button-bd-color: var(--button-violet-hover-bd-color);\n --button-bg-color: var(--button-violet-hover-bg-color);\n}\n.pops button[data-type=\"violet\"]:focus-visible {\n outline: var(--button-violet-focus-visible-outline);\n outline-offset: var(--button-violet-focus-visible-outline-offset);\n}\n.pops button[data-type=\"violet\"]:disabled {\n --button-color: var(--button-violet-disabled-color);\n --button-bd-color: var(--button-violet-disabled-bd-color);\n --button-bg-color: var(--button-violet-disabled-bg-color);\n}\n";
|
|
2831
2812
|
|
|
2832
|
-
var commonCSS = ".pops-flex-items-center {\n
|
|
2813
|
+
var commonCSS = ".pops-flex-items-center {\n display: flex;\n align-items: center;\n}\n.pops-flex-y-center {\n display: flex;\n justify-content: space-between;\n}\n.pops-flex-x-center {\n display: flex;\n align-content: center;\n}\n.pops-hide {\n display: none;\n}\n.pops-hide-important {\n display: none !important;\n}\n.pops-no-border {\n border: 0;\n}\n.pops-no-border-important {\n border: 0 !important;\n}\n.pops-user-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-line-height-center {\n line-height: normal;\n align-content: center;\n}\n.pops-width-fill {\n width: -webkit-fill-available;\n width: -moz-available;\n}\n.pops-text-is-disabled {\n --pops-text-is-disabled-color: #a8abb2;\n color: var(--pops-text-is-disabled-color);\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\n}\n.pops-text-is-disabled-important {\n --pops-text-is-disabled-color: #a8abb2;\n color: var(--pops-text-is-disabled-color) !important;\n --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\n}\n";
|
|
2833
2814
|
|
|
2834
|
-
var animCSS = "@keyframes rotating {\n\t0% {\n\t\ttransform: rotate(0);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n@keyframes iframeLoadingChange_85 {\n\t0% {\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n\t}\n\t20% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n\t}\n\t40% {\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n\t}\n\t60% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n\t}\n\t80% {\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n\t}\n\t100% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n\t}\n\tfrom {\n\t\twidth: 75%;\n\t}\n\tto {\n\t\twidth: 100%;\n\t}\n}\n@keyframes iframeLoadingChange {\n\t0% {\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n\t}\n\t20% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n\t}\n\t40% {\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n\t}\n\t60% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n\t}\n\t80% {\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n\t}\n\t100% {\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n\t}\n\tfrom {\n\t\twidth: 0;\n\t}\n\tto {\n\t\twidth: 75%;\n\t}\n}\n\n@keyframes searchSelectFalIn {\n\tfrom {\n\t\topacity: 0;\n\t\tdisplay: none;\n\t}\n\tto {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n}\n@keyframes searchSelectFalOut {\n\tfrom {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n\tto {\n\t\topacity: 0;\n\t\tdisplay: none;\n\t}\n}\n\n@keyframes pops-anim-wait-rotate {\n\tform {\n\t\ttransform: rotate(0);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n@keyframes pops-anim-spread {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scaleX(0);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scaleX(1);\n\t}\n}\n@keyframes pops-anim-shake {\n\t0%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\t10%,\n\t30%,\n\t50%,\n\t70%,\n\t90% {\n\t\ttransform: translateX(-10px);\n\t}\n\t20%,\n\t40%,\n\t60%,\n\t80% {\n\t\ttransform: translateX(10px);\n\t}\n}\n@keyframes pops-anim-rolling-left {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(-100%) rotate(-120deg);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0) rotate(0);\n\t}\n}\n@keyframes pops-anim-rolling-right {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(100%) rotate(120deg);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0) rotate(0);\n\t}\n}\n@keyframes pops-anim-slide-top {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateY(-200%);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n@keyframes pops-anim-slide-bottom {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateY(200%);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n@keyframes pops-anim-slide-left {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(-200%);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-anim-slide-right {\n\t0% {\n\t\ttransform: translateX(200%);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-anim-fadein {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n@keyframes pops-anim-fadein-zoom {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(0.5);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes pops-anim-fadein-alert {\n\t0% {\n\t\ttransform: scale(0.5);\n\t}\n\t45% {\n\t\ttransform: scale(1.05);\n\t}\n\t80% {\n\t\ttransform: scale(0.95);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes pops-anim-don {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t2.08333% {\n\t\ttransform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t4.16667% {\n\t\ttransform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t6.25% {\n\t\ttransform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t8.33333% {\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t10.4167% {\n\t\ttransform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t12.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t14.5833% {\n\t\ttransform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t16.6667% {\n\t\ttransform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t18.75% {\n\t\ttransform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t20.8333% {\n\t\ttransform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t22.9167% {\n\t\ttransform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t25% {\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t27.0833% {\n\t\ttransform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t29.1667% {\n\t\ttransform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t31.25% {\n\t\ttransform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t33.3333% {\n\t\ttransform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t35.4167% {\n\t\ttransform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t37.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t39.5833% {\n\t\ttransform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t41.6667% {\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t43.75% {\n\t\ttransform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t45.8333% {\n\t\ttransform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t47.9167% {\n\t\ttransform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t50% {\n\t\topacity: 1;\n\t\ttransform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t52.0833% {\n\t\ttransform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t54.1667% {\n\t\ttransform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t56.25% {\n\t\ttransform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t58.3333% {\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t60.4167% {\n\t\ttransform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t62.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t64.5833% {\n\t\ttransform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t66.6667% {\n\t\ttransform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t68.75% {\n\t\ttransform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t70.8333% {\n\t\ttransform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t72.9167% {\n\t\ttransform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t75% {\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t77.0833% {\n\t\ttransform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t79.1667% {\n\t\ttransform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t81.25% {\n\t\ttransform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t83.3333% {\n\t\ttransform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t85.4167% {\n\t\ttransform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t87.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t89.5833% {\n\t\ttransform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t91.6667% {\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t93.75% {\n\t\ttransform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t95.8333% {\n\t\ttransform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t97.9167% {\n\t\ttransform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n}\n@keyframes pops-anim-roll {\n\t0% {\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n\t}\n\t100% {\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n\t}\n}\n@keyframes pops-anim-sandra {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale3d(1.1, 1.1, 1);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scale3d(1, 1, 1);\n\t}\n}\n@keyframes pops-anim-gather {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(5, 0);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: scale(1, 1);\n\t}\n}\n@keyframes pops-anim-spread-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: scaleX(1);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scaleX(0);\n\t}\n}\n@keyframes pops-anim-shake-reverse {\n\t0%,\n\t100% {\n\t\ttransform: translateX(10px);\n\t}\n\t10%,\n\t30%,\n\t50%,\n\t70%,\n\t90% {\n\t\ttransform: translateX(-10px);\n\t}\n\t20%,\n\t40%,\n\t60%,\n\t80% {\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-anim-rolling-left-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0) rotate(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateX(-100%) rotate(-120deg);\n\t}\n}\n@keyframes pops-anim-rolling-right-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0) rotate(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateX(100%) rotate(120deg);\n\t}\n}\n@keyframes pops-anim-slide-top-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateY(-200%);\n\t}\n}\n@keyframes pops-anim-slide-bottom-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateY(200%);\n\t}\n}\n@keyframes pops-anim-slide-left-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateX(-200%);\n\t}\n}\n@keyframes pops-anim-slide-right-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(200%);\n\t}\n}\n@keyframes pops-anim-fadein-reverse {\n\t0% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n@keyframes pops-anim-fadein-zoom-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(0.5);\n\t}\n}\n@keyframes pops-anim-fadein-alert-reverse {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t45% {\n\t\ttransform: scale(0.95);\n\t}\n\t80% {\n\t\ttransform: scale(1.05);\n\t}\n\t100% {\n\t\ttransform: scale(0.5);\n\t}\n}\n@keyframes pops-anim-don-reverse {\n\t100% {\n\t\topacity: 0;\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t97.9167% {\n\t\ttransform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t95.8333% {\n\t\ttransform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t93.75% {\n\t\ttransform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t91.6667% {\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t89.5833% {\n\t\ttransform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t87.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t85.4167% {\n\t\ttransform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t83.3333% {\n\t\ttransform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t81.25% {\n\t\ttransform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t79.1667% {\n\t\ttransform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t77.0833% {\n\t\ttransform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t75% {\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t72.9167% {\n\t\ttransform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t70.8333% {\n\t\ttransform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t68.75% {\n\t\ttransform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t66.6667% {\n\t\ttransform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t64.5833% {\n\t\ttransform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t62.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t60.4167% {\n\t\ttransform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t58.3333% {\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t56.25% {\n\t\ttransform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t54.1667% {\n\t\ttransform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t52.0833% {\n\t\ttransform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t50% {\n\t\topacity: 1;\n\t\ttransform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t47.9167% {\n\t\ttransform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t45.8333% {\n\t\ttransform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t43.75% {\n\t\ttransform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t41.6667% {\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t39.5833% {\n\t\ttransform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t37.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t35.4167% {\n\t\ttransform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t33.3333% {\n\t\ttransform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t31.25% {\n\t\ttransform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t29.1667% {\n\t\ttransform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t27.0833% {\n\t\ttransform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t25% {\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t22.9167% {\n\t\ttransform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t20.8333% {\n\t\ttransform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t18.75% {\n\t\ttransform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t16.6667% {\n\t\ttransform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t14.5833% {\n\t\ttransform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t12.5% {\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t10.4167% {\n\t\ttransform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t8.33333% {\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t6.25% {\n\t\ttransform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t4.16667% {\n\t\ttransform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t2.08333% {\n\t\ttransform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n\t0% {\n\t\topacity: 1;\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n\t}\n}\n@keyframes pops-anim-roll-reverse {\n\t0% {\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n\t}\n\t100% {\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n\t}\n}\n@keyframes pops-anim-sandra-reverse {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: scale3d(1, 1, 1);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale3d(1.1, 1.1, 1);\n\t}\n}\n@keyframes pops-anim-gather-reverse {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(5, 0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(5, 0);\n\t}\n}\n\n@-webkit-keyframes pops-motion-fadeInTop {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(-30px);\n\t\ttransform: translateY(-30px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-motion-fadeInTop {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateY(-30px);\n\t\t-ms-transform: translateY(-30px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t\t-ms-transform: translateX(0);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeOutTop {\n\t0% {\n\t\topacity: 10;\n\t\t-webkit-transform: translateY(0);\n\t\ttransform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(-30px);\n\t\ttransform: translateY(-30px);\n\t}\n}\n@keyframes pops-motion-fadeOutTop {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t\t-ms-transform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translateY(-30px);\n\t\t-ms-transform: translateY(-30px);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeInBottom {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(20px);\n\t\ttransform: translateY(20px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateY(0);\n\t\ttransform: translateY(0);\n\t}\n}\n@keyframes pops-motion-fadeInBottom {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(20px);\n\t\ttransform: translateY(20px);\n\t\t-ms-transform: translateY(20px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateY(0);\n\t\ttransform: translateY(0);\n\t\t-ms-transform: translateY(0);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeOutBottom {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateY(0);\n\t\ttransform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(20px);\n\t\ttransform: translateY(20px);\n\t}\n}\n@keyframes pops-motion-fadeOutBottom {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateY(0);\n\t\ttransform: translateY(0);\n\t\t-ms-transform: translateY(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateY(20px);\n\t\ttransform: translateY(20px);\n\t\t-ms-transform: translateY(20px);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeInLeft {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(-20px);\n\t\ttransform: translateX(-20px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-motion-fadeInLeft {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(-30px);\n\t\ttransform: translateX(-30px);\n\t\t-ms-transform: translateX(-30px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t\t-ms-transform: translateX(0);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeOutLeft {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(-30px);\n\t\ttransform: translateX(-30px);\n\t}\n}\n@keyframes pops-motion-fadeOutLeft {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t\t-ms-transform: translateX(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(-20px);\n\t\ttransform: translateX(-20px);\n\t\t-ms-transform: translateX(-20px);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeInRight {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(20px);\n\t\ttransform: translateX(20px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t}\n}\n@keyframes pops-motion-fadeInRight {\n\t0% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(20px);\n\t\ttransform: translateX(20px);\n\t\t-ms-transform: translateX(20px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t\t-ms-transform: translateX(0);\n\t}\n}\n@-webkit-keyframes pops-motion-fadeOutRight {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(20px);\n\t\ttransform: translateX(20px);\n\t}\n}\n@keyframes pops-motion-fadeOutRight {\n\t0% {\n\t\topacity: 1;\n\t\t-webkit-transform: translateX(0);\n\t\ttransform: translateX(0);\n\t\t-ms-transform: translateX(0);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\t-webkit-transform: translateX(20px);\n\t\ttransform: translateX(20px);\n\t\t-ms-transform: translateX(20px);\n\t}\n}\n\n/* 动画 */\n.pops-anim[anim=\"pops-anim-spread\"] {\n\tanimation: pops-anim-spread 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake\"] {\n\tanimation: pops-anim-shake 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\n\tanimation: pops-anim-rolling-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\n\tanimation: pops-anim-rolling-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top\"] {\n\tanimation: pops-anim-slide-top 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\n\tanimation: pops-anim-slide-bottom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left\"] {\n\tanimation: pops-anim-slide-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right\"] {\n\tanimation: pops-anim-slide-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein\"] {\n\tanimation: pops-anim-fadein 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\n\tanimation: pops-anim-fadein-zoom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\n\tanimation: pops-anim-fadein-alert 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don\"] {\n\tanimation: pops-anim-don 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll\"] {\n\tanimation: pops-anim-roll 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra\"] {\n\tanimation: pops-anim-sandra 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather\"] {\n\tanimation: pops-anim-gather 0.3s;\n}\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\n\tanimation: pops-anim-spread-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\n\tanimation: pops-anim-shake-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\n\tanimation: pops-anim-rolling-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\n\tanimation: pops-anim-rolling-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\n\tanimation: pops-anim-slide-top-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\n\tanimation: pops-anim-slide-bottom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\n\tanimation: pops-anim-slide-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\n\tanimation: pops-anim-slide-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\n\tanimation: pops-anim-fadein-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\n\tanimation: pops-anim-fadein-zoom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\n\tanimation: pops-anim-fadein-alert-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\n\tanimation: pops-anim-don-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\n\tanimation: pops-anim-roll-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\n\tanimation: pops-anim-sandra-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\n\tanimation: pops-anim-gather-reverse 0.3s;\n}\n";
|
|
2815
|
+
var animCSS = "@keyframes rotating {\n 0% {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes iframeLoadingChange_85 {\n 0% {\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n }\n 20% {\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n }\n 40% {\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n }\n 60% {\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n }\n 80% {\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n }\n 100% {\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n }\n from {\n width: 75%;\n }\n to {\n width: 100%;\n }\n}\n@keyframes iframeLoadingChange {\n 0% {\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n }\n 20% {\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n }\n 40% {\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n }\n 60% {\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n }\n 80% {\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n }\n 100% {\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n }\n from {\n width: 0;\n }\n to {\n width: 75%;\n }\n}\n\n@keyframes searchSelectFalIn {\n from {\n opacity: 0;\n display: none;\n }\n to {\n display: block;\n opacity: 1;\n }\n}\n@keyframes searchSelectFalOut {\n from {\n display: block;\n opacity: 1;\n }\n to {\n opacity: 0;\n display: none;\n }\n}\n\n@keyframes pops-anim-wait-rotate {\n form {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pops-anim-spread {\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n}\n@keyframes pops-anim-shake {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translateX(-10px);\n }\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translateX(10px);\n }\n}\n@keyframes pops-anim-rolling-left {\n 0% {\n opacity: 0;\n transform: translateX(-100%) rotate(-120deg);\n }\n 100% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n}\n@keyframes pops-anim-rolling-right {\n 0% {\n opacity: 0;\n transform: translateX(100%) rotate(120deg);\n }\n 100% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n}\n@keyframes pops-anim-slide-top {\n 0% {\n opacity: 0;\n transform: translateY(-200%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes pops-anim-slide-bottom {\n 0% {\n opacity: 0;\n transform: translateY(200%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes pops-anim-slide-left {\n 0% {\n opacity: 0;\n transform: translateX(-200%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-slide-right {\n 0% {\n transform: translateX(200%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-fadein {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes pops-anim-fadein-zoom {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes pops-anim-fadein-alert {\n 0% {\n transform: scale(0.5);\n }\n 45% {\n transform: scale(1.05);\n }\n 80% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes pops-anim-don {\n 0% {\n opacity: 0;\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 2.08333% {\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 4.16667% {\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 6.25% {\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 8.33333% {\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 10.4167% {\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 12.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 14.5833% {\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 16.6667% {\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 18.75% {\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 20.8333% {\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 22.9167% {\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 25% {\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 27.0833% {\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 29.1667% {\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 31.25% {\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 33.3333% {\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 35.4167% {\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 37.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 39.5833% {\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 41.6667% {\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 43.75% {\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 45.8333% {\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 47.9167% {\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 50% {\n opacity: 1;\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 52.0833% {\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 54.1667% {\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 56.25% {\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 58.3333% {\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 60.4167% {\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 62.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 64.5833% {\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 66.6667% {\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 68.75% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 70.8333% {\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 72.9167% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 75% {\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 77.0833% {\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 79.1667% {\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 81.25% {\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 83.3333% {\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 85.4167% {\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 87.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 89.5833% {\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 91.6667% {\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 93.75% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 95.8333% {\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 97.9167% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 100% {\n opacity: 1;\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n}\n@keyframes pops-anim-roll {\n 0% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n }\n 100% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n }\n}\n@keyframes pops-anim-sandra {\n 0% {\n opacity: 0;\n transform: scale3d(1.1, 1.1, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n}\n@keyframes pops-anim-gather {\n 0% {\n opacity: 0;\n transform: scale(5, 0);\n }\n 100% {\n opacity: 1;\n transform: scale(1, 1);\n }\n}\n@keyframes pops-anim-spread-reverse {\n 0% {\n opacity: 1;\n transform: scaleX(1);\n }\n 100% {\n opacity: 0;\n transform: scaleX(0);\n }\n}\n@keyframes pops-anim-shake-reverse {\n 0%,\n 100% {\n transform: translateX(10px);\n }\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n transform: translateX(-10px);\n }\n 20%,\n 40%,\n 60%,\n 80% {\n transform: translateX(0);\n }\n}\n@keyframes pops-anim-rolling-left-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(-100%) rotate(-120deg);\n }\n}\n@keyframes pops-anim-rolling-right-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0) rotate(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(100%) rotate(120deg);\n }\n}\n@keyframes pops-anim-slide-top-reverse {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200%);\n }\n}\n@keyframes pops-anim-slide-bottom-reverse {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(200%);\n }\n}\n@keyframes pops-anim-slide-left-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n transform: translateX(-200%);\n }\n}\n@keyframes pops-anim-slide-right-reverse {\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n 100% {\n transform: translateX(200%);\n }\n}\n@keyframes pops-anim-fadein-reverse {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes pops-anim-fadein-zoom-reverse {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.5);\n }\n}\n@keyframes pops-anim-fadein-alert-reverse {\n 0% {\n transform: scale(1);\n }\n 45% {\n transform: scale(0.95);\n }\n 80% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(0.5);\n }\n}\n@keyframes pops-anim-don-reverse {\n 100% {\n opacity: 0;\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 97.9167% {\n transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 95.8333% {\n transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 93.75% {\n transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 91.6667% {\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 89.5833% {\n transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 87.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 85.4167% {\n transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 83.3333% {\n transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 81.25% {\n transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 79.1667% {\n transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 77.0833% {\n transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 75% {\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 72.9167% {\n transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 70.8333% {\n transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 68.75% {\n transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 66.6667% {\n transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 64.5833% {\n transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 62.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 60.4167% {\n transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 58.3333% {\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 56.25% {\n transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 54.1667% {\n transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 52.0833% {\n transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 50% {\n opacity: 1;\n transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 47.9167% {\n transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 45.8333% {\n transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 43.75% {\n transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 41.6667% {\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 39.5833% {\n transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 37.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 35.4167% {\n transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 33.3333% {\n transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 31.25% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 29.1667% {\n transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 27.0833% {\n transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 25% {\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 22.9167% {\n transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 20.8333% {\n transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 18.75% {\n transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 16.6667% {\n transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 14.5833% {\n transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 12.5% {\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 10.4167% {\n transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 8.33333% {\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 6.25% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 4.16667% {\n transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 2.08333% {\n transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n 0% {\n opacity: 1;\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n }\n}\n@keyframes pops-anim-roll-reverse {\n 0% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n }\n 100% {\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n }\n}\n@keyframes pops-anim-sandra-reverse {\n 0% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n 100% {\n opacity: 0;\n transform: scale3d(1.1, 1.1, 1);\n }\n}\n@keyframes pops-anim-gather-reverse {\n 0% {\n opacity: 0;\n transform: scale(5, 0);\n }\n 100% {\n opacity: 0;\n transform: scale(5, 0);\n }\n}\n\n@-webkit-keyframes pops-motion-fadeInTop {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInTop {\n 0% {\n opacity: 0;\n transform: translateY(-30px);\n -ms-transform: translateY(-30px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutTop {\n 0% {\n opacity: 10;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n}\n@keyframes pops-motion-fadeOutTop {\n 0% {\n opacity: 1;\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-30px);\n -ms-transform: translateY(-30px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInBottom {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n@keyframes pops-motion-fadeInBottom {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n -ms-transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutBottom {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n }\n}\n@keyframes pops-motion-fadeOutBottom {\n 0% {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n -ms-transform: translateY(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateY(20px);\n transform: translateY(20px);\n -ms-transform: translateY(20px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInLeft {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n -ms-transform: translateX(-30px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-30px);\n transform: translateX(-30px);\n }\n}\n@keyframes pops-motion-fadeOutLeft {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(-20px);\n transform: translateX(-20px);\n -ms-transform: translateX(-20px);\n }\n}\n@-webkit-keyframes pops-motion-fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes pops-motion-fadeInRight {\n 0% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n -ms-transform: translateX(20px);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n}\n@-webkit-keyframes pops-motion-fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n }\n}\n@keyframes pops-motion-fadeOutRight {\n 0% {\n opacity: 1;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -ms-transform: translateX(0);\n }\n 100% {\n opacity: 0;\n -webkit-transform: translateX(20px);\n transform: translateX(20px);\n -ms-transform: translateX(20px);\n }\n}\n\n/* 动画 */\n.pops-anim[anim=\"pops-anim-spread\"] {\n animation: pops-anim-spread 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake\"] {\n animation: pops-anim-shake 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\n animation: pops-anim-rolling-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\n animation: pops-anim-rolling-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top\"] {\n animation: pops-anim-slide-top 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\n animation: pops-anim-slide-bottom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left\"] {\n animation: pops-anim-slide-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right\"] {\n animation: pops-anim-slide-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein\"] {\n animation: pops-anim-fadein 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\n animation: pops-anim-fadein-zoom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\n animation: pops-anim-fadein-alert 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don\"] {\n animation: pops-anim-don 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll\"] {\n animation: pops-anim-roll 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra\"] {\n animation: pops-anim-sandra 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather\"] {\n animation: pops-anim-gather 0.3s;\n}\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\n animation: pops-anim-spread-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\n animation: pops-anim-shake-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\n animation: pops-anim-rolling-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\n animation: pops-anim-rolling-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\n animation: pops-anim-slide-top-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\n animation: pops-anim-slide-bottom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\n animation: pops-anim-slide-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\n animation: pops-anim-slide-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\n animation: pops-anim-fadein-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\n animation: pops-anim-fadein-zoom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\n animation: pops-anim-fadein-alert-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\n animation: pops-anim-don-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\n animation: pops-anim-roll-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\n animation: pops-anim-sandra-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\n animation: pops-anim-gather-reverse 0.3s;\n}\n";
|
|
2835
2816
|
|
|
2836
2817
|
var alertCSS = "";
|
|
2837
2818
|
|
|
2838
2819
|
var confirmCSS = "";
|
|
2839
2820
|
|
|
2840
|
-
var promptCSS = ".pops[type-value=\"prompt\"] {\n
|
|
2821
|
+
var promptCSS = ".pops[type-value=\"prompt\"] {\n --input-color: #000000;\n --input-bg-color: none;\n --input-placeholder-color: #a1a4ac;\n}\n.pops[type-value=\"prompt\"] input[pops],\n.pops[type-value=\"prompt\"] textarea[pops] {\n width: 100%;\n height: 100%;\n outline: 0;\n border: 0;\n color: var(--input-color);\n background-color: var(--input-bg-color);\n}\n\n.pops[type-value=\"prompt\"] input[pops] {\n padding: 5px 10px;\n}\n.pops[type-value=\"prompt\"] textarea[pops] {\n padding: 5px 10px;\n resize: none;\n}\n\n.pops[type-value=\"prompt\"] input[pops]::placeholder,\n.pops[type-value=\"prompt\"] textarea[pops]::placeholder {\n color: var(--input-placeholder-color);\n}\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"prompt\"] {\n --input-color: #ffffff;\n --input-bg-color: #333333;\n --input-placeholder-color: #8d9095;\n }\n}\n";
|
|
2841
2822
|
|
|
2842
|
-
var loadingCSS = ".pops[type-value=\"loading\"] {\n
|
|
2823
|
+
var loadingCSS = ".pops[type-value=\"loading\"] {\n --loading-bd-color: rgba(0, 0, 0, 0.2);\n --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --loading-box-shadow-color: rgb(0 0 0 / 50%);\n --loading-icon-color: rgba(100, 149, 237, 0.1);\n --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));\n}\n.pops[type-value=\"loading\"] {\n position: absolute;\n top: 272.5px;\n top: 50%;\n left: 26px;\n left: 50%;\n display: flex;\n overflow: hidden;\n padding: 10px 15px;\n max-width: 100%;\n max-height: 100%;\n min-width: 0;\n min-height: 0;\n border: 1px solid var(--loading-bd-color);\n border-radius: 5px;\n background-color: var(--loading-bg-color);\n box-shadow: 0 0 5px var(--loading-box-shadow-color);\n vertical-align: middle;\n transition: all 0.35s;\n transform: translate(-50%, -50%);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n align-content: center;\n}\n.pops[type-value=\"loading\"]:before {\n float: left;\n display: inline-block;\n width: 2em;\n height: 2em;\n border: 0.3em solid var(--loading-icon-color);\n border-top: 0.3em solid var(--loading-icon-bd-top-color);\n border-radius: 50%;\n content: \" \";\n vertical-align: middle;\n font-size: inherit;\n animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"loading\"] .pops-loading-content {\n position: static;\n top: 0;\n bottom: 0;\n float: left;\n overflow: hidden;\n width: auto;\n font-size: inherit;\n line-height: normal;\n align-content: center;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"loading\"] {\n --loading-bg-color: #222222;\n }\n}\n";
|
|
2843
2824
|
|
|
2844
|
-
var iframeCSS = ".pops[type-value=\"iframe\"] {\n
|
|
2825
|
+
var iframeCSS = ".pops[type-value=\"iframe\"] {\n --container-title-height: 55px;\n transition:\n width 0.35s ease,\n height 0.35s ease;\n}\n.pops[type-value=\"iframe\"] .pops-content {\n overflow: hidden;\n}\n.pops-loading {\n position: absolute;\n top: 40px;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-loading:before {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 3;\n display: block;\n margin: -20px 0 0 -20px;\n padding: 20px;\n border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\n border-radius: 50%;\n content: \"\";\n border-top-color: transparent;\n animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\n bottom: 0;\n max-width: 200px;\n max-height: 53px;\n position: unset;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] .pops-header-control[data-type=\"min\"] {\n display: none;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\n top: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\n left: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\n transform: none !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\n transition: none !important;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\n width: 100% !important;\n height: 100% !important;\n}\n.pops[type-value=\"iframe\"] iframe[pops] {\n width: 100%;\n height: 100%;\n border: 0;\n}\n.pops-iframe-content-global-loading {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 999999;\n width: 0;\n height: 4px;\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n animation: iframeLoadingChange 2s forwards;\n}\n\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\n position: unset;\n}\n";
|
|
2845
2826
|
|
|
2846
|
-
var tooltipCSS = ".pops-tip {\n
|
|
2827
|
+
var tooltipCSS = ".pops-tip {\n --pops-bg-opacity: 1;\n --tooltip-color: #4e4e4e;\n --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --tooltip-bd-radius: 2px;\n --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n --tooltip-font-size: 14px;\n --tooltip-padding-top: 13px;\n --tooltip-padding-right: 13px;\n --tooltip-padding-bottom: 13px;\n --tooltip-padding-left: 13px;\n\n --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n --tooltip-arrow--after-color: rgb(78, 78, 78);\n --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --tooltip-arrow--after-width: 12px;\n --tooltip-arrow--after-height: 12px;\n}\n.pops-tip {\n padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)\n var(--tooltip-padding-left);\n max-width: 400px;\n max-height: 300px;\n border-radius: var(--tooltip-bd-radius);\n background-color: var(--tooltip-bg-color);\n box-shadow:\n 0 1.5px 4px var(--tooltip-box-shadow-left-color),\n 0 1.5px 6px var(--tooltip-box-shadow-right-color);\n color: var(--tooltip-color);\n font-size: var(--tooltip-font-size);\n}\n.pops-tip[data-position=\"absolute\"] {\n position: absolute;\n}\n.pops-tip[data-position=\"fixed\"] {\n position: fixed;\n}\n\n.pops-tip .pops-tip-arrow {\n position: absolute;\n top: 100%;\n left: 50%;\n overflow: hidden;\n width: 100%;\n height: 12.5px;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow::after {\n position: absolute;\n top: 0;\n left: 50%;\n width: var(--tooltip-arrow--after-width);\n height: var(--tooltip-arrow--after-height);\n background: var(--tooltip-arrow--after-bg-color);\n color: var(--tooltip-arrow--after-color);\n box-shadow:\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\n position: absolute;\n top: 100%;\n left: 50%;\n overflow: hidden;\n width: 100%;\n height: 12.5px;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\n position: absolute;\n top: 0;\n left: 50%;\n width: var(--tooltip-arrow--after-width);\n height: var(--tooltip-arrow--after-height);\n background: var(--tooltip-arrow--after-bg-color);\n box-shadow:\n 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\n top: 50%;\n left: -12.5px;\n width: 12.5px;\n height: 50px;\n transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\n position: absolute;\n top: 50%;\n left: 100%;\n content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\n top: 50%;\n right: -12.5px;\n left: auto;\n width: 12.5px;\n height: 50px;\n transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\n position: absolute;\n top: 50%;\n left: 0;\n content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\n top: -12.5px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\n position: absolute;\n top: 100%;\n left: 50%;\n content: \"\";\n}\n\n.pops-tip[data-motion] {\n -webkit-animation-duration: 0.25s;\n animation-duration: 0.25s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n.pops-tip[data-motion=\"fadeOutRight\"] {\n -webkit-animation-name: pops-motion-fadeOutRight;\n animation-name: pops-motion-fadeOutRight;\n}\n.pops-tip[data-motion=\"fadeInTop\"] {\n -webkit-animation-name: pops-motion-fadeInTop;\n animation-name: pops-motion-fadeInTop;\n animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\n}\n.pops-tip[data-motion=\"fadeOutTop\"] {\n -webkit-animation-name: pops-motion-fadeOutTop;\n animation-name: pops-motion-fadeOutTop;\n animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\n}\n.pops-tip[data-motion=\"fadeInBottom\"] {\n -webkit-animation-name: pops-motion-fadeInBottom;\n animation-name: pops-motion-fadeInBottom;\n}\n.pops-tip[data-motion=\"fadeOutBottom\"] {\n -webkit-animation-name: pops-motion-fadeOutBottom;\n animation-name: pops-motion-fadeOutBottom;\n}\n.pops-tip[data-motion=\"fadeInLeft\"] {\n -webkit-animation-name: pops-motion-fadeInLeft;\n animation-name: pops-motion-fadeInLeft;\n}\n.pops-tip[data-motion=\"fadeOutLeft\"] {\n -webkit-animation-name: pops-motion-fadeOutLeft;\n animation-name: pops-motion-fadeOutLeft;\n}\n.pops-tip[data-motion=\"fadeInRight\"] {\n -webkit-animation-name: pops-motion-fadeInRight;\n animation-name: pops-motion-fadeInRight;\n}\n\n/* github的样式 */\n.pops-tip.github-tooltip {\n --tooltip-bg-opacity: 1;\n --tooltip-color: #ffffff;\n --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n --tooltip-bd-radius: 6px;\n --tooltip-padding-top: 6px;\n --tooltip-padding-right: 8px;\n --tooltip-padding-bottom: 6px;\n --tooltip-padding-left: 8px;\n\n --tooltip-arrow--after-color: rgb(255, 255, 255);\n --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n --tooltip-arrow--after-width: 8px;\n --tooltip-arrow--after-height: 8px;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops-tip {\n --tooltip-color: #ffffff;\n --tooltip-bg-color: #fafafa;\n --tooltip-arrow--after-color: #fafafa;\n --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));\n }\n}\n";
|
|
2847
2828
|
|
|
2848
|
-
var drawerCSS = ".pops[type-value=\"drawer\"] {\n
|
|
2829
|
+
var drawerCSS = ".pops[type-value=\"drawer\"] {\n position: fixed;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow:\n 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\n 0px 12px 32px rgba(0, 0, 0, 0.12),\n 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\n overflow: hidden;\n transition: all 0.3s;\n}\n\n.pops[type-value=\"drawer\"][direction=\"top\"] {\n width: 100%;\n left: 0;\n right: 0;\n top: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\n width: 100%;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"left\"] {\n height: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"right\"] {\n height: 100%;\n top: 0;\n bottom: 0;\n right: 0;\n}\n";
|
|
2849
2830
|
|
|
2850
|
-
var folderCSS = ".pops-folder-list {\n
|
|
2831
|
+
var folderCSS = ".pops-folder-list {\n --folder-arrow-fill-color: #d4d7de;\n --folder-arrow-active-fill-color: #06a7ff;\n --header-breadcrumb-text-color: #06a7ff;\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-last-text-color: #999999;\n --table-header-row-text-color: #818999;\n --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n --table-body-row-text-color: #05082c;\n --table-body-row-file-name-text-color: #05082c;\n --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n --table-body-row-file-name-hover-text-color: #06a7ff;\n --table-body-row-content-text-color: #818999;\n}\n.pops-folder-list .cursor-p {\n cursor: pointer;\n}\n.pops-folder-list a {\n background: 0 0;\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n color: var(--header-breadcrumb-text-color);\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border-spacing: 0;\n padding: 0 20px;\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n height: 100%;\n background: 0 0;\n overflow: hidden;\n display: -webkit-box;\n display: -ms-flexbox;\n -ms-flex-direction: column;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n}\ntable.pops-folder-list-table__body {\n height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-folder-list table tr {\n line-height: normal;\n align-content: center;\n}\n.pops-folder-list-table__header-row {\n height: 50px;\n line-height: normal;\n align-content: center;\n color: var(--table-header-row-text-color);\n text-align: left;\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-folder-list-table__body-row {\n height: 50px;\n line-height: normal;\n align-content: center;\n color: var(--table-body-row-text-color);\n font-size: 12px;\n}\n.pops-folder-list-table__body-row:hover {\n background-color: var(--table-body-row-hover-bg-color);\n border-color: var(--table-body-row-hover-bd-color);\n border: 0;\n outline: none;\n}\n.pops-folder-list table th {\n border: 0;\n border-bottom: 1px solid var(--table-body-th-text-color);\n}\n.pops-folder-list table td {\n border: 0;\n border-bottom: 1px solid var(--table-body-td-text-color);\n position: relative;\n}\n.pops-folder-list .list-name-text {\n display: inline-block;\n padding-left: 12px;\n line-height: normal;\n align-content: center;\n max-width: 176px;\n}\n.pops-folder-list-file-name > div {\n display: flex;\n align-items: center;\n}\n\n.pops-mobile-folder-list-file-name {\n display: flex;\n align-items: center;\n}\n.pops-mobile-folder-list-file-name > div {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 6px 0px;\n flex-direction: column;\n}\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\n width: 45px;\n height: 45px;\n}\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\n padding-left: unset;\n max-width: 250px;\n overflow-x: hidden;\n font-weight: 400;\n line-height: unset;\n margin-bottom: 4px;\n white-space: normal;\n text-overflow: unset;\n}\n\n/* 修改滚动 */\n.pops-folder-content {\n overflow: hidden !important;\n}\n.pops-folder-content .pops-folder-list {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.pops-folder-content .pops-folder-list-table__body-div {\n height: 100%;\n flex: 1 auto;\n overflow: auto;\n padding-bottom: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\n height: 100%;\n flex: 1 auto;\n overflow: auto;\n padding-bottom: 0;\n}\n.pops-folder-content table.pops-folder-list-table__body {\n overflow: auto;\n}\n.pops-folder-content .pops-folder-list-table__header-div {\n flex: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\n display: none;\n}\n\n.pops-folder-list .pops-folder-list-file-name-title-text {\n color: var(--table-body-row-file-name-text-color);\n}\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\n text-decoration: none;\n color: var(--table-body-row-file-name-hover-text-color);\n}\n.pops-folder-list .text-ellip {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.pops-folder-list .content {\n color: var(--table-body-row-content-text-color);\n position: relative;\n width: 100%;\n text-align: left;\n}\n.pops-folder-list .inline-block-v-middle {\n display: inline-block;\n vertical-align: middle;\n}\n.pops-folder-list .flex-a-i-center {\n display: flex;\n align-items: center;\n}\n.pops-folder-list .u-file-icon {\n display: inline-block;\n vertical-align: middle;\n}\n.pops-folder-list .u-file-icon--list {\n width: 32px;\n height: 32px;\n}\n.pops-folder-list .pops-folder-list-file-icon {\n line-height: normal;\n align-content: center;\n position: relative;\n vertical-align: middle;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\n flex: 1;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n min-height: 17px;\n flex-wrap: wrap;\n}\n.pops-folder-list .pops-folder-list-table__sort {\n display: inline-flex;\n margin-left: 4px;\n flex-direction: column;\n}\n\n.pops-folder-list .pops-folder-icon-arrow {\n width: 10px;\n height: 10px;\n fill: var(--folder-arrow-fill-color);\n}\n.pops-folder-list .pops-folder-icon-active {\n fill: var(--folder-arrow-active-fill-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb {\n padding: 4px 20px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: start;\n -webkit-justify-content: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n min-height: 35px;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\n font-size: 12px;\n color: var(--header-breadcrumb-all-files-text-color);\n line-height: normal;\n align-content: center;\n font-weight: 700;\n display: inline-block;\n max-width: 140px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\n color: var(--header-breadcrumb-all-files-last-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\n font-size: 14px;\n color: var(--header-breadcrumb-all-files-first-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\n width: 16px;\n height: 16px;\n}\n.pops-folder-list .iconArrow {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\n 55% 50%/6px 9px no-repeat;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"folder\"] {\n --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n }\n .pops-folder-list {\n --header-breadcrumb-text-color: #06a7ff;\n --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n --header-breadcrumb-all-files-last-text-color: #818999;\n --table-body-row-text-color: #f7f8fa;\n --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n --table-body-td-text-color: #495366;\n --table-body-row-hover-bd-color: #1f2022;\n --table-body-row-hover-bg-color: #1f2022;\n --table-body-row-file-name-text-color: #f7f8fa;\n }\n}\n";
|
|
2851
2832
|
|
|
2852
|
-
var panelCSS = ".pops[type-value=\"panel\"] {\n\t--pops-bg-color: #f2f2f2;\n\t--pops-color: #333333;\n\t--panel-title-bg-color: #ffffff;\n\n\t--panel-aside-bg-color: #ffffff;\n\t--panel-aside-hover-color: rgb(64, 158, 255);\n\t--panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n\t--pops-panel-forms-margin-top-bottom: 10px;\n\t--pops-panel-forms-margin-left-right: 20px;\n\t--pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\n\t--pops-panel-forms-header-padding-left-right: 10px;\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\n\t--pops-panel-forms-container-item-title-color: #333;\n\t--pops-panel-forms-container-item-border-radius: 6px;\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\n\t--pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n\t--pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\n\n\t--pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n\tcolor: var(--pops-color);\n\tbackground: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n\tbackground: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tmax-width: 200px;\n\tmin-width: 100px;\n\theight: 100%;\n\tbackground: var(--panel-aside-bg-color);\n\tborder-right: 1px solid var(--panel-aside-bg-color);\n\tfont-size: 0.9em;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n}\naside.pops-panel-aside {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n\toverflow: auto;\n}\naside.pops-panel-aside ul li {\n\tmargin: 6px 8px;\n\tborder-radius: 4px;\n\tpadding: 6px 10px;\n\tcursor: default;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n\tcolor: var(--panel-aside-hover-color);\n\tbackground: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n.pops-panel-content {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex: 1;\n\toverflow: auto;\n\tflex-basis: auto;\n\tbox-sizing: border-box;\n\tmin-width: 0;\n\tbottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n\twidth: 100%;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\nsection.pops-panel-container {\n\twidth: 100%;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n\tborder-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n\tflex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n\tdisplay: flex;\n\tjustify-content: flex-start !important;\n\tmargin: 0px !important;\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\n\t\tcalc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n\ttext-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n\toverflow: auto;\n\t/*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\n\t\tcalc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n\tgap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n\tmargin: 10px;\n\tmargin-left: calc(\n\t\tvar(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n\t);\n\tfont-size: 0.9em;\n\ttext-align: left;\n\tcolor: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n\t/* 去除<li>左侧的圆点 */\n\tdisplay: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom)\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\n\tmargin: 0px 0px;\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n\ttext-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul.pops-panel-forms-container-item-formlist\n\tli:last-child {\n\tborder: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\n\tmargin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n\tdisplay: flex;\n\talign-items: center;\n\tfill: #6c6c6c;\n\tjustify-content: space-between;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n\ttransform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n\twidth: 15px;\n\theight: 15px;\n\tdisplay: flex;\n\talign-items: center;\n\ttransform: rotate(-90deg);\n\ttransition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container\n\t.pops-panel-forms-fold[data-fold-enable]\n\t.pops-panel-forms-container-item-formlist {\n\theight: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n\tmargin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n\ttransition: height 0.3s;\n\toverflow: hidden;\n\tborder-radius: unset;\n\tbackground: unset;\n\tmargin: 0;\n\theight: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n\t/* 兼容移动端CSS */\n\t.pops[type-value=\"panel\"] {\n\t\t--pops-panel-forms-margin-left-right: 10px;\n\t}\n\t.pops[type-value=\"panel\"] {\n\t\twidth: 92%;\n\t\twidth: 92vw;\n\t\twidth: 92dvw;\n\t}\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n\t\tmax-width: 20%;\n\t\tmin-width: auto;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n\t\ttext-align: left;\n\t\t--pops-panel-forms-margin-left-right: 0px;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n\t\tmargin: 0px !important;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n\t\tmargin: 10px 10px;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n\t\tmax-width: 55%;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n\t\tmin-width: 88px !important;\n\t\twidth: -webkit-fill-available;\n\t\twidth: -moz-available;\n\t}\n\t.pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n\t\tfont-size: 16px;\n\t}\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n\t\tfont-size: 14px;\n\t}\n}\n/* switch的CSS */\n.pops-panel-switch {\n\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n\t--panel-switch-circle-color: #dcdfe6;\n\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n\t--panel-switch-checked-circle-color: #409eff;\n\t--panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n\t--panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n\tdisplay: inline-flex;\n\tflex-direction: row-reverse;\n\talign-items: center;\n\tposition: relative;\n\tfont-size: 14px;\n\tline-height: normal;\n\talign-content: center;\n\theight: 32px;\n\tvertical-align: middle;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\t-moz-user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n\tposition: absolute;\n\twidth: 0;\n\theight: 0;\n\topacity: 0;\n\tmargin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n\tcursor: not-allowed;\n\topacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n\tdisplay: inline-flex;\n\tposition: relative;\n\talign-items: center;\n\tmin-width: 40px;\n\theight: 20px;\n\tborder: 1px solid var(--panel-switch-core-bd-color);\n\toutline: 0;\n\tborder-radius: 10px;\n\tbox-sizing: border-box;\n\tbackground: var(--panel-switch-core-bg-color);\n\tcursor: pointer;\n\ttransition:\n\t\tborder-color 0.3s,\n\t\tbackground-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n\tposition: absolute;\n\tleft: 1px;\n\tborder-radius: 100%;\n\ttransition: all 0.3s;\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: var(--panel-switch-circle-bg-color);\n\tcolor: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n\tborder-color: var(--panel-switch-checked-core-bd-color);\n\tbackground-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n\tleft: calc(100% - 17px);\n\tcolor: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n\toverflow: hidden;\n\theight: 25px;\n\tline-height: normal;\n\talign-content: center;\n\tdisplay: flex;\n\talign-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n\theight: 6px;\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\n\toutline: 0;\n\t-webkit-appearance: none;\n\tappearance: none;\n\twidth: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n\twidth: 20px;\n\theight: 20px;\n\tborder-radius: 50%;\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n\tbox-shadow:\n\t\t0 0 2px rgba(0, 0, 0, 0.3),\n\t\t0 3px 5px rgba(0, 0, 0, 0.2);\n\tcursor: pointer;\n\t-webkit-appearance: none;\n\tappearance: none;\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n\twidth: 20px;\n\theight: 20px;\n\tborder-radius: 50%;\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n\tbox-shadow:\n\t\t0 0 2px rgba(0, 0, 0, 0.3),\n\t\t0 3px 5px rgba(0, 0, 0, 0.2);\n\tcursor: pointer;\n\t-webkit-appearance: none;\n\tappearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n\theight: 6px;\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n\t--pops-slider-color-white: #ffffff;\n\t--pops-slider-color-primary: #409eff;\n\t--pops-slider-color-info: #909399;\n\t--pops-slider-text-color-placeholder: #a8abb2;\n\t--pops-slider-border-color-light: #e4e7ed;\n\t--pops-slider-border-radius-circle: 100%;\n\t--pops-slider-transition-duration-fast: 0.2s;\n\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n\t--pops-slider-border-radius: 3px;\n\t--pops-slider-height: 6px;\n\t--pops-slider-button-size: 20px;\n\t--pops-slider-button-wrapper-size: 36px;\n\t--pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n\twidth: 100%;\n\theight: 32px;\n\tdisplay: flex;\n\talign-items: center;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\t-moz-user-select: none;\n}\n\n.pops-slider-width {\n\tflex: 0 0 52%;\n\tmargin-left: 10px;\n}\n\n.pops-slider__runway {\n\tflex: 1;\n\theight: var(--pops-slider-height);\n\tbackground-color: var(--pops-slider-runway-bg-color);\n\tborder-radius: var(--pops-slider-border-radius);\n\tposition: relative;\n\tcursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n\tmargin-right: 30px;\n\twidth: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n\tcursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n\tbackground-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n\tborder-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n\tcursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n\ttransform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n\tcursor: not-allowed;\n}\n\n.pops-slider__input {\n\tflex-shrink: 0;\n\twidth: 130px;\n}\n\n.pops-slider__bar {\n\theight: var(--pops-slider-height);\n\tbackground-color: var(--pops-slider-main-bg-color);\n\tborder-top-left-radius: var(--pops-slider-border-radius);\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\n\tposition: absolute;\n}\n\n.pops-slider__button-wrapper {\n\theight: var(--pops-slider-button-wrapper-size);\n\twidth: var(--pops-slider-button-wrapper-size);\n\tposition: absolute;\n\tz-index: 1;\n\ttop: var(--pops-slider-button-wrapper-offset);\n\ttransform: translate(-50%);\n\tbackground-color: transparent;\n\ttext-align: center;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tline-height: normal;\n\toutline: none;\n}\n\n.pops-slider__button-wrapper:after {\n\tdisplay: inline-block;\n\tcontent: \"\";\n\theight: 100%;\n\tvertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n\tcursor: grab;\n}\n\n.pops-slider__button {\n\tdisplay: inline-block;\n\twidth: var(--pops-slider-button-size);\n\theight: var(--pops-slider-button-size);\n\tvertical-align: middle;\n\tborder: solid 2px var(--pops-slider-main-bg-color);\n\tbackground-color: var(--pops-slider-color-white);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\ttransition: var(--pops-slider-transition-duration-fast);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n\ttransform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n\tcursor: grab;\n}\n\n.pops-slider__button.dragging {\n\tcursor: grabbing;\n}\n\n.pops-slider__stop {\n\tposition: absolute;\n\theight: var(--pops-slider-height);\n\twidth: var(--pops-slider-height);\n\tborder-radius: var(--pops-slider-border-radius-circle);\n\tbackground-color: var(--pops-slider-stop-bg-color);\n\ttransform: translate(-50%);\n}\n\n.pops-slider__marks {\n\ttop: 0;\n\tleft: 12px;\n\twidth: 18px;\n\theight: 100%;\n}\n\n.pops-slider__marks-text {\n\tposition: absolute;\n\ttransform: translate(-50%);\n\tfont-size: 14px;\n\tcolor: var(--pops-slider-color-info);\n\tmargin-top: 15px;\n\twhite-space: pre;\n}\n\n.pops-slider.is-vertical {\n\tposition: relative;\n\tdisplay: inline-flex;\n\twidth: auto;\n\theight: 100%;\n\tflex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n\twidth: var(--pops-slider-height);\n\theight: 100%;\n\tmargin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n\twidth: var(--pops-slider-height);\n\theight: auto;\n\tborder-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n\ttop: auto;\n\tleft: var(--pops-slider-button-wrapper-offset);\n\ttransform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n\ttransform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n\tmargin-top: 0;\n\tleft: 15px;\n\ttransform: translateY(50%);\n}\n\n.pops-slider--large {\n\theight: 40px;\n}\n\n.pops-slider--small {\n\theight: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n\t--el-disabled-text-color: #a8abb2;\n\t--el-disabled-bg-color: #f5f7fa;\n\t--el-disabled-border-color: #e4e7ed;\n\n\t--pops-panel-components-input-text-color: #000000;\n\t--pops-panel-components-input-text-bg-color: transparent;\n\t--pops-panel-components-input-text-default-padding: 8px;\n\t--pops-panel-components-input-bd-color: #dcdfe6;\n\t--pops-panel-components-input-bg-color: #ffffff;\n\t--pops-panel-components-input-hover-bd-color: #c0c4cc;\n\t--pops-panel-components-input-focus-bd-color: #409eff;\n\t--pops-panel-components-input-suffix-color: #a8abb2;\n\t--pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid var(--pops-panel-components-input-bd-color);\n\tborder-radius: 4px;\n\tbackground-color: var(--pops-panel-components-input-bg-color);\n\tposition: relative;\n\tbox-shadow: none;\n}\n.pops-panel-input:hover {\n\tborder: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n\t--pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input:has(input:focus) {\n\toutline: 0;\n\tborder: 1px solid var(--pops-panel-components-input-focus-bd-color);\n\tborder-radius: 4px;\n\tbox-shadow: none;\n}\n.pops-panel-input input {\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\ttext-align: start;\n\talign-items: center;\n\talign-content: center;\n\twhite-space: nowrap;\n\tcursor: text;\n\tbox-sizing: border-box;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tvertical-align: middle;\n\t-webkit-appearance: none;\n\tappearance: none;\n\tcolor: var(--pops-panel-components-input-text-color);\n\tbackground-color: var(--pops-panel-components-input-text-bg-color);\n\toutline: 0;\n\ttransition: 0.1s;\n\tborder: 0;\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tline-height: normal;\n\theight: 32px;\n\twidth: 100%;\n\tflex: 1;\n\t/*margin-right: calc(1em + 8px);*/\n\tmargin: 0px;\n\tpadding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input span.pops-panel-input__suffix {\n\tdisplay: inline-flex;\n\twhite-space: nowrap;\n\tflex-shrink: 0;\n\tflex-wrap: nowrap;\n\theight: 100%;\n\ttext-align: center;\n\tcolor: var(--pops-panel-components-input-suffix-color);\n\tbackground: var(--pops-panel-components-input-suffix-bg-color);\n\ttransition: all 0.3s;\n\tpointer-events: none;\n\tpadding: 0 8px;\n\tposition: absolute;\n\tright: 0px;\n\tborder-top-right-radius: 4px;\n\tborder-bottom-right-radius: 4px;\n\tborder: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n\tpointer-events: all;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n/* 如果包含清空图标的按钮,则默认隐藏清空图标,当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n\tdisplay: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n\tdisplay: inline-flex;\n}\n.pops-panel-input .pops-panel-icon {\n\tcursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n\theight: inherit;\n\tline-height: normal;\n\talign-content: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\ttransition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n\theight: 1em;\n\twidth: 1em;\n}\n\n.pops-input-disabled {\n\tbackground-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-input.pops-input-disabled:hover {\n\t--pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tcolor: var(--el-disabled-text-color);\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\n\tcursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n\tdisplay: none;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n\t--pops-panel-components-textarea-text-color: #000000;\n\t--pops-panel-components-textarea-text-bg-color: #ffffff;\n\t--pops-panel-components-textarea-bd-color: #dcdfe6;\n\t--pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n\t--pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n\twidth: 100%;\n\t/*vertical-align: bottom;*/\n\tposition: relative;\n\tdisplay: block;\n\tresize: none;\n\tpadding: 5px 11px;\n\t/*line-height: 1;*/\n\tbox-sizing: border-box;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tcolor: var(--pops-panel-components-textarea-text-color);\n\tbackground-color: var(--pops-panel-components-textarea-text-bg-color);\n\tbackground-image: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\tbox-shadow: none;\n\tborder-radius: 0;\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n\tborder: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n\tborder-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n\t--pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n\t--pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n\t--pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n\tcursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n\toutline: 0;\n\tborder-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n\t--pops-panel-components-select-text-color: #000000;\n\t--pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n\t--pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n\t--pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n\tborder: 0;\n}\n.pops-panel-select select {\n\theight: 32px;\n\tline-height: normal;\n\talign-content: center;\n\tmin-width: 200px;\n\tborder: 1px solid var(--pops-panel-components-select-bd-color);\n\tborder-radius: 5px;\n\ttext-align: center;\n\toutline: 0;\n\tcolor: var(--pops-panel-components-select-text-color);\n\tbackground-color: var(--pops-panel-components-select-bg-color);\n\tbox-shadow: none;\n}\n.pops-panel-select select:hover {\n\tborder: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n\t--pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n\t--pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n\tcursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n\tbox-shadow: none;\n\t--pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n\tbox-shadow: none;\n}\n/* select的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple {\n\t--el-border-radius-base: 4px;\n\t--el-fill-color-blank: #ffffff;\n\t--el-transition-duration: 0.3s;\n\t--el-border-color: #cbcbcb;\n\t--el-text-color-placeholder: #a8abb2;\n\t--color: inherit;\n\t--el-select-input-color: #a8abb2;\n\t--el-select-input-font-size: 14px;\n\t--el-text-color-regular: #606266;\n\t--el-color-info: #909399;\n\t--el-color-info-light-9: #f4f4f5;\n\t--el-color-info-light-8: #e9e9eb;\n\t--el-color-primary-light-9: #ecf5ff;\n\t--el-color-primary-light-8: #d9ecff;\n\t--el-color-primary: #409eff;\n\t--el-color-white: #ffffff;\n\twidth: 200px;\n}\n.pops-panel-select-multiple .el-select__wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\ttext-align: left;\n\tfont-size: 14px;\n\tpadding: 4px 12px;\n\tgap: 6px;\n\tmin-height: 32px;\n\tline-height: normal;\n\talign-content: center;\n\tborder-radius: var(--el-border-radius-base);\n\tbackground-color: var(--el-fill-color-blank);\n\ttransition: var(--el-transition-duration);\n\ttransform: translateZ(0);\n\tborder: 1px solid var(--el-border-color);\n}\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n\t--el-border-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tflex: 1;\n\tmin-width: 0;\n\tgap: 6px;\n}\n.pops-panel-select-multiple .el-select__selected-item {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\t-webkit-user-select: none;\n\tuser-select: none;\n}\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n\tmax-width: 200px;\n}\n.pops-panel-select-multiple .el-select__input-wrapper {\n\tmax-width: 100%;\n}\n.pops-panel-select-multiple .el-select__selection.is-near {\n\tmargin-left: -8px;\n}\n.pops-panel-select-multiple .el-select__placeholder {\n\tposition: absolute;\n\tdisplay: block;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 100%;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcolor: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcolor: var(--el-text-color-placeholder);\n}\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-shrink: 0;\n\tgap: 6px;\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select-multiple .el-icon {\n\t--color: inherit;\n\theight: 1em;\n\twidth: 1em;\n\tline-height: normal;\n\talign-content: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tposition: relative;\n\tfill: currentColor;\n\tcolor: var(--color);\n\tfont-size: inherit;\n}\n.pops-panel-select-multiple .el-icon svg {\n\theight: 1em;\n\twidth: 1em;\n}\n.pops-panel-select-multiple .el-select__caret {\n\tcolor: var(--el-select-input-color);\n\tfont-size: var(--el-select-input-font-size);\n\ttransition: var(--el-transition-duration);\n\ttransform: rotate(0);\n\tcursor: pointer;\n}\n.pops-panel-select-multiple .el-tag {\n\t--el-tag-font-size: 12px;\n\t--el-tag-border-radius: 4px;\n\t--el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n\tbackground-color: var(--el-tag-bg-color);\n\tborder-color: var(--el-tag-border-color);\n\tcolor: var(--el-tag-text-color);\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tvertical-align: middle;\n\theight: 24px;\n\tpadding: 0 9px;\n\tfont-size: var(--el-tag-font-size);\n\tline-height: normal;\n\talign-content: center;\n\tborder-width: 1px;\n\tborder-style: solid;\n\tborder-radius: var(--el-tag-border-radius);\n\tbox-sizing: border-box;\n\twhite-space: nowrap;\n\t--el-icon-size: 14px;\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\n\t--el-tag-border-color: var(--el-color-primary-light-8);\n\t--el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n\tcursor: pointer;\n\tborder-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n\t--el-tag-bg-color: var(--el-color-info-light-9);\n\t--el-tag-border-color: var(--el-color-info-light-8);\n\t--el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n\t--el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n\tpadding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n\tmin-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n\tflex-shrink: 0;\n\tcolor: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n\tcolor: var(--el-color-white);\n\tbackground-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n\tborder-radius: 50%;\n\tcursor: pointer;\n\tfont-size: calc(var(--el-icon-size) - 2px);\n\theight: var(--el-icon-size);\n\twidth: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n\tmargin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n\tdisplay: block;\n\tline-height: normal;\n\talign-content: center;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.pops-panel-select-multiple-disable {\n\t--el-fill-color-blank: #f5f7fa;\n\t--color: #a8abb2;\n\t--el-border-color: #cbcbcb;\n}\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\n\t--el-tag-bg-color: #e7e7e7;\n\t--el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-multiple-disable .el-select__wrapper,\n.pops-panel-select-multiple-disable .el-select__caret {\n\tcursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n\tcursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n\tbackground: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom)\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\n\tmargin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli:has(+ .pops-panel-deepMenu-nav-item:active) {\n\tborder-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item:first-child:active {\n\tborder-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n\tborder-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item:last-child:active {\n\tborder-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n\tborder-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: #6c6c6c;\n\tfill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n\twidth: 15px;\n\theight: 15px;\n\tdisplay: flex;\n\talign-items: center;\n}\nsection.pops-panel-deepMenu-container\n\t.pops-panel-container-header-ul\n\tli.pops-panel-deepMenu-container-header {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: -webkit-fill-available;\n\twidth: -moz-available;\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\n\t\tcalc(\n\t\t\tvar(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\n\t\t);\n\tgap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n\twidth: var(--pops-panel-forms-header-icon-size);\n\theight: var(--pops-panel-forms-header-icon-size);\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n\twidth: inherit;\n\theight: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n\tdisplay: flex;\n\talign-items: baseline;\n\tflex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n\t.pops[type-value=\"panel\"] {\n\t\t--pops-bg-color: #000000;\n\t\t--pops-color: #f2f2f2;\n\t\t--panel-title-bg-color: #000000;\n\t\t--panel-aside-bg-color: #262626;\n\t\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n\t\t--pops-panel-forms-container-item-bg-color: #262626;\n\t\t--pops-panel-forms-container-item-title-color: #c1c1c1;\n\n\t\t--pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n\t\t--pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n\t}\n\t.pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n\t\tfill: #f2f2f2;\n\t}\n\n\t/* switch的CSS */\n\t.pops-panel-switch {\n\t\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n\t\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n\t\t--panel-switch-circle-color: #dcdfe6;\n\t\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n\t\t--panel-switch-checked-circle-color: #409eff;\n\t\t--panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n\t\t--panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n\t}\n\t/* select的CSS */\n\t.pops-panel-select {\n\t\t--pops-panel-components-select-text-color: #f2f2f2;\n\t\t--pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n\t\t--pops-panel-components-select-bg-color: #141414;\n\t}\n\t/* select-multiple的CSS*/\n\t.pops-panel-select-multiple {\n\t\t--el-fill-color-blank: #141414;\n\t\t--el-border-color: #4c4d4f;\n\t\t--el-text-color-placeholder: #a8abb2;\n\t\t--el-select-input-color: #a8abb2;\n\t\t--el-text-color-regular: #606266;\n\t\t--el-color-info: #909399;\n\t\t--el-color-info-light-8: #e9e9eb;\n\t\t--el-color-primary-light-9: #ecf5ff;\n\t\t--el-color-primary-light-8: #d9ecff;\n\t\t--el-color-primary: #409eff;\n\t\t--el-color-white: #ffffff;\n\t}\n\t.pops-panel-select-multiple .el-tag {\n\t\t--el-color-info-light-9: #202121;\n\t}\n\t.pops-panel-select-multiple-disable {\n\t\t--el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n\t}\n\t.pops-panel-select-multiple-disable .el-tag.el-tag--info {\n\t\t--el-tag-bg-color: #2f2f2f;\n\t}\n\t/* select-multiple的CSS*/\n\t/* slider的CSS */\n\t.pops-slider {\n\t\t--pops-slider-border-color-light: #414243;\n\t}\n\t/* input的CSS */\n\t.pops-panel-input {\n\t\t--pops-panel-components-input-text-color: #f2f2f2;\n\t\t--pops-panel-components-input-bd-color: #4f5052;\n\t\t--pops-panel-components-input-bg-color: #141414;\n\t\t--pops-panel-components-input-hover-bd-color: #6f7175;\n\t\t--pops-panel-components-input-focus-bd-color: #409eff;\n\t\t--pops-panel-components-input-suffix-color: #a8abb2;\n\t}\n\t/* textarea的CSS */\n\t.pops-panel-textarea {\n\t\t--pops-panel-components-textarea-text-color: #f2f2f2;\n\t\t--pops-panel-components-textarea-text-bg-color: #141414;\n\t\t--pops-panel-components-textarea-bd-color: #4f5052;\n\t\t--pops-panel-components-textarea-hover-bd-color: #6f7175;\n\t\t--pops-panel-components-textarea-focus-bd-color: #409eff;\n\t}\n\t.pops-panel-textarea-disable {\n\t\t--pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n\t\t--pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n\t}\n\t/* slider */\n\t.pops-slider {\n\t\t--pops-slider-text-color-placeholder: #8d9095;\n\t}\n}\n";
|
|
2833
|
+
var panelCSS = ".pops[type-value=\"panel\"] {\n --pops-bg-color: #f2f2f2;\n --pops-color: #333333;\n --panel-title-bg-color: #ffffff;\n\n --panel-aside-bg-color: #ffffff;\n --panel-aside-hover-color: rgb(64, 158, 255);\n --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n --pops-panel-forms-margin-top-bottom: 10px;\n --pops-panel-forms-margin-left-right: 20px;\n --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n --pops-panel-forms-header-padding-top-bottom: 15px;\n --pops-panel-forms-header-padding-left-right: 10px;\n --pops-panel-forms-container-item-left-text-gap: 6px;\n --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n --pops-panel-forms-container-item-bg-color: #ffffff;\n --pops-panel-forms-container-item-title-color: #333;\n --pops-panel-forms-container-item-border-radius: 6px;\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\n --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\n --pops-panel-forms-container-li-padding-left-right: 16px;\n\n --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n color: var(--pops-color);\n background: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n background: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n box-sizing: border-box;\n flex-shrink: 0;\n max-width: 200px;\n min-width: 100px;\n height: 100%;\n background: var(--panel-aside-bg-color);\n border-right: 1px solid var(--panel-aside-bg-color);\n font-size: 0.9em;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\naside.pops-panel-aside {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n overflow: auto;\n}\naside.pops-panel-aside ul li {\n margin: 6px 8px;\n border-radius: 4px;\n padding: 6px 10px;\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n color: var(--panel-aside-hover-color);\n background: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n.pops-panel-content {\n display: flex;\n flex-direction: row;\n flex: 1;\n overflow: auto;\n flex-basis: auto;\n box-sizing: border-box;\n min-width: 0;\n bottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\nsection.pops-panel-container {\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n flex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n display: flex;\n justify-content: flex-start !important;\n margin: 0px !important;\n padding: var(--pops-panel-forms-header-padding-top-bottom)\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n text-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n overflow: auto;\n /*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: var(--pops-panel-forms-margin-top-bottom)\n calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n gap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n margin: 10px;\n margin-left: calc(\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n );\n font-size: 0.9em;\n text-align: left;\n color: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n /* 去除<li>左侧的圆点 */\n display: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n border-radius: var(--pops-panel-forms-container-item-border-radius);\n background: var(--pops-panel-forms-container-item-bg-color);\n margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n var(--pops-panel-forms-container-li-padding-left-right);\n margin: 0px 0px;\n border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n text-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n .pops-panel-forms-container-item\n ul.pops-panel-forms-container-item-formlist\n li:last-child {\n border: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n display: flex;\n flex-direction: column;\n gap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n color: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n border-radius: var(--pops-panel-forms-container-item-border-radius);\n background: var(--pops-panel-forms-container-item-bg-color);\n margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n display: flex;\n align-items: center;\n fill: #6c6c6c;\n justify-content: space-between;\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n transform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n width: 15px;\n height: 15px;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n transition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\n height: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n margin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n transition: height 0.3s;\n overflow: hidden;\n border-radius: unset;\n background: unset;\n margin: 0;\n height: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n /* 兼容移动端CSS */\n .pops[type-value=\"panel\"] {\n --pops-panel-forms-margin-left-right: 10px;\n }\n .pops[type-value=\"panel\"] {\n width: 92%;\n width: 92vw;\n width: 92dvw;\n }\n .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n max-width: 20%;\n min-width: auto;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n text-align: left;\n --pops-panel-forms-margin-left-right: 0px;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n margin: 0px !important;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n margin: 10px 10px;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n max-width: 55%;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n min-width: 88px !important;\n width: -webkit-fill-available;\n width: -moz-available;\n }\n .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n font-size: 16px;\n }\n .pops[type-value=\"panel\"] .pops-panel-title p[pops],\n .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n font-size: 14px;\n }\n}\n/* switch的CSS */\n.pops-panel-switch {\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --panel-switch-circle-color: #dcdfe6;\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --panel-switch-checked-circle-color: #409eff;\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n display: inline-flex;\n flex-direction: row-reverse;\n align-items: center;\n position: relative;\n font-size: 14px;\n line-height: normal;\n align-content: center;\n height: 32px;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n margin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n display: inline-flex;\n position: relative;\n align-items: center;\n min-width: 40px;\n height: 20px;\n border: 1px solid var(--panel-switch-core-bd-color);\n outline: 0;\n border-radius: 10px;\n box-sizing: border-box;\n background: var(--panel-switch-core-bg-color);\n cursor: pointer;\n transition:\n border-color 0.3s,\n background-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n position: absolute;\n left: 1px;\n border-radius: 100%;\n transition: all 0.3s;\n width: 16px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--panel-switch-circle-bg-color);\n color: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n border-color: var(--panel-switch-checked-core-bd-color);\n background-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n left: calc(100% - 17px);\n color: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n overflow: hidden;\n height: 25px;\n line-height: normal;\n align-content: center;\n display: flex;\n align-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n height: 6px;\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\n outline: 0;\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n box-shadow:\n 0 0 2px rgba(0, 0, 0, 0.3),\n 0 3px 5px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n box-shadow:\n 0 0 2px rgba(0, 0, 0, 0.3),\n 0 3px 5px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n height: 6px;\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n --pops-slider-color-white: #ffffff;\n --pops-slider-color-primary: #409eff;\n --pops-slider-color-info: #909399;\n --pops-slider-text-color-placeholder: #a8abb2;\n --pops-slider-border-color-light: #e4e7ed;\n --pops-slider-border-radius-circle: 100%;\n --pops-slider-transition-duration-fast: 0.2s;\n\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n --pops-slider-border-radius: 3px;\n --pops-slider-height: 6px;\n --pops-slider-button-size: 20px;\n --pops-slider-button-wrapper-size: 36px;\n --pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n width: 100%;\n height: 32px;\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.pops-slider-width {\n flex: 0 0 52%;\n margin-left: 10px;\n}\n\n.pops-slider__runway {\n flex: 1;\n height: var(--pops-slider-height);\n background-color: var(--pops-slider-runway-bg-color);\n border-radius: var(--pops-slider-border-radius);\n position: relative;\n cursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n margin-right: 30px;\n width: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n cursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n background-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n border-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n cursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n transform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n cursor: not-allowed;\n}\n\n.pops-slider__input {\n flex-shrink: 0;\n width: 130px;\n}\n\n.pops-slider__bar {\n height: var(--pops-slider-height);\n background-color: var(--pops-slider-main-bg-color);\n border-top-left-radius: var(--pops-slider-border-radius);\n border-bottom-left-radius: var(--pops-slider-border-radius);\n position: absolute;\n}\n\n.pops-slider__button-wrapper {\n height: var(--pops-slider-button-wrapper-size);\n width: var(--pops-slider-button-wrapper-size);\n position: absolute;\n z-index: 1;\n top: var(--pops-slider-button-wrapper-offset);\n transform: translate(-50%);\n background-color: transparent;\n text-align: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n line-height: normal;\n outline: none;\n}\n\n.pops-slider__button-wrapper:after {\n display: inline-block;\n content: \"\";\n height: 100%;\n vertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n cursor: grab;\n}\n\n.pops-slider__button {\n display: inline-block;\n width: var(--pops-slider-button-size);\n height: var(--pops-slider-button-size);\n vertical-align: middle;\n border: solid 2px var(--pops-slider-main-bg-color);\n background-color: var(--pops-slider-color-white);\n border-radius: 50%;\n box-sizing: border-box;\n transition: var(--pops-slider-transition-duration-fast);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n transform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n cursor: grab;\n}\n\n.pops-slider__button.dragging {\n cursor: grabbing;\n}\n\n.pops-slider__stop {\n position: absolute;\n height: var(--pops-slider-height);\n width: var(--pops-slider-height);\n border-radius: var(--pops-slider-border-radius-circle);\n background-color: var(--pops-slider-stop-bg-color);\n transform: translate(-50%);\n}\n\n.pops-slider__marks {\n top: 0;\n left: 12px;\n width: 18px;\n height: 100%;\n}\n\n.pops-slider__marks-text {\n position: absolute;\n transform: translate(-50%);\n font-size: 14px;\n color: var(--pops-slider-color-info);\n margin-top: 15px;\n white-space: pre;\n}\n\n.pops-slider.is-vertical {\n position: relative;\n display: inline-flex;\n width: auto;\n height: 100%;\n flex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n width: var(--pops-slider-height);\n height: 100%;\n margin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n width: var(--pops-slider-height);\n height: auto;\n border-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n top: auto;\n left: var(--pops-slider-button-wrapper-offset);\n transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n margin-top: 0;\n left: 15px;\n transform: translateY(50%);\n}\n\n.pops-slider--large {\n height: 40px;\n}\n\n.pops-slider--small {\n height: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n --el-disabled-text-color: #a8abb2;\n --el-disabled-bg-color: #f5f7fa;\n --el-disabled-border-color: #e4e7ed;\n\n --pops-panel-components-input-text-color: #000000;\n --pops-panel-components-input-text-bg-color: transparent;\n --pops-panel-components-input-text-default-padding: 8px;\n --pops-panel-components-input-bd-color: #dcdfe6;\n --pops-panel-components-input-bg-color: #ffffff;\n --pops-panel-components-input-hover-bd-color: #c0c4cc;\n --pops-panel-components-input-focus-bd-color: #409eff;\n --pops-panel-components-input-suffix-color: #a8abb2;\n --pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n display: flex;\n align-items: center;\n border: 1px solid var(--pops-panel-components-input-bd-color);\n border-radius: 4px;\n background-color: var(--pops-panel-components-input-bg-color);\n position: relative;\n box-shadow: none;\n}\n.pops-panel-input:hover {\n border: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input:has(input:focus) {\n outline: 0;\n border: 1px solid var(--pops-panel-components-input-focus-bd-color);\n border-radius: 4px;\n box-shadow: none;\n}\n.pops-panel-input input {\n display: inline-flex;\n justify-content: center;\n text-align: start;\n align-items: center;\n align-content: center;\n white-space: nowrap;\n cursor: text;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n vertical-align: middle;\n -webkit-appearance: none;\n appearance: none;\n color: var(--pops-panel-components-input-text-color);\n background-color: var(--pops-panel-components-input-text-bg-color);\n outline: 0;\n transition: 0.1s;\n border: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: normal;\n height: 32px;\n width: 100%;\n flex: 1;\n /*margin-right: calc(1em + 8px);*/\n margin: 0px;\n padding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input span.pops-panel-input__suffix {\n display: inline-flex;\n white-space: nowrap;\n flex-shrink: 0;\n flex-wrap: nowrap;\n height: 100%;\n text-align: center;\n color: var(--pops-panel-components-input-suffix-color);\n background: var(--pops-panel-components-input-suffix-bg-color);\n transition: all 0.3s;\n pointer-events: none;\n padding: 0 8px;\n position: absolute;\n right: 0px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n border: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n pointer-events: all;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n/* 如果包含清空图标的按钮,则默认隐藏清空图标,当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n display: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n display: inline-flex;\n}\n.pops-panel-input .pops-panel-icon {\n cursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n height: inherit;\n line-height: normal;\n align-content: center;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n height: 1em;\n width: 1em;\n}\n\n.pops-input-disabled {\n background-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-input.pops-input-disabled:hover {\n --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--el-disabled-text-color);\n -webkit-text-fill-color: var(--el-disabled-text-color);\n cursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n display: none;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n --pops-panel-components-textarea-text-color: #000000;\n --pops-panel-components-textarea-text-bg-color: #ffffff;\n --pops-panel-components-textarea-bd-color: #dcdfe6;\n --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n --pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n width: 100%;\n /*vertical-align: bottom;*/\n position: relative;\n display: block;\n resize: none;\n padding: 5px 11px;\n /*line-height: 1;*/\n box-sizing: border-box;\n font-size: inherit;\n font-family: inherit;\n color: var(--pops-panel-components-textarea-text-color);\n background-color: var(--pops-panel-components-textarea-text-bg-color);\n background-image: none;\n -webkit-appearance: none;\n appearance: none;\n box-shadow: none;\n border-radius: 0;\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n border: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n border-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n cursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n outline: 0;\n border-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n --pops-panel-components-select-text-color: #000000;\n --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n border: 0;\n}\n.pops-panel-select select {\n height: 32px;\n line-height: normal;\n align-content: center;\n min-width: 200px;\n border: 1px solid var(--pops-panel-components-select-bd-color);\n border-radius: 5px;\n text-align: center;\n outline: 0;\n color: var(--pops-panel-components-select-text-color);\n background-color: var(--pops-panel-components-select-bg-color);\n box-shadow: none;\n}\n.pops-panel-select select:hover {\n border: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n cursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n box-shadow: none;\n --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n box-shadow: none;\n}\n/* select的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple {\n --el-border-radius-base: 4px;\n --el-fill-color-blank: #ffffff;\n --el-transition-duration: 0.3s;\n --el-border-color: #cbcbcb;\n --el-text-color-placeholder: #a8abb2;\n --color: inherit;\n --el-select-input-color: #a8abb2;\n --el-select-input-font-size: 14px;\n --el-text-color-regular: #606266;\n --el-color-info: #909399;\n --el-color-info-light-9: #f4f4f5;\n --el-color-info-light-8: #e9e9eb;\n --el-color-primary-light-9: #ecf5ff;\n --el-color-primary-light-8: #d9ecff;\n --el-color-primary: #409eff;\n --el-color-white: #ffffff;\n width: 200px;\n}\n.pops-panel-select-multiple .el-select__wrapper {\n display: flex;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n cursor: pointer;\n text-align: left;\n font-size: 14px;\n padding: 4px 12px;\n gap: 6px;\n min-height: 32px;\n line-height: normal;\n align-content: center;\n border-radius: var(--el-border-radius-base);\n background-color: var(--el-fill-color-blank);\n transition: var(--el-transition-duration);\n transform: translateZ(0);\n border: 1px solid var(--el-border-color);\n}\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n --el-border-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n flex: 1;\n min-width: 0;\n gap: 6px;\n}\n.pops-panel-select-multiple .el-select__selected-item {\n display: flex;\n flex-wrap: wrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n max-width: 200px;\n}\n.pops-panel-select-multiple .el-select__input-wrapper {\n max-width: 100%;\n}\n.pops-panel-select-multiple .el-select__selection.is-near {\n margin-left: -8px;\n}\n.pops-panel-select-multiple .el-select__placeholder {\n position: absolute;\n display: block;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: var(--el-text-color-placeholder);\n}\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: 6px;\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select-multiple .el-icon {\n --color: inherit;\n height: 1em;\n width: 1em;\n line-height: normal;\n align-content: center;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: var(--color);\n font-size: inherit;\n}\n.pops-panel-select-multiple .el-icon svg {\n height: 1em;\n width: 1em;\n}\n.pops-panel-select-multiple .el-select__caret {\n color: var(--el-select-input-color);\n font-size: var(--el-select-input-font-size);\n transition: var(--el-transition-duration);\n transform: rotate(0);\n cursor: pointer;\n}\n.pops-panel-select-multiple .el-tag {\n --el-tag-font-size: 12px;\n --el-tag-border-radius: 4px;\n --el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n background-color: var(--el-tag-bg-color);\n border-color: var(--el-tag-border-color);\n color: var(--el-tag-text-color);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n height: 24px;\n padding: 0 9px;\n font-size: var(--el-tag-font-size);\n line-height: normal;\n align-content: center;\n border-width: 1px;\n border-style: solid;\n border-radius: var(--el-tag-border-radius);\n box-sizing: border-box;\n white-space: nowrap;\n --el-icon-size: 14px;\n --el-tag-bg-color: var(--el-color-primary-light-9);\n --el-tag-border-color: var(--el-color-primary-light-8);\n --el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n cursor: pointer;\n border-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n --el-tag-bg-color: var(--el-color-info-light-9);\n --el-tag-border-color: var(--el-color-info-light-8);\n --el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n --el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n padding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n min-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n flex-shrink: 0;\n color: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n color: var(--el-color-white);\n background-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n border-radius: 50%;\n cursor: pointer;\n font-size: calc(var(--el-icon-size) - 2px);\n height: var(--el-icon-size);\n width: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n margin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n display: block;\n line-height: normal;\n align-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pops-panel-select-multiple-disable {\n --el-fill-color-blank: #f5f7fa;\n --color: #a8abb2;\n --el-border-color: #cbcbcb;\n}\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\n --el-tag-bg-color: #e7e7e7;\n --el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-multiple-disable .el-select__wrapper,\n.pops-panel-select-multiple-disable .el-select__caret {\n cursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n cursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n var(--pops-panel-forms-container-li-padding-left-right);\n margin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\n border-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\n border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\n border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n display: flex;\n align-items: center;\n color: #6c6c6c;\n fill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n width: 15px;\n height: 15px;\n display: flex;\n align-items: center;\n}\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\n display: flex;\n align-items: center;\n width: -webkit-fill-available;\n width: -moz-available;\n padding: var(--pops-panel-forms-header-padding-top-bottom)\n calc(\n var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n var(--pops-panel-forms-header-icon-size)\n );\n gap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n width: var(--pops-panel-forms-header-icon-size);\n height: var(--pops-panel-forms-header-icon-size);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n width: inherit;\n height: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n .pops[type-value=\"panel\"] {\n --pops-bg-color: #000000;\n --pops-color: #f2f2f2;\n --panel-title-bg-color: #000000;\n --panel-aside-bg-color: #262626;\n --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n --pops-panel-forms-container-item-bg-color: #262626;\n --pops-panel-forms-container-item-title-color: #c1c1c1;\n\n --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n }\n .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n fill: #f2f2f2;\n }\n\n /* switch的CSS */\n .pops-panel-switch {\n --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n --panel-switch-circle-color: #dcdfe6;\n --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n --panel-switch-checked-circle-color: #409eff;\n --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n }\n /* select的CSS */\n .pops-panel-select {\n --pops-panel-components-select-text-color: #f2f2f2;\n --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n --pops-panel-components-select-bg-color: #141414;\n }\n /* select-multiple的CSS*/\n .pops-panel-select-multiple {\n --el-fill-color-blank: #141414;\n --el-border-color: #4c4d4f;\n --el-text-color-placeholder: #a8abb2;\n --el-select-input-color: #a8abb2;\n --el-text-color-regular: #606266;\n --el-color-info: #909399;\n --el-color-info-light-8: #e9e9eb;\n --el-color-primary-light-9: #ecf5ff;\n --el-color-primary-light-8: #d9ecff;\n --el-color-primary: #409eff;\n --el-color-white: #ffffff;\n }\n .pops-panel-select-multiple .el-tag {\n --el-color-info-light-9: #202121;\n }\n .pops-panel-select-multiple-disable {\n --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n }\n .pops-panel-select-multiple-disable .el-tag.el-tag--info {\n --el-tag-bg-color: #2f2f2f;\n }\n /* select-multiple的CSS*/\n /* slider的CSS */\n .pops-slider {\n --pops-slider-border-color-light: #414243;\n }\n /* input的CSS */\n .pops-panel-input {\n --pops-panel-components-input-text-color: #f2f2f2;\n --pops-panel-components-input-bd-color: #4f5052;\n --pops-panel-components-input-bg-color: #141414;\n --pops-panel-components-input-hover-bd-color: #6f7175;\n --pops-panel-components-input-focus-bd-color: #409eff;\n --pops-panel-components-input-suffix-color: #a8abb2;\n }\n /* textarea的CSS */\n .pops-panel-textarea {\n --pops-panel-components-textarea-text-color: #f2f2f2;\n --pops-panel-components-textarea-text-bg-color: #141414;\n --pops-panel-components-textarea-bd-color: #4f5052;\n --pops-panel-components-textarea-hover-bd-color: #6f7175;\n --pops-panel-components-textarea-focus-bd-color: #409eff;\n }\n .pops-panel-textarea-disable {\n --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n }\n /* slider */\n .pops-slider {\n --pops-slider-text-color-placeholder: #8d9095;\n }\n}\n";
|
|
2853
2834
|
|
|
2854
|
-
var rightClickMenuCSS = ".pops-rightClickMenu {\n
|
|
2835
|
+
var rightClickMenuCSS = ".pops-rightClickMenu {\n --pops-right-context-color: #000000;\n --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\n --pops-right-context-backdrop-filter: blur(10px);\n --pops-right-context-z-index: 10000;\n --pops-right-context-bd-radius: 6px;\n --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\n --pops-right-context-menu-row-bd-radius: 6px;\n --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\n --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\n}\n.pops-rightClickMenu * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n scrollbar-width: thin;\n}\n.pops-rightClickMenu {\n position: fixed;\n z-index: var(--pops-right-context-z-index);\n text-align: center;\n border-radius: var(--pops-right-context-bd-radius);\n font-size: 16px;\n font-weight: 500;\n color: var(--pops-right-context-color);\n background: var(--pops-right-context-bg-color);\n box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\n -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\n backdrop-filter: var(--pops-right-context-backdrop-filter);\n}\n/* scale动画 */\n.pops-rightClickMenu-anim-scale {\n transition:\n opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\n transform: scale(0.85);\n}\n.pops-rightClickMenu-anim-scale-open {\n transform: scale(1);\n}\n.pops-rightClickMenu-anim-scale-not-open {\n opacity: 0;\n}\n/* 展开动画 */\n.pops-rightClickMenu-anim-grid {\n display: grid;\n transition: 0.3s;\n grid-template-rows: 0fr;\n}\n.pops-rightClickMenu-anim-show {\n grid-template-rows: 1fr;\n}\n.pops-rightClickMenu-is-visited {\n background: var(--pops-right-context-menu-row-visited-color);\n}\ni.pops-rightClickMenu-icon {\n height: 1em;\n width: 1em;\n line-height: normal;\n align-content: center;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n fill: currentColor;\n color: inherit;\n font-size: inherit;\n margin-right: 6px;\n}\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\n animation: rotating 2s linear infinite;\n}\n.pops-rightClickMenu li:hover {\n background: var(--pops-right-context-menu-row-hover-color);\n cursor: pointer;\n}\n.pops-rightClickMenu ul {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n overflow: hidden;\n}\n.pops-rightClickMenu ul li {\n padding: 5px 10px;\n margin: 5px 5px;\n border-radius: var(--pops-right-context-menu-row-bd-radius);\n display: flex;\n width: -webkit-fill-available;\n width: -moz-available;\n text-align: left;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n@media (prefers-color-scheme: dark) {\n /*.pops-rightClickMenu {\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\n\t}*/\n}\n@media (hover: hover) {\n .pops-rightClickMenu ul li:active {\n transform: scale(0.98);\n }\n}\n";
|
|
2855
2836
|
|
|
2856
2837
|
const PopsCSS = {
|
|
2857
2838
|
/** 主CSS */
|
|
@@ -2898,7 +2879,7 @@ const PopsAnimation = {
|
|
|
2898
2879
|
if (!this.$flag.isInit) {
|
|
2899
2880
|
this.$flag.isInit = true;
|
|
2900
2881
|
/* 处理获取当前所有的动画名 */
|
|
2901
|
-
|
|
2882
|
+
const animationStyle = document.createElement("style");
|
|
2902
2883
|
PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
|
|
2903
2884
|
popsDOMUtils.appendHead(animationStyle);
|
|
2904
2885
|
this.$data = null;
|
|
@@ -2912,7 +2893,7 @@ const PopsAnimation = {
|
|
|
2912
2893
|
* 判断是否存在某个动画名
|
|
2913
2894
|
*/
|
|
2914
2895
|
hasAnim(name) {
|
|
2915
|
-
return this.$data
|
|
2896
|
+
return Object.prototype.hasOwnProperty.call(this.$data, name);
|
|
2916
2897
|
},
|
|
2917
2898
|
};
|
|
2918
2899
|
|
|
@@ -2955,7 +2936,6 @@ const PopsInstanceUtils = {
|
|
|
2955
2936
|
// 当前页面最大的z-index
|
|
2956
2937
|
let zIndex = 0;
|
|
2957
2938
|
// 当前的最大z-index的元素,调试使用
|
|
2958
|
-
// @ts-ignore
|
|
2959
2939
|
let maxZIndexNode = null;
|
|
2960
2940
|
/**
|
|
2961
2941
|
* 元素是否可见
|
|
@@ -2971,7 +2951,7 @@ const PopsInstanceUtils = {
|
|
|
2971
2951
|
*/
|
|
2972
2952
|
function queryMaxZIndex($ele) {
|
|
2973
2953
|
if (typeof ignoreCallBack === "function") {
|
|
2974
|
-
|
|
2954
|
+
const ignoreResult = ignoreCallBack($ele);
|
|
2975
2955
|
if (typeof ignoreResult === "boolean" && !ignoreResult) {
|
|
2976
2956
|
return;
|
|
2977
2957
|
}
|
|
@@ -2980,7 +2960,7 @@ const PopsInstanceUtils = {
|
|
|
2980
2960
|
const nodeStyle = PopsCore.window.getComputedStyle($ele);
|
|
2981
2961
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
2982
2962
|
if (isVisibleNode(nodeStyle)) {
|
|
2983
|
-
|
|
2963
|
+
const nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
2984
2964
|
if (!isNaN(nodeZIndex)) {
|
|
2985
2965
|
if (nodeZIndex > zIndex) {
|
|
2986
2966
|
// 赋值到全局
|
|
@@ -2996,7 +2976,7 @@ const PopsInstanceUtils = {
|
|
|
2996
2976
|
}
|
|
2997
2977
|
}
|
|
2998
2978
|
}
|
|
2999
|
-
target.querySelectorAll("*").forEach(($ele
|
|
2979
|
+
target.querySelectorAll("*").forEach(($ele) => {
|
|
3000
2980
|
queryMaxZIndex($ele);
|
|
3001
2981
|
});
|
|
3002
2982
|
zIndex += deviation;
|
|
@@ -3031,13 +3011,13 @@ const PopsInstanceUtils = {
|
|
|
3031
3011
|
return $css.position !== "static" && $css.display !== "none";
|
|
3032
3012
|
}
|
|
3033
3013
|
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3034
|
-
|
|
3014
|
+
const instData = PopsInstData[instKeyName];
|
|
3035
3015
|
for (let index = 0; index < instData.length; index++) {
|
|
3036
3016
|
const inst = instData[index];
|
|
3037
|
-
|
|
3017
|
+
const nodeStyle = window.getComputedStyle(inst.animElement);
|
|
3038
3018
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
3039
3019
|
if (isVisibleNode(nodeStyle)) {
|
|
3040
|
-
|
|
3020
|
+
const nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
3041
3021
|
if (!isNaN(nodeZIndex)) {
|
|
3042
3022
|
if (nodeZIndex > zIndex) {
|
|
3043
3023
|
zIndex = nodeZIndex;
|
|
@@ -3048,7 +3028,7 @@ const PopsInstanceUtils = {
|
|
|
3048
3028
|
}
|
|
3049
3029
|
});
|
|
3050
3030
|
zIndex += deviation;
|
|
3051
|
-
|
|
3031
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3052
3032
|
if (isOverMaxZIndex) {
|
|
3053
3033
|
// 超出z-index最大值
|
|
3054
3034
|
zIndex = maxZIndex;
|
|
@@ -3093,9 +3073,9 @@ const PopsInstanceUtils = {
|
|
|
3093
3073
|
// 移除全部或者guid相同
|
|
3094
3074
|
if (isAll || instConfigItem["guid"] === guid) {
|
|
3095
3075
|
// 判断是否有动画
|
|
3096
|
-
|
|
3076
|
+
const animName = instConfigItem.animElement.getAttribute("anim");
|
|
3097
3077
|
if (PopsAnimation.hasAnim(animName)) {
|
|
3098
|
-
|
|
3078
|
+
const reverseAnimName = animName + "-reverse";
|
|
3099
3079
|
instConfigItem.animElement.style.width = "100%";
|
|
3100
3080
|
instConfigItem.animElement.style.height = "100%";
|
|
3101
3081
|
instConfigItem.animElement.style["animation-name"] = reverseAnimName;
|
|
@@ -3130,9 +3110,9 @@ const PopsInstanceUtils = {
|
|
|
3130
3110
|
*/
|
|
3131
3111
|
hide(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
3132
3112
|
return new Promise((resolve) => {
|
|
3133
|
-
|
|
3113
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3134
3114
|
if (popsType === "drawer") {
|
|
3135
|
-
|
|
3115
|
+
const drawerConfig = config;
|
|
3136
3116
|
popsUtils.setTimeout(() => {
|
|
3137
3117
|
maskElement.style.setProperty("display", "none");
|
|
3138
3118
|
if (["top", "bottom"].includes(drawerConfig.direction)) {
|
|
@@ -3148,18 +3128,14 @@ const PopsInstanceUtils = {
|
|
|
3148
3128
|
}, drawerConfig.closeDelay);
|
|
3149
3129
|
}
|
|
3150
3130
|
else {
|
|
3151
|
-
|
|
3131
|
+
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3152
3132
|
if (fintInst) {
|
|
3153
3133
|
/* 存在动画 */
|
|
3154
|
-
|
|
3134
|
+
const instConfigItem = fintInst;
|
|
3155
3135
|
instConfigItem.animElement.style.width = "100%";
|
|
3156
3136
|
instConfigItem.animElement.style.height = "100%";
|
|
3157
|
-
|
|
3158
|
-
instConfigItem.animElement.style
|
|
3159
|
-
instConfigItem.animElement.getAttribute("anim") + "-reverse";
|
|
3160
|
-
if (PopsAnimation.hasAnim(
|
|
3161
|
-
// @ts-ignore
|
|
3162
|
-
instConfigItem.animElement.style["animation-name"])) {
|
|
3137
|
+
Reflect.set(instConfigItem.animElement.style, "animation-name", instConfigItem.animElement.getAttribute("anim") + "-reverse");
|
|
3138
|
+
if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.animElement.style, "animation-name"))) {
|
|
3163
3139
|
/**
|
|
3164
3140
|
* 动画结束的回调
|
|
3165
3141
|
*/
|
|
@@ -3199,13 +3175,13 @@ const PopsInstanceUtils = {
|
|
|
3199
3175
|
*/
|
|
3200
3176
|
show(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
3201
3177
|
return new Promise((resolve) => {
|
|
3202
|
-
|
|
3178
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3203
3179
|
if (popsType === "drawer") {
|
|
3204
|
-
|
|
3180
|
+
const drawerConfig = config;
|
|
3205
3181
|
popsUtils.setTimeout(() => {
|
|
3206
3182
|
popsDOMUtils.css(maskElement, "display", "");
|
|
3207
|
-
|
|
3208
|
-
|
|
3183
|
+
const direction = drawerConfig.direction;
|
|
3184
|
+
const size = drawerConfig.size.toString();
|
|
3209
3185
|
if (["top", "bottom"].includes(direction)) {
|
|
3210
3186
|
popsElement.style.setProperty("height", size);
|
|
3211
3187
|
}
|
|
@@ -3219,18 +3195,13 @@ const PopsInstanceUtils = {
|
|
|
3219
3195
|
}, drawerConfig.openDelay ?? 0);
|
|
3220
3196
|
}
|
|
3221
3197
|
else {
|
|
3222
|
-
|
|
3198
|
+
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3223
3199
|
if (fintInst) {
|
|
3224
|
-
|
|
3200
|
+
const instConfigItem = fintInst;
|
|
3225
3201
|
instConfigItem.animElement.style.width = "";
|
|
3226
3202
|
instConfigItem.animElement.style.height = "";
|
|
3227
|
-
|
|
3228
|
-
instConfigItem.animElement.style
|
|
3229
|
-
.animElement.getAttribute("anim")
|
|
3230
|
-
.replace("-reverse", "");
|
|
3231
|
-
if (PopsAnimation.hasAnim(
|
|
3232
|
-
// @ts-ignore
|
|
3233
|
-
instConfigItem.animElement.style["animation-name"])) {
|
|
3203
|
+
Reflect.set(instConfigItem.animElement.style, "animation-name", instConfigItem.animElement.getAttribute("anim").replace("-reverse", ""));
|
|
3204
|
+
if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.animElement.style, "animation-name"))) {
|
|
3234
3205
|
/**
|
|
3235
3206
|
* 动画结束的回调
|
|
3236
3207
|
*/
|
|
@@ -3269,8 +3240,8 @@ const PopsInstanceUtils = {
|
|
|
3269
3240
|
*/
|
|
3270
3241
|
close(popsType, instConfigList, guid, config, animElement) {
|
|
3271
3242
|
return new Promise((resolve) => {
|
|
3272
|
-
|
|
3273
|
-
|
|
3243
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3244
|
+
const drawerConfig = config;
|
|
3274
3245
|
/**
|
|
3275
3246
|
* 动画结束事件
|
|
3276
3247
|
*/
|
|
@@ -3288,7 +3259,7 @@ const PopsInstanceUtils = {
|
|
|
3288
3259
|
}
|
|
3289
3260
|
/* 监听过渡结束 */
|
|
3290
3261
|
popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
|
|
3291
|
-
|
|
3262
|
+
const popsTransForm = getComputedStyle(popsElement).transform;
|
|
3292
3263
|
if (popsTransForm !== "none") {
|
|
3293
3264
|
popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
|
|
3294
3265
|
return;
|
|
@@ -3340,8 +3311,8 @@ const PopsInstanceUtils = {
|
|
|
3340
3311
|
let clickElementLeftOffset = 0;
|
|
3341
3312
|
/* 点击元素,top偏移 */
|
|
3342
3313
|
let clickElementTopOffset = 0;
|
|
3343
|
-
|
|
3344
|
-
|
|
3314
|
+
const AnyTouch = popsUtils.AnyTouch();
|
|
3315
|
+
const anyTouchElement = new AnyTouch(options.dragElement, {
|
|
3345
3316
|
preventDefault(event) {
|
|
3346
3317
|
if (typeof options.preventEvent === "function") {
|
|
3347
3318
|
return options.preventEvent(event);
|
|
@@ -3359,7 +3330,7 @@ const PopsInstanceUtils = {
|
|
|
3359
3330
|
* 修改移动的元素的style
|
|
3360
3331
|
*/
|
|
3361
3332
|
function changeMoveElementStyle(element) {
|
|
3362
|
-
|
|
3333
|
+
const old_transitionDuration = element.style.transitionDuration;
|
|
3363
3334
|
if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
|
|
3364
3335
|
element.style.transitionDuration = "0s";
|
|
3365
3336
|
}
|
|
@@ -3389,7 +3360,7 @@ const PopsInstanceUtils = {
|
|
|
3389
3360
|
};
|
|
3390
3361
|
}
|
|
3391
3362
|
else {
|
|
3392
|
-
|
|
3363
|
+
const rect = container.getBoundingClientRect();
|
|
3393
3364
|
return {
|
|
3394
3365
|
left: rect.left,
|
|
3395
3366
|
top: rect.top,
|
|
@@ -3402,7 +3373,7 @@ const PopsInstanceUtils = {
|
|
|
3402
3373
|
anyTouchElement.on("pan", function (event) {
|
|
3403
3374
|
if (!isMove) {
|
|
3404
3375
|
isMove = true;
|
|
3405
|
-
|
|
3376
|
+
const rect = options.dragElement.getBoundingClientRect();
|
|
3406
3377
|
clickElementLeftOffset = event.x - rect.left;
|
|
3407
3378
|
clickElementTopOffset = event.y - rect.top;
|
|
3408
3379
|
transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
@@ -3427,12 +3398,12 @@ const PopsInstanceUtils = {
|
|
|
3427
3398
|
if (options.limit) {
|
|
3428
3399
|
/* 限制在容器内移动 */
|
|
3429
3400
|
/* left偏移最大值 */
|
|
3430
|
-
|
|
3401
|
+
const maxLeftOffset = getContainerWidthOrHeight(options.container).width -
|
|
3431
3402
|
popsDOMUtils.width(moveElement) +
|
|
3432
3403
|
transformInfo.transformLeft;
|
|
3433
|
-
|
|
3404
|
+
const { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
|
|
3434
3405
|
/* top偏移的最大值 */
|
|
3435
|
-
|
|
3406
|
+
const maxTopOffset = getContainerWidthOrHeight(options.container).height -
|
|
3436
3407
|
popsDOMUtils.height(moveElement) +
|
|
3437
3408
|
transformInfo.transformTop;
|
|
3438
3409
|
if (currentMoveLeftOffset > maxLeftOffset) {
|
|
@@ -3443,8 +3414,7 @@ const PopsInstanceUtils = {
|
|
|
3443
3414
|
/* 不允许超过容器的最大高度 */
|
|
3444
3415
|
currentMoveTopOffset = maxTopOffset;
|
|
3445
3416
|
}
|
|
3446
|
-
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3447
|
-
minLeftOffset + transformInfo.transformLeft) {
|
|
3417
|
+
if (currentMoveLeftOffset - options.extraDistance * 2 < minLeftOffset + transformInfo.transformLeft) {
|
|
3448
3418
|
/* 不允许left偏移小于容器最小值 */
|
|
3449
3419
|
currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
|
|
3450
3420
|
/* 最左边 +额外距离 */
|
|
@@ -3508,8 +3478,8 @@ const PopsInstanceUtils = {
|
|
|
3508
3478
|
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3509
3479
|
}
|
|
3510
3480
|
return function (after_obj, before_obj) {
|
|
3511
|
-
|
|
3512
|
-
|
|
3481
|
+
const beforeValue = getBeforeValueFun(before_obj); /* 前 */
|
|
3482
|
+
const afterValue = getAfterValueFun(after_obj); /* 后 */
|
|
3513
3483
|
if (sortByDesc) {
|
|
3514
3484
|
if (afterValue > beforeValue) {
|
|
3515
3485
|
return -1;
|
|
@@ -3541,10 +3511,10 @@ const PopsHandler = {
|
|
|
3541
3511
|
* 创建shadow
|
|
3542
3512
|
*/
|
|
3543
3513
|
handlerShadow(config) {
|
|
3544
|
-
|
|
3514
|
+
const $shadowContainer = document.createElement("div");
|
|
3545
3515
|
$shadowContainer.className = "pops-shadow-container";
|
|
3546
3516
|
if (config.useShadowRoot) {
|
|
3547
|
-
|
|
3517
|
+
const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
|
|
3548
3518
|
return {
|
|
3549
3519
|
$shadowContainer,
|
|
3550
3520
|
$shadowRoot,
|
|
@@ -3596,7 +3566,7 @@ const PopsHandler = {
|
|
|
3596
3566
|
});
|
|
3597
3567
|
}
|
|
3598
3568
|
for (const cssItem of css) {
|
|
3599
|
-
|
|
3569
|
+
const $css = popsDOMUtils.createElement("style", {}, {
|
|
3600
3570
|
"data-type": "PopsHandler.handleInit",
|
|
3601
3571
|
});
|
|
3602
3572
|
$css.textContent = cssItem.css;
|
|
@@ -3613,7 +3583,7 @@ const PopsHandler = {
|
|
|
3613
3583
|
* @param details 传递的配置
|
|
3614
3584
|
*/
|
|
3615
3585
|
handleMask(details = {}) {
|
|
3616
|
-
|
|
3586
|
+
const result = {
|
|
3617
3587
|
maskElement: popsDOMUtils.parseTextToDOM(details.maskHTML),
|
|
3618
3588
|
};
|
|
3619
3589
|
let isMaskClick = false;
|
|
@@ -3624,7 +3594,7 @@ const PopsHandler = {
|
|
|
3624
3594
|
function clickEvent(event) {
|
|
3625
3595
|
popsDOMUtils.preventEvent(event);
|
|
3626
3596
|
// 获取该类型实例存储列表
|
|
3627
|
-
|
|
3597
|
+
const targetInst = PopsInstData[details.type];
|
|
3628
3598
|
function originalRun() {
|
|
3629
3599
|
if (details.config.mask.clickEvent.toClose) {
|
|
3630
3600
|
/* 关闭 */
|
|
@@ -3658,12 +3628,12 @@ const PopsHandler = {
|
|
|
3658
3628
|
}
|
|
3659
3629
|
/* 判断按下的元素是否是pops-anim */
|
|
3660
3630
|
popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
|
|
3661
|
-
|
|
3631
|
+
const $click = event.composedPath()[0];
|
|
3662
3632
|
isMaskClick = isAnimElement($click);
|
|
3663
3633
|
});
|
|
3664
3634
|
/* 如果有动画层,在动画层上监听点击事件 */
|
|
3665
3635
|
popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
|
|
3666
|
-
|
|
3636
|
+
const $click = event.composedPath()[0];
|
|
3667
3637
|
if (isAnimElement($click) && isMaskClick) {
|
|
3668
3638
|
return clickEvent(event);
|
|
3669
3639
|
}
|
|
@@ -3856,7 +3826,7 @@ const PopsHandler = {
|
|
|
3856
3826
|
* 处理返回的配置,针对popsHandler.handleEventDetails
|
|
3857
3827
|
*/
|
|
3858
3828
|
handleResultDetails(details) {
|
|
3859
|
-
|
|
3829
|
+
const resultDetails = Object.assign({}, details);
|
|
3860
3830
|
popsUtils.delete(resultDetails, "type");
|
|
3861
3831
|
popsUtils.delete(resultDetails, "function");
|
|
3862
3832
|
return resultDetails;
|
|
@@ -3870,7 +3840,7 @@ const PopsHandler = {
|
|
|
3870
3840
|
*/
|
|
3871
3841
|
handleClickEvent(type, $btn, eventDetails, callback) {
|
|
3872
3842
|
popsDOMUtils.on($btn, "click", (event) => {
|
|
3873
|
-
|
|
3843
|
+
const extraParam = {
|
|
3874
3844
|
type: type,
|
|
3875
3845
|
};
|
|
3876
3846
|
callback(Object.assign(eventDetails, extraParam), event);
|
|
@@ -3885,9 +3855,9 @@ const PopsHandler = {
|
|
|
3885
3855
|
* @param callback 回调函数
|
|
3886
3856
|
*/
|
|
3887
3857
|
handleKeyboardEvent(keyName, otherKeyList = [], callback) {
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3858
|
+
const keyboardEvent = function (event) {
|
|
3859
|
+
const _keyName = event.code || event.key;
|
|
3860
|
+
const _keyValue = event.charCode || event.keyCode || event.which;
|
|
3891
3861
|
if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
|
|
3892
3862
|
return;
|
|
3893
3863
|
}
|
|
@@ -3929,7 +3899,7 @@ const PopsHandler = {
|
|
|
3929
3899
|
handlePromptClickEvent(type, inputElement, $btn, eventDetails, callback) {
|
|
3930
3900
|
popsDOMUtils.on($btn, "click", (event) => {
|
|
3931
3901
|
// 额外参数
|
|
3932
|
-
|
|
3902
|
+
const extraParam = {
|
|
3933
3903
|
type: type,
|
|
3934
3904
|
text: inputElement.value,
|
|
3935
3905
|
};
|
|
@@ -3962,7 +3932,7 @@ const PopsHandler = {
|
|
|
3962
3932
|
// .rightClickMenu
|
|
3963
3933
|
// 单独处理
|
|
3964
3934
|
if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
|
|
3965
|
-
|
|
3935
|
+
const inst = PopsInstData[type];
|
|
3966
3936
|
if (inst) {
|
|
3967
3937
|
PopsInstanceUtils.removeInstance([inst], "", true);
|
|
3968
3938
|
}
|
|
@@ -3982,7 +3952,7 @@ const PopsHandler = {
|
|
|
3982
3952
|
else {
|
|
3983
3953
|
// 对配置进行处理
|
|
3984
3954
|
// 选择配置的z-index和已有的pops实例的最大z-index值
|
|
3985
|
-
|
|
3955
|
+
const originZIndex = config.zIndex;
|
|
3986
3956
|
config.zIndex = () => {
|
|
3987
3957
|
const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
|
|
3988
3958
|
return maxZIndex;
|
|
@@ -4102,13 +4072,13 @@ const PopsAlert = {
|
|
|
4102
4072
|
},
|
|
4103
4073
|
]);
|
|
4104
4074
|
// 先把z-index提取出来
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4075
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4076
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4077
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4078
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4079
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4080
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4081
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4112
4082
|
/*html*/ `
|
|
4113
4083
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4114
4084
|
? config.title.text
|
|
@@ -4119,15 +4089,15 @@ const PopsAlert = {
|
|
|
4119
4089
|
/**
|
|
4120
4090
|
* 弹窗的主元素,包括动画层
|
|
4121
4091
|
*/
|
|
4122
|
-
|
|
4123
|
-
|
|
4092
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4093
|
+
const { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4124
4094
|
/** 遮罩层元素 */
|
|
4125
4095
|
let $mask = null;
|
|
4126
4096
|
/** 已创建的元素列表 */
|
|
4127
|
-
|
|
4097
|
+
const elementList = [$anim];
|
|
4128
4098
|
/* 遮罩层元素 */
|
|
4129
4099
|
if (config.mask.enable) {
|
|
4130
|
-
|
|
4100
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4131
4101
|
type: popsType,
|
|
4132
4102
|
guid: guid,
|
|
4133
4103
|
config: config,
|
|
@@ -4138,7 +4108,7 @@ const PopsAlert = {
|
|
|
4138
4108
|
elementList.push($mask);
|
|
4139
4109
|
}
|
|
4140
4110
|
/* 处理返回的配置 */
|
|
4141
|
-
|
|
4111
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4142
4112
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4143
4113
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4144
4114
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4172,7 +4142,7 @@ const PopsAlert = {
|
|
|
4172
4142
|
endCallBack: config.dragEndCallBack,
|
|
4173
4143
|
});
|
|
4174
4144
|
}
|
|
4175
|
-
|
|
4145
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4176
4146
|
return result;
|
|
4177
4147
|
},
|
|
4178
4148
|
};
|
|
@@ -4306,13 +4276,13 @@ const PopsConfirm = {
|
|
|
4306
4276
|
},
|
|
4307
4277
|
]);
|
|
4308
4278
|
// 先把z-index提取出来
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4279
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4280
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4281
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4282
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4283
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4284
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4285
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4316
4286
|
/*html*/ `
|
|
4317
4287
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4318
4288
|
? config.title.text
|
|
@@ -4323,8 +4293,8 @@ const PopsConfirm = {
|
|
|
4323
4293
|
/**
|
|
4324
4294
|
* 弹窗的主元素,包括动画层
|
|
4325
4295
|
*/
|
|
4326
|
-
|
|
4327
|
-
|
|
4296
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4297
|
+
const { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4328
4298
|
/**
|
|
4329
4299
|
* 遮罩层元素
|
|
4330
4300
|
*/
|
|
@@ -4332,10 +4302,10 @@ const PopsConfirm = {
|
|
|
4332
4302
|
/**
|
|
4333
4303
|
* 已创建的元素列表
|
|
4334
4304
|
*/
|
|
4335
|
-
|
|
4305
|
+
const elementList = [$anim];
|
|
4336
4306
|
if (config.mask.enable) {
|
|
4337
4307
|
// 启用遮罩层
|
|
4338
|
-
|
|
4308
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4339
4309
|
type: popsType,
|
|
4340
4310
|
guid: guid,
|
|
4341
4311
|
config: config,
|
|
@@ -4345,7 +4315,7 @@ const PopsConfirm = {
|
|
|
4345
4315
|
$mask = _handleMask_.maskElement;
|
|
4346
4316
|
elementList.push($mask);
|
|
4347
4317
|
}
|
|
4348
|
-
|
|
4318
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4349
4319
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4350
4320
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4351
4321
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4377,7 +4347,7 @@ const PopsConfirm = {
|
|
|
4377
4347
|
endCallBack: config.dragEndCallBack,
|
|
4378
4348
|
});
|
|
4379
4349
|
}
|
|
4380
|
-
|
|
4350
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4381
4351
|
return result;
|
|
4382
4352
|
},
|
|
4383
4353
|
};
|
|
@@ -4510,13 +4480,13 @@ const PopsDrawer = {
|
|
|
4510
4480
|
},
|
|
4511
4481
|
]);
|
|
4512
4482
|
// 先把z-index提取出来
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4483
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4484
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4485
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4486
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4487
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4488
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4489
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4520
4490
|
/*html*/ `
|
|
4521
4491
|
${config.title.enable
|
|
4522
4492
|
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
@@ -4529,13 +4499,13 @@ const PopsDrawer = {
|
|
|
4529
4499
|
/**
|
|
4530
4500
|
* 弹窗的主元素,包括动画层
|
|
4531
4501
|
*/
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4502
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4503
|
+
const { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4504
|
+
const $pops = popsElement;
|
|
4505
|
+
const $headerCloseBtn = headerCloseBtnElement;
|
|
4506
|
+
const $btnCancel = btnCancelElement;
|
|
4507
|
+
const $btnOk = btnOkElement;
|
|
4508
|
+
const $btnOther = btnOtherElement;
|
|
4539
4509
|
/**
|
|
4540
4510
|
* 遮罩层元素
|
|
4541
4511
|
*/
|
|
@@ -4543,9 +4513,9 @@ const PopsDrawer = {
|
|
|
4543
4513
|
/**
|
|
4544
4514
|
* 已创建的元素列表
|
|
4545
4515
|
*/
|
|
4546
|
-
|
|
4516
|
+
const elementList = [$anim];
|
|
4547
4517
|
if (config.mask.enable) {
|
|
4548
|
-
|
|
4518
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4549
4519
|
type: popsType,
|
|
4550
4520
|
guid: guid,
|
|
4551
4521
|
config: config,
|
|
@@ -4555,7 +4525,7 @@ const PopsDrawer = {
|
|
|
4555
4525
|
$mask = _handleMask_.maskElement;
|
|
4556
4526
|
elementList.push($mask);
|
|
4557
4527
|
}
|
|
4558
|
-
|
|
4528
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4559
4529
|
/* 处理方向 */
|
|
4560
4530
|
$pops.setAttribute("direction", config.direction);
|
|
4561
4531
|
/* 处理border-radius */
|
|
@@ -4583,7 +4553,7 @@ const PopsDrawer = {
|
|
|
4583
4553
|
});
|
|
4584
4554
|
}
|
|
4585
4555
|
/* 待处理的点击事件列表 */
|
|
4586
|
-
|
|
4556
|
+
const needHandleClickEventList = [
|
|
4587
4557
|
{
|
|
4588
4558
|
type: "close",
|
|
4589
4559
|
ele: $headerCloseBtn,
|
|
@@ -4651,7 +4621,7 @@ const PopsDrawer = {
|
|
|
4651
4621
|
$shadowContainer: $shadowContainer,
|
|
4652
4622
|
$shadowRoot: $shadowRoot,
|
|
4653
4623
|
});
|
|
4654
|
-
|
|
4624
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4655
4625
|
return result;
|
|
4656
4626
|
},
|
|
4657
4627
|
};
|
|
@@ -4689,14 +4659,14 @@ const PopsLoading = {
|
|
|
4689
4659
|
let config = PopsLoadingConfig();
|
|
4690
4660
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4691
4661
|
config = popsUtils.assign(config, details);
|
|
4692
|
-
|
|
4662
|
+
const guid = popsUtils.getRandomGUID();
|
|
4693
4663
|
const PopsType = "loading";
|
|
4694
4664
|
config = PopsHandler.handleOnly(PopsType, config);
|
|
4695
4665
|
// 先把z-index提取出来
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4666
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4667
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4668
|
+
const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
|
|
4669
|
+
const animHTML = PopsElementHandler.createAnim(guid, PopsType, config,
|
|
4700
4670
|
/*html*/ `
|
|
4701
4671
|
<div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
|
|
4702
4672
|
? /*html*/ `
|
|
@@ -4714,8 +4684,8 @@ const PopsLoading = {
|
|
|
4714
4684
|
/**
|
|
4715
4685
|
* 弹窗的主元素,包括动画层
|
|
4716
4686
|
*/
|
|
4717
|
-
|
|
4718
|
-
|
|
4687
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4688
|
+
const { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
|
|
4719
4689
|
/**
|
|
4720
4690
|
* 遮罩层元素
|
|
4721
4691
|
*/
|
|
@@ -4723,10 +4693,10 @@ const PopsLoading = {
|
|
|
4723
4693
|
/**
|
|
4724
4694
|
* 已创建的元素列表
|
|
4725
4695
|
*/
|
|
4726
|
-
|
|
4696
|
+
const elementList = [$anim];
|
|
4727
4697
|
if (config.mask.enable) {
|
|
4728
4698
|
// 创建遮罩层
|
|
4729
|
-
|
|
4699
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4730
4700
|
type: PopsType,
|
|
4731
4701
|
guid: guid,
|
|
4732
4702
|
config: config,
|
|
@@ -4736,7 +4706,7 @@ const PopsLoading = {
|
|
|
4736
4706
|
$mask = _handleMask_.maskElement;
|
|
4737
4707
|
elementList.push($mask);
|
|
4738
4708
|
}
|
|
4739
|
-
|
|
4709
|
+
const eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops, $mask, config);
|
|
4740
4710
|
popsDOMUtils.append(config.parent, elementList);
|
|
4741
4711
|
if ($mask != null) {
|
|
4742
4712
|
$anim.after($mask);
|
|
@@ -4753,7 +4723,7 @@ const PopsLoading = {
|
|
|
4753
4723
|
popsDOMUtils.css($anim, "position", "absolute !important");
|
|
4754
4724
|
$mask && popsDOMUtils.css($mask, "position", "absolute !important");
|
|
4755
4725
|
}
|
|
4756
|
-
|
|
4726
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4757
4727
|
return result;
|
|
4758
4728
|
},
|
|
4759
4729
|
};
|
|
@@ -4973,20 +4943,14 @@ const PopsFolder = {
|
|
|
4973
4943
|
},
|
|
4974
4944
|
]);
|
|
4975
4945
|
/* 办公几件套 */
|
|
4976
|
-
|
|
4977
|
-
Folder_ICON
|
|
4978
|
-
|
|
4979
|
-
Folder_ICON
|
|
4980
|
-
|
|
4981
|
-
Folder_ICON
|
|
4982
|
-
// @ts-ignore
|
|
4983
|
-
Folder_ICON.pptx = Folder_ICON.ppt;
|
|
4984
|
-
// @ts-ignore;
|
|
4985
|
-
Folder_ICON.dmg = Folder_ICON.ipa;
|
|
4986
|
-
// @ts-ignore
|
|
4987
|
-
Folder_ICON.json = Folder_ICON.js;
|
|
4946
|
+
Reflect.set(Folder_ICON, "docx", Folder_ICON.doc);
|
|
4947
|
+
Reflect.set(Folder_ICON, "rtf", Folder_ICON.doc);
|
|
4948
|
+
Reflect.set(Folder_ICON, "xlsx", Folder_ICON.xls);
|
|
4949
|
+
Reflect.set(Folder_ICON, "pptx", Folder_ICON.ppt);
|
|
4950
|
+
Reflect.set(Folder_ICON, "dmg", Folder_ICON.ipa);
|
|
4951
|
+
Reflect.set(Folder_ICON, "json", Folder_ICON.js);
|
|
4988
4952
|
/* 压缩包 */
|
|
4989
|
-
|
|
4953
|
+
const zipIconList = [
|
|
4990
4954
|
"rar",
|
|
4991
4955
|
"7z",
|
|
4992
4956
|
"arj",
|
|
@@ -5005,11 +4969,11 @@ const PopsFolder = {
|
|
|
5005
4969
|
"001",
|
|
5006
4970
|
];
|
|
5007
4971
|
/* 图片 */
|
|
5008
|
-
|
|
4972
|
+
const imageIconList = ["jpg", "jpeg", "ico", "webp"];
|
|
5009
4973
|
/* 代码语言 */
|
|
5010
|
-
|
|
4974
|
+
const codeLanguageIconList = ["htm", "py", "vue", "bat", "sh", "vbs", "java", "kt"];
|
|
5011
4975
|
/* Android安装包 */
|
|
5012
|
-
|
|
4976
|
+
const androidIconList = ["apk", "apkm", "xapk"];
|
|
5013
4977
|
zipIconList.forEach((keyName) => {
|
|
5014
4978
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5015
4979
|
});
|
|
@@ -5023,16 +4987,15 @@ const PopsFolder = {
|
|
|
5023
4987
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5024
4988
|
});
|
|
5025
4989
|
if (details?.folder) {
|
|
5026
|
-
|
|
5027
|
-
config.folder = details.folder;
|
|
4990
|
+
Reflect.set(config, "folder", details.folder);
|
|
5028
4991
|
}
|
|
5029
4992
|
// 先把z-index提取出来
|
|
5030
|
-
|
|
5031
|
-
|
|
5032
|
-
|
|
5033
|
-
|
|
5034
|
-
|
|
5035
|
-
|
|
4993
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4994
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4995
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4996
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4997
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4998
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
5036
4999
|
/*html*/ `
|
|
5037
5000
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5038
5001
|
? config.title.text
|
|
@@ -5134,8 +5097,8 @@ const PopsFolder = {
|
|
|
5134
5097
|
/**
|
|
5135
5098
|
* 弹窗的主元素,包括动画层
|
|
5136
5099
|
*/
|
|
5137
|
-
|
|
5138
|
-
|
|
5100
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5101
|
+
const { popsElement: $pops, titleElement: $title, contentElement: $content,
|
|
5139
5102
|
// folderListElement,
|
|
5140
5103
|
// folderListHeaderElement,
|
|
5141
5104
|
// folderListHeaderRowElement,
|
|
@@ -5147,9 +5110,9 @@ const PopsFolder = {
|
|
|
5147
5110
|
/**
|
|
5148
5111
|
* 已创建的元素列表
|
|
5149
5112
|
*/
|
|
5150
|
-
|
|
5113
|
+
const elementList = [$anim];
|
|
5151
5114
|
if (config.mask.enable) {
|
|
5152
|
-
|
|
5115
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
5153
5116
|
type: popsType,
|
|
5154
5117
|
guid: guid,
|
|
5155
5118
|
config: config,
|
|
@@ -5160,7 +5123,7 @@ const PopsFolder = {
|
|
|
5160
5123
|
elementList.push($mask);
|
|
5161
5124
|
}
|
|
5162
5125
|
/* 事件 */
|
|
5163
|
-
|
|
5126
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5164
5127
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5165
5128
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5166
5129
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5179,7 +5142,7 @@ const PopsFolder = {
|
|
|
5179
5142
|
config.folder.sort();
|
|
5180
5143
|
this.initFolderView(config.folder);
|
|
5181
5144
|
/* 将数据存到全部文件的属性_config_中 */
|
|
5182
|
-
|
|
5145
|
+
const allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child");
|
|
5183
5146
|
Reflect.set(allFilesElement, "_config_", config.folder);
|
|
5184
5147
|
/* 设置点击顶部的全部文件事件 */
|
|
5185
5148
|
popsDOMUtils.on(allFilesElement, "click", (event) => {
|
|
@@ -5228,13 +5191,13 @@ const PopsFolder = {
|
|
|
5228
5191
|
* @param isFolder 是否是文件夹
|
|
5229
5192
|
*/
|
|
5230
5193
|
createFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
|
|
5231
|
-
|
|
5232
|
-
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5194
|
+
const origin_fileName = fileName;
|
|
5195
|
+
const origin_latestTime = latestTime;
|
|
5196
|
+
const origin_fileSize = fileSize;
|
|
5197
|
+
const folderElement = popsDOMUtils.createElement("tr");
|
|
5198
|
+
const fileNameElement = popsDOMUtils.createElement("td");
|
|
5199
|
+
const fileTimeElement = popsDOMUtils.createElement("td");
|
|
5200
|
+
const fileFormatSize = popsDOMUtils.createElement("td");
|
|
5238
5201
|
let fileType = "";
|
|
5239
5202
|
let fileIcon = Folder_ICON.folder;
|
|
5240
5203
|
if (isFolder) {
|
|
@@ -5251,14 +5214,14 @@ const PopsFolder = {
|
|
|
5251
5214
|
if (typeof fileSize === "number") {
|
|
5252
5215
|
fileSize = popsUtils.formatByteToSize(fileSize);
|
|
5253
5216
|
}
|
|
5254
|
-
for (
|
|
5217
|
+
for (const keyName in Folder_ICON) {
|
|
5255
5218
|
if (fileName.toLowerCase().endsWith("." + keyName)) {
|
|
5256
5219
|
fileType = keyName;
|
|
5257
5220
|
fileIcon = Folder_ICON[keyName];
|
|
5258
5221
|
break;
|
|
5259
5222
|
}
|
|
5260
5223
|
}
|
|
5261
|
-
if (!
|
|
5224
|
+
if (!fileIcon) {
|
|
5262
5225
|
fileType = "Null";
|
|
5263
5226
|
fileIcon = Folder_ICON.Null;
|
|
5264
5227
|
}
|
|
@@ -5291,7 +5254,7 @@ const PopsFolder = {
|
|
|
5291
5254
|
</div>
|
|
5292
5255
|
`);
|
|
5293
5256
|
/* 存储原来的值 */
|
|
5294
|
-
|
|
5257
|
+
const __value__ = {
|
|
5295
5258
|
fileName: origin_fileName,
|
|
5296
5259
|
latestTime: origin_latestTime,
|
|
5297
5260
|
fileSize: origin_fileSize,
|
|
@@ -5319,11 +5282,11 @@ const PopsFolder = {
|
|
|
5319
5282
|
* @param isFolder 是否是文件夹
|
|
5320
5283
|
*/
|
|
5321
5284
|
createFolderRowElementByMobile(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
|
|
5322
|
-
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5285
|
+
const origin_fileName = fileName;
|
|
5286
|
+
const origin_latestTime = latestTime;
|
|
5287
|
+
const origin_fileSize = fileSize;
|
|
5288
|
+
const folderElement = popsDOMUtils.createElement("tr");
|
|
5289
|
+
const fileNameElement = popsDOMUtils.createElement("td");
|
|
5327
5290
|
let fileType = "";
|
|
5328
5291
|
let fileIcon = Folder_ICON.folder;
|
|
5329
5292
|
if (isFolder) {
|
|
@@ -5340,14 +5303,14 @@ const PopsFolder = {
|
|
|
5340
5303
|
if (typeof fileSize === "number") {
|
|
5341
5304
|
fileSize = popsUtils.formatByteToSize(fileSize);
|
|
5342
5305
|
}
|
|
5343
|
-
for (
|
|
5306
|
+
for (const keyName in Folder_ICON) {
|
|
5344
5307
|
if (fileName.toLowerCase().endsWith("." + keyName)) {
|
|
5345
5308
|
fileType = keyName;
|
|
5346
5309
|
fileIcon = Folder_ICON[keyName];
|
|
5347
5310
|
break;
|
|
5348
5311
|
}
|
|
5349
5312
|
}
|
|
5350
|
-
if (!
|
|
5313
|
+
if (!fileIcon) {
|
|
5351
5314
|
fileType = "Null";
|
|
5352
5315
|
fileIcon = Folder_ICON.Null;
|
|
5353
5316
|
}
|
|
@@ -5365,7 +5328,7 @@ const PopsFolder = {
|
|
|
5365
5328
|
</div>
|
|
5366
5329
|
`);
|
|
5367
5330
|
/* 存储原来的值 */
|
|
5368
|
-
|
|
5331
|
+
const __value__ = {
|
|
5369
5332
|
fileName: origin_fileName,
|
|
5370
5333
|
latestTime: origin_latestTime,
|
|
5371
5334
|
fileSize: origin_fileSize,
|
|
@@ -5389,7 +5352,7 @@ const PopsFolder = {
|
|
|
5389
5352
|
* 创建顶部导航的箭头图标
|
|
5390
5353
|
*/
|
|
5391
5354
|
createHeaderArrowIcon() {
|
|
5392
|
-
|
|
5355
|
+
const $arrowIcon = popsDOMUtils.createElement("div", {
|
|
5393
5356
|
className: "iconArrow",
|
|
5394
5357
|
});
|
|
5395
5358
|
return $arrowIcon;
|
|
@@ -5400,7 +5363,7 @@ const PopsFolder = {
|
|
|
5400
5363
|
* @param folderDataConfig 文件夹配置
|
|
5401
5364
|
*/
|
|
5402
5365
|
createBreadcrumb(folderName, folderDataConfig) {
|
|
5403
|
-
|
|
5366
|
+
const $breadcrumb = popsDOMUtils.createElement("span", {
|
|
5404
5367
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5405
5368
|
innerHTML: `<a>${folderName}</a>`,
|
|
5406
5369
|
_config_: folderDataConfig,
|
|
@@ -5418,8 +5381,8 @@ const PopsFolder = {
|
|
|
5418
5381
|
setBreadcrumbClickEvent(clickEvent, isTop, dataConfigList) {
|
|
5419
5382
|
this.clearFolderInfoView();
|
|
5420
5383
|
/* 获取当前的导航元素 */
|
|
5421
|
-
|
|
5422
|
-
|
|
5384
|
+
const $click = clickEvent.target;
|
|
5385
|
+
const currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
5423
5386
|
if (currentBreadcrumb) {
|
|
5424
5387
|
while (currentBreadcrumb.nextElementSibling) {
|
|
5425
5388
|
currentBreadcrumb.nextElementSibling.remove();
|
|
@@ -5428,7 +5391,7 @@ const PopsFolder = {
|
|
|
5428
5391
|
else {
|
|
5429
5392
|
console.error("获取导航按钮失败");
|
|
5430
5393
|
}
|
|
5431
|
-
|
|
5394
|
+
const loadingMask = PopsLoading.init({
|
|
5432
5395
|
parent: $content,
|
|
5433
5396
|
content: {
|
|
5434
5397
|
text: "获取文件列表中...",
|
|
@@ -5454,7 +5417,7 @@ const PopsFolder = {
|
|
|
5454
5417
|
*/
|
|
5455
5418
|
async enterFolder(clickEvent, dataConfig) {
|
|
5456
5419
|
this.clearFolderInfoView();
|
|
5457
|
-
|
|
5420
|
+
const loadingMask = PopsLoading.init({
|
|
5458
5421
|
parent: $content,
|
|
5459
5422
|
content: {
|
|
5460
5423
|
text: "获取文件列表中...",
|
|
@@ -5465,11 +5428,11 @@ const PopsFolder = {
|
|
|
5465
5428
|
addIndexCSS: false,
|
|
5466
5429
|
});
|
|
5467
5430
|
if (typeof dataConfig.clickEvent === "function") {
|
|
5468
|
-
|
|
5431
|
+
const childConfig = await dataConfig.clickEvent(clickEvent, dataConfig);
|
|
5469
5432
|
/* 添加顶部导航的箭头 */
|
|
5470
5433
|
folderFileListBreadcrumbPrimaryElement.appendChild(this.createHeaderArrowIcon());
|
|
5471
5434
|
/* 添加顶部导航的链接文字 */
|
|
5472
|
-
|
|
5435
|
+
const breadcrumbAllFilesElement = this.createBreadcrumb(dataConfig.fileName, childConfig);
|
|
5473
5436
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5474
5437
|
/* 设置顶部导航点击事件 */
|
|
5475
5438
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", (event) => {
|
|
@@ -5486,9 +5449,9 @@ const PopsFolder = {
|
|
|
5486
5449
|
*/
|
|
5487
5450
|
async downloadFile(clickEvent, $row, dataConfig) {
|
|
5488
5451
|
popsDOMUtils.preventEvent(clickEvent);
|
|
5489
|
-
|
|
5452
|
+
const $link = $row.querySelector("a");
|
|
5490
5453
|
if (typeof dataConfig.clickEvent === "function") {
|
|
5491
|
-
|
|
5454
|
+
const downloadInfo = await dataConfig.clickEvent(clickEvent, dataConfig);
|
|
5492
5455
|
if (downloadInfo != null &&
|
|
5493
5456
|
typeof downloadInfo === "object" &&
|
|
5494
5457
|
!Array.isArray(downloadInfo) &&
|
|
@@ -5503,7 +5466,7 @@ const PopsFolder = {
|
|
|
5503
5466
|
}
|
|
5504
5467
|
if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
|
|
5505
5468
|
/* a标签下载 */
|
|
5506
|
-
|
|
5469
|
+
const downloadLinkElement = document.createElement("a");
|
|
5507
5470
|
if (downloadInfo.mode === "aBlank") {
|
|
5508
5471
|
downloadLinkElement.setAttribute("target", "_blank");
|
|
5509
5472
|
}
|
|
@@ -5521,7 +5484,7 @@ const PopsFolder = {
|
|
|
5521
5484
|
}
|
|
5522
5485
|
else if (downloadInfo.mode === "iframe") {
|
|
5523
5486
|
/* iframe下载 */
|
|
5524
|
-
|
|
5487
|
+
const downloadIframeLinkElement = document.createElement("iframe");
|
|
5525
5488
|
downloadIframeLinkElement.src = downloadInfo.url;
|
|
5526
5489
|
downloadIframeLinkElement.onload = function () {
|
|
5527
5490
|
popsUtils.setTimeout(() => {
|
|
@@ -5549,16 +5512,16 @@ const PopsFolder = {
|
|
|
5549
5512
|
sortFolderConfig(folderDataConfigList, sortName = "fileName", isDesc = false) {
|
|
5550
5513
|
if (sortName === "fileName") {
|
|
5551
5514
|
// 如果是以文件名排序,文件夹优先放前面
|
|
5552
|
-
|
|
5515
|
+
const onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
|
|
5553
5516
|
return value.isFolder;
|
|
5554
5517
|
});
|
|
5555
|
-
|
|
5518
|
+
const onlyFileDataConfigList = folderDataConfigList.filter((value) => {
|
|
5556
5519
|
return !value.isFolder;
|
|
5557
5520
|
});
|
|
5558
5521
|
// 文件夹排序
|
|
5559
5522
|
onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
|
|
5560
|
-
|
|
5561
|
-
|
|
5523
|
+
const beforeVal = leftConfig[sortName].toString();
|
|
5524
|
+
const afterVal = rightConfig[sortName].toString();
|
|
5562
5525
|
let compareVal = beforeVal.localeCompare(afterVal);
|
|
5563
5526
|
if (isDesc) {
|
|
5564
5527
|
/* 降序 */
|
|
@@ -5573,8 +5536,8 @@ const PopsFolder = {
|
|
|
5573
5536
|
});
|
|
5574
5537
|
// 文件名排序
|
|
5575
5538
|
onlyFileDataConfigList.sort((leftConfig, rightConfig) => {
|
|
5576
|
-
|
|
5577
|
-
|
|
5539
|
+
const beforeVal = leftConfig[sortName].toString();
|
|
5540
|
+
const afterVal = rightConfig[sortName].toString();
|
|
5578
5541
|
let compareVal = beforeVal.localeCompare(afterVal);
|
|
5579
5542
|
if (isDesc) {
|
|
5580
5543
|
/* 降序 */
|
|
@@ -5644,7 +5607,7 @@ const PopsFolder = {
|
|
|
5644
5607
|
this.sortFolderConfig(dataConfig, config.sort.name, config.sort.isDesc);
|
|
5645
5608
|
dataConfig.forEach((item) => {
|
|
5646
5609
|
if (item.isFolder) {
|
|
5647
|
-
|
|
5610
|
+
const { folderElement, fileNameElement } = popsUtils.isPhone()
|
|
5648
5611
|
? this.createFolderRowElementByMobile(item.fileName, "", "", true)
|
|
5649
5612
|
: this.createFolderRowElement(item.fileName, "", "", true);
|
|
5650
5613
|
// 文件夹 - 点击事件
|
|
@@ -5655,7 +5618,7 @@ const PopsFolder = {
|
|
|
5655
5618
|
folderListBodyElement.appendChild(folderElement);
|
|
5656
5619
|
}
|
|
5657
5620
|
else {
|
|
5658
|
-
|
|
5621
|
+
const { folderElement, fileNameElement } = popsUtils.isPhone()
|
|
5659
5622
|
? this.createFolderRowElementByMobile(item.fileName, item.latestTime, item.fileSize, false)
|
|
5660
5623
|
: this.createFolderRowElement(item.fileName, item.latestTime, item.fileSize, false);
|
|
5661
5624
|
// 文件 - 点击事件
|
|
@@ -5701,20 +5664,20 @@ const PopsFolder = {
|
|
|
5701
5664
|
config.sort.name = sortName;
|
|
5702
5665
|
config.sort.isDesc = !config.sort.isDesc;
|
|
5703
5666
|
}
|
|
5704
|
-
|
|
5705
|
-
|
|
5667
|
+
const arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
|
|
5668
|
+
const arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
|
|
5706
5669
|
this.changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
|
|
5707
5670
|
if (typeof config.sort.callback === "function" &&
|
|
5708
5671
|
config.sort.callback(target, event, config.sort.name, config.sort.isDesc)) {
|
|
5709
5672
|
return;
|
|
5710
5673
|
}
|
|
5711
|
-
|
|
5674
|
+
const childrenList = [];
|
|
5712
5675
|
Array.from(folderListBodyElement.children).forEach((trElement) => {
|
|
5713
|
-
|
|
5676
|
+
const __value__ = Reflect.get(trElement, "__value__");
|
|
5714
5677
|
Reflect.set(__value__, "target", trElement);
|
|
5715
5678
|
childrenList.push(__value__);
|
|
5716
5679
|
});
|
|
5717
|
-
|
|
5680
|
+
const sortedConfigList = this.sortFolderConfig(childrenList, config.sort.name, config.sort.isDesc);
|
|
5718
5681
|
sortedConfigList.forEach((item) => {
|
|
5719
5682
|
folderListBodyElement.appendChild(item.target);
|
|
5720
5683
|
});
|
|
@@ -5741,7 +5704,7 @@ const PopsFolder = {
|
|
|
5741
5704
|
$shadowContainer: $shadowContainer,
|
|
5742
5705
|
$shadowRoot: $shadowRoot,
|
|
5743
5706
|
});
|
|
5744
|
-
|
|
5707
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
5745
5708
|
return result;
|
|
5746
5709
|
},
|
|
5747
5710
|
};
|
|
@@ -5843,17 +5806,15 @@ const PopsIframe = {
|
|
|
5843
5806
|
css: PopsCSS.iframeCSS,
|
|
5844
5807
|
},
|
|
5845
5808
|
]);
|
|
5846
|
-
|
|
5847
|
-
// @ts-ignore
|
|
5848
|
-
config.animation != null && config.animation != "" ? "position:absolute;" : "";
|
|
5809
|
+
const maskExtraStyle = config.animation != null && config.animation != "" ? "position:absolute;" : "";
|
|
5849
5810
|
// 先把z-index提取出来
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
|
|
5853
|
-
|
|
5854
|
-
|
|
5855
|
-
|
|
5856
|
-
|
|
5811
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5812
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
|
|
5813
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
5814
|
+
const iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
5815
|
+
const titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
5816
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
5817
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
5857
5818
|
/*html*/ `
|
|
5858
5819
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5859
5820
|
? titleText
|
|
@@ -5866,14 +5827,14 @@ const PopsIframe = {
|
|
|
5866
5827
|
/**
|
|
5867
5828
|
* 弹窗的主元素,包括动画层
|
|
5868
5829
|
*/
|
|
5869
|
-
|
|
5870
|
-
|
|
5830
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5831
|
+
const { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5871
5832
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
5872
5833
|
if (!$iframeContainer) {
|
|
5873
5834
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
5874
5835
|
$iframeContainer.className = "pops-iframe-container";
|
|
5875
5836
|
$iframeContainer.style.cssText =
|
|
5876
|
-
"display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse
|
|
5837
|
+
"display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;";
|
|
5877
5838
|
popsDOMUtils.appendBody($iframeContainer);
|
|
5878
5839
|
}
|
|
5879
5840
|
/**
|
|
@@ -5883,9 +5844,9 @@ const PopsIframe = {
|
|
|
5883
5844
|
/**
|
|
5884
5845
|
* 已创建的元素列表
|
|
5885
5846
|
*/
|
|
5886
|
-
|
|
5847
|
+
const elementList = [$anim];
|
|
5887
5848
|
if (config.mask.enable) {
|
|
5888
|
-
|
|
5849
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
5889
5850
|
type: popsType,
|
|
5890
5851
|
guid: guid,
|
|
5891
5852
|
config: config,
|
|
@@ -5895,7 +5856,7 @@ const PopsIframe = {
|
|
|
5895
5856
|
$mask = _handleMask_.maskElement;
|
|
5896
5857
|
elementList.push($mask);
|
|
5897
5858
|
}
|
|
5898
|
-
|
|
5859
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5899
5860
|
eventDetails["iframeElement"] = $iframe;
|
|
5900
5861
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
5901
5862
|
/* 动画加载完毕 */
|
|
@@ -6046,7 +6007,7 @@ const PopsIframe = {
|
|
|
6046
6007
|
$shadowContainer: $shadowContainer,
|
|
6047
6008
|
$shadowRoot: $shadowRoot,
|
|
6048
6009
|
});
|
|
6049
|
-
|
|
6010
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
6050
6011
|
return result;
|
|
6051
6012
|
},
|
|
6052
6013
|
};
|
|
@@ -6317,7 +6278,7 @@ const PopsPanelConfig = () => {
|
|
|
6317
6278
|
text: "单选3",
|
|
6318
6279
|
isHTML: false,
|
|
6319
6280
|
disable(value, allSelectedInfo) {
|
|
6320
|
-
return
|
|
6281
|
+
return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
|
|
6321
6282
|
},
|
|
6322
6283
|
},
|
|
6323
6284
|
{
|
|
@@ -6325,7 +6286,7 @@ const PopsPanelConfig = () => {
|
|
|
6325
6286
|
text: "单选4",
|
|
6326
6287
|
isHTML: false,
|
|
6327
6288
|
disable(value, allSelectedInfo) {
|
|
6328
|
-
return
|
|
6289
|
+
return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
|
|
6329
6290
|
},
|
|
6330
6291
|
},
|
|
6331
6292
|
{
|
|
@@ -6507,7 +6468,7 @@ const PopsPanelConfig = () => {
|
|
|
6507
6468
|
// @ts-ignore
|
|
6508
6469
|
props: {},
|
|
6509
6470
|
forms: [],
|
|
6510
|
-
clickFirstCallback: function (
|
|
6471
|
+
clickFirstCallback: function () {
|
|
6511
6472
|
return false;
|
|
6512
6473
|
},
|
|
6513
6474
|
},
|
|
@@ -6524,7 +6485,7 @@ const PopsPanelConfig = () => {
|
|
|
6524
6485
|
// @ts-ignore
|
|
6525
6486
|
props: {},
|
|
6526
6487
|
forms: [],
|
|
6527
|
-
clickFirstCallback: function (
|
|
6488
|
+
clickFirstCallback: function () {
|
|
6528
6489
|
return false;
|
|
6529
6490
|
},
|
|
6530
6491
|
},
|
|
@@ -6581,20 +6542,20 @@ const PopsMathFloatUtils = {
|
|
|
6581
6542
|
* @param number2
|
|
6582
6543
|
*/
|
|
6583
6544
|
add(number1, number2) {
|
|
6584
|
-
let number1length, number2length
|
|
6545
|
+
let number1length, number2length;
|
|
6585
6546
|
try {
|
|
6586
6547
|
number1length = number1.toString().split(".")[1].length;
|
|
6587
6548
|
}
|
|
6588
|
-
catch
|
|
6549
|
+
catch {
|
|
6589
6550
|
number1length = 0;
|
|
6590
6551
|
}
|
|
6591
6552
|
try {
|
|
6592
6553
|
number2length = number2.toString().split(".")[1].length;
|
|
6593
6554
|
}
|
|
6594
|
-
catch
|
|
6555
|
+
catch {
|
|
6595
6556
|
number2length = 0;
|
|
6596
6557
|
}
|
|
6597
|
-
powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6558
|
+
const powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6598
6559
|
return Math.round(number1 * powValue + number2 * powValue) / powValue;
|
|
6599
6560
|
},
|
|
6600
6561
|
/**
|
|
@@ -6603,21 +6564,21 @@ const PopsMathFloatUtils = {
|
|
|
6603
6564
|
* @param number2
|
|
6604
6565
|
*/
|
|
6605
6566
|
sub(number1, number2) {
|
|
6606
|
-
let number1length, number2length
|
|
6567
|
+
let number1length, number2length;
|
|
6607
6568
|
try {
|
|
6608
6569
|
number1length = number1.toString().split(".")[1].length;
|
|
6609
6570
|
}
|
|
6610
|
-
catch
|
|
6571
|
+
catch {
|
|
6611
6572
|
number1length = 0;
|
|
6612
6573
|
}
|
|
6613
6574
|
try {
|
|
6614
6575
|
number2length = number2.toString().split(".")[1].length;
|
|
6615
6576
|
}
|
|
6616
|
-
catch
|
|
6577
|
+
catch {
|
|
6617
6578
|
number2length = 0;
|
|
6618
6579
|
}
|
|
6619
|
-
powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6620
|
-
|
|
6580
|
+
const powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6581
|
+
const fixedValue = number1length >= number2length ? number1length : number2length;
|
|
6621
6582
|
return (Math.round(number1 * powValue - number2 * powValue) / powValue).toFixed(fixedValue);
|
|
6622
6583
|
},
|
|
6623
6584
|
/**
|
|
@@ -6626,21 +6587,21 @@ const PopsMathFloatUtils = {
|
|
|
6626
6587
|
* @param number2
|
|
6627
6588
|
*/
|
|
6628
6589
|
division(number1, number2) {
|
|
6629
|
-
let number1length, number2length
|
|
6590
|
+
let number1length, number2length;
|
|
6630
6591
|
try {
|
|
6631
6592
|
number1length = number1.toString().split(".")[1].length;
|
|
6632
6593
|
}
|
|
6633
|
-
catch
|
|
6594
|
+
catch {
|
|
6634
6595
|
number1length = 0;
|
|
6635
6596
|
}
|
|
6636
6597
|
try {
|
|
6637
6598
|
number2length = number2.toString().split(".")[1].length;
|
|
6638
6599
|
}
|
|
6639
|
-
catch
|
|
6600
|
+
catch {
|
|
6640
6601
|
number2length = 0;
|
|
6641
6602
|
}
|
|
6642
|
-
number1ReplaceValue = Number(number1.toString().replace(".", ""));
|
|
6643
|
-
number2ReplaceValue = Number(number2.toString().replace(".", ""));
|
|
6603
|
+
const number1ReplaceValue = Number(number1.toString().replace(".", ""));
|
|
6604
|
+
const number2ReplaceValue = Number(number2.toString().replace(".", ""));
|
|
6644
6605
|
return (number1ReplaceValue / number2ReplaceValue) * Math.pow(10, number2length - number1length);
|
|
6645
6606
|
},
|
|
6646
6607
|
};
|
|
@@ -6705,7 +6666,7 @@ class ToolTip {
|
|
|
6705
6666
|
this.init();
|
|
6706
6667
|
}
|
|
6707
6668
|
init() {
|
|
6708
|
-
|
|
6669
|
+
const toolTipInfo = this.createToolTip();
|
|
6709
6670
|
this.$el.$toolTip = toolTipInfo.$toolTipContainer;
|
|
6710
6671
|
this.$el.$content = toolTipInfo.$toolTipContent;
|
|
6711
6672
|
this.$el.$arrow = toolTipInfo.$toolTipArrow;
|
|
@@ -6721,7 +6682,7 @@ class ToolTip {
|
|
|
6721
6682
|
* 创建提示元素
|
|
6722
6683
|
*/
|
|
6723
6684
|
createToolTip() {
|
|
6724
|
-
|
|
6685
|
+
const $toolTipContainer = popsDOMUtils.createElement("div", {
|
|
6725
6686
|
className: "pops-tip",
|
|
6726
6687
|
innerHTML: /*html*/ `
|
|
6727
6688
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
@@ -6732,9 +6693,9 @@ class ToolTip {
|
|
|
6732
6693
|
"data-guid": this.$data.guid,
|
|
6733
6694
|
});
|
|
6734
6695
|
/** 内容 */
|
|
6735
|
-
|
|
6696
|
+
const $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
6736
6697
|
/** 箭头 */
|
|
6737
|
-
|
|
6698
|
+
const $toolTipArrow = $toolTipContainer.querySelector(".pops-tip-arrow");
|
|
6738
6699
|
// 处理className
|
|
6739
6700
|
if (typeof this.$data.config.className === "string" && this.$data.config.className.trim() !== "") {
|
|
6740
6701
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
@@ -6743,7 +6704,7 @@ class ToolTip {
|
|
|
6743
6704
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
6744
6705
|
if (this.$data.config.style != null) {
|
|
6745
6706
|
/* 添加自定义style */
|
|
6746
|
-
|
|
6707
|
+
const cssNode = popsDOMUtils.createElement("style", {
|
|
6747
6708
|
type: "text/css",
|
|
6748
6709
|
innerHTML: this.$data.config.style,
|
|
6749
6710
|
});
|
|
@@ -6763,9 +6724,7 @@ class ToolTip {
|
|
|
6763
6724
|
* 获取提示的内容
|
|
6764
6725
|
*/
|
|
6765
6726
|
getContent() {
|
|
6766
|
-
return typeof this.$data.config.content === "function"
|
|
6767
|
-
? this.$data.config.content()
|
|
6768
|
-
: this.$data.config.content;
|
|
6727
|
+
return typeof this.$data.config.content === "function" ? this.$data.config.content() : this.$data.config.content;
|
|
6769
6728
|
}
|
|
6770
6729
|
/**
|
|
6771
6730
|
* 修改提示的内容
|
|
@@ -6776,17 +6735,15 @@ class ToolTip {
|
|
|
6776
6735
|
text = this.getContent();
|
|
6777
6736
|
}
|
|
6778
6737
|
if (this.$data.config.isDiffContent) {
|
|
6779
|
-
|
|
6780
|
-
|
|
6781
|
-
let originContentText = this.$el.$content[contentPropKey];
|
|
6738
|
+
const contentPropKey = "data-content";
|
|
6739
|
+
const originContentText = Reflect.get(this.$el.$content, contentPropKey);
|
|
6782
6740
|
if (typeof originContentText === "string") {
|
|
6783
6741
|
if (originContentText === text) {
|
|
6784
6742
|
// 内容未改变,不修改避免渲染
|
|
6785
6743
|
return;
|
|
6786
6744
|
}
|
|
6787
6745
|
}
|
|
6788
|
-
|
|
6789
|
-
this.$el.$content[contentPropKey] = text;
|
|
6746
|
+
Reflect.set(this.$el.$content, contentPropKey, text);
|
|
6790
6747
|
}
|
|
6791
6748
|
PopsSafeUtils.setSafeHTML(this.$el.$content, text);
|
|
6792
6749
|
}
|
|
@@ -6812,23 +6769,23 @@ class ToolTip {
|
|
|
6812
6769
|
* @param otherDistance 其它位置的偏移
|
|
6813
6770
|
*/
|
|
6814
6771
|
calcToolTipPosition(targetElement, arrowDistance, otherDistance, event) {
|
|
6815
|
-
|
|
6772
|
+
const offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
6816
6773
|
// 目标 宽
|
|
6817
|
-
|
|
6774
|
+
const targetElement_width = offsetInfo.width;
|
|
6818
6775
|
// 目标 高
|
|
6819
|
-
|
|
6776
|
+
const targetElement_height = offsetInfo.height;
|
|
6820
6777
|
// 目标 顶部距离
|
|
6821
|
-
|
|
6778
|
+
const targetElement_top = offsetInfo.top;
|
|
6822
6779
|
// let targetElement_bottom = offsetInfo.bottom;
|
|
6823
6780
|
// 目标 左边距离
|
|
6824
|
-
|
|
6781
|
+
const targetElement_left = offsetInfo.left;
|
|
6825
6782
|
// let targetElement_right = offsetInfo.right;
|
|
6826
|
-
|
|
6827
|
-
|
|
6783
|
+
const toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
6784
|
+
const toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
6828
6785
|
/* 目标元素的x轴的中间位置 */
|
|
6829
|
-
|
|
6786
|
+
const targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
|
|
6830
6787
|
/* 目标元素的Y轴的中间位置 */
|
|
6831
|
-
|
|
6788
|
+
const targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
|
|
6832
6789
|
let mouseX = 0;
|
|
6833
6790
|
let mouseY = 0;
|
|
6834
6791
|
if (event != null) {
|
|
@@ -6837,19 +6794,15 @@ class ToolTip {
|
|
|
6837
6794
|
mouseY = event.y;
|
|
6838
6795
|
}
|
|
6839
6796
|
else if (event instanceof TouchEvent) {
|
|
6840
|
-
|
|
6797
|
+
const touchEvent = event.touches[0];
|
|
6841
6798
|
mouseX = touchEvent.pageX;
|
|
6842
6799
|
mouseY = touchEvent.pageY;
|
|
6843
6800
|
}
|
|
6844
6801
|
else {
|
|
6845
|
-
// @ts-ignore
|
|
6846
6802
|
if (typeof event.clientX === "number") {
|
|
6847
|
-
// @ts-ignore
|
|
6848
6803
|
mouseX = event.clientX;
|
|
6849
6804
|
}
|
|
6850
|
-
// @ts-ignore
|
|
6851
6805
|
if (typeof event.clientY === "number") {
|
|
6852
|
-
// @ts-ignore
|
|
6853
6806
|
mouseY = event.clientY;
|
|
6854
6807
|
}
|
|
6855
6808
|
}
|
|
@@ -6891,9 +6844,9 @@ class ToolTip {
|
|
|
6891
6844
|
* 动态修改tooltip的位置
|
|
6892
6845
|
*/
|
|
6893
6846
|
changePosition(event) {
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6847
|
+
const positionInfo = this.calcToolTipPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance, event);
|
|
6848
|
+
const positionKey = this.$data.config.position.toUpperCase();
|
|
6849
|
+
const positionDetail = positionInfo[positionKey];
|
|
6897
6850
|
if (positionDetail) {
|
|
6898
6851
|
this.$el.$toolTip.style.left = positionDetail.left + "px";
|
|
6899
6852
|
this.$el.$toolTip.style.top = positionDetail.top + "px";
|
|
@@ -6943,7 +6896,7 @@ class ToolTip {
|
|
|
6943
6896
|
* @param type 事件类型
|
|
6944
6897
|
*/
|
|
6945
6898
|
clearCloseTimeoutId(type, timeId) {
|
|
6946
|
-
|
|
6899
|
+
const timeIdList = type === "MouseEvent" ? this.$data.timeId_close_MouseEvent : this.$data.timeId_close_TouchEvent;
|
|
6947
6900
|
for (let index = 0; index < timeIdList.length; index++) {
|
|
6948
6901
|
const currentTimeId = timeIdList[index];
|
|
6949
6902
|
if (typeof timeId === "number") {
|
|
@@ -6965,11 +6918,11 @@ class ToolTip {
|
|
|
6965
6918
|
* 显示提示框
|
|
6966
6919
|
*/
|
|
6967
6920
|
show(...args) {
|
|
6968
|
-
|
|
6969
|
-
|
|
6921
|
+
const event = args[0];
|
|
6922
|
+
const eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
6970
6923
|
this.clearCloseTimeoutId(eventType);
|
|
6971
6924
|
if (typeof this.$data.config.showBeforeCallBack === "function") {
|
|
6972
|
-
|
|
6925
|
+
const result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
|
|
6973
6926
|
if (typeof result === "boolean" && !result) {
|
|
6974
6927
|
return;
|
|
6975
6928
|
}
|
|
@@ -7012,19 +6965,19 @@ class ToolTip {
|
|
|
7012
6965
|
* 关闭提示框
|
|
7013
6966
|
*/
|
|
7014
6967
|
close(...args) {
|
|
7015
|
-
|
|
7016
|
-
|
|
6968
|
+
const event = args[0];
|
|
6969
|
+
const eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
7017
6970
|
// 只判断鼠标事件
|
|
7018
6971
|
// 其它的如Touch事件不做处理
|
|
7019
6972
|
if (event && event instanceof MouseEvent) {
|
|
7020
|
-
|
|
6973
|
+
const $target = event.composedPath()[0];
|
|
7021
6974
|
// 如果是目标元素的子元素/tooltip元素的子元素触发的话,那就不管
|
|
7022
6975
|
if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
|
|
7023
6976
|
return;
|
|
7024
6977
|
}
|
|
7025
6978
|
}
|
|
7026
6979
|
if (typeof this.$data.config.closeBeforeCallBack === "function") {
|
|
7027
|
-
|
|
6980
|
+
const result = this.$data.config.closeBeforeCallBack(this.$el.$toolTip);
|
|
7028
6981
|
if (typeof result === "boolean" && !result) {
|
|
7029
6982
|
return;
|
|
7030
6983
|
}
|
|
@@ -7033,14 +6986,14 @@ class ToolTip {
|
|
|
7033
6986
|
(typeof this.$data.config.delayCloseTime === "number" && this.$data.config.delayCloseTime <= 0)) {
|
|
7034
6987
|
this.$data.config.delayCloseTime = 100;
|
|
7035
6988
|
}
|
|
7036
|
-
|
|
6989
|
+
const timeId = popsUtils.setTimeout(() => {
|
|
7037
6990
|
// 设置属性触发关闭动画
|
|
7038
6991
|
this.clearCloseTimeoutId(eventType, timeId);
|
|
7039
6992
|
if (this.$el.$toolTip == null) {
|
|
7040
6993
|
// 已清除了
|
|
7041
6994
|
return;
|
|
7042
6995
|
}
|
|
7043
|
-
|
|
6996
|
+
const motion = this.$el.$toolTip.getAttribute("data-motion");
|
|
7044
6997
|
if (motion == null || motion.trim() === "") {
|
|
7045
6998
|
// 没有动画
|
|
7046
6999
|
this.toolTipAnimationFinishEvent();
|
|
@@ -7184,7 +7137,7 @@ const PopsTooltip = {
|
|
|
7184
7137
|
css: PopsCSS.tooltipCSS,
|
|
7185
7138
|
},
|
|
7186
7139
|
]);
|
|
7187
|
-
|
|
7140
|
+
const toolTip = new ToolTip(config, guid, {
|
|
7188
7141
|
$shadowContainer,
|
|
7189
7142
|
$shadowRoot,
|
|
7190
7143
|
});
|
|
@@ -7252,8 +7205,7 @@ const PanelHandlerComponents = () => {
|
|
|
7252
7205
|
this.$config = details.config;
|
|
7253
7206
|
this.asideULElement = this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-top-container`);
|
|
7254
7207
|
this.asideBottomULElement = this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-bottom-container`);
|
|
7255
|
-
this.sectionContainerHeaderULElement =
|
|
7256
|
-
this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
|
|
7208
|
+
this.sectionContainerHeaderULElement = this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
|
|
7257
7209
|
this.sectionContainerULElement = this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-main-ul`);
|
|
7258
7210
|
/**
|
|
7259
7211
|
* 默认点击的左侧容器项
|
|
@@ -7263,12 +7215,10 @@ const PanelHandlerComponents = () => {
|
|
|
7263
7215
|
let isScrollToDefaultView = false;
|
|
7264
7216
|
// 初始化配置
|
|
7265
7217
|
details.config.content.forEach((asideItemConfig) => {
|
|
7266
|
-
|
|
7218
|
+
const $asideLiElement = this.createAsideItem(asideItemConfig);
|
|
7267
7219
|
this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
|
|
7268
7220
|
// 是否处于底部
|
|
7269
|
-
|
|
7270
|
-
? asideItemConfig.isBottom()
|
|
7271
|
-
: asideItemConfig.isBottom;
|
|
7221
|
+
const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
|
|
7272
7222
|
if (isBottom) {
|
|
7273
7223
|
this.asideBottomULElement.appendChild($asideLiElement);
|
|
7274
7224
|
}
|
|
@@ -7374,7 +7324,7 @@ const PanelHandlerComponents = () => {
|
|
|
7374
7324
|
return;
|
|
7375
7325
|
}
|
|
7376
7326
|
Object.keys(props).forEach((propName) => {
|
|
7377
|
-
|
|
7327
|
+
const value = props[propName];
|
|
7378
7328
|
if (propName === "innerHTML") {
|
|
7379
7329
|
PopsSafeUtils.setSafeHTML(element, value);
|
|
7380
7330
|
return;
|
|
@@ -7395,7 +7345,7 @@ const PanelHandlerComponents = () => {
|
|
|
7395
7345
|
className = className();
|
|
7396
7346
|
}
|
|
7397
7347
|
if (typeof className === "string") {
|
|
7398
|
-
|
|
7348
|
+
const splitClassName = className.split(" ");
|
|
7399
7349
|
splitClassName.forEach((classNameStr) => {
|
|
7400
7350
|
element.classList.add(classNameStr);
|
|
7401
7351
|
});
|
|
@@ -7411,10 +7361,10 @@ const PanelHandlerComponents = () => {
|
|
|
7411
7361
|
* @param asideConfig
|
|
7412
7362
|
*/
|
|
7413
7363
|
createAsideItem(asideConfig) {
|
|
7414
|
-
|
|
7364
|
+
const $li = document.createElement("li");
|
|
7415
7365
|
$li.id = asideConfig.id;
|
|
7416
7366
|
Reflect.set($li, "__forms__", asideConfig.forms);
|
|
7417
|
-
|
|
7367
|
+
const title = typeof asideConfig.title === "function" ? asideConfig.title() : asideConfig.title;
|
|
7418
7368
|
PopsSafeUtils.setSafeHTML($li, title);
|
|
7419
7369
|
/* 处理className */
|
|
7420
7370
|
this.setElementClassName($li, "pops-panel-aside-item");
|
|
@@ -7424,7 +7374,7 @@ const PanelHandlerComponents = () => {
|
|
|
7424
7374
|
/** 禁用左侧项的hover的CSS样式的类名 */
|
|
7425
7375
|
const disableAsideItemHoverCSSClassName = "pops-panel-disabled-aside-hover-css";
|
|
7426
7376
|
/** 是否禁用左侧项的hover的CSS样式 */
|
|
7427
|
-
|
|
7377
|
+
const disableAsideItemHoverCSS = typeof asideConfig.disableAsideItemHoverCSS === "function"
|
|
7428
7378
|
? asideConfig.disableAsideItemHoverCSS()
|
|
7429
7379
|
: asideConfig.disableAsideItemHoverCSS;
|
|
7430
7380
|
if (disableAsideItemHoverCSS) {
|
|
@@ -7441,14 +7391,14 @@ const PanelHandlerComponents = () => {
|
|
|
7441
7391
|
* @param formConfig
|
|
7442
7392
|
*/
|
|
7443
7393
|
createSectionContainerItem_switch(formConfig) {
|
|
7444
|
-
|
|
7394
|
+
const $li = document.createElement("li");
|
|
7445
7395
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7446
7396
|
this.setElementClassName($li, formConfig.className);
|
|
7447
7397
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7448
7398
|
this.setElementProps($li, formConfig.props);
|
|
7449
7399
|
/* 左边底部的描述的文字 */
|
|
7450
7400
|
let leftDescriptionText = "";
|
|
7451
|
-
if (
|
|
7401
|
+
if (formConfig.description) {
|
|
7452
7402
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7453
7403
|
}
|
|
7454
7404
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7475,7 +7425,7 @@ const PanelHandlerComponents = () => {
|
|
|
7475
7425
|
},
|
|
7476
7426
|
init() {
|
|
7477
7427
|
this.setStatus(this.$data.value);
|
|
7478
|
-
|
|
7428
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
7479
7429
|
if (disabled) {
|
|
7480
7430
|
this.disable();
|
|
7481
7431
|
}
|
|
@@ -7485,7 +7435,7 @@ const PanelHandlerComponents = () => {
|
|
|
7485
7435
|
* 设置点击事件
|
|
7486
7436
|
*/
|
|
7487
7437
|
setClickEvent() {
|
|
7488
|
-
|
|
7438
|
+
const that = this;
|
|
7489
7439
|
popsDOMUtils.on(this.$ele.core, "click", function (event) {
|
|
7490
7440
|
if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
|
|
7491
7441
|
return;
|
|
@@ -7547,14 +7497,14 @@ const PanelHandlerComponents = () => {
|
|
|
7547
7497
|
* @param formConfig
|
|
7548
7498
|
*/
|
|
7549
7499
|
createSectionContainerItem_slider(formConfig) {
|
|
7550
|
-
|
|
7500
|
+
const $li = document.createElement("li");
|
|
7551
7501
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7552
7502
|
this.setElementClassName($li, formConfig.className);
|
|
7553
7503
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7554
7504
|
this.setElementProps($li, formConfig.props);
|
|
7555
7505
|
/* 左边底部的描述的文字 */
|
|
7556
7506
|
let leftDescriptionText = "";
|
|
7557
|
-
if (
|
|
7507
|
+
if (formConfig.description) {
|
|
7558
7508
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7559
7509
|
}
|
|
7560
7510
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7565,7 +7515,7 @@ const PanelHandlerComponents = () => {
|
|
|
7565
7515
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
7566
7516
|
</div>
|
|
7567
7517
|
`);
|
|
7568
|
-
|
|
7518
|
+
const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
|
|
7569
7519
|
if (formConfig.step) {
|
|
7570
7520
|
$rangeInput.setAttribute("step", formConfig.step.toString());
|
|
7571
7521
|
}
|
|
@@ -7574,7 +7524,7 @@ const PanelHandlerComponents = () => {
|
|
|
7574
7524
|
* 获取提示的内容
|
|
7575
7525
|
* @param value
|
|
7576
7526
|
*/
|
|
7577
|
-
|
|
7527
|
+
const getToolTipContent = function (value) {
|
|
7578
7528
|
if (typeof formConfig.getToolTipContent === "function") {
|
|
7579
7529
|
return formConfig.getToolTipContent(value);
|
|
7580
7530
|
}
|
|
@@ -7582,7 +7532,7 @@ const PanelHandlerComponents = () => {
|
|
|
7582
7532
|
return value;
|
|
7583
7533
|
}
|
|
7584
7534
|
};
|
|
7585
|
-
|
|
7535
|
+
const tooltip = PopsTooltip.init({
|
|
7586
7536
|
target: $rangeInput.parentElement,
|
|
7587
7537
|
content: () => {
|
|
7588
7538
|
return getToolTipContent($rangeInput.value);
|
|
@@ -7610,14 +7560,14 @@ const PanelHandlerComponents = () => {
|
|
|
7610
7560
|
* @param formConfig
|
|
7611
7561
|
*/
|
|
7612
7562
|
createSectionContainerItem_slider_new(formConfig) {
|
|
7613
|
-
|
|
7563
|
+
const $li = document.createElement("li");
|
|
7614
7564
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7615
7565
|
this.setElementClassName($li, formConfig.className);
|
|
7616
7566
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7617
7567
|
this.setElementProps($li, formConfig.props);
|
|
7618
7568
|
/* 左边底部的描述的文字 */
|
|
7619
7569
|
let leftDescriptionText = "";
|
|
7620
|
-
if (
|
|
7570
|
+
if (formConfig.description) {
|
|
7621
7571
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7622
7572
|
}
|
|
7623
7573
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7728,9 +7678,9 @@ const PanelHandlerComponents = () => {
|
|
|
7728
7678
|
}
|
|
7729
7679
|
this.$interval.isCheck = true;
|
|
7730
7680
|
let isSuccess = false;
|
|
7731
|
-
|
|
7681
|
+
const oldTotalWidth = this.$data.totalWidth;
|
|
7732
7682
|
let timer = void 0;
|
|
7733
|
-
|
|
7683
|
+
const interval = setInterval(() => {
|
|
7734
7684
|
if (isSuccess) {
|
|
7735
7685
|
this.$interval.isCheck = false;
|
|
7736
7686
|
clearTimeout(timer);
|
|
@@ -7783,12 +7733,12 @@ const PanelHandlerComponents = () => {
|
|
|
7783
7733
|
initStepMap() {
|
|
7784
7734
|
let index = 0;
|
|
7785
7735
|
// 计算出份数
|
|
7786
|
-
|
|
7736
|
+
const blockNums = (this.max - this.min) / this.step;
|
|
7787
7737
|
// 计算出每一份占据的px
|
|
7788
7738
|
this.$data.stepPx = this.$data.totalWidth / blockNums;
|
|
7789
7739
|
let widthPx = 0;
|
|
7790
7740
|
for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
|
|
7791
|
-
|
|
7741
|
+
const value = this.formatValue(stepValue);
|
|
7792
7742
|
let info;
|
|
7793
7743
|
if (value === this.min) {
|
|
7794
7744
|
/* 起始 */
|
|
@@ -7826,12 +7776,12 @@ const PanelHandlerComponents = () => {
|
|
|
7826
7776
|
initFloatStepMap() {
|
|
7827
7777
|
let index = 0;
|
|
7828
7778
|
// 计算出份数
|
|
7829
|
-
|
|
7779
|
+
const blockNums = (this.max - this.min) / this.step;
|
|
7830
7780
|
// 计算出每一份占据的px
|
|
7831
7781
|
this.$data.stepPx = this.$data.totalWidth / blockNums;
|
|
7832
7782
|
let widthPx = 0;
|
|
7833
7783
|
for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
|
|
7834
|
-
|
|
7784
|
+
const value = this.formatValue(stepValue);
|
|
7835
7785
|
let info;
|
|
7836
7786
|
if (value === this.min) {
|
|
7837
7787
|
/* 起始 */
|
|
@@ -7971,7 +7921,7 @@ const PanelHandlerComponents = () => {
|
|
|
7971
7921
|
* 判断当前滑块是否被禁用(配置中判断)
|
|
7972
7922
|
*/
|
|
7973
7923
|
isFormConfigDisabledDrag() {
|
|
7974
|
-
|
|
7924
|
+
const isDisabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
7975
7925
|
if (typeof isDisabled === "boolean") {
|
|
7976
7926
|
return isDisabled;
|
|
7977
7927
|
}
|
|
@@ -7987,8 +7937,8 @@ const PanelHandlerComponents = () => {
|
|
|
7987
7937
|
if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
|
|
7988
7938
|
return;
|
|
7989
7939
|
}
|
|
7990
|
-
|
|
7991
|
-
|
|
7940
|
+
const clickX = parseFloat(event.offsetX.toString());
|
|
7941
|
+
const dragStartResult = this.dragStartCallBack();
|
|
7992
7942
|
if (!dragStartResult) {
|
|
7993
7943
|
return;
|
|
7994
7944
|
}
|
|
@@ -8080,7 +8030,7 @@ const PanelHandlerComponents = () => {
|
|
|
8080
8030
|
if (!this.dragStartCallBack()) {
|
|
8081
8031
|
return;
|
|
8082
8032
|
}
|
|
8083
|
-
|
|
8033
|
+
const oldValue = this.value;
|
|
8084
8034
|
const runAwayRect = this.$ele.runAway.getBoundingClientRect();
|
|
8085
8035
|
let displacementX = event.x - (runAwayRect.left + globalThis.screenX);
|
|
8086
8036
|
if (displacementX <= 0) {
|
|
@@ -8094,7 +8044,7 @@ const PanelHandlerComponents = () => {
|
|
|
8094
8044
|
this.dragMoveCallBack(event, currentDragX, oldValue);
|
|
8095
8045
|
});
|
|
8096
8046
|
/* 监听触点离开,处理某些情况下,拖拽松开,但是未触发pan事件,可以通过设置这个来关闭tooltip */
|
|
8097
|
-
this.$tooltip.on("at:end", (
|
|
8047
|
+
this.$tooltip.on("at:end", () => {
|
|
8098
8048
|
this.dragEndCallBack(currentDragX);
|
|
8099
8049
|
});
|
|
8100
8050
|
},
|
|
@@ -8118,7 +8068,7 @@ const PanelHandlerComponents = () => {
|
|
|
8118
8068
|
return;
|
|
8119
8069
|
}
|
|
8120
8070
|
this.$data.isCheckingStopDragMove = true;
|
|
8121
|
-
|
|
8071
|
+
const interval = setInterval(() => {
|
|
8122
8072
|
if (!this.$data.isMove) {
|
|
8123
8073
|
this.$data.isCheckingStopDragMove = false;
|
|
8124
8074
|
this.closeToolTip();
|
|
@@ -8145,7 +8095,7 @@ const PanelHandlerComponents = () => {
|
|
|
8145
8095
|
return PopsPanelSlider.value.toString();
|
|
8146
8096
|
}
|
|
8147
8097
|
}
|
|
8148
|
-
|
|
8098
|
+
const tooltip = PopsTooltip.init({
|
|
8149
8099
|
target: this.$ele.button,
|
|
8150
8100
|
content: getToolTipContent,
|
|
8151
8101
|
zIndex: () => {
|
|
@@ -8159,7 +8109,7 @@ const PanelHandlerComponents = () => {
|
|
|
8159
8109
|
passive: true,
|
|
8160
8110
|
},
|
|
8161
8111
|
showBeforeCallBack: () => {
|
|
8162
|
-
|
|
8112
|
+
const isShowHoverTip = typeof formConfig.isShowHoverTip === "function"
|
|
8163
8113
|
? formConfig.isShowHoverTip()
|
|
8164
8114
|
: typeof formConfig.isShowHoverTip === "boolean"
|
|
8165
8115
|
? formConfig.isShowHoverTip
|
|
@@ -8169,7 +8119,7 @@ const PanelHandlerComponents = () => {
|
|
|
8169
8119
|
}
|
|
8170
8120
|
this.intervalInit();
|
|
8171
8121
|
},
|
|
8172
|
-
showAfterCallBack: (
|
|
8122
|
+
showAfterCallBack: () => {
|
|
8173
8123
|
tooltip.toolTip.changeContent(getToolTipContent());
|
|
8174
8124
|
},
|
|
8175
8125
|
closeBeforeCallBack: () => {
|
|
@@ -8195,7 +8145,7 @@ const PanelHandlerComponents = () => {
|
|
|
8195
8145
|
* @param formConfig
|
|
8196
8146
|
*/
|
|
8197
8147
|
createSectionContainerItem_input(formConfig) {
|
|
8198
|
-
|
|
8148
|
+
const $li = document.createElement("li");
|
|
8199
8149
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8200
8150
|
this.setElementClassName($li, formConfig.className);
|
|
8201
8151
|
this.setElementAttributes($li, formConfig.attributes);
|
|
@@ -8209,7 +8159,7 @@ const PanelHandlerComponents = () => {
|
|
|
8209
8159
|
}
|
|
8210
8160
|
/* 左边底部的描述的文字 */
|
|
8211
8161
|
let leftDescriptionText = "";
|
|
8212
|
-
if (
|
|
8162
|
+
if (formConfig.description) {
|
|
8213
8163
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8214
8164
|
}
|
|
8215
8165
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8251,7 +8201,7 @@ const PanelHandlerComponents = () => {
|
|
|
8251
8201
|
}
|
|
8252
8202
|
this.setInputChangeEvent();
|
|
8253
8203
|
// 是否禁用复选框
|
|
8254
|
-
|
|
8204
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8255
8205
|
if (disabled) {
|
|
8256
8206
|
this.disable();
|
|
8257
8207
|
}
|
|
@@ -8400,14 +8350,14 @@ const PanelHandlerComponents = () => {
|
|
|
8400
8350
|
* @param formConfig
|
|
8401
8351
|
*/
|
|
8402
8352
|
createSectionContainerItem_textarea(formConfig) {
|
|
8403
|
-
|
|
8353
|
+
const $li = document.createElement("li");
|
|
8404
8354
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8405
8355
|
this.setElementClassName($li, formConfig.className);
|
|
8406
8356
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8407
8357
|
this.setElementProps($li, formConfig.props);
|
|
8408
8358
|
/* 左边底部的描述的文字 */
|
|
8409
8359
|
let leftDescriptionText = "";
|
|
8410
|
-
if (
|
|
8360
|
+
if (formConfig.description) {
|
|
8411
8361
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8412
8362
|
}
|
|
8413
8363
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8431,7 +8381,7 @@ const PanelHandlerComponents = () => {
|
|
|
8431
8381
|
init() {
|
|
8432
8382
|
this.setValue(this.$data.value);
|
|
8433
8383
|
this.setChangeEvent();
|
|
8434
|
-
|
|
8384
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8435
8385
|
if (disabled) {
|
|
8436
8386
|
this.disable();
|
|
8437
8387
|
}
|
|
@@ -8458,7 +8408,7 @@ const PanelHandlerComponents = () => {
|
|
|
8458
8408
|
*/
|
|
8459
8409
|
setChangeEvent() {
|
|
8460
8410
|
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
|
|
8461
|
-
|
|
8411
|
+
const value = this.$ele.textarea.value;
|
|
8462
8412
|
this.$data.value = value;
|
|
8463
8413
|
if (typeof formConfig.callback === "function") {
|
|
8464
8414
|
formConfig.callback(event, value);
|
|
@@ -8477,14 +8427,14 @@ const PanelHandlerComponents = () => {
|
|
|
8477
8427
|
*/
|
|
8478
8428
|
createSectionContainerItem_select(formConfig) {
|
|
8479
8429
|
const that = this;
|
|
8480
|
-
|
|
8430
|
+
const $li = document.createElement("li");
|
|
8481
8431
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8482
8432
|
this.setElementClassName($li, formConfig.className);
|
|
8483
8433
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8484
8434
|
this.setElementProps($li, formConfig.props);
|
|
8485
8435
|
/* 左边底部的描述的文字 */
|
|
8486
8436
|
let leftDescriptionText = "";
|
|
8487
|
-
if (
|
|
8437
|
+
if (formConfig.description) {
|
|
8488
8438
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8489
8439
|
}
|
|
8490
8440
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8515,7 +8465,7 @@ const PanelHandlerComponents = () => {
|
|
|
8515
8465
|
this.initOption();
|
|
8516
8466
|
this.setChangeEvent();
|
|
8517
8467
|
this.setClickEvent();
|
|
8518
|
-
|
|
8468
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8519
8469
|
if (disabled) {
|
|
8520
8470
|
this.disable();
|
|
8521
8471
|
}
|
|
@@ -8567,7 +8517,7 @@ const PanelHandlerComponents = () => {
|
|
|
8567
8517
|
initOption() {
|
|
8568
8518
|
formConfig.data.forEach((dataItem) => {
|
|
8569
8519
|
// 初始化默认选中
|
|
8570
|
-
|
|
8520
|
+
const optionElement = document.createElement("option");
|
|
8571
8521
|
this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
|
|
8572
8522
|
this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
|
|
8573
8523
|
this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
|
|
@@ -8595,9 +8545,9 @@ const PanelHandlerComponents = () => {
|
|
|
8595
8545
|
/** 设置禁用状态 */
|
|
8596
8546
|
setOptionDisableStatus(optionElement) {
|
|
8597
8547
|
let disable = false;
|
|
8598
|
-
|
|
8548
|
+
const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
|
|
8599
8549
|
if (optionDisableAttr === "function") {
|
|
8600
|
-
|
|
8550
|
+
const value = this.getNodeValue(optionElement, this.$eleKey.value);
|
|
8601
8551
|
disable = Boolean(optionDisableAttr(value));
|
|
8602
8552
|
}
|
|
8603
8553
|
if (disable) {
|
|
@@ -8609,9 +8559,9 @@ const PanelHandlerComponents = () => {
|
|
|
8609
8559
|
},
|
|
8610
8560
|
/** 获取option上的信息 */
|
|
8611
8561
|
getSelectOptionInfo($option) {
|
|
8612
|
-
|
|
8613
|
-
|
|
8614
|
-
|
|
8562
|
+
const optionValue = this.getNodeValue($option, this.$eleKey.value);
|
|
8563
|
+
const optionText = $option.innerText || $option.textContent;
|
|
8564
|
+
const optionForms = this.getNodeValue($option, this.$eleKey.forms);
|
|
8615
8565
|
return {
|
|
8616
8566
|
value: optionValue,
|
|
8617
8567
|
text: optionText,
|
|
@@ -8624,16 +8574,16 @@ const PanelHandlerComponents = () => {
|
|
|
8624
8574
|
*/
|
|
8625
8575
|
setChangeEvent() {
|
|
8626
8576
|
popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
|
|
8627
|
-
|
|
8628
|
-
|
|
8577
|
+
const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
|
|
8578
|
+
const selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
8629
8579
|
this.setSelectOptionsDisableStatus();
|
|
8630
8580
|
if (typeof formConfig.callback === "function") {
|
|
8631
8581
|
formConfig.callback(event, selectInfo.value, selectInfo.text);
|
|
8632
8582
|
}
|
|
8633
|
-
|
|
8583
|
+
const forms = typeof selectInfo.forms === "function" ? selectInfo.forms() : selectInfo.forms;
|
|
8634
8584
|
if (Array.isArray(forms)) {
|
|
8635
8585
|
/* 如果成功创建,加入到中间容器中 */
|
|
8636
|
-
|
|
8586
|
+
const childUListClassName = "pops-panel-select-child-forms";
|
|
8637
8587
|
// 移除旧的元素
|
|
8638
8588
|
while ($li.nextElementSibling) {
|
|
8639
8589
|
if ($li.nextElementSibling.classList.contains(childUListClassName)) {
|
|
@@ -8643,7 +8593,7 @@ const PanelHandlerComponents = () => {
|
|
|
8643
8593
|
break;
|
|
8644
8594
|
}
|
|
8645
8595
|
}
|
|
8646
|
-
|
|
8596
|
+
const $childUList = document.createElement("ul");
|
|
8647
8597
|
$childUList.className = childUListClassName;
|
|
8648
8598
|
popsDOMUtils.after($li, $childUList);
|
|
8649
8599
|
that.uListContainerAddItem(formConfig, {
|
|
@@ -8674,14 +8624,14 @@ const PanelHandlerComponents = () => {
|
|
|
8674
8624
|
* @param formConfig
|
|
8675
8625
|
*/
|
|
8676
8626
|
createSectionContainerItem_select_multiple_new(formConfig) {
|
|
8677
|
-
|
|
8627
|
+
const $li = document.createElement("li");
|
|
8678
8628
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8679
8629
|
this.setElementClassName($li, formConfig.className);
|
|
8680
8630
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8681
8631
|
this.setElementProps($li, formConfig.props);
|
|
8682
8632
|
/* 左边底部的描述的文字 */
|
|
8683
8633
|
let leftDescriptionText = "";
|
|
8684
|
-
if (
|
|
8634
|
+
if (formConfig.description) {
|
|
8685
8635
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8686
8636
|
}
|
|
8687
8637
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8744,7 +8694,7 @@ const PanelHandlerComponents = () => {
|
|
|
8744
8694
|
this.initPlaceHolder();
|
|
8745
8695
|
this.initTagElement();
|
|
8746
8696
|
this.setSelectContainerClickEvent();
|
|
8747
|
-
|
|
8697
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8748
8698
|
if (disabled) {
|
|
8749
8699
|
this.disable();
|
|
8750
8700
|
}
|
|
@@ -8782,12 +8732,12 @@ const PanelHandlerComponents = () => {
|
|
|
8782
8732
|
placeholder = formConfig.placeholder;
|
|
8783
8733
|
}
|
|
8784
8734
|
else if (typeof formConfig.placeholder === "function") {
|
|
8785
|
-
|
|
8735
|
+
const placeholderResult = formConfig.placeholder();
|
|
8786
8736
|
if (typeof placeholderResult === "string") {
|
|
8787
8737
|
placeholder = placeholderResult;
|
|
8788
8738
|
}
|
|
8789
8739
|
}
|
|
8790
|
-
|
|
8740
|
+
const $placeholder = popsDOMUtils.createElement("span", {
|
|
8791
8741
|
innerText: placeholder,
|
|
8792
8742
|
});
|
|
8793
8743
|
this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
|
|
@@ -8796,10 +8746,10 @@ const PanelHandlerComponents = () => {
|
|
|
8796
8746
|
initTagElement() {
|
|
8797
8747
|
// 遍历数据,寻找对应的值
|
|
8798
8748
|
formConfig.data.forEach((dataItem) => {
|
|
8799
|
-
|
|
8749
|
+
const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
|
|
8800
8750
|
if (findValue) {
|
|
8801
8751
|
// 存在对应的值
|
|
8802
|
-
|
|
8752
|
+
const selectedInfo = this.createSelectedTagItem(dataItem);
|
|
8803
8753
|
this.addSelectedTagItem(selectedInfo.$tag);
|
|
8804
8754
|
this.setSelectedItemCloseIconClickEvent({
|
|
8805
8755
|
$tag: selectedInfo.$tag,
|
|
@@ -8836,7 +8786,7 @@ const PanelHandlerComponents = () => {
|
|
|
8836
8786
|
const $tagText = $selectedItem.querySelector(".el-select__tags-text");
|
|
8837
8787
|
/** 关闭图标 */
|
|
8838
8788
|
const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
|
|
8839
|
-
|
|
8789
|
+
const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
|
|
8840
8790
|
if (data.isHTML) {
|
|
8841
8791
|
PopsSafeUtils.setSafeHTML($tagText, text);
|
|
8842
8792
|
}
|
|
@@ -8858,7 +8808,7 @@ const PanelHandlerComponents = () => {
|
|
|
8858
8808
|
// 去除前面的空白
|
|
8859
8809
|
this.setSectionIsNear();
|
|
8860
8810
|
if (this.$el.$section.contains(this.$el.$selectedInputWrapper)) {
|
|
8861
|
-
|
|
8811
|
+
const $prev = this.$el.$selectedInputWrapper.previousElementSibling;
|
|
8862
8812
|
if ($prev) {
|
|
8863
8813
|
// 存在前一个元素,添加到前面的元素的后面
|
|
8864
8814
|
popsDOMUtils.after($prev, $tag);
|
|
@@ -8869,7 +8819,7 @@ const PanelHandlerComponents = () => {
|
|
|
8869
8819
|
}
|
|
8870
8820
|
}
|
|
8871
8821
|
else if (this.$el.$section.contains(this.$el.$selectedPlaceHolderWrapper)) {
|
|
8872
|
-
|
|
8822
|
+
const $prev = this.$el.$selectedPlaceHolderWrapper.previousElementSibling;
|
|
8873
8823
|
if ($prev) {
|
|
8874
8824
|
// 存在前一个元素,添加到前面的元素的后面
|
|
8875
8825
|
popsDOMUtils.after($prev, $tag);
|
|
@@ -8929,7 +8879,7 @@ const PanelHandlerComponents = () => {
|
|
|
8929
8879
|
this.removeSelectItemDisabled($select);
|
|
8930
8880
|
}
|
|
8931
8881
|
// 更新选中状态
|
|
8932
|
-
|
|
8882
|
+
const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
|
|
8933
8883
|
if (findValue) {
|
|
8934
8884
|
this.setSelectItemSelected($select);
|
|
8935
8885
|
}
|
|
@@ -8967,8 +8917,8 @@ const PanelHandlerComponents = () => {
|
|
|
8967
8917
|
* @param $select 选项元素
|
|
8968
8918
|
*/
|
|
8969
8919
|
addSelectedItemInfo(dataList, $select) {
|
|
8970
|
-
|
|
8971
|
-
|
|
8920
|
+
const info = this.getSelectedItemInfo($select);
|
|
8921
|
+
const findValue = dataList.find((item) => item.value === info.value);
|
|
8972
8922
|
if (!findValue) {
|
|
8973
8923
|
dataList.push({
|
|
8974
8924
|
value: info.value,
|
|
@@ -8992,8 +8942,8 @@ const PanelHandlerComponents = () => {
|
|
|
8992
8942
|
* @param $select 选项元素
|
|
8993
8943
|
*/
|
|
8994
8944
|
removeSelectedItemInfo(dataList, $select) {
|
|
8995
|
-
|
|
8996
|
-
|
|
8945
|
+
const info = this.getSelectedItemInfo($select);
|
|
8946
|
+
const findIndex = dataList.findIndex((item) => item.value === info.value);
|
|
8997
8947
|
if (findIndex !== -1) {
|
|
8998
8948
|
dataList.splice(findIndex, 1);
|
|
8999
8949
|
}
|
|
@@ -9008,8 +8958,8 @@ const PanelHandlerComponents = () => {
|
|
|
9008
8958
|
getAllSelectItemInfo(onlySelected = true) {
|
|
9009
8959
|
return Array.from(this.$el.$selectContainer?.querySelectorAll(".select-item") ?? [])
|
|
9010
8960
|
.map(($select) => {
|
|
9011
|
-
|
|
9012
|
-
|
|
8961
|
+
const data = this.getSelectedItemInfo($select);
|
|
8962
|
+
const result = {
|
|
9013
8963
|
/** 选项信息数据 */
|
|
9014
8964
|
data: data,
|
|
9015
8965
|
/** 选项元素 */
|
|
@@ -9017,7 +8967,7 @@ const PanelHandlerComponents = () => {
|
|
|
9017
8967
|
};
|
|
9018
8968
|
if (onlySelected) {
|
|
9019
8969
|
// 仅选中
|
|
9020
|
-
|
|
8970
|
+
const isSelected = this.isSelectItemSelected($select);
|
|
9021
8971
|
if (isSelected) {
|
|
9022
8972
|
return result;
|
|
9023
8973
|
}
|
|
@@ -9036,7 +8986,7 @@ const PanelHandlerComponents = () => {
|
|
|
9036
8986
|
* @param data 选择项的数据
|
|
9037
8987
|
*/
|
|
9038
8988
|
createSelectItemElement(data) {
|
|
9039
|
-
|
|
8989
|
+
const $select = popsDOMUtils.createElement("li", {
|
|
9040
8990
|
className: "select-item",
|
|
9041
8991
|
innerHTML: /*html*/ `
|
|
9042
8992
|
<span class="select-item-text"></span>
|
|
@@ -9052,8 +9002,8 @@ const PanelHandlerComponents = () => {
|
|
|
9052
9002
|
* @param $select 选择项元素
|
|
9053
9003
|
*/
|
|
9054
9004
|
setSelectItemText(data, $select) {
|
|
9055
|
-
|
|
9056
|
-
|
|
9005
|
+
const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
|
|
9006
|
+
const $selectSpan = $select.querySelector(".select-item-text");
|
|
9057
9007
|
if (data.isHTML) {
|
|
9058
9008
|
PopsSafeUtils.setSafeHTML($selectSpan, text);
|
|
9059
9009
|
}
|
|
@@ -9096,8 +9046,8 @@ const PanelHandlerComponents = () => {
|
|
|
9096
9046
|
return;
|
|
9097
9047
|
}
|
|
9098
9048
|
if (typeof formConfig.clickCallBack === "function") {
|
|
9099
|
-
|
|
9100
|
-
|
|
9049
|
+
const allSelectedInfo = this.getAllSelectItemInfo().map((it) => it.data);
|
|
9050
|
+
const clickResult = formConfig.clickCallBack(event, allSelectedInfo);
|
|
9101
9051
|
if (typeof clickResult === "boolean" && !clickResult) {
|
|
9102
9052
|
return;
|
|
9103
9053
|
}
|
|
@@ -9118,14 +9068,14 @@ const PanelHandlerComponents = () => {
|
|
|
9118
9068
|
*/
|
|
9119
9069
|
setSelectContainerClickEvent() {
|
|
9120
9070
|
const that = this;
|
|
9121
|
-
popsDOMUtils.on(this.$el.$container, "click", (
|
|
9071
|
+
popsDOMUtils.on(this.$el.$container, "click", () => {
|
|
9122
9072
|
if (this.isDisabled()) {
|
|
9123
9073
|
return;
|
|
9124
9074
|
}
|
|
9125
9075
|
/** 弹窗的选中的值 */
|
|
9126
|
-
|
|
9127
|
-
|
|
9128
|
-
|
|
9076
|
+
const selectedInfo = that.$data.selectInfo;
|
|
9077
|
+
const { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
|
|
9078
|
+
const confirmDetails = popsUtils.assign({
|
|
9129
9079
|
title: {
|
|
9130
9080
|
text: "请勾选需要选择的选项",
|
|
9131
9081
|
position: "center",
|
|
@@ -9142,7 +9092,7 @@ const PanelHandlerComponents = () => {
|
|
|
9142
9092
|
},
|
|
9143
9093
|
close: {
|
|
9144
9094
|
enable: true,
|
|
9145
|
-
callback(details
|
|
9095
|
+
callback(details) {
|
|
9146
9096
|
that.$data.selectInfo = [...selectedInfo];
|
|
9147
9097
|
that.updateSelectTagItem();
|
|
9148
9098
|
that.$el.$selectContainer = null;
|
|
@@ -9152,7 +9102,7 @@ const PanelHandlerComponents = () => {
|
|
|
9152
9102
|
},
|
|
9153
9103
|
mask: {
|
|
9154
9104
|
enable: true,
|
|
9155
|
-
clickCallBack(originalRun
|
|
9105
|
+
clickCallBack(originalRun) {
|
|
9156
9106
|
originalRun();
|
|
9157
9107
|
that.$data.selectInfo = [...selectedInfo];
|
|
9158
9108
|
that.updateSelectTagItem();
|
|
@@ -9231,12 +9181,12 @@ const PanelHandlerComponents = () => {
|
|
|
9231
9181
|
${style || ""}
|
|
9232
9182
|
`,
|
|
9233
9183
|
}, userConfirmDetails);
|
|
9234
|
-
|
|
9235
|
-
|
|
9184
|
+
const $dialog = PopsAlert.init(confirmDetails);
|
|
9185
|
+
const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
|
|
9236
9186
|
this.$el.$selectContainer = $selectContainer;
|
|
9237
9187
|
// 配置选项元素
|
|
9238
9188
|
formConfig.data.forEach((item) => {
|
|
9239
|
-
|
|
9189
|
+
const $select = this.createSelectItemElement(item);
|
|
9240
9190
|
// 添加到confirm中
|
|
9241
9191
|
$selectContainer.appendChild($select);
|
|
9242
9192
|
// 设置每一项的点击事件
|
|
@@ -9257,7 +9207,7 @@ const PanelHandlerComponents = () => {
|
|
|
9257
9207
|
return;
|
|
9258
9208
|
}
|
|
9259
9209
|
if (typeof formConfig.closeIconClickCallBack === "function") {
|
|
9260
|
-
|
|
9210
|
+
const result = formConfig.closeIconClickCallBack(event, {
|
|
9261
9211
|
$tag: data.$tag,
|
|
9262
9212
|
$closeIcon: data.$closeIcon,
|
|
9263
9213
|
value: data.value,
|
|
@@ -9366,14 +9316,14 @@ const PanelHandlerComponents = () => {
|
|
|
9366
9316
|
* @param formConfig
|
|
9367
9317
|
*/
|
|
9368
9318
|
createSectionContainerItem_button(formConfig) {
|
|
9369
|
-
|
|
9319
|
+
const $li = document.createElement("li");
|
|
9370
9320
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
9371
9321
|
this.setElementClassName($li, formConfig.className);
|
|
9372
9322
|
this.setElementAttributes($li, formConfig.attributes);
|
|
9373
9323
|
this.setElementProps($li, formConfig.props);
|
|
9374
9324
|
/* 左边底部的描述的文字 */
|
|
9375
9325
|
let leftDescriptionText = "";
|
|
9376
|
-
if (
|
|
9326
|
+
if (formConfig.description) {
|
|
9377
9327
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9378
9328
|
}
|
|
9379
9329
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -9514,8 +9464,8 @@ const PanelHandlerComponents = () => {
|
|
|
9514
9464
|
* @param formConfig
|
|
9515
9465
|
*/
|
|
9516
9466
|
createSectionContainerItem_deepMenu(formConfig) {
|
|
9517
|
-
|
|
9518
|
-
|
|
9467
|
+
const that = this;
|
|
9468
|
+
const $li = document.createElement("li");
|
|
9519
9469
|
popsDOMUtils.addClassName($li, "pops-panel-deepMenu-nav-item");
|
|
9520
9470
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
9521
9471
|
this.setElementClassName($li, formConfig.className);
|
|
@@ -9525,12 +9475,12 @@ const PanelHandlerComponents = () => {
|
|
|
9525
9475
|
this.setElementProps($li, formConfig.props);
|
|
9526
9476
|
/* 左边底部的描述的文字 */
|
|
9527
9477
|
let leftDescriptionText = "";
|
|
9528
|
-
if (
|
|
9478
|
+
if (formConfig.description) {
|
|
9529
9479
|
// 设置描述
|
|
9530
9480
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9531
9481
|
}
|
|
9532
9482
|
// 箭头图标
|
|
9533
|
-
|
|
9483
|
+
const arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean" ? formConfig.arrowRightIcon : true;
|
|
9534
9484
|
let arrowRightIconHTML = "";
|
|
9535
9485
|
if (arrowRightIcon) {
|
|
9536
9486
|
arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${PopsIcon.getIcon("arrowRight")}</i>`;
|
|
@@ -9561,17 +9511,17 @@ const PanelHandlerComponents = () => {
|
|
|
9561
9511
|
* @param formItemConfig
|
|
9562
9512
|
*/
|
|
9563
9513
|
initFormItem($container, formItemConfig) {
|
|
9564
|
-
|
|
9514
|
+
const formConfig_forms = formItemConfig;
|
|
9565
9515
|
if (formConfig_forms.type === "forms") {
|
|
9566
|
-
|
|
9516
|
+
const childForms = formConfig_forms["forms"];
|
|
9567
9517
|
/* 每一项<li>元素 */
|
|
9568
|
-
|
|
9518
|
+
const formContainerListElement = document.createElement("li");
|
|
9569
9519
|
/* 每一项<li>内的子<ul>元素 */
|
|
9570
|
-
|
|
9520
|
+
const formContainerULElement = document.createElement("ul");
|
|
9571
9521
|
formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
|
|
9572
9522
|
formContainerListElement.classList.add("pops-panel-forms-container-item");
|
|
9573
9523
|
/* 区域头部的文字 */
|
|
9574
|
-
|
|
9524
|
+
const formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
9575
9525
|
className: "pops-panel-forms-container-item-header-text",
|
|
9576
9526
|
});
|
|
9577
9527
|
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
@@ -9588,7 +9538,7 @@ const PanelHandlerComponents = () => {
|
|
|
9588
9538
|
</i>
|
|
9589
9539
|
`);
|
|
9590
9540
|
// 添加点击事件
|
|
9591
|
-
popsDOMUtils.on(formHeaderDivElement, "click", (
|
|
9541
|
+
popsDOMUtils.on(formHeaderDivElement, "click", () => {
|
|
9592
9542
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
9593
9543
|
formContainerListElement.removeAttribute("data-fold-enable");
|
|
9594
9544
|
}
|
|
@@ -9643,26 +9593,26 @@ const PanelHandlerComponents = () => {
|
|
|
9643
9593
|
*/
|
|
9644
9594
|
async gotoDeepMenu(event, liElement) {
|
|
9645
9595
|
/** 当前所在的容器 */
|
|
9646
|
-
|
|
9596
|
+
const $currentSection = liElement.closest("section.pops-panel-container");
|
|
9647
9597
|
// 子菜单的容器
|
|
9648
|
-
|
|
9598
|
+
const $deepMenuSection = popsDOMUtils.createElement("section", {
|
|
9649
9599
|
className: "pops-panel-container pops-panel-deepMenu-container",
|
|
9650
9600
|
});
|
|
9651
9601
|
Reflect.set($deepMenuSection, "__formConfig__", formConfig);
|
|
9652
|
-
|
|
9602
|
+
const $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
|
|
9653
9603
|
className: "pops-panel-container-header-ul pops-panel-deepMenu-container-header-ul",
|
|
9654
9604
|
});
|
|
9655
|
-
|
|
9605
|
+
const $deepMenuMain = popsDOMUtils.createElement("ul", {
|
|
9656
9606
|
className: "pops-panel-container-main-ul",
|
|
9657
9607
|
});
|
|
9658
9608
|
// 标题文字
|
|
9659
|
-
|
|
9660
|
-
|
|
9609
|
+
const headerTitleText = formConfig.headerTitle ?? formConfig.text;
|
|
9610
|
+
const $header = popsDOMUtils.createElement("li", {
|
|
9661
9611
|
className: "pops-panel-container-header-title-text pops-panel-deepMenu-container-header",
|
|
9662
9612
|
innerHTML: /*html*/ `<p class="pops-panel-deepMenu-container-header-title-text">${headerTitleText}</p>`,
|
|
9663
9613
|
});
|
|
9664
9614
|
// 返回箭头
|
|
9665
|
-
|
|
9615
|
+
const $headerLeftArrow = popsDOMUtils.createElement("i", {
|
|
9666
9616
|
className: "pops-panel-deepMenu-container-left-arrow-icon",
|
|
9667
9617
|
innerHTML: PopsIcon.getIcon("arrowLeft"),
|
|
9668
9618
|
});
|
|
@@ -9727,7 +9677,7 @@ const PanelHandlerComponents = () => {
|
|
|
9727
9677
|
$deepMenuSection.appendChild($deepMenuMain);
|
|
9728
9678
|
if (formConfig.forms && Array.isArray(formConfig.forms)) {
|
|
9729
9679
|
for (let index = 0; index < formConfig.forms.length; index++) {
|
|
9730
|
-
|
|
9680
|
+
const formItemConfig = formConfig.forms[index];
|
|
9731
9681
|
this.initFormItem($deepMenuMain, formItemConfig);
|
|
9732
9682
|
}
|
|
9733
9683
|
}
|
|
@@ -9765,7 +9715,7 @@ const PanelHandlerComponents = () => {
|
|
|
9765
9715
|
setLiClickEvent() {
|
|
9766
9716
|
popsDOMUtils.on($li, "click", void 0, async (event) => {
|
|
9767
9717
|
if (typeof formConfig.clickCallBack === "function") {
|
|
9768
|
-
|
|
9718
|
+
const result = await formConfig.clickCallBack(event, formConfig);
|
|
9769
9719
|
if (result) {
|
|
9770
9720
|
return;
|
|
9771
9721
|
}
|
|
@@ -9798,7 +9748,7 @@ const PanelHandlerComponents = () => {
|
|
|
9798
9748
|
*/
|
|
9799
9749
|
createSectionContainerItem(formConfig) {
|
|
9800
9750
|
/** 配置项的类型 */
|
|
9801
|
-
|
|
9751
|
+
const formType = formConfig.type;
|
|
9802
9752
|
if (formType === "switch") {
|
|
9803
9753
|
return this.createSectionContainerItem_switch(formConfig);
|
|
9804
9754
|
}
|
|
@@ -9836,18 +9786,18 @@ const PanelHandlerComponents = () => {
|
|
|
9836
9786
|
* @param formConfig
|
|
9837
9787
|
*/
|
|
9838
9788
|
createSectionContainerItem_forms(formConfig) {
|
|
9839
|
-
|
|
9840
|
-
|
|
9789
|
+
const that = this;
|
|
9790
|
+
const formConfig_forms = formConfig;
|
|
9841
9791
|
if (formConfig_forms.type === "forms") {
|
|
9842
|
-
|
|
9792
|
+
const childForms = formConfig["forms"];
|
|
9843
9793
|
/* 每一项<li>元素 */
|
|
9844
|
-
|
|
9794
|
+
const formContainerListElement = document.createElement("li");
|
|
9845
9795
|
/* 每一项<li>内的子<ul>元素 */
|
|
9846
|
-
|
|
9796
|
+
const formContainerULElement = document.createElement("ul");
|
|
9847
9797
|
formContainerListElement.classList.add("pops-panel-forms-container-item");
|
|
9848
9798
|
formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
|
|
9849
9799
|
/* 区域头部的文字 */
|
|
9850
|
-
|
|
9800
|
+
const formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
9851
9801
|
className: "pops-panel-forms-container-item-header-text",
|
|
9852
9802
|
});
|
|
9853
9803
|
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
@@ -9863,7 +9813,7 @@ const PanelHandlerComponents = () => {
|
|
|
9863
9813
|
</i>
|
|
9864
9814
|
`);
|
|
9865
9815
|
// 添加点击事件
|
|
9866
|
-
popsDOMUtils.on(formHeaderDivElement, "click", (
|
|
9816
|
+
popsDOMUtils.on(formHeaderDivElement, "click", () => {
|
|
9867
9817
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
9868
9818
|
formContainerListElement.removeAttribute("data-fold-enable");
|
|
9869
9819
|
}
|
|
@@ -9915,7 +9865,7 @@ const PanelHandlerComponents = () => {
|
|
|
9915
9865
|
* 触发触发渲染右侧容器的事件
|
|
9916
9866
|
*/
|
|
9917
9867
|
triggerRenderRightContainer($container) {
|
|
9918
|
-
|
|
9868
|
+
const __formConfig__ = Reflect.get($container, "__formConfig__");
|
|
9919
9869
|
this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
|
|
9920
9870
|
detail: {
|
|
9921
9871
|
formConfig: __formConfig__,
|
|
@@ -9928,7 +9878,7 @@ const PanelHandlerComponents = () => {
|
|
|
9928
9878
|
* @param containerOptions
|
|
9929
9879
|
*/
|
|
9930
9880
|
uListContainerAddItem(formConfig, containerOptions) {
|
|
9931
|
-
|
|
9881
|
+
const itemLiElement = this.createSectionContainerItem(formConfig);
|
|
9932
9882
|
if (itemLiElement) {
|
|
9933
9883
|
containerOptions["ulElement"].appendChild(itemLiElement);
|
|
9934
9884
|
}
|
|
@@ -9947,23 +9897,23 @@ const PanelHandlerComponents = () => {
|
|
|
9947
9897
|
setAsideItemClickEvent(asideLiElement, asideConfig) {
|
|
9948
9898
|
popsDOMUtils.on(asideLiElement, "click", async (event) => {
|
|
9949
9899
|
if (typeof asideConfig.clickFirstCallback === "function") {
|
|
9950
|
-
|
|
9900
|
+
const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9951
9901
|
if (typeof clickFirstCallbackResult === "boolean" && !clickFirstCallbackResult) {
|
|
9952
9902
|
return;
|
|
9953
9903
|
}
|
|
9954
9904
|
}
|
|
9955
9905
|
this.clearContainer();
|
|
9956
|
-
|
|
9906
|
+
const rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
|
|
9957
9907
|
Reflect.set(this.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
|
|
9958
9908
|
popsDOMUtils.cssShow(this.$el.$contentSectionContainer);
|
|
9959
9909
|
this.clearAsideItemIsVisited();
|
|
9960
9910
|
this.setAsideItemIsVisited(asideLiElement);
|
|
9961
9911
|
/* 顶部标题栏,存在就设置 */
|
|
9962
|
-
|
|
9912
|
+
const title = typeof asideConfig.title === "function" ? asideConfig.title() : asideConfig.title;
|
|
9963
9913
|
let headerTitleText = typeof asideConfig.headerTitle === "function" ? asideConfig.headerTitle() : asideConfig.headerTitle;
|
|
9964
9914
|
headerTitleText = headerTitleText ?? title;
|
|
9965
9915
|
if (typeof headerTitleText === "string" && headerTitleText.trim() !== "") {
|
|
9966
|
-
|
|
9916
|
+
const $containerHeaderTitle = document.createElement("li");
|
|
9967
9917
|
$containerHeaderTitle.classList.add("pops-panel-container-header-title-text");
|
|
9968
9918
|
Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
|
|
9969
9919
|
PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
|
|
@@ -9974,7 +9924,7 @@ const PanelHandlerComponents = () => {
|
|
|
9974
9924
|
});
|
|
9975
9925
|
if (typeof asideConfig.clickCallback === "function") {
|
|
9976
9926
|
/* 执行回调 */
|
|
9977
|
-
|
|
9927
|
+
const asideClickCallbackResult = await asideConfig.clickCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9978
9928
|
if (typeof asideClickCallbackResult === "boolean" && !asideClickCallbackResult) {
|
|
9979
9929
|
return;
|
|
9980
9930
|
}
|
|
@@ -10029,11 +9979,11 @@ const PopsPanel = {
|
|
|
10029
9979
|
},
|
|
10030
9980
|
]);
|
|
10031
9981
|
// 先把z-index提取出来
|
|
10032
|
-
|
|
10033
|
-
|
|
10034
|
-
|
|
10035
|
-
|
|
10036
|
-
|
|
9982
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
9983
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
9984
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
9985
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
9986
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
10037
9987
|
/*html*/ `
|
|
10038
9988
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10039
9989
|
? config.title.text
|
|
@@ -10053,9 +10003,9 @@ const PopsPanel = {
|
|
|
10053
10003
|
/**
|
|
10054
10004
|
* 弹窗的主元素,包括动画层
|
|
10055
10005
|
*/
|
|
10056
|
-
|
|
10006
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
10057
10007
|
/* 结构元素 */
|
|
10058
|
-
|
|
10008
|
+
const { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, panelSectionWrapper: $panelSectionWrapper, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10059
10009
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10060
10010
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10061
10011
|
}
|
|
@@ -10066,10 +10016,10 @@ const PopsPanel = {
|
|
|
10066
10016
|
/**
|
|
10067
10017
|
* 已创建的元素列表
|
|
10068
10018
|
*/
|
|
10069
|
-
|
|
10019
|
+
const isCreatedElementList = [$anim];
|
|
10070
10020
|
/* 遮罩层元素 */
|
|
10071
10021
|
if (config.mask.enable) {
|
|
10072
|
-
|
|
10022
|
+
const { maskElement } = PopsHandler.handleMask({
|
|
10073
10023
|
type: popsType,
|
|
10074
10024
|
guid: guid,
|
|
10075
10025
|
config: config,
|
|
@@ -10080,7 +10030,7 @@ const PopsPanel = {
|
|
|
10080
10030
|
isCreatedElementList.push($mask);
|
|
10081
10031
|
}
|
|
10082
10032
|
/* 处理返回的配置 */
|
|
10083
|
-
|
|
10033
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10084
10034
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10085
10035
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10086
10036
|
/* 创建到页面中 */
|
|
@@ -10093,7 +10043,7 @@ const PopsPanel = {
|
|
|
10093
10043
|
if ($mask != null) {
|
|
10094
10044
|
$anim.after($mask);
|
|
10095
10045
|
}
|
|
10096
|
-
|
|
10046
|
+
const panelHandlerComponents = PanelHandlerComponents();
|
|
10097
10047
|
/**
|
|
10098
10048
|
* 处理内部配置
|
|
10099
10049
|
*/
|
|
@@ -10125,7 +10075,7 @@ const PopsPanel = {
|
|
|
10125
10075
|
endCallBack: config.dragEndCallBack,
|
|
10126
10076
|
});
|
|
10127
10077
|
}
|
|
10128
|
-
|
|
10078
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
10129
10079
|
return {
|
|
10130
10080
|
...result,
|
|
10131
10081
|
addEventListener: (event, listener, options) => {
|
|
@@ -10271,13 +10221,13 @@ const PopsPrompt = {
|
|
|
10271
10221
|
},
|
|
10272
10222
|
]);
|
|
10273
10223
|
// 先把z-index提取出来
|
|
10274
|
-
|
|
10275
|
-
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10224
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10225
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
10226
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
10227
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
10228
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
10229
|
+
const { contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
10230
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
10281
10231
|
/*html*/ `
|
|
10282
10232
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10283
10233
|
? config.title.text
|
|
@@ -10294,8 +10244,8 @@ const PopsPrompt = {
|
|
|
10294
10244
|
/**
|
|
10295
10245
|
* 弹窗的主元素,包括动画层
|
|
10296
10246
|
*/
|
|
10297
|
-
|
|
10298
|
-
|
|
10247
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
10248
|
+
const { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10299
10249
|
/**
|
|
10300
10250
|
* 遮罩层元素
|
|
10301
10251
|
*/
|
|
@@ -10303,10 +10253,10 @@ const PopsPrompt = {
|
|
|
10303
10253
|
/**
|
|
10304
10254
|
* 已创建的元素列表
|
|
10305
10255
|
*/
|
|
10306
|
-
|
|
10256
|
+
const elementList = [$anim];
|
|
10307
10257
|
if (config.mask.enable) {
|
|
10308
10258
|
// 启用遮罩层
|
|
10309
|
-
|
|
10259
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
10310
10260
|
type: popsType,
|
|
10311
10261
|
guid: guid,
|
|
10312
10262
|
config: config,
|
|
@@ -10316,7 +10266,7 @@ const PopsPrompt = {
|
|
|
10316
10266
|
$mask = _handleMask_.maskElement;
|
|
10317
10267
|
elementList.push($mask);
|
|
10318
10268
|
}
|
|
10319
|
-
|
|
10269
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10320
10270
|
/* 输入框赋值初始值 */
|
|
10321
10271
|
$input.value = config.content.text;
|
|
10322
10272
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -10358,7 +10308,7 @@ const PopsPrompt = {
|
|
|
10358
10308
|
if (config.content.select) {
|
|
10359
10309
|
$input.select();
|
|
10360
10310
|
}
|
|
10361
|
-
|
|
10311
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
10362
10312
|
return result;
|
|
10363
10313
|
},
|
|
10364
10314
|
};
|
|
@@ -10472,8 +10422,7 @@ const PopsRightClickMenu = {
|
|
|
10472
10422
|
throw new Error("config.target 不能为空");
|
|
10473
10423
|
}
|
|
10474
10424
|
if (details.data) {
|
|
10475
|
-
|
|
10476
|
-
config.data = details.data;
|
|
10425
|
+
Reflect.set(config, "data", details.data);
|
|
10477
10426
|
}
|
|
10478
10427
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10479
10428
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -10495,7 +10444,7 @@ const PopsRightClickMenu = {
|
|
|
10495
10444
|
},
|
|
10496
10445
|
]);
|
|
10497
10446
|
if (config.style != null) {
|
|
10498
|
-
|
|
10447
|
+
const cssNode = popsDOMUtils.createElement("style", {
|
|
10499
10448
|
innerHTML: config.style,
|
|
10500
10449
|
}, {
|
|
10501
10450
|
type: "text/css",
|
|
@@ -10515,7 +10464,7 @@ const PopsRightClickMenu = {
|
|
|
10515
10464
|
if (!PopsContextMenu.rootElement) {
|
|
10516
10465
|
return;
|
|
10517
10466
|
}
|
|
10518
|
-
|
|
10467
|
+
const $click = event.target;
|
|
10519
10468
|
if ($click.closest(`.pops-${popsType}`)) {
|
|
10520
10469
|
return;
|
|
10521
10470
|
}
|
|
@@ -10532,7 +10481,7 @@ const PopsRightClickMenu = {
|
|
|
10532
10481
|
if (!PopsContextMenu.rootElement) {
|
|
10533
10482
|
return;
|
|
10534
10483
|
}
|
|
10535
|
-
|
|
10484
|
+
const $click = event.target;
|
|
10536
10485
|
if ($click.closest(`.pops-${popsType}`)) {
|
|
10537
10486
|
return;
|
|
10538
10487
|
}
|
|
@@ -10583,7 +10532,7 @@ const PopsRightClickMenu = {
|
|
|
10583
10532
|
if (PopsContextMenu.rootElement) {
|
|
10584
10533
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10585
10534
|
}
|
|
10586
|
-
|
|
10535
|
+
const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10587
10536
|
PopsContextMenu.rootElement = rootElement;
|
|
10588
10537
|
if (config.only) {
|
|
10589
10538
|
PopsHandler.handlePush(popsType, {
|
|
@@ -10622,7 +10571,8 @@ const PopsRightClickMenu = {
|
|
|
10622
10571
|
/**
|
|
10623
10572
|
* 动画结束触发的事件
|
|
10624
10573
|
*/
|
|
10625
|
-
|
|
10574
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
10575
|
+
const transitionEndEvent = (event) => {
|
|
10626
10576
|
popsDOMUtils.off($menu, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10627
10577
|
capture: true,
|
|
10628
10578
|
});
|
|
@@ -10662,7 +10612,7 @@ const PopsRightClickMenu = {
|
|
|
10662
10612
|
if (rootElementMenuData?.root) {
|
|
10663
10613
|
rootElement = rootElementMenuData.root;
|
|
10664
10614
|
}
|
|
10665
|
-
|
|
10615
|
+
const childMenuList = rootElementMenuData.child;
|
|
10666
10616
|
childMenuList.forEach((childMenuElement) => {
|
|
10667
10617
|
this.animationCloseMenu(childMenuElement);
|
|
10668
10618
|
});
|
|
@@ -10674,11 +10624,11 @@ const PopsRightClickMenu = {
|
|
|
10674
10624
|
* @param isChildren 是否是rightClickMenu的某一项的子菜单
|
|
10675
10625
|
*/
|
|
10676
10626
|
createMenuContainerElement(isChildren) {
|
|
10677
|
-
|
|
10627
|
+
const $menu = popsDOMUtils.createElement("div", {
|
|
10678
10628
|
className: `pops-${popsType}`,
|
|
10679
10629
|
innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
|
|
10680
10630
|
});
|
|
10681
|
-
|
|
10631
|
+
const zIndex = this.getMenuZIndex();
|
|
10682
10632
|
if (zIndex > 10000) {
|
|
10683
10633
|
$menu.style.zIndex = zIndex.toString();
|
|
10684
10634
|
}
|
|
@@ -10709,26 +10659,26 @@ const PopsRightClickMenu = {
|
|
|
10709
10659
|
* @param isMainMenu 是否是主菜单
|
|
10710
10660
|
*/
|
|
10711
10661
|
getOffset(menuElement, mousePosition, parentInfo) {
|
|
10712
|
-
|
|
10662
|
+
const result = {
|
|
10713
10663
|
top: 0,
|
|
10714
10664
|
right: 0,
|
|
10715
10665
|
bottom: 0,
|
|
10716
10666
|
left: 0,
|
|
10717
10667
|
};
|
|
10718
|
-
|
|
10719
|
-
|
|
10668
|
+
const menuElementWidth = popsDOMUtils.width(menuElement);
|
|
10669
|
+
const menuElementHeight = popsDOMUtils.height(menuElement);
|
|
10720
10670
|
/**
|
|
10721
10671
|
* 限制的间隙距离
|
|
10722
10672
|
*/
|
|
10723
|
-
|
|
10724
|
-
|
|
10725
|
-
|
|
10673
|
+
const limitDistance = 1;
|
|
10674
|
+
const maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
|
|
10675
|
+
const maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
|
|
10726
10676
|
/* left最大偏移 */
|
|
10727
|
-
|
|
10677
|
+
const maxLeftOffset = maxPageLeftOffset - menuElementWidth;
|
|
10728
10678
|
/* top最大偏移 */
|
|
10729
|
-
|
|
10730
|
-
|
|
10731
|
-
|
|
10679
|
+
const maxTopOffset = maxPageTopOffset - menuElementHeight;
|
|
10680
|
+
const chileMenuLeftOrRightDistance = config.chileMenuLeftOrRightDistance;
|
|
10681
|
+
const childMenuTopOrBottomDistance = config.childMenuTopOrBottomDistance;
|
|
10732
10682
|
let currentLeftOffset = mousePosition.x;
|
|
10733
10683
|
let currentTopOffset = mousePosition.y;
|
|
10734
10684
|
currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
|
|
@@ -10738,9 +10688,8 @@ const PopsRightClickMenu = {
|
|
|
10738
10688
|
// 偏移计算方式就是父菜单的右偏移+父菜单的宽度
|
|
10739
10689
|
if (parentInfo) {
|
|
10740
10690
|
// 子菜单
|
|
10741
|
-
|
|
10742
|
-
currentLeftOffset =
|
|
10743
|
-
maxPageLeftOffset - mainMenuOffset.left - chileMenuLeftOrRightDistance + limitDistance;
|
|
10691
|
+
const mainMenuOffset = popsDOMUtils.offset(parentInfo.$menu);
|
|
10692
|
+
currentLeftOffset = maxPageLeftOffset - mainMenuOffset.left - chileMenuLeftOrRightDistance + limitDistance;
|
|
10744
10693
|
}
|
|
10745
10694
|
else {
|
|
10746
10695
|
// 主菜单 默认的
|
|
@@ -10768,7 +10717,7 @@ const PopsRightClickMenu = {
|
|
|
10768
10717
|
// 超过,那么子菜单将会在放在上面
|
|
10769
10718
|
if (parentInfo) {
|
|
10770
10719
|
// 以项的top偏移为基准
|
|
10771
|
-
|
|
10720
|
+
const parentItemOffset = popsDOMUtils.offset(parentInfo.$parentItem, false);
|
|
10772
10721
|
currentTopOffset =
|
|
10773
10722
|
maxPageTopOffset - parentItemOffset.bottom - childMenuTopOrBottomDistance + limitDistance;
|
|
10774
10723
|
}
|
|
@@ -10799,7 +10748,7 @@ const PopsRightClickMenu = {
|
|
|
10799
10748
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10800
10749
|
*/
|
|
10801
10750
|
showMenu(menuEvent, _config_, menuListenerRootNode) {
|
|
10802
|
-
|
|
10751
|
+
const menuElement = this.createMenuContainerElement(false);
|
|
10803
10752
|
Reflect.set(menuElement, "__menuData__", {
|
|
10804
10753
|
child: [],
|
|
10805
10754
|
});
|
|
@@ -10827,19 +10776,19 @@ const PopsRightClickMenu = {
|
|
|
10827
10776
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10828
10777
|
*/
|
|
10829
10778
|
showClildMenu(menuEvent, posInfo, _config_, rootElement, targetLiElement, menuListenerRootNode) {
|
|
10830
|
-
|
|
10779
|
+
const menuElement = this.createMenuContainerElement(true);
|
|
10831
10780
|
Reflect.set(menuElement, "__menuData__", {
|
|
10832
10781
|
parent: targetLiElement,
|
|
10833
10782
|
root: rootElement,
|
|
10834
10783
|
});
|
|
10835
10784
|
// 根菜单数据
|
|
10836
|
-
|
|
10785
|
+
const rootElementMenuData = Reflect.get(rootElement, "__menuData__");
|
|
10837
10786
|
rootElementMenuData.child.push(menuElement);
|
|
10838
10787
|
// 添加子元素
|
|
10839
10788
|
PopsContextMenu.addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode);
|
|
10840
10789
|
// 添加到页面
|
|
10841
10790
|
popsDOMUtils.append($shadowRoot, menuElement);
|
|
10842
|
-
|
|
10791
|
+
const $parentMenu = targetLiElement.closest(".pops-rightClickMenu");
|
|
10843
10792
|
this.handlerShowMenuCSS(menuElement, posInfo, {
|
|
10844
10793
|
$menu: $parentMenu,
|
|
10845
10794
|
$parentItem: targetLiElement,
|
|
@@ -10853,7 +10802,7 @@ const PopsRightClickMenu = {
|
|
|
10853
10802
|
* @param parentInfo 配置子菜单的父级信息
|
|
10854
10803
|
*/
|
|
10855
10804
|
handlerShowMenuCSS($menu, posInfo, parentInfo) {
|
|
10856
|
-
|
|
10805
|
+
const offset = this.getOffset($menu, {
|
|
10857
10806
|
x: posInfo.clientX,
|
|
10858
10807
|
y: posInfo.clientY,
|
|
10859
10808
|
}, parentInfo);
|
|
@@ -10879,14 +10828,14 @@ const PopsRightClickMenu = {
|
|
|
10879
10828
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10880
10829
|
*/
|
|
10881
10830
|
addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode) {
|
|
10882
|
-
|
|
10883
|
-
|
|
10831
|
+
const menuEventTarget = menuEvent.target;
|
|
10832
|
+
const menuULElement = menuElement.querySelector("ul");
|
|
10884
10833
|
_config_.forEach((item) => {
|
|
10885
|
-
|
|
10834
|
+
const menuLiElement = popsDOMUtils.parseTextToDOM(`<li></li>`);
|
|
10886
10835
|
/* 判断有无图标,有就添加进去 */
|
|
10887
10836
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10888
|
-
|
|
10889
|
-
|
|
10837
|
+
const iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10838
|
+
const iconElement = popsDOMUtils.parseTextToDOM(
|
|
10890
10839
|
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10891
10840
|
menuLiElement.appendChild(iconElement);
|
|
10892
10841
|
}
|
|
@@ -10911,13 +10860,13 @@ const PopsRightClickMenu = {
|
|
|
10911
10860
|
}
|
|
10912
10861
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10913
10862
|
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10914
|
-
|
|
10863
|
+
const li_menuData = Reflect.get(liElement, "__menuData__");
|
|
10915
10864
|
if (!li_menuData) {
|
|
10916
10865
|
return;
|
|
10917
10866
|
}
|
|
10918
10867
|
function removeElement(element) {
|
|
10919
10868
|
element.querySelectorAll("ul li").forEach(($ele) => {
|
|
10920
|
-
|
|
10869
|
+
const menuData = Reflect.get($ele, "__menuData__");
|
|
10921
10870
|
if (menuData?.child) {
|
|
10922
10871
|
removeElement(menuData.child);
|
|
10923
10872
|
}
|
|
@@ -10928,9 +10877,9 @@ const PopsRightClickMenu = {
|
|
|
10928
10877
|
removeElement(li_menuData.child);
|
|
10929
10878
|
});
|
|
10930
10879
|
/* 清理根元素上的children不存在于页面中的元素 */
|
|
10931
|
-
|
|
10880
|
+
const root_menuData = Reflect.get(rootElement, "__menuData__");
|
|
10932
10881
|
for (let index = 0; index < root_menuData.child.length; index++) {
|
|
10933
|
-
|
|
10882
|
+
const element = root_menuData.child[index];
|
|
10934
10883
|
if (!$shadowRoot.contains(element)) {
|
|
10935
10884
|
root_menuData.child.splice(index, 1);
|
|
10936
10885
|
index--;
|
|
@@ -10940,8 +10889,8 @@ const PopsRightClickMenu = {
|
|
|
10940
10889
|
if (!item.item) {
|
|
10941
10890
|
return;
|
|
10942
10891
|
}
|
|
10943
|
-
|
|
10944
|
-
|
|
10892
|
+
const rect = menuLiElement.getBoundingClientRect();
|
|
10893
|
+
const childMenu = PopsContextMenu.showClildMenu(menuEvent, {
|
|
10945
10894
|
clientX: rect.left + popsDOMUtils.outerWidth(menuLiElement),
|
|
10946
10895
|
clientY: rect.top,
|
|
10947
10896
|
}, item.item, rootElement, menuLiElement, menuListenerRootNode);
|
|
@@ -10962,8 +10911,10 @@ const PopsRightClickMenu = {
|
|
|
10962
10911
|
},
|
|
10963
10912
|
});
|
|
10964
10913
|
}
|
|
10965
|
-
catch
|
|
10966
|
-
|
|
10914
|
+
catch {
|
|
10915
|
+
// 忽略
|
|
10916
|
+
}
|
|
10917
|
+
const callbackResult = await item.callback(clickEvent, menuEvent, menuLiElement, menuListenerRootNode);
|
|
10967
10918
|
if (typeof callbackResult === "boolean" && callbackResult == false) {
|
|
10968
10919
|
return;
|
|
10969
10920
|
}
|
|
@@ -11006,8 +10957,8 @@ const searchSuggestionConfig = () => {
|
|
|
11006
10957
|
console.log("删除当前项", [event, $dataItem, dataItem, config]);
|
|
11007
10958
|
return true;
|
|
11008
10959
|
},
|
|
11009
|
-
itemView(dateItem
|
|
11010
|
-
return
|
|
10960
|
+
itemView(dateItem) {
|
|
10961
|
+
return `${dateItem.value}-html`;
|
|
11011
10962
|
},
|
|
11012
10963
|
clickCallback(event, $dataItem, dataItem, config) {
|
|
11013
10964
|
console.log("item项的点击回调", [event, $dataItem, data, config]);
|
|
@@ -11085,7 +11036,7 @@ const PopsSearchSuggestion = {
|
|
|
11085
11036
|
},
|
|
11086
11037
|
]);
|
|
11087
11038
|
if (config.style != null) {
|
|
11088
|
-
|
|
11039
|
+
const cssNode = document.createElement("style");
|
|
11089
11040
|
popsDOMUtils.createElement("style", {
|
|
11090
11041
|
innerHTML: config.style,
|
|
11091
11042
|
}, {
|
|
@@ -11133,8 +11084,7 @@ const PopsSearchSuggestion = {
|
|
|
11133
11084
|
Reflect.set(SearchSuggestion.$el.root, "data-SearchSuggestion", SearchSuggestion);
|
|
11134
11085
|
SearchSuggestion.$el.$dynamicCSS =
|
|
11135
11086
|
SearchSuggestion.$el.root.querySelector("style[data-dynamic]");
|
|
11136
|
-
SearchSuggestion.$el.$hintULContainer =
|
|
11137
|
-
SearchSuggestion.$el.root.querySelector("ul");
|
|
11087
|
+
SearchSuggestion.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
|
|
11138
11088
|
},
|
|
11139
11089
|
/**
|
|
11140
11090
|
* 获取数据
|
|
@@ -11153,7 +11103,7 @@ const PopsSearchSuggestion = {
|
|
|
11153
11103
|
* 获取显示出搜索建议框的html
|
|
11154
11104
|
*/
|
|
11155
11105
|
createSearchSelectElement() {
|
|
11156
|
-
|
|
11106
|
+
const $el = popsDOMUtils.createElement("div", {
|
|
11157
11107
|
className: `pops pops-${popsType}-search-suggestion`,
|
|
11158
11108
|
innerHTML: /*html*/ `
|
|
11159
11109
|
<style type="text/css">
|
|
@@ -11354,7 +11304,7 @@ const PopsSearchSuggestion = {
|
|
|
11354
11304
|
*/
|
|
11355
11305
|
createSearchItemLiElement(dataItem, dateItemIndex) {
|
|
11356
11306
|
const dataValue = SearchSuggestion.getItemDataValue(dataItem);
|
|
11357
|
-
|
|
11307
|
+
const $li = popsDOMUtils.createElement("li", {
|
|
11358
11308
|
className: `pops-${popsType}-search-suggestion-hint-item`,
|
|
11359
11309
|
"data-index": dateItemIndex,
|
|
11360
11310
|
"data-value": dataValue,
|
|
@@ -11362,7 +11312,7 @@ const PopsSearchSuggestion = {
|
|
|
11362
11312
|
Reflect.set($li, "data-index", dateItemIndex);
|
|
11363
11313
|
Reflect.set($li, "data-value", dataValue);
|
|
11364
11314
|
// 项内容
|
|
11365
|
-
|
|
11315
|
+
const $itemInner = dataItem.itemView(dataItem, $li, config);
|
|
11366
11316
|
if (typeof $itemInner === "string") {
|
|
11367
11317
|
PopsSafeUtils.setSafeHTML($li, $itemInner);
|
|
11368
11318
|
}
|
|
@@ -11372,7 +11322,7 @@ const PopsSearchSuggestion = {
|
|
|
11372
11322
|
// 删除按钮
|
|
11373
11323
|
const enableDeleteButton = dataItem.enableDeleteButton;
|
|
11374
11324
|
if (typeof enableDeleteButton === "boolean" && enableDeleteButton) {
|
|
11375
|
-
|
|
11325
|
+
const $deleteIcon = SearchSuggestion.createItemDeleteIcon();
|
|
11376
11326
|
popsDOMUtils.append($li, $deleteIcon);
|
|
11377
11327
|
}
|
|
11378
11328
|
popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
|
|
@@ -11386,14 +11336,14 @@ const PopsSearchSuggestion = {
|
|
|
11386
11336
|
setSearchItemClickEvent($searchItem) {
|
|
11387
11337
|
popsDOMUtils.on($searchItem, "click", async (event) => {
|
|
11388
11338
|
popsDOMUtils.preventEvent(event);
|
|
11389
|
-
|
|
11339
|
+
const $click = event.target;
|
|
11390
11340
|
const data = SearchSuggestion.getData();
|
|
11391
11341
|
const dataItem = Reflect.get($searchItem, "data-value");
|
|
11392
|
-
|
|
11342
|
+
const isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
|
|
11393
11343
|
if (isDelete) {
|
|
11394
11344
|
// 删除
|
|
11395
11345
|
if (typeof dataItem.deleteButtonClickCallback === "function") {
|
|
11396
|
-
|
|
11346
|
+
const result = await dataItem.deleteButtonClickCallback(event, $searchItem, dataItem, config);
|
|
11397
11347
|
if (typeof result === "boolean" && result) {
|
|
11398
11348
|
data.splice(data.indexOf(dataItem), 1);
|
|
11399
11349
|
$searchItem.remove();
|
|
@@ -11408,7 +11358,7 @@ const PopsSearchSuggestion = {
|
|
|
11408
11358
|
else {
|
|
11409
11359
|
// 点击选择项
|
|
11410
11360
|
if (typeof dataItem.clickCallback === "function") {
|
|
11411
|
-
|
|
11361
|
+
const result = await dataItem.clickCallback(event, $searchItem, dataItem, config);
|
|
11412
11362
|
if (typeof result === "boolean" && result) {
|
|
11413
11363
|
if (config.inputTarget instanceof HTMLInputElement ||
|
|
11414
11364
|
config.inputTarget instanceof HTMLTextAreaElement) {
|
|
@@ -11425,6 +11375,7 @@ const PopsSearchSuggestion = {
|
|
|
11425
11375
|
* 设置搜索建议框每一项的选中事件
|
|
11426
11376
|
* @param liElement
|
|
11427
11377
|
*/
|
|
11378
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11428
11379
|
setSearchItemSelectEvent(liElement) {
|
|
11429
11380
|
// popsDOMUtils.on(
|
|
11430
11381
|
// liElement,
|
|
@@ -11446,17 +11397,18 @@ const PopsSearchSuggestion = {
|
|
|
11446
11397
|
capture: true,
|
|
11447
11398
|
}) {
|
|
11448
11399
|
/* 必须是input或者textarea才有input事件 */
|
|
11449
|
-
if (!(config.inputTarget instanceof HTMLInputElement ||
|
|
11450
|
-
config.inputTarget instanceof HTMLTextAreaElement)) {
|
|
11400
|
+
if (!(config.inputTarget instanceof HTMLInputElement || config.inputTarget instanceof HTMLTextAreaElement)) {
|
|
11451
11401
|
return;
|
|
11452
11402
|
}
|
|
11453
11403
|
/* 是input输入框 */
|
|
11454
11404
|
/* 禁用输入框自动提示 */
|
|
11455
11405
|
config.inputTarget.setAttribute("autocomplete", "off");
|
|
11456
11406
|
/* 内容改变事件 */
|
|
11457
|
-
const listenerHandler = popsDOMUtils.onInput(config.inputTarget,
|
|
11407
|
+
const listenerHandler = popsDOMUtils.onInput(config.inputTarget,
|
|
11408
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11409
|
+
async (_event) => {
|
|
11458
11410
|
const data = SearchSuggestion.getData();
|
|
11459
|
-
|
|
11411
|
+
const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.inputTarget.value, data, config);
|
|
11460
11412
|
SearchSuggestion.update(queryDataResult);
|
|
11461
11413
|
SearchSuggestion.updateStyleSheet();
|
|
11462
11414
|
}, option);
|
|
@@ -11465,7 +11417,9 @@ const PopsSearchSuggestion = {
|
|
|
11465
11417
|
/**
|
|
11466
11418
|
* 移除输入框内容改变的监听
|
|
11467
11419
|
*/
|
|
11468
|
-
removeInputChangeEvent(
|
|
11420
|
+
removeInputChangeEvent(
|
|
11421
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11422
|
+
option = {
|
|
11469
11423
|
capture: true,
|
|
11470
11424
|
}) {
|
|
11471
11425
|
for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
|
|
@@ -11600,7 +11554,7 @@ const PopsSearchSuggestion = {
|
|
|
11600
11554
|
* 获取删除按钮的html
|
|
11601
11555
|
*/
|
|
11602
11556
|
createItemDeleteIcon(size = 16, fill = "#bababa") {
|
|
11603
|
-
|
|
11557
|
+
const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
|
|
11604
11558
|
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11605
11559
|
<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
|
|
11606
11560
|
<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
|
|
@@ -11612,7 +11566,7 @@ const PopsSearchSuggestion = {
|
|
|
11612
11566
|
* 设置当前正在搜索中的提示
|
|
11613
11567
|
*/
|
|
11614
11568
|
setPromptsInSearch() {
|
|
11615
|
-
|
|
11569
|
+
const $isSearching = popsDOMUtils.createElement("li", {
|
|
11616
11570
|
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11617
11571
|
innerHTML: config.searchingTip,
|
|
11618
11572
|
});
|
|
@@ -11650,12 +11604,12 @@ const PopsSearchSuggestion = {
|
|
|
11650
11604
|
documentHeight = popsDOMUtils.height(document);
|
|
11651
11605
|
}
|
|
11652
11606
|
// 文档最大宽度
|
|
11653
|
-
|
|
11607
|
+
const documentWidth = popsDOMUtils.width(document);
|
|
11654
11608
|
let position = config.position;
|
|
11655
11609
|
if (config.position === "auto") {
|
|
11656
11610
|
// 需目标高度+搜索建议框高度大于文档高度,则显示在上面
|
|
11657
|
-
|
|
11658
|
-
|
|
11611
|
+
const targetBottom = targetRect.bottom;
|
|
11612
|
+
const searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
|
|
11659
11613
|
if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
|
|
11660
11614
|
// 在上面
|
|
11661
11615
|
position = "top";
|
|
@@ -11675,7 +11629,7 @@ const PopsSearchSuggestion = {
|
|
|
11675
11629
|
// 翻转折叠
|
|
11676
11630
|
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
|
|
11677
11631
|
}
|
|
11678
|
-
|
|
11632
|
+
const bottom = documentHeight - targetRect.top + config.topDistance;
|
|
11679
11633
|
SearchSuggestion.$el.root.style.top = "";
|
|
11680
11634
|
SearchSuggestion.$el.root.style.bottom = bottom + "px";
|
|
11681
11635
|
}
|
|
@@ -11684,13 +11638,13 @@ const PopsSearchSuggestion = {
|
|
|
11684
11638
|
if (config.useFoldAnimation) {
|
|
11685
11639
|
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
|
|
11686
11640
|
}
|
|
11687
|
-
|
|
11641
|
+
const top = targetRect.height + targetRect.top + config.topDistance;
|
|
11688
11642
|
SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
|
|
11689
11643
|
SearchSuggestion.$el.root.style.bottom = "";
|
|
11690
11644
|
SearchSuggestion.$el.root.style.top = top + "px";
|
|
11691
11645
|
}
|
|
11692
11646
|
let left = targetRect.left;
|
|
11693
|
-
|
|
11647
|
+
const hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
|
|
11694
11648
|
if (hintUIWidth > documentWidth) {
|
|
11695
11649
|
// 超出宽度
|
|
11696
11650
|
left = left + documentWidth - hintUIWidth;
|
|
@@ -11711,7 +11665,7 @@ const PopsSearchSuggestion = {
|
|
|
11711
11665
|
* @param target 目标元素
|
|
11712
11666
|
*/
|
|
11713
11667
|
changeHintULElementWidth(target = config.target ?? config.inputTarget) {
|
|
11714
|
-
|
|
11668
|
+
const targetRect = target.getBoundingClientRect();
|
|
11715
11669
|
if (config.followTargetWidth) {
|
|
11716
11670
|
SearchSuggestion.$el.$hintULContainer.style.width = targetRect.width + "px";
|
|
11717
11671
|
}
|
|
@@ -11723,7 +11677,7 @@ const PopsSearchSuggestion = {
|
|
|
11723
11677
|
* 动态更新CSS
|
|
11724
11678
|
*/
|
|
11725
11679
|
updateDynamicCSS() {
|
|
11726
|
-
|
|
11680
|
+
const cssText = SearchSuggestion.getDynamicCSS();
|
|
11727
11681
|
PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dynamicCSS, cssText);
|
|
11728
11682
|
},
|
|
11729
11683
|
/**
|
|
@@ -11765,9 +11719,9 @@ const PopsSearchSuggestion = {
|
|
|
11765
11719
|
}
|
|
11766
11720
|
SearchSuggestion.clear(true);
|
|
11767
11721
|
/* 添加进ul中 */
|
|
11768
|
-
|
|
11722
|
+
const fragment = document.createDocumentFragment();
|
|
11769
11723
|
data.forEach((item, index) => {
|
|
11770
|
-
|
|
11724
|
+
const $item = SearchSuggestion.createSearchItemLiElement(item, index);
|
|
11771
11725
|
SearchSuggestion.setSearchItemClickEvent($item);
|
|
11772
11726
|
SearchSuggestion.setSearchItemSelectEvent($item);
|
|
11773
11727
|
fragment.appendChild($item);
|
|
@@ -11835,11 +11789,13 @@ const PopsSearchSuggestion = {
|
|
|
11835
11789
|
},
|
|
11836
11790
|
};
|
|
11837
11791
|
|
|
11792
|
+
const version = "2.4.6";
|
|
11793
|
+
|
|
11838
11794
|
class Pops {
|
|
11839
11795
|
/** 配置 */
|
|
11840
11796
|
config = {
|
|
11841
11797
|
/** 版本号 */
|
|
11842
|
-
version:
|
|
11798
|
+
version: version,
|
|
11843
11799
|
cssText: PopsCSS,
|
|
11844
11800
|
/** icon图标的svg代码 */
|
|
11845
11801
|
iconSVG: PopsIcon.$data,
|
|
@@ -11874,9 +11830,7 @@ class Pops {
|
|
|
11874
11830
|
if (typeof PopsCore.globalThis.pops === "object") {
|
|
11875
11831
|
popsUtils.delete(PopsCore.globalThis, "pops");
|
|
11876
11832
|
}
|
|
11877
|
-
if (typeof unsafeWindow === "object" &&
|
|
11878
|
-
unsafeWindow != null &&
|
|
11879
|
-
typeof unsafeWindow.pops === "object") {
|
|
11833
|
+
if (typeof unsafeWindow === "object" && unsafeWindow != null && typeof unsafeWindow.pops === "object") {
|
|
11880
11834
|
popsUtils.delete(unsafeWindow, "pops");
|
|
11881
11835
|
}
|
|
11882
11836
|
return new Pops();
|
|
@@ -11897,7 +11851,7 @@ class Pops {
|
|
|
11897
11851
|
* @param details 配置
|
|
11898
11852
|
*/
|
|
11899
11853
|
alert = (details) => {
|
|
11900
|
-
|
|
11854
|
+
const dialog = PopsAlert.init(details);
|
|
11901
11855
|
return dialog;
|
|
11902
11856
|
};
|
|
11903
11857
|
/**
|
|
@@ -11905,7 +11859,7 @@ class Pops {
|
|
|
11905
11859
|
* @param details 配置
|
|
11906
11860
|
*/
|
|
11907
11861
|
confirm = (details) => {
|
|
11908
|
-
|
|
11862
|
+
const dialog = PopsConfirm.init(details);
|
|
11909
11863
|
return dialog;
|
|
11910
11864
|
};
|
|
11911
11865
|
/**
|
|
@@ -11913,7 +11867,7 @@ class Pops {
|
|
|
11913
11867
|
* @param details 配置
|
|
11914
11868
|
*/
|
|
11915
11869
|
prompt = (details) => {
|
|
11916
|
-
|
|
11870
|
+
const dialog = PopsPrompt.init(details);
|
|
11917
11871
|
return dialog;
|
|
11918
11872
|
};
|
|
11919
11873
|
/**
|
|
@@ -11921,7 +11875,7 @@ class Pops {
|
|
|
11921
11875
|
* @param details 配置
|
|
11922
11876
|
*/
|
|
11923
11877
|
loading = (details) => {
|
|
11924
|
-
|
|
11878
|
+
const popsLoading = PopsLoading.init(details);
|
|
11925
11879
|
return popsLoading;
|
|
11926
11880
|
};
|
|
11927
11881
|
/**
|
|
@@ -11929,7 +11883,7 @@ class Pops {
|
|
|
11929
11883
|
* @param details 配置
|
|
11930
11884
|
*/
|
|
11931
11885
|
iframe = (details) => {
|
|
11932
|
-
|
|
11886
|
+
const dialog = PopsIframe.init(details);
|
|
11933
11887
|
return dialog;
|
|
11934
11888
|
};
|
|
11935
11889
|
/**
|
|
@@ -11937,7 +11891,7 @@ class Pops {
|
|
|
11937
11891
|
* @param details 配置
|
|
11938
11892
|
*/
|
|
11939
11893
|
tooltip = (details) => {
|
|
11940
|
-
|
|
11894
|
+
const popsTooltip = PopsTooltip.init(details);
|
|
11941
11895
|
return popsTooltip;
|
|
11942
11896
|
};
|
|
11943
11897
|
/**
|
|
@@ -11945,7 +11899,7 @@ class Pops {
|
|
|
11945
11899
|
* @param details 配置
|
|
11946
11900
|
*/
|
|
11947
11901
|
drawer = (details) => {
|
|
11948
|
-
|
|
11902
|
+
const dialog = PopsDrawer.init(details);
|
|
11949
11903
|
return dialog;
|
|
11950
11904
|
};
|
|
11951
11905
|
/**
|
|
@@ -11953,7 +11907,7 @@ class Pops {
|
|
|
11953
11907
|
* @param details 配置
|
|
11954
11908
|
*/
|
|
11955
11909
|
folder = (details) => {
|
|
11956
|
-
|
|
11910
|
+
const dialog = PopsFolder.init(details);
|
|
11957
11911
|
return dialog;
|
|
11958
11912
|
};
|
|
11959
11913
|
/**
|
|
@@ -11961,7 +11915,7 @@ class Pops {
|
|
|
11961
11915
|
* @param details 配置
|
|
11962
11916
|
*/
|
|
11963
11917
|
panel = (details) => {
|
|
11964
|
-
|
|
11918
|
+
const dialog = PopsPanel.init(details);
|
|
11965
11919
|
return dialog;
|
|
11966
11920
|
};
|
|
11967
11921
|
/**
|
|
@@ -11969,7 +11923,7 @@ class Pops {
|
|
|
11969
11923
|
* @param details 配置
|
|
11970
11924
|
*/
|
|
11971
11925
|
rightClickMenu = (details) => {
|
|
11972
|
-
|
|
11926
|
+
const popsRightClickMenu = PopsRightClickMenu.init(details);
|
|
11973
11927
|
return popsRightClickMenu;
|
|
11974
11928
|
};
|
|
11975
11929
|
/**
|
|
@@ -11990,7 +11944,7 @@ class Pops {
|
|
|
11990
11944
|
* searchSuggestion.setAllEvent();
|
|
11991
11945
|
*/
|
|
11992
11946
|
searchSuggestion = (details) => {
|
|
11993
|
-
|
|
11947
|
+
const popsSearchSuggestion = PopsSearchSuggestion.init(details);
|
|
11994
11948
|
return popsSearchSuggestion;
|
|
11995
11949
|
};
|
|
11996
11950
|
}
|