@xysfe/actui2 0.0.1

package/lib/Swipe/index.mjs

@@ -0,0 +1,382 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js/instance/for-each";
+import { c as create } from "../utils/create/index.mjs";
+import { D as range, J as isHidden } from "../utils/helpers/index.mjs";
+import { t as touchMixin } from "../mixins/touch/index.mjs";
+import { d as doubleRaf } from "../utils/raf/index.mjs";
+import { B as BindEventMixin } from "../mixins/bind-event/index.mjs";
+import { p as preventDefault } from "../utils/event/index.mjs";
+import { n as normalizeComponent } from "../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActSwipe",
+  mixins: [touchMixin, BindEventMixin(function(bind, isBind) {
+    bind(window, "resize", this.resize, true);
+    bind(window, "visibilitychange", this.onVisibilityChange);
+    if (isBind) {
+      this.initialize();
+    } else {
+      this.clear();
+    }
+  })],
+  data: function data() {
+    return {
+      computedWidth: 0,
+      computedHeight: 0,
+      offset: 0,
+      active: 0,
+      deltaX: 0,
+      deltaY: 0,
+      swipes: [],
+      swiping: false
+    };
+  },
+  computed: {
+    count: function count() {
+      return this.swipes.length;
+    },
+    delta: function delta() {
+      return this.vertical ? this.deltaY : this.deltaX;
+    },
+    size: function size() {
+      return this[this.vertical ? "computedHeight" : "computedWidth"];
+    },
+    trackSize: function trackSize() {
+      return this.count * this.size;
+    },
+    activeIndicator: function activeIndicator() {
+      return (this.active + this.count) % this.count;
+    },
+    isCorrectDirection: function isCorrectDirection() {
+      var expect = this.vertical ? "vertical" : "horizontal";
+      return this.direction === expect;
+    },
+    trackStyle: function trackStyle() {
+      var _context;
+      var mainAxis = this.vertical ? "height" : "width";
+      var crossAxis = this.vertical ? "width" : "height";
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mainAxis, "".concat(this.trackSize, "px")), crossAxis, this[crossAxis] ? "".concat(this[crossAxis], "px") : ""), "transitionDuration", "".concat(this.swiping ? 0 : this.duration, "ms")), "transform", _concatInstanceProperty(_context = "translate".concat(this.vertical ? "Y" : "X", "(")).call(_context, this.offset, "px)"));
+    },
+    minOffset: function minOffset() {
+      var rect = this.$el.getBoundingClientRect();
+      return (this.vertical ? rect.height : rect.width) - this.size * this.count;
+    }
+  },
+  mounted: function mounted() {
+    this.initSlot();
+  },
+  watch: {
+    swipes: function swipes() {
+      this.initialize();
+    },
+    start: function start() {
+      this.initialize();
+    },
+    autoplay: function autoplay(_autoplay) {
+      if (_autoplay > 0) {
+        this.autoPlay();
+      } else {
+        this.clear();
+      }
+    },
+    offset: function offset(newVal) {
+      var children = this.$refs.track.children;
+      if (children && children.length) {
+        for (var i = 0; i < children.length; i++) {
+          var _context2;
+          var item = children[i];
+          var cssTransform = _concatInstanceProperty(_context2 = "translate".concat(this.vertical ? "Y" : "X", "(")).call(_context2, item.offset, "px)");
+          item.style.transform = "".concat(cssTransform);
+        }
+      }
+    }
+  },
+  methods: {
+    initSlot: function initSlot() {
+      var children = this.$refs.track.children;
+      if (children && children.length) {
+        for (var i = 0; i < children.length; i++) {
+          var _context3;
+          var item = children[i];
+          this.bindTouchEvent(item);
+          this.swipes.push(item);
+          var cssHeight = this.vertical ? this.computedHeight + "px" : "100%";
+          var cssTransform = _concatInstanceProperty(_context3 = "translate".concat(this.vertical ? "Y" : "X", "(")).call(_context3, item.offset, "px)");
+          item.style.float = "left";
+          item.style.width = "".concat(this.computedWidth, "px");
+          item.style.height = "".concat(cssHeight, "px");
+          item.style.transform = "".concat(cssTransform);
+        }
+      }
+    },
+    // initialize swipe position
+    initialize: function initialize() {
+      var _context4;
+      var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +this.start;
+      clearTimeout(this.timer);
+      if (this.$el && !isHidden(this.$el)) {
+        var rect = this.$el.getBoundingClientRect();
+        this.computedWidth = Math.round(+this.width || rect.width);
+        this.computedHeight = Math.round(+this.height || rect.height);
+      }
+      this.swiping = true;
+      this.active = active;
+      this.offset = this.count > 1 ? -this.size * this.active : 0;
+      _forEachInstanceProperty(_context4 = this.swipes).call(_context4, function(swipe) {
+        swipe.offset = 0;
+      });
+      this.autoPlay();
+    },
+    // @exposed-api
+    resize: function resize() {
+      this.initialize(this.activeIndicator);
+    },
+    onVisibilityChange: function onVisibilityChange() {
+      if (document.hidden) {
+        this.clear();
+      } else {
+        this.autoPlay();
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      if (!this.touchable) return;
+      this.clear();
+      this.touchStart(event);
+      this.correctPosition();
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (!this.touchable || !this.swiping) return;
+      this.touchMove(event);
+      if (this.isCorrectDirection) {
+        preventDefault(event, this.stopPropagation);
+        this.move({
+          offset: this.delta
+        });
+      }
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (!this.touchable || !this.swiping) return;
+      if (this.delta && this.isCorrectDirection) {
+        var offset2 = this.vertical ? this.offsetY : this.offsetX;
+        this.move({
+          pace: offset2 > 0 ? this.delta > 0 ? -1 : 1 : 0,
+          emitChange: true
+        });
+      }
+      this.swiping = false;
+      this.autoPlay();
+    },
+    getTargetActive: function getTargetActive(pace) {
+      var active = this.active, count2 = this.count;
+      if (pace) {
+        if (this.loop) {
+          return range(active + pace, -1, count2);
+        }
+        return range(active + pace, 0, count2 - 1);
+      }
+      return active;
+    },
+    getTargetOffset: function getTargetOffset(targetActive, offset2) {
+      var currentPosition = targetActive * this.size;
+      if (!this.loop) {
+        currentPosition = Math.min(currentPosition, -this.minOffset);
+      }
+      var targetOffset = Math.round(offset2 - currentPosition);
+      if (!this.loop) {
+        targetOffset = range(targetOffset, this.minOffset, 0);
+      }
+      return targetOffset;
+    },
+    move: function move(_ref2) {
+      var _ref2$pace = _ref2.pace, pace = _ref2$pace === void 0 ? 0 : _ref2$pace, _ref2$offset = _ref2.offset, offset2 = _ref2$offset === void 0 ? 0 : _ref2$offset, emitChange = _ref2.emitChange;
+      var loop = this.loop, count2 = this.count, active = this.active, swipes2 = this.swipes, trackSize2 = this.trackSize, minOffset2 = this.minOffset;
+      if (count2 <= 1) {
+        return;
+      }
+      var targetActive = this.getTargetActive(pace);
+      var targetOffset = this.getTargetOffset(targetActive, offset2);
+      if (loop) {
+        if (swipes2[0]) {
+          var outRightBound = targetOffset < minOffset2;
+          swipes2[0].offset = outRightBound ? trackSize2 : 0;
+        }
+        if (swipes2[count2 - 1]) {
+          var outLeftBound = targetOffset > 0;
+          swipes2[count2 - 1].offset = outLeftBound ? -trackSize2 : 0;
+        }
+      }
+      this.active = targetActive;
+      this.offset = targetOffset;
+      if (emitChange && targetActive !== active) {
+        this.$emit("change", this.activeIndicator);
+      }
+    },
+    // @exposed-api
+    prev: function prev() {
+      var _this = this;
+      this.correctPosition();
+      this.resetTouchStatus();
+      doubleRaf(function() {
+        _this.swiping = false;
+        _this.move({
+          pace: -1,
+          emitChange: true
+        });
+      });
+    },
+    // @exposed-api
+    next: function next() {
+      var _this2 = this;
+      this.correctPosition();
+      this.resetTouchStatus();
+      doubleRaf(function() {
+        _this2.swiping = false;
+        _this2.move({
+          pace: 1,
+          emitChange: true
+        });
+      });
+    },
+    // @exposed-api
+    swipeTo: function swipeTo(index) {
+      var _this3 = this;
+      var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      this.correctPosition();
+      this.resetTouchStatus();
+      doubleRaf(function() {
+        var targetIndex;
+        if (_this3.loop && index === _this3.count) {
+          targetIndex = _this3.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % _this3.count;
+        }
+        if (options.immediate) {
+          doubleRaf(function() {
+            _this3.swiping = false;
+          });
+        } else {
+          _this3.swiping = false;
+        }
+        _this3.move({
+          pace: targetIndex - _this3.active,
+          emitChange: true
+        });
+      });
+    },
+    correctPosition: function correctPosition() {
+      this.swiping = true;
+      if (this.active <= -1) {
+        this.move({
+          pace: this.count
+        });
+      }
+      if (this.active >= this.count) {
+        this.move({
+          pace: -this.count
+        });
+      }
+    },
+    clear: function clear() {
+      clearTimeout(this.timer);
+    },
+    autoPlay: function autoPlay() {
+      var _this4 = this;
+      var autoplay2 = this.autoplay;
+      if (autoplay2 > 0 && this.count > 1) {
+        this.clear();
+        this.timer = setTimeout(function() {
+          _this4.next();
+          _this4.autoPlay();
+        }, autoplay2);
+      }
+    }
+  },
+  props: {
+    width: {
+      type: [Number, String],
+      default: 0
+    },
+    height: {
+      type: [Number, String],
+      default: 0
+    },
+    autoplay: {
+      type: [Number, String],
+      default: 3e3
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    paginationColor: {
+      type: String,
+      default: "#fff"
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    duration: {
+      type: [Number, String],
+      default: 500
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    start: {
+      type: [Number, String],
+      default: 0
+    },
+    pagination: {
+      type: Boolean,
+      default: false
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", {
+    staticClass: "act-swipe"
+  }, [_c("div", {
+    ref: "track",
+    staticClass: "act-swipe-wrap",
+    style: _vm.trackStyle
+  }, [_vm._t("default")], 2), _vm.$slots.pagination ? _vm._t("pagination") : [_vm.pagination && _vm.count > 1 ? _c("div", {
+    staticClass: "act-indicators",
+    class: {
+      "vertical": _vm.vertical
+    },
+    style: _vm.vertical ? "transform:translateY(-50%);top:50%;left:6px;flex-direction:column;" : "transform:translateX(-50%);bottom:6px;left:50%;"
+  }, _vm._l(_vm.swipes, function(item, index) {
+    return _c("i", {
+      key: "indicators_item_".concat(index),
+      staticClass: "act-indicator",
+      class: {
+        "active": index === _vm.activeIndicator
+      },
+      style: {
+        "backgroundColor": _vm.paginationColor
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.swipeTo(index);
+        }
+      }
+    });
+  }), 0) : _vm._e()]], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "4918daaf");
+var Swipe = __component__.exports;
+Swipe.install = function(Vue) {
+  Vue.component(Swipe.name, Swipe);
+  Vue.prototype["$createSwipe"] = create(Swipe, Vue);
+};
+export {
+  Swipe as S
+};

package/lib/Swipe/style.css

@@ -0,0 +1 @@
+.act-swipe[data-v-4918daaf]{position:relative;overflow:hidden;cursor:pointer}.act-indicators[data-v-4918daaf]{position:absolute;display:-webkit-box;display:-webkit-flex;display:flex}.act-indicator[data-v-4918daaf]{width:6px;height:6px;border-radius:6px;margin:2px;opacity:0.4}.act-indicator.active[data-v-4918daaf]{opacity:1}

package/lib/Switch/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var utils_helpers=require("../utils/helpers/index.js");var common=require("../common/index.js");var _sfc_main={name:"ActSwitch",props:{value:{type:Boolean,default:false},activeColor:{type:String,default:"#8c7fee"},inactiveColor:{type:String,default:"#FFF"},disabled:{type:Boolean,default:false},size:{type:[Number,String],default:"30px"}},data:function data(){return{checkboxValue:this.value}},watch:{value:function value(newVal){this.checkboxValue=newVal}},computed:{style:function style(){var style2={};if(this.size){style2.fontSize=utils_helpers.formatFontSize(this.size)}return style2}},methods:{onClick:function onClick(){if(!this.disabled){var newValue=!this.checkboxValue;this.$emit("change",newValue);this.$emit("input",newValue)}}}};var _sfc_render=function render(){var _vm=this,_c=_vm._self._c;return _c("div",{staticClass:"act-switch",style:_vm.style},[_c("div",{staticClass:"act-switch-input",attrs:{"type":"checkbox"},on:{"click":_vm.onClick}}),_c("i",{staticClass:"act-switch-ui",class:{"checked":_vm.checkboxValue,"disabled":_vm.disabled},style:{backgroundColor:_vm.checkboxValue?_vm.activeColor:_vm.inactiveColor}}),_c("span",{staticClass:"act-switch-label"},[_vm._t("default")],2)])};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"0b5b21d5");var Switch=__component__.exports;Switch.install=function(Vue){Vue.component(Switch.name,Switch)};exports.Switch=Switch;

package/lib/Switch/index.mjs

@@ -0,0 +1,90 @@
+import { b as formatFontSize } from "../utils/helpers/index.mjs";
+import { n as normalizeComponent } from "../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActSwitch",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    activeColor: {
+      type: String,
+      default: "#8c7fee"
+    },
+    inactiveColor: {
+      type: String,
+      default: "#FFF"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: [Number, String],
+      default: "30px"
+    }
+  },
+  data: function data() {
+    return {
+      checkboxValue: this.value
+    };
+  },
+  watch: {
+    value: function value(newVal) {
+      this.checkboxValue = newVal;
+    }
+  },
+  computed: {
+    style: function style() {
+      var style2 = {};
+      if (this.size) {
+        style2.fontSize = formatFontSize(this.size);
+      }
+      return style2;
+    }
+  },
+  methods: {
+    onClick: function onClick() {
+      if (!this.disabled) {
+        var newValue = !this.checkboxValue;
+        this.$emit("change", newValue);
+        this.$emit("input", newValue);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", {
+    staticClass: "act-switch",
+    style: _vm.style
+  }, [_c("div", {
+    staticClass: "act-switch-input",
+    attrs: {
+      "type": "checkbox"
+    },
+    on: {
+      "click": _vm.onClick
+    }
+  }), _c("i", {
+    staticClass: "act-switch-ui",
+    class: {
+      "checked": _vm.checkboxValue,
+      "disabled": _vm.disabled
+    },
+    style: {
+      backgroundColor: _vm.checkboxValue ? _vm.activeColor : _vm.inactiveColor
+    }
+  }), _c("span", {
+    staticClass: "act-switch-label"
+  }, [_vm._t("default")], 2)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "0b5b21d5");
+var Switch = __component__.exports;
+Switch.install = function(Vue) {
+  Vue.component(Switch.name, Switch);
+};
+export {
+  Switch as S
+};

package/lib/Switch/style.css

@@ -0,0 +1 @@
+.act-switch[data-v-0b5b21d5]{display:-webkit-box;display:-webkit-flex;display:flex;position:relative;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.act-switch .act-switch-input[data-v-0b5b21d5]{position:absolute;z-index:1;width:2em;height:1em;opacity:0}.act-switch .act-switch-ui[data-v-0b5b21d5]{position:relative;display:block;width:2em;height:1em;box-sizing:content-box;border:1px solid transparent;border-radius:1em}.act-switch .act-switch-ui.checked[data-v-0b5b21d5]::before{-webkit-transform:scale(0);transform:scale(0)}.act-switch .act-switch-ui.checked[data-v-0b5b21d5]::after{-webkit-transform:translateX(1em);transform:translateX(1em)}.act-switch .act-switch-ui.disabled[data-v-0b5b21d5]{opacity:0.3}.act-switch .act-switch-ui[data-v-0b5b21d5]::before,.act-switch .act-switch-ui[data-v-0b5b21d5]::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1em;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.25,0.1,0.25,1.28);transition:-webkit-transform 0.4s cubic-bezier(0.25,0.1,0.25,1.28);transition:transform 0.4s cubic-bezier(0.25,0.1,0.25,1.28);transition:transform 0.4s cubic-bezier(0.25,0.1,0.25,1.28),-webkit-transform 0.4s cubic-bezier(0.25,0.1,0.25,1.28)}.act-switch .act-switch-ui[data-v-0b5b21d5]::after{width:1em;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.act-switch .act-switch-label[data-v-0b5b21d5]{display:block;margin-left:10px}.act-switch .act-switch-label[data-v-0b5b21d5]:empty{margin-left:0}

package/lib/Tab/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var _Array$from=require("@babel/runtime-corejs3/core-js/array/from");var _concatInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/concat");var utils_create=require("../utils/create/index.js");var mixins_visible=require("../mixins/visible/index.js");var common_scroll=require("../common/scroll/index.js");var common=require("../common/index.js");var _sfc_main={name:"ActTab",mixins:[mixins_visible.visibleMixin],data:function data(){return{listElements:null,scroll:null,barWidth:22}},components:{scroll:common_scroll.Scroll},props:{activeIndex:{type:Number,default:0},list:{type:Array,default:function _default(){return[]}},brandColor:{type:String,default:"#8c7fee"}},computed:{len:function len(){return this.list.length||0},belowFive:function belowFive(){return this.len&&this.len<=4},width:function width(){return document.body.clientWidth},perWidth:function perWidth(){if(this.belowFive){return this.width/this.len}return this.width/4.5},left:function left(){return(this.perWidth-this.barWidth)/2},activeBarLeft:function activeBarLeft(){if(this.activeIndex<this.list.length){return this.activeIndex*this.perWidth+this.left}return this.left}},mounted:function mounted(){this.listElements=_Array$from(this.$refs.actTab.querySelectorAll(".act-gold-tab-item"))},methods:{isSelected:function isSelected(index){return index===this.activeIndex},changeTab:function changeTab(index){this.$emit("change",index)},scrollSuc:function scrollSuc(scroll){this.scroll=scroll;if(this.activeIndex>=4){this.scrollTo(this.activeIndex)}},scrollTo:function scrollTo(index){var i=0;if(Number(index)<=2){i=0}else if(Number(index)>=Number(this.len)-2){i=this.len-4}else{i=Number(index)-2}this.scroll.scrollToElement(this.listElements[i],100)}},watch:{activeIndex:function activeIndex(newVal,oldVal){if(this.belowFive){return false}if(!this.listElements){this.listElements=_Array$from(this.$refs.actTab.querySelectorAll(".act-gold-tab-item"))}this.scrollTo(newVal)}}};var _sfc_render=function render(){var _context;var _vm=this,_c=_vm._self._c;return _vm.list&&_vm.list.length?_c("div",{ref:"actTab",staticClass:"act-gold-tab"},[_c("scroll",{ref:"scroll",staticClass:"act-tab-scroll",attrs:{"direction":"horizontal","click":true,"listenScrollInit":true},on:{"scrollSuc":_vm.scrollSuc}},[_vm._l(_vm.list,function(item,i){return _c("div",{key:i,staticClass:"act-gold-tab-item",class:{active:_vm.isSelected(i)},style:"width:".concat(_vm.belowFive?_vm.width/_vm.list.length:_vm.perWidth,"px"),on:{"click":function click($event){$event.stopPropagation();return _vm.changeTab(i)}}},[_vm._v(" "+_vm._s(item.name)+" ")])}),_c("i",{staticClass:"active_bar",style:_concatInstanceProperty(_context="left:".concat(_vm.activeBarLeft,"px; backgroundColor:")).call(_context,_vm.brandColor)})],2),_c("i",{directives:[{name:"show",rawName:"v-show",value:Number(_vm.activeIndex)<=Number(_vm.len-3),expression:"Number(activeIndex) <= Number(len - 3)"}],staticClass:"cover_layer right"})],1):_vm._e()};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"4c979acc");var Tab=__component__.exports;Tab.install=function(Vue){Vue.component(Tab.name,Tab);Vue.prototype["$createTab"]=utils_create.create(Tab,Vue)};exports.Tab=Tab;

package/lib/Tab/index.mjs

@@ -0,0 +1,156 @@
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { c as create } from "../utils/create/index.mjs";
+import { v as visibleMixin } from "../mixins/visible/index.mjs";
+import { S as Scroll } from "../common/scroll/index.mjs";
+import { n as normalizeComponent } from "../common/index.mjs";
+import './style.css';var _sfc_main = {
+  name: "ActTab",
+  mixins: [visibleMixin],
+  data: function data() {
+    return {
+      listElements: null,
+      scroll: null,
+      barWidth: 22
+    };
+  },
+  components: {
+    scroll: Scroll
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    },
+    list: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    brandColor: {
+      type: String,
+      default: "#8c7fee"
+    }
+  },
+  computed: {
+    len: function len() {
+      return this.list.length || 0;
+    },
+    belowFive: function belowFive() {
+      return this.len && this.len <= 4;
+    },
+    width: function width() {
+      return document.body.clientWidth;
+    },
+    perWidth: function perWidth() {
+      if (this.belowFive) {
+        return this.width / this.len;
+      }
+      return this.width / 4.5;
+    },
+    left: function left() {
+      return (this.perWidth - this.barWidth) / 2;
+    },
+    activeBarLeft: function activeBarLeft() {
+      if (this.activeIndex < this.list.length) {
+        return this.activeIndex * this.perWidth + this.left;
+      }
+      return this.left;
+    }
+  },
+  mounted: function mounted() {
+    this.listElements = _Array$from(this.$refs.actTab.querySelectorAll(".act-gold-tab-item"));
+  },
+  methods: {
+    isSelected: function isSelected(index) {
+      return index === this.activeIndex;
+    },
+    changeTab: function changeTab(index) {
+      this.$emit("change", index);
+    },
+    scrollSuc: function scrollSuc(scroll) {
+      this.scroll = scroll;
+      if (this.activeIndex >= 4) {
+        this.scrollTo(this.activeIndex);
+      }
+    },
+    scrollTo: function scrollTo(index) {
+      var i = 0;
+      if (Number(index) <= 2) {
+        i = 0;
+      } else if (Number(index) >= Number(this.len) - 2) {
+        i = this.len - 4;
+      } else {
+        i = Number(index) - 2;
+      }
+      this.scroll.scrollToElement(this.listElements[i], 100);
+    }
+  },
+  watch: {
+    activeIndex: function activeIndex(newVal, oldVal) {
+      if (this.belowFive) {
+        return false;
+      }
+      if (!this.listElements) {
+        this.listElements = _Array$from(this.$refs.actTab.querySelectorAll(".act-gold-tab-item"));
+      }
+      this.scrollTo(newVal);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _context;
+  var _vm = this, _c = _vm._self._c;
+  return _vm.list && _vm.list.length ? _c("div", {
+    ref: "actTab",
+    staticClass: "act-gold-tab"
+  }, [_c("scroll", {
+    ref: "scroll",
+    staticClass: "act-tab-scroll",
+    attrs: {
+      "direction": "horizontal",
+      "click": true,
+      "listenScrollInit": true
+    },
+    on: {
+      "scrollSuc": _vm.scrollSuc
+    }
+  }, [_vm._l(_vm.list, function(item, i) {
+    return _c("div", {
+      key: i,
+      staticClass: "act-gold-tab-item",
+      class: {
+        active: _vm.isSelected(i)
+      },
+      style: "width:".concat(_vm.belowFive ? _vm.width / _vm.list.length : _vm.perWidth, "px"),
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.changeTab(i);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(item.name) + " ")]);
+  }), _c("i", {
+    staticClass: "active_bar",
+    style: _concatInstanceProperty(_context = "left:".concat(_vm.activeBarLeft, "px; backgroundColor:")).call(_context, _vm.brandColor)
+  })], 2), _c("i", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: Number(_vm.activeIndex) <= Number(_vm.len - 3),
+      expression: "Number(activeIndex) <= Number(len - 3)"
+    }],
+    staticClass: "cover_layer right"
+  })], 1) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "4c979acc");
+var Tab = __component__.exports;
+Tab.install = function(Vue) {
+  Vue.component(Tab.name, Tab);
+  Vue.prototype["$createTab"] = create(Tab, Vue);
+};
+export {
+  Tab as T
+};

