@web-utils/component 2.7.30 → 2.7.31

package/dist/components/static-pageable-table/index.js

@@ -1,24 +1,26 @@
 import { chunk } from "lodash";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "static-pageable-table"
   }, [_c("ElTable", _vm._g(_vm._b({
     attrs: {
-      size: "mini",
-      data: _vm.records
+      "size": "mini",
+      "data": _vm.records
     }
-  }, "ElTable", _vm.$attrs, !1), _vm.$listeners), [_vm._t("default", function() {
+  }, "ElTable", _vm.$attrs, false), _vm.$listeners), [_vm._t("default", function() {
     return [_vm._v("请添加表格列")];
   })], 2), _c("ElPagination", {
     attrs: {
       "current-page": _vm.page.page,
-      "hide-on-single-page": !0,
+      "hide-on-single-page": true,
       "page-size": _vm.page.limit,
-      total: _vm.page.total,
-      background: "",
-      layout: "total, prev, pager, next"
+      "total": _vm.page.total,
+      "background": "",
+      "layout": "total, prev, pager, next"
     },
     on: {
       "current-change": function(curPage) {
@@ -26,7 +28,9 @@ var render = function() {
       }
     }
   })], 1);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const StaticPageableTable_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "StaticPageableTable",
   props: {
@@ -58,9 +62,10 @@ const __vue2_script = {
       this.page.page = 1;
     },
     observer: {
-      immediate: !0,
+      immediate: true,
       handler() {
-        this.page.total = this.rows.length, this.fetchData();
+        this.page.total = this.rows.length;
+        this.fetchData();
       }
     }
   },
