@whitesev/pops 2.0.8 → 2.0.10

package/dist/index.esm.js

@@ -5838,40 +5838,44 @@ const PopsPanelConfig = () => {
                                 value: "select-1",
                                 text: "单选1",
                                 isHTML: false,
-                                disable() {
-                                    return false;
+                                disable(value, allSelectedInfo) {
+                                    return (allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1);
                                 },
                             },
                             {
                                 value: "select-2",
                                 text: "单选2",
                                 isHTML: false,
-                                disable() {
-                                    return false;
+                                disable(value, allSelectedInfo) {
+                                    return (allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1);
                                 },
                             },
                             {
                                 value: "select-3",
                                 text: "单选3",
                                 isHTML: false,
-                                disable() {
-                                    return false;
+                                disable(value, allSelectedInfo) {
+                                    return (allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1);
                                 },
                             },
                             {
                                 value: "select-4",
                                 text: "单选4",
                                 isHTML: false,
-                                disable() {
-                                    return false;
+                                disable(value, allSelectedInfo) {
+                                    return (allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1);
                                 },
                             },
                             {
                                 value: "select-5",
-                                text: "单选5",
+                                text(value, allSelectedInfo) {
+                                    return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
+                                        ? "单选5-禁用"
+                                        : "单选5";
+                                },
                                 isHTML: false,
-                                disable() {
-                                    return false;
+                                disable(value, allSelectedInfo) {
+                                    return (allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1);
                                 },
                             },
                         ],
@@ -7599,6 +7603,8 @@ const PanelHandleContentDetails = () => {
                     $suffix: void 0,
                     /** 下拉箭头图标 */
                     $suffixIcon: void 0,
+                    /** 下拉列表弹窗的下拉列表容器 */
+                    $selectContainer: void 0,
                 },
                 $data: {
                     /** 默认值 */
@@ -7610,7 +7616,7 @@ const PanelHandleContentDetails = () => {
                     this.initDefault();
                     this.inintEl();
                     this.initPlaceHolder();
-                    this.updateTagElement();
+                    this.initTagElement();
                     this.setSelectContainerClickEvent();
                 },
                 /** 初始化默认值 */
@@ -7622,7 +7628,7 @@ const PanelHandleContentDetails = () => {
                                 text: dataItem.text,
                                 value: dataItem.value,
                                 isHTML: Boolean(dataItem.isHTML),
-                                disable: dataItem.disable,
+                                disable: dataItem.disable?.bind(dataItem),
                             });
                         }
                     });
@@ -7658,18 +7664,15 @@ const PanelHandleContentDetails = () => {
                     });
                     this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
                 },
