@whitesev/pops 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +80 -217
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +80 -217
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +80 -217
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +80 -217
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +80 -217
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +80 -217
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/handler/PopsElementHandler.d.ts +4 -4
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/alert/index.ts +13 -20
- package/src/components/confirm/index.ts +10 -20
- package/src/components/drawer/index.ts +11 -26
- package/src/components/folder/index.ts +11 -20
- package/src/components/iframe/index.ts +14 -23
- package/src/components/loading/index.ts +7 -9
- package/src/components/panel/PanelHandleContentDetails.ts +14 -36
- package/src/components/panel/index.ts +7 -11
- package/src/components/prompt/index.ts +16 -23
- package/src/components/rightClickMenu/index.ts +9 -7
- package/src/components/searchSuggestion/index.ts +8 -13
- package/src/handler/PopsElementHandler.ts +33 -72
package/dist/index.esm.js
CHANGED
|
@@ -2469,7 +2469,7 @@ const PopsElementHandler = {
|
|
|
2469
2469
|
if (style.startsWith(";")) {
|
|
2470
2470
|
style = style.replace(";", "");
|
|
2471
2471
|
}
|
|
2472
|
-
return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
|
|
2472
|
+
return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
|
|
2473
2473
|
},
|
|
2474
2474
|
/**
|
|
2475
2475
|
* 获取动画层HTML
|
|
@@ -2497,23 +2497,10 @@ const PopsElementHandler = {
|
|
|
2497
2497
|
}
|
|
2498
2498
|
let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
|
|
2499
2499
|
return /*html*/ `
|
|
2500
|
-
<div
|
|
2501
|
-
class="pops-anim"
|
|
2502
|
-
anim="${__config.animation || ""}"
|
|
2503
|
-
style="${popsAnimStyle}"
|
|
2504
|
-
data-guid="${guid}">
|
|
2505
|
-
${config.style != null
|
|
2500
|
+
<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null
|
|
2506
2501
|
? `<style tyle="text/css">${config.style}</style>`
|
|
2507
2502
|
: ""}
|
|
2508
|
-
<div
|
|
2509
|
-
class="pops ${config.class || ""}"
|
|
2510
|
-
data-bottom-btn="${hasBottomBtn}"
|
|
2511
|
-
type-value="${type}"
|
|
2512
|
-
style="${popsStyle}"
|
|
2513
|
-
position="${popsPosition}"
|
|
2514
|
-
data-guid="${guid}">
|
|
2515
|
-
${html}
|
|
2516
|
-
</div>
|
|
2503
|
+
<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
|
|
2517
2504
|
</div>`;
|
|
2518
2505
|
},
|
|
2519
2506
|
/**
|
|
@@ -2538,22 +2525,20 @@ const PopsElementHandler = {
|
|
|
2538
2525
|
let topRightButtonHTML = "";
|
|
2539
2526
|
__config_iframe.topRightButton.split("|").forEach((item) => {
|
|
2540
2527
|
item = item.toLowerCase();
|
|
2541
|
-
topRightButtonHTML += `
|
|
2528
|
+
topRightButtonHTML += /*html*/ `
|
|
2542
2529
|
<button class="pops-header-control" type="${item}">
|
|
2543
2530
|
<i class="pops-icon">${pops.config.iconSVG[item]}</i>
|
|
2544
2531
|
</button>`;
|
|
2545
2532
|
});
|
|
2546
|
-
resultHTML = `
|
|
2547
|
-
<div class="pops-header-controls" data-margin
|
|
2548
|
-
${topRightButtonHTML}
|
|
2549
|
-
</div>`;
|
|
2533
|
+
resultHTML = /*html*/ `
|
|
2534
|
+
<div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
|
|
2550
2535
|
}
|
|
2551
2536
|
else {
|
|
2552
2537
|
if (__config_confirm.btn?.close?.enable) {
|
|
2553
|
-
closeHTML = `
|
|
2538
|
+
closeHTML = /*html*/ `
|
|
2554
2539
|
<div class="pops-header-controls">
|
|
2555
2540
|
<button class="pops-header-control" type="close" data-header>
|
|
2556
|
-
|
|
2541
|
+
<i class="pops-icon">${pops.config.iconSVG["close"]}</i>
|
|
2557
2542
|
</button>
|
|
2558
2543
|
</div>`;
|
|
2559
2544
|
}
|
|
@@ -2610,20 +2595,15 @@ const PopsElementHandler = {
|
|
|
2610
2595
|
iconHTML = okIcon;
|
|
2611
2596
|
}
|
|
2612
2597
|
iconHTML = iconHTML || "";
|
|
2613
|
-
okIconHTML =
|
|
2614
|
-
<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">
|
|
2615
|
-
${iconHTML}
|
|
2616
|
-
</i>`;
|
|
2598
|
+
okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
|
|
2617
2599
|
}
|
|
2618
|
-
okHTML = `
|
|
2600
|
+
okHTML = /*html*/ `
|
|
2619
2601
|
<button
|
|
2620
2602
|
class="pops-${type}-btn-ok ${okButtonSizeClassName}"
|
|
2621
2603
|
type="${__config_confirm.btn.ok?.type}"
|
|
2622
2604
|
data-has-icon="${(__config_confirm.btn.ok.icon || "") !== ""}"
|
|
2623
2605
|
data-rightIcon="${__config_confirm.btn.ok?.rightIcon}"
|
|
2624
|
-
>
|
|
2625
|
-
${okIconHTML}
|
|
2626
|
-
<span>${config.btn.ok.text}</span>
|
|
2606
|
+
>${okIconHTML}<span>${config.btn.ok.text}</span>
|
|
2627
2607
|
</button>`;
|
|
2628
2608
|
}
|
|
2629
2609
|
if (__config_confirm.btn?.cancel?.enable) {
|
|
@@ -2649,20 +2629,15 @@ const PopsElementHandler = {
|
|
|
2649
2629
|
iconHTML = cancelIcon;
|
|
2650
2630
|
}
|
|
2651
2631
|
iconHTML = iconHTML || "";
|
|
2652
|
-
cancelIconHTML =
|
|
2653
|
-
<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.cancel.iconIsLoading}">
|
|
2654
|
-
${iconHTML}
|
|
2655
|
-
</i>`;
|
|
2632
|
+
cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
|
|
2656
2633
|
}
|
|
2657
|
-
cancelHTML = `
|
|
2634
|
+
cancelHTML = /*html*/ `
|
|
2658
2635
|
<button
|
|
2659
2636
|
class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
|
|
2660
2637
|
type="${__config_confirm.btn.cancel.type}"
|
|
2661
2638
|
data-has-icon="${(__config_confirm.btn.cancel.icon || "") !== ""}"
|
|
2662
2639
|
data-rightIcon="${__config_confirm.btn.cancel.rightIcon}"
|
|
2663
|
-
>
|
|
2664
|
-
${cancelIconHTML}
|
|
2665
|
-
<span>${__config_confirm.btn.cancel.text}</span>
|
|
2640
|
+
>${cancelIconHTML}<span>${__config_confirm.btn.cancel.text}</span>
|
|
2666
2641
|
</button>`;
|
|
2667
2642
|
}
|
|
2668
2643
|
if (__config_confirm.btn?.other?.enable) {
|
|
@@ -2685,20 +2660,15 @@ const PopsElementHandler = {
|
|
|
2685
2660
|
iconHTML = pops.config.iconSVG[otherIcon];
|
|
2686
2661
|
}
|
|
2687
2662
|
iconHTML = iconHTML || "";
|
|
2688
|
-
otherIconHTML =
|
|
2689
|
-
<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">
|
|
2690
|
-
${iconHTML}
|
|
2691
|
-
</i>`;
|
|
2663
|
+
otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">${iconHTML}</i>`;
|
|
2692
2664
|
}
|
|
2693
|
-
ohterHTML = `
|
|
2665
|
+
ohterHTML = /*html*/ `
|
|
2694
2666
|
<button
|
|
2695
2667
|
class="pops-${type}-btn-other ${otherButtonSizeClassName}"
|
|
2696
2668
|
type="${__config_confirm.btn.other.type}"
|
|
2697
2669
|
data-has-icon="${(__config_confirm.btn.other.icon || "") !== ""}"
|
|
2698
2670
|
data-rightIcon="${__config_confirm.btn.other.rightIcon}"
|
|
2699
|
-
>
|
|
2700
|
-
${otherIconHTML}
|
|
2701
|
-
<span>${__config_confirm.btn.other.text}</span>
|
|
2671
|
+
>${otherIconHTML}<span>${__config_confirm.btn.other.text}</span>
|
|
2702
2672
|
</button>`;
|
|
2703
2673
|
}
|
|
2704
2674
|
if (__config_confirm.btn.merge) {
|
|
@@ -2709,33 +2679,22 @@ const PopsElementHandler = {
|
|
|
2709
2679
|
else {
|
|
2710
2680
|
flexStyle += "flex-direction: row;";
|
|
2711
2681
|
}
|
|
2712
|
-
resultHTML = `
|
|
2713
|
-
<div class="pops-${type}-btn" style="${btnStyle}"
|
|
2714
|
-
${ohterHTML}
|
|
2715
|
-
<div
|
|
2682
|
+
resultHTML = /*html*/ `
|
|
2683
|
+
<div class="pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div
|
|
2716
2684
|
class="pops-${type}-btn-merge"
|
|
2717
|
-
style="${flexStyle}">
|
|
2718
|
-
${okHTML}
|
|
2719
|
-
${cancelHTML}
|
|
2720
|
-
</div>
|
|
2685
|
+
style="${flexStyle}">${okHTML}${cancelHTML}</div>
|
|
2721
2686
|
</div>
|
|
2722
2687
|
`;
|
|
2723
2688
|
}
|
|
2724
2689
|
else {
|
|
2725
|
-
resultHTML =
|
|
2726
|
-
<div class="pops-${type}-btn" style="${btnStyle}">
|
|
2727
|
-
${okHTML}
|
|
2728
|
-
${cancelHTML}
|
|
2729
|
-
${ohterHTML}
|
|
2730
|
-
</div>
|
|
2731
|
-
`;
|
|
2690
|
+
resultHTML = /*html*/ `<div class="pops-${type}-btn" style="${btnStyle}">${okHTML}${cancelHTML}${ohterHTML}</div>`;
|
|
2732
2691
|
}
|
|
2733
2692
|
return resultHTML;
|
|
2734
2693
|
},
|
|
2735
2694
|
/**
|
|
2736
2695
|
* 获取标题style
|
|
2737
|
-
* @param type
|
|
2738
|
-
* @param config
|
|
2696
|
+
* @param type 弹窗类型
|
|
2697
|
+
* @param config 弹窗配置
|
|
2739
2698
|
*/
|
|
2740
2699
|
getHeaderStyle(type, config) {
|
|
2741
2700
|
return {
|
|
@@ -2745,8 +2704,8 @@ const PopsElementHandler = {
|
|
|
2745
2704
|
},
|
|
2746
2705
|
/**
|
|
2747
2706
|
* 获取内容style
|
|
2748
|
-
* @param type
|
|
2749
|
-
* @param config
|
|
2707
|
+
* @param type 弹窗类型
|
|
2708
|
+
* @param config 弹窗配置
|
|
2750
2709
|
*/
|
|
2751
2710
|
getContentStyle(type, config) {
|
|
2752
2711
|
return {
|
|
@@ -3290,21 +3249,12 @@ class PopsAlert {
|
|
|
3290
3249
|
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
|
|
3291
3250
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
3292
3251
|
/*html*/ `
|
|
3293
|
-
<div
|
|
3294
|
-
class="pops-alert-title"
|
|
3295
|
-
style="text-align: ${config.title.position};
|
|
3296
|
-
${headerStyle}">
|
|
3297
|
-
${config.title.html
|
|
3252
|
+
<div class="pops-alert-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
3298
3253
|
? config.title.text
|
|
3299
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
3300
|
-
|
|
3301
|
-
</div>
|
|
3302
|
-
<div class="pops-alert-content" style="${contentStyle}">
|
|
3303
|
-
${config.content.html
|
|
3254
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
3255
|
+
<div class="pops-alert-content" style="${contentStyle}">${config.content.html
|
|
3304
3256
|
? config.content.text
|
|
3305
|
-
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}
|
|
3306
|
-
</div>
|
|
3307
|
-
${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
3257
|
+
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
3308
3258
|
/**
|
|
3309
3259
|
* 弹窗的主元素,包括动画层
|
|
3310
3260
|
*/
|
|
@@ -3481,22 +3431,12 @@ class PopsConfirm {
|
|
|
3481
3431
|
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
|
|
3482
3432
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
3483
3433
|
/*html*/ `
|
|
3484
|
-
<div class="pops-confirm-title" style="text-align: ${config.title.position};${headerStyle}"
|
|
3485
|
-
${config.title.html
|
|
3434
|
+
<div class="pops-confirm-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
3486
3435
|
? config.title.text
|
|
3487
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
3488
|
-
|
|
3489
|
-
</div>
|
|
3490
|
-
<div class="pops-confirm-content" style="${contentStyle}">
|
|
3491
|
-
${config.content.html
|
|
3436
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
3437
|
+
<div class="pops-confirm-content" style="${contentStyle}">${config.content.html
|
|
3492
3438
|
? config.content.text
|
|
3493
|
-
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}
|
|
3494
|
-
|
|
3495
|
-
</div>
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
${bottomBtnHTML}
|
|
3499
|
-
`, bottomBtnHTML, zIndex);
|
|
3439
|
+
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
3500
3440
|
/**
|
|
3501
3441
|
* 弹窗的主元素,包括动画层
|
|
3502
3442
|
*/
|
|
@@ -3678,14 +3618,10 @@ class PopsPrompt {
|
|
|
3678
3618
|
let { contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
|
|
3679
3619
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
3680
3620
|
/*html*/ `
|
|
3681
|
-
<div class="pops-prompt-title" style="text-align: ${config.title.position};${headerStyle}"
|
|
3682
|
-
${config.title.html
|
|
3621
|
+
<div class="pops-prompt-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
3683
3622
|
? config.title.text
|
|
3684
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
3685
|
-
${
|
|
3686
|
-
</div>
|
|
3687
|
-
<div class="pops-prompt-content" style="${contentPStyle}">
|
|
3688
|
-
${config.content.row
|
|
3623
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
3624
|
+
<div class="pops-prompt-content" style="${contentPStyle}">${config.content.row
|
|
3689
3625
|
? '<textarea pops="" placeholder="' +
|
|
3690
3626
|
config.content.placeholder +
|
|
3691
3627
|
'"></textarea>'
|
|
@@ -3693,10 +3629,7 @@ class PopsPrompt {
|
|
|
3693
3629
|
config.content.placeholder +
|
|
3694
3630
|
'" type="' +
|
|
3695
3631
|
(config.content.password ? "password" : "text") +
|
|
3696
|
-
'">'}
|
|
3697
|
-
</div>
|
|
3698
|
-
${bottomBtnHTML}
|
|
3699
|
-
`, bottomBtnHTML, zIndex);
|
|
3632
|
+
'">'}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
3700
3633
|
/**
|
|
3701
3634
|
* 弹窗的主元素,包括动画层
|
|
3702
3635
|
*/
|
|
@@ -3809,9 +3742,8 @@ class PopsLoading {
|
|
|
3809
3742
|
let { contentPStyle } = PopsElementHandler.getContentStyle("loading", config);
|
|
3810
3743
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
3811
3744
|
/*html*/ `
|
|
3812
|
-
<div class="pops-loading-content"
|
|
3813
|
-
|
|
3814
|
-
? `
|
|
3745
|
+
<div class="pops-loading-content">${config.addIndexCSS
|
|
3746
|
+
? /*html*/ `
|
|
3815
3747
|
<style data-model-name="index">${pops.config.cssText.index}</style>
|
|
3816
3748
|
<style data-model-name="anim">${pops.config.cssText.anim}</style>
|
|
3817
3749
|
<style data-model-name="common">${pops.config.cssText.common}</style>
|
|
@@ -3821,9 +3753,8 @@ class PopsLoading {
|
|
|
3821
3753
|
${pops.config.cssText.loadingCSS}
|
|
3822
3754
|
</style>
|
|
3823
3755
|
${config.style != null ? `<style>${config.style}</style>` : ""}
|
|
3824
|
-
|
|
3825
|
-
</div
|
|
3826
|
-
`, "", zIndex);
|
|
3756
|
+
<p pops style="${contentPStyle}">${config.content.text}</p>
|
|
3757
|
+
</div>`, "", zIndex);
|
|
3827
3758
|
/**
|
|
3828
3759
|
* 弹窗的主元素,包括动画层
|
|
3829
3760
|
*/
|
|
@@ -3957,27 +3888,16 @@ class PopsIframe {
|
|
|
3957
3888
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
|
|
3958
3889
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
3959
3890
|
/*html*/ `
|
|
3960
|
-
<div
|
|
3961
|
-
class="pops-iframe-title"
|
|
3962
|
-
style="text-align: ${config.title.position};${headerStyle}"
|
|
3963
|
-
>
|
|
3964
|
-
${config.title.html
|
|
3891
|
+
<div class="pops-iframe-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
3965
3892
|
? titleText
|
|
3966
|
-
: `<p pops style="${headerPStyle}">${titleText}</p>`}
|
|
3967
|
-
|
|
3968
|
-
</div>
|
|
3969
|
-
<div class="pops-iframe-content">
|
|
3893
|
+
: `<p pops style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
|
|
3894
|
+
<div class="pops-iframe-content">
|
|
3970
3895
|
<div class="pops-iframe-content-global-loading"></div>
|
|
3971
|
-
<iframe
|
|
3972
|
-
src="${config.url}"
|
|
3973
|
-
pops
|
|
3974
|
-
${config.sandbox
|
|
3896
|
+
<iframe src="${config.url}" pops ${config.sandbox
|
|
3975
3897
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
3976
3898
|
: ""}>
|
|
3977
3899
|
</iframe>
|
|
3978
|
-
|
|
3979
|
-
${config.loading.enable ? iframeLoadingHTML : ""}
|
|
3980
|
-
`, "", zIndex);
|
|
3900
|
+
</div>${config.loading.enable ? iframeLoadingHTML : ""}`, "", zIndex);
|
|
3981
3901
|
/**
|
|
3982
3902
|
* 弹窗的主元素,包括动画层
|
|
3983
3903
|
*/
|
|
@@ -4283,29 +4203,14 @@ class PopsDrawer {
|
|
|
4283
4203
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
4284
4204
|
/*html*/ `
|
|
4285
4205
|
${config.title.enable
|
|
4286
|
-
? `
|
|
4287
|
-
<div class="pops-${PopsType}-title" style="${headerStyle}"
|
|
4288
|
-
${config.title.html
|
|
4206
|
+
? /*html*/ `
|
|
4207
|
+
<div class="pops-${PopsType}-title" style="${headerStyle}">${config.title.html
|
|
4289
4208
|
? config.title.text
|
|
4290
|
-
: `<p
|
|
4291
|
-
pops
|
|
4292
|
-
style="
|
|
4293
|
-
width: 100%;
|
|
4294
|
-
text-align: ${config.title.position};
|
|
4295
|
-
${headerPStyle}">${config.title.text}</p>`}
|
|
4296
|
-
${headerBtnHTML}
|
|
4297
|
-
</div>
|
|
4298
|
-
`
|
|
4209
|
+
: /*html*/ `<p pops style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
|
|
4299
4210
|
: ""}
|
|
4300
|
-
|
|
4301
|
-
<div class="pops-${PopsType}-content" style="${contentStyle}">
|
|
4302
|
-
${config.content.html
|
|
4211
|
+
<div class="pops-${PopsType}-content" style="${contentStyle}">${config.content.html
|
|
4303
4212
|
? config.content.text
|
|
4304
|
-
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}
|
|
4305
|
-
</div>
|
|
4306
|
-
|
|
4307
|
-
${bottomBtnHTML}
|
|
4308
|
-
`, bottomBtnHTML, zIndex);
|
|
4213
|
+
: `<p pops style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4309
4214
|
/**
|
|
4310
4215
|
* 弹窗的主元素,包括动画层
|
|
4311
4216
|
*/
|
|
@@ -4687,14 +4592,12 @@ class PopsFolder {
|
|
|
4687
4592
|
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
|
|
4688
4593
|
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
|
|
4689
4594
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
|
|
4690
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
4691
|
-
|
|
4692
|
-
|
|
4595
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
4596
|
+
/*html*/ `
|
|
4597
|
+
<div class="pops-folder-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4693
4598
|
? config.title.text
|
|
4694
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
4695
|
-
|
|
4696
|
-
</div>
|
|
4697
|
-
<div class="pops-folder-content ${pops.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
4599
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4600
|
+
<div class="pops-folder-content ${pops.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
4698
4601
|
<div class="pops-folder-list">
|
|
4699
4602
|
<div class="pops-folder-file-list-breadcrumb">
|
|
4700
4603
|
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
@@ -4706,7 +4609,6 @@ class PopsFolder {
|
|
|
4706
4609
|
<div class="pops-folder-list-table__header-div">
|
|
4707
4610
|
<table class="pops-folder-list-table__header">
|
|
4708
4611
|
<colgroup>
|
|
4709
|
-
<!-- <col width="8%"> --!>
|
|
4710
4612
|
<col width="52%">
|
|
4711
4613
|
<col width="24%">
|
|
4712
4614
|
<col width="16%">
|
|
@@ -4777,7 +4679,6 @@ class PopsFolder {
|
|
|
4777
4679
|
<div class="pops-folder-list-table__body-div">
|
|
4778
4680
|
<table class="pops-folder-list-table__body">
|
|
4779
4681
|
<colgroup>
|
|
4780
|
-
<!-- <col width="8%"> --!>
|
|
4781
4682
|
${pops.isPhone()
|
|
4782
4683
|
? `<col width="100%">`
|
|
4783
4684
|
: `
|
|
@@ -4792,9 +4693,7 @@ class PopsFolder {
|
|
|
4792
4693
|
</table>
|
|
4793
4694
|
</div>
|
|
4794
4695
|
</div>
|
|
4795
|
-
</div
|
|
4796
|
-
${bottomBtnHTML}
|
|
4797
|
-
`, bottomBtnHTML, zIndex);
|
|
4696
|
+
</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4798
4697
|
/**
|
|
4799
4698
|
* 弹窗的主元素,包括动画层
|
|
4800
4699
|
*/
|
|
@@ -4975,9 +4874,7 @@ class PopsFolder {
|
|
|
4975
4874
|
<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
|
|
4976
4875
|
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4977
4876
|
<div>
|
|
4978
|
-
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4979
|
-
${fileName}
|
|
4980
|
-
</a>
|
|
4877
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
|
|
4981
4878
|
<span>${latestTime} ${fileSize}</span>
|
|
4982
4879
|
</div>
|
|
4983
4880
|
</div>
|
|
@@ -6120,9 +6017,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6120
6017
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6121
6018
|
/*html*/ `
|
|
6122
6019
|
<div class="pops-panel-item-left-text">
|
|
6123
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6124
|
-
${leftDescriptionText}
|
|
6125
|
-
</div>
|
|
6020
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6126
6021
|
<div class="pops-panel-switch">
|
|
6127
6022
|
<input class="pops-panel-switch__input" type="checkbox">
|
|
6128
6023
|
<span class="pops-panel-switch__core">
|
|
@@ -6222,9 +6117,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6222
6117
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6223
6118
|
/*html*/ `
|
|
6224
6119
|
<div class="pops-panel-item-left-text">
|
|
6225
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6226
|
-
${leftDescriptionText}
|
|
6227
|
-
</div>
|
|
6120
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6228
6121
|
<div class="pops-panel-slider">
|
|
6229
6122
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
6230
6123
|
</div>
|
|
@@ -6287,9 +6180,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6287
6180
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6288
6181
|
/*html*/ `
|
|
6289
6182
|
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
6290
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6291
|
-
${leftDescriptionText}
|
|
6292
|
-
</div>
|
|
6183
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6293
6184
|
<div class="pops-slider pops-slider-width">
|
|
6294
6185
|
<div class="pops-slider__runway">
|
|
6295
6186
|
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
@@ -6850,9 +6741,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6850
6741
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6851
6742
|
/*html*/ `
|
|
6852
6743
|
<div class="pops-panel-item-left-text">
|
|
6853
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6854
|
-
${leftDescriptionText}
|
|
6855
|
-
</div>
|
|
6744
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6856
6745
|
<div class="pops-panel-input pops-user-select-none">
|
|
6857
6746
|
<input type="${inputType}" placeholder="${formConfig.placeholder}">
|
|
6858
6747
|
</div>
|
|
@@ -7047,12 +6936,9 @@ const PanelHandleContentDetails = () => {
|
|
|
7047
6936
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7048
6937
|
/*html*/ `
|
|
7049
6938
|
<div class="pops-panel-item-left-text">
|
|
7050
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7051
|
-
${leftDescriptionText}
|
|
7052
|
-
</div>
|
|
6939
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7053
6940
|
<div class="pops-panel-textarea">
|
|
7054
|
-
<textarea placeholder="${formConfig.placeholder ?? ""}">
|
|
7055
|
-
</textarea>
|
|
6941
|
+
<textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
|
|
7056
6942
|
</div>
|
|
7057
6943
|
`);
|
|
7058
6944
|
const PopsPanelTextArea = {
|
|
@@ -7122,9 +7008,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7122
7008
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7123
7009
|
/*html*/ `
|
|
7124
7010
|
<div class="pops-panel-item-left-text">
|
|
7125
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7126
|
-
${leftDescriptionText}
|
|
7127
|
-
</div>
|
|
7011
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7128
7012
|
<div class="pops-panel-select pops-user-select-none">
|
|
7129
7013
|
<select></select>
|
|
7130
7014
|
</div>
|
|
@@ -7318,9 +7202,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7318
7202
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7319
7203
|
/*html*/ `
|
|
7320
7204
|
<div class="pops-panel-item-left-text">
|
|
7321
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7322
|
-
${leftDescriptionText}
|
|
7323
|
-
</div>
|
|
7205
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7324
7206
|
<div class="pops-panel-select-multiple">
|
|
7325
7207
|
<div class="el-select__wrapper">
|
|
7326
7208
|
<div class="el-select__selection">
|
|
@@ -7613,9 +7495,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7613
7495
|
function createSelectItemElement(dataInfo) {
|
|
7614
7496
|
let $item = popsDOMUtils.createElement("li", {
|
|
7615
7497
|
className: "select-item",
|
|
7616
|
-
innerHTML: /*html*/
|
|
7617
|
-
<span>${dataInfo.text}</span>
|
|
7618
|
-
`,
|
|
7498
|
+
innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
|
|
7619
7499
|
});
|
|
7620
7500
|
Reflect.set($item, "data-info", dataInfo);
|
|
7621
7501
|
return $item;
|
|
@@ -7877,9 +7757,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7877
7757
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7878
7758
|
/*html*/ `
|
|
7879
7759
|
<div class="pops-panel-item-left-text">
|
|
7880
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7881
|
-
${leftDescriptionText}
|
|
7882
|
-
</div>
|
|
7760
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7883
7761
|
<div class="pops-panel-button">
|
|
7884
7762
|
<button class="pops-panel-button_inner">
|
|
7885
7763
|
<i class="pops-bottom-icon"></i>
|
|
@@ -8044,13 +7922,8 @@ const PanelHandleContentDetails = () => {
|
|
|
8044
7922
|
PopsSafeUtils.setSafeHTML($li,
|
|
8045
7923
|
/*html*/ `
|
|
8046
7924
|
<div class="pops-panel-item-left-text">
|
|
8047
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
8048
|
-
|
|
8049
|
-
</div>
|
|
8050
|
-
<div class="pops-panel-deepMenu">
|
|
8051
|
-
${rightText}
|
|
8052
|
-
${arrowRightIconHTML}
|
|
8053
|
-
</div>
|
|
7925
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7926
|
+
<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
|
|
8054
7927
|
`);
|
|
8055
7928
|
const PopsPanelDeepMenu = {
|
|
8056
7929
|
[Symbol.toStringTag]: "PopsPanelDeepMenu",
|
|
@@ -8433,15 +8306,9 @@ class PopsPanel {
|
|
|
8433
8306
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
|
|
8434
8307
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
8435
8308
|
/*html*/ `
|
|
8436
|
-
<div
|
|
8437
|
-
class="pops-${PopsType}-title"
|
|
8438
|
-
style="text-align: ${config.title.position};
|
|
8439
|
-
${headerStyle}">
|
|
8440
|
-
${config.title.html
|
|
8309
|
+
<div class="pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
8441
8310
|
? config.title.text
|
|
8442
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
8443
|
-
${headerBtnHTML}
|
|
8444
|
-
</div>
|
|
8311
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
8445
8312
|
<div class="pops-${PopsType}-content">
|
|
8446
8313
|
<aside class="pops-${PopsType}-aside">
|
|
8447
8314
|
<ul></ul>
|
|
@@ -8986,7 +8853,8 @@ class PopsRightClickMenu {
|
|
|
8986
8853
|
/* 判断有无图标,有就添加进去 */
|
|
8987
8854
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
8988
8855
|
let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
|
|
8989
|
-
let iconElement = popsUtils.parseTextToDOM(
|
|
8856
|
+
let iconElement = popsUtils.parseTextToDOM(
|
|
8857
|
+
/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`);
|
|
8990
8858
|
menuLiElement.appendChild(iconElement);
|
|
8991
8859
|
}
|
|
8992
8860
|
/* 插入文字 */
|
|
@@ -9003,7 +8871,9 @@ class PopsRightClickMenu {
|
|
|
9003
8871
|
return;
|
|
9004
8872
|
}
|
|
9005
8873
|
function removeElement(element) {
|
|
9006
|
-
element
|
|
8874
|
+
element
|
|
8875
|
+
.querySelectorAll("ul li")
|
|
8876
|
+
.forEach((ele) => {
|
|
9007
8877
|
if (ele?.__menuData__?.child) {
|
|
9008
8878
|
removeElement(ele.__menuData__.child);
|
|
9009
8879
|
}
|
|
@@ -9220,9 +9090,7 @@ class PopsSearchSuggestion {
|
|
|
9220
9090
|
<style data-dynamic="true">
|
|
9221
9091
|
${this.getDynamicCSS()}
|
|
9222
9092
|
</style>
|
|
9223
|
-
<ul class="pops-${PopsType}-search-suggestion-hint">
|
|
9224
|
-
${config.toSearhNotResultHTML}
|
|
9225
|
-
</ul>
|
|
9093
|
+
<ul class="pops-${PopsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
9226
9094
|
`,
|
|
9227
9095
|
}, {
|
|
9228
9096
|
"data-guid": guid,
|
|
@@ -9301,12 +9169,7 @@ class PopsSearchSuggestion {
|
|
|
9301
9169
|
className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
9302
9170
|
"data-index": index,
|
|
9303
9171
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
9304
|
-
innerHTML:
|
|
9305
|
-
${config.getItemHTML(data)}
|
|
9306
|
-
${config.deleteIcon.enable
|
|
9307
|
-
? SearchSuggestion.getDeleteIconHTML()
|
|
9308
|
-
: ""}
|
|
9309
|
-
`,
|
|
9172
|
+
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
9310
9173
|
});
|
|
9311
9174
|
},
|
|
9312
9175
|
/**
|
|
@@ -10189,7 +10052,7 @@ class Pops {
|
|
|
10189
10052
|
/** 配置 */
|
|
10190
10053
|
config = {
|
|
10191
10054
|
/** 版本号 */
|
|
10192
|
-
version: "2025.
|
|
10055
|
+
version: "2025.5.1",
|
|
10193
10056
|
cssText: {
|
|
10194
10057
|
/** 主CSS */
|
|
10195
10058
|
index: indexCSS,
|