@@ -69,20 +74,22 @@ const __vue2_script = {
       this.records = chunk(this.rows, this.page.limit)[this.page.page - 1];
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const StaticPageableTable = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/static-pageable-table/style.css

@@ -1 +1,9 @@
-.static-pageable-table{flex:1 1 auto}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.static-pageable-table {
+  flex: 1 1 auto;
+}

package/dist/components/swiper/index.js

@@ -1,40 +1,48 @@
-var __async = (__this, __arguments, generator) => new Promise((resolve, reject) => {
-  var fulfilled = (value) => {
-    try {
-      step(generator.next(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, rejected = (value) => {
-    try {
-      step(generator.throw(value));
-    } catch (e) {
-      reject(e);
-    }
-  }, step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-  step((generator = generator.apply(__this, __arguments)).next());
-});
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { getEleWidth } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "egd-swiper"
   }, [_c("ElButton", {
     staticClass: "el-carousel__arrow el-carousel__arrow--left",
     attrs: {
-      disabled: _vm.reachedLeft,
-      icon: "el-icon-arrow-left"
+      "disabled": _vm.reachedLeft,
+      "icon": "el-icon-arrow-left"
     },
     on: {
-      click: _vm.clickLeft
+      "click": _vm.clickLeft
     }
   }), _c("div", {
     ref: "swiperBox",
     staticClass: "egd-swiper-box",
     on: {
-      wheel: function($event) {
-        return $event.stopPropagation(), $event.preventDefault(), _vm.onMouseWheel.apply(null, arguments);
+      "wheel": function($event) {
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.onMouseWheel.apply(null, arguments);
       }
     }
   }, [_c("div", {
@@ -44,28 +52,30 @@ var render = function() {
   }, [_vm._t("default")], 2)]), _c("ElButton", {
     staticClass: "el-carousel__arrow el-carousel__arrow--right",
     attrs: {
-      disabled: _vm.reachedRight,
-      icon: "el-icon-arrow-right"
+      "disabled": _vm.reachedRight,
+      "icon": "el-icon-arrow-right"
     },
     on: {
-      click: _vm.clickRight
+      "click": _vm.clickRight
     }
   }), _c("ResizeObserver", {
     on: {
-      notify: _vm.resize
+      "notify": _vm.resize
     }
   })], 1);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const Swiper_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "Swiper",
   data() {
     return {
-      mouseDown: !1,
+      mouseDown: false,
       swiperBoxWith: 0,
       swiperContentWidth: 0,
       translateX: 0,
-      reachedLeft: !0,
-      reachedRight: !1,
+      reachedLeft: true,
+      reachedRight: false,
       childrenWidth: [],
       swiperContentStyle: {
         transitionDuration: "0ms",
@@ -84,56 +94,107 @@ const __vue2_script = {
   methods: {
     layout() {
       return __async(this, null, function* () {
-        yield this.$nextTick(), this.computeContentWidth(), this.resize();
+        yield this.$nextTick();
+        this.computeContentWidth();
+        this.resize();
       });
     },
     resize() {
-      console.log(1), this.swiperBoxWith = this.$refs.swiperBox.offsetWidth;
+      console.log(1);
+      this.swiperBoxWith = this.$refs.swiperBox.offsetWidth;
     },
     computeContentWidth() {
       let width = 0;
-      const childrenWidth = [], { children } = this.$refs.swiperContent;
+      const childrenWidth = [];
+      const { children } = this.$refs.swiperContent;
       Array.prototype.forEach.call(children, (el) => {
         const cw = getEleWidth(el);
-        width += cw, childrenWidth.push(cw);
-      }), this.childrenWidth = childrenWidth, this.swiperContentWidth = width;
+        width += cw;
+        childrenWidth.push(cw);
+      });
+      this.childrenWidth = childrenWidth;
+      this.swiperContentWidth = width;
     },
     updateDuration(use) {
       this.swiperContentStyle.transitionDuration = use ? "300ms" : "0ms";
     },
     setTranslateX(translateX) {
-      this.swiperContentWidth <= this.swiperBoxWith || (translateX > 0 ? (this.translateX = 0, this.reachedLeft = !0, this.reachedRight = !1) : translateX - this.swiperBoxWith < -this.swiperContentWidth ? (this.translateX = -this.swiperContentWidth + this.swiperBoxWith, this.reachedLeft = !1, this.reachedRight = !0) : (this.translateX = translateX, this.reachedLeft = !1, this.reachedRight = !1), this.swiperContentStyle.transform = `translate3d(${this.translateX}px, 0px, 0px)`);
+      if (this.swiperContentWidth <= this.swiperBoxWith) {
+        return;
+      }
+      if (translateX > 0) {
+        this.translateX = 0;
+        this.reachedLeft = true;
+        this.reachedRight = false;
+      } else if (translateX - this.swiperBoxWith < -this.swiperContentWidth) {
+        this.translateX = -this.swiperContentWidth + this.swiperBoxWith;
+        this.reachedLeft = false;
+        this.reachedRight = true;
+      } else {
+        this.translateX = translateX;
+        this.reachedLeft = false;
+        this.reachedRight = false;
+      }
+      this.swiperContentStyle.transform = `translate3d(${this.translateX}px, 0px, 0px)`;
     },
     clickLeft() {
-      this.updateDuration(!0);
-      let translateX = this.translateX + this.swiperBoxWith, width = translateX;
+      this.updateDuration(true);
+      let translateX = this.translateX + this.swiperBoxWith;
+      let width = translateX;
       if (translateX < 0) {
-        width = 0, translateX = -translateX;
-        for (let i = 0, len = this.childrenWidth.length; i < len && (width += this.childrenWidth[i], !(width >= translateX)); i++)
-          ;
+        width = 0;
+        translateX = -translateX;
+        for (let i = 0, len = this.childrenWidth.length; i < len; i++) {
+          width += this.childrenWidth[i];
+          if (width >= translateX) {
+            break;
+          }
+        }
         width = -width;
       }
       this.setTranslateX(width);
     },
     clickRight() {
-      this.updateDuration(!0);
+      this.updateDuration(true);
       const translateX = Math.abs(this.translateX - this.swiperBoxWith);
       let width = 0;
-      for (let i = 0, len = this.childrenWidth.length; i < len; i++)
-        if (width += this.childrenWidth[i], width >= translateX) {
-          width > translateX && (width -= this.childrenWidth[i]);
+      for (let i = 0, len = this.childrenWidth.length; i < len; i++) {
+        width += this.childrenWidth[i];
+        if (width >= translateX) {
+          if (width > translateX) {
+            width -= this.childrenWidth[i];
+          }
           break;
         }
+      }
       this.setTranslateX(-width);
     },
     onMouseWheel(e) {
-      this.updateDuration(!0), e.deltaMode === WheelEvent.DOM_DELTA_LINE ? this.setTranslateX(this.translateX - e.deltaY * 30) : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? e.deltaY > 0 ? this.clickRight() : this.clickLeft() : this.setTranslateX(this.translateX - e.deltaY);
+      this.updateDuration(true);
+      if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+        this.setTranslateX(this.translateX - e.deltaY * 30);
+      } else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+        if (e.deltaY > 0) {
+          this.clickRight();
+        } else {
+          this.clickLeft();
+        }
+      } else {
+        this.setTranslateX(this.translateX - e.deltaY);
+      }
     },
     onMouseDown(e) {
-      this.mouseDown = !0, this.startX = e.clientX, this.translateXRaw = this.translateX, window.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), window.addEventListener("mouseup", this.onMouseUp, { passive: !1 });
+      this.mouseDown = true;
+      this.startX = e.clientX;
+      this.translateXRaw = this.translateX;
+      window.addEventListener("mousemove", this.onMouseMove, { passive: false });
+      window.addEventListener("mouseup", this.onMouseUp, { passive: false });
     },
     onMouseUp(e) {
-      this.mouseDown = !1, this.updateDuration(!0), this.$refs.swiperContent.addEventListener("transitionend", this.transitionend), this.$refs.swiperContent.addEventListener("webkitTransitionEnd", this.transitionend);
+      this.mouseDown = false;
+      this.updateDuration(true);
+      this.$refs.swiperContent.addEventListener("transitionend", this.transitionend);
+      this.$refs.swiperContent.addEventListener("webkitTransitionEnd", this.transitionend);
       const t = e.clientX - this.startX;
       if (t < 0) {
         const translateX = this.translateX + t;
@@ -143,32 +204,40 @@ const __vue2_script = {
         const translateX = this.translateX + t;
         this.setTranslateX(translateX);
       }
-      window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp);
+      window.removeEventListener("mousemove", this.onMouseMove);
+      window.removeEventListener("mouseup", this.onMouseUp);
     },
     onMouseMove(e) {
-      this.mouseDown && requestAnimationFrame(() => {
-        const disX = e.clientX - this.startX, translateX = this.translateXRaw + disX;
-        this.setTranslateX(translateX);
-      });
+      if (this.mouseDown) {
+        requestAnimationFrame(() => {
+          const disX = e.clientX - this.startX;
+          const translateX = this.translateXRaw + disX;
+          this.setTranslateX(translateX);
+        });
+      }
     },
     transitionend() {
-      this.updateDuration(!1), this.$refs.swiperContent.removeEventListener("transitionend", this.transitionend), this.$refs.swiperContent.removeEventListener("webkitTransitionEnd", this.transitionend);
+      this.updateDuration(false);
+      this.$refs.swiperContent.removeEventListener("transitionend", this.transitionend);
+      this.$refs.swiperContent.removeEventListener("webkitTransitionEnd", this.transitionend);
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const Swiper = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/swiper/style.css

@@ -1 +1,43 @@
-.egd-swiper{position:relative;height:100%;padding:0 60px}.egd-swiper .el-button.el-carousel__arrow{padding:0;color:#fff;font-size:12px;background-color:#1f2d3d1c;border-color:#1f2d3d03;border-radius:50%}.egd-swiper .el-button.el-carousel__arrow i{cursor:unset}.egd-swiper .el-button.el-carousel__arrow.is-disabled{color:#fff;background-color:#1f2d3d1c;border-color:#1f2d3d03}.egd-swiper .egd-swiper-box{height:100%;overflow:hidden;user-select:none}.egd-swiper .egd-swiper-box .egd-swiper-content{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;height:100%;padding-top:14px;overflow:visible;transform:translateZ(0);transition-property:transform}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.egd-swiper {
+  position: relative;
+  height: 100%;
+  padding: 0 60px;
+}
+.egd-swiper .el-button.el-carousel__arrow {
+  padding: 0;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(31, 45, 61, 0.11);
+  border-color: rgba(31, 45, 61, 0.01);
+  border-radius: 50%;
+}
+.egd-swiper .el-button.el-carousel__arrow i {
+  cursor: unset;
+}
+.egd-swiper .el-button.el-carousel__arrow.is-disabled {
+  color: white;
+  background-color: rgba(31, 45, 61, 0.11);
+  border-color: rgba(31, 45, 61, 0.01);
+}
+.egd-swiper .egd-swiper-box {
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+}
+.egd-swiper .egd-swiper-box .egd-swiper-content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+  padding-top: 14px;
+  overflow: visible;
+  transform: translate3d(0, 0, 0);
+  transition-property: transform;
+}

package/dist/components/tab/index.js

@@ -1,7 +1,9 @@
-import { p as parentMixin } from "../../chunks/tab-mixin.9d568df9.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { p as parentMixin } from "../../chunks/tab-mixin.9d848bf6.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "vux-tab-wrap",
     class: _vm.barPosition === "top" ? "vux-tab-bar-top" : ""
@@ -22,7 +24,9 @@ var render = function() {
     staticClass: "vux-tab-bar-inner",
     style: _vm.innerBarStyle
   }) : _vm._e()]) : _vm._e()], 2)])]);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const Tab_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "Tab",
   mixins: [parentMixin],
