Merge pull request #1 from charliekassel/master

Update local branch

Author: pflirae

.babelrc

@@ -1,5 +1,14 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
   "plugins": ["transform-runtime"],
-  "comments": false
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
 }

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -1,3 +1,5 @@
+// http://eslint.org/docs/user-guide/configuring
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',

.gitignore

@@ -3,6 +3,8 @@ node_modules
 npm-debug.log
 .vscode
 .coveralls.yml
-test/coverage/*
 dist/build.js
-dist/build.js.map
+dist/build.js.map
+test/unit/coverage
+yarn-debug.log*
+yarn-error.log*

.postcssrc.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
+  - "7"
   - "6"
-  - "5"
-after_script: "cat ./test/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
+after_script: "cat ./test/unit/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+Contributions are welcome :)
+
+Please add tests and run the linter.

README.md

@@ -2,11 +2,13 @@
 
 ![](https://travis-ci.org/charliekassel/vuejs-datepicker.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/charliekassel/vuejs-datepicker/badge.svg?branch=master)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)
 
-A datepicker Vue component. Compatible with Vue 1.x and Vue 2.x
+A datepicker Vue component. Compatible with Vue 2.x
+
+NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with 1.x you can install with `npm install vuejs-datepicker@0.9.9`
 
 ## Demo
 
-https://www.webpackbin.com/bins/-KfeGHToc68NnMnmlwJ7
+https://www.webpackbin.com/bins/-KhQbtTSVuU6r8VCrIdC
 
 ## Install
 
@@ -50,32 +52,60 @@ Use `v-model` for two-way binding
 ```
 Emits events
 ``` html
-<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction">
+<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction" v-on:closed="datepickerClosedFunction">
 ```
 Inline always open version
 ``` html
 <datepicker :inline="true"></datepicker>
 ```
 ## Available props
 
-| Prop          | Type         | Default     | Description                         |
-|---------------|--------------|-------------|-------------------------------------|
-| value         | Date/String  |             | Date value of the datepicker        |
-| name          | String       |             | input name property                 |
-| id            | String       |             | input id                            |
-| format        | String       | dd MMM yyyy | Date formatting string              |
-| language      | String       | en          | Translation for days and months     |
-| disabled      | Object       |             | See below for configuration         |
-| placeholder   | String       |             | input placeholder text              |
-| inline        | Boolean      |             | to show the datepicker always open  |
-| input-class   | String       |             | css class applied to the input el   |
-| wrapper-class | String       |             | css class applied to the outer div  |
-| monday-first  | Boolean      | false       | To start the week on Monday         |
-| clear-button   | Boolean     | false       | Show an icon for clearing the date |
-| disabled-picker | Boolean     | false       | If true, disable Datepicker on screen | 
+| Prop                  | Type            | Default     | Description                              |
+|-----------------------|-----------------|-------------|------------------------------------------|
+| value                 | Date\|String    |             | Date value of the datepicker             |
+| name                  | String          |             | Input name property                      |
+| id                    | String          |             | Input id                                 |
+| format                | String\|Function| dd MMM yyyy | Date formatting string or function       |
+| full-month-name       | Boolean         | false       | To show the full month name              |
+| language              | String          | en          | Translation for days and months          |
+| disabled              | Object          |             | See below for configuration              |
+| placeholder           | String          |             | Input placeholder text                   |
+| inline                | Boolean         |             | To show the datepicker always open       |
+| calendar-class        | String\|Object  |             | CSS class applied to the calendar el     |
+| input-class           | String\|Object  |             | CSS class applied to the input el        |
+| wrapper-class         | String\|Object  |             | CSS class applied to the outer div       |
+| monday-first          | Boolean         | false       | To start the week on Monday              |
+| clear-button          | Boolean         | false       | Show an icon for clearing the date       |
+| clear-button-icon     | String          |             | Use icon for button (ex: fa fa-times)    |
+| calendar-button       | Boolean         | false       | Show an icon that that can be clicked    |
+| calendar-button-icon  | String          |             | Use icon for button (ex: fa fa-calendar) |
+| bootstrapStyling      | Boolean         | false       | Output bootstrap styling classes         |
+| initial-view          | String          | 'day'       | If 'month' or 'year', open on that view  |
+| disabled-picker       | Boolean         | false       | If true, disable Datepicker on screen    |
+| required              | Boolean         | false       | Sets html required attribute on input    |
+| day-view-only         | Boolean         | false       | If true, month and year views won't show |
+
+## Events
+
+These events are emitted on actions in the datepicker
+
+| Event             | Output     | Description                          |
+|-------------------|------------|--------------------------------------|
+| opened            |            | The picker is opened                 |
+| closed            |            | The picker is closed                 |
+| selected          | Date\|null | A date has been selected             |
+| selectedDisabled  | Object     | A disabled date has been selected    |
+| input             | Date\|null | Input value has been modified        |
+| cleared           |            | Selected date has been cleared       |
+| changedMonth      | Object     | Month page has been changed          |
+| changedYear       | Object     | Year page has been changed           |
+| changedDecade     | Object     | Decade page has been changed         |
+
 
 ## Date formatting
 
+#### String formatter
+
 NB. This is not very robust at all - use at your own risk! Needs a better implementation.
 
 | Token | Desc                   | Example     |
@@ -91,8 +121,24 @@ NB. This is not very robust at all - use at your own risk! Needs a better implem
 | yy    | two digit year         | 16          |
 | yyyy  | four digit year        | 2016        |
 
+#### Function formatter
 
-#### Disabled Dates
+Delegates date formatting to provided function.
+Function will be called with date and it has to return formated date as a string.
+This allow us to use moment, date-fns, globalize or any other library to format date.
+
+``` html
+<script>
+  methods: {
+    customFormatter(date) {
+      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
+    }
+  }
+</script>
+<datepicker :format="customFormatter"></datepicker>
+```
+
+## Disabled Dates
 Dates can disabled in a number of ways.
 
 ``` html
@@ -106,14 +152,21 @@ var state = {
             new Date(2016, 9, 16),
             new Date(2016, 9, 17),
             new Date(2016, 9, 18)
-        ]
+        ],
+        ranges: [{ // Disable dates in given ranges (exclusive).
+            from: new Date(2016, 11, 25),
+            to: new Date(2016, 11, 30)
+        }, {
+            from: new Date(2017, 1, 12),
+            to: new Date(2017, 2, 25)
+        }]
     }
 }
 </script>
 <datepicker :disabled="state.disabled"></datepicker>
 ```
 
-#### Highlight Dates
+## Highlight Dates
 Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: You can only highlight dates, that aren't disabled.
 Note: Both `to` and `from` properties are require to define a range of dates to highlight
 
@@ -136,7 +189,13 @@ var state = {
 ```
 
 
-#### Translations
+## Translations
+
+Contributing guide - please use appropriate code from this [list](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) as the translation property.
+
+- Add your language object to the DateLanguages.js file. Please keep in alphabetical order.
+- 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.
 
 ``` html
 <datepicker language="es"></datepicker>
@@ -145,30 +204,42 @@ Available languages
 
 | Abbr        | Language         |          |
 | ----------- |------------------|----------|
+| ar          | Arabic           |          |
+| bg          | Bulgarian        |          |
+| bs          | Bosnian          |          |
+| ca          | Catalan          |          |
+| cs          | Czech            |          |
+| da          | Danish           |          |
+| de          | German           |          |
+| ee          | Estonian         |          |
+| el          | Greek            |          |
 | en          | English          | *Default*|
 | es          | Spanish          |          |
+| fa          | Persian (Farsi)  |          |
 | fi          | Finnish          |          |
 | fr          | French           |          |
+| he          | Hebrew           |          |
+| hu          | Hungarian        |          |
 | hr          | Croatian         |          |
+| id          | Indonesian       |          |
+| is          | Icelandic        |          |
 | it          | Italian          |          |
-| nl          | Dutch            |          |
-| de          | German           |          |
-| da          | Danish           |          |
+| ja          | Japanese         |          |
+| ko          | Korean           |          |
+| lt          | Lithuanian       |          |
+| lv          | Latvian          |          |
+| mn          | Mongolian        |          |
 | nb-no       | Norwegian Bokmål |          |
-| cs          | Czech            |          |
+| nl          | Dutch            |          |
+| pl          | Polish           |          |
 | pt-br       | Portuguese-Brazil|          |
 | ro          | Romanian         |          |
-| vi          | Vietnamese       |          |
-| zh          | Chinese          |          |
-| ja          | Japanese         |          |
-| he          | Hebrew           |          |
 | ru          | Russian          |          |
+| sk          | Slovak           |          |
 | sl-si       | Slovenian        |          |
 | sv          | Swedish          |          |
 | th          | Thai             |          |
-| bg          | Bulgarian        |          |
-| lt          | Lithuanian       |          |
-| pl          | Polish           |          |
-| ar          | Arabic           |          |
-| ee          | Estonian         |          |
-| ko          | Korean           |          |
+| tr          | Turkish          |          |
+| uk          | Ukrainian        |          |
+| vi          | Vietnamese       |          |
+| zh          | Chinese          |          |

build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}