@whitesev/pops 1.9.7 → 2.0.1
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 +230 -177
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +230 -177
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +230 -177
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +230 -177
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +230 -177
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +230 -177
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/utils/PopsSafeUtils.d.ts +10 -0
- package/package.json +1 -1
- package/src/Pops.ts +4 -3
- package/src/components/folder/index.ts +45 -32
- package/src/components/panel/PanelHandleContentDetails.ts +176 -132
- package/src/components/rightClickMenu/index.ts +11 -4
- package/src/components/searchSuggestion/index.ts +13 -4
- package/src/components/tooltip/index.ts +2 -1
- package/src/utils/PopsDOMUtils.ts +21 -6
- package/src/utils/PopsSafeUtils.ts +24 -0
package/dist/index.iife.js
CHANGED
|
@@ -313,6 +313,32 @@ var pops = (function () {
|
|
|
313
313
|
}
|
|
314
314
|
const popsUtils = new PopsUtils();
|
|
315
315
|
|
|
316
|
+
const PopsSafeUtils = {
|
|
317
|
+
/**
|
|
318
|
+
* 获取安全的html
|
|
319
|
+
*/
|
|
320
|
+
getSafeHTML(text) {
|
|
321
|
+
// @ts-ignore
|
|
322
|
+
if (globalThis.trustedTypes) {
|
|
323
|
+
// @ts-ignore
|
|
324
|
+
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
325
|
+
createHTML: (html) => html,
|
|
326
|
+
});
|
|
327
|
+
return policy.createHTML(text);
|
|
328
|
+
}
|
|
329
|
+
else {
|
|
330
|
+
return text;
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
/**
|
|
334
|
+
* 设置安全的html
|
|
335
|
+
*/
|
|
336
|
+
setSafeHTML($el, text) {
|
|
337
|
+
// 创建 TrustedHTML 策略（需 CSP 允许）
|
|
338
|
+
$el.innerHTML = this.getSafeHTML(text);
|
|
339
|
+
},
|
|
340
|
+
};
|
|
341
|
+
|
|
316
342
|
class PopsDOMUtilsEvent {
|
|
317
343
|
on(element, eventType, selector, callback, option) {
|
|
318
344
|
/**
|
|
@@ -1250,7 +1276,7 @@ var pops = (function () {
|
|
|
1250
1276
|
attributes) {
|
|
1251
1277
|
let tempElement = PopsCore.document.createElement(tagName);
|
|
1252
1278
|
if (typeof property === "string") {
|
|
1253
|
-
tempElement
|
|
1279
|
+
PopsSafeUtils.setSafeHTML(tempElement, property);
|
|
1254
1280
|
return tempElement;
|
|
1255
1281
|
}
|
|
1256
1282
|
if (property == null) {
|
|
@@ -1261,6 +1287,11 @@ var pops = (function () {
|
|
|
1261
1287
|
}
|
|
1262
1288
|
Object.keys(property).forEach((key) => {
|
|
1263
1289
|
let value = property[key];
|
|
1290
|
+
if (key === "innerHTML") {
|
|
1291
|
+
PopsSafeUtils.setSafeHTML(tempElement, value);
|
|
1292
|
+
return;
|
|
1293
|
+
}
|
|
1294
|
+
// @ts-ignore
|
|
1264
1295
|
tempElement[key] = value;
|
|
1265
1296
|
});
|
|
1266
1297
|
Object.keys(attributes).forEach((key) => {
|
|
@@ -1463,7 +1494,7 @@ var pops = (function () {
|
|
|
1463
1494
|
}
|
|
1464
1495
|
function parseHTMLByCreateDom() {
|
|
1465
1496
|
let tempDIV = PopsCore.document.createElement("div");
|
|
1466
|
-
tempDIV
|
|
1497
|
+
PopsSafeUtils.setSafeHTML(tempDIV, html);
|
|
1467
1498
|
if (isComplete) {
|
|
1468
1499
|
return tempDIV;
|
|
1469
1500
|
}
|
|
@@ -1496,7 +1527,7 @@ var pops = (function () {
|
|
|
1496
1527
|
}
|
|
1497
1528
|
function elementAppendChild(ele, text) {
|
|
1498
1529
|
if (typeof content === "string") {
|
|
1499
|
-
ele.insertAdjacentHTML("beforeend", text);
|
|
1530
|
+
ele.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(text));
|
|
1500
1531
|
}
|
|
1501
1532
|
else {
|
|
1502
1533
|
ele.appendChild(text);
|
|
@@ -1631,7 +1662,7 @@ var pops = (function () {
|
|
|
1631
1662
|
return;
|
|
1632
1663
|
}
|
|
1633
1664
|
if (typeof content === "string") {
|
|
1634
|
-
element.insertAdjacentHTML("beforebegin", content);
|
|
1665
|
+
element.insertAdjacentHTML("beforebegin", PopsSafeUtils.getSafeHTML(content));
|
|
1635
1666
|
}
|
|
1636
1667
|
else {
|
|
1637
1668
|
element.parentElement.insertBefore(content, element);
|
|
@@ -1654,7 +1685,7 @@ var pops = (function () {
|
|
|
1654
1685
|
return;
|
|
1655
1686
|
}
|
|
1656
1687
|
if (typeof content === "string") {
|
|
1657
|
-
element.insertAdjacentHTML("afterend", content);
|
|
1688
|
+
element.insertAdjacentHTML("afterend", PopsSafeUtils.getSafeHTML(content));
|
|
1658
1689
|
}
|
|
1659
1690
|
else {
|
|
1660
1691
|
element.parentElement.insertBefore(content, element.nextSibling);
|
|
@@ -4859,26 +4890,29 @@ var pops = (function () {
|
|
|
4859
4890
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4860
4891
|
fileTimeElement.className = "pops-folder-list-table__body-td";
|
|
4861
4892
|
fileFormatSize.className = "pops-folder-list-table__body-td";
|
|
4862
|
-
fileNameElement
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4893
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4894
|
+
/*html*/ `
|
|
4895
|
+
<div class="pops-folder-list-file-name cursor-p">
|
|
4896
|
+
<div>
|
|
4897
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4898
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4899
|
+
${fileName}
|
|
4900
|
+
</a>
|
|
4901
|
+
</div>
|
|
4902
|
+
</div>
|
|
4903
|
+
`);
|
|
4904
|
+
PopsSafeUtils.setSafeHTML(fileTimeElement,
|
|
4905
|
+
/*html*/ `
|
|
4906
|
+
<div class="pops-folder-list__time">
|
|
4907
|
+
<span>${latestTime}</span>
|
|
4908
|
+
</div>
|
|
4909
|
+
`);
|
|
4910
|
+
PopsSafeUtils.setSafeHTML(fileFormatSize,
|
|
4911
|
+
/*html*/ `
|
|
4912
|
+
<div class="pops-folder-list-format-size">
|
|
4913
|
+
<span>${fileSize}</span>
|
|
4914
|
+
</div>
|
|
4915
|
+
`);
|
|
4882
4916
|
/* 存储原来的值 */
|
|
4883
4917
|
let __value__ = {
|
|
4884
4918
|
fileName: origin_fileName,
|
|
@@ -4939,17 +4973,18 @@ var pops = (function () {
|
|
|
4939
4973
|
}
|
|
4940
4974
|
folderELement.className = "pops-folder-list-table__body-row";
|
|
4941
4975
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4942
|
-
fileNameElement
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4976
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4977
|
+
/*html*/ `
|
|
4978
|
+
<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
|
|
4979
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4980
|
+
<div>
|
|
4981
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4982
|
+
${fileName}
|
|
4983
|
+
</a>
|
|
4984
|
+
<span>${latestTime} ${fileSize}</span>
|
|
4985
|
+
</div>
|
|
4986
|
+
</div>
|
|
4987
|
+
`);
|
|
4953
4988
|
/* 存储原来的值 */
|
|
4954
4989
|
let __value__ = {
|
|
4955
4990
|
fileName: origin_fileName,
|
|
@@ -4969,7 +5004,7 @@ var pops = (function () {
|
|
|
4969
5004
|
* 清空每行的元素
|
|
4970
5005
|
*/
|
|
4971
5006
|
function clearFolerRow() {
|
|
4972
|
-
folderListBodyElement
|
|
5007
|
+
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
4973
5008
|
}
|
|
4974
5009
|
function getArrowIconElement() {
|
|
4975
5010
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
@@ -5968,8 +6003,8 @@ var pops = (function () {
|
|
|
5968
6003
|
* 清空container容器的元素
|
|
5969
6004
|
*/
|
|
5970
6005
|
clearContainer() {
|
|
5971
|
-
this.sectionContainerHeaderULElement
|
|
5972
|
-
this.sectionContainerULElement
|
|
6006
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
|
|
6007
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
|
|
5973
6008
|
this.$el.$content
|
|
5974
6009
|
?.querySelectorAll("section.pops-panel-deepMenu-container")
|
|
5975
6010
|
.forEach((ele) => ele.remove());
|
|
@@ -6055,8 +6090,9 @@ var pops = (function () {
|
|
|
6055
6090
|
createAsideItem(asideConfig) {
|
|
6056
6091
|
let liElement = document.createElement("li");
|
|
6057
6092
|
liElement.id = asideConfig.id;
|
|
6093
|
+
// @ts-ignore
|
|
6058
6094
|
liElement["__forms__"] = asideConfig.forms;
|
|
6059
|
-
liElement
|
|
6095
|
+
PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
|
|
6060
6096
|
/* 处理className */
|
|
6061
6097
|
this.setElementClassName(liElement, asideConfig.className);
|
|
6062
6098
|
this.setElementAttributes(liElement, asideConfig.attributes);
|
|
@@ -6079,18 +6115,19 @@ var pops = (function () {
|
|
|
6079
6115
|
if (Boolean(formConfig.description)) {
|
|
6080
6116
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6081
6117
|
}
|
|
6082
|
-
liElement
|
|
6083
|
-
|
|
6084
|
-
<
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
<
|
|
6089
|
-
|
|
6090
|
-
<
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6118
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6119
|
+
/*html*/ `
|
|
6120
|
+
<div class="pops-panel-item-left-text">
|
|
6121
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6122
|
+
${leftDescriptionText}
|
|
6123
|
+
</div>
|
|
6124
|
+
<div class="pops-panel-switch">
|
|
6125
|
+
<input class="pops-panel-switch__input" type="checkbox">
|
|
6126
|
+
<span class="pops-panel-switch__core">
|
|
6127
|
+
<div class="pops-panel-switch__action">
|
|
6128
|
+
</div>
|
|
6129
|
+
</span>
|
|
6130
|
+
</div>`);
|
|
6094
6131
|
const PopsPanelSwitch = {
|
|
6095
6132
|
[Symbol.toStringTag]: "PopsPanelSwitch",
|
|
6096
6133
|
$data: {
|
|
@@ -6180,14 +6217,16 @@ var pops = (function () {
|
|
|
6180
6217
|
if (Boolean(formConfig.description)) {
|
|
6181
6218
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6182
6219
|
}
|
|
6183
|
-
liElement
|
|
6184
|
-
|
|
6185
|
-
<
|
|
6186
|
-
|
|
6187
|
-
|
|
6188
|
-
|
|
6189
|
-
<
|
|
6190
|
-
|
|
6220
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6221
|
+
/*html*/ `
|
|
6222
|
+
<div class="pops-panel-item-left-text">
|
|
6223
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6224
|
+
${leftDescriptionText}
|
|
6225
|
+
</div>
|
|
6226
|
+
<div class="pops-panel-slider">
|
|
6227
|
+
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
6228
|
+
</div>
|
|
6229
|
+
`);
|
|
6191
6230
|
let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
|
|
6192
6231
|
if (formConfig.step) {
|
|
6193
6232
|
rangeInputElement.setAttribute("step", formConfig.step.toString());
|
|
@@ -6243,19 +6282,20 @@ var pops = (function () {
|
|
|
6243
6282
|
if (Boolean(formConfig.description)) {
|
|
6244
6283
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6245
6284
|
}
|
|
6246
|
-
liElement
|
|
6247
|
-
|
|
6248
|
-
<
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
<div class="pops-slider pops-slider-width">
|
|
6252
|
-
<div class="pops-slider__runway">
|
|
6253
|
-
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6254
|
-
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6255
|
-
<div class="pops-slider__button"></div>
|
|
6256
|
-
</div>
|
|
6285
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6286
|
+
/*html*/ `
|
|
6287
|
+
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
6288
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6289
|
+
${leftDescriptionText}
|
|
6257
6290
|
</div>
|
|
6258
|
-
|
|
6291
|
+
<div class="pops-slider pops-slider-width">
|
|
6292
|
+
<div class="pops-slider__runway">
|
|
6293
|
+
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6294
|
+
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6295
|
+
<div class="pops-slider__button"></div>
|
|
6296
|
+
</div>
|
|
6297
|
+
</div>
|
|
6298
|
+
</div>`);
|
|
6259
6299
|
const PopsPanelSlider = {
|
|
6260
6300
|
[Symbol.toStringTag]: "PopsPanelSlider",
|
|
6261
6301
|
/**
|
|
@@ -6805,15 +6845,16 @@ var pops = (function () {
|
|
|
6805
6845
|
if (Boolean(formConfig.description)) {
|
|
6806
6846
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6807
6847
|
}
|
|
6808
|
-
liElement
|
|
6809
|
-
|
|
6810
|
-
<
|
|
6811
|
-
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
<
|
|
6815
|
-
|
|
6816
|
-
|
|
6848
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6849
|
+
/*html*/ `
|
|
6850
|
+
<div class="pops-panel-item-left-text">
|
|
6851
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6852
|
+
${leftDescriptionText}
|
|
6853
|
+
</div>
|
|
6854
|
+
<div class="pops-panel-input pops-user-select-none">
|
|
6855
|
+
<input type="${inputType}" placeholder="${formConfig.placeholder}">
|
|
6856
|
+
</div>
|
|
6857
|
+
`);
|
|
6817
6858
|
const PopsPanelInput = {
|
|
6818
6859
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
6819
6860
|
$ele: {
|
|
@@ -6856,11 +6897,12 @@ var pops = (function () {
|
|
|
6856
6897
|
initEle() {
|
|
6857
6898
|
this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
|
|
6858
6899
|
this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
|
|
6859
|
-
this.$ele.inputSpanIcon
|
|
6860
|
-
|
|
6861
|
-
<
|
|
6862
|
-
|
|
6863
|
-
|
|
6900
|
+
PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
|
|
6901
|
+
/*html*/ `
|
|
6902
|
+
<span class="pops-panel-input__suffix-inner">
|
|
6903
|
+
<i class="pops-panel-icon"></i>
|
|
6904
|
+
</span>
|
|
6905
|
+
`);
|
|
6864
6906
|
this.$ele.inputSpanIconInner =
|
|
6865
6907
|
this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
|
|
6866
6908
|
this.$ele.icon =
|
|
@@ -6895,7 +6937,7 @@ var pops = (function () {
|
|
|
6895
6937
|
},
|
|
6896
6938
|
/**
|
|
6897
6939
|
* 设置input元素的type
|
|
6898
|
-
* @param
|
|
6940
|
+
* @param [typeValue="text"] type值
|
|
6899
6941
|
*/
|
|
6900
6942
|
setInputType(typeValue = "text") {
|
|
6901
6943
|
this.$ele.input.setAttribute("type", typeValue);
|
|
@@ -6904,14 +6946,14 @@ var pops = (function () {
|
|
|
6904
6946
|
* 删除图标按钮
|
|
6905
6947
|
*/
|
|
6906
6948
|
removeCircleIcon() {
|
|
6907
|
-
this.$ele.icon
|
|
6949
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
|
|
6908
6950
|
},
|
|
6909
6951
|
/**
|
|
6910
6952
|
* 添加清空图标按钮
|
|
6911
|
-
* @param
|
|
6953
|
+
* @param [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
|
|
6912
6954
|
*/
|
|
6913
6955
|
setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
|
|
6914
|
-
this.$ele.icon
|
|
6956
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
6915
6957
|
},
|
|
6916
6958
|
/**
|
|
6917
6959
|
* 添加图标按钮的点击事件
|
|
@@ -7000,16 +7042,17 @@ var pops = (function () {
|
|
|
7000
7042
|
if (Boolean(formConfig.description)) {
|
|
7001
7043
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7002
7044
|
}
|
|
7003
|
-
liElement
|
|
7004
|
-
|
|
7005
|
-
<
|
|
7006
|
-
|
|
7007
|
-
|
|
7008
|
-
|
|
7009
|
-
<
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
|
|
7045
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7046
|
+
/*html*/ `
|
|
7047
|
+
<div class="pops-panel-item-left-text">
|
|
7048
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7049
|
+
${leftDescriptionText}
|
|
7050
|
+
</div>
|
|
7051
|
+
<div class="pops-panel-textarea">
|
|
7052
|
+
<textarea placeholder="${formConfig.placeholder ?? ""}">
|
|
7053
|
+
</textarea>
|
|
7054
|
+
</div>
|
|
7055
|
+
`);
|
|
7013
7056
|
const PopsPanelTextArea = {
|
|
7014
7057
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
7015
7058
|
$ele: {
|
|
@@ -7074,15 +7117,16 @@ var pops = (function () {
|
|
|
7074
7117
|
if (Boolean(formConfig.description)) {
|
|
7075
7118
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7076
7119
|
}
|
|
7077
|
-
liElement
|
|
7078
|
-
|
|
7079
|
-
<
|
|
7080
|
-
|
|
7081
|
-
|
|
7082
|
-
|
|
7083
|
-
<select
|
|
7084
|
-
|
|
7085
|
-
|
|
7120
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7121
|
+
/*html*/ `
|
|
7122
|
+
<div class="pops-panel-item-left-text">
|
|
7123
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7124
|
+
${leftDescriptionText}
|
|
7125
|
+
</div>
|
|
7126
|
+
<div class="pops-panel-select pops-user-select-none">
|
|
7127
|
+
<select></select>
|
|
7128
|
+
</div>
|
|
7129
|
+
`);
|
|
7086
7130
|
const PopsPanelSelect = {
|
|
7087
7131
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
7088
7132
|
$ele: {
|
|
@@ -7269,33 +7313,34 @@ var pops = (function () {
|
|
|
7269
7313
|
if (Boolean(formConfig.description)) {
|
|
7270
7314
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7271
7315
|
}
|
|
7272
|
-
liElement
|
|
7273
|
-
|
|
7274
|
-
<
|
|
7275
|
-
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
<div class="
|
|
7279
|
-
<div class="el-
|
|
7280
|
-
|
|
7281
|
-
|
|
7282
|
-
|
|
7316
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7317
|
+
/*html*/ `
|
|
7318
|
+
<div class="pops-panel-item-left-text">
|
|
7319
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7320
|
+
${leftDescriptionText}
|
|
7321
|
+
</div>
|
|
7322
|
+
<div class="pops-panel-select-multiple">
|
|
7323
|
+
<div class="el-select__wrapper">
|
|
7324
|
+
<div class="el-select__selection">
|
|
7325
|
+
<!-- 这个是用于手动输入的，这里暂不适配 -->
|
|
7326
|
+
<div class="el-select__selected-item el-select__input-wrapper">
|
|
7327
|
+
|
|
7328
|
+
</div>
|
|
7329
|
+
<!-- 这个是placeholder -->
|
|
7330
|
+
<div class="el-select__selected-item el-select__placeholder">
|
|
7331
|
+
</div>
|
|
7283
7332
|
</div>
|
|
7284
|
-
<!--
|
|
7285
|
-
<div class="el-
|
|
7333
|
+
<!-- 下拉箭头 -->
|
|
7334
|
+
<div class="el-select__suffix">
|
|
7335
|
+
<i class="el-icon el-select__caret el-select__icon">
|
|
7336
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7337
|
+
<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
|
|
7338
|
+
</svg>
|
|
7339
|
+
</i>
|
|
7286
7340
|
</div>
|
|
7287
7341
|
</div>
|
|
7288
|
-
<!-- 下拉箭头 -->
|
|
7289
|
-
<div class="el-select__suffix">
|
|
7290
|
-
<i class="el-icon el-select__caret el-select__icon">
|
|
7291
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7292
|
-
<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
|
|
7293
|
-
</svg>
|
|
7294
|
-
</i>
|
|
7295
|
-
</div>
|
|
7296
7342
|
</div>
|
|
7297
|
-
|
|
7298
|
-
`;
|
|
7343
|
+
`);
|
|
7299
7344
|
const PopsPanelSelectMultiple = {
|
|
7300
7345
|
[Symbol.toStringTag]: "PopsPanelSelectMultiple",
|
|
7301
7346
|
$el: {
|
|
@@ -7420,7 +7465,7 @@ var pops = (function () {
|
|
|
7420
7465
|
/** 关闭图标 */
|
|
7421
7466
|
const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
|
|
7422
7467
|
if (data.isHTML) {
|
|
7423
|
-
$tagText
|
|
7468
|
+
PopsSafeUtils.setSafeHTML($tagText, data.text);
|
|
7424
7469
|
}
|
|
7425
7470
|
else {
|
|
7426
7471
|
$tagText.innerText = data.text;
|
|
@@ -7827,18 +7872,19 @@ var pops = (function () {
|
|
|
7827
7872
|
if (Boolean(formConfig.description)) {
|
|
7828
7873
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7829
7874
|
}
|
|
7830
|
-
liElement
|
|
7831
|
-
|
|
7832
|
-
<
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
<
|
|
7837
|
-
<
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
|
|
7875
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7876
|
+
/*html*/ `
|
|
7877
|
+
<div class="pops-panel-item-left-text">
|
|
7878
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7879
|
+
${leftDescriptionText}
|
|
7880
|
+
</div>
|
|
7881
|
+
<div class="pops-panel-button">
|
|
7882
|
+
<button class="pops-panel-button_inner">
|
|
7883
|
+
<i class="pops-bottom-icon"></i>
|
|
7884
|
+
<span class="pops-panel-button-text"></span>
|
|
7885
|
+
</button>
|
|
7886
|
+
</div>
|
|
7887
|
+
`);
|
|
7842
7888
|
const PopsPanelButton = {
|
|
7843
7889
|
[Symbol.toStringTag]: "PopsPanelButton",
|
|
7844
7890
|
$ele: {
|
|
@@ -7908,7 +7954,7 @@ var pops = (function () {
|
|
|
7908
7954
|
* 设置icon图标的svg
|
|
7909
7955
|
*/
|
|
7910
7956
|
setIconSVG(svgHTML) {
|
|
7911
|
-
this.$ele.icon
|
|
7957
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
7912
7958
|
},
|
|
7913
7959
|
/**
|
|
7914
7960
|
* 设置icon图标是否旋转
|
|
@@ -7947,7 +7993,7 @@ var pops = (function () {
|
|
|
7947
7993
|
* @param text
|
|
7948
7994
|
*/
|
|
7949
7995
|
setButtonText(text) {
|
|
7950
|
-
this.$ele.spanText
|
|
7996
|
+
PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
|
|
7951
7997
|
},
|
|
7952
7998
|
setClickEvent() {
|
|
7953
7999
|
popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
|
|
@@ -7993,16 +8039,17 @@ var pops = (function () {
|
|
|
7993
8039
|
if (formConfig.rightText) {
|
|
7994
8040
|
rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
|
|
7995
8041
|
}
|
|
7996
|
-
$li
|
|
7997
|
-
|
|
7998
|
-
<
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8042
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8043
|
+
/*html*/ `
|
|
8044
|
+
<div class="pops-panel-item-left-text">
|
|
8045
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
8046
|
+
${leftDescriptionText}
|
|
8047
|
+
</div>
|
|
8048
|
+
<div class="pops-panel-deepMenu">
|
|
8049
|
+
${rightText}
|
|
8050
|
+
${arrowRightIconHTML}
|
|
8051
|
+
</div>
|
|
8052
|
+
`);
|
|
8006
8053
|
const PopsPanelDeepMenu = {
|
|
8007
8054
|
[Symbol.toStringTag]: "PopsPanelDeepMenu",
|
|
8008
8055
|
$ele: {
|
|
@@ -8032,19 +8079,19 @@ var pops = (function () {
|
|
|
8032
8079
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8033
8080
|
className: "pops-panel-forms-container-item-header-text",
|
|
8034
8081
|
});
|
|
8035
|
-
formHeaderDivElement
|
|
8082
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8036
8083
|
if (formConfig_forms.isFold) {
|
|
8037
8084
|
/* 添加第一个 */
|
|
8038
8085
|
/* 加进容器内 */
|
|
8039
|
-
formHeaderDivElement
|
|
8086
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8087
|
+
/*html*/ `
|
|
8040
8088
|
<p>${formConfig_forms.text}</p>
|
|
8041
8089
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8042
8090
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8043
8091
|
<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
|
|
8044
8092
|
</svg>
|
|
8045
8093
|
</i>
|
|
8046
|
-
|
|
8047
|
-
`;
|
|
8094
|
+
`);
|
|
8048
8095
|
// 添加点击事件
|
|
8049
8096
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8050
8097
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8242,18 +8289,18 @@ var pops = (function () {
|
|
|
8242
8289
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8243
8290
|
className: "pops-panel-forms-container-item-header-text",
|
|
8244
8291
|
});
|
|
8245
|
-
formHeaderDivElement
|
|
8292
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8246
8293
|
if (formConfig_forms.isFold) {
|
|
8247
8294
|
/* 加进容器内 */
|
|
8248
|
-
formHeaderDivElement
|
|
8295
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8296
|
+
/*html*/ `
|
|
8249
8297
|
<p>${formConfig_forms.text}</p>
|
|
8250
8298
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8251
8299
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8252
8300
|
<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
|
|
8253
8301
|
</svg>
|
|
8254
8302
|
</i>
|
|
8255
|
-
|
|
8256
|
-
`;
|
|
8303
|
+
`);
|
|
8257
8304
|
// 添加点击事件
|
|
8258
8305
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8259
8306
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8339,7 +8386,7 @@ var pops = (function () {
|
|
|
8339
8386
|
let containerHeaderTitleLIElement = document.createElement("li");
|
|
8340
8387
|
containerHeaderTitleLIElement["__asideConfig__"] =
|
|
8341
8388
|
asideConfig;
|
|
8342
|
-
containerHeaderTitleLIElement
|
|
8389
|
+
PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
|
|
8343
8390
|
this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
|
|
8344
8391
|
}
|
|
8345
8392
|
let __forms__ = asideLiElement["__forms__"];
|
|
@@ -8628,9 +8675,11 @@ var pops = (function () {
|
|
|
8628
8675
|
pops.config.cssText.rightClickMenu,
|
|
8629
8676
|
]);
|
|
8630
8677
|
if (config.style != null) {
|
|
8631
|
-
let cssNode =
|
|
8632
|
-
|
|
8633
|
-
|
|
8678
|
+
let cssNode = popsDOMUtils.createElement("style", {
|
|
8679
|
+
innerHTML: config.style,
|
|
8680
|
+
}, {
|
|
8681
|
+
type: "text/css",
|
|
8682
|
+
});
|
|
8634
8683
|
$shadowRoot.appendChild(cssNode);
|
|
8635
8684
|
}
|
|
8636
8685
|
const PopsContextMenu = {
|
|
@@ -8939,7 +8988,7 @@ var pops = (function () {
|
|
|
8939
8988
|
menuLiElement.appendChild(iconElement);
|
|
8940
8989
|
}
|
|
8941
8990
|
/* 插入文字 */
|
|
8942
|
-
menuLiElement.insertAdjacentHTML("beforeend", `<span>${item.text}</span>`);
|
|
8991
|
+
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
8943
8992
|
/* 如果存在子数据，显示 */
|
|
8944
8993
|
if (item.item && Array.isArray(item.item)) {
|
|
8945
8994
|
popsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
|
|
@@ -9112,8 +9161,11 @@ var pops = (function () {
|
|
|
9112
9161
|
]);
|
|
9113
9162
|
if (config.style != null) {
|
|
9114
9163
|
let cssNode = document.createElement("style");
|
|
9115
|
-
|
|
9116
|
-
|
|
9164
|
+
popsDOMUtils.createElement("style", {
|
|
9165
|
+
innerHTML: config.style,
|
|
9166
|
+
}, {
|
|
9167
|
+
type: "text/css",
|
|
9168
|
+
});
|
|
9117
9169
|
$shadowRoot.appendChild(cssNode);
|
|
9118
9170
|
}
|
|
9119
9171
|
const SearchSuggestion = {
|
|
@@ -9490,7 +9542,7 @@ var pops = (function () {
|
|
|
9490
9542
|
* 清空所有的搜索结果
|
|
9491
9543
|
*/
|
|
9492
9544
|
clearAllSearchItemLi() {
|
|
9493
|
-
SearchSuggestion.$el.$hintULContainer
|
|
9545
|
+
PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
|
|
9494
9546
|
},
|
|
9495
9547
|
/**
|
|
9496
9548
|
* 更新搜索建议框的位置(top、left)
|
|
@@ -9572,7 +9624,8 @@ var pops = (function () {
|
|
|
9572
9624
|
* 动态更新CSS
|
|
9573
9625
|
*/
|
|
9574
9626
|
updateDynamicCSS() {
|
|
9575
|
-
|
|
9627
|
+
let cssText = this.getDynamicCSS();
|
|
9628
|
+
PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
|
|
9576
9629
|
},
|
|
9577
9630
|
/**
|
|
9578
9631
|
* 更新页面显示的搜索结果
|
|
@@ -9762,7 +9815,7 @@ var pops = (function () {
|
|
|
9762
9815
|
if (text == null) {
|
|
9763
9816
|
text = this.getContent();
|
|
9764
9817
|
}
|
|
9765
|
-
this.$el.$content
|
|
9818
|
+
PopsSafeUtils.setSafeHTML(this.$el.$content, text);
|
|
9766
9819
|
}
|
|
9767
9820
|
/**
|
|
9768
9821
|
* 获取z-index
|
|
@@ -10134,7 +10187,7 @@ var pops = (function () {
|
|
|
10134
10187
|
/** 配置 */
|
|
10135
10188
|
config = {
|
|
10136
10189
|
/** 版本号 */
|
|
10137
|
-
version: "2025.
|
|
10190
|
+
version: "2025.3.2",
|
|
10138
10191
|
cssText: {
|
|
10139
10192
|
/** 主CSS */
|
|
10140
10193
|
index: indexCSS,
|
|
@@ -10239,7 +10292,7 @@ var pops = (function () {
|
|
|
10239
10292
|
/* 处理获取当前所有的动画名 */
|
|
10240
10293
|
this.config.isInit = true;
|
|
10241
10294
|
let animationStyle = document.createElement("style");
|
|
10242
|
-
animationStyle
|
|
10295
|
+
PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
|
|
10243
10296
|
popsDOMUtils.appendHead(animationStyle);
|
|
10244
10297
|
this.config.animation = null;
|
|
10245
10298
|
this.config.animation = PopsInstanceUtils.getKeyFrames(animationStyle.sheet);
|