Updated to newest vue js and vue2-datepicker version (#37296)

* Updated to newest vue js and vue2-datepicker version
Added test for vue-class-component with decorators

* Moved wrong dependencies to devDependencies

* Removed devDependencies

* Added correct typescript version

* Fixed building issues

* Fixed building issues

* Fixed building issues

* Lowered typescript version

* Change to Version 3.2

types/vue2-datepicker/index.d.ts

@@ -1,16 +1,15 @@
-// Type definitions for vue2-datepicker 2.0
+// Type definitions for vue2-datepicker 2.12
 // Project: https://github.com/mengxiong10/vue2-datepicker
 // Definitions by: ChristianStornowski <https://github.com/ChristianStornowski>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 3.2
 
 import { Component } from "vue/types/options";
 
 declare namespace Datepicker {
     interface Shortcuts {
         text: string;
-        start: Date;
-        end: Date;
+        onClick: () => any;
     }
 
     interface TimePickerOptions {
@@ -28,12 +27,25 @@ declare namespace Datepicker {
             dateRange: string;
         };
     }
+
+    interface ValueType {
+        date: Date;
+        timestamp: number;
+        format: string;
+    }
+
+    interface TimeSelectOptions {
+        hours: number[];
+        minutes: number[];
+        seconds: number[];
+    }
 }
 
 declare const Datepicker: Component<any, any, any, {
     type?: string;
     range?: boolean;
     format?: string;
+    valueType?: Datepicker.ValueType;
     lang?: string | Datepicker.Lang;
     clearable?: boolean;
     confirm?: boolean;
@@ -41,17 +53,22 @@ declare const Datepicker: Component<any, any, any, {
     disabled?: boolean;
     placeholder?: string;
     width?: number | string;
+    appendToBody?: boolean;
+    defaultValue?: string;
+    popupStyle?: string;
     notBefore?: string | Date;
     notAfter?: string | Date;
     disabledDays?: number[] | string[] | ((date: Date) => Date[]);
     shortcuts?: boolean | Datepicker.Shortcuts[]
     timePickerOptions?: Datepicker.TimePickerOptions[] | (() => Datepicker.TimePickerOptions[]);
+    timeSelectOptions?: Datepicker.TimeSelectOptions;
     minuteStep?: number;
     firstDayOfWeek?: number;
     inputClass?: string;
-    inputName?: string;
+    inputAttr?: string;
     confirmText?: string;
     rangeSeparator?: string;
+    dateFormat?: string;
 }>;
 
 export default Datepicker;

types/vue2-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
   "dependencies": {
-    "vue": ">=2.0.0"
+    "vue": ">=2.6.10"
   }
 }

types/vue2-datepicker/tsconfig.json

@@ -15,10 +15,13 @@
         ],
         "types": [],
         "noEmit": true,
-        "forceConsistentCasingInFileNames": true
+        "forceConsistentCasingInFileNames": true,
+        "experimentalDecorators": true
     },
     "files": [
         "index.d.ts",
         "vue2-datepicker-tests.ts"
-    ]
+    ],
+    "baseUrl": "types",
+    "typeRoots": ["types"]
 }

types/vue2-datepicker/vue2-datepicker-tests.ts

@@ -1,5 +1,13 @@
-import Vue from 'vue';
-import DatePicker from "vue2-datepicker";
+import Vue, { ComponentOptions } from 'vue';
+import DatePicker from 'vue2-datepicker';
+
+// excerpt from vue-class-component/src/declarations.ts
+type VueClass<V> = {
+    new(...args: any[]): V & Vue;
+} & typeof Vue;
+
+// excerpt from vue-class-component/src/index.ts
+declare function Component<V extends Vue>(options: ComponentOptions<V> & ThisType<V>): <VC extends VueClass<V>>(target: VC) => VC;
 
 new Vue({
     el: '#app',
@@ -18,6 +26,26 @@ new Vue({
         </date-picker>
     `,
     data() {
-        return { dateOfBirth: new Date() };
+        return {dateOfBirth: new Date()};
     }
 });
+
+@Component({
+    components: {
+        DatePicker
+    },
+    template: `
+        <date-picker
+            :placeholder="placeholder"
+            v-model="dateOfBirth"
+            format="YYYY-MM-DD"
+            lang="en">
+            <template slot="calendar-icon">
+                <span class="input-datepicker__icon"></span>
+            </template>
+        </date-picker>
+    `
+})
+class App extends Vue {
+    dateOfBirth = new Date();
+}