rw-admin-ui 1.0.0

package/packages/button/src/button.vue

@@ -0,0 +1,79 @@
+<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.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
+      }
+    },
+
+    methods: {
+      handleClick(evt) {
+        if (this.buttonDisabled || this.loading) return;
+        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,200 @@
+<script>
+import fecha from 'rowinself-ui/src/utils/date';
+import { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from 'rowinself-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'],
+
+  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));
+      }
+    }
+  },
+
+  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 });
+    }
+  },
+
+  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 'rowinself-ui/src/mixins/locale';
+import fecha from 'rowinself-ui/src/utils/date';
+import ElButton from 'rowinself-ui/packages/button';
+import ElButtonGroup from 'rowinself-ui/packages/button-group';
+import DateTable from './date-table';
+import { validateRangeInOneMonth } from 'rowinself-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',
+
+  components: {
+    DateTable,
+    ElButton,
+    ElButtonGroup
+  },
+
+  mixins: [Locale],
+
+  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
+    };
+  },
+
+  data() {
+    return {
+      selectedDay: '',
+      now: new Date()
+    };
+  },
+
+  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);
+    }
+  },
+
+  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;
+    }
+  },
+};
+</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: String,
+      bodyStyle: [Object, String],
+      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;