umy-ui-table 1.2.0

package/packages/table/src/util.js

@@ -0,0 +1,256 @@
+import { getValueByPath } from '../../tools/utils/util';
+
+export const getCell = function(event) {
+  let cell = event.target;
+
+  while (cell && cell.tagName.toUpperCase() !== 'HTML') {
+    if (cell.tagName.toUpperCase() === 'TD') {
+      return cell;
+    }
+    cell = cell.parentNode;
+  }
+
+  return null;
+};
+
+const isObject = function(obj) {
+  return obj !== null && typeof obj === 'object';
+};
+
+export const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) {
+  if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) {
+    return array;
+  }
+  if (typeof reverse === 'string') {
+    reverse = reverse === 'descending' ? -1 : 1;
+  } else {
+    reverse = (reverse && reverse < 0) ? -1 : 1;
+  }
+  const getKey = sortMethod ? null : function(value, index) {
+    if (sortBy) {
+      if (!Array.isArray(sortBy)) {
+        sortBy = [sortBy];
+      }
+      return sortBy.map(function(by) {
+        if (typeof by === 'string') {
+          return getValueByPath(value, by);
+        } else {
+          return by(value, index, array);
+        }
+      });
+    }
+    if (sortKey !== '$key') {
+      if (isObject(value) && '$value' in value) value = value.$value;
+    }
+    return [isObject(value) ? getValueByPath(value, sortKey) : value];
+  };
+  const compare = function(a, b) {
+    if (sortMethod) {
+      return sortMethod(a.value, b.value);
+    }
+    for (let i = 0, len = a.key.length; i < len; i++) {
+      if (a.key[i] < b.key[i]) {
+        return -1;
+      }
+      if (a.key[i] > b.key[i]) {
+        return 1;
+      }
+    }
+    return 0;
+  };
+  return array.map(function(value, index) {
+    return {
+      value: value,
+      index: index,
+      key: getKey ? getKey(value, index) : null
+    };
+  }).sort(function(a, b) {
+    let order = compare(a, b);
+    if (!order) {
+      // make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability
+      order = a.index - b.index;
+    }
+    return order * reverse;
+  }).map(item => item.value);
+};
+
+export const getColumnById = function(table, columnId) {
+  let column = null;
+  table.columns.forEach(function(item) {
+    if (item.id === columnId) {
+      column = item;
+    }
+  });
+  return column;
+};
+
+export const getColumnByKey = function(table, columnKey) {
+  let column = null;
+  for (let i = 0; i < table.columns.length; i++) {
+    const item = table.columns[i];
+    if (item.columnKey === columnKey) {
+      column = item;
+      break;
+    }
+  }
+  return column;
+};
+
+export const getColumnByCell = function(table, cell) {
+  const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
+  if (matches) {
+    return getColumnById(table, matches[0]);
+  }
+  return null;
+};
+
+export const getRowIdentity = (row, rowKey) => {
+  if (!row) throw new Error('row is required when get row identity');
+  if (typeof rowKey === 'string') {
+    if (rowKey.indexOf('.') < 0) {
+      return row[rowKey];
+    }
+    let key = rowKey.split('.');
+    let current = row;
+    for (let i = 0; i < key.length; i++) {
+      current = current[key[i]];
+    }
+    return current;
+  } else if (typeof rowKey === 'function') {
+    return rowKey.call(null, row);
+  }
+};
+
+export const getKeysMap = function(array, rowKey) {
+  const arrayMap = {};
+  (array || []).forEach((row, index) => {
+    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+  });
+  return arrayMap;
+};
+
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export function mergeOptions(defaults, config) {
+  const options = {};
+  let key;
+  for (key in defaults) {
+    options[key] = defaults[key];
+  }
+  for (key in config) {
+    if (hasOwn(config, key)) {
+      const value = config[key];
+      if (typeof value !== 'undefined') {
+        options[key] = value;
+      }
+    }
+  }
+  return options;
+}
+
+export function parseWidth(width) {
+  if (width !== undefined) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+}
+
+export function parseMinWidth(minWidth) {
+  if (typeof minWidth !== 'undefined') {
+    minWidth = parseWidth(minWidth);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+
+export function parseHeight(height) {
+  if (typeof height === 'number') {
+    return height;
+  }
+  if (typeof height === 'string') {
+    if (/^\d+(?:px)?$/.test(height)) {
+      return parseInt(height, 10);
+    } else {
+      return height;
+    }
+  }
+  return null;
+}
+
+// https://github.com/reduxjs/redux/blob/master/src/compose.js
+export function compose(...funcs) {
+  if (funcs.length === 0) {
+    return arg => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+export function toggleRowStatus(statusArr, row, newVal) {
+  let changed = false;
+  const index = statusArr.indexOf(row);
+  const included = index !== -1;
+
+  const addRow = () => {
+      statusArr.push(row);
+      changed = true;
+  };
+
+  const removeRow = () => {
+      statusArr.splice(index, 1);
+      changed = true;
+  };
+
+  if (typeof newVal === 'boolean') {
+    if (newVal && !included) {
+      addRow();
+    } else if (!newVal && included) {
+      removeRow();
+    }
+  } else {
+    if (included) {
+      removeRow();
+    } else {
+      addRow();
+    }
+  }
+  return changed;
+}
+
+export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
+  const isNil = (array) => !(Array.isArray(array) && array.length);
+
+  function _walker(parent, children, level) {
+    cb(parent, children, level);
+    children.forEach(item => {
+      if (item[lazyKey]) {
+        cb(item, null, level + 1);
+        return;
+      }
+      const children = item[childrenKey];
+      if (!isNil(children)) {
+        _walker(item, children, level + 1);
+      }
+    });
+  }
+
+  root.forEach(item => {
+    if (item[lazyKey]) {
+      cb(item, null, 0);
+      return;
+    }
+    const children = item[childrenKey];
+    if (!isNil(children)) {
+      _walker(item, children, 0);
+    }
+  });
+}

package/packages/tag/index.js

@@ -0,0 +1,8 @@
+import ElTag from './src/tag';
+
+/* istanbul ignore next */
+ElTag.install = function(Vue) {
+  Vue.component(ElTag.name, ElTag);
+};
+
+export default ElTag;

package/packages/tag/src/tag.vue

@@ -0,0 +1,58 @@
+<script>
+  export default {
+    name: 'ElTag',
+    props: {
+      text: String,
+      closable: Boolean,
+      type: String,
+      hit: Boolean,
+      disableTransitions: Boolean,
+      color: String,
+      size: String,
+      effect: {
+        type: String,
+        default: 'light',
+        validator(val) {
+          return ['dark', 'light', 'plain'].indexOf(val) !== -1;
+        }
+      }
+    },
+    methods: {
+      handleClose(event) {
+        event.stopPropagation();
+        this.$emit('close', event);
+      },
+      handleClick(event) {
+        this.$emit('click', event);
+      }
+    },
+    computed: {
+      tagSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      }
+    },
+    render(h) {
+      const { type, tagSize, hit, effect } = this;
+      const classes = [
+        'el-tag',
+        type ? `el-tag--${type}` : '',
+        tagSize ? `el-tag--${tagSize}` : '',
+        effect ? `el-tag--${effect}` : '',
+        hit && 'is-hit'
+      ];
+      const tagEl = (
+        <span
+          class={ classes }
+          style={{ backgroundColor: this.color }}
+          on-click={ this.handleClick }>
+          { this.$slots.default }
+          {
+            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      );
+
+      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
+    }
+  };
+</script>

package/packages/tools/directives/mousewheel.js

@@ -0,0 +1,18 @@
+import normalizeWheel from 'normalize-wheel';
+
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+const mousewheel = function(element, callback) {
+  if (element && element.addEventListener) {
+    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {
+      const normalized = normalizeWheel(event);
+      callback && callback.apply(this, [event, normalized]);
+    });
+  }
+};
+
+export default {
+  bind(el, binding) {
+    mousewheel(el, binding.value);
+  }
+};

package/packages/tools/directives/repeat-click.js

@@ -0,0 +1,24 @@
+import { once, on } from '../utils/dom';
+
+export default {
+  bind(el, binding, vnode) {
+    let interval = null;
+    let startTime;
+    const handler = () => vnode.context[binding.expression].apply();
+    const clear = () => {
+      if (Date.now() - startTime < 100) {
+        handler();
+      }
+      clearInterval(interval);
+      interval = null;
+    };
+
+    on(el, 'mousedown', (e) => {
+      if (e.button !== 0) return;
+      startTime = Date.now();
+      once(document, 'mouseup', clear);
+      clearInterval(interval);
+      interval = setInterval(handler, 100);
+    });
+  }
+};

package/packages/tools/locale/format.js

@@ -0,0 +1,46 @@
+import { hasOwn } from '../utils/util';
+
+const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+/**
+ *  String format template
+ *  - Inspired:
+ *    https://github.com/Matt-Esch/string-template/index.js
+ */
+export default function(Vue) {
+
+  /**
+   * template
+   *
+   * @param {String} string
+   * @param {Array} ...args
+   * @return {String}
+   */
+
+  function template(string, ...args) {
+    if (args.length === 1 && typeof args[0] === 'object') {
+      args = args[0];
+    }
+
+    if (!args || !args.hasOwnProperty) {
+      args = {};
+    }
+
+    return string.replace(RE_NARGS, (match, prefix, i, index) => {
+      let result;
+
+      if (string[index - 1] === '{' &&
+        string[index + match.length] === '}') {
+        return i;
+      } else {
+        result = hasOwn(args, i) ? args[i] : null;
+        if (result === null || result === undefined) {
+          return '';
+        }
+
+        return result;
+      }
+    });
+  }
+
+  return template;
+}

package/packages/tools/locale/index.js

@@ -0,0 +1,48 @@
+import defaultLang from './lang/zh-CN';
+import Vue from 'vue';
+import deepmerge from 'deepmerge';
+import Format from './format';
+
+const format = Format(Vue);
+let lang = defaultLang;
+let merged = false;
+let i18nHandler = function() {
+  const vuei18n = Object.getPrototypeOf(this || Vue).$t;
+  if (typeof vuei18n === 'function' && !!Vue.locale) {
+    if (!merged) {
+      merged = true;
+      Vue.locale(
+        Vue.config.lang,
+        deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
+      );
+    }
+    return vuei18n.apply(this, arguments);
+  }
+};
+
+export const t = function(path, options) {
+  let value = i18nHandler.apply(this, arguments);
+  if (value !== null && value !== undefined) return value;
+  const array = path.split('.');
+  let current = lang;
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i];
+    value = current[property];
+    if (i === j - 1) {
+      return format(value, options)
+    }
+    if (!value) return '';
+    current = value;
+  }
+  return '';
+};
+
+export const use = function(l) {
+  lang = l || lang;
+};
+
+export const i18n = function(fn) {
+  i18nHandler = fn || i18nHandler;
+};
+
+export default { use, t, i18n };

