7moor-element-ui 2.14.63

package/packages/backtop/src/main.vue

@@ -0,0 +1,110 @@
+<template>
+  <transition name="el-fade-in">
+    <div
+      v-if="visible"
+      @click.stop="handleClick"
+      :style="{
+        'right': styleRight,
+        'bottom': styleBottom
+      }"
+      class="el-backtop">
+      <slot>
+        <el-icon name="caret-top"></el-icon>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import throttle from 'throttle-debounce/throttle';
+
+const cubic = value => Math.pow(value, 3);
+const easeInOutCubic = value => value < 0.5
+  ? cubic(value * 2) / 2
+  : 1 - cubic((1 - value) * 2) / 2;
+
+export default {
+  name: 'ElBacktop',
+
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 200
+    },
+    target: [String],
+    right: {
+      type: Number,
+      default: 40
+    },
+    bottom: {
+      type: Number,
+      default: 40
+    }
+  },
+
+  data() {
+    return {
+      el: null,
+      container: null,
+      visible: false
+    };
+  },
+
+  computed: {
+    styleBottom() {
+      return `${this.bottom}px`;
+    },
+    styleRight() {
+      return `${this.right}px`;
+    }
+  },
+
+  mounted() {
+    this.init();
+    this.throttledScrollHandler = throttle(300, this.onScroll);
+    this.container.addEventListener('scroll', this.throttledScrollHandler);
+  },
+
+  methods: {
+    init() {
+      this.container = document;
+      this.el = document.documentElement;
+      if (this.target) {
+        this.el = document.querySelector(this.target);
+        if (!this.el) {
+          throw new Error(`target is not existed: ${this.target}`);
+        }
+        this.container = this.el;
+      }
+    },
+    onScroll() {
+      const scrollTop = this.el.scrollTop;
+      this.visible = scrollTop >= this.visibilityHeight;
+    },
+    handleClick(e) {
+      this.scrollToTop();
+      this.$emit('click', e);
+    },
+    scrollToTop() {
+      const el = this.el;
+      const beginTime = Date.now();
+      const beginValue = el.scrollTop;
+      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+      const frameFunc = () => {
+        const progress = (Date.now() - beginTime) / 500;
+        if (progress < 1) {
+          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+          rAF(frameFunc);
+        } else {
+          el.scrollTop = 0;
+        }
+      };
+      rAF(frameFunc);
+    }
+  },
+
+  beforeDestroy() {
+    this.container.removeEventListener('scroll', this.throttledScrollHandler);
+  }
+};
+</script>

package/packages/badge/index.js

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

package/packages/badge/src/main.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <transition name="el-zoom-in-center">
+      <sup
+        v-show="!hidden && (content || content === 0 || isDot)"
+        v-text="content"
+        class="el-badge__content"
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
+      </sup>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElBadge',
+
+  props: {
+    value: [String, Number],
+    max: Number,
+    isDot: Boolean,
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
+  },
+
+  computed: {
+    content() {
+      if (this.isDot) return;
+
+      const value = this.value;
+      const max = this.max;
+
+      if (typeof value === 'number' && typeof max === 'number') {
+        return max < value ? `${max}+` : value;
+      }
+
+      return value;
+    }
+  }
+};
+</script>

package/packages/breadcrumb/index.js

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

package/packages/breadcrumb/src/breadcrumb-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="el-breadcrumb__item">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumbItem',
+    props: {
+      to: {},
+      replace: Boolean
+    },
+    data() {
+      return {
+        separator: '',
+        separatorClass: ''
+      };
+    },
+
+    inject: ['elBreadcrumb'],
+
+    mounted() {
+      this.separator = this.elBreadcrumb.separator;
+      this.separatorClass = this.elBreadcrumb.separatorClass;
+      const link = this.$refs.link;
+      link.setAttribute('role', 'link');
+      link.addEventListener('click', _ => {
+        const { to, $router } = this;
+        if (!to || !$router) return;
+        this.replace ? $router.replace(to) : $router.push(to);
+      });
+    }
+  };
+</script>

package/packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumb',
+
+    props: {
+      separator: {
+        type: String,
+        default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        elBreadcrumb: this
+      };
+    },
+
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
+      }
+    }
+  };
+</script>

package/packages/breadcrumb-item/index.js

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

package/packages/button/index.js

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

package/packages/button/src/button-group.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElButtonGroup'
+  };
+</script>

package/packages/button/src/button.vue

@@ -0,0 +1,78 @@
+<template>
+  <button
+    class="el-button"
+    @click="handleClick"
+    :disabled="buttonDisabled || loading"
+    :autofocus="autofocus"
+    :type="nativeType"
+    :class="[
+      type ? 'el-button--' + type : '',
+      buttonSize ? 'el-button--' + buttonSize : '',
+      {
+        'is-disabled': buttonDisabled,
+        'is-loading': loading,
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle
+      }
+    ]"
+  >
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+  export default {
+    name: 'ElButton',
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      size: String,
+      icon: {
+        type: String,
+        default: ''
+      },
+      nativeType: {
+        type: String,
+        default: 'button'
+      },
+      loading: Boolean,
+      disabled: Boolean,
+      plain: Boolean,
+      autofocus: Boolean,
+      round: Boolean,
+      circle: Boolean
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      buttonSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      buttonDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+
+    methods: {
+      handleClick(evt) {
+        this.$emit('click', evt);
+      }
+    }
+  };
+</script>

package/packages/button-group/index.js

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

package/packages/calendar/index.js

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

package/packages/calendar/src/date-table.vue

