vxe-pc-ui 4.20.25 → 4.20.26

package/es/tabs/src/tabs.js

@@ -1,6 +1,6 @@
 import { ref, h, reactive, inject, provide, computed, onUnmounted, watch, nextTick, onMounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
-import { VxeUI, useFns } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getSlotVNs } from "../../ui/src/vn";
 import { toCssUnit, addClass, removeClass } from "../../ui/src/dom";
 import { isEnableConf } from "../../ui/src/utils";
@@ -8,7 +8,7 @@ import { createComponentLog } from "../../ui/src/log";
 import XEUtils from "xe-utils";
 import VxeLoadingComponent from "../../loading";
 import VxeScrollbarComponent from "../../scrollbar";
-const { baseUtils, createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } = VxeUI;
+const { baseUtils, useFns, createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } = VxeUI;
 const { getDefVal } = baseUtils;
 const { warnLog, errLog } = createComponentLog("tabs");
 const scrollbarOffsetSize = 20;
@@ -58,16 +58,7 @@ var tabs_default = defineVxeComponent({
     // 已废弃
     beforeCloseMethod: Function
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "tab-change",
-    "tab-change-fail",
-    "tab-close",
-    "tab-close-fail",
-    "tab-click",
-    "tab-load"
-  ],
+  emits: ["update:modelValue", "change", "tab-change", "tab-change-fail", "tab-close", "tab-close-fail", "tab-click", "tab-load"],
   setup(props, context) {
     const { slots, emit } = context;
     const xID = XEUtils.uniqueId();
@@ -356,9 +347,7 @@ var tabs_default = defineVxeComponent({
         return;
       }
       if (name !== activeName) {
-        Promise.resolve(
-          !beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })
-        ).then((status) => {
+        Promise.resolve(!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })).then((status) => {
           if (status) {
             reactData.activeName = name;
             emitModel(value);
@@ -386,9 +375,7 @@ var tabs_default = defineVxeComponent({
             return;
           }
           cacheItem.loading = true;
-          Promise.resolve(
-            queryMethod({ $tabs: $xeTabs, value: activeName, name, option: item })
-          ).finally(() => {
+          Promise.resolve(queryMethod({ $tabs: $xeTabs, value: activeName, name, option: item })).finally(() => {
             cacheItem.loading = false;
           });
         } else {
@@ -408,9 +395,7 @@ var tabs_default = defineVxeComponent({
         const nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1];
         nextName = nextItem ? nextItem.name : null;
       }
-      Promise.resolve(
-        !beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })
-      ).then((status) => {
+      Promise.resolve(!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })).then((status) => {
         if (status) {
           dispatchEvent("tab-close", { value, name, nextName }, evnt);
         } else {
@@ -588,132 +573,208 @@ var tabs_default = defineVxeComponent({
       const closeVisibleMethod = closeOpts.visibleMethod;
       const refreshOpts = computeRefreshOpts.value;
       const refreshVisibleMethod = refreshOpts.visibleMethod;
-      return h("div", {
-        key: "th",
-        class: ["vxe-tabs-header", `type--${tabType}`, `pos--${tabPosition}`]
-      }, [
-        tabPrefixSlot ? h("div", {
-          class: ["vxe-tabs-header--prefix", `type--${tabType}`, `pos--${tabPosition}`]
-        }, callSlot(tabPrefixSlot, { name: activeName })) : renderEmptyElement($xeTabs),
-        isTabOver ? h("div", {
-          ref: refHeadPrevElem,
-          class: ["vxe-tabs-header--bar vxe-tabs-header--prev-bar", `type--${tabType}`, `pos--${tabPosition}`],
-          onClick: scrollLeftEvent
-        }, [
-          h("span", {
-            class: lrPosition ? getIcon().TABS_TAB_BUTTON_TOP : getIcon().TABS_TAB_BUTTON_LEFT
-          })
-        ]) : renderEmptyElement($xeTabs),
-        h("div", {
-          class: ["vxe-tabs-header--wrapper", `type--${tabType}`, `pos--${tabPosition}`]
-        }, [
-          h("div", {
-            ref: refHeadWrapperElem,
-            class: "vxe-tabs-header--item-wrapper",
-            style: lrPosition ? {
-              marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
-              paddingRight: `${scrollbarOffsetSize}px`
-            } : {
-              marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
-              paddingBottom: `${scrollbarOffsetSize}px`
+      return h(
+        "div",
+        {
+          key: "th",
+          class: ["vxe-tabs-header", `type--${tabType}`, `pos--${tabPosition}`]
+        },
+        [
+          tabPrefixSlot ? h(
+            "div",
+            {
+              class: ["vxe-tabs-header--prefix", `type--${tabType}`, `pos--${tabPosition}`]
             },
-            onScroll: checkScrolling
-          }, tabList.map((item, index) => {
-            const { title, titleWidth, titleAlign, icon, name } = item;
-            const itemSlots = item.slots || {};
-            const titleSlot = itemSlots.title || itemSlots.tab;
-            const titlePrefixSlot = itemSlots.titlePrefix || itemSlots["title-prefix"];
-            const titleSuffixSlot = itemSlots.titleSuffix || itemSlots["title-suffix"];
-            const itemWidth = titleWidth || allTitleWidth;
-            const itemAlign = titleAlign || allTitleAlign;
-            const params = { $tabs: $xeTabs, value: activeName, name, option: item };
-            const isActive = activeName === name;
-            const cacheItem = name ? cacheTabMaps[`${name}`] : null;
-            const isLoading = cacheItem ? cacheItem.loading : false;
-            return h("div", {
-              key: `${name}`,
-              class: ["vxe-tabs-header--item", `type--${tabType}`, `pos--${tabPosition}`, itemAlign ? `align--${itemAlign}` : "", {
-                "is--active": isActive
-              }],
-              style: itemWidth ? {
-                width: toCssUnit(itemWidth)
-              } : void 0,
-              onClick(evnt) {
-                clickEvent(evnt, item);
-              }
-            }, [
-              h("div", {
-                class: "vxe-tabs-header--item-inner"
-              }, [
-                h("div", {
-                  class: "vxe-tabs-header--item-content"
-                }, [
-                  icon ? h("span", {
-                    class: "vxe-tabs-header--item-icon"
-                  }, [
-                    h("i", {
-                      class: icon
-                    })
-                  ]) : renderEmptyElement($xeTabs),
-                  titlePrefixSlot ? h("span", {
-                    class: "vxe-tabs-header--item-prefix"
-                  }, callSlot(titlePrefixSlot, { name, title })) : renderEmptyElement($xeTabs),
+            callSlot(tabPrefixSlot, { name: activeName })
+          ) : renderEmptyElement($xeTabs),
+          isTabOver ? h(
+            "div",
+            {
+              ref: refHeadPrevElem,
+              class: ["vxe-tabs-header--bar vxe-tabs-header--prev-bar", `type--${tabType}`, `pos--${tabPosition}`],
+              onClick: scrollLeftEvent
+            },
+            [
+              h("span", {
+                class: lrPosition ? getIcon().TABS_TAB_BUTTON_TOP : getIcon().TABS_TAB_BUTTON_LEFT
+              })
+            ]
+          ) : renderEmptyElement($xeTabs),
+          h(
+            "div",
+            {
+              class: ["vxe-tabs-header--wrapper", `type--${tabType}`, `pos--${tabPosition}`]
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: refHeadWrapperElem,
+                  class: "vxe-tabs-header--item-wrapper",
+                  style: lrPosition ? {
+                    marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
+                    paddingRight: `${scrollbarOffsetSize}px`
+                  } : {
+                    marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
+                    paddingBottom: `${scrollbarOffsetSize}px`
+                  },
+                  onScroll: checkScrolling
+                },
+                tabList.map((item, index) => {
+                  const { title, titleWidth, titleAlign, icon, name } = item;
+                  const itemSlots = item.slots || {};
+                  const titleSlot = itemSlots.title || itemSlots.tab;
+                  const titlePrefixSlot = itemSlots.titlePrefix || itemSlots["title-prefix"];
+                  const titleSuffixSlot = itemSlots.titleSuffix || itemSlots["title-suffix"];
+                  const itemWidth = titleWidth || allTitleWidth;
+                  const itemAlign = titleAlign || allTitleAlign;
+                  const params = { $tabs: $xeTabs, value: activeName, name, option: item };
+                  const isActive = activeName === name;
+                  const cacheItem = name ? cacheTabMaps[`${name}`] : null;
+                  const isLoading = cacheItem ? cacheItem.loading : false;
+                  return h(
+                    "div",
+                    {
+                      key: `${name}`,
+                      class: [
+                        "vxe-tabs-header--item",
+                        `type--${tabType}`,
+                        `pos--${tabPosition}`,
+                        itemAlign ? `align--${itemAlign}` : "",
+                        {
+                          "is--active": isActive
+                        }
+                      ],
+                      style: itemWidth ? {
+                        width: toCssUnit(itemWidth)
+                      } : void 0,
+                      onClick(evnt) {
+                        clickEvent(evnt, item);
+                      }
+                    },
+                    [
+                      h(
+                        "div",
+                        {
+                          class: "vxe-tabs-header--item-inner"
+                        },
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-tabs-header--item-content"
+                            },
+                            [
+                              icon ? h(
+                                "span",
+                                {
+                                  class: "vxe-tabs-header--item-icon"
+                                },
+                                [
+                                  h("i", {
+                                    class: icon
+                                  })
+                                ]
+                              ) : renderEmptyElement($xeTabs),
+                              titlePrefixSlot ? h(
+                                "span",
+                                {
+                                  class: "vxe-tabs-header--item-prefix"
+                                },
+                                callSlot(titlePrefixSlot, { name, title })
+                              ) : renderEmptyElement($xeTabs),
+                              h(
+                                "span",
+                                {
+                                  class: "vxe-tabs-header--item-name"
+                                },
+                                titleSlot ? callSlot(titleSlot, { name, title }) : `${title}`
+                              ),
+                              titleSuffixSlot ? h(
+                                "span",
+                                {
+                                  class: "vxe-tabs-header--item-suffix"
+                                },
+                                callSlot(titleSuffixSlot, { name, title })
+                              ) : renderEmptyElement($xeTabs)
+                            ]
+                          ),
+                          (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? h(
+                            "div",
+                            {
+                              class: [
+                                "vxe-tabs-header--refresh-btn",
+                                {
+                                  "is--active": isActive,
+                                  "is--loading": isLoading,
+                                  "is--disabled": isLoading
+                                }
+                              ],
+                              onClick(evnt) {
+                                handleRefreshTabEvent(evnt, item);
+                              }
+                            },
+                            [
+                              h("i", {
+                                class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
+                              })
+                            ]
+                          ) : renderEmptyElement($xeTabs),
+                          (showClose || isEnableConf(closeConfig) || closeOpts.enabled) && (!closeVisibleMethod || closeVisibleMethod(params)) ? h(
+                            "div",
+                            {
+                              class: [
+                                "vxe-tabs-header--close-btn",
+                                {
+                                  "is--active": isActive
+                                }
+                              ],
+                              onClick(evnt) {
+                                handleCloseTabEvent(evnt, item, index, tabList);
+                              }
+                            },
+                            [
+                              h("i", {
+                                class: getIcon().TABS_TAB_CLOSE
+                              })
+                            ]
+                          ) : renderEmptyElement($xeTabs)
+                        ]
+                      )
+                    ]
+                  );
+                }).concat([
                   h("span", {
-                    class: "vxe-tabs-header--item-name"
-                  }, titleSlot ? callSlot(titleSlot, { name, title }) : `${title}`),
-                  titleSuffixSlot ? h("span", {
-                    class: "vxe-tabs-header--item-suffix"
-                  }, callSlot(titleSuffixSlot, { name, title })) : renderEmptyElement($xeTabs)
-                ]),
-                (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? h("div", {
-                  class: ["vxe-tabs-header--refresh-btn", {
-                    "is--active": isActive,
-                    "is--loading": isLoading,
-                    "is--disabled": isLoading
-                  }],
-                  onClick(evnt) {
-                    handleRefreshTabEvent(evnt, item);
-                  }
-                }, [
-                  h("i", {
-                    class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
-                  })
-                ]) : renderEmptyElement($xeTabs),
-                (showClose || (isEnableConf(closeConfig) || closeOpts.enabled)) && (!closeVisibleMethod || closeVisibleMethod(params)) ? h("div", {
-                  class: ["vxe-tabs-header--close-btn", {
-                    "is--active": isActive
-                  }],
-                  onClick(evnt) {
-                    handleCloseTabEvent(evnt, item, index, tabList);
-                  }
-                }, [
-                  h("i", {
-                    class: getIcon().TABS_TAB_CLOSE
+                    key: "line",
+                    class: ["vxe-tabs-header--active-line", `type--${tabType}`, `pos--${tabPosition}`],
+                    style: lineStyle
                   })
-                ]) : renderEmptyElement($xeTabs)
-              ])
-            ]);
-          }).concat([
-            h("span", {
-              key: "line",
-              class: ["vxe-tabs-header--active-line", `type--${tabType}`, `pos--${tabPosition}`],
-              style: lineStyle
-            })
-          ]))
-        ]),
-        isTabOver ? h("div", {
-          ref: refHeadNextElem,
-          class: ["vxe-tabs-header--bar vxe-tabs-header--next-bar", `type--${tabType}`, `pos--${tabPosition}`],
-          onClick: scrollRightEvent
-        }, [
-          h("span", {
-            class: lrPosition ? getIcon().TABS_TAB_BUTTON_BOTTOM : getIcon().TABS_TAB_BUTTON_RIGHT
-          })
-        ]) : renderEmptyElement($xeTabs),
-        tabSuffixSlot ? h("div", {
-          class: ["vxe-tabs-header--suffix", `type--${tabType}`, `pos--${tabPosition}`]
-        }, callSlot(tabSuffixSlot, { name: activeName })) : renderEmptyElement($xeTabs)
-      ]);
+                ])
+              )
+            ]
+          ),
+          isTabOver ? h(
+            "div",
+            {
+              ref: refHeadNextElem,
+              class: ["vxe-tabs-header--bar vxe-tabs-header--next-bar", `type--${tabType}`, `pos--${tabPosition}`],
+              onClick: scrollRightEvent
+            },
+            [
+              h("span", {
+                class: lrPosition ? getIcon().TABS_TAB_BUTTON_BOTTOM : getIcon().TABS_TAB_BUTTON_RIGHT
+              })
+            ]
+          ) : renderEmptyElement($xeTabs),
+          tabSuffixSlot ? h(
+            "div",
+            {
+              class: ["vxe-tabs-header--suffix", `type--${tabType}`, `pos--${tabPosition}`]
+            },
+            callSlot(tabSuffixSlot, { name: activeName })
+          ) : renderEmptyElement($xeTabs)
+        ]
+      );
     };
     const renderTabPane = (item) => {
       const { initNames, activeName } = reactData;
@@ -722,20 +783,34 @@ var tabs_default = defineVxeComponent({
       const scrollbarProps = computeScrollbarProps.value;
       const isVScrollbar = computeIsVScrollbar.value;
       if (name && initNames.includes(name)) {
-        return isVScrollbar ? h(VxeScrollbarComponent, {
-          key: `${name}`,
-          class: ["vxe-tabs-pane--scrollbar-item", {
-            "is--visible": activeName === name
-          }],
-          ...scrollbarProps
-        }, {
-          default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
-        }) : h("div", {
-          key: `${name}`,
-          class: ["vxe-tabs-pane--item", {
-            "is--visible": activeName === name
-          }]
-        }, defaultSlot ? callSlot(defaultSlot, { name }) : []);
+        return isVScrollbar ? h(
+          VxeScrollbarComponent,
+          {
+            key: `${name}`,
+            class: [
+              "vxe-tabs-pane--scrollbar-item",
+              {
+                "is--visible": activeName === name
+              }
+            ],
+            ...scrollbarProps
+          },
+          {
+            default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
+          }
+        ) : h(
+          "div",
+          {
+            key: `${name}`,
+            class: [
+              "vxe-tabs-pane--item",
+              {
+                "is--visible": activeName === name
+              }
+            ]
+          },
+          defaultSlot ? callSlot(defaultSlot, { name }) : []
+        );
       }
       return renderEmptyElement($xeTabs);
     };
@@ -764,30 +839,56 @@ var tabs_default = defineVxeComponent({
       const cacheItem = activeName ? cacheTabMaps[`${activeName}`] : null;
       const isLoading = cacheItem ? cacheItem.loading : false;
       const defParams = { name: activeName };
-      return h("div", {
-        key: "tb",
-        class: ["vxe-tabs-pane--wrapper", `type--${tabType}`, `pos--${tabPosition}`, {
-          "is--content": showBody
-        }]
-      }, [
-        headerpSlot ? h("div", {
-          class: "vxe-tabs-pane--header"
-        }, callSlot(headerpSlot, defParams)) : renderEmptyElement($xeTabs),
-        h("div", {
-          class: ["vxe-tabs-pane--body", `type--${tabType}`, `pos--${tabPosition}`, {
-            [`size--${vSize}`]: vSize,
-            "is--padding": padding,
-            "is--height": height
-          }]
-        }, renderTabContent(tabList)),
-        footerSlot ? h("div", {
-          class: "vxe-tabs-pane--footer"
-        }, callSlot(footerSlot, defParams)) : renderEmptyElement($xeTabs),
-        showLoading && isLoading ? renderEmptyElement($xeTabs) : h(VxeLoadingComponent, {
-          class: "vxe-tabs--loading",
-          modelValue: isLoading
-        })
-      ]);
+      return h(
+        "div",
+        {
+          key: "tb",
+          class: [
+            "vxe-tabs-pane--wrapper",
+            `type--${tabType}`,
+            `pos--${tabPosition}`,
+            {
+              "is--content": showBody
+            }
+          ]
+        },
+        [
+          headerpSlot ? h(
+            "div",
+            {
+              class: "vxe-tabs-pane--header"
+            },
+            callSlot(headerpSlot, defParams)
+          ) : renderEmptyElement($xeTabs),
+          h(
+            "div",
+            {
+              class: [
+                "vxe-tabs-pane--body",
+                `type--${tabType}`,
+                `pos--${tabPosition}`,
+                {
+                  [`size--${vSize}`]: vSize,
+                  "is--padding": padding,
+                  "is--height": height
+                }
+              ]
+            },
+            renderTabContent(tabList)
+          ),
+          footerSlot ? h(
+            "div",
+            {
+              class: "vxe-tabs-pane--footer"
+            },
+            callSlot(footerSlot, defParams)
+          ) : renderEmptyElement($xeTabs),
+          showLoading && isLoading ? renderEmptyElement($xeTabs) : h(VxeLoadingComponent, {
+            class: "vxe-tabs--loading",
+            modelValue: isLoading
+          })
+        ]
+      );
     };
     const renderVN = () => {
       const { height, padding, trigger } = props;
@@ -801,60 +902,89 @@ var tabs_default = defineVxeComponent({
       const defaultSlot = slots.default;
       const tabList = defaultSlot ? tabStaticOptions : tabOptions;
       const vns = [
-        h("div", {
-          key: "ts",
-          class: "vxe-tabs-slots"
-        }, defaultSlot ? defaultSlot({ name: activeName }) : [])
+        h(
+          "div",
+          {
+            key: "ts",
+            class: "vxe-tabs-slots"
+          },
+          defaultSlot ? defaultSlot({ name: activeName }) : []
+        )
       ];
       if (tabPosition === "right" || tabPosition === "bottom") {
-        vns.push(
-          rendetTabBody(tabList),
-          renderTabHeader(tabList)
-        );
+        vns.push(rendetTabBody(tabList), renderTabHeader(tabList));
       } else {
-        vns.push(
-          renderTabHeader(tabList),
-          rendetTabBody(tabList)
-        );
+        vns.push(renderTabHeader(tabList), rendetTabBody(tabList));
       }
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-tabs", `pos--${tabPosition}`, `vxe-tabs--${tabType}`, `trigger--${trigger === "manual" ? "trigger" : "default"}`, {
-          [`size--${vSize}`]: vSize,
-          "is--padding": padding,
-          "is--height": height
-        }],
-        style: wrapperStyle
-      }, vns);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-tabs",
+            `pos--${tabPosition}`,
+            `vxe-tabs--${tabType}`,
+            `trigger--${trigger === "manual" ? "trigger" : "default"}`,
+            {
+              [`size--${vSize}`]: vSize,
+              "is--padding": padding,
+              "is--height": height
+            }
+          ],
+          style: wrapperStyle
+        },
+        vns
+      );
     };
-    watch(() => props.position, () => {
-      reactData.resizeFlag++;
-    });
-    watch(() => props.modelValue, (val) => {
-      addInitName(val, null);
-      reactData.activeName = val;
-    });
-    watch(() => reactData.activeName, (val) => {
-      scrollToTab(val);
-    });
+    watch(
+      () => props.position,
+      () => {
+        reactData.resizeFlag++;
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (val) => {
+        addInitName(val, null);
+        reactData.activeName = val;
+      }
+    );
+    watch(
+      () => reactData.activeName,
+      (val) => {
+        scrollToTab(val);
+      }
+    );
     const optsFlag = ref(0);
-    watch(() => props.options ? props.options.length : -1, () => {
-      optsFlag.value++;
-    });
-    watch(() => props.options, () => {
-      optsFlag.value++;
-    });
+    watch(
+      () => props.options ? props.options.length : -1,
+      () => {
+        optsFlag.value++;
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        optsFlag.value++;
+      }
+    );
     watch(optsFlag, () => {
       initDefaultName(props.options);
       reactData.resizeFlag++;
     });
     const stFlag = ref(0);
-    watch(() => reactData.staticTabs ? reactData.staticTabs.length : -1, () => {
-      stFlag.value++;
-    });
-    watch(() => reactData.staticTabs, () => {
-      stFlag.value++;
-    });
+    watch(
+      () => reactData.staticTabs ? reactData.staticTabs.length : -1,
+      () => {
+        stFlag.value++;
+      }
+    );
+    watch(
+      () => reactData.staticTabs,
+      () => {
+        stFlag.value++;
+      }
+    );
     watch(stFlag, () => {
       initDefaultName(reactData.staticTabs);
       reactData.resizeFlag++;
@@ -862,11 +992,14 @@ var tabs_default = defineVxeComponent({
     watch(computeParentTabsResizeFlag, () => {
       reactData.resizeFlag++;
     });
-    watch(() => reactData.resizeFlag, () => {
-      nextTick(() => {
-        updateTabStyle();
-      });
-    });
+    watch(
+      () => reactData.resizeFlag,
+      () => {
+        nextTick(() => {
+          updateTabStyle();
+        });
+      }
+    );
     onMounted(() => {
       updateTabStyle();
       globalEvents.on($xeTabs, "resize", updateTabStyle);