Typescript migration

.babelrc

@@ -18,8 +18,13 @@
             "targets": {
               "node": "current"
             }
-          }
+          },
+          "@babel/preset-typescript"
         ]
+      ],
+      "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        "@babel/plugin-transform-runtime"
       ]
     }
   }

.eslintrc.js

@@ -1,35 +1,81 @@
 const prettierConfig = require('./prettier')
 
 module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
+  env: {
+    browser: true,
   },
   extends: [
+    'plugin:vue/recommended',
+    'plugin:vue-types/strongly-recommended',
     'airbnb-base',
     'plugin:compat/recommended',
     'prettier',
+    'plugin:cypress/recommended',
     'plugin:jest/recommended',
-    'plugin:vue/recommended',
+    '@vue/typescript',
   ],
-  plugins: ['import', 'prettier', 'html', 'vue', 'jest'],
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: 'eslint-webpack-resolver.config.js',
-      },
-    },
+  plugins: ['import', 'prettier', 'sort-class-members', '@typescript-eslint'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
   },
   rules: {
-    'prettier/prettier': ['error', prettierConfig],
-    'import/prefer-default-export': 'off',
-    'import/extensions': [
+    'vue/valid-v-slot': ['error', { allowModifiers: true }],
+    'vue/component-name-in-template-casing': [
       'error',
-      'always',
+      'PascalCase',
       {
-        js: 'never',
+        registeredComponentsOnly: false,
+        ignores: ['i18n'],
+      },
+    ],
+    'vue/no-deprecated-scope-attribute': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'lodash',
+            message:
+              'Please import functions from files for smaller bundle size.',
+          },
+        ],
+      },
+    ],
+    'prefer-destructuring': [
+      'error',
+      {
+        VariableDeclarator: {
+          array: false,
+          object: true,
+        },
+        AssignmentExpression: {
+          /**
+           * `array: false` avoids false positives like
+           * let someValue
+           * someValue = someArray[1]
+           *
+           * must otherwise be written as
+           * const [_unused, value] = someArray
+           * someValue = value
+           *
+           * https://mattermost.sumcumo.net/sumcumo/pl/ujjzahusn7gfppm3g8ocn7qnwa
+           */
+          array: false,
+          object: true,
+        },
+      },
+      {
+        enforceForRenamedProperties: false,
+      },
+    ],
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: ['__typename'],
       },
     ],
+    'prettier/prettier': ['error', prettierConfig],
+    'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': 'off',
     'no-console': ['error', { allow: ['info', 'warn', 'error'] }],
     'no-unused-vars': [
@@ -46,6 +92,7 @@ module.exports = {
         variables: true,
       },
     ],
+    'arrow-body-style': 'off',
     'max-nested-callbacks': ['error', { max: 3 }],
     'max-statements': [
       'error',
@@ -82,17 +129,57 @@ module.exports = {
         skipBlankLines: true,
       },
     ],
-    'vue/component-name-in-template-casing': [
+    'no-param-reassign': 'off',
+    'class-methods-use-this': 'off',
+    'sort-class-members/sort-class-members': [
+      2,
+      {
+        order: [
+          '[static-properties]',
+          '[static-methods]',
+          '[properties]',
+          'constructor',
+          '[getters]',
+          '[everything-else]',
+        ],
+      },
+    ],
+    'import/extensions': [
       'error',
-      'PascalCase',
-      { registeredComponentsOnly: false },
+      'always',
+      {
+        js: 'never',
+        ts: 'never',
+      },
     ],
-    'vue/no-deprecated-scope-attribute': 'error',
-    'arrow-body-style': 'off',
+    // Disabling eslint rule and enabling typescript specific to support TS features
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    // false positives with testing-library
+    'jest/expect-expect': 'off',
+  },
+  settings: {
+    // https://github.com/johvin/eslint-import-resolver-alias#readme
+    'import/resolver': {
+      alias: {
+        map: [['~', './src']],
+        extensions: ['.js', '.ts', '.d.ts'],
+      },
+    },
   },
   overrides: [
     {
-      files: ['*.spec.js', '*.config.js'],
+      files: ['*.spec.ts', '*.spec.js', '*.config.js'],
       rules: {
         'max-lines-per-function': 'off',
         'max-statements': 'off',
@@ -101,7 +188,4 @@ module.exports = {
       },
     },
   ],
-  env: {
-    browser: true,
-  },
 }

.gitignore

@@ -5,7 +5,10 @@ npm-debug.log
 .coveralls.yml
 example/demo.js
 example/demo.js.map
