added quasar css

Author: Dipak Sarkar

docs/.vuepress/clientAppEnhance.js

@@ -2,9 +2,16 @@ import number from "../../src";
 import { defineClientAppEnhance } from "@vuepress/client";
 import { Quasar } from "quasar";
 
+// Import Quasar css
+import "quasar/dist/quasar.css";
+
 export default defineClientAppEnhance(({ app }) => {
+  console.log("app", app);
   app.use(Quasar, {
     plugins: {}, // import Quasar plugins and add here
+    config: {
+      dark: true,
+    },
   });
   app.use(number);
 });

docs/.vuepress/components/PlayGround.vue

@@ -1,42 +1,88 @@
 <template>
-  <div class="q-gutter-y-sm">
-    <div class="column">
-      <div class="text-h6">Component</div>
-      <number
-        @update:model-value="(val) => (price = val)"
-        class="q-field__input"
-        :model-value="price"
-        v-bind="config"
-      />
-      <div>
-        Model value: <span class="text-bold">{{ price }}</span>
-      </div>
+  <div class="row q-col-gutter-lg">
+    <div class="col-sm-8 col-sx-12">
+      <q-list class="q-gutter-y-sm">
+        <div class="column">
+          <div class="text-h6">Component</div>
+          <q-field dense outlined v-model="price">
+            <template
+              v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
+            >
+              <number
+                :id="id"
+                class="q-field__input"
+                :modelValue="modelValue"
+                @update:model-value="emitValue"
+                v-bind="config"
+                v-show="floatingLabel"
+              />
+            </template>
+          </q-field>
+          <div>
+            Model value: <span class="text-bold">{{ price }}</span>
+          </div>
+        </div>
+        <div class="column">
+          <div class="text-h6">Reverse Fill</div>
+          <q-field dense outlined v-model="reverseFill">
+            <template
+              v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
+            >
+              <number
+                :id="id"
+                class="q-field__input"
+                :modelValue="modelValue"
+                @update:model-value="emitValue"
+                v-bind="configReverseFill"
+                v-show="floatingLabel"
+              />
+            </template>
+          </q-field>
+          <div>
+            Model value: <span class="text-bold">{{ reverseFill }}</span>
+          </div>
+        </div>
+        <div class="column">
+          <div class="text-h6">Directive</div>
+          <q-field dense outlined hint="masking doesn't work with directive">
+            <template v-slot:control>
+              <input
+                type="tel"
+                class="q-field__input"
+                v-number="config"
+                :value="priceDirective"
+                @change="({ target }) => (priceDirective = target.value)"
+              />
+            </template>
+          </q-field>
+          <div>
+            Model value: <span class="text-bold">{{ priceDirective }}</span>
+          </div>
+        </div>
+      </q-list>
     </div>
-    <div class="column">
-      <div class="text-h6">Reverse Fill</div>
-      <number
-        @update:model-value="(val) => (price = val)"
-        class="q-field__input"
-        :model-value="reverseFill"
-        v-bind="configReverseFill"
-      />
-      <div>
-        Model value: <span class="text-bold">{{ reverseFill }}</span>
-      </div>
-    </div>
-    <div class="column">
-      <div class="text-h6">Directive</div>
-      <input
-        type="text"
-        class="q-field__input"
-        v-number="config"
-        :value="priceDirective"
-        @change="({ target }) => (priceDirective = target.value)"
-      />
-      <div>masking doesn't work with directive</div>
-      <div>
-        Model value: <span class="text-bold">{{ priceDirective }}</span>
-      </div>
+    <div class="col-sm-4 col-xs-12">
+      <q-list class="q-gutter-y-sm">
+        <q-input dense v-model="config.prefix" type="text" label="Prefix" />
+        <q-input dense v-model="config.suffix" type="text" label="Suffix" />
+        <q-input
+          dense
+          v-model.number="config.precision"
+          type="number"
+          min="0"
+          max="5"
+          label="Precision"
+        />
+        <q-input dense v-model="config.decimal" type="text" label="Decimal" />
+        <q-input
+          dense
+          v-model="config.separator"
+          type="text"
+          label="Separator"
+        />
+        <q-checkbox dense v-model="config.masked" label="Masked" />
+        <q-checkbox dense v-model="config.reverseFill" label="Reverse Fill" />
+      </q-list>
     </div>
   </div>
 </template>
@@ -46,7 +92,7 @@ export default {
   data() {
     return {
       price: 154.52,
-      priceDirective: 6789.1,
+      priceDirective: 536.59,
       priceUnmasked: 6789.1,
       config: {
         decimal: ".",
@@ -65,10 +111,12 @@ export default {
       },
     };
   },
-  methods: {
-    onChange(args) {
-      console.log("args", args);
-    },
-  },
 };
 </script>
+
+<style lang="css">
+.container {
+  min-width: 800px;
+  max-width: 95vw;
+}
+</style>