upgrade to vue cli, minor fixes

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -1,4 +1,21 @@
 .DS_Store
-node_modules/
-npm-debug.log
-yarn-error.log
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
     <script src="https://unpkg.com/vue"></script>
-    <script src="/vuedt/dist/index.js"></script>
+    <script src="/vuedt/dist/vuedt.umd.js"></script>
     <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
@@ -141,13 +141,13 @@ <h2 id="screenshots">Screenshots</h2>
           <h2 id="demo">Demo!</h2>
 
           <div id="demo-app">
-            Pick a date: <date-time-picker v-model='date'></date-time-picker>
+            Pick a date: <date-time-picker v-model='date' />
           </div>
 
           <script>
           var app = new Vue({
             el: '#demo-app',
-            components: { dateTimePicker: vuedt.default },
+            components: { DateTimePicker: vuedt },
             data: { date: new Date() }
           })
           </script>
@@ -168,7 +168,5 @@ <h2 id="planned-features">Planned features</h2>
 
       </div>
     </div>
-
-
   </body>
 </html>

package.json

@@ -1,52 +1,51 @@
 {
   "name": "vuedt",
-  "description": "crazy lightweight Vuejs Date and Time picker component",
-  "version": "0.2.0",
-  "author": "koehr <[email protected]>",
-  "main": "./dist/index.js",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "webpack --progress --hide-modules"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name vuedt src/VueDT.vue",
+    "lint": "vue-cli-service lint"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nkoehring/vuedt.git"
-  },
-  "bugs": {
-    "url": "https://github.com/nkoehring/vuedt/issues"
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11"
   },
-  "homepage": "https://github.com/nkoehring/vuedt#readme",
-  "keywords": [
-    "vue",
-    "datetime",
-    "date",
-    "time",
-    "calendar",
-    "datepicker",
-    "timepicker"
-  ],
   "devDependencies": {
-    "babel-core": "^6.24.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-runtime": "^6.23.0",
-    "cross-env": "^3.0.0",
-    "css-loader": "^0.28.0",
-    "style-loader": "^0.17.0",
-    "vue": "^2.2.4",
-    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.3",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.2.4",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.2.1"
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
   },
-  "browserify": {
-    "transform": [
-      "vueify"
-    ]
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/standard"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "rules": {}
   },
