Skip to content

Commit 47cadd7

Browse files
ParadeToParadeTo
committed
1 parent 594ef4c commit 47cadd7

12 files changed

+93
-103
lines changed

‎dev/App.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
<div class="container">
1010
<h2>DateRange</h2>
1111
<p>{{range.startDate.format("YYYY-MM-DD")}} ~ {{range.endDate.format("YYYY-MM-DD")}}</p>
12-
<date-range :openTransition="true" lang="zh" showLunar="true" :emitChangeOnStep0="true" class="calendar" :lang="lang" v-model="range"/>
12+
<date-range :openTransition="true" lang="zh" :showLunar="true" :emitChangeOnStep0="true" class="calendar" :lang="lang" v-model="range"/>
1313
</div>
1414
</div>
1515
</template>
1616
<script>
17-
import {Calendar, DateRange} from '../dist/vue-date-range.min'
17+
import {Calendar, DateRange} from '../src'
1818
import moment from 'moment'
1919
export default {
2020
components: {

‎karma.conf.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Karma configuration
22
// Generated on Mon Jun 26 2017 12:06:06 GMT+0800 (中国标准时间)
33

4-
module.exports = function(config) {
4+
module.exports = function (config) {
55
config.set({
66

77
// base path that will be used to resolve all patterns (eg. files, exclude)
@@ -41,25 +41,21 @@ module.exports = function(config) {
4141
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
4242
frameworks: ['mocha', 'sinon-chai'],
4343

44-
4544
// list of files / patterns to load in the browser
4645
files: [
4746
'test/unit/**/*.spec.js'
4847
],
4948

50-
5149
// list of files to exclude
5250
exclude: [
5351
],
5452

55-
5653
// preprocess matching files before serving them to the browser
5754
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
5855
preprocessors: {
5956
'test/unit/**/*.spec.js': ['webpack']
6057
},
6158

62-
6359
// test results reporter to use
6460
// possible values: 'dots', 'progress'
6561
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
@@ -73,25 +69,20 @@ module.exports = function(config) {
7369
// web server port
7470
port: 9876,
7571

76-
7772
// enable / disable colors in the output (reporters and logs)
7873
colors: true,
7974

80-
8175
// level of logging
8276
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
8377
logLevel: config.LOG_INFO,
8478

85-
8679
// enable / disable watching file and executing tests whenever any file changes
8780
autoWatch: true,
8881

89-
9082
// start these browsers
9183
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
9284
browsers: ['PhantomJS'],
9385

94-
9586
// Continuous Integration mode
9687
// if true, Karma captures browsers, runs the tests and exits
9788
singleRun: false,

‎src/Calendar.vue

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<div class="ayou-calendar" ref="calendar">
3-
<div class="month-year">
4-
<button class="arrow-button" style="float: left" @click.stop.prevent="changeMonthYear(-1)">
5-
<i class="arrow prev"></i>
2+
<div class="v-date-calendar" ref="calendar">
3+
<div class="v-date-month-year">
4+
<button class="v-date-arrow-button" style="float: left" @click.stop.prevent="changeMonthYear(-1)">
5+
<i class="v-date-arrow v-date-prev"></i>
66
</button>
7-
<span class="text" @click="handleMonthYearClick">
7+
<span class="v-date-text" @click="handleMonthYearClick">
88
<span>{{formatMonthYear}}</span>
99
</span>
10-
<button class="arrow-button" style="float: right" @click.stop.prevent="changeMonthYear(1)">
11-
<i class="arrow next"></i>
10+
<button class="v-date-arrow-button" style="float: right" @click.stop.prevent="changeMonthYear(1)">
11+
<i class="v-date-arrow v-date-prev"></i>
1212
</button>
1313
</div>
1414
<transition :name="openTransition ? 'fade' : ''" mode="out-in">
15-
<div class="wrapper" v-if="displayLevel === 1" key="day">
15+
<div class="v-date-wrapper" v-if="displayLevel === 1" key="day">
1616
<page-transition :openTransition="openTransition" :moveDirection="moveDirection" :toggleShow="toggleShow">
17-
<div class="week-days">
18-
<span v-for="day in weekDays">{{day}}</span>
17+
<div class="v-date-week-days">
18+
<span v-for="(day, index) in weekDays" :key="index">{{day}}</span>
1919
</div>
20-
<div class="days" >
20+
<div class="v-date-days" >
2121
<day-cell
2222
:key="dayKey(day)"
2323
:disable-days-before-today="disableDaysBeforeToday"
@@ -30,11 +30,11 @@
3030
:range="range"
3131
:day-class-func="dayClassFunc"
3232
@dayClick="handleDayClick"
33-
v-for="(day, index) in dayList"/>
33+
v-for="day in dayList"/>
3434
</div>
3535
</page-transition>
3636
</div>
37-
<div class="wrapper" v-if="displayLevel === 2" key="month">
37+
<div class="v-date-wrapper" v-if="displayLevel === 2" key="month">
3838
<page-transition :openTransition="openTransition" :moveDirection="moveDirection" :toggleShow="toggleShow">
3939
<div style="height: 100%;">
4040
<month-cell
@@ -48,7 +48,7 @@
4848
</div>
4949
</page-transition>
5050
</div>
51-
<div class="wrapper" v-if="displayLevel === 3" key="year">
51+
<div class="v-date-wrapper" v-if="displayLevel === 3" key="year">
5252
<page-transition :openTransition="openTransition" :moveDirection="moveDirection" :toggleShow="toggleShow">
5353
<div style="height: 100%;">
5454
<year-cell
@@ -390,19 +390,19 @@
390390
transform: scale(0);
391391
}
392392
393-
.ayou-calendar {
393+
.v-date-calendar {
394394
background-color: #fff;
395395
height: 500px;
396396
display: flex;
397397
flex-direction: column;
398-
.month-year {
398+
.v-date-month-year {
399399
text-align: center;
400400
font-size: 1.4rem;
401401
flex: 1;
402402
display: flex;
403403
justify-content: space-between;
404404
align-items: center;
405-
.arrow-button {
405+
.v-date-arrow-button {
406406
display: inline-block;
407407
box-sizing: border-box;
408408
width: 2rem;
@@ -412,30 +412,30 @@
412412
outline: none;
413413
background-color: #fff;
414414
}
415-
.arrow {
415+
.v-date-arrow {
416416
display: inline-block;
417417
height: 100%;
418418
line-height: 100%;
419419
border-top: 1px solid @primary;
420420
width: 10px;
421421
height: 10px;
422-
&.prev {
422+
&.v-date-prev {
423423
border-left: 1px solid @primary;
424424
transform: rotate(-45deg);
425425
}
426-
&.next {
426+
&.v-date-next {
427427
border-right: 1px solid @primary;
428428
transform: rotate(45deg);
429429
}
430430
}
431431
}
432432
433-
.wrapper {
433+
.v-date-wrapper {
434434
flex: 4;
435435
font-size: 0;
436436
position: relative;
437437
overflow: hidden;
438-
.week-days {
438+
.v-date-week-days {
439439
height: 10%;
440440
span {
441441
display: inline-block;
@@ -444,7 +444,7 @@
444444
text-align: center;
445445
}
446446
}
447-
.days {
447+
.v-date-days {
448448
height: 90%;
449449
font-size: 0;
450450
}

‎src/DayCell.vue

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<span class="ayou-day-cell cell"
2+
<span class="v-date-day-cell v-date-cell"
33
:class="dayClass"
44
:title="showLunar && lunarText"
55
@click.stop.prevent="handleDayClick()">
6-
<div class="cell-text">
7-
<p class="solar">{{day.dayMoment.date()}}</p>
8-
<p class="lunar" :class="{'festival': isFestival}" v-if="showLunar">{{lunarText}}</p>
6+
<div class="v-date-cell-text">
7+
<p class="v-date-solar">{{day.dayMoment.date()}}</p>
8+
<p class="v-date-lunar" :class="{'v-date-festival': isFestival}" v-if="showLunar">{{lunarText}}</p>
99
</div>
1010
</span>
1111
</template>
@@ -104,12 +104,12 @@
104104
dayClass() {
105105
const {isSelected, isInRange, day, isStartDay, isEndDay, isPassive} = this
106106
let cls = [{
107-
'selected': isSelected(),
108-
'passive': day.isPassive,
109-
'current-month': day.isCurrentMonth,
110-
'in-range': isInRange(),
111-
'start-day': isStartDay(),
112-
'end-day': isEndDay()
107+
'v-date-selected': isSelected(),
108+
'v-date-passive': day.isPassive,
109+
'v-date-current-month': day.isCurrentMonth,
110+
'v-date-in-range': isInRange(),
111+
'v-date-start-day': isStartDay(),
112+
'v-date-end-day': isEndDay()
113113
}]
114114
115115
if (typeof this.dayClassFunc === 'function') {
@@ -135,35 +135,35 @@
135135
<style lang="less" rel="stylesheet/less">
136136
@import "./_var.less";
137137
138-
.ayou-day-cell {
138+
.v-date-day-cell {
139139
width: 14.28%;
140140
height: 16.67%;
141141
142-
&.passive {
142+
&.v-date-passive {
143143
color: @grey;
144144
}
145145
146-
&.in-range {
146+
&.v-date-in-range {
147147
background-color: @primary-light;
148148
color: #fff;
149149
}
150150
151-
&.passive {
151+
&.v-date-passive {
152152
opacity: 0.4;
153153
}
154154
155-
.cell-text {
155+
.v-date-cell-text {
156156
p {
157157
line-height: 1.2;
158158
margin: 0;
159159
}
160-
.lunar {
160+
.v-date-lunar {
161161
font-size: 0.8rem;
162162
margin-top: 0.4em;
163163
overflow: hidden;
164164
text-overflow: ellipsis;
165165
white-space: nowrap;
166-
&.festival {
166+
&.v-date-festival {
167167
color: @secondary;
168168
}
169169
}

‎src/MonthCell.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<span class="cell month-cell" :class="{'selected': isSelected}">
3-
<span class="cell-text">
2+
<span class="v-date-cell v-date-month-cell" :class="{'v-date-selected': isSelected}">
3+
<span class="v-date-cell-text">
44
{{ month }}
55
</span>
66
</span>
@@ -37,7 +37,7 @@
3737
</script>
3838
<style lang="less" rel="stylesheet/less">
3939
@import "./_var.less";
40-
.month-cell {
40+
.v-date-month-cell {
4141
width: 25%;
4242
height: 33.33%;
4343
}

‎src/YearCell.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<span class="cell year-cell" :class="{'selected': isSelected}">
3-
<span class="cell-text">
2+
<span class="v-date-cell v-date-year-cell" :class="{'v-date-selected': isSelected}">
3+
<span class="v-date-cell-text">
44
{{ year }}
55
</span>
66
</span>
@@ -28,7 +28,7 @@
2828
</script>
2929
<style lang="less" rel="stylesheet/less">
3030
@import "./_var.less";
31-
.year-cell {
31+
.v-date-year-cell {
3232
width: 25%;
3333
height: 33.33%;
3434
}

‎src/_var.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
@secondary: #ff470f;
44
@grey: #dbdbdb;
55

6-
.cell {
6+
.v-date-cell {
77
display: inline-block;
88
font-size: 1rem;
99
text-align: center;
1010
position: relative;
1111
&:hover {
1212
cursor: pointer;
1313
}
14-
.cell-text {
14+
.v-date-cell-text {
1515
position: absolute;
1616
left: 50%;
1717
top: 50%;
@@ -20,7 +20,7 @@
2020
}
2121
}
2222

23-
.selected {
23+
.v-date-selected {
2424
background-color: @primary;
2525
color: #fff;
2626
}

‎src/utils.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
/**
22
* Created by ayou on 2018/3/8.
33
*/
4-
export const formatter = function (dayMoment, format="YYYY-MM-DD") {
4+
export const formatter = function (dayMoment, format = 'YYYY-MM-DD') {
55
return dayMoment.format(format)
66
}
77

8-
9-
export const START_YEAR = 1609
8+
export const START_YEAR = 1609

0 commit comments

Comments
 (0)