diff --git a/.changeset/violet-carrots-watch.md b/.changeset/violet-carrots-watch.md index 2e90d5ae8..0919ca803 100644 --- 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/packages/component-library/src/components/form/mt-number-field/mt-number-field.interactive.stories.ts b/packages/component-library/src/components/form/mt-number-field/mt-number-field.interactive.stories.ts index 9c0f3880f..85044b6b1 100644 --- a/packages/component-library/src/components/form/mt-number-field/mt-number-field.interactive.stories.ts +++ b/packages/component-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 index 5faac1894..bb66e49e9 100644 --- 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 { 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 index c36c1a0fb..83ec2c2e4 100644 --- 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); },