@whitesev/pops 2.0.8 → 2.0.10

package/dist/index.umd.js

@@ -5844,40 +5844,44 @@
                                     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);
                                     },
                                 },
                             ],
@@ -7605,6 +7609,8 @@
                         $suffix: void 0,
                         /** 下拉箭头图标 */
                         $suffixIcon: void 0,
+                        /** 下拉列表弹窗的下拉列表容器 */
+                        $selectContainer: void 0,
                     },
                     $data: {
                         /** 默认值 */
@@ -7616,7 +7622,7 @@
                         this.initDefault();
                         this.inintEl();
                         this.initPlaceHolder();
-                        this.updateTagElement();
+                        this.initTagElement();
                         this.setSelectContainerClickEvent();
                     },
                     /** 初始化默认值 */
@@ -7628,7 +7634,7 @@
                                     text: dataItem.text,
                                     value: dataItem.value,
                                     isHTML: Boolean(dataItem.isHTML),
-                                    disable: dataItem.disable,
+                                    disable: dataItem.disable?.bind(dataItem),
                                 });
                             }
                         });
@@ -7664,18 +7670,15 @@
                         });
                         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,
@@ -7690,7 +7693,7 @@
                      * 生成一个tag项
                      * @param data 配置
                      */
-                    createSelectedItem(data) {
+                    createSelectedTagItem(data) {
                         const $selectedItem = popsDOMUtils.createElement("div", {
                             className: "el-select__selected-item el-select__choose_tag",
                             innerHTML: /*html*/ `
@@ -7711,11 +7714,14 @@
                         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,
@@ -7724,9 +7730,10 @@
                         };
                     },
                     /**
-                     * 添加选中项元素
+                     * 添加选中项的tag元素
+                     * @param $tag 添加的元素
                      */
-                    addSelectedItem($ele) {
+                    addSelectedTagItem($tag) {
                         // 往前添加
                         // 去除前面的空白
                         this.setSectionIsNear();
@@ -7734,26 +7741,26 @@
                             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();
@@ -7766,142 +7773,239 @@
                             .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: {
@@ -7923,6 +8027,7 @@
                                         callback(details, event) {
                                             that.$data.selectInfo = [...selectedInfo];
                                             that.updateSelectTagItem();
+                                            that.$el.$selectContainer = null;
                                             details.close();
                                         },
                                     },
@@ -7933,6 +8038,7 @@
                                         originalRun();
                                         that.$data.selectInfo = [...selectedInfo];
                                         that.updateSelectTagItem();
+                                        that.$el.$selectContainer = null;
                                     },
                                     clickEvent: {
                                         toClose: true,
@@ -7998,30 +8104,23 @@
                             }, 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);
@@ -8030,13 +8129,15 @@
                                     $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,
@@ -8056,13 +8157,21 @@
                             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) {
@@ -8070,7 +8179,7 @@
                                 break;
                             }
                         }
-                        this.selectValueChangeCallBack();
+                        triggerValueChangeCallBack && this.selectValueChangeCallBack();
                     },
                     /** 显示输入框 */
                     showInputWrapper() {
@@ -9919,6 +10028,7 @@
             useShadowRoot: true,
             target: null,
             content: "默认文字",
+            isDiffContent: false,
             position: "top",
             className: "",
             isFixed: false,
@@ -10044,6 +10154,19 @@
             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);
         }
         /**