add onchange event

ripe-tech · Nov 13, 2023 · 42a7831 · 42a7831
1 parent bd8411a
commit 42a7831
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-*
+* `onChange` event to input component - [#646](https://github.com/ripe-tech/ripe-components-vue/issues/646)
 
 ### Changed
 

diff --git a/vue/components/ui/atoms/input/input.stories.js b/vue/components/ui/atoms/input/input.stories.js
@@ -74,11 +74,16 @@ storiesOf("Components/Atoms/Input", module)
                 default: number("Max Length", null)
             }
         },
-        data: function() {
+        data: function () {
             return {
                 valueData: this.value
             };
         },
+        methods: {
+            onChange(value) {
+                console.log(value);
+            }
+        },
         watch: {
             value(value) {
                 this.valueData = value;
@@ -102,6 +107,7 @@ storiesOf("Components/Atoms/Input", module)
                         v-bind:min-width="minWidth"
                         v-bind:height="height"
                         v-bind:debounce-delay="debounceDelay"
+                        v-on:change="onChange"
                         v-bind:max-length="maxLength" />
                 </form-input>
                 <p>Text: {{ valueData }}</p>

diff --git a/vue/components/ui/atoms/input/input.vue b/vue/components/ui/atoms/input/input.vue
@@ -15,6 +15,7 @@
         v-on:blur="onBlur"
         v-on:keyup="onKeyup"
         v-on:keydown="onKeydown"
+        v-on:change="onChange"
     />
 </template>
 
@@ -198,6 +199,9 @@ export const Input = {
         onClick(event) {
             this.$emit("click", event);
         },
+        onChange(event) {
+            this.$emit("change", event);
+        },
         onFocus(event) {
             this.$emit("focus", event);
         },