fix vuetify 2.0 issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-datetime-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "DatetimePicker component for Vuetify.js.",
   "main": "dist/index.js",
   "scripts": {
@@ -21,6 +21,7 @@
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
+    "deepmerge": "^4.0.0",
     "eslint": "^6.1.0",
     "eslint-config-standard": "^13.0.1",
     "eslint-loader": "^2.2.1",
@@ -29,23 +30,27 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.3",
+    "fibers": "^4.0.1",
     "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
     "less-loader": "^5.0.0",
+    "sass": "^1.22.10",
+    "sass-loader": "^7.2.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "url-loader": "^2.1.0",
     "vue-loader": "^15.7.1",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.8.0",
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "moment": "^2.22.2",
-    "vue": "^2.3.0",
+    "moment": "^2.24.0",
+    "vue": "^2.6.10",
     "vuetify": "^2.0.7"
   }
 }

src/components/DatetimePicker.vue

@@ -1,72 +1,72 @@
 <template>
-    <v-dialog
-            v-model="display"
-            full-width
-            :width="width"
-            :disabled="disabled">
-        <template v-slot:activator="{ on }">
-        <v-text-field
-                v-on="on"
-                :label="label"
-                :value="formattedDatetime"
-                :disabled="disabled"
-                :loading="loading"
-                :error-messages="errorMessages"
-                :error-count="errorCount"
-                :error="error"
-                :hide-details="hideDetails"
-                :append-icon="appendIcon"
-                :prepend-icon="prependIcon"
-                readonly>
-        </v-text-field>
-        </template>
+  <v-dialog
+    v-model="display"
+    full-width
+    :width="width"
+    :disabled="disabled">
+    <template v-slot:activator="{ on }">
+      <v-text-field
+        v-on="on"
+        :label="label"
+        :value="formattedDatetime"
+        :disabled="disabled"
+        :loading="loading"
+        :error-messages="errorMessages"
+        :error-count="errorCount"
+        :error="error"
+        :hide-details="hideDetails"
+        :append-icon="appendIcon"
+        :prepend-icon="prependIcon"
+        readonly>
+      </v-text-field>
+    </template>
 
-        <v-card>
-            <v-card-text style="padding: 0;">
-                <v-tabs fixed-tabs v-model="activeTab">
-                    <v-tab key="calendar">
-                        <slot name="dateIcon">
-                            <v-icon>event</v-icon>
-                        </slot>
-                    </v-tab>
-                    <v-tab key="timer" :disabled="!dateSelected">
-                        <slot name="timeIcon">
-                            <v-icon>access_time</v-icon>
-                        </slot>
-                    </v-tab>
-                    <v-tab-item key="calendar">
-                        <v-date-picker
-                                full-width
-                                v-model="datePart"
-                                scrollable
-                                :locale="locale"
-                                actions>
-                        </v-date-picker>
-                    </v-tab-item>
-                    <v-tab-item key="timer">
-                        <v-time-picker
-                                ref="timer"
-                                full-width
-                                class="v-time-picker-custom"
-                                v-model="timePart"
-                                scrollable
-                                :format="timePickerFormat"
-                                actions>
-                        </v-time-picker>
-                    </v-tab-item>
-                </v-tabs>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <slot name="actions"
-                      :parent="this"
-                >
-                    <v-btn color="grey lighten-1" text @click.native="clearHandler">{{clearText}}</v-btn>
-                    <v-btn color="green darken-1" text @click="okHandler">{{okText}}</v-btn>
-                </slot>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+    <v-card>
+      <v-card-text style="padding: 0;">
+        <v-tabs fixed-tabs v-model="activeTab">
+          <v-tab key="calendar">
+            <slot name="dateIcon">
+              <v-icon>event</v-icon>
+            </slot>
+          </v-tab>
+          <v-tab key="timer" :disabled="!dateSelected">
+            <slot name="timeIcon">
+              <v-icon>access_time</v-icon>
+            </slot>
+          </v-tab>
+          <v-tab-item key="calendar">
+            <v-date-picker
+              full-width
+              v-model="datePart"
+              scrollable
+              :locale="locale"
+              actions>
+            </v-date-picker>
+          </v-tab-item>
+          <v-tab-item key="timer">
+            <v-time-picker
+              ref="timer"
+              full-width
+              class="v-time-picker-custom"
+              v-model="timePart"
+              scrollable
+              :format="timePickerFormat"
+              actions>
+            </v-time-picker>
+          </v-tab-item>
+        </v-tabs>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <slot name="actions"
+              :parent="this"
+        >
+          <v-btn color="grey lighten-1" text @click.native="clearHandler">{{clearText}}</v-btn>
+          <v-btn color="green darken-1" text @click="okHandler">{{okText}}</v-btn>
+        </slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>

src/main.js

@@ -1,15 +1,10 @@
-import 'vuetify/src/stylus/main.styl'
+import 'vuetify/src/styles/main.sass'
 import './stylus/main.styl'
 import Vue from 'vue'
-import Vuetify from 'vuetify'
+import vuetify from './plugins/vuetify' // path to vuetify export
 import App from './app'
-import DatetimePicker from './index'
 
-Vue.use(Vuetify)
-Vue.use(DatetimePicker)
-
-/* eslint no-unused-vars: "off" */
-const app = new Vue({
-  el: '#app',
-  ...App
-})
+new Vue({
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')

src/plugins/vuetify.js

@@ -0,0 +1,37 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2018 Darren Fang
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import DatetimePicker from '../index'
+
+Vue.use(Vuetify)
+Vue.use(DatetimePicker)
+
+export default new Vuetify({
+  theme: {
+    dark: true
+  }
+})

webpack/webpack.base.config.js

@@ -1,6 +1,7 @@
 const {join} = require('path')
 const {CleanWebpackPlugin} = require('clean-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
 
 const resolve = dir => join(__dirname, '..', dir)
 
@@ -24,6 +25,21 @@ module.exports = {
         test: /\.(less)$/,
         loader: 'vue-style-loader!css-loader!less-loader'
       },
+      {
+        test: /\.s(c|a)ss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              fiber: require('fibers'),
+              indentedSyntax: true // optional
+            }
+          }
+        ]
+      },
       {
         enforce: "pre",
         test: /\.js$/,
@@ -66,7 +82,8 @@ module.exports = {
   },
   plugins: [
     new CleanWebpackPlugin(),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new VuetifyLoaderPlugin()
   ],
   resolve: {
     extensions: ['.js', '.vue', '.json', '.css', '.less', '.styl'],