wot-design/lib/tabs/index.js

Mobile UI components built on vue.js

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 114);
/******/ })
/************************************************************************/
/******/ ({

/***/ 0:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functioal component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}


/***/ }),

/***/ 114:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./src/utils/animateScrollLeft.js
var animateScrollLeft = __webpack_require__(19);

// EXTERNAL MODULE: external "wot-design/lib/mixins/locale"
var locale_ = __webpack_require__(4);
var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);

// EXTERNAL MODULE: ./src/mixins/touch.js
var touch = __webpack_require__(14);

// EXTERNAL MODULE: external "wot-design/lib/sticky"
var sticky_ = __webpack_require__(22);
var sticky_default = /*#__PURE__*/__webpack_require__.n(sticky_);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/tabs/src/main.vue?vue&type=script&lang=js&




/* harmony default export */ var mainvue_type_script_lang_js_ = ({
  name: 'WdTabs',
  mixins: [locale_default.a, touch["a" /* default */]],
  provide: function provide() {
    return {
      tabs: this
    };
  },
  data: function data() {
    return {
      items: [],
      ifAnimate: false,
      lineStyle: {},
      mapShow: false,
      animating: false,
      delta: 0,
      startTime: '',
      endTime: '',
      clientWidth: 0,
      swiping: false
    };
  },
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    slidableNum: {
      type: Number,
      default: 6
    },
    mapNum: {
      type: Number,
      default: 10
    },
    sticky: Boolean,
    animated: Boolean,
    swipeable: Boolean,
    lazyRender: Boolean,
    offsetTop: {
      type: Number,
      default: 0
    }
  },
  components: {
    Sticky: sticky_default.a
  },
  computed: {
    tabLength: function tabLength() {
      return this.items.length;
    },
    activeIndex: function activeIndex() {
      var _this = this;

      var value = 0;

      if (typeof this.value === 'number') {
        value = this.value;
      } else if (this.items.length) {
        var activeItem = this.items.filter(function (item) {
          return item.name === _this.value;
        });
        value = activeItem.length && this.items.indexOf(activeItem[0]);
      }

      return value;
    },
    bodyStyle: function bodyStyle() {
      var delta = this.activeIndex === this.tabLength - 1 && this.delta < 0 || this.activeIndex === 0 && this.delta > 0 ? this.delta / 4 : this.delta;
      return {
        width: this.tabLength * this.clientWidth + 'px',
        transform: "translate3d(".concat(-1 * this.activeIndex * this.clientWidth + delta, "px, 0, 0)"),
        transition: this.animated && this.ifAnimate || this.swipeable && !this.swiping ? 'transform 300ms' : ''
      };
    }
  },
  watch: {
    items: function items() {
      this.lineScrollIntoView();
      this.setLineStyle();
    },
    activeIndex: function activeIndex() {
      this.lineScrollIntoView();
      this.setLineStyle();
    }
  },
  methods: {
    changeTab: function changeTab(index, isClick, diff) {
      if (index < 0 || index >= this.tabLength) return;
      var name = this.items[index].name;

      if (this.items[index].disabled) {
        this.$emit('disabled', index, name); // when swipe to the disabeld item, go to next or last

        if (!isClick && diff) {
          this.changeTab(index + diff, isClick, diff);
        }
      } else {
        if (typeof this.value === 'number') {
          this.$emit('input', index);
        } else {
          this.$emit('input', name);
        }

        this.$emit('change', index, name);
        isClick && this.$emit('click', index, name);
      }
    },
    setLineStyle: function setLineStyle() {
      var _this2 = this;

      var shouldAnimate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.ifAnimate;
      this.$nextTick(function () {
        var left = 0;
        var width = 19;

        if (_this2.$refs["navs_".concat(_this2.activeIndex)]) {
          var _this2$$refs$ = _this2.$refs["navs_".concat(_this2.activeIndex)],
              clientWidth = _this2$$refs$.clientWidth,
              offsetLeft = _this2$$refs$.offsetLeft;

          left = offsetLeft + (clientWidth - width) / 2;
        }

        _this2.lineStyle = {
          width: "".concat(width, "px"),
          transform: "translateX(".concat(left, "px)"),
          transition: shouldAnimate ? 'width 300ms, transform 300ms' : ''
        };
      });
    },
    lineScrollIntoView: function lineScrollIntoView(immediate) {
      var activeNav = this.$refs["navs_".concat(this.activeIndex)];
      if (!activeNav) return;
      var visibleWidth = this.$refs.navVisible.offsetWidth;
      var activeLeft = activeNav.offsetWidth / 2 + activeNav.offsetLeft;
      var nextNavContainerLeft = activeLeft - visibleWidth / 2;
      Object(animateScrollLeft["a" /* default */])(this.$refs.navContainer, nextNavContainerLeft, immediate ? 0 : 300);
    },
    onShow: function onShow() {
      var _this3 = this;

      this.$nextTick(function () {
        _this3.ifAnimate = true;

        _this3.lineScrollIntoView(true);
      });
    },
    toggleMap: function toggleMap() {
      var _this4 = this;

      if (this.mapShow) {
        this.animating = false;
        setTimeout(function () {
          _this4.mapShow = false;
        }, 300);
      } else {
        this.mapShow = true;
        setTimeout(function () {
          _this4.animating = true;
        }, 10);
      }
    },
    getNavDom: function getNavDom() {
      var _this5 = this;

      var h = this.$createElement;
      return this.items.map(function (item, index) {
        var title = item.$slots.title || item.title;
        var key = item.name || index;
        return h("div", {
          "key": key,
          "ref": "navs_".concat(index),
          "class": {
            'wd-tabs__nav-item': true,
            'is-active': _this5.activeIndex === index,
            'is-disabled': item.disabled
          },
          "on": {
            "click": function click() {
              _this5.changeTab(index, true);
            }
          }
        }, [title]);
      });
    },
    getNavMapDom: function getNavMapDom() {
      var _this6 = this;

      var h = this.$createElement;
      return this.items.map(function (item, index) {
        var title = item.$slots.title || item.title;
        var key = item.name || index;
        return h("div", {
          "key": key,
          "class": 'wd-tabs__map-nav-item'
        }, [h("span", {
          "key": key,
          "class": {
            'wd-tabs__map-nav-btn': true,
            'is-active': _this6.activeIndex === index,
            'is-disabled': item.disabled
          },
          "on": {
            "click": function click() {
              _this6.changeTab(index, true);

              !item.disabled && _this6.toggleMap();
            }
          }
        }, [title])]);
      });
    },
    onTouchStart: function onTouchStart(event) {
      if (!this.swipeable) return;
      this.startTime = Date.now();
      this.touchStart(event);
      this.swiping = true;
    },
    onTouchMove: function onTouchMove(event) {
      if (!this.swipeable) return;
      this.touchMove(event);

      if (this.direction === 'horizontal') {
        event.preventDefault();
        this.delta = this.deltaX;
      }
    },
    onTouchEnd: function onTouchEnd(event) {
      if (!this.swipeable) return;
      this.endTime = Date.now();

      if (this.direction === 'horizontal' && this.delta) {
        // judge if should swipe to item
        var isEffectiveSwipe = Math.abs(this.delta) > this.clientWidth / 3 || Math.abs(this.delta) / (this.endTime - this.startTime) > 0.7;
        var diff = this.delta < 0 ? 1 : -1;
        isEffectiveSwipe && this.changeTab(this.activeIndex + diff, false, diff);
      }

      this.swiping = false;
      this.delta = 0;
    }
  },
  mounted: function mounted() {
    // 临时紧急修复问题（tabs在 display: none 的结构中，获取不到宽度的问题），后续再优化 tab 这一块
    this.clientWidth = this.$refs.tabsRef.clientWidth || document.body.clientWidth;

    if (this.swipeable) {
      this.$refs.tabsBody.addEventListener('touchstart', this.onTouchStart);
      this.$refs.tabsBody.addEventListener('touchmove', this.onTouchMove);
      this.$refs.tabsBody.addEventListener('touchend', this.onTouchEnd);
      this.$refs.tabsBody.addEventListener('touchcancel', this.onTouchEnd);
    }

    this.onShow();
  },
  render: function render(h) {
    var Navs = this.getNavDom();
    var NavMap;

    if (this.mapNum < this.items.length && this.mapNum !== 0) {
      var MapNavs = this.getNavMapDom();
      NavMap = h("div", {
        "class": "wd-tabs__map"
      }, [h("span", {
        "class": {
          'wd-tabs__map-btn': true,
          'is-open': this.animating
        },
        "on": {
          "click": this.toggleMap
        }
      }, [h("i", {
        "class": {
          'wd-tabs__map-arrow': true,
          'wd-icon-arrow-down': true,
          'is-open': this.animating
        }
      })]), h("div", {
        "class": "wd-tabs__map-header",
        "style": {
          display: this.mapShow ? '' : 'none',
          opacity: this.animating ? 1 : ''
        }
      }, [this.t('wd.tabs.all')]), h("div", {
        "class": {
          'wd-tabs__map-body': true,
          'is-open': this.animating
        },
        "style": {
          display: this.mapShow ? '' : 'none'
        }
      }, [MapNavs])]);
    }

    var Nav = h("div", {
      "class": "wd-tabs__nav",
      "ref": "navVisible"
    }, [h("div", {
      "class": "wd-tabs__nav-container",
      "ref": "navContainer"
    }, [Navs, h("i", {
      "class": "wd-tabs__line",
      "style": this.lineStyle
    })])]);
    return h("div", {
      "class": {
        'wd-tabs': true,
        'is-slide': this.slidableNum < this.items.length,
        'is-map': this.mapNum < this.items.length && this.mapNum !== 0
      },
      "ref": "tabsRef"
    }, [this.sticky ? h(sticky_default.a, {
      "attrs": {
        "offsetTop": this.offsetTop
      }
    }, [Nav, NavMap]) : Nav, h("div", {
      "class": "wd-tabs__container"
    }, [h("div", {
      "class": "wd-tabs__body",
      "style": this.bodyStyle,
      "ref": "tabsBody"
    }, [this.$slots.default])]), this.sticky ? '' : NavMap, this.mapNum < this.items.length && this.mapNum !== 0 ? h("div", {
      "class": "wd-tabs__mask",
      "style": {
        display: this.mapShow ? '' : 'none',
        opacity: this.animating ? 1 : ''
      },
      "on": {
        "click": this.toggleMap
      }
    }) : '']);
  }
});
// CONCATENATED MODULE: ./packages/tabs/src/main.vue?vue&type=script&lang=js&
 /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);

