@xysfe/actui2 0.0.1

package/lib/IndexBar/index.mjs

@@ -0,0 +1,612 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js/instance/index-of";
+import _Object$is from "@babel/runtime-corejs3/core-js/object/is";
+import { c as create } from "../utils/create/index.mjs";
+import { S as Scroll } from "../common/scroll/index.mjs";
+import { A as ActPopup } from "../common/popup/index.mjs";
+import { p as popupMixin } from "../mixins/popup/index.mjs";
+import { v as visibleMixin } from "../mixins/visible/index.mjs";
+import { n as noscrollMixin } from "../mixins/noscroll/index.mjs";
+import { t as throttle } from "../utils/helpers/index.mjs";
+import { n as normalizeComponent } from "../common/index.mjs";
+import './style.css';var throttle2 = function throttle22(fn) {
+  var delay = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 500;
+  var timer;
+  return function() {
+    var _arguments = arguments, _this = this;
+    clearTimeout(timer);
+    timer = setTimeout(function() {
+      fn.apply(_this, _arguments);
+    }, delay);
+  };
+};
+var _sfc_main = {
+  name: "ActIndexBar",
+  mixins: [popupMixin, visibleMixin, noscrollMixin],
+  data: function data() {
+    return {
+      scrollY: -1,
+      diff: -1,
+      currentIndex: 0,
+      indexScroll: null,
+      searchScroll: null,
+      char: "",
+      activeSearch: false,
+      isTouching: false,
+      tabIndex: 0,
+      searchClean: false,
+      searchValue: "",
+      searchResult: {},
+      noSearchResult: false,
+      activeTabStyle: {
+        backgroundColor: this.brandColor,
+        borderColor: this.brandColor,
+        color: "#fff"
+      },
+      indexList: this.data,
+      groupTitleHeight: 30,
+      anchorHeight: 20
+      // maxScrollY: 0
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    isHot: {
+      type: Boolean,
+      default: false
+    },
+    isTabs: {
+      type: Boolean,
+      default: false
+    },
+    isSearch: {
+      type: Boolean,
+      default: true
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "请输入搜索内容"
+    },
+    brandColor: {
+      type: String,
+      default: "#8c7fee"
+    }
+  },
+  components: {
+    scroll: Scroll,
+    ActPopup
+  },
+  computed: {
+    curIndexList: function curIndexList() {
+      if (this.isTabs && this.indexList.length) {
+        return this.indexList[this.tabIndex] && this.indexList[this.tabIndex].items;
+      }
+      return this.indexList;
+    },
+    shortcutList: function shortcutList() {
+      var _context;
+      return _mapInstanceProperty(_context = this.curIndexList).call(_context, function(group) {
+        var _context2;
+        return _sliceInstanceProperty(_context2 = group.title).call(_context2, 0, 1);
+      });
+    },
+    fixedTitle: function fixedTitle() {
+      if (this.scrollY > 0) {
+        return "";
+      }
+      return this.curIndexList[this.currentIndex] ? this.curIndexList[this.currentIndex].title : "";
+    }
+  },
+  methods: {
+    onShortcutTouchStart: function onShortcutTouchStart(e) {
+      this.isTouching = true;
+      var groupIndex = +e.target.dataset["index"];
+      this.touch.y1 = e.touches[0].pageY;
+      this.touch.groupIndex = groupIndex;
+      this._setChar(groupIndex);
+      this._scrollTo(groupIndex);
+    },
+    onShortcutTouchMove: function onShortcutTouchMove(e) {
+      this.touch.y2 = e.touches[0].pageY;
+      var deltaIndex = (this.touch.y2 - this.touch.y1) / this.anchorHeight;
+      deltaIndex = Math.floor(deltaIndex);
+      var groupIndex = this.touch.groupIndex + deltaIndex;
+      this._setChar(groupIndex);
+      this._scrollTo(groupIndex);
+    },
+    onShortcutTouchEnd: function onShortcutTouchEnd(e) {
+      e.preventDefault();
+      this._chartipHide();
+    },
+    onScroll: function onScroll(pos) {
+      this.scrollY = pos.y;
+    },
+    onScrollInit: function onScrollInit(myScroll) {
+      this.indexScroll = myScroll;
+    },
+    onSearchScrollInit: function onSearchScrollInit(myScroll) {
+      this.searchScroll = myScroll;
+    },
+    onClickTab: function onClickTab(index) {
+      var _this2 = this;
+      this.tabIndex = index;
+      this.$nextTick(function() {
+        _this2.indexScroll.refresh();
+        _this2.indexScroll.scrollTo(0, 0);
+        _this2._calcGroupHeight();
+        _this2._scrollTo(0);
+      });
+    },
+    onClickItem: function onClickItem(item) {
+      this.$emit("select", item);
+      this.onCancel();
+    },
+    onClickSearch: function onClickSearch() {
+      var _this3 = this;
+      this.activeSearch = true;
+      this.$nextTick(function() {
+        _this3.$refs.searchInput && _this3.$refs.searchInput.focus();
+      });
+    },
+    onSearchClear: function onSearchClear() {
+      this.searchValue = "";
+      this.searchClean = false;
+      this.searchResult = {};
+      this.noSearchResult = false;
+      this.$refs.searchInput && this.$refs.searchInput.focus();
+    },
+    onSearchInput: throttle(function(e) {
+      if (e.target.value !== "") {
+        this.searchClean = true;
+      } else {
+        this.searchClean = false;
+      }
+      var inputValue = e.target.value && e.target.value.replace(/\s*/ig, "");
+      this.searchResult = {};
+      if (inputValue === "") {
+        this.onSearchClear();
+        return;
+      }
+      this._filtersearchResult(inputValue, this.curIndexList);
+      this.noSearchResult = _Object$keys(this.searchResult).length === 0;
+    }, 500),
+    onCancel: function onCancel() {
+      this.hide();
+    },
+    onBackHome: function onBackHome() {
+      var _this4 = this;
+      this.activeSearch = false;
+      this.onSearchClear();
+      this.$nextTick(function() {
+        _this4.indexScroll && _this4.indexScroll.refresh();
+      });
+    },
+    setData: function setData(data2) {
+      this.indexList = data2;
+    },
+    _filtersearchResult: function _filtersearchResult(inputValue, data2) {
+      for (var i = 0; i < data2.length; i++) {
+        var item = data2[i];
+        if (item.items) {
+          this._filtersearchResult(inputValue, item.items);
+        } else {
+          var _context3, _context4, _context5;
+          if (item.text && _indexOfInstanceProperty(_context3 = item.text).call(_context3, inputValue.toLowerCase()) === 0) {
+            this.searchResult[item.value] = item;
+          } else if (item.pinyin && _indexOfInstanceProperty(_context4 = item.pinyin).call(_context4, inputValue.toLowerCase()) === 0) {
+            this.searchResult[item.value] = item;
+          } else if (item.sx && _indexOfInstanceProperty(_context5 = item.sx).call(_context5, inputValue.toLowerCase()) === 0) {
+            this.searchResult[item.value] = item;
+          }
+        }
+      }
+    },
+    _calcGroupHeight: function _calcGroupHeight() {
+      this.heightList = [];
+      var listEl = this.$refs.indexbarGroup || [];
+      var height = 0;
+      this.heightList.push(height);
+      for (var i = 0; i < listEl.length; i++) {
+        var item = listEl[i];
+        height += item.clientHeight;
+        this.heightList.push(height);
+      }
+    },
+    _calcGroupTitleHeight: function _calcGroupTitleHeight() {
+      var groupTitleElem = this.$refs.indexbarGroupTitle && this.$refs.indexbarGroupTitle[0];
+      if (groupTitleElem) {
+        this.groupTitleHeight = groupTitleElem.offsetHeight;
+      }
+    },
+    _calcCharHeight: function _calcCharHeight() {
+      var charElem = this.$refs.indexbarChar && this.$refs.indexbarChar[0];
+      if (charElem) {
+        this.anchorHeight = charElem.offsetHeight;
+      }
+    },
+    _setChar: function _setChar(index) {
+      if (typeof index === "number" && !isNaN(index) && this.curIndexList[index]) {
+        this.char = this.curIndexList[index].title;
+      }
+    },
+    _scrollTo: function _scrollTo(index) {
+      if (_Object$is(index, null) || _Object$is(index, NaN)) {
+        return;
+      }
+      if (index < 0) {
+        index = 0;
+      }
+      if (index > this.heightList.length - 2) {
+        index = this.heightList.length - 2;
+      }
+      this.scrollY = -this.heightList[index];
+      this.indexScroll.scrollToElement(this.$refs.indexbarGroup[index], 0);
+    },
+    _restoreHome: function _restoreHome() {
+      var _this5 = this;
+      this.onBackHome();
+      this.$nextTick(function() {
+        _this5._calcGroupHeight();
+        _this5._calcGroupTitleHeight();
+        _this5._calcCharHeight();
+        _this5.indexScroll && _this5.indexScroll.scrollTo(0, 0);
+        _this5._scrollTo(0);
+      });
+    },
+    _chartipHide: throttle2(function() {
+      this.isTouching = false;
+    }, 500)
+  },
+  created: function created() {
+    this.touch = {};
+    this.heightList = [];
+  },
+  watch: {
+    isVisible: {
+      handler: function handler(value) {
+        var _this6 = this;
+        if (value) {
+          if (!this.data || !this.data.length) {
+            return;
+          }
+          this.$nextTick(function() {
+            _this6._restoreHome();
+          });
+        }
+      },
+      immediate: true
+    },
+    scrollY: function scrollY(newY) {
+      var heightList = this.heightList;
+      if (newY > 0) {
+        newY = 0;
+        this.currentIndex = 0;
+        return;
+      }
+      for (var i = 0; i < heightList.length - 1; i++) {
+        var heightTop = heightList[i];
+        var heightBottom = heightList[i + 1];
+        if (-newY >= heightTop && -newY < heightBottom) {
+          this.currentIndex = i;
+          this.diff = heightBottom + newY;
+          return;
+        }
+      }
+      this.currentIndex = heightList.length - 2;
+    },
+    diff: function diff(newVal) {
+      var fixedTop = newVal > 0 && newVal < this.groupTitleHeight ? newVal - this.groupTitleHeight : 0;
+      if (this.fixedTop === fixedTop) {
+        return;
+      }
+      this.fixedTop = fixedTop;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("transition", {
+    attrs: {
+      "name": "act-indexbar-fade"
+    }
+  }, [_c("act-popup", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isVisible && _vm.data && _vm.data.length,
+      expression: "isVisible && data && data.length"
+    }],
+    attrs: {
+      "type": "indexbar-popup",
+      "mask": true,
+      "center": false,
+      "zIndex": _vm.zIndex
+    },
+    on: {
+      "touchmove": function touchmove($event) {
+        $event.preventDefault();
+      },
+      "mask-click": _vm.onCancel
+    }
+  }, [_c("transition", {
+    attrs: {
+      "name": "act-indexbar-move"
+    }
+  }, [_c("div", {
+    staticClass: "act-indexbar"
+  }, [_c("div", {
+    staticClass: "act-indexbar-header"
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.activeSearch,
+      expression: "!activeSearch"
+    }],
+    staticClass: "act-indexbar-close"
+  }, [_c("i", {
+    staticClass: "act-indexbar-icon-close",
+    on: {
+      "click": _vm.onCancel
+    }
+  })]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.activeSearch,
+      expression: "activeSearch"
+    }],
+    staticClass: "act-indexbar-back"
+  }, [_c("i", {
+    staticClass: "act-indexbar-icon-back",
+    on: {
+      "click": _vm.onBackHome
+    }
+  })]), _vm.isSearch ? _c("div", {
+    staticClass: "act-indexbar-search"
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.activeSearch,
+      expression: "!activeSearch"
+    }],
+    staticClass: "act-indexbar-search-virtual",
+    on: {
+      "click": _vm.onClickSearch
+    }
+  }, [_c("i", {
+    staticClass: "act-indexbar-icon-sch"
+  }), _c("div", {
+    staticClass: "act-indexbar-search-vessel"
+  }, [_vm._v(" " + _vm._s(_vm.searchPlaceholder) + " ")])]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.activeSearch,
+      expression: "activeSearch"
+    }],
+    staticClass: "act-indexbar-search-actual"
+  }, [_c("i", {
+    staticClass: "act-indexbar-icon-sch"
+  }), _c("form", {
+    staticClass: "act-indexbar-search-from",
+    attrs: {
+      "action": "javascript:;"
+    }
+  }, [_c("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.searchValue,
+      expression: "searchValue"
+    }],
+    ref: "searchInput",
+    attrs: {
+      "type": "search",
+      "placeholder": _vm.searchPlaceholder,
+      "maxlength": "20"
+    },
+    domProps: {
+      "value": _vm.searchValue
+    },
+    on: {
+      "input": [function($event) {
+        if ($event.target.composing) return;
+        _vm.searchValue = $event.target.value;
+      }, _vm.onSearchInput]
+    }
+  })]), _c("i", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.searchClean,
+      expression: "searchClean"
+    }],
+    staticClass: "act-indexbar-icon-clean",
+    on: {
+      "click": _vm.onSearchClear
+    }
+  })])]) : _vm._e()]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.activeSearch,
+      expression: "!activeSearch"
+    }],
+    staticClass: "act-indexbar-content"
+  }, [_vm.isTabs ? _c("div", {
+    staticClass: "act-indexbar-table-group border-top-1px"
+  }, _vm._l(_vm.indexList, function(tab, index) {
+    return _c("div", {
+      key: index,
+      staticClass: "act-indexbar-table-button",
+      style: _vm.tabIndex === index ? _vm.activeTabStyle : {},
+      on: {
+        "click": function click($event) {
+          return _vm.onClickTab(index);
+        }
+      }
+    }, [_c("span", [_vm._v(" " + _vm._s(tab.title) + " ")])]);
+  }), 0) : _vm._e(), _c("div", {
+    staticClass: "act-indexbar-scroll"
+  }, [_c("scroll", {
+    attrs: {
+      "probeType": 3,
+      "listenScroll": true,
+      "listenScrollInit": true
+    },
+    on: {
+      "scrollSuc": _vm.onScrollInit,
+      "scroll": _vm.onScroll
+    }
+  }, [_c("ul", _vm._l(_vm.curIndexList, function(group, index) {
+    return _c("li", {
+      key: index,
+      ref: "indexbarGroup",
+      refInFor: true,
+      staticClass: "act-indexbar-group"
+    }, [_c("div", {
+      ref: "indexbarGroupTitle",
+      refInFor: true,
+      staticClass: "act-indexbar-group-title border-bottom-1px border-top-1px"
+    }, [_vm._v(" " + _vm._s(group.title) + " ")]), _c("ul", {
+      class: {
+        "act-indexbar-group-horizontal": _vm.isHot && index === 0
+      }
+    }, _vm._l(group.items, function(item, i) {
+      return _c("li", {
+        key: i,
+        class: {
+          "act-indexbar-group-item": true,
+          "act-indexbar-group-notimg": !item.img
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.onClickItem(item);
+          }
+        }
+      }, [item.img ? _c("img", {
+        staticClass: "act-indexbar-group-img",
+        attrs: {
+          "src": item.img,
+          "alt": ""
+        }
+      }) : _vm._e(), _c("span", {
+        staticClass: "act-indexbar-group-text"
+      }, [_vm._v(_vm._s(item.text))])]);
+    }), 0)]);
+  }), 0)]), _c("div", {
+    ref: "indexbarShortcut",
+    staticClass: "act-indexbar-shortcut",
+    on: {
+      "touchstart": _vm.onShortcutTouchStart,
+      "touchmove": _vm.onShortcutTouchMove,
+      "touchend": _vm.onShortcutTouchEnd
+    }
+  }, [_c("ul", _vm._l(_vm.shortcutList, function(item, index) {
+    return _c("li", {
+      key: index,
+      ref: "indexbarChar",
+      refInFor: true,
+      staticClass: "act-indexbar-shortcut-item",
+      style: _vm.currentIndex === index ? {
+        color: _vm.brandColor
+      } : {},
+      attrs: {
+        "data-index": index
+      }
+    }, [_vm._v(" " + _vm._s(item) + " ")]);
+  }), 0)]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.fixedTitle,
+      expression: "fixedTitle"
+    }],
+    ref: "fixed",
+    staticClass: "act-indexbar-fixed-title"
+  }, [_c("div", {
+    staticClass: "act-indexbar-group-title"
+  }, [_vm._v(" " + _vm._s(_vm.fixedTitle) + " ")])]), _c("transition", {
+    attrs: {
+      "name": "act-indexbar-fade"
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isTouching,
+      expression: "isTouching"
+    }],
+    staticClass: "act-indexbar-chartip"
+  }, [_c("span", [_vm._v(" " + _vm._s(_vm.char) + " ")])])])], 1)]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.activeSearch,
+      expression: "activeSearch"
+    }],
+    staticClass: "act-indexbar-content"
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.noSearchResult,
+      expression: "!noSearchResult"
+    }],
+    staticClass: "act-indexbar-scroll"
+  }, [_c("scroll", {
+    attrs: {
+      "listenScroll": true,
+      "listenScrollInit": true
+    },
+    on: {
+      "scrollSuc": _vm.onSearchScrollInit
+    }
+  }, [_c("ul", {
+    staticClass: "act-indexbar-search-result"
+  }, _vm._l(_vm.searchResult, function(item, index) {
+    return _c("li", {
+      key: index,
+      on: {
+        "click": function click($event) {
+          return _vm.onClickItem(item);
+        }
+      }
+    }, [item.img ? _c("img", {
+      staticClass: "act-indexbar-group-img",
+      attrs: {
+        "src": item.img,
+        "alt": ""
+      }
+    }) : _vm._e(), _c("span", {
+      staticClass: "act-indexbar-group-text"
+    }, [_vm._v(" " + _vm._s(item.text) + " ")])]);
+  }), 0)])], 1), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.noSearchResult,
+      expression: "noSearchResult"
+    }],
+    staticClass: "act-indexbar-nosearch"
+  }, [_vm._v(" 暂未找到搜索的内容 ~ ")])])])])], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "ff0dd90f");
+var indexBar = __component__.exports;
+indexBar.install = function(Vue) {
+  Vue.component(indexBar.name, indexBar);
+  Vue.prototype["$createIndexBar"] = create(indexBar, Vue);
+};
+export {
+  indexBar as i
+};

