@whitesev/pops 1.6.4 → 1.6.6

package/dist/index.umd.js

@@ -7286,11 +7286,21 @@
              * 右侧主内容的ul容器
              */
             sectionContainerULElement: null,
+            /**
+             * 元素
+             */
             $el: {
+                /** 内容 */
                 $content: null,
+                /** 左侧容器 */
                 $contentAside: null,
+                /** 右侧容器 */
                 $contentSectionContainer: null,
             },
+            /**
+             * 初始化
+             * @param details
+             */
             init(details) {
                 // @ts-ignore
                 this.$el = null;
@@ -7304,40 +7314,48 @@
                 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 {
@@ -7376,13 +7394,13 @@
              * @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 {
@@ -7401,34 +7419,58 @@
                     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 = "";
@@ -7525,13 +7567,11 @@
              * 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 = "";
@@ -7591,13 +7631,11 @@
              * 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 = "";
@@ -8148,13 +8186,11 @@
              * 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) {
@@ -8352,13 +8388,11 @@
              * 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 = "";
@@ -8427,13 +8461,11 @@
              * 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 = "";
@@ -8580,13 +8612,11 @@
              * 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 = "";
@@ -9110,13 +9140,11 @@
              * 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 = "";
@@ -9261,16 +9289,14 @@
              * 获取深层容器的元素<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);
                 /* 左边底部的描述的文字 */
@@ -9332,10 +9358,8 @@
                             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, {
@@ -9434,7 +9458,7 @@
              * type ===> own
              * @param formConfig
              */
-            getSectionContainerItem_own(formConfig) {
+            createSectionContainerItem_own(formConfig) {
                 let liElement = document.createElement("li");
                 liElement["__formConfig__"] = formConfig;
                 if (formConfig.className) {
@@ -9447,35 +9471,35 @@
              * 获取中间容器的元素<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);
@@ -9502,10 +9526,8 @@
                     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, {
@@ -9531,7 +9553,7 @@
              * @param containerOptions
              */
             uListContainerAddItem(formConfig, containerOptions) {
-                let itemLiElement = this.getSectionContainerItem(formConfig);
+                let itemLiElement = this.createSectionContainerItem(formConfig);
                 if (itemLiElement) {
                     containerOptions["ulElement"].appendChild(itemLiElement);
                 }