// CONCATENATED MODULE: ./packages/tabs/src/main.vue
var main_render, staticRenderFns




/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  src_mainvue_type_script_lang_js_,
  main_render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (false) { var api; }
component.options.__file = "packages/tabs/src/main.vue"
/* harmony default export */ var main = (component.exports);
// CONCATENATED MODULE: ./packages/tabs/index.js


main.install = function (Vue) {
  Vue.component(main.name, main);
};

/* harmony default export */ var tabs = __webpack_exports__["default"] = (main);

/***/ }),

/***/ 14:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);

var MIN_DISTANCE = 5;

function getDirection(offsetX, offsetY) {
  if (offsetX > MIN_DISTANCE || offsetY > MIN_DISTANCE) {
    return offsetX > offsetY ? 'horizontal' : 'vertical';
  }

  return '';
}

/* harmony default export */ __webpack_exports__["a"] = (vue__WEBPACK_IMPORTED_MODULE_0___default.a.extend({
  data: function data() {
    return {
      direction: '',
      accurateDirection: '' // 详细方向

    };
  },
  methods: {
    touchStart: function touchStart(event) {
      this.resetTouchStatus();
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
    },
    touchMove: function touchMove(event) {
      var touch = event.touches[0];
      this.deltaX = touch.clientX - this.startX;
      this.deltaY = touch.clientY - this.startY;
      this.offsetX = Math.abs(this.deltaX);
      this.offsetY = Math.abs(this.deltaY);
      this.direction = this.direction || getDirection(this.offsetX, this.offsetY);

      if (this.direction === 'horizontal') {
        this.accurateDirection = this.deltaX > 0 ? 'right' : 'left';
      } else if (this.direction === 'vertical') {
        this.accurateDirection = this.deltaY > 0 ? 'down' : 'up';
      }
    },
    resetTouchStatus: function resetTouchStatus() {
      this.direction = '';
      this.accurateDirection = '';
      this.deltaX = 0;
      this.deltaY = 0;
      this.offsetX = 0;
      this.offsetY = 0;
    }
  }
}));

/***/ }),

/***/ 19:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony default export */ __webpack_exports__["a"] = (function ($el, to, duration) {
  var count = 0;
  var from = $el.scrollLeft;
  var frames = duration === 0 ? 1 : Math.round(duration / 16);

  function animate() {
    $el.scrollLeft += (to - from) / frames;

    if (++count < frames) {
      requestAnimationFrame(animate);
    }
  }

  animate();
});

/***/ }),

/***/ 2:
/***/ (function(module, exports) {

module.exports = require("vue");

/***/ }),

/***/ 22:
/***/ (function(module, exports) {

module.exports = require("wot-design/lib/sticky");

/***/ }),

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("wot-design/lib/mixins/locale");

/***/ })

/******/ });