-                /** 初始化tag */
-                updateTagElement() {
+                /** 初始化tag元素 */
+                initTagElement() {
                     // 遍历数据，寻找对应的值
                     formConfig.data.forEach((dataItem) => {
                         let findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
                         if (findValue) {
-                            // 选中的值和获取的所有的值相同
-                            let selectedInfo = this.createSelectedItem({
-                                text: dataItem.text,
-                                isHTML: dataItem.isHTML,
-                            });
-                            this.addSelectedItem(selectedInfo.$tag);
+                            // 存在对应的值
+                            let selectedInfo = this.createSelectedTagItem(dataItem);
+                            this.addSelectedTagItem(selectedInfo.$tag);
                             this.setSelectedItemCloseIconClickEvent({
                                 $tag: selectedInfo.$tag,
                                 $closeIcon: selectedInfo.$closeIcon,
@@ -7684,7 +7687,7 @@ const PanelHandleContentDetails = () => {
                  * 生成一个tag项
                  * @param data 配置
                  */
-                createSelectedItem(data) {
+                createSelectedTagItem(data) {
                     const $selectedItem = popsDOMUtils.createElement("div", {
                         className: "el-select__selected-item el-select__choose_tag",
                         innerHTML: /*html*/ `
@@ -7705,11 +7708,14 @@ const PanelHandleContentDetails = () => {
                     const $tagText = $selectedItem.querySelector(".el-select__tags-text");
                     /** 关闭图标 */
                     const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
+                    let text = typeof data.text === "function"
+                        ? data.text(data, this.$data.selectInfo)
+                        : data.text;
                     if (data.isHTML) {
-                        PopsSafeUtils.setSafeHTML($tagText, data.text);
+                        PopsSafeUtils.setSafeHTML($tagText, text);
                     }
                     else {
-                        $tagText.innerText = data.text;
+                        $tagText.innerText = text;
                     }
                     return {
                         $tag: $selectedItem,
@@ -7718,9 +7724,10 @@ const PanelHandleContentDetails = () => {
                     };
                 },
                 /**
-                 * 添加选中项元素
+                 * 添加选中项的tag元素
+                 * @param $tag 添加的元素
                  */
-                addSelectedItem($ele) {
+                addSelectedTagItem($tag) {
                     // 往前添加
                     // 去除前面的空白
                     this.setSectionIsNear();
@@ -7728,26 +7735,26 @@ const PanelHandleContentDetails = () => {
                         let $prev = this.$el.$selectedInputWrapper.previousElementSibling;
                         if ($prev) {
                             // 存在前一个元素，添加到前面的元素的后面
-                            popsDOMUtils.after($prev, $ele);
+                            popsDOMUtils.after($prev, $tag);
                         }
                         else {
                             // 不存在前一个元素，添加到最前面
-                            popsDOMUtils.before(this.$el.$selectedInputWrapper, $ele);
+                            popsDOMUtils.before(this.$el.$selectedInputWrapper, $tag);
                         }
                     }
                     else if (this.$el.$section.contains(this.$el.$selectedPlaceHolderWrapper)) {
                         let $prev = this.$el.$selectedPlaceHolderWrapper.previousElementSibling;
                         if ($prev) {
                             // 存在前一个元素，添加到前面的元素的后面
-                            popsDOMUtils.after($prev, $ele);
+                            popsDOMUtils.after($prev, $tag);
                         }
                         else {
                             // 不存在前一个元素，添加到最前面
-                            popsDOMUtils.before(this.$el.$selectedPlaceHolderWrapper, $ele);
+                            popsDOMUtils.before(this.$el.$selectedPlaceHolderWrapper, $tag);
                         }
                     }
                     else {
-                        this.$el.$section.appendChild($ele);
+                        this.$el.$section.appendChild($tag);
                     }
                     // 隐藏元素
                     this.hideInputWrapper();
@@ -7760,142 +7767,239 @@ const PanelHandleContentDetails = () => {
                         .forEach(($ele) => {
                         $ele.remove();
                     });
-                    this.updateTagElement();
+                    this.initTagElement();
                 },
                 /**
                  * 选中的值改变的回调
-                 * @param currentSelectInfo 当前的选中信息
+                 * @param selectedDataList 当前的选中信息
                  */
-                selectValueChangeCallBack(currentSelectInfo) {
+                selectValueChangeCallBack(selectedDataList) {
+                    // 动态更新禁用状态
+                    this.updateSelectItem();
                     if (typeof formConfig.callback === "function") {
-                        formConfig.callback(currentSelectInfo || this.$data.selectInfo);
+                        formConfig.callback(selectedDataList || this.$data.selectInfo);
                     }
                 },
-                /** 设置下拉列表的点击事件 */
-                setSelectContainerClickEvent() {
-                    const that = this;
-                    popsDOMUtils.on(this.$el.$container, "click", (event) => {
-                        /** 弹窗的选中的值 */
-                        let selectedInfo = [];
-                        selectedInfo = selectedInfo.concat(that.$data.selectInfo);
-                        /**
-                         * 设置项选中
-                         * @param $ele
-                         */
-                        function setItemSelected($ele) {
-                            $ele.classList.add("select-item-is-selected");
-                        }
-                        /**
-                         * 设置项取消选中
-                         * @param $ele
-                         */
-                        function removeItemSelected($ele) {
-                            $ele.classList.remove("select-item-is-selected");
+                /**
+                 * 更新选项弹窗内的所有选项元素的状态
+                 *
+                 * + 更新禁用状态
+                 * + 更新选中状态
+                 */
+                updateSelectItem() {
+                    this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
+                        const { data, $select } = $selectInfo;
+                        // 更新文字
+                        this.setSelectItemText(data, $selectInfo.$select);
+                        // 更新禁用状态
+                        if (typeof data.disable === "function" &&
+                            data.disable(data.value, this.$data.selectInfo)) {
+                            // 禁用
+                            this.setSelectItemDisabled($select);
+                            // 移除选中信息
+                            this.removeSelectedInfo(data, false);
+                            // 移除选中状态
+                            this.removeSelectItemSelected($select);
                         }
-                        /**
-                         * 添加选中信息
-                         */
-                        function addSelectedInfo($ele) {
-                            let info = getSelectedInfo($ele);
-                            let findValue = selectedInfo.find((item) => item.value === info.value);
-                            if (!findValue) {
-                                selectedInfo.push({
-                                    value: info.value,
-                                    text: info.text,
-                                    isHTML: Boolean(info.isHTML),
-                                    disable: info.disable,
-                                });
-                            }
-                            that.selectValueChangeCallBack(selectedInfo);
+                        else {
+                            // 取消禁用
+                            this.removeSelectItemDisabled($select);
                         }
-                        /**
-                         * 移除选中信息
-                         */
-                        function removeSelectedInfo($ele) {
-                            let info = getSelectedInfo($ele);
-                            let findIndex = selectedInfo.findIndex((item) => item.value === info.value);
-                            if (findIndex !== -1) {
-                                selectedInfo.splice(findIndex, 1);
-                            }
-                            that.selectValueChangeCallBack(selectedInfo);
+                        // 更新选中状态
+                        let findValue = this.$data.selectInfo.find((it) => it.value === data.value);
+                        if (findValue) {
+                            this.setSelectItemSelected($select);
                         }
-                        /**
-                         * 判断该项是否选中
-                         * @param $ele
-                         */
-                        function isSelected($ele) {
-                            return $ele.classList.contains("select-item-is-selected");
+                        else {
+                            this.removeSelectItemSelected($select);
                         }
-                        /**
-                         * 获取选中的项的信息
-                         */
-                        function getSelectedInfo($ele) {
-                            return Reflect.get($ele, "data-info");
+                    });
+                },
+                /**
+                 * 设置选项元素选中
+                 * @param $select 选项元素
+                 */
+                setSelectItemSelected($select) {
+                    if (this.isSelectItemSelected($select))
+                        return;
+                    $select.classList.add("select-item-is-selected");
+                },
+                /**
+                 * 移除选项元素选中
+                 * @param $select 选项元素
+                 */
+                removeSelectItemSelected($select) {
+                    $select.classList.remove("select-item-is-selected");
+                },
+                /**
+                 * 判断选项元素是否选中
+                 * @param $select
+                 */
+                isSelectItemSelected($select) {
+                    return $select.classList.contains("select-item-is-selected");
+                },
+                /**
+                 * 添加选中信息
+                 * @param dataList 选择项列表的数据
+                 * @param $select 选项元素
+                 */
+                addSelectedItemInfo(dataList, $select) {
+                    let info = this.getSelectedItemInfo($select);
+                    let findValue = dataList.find((item) => item.value === info.value);
+                    if (!findValue) {
+                        dataList.push({
+                            value: info.value,
+                            text: info.text,
+                            isHTML: Boolean(info.isHTML),
+                            disable: info.disable?.bind(info),
+                        });
+                    }
+                    this.selectValueChangeCallBack(dataList);
+                },
+                /**
+                 * 获取选中的项的信息
+                 * @param $select 选项元素
+                 */
+                getSelectedItemInfo($select) {
+                    return Reflect.get($select, "data-info");
+                },
+                /**
+                 * 移除选中信息
+                 * @param dataList 选择项的数据
+                 * @param $select 选项元素
+                 */
+                removeSelectedItemInfo(dataList, $select) {
+                    let info = this.getSelectedItemInfo($select);
+                    let findIndex = dataList.findIndex((item) => item.value === info.value);
+                    if (findIndex !== -1) {
+                        dataList.splice(findIndex, 1);
+                    }
+                    this.selectValueChangeCallBack(dataList);
+                },
+                /**
+                 * 获取所有选项的信息
+                 * @param [onlySelected=true] 是否仅获取选中的项的信息
+                 * + true （默认）仅获取选中项的信息
+                 * + false 获取所有选择项的信息
+                 */
+                getAllSelectItemInfo(onlySelected = true) {
+                    return Array.from(this.$el.$selectContainer?.querySelectorAll(".select-item") ?? [])
+                        .map(($select) => {
+                        let data = this.getSelectedItemInfo($select);
+                        let result = {
+                            /** 选项信息数据 */
+                            data: data,
+                            /** 选项元素 */
+                            $select: $select,
+                        };
+                        if (onlySelected) {
+                            // 仅选中
+                            let isSelected = this.isSelectItemSelected($select);
+                            if (isSelected) {
+                                return result;
+                            }
+                            return;
                         }
-                        /**
-                         * 获取所有选中的项的信息
-                         */
-                        function getAllSelectedInfo() {
-                            return Array.from($selectContainer.querySelectorAll(".select-item"))
-                                .map(($ele) => {
-                                if (isSelected($ele)) {
-                                    return getSelectedInfo($ele);
-                                }
-                            })
-                                .filter((item) => {
-                                return item != null;
-                            });
+                        else {
+                            return result;
                         }
-                        /**
-                         * 创建一个选择项元素
-                         */
-                        function createSelectItemElement(dataInfo) {
-                            let $item = popsDOMUtils.createElement("li", {
-                                className: "select-item",
-                                innerHTML: /*html*/ `<span>${dataInfo.text}</span>`,
-                            });
-                            Reflect.set($item, "data-info", dataInfo);
-                            return $item;
+                    })
+                        .filter((item) => {
+                        return item != null;
+                    });
+                },
+                /**
+                 * 创建一个选择项元素
+                 * @param data 选择项的数据
+                 */
+                createSelectItemElement(data) {
+                    let $select = popsDOMUtils.createElement("li", {
+                        className: "select-item",
+                        innerHTML: /*html*/ `
+							<span class="select-item-text"></span>
+						`,
+                    });
+                    this.setSelectItemText(data, $select);
+                    Reflect.set($select, "data-info", data);
+                    return $select;
+                },
+                /**
+                 * 设置选择项的文字
+                 * @param data 选择项的数据
+                 * @param $select 选择项元素
+                 */
+                setSelectItemText(data, $select) {
+                    let text = typeof data.text === "function"
+                        ? data.text(data.value, this.$data.selectInfo)
+                        : data.text;
+                    let $selectSpan = $select.querySelector(".select-item-text");
+                    if (data.isHTML) {
+                        PopsSafeUtils.setSafeHTML($selectSpan, text);
+                    }
+                    else {
+                        $selectSpan.innerText = text;
+                    }
+                },
+                /**
+                 * 设置选择项的禁用状态
+                 * @param $select 选择项元素
+                 */
+                setSelectItemDisabled($select) {
+                    $select.setAttribute("aria-disabled", "true");
+                    $select.setAttribute("disabled", "true");
+                },
+                /**
+                 * 移除选择项的禁用状态
+                 * @param $select 选择项元素
+                 */
+                removeSelectItemDisabled($select) {
+                    $select.removeAttribute("aria-disabled");
+                    $select.removeAttribute("disabled");
+                },
+                /**
+                 * 判断选择项是否禁用
+                 * @param $select 选择项元素
+                 */
+                isSelectItemDisabled($select) {
+                    return $select.hasAttribute("disabled") || $select.ariaDisabled;
+                },
+                /**
+                 * 设置选择项的点击事件
+                 * @param dataList 选中的信息列表
+                 * @param $select 选择项元素
+                 */
+                setSelectElementClickEvent(dataList, $select) {
+                    popsDOMUtils.on($select, "click", (event) => {
+                        popsDOMUtils.preventEvent(event);
+                        if (this.isSelectItemDisabled($select)) {
+                            return;
                         }
-                        /**
-                         * 设置选择项的禁用状态
-                         */
-                        function setSelectItemDisabled($el) {
-                            $el.setAttribute("aria-disabled", "true");
+                        if (typeof formConfig.clickCallBack === "function") {
+                            let allSelectedInfo = this.getAllSelectItemInfo().map((it) => it.data);
+                            let clickResult = formConfig.clickCallBack(event, allSelectedInfo);
+                            if (typeof clickResult === "boolean" && !clickResult) {
+                                return;
+                            }
                         }
-                        /**
-                         * 移除选择项的禁用状态
-                         */
-                        function removeSelectItemDisabled($el) {
-                            $el.removeAttribute("aria-disabled");
-                            $el.removeAttribute("disabled");
+                        // 修改选中状态
+                        if (this.isSelectItemSelected($select)) {
+                            this.removeSelectItemSelected($select);
+                            this.removeSelectedItemInfo(dataList, $select);
                         }
-                        /**
-                         * 设置选择项的点击事件
-                         */
-                        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) {
-                                        return;
-                                    }
-                                }
-                                // 修改选中状态
-                                if (isSelected($ele)) {
-                                    removeItemSelected($ele);
-                                    removeSelectedInfo($ele);
-                                }
-                                else {
-                                    setItemSelected($ele);
-                                    addSelectedInfo($ele);
-                                }
-                            });
+                        else {
+                            this.setSelectItemSelected($select);
+                            this.addSelectedItemInfo(dataList, $select);
                         }
+                    });
+                },
+                /**
+                 * 设置下拉列表的点击事件
+                 */
+                setSelectContainerClickEvent() {
+                    const that = this;
+                    popsDOMUtils.on(this.$el.$container, "click", (event) => {
+                        /** 弹窗的选中的值 */
+                        let selectedInfo = that.$data.selectInfo;
                         let { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
                         let confirmDetails = popsUtils.assign({
                             title: {
@@ -7917,6 +8021,7 @@ const PanelHandleContentDetails = () => {
                                     callback(details, event) {
                                         that.$data.selectInfo = [...selectedInfo];
                                         that.updateSelectTagItem();
+                                        that.$el.$selectContainer = null;
                                         details.close();
                                     },
                                 },
@@ -7927,6 +8032,7 @@ const PanelHandleContentDetails = () => {
                                     originalRun();
                                     that.$data.selectInfo = [...selectedInfo];
                                     that.updateSelectTagItem();
+                                    that.$el.$selectContainer = null;
                                 },
                                 clickEvent: {
                                     toClose: true,
@@ -7992,30 +8098,23 @@ const PanelHandleContentDetails = () => {
                         }, userConfirmDetails);
                         let $dialog = pops.alert(confirmDetails);
                         let $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
+                        this.$el.$selectContainer = $selectContainer;
                         // 配置选项元素
                         formConfig.data.forEach((item) => {
-                            let $select = createSelectItemElement(item);
+                            let $select = this.createSelectItemElement(item);
                             // 添加到confirm中
                             $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);
-                            }
+                            this.setSelectElementClickEvent(selectedInfo, $select);
                         });
+                        // 动态更新禁用状态
+                        this.updateSelectItem();
                     });
                 },
-                /** 设置关闭图标的点击事件 */
+                /**
+                 * 设置关闭图标的点击事件
+                 * @param data 选中的信息
+                 */
                 setSelectedItemCloseIconClickEvent(data) {
                     popsDOMUtils.on(data.$closeIcon, "click", (event) => {
                         popsDOMUtils.preventEvent(event);
@@ -8024,13 +8123,15 @@ const PanelHandleContentDetails = () => {
                                 $tag: data.$tag,
                                 $closeIcon: data.$closeIcon,
                                 value: data.value,
-                                text: data.text,
+                                text: typeof data.text === "function"
+                                    ? data.text.bind(data)
+                                    : data.text,
                             });
                             if (typeof result === "boolean" && !result) {
                                 return;
                             }
                         }
-                        this.removeSelectedItem(data.$tag);
+                        this.removeSelectedTagItem(data.$tag);
                         this.removeSelectedInfo({
                             value: data.value,
                             text: data.text,
@@ -8050,13 +8151,21 @@ const PanelHandleContentDetails = () => {
                         this.removeSectionIsNear();
                     }
                 },
-                /** 移除选中项元素 */
-                removeSelectedItem($ele) {
-                    $ele.remove();
+                /**
+                 * 移除选中项元素
+                 */
+                removeSelectedTagItem($tag) {
+                    $tag.remove();
                     this.checkTagEmpty();
                 },
-                /** 移除选中的信息 */
-                removeSelectedInfo(data) {
+                /**
+                 * 从保存的已选中的信息列表中移除目标信息
+                 * @param data 需要移除的信息
+                 * @param [triggerValueChangeCallBack=true] 是否触发值改变的回调
+                 * + true （默认）触发值改变的回调
+                 * + false 不触发值改变的回调
+                 */
+                removeSelectedInfo(data, triggerValueChangeCallBack = true) {
                     for (let index = 0; index < this.$data.selectInfo.length; index++) {
                         const selectInfo = this.$data.selectInfo[index];
                         if (selectInfo.value === data.value) {
@@ -8064,7 +8173,7 @@ const PanelHandleContentDetails = () => {
                             break;
                         }
                     }
-                    this.selectValueChangeCallBack();
+                    triggerValueChangeCallBack && this.selectValueChangeCallBack();
                 },
                 /** 显示输入框 */
                 showInputWrapper() {
@@ -9913,6 +10022,7 @@ const PopsTooltipConfig = () => {
         useShadowRoot: true,
         target: null,
         content: "默认文字",
+        isDiffContent: false,
         position: "top",
         className: "",
         isFixed: false,
@@ -10038,6 +10148,19 @@ class ToolTip {
         if (text == null) {
             text = this.getContent();
         }
+        if (this.$data.config.isDiffContent) {
+            let contentPropKey = "data-content";
+            // @ts-ignore
+            let originContentText = this.$el.$content[contentPropKey];
+            if (typeof originContentText === "string") {
+                if (originContentText === text) {
+                    // 内容未改变，不修改避免渲染
+                    return;
+                }
+            }
+            // @ts-ignore
+            this.$el.$content[contentPropKey] = text;
+        }
         PopsSafeUtils.setSafeHTML(this.$el.$content, text);
     }
     /**