@mdsfe/mds-ui 0.2.0

package/dist/_mixin/tooltip.js

@@ -0,0 +1,218 @@
+'use strict';
+
+exports.__esModule = true;
+exports.MdsTooltipContent = undefined;
+
+var _from = require('babel-runtime/core-js/array/from');
+
+var _from2 = _interopRequireDefault(_from);
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+var _popper = require('./popper');
+
+var _popper2 = _interopRequireDefault(_popper);
+
+var _transition = require('../transition');
+
+var _transition2 = _interopRequireDefault(_transition);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MdsTooltipContent = exports.MdsTooltipContent = {
+  functional: true,
+  render: function render(h, context) {
+    var data = context.data;
+    return h('div', {
+      'class': ['mds-tooltip-inner']
+    }, data.$slots.title || data.title);
+  }
+};
+
+/**
+ * 统一处理浮层提示功能
+ */
+exports.default = {
+  mixins: [_popper2.default],
+  props: {
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    title: String,
+    disabled: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    mouseEnterDelay: {
+      type: Number,
+      default: 0
+    },
+    mouseLeaveDelay: {
+      type: Number,
+      default: 0.1
+    },
+    className: {
+      type: String
+    },
+    popperOptions: {
+      type: Object,
+      default: function _default() {}
+    }
+  },
+  data: function data() {
+    return {
+      visibleArrow: true
+    };
+  },
+  beforeCreate: function beforeCreate() {
+    this.popperVM = new _vue2.default({
+      components: {
+        MdsTransition: _transition2.default,
+        MdsTooltipContent: MdsTooltipContent
+      },
+      data: {
+        _h: function _h() {},
+        vnode: ''
+      },
+      render: function render(h) {
+        this._h = h;
+        return this.vnode;
+      }
+    }).$mount();
+  },
+  render: function render(h) {
+    if (this.popperVM) {
+      var _h = this.popperVM._h;
+      this.popperVM.vnode = _h('mds-transition', {
+        props: {
+          type: 'zoom',
+          motion: 'big-fast'
+        }
+      }, [_h('div', {
+        'class': this.popperCls,
+        directives: [{
+          name: 'show',
+          value: !this.disabled && this.visible,
+          expression: 'show'
+        }],
+        ref: 'popper'
+      }, [_h('div', {
+        'class': [this.prefixCls + '-content', this.effect === 'light' ? 'mds-tooltip-light' : '']
+      }, [h('mds-tooltip-content', this)])])]);
+    }
+    if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
+    return this.$slots.default[0];
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    if (this.$slots.default && this.$slots.default.length > 0) {
+      this.reference = this.$slots.default[0].elm;
+      if (this.trigger === 'click') {
+        this.reference.addEventListener('click', this.toggle);
+        document.addEventListener('click', this.clickDocument);
+      } else if (this.trigger === 'focus') {
+        var flag = false;
+        // 元素中包含input／textarea优先使用focus和blur事件，其他使用mouse事件
+        if (this.reference.nodeName === 'INPUT' || this.reference.nodeName === 'TEXTAREA') {
+          this.reference.addEventListener('focus', this.showPopper);
+          this.reference.addEventListener('blur', this.closePopper);
+          flag = true;
+        } else if (this.reference.children.length > 0) {
+          flag = (0, _from2.default)(this.reference.children).some(function (node) {
+            if (node.nodeName === 'INPUT' || node.nodeName === 'TEXTAREA') {
+              node.addEventListener('focus', _this.showPopper);
+              node.addEventListener('blur', _this.closePopper);
+              return true;
+            }
+            return false;
+          });
+        }
+        if (!flag) {
+          this.reference.addEventListener('mousedown', this.showPopper);
+          this.reference.addEventListener('mouseup', this.closePopper);
+          // 处理鼠标一直按下直到移出点击区域时浮层没关闭的情况
+          this.reference.addEventListener('blur', this.closePopper);
+        }
+      } else {
+        this.reference.addEventListener('mouseenter', this.showPopper);
+        this.reference.addEventListener('mouseleave', this.closePopper);
+      }
+      this.$nextTick(function () {
+        _this.$nextTick(function () {
+          _this.popper = _this.popperVM.$el || _this.$refs.popper || _this.popper;
+          if (_this.popper && _this.trigger === 'hover') {
+            _this.popper.addEventListener('mouseenter', function () {
+              clearTimeout(_this.timeout);
+            });
+            _this.popper.addEventListener('mouseleave', _this.closePopper);
+          }
+        });
+      });
+    }
+    if (this.$attrs.value) {
+      this.showPopper();
+    }
+  },
+
+  components: {
+    MdsTransition: _transition2.default
+  },
+  computed: {
+    popperCls: function popperCls() {
+      return [this.prefixCls].concat(this.placementCls).concat(this.className);
+    },
+    currentMouseEnterDelay: function currentMouseEnterDelay() {
+      return this.mouseEnterDelay * 1000;
+    },
+    currentMouseLeaveDelay: function currentMouseLeaveDelay() {
+      return this.mouseLeaveDelay * 1000;
+    }
+  },
+  destroyed: function destroyed() {
+    document.removeEventListener('click', this.clickDocument);
+  },
+
+  methods: {
+    toggle: function toggle() {
+      return this.visible ? this.closePopper() : this.showPopper();
+    },
+    showPopper: function showPopper() {
+      var _this2 = this;
+
+      if (this.visible) return;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(function () {
+        _this2.visible = true;
+        _this2.$emit('onVisibleChange', _this2.visible);
+      }, this.currentMouseEnterDelay);
+    },
+    closePopper: function closePopper() {
+      var _this3 = this;
+
+      if (!this.visible) return;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(function () {
+        _this3.visible = false;
+        _this3.$emit('onVisibleChange', _this3.visible);
+      }, this.currentMouseLeaveDelay);
+    },
+
+    /**
+     * 点击其他空白位置需要关闭浮层
+     * @param e
+     */
+    clickDocument: function clickDocument(e) {
+      if (!this.visible || !this.$el || !this.reference || !this.popper || this.$el.contains(e.target) || this.reference.contains(e.target) || this.popper.contains(e.target)) return;
+      this.closePopper();
+    }
+  }
+};

