kh-one-ui 2.0.0

package/packages/timeline/index.js

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

package/packages/timeline/src/item.vue

@@ -0,0 +1,73 @@
+<template>
+  <li class="el-timeline-item">
+    <div class="el-timeline-item__tail"></div>
+
+    <div v-if="!$slots.dot"
+      class="el-timeline-item__node"
+      :class="[
+        `el-timeline-item__node--${size || ''}`,
+        `el-timeline-item__node--${type || ''}`
+      ]"
+      :style="{
+        backgroundColor: color
+      }"
+    >
+      <i v-if="icon"
+        class="el-timeline-item__icon"
+        :class="icon"
+      ></i>
+    </div>
+    <div v-if="$slots.dot" class="el-timeline-item__dot">
+      <slot name="dot"></slot>
+    </div>
+
+    <div class="el-timeline-item__wrapper">
+      <div v-if="!hideTimestamp && placement === 'top'"
+        class="el-timeline-item__timestamp is-top">
+        {{timestamp}}
+      </div>
+
+      <div class="el-timeline-item__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="!hideTimestamp && placement === 'bottom'"
+        class="el-timeline-item__timestamp is-bottom">
+        {{timestamp}}
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+  export default {
+    name: 'ElTimelineItem',
+
+    inject: ['timeline'],
+
+    props: {
+      timestamp: String,
+
+      hideTimestamp: {
+        type: Boolean,
+        default: false
+      },
+
+      placement: {
+        type: String,
+        default: 'bottom'
+      },
+
+      type: String,
+
+      color: String,
+
+      size: {
+        type: String,
+        default: 'normal'
+      },
+
+      icon: String
+    }
+  };
+</script>

package/packages/timeline/src/main.vue

