mazey-element-ui 2.0.1 → 2.15.16

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/src/main.vue

@@ -6,7 +6,13 @@
         v-show="!hidden && (content || content === 0 || isDot)"
         v-text="content"
         class="el-badge__content"
-        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
+        :class="[
+          type ? 'el-badge__content--' + type : null,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
       </sup>
     </transition>
   </div>
@@ -17,10 +23,16 @@ export default {
   name: 'ElBadge',
 
   props: {
-    value: {},
+    value: [String, Number],
     max: Number,
     isDot: Boolean,
-    hidden: Boolean
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
   },
 
   computed: {

package/packages/button/src/button.vue

@@ -65,12 +65,13 @@
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
       buttonDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
+        return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
       }
     },
 
     methods: {
       handleClick(evt) {
+        if (this.buttonDisabled || this.loading) return;
         this.$emit('click', evt);
       }
     }

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,200 @@
+<script>
+import fecha from 'mazey-element-ui/src/utils/date';
+import { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from 'mazey-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'],
+
+  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: {
+    WEEK_DAYS() {
+      return getI18nSettings().dayNames;
+    },
+    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 offset = (7 + firstDay - firstDayOfWeek) % 7;
+        const prevMonthDays = getPrevMonthLastDays(date, offset).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>

package/packages/calendar/src/main.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="el-calendar">
+    <div class="el-calendar__header">
+      <div class="el-calendar__title">
+        {{ i18nDate }}
+      </div>
+      <div
+        class="el-calendar__button-group"
+        v-if="validatedRange.length === 0">
+        <el-button-group>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('prev-month')">
+            {{ t('el.datepicker.prevMonth') }}
+          </el-button>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('today')">
+            {{ t('el.datepicker.today') }}
+          </el-button>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('next-month')">
+            {{ t('el.datepicker.nextMonth') }}
+          </el-button>
+        </el-button-group>
+      </div>
+    </div>
+    <div
+      class="el-calendar__body"
+      v-if="validatedRange.length === 0"
+      key="no-range">
+      <date-table
+        :date="date"
+        :selected-day="realSelectedDay"
+        :first-day-of-week="realFirstDayOfWeek"
+        @pick="pickDay" />
+    </div>
+    <div
+      v-else
+      class="el-calendar__body"
+      key="has-range">
+      <date-table
+        v-for="(range, index) in validatedRange"
+        :key="index"
+        :date="range[0]"
+        :selected-day="realSelectedDay"
+        :range="range"
+        :hide-header="index !== 0"
+        :first-day-of-week="realFirstDayOfWeek"
+        @pick="pickDay" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Locale from 'mazey-element-ui/src/mixins/locale';
+import fecha from 'mazey-element-ui/src/utils/date';
+import ElButton from 'mazey-element-ui/packages/button';
+import ElButtonGroup from 'mazey-element-ui/packages/button-group';
+import DateTable from './date-table';
+import { validateRangeInOneMonth } from 'mazey-element-ui/src/utils/date-util';
+
+const validTypes = ['prev-month', 'today', 'next-month'];
+const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const oneDay = 86400000;
+
+export default {
+  name: 'ElCalendar',
+
+  mixins: [Locale],
+
+  components: {
+    DateTable,
+    ElButton,
+    ElButtonGroup
+  },
+
+  props: {
+    value: [Date, String, Number],
+    range: {
+      type: Array,
+      validator(range) {
+        if (Array.isArray(range)) {
+          return range.length === 2 && range.every(
+            item => typeof item === 'string' ||
+            typeof item === 'number' ||
+            item instanceof Date);
+        } else {
+          return true;
+        }
+      }
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  provide() {
+    return {
+      elCalendar: this
+    };
+  },
+
+  methods: {
+    pickDay(day) {
+      this.realSelectedDay = day;
+    },
+
+    selectDate(type) {
+      if (validTypes.indexOf(type) === -1) {
+        throw new Error(`invalid type ${type}`);
+      }
+      let day = '';
+      if (type === 'prev-month') {
+        day = `${this.prevMonthDatePrefix}-01`;
+      } else if (type === 'next-month') {
+        day = `${this.nextMonthDatePrefix}-01`;
+      } else {
+        day = this.formatedToday;
+      }
+
+      if (day === this.formatedDate) return;
+      this.pickDay(day);
+    },
+
+    toDate(val) {
+      if (!val) {
+        throw new Error('invalid val');
+      }
+      return val instanceof Date ? val : new Date(val);
+    },
+
+    rangeValidator(date, isStart) {
+      const firstDayOfWeek = this.realFirstDayOfWeek;
+      const expected = isStart ? firstDayOfWeek : (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1);
+      const message = `${isStart ? 'start' : 'end'} of range should be ${weekDays[expected]}.`;
+      if (date.getDay() !== expected) {
+        console.warn('[ElementCalendar]', message, 'Invalid range will be ignored.');
+        return false;
+      }
+      return true;
+    }
+  },
+
+  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');
+    },
+
+    formatedDate() {
+      return fecha.format(this.date, 'yyyy-MM-dd');
+    },
+
+    i18nDate() {
+      const year = this.date.getFullYear();
+      const month = this.date.getMonth() + 1;
+      return `${year} ${this.t('el.datepicker.year')} ${this.t('el.datepicker.month' + month)}`;
+    },
+
+    formatedToday() {
+      return fecha.format(this.now, 'yyyy-MM-dd');
+    },
+
+    realSelectedDay: {
+      get() {
+        if (!this.value) return this.selectedDay;
+        return this.formatedDate;
+      },
+      set(val) {
+        this.selectedDay = val;
+        const date = new Date(val);
+        this.$emit('input', date);
+      }
+    },
+
+    date() {
+      if (!this.value) {
+        if (this.realSelectedDay) {
+          const d = this.selectedDay.split('-');
+          return new Date(d[0], d[1] - 1, d[2]);
+        } else if (this.validatedRange.length) {
+          return this.validatedRange[0][0];
+        }
+        return this.now;
+      } else {
+        return this.toDate(this.value);
+      }
+    },
+
+    // if range is valid, we get a two-digit array
+    validatedRange() {
+      let range = this.range;
+      if (!range) return [];
+      range = range.reduce((prev, val, index) => {
+        const date = this.toDate(val);
+        if (this.rangeValidator(date, index === 0)) {
+          prev = prev.concat(date);
+        }
+        return prev;
+      }, []);
+      if (range.length === 2) {
+        const [start, end] = range;
+        if (start > end) {
+          console.warn('[ElementCalendar]end time should be greater than start time');
+          return [];
+        }
+        // start time and end time in one month
+        if (validateRangeInOneMonth(start, end)) {
+          return [
+            [start, end]
+          ];
+        }
+        const data = [];
+        let startDay = new Date(start.getFullYear(), start.getMonth() + 1, 1);
+        const lastDay = this.toDate(startDay.getTime() - oneDay);
+        if (!validateRangeInOneMonth(startDay, end)) {
+          console.warn('[ElementCalendar]start time and end time interval must not exceed two months');
+          return [];
+        }
+        // 第一个月的时间范围
+        data.push([
+          start,
+          lastDay
+        ]);
+        // 下一月的时间范围，需要计算一下该月的第一个周起始日
+        const firstDayOfWeek = this.realFirstDayOfWeek;
+        const nextMontFirstDay = startDay.getDay();
+        let interval = 0;
+        if (nextMontFirstDay !== firstDayOfWeek) {
+          if (firstDayOfWeek === 0) {
+            interval = 7 - nextMontFirstDay;
+          } else {
+            interval = firstDayOfWeek - nextMontFirstDay;
+            interval = interval > 0 ? interval : 7 + interval;
+          }
+        }
+        startDay = this.toDate(startDay.getTime() + interval * oneDay);
+        if (startDay.getDate() < end.getDate()) {
+          data.push([
+            startDay,
+            end
+          ]);
+        }
+        return data;
+      }
+      return [];
+    },
+
+    realFirstDayOfWeek() {
+      if (this.firstDayOfWeek < 1 || this.firstDayOfWeek > 6) {
+        return 0;
+      }
+      return Math.floor(this.firstDayOfWeek);
+    }
+  },
+
+  data() {
+    return {
+      selectedDay: '',
+      now: new Date()
+    };
+  }
+};
+</script>