package/dist/_util/__test__/switchcase.test.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var _switchcase = require('../switchcase.js');
+
+describe('Util Switchcase', function () {
+  var rateMap = function rateMap(rate) {
+    return (0, _switchcase.switchcase)({
+      '1': 'Bad',
+      '2': 'Normal',
+      '3': 'Good'
+    })('No Info')(rate);
+  };
+
+  var rateFunctionMap = function rateFunctionMap(rate) {
+    return (0, _switchcase.switchcaseF)({
+      bad: function bad() {
+        return 1;
+      },
+      normal: function normal() {
+        return 2;
+      },
+      good: function good() {
+        return 3;
+      }
+    })('No Info')(rate);
+  };
+
+  it('should return the correct value', function () {
+    expect(rateMap('1')).toBe('Bad');
+  });
+
+  it('should return the default value', function () {
+    expect(rateMap('5')).toBe('No Info');
+  });
+
+  it('should execute the correct function', function () {
+    expect(rateFunctionMap('bad')).toBe(1);
+  });
+
+  it('should execute the correct function', function () {
+    expect(rateFunctionMap('what')).toBe('No Info');
+  });
+});

package/dist/_util/autoprefixer.js

@@ -0,0 +1,249 @@
+'use strict';
+
+exports.__esModule = true;
+exports.isEmpty = exports.isEqual = exports.arrayEquals = exports.looseEqual = exports.capitalize = exports.kebabCase = exports.autoprefixer = exports.isFirefox = exports.isEdge = exports.isIE = exports.coerceTruthyValueToArray = exports.arrayFind = exports.arrayFindIndex = exports.escapeRegexpString = exports.valueEquals = exports.generateId = exports.getValueByPath = undefined;
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+exports.isString = isString;
+exports.isObject = isObject;
+exports.noop = noop;
+exports.hasOwn = hasOwn;
+exports.toObject = toObject;
+exports.getPropByPath = getPropByPath;
+exports.rafThrottle = rafThrottle;
+exports.objToArray = objToArray;
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function isString(obj) {
+  return Object.prototype.toString.call(obj) === '[object String]';
+}
+function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+function noop() {}
+function hasOwn(obj, key) {
+  return hasOwnProperty.call(obj, key);
+}
+function extend(to, _from) {
+  for (var key in _from) {
+    to[key] = _from[key];
+  }
+  return to;
+}
+function toObject(arr) {
+  var res = {};
+  for (var i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      extend(res, arr[i]);
+    }
+  }
+  return res;
+}
+var getValueByPath = exports.getValueByPath = function getValueByPath(object, prop) {
+  prop = prop || '';
+  var paths = prop.split('.');
+  var current = object;
+  var result = null;
+  for (var i = 0, j = paths.length; i < j; i++) {
+    var path = paths[i];
+    if (!current) break;
+    if (i === j - 1) {
+      result = current[path];
+      break;
+    }
+    current = current[path];
+  }
+  return result;
+};
+function getPropByPath(obj, path, strict) {
+  var tempObj = obj;
+  path = path.replace(/\[(\w+)\]/g, '.$1');
+  path = path.replace(/^\./, '');
+  var keyArr = path.split('.');
+  var i = 0;
+  for (var len = keyArr.length; i < len - 1; ++i) {
+    if (!tempObj && !strict) break;
+    var key = keyArr[i];
+    if (key in tempObj) {
+      tempObj = tempObj[key];
+    } else {
+      if (strict) {
+        throw new Error('please transfer a valid prop path to form item!');
+      }
+      break;
+    }
+  }
+  return {
+    o: tempObj,
+    k: keyArr[i],
+    v: tempObj ? tempObj[keyArr[i]] : null
+  };
+}
+var generateId = exports.generateId = function generateId() {
+  return Math.floor(Math.random() * 10000);
+};
+var valueEquals = exports.valueEquals = function valueEquals(a, b) {
+  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+  if (a === b) return true;
+  if (!(a instanceof Array)) return false;
+  if (!(b instanceof Array)) return false;
+  if (a.length !== b.length) return false;
+  for (var i = 0; i !== a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+var escapeRegexpString = exports.escapeRegexpString = function escapeRegexpString() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+};
+// TODO: use native Array.find, Array.findIndex when IE support is dropped
+var arrayFindIndex = exports.arrayFindIndex = function arrayFindIndex(arr, pred) {
+  for (var i = 0; i !== arr.length; ++i) {
+    if (pred(arr[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+var arrayFind = exports.arrayFind = function arrayFind(arr, pred) {
+  var idx = arrayFindIndex(arr, pred);
+  return idx !== -1 ? arr[idx] : undefined;
+};
+// coerce truthy value to array
+var coerceTruthyValueToArray = exports.coerceTruthyValueToArray = function coerceTruthyValueToArray(val) {
+  if (Array.isArray(val)) {
+    return val;
+  } else if (val) {
+    return [val];
+  } else {
+    return [];
+  }
+};
+var isIE = exports.isIE = function isIE() {
+  return !_vue2.default.prototype.$isServer && !isNaN(Number(document.documentMode));
+};
+var isEdge = exports.isEdge = function isEdge() {
+  return !_vue2.default.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1;
+};
+var isFirefox = exports.isFirefox = function isFirefox() {
+  return !_vue2.default.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
+};
+var autoprefixer = exports.autoprefixer = function autoprefixer(style) {
+  if ((typeof style === 'undefined' ? 'undefined' : (0, _typeof3.default)(style)) !== 'object') return style;
+  var rules = ['transform', 'transition', 'animation'];
+  var prefixes = ['ms-', 'webkit-'];
+  rules.forEach(function (rule) {
+    var value = style[rule];
+    if (rule && value) {
+      prefixes.forEach(function (prefix) {
+        style[prefix + rule] = value;
+      });
+    }
+  });
+  return style;
+};
+var kebabCase = exports.kebabCase = function kebabCase(str) {
+  var hyphenateRE = /([^-])([A-Z])/g;
+  return str.replace(hyphenateRE, '$1-$2').replace(hyphenateRE, '$1-$2').toLowerCase();
+};
+var capitalize = exports.capitalize = function capitalize(str) {
+  if (!isString(str)) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var looseEqual = exports.looseEqual = function looseEqual(a, b) {
+  var isObjectA = isObject(a);
+  var isObjectB = isObject(b);
+  if (isObjectA && isObjectB) {
+    return (0, _stringify2.default)(a) === (0, _stringify2.default)(b);
+  } else if (!isObjectA && !isObjectB) {
+    return String(a) === String(b);
+  } else {
+    return false;
+  }
+};
+var arrayEquals = exports.arrayEquals = function arrayEquals(arrayA, arrayB) {
+  arrayA = arrayA || [];
+  arrayB = arrayB || [];
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  for (var i = 0; i < arrayA.length; i++) {
+    if (!looseEqual(arrayA[i], arrayB[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+var isEqual = exports.isEqual = function isEqual(value1, value2) {
+  if (Array.isArray(value1) && Array.isArray(value2)) {
+    return arrayEquals(value1, value2);
+  }
+  return looseEqual(value1, value2);
+};
+var isEmpty = exports.isEmpty = function isEmpty(val) {
+  // null or undefined
+  if (val == null) return true;
+  if (typeof val === 'boolean') return false;
+  if (typeof val === 'number') return !val;
+  if (val instanceof Error) return val.message === '';
+  switch (Object.prototype.toString.call(val)) {
+    // String or Array
+    case '[object String]':
+    case '[object Array]':
+      return !val.length;
+    // Map or Set or File
+    case '[object File]':
+    case '[object Map]':
+    case '[object Set]':
+      {
+        return !val.size;
+      }
+    // Plain Object
+    case '[object Object]':
+      {
+        return !(0, _keys2.default)(val).length;
+      }
+  }
+  return false;
+};
+function rafThrottle(fn) {
+  var locked = false;
+  return function () {
+    var _this = this;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(function (_) {
+      fn.apply(_this, args);
+      locked = false;
+    });
+  };
+}
+function objToArray(obj) {
+  if (Array.isArray(obj)) {
+    return obj;
+  }
+  return isEmpty(obj) ? [] : [obj];
+}

package/dist/_util/clickoutside.js

@@ -0,0 +1,79 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+var _dom = require('./dom.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var nodeList = [];
+var ctx = '@@clickoutsideContext';
+
+var startClick = void 0;
+var seed = 0;
+
+!_vue2.default.prototype.$isServer && (0, _dom.on)(document, 'mousedown', function (e) {
+  return startClick = e;
+});
+
+!_vue2.default.prototype.$isServer && (0, _dom.on)(document, 'mouseup', function (e) {
+  nodeList.forEach(function (node) {
+    return node[ctx].documentHandler(e, startClick);
+  });
+});
+
+function createDocumentHandler(el, binding, vnode) {
+  return function () {
+    var mouseup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var mousedown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target || vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target))) return;
+
+    if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName]();
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
+    }
+  };
+}
+
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+exports.default = {
+  bind: function bind(el, binding, vnode) {
+    nodeList.push(el);
+    var id = seed++;
+    el[ctx] = {
+      id: id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+  update: function update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+  unbind: function unbind(el) {
+    var len = nodeList.length;
+
+    for (var i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};