@web-utils/component 2.7.20 → 2.7.21

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

@@ -1,33 +1,33 @@
-import { chunk as n } from "lodash";
-import { n as i } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var o = function() {
-  var e = this, t = e.$createElement, a = e._self._c || t;
-  return a("div", {
+import { chunk } from "lodash";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "static-pageable-table"
-  }, [a("ElTable", e._g(e._b({
+  }, [_c("ElTable", _vm._g(_vm._b({
     attrs: {
       size: "mini",
-      data: e.records
+      data: _vm.records
     }
-  }, "ElTable", e.$attrs, !1), e.$listeners), [e._t("default", function() {
-    return [e._v("请添加表格列")];
-  })], 2), a("ElPagination", {
+  }, "ElTable", _vm.$attrs, !1), _vm.$listeners), [_vm._t("default", function() {
+    return [_vm._v("请添加表格列")];
+  })], 2), _c("ElPagination", {
     attrs: {
-      "current-page": e.page.page,
+      "current-page": _vm.page.page,
       "hide-on-single-page": !0,
-      "page-size": e.page.limit,
-      total: e.page.total,
+      "page-size": _vm.page.limit,
+      total: _vm.page.total,
       background: "",
       layout: "total, prev, pager, next"
     },
     on: {
-      "current-change": function(s) {
-        e.page.page = s;
+      "current-change": function(curPage) {
+        _vm.page.page = curPage;
       }
     }
   })], 1);
-}, l = [];
-const c = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "StaticPageableTable",
   props: {
     rows: {
@@ -66,27 +66,27 @@ const c = {
   },
   methods: {
     fetchData() {
-      this.records = n(this.rows, this.page.limit)[this.page.page - 1];
+      this.records = chunk(this.rows, this.page.limit)[this.page.page - 1];
     }
   }
-}, r = {};
-var p = /* @__PURE__ */ i(
-  c,
-  o,
-  l,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  g,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function g(e) {
-  for (let t in r)
-    this[t] = r[t];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const h = /* @__PURE__ */ function() {
-  return p.exports;
+const StaticPageableTable = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  h as default
+  StaticPageableTable as default
 };

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

@@ -1 +1,3 @@
-.static-pageable-table{flex:1 1 auto}
+.static-pageable-table {
+  flex: 1 1 auto;
+}

package/dist/components/swiper/index.js

@@ -1,46 +1,46 @@
-import { getEleWidth as a } from "@web-utils/core";
-import { n as o } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var h = function() {
-  var t = this, e = t.$createElement, s = t._self._c || e;
-  return s("div", {
+import { getEleWidth } from "@web-utils/core";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "egd-swiper"
-  }, [s("ElButton", {
+  }, [_c("ElButton", {
     staticClass: "el-carousel__arrow el-carousel__arrow--left",
     attrs: {
-      disabled: t.reachedLeft,
+      disabled: _vm.reachedLeft,
       icon: "el-icon-arrow-left"
     },
     on: {
-      click: t.clickLeft
+      click: _vm.clickLeft
     }
-  }), s("div", {
+  }), _c("div", {
     ref: "swiperBox",
     staticClass: "egd-swiper-box",
     on: {
-      wheel: function(i) {
-        return i.stopPropagation(), i.preventDefault(), t.onMouseWheel.apply(null, arguments);
+      wheel: function($event) {
+        return $event.stopPropagation(), $event.preventDefault(), _vm.onMouseWheel.apply(null, arguments);
       }
     }
-  }, [s("div", {
+  }, [_c("div", {
     ref: "swiperContent",
     staticClass: "egd-swiper-content",
-    style: t.swiperContentStyle
-  }, [t._t("default")], 2)]), s("ElButton", {
+    style: _vm.swiperContentStyle
+  }, [_vm._t("default")], 2)]), _c("ElButton", {
     staticClass: "el-carousel__arrow el-carousel__arrow--right",
     attrs: {
-      disabled: t.reachedRight,
+      disabled: _vm.reachedRight,
       icon: "el-icon-arrow-right"
     },
     on: {
-      click: t.clickRight
+      click: _vm.clickRight
     }
-  }), s("ResizeObserver", {
+  }), _c("ResizeObserver", {
     on: {
-      notify: t.resize
+      notify: _vm.resize
     }
   })], 1);
-}, l = [];
-const d = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "Swiper",
   data() {
     return {
@@ -71,88 +71,88 @@ const d = {
       console.log(1), this.swiperBoxWith = this.$refs.swiperBox.offsetWidth;
     },
     computeContentWidth() {
-      let t = 0;
-      const e = [], { children: s } = this.$refs.swiperContent;
-      Array.prototype.forEach.call(s, (i) => {
-        const n = a(i);
-        t += n, e.push(n);
-      }), this.childrenWidth = e, this.swiperContentWidth = t;
+      let width = 0;
+      const childrenWidth = [], { 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;
     },
-    updateDuration(t) {
-      this.swiperContentStyle.transitionDuration = t ? "300ms" : "0ms";
+    updateDuration(use) {
+      this.swiperContentStyle.transitionDuration = use ? "300ms" : "0ms";
     },
-    setTranslateX(t) {
-      this.swiperContentWidth <= this.swiperBoxWith || (t > 0 ? (this.translateX = 0, this.reachedLeft = !0, this.reachedRight = !1) : t - this.swiperBoxWith < -this.swiperContentWidth ? (this.translateX = -this.swiperContentWidth + this.swiperBoxWith, this.reachedLeft = !1, this.reachedRight = !0) : (this.translateX = t, this.reachedLeft = !1, this.reachedRight = !1), this.swiperContentStyle.transform = `translate3d(${this.translateX}px, 0px, 0px)`);
+    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)`);
     },
     clickLeft() {
       this.updateDuration(!0);
-      let t = this.translateX + this.swiperBoxWith, e = t;
-      if (t < 0) {
-        e = 0, t = -t;
-        for (let s = 0, i = this.childrenWidth.length; s < i && (e += this.childrenWidth[s], !(e >= t)); s++)
+      let translateX = this.translateX + this.swiperBoxWith, 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++)
           ;
-        e = -e;
+        width = -width;
       }
-      this.setTranslateX(e);
+      this.setTranslateX(width);
     },
     clickRight() {
       this.updateDuration(!0);
-      const t = Math.abs(this.translateX - this.swiperBoxWith);
-      let e = 0;
-      for (let s = 0, i = this.childrenWidth.length; s < i; s++)
-        if (e += this.childrenWidth[s], e >= t) {
-          e > t && (e -= this.childrenWidth[s]);
+      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]);
           break;
         }
-      this.setTranslateX(-e);
+      this.setTranslateX(-width);
     },
-    onMouseWheel(t) {
-      this.updateDuration(!0), t.deltaMode === WheelEvent.DOM_DELTA_LINE ? this.setTranslateX(this.translateX - t.deltaY * 30) : t.deltaMode === WheelEvent.DOM_DELTA_PAGE ? t.deltaY > 0 ? this.clickRight() : this.clickLeft() : this.setTranslateX(this.translateX - t.deltaY);
+    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);
     },
-    onMouseDown(t) {
-      this.mouseDown = !0, this.startX = t.clientX, this.translateXRaw = this.translateX, window.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), window.addEventListener("mouseup", this.onMouseUp, { passive: !1 });
+    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 });
     },
-    onMouseUp(t) {
+    onMouseUp(e) {
       this.mouseDown = !1, this.updateDuration(!0), this.$refs.swiperContent.addEventListener("transitionend", this.transitionend), this.$refs.swiperContent.addEventListener("webkitTransitionEnd", this.transitionend);
-      const e = t.clientX - this.startX;
-      if (e < 0) {
-        const s = this.translateX + e;
-        this.setTranslateX(s);
+      const t = e.clientX - this.startX;
+      if (t < 0) {
+        const translateX = this.translateX + t;
+        this.setTranslateX(translateX);
       }
-      if (e > 0) {
-        const s = this.translateX + e;
-        this.setTranslateX(s);
+      if (t > 0) {
+        const translateX = this.translateX + t;
+        this.setTranslateX(translateX);
       }
       window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp);
     },
-    onMouseMove(t) {
+    onMouseMove(e) {
       this.mouseDown && requestAnimationFrame(() => {
-        const e = t.clientX - this.startX, s = this.translateXRaw + e;
-        this.setTranslateX(s);
+        const disX = e.clientX - this.startX, 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);
     }
   }
-}, r = {};
-var c = /* @__PURE__ */ o(
-  d,
-  h,
-  l,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  u,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function u(t) {
-  for (let e in r)
-    this[e] = r[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const w = /* @__PURE__ */ function() {
-  return c.exports;
+const Swiper = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  w as default
+  Swiper as default
 };

package/dist/components/swiper/style.css

@@ -1 +1,37 @@
-.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: #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;
+}

package/dist/components/tab/index.js

@@ -1,31 +1,31 @@
-import { p as a } from "../../chunks/tab-mixin.8c0142e0.js";
-import { n as s } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var o = function() {
-  var t = this, r = t.$createElement, e = t._self._c || r;
-  return e("div", {
+import { p as parentMixin } from "../../chunks/tab-mixin.51886d91.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "vux-tab-wrap",
-    class: t.barPosition === "top" ? "vux-tab-bar-top" : ""
-  }, [e("div", {
+    class: _vm.barPosition === "top" ? "vux-tab-bar-top" : ""
+  }, [_c("div", {
     staticClass: "vux-tab-container"
-  }, [e("div", {
+  }, [_c("div", {
     ref: "nav",
     staticClass: "vux-tab",
     class: [{
-      "vux-tab-no-animate": !t.animate,
-      scrollable: t.scrollable
+      "vux-tab-no-animate": !_vm.animate,
+      scrollable: _vm.scrollable
     }]
-  }, [t._t("default"), t.animate ? e("div", {
+  }, [_vm._t("default"), _vm.animate ? _c("div", {
     staticClass: "vux-tab-ink-bar",
-    class: t.barClass,
-    style: t.barStyle
-  }, [t.customBarWidth ? e("span", {
+    class: _vm.barClass,
+    style: _vm.barStyle
+  }, [_vm.customBarWidth ? _c("span", {
     staticClass: "vux-tab-bar-inner",
-    style: t.innerBarStyle
-  }) : t._e()]) : t._e()], 2)])]);
-}, l = [];
-const c = {
+    style: _vm.innerBarStyle
+  }) : _vm._e()]) : _vm._e()], 2)])]);
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "Tab",
-  mixins: [a],
+  mixins: [parentMixin],
   props: {
     lineWidth: {
       type: Number,
@@ -45,8 +45,8 @@ const c = {
     barPosition: {
       type: String,
       default: "bottom",
-      validator(t) {
-        return ["bottom", "top"].indexOf(t) !== -1;
+      validator(val) {
+        return ["bottom", "top"].indexOf(val) !== -1;
       }
     }
   },
@@ -59,15 +59,15 @@ const c = {
   computed: {
     barLeft() {
       if (this.hasReady) {
-        const t = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
-        return `${this.currentIndex * (100 / t)}%`;
+        const count = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${this.currentIndex * (100 / count)}%`;
       }
       return null;
     },
     barRight() {
       if (this.hasReady) {
-        const t = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
-        return `${(t - this.currentIndex - 1) * (100 / t)}%`;
+        const count = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${(count - this.currentIndex - 1) * (100 / count)}%`;
       }
       return null;
     },
@@ -80,14 +80,14 @@ const c = {
     },
     // end
     barStyle() {
-      const t = {
+      const commonStyle = {
         left: this.barLeft,
         right: this.barRight,
         display: "block",
         height: `${this.lineWidth}px`,
         transition: this.hasReady ? null : "none"
       };
-      return this.customBarWidth ? t.backgroundColor = "transparent" : t.backgroundColor = this.barActiveColor || this.activeColor, t;
+      return this.customBarWidth ? commonStyle.backgroundColor = "transparent" : commonStyle.backgroundColor = this.barActiveColor || this.activeColor, commonStyle;
     },
     barClass() {
       return {
@@ -100,8 +100,8 @@ const c = {
     }
   },
   watch: {
-    currentIndex(t, r) {
-      this.direction = t > r ? "forward" : "backward", this.$emit("on-index-change", t, r), this.hasReady && this.scrollToActiveTab();
+    currentIndex(newIndex, oldIndex) {
+      this.direction = newIndex > oldIndex ? "forward" : "backward", this.$emit("on-index-change", newIndex, oldIndex), this.hasReady && this.scrollToActiveTab();
     }
   },
   mounted() {
@@ -115,33 +115,33 @@ const c = {
     scrollToActiveTab() {
       if (!this.scrollable || !this.$children || !this.$children.length)
         return;
-      const t = this.$children[this.currentIndex].$el;
-      let r = 0;
-      const e = () => {
-        const i = this.$refs.nav;
-        i.scrollLeft += (t.offsetLeft - (i.offsetWidth - t.offsetWidth) / 2 - i.scrollLeft) / 15, ++r < 15 && window.requestAnimationFrame(e);
+      const currentIndexTab = this.$children[this.currentIndex].$el;
+      let count = 0;
+      const step = () => {
+        const nav = this.$refs.nav;
+        nav.scrollLeft += (currentIndexTab.offsetLeft - (nav.offsetWidth - currentIndexTab.offsetWidth) / 2 - nav.scrollLeft) / 15, ++count < 15 && window.requestAnimationFrame(step);
       };
-      window.requestAnimationFrame(e);
+      window.requestAnimationFrame(step);
     }
   }
-}, n = {};
-var h = /* @__PURE__ */ s(
-  c,
-  o,
-  l,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  u,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function u(t) {
-  for (let r in n)
-    this[r] = n[r];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const m = /* @__PURE__ */ function() {
-  return h.exports;
+const Tab = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  m as default
+  Tab as default
 };

package/dist/components/tab/style.css

@@ -1 +1,108 @@
-.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 .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%;
+}