@whitesev/pops 1.9.5 → 1.9.7

package/dist/index.umd.js

@@ -5546,6 +5546,7 @@
                                     disable() {
                                         return false;
                                     },
+                                    forms: [],
                                 },
                                 {
                                     value: "text",
@@ -5553,6 +5554,7 @@
                                     disable() {
                                         return false;
                                     },
+                                    forms: [],
                                 },
                                 {
                                     value: "html",
@@ -5560,6 +5562,7 @@
                                     disable() {
                                         return false;
                                     },
+                                    forms: [],
                                 },
                             ],
                         },
@@ -7063,6 +7066,7 @@
              * @param formConfig
              */
             createSectionContainerItem_select(formConfig) {
+                const that = this;
                 let liElement = document.createElement("li");
                 liElement["__formConfig__"] = formConfig;
                 this.setElementClassName(liElement, formConfig.className);
@@ -7091,6 +7095,7 @@
                     $eleKey: {
                         disable: "__disable__",
                         value: "__value__",
+                        forms: "__forms__",
                     },
                     $data: {
                         defaultValue: formConfig.getValue(),
@@ -7121,31 +7126,50 @@
                     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) {
@@ -7173,9 +7197,11 @@
                     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,
                         };
                     },
@@ -7184,12 +7210,34 @@
                      */
                     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,
+                                });
+                            }
                         });
                     },
                     /**
@@ -7528,12 +7576,28 @@
                                 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) {
@@ -7599,7 +7663,6 @@
 									--el-fill-color-light: #f5f7fa;
 								}
 								.select-item{
-									cursor: pointer;
 									cursor: pointer;
 									font-size: var(--el-font-size-base);
 									padding: 0 32px 0 20px;
@@ -7612,6 +7675,12 @@
 									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);
 								}
@@ -7649,6 +7718,15 @@
                                 $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);
@@ -9607,6 +9685,12 @@
             this.$data.guid = guid;
             this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
             this.$el.$shadowRoot = ShadowInfo.$shadowRoot;
+            this.show = this.show.bind(this);
+            this.close = this.close.bind(this);
+            this.toolTipAnimationFinishEvent =
+                this.toolTipAnimationFinishEvent.bind(this);
+            this.toolTipMouseEnterEvent = this.toolTipMouseEnterEvent.bind(this);
+            this.toolTipMouseLeaveEvent = this.toolTipMouseLeaveEvent.bind(this);
             this.init();
         }
         init() {
@@ -9861,13 +9945,13 @@
          * 绑定 显示事件
          */
         onShowEvent() {
-            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerShowEventName, this.show.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, this.$data.config.eventOption);
         }
         /**
          * 取消绑定 显示事件
          */
         offShowEvent() {
-            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show.bind(this), {
+            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, {
                 capture: true,
             });
         }
@@ -9917,13 +10001,13 @@
          * 绑定 关闭事件
          */
         onCloseEvent() {
-            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, this.$data.config.eventOption);
         }
         /**
          * 取消绑定 关闭事件
          */
         offCloseEvent() {
-            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close.bind(this), {
+            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, {
                 capture: true,
             });
         }
@@ -9957,13 +10041,13 @@
          * 监听tooltip的动画结束
          */
         onToolTipAnimationFinishEvent() {
-            popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
+            popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
         }
         /**
          * 取消tooltip监听动画结束
          */
         offToolTipAnimationFinishEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
+            popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
         }
         /**
          * 鼠标|触摸进入事件
@@ -9983,13 +10067,13 @@
         onToolTipMouseEnterEvent() {
             this.clearCloseTimeoutId("MouseEvent");
             this.clearCloseTimeoutId("TouchEvent");
-            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
         }
         /**
          * 取消监听鼠标|触摸事件
          */
         offToolTipMouseEnterEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
         }
         /**
          * 鼠标|触摸离开事件
@@ -10002,13 +10086,13 @@
          * 监听鼠标|触摸离开事件
          */
         onToolTipMouseLeaveEvent() {
-            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
         }
         /**
          * 取消监听鼠标|触摸离开事件
          */
         offToolTipMouseLeaveEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
+            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
         }
     }
     class PopsTooltip {
@@ -10053,7 +10137,7 @@
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2024.12.8",
+            version: "2025.1.1",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,