other / mew-iview

Commit e32b86e97f1239114d82ad37bdc2361895925426

Authored by Sergio Crisostomo
1 parent 11867c87

move date.vue to subfolder

Showing 2 changed files with 162 additions and 261 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/panel/Date/date.vue 0 → 100644
  Show/Hide comments   View file @e32b86e
  1 +<template>
  2 + <div :class="classes" @mousedown.prevent>
  3 + <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
  4 + <div
  5 + :class="[prefixCls + '-shortcut']"
  6 + v-for="shortcut in shortcuts"
  7 + @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
  8 + </div>
  9 + <div :class="[prefixCls + '-body']">
  10 + <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
  11 + <span
  12 + :class="iconBtnCls('prev', '-double')"
  13 + @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
  14 + <span
  15 + :class="iconBtnCls('prev')"
  16 + @click="changeMonth(-1)"
  17 + v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
  18 + <date-panel-label
  19 + :date-panel-label="datePanelLabel"
  20 + :current-view="currentView"
  21 + :date-prefix-cls="datePrefixCls"></date-panel-label>
  22 + <span
  23 + :class="iconBtnCls('next', '-double')"
  24 + @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
  25 + <span
  26 + :class="iconBtnCls('next')"
  27 + @click="changeMonth(+1)"
  28 + v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
  29 + </div>
  30 + <div :class="[prefixCls + '-content']">
  31 + <component
  32 + :is="pickerTable"
  33 + ref="pickerTable"
  34 + v-if="currentView !== 'time'"
  35 + :table-date="panelDate"
  36 + :value="dates"
  37 + :selection-mode="selectionMode"
  38 + :disabled-date="disabledDate"
  39 + @on-pick="handlePick"
  40 + @on-pick-click="handlePickClick"
  41 + ></component>
  42 + </div>
  43 + <div :class="[prefixCls + '-content']" v-show="isTime">
  44 + <time-picker
  45 + ref="timePicker"
  46 + v-if="currentView === 'time'"
  47 + :value="dates"
  48 + :format="format"
  49 + :time-disabled="timeDisabled"
  50 + @on-pick="handlePick"
  51 + @on-pick-click="handlePickClick"
  52 + @on-pick-clear="handlePickClear"
  53 + @on-pick-success="handlePickSuccess"
  54 + @on-pick-toggle-time="handleToggleTime"
  55 + ></time-picker>
  56 + </div>
  57 + <Confirm
  58 + v-if="confirm"
  59 + :show-time="showTime"
  60 + :is-time="isTime"
  61 + @on-pick-toggle-time="handleToggleTime"
  62 + @on-pick-clear="handlePickClear"
  63 + @on-pick-success="handlePickSuccess"
  64 + ></Confirm>
  65 + </div>
  66 + </div>
  67 +</template>
  68 +<script>
  69 + import Icon from '../../../icon/icon.vue';
  70 + import DateTable from '../../base/date-table.vue';
  71 + import YearTable from '../../base/year-table.vue';
  72 + import MonthTable from '../../base/month-table.vue';
  73 + import TimePicker from '../Time/time.vue';
  74 + import Confirm from '../../base/confirm.vue';
  75 + import datePanelLabel from './date-panel-label.vue';
  76 +
  77 + import Mixin from '../panel-mixin';
  78 + import DateMixin from './date-panel-mixin';
  79 + import Locale from '../../../../mixins/locale';
  80 +
  81 + import { siblingMonth, formatDateLabels } from '../../util';
  82 +
  83 + const prefixCls = 'ivu-picker-panel';
  84 + const datePrefixCls = 'ivu-date-picker';
  85 +
  86 + export default {
  87 + name: 'DatePickerPanel',
  88 + mixins: [ Mixin, Locale, DateMixin ],
  89 + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
  90 + props: {
  91 + // in the mixin
  92 + },
  93 + data () {
  94 + const dates = this.value.slice().sort();
  95 + return {
  96 + prefixCls: prefixCls,
  97 + datePrefixCls: datePrefixCls,
  98 + currentView: this.selectionMode || 'date',
  99 + dates: dates,
  100 + panelDate: dates[0] || new Date()
  101 + };
  102 + },
  103 + computed: {
  104 + classes () {
  105 + return [
  106 + `${prefixCls}-body-wrapper`,
  107 + {
  108 + [`${prefixCls}-with-sidebar`]: this.shortcuts.length
  109 + }
  110 + ];
  111 + },
  112 + pickerTable(){
  113 + return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
  114 + },
  115 + datePanelLabel () {
  116 + const locale = this.t('i.locale');
  117 + const datePanelLabel = this.t('i.datepicker.datePanelLabel');
  118 + const date = this.panelDate;
  119 + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
  120 +
  121 + const handler = type => {
  122 + return () => (this.currentView = type);
  123 + };
  124 +
  125 + return {
  126 + separator: separator,
  127 + labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
  128 + };
  129 + },
  130 + timeDisabled(){
  131 + return !this.dates[0];
  132 + }
  133 + },
  134 + watch: {
  135 + value (newVal) {
  136 + this.dates = newVal;
  137 + },
  138 + selectionMode(){
  139 + this.currentView = this.selectionMode;
  140 + },
  141 + currentView (val) {
  142 + this.$emit('on-selection-mode-change', val);
  143 + }
  144 + },
  145 + methods: {
  146 + changeYear(dir){
  147 + this.panelDate = siblingMonth(this.panelDate, dir * 12);
  148 + },
  149 + changeMonth(dir){
  150 + this.panelDate = siblingMonth(this.panelDate, dir);
  151 + },
  152 + handlePick (value) {
  153 + const {selectionMode} = this;
  154 + if (selectionMode === 'year') value = new Date(value, 0, 1);
  155 + else if (selectionMode === 'month') value = new Date(this.panelDate.getFullYear(), value, 1);
  156 + else value = new Date(value);
  157 +
  158 + this.$emit('on-pick', value);
  159 + },
  160 + },
  161 + };
  162 +</script>