package/packages/tools/locale/lang/en.js

@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Clear'
+    },
+    datepicker: {
+      now: 'Now',
+      today: 'Today',
+      cancel: 'Cancel',
+      clear: 'Clear',
+      confirm: 'OK',
+      selectDate: 'Select date',
+      selectTime: 'Select time',
+      startDate: 'Start Date',
+      startTime: 'Start Time',
+      endDate: 'End Date',
+      endTime: 'End Time',
+      prevYear: 'Previous Year',
+      nextYear: 'Next Year',
+      prevMonth: 'Previous Month',
+      nextMonth: 'Next Month',
+      year: '',
+      month1: 'January',
+      month2: 'February',
+      month3: 'March',
+      month4: 'April',
+      month5: 'May',
+      month6: 'June',
+      month7: 'July',
+      month8: 'August',
+      month9: 'September',
+      month10: 'October',
+      month11: 'November',
+      month12: 'December',
+      week: 'week',
+      weeks: {
+        sun: 'Sun',
+        mon: 'Mon',
+        tue: 'Tue',
+        wed: 'Wed',
+        thu: 'Thu',
+        fri: 'Fri',
+        sat: 'Sat'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'May',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Loading',
+      noMatch: 'No matching data',
+      noData: 'No data',
+      placeholder: 'Select'
+    },
+    cascader: {
+      noMatch: 'No matching data',
+      loading: 'Loading',
+      placeholder: 'Select',
+      noData: 'No data'
+    },
+    pagination: {
+      goto: 'Go to',
+      pagesize: '/page',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Message',
+      confirm: 'OK',
+      cancel: 'Cancel',
+      error: 'Illegal input'
+    },
+    upload: {
+      deleteTip: 'press delete to remove',
+      delete: 'Delete',
+      preview: 'Preview',
+      continue: 'Continue'
+    },
+    table: {
+      emptyText: 'No Data',
+      confirmFilter: 'Confirm',
+      resetFilter: 'Reset',
+      clearFilter: 'All',
+      sumText: 'Sum'
+    },
+    tree: {
+      emptyText: 'No Data'
+    },
+    transfer: {
+      noMatch: 'No matching data',
+      noData: 'No data',
+      titles: ['List 1', 'List 2'], // to be translated
+      filterPlaceholder: 'Enter keyword', // to be translated
+      noCheckedFormat: '{total} items', // to be translated
+      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED'
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No'
+    }
+  }
+};

