@whitesev/pops 1.6.4 → 1.6.6

package/dist/index.system.js

@@ -7285,11 +7285,21 @@ System.register('pops', [], (function (exports) {
                      * 右侧主内容的ul容器
                      */
                     sectionContainerULElement: null,
+                    /**
+                     * 元素
+                     */
                     $el: {
+                        /** 内容 */
                         $content: null,
+                        /** 左侧容器 */
                         $contentAside: null,
+                        /** 右侧容器 */
                         $contentSectionContainer: null,
                     },
+                    /**
+                     * 初始化
+                     * @param details
+                     */
                     init(details) {
                         // @ts-ignore
                         this.$el = null;
@@ -7303,40 +7313,48 @@ System.register('pops', [], (function (exports) {
                         this.sectionContainerULElement =
                             this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
                         /**
-                         * 默认点击的左侧容器
+                         * 默认点击的左侧容器项
                          */
-                        let asideDefaultItemElement = null;
+                        let $asideDefaultItemElement = null;
+                        /** 是否滚动到默认位置（第一个项） */
                         let isScrollToDefaultView = false;
-                        details.config.content.forEach((asideItem) => {
-                            let asideLiElement = this.getAsideItem(asideItem);
-                            this.setAsideItemClickEvent(asideLiElement, asideItem);
-                            this.asideULElement.appendChild(asideLiElement);
-                            if (asideDefaultItemElement == null) {
+                        details.config.content.forEach((asideItemConfig) => {
+                            let $asideLiElement = this.createAsideItem(asideItemConfig);
+                            this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
+                            this.asideULElement.appendChild($asideLiElement);
+                            if ($asideDefaultItemElement == null) {
                                 let flag = false;
-                                if (typeof asideItem.isDefault === "function") {
-                                    flag = Boolean(asideItem.isDefault());
+                                if (typeof asideItemConfig.isDefault === "function") {
+                                    flag = Boolean(asideItemConfig.isDefault());
                                 }
                                 else {
-                                    flag = Boolean(asideItem.isDefault);
+                                    flag = Boolean(asideItemConfig.isDefault);
                                 }
                                 if (flag) {
-                                    asideDefaultItemElement = asideLiElement;
-                                    isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
+                                    $asideDefaultItemElement = $asideLiElement;
+                                    isScrollToDefaultView = Boolean(asideItemConfig.scrollToDefaultView);
                                 }
                             }
+                            if (typeof asideItemConfig.afterRender === "function") {
+                                // 执行渲染完毕的回调
+                                asideItemConfig.afterRender({
+                                    asideConfig: asideItemConfig,
+                                    $asideLiElement: $asideLiElement,
+                                });
+                            }
                         });
                         /* 点击左侧列表 */
-                        if (asideDefaultItemElement == null &&
+                        if ($asideDefaultItemElement == null &&
                             this.asideULElement.children.length) {
                             /* 默认第一个 */
-                            asideDefaultItemElement = this.asideULElement
+                            $asideDefaultItemElement = this.asideULElement
                                 .children[0];
                         }
-                        if (asideDefaultItemElement) {
+                        if ($asideDefaultItemElement) {
                             /* 点击选择的那一项 */
-                            asideDefaultItemElement.click();
+                            $asideDefaultItemElement.click();
                             if (isScrollToDefaultView) {
-                                asideDefaultItemElement?.scrollIntoView();
+                                $asideDefaultItemElement?.scrollIntoView();
                             }
                         }
                         else {
@@ -7375,13 +7393,13 @@ System.register('pops', [], (function (exports) {
                      * @param element
                      * @param attributes
                      */
-                    addElementAttributes(element, attributes) {
+                    setElementAttributes(element, attributes) {
                         if (attributes == null) {
                             return;
                         }
                         if (Array.isArray(attributes)) {
                             attributes.forEach((attrObject) => {
-                                this.addElementAttributes(element, attrObject);
+                                this.setElementAttributes(element, attrObject);
                             });
                         }
                         else {
@@ -7400,34 +7418,58 @@ System.register('pops', [], (function (exports) {
                             return;
                         }
                         Object.keys(props).forEach((propName) => {
-                            element[propName] = props[propName];
+                            Reflect.set(element, propName, props[propName]);
                         });
                     },
                     /**
-                     * 获取左侧容器元素<li>
+                     * 为元素设置classname
+                     * @param element
+                     * @param className
+                     */
+                    setElementClassName(element, className) {
+                        if (className == null) {
+                            return;
+                        }
+                        if (typeof className === "function") {
+                            className = className();
+                        }
+                        if (typeof className === "string") {
+                            let splitClassName = className.split(" ");
+                            splitClassName.forEach((classNameStr) => {
+                                element.classList.add(classNameStr);
+                            });
+                        }
+                        else if (Array.isArray(className)) {
+                            className.forEach((classNameStr) => {
+                                this.setElementClassName(element, classNameStr);
+                            });
+                        }
+                    },
+                    /**
+                     * 创建左侧容器元素<li>
                      * @param  asideConfig
                      */
-                    getAsideItem(asideConfig) {
+                    createAsideItem(asideConfig) {
                         let liElement = document.createElement("li");
                         liElement.id = asideConfig.id;
                         liElement["__forms__"] = asideConfig.forms;
                         liElement.innerHTML = asideConfig.title;
-                        this.addElementAttributes(liElement, asideConfig.attributes);
+                        /* 处理className */
+                        this.setElementClassName(liElement, asideConfig.className);
+                        this.setElementAttributes(liElement, asideConfig.attributes);
                         this.setElementProps(liElement, asideConfig.props);
                         return liElement;
                     },
                     /**
-                     * 获取中间容器的元素<li>
+                     * 创建中间容器的元素<li>
                      * type ==> switch
                      * @param formConfig
                      */
-                    getSectionContainerItem_switch(formConfig) {
+                    createSectionContainerItem_switch(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -7524,13 +7566,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> slider
                      * @param formConfig
                      */
-                    getSectionContainerItem_slider(formConfig) {
+                    createSectionContainerItem_slider(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -7590,13 +7630,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> slider
                      * @param formConfig
                      */
-                    getSectionContainerItem_slider_new(formConfig) {
+                    createSectionContainerItem_slider_new(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -8147,13 +8185,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> input
                      * @param formConfig
                      */
-                    getSectionContainerItem_input(formConfig) {
+                    createSectionContainerItem_input(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         let inputType = "text";
                         if (formConfig.isPassword) {
@@ -8351,13 +8387,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> textarea
                      * @param formConfig
                      */
-                    getSectionContainerItem_textarea(formConfig) {
+                    createSectionContainerItem_textarea(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -8426,13 +8460,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> select
                      * @param formConfig
                      */
-                    getSectionContainerItem_select(formConfig) {
+                    createSectionContainerItem_select(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -8579,13 +8611,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> select-multiple
                      * @param formConfig
                      */
-                    getSectionContainerItem_select_multiple_new(formConfig) {
+                    createSectionContainerItem_select_multiple_new(formConfig) {
                         let liElement = document.createElement("li");
                         Reflect.set(liElement, "__formConfig__", formConfig);
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -9109,13 +9139,11 @@ System.register('pops', [], (function (exports) {
                      * type ==> button
                      * @param formConfig
                      */
-                    getSectionContainerItem_button(formConfig) {
+                    createSectionContainerItem_button(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.className = formConfig.className;
-                        }
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementClassName(liElement, formConfig.className);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
@@ -9260,16 +9288,14 @@ System.register('pops', [], (function (exports) {
                      * 获取深层容器的元素<li>
                      * @param formConfig
                      */
-                    getSectionContainerItem_deepMenu(formConfig) {
+                    createSectionContainerItem_deepMenu(formConfig) {
                         let that = this;
                         let liElement = document.createElement("li");
                         liElement.classList.add("pops-panel-deepMenu-nav-item");
                         liElement["__formConfig__"] = formConfig;
-                        if (formConfig.className) {
-                            liElement.classList.add(formConfig.className);
-                        }
+                        this.setElementClassName(liElement, formConfig.className);
                         // 设置属性
-                        this.addElementAttributes(liElement, formConfig.attributes);
+                        this.setElementAttributes(liElement, formConfig.attributes);
                         // 设置元素上的属性
                         this.setElementProps(liElement, formConfig.props);
                         /* 左边底部的描述的文字 */
@@ -9331,10 +9357,8 @@ System.register('pops', [], (function (exports) {
                                     formHeaderDivElement.innerHTML = formItemConfig["text"];
                                     /* 加进容器内 */
                                     formContainerListElement.appendChild(formHeaderDivElement);
-                                    if (formItemConfig.className) {
-                                        popsDOMUtils.addClassName(formContainerListElement, formItemConfig.className);
-                                    }
-                                    that.addElementAttributes(formContainerListElement, formItemConfig.attributes);
+                                    that.setElementClassName(formContainerListElement, formItemConfig.className);
+                                    that.setElementAttributes(formContainerListElement, formItemConfig.attributes);
                                     that.setElementProps(formContainerListElement, formItemConfig.props);
                                     childForms.forEach((childFormConfig) => {
                                         that.uListContainerAddItem(childFormConfig, {
@@ -9433,7 +9457,7 @@ System.register('pops', [], (function (exports) {
                      * type ===> own
                      * @param formConfig
                      */
-                    getSectionContainerItem_own(formConfig) {
+                    createSectionContainerItem_own(formConfig) {
                         let liElement = document.createElement("li");
                         liElement["__formConfig__"] = formConfig;
                         if (formConfig.className) {
@@ -9446,35 +9470,35 @@ System.register('pops', [], (function (exports) {
                      * 获取中间容器的元素<li>
                      * @param formConfig
                      */
-                    getSectionContainerItem(formConfig) {
+                    createSectionContainerItem(formConfig) {
                         /** 配置项的类型 */
                         let formType = formConfig["type"];
                         if (formType === "switch") {
-                            return this.getSectionContainerItem_switch(formConfig);
+                            return this.createSectionContainerItem_switch(formConfig);
                         }
                         else if (formType === "slider") {
-                            return this.getSectionContainerItem_slider_new(formConfig);
+                            return this.createSectionContainerItem_slider_new(formConfig);
                         }
                         else if (formType === "input") {
-                            return this.getSectionContainerItem_input(formConfig);
+                            return this.createSectionContainerItem_input(formConfig);
                         }
                         else if (formType === "textarea") {
-                            return this.getSectionContainerItem_textarea(formConfig);
+                            return this.createSectionContainerItem_textarea(formConfig);
                         }
                         else if (formType === "select") {
-                            return this.getSectionContainerItem_select(formConfig);
+                            return this.createSectionContainerItem_select(formConfig);
                         }
                         else if (formType === "select-multiple") {
-                            return this.getSectionContainerItem_select_multiple_new(formConfig);
+                            return this.createSectionContainerItem_select_multiple_new(formConfig);
                         }
                         else if (formType === "button") {
-                            return this.getSectionContainerItem_button(formConfig);
+                            return this.createSectionContainerItem_button(formConfig);
                         }
                         else if (formType === "deepMenu") {
-                            return this.getSectionContainerItem_deepMenu(formConfig);
+                            return this.createSectionContainerItem_deepMenu(formConfig);
                         }
                         else if (formType === "own") {
-                            return this.getSectionContainerItem_own(formConfig);
+                            return this.createSectionContainerItem_own(formConfig);
                         }
                         else {
                             console.error("尚未实现的type类型", formConfig);
@@ -9501,10 +9525,8 @@ System.register('pops', [], (function (exports) {
                             formHeaderDivElement.innerHTML = __formConfig_forms["text"];
                             /* 加进容器内 */
                             formContainerListElement.appendChild(formHeaderDivElement);
-                            if (__formConfig_forms.className) {
-                                popsDOMUtils.addClassName(formContainerListElement, __formConfig_forms.className);
-                            }
-                            that.addElementAttributes(formContainerListElement, formConfig.attributes);
+                            that.setElementClassName(formContainerListElement, formConfig.className);
+                            that.setElementAttributes(formContainerListElement, formConfig.attributes);
                             that.setElementProps(formContainerListElement, formConfig.props);
                             childForms.forEach((childFormConfig) => {
                                 that.uListContainerAddItem(childFormConfig, {
@@ -9530,7 +9552,7 @@ System.register('pops', [], (function (exports) {
                      * @param containerOptions
                      */
                     uListContainerAddItem(formConfig, containerOptions) {
-                        let itemLiElement = this.getSectionContainerItem(formConfig);
+                        let itemLiElement = this.createSectionContainerItem(formConfig);
                         if (itemLiElement) {
                             containerOptions["ulElement"].appendChild(itemLiElement);
                         }