@whitesev/pops 2.0.1 → 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 +86 -218
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +86 -218
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +86 -218
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +86 -218
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +86 -218
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +86 -218
- 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 +20 -37
- 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>
|
|
@@ -6053,7 +5950,12 @@ const PanelHandleContentDetails = () => {
|
|
|
6053
5950
|
return;
|
|
6054
5951
|
}
|
|
6055
5952
|
Object.keys(props).forEach((propName) => {
|
|
6056
|
-
|
|
5953
|
+
let value = props[propName];
|
|
5954
|
+
if (propName === "innerHTML") {
|
|
5955
|
+
PopsSafeUtils.setSafeHTML(element, value);
|
|
5956
|
+
return;
|
|
5957
|
+
}
|
|
5958
|
+
Reflect.set(element, propName, value);
|
|
6057
5959
|
});
|
|
6058
5960
|
},
|
|
6059
5961
|
/**
|
|
@@ -6115,9 +6017,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6115
6017
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6116
6018
|
/*html*/ `
|
|
6117
6019
|
<div class="pops-panel-item-left-text">
|
|
6118
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6119
|
-
${leftDescriptionText}
|
|
6120
|
-
</div>
|
|
6020
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6121
6021
|
<div class="pops-panel-switch">
|
|
6122
6022
|
<input class="pops-panel-switch__input" type="checkbox">
|
|
6123
6023
|
<span class="pops-panel-switch__core">
|
|
@@ -6217,9 +6117,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6217
6117
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6218
6118
|
/*html*/ `
|
|
6219
6119
|
<div class="pops-panel-item-left-text">
|
|
6220
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6221
|
-
${leftDescriptionText}
|
|
6222
|
-
</div>
|
|
6120
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6223
6121
|
<div class="pops-panel-slider">
|
|
6224
6122
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
6225
6123
|
</div>
|
|
@@ -6282,9 +6180,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6282
6180
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6283
6181
|
/*html*/ `
|
|
6284
6182
|
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
6285
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6286
|
-
${leftDescriptionText}
|
|
6287
|
-
</div>
|
|
6183
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6288
6184
|
<div class="pops-slider pops-slider-width">
|
|
6289
6185
|
<div class="pops-slider__runway">
|
|
6290
6186
|
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
@@ -6845,9 +6741,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6845
6741
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
6846
6742
|
/*html*/ `
|
|
6847
6743
|
<div class="pops-panel-item-left-text">
|
|
6848
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6849
|
-
${leftDescriptionText}
|
|
6850
|
-
</div>
|
|
6744
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
6851
6745
|
<div class="pops-panel-input pops-user-select-none">
|
|
6852
6746
|
<input type="${inputType}" placeholder="${formConfig.placeholder}">
|
|
6853
6747
|
</div>
|
|
@@ -7042,12 +6936,9 @@ const PanelHandleContentDetails = () => {
|
|
|
7042
6936
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7043
6937
|
/*html*/ `
|
|
7044
6938
|
<div class="pops-panel-item-left-text">
|
|
7045
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7046
|
-
${leftDescriptionText}
|
|
7047
|
-
</div>
|
|
6939
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7048
6940
|
<div class="pops-panel-textarea">
|
|
7049
|
-
<textarea placeholder="${formConfig.placeholder ?? ""}">
|
|
7050
|
-
</textarea>
|
|
6941
|
+
<textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
|
|
7051
6942
|
</div>
|
|
7052
6943
|
`);
|
|
7053
6944
|
const PopsPanelTextArea = {
|
|
@@ -7117,9 +7008,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7117
7008
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7118
7009
|
/*html*/ `
|
|
7119
7010
|
<div class="pops-panel-item-left-text">
|
|
7120
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7121
|
-
${leftDescriptionText}
|
|
7122
|
-
</div>
|
|
7011
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7123
7012
|
<div class="pops-panel-select pops-user-select-none">
|
|
7124
7013
|
<select></select>
|
|
7125
7014
|
</div>
|
|
@@ -7313,9 +7202,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7313
7202
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7314
7203
|
/*html*/ `
|
|
7315
7204
|
<div class="pops-panel-item-left-text">
|
|
7316
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7317
|
-
${leftDescriptionText}
|
|
7318
|
-
</div>
|
|
7205
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7319
7206
|
<div class="pops-panel-select-multiple">
|
|
7320
7207
|
<div class="el-select__wrapper">
|
|
7321
7208
|
<div class="el-select__selection">
|
|
@@ -7608,9 +7495,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7608
7495
|
function createSelectItemElement(dataInfo) {
|
|
7609
7496
|
let $item = popsDOMUtils.createElement("li", {
|
|
7610
7497
|
className: "select-item",
|
|
7611
|
-
innerHTML: /*html*/
|
|
7612
|
-
<span>${dataInfo.text}</span>
|
|
7613
|
-
`,
|
|
7498
|
+
innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
|
|
7614
7499
|
});
|
|
7615
7500
|
Reflect.set($item, "data-info", dataInfo);
|
|
7616
7501
|
return $item;
|
|
@@ -7872,9 +7757,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7872
7757
|
PopsSafeUtils.setSafeHTML(liElement,
|
|
7873
7758
|
/*html*/ `
|
|
7874
7759
|
<div class="pops-panel-item-left-text">
|
|
7875
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7876
|
-
${leftDescriptionText}
|
|
7877
|
-
</div>
|
|
7760
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7878
7761
|
<div class="pops-panel-button">
|
|
7879
7762
|
<button class="pops-panel-button_inner">
|
|
7880
7763
|
<i class="pops-bottom-icon"></i>
|
|
@@ -8039,13 +7922,8 @@ const PanelHandleContentDetails = () => {
|
|
|
8039
7922
|
PopsSafeUtils.setSafeHTML($li,
|
|
8040
7923
|
/*html*/ `
|
|
8041
7924
|
<div class="pops-panel-item-left-text">
|
|
8042
|
-
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
8043
|
-
|
|
8044
|
-
</div>
|
|
8045
|
-
<div class="pops-panel-deepMenu">
|
|
8046
|
-
${rightText}
|
|
8047
|
-
${arrowRightIconHTML}
|
|
8048
|
-
</div>
|
|
7925
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
7926
|
+
<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
|
|
8049
7927
|
`);
|
|
8050
7928
|
const PopsPanelDeepMenu = {
|
|
8051
7929
|
[Symbol.toStringTag]: "PopsPanelDeepMenu",
|
|
@@ -8428,15 +8306,9 @@ class PopsPanel {
|
|
|
8428
8306
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
|
|
8429
8307
|
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config,
|
|
8430
8308
|
/*html*/ `
|
|
8431
|
-
<div
|
|
8432
|
-
class="pops-${PopsType}-title"
|
|
8433
|
-
style="text-align: ${config.title.position};
|
|
8434
|
-
${headerStyle}">
|
|
8435
|
-
${config.title.html
|
|
8309
|
+
<div class="pops-${PopsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
8436
8310
|
? config.title.text
|
|
8437
|
-
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}
|
|
8438
|
-
${headerBtnHTML}
|
|
8439
|
-
</div>
|
|
8311
|
+
: `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
8440
8312
|
<div class="pops-${PopsType}-content">
|
|
8441
8313
|
<aside class="pops-${PopsType}-aside">
|
|
8442
8314
|
<ul></ul>
|
|
@@ -8981,7 +8853,8 @@ class PopsRightClickMenu {
|
|
|
8981
8853
|
/* 判断有无图标,有就添加进去 */
|
|
8982
8854
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
8983
8855
|
let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
|
|
8984
|
-
let iconElement = popsUtils.parseTextToDOM(
|
|
8856
|
+
let iconElement = popsUtils.parseTextToDOM(
|
|
8857
|
+
/*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`);
|
|
8985
8858
|
menuLiElement.appendChild(iconElement);
|
|
8986
8859
|
}
|
|
8987
8860
|
/* 插入文字 */
|
|
@@ -8998,7 +8871,9 @@ class PopsRightClickMenu {
|
|
|
8998
8871
|
return;
|
|
8999
8872
|
}
|
|
9000
8873
|
function removeElement(element) {
|
|
9001
|
-
element
|
|
8874
|
+
element
|
|
8875
|
+
.querySelectorAll("ul li")
|
|
8876
|
+
.forEach((ele) => {
|
|
9002
8877
|
if (ele?.__menuData__?.child) {
|
|
9003
8878
|
removeElement(ele.__menuData__.child);
|
|
9004
8879
|
}
|
|
@@ -9215,9 +9090,7 @@ class PopsSearchSuggestion {
|
|
|
9215
9090
|
<style data-dynamic="true">
|
|
9216
9091
|
${this.getDynamicCSS()}
|
|
9217
9092
|
</style>
|
|
9218
|
-
<ul class="pops-${PopsType}-search-suggestion-hint">
|
|
9219
|
-
${config.toSearhNotResultHTML}
|
|
9220
|
-
</ul>
|
|
9093
|
+
<ul class="pops-${PopsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
9221
9094
|
`,
|
|
9222
9095
|
}, {
|
|
9223
9096
|
"data-guid": guid,
|
|
@@ -9296,12 +9169,7 @@ class PopsSearchSuggestion {
|
|
|
9296
9169
|
className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
9297
9170
|
"data-index": index,
|
|
9298
9171
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
9299
|
-
innerHTML:
|
|
9300
|
-
${config.getItemHTML(data)}
|
|
9301
|
-
${config.deleteIcon.enable
|
|
9302
|
-
? SearchSuggestion.getDeleteIconHTML()
|
|
9303
|
-
: ""}
|
|
9304
|
-
`,
|
|
9172
|
+
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
9305
9173
|
});
|
|
9306
9174
|
},
|
|
9307
9175
|
/**
|
|
@@ -10184,7 +10052,7 @@ class Pops {
|
|
|
10184
10052
|
/** 配置 */
|
|
10185
10053
|
config = {
|
|
10186
10054
|
/** 版本号 */
|
|
10187
|
-
version: "2025.
|
|
10055
|
+
version: "2025.5.1",
|
|
10188
10056
|
cssText: {
|
|
10189
10057
|
/** 主CSS */
|
|
10190
10058
|
index: indexCSS,
|