@@ -0,0 +1,33 @@
+<script>
+  export default {
+    name: 'ElTimeline',
+
+    props: {
+      reverse: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    provide() {
+      return {
+        timeline: this
+      };
+    },
+
+    render() {
+      const reverse = this.reverse;
+      const classes = {
+        'el-timeline': true,
+        'is-reverse': reverse
+      };
+      let slots = this.$slots.default || [];
+      if (reverse) {
+        slots = slots.reverse();
+      }
+      return (<ul class={ classes }>
+        { slots }
+      </ul>);
+    }
+  };
+</script>

package/packages/timeline-item/index.js

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

package/packages/tooltip/index.js

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

package/packages/tooltip/src/main.js

@@ -0,0 +1,241 @@
+import Popper from 'one-ui/src/utils/vue-popper';
+import debounce from 'throttle-debounce/debounce';
+import { addClass, removeClass, on, off } from 'one-ui/src/utils/dom';
+import { generateId } from 'one-ui/src/utils/util';
+import Vue from 'vue';
+
+export default {
+  name: 'ElTooltip',
+
+  mixins: [Popper],
+
+  props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    disabled: Boolean,
+    manual: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    popperClass: String,
+    content: String,
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'el-fade-in-linear'
+    },
+    popperOptions: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        };
+      }
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      tooltipId: `el-tooltip-${generateId()}`,
+      timeoutPending: null,
+      focusing: false
+    };
+  },
+  beforeCreate() {
+    if (this.$isServer) return;
+
+    this.popperVM = new Vue({
+      data: { node: '' },
+      render(h) {
+        return this.node;
+      }
+    }).$mount();
+
+    this.debounceClose = debounce(200, () => this.handleClosePopper());
+  },
+
+  render(h) {
+    if (this.popperVM) {
+      this.popperVM.node = (
+        <transition
+          name={ this.transition }
+          onAfterLeave={ this.doDestroy }>
+          <div
+            onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
+            onMouseenter= { () => { this.setExpectedState(true); } }
+            ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
+            v-show={!this.disabled && this.showPopper}
+            class={
+              ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
+            }>
+            { this.$slots.content || this.content }
+          </div>
+        </transition>);
+    }
+
+    const firstElement = this.getFirstElement();
+    if (!firstElement) return null;
+
+    const data = firstElement.data = firstElement.data || {};
+    data.staticClass = this.addTooltipClass(data.staticClass);
+
+    return firstElement;
+  },
+
+  mounted() {
+    this.referenceElm = this.$el;
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId);
+      this.$el.setAttribute('tabindex', this.tabindex);
+      on(this.referenceElm, 'mouseenter', this.show);
+      on(this.referenceElm, 'mouseleave', this.hide);
+      on(this.referenceElm, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus();
+          return;
+        }
+        const instance = this.$slots.default[0].componentInstance;
+        if (instance && instance.focus) {
+          instance.focus();
+        } else {
+          this.handleFocus();
+        }
+      });
+      on(this.referenceElm, 'blur', this.handleBlur);
+      on(this.referenceElm, 'click', this.removeFocusing);
+    }
+    // fix issue https://github.com/ElemeFE/element/issues/14424
+    if (this.value && this.popperVM) {
+      this.popperVM.$nextTick(() => {
+        if (this.value) {
+          this.updatePopper();
+        }
+      });
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        addClass(this.referenceElm, 'focusing');
+      } else {
+        removeClass(this.referenceElm, 'focusing');
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.setExpectedState(true);
+      this.handleShowPopper();
+    },
+
+    hide() {
+      this.setExpectedState(false);
+      this.debounceClose();
+    },
+    handleFocus() {
+      this.focusing = true;
+      this.show();
+    },
+    handleBlur() {
+      this.focusing = false;
+      this.hide();
+    },
+    removeFocusing() {
+      this.focusing = false;
+    },
+
+    addTooltipClass(prev) {
+      if (!prev) {
+        return 'el-tooltip';
+      } else {
+        return 'el-tooltip ' + prev.replace('el-tooltip', '');
+      }
+    },
+
+    handleShowPopper() {
+      if (!this.expectedState || this.manual) return;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.showPopper = true;
+      }, this.openDelay);
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false;
+        }, this.hideAfter);
+      }
+    },
+
+    handleClosePopper() {
+      if (this.enterable && this.expectedState || this.manual) return;
+      clearTimeout(this.timeout);
+
+      if (this.timeoutPending) {
+        clearTimeout(this.timeoutPending);
+      }
+      this.showPopper = false;
+
+      if (this.disabled) {
+        this.doDestroy();
+      }
+    },
+
+    setExpectedState(expectedState) {
+      if (expectedState === false) {
+        clearTimeout(this.timeoutPending);
+      }
+      this.expectedState = expectedState;
+    },
+
+    getFirstElement() {
+      const slots = this.$slots.default;
+      if (!Array.isArray(slots)) return null;
+      let element = null;
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index];
+        };
+      }
+      return element;
+    }
+  },
+
+  beforeDestroy() {
+    this.popperVM && this.popperVM.$destroy();
+  },
+
+  destroyed() {
+    const reference = this.referenceElm;
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show);
+      off(reference, 'mouseleave', this.hide);
+      off(reference, 'focus', this.handleFocus);
+      off(reference, 'blur', this.handleBlur);
+      off(reference, 'click', this.removeFocusing);
+    }
+  }
+};

package/packages/transfer/index.js

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

