updated docs

Author: Dipak Sarkar

docs/.vuepress/clientAppEnhance.js

@@ -1,17 +1,14 @@
 import number from "../../src";
 import { defineClientAppEnhance } from "@vuepress/client";
-import { Quasar } from "quasar";
+import { QInput, QList, QField, QCheckbox } 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.component("q-input", QInput);
+  app.component("q-list", QList);
+  app.component("q-field", QField);
+  app.component("q-checkbox", QCheckbox);
   app.use(number);
 });

docs/.vuepress/components/PlayGround.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="row q-col-gutter-lg">
     <div class="col-sm-8 col-sx-12">
-      <q-list class="q-gutter-y-sm">
+      <q-list :dark="isDark" class="q-gutter-y-sm">
         <div class="column">
           <div class="text-h6">Component</div>
-          <q-field dense outlined v-model="price">
+          <q-field :dark="isDark" dense outlined v-model="price">
             <template
               v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
             >
@@ -24,7 +24,7 @@
         </div>
         <div class="column">
           <div class="text-h6">Reverse Fill</div>
-          <q-field dense outlined v-model="reverseFill">
+          <q-field :dark="isDark" dense outlined v-model="reverseFill">
             <template
               v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
             >
@@ -44,7 +44,12 @@
         </div>
         <div class="column">
           <div class="text-h6">Directive</div>
-          <q-field dense outlined hint="masking doesn't work with directive">
+          <q-field
+            :dark="isDark"
+            dense
+            outlined
+            hint="masking doesn't work with directive"
+          >
             <template v-slot:control>
               <input
                 type="tel"
@@ -62,26 +67,56 @@
       </q-list>
     </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-list :dark="isDark" class="q-gutter-y-sm">
         <q-input
+          :dark="isDark"
+          dense
+          v-model="config.prefix"
+          type="text"
+          label="Prefix"
+        />
+        <q-input
+          :dark="isDark"
+          dense
+          v-model="config.suffix"
+          type="text"
+          label="Suffix"
+        />
+        <q-input
+          :dark="isDark"
           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
+          :dark="isDark"
+          dense
+          v-model="config.decimal"
+          type="text"
+          label="Decimal"
+        />
+        <q-input
+          :dark="isDark"
           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-checkbox
+          :dark="isDark"
+          dense
+          v-model="config.masked"
+          label="Masked"
+        />
+        <q-checkbox
+          :dark="isDark"
+          dense
+          v-model="config.reverseFill"
+          label="Reverse Fill"
+        />
       </q-list>
     </div>
   </div>
@@ -111,6 +146,16 @@ export default {
       },
     };
   },
+  computed: {
+    isDark() {
+      return this.$theme.darkMode;
+    },
+  },
+  watch: {
+    isDark(value) {
+      console.log("isDark:watch", value);
+    },
+  },
 };
 </script>
 

docs/.vuepress/styles/index.scss

@@ -0,0 +1,38 @@
+.home .hero img {
+  max-width: 450px !important;
+}
+
+h1 {
+  font-size: 2.2rem !important;
+}
+
+h2 {
+  font-size: 1.65rem !important;
+  padding-bottom: 0.3rem !important;
+  border-bottom: 1px solid var(--c-border);
+  transition: border-color var(--t-color);
+  -webkit-transition: border-color var(--t-color);
+  -moz-transition: border-color var(--t-color);
+  -ms-transition: border-color var(--t-color);
+  -o-transition: border-color var(--t-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600 !important;
+  line-height: 1.25 !important;
+}
+
+.theme-default-content:not(.custom),
+.page-edit,
+.page-nav {
+  max-width: 840px !important;
+}
+
+.toggle-dark-button {
+  display: none;
+}