add update:modelValue

Ebury · Sep 19, 2023 · 3a77417 · 3a77417
1 parent 11c7804
commit 3a77417
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/ec-text-filter/ec-text-filter.spec.ts b/src/components/ec-text-filter/ec-text-filter.spec.ts
@@ -95,6 +95,7 @@ describe('EcTextFilter', () => {
     expect((wrapper.findByDataTest('ec-input-field__input').element as HTMLInputElement).value).toBe('');
     await wrapper.findByDataTest('ec-input-field__input').setValue('some text');
     expect(wrapper.findComponent(EcTextFilter).emitted()[TextFilterEvent.CHANGE]?.[0]).toEqual(['some text']);
+    expect(wrapper.findComponent(EcTextFilter).emitted()[TextFilterEvent.UPDATE_MODEL_VALUE]?.[0]).toEqual(['some text']);
   });
 
   it('should emit the empty value when you click on close icon', async () => {
@@ -110,6 +111,7 @@ describe('EcTextFilter', () => {
 
     await wrapper.findByDataTest('ec-input-field__icon').trigger('click');
     expect(wrapper.findComponent(EcTextFilter).emitted()[TextFilterEvent.CHANGE]?.[0]).toEqual(['']);
+    expect(wrapper.findComponent(EcTextFilter).emitted()[TextFilterEvent.UPDATE_MODEL_VALUE]?.[0]).toEqual(['']);
   });
 
   it('should render with a sensitive class when isSensitive prop is set to true', () => {

diff --git a/src/components/ec-text-filter/ec-text-filter.vue b/src/components/ec-text-filter/ec-text-filter.vue
@@ -9,7 +9,7 @@
       :left-icon="IconName.SimpleSearch"
       :type="InputFieldType.TEXT"
       :icon="rightIcon"
-      @icon-click="emit(TextFilterEvent.CHANGE, '')"
+      @icon-click="emitModelValue('')"
     />
   </div>
 </template>
@@ -32,6 +32,7 @@ interface TextFilterProps {
 const props = defineProps<TextFilterProps>();
 
 const emit = defineEmits<{
+  'update:modelValue': [value: TextFilterEvents[TextFilterEvent.UPDATE_MODEL_VALUE]],
   'change': [value: TextFilterEvents[TextFilterEvent.CHANGE]],
 }>();
 
@@ -40,9 +41,14 @@ const inputModel = computed<TextFilterProps['modelValue']>({
     return props.modelValue;
   },
   set(value) {
-    emit(TextFilterEvent.CHANGE, value as unknown as TextFilterEvents[TextFilterEvent.CHANGE]);
+    emitModelValue(value);
   },
 });
 
+function emitModelValue(value: TextFilterProps['modelValue']) {
+  emit(TextFilterEvent.UPDATE_MODEL_VALUE, value);
+  emit(TextFilterEvent.CHANGE, value);
+}
+
 const rightIcon = computed(() => (props.modelValue ? IconName.SimpleClose : undefined));
 </script>
diff --git a/src/components/ec-text-filter/types.ts b/src/components/ec-text-filter/types.ts
@@ -6,9 +6,11 @@ export interface TextFilterProps {
 }
 
 export enum TextFilterEvent {
+  UPDATE_MODEL_VALUE = 'update:modelValue',
   CHANGE = 'change',
 }
 
 export interface TextFilterEvents {
+  [TextFilterEvent.UPDATE_MODEL_VALUE]: InputFieldProps['modelValue']
   [TextFilterEvent.CHANGE]: InputFieldProps['modelValue']
 }