@whitesev/pops 2.4.5 → 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 +1 -1
- 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.iife.js
CHANGED
|
@@ -15,12 +15,12 @@ var pops = (function () {
|
|
|
15
15
|
* 获取全局配置
|
|
16
16
|
*/
|
|
17
17
|
getGlobalConfig() {
|
|
18
|
-
|
|
18
|
+
const result = {};
|
|
19
19
|
Object.keys(GlobalConfig.config).forEach((keyName) => {
|
|
20
|
-
|
|
20
|
+
const configValue = Reflect.get(GlobalConfig.config, keyName);
|
|
21
21
|
if (keyName === "style") {
|
|
22
22
|
// 设置style属性
|
|
23
|
-
|
|
23
|
+
const style = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
|
|
24
24
|
if (typeof style === "string") {
|
|
25
25
|
result.style = style;
|
|
26
26
|
}
|
|
@@ -29,7 +29,7 @@ var pops = (function () {
|
|
|
29
29
|
// 设置zIndex属性
|
|
30
30
|
let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
|
|
31
31
|
if (typeof zIndex === "string") {
|
|
32
|
-
|
|
32
|
+
const newIndex = (zIndex = Number(zIndex));
|
|
33
33
|
if (!isNaN(newIndex)) {
|
|
34
34
|
result.zIndex = newIndex;
|
|
35
35
|
}
|
|
@@ -41,7 +41,7 @@ var pops = (function () {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
else if (keyName === "mask") {
|
|
44
|
-
|
|
44
|
+
const mask = GlobalConfig.config.mask == null ? {} : GlobalConfig.config.mask;
|
|
45
45
|
if (typeof mask === "object" && mask != null) {
|
|
46
46
|
result.mask = mask;
|
|
47
47
|
}
|
|
@@ -553,7 +553,7 @@ var pops = (function () {
|
|
|
553
553
|
}
|
|
554
554
|
}
|
|
555
555
|
assign(target = {}, source = {}, isAdd = false) {
|
|
556
|
-
|
|
556
|
+
const UtilsContext = this;
|
|
557
557
|
if (source == null) {
|
|
558
558
|
return target;
|
|
559
559
|
}
|
|
@@ -561,7 +561,7 @@ var pops = (function () {
|
|
|
561
561
|
target = {};
|
|
562
562
|
}
|
|
563
563
|
if (Array.isArray(source)) {
|
|
564
|
-
|
|
564
|
+
const canTraverse = source.filter((item) => {
|
|
565
565
|
return typeof item === "object";
|
|
566
566
|
});
|
|
567
567
|
if (!canTraverse.length) {
|
|
@@ -571,8 +571,8 @@ var pops = (function () {
|
|
|
571
571
|
if (isAdd) {
|
|
572
572
|
for (const sourceKeyName in source) {
|
|
573
573
|
const targetKeyName = sourceKeyName;
|
|
574
|
-
|
|
575
|
-
|
|
574
|
+
const targetValue = target[targetKeyName];
|
|
575
|
+
const sourceValue = source[sourceKeyName];
|
|
576
576
|
if (typeof sourceValue === "object" &&
|
|
577
577
|
sourceValue != null &&
|
|
578
578
|
sourceKeyName in target &&
|
|
@@ -587,22 +587,19 @@ var pops = (function () {
|
|
|
587
587
|
else {
|
|
588
588
|
for (const targetKeyName in target) {
|
|
589
589
|
if (targetKeyName in source) {
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
// @ts-ignore
|
|
593
|
-
let sourceValue = source[targetKeyName];
|
|
590
|
+
const targetValue = Reflect.get(target, targetKeyName);
|
|
591
|
+
const sourceValue = Reflect.get(source, targetKeyName);
|
|
594
592
|
if (typeof sourceValue === "object" &&
|
|
595
593
|
sourceValue != null &&
|
|
596
594
|
!UtilsContext.isDOM(sourceValue) &&
|
|
597
595
|
Object.keys(sourceValue).length) {
|
|
598
596
|
/* 源端的值是object类型,且不是元素节点 */
|
|
599
|
-
|
|
600
|
-
|
|
597
|
+
const childObjectValue = UtilsContext.assign(targetValue, sourceValue, isAdd);
|
|
598
|
+
Reflect.set(target, targetKeyName, childObjectValue);
|
|
601
599
|
continue;
|
|
602
600
|
}
|
|
603
601
|
/* 直接赋值 */
|
|
604
|
-
|
|
605
|
-
target[targetKeyName] = sourceValue;
|
|
602
|
+
Reflect.set(target, targetKeyName, sourceValue);
|
|
606
603
|
}
|
|
607
604
|
}
|
|
608
605
|
}
|
|
@@ -617,15 +614,16 @@ var pops = (function () {
|
|
|
617
614
|
}
|
|
618
615
|
else {
|
|
619
616
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (charStr) {
|
|
620
|
-
|
|
617
|
+
const randomValue = (Math.random() * 16) | 0, randomCharValue = charStr === "x" ? randomValue : (randomValue & 0x3) | 0x8;
|
|
621
618
|
return randomCharValue.toString(16);
|
|
622
619
|
});
|
|
623
620
|
}
|
|
624
621
|
}
|
|
625
|
-
contains(
|
|
626
|
-
|
|
622
|
+
contains(...args) {
|
|
623
|
+
const [context, target] = args;
|
|
624
|
+
if (args.length === 1) {
|
|
627
625
|
// 只判断该页面是否存在该元素
|
|
628
|
-
return this.contains(PopsCore.document.body || PopsCore.document.documentElement,
|
|
626
|
+
return this.contains(PopsCore.document.body || PopsCore.document.documentElement, args[0]);
|
|
629
627
|
}
|
|
630
628
|
else {
|
|
631
629
|
if (target == null) {
|
|
@@ -648,7 +646,7 @@ var pops = (function () {
|
|
|
648
646
|
}
|
|
649
647
|
}
|
|
650
648
|
formatTime(text = new Date(), formatType = "yyyy-MM-dd HH:mm:ss") {
|
|
651
|
-
|
|
649
|
+
const time = text == null ? new Date() : new Date(text);
|
|
652
650
|
/**
|
|
653
651
|
* 校验时间补0
|
|
654
652
|
* @param timeNum
|
|
@@ -667,7 +665,7 @@ var pops = (function () {
|
|
|
667
665
|
function timeSystemChange(hourNum) {
|
|
668
666
|
return hourNum > 12 ? hourNum - 12 : hourNum;
|
|
669
667
|
}
|
|
670
|
-
|
|
668
|
+
const timeRegexp = {
|
|
671
669
|
yyyy: time.getFullYear(),
|
|
672
670
|
/* 年 */
|
|
673
671
|
MM: checkTime(time.getMonth() + 1),
|
|
@@ -684,7 +682,7 @@ var pops = (function () {
|
|
|
684
682
|
/* 秒 */
|
|
685
683
|
};
|
|
686
684
|
Object.keys(timeRegexp).forEach(function (key) {
|
|
687
|
-
|
|
685
|
+
const replaecRegexp = new RegExp(key, "g");
|
|
688
686
|
formatType = formatType.replace(replaecRegexp, timeRegexp[key]);
|
|
689
687
|
});
|
|
690
688
|
return formatType;
|
|
@@ -696,7 +694,7 @@ var pops = (function () {
|
|
|
696
694
|
}
|
|
697
695
|
let result = 0;
|
|
698
696
|
let resultType = "KB";
|
|
699
|
-
|
|
697
|
+
const sizeData = {};
|
|
700
698
|
sizeData.B = 1;
|
|
701
699
|
sizeData.KB = 1024;
|
|
702
700
|
sizeData.MB = sizeData.KB * sizeData.KB;
|
|
@@ -709,7 +707,7 @@ var pops = (function () {
|
|
|
709
707
|
sizeData.BB = sizeData.YB * sizeData.KB;
|
|
710
708
|
sizeData.NB = sizeData.BB * sizeData.KB;
|
|
711
709
|
sizeData.DB = sizeData.NB * sizeData.KB;
|
|
712
|
-
for (
|
|
710
|
+
for (const key in sizeData) {
|
|
713
711
|
result = byteSize / sizeData[key];
|
|
714
712
|
resultType = key;
|
|
715
713
|
if (sizeData.KB >= result) {
|
|
@@ -737,7 +735,7 @@ var pops = (function () {
|
|
|
737
735
|
try {
|
|
738
736
|
return setTimeout$1(callback, timeout);
|
|
739
737
|
}
|
|
740
|
-
catch
|
|
738
|
+
catch {
|
|
741
739
|
return PopsCore.setTimeout(callback, timeout);
|
|
742
740
|
}
|
|
743
741
|
}
|
|
@@ -750,7 +748,8 @@ var pops = (function () {
|
|
|
750
748
|
clearTimeout$1(timeId);
|
|
751
749
|
}
|
|
752
750
|
}
|
|
753
|
-
catch
|
|
751
|
+
catch {
|
|
752
|
+
// TODO
|
|
754
753
|
}
|
|
755
754
|
finally {
|
|
756
755
|
PopsCore.clearTimeout(timeId);
|
|
@@ -763,7 +762,7 @@ var pops = (function () {
|
|
|
763
762
|
try {
|
|
764
763
|
return setInterval$1(callback, timeout);
|
|
765
764
|
}
|
|
766
|
-
catch
|
|
765
|
+
catch {
|
|
767
766
|
return PopsCore.setInterval(callback, timeout);
|
|
768
767
|
}
|
|
769
768
|
}
|
|
@@ -776,7 +775,8 @@ var pops = (function () {
|
|
|
776
775
|
clearInterval$1(timeId);
|
|
777
776
|
}
|
|
778
777
|
}
|
|
779
|
-
catch
|
|
778
|
+
catch {
|
|
779
|
+
// 忽略
|
|
780
780
|
}
|
|
781
781
|
finally {
|
|
782
782
|
PopsCore.clearInterval(timeId);
|
|
@@ -790,10 +790,8 @@ var pops = (function () {
|
|
|
790
790
|
* 获取安全的html
|
|
791
791
|
*/
|
|
792
792
|
getSafeHTML(text) {
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
// @ts-ignore
|
|
796
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
793
|
+
if (window.trustedTypes) {
|
|
794
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
797
795
|
createHTML: (html) => html,
|
|
798
796
|
});
|
|
799
797
|
return policy.createHTML(text);
|
|
@@ -831,7 +829,7 @@ var pops = (function () {
|
|
|
831
829
|
* @param option
|
|
832
830
|
*/
|
|
833
831
|
function getOption(args, startIndex, option) {
|
|
834
|
-
|
|
832
|
+
const currentParam = args[startIndex];
|
|
835
833
|
if (typeof currentParam === "boolean") {
|
|
836
834
|
option.capture = currentParam;
|
|
837
835
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -853,8 +851,9 @@ var pops = (function () {
|
|
|
853
851
|
}
|
|
854
852
|
return option;
|
|
855
853
|
}
|
|
856
|
-
|
|
857
|
-
|
|
854
|
+
const DOMUtilsContext = this;
|
|
855
|
+
// eslint-disable-next-line prefer-rest-params
|
|
856
|
+
const args = arguments;
|
|
858
857
|
if (typeof element === "string") {
|
|
859
858
|
element = DOMUtilsContext.selectorAll(element);
|
|
860
859
|
}
|
|
@@ -930,14 +929,14 @@ var pops = (function () {
|
|
|
930
929
|
totalParent = PopsCore.document.documentElement;
|
|
931
930
|
}
|
|
932
931
|
}
|
|
933
|
-
|
|
932
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
934
933
|
// 判断目标元素是否匹配选择器
|
|
935
934
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
936
935
|
/* 当前目标可以被selector所匹配到 */
|
|
937
936
|
return true;
|
|
938
937
|
}
|
|
939
938
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
940
|
-
|
|
939
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
941
940
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
942
941
|
eventTarget = $closestMatches;
|
|
943
942
|
return true;
|
|
@@ -953,7 +952,9 @@ var pops = (function () {
|
|
|
953
952
|
},
|
|
954
953
|
});
|
|
955
954
|
}
|
|
956
|
-
catch
|
|
955
|
+
catch {
|
|
956
|
+
// 忽略
|
|
957
|
+
}
|
|
957
958
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
958
959
|
checkOptionOnceToRemoveEventListener();
|
|
959
960
|
}
|
|
@@ -968,7 +969,7 @@ var pops = (function () {
|
|
|
968
969
|
eventTypeList.forEach((eventName) => {
|
|
969
970
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
970
971
|
/* 获取对象上的事件 */
|
|
971
|
-
|
|
972
|
+
const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
972
973
|
/* 初始化对象上的xx事件 */
|
|
973
974
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
974
975
|
elementEvents[eventName].push({
|
|
@@ -990,7 +991,7 @@ var pops = (function () {
|
|
|
990
991
|
* @param option
|
|
991
992
|
*/
|
|
992
993
|
function getOption(args1, startIndex, option) {
|
|
993
|
-
|
|
994
|
+
const currentParam = args1[startIndex];
|
|
994
995
|
if (typeof currentParam === "boolean") {
|
|
995
996
|
option.capture = currentParam;
|
|
996
997
|
}
|
|
@@ -999,8 +1000,9 @@ var pops = (function () {
|
|
|
999
1000
|
}
|
|
1000
1001
|
return option;
|
|
1001
1002
|
}
|
|
1002
|
-
|
|
1003
|
-
|
|
1003
|
+
const DOMUtilsContext = this;
|
|
1004
|
+
// eslint-disable-next-line prefer-rest-params
|
|
1005
|
+
const args = arguments;
|
|
1004
1006
|
if (typeof element === "string") {
|
|
1005
1007
|
element = DOMUtilsContext.selectorAll(element);
|
|
1006
1008
|
}
|
|
@@ -1062,14 +1064,14 @@ var pops = (function () {
|
|
|
1062
1064
|
}
|
|
1063
1065
|
elementList.forEach((elementItem) => {
|
|
1064
1066
|
/* 获取对象上的事件 */
|
|
1065
|
-
|
|
1067
|
+
const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
1066
1068
|
eventTypeList.forEach((eventName) => {
|
|
1067
1069
|
let handlers = elementEvents[eventName] || [];
|
|
1068
1070
|
if (typeof filter === "function") {
|
|
1069
1071
|
handlers = handlers.filter(filter);
|
|
1070
1072
|
}
|
|
1071
1073
|
for (let index = 0; index < handlers.length; index++) {
|
|
1072
|
-
|
|
1074
|
+
const handler = handlers[index];
|
|
1073
1075
|
let flag = true;
|
|
1074
1076
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
1075
1077
|
// callback不同
|
|
@@ -1129,10 +1131,10 @@ var pops = (function () {
|
|
|
1129
1131
|
if (!__symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
1130
1132
|
return;
|
|
1131
1133
|
}
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
+
const elementEvents = elementItem[__symbolEvents] || {};
|
|
1135
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
1134
1136
|
iterEventNameList.forEach((eventName) => {
|
|
1135
|
-
|
|
1137
|
+
const handlers = elementEvents[eventName];
|
|
1136
1138
|
if (!handlers) {
|
|
1137
1139
|
return;
|
|
1138
1140
|
}
|
|
@@ -1172,7 +1174,7 @@ var pops = (function () {
|
|
|
1172
1174
|
return false;
|
|
1173
1175
|
}
|
|
1174
1176
|
}
|
|
1175
|
-
catch
|
|
1177
|
+
catch {
|
|
1176
1178
|
return false;
|
|
1177
1179
|
}
|
|
1178
1180
|
}
|
|
@@ -1183,7 +1185,7 @@ var pops = (function () {
|
|
|
1183
1185
|
removeDomReadyListener();
|
|
1184
1186
|
callback();
|
|
1185
1187
|
}
|
|
1186
|
-
|
|
1188
|
+
const targetList = [
|
|
1187
1189
|
{
|
|
1188
1190
|
target: PopsCore.document,
|
|
1189
1191
|
eventType: "DOMContentLoaded",
|
|
@@ -1200,7 +1202,7 @@ var pops = (function () {
|
|
|
1200
1202
|
*/
|
|
1201
1203
|
function addDomReadyListener() {
|
|
1202
1204
|
for (let index = 0; index < targetList.length; index++) {
|
|
1203
|
-
|
|
1205
|
+
const item = targetList[index];
|
|
1204
1206
|
that.on(item.target, item.eventType, item.callback);
|
|
1205
1207
|
}
|
|
1206
1208
|
}
|
|
@@ -1209,7 +1211,7 @@ var pops = (function () {
|
|
|
1209
1211
|
*/
|
|
1210
1212
|
function removeDomReadyListener() {
|
|
1211
1213
|
for (let index = 0; index < targetList.length; index++) {
|
|
1212
|
-
|
|
1214
|
+
const item = targetList[index];
|
|
1213
1215
|
that.off(item.target, item.eventType, item.callback);
|
|
1214
1216
|
}
|
|
1215
1217
|
}
|
|
@@ -1260,7 +1262,7 @@ var pops = (function () {
|
|
|
1260
1262
|
}
|
|
1261
1263
|
elementList.forEach((elementItem) => {
|
|
1262
1264
|
/* 获取对象上的事件 */
|
|
1263
|
-
|
|
1265
|
+
const events = elementItem[SymbolEvents] || {};
|
|
1264
1266
|
eventTypeList.forEach((_eventType_) => {
|
|
1265
1267
|
let event = null;
|
|
1266
1268
|
if (details && details instanceof Event) {
|
|
@@ -1300,7 +1302,7 @@ var pops = (function () {
|
|
|
1300
1302
|
* })
|
|
1301
1303
|
* */
|
|
1302
1304
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1303
|
-
|
|
1305
|
+
const DOMUtilsContext = this;
|
|
1304
1306
|
if (typeof element === "string") {
|
|
1305
1307
|
element = PopsCore.document.querySelector(element);
|
|
1306
1308
|
}
|
|
@@ -1329,7 +1331,7 @@ var pops = (function () {
|
|
|
1329
1331
|
* })
|
|
1330
1332
|
* */
|
|
1331
1333
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1332
|
-
|
|
1334
|
+
const DOMUtilsContext = this;
|
|
1333
1335
|
if (typeof element === "string") {
|
|
1334
1336
|
element = PopsCore.document.querySelector(element);
|
|
1335
1337
|
}
|
|
@@ -1358,7 +1360,7 @@ var pops = (function () {
|
|
|
1358
1360
|
* })
|
|
1359
1361
|
* */
|
|
1360
1362
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1361
|
-
|
|
1363
|
+
const DOMUtilsContext = this;
|
|
1362
1364
|
if (typeof element === "string") {
|
|
1363
1365
|
element = PopsCore.document.querySelector(element);
|
|
1364
1366
|
}
|
|
@@ -1387,7 +1389,7 @@ var pops = (function () {
|
|
|
1387
1389
|
* })
|
|
1388
1390
|
*/
|
|
1389
1391
|
hover(element, handler, option) {
|
|
1390
|
-
|
|
1392
|
+
const DOMUtilsContext = this;
|
|
1391
1393
|
if (typeof element === "string") {
|
|
1392
1394
|
element = PopsCore.document.querySelector(element);
|
|
1393
1395
|
}
|
|
@@ -1413,7 +1415,7 @@ var pops = (function () {
|
|
|
1413
1415
|
* })
|
|
1414
1416
|
*/
|
|
1415
1417
|
keyup(target, handler, option) {
|
|
1416
|
-
|
|
1418
|
+
const DOMUtilsContext = this;
|
|
1417
1419
|
if (target == null) {
|
|
1418
1420
|
return;
|
|
1419
1421
|
}
|
|
@@ -1438,7 +1440,7 @@ var pops = (function () {
|
|
|
1438
1440
|
* })
|
|
1439
1441
|
*/
|
|
1440
1442
|
keydown(target, handler, option) {
|
|
1441
|
-
|
|
1443
|
+
const DOMUtilsContext = this;
|
|
1442
1444
|
if (target == null) {
|
|
1443
1445
|
return;
|
|
1444
1446
|
}
|
|
@@ -1463,7 +1465,7 @@ var pops = (function () {
|
|
|
1463
1465
|
* })
|
|
1464
1466
|
*/
|
|
1465
1467
|
keypress(target, handler, option) {
|
|
1466
|
-
|
|
1468
|
+
const DOMUtilsContext = this;
|
|
1467
1469
|
if (target == null) {
|
|
1468
1470
|
return;
|
|
1469
1471
|
}
|
|
@@ -1484,6 +1486,7 @@ var pops = (function () {
|
|
|
1484
1486
|
}
|
|
1485
1487
|
if (arguments.length === 1) {
|
|
1486
1488
|
/* 直接阻止事件 */
|
|
1489
|
+
// eslint-disable-next-line prefer-rest-params
|
|
1487
1490
|
return stopEvent(arguments[0]);
|
|
1488
1491
|
}
|
|
1489
1492
|
else {
|
|
@@ -1508,32 +1511,28 @@ var pops = (function () {
|
|
|
1508
1511
|
return $ele?.innerHTML?.trim() === "";
|
|
1509
1512
|
});
|
|
1510
1513
|
}
|
|
1511
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1512
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1514
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1513
1515
|
// contains 语法
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1517
|
+
const text = textMatch[2];
|
|
1516
1518
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1517
1519
|
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1518
|
-
// @ts-ignore
|
|
1519
1520
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1520
1521
|
});
|
|
1521
1522
|
}
|
|
1522
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1523
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1523
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1524
1524
|
// regexp 语法
|
|
1525
|
-
|
|
1525
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1526
1526
|
let pattern = textMatch[2];
|
|
1527
|
-
|
|
1527
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1528
1528
|
let flags = "";
|
|
1529
1529
|
if (flagMatch) {
|
|
1530
1530
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1531
1531
|
flags = flagMatch[3];
|
|
1532
1532
|
}
|
|
1533
|
-
|
|
1533
|
+
const regexp = new RegExp(pattern, flags);
|
|
1534
1534
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1535
1535
|
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1536
|
-
// @ts-ignore
|
|
1537
1536
|
return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
|
|
1538
1537
|
});
|
|
1539
1538
|
}
|
|
@@ -1573,33 +1572,29 @@ var pops = (function () {
|
|
|
1573
1572
|
selector = selector.replace(/:empty$/gi, "");
|
|
1574
1573
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1575
1574
|
}
|
|
1576
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1577
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1575
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1578
1576
|
// contains 语法
|
|
1579
|
-
|
|
1580
|
-
|
|
1577
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1578
|
+
const text = textMatch[2];
|
|
1581
1579
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1582
|
-
// @ts-ignore
|
|
1583
1580
|
let content = $el?.textContent || $el?.innerText;
|
|
1584
1581
|
if (typeof content !== "string") {
|
|
1585
1582
|
content = "";
|
|
1586
1583
|
}
|
|
1587
1584
|
return $el.matches(selector) && content?.includes(text);
|
|
1588
1585
|
}
|
|
1589
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1590
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1586
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1591
1587
|
// regexp 语法
|
|
1592
|
-
|
|
1588
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1593
1589
|
let pattern = textMatch[2];
|
|
1594
|
-
|
|
1590
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1595
1591
|
let flags = "";
|
|
1596
1592
|
if (flagMatch) {
|
|
1597
1593
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1598
1594
|
flags = flagMatch[3];
|
|
1599
1595
|
}
|
|
1600
|
-
|
|
1596
|
+
const regexp = new RegExp(pattern, flags);
|
|
1601
1597
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1602
|
-
// @ts-ignore
|
|
1603
1598
|
let content = $el?.textContent || $el?.innerText;
|
|
1604
1599
|
if (typeof content !== "string") {
|
|
1605
1600
|
content = "";
|
|
@@ -1616,45 +1611,41 @@ var pops = (function () {
|
|
|
1616
1611
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1617
1612
|
// empty 语法
|
|
1618
1613
|
selector = selector.replace(/:empty$/gi, "");
|
|
1619
|
-
|
|
1614
|
+
const $closest = $el?.closest(selector);
|
|
1620
1615
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1621
1616
|
return $closest;
|
|
1622
1617
|
}
|
|
1623
1618
|
return null;
|
|
1624
1619
|
}
|
|
1625
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1626
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1620
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1627
1621
|
// contains 语法
|
|
1628
|
-
|
|
1629
|
-
|
|
1622
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1623
|
+
const text = textMatch[2];
|
|
1630
1624
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1631
|
-
|
|
1625
|
+
const $closest = $el?.closest(selector);
|
|
1632
1626
|
if ($closest) {
|
|
1633
|
-
|
|
1634
|
-
let content = $el?.textContent || $el?.innerText;
|
|
1627
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1635
1628
|
if (typeof content === "string" && content.includes(text)) {
|
|
1636
1629
|
return $closest;
|
|
1637
1630
|
}
|
|
1638
1631
|
}
|
|
1639
1632
|
return null;
|
|
1640
1633
|
}
|
|
1641
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1642
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1634
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1643
1635
|
// regexp 语法
|
|
1644
|
-
|
|
1636
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1645
1637
|
let pattern = textMatch[2];
|
|
1646
|
-
|
|
1638
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1647
1639
|
let flags = "";
|
|
1648
1640
|
if (flagMatch) {
|
|
1649
1641
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1650
1642
|
flags = flagMatch[3];
|
|
1651
1643
|
}
|
|
1652
|
-
|
|
1644
|
+
const regexp = new RegExp(pattern, flags);
|
|
1653
1645
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1654
|
-
|
|
1646
|
+
const $closest = $el?.closest(selector);
|
|
1655
1647
|
if ($closest) {
|
|
1656
|
-
|
|
1657
|
-
let content = $el?.textContent || $el?.innerText;
|
|
1648
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1658
1649
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1659
1650
|
return $closest;
|
|
1660
1651
|
}
|
|
@@ -1663,7 +1654,7 @@ var pops = (function () {
|
|
|
1663
1654
|
}
|
|
1664
1655
|
else {
|
|
1665
1656
|
// 普通语法
|
|
1666
|
-
|
|
1657
|
+
const $closest = $el?.closest(selector);
|
|
1667
1658
|
return $closest;
|
|
1668
1659
|
}
|
|
1669
1660
|
}
|
|
@@ -1683,13 +1674,13 @@ var pops = (function () {
|
|
|
1683
1674
|
* @param calcScroll 计算滚动距离
|
|
1684
1675
|
*/
|
|
1685
1676
|
offset(element, calcScroll = true) {
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1677
|
+
const rect = element.getBoundingClientRect();
|
|
1678
|
+
const win = element.ownerDocument.defaultView;
|
|
1679
|
+
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);
|
|
1689
1680
|
return resultRect;
|
|
1690
1681
|
}
|
|
1691
1682
|
width(element, isShow = false, parent) {
|
|
1692
|
-
|
|
1683
|
+
const DOMUtilsContext = this;
|
|
1693
1684
|
if (typeof element === "string") {
|
|
1694
1685
|
element = PopsCore.document.querySelector(element);
|
|
1695
1686
|
}
|
|
@@ -1714,11 +1705,11 @@ var pops = (function () {
|
|
|
1714
1705
|
}
|
|
1715
1706
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
1716
1707
|
if (element.offsetWidth > 0) {
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1708
|
+
const borderLeftWidth = popsDOMUtils.getStyleValue(element, "borderLeftWidth");
|
|
1709
|
+
const borderRightWidth = popsDOMUtils.getStyleValue(element, "borderRightWidth");
|
|
1710
|
+
const paddingLeft = popsDOMUtils.getStyleValue(element, "paddingLeft");
|
|
1711
|
+
const paddingRight = popsDOMUtils.getStyleValue(element, "paddingRight");
|
|
1712
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
1722
1713
|
parseFloat(borderLeftWidth.toString()) -
|
|
1723
1714
|
parseFloat(borderRightWidth.toString()) -
|
|
1724
1715
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -1730,14 +1721,14 @@ var pops = (function () {
|
|
|
1730
1721
|
else {
|
|
1731
1722
|
/* 未显示 */
|
|
1732
1723
|
element = element;
|
|
1733
|
-
|
|
1734
|
-
|
|
1724
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1725
|
+
const width = DOMUtilsContext.width(cloneNode, true, parent);
|
|
1735
1726
|
recovery();
|
|
1736
1727
|
return width;
|
|
1737
1728
|
}
|
|
1738
1729
|
}
|
|
1739
1730
|
height(element, isShow = false, parent) {
|
|
1740
|
-
|
|
1731
|
+
const DOMUtilsContext = this;
|
|
1741
1732
|
if (popsUtils.isWin(element)) {
|
|
1742
1733
|
return PopsCore.window.document.documentElement.clientHeight;
|
|
1743
1734
|
}
|
|
@@ -1762,11 +1753,11 @@ var pops = (function () {
|
|
|
1762
1753
|
}
|
|
1763
1754
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
1764
1755
|
if (element.offsetHeight > 0) {
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1756
|
+
const borderTopWidth = popsDOMUtils.getStyleValue(element, "borderTopWidth");
|
|
1757
|
+
const borderBottomWidth = popsDOMUtils.getStyleValue(element, "borderBottomWidth");
|
|
1758
|
+
const paddingTop = popsDOMUtils.getStyleValue(element, "paddingTop");
|
|
1759
|
+
const paddingBottom = popsDOMUtils.getStyleValue(element, "paddingBottom");
|
|
1760
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
1770
1761
|
parseFloat(borderTopWidth.toString()) -
|
|
1771
1762
|
parseFloat(borderBottomWidth.toString()) -
|
|
1772
1763
|
parseFloat(paddingTop.toString()) -
|
|
@@ -1778,14 +1769,14 @@ var pops = (function () {
|
|
|
1778
1769
|
else {
|
|
1779
1770
|
/* 未显示 */
|
|
1780
1771
|
element = element;
|
|
1781
|
-
|
|
1782
|
-
|
|
1772
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1773
|
+
const height = DOMUtilsContext.height(cloneNode, true, parent);
|
|
1783
1774
|
recovery();
|
|
1784
1775
|
return height;
|
|
1785
1776
|
}
|
|
1786
1777
|
}
|
|
1787
1778
|
outerWidth(element, isShow = false, parent) {
|
|
1788
|
-
|
|
1779
|
+
const DOMUtilsContext = this;
|
|
1789
1780
|
if (popsUtils.isWin(element)) {
|
|
1790
1781
|
return PopsCore.window.innerWidth;
|
|
1791
1782
|
}
|
|
@@ -1797,40 +1788,36 @@ var pops = (function () {
|
|
|
1797
1788
|
}
|
|
1798
1789
|
element = element;
|
|
1799
1790
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1791
|
+
const style = getComputedStyle(element, null);
|
|
1792
|
+
const marginLeft = popsDOMUtils.getStyleValue(style, "marginLeft");
|
|
1793
|
+
const marginRight = popsDOMUtils.getStyleValue(style, "marginRight");
|
|
1803
1794
|
return element.offsetWidth + marginLeft + marginRight;
|
|
1804
1795
|
}
|
|
1805
1796
|
else {
|
|
1806
|
-
|
|
1807
|
-
|
|
1797
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1798
|
+
const outerWidth = DOMUtilsContext.outerWidth(cloneNode, true, parent);
|
|
1808
1799
|
recovery();
|
|
1809
1800
|
return outerWidth;
|
|
1810
1801
|
}
|
|
1811
1802
|
}
|
|
1812
1803
|
outerHeight(element, isShow = false, parent) {
|
|
1813
|
-
|
|
1804
|
+
const DOMUtilsContext = this;
|
|
1814
1805
|
if (popsUtils.isWin(element)) {
|
|
1815
1806
|
return PopsCore.window.innerHeight;
|
|
1816
1807
|
}
|
|
1817
1808
|
if (typeof element === "string") {
|
|
1818
1809
|
element = PopsCore.document.querySelector(element);
|
|
1819
1810
|
}
|
|
1820
|
-
if (element == null) {
|
|
1821
|
-
// @ts-ignore
|
|
1822
|
-
return;
|
|
1823
|
-
}
|
|
1824
1811
|
element = element;
|
|
1825
1812
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1813
|
+
const style = getComputedStyle(element, null);
|
|
1814
|
+
const marginTop = popsDOMUtils.getStyleValue(style, "marginTop");
|
|
1815
|
+
const marginBottom = popsDOMUtils.getStyleValue(style, "marginBottom");
|
|
1829
1816
|
return element.offsetHeight + marginTop + marginBottom;
|
|
1830
1817
|
}
|
|
1831
1818
|
else {
|
|
1832
|
-
|
|
1833
|
-
|
|
1819
|
+
const { cloneNode, recovery } = popsDOMUtils.showElement(element, parent);
|
|
1820
|
+
const outerHeight = DOMUtilsContext.outerHeight(cloneNode, true, parent);
|
|
1834
1821
|
recovery();
|
|
1835
1822
|
return outerHeight;
|
|
1836
1823
|
}
|
|
@@ -1893,13 +1880,11 @@ var pops = (function () {
|
|
|
1893
1880
|
* 把纯数字没有px的加上
|
|
1894
1881
|
*/
|
|
1895
1882
|
function handlePixe(propertyName, propertyValue) {
|
|
1896
|
-
|
|
1883
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1897
1884
|
if (typeof propertyValue === "number") {
|
|
1898
1885
|
propertyValue = propertyValue.toString();
|
|
1899
1886
|
}
|
|
1900
|
-
if (typeof propertyValue === "string" &&
|
|
1901
|
-
allowAddPixe.includes(propertyName) &&
|
|
1902
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1887
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1903
1888
|
propertyValue = propertyValue + "px";
|
|
1904
1889
|
}
|
|
1905
1890
|
return propertyValue;
|
|
@@ -1910,7 +1895,7 @@ var pops = (function () {
|
|
|
1910
1895
|
if (element == null) {
|
|
1911
1896
|
return;
|
|
1912
1897
|
}
|
|
1913
|
-
|
|
1898
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1914
1899
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1915
1900
|
propertyValue = propertyValue
|
|
1916
1901
|
.trim()
|
|
@@ -1932,8 +1917,8 @@ var pops = (function () {
|
|
|
1932
1917
|
}
|
|
1933
1918
|
}
|
|
1934
1919
|
else if (typeof property === "object") {
|
|
1935
|
-
for (
|
|
1936
|
-
|
|
1920
|
+
for (const prop in property) {
|
|
1921
|
+
const value = property[prop];
|
|
1937
1922
|
setStyleProperty(prop, value);
|
|
1938
1923
|
}
|
|
1939
1924
|
}
|
|
@@ -1963,7 +1948,7 @@ var pops = (function () {
|
|
|
1963
1948
|
property,
|
|
1964
1949
|
/** 自定义属性 */
|
|
1965
1950
|
attributes) {
|
|
1966
|
-
|
|
1951
|
+
const tempElement = PopsCore.document.createElement(tagName);
|
|
1967
1952
|
if (typeof property === "string") {
|
|
1968
1953
|
PopsSafeUtils.setSafeHTML(tempElement, property);
|
|
1969
1954
|
return tempElement;
|
|
@@ -1975,13 +1960,12 @@ var pops = (function () {
|
|
|
1975
1960
|
attributes = {};
|
|
1976
1961
|
}
|
|
1977
1962
|
Object.keys(property).forEach((key) => {
|
|
1978
|
-
|
|
1963
|
+
const value = property[key];
|
|
1979
1964
|
if (key === "innerHTML") {
|
|
1980
1965
|
PopsSafeUtils.setSafeHTML(tempElement, value);
|
|
1981
1966
|
return;
|
|
1982
1967
|
}
|
|
1983
|
-
|
|
1984
|
-
tempElement[key] = value;
|
|
1968
|
+
Reflect.set(tempElement, key, value);
|
|
1985
1969
|
});
|
|
1986
1970
|
Object.keys(attributes).forEach((key) => {
|
|
1987
1971
|
let value = attributes[key];
|
|
@@ -2005,7 +1989,7 @@ var pops = (function () {
|
|
|
2005
1989
|
parseTextToDOM(elementString) {
|
|
2006
1990
|
/* 去除前后的换行和空格 */
|
|
2007
1991
|
elementString = elementString.replace(/^[\n|\s]*/g, "").replace(/[\n|\s]*$/g, "");
|
|
2008
|
-
|
|
1992
|
+
const targetElement = this.createElement("div", {
|
|
2009
1993
|
innerHTML: elementString,
|
|
2010
1994
|
});
|
|
2011
1995
|
return targetElement.firstChild;
|
|
@@ -2043,16 +2027,21 @@ var pops = (function () {
|
|
|
2043
2027
|
selectionEnd = Math.min(input.value.length, selectionEnd);
|
|
2044
2028
|
// If available (thus IE), use the createTextRange method
|
|
2045
2029
|
if (typeof input.createTextRange == "function") {
|
|
2046
|
-
|
|
2030
|
+
const range = input.createTextRange();
|
|
2047
2031
|
range.collapse(true);
|
|
2048
2032
|
range.moveStart("character", selectionStart);
|
|
2049
2033
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
2050
2034
|
return range.getBoundingClientRect();
|
|
2051
2035
|
}
|
|
2052
2036
|
// createTextRange is not supported, create a fake text range
|
|
2053
|
-
|
|
2037
|
+
const offset = getInputOffset();
|
|
2038
|
+
let topPos = offset.top;
|
|
2039
|
+
let leftPos = offset.left;
|
|
2040
|
+
const width = getInputCSS("width", true);
|
|
2041
|
+
const height = getInputCSS("height", true);
|
|
2054
2042
|
// Styles to simulate a node in an input field
|
|
2055
|
-
|
|
2043
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
2044
|
+
const listOfModifiers = [
|
|
2056
2045
|
"direction",
|
|
2057
2046
|
"font-family",
|
|
2058
2047
|
"font-size",
|
|
@@ -2068,26 +2057,21 @@ var pops = (function () {
|
|
|
2068
2057
|
"word-wrap",
|
|
2069
2058
|
"word-spacing",
|
|
2070
2059
|
];
|
|
2071
|
-
// @ts-ignore
|
|
2072
2060
|
topPos += getInputCSS("padding-top", true);
|
|
2073
|
-
// @ts-ignore
|
|
2074
2061
|
topPos += getInputCSS("border-top-width", true);
|
|
2075
|
-
// @ts-ignore
|
|
2076
2062
|
leftPos += getInputCSS("padding-left", true);
|
|
2077
|
-
// @ts-ignore
|
|
2078
2063
|
leftPos += getInputCSS("border-left-width", true);
|
|
2079
2064
|
leftPos += 1; //Seems to be necessary
|
|
2080
|
-
for (
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
2065
|
+
for (let i = 0; i < listOfModifiers.length; i++) {
|
|
2066
|
+
const property = listOfModifiers[i];
|
|
2067
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
2084
2068
|
}
|
|
2085
2069
|
// End of CSS variable checks
|
|
2086
2070
|
// 不能为空,不然获取不到高度
|
|
2087
|
-
|
|
2071
|
+
const text = input.value || "G", textLen = text.length, fakeClone = document.createElement("div");
|
|
2088
2072
|
if (selectionStart > 0)
|
|
2089
2073
|
appendPart(0, selectionStart);
|
|
2090
|
-
|
|
2074
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
2091
2075
|
if (textLen > selectionEnd)
|
|
2092
2076
|
appendPart(selectionEnd, textLen);
|
|
2093
2077
|
// Styles to inherit the font styles of the element
|
|
@@ -2099,7 +2083,7 @@ var pops = (function () {
|
|
|
2099
2083
|
fakeClone.style.width = width + "px";
|
|
2100
2084
|
fakeClone.style.height = height + "px";
|
|
2101
2085
|
PopsCore.document.body.appendChild(fakeClone);
|
|
2102
|
-
|
|
2086
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
2103
2087
|
if (!debug)
|
|
2104
2088
|
fakeClone.parentNode.removeChild(fakeClone); //Remove temp
|
|
2105
2089
|
return returnValue;
|
|
@@ -2110,7 +2094,7 @@ var pops = (function () {
|
|
|
2110
2094
|
* @param end
|
|
2111
2095
|
*/
|
|
2112
2096
|
function appendPart(start, end) {
|
|
2113
|
-
|
|
2097
|
+
const span = document.createElement("span");
|
|
2114
2098
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
2115
2099
|
span.textContent = text.substring(start, end);
|
|
2116
2100
|
fakeClone.appendChild(span);
|
|
@@ -2118,35 +2102,31 @@ var pops = (function () {
|
|
|
2118
2102
|
}
|
|
2119
2103
|
// Computing offset position
|
|
2120
2104
|
function getInputOffset() {
|
|
2121
|
-
|
|
2105
|
+
const body = document.body, win = document.defaultView, docElem = document.documentElement, box = document.createElement("div");
|
|
2122
2106
|
box.style.paddingLeft = box.style.width = "1px";
|
|
2123
2107
|
body.appendChild(box);
|
|
2124
|
-
|
|
2108
|
+
const isBoxModel = box.offsetWidth == 2;
|
|
2125
2109
|
body.removeChild(box);
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop =
|
|
2129
|
-
// @ts-ignore
|
|
2130
|
-
win.pageYOffset || (isBoxModel && docElem.scrollTop) || body.scrollTop, scrollLeft =
|
|
2131
|
-
// @ts-ignore
|
|
2132
|
-
win.pageXOffset || (isBoxModel && docElem.scrollLeft) || body.scrollLeft;
|
|
2110
|
+
const boxRect = input.getBoundingClientRect();
|
|
2111
|
+
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;
|
|
2133
2112
|
return {
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
// @ts-ignore
|
|
2137
|
-
left: box.left + scrollLeft - clientLeft,
|
|
2113
|
+
top: boxRect.top + scrollTop - clientTop,
|
|
2114
|
+
left: boxRect.left + scrollLeft - clientLeft,
|
|
2138
2115
|
};
|
|
2139
2116
|
}
|
|
2140
2117
|
/**
|
|
2141
2118
|
*
|
|
2142
2119
|
* @param prop
|
|
2143
2120
|
* @param isnumber
|
|
2144
|
-
* @returns
|
|
2145
2121
|
*/
|
|
2146
2122
|
function getInputCSS(prop, isnumber) {
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2123
|
+
const val = PopsCore.document.defaultView.getComputedStyle(input, null).getPropertyValue(prop);
|
|
2124
|
+
if (isnumber) {
|
|
2125
|
+
return parseFloat(val);
|
|
2126
|
+
}
|
|
2127
|
+
else {
|
|
2128
|
+
return val;
|
|
2129
|
+
}
|
|
2150
2130
|
}
|
|
2151
2131
|
}
|
|
2152
2132
|
/**
|
|
@@ -2178,7 +2158,7 @@ var pops = (function () {
|
|
|
2178
2158
|
}
|
|
2179
2159
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2180
2160
|
function parseHTMLByDOMParser() {
|
|
2181
|
-
|
|
2161
|
+
const parser = new DOMParser();
|
|
2182
2162
|
if (isComplete) {
|
|
2183
2163
|
return parser.parseFromString(html, "text/html");
|
|
2184
2164
|
}
|
|
@@ -2187,7 +2167,7 @@ var pops = (function () {
|
|
|
2187
2167
|
}
|
|
2188
2168
|
}
|
|
2189
2169
|
function parseHTMLByCreateDom() {
|
|
2190
|
-
|
|
2170
|
+
const tempDIV = PopsCore.document.createElement("div");
|
|
2191
2171
|
PopsSafeUtils.setSafeHTML(tempDIV, html);
|
|
2192
2172
|
if (isComplete) {
|
|
2193
2173
|
return tempDIV;
|
|
@@ -2229,7 +2209,7 @@ var pops = (function () {
|
|
|
2229
2209
|
}
|
|
2230
2210
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2231
2211
|
/* 数组 */
|
|
2232
|
-
|
|
2212
|
+
const fragment = PopsCore.document.createDocumentFragment();
|
|
2233
2213
|
content.forEach((ele) => {
|
|
2234
2214
|
if (typeof ele === "string") {
|
|
2235
2215
|
ele = this.parseHTML(ele, true, false);
|
|
@@ -2279,11 +2259,11 @@ var pops = (function () {
|
|
|
2279
2259
|
*/
|
|
2280
2260
|
showElement($ele, ownParent) {
|
|
2281
2261
|
/** 克隆元素 */
|
|
2282
|
-
|
|
2262
|
+
const $cloneNode = $ele.cloneNode(true);
|
|
2283
2263
|
$cloneNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
2284
2264
|
let $parent = PopsCore.document.documentElement;
|
|
2285
2265
|
// 这里需要的是先获取元素的父节点,把元素同样添加到父节点中
|
|
2286
|
-
|
|
2266
|
+
const $root = $ele.getRootNode();
|
|
2287
2267
|
if (ownParent == null) {
|
|
2288
2268
|
if ($root == $ele) {
|
|
2289
2269
|
// 未添加到任意节点中,那么直接添加到页面中去
|
|
@@ -2331,7 +2311,7 @@ var pops = (function () {
|
|
|
2331
2311
|
}
|
|
2332
2312
|
styles = view.getComputedStyle(element);
|
|
2333
2313
|
}
|
|
2334
|
-
|
|
2314
|
+
const value = parseFloat(styles[styleName]);
|
|
2335
2315
|
if (isNaN(value)) {
|
|
2336
2316
|
return 0;
|
|
2337
2317
|
}
|
|
@@ -2391,10 +2371,9 @@ var pops = (function () {
|
|
|
2391
2371
|
* @returns
|
|
2392
2372
|
*/
|
|
2393
2373
|
getKeyFrames(sheet) {
|
|
2394
|
-
|
|
2374
|
+
const result = {};
|
|
2395
2375
|
Object.keys(sheet.cssRules).forEach((key) => {
|
|
2396
|
-
if (sheet.cssRules[key].type === 7 &&
|
|
2397
|
-
sheet.cssRules[key].name.startsWith("pops-anim-")) {
|
|
2376
|
+
if (sheet.cssRules[key].type === 7 && sheet.cssRules[key].name.startsWith("pops-anim-")) {
|
|
2398
2377
|
result[sheet.cssRules[key].name] = sheet.cssRules[key];
|
|
2399
2378
|
}
|
|
2400
2379
|
});
|
|
@@ -2418,7 +2397,7 @@ var pops = (function () {
|
|
|
2418
2397
|
*/
|
|
2419
2398
|
str) => {
|
|
2420
2399
|
let hexs = "";
|
|
2421
|
-
|
|
2400
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2422
2401
|
if (!reg.test(str)) {
|
|
2423
2402
|
console.warn("输入错误的hex");
|
|
2424
2403
|
return "";
|
|
@@ -2445,12 +2424,12 @@ var pops = (function () {
|
|
|
2445
2424
|
* 蓝色
|
|
2446
2425
|
*/
|
|
2447
2426
|
b) => {
|
|
2448
|
-
|
|
2427
|
+
const reg = /^\d{1,3}$/;
|
|
2449
2428
|
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
|
|
2450
2429
|
console.warn("输入错误的rgb颜色值");
|
|
2451
2430
|
return "";
|
|
2452
2431
|
}
|
|
2453
|
-
|
|
2432
|
+
const hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
|
2454
2433
|
for (let i = 0; i < 3; i++)
|
|
2455
2434
|
if (hexs[i].length == 1)
|
|
2456
2435
|
hexs[i] = `0${hexs[i]}`;
|
|
@@ -2468,12 +2447,12 @@ var pops = (function () {
|
|
|
2468
2447
|
* 加深的程度,限0-1之间
|
|
2469
2448
|
*/
|
|
2470
2449
|
level) => {
|
|
2471
|
-
|
|
2450
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2472
2451
|
if (!reg.test(color)) {
|
|
2473
2452
|
console.warn("输入错误的hex颜色值");
|
|
2474
2453
|
return "";
|
|
2475
2454
|
}
|
|
2476
|
-
|
|
2455
|
+
const rgb = useChangeColor().hexToRgb(color);
|
|
2477
2456
|
for (let i = 0; i < 3; i++)
|
|
2478
2457
|
rgb[i] = Math.floor(rgb[i] * (1 - level));
|
|
2479
2458
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
@@ -2490,12 +2469,12 @@ var pops = (function () {
|
|
|
2490
2469
|
* 加深的程度,限0-1之间
|
|
2491
2470
|
*/
|
|
2492
2471
|
level) => {
|
|
2493
|
-
|
|
2472
|
+
const reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
|
|
2494
2473
|
if (!reg.test(color)) {
|
|
2495
2474
|
console.warn("输入错误的hex颜色值");
|
|
2496
2475
|
return "";
|
|
2497
2476
|
}
|
|
2498
|
-
|
|
2477
|
+
const rgb = useChangeColor().hexToRgb(color);
|
|
2499
2478
|
for (let i = 0; i < 3; i++)
|
|
2500
2479
|
rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
|
2501
2480
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
@@ -2516,9 +2495,11 @@ var pops = (function () {
|
|
|
2516
2495
|
getTransform(element) {
|
|
2517
2496
|
let transform_left = 0;
|
|
2518
2497
|
let transform_top = 0;
|
|
2519
|
-
|
|
2498
|
+
const elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
|
|
2520
2499
|
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
|
|
2521
|
-
|
|
2500
|
+
const elementTransformMatch = elementTransform.match(/\((.+)\)/);
|
|
2501
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
2502
|
+
const elementTransformSplit = elementTransformMatch?.[1]?.split?.(",");
|
|
2522
2503
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
2523
2504
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
2524
2505
|
}
|
|
@@ -2532,15 +2513,15 @@ var pops = (function () {
|
|
|
2532
2513
|
*/
|
|
2533
2514
|
onInput($el, callback, option) {
|
|
2534
2515
|
let isComposite = false;
|
|
2535
|
-
|
|
2516
|
+
const __callback = async (event) => {
|
|
2536
2517
|
if (isComposite)
|
|
2537
2518
|
return;
|
|
2538
2519
|
await callback(event);
|
|
2539
2520
|
};
|
|
2540
|
-
|
|
2521
|
+
const __composition_start_callback = () => {
|
|
2541
2522
|
isComposite = true;
|
|
2542
2523
|
};
|
|
2543
|
-
|
|
2524
|
+
const __composition_end_callback = () => {
|
|
2544
2525
|
isComposite = false;
|
|
2545
2526
|
this.trigger($el, "input", {
|
|
2546
2527
|
isComposite,
|
|
@@ -2584,10 +2565,10 @@ var pops = (function () {
|
|
|
2584
2565
|
* @param zIndex
|
|
2585
2566
|
*/
|
|
2586
2567
|
createAnim(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
|
|
2587
|
-
|
|
2568
|
+
const __config = config;
|
|
2588
2569
|
let popsAnimStyle = "";
|
|
2589
2570
|
let popsStyle = "";
|
|
2590
|
-
|
|
2571
|
+
const popsPosition = __config.position || "";
|
|
2591
2572
|
if (config.zIndex != null) {
|
|
2592
2573
|
popsAnimStyle += `z-index: ${zIndex};`;
|
|
2593
2574
|
popsStyle += `z-index: ${zIndex};`;
|
|
@@ -2598,7 +2579,7 @@ var pops = (function () {
|
|
|
2598
2579
|
if (__config.height != null) {
|
|
2599
2580
|
popsStyle += `height: ${__config.height};`;
|
|
2600
2581
|
}
|
|
2601
|
-
|
|
2582
|
+
const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
|
|
2602
2583
|
return /*html*/ `
|
|
2603
2584
|
<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
|
|
2604
2585
|
<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
|
|
@@ -2613,14 +2594,14 @@ var pops = (function () {
|
|
|
2613
2594
|
if (!config.btn) {
|
|
2614
2595
|
return "";
|
|
2615
2596
|
}
|
|
2616
|
-
|
|
2597
|
+
const confirm_config = config;
|
|
2617
2598
|
if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
|
|
2618
2599
|
return "";
|
|
2619
2600
|
}
|
|
2620
2601
|
let resultHTML = "";
|
|
2621
2602
|
// let btnStyle = "";
|
|
2622
2603
|
let closeHTML = "";
|
|
2623
|
-
|
|
2604
|
+
const iframe_config = config;
|
|
2624
2605
|
if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
|
|
2625
2606
|
/* iframe的 */
|
|
2626
2607
|
let topRightButtonHTML = "";
|
|
@@ -2670,7 +2651,7 @@ var pops = (function () {
|
|
|
2670
2651
|
// 未设置btn参数
|
|
2671
2652
|
return "";
|
|
2672
2653
|
}
|
|
2673
|
-
|
|
2654
|
+
const confirm_config = config;
|
|
2674
2655
|
if (!(config.btn?.ok?.enable || confirm_config.btn?.cancel?.enable || confirm_config.btn?.other?.enable)) {
|
|
2675
2656
|
// 确定、取消、其它按钮都未启用直接返回
|
|
2676
2657
|
return "";
|
|
@@ -2696,7 +2677,7 @@ var pops = (function () {
|
|
|
2696
2677
|
okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
|
|
2697
2678
|
}
|
|
2698
2679
|
let okIconHTML = "";
|
|
2699
|
-
|
|
2680
|
+
const okIcon = confirm_config.btn.ok.icon;
|
|
2700
2681
|
if (okIcon !== "") {
|
|
2701
2682
|
// 判断图标是否是svg库内的
|
|
2702
2683
|
let iconHTML = "";
|
|
@@ -2729,7 +2710,7 @@ var pops = (function () {
|
|
|
2729
2710
|
cancelButtonSizeClassName = "pops-button-" + confirm_config.btn.cancel.size;
|
|
2730
2711
|
}
|
|
2731
2712
|
let cancelIconHTML = "";
|
|
2732
|
-
|
|
2713
|
+
const cancelIcon = confirm_config.btn.cancel.icon;
|
|
2733
2714
|
if (cancelIcon !== "") {
|
|
2734
2715
|
let iconHTML = "";
|
|
2735
2716
|
// 判断图标是否是svg库内的
|
|
@@ -2762,7 +2743,7 @@ var pops = (function () {
|
|
|
2762
2743
|
otherButtonSizeClassName = "pops-button-" + confirm_config.btn.other.size;
|
|
2763
2744
|
}
|
|
2764
2745
|
let otherIconHTML = "";
|
|
2765
|
-
|
|
2746
|
+
const otherIcon = confirm_config.btn.other.icon;
|
|
2766
2747
|
if (otherIcon !== "") {
|
|
2767
2748
|
let iconHTML = "";
|
|
2768
2749
|
// 判断图标是否是svg库内的
|
|
@@ -2822,37 +2803,37 @@ var pops = (function () {
|
|
|
2822
2803
|
},
|
|
2823
2804
|
};
|
|
2824
2805
|
|
|
2825
|
-
var indexCSS = "@charset \"utf-8\";\n.pops * {\n
|
|
2806
|
+
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";
|
|
2826
2807
|
|
|
2827
|
-
var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n
|
|
2808
|
+
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";
|
|
2828
2809
|
|
|
2829
|
-
var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n
|
|
2810
|
+
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";
|
|
2830
2811
|
|
|
2831
|
-
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";
|
|
2812
|
+
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";
|
|
2832
2813
|
|
|
2833
|
-
var commonCSS = ".pops-flex-items-center {\n
|
|
2814
|
+
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";
|
|
2834
2815
|
|
|
2835
|
-
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";
|
|
2816
|
+
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";
|
|
2836
2817
|
|
|
2837
2818
|
var alertCSS = "";
|
|
2838
2819
|
|
|
2839
2820
|
var confirmCSS = "";
|
|
2840
2821
|
|
|
2841
|
-
var promptCSS = ".pops[type-value=\"prompt\"] {\n
|
|
2822
|
+
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";
|
|
2842
2823
|
|
|
2843
|
-
var loadingCSS = ".pops[type-value=\"loading\"] {\n
|
|
2824
|
+
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";
|
|
2844
2825
|
|
|
2845
|
-
var iframeCSS = ".pops[type-value=\"iframe\"] {\n
|
|
2826
|
+
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";
|
|
2846
2827
|
|
|
2847
|
-
var tooltipCSS = ".pops-tip {\n
|
|
2828
|
+
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";
|
|
2848
2829
|
|
|
2849
|
-
var drawerCSS = ".pops[type-value=\"drawer\"] {\n
|
|
2830
|
+
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";
|
|
2850
2831
|
|
|
2851
|
-
var folderCSS = ".pops-folder-list {\n
|
|
2832
|
+
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";
|
|
2852
2833
|
|
|
2853
|
-
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";
|
|
2834
|
+
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";
|
|
2854
2835
|
|
|
2855
|
-
var rightClickMenuCSS = ".pops-rightClickMenu {\n
|
|
2836
|
+
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";
|
|
2856
2837
|
|
|
2857
2838
|
const PopsCSS = {
|
|
2858
2839
|
/** 主CSS */
|
|
@@ -2899,7 +2880,7 @@ var pops = (function () {
|
|
|
2899
2880
|
if (!this.$flag.isInit) {
|
|
2900
2881
|
this.$flag.isInit = true;
|
|
2901
2882
|
/* 处理获取当前所有的动画名 */
|
|
2902
|
-
|
|
2883
|
+
const animationStyle = document.createElement("style");
|
|
2903
2884
|
PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
|
|
2904
2885
|
popsDOMUtils.appendHead(animationStyle);
|
|
2905
2886
|
this.$data = null;
|
|
@@ -2913,7 +2894,7 @@ var pops = (function () {
|
|
|
2913
2894
|
* 判断是否存在某个动画名
|
|
2914
2895
|
*/
|
|
2915
2896
|
hasAnim(name) {
|
|
2916
|
-
return this.$data
|
|
2897
|
+
return Object.prototype.hasOwnProperty.call(this.$data, name);
|
|
2917
2898
|
},
|
|
2918
2899
|
};
|
|
2919
2900
|
|
|
@@ -2956,7 +2937,6 @@ var pops = (function () {
|
|
|
2956
2937
|
// 当前页面最大的z-index
|
|
2957
2938
|
let zIndex = 0;
|
|
2958
2939
|
// 当前的最大z-index的元素,调试使用
|
|
2959
|
-
// @ts-ignore
|
|
2960
2940
|
let maxZIndexNode = null;
|
|
2961
2941
|
/**
|
|
2962
2942
|
* 元素是否可见
|
|
@@ -2972,7 +2952,7 @@ var pops = (function () {
|
|
|
2972
2952
|
*/
|
|
2973
2953
|
function queryMaxZIndex($ele) {
|
|
2974
2954
|
if (typeof ignoreCallBack === "function") {
|
|
2975
|
-
|
|
2955
|
+
const ignoreResult = ignoreCallBack($ele);
|
|
2976
2956
|
if (typeof ignoreResult === "boolean" && !ignoreResult) {
|
|
2977
2957
|
return;
|
|
2978
2958
|
}
|
|
@@ -2981,7 +2961,7 @@ var pops = (function () {
|
|
|
2981
2961
|
const nodeStyle = PopsCore.window.getComputedStyle($ele);
|
|
2982
2962
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
2983
2963
|
if (isVisibleNode(nodeStyle)) {
|
|
2984
|
-
|
|
2964
|
+
const nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
2985
2965
|
if (!isNaN(nodeZIndex)) {
|
|
2986
2966
|
if (nodeZIndex > zIndex) {
|
|
2987
2967
|
// 赋值到全局
|
|
@@ -2997,7 +2977,7 @@ var pops = (function () {
|
|
|
2997
2977
|
}
|
|
2998
2978
|
}
|
|
2999
2979
|
}
|
|
3000
|
-
target.querySelectorAll("*").forEach(($ele
|
|
2980
|
+
target.querySelectorAll("*").forEach(($ele) => {
|
|
3001
2981
|
queryMaxZIndex($ele);
|
|
3002
2982
|
});
|
|
3003
2983
|
zIndex += deviation;
|
|
@@ -3032,13 +3012,13 @@ var pops = (function () {
|
|
|
3032
3012
|
return $css.position !== "static" && $css.display !== "none";
|
|
3033
3013
|
}
|
|
3034
3014
|
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3035
|
-
|
|
3015
|
+
const instData = PopsInstData[instKeyName];
|
|
3036
3016
|
for (let index = 0; index < instData.length; index++) {
|
|
3037
3017
|
const inst = instData[index];
|
|
3038
|
-
|
|
3018
|
+
const nodeStyle = window.getComputedStyle(inst.animElement);
|
|
3039
3019
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
3040
3020
|
if (isVisibleNode(nodeStyle)) {
|
|
3041
|
-
|
|
3021
|
+
const nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
3042
3022
|
if (!isNaN(nodeZIndex)) {
|
|
3043
3023
|
if (nodeZIndex > zIndex) {
|
|
3044
3024
|
zIndex = nodeZIndex;
|
|
@@ -3049,7 +3029,7 @@ var pops = (function () {
|
|
|
3049
3029
|
}
|
|
3050
3030
|
});
|
|
3051
3031
|
zIndex += deviation;
|
|
3052
|
-
|
|
3032
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3053
3033
|
if (isOverMaxZIndex) {
|
|
3054
3034
|
// 超出z-index最大值
|
|
3055
3035
|
zIndex = maxZIndex;
|
|
@@ -3094,9 +3074,9 @@ var pops = (function () {
|
|
|
3094
3074
|
// 移除全部或者guid相同
|
|
3095
3075
|
if (isAll || instConfigItem["guid"] === guid) {
|
|
3096
3076
|
// 判断是否有动画
|
|
3097
|
-
|
|
3077
|
+
const animName = instConfigItem.animElement.getAttribute("anim");
|
|
3098
3078
|
if (PopsAnimation.hasAnim(animName)) {
|
|
3099
|
-
|
|
3079
|
+
const reverseAnimName = animName + "-reverse";
|
|
3100
3080
|
instConfigItem.animElement.style.width = "100%";
|
|
3101
3081
|
instConfigItem.animElement.style.height = "100%";
|
|
3102
3082
|
instConfigItem.animElement.style["animation-name"] = reverseAnimName;
|
|
@@ -3131,9 +3111,9 @@ var pops = (function () {
|
|
|
3131
3111
|
*/
|
|
3132
3112
|
hide(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
3133
3113
|
return new Promise((resolve) => {
|
|
3134
|
-
|
|
3114
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3135
3115
|
if (popsType === "drawer") {
|
|
3136
|
-
|
|
3116
|
+
const drawerConfig = config;
|
|
3137
3117
|
popsUtils.setTimeout(() => {
|
|
3138
3118
|
maskElement.style.setProperty("display", "none");
|
|
3139
3119
|
if (["top", "bottom"].includes(drawerConfig.direction)) {
|
|
@@ -3149,18 +3129,14 @@ var pops = (function () {
|
|
|
3149
3129
|
}, drawerConfig.closeDelay);
|
|
3150
3130
|
}
|
|
3151
3131
|
else {
|
|
3152
|
-
|
|
3132
|
+
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3153
3133
|
if (fintInst) {
|
|
3154
3134
|
/* 存在动画 */
|
|
3155
|
-
|
|
3135
|
+
const instConfigItem = fintInst;
|
|
3156
3136
|
instConfigItem.animElement.style.width = "100%";
|
|
3157
3137
|
instConfigItem.animElement.style.height = "100%";
|
|
3158
|
-
|
|
3159
|
-
instConfigItem.animElement.style
|
|
3160
|
-
instConfigItem.animElement.getAttribute("anim") + "-reverse";
|
|
3161
|
-
if (PopsAnimation.hasAnim(
|
|
3162
|
-
// @ts-ignore
|
|
3163
|
-
instConfigItem.animElement.style["animation-name"])) {
|
|
3138
|
+
Reflect.set(instConfigItem.animElement.style, "animation-name", instConfigItem.animElement.getAttribute("anim") + "-reverse");
|
|
3139
|
+
if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.animElement.style, "animation-name"))) {
|
|
3164
3140
|
/**
|
|
3165
3141
|
* 动画结束的回调
|
|
3166
3142
|
*/
|
|
@@ -3200,13 +3176,13 @@ var pops = (function () {
|
|
|
3200
3176
|
*/
|
|
3201
3177
|
show(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
3202
3178
|
return new Promise((resolve) => {
|
|
3203
|
-
|
|
3179
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3204
3180
|
if (popsType === "drawer") {
|
|
3205
|
-
|
|
3181
|
+
const drawerConfig = config;
|
|
3206
3182
|
popsUtils.setTimeout(() => {
|
|
3207
3183
|
popsDOMUtils.css(maskElement, "display", "");
|
|
3208
|
-
|
|
3209
|
-
|
|
3184
|
+
const direction = drawerConfig.direction;
|
|
3185
|
+
const size = drawerConfig.size.toString();
|
|
3210
3186
|
if (["top", "bottom"].includes(direction)) {
|
|
3211
3187
|
popsElement.style.setProperty("height", size);
|
|
3212
3188
|
}
|
|
@@ -3220,18 +3196,13 @@ var pops = (function () {
|
|
|
3220
3196
|
}, drawerConfig.openDelay ?? 0);
|
|
3221
3197
|
}
|
|
3222
3198
|
else {
|
|
3223
|
-
|
|
3199
|
+
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3224
3200
|
if (fintInst) {
|
|
3225
|
-
|
|
3201
|
+
const instConfigItem = fintInst;
|
|
3226
3202
|
instConfigItem.animElement.style.width = "";
|
|
3227
3203
|
instConfigItem.animElement.style.height = "";
|
|
3228
|
-
|
|
3229
|
-
instConfigItem.animElement.style
|
|
3230
|
-
.animElement.getAttribute("anim")
|
|
3231
|
-
.replace("-reverse", "");
|
|
3232
|
-
if (PopsAnimation.hasAnim(
|
|
3233
|
-
// @ts-ignore
|
|
3234
|
-
instConfigItem.animElement.style["animation-name"])) {
|
|
3204
|
+
Reflect.set(instConfigItem.animElement.style, "animation-name", instConfigItem.animElement.getAttribute("anim").replace("-reverse", ""));
|
|
3205
|
+
if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.animElement.style, "animation-name"))) {
|
|
3235
3206
|
/**
|
|
3236
3207
|
* 动画结束的回调
|
|
3237
3208
|
*/
|
|
@@ -3270,8 +3241,8 @@ var pops = (function () {
|
|
|
3270
3241
|
*/
|
|
3271
3242
|
close(popsType, instConfigList, guid, config, animElement) {
|
|
3272
3243
|
return new Promise((resolve) => {
|
|
3273
|
-
|
|
3274
|
-
|
|
3244
|
+
const popsElement = animElement.querySelector(".pops[type-value]");
|
|
3245
|
+
const drawerConfig = config;
|
|
3275
3246
|
/**
|
|
3276
3247
|
* 动画结束事件
|
|
3277
3248
|
*/
|
|
@@ -3289,7 +3260,7 @@ var pops = (function () {
|
|
|
3289
3260
|
}
|
|
3290
3261
|
/* 监听过渡结束 */
|
|
3291
3262
|
popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
|
|
3292
|
-
|
|
3263
|
+
const popsTransForm = getComputedStyle(popsElement).transform;
|
|
3293
3264
|
if (popsTransForm !== "none") {
|
|
3294
3265
|
popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
|
|
3295
3266
|
return;
|
|
@@ -3341,8 +3312,8 @@ var pops = (function () {
|
|
|
3341
3312
|
let clickElementLeftOffset = 0;
|
|
3342
3313
|
/* 点击元素,top偏移 */
|
|
3343
3314
|
let clickElementTopOffset = 0;
|
|
3344
|
-
|
|
3345
|
-
|
|
3315
|
+
const AnyTouch = popsUtils.AnyTouch();
|
|
3316
|
+
const anyTouchElement = new AnyTouch(options.dragElement, {
|
|
3346
3317
|
preventDefault(event) {
|
|
3347
3318
|
if (typeof options.preventEvent === "function") {
|
|
3348
3319
|
return options.preventEvent(event);
|
|
@@ -3360,7 +3331,7 @@ var pops = (function () {
|
|
|
3360
3331
|
* 修改移动的元素的style
|
|
3361
3332
|
*/
|
|
3362
3333
|
function changeMoveElementStyle(element) {
|
|
3363
|
-
|
|
3334
|
+
const old_transitionDuration = element.style.transitionDuration;
|
|
3364
3335
|
if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
|
|
3365
3336
|
element.style.transitionDuration = "0s";
|
|
3366
3337
|
}
|
|
@@ -3390,7 +3361,7 @@ var pops = (function () {
|
|
|
3390
3361
|
};
|
|
3391
3362
|
}
|
|
3392
3363
|
else {
|
|
3393
|
-
|
|
3364
|
+
const rect = container.getBoundingClientRect();
|
|
3394
3365
|
return {
|
|
3395
3366
|
left: rect.left,
|
|
3396
3367
|
top: rect.top,
|
|
@@ -3403,7 +3374,7 @@ var pops = (function () {
|
|
|
3403
3374
|
anyTouchElement.on("pan", function (event) {
|
|
3404
3375
|
if (!isMove) {
|
|
3405
3376
|
isMove = true;
|
|
3406
|
-
|
|
3377
|
+
const rect = options.dragElement.getBoundingClientRect();
|
|
3407
3378
|
clickElementLeftOffset = event.x - rect.left;
|
|
3408
3379
|
clickElementTopOffset = event.y - rect.top;
|
|
3409
3380
|
transformInfo = popsDOMUtils.getTransform(moveElement);
|
|
@@ -3428,12 +3399,12 @@ var pops = (function () {
|
|
|
3428
3399
|
if (options.limit) {
|
|
3429
3400
|
/* 限制在容器内移动 */
|
|
3430
3401
|
/* left偏移最大值 */
|
|
3431
|
-
|
|
3402
|
+
const maxLeftOffset = getContainerWidthOrHeight(options.container).width -
|
|
3432
3403
|
popsDOMUtils.width(moveElement) +
|
|
3433
3404
|
transformInfo.transformLeft;
|
|
3434
|
-
|
|
3405
|
+
const { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
|
|
3435
3406
|
/* top偏移的最大值 */
|
|
3436
|
-
|
|
3407
|
+
const maxTopOffset = getContainerWidthOrHeight(options.container).height -
|
|
3437
3408
|
popsDOMUtils.height(moveElement) +
|
|
3438
3409
|
transformInfo.transformTop;
|
|
3439
3410
|
if (currentMoveLeftOffset > maxLeftOffset) {
|
|
@@ -3444,8 +3415,7 @@ var pops = (function () {
|
|
|
3444
3415
|
/* 不允许超过容器的最大高度 */
|
|
3445
3416
|
currentMoveTopOffset = maxTopOffset;
|
|
3446
3417
|
}
|
|
3447
|
-
if (currentMoveLeftOffset - options.extraDistance * 2 <
|
|
3448
|
-
minLeftOffset + transformInfo.transformLeft) {
|
|
3418
|
+
if (currentMoveLeftOffset - options.extraDistance * 2 < minLeftOffset + transformInfo.transformLeft) {
|
|
3449
3419
|
/* 不允许left偏移小于容器最小值 */
|
|
3450
3420
|
currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
|
|
3451
3421
|
/* 最左边 +额外距离 */
|
|
@@ -3509,8 +3479,8 @@ var pops = (function () {
|
|
|
3509
3479
|
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3510
3480
|
}
|
|
3511
3481
|
return function (after_obj, before_obj) {
|
|
3512
|
-
|
|
3513
|
-
|
|
3482
|
+
const beforeValue = getBeforeValueFun(before_obj); /* 前 */
|
|
3483
|
+
const afterValue = getAfterValueFun(after_obj); /* 后 */
|
|
3514
3484
|
if (sortByDesc) {
|
|
3515
3485
|
if (afterValue > beforeValue) {
|
|
3516
3486
|
return -1;
|
|
@@ -3542,10 +3512,10 @@ var pops = (function () {
|
|
|
3542
3512
|
* 创建shadow
|
|
3543
3513
|
*/
|
|
3544
3514
|
handlerShadow(config) {
|
|
3545
|
-
|
|
3515
|
+
const $shadowContainer = document.createElement("div");
|
|
3546
3516
|
$shadowContainer.className = "pops-shadow-container";
|
|
3547
3517
|
if (config.useShadowRoot) {
|
|
3548
|
-
|
|
3518
|
+
const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
|
|
3549
3519
|
return {
|
|
3550
3520
|
$shadowContainer,
|
|
3551
3521
|
$shadowRoot,
|
|
@@ -3597,7 +3567,7 @@ var pops = (function () {
|
|
|
3597
3567
|
});
|
|
3598
3568
|
}
|
|
3599
3569
|
for (const cssItem of css) {
|
|
3600
|
-
|
|
3570
|
+
const $css = popsDOMUtils.createElement("style", {}, {
|
|
3601
3571
|
"data-type": "PopsHandler.handleInit",
|
|
3602
3572
|
});
|
|
3603
3573
|
$css.textContent = cssItem.css;
|
|
@@ -3614,7 +3584,7 @@ var pops = (function () {
|
|
|
3614
3584
|
* @param details 传递的配置
|
|
3615
3585
|
*/
|
|
3616
3586
|
handleMask(details = {}) {
|
|
3617
|
-
|
|
3587
|
+
const result = {
|
|
3618
3588
|
maskElement: popsDOMUtils.parseTextToDOM(details.maskHTML),
|
|
3619
3589
|
};
|
|
3620
3590
|
let isMaskClick = false;
|
|
@@ -3625,7 +3595,7 @@ var pops = (function () {
|
|
|
3625
3595
|
function clickEvent(event) {
|
|
3626
3596
|
popsDOMUtils.preventEvent(event);
|
|
3627
3597
|
// 获取该类型实例存储列表
|
|
3628
|
-
|
|
3598
|
+
const targetInst = PopsInstData[details.type];
|
|
3629
3599
|
function originalRun() {
|
|
3630
3600
|
if (details.config.mask.clickEvent.toClose) {
|
|
3631
3601
|
/* 关闭 */
|
|
@@ -3659,12 +3629,12 @@ var pops = (function () {
|
|
|
3659
3629
|
}
|
|
3660
3630
|
/* 判断按下的元素是否是pops-anim */
|
|
3661
3631
|
popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
|
|
3662
|
-
|
|
3632
|
+
const $click = event.composedPath()[0];
|
|
3663
3633
|
isMaskClick = isAnimElement($click);
|
|
3664
3634
|
});
|
|
3665
3635
|
/* 如果有动画层,在动画层上监听点击事件 */
|
|
3666
3636
|
popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
|
|
3667
|
-
|
|
3637
|
+
const $click = event.composedPath()[0];
|
|
3668
3638
|
if (isAnimElement($click) && isMaskClick) {
|
|
3669
3639
|
return clickEvent(event);
|
|
3670
3640
|
}
|
|
@@ -3857,7 +3827,7 @@ var pops = (function () {
|
|
|
3857
3827
|
* 处理返回的配置,针对popsHandler.handleEventDetails
|
|
3858
3828
|
*/
|
|
3859
3829
|
handleResultDetails(details) {
|
|
3860
|
-
|
|
3830
|
+
const resultDetails = Object.assign({}, details);
|
|
3861
3831
|
popsUtils.delete(resultDetails, "type");
|
|
3862
3832
|
popsUtils.delete(resultDetails, "function");
|
|
3863
3833
|
return resultDetails;
|
|
@@ -3871,7 +3841,7 @@ var pops = (function () {
|
|
|
3871
3841
|
*/
|
|
3872
3842
|
handleClickEvent(type, $btn, eventDetails, callback) {
|
|
3873
3843
|
popsDOMUtils.on($btn, "click", (event) => {
|
|
3874
|
-
|
|
3844
|
+
const extraParam = {
|
|
3875
3845
|
type: type,
|
|
3876
3846
|
};
|
|
3877
3847
|
callback(Object.assign(eventDetails, extraParam), event);
|
|
@@ -3886,9 +3856,9 @@ var pops = (function () {
|
|
|
3886
3856
|
* @param callback 回调函数
|
|
3887
3857
|
*/
|
|
3888
3858
|
handleKeyboardEvent(keyName, otherKeyList = [], callback) {
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3859
|
+
const keyboardEvent = function (event) {
|
|
3860
|
+
const _keyName = event.code || event.key;
|
|
3861
|
+
const _keyValue = event.charCode || event.keyCode || event.which;
|
|
3892
3862
|
if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
|
|
3893
3863
|
return;
|
|
3894
3864
|
}
|
|
@@ -3930,7 +3900,7 @@ var pops = (function () {
|
|
|
3930
3900
|
handlePromptClickEvent(type, inputElement, $btn, eventDetails, callback) {
|
|
3931
3901
|
popsDOMUtils.on($btn, "click", (event) => {
|
|
3932
3902
|
// 额外参数
|
|
3933
|
-
|
|
3903
|
+
const extraParam = {
|
|
3934
3904
|
type: type,
|
|
3935
3905
|
text: inputElement.value,
|
|
3936
3906
|
};
|
|
@@ -3963,7 +3933,7 @@ var pops = (function () {
|
|
|
3963
3933
|
// .rightClickMenu
|
|
3964
3934
|
// 单独处理
|
|
3965
3935
|
if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
|
|
3966
|
-
|
|
3936
|
+
const inst = PopsInstData[type];
|
|
3967
3937
|
if (inst) {
|
|
3968
3938
|
PopsInstanceUtils.removeInstance([inst], "", true);
|
|
3969
3939
|
}
|
|
@@ -3983,7 +3953,7 @@ var pops = (function () {
|
|
|
3983
3953
|
else {
|
|
3984
3954
|
// 对配置进行处理
|
|
3985
3955
|
// 选择配置的z-index和已有的pops实例的最大z-index值
|
|
3986
|
-
|
|
3956
|
+
const originZIndex = config.zIndex;
|
|
3987
3957
|
config.zIndex = () => {
|
|
3988
3958
|
const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
|
|
3989
3959
|
return maxZIndex;
|
|
@@ -4103,13 +4073,13 @@ var pops = (function () {
|
|
|
4103
4073
|
},
|
|
4104
4074
|
]);
|
|
4105
4075
|
// 先把z-index提取出来
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4076
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4077
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4078
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4079
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4080
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4081
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4082
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4113
4083
|
/*html*/ `
|
|
4114
4084
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4115
4085
|
? config.title.text
|
|
@@ -4120,15 +4090,15 @@ var pops = (function () {
|
|
|
4120
4090
|
/**
|
|
4121
4091
|
* 弹窗的主元素,包括动画层
|
|
4122
4092
|
*/
|
|
4123
|
-
|
|
4124
|
-
|
|
4093
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4094
|
+
const { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4125
4095
|
/** 遮罩层元素 */
|
|
4126
4096
|
let $mask = null;
|
|
4127
4097
|
/** 已创建的元素列表 */
|
|
4128
|
-
|
|
4098
|
+
const elementList = [$anim];
|
|
4129
4099
|
/* 遮罩层元素 */
|
|
4130
4100
|
if (config.mask.enable) {
|
|
4131
|
-
|
|
4101
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4132
4102
|
type: popsType,
|
|
4133
4103
|
guid: guid,
|
|
4134
4104
|
config: config,
|
|
@@ -4139,7 +4109,7 @@ var pops = (function () {
|
|
|
4139
4109
|
elementList.push($mask);
|
|
4140
4110
|
}
|
|
4141
4111
|
/* 处理返回的配置 */
|
|
4142
|
-
|
|
4112
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4143
4113
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4144
4114
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4145
4115
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4173,7 +4143,7 @@ var pops = (function () {
|
|
|
4173
4143
|
endCallBack: config.dragEndCallBack,
|
|
4174
4144
|
});
|
|
4175
4145
|
}
|
|
4176
|
-
|
|
4146
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4177
4147
|
return result;
|
|
4178
4148
|
},
|
|
4179
4149
|
};
|
|
@@ -4307,13 +4277,13 @@ var pops = (function () {
|
|
|
4307
4277
|
},
|
|
4308
4278
|
]);
|
|
4309
4279
|
// 先把z-index提取出来
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4280
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4281
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4282
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4283
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4284
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4285
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4286
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4317
4287
|
/*html*/ `
|
|
4318
4288
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4319
4289
|
? config.title.text
|
|
@@ -4324,8 +4294,8 @@ var pops = (function () {
|
|
|
4324
4294
|
/**
|
|
4325
4295
|
* 弹窗的主元素,包括动画层
|
|
4326
4296
|
*/
|
|
4327
|
-
|
|
4328
|
-
|
|
4297
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4298
|
+
const { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4329
4299
|
/**
|
|
4330
4300
|
* 遮罩层元素
|
|
4331
4301
|
*/
|
|
@@ -4333,10 +4303,10 @@ var pops = (function () {
|
|
|
4333
4303
|
/**
|
|
4334
4304
|
* 已创建的元素列表
|
|
4335
4305
|
*/
|
|
4336
|
-
|
|
4306
|
+
const elementList = [$anim];
|
|
4337
4307
|
if (config.mask.enable) {
|
|
4338
4308
|
// 启用遮罩层
|
|
4339
|
-
|
|
4309
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4340
4310
|
type: popsType,
|
|
4341
4311
|
guid: guid,
|
|
4342
4312
|
config: config,
|
|
@@ -4346,7 +4316,7 @@ var pops = (function () {
|
|
|
4346
4316
|
$mask = _handleMask_.maskElement;
|
|
4347
4317
|
elementList.push($mask);
|
|
4348
4318
|
}
|
|
4349
|
-
|
|
4319
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4350
4320
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4351
4321
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4352
4322
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4378,7 +4348,7 @@ var pops = (function () {
|
|
|
4378
4348
|
endCallBack: config.dragEndCallBack,
|
|
4379
4349
|
});
|
|
4380
4350
|
}
|
|
4381
|
-
|
|
4351
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4382
4352
|
return result;
|
|
4383
4353
|
},
|
|
4384
4354
|
};
|
|
@@ -4511,13 +4481,13 @@ var pops = (function () {
|
|
|
4511
4481
|
},
|
|
4512
4482
|
]);
|
|
4513
4483
|
// 先把z-index提取出来
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4484
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4485
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4486
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4487
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4488
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4489
|
+
const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
4490
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4521
4491
|
/*html*/ `
|
|
4522
4492
|
${config.title.enable
|
|
4523
4493
|
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
@@ -4530,13 +4500,13 @@ var pops = (function () {
|
|
|
4530
4500
|
/**
|
|
4531
4501
|
* 弹窗的主元素,包括动画层
|
|
4532
4502
|
*/
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4503
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4504
|
+
const { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4505
|
+
const $pops = popsElement;
|
|
4506
|
+
const $headerCloseBtn = headerCloseBtnElement;
|
|
4507
|
+
const $btnCancel = btnCancelElement;
|
|
4508
|
+
const $btnOk = btnOkElement;
|
|
4509
|
+
const $btnOther = btnOtherElement;
|
|
4540
4510
|
/**
|
|
4541
4511
|
* 遮罩层元素
|
|
4542
4512
|
*/
|
|
@@ -4544,9 +4514,9 @@ var pops = (function () {
|
|
|
4544
4514
|
/**
|
|
4545
4515
|
* 已创建的元素列表
|
|
4546
4516
|
*/
|
|
4547
|
-
|
|
4517
|
+
const elementList = [$anim];
|
|
4548
4518
|
if (config.mask.enable) {
|
|
4549
|
-
|
|
4519
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4550
4520
|
type: popsType,
|
|
4551
4521
|
guid: guid,
|
|
4552
4522
|
config: config,
|
|
@@ -4556,7 +4526,7 @@ var pops = (function () {
|
|
|
4556
4526
|
$mask = _handleMask_.maskElement;
|
|
4557
4527
|
elementList.push($mask);
|
|
4558
4528
|
}
|
|
4559
|
-
|
|
4529
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4560
4530
|
/* 处理方向 */
|
|
4561
4531
|
$pops.setAttribute("direction", config.direction);
|
|
4562
4532
|
/* 处理border-radius */
|
|
@@ -4584,7 +4554,7 @@ var pops = (function () {
|
|
|
4584
4554
|
});
|
|
4585
4555
|
}
|
|
4586
4556
|
/* 待处理的点击事件列表 */
|
|
4587
|
-
|
|
4557
|
+
const needHandleClickEventList = [
|
|
4588
4558
|
{
|
|
4589
4559
|
type: "close",
|
|
4590
4560
|
ele: $headerCloseBtn,
|
|
@@ -4652,7 +4622,7 @@ var pops = (function () {
|
|
|
4652
4622
|
$shadowContainer: $shadowContainer,
|
|
4653
4623
|
$shadowRoot: $shadowRoot,
|
|
4654
4624
|
});
|
|
4655
|
-
|
|
4625
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4656
4626
|
return result;
|
|
4657
4627
|
},
|
|
4658
4628
|
};
|
|
@@ -4690,14 +4660,14 @@ var pops = (function () {
|
|
|
4690
4660
|
let config = PopsLoadingConfig();
|
|
4691
4661
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4692
4662
|
config = popsUtils.assign(config, details);
|
|
4693
|
-
|
|
4663
|
+
const guid = popsUtils.getRandomGUID();
|
|
4694
4664
|
const PopsType = "loading";
|
|
4695
4665
|
config = PopsHandler.handleOnly(PopsType, config);
|
|
4696
4666
|
// 先把z-index提取出来
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4667
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4668
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4669
|
+
const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
|
|
4670
|
+
const animHTML = PopsElementHandler.createAnim(guid, PopsType, config,
|
|
4701
4671
|
/*html*/ `
|
|
4702
4672
|
<div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
|
|
4703
4673
|
? /*html*/ `
|
|
@@ -4715,8 +4685,8 @@ var pops = (function () {
|
|
|
4715
4685
|
/**
|
|
4716
4686
|
* 弹窗的主元素,包括动画层
|
|
4717
4687
|
*/
|
|
4718
|
-
|
|
4719
|
-
|
|
4688
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4689
|
+
const { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
|
|
4720
4690
|
/**
|
|
4721
4691
|
* 遮罩层元素
|
|
4722
4692
|
*/
|
|
@@ -4724,10 +4694,10 @@ var pops = (function () {
|
|
|
4724
4694
|
/**
|
|
4725
4695
|
* 已创建的元素列表
|
|
4726
4696
|
*/
|
|
4727
|
-
|
|
4697
|
+
const elementList = [$anim];
|
|
4728
4698
|
if (config.mask.enable) {
|
|
4729
4699
|
// 创建遮罩层
|
|
4730
|
-
|
|
4700
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
4731
4701
|
type: PopsType,
|
|
4732
4702
|
guid: guid,
|
|
4733
4703
|
config: config,
|
|
@@ -4737,7 +4707,7 @@ var pops = (function () {
|
|
|
4737
4707
|
$mask = _handleMask_.maskElement;
|
|
4738
4708
|
elementList.push($mask);
|
|
4739
4709
|
}
|
|
4740
|
-
|
|
4710
|
+
const eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops, $mask, config);
|
|
4741
4711
|
popsDOMUtils.append(config.parent, elementList);
|
|
4742
4712
|
if ($mask != null) {
|
|
4743
4713
|
$anim.after($mask);
|
|
@@ -4754,7 +4724,7 @@ var pops = (function () {
|
|
|
4754
4724
|
popsDOMUtils.css($anim, "position", "absolute !important");
|
|
4755
4725
|
$mask && popsDOMUtils.css($mask, "position", "absolute !important");
|
|
4756
4726
|
}
|
|
4757
|
-
|
|
4727
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
4758
4728
|
return result;
|
|
4759
4729
|
},
|
|
4760
4730
|
};
|
|
@@ -4974,20 +4944,14 @@ var pops = (function () {
|
|
|
4974
4944
|
},
|
|
4975
4945
|
]);
|
|
4976
4946
|
/* 办公几件套 */
|
|
4977
|
-
|
|
4978
|
-
Folder_ICON
|
|
4979
|
-
|
|
4980
|
-
Folder_ICON
|
|
4981
|
-
|
|
4982
|
-
Folder_ICON
|
|
4983
|
-
// @ts-ignore
|
|
4984
|
-
Folder_ICON.pptx = Folder_ICON.ppt;
|
|
4985
|
-
// @ts-ignore;
|
|
4986
|
-
Folder_ICON.dmg = Folder_ICON.ipa;
|
|
4987
|
-
// @ts-ignore
|
|
4988
|
-
Folder_ICON.json = Folder_ICON.js;
|
|
4947
|
+
Reflect.set(Folder_ICON, "docx", Folder_ICON.doc);
|
|
4948
|
+
Reflect.set(Folder_ICON, "rtf", Folder_ICON.doc);
|
|
4949
|
+
Reflect.set(Folder_ICON, "xlsx", Folder_ICON.xls);
|
|
4950
|
+
Reflect.set(Folder_ICON, "pptx", Folder_ICON.ppt);
|
|
4951
|
+
Reflect.set(Folder_ICON, "dmg", Folder_ICON.ipa);
|
|
4952
|
+
Reflect.set(Folder_ICON, "json", Folder_ICON.js);
|
|
4989
4953
|
/* 压缩包 */
|
|
4990
|
-
|
|
4954
|
+
const zipIconList = [
|
|
4991
4955
|
"rar",
|
|
4992
4956
|
"7z",
|
|
4993
4957
|
"arj",
|
|
@@ -5006,11 +4970,11 @@ var pops = (function () {
|
|
|
5006
4970
|
"001",
|
|
5007
4971
|
];
|
|
5008
4972
|
/* 图片 */
|
|
5009
|
-
|
|
4973
|
+
const imageIconList = ["jpg", "jpeg", "ico", "webp"];
|
|
5010
4974
|
/* 代码语言 */
|
|
5011
|
-
|
|
4975
|
+
const codeLanguageIconList = ["htm", "py", "vue", "bat", "sh", "vbs", "java", "kt"];
|
|
5012
4976
|
/* Android安装包 */
|
|
5013
|
-
|
|
4977
|
+
const androidIconList = ["apk", "apkm", "xapk"];
|
|
5014
4978
|
zipIconList.forEach((keyName) => {
|
|
5015
4979
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5016
4980
|
});
|
|
@@ -5024,16 +4988,15 @@ var pops = (function () {
|
|
|
5024
4988
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5025
4989
|
});
|
|
5026
4990
|
if (details?.folder) {
|
|
5027
|
-
|
|
5028
|
-
config.folder = details.folder;
|
|
4991
|
+
Reflect.set(config, "folder", details.folder);
|
|
5029
4992
|
}
|
|
5030
4993
|
// 先把z-index提取出来
|
|
5031
|
-
|
|
5032
|
-
|
|
5033
|
-
|
|
5034
|
-
|
|
5035
|
-
|
|
5036
|
-
|
|
4994
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4995
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4996
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
4997
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
4998
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
4999
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
5037
5000
|
/*html*/ `
|
|
5038
5001
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5039
5002
|
? config.title.text
|
|
@@ -5135,8 +5098,8 @@ var pops = (function () {
|
|
|
5135
5098
|
/**
|
|
5136
5099
|
* 弹窗的主元素,包括动画层
|
|
5137
5100
|
*/
|
|
5138
|
-
|
|
5139
|
-
|
|
5101
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5102
|
+
const { popsElement: $pops, titleElement: $title, contentElement: $content,
|
|
5140
5103
|
// folderListElement,
|
|
5141
5104
|
// folderListHeaderElement,
|
|
5142
5105
|
// folderListHeaderRowElement,
|
|
@@ -5148,9 +5111,9 @@ var pops = (function () {
|
|
|
5148
5111
|
/**
|
|
5149
5112
|
* 已创建的元素列表
|
|
5150
5113
|
*/
|
|
5151
|
-
|
|
5114
|
+
const elementList = [$anim];
|
|
5152
5115
|
if (config.mask.enable) {
|
|
5153
|
-
|
|
5116
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
5154
5117
|
type: popsType,
|
|
5155
5118
|
guid: guid,
|
|
5156
5119
|
config: config,
|
|
@@ -5161,7 +5124,7 @@ var pops = (function () {
|
|
|
5161
5124
|
elementList.push($mask);
|
|
5162
5125
|
}
|
|
5163
5126
|
/* 事件 */
|
|
5164
|
-
|
|
5127
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5165
5128
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5166
5129
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5167
5130
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5180,7 +5143,7 @@ var pops = (function () {
|
|
|
5180
5143
|
config.folder.sort();
|
|
5181
5144
|
this.initFolderView(config.folder);
|
|
5182
5145
|
/* 将数据存到全部文件的属性_config_中 */
|
|
5183
|
-
|
|
5146
|
+
const allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child");
|
|
5184
5147
|
Reflect.set(allFilesElement, "_config_", config.folder);
|
|
5185
5148
|
/* 设置点击顶部的全部文件事件 */
|
|
5186
5149
|
popsDOMUtils.on(allFilesElement, "click", (event) => {
|
|
@@ -5229,13 +5192,13 @@ var pops = (function () {
|
|
|
5229
5192
|
* @param isFolder 是否是文件夹
|
|
5230
5193
|
*/
|
|
5231
5194
|
createFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
|
|
5232
|
-
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5195
|
+
const origin_fileName = fileName;
|
|
5196
|
+
const origin_latestTime = latestTime;
|
|
5197
|
+
const origin_fileSize = fileSize;
|
|
5198
|
+
const folderElement = popsDOMUtils.createElement("tr");
|
|
5199
|
+
const fileNameElement = popsDOMUtils.createElement("td");
|
|
5200
|
+
const fileTimeElement = popsDOMUtils.createElement("td");
|
|
5201
|
+
const fileFormatSize = popsDOMUtils.createElement("td");
|
|
5239
5202
|
let fileType = "";
|
|
5240
5203
|
let fileIcon = Folder_ICON.folder;
|
|
5241
5204
|
if (isFolder) {
|
|
@@ -5252,14 +5215,14 @@ var pops = (function () {
|
|
|
5252
5215
|
if (typeof fileSize === "number") {
|
|
5253
5216
|
fileSize = popsUtils.formatByteToSize(fileSize);
|
|
5254
5217
|
}
|
|
5255
|
-
for (
|
|
5218
|
+
for (const keyName in Folder_ICON) {
|
|
5256
5219
|
if (fileName.toLowerCase().endsWith("." + keyName)) {
|
|
5257
5220
|
fileType = keyName;
|
|
5258
5221
|
fileIcon = Folder_ICON[keyName];
|
|
5259
5222
|
break;
|
|
5260
5223
|
}
|
|
5261
5224
|
}
|
|
5262
|
-
if (!
|
|
5225
|
+
if (!fileIcon) {
|
|
5263
5226
|
fileType = "Null";
|
|
5264
5227
|
fileIcon = Folder_ICON.Null;
|
|
5265
5228
|
}
|
|
@@ -5292,7 +5255,7 @@ var pops = (function () {
|
|
|
5292
5255
|
</div>
|
|
5293
5256
|
`);
|
|
5294
5257
|
/* 存储原来的值 */
|
|
5295
|
-
|
|
5258
|
+
const __value__ = {
|
|
5296
5259
|
fileName: origin_fileName,
|
|
5297
5260
|
latestTime: origin_latestTime,
|
|
5298
5261
|
fileSize: origin_fileSize,
|
|
@@ -5320,11 +5283,11 @@ var pops = (function () {
|
|
|
5320
5283
|
* @param isFolder 是否是文件夹
|
|
5321
5284
|
*/
|
|
5322
5285
|
createFolderRowElementByMobile(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5286
|
+
const origin_fileName = fileName;
|
|
5287
|
+
const origin_latestTime = latestTime;
|
|
5288
|
+
const origin_fileSize = fileSize;
|
|
5289
|
+
const folderElement = popsDOMUtils.createElement("tr");
|
|
5290
|
+
const fileNameElement = popsDOMUtils.createElement("td");
|
|
5328
5291
|
let fileType = "";
|
|
5329
5292
|
let fileIcon = Folder_ICON.folder;
|
|
5330
5293
|
if (isFolder) {
|
|
@@ -5341,14 +5304,14 @@ var pops = (function () {
|
|
|
5341
5304
|
if (typeof fileSize === "number") {
|
|
5342
5305
|
fileSize = popsUtils.formatByteToSize(fileSize);
|
|
5343
5306
|
}
|
|
5344
|
-
for (
|
|
5307
|
+
for (const keyName in Folder_ICON) {
|
|
5345
5308
|
if (fileName.toLowerCase().endsWith("." + keyName)) {
|
|
5346
5309
|
fileType = keyName;
|
|
5347
5310
|
fileIcon = Folder_ICON[keyName];
|
|
5348
5311
|
break;
|
|
5349
5312
|
}
|
|
5350
5313
|
}
|
|
5351
|
-
if (!
|
|
5314
|
+
if (!fileIcon) {
|
|
5352
5315
|
fileType = "Null";
|
|
5353
5316
|
fileIcon = Folder_ICON.Null;
|
|
5354
5317
|
}
|
|
@@ -5366,7 +5329,7 @@ var pops = (function () {
|
|
|
5366
5329
|
</div>
|
|
5367
5330
|
`);
|
|
5368
5331
|
/* 存储原来的值 */
|
|
5369
|
-
|
|
5332
|
+
const __value__ = {
|
|
5370
5333
|
fileName: origin_fileName,
|
|
5371
5334
|
latestTime: origin_latestTime,
|
|
5372
5335
|
fileSize: origin_fileSize,
|
|
@@ -5390,7 +5353,7 @@ var pops = (function () {
|
|
|
5390
5353
|
* 创建顶部导航的箭头图标
|
|
5391
5354
|
*/
|
|
5392
5355
|
createHeaderArrowIcon() {
|
|
5393
|
-
|
|
5356
|
+
const $arrowIcon = popsDOMUtils.createElement("div", {
|
|
5394
5357
|
className: "iconArrow",
|
|
5395
5358
|
});
|
|
5396
5359
|
return $arrowIcon;
|
|
@@ -5401,7 +5364,7 @@ var pops = (function () {
|
|
|
5401
5364
|
* @param folderDataConfig 文件夹配置
|
|
5402
5365
|
*/
|
|
5403
5366
|
createBreadcrumb(folderName, folderDataConfig) {
|
|
5404
|
-
|
|
5367
|
+
const $breadcrumb = popsDOMUtils.createElement("span", {
|
|
5405
5368
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5406
5369
|
innerHTML: `<a>${folderName}</a>`,
|
|
5407
5370
|
_config_: folderDataConfig,
|
|
@@ -5419,8 +5382,8 @@ var pops = (function () {
|
|
|
5419
5382
|
setBreadcrumbClickEvent(clickEvent, isTop, dataConfigList) {
|
|
5420
5383
|
this.clearFolderInfoView();
|
|
5421
5384
|
/* 获取当前的导航元素 */
|
|
5422
|
-
|
|
5423
|
-
|
|
5385
|
+
const $click = clickEvent.target;
|
|
5386
|
+
const currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
5424
5387
|
if (currentBreadcrumb) {
|
|
5425
5388
|
while (currentBreadcrumb.nextElementSibling) {
|
|
5426
5389
|
currentBreadcrumb.nextElementSibling.remove();
|
|
@@ -5429,7 +5392,7 @@ var pops = (function () {
|
|
|
5429
5392
|
else {
|
|
5430
5393
|
console.error("获取导航按钮失败");
|
|
5431
5394
|
}
|
|
5432
|
-
|
|
5395
|
+
const loadingMask = PopsLoading.init({
|
|
5433
5396
|
parent: $content,
|
|
5434
5397
|
content: {
|
|
5435
5398
|
text: "获取文件列表中...",
|
|
@@ -5455,7 +5418,7 @@ var pops = (function () {
|
|
|
5455
5418
|
*/
|
|
5456
5419
|
async enterFolder(clickEvent, dataConfig) {
|
|
5457
5420
|
this.clearFolderInfoView();
|
|
5458
|
-
|
|
5421
|
+
const loadingMask = PopsLoading.init({
|
|
5459
5422
|
parent: $content,
|
|
5460
5423
|
content: {
|
|
5461
5424
|
text: "获取文件列表中...",
|
|
@@ -5466,11 +5429,11 @@ var pops = (function () {
|
|
|
5466
5429
|
addIndexCSS: false,
|
|
5467
5430
|
});
|
|
5468
5431
|
if (typeof dataConfig.clickEvent === "function") {
|
|
5469
|
-
|
|
5432
|
+
const childConfig = await dataConfig.clickEvent(clickEvent, dataConfig);
|
|
5470
5433
|
/* 添加顶部导航的箭头 */
|
|
5471
5434
|
folderFileListBreadcrumbPrimaryElement.appendChild(this.createHeaderArrowIcon());
|
|
5472
5435
|
/* 添加顶部导航的链接文字 */
|
|
5473
|
-
|
|
5436
|
+
const breadcrumbAllFilesElement = this.createBreadcrumb(dataConfig.fileName, childConfig);
|
|
5474
5437
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5475
5438
|
/* 设置顶部导航点击事件 */
|
|
5476
5439
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", (event) => {
|
|
@@ -5487,9 +5450,9 @@ var pops = (function () {
|
|
|
5487
5450
|
*/
|
|
5488
5451
|
async downloadFile(clickEvent, $row, dataConfig) {
|
|
5489
5452
|
popsDOMUtils.preventEvent(clickEvent);
|
|
5490
|
-
|
|
5453
|
+
const $link = $row.querySelector("a");
|
|
5491
5454
|
if (typeof dataConfig.clickEvent === "function") {
|
|
5492
|
-
|
|
5455
|
+
const downloadInfo = await dataConfig.clickEvent(clickEvent, dataConfig);
|
|
5493
5456
|
if (downloadInfo != null &&
|
|
5494
5457
|
typeof downloadInfo === "object" &&
|
|
5495
5458
|
!Array.isArray(downloadInfo) &&
|
|
@@ -5504,7 +5467,7 @@ var pops = (function () {
|
|
|
5504
5467
|
}
|
|
5505
5468
|
if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
|
|
5506
5469
|
/* a标签下载 */
|
|
5507
|
-
|
|
5470
|
+
const downloadLinkElement = document.createElement("a");
|
|
5508
5471
|
if (downloadInfo.mode === "aBlank") {
|
|
5509
5472
|
downloadLinkElement.setAttribute("target", "_blank");
|
|
5510
5473
|
}
|
|
@@ -5522,7 +5485,7 @@ var pops = (function () {
|
|
|
5522
5485
|
}
|
|
5523
5486
|
else if (downloadInfo.mode === "iframe") {
|
|
5524
5487
|
/* iframe下载 */
|
|
5525
|
-
|
|
5488
|
+
const downloadIframeLinkElement = document.createElement("iframe");
|
|
5526
5489
|
downloadIframeLinkElement.src = downloadInfo.url;
|
|
5527
5490
|
downloadIframeLinkElement.onload = function () {
|
|
5528
5491
|
popsUtils.setTimeout(() => {
|
|
@@ -5550,16 +5513,16 @@ var pops = (function () {
|
|
|
5550
5513
|
sortFolderConfig(folderDataConfigList, sortName = "fileName", isDesc = false) {
|
|
5551
5514
|
if (sortName === "fileName") {
|
|
5552
5515
|
// 如果是以文件名排序,文件夹优先放前面
|
|
5553
|
-
|
|
5516
|
+
const onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
|
|
5554
5517
|
return value.isFolder;
|
|
5555
5518
|
});
|
|
5556
|
-
|
|
5519
|
+
const onlyFileDataConfigList = folderDataConfigList.filter((value) => {
|
|
5557
5520
|
return !value.isFolder;
|
|
5558
5521
|
});
|
|
5559
5522
|
// 文件夹排序
|
|
5560
5523
|
onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
|
|
5561
|
-
|
|
5562
|
-
|
|
5524
|
+
const beforeVal = leftConfig[sortName].toString();
|
|
5525
|
+
const afterVal = rightConfig[sortName].toString();
|
|
5563
5526
|
let compareVal = beforeVal.localeCompare(afterVal);
|
|
5564
5527
|
if (isDesc) {
|
|
5565
5528
|
/* 降序 */
|
|
@@ -5574,8 +5537,8 @@ var pops = (function () {
|
|
|
5574
5537
|
});
|
|
5575
5538
|
// 文件名排序
|
|
5576
5539
|
onlyFileDataConfigList.sort((leftConfig, rightConfig) => {
|
|
5577
|
-
|
|
5578
|
-
|
|
5540
|
+
const beforeVal = leftConfig[sortName].toString();
|
|
5541
|
+
const afterVal = rightConfig[sortName].toString();
|
|
5579
5542
|
let compareVal = beforeVal.localeCompare(afterVal);
|
|
5580
5543
|
if (isDesc) {
|
|
5581
5544
|
/* 降序 */
|
|
@@ -5645,7 +5608,7 @@ var pops = (function () {
|
|
|
5645
5608
|
this.sortFolderConfig(dataConfig, config.sort.name, config.sort.isDesc);
|
|
5646
5609
|
dataConfig.forEach((item) => {
|
|
5647
5610
|
if (item.isFolder) {
|
|
5648
|
-
|
|
5611
|
+
const { folderElement, fileNameElement } = popsUtils.isPhone()
|
|
5649
5612
|
? this.createFolderRowElementByMobile(item.fileName, "", "", true)
|
|
5650
5613
|
: this.createFolderRowElement(item.fileName, "", "", true);
|
|
5651
5614
|
// 文件夹 - 点击事件
|
|
@@ -5656,7 +5619,7 @@ var pops = (function () {
|
|
|
5656
5619
|
folderListBodyElement.appendChild(folderElement);
|
|
5657
5620
|
}
|
|
5658
5621
|
else {
|
|
5659
|
-
|
|
5622
|
+
const { folderElement, fileNameElement } = popsUtils.isPhone()
|
|
5660
5623
|
? this.createFolderRowElementByMobile(item.fileName, item.latestTime, item.fileSize, false)
|
|
5661
5624
|
: this.createFolderRowElement(item.fileName, item.latestTime, item.fileSize, false);
|
|
5662
5625
|
// 文件 - 点击事件
|
|
@@ -5702,20 +5665,20 @@ var pops = (function () {
|
|
|
5702
5665
|
config.sort.name = sortName;
|
|
5703
5666
|
config.sort.isDesc = !config.sort.isDesc;
|
|
5704
5667
|
}
|
|
5705
|
-
|
|
5706
|
-
|
|
5668
|
+
const arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
|
|
5669
|
+
const arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
|
|
5707
5670
|
this.changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
|
|
5708
5671
|
if (typeof config.sort.callback === "function" &&
|
|
5709
5672
|
config.sort.callback(target, event, config.sort.name, config.sort.isDesc)) {
|
|
5710
5673
|
return;
|
|
5711
5674
|
}
|
|
5712
|
-
|
|
5675
|
+
const childrenList = [];
|
|
5713
5676
|
Array.from(folderListBodyElement.children).forEach((trElement) => {
|
|
5714
|
-
|
|
5677
|
+
const __value__ = Reflect.get(trElement, "__value__");
|
|
5715
5678
|
Reflect.set(__value__, "target", trElement);
|
|
5716
5679
|
childrenList.push(__value__);
|
|
5717
5680
|
});
|
|
5718
|
-
|
|
5681
|
+
const sortedConfigList = this.sortFolderConfig(childrenList, config.sort.name, config.sort.isDesc);
|
|
5719
5682
|
sortedConfigList.forEach((item) => {
|
|
5720
5683
|
folderListBodyElement.appendChild(item.target);
|
|
5721
5684
|
});
|
|
@@ -5742,7 +5705,7 @@ var pops = (function () {
|
|
|
5742
5705
|
$shadowContainer: $shadowContainer,
|
|
5743
5706
|
$shadowRoot: $shadowRoot,
|
|
5744
5707
|
});
|
|
5745
|
-
|
|
5708
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
5746
5709
|
return result;
|
|
5747
5710
|
},
|
|
5748
5711
|
};
|
|
@@ -5844,17 +5807,15 @@ var pops = (function () {
|
|
|
5844
5807
|
css: PopsCSS.iframeCSS,
|
|
5845
5808
|
},
|
|
5846
5809
|
]);
|
|
5847
|
-
|
|
5848
|
-
// @ts-ignore
|
|
5849
|
-
config.animation != null && config.animation != "" ? "position:absolute;" : "";
|
|
5810
|
+
const maskExtraStyle = config.animation != null && config.animation != "" ? "position:absolute;" : "";
|
|
5850
5811
|
// 先把z-index提取出来
|
|
5851
|
-
|
|
5852
|
-
|
|
5853
|
-
|
|
5854
|
-
|
|
5855
|
-
|
|
5856
|
-
|
|
5857
|
-
|
|
5812
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5813
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
|
|
5814
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
5815
|
+
const iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
5816
|
+
const titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
5817
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
5818
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
5858
5819
|
/*html*/ `
|
|
5859
5820
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5860
5821
|
? titleText
|
|
@@ -5867,14 +5828,14 @@ var pops = (function () {
|
|
|
5867
5828
|
/**
|
|
5868
5829
|
* 弹窗的主元素,包括动画层
|
|
5869
5830
|
*/
|
|
5870
|
-
|
|
5871
|
-
|
|
5831
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5832
|
+
const { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5872
5833
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
5873
5834
|
if (!$iframeContainer) {
|
|
5874
5835
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
5875
5836
|
$iframeContainer.className = "pops-iframe-container";
|
|
5876
5837
|
$iframeContainer.style.cssText =
|
|
5877
|
-
"display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse
|
|
5838
|
+
"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;";
|
|
5878
5839
|
popsDOMUtils.appendBody($iframeContainer);
|
|
5879
5840
|
}
|
|
5880
5841
|
/**
|
|
@@ -5884,9 +5845,9 @@ var pops = (function () {
|
|
|
5884
5845
|
/**
|
|
5885
5846
|
* 已创建的元素列表
|
|
5886
5847
|
*/
|
|
5887
|
-
|
|
5848
|
+
const elementList = [$anim];
|
|
5888
5849
|
if (config.mask.enable) {
|
|
5889
|
-
|
|
5850
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
5890
5851
|
type: popsType,
|
|
5891
5852
|
guid: guid,
|
|
5892
5853
|
config: config,
|
|
@@ -5896,7 +5857,7 @@ var pops = (function () {
|
|
|
5896
5857
|
$mask = _handleMask_.maskElement;
|
|
5897
5858
|
elementList.push($mask);
|
|
5898
5859
|
}
|
|
5899
|
-
|
|
5860
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5900
5861
|
eventDetails["iframeElement"] = $iframe;
|
|
5901
5862
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
5902
5863
|
/* 动画加载完毕 */
|
|
@@ -6047,7 +6008,7 @@ var pops = (function () {
|
|
|
6047
6008
|
$shadowContainer: $shadowContainer,
|
|
6048
6009
|
$shadowRoot: $shadowRoot,
|
|
6049
6010
|
});
|
|
6050
|
-
|
|
6011
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
6051
6012
|
return result;
|
|
6052
6013
|
},
|
|
6053
6014
|
};
|
|
@@ -6318,7 +6279,7 @@ var pops = (function () {
|
|
|
6318
6279
|
text: "单选3",
|
|
6319
6280
|
isHTML: false,
|
|
6320
6281
|
disable(value, allSelectedInfo) {
|
|
6321
|
-
return
|
|
6282
|
+
return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
|
|
6322
6283
|
},
|
|
6323
6284
|
},
|
|
6324
6285
|
{
|
|
@@ -6326,7 +6287,7 @@ var pops = (function () {
|
|
|
6326
6287
|
text: "单选4",
|
|
6327
6288
|
isHTML: false,
|
|
6328
6289
|
disable(value, allSelectedInfo) {
|
|
6329
|
-
return
|
|
6290
|
+
return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
|
|
6330
6291
|
},
|
|
6331
6292
|
},
|
|
6332
6293
|
{
|
|
@@ -6508,7 +6469,7 @@ var pops = (function () {
|
|
|
6508
6469
|
// @ts-ignore
|
|
6509
6470
|
props: {},
|
|
6510
6471
|
forms: [],
|
|
6511
|
-
clickFirstCallback: function (
|
|
6472
|
+
clickFirstCallback: function () {
|
|
6512
6473
|
return false;
|
|
6513
6474
|
},
|
|
6514
6475
|
},
|
|
@@ -6525,7 +6486,7 @@ var pops = (function () {
|
|
|
6525
6486
|
// @ts-ignore
|
|
6526
6487
|
props: {},
|
|
6527
6488
|
forms: [],
|
|
6528
|
-
clickFirstCallback: function (
|
|
6489
|
+
clickFirstCallback: function () {
|
|
6529
6490
|
return false;
|
|
6530
6491
|
},
|
|
6531
6492
|
},
|
|
@@ -6582,20 +6543,20 @@ var pops = (function () {
|
|
|
6582
6543
|
* @param number2
|
|
6583
6544
|
*/
|
|
6584
6545
|
add(number1, number2) {
|
|
6585
|
-
let number1length, number2length
|
|
6546
|
+
let number1length, number2length;
|
|
6586
6547
|
try {
|
|
6587
6548
|
number1length = number1.toString().split(".")[1].length;
|
|
6588
6549
|
}
|
|
6589
|
-
catch
|
|
6550
|
+
catch {
|
|
6590
6551
|
number1length = 0;
|
|
6591
6552
|
}
|
|
6592
6553
|
try {
|
|
6593
6554
|
number2length = number2.toString().split(".")[1].length;
|
|
6594
6555
|
}
|
|
6595
|
-
catch
|
|
6556
|
+
catch {
|
|
6596
6557
|
number2length = 0;
|
|
6597
6558
|
}
|
|
6598
|
-
powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6559
|
+
const powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6599
6560
|
return Math.round(number1 * powValue + number2 * powValue) / powValue;
|
|
6600
6561
|
},
|
|
6601
6562
|
/**
|
|
@@ -6604,21 +6565,21 @@ var pops = (function () {
|
|
|
6604
6565
|
* @param number2
|
|
6605
6566
|
*/
|
|
6606
6567
|
sub(number1, number2) {
|
|
6607
|
-
let number1length, number2length
|
|
6568
|
+
let number1length, number2length;
|
|
6608
6569
|
try {
|
|
6609
6570
|
number1length = number1.toString().split(".")[1].length;
|
|
6610
6571
|
}
|
|
6611
|
-
catch
|
|
6572
|
+
catch {
|
|
6612
6573
|
number1length = 0;
|
|
6613
6574
|
}
|
|
6614
6575
|
try {
|
|
6615
6576
|
number2length = number2.toString().split(".")[1].length;
|
|
6616
6577
|
}
|
|
6617
|
-
catch
|
|
6578
|
+
catch {
|
|
6618
6579
|
number2length = 0;
|
|
6619
6580
|
}
|
|
6620
|
-
powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6621
|
-
|
|
6581
|
+
const powValue = Math.pow(10, Math.max(number1length, number2length));
|
|
6582
|
+
const fixedValue = number1length >= number2length ? number1length : number2length;
|
|
6622
6583
|
return (Math.round(number1 * powValue - number2 * powValue) / powValue).toFixed(fixedValue);
|
|
6623
6584
|
},
|
|
6624
6585
|
/**
|
|
@@ -6627,21 +6588,21 @@ var pops = (function () {
|
|
|
6627
6588
|
* @param number2
|
|
6628
6589
|
*/
|
|
6629
6590
|
division(number1, number2) {
|
|
6630
|
-
let number1length, number2length
|
|
6591
|
+
let number1length, number2length;
|
|
6631
6592
|
try {
|
|
6632
6593
|
number1length = number1.toString().split(".")[1].length;
|
|
6633
6594
|
}
|
|
6634
|
-
catch
|
|
6595
|
+
catch {
|
|
6635
6596
|
number1length = 0;
|
|
6636
6597
|
}
|
|
6637
6598
|
try {
|
|
6638
6599
|
number2length = number2.toString().split(".")[1].length;
|
|
6639
6600
|
}
|
|
6640
|
-
catch
|
|
6601
|
+
catch {
|
|
6641
6602
|
number2length = 0;
|
|
6642
6603
|
}
|
|
6643
|
-
number1ReplaceValue = Number(number1.toString().replace(".", ""));
|
|
6644
|
-
number2ReplaceValue = Number(number2.toString().replace(".", ""));
|
|
6604
|
+
const number1ReplaceValue = Number(number1.toString().replace(".", ""));
|
|
6605
|
+
const number2ReplaceValue = Number(number2.toString().replace(".", ""));
|
|
6645
6606
|
return (number1ReplaceValue / number2ReplaceValue) * Math.pow(10, number2length - number1length);
|
|
6646
6607
|
},
|
|
6647
6608
|
};
|
|
@@ -6706,7 +6667,7 @@ var pops = (function () {
|
|
|
6706
6667
|
this.init();
|
|
6707
6668
|
}
|
|
6708
6669
|
init() {
|
|
6709
|
-
|
|
6670
|
+
const toolTipInfo = this.createToolTip();
|
|
6710
6671
|
this.$el.$toolTip = toolTipInfo.$toolTipContainer;
|
|
6711
6672
|
this.$el.$content = toolTipInfo.$toolTipContent;
|
|
6712
6673
|
this.$el.$arrow = toolTipInfo.$toolTipArrow;
|
|
@@ -6722,7 +6683,7 @@ var pops = (function () {
|
|
|
6722
6683
|
* 创建提示元素
|
|
6723
6684
|
*/
|
|
6724
6685
|
createToolTip() {
|
|
6725
|
-
|
|
6686
|
+
const $toolTipContainer = popsDOMUtils.createElement("div", {
|
|
6726
6687
|
className: "pops-tip",
|
|
6727
6688
|
innerHTML: /*html*/ `
|
|
6728
6689
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
@@ -6733,9 +6694,9 @@ var pops = (function () {
|
|
|
6733
6694
|
"data-guid": this.$data.guid,
|
|
6734
6695
|
});
|
|
6735
6696
|
/** 内容 */
|
|
6736
|
-
|
|
6697
|
+
const $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
6737
6698
|
/** 箭头 */
|
|
6738
|
-
|
|
6699
|
+
const $toolTipArrow = $toolTipContainer.querySelector(".pops-tip-arrow");
|
|
6739
6700
|
// 处理className
|
|
6740
6701
|
if (typeof this.$data.config.className === "string" && this.$data.config.className.trim() !== "") {
|
|
6741
6702
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
@@ -6744,7 +6705,7 @@ var pops = (function () {
|
|
|
6744
6705
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
6745
6706
|
if (this.$data.config.style != null) {
|
|
6746
6707
|
/* 添加自定义style */
|
|
6747
|
-
|
|
6708
|
+
const cssNode = popsDOMUtils.createElement("style", {
|
|
6748
6709
|
type: "text/css",
|
|
6749
6710
|
innerHTML: this.$data.config.style,
|
|
6750
6711
|
});
|
|
@@ -6764,9 +6725,7 @@ var pops = (function () {
|
|
|
6764
6725
|
* 获取提示的内容
|
|
6765
6726
|
*/
|
|
6766
6727
|
getContent() {
|
|
6767
|
-
return typeof this.$data.config.content === "function"
|
|
6768
|
-
? this.$data.config.content()
|
|
6769
|
-
: this.$data.config.content;
|
|
6728
|
+
return typeof this.$data.config.content === "function" ? this.$data.config.content() : this.$data.config.content;
|
|
6770
6729
|
}
|
|
6771
6730
|
/**
|
|
6772
6731
|
* 修改提示的内容
|
|
@@ -6777,17 +6736,15 @@ var pops = (function () {
|
|
|
6777
6736
|
text = this.getContent();
|
|
6778
6737
|
}
|
|
6779
6738
|
if (this.$data.config.isDiffContent) {
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
let originContentText = this.$el.$content[contentPropKey];
|
|
6739
|
+
const contentPropKey = "data-content";
|
|
6740
|
+
const originContentText = Reflect.get(this.$el.$content, contentPropKey);
|
|
6783
6741
|
if (typeof originContentText === "string") {
|
|
6784
6742
|
if (originContentText === text) {
|
|
6785
6743
|
// 内容未改变,不修改避免渲染
|
|
6786
6744
|
return;
|
|
6787
6745
|
}
|
|
6788
6746
|
}
|
|
6789
|
-
|
|
6790
|
-
this.$el.$content[contentPropKey] = text;
|
|
6747
|
+
Reflect.set(this.$el.$content, contentPropKey, text);
|
|
6791
6748
|
}
|
|
6792
6749
|
PopsSafeUtils.setSafeHTML(this.$el.$content, text);
|
|
6793
6750
|
}
|
|
@@ -6813,23 +6770,23 @@ var pops = (function () {
|
|
|
6813
6770
|
* @param otherDistance 其它位置的偏移
|
|
6814
6771
|
*/
|
|
6815
6772
|
calcToolTipPosition(targetElement, arrowDistance, otherDistance, event) {
|
|
6816
|
-
|
|
6773
|
+
const offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
6817
6774
|
// 目标 宽
|
|
6818
|
-
|
|
6775
|
+
const targetElement_width = offsetInfo.width;
|
|
6819
6776
|
// 目标 高
|
|
6820
|
-
|
|
6777
|
+
const targetElement_height = offsetInfo.height;
|
|
6821
6778
|
// 目标 顶部距离
|
|
6822
|
-
|
|
6779
|
+
const targetElement_top = offsetInfo.top;
|
|
6823
6780
|
// let targetElement_bottom = offsetInfo.bottom;
|
|
6824
6781
|
// 目标 左边距离
|
|
6825
|
-
|
|
6782
|
+
const targetElement_left = offsetInfo.left;
|
|
6826
6783
|
// let targetElement_right = offsetInfo.right;
|
|
6827
|
-
|
|
6828
|
-
|
|
6784
|
+
const toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
6785
|
+
const toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
6829
6786
|
/* 目标元素的x轴的中间位置 */
|
|
6830
|
-
|
|
6787
|
+
const targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
|
|
6831
6788
|
/* 目标元素的Y轴的中间位置 */
|
|
6832
|
-
|
|
6789
|
+
const targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
|
|
6833
6790
|
let mouseX = 0;
|
|
6834
6791
|
let mouseY = 0;
|
|
6835
6792
|
if (event != null) {
|
|
@@ -6838,19 +6795,15 @@ var pops = (function () {
|
|
|
6838
6795
|
mouseY = event.y;
|
|
6839
6796
|
}
|
|
6840
6797
|
else if (event instanceof TouchEvent) {
|
|
6841
|
-
|
|
6798
|
+
const touchEvent = event.touches[0];
|
|
6842
6799
|
mouseX = touchEvent.pageX;
|
|
6843
6800
|
mouseY = touchEvent.pageY;
|
|
6844
6801
|
}
|
|
6845
6802
|
else {
|
|
6846
|
-
// @ts-ignore
|
|
6847
6803
|
if (typeof event.clientX === "number") {
|
|
6848
|
-
// @ts-ignore
|
|
6849
6804
|
mouseX = event.clientX;
|
|
6850
6805
|
}
|
|
6851
|
-
// @ts-ignore
|
|
6852
6806
|
if (typeof event.clientY === "number") {
|
|
6853
|
-
// @ts-ignore
|
|
6854
6807
|
mouseY = event.clientY;
|
|
6855
6808
|
}
|
|
6856
6809
|
}
|
|
@@ -6892,9 +6845,9 @@ var pops = (function () {
|
|
|
6892
6845
|
* 动态修改tooltip的位置
|
|
6893
6846
|
*/
|
|
6894
6847
|
changePosition(event) {
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6848
|
+
const positionInfo = this.calcToolTipPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance, event);
|
|
6849
|
+
const positionKey = this.$data.config.position.toUpperCase();
|
|
6850
|
+
const positionDetail = positionInfo[positionKey];
|
|
6898
6851
|
if (positionDetail) {
|
|
6899
6852
|
this.$el.$toolTip.style.left = positionDetail.left + "px";
|
|
6900
6853
|
this.$el.$toolTip.style.top = positionDetail.top + "px";
|
|
@@ -6944,7 +6897,7 @@ var pops = (function () {
|
|
|
6944
6897
|
* @param type 事件类型
|
|
6945
6898
|
*/
|
|
6946
6899
|
clearCloseTimeoutId(type, timeId) {
|
|
6947
|
-
|
|
6900
|
+
const timeIdList = type === "MouseEvent" ? this.$data.timeId_close_MouseEvent : this.$data.timeId_close_TouchEvent;
|
|
6948
6901
|
for (let index = 0; index < timeIdList.length; index++) {
|
|
6949
6902
|
const currentTimeId = timeIdList[index];
|
|
6950
6903
|
if (typeof timeId === "number") {
|
|
@@ -6966,11 +6919,11 @@ var pops = (function () {
|
|
|
6966
6919
|
* 显示提示框
|
|
6967
6920
|
*/
|
|
6968
6921
|
show(...args) {
|
|
6969
|
-
|
|
6970
|
-
|
|
6922
|
+
const event = args[0];
|
|
6923
|
+
const eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
6971
6924
|
this.clearCloseTimeoutId(eventType);
|
|
6972
6925
|
if (typeof this.$data.config.showBeforeCallBack === "function") {
|
|
6973
|
-
|
|
6926
|
+
const result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
|
|
6974
6927
|
if (typeof result === "boolean" && !result) {
|
|
6975
6928
|
return;
|
|
6976
6929
|
}
|
|
@@ -7013,19 +6966,19 @@ var pops = (function () {
|
|
|
7013
6966
|
* 关闭提示框
|
|
7014
6967
|
*/
|
|
7015
6968
|
close(...args) {
|
|
7016
|
-
|
|
7017
|
-
|
|
6969
|
+
const event = args[0];
|
|
6970
|
+
const eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
|
|
7018
6971
|
// 只判断鼠标事件
|
|
7019
6972
|
// 其它的如Touch事件不做处理
|
|
7020
6973
|
if (event && event instanceof MouseEvent) {
|
|
7021
|
-
|
|
6974
|
+
const $target = event.composedPath()[0];
|
|
7022
6975
|
// 如果是目标元素的子元素/tooltip元素的子元素触发的话,那就不管
|
|
7023
6976
|
if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
|
|
7024
6977
|
return;
|
|
7025
6978
|
}
|
|
7026
6979
|
}
|
|
7027
6980
|
if (typeof this.$data.config.closeBeforeCallBack === "function") {
|
|
7028
|
-
|
|
6981
|
+
const result = this.$data.config.closeBeforeCallBack(this.$el.$toolTip);
|
|
7029
6982
|
if (typeof result === "boolean" && !result) {
|
|
7030
6983
|
return;
|
|
7031
6984
|
}
|
|
@@ -7034,14 +6987,14 @@ var pops = (function () {
|
|
|
7034
6987
|
(typeof this.$data.config.delayCloseTime === "number" && this.$data.config.delayCloseTime <= 0)) {
|
|
7035
6988
|
this.$data.config.delayCloseTime = 100;
|
|
7036
6989
|
}
|
|
7037
|
-
|
|
6990
|
+
const timeId = popsUtils.setTimeout(() => {
|
|
7038
6991
|
// 设置属性触发关闭动画
|
|
7039
6992
|
this.clearCloseTimeoutId(eventType, timeId);
|
|
7040
6993
|
if (this.$el.$toolTip == null) {
|
|
7041
6994
|
// 已清除了
|
|
7042
6995
|
return;
|
|
7043
6996
|
}
|
|
7044
|
-
|
|
6997
|
+
const motion = this.$el.$toolTip.getAttribute("data-motion");
|
|
7045
6998
|
if (motion == null || motion.trim() === "") {
|
|
7046
6999
|
// 没有动画
|
|
7047
7000
|
this.toolTipAnimationFinishEvent();
|
|
@@ -7185,7 +7138,7 @@ var pops = (function () {
|
|
|
7185
7138
|
css: PopsCSS.tooltipCSS,
|
|
7186
7139
|
},
|
|
7187
7140
|
]);
|
|
7188
|
-
|
|
7141
|
+
const toolTip = new ToolTip(config, guid, {
|
|
7189
7142
|
$shadowContainer,
|
|
7190
7143
|
$shadowRoot,
|
|
7191
7144
|
});
|
|
@@ -7253,8 +7206,7 @@ var pops = (function () {
|
|
|
7253
7206
|
this.$config = details.config;
|
|
7254
7207
|
this.asideULElement = this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-top-container`);
|
|
7255
7208
|
this.asideBottomULElement = this.$el.$contentAside.querySelector(`ul.pops-${PopsType}-aside-bottom-container`);
|
|
7256
|
-
this.sectionContainerHeaderULElement =
|
|
7257
|
-
this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
|
|
7209
|
+
this.sectionContainerHeaderULElement = this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
|
|
7258
7210
|
this.sectionContainerULElement = this.$el.$contentSectionContainer.querySelector(`ul.pops-${PopsType}-container-main-ul`);
|
|
7259
7211
|
/**
|
|
7260
7212
|
* 默认点击的左侧容器项
|
|
@@ -7264,12 +7216,10 @@ var pops = (function () {
|
|
|
7264
7216
|
let isScrollToDefaultView = false;
|
|
7265
7217
|
// 初始化配置
|
|
7266
7218
|
details.config.content.forEach((asideItemConfig) => {
|
|
7267
|
-
|
|
7219
|
+
const $asideLiElement = this.createAsideItem(asideItemConfig);
|
|
7268
7220
|
this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
|
|
7269
7221
|
// 是否处于底部
|
|
7270
|
-
|
|
7271
|
-
? asideItemConfig.isBottom()
|
|
7272
|
-
: asideItemConfig.isBottom;
|
|
7222
|
+
const isBottom = typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
|
|
7273
7223
|
if (isBottom) {
|
|
7274
7224
|
this.asideBottomULElement.appendChild($asideLiElement);
|
|
7275
7225
|
}
|
|
@@ -7375,7 +7325,7 @@ var pops = (function () {
|
|
|
7375
7325
|
return;
|
|
7376
7326
|
}
|
|
7377
7327
|
Object.keys(props).forEach((propName) => {
|
|
7378
|
-
|
|
7328
|
+
const value = props[propName];
|
|
7379
7329
|
if (propName === "innerHTML") {
|
|
7380
7330
|
PopsSafeUtils.setSafeHTML(element, value);
|
|
7381
7331
|
return;
|
|
@@ -7396,7 +7346,7 @@ var pops = (function () {
|
|
|
7396
7346
|
className = className();
|
|
7397
7347
|
}
|
|
7398
7348
|
if (typeof className === "string") {
|
|
7399
|
-
|
|
7349
|
+
const splitClassName = className.split(" ");
|
|
7400
7350
|
splitClassName.forEach((classNameStr) => {
|
|
7401
7351
|
element.classList.add(classNameStr);
|
|
7402
7352
|
});
|
|
@@ -7412,10 +7362,10 @@ var pops = (function () {
|
|
|
7412
7362
|
* @param asideConfig
|
|
7413
7363
|
*/
|
|
7414
7364
|
createAsideItem(asideConfig) {
|
|
7415
|
-
|
|
7365
|
+
const $li = document.createElement("li");
|
|
7416
7366
|
$li.id = asideConfig.id;
|
|
7417
7367
|
Reflect.set($li, "__forms__", asideConfig.forms);
|
|
7418
|
-
|
|
7368
|
+
const title = typeof asideConfig.title === "function" ? asideConfig.title() : asideConfig.title;
|
|
7419
7369
|
PopsSafeUtils.setSafeHTML($li, title);
|
|
7420
7370
|
/* 处理className */
|
|
7421
7371
|
this.setElementClassName($li, "pops-panel-aside-item");
|
|
@@ -7425,7 +7375,7 @@ var pops = (function () {
|
|
|
7425
7375
|
/** 禁用左侧项的hover的CSS样式的类名 */
|
|
7426
7376
|
const disableAsideItemHoverCSSClassName = "pops-panel-disabled-aside-hover-css";
|
|
7427
7377
|
/** 是否禁用左侧项的hover的CSS样式 */
|
|
7428
|
-
|
|
7378
|
+
const disableAsideItemHoverCSS = typeof asideConfig.disableAsideItemHoverCSS === "function"
|
|
7429
7379
|
? asideConfig.disableAsideItemHoverCSS()
|
|
7430
7380
|
: asideConfig.disableAsideItemHoverCSS;
|
|
7431
7381
|
if (disableAsideItemHoverCSS) {
|
|
@@ -7442,14 +7392,14 @@ var pops = (function () {
|
|
|
7442
7392
|
* @param formConfig
|
|
7443
7393
|
*/
|
|
7444
7394
|
createSectionContainerItem_switch(formConfig) {
|
|
7445
|
-
|
|
7395
|
+
const $li = document.createElement("li");
|
|
7446
7396
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7447
7397
|
this.setElementClassName($li, formConfig.className);
|
|
7448
7398
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7449
7399
|
this.setElementProps($li, formConfig.props);
|
|
7450
7400
|
/* 左边底部的描述的文字 */
|
|
7451
7401
|
let leftDescriptionText = "";
|
|
7452
|
-
if (
|
|
7402
|
+
if (formConfig.description) {
|
|
7453
7403
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7454
7404
|
}
|
|
7455
7405
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7476,7 +7426,7 @@ var pops = (function () {
|
|
|
7476
7426
|
},
|
|
7477
7427
|
init() {
|
|
7478
7428
|
this.setStatus(this.$data.value);
|
|
7479
|
-
|
|
7429
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
7480
7430
|
if (disabled) {
|
|
7481
7431
|
this.disable();
|
|
7482
7432
|
}
|
|
@@ -7486,7 +7436,7 @@ var pops = (function () {
|
|
|
7486
7436
|
* 设置点击事件
|
|
7487
7437
|
*/
|
|
7488
7438
|
setClickEvent() {
|
|
7489
|
-
|
|
7439
|
+
const that = this;
|
|
7490
7440
|
popsDOMUtils.on(this.$ele.core, "click", function (event) {
|
|
7491
7441
|
if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
|
|
7492
7442
|
return;
|
|
@@ -7548,14 +7498,14 @@ var pops = (function () {
|
|
|
7548
7498
|
* @param formConfig
|
|
7549
7499
|
*/
|
|
7550
7500
|
createSectionContainerItem_slider(formConfig) {
|
|
7551
|
-
|
|
7501
|
+
const $li = document.createElement("li");
|
|
7552
7502
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7553
7503
|
this.setElementClassName($li, formConfig.className);
|
|
7554
7504
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7555
7505
|
this.setElementProps($li, formConfig.props);
|
|
7556
7506
|
/* 左边底部的描述的文字 */
|
|
7557
7507
|
let leftDescriptionText = "";
|
|
7558
|
-
if (
|
|
7508
|
+
if (formConfig.description) {
|
|
7559
7509
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7560
7510
|
}
|
|
7561
7511
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7566,7 +7516,7 @@ var pops = (function () {
|
|
|
7566
7516
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
7567
7517
|
</div>
|
|
7568
7518
|
`);
|
|
7569
|
-
|
|
7519
|
+
const $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
|
|
7570
7520
|
if (formConfig.step) {
|
|
7571
7521
|
$rangeInput.setAttribute("step", formConfig.step.toString());
|
|
7572
7522
|
}
|
|
@@ -7575,7 +7525,7 @@ var pops = (function () {
|
|
|
7575
7525
|
* 获取提示的内容
|
|
7576
7526
|
* @param value
|
|
7577
7527
|
*/
|
|
7578
|
-
|
|
7528
|
+
const getToolTipContent = function (value) {
|
|
7579
7529
|
if (typeof formConfig.getToolTipContent === "function") {
|
|
7580
7530
|
return formConfig.getToolTipContent(value);
|
|
7581
7531
|
}
|
|
@@ -7583,7 +7533,7 @@ var pops = (function () {
|
|
|
7583
7533
|
return value;
|
|
7584
7534
|
}
|
|
7585
7535
|
};
|
|
7586
|
-
|
|
7536
|
+
const tooltip = PopsTooltip.init({
|
|
7587
7537
|
target: $rangeInput.parentElement,
|
|
7588
7538
|
content: () => {
|
|
7589
7539
|
return getToolTipContent($rangeInput.value);
|
|
@@ -7611,14 +7561,14 @@ var pops = (function () {
|
|
|
7611
7561
|
* @param formConfig
|
|
7612
7562
|
*/
|
|
7613
7563
|
createSectionContainerItem_slider_new(formConfig) {
|
|
7614
|
-
|
|
7564
|
+
const $li = document.createElement("li");
|
|
7615
7565
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
7616
7566
|
this.setElementClassName($li, formConfig.className);
|
|
7617
7567
|
this.setElementAttributes($li, formConfig.attributes);
|
|
7618
7568
|
this.setElementProps($li, formConfig.props);
|
|
7619
7569
|
/* 左边底部的描述的文字 */
|
|
7620
7570
|
let leftDescriptionText = "";
|
|
7621
|
-
if (
|
|
7571
|
+
if (formConfig.description) {
|
|
7622
7572
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7623
7573
|
}
|
|
7624
7574
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -7729,9 +7679,9 @@ var pops = (function () {
|
|
|
7729
7679
|
}
|
|
7730
7680
|
this.$interval.isCheck = true;
|
|
7731
7681
|
let isSuccess = false;
|
|
7732
|
-
|
|
7682
|
+
const oldTotalWidth = this.$data.totalWidth;
|
|
7733
7683
|
let timer = void 0;
|
|
7734
|
-
|
|
7684
|
+
const interval = setInterval(() => {
|
|
7735
7685
|
if (isSuccess) {
|
|
7736
7686
|
this.$interval.isCheck = false;
|
|
7737
7687
|
clearTimeout(timer);
|
|
@@ -7784,12 +7734,12 @@ var pops = (function () {
|
|
|
7784
7734
|
initStepMap() {
|
|
7785
7735
|
let index = 0;
|
|
7786
7736
|
// 计算出份数
|
|
7787
|
-
|
|
7737
|
+
const blockNums = (this.max - this.min) / this.step;
|
|
7788
7738
|
// 计算出每一份占据的px
|
|
7789
7739
|
this.$data.stepPx = this.$data.totalWidth / blockNums;
|
|
7790
7740
|
let widthPx = 0;
|
|
7791
7741
|
for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
|
|
7792
|
-
|
|
7742
|
+
const value = this.formatValue(stepValue);
|
|
7793
7743
|
let info;
|
|
7794
7744
|
if (value === this.min) {
|
|
7795
7745
|
/* 起始 */
|
|
@@ -7827,12 +7777,12 @@ var pops = (function () {
|
|
|
7827
7777
|
initFloatStepMap() {
|
|
7828
7778
|
let index = 0;
|
|
7829
7779
|
// 计算出份数
|
|
7830
|
-
|
|
7780
|
+
const blockNums = (this.max - this.min) / this.step;
|
|
7831
7781
|
// 计算出每一份占据的px
|
|
7832
7782
|
this.$data.stepPx = this.$data.totalWidth / blockNums;
|
|
7833
7783
|
let widthPx = 0;
|
|
7834
7784
|
for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
|
|
7835
|
-
|
|
7785
|
+
const value = this.formatValue(stepValue);
|
|
7836
7786
|
let info;
|
|
7837
7787
|
if (value === this.min) {
|
|
7838
7788
|
/* 起始 */
|
|
@@ -7972,7 +7922,7 @@ var pops = (function () {
|
|
|
7972
7922
|
* 判断当前滑块是否被禁用(配置中判断)
|
|
7973
7923
|
*/
|
|
7974
7924
|
isFormConfigDisabledDrag() {
|
|
7975
|
-
|
|
7925
|
+
const isDisabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
7976
7926
|
if (typeof isDisabled === "boolean") {
|
|
7977
7927
|
return isDisabled;
|
|
7978
7928
|
}
|
|
@@ -7988,8 +7938,8 @@ var pops = (function () {
|
|
|
7988
7938
|
if (event.target !== this.$ele.runAway && event.target !== this.$ele.bar) {
|
|
7989
7939
|
return;
|
|
7990
7940
|
}
|
|
7991
|
-
|
|
7992
|
-
|
|
7941
|
+
const clickX = parseFloat(event.offsetX.toString());
|
|
7942
|
+
const dragStartResult = this.dragStartCallBack();
|
|
7993
7943
|
if (!dragStartResult) {
|
|
7994
7944
|
return;
|
|
7995
7945
|
}
|
|
@@ -8081,7 +8031,7 @@ var pops = (function () {
|
|
|
8081
8031
|
if (!this.dragStartCallBack()) {
|
|
8082
8032
|
return;
|
|
8083
8033
|
}
|
|
8084
|
-
|
|
8034
|
+
const oldValue = this.value;
|
|
8085
8035
|
const runAwayRect = this.$ele.runAway.getBoundingClientRect();
|
|
8086
8036
|
let displacementX = event.x - (runAwayRect.left + globalThis.screenX);
|
|
8087
8037
|
if (displacementX <= 0) {
|
|
@@ -8095,7 +8045,7 @@ var pops = (function () {
|
|
|
8095
8045
|
this.dragMoveCallBack(event, currentDragX, oldValue);
|
|
8096
8046
|
});
|
|
8097
8047
|
/* 监听触点离开,处理某些情况下,拖拽松开,但是未触发pan事件,可以通过设置这个来关闭tooltip */
|
|
8098
|
-
this.$tooltip.on("at:end", (
|
|
8048
|
+
this.$tooltip.on("at:end", () => {
|
|
8099
8049
|
this.dragEndCallBack(currentDragX);
|
|
8100
8050
|
});
|
|
8101
8051
|
},
|
|
@@ -8119,7 +8069,7 @@ var pops = (function () {
|
|
|
8119
8069
|
return;
|
|
8120
8070
|
}
|
|
8121
8071
|
this.$data.isCheckingStopDragMove = true;
|
|
8122
|
-
|
|
8072
|
+
const interval = setInterval(() => {
|
|
8123
8073
|
if (!this.$data.isMove) {
|
|
8124
8074
|
this.$data.isCheckingStopDragMove = false;
|
|
8125
8075
|
this.closeToolTip();
|
|
@@ -8146,7 +8096,7 @@ var pops = (function () {
|
|
|
8146
8096
|
return PopsPanelSlider.value.toString();
|
|
8147
8097
|
}
|
|
8148
8098
|
}
|
|
8149
|
-
|
|
8099
|
+
const tooltip = PopsTooltip.init({
|
|
8150
8100
|
target: this.$ele.button,
|
|
8151
8101
|
content: getToolTipContent,
|
|
8152
8102
|
zIndex: () => {
|
|
@@ -8160,7 +8110,7 @@ var pops = (function () {
|
|
|
8160
8110
|
passive: true,
|
|
8161
8111
|
},
|
|
8162
8112
|
showBeforeCallBack: () => {
|
|
8163
|
-
|
|
8113
|
+
const isShowHoverTip = typeof formConfig.isShowHoverTip === "function"
|
|
8164
8114
|
? formConfig.isShowHoverTip()
|
|
8165
8115
|
: typeof formConfig.isShowHoverTip === "boolean"
|
|
8166
8116
|
? formConfig.isShowHoverTip
|
|
@@ -8170,7 +8120,7 @@ var pops = (function () {
|
|
|
8170
8120
|
}
|
|
8171
8121
|
this.intervalInit();
|
|
8172
8122
|
},
|
|
8173
|
-
showAfterCallBack: (
|
|
8123
|
+
showAfterCallBack: () => {
|
|
8174
8124
|
tooltip.toolTip.changeContent(getToolTipContent());
|
|
8175
8125
|
},
|
|
8176
8126
|
closeBeforeCallBack: () => {
|
|
@@ -8196,7 +8146,7 @@ var pops = (function () {
|
|
|
8196
8146
|
* @param formConfig
|
|
8197
8147
|
*/
|
|
8198
8148
|
createSectionContainerItem_input(formConfig) {
|
|
8199
|
-
|
|
8149
|
+
const $li = document.createElement("li");
|
|
8200
8150
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8201
8151
|
this.setElementClassName($li, formConfig.className);
|
|
8202
8152
|
this.setElementAttributes($li, formConfig.attributes);
|
|
@@ -8210,7 +8160,7 @@ var pops = (function () {
|
|
|
8210
8160
|
}
|
|
8211
8161
|
/* 左边底部的描述的文字 */
|
|
8212
8162
|
let leftDescriptionText = "";
|
|
8213
|
-
if (
|
|
8163
|
+
if (formConfig.description) {
|
|
8214
8164
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8215
8165
|
}
|
|
8216
8166
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8252,7 +8202,7 @@ var pops = (function () {
|
|
|
8252
8202
|
}
|
|
8253
8203
|
this.setInputChangeEvent();
|
|
8254
8204
|
// 是否禁用复选框
|
|
8255
|
-
|
|
8205
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8256
8206
|
if (disabled) {
|
|
8257
8207
|
this.disable();
|
|
8258
8208
|
}
|
|
@@ -8401,14 +8351,14 @@ var pops = (function () {
|
|
|
8401
8351
|
* @param formConfig
|
|
8402
8352
|
*/
|
|
8403
8353
|
createSectionContainerItem_textarea(formConfig) {
|
|
8404
|
-
|
|
8354
|
+
const $li = document.createElement("li");
|
|
8405
8355
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8406
8356
|
this.setElementClassName($li, formConfig.className);
|
|
8407
8357
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8408
8358
|
this.setElementProps($li, formConfig.props);
|
|
8409
8359
|
/* 左边底部的描述的文字 */
|
|
8410
8360
|
let leftDescriptionText = "";
|
|
8411
|
-
if (
|
|
8361
|
+
if (formConfig.description) {
|
|
8412
8362
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8413
8363
|
}
|
|
8414
8364
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8432,7 +8382,7 @@ var pops = (function () {
|
|
|
8432
8382
|
init() {
|
|
8433
8383
|
this.setValue(this.$data.value);
|
|
8434
8384
|
this.setChangeEvent();
|
|
8435
|
-
|
|
8385
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8436
8386
|
if (disabled) {
|
|
8437
8387
|
this.disable();
|
|
8438
8388
|
}
|
|
@@ -8459,7 +8409,7 @@ var pops = (function () {
|
|
|
8459
8409
|
*/
|
|
8460
8410
|
setChangeEvent() {
|
|
8461
8411
|
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
|
|
8462
|
-
|
|
8412
|
+
const value = this.$ele.textarea.value;
|
|
8463
8413
|
this.$data.value = value;
|
|
8464
8414
|
if (typeof formConfig.callback === "function") {
|
|
8465
8415
|
formConfig.callback(event, value);
|
|
@@ -8478,14 +8428,14 @@ var pops = (function () {
|
|
|
8478
8428
|
*/
|
|
8479
8429
|
createSectionContainerItem_select(formConfig) {
|
|
8480
8430
|
const that = this;
|
|
8481
|
-
|
|
8431
|
+
const $li = document.createElement("li");
|
|
8482
8432
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8483
8433
|
this.setElementClassName($li, formConfig.className);
|
|
8484
8434
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8485
8435
|
this.setElementProps($li, formConfig.props);
|
|
8486
8436
|
/* 左边底部的描述的文字 */
|
|
8487
8437
|
let leftDescriptionText = "";
|
|
8488
|
-
if (
|
|
8438
|
+
if (formConfig.description) {
|
|
8489
8439
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8490
8440
|
}
|
|
8491
8441
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8516,7 +8466,7 @@ var pops = (function () {
|
|
|
8516
8466
|
this.initOption();
|
|
8517
8467
|
this.setChangeEvent();
|
|
8518
8468
|
this.setClickEvent();
|
|
8519
|
-
|
|
8469
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8520
8470
|
if (disabled) {
|
|
8521
8471
|
this.disable();
|
|
8522
8472
|
}
|
|
@@ -8568,7 +8518,7 @@ var pops = (function () {
|
|
|
8568
8518
|
initOption() {
|
|
8569
8519
|
formConfig.data.forEach((dataItem) => {
|
|
8570
8520
|
// 初始化默认选中
|
|
8571
|
-
|
|
8521
|
+
const optionElement = document.createElement("option");
|
|
8572
8522
|
this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
|
|
8573
8523
|
this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
|
|
8574
8524
|
this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
|
|
@@ -8596,9 +8546,9 @@ var pops = (function () {
|
|
|
8596
8546
|
/** 设置禁用状态 */
|
|
8597
8547
|
setOptionDisableStatus(optionElement) {
|
|
8598
8548
|
let disable = false;
|
|
8599
|
-
|
|
8549
|
+
const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
|
|
8600
8550
|
if (optionDisableAttr === "function") {
|
|
8601
|
-
|
|
8551
|
+
const value = this.getNodeValue(optionElement, this.$eleKey.value);
|
|
8602
8552
|
disable = Boolean(optionDisableAttr(value));
|
|
8603
8553
|
}
|
|
8604
8554
|
if (disable) {
|
|
@@ -8610,9 +8560,9 @@ var pops = (function () {
|
|
|
8610
8560
|
},
|
|
8611
8561
|
/** 获取option上的信息 */
|
|
8612
8562
|
getSelectOptionInfo($option) {
|
|
8613
|
-
|
|
8614
|
-
|
|
8615
|
-
|
|
8563
|
+
const optionValue = this.getNodeValue($option, this.$eleKey.value);
|
|
8564
|
+
const optionText = $option.innerText || $option.textContent;
|
|
8565
|
+
const optionForms = this.getNodeValue($option, this.$eleKey.forms);
|
|
8616
8566
|
return {
|
|
8617
8567
|
value: optionValue,
|
|
8618
8568
|
text: optionText,
|
|
@@ -8625,16 +8575,16 @@ var pops = (function () {
|
|
|
8625
8575
|
*/
|
|
8626
8576
|
setChangeEvent() {
|
|
8627
8577
|
popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
|
|
8628
|
-
|
|
8629
|
-
|
|
8578
|
+
const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
|
|
8579
|
+
const selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
8630
8580
|
this.setSelectOptionsDisableStatus();
|
|
8631
8581
|
if (typeof formConfig.callback === "function") {
|
|
8632
8582
|
formConfig.callback(event, selectInfo.value, selectInfo.text);
|
|
8633
8583
|
}
|
|
8634
|
-
|
|
8584
|
+
const forms = typeof selectInfo.forms === "function" ? selectInfo.forms() : selectInfo.forms;
|
|
8635
8585
|
if (Array.isArray(forms)) {
|
|
8636
8586
|
/* 如果成功创建,加入到中间容器中 */
|
|
8637
|
-
|
|
8587
|
+
const childUListClassName = "pops-panel-select-child-forms";
|
|
8638
8588
|
// 移除旧的元素
|
|
8639
8589
|
while ($li.nextElementSibling) {
|
|
8640
8590
|
if ($li.nextElementSibling.classList.contains(childUListClassName)) {
|
|
@@ -8644,7 +8594,7 @@ var pops = (function () {
|
|
|
8644
8594
|
break;
|
|
8645
8595
|
}
|
|
8646
8596
|
}
|
|
8647
|
-
|
|
8597
|
+
const $childUList = document.createElement("ul");
|
|
8648
8598
|
$childUList.className = childUListClassName;
|
|
8649
8599
|
popsDOMUtils.after($li, $childUList);
|
|
8650
8600
|
that.uListContainerAddItem(formConfig, {
|
|
@@ -8675,14 +8625,14 @@ var pops = (function () {
|
|
|
8675
8625
|
* @param formConfig
|
|
8676
8626
|
*/
|
|
8677
8627
|
createSectionContainerItem_select_multiple_new(formConfig) {
|
|
8678
|
-
|
|
8628
|
+
const $li = document.createElement("li");
|
|
8679
8629
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
8680
8630
|
this.setElementClassName($li, formConfig.className);
|
|
8681
8631
|
this.setElementAttributes($li, formConfig.attributes);
|
|
8682
8632
|
this.setElementProps($li, formConfig.props);
|
|
8683
8633
|
/* 左边底部的描述的文字 */
|
|
8684
8634
|
let leftDescriptionText = "";
|
|
8685
|
-
if (
|
|
8635
|
+
if (formConfig.description) {
|
|
8686
8636
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8687
8637
|
}
|
|
8688
8638
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -8745,7 +8695,7 @@ var pops = (function () {
|
|
|
8745
8695
|
this.initPlaceHolder();
|
|
8746
8696
|
this.initTagElement();
|
|
8747
8697
|
this.setSelectContainerClickEvent();
|
|
8748
|
-
|
|
8698
|
+
const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
|
|
8749
8699
|
if (disabled) {
|
|
8750
8700
|
this.disable();
|
|
8751
8701
|
}
|
|
@@ -8783,12 +8733,12 @@ var pops = (function () {
|
|
|
8783
8733
|
placeholder = formConfig.placeholder;
|
|
8784
8734
|
}
|
|
8785
8735
|
else if (typeof formConfig.placeholder === "function") {
|
|
8786
|
-
|
|
8736
|
+
const placeholderResult = formConfig.placeholder();
|
|
8787
8737
|
if (typeof placeholderResult === "string") {
|
|
8788
8738
|
placeholder = placeholderResult;
|
|
8789
8739
|
}
|
|
8790
8740
|
}
|
|
8791
|
-
|
|
8741
|
+
const $placeholder = popsDOMUtils.createElement("span", {
|
|
8792
8742
|
innerText: placeholder,
|
|
8793
8743
|
});
|
|
8794
8744
|
this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
|
|
@@ -8797,10 +8747,10 @@ var pops = (function () {
|
|
|
8797
8747
|
initTagElement() {
|
|
8798
8748
|
// 遍历数据,寻找对应的值
|
|
8799
8749
|
formConfig.data.forEach((dataItem) => {
|
|
8800
|
-
|
|
8750
|
+
const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
|
|
8801
8751
|
if (findValue) {
|
|
8802
8752
|
// 存在对应的值
|
|
8803
|
-
|
|
8753
|
+
const selectedInfo = this.createSelectedTagItem(dataItem);
|
|
8804
8754
|
this.addSelectedTagItem(selectedInfo.$tag);
|
|
8805
8755
|
this.setSelectedItemCloseIconClickEvent({
|
|
8806
8756
|
$tag: selectedInfo.$tag,
|
|
@@ -8837,7 +8787,7 @@ var pops = (function () {
|
|
|
8837
8787
|
const $tagText = $selectedItem.querySelector(".el-select__tags-text");
|
|
8838
8788
|
/** 关闭图标 */
|
|
8839
8789
|
const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
|
|
8840
|
-
|
|
8790
|
+
const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
|
|
8841
8791
|
if (data.isHTML) {
|
|
8842
8792
|
PopsSafeUtils.setSafeHTML($tagText, text);
|
|
8843
8793
|
}
|
|
@@ -8859,7 +8809,7 @@ var pops = (function () {
|
|
|
8859
8809
|
// 去除前面的空白
|
|
8860
8810
|
this.setSectionIsNear();
|
|
8861
8811
|
if (this.$el.$section.contains(this.$el.$selectedInputWrapper)) {
|
|
8862
|
-
|
|
8812
|
+
const $prev = this.$el.$selectedInputWrapper.previousElementSibling;
|
|
8863
8813
|
if ($prev) {
|
|
8864
8814
|
// 存在前一个元素,添加到前面的元素的后面
|
|
8865
8815
|
popsDOMUtils.after($prev, $tag);
|
|
@@ -8870,7 +8820,7 @@ var pops = (function () {
|
|
|
8870
8820
|
}
|
|
8871
8821
|
}
|
|
8872
8822
|
else if (this.$el.$section.contains(this.$el.$selectedPlaceHolderWrapper)) {
|
|
8873
|
-
|
|
8823
|
+
const $prev = this.$el.$selectedPlaceHolderWrapper.previousElementSibling;
|
|
8874
8824
|
if ($prev) {
|
|
8875
8825
|
// 存在前一个元素,添加到前面的元素的后面
|
|
8876
8826
|
popsDOMUtils.after($prev, $tag);
|
|
@@ -8930,7 +8880,7 @@ var pops = (function () {
|
|
|
8930
8880
|
this.removeSelectItemDisabled($select);
|
|
8931
8881
|
}
|
|
8932
8882
|
// 更新选中状态
|
|
8933
|
-
|
|
8883
|
+
const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
|
|
8934
8884
|
if (findValue) {
|
|
8935
8885
|
this.setSelectItemSelected($select);
|
|
8936
8886
|
}
|
|
@@ -8968,8 +8918,8 @@ var pops = (function () {
|
|
|
8968
8918
|
* @param $select 选项元素
|
|
8969
8919
|
*/
|
|
8970
8920
|
addSelectedItemInfo(dataList, $select) {
|
|
8971
|
-
|
|
8972
|
-
|
|
8921
|
+
const info = this.getSelectedItemInfo($select);
|
|
8922
|
+
const findValue = dataList.find((item) => item.value === info.value);
|
|
8973
8923
|
if (!findValue) {
|
|
8974
8924
|
dataList.push({
|
|
8975
8925
|
value: info.value,
|
|
@@ -8993,8 +8943,8 @@ var pops = (function () {
|
|
|
8993
8943
|
* @param $select 选项元素
|
|
8994
8944
|
*/
|
|
8995
8945
|
removeSelectedItemInfo(dataList, $select) {
|
|
8996
|
-
|
|
8997
|
-
|
|
8946
|
+
const info = this.getSelectedItemInfo($select);
|
|
8947
|
+
const findIndex = dataList.findIndex((item) => item.value === info.value);
|
|
8998
8948
|
if (findIndex !== -1) {
|
|
8999
8949
|
dataList.splice(findIndex, 1);
|
|
9000
8950
|
}
|
|
@@ -9009,8 +8959,8 @@ var pops = (function () {
|
|
|
9009
8959
|
getAllSelectItemInfo(onlySelected = true) {
|
|
9010
8960
|
return Array.from(this.$el.$selectContainer?.querySelectorAll(".select-item") ?? [])
|
|
9011
8961
|
.map(($select) => {
|
|
9012
|
-
|
|
9013
|
-
|
|
8962
|
+
const data = this.getSelectedItemInfo($select);
|
|
8963
|
+
const result = {
|
|
9014
8964
|
/** 选项信息数据 */
|
|
9015
8965
|
data: data,
|
|
9016
8966
|
/** 选项元素 */
|
|
@@ -9018,7 +8968,7 @@ var pops = (function () {
|
|
|
9018
8968
|
};
|
|
9019
8969
|
if (onlySelected) {
|
|
9020
8970
|
// 仅选中
|
|
9021
|
-
|
|
8971
|
+
const isSelected = this.isSelectItemSelected($select);
|
|
9022
8972
|
if (isSelected) {
|
|
9023
8973
|
return result;
|
|
9024
8974
|
}
|
|
@@ -9037,7 +8987,7 @@ var pops = (function () {
|
|
|
9037
8987
|
* @param data 选择项的数据
|
|
9038
8988
|
*/
|
|
9039
8989
|
createSelectItemElement(data) {
|
|
9040
|
-
|
|
8990
|
+
const $select = popsDOMUtils.createElement("li", {
|
|
9041
8991
|
className: "select-item",
|
|
9042
8992
|
innerHTML: /*html*/ `
|
|
9043
8993
|
<span class="select-item-text"></span>
|
|
@@ -9053,8 +9003,8 @@ var pops = (function () {
|
|
|
9053
9003
|
* @param $select 选择项元素
|
|
9054
9004
|
*/
|
|
9055
9005
|
setSelectItemText(data, $select) {
|
|
9056
|
-
|
|
9057
|
-
|
|
9006
|
+
const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
|
|
9007
|
+
const $selectSpan = $select.querySelector(".select-item-text");
|
|
9058
9008
|
if (data.isHTML) {
|
|
9059
9009
|
PopsSafeUtils.setSafeHTML($selectSpan, text);
|
|
9060
9010
|
}
|
|
@@ -9097,8 +9047,8 @@ var pops = (function () {
|
|
|
9097
9047
|
return;
|
|
9098
9048
|
}
|
|
9099
9049
|
if (typeof formConfig.clickCallBack === "function") {
|
|
9100
|
-
|
|
9101
|
-
|
|
9050
|
+
const allSelectedInfo = this.getAllSelectItemInfo().map((it) => it.data);
|
|
9051
|
+
const clickResult = formConfig.clickCallBack(event, allSelectedInfo);
|
|
9102
9052
|
if (typeof clickResult === "boolean" && !clickResult) {
|
|
9103
9053
|
return;
|
|
9104
9054
|
}
|
|
@@ -9119,14 +9069,14 @@ var pops = (function () {
|
|
|
9119
9069
|
*/
|
|
9120
9070
|
setSelectContainerClickEvent() {
|
|
9121
9071
|
const that = this;
|
|
9122
|
-
popsDOMUtils.on(this.$el.$container, "click", (
|
|
9072
|
+
popsDOMUtils.on(this.$el.$container, "click", () => {
|
|
9123
9073
|
if (this.isDisabled()) {
|
|
9124
9074
|
return;
|
|
9125
9075
|
}
|
|
9126
9076
|
/** 弹窗的选中的值 */
|
|
9127
|
-
|
|
9128
|
-
|
|
9129
|
-
|
|
9077
|
+
const selectedInfo = that.$data.selectInfo;
|
|
9078
|
+
const { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
|
|
9079
|
+
const confirmDetails = popsUtils.assign({
|
|
9130
9080
|
title: {
|
|
9131
9081
|
text: "请勾选需要选择的选项",
|
|
9132
9082
|
position: "center",
|
|
@@ -9143,7 +9093,7 @@ var pops = (function () {
|
|
|
9143
9093
|
},
|
|
9144
9094
|
close: {
|
|
9145
9095
|
enable: true,
|
|
9146
|
-
callback(details
|
|
9096
|
+
callback(details) {
|
|
9147
9097
|
that.$data.selectInfo = [...selectedInfo];
|
|
9148
9098
|
that.updateSelectTagItem();
|
|
9149
9099
|
that.$el.$selectContainer = null;
|
|
@@ -9153,7 +9103,7 @@ var pops = (function () {
|
|
|
9153
9103
|
},
|
|
9154
9104
|
mask: {
|
|
9155
9105
|
enable: true,
|
|
9156
|
-
clickCallBack(originalRun
|
|
9106
|
+
clickCallBack(originalRun) {
|
|
9157
9107
|
originalRun();
|
|
9158
9108
|
that.$data.selectInfo = [...selectedInfo];
|
|
9159
9109
|
that.updateSelectTagItem();
|
|
@@ -9232,12 +9182,12 @@ var pops = (function () {
|
|
|
9232
9182
|
${style || ""}
|
|
9233
9183
|
`,
|
|
9234
9184
|
}, userConfirmDetails);
|
|
9235
|
-
|
|
9236
|
-
|
|
9185
|
+
const $dialog = PopsAlert.init(confirmDetails);
|
|
9186
|
+
const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
|
|
9237
9187
|
this.$el.$selectContainer = $selectContainer;
|
|
9238
9188
|
// 配置选项元素
|
|
9239
9189
|
formConfig.data.forEach((item) => {
|
|
9240
|
-
|
|
9190
|
+
const $select = this.createSelectItemElement(item);
|
|
9241
9191
|
// 添加到confirm中
|
|
9242
9192
|
$selectContainer.appendChild($select);
|
|
9243
9193
|
// 设置每一项的点击事件
|
|
@@ -9258,7 +9208,7 @@ var pops = (function () {
|
|
|
9258
9208
|
return;
|
|
9259
9209
|
}
|
|
9260
9210
|
if (typeof formConfig.closeIconClickCallBack === "function") {
|
|
9261
|
-
|
|
9211
|
+
const result = formConfig.closeIconClickCallBack(event, {
|
|
9262
9212
|
$tag: data.$tag,
|
|
9263
9213
|
$closeIcon: data.$closeIcon,
|
|
9264
9214
|
value: data.value,
|
|
@@ -9367,14 +9317,14 @@ var pops = (function () {
|
|
|
9367
9317
|
* @param formConfig
|
|
9368
9318
|
*/
|
|
9369
9319
|
createSectionContainerItem_button(formConfig) {
|
|
9370
|
-
|
|
9320
|
+
const $li = document.createElement("li");
|
|
9371
9321
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
9372
9322
|
this.setElementClassName($li, formConfig.className);
|
|
9373
9323
|
this.setElementAttributes($li, formConfig.attributes);
|
|
9374
9324
|
this.setElementProps($li, formConfig.props);
|
|
9375
9325
|
/* 左边底部的描述的文字 */
|
|
9376
9326
|
let leftDescriptionText = "";
|
|
9377
|
-
if (
|
|
9327
|
+
if (formConfig.description) {
|
|
9378
9328
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9379
9329
|
}
|
|
9380
9330
|
PopsSafeUtils.setSafeHTML($li,
|
|
@@ -9515,8 +9465,8 @@ var pops = (function () {
|
|
|
9515
9465
|
* @param formConfig
|
|
9516
9466
|
*/
|
|
9517
9467
|
createSectionContainerItem_deepMenu(formConfig) {
|
|
9518
|
-
|
|
9519
|
-
|
|
9468
|
+
const that = this;
|
|
9469
|
+
const $li = document.createElement("li");
|
|
9520
9470
|
popsDOMUtils.addClassName($li, "pops-panel-deepMenu-nav-item");
|
|
9521
9471
|
Reflect.set($li, "__formConfig__", formConfig);
|
|
9522
9472
|
this.setElementClassName($li, formConfig.className);
|
|
@@ -9526,12 +9476,12 @@ var pops = (function () {
|
|
|
9526
9476
|
this.setElementProps($li, formConfig.props);
|
|
9527
9477
|
/* 左边底部的描述的文字 */
|
|
9528
9478
|
let leftDescriptionText = "";
|
|
9529
|
-
if (
|
|
9479
|
+
if (formConfig.description) {
|
|
9530
9480
|
// 设置描述
|
|
9531
9481
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9532
9482
|
}
|
|
9533
9483
|
// 箭头图标
|
|
9534
|
-
|
|
9484
|
+
const arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean" ? formConfig.arrowRightIcon : true;
|
|
9535
9485
|
let arrowRightIconHTML = "";
|
|
9536
9486
|
if (arrowRightIcon) {
|
|
9537
9487
|
arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${PopsIcon.getIcon("arrowRight")}</i>`;
|
|
@@ -9562,17 +9512,17 @@ var pops = (function () {
|
|
|
9562
9512
|
* @param formItemConfig
|
|
9563
9513
|
*/
|
|
9564
9514
|
initFormItem($container, formItemConfig) {
|
|
9565
|
-
|
|
9515
|
+
const formConfig_forms = formItemConfig;
|
|
9566
9516
|
if (formConfig_forms.type === "forms") {
|
|
9567
|
-
|
|
9517
|
+
const childForms = formConfig_forms["forms"];
|
|
9568
9518
|
/* 每一项<li>元素 */
|
|
9569
|
-
|
|
9519
|
+
const formContainerListElement = document.createElement("li");
|
|
9570
9520
|
/* 每一项<li>内的子<ul>元素 */
|
|
9571
|
-
|
|
9521
|
+
const formContainerULElement = document.createElement("ul");
|
|
9572
9522
|
formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
|
|
9573
9523
|
formContainerListElement.classList.add("pops-panel-forms-container-item");
|
|
9574
9524
|
/* 区域头部的文字 */
|
|
9575
|
-
|
|
9525
|
+
const formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
9576
9526
|
className: "pops-panel-forms-container-item-header-text",
|
|
9577
9527
|
});
|
|
9578
9528
|
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
@@ -9589,7 +9539,7 @@ var pops = (function () {
|
|
|
9589
9539
|
</i>
|
|
9590
9540
|
`);
|
|
9591
9541
|
// 添加点击事件
|
|
9592
|
-
popsDOMUtils.on(formHeaderDivElement, "click", (
|
|
9542
|
+
popsDOMUtils.on(formHeaderDivElement, "click", () => {
|
|
9593
9543
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
9594
9544
|
formContainerListElement.removeAttribute("data-fold-enable");
|
|
9595
9545
|
}
|
|
@@ -9644,26 +9594,26 @@ var pops = (function () {
|
|
|
9644
9594
|
*/
|
|
9645
9595
|
async gotoDeepMenu(event, liElement) {
|
|
9646
9596
|
/** 当前所在的容器 */
|
|
9647
|
-
|
|
9597
|
+
const $currentSection = liElement.closest("section.pops-panel-container");
|
|
9648
9598
|
// 子菜单的容器
|
|
9649
|
-
|
|
9599
|
+
const $deepMenuSection = popsDOMUtils.createElement("section", {
|
|
9650
9600
|
className: "pops-panel-container pops-panel-deepMenu-container",
|
|
9651
9601
|
});
|
|
9652
9602
|
Reflect.set($deepMenuSection, "__formConfig__", formConfig);
|
|
9653
|
-
|
|
9603
|
+
const $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
|
|
9654
9604
|
className: "pops-panel-container-header-ul pops-panel-deepMenu-container-header-ul",
|
|
9655
9605
|
});
|
|
9656
|
-
|
|
9606
|
+
const $deepMenuMain = popsDOMUtils.createElement("ul", {
|
|
9657
9607
|
className: "pops-panel-container-main-ul",
|
|
9658
9608
|
});
|
|
9659
9609
|
// 标题文字
|
|
9660
|
-
|
|
9661
|
-
|
|
9610
|
+
const headerTitleText = formConfig.headerTitle ?? formConfig.text;
|
|
9611
|
+
const $header = popsDOMUtils.createElement("li", {
|
|
9662
9612
|
className: "pops-panel-container-header-title-text pops-panel-deepMenu-container-header",
|
|
9663
9613
|
innerHTML: /*html*/ `<p class="pops-panel-deepMenu-container-header-title-text">${headerTitleText}</p>`,
|
|
9664
9614
|
});
|
|
9665
9615
|
// 返回箭头
|
|
9666
|
-
|
|
9616
|
+
const $headerLeftArrow = popsDOMUtils.createElement("i", {
|
|
9667
9617
|
className: "pops-panel-deepMenu-container-left-arrow-icon",
|
|
9668
9618
|
innerHTML: PopsIcon.getIcon("arrowLeft"),
|
|
9669
9619
|
});
|
|
@@ -9728,7 +9678,7 @@ var pops = (function () {
|
|
|
9728
9678
|
$deepMenuSection.appendChild($deepMenuMain);
|
|
9729
9679
|
if (formConfig.forms && Array.isArray(formConfig.forms)) {
|
|
9730
9680
|
for (let index = 0; index < formConfig.forms.length; index++) {
|
|
9731
|
-
|
|
9681
|
+
const formItemConfig = formConfig.forms[index];
|
|
9732
9682
|
this.initFormItem($deepMenuMain, formItemConfig);
|
|
9733
9683
|
}
|
|
9734
9684
|
}
|
|
@@ -9766,7 +9716,7 @@ var pops = (function () {
|
|
|
9766
9716
|
setLiClickEvent() {
|
|
9767
9717
|
popsDOMUtils.on($li, "click", void 0, async (event) => {
|
|
9768
9718
|
if (typeof formConfig.clickCallBack === "function") {
|
|
9769
|
-
|
|
9719
|
+
const result = await formConfig.clickCallBack(event, formConfig);
|
|
9770
9720
|
if (result) {
|
|
9771
9721
|
return;
|
|
9772
9722
|
}
|
|
@@ -9799,7 +9749,7 @@ var pops = (function () {
|
|
|
9799
9749
|
*/
|
|
9800
9750
|
createSectionContainerItem(formConfig) {
|
|
9801
9751
|
/** 配置项的类型 */
|
|
9802
|
-
|
|
9752
|
+
const formType = formConfig.type;
|
|
9803
9753
|
if (formType === "switch") {
|
|
9804
9754
|
return this.createSectionContainerItem_switch(formConfig);
|
|
9805
9755
|
}
|
|
@@ -9837,18 +9787,18 @@ var pops = (function () {
|
|
|
9837
9787
|
* @param formConfig
|
|
9838
9788
|
*/
|
|
9839
9789
|
createSectionContainerItem_forms(formConfig) {
|
|
9840
|
-
|
|
9841
|
-
|
|
9790
|
+
const that = this;
|
|
9791
|
+
const formConfig_forms = formConfig;
|
|
9842
9792
|
if (formConfig_forms.type === "forms") {
|
|
9843
|
-
|
|
9793
|
+
const childForms = formConfig["forms"];
|
|
9844
9794
|
/* 每一项<li>元素 */
|
|
9845
|
-
|
|
9795
|
+
const formContainerListElement = document.createElement("li");
|
|
9846
9796
|
/* 每一项<li>内的子<ul>元素 */
|
|
9847
|
-
|
|
9797
|
+
const formContainerULElement = document.createElement("ul");
|
|
9848
9798
|
formContainerListElement.classList.add("pops-panel-forms-container-item");
|
|
9849
9799
|
formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
|
|
9850
9800
|
/* 区域头部的文字 */
|
|
9851
|
-
|
|
9801
|
+
const formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
9852
9802
|
className: "pops-panel-forms-container-item-header-text",
|
|
9853
9803
|
});
|
|
9854
9804
|
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
@@ -9864,7 +9814,7 @@ var pops = (function () {
|
|
|
9864
9814
|
</i>
|
|
9865
9815
|
`);
|
|
9866
9816
|
// 添加点击事件
|
|
9867
|
-
popsDOMUtils.on(formHeaderDivElement, "click", (
|
|
9817
|
+
popsDOMUtils.on(formHeaderDivElement, "click", () => {
|
|
9868
9818
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
9869
9819
|
formContainerListElement.removeAttribute("data-fold-enable");
|
|
9870
9820
|
}
|
|
@@ -9916,7 +9866,7 @@ var pops = (function () {
|
|
|
9916
9866
|
* 触发触发渲染右侧容器的事件
|
|
9917
9867
|
*/
|
|
9918
9868
|
triggerRenderRightContainer($container) {
|
|
9919
|
-
|
|
9869
|
+
const __formConfig__ = Reflect.get($container, "__formConfig__");
|
|
9920
9870
|
this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
|
|
9921
9871
|
detail: {
|
|
9922
9872
|
formConfig: __formConfig__,
|
|
@@ -9929,7 +9879,7 @@ var pops = (function () {
|
|
|
9929
9879
|
* @param containerOptions
|
|
9930
9880
|
*/
|
|
9931
9881
|
uListContainerAddItem(formConfig, containerOptions) {
|
|
9932
|
-
|
|
9882
|
+
const itemLiElement = this.createSectionContainerItem(formConfig);
|
|
9933
9883
|
if (itemLiElement) {
|
|
9934
9884
|
containerOptions["ulElement"].appendChild(itemLiElement);
|
|
9935
9885
|
}
|
|
@@ -9948,23 +9898,23 @@ var pops = (function () {
|
|
|
9948
9898
|
setAsideItemClickEvent(asideLiElement, asideConfig) {
|
|
9949
9899
|
popsDOMUtils.on(asideLiElement, "click", async (event) => {
|
|
9950
9900
|
if (typeof asideConfig.clickFirstCallback === "function") {
|
|
9951
|
-
|
|
9901
|
+
const clickFirstCallbackResult = await asideConfig.clickFirstCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9952
9902
|
if (typeof clickFirstCallbackResult === "boolean" && !clickFirstCallbackResult) {
|
|
9953
9903
|
return;
|
|
9954
9904
|
}
|
|
9955
9905
|
}
|
|
9956
9906
|
this.clearContainer();
|
|
9957
|
-
|
|
9907
|
+
const rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
|
|
9958
9908
|
Reflect.set(this.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
|
|
9959
9909
|
popsDOMUtils.cssShow(this.$el.$contentSectionContainer);
|
|
9960
9910
|
this.clearAsideItemIsVisited();
|
|
9961
9911
|
this.setAsideItemIsVisited(asideLiElement);
|
|
9962
9912
|
/* 顶部标题栏,存在就设置 */
|
|
9963
|
-
|
|
9913
|
+
const title = typeof asideConfig.title === "function" ? asideConfig.title() : asideConfig.title;
|
|
9964
9914
|
let headerTitleText = typeof asideConfig.headerTitle === "function" ? asideConfig.headerTitle() : asideConfig.headerTitle;
|
|
9965
9915
|
headerTitleText = headerTitleText ?? title;
|
|
9966
9916
|
if (typeof headerTitleText === "string" && headerTitleText.trim() !== "") {
|
|
9967
|
-
|
|
9917
|
+
const $containerHeaderTitle = document.createElement("li");
|
|
9968
9918
|
$containerHeaderTitle.classList.add("pops-panel-container-header-title-text");
|
|
9969
9919
|
Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
|
|
9970
9920
|
PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
|
|
@@ -9975,7 +9925,7 @@ var pops = (function () {
|
|
|
9975
9925
|
});
|
|
9976
9926
|
if (typeof asideConfig.clickCallback === "function") {
|
|
9977
9927
|
/* 执行回调 */
|
|
9978
|
-
|
|
9928
|
+
const asideClickCallbackResult = await asideConfig.clickCallback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9979
9929
|
if (typeof asideClickCallbackResult === "boolean" && !asideClickCallbackResult) {
|
|
9980
9930
|
return;
|
|
9981
9931
|
}
|
|
@@ -10030,11 +9980,11 @@ var pops = (function () {
|
|
|
10030
9980
|
},
|
|
10031
9981
|
]);
|
|
10032
9982
|
// 先把z-index提取出来
|
|
10033
|
-
|
|
10034
|
-
|
|
10035
|
-
|
|
10036
|
-
|
|
10037
|
-
|
|
9983
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
9984
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
9985
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
9986
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
9987
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
10038
9988
|
/*html*/ `
|
|
10039
9989
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10040
9990
|
? config.title.text
|
|
@@ -10054,9 +10004,9 @@ var pops = (function () {
|
|
|
10054
10004
|
/**
|
|
10055
10005
|
* 弹窗的主元素,包括动画层
|
|
10056
10006
|
*/
|
|
10057
|
-
|
|
10007
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
10058
10008
|
/* 结构元素 */
|
|
10059
|
-
|
|
10009
|
+
const { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, panelSectionWrapper: $panelSectionWrapper, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10060
10010
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10061
10011
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10062
10012
|
}
|
|
@@ -10067,10 +10017,10 @@ var pops = (function () {
|
|
|
10067
10017
|
/**
|
|
10068
10018
|
* 已创建的元素列表
|
|
10069
10019
|
*/
|
|
10070
|
-
|
|
10020
|
+
const isCreatedElementList = [$anim];
|
|
10071
10021
|
/* 遮罩层元素 */
|
|
10072
10022
|
if (config.mask.enable) {
|
|
10073
|
-
|
|
10023
|
+
const { maskElement } = PopsHandler.handleMask({
|
|
10074
10024
|
type: popsType,
|
|
10075
10025
|
guid: guid,
|
|
10076
10026
|
config: config,
|
|
@@ -10081,7 +10031,7 @@ var pops = (function () {
|
|
|
10081
10031
|
isCreatedElementList.push($mask);
|
|
10082
10032
|
}
|
|
10083
10033
|
/* 处理返回的配置 */
|
|
10084
|
-
|
|
10034
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10085
10035
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10086
10036
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10087
10037
|
/* 创建到页面中 */
|
|
@@ -10094,7 +10044,7 @@ var pops = (function () {
|
|
|
10094
10044
|
if ($mask != null) {
|
|
10095
10045
|
$anim.after($mask);
|
|
10096
10046
|
}
|
|
10097
|
-
|
|
10047
|
+
const panelHandlerComponents = PanelHandlerComponents();
|
|
10098
10048
|
/**
|
|
10099
10049
|
* 处理内部配置
|
|
10100
10050
|
*/
|
|
@@ -10126,7 +10076,7 @@ var pops = (function () {
|
|
|
10126
10076
|
endCallBack: config.dragEndCallBack,
|
|
10127
10077
|
});
|
|
10128
10078
|
}
|
|
10129
|
-
|
|
10079
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
10130
10080
|
return {
|
|
10131
10081
|
...result,
|
|
10132
10082
|
addEventListener: (event, listener, options) => {
|
|
@@ -10272,13 +10222,13 @@ var pops = (function () {
|
|
|
10272
10222
|
},
|
|
10273
10223
|
]);
|
|
10274
10224
|
// 先把z-index提取出来
|
|
10275
|
-
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10281
|
-
|
|
10225
|
+
const zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10226
|
+
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
10227
|
+
const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
|
|
10228
|
+
const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
|
|
10229
|
+
const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
|
|
10230
|
+
const { contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
|
|
10231
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
10282
10232
|
/*html*/ `
|
|
10283
10233
|
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10284
10234
|
? config.title.text
|
|
@@ -10295,8 +10245,8 @@ var pops = (function () {
|
|
|
10295
10245
|
/**
|
|
10296
10246
|
* 弹窗的主元素,包括动画层
|
|
10297
10247
|
*/
|
|
10298
|
-
|
|
10299
|
-
|
|
10248
|
+
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
10249
|
+
const { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10300
10250
|
/**
|
|
10301
10251
|
* 遮罩层元素
|
|
10302
10252
|
*/
|
|
@@ -10304,10 +10254,10 @@ var pops = (function () {
|
|
|
10304
10254
|
/**
|
|
10305
10255
|
* 已创建的元素列表
|
|
10306
10256
|
*/
|
|
10307
|
-
|
|
10257
|
+
const elementList = [$anim];
|
|
10308
10258
|
if (config.mask.enable) {
|
|
10309
10259
|
// 启用遮罩层
|
|
10310
|
-
|
|
10260
|
+
const _handleMask_ = PopsHandler.handleMask({
|
|
10311
10261
|
type: popsType,
|
|
10312
10262
|
guid: guid,
|
|
10313
10263
|
config: config,
|
|
@@ -10317,7 +10267,7 @@ var pops = (function () {
|
|
|
10317
10267
|
$mask = _handleMask_.maskElement;
|
|
10318
10268
|
elementList.push($mask);
|
|
10319
10269
|
}
|
|
10320
|
-
|
|
10270
|
+
const eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10321
10271
|
/* 输入框赋值初始值 */
|
|
10322
10272
|
$input.value = config.content.text;
|
|
10323
10273
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -10359,7 +10309,7 @@ var pops = (function () {
|
|
|
10359
10309
|
if (config.content.select) {
|
|
10360
10310
|
$input.select();
|
|
10361
10311
|
}
|
|
10362
|
-
|
|
10312
|
+
const result = PopsHandler.handleResultDetails(eventDetails);
|
|
10363
10313
|
return result;
|
|
10364
10314
|
},
|
|
10365
10315
|
};
|
|
@@ -10473,8 +10423,7 @@ var pops = (function () {
|
|
|
10473
10423
|
throw new Error("config.target 不能为空");
|
|
10474
10424
|
}
|
|
10475
10425
|
if (details.data) {
|
|
10476
|
-
|
|
10477
|
-
config.data = details.data;
|
|
10426
|
+
Reflect.set(config, "data", details.data);
|
|
10478
10427
|
}
|
|
10479
10428
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10480
10429
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -10496,7 +10445,7 @@ var pops = (function () {
|
|
|
10496
10445
|
},
|
|
10497
10446
|
]);
|
|
10498
10447
|
if (config.style != null) {
|
|
10499
|
-
|
|
10448
|
+
const cssNode = popsDOMUtils.createElement("style", {
|
|
10500
10449
|
innerHTML: config.style,
|
|
10501
10450
|
}, {
|
|
10502
10451
|
type: "text/css",
|
|
@@ -10516,7 +10465,7 @@ var pops = (function () {
|
|
|
10516
10465
|
if (!PopsContextMenu.rootElement) {
|
|
10517
10466
|
return;
|
|
10518
10467
|
}
|
|
10519
|
-
|
|
10468
|
+
const $click = event.target;
|
|
10520
10469
|
if ($click.closest(`.pops-${popsType}`)) {
|
|
10521
10470
|
return;
|
|
10522
10471
|
}
|
|
@@ -10533,7 +10482,7 @@ var pops = (function () {
|
|
|
10533
10482
|
if (!PopsContextMenu.rootElement) {
|
|
10534
10483
|
return;
|
|
10535
10484
|
}
|
|
10536
|
-
|
|
10485
|
+
const $click = event.target;
|
|
10537
10486
|
if ($click.closest(`.pops-${popsType}`)) {
|
|
10538
10487
|
return;
|
|
10539
10488
|
}
|
|
@@ -10584,7 +10533,7 @@ var pops = (function () {
|
|
|
10584
10533
|
if (PopsContextMenu.rootElement) {
|
|
10585
10534
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10586
10535
|
}
|
|
10587
|
-
|
|
10536
|
+
const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10588
10537
|
PopsContextMenu.rootElement = rootElement;
|
|
10589
10538
|
if (config.only) {
|
|
10590
10539
|
PopsHandler.handlePush(popsType, {
|
|
@@ -10623,7 +10572,8 @@ var pops = (function () {
|
|
|
10623
10572
|
/**
|
|
10624
10573
|
* 动画结束触发的事件
|
|
10625
10574
|
*/
|
|
10626
|
-
|
|
10575
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
10576
|
+
const transitionEndEvent = (event) => {
|
|
10627
10577
|
popsDOMUtils.off($menu, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10628
10578
|
capture: true,
|
|
10629
10579
|
});
|
|
@@ -10663,7 +10613,7 @@ var pops = (function () {
|
|
|
10663
10613
|
if (rootElementMenuData?.root) {
|
|
10664
10614
|
rootElement = rootElementMenuData.root;
|
|
10665
10615
|
}
|
|
10666
|
-
|
|
10616
|
+
const childMenuList = rootElementMenuData.child;
|
|
10667
10617
|
childMenuList.forEach((childMenuElement) => {
|
|
10668
10618
|
this.animationCloseMenu(childMenuElement);
|
|
10669
10619
|
});
|
|
@@ -10675,11 +10625,11 @@ var pops = (function () {
|
|
|
10675
10625
|
* @param isChildren 是否是rightClickMenu的某一项的子菜单
|
|
10676
10626
|
*/
|
|
10677
10627
|
createMenuContainerElement(isChildren) {
|
|
10678
|
-
|
|
10628
|
+
const $menu = popsDOMUtils.createElement("div", {
|
|
10679
10629
|
className: `pops-${popsType}`,
|
|
10680
10630
|
innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
|
|
10681
10631
|
});
|
|
10682
|
-
|
|
10632
|
+
const zIndex = this.getMenuZIndex();
|
|
10683
10633
|
if (zIndex > 10000) {
|
|
10684
10634
|
$menu.style.zIndex = zIndex.toString();
|
|
10685
10635
|
}
|
|
@@ -10710,26 +10660,26 @@ var pops = (function () {
|
|
|
10710
10660
|
* @param isMainMenu 是否是主菜单
|
|
10711
10661
|
*/
|
|
10712
10662
|
getOffset(menuElement, mousePosition, parentInfo) {
|
|
10713
|
-
|
|
10663
|
+
const result = {
|
|
10714
10664
|
top: 0,
|
|
10715
10665
|
right: 0,
|
|
10716
10666
|
bottom: 0,
|
|
10717
10667
|
left: 0,
|
|
10718
10668
|
};
|
|
10719
|
-
|
|
10720
|
-
|
|
10669
|
+
const menuElementWidth = popsDOMUtils.width(menuElement);
|
|
10670
|
+
const menuElementHeight = popsDOMUtils.height(menuElement);
|
|
10721
10671
|
/**
|
|
10722
10672
|
* 限制的间隙距离
|
|
10723
10673
|
*/
|
|
10724
|
-
|
|
10725
|
-
|
|
10726
|
-
|
|
10674
|
+
const limitDistance = 1;
|
|
10675
|
+
const maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
|
|
10676
|
+
const maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
|
|
10727
10677
|
/* left最大偏移 */
|
|
10728
|
-
|
|
10678
|
+
const maxLeftOffset = maxPageLeftOffset - menuElementWidth;
|
|
10729
10679
|
/* top最大偏移 */
|
|
10730
|
-
|
|
10731
|
-
|
|
10732
|
-
|
|
10680
|
+
const maxTopOffset = maxPageTopOffset - menuElementHeight;
|
|
10681
|
+
const chileMenuLeftOrRightDistance = config.chileMenuLeftOrRightDistance;
|
|
10682
|
+
const childMenuTopOrBottomDistance = config.childMenuTopOrBottomDistance;
|
|
10733
10683
|
let currentLeftOffset = mousePosition.x;
|
|
10734
10684
|
let currentTopOffset = mousePosition.y;
|
|
10735
10685
|
currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
|
|
@@ -10739,9 +10689,8 @@ var pops = (function () {
|
|
|
10739
10689
|
// 偏移计算方式就是父菜单的右偏移+父菜单的宽度
|
|
10740
10690
|
if (parentInfo) {
|
|
10741
10691
|
// 子菜单
|
|
10742
|
-
|
|
10743
|
-
currentLeftOffset =
|
|
10744
|
-
maxPageLeftOffset - mainMenuOffset.left - chileMenuLeftOrRightDistance + limitDistance;
|
|
10692
|
+
const mainMenuOffset = popsDOMUtils.offset(parentInfo.$menu);
|
|
10693
|
+
currentLeftOffset = maxPageLeftOffset - mainMenuOffset.left - chileMenuLeftOrRightDistance + limitDistance;
|
|
10745
10694
|
}
|
|
10746
10695
|
else {
|
|
10747
10696
|
// 主菜单 默认的
|
|
@@ -10769,7 +10718,7 @@ var pops = (function () {
|
|
|
10769
10718
|
// 超过,那么子菜单将会在放在上面
|
|
10770
10719
|
if (parentInfo) {
|
|
10771
10720
|
// 以项的top偏移为基准
|
|
10772
|
-
|
|
10721
|
+
const parentItemOffset = popsDOMUtils.offset(parentInfo.$parentItem, false);
|
|
10773
10722
|
currentTopOffset =
|
|
10774
10723
|
maxPageTopOffset - parentItemOffset.bottom - childMenuTopOrBottomDistance + limitDistance;
|
|
10775
10724
|
}
|
|
@@ -10800,7 +10749,7 @@ var pops = (function () {
|
|
|
10800
10749
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10801
10750
|
*/
|
|
10802
10751
|
showMenu(menuEvent, _config_, menuListenerRootNode) {
|
|
10803
|
-
|
|
10752
|
+
const menuElement = this.createMenuContainerElement(false);
|
|
10804
10753
|
Reflect.set(menuElement, "__menuData__", {
|
|
10805
10754
|
child: [],
|
|
10806
10755
|
});
|
|
@@ -10828,19 +10777,19 @@ var pops = (function () {
|
|
|
10828
10777
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10829
10778
|
*/
|
|
10830
10779
|
showClildMenu(menuEvent, posInfo, _config_, rootElement, targetLiElement, menuListenerRootNode) {
|
|
10831
|
-
|
|
10780
|
+
const menuElement = this.createMenuContainerElement(true);
|
|
10832
10781
|
Reflect.set(menuElement, "__menuData__", {
|
|
10833
10782
|
parent: targetLiElement,
|
|
10834
10783
|
root: rootElement,
|
|
10835
10784
|
});
|
|
10836
10785
|
// 根菜单数据
|
|
10837
|
-
|
|
10786
|
+
const rootElementMenuData = Reflect.get(rootElement, "__menuData__");
|
|
10838
10787
|
rootElementMenuData.child.push(menuElement);
|
|
10839
10788
|
// 添加子元素
|
|
10840
10789
|
PopsContextMenu.addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode);
|
|
10841
10790
|
// 添加到页面
|
|
10842
10791
|
popsDOMUtils.append($shadowRoot, menuElement);
|
|
10843
|
-
|
|
10792
|
+
const $parentMenu = targetLiElement.closest(".pops-rightClickMenu");
|
|
10844
10793
|
this.handlerShowMenuCSS(menuElement, posInfo, {
|
|
10845
10794
|
$menu: $parentMenu,
|
|
10846
10795
|
$parentItem: targetLiElement,
|
|
@@ -10854,7 +10803,7 @@ var pops = (function () {
|
|
|
10854
10803
|
* @param parentInfo 配置子菜单的父级信息
|
|
10855
10804
|
*/
|
|
10856
10805
|
handlerShowMenuCSS($menu, posInfo, parentInfo) {
|
|
10857
|
-
|
|
10806
|
+
const offset = this.getOffset($menu, {
|
|
10858
10807
|
x: posInfo.clientX,
|
|
10859
10808
|
y: posInfo.clientY,
|
|
10860
10809
|
}, parentInfo);
|
|
@@ -10880,14 +10829,14 @@ var pops = (function () {
|
|
|
10880
10829
|
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10881
10830
|
*/
|
|
10882
10831
|
addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode) {
|
|
10883
|
-
|
|
10884
|
-
|
|
10832
|
+
const menuEventTarget = menuEvent.target;
|
|
10833
|
+
const menuULElement = menuElement.querySelector("ul");
|
|
10885
10834
|
_config_.forEach((item) => {
|
|
10886
|
-
|
|
10835
|
+
const menuLiElement = popsDOMUtils.parseTextToDOM(`<li></li>`);
|
|
10887
10836
|
/* 判断有无图标,有就添加进去 */
|
|
10888
10837
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10889
|
-
|
|
10890
|
-
|
|
10838
|
+
const iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10839
|
+
const iconElement = popsDOMUtils.parseTextToDOM(
|
|
10891
10840
|
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10892
10841
|
menuLiElement.appendChild(iconElement);
|
|
10893
10842
|
}
|
|
@@ -10912,13 +10861,13 @@ var pops = (function () {
|
|
|
10912
10861
|
}
|
|
10913
10862
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10914
10863
|
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10915
|
-
|
|
10864
|
+
const li_menuData = Reflect.get(liElement, "__menuData__");
|
|
10916
10865
|
if (!li_menuData) {
|
|
10917
10866
|
return;
|
|
10918
10867
|
}
|
|
10919
10868
|
function removeElement(element) {
|
|
10920
10869
|
element.querySelectorAll("ul li").forEach(($ele) => {
|
|
10921
|
-
|
|
10870
|
+
const menuData = Reflect.get($ele, "__menuData__");
|
|
10922
10871
|
if (menuData?.child) {
|
|
10923
10872
|
removeElement(menuData.child);
|
|
10924
10873
|
}
|
|
@@ -10929,9 +10878,9 @@ var pops = (function () {
|
|
|
10929
10878
|
removeElement(li_menuData.child);
|
|
10930
10879
|
});
|
|
10931
10880
|
/* 清理根元素上的children不存在于页面中的元素 */
|
|
10932
|
-
|
|
10881
|
+
const root_menuData = Reflect.get(rootElement, "__menuData__");
|
|
10933
10882
|
for (let index = 0; index < root_menuData.child.length; index++) {
|
|
10934
|
-
|
|
10883
|
+
const element = root_menuData.child[index];
|
|
10935
10884
|
if (!$shadowRoot.contains(element)) {
|
|
10936
10885
|
root_menuData.child.splice(index, 1);
|
|
10937
10886
|
index--;
|
|
@@ -10941,8 +10890,8 @@ var pops = (function () {
|
|
|
10941
10890
|
if (!item.item) {
|
|
10942
10891
|
return;
|
|
10943
10892
|
}
|
|
10944
|
-
|
|
10945
|
-
|
|
10893
|
+
const rect = menuLiElement.getBoundingClientRect();
|
|
10894
|
+
const childMenu = PopsContextMenu.showClildMenu(menuEvent, {
|
|
10946
10895
|
clientX: rect.left + popsDOMUtils.outerWidth(menuLiElement),
|
|
10947
10896
|
clientY: rect.top,
|
|
10948
10897
|
}, item.item, rootElement, menuLiElement, menuListenerRootNode);
|
|
@@ -10963,8 +10912,10 @@ var pops = (function () {
|
|
|
10963
10912
|
},
|
|
10964
10913
|
});
|
|
10965
10914
|
}
|
|
10966
|
-
catch
|
|
10967
|
-
|
|
10915
|
+
catch {
|
|
10916
|
+
// 忽略
|
|
10917
|
+
}
|
|
10918
|
+
const callbackResult = await item.callback(clickEvent, menuEvent, menuLiElement, menuListenerRootNode);
|
|
10968
10919
|
if (typeof callbackResult === "boolean" && callbackResult == false) {
|
|
10969
10920
|
return;
|
|
10970
10921
|
}
|
|
@@ -11007,8 +10958,8 @@ var pops = (function () {
|
|
|
11007
10958
|
console.log("删除当前项", [event, $dataItem, dataItem, config]);
|
|
11008
10959
|
return true;
|
|
11009
10960
|
},
|
|
11010
|
-
itemView(dateItem
|
|
11011
|
-
return
|
|
10961
|
+
itemView(dateItem) {
|
|
10962
|
+
return `${dateItem.value}-html`;
|
|
11012
10963
|
},
|
|
11013
10964
|
clickCallback(event, $dataItem, dataItem, config) {
|
|
11014
10965
|
console.log("item项的点击回调", [event, $dataItem, data, config]);
|
|
@@ -11086,7 +11037,7 @@ var pops = (function () {
|
|
|
11086
11037
|
},
|
|
11087
11038
|
]);
|
|
11088
11039
|
if (config.style != null) {
|
|
11089
|
-
|
|
11040
|
+
const cssNode = document.createElement("style");
|
|
11090
11041
|
popsDOMUtils.createElement("style", {
|
|
11091
11042
|
innerHTML: config.style,
|
|
11092
11043
|
}, {
|
|
@@ -11134,8 +11085,7 @@ var pops = (function () {
|
|
|
11134
11085
|
Reflect.set(SearchSuggestion.$el.root, "data-SearchSuggestion", SearchSuggestion);
|
|
11135
11086
|
SearchSuggestion.$el.$dynamicCSS =
|
|
11136
11087
|
SearchSuggestion.$el.root.querySelector("style[data-dynamic]");
|
|
11137
|
-
SearchSuggestion.$el.$hintULContainer =
|
|
11138
|
-
SearchSuggestion.$el.root.querySelector("ul");
|
|
11088
|
+
SearchSuggestion.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
|
|
11139
11089
|
},
|
|
11140
11090
|
/**
|
|
11141
11091
|
* 获取数据
|
|
@@ -11154,7 +11104,7 @@ var pops = (function () {
|
|
|
11154
11104
|
* 获取显示出搜索建议框的html
|
|
11155
11105
|
*/
|
|
11156
11106
|
createSearchSelectElement() {
|
|
11157
|
-
|
|
11107
|
+
const $el = popsDOMUtils.createElement("div", {
|
|
11158
11108
|
className: `pops pops-${popsType}-search-suggestion`,
|
|
11159
11109
|
innerHTML: /*html*/ `
|
|
11160
11110
|
<style type="text/css">
|
|
@@ -11355,7 +11305,7 @@ var pops = (function () {
|
|
|
11355
11305
|
*/
|
|
11356
11306
|
createSearchItemLiElement(dataItem, dateItemIndex) {
|
|
11357
11307
|
const dataValue = SearchSuggestion.getItemDataValue(dataItem);
|
|
11358
|
-
|
|
11308
|
+
const $li = popsDOMUtils.createElement("li", {
|
|
11359
11309
|
className: `pops-${popsType}-search-suggestion-hint-item`,
|
|
11360
11310
|
"data-index": dateItemIndex,
|
|
11361
11311
|
"data-value": dataValue,
|
|
@@ -11363,7 +11313,7 @@ var pops = (function () {
|
|
|
11363
11313
|
Reflect.set($li, "data-index", dateItemIndex);
|
|
11364
11314
|
Reflect.set($li, "data-value", dataValue);
|
|
11365
11315
|
// 项内容
|
|
11366
|
-
|
|
11316
|
+
const $itemInner = dataItem.itemView(dataItem, $li, config);
|
|
11367
11317
|
if (typeof $itemInner === "string") {
|
|
11368
11318
|
PopsSafeUtils.setSafeHTML($li, $itemInner);
|
|
11369
11319
|
}
|
|
@@ -11373,7 +11323,7 @@ var pops = (function () {
|
|
|
11373
11323
|
// 删除按钮
|
|
11374
11324
|
const enableDeleteButton = dataItem.enableDeleteButton;
|
|
11375
11325
|
if (typeof enableDeleteButton === "boolean" && enableDeleteButton) {
|
|
11376
|
-
|
|
11326
|
+
const $deleteIcon = SearchSuggestion.createItemDeleteIcon();
|
|
11377
11327
|
popsDOMUtils.append($li, $deleteIcon);
|
|
11378
11328
|
}
|
|
11379
11329
|
popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
|
|
@@ -11387,14 +11337,14 @@ var pops = (function () {
|
|
|
11387
11337
|
setSearchItemClickEvent($searchItem) {
|
|
11388
11338
|
popsDOMUtils.on($searchItem, "click", async (event) => {
|
|
11389
11339
|
popsDOMUtils.preventEvent(event);
|
|
11390
|
-
|
|
11340
|
+
const $click = event.target;
|
|
11391
11341
|
const data = SearchSuggestion.getData();
|
|
11392
11342
|
const dataItem = Reflect.get($searchItem, "data-value");
|
|
11393
|
-
|
|
11343
|
+
const isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
|
|
11394
11344
|
if (isDelete) {
|
|
11395
11345
|
// 删除
|
|
11396
11346
|
if (typeof dataItem.deleteButtonClickCallback === "function") {
|
|
11397
|
-
|
|
11347
|
+
const result = await dataItem.deleteButtonClickCallback(event, $searchItem, dataItem, config);
|
|
11398
11348
|
if (typeof result === "boolean" && result) {
|
|
11399
11349
|
data.splice(data.indexOf(dataItem), 1);
|
|
11400
11350
|
$searchItem.remove();
|
|
@@ -11409,7 +11359,7 @@ var pops = (function () {
|
|
|
11409
11359
|
else {
|
|
11410
11360
|
// 点击选择项
|
|
11411
11361
|
if (typeof dataItem.clickCallback === "function") {
|
|
11412
|
-
|
|
11362
|
+
const result = await dataItem.clickCallback(event, $searchItem, dataItem, config);
|
|
11413
11363
|
if (typeof result === "boolean" && result) {
|
|
11414
11364
|
if (config.inputTarget instanceof HTMLInputElement ||
|
|
11415
11365
|
config.inputTarget instanceof HTMLTextAreaElement) {
|
|
@@ -11426,6 +11376,7 @@ var pops = (function () {
|
|
|
11426
11376
|
* 设置搜索建议框每一项的选中事件
|
|
11427
11377
|
* @param liElement
|
|
11428
11378
|
*/
|
|
11379
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11429
11380
|
setSearchItemSelectEvent(liElement) {
|
|
11430
11381
|
// popsDOMUtils.on(
|
|
11431
11382
|
// liElement,
|
|
@@ -11447,17 +11398,18 @@ var pops = (function () {
|
|
|
11447
11398
|
capture: true,
|
|
11448
11399
|
}) {
|
|
11449
11400
|
/* 必须是input或者textarea才有input事件 */
|
|
11450
|
-
if (!(config.inputTarget instanceof HTMLInputElement ||
|
|
11451
|
-
config.inputTarget instanceof HTMLTextAreaElement)) {
|
|
11401
|
+
if (!(config.inputTarget instanceof HTMLInputElement || config.inputTarget instanceof HTMLTextAreaElement)) {
|
|
11452
11402
|
return;
|
|
11453
11403
|
}
|
|
11454
11404
|
/* 是input输入框 */
|
|
11455
11405
|
/* 禁用输入框自动提示 */
|
|
11456
11406
|
config.inputTarget.setAttribute("autocomplete", "off");
|
|
11457
11407
|
/* 内容改变事件 */
|
|
11458
|
-
const listenerHandler = popsDOMUtils.onInput(config.inputTarget,
|
|
11408
|
+
const listenerHandler = popsDOMUtils.onInput(config.inputTarget,
|
|
11409
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11410
|
+
async (_event) => {
|
|
11459
11411
|
const data = SearchSuggestion.getData();
|
|
11460
|
-
|
|
11412
|
+
const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.inputTarget.value, data, config);
|
|
11461
11413
|
SearchSuggestion.update(queryDataResult);
|
|
11462
11414
|
SearchSuggestion.updateStyleSheet();
|
|
11463
11415
|
}, option);
|
|
@@ -11466,7 +11418,9 @@ var pops = (function () {
|
|
|
11466
11418
|
/**
|
|
11467
11419
|
* 移除输入框内容改变的监听
|
|
11468
11420
|
*/
|
|
11469
|
-
removeInputChangeEvent(
|
|
11421
|
+
removeInputChangeEvent(
|
|
11422
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11423
|
+
option = {
|
|
11470
11424
|
capture: true,
|
|
11471
11425
|
}) {
|
|
11472
11426
|
for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
|
|
@@ -11601,7 +11555,7 @@ var pops = (function () {
|
|
|
11601
11555
|
* 获取删除按钮的html
|
|
11602
11556
|
*/
|
|
11603
11557
|
createItemDeleteIcon(size = 16, fill = "#bababa") {
|
|
11604
|
-
|
|
11558
|
+
const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
|
|
11605
11559
|
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11606
11560
|
<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>
|
|
11607
11561
|
<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>
|
|
@@ -11613,7 +11567,7 @@ var pops = (function () {
|
|
|
11613
11567
|
* 设置当前正在搜索中的提示
|
|
11614
11568
|
*/
|
|
11615
11569
|
setPromptsInSearch() {
|
|
11616
|
-
|
|
11570
|
+
const $isSearching = popsDOMUtils.createElement("li", {
|
|
11617
11571
|
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11618
11572
|
innerHTML: config.searchingTip,
|
|
11619
11573
|
});
|
|
@@ -11651,12 +11605,12 @@ var pops = (function () {
|
|
|
11651
11605
|
documentHeight = popsDOMUtils.height(document);
|
|
11652
11606
|
}
|
|
11653
11607
|
// 文档最大宽度
|
|
11654
|
-
|
|
11608
|
+
const documentWidth = popsDOMUtils.width(document);
|
|
11655
11609
|
let position = config.position;
|
|
11656
11610
|
if (config.position === "auto") {
|
|
11657
11611
|
// 需目标高度+搜索建议框高度大于文档高度,则显示在上面
|
|
11658
|
-
|
|
11659
|
-
|
|
11612
|
+
const targetBottom = targetRect.bottom;
|
|
11613
|
+
const searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
|
|
11660
11614
|
if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
|
|
11661
11615
|
// 在上面
|
|
11662
11616
|
position = "top";
|
|
@@ -11676,7 +11630,7 @@ var pops = (function () {
|
|
|
11676
11630
|
// 翻转折叠
|
|
11677
11631
|
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
|
|
11678
11632
|
}
|
|
11679
|
-
|
|
11633
|
+
const bottom = documentHeight - targetRect.top + config.topDistance;
|
|
11680
11634
|
SearchSuggestion.$el.root.style.top = "";
|
|
11681
11635
|
SearchSuggestion.$el.root.style.bottom = bottom + "px";
|
|
11682
11636
|
}
|
|
@@ -11685,13 +11639,13 @@ var pops = (function () {
|
|
|
11685
11639
|
if (config.useFoldAnimation) {
|
|
11686
11640
|
SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
|
|
11687
11641
|
}
|
|
11688
|
-
|
|
11642
|
+
const top = targetRect.height + targetRect.top + config.topDistance;
|
|
11689
11643
|
SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
|
|
11690
11644
|
SearchSuggestion.$el.root.style.bottom = "";
|
|
11691
11645
|
SearchSuggestion.$el.root.style.top = top + "px";
|
|
11692
11646
|
}
|
|
11693
11647
|
let left = targetRect.left;
|
|
11694
|
-
|
|
11648
|
+
const hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
|
|
11695
11649
|
if (hintUIWidth > documentWidth) {
|
|
11696
11650
|
// 超出宽度
|
|
11697
11651
|
left = left + documentWidth - hintUIWidth;
|
|
@@ -11712,7 +11666,7 @@ var pops = (function () {
|
|
|
11712
11666
|
* @param target 目标元素
|
|
11713
11667
|
*/
|
|
11714
11668
|
changeHintULElementWidth(target = config.target ?? config.inputTarget) {
|
|
11715
|
-
|
|
11669
|
+
const targetRect = target.getBoundingClientRect();
|
|
11716
11670
|
if (config.followTargetWidth) {
|
|
11717
11671
|
SearchSuggestion.$el.$hintULContainer.style.width = targetRect.width + "px";
|
|
11718
11672
|
}
|
|
@@ -11724,7 +11678,7 @@ var pops = (function () {
|
|
|
11724
11678
|
* 动态更新CSS
|
|
11725
11679
|
*/
|
|
11726
11680
|
updateDynamicCSS() {
|
|
11727
|
-
|
|
11681
|
+
const cssText = SearchSuggestion.getDynamicCSS();
|
|
11728
11682
|
PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dynamicCSS, cssText);
|
|
11729
11683
|
},
|
|
11730
11684
|
/**
|
|
@@ -11766,9 +11720,9 @@ var pops = (function () {
|
|
|
11766
11720
|
}
|
|
11767
11721
|
SearchSuggestion.clear(true);
|
|
11768
11722
|
/* 添加进ul中 */
|
|
11769
|
-
|
|
11723
|
+
const fragment = document.createDocumentFragment();
|
|
11770
11724
|
data.forEach((item, index) => {
|
|
11771
|
-
|
|
11725
|
+
const $item = SearchSuggestion.createSearchItemLiElement(item, index);
|
|
11772
11726
|
SearchSuggestion.setSearchItemClickEvent($item);
|
|
11773
11727
|
SearchSuggestion.setSearchItemSelectEvent($item);
|
|
11774
11728
|
fragment.appendChild($item);
|
|
@@ -11836,11 +11790,13 @@ var pops = (function () {
|
|
|
11836
11790
|
},
|
|
11837
11791
|
};
|
|
11838
11792
|
|
|
11793
|
+
const version = "2.4.6";
|
|
11794
|
+
|
|
11839
11795
|
class Pops {
|
|
11840
11796
|
/** 配置 */
|
|
11841
11797
|
config = {
|
|
11842
11798
|
/** 版本号 */
|
|
11843
|
-
version:
|
|
11799
|
+
version: version,
|
|
11844
11800
|
cssText: PopsCSS,
|
|
11845
11801
|
/** icon图标的svg代码 */
|
|
11846
11802
|
iconSVG: PopsIcon.$data,
|
|
@@ -11875,9 +11831,7 @@ var pops = (function () {
|
|
|
11875
11831
|
if (typeof PopsCore.globalThis.pops === "object") {
|
|
11876
11832
|
popsUtils.delete(PopsCore.globalThis, "pops");
|
|
11877
11833
|
}
|
|
11878
|
-
if (typeof unsafeWindow === "object" &&
|
|
11879
|
-
unsafeWindow != null &&
|
|
11880
|
-
typeof unsafeWindow.pops === "object") {
|
|
11834
|
+
if (typeof unsafeWindow === "object" && unsafeWindow != null && typeof unsafeWindow.pops === "object") {
|
|
11881
11835
|
popsUtils.delete(unsafeWindow, "pops");
|
|
11882
11836
|
}
|
|
11883
11837
|
return new Pops();
|
|
@@ -11898,7 +11852,7 @@ var pops = (function () {
|
|
|
11898
11852
|
* @param details 配置
|
|
11899
11853
|
*/
|
|
11900
11854
|
alert = (details) => {
|
|
11901
|
-
|
|
11855
|
+
const dialog = PopsAlert.init(details);
|
|
11902
11856
|
return dialog;
|
|
11903
11857
|
};
|
|
11904
11858
|
/**
|
|
@@ -11906,7 +11860,7 @@ var pops = (function () {
|
|
|
11906
11860
|
* @param details 配置
|
|
11907
11861
|
*/
|
|
11908
11862
|
confirm = (details) => {
|
|
11909
|
-
|
|
11863
|
+
const dialog = PopsConfirm.init(details);
|
|
11910
11864
|
return dialog;
|
|
11911
11865
|
};
|
|
11912
11866
|
/**
|
|
@@ -11914,7 +11868,7 @@ var pops = (function () {
|
|
|
11914
11868
|
* @param details 配置
|
|
11915
11869
|
*/
|
|
11916
11870
|
prompt = (details) => {
|
|
11917
|
-
|
|
11871
|
+
const dialog = PopsPrompt.init(details);
|
|
11918
11872
|
return dialog;
|
|
11919
11873
|
};
|
|
11920
11874
|
/**
|
|
@@ -11922,7 +11876,7 @@ var pops = (function () {
|
|
|
11922
11876
|
* @param details 配置
|
|
11923
11877
|
*/
|
|
11924
11878
|
loading = (details) => {
|
|
11925
|
-
|
|
11879
|
+
const popsLoading = PopsLoading.init(details);
|
|
11926
11880
|
return popsLoading;
|
|
11927
11881
|
};
|
|
11928
11882
|
/**
|
|
@@ -11930,7 +11884,7 @@ var pops = (function () {
|
|
|
11930
11884
|
* @param details 配置
|
|
11931
11885
|
*/
|
|
11932
11886
|
iframe = (details) => {
|
|
11933
|
-
|
|
11887
|
+
const dialog = PopsIframe.init(details);
|
|
11934
11888
|
return dialog;
|
|
11935
11889
|
};
|
|
11936
11890
|
/**
|
|
@@ -11938,7 +11892,7 @@ var pops = (function () {
|
|
|
11938
11892
|
* @param details 配置
|
|
11939
11893
|
*/
|
|
11940
11894
|
tooltip = (details) => {
|
|
11941
|
-
|
|
11895
|
+
const popsTooltip = PopsTooltip.init(details);
|
|
11942
11896
|
return popsTooltip;
|
|
11943
11897
|
};
|
|
11944
11898
|
/**
|
|
@@ -11946,7 +11900,7 @@ var pops = (function () {
|
|
|
11946
11900
|
* @param details 配置
|
|
11947
11901
|
*/
|
|
11948
11902
|
drawer = (details) => {
|
|
11949
|
-
|
|
11903
|
+
const dialog = PopsDrawer.init(details);
|
|
11950
11904
|
return dialog;
|
|
11951
11905
|
};
|
|
11952
11906
|
/**
|
|
@@ -11954,7 +11908,7 @@ var pops = (function () {
|
|
|
11954
11908
|
* @param details 配置
|
|
11955
11909
|
*/
|
|
11956
11910
|
folder = (details) => {
|
|
11957
|
-
|
|
11911
|
+
const dialog = PopsFolder.init(details);
|
|
11958
11912
|
return dialog;
|
|
11959
11913
|
};
|
|
11960
11914
|
/**
|
|
@@ -11962,7 +11916,7 @@ var pops = (function () {
|
|
|
11962
11916
|
* @param details 配置
|
|
11963
11917
|
*/
|
|
11964
11918
|
panel = (details) => {
|
|
11965
|
-
|
|
11919
|
+
const dialog = PopsPanel.init(details);
|
|
11966
11920
|
return dialog;
|
|
11967
11921
|
};
|
|
11968
11922
|
/**
|
|
@@ -11970,7 +11924,7 @@ var pops = (function () {
|
|
|
11970
11924
|
* @param details 配置
|
|
11971
11925
|
*/
|
|
11972
11926
|
rightClickMenu = (details) => {
|
|
11973
|
-
|
|
11927
|
+
const popsRightClickMenu = PopsRightClickMenu.init(details);
|
|
11974
11928
|
return popsRightClickMenu;
|
|
11975
11929
|
};
|
|
11976
11930
|
/**
|
|
@@ -11991,7 +11945,7 @@ var pops = (function () {
|
|
|
11991
11945
|
* searchSuggestion.setAllEvent();
|
|
11992
11946
|
*/
|
|
11993
11947
|
searchSuggestion = (details) => {
|
|
11994
|
-
|
|
11948
|
+
const popsSearchSuggestion = PopsSearchSuggestion.init(details);
|
|
11995
11949
|
return popsSearchSuggestion;
|
|
11996
11950
|
};
|
|
11997
11951
|
}
|