kh-one-ui 2.0.0

package/src/locale/lang/zh-TW.js

@@ -0,0 +1,120 @@
+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: 'Sum' // to be translated
+    },
+    tree: {
+      emptyText: '暫無資料'
+    },
+    transfer: {
+      noMatch: '無匹配資料',
+      noData: '無資料',
+      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: '加載失敗'
+    },
+    pageHeader: {
+      title: '返回'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};

package/src/mixins/emitter.js

@@ -0,0 +1,33 @@
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    var name = child.$options.componentName;
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]));
+    }
+  });
+}
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root;
+      var name = parent.$options.componentName;
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params);
+    }
+  }
+};

package/src/mixins/focus.js

@@ -0,0 +1,9 @@
+export default function(ref) {
+  return {
+    methods: {
+      focus() {
+        this.$refs[ref].focus();
+      }
+    }
+  };
+};

package/src/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from 'one-ui/src/locale';
+
+export default {
+  methods: {
+    t(...args) {
+      return t.apply(this, args);
+    }
+  }
+};

package/src/mixins/migrating.js

@@ -0,0 +1,54 @@
+import { kebabCase } from 'one-ui/src/utils/util';
+/**
+ * Show migrating guide in browser console.
+ *
+ * Usage:
+ * import Migrating from 'one-ui/src/mixins/migrating';
+ *
+ * mixins: [Migrating]
+ *
+ * add getMigratingConfig method for your component.
+ *  getMigratingConfig() {
+ *    return {
+ *      props: {
+ *        'allow-no-selection': 'allow-no-selection is removed.',
+ *        'selection-mode': 'selection-mode is removed.'
+ *      },
+ *      events: {
+ *        selectionchange: 'selectionchange is renamed to selection-change.'
+ *      }
+ *    };
+ *  },
+ */
+export default {
+  mounted() {
+    if (process.env.NODE_ENV === 'production') return;
+    if (!this.$vnode) return;
+    const { props = {}, events = {} } = this.getMigratingConfig();
+    const { data, componentOptions } = this.$vnode;
+    const definedProps = data.attrs || {};
+    const definedEvents = componentOptions.listeners || {};
+
+    for (let propName in definedProps) {
+      propName = kebabCase(propName); // compatible with camel case
+      if (props[propName]) {
+        console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);
+      }
+    }
+
+    for (let eventName in definedEvents) {
+      eventName = kebabCase(eventName); // compatible with camel case
+      if (events[eventName]) {
+        console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);
+      }
+    }
+  },
+  methods: {
+    getMigratingConfig() {
+      return {
+        props: {},
+        events: {}
+      };
+    }
+  }
+};

package/src/transitions/collapse-transition.js

