updated docs with playground

Author: Dipak Sarkar

docs/.vuepress/clientAppEnhance.js

@@ -1,14 +1,7 @@
 import number from "../../src";
 import { defineClientAppEnhance } from "@vuepress/client";
-import { QInput, QList, QField, QCheckbox } from "quasar";
-
-// Import Quasar css
-import "quasar/dist/quasar.css";
+import "virtual:windi.css";
 
 export default defineClientAppEnhance(({ app }) => {
-  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/BaseInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <input
+    :value="modelValue"
+    type="text"
+    class="block w-full transition-all rounded-md shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: "BaseInput",
+  props: {
+    modelValue: {
+      default: undefined,
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style scoped></style>

docs/.vuepress/components/BaseLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <section class="mb-12 min-w-0">
+    <div class="flex items-center justify-between mb-3">
+      <span class="text-xl font-medium">{{ label }}</span>
+    </div>
+    <div v-if="description" class="mb-3">{{ description }}</div>
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: "BaseLabel",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: undefined,
+    },
+  },
+};
+</script>
+
+<style scoped></style>

docs/.vuepress/components/BaseNumber.vue

@@ -0,0 +1,109 @@
+<template>
+  <input
+    type="text"
+    autocomplete="off"
+    :value="maskedValue"
+    @change="change"
+    @input="input"
+    v-number="config"
+    class="v-number"
+  />
+</template>
+
+<script>
+import directive from "../../../src/directive";
+import options from "../../../src/options";
+
+export default {
+  props: {
+    modelValue: {
+      required: true,
+    },
+    nullValue: {
+      type: [Number, String],
+      default: () => options.nullValue,
+    },
+    masked: {
+      type: Boolean,
+      default: false,
+    },
+    reverseFill: {
+      type: Boolean,
+      default: options.reverseFill,
+    },
+    precision: {
+      type: Number,
+      default: () => options.precision,
+    },
+    minimumFractionDigits: {
+      type: [Number, Boolean],
+      default: () => options.minimumFractionDigits,
+    },
+    decimal: {
+      type: String,
+      default: () => options.decimal,
+    },
+    separator: {
+      type: String,
+      default: () => options.separator,
+    },
+    prefix: {
+      type: String,
+      default: () => options.prefix,
+    },
+    suffix: {
+      type: String,
+      default: () => options.suffix,
+    },
+  },
+  directives: {
+    number: directive,
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      maskedValue: this.modelValue,
+      unmaskedValue: null,
+    };
+  },
+  methods: {
+    input({ target }) {
+      this.maskedValue = target.value;
+      this.unmaskedValue = target.unmaskedValue;
+    },
+    change() {
+      this.$emit("update:modelValue", this.emittedValue);
+    },
+  },
+  computed: {
+    emittedValue() {
+      return this.masked ? this.maskedValue : this.unmaskedValue;
+    },
+    config() {
+      const config = {};
+      Object.keys(this.$props)
+        .filter((item) => item !== "modelValue")
+        .forEach((item) => {
+          config[item] = this.$props[item];
+        });
+      return config;
+    },
+  },
+  watch: {
+    modelValue(val) {
+      if (this.unmaskedValue !== val) {
+        this.maskedValue = val;
+      }
+    },
+    config: {
+      immediate: true,
+      handler(val) {
+        this.$emit(
+          "update:modelValue",
+          this.emittedValue || this.unmaskedValue || this.maskedValue
+        );
+      },
+    },
+  },
+};
+</script>

docs/.vuepress/components/BaseSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <select
+    :value="modelValue"
+    type="text"
+    class="block w-full transition-all rounded-md shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
+    @input="$emit('update:modelValue', $event.target.value)"
+  >
+    <slot></slot>
+  </select>
+</template>
+
+<script>
+export default {
+  name: "BaseInput",
+  props: {
+    modelValue: {
+      default: undefined,
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style scoped></style>

docs/.vuepress/components/Checkbox.vue

@@ -0,0 +1,32 @@
+<template>
+  <label class="flex items-center" :class="{ 'text-gray-300 cursor-not-allowed': disabled, 'cursor-pointer': !disabled }">
+    <input
+      :checked="modelValue"
+      :disabled="disabled"
+      type="checkbox"
+      class="w-5 h-5 mr-2 rounded rounded border-gray-300 shadow-sm disabled:(text-gray-300 cursor-not-allowed) not-disabled:(text-primary cursor-pointer) focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
+      @input="$emit('update:modelValue', $event.target.checked)"
+    />
+    <span>{{ label }}</span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'Checkbox',
+  props: {
+    modelValue: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style scoped></style>

docs/.vuepress/components/Dialog.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-if="modelValue" class="w-screen h-screen fixed z-50 inset-0 flex bg-gray-600 bg-opacity-50" @click.self="$emit('update:modelValue', false)">
+    <div class="max-w-md md:relative m-auto p-8 bg-white rounded w-full h-auto shadow">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dialog',
+  props: {
+    modelValue: Boolean
+  },
+  emits: ['update:modelValue']
+}
+</script>