package/lib/Tab/style.css

@@ -0,0 +1 @@
+.act-gold-tab[data-v-4c979acc]{padding:0;margin:0;width:100%;height:40px;background-color:#fff;position:relative}.act-gold-tab .cover_layer[data-v-4c979acc]{position:absolute;top:0;width:36px;height:40px;opacity:1}.act-gold-tab .right[data-v-4c979acc]{right:0;background:-webkit-linear-gradient(right,#ffffff,rgba(255,255,255,0));background:linear-gradient(270deg,#ffffff,rgba(255,255,255,0))}.act-gold-tab[data-v-4c979acc] .scroll-wrapper{width:100%;white-space:nowrap;overflow:hidden}.act-gold-tab[data-v-4c979acc] .scroll-wrapper .scroll-content{width:unset;display:inline-block;position:relative}.act-gold-tab[data-v-4c979acc] .scroll-wrapper .scroll-content .act-gold-tab-item{display:inline-block;color:#666;font-size:14px;text-align:center;height:40px;line-height:40px;text-align:center}.act-gold-tab[data-v-4c979acc] .scroll-wrapper .scroll-content .act-gold-tab-item.active{font-size:16px;color:#333}.act-gold-tab[data-v-4c979acc] .scroll-wrapper .scroll-content .act-gold-tab-item:hover{font-size:16px;color:#333}.act-gold-tab[data-v-4c979acc] .scroll-wrapper .scroll-content .active_bar{z-index:1;position:absolute;bottom:0;width:22px;height:3px;opacity:1;border-radius:2px;transition:left 0.1s;-webkit-transition:left 0.1s;-moz-transition:left 0.1s;-o-transition:left 0.1s}

package/lib/Timeline/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var utils_create=require("../utils/create/index.js");var common_svgicon=require("../common/svgicon/index.js");var common=require("../common/index.js");var _sfc_main={name:"ActTimeline",data:function data(){return{ifFold:true}},methods:{toggle:function toggle(){if(this.ifFold){this.ifFold=false;this.$emit("spread")}else{this.ifFold=true;this.$emit("fold")}}},props:{data:{type:Array,default:function _default(){return[]}},max:{type:Number,default:3},active:{type:Number,default:0},activeColor:{type:String,default:"#333"},activeIcon:{type:String,default:""},inactiveIcon:{type:String,default:""},toggleIcon:{type:String,default:""}},components:{svgIcon:common_svgicon.svgIcon}};var _sfc_render=function render(){var _vm=this,_c=_vm._self._c;return _c("div",{staticClass:"act-time-line"},[_c("div",{staticClass:"act-timeline-wrap"},_vm._l(_vm.data,function(item,index){return _c("div",{directives:[{name:"show",rawName:"v-show",value:index<_vm.max||!_vm.ifFold,expression:"(index < max) || !ifFold"}],key:"timeline_".concat(index),staticClass:"act-timeline-step",class:{"active":index===_vm.active},style:{"color":index===_vm.active?_vm.activeColor:""}},[index===_vm.active?[_vm.activeIcon?_c("svg-icon",{staticClass:"act-timeline-icon",attrs:{"iconClass":_vm.activeIcon}}):_c("svg-icon",{staticClass:"act-timeline-icon",attrs:{"iconClass":"cicle"}})]:[_vm.inactiveIcon?_c("svg-icon",{staticClass:"act-timeline-icon",attrs:{"iconClass":_vm.inactiveIcon}}):_c("svg-icon",{staticClass:"act-timeline-icon",attrs:{"iconClass":"tick"}})],_c("div",{staticClass:"act-timeline-line"}),_vm.$scopedSlots.notice?_vm._t("notice",null,{"row":item,"index":index}):_c("div",[_c("h4",{staticClass:"act-timeline-title"},[_c("div",{domProps:{"innerHTML":_vm._s(item.title)}})]),item.desc?_c("div",{staticClass:"act-timeline-desc",domProps:{"innerHTML":_vm._s(item.desc)}}):_vm._e(),item.time?_c("div",{staticClass:"act-timeline-time"},[_vm._v(" "+_vm._s(item.time)+" ")]):_vm._e(),item.tip?_c("div",{staticClass:"act-timeline-tip"},[_vm._v(" "+_vm._s(item.tip)+" ")]):_vm._e()]),_vm._t("itemFooter",null,{"row":item,"index":index})],2)}),0),_vm.data.length>Number(_vm.max)?_c("div",{staticClass:"act-more",on:{"click":_vm.toggle}},[_c("svg-icon",{staticClass:"act-more-btn",class:{"spread":!_vm.ifFold},attrs:{"iconClass":"arrow-down"}})],1):_vm._e()])};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"286efeb1");var Timeline=__component__.exports;Timeline.install=function(Vue){Vue.component(Timeline.name,Timeline);Vue.prototype["$createTimeline"]=utils_create.create(Timeline,Vue)};exports.Timeline=Timeline;