@@ -0,0 +1,77 @@
+import { addClass, removeClass } from 'one-ui/src/utils/dom';
+
+class Transition {
+  beforeEnter(el) {
+    addClass(el, 'collapse-transition');
+    if (!el.dataset) el.dataset = {};
+
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+    el.style.height = '0';
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  }
+
+  enter(el) {
+    el.dataset.oldOverflow = el.style.overflow;
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    } else {
+      el.style.height = '';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+
+    el.style.overflow = 'hidden';
+  }
+
+  afterEnter(el) {
+    // for safari: remove class then reset height is necessary
+    removeClass(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  }
+
+  beforeLeave(el) {
+    if (!el.dataset) el.dataset = {};
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+
+    el.style.height = el.scrollHeight + 'px';
+    el.style.overflow = 'hidden';
+  }
+
+  leave(el) {
+    if (el.scrollHeight !== 0) {
+      // for safari: add class after set height, or it will jump to zero height suddenly, weired
+      addClass(el, 'collapse-transition');
+      el.style.height = 0;
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
+    }
+  }
+
+  afterLeave(el) {
+    removeClass(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  }
+}
+
+export default {
+  name: 'ElCollapseTransition',
+  functional: true,
+  render(h, { children }) {
+    const data = {
+      on: new Transition()
+    };
+
+    return h('transition', data, children);
+  }
+};

package/src/utils/after-leave.js

@@ -0,0 +1,27 @@
+/**
+ * Bind after-leave event for vue instance. Make sure after-leave is called in any browsers.
+ *
+ * @param {Vue} instance Vue instance.
+ * @param {Function} callback callback of after-leave event
+ * @param {Number} speed the speed of transition, default value is 300ms
+ * @param {Boolean} once weather bind after-leave once. default value is false.
+ */
+export default function(instance, callback, speed = 300, once = false) {
+  if (!instance || !callback) throw new Error('instance & callback is required');
+  let called = false;
+  const afterLeaveCallback = function() {
+    if (called) return;
+    called = true;
+    if (callback) {
+      callback.apply(null, arguments);
+    }
+  };
+  if (once) {
+    instance.$once('after-leave', afterLeaveCallback);
+  } else {
+    instance.$on('after-leave', afterLeaveCallback);
+  }
+  setTimeout(() => {
+    afterLeaveCallback();
+  }, speed + 100);
+};

package/src/utils/aria-dialog.js

@@ -0,0 +1,90 @@
+import Utils from './aria-utils';
+
+/**
+ * @constructor
+ * @desc Dialog object providing modal focus management.
+ *
+ * Assumptions: The element serving as the dialog container is present in the
+ * DOM and hidden. The dialog container has role='dialog'.
+ *
+ * @param dialogId
+ *          The ID of the element serving as the dialog container.
+ * @param focusAfterClosed
+ *          Either the DOM node or the ID of the DOM node to focus when the
+ *          dialog closes.
+ * @param focusFirst
+ *          Optional parameter containing either the DOM node or the ID of the
+ *          DOM node to focus when the dialog opens. If not specified, the
+ *          first focusable element in the dialog will receive focus.
+ */
+var aria = aria || {};
+var tabEvent;
+
+aria.Dialog = function(dialog, focusAfterClosed, focusFirst) {
+  this.dialogNode = dialog;
+  if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') {
+    throw new Error('Dialog() requires a DOM element with ARIA role of dialog.');
+  }
+
+  if (typeof focusAfterClosed === 'string') {
+    this.focusAfterClosed = document.getElementById(focusAfterClosed);
+  } else if (typeof focusAfterClosed === 'object') {
+    this.focusAfterClosed = focusAfterClosed;
+  } else {
+    this.focusAfterClosed = null;
+  }
+
+  if (typeof focusFirst === 'string') {
+    this.focusFirst = document.getElementById(focusFirst);
+  } else if (typeof focusFirst === 'object') {
+    this.focusFirst = focusFirst;
+  } else {
+    this.focusFirst = null;
+  }
+
+  if (this.focusFirst) {
+    this.focusFirst.focus();
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+  }
+
+  this.lastFocus = document.activeElement;
+  tabEvent = (e) => {
+    this.trapFocus(e);
+  };
+  this.addListeners();
+};
+
+aria.Dialog.prototype.addListeners = function() {
+  document.addEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.removeListeners = function() {
+  document.removeEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.closeDialog = function() {
+  this.removeListeners();
+  if (this.focusAfterClosed) {
+    setTimeout(() => {
+      this.focusAfterClosed.focus();
+    });
+  }
+};
+
+aria.Dialog.prototype.trapFocus = function(event) {
+  if (Utils.IgnoreUtilFocusChanges) {
+    return;
+  }
+  if (this.dialogNode.contains(event.target)) {
+    this.lastFocus = event.target;
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+    if (this.lastFocus === document.activeElement) {
+      Utils.focusLastDescendant(this.dialogNode);
+    }
+    this.lastFocus = document.activeElement;
+  }
+};
+
+export default aria.Dialog;

package/src/utils/aria-utils.js

@@ -0,0 +1,122 @@
+var aria = aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @desc Set focus on descendant nodes until the first focusable element is
+ *       found.
+ * @param element
+ *          DOM node for which to find the first focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+aria.Utils.focusFirstDescendant = function(element) {
+  for (var i = 0; i < element.childNodes.length; i++) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Find the last descendant node that is focusable.
+ * @param element
+ *          DOM node for which to find the last focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+
+aria.Utils.focusLastDescendant = function(element) {
+  for (var i = element.childNodes.length - 1; i >= 0; i--) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Set Attempt to set focus on the current node.
+ * @param element
+ *          The node to attempt to focus on.
+ * @returns
+ *  true if element is focused.
+ */
+aria.Utils.attemptFocus = function(element) {
+  if (!aria.Utils.isFocusable(element)) {
+    return false;
+  }
+  aria.Utils.IgnoreUtilFocusChanges = true;
+  try {
+    element.focus();
+  } catch (e) {
+  }
+  aria.Utils.IgnoreUtilFocusChanges = false;
+  return (document.activeElement === element);
+};
+
+aria.Utils.isFocusable = function(element) {
+  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
+    return true;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden' && element.type !== 'file';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * 触发一个事件
+ * mouseenter, mouseleave, mouseover, keyup, change, click 等
+ * @param  {Element} elm
+ * @param  {String} name
+ * @param  {*} opts
+ */
+aria.Utils.triggerEvent = function(elm, name, ...opts) {
+  let eventName;
+
+  if (/^mouse|click/.test(name)) {
+    eventName = 'MouseEvents';
+  } else if (/^key/.test(name)) {
+    eventName = 'KeyboardEvent';
+  } else {
+    eventName = 'HTMLEvents';
+  }
+  const evt = document.createEvent(eventName);
+
+  evt.initEvent(name, ...opts);
+  elm.dispatchEvent
+    ? elm.dispatchEvent(evt)
+    : elm.fireEvent('on' + name, evt);
+
+  return elm;
+};
+
+aria.Utils.keys = {
+  tab: 9,
+  enter: 13,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  esc: 27
+};
+
+export default aria.Utils;

package/src/utils/clickoutside.js

@@ -0,0 +1,76 @@
+import Vue from 'vue';
+import { on } from 'one-ui/src/utils/dom';
+
+const nodeList = [];
+const ctx = '@@clickoutsideContext';
+
+let startClick;
+let seed = 0;
+
+!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
+
+!Vue.prototype.$isServer && on(document, 'mouseup', e => {
+  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
+});
+
+function createDocumentHandler(el, binding, vnode) {
+  return function(mouseup = {}, mousedown = {}) {
+    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">
+ * ```
+ */
+export default {
+  bind(el, binding, vnode) {
+    nodeList.push(el);
+    const id = seed++;
+    el[ctx] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+
+  update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+
+  unbind(el) {
+    let len = nodeList.length;
+
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};