package/packages/transfer/src/main.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="el-transfer">
+    <transfer-panel
+      v-bind="$props"
+      ref="leftPanel"
+      :data="sourceData"
+      :title="titles[0] || t('el.transfer.titles.0')"
+      :default-checked="leftDefaultChecked"
+      :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
+      @checked-change="onSourceCheckedChange">
+      <slot name="left-footer"></slot>
+    </transfer-panel>
+    <div class="el-transfer__buttons">
+      <el-button
+        type="primary"
+        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
+        @click.native="addToLeft"
+        :disabled="rightChecked.length === 0">
+        <i class="el-icon-arrow-left"></i>
+        <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
+      </el-button>
+      <el-button
+        type="primary"
+        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
+        @click.native="addToRight"
+        :disabled="leftChecked.length === 0">
+        <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
+        <i class="el-icon-arrow-right"></i>
+      </el-button>
+    </div>
+    <transfer-panel
+      v-bind="$props"
+      ref="rightPanel"
+      :data="targetData"
+      :title="titles[1] || t('el.transfer.titles.1')"
+      :default-checked="rightDefaultChecked"
+      :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
+      @checked-change="onTargetCheckedChange">
+      <slot name="right-footer"></slot>
+    </transfer-panel>
+  </div>
+</template>
+
+<script>
+  import ElButton from 'one-ui/packages/button';
+  import Emitter from 'one-ui/src/mixins/emitter';
+  import Locale from 'one-ui/src/mixins/locale';
+  import TransferPanel from './transfer-panel.vue';
+  import Migrating from 'one-ui/src/mixins/migrating';
+
+  export default {
+    name: 'ElTransfer',
+
+    mixins: [Emitter, Locale, Migrating],
+
+    components: {
+      TransferPanel,
+      ElButton
+    },
+
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      titles: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      buttonTexts: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      filterPlaceholder: {
+        type: String,
+        default: ''
+      },
+      filterMethod: Function,
+      leftDefaultChecked: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      rightDefaultChecked: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      renderContent: Function,
+      value: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      format: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      filterable: Boolean,
+      props: {
+        type: Object,
+        default() {
+          return {
+            label: 'label',
+            key: 'key',
+            disabled: 'disabled'
+          };
+        }
+      },
+      targetOrder: {
+        type: String,
+        default: 'original'
+      }
+    },
+
+    data() {
+      return {
+        leftChecked: [],
+        rightChecked: []
+      };
+    },
+
+    computed: {
+      dataObj() {
+        const key = this.props.key;
+        return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
+      },
+  
+      sourceData() {
+        return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
+      },
+
+      targetData() {
+        if (this.targetOrder === 'original') {
+          return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
+        } else {
+          return this.value.reduce((arr, cur) => {
+            const val = this.dataObj[cur];
+            if (val) {
+              arr.push(val);
+            }
+            return arr;
+          }, []);
+        }
+      },
+
+      hasButtonTexts() {
+        return this.buttonTexts.length === 2;
+      }
+    },
+
+    watch: {
+      value(val) {
+        this.dispatch('ElFormItem', 'el.form.change', val);
+      }
+    },
+
+    methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'footer-format': 'footer-format is renamed to format.'
+          }
+        };
+      },
+
+      onSourceCheckedChange(val, movedKeys) {
+        this.leftChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('left-check-change', val, movedKeys);
+      },
+
+      onTargetCheckedChange(val, movedKeys) {
+        this.rightChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('right-check-change', val, movedKeys);
+      },
+
+      addToLeft() {
+        let currentValue = this.value.slice();
+        this.rightChecked.forEach(item => {
+          const index = currentValue.indexOf(item);
+          if (index > -1) {
+            currentValue.splice(index, 1);
+          }
+        });
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue, 'left', this.rightChecked);
+      },
+
+      addToRight() {
+        let currentValue = this.value.slice();
+        const itemsToBeMoved = [];
+        const key = this.props.key;
+        this.data.forEach(item => {
+          const itemKey = item[key];
+          if (
+            this.leftChecked.indexOf(itemKey) > -1 &&
+            this.value.indexOf(itemKey) === -1
+          ) {
+            itemsToBeMoved.push(itemKey);
+          }
+        });
+        currentValue = this.targetOrder === 'unshift'
+          ? itemsToBeMoved.concat(currentValue)
+          : currentValue.concat(itemsToBeMoved);
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue, 'right', this.leftChecked);
+      },
+
+      clearQuery(which) {
+        if (which === 'left') {
+          this.$refs.leftPanel.query = '';
+        } else if (which === 'right') {
+          this.$refs.rightPanel.query = '';
+        }
+      }
+    }
+  };
+</script>