Deprecate number field change event

shopware · May 28, 2024 · 8b4ac57 · 8b4ac57
1 parent d60aad5
commit 8b4ac57
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/.changeset/violet-carrots-watch.md b/.changeset/violet-carrots-watch.md
@@ -2,4 +2,6 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-Fix number field event
+# Fix number field events
+- Deprecated `change` event for `mt-number-field`
+- Added `update:modelValue` event to `mt-number-field`
diff --git a/...ponent-library/src/components/form/mt-number-field/mt-number-field.interactive.stories.ts b/...ponent-library/src/components/form/mt-number-field/mt-number-field.interactive.stories.ts
@@ -20,6 +20,7 @@ export const TestInputValue: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("42");
 
+    expect(args.change).toHaveBeenCalledWith(42);
     expect(args.updateModelValue).toHaveBeenCalledWith(42);
   },
 };
@@ -40,6 +41,7 @@ export const TestIncreaseByKeyStroke: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("11");
 
+    expect(args.change).toHaveBeenCalledWith(11);
     expect(args.updateModelValue).toHaveBeenCalledWith(11);
   },
 };
@@ -58,6 +60,7 @@ export const TestIncreaseByControl: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("11");
 
+    expect(args.change).toHaveBeenCalledWith(11);
     expect(args.updateModelValue).toHaveBeenCalledWith(11);
   },
 };
@@ -78,6 +81,7 @@ export const TestDecreaseByKeyStroke: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("9");
 
+    expect(args.change).toHaveBeenCalledWith(9);
     expect(args.updateModelValue).toHaveBeenCalledWith(9);
   },
 };
@@ -97,6 +101,7 @@ export const TestDecreaseByControl: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("9");
 
+    expect(args.change).toHaveBeenCalledWith(9);
     expect(args.updateModelValue).toHaveBeenCalledWith(9);
   },
 };
@@ -120,6 +125,7 @@ export const TestStepIncrease: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("11.40");
 
+    expect(args.change).toHaveBeenCalledWith(11.4);
     expect(args.updateModelValue).toHaveBeenCalledWith(11.4);
   },
 };
@@ -141,6 +147,7 @@ export const TestDecreaseConsidersMin: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("10");
 
+    expect(args.change).toHaveBeenCalledWith(10);
     expect(args.updateModelValue).toHaveBeenCalledWith(10);
   },
 };
@@ -162,6 +169,7 @@ export const TestIncreaseConsiderMax: MtNumberFieldStory = {
     // Notice that the value is of type string and the value of the event is of type number
     expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("10");
 
+    expect(args.change).toHaveBeenCalledWith(10);
     expect(args.updateModelValue).toHaveBeenCalledWith(10);
   },
 };

diff --git a/packages/component-library/src/components/form/mt-number-field/mt-number-field.stories.ts b/packages/component-library/src/components/form/mt-number-field/mt-number-field.stories.ts
@@ -9,6 +9,7 @@ export type MtNumberFieldMeta = SlottedMeta<
   | "inheritanceRemove"
   | "inheritanceRestore"
   | "isInherited"
+  | "change"
   | "updateModelValue"
   | "modelValue"
   | "hint"
@@ -26,6 +27,7 @@ export default {
         <mt-number-field
           v-bind="args"
           v-model="currentValue"
+          @change="args.change"
           @update:modelValue="args.updateModelValue"
           @inheritance-restore="inheritanceRestoreWrapper"
           @inheritance-remove="inheritanceRemoveWrapper">

diff --git a/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
@@ -235,6 +235,9 @@ export default defineComponent({
       // @ts-expect-error - target exists
       this.computeValue(event.target.value);
 
+      /** @deprecated tag: 5.0 - Will be removed use update:model-value instead */
+      this.$emit("change", this.currentValue);
+
       this.$emit("update:modelValue", this.currentValue);
     },
 
@@ -260,6 +263,10 @@ export default defineComponent({
       }
 
       this.computeValue((this.currentValue + this.realStep).toString());
+
+      /** @deprecated tag: 5.0 - Will be removed use update:model-value instead */
+      this.$emit("change", this.currentValue);
+
       this.$emit("update:modelValue", this.currentValue);
     },
 
@@ -270,6 +277,10 @@ export default defineComponent({
 
       // @ts-expect-error - wrong type because of component extends
       this.computeValue((this.currentValue - this.realStep).toString());
+
+      /** @deprecated tag: 5.0 - Will be removed use update:model-value instead */
+      this.$emit("change", this.currentValue);
+
       this.$emit("update:modelValue", this.currentValue);
     },