added change event on update value and fix the docs playground

Author: dipaksarkar

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  proseWrap: 'always',
+  tabWidth: 2,
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+};

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.fontWeight": "normal"
+}

docs/.vuepress/components/BaseNumber.vue

@@ -43,6 +43,14 @@ export default {
       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,
@@ -59,7 +67,7 @@ export default {
   directives: {
     number: directive,
   },
-  emits: ["update:modelValue"],
+  emits: ["update:model-value"],
   data() {
     return {
       maskedValue: this.modelValue,
@@ -72,7 +80,7 @@ export default {
       this.unmaskedValue = target.unmaskedValue;
     },
     change() {
-      this.$emit("update:modelValue", this.emittedValue);
+      this.$emit("update:model-value", this.emittedValue);
     },
   },
   computed: {
@@ -98,10 +106,7 @@ export default {
     config: {
       immediate: true,
       handler(val) {
-        this.$emit(
-          "update:modelValue",
-          this.emittedValue || this.unmaskedValue || this.maskedValue
-        );
+        this.$emit("update:model-value", this.emittedValue || this.modelValue);
       },
     },
   },

docs/.vuepress/components/PlayGround.vue

@@ -4,8 +4,7 @@
       <div class="grid">
         <div class="font-medium mb-2">Component</div>
         <BaseNumber
-          :modelValue="price"
-          @update:model-value="(val) => (price = val)"
+          v-model="price"
           v-bind="config"
         />
         <div class="mt-2">
@@ -15,6 +14,7 @@
       <div class="grid">
         <div class="font-medium mb-2">Directive</div>
         <BaseInput
+          v-if="updated"
           :modelValue="priceDirective"
           @update:model-value="(val) => (priceDirective = val)"
           v-number="config"
@@ -70,11 +70,11 @@
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Minimum value</div>
-        <BaseInput type="text" v-model="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="config.max" />
+        <BaseInput type="text" v-model.number="config.max" />
       </div>
     </div>
     <div class="mb-8">
@@ -86,9 +86,12 @@
 </template>
 
 <script>
+let emitTimer;
+
 export default {
   data() {
     return {
+      updated: true,
       exportDialogVisible: false,
       price: 154.52,
       priceDirective: 154.52,
@@ -104,5 +107,19 @@ export default {
       },
     };
   },
+  watch: {
+    config: {
+      deep: true,
+      handler (val) {
+        clearTimeout(emitTimer);
+        emitTimer = setTimeout(() => {
+          this.updated = false
+          this.$nextTick(() => {
+            this.updated = true;
+          });
+        }, 1000);
+      }
+    }
+  }
 };
 </script>

src/core.js

@@ -14,6 +14,18 @@ export function FacadeInputEvent() {
   })
 }
 
+/**
+ * Creates a CustomEvent('change') with detail = { facade: true }
+ * used as a way to identify our own change event
+ */
+export function FacadeChangeEvent() {
+  return new CustomEvent('change', {
+    bubbles: true,
+    cancelable: true,
+    detail: { facade: true }
+  })
+}
+
 /**
  * ensure that the element we're attaching to is an input element
  * if not try to find an input element in this elements childrens
@@ -84,7 +96,7 @@ 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())
+    return emit && el.dispatchEvent(FacadeInputEvent()) && el.dispatchEvent(FacadeChangeEvent())
   }
 }