From ef70b6151bda92775df9936dce0c7f9a353a4852 Mon Sep 17 00:00:00 2001 From: zhangchizi Date: Tue, 22 Sep 2020 03:55:47 +0800 Subject: [PATCH] Add declarations for 'vue-nice-dates' (#47787) * Add declarations for 'vue-nice-dates' * remove useless identifier * Revert "remove useless identifier" This reverts commit 830f4d7c2c06eec2d55948cdb170e0052c21d53a. * change types of 'START_DATE' and 'END_DATE' --- types/vue-nice-dates/Calendar.d.ts | 31 +++++++++ types/vue-nice-dates/CalendarDay.d.ts | 29 ++++++++ types/vue-nice-dates/CalendarGrid.d.ts | 66 +++++++++++++++++++ types/vue-nice-dates/CalendarNavigation.d.ts | 21 ++++++ types/vue-nice-dates/CalendarWeekHeader.d.ts | 13 ++++ types/vue-nice-dates/DatePicker.d.ts | 25 +++++++ types/vue-nice-dates/DatePickerCalendar.d.ts | 26 ++++++++ types/vue-nice-dates/DateRangePicker.d.ts | 37 +++++++++++ .../DateRangePickerCalendar.d.ts | 39 +++++++++++ types/vue-nice-dates/Popover.d.ts | 9 +++ types/vue-nice-dates/index.d.ts | 20 ++++++ types/vue-nice-dates/package.json | 7 ++ types/vue-nice-dates/shared.d.ts | 42 ++++++++++++ types/vue-nice-dates/tsconfig.json | 24 +++++++ types/vue-nice-dates/tslint.json | 1 + types/vue-nice-dates/vue-nice-dates-tests.ts | 53 +++++++++++++++ 16 files changed, 443 insertions(+) create mode 100644 types/vue-nice-dates/Calendar.d.ts create mode 100644 types/vue-nice-dates/CalendarDay.d.ts create mode 100644 types/vue-nice-dates/CalendarGrid.d.ts create mode 100644 types/vue-nice-dates/CalendarNavigation.d.ts create mode 100644 types/vue-nice-dates/CalendarWeekHeader.d.ts create mode 100644 types/vue-nice-dates/DatePicker.d.ts create mode 100644 types/vue-nice-dates/DatePickerCalendar.d.ts create mode 100644 types/vue-nice-dates/DateRangePicker.d.ts create mode 100644 types/vue-nice-dates/DateRangePickerCalendar.d.ts create mode 100644 types/vue-nice-dates/Popover.d.ts create mode 100644 types/vue-nice-dates/index.d.ts create mode 100644 types/vue-nice-dates/package.json create mode 100644 types/vue-nice-dates/shared.d.ts create mode 100644 types/vue-nice-dates/tsconfig.json create mode 100644 types/vue-nice-dates/tslint.json create mode 100644 types/vue-nice-dates/vue-nice-dates-tests.ts diff --git a/types/vue-nice-dates/Calendar.d.ts b/types/vue-nice-dates/Calendar.d.ts new file mode 100644 index 0000000000..05be477525 --- /dev/null +++ b/types/vue-nice-dates/Calendar.d.ts @@ -0,0 +1,31 @@ +import { VueConstructor } from 'vue'; +import { DateLocale, Modifiers, ModifiersClassNames } from './shared.d'; + +export const Calendar: Calendar; + +export interface Calendar extends VueConstructor { + props: { + locale: DateLocale; + date: Date | string; + month?: Date; + modifiers: Modifiers; + modifiersClassNames: ModifiersClassNames; + minimumDate: Date | null; + maximumDate: Date | null; + }; + data: () => { + receivedMonth?: Date | null; + $isChangedFromInput: boolean; + }; + computed: { + mergedModifiers: { + [propName: string]: (date: Date) => boolean; + }; + }; + watch: { + [propName: string]: (date: Date | string) => void; + }; + methods: { + [propName: string]: (date?: Date | string) => void; + }; +} diff --git a/types/vue-nice-dates/CalendarDay.d.ts b/types/vue-nice-dates/CalendarDay.d.ts new file mode 100644 index 0000000000..36c447b131 --- /dev/null +++ b/types/vue-nice-dates/CalendarDay.d.ts @@ -0,0 +1,29 @@ +import { VueConstructor } from 'vue'; +import { DateLocale, Modifiers, ModifiersClassNames } from './shared.d'; + +export const CalendarDay: CalendarDay; + +export interface CalendarDay extends VueConstructor { + props: { + locale: DateLocale; + date: Date; + height: number; + modifiers: Modifiers; + modifiersClassNames: ModifiersClassNames; + }; + data: () => { + dayOfMonth: boolean; + }; + computed: { + computedModifiersClassNames: { + [propName: string]: string; + }; + computedModifiers: { + [propName: string]: ((date: Date) => boolean) | boolean; + }; + dayClassNames: { + [propName: string]: ((date: Date) => boolean) | boolean; + }; + monthString: string; + }; +} diff --git a/types/vue-nice-dates/CalendarGrid.d.ts b/types/vue-nice-dates/CalendarGrid.d.ts new file mode 100644 index 0000000000..cec9c3bdf3 --- /dev/null +++ b/types/vue-nice-dates/CalendarGrid.d.ts @@ -0,0 +1,66 @@ +import { VueConstructor } from 'vue'; +import { Locale } from 'date-fns'; +import { DateLocale, Modifiers, ModifiersClassNames } from './shared.d'; + +export const CalendarGrid: CalendarGrid; + +export interface CalendarGrid extends VueConstructor { + props: { + locale: DateLocale; + month: Date; + transitionDuration: number; + modifiers: Modifiers; + modifiersClassNames: ModifiersClassNames; + }; + data: () => { + startDate: Date | null; + endDate: Date | null; + cellHeight: number; + isWide: boolean; + offset: number; + origin: string; + transition: boolean; + days: Date[]; + $timeoutId: null | number; + $hasMounted: boolean; + }; + computed: { + classObject: { + [propName: string]: boolean; + }; + styleObject: { + [propName: string]: string; + }; + styleObjectGrid: { + [propName: string]: string; + }; + }; + watch: { + [propName: string]: (newValue: Date, oldValue: Date) => void; + }; + methods: { + resetData(date: Date): void; + initCell(): void; + generateDays(): void; + handleMouseLeaveDates(): void; + handleClickDate(date: Date): void; + handleMouseEnterDate(date: Date): void; + generateModifiers( + date: Date, + ): { + [propName: string]: boolean; + }; + computeModifiers( + modifiers: any, + date: Date, + ): { + [propName: string]: boolean; + }; + lightFormat(date: Date, format?: string): string; + getStartDate(date: Date, locale: Locale): Date; + getEndDate(date: Date, locale: Locale): Date; + rowsInMonth(date: Date, locale: Locale): number; + rowsBetweenDates(startDate: Date, endDate: Date, locale: Locale): number; + transitionToCurrentMonth(newValue: Date, oldValue: Date): void; + }; +} diff --git a/types/vue-nice-dates/CalendarNavigation.d.ts b/types/vue-nice-dates/CalendarNavigation.d.ts new file mode 100644 index 0000000000..03cff33766 --- /dev/null +++ b/types/vue-nice-dates/CalendarNavigation.d.ts @@ -0,0 +1,21 @@ +import { VueConstructor } from 'vue'; +import { DateLocale } from './shared.d'; + +export const CalendarNavigation: CalendarNavigation; + +export interface CalendarNavigation extends VueConstructor { + props: { + locale: DateLocale; + month: Date; + minimumDate: Date | null; + maximumDate: Date | null; + }; + computed: { + isMinimumMonth: boolean; + isMaximumMonth: boolean; + monthText: string; + }; + methods: { + [propName: string]: () => void; + }; +} diff --git a/types/vue-nice-dates/CalendarWeekHeader.d.ts b/types/vue-nice-dates/CalendarWeekHeader.d.ts new file mode 100644 index 0000000000..2af911849f --- /dev/null +++ b/types/vue-nice-dates/CalendarWeekHeader.d.ts @@ -0,0 +1,13 @@ +import { VueConstructor } from 'vue'; +import { DateLocale } from './shared.d'; + +export const CalendarWeekHeader: CalendarWeekHeader; + +export interface CalendarWeekHeader extends VueConstructor { + props: { + locale: DateLocale; + }; + methods: { + weekDays(): string[]; + }; +} diff --git a/types/vue-nice-dates/DatePicker.d.ts b/types/vue-nice-dates/DatePicker.d.ts new file mode 100644 index 0000000000..c8e7a77d1b --- /dev/null +++ b/types/vue-nice-dates/DatePicker.d.ts @@ -0,0 +1,25 @@ +import { VueConstructor } from 'vue'; +import { DatePickerProps } from './shared.d'; + +export const DatePicker: DatePicker; + +export interface DatePicker extends VueConstructor { + props: Partial; + date: () => { + receivedDate: string; + receivedIsFocus: boolean; + $lastValidDate: string; + }; + watch: { + [propName: string]: (date: Date) => void; + }; + methods: { + handleClickDate(date: Date): void; + handleMouseEnterDate(date: Date): void; + handleMouseLeaveDates(): void; + handleMonthChange(date: Date): void; + changeLastValidDate(date: string): void; + handleOutsideClick(e: MouseEvent): void; + handleFocusIn(e: MouseEvent): void; + }; +} diff --git a/types/vue-nice-dates/DatePickerCalendar.d.ts b/types/vue-nice-dates/DatePickerCalendar.d.ts new file mode 100644 index 0000000000..4d8fc34d78 --- /dev/null +++ b/types/vue-nice-dates/DatePickerCalendar.d.ts @@ -0,0 +1,26 @@ +import { VueConstructor } from 'vue'; +import { DatePickerProps } from './shared.d'; + +export const DatePickerCalendar: DatePickerCalendar; + +export interface DatePickerCalendar extends VueConstructor { + props: Partial; + date: () => { + receivedDate: string | Date | null; + }; + watch: { + [propName: string]: (date: Date) => void; + }; + methods: { + initDate(): void; + isSelected(date: Date): boolean; + isValidAndSelectable(date: Date): boolean; + mergeModifiers(): { + [propName: string]: (date: Date) => boolean; + }; + handleClickDate(date: Date): void; + handleMouseEnterDate(date: Date): void; + handleMouseLeaveDates(): void; + handleMonthChange(date: Date): void; + }; +} diff --git a/types/vue-nice-dates/DateRangePicker.d.ts b/types/vue-nice-dates/DateRangePicker.d.ts new file mode 100644 index 0000000000..3453bdf6fc --- /dev/null +++ b/types/vue-nice-dates/DateRangePicker.d.ts @@ -0,0 +1,37 @@ +import { VueConstructor } from 'vue'; +import { DateRangePickerProps } from './shared.d'; + +export const DateRangePicker: DateRangePicker; + +export interface DateRangePicker extends VueConstructor { + props: Partial; + date: () => { + receivedStartDate: string; + receivedEndDate: string; + receivedIsFocus: boolean; + receivedFocusName: string; + $lastValidStartDate: string; + $lastValidEndDate: string; + $hasTouchedStartDate: boolean; + $hasTouchedEndDate: boolean; + }; + watch: { + startDate(date: string): void; + endDate(date: string): void; + isFocus(isFocus: boolean): void; + receivedFocusName(focusName: string): void; + }; + methods: { + handleClickDate(date: Date): void; + handleMouseEnterDate(date: Date): void; + handleMouseLeaveDates(): void; + handleMonthChange(date: Date): void; + changeLastValidStartDate(date: string): void; + changeLastValidEndDate(date: string): void; + updateReceivedStartDate(date: string): void; + updateReceivedEndDate(date: string): void; + handleOutsideClick(e: MouseEvent): void; + handleFocusIn(e: MouseEvent): void; + triggerFocusEvent(focusName: string): void; + }; +} diff --git a/types/vue-nice-dates/DateRangePickerCalendar.d.ts b/types/vue-nice-dates/DateRangePickerCalendar.d.ts new file mode 100644 index 0000000000..a5f3fa1afd --- /dev/null +++ b/types/vue-nice-dates/DateRangePickerCalendar.d.ts @@ -0,0 +1,39 @@ +import { VueConstructor } from 'vue'; +import { DateRangePickerProps } from './shared.d'; + +export const DateRangePickerCalendar: DateRangePickerCalendar; + +export interface DateRangePickerCalendar extends VueConstructor { + props: Partial; + date: () => { + receivedStartDate: string | Date | null; + receivedEndDate: string | Date | null; + hoveredDate: Date | null; + }; + computed: { + displayedStartDate: string | Date | null; + displayedEndDate: string | Date | null; + receivedDate: string | Date | null; + }; + watch: { + startDate(date: string): void; + endDate(date: string): void; + }; + methods: { + initStartDate(): void; + initEndDate(): void; + processInitalDate(): void; + handleClickDate(date: Date): void; + handleMouseEnterDate(date: Date): void; + handleMouseLeaveDates(): void; + handleMonthChange(date: Date): void; + changeLastValidDate(name: string, date: string | Date): void; + isStartDate(date: Date): boolean; + isMiddleDate(date: Date): boolean; + isEndDate(date: Date): boolean; + mergeModifiers(): { + [propName: string]: ((date: Date) => boolean) | boolean; + }; + isValidAndSelectable(date: Date): boolean; + }; +} diff --git a/types/vue-nice-dates/Popover.d.ts b/types/vue-nice-dates/Popover.d.ts new file mode 100644 index 0000000000..d35e48b271 --- /dev/null +++ b/types/vue-nice-dates/Popover.d.ts @@ -0,0 +1,9 @@ +import { VueConstructor } from 'vue'; + +export const Popover: Popover; + +export interface Popover extends VueConstructor { + props: { + [propName: string]: boolean; + }; +} diff --git a/types/vue-nice-dates/index.d.ts b/types/vue-nice-dates/index.d.ts new file mode 100644 index 0000000000..d15ad75708 --- /dev/null +++ b/types/vue-nice-dates/index.d.ts @@ -0,0 +1,20 @@ +// Type definitions for vue-nice-dates 1.0 +// Project: https://github.com/zhangchizi/vue-nice-dates#readme +// Definitions by: zhangchizi +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export { Calendar } from './Calendar'; +export { CalendarDay } from './CalendarDay'; +export { CalendarGrid } from './CalendarGrid'; +export { CalendarNavigation } from './CalendarNavigation'; +export { CalendarWeekHeader } from './CalendarWeekHeader'; +export { DatePicker } from './DatePicker'; +export { DatePickerCalendar } from './DatePickerCalendar'; +export { DateRangePicker } from './DateRangePicker'; +export { DateRangePickerCalendar } from './DateRangePickerCalendar'; +export { Popover } from './Popover'; + +export const START_DATE: string; +export const END_DATE: string; + +export as namespace vueNiceDates; diff --git a/types/vue-nice-dates/package.json b/types/vue-nice-dates/package.json new file mode 100644 index 0000000000..e3d1549d9f --- /dev/null +++ b/types/vue-nice-dates/package.json @@ -0,0 +1,7 @@ +{ + "private": true, + "dependencies": { + "date-fns": "^2.9.0", + "vue": "^2.3.0" + } +} diff --git a/types/vue-nice-dates/shared.d.ts b/types/vue-nice-dates/shared.d.ts new file mode 100644 index 0000000000..60f99cccfb --- /dev/null +++ b/types/vue-nice-dates/shared.d.ts @@ -0,0 +1,42 @@ +import { Locale } from 'date-fns'; + +export type DateLocale = Locale; + +export interface Modifiers { + [propName: string]: (date: Date) => boolean; +} +export interface ModifiersClassNames { + [propName: string]: string; +} + +export interface DatePickerProps { + locale: DateLocale; + date: string; + isFocus: boolean; + month?: Date; + format: string; + minimumDate: Date | null; + maximumDate: Date | null; + modifiers: Modifiers; + modifiersClassNames: ModifiersClassNames; + validator: { + [propName: string]: (date: Date) => boolean; + }; +} + +export interface DateRangePickerProps { + locale: DateLocale; + isFocus: boolean; + month?: Date; + format: string; + startDate: string; + endDate: string; + focusName: string; + minimumDate: Date | null; + maximumDate: Date | null; + modifiers: Modifiers; + modifiersClassNames: ModifiersClassNames; + validator: { + [propName: string]: (date: Date) => boolean; + }; +} diff --git a/types/vue-nice-dates/tsconfig.json b/types/vue-nice-dates/tsconfig.json new file mode 100644 index 0000000000..596c443e36 --- /dev/null +++ b/types/vue-nice-dates/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "DOM" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vue-nice-dates-tests.ts" + ] +} diff --git a/types/vue-nice-dates/tslint.json b/types/vue-nice-dates/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/vue-nice-dates/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/vue-nice-dates/vue-nice-dates-tests.ts b/types/vue-nice-dates/vue-nice-dates-tests.ts new file mode 100644 index 0000000000..31e3edef46 --- /dev/null +++ b/types/vue-nice-dates/vue-nice-dates-tests.ts @@ -0,0 +1,53 @@ +import Vue from 'vue'; +import { DatePicker, DateRangePicker, START_DATE, END_DATE } from 'vue-nice-dates'; +import { enGB } from 'date-fns/locale'; + +new Vue({ + el: '#app', + components: { + DatePicker, + DateRangePicker, + }, + data() { + return { + date: '', + startDate: '', + endDate: '', + START_DATE, + END_DATE, + locale: enGB, + }; + }, + template: ` +
+ + + + + +
+ + +
+ +
+ `, +});