moved project language to typescript from common js

.eslintignore

@@ -0,0 +1,3 @@
+!docs/.vitepress
+dist
+examples

.eslintrc.js

@@ -1,16 +1,10 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
+  root: true,
   env: {
-    node: true,
+    node: true
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'prettier'
-  ],
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: ['vue'],
-  rules: {},
+  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier']
 }

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 160,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "none",
+  "singleAttributePerLine": true
+}

.vscode/settings.json

@@ -1,11 +1,4 @@
 {
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "prettier.requireConfig": true
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": true
 }

docs/.vuepress/components/Number.vue

@@ -0,0 +1,72 @@
+<template>
+  <input
+    type="text"
+    autocomplete="off"
+    :value="maskedValue"
+    @change="change"
+    @input="input"
+    v-number="config"
+    class="v-number"
+  />
+</template>
+
+<script>
+export default {
+  name: 'Number',
+  props: {
+    modelValue: {
+      required: true
+    },
+    nullValue: [Number, String],
+    masked: Boolean,
+    reverseFill: Boolean,
+    prefill: Boolean,
+    precision: Number,
+    minimumFractionDigits: Number,
+    decimal: String,
+    min: Number,
+    max: Number,
+    separator: String,
+    prefix: String,
+    suffix: String
+  },
+  emits: ['update:model-value', 'input:model-value'],
+  data() {
+    return {
+      maskedValue: this.modelValue,
+      unmaskedValue: null
+    }
+  },
+  methods: {
+    input({ target }) {
+      this.maskedValue = target.value
+      this.unmaskedValue = target.unmaskedValue
+      this.$emit('input:model-value', this.emittedValue)
+    },
+    change() {
+      this.$emit('update:model-value', 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
+      }
+    }
+  }
+}
+</script>

docs/.vuepress/components/PlayGround.vue

@@ -3,7 +3,7 @@
     <div class="grid gap-y-4 md:grid-cols-2 md:gap-x-8 items-center my-8">
       <div class="grid">
         <div class="font-medium mb-2">Component</div>
-        <number
+        <Number
           v-if="updated"
           v-model="price"
           v-bind="config"
@@ -43,53 +43,93 @@
           Export
         </button>
         <Dialog v-model="exportDialogVisible">
-          <pre class="m-0" style="margin: 0">{{ config }}</pre>
+          <pre
+            class="m-0"
+            style="margin: 0"
+            >{{ config }}</pre
+          >
         </Dialog>
       </div>
     </div>
     <hr class="mb-8" />
     <div class="grid grid-cols-1 md:grid-cols-3 gap-x-8">
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Separator</div>
-        <BaseInput type="text" v-model="config.separator" />
+        <BaseInput
+          type="text"
+          v-model="config.separator"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Decimal</div>
-        <BaseInput type="text" v-model="config.decimal" />
+        <BaseInput
+          type="text"
+          v-model="config.decimal"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Prefix</div>
-        <BaseInput type="text" v-model="config.prefix" />
+        <BaseInput
+          type="text"
+          v-model="config.prefix"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Suffix</div>
-        <BaseInput type="text" v-model="config.suffix" />
+        <BaseInput
+          type="text"
+          v-model="config.suffix"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Precision</div>
-        <BaseInput type="number" v-model.number="config.precision" />
+        <BaseInput
+          type="number"
+          v-model.number="config.precision"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Null value</div>
-        <BaseInput type="text" v-model="config.nullValue" />
+        <BaseInput
+          type="text"
+          v-model="config.nullValue"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Minimum fraction digits</div>
-        <BaseInput type="text" v-model="config.minimumFractionDigits" />
+        <BaseInput
+          type="text"
+          v-model="config.minimumFractionDigits"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Minimum value</div>
-        <BaseInput type="text" v-model.number="config.min" />
+        <BaseInput
+          type="text"
+          v-model.number="config.min"
+        />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Maximum value</div>
-        <BaseInput type="text" v-model.number="config.max" />
+        <BaseInput
+          type="text"
+          v-model.number="config.max"
+        />
       </div>
     </div>
     <div class="mb-8">
-      <Checkbox v-model="config.masked" label="Masked?" />
-      <Checkbox v-model="config.reverseFill" label="Reverse Fill?" />
-      <Checkbox v-model="config.prefill" label="Prefill?" />
+      <Checkbox
+        v-model="config.masked"
+        label="Masked?"
+      />
+      <Checkbox
+        v-model="config.reverseFill"
+        label="Reverse Fill?"
+      />
+      <Checkbox
+        v-model="config.prefill"
+        label="Prefill?"
+      />
     </div>
   </div>
 </template>
@@ -110,8 +150,8 @@ export default {
         precision: 2,
         nullValue: '',
         masked: false,
-        reverseFill: false,
-      },
+        reverseFill: false
+      }
     }
   },
   watch: {
@@ -122,8 +162,8 @@ export default {
         this.$nextTick(() => {
           this.updated = true
         })
-      },
-    },
+      }
+    }
   },
   methods: {
     onChange() {
@@ -137,7 +177,7 @@ export default {
     },
     onBlur() {
       console.log('onBlur', arguments)
-    },
-  },
+    }
+  }
 }
 </script>