Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

initial work on typescript support #219

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

initial work on typescript support #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,21 @@ module.exports = {
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
'eslint:recommended',
"@vue/typescript/recommended"
],
parserOptions: {
sourceType: "module",
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/camelcase": "off",
"@typescript-eslint/kebab": "off",
"@typescript-eslint/class-name-casing": "off",
"@typescript-eslint/no-this-alias": "off",
"prefer-rest-params": "off"
}
}
5,105 changes: 3,739 additions & 1,366 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 13 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,35 @@
"components:parse": "node ./docs/.scripts/parse.js",
"components:watch": "watch \"npm run components:parse\" ./src",
"lint": "vue-cli-service lint",
"lint:fix": "vue-cli-service lint --fix",
"lib": "vue-cli-service build --target lib --name vue2-daterange-picker ./src/index.js",
"docs:dev": "concurrently \"npm run components:watch\" \"vuepress dev docs\"",
"docs:build": "vuepress build docs",
"prepublishOnly": "npm run lib",
"unit": "vue-cli-service test:unit"
},
"dependencies": {
"vue": "^2.6.10"
"moment": "^2.29.1",
"vue": "^2.6.10",
"vue-typed-mixins": "^0.2.0"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/runtime": "^7.7.4",
"@types/chai": "^4.2.14",
"@types/mocha": "^8.0.4",
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@vue/cli-plugin-babel": "^4.1.1",
"@vue/cli-plugin-eslint": "^4.1.1",
"@vue/cli-plugin-typescript": "^4.5.9",
"@vue/cli-plugin-unit-mocha": "^4.1.1",
"@vue/cli-service": "^4.1.1",
"@vue/eslint-config-typescript": "^5.0.1",
"@vue/test-utils": "^1.0.0-beta.30",
"@vuedoc/parser": "^1.4.0",
"@vuepress/plugin-google-analytics": "^1.2.0",
"@vuepress/plugin-back-to-top": "^1.2.0",
"@vuepress/plugin-google-analytics": "^1.2.0",
"acorn": "^7.1.0",
"autoprefixer": "^9.7.0",
"babel-eslint": "^10.0.3",
Expand All @@ -54,6 +63,8 @@
"mockdate": "^2.0.5",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.0",
"ts-migrate": "^0.1.10",
"typescript": "~3.9.7",
"vue-template-compiler": "^2.6.10",
"vuepress": "^1.2",
"webpack": "^4.41.2"
Expand Down
95 changes: 53 additions & 42 deletions src/components/Calendar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
<slot name="date-slot" v-for="(date, idx) in dateRow">
<td
:class="dayClass(date)"
@click="$emit('dateClick', date)"
@mouseover="$emit('hoverDate', date)"
@click="$emit('date-click', date)"
@mouseover="$emit('hover-date', date)"
:key="idx"
>
{{date.getDate()}}
Expand All @@ -46,17 +46,21 @@
</table>
</template>

<script>
<script lang="ts">
import dateUtilMixin from './dateUtilMixin'
import mixins from "vue-typed-mixins";
import { PropType } from "vue";

export default {
mixins: [dateUtilMixin],
// export default Vue.extend({
export default mixins(dateUtilMixin).extend({
// mixins: [dateUtilMixin],
name: 'calendar',
props: {
monthDate: Date,
localeData: Object,
start: Date,
start: Date ,
end: Date,
locale: Object,
minDate: Date,
maxDate: Date,
showDropdowns: {
Expand All @@ -73,7 +77,9 @@
}
},
data () {
let currentMonthDate = this.monthDate || this.start || new Date()
const monthDate = this.monthDate ? typeof this.monthDate === 'string' ? new Date(this.monthDate) : this.monthDate : null
const start = this.start ? typeof this.start === 'string' ? new Date(this.start) : this.start : null
const currentMonthDate = monthDate || start || new Date()
return {
currentMonthDate,
year_text: currentMonthDate.getFullYear(),
Expand All @@ -86,8 +92,8 @@
nextMonthClick() {
this.changeMonthDate(this.$dateUtil.nextMonth(this.currentMonthDate))
},
changeMonthDate (date, emit = true) {
let year_month = this.$dateUtil.yearMonth(this.currentMonthDate)
changeMonthDate (date: Date, emit = true) {
const year_month = this.$dateUtil.yearMonth(this.currentMonthDate)
this.currentMonthDate = this.$dateUtil.validateDateRange(date, this.minDate, this.maxDate)
// console.info(date, this.currentMonthDate)
if(emit && year_month !== this.$dateUtil.yearMonth(this.currentMonthDate)) {
Expand All @@ -98,48 +104,52 @@
}
this.checkYear()
},
dayClass (date) {
let dt = new Date(date)
dayClass (date: Date) {
const dt = new Date(date)
dt.setHours(0, 0, 0, 0)
let start = new Date(this.start)
const start = new Date(this.start)
start.setHours(0, 0, 0, 0)
let end = new Date(this.end)
const end = new Date(this.end)
end.setHours(0, 0, 0, 0)

let classes = {
const classes = {
off: date.getMonth() + 1 !== this.month,
weekend: date.getDay() === 6 || date.getDay() === 0,
today: dt.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0),
active: dt.setHours(0, 0, 0, 0) == new Date(this.start).setHours(0, 0, 0, 0) || dt.setHours(0, 0, 0, 0) == new Date(this.end).setHours(0, 0, 0, 0),
'in-range': dt >= start && dt <= end,
'start-date': dt.getTime() === start.getTime(),
'end-date': dt.getTime() === end.getTime(),
disabled: (this.minDate && dt.getTime() < this.minDate.getTime())
|| (this.maxDate && dt.getTime() > this.maxDate.getTime()),
disabled: (this.minDate && dt.getTime() < new Date(this.minDate).getTime())
|| (this.maxDate && dt.getTime() > new Date(this.maxDate).getTime()),
}
return this.dateFormat ? this.dateFormat(classes, date) : classes

},
checkYear () {
if(this.$refs.yearSelect !== document.activeElement) {
this.$nextTick(() => {
this.year_text = this.monthDate.getFullYear()
this.year_text = new Date(this.monthDate).getFullYear()
})
}
}
},
computed: {
monthName () {
return this.locale.monthNames[this.currentMonthDate.getMonth()]
// eslint-disable-next-line @typescript-eslint/no-this-alias
const vm: any = this;
const month = vm.currentMonthDate.getMonth();
return this.locale.monthNames[month]
},
year: {
get () {
const vm: any = this;
//return this.currentMonthDate.getFullYear()
return this.year_text
return vm.year_text
},
set (value) {
set (value: any) {
this.year_text = value
let newDate = this.$dateUtil.validateDateRange(new Date(value, this.month, 1), this.minDate, this.maxDate)
const newDate = this.$dateUtil.validateDateRange(new Date(value, this.month, 1), this.minDate, this.maxDate)
if(this.$dateUtil.isValidDate(newDate)) {
this.$emit('change-month', {
month: newDate.getMonth(),
Expand All @@ -150,10 +160,11 @@
},
month: {
get () {
return this.currentMonthDate.getMonth() + 1
const vm: any = this;
return vm.currentMonthDate.getMonth() + 1
},
set (value) {
let newDate = this.$dateUtil.validateDateRange(new Date(this.year, value - 1, 1), this.minDate, this.maxDate)
set (value: any) {
const newDate = this.$dateUtil.validateDateRange(new Date(this.year, value - 1, 1), this.minDate, this.maxDate)

this.$emit('change-month', {
month: newDate.getMonth() + 1,
Expand All @@ -162,16 +173,16 @@
}
},
calendar () {
let month = this.month
let year = this.currentMonthDate.getFullYear()
let firstDay = new Date(year, month - 1, 1)
let lastMonth = this.$dateUtil.prevMonth(firstDay).getMonth() + 1
let lastYear = this.$dateUtil.prevMonth(firstDay).getFullYear()
let daysInLastMonth = new Date(lastYear, month - 1, 0).getDate()
const month = this.month
const year = this.currentMonthDate.getFullYear()
const firstDay = new Date(year, month - 1, 1)
const lastMonth = this.$dateUtil.prevMonth(firstDay).getMonth() + 1
const lastYear = this.$dateUtil.prevMonth(firstDay).getFullYear()
const daysInLastMonth = new Date(lastYear, month - 1, 0).getDate()

let dayOfWeek = firstDay.getDay()
const dayOfWeek = firstDay.getDay()

let calendar = []
const calendar: any = []

for (let i = 0; i < 6; i++) {
calendar[i] = [];
Expand All @@ -184,7 +195,7 @@
if (dayOfWeek === this.locale.firstDay)
startDay = daysInLastMonth - 6;

let curDate = new Date(lastYear, lastMonth - 1, startDay, 12, 0, 0);
const curDate = new Date(lastYear, lastMonth - 1, startDay, 12, 0, 0);
for (let i = 0, col = 0, row = 0; i < 6 * 7; i++, col++, curDate.setDate(curDate.getDate() + 1)) {
if (i > 0 && col % 7 === 0) {
col = 0;
Expand All @@ -196,29 +207,29 @@
return calendar
},
months () {
let monthsData = this.locale.monthNames.map((m, idx) => ({ label: m, value: idx }))
const monthsData = this.locale.monthNames.map((m: any, idx: any) => ({ label: m, value: idx }))

if (this.maxDate && this.minDate) {
let y = this.maxDate.getFullYear() - this.minDate.getFullYear();
const y = new Date(this.maxDate).getFullYear() - new Date(this.minDate).getFullYear();
if (y < 2) {
// get months
let months = [];
const months: any = [];
if (y < 1) {
for (let i = this.minDate.getMonth(); i <= this.maxDate.getMonth(); i++) {
for (let i = new Date(this.minDate).getMonth(); i <= new Date(this.maxDate).getMonth(); i++) {
months.push(i);
}
} else {
for (let i = 0; i <= this.maxDate.getMonth(); i++) {
for (let i = 0; i <= new Date(this.maxDate).getMonth(); i++) {
months.push(i);
}
for (let i = this.minDate.getMonth(); i < 12; i++) {
for (let i = new Date(this.minDate).getMonth(); i < 12; i++) {
months.push(i);
}
}
// do filter
if (months.length > 0) {
return monthsData.filter((m) => {
return months.find(i => m.value === i) > -1;
return monthsData.filter((m: any) => {
return months.find((i: any) => m.value === i) > -1;
});
}
}
Expand All @@ -234,7 +245,7 @@
}
}
}
}
})
</script>

<style scoped lang="scss">
Expand Down
34 changes: 22 additions & 12 deletions src/components/CalendarRanges.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,55 +22,65 @@
</div>
</template>

<script>
<script lang="ts">
import dateUtilMixin from './dateUtilMixin'

export default {
mixins: [dateUtilMixin],
import Vue from "vue";

import mixins from "vue-typed-mixins";

// export default Vue.extend({
export default mixins(dateUtilMixin).extend({
// mixins: [dateUtilMixin],
name: 'calendar-ranges',
props: {
ranges: Object,
ranges: Array as () => any[],
selected: Object,
localeData: Object,
alwaysShowCalendars: Boolean,
},
data () {
return {
test: false,
customRangeActive: false
}
},
methods: {
clickRange (range) {
this.customRangeActive = false
clickRange (range: any) {
const vm: any = this;
vm.customRangeActive = false
this.$emit('clickRange', range)
},
clickCustomRange () {
this.customRangeActive = true
const vm: any = this;
vm.customRangeActive = true
this.$emit('showCustomRange')
},
range_class (range) {
range_class (range: any) {
return { active: range.selected === true };
}
},
computed: {
listedRanges () {
if(!this.ranges)
return false
return Object.keys(this.ranges).map(value => {
return Object.keys(this.ranges).map((value: any) => {
return {
label: value,
value: this.ranges[value],
value: (this.ranges as any)[value],
selected:
this.$dateUtil.isSame(this.selected.startDate, this.ranges[value][0]) &&
this.$dateUtil.isSame(this.selected.endDate, this.ranges[value][1])
};
})
},
selectedRange () {
return this.listedRanges.find(r => r.selected === true)
const vm: any = this;
return vm.listedRanges.find((r: any) => r.selected === true)
},
showCustomRangeLabel () {
return !this.alwaysShowCalendars;
}
},
}
})
</script>
Loading