... ...
src/components/date-picker/panel/date.vue deleted
View file @11867c8
1   -<template>
2   - <div :class="classes" @mousedown.prevent>
3   - <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
4   - <div
5   - :class="[prefixCls + '-shortcut']"
6   - v-for="shortcut in shortcuts"
7   - @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
8   - </div>
9   - <div :class="[prefixCls + '-body']">
10   - <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
11   - <span
12   - :class="iconBtnCls('prev', '-double')"
13   - @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
14   - <span
15   - :class="iconBtnCls('prev')"
16   - @click="changeMonth(-1)"
17   - v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
18   - <date-panel-label
19   - :date-panel-label="datePanelLabel"
20   - :current-view="currentView"
21   - :date-prefix-cls="datePrefixCls"/>
22   - <span
23   - :class="iconBtnCls('next', '-double')"
24   - @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
25   - <span
26   - :class="iconBtnCls('next')"
27   - @click="changeMonth(+1)"
28   - v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
29   - </div>
30   - <div :class="[prefixCls + '-content']">
31   - <date-table
32   - v-show="currentView === 'date'"
33   - :year="year"
34   - :month="month"
35   - :date="date"
36   - :value="value"
37   - :selection-mode="selectionMode"
38   - :disabled-date="disabledDate"
39   - @on-pick="handleDatePick"
40   - @on-pick-click="handlePickClick"></date-table>
41   - <year-table
42   - ref="yearTable"
43   - v-show="currentView === 'year'"
44   - :year="year"
45   - :date="date"
46   - :selection-mode="selectionMode"
47   - :disabled-date="disabledDate"
48   - @on-pick="handleYearPick"
49   - @on-pick-click="handlePickClick"></year-table>
50   - <month-table
51   - ref="monthTable"
52   - v-show="currentView === 'month'"
53   - :month="month"
54   - :date="date"
55   - :selection-mode="selectionMode"
56   - :disabled-date="disabledDate"
57   - @on-pick="handleMonthPick"
58   - @on-pick-click="handlePickClick"></month-table>
59   - <time-picker
60   - ref="timePicker"
61   - show-date
62   - v-show="currentView === 'time'"
63   - @on-pick="handleTimePick"
64   - @on-pick-click="handlePickClick"></time-picker>
65   - </div>
66   - <Confirm
67   - v-if="confirm"
68   - :show-time="showTime"
69   - :is-time="isTime"
70   - @on-pick-toggle-time="handleToggleTime"
71   - @on-pick-clear="handlePickClear"
72   - @on-pick-success="handlePickSuccess"></Confirm>
73   - </div>
74   - </div>
75   -</template>
76   -<script>
77   - import Icon from '../../icon/icon.vue';
78   - import DateTable from '../base/date-table.vue';
79   - import YearTable from '../base/year-table.vue';
80   - import MonthTable from '../base/month-table.vue';
81   - import TimePicker from './time.vue';
82   - import Confirm from '../base/confirm.vue';
83   - import datePanelLabel from './date-panel-label.vue';
84   -
85   - import Mixin from './mixin';
86   - import Locale from '../../../mixins/locale';
87   -
88   - import { initTimeDate, siblingMonth, formatDateLabels } from '../util';
89   -
90   - const prefixCls = 'ivu-picker-panel';
91   - const datePrefixCls = 'ivu-date-picker';
92   -
93   - export default {
94   - name: 'DatePicker',
95   - mixins: [ Mixin, Locale ],
96   - components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
97   - data () {
98   - return {
99   - prefixCls: prefixCls,
100   - datePrefixCls: datePrefixCls,
101   - shortcuts: [],
102   - currentView: 'date',
103   - date: initTimeDate(),
104   - value: '',
105   - showTime: false,
106   - selectionMode: 'day',
107   - disabledDate: '',
108   - year: null,
109   - month: null,
110   - confirm: false,
111   - isTime: false,
112   - format: 'yyyy-MM-dd'
113   - };
114   - },
115   - computed: {
116   - classes () {
117   - return [
118   - `${prefixCls}-body-wrapper`,
119   - {
120   - [`${prefixCls}-with-sidebar`]: this.shortcuts.length
121   - }
122   - ];
123   - },
124   - datePanelLabel () {
125   - if (!this.year) return null; // not ready yet
126   - const locale = this.t('i.locale');
127   - const datePanelLabel = this.t('i.datepicker.datePanelLabel');
128   - const date = new Date(this.year, this.month);
129   - const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
130   -
131   - const handler = type => {
132   - return () => (this.currentView = type);
133   - };
134   -
135   - return {
136   - separator: separator,
137   - labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
138   - };
139   - }
140   - },
141   - watch: {
142   - value (newVal) {
143   - if (!newVal) return;
144   - newVal = new Date(newVal);
145   - if (!isNaN(newVal)) {
146   - this.date = newVal;
147   - this.setMonthYear(newVal);
148   - }
149   - if (this.showTime) this.$refs.timePicker.value = newVal;
150   - },
151   - date (val) {
152   - if (this.showTime) this.$refs.timePicker.date = val;
153   - },
154   - format (val) {
155   - if (this.showTime) this.$refs.timePicker.format = val;
156   - },
157   - currentView (val) {
158   - if (val === 'time') this.$refs.timePicker.updateScroll();
159   - }
160   - },
161   - methods: {
162   - resetDate () {
163   - this.date = new Date(this.date);
164   - },
165   - setMonthYear(date){
166   - this.month = date.getMonth();
167   - this.year = date.getFullYear();
168   - },
169   - handleClear () {
170   - this.date = new Date();
171   - this.$emit('on-pick', '');
172   - if (this.showTime) this.$refs.timePicker.handleClear();
173   - },
174   - resetView (reset = false) {
175   - if (this.currentView !== 'time' || reset) {
176   - if (this.selectionMode === 'month') {
177   - this.currentView = 'month';
178   - } else if (this.selectionMode === 'year') {
179   - this.currentView = 'year';
180   - } else {
181   - this.currentView = 'date';
182   - }
183   - }
184   - this.setMonthYear(this.date);
185   - if (reset) this.isTime = false;
186   - },
187   - changeYear(dir){
188   - if (this.currentView === 'year') {
189   - this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
190   - } else {
191   - this.year+= dir;
192   - this.date = siblingMonth(this.date, dir * 12);
193   - }
194   - },
195   - changeMonth(dir){
196   - this.date = siblingMonth(this.date, dir);
197   - this.setMonthYear(this.date);
198   - },
199   - handleToggleTime () {
200   - if (this.currentView === 'date') {
201   - this.currentView = 'time';
202   - this.isTime = true;
203   - } else if (this.currentView === 'time') {
204   - this.currentView = 'date';
205   - this.isTime = false;
206   - }
207   - },
208   - handleYearPick(year, close = true) {
209   - this.year = year;
210   - if (!close) return;
211   -
212   - this.date.setFullYear(year);
213   - if (this.selectionMode === 'year') {
214   - this.$emit('on-pick', new Date(year, 0, 1));
215   - } else {
216   - this.currentView = 'month';
217   - }
218   -
219   - this.resetDate();
220   - },
221   - handleMonthPick (month) {
222   - this.month = month;
223   - this.date.setMonth(month);
224   - if (this.selectionMode !== 'month') {
225   - this.currentView = 'date';
226   - this.resetDate();
227   - } else {
228   - this.year && this.date.setFullYear(this.year);
229   - this.resetDate();
230   - const value = new Date(this.date.getFullYear(), month, 1);
231   - this.$emit('on-pick', value);
232   - }
233   - },
234   - handleDatePick (value) {
235   - if (this.selectionMode === 'day') {
236   - this.$emit('on-pick', new Date(value.getTime()));
237   - this.date = new Date(value);
238   - }
239   - },
240   - handleTimePick (date) {
241   - this.handleDatePick(date);
242   - }
243   - },
244   - mounted () {
245   - if (this.selectionMode === 'month') {
246   - this.currentView = 'month';
247   - }
248   -
249   - if (this.date && !this.year) {
250   - this.setMonthYear(this.date);
251   - }
252   - if (this.showTime) {
253   - // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
254   - this.$refs.timePicker.date = this.date;
255   - this.$refs.timePicker.value = this.value;
256   - this.$refs.timePicker.format = this.format;
257   - this.$refs.timePicker.showDate = true;
258   - }
259   - }
260   - };
261   -</script>