Merge cb87325 into 7056546

.babelrc

@@ -1,26 +1,15 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
-        "modules": false
+        "loose": true
       }
-    ],
-    "stage-2"
+    ]
   ],
-  "plugins": [
-    "transform-runtime",
-    "transform-strict-mode",
-    "transform-es2015-modules-commonjs",
-    "transform-es2015-spread",
-    "transform-es2015-destructuring",
-    "transform-es2015-parameters",
-    "transform-async-to-generator"
-  ],
-  "comments": false,
   "env": {
     "test": {
-      "presets": ["env", "stage-2"]
+      "plugins": ["@babel/plugin-transform-runtime"]
     }
   }
 }

.eslintrc.js

@@ -2,16 +2,16 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true
+  },
+  parser: 'vue-eslint-parser',
   parserOptions: {
     sourceType: 'module'
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
   // add your custom rules here
   'rules': {
     // allow paren-less arrow functions

README.md

@@ -1,9 +1,69 @@
-# Datepicker
+# fork
+this is a fork of https://github.com/charliekassel/vuejs-datepicker,
+which includes following changes:
+* Upgrade all libraries
+* uses vue-eslint-parser for eslint.
+* Fixed SSR support for NuxtJS
+* Merged #611: show calendar on foucs prop
+* Merged #626: fixes missing close and open events
+* Based on #536: Allow custom types, I changed the method to getTypedDate which should return a fully parsed Date object. 
+* Added a beforeDateInput slot.
+
+
+To install this fork, use:
+```
+npm install --save @hokify/vuejs-datepicker
+```
+
+### regarding CSS / styles
+As this bundle is also useable for SSR rendering, you have to take care of css yourself. 
+(see also https://github.com/vuejs/rollup-plugin-vue/issues/266)
+First I strongly recommen to create a custom component, that wraps the vuejs-datepicker. Then
+it's easy to add custom css and have a consistent style for the datepicker.
+
+#### Method 1: try to include the css directly.
+Ensure you have postcss-import up and running. (https://github.com/postcss/postcss-import)
+E.g.via:
+```
+<style lang="scss">
+/* purgecss start ignore */
+@import "@hokify/vuejs-datepicker/dist/vuejs-datepicker.css"
+/* purgecss end ignore */
+</style>
+```
+
+If you do not use purgeCSS, you can safely remove the comment lines 
+
+#### Method 2: via global nuxt config:
+add inside nuxt.config:
+
+```
+css: [
+ {
+  src: '@hokify/vuejs-datepicker/dist/vuejs-datepicker.css',
+  lang: 'css'
+ },
+```
+
+#### Method 3: Copy the relevant css selectors to your custom component.
+I'm using this method, as I actually customized the datepicker and therefore don't need to
+overwrite css classes again with my style.
+
+```
+<style lang="scss">
+	.vdp-datepicker {
+		overflow: visible;
+		display: inline-block;
+		....
+	}
+	...
+</style>
+```
+
+Ping me if you have any better approaches! :)
 
-[![Travis Build](https://img.shields.io/travis/charliekassel/vuejs-datepicker.svg)](https://travis-ci.org/charliekassel/vuejs-datepicker)
-[![Version](https://img.shields.io/npm/v/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker)
-[![Coveralls github](https://img.shields.io/coveralls/github/charliekassel/vuejs-datepicker.svg)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)
-[![Downloads](https://img.shields.io/npm/dm/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker)
+
+# Datepicker
 
 A datepicker Vue component. Compatible with Vue 2.x
 
@@ -17,8 +77,6 @@ A datepicker Vue component. Compatible with Vue 2.x
 - [Highlighted dates](#highlighted-dates)
 - [Translations](#translations)
 
-NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with `yarn install vuejs-datepicker@0.9.9`
-
 ## Demo
 
 To view a demo online:
@@ -29,15 +87,15 @@ To view demo examples locally clone the repo and run `yarn install && yarn serve
 ## Install
 
 ``` bash
-npm install vuejs-datepicker --save
+npm install @hokify/vuejs-datepicker --save
 ```
 or
 ``` bash
-yarn add vuejs-datepicker
+yarn add @hokify/vuejs-datepicker
 ```
 
 ``` javascript
-import Datepicker from 'vuejs-datepicker';
+import Datepicker from '@hokify/vuejs-datepicker';
 
 export default {
   // ...
@@ -48,23 +106,6 @@ export default {
 }
 ```
 
-Or use directly from a CDN
-``` html
-<div id="app">
-  <vuejs-datepicker></vuejs-datepicker>
-</div>
-<script src="https://unpkg.com/vue"></script>
-<script src="https://unpkg.com/vuejs-datepicker"></script>
-<script>
-const app = new Vue({
-  el: '#app',
-  components: {
-  	vuejsDatepicker
-  }
-})
-</script>
-```
-
 ## Usage
 
 ``` html
@@ -129,7 +170,7 @@ Inline always open version
 | open-date                     | Date\|String    |             | If set, open on that date                |
 | minimum-view                  | String          | 'day'       | If set, lower-level views won't show     |
 | maximum-view                  | String          | 'year'      | If set, higher-level views won't show    |
-
+| parse-typed-date	          	| Function: Date  |             | Use to parse custom date for typed input |
 
 ## Events
 
@@ -276,6 +317,10 @@ to show some custom text:
 </datepicker>
 ```
 
+#### beforeDateInput
+
+To implement some custom styling on DateINput, you might need to add elemnt beore the DateInput. Similar to afterDateInput, just it is before in the html DOM.
+
 #### afterDateInput
 
 To implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named
@@ -303,7 +348,7 @@ Contributing guide - please use appropriate code from this [list](http://www.ian
 
 Below script tag in component.
 ```javascript
-import {en, es} from 'vuejs-datepicker/dist/locale'
+import {en, es} from '@hokify/vuejs-datepicker/dist/locale'
 ```
 
 In component data.

build/rollup.config.base.js

@@ -0,0 +1,53 @@
+import path from 'path'
+import vue from 'rollup-plugin-vue'
+import babel from 'rollup-plugin-babel'
+
+import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
+import common from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
+import node from 'rollup-plugin-node-resolve'
+import css from 'rollup-plugin-css-only'
+import CleanCSS from 'clean-css'
+
+import fs from 'fs'
+
+const version = require('../package.json').version
+export const banner =
+  '/*!\n' +
+  ' * vuejs-datepicker v' + version + '\n' +
+  ' * (c) 2016-' + new Date().getFullYear() + ' Charlie Kassel\n' +
+  ' * Released under the MIT License.\n' +
+  ' */'
+
+export default {
+  input: path.join(__dirname, '..', 'src', 'components', 'Datepicker.vue'),
+  plugins: [
+    node({
+      extensions: ['.js', '.jsx', '.vue']
+    }),
+    common(),
+    css({ output: (style) => {
+      fs.writeFileSync('dist/vuejs-datepicker.css', new CleanCSS().minify(style).styles)
+    }
+    }),
+    vue({
+      css: false,
+      compileTemplate: true,
+      template: {
+        isProduction: true
+      }
+    }),
+    postcss({
+      plugins: [
+        autoprefixer()
+      ]
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    babel({
+      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue']
+    })
+  ]
+}

build/rollup.config.locale.js

@@ -0,0 +1,34 @@
+import fs from 'fs'
+import path from 'path'
+import { uglify } from 'rollup-plugin-uglify'
+import babel from 'rollup-plugin-babel'
+
+const translationRollups = []
+
+const plugins = [
+  babel(),
+  uglify()
+]
+
+const files = fs.readdirSync('./src/locale/translations')
+files.forEach((file) => {
+  translationRollups.push({
+    input: path.join(__dirname, '..', 'src', 'locale', 'translations', file),
+    plugins,
+    output: {
+      file: path.join(__dirname, '..', 'dist', 'locale', 'translations', file),
+      format: 'cjs'
+    }
+  })
+})
+
+translationRollups.push({
+  input: path.join(__dirname, '..', 'src', 'locale', 'index.js'),
+  plugins,
+  output: {
+    file: path.join(__dirname, '..', 'dist', 'locale', 'index.js'),
+    format: 'cjs'
+  }
+})
+
+export default translationRollups

build/rollup.config.main.browser.js

@@ -0,0 +1,19 @@
+import base, { banner } from './rollup.config.base'
+import { uglify } from 'rollup-plugin-uglify'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'vuejsDatepicker',
+    file: 'dist/vuejs-datepicker.min.js',
+    banner: banner,
+    format: 'iife',
+    globals: {
+      'vue': 'Vue'
+    }
+  }
+})
+
+config.plugins.push(uglify())
+
+export default config

build/rollup.config.main.cjs.js

@@ -0,0 +1,16 @@
+import base, { banner } from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'vuejsDatepicker',
+    file: 'dist/vuejs-datepicker.common.js',
+    format: 'cjs',
+    banner: banner,
+    globals: {
+      'vue': 'Vue'
+    }
+  }
+})
+
+export default config

build/rollup.config.main.es.js

@@ -0,0 +1,15 @@
+import base, { banner } from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    name: 'vuejsDatepicker',
+    file: 'dist/vuejs-datepicker.esm.js',
+    format: 'es',
+    banner: banner,
+    globals: {
+      'vue': 'Vue'
+    }
+  }
+})
+
+export default config

build/rollup.config.main.umd.js

@@ -0,0 +1,16 @@
+import base, { banner } from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'vuejsDatepicker',
+    file: 'dist/vuejs-datepicker.umd.js',
+    format: 'umd',
+    banner: banner,
+    globals: {
+      'vue': 'Vue'
+    }
+  }
+})
+
+export default config