-  "dependencies": {
-    "babel-preset-latest": "^6.24.0"
-  }
+  "vue": {
+    "css": {
+      "extract": false
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <vue-d-t v-model="date" :time="false" lang="de" />
+</template>
+
+<script>
+import VueDT from './VueDT.vue'
+
+export default {
+  components: { VueDT },
+  data () {
+    return {
+      date: new Date()
+    }
+  }
+}
+</script>

src/VueDT.vue

@@ -8,10 +8,10 @@
     </transition>
     <div class="pickers" :class="{ clock }" v-show="active">
       <div class="calendar-wrap">
-        <date-picker :value="value" :lang="lang" @input="showClock(); $emit('input', $event)" />
-        <button class="next" @click.stop="showClock()">switch to clock</button>
+        <date-picker :value="value" :lang="lang" @input="selectDate" />
+        <button class="next" @click.stop="showClock()" v-if="time">switch to clock</button>
       </div>
-      <div class="clock-wrap">
+      <div class="clock-wrap" v-if="time">
         <button class="prev" @click.stop="hideClock()">back to calendar</button>
         <time-picker ref="clockEl" :value="value" :lang="lang" @input="$emit('input', $event)" />
       </div>
@@ -28,6 +28,10 @@ export default {
   components: { DatePicker, TimePicker },
   props: {
     lang: { type: String, default: 'en' },
+    time: {
+      type: Boolean,
+      default: true
+    },
     value: {
       type: Date,
       required: true
@@ -37,6 +41,10 @@ export default {
     return { active: false, clock: false }
   },
   methods: {
+    selectDate (event) {
+      this.$emit('input', event)
+      if (this.time) this.showClock()
+    },
     showClock () {
       this.clock = true
       this.$refs.clockEl.setHandles()

src/VuedtCalendar.vue

@@ -3,17 +3,17 @@
 
     <div class="year-selector">
       <button @click.stop="baseYear = baseYear - 1">‹</button>
-      <button v-for="y in [baseYear - 1, baseYear, baseYear + 1]"
+      <button :key="y" v-for="y in [baseYear - 1, baseYear, baseYear + 1]"
         @click.stop="year = y"
         :class="{ selected: year === y }">
         {{ y }}
       </button>
       <button @click.stop="baseYear = baseYear + 1">›</button>
     </div>
-    
+
     <div class="month-selector">
       <button @click.stop="baseMonth = baseMonth - 1" :disabled="baseMonth < 3">‹</button>
-      <button v-for="m in [baseMonth - 2, baseMonth - 1, baseMonth, baseMonth + 1, baseMonth + 2]"
+      <button :key="m" v-for="m in [baseMonth - 2, baseMonth - 1, baseMonth, baseMonth + 1, baseMonth + 2]"
         @click.stop="month = m"
         :class="{ selected: month === m }">
         {{ msg.month[m] }}
@@ -23,13 +23,13 @@
 
     <div class="day-selector">
       <header>
-        <div class="day" v-for="d in msg.day">{{ d }}</div>
+        <div :key="d" class="day" v-for="d in msg.day">{{ d }}</div>
       </header>
-      <div class="row" v-for="y in 6">
-        <button v-for="x in 7"
-          @click.stop="selectDay(x,y)"
-          :class="cssClasses(x,y)">
-          {{ prettyDay(x,y) }}
+      <div :key="y" class="row" v-for="y in 6">
+        <button :key="x" v-for="x in 7"
+          @click.stop="selectDay(x, y)"
+          :class="cssClasses(x, y)">
+          {{ prettyDay(x, y) }}
         </button>
       </div>
     </div>
@@ -70,47 +70,47 @@ export default {
     }
   },
   methods: {
-    calendarDay (x,y) {
+    calendarDay (x, y) {
       const offset = this.monthOffset()
-      const n = ((y-1)*7) + x - this.monthOffset()
+      const n = ((y - 1) * 7) + x - offset
 
       return n
     },
-    isLastMonth (x,y) {
-      const n = this.calendarDay(x,y)
+    isLastMonth (x, y) {
+      const n = this.calendarDay(x, y)
       return n <= 0
     },
-    isNextMonth (x,y) {
-      const n = this.calendarDay(x,y)
+    isNextMonth (x, y) {
+      const n = this.calendarDay(x, y)
       return n > this.lastDay()
     },
-    isToday (x,y) {
-      const n = this.calendarDay(x,y)
+    isToday (x, y) {
+      const n = this.calendarDay(x, y)
       const today = new Date()
       const thisYear = this.year === today.getFullYear()
       const thisMonth = this.month === today.getMonth()
       return thisYear && thisMonth && n === today.getDate()
     },
-    prettyDay (x,y) {
-      const n = this.calendarDay(x,y)
+    prettyDay (x, y) {
+      const n = this.calendarDay(x, y)
 
-      if (this.isLastMonth(x,y)) {
+      if (this.isLastMonth(x, y)) {
         return this.lastDayBefore() + n
-      } else if (this.isNextMonth(x,y)) {
+      } else if (this.isNextMonth(x, y)) {
         return n - this.lastDay()
       } else {
         return n
       }
     },
-    cssClasses (x,y) {
-      const n = this.calendarDay(x,y)
+    cssClasses (x, y) {
+      const n = this.calendarDay(x, y)
       const thisYear = this.year === this.value.getFullYear()
       const thisMonth = this.month === this.value.getMonth()
       const thisDay = n === this.value.getDate()
 
       return {
-        'out-of-month': this.isLastMonth(x,y) || this.isNextMonth(x,y),
-        today: this.isToday(x,y),
+        'out-of-month': this.isLastMonth(x, y) || this.isNextMonth(x, y),
+        today: this.isToday(x, y),
         selected: thisYear && thisMonth && thisDay
       }
     },
@@ -123,8 +123,8 @@ export default {
     lastDay () {
       return new Date(this.year, this.month + 1, 0).getDate()
     },
-    selectDay (x,y) {
-      const n = this.calendarDay(x,y)
+    selectDay (x, y) {
+      const n = this.calendarDay(x, y)
 
       // save the time
       const d = new Date(this.value)
@@ -142,7 +142,7 @@ export default {
     this.day = now.getDate()
   },
   watch: {
-    value (newValue, oldValue) {
+    value (newValue) {
       const now = newValue || new Date()
       this.year = this.baseYear = now.getFullYear()
       this.month = this.baseMonth = now.getMonth()