rw-admin-ui 1.0.0

package/packages/date-picker/src/panel/month.vue

@@ -0,0 +1,203 @@
+<template>
+  <transition name="el-slide-up" @after-enter="handleEnter" @after-leave="handleLeave">
+    <div 
+      v-show="visible" 
+      class="el-picker-panel el-month-panel el-popper debug-month-panel" 
+      :class="[{
+        'has-sidebar': $slots.sidebar || (shortcuts && shortcuts.length)
+    }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts && shortcuts.length">
+          <button 
+            type="button" 
+            class="el-picker-panel__shortcut" 
+            v-for="(shortcut, key) in shortcuts" 
+            :key="key"
+            @click="handleShortcutClick(shortcut)">
+            {{ shortcut.text }}
+          </button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-date-picker__header el-date-picker__header--bordered">
+            <button 
+              type="button" 
+              @click="handlePrevYear" 
+              :aria-label="t(`el.datepicker.prevYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
+            </button>
+            <span class="el-date-picker__header-label" style="margin: 0 5px">
+              <el-select 
+                v-model="currentYear" 
+                size="mini" 
+                filterable 
+                allow-create 
+                default-first-option
+                :popper-append-to-body="false" 
+                style="width: 110px;">
+                <el-option v-for="y in yearOptions" :key="y" :value="y" :label="y + ' ' + t('el.datepicker.year')" />
+              </el-select>
+            </span>
+            <button 
+              type="button" 
+              @click="handleNextYear" 
+              :aria-label="t(`el.datepicker.nextYear`)"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
+            </button>
+          </div>
+          <div class="el-picker-panel__content">
+            <month-table 
+              :date="date" 
+              :value="value" 
+              :default-value="defaultValue" 
+              :disabled-date="disabledDate"
+              :selection-mode="selectionMode" 
+              @pick="handleMonthPick" />
+          </div>
+        </div>
+        <div
+          class="el-picker-panel__footer"
+          v-show="selectionMode === 'months'"
+        >
+          <el-button
+            type="text"
+            size="mini"
+            class="el-picker-panel__link-btn"
+            @click="handleConfirm">
+            {{ t('el.datepicker.confirm') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import Locale from 'rowinself-ui/src/mixins/locale';
+import MonthTable from '../basic/month-table';
+import ElSelect from 'rowinself-ui/packages/select';
+import ElOption from 'rowinself-ui/packages/option';
+import ElButton from 'rowinself-ui/packages/button';
+import { prevYear, nextYear, changeYearMonthAndClampDate, isDate } from 'rowinself-ui/src/utils/date-util';
+
+export default {
+  name: 'MonthPanel',
+
+  components: {
+    MonthTable,
+    ElSelect,
+    ElOption,
+    ElButton
+  },
+
+  mixins: [Locale],
+
+  props: {
+    linkedDate: {
+      type: Date
+    },
+    value: [Date, Array, String],
+    defaultValue: [Date, Array],
+    disabledDate: Function,
+    selectionMode: {
+      default: 'month',
+      type: String
+    }
+  },
+  data () {
+    return {
+      date: new Date(),
+      visible: false,
+      shortcuts: '',
+      popperClass: ''
+    };
+  },
+  computed: {
+    year () {
+      return this.date.getFullYear();
+    },
+    yearLabel () {
+      const yearTranslation = this.t('el.datepicker.year');
+      return this.year + ' ' + yearTranslation;
+    },
+    currentYear: {
+      get () {
+        return this.date.getFullYear();
+      },
+      set (val) {
+        const year = Number(val);
+        if (isNaN(year)) return;
+        const date = changeYearMonthAndClampDate(this.date, year, this.date.getMonth());
+        this.$emit('update:date', date);
+      }
+    },
+    yearOptions () {
+      const currentYear = this.date.getFullYear();
+      const start = currentYear - 50;
+      const end = currentYear + 5;
+      const options = [];
+      for (let i = start; i <= end; i++) {
+        options.push(i);
+      }
+      return options;
+    }
+  },
+
+  watch: {
+    linkedDate(val) {
+      if (val) {
+        this.date = new Date(val);
+      }
+    },
+    value(val) {
+      if (this.selectionMode === 'months' && this.value) return;
+      if (isDate(val)) {
+        this.date = new Date(val);
+      } else {
+        this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+      }
+    },
+
+    defaultValue(val) {
+      if (!isDate(this.value)) {
+        this.date = val ? new Date(val) : new Date();
+      }
+    }
+  },
+  
+  methods: {
+    handleEnter () {
+      // document.body.addEventListener('keydown', this.handleKeydown);
+    },
+
+    handleLeave () {
+      this.$emit('dodestroy');
+      // document.body.removeEventListener('keydown', this.handleKeydown);
+    },
+    handlePrevYear () {
+      const newDate = prevYear(this.date);
+      this.date = newDate;
+      this.$emit('update:date', newDate);
+    },
+    handleNextYear () {
+      const newDate = nextYear(this.date);
+      this.date = newDate;
+      this.$emit('update:date', newDate);
+    },
+    handleMonthPick (month) {
+      if (this.selectionMode === 'month') {
+        const newDate = new Date(this.date.getFullYear(), month, 1);
+        this.$emit('pick', newDate, false);
+      } else if (this.selectionMode === 'months') {
+        this.$emit('pick', month, true);
+      } else {
+        // selectionMode === 'range'
+        // Not implemented for this panel type
+      }
+    },
+    handleConfirm() {
+      this.$emit('pick', this.value, false);
+    }
+  }
+};
+</script>

package/packages/date-picker/src/panel/quarter-range.vue

@@ -0,0 +1,363 @@
+<template>
+  <transition name="el-slide-up" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts
+    }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-picker-panel__content el-date-range-picker__content is-left" @mousedown.prevent>
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="leftNextYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <quarter-table
+              selection-mode="range"
+              :date="leftDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"/>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right" @mousedown.prevent>
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="rightPrevYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <quarter-table
+              selection-mode="range"
+              :date="rightDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import {
+    isDate,
+    modifyWithTimeString,
+    prevYear,
+    nextYear,
+    formatDate
+  } from 'rowinself-ui/src/utils/date-util';
+  import Clickoutside from 'rowinself-ui/src/utils/clickoutside';
+  import Locale from 'rowinself-ui/src/mixins/locale';
+  import QuarterTable from '../basic/quarter-table';
+  import ElInput from 'rowinself-ui/packages/input';
+  import ElButton from 'rowinself-ui/packages/button';
+
+  const calcDefaultValue = (defaultValue) => {
+    if (Array.isArray(defaultValue)) {
+      return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+    } else if (defaultValue) {
+      return [new Date(defaultValue), nextYear(new Date(defaultValue))];
+    } else {
+      return [new Date(), nextYear(new Date())];
+    }
+  };
+  export default {
+    directives: { Clickoutside },
+
+    components: { QuarterTable, ElInput, ElButton },
+    mixins: [Locale],
+
+    data() {
+      return {
+        popperClass: '',
+        value: [],
+        defaultValue: null,
+        defaultTime: null,
+        minDate: '',
+        maxDate: '',
+        leftDate: new Date(),
+        rightDate: nextYear(new Date()),
+        rangeState: {
+          endDate: null,
+          selecting: false,
+          row: null,
+          column: null
+        },
+        shortcuts: '',
+        visible: '',
+        disabledDate: null,
+        format: '',
+        arrowControl: false,
+        unlinkPanels: false,
+        focusedInputIndex: 0,
+        isReverseSelecting: false
+      };
+    },
+
+    computed: {
+      btnDisabled() {
+        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
+      },
+
+      leftLabel() {
+        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year');
+      },
+
+      rightLabel() {
+        return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year');
+      },
+
+      leftYear() {
+        return this.leftDate.getFullYear();
+      },
+
+      rightYear() {
+        return this.rightDate.getFullYear() === this.leftDate.getFullYear() ? this.leftDate.getFullYear() + 1 : this.rightDate.getFullYear();
+      },
+
+      enableYearArrow() {
+        return this.unlinkPanels && this.rightYear > this.leftYear + 1;
+      }
+    },
+
+    watch: {
+      value(newVal) {
+        if (!newVal) {
+          this.minDate = null;
+          this.maxDate = null;
+        } else if (Array.isArray(newVal)) {
+          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
+          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
+          if (this.minDate) {
+            this.leftDate = this.minDate;
+            if (this.unlinkPanels && this.maxDate) {
+              const minDateYear = this.minDate.getFullYear();
+              const maxDateYear = this.maxDate.getFullYear();
+              this.rightDate = minDateYear === maxDateYear
+                ? nextYear(this.maxDate)
+                : this.maxDate;
+            } else {
+              this.rightDate = nextYear(this.leftDate);
+            }
+          } else {
+            this.leftDate = calcDefaultValue(this.defaultValue)[0];
+            this.rightDate = nextYear(this.leftDate);
+          }
+        }
+      },
+
+      defaultValue(val) {
+        if (!Array.isArray(this.value)) {
+          const [left, right] = calcDefaultValue(val);
+          this.leftDate = left;
+          this.rightDate = val && val[1] && left.getFullYear() !== right.getFullYear() && this.unlinkPanels
+            ? right
+            : nextYear(this.leftDate);
+        }
+      }
+    },
+
+    methods: {
+      handleClear() {
+        this.minDate = null;
+        this.maxDate = null;
+        this.leftDate = calcDefaultValue(this.defaultValue)[0];
+        this.rightDate = nextYear(this.leftDate);
+        this.$emit('pick', null);
+      },
+
+      handleChangeRange(val) {
+        this.minDate = val.minDate;
+        this.maxDate = val.maxDate;
+        this.rangeState = val.rangeState;
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: this.rangeState
+        });
+        this.emitInputPreview();
+      },
+
+      handleRangePick(val, close = true) {
+        const defaultTime = this.defaultTime || [];
+        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
+        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
+        if (this.maxDate === maxDate && this.minDate === minDate) {
+          return;
+        }
+        this.onPick && this.onPick(val);
+        
+        const isNewSelection = !this.minDate || (this.minDate && this.maxDate);
+        if (isNewSelection) {
+          if (this.focusedInputIndex === 1) {
+            this.isReverseSelecting = true;
+            this.minDate = minDate;
+            this.maxDate = null;
+            this.$emit('pick-end-date');
+            this.emitInputPreview();
+            return;
+          } else {
+            this.isReverseSelecting = false;
+          }
+        } else {
+          this.isReverseSelecting = false;
+        }
+
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+        
+        if (this.minDate && !this.maxDate) {
+          this.$emit('pick-start-date');
+        }
+        this.emitInputPreview();
+
+        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+        setTimeout(() => {
+          this.maxDate = maxDate;
+          this.minDate = minDate;
+        }, 10);
+        if (!close) return;
+        this.handleConfirm();
+      },
+      
+      emitInputPreview() {
+        if (!this.rangeState || !this.rangeState.endDate) {
+          this.$emit('preview', null);
+          return;
+        }
+        const endDate = this.rangeState.endDate;
+        const format = this.format || (this.$parent && this.$parent.format) || 'yyyy-MM';
+
+        if (!this.minDate || (this.minDate && this.maxDate)) {
+          if (this.focusedInputIndex === 1) {
+            this.$emit('preview', {
+              min: '',
+              max: formatDate(endDate, format),
+              minIsPreview: false,
+              maxIsPreview: true
+            });
+          } else {
+            this.$emit('preview', {
+              min: formatDate(endDate, format),
+              max: '',
+              minIsPreview: true,
+              maxIsPreview: false
+            });
+          }
+          return;
+        }
+
+        if (this.minDate && !this.maxDate) {
+          if (this.isReverseSelecting) {
+            this.$emit('preview', {
+              min: formatDate(endDate, format),
+              max: formatDate(this.minDate, format),
+              minIsPreview: true,
+              maxIsPreview: false
+            });
+          } else {
+            this.$emit('preview', {
+              min: formatDate(this.minDate, format),
+              max: formatDate(endDate, format),
+              minIsPreview: false,
+              maxIsPreview: true
+            });
+          }
+          return;
+        }
+      },
+
+      handleShortcutClick(shortcut) {
+        if (shortcut.onClick) {
+          shortcut.onClick(this);
+        }
+      },
+
+      // leftPrev*, rightNext* need to take care of `unlinkPanels`
+      leftPrevYear() {
+        this.leftDate = prevYear(this.leftDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = prevYear(this.rightDate);
+        }
+      },
+
+      rightNextYear() {
+        if (!this.unlinkPanels) {
+          this.leftDate = nextYear(this.leftDate);
+        }
+        this.rightDate = nextYear(this.rightDate);
+      },
+
+      // leftNext*, rightPrev* are called when `unlinkPanels` is true
+      leftNextYear() {
+        this.leftDate = nextYear(this.leftDate);
+      },
+
+      rightPrevYear() {
+        this.rightDate = prevYear(this.rightDate);
+      },
+
+      handleConfirm(visible = false) {
+        if (this.isValidValue([this.minDate, this.maxDate])) {
+          this.$emit('pick', [this.minDate, this.maxDate], visible);
+        }
+      },
+
+      isValidValue(value) {
+        return Array.isArray(value) &&
+          value && value[0] && value[1] &&
+          isDate(value[0]) && isDate(value[1]) &&
+          value[0].getTime() <= value[1].getTime() && (
+          typeof this.disabledDate === 'function'
+            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+            : true
+        );
+      },
+
+      resetView() {
+        // NOTE: this is a hack to reset {min, max}Date on picker open.
+        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
+        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
+      }
+    },
+  };
+</script>