Remove vuetify dependency and update example

example/App.vue

@@ -1,56 +1,36 @@
 <template>
-  <v-app id="app">
-    <v-content>
-      <v-container fluid>
-        <a class="github-fork-ribbon" href="https://github.com/iliojunior/vuetify-credit-card" title="Fork me on GitHub">Fork me on GitHub</a>
-        <div class="header-container">
-          <div class="header-bg" :style="{'background-color': bgc}"></div>
-            <header class="header">
-              <div class="intro-wrap">
-                <div class="intro">
-                  <h1>Vuetify Credit Card</h1>
-                  <p>This is an Vue.js wrapper for the amazing <a href="https://github.com/jessepollak/card">Card</a> project.</p>
-                </div>
-              </div>
-
-              <div class="card-wrapper mb-5">
-                <card v-model="cardDetail" v-bind:invert-card.sync="invertedCard"></card>
-              </div>
-
-              <v-layout row>
-                <v-flex md6 sm12 class="pr-2">
-                  <v-text-field name="name" label="Full name" type="text" v-model="cardDetail.name" />
-                </v-flex>
-
-                <v-flex md6 sm12 class="pl-2">
-                  <v-text-field name="number" label="Credit number" type="tel" v-model="cardDetail.number" />
-                </v-flex>
-              </v-layout>
-
-              <v-layout row>
-                <v-flex md6 sm12 class="pr-2">
-                  <v-text-field name="expiry" label="MM/YY" type="tel" v-model="cardDetail.expiry" />
-                </v-flex>
-
-                <v-flex md6 sm12 class="pl-2">
-                  <v-text-field
-                    name="cvc"
-                    label="CVC"
-                    type="tel"
-                    maxlength="3213"
-                    v-model="cardDetail.cvc"
-                    @focus="invertedCard = true"
-                    @blur="invertedCard = false"
-                  />
+  <div id="app">
+    <a class="github-fork-ribbon" href="https://github.com/iliojunior/vuetify-credit-card" title="Fork me on GitHub">Fork me on GitHub</a>
+    <div class="header-container">
+      <div class="header-bg" :style="{'background-color': bgc}"></div>
+        <header class="header">
+          <div class="intro-wrap">
+            <div class="intro">
+              <h1>Vuetify Credit Card</h1>
+              <p>This is an Vue.js wrapper for the amazing <a href="https://github.com/jessepollak/card">Card</a> project.</p>
+            </div>
+          </div>
 
-                </v-flex>
-              </v-layout>
-            </header>
+          <div class="card-wrapper mb-5">
+            <card v-model="cardDetail" v-bind:invert-card.sync="invertedCard"></card>
           </div>
-        </div>
-      </v-container>
-    </v-content>
-  </v-app>
+
+          <input name="number" placeholder="Card number" type="tel" v-model="cardDetail.number" v-card-focus>
+          <input name="name" placeholder="Full name" type="text" v-model="cardDetail.name" v-card-focus>
+          <input name="expiry" placeholder="MM/YY" type="tel" v-model="cardDetail.expiry" v-card-focus>
+          <input
+            name="cvc"
+            placeholder="CVC"
+            type="number"
+            v-model="cardDetail.cvc"
+            @focus="invertedCard = true"
+            @blur="invertedCard = false"
+            v-card-focus
+            />
+        </header>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -76,7 +56,3 @@ export default {
   }
 }
 </script>
-
-<style>
-  @import '~vuetify/dist/vuetify.min.css'
-</style>

example/main.js

@@ -1,9 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.min.css'
-
-Vue.use(Vuetify)
 
 /* eslint-disable */
 // console.log(Vue.version)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-credit-card",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Vue.js wrapper for credit card https://github.com/jessepollak/card",
   "keywords": [
     "card",
@@ -27,8 +27,7 @@
   "dependencies": {
     "bourbon": "^4.2.7",
     "payment": "^2.1.4",
-    "vue": "^2.1.0",
-    "vuetify": "^1.0.15"
+    "vue": "^2.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",