meixioacomponent 1.1.48 → 2.0.1

package/packages/components/base/elDatePicker/basic/time-spinner.vue

@@ -1,304 +0,0 @@
-<template>
-  <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
-    <template v-if="!arrowControl">
-      <el-scrollbar
-        @mouseenter.native="emitSelectRange('hours')"
-        @mousemove.native="adjustCurrentSpinner('hours')"
-        class="el-time-spinner__wrapper"
-        wrap-style="max-height: inherit;"
-        view-class="el-time-spinner__list"
-        noresize
-        tag="ul"
-        ref="hours">
-        <li
-          @click="handleClick('hours', { value: hour, disabled: disabled })"
-          v-for="(disabled, hour) in hoursList"
-          class="el-time-spinner__item"
-          :key="hour"
-          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
-      </el-scrollbar>
-      <el-scrollbar
-        @mouseenter.native="emitSelectRange('minutes')"
-        @mousemove.native="adjustCurrentSpinner('minutes')"
-        class="el-time-spinner__wrapper"
-        wrap-style="max-height: inherit;"
-        view-class="el-time-spinner__list"
-        noresize
-        tag="ul"
-        ref="minutes">
-        <li
-          @click="handleClick('minutes', { value: key, disabled: false })"
-          v-for="(enabled, key) in minutesList"
-          :key="key"
-          class="el-time-spinner__item"
-          :class="{ 'active': key === minutes, disabled: !enabled }">{{ ('0' + key).slice(-2) }}</li>
-      </el-scrollbar>
-      <el-scrollbar
-        v-show="showSeconds"
-        @mouseenter.native="emitSelectRange('seconds')"
-        @mousemove.native="adjustCurrentSpinner('seconds')"
-        class="el-time-spinner__wrapper"
-        wrap-style="max-height: inherit;"
-        view-class="el-time-spinner__list"
-        noresize
-        tag="ul"
-        ref="seconds">
-        <li
-          @click="handleClick('seconds', { value: key, disabled: false })"
-          v-for="(second, key) in 60"
-          class="el-time-spinner__item"
-          :class="{ 'active': key === seconds }"
-          :key="key">{{ ('0' + key).slice(-2) }}</li>
-      </el-scrollbar>
-    </template>
-    <template v-if="arrowControl">
-      <div
-        @mouseenter="emitSelectRange('hours')"
-        class="el-time-spinner__wrapper is-arrow">
-        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
-        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
-        <ul class="el-time-spinner__list" ref="hours">
-          <li
-            class="el-time-spinner__item"
-            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
-            v-for="(hour, key) in arrowHourList"
-            :key="key">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
-        </ul>
-      </div>
-      <div
-        @mouseenter="emitSelectRange('minutes')"
-        class="el-time-spinner__wrapper is-arrow">
-        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
-        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
-        <ul class="el-time-spinner__list" ref="minutes">
-          <li
-            class="el-time-spinner__item"
-            :class="{ 'active': minute === minutes }"
-            v-for="(minute, key) in arrowMinuteList"
-            :key="key">
-            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
-          </li>
-        </ul>
-      </div>
-      <div
-        @mouseenter="emitSelectRange('seconds')"
-        class="el-time-spinner__wrapper is-arrow"
-        v-if="showSeconds">
-        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
-        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
-        <ul class="el-time-spinner__list" ref="seconds">
-          <li
-            v-for="(second, key) in arrowSecondList"
-            class="el-time-spinner__item"
-            :class="{ 'active': second === seconds }"
-            :key="key">
-            {{ second === undefined ? '' : ('0' + second).slice(-2) }}
-          </li>
-        </ul>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script type="text/babel">
-  import { getRangeHours, getRangeMinutes, modifyTime } from 'element-ui/src/utils/date-util';
-  import ElScrollbar from 'element-ui/packages/scrollbar';
-  import RepeatClick from 'element-ui/src/directives/repeat-click';
-
-  export default {
-    components: { ElScrollbar },
-
-    directives: {
-      repeatClick: RepeatClick
-    },
-
-    props: {
-      date: {},
-      defaultValue: {}, // reserved for future use
-      showSeconds: {
-        type: Boolean,
-        default: true
-      },
-      arrowControl: Boolean,
-      amPmMode: {
-        type: String,
-        default: '' // 'a': am/pm; 'A': AM/PM
-      }
-    },
-
-    computed: {
-      hours() {
-        return this.date.getHours();
-      },
-      minutes() {
-        return this.date.getMinutes();
-      },
-      seconds() {
-        return this.date.getSeconds();
-      },
-      hoursList() {
-        return getRangeHours(this.selectableRange);
-      },
-      minutesList() {
-        return getRangeMinutes(this.selectableRange, this.hours);
-      },
-      arrowHourList() {
-        const hours = this.hours;
-        return [
-          hours > 0 ? hours - 1 : undefined,
-          hours,
-          hours < 23 ? hours + 1 : undefined
-        ];
-      },
-      arrowMinuteList() {
-        const minutes = this.minutes;
-        return [
-          minutes > 0 ? minutes - 1 : undefined,
-          minutes,
-          minutes < 59 ? minutes + 1 : undefined
-        ];
-      },
-      arrowSecondList() {
-        const seconds = this.seconds;
-        return [
-          seconds > 0 ? seconds - 1 : undefined,
-          seconds,
-          seconds < 59 ? seconds + 1 : undefined
-        ];
-      }
-    },
-
-    data() {
-      return {
-        selectableRange: [],
-        currentScrollbar: null
-      };
-    },
-
-    mounted() {
-      this.$nextTick(() => {
-        !this.arrowControl && this.bindScrollEvent();
-      });
-    },
-
-    methods: {
-      increase() {
-        this.scrollDown(1);
-      },
-
-      decrease() {
-        this.scrollDown(-1);
-      },
-
-      modifyDateField(type, value) {
-        switch (type) {
-          case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break;
-          case 'minutes': this.$emit('change', modifyTime(this.date, this.hours, value, this.seconds)); break;
-          case 'seconds': this.$emit('change', modifyTime(this.date, this.hours, this.minutes, value)); break;
-        }
-      },
-
-      handleClick(type, {value, disabled}) {
-        if (!disabled) {
-          this.modifyDateField(type, value);
-          this.emitSelectRange(type);
-          this.adjustSpinner(type, value);
-        }
-      },
-
-      emitSelectRange(type) {
-        if (type === 'hours') {
-          this.$emit('select-range', 0, 2);
-        } else if (type === 'minutes') {
-          this.$emit('select-range', 3, 5);
-        } else if (type === 'seconds') {
-          this.$emit('select-range', 6, 8);
-        }
-        this.currentScrollbar = type;
-      },
-
-      bindScrollEvent() {
-        const bindFunction = (type) => {
-          this.$refs[type].wrap.onscroll = (e) => {
-            // TODO: scroll is emitted when set scrollTop programatically
-            // should find better solutions in the future!
-            this.handleScroll(type, e);
-          };
-        };
-        bindFunction('hours');
-        bindFunction('minutes');
-        bindFunction('seconds');
-      },
-
-      handleScroll(type) {
-        const value = Math.min(Math.round((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));
-        this.modifyDateField(type, value);
-      },
-
-      // NOTE: used by datetime / date-range panel
-      //       renamed from adjustScrollTop
-      //       should try to refactory it
-      adjustSpinners() {
-        this.adjustSpinner('hours', this.hours);
-        this.adjustSpinner('minutes', this.minutes);
-        this.adjustSpinner('seconds', this.seconds);
-      },
-
-      adjustCurrentSpinner(type) {
-        this.adjustSpinner(type, this[type]);
-      },
-
-      adjustSpinner(type, value) {
-        if (this.arrowControl) return;
-        const el = this.$refs[type].wrap;
-        if (el) {
-          el.scrollTop = Math.max(0, value * this.typeItemHeight(type));
-        }
-      },
-
-      scrollDown(step) {
-        if (!this.currentScrollbar) {
-          this.emitSelectRange('hours');
-        }
-
-        const label = this.currentScrollbar;
-        const hoursList = this.hoursList;
-        let now = this[label];
-
-        if (this.currentScrollbar === 'hours') {
-          let total = Math.abs(step);
-          step = step > 0 ? 1 : -1;
-          let length = hoursList.length;
-          while (length-- && total) {
-            now = (now + step + hoursList.length) % hoursList.length;
-            if (hoursList[now]) {
-              continue;
-            }
-            total--;
-          }
-          if (hoursList[now]) return;
-        } else {
-          now = (now + step + 60) % 60;
-        }
-
-        this.modifyDateField(label, now);
-        this.adjustSpinner(label, now);
-        this.$nextTick(() => this.emitSelectRange(this.currentScrollbar));
-      },
-      amPm(hour) {
-        let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a';
-        if (!shouldShowAmPm) return '';
-        let isCapital = this.amPmMode === 'A';
-        let content = (hour < 12) ? ' am' : ' pm';
-        if (isCapital) content = content.toUpperCase();
-        return content;
-      },
-      typeItemHeight(type) {
-        return this.$refs[type].$el.querySelector('li').offsetHeight;
-      },
-      scrollBarHeight(type) {
-        return this.$refs[type].$el.offsetHeight;
-      }
-    }
-  };
-</script>

package/packages/components/base/elDatePicker/basic/year-table.vue

@@ -1,111 +0,0 @@
-<template>
-  <table @click="handleYearTableClick" class="el-year-table">
-    <tbody>
-    <tr>
-      <td class="available" :class="getCellStyle(startYear + 0)">
-        <a class="cell">{{ startYear }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 1)">
-        <a class="cell">{{ startYear + 1 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 2)">
-        <a class="cell">{{ startYear + 2 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 3)">
-        <a class="cell">{{ startYear + 3 }}</a>
-      </td>
-    </tr>
-    <tr>
-      <td class="available" :class="getCellStyle(startYear + 4)">
-        <a class="cell">{{ startYear + 4 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 5)">
-        <a class="cell">{{ startYear + 5 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 6)">
-        <a class="cell">{{ startYear + 6 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 7)">
-        <a class="cell">{{ startYear + 7 }}</a>
-      </td>
-    </tr>
-    <tr>
-      <td class="available" :class="getCellStyle(startYear + 8)">
-        <a class="cell">{{ startYear + 8 }}</a>
-      </td>
-      <td class="available" :class="getCellStyle(startYear + 9)">
-        <a class="cell">{{ startYear + 9 }}</a>
-      </td>
-      <td></td>
-      <td></td>
-    </tr>
-    </tbody>
-  </table>
-</template>
-
-<script type="text/babel">
-  import { hasClass } from 'element-ui/src/utils/dom';
-  import { isDate, range, nextDate, getDayCountOfYear } from 'element-ui/src/utils/date-util';
-  import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
-
-  const datesInYear = year => {
-    const numOfDays = getDayCountOfYear(year);
-    const firstDay = new Date(year, 0, 1);
-    return range(numOfDays).map(n => nextDate(firstDay, n));
-  };
-
-  export default {
-    props: {
-      disabledDate: {},
-      value: {},
-      defaultValue: {
-        validator(val) {
-          // null or valid Date Object
-          return val === null || (val instanceof Date && isDate(val));
-        }
-      },
-      date: {},
-      selectionMode: {}
-    },
-
-    computed: {
-      startYear() {
-        return Math.floor(this.date.getFullYear() / 10) * 10;
-      }
-    },
-
-    methods: {
-      getCellStyle(year) {
-        const style = {};
-        const today = new Date();
-
-        style.disabled = typeof this.disabledDate === 'function'
-          ? datesInYear(year).every(this.disabledDate)
-          : false;
-        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
-        style.today = today.getFullYear() === year;
-        style.default = this.defaultValue && this.defaultValue.getFullYear() === year;
-
-        return style;
-      },
-
-      handleYearTableClick(event) {
-        const target = event.target;
-        if (target.tagName === 'A') {
-          if (hasClass(target.parentNode, 'disabled')) return;
-          const year = target.textContent || target.innerText;
-          if (this.selectionMode === 'years') {
-            const value = this.value || [];
-            const idx = arrayFindIndex(value, date => date.getFullYear() === Number(year));
-            const newValue = idx > -1
-              ? [...value.slice(0, idx), ...value.slice(idx + 1)]
-              : [...value, new Date(year)];
-            this.$emit('pick', newValue);
-          } else {
-            this.$emit('pick', Number(year));
-          }
-        }
-      }
-    }
-  };
-</script>

package/packages/components/base/elDatePicker/index.js

@@ -1,6 +0,0 @@
-import datePicker from "./picker/date-picker";
-
-datePicker.install = function (Vue) {
-    Vue.component(datePicker.name, datePicker)
-}
-export default datePicker

package/packages/components/base/elDatePicker/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <DatePicker v-bind="$attrs" :type="type"></DatePicker>
-</template>
-
-<script lang="ts">
-import DatePicker from "./picker/date-picker.js"
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "ElDatePicker",
-  data() {
-    return {}
-  },
-  props: {
-    type: {
-      default:'date'
-    }
-  },
-  methods: {},
-  components: {
-    DatePicker
-  }
-})
-</script>
-
-<style lang="less" scoped>
-
-</style>