package/packages/tools/locale/lang/zh-CN.js

@@ -0,0 +1,116 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: '确定',
+      clear: '清空'
+    },
+    datepicker: {
+      now: '此刻',
+      today: '今天',
+      cancel: '取消',
+      clear: '清空',
+      confirm: '确定',
+      selectDate: '选择日期',
+      selectTime: '选择时间',
+      startDate: '开始日期',
+      startTime: '开始时间',
+      endDate: '结束日期',
+      endTime: '结束时间',
+      prevYear: '前一年',
+      nextYear: '后一年',
+      prevMonth: '上个月',
+      nextMonth: '下个月',
+      year: '年',
+      month1: '1 月',
+      month2: '2 月',
+      month3: '3 月',
+      month4: '4 月',
+      month5: '5 月',
+      month6: '6 月',
+      month7: '7 月',
+      month8: '8 月',
+      month9: '9 月',
+      month10: '10 月',
+      month11: '11 月',
+      month12: '12 月',
+      // week: '周次',
+      weeks: {
+        sun: '日',
+        mon: '一',
+        tue: '二',
+        wed: '三',
+        thu: '四',
+        fri: '五',
+        sat: '六'
+      },
+      months: {
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
+      }
+    },
+    select: {
+      loading: '加载中',
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      placeholder: '请选择'
+    },
+    cascader: {
+      noMatch: '无匹配数据',
+      loading: '加载中',
+      placeholder: '请选择',
+      noData: '暂无数据'
+    },
+    pagination: {
+      goto: '前往',
+      pagesize: '条/页',
+      total: '共 {total} 条',
+      pageClassifier: '页'
+    },
+    messagebox: {
+      title: '提示',
+      confirm: '确定',
+      cancel: '取消',
+      error: '输入的数据不合法!'
+    },
+    upload: {
+      deleteTip: '按 delete 键可删除',
+      delete: '删除',
+      preview: '查看图片',
+      continue: '继续上传'
+    },
+    table: {
+      emptyText: '暂无数据',
+      confirmFilter: '筛选',
+      resetFilter: '重置',
+      clearFilter: '全部',
+      sumText: '合计'
+    },
+    tree: {
+      emptyText: '暂无数据'
+    },
+    transfer: {
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      titles: ['列表 1', '列表 2'],
+      filterPlaceholder: '请输入搜索内容',
+      noCheckedFormat: '共 {total} 项',
+      hasCheckedFormat: '已选 {checked}/{total} 项'
+    },
+    image: {
+      error: '加载失败'
+    },
+    pageHeader: {
+      title: '返回'
+    }
+  }
+};