Merge 30e84ed 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,3 +1,20 @@
+# 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
+```
+
 # Datepicker
 
 [![Travis Build](https://img.shields.io/travis/charliekassel/vuejs-datepicker.svg)](https://travis-ci.org/charliekassel/vuejs-datepicker)
@@ -129,7 +146,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 +293,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
@@ -299,6 +320,53 @@ Contributing guide - please use appropriate code from this [list](http://www.ian
 - Add the Language to the available languages in the readme file.
 - Run `npm run lint` to make sure your code formatting is in line with the required code style.
 
+### 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! :)
+
 ### How to apply language
 
 Below script tag in component.

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

scripts/serve.js → build/serve.js

@@ -2,10 +2,10 @@ import path from 'path'
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
 import vue from 'rollup-plugin-vue'
-import buble from 'rollup-plugin-buble'
 import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 import common from 'rollup-plugin-commonjs'
+import babel from 'rollup-plugin-babel'
 
 export default {
   input: path.join(__dirname, '..', 'example', 'main.js'),
@@ -16,20 +16,19 @@ export default {
     sourcemap: true
   },
   plugins: [
+    common(),
     vue({
       css: true
     }),
     replace({
       'process.env.NODE_ENV': JSON.stringify('development')
     }),
     resolve({
-      module: true,
-      jsnext: true,
-      browser: true
+      mainFields: ['module', 'jsnext', 'browser']
     }),
-    common(),
-    buble({
-      objectAssign: 'Object.assign'
+    babel({
+      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
+      runtimeHelpers: true
     }),
     serve({
       contentBase: path.join(__dirname, '..', 'example'),

example/Demo.vue

@@ -17,6 +17,22 @@
       </code>
     </div>
 
+    <div class="example">
+      <h3>Typeable datepicker with custom formatter (DD.MM.YYYY)</h3>
+      <datepicker placeholder="Type or select date" :typeable="true" format="dd.MM.yyyy" :parse-typed-date="parseTypedDate" />
+      <code>
+        &lt;datepicker placeholder="Type or select date" :typeable="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+
+    <div class="example">
+      <h3>datepicker opens on focus</h3>
+      <datepicker placeholder="Type or select date" :typeable="true" :show-calendar-on-focus="true"/>
+      <code>
+          &lt;datepicker placeholder="Type or select date" :show-calendar-on-focus="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+
     <div class="example">
       <h3>Bootstrap styled datepicker</h3>
       <datepicker
@@ -252,6 +268,7 @@
 <script>
 import Datepicker from '../src/components/Datepicker.vue'
 import * as lang from '../src/locale/index.js'
+import moment from 'moment'
 
 const state = {
   date1: new Date()
@@ -357,6 +374,13 @@ export default {
         }
       }
       this.disabledDates.from = val
+    },
+    parseTypedDate (input) {
+      console.log('input', input)
+      let momentDate = moment(input, 'DD.MM.YYYY')
+      console.log('momentDate.toDate()', momentDate.toDate())
+
+      return momentDate.toDate()
     }
   }
 }