@whitesev/pops 2.1.3 → 2.1.4
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 +182 -164
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +182 -164
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +182 -164
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +182 -164
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +182 -164
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +182 -164
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +24 -7
- package/dist/types/src/components/panel/PanelHandleContentDetails.d.ts +23 -15
- package/dist/types/src/components/panel/index.d.ts +16 -2
- package/dist/types/src/components/panel/indexType.d.ts +14 -0
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/dist/types/src/types/button.d.ts +3 -2
- package/dist/types/src/types/event.d.ts +3 -2
- package/dist/types/src/types/global.d.ts +4 -4
- package/dist/types/src/types/main.d.ts +8 -0
- package/dist/types/src/types/mask.d.ts +8 -0
- package/package.json +9 -10
- package/src/Pops.ts +1 -1
- package/src/components/panel/PanelHandleContentDetails.ts +270 -244
- package/src/components/panel/index.ts +20 -2
- package/src/components/panel/indexType.ts +16 -0
- package/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/src/types/button.d.ts +3 -2
- package/src/types/event.d.ts +3 -2
- package/src/types/global.d.ts +4 -4
- package/src/types/main.d.ts +8 -0
- package/src/types/mask.d.ts +8 -0
- package/src/utils/PopsUtils.ts +1 -4
package/dist/index.system.js
CHANGED
|
@@ -332,8 +332,7 @@ System.register('pops', [], (function (exports) {
|
|
|
332
332
|
if (target === PopsCore.self) {
|
|
333
333
|
return true;
|
|
334
334
|
}
|
|
335
|
-
if (typeof unsafeWindow !== "undefined" &&
|
|
336
|
-
target === unsafeWindow) {
|
|
335
|
+
if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
|
|
337
336
|
return true;
|
|
338
337
|
}
|
|
339
338
|
if (target?.Math?.toString() !== "[object Math]") {
|
|
@@ -7080,6 +7079,8 @@ System.register('pops', [], (function (exports) {
|
|
|
7080
7079
|
* 元素
|
|
7081
7080
|
*/
|
|
7082
7081
|
$el: {
|
|
7082
|
+
/** pops主元素 */
|
|
7083
|
+
$pops: null,
|
|
7083
7084
|
/** 内容 */
|
|
7084
7085
|
$content: null,
|
|
7085
7086
|
/** 左侧容器 */
|
|
@@ -7092,8 +7093,6 @@ System.register('pops', [], (function (exports) {
|
|
|
7092
7093
|
* @param details
|
|
7093
7094
|
*/
|
|
7094
7095
|
init(details) {
|
|
7095
|
-
// @ts-ignore
|
|
7096
|
-
this.$el = null;
|
|
7097
7096
|
this.$el = {
|
|
7098
7097
|
...details.$el,
|
|
7099
7098
|
};
|
|
@@ -7156,11 +7155,12 @@ System.register('pops', [], (function (exports) {
|
|
|
7156
7155
|
* 清空container容器的元素
|
|
7157
7156
|
*/
|
|
7158
7157
|
clearContainer() {
|
|
7158
|
+
Reflect.deleteProperty(this.$el.$contentSectionContainer, "__formConfig__");
|
|
7159
7159
|
PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
|
|
7160
7160
|
PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
|
|
7161
7161
|
this.$el.$content
|
|
7162
7162
|
?.querySelectorAll("section.pops-panel-deepMenu-container")
|
|
7163
|
-
.forEach((
|
|
7163
|
+
.forEach(($el) => $el.remove());
|
|
7164
7164
|
},
|
|
7165
7165
|
/**
|
|
7166
7166
|
* 清空左侧容器已访问记录
|
|
@@ -7168,8 +7168,8 @@ System.register('pops', [], (function (exports) {
|
|
|
7168
7168
|
clearAsideItemIsVisited() {
|
|
7169
7169
|
this.$el.$contentAside
|
|
7170
7170
|
.querySelectorAll(".pops-is-visited")
|
|
7171
|
-
.forEach((
|
|
7172
|
-
popsDOMUtils.removeClassName(
|
|
7171
|
+
.forEach(($el) => {
|
|
7172
|
+
popsDOMUtils.removeClassName($el, "pops-is-visited");
|
|
7173
7173
|
});
|
|
7174
7174
|
},
|
|
7175
7175
|
/**
|
|
@@ -7246,34 +7246,33 @@ System.register('pops', [], (function (exports) {
|
|
|
7246
7246
|
* @param asideConfig
|
|
7247
7247
|
*/
|
|
7248
7248
|
createAsideItem(asideConfig) {
|
|
7249
|
-
let
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
|
|
7249
|
+
let $li = document.createElement("li");
|
|
7250
|
+
$li.id = asideConfig.id;
|
|
7251
|
+
Reflect.set($li, "__forms__", asideConfig.forms);
|
|
7252
|
+
PopsSafeUtils.setSafeHTML($li, asideConfig.title);
|
|
7254
7253
|
/* 处理className */
|
|
7255
|
-
this.setElementClassName(
|
|
7256
|
-
this.setElementAttributes(
|
|
7257
|
-
this.setElementProps(
|
|
7258
|
-
return
|
|
7254
|
+
this.setElementClassName($li, asideConfig.className);
|
|
7255
|
+
this.setElementAttributes($li, asideConfig.attributes);
|
|
7256
|
+
this.setElementProps($li, asideConfig.props);
|
|
7257
|
+
return $li;
|
|
7259
7258
|
},
|
|
7260
7259
|
/**
|
|
7261
|
-
* 创建中间容器的元素<li>
|
|
7262
7260
|
* type ==> switch
|
|
7261
|
+
* 创建中间容器的元素<li>
|
|
7263
7262
|
* @param formConfig
|
|
7264
7263
|
*/
|
|
7265
7264
|
createSectionContainerItem_switch(formConfig) {
|
|
7266
|
-
let
|
|
7267
|
-
|
|
7268
|
-
this.setElementClassName(
|
|
7269
|
-
this.setElementAttributes(
|
|
7270
|
-
this.setElementProps(
|
|
7265
|
+
let $li = document.createElement("li");
|
|
7266
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7267
|
+
this.setElementClassName($li, formConfig.className);
|
|
7268
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7269
|
+
this.setElementProps($li, formConfig.props);
|
|
7271
7270
|
/* 左边底部的描述的文字 */
|
|
7272
7271
|
let leftDescriptionText = "";
|
|
7273
7272
|
if (Boolean(formConfig.description)) {
|
|
7274
7273
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7275
7274
|
}
|
|
7276
|
-
PopsSafeUtils.setSafeHTML(
|
|
7275
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7277
7276
|
/*html*/ `
|
|
7278
7277
|
<div class="pops-panel-item-left-text">
|
|
7279
7278
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7290,9 +7289,9 @@ System.register('pops', [], (function (exports) {
|
|
|
7290
7289
|
value: Boolean(formConfig.getValue()),
|
|
7291
7290
|
},
|
|
7292
7291
|
$ele: {
|
|
7293
|
-
switch:
|
|
7294
|
-
input:
|
|
7295
|
-
core:
|
|
7292
|
+
switch: $li.querySelector(".pops-panel-switch"),
|
|
7293
|
+
input: $li.querySelector(".pops-panel-switch__input"),
|
|
7294
|
+
core: $li.querySelector(".pops-panel-switch__core"),
|
|
7296
7295
|
},
|
|
7297
7296
|
init() {
|
|
7298
7297
|
this.setStatus(this.$data.value);
|
|
@@ -7354,26 +7353,26 @@ System.register('pops', [], (function (exports) {
|
|
|
7354
7353
|
},
|
|
7355
7354
|
};
|
|
7356
7355
|
PopsPanelSwitch.init();
|
|
7357
|
-
|
|
7358
|
-
return
|
|
7356
|
+
Reflect.set($li, "data-switch", PopsPanelSwitch);
|
|
7357
|
+
return $li;
|
|
7359
7358
|
},
|
|
7360
7359
|
/**
|
|
7361
|
-
* 获取中间容器的元素<li>
|
|
7362
7360
|
* type ==> slider
|
|
7361
|
+
* 获取中间容器的元素<li>
|
|
7363
7362
|
* @param formConfig
|
|
7364
7363
|
*/
|
|
7365
7364
|
createSectionContainerItem_slider(formConfig) {
|
|
7366
|
-
let
|
|
7367
|
-
|
|
7368
|
-
this.setElementClassName(
|
|
7369
|
-
this.setElementAttributes(
|
|
7370
|
-
this.setElementProps(
|
|
7365
|
+
let $li = document.createElement("li");
|
|
7366
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7367
|
+
this.setElementClassName($li, formConfig.className);
|
|
7368
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7369
|
+
this.setElementProps($li, formConfig.props);
|
|
7371
7370
|
/* 左边底部的描述的文字 */
|
|
7372
7371
|
let leftDescriptionText = "";
|
|
7373
7372
|
if (Boolean(formConfig.description)) {
|
|
7374
7373
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7375
7374
|
}
|
|
7376
|
-
PopsSafeUtils.setSafeHTML(
|
|
7375
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7377
7376
|
/*html*/ `
|
|
7378
7377
|
<div class="pops-panel-item-left-text">
|
|
7379
7378
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7381,11 +7380,11 @@ System.register('pops', [], (function (exports) {
|
|
|
7381
7380
|
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
|
|
7382
7381
|
</div>
|
|
7383
7382
|
`);
|
|
7384
|
-
let
|
|
7383
|
+
let $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
|
|
7385
7384
|
if (formConfig.step) {
|
|
7386
|
-
|
|
7385
|
+
$rangeInput.setAttribute("step", formConfig.step.toString());
|
|
7387
7386
|
}
|
|
7388
|
-
|
|
7387
|
+
$rangeInput.value = formConfig.getValue().toString();
|
|
7389
7388
|
/**
|
|
7390
7389
|
* 获取提示的内容
|
|
7391
7390
|
* @param value
|
|
@@ -7399,9 +7398,9 @@ System.register('pops', [], (function (exports) {
|
|
|
7399
7398
|
}
|
|
7400
7399
|
};
|
|
7401
7400
|
let tooltip = PopsTooltip.init({
|
|
7402
|
-
target:
|
|
7401
|
+
target: $rangeInput.parentElement,
|
|
7403
7402
|
content: () => {
|
|
7404
|
-
return getToolTipContent(
|
|
7403
|
+
return getToolTipContent($rangeInput.value);
|
|
7405
7404
|
},
|
|
7406
7405
|
zIndex: () => {
|
|
7407
7406
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
@@ -7412,32 +7411,31 @@ System.register('pops', [], (function (exports) {
|
|
|
7412
7411
|
position: "top",
|
|
7413
7412
|
arrowDistance: 10,
|
|
7414
7413
|
});
|
|
7415
|
-
popsDOMUtils.on(
|
|
7416
|
-
tooltip.toolTip.changeContent(getToolTipContent(
|
|
7414
|
+
popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
|
|
7415
|
+
tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
|
|
7417
7416
|
if (typeof formConfig.callback === "function") {
|
|
7418
|
-
formConfig.callback(event,
|
|
7417
|
+
formConfig.callback(event, $rangeInput.valueAsNumber);
|
|
7419
7418
|
}
|
|
7420
7419
|
});
|
|
7421
|
-
return
|
|
7420
|
+
return $li;
|
|
7422
7421
|
},
|
|
7423
7422
|
/**
|
|
7424
|
-
* 获取中间容器的元素<li>
|
|
7425
7423
|
* type ==> slider
|
|
7424
|
+
* 获取中间容器的元素<li>
|
|
7426
7425
|
* @param formConfig
|
|
7427
7426
|
*/
|
|
7428
7427
|
createSectionContainerItem_slider_new(formConfig) {
|
|
7429
|
-
let
|
|
7430
|
-
|
|
7431
|
-
|
|
7432
|
-
this.
|
|
7433
|
-
this.
|
|
7434
|
-
this.setElementProps(liElement, formConfig.props);
|
|
7428
|
+
let $li = document.createElement("li");
|
|
7429
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
7430
|
+
this.setElementClassName($li, formConfig.className);
|
|
7431
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
7432
|
+
this.setElementProps($li, formConfig.props);
|
|
7435
7433
|
/* 左边底部的描述的文字 */
|
|
7436
7434
|
let leftDescriptionText = "";
|
|
7437
7435
|
if (Boolean(formConfig.description)) {
|
|
7438
7436
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
7439
7437
|
}
|
|
7440
|
-
PopsSafeUtils.setSafeHTML(
|
|
7438
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
7441
7439
|
/*html*/ `
|
|
7442
7440
|
<div class="pops-panel-item-left-text" style="flex: 1;">
|
|
7443
7441
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -7512,11 +7510,11 @@ System.register('pops', [], (function (exports) {
|
|
|
7512
7510
|
tooltip: null,
|
|
7513
7511
|
},
|
|
7514
7512
|
$ele: {
|
|
7515
|
-
slider:
|
|
7516
|
-
runAway:
|
|
7517
|
-
bar:
|
|
7518
|
-
buttonWrapper:
|
|
7519
|
-
button:
|
|
7513
|
+
slider: $li.querySelector(".pops-slider"),
|
|
7514
|
+
runAway: $li.querySelector(".pops-slider__runway"),
|
|
7515
|
+
bar: $li.querySelector(".pops-slider__bar"),
|
|
7516
|
+
buttonWrapper: $li.querySelector(".pops-slider__button-wrapper"),
|
|
7517
|
+
button: $li.querySelector(".pops-slider__button"),
|
|
7520
7518
|
},
|
|
7521
7519
|
$interval: {
|
|
7522
7520
|
isCheck: false,
|
|
@@ -7582,14 +7580,10 @@ System.register('pops', [], (function (exports) {
|
|
|
7582
7580
|
this.$ele.slider.setAttribute("data-max", this.max.toString());
|
|
7583
7581
|
this.$ele.slider.setAttribute("data-value", this.value.toString());
|
|
7584
7582
|
this.$ele.slider.setAttribute("data-step", this.step.toString());
|
|
7585
|
-
|
|
7586
|
-
this.$ele.slider
|
|
7587
|
-
|
|
7588
|
-
this.$ele.slider
|
|
7589
|
-
// @ts-ignore
|
|
7590
|
-
this.$ele.slider["data-value"] = this.value;
|
|
7591
|
-
// @ts-ignore
|
|
7592
|
-
this.$ele.slider["data-step"] = this.step;
|
|
7583
|
+
Reflect.set(this.$ele.slider, "data-min", this.min);
|
|
7584
|
+
Reflect.set(this.$ele.slider, "data-max", this.max);
|
|
7585
|
+
Reflect.set(this.$ele.slider, "data-value", this.value);
|
|
7586
|
+
Reflect.set(this.$ele.slider, "data-step", this.step);
|
|
7593
7587
|
},
|
|
7594
7588
|
/**
|
|
7595
7589
|
* 初始化滑块的总长度的数据(px)
|
|
@@ -7609,7 +7603,7 @@ System.register('pops', [], (function (exports) {
|
|
|
7609
7603
|
let widthPx = 0;
|
|
7610
7604
|
for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
|
|
7611
7605
|
let value = this.formatValue(stepValue);
|
|
7612
|
-
let info
|
|
7606
|
+
let info;
|
|
7613
7607
|
if (value === this.min) {
|
|
7614
7608
|
/* 起始 */
|
|
7615
7609
|
info = {
|
|
@@ -7652,7 +7646,7 @@ System.register('pops', [], (function (exports) {
|
|
|
7652
7646
|
let widthPx = 0;
|
|
7653
7647
|
for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
|
|
7654
7648
|
let value = this.formatValue(stepValue);
|
|
7655
|
-
let info
|
|
7649
|
+
let info;
|
|
7656
7650
|
if (value === this.min) {
|
|
7657
7651
|
/* 起始 */
|
|
7658
7652
|
info = {
|
|
@@ -7810,7 +7804,7 @@ System.register('pops', [], (function (exports) {
|
|
|
7810
7804
|
event.target !== this.$ele.bar) {
|
|
7811
7805
|
return;
|
|
7812
7806
|
}
|
|
7813
|
-
let clickX = parseFloat(event.offsetX);
|
|
7807
|
+
let clickX = parseFloat(event.offsetX.toString());
|
|
7814
7808
|
this.dragStartCallBack();
|
|
7815
7809
|
this.dragMoveCallBack(event, clickX, this.value);
|
|
7816
7810
|
this.dragEndCallBack(clickX);
|
|
@@ -7963,7 +7957,7 @@ System.register('pops', [], (function (exports) {
|
|
|
7963
7957
|
return formConfig.getToolTipContent(PopsPanelSlider.value);
|
|
7964
7958
|
}
|
|
7965
7959
|
else {
|
|
7966
|
-
return PopsPanelSlider.value;
|
|
7960
|
+
return PopsPanelSlider.value.toString();
|
|
7967
7961
|
}
|
|
7968
7962
|
}
|
|
7969
7963
|
let tooltip = PopsTooltip.init({
|
|
@@ -8007,20 +8001,20 @@ System.register('pops', [], (function (exports) {
|
|
|
8007
8001
|
},
|
|
8008
8002
|
};
|
|
8009
8003
|
PopsPanelSlider.init();
|
|
8010
|
-
|
|
8011
|
-
return
|
|
8004
|
+
Reflect.set($li, "data-slider", PopsPanelSlider);
|
|
8005
|
+
return $li;
|
|
8012
8006
|
},
|
|
8013
8007
|
/**
|
|
8014
|
-
* 获取中间容器的元素<li>
|
|
8015
8008
|
* type ==> input
|
|
8009
|
+
* 获取中间容器的元素<li>
|
|
8016
8010
|
* @param formConfig
|
|
8017
8011
|
*/
|
|
8018
8012
|
createSectionContainerItem_input(formConfig) {
|
|
8019
|
-
let
|
|
8020
|
-
|
|
8021
|
-
this.setElementClassName(
|
|
8022
|
-
this.setElementAttributes(
|
|
8023
|
-
this.setElementProps(
|
|
8013
|
+
let $li = document.createElement("li");
|
|
8014
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8015
|
+
this.setElementClassName($li, formConfig.className);
|
|
8016
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8017
|
+
this.setElementProps($li, formConfig.props);
|
|
8024
8018
|
let inputType = "text";
|
|
8025
8019
|
if (formConfig.isPassword) {
|
|
8026
8020
|
inputType = "password";
|
|
@@ -8033,7 +8027,7 @@ System.register('pops', [], (function (exports) {
|
|
|
8033
8027
|
if (Boolean(formConfig.description)) {
|
|
8034
8028
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8035
8029
|
}
|
|
8036
|
-
PopsSafeUtils.setSafeHTML(
|
|
8030
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8037
8031
|
/*html*/ `
|
|
8038
8032
|
<div class="pops-panel-item-left-text">
|
|
8039
8033
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8044,8 +8038,8 @@ System.register('pops', [], (function (exports) {
|
|
|
8044
8038
|
const PopsPanelInput = {
|
|
8045
8039
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
8046
8040
|
$ele: {
|
|
8047
|
-
panelInput:
|
|
8048
|
-
input:
|
|
8041
|
+
panelInput: $li.querySelector(".pops-panel-input"),
|
|
8042
|
+
input: $li.querySelector("input"),
|
|
8049
8043
|
inputSpanIcon: document.createElement("span"),
|
|
8050
8044
|
inputSpanIconInner: null,
|
|
8051
8045
|
icon: null,
|
|
@@ -8074,7 +8068,7 @@ System.register('pops', [], (function (exports) {
|
|
|
8074
8068
|
this.disable();
|
|
8075
8069
|
}
|
|
8076
8070
|
if (typeof formConfig.handlerCallBack === "function") {
|
|
8077
|
-
formConfig.handlerCallBack(
|
|
8071
|
+
formConfig.handlerCallBack($li, this.$ele.input);
|
|
8078
8072
|
}
|
|
8079
8073
|
},
|
|
8080
8074
|
/**
|
|
@@ -8209,26 +8203,26 @@ System.register('pops', [], (function (exports) {
|
|
|
8209
8203
|
},
|
|
8210
8204
|
};
|
|
8211
8205
|
PopsPanelInput.init();
|
|
8212
|
-
|
|
8213
|
-
return
|
|
8206
|
+
Reflect.set($li, "data-input", PopsPanelInput);
|
|
8207
|
+
return $li;
|
|
8214
8208
|
},
|
|
8215
8209
|
/**
|
|
8216
|
-
* 获取中间容器的元素<li>
|
|
8217
8210
|
* type ==> textarea
|
|
8211
|
+
* 获取中间容器的元素<li>
|
|
8218
8212
|
* @param formConfig
|
|
8219
8213
|
*/
|
|
8220
8214
|
createSectionContainerItem_textarea(formConfig) {
|
|
8221
|
-
let
|
|
8222
|
-
|
|
8223
|
-
this.setElementClassName(
|
|
8224
|
-
this.setElementAttributes(
|
|
8225
|
-
this.setElementProps(
|
|
8215
|
+
let $li = document.createElement("li");
|
|
8216
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8217
|
+
this.setElementClassName($li, formConfig.className);
|
|
8218
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8219
|
+
this.setElementProps($li, formConfig.props);
|
|
8226
8220
|
/* 左边底部的描述的文字 */
|
|
8227
8221
|
let leftDescriptionText = "";
|
|
8228
8222
|
if (Boolean(formConfig.description)) {
|
|
8229
8223
|
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8230
8224
|
}
|
|
8231
|
-
PopsSafeUtils.setSafeHTML(
|
|
8225
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8232
8226
|
/*html*/ `
|
|
8233
8227
|
<div class="pops-panel-item-left-text">
|
|
8234
8228
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8239,8 +8233,8 @@ System.register('pops', [], (function (exports) {
|
|
|
8239
8233
|
const PopsPanelTextArea = {
|
|
8240
8234
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
8241
8235
|
$ele: {
|
|
8242
|
-
panelTextarea:
|
|
8243
|
-
textarea:
|
|
8236
|
+
panelTextarea: $li.querySelector(".pops-panel-textarea"),
|
|
8237
|
+
textarea: $li.querySelector(".pops-panel-textarea textarea"),
|
|
8244
8238
|
},
|
|
8245
8239
|
$data: {
|
|
8246
8240
|
value: formConfig.getValue(),
|
|
@@ -8272,35 +8266,36 @@ System.register('pops', [], (function (exports) {
|
|
|
8272
8266
|
*/
|
|
8273
8267
|
setChangeEvent() {
|
|
8274
8268
|
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
|
|
8275
|
-
|
|
8269
|
+
let value = this.$ele.textarea.value;
|
|
8270
|
+
this.$data.value = value;
|
|
8276
8271
|
if (typeof formConfig.callback === "function") {
|
|
8277
|
-
formConfig.callback(event,
|
|
8272
|
+
formConfig.callback(event, value);
|
|
8278
8273
|
}
|
|
8279
8274
|
});
|
|
8280
8275
|
},
|
|
8281
8276
|
};
|
|
8282
8277
|
PopsPanelTextArea.init();
|
|
8283
|
-
|
|
8284
|
-
return
|
|
8278
|
+
Reflect.set($li, "data-textarea", PopsPanelTextArea);
|
|
8279
|
+
return $li;
|
|
8285
8280
|
},
|
|
8286
8281
|
/**
|
|
8287
|
-
* 获取中间容器的元素<li>
|
|
8288
8282
|
* type ==> select
|
|
8283
|
+
* 获取中间容器的元素<li>
|
|
8289
8284
|
* @param formConfig
|
|
8290
8285
|
*/
|
|
8291
8286
|
createSectionContainerItem_select(formConfig) {
|
|
8292
8287
|
const that = this;
|
|
8293
|
-
let
|
|
8294
|
-
|
|
8295
|
-
this.setElementClassName(
|
|
8296
|
-
this.setElementAttributes(
|
|
8297
|
-
this.setElementProps(
|
|
8288
|
+
let $li = document.createElement("li");
|
|
8289
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8290
|
+
this.setElementClassName($li, formConfig.className);
|
|
8291
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8292
|
+
this.setElementProps($li, formConfig.props);
|
|
8298
8293
|
/* 左边底部的描述的文字 */
|
|
8299
8294
|
let leftDescriptionText = "";
|
|
8300
8295
|
if (Boolean(formConfig.description)) {
|
|
8301
8296
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8302
8297
|
}
|
|
8303
|
-
PopsSafeUtils.setSafeHTML(
|
|
8298
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8304
8299
|
/*html*/ `
|
|
8305
8300
|
<div class="pops-panel-item-left-text">
|
|
8306
8301
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8311,8 +8306,8 @@ System.register('pops', [], (function (exports) {
|
|
|
8311
8306
|
const PopsPanelSelect = {
|
|
8312
8307
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
8313
8308
|
$ele: {
|
|
8314
|
-
panelSelect:
|
|
8315
|
-
select:
|
|
8309
|
+
panelSelect: $li.querySelector(".pops-panel-select"),
|
|
8310
|
+
select: $li.querySelector(".pops-panel-select select"),
|
|
8316
8311
|
},
|
|
8317
8312
|
$eleKey: {
|
|
8318
8313
|
disable: "__disable__",
|
|
@@ -8432,7 +8427,7 @@ System.register('pops', [], (function (exports) {
|
|
|
8432
8427
|
*/
|
|
8433
8428
|
setChangeEvent() {
|
|
8434
8429
|
popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
|
|
8435
|
-
let $isSelectedElement =
|
|
8430
|
+
let $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
|
|
8436
8431
|
let selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
8437
8432
|
this.setSelectOptionsDisableStatus();
|
|
8438
8433
|
if (typeof formConfig.callback === "function") {
|
|
@@ -8445,9 +8440,9 @@ System.register('pops', [], (function (exports) {
|
|
|
8445
8440
|
/* 如果成功创建，加入到中间容器中 */
|
|
8446
8441
|
let childUListClassName = "pops-panel-select-child-forms";
|
|
8447
8442
|
// 移除旧的元素
|
|
8448
|
-
while (
|
|
8449
|
-
if (
|
|
8450
|
-
|
|
8443
|
+
while ($li.nextElementSibling) {
|
|
8444
|
+
if ($li.nextElementSibling.classList.contains(childUListClassName)) {
|
|
8445
|
+
$li.nextElementSibling.remove();
|
|
8451
8446
|
}
|
|
8452
8447
|
else {
|
|
8453
8448
|
break;
|
|
@@ -8455,7 +8450,7 @@ System.register('pops', [], (function (exports) {
|
|
|
8455
8450
|
}
|
|
8456
8451
|
let $childUList = document.createElement("ul");
|
|
8457
8452
|
$childUList.className = childUListClassName;
|
|
8458
|
-
popsDOMUtils.after(
|
|
8453
|
+
popsDOMUtils.after($li, $childUList);
|
|
8459
8454
|
that.uListContainerAddItem(formConfig, {
|
|
8460
8455
|
ulElement: $childUList,
|
|
8461
8456
|
});
|
|
@@ -8475,26 +8470,26 @@ System.register('pops', [], (function (exports) {
|
|
|
8475
8470
|
},
|
|
8476
8471
|
};
|
|
8477
8472
|
PopsPanelSelect.init();
|
|
8478
|
-
Reflect.set(
|
|
8479
|
-
return
|
|
8473
|
+
Reflect.set($li, "data-select", PopsPanelSelect);
|
|
8474
|
+
return $li;
|
|
8480
8475
|
},
|
|
8481
8476
|
/**
|
|
8482
|
-
* 获取中间容器的元素<li>
|
|
8483
8477
|
* type ==> select-multiple
|
|
8478
|
+
* 获取中间容器的元素<li>
|
|
8484
8479
|
* @param formConfig
|
|
8485
8480
|
*/
|
|
8486
8481
|
createSectionContainerItem_select_multiple_new(formConfig) {
|
|
8487
|
-
let
|
|
8488
|
-
Reflect.set(
|
|
8489
|
-
this.setElementClassName(
|
|
8490
|
-
this.setElementAttributes(
|
|
8491
|
-
this.setElementProps(
|
|
8482
|
+
let $li = document.createElement("li");
|
|
8483
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
8484
|
+
this.setElementClassName($li, formConfig.className);
|
|
8485
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
8486
|
+
this.setElementProps($li, formConfig.props);
|
|
8492
8487
|
/* 左边底部的描述的文字 */
|
|
8493
8488
|
let leftDescriptionText = "";
|
|
8494
8489
|
if (Boolean(formConfig.description)) {
|
|
8495
8490
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
8496
8491
|
}
|
|
8497
|
-
PopsSafeUtils.setSafeHTML(
|
|
8492
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
8498
8493
|
/*html*/ `
|
|
8499
8494
|
<div class="pops-panel-item-left-text">
|
|
8500
8495
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -8569,15 +8564,14 @@ System.register('pops', [], (function (exports) {
|
|
|
8569
8564
|
},
|
|
8570
8565
|
/** 初始化$el变量 */
|
|
8571
8566
|
inintEl() {
|
|
8572
|
-
this.$el.$container =
|
|
8573
|
-
this.$el.$wrapper =
|
|
8574
|
-
this.$el.$section =
|
|
8575
|
-
this.$el.$selectedInputWrapper =
|
|
8576
|
-
this.$el.$selectedPlaceHolderWrapper =
|
|
8577
|
-
liElement.querySelector(".el-select__selected-item.el-select__placeholder");
|
|
8567
|
+
this.$el.$container = $li.querySelector(".pops-panel-select-multiple");
|
|
8568
|
+
this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
|
|
8569
|
+
this.$el.$section = $li.querySelector(".el-select__selection");
|
|
8570
|
+
this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
|
|
8571
|
+
this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
|
|
8578
8572
|
this.$el.$suffix =
|
|
8579
|
-
|
|
8580
|
-
this.$el.$suffixIcon =
|
|
8573
|
+
$li.querySelector(".el-select__suffix");
|
|
8574
|
+
this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
|
|
8581
8575
|
// 先把手动输入框隐藏
|
|
8582
8576
|
this.hideInputWrapper();
|
|
8583
8577
|
},
|
|
@@ -9135,26 +9129,26 @@ System.register('pops', [], (function (exports) {
|
|
|
9135
9129
|
},
|
|
9136
9130
|
};
|
|
9137
9131
|
PopsPanelSelectMultiple.init();
|
|
9138
|
-
Reflect.set(
|
|
9139
|
-
return
|
|
9132
|
+
Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
|
|
9133
|
+
return $li;
|
|
9140
9134
|
},
|
|
9141
9135
|
/**
|
|
9142
|
-
* 获取中间容器的元素<li>
|
|
9143
9136
|
* type ==> button
|
|
9137
|
+
* 获取中间容器的元素<li>
|
|
9144
9138
|
* @param formConfig
|
|
9145
9139
|
*/
|
|
9146
9140
|
createSectionContainerItem_button(formConfig) {
|
|
9147
|
-
let
|
|
9148
|
-
|
|
9149
|
-
this.setElementClassName(
|
|
9150
|
-
this.setElementAttributes(
|
|
9151
|
-
this.setElementProps(
|
|
9141
|
+
let $li = document.createElement("li");
|
|
9142
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9143
|
+
this.setElementClassName($li, formConfig.className);
|
|
9144
|
+
this.setElementAttributes($li, formConfig.attributes);
|
|
9145
|
+
this.setElementProps($li, formConfig.props);
|
|
9152
9146
|
/* 左边底部的描述的文字 */
|
|
9153
9147
|
let leftDescriptionText = "";
|
|
9154
9148
|
if (Boolean(formConfig.description)) {
|
|
9155
9149
|
leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
|
|
9156
9150
|
}
|
|
9157
|
-
PopsSafeUtils.setSafeHTML(
|
|
9151
|
+
PopsSafeUtils.setSafeHTML($li,
|
|
9158
9152
|
/*html*/ `
|
|
9159
9153
|
<div class="pops-panel-item-left-text">
|
|
9160
9154
|
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
|
|
@@ -9168,10 +9162,10 @@ System.register('pops', [], (function (exports) {
|
|
|
9168
9162
|
const PopsPanelButton = {
|
|
9169
9163
|
[Symbol.toStringTag]: "PopsPanelButton",
|
|
9170
9164
|
$ele: {
|
|
9171
|
-
panelButton:
|
|
9172
|
-
button:
|
|
9173
|
-
icon:
|
|
9174
|
-
spanText:
|
|
9165
|
+
panelButton: $li.querySelector(".pops-panel-button"),
|
|
9166
|
+
button: $li.querySelector(".pops-panel-button .pops-panel-button_inner"),
|
|
9167
|
+
icon: $li.querySelector(".pops-panel-button .pops-bottom-icon"),
|
|
9168
|
+
spanText: $li.querySelector(".pops-panel-button .pops-panel-button-text"),
|
|
9175
9169
|
},
|
|
9176
9170
|
$data: {},
|
|
9177
9171
|
init() {
|
|
@@ -9284,10 +9278,11 @@ System.register('pops', [], (function (exports) {
|
|
|
9284
9278
|
},
|
|
9285
9279
|
};
|
|
9286
9280
|
PopsPanelButton.init();
|
|
9287
|
-
|
|
9288
|
-
return
|
|
9281
|
+
Reflect.set($li, "data-button", PopsPanelButton);
|
|
9282
|
+
return $li;
|
|
9289
9283
|
},
|
|
9290
9284
|
/**
|
|
9285
|
+
* type ==> deepMenu
|
|
9291
9286
|
* 获取深层容器的元素<li>
|
|
9292
9287
|
* @param formConfig
|
|
9293
9288
|
*/
|
|
@@ -9295,7 +9290,7 @@ System.register('pops', [], (function (exports) {
|
|
|
9295
9290
|
let that = this;
|
|
9296
9291
|
let $li = document.createElement("li");
|
|
9297
9292
|
$li.classList.add("pops-panel-deepMenu-nav-item");
|
|
9298
|
-
$li
|
|
9293
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9299
9294
|
this.setElementClassName($li, formConfig.className);
|
|
9300
9295
|
// 设置属性
|
|
9301
9296
|
this.setElementAttributes($li, formConfig.attributes);
|
|
@@ -9431,6 +9426,7 @@ System.register('pops', [], (function (exports) {
|
|
|
9431
9426
|
let $deepMenuContainer = popsDOMUtils.createElement("section", {
|
|
9432
9427
|
className: "pops-panel-container pops-panel-deepMenu-container",
|
|
9433
9428
|
});
|
|
9429
|
+
Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
|
|
9434
9430
|
let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
|
|
9435
9431
|
className: "pops-panel-deepMenu-container-header-ul",
|
|
9436
9432
|
});
|
|
@@ -9445,13 +9441,13 @@ System.register('pops', [], (function (exports) {
|
|
|
9445
9441
|
className: "pops-panel-deepMenu-container-left-arrow-icon",
|
|
9446
9442
|
innerHTML: PopsIcon.getIcon("arrowLeft"),
|
|
9447
9443
|
});
|
|
9448
|
-
popsDOMUtils.on($headerLeftArrow, "click",
|
|
9449
|
-
event
|
|
9450
|
-
event?.stopPropagation();
|
|
9444
|
+
popsDOMUtils.on($headerLeftArrow, "click", (event) => {
|
|
9445
|
+
popsDOMUtils.preventEvent(event);
|
|
9451
9446
|
// 返回上一层菜单
|
|
9452
|
-
let $prev = $deepMenuContainer.previousElementSibling;
|
|
9447
|
+
let $prev = ($deepMenuContainer.previousElementSibling);
|
|
9453
9448
|
popsDOMUtils.cssShow($prev);
|
|
9454
9449
|
$deepMenuContainer.remove();
|
|
9450
|
+
that.triggerRenderRightContainer($prev);
|
|
9455
9451
|
}, {
|
|
9456
9452
|
once: true,
|
|
9457
9453
|
});
|
|
@@ -9474,6 +9470,7 @@ System.register('pops', [], (function (exports) {
|
|
|
9474
9470
|
sectionBodyContainer: $deepMenuBodyUL,
|
|
9475
9471
|
});
|
|
9476
9472
|
}
|
|
9473
|
+
that.triggerRenderRightContainer($deepMenuContainer);
|
|
9477
9474
|
},
|
|
9478
9475
|
/** 设置项的点击事件 */
|
|
9479
9476
|
setLiClickEvent() {
|
|
@@ -9489,22 +9486,22 @@ System.register('pops', [], (function (exports) {
|
|
|
9489
9486
|
},
|
|
9490
9487
|
};
|
|
9491
9488
|
PopsPanelDeepMenu.init();
|
|
9492
|
-
$li
|
|
9489
|
+
Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
|
|
9493
9490
|
return $li;
|
|
9494
9491
|
},
|
|
9495
9492
|
/**
|
|
9496
|
-
* 获取中间容器的元素<li>
|
|
9497
9493
|
* type ===> own
|
|
9494
|
+
* 获取中间容器的元素<li>
|
|
9498
9495
|
* @param formConfig
|
|
9499
9496
|
*/
|
|
9500
9497
|
createSectionContainerItem_own(formConfig) {
|
|
9501
|
-
let
|
|
9502
|
-
|
|
9498
|
+
let $li = document.createElement("li");
|
|
9499
|
+
Reflect.set($li, "__formConfig__", formConfig);
|
|
9503
9500
|
if (formConfig.className) {
|
|
9504
|
-
|
|
9501
|
+
$li.className = formConfig.className;
|
|
9505
9502
|
}
|
|
9506
|
-
|
|
9507
|
-
return
|
|
9503
|
+
$li = formConfig.getLiElementCallBack($li);
|
|
9504
|
+
return $li;
|
|
9508
9505
|
},
|
|
9509
9506
|
/**
|
|
9510
9507
|
* 获取中间容器的元素<li>
|
|
@@ -9625,6 +9622,17 @@ System.register('pops', [], (function (exports) {
|
|
|
9625
9622
|
});
|
|
9626
9623
|
}
|
|
9627
9624
|
},
|
|
9625
|
+
/**
|
|
9626
|
+
* 触发触发渲染右侧容器的事件
|
|
9627
|
+
*/
|
|
9628
|
+
triggerRenderRightContainer($container) {
|
|
9629
|
+
let __formConfig__ = Reflect.get($container, "__formConfig__");
|
|
9630
|
+
this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
|
|
9631
|
+
detail: {
|
|
9632
|
+
formConfig: __formConfig__,
|
|
9633
|
+
},
|
|
9634
|
+
}));
|
|
9635
|
+
},
|
|
9628
9636
|
/**
|
|
9629
9637
|
*
|
|
9630
9638
|
* @param formConfig
|
|
@@ -9651,6 +9659,8 @@ System.register('pops', [], (function (exports) {
|
|
|
9651
9659
|
const that = this;
|
|
9652
9660
|
popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
|
|
9653
9661
|
this.clearContainer();
|
|
9662
|
+
let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
|
|
9663
|
+
Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
|
|
9654
9664
|
popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
|
|
9655
9665
|
this.clearAsideItemIsVisited();
|
|
9656
9666
|
this.setAsideItemIsVisited(asideLiElement);
|
|
@@ -9658,20 +9668,19 @@ System.register('pops', [], (function (exports) {
|
|
|
9658
9668
|
let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
|
|
9659
9669
|
if (typeof headerTitleText === "string" &&
|
|
9660
9670
|
headerTitleText.trim() !== "") {
|
|
9661
|
-
let
|
|
9662
|
-
|
|
9663
|
-
|
|
9664
|
-
|
|
9665
|
-
|
|
9666
|
-
|
|
9667
|
-
let __forms__ = asideLiElement["__forms__"];
|
|
9668
|
-
__forms__.forEach((formConfig) => {
|
|
9671
|
+
let $containerHeaderTitle = document.createElement("li");
|
|
9672
|
+
Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
|
|
9673
|
+
PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
|
|
9674
|
+
this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
|
|
9675
|
+
}
|
|
9676
|
+
rightContainerFormConfig.forEach((formConfig) => {
|
|
9669
9677
|
this.createSectionContainerItem_forms(formConfig);
|
|
9670
9678
|
});
|
|
9671
9679
|
if (typeof asideConfig.callback === "function") {
|
|
9672
9680
|
/* 执行回调 */
|
|
9673
9681
|
asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
|
|
9674
9682
|
}
|
|
9683
|
+
that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
|
|
9675
9684
|
});
|
|
9676
9685
|
},
|
|
9677
9686
|
};
|
|
@@ -9768,6 +9777,7 @@ System.register('pops', [], (function (exports) {
|
|
|
9768
9777
|
panelHandleContentDetails.init({
|
|
9769
9778
|
config: config,
|
|
9770
9779
|
$el: {
|
|
9780
|
+
$pops: $pops,
|
|
9771
9781
|
$content: $content,
|
|
9772
9782
|
$contentAside: $contentAside,
|
|
9773
9783
|
$contentSectionContainer: $contentSectionContainer,
|
|
@@ -9792,7 +9802,15 @@ System.register('pops', [], (function (exports) {
|
|
|
9792
9802
|
});
|
|
9793
9803
|
}
|
|
9794
9804
|
let result = PopsHandler.handleResultDetails(eventDetails);
|
|
9795
|
-
return
|
|
9805
|
+
return {
|
|
9806
|
+
...result,
|
|
9807
|
+
addEventListener: (event, listener, options) => {
|
|
9808
|
+
$pops.addEventListener(event, listener, options);
|
|
9809
|
+
},
|
|
9810
|
+
removeEventListener: (event, listener, options) => {
|
|
9811
|
+
$pops.removeEventListener(event, listener, options);
|
|
9812
|
+
},
|
|
9813
|
+
};
|
|
9796
9814
|
},
|
|
9797
9815
|
};
|
|
9798
9816
|
|
|
@@ -11036,7 +11054,7 @@ System.register('pops', [], (function (exports) {
|
|
|
11036
11054
|
/** 配置 */
|
|
11037
11055
|
config = {
|
|
11038
11056
|
/** 版本号 */
|
|
11039
|
-
version: "2025.6.
|
|
11057
|
+
version: "2025.6.25",
|
|
11040
11058
|
cssText: PopsCSS,
|
|
11041
11059
|
/** icon图标的svg代码 */
|
|
11042
11060
|
iconSVG: PopsIcon.$data,
|