chenhaodong / mew-iview

Commit ca8e830cc36301f2347c63a635f8733af88d3da4

Authored by Sergio Crisostomo
1 parent c4e3fe33

move files to subfolders

Showing 7 changed files with 183 additions and 271 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/month-table.vue deleted
View file @c4e3fe3
1   -<template>
2   - <div :class="classes" @click="handleClick">
3   - <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
4   - </div>
5   -</template>
6   -<script>
7   - import { deepCopy } from '../../../utils/assist';
8   - import Locale from '../../../mixins/locale';
9   - const prefixCls = 'ivu-date-picker-cells';
10   -
11   - export default {
12   - mixins: [ Locale ],
13   - props: {
14   - date: {},
15   - month: {
16   - type: Number
17   - },
18   - disabledDate: {},
19   - selectionMode: {
20   - default: 'month'
21   - }
22   - },
23   - computed: {
24   - classes () {
25   - return [
26   - `${prefixCls}`,
27   - `${prefixCls}-month`
28   - ];
29   - },
30   - cells () {
31   - let cells = [];
32   - const cell_tmpl = {
33   - text: '',
34   - selected: false,
35   - disabled: false
36   - };
37   -
38   - for (let i = 0; i < 12; i++) {
39   - const cell = deepCopy(cell_tmpl);
40   - cell.text = i + 1;
41   -
42   - const date = new Date(this.date);
43   - date.setMonth(i);
44   - cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month';
45   -
46   - cell.selected = Number(this.month) === i;
47   - cells.push(cell);
48   - }
49   -
50   - return cells;
51   - }
52   - },
53   - methods: {
54   - getCellCls (cell) {
55   - return [
56   - `${prefixCls}-cell`,
57   - {
58   - [`${prefixCls}-cell-selected`]: cell.selected,
59   - [`${prefixCls}-cell-disabled`]: cell.disabled
60   - }
61   - ];
62   - },
63   - handleClick (event) {
64   - const target = event.target;
65   - if (target.tagName === 'EM') {
66   - const index = parseInt(event.target.getAttribute('index'));
67   - const cell = this.cells[index];
68   - if (cell.disabled) return;
69   -
70   - this.$emit('on-pick', index);
71   - }
72   - this.$emit('on-pick-click');
73   - },
74   - tCell (cell) {
75   - return this.t(`i.datepicker.months.m${cell}`);
76   - }
77   - }
78   - };
79   -</script>
src/components/date-picker/base/year-table.vue
  Show/Hide comments   View file @ca8e830
1 1 <template>
2   - <div :class="classes" @click="handleClick">
3   - <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
  2 + <div :class="classes">
  3 + <span
  4 + :class="getCellCls(cell)"
  5 + v-for="cell in cells"
  6 + @click="handleClick(cell)"
  7 + @mouseenter="handleMouseMove(cell)"
  8 + >
  9 + <em>{{ cell.date.getFullYear() }}</em>
  10 + </span>
4 11 </div>
5 12 </template>
6 13 <script>
  14 + import { clearHours, isInRange } from '../util';
7 15 import { deepCopy } from '../../../utils/assist';
8   - const prefixCls = 'ivu-date-picker-cells';
  16 + import mixin from './mixin';
  17 + import prefixCls from './prefixCls';
9 18  
10 19 export default {
11   - props: {
12   - date: {},
13   - year: {},
14   - disabledDate: {},
15   - selectionMode: {
16   - default: 'year'
17   - }
18   - },
  20 + mixins: [ mixin ],
  21 +
  22 + props: {/* in mixin */},
19 23 computed: {
20   - classes () {
  24 + classes() {
21 25 return [
22 26 `${prefixCls}`,
23 27 `${prefixCls}-year`
24 28 ];
25 29 },
26 30 startYear() {
27   - return Math.floor(this.year / 10) * 10;
  31 + return Math.floor(this.tableDate.getFullYear() / 10) * 10;
28 32 },
29 33 cells () {
30 34 let cells = [];
... ... @@ -34,15 +38,18 @@
34 38 disabled: false
35 39 };
36 40  
37   - for (let i = 0; i < 10; i++) {
38   - const cell = deepCopy(cell_tmpl);
39   - cell.text = this.startYear + i;
  41 + const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), 0, 1));
  42 + const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), 0, 1));
  43 + const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));
