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

@@ -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;
+    };
+}

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;
+    };
+}

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;
+    };
+}

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;
+    };
+}

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[];
+    };
+}

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<DatePickerProps>;
+    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;
+    };
+}

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<DatePickerProps>;
+    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;
+    };
+}

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<DateRangePickerProps>;
+    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;
+    };
+}

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<DateRangePickerProps>;
+    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;
+    };
+}

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;
+    };
+}

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 <https://github.com/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;

types/vue-nice-dates/package.json

@@ -0,0 +1,7 @@
+{
+    "private": true,
+    "dependencies": {
+        "date-fns": "^2.9.0",
+        "vue": "^2.3.0"
+    }
+}

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;
+    };
+}

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"
+    ]
+}

types/vue-nice-dates/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

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: `
+    <div>
+        <DatePicker
+            :date.sync="date"
+            :locale="locale"
+        >
+            <input
+            v-model.trim="date"
+            type="text"
+            >
+        </DatePicker>
+
+        <DateRangePicker
+            :start-date.sync="startDate"
+            :end-date.sync="endDate"
+            :locale="locale"
+            >
+            <div class="date-range">
+                <input
+                v-model.trim="startDate"
+                type="text"
+                :data-nice-dates="START_DATE"
+                >
+                <input
+                v-model.trim="endDate"
+                type="text"
+                :data-nice-dates="END_DATE"
+                >
+            </div>
+        </DateRangePicker>
+    </div>
+    `,
+});