update demo

Author: gdncomm-hidayat-febiansyah

config/webpack.prod.conf.js

@@ -9,7 +9,7 @@ function resolve (dir) {
 
 const commonConfig = {
   resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: ['.vue', '.js'],
     alias: {
       vue: 'vue/dist/vue.js',
       '@': resolve('src')
@@ -63,7 +63,7 @@ module.exports = [
     output: {
       filename: 'vue-rangedate-picker.min.js',
       libraryTarget: 'window',
-      library: 'VueRangedatePicker',
+      library: 'VueRangedatePicker'
     }
   }),
   merge(commonConfig, {

demo/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="language" content="en-EN" />
 
-  <title>Vue-Rangedate-Picker | Demo</title>
+  <title>vue-rangedate-picker | Demo</title>
 
   <!-- VENDOR CSS start -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
@@ -37,7 +37,7 @@
         </figure>
 
         <h1 class="title">
-          Vue-Rangedate-Picker
+          vue-rangedate-picker
         </h1>
         <h2 class="subtitle">
           Range date picker with simple usage
@@ -62,8 +62,8 @@ <h2 class="subtitle">
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN">
-                </rangedate-picker>
+                <vue-rangedate-picker @selected="onDateSelected" i18n="EN">
+                </vue-rangedate-picker>
               </div>
             </div>
 
@@ -79,8 +79,8 @@ <h2 class="subtitle">
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
-                </rangedate-picker>
+                <vue-rangedate-picker @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
+                </vue-rangedate-picker>
               </div>
             </div>
 
@@ -96,8 +96,8 @@ <h2 class="subtitle">
 
             <div class="card-content">
               <div class="daterange-wrapper">
-                <rangedate-picker @selected="onDateSelected" i18n="EN" righttoleft="true">
-                </rangedate-picker>
+                <vue-rangedate-picker @selected="onDateSelected" i18n="EN" righttoleft="true">
+                </vue-rangedate-picker>
               </div>
             </div>
 
@@ -116,8 +116,8 @@ <h2 class="subtitle">
 
             <div class="card-content">
               <div class="compact-wrapper">
-                <rangedate-picker @selected="onDateSelected" compact="true" i18n="EN">
-                </rangedate-picker>
+                <vue-rangedate-picker @selected="onDateSelected" compact="true" i18n="EN">
+                </vue-rangedate-picker>
               </div>
             </div>
 
@@ -144,7 +144,7 @@ <h2 class="subtitle">
 
   <script src="https://unpkg.com/[email protected]/dist/vue.js" type="text/javascript"></script>
   <script src="../dist/vue-rangedate-picker.min.js" type="text/javascript"></script>
-  <script src="src/main.js" type="text/javascript"></script>
+  <script src="./src/main.js" type="text/javascript"></script>
 </body>
 
 </html>

demo/src/main.js

@@ -1,3 +1,5 @@
+VueRangedatePicker.default.install(Vue)
+
 var app = new Vue({
   el: '#app',
   data () {
@@ -12,8 +14,5 @@ var app = new Vue({
     onDateSelected: function (daterange) {
       this.selectedDate = daterange
     }
-  },
-  components: {
-    VueRangedatePicker
   }
 })

dist/vue-rangedate-picker.js

@@ -10,19 +10,19 @@
 // Vue.config.debug = true
 // */
 
-import RangedatePicker from './RangedatePicker.vue'
+import VueRangeDatePicker from './RangedatePicker.vue'
 
 new window.Vue({
   el: 'app',
   template: `<div id="demo">
 <div>
 <strong>Full form</strong>
-<rangedate-picker></rangedate-picker>
+<vue-rangedate-picker></vue-rangedate-picker>
 </div>
 <div style="height: 300px">
 <strong>Compact (mobile)</strong>
-<rangedate-picker compact="true"></rangedate-picker>
+<vue-rangedate-picker compact="true"></vue-rangedate-picker>
 </div>
 </div>`,
-  components: { RangedatePicker }
+  components: { VueRangeDatePicker }
 })

dist/vue-rangedate-picker.min.js

@@ -2,6 +2,6 @@ import plugin from '@/RangedatePicker.vue'
 
 export default {
   install: function (Vue, options) {
-    Vue.component('rangedate-picker', plugin)
+    Vue.component(plugin.name, plugin)
   }
 }

src/demo.js

@@ -117,6 +117,7 @@ const defaultPresets = function (i18n = defaultI18n) {
 }
 
 export default {
+  name: 'vue-rangedate-picker',
   props: {
     configs: {
       type: Object,