40 44  
41   - const date = new Date(this.date);
42   - date.setFullYear(cell.text);
43   - cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
44 45  
45   - cell.selected = Number(this.year) === cell.text;
  46 + for (let i = 0; i < 10; i++) {
  47 + const cell = deepCopy(cell_tmpl);
  48 + cell.date = new Date(this.startYear + i, 0, 1);
  49 + cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';
  50 + const time = clearHours(cell.date);
  51 + cell.range = isInRange(time, rangeStart, rangeEnd);
  52 + cell.selected = selectedDays.includes(time);
46 53 cells.push(cell);
47 54 }
48 55  
... ... @@ -55,26 +62,11 @@
55 62 `${prefixCls}-cell`,
56 63 {
57 64 [`${prefixCls}-cell-selected`]: cell.selected,
58   - [`${prefixCls}-cell-disabled`]: cell.disabled
  65 + [`${prefixCls}-cell-disabled`]: cell.disabled,
  66 + [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
59 67 }
60 68 ];
61 69 },
62   - nextTenYear() {
63   - this.$emit('on-pick', Number(this.year) + 10, false);
64   - },
65   - prevTenYear() {
66   - this.$emit('on-pick', Number(this.year) - 10, false);
67   - },
68   - handleClick (event) {
69   - const target = event.target;
70   - if (target.tagName === 'EM') {
71   - const cell = this.cells[parseInt(event.target.getAttribute('index'))];
72   - if (cell.disabled) return;
73   -
74   - this.$emit('on-pick', cell.text);
75   - }
76   - this.$emit('on-pick-click');
77   - }
78 70 }
79 71 };
80 72 </script>
... ...
src/components/date-picker/panel/date-panel-label.vue renamed to src/components/date-picker/panel/Date/date-panel-label.vue
  Show/Hide comments   View file @ca8e830
src/components/date-picker/panel/Date/date-panel-mixin.js 0 → 100644
  Show/Hide comments   View file @ca8e830
  1 +
  2 +import { oneOf } from '../../../../utils/assist';
  3 +import {initTimeDate } from '../../util';
  4 +
  5 +
  6 +export default {
  7 + props: {
  8 + confirm: {
  9 + type: Boolean,
  10 + default: false
  11 + },
  12 + showTime: {
  13 + type: Boolean,
  14 + default: false
  15 + },
  16 + format: {
  17 + type: String,
  18 + default: 'yyyy-MM-dd'
  19 + },
  20 + selectionMode: {
  21 + type: String,
  22 + validator (value) {
  23 + return oneOf(value, ['year', 'month', 'date', 'time']);
  24 + },
  25 + default: 'date'
  26 + },
  27 + shortcuts: {
  28 + type: Array,
  29 + default: () => []
  30 + },
  31 + disabledDate: {
  32 + type: Function,
  33 + default: () => false
  34 + },
  35 + value: {
  36 + type: Array,
  37 + default: () => [initTimeDate(), initTimeDate()]
  38 + }
  39 + },
  40 + computed: {
  41 + isTime(){
  42 + return this.currentView === 'time';
  43 + }
  44 + },
  45 + methods: {
  46 + handleToggleTime(){
  47 + this.currentView = this.currentView === 'time' ? this.selectionMode : 'time';
  48 + },
  49 + }
  50 +};
... ...
src/components/date-picker/panel/time-range.vue renamed to src/components/date-picker/panel/Time/time-range.vue
  Show/Hide comments   View file @ca8e830
... ... @@ -10,9 +10,9 @@
10 10 ref="timeSpinner"
11 11 :steps="steps"
12 12 :show-seconds="showSeconds"
13   - :hours="hours"
14   - :minutes="minutes"
15   - :seconds="seconds"
  13 + :hours="dateStart.getHours()"
  14 + :minutes="dateStart.getMinutes()"
  15 + :seconds="dateStart.getSeconds()"
16 16 :disabled-hours="disabledHours"
17 17 :disabled-minutes="disabledMinutes"
18 18 :disabled-seconds="disabledSeconds"
... ... @@ -29,9 +29,9 @@
29 29 ref="timeSpinnerEnd"
30 30 :steps="steps"
31 31 :show-seconds="showSeconds"
32   - :hours="hoursEnd"
33   - :minutes="minutesEnd"
34   - :seconds="secondsEnd"
  32 + :hours="dateEnd.getHours()"
  33 + :minutes="dateEnd.getMinutes()"
  34 + :seconds="dateEnd.getSeconds()"
