@bildvitta/quasar-ui-asteroid 2.19.0 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/components/numeric-input/QasNumericInput.stories.js

@@ -44,13 +44,23 @@ export default {
 
     // Events
     input: {
-      description: 'Emitted when the component needs to change the model. Is also used by `v-model`.',
+      description: 'Emitted when the component needs to change the value.',
       table: {
         defaultValue: {
           detail: JSON.stringify({ value: 'number' }),
           summary: '{}'
         }
       }
+    },
+
+    'update-model': {
+      description: 'Emitted when the user inputs a new value in the component.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ value: 'object' }),
+          summary: '{}'
+        }
+      }
     }
   }
 }

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <q-field v-model="model" v-bind="$attrs">
-      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
-        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
+    <q-field :value="value" v-bind="$attrs">
+      <template #control="{ floatingLabel, id }">
+        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
       </template>
     </q-field>
   </div>
@@ -66,15 +66,13 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
-    },
-
-    model: {
-      get () {
-        return this.value
-      },
+    }
+  },
 
-      set () {
-        this.$emit('input', this.autoNumeric.getNumber())
+  watch: {
+    value (value) {
+      if (this.autoNumeric) {
+        this.autoNumeric.set(value)
       }
     }
   },
@@ -110,13 +108,30 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.value
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+      this.autoNumeric.set(this.value)
     })
   },
 
   beforeDestroy () {
     this.autoNumeric.remove()
+  },
+
+  methods: {
+    setSelect () {
+      this.$refs?.input?.select()
+    },
+
+    emitValue () {
+      this.$emit('input', this.autoNumeric.getNumber())
+    },
+
+    emitUpdateModel (value) {
+      this.$emit('update-model', {
+        value,
+        raw: this.autoNumeric.getNumber()
+      })
+    }
   }
 }
 </script>