@whitesev/pops 1.9.6 → 1.9.7

package/dist/index.esm.js

@@ -5540,6 +5540,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                             {
                                 value: "text",
@@ -5547,6 +5548,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                             {
                                 value: "html",
@@ -5554,6 +5556,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                         ],
                     },
@@ -7057,6 +7060,7 @@ const PanelHandleContentDetails = () => {
          * @param formConfig
          */
         createSectionContainerItem_select(formConfig) {
+            const that = this;
             let liElement = document.createElement("li");
             liElement["__formConfig__"] = formConfig;
             this.setElementClassName(liElement, formConfig.className);
@@ -7085,6 +7089,7 @@ const PanelHandleContentDetails = () => {
                 $eleKey: {
                     disable: "__disable__",
                     value: "__value__",
+                    forms: "__forms__",
                 },
                 $data: {
                     defaultValue: formConfig.getValue(),
@@ -7115,31 +7120,50 @@ const PanelHandleContentDetails = () => {
                 getNodeValue($ele, key) {
                     return Reflect.get($ele, key);
                 },
+                /**
+                 * 禁用选项
+                 */
                 disable() {
                     this.$ele.select.setAttribute("disabled", "true");
                     this.$ele.panelSelect.classList.add("pops-panel-select-disable");
                 },
+                /**
+                 * 取消禁用
+                 */
                 notDisable() {
                     this.$ele.select.removeAttribute("disabled");
                     this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
                 },
+                /**
+                 * 判断是否禁用
+                 */
                 isDisabled() {
                     return (this.$ele.select.hasAttribute("disabled") ||
                         this.$ele.panelSelect.classList.contains("pops-panel-select-disable"));
                 },
+                /**
+                 * 初始化选项
+                 */
                 initOption() {
                     formConfig.data.forEach((dataItem) => {
                         // 初始化默认选中
                         let optionElement = document.createElement("option");
                         this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
                         this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
+                        this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
                         if (dataItem.value === this.$data.defaultValue) {
-                            optionElement.setAttribute("selected", "true");
+                            this.setOptionSelected(optionElement);
                         }
                         optionElement.innerText = dataItem.text;
                         this.$ele.select.appendChild(optionElement);
                     });
                 },
+                /**
+                 * 设置选项选中
+                 */
+                setOptionSelected($option) {
+                    $option.setAttribute("selected", "true");
+                },
                 /** 检测所有option并设置禁用状态 */
                 setSelectOptionsDisableStatus() {
                     if (this.$ele.select.options && this.$ele.select.options.length) {
@@ -7167,9 +7191,11 @@ const PanelHandleContentDetails = () => {
                 getSelectOptionInfo($option) {
                     let optionValue = this.getNodeValue($option, this.$eleKey.value);
                     let optionText = $option.innerText || $option.textContent;
+                    let optionForms = this.getNodeValue($option, this.$eleKey.forms);
                     return {
                         value: optionValue,
                         text: optionText,
+                        forms: optionForms,
                         $option: $option,
                     };
                 },
@@ -7178,12 +7204,34 @@ const PanelHandleContentDetails = () => {
                  */
                 setChangeEvent() {
                     popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
+                        let $isSelectedElement = event.target[event.target.selectedIndex];
+                        let selectInfo = this.getSelectOptionInfo($isSelectedElement);
                         this.setSelectOptionsDisableStatus();
                         if (typeof formConfig.callback === "function") {
-                            let $isSelectedElement = event.target[event.target.selectedIndex];
-                            let selectInfo = this.getSelectOptionInfo($isSelectedElement);
                             formConfig.callback(event, selectInfo.value, selectInfo.text);
                         }
+                        let forms = typeof selectInfo.forms === "function"
+                            ? selectInfo.forms()
+                            : selectInfo.forms;
+                        if (Array.isArray(forms)) {
+                            /* 如果成功创建，加入到中间容器中 */
+                            let childUListClassName = "pops-panel-select-child-forms";
+                            // 移除旧的元素
+                            while (liElement.nextElementSibling) {
+                                if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
+                                    liElement.nextElementSibling.remove();
+                                }
+                                else {
+                                    break;
+                                }
+                            }
+                            let $childUList = document.createElement("ul");
+                            $childUList.className = childUListClassName;
+                            popsDOMUtils.after(liElement, $childUList);
+                            that.uListContainerAddItem(formConfig, {
+                                ulElement: $childUList,
+                            });
+                        }
                     });
                 },
                 /**
@@ -7522,12 +7570,28 @@ const PanelHandleContentDetails = () => {
                             Reflect.set($item, "data-info", dataInfo);
                             return $item;
                         }
+                        /**
+                         * 设置选择项的禁用状态
+                         */
+                        function setSelectItemDisabled($el) {
+                            $el.setAttribute("aria-disabled", "true");
+                        }
+                        /**
+                         * 移除选择项的禁用状态
+                         */
+                        function removeSelectItemDisabled($el) {
+                            $el.removeAttribute("aria-disabled");
+                            $el.removeAttribute("disabled");
+                        }
                         /**
                          * 设置选择项的点击事件
                          */
                         function setSelectElementClickEvent($ele) {
                             popsDOMUtils.on($ele, "click", (event) => {
                                 popsDOMUtils.preventEvent(event);
+                                if ($ele.hasAttribute("disabled") || $ele.ariaDisabled) {
+                                    return;
+                                }
                                 if (typeof formConfig.clickCallBack === "function") {
                                     let clickResult = formConfig.clickCallBack(event, getAllSelectedInfo());
                                     if (typeof clickResult === "boolean" && !clickResult) {
@@ -7593,7 +7657,6 @@ const PanelHandleContentDetails = () => {
 									--el-fill-color-light: #f5f7fa;
 								}
 								.select-item{
-									cursor: pointer;
 									cursor: pointer;
 									font-size: var(--el-font-size-base);
 									padding: 0 32px 0 20px;
@@ -7606,6 +7669,12 @@ const PanelHandleContentDetails = () => {
 									line-height: 34px;
 									box-sizing: border-box;
 								}
+								.select-item[aria-disabled],
+								.select-item[disabled]{
+									cursor: not-allowed;
+									color: #a8abb2;
+									background: unset;
+								}
 								.select-item:hover{
 									background-color: var(--el-fill-color-light);
 								}
@@ -7643,6 +7712,15 @@ const PanelHandleContentDetails = () => {
                             $selectContainer.appendChild($select);
                             // 设置每一项的点击事件
                             setSelectElementClickEvent($select);
+                            // 设置禁用状态
+                            if (typeof item.disable === "function" &&
+                                item.disable(item.value)) {
+                                setSelectItemDisabled($select);
+                                // 后续不设置元素的选中状态
+                                return;
+                            }
+                            // 移除禁用状态
+                            removeSelectItemDisabled($select);
                             let findValue = selectedInfo.find((value) => value.value === item.value);
                             if (findValue) {
                                 setItemSelected($select);
@@ -10053,7 +10131,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2024.12.8",
+        version: "2025.1.1",
         cssText: {
             /** 主CSS */
             index: indexCSS,