35 35 :disabled-hours="disabledHours"
36 36 :disabled-minutes="disabledMinutes"
37 37 :disabled-seconds="disabledSeconds"
... ... @@ -47,46 +47,47 @@
47 47 </div>
48 48 </template>
49 49 <script>
50   - import TimeSpinner from '../base/time-spinner.vue';
51   - import Confirm from '../base/confirm.vue';
  50 + import TimeSpinner from '../../base/time-spinner.vue';
  51 + import Confirm from '../../base/confirm.vue';
  52 + import Options from '../../time-mixins';
52 53  
53   - import Mixin from './mixin';
54   - import Locale from '../../../mixins/locale';
55 54  
56   - import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
  55 + import Mixin from '../panel-mixin';
  56 + import Locale from '../../../../mixins/locale';
  57 +
  58 + import { initTimeDate, formatDateLabels } from '../../util';
57 59  
58 60 const prefixCls = 'ivu-picker-panel';
59 61 const timePrefixCls = 'ivu-time-picker';
60 62  
  63 + const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
  64 +
61 65 export default {
62   - name: 'TimePicker',
63   - mixins: [ Mixin, Locale ],
  66 + name: 'RangeTimePickerPanel',
  67 + mixins: [ Mixin, Locale, Options ],
64 68 components: { TimeSpinner, Confirm },
65 69 props: {
66 70 steps: {
67 71 type: Array,
68 72 default: () => []
69   - }
  73 + },
  74 + format: {
  75 + type: String,
  76 + default: 'HH:mm:ss'
  77 + },
  78 + value: {
  79 + type: Array,
  80 + required: true
  81 + },
70 82 },
71 83 data () {
  84 + const [dateStart, dateEnd] = this.value.slice();
72 85 return {
73 86 prefixCls: prefixCls,
74 87 timePrefixCls: timePrefixCls,
75   - format: 'HH:mm:ss',
76 88 showDate: false,
77   - date: initTimeDate(),
78   - dateEnd: initTimeDate(),
79   - value: '',
80   - hours: '',
81   - minutes: '',
82   - seconds: '',
83   - hoursEnd: '',
84   - minutesEnd: '',
85   - secondsEnd: '',
86   - disabledHours: [],
87   - disabledMinutes: [],
88   - disabledSeconds: [],
89   - hideDisabledOptions: false,
  89 + dateStart: dateStart || initTimeDate(),
  90 + dateEnd: dateEnd || initTimeDate(),
90 91 confirm: false
91 92 };
92 93 },
... ... @@ -111,28 +112,10 @@
111 112 }
112 113 },
113 114 watch: {
114   - value (newVal) {
115   - if (!newVal) return;
116   - if (Array.isArray(newVal)) {
117   - const valStart = newVal[0] ? toDate(newVal[0]) : false;
118   - const valEnd = newVal[1] ? toDate(newVal[1]) : false;
119   -
120   - if (valStart && valEnd) {
121   - this.handleChange(
122   - {
123   - hours: valStart.getHours(),
124   - minutes: valStart.getMinutes(),
125   - seconds: valStart.getSeconds()
126   - },
127   - {
128   - hours: valEnd.getHours(),
129   - minutes: valEnd.getMinutes(),
130   - seconds: valEnd.getSeconds()
131   - },
132   - false
133   - );
134   - }
135   - }
  115 + value (dates) {
  116 + const [dateStart, dateEnd] = dates.slice();
  117 + this.dateStart = dateStart || initTimeDate();
  118 + this.dateEnd = dateEnd || initTimeDate();
136 119 }
137 120 },
138 121 methods: {
... ... @@ -142,59 +125,25 @@
142 125 const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
143 126 return [labels[0].label, separator, labels[1].label].join('');
144 127 },
145   - handleClear() {
146   - this.date = initTimeDate();
147   - this.dateEnd = initTimeDate();
148   - this.hours = '';
149   - this.minutes = '';
150   - this.seconds = '';
151   - this.hoursEnd = '';
152   - this.minutesEnd = '';
153   - this.secondsEnd = '';
154   - },
155   - handleChange (date, dateEnd, emit = true) {
156   - const oldDateEnd = new Date(this.dateEnd);
  128 + handleChange (start, end, emit = true) {
  129 +
  130 + const dateStart = new Date(this.dateStart);
  131 + let dateEnd = new Date(this.dateEnd);
  132 +
  133 + // set dateStart
  134 + Object.keys(start).forEach(type => {
  135 + dateStart[`set${capitalize(type)}`](start[type])
  136 + });
  137 +
  138 + // set dateEnd
  139 + Object.keys(end).forEach(type => {
  140 + dateEnd[`set${capitalize(type)}`](end[type]);
  141 + });
157 142  
158   - if (date.hours !== undefined) {
159   - this.date.setHours(date.hours);
160   - this.hours = this.date.getHours();
161   - }
162   - if (date.minutes !== undefined) {
163   - this.date.setMinutes(date.minutes);
164   - this.minutes = this.date.getMinutes();
165   - }
166   - if (date.seconds !== undefined) {
167   - this.date.setSeconds(date.seconds);
168   - this.seconds = this.date.getSeconds();
169   - }
170   - if (dateEnd.hours !== undefined) {
171   - this.dateEnd.setHours(dateEnd.hours);
172   - this.hoursEnd = this.dateEnd.getHours();
173   - }
174   - if (dateEnd.minutes !== undefined) {
175   - this.dateEnd.setMinutes(dateEnd.minutes);
176   - this.minutesEnd = this.dateEnd.getMinutes();
177   - }
178   - if (dateEnd.seconds !== undefined) {
179   - this.dateEnd.setSeconds(dateEnd.seconds);
180   - this.secondsEnd = this.dateEnd.getSeconds();
181   - }
182 143 // judge endTime > startTime?
183   - if (this.dateEnd < this.date) {
184   - this.$nextTick(() => {
185   - this.dateEnd = new Date(this.date);
186   - this.hoursEnd = this.dateEnd.getHours();
187   - this.minutesEnd = this.dateEnd.getMinutes();
188   - this.secondsEnd = this.dateEnd.getSeconds();
  144 + if (dateEnd < dateStart) dateEnd = dateStart;
189 145  
190   - const format = 'yyyy-MM-dd HH:mm:ss';
191   - if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
192   - if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
193   - }
194   - });
195   - } else {
196   - if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
197   - }
  146 + if (emit) this.$emit('on-pick', [dateStart, dateEnd], true);
198 147 },
199 148 handleStartChange (date) {
200 149 this.handleChange(date, {});
... ...
src/components/date-picker/panel/time.vue renamed to src/components/date-picker/panel/Time/time.vue
  Show/Hide comments   View file @ca8e830
... ... @@ -7,9 +7,9 @@
7 7 ref="timeSpinner"
8 8 :show-seconds="showSeconds"
9 9 :steps="steps"
10   - :hours="hours"
11   - :minutes="minutes"
12   - :seconds="seconds"
  10 + :hours="date.getHours()"
  11 + :minutes="date.getMinutes()"
  12 + :seconds="date.getSeconds()"
13 13 :disabled-hours="disabledHours"
14 14 :disabled-minutes="disabledMinutes"
15 15 :disabled-seconds="disabledSeconds"
... ... @@ -25,42 +25,45 @@
25 25 </div>
26 26 </template>
27 27 <script>
28   - import TimeSpinner from '../base/time-spinner.vue';
29   - import Confirm from '../base/confirm.vue';
  28 + import TimeSpinner from '../../base/time-spinner.vue';
  29 + import Confirm from '../../base/confirm.vue';
  30 + import Options from '../../time-mixins';
30 31  
31   - import Mixin from './mixin';
32   - import Locale from '../../../mixins/locale';
33 32  
34   - import { initTimeDate } from '../util';
  33 + import Mixin from '../panel-mixin';
  34 + import Locale from '../../../../mixins/locale';
  35 +
  36 + import { initTimeDate } from '../../util';
35 37  
36 38 const prefixCls = 'ivu-picker-panel';
37 39 const timePrefixCls = 'ivu-time-picker';
38 40  
  41 + const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
  42 +
39 43 export default {
40   - name: 'TimePicker',
41   - mixins: [ Mixin, Locale ],
  44 + name: 'TimePickerPanel',
  45 + mixins: [ Mixin, Locale, Options ],
42 46 components: { TimeSpinner, Confirm },
43 47 props: {
44 48 steps: {
45 49 type: Array,
46 50 default: () => []
47   - }
  51 + },
  52 + format: {
  53 + type: String,
  54 + default: 'HH:mm:ss'
  55 + },
  56 + value: {
  57 + type: Array,
  58 + required: true
  59 + },
48 60 },
49 61 data () {
50 62 return {
51 63 prefixCls: prefixCls,
52 64 timePrefixCls: timePrefixCls,
53   - date: initTimeDate(),
54   - value: '',
  65 + date: this.value[0] || initTimeDate(),
55 66 showDate: false,
56   - format: 'HH:mm:ss',
57   - hours: '',
58   - minutes: '',
59   - seconds: '',
60   - disabledHours: [],
61   - disabledMinutes: [],
62   - disabledSeconds: [],
63   - hideDisabledOptions: false,
64 67 confirm: false
65 68 };
66 69 },
... ... @@ -68,7 +71,7 @@
68 71 showSeconds () {
69 72 return (this.format || '').indexOf('ss') !== -1;
70 73 },
71   - visibleDate () {
  74 + visibleDate () { // TODO
72 75 const date = this.date;
73 76 const month = date.getMonth() + 1;
74 77 const tYear = this.t('i.datepicker.year');
... ... @@ -77,44 +80,22 @@
77 80 }
78 81 },
79 82 watch: {
80   - value (newVal) {
81   - if (!newVal) return;
  83 + value (dates) {
  84 + let newVal = dates[0] || initTimeDate();
82 85 newVal = new Date(newVal);
83   - if (!isNaN(newVal)) {
84   - this.date = newVal;
85   - this.handleChange({
86   - hours: newVal.getHours(),
87   - minutes: newVal.getMinutes(),
88   - seconds: newVal.getSeconds()
89   - }, false);
90   - }
  86 + this.date = newVal;
91 87 }
92 88 },
93 89 methods: {
94   - handleClear() {
95   - this.date = initTimeDate();
96   - this.hours = '';
97   - this.minutes = '';
98   - this.seconds = '';
99   - },
100 90 handleChange (date, emit = true) {
101   - if (date.hours !== undefined) {
102   - this.date.setHours(date.hours);
103   - this.hours = this.date.getHours();
104   - }
105   - if (date.minutes !== undefined) {
106   - this.date.setMinutes(date.minutes);
107   - this.minutes = this.date.getMinutes();
108   - }
109   - if (date.seconds !== undefined) {
110   - this.date.setSeconds(date.seconds);
111   - this.seconds = this.date.getSeconds();
112   - }
113   - if (emit) this.$emit('on-pick', this.date, true);
  91 +
  92 + const newDate = new Date(this.date);
  93 + Object.keys(date).forEach(
  94 + type => newDate[`set${capitalize(type)}`](date[type])
  95 + );
  96 +
  97 + if (emit) this.$emit('on-pick', newDate, true);
114 98 },
115   - updateScroll () {
116   - this.$refs.timeSpinner.updateScroll();
117   - }
118 99 },
119 100 mounted () {
120 101 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
... ...
src/components/date-picker/panel/mixin.js renamed to src/components/date-picker/panel/panel-mixin.js
  Show/Hide comments   View file @ca8e830
... ... @@ -15,13 +15,32 @@ export default {
15 15 if (shortcut.onClick) shortcut.onClick(this);
16 16 },
17 17 handlePickClear () {
  18 + this.resetView();
18 19 this.$emit('on-pick-clear');
19 20 },
20 21 handlePickSuccess () {
  22 + this.resetView();
21 23 this.$emit('on-pick-success');
22 24 },
23 25 handlePickClick () {
24 26 this.$emit('on-pick-click');
25   - }
  27 + },
  28 + resetView(){
  29 + setTimeout(
  30 + () => this.currentView = this.selectionMode,
  31 + 500 // 500ms so the dropdown can close before changing
  32 + );
  33 + },
  34 + handleClear() {
  35 + this.dates = this.dates.map(() => null);
  36 + this.rangeState = {};
  37 + this.$emit('on-pick', this.dates);
  38 + this.handleConfirm();
  39 + // if (this.showTime) this.$refs.timePicker.handleClear();
  40 + },
  41 + handleConfirm(visible) {
  42 + this.$emit('on-pick', this.dates, visible);
  43 + },
  44 +
26 45 }
27 46 };
... ...