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