updated docs

Author: dipaksarkar

docs/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^5.2.3",
     "core-js": "^3.8.3",
     "vue": "^2.6.14"
   },

docs/src/App.vue

@@ -1,21 +1,24 @@
 <template>
-  <div>
-    <vue-number v-bind="config" v-model="price" />
-    {{ price }}
+  <div class="container py-5">
+    <div class="row">
+      <div class="col-xs-12 col-sm-6">
+        <ComponentBased/>
+      </div>
+      <div class="col-xs-12 col-sm-6">
+        <DirectiveBased/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import ComponentBased from './components/ComponentBased.vue'
+import DirectiveBased from './components/DirectiveBased.vue'
+
 export default {
-  data() {
-    return {
-      price: 123456.86,
-      config: {
-        prefix: '$',
-        // min: 0,
-        reverseFill: true
-      }
-    }
-  },
+  components: {
+    DirectiveBased,
+    ComponentBased
+  }
 }
 </script>

docs/src/components/ComponentBased.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="component-based">
+    <div class="title">Component</div>
+    <VueNumber v-bind="config" v-model="price" />
+    <div>Price: {{ price }}</div>
+    <div>Calculated: {{ calculated }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      price: 123456.86,
+      config: {
+        min: 0,
+      },
+    };
+  },
+  watch: {
+    price(val) {
+      console.log("components/ComponentBased.watch:price", val);
+    },
+  },
+  computed: {
+    calculated() {
+      return this.price * 10;
+    },
+  },
+};
+</script>

docs/src/components/DirectiveBased.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="directive-based">
+    <div class="title">Directive</div>
+    <input v-number="config" v-model="price" />
+    <div>Price: {{ price }}</div>
+    <div>Calculated: {{ calculated }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      price: 123456.86,
+      config: {
+        min: 0,
+      },
+    };
+  },
+  watch: {
+    price(val) {
+      console.log("components/DirectiveBased.watch:price", val);
+    },
+  },
+  computed: {
+    calculated() {
+      return this.price * 10;
+    },
+  },
+};
+</script>

docs/src/main.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
-
 import VueNumberFormat from '../../'
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+
 Vue.config.productionTip = false
 Vue.use(VueNumberFormat)
 

docs/yarn.lock

@@ -2020,6 +2020,11 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
+  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"