@@ -0,0 +1,202 @@
+<script>
+import fecha from '7moor-element-ui/src/utils/date';
+import { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from '7moor-element-ui/src/utils/date-util';
+
+export default {
+  props: {
+    selectedDay: String, // formated date yyyy-MM-dd
+    range: {
+      type: Array,
+      validator(val) {
+        if (!(val && val.length)) return true;
+        const [start, end] = val;
+        return validateRangeInOneMonth(start, end);
+      }
+    },
+    date: Date,
+    hideHeader: Boolean,
+    firstDayOfWeek: Number
+  },
+
+  inject: ['elCalendar'],
+
+  data() {
+    return {
+      WEEK_DAYS: getI18nSettings().dayNames
+    };
+  },
+
+  methods: {
+    toNestedArr(days) {
+      return rangeArr(days.length / 7).map((_, index) => {
+        const start = index * 7;
+        return days.slice(start, start + 7);
+      });
+    },
+
+    getFormateDate(day, type) {
+      if (!day || ['prev', 'current', 'next'].indexOf(type) === -1) {
+        throw new Error('invalid day or type');
+      }
+      let prefix = this.curMonthDatePrefix;
+      if (type === 'prev') {
+        prefix = this.prevMonthDatePrefix;
+      } else if (type === 'next') {
+        prefix = this.nextMonthDatePrefix;
+      }
+      day = `00${day}`.slice(-2);
+      return `${prefix}-${day}`;
+    },
+
+    getCellClass({ text, type}) {
+      const classes = [type];
+      if (type === 'current') {
+        const date = this.getFormateDate(text, type);
+        if (date === this.selectedDay) {
+          classes.push('is-selected');
+        }
+        if (date === this.formatedToday) {
+          classes.push('is-today');
+        }
+      }
+      return classes;
+    },
+
+    pickDay({ text, type }) {
+      const date = this.getFormateDate(text, type);
+      this.$emit('pick', date);
+    },
+
+    cellRenderProxy({ text, type }) {
+      let render = this.elCalendar.$scopedSlots.dateCell;
+      if (!render) return <span>{ text }</span>;
+
+      const day = this.getFormateDate(text, type);
+      const date = new Date(day);
+      const data = {
+        isSelected: this.selectedDay === day,
+        type: `${type}-month`,
+        day
+      };
+      return render({ date, data });
+    }
+  },
+
+  computed: {
+    prevMonthDatePrefix() {
+      const temp = new Date(this.date.getTime());
+      temp.setDate(0);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    curMonthDatePrefix() {
+      return fecha.format(this.date, 'yyyy-MM');
+    },
+
+    nextMonthDatePrefix() {
+      const temp = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    formatedToday() {
+      return this.elCalendar.formatedToday;
+    },
+
+    isInRange() {
+      return this.range && this.range.length;
+    },
+
+    rows() {
+      let days = [];
+      // if range exists, should render days in range.
+      if (this.isInRange) {
+        const [start, end] = this.range;
+        const currentMonthRange = rangeArr(end.getDate() - start.getDate() + 1).map((_, index) => ({
+          text: start.getDate() + index,
+          type: 'current'
+        }));
+        let remaining = currentMonthRange.length % 7;
+        remaining = remaining === 0 ? 0 : 7 - remaining;
+        const nextMonthRange = rangeArr(remaining).map((_, index) => ({
+          text: index + 1,
+          type: 'next'
+        }));
+        days = currentMonthRange.concat(nextMonthRange);
+      } else {
+        const date = this.date;
+        let firstDay = getFirstDayOfMonth(date);
+        firstDay = firstDay === 0 ? 7 : firstDay;
+        const firstDayOfWeek = typeof this.firstDayOfWeek === 'number' ? this.firstDayOfWeek : 1;
+        const prevMonthDays = getPrevMonthLastDays(date, firstDay - firstDayOfWeek).map(day => ({
+          text: day,
+          type: 'prev'
+        }));
+        const currentMonthDays = getMonthDays(date).map(day => ({
+          text: day,
+          type: 'current'
+        }));
+        days = [...prevMonthDays, ...currentMonthDays];
+        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({
+          text: index + 1,
+          type: 'next'
+        }));
+        days = days.concat(nextMonthDays);
+      }
+      return this.toNestedArr(days);
+    },
+
+    weekDays() {
+      const start = this.firstDayOfWeek;
+      const { WEEK_DAYS } = this;
+
+      if (typeof start !== 'number' || start === 0) {
+        return WEEK_DAYS.slice();
+      } else {
+        return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start));
+      }
+    }
+  },
+
+  render() {
+    const thead = this.hideHeader ? null : (<thead>
+      {
+        this.weekDays.map(day => <th key={day}>{ day }</th>)
+      }
+    </thead>);
+    return (
+      <table
+        class={{
+          'el-calendar-table': true,
+          'is-range': this.isInRange
+        }}
+        cellspacing="0"
+        cellpadding="0">
+        {
+          thead
+        }
+        <tbody>
+          {
+            this.rows.map((row, index) => <tr
+              class={{
+                'el-calendar-table__row': true,
+                'el-calendar-table__row--hide-border': index === 0 && this.hideHeader
+              }}
+              key={index}>
+              {
+                row.map((cell, key) => <td key={key}
+                  class={ this.getCellClass(cell) }
+                  onClick={this.pickDay.bind(this, cell)}>
+                  <div class="el-calendar-day">
+                    {
+                      this.cellRenderProxy(cell)
+                    }
+                  </div>
+                </td>)
+              }
+            </tr>)
+          }
+        </tbody>
+      </table>);
+  }
+};
+</script>