Updated component and docs

Author: dipaksarkar

docs/.vuepress/components/BaseNumber.vue

@@ -3,9 +3,10 @@
     <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>
-        <BaseNumber
+        <number
           v-model="price"
           v-bind="config"
+          class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
         />
         <div class="mt-2">
           Number value: <code class="ml-2">{{ price }}</code>
@@ -91,30 +92,30 @@ export default {
     return {
       updated: true,
       exportDialogVisible: false,
-      price: 154.52,
-      priceDirective: 154.52,
+      price: 1234.567,
+      priceDirective: 1234.567,
       config: {
-        decimal: ".",
-        separator: ",",
-        prefix: "$",
-        suffix: "",
+        decimal: '.',
+        separator: ',',
+        prefix: '$',
+        suffix: '',
         precision: 2,
-        nullValue: "",
+        nullValue: '',
         masked: false,
         reverseFill: false,
       },
-    };
+    }
   },
   watch: {
     config: {
       deep: true,
-      handler (val) {
+      handler(val) {
         this.updated = false
         this.$nextTick(() => {
-          this.updated = true;
-        });
-      }
-    }
-  }
-};
+          this.updated = true
+        })
+      },
+    },
+  },
+}
 </script>

docs/.vuepress/components/PlayGround.vue

@@ -31,6 +31,10 @@ export default {
       type: Boolean,
       default: options.reverseFill,
     },
+    prefill: {
+      type: Boolean,
+      default: options.prefill,
+    },
     precision: {
       type: Number,
       default: () => options.precision,
@@ -39,12 +43,18 @@ export default {
       type: [Number, Boolean],
       default: () => options.minimumFractionDigits,
     },
-    max: [Number, Boolean, String],
-    min: [Number, Boolean, String],
     decimal: {
       type: String,
       default: () => options.decimal,
     },
+    min: {
+      type: [Number, Boolean],
+      default: () => options.min,
+    },
+    max: {
+      type: [Number, Boolean],
+      default: () => options.max,
+    },
     separator: {
       type: String,
       default: () => options.separator,
@@ -61,7 +71,7 @@ export default {
   directives: {
     number: directive,
   },
-  emits: ['update:modelValue', 'input:modelValue'],
+  emits: ['update:model-value'],
   data() {
     return {
       maskedValue: this.modelValue,
@@ -72,18 +82,23 @@ export default {
     input({ target }) {
       this.maskedValue = target.value
       this.unmaskedValue = target.unmaskedValue
-      this.$emit('input:modelValue', this.emittedValue)
     },
     change() {
-      this.$emit('update:modelValue', this.emittedValue)
+      this.$emit('update:model-value', this.emittedValue)
     },
   },
   computed: {
     emittedValue() {
       return this.masked ? this.maskedValue : this.unmaskedValue
     },
     config() {
-      return this.$props
+      const config = {}
+      Object.keys(this.$props)
+        .filter((item) => item !== 'modelValue')
+        .forEach((item) => {
+          config[item] = this.$props[item]
+        })
+      return config
     },
   },
   watch: {

src/component.vue

@@ -10,7 +10,7 @@ export function FacadeInputEvent() {
   return new CustomEvent('input', {
     bubbles: true,
     cancelable: true,
-    detail: { facade: true }
+    detail: { facade: true },
   })
 }
 
@@ -22,7 +22,7 @@ export function FacadeChangeEvent() {
   return new CustomEvent('change', {
     bubbles: true,
     cancelable: true,
-    detail: { facade: true }
+    detail: { facade: true },
   })
 }
 
@@ -33,7 +33,8 @@ export function FacadeChangeEvent() {
  * @param {HTMLInputElement} el
  */
 export function getInputElement(el) {
-  const inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input')
+  const inputElement =
+    el instanceof HTMLInputElement ? el : el.querySelector('input')
 
   /* istanbul ignore next */
   if (!inputElement) {
@@ -49,7 +50,9 @@ export function getInputElement(el) {
  * @param {Number} position
  */
 export function updateCursor(el, position) {
-  const setSelectionRange = () => { el.setSelectionRange(position, position) }
+  const setSelectionRange = () => {
+    el.setSelectionRange(position, position)
+  }
   setSelectionRange()
   // Android Fix
   setTimeout(setSelectionRange(), 1)
@@ -63,7 +66,11 @@ export function updateCursor(el, position) {
  * @param {Boolean} options.emit Wether to dispatch a new InputEvent or not
  * @param {Boolean} options.force Forces the update even if the old value and the new value are the same
  */
-export function updateValue(el, vnode, { emit = true, force = false, clean = false } = {}) {
+export function updateValue(
+  el,
+  vnode,
+  { emit = true, force = false, clean = false } = {}
+) {
   const { config } = el[CONFIG_KEY]
   let { oldValue } = el[CONFIG_KEY]
   let currentValue = vnode && vnode.props ? vnode.props.value : el.value
@@ -77,10 +84,10 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
 
   // check value with in range max and min value
   if (clean) {
-    if (config.max && unmasked > config.max) {
+    if (Number(config.max) && unmasked > Number(config.max)) {
       masked = number.format(config.max)
       unmasked = number.unformat(config.max)
-    } else if (config.min && unmasked < config.min) {
+    } else if (Number(config.min) && unmasked < Number(config.min)) {
       masked = number.format(config.min)
       unmasked = number.unformat(config.min)
     }
@@ -96,7 +103,11 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
 
     // this part needs to be outside the above IF statement for vuetify in firefox
     // drawback is that we endup with two's input events in firefox
-    return emit && el.dispatchEvent(FacadeInputEvent()) && el.dispatchEvent(FacadeChangeEvent())
+    return (
+      emit &&
+      el.dispatchEvent(FacadeInputEvent()) &&
+      el.dispatchEvent(FacadeChangeEvent())
+    )
   }
 }