Update code and spec

northwalker · Aug 31, 2017 · 88dd7c8 · 88dd7c8
1 parent 8aeb60b
commit 88dd7c8
Show file tree

Hide file tree

Showing 13 changed files with 252 additions and 159 deletions.
diff --git a/README.md b/README.md
@@ -7,15 +7,14 @@ A Vue.js responsive date range picker for hotels or date range selection, that d
 
 [https://northwalker.github.io/vue-hotel-datepicker/](https://northwalker.github.io/vue-hotel-datepicker/)
 
-#### Running at development 
+#### Running in development environment
 
 ```git clone https://github.com/northwalker/vue-hotel-datepicker.git```
 
 ```npm install``` or ```yarn install```
 
 ```npm run dev``` or ```yarn run dev```
 
-
 ## Installation / Usage
 
 #### HTML
@@ -26,35 +25,47 @@ Download this repo and copy file ```/dist/vue-hotel-datepicker.min.js``` to ```/
 ```
 
 #### Javascript
-Use ```npm``` or ```yarn``` add dependence to your project's ```package.json```
+Use ```npm``` or ```yarn``` install and add dependence to your project's ```package.json```
 ```javascript
-npm install https://github.com/northwalker/vue-hotel-datepicker.git
+npm install 'https://github.com/northwalker/vue-hotel-datepicker.git'
 ```
-
 or 
-
 ```javascript
-yarn add https://github.com/northwalker/vue-hotel-datepicker.git
+yarn add 'https://github.com/northwalker/vue-hotel-datepicker.git'
 ```
 
-and import or require component to your vue app 
+import or require component to your app. 
 
+Vue file:
 ```javascript
-import VueHotelDatePicker from '/<your-component-folder-path>/vue-hotel-datepicker.min.js'
+import VueHotelDatepicker from 'vue-hotel-datepicker'
 
 export default {
+  name: 'App'
   components: {
-    VueHotelDatePicker,
+    VueHotelDatepicker,
+  },
+  data(){
+    return {
+      datepickerId: 'datepicker-demo-id-01',
+      placeholder: 'placeholder demo 01'
+    }
   }
+
 }
 ```
+HTML file:
+```html
+<VueHotelDatepicker :ref="datepickerId" :datepickerId="datepickerId" :placeholder="placeholder" />
+```
 
 ## Props/Options
 
 ### datePickerId
 
 - Type: `String`
-- Default: `1`
+- Default: `'datepickerId-' + new Date().getTime().toString()` 
+  - simulate random id in default
 
 ### placeholder
 
@@ -246,10 +257,10 @@ Gets the number of nights selected. Returns `0` otherwise.
 ## Events
 
 ### updateDateRange
-When a new date is selected, trigger an event ```updateDateRange```, emit evnet and passing the new date to parent component.
+When a new date is selected, ```VueHotelDatepicker``` will emit an event ```updateDateRange```, passing the new date range string and datepicker id to parent component.
 
 ### cancelUpdateDateRange
-when a cancellation button click or occurred, trigger an event ```cancelUpdateDateRange```, emit event and notify parent component.
+when a cancellation button click or occurred, ```VueHotelDatepicker``` will emit an event ```cancelUpdateDateRange```, passing datepicker id to notify parent component.
 
 
 ## Credits

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -6,7 +6,7 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 
 config.devtool = '#source-map'
 config.output.libraryTarget = 'umd'
-config.output.library = 'VueHotelDatePicker'
+config.output.library = 'VueHotelDatepicker'
 config.entry = {
   // 'vue-hotel-datepicker': path.resolve(__dirnme, '../src/HotelDatePicker.vue'),
   'vue-hotel-datepicker.min': path.resolve(__dirname, '../src/HotelDatePicker.vue')

diff --git a/dist/vue-hotel-datepicker.min.js b/dist/vue-hotel-datepicker.min.js
diff --git a/dist/vue-hotel-datepicker.min.js.map b/dist/vue-hotel-datepicker.min.js.map
diff --git a/docs/css/app.1d92a73.css → docs/css/app.155d629.css b/docs/css/app.1d92a73.css → docs/css/app.155d629.css
diff --git a/docs/css/app.1d92a73.css.map → docs/css/app.155d629.css.map b/docs/css/app.1d92a73.css.map → docs/css/app.155d629.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -6,13 +6,10 @@
   <title>Vue Hotel Datepicker</title>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
-  <!-- <link rel="stylesheet" href="/dist/app.css" /> -->
-
-<link href="css/app.1d92a73.css" rel="stylesheet"></head>
+<link href="css/app.155d629.css" rel="stylesheet"></head>
 
 <body>
   <div id="app"></div>
-  <!-- <script type="text/javascript" src="/dist/app.js"></script> -->
-<script type="text/javascript" src="js/app.02d2b4c.js"></script></body>
+<script type="text/javascript" src="js/app.4a668fa.js"></script></body>
 
 </html>
diff --git a/docs/js/app.02d2b4c.js.map b/docs/js/app.02d2b4c.js.map