@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.esm.js
CHANGED
|
@@ -310,6 +310,32 @@ class PopsUtils {
|
|
|
310
310
|
}
|
|
311
311
|
const popsUtils = new PopsUtils();
|
|
312
312
|
|
|
313
|
+
const PopsSafeUtils = {
|
|
314
|
+
/**
|
|
315
|
+
* 获取安全的html
|
|
316
|
+
*/
|
|
317
|
+
getSafeHTML(text) {
|
|
318
|
+
// @ts-ignore
|
|
319
|
+
if (globalThis.trustedTypes) {
|
|
320
|
+
// @ts-ignore
|
|
321
|
+
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
322
|
+
createHTML: (html) => html,
|
|
323
|
+
});
|
|
324
|
+
return policy.createHTML(text);
|
|
325
|
+
}
|
|
326
|
+
else {
|
|
327
|
+
return text;
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
/**
|
|
331
|
+
* 设置安全的html
|
|
332
|
+
*/
|
|
333
|
+
setSafeHTML($el, text) {
|
|
334
|
+
// 创建 TrustedHTML 策略（需 CSP 允许）
|
|
335
|
+
$el.innerHTML = this.getSafeHTML(text);
|
|
336
|
+
},
|
|
337
|
+
};
|
|
338
|
+
|
|
313
339
|
class PopsDOMUtilsEvent {
|
|
314
340
|
on(element, eventType, selector, callback, option) {
|
|
315
341
|
/**
|
|
@@ -1247,7 +1273,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1247
1273
|
attributes) {
|
|
1248
1274
|
let tempElement = PopsCore.document.createElement(tagName);
|
|
1249
1275
|
if (typeof property === "string") {
|
|
1250
|
-
tempElement
|
|
1276
|
+
PopsSafeUtils.setSafeHTML(tempElement, property);
|
|
1251
1277
|
return tempElement;
|
|
1252
1278
|
}
|
|
1253
1279
|
if (property == null) {
|
|
@@ -1258,6 +1284,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1258
1284
|
}
|
|
1259
1285
|
Object.keys(property).forEach((key) => {
|
|
1260
1286
|
let value = property[key];
|
|
1287
|
+
if (key === "innerHTML") {
|
|
1288
|
+
PopsSafeUtils.setSafeHTML(tempElement, value);
|
|
1289
|
+
return;
|
|
1290
|
+
}
|
|
1291
|
+
// @ts-ignore
|
|
1261
1292
|
tempElement[key] = value;
|
|
1262
1293
|
});
|
|
1263
1294
|
Object.keys(attributes).forEach((key) => {
|
|
@@ -1460,7 +1491,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1460
1491
|
}
|
|
1461
1492
|
function parseHTMLByCreateDom() {
|
|
1462
1493
|
let tempDIV = PopsCore.document.createElement("div");
|
|
1463
|
-
tempDIV
|
|
1494
|
+
PopsSafeUtils.setSafeHTML(tempDIV, html);
|
|
1464
1495
|
if (isComplete) {
|
|
1465
1496
|
return tempDIV;
|
|
1466
1497
|
}
|
|
@@ -1493,7 +1524,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1493
1524
|
}
|
|
1494
1525
|
function elementAppendChild(ele, text) {
|
|
1495
1526
|
if (typeof content === "string") {
|
|
1496
|
-
ele.insertAdjacentHTML("beforeend", text);
|
|
1527
|
+
ele.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(text));
|
|
1497
1528
|
}
|
|
1498
1529
|
else {
|
|
1499
1530
|
ele.appendChild(text);
|
|
@@ -1628,7 +1659,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1628
1659
|
return;
|
|
1629
1660
|
}
|
|
1630
1661
|
if (typeof content === "string") {
|
|
1631
|
-
element.insertAdjacentHTML("beforebegin", content);
|
|
1662
|
+
element.insertAdjacentHTML("beforebegin", PopsSafeUtils.getSafeHTML(content));
|
|
1632
1663
|
}
|
|
1633
1664
|
else {
|
|
1634
1665
|
element.parentElement.insertBefore(content, element);
|
|
@@ -1651,7 +1682,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1651
1682
|
return;
|
|
1652
1683
|
}
|
|
1653
1684
|
if (typeof content === "string") {
|
|
1654
|
-
element.insertAdjacentHTML("afterend", content);
|
|
1685
|
+
element.insertAdjacentHTML("afterend", PopsSafeUtils.getSafeHTML(content));
|
|
1655
1686
|
}
|
|
1656
1687
|
else {
|
|
1657
1688
|
element.parentElement.insertBefore(content, element.nextSibling);
|
|
@@ -4856,26 +4887,29 @@ class PopsFolder {
|
|
|
4856
4887
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4857
4888
|
fileTimeElement.className = "pops-folder-list-table__body-td";
|
|
4858
4889
|
fileFormatSize.className = "pops-folder-list-table__body-td";
|
|
4859
|
-
fileNameElement
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4890
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4891
|
+
/*html*/ `
|
|
4892
|
+
<div class="pops-folder-list-file-name cursor-p">
|
|
4893
|
+
<div>
|
|
4894
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4895
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4896
|
+
${fileName}
|
|
4897
|
+
</a>
|
|
4898
|
+
</div>
|
|
4899
|
+
</div>
|
|
4900
|
+
`);
|
|
4901
|
+
PopsSafeUtils.setSafeHTML(fileTimeElement,
|
|
4902
|
+
/*html*/ `
|
|
4903
|
+
<div class="pops-folder-list__time">
|
|
4904
|
+
<span>${latestTime}</span>
|
|
4905
|
+
</div>
|
|
4906
|
+
`);
|
|
4907
|
+
PopsSafeUtils.setSafeHTML(fileFormatSize,
|
|
4908
|
+
/*html*/ `
|
|
4909
|
+
<div class="pops-folder-list-format-size">
|
|
4910
|
+
<span>${fileSize}</span>
|
|
4911
|
+
</div>
|
|
4912
|
+
`);
|
|
4879
4913
|
/* 存储原来的值 */
|
|
4880
4914
|
let __value__ = {
|
|
4881
4915
|
fileName: origin_fileName,
|
|
@@ -4936,17 +4970,18 @@ class PopsFolder {
|
|
|
4936
4970
|
}
|
|
4937
4971
|
folderELement.className = "pops-folder-list-table__body-row";
|
|
4938
4972
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4939
|
-
fileNameElement
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4973
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4974
|
+
/*html*/ `
|
|
4975
|
+
<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
|
|
4976
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4977
|
+
<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>
|
|
4981
|
+
<span>${latestTime} ${fileSize}</span>
|
|
4982
|
+
</div>
|
|
4983
|
+
</div>
|
|
4984
|
+
`);
|
|
4950
4985
|
/* 存储原来的值 */
|
|
4951
4986
|
let __value__ = {
|
|
4952
4987
|
fileName: origin_fileName,
|
|
@@ -4966,7 +5001,7 @@ class PopsFolder {
|
|
|
4966
5001
|
* 清空每行的元素
|
|
4967
5002
|
*/
|
|
4968
5003
|
function clearFolerRow() {
|
|
4969
|
-
folderListBodyElement
|
|
5004
|
+
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
4970
5005
|
}
|
|
4971
5006
|
function getArrowIconElement() {
|
|
4972
5007
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
@@ -5965,8 +6000,8 @@ const PanelHandleContentDetails = () => {
|
|
|
5965
6000
|
* 清空container容器的元素
|
|
5966
6001
|
*/
|
|
5967
6002
|
clearContainer() {
|
|
5968
|
-
this.sectionContainerHeaderULElement
|
|
5969
|
-
this.sectionContainerULElement
|
|
6003
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
|
|
6004
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
|
|
5970
6005
|
this.$el.$content
|
|
5971
6006
|
?.querySelectorAll("section.pops-panel-deepMenu-container")
|
|
5972
6007
|
.forEach((ele) => ele.remove());
|
|
@@ -6052,8 +6087,9 @@ const PanelHandleContentDetails = () => {
|
|
|
6052
6087
|
createAsideItem(asideConfig) {
|
|
6053
6088
|
let liElement = document.createElement("li");
|
|
6054
6089
|
liElement.id = asideConfig.id;
|
|
6090
|
+
// @ts-ignore
|
|
6055
6091
|
liElement["__forms__"] = asideConfig.forms;
|
|
6056
|
-
liElement
|
|
6092
|
+
PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
|
|
6057
6093
|
/* 处理className */
|
|
6058
6094
|
this.setElementClassName(liElement, asideConfig.className);
|
|
6059
6095
|
this.setElementAttributes(liElement, asideConfig.attributes);
|
|
@@ -6076,18 +6112,19 @@ const PanelHandleContentDetails = () => {
|
|
|
6076
6112
|
if (Boolean(formConfig.description)) {
|
|
6077
6113
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6078
6114
|
}
|
|
6079
|
-
liElement
|
|
6080
|
-
|
|
6081
|
-
<
|
|
6082
|
-
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
<
|
|
6086
|
-
|
|
6087
|
-
<
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6115
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6116
|
+
/*html*/ `
|
|
6117
|
+
<div class="pops-panel-item-left-text">
|
|
6118
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6119
|
+
${leftDescriptionText}
|
|
6120
|
+
</div>
|
|
6121
|
+
<div class="pops-panel-switch">
|
|
6122
|
+
<input class="pops-panel-switch__input" type="checkbox">
|
|
6123
|
+
<span class="pops-panel-switch__core">
|
|
6124
|
+
<div class="pops-panel-switch__action">
|
|
6125
|
+
</div>
|
|
6126
|
+
</span>
|
|
6127
|
+
</div>`);
|
|
6091
6128
|
const PopsPanelSwitch = {
|
|
6092
6129
|
[Symbol.toStringTag]: "PopsPanelSwitch",
|
|
6093
6130
|
$data: {
|
|
@@ -6177,14 +6214,16 @@ const PanelHandleContentDetails = () => {
|
|
|
6177
6214
|
if (Boolean(formConfig.description)) {
|
|
6178
6215
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6179
6216
|
}
|
|
6180
|
-
liElement
|
|
6181
|
-
|
|
6182
|
-
<
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
<
|
|
6187
|
-
|
|
6217
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6218
|
+
/*html*/ `
|
|
6219
|
+
<div class="pops-panel-item-left-text">
|
|
6220
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6221
|
+
${leftDescriptionText}
|
|
6222
|
+
</div>
|
|
6223
|
+
<div class="pops-panel-slider">
|
|
6224
|
+
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
6225
|
+
</div>
|
|
6226
|
+
`);
|
|
6188
6227
|
let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
|
|
6189
6228
|
if (formConfig.step) {
|
|
6190
6229
|
rangeInputElement.setAttribute("step", formConfig.step.toString());
|
|
@@ -6240,19 +6279,20 @@ const PanelHandleContentDetails = () => {
|
|
|
6240
6279
|
if (Boolean(formConfig.description)) {
|
|
6241
6280
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6242
6281
|
}
|
|
6243
|
-
liElement
|
|
6244
|
-
|
|
6245
|
-
<
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
<div class="pops-slider pops-slider-width">
|
|
6249
|
-
<div class="pops-slider__runway">
|
|
6250
|
-
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6251
|
-
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6252
|
-
<div class="pops-slider__button"></div>
|
|
6253
|
-
</div>
|
|
6282
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6283
|
+
/*html*/ `
|
|
6284
|
+
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
6285
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6286
|
+
${leftDescriptionText}
|
|
6254
6287
|
</div>
|
|
6255
|
-
|
|
6288
|
+
<div class="pops-slider pops-slider-width">
|
|
6289
|
+
<div class="pops-slider__runway">
|
|
6290
|
+
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6291
|
+
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6292
|
+
<div class="pops-slider__button"></div>
|
|
6293
|
+
</div>
|
|
6294
|
+
</div>
|
|
6295
|
+
</div>`);
|
|
6256
6296
|
const PopsPanelSlider = {
|
|
6257
6297
|
[Symbol.toStringTag]: "PopsPanelSlider",
|
|
6258
6298
|
/**
|
|
@@ -6802,15 +6842,16 @@ const PanelHandleContentDetails = () => {
|
|
|
6802
6842
|
if (Boolean(formConfig.description)) {
|
|
6803
6843
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6804
6844
|
}
|
|
6805
|
-
liElement
|
|
6806
|
-
|
|
6807
|
-
<
|
|
6808
|
-
|
|
6809
|
-
|
|
6810
|
-
|
|
6811
|
-
<
|
|
6812
|
-
|
|
6813
|
-
|
|
6845
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6846
|
+
/*html*/ `
|
|
6847
|
+
<div class="pops-panel-item-left-text">
|
|
6848
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6849
|
+
${leftDescriptionText}
|
|
6850
|
+
</div>
|
|
6851
|
+
<div class="pops-panel-input pops-user-select-none">
|
|
6852
|
+
<input type="${inputType}" placeholder="${formConfig.placeholder}">
|
|
6853
|
+
</div>
|
|
6854
|
+
`);
|
|
6814
6855
|
const PopsPanelInput = {
|
|
6815
6856
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
6816
6857
|
$ele: {
|
|
@@ -6853,11 +6894,12 @@ const PanelHandleContentDetails = () => {
|
|
|
6853
6894
|
initEle() {
|
|
6854
6895
|
this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
|
|
6855
6896
|
this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
|
|
6856
|
-
this.$ele.inputSpanIcon
|
|
6857
|
-
|
|
6858
|
-
<
|
|
6859
|
-
|
|
6860
|
-
|
|
6897
|
+
PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
|
|
6898
|
+
/*html*/ `
|
|
6899
|
+
<span class="pops-panel-input__suffix-inner">
|
|
6900
|
+
<i class="pops-panel-icon"></i>
|
|
6901
|
+
</span>
|
|
6902
|
+
`);
|
|
6861
6903
|
this.$ele.inputSpanIconInner =
|
|
6862
6904
|
this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
|
|
6863
6905
|
this.$ele.icon =
|
|
@@ -6892,7 +6934,7 @@ const PanelHandleContentDetails = () => {
|
|
|
6892
6934
|
},
|
|
6893
6935
|
/**
|
|
6894
6936
|
* 设置input元素的type
|
|
6895
|
-
* @param
|
|
6937
|
+
* @param [typeValue="text"] type值
|
|
6896
6938
|
*/
|
|
6897
6939
|
setInputType(typeValue = "text") {
|
|
6898
6940
|
this.$ele.input.setAttribute("type", typeValue);
|
|
@@ -6901,14 +6943,14 @@ const PanelHandleContentDetails = () => {
|
|
|
6901
6943
|
* 删除图标按钮
|
|
6902
6944
|
*/
|
|
6903
6945
|
removeCircleIcon() {
|
|
6904
|
-
this.$ele.icon
|
|
6946
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
|
|
6905
6947
|
},
|
|
6906
6948
|
/**
|
|
6907
6949
|
* 添加清空图标按钮
|
|
6908
|
-
* @param
|
|
6950
|
+
* @param [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
|
|
6909
6951
|
*/
|
|
6910
6952
|
setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
|
|
6911
|
-
this.$ele.icon
|
|
6953
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
6912
6954
|
},
|
|
6913
6955
|
/**
|
|
6914
6956
|
* 添加图标按钮的点击事件
|
|
@@ -6997,16 +7039,17 @@ const PanelHandleContentDetails = () => {
|
|
|
6997
7039
|
if (Boolean(formConfig.description)) {
|
|
6998
7040
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6999
7041
|
}
|
|
7000
|
-
liElement
|
|
7001
|
-
|
|
7002
|
-
<
|
|
7003
|
-
|
|
7004
|
-
|
|
7005
|
-
|
|
7006
|
-
<
|
|
7007
|
-
|
|
7008
|
-
|
|
7009
|
-
|
|
7042
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7043
|
+
/*html*/ `
|
|
7044
|
+
<div class="pops-panel-item-left-text">
|
|
7045
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7046
|
+
${leftDescriptionText}
|
|
7047
|
+
</div>
|
|
7048
|
+
<div class="pops-panel-textarea">
|
|
7049
|
+
<textarea placeholder="${formConfig.placeholder ?? ""}">
|
|
7050
|
+
</textarea>
|
|
7051
|
+
</div>
|
|
7052
|
+
`);
|
|
7010
7053
|
const PopsPanelTextArea = {
|
|
7011
7054
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
7012
7055
|
$ele: {
|
|
@@ -7071,15 +7114,16 @@ const PanelHandleContentDetails = () => {
|
|
|
7071
7114
|
if (Boolean(formConfig.description)) {
|
|
7072
7115
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7073
7116
|
}
|
|
7074
|
-
liElement
|
|
7075
|
-
|
|
7076
|
-
<
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
<select
|
|
7081
|
-
|
|
7082
|
-
|
|
7117
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7118
|
+
/*html*/ `
|
|
7119
|
+
<div class="pops-panel-item-left-text">
|
|
7120
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7121
|
+
${leftDescriptionText}
|
|
7122
|
+
</div>
|
|
7123
|
+
<div class="pops-panel-select pops-user-select-none">
|
|
7124
|
+
<select></select>
|
|
7125
|
+
</div>
|
|
7126
|
+
`);
|
|
7083
7127
|
const PopsPanelSelect = {
|
|
7084
7128
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
7085
7129
|
$ele: {
|
|
@@ -7266,33 +7310,34 @@ const PanelHandleContentDetails = () => {
|
|
|
7266
7310
|
if (Boolean(formConfig.description)) {
|
|
7267
7311
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7268
7312
|
}
|
|
7269
|
-
liElement
|
|
7270
|
-
|
|
7271
|
-
<
|
|
7272
|
-
|
|
7273
|
-
|
|
7274
|
-
|
|
7275
|
-
<div class="
|
|
7276
|
-
<div class="el-
|
|
7277
|
-
|
|
7278
|
-
|
|
7279
|
-
|
|
7313
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7314
|
+
/*html*/ `
|
|
7315
|
+
<div class="pops-panel-item-left-text">
|
|
7316
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7317
|
+
${leftDescriptionText}
|
|
7318
|
+
</div>
|
|
7319
|
+
<div class="pops-panel-select-multiple">
|
|
7320
|
+
<div class="el-select__wrapper">
|
|
7321
|
+
<div class="el-select__selection">
|
|
7322
|
+
<!-- 这个是用于手动输入的，这里暂不适配 -->
|
|
7323
|
+
<div class="el-select__selected-item el-select__input-wrapper">
|
|
7324
|
+
|
|
7325
|
+
</div>
|
|
7326
|
+
<!-- 这个是placeholder -->
|
|
7327
|
+
<div class="el-select__selected-item el-select__placeholder">
|
|
7328
|
+
</div>
|
|
7280
7329
|
</div>
|
|
7281
|
-
<!--
|
|
7282
|
-
<div class="el-
|
|
7330
|
+
<!-- 下拉箭头 -->
|
|
7331
|
+
<div class="el-select__suffix">
|
|
7332
|
+
<i class="el-icon el-select__caret el-select__icon">
|
|
7333
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7334
|
+
<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>
|
|
7335
|
+
</svg>
|
|
7336
|
+
</i>
|
|
7283
7337
|
</div>
|
|
7284
7338
|
</div>
|
|
7285
|
-
<!-- 下拉箭头 -->
|
|
7286
|
-
<div class="el-select__suffix">
|
|
7287
|
-
<i class="el-icon el-select__caret el-select__icon">
|
|
7288
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7289
|
-
<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>
|
|
7290
|
-
</svg>
|
|
7291
|
-
</i>
|
|
7292
|
-
</div>
|
|
7293
7339
|
</div>
|
|
7294
|
-
|
|
7295
|
-
`;
|
|
7340
|
+
`);
|
|
7296
7341
|
const PopsPanelSelectMultiple = {
|
|
7297
7342
|
[Symbol.toStringTag]: "PopsPanelSelectMultiple",
|
|
7298
7343
|
$el: {
|
|
@@ -7417,7 +7462,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7417
7462
|
/** 关闭图标 */
|
|
7418
7463
|
const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
|
|
7419
7464
|
if (data.isHTML) {
|
|
7420
|
-
$tagText
|
|
7465
|
+
PopsSafeUtils.setSafeHTML($tagText, data.text);
|
|
7421
7466
|
}
|
|
7422
7467
|
else {
|
|
7423
7468
|
$tagText.innerText = data.text;
|
|
@@ -7824,18 +7869,19 @@ const PanelHandleContentDetails = () => {
|
|
|
7824
7869
|
if (Boolean(formConfig.description)) {
|
|
7825
7870
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7826
7871
|
}
|
|
7827
|
-
liElement
|
|
7828
|
-
|
|
7829
|
-
<
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
|
|
7833
|
-
<
|
|
7834
|
-
<
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7872
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7873
|
+
/*html*/ `
|
|
7874
|
+
<div class="pops-panel-item-left-text">
|
|
7875
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7876
|
+
${leftDescriptionText}
|
|
7877
|
+
</div>
|
|
7878
|
+
<div class="pops-panel-button">
|
|
7879
|
+
<button class="pops-panel-button_inner">
|
|
7880
|
+
<i class="pops-bottom-icon"></i>
|
|
7881
|
+
<span class="pops-panel-button-text"></span>
|
|
7882
|
+
</button>
|
|
7883
|
+
</div>
|
|
7884
|
+
`);
|
|
7839
7885
|
const PopsPanelButton = {
|
|
7840
7886
|
[Symbol.toStringTag]: "PopsPanelButton",
|
|
7841
7887
|
$ele: {
|
|
@@ -7905,7 +7951,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7905
7951
|
* 设置icon图标的svg
|
|
7906
7952
|
*/
|
|
7907
7953
|
setIconSVG(svgHTML) {
|
|
7908
|
-
this.$ele.icon
|
|
7954
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
7909
7955
|
},
|
|
7910
7956
|
/**
|
|
7911
7957
|
* 设置icon图标是否旋转
|
|
@@ -7944,7 +7990,7 @@ const PanelHandleContentDetails = () => {
|
|
|
7944
7990
|
* @param text
|
|
7945
7991
|
*/
|
|
7946
7992
|
setButtonText(text) {
|
|
7947
|
-
this.$ele.spanText
|
|
7993
|
+
PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
|
|
7948
7994
|
},
|
|
7949
7995
|
setClickEvent() {
|
|
7950
7996
|
popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
|
|
@@ -7990,16 +8036,17 @@ const PanelHandleContentDetails = () => {
|
|
|
7990
8036
|
if (formConfig.rightText) {
|
|
7991
8037
|
rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
|
|
7992
8038
|
}
|
|
7993
|
-
$li
|
|
7994
|
-
|
|
7995
|
-
<
|
|
7996
|
-
|
|
7997
|
-
|
|
7998
|
-
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8039
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8040
|
+
/*html*/ `
|
|
8041
|
+
<div class="pops-panel-item-left-text">
|
|
8042
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
8043
|
+
${leftDescriptionText}
|
|
8044
|
+
</div>
|
|
8045
|
+
<div class="pops-panel-deepMenu">
|
|
8046
|
+
${rightText}
|
|
8047
|
+
${arrowRightIconHTML}
|
|
8048
|
+
</div>
|
|
8049
|
+
`);
|
|
8003
8050
|
const PopsPanelDeepMenu = {
|
|
8004
8051
|
[Symbol.toStringTag]: "PopsPanelDeepMenu",
|
|
8005
8052
|
$ele: {
|
|
@@ -8029,19 +8076,19 @@ const PanelHandleContentDetails = () => {
|
|
|
8029
8076
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8030
8077
|
className: "pops-panel-forms-container-item-header-text",
|
|
8031
8078
|
});
|
|
8032
|
-
formHeaderDivElement
|
|
8079
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8033
8080
|
if (formConfig_forms.isFold) {
|
|
8034
8081
|
/* 添加第一个 */
|
|
8035
8082
|
/* 加进容器内 */
|
|
8036
|
-
formHeaderDivElement
|
|
8083
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8084
|
+
/*html*/ `
|
|
8037
8085
|
<p>${formConfig_forms.text}</p>
|
|
8038
8086
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8039
8087
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8040
8088
|
<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>
|
|
8041
8089
|
</svg>
|
|
8042
8090
|
</i>
|
|
8043
|
-
|
|
8044
|
-
`;
|
|
8091
|
+
`);
|
|
8045
8092
|
// 添加点击事件
|
|
8046
8093
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8047
8094
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8239,18 +8286,18 @@ const PanelHandleContentDetails = () => {
|
|
|
8239
8286
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8240
8287
|
className: "pops-panel-forms-container-item-header-text",
|
|
8241
8288
|
});
|
|
8242
|
-
formHeaderDivElement
|
|
8289
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8243
8290
|
if (formConfig_forms.isFold) {
|
|
8244
8291
|
/* 加进容器内 */
|
|
8245
|
-
formHeaderDivElement
|
|
8292
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8293
|
+
/*html*/ `
|
|
8246
8294
|
<p>${formConfig_forms.text}</p>
|
|
8247
8295
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8248
8296
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8249
8297
|
<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>
|
|
8250
8298
|
</svg>
|
|
8251
8299
|
</i>
|
|
8252
|
-
|
|
8253
|
-
`;
|
|
8300
|
+
`);
|
|
8254
8301
|
// 添加点击事件
|
|
8255
8302
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8256
8303
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8336,7 +8383,7 @@ const PanelHandleContentDetails = () => {
|
|
|
8336
8383
|
let containerHeaderTitleLIElement = document.createElement("li");
|
|
8337
8384
|
containerHeaderTitleLIElement["__asideConfig__"] =
|
|
8338
8385
|
asideConfig;
|
|
8339
|
-
containerHeaderTitleLIElement
|
|
8386
|
+
PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
|
|
8340
8387
|
this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
|
|
8341
8388
|
}
|
|
8342
8389
|
let __forms__ = asideLiElement["__forms__"];
|
|
@@ -8625,9 +8672,11 @@ class PopsRightClickMenu {
|
|
|
8625
8672
|
pops.config.cssText.rightClickMenu,
|
|
8626
8673
|
]);
|
|
8627
8674
|
if (config.style != null) {
|
|
8628
|
-
let cssNode =
|
|
8629
|
-
|
|
8630
|
-
|
|
8675
|
+
let cssNode = popsDOMUtils.createElement("style", {
|
|
8676
|
+
innerHTML: config.style,
|
|
8677
|
+
}, {
|
|
8678
|
+
type: "text/css",
|
|
8679
|
+
});
|
|
8631
8680
|
$shadowRoot.appendChild(cssNode);
|
|
8632
8681
|
}
|
|
8633
8682
|
const PopsContextMenu = {
|
|
@@ -8936,7 +8985,7 @@ class PopsRightClickMenu {
|
|
|
8936
8985
|
menuLiElement.appendChild(iconElement);
|
|
8937
8986
|
}
|
|
8938
8987
|
/* 插入文字 */
|
|
8939
|
-
menuLiElement.insertAdjacentHTML("beforeend", `<span>${item.text}</span>`);
|
|
8988
|
+
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
8940
8989
|
/* 如果存在子数据，显示 */
|
|
8941
8990
|
if (item.item && Array.isArray(item.item)) {
|
|
8942
8991
|
popsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
|
|
@@ -9109,8 +9158,11 @@ class PopsSearchSuggestion {
|
|
|
9109
9158
|
]);
|
|
9110
9159
|
if (config.style != null) {
|
|
9111
9160
|
let cssNode = document.createElement("style");
|
|
9112
|
-
|
|
9113
|
-
|
|
9161
|
+
popsDOMUtils.createElement("style", {
|
|
9162
|
+
innerHTML: config.style,
|
|
9163
|
+
}, {
|
|
9164
|
+
type: "text/css",
|
|
9165
|
+
});
|
|
9114
9166
|
$shadowRoot.appendChild(cssNode);
|
|
9115
9167
|
}
|
|
9116
9168
|
const SearchSuggestion = {
|
|
@@ -9487,7 +9539,7 @@ class PopsSearchSuggestion {
|
|
|
9487
9539
|
* 清空所有的搜索结果
|
|
9488
9540
|
*/
|
|
9489
9541
|
clearAllSearchItemLi() {
|
|
9490
|
-
SearchSuggestion.$el.$hintULContainer
|
|
9542
|
+
PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
|
|
9491
9543
|
},
|
|
9492
9544
|
/**
|
|
9493
9545
|
* 更新搜索建议框的位置(top、left)
|
|
@@ -9569,7 +9621,8 @@ class PopsSearchSuggestion {
|
|
|
9569
9621
|
* 动态更新CSS
|
|
9570
9622
|
*/
|
|
9571
9623
|
updateDynamicCSS() {
|
|
9572
|
-
|
|
9624
|
+
let cssText = this.getDynamicCSS();
|
|
9625
|
+
PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
|
|
9573
9626
|
},
|
|
9574
9627
|
/**
|
|
9575
9628
|
* 更新页面显示的搜索结果
|
|
@@ -9759,7 +9812,7 @@ class ToolTip {
|
|
|
9759
9812
|
if (text == null) {
|
|
9760
9813
|
text = this.getContent();
|
|
9761
9814
|
}
|
|
9762
|
-
this.$el.$content
|
|
9815
|
+
PopsSafeUtils.setSafeHTML(this.$el.$content, text);
|
|
9763
9816
|
}
|
|
9764
9817
|
/**
|
|
9765
9818
|
* 获取z-index
|
|
@@ -10131,7 +10184,7 @@ class Pops {
|
|
|
10131
10184
|
/** 配置 */
|
|
10132
10185
|
config = {
|
|
10133
10186
|
/** 版本号 */
|
|
10134
|
-
version: "2025.
|
|
10187
|
+
version: "2025.3.2",
|
|
10135
10188
|
cssText: {
|
|
10136
10189
|
/** 主CSS */
|
|
10137
10190
|
index: indexCSS,
|
|
@@ -10236,7 +10289,7 @@ class Pops {
|
|
|
10236
10289
|
/* 处理获取当前所有的动画名 */
|
|
10237
10290
|
this.config.isInit = true;
|
|
10238
10291
|
let animationStyle = document.createElement("style");
|
|
10239
|
-
animationStyle
|
|
10292
|
+
PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
|
|
10240
10293
|
popsDOMUtils.appendHead(animationStyle);
|
|
10241
10294
|
this.config.animation = null;
|
|
10242
10295
|
this.config.animation = PopsInstanceUtils.getKeyFrames(animationStyle.sheet);
|