package/lib/IndexBar/style.css

@@ -0,0 +1 @@
+.act-indexbar-fade-enter[data-v-ff0dd90f],.act-indexbar-fade-leave-active[data-v-ff0dd90f]{opacity:0}.act-indexbar-fade-enter-active[data-v-ff0dd90f],.act-indexbar-fade-leave-active[data-v-ff0dd90f]{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.act-indexbar-move-enter[data-v-ff0dd90f],.act-indexbar-move-leave-active[data-v-ff0dd90f]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.act-indexbar-move-enter-active[data-v-ff0dd90f],.act-indexbar-move-leave-active[data-v-ff0dd90f]{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.act-indexbar-popup[data-v-ff0dd90f] .act-popup-content{bottom:0}.act-indexbar[data-v-ff0dd90f]{position:fixed;left:0;right:0;bottom:0;top:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden;background-color:#fff}.act-indexbar-header[data-v-ff0dd90f]{-webkit-flex-shrink:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:10px 0}.act-indexbar-header .act-indexbar-back[data-v-ff0dd90f]{-webkit-flex-shrink:0;flex-shrink:0;padding:10px 5px 10px 20px;width:43px;height:38px}.act-indexbar-header .act-indexbar-back .act-indexbar-icon-back[data-v-ff0dd90f]{display:block;height:20px;width:13.6px;left:0;background-size:contain;background-repeat:no-repeat;background-image:url(../assets/back.de77.png)}.act-indexbar-header .act-indexbar-close[data-v-ff0dd90f]{-webkit-flex-shrink:0;flex-shrink:0;padding:10px 5px 10px 20px;width:43px;height:38px}.act-indexbar-header .act-indexbar-close .act-indexbar-icon-close[data-v-ff0dd90f]{display:block;height:18px;width:18px;left:0;background-size:contain;background-repeat:no-repeat;background-image:url(../assets/cancel.cbdb.png)}.act-indexbar-header .act-indexbar-search[data-v-ff0dd90f]{-webkit-box-flex:1;-webkit-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 10px}.act-indexbar-header .act-indexbar-search .act-indexbar-search-virtual[data-v-ff0dd90f],.act-indexbar-header .act-indexbar-search .act-indexbar-search-actual[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;width:100%;height:36px;background:#f9f9f9;border-radius:6px;font-size:14px}.act-indexbar-header .act-indexbar-search .act-indexbar-search-virtual[data-v-ff0dd90f]{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#777}.act-indexbar-header .act-indexbar-search .act-indexbar-search-virtual .act-indexbar-search-vessel[data-v-ff0dd90f]{padding-left:5px}.act-indexbar-header .act-indexbar-search .act-indexbar-search-actual[data-v-ff0dd90f]{padding-left:16px;color:#333}.act-indexbar-header .act-indexbar-search .act-indexbar-icon-sch[data-v-ff0dd90f],.act-indexbar-header .act-indexbar-search .act-indexbar-icon-clean[data-v-ff0dd90f]{-webkit-flex-shrink:0;flex-shrink:0;width:16px;height:16px;background-repeat:no-repeat;background-size:contain}.act-indexbar-header .act-indexbar-search .act-indexbar-icon-sch[data-v-ff0dd90f]{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEJElEQVRYR8WXbWibVRTH/+d5mqYqa/pBYwWrTk0b7r1YCHHghvrBtyqydaDCBHGIL4j4gogvDCeoTKqI1JehIPjC8EPRuYHsxS8FZcVhEUvvfdqlLfk0h7oPczMmjUmOXHlSH9Mkz5NB6fMpyf2fe37POfeec0JY54fW2T8iAxhjuonoNgDbmHkLM19BRN3M/AcRzQM4EovFvh4cHJzr5KVCAZiZPM+7H8DrzHxVu82JiAEccF33pXQ6fSIKSFuA+fn5DZVKZR+ArVE2q2uIqMTMjymlPg+zawmwtLSUKBaL3wG4LrgJEZ0F8C2AHDOfI6J+Zr4BwPXAfyn1o7FLSvlG26g1W5yYmHCllN8w80h9nZnPENGr8Xh8byqVWm608zwvVavV9gC4J7DGRHSflPLLVhBNI2CMeYqZxwNGOcdx7hZCLISF1PO8x2u12nsAXF97NhaLXTM0NHS6me0qgIWFhd7l5eVFAJf4Bqer1eqm4eHhfJjz+rox5jlmfitwJt6VUj4dCWBubu7RarX6UUC8Uyn1WVTndZ3W+hiAzfY7M//V19d38cDAQLFxn1UR0FofAnCnFRJRXghxLRHVOgUwxoww8+FAFEallAfbAtg7b4z5E8CFVug4zjtCiGc7dW7109PTsZ6ent8BJPyXGZdSPtMWIJ/P9xcKhVMB6oeklJ+cD4C10VofB7DJtz+olBptC5DL5a4ul8tLYWGLCmSMOcTM/6YTwFGl1Mq1XvER3GxxcTFZKpV+Dfz2iFLq46gOG3Va6x8BZP0U7JNSPhDlENpKt8EX7lVKPXE+APl8vqdQKNi7f5FvP6aUejEUwBizn5m3+9Qni8Xixmw2+3enEJ7nba/VavsDdiNKqaOhAFrrBwF8GjgHT0op3+8EgJkdY8xPAIZ9O9uyk1LKcijA1NTUBb29vTkAl/vic47jbBZC6KgQWmvbgFbC7TjOa0KI3c3sW/WCncy8cv2I6KTruqPpdHq6HYQ/O7wCYLf97Gt/i8fjqVQqZc/WqqdlO9ZafwFgR8Ci5DjOeKlUejuTydgC879Ha22npD1EdFN9gZkrRHS7UmqyFXhLAJuKRCJxmJlvbjCuAPiBiE7YeQBAPwA7D1zZxMkRpVS9DjRlaDsR2TmQmT8A8HDU/Dfqurq67k2n053NA42beJ53KzOPMXMmBMRe1wMAbMmN+doz1Wo106qdhw6lQYezs7NZItoGYAuAAQDdAOykZKfi74noKyHEKa318wDGAlf5eLFYvLFZPekIIGoa/K5qW/EdAZs3lVIvhNaBqE7CdDMzM0nXdX8GcJnV2pmCme9qrIZrEoE6nDHmFma2E7TjQ/wCYGOwIq4pgHVqjLF/aHb5UFwuly8N1pE1B5icnOxKJpN2xtxKRB8KIV4Opm/NAcLOyroD/ANzvJgwJQ4FXAAAAABJRU5ErkJggg==)}.act-indexbar-header .act-indexbar-search .act-indexbar-icon-clean[data-v-ff0dd90f]{margin-right:10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABnElEQVRYR+1WQU7DMBDcDQE1D0j+ELvHfqAf4MIBJI4I1CL4DAgEAnEGFfUL+UCOcT7RD0SCZtFWSVVFje04h3JIrvF4xrOeXSMc+MMD88MgYHDgfzuQJIkfRdGMiEhK+YqIvzapSdP0OAiCGSKu4zhm3LoNp3VAKXVHRI8VeFkUxcVkMvnRiVBKnQDAgohOeR0izli8k4Asy24B4GkHrBXRJK9wN+Px+M1JAJcgDMNPADgzidhHjohfQohL5xIwKRH5SimtCFfyTYlsLpVORBAEvMe25lXdjSevea0E6JxARL++cF3JrR2o1bY4sTXRpuZNx60dMIlwIe/sAANaosa/rPpELwc05PW+nUVYl6AtanwvbPqEUyOqQbqcc5RNfUIXdaMDTE5ECwDY9PZ9UbNpVk4O8FQbjUbfOnJDOpar1ep8Op22TlHTNLwnooe2kzdPtc8JRJxLKV+cHMjzfF6W5XOXDtcU4XnetRDi3UkAER3leX5VPUg+dFNtl6B6yDBuLaVkXOkkwGZQ9V1jTEFfAhN+EDA4cHAH/gAUICIw875HXQAAAABJRU5ErkJggg==)}.act-indexbar-header .act-indexbar-search .act-indexbar-search-from[data-v-ff0dd90f]{height:100%;width:100%;margin-left:12px}.act-indexbar-header .act-indexbar-search .act-indexbar-search-from>input[data-v-ff0dd90f]{height:100%;width:100%;color:#333;-webkit-appearance:none;-moz-appearance:none;font-family:inherit;appearance:none;border:none;background:none;color:inherit;font-size:100%;font-family:inherit}.act-indexbar-header .act-indexbar-search .act-indexbar-search-from>input[data-v-ff0dd90f]::-webkit-search-decoration,.act-indexbar-header .act-indexbar-search .act-indexbar-search-from>input[data-v-ff0dd90f]::-webkit-search-cancel-button{display:none}.act-indexbar-nosearch[data-v-ff0dd90f]{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#999;font-size:14px;text-align:center;padding:30px 0}.act-indexbar-content[data-v-ff0dd90f]{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden}.act-indexbar-table-group[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 15px;-webkit-flex-shrink:0;flex-shrink:0}.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]{-webkit-box-flex:1;-webkit-flex:1;flex:1;line-height:1;border:1px solid #dcdfe6;background-color:#fff;white-space:nowrap;text-align:center;padding:11px 20px;font-size:14px;border-radius:6px}.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]:not(:last-child){margin-right:-1px}.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]:not(:first-child):not(:last-child){border-radius:0}.act-indexbar-table-group .act-indexbar-table-button+.act-indexbar-table-group .act-indexbar-table-button[data-v-ff0dd90f]{margin-left:0}.act-indexbar-table-group .act-indexbar-table-button.active[data-v-ff0dd90f]{background-color:#8c7fee;border-color:#8c7fee;color:#fff}.act-indexbar-table-group .act-indexbar-table-button.active[data-v-ff0dd90f]:first-child{border-right-color:rgba(255,255,255,0.5)}.act-indexbar-scroll[data-v-ff0dd90f]{position:relative;height:100%;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;flex:1}.act-indexbar-scroll .act-indexbar-group[data-v-ff0dd90f]{padding-bottom:2px}.act-indexbar-scroll .act-indexbar-group>ul[data-v-ff0dd90f]{padding:0 15px}.act-indexbar-scroll .act-indexbar-group-title[data-v-ff0dd90f]{margin:0;height:30px;padding-left:20px;background-color:#f9f9f9;color:#999;line-height:30px;font-size:12px;font-weight:bold}.act-indexbar-scroll .act-indexbar-group-item[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:10px 0;border-bottom:1px solid #f5f5f5}.act-indexbar-scroll .act-indexbar-group-item[data-v-ff0dd90f]:last-child{border:none}.act-indexbar-scroll .act-indexbar-group-item>.act-indexbar-group-img[data-v-ff0dd90f]{width:40px;height:40px;border-radius:6px;margin-right:15px}.act-indexbar-scroll .act-indexbar-group-item>.act-indexbar-group-text[data-v-ff0dd90f]{font-size:14px}.act-indexbar-scroll .act-indexbar-shortcut[data-v-ff0dd90f]{z-index:1;position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);padding:20px 0;border-radius:10px;text-align:center}.act-indexbar-scroll .act-indexbar-shortcut-item[data-v-ff0dd90f]{font-size:12px;color:#999999;list-style:none;height:20px;width:27px;padding-right:5px;line-height:22px}.act-indexbar-scroll .act-indexbar-fixed-title[data-v-ff0dd90f]{position:absolute;top:0;left:0;width:100%}.act-indexbar-scroll .act-indexbar-group-horizontal[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding:10px!important}.act-indexbar-scroll .act-indexbar-group-horizontal .act-indexbar-group-item[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;padding:10px 0;border:none;width:84px;color:#333;font-size:14px}.act-indexbar-scroll .act-indexbar-group-horizontal .act-indexbar-group-item>.act-indexbar-group-img[data-v-ff0dd90f]{width:55px;height:55px;margin-right:0}.act-indexbar-scroll .act-indexbar-group-horizontal .act-indexbar-group-item>.act-indexbar-group-text[data-v-ff0dd90f]{margin-left:0;margin-top:8px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.act-indexbar-scroll .act-indexbar-group-horizontal .act-indexbar-group-notimg[data-v-ff0dd90f]{width:104px;padding:5px 0;margin-right:10px}.act-indexbar-scroll .act-indexbar-group-horizontal .act-indexbar-group-notimg>.act-indexbar-group-text[data-v-ff0dd90f]{margin-top:0;border:1px solid #dcdfe6;background-color:#fff;font-size:14px;padding:8px;border-radius:4px}.act-indexbar-scroll .act-indexbar-chartip[data-v-ff0dd90f]{position:absolute;width:50px;height:50px;line-height:50px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;background-color:rgba(0,0,0,0.5);border-radius:6px;color:#fff;font-size:22px;text-align:center;pointer-events:none}.act-indexbar-scroll .act-indexbar-chartip>span[data-v-ff0dd90f]{display:inline-block;max-width:30px;overflow:hidden}.act-indexbar-scroll .act-indexbar-search-result[data-v-ff0dd90f]{padding:0 15px}.act-indexbar-scroll .act-indexbar-search-result>li[data-v-ff0dd90f]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:10px 0;border-bottom:1px solid #f5f5f5}.act-indexbar-scroll .act-indexbar-search-result>li[data-v-ff0dd90f]:last-child{border:none}.act-indexbar-scroll .act-indexbar-search-result>li>.act-indexbar-group-img[data-v-ff0dd90f]{width:40px;height:40px;border-radius:6px;margin-right:15px}.act-indexbar-scroll .act-indexbar-search-result>li>.act-indexbar-group-text[data-v-ff0dd90f]{font-size:14px}

package/lib/IndexList/index.js

@@ -0,0 +1 @@
+"use strict";require('./style.css');var _mapInstanceProperty=require("@babel/runtime-corejs3/core-js/instance/map");var utils_create=require("../utils/create/index.js");var mixins_visible=require("../mixins/visible/index.js");var common=require("../common/index.js");var INDICATOR_INDURATION=1e3;var TITLE_HEIGHT=30;var _sfc_main={name:"ActIndexList",mixins:[mixins_visible.visibleMixin],props:{zIndex:{type:Number,default:200},brandColor:{type:String,default:"#8c7fee"},listData:{type:Array,default:function _default(){return[]}}},data:function data(){return{currentIndex:0,moving:false,currentIndicator:""}},watch:{isVisible:function isVisible(value){var _this=this;if(value){this.$nextTick(function(){_this._calculateHeight()})}},currentIndex:function currentIndex(newVal){var _this2=this;clearTimeout(this.timer);this.currentIndicator=this.indexList[this.currentIndex];this.moving=true;this.timer=setTimeout(function(){_this2.moving=false},INDICATOR_INDURATION)}},computed:{indexList:function indexList(){var _context;return _mapInstanceProperty(_context=this.listData).call(_context,function(group){return group.title.substring(0,1)})}},created:function created(){this.listHeight=[];this.timer=null;this.scrollTimer=null},methods:{_calculateHeight:function _calculateHeight(){this.listHeight=[];var list=this.$refs.indexGroup;var height=0;this.listHeight.push(height);if(list.length){for(var i=0;i<list.length;i++){var item=list[i];height+=item.clientHeight;this.listHeight.push(height)}}},_onTouchStartIndex:function _onTouchStartIndex(index){this.currentIndex=index;this.$refs.indexWrap.scrollTop=this.listHeight[index]},_onTouchMoveIndex:function _onTouchMoveIndex(e){var touch=e.targetTouches[0];var ele=document.elementFromPoint(touch.pageX,touch.pageY);var index=ele.dataset&&ele.dataset.index||void 0;if(index){this.currentIndex=index;this.$refs.indexWrap.scrollTop=this.listHeight[index]}},clickItem:function clickItem(item){this.$emit("choose",item);this.hide()},onListWrapScroll:function onListWrapScroll(e){var _this3=this;clearTimeout(this.scrollTimer);this.scrollTimer=setTimeout(function(){var scrollTop=_this3.$refs.indexWrap.scrollTop;var listHeight=_this3.listHeight;for(var i=0;i<listHeight.length-1;i++){if(scrollTop<=listHeight[i+1]-TITLE_HEIGHT&&scrollTop>=listHeight[i]){_this3.currentIndex=i;return}}},20)}},destroyed:function destroyed(){clearTimeout(this.timer);clearTimeout(this.scrollTimer)}};var _sfc_render=function render(){var _vm=this,_c=_vm._self._c;return _c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.isVisible,expression:"isVisible"}],staticClass:"index-list",style:"z-index: ".concat(_vm.zIndex)},[_c("ul",{ref:"indexWrap",staticClass:"index-list-wrap",on:{"scroll":function scroll($event){$event.preventDefault();return _vm.onListWrapScroll.apply(null,arguments)}}},_vm._l(_vm.listData,function(group,index){return _c("li",{key:index,ref:"indexGroup",refInFor:true,staticClass:"index-group"},[_c("h3",{staticClass:"index-group-title"},[_vm._v(" "+_vm._s(group.title)+" ")]),_c("ul",_vm._l(group.items,function(item,idx){return _c("li",{key:idx,staticClass:"index-group-item",on:{"click":function click($event){return _vm.clickItem(item)}}},[_c("img",{directives:[{name:"show",rawName:"v-show",value:item.avatar,expression:"item.avatar"}],staticClass:"avatar",attrs:{"src":item.avatar,"alt":""}}),_c("span",{staticClass:"name"},[_vm._v(" "+_vm._s(item.name)+" ")])])}),0)])}),0),_c("div",{staticClass:"index-nav",style:"z-index: ".concat(_vm.zIndex+1)},[_c("ul",_vm._l(_vm.indexList,function(item,index){return _c("li",{key:index,staticClass:"nav-item",class:{"active":_vm.currentIndex===index},style:"background: ".concat(_vm.currentIndex===index?_vm.brandColor:""),attrs:{"data-index":index},on:{"touchmove":function touchmove($event){$event.preventDefault();return _vm._onTouchMoveIndex.apply(null,arguments)},"touchstart":function touchstart($event){$event.preventDefault();return _vm._onTouchStartIndex(index)}}},[_vm._v(" "+_vm._s(item)+" ")])}),0)]),_c("transition",{attrs:{"name":"fade"}},[_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.moving,expression:"moving"}],staticClass:"index-indicator"},[_vm._v(" "+_vm._s(_vm.currentIndicator)+" ")])])],1)};var _sfc_staticRenderFns=[];var __component__=common.normalizeComponent(_sfc_main,_sfc_render,_sfc_staticRenderFns,false,null,"288c532c");var IndexList=__component__.exports;IndexList.install=function(Vue){Vue.component(IndexList.name,IndexList);Vue.prototype["$createIndexList"]=utils_create.create(IndexList,Vue)};exports.IndexList=IndexList;