feat(vue-input): add debounced-input event

src/components/input-and-actions/VueInput/VueInput.spec.ts

@@ -1,5 +1,6 @@
 import { render, fireEvent } from '@testing-library/vue';
 import flushPromises from 'flush-promises';
+import { sleep } from '@/test/test-utils';
 import VueInput from './VueInput.vue';
 
 describe('VueInput.vue', () => {
@@ -66,6 +67,26 @@ describe('VueInput.vue', () => {
     expect(actual).toBe(expected);
   });
 
+  test('should emit debounced-input', async () => {
+    const { getByDisplayValue, emitted } = render(VueInput, {
+      propsData: {
+        label: 'this is the label',
+        value: 'this is the value',
+        name: 'name',
+        id: 'id',
+        debounce: 0,
+      },
+    });
+
+    await fireEvent.update(getByDisplayValue('this is the value'), 'this is the new value');
+    await sleep(10);
+
+    const actual = emitted()['debounced-input'][0][0];
+    const expected = 'this is the new value';
+
+    expect(actual).toBe(expected);
+  });
+
   test('should display error state', async () => {
     const { getByText, getByDisplayValue } = render(VueInput, {
       propsData: {

src/components/input-and-actions/VueInput/VueInput.vue

@@ -47,9 +47,7 @@
           v-bind="$attrs"
           v-on="{
             ...$listeners,
-            input: (e) => {
-              $emit('input', e.target.value, e);
-            },
+            input: onInput,
           }"
         />
 
@@ -76,12 +74,13 @@
 </template>
 
 <script lang="ts">
+import debounce from 'lodash/debounce';
 import { ValidationProvider } from 'vee-validate';
 import { defineComponent } from '@vue/composition-api';
 import { useIntersectionObserver } from '@/composables/use-intersection-observer';
 import { getDomRef } from '@/composables/get-dom-ref';
-import VueText from '@/components/typography/VueText/VueText.vue';
 import { shirtSizeValidator } from '@/components/prop-validators';
+import VueText from '@/components/typography/VueText/VueText.vue';
 
 export default defineComponent({
   name: 'VueInput',
@@ -108,9 +107,20 @@ export default defineComponent({
     trailingIcon: { type: String, default: null },
     size: { type: String, validator: shirtSizeValidator, default: 'md' },
     sizeAttribute: { type: Number, default: null },
+    debounce: { type: Number, default: null },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const input = getDomRef(null);
+    const debouncedInput = debounce((value: string) => emit('debounced-input', value), props.debounce || 0);
+    const onInput = (e: InputEvent) => {
+      const value = (e.target as HTMLInputElement).value;
+
+      emit('input', value, e);
+
+      if (props.debounce !== null) {
+        debouncedInput(value);
+      }
+    };
 
     useIntersectionObserver(input, (entries: IntersectionObserverEntry[]) => {
       if (props.autofocus) {
@@ -120,6 +130,7 @@ export default defineComponent({
 
     return {
       input,
+      onInput,
     };
   },
 });