@whitesev/pops 1.9.6 → 1.9.7
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 +83 -5
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +83 -5
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +83 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +83 -5
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +83 -5
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +83 -5
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/components/panel/selectType.d.ts +6 -0
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/panel/PanelHandleContentDetails.ts +94 -6
- package/src/components/panel/config.ts +3 -0
- package/src/components/panel/selectType.ts +8 -0
package/dist/index.amd.js
CHANGED
|
@@ -5542,6 +5542,7 @@ define((function () { 'use strict';
|
|
|
5542
5542
|
disable() {
|
|
5543
5543
|
return false;
|
|
5544
5544
|
},
|
|
5545
|
+
forms: [],
|
|
5545
5546
|
},
|
|
5546
5547
|
{
|
|
5547
5548
|
value: "text",
|
|
@@ -5549,6 +5550,7 @@ define((function () { 'use strict';
|
|
|
5549
5550
|
disable() {
|
|
5550
5551
|
return false;
|
|
5551
5552
|
},
|
|
5553
|
+
forms: [],
|
|
5552
5554
|
},
|
|
5553
5555
|
{
|
|
5554
5556
|
value: "html",
|
|
@@ -5556,6 +5558,7 @@ define((function () { 'use strict';
|
|
|
5556
5558
|
disable() {
|
|
5557
5559
|
return false;
|
|
5558
5560
|
},
|
|
5561
|
+
forms: [],
|
|
5559
5562
|
},
|
|
5560
5563
|
],
|
|
5561
5564
|
},
|
|
@@ -7059,6 +7062,7 @@ define((function () { 'use strict';
|
|
|
7059
7062
|
* @param formConfig
|
|
7060
7063
|
*/
|
|
7061
7064
|
createSectionContainerItem_select(formConfig) {
|
|
7065
|
+
const that = this;
|
|
7062
7066
|
let liElement = document.createElement("li");
|
|
7063
7067
|
liElement["__formConfig__"] = formConfig;
|
|
7064
7068
|
this.setElementClassName(liElement, formConfig.className);
|
|
@@ -7087,6 +7091,7 @@ define((function () { 'use strict';
|
|
|
7087
7091
|
$eleKey: {
|
|
7088
7092
|
disable: "__disable__",
|
|
7089
7093
|
value: "__value__",
|
|
7094
|
+
forms: "__forms__",
|
|
7090
7095
|
},
|
|
7091
7096
|
$data: {
|
|
7092
7097
|
defaultValue: formConfig.getValue(),
|
|
@@ -7117,31 +7122,50 @@ define((function () { 'use strict';
|
|
|
7117
7122
|
getNodeValue($ele, key) {
|
|
7118
7123
|
return Reflect.get($ele, key);
|
|
7119
7124
|
},
|
|
7125
|
+
/**
|
|
7126
|
+
* 禁用选项
|
|
7127
|
+
*/
|
|
7120
7128
|
disable() {
|
|
7121
7129
|
this.$ele.select.setAttribute("disabled", "true");
|
|
7122
7130
|
this.$ele.panelSelect.classList.add("pops-panel-select-disable");
|
|
7123
7131
|
},
|
|
7132
|
+
/**
|
|
7133
|
+
* 取消禁用
|
|
7134
|
+
*/
|
|
7124
7135
|
notDisable() {
|
|
7125
7136
|
this.$ele.select.removeAttribute("disabled");
|
|
7126
7137
|
this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
|
|
7127
7138
|
},
|
|
7139
|
+
/**
|
|
7140
|
+
* 判断是否禁用
|
|
7141
|
+
*/
|
|
7128
7142
|
isDisabled() {
|
|
7129
7143
|
return (this.$ele.select.hasAttribute("disabled") ||
|
|
7130
7144
|
this.$ele.panelSelect.classList.contains("pops-panel-select-disable"));
|
|
7131
7145
|
},
|
|
7146
|
+
/**
|
|
7147
|
+
* 初始化选项
|
|
7148
|
+
*/
|
|
7132
7149
|
initOption() {
|
|
7133
7150
|
formConfig.data.forEach((dataItem) => {
|
|
7134
7151
|
// 初始化默认选中
|
|
7135
7152
|
let optionElement = document.createElement("option");
|
|
7136
7153
|
this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
|
|
7137
7154
|
this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
|
|
7155
|
+
this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
|
|
7138
7156
|
if (dataItem.value === this.$data.defaultValue) {
|
|
7139
|
-
|
|
7157
|
+
this.setOptionSelected(optionElement);
|
|
7140
7158
|
}
|
|
7141
7159
|
optionElement.innerText = dataItem.text;
|
|
7142
7160
|
this.$ele.select.appendChild(optionElement);
|
|
7143
7161
|
});
|
|
7144
7162
|
},
|
|
7163
|
+
/**
|
|
7164
|
+
* 设置选项选中
|
|
7165
|
+
*/
|
|
7166
|
+
setOptionSelected($option) {
|
|
7167
|
+
$option.setAttribute("selected", "true");
|
|
7168
|
+
},
|
|
7145
7169
|
/** 检测所有option并设置禁用状态 */
|
|
7146
7170
|
setSelectOptionsDisableStatus() {
|
|
7147
7171
|
if (this.$ele.select.options && this.$ele.select.options.length) {
|
|
@@ -7169,9 +7193,11 @@ define((function () { 'use strict';
|
|
|
7169
7193
|
getSelectOptionInfo($option) {
|
|
7170
7194
|
let optionValue = this.getNodeValue($option, this.$eleKey.value);
|
|
7171
7195
|
let optionText = $option.innerText || $option.textContent;
|
|
7196
|
+
let optionForms = this.getNodeValue($option, this.$eleKey.forms);
|
|
7172
7197
|
return {
|
|
7173
7198
|
value: optionValue,
|
|
7174
7199
|
text: optionText,
|
|
7200
|
+
forms: optionForms,
|
|
7175
7201
|
$option: $option,
|
|
7176
7202
|
};
|
|
7177
7203
|
},
|
|
@@ -7180,12 +7206,34 @@ define((function () { 'use strict';
|
|
|
7180
7206
|
*/
|
|
7181
7207
|
setChangeEvent() {
|
|
7182
7208
|
popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
|
|
7209
|
+
let $isSelectedElement = event.target[event.target.selectedIndex];
|
|
7210
|
+
let selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
7183
7211
|
this.setSelectOptionsDisableStatus();
|
|
7184
7212
|
if (typeof formConfig.callback === "function") {
|
|
7185
|
-
let $isSelectedElement = event.target[event.target.selectedIndex];
|
|
7186
|
-
let selectInfo = this.getSelectOptionInfo($isSelectedElement);
|
|
7187
7213
|
formConfig.callback(event, selectInfo.value, selectInfo.text);
|
|
7188
7214
|
}
|
|
7215
|
+
let forms = typeof selectInfo.forms === "function"
|
|
7216
|
+
? selectInfo.forms()
|
|
7217
|
+
: selectInfo.forms;
|
|
7218
|
+
if (Array.isArray(forms)) {
|
|
7219
|
+
/* 如果成功创建，加入到中间容器中 */
|
|
7220
|
+
let childUListClassName = "pops-panel-select-child-forms";
|
|
7221
|
+
// 移除旧的元素
|
|
7222
|
+
while (liElement.nextElementSibling) {
|
|
7223
|
+
if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
|
|
7224
|
+
liElement.nextElementSibling.remove();
|
|
7225
|
+
}
|
|
7226
|
+
else {
|
|
7227
|
+
break;
|
|
7228
|
+
}
|
|
7229
|
+
}
|
|
7230
|
+
let $childUList = document.createElement("ul");
|
|
7231
|
+
$childUList.className = childUListClassName;
|
|
7232
|
+
popsDOMUtils.after(liElement, $childUList);
|
|
7233
|
+
that.uListContainerAddItem(formConfig, {
|
|
7234
|
+
ulElement: $childUList,
|
|
7235
|
+
});
|
|
7236
|
+
}
|
|
7189
7237
|
});
|
|
7190
7238
|
},
|
|
7191
7239
|
/**
|
|
@@ -7524,12 +7572,28 @@ define((function () { 'use strict';
|
|
|
7524
7572
|
Reflect.set($item, "data-info", dataInfo);
|
|
7525
7573
|
return $item;
|
|
7526
7574
|
}
|
|
7575
|
+
/**
|
|
7576
|
+
* 设置选择项的禁用状态
|
|
7577
|
+
*/
|
|
7578
|
+
function setSelectItemDisabled($el) {
|
|
7579
|
+
$el.setAttribute("aria-disabled", "true");
|
|
7580
|
+
}
|
|
7581
|
+
/**
|
|
7582
|
+
* 移除选择项的禁用状态
|
|
7583
|
+
*/
|
|
7584
|
+
function removeSelectItemDisabled($el) {
|
|
7585
|
+
$el.removeAttribute("aria-disabled");
|
|
7586
|
+
$el.removeAttribute("disabled");
|
|
7587
|
+
}
|
|
7527
7588
|
/**
|
|
7528
7589
|
* 设置选择项的点击事件
|
|
7529
7590
|
*/
|
|
7530
7591
|
function setSelectElementClickEvent($ele) {
|
|
7531
7592
|
popsDOMUtils.on($ele, "click", (event) => {
|
|
7532
7593
|
popsDOMUtils.preventEvent(event);
|
|
7594
|
+
if ($ele.hasAttribute("disabled") || $ele.ariaDisabled) {
|
|
7595
|
+
return;
|
|
7596
|
+
}
|
|
7533
7597
|
if (typeof formConfig.clickCallBack === "function") {
|
|
7534
7598
|
let clickResult = formConfig.clickCallBack(event, getAllSelectedInfo());
|
|
7535
7599
|
if (typeof clickResult === "boolean" && !clickResult) {
|
|
@@ -7595,7 +7659,6 @@ define((function () { 'use strict';
|
|
|
7595
7659
|
--el-fill-color-light: #f5f7fa;
|
|
7596
7660
|
}
|
|
7597
7661
|
.select-item{
|
|
7598
|
-
cursor: pointer;
|
|
7599
7662
|
cursor: pointer;
|
|
7600
7663
|
font-size: var(--el-font-size-base);
|
|
7601
7664
|
padding: 0 32px 0 20px;
|
|
@@ -7608,6 +7671,12 @@ define((function () { 'use strict';
|
|
|
7608
7671
|
line-height: 34px;
|
|
7609
7672
|
box-sizing: border-box;
|
|
7610
7673
|
}
|
|
7674
|
+
.select-item[aria-disabled],
|
|
7675
|
+
.select-item[disabled]{
|
|
7676
|
+
cursor: not-allowed;
|
|
7677
|
+
color: #a8abb2;
|
|
7678
|
+
background: unset;
|
|
7679
|
+
}
|
|
7611
7680
|
.select-item:hover{
|
|
7612
7681
|
background-color: var(--el-fill-color-light);
|
|
7613
7682
|
}
|
|
@@ -7645,6 +7714,15 @@ define((function () { 'use strict';
|
|
|
7645
7714
|
$selectContainer.appendChild($select);
|
|
7646
7715
|
// 设置每一项的点击事件
|
|
7647
7716
|
setSelectElementClickEvent($select);
|
|
7717
|
+
// 设置禁用状态
|
|
7718
|
+
if (typeof item.disable === "function" &&
|
|
7719
|
+
item.disable(item.value)) {
|
|
7720
|
+
setSelectItemDisabled($select);
|
|
7721
|
+
// 后续不设置元素的选中状态
|
|
7722
|
+
return;
|
|
7723
|
+
}
|
|
7724
|
+
// 移除禁用状态
|
|
7725
|
+
removeSelectItemDisabled($select);
|
|
7648
7726
|
let findValue = selectedInfo.find((value) => value.value === item.value);
|
|
7649
7727
|
if (findValue) {
|
|
7650
7728
|
setItemSelected($select);
|
|
@@ -10055,7 +10133,7 @@ define((function () { 'use strict';
|
|
|
10055
10133
|
/** 配置 */
|
|
10056
10134
|
config = {
|
|
10057
10135
|
/** 版本号 */
|
|
10058
|
-
version: "
|
|
10136
|
+
version: "2025.1.1",
|
|
10059
10137
|
cssText: {
|
|
10060
10138
|
/** 主CSS */
|
|
10061
10139
|
index: indexCSS,
|