Skip to content

Commit 4cb6ffe

Browse files
Merge branch 'release/2.5.0'
2 parents 76f841c + 6fb1ff4 commit 4cb6ffe

File tree

20 files changed

+121
-56
lines changed

20 files changed

+121
-56
lines changed

docs/css/app.279467f4.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/css/app.bb77194d.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.bb77194d.css rel=preload as=style><link href=js/app.cb3df652.js rel=preload as=script><link href=js/chunk-vendors.5c79952b.js rel=preload as=script><link href=css/app.bb77194d.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.5c79952b.js></script><script src=js/app.cb3df652.js></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.279467f4.css rel=preload as=style><link href=js/app.ac586109.js rel=preload as=script><link href=js/chunk-vendors.a81c6b06.js rel=preload as=script><link href=css/app.279467f4.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.a81c6b06.js></script><script src=js/app.ac586109.js></script></body></html>

docs/js/app.ac586109.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/js/app.ac586109.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/js/app.cb3df652.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

docs/js/app.cb3df652.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/js/chunk-vendors.5c79952b.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

docs/js/chunk-vendors.5c79952b.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/js/chunk-vendors.a81c6b06.js

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/js/chunk-vendors.a81c6b06.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-ctk-date-time-picker",
3-
"version": "2.4.0",
3+
"version": "2.5.0",
44
"description": "A vue component for select date & time (by Chronotruck)",
55
"author": "Louis Mazel <[email protected]>",
66
"scripts": {

src/VueCtkDateTimePicker/_subs/CustomButton/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
class="custom-button-effect"
2222
/>
2323
<span
24-
class="custom-button-content flex align-center justify-content-center flex-1"
24+
class="custom-button-content flex align-center justify-content-center"
2525
:style="[colorStyle]"
2626
>
2727
<slot :style="[colorStyle]" />

src/VueCtkDateTimePicker/_subs/CustomInput/index.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
: null
8989
},
9090
hasClearButton () {
91-
return !this.noClearButton && !this.disabled && this.value
91+
return !this.noClearButton && !this.isDisabled && this.value
9292
},
9393
/**
9494
* Returns true if the field is disabled
@@ -164,6 +164,9 @@
164164
&-clear-button {
165165
position: absolute;
166166
right: 12px;
167+
top: 0px;
168+
bottom: 0px;
169+
margin: auto 0;
167170
}
168171
&.has-error {
169172
.field-input {

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<CustomButton
3939
v-for="m in [month]"
4040
:key="m.month"
41-
class="date-buttons lm-fs-16 padding-button"
41+
class="date-buttons lm-fs-16 padding-button flex-1"
4242
:color="color"
4343
:dark="dark"
4444
@click="selectingYearMonth = 'month'"
@@ -53,7 +53,7 @@
5353
<CustomButton
5454
v-for="y in [year]"
5555
:key="y"
56-
class="date-buttons lm-fs-16 padding-button"
56+
class="date-buttons lm-fs-16 padding-button flex-1"
5757
:color="color"
5858
:dark="dark"
5959
@click="selectingYearMonth = 'year'"

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -145,21 +145,10 @@
145145
return ArrayMinuteRange(0, 60, twoDigit, this.minuteInterval, this._disabledMinutes)
146146
},
147147
apms () {
148-
const ampm = this.isTwelveFormat
149-
? this.minTime
150-
? moment(this.minTime, 'hh:mm a').format('a')
151-
: this.maxTime
152-
? moment(this.maxTime, 'hh:mm a').format('a')
153-
: ''
154-
: ''
155-
const upper = ampm
156-
? [{ value: ampm.toUpperCase(), item: ampm.toUpperCase() }]
157-
: [{ value: 'AM', item: 'AM' }, { value: 'PM', item: 'PM' }]
158-
const lower = ampm
159-
? [{ value: ampm, item: ampm }]
160-
: [{ value: 'am', item: 'am' }, { value: 'pm', item: 'pm' }]
161148
return this.isTwelveFormat
162-
? this.format.includes('A') ? upper : lower
149+
? this.format.includes('A')
150+
? [{ value: 'AM', item: 'AM' }, { value: 'PM', item: 'PM' }]
151+
: [{ value: 'am', item: 'am' }, { value: 'pm', item: 'pm' }]
163152
: null
164153
},
165154
columns () {
@@ -288,9 +277,11 @@
288277
onScrollHours: debounce(function (scroll) {
289278
const value = this.getValue(scroll)
290279
const hour = this.isTwelveFormat
291-
? this.apm.toLowerCase() === 'am'
292-
? value + 1
293-
: (value + 1 + 12)
280+
? this.apm
281+
? this.apm.toLowerCase() === 'am'
282+
? value + 1
283+
: (value + 1 + 12)
284+
:value
294285
: value
295286
if (this.isHoursDisabled(hour)) return
296287
this.hour = hour === 24 && !this.isTwelveFormat ? 23 : hour
@@ -368,28 +359,30 @@
368359
return null
369360
}
370361
},
371-
initPositionView () {
362+
async initPositionView () {
372363
this.noScrollEvent = true
373364
const containers = ['hours', 'minutes']
374365
if (this.apms) containers.push('apms')
375-
setTimeout(() => {
376-
containers.forEach((container) => {
377-
const elem = this.$refs[container][0]
378-
elem.scrollTop = 0
379-
const selected = elem.querySelector(`.time-picker-column-item.active`)
380-
if (selected) {
381-
const boundsSelected = selected.getBoundingClientRect()
382-
const boundsElem = elem.getBoundingClientRect()
383-
const timePickerHeight = this.$refs['time-picker'].clientHeight
384-
if (boundsSelected && boundsElem) {
385-
elem.scrollTop = (28 / 2) + boundsSelected.top - boundsElem.top - timePickerHeight / 2
386-
}
366+
367+
await this.$nextTick()
368+
containers.forEach((container) => {
369+
const elem = this.$refs[container][0]
370+
if (!elem) return false
371+
372+
elem.scrollTop = 0
373+
const selected = elem.querySelector(`.time-picker-column-item.active`)
374+
if (selected) {
375+
const boundsSelected = selected.getBoundingClientRect()
376+
const boundsElem = elem.getBoundingClientRect()
377+
const timePickerHeight = this.$refs['time-picker'].clientHeight
378+
if (boundsSelected && boundsElem) {
379+
elem.scrollTop = (28 / 2) + boundsSelected.top - boundsElem.top - timePickerHeight / 2
387380
}
388-
setTimeout(() => {
389-
this.noScrollEvent = false
390-
}, 500)
391-
})
392-
}, 0)
381+
}
382+
setTimeout(() => {
383+
this.noScrollEvent = false
384+
}, 500)
385+
})
393386
},
394387
getAvailableHour () {
395388
const availableHours = this.hours.find((element) => {

src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,9 @@
373373
}
374374
}
375375
@media screen and (max-width: 415px) {
376+
$header-size: 58px;
377+
$footer-size: 41px;
378+
376379
.pickers-container {
377380
-webkit-flex-direction: column;
378381
-ms-flex-direction: column;
@@ -397,6 +400,11 @@
397400
bottom: 0;
398401
right: 0;
399402
left: 0;
403+
404+
.pickers-container {
405+
height: calc(100% - #{$header-size} - #{$footer-size});
406+
}
407+
400408
.datepicker {
401409
border-radius: 0 !important;
402410
bottom: 0 !important;

src/VueCtkDateTimePicker/index.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,10 @@
218218
updateMomentLocale(value, this.firstDayOfWeek)
219219
}
220220
},
221-
mounted () {
221+
created () {
222222
updateMomentLocale(this.locale, this.firstDayOfWeek)
223+
},
224+
mounted () {
223225
this.pickerPosition = this.getPosition()
224226
this.pickerOpen = this.open
225227
if (this.hasCustomElem) {

tests/unit/VueCtkDateTimePicker/CustomInput/index.spec.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { shallowMount } from '@vue/test-utils'
22

33
import CustomInput from '@/VueCtkDateTimePicker/_subs/CustomInput'
4+
import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
45

56
describe('VueCtkDateTimePicker/CustomInput', () => {
67
let wrapper
@@ -72,6 +73,64 @@ describe('VueCtkDateTimePicker/CustomInput', () => {
7273
/**
7374
* TODO: Add clear button test cases
7475
*/
76+
describe('clear button', () => {
77+
it('should be defined if the "noClearButton" prop is not defined, the input is not disabled and there is a value', () => {
78+
const wrapper = shallowMount(CustomInput, {
79+
propsData: {
80+
value: '2020-06-20 12:00:00',
81+
noClearButton: false
82+
},
83+
attrs: {
84+
disabled: false
85+
}
86+
})
87+
88+
const button = wrapper.find(CustomButton)
89+
expect(button.exists()).toBeTruthy()
90+
expect(button.is(CustomButton)).toBeTruthy()
91+
})
92+
93+
it('should undefined if the "noClearButton" prop is defined or the input is disabled or there is no value', () => {
94+
let wrapper = shallowMount(CustomInput, {
95+
propsData: {
96+
value: '2020-06-20 12:00:00',
97+
noClearButton: true
98+
},
99+
attrs: {
100+
disabled: false
101+
}
102+
})
103+
104+
let button = wrapper.find('.field-clear-button')
105+
expect(button.exists()).toBeFalsy()
106+
107+
wrapper = shallowMount(CustomInput, {
108+
propsData: {
109+
value: null,
110+
noClearButton: false
111+
},
112+
attrs: {
113+
disabled: false
114+
}
115+
})
116+
117+
button = wrapper.find('.field-clear-button')
118+
expect(button.exists()).toBeFalsy()
119+
120+
wrapper = shallowMount(CustomInput, {
121+
propsData: {
122+
value: '2020-06-20 12:00:00',
123+
noClearButton: false
124+
},
125+
attrs: {
126+
disabled: true
127+
}
128+
})
129+
130+
button = wrapper.find('.field-clear-button')
131+
expect(button.exists()).toBeFalsy()
132+
})
133+
})
75134

76135
afterEach(() => {
77136
wrapper.destroy()

0 commit comments

Comments
 (0)