+example-e2e/app.js
+example-e2e/app.js.map
 test/unit/coverage
+test/e2e/cucumber-json
 yarn-debug.log*
 yarn-error.log*
 .idea

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.0.0](https://github.com/sumcumo/vue-datepicker/compare/v3.2.3...v4.0.0) (2022-02-25)
+
+
+### Features
+
+* **datepicker:** Add keyboard support
+* **datepicker:** add e2e tests
+* **pickers:** Add slide transition on page change ([618e3d3](https://github.com/sumcumo/vue-datepicker/commit/618e3d39f90a893ada1677d4050ce70b0e5ad7dc))
+* **datepicker:** Add transition on toggle ([aa6a95c](https://github.com/sumcumo/vue-datepicker/commit/aa6a95cd3a466de925d0f46e65352c9b295677f1))
+* **datepicker:** Add transition on view change ([db98efb](https://github.com/sumcumo/vue-datepicker/commit/db98efbf4181a6414102c0956e8764fd075a209a))
+* *css* renamed inline to vdp-datepicker__calendar--inline ([41c081](https://github.com/sumcumo/vue-datepicker/pull/96/commits/41c081a334cddce6a091576ab9ddfb1d5fc977b1))
+
+### Bug Fixes
+* **dateinput:** Don't fire `handleKeyup` unless typeable ([5e0a7c1](https://github.com/sumcumo/vue-datepicker/commit/5e0a7c103ff047f8881fdd22769c63cbab313e93))
+* **datepicker:** Set typed date to null if zero length ([e483f0d](https://github.com/sumcumo/vue-datepicker/commit/e483f0df3cf2fc5f04ffc28f7184fff21e4346cc))
+* **datepicker:** Update openDate with selectedDate ([a23d494](https://github.com/sumcumo/vue-datepicker/commit/a23d494ccae646e7f0403d7d52c7cea1e8de34be))
+* **pickerday:** Only highlight selected edge date if shown ([f30b53f](https://github.com/sumcumo/vue-datepicker/commit/f30b53f70a8485b6dfc3f601db18bcfa97b0592b))
+* **pickerday:** Only highlight today if edge dates shown ([e3eece1](https://github.com/sumcumo/vue-datepicker/commit/e3eece1885981214a0d22384a2c672be2883ac07))
+* **pickerheader:** Prevent click on prev/next when disabled ([e52bb06](https://github.com/sumcumo/vue-datepicker/commit/e52bb064566d0dcd68016439071fbdef9e5ff600))
+* **pickerheader:** Reorder prev/next buttons when rtl ([d4ab12c](https://github.com/sumcumo/vue-datepicker/commit/d4ab12c28a47fe39d9a1acdb1f55a8f265967bae))
+* **pickerheader:** Stop disabled dates from closing calendar on next/prev ([d61647c](https://github.com/sumcumo/vue-datepicker/commit/d61647ce2cb6a3fd059ace1ecde55cfd6644a111))
+* **pickeryear:** Emphasize the current year ([fbb29f6](https://github.com/sumcumo/vue-datepicker/commit/fbb29f63ab45ba5bac61bc2e5d6d9aeeaf037af8))
+* **pickeryear:** Right position trailing cells ([e159622](https://github.com/sumcumo/vue-datepicker/commit/e1596223ee9c0f1e3d14d316aa83d17b94f70119))
+* **style:** Inherit correct calendar width ([#116](https://github.com/sumcumo/vue-datepicker/issues/116)) ([021d4e6](https://github.com/sumcumo/vue-datepicker/commit/021d4e6d17fbf0eee24f075024d700fab6d274fb))
+* **style:** Make focus outline pixel perfect ([9fc2a53](https://github.com/sumcumo/vue-datepicker/commit/9fc2a539002bbf804c431fa382a3a614eb6e74b0))
+
 ### [3.2.3](https://github.com/sumcumo/vue-datepicker/compare/v3.2.1...v3.2.3) (2021-08-04)
 
 

cypress.json

@@ -0,0 +1,8 @@
+{
+  "pluginsFile": "test/e2e/plugins/index.js",
+  "baseUrl": "http://localhost:8080",
+  "chromeWebSecurity": true,
+  "testFiles": "**/*.{feature,features}",
+  "nodeVersion": "system",
+  "defaultCommandTimeout": 1000
+}

docs/.vuepress/components/Formats.vue

@@ -23,28 +23,32 @@ export default {
       format: '',
       formats: [
         {
-          text: 'd MMMM yyyy - e.g 12 February 2016',
-          value: 'd MMMM yyyy',
+          text: 'MMMM d, yyyy     e.g. February 6, 2022',
+          value: 'MMMM d, yyyy',
         },
         {
-          text: 'yyyy-MM-dd - e.g 2016-02-12',
-          value: 'yyyy-MM-dd',
+          text: 'do MMM yyyy     e.g. 6th Feb 2022',
+          value: 'do MMM yyyy',
         },
         {
-          text: 'do MMM yyyy - e.g 12th Feb 2016',
-          value: 'do MMM yyyy',
+          text: 'yyyy-MM-dd     e.g. 2022-02-06',
+          value: 'yyyy-MM-dd',
         },
         {
-          text: 'E do MMM yyyy - e.g Sat 12th Feb 2016',
+          text: 'E do MMM yyyy     e.g. Sun 6th Feb 2022',
           value: 'E do MMM yyyy',
         },
         {
-          text: 'dd.MM.yyyy - 20.12.2019',
+          text: 'dd/MM/yy     e.g. 06/02/22',
+          value: 'dd/MM/yy',
+        },
+        {
+          text: 'dd.MM.yyyy     e.g. 06.02.2022',
           value: 'dd.MM.yyyy',
         },
         {
-          text: 'MM.dd.yyyy - 08.30.2019',
-          value: 'MM.dd.yyyy',
+          text: 'M/d/yyyy     e.g. 2/6/2022',
+          value: 'M/d/yyyy',
         },
       ],
     }

docs/README.md

@@ -3,14 +3,14 @@ home: true
 actionText: Get Started →
 actionLink: /guide/
 features:
-  - title: Accepts keyboard input
+  - title: Keyboard navigation
+    details: Navigate by mouse/touch, or use the space bar, tab, enter, delete/backspace and arrow keys
+  - title: Enter dates by typing
     details: Type in your dates instead of merely selecting them on the calendar
   - title: Internationalized
     details: Customize text output depending on your language settings
-  - title: Disable dates
-    details: You can disable dates in multiple ways
-  - title: Highlight dates
-    details: You can highlight dates in multiple ways
+  - title: Disable or highlight dates
+    details: You can disable or highlight dates in multiple ways
   - title: Inline calendar
     details: If you want to disable showing the calendar on click, you can make it always visible as an inline element
   - title: Auto-alignment

docs/demo/README.md

@@ -3,7 +3,7 @@
 ## Default
 
 <ClientOnly>
-  <Datepicker placeholder="Select Date" :append-to-body="true"/>
+  <Datepicker placeholder="Select Date" />
 </ClientOnly>
 
 ```html

docs/guide/Events/README.md

@@ -12,6 +12,5 @@ These events are emitted on actions in the datepicker
 | input             | Date\|null | Input value has been modified     |
 | opened            |            | The picker has been opened        |
 | selected          | Date\|null | A date has been selected          |
-| selected-disabled | Object     | A disabled date has been selected |
 | blur              |            | Input blur event                  |
 | focus             |            | Input focus event                 |

docs/guide/Migration/README.md

@@ -1,5 +1,11 @@
 # Migration
 
+## 3.x.x to 4.x.x
+
+- the html changed because of the new keyboard support. If you have any custom css it might break.
+- additional a transition element was wrapped around the picker
+- inline css class change from inline to `vdp-datepicker__calendar--inline` too not get confused with css class libraries
+
 ## 2.x.x to 3.x.x
 
 - removed `monday-first` in favor of `first-day-of-week`. If you had `<Datepicker :monday-first="true"/>` you need to change it to `<Datepicker first-day-of-week="mon"/>`

docs/guide/Props/README.md

@@ -3,7 +3,7 @@
 | Prop                          | Type                          | Default     | Description                                                                                                                      |
 | ----------------------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | append-to-body                | Boolean                       | false       | Append datepicker calendar to body                                                                                               |
-| autofocus                     | String                        |             | Sets html `autofocus` attribute on input                                                                                         |
+| autofocus                     | Boolean                       | false       | Sets html `autofocus` attribute on input                                                                                         |
 | bootstrap-styling             | Boolean                       | false       | Use bootstrap v4 styling classes.                                                                                                |
 | calendar-button               | Boolean                       | false       | Show an icon that that can be clicked                                                                                            |
 | calendar-button-icon          | String                        |             | (Deprecated for slot) Use icon for button (ex: fa fa-calendar)                                                                                         |