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