fix: issues with v-model

db-ui · Jan 16, 2025 · ff370ed · ff370ed
1 parent 83e2be6
commit ff370ed
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 42 deletions.
diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -6,7 +6,7 @@ import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name
 import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
-import { handleFrameworkEvent } from "../../utils/form-components";
+import { handleFrameworkEventAngular, handleFrameworkEventVue } from "../../utils/form-components";
 <% } -%>
 
 useMetadata({});
@@ -29,8 +29,8 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, <%= formValue %>),
-				vue: () => handleFrameworkEvent(this, event, <%= formValue %>)
+				angular: () => handleFrameworkEventAngular(this, event, <%= formValue %>),
+				vue: () => handleFrameworkEventVue(this, event, <%= formValue %>)
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
@@ -181,12 +181,6 @@ ngAfterViewInit(): void {
 
 export default (tmp?: boolean) => {
 	const outputFolder = `${tmp ? 'output/tmp' : 'output'}`;
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/angular/src/utils/form-components.ts`,
-		from: /\/\/ ANGULAR:/g,
-		to: ''
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const upperComponentName = `DB${transformToUpperComponentName(component.name)}`;

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
@@ -12,12 +12,6 @@ export default (tmp?: boolean) => {
 		from: /react/g,
 		to: `vue`
 	});
-	// Activate vue specific event handling
-	replaceInFileSync({
-		files: `../../${outputFolder}/vue/src/utils/form-components.ts`,
-		from: `// VUE:`,
-		to: ``
-	});
 	for (const component of components) {
 		const componentName = component.name;
 		const vueFile = `../../${outputFolder}/vue/src/components/${componentName}/${componentName}.vue`;
@@ -43,6 +37,19 @@ export default (tmp?: boolean) => {
 				}
 			];
 
+			/* This is a workaround for valid/invalid Messages.
+			 *  If a valid/invalid message appears it will use the old this._value,
+			 *  so we need to overwrite this._value with the current event.target.value.   */
+
+			if (['select', 'textarea', 'input'].includes(componentName)) {
+				replacements.push({
+					from: 'if (props.onInput) {',
+					to:
+						'this._value = (event.target as any).value;\n' +
+						'if (props.onInput) {'
+				});
+			}
+
 			if (component?.config?.vue?.vModel) {
 				replacements.push({
 					from: 'const props =',

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -25,7 +25,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
 useMetadata({
@@ -57,8 +60,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -36,7 +36,10 @@ import {
 	ValueLabelType
 } from '../../shared/model';
 import DBInfotext from '../infotext/infotext.lite';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventVue,
+	handleFrameworkEventAngular
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -77,8 +80,8 @@ export default function DBInput(props: DBInputProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */

diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
@@ -11,7 +11,10 @@ import {
 import { DBRadioProps, DBRadioState } from './model';
 import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -36,8 +39,9 @@ export default function DBRadio(props: DBRadioProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
@@ -34,7 +34,10 @@ import {
 	InputEvent,
 	InteractionEvent
 } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -81,8 +84,8 @@ export default function DBSelect(props: DBSelectProps) {
 			}
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */

diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
@@ -10,7 +10,10 @@ import {
 import { DBSwitchProps, DBSwitchState } from './model';
 import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -40,8 +43,9 @@ export default function DBSwitch(props: DBSwitchProps) {
 			state._checked = (event.target as any)?.['checked'];
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -11,7 +11,10 @@ import {
 import type { DBTabItemProps, DBTabItemState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -48,8 +51,9 @@ export default function DBTabItem(props: DBTabItemProps) {
 			});
 
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event, 'checked'),
-				vue: () => handleFrameworkEvent(this, event, 'checked')
+				angular: () =>
+					handleFrameworkEventAngular(this, event, 'checked'),
+				vue: () => handleFrameworkEventVue(this, event, 'checked')
 			});
 		}
 	});

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -29,7 +29,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -68,8 +71,8 @@ export default function DBTextarea(props: DBTextareaProps) {
 				props.change(event);
 			}
 			useTarget({
-				angular: () => handleFrameworkEvent(this, event),
-				vue: () => handleFrameworkEvent(this, event)
+				angular: () => handleFrameworkEventAngular(this, event),
+				vue: () => handleFrameworkEventVue(this, event)
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */

diff --git a/packages/components/src/utils/form-components.ts b/packages/components/src/utils/form-components.ts
@@ -1,13 +1,19 @@
-export const handleFrameworkEvent = (
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const handleFrameworkEventAngular = (
 	component: any,
 	event: any,
 	modelValue: string = 'value'
 ): void => {
-	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
-	// VUE:component.emit(`update:${modelValue}`, event.target[modelValue]);
 	// Change event to work with reactive and template driven forms
-	// ANGULAR: component.propagateChange(event.target[modelValue]);
-	// ANGULAR: component.writeValue(event.target[modelValue]);
+	component.propagateChange(event.target[modelValue]);
+	component.writeValue(event.target[modelValue]);
 };
 
-export default { handleFrameworkEvent };
+export const handleFrameworkEventVue = (
+	component: any,
+	event: any,
+	modelValue: string = 'value'
+): void => {
+	// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+	component.emit(`update:${modelValue}`, event.target[modelValue]);
+};