@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.umd.js
CHANGED
|
@@ -316,6 +316,32 @@
|
|
|
316
316
|
}
|
|
317
317
|
const popsUtils = new PopsUtils();
|
|
318
318
|
|
|
319
|
+
const PopsSafeUtils = {
|
|
320
|
+
/**
|
|
321
|
+
* 获取安全的html
|
|
322
|
+
*/
|
|
323
|
+
getSafeHTML(text) {
|
|
324
|
+
// @ts-ignore
|
|
325
|
+
if (globalThis.trustedTypes) {
|
|
326
|
+
// @ts-ignore
|
|
327
|
+
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
328
|
+
createHTML: (html) => html,
|
|
329
|
+
});
|
|
330
|
+
return policy.createHTML(text);
|
|
331
|
+
}
|
|
332
|
+
else {
|
|
333
|
+
return text;
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
/**
|
|
337
|
+
* 设置安全的html
|
|
338
|
+
*/
|
|
339
|
+
setSafeHTML($el, text) {
|
|
340
|
+
// 创建 TrustedHTML 策略（需 CSP 允许）
|
|
341
|
+
$el.innerHTML = this.getSafeHTML(text);
|
|
342
|
+
},
|
|
343
|
+
};
|
|
344
|
+
|
|
319
345
|
class PopsDOMUtilsEvent {
|
|
320
346
|
on(element, eventType, selector, callback, option) {
|
|
321
347
|
/**
|
|
@@ -1253,7 +1279,7 @@
|
|
|
1253
1279
|
attributes) {
|
|
1254
1280
|
let tempElement = PopsCore.document.createElement(tagName);
|
|
1255
1281
|
if (typeof property === "string") {
|
|
1256
|
-
tempElement
|
|
1282
|
+
PopsSafeUtils.setSafeHTML(tempElement, property);
|
|
1257
1283
|
return tempElement;
|
|
1258
1284
|
}
|
|
1259
1285
|
if (property == null) {
|
|
@@ -1264,6 +1290,11 @@
|
|
|
1264
1290
|
}
|
|
1265
1291
|
Object.keys(property).forEach((key) => {
|
|
1266
1292
|
let value = property[key];
|
|
1293
|
+
if (key === "innerHTML") {
|
|
1294
|
+
PopsSafeUtils.setSafeHTML(tempElement, value);
|
|
1295
|
+
return;
|
|
1296
|
+
}
|
|
1297
|
+
// @ts-ignore
|
|
1267
1298
|
tempElement[key] = value;
|
|
1268
1299
|
});
|
|
1269
1300
|
Object.keys(attributes).forEach((key) => {
|
|
@@ -1466,7 +1497,7 @@
|
|
|
1466
1497
|
}
|
|
1467
1498
|
function parseHTMLByCreateDom() {
|
|
1468
1499
|
let tempDIV = PopsCore.document.createElement("div");
|
|
1469
|
-
tempDIV
|
|
1500
|
+
PopsSafeUtils.setSafeHTML(tempDIV, html);
|
|
1470
1501
|
if (isComplete) {
|
|
1471
1502
|
return tempDIV;
|
|
1472
1503
|
}
|
|
@@ -1499,7 +1530,7 @@
|
|
|
1499
1530
|
}
|
|
1500
1531
|
function elementAppendChild(ele, text) {
|
|
1501
1532
|
if (typeof content === "string") {
|
|
1502
|
-
ele.insertAdjacentHTML("beforeend", text);
|
|
1533
|
+
ele.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(text));
|
|
1503
1534
|
}
|
|
1504
1535
|
else {
|
|
1505
1536
|
ele.appendChild(text);
|
|
@@ -1634,7 +1665,7 @@
|
|
|
1634
1665
|
return;
|
|
1635
1666
|
}
|
|
1636
1667
|
if (typeof content === "string") {
|
|
1637
|
-
element.insertAdjacentHTML("beforebegin", content);
|
|
1668
|
+
element.insertAdjacentHTML("beforebegin", PopsSafeUtils.getSafeHTML(content));
|
|
1638
1669
|
}
|
|
1639
1670
|
else {
|
|
1640
1671
|
element.parentElement.insertBefore(content, element);
|
|
@@ -1657,7 +1688,7 @@
|
|
|
1657
1688
|
return;
|
|
1658
1689
|
}
|
|
1659
1690
|
if (typeof content === "string") {
|
|
1660
|
-
element.insertAdjacentHTML("afterend", content);
|
|
1691
|
+
element.insertAdjacentHTML("afterend", PopsSafeUtils.getSafeHTML(content));
|
|
1661
1692
|
}
|
|
1662
1693
|
else {
|
|
1663
1694
|
element.parentElement.insertBefore(content, element.nextSibling);
|
|
@@ -4862,26 +4893,29 @@
|
|
|
4862
4893
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4863
4894
|
fileTimeElement.className = "pops-folder-list-table__body-td";
|
|
4864
4895
|
fileFormatSize.className = "pops-folder-list-table__body-td";
|
|
4865
|
-
fileNameElement
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4896
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4897
|
+
/*html*/ `
|
|
4898
|
+
<div class="pops-folder-list-file-name cursor-p">
|
|
4899
|
+
<div>
|
|
4900
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4901
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4902
|
+
${fileName}
|
|
4903
|
+
</a>
|
|
4904
|
+
</div>
|
|
4905
|
+
</div>
|
|
4906
|
+
`);
|
|
4907
|
+
PopsSafeUtils.setSafeHTML(fileTimeElement,
|
|
4908
|
+
/*html*/ `
|
|
4909
|
+
<div class="pops-folder-list__time">
|
|
4910
|
+
<span>${latestTime}</span>
|
|
4911
|
+
</div>
|
|
4912
|
+
`);
|
|
4913
|
+
PopsSafeUtils.setSafeHTML(fileFormatSize,
|
|
4914
|
+
/*html*/ `
|
|
4915
|
+
<div class="pops-folder-list-format-size">
|
|
4916
|
+
<span>${fileSize}</span>
|
|
4917
|
+
</div>
|
|
4918
|
+
`);
|
|
4885
4919
|
/* 存储原来的值 */
|
|
4886
4920
|
let __value__ = {
|
|
4887
4921
|
fileName: origin_fileName,
|
|
@@ -4942,17 +4976,18 @@
|
|
|
4942
4976
|
}
|
|
4943
4977
|
folderELement.className = "pops-folder-list-table__body-row";
|
|
4944
4978
|
fileNameElement.className = "pops-folder-list-table__body-td";
|
|
4945
|
-
fileNameElement
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4979
|
+
PopsSafeUtils.setSafeHTML(fileNameElement,
|
|
4980
|
+
/*html*/ `
|
|
4981
|
+
<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
|
|
4982
|
+
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
|
|
4983
|
+
<div>
|
|
4984
|
+
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
|
|
4985
|
+
${fileName}
|
|
4986
|
+
</a>
|
|
4987
|
+
<span>${latestTime} ${fileSize}</span>
|
|
4988
|
+
</div>
|
|
4989
|
+
</div>
|
|
4990
|
+
`);
|
|
4956
4991
|
/* 存储原来的值 */
|
|
4957
4992
|
let __value__ = {
|
|
4958
4993
|
fileName: origin_fileName,
|
|
@@ -4972,7 +5007,7 @@
|
|
|
4972
5007
|
* 清空每行的元素
|
|
4973
5008
|
*/
|
|
4974
5009
|
function clearFolerRow() {
|
|
4975
|
-
folderListBodyElement
|
|
5010
|
+
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
4976
5011
|
}
|
|
4977
5012
|
function getArrowIconElement() {
|
|
4978
5013
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
@@ -5971,8 +6006,8 @@
|
|
|
5971
6006
|
* 清空container容器的元素
|
|
5972
6007
|
*/
|
|
5973
6008
|
clearContainer() {
|
|
5974
|
-
this.sectionContainerHeaderULElement
|
|
5975
|
-
this.sectionContainerULElement
|
|
6009
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
|
|
6010
|
+
PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
|
|
5976
6011
|
this.$el.$content
|
|
5977
6012
|
?.querySelectorAll("section.pops-panel-deepMenu-container")
|
|
5978
6013
|
.forEach((ele) => ele.remove());
|
|
@@ -6058,8 +6093,9 @@
|
|
|
6058
6093
|
createAsideItem(asideConfig) {
|
|
6059
6094
|
let liElement = document.createElement("li");
|
|
6060
6095
|
liElement.id = asideConfig.id;
|
|
6096
|
+
// @ts-ignore
|
|
6061
6097
|
liElement["__forms__"] = asideConfig.forms;
|
|
6062
|
-
liElement
|
|
6098
|
+
PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
|
|
6063
6099
|
/* 处理className */
|
|
6064
6100
|
this.setElementClassName(liElement, asideConfig.className);
|
|
6065
6101
|
this.setElementAttributes(liElement, asideConfig.attributes);
|
|
@@ -6082,18 +6118,19 @@
|
|
|
6082
6118
|
if (Boolean(formConfig.description)) {
|
|
6083
6119
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6084
6120
|
}
|
|
6085
|
-
liElement
|
|
6086
|
-
|
|
6087
|
-
<
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
<
|
|
6092
|
-
|
|
6093
|
-
<
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6121
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6122
|
+
/*html*/ `
|
|
6123
|
+
<div class="pops-panel-item-left-text">
|
|
6124
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6125
|
+
${leftDescriptionText}
|
|
6126
|
+
</div>
|
|
6127
|
+
<div class="pops-panel-switch">
|
|
6128
|
+
<input class="pops-panel-switch__input" type="checkbox">
|
|
6129
|
+
<span class="pops-panel-switch__core">
|
|
6130
|
+
<div class="pops-panel-switch__action">
|
|
6131
|
+
</div>
|
|
6132
|
+
</span>
|
|
6133
|
+
</div>`);
|
|
6097
6134
|
const PopsPanelSwitch = {
|
|
6098
6135
|
[Symbol.toStringTag]: "PopsPanelSwitch",
|
|
6099
6136
|
$data: {
|
|
@@ -6183,14 +6220,16 @@
|
|
|
6183
6220
|
if (Boolean(formConfig.description)) {
|
|
6184
6221
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6185
6222
|
}
|
|
6186
|
-
liElement
|
|
6187
|
-
|
|
6188
|
-
<
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
|
|
6192
|
-
<
|
|
6193
|
-
|
|
6223
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6224
|
+
/*html*/ `
|
|
6225
|
+
<div class="pops-panel-item-left-text">
|
|
6226
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6227
|
+
${leftDescriptionText}
|
|
6228
|
+
</div>
|
|
6229
|
+
<div class="pops-panel-slider">
|
|
6230
|
+
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
6231
|
+
</div>
|
|
6232
|
+
`);
|
|
6194
6233
|
let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
|
|
6195
6234
|
if (formConfig.step) {
|
|
6196
6235
|
rangeInputElement.setAttribute("step", formConfig.step.toString());
|
|
@@ -6246,19 +6285,20 @@
|
|
|
6246
6285
|
if (Boolean(formConfig.description)) {
|
|
6247
6286
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6248
6287
|
}
|
|
6249
|
-
liElement
|
|
6250
|
-
|
|
6251
|
-
<
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
<div class="pops-slider pops-slider-width">
|
|
6255
|
-
<div class="pops-slider__runway">
|
|
6256
|
-
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6257
|
-
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6258
|
-
<div class="pops-slider__button"></div>
|
|
6259
|
-
</div>
|
|
6288
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6289
|
+
/*html*/ `
|
|
6290
|
+
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
6291
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6292
|
+
${leftDescriptionText}
|
|
6260
6293
|
</div>
|
|
6261
|
-
|
|
6294
|
+
<div class="pops-slider pops-slider-width">
|
|
6295
|
+
<div class="pops-slider__runway">
|
|
6296
|
+
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
|
|
6297
|
+
<div class="pops-slider__button-wrapper" style="left: 0%">
|
|
6298
|
+
<div class="pops-slider__button"></div>
|
|
6299
|
+
</div>
|
|
6300
|
+
</div>
|
|
6301
|
+
</div>`);
|
|
6262
6302
|
const PopsPanelSlider = {
|
|
6263
6303
|
[Symbol.toStringTag]: "PopsPanelSlider",
|
|
6264
6304
|
/**
|
|
@@ -6808,15 +6848,16 @@
|
|
|
6808
6848
|
if (Boolean(formConfig.description)) {
|
|
6809
6849
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
6810
6850
|
}
|
|
6811
|
-
liElement
|
|
6812
|
-
|
|
6813
|
-
<
|
|
6814
|
-
|
|
6815
|
-
|
|
6816
|
-
|
|
6817
|
-
<
|
|
6818
|
-
|
|
6819
|
-
|
|
6851
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
6852
|
+
/*html*/ `
|
|
6853
|
+
<div class="pops-panel-item-left-text">
|
|
6854
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
6855
|
+
${leftDescriptionText}
|
|
6856
|
+
</div>
|
|
6857
|
+
<div class="pops-panel-input pops-user-select-none">
|
|
6858
|
+
<input type="${inputType}" placeholder="${formConfig.placeholder}">
|
|
6859
|
+
</div>
|
|
6860
|
+
`);
|
|
6820
6861
|
const PopsPanelInput = {
|
|
6821
6862
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
6822
6863
|
$ele: {
|
|
@@ -6859,11 +6900,12 @@
|
|
|
6859
6900
|
initEle() {
|
|
6860
6901
|
this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
|
|
6861
6902
|
this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
|
|
6862
|
-
this.$ele.inputSpanIcon
|
|
6863
|
-
|
|
6864
|
-
<
|
|
6865
|
-
|
|
6866
|
-
|
|
6903
|
+
PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon,
|
|
6904
|
+
/*html*/ `
|
|
6905
|
+
<span class="pops-panel-input__suffix-inner">
|
|
6906
|
+
<i class="pops-panel-icon"></i>
|
|
6907
|
+
</span>
|
|
6908
|
+
`);
|
|
6867
6909
|
this.$ele.inputSpanIconInner =
|
|
6868
6910
|
this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
|
|
6869
6911
|
this.$ele.icon =
|
|
@@ -6898,7 +6940,7 @@
|
|
|
6898
6940
|
},
|
|
6899
6941
|
/**
|
|
6900
6942
|
* 设置input元素的type
|
|
6901
|
-
* @param
|
|
6943
|
+
* @param [typeValue="text"] type值
|
|
6902
6944
|
*/
|
|
6903
6945
|
setInputType(typeValue = "text") {
|
|
6904
6946
|
this.$ele.input.setAttribute("type", typeValue);
|
|
@@ -6907,14 +6949,14 @@
|
|
|
6907
6949
|
* 删除图标按钮
|
|
6908
6950
|
*/
|
|
6909
6951
|
removeCircleIcon() {
|
|
6910
|
-
this.$ele.icon
|
|
6952
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
|
|
6911
6953
|
},
|
|
6912
6954
|
/**
|
|
6913
6955
|
* 添加清空图标按钮
|
|
6914
|
-
* @param
|
|
6956
|
+
* @param [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
|
|
6915
6957
|
*/
|
|
6916
6958
|
setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
|
|
6917
|
-
this.$ele.icon
|
|
6959
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
6918
6960
|
},
|
|
6919
6961
|
/**
|
|
6920
6962
|
* 添加图标按钮的点击事件
|
|
@@ -7003,16 +7045,17 @@
|
|
|
7003
7045
|
if (Boolean(formConfig.description)) {
|
|
7004
7046
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7005
7047
|
}
|
|
7006
|
-
liElement
|
|
7007
|
-
|
|
7008
|
-
<
|
|
7009
|
-
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
<
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7048
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7049
|
+
/*html*/ `
|
|
7050
|
+
<div class="pops-panel-item-left-text">
|
|
7051
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7052
|
+
${leftDescriptionText}
|
|
7053
|
+
</div>
|
|
7054
|
+
<div class="pops-panel-textarea">
|
|
7055
|
+
<textarea placeholder="${formConfig.placeholder ?? ""}">
|
|
7056
|
+
</textarea>
|
|
7057
|
+
</div>
|
|
7058
|
+
`);
|
|
7016
7059
|
const PopsPanelTextArea = {
|
|
7017
7060
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
7018
7061
|
$ele: {
|
|
@@ -7077,15 +7120,16 @@
|
|
|
7077
7120
|
if (Boolean(formConfig.description)) {
|
|
7078
7121
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7079
7122
|
}
|
|
7080
|
-
liElement
|
|
7081
|
-
|
|
7082
|
-
<
|
|
7083
|
-
|
|
7084
|
-
|
|
7085
|
-
|
|
7086
|
-
<select
|
|
7087
|
-
|
|
7088
|
-
|
|
7123
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7124
|
+
/*html*/ `
|
|
7125
|
+
<div class="pops-panel-item-left-text">
|
|
7126
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7127
|
+
${leftDescriptionText}
|
|
7128
|
+
</div>
|
|
7129
|
+
<div class="pops-panel-select pops-user-select-none">
|
|
7130
|
+
<select></select>
|
|
7131
|
+
</div>
|
|
7132
|
+
`);
|
|
7089
7133
|
const PopsPanelSelect = {
|
|
7090
7134
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
7091
7135
|
$ele: {
|
|
@@ -7272,33 +7316,34 @@
|
|
|
7272
7316
|
if (Boolean(formConfig.description)) {
|
|
7273
7317
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7274
7318
|
}
|
|
7275
|
-
liElement
|
|
7276
|
-
|
|
7277
|
-
<
|
|
7278
|
-
|
|
7279
|
-
|
|
7280
|
-
|
|
7281
|
-
<div class="
|
|
7282
|
-
<div class="el-
|
|
7283
|
-
|
|
7284
|
-
|
|
7285
|
-
|
|
7319
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7320
|
+
/*html*/ `
|
|
7321
|
+
<div class="pops-panel-item-left-text">
|
|
7322
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7323
|
+
${leftDescriptionText}
|
|
7324
|
+
</div>
|
|
7325
|
+
<div class="pops-panel-select-multiple">
|
|
7326
|
+
<div class="el-select__wrapper">
|
|
7327
|
+
<div class="el-select__selection">
|
|
7328
|
+
<!-- 这个是用于手动输入的，这里暂不适配 -->
|
|
7329
|
+
<div class="el-select__selected-item el-select__input-wrapper">
|
|
7330
|
+
|
|
7331
|
+
</div>
|
|
7332
|
+
<!-- 这个是placeholder -->
|
|
7333
|
+
<div class="el-select__selected-item el-select__placeholder">
|
|
7334
|
+
</div>
|
|
7286
7335
|
</div>
|
|
7287
|
-
<!--
|
|
7288
|
-
<div class="el-
|
|
7336
|
+
<!-- 下拉箭头 -->
|
|
7337
|
+
<div class="el-select__suffix">
|
|
7338
|
+
<i class="el-icon el-select__caret el-select__icon">
|
|
7339
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7340
|
+
<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>
|
|
7341
|
+
</svg>
|
|
7342
|
+
</i>
|
|
7289
7343
|
</div>
|
|
7290
7344
|
</div>
|
|
7291
|
-
<!-- 下拉箭头 -->
|
|
7292
|
-
<div class="el-select__suffix">
|
|
7293
|
-
<i class="el-icon el-select__caret el-select__icon">
|
|
7294
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
7295
|
-
<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>
|
|
7296
|
-
</svg>
|
|
7297
|
-
</i>
|
|
7298
|
-
</div>
|
|
7299
7345
|
</div>
|
|
7300
|
-
|
|
7301
|
-
`;
|
|
7346
|
+
`);
|
|
7302
7347
|
const PopsPanelSelectMultiple = {
|
|
7303
7348
|
[Symbol.toStringTag]: "PopsPanelSelectMultiple",
|
|
7304
7349
|
$el: {
|
|
@@ -7423,7 +7468,7 @@
|
|
|
7423
7468
|
/** 关闭图标 */
|
|
7424
7469
|
const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
|
|
7425
7470
|
if (data.isHTML) {
|
|
7426
|
-
$tagText
|
|
7471
|
+
PopsSafeUtils.setSafeHTML($tagText, data.text);
|
|
7427
7472
|
}
|
|
7428
7473
|
else {
|
|
7429
7474
|
$tagText.innerText = data.text;
|
|
@@ -7830,18 +7875,19 @@
|
|
|
7830
7875
|
if (Boolean(formConfig.description)) {
|
|
7831
7876
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7832
7877
|
}
|
|
7833
|
-
liElement
|
|
7834
|
-
|
|
7835
|
-
<
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
<
|
|
7840
|
-
<
|
|
7841
|
-
|
|
7842
|
-
|
|
7843
|
-
|
|
7844
|
-
|
|
7878
|
+
PopsSafeUtils.setSafeHTML(liElement,
|
|
7879
|
+
/*html*/ `
|
|
7880
|
+
<div class="pops-panel-item-left-text">
|
|
7881
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
7882
|
+
${leftDescriptionText}
|
|
7883
|
+
</div>
|
|
7884
|
+
<div class="pops-panel-button">
|
|
7885
|
+
<button class="pops-panel-button_inner">
|
|
7886
|
+
<i class="pops-bottom-icon"></i>
|
|
7887
|
+
<span class="pops-panel-button-text"></span>
|
|
7888
|
+
</button>
|
|
7889
|
+
</div>
|
|
7890
|
+
`);
|
|
7845
7891
|
const PopsPanelButton = {
|
|
7846
7892
|
[Symbol.toStringTag]: "PopsPanelButton",
|
|
7847
7893
|
$ele: {
|
|
@@ -7911,7 +7957,7 @@
|
|
|
7911
7957
|
* 设置icon图标的svg
|
|
7912
7958
|
*/
|
|
7913
7959
|
setIconSVG(svgHTML) {
|
|
7914
|
-
this.$ele.icon
|
|
7960
|
+
PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
|
|
7915
7961
|
},
|
|
7916
7962
|
/**
|
|
7917
7963
|
* 设置icon图标是否旋转
|
|
@@ -7950,7 +7996,7 @@
|
|
|
7950
7996
|
* @param text
|
|
7951
7997
|
*/
|
|
7952
7998
|
setButtonText(text) {
|
|
7953
|
-
this.$ele.spanText
|
|
7999
|
+
PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
|
|
7954
8000
|
},
|
|
7955
8001
|
setClickEvent() {
|
|
7956
8002
|
popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
|
|
@@ -7996,16 +8042,17 @@
|
|
|
7996
8042
|
if (formConfig.rightText) {
|
|
7997
8043
|
rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
|
|
7998
8044
|
}
|
|
7999
|
-
$li
|
|
8000
|
-
|
|
8001
|
-
<
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8045
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8046
|
+
/*html*/ `
|
|
8047
|
+
<div class="pops-panel-item-left-text">
|
|
8048
|
+
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
|
|
8049
|
+
${leftDescriptionText}
|
|
8050
|
+
</div>
|
|
8051
|
+
<div class="pops-panel-deepMenu">
|
|
8052
|
+
${rightText}
|
|
8053
|
+
${arrowRightIconHTML}
|
|
8054
|
+
</div>
|
|
8055
|
+
`);
|
|
8009
8056
|
const PopsPanelDeepMenu = {
|
|
8010
8057
|
[Symbol.toStringTag]: "PopsPanelDeepMenu",
|
|
8011
8058
|
$ele: {
|
|
@@ -8035,19 +8082,19 @@
|
|
|
8035
8082
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8036
8083
|
className: "pops-panel-forms-container-item-header-text",
|
|
8037
8084
|
});
|
|
8038
|
-
formHeaderDivElement
|
|
8085
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8039
8086
|
if (formConfig_forms.isFold) {
|
|
8040
8087
|
/* 添加第一个 */
|
|
8041
8088
|
/* 加进容器内 */
|
|
8042
|
-
formHeaderDivElement
|
|
8089
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8090
|
+
/*html*/ `
|
|
8043
8091
|
<p>${formConfig_forms.text}</p>
|
|
8044
8092
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8045
8093
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8046
8094
|
<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>
|
|
8047
8095
|
</svg>
|
|
8048
8096
|
</i>
|
|
8049
|
-
|
|
8050
|
-
`;
|
|
8097
|
+
`);
|
|
8051
8098
|
// 添加点击事件
|
|
8052
8099
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8053
8100
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8245,18 +8292,18 @@
|
|
|
8245
8292
|
let formHeaderDivElement = popsDOMUtils.createElement("div", {
|
|
8246
8293
|
className: "pops-panel-forms-container-item-header-text",
|
|
8247
8294
|
});
|
|
8248
|
-
formHeaderDivElement
|
|
8295
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
|
|
8249
8296
|
if (formConfig_forms.isFold) {
|
|
8250
8297
|
/* 加进容器内 */
|
|
8251
|
-
formHeaderDivElement
|
|
8298
|
+
PopsSafeUtils.setSafeHTML(formHeaderDivElement,
|
|
8299
|
+
/*html*/ `
|
|
8252
8300
|
<p>${formConfig_forms.text}</p>
|
|
8253
8301
|
<i class="pops-panel-forms-fold-container-icon">
|
|
8254
8302
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
|
8255
8303
|
<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>
|
|
8256
8304
|
</svg>
|
|
8257
8305
|
</i>
|
|
8258
|
-
|
|
8259
|
-
`;
|
|
8306
|
+
`);
|
|
8260
8307
|
// 添加点击事件
|
|
8261
8308
|
popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
|
|
8262
8309
|
if (formContainerListElement.hasAttribute("data-fold-enable")) {
|
|
@@ -8342,7 +8389,7 @@
|
|
|
8342
8389
|
let containerHeaderTitleLIElement = document.createElement("li");
|
|
8343
8390
|
containerHeaderTitleLIElement["__asideConfig__"] =
|
|
8344
8391
|
asideConfig;
|
|
8345
|
-
containerHeaderTitleLIElement
|
|
8392
|
+
PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
|
|
8346
8393
|
this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
|
|
8347
8394
|
}
|
|
8348
8395
|
let __forms__ = asideLiElement["__forms__"];
|
|
@@ -8631,9 +8678,11 @@
|
|
|
8631
8678
|
pops.config.cssText.rightClickMenu,
|
|
8632
8679
|
]);
|
|
8633
8680
|
if (config.style != null) {
|
|
8634
|
-
let cssNode =
|
|
8635
|
-
|
|
8636
|
-
|
|
8681
|
+
let cssNode = popsDOMUtils.createElement("style", {
|
|
8682
|
+
innerHTML: config.style,
|
|
8683
|
+
}, {
|
|
8684
|
+
type: "text/css",
|
|
8685
|
+
});
|
|
8637
8686
|
$shadowRoot.appendChild(cssNode);
|
|
8638
8687
|
}
|
|
8639
8688
|
const PopsContextMenu = {
|
|
@@ -8942,7 +8991,7 @@
|
|
|
8942
8991
|
menuLiElement.appendChild(iconElement);
|
|
8943
8992
|
}
|
|
8944
8993
|
/* 插入文字 */
|
|
8945
|
-
menuLiElement.insertAdjacentHTML("beforeend", `<span>${item.text}</span>`);
|
|
8994
|
+
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
8946
8995
|
/* 如果存在子数据，显示 */
|
|
8947
8996
|
if (item.item && Array.isArray(item.item)) {
|
|
8948
8997
|
popsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
|
|
@@ -9115,8 +9164,11 @@
|
|
|
9115
9164
|
]);
|
|
9116
9165
|
if (config.style != null) {
|
|
9117
9166
|
let cssNode = document.createElement("style");
|
|
9118
|
-
|
|
9119
|
-
|
|
9167
|
+
popsDOMUtils.createElement("style", {
|
|
9168
|
+
innerHTML: config.style,
|
|
9169
|
+
}, {
|
|
9170
|
+
type: "text/css",
|
|
9171
|
+
});
|
|
9120
9172
|
$shadowRoot.appendChild(cssNode);
|
|
9121
9173
|
}
|
|
9122
9174
|
const SearchSuggestion = {
|
|
@@ -9493,7 +9545,7 @@
|
|
|
9493
9545
|
* 清空所有的搜索结果
|
|
9494
9546
|
*/
|
|
9495
9547
|
clearAllSearchItemLi() {
|
|
9496
|
-
SearchSuggestion.$el.$hintULContainer
|
|
9548
|
+
PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
|
|
9497
9549
|
},
|
|
9498
9550
|
/**
|
|
9499
9551
|
* 更新搜索建议框的位置(top、left)
|
|
@@ -9575,7 +9627,8 @@
|
|
|
9575
9627
|
* 动态更新CSS
|
|
9576
9628
|
*/
|
|
9577
9629
|
updateDynamicCSS() {
|
|
9578
|
-
|
|
9630
|
+
let cssText = this.getDynamicCSS();
|
|
9631
|
+
PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
|
|
9579
9632
|
},
|
|
9580
9633
|
/**
|
|
9581
9634
|
* 更新页面显示的搜索结果
|
|
@@ -9765,7 +9818,7 @@
|
|
|
9765
9818
|
if (text == null) {
|
|
9766
9819
|
text = this.getContent();
|
|
9767
9820
|
}
|
|
9768
|
-
this.$el.$content
|
|
9821
|
+
PopsSafeUtils.setSafeHTML(this.$el.$content, text);
|
|
9769
9822
|
}
|
|
9770
9823
|
/**
|
|
9771
9824
|
* 获取z-index
|
|
@@ -10137,7 +10190,7 @@
|
|
|
10137
10190
|
/** 配置 */
|
|
10138
10191
|
config = {
|
|
10139
10192
|
/** 版本号 */
|
|
10140
|
-
version: "2025.
|
|
10193
|
+
version: "2025.3.2",
|
|
10141
10194
|
cssText: {
|
|
10142
10195
|
/** 主CSS */
|
|
10143
10196
|
index: indexCSS,
|
|
@@ -10242,7 +10295,7 @@
|
|
|
10242
10295
|
/* 处理获取当前所有的动画名 */
|
|
10243
10296
|
this.config.isInit = true;
|
|
10244
10297
|
let animationStyle = document.createElement("style");
|
|
10245
|
-
animationStyle
|
|
10298
|
+
PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
|
|
10246
10299
|
popsDOMUtils.appendHead(animationStyle);
|
|
10247
10300
|
this.config.animation = null;
|
|
10248
10301
|
this.config.animation = PopsInstanceUtils.getKeyFrames(animationStyle.sheet);
|