@@ -35,7 +39,7 @@ const __vue2_script = {
     barActiveColor: String,
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     customBarWidth: [Function, String],
     scrollThreshold: {
@@ -53,7 +57,7 @@ const __vue2_script = {
   data() {
     return {
       direction: "forward",
-      hasReady: !1
+      hasReady: false
     };
   },
   computed: {
@@ -74,7 +78,7 @@ const __vue2_script = {
     // when prop:custom-bar-width
     innerBarStyle() {
       return {
-        width: typeof this.customBarWidth == "function" ? this.customBarWidth(this.currentIndex) : this.customBarWidth,
+        width: typeof this.customBarWidth === "function" ? this.customBarWidth(this.currentIndex) : this.customBarWidth,
         backgroundColor: this.barActiveColor || this.activeColor
       };
     },
@@ -85,9 +89,14 @@ const __vue2_script = {
         right: this.barRight,
         display: "block",
         height: `${this.lineWidth}px`,
-        transition: this.hasReady ? null : "none"
+        transition: !this.hasReady ? "none" : null
       };
-      return this.customBarWidth ? commonStyle.backgroundColor = "transparent" : commonStyle.backgroundColor = this.barActiveColor || this.activeColor, commonStyle;
+      if (!this.customBarWidth) {
+        commonStyle.backgroundColor = this.barActiveColor || this.activeColor;
+      } else {
+        commonStyle.backgroundColor = "transparent";
+      }
+      return commonStyle;
     },
     barClass() {
       return {
@@ -101,43 +110,52 @@ const __vue2_script = {
   },
   watch: {
     currentIndex(newIndex, oldIndex) {
-      this.direction = newIndex > oldIndex ? "forward" : "backward", this.$emit("on-index-change", newIndex, oldIndex), this.hasReady && this.scrollToActiveTab();
+      this.direction = newIndex > oldIndex ? "forward" : "backward";
+      this.$emit("on-index-change", newIndex, oldIndex);
+      this.hasReady && this.scrollToActiveTab();
     }
   },
   mounted() {
     this.$nextTick(() => {
       setTimeout(() => {
-        this.hasReady = !0;
+        this.hasReady = true;
       }, 0);
     });
   },
   methods: {
     scrollToActiveTab() {
-      if (!this.scrollable || !this.$children || !this.$children.length)
+      if (!this.scrollable || !this.$children || !this.$children.length) {
         return;
+      }
       const currentIndexTab = this.$children[this.currentIndex].$el;
       let count = 0;
       const step = () => {
+        const scrollDuration = 15;
         const nav = this.$refs.nav;
-        nav.scrollLeft += (currentIndexTab.offsetLeft - (nav.offsetWidth - currentIndexTab.offsetWidth) / 2 - nav.scrollLeft) / 15, ++count < 15 && window.requestAnimationFrame(step);
+        nav.scrollLeft += (currentIndexTab.offsetLeft - (nav.offsetWidth - currentIndexTab.offsetWidth) / 2 - nav.scrollLeft) / scrollDuration;
+        if (++count < scrollDuration) {
+          window.requestAnimationFrame(step);
+        }
       };
       window.requestAnimationFrame(step);
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const Tab = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/tab/style.css

@@ -1 +1,122 @@
-.vux-tab-ink-bar{position:absolute;bottom:0;left:0;height:2px;text-align:center;background-color:#1989fa}.vux-tab-ink-bar-transition-forward{transition:right .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1) .09s}.vux-tab-ink-bar-transition-backward{transition:right .3s cubic-bezier(.35,0,.25,1) .09s,left .3s cubic-bezier(.35,0,.25,1)}.vux-tab-bar-top .vux-tab-ink-bar{top:0}.vux-tab{position:relative;display:flex;height:36px;background-color:#fff}.vux-tab button{padding:0;background:0 0;border:0;outline:0;appearance:none}.vux-tab .vux-tab-item{display:block;flex:1 1 auto;box-sizing:border-box;width:100%;height:100%;color:#666;font-size:14px;line-height:36px;text-align:center;cursor:pointer}.vux-tab .vux-tab-item.vux-tab-selected{color:#1989fa;border-bottom:3px solid #1989fa}.vux-tab-bar-top .vux-tab .vux-tab-item.vux-tab-selected{border-top:3px solid #1989fa;border-bottom:none}.vux-tab .vux-tab-item.vux-tab-disabled{color:#ddd}.vux-tab.vux-tab-no-animate .vux-tab-item.vux-tab-selected{background:0 0}.vux-tab-bar-inner{display:block;height:100%;margin:auto;background-color:#1989fa;transition:width .3s cubic-bezier(.35,0,.25,1)}.vux-tab-item-badge{position:absolute;top:0;bottom:0;display:inline-block;box-sizing:border-box;min-width:18px;height:18px;margin:auto 0 auto 4px;padding:0 4px;font-size:11px;line-height:18px;vertical-align:middle;background-clip:padding-box;border-radius:30px}.vux-tab-wrap{position:relative;padding-top:36px}.vux-tab-container{position:absolute;top:0;right:0;left:0;height:36px;overflow:hidden}.scrollable{box-sizing:content-box;padding-bottom:17px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none}.scrollable .vux-tab-ink-bar{position:absolute;bottom:17px}.scrollable .vux-tab-item{flex:0 0 22%}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.vux-tab-ink-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  text-align: center;
+  background-color: #1989fa;
+}
+.vux-tab-ink-bar-transition-forward {
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+}
+.vux-tab-ink-bar-transition-backward {
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+.vux-tab-bar-top .vux-tab-ink-bar {
+  top: 0;
+}
+.vux-tab {
+  position: relative;
+  display: flex;
+  height: 36px;
+  background-color: #fff;
+}
+.vux-tab button {
+  padding: 0;
+  background: 0 0;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.vux-tab .vux-tab-item {
+  display: block;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  color: #666;
+  font-size: 14px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  /* background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat; */
+  /* background-size: 100% 1px; */
+}
+.vux-tab .vux-tab-item.vux-tab-selected {
+  color: #1989fa;
+  border-bottom: 3px solid #1989fa;
+}
+.vux-tab-bar-top .vux-tab .vux-tab-item {
+  /* background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) top left no-repeat; */
+  /* background-size: 100% 1px; */
+}
+.vux-tab-bar-top .vux-tab .vux-tab-item.vux-tab-selected {
+  border-top: 3px solid #1989fa;
+  border-bottom: none;
+}
+.vux-tab .vux-tab-item.vux-tab-disabled {
+  color: #ddd;
+}
+.vux-tab.vux-tab-no-animate .vux-tab-item.vux-tab-selected {
+  background: 0 0;
+}
+
+/** when=prop:custom-bar-width **/
+.vux-tab-bar-inner {
+  display: block;
+  height: 100%;
+  margin: auto;
+  background-color: #1989fa;
+  transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+.vux-tab-item-badge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  margin: auto 0 auto 4px;
+  padding: 0 4px;
+  font-size: 11px;
+  line-height: 18px;
+  vertical-align: middle;
+  background-clip: padding-box;
+  border-radius: 30px;
+}
+.vux-tab-wrap {
+  position: relative;
+  padding-top: 36px;
+}
+.vux-tab-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 36px;
+  overflow: hidden;
+}
+.scrollable {
+  box-sizing: content-box;
+  padding-bottom: 17px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.scrollable::-webkit-scrollbar {
+  display: none;
+}
+.scrollable .vux-tab-ink-bar {
+  position: absolute;
+  bottom: 17px;
+}
+.scrollable .vux-tab-item {
+  flex: 0 0 22%;
+}