element-sim 1.0.0

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 'element-ui/src/mixins/locale';
+import fecha from 'element-ui/src/utils/date';
+import ElButton from 'element-ui/packages/button';
+import ElButtonGroup from 'element-ui/packages/button-group';
+import DateTable from './date-table';
+import { validateRangeInOneMonth } from '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>

package/packages/card/index.js

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

package/packages/card/src/main.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
+    <div class="el-card__header" v-if="$slots.header || header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+    <div class="el-card__body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElCard',
+    props: {
+      header: {},
+      bodyStyle: {},
+      shadow: {
+        type: String
+      }
+    }
+  };
+</script>

package/packages/carousel/index.js

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

package/packages/carousel/src/item.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    v-show="ready"
+    class="el-carousel__item"
+    :class="{
+      'is-active': active,
+      'el-carousel__item--card': $parent.type === 'card',
+      'is-in-stage': inStage,
+      'is-hover': hover,
+      'is-animating': animating
+    }"
+    @click="handleItemClick"
+    :style="itemStyle">
+    <div
+      v-if="$parent.type === 'card'"
+      v-show="!active"
+      class="el-carousel__mask">
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import { autoprefixer } from 'element-ui/src/utils/util';
+  const CARD_SCALE = 0.83;
+  export default {
+    name: 'ElCarouselItem',
+
+    props: {
+      name: String,
+      label: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        hover: false,
+        translate: 0,
+        scale: 1,
+        active: false,
+        ready: false,
+        inStage: false,
+        animating: false
+      };
+    },
+
+    methods: {
+      processIndex(index, activeIndex, length) {
+        if (activeIndex === 0 && index === length - 1) {
+          return -1;
+        } else if (activeIndex === length - 1 && index === 0) {
+          return length;
+        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
+          return length + 1;
+        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
+          return -2;
+        }
+        return index;
+      },
+
+      calcCardTranslate(index, activeIndex) {
+        const parentWidth = this.$parent.$el.offsetWidth;
+        if (this.inStage) {
+          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+        } else if (index < activeIndex) {
+          return -(1 + CARD_SCALE) * parentWidth / 4;
+        } else {
+          return (3 + CARD_SCALE) * parentWidth / 4;
+        }
+      },
+
+      calcTranslate(index, activeIndex, isVertical) {
+        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
+        return distance * (index - activeIndex);
+      },
+
+      translateItem(index, activeIndex, oldIndex) {
+        const parentType = this.$parent.type;
+        const parentDirection = this.parentDirection;
+        const length = this.$parent.items.length;
+        if (parentType !== 'card' && oldIndex !== undefined) {
+          this.animating = index === activeIndex || index === oldIndex;
+        }
+        if (index !== activeIndex && length > 2 && this.$parent.loop) {
+          index = this.processIndex(index, activeIndex, length);
+        }
+        if (parentType === 'card') {
+          if (parentDirection === 'vertical') {
+            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
+          }
+          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+          this.active = index === activeIndex;
+          this.translate = this.calcCardTranslate(index, activeIndex);
+          this.scale = this.active ? 1 : CARD_SCALE;
+        } else {
+          this.active = index === activeIndex;
+          const isVertical = parentDirection === 'vertical';
+          this.translate = this.calcTranslate(index, activeIndex, isVertical);
+          this.scale = 1;
+        }
+        this.ready = true;
+      },
+
+      handleItemClick() {
+        const parent = this.$parent;
+        if (parent && parent.type === 'card') {
+          const index = parent.items.indexOf(this);
+          parent.setActiveItem(index);
+        }
+      }
+    },
+
+    computed: {
+      parentDirection() {
+        return this.$parent.direction;
+      },
+
+      itemStyle() {
+        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
+        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
+        const style = {
+          transform: value
+        };
+        return autoprefixer(style);
+      }
+    },
+
+    created() {
+      this.$parent && this.$parent.updateItems();
+    },
+
+    destroyed() {
+      this.$parent && this.$parent.updateItems();
+    }
+  };
+</script>